20. September 2012

Wir haben uns weiter mit dem Koordinatensystem auf der Zeichenfläche beschäftigt. Die Arbeit mit Verschiebungen und Rotationen verwirrt mich heute noch und ich musste mich ganz schön konzentrieren, damit die Smileys da landeten, wo ich wollte. Ich habe gelernt, dass ich mit dem Befehl pushMatrix(); den aktuellen Stand des Koordinatensystem speichern kann auf einem Stack und zu einem späteren Schritt mit popMatrix(); wieder abrufen kann. Es hat eine Weile gedauert bis ich es verstanden habe.  

Übung:

Ziel der Übung in Lektion 3 war es. einen kleinen Smiley um einen grösseren Smiley kreisen zu lassen. Der grosse Smiley richtet sich dabei immer dem Mauszeiger nach aus. Wird die Maus bewegt, skaliert sich der Smiley. Der kleine Smiley soll das alles berücksichtigen und sich immer relativ zum Grossen verändern.  

Ergebnis:

Die Lösung war ganz simpel, aber ich musste recht tüfteln um darauf zu kommen. Dafür hat mir die Übung geholfen, das ganze mit pushMatrix(); und popMatrix();  zu verstehen.  

Code:

Die Lösung lag in der Reihenfolge der Transformationen. Die Rotation musste zuerst durchgeführt werden, wenn der Punkt des "Zeichenstifts" noch auf dem Mittelpunkt des grossen Smileys liegt. Erst danach wird der kleine Smiley nach aussen verschoben! Ausschnitt:

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

float scaleFactor = dist(mouseX,mouseY,width/2,height/2);
scaleFactor = map(scaleFactor,0,width/2,0.3,2);

//Zum Mittelpunkt verschieben
translate(250,250);

//Zuerst drehen!
rotate(calcAngle());
scale(scaleFactor);
smiley();

rotate(radians(ang));
ang += map(scaleFactor,0.3,2,10,0.05);
translate(0,130);

scale(.2);
smiley();


}