Übung 36

Spielt eigentlich die Reihenfolge eine Rolle, wenn ich eine Translation T und eine Rotation R anwende? Erst T und dann R, oder erst R und dann T - ist das dasselbe? Wie ist es mit Translation und Skalierung? Zeigen Sie anhand jeweils eines Beispiels, dass diese Operationen nicht kommutativ sind. Verwenden Sie dabei die P5-Methoden translate, rotate, und scale.

Die Reihenfolge der Befehle spielt eine große Rolle. Beispiel:

function setup() {
  createCanvas(800, 800)
  noFill()
}

function draw() {
  beginShape() // definiere Polygon
  vertex(20, 40)
  vertex(80, 40)
  vertex(80, 80)
  vertex(20, 80)
  vertex(20, 40)
  endShape() // Ende Definition des Polygons

  //Rotation des nachfolgenden Vierecks
  translate(80, 80)
  rotate(radians(30))

  //das nächste Viereck soll Rot umrandet sein
  stroke(255, 0, 0)

  beginShape() // definiere Polygon
  vertex(20, 40)
  vertex(80, 40)
  vertex(80, 80)
  vertex(20, 80)
  vertex(20, 40)
  endShape() // Ende Definition des Polygons
}

Es wird erst das Koordinatensystem nach um x = 80, y = 80 verschoben und dann von diesem Punkt aus das Koordinatensystem verschoben.

In Grau ist das neue Koordinatensystem gezeigt, welches für das Zeichnen des 2. Rechtecks verwendet wird.

Wenn man nun die Reihenfolge umdreht, also erst die Rotation und dann die Translation durchführt, befindet sich der Ursprung des Koordinatensystems natürlich an einer ganz anderen Stelle, weil das Koordinatensystem um x = 80 und y = 80 von dem rotierten Koordinatensystem aus verschoben wird.

Gleiches Prinzip gilt auch für Translation und Skalierung. Die Skalierung beeinflusst nämlich die Translation/Verschiebung. Wenn wir um 10 nach rechts verschieben, dann ist das bei der Skalierung 1 bzw. 100% natürlich weniger als wenn wir um den gleichen Wert bei einem Koordinatensystem, dessen Einheiten doppelt so groß sind (also Skalierung 2 bzw. 200%), verschieben. Anderes Beispiel:

function setup() {
  createCanvas(800, 800)
  noFill()
}

function draw() {
  beginShape() // definiere Polygon
  vertex(20, 40)
  vertex(80, 40)
  vertex(80, 80)
  vertex(20, 80)
  vertex(20, 40)
  endShape() // Ende Definition des Polygons

  //Rotation des nachfolgenden Vierecks
  translate(20, 40)
  scale(2)

  //das nächste Viereck soll Rot umrandet sein
  stroke(255, 0, 0)

  beginShape() // definiere Polygon
  vertex(20, 40)
  vertex(80, 40)
  vertex(80, 80)
  vertex(20, 80)
  vertex(20, 40)
  endShape() // Ende Definition des Polygons
}

In Grau ist wieder das neue Koordinatensystem gezeigt, welches für das Zeichnen des 2. Rechtecks verwendet wird. Es wurde um 20, 40 verschoben und dann auf die doppelte größe Hochskaliert.

Wenn man nun die Reihenfolge umdreht, also erst die Skalierung und dann die Translation durchführt, sind die Einheiten des Koordinatensystems, um das verschoben wird, doppelt so groß. Der Ursprung des neuen Koordinatensystems wurde (wenn man nach dem alten Koordinatensystem geht) somit effektiv um 40, 80 verschoben.