Coordinates (de)

Wie ihr ja schon wisst nutzt Processing das kartesische Koordinatensystem. Wichtig ist darauf zu achten, dass bei Processing der Nullpunkt in der linken oberen Ecke liegt. Die X-Achse verläuft von links nach rechts und die Y-Achse von oben nach unten. Dies mag seltsam erscheinen ergibt sich aber aus der Tradition, dass Bitmaps halt immer so ausgelesen wurden.
In der Computergrafik wird fast immer mit dem kartesischen Koordinatensystem gearbeitet. Dies bietet einige Annehmlichkeiten, so kann man Koordinatensysteme auch verschieben, skalieren oder gar drehen. Das kann ich vielen Fällen das Zeichnen von Objekten vereinfachen. Stellt euch eine Animation eines Autos vor. Die Räder sollen beim fahren natürlich drehen. Wenn ihr dies per Processing zeichnet müsst ihr immer die aktuelle Position der Karosserie zu den Rädern addieren und diese dann drehen.  Wenn ihr dies mit der Veränderung des Koordinatensystems macht ist dies um ein vielfaches Einfacher. Hier müsst ihr nur das Koordinatensystem verschieben, die Karosserie zeichnen und dann nochmals das Koordinatensystem verschieben für die jeweiligen Räder. Solche Koordinatensystem Änderungen nennt man Transformationen. Davon gibt es drei Grundarten:

• Translation – Verschiebung
• Rotation – Drehung
• Skalierung – Grössenveränderung

Zu beachten ist, dass solche Transformationen nicht kommutativ sind. Es kommt daher darauf an in welcher Reihenfolge ihr die Transformationen aufruft.
In Processing heissen die Befehle wie folgt:

translate(float x,float y)
rotate(float angle)
scale(float xScale,float yScale)

Wenn ihr im 3D Modus arbeitet gibt es natürlich noch die 3.Komponente.

Häufig wird in diesem Zusammenhang auch von lokalen und globalen Koordinatensystemen gesprochen. Das globale Koordinatensystem ist das Ursprungskoordinatensystem, in Processing wäre dies die obere linke Ecke. Wird das Koordinatensystem mit Transformiert  so spricht man von einem lokalen Koordinatensystem(in Referenz zu dem globalen). Um zwischen diesen Koordinatensystemen zu wechseln gibt es von Processing aus zwei Befehle:

• pushMatrix() – sichert das aktuelle Koordinatensystem
• popMatrix() – setzt das Koordinatensystem auf die letzte gesicherte Postition

Diese beiden Befehle arbeiten nach dem Stack-Prinzip. Dies ist eine fast schon antike Form von Computer-Speicher-Methoden. Stellt euch einfach einen Stapel vor, wenn ihr pushMatrix aufruft, wird der Stapel um eine Blatt erhöht. Auf diesem Blatt wären in unserem Bespiel die aktuellen Daten unseres Koordinatensystem beschrieben. Nun kann man rotieren, scalieren und transformieren wie man will. Wenn man jetzt jedoch das Koordinatensystem wieder an die Position von vor dem letzten pushMatrix-Aufruf bringen will, dann muss man popMatrix aufrufen. Nun wird dies Blatt vom Stapel entfernt.

Mit einem Beispiel-Programm sollte dies besser zu Verstehen sein:

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
 
  pushMatrix();
    translate(200,200);
    rotate(calcAngle());
    scale(radius);
    smiley();          // funtions aufruf
  popMatrix();
 
  pushMatrix();
    translate(30,30);
    scale(.2);
    smiley();          // funtions aufruf
  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));
}

Hier gibts gleich mehrere Neuigkeiten, Linie 13:

float radius = dist(mouseX,mouseY,width/2,height/2);

Hier wird die Distanz vom Mauszeiger zur Fenstermitte ermittelt(Siehe Pythagoras).

Linie 14:

radius = map(radius,0,width,1,4);

Hier eine Zahl auf einen anderen Zahlenbereich gemapt. Der Original-Bereich ist von 0-width. Der Ziel-Bereich ist von 1-4. Nun wird radius von Original-Bereich auf den Ziel-Bereich transformiert.

Aufgaben

Schreib ein Programm welches einen Smiley am Mauszeiger folgen lässt. Dazu soll ein kleineres Smiley um den grossen Smiley in einer Umlaufbahn kreisen.