github processing/p5.js v2.3.1-rc.2
on GitHub

pre-release8 hours ago

What's Changed

Testers Wanted 💚

p5.js version 2.3.1 is almost ready, help testing it by trying your existing sketches with the new version, or by trying out the upcoming features! This is a release candidate (RC), which means it is not yet live on the p5.js Editor. Your help with testing now will help make the release more stable!

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

Some things to test in your sketches:

  • Code updates touched these functions, so please test that they behave as usual / as expected: loading SVG files and bad URLs with loadImage(), applying tint() to images in 2D mode, framebuffers with custom pixel densities, orbitControl() after swiping outside the canvas, mouseIsPressed behavior after clicking DOM elements, and line(), point(), triangle(), quad(), rect() (including with rounded corners, like in the example below)
  • In shaders and p5.strands code there have been feature additions and bugfixes: randomGaussian() and color() inside p5.strands shader code, instanceIndex for instanced rendering, TRIANGLE_FAN drawing in both WebGL and WebGPU, custom shaders that set uSampler via setUniform(), hooks that return objects should work, custom shaders should be able to use version directives, mouseX and width in instance mode with p5.strands shaders

If anything breaks or looks off, please report it on GitHub!

Warning

This release renames the color space previously called HDR to P3 for accuracy. If you use HDR color space constants in your code, please update them to P3. The maintainers felt this correction was important to make now. If you have concerns about backward compatibility, you can share them on the linked pull request discussion.

What's new

randomGaussian() is available in p5.strands code - see the static example in the starter sketch or below, which also shows more p5.js-style, beginner-friendly colors are also available.

Set of rectangles with rounded corners filled with noisy translucent yellow texture on a pink background 
// This sketch uses an unreleased version of p5.js
// github.com/processing/p5.js/releases/tag/v2.3.1-rc.2
// Thanks for testing 💚 

async function setup() {
  //for normal 2D or WEBGL stuff
  createCanvas(400, 400, WEBGL);

  //for WEBGPU stuff 
  // await createCanvas(400, 400, WEBGPGU);
  myShader = buildMaterialShader(myShaderBuilder);
}

function myShaderBuilder(){
  finalColor.begin();
  let coord = finalColor.texCoord;

  // color() and randomGaussian() available in p5.strands
  let c = color('#eeff22');
  finalColor.set([c.r, c.g, c.b, randomGaussian()*0.1 + 0.3]);
  
  finalColor.end();
}

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

  // rect with rounded corners
  rect(-50, -50, 100, 100, 50, 10);
  translate(0,0,50);
  rect(-50, -50, 100, 100, 3);
  translate(0,0,50);
  rect(-50, -50, 100, 100, 0, 20, 30, 20);
  translate(0,0,50);
  rect(-50, -50, 100, 100);
}

Custom shader bugfixes

Ongoing work on shapes & SVG

  • fix : other shape use the shape class also add new roundrect Primitive by @VANSH3104 in #8899
  • Fix loadImage SVG file loading regression by @gfrancine in #8937

Other bugfixes

What's Changed 🎊

New Contributors

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

Check out latest releases or
releases around processing/p5.js v2.3.1-rc.2

Don't miss a new p5.js release

NewReleases is sending notifications on new releases.

Get notifications