processing/p5.js★ 23,941

Add shader examples for math functions

Mergedopened · merged · #8802

About processing/p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org

  • art
  • creative-coding
  • design
  • education
  • graphics
  • html
  • javascript
  • learning

The change

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: <!-- If applicable, add screenshots depicting the changes. --> PR Checklist <!-- To check any option, replace the "○" with a "✓". Be sure to check out how it looks in the Preview tab! Feel free to remove any portion of the template that is not relevant for your issue. --> • ✓ npm run lint passes • ✓ [Inline reference] is included / updated • ○ [Unit tests] are included / updated [Inline reference]: https://p5js.org/contribute/contributing_to_the_p5js_reference/ [Unit tests]: https://github.com/processing/p5.js/tree/main/contributor_docs#unit-tests

Referenced issues