Creative Coding und Spieleentwicklung mit P5.js

Es ist wieder Freitag und so habe ich auch wieder ein paar Video-Tutorials für Euch herausgesucht, die Euch beschäftigen sollen, sollte Euch am Wochenende die Langeweile übermannen. Zwar ist nicht wirklich damit zu rechnen, da die Wetterfrösche – zumindest in Berlin – für Sonnabend und Sonntag sonnige Frühsommertage angekündigt haben, aber man weiß ja nie. Außerdem haben Links (zumindest theoretisch) kein Verfallsdatum – Ihr könnt sie auch nach dem Wochenende noch abrufen.

Wer den Schockwellenreiter in den letzten Tagen verfolgt hat, der wird sich nicht wundern, daß, wie schon am letzten Wochenende, die Tutorials die Programmierung mit P5.js zum Thema haben. Denn das fesselt mich momentan am meisten. Doch möchte ich diese Woche nicht mehr ausschließlich über Spieleprogrammierung schreiben, sondern auch den Bereich »Creative Coding« behandeln. Das ist schließlich der Bereich, in dem P5.js am meisten punktet.

Doch zuerst dennoch ein Ausflug in die Spieleprogrammierung: Die Playlist mit dem kurzen Namen »CP2«¹ von Gabriel Walters beschäftigt sich in zehn Videos mit einer Spiellänge von je zwischen 20 Minuten und einer Stunde mit der Programmierung eines »unendlich« scrollenden Plattform-Spiels ähnlich dem Klassiker »Super Mario«.

Vom gleichen Autor gibt es noch die Playlist »P5.js Programming« (vierzehn im Schnitt je halbstündige Videos), die einen eher einführenden Character besitzt.

Doch nun der Wechsel zu »Creative Coding«: Auch wenn das obige Video »Vertical Scrolling Rocket Ship Animation using p5.js« was anderes assoziiert, die Playlist »p5.js Tutorials«, aus der es stammt, hat mit seinen 35 Videos mit je zwischen fünf Minuten und einer halben Stunde Spieldauer eindeutig ihren Schwerpunkt auf kreatives Programmieren.

Das obige Processing-Tutorial über Re-enactment von Werken Vera Molnárs ist Teil der riesigen Playlist »How to draw with Code«. Sie besteht aus 52 Videos, davon sind einige (wenn ich richtig gezählt habe, 26 – also die Hälfte) jedoch nur für (zahlende?) Kanalmitglieder zugänglich. Doch die frei zugänglichen sind auf jeden Fall einen Besuch wert.

Eine weitere Fundgrube für kreative Coder ist Steve’s Makerspace mit der ebenfalls riesigen Playlist »P5.js Projects and Programming«, aus der ich auch das obige Video »Making Simple Patterns in p5.js« entnommen habe. Die Playlist besteht aktuell aus 53 Videos, aber das letzte Update ist erst wenige Tage alt. Mit weiteren Videos ist daher zu rechnen.

Auch wenn Steve in seinen Videos manchmal den »Mut zur Lücke« arg überstrapaziert, in den Videobeschreibungen findet Ihr die Links zu allen behandelten Quelltexten und einige Varianten mehr. Mit »Fundgrube« habe ich daher nicht zuviel versprochen, Ihr müßt nur manchmal darin die Projekte auch ausbuddeln.

War sonst noch was? Ach ja, das Tutorial »Generative Vasarely with P5js« von Shaun Wegscheid steht ziemlich solitär im Kanal des Autors. Dabei ließe sich zu Victor Vasarely so viel schreiben und programmieren, wie ich auch schon im Schockwellenreiter veröffentlicht hatte:

• Re-enactment mit Processing.py: Hommage an Victor Vasarely.
• Noch mehr nachgebauten Vasarely (noch bunter und animiert) – und wieder mit Processing.py.
• Mehr Trinket: Dieses Trinket ist ein Tribut an Victor Vasarely und dieser Tribut wurde mit Pythons Turtle gezollt.

Und jetzt zieht Euch die Videos rein, laßt Euch inspirieren und Eurer Kreativität freie Bahn.

Fußnoten

1. Ich vermute mal CP2 steht schlicht für Computer Programming 2, da die Playlist anscheinend für einen Schul- oder Hochschulkurs (ich blicke da bei dem amerikanischen Bildungssystem nie so richtig durch) erstellt wurde.