Skip to content

Add p5.strands documentation and examples for color functions #8915

@LalitNarayanYadav

Description

@LalitNarayanYadav

Increasing access

Beginners using p5.strands need to know that color functions behave differently inside shader callbacks. Without strands-specific examples in the docs, it's not obvious how to use these functions in a modify() block.

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

Feature enhancement details

Now that color(), lerpColor(), red(), green(), blue(), alpha(), hue(), saturation(), brightness(), and lightness() work inside p5.strands shader callbacks (added in #8822), the documentation should include strands-specific examples showing how to use these functions in a modify() callback.

Key things to document:

  • In strands, color() returns a vec4 instead of a p5.Color object
  • All color values are represented as normalized RGBA values in the 0–1 range
  • colorMode() has no effect inside strands callbacks
  • Common usage patterns for lerpColor(), color channel accessors, and HSL/HSB accessors in shader code

Potential follow-up documentation work:

  • Update existing p5.strands examples that currently use raw color vectors where the new color() API would improve readability
  • Add example sketches demonstrating hex strings, CSS color names, and rgb()/rgba() inputs inside strands
  • Review existing strands examples and helper functions for opportunities to showcase the newly added color APIs

Related PR: #8822

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions