From 84192aecefa01977760006df23178d5aeb13fa3d Mon Sep 17 00:00:00 2001 From: ksen0 Date: Tue, 13 May 2025 12:33:48 +0200 Subject: [PATCH 1/6] Initial format for detailed example attribution --- src/content/examples/config.ts | 7 +++++++ .../03_Smoke_Particle_System/description.mdx | 14 ++++++++------ src/layouts/ExampleLayout.astro | 13 ++++++++++--- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index 20056a4932..b580555825 100644 --- a/src/content/examples/config.ts +++ b/src/content/examples/config.ts @@ -17,5 +17,12 @@ export const examplesCollection = defineCollection({ relatedReference: z.array(reference("reference")).optional(), featuredImage: image(), featuredImageAlt: z.string().optional().default(""), + archiveAttributionPrefix: z.string().optional().default(""), + archiveAttributionName: z.string().optional().default(""), + archiveAttributionURL: z.string().optional().default(""), + revisedAttributionPrefix: z.string().optional().default(""), + revisedAttributionPrefixURL: z.string().optional().default(""), + revisedAttributionName: z.string().optional().default(""), + revisedAttributionURL: z.string().optional().default(""), }), }); 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..cae3d1715e 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,17 @@ featuredImageAlt: Rainbow colored smoke angled towards the right of the canvas, title: Smoke Particles oneLineDescription: Simulate smoke with a particle system. featured: true +archiveAttributionPrefix: Based on +archiveAttributionName: Dan Shiffman's example +archiveAttributionURL: https://natureofcode.com/book/chapter-4-particle-systems/ +revisedAttributionPrefix: Revised in 2023 +revisedAttributionPrefixURL: https://github.com/processing/p5.js-example +revisedAttributionName: Darren Kessner +revisedAttributionURL: https://github.com/dkessner --- -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/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index cc31a5d2bf..87f955bab2 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -63,14 +63,21 @@ const { Content } = await example.render();
- -

{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.archiveAttributionPrefix} {example.data.archiveAttributionName}. + {example.data.revisedAttributionPrefix} by {example.data.revisedAttributionName}. + From 2023 onwards, edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0. +

+ + +

{example.data.arialabel}

+
{ From a1a978ad72f05a29e7d3a551efd469b88d136690 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Sat, 31 May 2025 10:05:50 +0200 Subject: [PATCH 2/6] Improved remix attribution schema --- src/content/examples/config.ts | 20 ++++++--- .../03_Smoke_Particle_System/description.mdx | 15 ++++--- src/layouts/ExampleLayout.astro | 44 +++++++++++++++++-- 3 files changed, 61 insertions(+), 18 deletions(-) diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index b580555825..9e00cea4fd 100644 --- a/src/content/examples/config.ts +++ b/src/content/examples/config.ts @@ -17,12 +17,18 @@ export const examplesCollection = defineCollection({ relatedReference: z.array(reference("reference")).optional(), featuredImage: image(), featuredImageAlt: z.string().optional().default(""), - archiveAttributionPrefix: z.string().optional().default(""), - archiveAttributionName: z.string().optional().default(""), - archiveAttributionURL: z.string().optional().default(""), - revisedAttributionPrefix: z.string().optional().default(""), - revisedAttributionPrefixURL: z.string().optional().default(""), - revisedAttributionName: z.string().optional().default(""), - revisedAttributionURL: z.string().optional().default(""), + // Optional list of remixes to add to license + remix: z + .array( + z.object({ + attributionURL: z.string().optional(), + attributionLabel: z.string().optional(), + remixURL: z.string().optional(), + remixLabel: z.string().optional(), + }) + ) + .optional() + .default([]), }), }); + 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 cae3d1715e..80f84f80f2 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,13 +4,14 @@ featuredImageAlt: Rainbow colored smoke angled towards the right of the canvas, title: Smoke Particles oneLineDescription: Simulate smoke with a particle system. featured: true -archiveAttributionPrefix: Based on -archiveAttributionName: Dan Shiffman's example -archiveAttributionURL: https://natureofcode.com/book/chapter-4-particle-systems/ -revisedAttributionPrefix: Revised in 2023 -revisedAttributionPrefixURL: https://github.com/processing/p5.js-example -revisedAttributionName: Darren Kessner -revisedAttributionURL: https://github.com/dkessner +remix: + - attributionURL: https://github.com/dkessner + attributionLabel: Darren Kessner + remixURL: https://github.com/processing/p5.js-example + remixLabel: Revised in 2023 + - attributionURL: https://natureofcode.com/book/chapter-4-particle-systems/ + attributionLabel: Dan Shiffman's example + --- diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 87f955bab2..c7c414b14a 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -66,10 +66,46 @@ const { Content } = await example.render();

- {example.data.title}: - {example.data.archiveAttributionPrefix} {example.data.archiveAttributionName}. - {example.data.revisedAttributionPrefix} by {example.data.revisedAttributionName}. - From 2023 onwards, edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0. + {example.data.title}: + Edited and maintained by + p5.js Contributors + and the + Processing Foundation. + Licensed under{" "} + CC BY-NC-SA 4.0. + + +{example.data.remix?.map((item, i) => ( + <> + {i > 0 && " "} + {item.remixLabel && item.remixURL ? ( + <> + {item.remixLabel} + {item.attributionLabel && ( + <> + {" "}by{" "} + {item.attributionURL ? ( + {item.attributionLabel} + ) : ( + item.attributionName + )} + + )} + + ) : item.attributionLabel ? ( + <> + Remixed from{" "} + {item.attributionURL ? ( + {item.attributionLabel} + ) : ( + item.attributionName + )} + + ) : null} + {i < example.data.remix.length - 1 && "."} + +))} +

From f41a6fbe558daf8fcd0713f9339e45d1833c911f Mon Sep 17 00:00:00 2001 From: ksen0 Date: Sat, 31 May 2025 10:05:50 +0200 Subject: [PATCH 3/6] Improved remix attribution schema --- .../00_Shape_Primitives/description.mdx | 5 +++++ .../03_Smoke_Particle_System/description.mdx | 12 ++++++------ src/layouts/ExampleLayout.astro | 9 ++++----- 3 files changed, 15 insertions(+), 11 deletions(-) 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..446cb9607c 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,11 @@ oneLineDescription: Draw 2D shapes. relatedReference: - en/p5/arc - en/p5/ellipse +remix: + - attributionURL: https://github.com/dkessner + attributionLabel: Darren Kessner + remixURL: https://github.com/processing/p5.js-example + remixLabel: Revised in 2023 --- This program demonstrates the use of the basic shape 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 80f84f80f2..1b996d1eb5 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 @@ -5,12 +5,12 @@ title: Smoke Particles oneLineDescription: Simulate smoke with a particle system. featured: true remix: - - attributionURL: https://github.com/dkessner - attributionLabel: Darren Kessner - remixURL: https://github.com/processing/p5.js-example - remixLabel: Revised in 2023 - - attributionURL: https://natureofcode.com/book/chapter-4-particle-systems/ - attributionLabel: Dan Shiffman's example + - attributionURL: https://github.com/dkessner + attributionLabel: Darren Kessner + remixURL: https://github.com/processing/p5.js-example + remixLabel: Revised in 2023 + - attributionURL: https://natureofcode.com/book/chapter-4-particle-systems/ + attributionLabel: Dan Shiffman's example --- diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index c7c414b14a..88f79202d0 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -87,8 +87,8 @@ const { Content } = await example.render(); {item.attributionURL ? ( {item.attributionLabel} ) : ( - item.attributionName - )} + item.attributionLabel + )}. )} @@ -98,11 +98,10 @@ const { Content } = await example.render(); {item.attributionURL ? ( {item.attributionLabel} ) : ( - item.attributionName - )} + item.attributionLabel + )}. ) : null} - {i < example.data.remix.length - 1 && "."} ))} From f9596c74aa645b393f1b341139ee873965e1d0b6 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Mon, 2 Jun 2025 22:17:07 +0200 Subject: [PATCH 4/6] Use specified year for collective attribution where applicable --- src/content/examples/config.ts | 6 ++ .../00_Shape_Primitives/description.mdx | 1 + .../03_Smoke_Particle_System/description.mdx | 7 +- src/layouts/ExampleLayout.astro | 76 ++++++++++--------- 4 files changed, 53 insertions(+), 37 deletions(-) diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index 9e00cea4fd..e0754b7357 100644 --- a/src/content/examples/config.ts +++ b/src/content/examples/config.ts @@ -8,15 +8,21 @@ export const examplesCollection = defineCollection({ type: "content", schema: ({ image }) => z.object({ + // Title of the example title: z.string(), oneLineDescription: z.string(), + // Aria label used for the live example code arialabel: z.string().optional(), featured: z.boolean().optional(), relatedReference: z.array(reference("reference")).optional(), featuredImage: image(), featuredImageAlt: z.string().optional().default(""), + + // Start of collective attribution + collectivelyAttributedSince: z.number().optional(), + // Optional list of remixes to add to license remix: z .array( 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 446cb9607c..100759e036 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,7 @@ oneLineDescription: Draw 2D shapes. relatedReference: - en/p5/arc - en/p5/ellipse + remix: - attributionURL: https://github.com/dkessner attributionLabel: Darren Kessner 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 1b996d1eb5..7b715eb7fb 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,14 +4,15 @@ featuredImageAlt: Rainbow colored smoke angled towards the right of the canvas, title: Smoke Particles oneLineDescription: Simulate smoke with a particle system. featured: true + +collectivelyAttributedSince: 2024 remix: + - attributionURL: https://natureofcode.com/book/chapter-4-particle-systems/ + attributionLabel: Dan Shiffman's example - attributionURL: https://github.com/dkessner attributionLabel: Darren Kessner remixURL: https://github.com/processing/p5.js-example remixLabel: Revised in 2023 - - attributionURL: https://natureofcode.com/book/chapter-4-particle-systems/ - attributionLabel: Dan Shiffman's example - --- diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 88f79202d0..421d3370a4 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -66,45 +66,53 @@ const { Content } = await example.render();

- {example.data.title}: - Edited and maintained by - p5.js Contributors - and the - Processing Foundation. - Licensed under{" "} - CC BY-NC-SA 4.0. + {example.data.title}: + {example.data.remix?.map((item, i) => ( + <> + {i > 0 && " "} + {item.remixLabel && item.remixURL ? ( + <> + {item.remixLabel} + {item.attributionLabel && ( + <> + {" "}by{" "} + {item.attributionURL ? ( + {item.attributionLabel} + ) : ( + item.attributionLabel + )}. + + )} + + ) : item.attributionLabel ? ( + <> + Remixed from{" "} + {item.attributionURL ? ( + {item.attributionLabel} + ) : ( + item.attributionLabel + )}. + + ) : null} + + ))} -{example.data.remix?.map((item, i) => ( - <> - {i > 0 && " "} - {item.remixLabel && item.remixURL ? ( - <> - {item.remixLabel} - {item.attributionLabel && ( + {example.data.collectivelyAttributedSince ? ( <> - {" "}by{" "} - {item.attributionURL ? ( - {item.attributionLabel} - ) : ( - item.attributionLabel - )}. + From {example.data.collectivelyAttributedSince} onwards, edited and maintained by - )} - - ) : item.attributionLabel ? ( - <> - Remixed from{" "} - {item.attributionURL ? ( - {item.attributionLabel} ) : ( - item.attributionLabel - )}. - - ) : null} - -))} - + <> + Edited and maintained by + + )} + + p5.js Contributors + and the + Processing Foundation. + Licensed under{" "} + CC BY-NC-SA 4.0.

From 8b3d87fc50718855b8ba86b48341c9ab39711e2c Mon Sep 17 00:00:00 2001 From: ksen0 Date: Mon, 2 Jun 2025 22:44:06 +0200 Subject: [PATCH 5/6] Use remixLookup to reduce duplicate .mdx headers --- src/content/examples/config.ts | 45 ++++++++++++++++--- .../00_Shape_Primitives/description.mdx | 5 +-- .../00_Drawing_Lines/description.mdx | 6 +++ .../01_Animation_With_Events/description.mdx | 3 ++ .../03_Smoke_Particle_System/description.mdx | 5 +-- src/layouts/ExampleLayout.astro | 9 +++- 6 files changed, 57 insertions(+), 16 deletions(-) diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index e0754b7357..466ff3bf56 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. @@ -22,19 +23,49 @@ export const examplesCollection = defineCollection({ // Start of collective attribution collectivelyAttributedSince: z.number().optional(), - + // Optional list of remixes to add to license remix: z .array( - z.object({ - attributionURL: z.string().optional(), - attributionLabel: z.string().optional(), - remixURL: z.string().optional(), - remixLabel: z.string().optional(), - }) + z.union([ + z.string(), + z.object({ + attributionURL: z.string().optional(), + attributionLabel: z.string().optional(), + remixURL: z.string().optional(), + remixLabel: z.string().optional(), + }), + ]) ) .optional() .default([]), }), }); +/** + * The `remix` field lets you add remix attributions in two ways: + * 1. Full objects with all details. + * 2. Short string keys that refer to predefined entries in `remixLookup`. + * When rendering (in ExampleLayout.astro), these keys are replaced + * with their full details from `remixLookup`. + */ +export const remixLookup = { + "revision-2023-calebfoss": { + attributionURL: "https://github.com/calebfoss", + attributionLabel: "Caleb calebfoss", + remixURL: "https://github.com/processing/p5.js-example", + remixLabel: "Revised in 2023", + }, + "revision-2023-dkessner": { + attributionURL: "https://github.com/dkessner", + attributionLabel: "Darren Kessner", + remixURL: "https://github.com/processing/p5.js-example", + remixLabel: "Revised in 2023", + }, + "revision-2023-katlich112358": { + attributionURL: "https://www.klich.co/", + attributionLabel: "Kasey Lichtlyter", + remixURL: "https://github.com/processing/p5.js-example", + remixLabel: "Revised in 2023", + } +}; \ No newline at end of file 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 100759e036..874488eee3 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 @@ -8,10 +8,7 @@ relatedReference: - en/p5/ellipse remix: - - attributionURL: https://github.com/dkessner - attributionLabel: Darren Kessner - remixURL: https://github.com/processing/p5.js-example - remixLabel: Revised in 2023 + - revision-2023-dkessner --- This program demonstrates the use of the basic shape 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..f5a55e9364 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,12 @@ 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: + - attributionURL: https://github.com/dkessner + attributionLabel: Darren Kessner + remixURL: https://github.com/processing/p5.js-example + remixLabel: Revised in 2023 --- 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..8c5d2ba6ca 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,9 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-01_Animation featuredImageAlt: A small green circle on a black background. title: Animation with Events oneLineDescription: Pause and resume animation. + +remix: + - revision-2023-dkessner --- This example demonstrates the use of diff --git a/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 7b715eb7fb..b7a9800888 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 @@ -9,10 +9,7 @@ collectivelyAttributedSince: 2024 remix: - attributionURL: https://natureofcode.com/book/chapter-4-particle-systems/ attributionLabel: Dan Shiffman's example - - attributionURL: https://github.com/dkessner - attributionLabel: Darren Kessner - remixURL: https://github.com/processing/p5.js-example - remixLabel: Revised in 2023 + - revision-2023-dkessner --- diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 421d3370a4..0cab3aa885 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -2,6 +2,7 @@ import type { CollectionEntry } from "astro:content"; import Head from "@components/Head/index.astro"; import { setJumpToState } from "../globals/state"; +import { remixLookup } from "../content/examples/config"; import { getCurrentLocale, getUiTranslator } from "../i18n/utils"; import { generateJumpToState, @@ -41,6 +42,12 @@ const relatedReferences = ) : []; +// Rather than using example.data.remix, use resolvedRemix +// Which fills in widely-used attributions to avoid duplication +const resolvedRemix = example.data.remix.map((entry: any) => + typeof entry === "string" ? remixLookup[entry] : entry +); + const { Content } = await example.render(); --- @@ -68,7 +75,7 @@ const { Content } = await example.render(); {example.data.title}: - {example.data.remix?.map((item, i) => ( + {resolvedRemix?.map((item, i) => ( <> {i > 0 && " "} {item.remixLabel && item.remixURL ? ( From 0d50ad0f25d0789ad38541481fabe04bb478940e Mon Sep 17 00:00:00 2001 From: ksen0 Date: Mon, 2 Jun 2025 22:54:26 +0200 Subject: [PATCH 6/6] Add 2023 revision attributions --- src/content/examples/config.ts | 18 +++++++++++++----- .../00_Drawing_Lines/description.mdx | 5 +---- .../02_Mobile_Device_Movement/description.mdx | 4 ++++ .../03_Conditions/description.mdx | 6 ++++++ .../03_Imported_Media/00_Words/description.mdx | 3 +++ .../01_Copy_Image_Data/description.mdx | 3 +++ .../02_Alpha_Mask/description.mdx | 3 +++ .../03_Image_Transparency/description.mdx | 3 +++ .../04_Create_Audio/description.mdx | 3 +++ .../03_Imported_Media/05_Video/description.mdx | 3 +++ .../06_Video_Canvas/description.mdx | 3 +++ .../00_Image_Drop/description.mdx | 3 +++ .../01_Input_Button/description.mdx | 3 +++ .../02_DOM_Form_Elements/description.mdx | 6 ++++++ .../01_Rotate/description.mdx | 3 +++ .../05_Transformation/02_Scale/description.mdx | 4 ++++ .../02_Random/description.mdx | 3 +++ .../03_Constrain/description.mdx | 3 +++ .../04_Clock/description.mdx | 3 +++ .../00_Color_Interpolation/description.mdx | 3 +++ .../01_Color_Wheel/description.mdx | 5 +++++ .../en/07_Repetition/02_Bezier/description.mdx | 3 +++ .../03_Kaleidoscope/description.mdx | 3 +++ .../05_Recursive_Tree/description.mdx | 8 ++++++++ .../00_Random_Poetry/description.mdx | 5 +++++ .../00_Sine_Cosine/description.mdx | 3 +++ .../01_Aim/description.mdx | 3 +++ .../02_Triangle_Strip/description.mdx | 7 +++++++ .../en/10_Games/02_Snake/description.mdx | 6 ++++++ .../en/11_3D/00_Geometries/description.mdx | 3 +++ .../en/11_3D/02_Materials/description.mdx | 3 +++ .../en/11_3D/03_Orbit_Control/description.mdx | 3 +++ .../11_3D/06_Framebuffer_Blur/description.mdx | 3 +++ .../00_Create_Graphics/description.mdx | 3 +++ .../02_Shader_As_A_Texture/description.mdx | 3 +++ .../00_Snowflakes/description.mdx | 6 ++++++ .../01_Shake_Ball_Bounce/description.mdx | 3 +++ .../02_Connected_Particles/description.mdx | 3 +++ .../03_Flocking/description.mdx | 3 +++ .../01_JSON/description.mdx | 6 ++++++ .../02_Table/description.mdx | 7 +++++++ .../description.mdx | 9 +++++++++ .../01_Soft_Body/description.mdx | 6 ++++++ .../02_Forces/description.mdx | 7 ++++++- .../04_Game_Of_Life/description.mdx | 6 ++++++ .../05_Mandelbrot/description.mdx | 9 ++++++--- src/layouts/ExampleLayout.astro | 13 ++++++++++--- 47 files changed, 208 insertions(+), 16 deletions(-) diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index 466ff3bf56..2d26a49d4c 100644 --- a/src/content/examples/config.ts +++ b/src/content/examples/config.ts @@ -49,10 +49,18 @@ export const examplesCollection = defineCollection({ * When rendering (in ExampleLayout.astro), these keys are replaced * with their full details from `remixLookup`. */ -export const remixLookup = { + +type RemixEntry = { + attributionURL: string; + attributionLabel: string; + remixURL: string; + remixLabel: string; +}; + +export const remixLookup: { [key: string]: RemixEntry } = { "revision-2023-calebfoss": { attributionURL: "https://github.com/calebfoss", - attributionLabel: "Caleb calebfoss", + attributionLabel: "Caleb Foss", remixURL: "https://github.com/processing/p5.js-example", remixLabel: "Revised in 2023", }, @@ -62,10 +70,10 @@ export const remixLookup = { remixURL: "https://github.com/processing/p5.js-example", remixLabel: "Revised in 2023", }, - "revision-2023-katlich112358": { + "revision-2023-klich": { attributionURL: "https://www.klich.co/", attributionLabel: "Kasey Lichtlyter", remixURL: "https://github.com/processing/p5.js-example", remixLabel: "Revised in 2023", - } -}; \ No newline at end of file + }, +}; 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 f5a55e9364..7f231014fe 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 @@ -5,10 +5,7 @@ title: Drawing Lines oneLineDescription: Draw with the mouse. remix: - - attributionURL: https://github.com/dkessner - attributionLabel: Darren Kessner - remixURL: https://github.com/processing/p5.js-example - remixLabel: Revised in 2023 + - revision-2023-dkessner --- Click and drag the mouse to draw a line. 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..c3db5d4e5d 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,10 @@ featuredImageAlt: White circles on a black background, with varying degrees of t title: Mobile Device Movement oneLineDescription: Animate based on device motion. featured: true + + +remix: + - revision-2023-klich --- The 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..a12fac16dd 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,12 @@ featuredImage: "../../../images/featured/02_Animation_And_Variables-03_Condition featuredImageAlt: A small black circle on a rainbow, lattice-shaped path, on top of a grey and white striped background. title: Conditions oneLineDescription: Use if and else statements to make decisions while your sketch runs. + +collectivelyAttributedSince: 2024 +remix: + - attributionURL: https://people.rit.edu/wmhics/ + attributionLabel: Prof. WM Harris + - revision-2023-calebfoss --- If and else statements allow a diff --git a/src/content/examples/en/03_Imported_Media/00_Words/description.mdx b/src/content/examples/en/03_Imported_Media/00_Words/description.mdx index 090c1dda4a..558746e2d7 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,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-00_Words-thumbnail.pn featuredImageAlt: Three columns of the words “ichi,” “ni,” “san,” and “shi” on a white background. The first column is right aligned, the middle column is center aligned, and the left column is left aligned. title: Words oneLineDescription: Load fonts and draw text. + +remix: + - revision-2023-klich --- The 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..c1e107e2b0 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,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-01_Copy_Image_Data-th featuredImageAlt: Black-and-white photograph of a parrot. A curvy line is drawn across the image; within the confines of that line, color is added to the photograph. title: Copy Image Data oneLineDescription: Paint from an image file onto the canvas. + +remix: + - revision-2023-klich --- Using the 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..822417fc00 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,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-02_Alpha_Mask-thumbna featuredImageAlt: Two leaf sprigs side by side on a white background. The right sprig is labeled "Mask." The left sprig is labeled "Masked Image," and uses the shape of the right sprig to mask a photograph of tulips. title: Alpha Mask oneLineDescription: Use one image to cut out a section of another image. + +remix: + - revision-2023-klich --- Using the diff --git a/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx b/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx index 721c4a6df6..f146a2ff2f 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,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-03_Image_Transparency featuredImageAlt: An astronaut on a planet as the background with a slightly transparent version of this image overlaid and to the left. title: Image Transparency oneLineDescription: Make an image translucent on the canvas. + +remix: + - revision-2023-klich --- This program overlays one image over another by modifying the diff --git a/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx b/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx index 838e9c70b5..755a221177 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,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-04_Create_Audio-thumb featuredImageAlt: A close up of an audio player timestamp, reading "0:00 / 2." title: Audio Player oneLineDescription: Create a player for an audio file. + +remix: + - revision-2023-klich --- 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..990922690a 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,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-05_Video-thumbnail.pn featuredImageAlt: A screenshot of a video of a hand, with the pointer finger touching a desk. title: Video Player oneLineDescription: Create a player for a video file. + +remix: + - revision-2023-klich --- Using the 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..79b675439f 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,9 @@ featuredImage: "../../../images/featured/03_Imported_Media-06_Video_Canvas-thumb featuredImageAlt: Two overlaid screenshots of a video of a hand, with the pointer finger touching a desk. Text to the top right of the screenshot reads "Click the canvas to start and pause the video feed." title: Video on Canvas oneLineDescription: Display and stylize a video on the canvas. + +remix: + - revision-2023-klich --- Using the diff --git a/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx b/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx index c6ae66cc35..5c9ddaf445 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,9 @@ featuredImage: "../../../images/featured/04_Input_Elements-00_Image_Drop-thumbna featuredImageAlt: A grey background with white text reading "Drag an image file onto the canvas." title: Image Drop oneLineDescription: Display an image that the page visitor dragged and dropped. + +remix: + - revision-2023-klich --- 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..8aaaef15f0 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,9 @@ featuredImage: "../../../images/featured/04_Input_Elements-01_Input_Button-thumb featuredImageAlt: An input field with a submit button, labeled "Hello, p5!" title: Input and Button oneLineDescription: Use text input from the page visitor. + +remix: + - revision-2023-klich --- Using the diff --git a/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx b/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx index aa49815b6c..95a36c6068 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,12 @@ featuredImage: "../../../images/featured/04_Input_Elements-02_DOM_Form_Elements- featuredImageAlt: A survey on a yellow background, consisting of an input field, radio buttons, and a dropdown. title: Form Elements oneLineDescription: Create a form and respond to the results. + +collectivelyAttributedSince: 2024 +remix: + - attributionURL: https://people.rit.edu/wmhics/ + attributionLabel: Prof. WM Harris + - revision-2023-klich --- The Document Object Model, diff --git a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx index 1f91b03b41..2e33a07cba 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,9 @@ featuredImage: "../../../images/featured/05_Transformation-01_Rotate-thumbnail.p featuredImageAlt: Line segments rotated around center of canvas. title: Rotate oneLineDescription: Rotate the coordinate system. + +remix: + - revision-2023-dkessner --- The diff --git a/src/content/examples/en/05_Transformation/02_Scale/description.mdx b/src/content/examples/en/05_Transformation/02_Scale/description.mdx index da58a33f62..60e9940e75 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,10 @@ featuredImage: "../../../images/featured/05_Transformation-02_Scale-thumbnail.pn featuredImageAlt: Solid rectangles stacked on top of one another. title: Scale oneLineDescription: Modify the coordinate system scale. + + +remix: + - revision-2023-dkessner --- The diff --git a/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx b/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx index 365d892ea2..fe02650737 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,9 @@ featuredImage: "../../../images/featured/06_Calculating_Values-02_Random-thumbna featuredImageAlt: A small purple circle on a black background. title: Random oneLineDescription: Get random numbers. + +remix: + - revision-2023-dkessner --- This example demonstrates the use of the diff --git a/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx b/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx index 0070e64ac0..ca3aa8514a 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,9 @@ featuredImage: "../../../images/featured/06_Calculating_Values-03_Constrain-thum featuredImageAlt: A small white circle in a pink rectangle. title: Constrain oneLineDescription: Keep a number within a range. + +remix: + - revision-2023-calebfoss --- This example draws a circle as the cursor's position but diff --git a/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx b/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx index ac025db0f0..eaa8dfb51c 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,9 @@ featuredImage: "../../../images/featured/06_Calculating_Values-04_Clock-thumbnai featuredImageAlt: A pink clock on a grey background. title: Clock oneLineDescription: Get the current time. + +remix: + - revision-2023-calebfoss --- The current time can be read with the diff --git a/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx b/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx index 3869f44e00..f884ca4bf0 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,9 @@ featuredImage: "../../../images/featured/07_Repetition-00_Color_Interpolation-th featuredImageAlt: Horizontal stripes fading between light green at the top and dark blue at the bottom. title: Color Interpolation oneLineDescription: Fade between two colors. + +remix: + - revision-2023-calebfoss --- 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..5200fea8d9 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,11 @@ featuredImage: "../../../images/featured/07_Repetition-01_Color_Wheel-thumbnail. featuredImageAlt: Small circles, each with a different color, arranged in a circular path, displaying hues across the color spectrum. title: Color Wheel oneLineDescription: Create a visualization of the color spectrum. + +collectivelyAttributedSince: 2024 +remix: + - attributionLabel: malayvasa2001 + - revision-2023-calebfoss --- This example illustrates the appearance of different diff --git a/src/content/examples/en/07_Repetition/02_Bezier/description.mdx b/src/content/examples/en/07_Repetition/02_Bezier/description.mdx index e35ad36fb9..f422c462e0 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,9 @@ featuredImage: "../../../images/featured/07_Repetition-02_Bezier-thumbnail.png" featuredImageAlt: Ten rainbow-colored lines in a bezier curve formation. title: Bezier oneLineDescription: Draw a set of curves. + +remix: + - revision-2023-klich --- 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..673af1a32f 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,9 @@ featuredImage: "../../../images/featured/07_Repetition-03_Kaleidoscope-thumbnail featuredImageAlt: Dark grey canvas that reflects the lines drawn within it in symmetrical sections. title: Kaleidoscope oneLineDescription: Draw mirrored designs with the mouse. + +remix: + - revision-2023-klich --- A kaleidoscope is an optical instrument with two or more diff --git a/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx b/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx index 3dc64ca3e0..761934d8ed 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,14 @@ featuredImage: "../../../images/featured/07_Repetition-05_Recursive_Tree-thumbna featuredImageAlt: A rainbow fractal tree on a black background. title: Recursive Tree oneLineDescription: Draw a tree using a function that calls itself. + + +remix: + - attributionURL: https://processing.org/examples/tree.html + attributionLabel: Processing example by Dan Shiffman + remixLabel: Based on + - revision-2023-dkessner +collectivelyAttributedSince: 2024 --- This is an example of rendering a simple tree-like structure via recursion. diff --git a/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..db1b021fc2 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,11 @@ featuredImage: "../../../images/featured/08_Listing_Data_with_Arrays-00_Random_P featuredImageAlt: A random series of words related to p5.js scattered on a maroon background. title: Random Poetry oneLineDescription: Generate a poem with words randomly selected from a bank. + +collectivelyAttributedSince: 2024 +remix: + - attributionLabel: malayvasa2001 + - revision-2023-klich --- Using the diff --git a/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx b/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx index d711139ae7..3584b57731 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,9 @@ featuredImageAlt: A point on the unit circle, together with the corresponding si title: Sine and Cosine oneLineDescription: Animate circular, back and forth, and wave motion. featured: true + +remix: + - revision-2023-dkessner --- This example demonstrates the diff --git a/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx b/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx index 3d95a8acf7..177ec3bf4a 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,9 @@ featuredImage: "../../../images/featured/09_Angles_And_Motion-01_Aim-thumbnail.p featuredImageAlt: Two eyes on a black background. title: Aim oneLineDescription: Rotate toward a point. + +remix: + - revision-2023-dkessner --- The diff --git a/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx b/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx index 346ad00be3..eabb5409b9 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,13 @@ featuredImage: "../../../images/featured/09_Angles_And_Motion-02_Triangle_Strip- featuredImageAlt: Rainbow ring made up of triangles whose vertices lie on two concentric circles. title: Triangle Strip oneLineDescription: Split a ring into triangles. + + +collectivelyAttributedSince: 2024 +remix: + - attributionURL: https://archive.p5js.org/examples/form-triangle-strip.html + attributionLabel: Ira Greenberg + - revision-2023-dkessner --- This example demonstrates how to create a shape 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..ed07420b87 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,12 @@ 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. + +collectivelyAttributedSince: 2024 +remix: + - attributionURL: https://github.com/prashantgupta24 + attributionLabel: Prashant Gupta + - revision-2023-calebfoss --- 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..db5e6771ba 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,9 @@ 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: + - revision-2023-calebfoss --- p5's diff --git a/src/content/examples/en/11_3D/02_Materials/description.mdx b/src/content/examples/en/11_3D/02_Materials/description.mdx index 955b3c4927..f75788adc3 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,9 @@ 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: + - revision-2023-calebfoss --- In 3D rendering, a material determines how a surface diff --git a/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx b/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx index d50a32aad6..b610b992cd 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,9 @@ 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: + - revision-2023-calebfoss --- Orbit control diff --git a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx index 2ef014217f..1710c88b98 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,9 @@ 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: + - revision-2023-calebfoss --- The diff --git a/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx b/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx index c550237b4b..9177ace321 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,9 @@ 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: + - revision-2023-klich --- The diff --git a/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx b/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx index d003b370b5..21f3768834 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,9 @@ 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: + - revision-2023-calebfoss --- Shaders can be applied to 2D/3D shapes as textures. diff --git a/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx b/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx index fb09587507..b5f163d074 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,12 @@ featuredImage: "../../../images/featured/13_Classes_And_Objects-00_Snowflakes-th featuredImageAlt: Snowflakes falling on a black background. title: Snowflakes oneLineDescription: Animate snowfall. + +collectivelyAttributedSince: 2024 +remix: + - attributionURL: https://archive.p5js.org/examples/simulate-snowflakes.html + attributionLabel: Aatish Bhatia + - revision-2023-dkessner --- 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..8bdddd057b 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,9 @@ 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: + - revision-2023-klich --- 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..e53f7c5561 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,9 @@ 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: + - revision-2023-calebfoss --- This example uses two custom diff --git a/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx b/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx index cf77347f0d..895c5c86a6 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,9 @@ 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: + - revision-2023-dkessner --- Demonstration of flocking behavior. diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx index 10626c5f3e..76c7040cee 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,12 @@ 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. + +collectivelyAttributedSince: 2024 +remix: + - attributionLabel: Processing example by Daniel Shiffman + attributionURL: https://processing.org/examples/loadsavejson.html + - revision-2023-calebfoss --- 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..c355e47d55 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,13 @@ 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. + + +collectivelyAttributedSince: 2024 +remix: + - attributionLabel: Processing example by Daniel Shiffman + attributionURL: https://processing.org/examples/loadsavetable.html + - revision-2023-calebfoss --- 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..ea9751a90e 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,15 @@ 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: + - attributionLabel: Processing example by Ira Greenberg + attributionURL: https://processing.org/examples/reflection1.html + remixLabel: Based on + - attributionLabel: David Blitz + remixLabel: Ported by + - revision-2023-dkessner +collectivelyAttributedSince: 2024 --- This example demonstrates a ball bouncing on a slanted diff --git a/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx b/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx index 00e4cf95ff..989487bd2c 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,12 @@ 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. + +collectivelyAttributedSince: 2024 +remix: + - attributionURL: https://archive.p5js.org/examples/simulate-soft-body.html + attributionLabel: Ira Greenberg + - revision-2023-dkessner --- 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..801753b8fc 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,17 @@ 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: + - attributionURL: http://natureofcode.com + attributionLabel: Dan Shiffman's "Nature of Code" + remixLabel: Inspired by + - revision-2023-dkessner --- 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/04_Game_Of_Life/description.mdx b/src/content/examples/en/15_Math_And_Physics/04_Game_Of_Life/description.mdx index b169fa18cf..d005e2abfb 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,12 @@ 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: + - attributionURL: http://natureofcode.com + attributionLabel: Dan Shiffman's "Nature of Code" + remixLabel: Inspired by + - revision-2023-calebfoss --- 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..185df64d2a 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,11 @@ 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: + - attributionURL: https://processing.org/examples/mandelbrot.html + attributionLabel: Dan Shiffman's example for Processing + - revision-2023-dkessner --- -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 0cab3aa885..cc33399274 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -78,12 +78,19 @@ const { Content } = await example.render(); {resolvedRemix?.map((item, i) => ( <> {i > 0 && " "} - {item.remixLabel && item.remixURL ? ( + {item.remixLabel ? ( <> - {item.remixLabel} + {item.remixURL ? ( + <> + {item.remixLabel} by + + ) : ( + item.remixLabel + )} + {item.attributionLabel && ( <> - {" "}by{" "} + {" "} {item.attributionURL ? ( {item.attributionLabel} ) : (