processing/p5.js

[p5.js 2.0+ Bug Report]: p5.strands breaks if uniforms have two underscores in them

Open

#8794 opened on May 13, 2026

View on GitHub
 (7 comments) (2 reactions) (1 assignee)JavaScript (20,784 stars) (3,178 forks)batch import
Area:WebGLArea:WebGPUHelp Wantedp5.js 2.0+p5.strands

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.x

Web browser and version

All

Operating system

All

Steps to reproduce this

Steps:

  1. Create a p5.strands shader
  2. Create a uniform containing two underscores
  3. Use it in the shader

We currently try to make uniform variables in the shader code named the same as the variable in your javascript. However, GLSL doesn't let you have two underscores:

Yikes! An error occurred compiling the vertex shader: ERROR: 0:47: '__val' : identifiers containing two consecutive underscores (__) are reserved as possible future keywords

We would need to rename these internally to not have this issue.

Snippet:

function setup() {
  createCanvas(400, 400, WEBGL);
  const myShader = buildFilterShader(() => {
    const __val = uniformFloat(() => 0.5)
    filterColor.begin()
    filterColor.set([__val, __val, __val, 1])
    filterColor.end()
  })
  filter(myShader)
}

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

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic understanding of GLSLFamiliarity with p5.js strands
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue is in the shader code generation within p5.strands, specifically when assigning uniform names. GLSL reserves identifiers with double underscores, so the code that derives uniform variable names from JavaScript variable names must sanitize them. Look into the `buildFilterShader` function and uniform handling in the p5.js source, likely in `src/webgl/` or `src/strands/`. The fix involves replacing or stripping double underscores in uniform names before passing them to the shader compiler.