processing / processing/p5.js

[p5.js 2.0+ Bug Report]: Should not emit FES warnings on GLSL keywords outside of p5.strands

Open
#9,038 8 comments 0 reactions 1 assignee View on GitHub

@skyyash is already working on this.

Since Aug 27, 2026.

p5.js 2.0+ p5.strands
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.1

Web browser and version

any

Operating system

any

Steps to reproduce this

This issue can be observed in https://github.com/processing/p5.js-website/pull/1522 where the use of length in p5.js sketch code results in FES warnings that actually can be safely ignored. These warnings apply to p5.strands code, which is pseudo-javascript: ie, it is transpiled to glsl. So it has a bit of a different scope than a p5.js function.

For example, the below code should trigger the warning:

let video;
let displaceColors;

function setup() {
  createCanvas(700, 400, WEBGL);
  displaceColors = buildFilterShader(displaceColorsCallback);
  describe(
    'A video of a city crosswalk, with colors getting more offset the further from the center they are'
  );
}

function displaceColorsCallback() { 
  // everything inside this function is p5.strands code: it is javascript-like, but it is transpiled into a glsl shader. Therefore, GLSL functions/keywords including `length` should result in FES warning not to redeclare, even though they can be redeclared OUTSIDE of this p5.strands builder.
  function zoom(coord, amount) {
    return (coord - 0.5) / amount + 0.5;
  }
  filterColor.begin();
  const length = 0; // this doesn't appear to have any effect but should result in a warning
  const uv = filterColor.texCoord;
  const r = getTexture(filterColor.canvasContent, uv).r;
  const g = getTexture(filterColor.canvasContent, zoom(uv, 1.05)).g;
  const b = getTexture(filterColor.canvasContent, zoom(uv, 1.1)).b;
  const a = getTexture(filterColor.canvasContent, uv).a;
  filterColor.set([r, g, b, a]);
  filterColor.end();
}

function draw() {
  background(255);

  circle(mouseX-width/2, mouseY-height/2, 200)
  filter(displaceColors);
}

But the code in this example should NOT have FES messages related to length because that's used outside of p5.strands code.

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.