Hier eine kleine Übersicht über praktische, hilfreiche und teils interessante Funktionen und Konzepte, die p5.js bereit stellt. Falls was fehlt, bitte melden.
Die Eigenschaften width und height stellen die Breite und Höhe der Darstellungsfläche bereit.
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.
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.
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.
Mit der p5 Funktion LerpColor können Sie einen Farbwert zwischen zwei gegebenen Farben ermitteln. Im Umgang mit Farbe ist das manchmal sehr hilfreich.
Ähnlich wie LerpColor lässt sich mit der Lerp-Funktion eine Strecke teilen, bzw. ein Wert zwischen zwei Werten ermitteln.
Sobald wir mit Formen arbeiten, sind Transformationen jeglicher Art mitunter sehr praktisch und hilfreich.
Bewegung fasziniert oftmals, daher hier ein Codebeispiel zum Thema Kollision.
Hierzu ist die Berechung des arctan2 sehr hilfreich. Hier ein komplettes Beispiel.
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.
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.
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.