docs: apply punctuation fixes to tutorials and url conventions (2.0)

Author: aashu2006

docs/url_conventions.md

@@ -36,7 +36,7 @@ Instead write (or generate) links that follow the rules above.
 
 ## Case in URLs
 
-URL casing is somewhat inconsistent across the website.  Guidelines for new resources:
+URL casing is somewhat inconsistent across the website. Guidelines for new resources:
 
 * Prefer lower-case
 * Spaces should not be used in URLs.
@@ -51,7 +51,7 @@ URL casing is somewhat inconsistent across the website.  Guidelines for new reso
 
 ### A case exception: reference pages
 
-In reference pages, the URLs follow the names of the functions, classes, and variables.  So, they include some capitals and use "camel-case" e.g. `createCanvas`.
+In reference pages, the URLs follow the names of the functions, classes, and variables. So, they include some capitals and use "camel-case" e.g. `createCanvas`.
 
 #### Examples of reference page URLs
 * https://p5js.org/reference/p5.Vector/fromAngle/

src/content/tutorials/en/animating-with-media-objects.mdx

@@ -57,8 +57,8 @@ Explore [this example](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB)
 ### Things you’ll need<a id="things-youll-need"></a>
 
 - A computer with access to the internet
-- An account on the  [p5.js Web Editor](https://editor.p5js.org/)
-- Four source image files to download for this tutorial: 
+- An account on the [p5.js Web Editor](https://editor.p5js.org/)
+- Four source image files to download for this tutorial:
   - [Flower 1 (PNG)](/assets/flower-1.png)
   - [Flower 2 (PNG)](/assets/flower-2.png)
   - [Flower 3 (PNG)](/assets/flower-3.png)
@@ -69,7 +69,7 @@ Explore [this example](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB)
   - conditional statements
   - creating custom functions with parameters
 
-For more information on these concepts see these tutorials: [Get Started](/tutorials/get-started),  [Variables and Change](/tutorials/variables-and-change), [Conditionals and Interactivity](/tutorials/conditionals-and-interactivity), and [Organizing Code with Functions](/tutorials/organizing-code-with-functions).
+For more information on these concepts see these tutorials: [Get Started](/tutorials/get-started), [Variables and Change](/tutorials/variables-and-change), [Conditionals and Interactivity](/tutorials/conditionals-and-interactivity), and [Organizing Code with Functions](/tutorials/organizing-code-with-functions).
 
 
 ## Step 1 – Upload image files to the sketch folder
@@ -85,7 +85,7 @@ For more information on these concepts see these tutorials: [Get Started](/tutor
 
 #### Image files
 
-Image files store the grid of colored pixels that make up an image. There are a number of different image file types that p5.js can process.. The most common image types are JPEGs, PNGs, or GIFs. You can identify them by the extension found at the end of their filenames: `.jpg`, `.png`, `.gif`.
+Image files store the grid of colored pixels that make up an image. There are a number of different image file types that p5.js can process. The most common image types are JPEGs, PNGs, or GIFs. You can identify them by the extension found at the end of their filenames: `.jpg`, `.png`, `.gif`.
 
 JPEGs and PNGs are among the most common types of static images, which are images that do not move. JPEGs often refer to photographs, whereas PNGs often refer to graphics and designs, as they support images with transparent backgrounds. The term GIF is widely used for animated images. They contain a series of images that can be displayed as an animation.
 
@@ -192,7 +192,7 @@ function draw() {
 
 ### [`image()`](/reference/p5/image)
 
-The `image()` function draws a `p5.Image` object on the canvas. At least three arguments are needed to call `image()`: the variable that was assigned the p5.Image object , the x-coordinate, and the y-coordinate: `image(img, x, y, width);`
+The `image()` function draws a `p5.Image` object on the canvas. At least three arguments are needed to call `image()`: the variable that was assigned the p5.Image object, the x-coordinate, and the y-coordinate: `image(img, x, y, width);`
 
 Visit the p5.js Reference on [`image()`](/reference/p5/image) to see more ways you can specify how an image is drawn.
 
@@ -345,7 +345,7 @@ function draw() {
 
 - In the `draw()` function, start a new if-statement by typing `if (mouseIsPressed) {}`
   - Any functions placed inside this if-statement’s body (between the curly braces) will only be performed while the mouse is pressed.
-- Inside the curly brackets, add a line of code: `flowerY -= 1`; 
+- Inside the curly brackets, add a line of code: `flowerY -= 1`;
   - This decrements the `flowerY` value by 1 so the flowers will move farther up the canvas while the mouse is pressed.
 - Right underneath it, add another line of code: `flowerSize += 1;`
   - This increments the `flowerSize` variable by 1 so the flower images will grow in size while the mouse is pressed.

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

@@ -79,7 +79,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/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:
 

src/content/tutorials/en/simple-melody-app.mdx.todo

@@ -19,11 +19,11 @@ import Callout from "../../../components/Callout/index.astro";
 
 ## Introduction
 
-[Music](https://www.britannica.com/art/music) is used by cultures around the world as a way to communicate their histories, emotions and experiences by combining vocal or instrumental [sounds](https://www.britannica.com/science/sound-physics). One of music's basic elements is a [*melody:*](https://www.masterclass.com/articles/music-101-what-is-melody) a group of musical notes that form compositions of sounds that are pleasing to hear.  In this tutorial you will explore how to use [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects to generate musical notes, and develop an web application where users create melodies, and play them back!
+[Music](https://www.britannica.com/art/music) is used by cultures around the world as a way to communicate their histories, emotions and experiences by combining vocal or instrumental [sounds](https://www.britannica.com/science/sound-physics). One of music's basic elements is a [*melody:*](https://www.masterclass.com/articles/music-101-what-is-melody) a group of musical notes that form compositions of sounds that are pleasing to hear. In this tutorial you will explore how to use [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects to generate musical notes, and develop an web application where users create melodies, and play them back!
 
 This tutorial is part 1 in a series of 3 tutorials that walk you through creating different versions of a melody app. 
 
-- Part 1: In this tutorial you will develop a [simple melody app](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) where users can compose melodies from a musical scale, and play them back.  
+- Part 1: In this tutorial you will develop a [simple melody app](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) where users can compose melodies from a musical scale, and play them back.
 - Part 2: In [Getting Started with Node.js](/tutorials/getting-started-with-nodejs), you will learn how to use [Node.js](https://nodejs.org/en/about) and [Express.js](https://expressjs.com/) to route [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) requests that retrieve and play melodies saved on your computer. 
 - Part 3: In Melody App with Node.js (coming soon!), you will learn how to integrate your [simple melody app](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) with [Node.js](https://nodejs.org/en/about) and [Express.js](https://expressjs.com/). You will develop a more complex Melody App where users can heir melodies onto their computers, and retrieve them for playback later.
 
@@ -61,7 +61,7 @@ Skip to [Play musical notes with oscillators](#play-musical-notes-with-oscillato
 
 ### p5.Oscillator objects<a id="p5-oscillator-objects"></a>
 
-[`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!
+[`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).
 
@@ -103,7 +103,7 @@ We can see in the gif above that the tuning fork vibrates the [particles of matt
 
 To get a better idea of how sound travels through matter, check out [this video](https://www.youtube.com/watch?v=px3oVGXr4mo) that demonstrates pressure waves formed by the sound of a clap!
 
-Learn more about the science behind pressure waves and sound by visiting these resources: [Particle Theory of Matter](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter),  [Sound as a Pressure Wave](https://www.physicsclassroom.com/class/sound/u11l1c.cfm) and [Waves and the eardrum](https://www.physicsclassroom.com/mmedia/waves/edl.cfm).
+Learn more about the science behind pressure waves and sound by visiting these resources: [Particle Theory of Matter](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter), [Sound as a Pressure Wave](https://www.physicsclassroom.com/class/sound/u11l1c.cfm) and [Waves and the eardrum](https://www.physicsclassroom.com/mmedia/waves/edl.cfm).
 
 
 ### 1.2 - Periodic waves and sound<a id="pressure-waves"></a>
@@ -261,7 +261,7 @@ Next, we'll enable a user to start the oscillator when they click the canvas by
 
 - Run your code. You should hear middle C play after clicking on the canvas. 
 
-If you do not hear any sounds after clicking the canvas , check that your code looks [like this](https://editor.p5js.org/Msqcoding/sketches/ObN4r-VJo). If a sound does not play, check that your browser settings allow for playing multimedia. You can use the following resources to help you:
+If you do not hear any sounds after clicking the canvas, check that your code looks [like this](https://editor.p5js.org/Msqcoding/sketches/ObN4r-VJo). If a sound does not play, check that your browser settings allow for playing multimedia. You can use the following resources to help you:
 
 - [Chrome Settings](https://support.google.com/chrome/answer/9692215?hl=en)
 - [Safari Settings](https://testgenius.com/help/safari-enable-auto-play-settings.pdf)

src/content/tutorials/en/speak-with-your-hands.mdx.todo

@@ -22,13 +22,13 @@ Picture this: You're making a flower on your computer using p5.js. As you open y
 
 ## Prerequisites
 
-Before we start, you should know how to use some basic coding concepts like: 
+Before we start, you should know how to use some basic coding concepts like:
 
 - variables, 
 - arrays, 
 - loops, 
 - objects, 
-- interactivity with the mouse. 
+- interactivity with the mouse.
 
 You Will Need:
 
@@ -39,7 +39,7 @@ You Will Need:
 
 In past tutorials with interactivity, we learned how to use tools like the mouse and keyboard (physical objects) to interact with the computer. These tools have helped us talk with computers for many years. But now, we don't always need them. In this tutorial, we're going to learn how to control our p5.js drawings directly with our hands, like a magician waving her wand!
 
-To do this, we will use the [ml5.js library](https://ml5js.org/) and a *machine learning model* called [HandPose](https://docs.ml5js.org/#/reference/handpose). The ml5.js HandPose model figures out the positions of your hand on the computer screen. 
+To do this, we will use the [ml5.js library](https://ml5js.org/) and a *machine learning model* called [HandPose](https://docs.ml5js.org/#/reference/handpose). The ml5.js HandPose model figures out the positions of your hand on the computer screen.
 
 *Machine learning* is like teaching a computer to learn and make choices by showing it lots of examples. The code looks at the examples and creates connections, kind of like how we learn. If we want to teach it to know the difference between cats and dogs, we show it lots of pictures and tell it which ones are cats and which ones are dogs. The more examples you show the machine learning model, the better it gets. You could then show it a new picture, and it would be able to tell if it's a cat or a dog. That's machine learning in action. For more examples of machine learning, watch [this video](https://www.youtube.com/watch?v=5q87K1WaoFI\&t=665s) on Youtube.
 
@@ -53,7 +53,7 @@ The [ml5.js](https://ml5js.org/) [HandPose](https://docs.ml5js.org/#/reference/h
   ![The ml5.js Handpose\_Image code running in the p5.js Web Editor. An image of a hand is shown on the canvas with green dots on various points along each finger and palm. The text Handpose with single image is displayed above the canvas.](../images/advanced/handpose-web-editor.png)
 
 
-- Download the image of the hand from [this link](https://raw.githubusercontent.com/ml5js/ml5-library/49b9bf2/examples/p5js/Handpose/Handpose_Image/data/hand.jpg) and name it `hand.jpg`. Upload it inside your data folder. If the image already exists in the folder, replace it. 
+- Download the image of the hand from [this link](https://raw.githubusercontent.com/ml5js/ml5-library/49b9bf2/examples/p5js/Handpose/Handpose_Image/data/hand.jpg) and name it `hand.jpg`. Upload it inside your data folder. If the image already exists in the folder, replace it.
 
 <Columns>
 <Column>
@@ -124,7 +124,7 @@ function drawKeypoints() {
 
 Let's dive into how [ml5.js](https://ml5js.org/) works, especially with the [HandPose](https://docs.ml5js.org/#/reference/handpose) model. [ml5.js](https://ml5js.org/) is a tool made to help us all use machine learning easily. It works great with p5.js, which means our computer can "see, hear, and understand" stuff using a camera, just like we do!
 
-The [HandPose](https://docs.ml5js.org/#/reference/handpose) model uses image recognition algorithms to recognize your hand. It can spot your palm and fingers and keep track of them as you move your hand around in front of the camera. It can only detect one one hand at a time, but it can identify 21 different key-points on the hand in 3D space. This means that it gives us the x-y-z coordinates of each point. These key-points show us key parts of your palm and fingers. 
+The [HandPose](https://docs.ml5js.org/#/reference/handpose) model uses image recognition algorithms to recognize your hand. It can spot your palm and fingers and keep track of them as you move your hand around in front of the camera. It can only detect one one hand at a time, but it can identify 21 different key-points on the hand in 3D space. This means that it gives us the x-y-z coordinates of each point. These key-points show us key parts of your palm and fingers.
 
 Now let’s start with the static image to see this in action.
 
@@ -933,7 +933,7 @@ In the `drawObject()` function:
 - Next, we measure how far apart these two points are. This distance helps us figure out if your hand is open or closed.
   - If your hand is wide open (the distance is bigger than our set threshold), we decide that our flower should be fully bloomed.
   - We have already set our threshold to 100. If we decide our flower should be bloomed we set targetSize to 200 pixels.
-- Now, we move to the middle of our drawing area `(translate(width / 2, height / 2))` so we can draw our flower right in the center.We choose how our drawing will look by setting `noStroke()` (which means no outline) and `fill(220, 20, 60, 50)` to give our flower a lovely pink color. 
+- Now, we move to the middle of our drawing area `(translate(width / 2, height / 2))` so we can draw our flower right in the center. We choose how our drawing will look by setting `noStroke()` (which means no outline) and `fill(220, 20, 60, 50)` to give our flower a lovely pink color.
 - We smoothly change the size of our flower bloom to match the `targetSize` we decided earlier, using a function called lerp. This makes the change look smooth and natural.
 - Finally, we draw our flower. We draw each petal one by one in a circle to make the whole bloom. For each petal, we use the ellipse function to draw it, then rotate a little before drawing the next petal, so they spread out nicely.