Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Yashisinghal285 wants to merge 2 commits into
base: main
Choose a base branch
from
+260 −0
Open

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebabea1
docs(strands): add strand-specific examples for color, green, blue, a…
Yashisinghal285 Jul 5, 2026
9f2abbf
docs(strands): fix strand examples per review — getPixelInputs, input…
Yashisinghal285 Jul 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
260 changes: 260 additions & 0 deletions src/color/creating_reading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,30 @@ function creatingReading(p5, fn){
*
* describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
* }
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* // Same syntax as regular sketch code...
* let c = color(255, 0, 0);
* // ...but c is a vec4 with normalized RGBA (0-1), not a p5.Color.
* inputs.color = c;
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A red sphere on a gray background.');
* }
*/
/**
* @method color
Expand Down Expand Up @@ -396,12 +420,38 @@ function creatingReading(p5, fn){
* to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
* returns the red value in the given range.
*
* In p5.strands shader callbacks, `red()` operates on `vec4` values and
* returns the red channel as a normalized value in the 0–1 range.
* `colorMode()` has no effect inside shader callbacks.
*
* @method red
* @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
* color components, or CSS color string.
* @return {Number} the red value.
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let r = red(inputs.color);
* inputs.color = [r, 0, 0, 1];
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A sphere colored using only its red channel.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down Expand Up @@ -517,12 +567,38 @@ function creatingReading(p5, fn){
* to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
* returns the green value in the given range.
*
* In p5.strands shader callbacks, `green()` operates on `vec4` values and
* returns the green channel as a normalized value in the 0–1 range.
* `colorMode()` has no effect inside shader callbacks.
*
* @method green
* @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
* color components, or CSS color string.
* @return {Number} the green value.
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let g = green(inputs.color);
* inputs.color = [0, g, 0, 1];
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A sphere colored using only its green channel.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down Expand Up @@ -638,12 +714,38 @@ function creatingReading(p5, fn){
* to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
* returns the blue value in the given range.
*
* In p5.strands shader callbacks, `blue()` operates on `vec4` values and
* returns the blue channel as a normalized value in the 0–1 range.
* `colorMode()` has no effect inside shader callbacks.
*
* @method blue
* @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
* color components, or CSS color string.
* @return {Number} the blue value.
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let b = blue(inputs.color);
* inputs.color = [0, 0, b, 1];
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A sphere colored using only its blue channel.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down Expand Up @@ -755,12 +857,38 @@ function creatingReading(p5, fn){
* <a href="#/p5.Color">p5.Color</a> object, an array of color components, or
* a CSS color string.
*
* In p5.strands shader callbacks, `alpha()` operates on `vec4` values and
* returns the alpha channel as a normalized value in the 0–1 range.
* `colorMode()` has no effect inside shader callbacks.
*
* @method alpha
* @param {p5.Color|Number[]|String} color <a href="#/p5.Color">p5.Color</a> object, array of
* color components, or CSS color string.
* @return {Number} the alpha value.
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let a = alpha(inputs.color);
* inputs.color = [inputs.color.rgb, a * 0.5];
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A semi-transparent sphere.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down Expand Up @@ -850,12 +978,38 @@ function creatingReading(p5, fn){
* <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it returns the hue
* value in the given mode.
*
* In p5.strands shader callbacks, `hue()` operates on `vec4` values and
* returns the hue as a normalized value in the 0–1 range.
* `colorMode()` has no effect inside shader callbacks.
*
* @method hue
* @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
* color components, or CSS color string.
* @return {Number} the hue value.
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let h = hue(inputs.color);
* inputs.color = [h, h, h, 1];
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A sphere shaded in grayscale based on hue.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down Expand Up @@ -976,12 +1130,38 @@ function creatingReading(p5, fn){
* <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it returns the
* saturation value in the given mode.
*
* In p5.strands shader callbacks, `saturation()` operates on `vec4` values
* and returns the saturation as a normalized value in the 0–1 range.
* `colorMode()` has no effect inside shader callbacks.
*
* @method saturation
* @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
* color components, or CSS color string.
* @return {Number} the saturation value
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let s = saturation(inputs.color);
* inputs.color = [s, s, s, 1];
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A sphere shaded in grayscale based on saturation.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down Expand Up @@ -1134,12 +1314,38 @@ function creatingReading(p5, fn){
* to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB, it
* returns the brightness value in the given range.
*
* In p5.strands shader callbacks, `brightness()` operates on `vec4` values
* and returns the brightness as a normalized value in the 0–1 range.
* `colorMode()` has no effect inside shader callbacks.
*
* @method brightness
* @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
* color components, or CSS color string.
* @return {Number} the brightness value.
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let b = brightness(inputs.color);
* inputs.color = [b, b, b, 1];
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A sphere shaded in grayscale based on brightness.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down Expand Up @@ -1264,12 +1470,38 @@ function creatingReading(p5, fn){
* to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSL, it
* returns the lightness value in the given range.
*
* In p5.strands shader callbacks, `lightness()` operates on `vec4` values
* and returns the lightness as a normalized value in the 0–1 range.
* `colorMode()` has no effect inside shader callbacks.
*
* @method lightness
* @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
* color components, or CSS color string.
* @return {Number} the lightness value.
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let l = lightness(inputs.color);
* inputs.color = [l, l, l, 1];
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A sphere shaded in grayscale based on lightness.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down Expand Up @@ -1396,13 +1628,41 @@ function creatingReading(p5, fn){
* The way that colors are interpolated depends on the current
* <a href="#/p5/colorMode">colorMode()</a>.
*
* In p5.strands shader callbacks, `lerpColor()` interpolates between
* `vec4` colors and returns a normalized `vec4` with RGBA components in
* the 0–1 range. `colorMode()` has no effect inside shader callbacks.
*
* @method lerpColor
* @param {p5.Color} c1 interpolate from this color.
* @param {p5.Color} c2 interpolate to this color.
* @param {Number} amt number between 0 and 1.
* @return {p5.Color} interpolated color.
*
* @example
* let myShader;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* myShader = baseMaterialShader().modify(() => {
* getPixelInputs((inputs) => {
* let c1 = color('red');
* let c2 = color('blue');
* let mixed = lerpColor(c1, c2, 0.5);
* inputs.color = mixed;
* return inputs;
* });
* });
* }
*
* function draw() {
* shader(myShader);
* noStroke();
* sphere(40);
*
* describe('A purple sphere, a blend of red and blue.');
* }
*
* @example
* function setup() {
* createCanvas(100, 100);
*
Expand Down