Programmieren kann ein wunderbar kreativer und künstlerischer Prozess sein. Oft ist das nur leider für Nutzer kaum sichtbar, da Code oft hinter den Kulissen steckt. Aber es gibt auch Bereiche, in denen Kunst und Code stark verschwimmen, wo Designer*innen programmieren lernen und Informatiker ästhetische algorithmische Kunstwerke schaffen. Einer der bekannteren Projekte in diesem Bereich nennt sich „Processing“, insbesondere p5.js.
Darüber gestolpert bin ich durch den legendären Youtube Kanal TheCodingTrain, der mit p5.js immer wieder visuelle Schmuckstücke programmiert und einfach erklärt. Seit dem habe ich auch diverse algorithmische Kunstwerke geschaffen, oft „Sketch“ genannt, die in Zukunft sicher ihren Weg auf diese Webseite finden werden.
Hier ist eine ganz simple Form von so einem Sketch. Wenn du ein Piktogramm eines Astronauten sehen kannst, der ganz bisschen deiner Maus folgt, dann funktioniert alles. Auch wenn es noch nicht beeindruckend aussieht, passiert hinter den Kulissen doch schon einiges:
- Der Code von p5.js wurde auf dieser Seite installiert
- Weiterer Code wurde installiert, um p5.js kompatibel mit .svg Dateien zu machen
- Ein Sketch wurde erzeugt und an die richtige Stelle der Seite gesetzt
- Der Sketch holt sich das Farbthema der Seite (hell, dunkel) und färbt sich danach ein. Wenn das Farbthema geändert wird, passt sich der Sketch an
- Der Sketch passt sich automatisch an die Veränderung von der Bildschirmbreite an
- Der Sketch lädt das Piktogramm mit dem Astronauten und plaziert es in der Mitte
- Der Sketch holt sich die Position der Maus und bewegt den Astronauten minimal in die Richtung
Ich habe vor in Zukunft mit diesen Sketchen simple und schöne Animationen auf dieser Seite einzubauen, die helfen den Text zu visualisieren.