Merge pull request #1238 from MissTipo/shader-translation-glsl-to-p5-strands-2.0

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

Author: ksen0

src/content/examples/config.ts

@@ -41,10 +41,10 @@ export const examplesCollection = defineCollection({
               )
               .optional(),
             // Collective attribution message either does not specify a year,
-            // or specifies 2024. To add a new possible value, update:
+            // or specifies a year from 2024 onwards. To add a new possible value, update:
             // 1) content/examples/config.ts to include new permitted values;
             // 2) and content/ui/*.yaml strings for attribution to include the text
-            collectivelyAttributedSince: z.literal(2024).optional(),
+            collectivelyAttributedSince: z.union([z.literal(2024), z.literal(2026)]).optional(),
           })
         )
         .optional()

src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx

@@ -3,7 +3,6 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-02_Mobile_De
 featuredImageAlt: White circles on a black background, with varying degrees of transparency.
 title: Mobile Device Movement
 oneLineDescription: Animate based on device motion.
-featured: true
 
 remix:
   - description: Revised by
@@ -24,4 +23,4 @@ In this example, the
 <a href="https://p5js.org/reference/p5/accelerationY" target="_blank">accelerationY</a>,
 and <a href="https://p5js.org/reference/p5/accelerationZ" target="_blank">accelerationZ</a>
 values set the position and size of a circle.
-This only works for mobile devices.
+This only works for mobile devices.

src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx

@@ -3,7 +3,6 @@ featuredImage: "../../../images/featured/09_Angles_And_Motion-00_Sine_Cosine-thu
 featuredImageAlt: A point on the unit circle, together with the corresponding sine and cosine values on their graphs.
 title: Sine and Cosine
 oneLineDescription: Animate circular, back and forth, and wave motion.
-featured: true
 
 remix:
   - description: Revised by
@@ -28,4 +27,4 @@ The animation shows uniform circular motion around the unit circle
 (circle with radius 1). Any angle measured from the the x-axis
 determines a point on the circle. The cosine and sine of the angle
 are defined to be the x and y coordinates, respectively, of that
-point.
+point.

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,30 @@
+---
+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.
+featured: true
+
+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: 2026
+---
+
+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,30 @@
+---
+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.
+featured: true
+
+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: 2026
+---
+
+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>