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.

Day 3: Fraktal

21. September 2012

Ein Fraktal ist etwas, das sich selbst immer wiederholt. Deshalb muss beim Programmieren eines Fraktals darauf geachtet werden, dass diese Wiederholungen irgendwann unterbrochen werden, da der Computer sonst schnell überlastet sein und abstürzen kann. Ich wollte mein Fraktal etwas interaktiv gestalten und habe den Code so umgeschrieben, dass die Bewegungen dem Mauszeiger folgen. Dazu musste ich die "noLoop"-Funktion rausnehmen, was mir Anfangs etwas Schwierigkeiten bereitete. Als ich das geschafft hatte, musste ich mir überlegen, wie ich das mit dem Mauszeiger hinbekomme. Dazu habe ich einfach den Bildschirm in vier Bereiche aufgeteilt, in der je eine neue Funktion aufgerufen wird. Im Nachhinein gesehen was das eine ziemlich doofe Vorgehensweise, da ich so jedes mal wenn ich z.B. eine Linienstärke ändern wollte, dies in allen vier Funktionen tun musste. Zudem wurde der gesamte Programmiercode extrem lang und unübersichtlich.
void setup()
{
  size(600, 600);      // def. fenstergroesse

  randomSeed(millis());  // seed random

  smooth();           // aktiviere antialiasing
  strokeWeight(1);    // linienbreite
  stroke(0, 0, 0, 200);
}

void draw()
{

  if (mouseX < width*.5 &amp;&amp; mouseY < height*.5) //links oben
  {
    frameRate(8);
    background(255);
    pushMatrix();
    translate(width *.5, height*.5);
    wurzel1(2);
    popMatrix();
  }
  else if (mouseX < width*.5 &amp;&amp; mouseY > height*.5) //links unten
  {
    frameRate(8);
    background(255);
    pushMatrix();
    translate(width *.5, height*.5);
    wurzel3(2);
    popMatrix();
  }
  else if (mouseX > width*.5 &amp;&amp; mouseY < height*.5) // rechts oben
  {
    frameRate(8);
    background(255);
    pushMatrix();
    translate(width *.5, height*.5);
    wurzel4(2);
    popMatrix();
  }
  else {               //rechts unten
    frameRate(8);
    background(255);
    pushMatrix();
    translate(width *.5, height*.5);
    wurzel2(2);
    popMatrix();
  }
  //   redraw();
}

// funktion links oben
void wurzel1(int tiefe)
{
  if (tiefe <=0)    // teste ob das ende erreicht worden ist
  {
    // zeichen auge
    pushMatrix();
    scale(2);
    auge(mouseX, mouseY, mouseX-mouseY);
    popMatrix();

    return;
  }

  // zeichne zweige
  int x;
  int y;
  int count = (int)random(1, 6);
  for (int i = 0; i < count;i++)
  {
    x = (int)random(-100, 10);
    y = (int)random(-150, 10);

    line(0, 0, x, y);

    pushMatrix();
    translate(x, y);
    scale(random(.3, .95));
    wurzel1(tiefe-1);
    popMatrix();
  }
}

// funktion rechts
void wurzel2(int tiefe)
{
  if (tiefe <=0)    // teste ob das ende erreicht worden ist
  {
    // zeichen auge
    pushMatrix();
    scale(2);
    auge(mouseX, mouseY, mouseX-mouseY);
    popMatrix();

    return;
  }

  // zeichne zweige rechts
  int x;
  int y;
  int count = (int)random(1, 6);
  for (int i = 0; i < count;i++)
  {
    x = (int)random(-10, 100);
    y = (int)random(-10, 150);

    line(0, 0, x, y);

    pushMatrix();
    translate(x, y);
    scale(random(.3, .95));
    wurzel2(tiefe-1);
    popMatrix();
  }
}

// funktion links unten
void wurzel3(int tiefe)
{
  if (tiefe <=0)    // teste ob das ende erreicht worden ist
  {
    // zeichen auge
    pushMatrix();
    scale(2);
    auge(mouseX, mouseY, mouseX-mouseY);
    popMatrix();

    return;
  }

  // zeichne zweige
  int x;
  int y;
  int count = (int)random(1, 6);
  for (int i = 0; i < count;i++)
  {
    x = (int)random(-150, 10);
    y = (int)random(-10, 150);

    line(0, 0, x, y);

    pushMatrix();
    translate(x, y);
    scale(random(.3, .95));
    wurzel2(tiefe-1);
    popMatrix();
  }
}

// funktion oben rechts
void wurzel4(int tiefe)
{
  if (tiefe <=0)    // teste ob das ende erreicht worden ist
  {
    // zeichen auge
    pushMatrix();
    scale(2);
    auge(mouseX, mouseY, mouseX-mouseY);
    popMatrix();

    return;
  }

  // zeichne zweige rechts
  int x;
  int y;
  int count = (int)random(1, 6);
  for (int i = 0; i < count;i++)
  {
    x = (int)random(-10, 150);
    y = (int)random(-150, 10);

    line(0, 0, x, y);

    pushMatrix();
    translate(x, y);
    scale(random(.3, .95));
    wurzel2(tiefe-1);
    popMatrix();
  }
}

//zeichne augen

void auge(int colorR, int colorG, int colorB)

{
  noFill();
  strokeWeight(4);
  arc(0, 0, 50, 50, radians(180+25), radians(360-25));
  arc(0, -21, 50, 50, radians(25), radians(180-25));
  arc(0, -3, 50, 31, radians(180+25), radians(360-25));
  fill(colorR, colorG, colorB);
  ellipse(0, -7, 20, 20);
  fill(255);
  ellipse(-3, -10, 8, 8);
}

Als weiteren Schritt habe ich ausprobiert was passiert, wenn man den Hintergrund nicht jedes Mal neu zeichnet und habe herausgefunden, dass man so noch lustige Bilder zeichnen kann:   Arrays Zudem haben wir in dieser Lektion gelernt, wie man anhand von Arrays einfach mehrere Bilder laden kann. Als Übung mussten wir bei den Planeten-Bildern den schwarzen Hintergrund entfernen, sodass er transparent wird. Die Hintergründe habe ich jeweils mit Photoshop entfernt und dann in Programmcode einfach die Namen der Bilder angepasst.
PImage[] imageList = null;    // variable sauber initialisieren

void setup()
{
  size(600,600);      // def. fenstergroesse

  imageList = new PImage[4];
  imageList[0] = loadImage("./images/1.png");
  imageList[1] = loadImage("./images/2.png");
  imageList[2] = loadImage("./images/3.png");
  imageList[3] = loadImage("./images/4.png");

}

void draw()
{
  background(255);

  pushMatrix();
    translate(10,100);
    for(int i=0;i < imageList.length; i++)
    {
       image(imageList[i],0,0,140,140);
       translate(150,0);
    }
  popMatrix();
}