Skip to content

Releases: processing/p5.js

v2.3.0-rc.1

11 May 16:01
Immutable release. Only release title and notes can be modified.

Choose a tag to compare

v2.3.0-rc.1 Pre-release
Pre-release

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 transpileS...
Read more

v1.11.14-rc.0

04 May 19:39
Immutable release. Only release title and notes can be modified.

Choose a tag to compare

v1.11.14-rc.0 Pre-release
Pre-release

What's Changed

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 test this patch, you can use this starter sketch.

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.14-rc.0/lib/p5.js"></script>

Code updates

  • fix: prevent browser freeze when tessellating >50k vertices (#8219 ) by @Nixxx19 in #8555

Workflow updates

Documentation updates

New Contributors

Full Changelog: v1.11.13...v1.11.14-rc.0

v1.11.13

08 Apr 16:07

Choose a tag to compare

What's Changed

This patch addresses the recent regression in point positioning.

What's Changed 🎊

  • Update Node.js version from 20 to 22 in workflow by @ksen0 in #8686
  • Add kitlord to stewards.yml with p5.js-web-editor by @ksen0 in #8687
  • chore: update README table from stewards.yml by @p5js-bot in #8688
  • Revise p5.js 2.0 Bug Report template by @ksen0 in #8692
  • fix point() origin bug and stale per-vertex color leak by @perminder-17 in #8712

Full Changelog: v1.11.12...v1.11.13

v1.11.13-rc.0

08 Apr 12:49

Choose a tag to compare

v1.11.13-rc.0 Pre-release
Pre-release

What's Changed

This patch addresses the recent regression in point positioning.

What's Changed 🎊

  • Update Node.js version from 20 to 22 in workflow by @ksen0 in #8686
  • Add kitlord to stewards.yml with p5.js-web-editor by @ksen0 in #8687
  • chore: update README table from stewards.yml by @p5js-bot in #8688
  • Revise p5.js 2.0 Bug Report template by @ksen0 in #8692
  • fix point() origin bug and stale per-vertex color leak by @perminder-17 in #8712

Full Changelog: v1.11.12...v1.11.13-rc.0

v1.11.12

30 Mar 17:12

Choose a tag to compare

What's Changed

This p5.js v1 release reflects increasing stability of this version. Most of this patch is documentation updates, with a few bugfixes.

This patch also includes some notable updates in the project as a whole:

Bugfixes & FES

Documentation

New Contributors

Full Changelog: v1.11.11...v1.11.12

v2.2.3

23 Mar 21:46

Choose a tag to compare

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

Documentation updates

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

WebGL and p5.strands bugfixes

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

Other bugfixes

New Contributors

Stewards & testers

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

Full Changelog: v2.2.2...v2.2.3

v1.11.12-rc.2

30 Mar 13:42

Choose a tag to compare

v1.11.12-rc.2 Pre-release
Pre-release

What's Changed

What's Changed 🎊

  • [TESTERS NEEDED] Rewrite AGENTS.md with community-first agent guidelines by @SableRaf in #8604
  • Update Discord invite links in p5.js by @Nitin2332 in #8658
  • Update contributor guidelines for issue usage and labels by @ksen0 in #8656
  • docs: add Nitin2332 as a contributor for code by @allcontributors[bot] in #8657
  • chore: update contributors.png from .all-contributorsrc by @p5js-bot in #8663

Full Changelog: v1.11.12-rc.1...v1.11.12-rc.2

v2.2.3-rc.1

16 Mar 20:53

Choose a tag to compare

v2.2.3-rc.1 Pre-release
Pre-release

What's Changed

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 test this patch, you can use this starter sketch.

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.3-rc.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.3-rc.1/lib/p5.webgpu.js"></script>

What's Changed 🎊

  • Fix a bug where shared strands variables are detected in the wrong spot by @davepagurek in #8641
  • add export default p5 at end of global.d.ts by @nbogie in #8299
  • change strands examples to use millis() not uniform by @nbogie in #8648

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

v2.2.3-rc.0

10 Mar 22:05

Choose a tag to compare

v2.2.3-rc.0 Pre-release
Pre-release

What's Changed

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 test this patch, you can use this starter sketch.

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.3-rc.0/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.3-rc.0/lib/p5.webgpu.js"></script>

What's Changed 🎊

New Contributors

Full Changelog: v2.2.2...v2.2.3-rc.0

v1.11.12-rc.1

10 Mar 22:01

Choose a tag to compare

What's Changed 🎊

The next patch will contain various documentation improvements and WEBGL bugfixes. Highlight: the README now contain a single image of all the contributor icons! This allows both visibility and faster loading.

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 test this patch, you can use this starter sketch!

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.12-rc.1/lib/p5.js"></script>

Bugfixes (WEBGL)

Docs and Error Messages

New Contributors

Full Changelog: v1.11.11...v1.11.12-rc.1