From ebabea1db79802723905d54c1820daae64eb72a2 Mon Sep 17 00:00:00 2001 From: Yashi Singhal285 Date: Sun, 5 Jul 2026 16:21:07 +0530 Subject: [PATCH 1/2] docs(strands): add strand-specific examples for color, green, blue, alpha, hue, saturation, brightness, lightness --- src/color/creating_reading.js | 137 ++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 340887294d..4196f77ea1 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -341,6 +341,20 @@ function creatingReading(p5, fn){ * * describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.'); * } + * + * @example + * // Strands: color() inside a modify() callback returns a vec4 + * // with normalized RGBA (0-1), instead of a p5.Color object. + * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * // Same syntax as regular sketch code... + * let c = color(255, 0, 0); + * // ...but c is a vec4 like (1.0, 0.0, 0.0, 1.0), not a p5.Color. + * return c; + * }); + * }); + * } */ /** * @method color @@ -396,6 +410,10 @@ function creatingReading(p5, fn){ * to 255. If the colorMode() 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 p5.Color object, array of * color components, or CSS color string. @@ -403,6 +421,16 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * let r = red(inputs.color); + * return vec4(r, 0.0, 0.0, 1.0); + * }); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(200); @@ -517,6 +545,10 @@ function creatingReading(p5, fn){ * to 255. If the colorMode() 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 p5.Color object, array of * color components, or CSS color string. @@ -524,6 +556,16 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * let g = green(inputs.color); + * return vec4(0.0, g, 0.0, 1.0); + * }); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(200); @@ -638,6 +680,10 @@ function creatingReading(p5, fn){ * to 255. If the colorMode() 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 p5.Color object, array of * color components, or CSS color string. @@ -645,6 +691,16 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * let b = blue(inputs.color); + * return vec4(0.0, 0.0, b, 1.0); + * }); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(200); @@ -755,6 +811,10 @@ function creatingReading(p5, fn){ * p5.Color 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 p5.Color object, array of * color components, or CSS color string. @@ -762,6 +822,16 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * let a = alpha(inputs.color); + * return vec4(inputs.color.rgb, a * 0.5); + * }); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(200); @@ -850,6 +920,10 @@ function creatingReading(p5, fn){ * colorMode() 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 p5.Color object, array of * color components, or CSS color string. @@ -857,6 +931,16 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * let h = hue(inputs.color); + * return vec4(h, h, h, 1.0); + * }); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(200); @@ -976,6 +1060,10 @@ function creatingReading(p5, fn){ * colorMode() 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 p5.Color object, array of * color components, or CSS color string. @@ -983,6 +1071,16 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * let s = saturation(inputs.color); + * return vec4(s, s, s, 1.0); + * }); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(50); @@ -1133,6 +1231,9 @@ function creatingReading(p5, fn){ * By default, `brightness()` returns a color's HSB brightness in the range 0 * to 100. If the colorMode() 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 p5.Color object, array of @@ -1141,6 +1242,16 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * let b = brightness(inputs.color); + * return vec4(b, b, b, 1.0); + * }); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(200); @@ -1263,6 +1374,9 @@ function creatingReading(p5, fn){ * By default, `lightness()` returns a color's HSL lightness in the range 0 * to 100. If the colorMode() 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 p5.Color object, array of @@ -1271,6 +1385,16 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * p5.getPixelInputs((inputs) => { + * let l = lightness(inputs.color); + * return vec4(l, l, l, 1.0); + * }); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(50); @@ -1396,6 +1520,10 @@ function creatingReading(p5, fn){ * The way that colors are interpolated depends on the current * colorMode(). * + * 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. @@ -1404,6 +1532,15 @@ function creatingReading(p5, fn){ * * @example * function setup() { + * let shader = baseMaterialShader().modify(() => { + * let c1 = color('red'); + * let c2 = color('blue'); + * let mixed = lerpColor(c1, c2, 0.5); + * }); + * } + * + * @example + * function setup() { * createCanvas(100, 100); * * background(200); From 9f2abbf0f4a1065139f1d94a61decd346e322cc7 Mon Sep 17 00:00:00 2001 From: Yashi Singhal285 Date: Mon, 6 Jul 2026 00:17:44 +0530 Subject: [PATCH 2/2] =?UTF-8?q?docs(strands):=20fix=20strand=20examples=20?= =?UTF-8?q?per=20review=20=E2=80=94=20getPixelInputs,=20inputs.color=20pat?= =?UTF-8?q?tern,=20complete=20sketches,=20describe()?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/color/creating_reading.js | 191 ++++++++++++++++++++++++++++------ 1 file changed, 157 insertions(+), 34 deletions(-) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 4196f77ea1..a4a2b33af5 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -343,18 +343,28 @@ function creatingReading(p5, fn){ * } * * @example - * // Strands: color() inside a modify() callback returns a vec4 - * // with normalized RGBA (0-1), instead of a p5.Color object. + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * 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 like (1.0, 0.0, 0.0, 1.0), not a p5.Color. - * return c; + * // ...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 @@ -420,15 +430,27 @@ function creatingReading(p5, fn){ * @return {Number} the red value. * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * createCanvas(100, 100, WEBGL); + * + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs((inputs) => { * let r = red(inputs.color); - * return vec4(r, 0.0, 0.0, 1.0); + * 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); @@ -555,15 +577,27 @@ function creatingReading(p5, fn){ * @return {Number} the green value. * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * createCanvas(100, 100, WEBGL); + * + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs((inputs) => { * let g = green(inputs.color); - * return vec4(0.0, g, 0.0, 1.0); + * 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); @@ -690,15 +724,27 @@ function creatingReading(p5, fn){ * @return {Number} the blue value. * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * createCanvas(100, 100, WEBGL); + * + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs((inputs) => { * let b = blue(inputs.color); - * return vec4(0.0, 0.0, b, 1.0); + * 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); @@ -821,15 +867,27 @@ function creatingReading(p5, fn){ * @return {Number} the alpha value. * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * createCanvas(100, 100, WEBGL); + * + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs((inputs) => { * let a = alpha(inputs.color); - * return vec4(inputs.color.rgb, a * 0.5); + * 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); @@ -930,15 +988,27 @@ function creatingReading(p5, fn){ * @return {Number} the hue value. * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * createCanvas(100, 100, WEBGL); + * + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs((inputs) => { * let h = hue(inputs.color); - * return vec4(h, h, h, 1.0); + * 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); @@ -1070,15 +1140,27 @@ function creatingReading(p5, fn){ * @return {Number} the saturation value * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * createCanvas(100, 100, WEBGL); + * + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs((inputs) => { * let s = saturation(inputs.color); - * return vec4(s, s, s, 1.0); + * 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); @@ -1231,6 +1313,7 @@ function creatingReading(p5, fn){ * By default, `brightness()` returns a color's HSB brightness in the range 0 * to 100. If the colorMode() 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. @@ -1241,15 +1324,27 @@ function creatingReading(p5, fn){ * @return {Number} the brightness value. * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * createCanvas(100, 100, WEBGL); + * + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs((inputs) => { * let b = brightness(inputs.color); - * return vec4(b, b, b, 1.0); + * 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); @@ -1374,6 +1469,7 @@ function creatingReading(p5, fn){ * By default, `lightness()` returns a color's HSL lightness in the range 0 * to 100. If the colorMode() 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. @@ -1384,15 +1480,27 @@ function creatingReading(p5, fn){ * @return {Number} the lightness value. * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * p5.getPixelInputs((inputs) => { + * createCanvas(100, 100, WEBGL); + * + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs((inputs) => { * let l = lightness(inputs.color); - * return vec4(l, l, l, 1.0); + * 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); @@ -1531,14 +1639,29 @@ function creatingReading(p5, fn){ * @return {p5.Color} interpolated color. * * @example + * let myShader; * function setup() { - * let shader = baseMaterialShader().modify(() => { - * let c1 = color('red'); - * let c2 = color('blue'); - * let mixed = lerpColor(c1, c2, 0.5); + * 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);