Generative Grafiken 1 - Woche 2

Aufgaben

B1: Rotationsprinzip

-->

Erstelle zwei statische Sketches, bei dem ein Rechteck so gedreht wird, dass die weißen Quadrate wie in den Bildern zu sehen sind.

Tipp: Nimm die opaquen Rechtecke in den Bildern als Hinweise.

B2: „Schleifen drehen“

Verwende Schleifen und rotate(), um damit generative Grafiken zu erstellen.

Variante: Mach es interaktiv! Lass es also bspw. von der Mausposition abhängig machen.

Variante: Nutze Farben und Transparenzen.

B3: Auf zum 1. Mai!

Entwirf ein interaktives Plakat zum 1. Mai, in dem du verschiedene Grafikstyles verwendet, die der Nutzer miteinander kombinieren kann. Dies können unter anderem sein:

Mit Schleifen erzeugte Grafiken
Zufällig positionierte visuelle Elemente
Bilder laden und als Stempel (Brush) verwenden
Fonts verwenden und Text anzeigen
und alles, was euch noch so einfällt …

Verwende für diese Aufgabe den folgenden Code als Basis, und füge weitere Grafikenelemente hinzu, indem du neue Funktionen schreibst (so wie drawCircles() als Beispiel) und diese für höhere currentStyle-Werte aufrufst — z.B. if (currentStyle == 5) { drawFlag(); }

int currentStyle = 0;
		
		PImage currentImage;
		
		void setup() {
		  size(600, 400);
		  smooth();
		
		  currentImage = new PImage(width, height);
		}
		
		void draw() {
		  background(currentImage);
		
		  if (currentStyle == 0) {
		    paintItBlack();
		  }
		  if (currentStyle == 1) {
		    drawCircles();
		  }
		  if (currentStyle == 2) {
		    // weiter machen ...
		  }
		}
		
		void paintItBlack() {
		  background(0);
		  gotoNextStyle();
		}
		
		void drawCircles() {
		  // Zeichnet 20 Kreise in der Nähe der Maus-Y-Position
		  for (int i = 0; i < 20; i++) {
		    fill(random(255), 0, 0, 50);
		    float s = random(10, 40);
		    ellipse(random(width), mouseY + random(-20, 20), s, s);
		  }
		}
		
		// Hier weitere Funktionen ...
		
		
		
		// Jeder Klick springt zum nächstem Style
		void mouseReleased() {
		  gotoNextStyle();
		}
		
		void gotoNextStyle() {
		  // Geht zum nächsten Style
		  currentStyle++;
		  
		  // Kopiert das aktuelle Bild auf der Zeichenfläche
		  // in die PImage-Variable
		  loadPixels();
		  arraycopy(pixels, currentImage.pixels);
		}

Drehen & Wenden

In Processing ist es möglich, grafische Elemente wie Ellipsen und Rechtecke, aber auch Bilder und Texte zu transformieren.

Rotation

Zur Veranschaulichung der Rotation in Processing werden ein bzw. mehrere Rechtecke gedreht:

Fig. 1

Fig. 2

Und hier der Code für Fig. 2:

rotate()

rotate(angle);

Dreht die Zeichenfläche um den angegebenen Winkel im Bogenmaß. Wie in Fig. 2 gut erkennbar gilt dabei:

Es wird um den aktuellen Nullpunkt gedreht.
Mehrere rotate()-Anweisungen addieren sich.

Positive Winkelwerte drehen dabei die Elemente im Uhrzeigersinn, während negative Werte diese gegen den Uhrzeigersinn rotieren lassen.

rotate(+45°)

rotate(-45°)

Bogenmaß und Grad

Den Winkel in der rotate()-Funktion muss im Bogenmaß angegeben werden. Die folgenden drei Code-Snippets erzeugen also die gleiche Drehung:

Im dritten Fall wurde der Winkel statt in Bogenmaß in dem etwas intuitiveren, bzw. verinnerlichterem Grad angegeben. Dazu können wir die Umrechnungsfunktion radians() verwenden.

Einheitskreis mit Grad-Winkeln

Transformation

Wenn man nun die Elemente nicht nur um den Nullpunkt (oben links) drehen möchte, sondern etwa um die eigenen Nullpunkt, dann kann man mit Hilfe von translate() andere Transformationen kombinieren.

translate()

translate(x, y);

Verschiebt den Zeichenbereich um die angegebene Position.

Ohne Verschiebung

Fig. 7: Mit Verschiebung

Processing Reference: translate()

rotate() & translate()

Die Abbildung in Fig. 7 wird natürlich auch erreicht, wenn einfach das Rechteck direkt an die Position gezeichnet wird (also durch rect(50, 50, 100, 100);). Das Problem ist hierbei dass dies nicht wie erwartet funktioniert, wenn man das Element zusätzlich rotieren möchte (siehe Fig. 9)

rect(50, 50, 100, 100);

Fig. 9: "Falsche" Drehung um den Nullpunkt des Zeichenbereichs

Um das korrekte Ergebnis (Rotation um den visuellen Nullpunkt des Rechtecks) zu erhalten, müssen also translate() und rotate() wie im Folgenden miteinander kombiniert werden: