github processing/p5.js v2.3.0-rc.1
on GitHub

pre-release9 hours ago

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.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.0-rc.1/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:

GitHub commend with CDN link

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 instandceID() 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);
}
Cloudy cube against a pink background

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 @davepagurek and @aashu2006. 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 an 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);
}

p5.strands and WebGPU

Workflow and Stabilization

Documentation and Friendly Errors

  • Docs: Add pipeline overview for transpileStrandsToJS by @LalitNarayanYadav in #8755
  • Reference example typo fix by @limzykenneth in #8680
  • docs: fix typos and grammar in contributor docs by @Xavrir in #8654
  • lf use min() and max() with Infinity or -Infinity, it throws friendly error by @menacingly-coded in #8389
  • Update vector docs to indicate recommended usage by @ksen0 in #8783
  • remove unused @requires from all jsdoc by @nbogie in #8713
  • Update RendererGL comments to reflect current state of pixel functions by @davepagurek in #8738
  • docs: remove broken beginGeometry/endGeometry links from buildGeometry reference by @mitre88 in #8739
  • Fix JSDoc typos: widhts → widths, coordniates → coordinates, coordian… by @harshiltewari2004 in #8757
  • Fix: restrict setHeading() to 2D vectors and add friendly error for others by @reshma045 in #8255
  • States tests and rename by @harshiltewari2004 in #8778
  • Refactor p5.Vector to prioritize smaller dimension in binary operations on mismatched-size vectors by @ksen0 in #8676

New Contributors

Full Changelog: v2.2.3...v2.3.0-rc.1

Check out latest releases or
releases around processing/p5.js v2.3.0-rc.1

Don't miss a new p5.js release

NewReleases is sending notifications on new releases.

Get notifications