diff --git a/docs/content_overview.md b/docs/content_overview.md index 46cd9df8db..340677164d 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -11,6 +11,40 @@ - 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: 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. + +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..c17cf2577b 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..a70222b49f 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: 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..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..46ad0dc2bc 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 + 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..41f121d682 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,22 @@ 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: + - 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..714b6b6a69 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,20 @@ 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..0164fd3086 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,30 @@ 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 + + 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. 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..72cff3dd32 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: 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/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..70ed8f11a2 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 + 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/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index cc31a5d2bf..93dd9242df 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 the code history of these examples:{" "} + {example.data.remix + .map(item => item?.code) + .flat() + .filter(codeItem => codeItem && codeItem.URL) + .map((codeItem, i, codeItemsList) => ( + <> + {codeItem?.label}{ + i < (codeItemsList?.length ?? 0) - 1 ? ", " : ". " + } + + ))} + You can also contribute to the current website. + + ) : ( + <> + )} +

+ + + + + +

{example.data.arialabel}

+
{