Skip to content

Add shader examples for math functions#8802

Open
SOUMITRO-SAHA wants to merge 2 commits into
processing:dev-2.0from
SOUMITRO-SAHA:docs-8777-strands-calc-examples
Open

Add shader examples for math functions#8802
SOUMITRO-SAHA wants to merge 2 commits into
processing:dev-2.0from
SOUMITRO-SAHA:docs-8777-strands-calc-examples

Conversation

@SOUMITRO-SAHA
Copy link
Copy Markdown

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

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.
Copy link
Copy Markdown
Contributor

@nbogie nbogie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good though i didn't test the examples.

Comment thread src/math/calculation.js Outdated
* 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));
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants