diff --git a/docs/content_overview.md b/docs/content_overview.md index 46cd9df8db..fff5c2a6ac 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -11,6 +11,73 @@ - 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 attribution. Below is the example from `examples/animation-and-variables-conditions/`: + +```yaml +remix: + - description: Inspired by + attribution: + - name: Name Name + URL: a-valid-link + code: + - label: pre-2023 code + URL: a-valid-link + - description: Revised by + attribution: + - name: Name Name + URL: a-valid-link + code: + - label: 2023 revision code + URL: a-valid-link + + - 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. + +To credit individuals, you can use the following descriptions, with `attribution.name` including the name of the author or contributor, with an optional link. + +* Remixed by +* Revised by +* Created by + +```yaml +remix: + - description: Created by + attribution: + - name: Someone + URL: ... +``` + +To credit a specific work that was (1) not created by the p5.js contributors since 2024 and (2) is under a compatible license, you can use the following descriptions. Here, `attribution.name` should include both the person and a specific work of theirs that was the inspiration. + +* Inspired by +* Based on + +```yaml +remix: + - description: Inspired by + attribution: + - name: Someone's prior work + URL: ... +``` + +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. + +These attribution histories **do not need to be individually translated** for each sketch. It is enough to make sure that the descriptions (like 'Created by' and so on) appear in the different language strings in `src/content/ui/`. Then, these will be used for all examples. See [Localization](./localization.md) for more info. If you use special descriptions or names in the attribution, these do need either new strings, or localization in the respective example translations (in `src/content/examples/{language}`). + +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. Note that the collective attribution message either does not specify a year, + or specifies 2024. To add a new possible value, update: + +1. `content/examples/config.ts` to include new permitted values; +2. and `content/ui/{language}.yaml` strings for attribution to include the text + +--- + ## Tutorials - Stored in `/src/content/tutorials/` diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index 20056a4932..fa6ac99510 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,37 @@ 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(), + // Collective attribution message either does not specify a year, + // or specifies 2024. 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(), + }) + ) + .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 21fc53fd9d..e6835b500a 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,24 @@ 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 + - 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/01_Shapes_And_Color/00_Shape_Primitives + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/01_Form/01_Shape_Primitives.js + - collectivelyAttributedSince: 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..91d0696d58 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,19 @@ 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/01_Shapes_And_Color/01_Color + - 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..c9b6d05657 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,17 @@ 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..27e0aa9d9b 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,17 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/01_Animation_With_Events + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/00_Structure/06_Redraw.js --- 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..767ac77211 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,17 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/02_Mobile_Device_Movement + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/35_Mobile/02_Acceleration_Color.js --- 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..02d9882cdd 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,24 @@ 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: the Conditional Shapes Example by Prof. WM Harris + URL: https://archive.p5js.org/examples/control-conditional-shapes.html + 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..d66e3c9c67 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,18 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/01_Shapes_And_Color/01_Color + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/19_Typography/01_Words.js + --- 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..f8aca15ee4 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,18 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/03_Imported_Media/01_Copy_Image_Data + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/05_Image/10_Copy_Method.js + --- 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..730e85d8c3 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,20 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/03_Imported_Media/02_Alpha_Mask + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/05_Image/03_Alpha_Mask.js + --- 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..117b1b841a 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,17 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/03_Imported_Media/03_Image_Transparency + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/05_Image/02_Transparency.js --- 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..c42f1fb134 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,16 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/03_Imported_Media/04_Create_Audio + --- 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..abcfe07b38 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,18 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/03_Imported_Media/05_Video + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/16_Dom/08_Video.js + --- 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..caf1d7c6e1 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,18 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/03_Imported_Media/06_Video_Canvas + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/16_Dom/09_Video_Canvas.js + --- Using the diff --git a/src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx b/src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx index 1d77b7518e..928f8ea57b 100644 --- a/src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx +++ b/src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx @@ -3,6 +3,18 @@ featuredImage: "../../../images/featured/03_Imported_Media-07_Video_Capture-thum featuredImageAlt: An inverse, black and white photograph of trees. title: Video Capture oneLineDescription: Display a live video feed from a camera. + +remix: + - description: Revised by + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/03_Imported_Media/07_Video_Capture + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/16_Dom/11_Capture.js + --- 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..acfee508b9 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,17 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/04_Input_Elements/00_Image_Drop + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/16_Dom/12_Drop.js --- 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..62970948bd 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,17 @@ 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/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/04_Input_Elements/01_Input_Button + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/16_Dom/03_Input_Button.js --- 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..c6e2f57dc3 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,23 @@ 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. + +remix: + - description: Created by + attribution: + - URL: https://people.rit.edu/wmhics/ + name: Prof. WM Harris + code: + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/16_Dom/13_DOM_Form_Elements.js + - description: Revised by + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/04_Input_Elements/02_DOM_Form_Elements + - collectivelyAttributedSince: 2024 --- The Document Object Model, diff --git a/src/content/examples/en/05_Transformation/00_Translate/description.mdx b/src/content/examples/en/05_Transformation/00_Translate/description.mdx index 304361dd9c..c1bf2675f9 100644 --- a/src/content/examples/en/05_Transformation/00_Translate/description.mdx +++ b/src/content/examples/en/05_Transformation/00_Translate/description.mdx @@ -3,6 +3,17 @@ featuredImage: "../../../images/featured/05_Transformation-00_Translate-thumbnai featuredImageAlt: Green and blue geometric shapes on a black background. title: Translate oneLineDescription: Move the coordinate system origin. + +remix: + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/05_Transformation/00_Translate + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/18_Transform/00_Translate.js --- The 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..2d6bbcaab8 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,17 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/05_Transformation/01_Rotate + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/18_Transform/02_Rotate.js --- 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..2372e1383c 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,17 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/05_Transformation/02_Scale + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/18_Transform/01_Scale.js --- 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..2ab5eb9fab 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,17 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/06_Calculating_Values/02_Random + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/08_Math/12_random.js --- 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..590637d989 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,19 @@ 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 + + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/06_Calculating_Values/03_Constrain + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/21_Input/01_Constrain.js --- 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..c00c827670 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,17 @@ 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: 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/06_Calculating_Values/04_Clock + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/21_Input/00_Clock.js --- 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..f0022c87b6 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,17 @@ 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: 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/07_Repetition/00_Color_Interpolation + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/07_Color/08_Lerp_Color.js --- 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..f6a850931d 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,23 @@ 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 + + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/07_Repetition/01_Color_Wheel + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/07_Color/03_Color_Wheel.js + --- 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..64e703e1df 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,19 @@ 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/ + + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/07_Repetition/02_Bezier + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/01_Form/06_Bezier.js --- 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..723bde5617 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,19 @@ 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/ + + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/07_Repetition/03_Kaleidoscope + - label: pre-2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/10_Interaction/29_kaleidoscope.js --- A kaleidoscope is an optical instrument with two or more diff --git a/src/content/examples/en/07_Repetition/04_Noise/description.mdx b/src/content/examples/en/07_Repetition/04_Noise/description.mdx index c2c61eeb65..77f5a07e31 100644 --- a/src/content/examples/en/07_Repetition/04_Noise/description.mdx +++ b/src/content/examples/en/07_Repetition/04_Noise/description.mdx @@ -3,6 +3,16 @@ featuredImage: "../../../images/featured/07_Repetition-04_Noise-thumbnail.png" featuredImageAlt: Black and white abstract noise texture. title: Noise oneLineDescription: Generate naturalistic textures using Perlin noise. + +remix: + - description: Created 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/07_Repetition/04_Noise + - collectivelyAttributedSince: 2024 --- Perlin noise 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..7e26c4955a 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,9 +3,31 @@ 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: Based on + attribution: + - name: Dan Shiffman's Recursive Tree Example + URL: https://processing.org/examples/tree.html + code: + - label: pre-2023 example + URL: https://processing.org/examples/tree.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/07_Repetition/05_Recursive_Tree + + - collectivelyAttributedSince: 2024 + --- This is an example of rendering a simple tree-like structure via recursion. The branching angle is calculated as a function of the horizontal mouse location. Move the mouse left and right to change the angle. -Based on Daniel Shiffman's Recursive Tree Example for Processing. +] 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..a1ec71a7d3 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,19 @@ 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: Kasey Lichtlyter + URL: https://www.klich.co/ + - name: Malay Vasa + URL: https://github.com/Malayvasa + 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..0790016dba 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,20 @@ 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 + - name: Malay Vasa + URL: https://github.com/Malayvasa + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/08_Math/05_sincosine.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/09_Angles_And_Motion/00_Sine_Cosine + --- 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..4bb00fec4a 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,19 @@ 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 + - name: Malay Vasa + URL: https://github.com/Malayvasa + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/08_Math/09_arctangent.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/09_Angles_And_Motion/01_Aim --- 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/00_Circle_Clicker/description.mdx b/src/content/examples/en/10_Games/00_Circle_Clicker/description.mdx index 0c1f797637..42f2ab919a 100644 --- a/src/content/examples/en/10_Games/00_Circle_Clicker/description.mdx +++ b/src/content/examples/en/10_Games/00_Circle_Clicker/description.mdx @@ -3,6 +3,20 @@ featuredImage: "../../../images/featured/10_Games-00_Circle_Clicker-thumbnail.pn featuredImageAlt: Large purple circle on a grey background. title: Circle Clicker oneLineDescription: Make a game about clicking a circle quickly and save the high score. + +remix: + + - description: Created 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/07_Repetition/04_Noise + + - collectivelyAttributedSince: 2024 --- This example demonstrates a game with a time limit and score. The browser's diff --git a/src/content/examples/en/10_Games/01_Ping_Pong/description.mdx b/src/content/examples/en/10_Games/01_Ping_Pong/description.mdx index 6099db4672..d2086cb8d9 100644 --- a/src/content/examples/en/10_Games/01_Ping_Pong/description.mdx +++ b/src/content/examples/en/10_Games/01_Ping_Pong/description.mdx @@ -3,6 +3,17 @@ featuredImage: "../../../images/featured/10_Games-01_Ping_Pong-thumbnail.png" featuredImageAlt: Two narrow white rectangles and a white square representing the paddles and ball in a game of ping pong. title: Ping Pong oneLineDescription: Make a game inspired by Atari's Pong. + +remix: + - description: Created 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/10_Games/01_Ping_Pong + - collectivelyAttributedSince: 2024 + --- This is a game inspired by one of the oldest arcade video 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..eda338f3ce 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,23 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/10_Interaction/23_snake.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/10_Games/02_Snake + - 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..bc576dbb20 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,18 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/00_geometries.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/11_3D/00_Geometries + --- p5's diff --git a/src/content/examples/en/11_3D/01_Custom_Geometry/description.mdx b/src/content/examples/en/11_3D/01_Custom_Geometry/description.mdx index 8110aa89cf..0cfaf7f1a2 100644 --- a/src/content/examples/en/11_3D/01_Custom_Geometry/description.mdx +++ b/src/content/examples/en/11_3D/01_Custom_Geometry/description.mdx @@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/11_3D-01_Custom_Geometry-thumbnail.png" featuredImageAlt: A tiled plane of snake models. title: Custom Geometry oneLineDescription: Generate a 3D shape programmatically. + +remix: + - description: Creared 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/01_Custom_Geometry --- The 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..521b6aa5d3 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,17 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/03_materials.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/11_3D/02_Materials --- 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..ae1d352835 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,17 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/07_orbit_control.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/11_3D/03_Orbit_Control --- Orbit control diff --git a/src/content/examples/en/11_3D/04_Filter_Shader/description.mdx b/src/content/examples/en/11_3D/04_Filter_Shader/description.mdx index 369474e95d..ef7a799436 100644 --- a/src/content/examples/en/11_3D/04_Filter_Shader/description.mdx +++ b/src/content/examples/en/11_3D/04_Filter_Shader/description.mdx @@ -3,6 +3,15 @@ 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 oneLineDescription: Manipulate imagery with a shader. + +remix: + - description: Creared 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 --- Filter shaders are a way to apply an effect to anything that diff --git a/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx b/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx index b8c3952a4b..bf4685b002 100644 --- a/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx +++ b/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx @@ -3,6 +3,15 @@ featuredImage: "../../../images/featured/11_3D-05_Adjusting_Positions_With_A_Sha featuredImageAlt: A red-to-blue waving ribbon on a white background. title: Adjusting Positions with a Shader oneLineDescription: Use a shader to adjust shape vertices. + +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 --- Shaders can adjust the positions of the vertices of shapes. 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..95730d3ab8 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,17 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/12_framebuffer_blur.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/11_3D/06_Framebuffer_Blur --- 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..31cee5a27a 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,17 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/00_Structure/09_Create_Graphics.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/12_Advanced_Canvas_Rendering/00_Create_Graphics --- The diff --git a/src/content/examples/en/12_Advanced_Canvas_Rendering/01_Multiple_Canvases/description.mdx b/src/content/examples/en/12_Advanced_Canvas_Rendering/01_Multiple_Canvases/description.mdx index 565a88ebe9..9e454b0e75 100644 --- a/src/content/examples/en/12_Advanced_Canvas_Rendering/01_Multiple_Canvases/description.mdx +++ b/src/content/examples/en/12_Advanced_Canvas_Rendering/01_Multiple_Canvases/description.mdx @@ -3,6 +3,17 @@ featuredImage: "../../../images/featured/12_Advanced_Canvas_Rendering-01_Multipl featuredImageAlt: Two curving lines made of repeating white circles and squares with black outlines, on a black and white background. title: Multiple Canvases oneLineDescription: Use Instance Mode to put multiple canvases on the page. + +remix: + - description: Created 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/01_Multiple_Canvases + - collectivelyAttributedSince: 2024 + --- By default, p5 runs in Global Mode, which means that 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..494964373b 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,17 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/09_shader_as_a_texture.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture --- 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..b1dd6ca919 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,24 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/09_Simulate/14_SnowflakeParticleSystem.js + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/13_Classes_And_Objects/00_Snowflakes + - 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..d3fd6288f4 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,18 @@ 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/ + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/35_Mobile/03_Shake_Ball_Bounce.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/13_Classes_And_Objects/01_Shake_Ball_Bounce --- 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..1c44a03a36 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,17 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/90_Hello_P5/06_drawing.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/13_Classes_And_Objects/02_Connected_Particles --- 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..f46f204282 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,18 @@ 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 + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/09_Simulate/02_Flocking.js + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/13_Classes_And_Objects/03_Flocking + --- Demonstration of flocking behavior. diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx index 115b634546..2f782e6cee 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx @@ -3,6 +3,26 @@ featuredImage: "../../../images/featured/14_Loading_And_Saving_Data-00_Local_Sto featuredImageAlt: Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles." title: Local Storage oneLineDescription: Save data from the browser on the device. + + +remix: + - description: Created 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/14_Loading_And_Saving_Data/00_Local_Storage + - description: Inspired by + attribution: + - name: Daniel Shiffman's examples + code: + - label: pre-2023 JSON example + URL: https://processing.org/examples/loadsavejson.html + - label: pre-2023 Table example + URL: https://processing.org/examples/loadsavetable.html + - collectivelyAttributedSince: 2024 + --- Browsers allow websites to store data on the visitor's 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..03b397600d 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,22 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/14_Loading_And_Saving_Data/01_JSON + - 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..d8ecf9700f 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/14_Loading_And_Saving_Data/01_JSON + - 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..8f387301de 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection + - 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..81867ad5f5 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://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/09_Simulate/10_SoftBody.js + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/01_Soft_Body + - 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..75f6028c2d 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/02_Forces + - 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..14ff76509a 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,24 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/03_Smoke_Particle_System + - 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..a9579b7aa8 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,20 @@ 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/04_Game_Of_Life + - 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..7f86a25b81 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 + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/05_Mandelbrot + - 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/content/ui/en.yaml b/src/content/ui/en.yaml index 2886038a39..5d09de5fd1 100644 --- a/src/content/ui/en.yaml +++ b/src/content/ui/en.yaml @@ -195,3 +195,16 @@ LibrariesLayout: experimentalApi: title: This API is experimental description: Its behavior may change in a future version of p5.js. +attribution: + Remixed by: Remixed by + Revised in 2023 by: Revised in 2023 by + Revised by: Revised by + Inspired by: Inspired by + Based on: Based on + Created by: Created by + and: and + Edited and maintained by: Edited and maintained by + From 2024 onwards, edited and maintained by: From 2024 onwards, edited and maintained by + You can find the code history of these examples here: You can find the code history of these examples here + You can suggest improvements by: You can suggest improvements by + contributing to the current website: contributing to the current website diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 9648c422b2..a3db402dc4 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -45,6 +45,22 @@ 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 +); + const { showBanner, englishUrl } = checkTranslationBanner( 'examples', example.id, @@ -74,14 +90,87 @@ const { showBanner, englishUrl } = checkTranslationBanner(
- -

{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(<>{t("attribution", item.description)}); + + if (item.attribution?.length) { + parts.push( + <> + {" "} + {item.attribution.map((a, j) => ( + <> + {a.URL ? {t(a.name)} : t(a.name)} + { + item.attribution?.length + ? j < item.attribution.length - 1 ? ", " : "." + : "" + } + + ))} + + ); + } + } + + return {i > 0 && " "}{parts}; + })} + + {collectivelyAttributedSince ? ( + <>{t("attribution", `From ${collectivelyAttributedSince} onwards, edited and maintained by`)}{" "} + ) : ( + <>{t("attribution", "Edited and maintained by")}{" "} + )} + + p5.js Contributors{" "} + {t("attribution", "and")}{" "} + Processing Foundation. + Licensed under{" "} + CC BY-NC-SA 4.0. + +

+ +

+ {remixHistoryHasCodeLinks ? ( + <> + {t("attribution", "You can find the code history of these examples here")}{": "} + {example.data.remix + .map(item => item?.code) + .flat() + .filter(codeItem => codeItem && codeItem.URL) + .map((codeItem, i, codeItemsList) => ( + <> + {codeItem?.label}{ + i < (codeItemsList?.length ?? 0) - 1 ? ", " : ". " + } + + ))} + {t("attribution", "You can suggest improvements by")}{" "} + {t("attribution", "contributing to the current website")}! + + ) : ( + <> + )} +

+ + + + + +

{example.data.arialabel}

+
{