P5.play und Matter.js: Video-Tutorials am Freitag

P5.js
P5.play
Matter.js
Spieleprogrammierung
JavaScript
Creative Coding
Autor:in

Jörg Kantel

Veröffentlichungsdatum

7. Juni 2024

Das Abenteuer JavaScript mit P5.js geht weiter. Und wie ich hier schon einmal angedeutet hatte, würde ich dabei gerne auch Bibliotheken wie Matter.js, vor allem aber P5.play berücksichtigen. Zur Vorbereitung habe ich daher meine kleine Reihe »Video-Tutorials am Freitag« wiederbelebt, die heute Tutorials zu diesen beiden Bibliotheken vorstellt.

Ich beginne mal mit Matter.js, eine freie (MIT-Lizenz) Rigid Body Physik Engine für JavaScript. Daniel Shiffman hatte sie schon vor sieben Jahren mit P5.js vermählt und unter dem Titel »Matter.js Physics eine neun Videos umfassende Playlist dazu veröffentlicht. Aber auch in seiner (P5.js/JavaScript) Neuauflage von »The Nature of Code« spielt Matter.js eine Rolle, daher hat er auch im Coding Train einen aktualisierten, kompletten Track zu Matter.js veröffentlicht.

Auch der YouTuber flanniganable (von dem auch die Playlist »P5.js JavaScript for Beginners« (22 kurze Videos) erwähnenswert ist) hat eine Playlist »Matter.js on P5.js« (18 ebenfalls recht kurze Videos) online gestellt.

Matter.js verdient zusätzlich eine Erwähnung, weil die Engine auch mit microStudio – zumindest in der JavaScript-Version – zusammenspielt. Und wenn man der Dokumentation glaubt, soll es auch mit Python/Brython funktionieren. Das sollte ich unbedingt im Hinterkopf behalten.

Doch nun zu P5.play, das ich ja schon einmal auf diesen Seiten besprochen hatte: Seit der Version 3 hat diese direkt auf P5.js aufsetzende Game-Enginge von Matter.js zu Planck.js als zugrundeliegende Physik-Engine gewechselt. Das ist ein JavaScript-Port von Box2D, einer populären C++ Engine.

Es gibt dazu von Teach Head Online – von dem es unter dem Namen »P5.js Programming« eine Monsterplaylist von 29 Videos zu P5.js gibt – eine Playlist »JavaScript Games Development«, die mit 38 Video-Tutorials noch monstermäßiger daherkommt. Zwischen diesen beiden Playlists gibt es aber Überschneidungen.

Und dann hat auch noch der oben schon erwähnte flanniganable mit »P5.play on P5.js« eine Playlist mit zwanzig wieder eher kurzen Videos hochgeladen.

Wer lieber liest statt schaut: Von Allison Parrish gibt es den ausführlichen Beitrag »Making Games with P5.play« und brifetterley hat auf Medium.com den zwar kürzeren, aber nett zu lesenden Artikel »Using the P5.play Library for a JS Game« veröffentlicht, der sich aber eventuell hinter einer Bezahlschranke versteckt.

Das dürfte mich und Euch mindestens über das Wochenende – vermutlich auch darüber hinaus – beschäftigen. Wenn dann noch Luft bleibt: P5.js fehlt es meiner Meinung nach an einer Turtle-Bibliothek. TurtleGFX und darauf aufbauend Numero wollen dem abhelfen. Sollte ich mir daher auch mal genauer anschauen. Still digging!


Bild: Steampunk Reptils, erstellt mit DreamStudio. Prompt: »A turtle and a python paint together at an easel, colored steampunk style«, Modell: stable-diffusion-xl-1024-v1-0, Style: Comic Book.