diff --git a/src/content/tutorials/en/color-gradients.mdx b/src/content/tutorials/en/color-gradients.mdx index d9c68d56fb..e91faaa913 100644 --- a/src/content/tutorials/en/color-gradients.mdx +++ b/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 `` 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) diff --git a/src/content/tutorials/en/conditionals-and-interactivity.mdx b/src/content/tutorials/en/conditionals-and-interactivity.mdx index f2e930a068..15dc73fe94 100644 --- a/src/content/tutorials/en/conditionals-and-interactivity.mdx +++ b/src/content/tutorials/en/conditionals-and-interactivity.mdx @@ -42,7 +42,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: @@ -843,7 +843,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:  diff --git a/src/content/tutorials/en/custom-geometry.mdx b/src/content/tutorials/en/custom-geometry.mdx index e761fd67c2..ddeabe1e38 100644 --- a/src/content/tutorials/en/custom-geometry.mdx +++ b/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.* diff --git a/src/content/tutorials/en/custom-shapes-and-smooth-curves.mdx b/src/content/tutorials/en/custom-shapes-and-smooth-curves.mdx index 73d9105328..4c1c943ad9 100644 --- a/src/content/tutorials/en/custom-shapes-and-smooth-curves.mdx +++ b/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) diff --git a/src/content/tutorials/en/data-structure-garden.mdx b/src/content/tutorials/en/data-structure-garden.mdx index aed390faf9..50f10f3f92 100644 --- a/src/content/tutorials/en/data-structure-garden.mdx +++ b/src/content/tutorials/en/data-structure-garden.mdx @@ -48,7 +48,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.  @@ -990,7 +990,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! diff --git a/src/content/tutorials/en/get-started.mdx b/src/content/tutorials/en/get-started.mdx index e61d1fbc06..5a14a4fc9a 100644 --- a/src/content/tutorials/en/get-started.mdx +++ b/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 -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) @@ -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! diff --git a/src/content/tutorials/en/getting-started-with-nodejs.mdx b/src/content/tutorials/en/getting-started-with-nodejs.mdx index 65bcc54602..af83d80425 100644 --- a/src/content/tutorials/en/getting-started-with-nodejs.mdx +++ b/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. diff --git a/src/content/tutorials/en/how-to-optimize-your-sketches.mdx b/src/content/tutorials/en/how-to-optimize-your-sketches.mdx index 15363a47fc..89f6c084d7 100644 --- a/src/content/tutorials/en/how-to-optimize-your-sketches.mdx +++ b/src/content/tutorials/en/how-to-optimize-your-sketches.mdx @@ -165,7 +165,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. @@ -200,7 +200,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. diff --git a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx b/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx index 6d08990806..1dba3dbba0 100644 --- a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx +++ b/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,8 +544,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). -*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.* Can you make a moody, rainy scene using a fog shader to add to the atmosphere? @@ -553,7 +552,7 @@ Can you make a moody, rainy scene using a fog shader to add to the atmosphere? ## 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! diff --git a/src/content/tutorials/en/lights-camera-materials.mdx b/src/content/tutorials/en/lights-camera-materials.mdx index 8da873f5fb..1b697c2339 100644 --- a/src/content/tutorials/en/lights-camera-materials.mdx +++ b/src/content/tutorials/en/lights-camera-materials.mdx @@ -73,7 +73,7 @@ perspective( ![An illustration showing the camera frustum in purple, the near plane represented by a yellow rectangle near the camera, and the far plane as a green rectangle on the opposite end of the frustum volume.](../images/webgl/frustum_example.png) -You can move cameras by passing arguments to `camera()`, but constantly moving and adjusting the camera in code can be tedious. [`orbitControl()`](/reference/en/p5/orbitControl) can be used to zoom, pan, and position the camera using the mouse. You can use it by calling it at the beginning your `draw()` function, outside of any `push()` and `pop()` calls: +You can move cameras by passing arguments to `camera()`, but constantly moving and adjusting the camera in code can be tedious. [`orbitControl()`](/reference/p5/orbitControl) can be used to zoom, pan, and position the camera using the mouse. You can use it by calling it at the beginning your `draw()` function, outside of any `push()` and `pop()` calls: -[`p5.Oscillator`](/reference/p5.Oscillator) objects hold information to generate electrical signals called [oscillators ](https://www.techtarget.com/whatis/definition/oscillator)that can play [musical notes](https://www.simplifyingtheory.com/music-note/). These signals change between a minimum and maximum value in a pattern that repeats at a specific rate. When the signal is played through your speakers, we can hear that it generates a sound! +[`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects hold information to generate electrical signals called [oscillators ](https://www.techtarget.com/whatis/definition/oscillator)that can play [musical notes](https://www.simplifyingtheory.com/music-note/). These signals change between a minimum and maximum value in a pattern that repeats at a specific rate. When the signal is played through your speakers, we can hear that it generates a sound! To understand how oscillators generate musical notes, we can dive into some science behind [sound](https://www.britannica.com/science/sound-physics). @@ -188,7 +188,7 @@ Identify a frequency that matches a musical note, and store it in a global varia Visit [this resource](https://www.idrumtune.com/ultimate-guide-to-musical-frequencies/) for a list of musical notes and corresponding frequencies. [Middle C](https://www.sciencedirect.com/topics/mathematics/middle-c) has a frequency of 262 Hz.  -Declare a global variable that will store the [`p5.Oscillator`](/reference/p5.Oscillator) object. +Declare a global variable that will store the [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) object. - Add this code above `setup():` @@ -197,7 +197,7 @@ Declare a global variable that will store the [`p5.Oscillator`](/reference/p5.Os let osc; ``` -Initialize `osc` with a [`p5.Oscillator`](/reference/p5.Oscillator) object using `myFreq` as an argument.  +Initialize `osc` with a [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) object using `myFreq` as an argument.  - Add this code in `setup()`:  @@ -218,7 +218,7 @@ r {started: false, phaseAmount: undefined, oscillator: OscillatorNode, f: 262, o You can confirm that you created an oscillator object with the correct frequency by examining the “`f`” property in the console, or printing it using `console.log(osc.f).` The frequency in the `osc.f` should match the frequency you identified for your note.  -Visit the [`p5.Oscillator`](/reference/p5.Oscillator) reference to learn more about the properties in p5.Oscillator objects. [See this resource](https://mixbutton.com/mixing-articles/music-note-to-frequency-chart/) for a chart that lists the frequencies for specific musical notes.  +Visit the [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) reference to learn more about the properties in p5.Oscillator objects. [See this resource](https://mixbutton.com/mixing-articles/music-note-to-frequency-chart/) for a chart that lists the frequencies for specific musical notes.  Your sketch.js file should look like this: @@ -316,7 +316,7 @@ function mousePressed() { In the code above, a new `p5.Oscillator` object is initialized with a frequency of 262 Hz and stored in the `osc` variable. The user can start and stop the oscillator by clicking the canvas. To add this interactivity, you added a conditional statement in `mousePress()` that used the oscillators `.started` property to check if the oscillator has started playing already. `osc.started` is `true` if the oscillator has started, and `false` otherwise. If the oscillator has started, the conditional instructs the program to stop the oscillator using the `.stop()` function, otherwise the oscillator starts using the `.start()` function. -Visit the p5.js reference for [`p5.Oscillator`](/reference/p5.Oscillator) to learn  more about its functions and properties. +Visit the p5.js reference for [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) to learn  more about its functions and properties. [Example Project](https://editor.p5js.org/KM_Playground/sketches/Ccjew0snE) @@ -553,7 +553,7 @@ C#  Visit these resources to explore more about [other musical scales](https://piano-music-theory.com/2016/05/31/major-scales/), [octaves](https://www.masterclass.com/articles/music-101-what-is-an-octave),  [melody composition and scales](https://pulse.berklee.edu/?id=4\&lesson=73), and [C Major](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm). -This project uses [`p5.Oscillator`](/reference/p5.Oscillator) objects to generate the musical notes that will play during a melody. We learned to initialize a new [`p5.Oscillator`](/reference/p5.Oscillator) object in a variable with a specific frequency in Step 1. To generate oscillators for a musical scale, we can initialize multiple [`p5.Oscillator`](/reference/p5.Oscillator) objects with different frequencies in an array. +This project uses [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects to generate the musical notes that will play during a melody. We learned to initialize a new [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) object in a variable with a specific frequency in Step 1. To generate oscillators for a musical scale, we can initialize multiple [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects with different frequencies in an array. To learn more about arrays, visit the MDN resource for [JavaScript Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). @@ -597,9 +597,9 @@ Declare a global variable `myFreq` and initialize it the frequency of the first ]; ``` -Access the elements in the `frequencies` array to initialize [`p5.Oscillator`](/reference/p5.Oscillator) objects for each note in [C Major](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm).  +Access the elements in the `frequencies` array to initialize [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects for each note in [C Major](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm).  -- Create a global variable called `oscillators` and initialize it with an empty array. This array will hold the [`p5.Oscillator`](/reference/p5.Oscillator) objects for each note. +- Create a global variable called `oscillators` and initialize it with an empty array. This array will hold the [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects for each note. - Add this code above `setup()`: ```js @@ -618,7 +618,7 @@ Access the elements in the `frequencies` array to initialize [`p5.Oscillator`](/ } ``` -Here you use a `for` loop to access each frequency in the `frequencies` array to initialize new [`p5.Oscillator`](/reference/p5.Oscillator) objects for each note. Each oscillator object is stored in the `oscillators` array. +Here you use a `for` loop to access each frequency in the `frequencies` array to initialize new [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects for each note. Each oscillator object is stored in the `oscillators` array. The index of for specific frequencies in the `frequencies` array match the index of oscillator objects in the `oscillators` array.  @@ -675,7 +675,7 @@ function draw() { } ``` -[`p5.Oscillator`](/reference/p5.Oscillator)  objects have methods such as `.start()`, `.stop()`, and `.amp()` that help control the intensity of the sound they produce. They also have properties such a `.f` and `.started` that store, respectively, its frequency in Hz, and a boolean value that is `true` when the oscillator starts, and `false` otherwise. We will use these to add more interactive elements to the sketch later on. +[`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/)  objects have methods such as `.start()`, `.stop()`, and `.amp()` that help control the intensity of the sound they produce. They also have properties such a `.f` and `.started` that store, respectively, its frequency in Hz, and a boolean value that is `true` when the oscillator starts, and `false` otherwise. We will use these to add more interactive elements to the sketch later on. @@ -1153,9 +1153,9 @@ For example, mapping to `50, 250` instead of `0, 360` will use a different segme -To prepare for the next step, consider reviewing [p5.Element](/reference/p5.Element)s such as [createP()](/reference/p5/createP), [createSelect()](/reference/p5/createSelect), [createInput()](/reference/p5/createInput), and [createButton()](/reference/p5/createButton).  Also consider reviewing the MDN reference for [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and [html elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). +To prepare for the next step, consider reviewing [p5.Element](/reference/p5/p5.Element/)s such as [createP()](/reference/p5/createP), [createSelect()](/reference/p5/createSelect), [createInput()](/reference/p5/createInput), and [createButton()](/reference/p5/createButton).  Also consider reviewing the MDN reference for [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and [html elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). -You can also review how to use and modify [DOM objects](/referencegroup-DOM) by visiting the [Creating and Styling HTML tutorial](/tutorials/creating-styling-html).  +You can also review how to use and modify [DOM objects](/reference/#DOM) by visiting the [Creating and Styling HTML tutorial](/tutorials/creating-styling-html).  ### Step 7 – Add user input to customize melodies diff --git a/src/content/tutorials/en/speak-with-your-hands.mdx b/src/content/tutorials/en/speak-with-your-hands.mdx index d7577f6f63..f9e244a48b 100644 --- a/src/content/tutorials/en/speak-with-your-hands.mdx +++ b/src/content/tutorials/en/speak-with-your-hands.mdx @@ -915,7 +915,7 @@ function drawObject() { -Control the [Recursive Tree](/examples/07_Repetition/05_Recursive_Tree) example or the direction of these [Smoke Particles](/examples/15_Math_And_Physics/03_Smoke_Particle_System) with your finger.  +Control the [Recursive Tree](/examples/repetition-recursive-tree/) example or the direction of these [Smoke Particles](/examples/math-and-physics-smoke-particle-system/) with your finger.  @@ -1071,4 +1071,4 @@ Using the Facemesh model, create the following: - [ml5.js library](https://ml5js.org/) - [ml5.js Handpose Examples](https://learn.ml5js.org/#/reference/handpose?id=examples) - [Computer Scientist Explains ML in 5 Levels](https://www.youtube.com/watch?v=5q87K1WaoFI\&t=665s) -- [Interactivity in p5.js](/tutorial/conditionals-and-interactivity) +- [Conditionals and Interactivity in p5.js](/tutorials/conditionals-and-interactivity/) diff --git a/src/content/tutorials/en/variables-and-change.mdx b/src/content/tutorials/en/variables-and-change.mdx index e0c8661af3..b44f0b2433 100644 --- a/src/content/tutorials/en/variables-and-change.mdx +++ b/src/content/tutorials/en/variables-and-change.mdx @@ -747,13 +747,13 @@ In this step, you: - added a tree made of a rectangle (tree trunk) and a triangle (leaves); - modified the value for the y-coordinate of the top corner of the triangle (`y2`) by subtracting it by `frameCount % 290` (see [triangle()](/reference/p5/triangle) Diagram for a reminder of `y2`): - Since you want the tree leaves to grow, the top corner of the triangle needs to move up on the canvas each time [`draw()`](/reference/p5/draw) runs. As seen in [this example](https://editor.p5js.org/p5Master718/sketches/605MEWNxh), the y-coordinate (`y2`) of the point that moves up on the canvas decreases.  - - To achieve this motion, you modified the value for `y2` by subtracting `240 - frameCount % 290`. This decreases `y2` by the remainder when [`frameCount`](/reference/p5/framecount) is divided by 290.  + - To achieve this motion, you modified the value for `y2` by subtracting `240 - frameCount % 290`. This decreases `y2` by the remainder when [`frameCount`](/reference/p5/frameCount) is divided by 290.  - As you saw in [Step 5](#step-5), each time the [`draw()`](/reference/p5/draw) function runs, the value returned by `frameCount % 290` increases by `1` so that `y2` also changes. - Before [`draw()`](/reference/p5/draw) runs, `y2` is `240`. - The first time [`draw()`](/reference/p5/draw) runs, the value from `frameCount % 290` is `1`, and `y2` becomes `239`. - The second time [`draw()`](/reference/p5/draw) runs, the value from `frameCount % 290` is `2`, and `y2` becomes `238`. - The third time [`draw()`](/reference/p5/draw) runs, the value in `frameCount % 290` is `3`, and `y2` becomes `237`. - - Once [`frameCount`](/reference/p5/framecount) becomes a number that is a multiple of `290`, the value in `frameCount % 290` is `0`, and `y2` is set back to its original value of `240`. + - Once [`frameCount`](/reference/p5/frameCount) becomes a number that is a multiple of `290`, the value in `frameCount % 290` is `0`, and `y2` is set back to its original value of `240`. - This pattern continues until [`draw()`](/reference/p5/draw) is stopped. Visit the following p5.js reference pages for more information: [`frameRate()`](/reference/p5/frameRate) | [`frameCount`](/reference/p5/frameCount) | [`triangle()`](/reference/p5/triangle)