docs: fix punctuation issues in tutorials

Author: aashu2006

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

@@ -200,7 +200,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.
 

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

@@ -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

@@ -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.