Creative Coding

btk

Till Nagel

Generative Grafiken 2 - Woche 3

Aufgaben

C1: Uhr

-->

Programmiere eine Uhr, deren Zeiger natürlich unterschiedlich rotiert werden müssen. Verwende dazu pushMatrix() und popMatrix().

Tipp: Nutze die Funktionen hour(), minute() und second().

Variation: Kreiere eine andere Anzeigeart.

C2: Feine Kreise

Erstelle eine dynamische Form, die Kreise an zufällige Positionen zeichnet, ohne dass sich die Kreise berühren.

Tipp: Nutze A1: Japan als Basis und verwende die vorgegebene Funktion circlesIntersect() aus der 1. Woche.

Diskussion: Wie kann man die Überschneidung mit statt nur einem Kreis mit mehreren Kreisen prüfen?

Diskussion: Nach einiger Zeit wird die Animation "langsamer", es entstehen nur noch selten neue Kreise. Warum?

C3: Readings: „Die Methodik der generativen Kunst“

Lies den Text „Die Methodik der generativen Kunst“. Wir werden Inhalte und Beispiele daraus nächste Woche gemeinsam besprechen.

Projekt #1: Generative Grafiken

Erstelle ein Sketch, der generativ Grafiken erzeugt. Diese Grafik soll nach gewissen Regeln erstellt werden, die durch Zufall und/oder durch Interaktion beeinflusst werden.

Abgabe ist Montag, der 21.05.. In der nächsten Woche, am 14.05., wird in den Übungsstunden an diesem Projekt weiter gearbeitet werden.


Die Matrix – Drehen & Wenden 2

Wie in letzter Stunde gezeigt, ist es in Processing unter Verwendung von rotate() und translate() möglich, visuelle Elemente zu drehen & wenden. Wenn man nun mehrere Elemente unterschiedlich rotieren lassen möchte, muss man Matrizen verwenden: Jede Transformationsmatrix speichert die angegebenen Rotationen und Verschiebungen.

Die obigen Screenshots zeigen die beiden Rechtecke in unterschiedlicher Rotation. Du kannst dir das Multi-Rotate Beispiel auch interaktiv anschauen.

pushMatrix()

pushMatrix();

Schiebt eine neue Transformationsmatrix auf den Stapel. Alle folgenden Transformationen gelten für diese Matrix (bis zum nächsten popMatrix()).

popMatrix()

popMatrix();

Nimmt die letzte Transformationsmatrix vom Stapel, so dass die letzte wieder gültig ist.

Formen 3

Neben den grundlegenden Formen wie Linien, Rechtecke und Ellipsen haben wir bereits andere Formen (wie Dreiecke und Bögen) kennengelernt. Nun betrachten wir kurz (und für einige wiederholend) weitere Formen.

Kurve

curve(x0, y0, x1, y1, x2, y2, x3, y3);

Zeichnet eine Kurve.

Beziér-Kurve

bezier(x0, y0, x1, y1, x2, y2, x3, y3);

Zeichnet eine Bezierkurve. Diese Kurven werden durch zwei Anker- und zwei Kontrollpunkte definiert. Die ersten beiden Parameter spezifizieren den ersten (P0) und die letzten beiden den zweiten Ankerpunkt (P3); diese beiden Ankerpunkte sind Start- und Endpunkte der Kurve. Die mittleren Kontrollpunkte (P1, P2) setzen die Kontrollpunkte, die die Form der Kurve festlegen.

Algorithmus einer Beziér-Kurve

Freiformen

Um beliebige Formen zu erstellen, kann man die Eckpunkte der Form festlegen und diese von Processing verbinden lassen. Solch ein Eckpunkt heißt in der Computergrafik Vertex.

Nun können mit Vertices natürlich einfache Formen erstellt werden, etwa ein Rechteck:

Rechteck

Polygon

Aber der Hauptzweck sind eben eher komplexere Freiformen:

Alle vertex()-Punkte, die innerhalb beginShape() und endShape() stehen werden zu einer Form, und als solche gezeichnet. Dabei gibt es verschiedene Zeichenmethoden, die durch einen Parameter in beginShape() ausgewählt werden.

texture()

Mit dieser Funktion können Bilder auf eine Freiform gelegt werden.

Creative Commons Lizenz: Namensnennung-NichtKommerziell-Weitergabe unter gleichen Bedingungen 2.0 (Deutschland)

© 2007 Till Nagel, All rights reserved – Alle Rechte vorbehalten.