Quelltext der Seite Visualisierung von Translation, Rotation und wieder Translation

* Wir wollen ein Quadrat um 45 Grad drehen (um die eigene Achse bzw. auf der Stelle) und müssen dazu translatieren, rotieren und wieder translatieren.

{{#ev:youtube|https://youtu.be/nZwsSyTgV9g}}

= Code zum selbst Ausprobieren = 
* Anmerkung: Es muss immer eine beliebige Taste gedrückt werden zwischen den einzelnen Transformationen, um die Animation anzustoßen

<pre>
Koordinatensystem ks = new Koordinatensystem();
int c = 0;

boolean makeTranslation = true;
void setup() {
  size(400, 400);
  translate(200/2, 200/2);
  ks.zeichne();
  background(120);
  frameRate(20);
}

int tx = 0;
int ty = 0;
int tx2 = 0;
int ty2 = 0;
int w = 0;
void draw() {

  switch (c) {
  case 0:
    rect(200/2, 200/2, 30, 30);
    break;
  case 1:
    background(120); 
    pushMatrix();
    translate(115,115);
    rotate(radians(45));
    translate(-115,-115);
    rect(200/2, 200/2, 30, 30);
    popMatrix();
    break;
  case 2:
    background(120);  
    rect(200/2, 200/2, 30, 30);
    break;
  case 3:
    background(120); 
    ks.zeichne();
    rect(200/2, 200/2, 30, 30);
    break;   
  case 4:
    if (tx<115 && makeTranslation) {
      background(120);  
      translate(tx++, ty++);
      ks.zeichne();
      translate(-tx++, -ty++);
      push();
      fill(255, 120);
      rect(200/2, 200/2, 30, 30);
      stroke(0, 0, 255);
      strokeWeight(2);
      circle(115, 115, 2);
      pop();
      fill(0);
      text("translatiere zum Mittelpunkt des Objektes", 100, 370);
      fill(255);
    } else {    
      tx=115; ty=115;
  }
    if (tx>=115) {   
      if (w<=45) {
        background(120); 
        pushMatrix();
        if (makeTranslation)
          translate(tx, ty);
        rotate(radians(w++));
        ks.zeichne();
        popMatrix();
        push();
        fill(255, 120);
        rect(200/2, 200/2, 30, 30);
        stroke(0, 0, 255);
        strokeWeight(2);
        circle(115, 115, 2);
        pop();
        fill(0);
        text("rotiere um 45 Grad", 100, 370);
        fill(255);
      }
    }
    if (w>=45 && tx2<=115 && makeTranslation) {
      background(120); 
      pushMatrix();
      if (makeTranslation)
        translate(tx, ty);
      rotate(radians(w));
      translate(-tx2++, -ty2++);
      ks.zeichne();
      popMatrix();
      push();
      fill(255, 120);
      rect(200/2, 200/2, 30, 30);
      stroke(0, 0, 255);
      strokeWeight(2);
      circle(115, 115, 2);
      pop();
      fill(0);
      text("translatiere das Koordinatensystem zurück", 100, 370);
      fill(255);
    }
    break;
  }
}

void keyPressed() {
  c = c +1;
  println(c);
}

class Koordinatensystem {
  int x = 0;
  int y = 0;
  int w = 200;
  int h = 200;

  void zeichne() {
    push();
    stroke(200, 100, 0);
    rect(x, y, w*2, h*2);
    for (int i=x; i<w*2; i=i+10) {
      line(i, y, i, h*2);
      line(x, i, w*2, i);
    }
    stroke(0, 255, 0);
    strokeWeight(2);
    circle(0, 0, 2);
    pop();
    fill(255,255,0,200);
    rect(x+w/2, y+h/2, 30, 30);
    fill(255);
  }
}
</pre>