Form & Code: Grundlagen

Form II

2D-Transformationen, Tranformationen zurücksetzen: Push&Pop

2D-Transformationen

Processing bietet eine Reihe von Transformationsmöglichkeiten für das Zeichnen in 2D und 3D. Diese Operationen betreffen immer die gesamte Zeichenfläche! D.h. jede Transformation bewegt die gesamte Zeichenfläche und betrifft alles was anschließend gezeichnet wird.

translate(...) verschiebt die Zeichenfläche in x- und y-Richtung...

size(400,400);
background(255);

rectMode(CORNER);

noStroke();
fill(128,0,0,128);
rect(10,10,200,200);

translate(60,100);

fill(0,0,128,128);
rect(10,10,200,200);

...rotate(...) rotiert die Zeichenfläche um den Punkt (0,0) (Achtung: radians/degrees)...

size(400,400);
background(255);

rectMode(CORNER);

noStroke();
fill(128,0,0,128);
rect(10,10,200,200);

rotate(radians(10));

fill(0,0,128,128);
rect(10,10,200,200);

...und scale(...) skaliert die Zeichenfläche.

size(400,400);
background(255);

rectMode(CORNER);

noStroke();
fill(128,0,0,128);
rect(10,10,200,200);

scale(1.5);

fill(0,0,128,128);
rect(10,10,200,200);

Beispiel: in die Bildschirmmitte verschieben, da dann um die Mitte rotieren und zentriertes Rechteck zeichnen, skalieren, rotieren, erneut zeichnen.

size(400,400);
background(255);
noStroke();

rectMode(CENTER);

translate(width/2,height/2);

fill(128,0,0,128);
rect(0,0,200,200);

rotate(radians(45));

fill(0,0,128,128);
rect(0,0,200,200);

scale(0.5);
rotate(radians(10));

fill(0,0,128,128);
rect(0,0,200,200);

↑

Transformationen zurücksetzen: Push&Pop

Um nach mehreren Transformationen wieder zurück zum Anfang zu kommen, erst die aktuelle Transformation merken: pushMatrix(), später dann die alte Transformation zurückfuren: popMatrix().

size(400,400);
background(255);
noStroke();
fill(0);

pushMatrix();
translate(width/2,height/2);
rotate(radians(45));
rectMode(CENTER);
rect(0,0,100,100);
popMatrix();

rect(0,0,100,100);

Push/Pop setzt auch mehrere Transofmationen (z.B. in einer Schleife) wieder zurück...

size(400,400);
background(255);
noStroke();

rectMode(CENTER);

translate(width/2,height/2);

pushMatrix();
for (int i=0; i<9; i++) {
  rotate(radians(10));
  fill(128,0,0,128);
  rect(0,0,200,200);
}
popMatrix();

noFill();
stroke(0);
rect(0,0,300,300);

pushMatrix() und popMatrix() können mehrmals hintereinander geschaltet werden. Z.B. um am Ende jeder Zeile zurück zu springen oder um nach der Rotation jedes Rechtecks wieder in gerader Linie weiter zu zeichnen.

size(420, 420);
rectMode(CENTER);
noFill();

background(255);
translate(20,20);
for (int i=0; i<20; i++) {
  pushMatrix();
  for (int j=0; j<20; j++) {
    pushMatrix();
    rotate(radians(random(90)));
    stroke(i*12,255-(i+j)*6,j*12);
    rect(0, 0, 20, 20);
    popMatrix();
    translate(20, 0);
  }
  popMatrix();
  translate(0, 20);
}

Das selbe gilt für scale(...).

size(420, 420);
rectMode(CENTER);
noFill();

background(255);
translate(20,20);
for (int i=0; i<20; i++) {
  pushMatrix();
  for (int j=0; j<20; j++) {
    pushMatrix();
    rotate(radians(random(90)));
	scale(random(2));
    stroke(i*12,255-(i+j)*6,j*12);
    rect(0, 0, 20, 20);
    popMatrix();
    translate(20, 0);
  }
  popMatrix();
  translate(0, 20);
}

Tranformationen interaktiv: Variable zum Merken des Drehwinkels, reagieren auf Tastatur.

float winkel = 0;

void setup() {
  size(400,400);
}

void draw() {
  background(255);  
  noStroke();
  rectMode(CENTER);
  translate(width/2,height/2);
  rotate(radians(winkel));
  fill(128,0,0,128);
  rect(0,0,200,200);
}

void keyPressed() {
  if (key==CODED) {
    if (keyCode==LEFT) {
      winkel--;
    } else if (keyCode==RIGHT) {
      winkel++;
    }
  }
}

↑