Generative Gestaltung

Kurs im Modul «Designing Futures 1» // Code & Context // Wintersemester 23/24

Interessante P5.js Funktionen und Beispiele


Hier eine kleine Übersicht über praktische, hilfreiche und teils interessante Funktionen und Konzepte, die p5.js bereit stellt. Falls was fehlt, bitte melden.

Dimensionen des Canvas

Die Eigenschaften width und height stellen die Breite und Höhe der Darstellungsfläche bereit.

Mausposition

Die Position der Maus lässt sich mit mouseX und mouseY abfragen. Die Umgebung für Generative Gestaltung stellt auch die Mausposition via canvasParams.mouseX und canvasParams.mouseY bereit. Wenn diese Eigenschaften genutzt werden, ist die Mausposition im Lock-Modus (einmal L auf der Tastatur) fixert und die Maus kann frei bewegt werden, ohne Einfluss auf die Eigenschaften canvasParams.mouseX und canvasParams.mouseY zu nehmen.

Virtueller Canvas

Für einige Usecases ist es extrem hilfreich nicht direkt auf den sichtbaren Canvas zu zeichenen, sondern einen virtuellen Canvas zu benutzen und diesen nachher auf der Zeichenfläche zu platzieren. Dabei hilft die Funktion createGraphics. Es können auch mehrere virtuelle Canvases genutzt werden und bei der Montage via image können auch unterschiedliche blendModes genutzt werden.

Pixel abtasten

Wenn wir Bilder als Datenquelle nutzen, dann müssen wir die einzelnen Pixel abtasten/ auslesen. Dabei hilft die pixels und die get Funktion von p5.js. Auf der Generative Gestaltung Website finden Sie auch ein schönes Anwendungsbeispiel dazu.

Farbabmischung

Mit der p5 Funktion LerpColor können Sie einen Farbwert zwischen zwei gegebenen Farben ermitteln. Im Umgang mit Farbe ist das manchmal sehr hilfreich.

Strecken teilen

Ähnlich wie LerpColor lässt sich mit der Lerp-Funktion eine Strecke teilen, bzw. ein Wert zwischen zwei Werten ermitteln.

Transformationen

Sobald wir mit Formen arbeiten, sind Transformationen jeglicher Art mitunter sehr praktisch und hilfreich.

Beispiel: Kollisionsberechnung

Bewegung fasziniert oftmals, daher hier ein Codebeispiel zum Thema Kollision.

Beispiel: Ausrichtung auf die Maus

Hierzu ist die Berechung des arctan2 sehr hilfreich. Hier ein komplettes Beispiel.

Beispiel: Abstand berechnen

Die Bezugnahme auf die Mausposition oder andere Eingabegeräte kann sehr interessant sein und lädt den Betrachter oft zur Interation ein. Hier ist die Berechnung des Distanz oftmals erforderlich.

Beispiel: Lineare Interpolation

Natürlich Bewegung in den Sketches macht sie meist interessanter und lebendiger. Hierfür ist die Zuhilfenahme von Linearer Interpolation oftmals eine große Hilfe.

Beispiel: Wiederholung mit sehr dünnen Strichstärken

Mit Hilfe von Wiederholung und kleinen Variationen kann die Nutzung von sehr dünnen Strichstärken durch die resultierende Überlagerung zu überaus interessanten Ergebnissen führen. Hier ein Beispiel anhand einer Lissajous-Figur. Ein weiteres Beispiel zeigt eine Malmaschine in der realen Welt. Und weil es so schon ist gleich noch ein Beispiel. In diesem Fall ein Harmonopraph.