Skip to content

fix(deps): update dependency p5 to v2#236

Open
renovate[bot] wants to merge 1 commit intomainfrom
renovate/p5-2.x
Open

fix(deps): update dependency p5 to v2#236
renovate[bot] wants to merge 1 commit intomainfrom
renovate/p5-2.x

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Mar 15, 2026

ℹ️ Note

This PR body was truncated due to platform limits.

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
p5 (source) ^1.11.3 → ^2.0.0 age adoption passing confidence

Release Notes

processing/p5.js (p5)

v2.2.2

Compare Source

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 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@&#8203;2.2.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@&#8203;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:

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:

// 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);
}
What does p5.strands make possible?

(Special thanks to @​davepagurek for creating the sketches! Excerpted from a blog post about 2.2 updates.)

image

First, consider this sketch, which uses JavaScript loops to draw a cube of cubes. It is only 40 lines, but if there are many more cubes, it will slow down very much. If it is running smoothly, try changing all the “15” to a higher and higher number, such as “30.” As the scene grows, the sketch performance will suffer very noticeably.

The purpose of shader is to use parallel, GPU-based computation to speed this up. Instead of for loops, here is a second version of the same sketch using GLSL. It is 200 lines of code, and, if you are not familiar with GLSL, may be very difficult to read. Look for the “15” here, too, and try changing it to a larger number, like “30” or beyond. The shader-based animation remains smooth, showing the performance benefits of GPU rendering.

Finally, the p5.strands version of this sketch combines a more accessible, readable style of JavaScript with the performance of GLSL.

With the introduction of the WebGPU-based renderer, p5.strands sketches can seamlessly switch between WEBGL or WEBGPU renderer. Here is the same example as above, but using the WebGPU-based renderer. The only changes needed were to use async/await with createCanvas(...), and to import both the main library and the p5.webgpu.js add-on:

    <script src="https://cdn.jsdelivr.net/npm/p5@&#8203;2.2.2/lib/p5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@&#8203;2.2.2/lib/p5.webgpu.js"></script>
All Changes

New Contributors

Stewards

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

Full Changelog: processing/p5.js@v2.2.1...v2.2.2

v2.2.1

Compare Source

What's Changed

This patch includes documentation, bugfixes, and dependency updates. A flatter p5.strands API is also included as part of ongoing incremental strands API.

You can get started with the features in this release using these sketches:

The focus of this patch is performance improvements to WebGPU core add-on. You can load both p5.js and WebGPU mode by adding these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@&#8203;2.2.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@&#8203;2.2.1/lib/p5.webgpu.js"></script>

Then load WebGPU mode in createCanvas:

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

Read more about how it works and where we plan on taking it here!

What's Changed 🎊

New Contributors

Stewards

This patch was stewarded (through code review, comments, and discussion) by
@​davepagurek
@​limzykenneth
@​nbogie
@​perminder-17
@​ksen0

Full Changelog: processing/p5.js@v2.2.0...v2.2.1

v2.2.0

Compare Source

2.2: WebGPU and bugfixes

The 2.2 minor release contains work on WebGPU rendering that has been going on over the past year! WebGPU mode is included in a core add-on now. This release also contains a number of improvements in documentation and p5.strands bugfixes.

To load both p5.js and WebGPU mode, add these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@&#8203;2.2.0/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@&#8203;2.2.0/lib/p5.webgpu.js"></script>

Then load WebGPU mode in createCanvas:

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

Read more about how it works and where we plan on taking it here!
You're also welcome to come by the Discord #webgpu channel 🌱

What's Changed 🎊

New Contributors

Full Changelog: processing/p5.js@v2.1.2...v2.2.0

v2.1.2

Compare Source

What's Changed

Use this link to load the library: https://cdn.jsdelivr.net/npm/p5@​2.1.2/lib/p5.js

This patch includes documentation updates, bugfixes, and improvements on the experimental p5.strands feature.

What's Changed 🎊

New Contributors

Full Changelog: processing/p5.js@v2.1.1...v2.1.2

v2.1.1

Compare Source

Use this link to load the library: https://cdn.jsdelivr.net/npm/p5@​2.1.1/lib/p5.js

What's new in p5.js 2.1 🌱
   let bgColor, fg1Color, fg2Color, msg1, msg2;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fg1Color = color(100);
     fg2Color = color(220);
  
     if(bgColor.contrast(fg1Color)){
       msg1 = 'good';
     }else{
       msg1 = 'bad';
     }
  
     if(bgColor.contrast(fg2Color)){
       msg2 = 'good';
     }else{
       msg2 = 'bad';
     }
  
     describe('A black canvas with a faint grey word saying "bad" at the top left and a brighter light grey word saying "good" in the middle of the canvas.');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(18);
  
     fill(fg1Color);
     text(msg1, 10, 30);
  
     fill(fg2Color);
     text(msg2, 10, 60);
   }

oneColor.contrast(anotherColor) checks the contrast between two colors. This method returns a boolean value to indicate if the two color has enough contrast. true means that the colors has enough contrast to be used as background color and body text color. false means there is not enough contrast.

A second argument can be passed to the method, options , which defines the algorithm to be used. The algorithms currently supported are WCAG 2.1 ('WCAG21') or APCA ('APCA'). The default is WCAG 2.1. If a value of 'all' is passed to the options argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.

   let bgColor, fgColor, contrast;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fgColor = color(200);
     contrast = bgColor.contrast(fgColor, 'all');
  
     describe('A black canvas with four short lines of grey text that respectively says: "WCAG 2.1", "12.55", "APCA", and "-73.30".');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(14);
  
     fill(fgColor);
     text('WCAG 2.1', 10, 25);
     text(nf(contrast.WCAG21.value, 0, 2), 10, 40);
  
     text('APCA', 10, 70);
     text(nf(contrast.APCA.value, 0, 2), 10, 85);
   }

For more details about color contrast, you can check out this page from color.js, and the WebAIM color contrast checker.

Changes since 2.0 🎊

New Contributors

Full Changelog: processing/p5.js@v2.0.0...v2.1.1

v2.1.0

Compare Source

Use this link to load the library: https://cdn.jsdelivr.net/npm/p5@​2.1.0/lib/p5.js

What's new in p5.js 2.1 🌱
   let bgColor, fg1Color, fg2Color, msg1, msg2;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fg1Color = color(100);
     fg2Color = color(220);
  
     if(bgColor.contrast(fg1Color)){
       msg1 = 'good';
     }else{
       msg1 = 'bad';
     }
  
     if(bgColor.contrast(fg2Color)){
       msg2 = 'good';
     }else{
       msg2 = 'bad';
     }
  
     describe('A black canvas with a faint grey word saying "bad" at the top left and a brighter light grey word saying "good" in the middle of the canvas.');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(18);
  
     fill(fg1Color);
     text(msg1, 10, 30);
  
     fill(fg2Color);
     text(msg2, 10, 60);
   }

oneColor.contrast(anotherColor) checks the contrast between two colors. This method returns a boolean value to indicate if the two color has enough contrast. true means that the colors has enough contrast to be used as background color and body text color. false means there is not enough contrast.

A second argument can be passed to the method, options , which defines the algorithm to be used. The algorithms currently supported are WCAG 2.1 ('WCAG21') or APCA ('APCA'). The default is WCAG 2.1. If a value of 'all' is passed to the options argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.

   let bgColor, fgColor, contrast;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fgColor = color(200);
     contrast = bgColor.contrast(fgColor, 'all');
  
     describe('A black canvas with four short lines of grey text that respectively says: "WCAG 2.1", "12.55", "APCA", and "-73.30".');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(14);
  
     fill(fgColor);
     text('WCAG 2.1', 10, 25);
     text(nf(contrast.WCAG21.value, 0, 2), 10, 40);
  
     text('APCA', 10, 70);
     text(nf(contrast.APCA.value, 0, 2), 10, 85);
   }

For more details about color contrast, you can check out this page from color.js, and the WebAIM color contrast checker.

Changes since 2.0 🎊

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 15, 2026 •
edited
Loading

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
❌ Deployment failed
View logs		 just-be-dev f2d558c Mar 18 2026, 09:34 AM

@renovate renovate bot force-pushed the renovate/p5-2.x branch from 75fe94d to 3498678 Compare March 15, 2026 22:06
@renovate renovate bot force-pushed the renovate/p5-2.x branch from 3498678 to f2d558c Compare March 18, 2026 09:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants