processing/p5.js v2.2.2 on GitHub

What's Changed

This patch focuses on bugfixes, particularly on WebGPU performance and p5.strands. The goal is that all p5.strands shaders work with both WebGPU and WebGL canvases. This patch also adds millis() support inside strands code.

To test this patch, you can use this starter sketch!

Or load both p5.js and WebGPU mode by adding these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.webgpu.js"></script>

Then load WebGPU mode in createCanvas - note the async/await, this is needed for WebGPU but not WebGL:

async function setup() {
  await createCanvas(400, 400, WEBGPU);
}

If you take any existing sketch, such as from the intro to strands tutorial, iyou can switch from WEBGL to WEBGPU (async/await will be needed!)

Read more about how the WebGPU-based renderer works and where we plan on taking it here!

`millis()` supported in p5.strands

Here is a sketch (thanks @perminder-17!) showing millis() being used inside a strands shader. Previously, const t = uniformFloat(() => millis()); was needed. This can still be used, but you can instead use millis() directly:

// p5.js (WEBGL) sketch showing millis() driving a wavy displacement
let mat;

function setup() {
  createCanvas(600, 400, WEBGL);
  pixelDensity(1);

  mat = baseMaterialShader().modify(() => {
    // displace geometry in world-space based on y + time
    getWorldInputs((inputs) => {
      const wave = sin(inputs.position.y * 0.05 + millis() * 0.004);
      inputs.position += [20, 25, 20] * wave;
      return inputs;
    });
  });
}

function draw() {
  background(15);
  orbitControl();

  // lights so the material shader looks nice
  ambientLight(40);
  directionalLight(255, 255, 255, 0.3, 0.6, -1);

  // apply the modified material shader + draw some geometry
  shader(mat);
  noStroke();

  // some rotation so you can see the displacement depth
  rotateY(frameCount * 0.01);
  rotateX(-0.25);

  // a tall shape so Y-based waves are obvious
  sphere(120, 80, 60);
}

All Changes

Refactor global node handling and add millis function by @perminder-17 in #8530
2.0 strands docs: add simple noise() example for buildFilterShader by @nbogie in #8521
Sketch verifier: parse using the latest supported ECMAScript version by @dontwanttothink in #8522
Add support for negative vertex indices in OBJ loader for 2.x by @avinxshKD in #8512
Fix Show actual type in strands hook error messages by @Anshumancanrock in #8505
Improve WebGL font error message to suggest textFont() usage by @yugalkaushik in #8513
Fix/webgpu crash pixel density by @saurabh24thakur in #8476
Fix WebGPU bugs surfaced by the Intro to Strands tutorial by @davepagurek in #8538
Fix build*Shader methods in instance mode by forwarding optional scope by @aashu2006 in #8523
Fix broken reference links in lerpColor() documentation (p5.js 2.0) by @rakesh2OO5 in #8518
Fix WebGPU filter shader parameters being named differently than in WebGL by @davepagurek in #8546
Updated readme and contributors for 2.0 branch by @ksen0 in #8556
Updated readme and contributors for 2.0 branch (with attribution for image) by @ksen0 in #8557

New Contributors

@dontwanttothink made their first contribution in #8522
@Anshumancanrock made their first contribution in #8505
@saurabh24thakur made their first contribution in #8476

Stewards

Code review and additional support with testing the release candidates supported by:

Full Changelog: v2.2.1...v2.2.2