From 84192aecefa01977760006df23178d5aeb13fa3d Mon Sep 17 00:00:00 2001 From: ksen0 Date: Tue, 13 May 2025 12:33:48 +0200 Subject: [PATCH 01/16] 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 02/16] 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 03/16] 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 04/16] 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 05/16] 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 06/16] 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} ) : ( From 7b6d957d579395c488a1b9a3153b0f07df54bf23 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Fri, 18 Jul 2025 18:37:09 +0200 Subject: [PATCH 07/16] Updated attribution style --- src/content/examples/config.ts | 22 ++----------------- .../00_Shape_Primitives/description.mdx | 8 ++++++- 2 files changed, 9 insertions(+), 21 deletions(-) diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index 2d26a49d4c..accc66332a 100644 --- a/src/content/examples/config.ts +++ b/src/content/examples/config.ts @@ -57,23 +57,5 @@ type RemixEntry = { remixLabel: string; }; -export const remixLookup: { [key: string]: RemixEntry } = { - "revision-2023-calebfoss": { - attributionURL: "https://github.com/calebfoss", - attributionLabel: "Caleb Foss", - remixURL: "https://github.com/processing/p5.js-example", - remixLabel: "Revised in 2023", - }, - "revision-2023-dkessner": { - attributionURL: "https://github.com/dkessner", - attributionLabel: "Darren Kessner", - remixURL: "https://github.com/processing/p5.js-example", - remixLabel: "Revised in 2023", - }, - "revision-2023-klich": { - attributionURL: "https://www.klich.co/", - attributionLabel: "Kasey Lichtlyter", - remixURL: "https://github.com/processing/p5.js-example", - remixLabel: "Revised in 2023", - }, -}; + +// TODO instead of this emit a warning if there's multiple URLs used for the same person \ 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 874488eee3..0da709b7d7 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,7 +8,13 @@ relatedReference: - en/p5/ellipse remix: - - revision-2023-dkessner + - description: Revised in 2023 by + attribution: + - name: Darren Kessner + codeURL: + codeLabel: + - description: Based on + code URL: codeLabel: archived version --- This program demonstrates the use of the basic shape From 9b562c55a24f7195fb4896fe7a58a7da182d0db3 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Mon, 28 Jul 2025 11:19:08 +0200 Subject: [PATCH 08/16] Documented remix attribution schema --- docs/content_overview.md | 37 ++++++ src/content/examples/config.ts | 38 ++---- .../00_Shape_Primitives/description.mdx | 8 +- .../03_Conditions/description.mdx | 24 +++- src/layouts/ExampleLayout.astro | 114 +++++++++--------- 5 files changed, 128 insertions(+), 93 deletions(-) diff --git a/docs/content_overview.md b/docs/content_overview.md index 46cd9df8db..cce9758592 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -11,6 +11,43 @@ - Stored in `/src/content/examples/` - All translations are stored and edited directly in this repo under the corresponding language folder in `/src/content/examples/` +To add attribution, you can use the following block in the headers, listing in chronological order all arrtibutions. Below is the example from `examples/animation-and-variables-conditions/`: + +```yaml +remix: + - description: Inspired by + + attribution: + - name: Prof. WM Harris + URL: https://people.rit.edu/wmhics/ + + codeURL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js + codeLabel: pre-2023 code + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + codeURL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions + codeLabel: 2023 revision code + + - collectivelyAttributedSince: 2024 +``` + +This will result in a block that lists, in order, the initial inspiration; any revision or other remix; and the collective attribution statement that begins in 2024: "From 2024 onwards, edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0." + +A remix can be many things ([here is an example analysis of sketch remixing (PDF)](https://dl.acm.org/doi/pdf/10.1145/3563657.3595969)); the `description` will be by default "Remixed by", so a more specific description is recommended. + +If the `collectivelyAttributedSince` information is missing, then no year will be included, but the collective attribution statement will still show: "Edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0." + +Each item in the remix history must have an original codeURL and/or 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. + +If no `codeLabel` is given but there is a `codeURL`, then the default label "code" will be used - however, for accessibility, it is strongly recommended to use short, descriptive labels. + +--- + ## Tutorials - Stored in `/src/content/tutorials/` diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index accc66332a..b16752d660 100644 --- a/src/content/examples/config.ts +++ b/src/content/examples/config.ts @@ -9,11 +9,9 @@ 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(), @@ -21,19 +19,24 @@ export const examplesCollection = defineCollection({ featuredImage: image(), featuredImageAlt: z.string().optional().default(""), - // Start of collective attribution - collectivelyAttributedSince: z.number().optional(), - // Optional list of remixes to add to license remix: z .array( z.union([ z.string(), z.object({ - attributionURL: z.string().optional(), - attributionLabel: z.string().optional(), - remixURL: z.string().optional(), - remixLabel: z.string().optional(), + description: z.string().default("Remixed by"), + codeURL: z.string().optional(), + codeLabel: z.string().optional(), + attribution: z + .array( + z.object({ + name: z.string(), + URL: z.string().optional(), + }) + ) + .optional(), + collectivelyAttributedSince: z.number().optional(), }), ]) ) @@ -42,20 +45,3 @@ export const examplesCollection = defineCollection({ }), }); -/** - * The `remix` field lets you add remix attributions in two ways: - * 1. Full objects with all details. - * 2. Short string keys that refer to predefined entries in `remixLookup`. - * When rendering (in ExampleLayout.astro), these keys are replaced - * with their full details from `remixLookup`. - */ - -type RemixEntry = { - attributionURL: string; - attributionLabel: string; - remixURL: string; - remixLabel: string; -}; - - -// TODO instead of this emit a warning if there's multiple URLs used for the same person \ 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 0da709b7d7..e630b2e7ba 100644 --- a/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx +++ b/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx @@ -11,10 +11,10 @@ remix: - description: Revised in 2023 by attribution: - name: Darren Kessner - codeURL: - codeLabel: - - description: Based on - code URL: codeLabel: archived version + URL: https://github.com/dkessner + - collective: + since: 2024 + --- This program demonstrates the use of the basic shape 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 a12fac16dd..a979ad1f75 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 @@ -4,11 +4,27 @@ featuredImageAlt: A small black circle on a rainbow, lattice-shaped path, on top 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 + - description: Inspired by + + attribution: + - name: Prof. WM Harris + URL: https://people.rit.edu/wmhics/ + + codeURL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js + codeLabel: pre-2023 code + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + codeURL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions + codeLabel: 2023 revision code + + - collectivelyAttributedSince: 2024 + --- If and else statements allow a diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index cc33399274..2f114d1da4 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -2,7 +2,6 @@ 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, @@ -42,13 +41,17 @@ 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(); + +const collectivelyAttributedSince = example.data.remix?.reduce((acc, item) => { + if (typeof item === "string") return acc; + if (item.collectivelyAttributedSince) { + return item.collectivelyAttributedSince; + } + return acc; +}, null); + + ---

- {example.data.title}: + {example.data.title}:{" "} - {resolvedRemix?.map((item, i) => ( - <> - {i > 0 && " "} - {item.remixLabel ? ( - <> - {item.remixURL ? ( - <> - {item.remixLabel} by - - ) : ( - item.remixLabel - )} + {example.data.remix?.map((item, i) => { + if (typeof item === "string") return null; - {item.attributionLabel && ( + const parts = []; + + if (!item.collectivelyAttributedSince && (item.attribution || item.codeURL)) { + parts.push(<>{item.description}); + + if (item.attribution?.length) { + parts.push( + <> + {" "} + {item.attribution.map((a, j) => ( <> - {" "} - {item.attributionURL ? ( - {item.attributionLabel} - ) : ( - item.attributionLabel - )}. + {a.URL ? {a.name} : a.name} + {j < item.attribution.length - 1 ? ", " : !item.codeURL ? "." : ""} - )} - - ) : item.attributionLabel ? ( - <> - Remixed from{" "} - {item.attributionURL ? ( - {item.attributionLabel} - ) : ( - item.attributionLabel - )}. + ))} - ) : null} - - ))} - - {example.data.collectivelyAttributedSince ? ( - <> - From {example.data.collectivelyAttributedSince} onwards, edited and maintained by - - ) : ( - <> - Edited and maintained by - - )} - - p5.js Contributors - and the + ); + } + + if (item.codeURL) { + parts.push( + + ({item.codeLabel || "code"}). + + ); + } + } + + 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. + +

+ +
-

- -
- - -

{example.data.arialabel}

+ +

{example.data.arialabel}

From 08fc75873e3b807c452795e332af13ae774be806 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Mon, 28 Jul 2025 11:30:02 +0200 Subject: [PATCH 09/16] Remix attribution layout code cleanup --- src/layouts/ExampleLayout.astro | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 2f114d1da4..6565c26d96 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -43,14 +43,17 @@ const relatedReferences = const { Content } = await example.render(); -const collectivelyAttributedSince = example.data.remix?.reduce((acc, item) => { - if (typeof item === "string") return acc; - if (item.collectivelyAttributedSince) { - return item.collectivelyAttributedSince; - } - return acc; -}, null); - +// Extract the collective attribution year. If multiple provided, uses last shown. +const collectivelyAttributedSince = example.data.remix?.reduce( + (acc: number | null, item) => { + if (typeof item === "string") return acc; + if (item.collectivelyAttributedSince) { + return item.collectivelyAttributedSince; + } + return acc; + }, + null +); --- @@ -83,6 +86,9 @@ const collectivelyAttributedSince = example.data.remix?.reduce((acc, item) => { const parts = []; + // Each remix entry requires either attribution, or a codeURL; these have no defaults + // If a remix entry contains a collective attribution starting year, it is ignored here + if (!item.collectivelyAttributedSince && (item.attribution || item.codeURL)) { parts.push(<>{item.description}); @@ -93,7 +99,7 @@ const collectivelyAttributedSince = example.data.remix?.reduce((acc, item) => { {item.attribution.map((a, j) => ( <> {a.URL ? {a.name} : a.name} - {j < item.attribution.length - 1 ? ", " : !item.codeURL ? "." : ""} + {j < (item.attribution?.length ?? 0) - 1 ? ", " : !item.codeURL ? "." : ""} ))} @@ -109,7 +115,7 @@ const collectivelyAttributedSince = example.data.remix?.reduce((acc, item) => { } } - return {i > 0 && " "}{parts}; + return {i > 0 && " "}{parts}; })} {collectivelyAttributedSince ? ( From 9ec8a520bf2f089681d95fc592cefc3391cf9f3d Mon Sep 17 00:00:00 2001 From: ksen0 Date: Mon, 28 Jul 2025 14:10:47 +0200 Subject: [PATCH 10/16] Update examples metadata to use new schema --- docs/content_overview.md | 18 ++++--- src/content/examples/config.ts | 37 +++++++------ .../01_Color/description.mdx | 17 ++++++ .../00_Drawing_Lines/description.mdx | 14 ++++- .../01_Animation_With_Events/description.mdx | 7 ++- .../02_Mobile_Device_Movement/description.mdx | 7 ++- .../03_Conditions/description.mdx | 12 +++-- .../00_Words/description.mdx | 8 ++- .../01_Copy_Image_Data/description.mdx | 8 ++- .../02_Alpha_Mask/description.mdx | 10 +++- .../03_Image_Transparency/description.mdx | 8 ++- .../04_Create_Audio/description.mdx | 8 ++- .../05_Video/description.mdx | 8 ++- .../06_Video_Canvas/description.mdx | 8 ++- .../00_Image_Drop/description.mdx | 8 ++- .../01_Input_Button/description.mdx | 8 ++- .../02_DOM_Form_Elements/description.mdx | 14 +++-- .../01_Rotate/description.mdx | 8 ++- .../02_Scale/description.mdx | 7 ++- .../02_Random/description.mdx | 8 ++- .../03_Constrain/description.mdx | 6 ++- .../04_Clock/description.mdx | 7 ++- .../00_Color_Interpolation/description.mdx | 7 ++- .../01_Color_Wheel/description.mdx | 13 +++-- .../07_Repetition/02_Bezier/description.mdx | 7 ++- .../03_Kaleidoscope/description.mdx | 7 ++- .../05_Recursive_Tree/description.mdx | 22 ++++++-- .../00_Random_Poetry/description.mdx | 16 ++++-- .../00_Sine_Cosine/description.mdx | 7 ++- .../01_Aim/description.mdx | 6 ++- .../02_Triangle_Strip/description.mdx | 21 ++++++-- .../en/10_Games/02_Snake/description.mdx | 16 ++++-- .../en/11_3D/00_Geometries/description.mdx | 8 ++- .../en/11_3D/02_Materials/description.mdx | 6 ++- .../en/11_3D/03_Orbit_Control/description.mdx | 6 ++- .../11_3D/06_Framebuffer_Blur/description.mdx | 6 ++- .../00_Create_Graphics/description.mdx | 6 ++- .../02_Shader_As_A_Texture/description.mdx | 6 ++- .../00_Snowflakes/description.mdx | 16 ++++-- .../01_Shake_Ball_Bounce/description.mdx | 8 ++- .../02_Connected_Particles/description.mdx | 6 ++- .../03_Flocking/description.mdx | 8 ++- .../01_JSON/description.mdx | 19 +++++-- .../02_Table/description.mdx | 19 +++++-- .../description.mdx | 22 +++++--- .../01_Soft_Body/description.mdx | 19 +++++-- .../02_Forces/description.mdx | 16 ++++-- .../03_Smoke_Particle_System/description.mdx | 15 ++++-- .../04_Game_Of_Life/description.mdx | 17 ++++-- .../05_Mandelbrot/description.mdx | 15 ++++-- src/layouts/ExampleLayout.astro | 53 +++++++++++++------ 51 files changed, 492 insertions(+), 137 deletions(-) diff --git a/docs/content_overview.md b/docs/content_overview.md index cce9758592..25c66e074e 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -11,6 +11,8 @@ - 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 @@ -21,8 +23,9 @@ remix: - name: Prof. WM Harris URL: https://people.rit.edu/wmhics/ - codeURL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js - codeLabel: pre-2023 code + 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 @@ -30,8 +33,9 @@ remix: - name: Caleb Foss URL: https://github.com/calebfoss - codeURL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions - codeLabel: 2023 revision code + code: + - URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions + label: 2023 revision code - collectivelyAttributedSince: 2024 ``` @@ -40,11 +44,9 @@ This will result in a block that lists, in order, the initial inspiration; any r 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." - -Each item in the remix history must have an original codeURL and/or 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. +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. -If no `codeLabel` is given but there is a `codeURL`, then the default label "code" will be used - however, for accessibility, it is strongly recommended to use short, descriptive labels. +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. --- diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index b16752d660..e66aaa3fbf 100644 --- a/src/content/examples/config.ts +++ b/src/content/examples/config.ts @@ -22,23 +22,26 @@ export const examplesCollection = defineCollection({ // Optional list of remixes to add to license remix: z .array( - z.union([ - z.string(), - z.object({ - description: z.string().default("Remixed by"), - codeURL: z.string().optional(), - codeLabel: z.string().optional(), - attribution: z - .array( - z.object({ - name: z.string(), - URL: z.string().optional(), - }) - ) - .optional(), - collectivelyAttributedSince: z.number().optional(), - }), - ]) + 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/01_Color/description.mdx b/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx index b39219983a..bbab576db7 100644 --- a/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx +++ b/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx @@ -3,6 +3,23 @@ featuredImage: "../../../images/featured/01_Shapes_And_Color-01_Color-thumbnail. featuredImageAlt: A few basic shapes drawn in different colors over a blue background. title: Color oneLineDescription: Add color to your sketch. + + +remix: + - description: Created by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + - name: Darren Kessner + URL: https://github.com/dkessner + + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions + + - collectivelyAttributedSince: 2024 + --- This expands on the Shape Primitives example by adding diff --git a/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx b/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx index 7f231014fe..eb20bd4134 100644 --- a/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx @@ -5,7 +5,19 @@ title: Drawing Lines oneLineDescription: Draw with the mouse. remix: - - revision-2023-dkessner + + - 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 8c5d2ba6ca..e5bf9bb05f 100644 --- a/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx @@ -5,7 +5,12 @@ title: Animation with Events oneLineDescription: Pause and resume animation. remix: - - revision-2023-dkessner + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + --- This example demonstrates the use of diff --git a/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx b/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx index c3db5d4e5d..6f81306597 100644 --- a/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx @@ -7,7 +7,12 @@ featured: true remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- The deviceMoved() diff --git a/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx b/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx index a979ad1f75..a243d27a78 100644 --- a/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx @@ -11,17 +11,19 @@ remix: - name: Prof. WM Harris URL: https://people.rit.edu/wmhics/ - codeURL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js - codeLabel: pre-2023 code + 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: + attribution: - name: Caleb Foss URL: https://github.com/calebfoss - codeURL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions - codeLabel: 2023 revision code + code: + - URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions + label: 2023 revision code - collectivelyAttributedSince: 2024 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 558746e2d7..0c7ba9d6b5 100644 --- a/src/content/examples/en/03_Imported_Media/00_Words/description.mdx +++ b/src/content/examples/en/03_Imported_Media/00_Words/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: Three columns of the words “ichi,” “ni,” “san,” an title: Words oneLineDescription: Load fonts and draw text. + remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- The text() function is used for inserting text into the canvas. diff --git a/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx b/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx index c1e107e2b0..1b0e12d9a3 100644 --- a/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx +++ b/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: Black-and-white photograph of a parrot. A curvy line is drawn title: Copy Image Data oneLineDescription: Paint from an image file onto the canvas. + remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using the copy() diff --git a/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx b/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx index 822417fc00..54d80d4112 100644 --- a/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx +++ b/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx @@ -4,8 +4,16 @@ featuredImageAlt: Two leaf sprigs side by side on a white background. The right title: Alpha Mask oneLineDescription: Use one image to cut out a section of another image. + remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Malay Vasa + URL: https://github.com/Malayvasa + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using the diff --git a/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx b/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx index f146a2ff2f..2ecf025509 100644 --- a/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx +++ b/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: An astronaut on a planet as the background with a slightly tra title: Image Transparency oneLineDescription: Make an image translucent on the canvas. + remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- This program overlays one image over another by modifying the diff --git a/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx b/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx index 755a221177..ff1d15fb60 100644 --- a/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx +++ b/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx @@ -4,8 +4,14 @@ 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 + - description: Created by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + --- createAudio() diff --git a/src/content/examples/en/03_Imported_Media/05_Video/description.mdx b/src/content/examples/en/03_Imported_Media/05_Video/description.mdx index 990922690a..bc7797bf9a 100644 --- a/src/content/examples/en/03_Imported_Media/05_Video/description.mdx +++ b/src/content/examples/en/03_Imported_Media/05_Video/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: A screenshot of a video of a hand, with the pointer finger tou title: Video Player oneLineDescription: Create a player for a video file. + remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using the noCanvas() diff --git a/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx b/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx index 79b675439f..a15f2e07e4 100644 --- a/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx +++ b/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: Two overlaid screenshots of a video of a hand, with the pointe title: Video on Canvas oneLineDescription: Display and stylize a video on the canvas. + remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using the diff --git a/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx b/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx index 5c9ddaf445..223bd1bf40 100644 --- a/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx +++ b/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: A grey background with white text reading "Drag an image file title: Image Drop oneLineDescription: Display an image that the page visitor dragged and dropped. + remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- drop() diff --git a/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx b/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx index 8aaaef15f0..32a510ce8c 100644 --- a/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx +++ b/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx @@ -4,8 +4,14 @@ 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 + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using the diff --git a/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx b/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx index 95a36c6068..e9c381f414 100644 --- a/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx +++ b/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx @@ -6,9 +6,17 @@ 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 + + - attribution: + - URL: https://people.rit.edu/wmhics/ + name: Prof. WM Harris + + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- The Document Object Model, diff --git a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx index 2e33a07cba..2bfa813e62 100644 --- a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx +++ b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: Line segments rotated around center of canvas. title: Rotate oneLineDescription: Rotate the coordinate system. + remix: - - revision-2023-dkessner + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + --- The diff --git a/src/content/examples/en/05_Transformation/02_Scale/description.mdx b/src/content/examples/en/05_Transformation/02_Scale/description.mdx index 60e9940e75..9984d53af8 100644 --- a/src/content/examples/en/05_Transformation/02_Scale/description.mdx +++ b/src/content/examples/en/05_Transformation/02_Scale/description.mdx @@ -6,7 +6,12 @@ oneLineDescription: Modify the coordinate system scale. remix: - - revision-2023-dkessner + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + --- The diff --git a/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx b/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx index fe02650737..f1cb67c594 100644 --- a/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: A small purple circle on a black background. title: Random oneLineDescription: Get random numbers. + remix: - - revision-2023-dkessner + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + --- This example demonstrates the use of the diff --git a/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx b/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx index ca3aa8514a..3ef6c4c60f 100644 --- a/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx @@ -5,7 +5,11 @@ title: Constrain oneLineDescription: Keep a number within a range. remix: - - revision-2023-calebfoss + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- This example draws a circle as the cursor's position but diff --git a/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx b/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx index eaa8dfb51c..e45ed6438f 100644 --- a/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx @@ -5,7 +5,12 @@ title: Clock oneLineDescription: Get the current time. remix: - - revision-2023-calebfoss + - description: Created by + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- The current time can be read with the diff --git a/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx b/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx index f884ca4bf0..eff69c6ce2 100644 --- a/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx +++ b/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx @@ -5,7 +5,12 @@ title: Color Interpolation oneLineDescription: Fade between two colors. remix: - - revision-2023-calebfoss + - description: Created by + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- Interpolation diff --git a/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx b/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx index 5200fea8d9..d76b4811fc 100644 --- a/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx +++ b/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx @@ -4,10 +4,17 @@ featuredImageAlt: Small circles, each with a different color, arranged in a circ title: Color Wheel oneLineDescription: Create a visualization of the color spectrum. -collectivelyAttributedSince: 2024 + remix: - - attributionLabel: malayvasa2001 - - revision-2023-calebfoss + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + - name: Malay Vasa + URL: https://github.com/Malayvasa + + - collectivelyAttributedSince: 2024 --- This example illustrates the appearance of different diff --git a/src/content/examples/en/07_Repetition/02_Bezier/description.mdx b/src/content/examples/en/07_Repetition/02_Bezier/description.mdx index f422c462e0..27e07e95c9 100644 --- a/src/content/examples/en/07_Repetition/02_Bezier/description.mdx +++ b/src/content/examples/en/07_Repetition/02_Bezier/description.mdx @@ -5,7 +5,12 @@ title: Bezier oneLineDescription: Draw a set of curves. remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- bezier() diff --git a/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx b/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx index 673af1a32f..39ae462329 100644 --- a/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx +++ b/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx @@ -5,7 +5,12 @@ title: Kaleidoscope oneLineDescription: Draw mirrored designs with the mouse. remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- A kaleidoscope is an optical instrument with two or more diff --git a/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx b/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx index 761934d8ed..6ef6b6dfb5 100644 --- a/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx +++ b/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx @@ -5,12 +5,24 @@ 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 + - description: Inspired by + + attribution: + - name: Dan Shiffman + + code: + - URL: https://processing.org/examples/tree.html + label: pre-2023 example + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 + --- This is an example of rendering a simple tree-like structure via recursion. diff --git a/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx b/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx index db1b021fc2..84b2813ae5 100644 --- a/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx +++ b/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx @@ -4,10 +4,20 @@ featuredImageAlt: A random series of words related to p5.js scattered on a maroo title: Random Poetry oneLineDescription: Generate a poem with words randomly selected from a bank. -collectivelyAttributedSince: 2024 remix: - - attributionLabel: malayvasa2001 - - revision-2023-klich + - description: Created by + + attribution: + - name: Malay Vasa + URL: https://github.com/Malayvasa + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/08_Listing_Data_with_Arrays/00_Random_Poetry + + - collectivelyAttributedSince: 2024 --- Using the diff --git a/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx b/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx index 3584b57731..693343513d 100644 --- a/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx +++ b/src/content/examples/en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx @@ -6,7 +6,12 @@ oneLineDescription: Animate circular, back and forth, and wave motion. featured: true remix: - - revision-2023-dkessner + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + --- This example demonstrates the diff --git a/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx b/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx index 177ec3bf4a..6784123d83 100644 --- a/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx +++ b/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx @@ -5,7 +5,11 @@ title: Aim oneLineDescription: Rotate toward a point. remix: - - revision-2023-dkessner + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner --- The diff --git a/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx b/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx index eabb5409b9..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 @@ -5,11 +5,24 @@ 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 + + - description: Created by + attribution: + - name: Ira Greenberg + code: + - label: pre-2023 example + URL: https://archive.p5js.org/examples/form-triangle-strip.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + code: + - label: 2023 revision code + URL: https://github.com/processing/p5.js-example/tree/main/examples/09_Angles_And_Motion/02_Triangle_Strip + + - collectivelyAttributedSince: 2024 --- This example demonstrates how to create a shape diff --git a/src/content/examples/en/10_Games/02_Snake/description.mdx b/src/content/examples/en/10_Games/02_Snake/description.mdx index ed07420b87..a55c33b56f 100644 --- a/src/content/examples/en/10_Games/02_Snake/description.mdx +++ b/src/content/examples/en/10_Games/02_Snake/description.mdx @@ -4,11 +4,19 @@ featuredImageAlt: A narrow green L shape and a red square representing the 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 + - description: Created by + attribution: + - name: Prashant Gupta + URL: https://github.com/prashantgupta24 + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + - collectivelyAttributedSince: 2024 --- This is a reproduction of a type of arcade game called diff --git a/src/content/examples/en/11_3D/00_Geometries/description.mdx b/src/content/examples/en/11_3D/00_Geometries/description.mdx index db5e6771ba..332794ddf6 100644 --- a/src/content/examples/en/11_3D/00_Geometries/description.mdx +++ b/src/content/examples/en/11_3D/00_Geometries/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: Eight 3D shapes; a plane, box, cylinder, cone, torus, sphere, title: Geometries oneLineDescription: Draw 3D shapes, including a custom model. + remix: - - revision-2023-calebfoss + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + --- p5's diff --git a/src/content/examples/en/11_3D/02_Materials/description.mdx b/src/content/examples/en/11_3D/02_Materials/description.mdx index f75788adc3..cd766f7e48 100644 --- a/src/content/examples/en/11_3D/02_Materials/description.mdx +++ b/src/content/examples/en/11_3D/02_Materials/description.mdx @@ -5,7 +5,11 @@ title: Materials oneLineDescription: Change 3D objects' color, texture, and how they respond to light. remix: - - revision-2023-calebfoss + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- In 3D rendering, a material determines how a surface diff --git a/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx b/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx index b610b992cd..04dc675a4d 100644 --- a/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx +++ b/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx @@ -6,7 +6,11 @@ oneLineDescription: Control the camera with the mouse. featured: true remix: - - revision-2023-calebfoss + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- Orbit control diff --git a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx index 1710c88b98..d31c0710b9 100644 --- a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx +++ b/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx @@ -5,7 +5,11 @@ title: Framebuffer Blur oneLineDescription: Simulate a camera's depth of field. remix: - - revision-2023-calebfoss + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- The diff --git a/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx b/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx index 9177ace321..c90204406d 100644 --- a/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx +++ b/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx @@ -5,7 +5,11 @@ title: Create Graphics oneLineDescription: Draw imagery off-screen. remix: - - revision-2023-klich + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- The diff --git a/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx b/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx index 21f3768834..2b9909403a 100644 --- a/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx +++ b/src/content/examples/en/12_Advanced_Canvas_Rendering/02_Shader_As_A_Texture/description.mdx @@ -5,7 +5,11 @@ title: Shader as a Texture oneLineDescription: Generate a texture for a 3D shape using a shader. remix: - - revision-2023-calebfoss + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- Shaders can be applied to 2D/3D shapes as textures. diff --git a/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx b/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx index b5f163d074..f02cc35e95 100644 --- a/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx @@ -4,11 +4,19 @@ 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 + - description: Created by + attribution: + - name: Aatish Bhatia + URL: https://archive.p5js.org/examples/simulate-snowflakes.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 + --- This example demonstrates the use of a particle system diff --git a/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx b/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx index 8bdddd057b..0ad37ae121 100644 --- a/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx @@ -4,8 +4,14 @@ 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 + - description: Revised by + + attribution: + - name: Kasey Lichtlyter + URL: https://www.klich.co/ + --- Using a diff --git a/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx b/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx index e53f7c5561..c78abc9826 100644 --- a/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx @@ -5,7 +5,11 @@ title: Connected Particles oneLineDescription: Draw circles and connecting lines using the mouse. remix: - - revision-2023-calebfoss + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss --- This example uses two custom diff --git a/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx b/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx index 895c5c86a6..5483863ba9 100644 --- a/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/03_Flocking/description.mdx @@ -4,8 +4,14 @@ featuredImageAlt: A group of bird-like objects, represented by rainbow triangles title: Flocking oneLineDescription: Simulate bird flocking behavior. + remix: - - revision-2023-dkessner + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + --- Demonstration of flocking behavior. diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx index 76c7040cee..9b55836bdb 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx @@ -4,11 +4,22 @@ featuredImageAlt: Black outlines of circles on a white background. Text below th 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 + - description: Created by + attribution: + - name: Daniel Shiffman + code: + - label: pre-2023 Processing example + URL: https://processing.org/examples/loadsavejson.html + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + - collectivelyAttributedSince: 2024 --- JavaScript Object Notation, or JSON, diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx index c355e47d55..fbc42a5b0c 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx @@ -4,12 +4,21 @@ featuredImageAlt: Black outlines of circles on a white background. Text below th 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 + - description: Created by + attribution: + - name: Daniel Shiffman + code: + - label: pre-2023 Processing example + URL: https://processing.org/examples/loadsavetable.html + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + - collectivelyAttributedSince: 2024 --- Comma-Separated Values, or CSV, is a format for writing diff --git a/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx b/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx index ea9751a90e..0320f06aee 100644 --- a/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx @@ -4,14 +4,22 @@ featuredImageAlt: A small green circle hovering over a yellow tilted plane at th 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 + - description: Based on + attribution: + - name: Processing example by Ira Greenberg + URL: https://processing.org/examples/reflection1.html + - description: Ported by + attribution: + - name: David Blitz + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- This example demonstrates a ball bouncing on a slanted diff --git a/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx b/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx index 989487bd2c..74cf30d7e9 100644 --- a/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx @@ -4,11 +4,22 @@ 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 + - description: Created by + attribution: + - name: Ira Greenberg + code: + - label: pre-2023 example + URL: https://archive.p5js.org/examples/simulate-soft-body.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- Physics simulation of a soft body experiencing diff --git a/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx b/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx index 801753b8fc..571174c564 100644 --- a/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx @@ -5,10 +5,18 @@ 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 + - description: Inspired by + attribution: + - name: Dan Shiffman's "Nature of Code" + URL: http://natureofcode.com + + - description: Revised by + + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- Demonstration of multiple forces acting on bodies. 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 b7a9800888..f7f6a15277 100644 --- a/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx @@ -5,11 +5,18 @@ 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 - - revision-2023-dkessner + - description: Based on + attribution: + - name: Dan Shiffman's example + URL: https://natureofcode.com/book/chapter-4-particle-systems/ + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- 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 d005e2abfb..bdcb57938d 100644 --- a/src/content/examples/en/15_Math_And_Physics/04_Game_Of_Life/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/04_Game_Of_Life/description.mdx @@ -4,11 +4,20 @@ featuredImageAlt: Grid of squares made of black lines on a white background. Som 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 + - description: Inspired by + attribution: + - name: Dan Shiffman's "Nature of Code" + URL: http://natureofcode.com + + - description: Revised by + + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + + - collectivelyAttributedSince: 2024 --- The Game of Life is a cellular automaton created by diff --git a/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx b/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx index 185df64d2a..d1c3d9aaaa 100644 --- a/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/description.mdx @@ -4,10 +4,19 @@ 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 + - description: Based on + attribution: + - name: Dan Shiffman's example for Processing + URL: https://processing.org/examples/mandelbrot.html + + - description: Revised by + attribution: + - name: Darren Kessner + URL: https://github.com/dkessner + + - collectivelyAttributedSince: 2024 --- Colorful rendering of the Mandelbrot set. \ No newline at end of file diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 6565c26d96..8150a39f9d 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -46,7 +46,6 @@ 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 (typeof item === "string") return acc; if (item.collectivelyAttributedSince) { return item.collectivelyAttributedSince; } @@ -55,6 +54,11 @@ const collectivelyAttributedSince = example.data.remix?.reduce( 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.title}:{" "} {example.data.remix?.map((item, i) => { - if (typeof item === "string") return null; - const parts = []; - // Each remix entry requires either attribution, or a codeURL; these have no defaults + // 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 || item.codeURL)) { + if (!item.collectivelyAttributedSince && item.attribution) { parts.push(<>{item.description}); if (item.attribution?.length) { @@ -99,20 +103,16 @@ const collectivelyAttributedSince = example.data.remix?.reduce( {item.attribution.map((a, j) => ( <> {a.URL ? {a.name} : a.name} - {j < (item.attribution?.length ?? 0) - 1 ? ", " : !item.codeURL ? "." : ""} + { + item.attribution?.length + ? j < item.attribution.length - 1 ? ", " : "." + : "" + } ))} ); } - - if (item.codeURL) { - parts.push( - - ({item.codeLabel || "code"}). - - ); - } } return {i > 0 && " "}{parts}; @@ -131,7 +131,30 @@ const collectivelyAttributedSince = example.data.remix?.reduce( CC BY-NC-SA 4.0.

- + +

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

+ +
From c6969f44065c4b8027d1756c39f5ef875684a48e Mon Sep 17 00:00:00 2001 From: ksen0 Date: Mon, 1 Sep 2025 09:30:19 +0200 Subject: [PATCH 11/16] Examples attribution metadata --- docs/content_overview.md | 19 +++++++----------- .../00_Shape_Primitives/description.mdx | 15 +++++++++++--- .../01_Color/description.mdx | 6 +----- .../00_Drawing_Lines/description.mdx | 4 ---- .../01_Animation_With_Events/description.mdx | 7 +++++-- .../02_Mobile_Device_Movement/description.mdx | 8 +++++--- .../03_Conditions/description.mdx | 6 ------ .../00_Words/description.mdx | 7 +++++-- .../01_Copy_Image_Data/description.mdx | 7 +++++-- .../02_Alpha_Mask/description.mdx | 7 +++++-- .../03_Image_Transparency/description.mdx | 8 +++++--- .../04_Create_Audio/description.mdx | 6 +++--- .../05_Video/description.mdx | 7 +++++-- .../06_Video_Canvas/description.mdx | 7 +++++-- .../07_Video_Capture/description.mdx | 12 +++++++++++ .../00_Image_Drop/description.mdx | 8 +++++--- .../01_Input_Button/description.mdx | 8 +++++--- .../02_DOM_Form_Elements/description.mdx | 7 ++++++- .../00_Translate/description.mdx | 15 ++++++++++++++ .../01_Rotate/description.mdx | 7 ++++++- .../02_Scale/description.mdx | 6 ++++++ .../02_Random/description.mdx | 5 +++++ .../03_Constrain/description.mdx | 7 +++++++ .../04_Clock/description.mdx | 7 ++++++- .../00_Color_Interpolation/description.mdx | 7 ++++++- .../01_Color_Wheel/description.mdx | 7 ++++++- .../07_Repetition/02_Bezier/description.mdx | 5 +++++ .../03_Kaleidoscope/description.mdx | 5 +++++ .../en/07_Repetition/04_Noise/description.mdx | 13 ++++++++++++ .../05_Recursive_Tree/description.mdx | 4 ++++ .../00_Sine_Cosine/description.mdx | 6 +++++- .../01_Aim/description.mdx | 7 +++++++ .../00_Circle_Clicker/description.mdx | 14 +++++++++++++ .../en/10_Games/01_Ping_Pong/description.mdx | 11 ++++++++++ .../en/10_Games/02_Snake/description.mdx | 9 ++++++--- .../en/11_3D/00_Geometries/description.mdx | 7 +++++-- .../11_3D/01_Custom_Geometry/description.mdx | 9 +++++++++ .../en/11_3D/02_Materials/description.mdx | 6 +++++- .../en/11_3D/03_Orbit_Control/description.mdx | 6 +++++- .../en/11_3D/04_Filter_Shader/description.mdx | 9 +++++++++ .../description.mdx | 9 +++++++++ .../11_3D/06_Framebuffer_Blur/description.mdx | 6 +++++- .../00_Create_Graphics/description.mdx | 6 +++++- .../01_Multiple_Canvases/description.mdx | 11 ++++++++++ .../02_Shader_As_A_Texture/description.mdx | 6 +++++- .../00_Snowflakes/description.mdx | 8 ++++++-- .../01_Shake_Ball_Bounce/description.mdx | 7 +++++-- .../02_Connected_Particles/description.mdx | 6 +++++- .../03_Flocking/description.mdx | 7 +++++-- .../00_Local_Storage/description.mdx | 20 +++++++++++++++++++ .../01_JSON/description.mdx | 7 +++---- .../02_Table/description.mdx | 6 +++--- .../description.mdx | 6 +++--- .../01_Soft_Body/description.mdx | 8 ++++---- .../02_Forces/description.mdx | 6 +++--- .../03_Smoke_Particle_System/description.mdx | 5 +++-- .../04_Game_Of_Life/description.mdx | 7 +++---- .../05_Mandelbrot/description.mdx | 6 +++--- src/layouts/ExampleLayout.astro | 6 +++--- 59 files changed, 355 insertions(+), 109 deletions(-) diff --git a/docs/content_overview.md b/docs/content_overview.md index 25c66e074e..340677164d 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -18,24 +18,19 @@ To add attribution, you can use the following block in the headers, listing in c ```yaml remix: - description: Inspired by - attribution: - - name: Prof. WM Harris - URL: https://people.rit.edu/wmhics/ - + - name: Name Name + URL: a-valid-link 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 - + URL: a-valid-link - description: Revised by - attribution: - - name: Caleb Foss - URL: https://github.com/calebfoss - + - name: Name Name + URL: a-valid-link code: - - URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions - label: 2023 revision code + - label: 2023 revision code + URL: a-valid-link - collectivelyAttributedSince: 2024 ``` 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 e630b2e7ba..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 @@ -12,9 +12,18 @@ remix: attribution: - name: Darren Kessner URL: https://github.com/dkessner - - collective: - since: 2024 - + - 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 bbab576db7..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 @@ -4,20 +4,16 @@ featuredImageAlt: A few basic shapes drawn in different colors over a blue backg title: Color oneLineDescription: Add color to your sketch. - remix: - description: Created by - attribution: - name: Caleb Foss URL: https://github.com/calebfoss - name: Darren Kessner URL: https://github.com/dkessner - code: - label: 2023 code - URL: https://github.com/processing/p5.js-example/tree/main/examples/02_Animation_And_Variables/03_Conditions - + URL: https://github.com/processing/p5.js-example/tree/main/examples/01_Shapes_And_Color/01_Color - collectivelyAttributedSince: 2024 --- 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 eb20bd4134..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 @@ -5,19 +5,15 @@ 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 e5bf9bb05f..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 @@ -6,11 +6,14 @@ 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 6f81306597..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 @@ -5,14 +5,16 @@ 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 a243d27a78..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 @@ -6,25 +6,19 @@ oneLineDescription: Use if and else statements to make decisions while your sket 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 --- 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 0c7ba9d6b5..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 @@ -4,13 +4,16 @@ featuredImageAlt: Three columns of the words “ichi,” “ni,” “san,” an 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 --- 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 1b0e12d9a3..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 @@ -4,13 +4,16 @@ featuredImageAlt: Black-and-white photograph of a parrot. A curvy line is drawn 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 --- 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 54d80d4112..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 @@ -4,15 +4,18 @@ featuredImageAlt: Two leaf sprigs side by side on a white background. The right 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 --- 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 2ecf025509..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 @@ -4,14 +4,16 @@ featuredImageAlt: An astronaut on a planet as the background with a slightly tra 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 ff1d15fb60..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 @@ -4,14 +4,14 @@ 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 bc7797bf9a..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 @@ -4,13 +4,16 @@ featuredImageAlt: A screenshot of a video of a hand, with the pointer finger tou 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 --- 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 a15f2e07e4..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 @@ -4,13 +4,16 @@ featuredImageAlt: Two overlaid screenshots of a video of a hand, with the pointe 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 --- 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 223bd1bf40..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 @@ -4,14 +4,16 @@ featuredImageAlt: A grey background with white text reading "Drag an image file 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 32a510ce8c..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 @@ -4,14 +4,16 @@ 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 e9c381f414..e7be110f43 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 @@ -10,13 +10,18 @@ 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 --- 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..12bc451293 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,21 @@ 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 2bfa813e62..0eda94f5f8 100644 --- a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx +++ b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx @@ -11,7 +11,12 @@ remix: 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 9984d53af8..50229448a0 100644 --- a/src/content/examples/en/05_Transformation/02_Scale/description.mdx +++ b/src/content/examples/en/05_Transformation/02_Scale/description.mdx @@ -12,6 +12,12 @@ remix: - 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 f1cb67c594..2876c58c3a 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 @@ -12,6 +12,11 @@ remix: - 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 3ef6c4c60f..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 @@ -10,6 +10,13 @@ remix: 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 e45ed6438f..a979769e59 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 @@ -5,12 +5,17 @@ title: Clock oneLineDescription: Get the current time. remix: - - description: Created by - 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 eff69c6ce2..996583886a 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 @@ -5,12 +5,17 @@ title: Color Interpolation oneLineDescription: Fade between two colors. remix: - - description: Created by - 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 d76b4811fc..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 @@ -14,7 +14,12 @@ remix: - name: Malay Vasa URL: https://github.com/Malayvasa - - collectivelyAttributedSince: 2024 + 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 27e07e95c9..64e703e1df 100644 --- a/src/content/examples/en/07_Repetition/02_Bezier/description.mdx +++ b/src/content/examples/en/07_Repetition/02_Bezier/description.mdx @@ -11,6 +11,11 @@ remix: - 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 39ae462329..723bde5617 100644 --- a/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx +++ b/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx @@ -11,6 +11,11 @@ remix: - 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..6e2d57a7d8 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,19 @@ 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 6ef6b6dfb5..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 @@ -21,6 +21,10 @@ remix: - 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 --- 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 693343513d..7e1af4eb34 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 @@ -7,10 +7,14 @@ featured: true 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/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 --- 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 6784123d83..b848f62b24 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 @@ -10,6 +10,13 @@ remix: 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/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/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 a55c33b56f..eda338f3ce 100644 --- a/src/content/examples/en/10_Games/02_Snake/description.mdx +++ b/src/content/examples/en/10_Games/02_Snake/description.mdx @@ -9,13 +9,16 @@ remix: 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 --- 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 332794ddf6..bc576dbb20 100644 --- a/src/content/examples/en/11_3D/00_Geometries/description.mdx +++ b/src/content/examples/en/11_3D/00_Geometries/description.mdx @@ -4,13 +4,16 @@ featuredImageAlt: Eight 3D shapes; a plane, box, cylinder, cone, torus, sphere, 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 --- 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 cd766f7e48..521b6aa5d3 100644 --- a/src/content/examples/en/11_3D/02_Materials/description.mdx +++ b/src/content/examples/en/11_3D/02_Materials/description.mdx @@ -6,10 +6,14 @@ oneLineDescription: Change 3D objects' color, texture, and how they respond to l 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 04dc675a4d..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 @@ -7,10 +7,14 @@ 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 d31c0710b9..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 @@ -6,10 +6,14 @@ 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 c90204406d..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 @@ -6,10 +6,14 @@ 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 2b9909403a..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 @@ -6,10 +6,14 @@ 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 f02cc35e95..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 @@ -9,12 +9,16 @@ remix: 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 --- 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 0ad37ae121..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 @@ -7,11 +7,14 @@ 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 c78abc9826..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 @@ -6,10 +6,14 @@ 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 5483863ba9..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 @@ -4,13 +4,16 @@ featuredImageAlt: A group of bird-like objects, represented by rainbow triangles 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 --- 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 9b55836bdb..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 @@ -4,7 +4,6 @@ featuredImageAlt: Black outlines of circles on a white background. Text below th title: JSON oneLineDescription: Store data in JavaScript object notation. - remix: - description: Created by attribution: @@ -12,13 +11,13 @@ remix: 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 --- 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 fbc42a5b0c..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 @@ -11,13 +11,13 @@ remix: 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 --- 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 0320f06aee..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 @@ -4,7 +4,6 @@ featuredImageAlt: A small green circle hovering over a yellow tilted plane at th title: Non-Orthogonal Reflection oneLineDescription: Simulate a ball bouncing on a slanted surface. - remix: - description: Based on attribution: @@ -13,12 +12,13 @@ remix: - 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 --- 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 74cf30d7e9..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 @@ -5,20 +5,20 @@ title: Soft Body oneLineDescription: Simulate the physics of a soft body accelerating toward the mouse. - remix: - description: Created by attribution: - name: Ira Greenberg code: - label: pre-2023 example - URL: https://archive.p5js.org/examples/simulate-soft-body.html - + 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 --- 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 571174c564..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 @@ -9,13 +9,13 @@ remix: 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 --- 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 f7f6a15277..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 @@ -10,12 +10,13 @@ remix: 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 --- 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 bdcb57938d..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 @@ -4,19 +4,18 @@ featuredImageAlt: Grid of squares made of black lines on a white background. Som 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 --- 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 d1c3d9aaaa..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 @@ -4,18 +4,18 @@ 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 --- diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 8150a39f9d..93dd9242df 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -135,7 +135,7 @@ const remixHistoryHasCodeLinks = example.data.remix?.some(

{remixHistoryHasCodeLinks ? ( <> - View example history:{" "} + View the code history of these examples:{" "} {example.data.remix .map(item => item?.code) .flat() @@ -143,11 +143,11 @@ const remixHistoryHasCodeLinks = example.data.remix?.some( .map((codeItem, i, codeItemsList) => ( <> {codeItem?.label}{ - i < (codeItemsList?.length ?? 0) - 1 ? ", " : "... " + i < (codeItemsList?.length ?? 0) - 1 ? ", " : ". " } ))} - or contribute to the current website! + You can also contribute to the current website. ) : ( <> From 32f77f5d78b64a44b8e6ccb04619a8140ef0ba36 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Mon, 1 Sep 2025 13:40:48 +0200 Subject: [PATCH 12/16] Examples attribute metadata - additional fixes --- .../04_Input_Elements/02_DOM_Form_Elements/description.mdx | 5 +---- .../en/05_Transformation/00_Translate/description.mdx | 6 +----- .../examples/en/05_Transformation/01_Rotate/description.mdx | 3 --- .../examples/en/05_Transformation/02_Scale/description.mdx | 4 ---- .../en/06_Calculating_Values/02_Random/description.mdx | 3 --- .../en/06_Calculating_Values/04_Clock/description.mdx | 2 -- .../en/07_Repetition/00_Color_Interpolation/description.mdx | 2 -- .../examples/en/07_Repetition/04_Noise/description.mdx | 3 --- .../00_Random_Poetry/description.mdx | 6 ++---- .../en/09_Angles_And_Motion/00_Sine_Cosine/description.mdx | 2 ++ .../examples/en/09_Angles_And_Motion/01_Aim/description.mdx | 5 ++--- 11 files changed, 8 insertions(+), 33 deletions(-) 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 e7be110f43..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 @@ -4,24 +4,21 @@ featuredImageAlt: A survey on a yellow background, consisting of an input field, title: Form Elements oneLineDescription: Create a form and respond to the results. -collectivelyAttributedSince: 2024 remix: - - attribution: - URL: https://people.rit.edu/wmhics/ name: Prof. WM Harris 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 12bc451293..c1bf2675f9 100644 --- a/src/content/examples/en/05_Transformation/00_Translate/description.mdx +++ b/src/content/examples/en/05_Transformation/00_Translate/description.mdx @@ -4,20 +4,16 @@ 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 - + 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 0eda94f5f8..2d6bbcaab8 100644 --- a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx +++ b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx @@ -4,14 +4,11 @@ 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 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 50229448a0..2372e1383c 100644 --- a/src/content/examples/en/05_Transformation/02_Scale/description.mdx +++ b/src/content/examples/en/05_Transformation/02_Scale/description.mdx @@ -4,15 +4,11 @@ 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 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 2876c58c3a..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 @@ -4,14 +4,11 @@ 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 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 a979769e59..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 @@ -6,11 +6,9 @@ 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 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 996583886a..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 @@ -6,11 +6,9 @@ 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 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 6e2d57a7d8..77f5a07e31 100644 --- a/src/content/examples/en/07_Repetition/04_Noise/description.mdx +++ b/src/content/examples/en/07_Repetition/04_Noise/description.mdx @@ -6,15 +6,12 @@ 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 --- 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 84b2813ae5..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 @@ -8,15 +8,13 @@ remix: - description: Created by attribution: - - name: Malay Vasa - URL: https://github.com/Malayvasa - 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 --- 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 7e1af4eb34..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 @@ -10,6 +10,8 @@ remix: 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 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 b848f62b24..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 @@ -6,15 +6,14 @@ 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 --- From b2b2d1f30ef41b18459c74e4eb203fa775f6ad77 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Tue, 28 Oct 2025 22:10:49 +0100 Subject: [PATCH 13/16] Detailed attribution history can be localized --- docs/content_overview.md | 2 ++ src/content/ui/en.yaml | 9 ++++++++- src/layouts/ExampleLayout.astro | 10 +++++----- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/docs/content_overview.md b/docs/content_overview.md index 340677164d..4b510c413b 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -43,6 +43,8 @@ If the `collectivelyAttributedSince` information is missing, then no year will b Each item in the remix history must have an at least one person listed in the attribution section. When multiple people are listed, their names will be shown in that order. For people, URLs are optional but recommended. +These attribution histories **do not need to be individually translated** for each sketch. It is enough to make sure that the descriptions (like 'Created by' and so on) appear in the different language strings in `src/content/ui/`. Then, these will be used for all examples. See [Localization](./localization.md) for more info. + --- ## Tutorials diff --git a/src/content/ui/en.yaml b/src/content/ui/en.yaml index 2886038a39..d86b73fbb2 100644 --- a/src/content/ui/en.yaml +++ b/src/content/ui/en.yaml @@ -2,7 +2,7 @@ Home: Home Menu: Menu Reference: Reference Tutorials: Tutorials -Examples: Examples +Examples: Examplessdsd Contribute: Contribute Community: Community About: About @@ -195,3 +195,10 @@ LibrariesLayout: experimentalApi: title: This API is experimental description: Its behavior may change in a future version of p5.js. +Remixed by: Remixed by +Revised in 2023 by: Revised in 2023 by +Revised by: Revised by +Created by: Created by +and: and +Edited and maintained by: Edited and maintained by +From 2024 onwards, edited and maintained by: From 2024 onwards, edited and maintained by diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 93dd9242df..323c1d4886 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -94,7 +94,7 @@ const remixHistoryHasCodeLinks = example.data.remix?.some( // If a remix entry contains a collective attribution starting year, it is ignored here if (!item.collectivelyAttributedSince && item.attribution) { - parts.push(<>{item.description}); + parts.push(<>{t(item.description)}); if (item.attribution?.length) { parts.push( @@ -102,7 +102,7 @@ const remixHistoryHasCodeLinks = example.data.remix?.some( {" "} {item.attribution.map((a, j) => ( <> - {a.URL ? {a.name} : a.name} + {a.URL ? {t(a.name)} : t(a.name)} { item.attribution?.length ? j < item.attribution.length - 1 ? ", " : "." @@ -119,13 +119,13 @@ const remixHistoryHasCodeLinks = example.data.remix?.some( })} {collectivelyAttributedSince ? ( - <>From {collectivelyAttributedSince} onwards, edited and maintained by{" "} + <>{t(`From ${collectivelyAttributedSince} onwards, edited and maintained by`)}{" "} ) : ( - <>Edited and maintained by{" "} + <>{t("Edited and maintained by")}{" "} )} p5.js Contributors{" "} - and the{" "} + {t("and")}{" "} Processing Foundation. Licensed under{" "} CC BY-NC-SA 4.0. From b45f8a7d4547797e52e33938617e8a86f9e0d6a2 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Tue, 28 Oct 2025 22:36:56 +0100 Subject: [PATCH 14/16] Typo fixes of attribution history metadata --- .../03_Conditions/description.mdx | 4 ++-- .../02_DOM_Form_Elements/description.mdx | 3 ++- .../03_Constrain/description.mdx | 1 - .../05_Recursive_Tree/description.mdx | 14 ++++++-------- .../description.mdx | 2 +- .../00_Local_Storage/description.mdx | 2 +- src/content/ui/en.yaml | 6 +++++- src/layouts/ExampleLayout.astro | 5 +++-- 8 files changed, 20 insertions(+), 17 deletions(-) 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 a70222b49f..02d9882cdd 100644 --- a/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx @@ -7,8 +7,8 @@ oneLineDescription: Use if and else statements to make decisions while your sket remix: - description: Inspired by attribution: - - name: Prof. WM Harris - URL: https://people.rit.edu/wmhics/ + - name: the Conditional Shapes Example by Prof. WM Harris + URL: https://archive.p5js.org/examples/control-conditional-shapes.html code: - URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/04_Control/05_Logical_Operators_2.js label: pre-2023 code 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 41f121d682..c6e2f57dc3 100644 --- a/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx +++ b/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx @@ -5,7 +5,8 @@ title: Form Elements oneLineDescription: Create a form and respond to the results. remix: - - attribution: + - description: Created by + attribution: - URL: https://people.rit.edu/wmhics/ name: Prof. WM Harris code: 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 714b6b6a69..590637d989 100644 --- a/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx @@ -11,7 +11,6 @@ remix: - 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 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 0164fd3086..7e26c4955a 100644 --- a/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx +++ b/src/content/examples/en/07_Repetition/05_Recursive_Tree/description.mdx @@ -7,20 +7,18 @@ oneLineDescription: Draw a tree using a function that calls itself. remix: - - description: Inspired by - + - description: Based on attribution: - - name: Dan Shiffman - + - name: Dan Shiffman's Recursive Tree Example + URL: https://processing.org/examples/tree.html code: - - URL: https://processing.org/examples/tree.html - label: pre-2023 example + - label: pre-2023 example + URL: https://processing.org/examples/tree.html - description: Revised by attribution: - name: Darren Kessner URL: https://github.com/dkessner - code: - label: 2023 code URL: https://github.com/processing/p5.js-example/tree/main/examples/07_Repetition/05_Recursive_Tree @@ -32,4 +30,4 @@ remix: This is an example of rendering a simple tree-like structure via recursion. The branching angle is calculated as a function of the horizontal mouse location. Move the mouse left and right to change the angle. -Based on Daniel Shiffman's Recursive Tree Example for Processing. +] diff --git a/src/content/examples/en/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 72cff3dd32..bf4685b002 100644 --- a/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx +++ b/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx @@ -5,7 +5,7 @@ title: Adjusting Positions with a Shader oneLineDescription: Use a shader to adjust shape vertices. remix: - - description: Creared by + - description: Created by attribution: - name: Dave Pagurek URL: https://www.davepagurek.com/ 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 70ed8f11a2..2f782e6cee 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx @@ -15,7 +15,7 @@ remix: 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 + - name: Daniel Shiffman's examples code: - label: pre-2023 JSON example URL: https://processing.org/examples/loadsavejson.html diff --git a/src/content/ui/en.yaml b/src/content/ui/en.yaml index d86b73fbb2..46051585fd 100644 --- a/src/content/ui/en.yaml +++ b/src/content/ui/en.yaml @@ -2,7 +2,7 @@ Home: Home Menu: Menu Reference: Reference Tutorials: Tutorials -Examples: Examplessdsd +Examples: Examples Contribute: Contribute Community: Community About: About @@ -198,7 +198,11 @@ experimentalApi: Remixed by: Remixed by Revised in 2023 by: Revised in 2023 by Revised by: Revised by +Based on: Based on Created by: Created by and: and Edited and maintained by: Edited and maintained by From 2024 onwards, edited and maintained by: From 2024 onwards, edited and maintained by +You can find the code history of these examples here: You can find the code history of these examples here +You can suggest improvements by: You can suggest improvements by +contributing to the current website: contributing to the current website diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 1ec6de849e..5546500089 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -145,7 +145,7 @@ const { showBanner, englishUrl } = checkTranslationBanner(

{remixHistoryHasCodeLinks ? ( <> - View the code history of these examples:{" "} + {t("You can find the code history of these examples here")}{": "} {example.data.remix .map(item => item?.code) .flat() @@ -157,7 +157,8 @@ const { showBanner, englishUrl } = checkTranslationBanner( } ))} - You can also contribute to the current website. + {t("You can suggest improvements by")}{" "} + {t("contributing to the current website")}! ) : ( <> From 2f079887e2980b2cc6639a54b45f6b10939cb76f Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 30 Oct 2025 15:21:40 +0100 Subject: [PATCH 15/16] Update translations and documentation for attribution --- docs/content_overview.md | 10 +++++--- src/content/examples/config.ts | 6 ++++- .../04_Create_Audio/description.mdx | 1 + src/content/ui/en.yaml | 23 ++++++++++--------- src/layouts/ExampleLayout.astro | 14 +++++------ 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/docs/content_overview.md b/docs/content_overview.md index 4b510c413b..c966e2fc77 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -39,11 +39,15 @@ This will result in a block that lists, in order, the initial inspiration; any r 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. -Each item in the remix history must have an at least one person listed in the attribution section. When multiple people are listed, their names will be shown in that order. For people, URLs are optional but recommended. +These attribution histories **do not need to be individually translated** for each sketch. It is enough to make sure that the descriptions (like 'Created by' and so on) appear in the different language strings in `src/content/ui/`. Then, these will be used for all examples. See [Localization](./localization.md) for more info. If you use special descriptions or names in the attribution, these do need either new strings, or localization in the respective example translations (in `src/content/examples/{language}`). -These attribution histories **do not need to be individually translated** for each sketch. It is enough to make sure that the descriptions (like 'Created by' and so on) appear in the different language strings in `src/content/ui/`. Then, these will be used for all examples. See [Localization](./localization.md) for more info. +If the `collectivelyAttributedSince` information is missing, then no year will be included, but the collective attribution statement will still show: "Edited and maintained by p5.js Contributors and the Processing Foundation. Licensed under CC BY-NC-SA 4.0." You'll see this in examples that were part of a major revision project with specific attribution, but have collective authorship before and after. Note that the collective attribution message either does not specify a year, + or specifies 2024. To add a new possible value, update: + +1. `content/examples/config.ts` to include new permitted values; +2. and `content/ui/{language}.yaml` strings for attribution to include the text --- diff --git a/src/content/examples/config.ts b/src/content/examples/config.ts index e66aaa3fbf..fa6ac99510 100644 --- a/src/content/examples/config.ts +++ b/src/content/examples/config.ts @@ -40,7 +40,11 @@ export const examplesCollection = defineCollection({ }) ) .optional(), - collectivelyAttributedSince: z.number().optional(), + // Collective attribution message either does not specify a year, + // or specifies 2024. To add a new possible value, update: + // 1) content/examples/config.ts to include new permitted values; + // 2) and content/ui/*.yaml strings for attribution to include the text + collectivelyAttributedSince: z.literal(2024).optional(), }) ) .optional() 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 46ad0dc2bc..c42f1fb134 100644 --- a/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx +++ b/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx @@ -12,6 +12,7 @@ remix: 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/ui/en.yaml b/src/content/ui/en.yaml index 46051585fd..059b988619 100644 --- a/src/content/ui/en.yaml +++ b/src/content/ui/en.yaml @@ -195,14 +195,15 @@ LibrariesLayout: experimentalApi: title: This API is experimental description: Its behavior may change in a future version of p5.js. -Remixed by: Remixed by -Revised in 2023 by: Revised in 2023 by -Revised by: Revised by -Based on: Based on -Created by: Created by -and: and -Edited and maintained by: Edited and maintained by -From 2024 onwards, edited and maintained by: From 2024 onwards, edited and maintained by -You can find the code history of these examples here: You can find the code history of these examples here -You can suggest improvements by: You can suggest improvements by -contributing to the current website: contributing to the current website +attribution: + Remixed by: Remixed by + Revised in 2023 by: Revised in 2023 by + Revised by: Revised by + Based on: Based on + Created by: Created by + and: and + Edited and maintained by: Edited and maintained by + From 2024 onwards, edited and maintained by: From 2024 onwards, edited and maintained by + You can find the code history of these examples here: You can find the code history of these examples here + You can suggest improvements by: You can suggest improvements by + contributing to the current website: contributing to the current website diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 5546500089..a3db402dc4 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -104,7 +104,7 @@ const { showBanner, englishUrl } = checkTranslationBanner( // If a remix entry contains a collective attribution starting year, it is ignored here if (!item.collectivelyAttributedSince && item.attribution) { - parts.push(<>{t(item.description)}); + parts.push(<>{t("attribution", item.description)}); if (item.attribution?.length) { parts.push( @@ -129,13 +129,13 @@ const { showBanner, englishUrl } = checkTranslationBanner( })} {collectivelyAttributedSince ? ( - <>{t(`From ${collectivelyAttributedSince} onwards, edited and maintained by`)}{" "} + <>{t("attribution", `From ${collectivelyAttributedSince} onwards, edited and maintained by`)}{" "} ) : ( - <>{t("Edited and maintained by")}{" "} + <>{t("attribution", "Edited and maintained by")}{" "} )} p5.js Contributors{" "} - {t("and")}{" "} + {t("attribution", "and")}{" "} Processing Foundation. Licensed under{" "} CC BY-NC-SA 4.0. @@ -145,7 +145,7 @@ const { showBanner, englishUrl } = checkTranslationBanner(

{remixHistoryHasCodeLinks ? ( <> - {t("You can find the code history of these examples here")}{": "} + {t("attribution", "You can find the code history of these examples here")}{": "} {example.data.remix .map(item => item?.code) .flat() @@ -157,8 +157,8 @@ const { showBanner, englishUrl } = checkTranslationBanner( } ))} - {t("You can suggest improvements by")}{" "} - {t("contributing to the current website")}! + {t("attribution", "You can suggest improvements by")}{" "} + {t("attribution", "contributing to the current website")}! ) : ( <> From 0a907b65ba155db68c22e3ee594a9cdf960338de Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 30 Oct 2025 15:30:52 +0100 Subject: [PATCH 16/16] Added inpired by pattern --- docs/content_overview.md | 29 ++++++++++++++++++++++++++++- src/content/ui/en.yaml | 1 + 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/docs/content_overview.md b/docs/content_overview.md index c966e2fc77..fff5c2a6ac 100644 --- a/docs/content_overview.md +++ b/docs/content_overview.md @@ -13,7 +13,7 @@ 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/`: +To add attribution, you can use the following block in the headers, listing in **chronological** order all attribution. Below is the example from `examples/animation-and-variables-conditions/`: ```yaml remix: @@ -39,6 +39,33 @@ This will result in a block that lists, in order, the initial inspiration; any r A remix can be many things ([here is an example analysis of sketch remixing (PDF)](https://dl.acm.org/doi/pdf/10.1145/3563657.3595969)); the `description` will be by default "Remixed by", so a more specific description is recommended. +To credit individuals, you can use the following descriptions, with `attribution.name` including the name of the author or contributor, with an optional link. + +* Remixed by +* Revised by +* Created by + +```yaml +remix: + - description: Created by + attribution: + - name: Someone + URL: ... +``` + +To credit a specific work that was (1) not created by the p5.js contributors since 2024 and (2) is under a compatible license, you can use the following descriptions. Here, `attribution.name` should include both the person and a specific work of theirs that was the inspiration. + +* Inspired by +* Based on + +```yaml +remix: + - description: Inspired by + attribution: + - name: Someone's prior work + URL: ... +``` + Each item in the remix history must have an at least one person listed in the attribution section. When multiple people are listed, their names will be shown **in that order**. For people, URLs are optional but recommended. These attribution histories **do not need to be individually translated** for each sketch. It is enough to make sure that the descriptions (like 'Created by' and so on) appear in the different language strings in `src/content/ui/`. Then, these will be used for all examples. See [Localization](./localization.md) for more info. If you use special descriptions or names in the attribution, these do need either new strings, or localization in the respective example translations (in `src/content/examples/{language}`). diff --git a/src/content/ui/en.yaml b/src/content/ui/en.yaml index 059b988619..5d09de5fd1 100644 --- a/src/content/ui/en.yaml +++ b/src/content/ui/en.yaml @@ -199,6 +199,7 @@ attribution: Remixed by: Remixed by Revised in 2023 by: Revised in 2023 by Revised by: Revised by + Inspired by: Inspired by Based on: Based on Created by: Created by and: and