[p5.js 2.0 Bug Report]: Documentation for shader modify() in instance mode doesn't run

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.2

Web browser and version

All

Operating system

All

Steps to reproduce this

Go to https://beta.p5js.org/reference/p5.shader/modify/ and scroll down to the instance mode example. It doesn't fully run. I think it is still using uniformFloat as a global function instead of a property access on the instance.

[rakesh2OO5]

I checked the 2.0 branch of processing/p5.js-website, and the instance mode example in modify.mdx no longer uses the broken uniformFloat('b') pattern.

The source appears fixed, so the beta site may be serving a stale build. This might just need a redeploy of the 2.0 docs.

[aashu2006]

Hi @davepagurek
I have analyzed the instance mode example on the reference page and can confirm the issue.

Root cause:
In instance mode, all p5.js APIs must be accessed via the sketch instance. However, the example currently calls uniformFloat() as a global function, which breaks in instance mode.

Current code (problematic):

myShader = sketch.baseMaterialShader().modify(({ sketch }) => {
let b = uniformFloat('b');
sketch.getPixelInputs((inputs) => {
inputs.color = [inputs.texCoord, b, 1];
return inputs;
});
}, { sketch });

Proposed fix:

myShader = sketch.baseMaterialShader().modify(({ sketch }) => {
let b = sketch.uniformFloat('b');
sketch.getPixelInputs((inputs) => {
inputs.color = [inputs.texCoord, b, 1];
return inputs;
});
}, { sketch });

This matches how other APIs are already used in the same example (e.g. sketch.createCanvas(), sketch.background()).

I am happy to open a PR to update the reference example if this approach looks good.

[aashu2006]

Opened PR #8470 to fix this, thanks!