diff --git a/docs/content_overview.md b/docs/content_overview.md index 46cd9df8db..25c66e074e 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -11,6 +11,45 @@ - Stored in `/src/content/examples/` - All translations are stored and edited directly in this repo under the corresponding language folder in `/src/content/examples/` +All original examples (created new for p5.js) since 2024 are collectively attributed to p5.js Contributors under the CC-BY-NC-SA 4.0 license. However, examples that build on prior work (under a compatible license) can be attributed in more detail, to make sure that authorship is clear in citation, and code history is available to viewers. + +To add attribution, you can use the following block in the headers, listing in chronological order all arrtibutions. Below is the example from `examples/animation-and-variables-conditions/`: + +```yaml +remix: + - description: Inspired by + + attribution: + - name: Prof. WM Harris + URL: https://people.rit.edu/wmhics/ + + code: + - URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js + - label: pre-2023 code + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + code: + - URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions + label: 2023 revision code + + - collectivelyAttributedSince: 2024 +``` + +This will result in a block that lists, in order, the initial inspiration; any revision or other remix; and the collective attribution statement that begins in 2024: "From 2024 onwards, edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0." + +A remix can be many things ([here is an example analysis of sketch remixing (PDF)](https://dl.acm.org/doi/pdf/10.1145/3563657.3595969)); the `description` will be by default "Remixed by", so a more specific description is recommended. + +If the `collectivelyAttributedSince` information is missing, then no year will be included, but the collective attribution statement will still show: "Edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0." You'll see this in examples that were part of a major revision project with specific attribution, but have collective authorship before and after. + +Each item in the remix history must have an at least one person listed in the attribution section. When multiple people are listed, their names will be shown in that order. For people, URLs are optional but recommended. + +--- + ## Tutorials - Stored in `/src/content/tutorials/` diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index 20056a4932..e66aaa3fbf 100644 --- 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. @@ -17,5 +18,33 @@ export const examplesCollection = defineCollection({ relatedReference: z.array(reference("reference")).optional(), featuredImage: image(), featuredImageAlt: z.string().optional().default(""), + + // Optional list of remixes to add to license + remix: z + .array( + z.object({ + description: z.string().default("Remixed by"), + attribution: z + .array( + z.object({ + name: z.string(), + URL: z.string().optional(), + }) + ) + .optional(), + code: z + .array( + z.object({ + label: z.string(), + URL: z.string(), + }) + ) + .optional(), + collectivelyAttributedSince: z.number().optional(), + }) + ) + .optional() + .default([]), }), }); + 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 index 428f348709..e630b2e7ba 100644 --- 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,15 @@ oneLineDescription: Draw 2D shapes. relatedReference: - en/p5/arc - en/p5/ellipse + +remix: + - description: Revised in 2023 by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + - collective: + since: 2024 + --- This program demonstrates the use of the basic shape diff --git a/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx b/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx index b39219983a..bbab576db7 100644 --- a/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx +++ b/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx @@ -3,6 +3,23 @@ featuredImage: "../../../images/featured/01_Shapes_And_Color-01_Color-thumbnail. featuredImageAlt: A few basic shapes drawn in different colors over a blue background. title: Color oneLineDescription: Add color to your sketch. + + +remix: + - description: Created by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + - name: Darren Kessner + URL: https://github.com/dkessner + + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions + + - collectivelyAttributedSince: 2024 + --- This expands on the Shape Primitives example by adding diff --git a/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx b/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx index f0daf5f661..eb20bd4134 100644 --- a/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx @@ -3,6 +3,21 @@ 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: + + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + code: + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/17_Drawing/00_Continuous_Lines.js + - label: 2023 revision code + URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/00_Drawing_Lines + --- Click and drag the mouse to draw a line. diff --git a/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx b/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx index 8d3c017894..e5bf9bb05f 100644 --- a/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx @@ -3,6 +3,14 @@ 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: + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + --- This example demonstrates the use of diff --git a/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx b/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx index 8ea19ec820..6f81306597 100644 --- a/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx @@ -4,6 +4,15 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- The deviceMoved() 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 index 297fb5a6bc..a243d27a78 100644 --- 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,30 @@ 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. + +remix: + - description: Inspired by + + attribution: + - name: Prof. WM Harris + URL: https://people.rit.edu/wmhics/ + + code: + - URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js + label: pre-2023 code + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + code: + - URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions + label: 2023 revision code + + - collectivelyAttributedSince: 2024 + --- 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 index 090c1dda4a..0c7ba9d6b5 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- The text() 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 index e4c390873e..1b0e12d9a3 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using the copy() 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 index 7604d191fb..54d80d4112 100644 --- 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,17 @@ 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: + - description: Revised by + + attribution: + - name: Malay Vasa + URL: https://github.com/Malayvasa + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- 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 index 721c4a6df6..2ecf025509 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- 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 index 838e9c70b5..ff1d15fb60 100644 --- 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,15 @@ 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: + - description: Created by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + --- createAudio() 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 index ab11e9875b..bc7797bf9a 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using the noCanvas() 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 index abc0671e2b..a15f2e07e4 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- 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 index c6ae66cc35..223bd1bf40 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- drop() 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 index 7d7ead2113..32a510ce8c 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- 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 index aa49815b6c..e9c381f414 100644 --- 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,20 @@ 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: + + - attribution: + - URL: https://people.rit.edu/wmhics/ + name: Prof. WM Harris + + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- The Document Object Model, diff --git a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx index 1f91b03b41..2bfa813e62 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/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 index da58a33f62..9984d53af8 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/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 index 365d892ea2..f1cb67c594 100644 --- 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,15 @@ 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: + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/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 index 0070e64ac0..3ef6c4c60f 100644 --- 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,13 @@ 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: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/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 index ac025db0f0..e45ed6438f 100644 --- 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,14 @@ 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: + - description: Created by + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/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 index 3869f44e00..eff69c6ce2 100644 --- 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,14 @@ 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: + - description: Created by + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- Interpolation 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 index 3694fc9147..d76b4811fc 100644 --- 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,18 @@ 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. + + +remix: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + - name: Malay Vasa + URL: https://github.com/Malayvasa + + - collectivelyAttributedSince: 2024 --- 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 index e35ad36fb9..27e07e95c9 100644 --- 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,14 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- bezier() diff --git a/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx b/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx index a80556e62c..39ae462329 100644 --- 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,14 @@ 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: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- 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 index 3dc64ca3e0..6ef6b6dfb5 100644 --- 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,26 @@ 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: + - description: Inspired by + + attribution: + - name: Dan Shiffman + + code: + - URL: https://processing.org/examples/tree.html + label: pre-2023 example + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 + --- This is an example of rendering a simple tree-like structure via recursion. diff --git a/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx b/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx index 3973b01018..84b2813ae5 100644 --- a/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx +++ b/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx @@ -3,6 +3,21 @@ 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. + +remix: + - description: Created by + + attribution: + - name: Malay Vasa + URL: https://github.com/Malayvasa + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/08_Listing_Data_with_Arrays/00_Random_Poetry + + - collectivelyAttributedSince: 2024 --- 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 index d711139ae7..693343513d 100644 --- 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,14 @@ 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: + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/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 index 3d95a8acf7..6784123d83 100644 --- 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,13 @@ 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: + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/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 index 346ad00be3..688fcf829c 100644 --- 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,26 @@ 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. + + +remix: + + - description: Created by + attribution: + - name: Ira Greenberg + code: + - label: pre-2023 example + URL: https://archive.p5js.org/examples/form-triangle-strip.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + code: + - label: 2023 revision code + URL: https://github.com/processing/p5.js-example/tree/main/examples/09_Angles_And_Motion/02_Triangle_Strip + + - collectivelyAttributedSince: 2024 --- This example demonstrates how to create a shape diff --git a/src/content/examples/en/10_Games/02_Snake/description.mdx b/src/content/examples/en/10_Games/02_Snake/description.mdx index 401311e49d..a55c33b56f 100644 --- a/src/content/examples/en/10_Games/02_Snake/description.mdx +++ b/src/content/examples/en/10_Games/02_Snake/description.mdx @@ -3,6 +3,20 @@ featuredImage: "../../../images/featured/10_Games-02_Snake-thumbnail.png" featuredImageAlt: A narrow green L shape and a red square representing the snake and fruit in the arcade game Snake. title: Snake oneLineDescription: Make a game based on Snake arcade games. + +remix: + - description: Created by + attribution: + - name: Prashant Gupta + URL: https://github.com/prashantgupta24 + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + - collectivelyAttributedSince: 2024 --- This is a reproduction of a type of arcade game called diff --git a/src/content/examples/en/11_3D/00_Geometries/description.mdx b/src/content/examples/en/11_3D/00_Geometries/description.mdx index c4606f799c..332794ddf6 100644 --- a/src/content/examples/en/11_3D/00_Geometries/description.mdx +++ b/src/content/examples/en/11_3D/00_Geometries/description.mdx @@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/11_3D-00_Geometries-thumbnail.png" featuredImageAlt: Eight 3D shapes; a plane, box, cylinder, cone, torus, sphere, ellipsoid, and a model of an astronaut. The surface of the shapes are multicolored. title: Geometries oneLineDescription: Draw 3D shapes, including a custom model. + + +remix: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + --- p5's diff --git a/src/content/examples/en/11_3D/02_Materials/description.mdx b/src/content/examples/en/11_3D/02_Materials/description.mdx index 955b3c4927..cd766f7e48 100644 --- a/src/content/examples/en/11_3D/02_Materials/description.mdx +++ b/src/content/examples/en/11_3D/02_Materials/description.mdx @@ -3,6 +3,13 @@ featuredImage: "../../../images/featured/11_3D-02_Materials-thumbnail.png" featuredImageAlt: Astronaut 3D model on a black background. title: Materials oneLineDescription: Change 3D objects' color, texture, and how they respond to light. + +remix: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- In 3D rendering, a material determines how a surface diff --git a/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx b/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx index d50a32aad6..04dc675a4d 100644 --- a/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx +++ b/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx @@ -4,6 +4,13 @@ featuredImageAlt: A sphere of dark purple cubes on a light pink background. title: Orbit Control oneLineDescription: Control the camera with the mouse. featured: true + +remix: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- Orbit control diff --git a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx index 2ef014217f..d31c0710b9 100644 --- a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx +++ b/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx @@ -3,6 +3,13 @@ featuredImage: "../../../images/featured/11_3D-06_Framebuffer_Blur-thumbnail.png featuredImageAlt: A row of five orange spheres. The closest and farthest spheres from the camera appear blurred. title: Framebuffer Blur oneLineDescription: Simulate a camera's depth of field. + +remix: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- The diff --git a/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx b/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx index c550237b4b..c90204406d 100644 --- a/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx +++ b/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx @@ -3,6 +3,13 @@ featuredImage: "../../../images/featured/12_Advanced_Canvas_Rendering-00_Create_ featuredImageAlt: Black canvas with a very dark grey rectangle in the middle. A white circle is at the edge of the rectangle. title: Create Graphics oneLineDescription: Draw imagery off-screen. + +remix: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- The diff --git a/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx b/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx index d003b370b5..2b9909403a 100644 --- a/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx +++ b/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx @@ -3,6 +3,13 @@ featuredImage: "../../../images/featured/12_Advanced_Canvas_Rendering-02_Shader_ featuredImageAlt: Two spheres broken up into a square grid with a gradient in each grid. title: Shader as a Texture oneLineDescription: Generate a texture for a 3D shape using a shader. + +remix: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- Shaders can be applied to 2D/3D shapes as textures. diff --git a/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx b/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx index fb09587507..f02cc35e95 100644 --- a/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx @@ -3,6 +3,20 @@ featuredImage: "../../../images/featured/13_Classes_And_Objects-00_Snowflakes-th featuredImageAlt: Snowflakes falling on a black background. title: Snowflakes oneLineDescription: Animate snowfall. + +remix: + - description: Created by + attribution: + - name: Aatish Bhatia + URL: https://archive.p5js.org/examples/simulate-snowflakes.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 + --- This example demonstrates the use of a particle system diff --git a/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx b/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx index 4f3a0c0e22..0ad37ae121 100644 --- a/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx @@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/13_Classes_And_Objects-01_Shake_Ball_Bo featuredImageAlt: Twenty white circles on a black background. title: Shake Ball Bounce oneLineDescription: Animate ball movement based on mobile device motion. + + +remix: + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using a diff --git a/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx b/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx index f0d7a68dac..c78abc9826 100644 --- a/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx @@ -3,6 +3,13 @@ featuredImage: "../../../images/featured/13_Classes_And_Objects-02_Connected_Par featuredImageAlt: A pattern of multicolored circles connected by white lines, on a black background. title: Connected Particles oneLineDescription: Draw circles and connecting lines using the mouse. + +remix: + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- This example uses two custom diff --git a/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx b/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx index cf77347f0d..5483863ba9 100644 --- a/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx @@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/13_Classes_And_Objects-03_Flocking-thum featuredImageAlt: A group of bird-like objects, represented by rainbow triangles, modeling flocking behavior. title: Flocking oneLineDescription: Simulate bird flocking behavior. + + +remix: + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + --- Demonstration of flocking behavior. diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx index 10626c5f3e..9b55836bdb 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx @@ -3,6 +3,23 @@ featuredImage: "../../../images/featured/14_Loading_And_Saving_Data-01_JSON-thum featuredImageAlt: Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles." title: JSON oneLineDescription: Store data in JavaScript object notation. + + +remix: + - description: Created by + attribution: + - name: Daniel Shiffman + code: + - label: pre-2023 Processing example + URL: https://processing.org/examples/loadsavejson.html + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + - collectivelyAttributedSince: 2024 --- JavaScript Object Notation, or JSON, diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx index 13374ed204..fbc42a5b0c 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx @@ -3,6 +3,22 @@ featuredImage: "../../../images/featured/14_Loading_And_Saving_Data-02_Table-thu featuredImageAlt: Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles." title: Table oneLineDescription: Store data as comma-separated values. + +remix: + - description: Created by + attribution: + - name: Daniel Shiffman + code: + - label: pre-2023 Processing example + URL: https://processing.org/examples/loadsavetable.html + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + - collectivelyAttributedSince: 2024 --- Comma-Separated Values, or CSV, is a format for writing diff --git a/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx b/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx index 842434c9c9..0320f06aee 100644 --- a/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx @@ -3,6 +3,23 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_R featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas. title: Non-Orthogonal Reflection oneLineDescription: Simulate a ball bouncing on a slanted surface. + + +remix: + - description: Based on + attribution: + - name: Processing example by Ira Greenberg + URL: https://processing.org/examples/reflection1.html + - description: Ported by + attribution: + - name: David Blitz + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- This example demonstrates a ball bouncing on a slanted diff --git a/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx b/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx index 00e4cf95ff..74cf30d7e9 100644 --- a/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx @@ -3,6 +3,23 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-01_Soft_Body-thumbn featuredImageAlt: A yellow pentagon on a black background. title: Soft Body oneLineDescription: Simulate the physics of a soft body accelerating toward the mouse. + + + +remix: + - description: Created by + attribution: + - name: Ira Greenberg + code: + - label: pre-2023 example + URL: https://archive.p5js.org/examples/simulate-soft-body.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- Physics simulation of a soft body experiencing diff --git a/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx b/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx index 7fb736efae..571174c564 100644 --- a/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx @@ -3,12 +3,25 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-02_Forces-thumbnail featuredImageAlt: 9 multicolored circles at varying heights on a grey background. title: Forces oneLineDescription: Simulate forces on multiple bodies as they move through liquid. + +remix: + - description: Inspired by + attribution: + - name: Dan Shiffman's "Nature of Code" + URL: http://natureofcode.com + + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- Demonstration of multiple forces acting on bodies. Bodies experience gravity continuously. Bodies experience fluid resistance when in "water". -(natureofcode.com) The force calculations are performed using the p5.Vector diff --git a/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx b/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx index c4b0700807..f7f6a15277 100644 --- a/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx @@ -4,15 +4,23 @@ featuredImageAlt: Rainbow colored smoke angled towards the right of the canvas, title: Smoke Particles oneLineDescription: Simulate smoke with a particle system. featured: true ---- +remix: + - description: Based on + attribution: + - name: Dan Shiffman's example + URL: https://natureofcode.com/book/chapter-4-particle-systems/ + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 +--- -Smoke particle system demo, based on -Dan Shiffman's original -example -for Processing. -The code makes use of the +This smoke particle system demo makes use of the p5.Vector class, including the createVector() diff --git a/src/content/examples/en/15_Math_And_Physics/04_Game_Of_Life/description.mdx b/src/content/examples/en/15_Math_And_Physics/04_Game_Of_Life/description.mdx index b169fa18cf..bdcb57938d 100644 --- a/src/content/examples/en/15_Math_And_Physics/04_Game_Of_Life/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/04_Game_Of_Life/description.mdx @@ -3,6 +3,21 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-04_Game_Of_Life-thu featuredImageAlt: Grid of squares made of black lines on a white background. Some squares are filled in with solid black. title: Game of Life oneLineDescription: Recreate John Conway's cellular automaton. + + +remix: + - description: Inspired by + attribution: + - name: Dan Shiffman's "Nature of Code" + URL: http://natureofcode.com + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + - collectivelyAttributedSince: 2024 --- The Game of Life is a cellular automaton created by diff --git a/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx b/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx index 5c72c524e8..d1c3d9aaaa 100644 --- a/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx @@ -3,8 +3,20 @@ featuredImage: "../../../images/featured/15_Math_And_Physics-05_Mandelbrot-thumb featuredImageAlt: Colorful rendering of the Mandelbrot set. title: Mandelbrot Set oneLineDescription: Visualize a mathematical set that produces fractal structures. + + +remix: + - description: Based on + attribution: + - name: Dan Shiffman's example for Processing + URL: https://processing.org/examples/mandelbrot.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- -Colorful rendering of the Mandelbrot set -based on Daniel Shiffman's -Mandelbrot Example for Processing. \ No newline at end of file +Colorful rendering of the Mandelbrot set. \ No newline at end of file diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index cc31a5d2bf..8150a39f9d 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -42,6 +42,23 @@ const relatedReferences = : []; const { Content } = await example.render(); + +// Extract the collective attribution year. If multiple provided, uses last shown. +const collectivelyAttributedSince = example.data.remix?.reduce( + (acc: number | null, item) => { + if (item.collectivelyAttributedSince) { + return item.collectivelyAttributedSince; + } + return acc; + }, + null +); + +// Boolean value on whether the remix history contains links to code +const remixHistoryHasCodeLinks = example.data.remix?.some( + (item) => Array.isArray(item.code) && item.code.length > 0 +); + --- - -

{example.data.arialabel}

-

- {example.data.title} by p5.js Contributors and the Processing Foundation is licensed under CC BY-NC-SA 4.0. -

-
+ +

+ + {example.data.title}:{" "} + + {example.data.remix?.map((item, i) => { + const parts = []; + + // Each remix entry requires at least one attribution + // If a remix entry contains a collective attribution starting year, it is ignored here + + if (!item.collectivelyAttributedSince && item.attribution) { + parts.push(<>{item.description}); + + if (item.attribution?.length) { + parts.push( + <> + {" "} + {item.attribution.map((a, j) => ( + <> + {a.URL ? {a.name} : a.name} + { + item.attribution?.length + ? j < item.attribution.length - 1 ? ", " : "." + : "" + } + + ))} + + ); + } + } + + return {i > 0 && " "}{parts}; + })} + + {collectivelyAttributedSince ? ( + <>From {collectivelyAttributedSince} onwards, edited and maintained by{" "} + ) : ( + <>Edited and maintained by{" "} + )} + + p5.js Contributors{" "} + and the{" "} + Processing Foundation. + Licensed under{" "} + CC BY-NC-SA 4.0. + +

+ +

+ {remixHistoryHasCodeLinks ? ( + <> + View example history:{" "} + {example.data.remix + .map(item => item?.code) + .flat() + .filter(codeItem => codeItem && codeItem.URL) + .map((codeItem, i, codeItemsList) => ( + <> + {codeItem?.label}{ + i < (codeItemsList?.length ?? 0) - 1 ? ", " : "... " + } + + ))} + or contribute to the current website! + + ) : ( + <> + )} +

+ + + + + +

{example.data.arialabel}

+
{