Add shader examples for math functions

[SOUMITRO-SAHA]

Resolves #8777 (Calculation batch)

Changes:

Adds inline p5.strands examples to the reference documentation for 13 calculation functions in src/math/calculation.js:

• abs() — mirror/fold effect using abs(sin(t))
• ceil() — stepped color bands
• floor() — posterized banding effect
• fract() — repeating gradient pattern
• sqrt() — smooth easing curve
• pow() — gamma curve effect
• exp() — accelerating brightness
• log() — decelerating color transition
• min() — maximum brightness clamp
• max() — minimum brightness clamp
• round() — quantized posterized colors
• lerp() — color blending (maps to GLSL mix)
• map() — remapped time to color

Each example uses buildColorShader() with finalColor.begin()/end() and includes a brief explanation that the function can be used in shaders with p5.strands.

Screenshots of the change:

PR Checklist

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

[nbogie]

looks good though i didn't test the examples.

[nbogie]

As elsewhere, i think breaking this down is clearer

let mixFraction = ...
//define the two colours we'll mix between
//both as [r, g, b, a], all from 0.0 to 1.0
let color1 = [0, 0.8, 08, 1]
let color2 = [1, 0.5, 0.3, 1]
let mixedColor = lerp(color1, color2, mixFraction);
finalColor.set(mixedColor);

This is also has quite a lot going on in order to demonstrate lerp: (millis and sin, and its normalization), but:

• I think it's ok, if we're assuming the expected reader already understands lerp from a 2d context.
• Otherwise a static form like `

//mix a color 25% cyan, 75% magenta
let mixedColor = lerp(cyan, magenta, 0.25);

would be better suited.

However, your example is far more inspiring! I like it!

[SOUMITRO-SAHA]

Thanks @nbogie ! I'll apply the same pattern as PR #8801 — breaking down the lerp() example with named color variables and a clearer structure. I like keeping the animated example since it's more inspiring, but I'll make it more readable.

Pushing the changes shortly!

[perminder-17]

On the website when I run your forked branch to check the actual changes, it looks something like this:

You can verify your changes by running the p5.js-website locally against your fork/branch of p5.js.

Here's the step

1. Clone the website repository:

git clone https://github.com/processing/p5.js-website.git
cd p5.js-website

2. Switch to the 2.0 branch (since you are working on the p5.js 2.x version):

git checkout 2.0

3. Install dependencies:

npm install

Run the website against your p5.js branch using the custom:dev script.

npm run custom:dev https://github.com/SOUMITRO-SAHA/p5.js.git#docs-8777-strands-calc-examples

It would run your current changes.

Also, if you need to add new examples, you need to use the @example tag and then write your code instead of ```js . After the changes, you can verify by running the website locally with your changes. Thanks for your work so far :)

[SOUMITRO-SAHA]

Thanks for the detailed steps and the screenshot, @perminder-17 ! I really appreciate you taking the time to verify this on the website and showing me how to set it up locally.

I wasn't aware the website renders examples differently than how they appear in the web editor. I had been testing all the examples in the p5 web editor and using the ``js example syntax I saw in other parts of the codebase (like material.js), so I didn't realise that format wasn't rendering correctly on the reference pages for these math functions.

I'll:

1. Clone the website repo and run it locally against my branch to verify the current state
2. Update all the strands examples to use @example tags instead of the code fence blocks
3. Verify everything renders correctly on the site before pushing

Thanks for the guidance

[SOUMITRO-SAHA]

WhatsApp.Video.2026-05-20.at.20.08.44.mp4

Hi, @perminder-17 ,

I am currently reviewing other examples that use the following format for examples:

**```js example **

I am trying to understand the expected template and check whether this approach will work. From what I understood, we only need to move the example section before the @method, @param, and @return tags.

I have also added a dummy video for testing. If this looks fine, then I will raise fixes for all the examples in PR 8001, 8002, and 8003 as well.

[davepagurek]

The issue is just that the @example tags all go at the end. If we want to interleave description and examples, there must not be any @example tags inside the region where descriptions appear; any existing ones have to be converted to js example code fences. I think your previous changes weren't rendering correctly because they appeared after an @example block:

Generally, I think it is preferable to introduce the example with description if it's not obvious, especially in this case because we're suddenly jumping to p5.strands shaders. So I think that means you'll need to convert the previous examples to inline js example code fences.

[SOUMITRO-SAHA]

Thanks @nbogie , @perminder-17 , and @davepagurek for all the feedback!

I've tested all the changes locally on the p5.js-website following the steps @perminder-17 shared, and everything renders correctly now. I've also improved the examples based on the review suggestions and added clearer comments for explanation.

I'll be applying a similar approach to the remaining PRs shortly.

[perminder-17]

Thanks @nbogie , @perminder-17 , and @davepagurek for all the feedback!

I've tested all the changes locally on the p5.js-website following the steps @perminder-17 shared, and everything renders correctly now. I've also improved the examples based on the review suggestions and added clearer comments for explanation.

I'll be applying a similar approach to the remaining PRs shortly.

thanks for the update, I'll take a look soon.