fix: update old link to new website in examples

Author: shibomb

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