Was ist neu in P5.js Version 2.3.0?
Vor zwei Tagen gab die Processing Foundation das Update von P5.js, dem JavaScript-Ableger von Processing (Java), auf die Version 2.3.0 frei. Seit den letzten Updates im März dieses Jahres haben sie sich auf die Stabilisierung von P5.js und die Optimierung der Arbeitsabläufe konzentriert.
Dazu gehören Refactorings zu p5.Vector basierend auf der kürzlich hinzugefügten Decorators API sowie neue Funktionen für p5.strands, den neuen, einsteigerfreundlichen Ansatz zur Shader-Programmierung. Außerdem wurde die Entwicklung des experimentellen WebGPU-Renderers fortgesetzt.
Bei der Verwendung von Vektoren zum Beispiel in Physiksimulationen muss nun beim Erstellen eines Vektors angegeben werden, ob er in 2D oder 3D vorliegt. createVector() verlangt nun createVector(0, 0) für 2D- oder createVector(0, 0, 0) für 3D-Vektoren. Hintergrund ist, daß in P5.js bisher alle Vektoren 3D-Vektoren waren. Version 2 unterstützt nun Vektoren beliebiger Dimension, so daß leere Vektoren ihre Größe explizit angeben müssen.
Auch die Shader-Unterstützung wurde aktualisiert. Shader sind Programme, die auf der Graphikkarte ausgeführt werden, um visuelle Effekte zu erzeugen. Mit P5.js 2.0 wurde p5.strands, die Shader-Programmierschnittstelle (API), eingeführt, wodurch die Programmierung von visuellen Effekten mithilfe der GPU vereinfacht wurde. Version 2.3 überarbeitet und vereinfacht den p5.strands-Code, wodurch die Wartung und Mitarbeit erleichtert wird.
Die Processing Foundation hat ein Video-Tutorial veröffentlicht, in dem Juan Rodríguez García zeigt, wie Ihr p5.strands in P5.js einsetzen könnt.
Aber auch von der wunderbaren Patt Vira gibt es gleich eine vierteilige Playlist »Introduction to Shaders: A Beginner’s Guide«in der sie die grundlegenden Unterschiede zwischen CPU- und GPU-Verarbeitung untersucht und erklärt, wie Shader paralleles Rechnen für die graphische Darstellung nutzen. Diese Einführung behandelt die Einrichtung einer WebGL-Umgebung in P5.js, die Definition von Vertex- und Fragment-Shadern mithilfe der GLSL-Syntax und den Datenaustausch zwischen CPU und GPU zur Erzeugung dynamischer visueller Effekte.
Und auf dem 19. Libre Graphics Meeting (LGM), dem internationale Treffen für freie und Open-Source-Graphiksoftware, das vom 22. bis 25. April 2026 im Innovationszentrum ZOLLHOF in Nürnberg stattfand, gaben Dave Pagurek, Luke Plowden, Perminder Singh, Kenneth Lim und Kit Kuksenok den Talk »Beginner-Friendly Shader Programming in P5.js v2«. Sie gehören zu den Mitautoren von p5.strand und erklären auch die Motivation, die hinter der Entwicklung dieser Bibliothek steht.
War sonst noch was? Ach ja, auch die typographischen Möglichkeiten wurden in der Version 2 von P5.js enorm ausgebaut. In einem weiteren Tutorial der Processing Foundation mit dem Titel »Typography and Asset Loading« erläutert die Dozentin und Künstlerin Qianqian Ye neuen Typographie-Funktionen von P5.js v2 und zeigt, wie man statische Buchstaben in interaktive, animierte Schriften verwandelt.
Und ich bekomme langsam Lust, auch mal etwas und gerne etwas mehr mit P5.js anzustellen. So viel zu spielen, so wenig Zeit!
Bild: Kaffee und Kreativität, erstellt mit OpenArt. Prompt: »@Badger sits in front of a computer in a bright, cheerful room. He holds the mouse in his right hand and uses his left to operate the keyboard. Next to him on the desk sits a mug of steaming coffee and another mug filled with writing utensils. Otherwise, the desk is clear. In front of him, at a white board, @Rabbit is drawing neon-colored fractal images with colorful markers. He holds a pointer in his free hand, aiming it at the board. Colorful fractal-style images are also visible on the computer monitor. Shelves filled with books line the walls. A small cat is curled up asleep on a cushion on one of the shelves. Morning sunlight streams through the window. Classic American comic book style. Language: German. No speech bubbles, no text boxes.« Modell: Nano Banana 2.