Digitale Kunst mit p5.js

p5.js ist eine JavaScript-Bibliothek für Künstler:innen und Designer:innen. Sie erlaubt es auch Programmieranfänger:innen, auf eine recht einfache Art interaktive Kunstwerke und Animationen im Browser zu erzeugen.

Im Rahmen meiner Tätigkeit für die Initiative Coding for Tomorrow hatte ich am letzten Girls Day die Gelegenheit, die Funktionen des p5.js-Webeditors auszuprobieren. Gemeinsam mit meiner Kollegin Licia Stickelbrock und knapp 20 Mädchen erstellte ich digitale Kunst im Browser.

Die Sketches – so heißen die Programme, die mit p5.js erstellt werden – wurden recht schnell immer bunter und kreativer. Die JavaScript-Bibliothek bietet nämlich viele vorgefertigte Funktionen, die es ermöglichen, mit wenigen Befehlen interaktive Programme zu schreiben.

So erstellt bspw. die Funktion „createCanvas (400, 400)“ eine 400 Pixel mal 400 Pixel große Leinwand im Webbrowser und die Funktion „background (0)“ färbt diese Leinwand schwarz ein. Eine vollständige Referenz zu p5.js findet man hier: https://p5js.org/reference/

Wie bei anderen Programmierprojekten auch grübelten wir über die richtige Reihenfolge der Befehle, nutzten Bedingungen und Variablen bis die Animationen am Ende so aussahen wie wir uns das vorgestellt hatten.

Wenn man sich länger mit p5.js auseinandersetzt bzw. mit der Programmiersprache Processing, die das Grundgerüst liefert, kann man solch schönen Kunstwerke erstellen:

Wie man sieht, stehe ich noch ganz am Beginn meiner Künstlerkarriere. Ich bin aber hochmotiviert, neue Kunstwerke zu erstellen.

Happy Birthday-Animation von Janina mit p5.js