Merge pull request #543 from ff6347/fix/broken-links-tutorials

Fix/broken links in tutorials

Author: Qianqianye

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

@@ -86,7 +86,7 @@ This tutorial uses the [p5.js Web Editor](https://editor.p5js.org/) and is desig
     snapButton.mouseClicked(takeSnap);
     ```
 
-Visit the p5.js reference pages for [`createButton()`](/reference/p5/createbutton) and [`mouseClicked()`](/reference/p5/mouseClicked) to learn more.
+Visit the p5.js reference pages for [`createButton()`](/reference/p5/createButton) and [`mouseClicked()`](/reference/p5/mouseClicked) to learn more.
 
 By creating an HTML button, we are inserting `<button></button>` inside our sketch page's HTML and are using it to trigger the code for taking a snapshot of our webcam feed.
 
@@ -395,4 +395,3 @@ Continue on to the next lesson: [Custom Shapes and Smooth Curves](/tutorials/cus
 - [Blend mode - CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode)
 - [Linear gradient - CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
 - [p5.js Web Editor](https://editor.p5js.org/son/sketches/LuJ2eGf9p)
-- [Color Radial Gradient Example](https://p5js.org/examples/color-radial-gradient.html)

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

@@ -41,7 +41,7 @@ Controlling the flow of your program is central to the power of computing and ma
 
 - [Setting Up Your Environment](/tutorials/setting-up-your-environment)
 - [Get Started Tutorial](/tutorials/get-started)
-- [Variables and Motion Tutorial](/tutorials/variables-and-motion)
+- [Variables and Change Tutorial](/tutorials/variables-and-change/)
 
 Before you begin, you should be able to:
 
@@ -842,7 +842,7 @@ Notice that if the Boolean expression in the first if statement is `false`, the
 
 ### Logical Operators: `&&` and `||`
 
-Another way to write conditional statements with more than one condition is by using [logical operators](https://p5js.org/examples/control-logical-operators.html). The AND operator (`&&`) is used when *both* conditions must be `true` for a code block to run. The OR operator (`||`) is used when *either* condition must be true for a code block to run.
+Another way to write conditional statements with more than one condition is by using logical operators. The AND operator (`&&`) is used when *both* conditions must be `true` for a code block to run. The OR operator (`||`) is used when *either* condition must be true for a code block to run.
 
 We can rewrite the nested conditional in the animated sunrise sketch using the AND (`&&`) logical operator since it requires that `sunHeight` is less than 130 *AND* greater than 480. In the code sample below, Boolean expressions on each side of the operator must be `true` in order for the code in its code block to run: 
 

src/content/tutorials/en/custom-geometry.mdx

@@ -53,7 +53,7 @@ function draw(){
 
 A common issue that can come up with custom models is scaling. Depending on how the model is constructed, it might be a very different size when drawn in p5.js, or be too small to be drawn at all. The `loadModel()` method includes a `normalize` parameter that will resize the model to something that works better in p5.js.
 
-*Note that there is currently no support for loading materials and colors from model files. You can add color, materials, and textures manually after loading a model, which you can learn about in the* [*Styling and Appearance*](styling-and-appearance) *tutorial.*
+*Note that there is currently no support for loading materials and colors from model files. You can add color, materials, and textures manually after loading a model.*
 
 <Callout>
 

src/content/tutorials/en/custom-shapes-and-smooth-curves.mdx

@@ -554,4 +554,4 @@ Try one of our other tutorials:
 
 - [Creating and Styling HTML](/tutorials/creating-styling-html) (Web Design Chapter)
 - [Abracadabra: Speak With Your Hands](/tutorials/speak-with-your-hands) (ml5.js and p5.js)
-- [Melody App](/tutorials/melody-app-with-nodejs) (Node.js and p5.js)
+- [Simple Melody App](/tutorials/simple-melody-app/) (Node.js and p5.js)

src/content/tutorials/en/data-structure-garden.mdx

@@ -46,7 +46,7 @@ Before you begin, you should be able to:
 - Create and use custom functions
 - Understand how to use for loops to manage repetitive tasks
 
-For more information on arrays, loops, and custom functions, visit the [Organizing Code with Functions](/tutorials-organizing-code-with-functions) and [Repeating with Loops](/tutorials/repeating-with-loops) tutorials.
+For more information on arrays, loops, and custom functions, visit the [Organizing Code with Functions](/tutorials/organizing-code-with-functions) and [Repeating with Loops](/tutorials/repeating-with-loops) tutorials.
 
 - In the [Variables and Change](/tutorials/variables-and-change) tutorial, you learned how to store data using variables. Variables are useful for storing single values like numbers or text. 
 - In the [Animating with Media Objects](/tutorials/animating-with-media-objects) tutorial, you learned to use p5.js’ built-in `p5.Image` and `p5.Graphics` objects. These objects bundle data, like images, together with special functions called [*methods*](https://www.w3schools.com/js/js_object_methods.asp#:~:text=JavaScript%20methods%20are%20actions%20that,property%20containing%20a%20function%20definition.) that enable users to perform operations on that data. 
@@ -988,7 +988,7 @@ Throughout this journey, you learned about the fundamental concepts of JavaScrip
 
 - Use HTML & CSS with p5.js in the [Creating and Styling HTML](/tutorials/creating-styling-html) tutorial.
 - Use [ml5.js](https://ml5js.org/) with p5.js in the [Abracadabra: Speak With Your Hands](/tutorials/speak-with-your-hands) tutorial.
-- Use [node.js](https://www.w3schools.com/nodejs/nodejs_intro.asp) with p5.js in the [Getting Started with Node.js](/tutorials/getting-started-with-nodejs) and [Melody App](/tutorials/melody-app) tutorials.
+- Use [node.js](https://www.w3schools.com/nodejs/nodejs_intro.asp) with p5.js in the [Getting Started with Node.js](/tutorials/getting-started-with-nodejs) and [Simple Melody App](/tutorials/simple-melody-app/) tutorials.
 
 Once again, well done on completing this tutorial. Keep experimenting, keep coding, and most importantly, enjoy learning and creating!
 

src/content/tutorials/en/get-started.mdx

@@ -262,7 +262,7 @@ The [`fill()`](/reference/p5/fill) function sets the color for any shape on the
 
 
 <Callout title="Tip">
-In the [p5.js Web Editor](https://editor.p5js.org/), you can search for different colors to use in [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background) by clicking on the small colored box next to the color’s name! Type an [HTML color name](https://www.w3schools.com/tags/ref_colornames.asp) as an *argument*, and the box will appear. Color names are [string](/reference/p5/string) data types and are therefore surrounded by quotation marks (`""`).
+In the [p5.js Web Editor](https://editor.p5js.org/), you can search for different colors to use in [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background) by clicking on the small colored box next to the color’s name! Type an [HTML color name](https://www.w3schools.com/tags/ref_colornames.asp) as an *argument*, and the box will appear. Color names are [string](/reference/p5/String) data types and are therefore surrounded by quotation marks (`""`).
 
 ![After coloring a circle yellow using fill(“yellow”), a user coding in the p5.js Web Editor clicks on the yellow square that appears next to the HTML color “yellow”. This reveals the color tool which is used to select a  red color. The user then clicks the code editor causing the color of the circle to change from yellow to red.](../images/introduction/editor-color-picker.gif)
 </Callout>
@@ -419,17 +419,17 @@ Visit the reference pages for [`text()`](/reference/p5/text),` `[`textSize()`](/
 
 Some functions in p5.js need *arguments* that are *string* data types, while other functions need arguments that are *number* data types.
 
-- [Strings](/reference/p5/string): represented by text and always surrounded by quotation marks (`""`)
+- [Strings](/reference/p5/String): represented by text and always surrounded by quotation marks (`""`)
 - [Numbers](/reference/p5/number): represented by a number 
 
 For example:
 
 - [`circle()`](/reference/p5/circle) uses 3 [numbers](/reference/p5/number): a number that represents its x-coordinate, a number that represents its y-coordinate, and a number that represents its size in pixels. 
-- [`text()`](/reference/p5/text) uses a [string](/reference/p5/string) that represents the text displayed, and 2 [numbers](/reference/p5/number): a number that represents its x-coordinate and a number that represents its y-coordinate. 
-- [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background) use both [numbers](/reference/p5/number) and [strings](/reference/p5/string):
+- [`text()`](/reference/p5/text) uses a [string](/reference/p5/String) that represents the text displayed, and 2 [numbers](/reference/p5/number): a number that represents its x-coordinate and a number that represents its y-coordinate. 
+- [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background) use both [numbers](/reference/p5/number) and [strings](/reference/p5/String):
   - 1 number for gray-scale color
   - 3 numbers separated by commas for [RGB colors](https://www.w3schools.com/html/html_colors_rgb.asp)
-  - a [string](/reference/p5/string) with an [HTML color name](https://www.w3schools.com/tags/ref_colornames.asp) or [HEX color values](https://www.w3schools.com/html/html_colors_hex.asp)
+  - a [string](/reference/p5/String) with an [HTML color name](https://www.w3schools.com/tags/ref_colornames.asp) or [HEX color values](https://www.w3schools.com/html/html_colors_hex.asp)
 
 
 ## Step 9: Make it interactive!

src/content/tutorials/en/getting-started-with-nodejs.mdx

@@ -15,7 +15,7 @@ authors:
   - Nick McIntyre
 ---
 
-In this guide, we'll explore the fusion of p5.js and [Node.js](http://node.js) to create dynamic applications that save and retrieve user-generated drawings, animations, and sound projects! For example, you can create a [Melody App](/tutorials/melody-app-with-nodejs) where you save files with melodies you create by interacting with the canvas! Node.js allows you to easily save, replay, and edit these files right from your browser!
+In this guide, we'll explore the fusion of p5.js and [Node.js](http://node.js) to create dynamic applications that save and retrieve user-generated drawings, animations, and sound projects! For example, you can create a [Simple Melody App](/tutorials/simple-melody-app/) where you save files with melodies you create by interacting with the canvas! Node.js allows you to easily save, replay, and edit these files right from your browser!
 
 
 ![A p5.js logo with musical notes above it has arrows labeled with HTTP methods pointing to a cloud labeled “Internet”. Above the cloud is an icon that reads “http://”. Arrows point from the cloud to a pink cube labeled “Web Server” with the Node.js logo above it.](../images/advanced/node.png)
@@ -231,7 +231,7 @@ Now you are ready to build the [Melody App](https://docs.google.com/document/u/0
 
 ## Next Steps
 
-- Read about the [`p5.Oscillator`](/reference/p5.Oscillator) library and play with [this example](https://editor.p5js.org/Msqcoding/sketches/wSFTn9G9E).
+- Read about the [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) library and play with [this example](https://editor.p5js.org/Msqcoding/sketches/wSFTn9G9E).
 - Learn how to use [`app.post()`](https://expressjs.com/en/5x/api.html#app.post.method) and [`fs.writeFile()`](https://nodejs.org/en/learn/manipulating-files/writing-files-with-nodejs) to save files users create using your p5.js app by visiting the reference links.
 
 

src/content/tutorials/en/how-to-optimize-your-sketches.mdx

@@ -164,7 +164,7 @@ The sketch runs smoothly with fewer particles, so that change seems to solve the
 
 Similarly, I wondered if I needed to simulate the actual laws of physics. In this case, that was important to the project, but for a game, a simplified version of the physics could still work well and greatly improve performance.
 
-I could also try to use memory more effectively by modifying the original [`p5.Vector`](/reference/p5.Vector) objects and avoiding calls to `p5.Vector.copy()`. This kind of change requires care. When you update an object that is used elsewhere in your code, you might cause an inadvertent bug.
+I could also try to use memory more effectively by modifying the original [`p5.Vector`](/reference/p5/p5.Vector) objects and avoiding calls to `p5.Vector.copy()`. This kind of change requires care. When you update an object that is used elsewhere in your code, you might cause an inadvertent bug.
 
 A great strategy is to make a change and see how it improves performance using `frameRate()` as a benchmarking tool. If the frame rate drops, you know you have a problem. This also allows you to ensure you have not inadvertently introduced a new bug into the code.
 
@@ -199,7 +199,7 @@ In my case, I just let the animation run after I clicked record. The profiler ca
 
 ![A screenshot of the Bottom-Up tab of the Chrome profiler after having recorded data, displayed in a table. The Self Time, Total Time, and Activity columns are visible, sorted by Self Time descending. The top item is the copy method, accounting for 48.3% of the time.](../images/advanced/chrome-profiler-bottom-up.png)
 
-It looks like I was right about the `collisions()` function, which takes 93.4% of the time. It seems like most of that is taken up by using [`p5.Vector`](/reference/p5.Vector) and its `.copy()` method in that loop. Of course, you will need to have nicely named functions for this tool to be helpful. See the [performance features reference](https://developer.chrome.com/docs/devtools/performance/reference/#:~:text=%23%20The%20Bottom%2DUp%20tab,learn%20how%20to%20select%20portions.) page for complete documentation.
+It looks like I was right about the `collisions()` function, which takes 93.4% of the time. It seems like most of that is taken up by using [`p5.Vector`](/reference/p5/p5.Vector) and its `.copy()` method in that loop. Of course, you will need to have nicely named functions for this tool to be helpful. See the [performance features reference](https://developer.chrome.com/docs/devtools/performance/reference/#:~:text=%23%20The%20Bottom%2DUp%20tab,learn%20how%20to%20select%20portions.) page for complete documentation.
 
 Once you are satisfied with your level of knowledge of the different choices available to you, it is time to decide how to improve your code.
 

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

@@ -80,7 +80,7 @@ Final image with focal blur using color + depth
 
 A `p5.Framebuffer` is a surface you can draw to, similar to the main canvas. Drawing to the main canvas is like drawing on a sheet of paper. When you call `begin()` on a `p5.Framebuffer`, it's like laying a fresh sheet of paper on top of the original, which will collect any new things that get drawn. Calling `end()` on a `p5.Framebuffer` will remove that sheet again so that subsequent drawing will go right to the main canvas again.
 
-You can create a `p5.Framebuffer` with the `createFramebuffer()` function. You can optionally pass an object in as a parameter to specify a width and height.By default, `p5.Framebuffer`s are the same size as the main canvas. There are other options you can add to this object to control how color and depth information is stored, which we'll get into later. Check out [the `createFramebuffer()` documentation](/reference/en/p5/createFramebuffer) for the full reference.
+You can create a `p5.Framebuffer` with the `createFramebuffer()` function. You can optionally pass an object in as a parameter to specify a width and height.By default, `p5.Framebuffer`s are the same size as the main canvas. There are other options you can add to this object to control how color and depth information is stored, which we'll get into later. Check out [the `createFramebuffer()` documentation](/reference/p5/createFramebuffer/) for the full reference.
 
 You may already be familiar with drawing to `p5.Graphics` objects. Here's a comparison of some code using `p5.Graphics` as a texture, and what the equivalent `p5.Framebuffer` code looks like:
 
@@ -544,16 +544,15 @@ 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).
 
-*Depth-based blur shaders are more advanced and are beyond the scope of this tutorial. If you are interested in how they work, you can look at* [*an example of Framebuffer depth blur*](https://p5js.org/examples/3d-blur-using-framebuffer-depth.html)*.*
-
+*Depth-based blur shaders are more advanced and are beyond the scope of this tutorial.*
 
 <Callout>
 Can you make a moody, rainy scene using a fog shader to add to the atmosphere?
 </Callout>
 
 ## Conclusion
 
-If you're sketching in WebGL mode and need to draw to an image, consider using [`createFramebuffer()`](/reference/en/p5/createFramebuffer) as a way to make your sketch run fast and give everyone the best viewing experience possible.
+If you're sketching in WebGL mode and need to draw to an image, consider using [`createFramebuffer()`](/reference/p5/createFramebuffer) as a way to make your sketch run fast and give everyone the best viewing experience possible.
 
 We hope the new techniques framebuffers make possible inspire you and that you create art using them!