docs(strands): fix strand examples per review — getPixelInputs, inputs.color pattern, complete sketches, describe()

Author: Yashisinghal285

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 <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.
@@ -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 <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.
@@ -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);