v2.2.2

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 use 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);
}

What does p5.strands make possible?

(Special thanks to @davepagurek for creating the sketches! Excerpted from a blog post about 2.2 updates.)

First, consider this sketch, which uses JavaScript loops to draw a cube of cubes. It is only 40 lines, but if there are many more cubes, it will slow down very much. If it is running smoothly, try changing all the “15” to a higher and higher number, such as “30.” As the scene grows, the sketch performance will suffer very noticeably.

The purpose of shader is to use parallel, GPU-based computation to speed this up. Instead of for loops, here is a second version of the same sketch using GLSL. It is 200 lines of code, and, if you are not familiar with GLSL, may be very difficult to read. Look for the “15” here, too, and try changing it to a larger number, like “30” or beyond. The shader-based animation remains smooth, showing the performance benefits of GPU rendering.

Finally, the p5.strands version of this sketch combines a more accessible, readable style of JavaScript with the performance of GLSL.

With the introduction of the WebGPU-based renderer, p5.strands sketches can seamlessly switch between WEBGL or WEBGPU renderer. Here is the same example as above, but using the WebGPU-based renderer. The only changes needed were to use async/await with createCanvas(...), and to import both the main library and the p5.webgpu.js add-on:

    <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>

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 by:

• @davepagurek
• @nbogie
• @aashu2006

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