[p5.js 2.0 Bug Report]: p5.strands | methods and properties of filterColor not known 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

Even though they are definetly usable, in instance mode the methods and properties of filterColor don't show up on autocomplete and typescript says they don't exist on type object (ts(2339)).

Snippet:

import p5 from "p5";

let sketch = (p5: p5) => {
  let filterShader: p5.Shader;

  function testShader({ p5 }: { p5: p5 }) {
    p5.filterColor.begin();
    let coord = p5.vec2(p5.filterColor.texCoord);
    p5.filterColor.set([coord, 0, 1]);
    p5.filterColor.end();
  }

  p5.setup = () => {
    p5.createCanvas(800, 800, p5.WEBGL);
    p5.fill(255);

    filterShader = p5.buildFilterShader(testShader, { p5 });
  };

  p5.draw = () => {
    p5.background(0);
    p5.filter(filterShader);
  };
};

new p5(sketch);

[davepagurek]

So as you noticed in TypeScript, it's currently just typed as an Object. That's because that's directly how we're typing it in the docs currently:

p5.js/src/strands/p5.strands.js

Lines 616 to 658 in 8e87a23

	/**
	* @property {Object} filterColor
	* @description
	* A shader hook block that sets the color for each pixel in a filter shader. This hook can be used inside <a href="#/p5/buildFilterShader">`buildFilterShader()`</a> to control the output color for each pixel.
	*
	* `filterColor` has the following properties:
	* - `texCoord`: a two-component vector representing the texture coordinates (u, v).
	* - `canvasSize`: a two-component vector representing the canvas size in pixels (width, height).
	* - `texelSize`: a two-component vector representing the size of a single texel in texture space.
	* - `canvasContent`: a texture containing the sketch's contents before the filter is applied.
	*
	* Call `.set()` on the hook with a vector with four components (red, green, blue, alpha) to update the final color.
	*
	* This hook is available in:
	* - <a href="#/p5/buildFilterShader">`buildFilterShader()`</a>
	*
	* @example
	* let myShader;
	* function setup() {
	* createCanvas(200, 200, WEBGL);
	* myShader = buildFilterShader(warp);
	* }
	*
	* function warp() {
	* filterColor.begin();
	* // Warp the texture coordinates for a wavy effect
	* let warped = [
	* filterColor.texCoord.x,
	* filterColor.texCoord.y + 0.1 * sin(filterColor.texCoord.x * 10)
	* ];
	* let tex = filterColor.canvasContent;
	* filterColor.set(getTexture(tex, warped));
	* filterColor.end();
	* }
	*
	* function draw() {
	* background(180);
	* // Draw something to the canvas
	* fill('yellow');
	* circle(0, 0, 150);
	* filter(myShader);
	* }
	*/

We probably need to make something like a @typedef jsdoc node for each of these where we give it more type info. An example of a simple case of that is here, just used to define a constant:

p5.js/src/core/constants.js

Lines 23 to 24 in 8e87a23

	* @typedef {'p2d'} P2D
	* @property {P2D} P2D

Maybe a typedef will work here too? There's a chance our system isn't set up to handle a more complex typedef with properties like that, in which case we'd possibly also have to augment the ts type generation script. But it's worth trying that and running npm run generate-types and then checking types/p5.d.ts to see if it works!

[saurabh24thakur]

I can confirm this typing issue in instance mode. It seems like the filterColor object is missing proper type definitions in the latest p5.js 2.0 builds, causing the 'ts(2339)' error even though the logic works at runtime.

I'd like to investigate the .d.ts generation to see where the definitions are dropping off. If I can identify the missing JSDoc or interface definition, would it be alright if I raise a PR to fix this?

[davepagurek]

Hi @saurabh24thakur, thanks for your enthusiasm! @christophseibel expressed interest in tackling this one so we're going to let them take a look first.

[saurabh24thakur]

Hi @saurabh24thakur, thanks for your enthusiasm! @christophseibel expressed interest in tackling this one so we're going to let them take a look first.

No problem at all, @davepagurek! Totally understand. I'll keep an eye on the progress of the issue to see how the fix is implemented.

In the meantime, I'll look for other open areas in the repository where I can contribute. Thanks for the update..