[p5.js 2.0 Bug Report]: p5.strands global variables not available/working correctly in instance mode

[christophseibel]

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

Web browser and version

Safari 26.3

Operating system

MacOSX

Steps to reproduce this

Problem:

the p5.js global variables that are being made available as uniforms dont work correctly in instance mode. the snipet code throws this error on runtime:

Unhandled Promise Rejection: TypeError: p53.mouseX.div is not a function. (In 'p53.mouseX.div(p53.width)', 'p53.mouseX.div' is undefined)

this does NOT seem to be an error with the mouse variable, if you rearrange the variables:

    let mouse = p5.vec2([p5.displayWidth / p5.mouseY, p5.mouseY / p5.height]);

you get the same error thrown at you.

using the variables without the "p5" instance as prefix weirdly works

Snippet:

  function testShader({ p5 }: { p5: p5 }) {
    p5.filterColor.begin();
    let mouse = p5.vec2([p5.mouseX / p5.width, p5.mouseY / p5.height]);
    p5.filterColor.set([mouse, 0, 1]);
    p5.filterColor.end();
  }

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms.

For guidance on contributing, check out our contributing guidelines and other resources for contributors.
💬 If you have questions or need support, feel free to join the Processing Foundation Forum or visit our Community page.
📜 Please also review our Code of Conduct to understand our community standards.
Thank You!

[davepagurek]

I made a test sketch to debug this: https://editor.p5js.org/davepagurek/sketches/HLQelKSTK

If you run this with the debugger open, you can inspect what myp5.mouseX is. It appears to just be a number (0 in the screenshot below), rather than a uniform node:

It appears that while we have a thing that creates uniform variable nodes while a shader is running, we're only hooking them to window, not to fn, which works on instance mode too:

p5.js/src/strands/strands_api.js

Lines 97 to 115 in 8e87a23

	function installBuiltinGlobalAccessors(strandsContext) {
	if (strandsContext._builtinGlobalsAccessorsInstalled) return
	const getRuntimeP5Instance = () => strandsContext.renderer?._pInst || strandsContext.p5?.instance
	for (const name of Object.keys(BUILTIN_GLOBAL_SPECS)) {
	const spec = BUILTIN_GLOBAL_SPECS[name]
	Object.defineProperty(window, name, {
	get: () => {
	if (strandsContext.active) {
	return getBuiltinGlobalNode(strandsContext, name);
	}
	const inst = getRuntimeP5Instance()
	return spec.get(inst);
	},
	})
	}
	strandsContext._builtinGlobalsAccessorsInstalled = true
	}

So likely we need to update the above code to also work on fn (which is an alias for p5.prototype), and likely also p5.Graphics.prototype.

[saurabh24thakur]

I’ve been investigating the typing issue in #8574 and it seems closely related to this runtime error in #8575.

Both suggest a regression in how instance variables are bound within the WebGL context in p5.js 2.0. The TypeError indicates that the p5 instance properties aren't resolving correctly inside the shader function scope.

I’d like to debug the instance binding logic for both issues and propose a unified fix. May I be assigned to investigate this further?

[davepagurek]

This isn't exactly a 2.0 regression because these features didn't exist prior to that 🙂 When this one was added, it seems like it was just added specifically on window only. This also seems related to what @aashu2006 is working on in #8568 where we were previously assigning to window and fn but not p5.Graphics.prototype. Here, we're only assigning to window, so we need the other two.

[saurabh24thakur]

Thanks for the clear explanation and the debugger link, @davepagurek

It makes sense that the accessors are only hooked to window and missing from fn and p5.Graphics.prototype. I’m looking at the installBuiltinGlobalAccessors function in src/strands/strands_api.js now.

I'd love to work on extending these accessors to fn and p5.Graphics.prototype as suggested. Should I go ahead with a PR for this, or are there any specific edge cases with #8568 I should keep in mind??

[davepagurek]

Feel free to go ahead with a PR! I can't think of other edge cases just yet, but let's add a unit test with these in instance mode + on p5.Graphics and see if anything else comes up.

[aashu2006]

This seems closely related to #8568 since installBuiltinGlobalAccessors is currently only attaching to window. In instance mode and on p5.Graphics, the accessors won’t be available, similar to the strands mirroring issue we fixed there.
Happy to help test or review if useful.

[davepagurek]

Thanks @aashu2006, your review would definitely be appreciated! Since it often takes a few days to get to a review, it's helpful for contributors to peer review when they're interested and have the time.