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.

20.09.2013 – Smiley, Rekursive Funktionen und Fraktale

25. September 2013

Smiley: Zuerst habe ich die beiden beiden „pushMatrix“ und „popMatrix“ Funktionen zusammen genommen. So beziehen sich alle vorherigen Funktionen und Anweisungen des grossen Smileys auch auf den kleinen Smiley. Den kleinen Smiley musste ich danach auf der X und Y-Achse noch um 60 Pixel verschieben, so dass dieser sich in einer Umlaufbahn um den grossen befindet. Damit der kleine Smiley um den grossen rotiert, habe ich eine globale „float“ Variable mit dem Namen „orbit“ bestimmt und diese in der „draw“ Funktion als „orbit = orbit+0.01“ angegeben. Weil ich wollte, dass der kleine Smiley gleichzeitig auch noch um seine eigene Achse rotiert, habe ich eine zweite globale „float“ Variable mit dem Namen „drehung“ bestimmt und dem kleinen Smiley eine rotate-Funktion mit dem Parameter „drehung+=0.1“ angegeben. Indem ich die „mouseX“ und „mouseY“ Koordinaten in die „translate“ Funktion des grossen Smileys eingegeben habe konnte ich erzielen, dass der Smiley der Maus folgt. Jetzt störte mich nur noch, dass der grosse Smiley abhängig von der Mausposition skaliert und rotiert, weshalb ich die beiden Funktionen mit „//“ funktionsunfähig gemacht habe.

float orbit;
float drehung;

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

smooth(); // aktiviere antialiasing
 strokeWeight(15); // linienbreite
}

void draw()
{
 background(255); // def. hintergrundfarbe

float radius = dist(mouseX, mouseY, width/2, height/2); // rechne die distanz vom mousecursor zum fensterzentrum aus
 radius = map(radius, 0, width, 1, 4); // rechne aus in welchem bereich der radius am schluss sein sollte

 orbit = orbit+0.01;

pushMatrix();
 translate(mouseX, mouseY);
 // rotate(calcAngle());
 // scale(radius);
 smiley(); // funtions aufruf

rotate(orbit);
 translate(90, 90);
 rotate(drehung+=0.1);
 scale(.2);
 smiley();
 popMatrix();
}

// funktion
void smiley()
{
 noFill();
 ellipse(0, 0, 180, 180); // kopf

fill(0);
 ellipse(0 - 30, 0 - 30, 20, 20); // linkes augen
 ellipse(0 + 30, 0 - 30, 20, 20); // rechtes augen

noFill();
 arc(0, 0, 100, 100, radians(20), radians(180-20)); // mund
}

// berechne den winkel zur fenstermitter vom mausecursor aus
// die winkel sind in radiant
float calcAngle()
{
 return -atan2(mouseX - (width / 2), mouseY - (height / 2));
}

void mousePressed() {
 save();
}

smiley Rekursive Funktionen und Fraktale: Danach haben wir uns mit rekursiven Funktionen und Fraktalen auseinandergesetzt. Wir bekamen einen Baum, bei dem man n-Mal Äste und Verzweigungen generieren konnte und dem mal beim n-ten Mal sagen konnte, dass er jetzt bitte aufhören sollte Äste zu generieren. Statt einem weiteren Ast wird dann am Schluss ein Blatt generiert. In einem ersten Anlauf habe ich einfach die Blätter entfernt und ein bisschen mit den Parametern herumgespielt. Dabei ist so etwas wie eine Wolke entstanden. Bildschirmfoto 2013-09-20 um 15.58.40

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

randomSeed(millis()); // seed random

smooth(); // aktiviere antialiasing
 strokeWeight(5); // linienbreite
 stroke(0, 0, 0, 150);

noLoop();
}

void draw()
{
 background(255);

pushMatrix();
 translate(width *.5, height *.5);
 wurzel(8);
 popMatrix();
}

void mousePressed()
{
 // redraw();
 save(fraktal.JPEG);
}

// funktion
void wurzel(int tiefe)
{
 if (tiefe <= 0) // teste ob das ende erreicht worden ist
 {
 // zeichen blueten
 // pushStyle();
 // int clr = (int)random(100,255);
 // stroke(clr,0,0,190);
 // fill(clr,0,0,190);
 // ellipse(0,0,50,50);
 // popStyle();

return;
 }

// zeichne zweige
 int x;
 int y;
 int count = (int)6;
 for (int i = 0; i < count;i++)
 {
 x = -(int)random(-100, 100);
 y = -(int)random(-100, 100); // minus, weil baum wächst

line(0, 0, x, y);

pushMatrix();
 translate(x, y);
 scale(random(.6, .6)); // wird immer kleiner
 wurzel(tiefe-1);
 popMatrix();
 }
}

Danach habe ich einen Blumenstrauss erstellt. Die Blätter der Blüten sind mit einer "for" Schleife erstellt, die um die Blüte rotiert. Bildschirmfoto 2013-09-25 um 20.36.26



int gelb = color(random(224, 255), 255, random(1, 50), 200);

void setup()
{
 size(600, 600); // def. fenstergroesse
 background(255);
 randomSeed(millis()); // seed random

smooth(); // aktiviere antialiasing
 strokeWeight(5); // linienbreite
 stroke(0, 0, 0, 150);

noLoop();
}

void draw()
{
 pushMatrix();
 translate(width *.5, height - 20);
 wurzel(4);
 popMatrix();
}

void mousePressed()
{
 redraw();
}

// funktion
void wurzel(int tiefe)
{
 if (tiefe <= 0) // teste ob das ende erreicht worden ist
 {
 // zeichen blueten
 pushStyle();
 int clr = (int)random(100, 255);
 fill(random(1, 150), random(1, 100), random(1, 150), 150); // zufällige Farben

for (int i = 0; i < 5; i++) {
 stroke(clr, 0);
 ellipse(0, -40, 50, 50);
 rotate(radians(72));
 }
 stroke(clr, 0);
 fill(gelb);
 ellipse(0, 0, 50, 50);
 popStyle();



return;
 }

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

y = -(int)random(10, 200);

line(0, 0, x, y);

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