24. September 2013
Zufallszahl: Nachdem wir unsere Malprogramme in der Klasse besprochen hatten, haben wir uns mit Zufallszahlen auseinandergesetzt. Gegeben war uns ein Code, der uns bei jedem Mausklick eine Ellipse mit zufälligen Merkmalen zeichnete. So veränderte sich die Dicke des Strichs in einem bestimmten Range, sowie dessen Farbe (Graustufen) etc. Unsere Aufgabe war es danach, mit dem vorgegebenen Code ein Programm zu schreiben, in welchem die Füllfarbe abhängig von der Grösse der Ellipse ist. Je grösser die Ellipse, desto rötlicher sollte sie sein.
void setup()
{
size(500,500);
background(0);
noLoop(); // wird nur einmal abgespielt
}
void draw()
{
float ellipseWidth = random(10, 100);
float ellipseHeight = random(10, 100);
color red1 = color(255,0,0);
color red2 = color(255,100,100);
color red3 = color(255,185,185);
color end;
if (ellipseWidth < 50) {
end = red3;
} else if (ellipseWidth < 75) {
end = red2;
} else {
end = red1;
}
stroke(random(100,200)); // von 100 bis 200 -> grau
fill(end); // fill(random(50,100),random(50,100),random(150,255)); // RGB
strokeWeight(random(1,5));
ellipse(random(0,width),random(0,height), ellipseWidth, ellipseHeight);
smooth();
}
void mousePressed()
{
redraw(); // alles bleibt auf dem Screen und wird noch einmal gezeichnet
}
Ich habe das so gelöst, das ich mit der „color“ Funktion drei verschiedene Rot definiert, und diese dann an verschiedene Bedingungen geknüpft habe.
Wald:
Als letztes hatten wir dann die Aufgabe einen zufälligen Wald zu zeichnen. Zuerst habe ich das so gelöst, dass ich im Illustrator einen Baum gezeichnet habe, den dann mit einer "for" Schlaufe auf der X und Y-Achse repetiert habe.
In einem zweiten Anlauf habe ich zuerst eine Funktion erstellt, die mit „if“ und „else if“ zwei Typen von Bäumen zeichnet. Einen Laubbaum und eine Tanne. Die Farben der Blätter beider Baumarten werden im Grünbereich random generiert.
Die Bäume werden mit der Funktion „pushMatrix“ und der Funktion „popMatrix“ zufällig verteilt, wobei immer eine Tanne vor einem Laubbaum steht. Um zu erreichen, dass die Bäume hintereinander und nicht übereinander standen, habe ich sie in der „pushMatrix“ in der „translate“ Funktion in der X-Position in einem bestimmten Bereich verschoben und in der Y-Position von der übergeordneten Variable „i“ einer „for“ Schlaufe abhängig gemacht.
Weil ich die Sonne animieren wollte, hatte ich ab diesem Zeitpunkt zwei verschiedene Versionen der Übung. In der einen Version ist der "background" in der "draw" Funktion, wobei in diesem Fall die Bäume übermalen werden und die Sonne schön animiert ist.
</pre>
void setup()
{
size(600, 400);
for (int i = 0; i < 40; i ++) {
pushMatrix();
translate(random(0, 480), i+150);
baum(1);
baum(2);
popMatrix();
}
}
int sonne = 250;
void draw()
{
if (sonne > 0) {
sonne--;
}
else
{
sonne=0;
}
background(#6CBCFF);
{
pushMatrix();
translate(0, sonne);
fill(#FFE627); // Sonne
ellipse(460, 60, 100, 100);
popMatrix();
}
fill(255); // Wolke
noStroke();
ellipse(140, 60, 40, 40);
ellipse(120, 45, 50, 50);
ellipse(110, 60, 60, 60);
fill(#4CAD46); // Huegel
noStroke();
ellipse(300, 650, 1000, 1000);
fill(#0D468E); // See
noStroke();
ellipse(300, 830, 3000, 1000);
}
void mousePressed()
{
redraw();
}
void baum(int typ) { // übergeordnet 2 Typen von Bäumen definieren
println(typ);
if (typ == 1) {
noStroke();
fill(color(75, random(93, 160), 73)); // random grüne Farbe
ellipse(40, 45, 50, 50);
ellipse(50, 70, 40, 40);
ellipse(70, 50, 60, 60);
fill(random(100, 120), 90, 64); // Baumstamm
beginShape();
vertex(50, 80);
vertex(60, 80);
vertex(60, 120);
vertex(50, 120);
endShape(CLOSE);
}
else if (typ == 2) {
noStroke();
fill(color(75, random(93, 160), 73)); // random grüne Farbe
triangle(30, 75, 58, 20, 86, 75);
triangle(20, 100, 58, 45, 96, 100);
fill(random(189, 137), 95, 64); // Baumstamm
beginShape();
vertex(55, 100);
vertex(60, 100);
vertex(60, 120);
vertex(55, 120);
endShape(CLOSE);
}
}
<pre>
Und in der anderen Version sind die Bäume schön zu sehen aber die Sonne zieht einen Strich wegen der Animation.
void setup()
{
size(600, 400);
background(#6CBCFF);
fill(255); // Wolke
noStroke();
ellipse(140, 60, 40, 40);
ellipse(120, 45, 50, 50);
ellipse(110, 60, 60, 60);
fill(#4CAD46); // Huegel
noStroke();
ellipse(300, 650, 1000, 1000);
fill(#0D468E); // See
noStroke();
ellipse(300, 830, 3000, 1000);
for (int i = 0; i < 40; i ++) {
pushMatrix();
translate(random(0, 480), i+150);
baum(1);
baum(2);
popMatrix();
}
}
int sonne = 250;
void draw()
{
{
pushMatrix();
translate(0,sonne--);
fill(#FFE627); // Sonne
ellipse(460, 60, 100, 100);
popMatrix();
}
}
void mousePressed()
{
redraw();
}
void baum(int typ) { // übergeordnet 2 Typen von Bäumen definieren
println(typ);
if (typ == 1) {
noStroke();
fill(color(75, random(93, 160), 73)); // random grüne Farbe
ellipse(40, 45, 50, 50);
ellipse(50, 70, 40, 40);
ellipse(70, 50, 60, 60);
fill(random(100, 120), 90, 64); // Baumstamm
beginShape();
vertex(50, 80);
vertex(60, 80);
vertex(60, 120);
vertex(50, 120);
endShape(CLOSE);
}
else if (typ == 2) {
noStroke();
fill(color(75, random(93, 160), 73)); // random grüne Farbe
triangle(30, 75, 58, 20, 86, 75);
triangle(20, 100, 58, 45, 96, 100);
fill(random(189, 137), 95, 64); // Baumstamm
beginShape();
vertex(55, 100);
vertex(60, 100);
vertex(60, 120);
vertex(55, 120);
endShape(CLOSE);
}
}
Ich habe noch bis Mittwoch den 25. September versucht daran herum zu tüfteln und es dabei noch mit einer "ArrayList" und dem "PVector" versucht. Dabei habe ich es geschafft alle Bäume "random" zu platzieren und sie mit den x und y Vektoren immer wieder an die selbe Stelle zu zeichnen. So blieb dieses Mal der Schweif der Sonne aus. Da ich aber auch die Farbe der Bäume "random" erstelle, wechseln diese nun ständig die Farbe. Dieses Problem habe ich leider nicht mehr beheben können. Ich habe es auf die gleiche Weise versucht wie mit der Position aber mit "color" irgendwie nicht funktioniert hat.
</pre>
int sonne = 250;
// float [][] baumPos;
ArrayList<PVector> baumPos = new ArrayList<PVector>();
//ArrayList<color> baumFarbe = new ArrayList<color>();
void setup()
{
size(600, 400);
for (int i=0; i < 30; i++) {
baumPos.add(new PVector(random(0, 480), i+150));
// baumFarbe.add(new color(75, random(93, 160), 73);
}
}
void draw()
{
background(#6CBCFF);
if (sonne > 0) {
sonne--;
}
else
{
sonne=0;
}
{
pushMatrix();
translate(0, sonne--);
fill(#FFE627); // Sonne
ellipse(460, 60, 100, 100);
popMatrix();
}
fill(255); // Wolke
noStroke();
ellipse(140, 60, 40, 40);
ellipse(120, 45, 50, 50);
ellipse(110, 60, 60, 60);
fill(#4CAD46); // Huegel
noStroke();
ellipse(300, 650, 1000, 1000);
fill(#0D468E); // See
noStroke();
ellipse(300, 830, 3000, 1000);
for (int i = 0; i < baumPos.size(); i ++) {
pushMatrix();
translate(baumPos.get(i).x, baumPos.get(i).y);
// baum(1 + i % 2);
// baum((int)(random(1,2)+0.5));
baum(1);
baum(2);
popMatrix();
}
}
void mousePressed()
{
redraw();
}
void baum(int typ) { // übergeordnet 2 Typen von Bäumen definieren
println(typ);
if (typ == 1) {
noStroke();
fill(color(72, random(97, 162), 76)); // random grüne Farbe
ellipse(40, 45, 50, 50);
ellipse(50, 70, 40, 40);
ellipse(70, 50, 60, 60);
fill(random(100, 120), 90, 64); // Baumstamm
beginShape();
vertex(50, 80);
vertex(60, 80);
vertex(60, 120);
vertex(50, 120);
endShape(CLOSE);
}
else if (typ == 2) {
noStroke();
fill(color(72, random(97, 162), 76)); // random grüne Farbe
triangle(30, 75, 58, 20, 86, 75);
triangle(20, 100, 58, 45, 96, 100);
fill(random(189, 137), 95, 64); // Baumstamm
beginShape();
vertex(55, 100);
vertex(60, 100);
vertex(60, 120);
vertex(55, 120);
endShape(CLOSE);
}
}
<pre>