Download Latest Version p5.zip (1.2 MB)
Email in envelope

Get an email when there's a new version of p5.js

Home / v2.2.2
Name Modified Size InfoDownloads / Week
Parent folder
p5.esm.js 2026-02-22 4.2 MB
0
p5.js 2026-02-22 4.4 MB
0
p5.min.js 2026-02-22 953.9 kB
0
p5.zip 2026-02-22 5.2 MB
0
README.md 2026-02-22 4.9 kB
0
v2.2.2 source code.tar.gz 2026-02-22 20.9 MB
0
v2.2.2 source code.zip 2026-02-22 21.9 MB
0
Totals: 7 Items   57.6 MB 0

What's Changed

This patch focuses on bugfixes, particularly on WebGPU performance and p5.strands. The goal is that all p5.strands shaders work with both WebGPU and WebGL canvases. This patch also adds millis() support inside strands code.

To test 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:

:::html
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.webgpu.js"></script>

Then load WebGPU mode in createCanvas - note the async/await, this is needed for WebGPU but not WebGL:

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

If you take any existing sketch, such as from the intro to strands tutorial, iyou 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!

millis() supported in p5.strands

Here is a sketch (thanks @perminder-17!) showing millis() being used inside a strands shader. Previously, const t = uniformFloat(() => millis()); was needed. This can still be used, but you can instead use millis() directly:

:::js
// p5.js (WEBGL) sketch showing millis() driving a wavy displacement
let mat;

function setup() {
  createCanvas(600, 400, WEBGL);
  pixelDensity(1);

  mat = baseMaterialShader().modify(() => {
    // displace geometry in world-space based on y + time
    getWorldInputs((inputs) => {
      const wave = sin(inputs.position.y * 0.05 + millis() * 0.004);
      inputs.position += [20, 25, 20] * wave;
      return inputs;
    });
  });
}

function draw() {
  background(15);
  orbitControl();

  // lights so the material shader looks nice
  ambientLight(40);
  directionalLight(255, 255, 255, 0.3, 0.6, -1);

  // apply the modified material shader + draw some geometry
  shader(mat);
  noStroke();

  // some rotation so you can see the displacement depth
  rotateY(frameCount * 0.01);
  rotateX(-0.25);

  // a tall shape so Y-based waves are obvious
  sphere(120, 80, 60);
}

All Changes

New Contributors

Stewards

Code review and additional support with testing the release candidates supported by:

  • @davepagurek
  • @nbogie
  • @aashu2006

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

Source: README.md, updated 2026-02-22