processing / processing/p5.js

[p5.js 2.0+ Bug Report]: strands breaking on arrow functions with parameters

Open
#9,180 3 comments 0 reactions 1 assignee View on GitHub

@tsumon is already working on this.

Since Sep 16, 2026.

Help Wanted p5.js 2.0+ p5.strands Technical Initiative
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
p5.js version

2.3.2

Web browser and version

All

Operating system

All

Steps to reproduce this

If you are using instance mode, you have to pass in a second parameter to p5.strands containing whatever outside context you need in the shader. This gets passed back into the function you pass in, so you add an argument to your function to collect the data from the outside world. However, this currently throws an error, I assume because a regex doesn't handle param => { ... } correctly.

new p5(p => {
  let gradientShader

  p.setup = function() {
    p.createCanvas(400, 400, p.WEBGL)
    gradientShader = p.buildMaterialShader((param) => {
      let { p } = param
      let pos = p.sharedVec4()
  
      p.worldInputs.begin();
      pos = [p.worldInputs.position/200, 1];
      p.worldInputs.end();
      
      p.pixelInputs.begin();
      p.pixelInputs.color = pos;
      p.pixelInputs.end();
    }, { p })
  }
  
  p.draw = function() {
    p.clear()
    p.shader(gradientShader)
    p.noStroke()
    p.plane(p.width, p.height)
  }
})

Live: https://editor.p5js.org/davepagurek/sketches/k64e4h1LA

Notably, this works if you:

  • Use function(param) { ... }
  • Use an arrow function with no args (e.g. in global mode)
  • Destructure parameters directly in the parentheses instead of in the function body, e.g. ({ p }) => { ... } in the example above.

I believe we have tests that do some of the above, but I guess not this particular case.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.