p5.js

What's Changed

This patch contains bugfixes, documentation updates, and improvements in developer experience:

1. A decorator API for further customisation of p5.js by addons without needing to duplicate or directly modify internal implementation. It is already used internally by FES parameter validation and provides a route towards additional accessibility oriented features. It is based on this proposal. (@limzykenneth)
2. A fix enabling p5 global-mode typescript use, such as in this non-trivial example (@nbogie)
3. Extensive update to the contributor documentation for testing 2.x p5.js reference locally (@nbogie)
4. Bugfixes for p5.strands and WebGL (@davepagurek and @aashu2006)
5. Other bugfixes, docs updates, and improvement (@avinxshKD , @codervinitjangir, @imrinahru , @MASTERsj01, @Nitin2332)

Try it out!

To use this patch, 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.2.3/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.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);
}

If you take any existing sketch, such as from the intro to strands tutorial, you can switch from WEBGL to WEBGPU (async/await will be needed!)

Read more about how the WebGPU-based renderer works and where we plan on taking it here!

Developer experience

• Implement public decorator API by @limzykenneth in https://github.com/processing/p5.js/pull/8353
• add export default p5 at end of global.d.ts by @nbogie in https://github.com/processing/p5.js/pull/8299
• fix: replace raw console.log calls with p5._friendlyError across multiple modules (addresses #8621) by @MASTERsj01 in https://github.com/processing/p5.js/pull/8622
• skip FES checks on internal calls by @avinxshKD in https://github.com/processing/p5.js/pull/8517

Documentation updates

• fix strands filterColor example by @nbogie in https://github.com/processing/p5.js/pull/8569
• Update contributing_to_the_p5js_reference for p5 v2 by @nbogie in https://github.com/processing/p5.js/pull/8462
• change strands examples to use millis() not uniform by @nbogie in https://github.com/processing/p5.js/pull/8648
• Unescape < and > in inline code in docs by @davepagurek in https://github.com/processing/p5.js/pull/8661
• docs: remove deprecated beginGeometry() and endGeometry() references by @codervinitjangir in https://github.com/processing/p5.js/pull/8642
• Update Discord invite links in p5.js dev-2.0 by @Nitin2332 in https://github.com/processing/p5.js/pull/8659
• Sync 2.0 readme with 1.x by @ksen0 in https://github.com/processing/p5.js/pull/8664

WebGL and p5.strands bugfixes

• Handle booleans used as temp variables in p5.strands by @davepagurek in https://github.com/processing/p5.js/pull/8548
• Fix usage of perspective() with no args by @davepagurek in https://github.com/processing/p5.js/pull/8564
• Avoid unnecessary texture copies and fix flipped webcams in WebGL by @davepagurek in https://github.com/processing/p5.js/pull/8572
• Handle strands set() calls in branches and loops by @davepagurek in https://github.com/processing/p5.js/pull/8576
• Fix filter() crash on createGraphics(WEBGL) by mirroring strands API … by @aashu2006 in https://github.com/processing/p5.js/pull/8568
• Fix a bug where shared strands variables are detected in the wrong spot by @davepagurek in https://github.com/processing/p5.js/pull/8641

Other bugfixes

• fix: createGraphics inherits pixelDensity from parent sketch. by @imrinahru in https://github.com/processing/p5.js/pull/8558
• Reset mouseIsPressed on window blur by @avinxshKD in https://github.com/processing/p5.js/pull/8559

New Contributors

• @imrinahru made their first contribution in https://github.com/processing/p5.js/pull/8558
• @MASTERsj01 made their first contribution in https://github.com/processing/p5.js/pull/8622
• @codervinitjangir made their first contribution in https://github.com/processing/p5.js/pull/8642

Stewards & testers

Thanks to @nbogie @davepagurek for code review and @aashu2006 and @Jatin24062005 for additional support with testing the release candidates 🎉

Full Changelog: https://github.com/processing/p5.js/compare/v2.2.2...v2.2.3