diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js
index d6e8025351..39f16db09d 100644
--- a/src/color/creating_reading.js
+++ b/src/color/creating_reading.js
@@ -132,22 +132,8 @@ function creatingReading(p5, fn){
* The version of `color()` with four parameters interprets them as RGBA, HSBA,
* or HSLA colors, depending on the current `colorMode()`. The last parameter
* sets the alpha (transparency) value.
- * In p5.strands shader callbacks, `color()` accepts the same input
- * formats but returns a `vec4` instead of a `p5.Color` object, with
- * RGBA components normalized to the 0–1 range. All colors in strands
- * are RGB-based; `colorMode()` has no effect inside shader callbacks.
- * Color utility functions such as `red()`, `green()`, `blue()`,
- * `alpha()`, `hue()`, `saturation()`, `brightness()`, and
- * `lightness()` also return values in the 0–1 range when used in
- * strands.
*
- * @method color
- * @param {Number} gray number specifying value between white and black.
- * @param {Number} [alpha] alpha value relative to current color range
- * (default is 0-255).
- * @return {p5.Color} resulting color.
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -163,8 +149,9 @@ function creatingReading(p5, fn){
*
* describe('A yellow square on a gray canvas.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -189,8 +176,9 @@ function creatingReading(p5, fn){
* 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
* );
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -206,8 +194,9 @@ function creatingReading(p5, fn){
*
* describe('A magenta square on a gray canvas.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -230,8 +219,9 @@ function creatingReading(p5, fn){
*
* describe('Two bright green rectangles on a gray canvas.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -267,8 +257,9 @@ function creatingReading(p5, fn){
*
* describe('Four blue squares in the corners of a gray canvas.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -291,8 +282,9 @@ function creatingReading(p5, fn){
*
* describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -315,8 +307,9 @@ function creatingReading(p5, fn){
*
* describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -341,6 +334,47 @@ function creatingReading(p5, fn){
*
* describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
* }
+ * ```
+ *
+ * p5.strands is an experimental mode for writing shader code with p5.js-like
+ * syntax instead of GLSL. In p5.strands shader callbacks, `color()` accepts
+ * the same input formats but returns a `vec4` instead of a `p5.Color`
+ * object, with RGBA components normalized to the 0–1 range. All colors in
+ * strands are RGB-based; `colorMode()` has no effect inside shader
+ * callbacks. Color utility functions such as `red()`, `green()`, `blue()`,
+ * `alpha()`, `hue()`, `saturation()`, `brightness()`, and `lightness()`
+ * also return values in the 0–1 range when used in strands.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * // 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.
+ * finalColor.set(c);
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A red sphere on a gray background.');
+ * }
+ * ```
+ *
+ * @method color
+ * @param {Number} gray number specifying value between white and black.
+ * @param {Number} [alpha] alpha value relative to current color range
+ * (default is 0-255).
+ * @return {p5.Color} resulting color.
*/
/**
* @method color
@@ -396,12 +430,7 @@ function creatingReading(p5, fn){
* to 255. If the colorMode() is set to RGB, it
* returns the red value in the given range.
*
- * @method red
- * @param {p5.Color|Number[]|String} color p5.Color object, array of
- * color components, or CSS color string.
- * @return {Number} the red value.
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -424,8 +453,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is red.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -448,8 +478,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is red.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -472,8 +503,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is red.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -499,6 +531,40 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is red.');
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c = color(200, 100, 50);
+ * let r = red(c);
+ * finalColor.set(vec4(r, 0, 0, 1.0));
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A sphere colored using only its red channel.');
+ * }
+ * ```
+ *
+ * @method red
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the red value.
*/
fn.red = function(c) {
// p5._validateParameters('red', arguments);
@@ -517,12 +583,7 @@ function creatingReading(p5, fn){
* to 255. If the colorMode() is set to RGB, it
* returns the green value in the given range.
*
- * @method green
- * @param {p5.Color|Number[]|String} color p5.Color object, array of
- * color components, or CSS color string.
- * @return {Number} the green value.
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -545,8 +606,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is dark green.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -569,8 +631,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is dark green.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -593,8 +656,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is dark green.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -620,6 +684,40 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is dark green.');
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c = color(50, 200, 100);
+ * let g = green(c);
+ * finalColor.set(vec4(0, g, 0, 1.0));
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A sphere colored using only its green channel.');
+ * }
+ * ```
+ *
+ * @method green
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the green value.
*/
fn.green = function(c) {
// p5._validateParameters('green', arguments);
@@ -638,12 +736,7 @@ function creatingReading(p5, fn){
* to 255. If the colorMode() is set to RGB, it
* returns the blue value in the given range.
*
- * @method blue
- * @param {p5.Color|Number[]|String} color p5.Color object, array of
- * color components, or CSS color string.
- * @return {Number} the blue value.
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -666,8 +759,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is royal blue.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -690,8 +784,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is royal blue.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -714,8 +809,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is royal blue.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -741,6 +837,40 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light purple and the right one is royal blue.');
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c = color(50, 100, 200);
+ * let b = blue(c);
+ * finalColor.set(vec4(0, 0, b, 1.0));
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A sphere colored using only its blue channel.');
+ * }
+ * ```
+ *
+ * @method blue
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the blue value.
*/
fn.blue = function(c) {
// p5._validateParameters('blue', arguments);
@@ -755,12 +885,7 @@ function creatingReading(p5, fn){
* p5.Color object, an array of color components, or
* a CSS color string.
*
- * @method alpha
- * @param {p5.Color|Number[]|String} color p5.Color object, array of
- * color components, or CSS color string.
- * @return {Number} the alpha value.
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -783,8 +908,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -807,8 +933,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -831,6 +958,40 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c = color(255, 0, 0, 128);
+ * let a = alpha(c);
+ * finalColor.set(vec4(1.0, 0, 0, a * 0.5));
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A semi-transparent sphere.');
+ * }
+ * ```
+ *
+ * @method alpha
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the alpha value.
*/
fn.alpha = function(c) {
// p5._validateParameters('alpha', arguments);
@@ -850,12 +1011,7 @@ function creatingReading(p5, fn){
* colorMode() is set to HSB or HSL, it returns the hue
* value in the given mode.
*
- * @method hue
- * @param {p5.Color|Number[]|String} color p5.Color object, array of
- * color components, or CSS color string.
- * @return {Number} the hue value.
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -883,8 +1039,9 @@ function creatingReading(p5, fn){
* 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
* );
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -912,8 +1069,9 @@ function creatingReading(p5, fn){
* 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
* );
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -941,6 +1099,40 @@ function creatingReading(p5, fn){
* 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
* );
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c = color(0, 255, 128);
+ * let h = hue(c);
+ * finalColor.set(vec4(h, h, h, 1.0));
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A sphere shaded in grayscale based on hue.');
+ * }
+ * ```
+ *
+ * @method hue
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the hue value.
*/
fn.hue = function(c) {
let colorMode = HSL;
@@ -976,12 +1168,7 @@ function creatingReading(p5, fn){
* colorMode() is set to HSB or HSL, it returns the
* saturation value in the given mode.
*
- * @method saturation
- * @param {p5.Color|Number[]|String} color p5.Color object, array of
- * color components, or CSS color string.
- * @return {Number} the saturation value
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1007,8 +1194,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1034,8 +1222,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is gray.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1061,8 +1250,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is gray.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1088,8 +1278,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is white.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1115,6 +1306,40 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is white.');
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c = color(255, 128, 128);
+ * let s = saturation(c);
+ * finalColor.set(vec4(s, s, s, 1.0));
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A sphere shaded in grayscale based on saturation.');
+ * }
+ * ```
+ *
+ * @method saturation
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the saturation value
*/
fn.saturation = function(c) {
const colorMode = (this._renderer.states.colorMode === HSB) ? HSB : HSL;
@@ -1134,12 +1359,7 @@ function creatingReading(p5, fn){
* to 100. If the colorMode() is set to HSB, it
* returns the brightness value in the given range.
*
- * @method brightness
- * @param {p5.Color|Number[]|String} color p5.Color object, array of
- * color components, or CSS color string.
- * @return {Number} the brightness value.
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1165,8 +1385,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is white.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1192,8 +1413,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is white.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1219,8 +1441,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is white.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1246,6 +1469,40 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is white.');
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c = color(0, 50, 100);
+ * let b = brightness(c);
+ * finalColor.set(vec4(b, b, b, 1.0));
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A sphere shaded in grayscale based on brightness.');
+ * }
+ * ```
+ *
+ * @method brightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the brightness value.
*/
fn.brightness = function(c) {
return this.color(c)._getBrightness(
@@ -1264,12 +1521,7 @@ function creatingReading(p5, fn){
* to 100. If the colorMode() is set to HSL, it
* returns the lightness value in the given range.
*
- * @method lightness
- * @param {p5.Color|Number[]|String} color p5.Color object, array of
- * color components, or CSS color string.
- * @return {Number} the lightness value.
- *
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1295,8 +1547,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is gray.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1322,8 +1575,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is gray.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1349,8 +1603,9 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is gray.');
* }
+ * ```
*
- * @example
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1376,6 +1631,40 @@ function creatingReading(p5, fn){
*
* describe('Two rectangles. The left one is salmon pink and the right one is gray.');
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c = color(0, 100, 75);
+ * let l = lightness(c);
+ * finalColor.set(vec4(l, l, l, 1.0));
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A sphere shaded in grayscale based on lightness.');
+ * }
+ * ```
+ *
+ * @method lightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the lightness value.
*/
fn.lightness = function(c) {
return this.color(c)._getLightness(
@@ -1396,13 +1685,7 @@ function creatingReading(p5, fn){
* The way that colors are interpolated depends on the current
* colorMode().
*
- * @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
+ * ```js example
* function setup() {
* createCanvas(100, 100);
*
@@ -1437,6 +1720,42 @@ function creatingReading(p5, fn){
* 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
* );
* }
+ * ```
+ *
+ * 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.
+ *
+ * ```js example
+ * let myShader;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myShader = buildMaterialShader(myShaderBuilder);
+ * }
+ *
+ * function myShaderBuilder() {
+ * finalColor.begin();
+ * let c1 = color('red');
+ * let c2 = color('blue');
+ * let mixed = lerpColor(c1, c2, 0.5);
+ * finalColor.set(mixed);
+ * finalColor.end();
+ * }
+ *
+ * function draw() {
+ * shader(myShader);
+ * noStroke();
+ * sphere(40);
+ *
+ * describe('A purple sphere, a blend of red and blue.');
+ * }
+ * ```
+ *
+ * @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.
*/
fn.lerpColor = function(c1, c2, amt) {
// p5._validateParameters('lerpColor', arguments);
@@ -1499,4 +1818,4 @@ export default creatingReading;
if(typeof p5 !== 'undefined'){
creatingReading(p5, p5.prototype);
-}
+}
\ No newline at end of file