refactor(examples): update p5.strands shaders to flat hook API and direct globals

- Switch filter shader to buildFilterShader + filterColor.begin/set/end
- Switch wiggle shader to buildColorShader + objectInputs.begin/end; drop time uniform
- Switch shader-as-texture to buildMaterialShader + cameraInputs/pixelInputs begin/end
- Remove unnecessary uniforms for millis/width/height/mouse and simplify numeric literals

Signed-off-by: MissTipo <dorine.a.tipo@gmail.com>

Author: MissTipo

src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js

@@ -9,44 +9,31 @@ function setup() {
   video.volume(0);
   video.hide();
   video.loop();
-
-  displaceColors = baseFilterShader().modify(displaceColorsCallback);
-
+  displaceColors = buildFilterShader(displaceColorsCallback);
   describe(
     'A video of a city crosswalk, with colors getting more offset the further from the center they are'
   );
 }
 
 function displaceColorsCallback() {
-
-  // Note: arithmetic on coord operates componentwise (vec2), as in GLSL.
   function zoom(coord, amount) {
     return (coord - 0.5) / amount + 0.5;
   }
-
-  getColor((inputs, canvasContent) => {
-    const uv = inputs.texCoord;
-
-    const r = getTexture(canvasContent, uv).r;
-    const g = getTexture(canvasContent, zoom(uv, 1.05)).g;
-    const b = getTexture(canvasContent, zoom(uv, 1.1)).b;
-    const a = getTexture(canvasContent, uv).a;
-
-    return [r, g, b, a];
-  });
+  filterColor.begin();
+  const uv = filterColor.texCoord;
+  const r = getTexture(filterColor.canvasContent, uv).r;
+  const g = getTexture(filterColor.canvasContent, zoom(uv, 1.05)).g;
+  const b = getTexture(filterColor.canvasContent, zoom(uv, 1.1)).b;
+  const a = getTexture(filterColor.canvasContent, uv).a;
+  filterColor.set([r, g, b, a]);
+  filterColor.end();
 }
 
 function draw() {
   background(255);
   push();
   imageMode(CENTER);
-  image(
-    video,
-    0, 0, width, height,
-    0, 0, video.width, video.height,
-    COVER
-  );
+  image(video, 0, 0, width, height, 0, 0, video.width, video.height, COVER);
   pop();
-
   filter(displaceColors);
 }

src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/code.js

@@ -3,8 +3,7 @@ let ribbon;
 
 function setup() {
   createCanvas(700, 400, WEBGL);
-
-  wiggleShader = baseColorShader().modify(wiggleCallback);
+  wiggleShader = buildColorShader(wiggleCallback);
 
   let startColor = color('#F55');
   let endColor = color('#55F');
@@ -22,25 +21,19 @@ function setup() {
     }
     endShape();
   });
-
   describe('A red-to-blue ribbon that waves over time');
 }
 
 function wiggleCallback() {
-  const time = uniformFloat(() => millis());
-
-  getObjectInputs((inputs) => {
-    inputs.position.y += 20 * sin(time * 0.01 + inputs.position.y * 0.1);
-    return inputs;
-  });
+  objectInputs.begin();
+  objectInputs.position.y += 20 * sin(millis() * 0.01 + objectInputs.position.y * 0.1);
+  objectInputs.end();
 }
 
 function draw() {
   background(255);
   noStroke();
   rotateX(PI * 0.1);
-
   shader(wiggleShader);
-
   model(ribbon);
 }

src/content/examples/en/12_Advanced_Canvas_Rendering/03_Shader_As_A_Texture_p5strands/code.js

@@ -4,21 +4,11 @@ function setup() {
   createCanvas(710, 400, WEBGL);
   noStroke();
   angleMode(DEGREES);
-
-  // baseMaterialShader is used because it is the only base shader whose
-  // getPixelInputs hook exposes inputs.texCoord in JS callback form.
-  // baseColorShader only exposes getFinalColor, which does not include texCoord.
-  theShader = baseMaterialShader().modify(shaderAsTextureCallback);
-
+  theShader = buildMaterialShader(shaderAsTextureCallback);
   describe('Sphere broken up into a square grid with a gradient in each grid.');
 }
 
 function shaderAsTextureCallback() {
-  const time = uniformFloat(() => millis() / 1000.0);
-  const size = uniformVec2(() => [width, height]);
-  // Y is flipped to match gl_FragCoord's bottom-up axis.
-  const mouse = uniformVec2(() => [mouseX, height - mouseY]);
-
   let position = sharedVec3();
 
   function rotate2D(st, angle) {
@@ -37,45 +27,37 @@ function shaderAsTextureCallback() {
     return floor(distance(st, radius) * res) / scale;
   }
 
-  getCameraInputs((inputs) => {
-    position = inputs.position;
-    return inputs;
-  });
-
-  getPixelInputs((inputs) => {
-    const st = inputs.texCoord;
+  cameraInputs.begin();
+  position = cameraInputs.position;
+  cameraInputs.end();
 
-    // Shift camera-space position (center origin) to bottom-left origin,
-    // producing the equivalent of gl_FragCoord.xy
-    const fragCoord = position.xy + size * 0.5;
-    const safeMouse = [max(mouse.x, 1.0), max(mouse.y, 1.0)];
-    const mst = fragCoord / safeMouse;
-    const mdist = distance([1.0, 1.0], mst);
+  pixelInputs.begin();
+  const fragCoord = position.xy + [width, height] * 0.5;
+  const safeMouse = [max(mouseX, 1), max(height - mouseY, 1)];
+  const mst = fragCoord / safeMouse;
+  const mdist = distance([1, 1], mst);
 
-    const distToCenter = distance(st, [sin(time / 10.0), cos(time / 10.0)]);
-    let tiled = tile(st, 10.0);
-    tiled = rotate2D(tiled, distToCenter / (mdist / 5.0) * PI * 2.0);
+  const st = pixelInputs.texCoord;
+  const distToCenter = distance(st, [sin(millis() / 10000), cos(millis() / 10000)]);
+  let tiled = tile(st, 10);
+  tiled = rotate2D(tiled, distToCenter / (mdist / 5) * PI * 2);
 
-    const r = concentricCircles(tiled, [0.0, 0.0],  5.0,  5.0);
-    const g = concentricCircles(tiled, [0.0, 0.0], 10.0, 10.0);
-    const b = concentricCircles(tiled, [0.0, 0.0], 20.0, 10.0);
+  const r = concentricCircles(tiled, [0, 0],  5,  5);
+  const g = concentricCircles(tiled, [0, 0], 10, 10);
+  const b = concentricCircles(tiled, [0, 0], 20, 10);
 
-    inputs.color = [r, g, b, 1.0];
-    return inputs;
-  });
+  pixelInputs.color = [r, g, b, 1];
+  pixelInputs.end();
 }
 
 function draw() {
   background(255);
-
   shader(theShader);
-
   translate(-150, 0, 0);
   push();
   rotateX(-mouseY);
   rotateY(-mouseX);
   sphere(125);
   pop();
-
   ellipse(260, 0, 200, 200, 100);
 }