github processing/p5.js v2.3.1
on GitHub

9 hours ago

2.3.1 Hex codes in shaders and continued p5.strands development; tint() and other fixes; HDR renamed to P3

This patch introduces new p5.strands features, improvements to shapes & SVG handling, and bugfixes across WebGL and WebGPU. It also renames the color space previously called HDR to P3 for accuracy.

  • Fixes for 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, this patch adds randomGaussian() and color() support 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, and mouseX and width in instance mode with p5.strands shaders

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.

You can start using this updated version in 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/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.1/lib/p5.webgpu.js"></script>

To use WebGPU mode in createCanvas note the async/await, which is needed for WebGPU but not WebGL: 

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

What's new in p5.strands

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.

Set of rectangles with rounded corners filled with noisy translucent yellow texture on a pink background 
async function setup() {
  //for normal 2D or WEBGL stuff
  createCanvas(400, 400, WEBGL);

  //for WEBGPU stuff 
  // await createCanvas(400, 400, WEBGPU);
  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

Other documentation & error messages updates

New Contributors

Welcome to the community! 🎉

Stewards

Stewards who reviewed and commented on PRs in this release - thank you for your effort!

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

Don't miss a new p5.js release

NewReleases is sending notifications on new releases.

Get notifications