Add shader examples for math functions by SOUMITRO-SAHA · Pull Request #8802 · processing/p5.js

SOUMITRO-SAHA · 2026-05-16T08:51:10Z

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

Add comprehensive shader examples for abs, ceil, exp, floor, lerp, log, map, max, min, pow, round, sqrt, and fract functions in p5.strands, demonstrating their usage in WebGL shaders with practical color effects.

nbogie

looks good though i didn't test the examples.

nbogie · 2026-05-16T12:50:17Z

+   *   let t = millis() * 0.001;
+   *   let value = 0.5 + 0.5 * sin(t);
+   *   finalColor.begin();
+   *   finalColor.set(lerp([0, 0.8, 0.8, 1], [1, 0.5, 0.3, 1], value));


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!

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

Clone the website repository:

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

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

git checkout 2.0

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 · 2026-05-20T12:17:43Z

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:

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

Thanks for the guidance

@example

Convert all 13 inline shader examples from markdown code fence (```js example) to JSDoc @example tags so they render correctly on the p5.js website.

SOUMITRO-SAHA · 2026-05-20T14:44:14Z

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 · 2026-05-20T18:14:44Z

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 · 2026-05-21T11:45:37Z

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 · 2026-05-21T12:07:06Z

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.

SOUMITRO-SAHA · 2026-05-30T10:47:45Z

Hi @perminder-17 , just following up here. Any feedback on this PR, Let me know if anything else is needed.

perminder-17 · 2026-05-31T12:13:02Z

+   *
+   *   // In p5.strands, lerp() maps to the GLSL mix() function.
+   *   // mix() blends teal (when value = 0) and coral (when value = 1).
+   *   finalColor.set(mix(teal, coral, value));


I think we should use lerp() here instead of mix() since it's in the example of lerp()

I tried using lerp() initially, but it doesn't produce any visual changes on the p5.js website when rendered in a shader callback. Here's why:

In global mode, p5.js binds all prototype methods to window via bindGlobal() (main.js:99). So window.lerp gets the original scalar-only version. Later, when strands augments lerp to delegate to mix (strands_api.js:290), it uses augmentFn() which updates p5.prototype.lerp and p5.Graphics.prototype.lerp — but does NOT update window.lerp. The transpiled shader callback resolves lerp from the global scope, so it gets the original scalar-only version instead of the strands-aware one.

In contrast, mix() is a new function added by strands — there's no pre-existing window.mix binding, so it resolves correctly.

Do you think this is a bug? Since lerp() works in the playground, should I update the example to use lerp(), or keep using mix() as a workaround?

lerp-not-working.mp4

You should use lerp, I think lerp is not defined at your library. Most likely you are using the older version of code. lerp is added recently in the library for strands. Can you please check what's getting on the console in your case? Is it says something like lerp() is not defined?

+1 to Perminder's comment, lerp() is more consistently supported in recent release of 2.3. Thanks!

Thanks @ksen0 and @perminder-17 for the context. I can confirm that after updating to p5.js version 2.3.0, lerp() is working properly in the shader callback. I've tested it and pushed the changes.

perminder-17 · 2026-05-31T12:17:17Z

+   *   let value = log(1 + t) * 0.2;
+   *   value = min(value, 1);


Can we do let value = min(log(1 + t * 2) * 0.4, 1); instead.

Also, 0.2 multiplier is too small, it will take a lot of time to reach yellow, so do you think you can use 0.4 instead?

perminder-17 · 2026-05-31T13:11:14Z

+   *   // pow(t, 2) squares the time value: it starts slow then accelerates.
+   *   // Multiply by 0.001 so it doesn't reach 1 too quickly.
+   *   // min(..., 1) caps the value at 1.
+   *   let value = min(pow(t, 2) * 0.001, 1);


Suggested change

* let value = min(pow(t, 2) * 0.001, 1);

* let value = pow(t, 2);

perminder-17

Looks good! just some minor comments.

time-based animation examples for clarity and range.

p5-bot · 2026-06-04T13:05:51Z

Continuous Release

CDN link

https://raw.esm.sh/pr/p5@68c0f65/lib/p5.min.js

Published Packages

https://pkg.pr.new/p5@68c0f65

Commit hash: 8b12dcd

Previous deployments

This is an automated message.

Add shader examples for math functions

287d827

Add comprehensive shader examples for abs, ceil, exp, floor, lerp, log, map, max, min, pow, round, sqrt, and fract functions in p5.strands, demonstrating their usage in WebGL shaders with practical color effects.

SOUMITRO-SAHA mentioned this pull request May 16, 2026

Add p5.strands examples on regular p5 functions that can be used in a strands context #8777

Open

17 tasks

nbogie reviewed May 16, 2026

View reviewed changes

SOUMITRO-SAHA and others added 2 commits May 18, 2026 15:44

- Use named colors in example comments

a9f5346

Merge branch 'dev-2.0' into docs-8777-strands-calc-examples

7c46fa4

perminder-17 requested changes May 20, 2026

View reviewed changes

perminder-17 mentioned this pull request May 20, 2026

Add shader examples to trigonometric functions #8801

Merged

3 tasks

fix: convert strands examples to @example format for proper rendering

fa71a4a

Convert all 13 inline shader examples from markdown code fence (```js example) to JSDoc @example tags so they render correctly on the p5.js website.

Refactor JSDoc and improve shader examples

30f6c0e

SOUMITRO-SAHA force-pushed the docs-8777-strands-calc-examples branch from 8d1dc3e to 30f6c0e Compare May 21, 2026 11:30

SOUMITRO-SAHA mentioned this pull request May 21, 2026

Add shader examples to noise random and millis functions #8803

Merged

3 tasks

perminder-17 self-requested a review May 30, 2026 11:01

perminder-17 reviewed May 31, 2026

View reviewed changes

SOUMITRO-SAHA and others added 3 commits June 2, 2026 18:20

Update documentation examples, Adjust math logic in

34a3d75

time-based animation examples for clarity and range.

Merge branch 'dev-2.0' into docs-8777-strands-calc-examples

0cbb898

- Update lerp() documentation for p5.strands

8b12dcd

	* let value = min(pow(t, 2) * 0.001, 1);
	* let value = pow(t, 2);

Uh oh!

Conversation

SOUMITRO-SAHA commented May 16, 2026

Changes:

PR Checklist

Uh oh!

nbogie left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

perminder-17 left a comment

Choose a reason for hiding this comment

Here's the step

Uh oh!

SOUMITRO-SAHA commented May 20, 2026

Uh oh!

SOUMITRO-SAHA commented May 20, 2026

Uh oh!

davepagurek commented May 20, 2026

Uh oh!

SOUMITRO-SAHA commented May 21, 2026

Uh oh!

perminder-17 commented May 21, 2026

Uh oh!

SOUMITRO-SAHA commented May 30, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

perminder-17 left a comment

Choose a reason for hiding this comment

Uh oh!

p5-bot Bot commented Jun 4, 2026

Continuous Release

CDN link

Published Packages

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants