processing / processing/p5.js

[p5.js 2.0+ Bug Report]: strands not handling comma operator (common in minified js)

Open
#9,178 6 comments 0 reactions 1 assignee View on GitHub

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

A common thing you'll see in some JavaScript minifiers is to collapse multiple statements (things separated by semicolons generally) into one expression (something that evaluates to a single value) via the comma operator. E.g. something like this:

let a
if (something) {
  someThingIsTrue();
  a = 1;
} else {
  somethingElse();
  a = 2;
}

...might get compressed into this:

let a = something ? (somethingIsTrue(), 1) : (somethingElse(), 2);

Anyway it seems p5.strands does not handle comma operators well. In the example below, simulating something a minifier produced while using strands at work, transpiles to invalid javascript:

let gradientShader

function setup() {
  createCanvas(400, 400, WEBGL)
  gradientShader = buildMaterialShader(() => {
    let pos = sharedVec4()

    worldInputs.begin(), pos = [worldInputs.position/200, 1], worldInputs.end()
    
    pixelInputs.begin(), pixelInputs.color = pos, pixelInputs.end()
  })
}

function draw() {
  clear()
  shader(gradientShader)
  noStroke()
  plane(width, height)
}

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

This transpiles to:

let pos = sharedVec4('pos');
    worldInputs.begin(), pos.bridge(__p5.strandsNode([
        __p5.strandsNode(worldInputs.position).div(200),
        1
    ]));, worldInputs.end();
    pixelInputs.begin(), pixelInputs.color = pos.getValue(), pixelInputs.end();

Note that there's a ;, in there. I think a few spots in our transpiler code have the assumption that each line is its own statement and is emitting semicolons where it shouldn't. We should do a little audit for those and create some test cases and fixes.

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.