[p5.js 2.0+ Bug Report]: Could use FES error when trying to access one hook's properties from within another

[davepagurek]

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:

1. Start one hook, e.g. finalColor.begin()
2. 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