processing/p5.js v2.3.0-rc.3

on GitHub

Testers Wanted 💚

This is a release candidate (RC), which means it is not yet live on the p5.js Editor. Please help us to improve the stability of the newest version of p5.js by trying out this release candidate, and reporting bugs.

To help with testing, 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.3.0-rc.3/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.0-rc.3/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);
}

What's Changed 🎊

Work since 2.2.3 has focused on graphics and stabilization, including on version p5.Vector. In version 1, it was common to use createVector() which would create a three-dimensional vector at (0, 0, 0). In version 2, empty vectors should be made with createVector(0, 0) or createVector(0, 0, 0), to make clear when it is two or three dimensional. This is because version 2 supports vectors of different dimensions, although usages are still related to graphics and require 3D vectors.

We've also introduced some workflow improvements to support testing new contributions, including the @p5js-bot - look for this comment on any Pull Request, and use the CDN link in test sketches to help with review:

On graphics, we have continued to work on beginner-friendly shader programming API features (p5.strands), as well as the experimental WebGPU renderer.

This minor release includes exciting additions by the growing p5.strands contributor community:

• filter shaders are supported on 2D sketches, thanks to @LalitNarayanYadav
• random() and randomSeed() is available in p5.strands code, thanks to @perminder-17
• map() is available in p5.strands code, thanks to @Nixxx19
• lerp() and instanceID() are more consistently supported, thanks to @aashu2006
• more helpful error messages, thanks to @kushal1061
• corrected TypeScript typing, thanks to @Kathrina-dev
• simple shader materials can be written much easier, using only finalColor hook thanks to @YuktiNandwana

Here is an example p5.js sketch using p5.strands, with the noise-based texture:

let myShader;
function setup() {
  createCanvas(400, 400, WEBGL);
  myShader = buildMaterialShader(myShaderBuilder);
}
function myShaderBuilder(){
  finalColor.begin();
  let coord = finalColor.texCoord;
  finalColor.set(noise(coord.x, coord.y));
  finalColor.end();
}

function draw() {
  stroke(255);
  background("#f1678e");
  shader(myShader);
  orbitControl();
  box(100);
}

The p5.strands code has also been refactored and simplified, which will make maintenance and contribution easier in the future, thanks to @davepagurek and @LalitNarayanYadav! Finally, p5.strands, used with the experimental WebGPU renderer, now supports compute shaders, thanks to work by @davepagurek, @aashu2006, and @SOUMITRO-SAHA. For example, below is code for a Game of Life simulation, written by @davepagurek. This uses compute shaders (compare the code to the [non-shader example here(https://beta.p5js.org/examples/math-and-physics-game-of-life/).)

// noprotect
// Authored by Dave Pagurek to demonstrate using WebGPU compute shaders

let cells;
let nextCells;
let gameShader;
let displayShader;
let W = 0;
let H = 0;

async function setup() {
  W = 100;
  H = 100;
  await createCanvas(100, 100, WEBGPU);
  pixelDensity(1);

  let initial = new Float32Array(W * H);
  for (let i = 0; i < initial.length; i++) {
    initial[i] = random() > 0.7 ? 1 : 0;
  }
  cells = createStorage(initial);
  nextCells = createStorage(W * H);

  gameShader = buildComputeShader(simulate);
  displayShader = buildFilterShader(display);
}

function simulate() {
  let current = uniformStorage(() => cells);
  let next = uniformStorage(() => nextCells);
  let w = uniformInt(() => W);
  let h = uniformInt(() => H);
  let x = index.x;
  let y = index.y;

  let n = 0;
  for (let dy = -1; dy <= 1; dy++) {
    for (let dx = -1; dx <= 1; dx++) {
      if (dx != 0 || dy != 0) {
        let nx = (x + dx + w) % w;
        let ny = (y + dy + h) % h;
        n += current[ny * w + nx];
      }
    }
  }

  let alive = current[y * w + x];
  let nextOutput = 0;
  if (alive == 1) {
    if (n == 2 || n == 3) {
      nextOutput = 1;
    }
  } else {
    if (n == 3) {
      nextOutput = 1;
    }
  }
  next[y * w + x] = nextOutput;
}

function display() {
  let data = uniformStorage(() => cells);
  let w = uniformInt(() => W);
  let h = uniformInt(() => H);

  filterColor.begin();
  let x = floor(filterColor.texCoord.x * w);
  let y = floor(filterColor.texCoord.y * h);
  let alive = data[y * w + x];
  filterColor.set([alive, alive, alive, 1]);
  filterColor.end();
}

function draw() {
  compute(gameShader, W, H);
  [nextCells, cells] = [cells, nextCells];
  filter(displayShader);
}

Since RC.1

Since previous release candidate, some refactors and bugfixes have been made to p5.strands:

• Refactor: Extract transpilation passes and callback generation from transpileStrandsToJS by @LalitNarayanYadav in #8782
• Make sure all p5.strands math operators are converted to strands nodes by @davepagurek in #8785
• Make line shader hooks use unmultiplied alpha by @davepagurek in #8787
• Fix #8756: Allow computed array indexing on non-storage vectors by @SOUMITRO-SAHA in #8768

Find more detailed commits in previous RC release notes

New Contributors

• @SOUMITRO-SAHA made their first contribution in #8768

Full Changelog: v2.3.0-rc.2...v2.3.0-rc.3