Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add attribution links to each example description #425

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add attribution links to each example description #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8702181
Add attribution links to each example description
calebfoss Jun 28, 2024
d88aea6
Add earlier contributors
calebfoss Jun 28, 2024
98113c8
Fix formatting and typo blocking build
calebfoss Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,6 @@ primitive functions
<a href="https://p5js.org/reference/#/p5/arc" target="_blank">arc()</a>,
<a href="https://p5js.org/reference/#/p5/line" target="_blank">line()</a>,
<a href="https://p5js.org/reference/#/p5/triangle" target="_blank">triangle()</a>,
and <a href="https://p5js.org/reference/#/p5/quad" target="_blank">quad()</a>.
and <a href="https://p5js.org/reference/#/p5/quad" target="_blank">quad()</a>.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/dkessner" target="_blank">Darren Kessner</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,6 @@ sets the color for the inside of shapes.
<a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noFill()</a>
turn off line color and inner color, respectively.

Colors can be represented in many different ways. This example demonstrates several options.
Colors can be represented in many different ways. This example demonstrates several options.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>
4 changes: 3 additions & 1 deletion ...content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,6 @@ and
*
This example also shows the use of
<a href="https://p5js.org/reference/#/p5/colorMode">colorMode</a> with HSB
(hue-saturation-brightness), so that the first variable sets the hue.
(hue-saturation-brightness), so that the first variable sets the hue.

Contributors: <a href="https://github.com/jareddonovan" target="_blank">Jared Donovan</a>, <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/dkessner" target="_blank">Darren Kessner</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion ...examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,6 @@ key presses to be registered.

Advancing a single frame is accomplished by calling the
<a href="https://p5js.org/reference/#/p5/redraw">redraw()</a>
function, which results in a single call to the draw() function.
function, which results in a single call to the draw() function.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/dkessner" target="_blank">Darren Kessner</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion ...xamples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,6 @@ In this example, the
<a href="https://p5js.org/reference/#/p5/accelerationY" target="_blank">accelerationY</a>,
and <a href="https://p5js.org/reference/#/p5/accelerationZ" target="_blank">accelerationZ</a>
values set the position and size of a circle.
This only works for mobile devices.
This only works for mobile devices.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,6 @@ no more than 300.
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR" target="_blank">||</a>
checks that at least one of the conditions is true. The circle reverses horizontal
speed when it reaches the left or right edge of the canvas because of the if statement
on line 75.
on line 75.

Contributors: <a href="https://github.com/suhascv" target="_blank">Suhas CV</a>, <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/03_Imported_Media/00_Words/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,6 @@ The <a href="https://p5js.org/reference/#/p5/text" target="_blank">text()</a> fu
You can change the font and text size using the <a href="https://p5js.org/reference/#/p5/loadFont" target="_blank">loadFont()</a>
and <a href="https://p5js.org/reference/#/p5/fontSize" target="_blank">fontSize()</a> functions.
The text can be aligned left, center, or right with the <a href="https://p5js.org/reference/#/p5/textAlign" target="_blank">textAlign()</a>
function, and, like shapes, text can be colored with <a href="https://p5js.org/reference/#/p5/fill" target="_blank">fill()</a>.
function, and, like shapes, text can be colored with <a href="https://p5js.org/reference/#/p5/fill" target="_blank">fill()</a>.

Contributors: <a href="https://github.com/geealbers" target="_blank">Greg Albers</a>, <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,6 @@ oneLineDescription: Paint from an image file onto the canvas.

Using the <a href="https://p5js.org/reference/#/p5/copy" target="_blank">copy()</a>
method, you can simulate coloring an image in by copying an image of the colored
image on top of the black-and-white image wherever the cursor is dragged.
image on top of the black-and-white image wherever the cursor is dragged.

Contributors: <a href="https://github.com/Acha0203" target="_blank">Acha</a>, <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/limzykenneth" target="_blank">Kenneth Lim</a>
18 changes: 12 additions & 6 deletions src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@ title: Alpha Mask
oneLineDescription: Use one image to cut out a section of another image.
---

Using the
<a href="https://p5js.org/reference/#/p5/mask" target="_blank">mask()</a>
method, you can create a mask for an image to specify the transparency in
different parts of the image. To run this example locally, you will need two
image files and a running
<a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.
Using the

<a href="https://p5js.org/reference/#/p5/mask" target="_blank">
mask()
</a>
method, you can create a mask for an image to specify the transparency in different
parts of the image. To run this example locally, you will need two image files and
a running
<a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>
.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>, <a href="https://github.com/Malayvasa" target="_blank">Malay Vasa</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,6 @@ alpha value of the image with the
function. Move the cursor left and right across the canvas to change the
image's position. To run this example
locally, you will need an image file and a running
<a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.
<a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,6 @@ moves to the right. More information on using media elements such as
audio players is on the
<a href="https://p5js.org/reference/#/p5.MediaElement" target="_blank">p5.MediaElement</a>
reference page. The audio file is a
<a href="https://freesound.org/people/josefpres/sounds/711156/" target="_blank">public domain piano loop by Josef Pres</a>.
<a href="https://freesound.org/people/josefpres/sounds/711156/" target="_blank">public domain piano loop by Josef Pres</a>.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/03_Imported_Media/05_Video/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,6 @@ functions, you can upload a video into the
<a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM" target="_blank">DOM</a>
without embedding the video within a canvas. For building a video embedded within the canvas element,
visit the
<a href="https://p5js.org/examples/dom-video-canvas.html" target="_blank">Video Canvas</a> example.
<a href="https://p5js.org/examples/dom-video-canvas.html" target="_blank">Video Canvas</a> example.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>, <a href="undefined" target="_blank">Aaron Welles</a>
33 changes: 22 additions & 11 deletions src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,26 @@ title: Video on Canvas
oneLineDescription: Display and stylize a video on the canvas.
---

Using the
<a href="https://p5js.org/reference/#/p5/createVideo" target="_blank">createVideo()</a>
and <a href="https://p5js.org/reference/#/p5/image" target="_blank">image()</a>
functions, you can upload a video into the canvas. Since the video capture is
passed through the
<a href="https://p5js.org/reference/#/p5/image" target="_blank">image()</a>
constructor, you can add filters to the video capture using the
<a href="https://p5js.org/reference/#/p5/filter" target="_blank">filter()</a>
method. To run this example locally, you will need a running
Using the

<a href="https://p5js.org/reference/#/p5/createVideo" target="_blank">
createVideo()
</a>
and <a href="https://p5js.org/reference/#/p5/image" target="_blank">
image()
</a>
functions, you can upload a video into the canvas. Since the video capture is passed
through the
<a href="https://p5js.org/reference/#/p5/image" target="_blank">
image()
</a>
constructor, you can add filters to the video capture using the
<a href="https://p5js.org/reference/#/p5/filter" target="_blank">
filter()
</a>
method. To run this example locally, you will need a running
<a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.
To build a video without embedding it within the canvas, visit the
<a href="https://p5js.org/examples/dom-video.html">Video</a> example.
To build a video without embedding it within the canvas, visit the
<a href="https://p5js.org/examples/dom-video.html">Video</a> example.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,6 @@ method. For different strategies for uploading, presenting, or styling videos,
visit the
<a href="https://p5js.org/examples/dom-video.html" target="_blank">Video</a> and
<a href="https://p5js.org/examples/dom-video-canvas.html" target="_blank">Video Canvas</a>
examples.
examples.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/macarena" target="_blank">Marco Macarena</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,6 @@ into the element. The uploaded file is created into a
class. You can use the
<a href="https://p5js.org/reference/#/p5.Element/drop" target="_blank">drop()</a>
callback to check the file type, then write conditional statements responding to
the file type.
the file type.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@ Using the
<a href="https://p5js.org/reference/#/p5/createInput" target="_blank">createInput()</a>,
and <a href="https://p5js.org/reference/#/p5.Element/createButton" target="_blank">createButton()</a>
functions, you can take a string of text submitted via text input and display
it on your canvas.
it on your canvas.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,6 @@ and <a href="https://p5js.org/reference/#/p5/createRadio" target="_blank">create
a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select" target="_blank">select</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" target="_blank">input</a>,
or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio" target="_blank">radio button</a> and update the DOM based on the information.



Contributors: <a href="https://github.com/suhascv" target="_blank">Suhas CV</a>, <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/katlich112358" target="_blank">Kathryn Lichlyter</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/05_Transformation/00_Translate/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,6 @@ functions save and restore the coordinate system and various
other drawing settings, such as the fill color.

Note that in this example, we draw the shapes (rectangle and
circle) each time in a different coordinate system.
circle) each time in a different coordinate system.

Contributors: <a href="https://github.com/digitalcoleman" target="_blank">Christopher Coleman</a>, <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/dkessner" target="_blank">Darren Kessner</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/05_Transformation/01_Rotate/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,6 @@ The
<a href="https://p5js.org/reference/#/p5/push">push()</a>
and
<a href="https://p5js.org/reference/#/p5/pop">pop()</a>
functions save and restore the coordinate system, respectively.
functions save and restore the coordinate system, respectively.

Contributors: <a href="https://github.com/digitalcoleman" target="_blank">Christopher Coleman</a>, <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/dkessner" target="_blank">Darren Kessner</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/05_Transformation/02_Scale/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,6 @@ and
functions save and restore the coordinate system, respectively.

In this example, a square size 200 is drawn at the origin, with
three different scaling factors.
three different scaling factors.

Contributors: <a href="https://github.com/digitalcoleman" target="_blank">Christopher Coleman</a>, <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/dkessner" target="_blank">Darren Kessner</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/06_Calculating_Values/00_Interpolate/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,6 @@ function linearly interpolates between two numbers.

Move the mouse across the screen and the symbol will follow.
Between drawing each frame of the animation, the ellipse moves part
of the distance from its current position toward the cursor.
of the distance from its current position toward the cursor.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/khamiltonuk" target="_blank">Kristian Hamilton</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/06_Calculating_Values/01_Map/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,6 @@ function converts a value from one range to another. In this example, map
converts the cursor's horizontal position from a range of 0-720 to 0-360.
The resulting value become the circle's hue. Map also converts the cursor's
vertical position from a range of 0-400 to 20-300. The resulting value
becomes the circle's diameter.
becomes the circle's diameter.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/keshavg2" target="_blank">Keshav Gupta</a>, <a href="https://github.com/berkeozgen08" target="_blank">Berke Özgen</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/06_Calculating_Values/02_Random/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@ This example demonstrates the use of the
function.

When the user presses the mouse button, the position and color
of the circle change randomly.
of the circle change randomly.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/dkessner" target="_blank">Darren Kessner</a>, <a href="https://github.com/lmccart" target="_blank">Lauren McCarthy</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,6 @@ This example draws a circle as the cursor's position but
keeps the circle within a rectangle. It does so by passing the
mouse's coordinates into the
<a href="https://p5js.org/reference/#/p5/constrain" target="_blank">constrain()</a>
function.
function.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>, <a href="https://github.com/AdilRabbani" target="_blank">adil rabbani</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,6 @@ functions. This example uses
<a href="https://p5js.org/reference/#/p5/map" target="_blank">map()</a>
to calculate the angle of the hands. It then uses
<a href="https://p5js.org/reference/#group-Transform" target="_blank">transformations</a>
to set their position.
to set their position.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/AnimeshSinha1309" target="_blank">Animesh Sinha</a>, <a href="https://github.com/AdilRabbani" target="_blank">adil rabbani</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,6 @@ function linearly interpolates between two numbers. The
function, demonstrated here, linearly interpolates between two colors.
In this example, the stripeCount variable adjusts how many horizontal
stripes appear. Setting the value to a higher number will look less
like individual stripes and more like a gradient.
like individual stripes and more like a gradient.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/Malayvasa" target="_blank">Malay Vasa</a>
4 changes: 3 additions & 1 deletion src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,6 @@ well as its hue. Each time the loop repeats, a circle is drawn
relative to the center of the canvas. The
<a href="https://p5js.org/reference/#/p5/push" target="_blank">push()</a>
and <a href="https://p5js.org/reference/#/p5/pop" target="_blank">pop()</a>
functions make these transformations affect only the individual circle.
functions make these transformations affect only the individual circle.

Contributors: <a href="https://github.com/calebfoss" target="_blank">Caleb Foss</a>, <a href="https://github.com/Malayvasa" target="_blank">Malay Vasa</a>
Loading
Loading