processing · ksen0 · May 13, 2025 · May 13, 2025 · May 31, 2025 · Jun 1, 2025
diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts
@@ -1,5 +1,6 @@
 import { z, defineCollection, reference } from "astro:content";
 
+
 /**
  * Content collection for the Examples section of the site.
  * Each file represents a single example.
@@ -8,14 +9,71 @@ export const examplesCollection = defineCollection({
   type: "content",
   schema: ({ image }) =>
     z.object({
+
       // Title of the example
       title: z.string(),
       oneLineDescription: z.string(),
+
       // Aria label used for the live example code
       arialabel: z.string().optional(),
       featured: z.boolean().optional(),
       relatedReference: z.array(reference("reference")).optional(),
       featuredImage: image(),
       featuredImageAlt: z.string().optional().default(""),
+
+      // Start of collective attribution
+      collectivelyAttributedSince: z.number().optional(),
+
+      // Optional list of remixes to add to license
+      remix: z
+        .array(
+          z.union([
+            z.string(),
+            z.object({
+              attributionURL: z.string().optional(),
+              attributionLabel: z.string().optional(),
+              remixURL: z.string().optional(),
+              remixLabel: z.string().optional(),
+            }),
+          ])
+        )
+        .optional()
+        .default([]),
     }),
 });
+
+/**
+ * The `remix` field lets you add remix attributions in two ways:
+ * 1. Full objects with all details.
+ * 2. Short string keys that refer to predefined entries in `remixLookup`.
+ * When rendering (in ExampleLayout.astro), these keys are replaced 
+ * with their full details from `remixLookup`.
+ */
+
+type RemixEntry = {
+  attributionURL: string;
+  attributionLabel: string;
+  remixURL: string;
+  remixLabel: string;
+};
+
+export const remixLookup: { [key: string]: RemixEntry } = {
+  "revision-2023-calebfoss": {
+    attributionURL: "https://github.com/calebfoss",
+    attributionLabel: "Caleb Foss",
+    remixURL: "https://github.com/processing/p5.js-example",
+    remixLabel: "Revised in 2023",
+  },
+  "revision-2023-dkessner": {
+    attributionURL: "https://github.com/dkessner",
+    attributionLabel: "Darren Kessner",
+    remixURL: "https://github.com/processing/p5.js-example",
+    remixLabel: "Revised in 2023",
+  },
+  "revision-2023-klich": {
+    attributionURL: "https://www.klich.co/",
+    attributionLabel: "Kasey Lichtlyter",
+    remixURL: "https://github.com/processing/p5.js-example",
+    remixLabel: "Revised in 2023",
+  },
+};
diff --git a/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx b/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx
@@ -6,6 +6,9 @@ oneLineDescription: Draw 2D shapes.
 relatedReference:
   - en/p5/arc
   - en/p5/ellipse
+
+remix:
+  - revision-2023-dkessner
 ---
 
 This program demonstrates the use of the basic shape

diff --git a/...content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx b/...content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-00_Drawing_L
 featuredImageAlt: A squiggly rainbow line on a black background.
 title: Drawing Lines
 oneLineDescription: Draw with the mouse.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 Click and drag the mouse to draw a line.

diff --git a/...examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx b/...examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-01_Animation
 featuredImageAlt: A small green circle on a black background.
 title: Animation with Events
 oneLineDescription: Pause and resume animation.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 This example demonstrates the use of

diff --git a/...xamples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx b/...xamples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx
@@ -4,6 +4,10 @@ featuredImageAlt: White circles on a black background, with varying degrees of t
 title: Mobile Device Movement
 oneLineDescription: Animate based on device motion.
 featured: true
+
+
+remix:
+  - revision-2023-klich
 ---
 
 The <a href="https://p5js.org/reference/p5/deviceMoved" target="_blank">deviceMoved()</a>

diff --git a/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx b/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx
@@ -3,6 +3,12 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-03_Condition
 featuredImageAlt: A small black circle on a rainbow, lattice-shaped path, on top of a grey and white striped background.
 title: Conditions
 oneLineDescription: Use if and else statements to make decisions while your sketch runs.
+
+collectivelyAttributedSince: 2024
+remix:
+  - attributionURL: https://people.rit.edu/wmhics/
+    attributionLabel: Prof. WM Harris
+  - revision-2023-calebfoss
 ---
 
 If and else statements allow a

diff --git a/src/content/examples/en/03_Imported_Media/00_Words/description.mdx b/src/content/examples/en/03_Imported_Media/00_Words/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-00_Words-thumbnail.pn
 featuredImageAlt: Three columns of the words “ichi,” “ni,” “san,” and “shi” on a white background. The first column is right aligned, the middle column is center aligned, and the left column is left aligned.
 title: Words
 oneLineDescription: Load fonts and draw text.
+
+remix:
+  - revision-2023-klich
 ---
 
 The <a href="https://p5js.org/reference/p5/text" target="_blank">text()</a> function is used for inserting text into the canvas.

diff --git a/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx b/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-01_Copy_Image_Data-th
 featuredImageAlt: Black-and-white photograph of a parrot. A curvy line is drawn across the image; within the confines of that line, color is added to the photograph.
 title: Copy Image Data
 oneLineDescription: Paint from an image file onto the canvas.
+
+remix:
+  - revision-2023-klich
 ---
 
 Using the <a href="https://p5js.org/reference/p5/copy" target="_blank">copy()</a> 

diff --git a/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx b/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-02_Alpha_Mask-thumbna
 featuredImageAlt: Two leaf sprigs side by side on a white background. The right sprig is labeled "Mask." The left sprig is labeled "Masked Image," and uses the shape of the right sprig to mask a photograph of tulips.
 title: Alpha Mask
 oneLineDescription: Use one image to cut out a section of another image.
+
+remix:
+  - revision-2023-klich
 ---
 
 Using the 

diff --git a/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx b/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-03_Image_Transparency
 featuredImageAlt: An astronaut on a planet as the background with a slightly transparent version of this image overlaid and to the left.
 title: Image Transparency
 oneLineDescription: Make an image translucent on the canvas.
+
+remix:
+  - revision-2023-klich
 ---
 
 This program overlays one image over another by modifying the

diff --git a/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx b/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-04_Create_Audio-thumb
 featuredImageAlt: A close up of an audio player timestamp, reading "0:00 / 2."
 title: Audio Player
 oneLineDescription: Create a player for an audio file.
+
+remix:
+  - revision-2023-klich
 ---
 
 <a href="https://p5js.org/reference/p5/createAudio" target="_blank">createAudio()</a>

diff --git a/src/content/examples/en/03_Imported_Media/05_Video/description.mdx b/src/content/examples/en/03_Imported_Media/05_Video/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-05_Video-thumbnail.pn
 featuredImageAlt: A screenshot of a video of a hand, with the pointer finger touching a desk.
 title: Video Player
 oneLineDescription: Create a player for a video file.
+
+remix:
+  - revision-2023-klich
 ---
 
 Using the <a href="https://p5js.org/reference/p5/noCanvas" target="_blank">noCanvas()</a>

diff --git a/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx b/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-06_Video_Canvas-thumb
 featuredImageAlt: Two overlaid screenshots of a video of a hand, with the pointer finger touching a desk. Text to the top right of the screenshot reads "Click the canvas to start and pause the video feed."
 title: Video on Canvas
 oneLineDescription: Display and stylize a video on the canvas.
+
+remix:
+  - revision-2023-klich
 ---
 
 Using the 

diff --git a/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx b/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/04_Input_Elements-00_Image_Drop-thumbna
 featuredImageAlt: A grey background with white text reading "Drag an image file onto the canvas."
 title: Image Drop
 oneLineDescription: Display an image that the page visitor dragged and dropped.
+
+remix:
+  - revision-2023-klich
 ---
 
 <a href="https://p5js.org/reference/p5.Element/drop" target="_blank">drop()</a>

diff --git a/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx b/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/04_Input_Elements-01_Input_Button-thumb
 featuredImageAlt: An input field with a submit button, labeled "Hello, p5!"
 title: Input and Button
 oneLineDescription: Use text input from the page visitor.
+
+remix:
+  - revision-2023-klich
 ---
 
 Using the 

diff --git a/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx b/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx
@@ -3,6 +3,12 @@ featuredImage: "../../../images/featured/04_Input_Elements-02_DOM_Form_Elements-
 featuredImageAlt: A survey on a yellow background, consisting of an input field, radio buttons, and a dropdown.
 title: Form Elements
 oneLineDescription: Create a form and respond to the results.
+
+collectivelyAttributedSince: 2024
+remix:
+  - attributionURL: https://people.rit.edu/wmhics/
+    attributionLabel: Prof. WM Harris
+  - revision-2023-klich
 ---
 
 The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" target="_blank">Document Object Model</a>,

diff --git a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/05_Transformation-01_Rotate-thumbnail.p
 featuredImageAlt: Line segments rotated around center of canvas.
 title: Rotate
 oneLineDescription: Rotate the coordinate system.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 The

diff --git a/src/content/examples/en/05_Transformation/02_Scale/description.mdx b/src/content/examples/en/05_Transformation/02_Scale/description.mdx
@@ -3,6 +3,10 @@ featuredImage: "../../../images/featured/05_Transformation-02_Scale-thumbnail.pn
 featuredImageAlt: Solid rectangles stacked on top of one another.
 title: Scale
 oneLineDescription: Modify the coordinate system scale.
+
+
+remix:
+  - revision-2023-dkessner
 ---
 
 The

diff --git a/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx b/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/06_Calculating_Values-02_Random-thumbna
 featuredImageAlt: A small purple circle on a black background.
 title: Random
 oneLineDescription: Get random numbers.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 This example demonstrates the use of the

diff --git a/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx b/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/06_Calculating_Values-03_Constrain-thum
 featuredImageAlt: A small white circle in a pink rectangle.
 title: Constrain
 oneLineDescription: Keep a number within a range.
+
+remix:
+  - revision-2023-calebfoss
 ---
 
 This example draws a circle as the cursor's position but

diff --git a/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx b/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/06_Calculating_Values-04_Clock-thumbnai
 featuredImageAlt: A pink clock on a grey background.
 title: Clock
 oneLineDescription: Get the current time.
+
+remix:
+  - revision-2023-calebfoss
 ---
 
 The current time can be read with the

diff --git a/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx b/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/07_Repetition-00_Color_Interpolation-th
 featuredImageAlt: Horizontal stripes fading between light green at the top and dark blue at the bottom.
 title: Color Interpolation
 oneLineDescription: Fade between two colors.
+
+remix:
+  - revision-2023-calebfoss
 ---
 
 <a href="https://developer.mozilla.org/en-US/docs/Glossary/Interpolation" target="_blank">Interpolation</a>

diff --git a/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx b/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx
@@ -3,6 +3,11 @@ featuredImage: "../../../images/featured/07_Repetition-01_Color_Wheel-thumbnail.
 featuredImageAlt: Small circles, each with a different color, arranged in a circular path, displaying hues across the color spectrum.
 title: Color Wheel
 oneLineDescription: Create a visualization of the color spectrum.
+
+collectivelyAttributedSince: 2024
+remix:
+  - attributionLabel: malayvasa2001
+  - revision-2023-calebfoss
 ---
 
 This example illustrates the appearance of different

diff --git a/src/content/examples/en/07_Repetition/02_Bezier/description.mdx b/src/content/examples/en/07_Repetition/02_Bezier/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/07_Repetition-02_Bezier-thumbnail.png"
 featuredImageAlt: Ten rainbow-colored lines in a bezier curve formation.
 title: Bezier
 oneLineDescription: Draw a set of curves.
+
+remix:
+  - revision-2023-klich
 ---
 
 <a href="https://p5js.org/reference/p5/bezier" target="_blank">bezier()</a> 

diff --git a/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx b/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/07_Repetition-03_Kaleidoscope-thumbnail
 featuredImageAlt: Dark grey canvas that reflects the lines drawn within it in symmetrical sections.
 title: Kaleidoscope
 oneLineDescription: Draw mirrored designs with the mouse.
+
+remix:
+  - revision-2023-klich
 ---
 
 A kaleidoscope is an optical instrument with two or more

diff --git a/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx b/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx
@@ -3,6 +3,14 @@ featuredImage: "../../../images/featured/07_Repetition-05_Recursive_Tree-thumbna
 featuredImageAlt: A rainbow fractal tree on a black background.
 title: Recursive Tree
 oneLineDescription: Draw a tree using a function that calls itself.
+
+
+remix:
+  - attributionURL: https://processing.org/examples/tree.html
+    attributionLabel: Processing example by Dan Shiffman
+    remixLabel: Based on
+  - revision-2023-dkessner
+collectivelyAttributedSince: 2024
 ---
 
 This is an example of rendering a simple tree-like structure via recursion.

diff --git a/...ontent/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx b/...ontent/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx
@@ -3,6 +3,11 @@ featuredImage: "../../../images/featured/08_Listing_Data_with_Arrays-00_Random_P
 featuredImageAlt: A random series of words related to p5.js scattered on a maroon background.
 title: Random Poetry
 oneLineDescription: Generate a poem with words randomly selected from a bank.
+
+collectivelyAttributedSince: 2024
+remix:
+  - attributionLabel: malayvasa2001
+  - revision-2023-klich
 ---
 
 Using the

diff --git a/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx b/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx
@@ -4,6 +4,9 @@ featuredImageAlt: A point on the unit circle, together with the corresponding si
 title: Sine and Cosine
 oneLineDescription: Animate circular, back and forth, and wave motion.
 featured: true
+
+remix:
+  - revision-2023-dkessner
 ---
 
 This example demonstrates the

diff --git a/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx b/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx
@@ -3,6 +3,9 @@ featuredImage: "../../../images/featured/09_Angles_And_Motion-01_Aim-thumbnail.p
 featuredImageAlt: Two eyes on a black background.
 title: Aim
 oneLineDescription: Rotate toward a point.
+
+remix:
+  - revision-2023-dkessner
 ---
 
 The

diff --git a/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx b/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx
@@ -3,6 +3,13 @@ featuredImage: "../../../images/featured/09_Angles_And_Motion-02_Triangle_Strip-
 featuredImageAlt: Rainbow ring made up of triangles whose vertices lie on two concentric circles.
 title: Triangle Strip
 oneLineDescription: Split a ring into triangles.
+
+
+collectivelyAttributedSince: 2024
+remix:
+  - attributionURL: https://archive.p5js.org/examples/form-triangle-strip.html
+    attributionLabel: Ira Greenberg
+  - revision-2023-dkessner
 ---
 
 This example demonstrates how to create a shape