Merge branch 'main' into main

src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx

@@ -10,11 +10,11 @@ relatedReference:
 
 This program demonstrates the use of the basic shape
 primitive functions
-<a href="https://p5js.org/reference/#/p5/square" target="_blank">square()</a>,
-<a href="https://p5js.org/reference/#/p5/rect" target="_blank">rect()</a>,
-<a href="https://p5js.org/reference/#/p5/ellipse" target="_blank">ellipse()</a>,
-<a href="https://p5js.org/reference/#/p5/circle" target="_blank">circle()</a>,
-<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>.
+<a href="https://p5js.org/reference/p5/square" target="_blank">square()</a>,
+<a href="https://p5js.org/reference/p5/rect" target="_blank">rect()</a>,
+<a href="https://p5js.org/reference/p5/ellipse" target="_blank">ellipse()</a>,
+<a href="https://p5js.org/reference/p5/circle" target="_blank">circle()</a>,
+<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>.

src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx

@@ -7,14 +7,14 @@ oneLineDescription: Add color to your sketch.
 
 This expands on the Shape Primitives example by adding
 color.
-<a href="https://p5js.org/reference/#/p5/background" target="_blank">background()</a>
+<a href="https://p5js.org/reference/p5/background" target="_blank">background()</a>
 fills the canvas with one color,
-<a href="https://p5js.org/reference/#/p5/stroke" target="_blank">stroke()</a>
+<a href="https://p5js.org/reference/p5/stroke" target="_blank">stroke()</a>
 sets the color for drawing lines, and
-<a href="https://p5js.org/reference/#/p5/fill" target="_blank">fill()</a>
+<a href="https://p5js.org/reference/p5/fill" target="_blank">fill()</a>
 sets the color for the inside of shapes.
-<a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noStroke()</a> and
-<a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noFill()</a>
+<a href="https://p5js.org/reference/p5/noFill" target="_blank">noStroke()</a> and
+<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.

src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx

@@ -9,15 +9,15 @@ Click and drag the mouse to draw a line.
 
 This example demonstrates the use of several built-in
 variables.
-<a href="https://p5js.org/reference/#/p5/mouseX">mouseX</a>
+<a href="https://p5js.org/reference/p5/mouseX">mouseX</a>
 and
-<a href="https://p5js.org/reference/#/p5/mouseY">mouseY</a>
+<a href="https://p5js.org/reference/p5/mouseY">mouseY</a>
 store the current mouse position, while the
 previous mouse position is represented by
-<a href="https://p5js.org/reference/#/p5/pmouseX">pmouseX</a>
+<a href="https://p5js.org/reference/p5/pmouseX">pmouseX</a>
 and
-<a href="https://p5js.org/reference/#/p5/pmouseY">pmouseY</a>.
+<a href="https://p5js.org/reference/p5/pmouseY">pmouseY</a>.
  *
 This example also shows the use of
-<a href="https://p5js.org/reference/#/p5/colorMode">colorMode</a> with HSB
+<a href="https://p5js.org/reference/p5/colorMode">colorMode</a> with HSB
 (hue-saturation-brightness), so that the first variable sets the hue.

src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx

@@ -6,9 +6,9 @@ oneLineDescription: Pause and resume animation.
 ---
 
 This example demonstrates the use of
-<a href="https://p5js.org/reference/#/p5/loop">loop()</a>
+<a href="https://p5js.org/reference/p5/loop">loop()</a>
 and
-<a href="https://p5js.org/reference/#/p5/noLoop">noLoop()</a>
+<a href="https://p5js.org/reference/p5/noLoop">noLoop()</a>
 to pause and resume the animation.
 
 Clicking the mouse toggles the animation loop. If the animation
@@ -17,5 +17,5 @@ Note: the user must click to set the focus on the canvas for
 key presses to be registered.
 
 Advancing a single frame is accomplished by calling the
-<a href="https://p5js.org/reference/#/p5/redraw">redraw()</a>
+<a href="https://p5js.org/reference/p5/redraw">redraw()</a>
 function, which results in a single call to the draw() function.

src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx

@@ -6,11 +6,11 @@ oneLineDescription: Animate based on device motion.
 featured: true
 ---
 
-The <a href="https://p5js.org/reference/#/p5/deviceMoved" target="_blank">deviceMoved()</a>
+The <a href="https://p5js.org/reference/p5/deviceMoved" target="_blank">deviceMoved()</a>
 function runs when the mobile device displaying the sketch moves.
 In this example, the
-<a href="https://p5js.org/reference/#/p5/accelerationX" target="_blank">accelerationX</a>,
-<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>
+<a href="https://p5js.org/reference/p5/accelerationX" target="_blank">accelerationX</a>,
+<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.

src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx

@@ -10,7 +10,7 @@ If and else statements allow a
 to run only when a certain condition is true. This example only
 animates when the mouse is held down. This is because of the if
 statement on line 59. You can read more about if and else statements
-<a href="https://p5js.org/reference/#/p5/if-else">in the p5 reference</a>
+<a href="https://p5js.org/reference/p5/if">in the p5 reference</a>
 or <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals" target="_blank">on MDN</a>.
 
 Comparison operators help to form conditions by comparing two

src/content/examples/en/03_Imported_Media/00_Words/description.mdx

@@ -5,8 +5,8 @@ title: Words
 oneLineDescription: Load fonts and draw text.
 ---
 
-The <a href="https://p5js.org/reference/#/p5/text" target="_blank">text()</a> function is used for inserting text into the canvas.
-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>.
+The <a href="https://p5js.org/reference/p5/text" target="_blank">text()</a> function is used for inserting text into the canvas.
+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>.

src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx

@@ -5,6 +5,6 @@ title: Copy Image Data
 oneLineDescription: Paint from an image file onto the canvas.
 ---
 
-Using the <a href="https://p5js.org/reference/#/p5/copy" target="_blank">copy()</a> 
+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.

src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx

@@ -6,7 +6,7 @@ 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> 
+<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 

src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx

@@ -7,7 +7,7 @@ oneLineDescription: Make an image translucent on the canvas.
 
 This program overlays one image over another by modifying the
 alpha value of the image with the
-<a href="https://p5js.org/reference/#/p5/tint" target="_blank">tint()</a>
+<a href="https://p5js.org/reference/p5/tint" target="_blank">tint()</a>
 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

src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx

@@ -5,12 +5,12 @@ title: Audio Player
 oneLineDescription: Create a player for an audio file.
 ---
 
-<a href="https://p5js.org/reference/#/p5/createAudio" target="_blank">createAudio()</a>
+<a href="https://p5js.org/reference/p5/createAudio" target="_blank">createAudio()</a>
 creates an audio player. This example displays the player's controls
 and adjusts its speed. The playback speed is normal when the mouse
 is on the left edge of the window, and it gets faster as the mouse
 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>
+<a href="https://p5js.org/reference/p5/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>.

src/content/examples/en/03_Imported_Media/05_Video/description.mdx

@@ -5,8 +5,8 @@ title: Video Player
 oneLineDescription: Create a player for a video file.
 ---
 
-Using the <a href="https://p5js.org/reference/#/p5/noCanvas" target="_blank">noCanvas()</a>
-and <a href="https://p5js.org/reference/#/p5/createVideo" target="_blank">createVideo()</a> 
+Using the <a href="https://p5js.org/reference/p5/noCanvas" target="_blank">noCanvas()</a>
+and <a href="https://p5js.org/reference/p5/createVideo" target="_blank">createVideo()</a> 
 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,

src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx

@@ -6,13 +6,13 @@ 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> 
+<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> 
+<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> 
+<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 

src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx

@@ -6,13 +6,13 @@ oneLineDescription: Display a live video feed from a camera.
 ---
 
 Using the 
-<a href="https://p5js.org/reference/#/p5/createCapture" target="_blank">createCapture()</a>
-and <a href="https://p5js.org/reference/#/p5/image" target="_blank">image()</a> 
+<a href="https://p5js.org/reference/p5/createCapture" target="_blank">createCapture()</a>
+and <a href="https://p5js.org/reference/p5/image" target="_blank">image()</a> 
 functions, you can take a device's video capture and draw it in the canvas. 
 Since the video capture is passed through the
-<a href="https://p5js.org/reference/#/p5/image" target="_blank">image()</a> 
+<a href="https://p5js.org/reference/p5/image" target="_blank">image()</a> 
 constructor, you can add filters to the video capture with the 
-<a href="https://p5js.org/reference/#/p5/filter" target="_blank">filter()</a> 
+<a href="https://p5js.org/reference/p5/filter" target="_blank">filter()</a> 
 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

src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx

@@ -5,11 +5,11 @@ title: Image Drop
 oneLineDescription: Display an image that the page visitor dragged and dropped.
 ---
 
-<a href="https://p5js.org/reference/#/p5.Element/drop" target="_blank">drop()</a>
+<a href="https://p5js.org/reference/p5.Element/drop" target="_blank">drop()</a>
 is a p5.js element method that registers a callback every time a file is loaded 
 into the element. The uploaded file is created into a 
-<a href="https://p5js.org/reference/#/p5.File" target="_blank">p5.File</a> 
+<a href="https://p5js.org/reference/p5/p5.File" target="_blank">p5.File</a> 
 class. You can use the 
-<a href="https://p5js.org/reference/#/p5.Element/drop" target="_blank">drop()</a> 
+<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.

src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx

@@ -6,8 +6,8 @@ oneLineDescription: Use text input from the page visitor.
 ---
 
 Using the 
-<a href="https://p5js.org/reference/#/p5.Element/createElement" target="_blank">createElement()</a>,
-<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> 
+<a href="https://p5js.org/reference/p5/createElement" target="_blank">createElement()</a>,
+<a href="https://p5js.org/reference/p5/createInput" target="_blank">createInput()</a>,
+and <a href="https://p5js.org/reference/p5/createButton" target="_blank">createButton()</a> 
 functions, you can take a string of text submitted via text input and display 
 it on your canvas.

src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx

@@ -7,9 +7,9 @@ oneLineDescription: Create a form and respond to the results.
 
 The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" target="_blank">Document Object Model</a>,
 or DOM, represents the resulting structure of the web page. Using p5.js's form elements,
-such as <a href="https://p5js.org/reference/#/p5/createInput" target="_blank">createInput()</a>,
-<a href="https://p5js.org/reference/#/p5/createSelect" target="_blank">createSelect()</a>,
-and <a href="https://p5js.org/reference/#/p5/createRadio" target="_blank">createRadio()</a>, you can build different ways to take information submitted through
+such as <a href="https://p5js.org/reference/p5/createInput" target="_blank">createInput()</a>,
+<a href="https://p5js.org/reference/p5/createSelect" target="_blank">createSelect()</a>,
+and <a href="https://p5js.org/reference/p5/createRadio" target="_blank">createRadio()</a>, you can build different ways to take information submitted through
 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.

src/content/examples/en/05_Transformation/00_Translate/description.mdx

@@ -6,14 +6,14 @@ oneLineDescription: Move the coordinate system origin.
 ---
 
 The
-<a href="https://p5js.org/reference/#/p5/translate">translate()</a>
+<a href="https://p5js.org/reference/p5/translate">translate()</a>
 function moves the origin of the coordinate system to the specified
 location.
 
 The
-<a href="https://p5js.org/reference/#/p5/push">push()</a>
+<a href="https://p5js.org/reference/p5/push">push()</a>
 and
-<a href="https://p5js.org/reference/#/p5/pop">pop()</a>
+<a href="https://p5js.org/reference/p5/pop">pop()</a>
 functions save and restore the coordinate system and various
 other drawing settings, such as the fill color.
 

src/content/examples/en/05_Transformation/01_Rotate/description.mdx

@@ -6,7 +6,7 @@ oneLineDescription: Rotate the coordinate system.
 ---
 
 The
-<a href="https://p5js.org/reference/#/p5/rotate">rotate()</a>
+<a href="https://p5js.org/reference/p5/rotate">rotate()</a>
 function rotates the current coordinate system around the current
 origin.
 
@@ -15,7 +15,7 @@ In order to rotate around the center of the canvas, we must first
 translate the coordinate system, and then rotate around the new origin.
 
 The 
-<a href="https://p5js.org/reference/#/p5/push">push()</a>
+<a href="https://p5js.org/reference/p5/push">push()</a>
 and
-<a href="https://p5js.org/reference/#/p5/pop">pop()</a>
+<a href="https://p5js.org/reference/p5/pop">pop()</a>
 functions save and restore the coordinate system, respectively.

src/content/examples/en/05_Transformation/02_Scale/description.mdx

@@ -6,14 +6,14 @@ oneLineDescription: Modify the coordinate system scale.
 ---
 
 The
-<a href="https://p5js.org/reference/#/p5/scale">scale()</a>
+<a href="https://p5js.org/reference/p5/scale">scale()</a>
 function scales the current coordinate system by the specified
 factor.
 
 The
-<a href="https://p5js.org/reference/#/p5/push">push()</a>
+<a href="https://p5js.org/reference/p5/push">push()</a>
 and
-<a href="https://p5js.org/reference/#/p5/pop">pop()</a>
+<a href="https://p5js.org/reference/p5/pop">pop()</a>
 functions save and restore the coordinate system, respectively.
 
 In this example, a square size 200 is drawn at the origin, with

src/content/examples/en/06_Calculating_Values/00_Interpolate/description.mdx

@@ -10,7 +10,7 @@ calculates a value between two other values. For example, the number 5 is
 halfway between 0 and 10. Different types of interpolation use
 different rates of change between values. Linear interpolation,
 abbreviated as lerp, uses a constant rate of change. The
-<a href="https://p5js.org/reference/#/p5/lerp" target="_blank">lerp()</a>
+<a href="https://p5js.org/reference/p5/lerp" target="_blank">lerp()</a>
 function linearly interpolates between two numbers.
 
 Move the mouse across the screen and the symbol will follow.

src/content/examples/en/06_Calculating_Values/01_Map/description.mdx

@@ -6,7 +6,7 @@ oneLineDescription: Convert a number from one range to another range.
 ---
 
 The
-<a href="https://p5js.org/reference/#/p5/map" target="_blank">map()</a>
+<a href="https://p5js.org/reference/p5/map" target="_blank">map()</a>
 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

src/content/examples/en/06_Calculating_Values/02_Random/description.mdx

@@ -6,7 +6,7 @@ oneLineDescription: Get random numbers.
 ---
 
 This example demonstrates the use of the
-<a href="https://p5js.org/reference/#/p5/random">random()</a>
+<a href="https://p5js.org/reference/p5/random">random()</a>
 function.
 
 When the user presses the mouse button, the position and color

src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx

@@ -8,5 +8,5 @@ oneLineDescription: Keep a number within a range.
 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>
+<a href="https://p5js.org/reference/p5/constrain" target="_blank">constrain()</a>
 function.