feat(examples): add p5.strands translations for shader examples

- rename original GLSL examples to preserve them alongside the new versions
- add p5.strands translations for Filter Shader, Adjusting Positions With A Shader, and Shader As A Texture
- remix example descriptions to reflect the new p5.strands versions

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

Author: MissTipo

src/content/examples/en/11_3D/04_Filter_Shader/description.mdx

@@ -1,7 +1,7 @@
 ---
 featuredImage: "../../../images/featured/11_3D-04_Filter_Shader-thumbnail.png"
 featuredImageAlt: A screenshot of a video of a city crosswalk, with offset colors.
-title: Filter Shader
+title: Filter Shader (GLSL)
 oneLineDescription: Manipulate imagery with a shader.
 
 remix:
@@ -15,4 +15,4 @@ remix:
 ---
 
 Filter shaders are a way to apply an effect to anything that
-is on the canvas. In this example, the effect is applied to a video.
+is on the canvas. In this example, the effect is applied to a video.

src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx

@@ -1,7 +1,7 @@
 ---
 featuredImage: "../../../images/featured/11_3D-05_Adjusting_Positions_With_A_Shader-thumbnail.png"
 featuredImageAlt: A red-to-blue waving ribbon on a white background.
-title: Adjusting Positions with a Shader
+title: Adjusting Positions with a Shader (GLSL)
 oneLineDescription: Use a shader to adjust shape vertices.
 
 remix:
@@ -15,4 +15,4 @@ remix:
 ---
 
 Shaders can adjust the positions of the vertices of shapes.
-This lets you distort and animate 3D models.
+This lets you distort and animate 3D models.

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

@@ -0,0 +1,52 @@
+let video;
+let displaceColors;
+
+function setup() {
+  createCanvas(700, 400, WEBGL);
+  video = createVideo(
+    'https://upload.wikimedia.org/wikipedia/commons/d/d2/DiagonalCrosswalkYongeDundas.webm'
+  );
+  video.volume(0);
+  video.hide();
+  video.loop();
+
+  displaceColors = baseFilterShader().modify(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];
+  });
+}
+
+function draw() {
+  background(255);
+  push();
+  imageMode(CENTER);
+  image(
+    video,
+    0, 0, width, height,
+    0, 0, video.width, video.height,
+    COVER
+  );
+  pop();
+
+  filter(displaceColors);
+}

src/content/examples/en/11_3D/07_Filter_Shader_p5strands/description.mdx

@@ -0,0 +1,29 @@
+---
+featuredImage: "../../../images/featured/11_3D-04_Filter_Shader-thumbnail.png"
+featuredImageAlt: A screenshot of a video of a city crosswalk, with offset colors.
+title: Filter Shader (p5.strands)
+oneLineDescription: Manipulate imagery with a shader, written in p5.strands.
+
+remix:
+  - description: Created by
+    attribution:
+      - name: Dave Pagurek
+        URL: https://www.davepagurek.com/
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/11_3D/04_Filter_Shader
+
+  - description: Remixed by
+    attribution:
+      - name: Dorine Tipo
+        URL: https://dorinetipo.vercel.app/
+    code:
+      - label: 2026 p5.strands translation
+        URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/11_3D/07_Filter_Shader_p5strands
+
+  - collectivelyAttributedSince: 2024
+---
+
+This is a p5.strands version of the Filter Shader example. Filter shaders apply
+an effect to anything that is on the canvas. In this example, the effect is applied to
+a video.

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

@@ -0,0 +1,46 @@
+let wiggleShader;
+let ribbon;
+
+function setup() {
+  createCanvas(700, 400, WEBGL);
+
+  wiggleShader = baseColorShader().modify(wiggleCallback);
+
+  let startColor = color('#F55');
+  let endColor = color('#55F');
+  ribbon = buildGeometry(() => {
+    noStroke();
+    beginShape(QUAD_STRIP);
+    let numPoints = 50;
+    for (let currentPoint = 0; currentPoint < numPoints; currentPoint++) {
+      let x = map(currentPoint, 0, numPoints - 1, -width / 3, width / 3);
+      let y = map(currentPoint, 0, numPoints - 1, -height / 3, height / 3);
+      fill(lerpColor(startColor, endColor, currentPoint / (numPoints - 1)));
+      for (let z of [-50, 50]) {
+        vertex(x, y, z);
+      }
+    }
+    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;
+  });
+}
+
+function draw() {
+  background(255);
+  noStroke();
+  rotateX(PI * 0.1);
+
+  shader(wiggleShader);
+
+  model(ribbon);
+}

src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx

@@ -0,0 +1,29 @@
+---
+featuredImage: "../../../images/featured/11_3D-05_Adjusting_Positions_With_A_Shader-thumbnail.png"
+featuredImageAlt: A red-to-blue waving ribbon on a white background.
+title: Adjusting Positions with a Shader (p5.strands)
+oneLineDescription: Use a shader to adjust shape vertices, written in p5.strands.
+
+remix:
+  - description: Created by
+    attribution:
+      - name: Dave Pagurek
+        URL: https://www.davepagurek.com/
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/11_3D/05_Adjusting_Positions_With_A_Shader
+
+  - description: Remixed by
+    attribution:
+      - name: Dorine Tipo
+        URL: https://dorinetipo.vercel.app/
+    code:
+      - label: 2026 p5.strands translation
+        URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands
+
+  - collectivelyAttributedSince: 2024
+---
+
+This is a p5.strands version of the Adjusting Positions with a Shader example.
+Shaders can adjust the positions of the vertices of shapes.
+This lets  you distort and animate 3D models.

src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx

@@ -1,7 +1,7 @@
 ---
 featuredImage: "../../../images/featured/12_Advanced_Canvas_Rendering-02_Shader_As_A_Texture-thumbnail.png"
 featuredImageAlt: Two spheres broken up into a square grid with a gradient in each grid.
-title: Shader as a Texture
+title: Shader as a Texture(GLSL)
 oneLineDescription: Generate a texture for a 3D shape using a shader.
 
 remix:
@@ -19,4 +19,4 @@ remix:
 Shaders can be applied to 2D/3D shapes as textures.
 
 To learn more about using shaders in p5.js:
-<a href="https://itp-xstory.github.io/p5js-shaders/">p5.js Shaders</a>
+<a href="https://itp-xstory.github.io/p5js-shaders/">p5.js Shaders</a>

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

@@ -0,0 +1,81 @@
+let theShader;
+
+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);
+
+  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) {
+    const c = cos(angle);
+    const s = sin(angle);
+    const x = st.x - 0.5;
+    const y = st.y - 0.5;
+    return [c * x - s * y + 0.5, s * x + c * y + 0.5];
+  }
+
+  function tile(st, zoom) {
+    return fract(st * zoom);
+  }
+
+  function concentricCircles(st, radius, res, scale) {
+    return floor(distance(st, radius) * res) / scale;
+  }
+
+  getCameraInputs((inputs) => {
+    position = inputs.position;
+    return inputs;
+  });
+
+  getPixelInputs((inputs) => {
+    const st = inputs.texCoord;
+
+    // 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);
+
+    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 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);
+
+    inputs.color = [r, g, b, 1.0];
+    return inputs;
+  });
+}
+
+function draw() {
+  background(255);
+
+  shader(theShader);
+
+  translate(-150, 0, 0);
+  push();
+  rotateX(-mouseY);
+  rotateY(-mouseX);
+  sphere(125);
+  pop();
+
+  ellipse(260, 0, 200, 200, 100);
+}

src/content/examples/en/12_Advanced_Canvas_Rendering/03_Shader_As_A_Texture_p5strands/description.mdx

@@ -0,0 +1,39 @@
+---
+featuredImage: "../../../images/featured/12_Advanced_Canvas_Rendering-02_Shader_As_A_Texture-thumbnail.png"
+featuredImageAlt: Two spheres broken up into a square grid with a gradient in each grid.
+title: Shader as a Texture (p5.strands)
+oneLineDescription: Generate a texture for a 3D shape using a shader, written in p5.strands.
+
+remix:
+  - description: Based on
+    attribution:
+      - name: p5.js Contributors
+        URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/09_shader_as_a_texture.js
+    code:
+      - label: pre-2023 code
+        URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/09_shader_as_a_texture.js
+
+  - description: Revised by
+    attribution:
+      - name: Caleb Foss
+        URL: https://github.com/calebfoss
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture
+
+  - description: Remixed by
+    attribution:
+      - name: Dorine Tipo
+        URL: https://dorinetipo.vercel.app/
+    code:
+      - label: 2026 p5.strands translation
+        URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/12_Advanced_Canvas_Rendering/03_Shader_As_A_Texture_p5strands
+
+  - collectivelyAttributedSince: 2024
+---
+
+This is a p5.strands version of the Shader as a Texture example.
+Shaders can be applied to 2D/3D shapes as textures.
+
+To learn more about using shaders in p5.js:
+<a href="https://itp-xstory.github.io/p5js-shaders/">p5.js Shaders</a>