Skip to content

fix(deps): update dependency p5 to v2 - #100

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

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

Conversation

@renovate

@renovate renovate Bot commented Apr 21, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

ℹ️ Note

This PR body was truncated due to platform limits.

This PR contains the following updates:

Package Change Age Confidence
p5 (source) 1.11.0 → 2.3.2 age confidence

Release Notes

processing/p5.js (p5)

v2.3.2: Patch: Path performance & loading animation

Compare Source

This patch improves 2D paths and adds a loading animation to display when setup() takes a long time.

@​okra-sf reported how using beginShape/endShape with many vertex calls created slowdowns in v2 compared to v1. Work in #​9025 on speeding up how paths are drawn included extensive benchmarking, and was reviewed by @​davepagurek @​VANSH3104 and @​treerao

The loading animation was added in #​8997 by @​Jextic and @​gojoshin as part of the CodeDay program, and reviewed by @​limzykenneth and @​ksen0

🎉 Thanks to all contributors & stewards!

Full Changelog: processing/p5.js@v2.3.1...v2.3.2

v2.3.1

Compare Source

2.3.1 Hex codes in shaders and continued p5.strands development; tint() and other fixes; HDR renamed to P3

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.

  • Fixes for loading SVG files and bad URLs with loadImage(), applying tint() to images in 2D mode, framebuffers with custom pixel densities, orbitControl() after swiping outside the canvas, mouseIsPressed behavior after clicking DOM elements, and line(), point(), triangle(), quad(), rect() (including with rounded corners, like in the example below)
  • In shaders and p5.strands code, this patch adds randomGaussian() and color() support inside p5.strands shader code, instanceIndex for instanced rendering, TRIANGLE_FAN drawing in both WebGL and WebGPU, custom shaders that set uSampler via setUniform(), hooks that return objects should work, custom shaders should be able to use version directives, and mouseX and width in instance mode with p5.strands shaders

[!WARNING]
This release renames the color space previously called HDR to P3 for accuracy. If you use HDR color space constants in your code, please update them to P3. The maintainers felt this correction was important to make now. If you have concerns about backward compatibility, you can share them on the linked pull request discussion.

You can start using this updated version in 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.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.1/lib/p5.webgpu.js"></script>

To use WebGPU mode in createCanvas note the async/await, which is needed for WebGPU but not WebGL:

async function setup() {
  await createCanvas(400, 400, WEBGPU);
}
What's new in p5.strands

randomGaussian() is available in p5.strands code - see the static example in the starter sketch or below, which also shows more p5.js-style, beginner-friendly colors.

Set of rectangles with rounded corners filled with noisy translucent yellow texture on a pink background 
async function setup() {
  //for normal 2D or WEBGL stuff
  createCanvas(400, 400, WEBGL);

  //for WEBGPU stuff 
  // await createCanvas(400, 400, WEBGPU);
  myShader = buildMaterialShader(myShaderBuilder);
}

function myShaderBuilder(){
  finalColor.begin();
  let coord = finalColor.texCoord;

  // color() and randomGaussian() available in p5.strands
  let c = color('#eeff22');
  finalColor.set([c.r, c.g, c.b, randomGaussian()*0.1 + 0.3]);
  
  finalColor.end();
}

function draw() {
  stroke(255);
  background("#f1678e");
  shader(myShader);
  orbitControl();

  // rect with rounded corners
  rect(-50, -50, 100, 100, 50, 10);
  translate(0,0,50);
  rect(-50, -50, 100, 100, 3);
  translate(0,0,50);
  rect(-50, -50, 100, 100, 0, 20, 30, 20);
  translate(0,0,50);
  rect(-50, -50, 100, 100);
}
Custom shader bugfixes
Ongoing work on shapes & SVG
Other bugfixes
Other documentation & error messages updates
New Contributors

Welcome to the community! 🎉

Stewards

Stewards who reviewed and commented on PRs in this release - thank you for your effort!

v2.3.0

Compare Source

2.3.0: New features from the growing p5.strands contributor community 🌱

<a href=https://editor.p5js.org/ksen0/sketches/yqIwIPxnz>Absract pixel image based on Conway's Game of Life with the text p5.js 2.3 on top

What's Changed 🎊

Work since 2.2.3 has focused on stabilization and workflow improvements; refactors to p5.Vector based on the recently-added Decorators API; and new beginner-friendly shader programming API features (p5.strands), as well as the experimental WebGPU renderer.

This release includes work from many contributors, stewards, and testers - including new contributors to p5.strands! welcome, and thanks for all your amazing diligence and creativity 🎉 🎉 🎉

[!NOTE]
This release includes updates in p5.js vectors. Vectors are used in simulations, including many "Nature of Code sketches", like these Autonomous Agents examples. When creating empty vectors, always provide parameters: createVector() ❌ createVector(0,0) ✅ or createVector(0,0,0) ✅ . Although the empty constructor was common before p5.js v2, now p5.js supports vectors of different dimensions. Even when vectors are empty, giving 0, 0 parameters makes it clear if it is a 2D or 3D vector. Operations on vectors are only defined on same-dimension vectors: when adding or multiplying vectors together, for example, both should be 2D or both 3D.

Workflow Improvements

To support testing new contributions, there are now continuous releases on Pull Requests: look for this comment from p5js-bot on any Pull Request, and use the CDN link in test sketches to help with review:

GitHub commend with CDN link

Work is ongoing on distributing custom builds, thanks to @​limzykenneth. Please do test the custom/modular builds tool (there is also OpenAPI JSON documentation available plus GUI API reference).

screenshot of a selector menu to include only some of the modules in p5.js

The goal is smaller import size by providing a custom build. Work is ongoing for more separation between modules, right now Including all modules makes it a bit larger but you can use custom build. For now, the above tool is for testing, rather than for using in your work directly - we welcome your input!

p5.strands updates: new features and experimental compute shader support 🎉

On graphics, we have continued to work on beginner-friendly shader programming API features (p5.strands), as well as the experimental WebGPU renderer.

The p5.strands code has been refactored and simplified, which will make maintenance and contribution easier in the future, thanks to @​davepagurek and @​LalitNarayanYadav. Additionally, p5.strands, used with the experimental WebGPU renderer, now supports compute shaders, thanks to @​davepagurek and @​aashu2006.

This minor release includes exciting p5.strands API additions by the growing p5.strands contributor community:

Here is an example p5.js sketch using p5.strands, with the noise-based texture:

Cloudy cube against a pink background 
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);
}

Finally, p5.strands, used with the experimental WebGPU renderer, now supports compute shaders. 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.)

// 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
Vectors Refactor and Documentation Updates
New Contributors
Thanks to all contributors and stewards who made this release possible!

Full Changelog: processing/p5.js@v2.2.3...v2.3.0

v2.2.3

Compare Source

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
WebGL and p5.strands bugfixes
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: processing/p5.js@v2.2.2...v2.2.3

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@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:

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

✂ Note

PR body was truncated to here.

Configuration

📅 Schedule: (in timezone Europe/Berlin)

  • Branch creation
    • "every 2 weeks on Monday before 7am"
  • 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

cloudflare-workers-and-pages Bot commented Apr 21, 2025 •
edited
Loading

Copy link
Copy Markdown

Deploying p5-code-sandbox with  Cloudflare Pages  Cloudflare Pages

Latest commit: d77789e
Status:🚫  Build failed.

View logs

@netlify

netlify Bot commented Apr 21, 2025 •
edited
Loading

Copy link
Copy Markdown

❌ Deploy Preview for p5-codesandbox failed. Why did it fail? →

Name Link
🔨 Latest commit 9ed0d31
🔍 Latest deploy log https://app.netlify.com/projects/p5-codesandbox/deploys/6839ad153f814a0008ca5308

@renovate
renovate Bot force-pushed the renovate/p5-2.x branch 2 times, most recently from 17676b8 to ceae3b5 Compare April 23, 2025 18:31
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from ceae3b5 to 297cf70 Compare May 14, 2025 14:24
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 297cf70 to 9ed0d31 Compare May 30, 2025 13:05
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 9ed0d31 to 69b5622 Compare August 8, 2025 12:22
@netlify

netlify Bot commented Aug 8, 2025 •
edited
Loading

Copy link
Copy Markdown

❌ Deploy Preview for p5-codesandbox failed. Why did it fail? →

Name Link
🔨 Latest commit 431d7e3
🔍 Latest deploy log https://app.netlify.com/projects/p5-codesandbox/deploys/691c615b7c6c230008cd8332

@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 69b5622 to b2032b2 Compare August 13, 2025 17:08
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch 2 times, most recently from 1035ebc to 52bbe20 Compare September 6, 2025 18:55
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 9e46e44 to 070b9f9 Compare October 21, 2025 14:58
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch 2 times, most recently from adc4b3a to 124cae7 Compare November 11, 2025 00:45
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 124cae7 to 431d7e3 Compare November 18, 2025 12:06
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 431d7e3 to 6a63154 Compare December 30, 2025 21:31
@netlify

netlify Bot commented Dec 30, 2025 •
edited
Loading

Copy link
Copy Markdown

❌ Deploy Preview for p5-codesandbox failed. Why did it fail? →

Name Link
🔨 Latest commit d77789e
🔍 Latest deploy log https://app.netlify.com/projects/p5-codesandbox/deploys/6a7e549066c9050008d433fa

@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 6a63154 to 91ff7c8 Compare January 19, 2026 19:40
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 91ff7c8 to 30db20d Compare January 28, 2026 15:32
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 30db20d to 7bd6a47 Compare February 12, 2026 16:59
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 7bd6a47 to fce44ab Compare February 25, 2026 14:11
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch 2 times, most recently from f745470 to cb10520 Compare March 13, 2026 12:15
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch 2 times, most recently from 3895328 to a1f2469 Compare April 4, 2026 12:40
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from a1f2469 to 273383f Compare April 29, 2026 15:55
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 273383f to 18ccc70 Compare May 18, 2026 09:41
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 18ccc70 to 8293d33 Compare June 1, 2026 20:45
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 8293d33 to ec8fccd Compare June 11, 2026 23:33
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch 2 times, most recently from be9860e to 2ace195 Compare July 17, 2026 09:33
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch 2 times, most recently from 3f4d3d3 to 0f0e0ab Compare August 4, 2026 18:32
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 0f0e0ab to 2bc35bd Compare August 11, 2026 22:53
@renovate
renovate Bot force-pushed the renovate/p5-2.x branch from 2bc35bd to d77789e Compare August 13, 2026 23: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