Testers Wanted 💚

p5.js version 2.4 will be ready soon. 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.4.0-rc.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.4.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);
}

Testing this Release

A few features that are planned for 2.4 are still in progress. Check the changes below, test with existing sketches or by writing new sketches that use new functionality (like SVG, p5.strands instancing, or multi-material 3D models), and report any issues you find to help prepare this version for release.

What's New in 2.4

To help with testing, you don't need to test every single thing. It is very helpful to pick something you're familiar with in p5, and dig into it, especially looking for strange behavior in edge cases. You can pick any section or pull request below, and focus your testing on that.

Patches between 2.3 and 2.4

Starting with 2.3.2, we changed the release process. While work on the 2.4 release continued in the main branch, atomic patches made security updates and bugfixes available sooner. Want to help test? Check the release notes below and ensure everything from prior patches still works as expected.

• 2.3.1 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.
• 2.3.2 This patch improves 2D paths and adds a loading animation to display when setup() takes a long time.
• 2.3.3 This patch release includes a security hardening measure, a couple of bugfixes, and documentation updates.
• 2.3.4 Bugfixes/CI, fixed TypeScript declarations generation

New in 2.4: SVG Support

• @VANSH3104 added SVG import/export in #9123. Usage and examples shown in this playlist. p5.js 2.4 will support this out of the box with no additional imports needed. With thanks to @davepagurek for reviews, and @mingness for project mentorship.

• @Danyccsf also worked on SVG-related bugfixes in #9261 and #9292

p5.strands API additions in 2.4

p5.strands is a feature in p5.js 2.x for authoring shaders using JavaScript. See: "Hello Color World" tutorial and p5.strands contribution guide. This feature in active development. New additive features added in this release:

• @aashu2006 added a simplified instancing API for p5.strands. Read more here (Starting with #8878 and #8912 which was part of 2.3.1, but with most of the work shipping in 2.4 with #8952). Thanks to @davepagurek and @eupthere for your reviews on this feature!
• @perminder-17 added transformation matrix support in #8984.

The below sketch shows these features in the t variable (a 3D transform that includes rotation and translation), and in the instances(count).box(18) line:

let myShader;
let count = 10;

function setup() {
  createCanvas(200, 200, WEBGL);
  myShader = buildMaterialShader(placeOnRing);
}

function placeOnRing() {
  worldInputs.begin();
  let angle = instanceIndex * TWO_PI / count + millis()/1000;
  let t = transform3D();
  t = rotateY(t, angle);
  t = translate(t, 65, 0, 0);
  worldInputs.position = transformPoint(t, worldInputs.position);
  worldInputs.normal = transformNormal(t, worldInputs.normal);
  worldInputs.end();
}

function draw() {
  orbitControl();
  background('purple');

  lights();
  directionalLight(255, 255, 255, 0, 1, 0);
  directionalLight(255, 255, 255, 0, -1, 0);
  ambientLight(255, 100, 0);
  
  noStroke();
  fill('pink');
  shader(myShader);
  instances(count).box(18);
}

loadModel() in 2.4: Multi-Material Support

Significant updates to Friendly Error System (FES) in 2.4

In #9212, @limzykenneth continued the FES rework started in #8887. The FES has been modularized and now supports translation. Finally, in #9307, @limzykenneth improved performance of FES, so it can be used for longer even as sketches get more complex.

Translations can be loaded in two ways, from a local file or from CDN. Within the same folder, the p5.js script will look for ${languageCode}.json for a file matching that name and load it as a translation string JSON, if that file cannot be found, it will then load from the JSDelivr CDN for a version we publish. If that also does not exist, no translation will be loaded and messages will be printed in the language it is written, ie. English.

In #9109, @davepagurek added experimental feature logging, which users will notice when they use SVG and p5.strands API in this release. Thanks to @Vaivaswat2244 for reviewing!

Vectors and Math

Security and Testing

This minor release includes substantial work on updating dependencies and build system, as well as automated tests including performance test. Additionally, based on feedback from Processing Foundation team, current p5.js maintainers, and active p5.js editor contributors, we have now created and published an updated Security Policy that includes a public incident response plan. Thanks to @perminder-17 for stewarding this update in #9298

Graphics Improvements and Bugfixes

Documentation and Bugfixes

p5.js Library is a Community Effort

Stewards & Mentors

Every PR is reviewed by at least one maintainer or steward, most of whom are volunteers. The work in this release was supported by thoughtful comments, reviews, discussions, and mentorship by @davepagurek @diyaayay @eupthere @ksen0 @limzykenneth @mingness @perminder-17 @skyyash @Vaivaswat2244. Additional special thanks to @aashu2006 @Ayush4958 @bhabishnu and @lirenjie95 for your support with reviews!

Welcome to first-time contributors! 🎉

• @ulgens made their first contribution in #9032
• @Danyccsf made their first contribution in #9071
• @slash-init made their first contribution in #9085
• @TheNetherWatcher made their first contribution in #9140
• @yashgoyal0110 made their first contribution in #9115
• @mawerb made their first contribution in #8994
• @AmanUllah687 made their first contribution in #9073
• @sneakyfelix made their first contribution in #9165
• @Pcmhacker-piro made their first contribution in #9170
• @Shruti2110-coder made their first contribution in #9166
• @tsumon made their first contribution in #9188
• @Pranava-Pai-N made their first contribution in #9142
• @frank890417 made their first contribution in #9210
• @bhabishnu made their first contribution in #9220
• @shakeelmohamed made their first contribution in #8918
• @michtesar made their first contribution in #8993
• @Srinidhi444 made their first contribution in #9233
• @BhumitSahani made their first contribution in #9264
• @xsupremeyx made their first contribution in #9286
• @Goutte made their first contribution in #9275
• @solowiz398 made their first contribution in #9009

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