processing/p5.js
View on GitHub[p5.js 2.0+ Bug Report]: Could use FES error when trying to access one hook's properties from within another
Open
#8813 opened on May 20, 2026
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.2.3
Web browser and version
All
Operating system
All
Steps to reproduce this
Steps:
- Start one hook, e.g.
finalColor.begin() - Reference a property of another, e.g.
pixelInputs.normal
Currently you get an error like TypeError: can't access property "x", pixelInputs.normal is undefined
Ideally, it would tell you that you can't access one hook's properties from within another, and to use sharedVec3 or sharedFloat or something instead to pass values between.
Snippet:
function iridMaterial() {
const uTime = uniformFloat(() => _shaderTime);
const uAlpha = uniformFloat(() => _shaderAlpha);
const uC1r = uniformFloat(() => _c1[0]);
const uC1g = uniformFloat(() => _c1[1]);
const uC1b = uniformFloat(() => _c1[2]);
const uC2r = uniformFloat(() => _c2[0]);
const uC2g = uniformFloat(() => _c2[1]);
const uC2b = uniformFloat(() => _c2[2]);
const uC3r = uniformFloat(() => _c3[0]);
const uC3g = uniformFloat(() => _c3[1]);
const uC3b = uniformFloat(() => _c3[2]);
finalColor.begin();
const nx = pixelInputs.normal.x;
const ny = pixelInputs.normal.y;
const nz = pixelInputs.normal.z;
const fresnel = pow(1.0 - abs(nz), 2.5);
const hueT = uTime + nx * 2.0 + ny * 1.5 + fresnel * 1.2;
const w1 = 0.5 + 0.5 * cos(hueT);
const w2 = 0.5 + 0.5 * cos(hueT + 2.094);
const w3 = 0.5 + 0.5 * cos(hueT + 4.189);
const totalW = w1 + w2 + w3 + 0.0001;
const nw1 = w1 / totalW;
const nw2 = w2 / totalW;
const nw3 = w3 / totalW;
const r = nw1 * uC1r + nw2 * uC2r + nw3 * uC3r;
const g = nw1 * uC1g + nw2 * uC2g + nw3 * uC3g;
const b = nw1 * uC1b + nw2 * uC2b + nw3 * uC3b;
const bright = mix(0.7, 1.0, fresnel);
finalColor.set([r * bright + fresnel * 0.35, g * bright + fresnel * 0.2, b * bright + fresnel * 0.3, uAlpha]);
finalColor.end();
}
Live: https://editor.p5js.org/davepagurek/sketches/_dFJOTqoO