Add p5.strands translations for shader examples and rename original GLSL examples

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,39 @@
+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 = buildFilterShader(displaceColorsCallback);
+  describe(
+    'A video of a city crosswalk, with colors getting more offset the further from the center they are'
+  );
+}
+
+function displaceColorsCallback() {
+  function zoom(coord, amount) {
+    return (coord - 0.5) / amount + 0.5;
+  }
+  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);
+  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,39 @@
+let wiggleShader;
+let ribbon;
+
+function setup() {
+  createCanvas(700, 400, WEBGL);
+  wiggleShader = buildColorShader(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() {
+  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/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,63 @@
+let theShader;
+
+function setup() {
+  createCanvas(710, 400, WEBGL);
+  noStroke();
+  angleMode(DEGREES);
+  theShader = buildMaterialShader(shaderAsTextureCallback);
+  describe('Sphere broken up into a square grid with a gradient in each grid.');
+}
+
+function shaderAsTextureCallback() {
+  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;
+  }
+
+  cameraInputs.begin();
+  position = cameraInputs.position;
+  cameraInputs.end();
+
+  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 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],  5,  5);
+  const g = concentricCircles(tiled, [0, 0], 10, 10);
+  const b = concentricCircles(tiled, [0, 0], 20, 10);
+
+  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);
+}

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>