Willkommen auf unserem Seminar-Blog

Immer auf dem aktuellen Stand bleiben

Dieser Seminar-Blog befindet sich noch im Aufbau und wird in den kommenden Tagen entsprechend verfeinert.

Member Login

Lost your password?

Registration is closed

Sorry, you are not allowed to register by yourself on this site!

You must either be invited by one of our team member or request an invitation by email at viad.info {at} zhdk {dot} ch.

loadImage, redraw() & Random

23. September 2013

Wald vor leisen Bäumen Ziel: Ein "Waldgenerator" der durch Klicken der Maus einen unregelmässigen aber "kontrollierbaren" Wald erschafft. Als erstes initialisierte ich ein paar globale Variabeln und erstellte ein "noLoop()" im "void setup" um eine ständige Wiederholung der Funktion zu verhindern.
<code>

//in diesem Code existieren:
PImage img; // die Bilder "baumbild1.png"...
PImage omg; //  ...und baumbild2.png
int g; // eine Variabel für die Y position der Maus
int rot; // vier Integer-Variabeln für die Farbwerte
int gruen;
int blau;
int t = 255;

void setup()
{
  img = loadImage("baumbild1.png");
  omg = loadImage("baumbild2.png");
  
  size(700, 700);
  background(131, 117, 1);
  fill (46, 149, 255);
  noStroke();
  rect(0, 0, width, height*0.3);
  smooth(8);
  noLoop();
}

Zum üblichen Inhalt des "void setup()" kamen diesmal zwei weitere Ausdrücke hinzu:
[Java]
img = loadImage(baumbild1.png) 
omg = loadImage(baumbild2.png);// lade die entsprechenden Bilddateien aus meinem "Data"-Ordner.

noLoop() // führe diese Funktion nur einmal aus.
Anschliessend definierte ich eine neue Funktion die mir eine kleine Anzahl Bäume - in zufälliger Anordnung und Farbe, doch bestimmter Grösse - generieren sollte. Ich nannte sie liebevoll "waldi":
<code>
void waldi()
{
  for (int i=0; i &amp;amp;amp;amp;amp;amp;lt;= 1; i++) //wiederholt die Funktion bis i=1 ist.
  {
    g = mouseY/8; // eine Variabel die vom Y-Wert der Maus abhängig ist.
    rot = (int) random(0, 80); //Farbwerte die bis zu einem gewissen Grad zufällig sind.
    gruen = (int) random(70, 255);
    blau = (int) random(0, 80);
    tint(rot, gruen, blau, t); // Färbt die weissen Orginalbilder mit den definierten Farbwerten ein.

    image(img, random(mouseX-g*5, mouseX+g*5), random(mouseY-g, mouseY+g), g*5, g*5); // fügt die geladenen Bilder ein.
    image(omg, random(mouseX-g, mouseX+g*5), random(mouseY-g, mouseY+g), g*5, g*5);
  }
}
Mit einer "if"-Bedingung im folgenden "void draw()" konnte ich nun die Reaktion auf Mausklicks bestimmen. Ausserdem verhindere einer Bedingung innerhalb der bestehenden, jegliche Reaktion sofern der Wert mouseY kleiner als 150 ist. Da ich im "void setup()" das Wiedeholen der Vorgänge unterbunden habe (noLoop), verwendete ich den Befehl "redraw" in der Funktion "mousePressed()" um bei jedem Klick die Funktion "waldi()" erneut auszuführen.
<code>
void draw()
{
  if (mousePressed)
  {
    if (mouseButton == LEFT)
    {
      if (mouseY &lt; 150)
        waldi();
    }  
    else if (mouseButton == RIGHT)
    {
      background(131, 117, 1);
      fill (46, 149, 255);
      noStroke();
      rect(0, 0, width, height*.3);
    }
  }
}

void mousePressed()
{
  redraw(); // wenn die Maus geklickt wird, führst du die Funktion &quot;void draw()&quot; nochmals aus
}

Erkenntnis: Beim Programmieren scheint sehr viele Wege zu geben dasselbe Problem zu lösen. Langsam leuchtet mir ein, weshalb es sich lohnt, den geplanten Lösungsansatz im Voraus durchzudenken.