Add shortcut methods for modifying base shaders and documentation

[NalinDalal]

• Introduced modifyMaterialShader, modifyFilterShader, modifyNormalShader, modifyColorShader, and modifyStrokeShader functions
• Added documentation file modifymethod shortcut.md explaining usage and benefits

Resolves #7993

---

Shader Modification Shortcuts

Overview

This PR introduces shortcut methods for modifying base shaders in p5.js. These methods reduce boilerplate and make it easier for users to customize shaders by combining base shader creation and modification into a single function call.

Added File

src/webgl/modifyShaderShortcuts.js

Contains the following exported functions:

• modifyMaterialShader(modifier)
• modifyFilterShader(modifier)
• modifyNormalShader(modifier)
• modifyColorShader(modifier)
• modifyStrokeShader(modifier)
• attachModifyShaderShortcuts(p5Instance)

Usage

Direct Usage

let myShader = modifyMaterialShader({...});

Equivalent to:

let myShader = baseMaterialShader().modify({...});

Attaching to p5 Prototype

To make these shortcuts available in all sketches, call:

import { attachModifyShaderShortcuts } from './src/webgl/modifyShaderShortcuts.js';
attachModifyShaderShortcuts(p5);

Then you can use:

let myShader = modifyMaterialShader({...});

Benefits

• Reduces boilerplate: No need to separately call the base shader and .modify().
• Improves usability: Less chance of user error (e.g., forgetting parentheses).
• Modular: Shortcuts are provided in a separate file for easy maintenance and testing.

Example

// Old way:
let myShader = baseMaterialShader().modify({
  // custom hooks
});

// New way:
let myShader = modifyMaterialShader({
  // custom hooks
});

How to Test

1. Import and attach the shortcuts as shown above.
2. Use any shortcut method in your sketch.
3. Confirm that the returned shader behaves as expected.

---

PR Checklist

• npm run lint passes
• [Inline reference] is included / updated
• [Unit tests] are included / updated

[davepagurek]

Thanks for working on this! Are you still interested in continuing? I think to get this mergeable, I'd like to:

• copy the examples from each base shader's docs, but using the new syntax
• maybe update the docs to be more clear about the parameters -- currently they mention parameters for .modify but readers will not be aware that this is equivalent to baseMaterialShader().modify(...). I think maybe we'll want to mention the methods you can call within the callback function for each shader, and maybe mention at the end that this is equivalent to modify(..) and link to those docs for more advanced usage.
• possibly use a create* prefix instead of modify*prefix? @ksen0 and @limzykenneth we've talked a little about creation patterns in p5, and although these are shortcuts to a modify method, overall this still is creating a new shader, so this might be more appropriate?

[davepagurek]

It looks like this file got pretty restructured, was that intentional?

[NalinDalal]

pushing the new code to avoid the circular dependencies

[NalinDalal]

still if the code breaks or anything comes up, please let know
I am trying

[davepagurek]

Right now a lot of this file has changed slightly, e.g. method names inside other examples are renamed. I think for this to be mergeable we'll need to keep everything else in place. Do you think we can start from your previous code, and just add examples in without modifying the rest? Not sure if you're using AI to make changes or not, but modifying other pieces slightly is something it does sometimes.

The ones I was thinking of adding are, e.g. for createMaterialShader, the examples from here:

p5.js/src/webgl/material.js

Line 1432 in bfe2867

* @example

[davepagurek]

These aren't methods that exist, let's take this bit out

[davepagurek]

I think this sentence (with slight modification -- "this function" instead of "these functions" when referring to a specific create* function) can be brought out of the example inside the docs, and just into the main text of the docs.

[ksen0]

Hi both, really exciting to see this!

possibly use a create* prefix instead of modify*prefix? @ksen0 and @limzykenneth we've talked a little about creation patterns in p5, and although these are shortcuts to a modify method, overall this still is creating a new shader, so this might be more appropriate?

On some reflection, I am gently leaning toward create* prefix here.

Initially I would have voted for modify* - this is because introducing new terms always has a cost; the modify pattern and term exists, so at least it's not new.

However, these shortcuts do seem better described by create*.