Alles neu macht der Mai: P5.js 2.0 steht in den Startlöchern

Die Freundinnen und Freunde der kleinen und freundlichen JavaScript-Bibliothek für kreatives Programmieren, P5.js, erwartet ein großes Update: Denn P5.js Version 2.0 steht in den Startlöchern und scharrt schon ganz gewaltig mit den Hufen. Seit letzten Monat kann die aktuelle Version 2.0.1 hier heruntergeladen werden und auch im P5.js Webeditor können frau oder man zur Version 2.0 (oder größer) wechseln. Hier bleibt aber bis zum August 2026 (nächstes Jahr!) die Version 1.x als Default bestehen.

Was ist neu? Auf Wunsch der Community ist eine Unterstützung für variable Fonts hinzugekommen. Das erfreut sicher nicht nur Typographen, sondern auch diejenigen, die seltsames mit den Emojis anstellen wollen. 🥸 Außerdem wurde die Behandlung von Shadern vereinfacht, die nun statt in GLSL direkt in JavaScript programmiert werden können und es sind einige Color Modes zusätzlich implementiert worden.

Die größten Änderungen, die auch eventuell eine Rückwärtskompatibilität tangieren, betreffen die die preload()- wie auch die (bezier)vertex()-Funktion. Die preload()-Funktion fällt weg, stattdessen gibt es eine async setup()-Funktion. Hieß es also in Version 1.x noch

let img;

function preload() {
  img = loadImage('bricks.jpg');
}

function setup() {
  createCanvas(100, 100);

  // Red backgorund is ignored
  background(255, 0, 0);

  // Draw the image.
  image(img, 0, 0);

  describe('A red brick wall.');
}

heißt es ab der Version 2.0 mit einer Kombination aus async und await nur noch:

let img;

async function setup() {
  createCanvas(100, 100);

  // Red background while asset loads
  background(255, 0, 0);

  // Wait for the image to load
  img = await loadImage('bricks.jpg');

  // Draw the image.
  image(img, 0, 0);

  describe('A red brick wall.');
}

Ähnlich einschneidend sind die Änderungen bei den vertex()- und bezierVertex()-Shapes. Doch diese sind auf der Seite Custom Shapes and Smooth Curves gut erläutert. Außerdem arbeiten die Macher an Bibliotheken, die die entfallenen 1.x-Features auch für P5.js 2.0 und größer bereitstellen sollen.

Bis zur Umstellung des Webeditors nächstes Jahr bleibt die 1.x-Referenz weiterhin unter https://p5js.org/erreichbar, während die neue 2.0-Referenz unter https://beta.p5js.org/ zu finden ist.

Wer seine eigenen Programme oder Bibliotheken auf Kompatibilität zur neuen 2.0-Version testen will, der kann dazu alles Wissenswerte in den Kompatibilitäts-Richtlinien nachlesen.

In diesem Sinne: Happy Coding!