Merge pull request #610 from shibomb/fix-oldlink/tutorials

Fix broken links in tutorial pages

Author: davepagurek

src/content/tutorials/en/color-gradients.mdx

@@ -58,7 +58,7 @@ This tutorial uses the [p5.js Web Editor](https://editor.p5js.org/) and is desig
     - See this [example sketch](https://editor.p5js.org/Msqcoding/sketches/mLfhMChZW) that sets up your webcam to display on the canvas. 
     - Visit the p5.reference pages for [`.position()`](/reference/p5.Element/position) and [`p5.Element`](/reference/p5/p5.Element) to learn more.
 - Create a function to take a snapshot with your webcam.
-  - Declare a global [Boolean](/reference/p5/boolean) variable called `snapped` and assign it a value of `false`.
+  - Declare a global [Boolean](/reference/p5/Boolean) variable called `snapped` and assign it a value of `false`.
     - This variable will keep track of when a snapshot is taken and is known as a [state](https://developer.mozilla.org/en-US/docs/Glossary/State_machine) variable.
     - Visit the MDN glossary for [state machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine) for more information about states.
   - Define a function called `takeSnap()` below your `setup()` function.

src/content/tutorials/en/conditionals-and-interactivity.mdx

@@ -471,7 +471,7 @@ if (sunHeight < horizon) {
 
 In the code above, we see that if the sun is above the horizon, `sunHeight < horizon `returns `true`, and the code `background("lightblue")` runs. When `sunHeight` is NOT less than the horizon the code block after the `else` keyword, `background(0)`, runs. Although both ways of writing the code have the same visual effect, sometimes it can be clearer and more efficient to use if-else, especially when two different code blocks can be controlled. 
 
-Visit the p5.js reference page for [`if`](/reference/p5/if-else) and [`Boolean`](/reference/p5/boolean) to learn more.
+Visit the p5.js reference page for [`if`](/reference/p5/if) and [`Boolean`](/reference/p5/Boolean) to learn more.
 
 
 #### Step Four: Add grass to hide the sun  

src/content/tutorials/en/coordinates-and-transformations.mdx

@@ -49,7 +49,7 @@ function draw() {
 
 ![An illustration showing a 2D coordinate system on the left, showing an origin of (0,0) at its top left, and a 3D coordinate system on the right, showing an origin of (0,0,0) in its center](../images/webgl/2d3d_coordinates.png)
 
-You can call [`debugMode()`](https://p5js.org/reference/#/p5/debugMode) in your `setup()` function to add a grid on the x- and z-axes and the red-green-blue x, y, and z arrows to your sketch, similar to the illustration above.
+You can call [`debugMode()`](https://p5js.org/reference/p5/debugMode) in your `setup()` function to add a grid on the x- and z-axes and the red-green-blue x, y, and z arrows to your sketch, similar to the illustration above.
 
 
 ## Transformations: Position and Size of 3D Shapes

src/content/tutorials/en/field-guide-to-debugging.mdx

@@ -244,7 +244,7 @@ function draw() {
 <Column>
 #### Solution:
 
-The programmer solved the problem by adding a parenthesis between the last argument and a semicolon. They discovered this by visiting the p5.js reference page for [`rect()`](https://p5js.org/reference/#/p5/rect) and comparing code.
+The programmer solved the problem by adding a parenthesis between the last argument and a semicolon. They discovered this by visiting the p5.js reference page for [`rect()`](https://p5js.org/reference/p5/rect) and comparing code.
 
 #### Pro Tips:
 
@@ -283,7 +283,7 @@ p5.js says: [sketch.js, line 9] circle() was expecting at least 3 arguments but
 
 #### Bug:
 
-According to the message in the console, [`circle()`](https://p5js.org/reference/#/p5/circle) only received 2 inputs when it expected 3. The message also specifies that the error is on line 9 of the sketch. 
+According to the message in the console, [`circle()`](https://p5js.org/reference/p5/circle) only received 2 inputs when it expected 3. The message also specifies that the error is on line 9 of the sketch. 
 
 </Column>
 <Column>
@@ -306,9 +306,9 @@ function draw() {
 <Column>
 #### Solution:
 
-The programmer solved the problem by adding a third argument in [`circle()`](https://p5js.org/reference/#/p5/circle).
+The programmer solved the problem by adding a third argument in [`circle()`](https://p5js.org/reference/p5/circle).
 
-They discovered this by visiting the p5.js reference page for [`circle()`](https://p5js.org/reference/#/p5/circle) and comparing code.
+They discovered this by visiting the p5.js reference page for [`circle()`](https://p5js.org/reference/p5/circle) and comparing code.
 
 #### Pro Tips:
 
@@ -376,9 +376,9 @@ function draw() {
 <Column>
 #### Solution:
 
-The programmer solved the problem by adding a *closing curly bracket* (`}`) on line 11 to close the [`draw()`](https://p5js.org/reference/#/p5/draw) function.
+The programmer solved the problem by adding a *closing curly bracket* (`}`) on line 11 to close the [`draw()`](https://p5js.org/reference/p5/draw) function.
 
-They discovered this by visiting the p5.js reference page for [`draw()`](https://p5js.org/reference/#/p5/draw) and comparing code.
+They discovered this by visiting the p5.js reference page for [`draw()`](https://p5js.org/reference/p5/draw) and comparing code.
 
 #### Pro Tips:
 
@@ -489,7 +489,7 @@ p5.js says: [sketch.js, line 10] circle() was expecting Number for the first par
 
 #### Bug:
 
-According to the message in the console, the programmer made an error on line 10 - the [circle()](https://p5js.org/reference/#/p5/circle) function needs a [number](https://p5js.org/reference/#/p5/number) as the first parameter, but it was given a [string](https://p5js.org/reference/#/p5/string).
+According to the message in the console, the programmer made an error on line 10 - the [circle()](https://p5js.org/reference/p5/circle) function needs a [number](https://p5js.org/reference/p5/number) as the first parameter, but it was given a [string](https://p5js.org/reference/p5/string).
 
 </Column>
 <Column>
@@ -516,7 +516,7 @@ function draw() {
 
 #### Solution:
 
-The programmer solved the problem by noticing that the variable `myX` was initialized with `"forty-five"`, which cannot be recognized as a [number](https://p5js.org/reference/#/p5/number). p5.js thinks it’s just a word with a [string](https://p5js.org/reference/#/p5/string) data type.
+The programmer solved the problem by noticing that the variable `myX` was initialized with `"forty-five"`, which cannot be recognized as a [number](https://p5js.org/reference/p5/number). p5.js thinks it’s just a word with a [string](https://p5js.org/reference/p5/string) data type.
 
 #### Pro Tip:
 
@@ -589,7 +589,7 @@ function draw() {
 
 #### Solution:
 
-The programmer solved the problem by declaring `localVariable` outside of [`setup()`](https://p5js.org/reference/#/p5/setup) and [`draw()`](https://p5js.org/reference/#/p5/draw) and initializing it in [`setup()`](https://p5js.org/reference/#/p5/setup).
+The programmer solved the problem by declaring `localVariable` outside of [`setup()`](https://p5js.org/reference/p5/setup) and [`draw()`](https://p5js.org/reference/p5/draw) and initializing it in [`setup()`](https://p5js.org/reference/p5/setup).
 
 #### Pro Tip:
 

src/content/tutorials/en/intro-to-shaders.mdx

@@ -95,7 +95,7 @@ A shader program consists of two parts, a **vertex shader** and a **fragment sha
 
 </table>
 
-{ /* Note for contributors: Images/gifs generated from https://editor.p5js.org/davepagurek/sketches/gs-DbLzqV */}
+{/* Note for contributors: Images/gifs generated from https://editor.p5js.org/davepagurek/sketches/gs-DbLzqV */}
 
 Each of these live in separate files and are loaded into p5.js using the `loadShader()` function. Once a shader is loaded, it can be used within `setup()` or `draw()`. The following example will show how to set up a basic shader within p5.js:
 
@@ -671,7 +671,7 @@ In p5.js, a filter is something that looks at all the pixels on the canvas and t
 
 Filter shaders only need a fragment shader. Vertex shaders are primarily responsible for positioning shapes, and filters always apply to the whole canvas, so p5.js provides a default vertex shader for you. Rather than using `loadShader`, you use `createFilterShader(src)`, passing in a string with your shader source code.
 
-There are a number of `uniform`s that will be available to you in a filter shader, and you can read about all of them [in the `createFilterShader` documentation.](https://p5js.org/reference/#/p5/createFilterShader) There are two main ones to know about to get started:
+There are a number of `uniform`s that will be available to you in a filter shader, and you can read about all of them [in the `createFilterShader` documentation.](https://p5js.org/reference/p5/createFilterShader) There are two main ones to know about to get started:
 
 - `uniform sampler2D tex0` is a texture containing the contents of the canvas.
 - `varying vec2 vTexCoord` contains the coordinates on the canvas of the current pixel, ranging from 0 to 1.

src/content/tutorials/en/layered-rendering-with-framebuffers.mdx

@@ -73,7 +73,7 @@ Final image with focal blur using color + depth
 
 </table>
 
-{ /*Note for contributors: Image generated from https://editor.p5js.org/davepagurek/sketches/OUBu-yXuk*/}
+{/*Note for contributors: Image generated from https://editor.p5js.org/davepagurek/sketches/OUBu-yXuk*/}
 
 ## Using a `p5.Framebuffer`
 
@@ -366,7 +366,7 @@ function draw() {
 `} />
 
 <Callout>
-Lots of music player software uses feedback to create audio visualizations. Try using feedback in a sketch that [reacts to music!](https://p5js.org/reference/#/p5.Amplitude)
+Lots of music player software uses feedback to create audio visualizations. Try using feedback in a sketch that [reacts to music!](https://p5js.org/reference/p5.sound/p5.Amplitude)
 </Callout>
 
 Here are some tips that will help as you create more advanced feedback effects.
@@ -541,7 +541,7 @@ function draw() {
 }
 `} />
 
-If you want to customize how close to or far from the camera an object needs to be to get depth values of 0 or 1, specify near and far values in [`perspective()`](https://p5js.org/reference/#/p5/perspective).
+If you want to customize how close to or far from the camera an object needs to be to get depth values of 0 or 1, specify near and far values in [`perspective()`](https://p5js.org/reference/p5/perspective).
 
 *Depth-based blur shaders are more advanced and are beyond the scope of this tutorial.*
 

src/content/tutorials/en/repeating-with-loops.mdx

@@ -36,8 +36,8 @@ In this tutorial, you will:
 
 - Draw and update repetitive tasks and shapes using *for loops*
 - Use custom functions to update variables and program states and make changes in the program as the sketch runs.
-- Use [conditional statements](/reference/p5/if-else) and `random()` to generate different outcomes
-- Run and stop your sketch using mouse triggers and [Boolean variables](/reference/p5/boolean)
+- Use [conditional statements](/reference/p5/if) and `random()` to generate different outcomes
+- Run and stop your sketch using mouse triggers and [Boolean variables](/reference/p5/Boolean)
 - Store the positions of the caterpillars in an array
 
 ### What you’ll need
@@ -162,7 +162,7 @@ function draw() {
 }
 `} />
 
-### [If-statements](/reference/p5/if-else)
+### [If-statements](/reference/p5/if)
 
 If-statements, like the one applied above, refer to blocks of code that are executed only when a given condition is true. It is normally written:
 
@@ -174,7 +174,7 @@ if (<condition>) {
 
 The condition is specified inside the parentheses of the if-statement. The curly brackets `{ }` mark the start and end of the block of code. In Step 2, the condition `circX > finishLine` stops `draw()` from running again when the x-coordinate of the circle is greater than the value of `finishLine` by calling `noLoop()`.
 
-Visit the p5.js reference for [if](/reference/p5/if-else) to learn more.
+Visit the p5.js reference for [if](/reference/p5/if) to learn more.
 
 
 ## Step 3 – Draw one caterpillar

src/content/tutorials/en/responding-to-inputs.mdx

@@ -381,7 +381,7 @@ function checkSelf() {
   - It sets the initial direction to the right  with `snake.xSpeed = 1` and `snake.ySpeed = 0`, 
   - It creates an empty array to manage the snake’s body, creates a head segment with the current position, and adds it to the body array.
 
-The `checkEdges()` function uses [if-statements](/reference/p5/if-else) to check if the snake has reached the right edge (`cols`), if the snake has reached the left edge (`-1`), if the snake has reached the top edge (`-1`), and if the snake has reached the bottom edge (`rows`). Whenever any of the conditions are met, it sets `gameOver` to `true`. This creates the rule in the game where if the snake reaches any edge, the game is over. The `moveSnake()` function updates the snake’s position based on its current speed. It updates the x and y positions by adding its `xSpeed` and `ySpeed`, respectively. Refer to the [Conditions and Interactivity](/tutorials/conditionals-and-interactivity/) tutorial to review the syntax for if-statements and updating variables.
+The `checkEdges()` function uses [if-statements](/reference/p5/if) to check if the snake has reached the right edge (`cols`), if the snake has reached the left edge (`-1`), if the snake has reached the top edge (`-1`), and if the snake has reached the bottom edge (`rows`). Whenever any of the conditions are met, it sets `gameOver` to `true`. This creates the rule in the game where if the snake reaches any edge, the game is over. The `moveSnake()` function updates the snake’s position based on its current speed. It updates the x and y positions by adding its `xSpeed` and `ySpeed`, respectively. Refer to the [Conditions and Interactivity](/tutorials/conditionals-and-interactivity/) tutorial to review the syntax for if-statements and updating variables.
 
 - The `updateBody()` function updates the positions of the snake’s body segments. It does this by iterating through the snake `body` array starting from the end, updating each body segment’s position to match the position of the segment in front of it. Then it updates the head’s position to the snake’s current position. Refer to the [Repeating with Loops](/tutorials/repeating-with-loops) tutorial to review the syntax for loops and iteration.
 - The `drawSnake()` function renders the snake on the canvas. It sets the color to green, iterates through each body segment, and draws a square on the canvas at its position.