Merge pull request #57 from processing/proofreading

Apply documentation changes from proofreader

Author: calebfoss

examples/01_Shapes_And_Color/01_Color.js

@@ -10,9 +10,9 @@
  * sets the color for the inside of shapes.
  * <a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noStroke()</a> and
  * <a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noFill()</a>
- * turns off line color or inner color respectively.
+ * turn off line color and inner color, respectively.
  *
- * Colors can be represented in many different ways. This examples demonstrate several options.
+ * Colors can be represented in many different ways. This example demonstrates several options.
  */
 
 function setup() {
@@ -23,7 +23,7 @@ function setup() {
   angleMode(DEGREES);
 
   // CSS color name
-  // For a list of available color names see:
+  // For a list of available color names, see:
   // https://www.w3.org/wiki/CSS/Properties/color/keywords
   background('steelblue');
 
@@ -43,8 +43,8 @@ function setup() {
   // Dark red
   stroke(100, 20, 20);
 
-  // The rectangle uses the last set fill color
-  // which is light blue set before drawing the square
+  // The rectangle uses the last set fill color,
+  // which is light blue, set before drawing the square
   rect(100, 40, 200, 100);
 
   // Hue, saturation, and brightness values

examples/02_Animation_And_Variables/00_Drawing_Lines.js

@@ -28,7 +28,7 @@ function setup() {
   // Set width of the lines
   strokeWeight(10);
 
-  // Set color mode to hue-saturation-value (HSB)
+  // Set color mode to hue-saturation-brightness (HSB)
   colorMode(HSB);
 
   // Set screen reader accessible description

examples/02_Animation_And_Variables/01_Animation_With_Events.js

@@ -6,7 +6,7 @@
  * <a href="https://p5js.org/reference/#/p5/noLoop">noLoop()</a>
  * to pause and resume the animation.
  *
- * Clicking the mouse toggles the animation loop.  If the animation
+ * Clicking the mouse toggles the animation loop. If the animation
  * loop is stopped, the user can press any key to advance one frame.
  * Note: the user must click to set the focus on the canvas for
  * key presses to be registered.

examples/02_Animation_And_Variables/03_Conditions.js

@@ -3,7 +3,7 @@
  * @frame 400,400
  * @description If and else statements allow a
  * <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block" target="_blank">block of code</a>
- * to only run when a certain condition is true. This example only
+ * to run only when a certain condition is true. This example only
  * animates when the mouse is held down. This is because of the if
  * statement on line 59. You can read more about if and else statements
  * <a href="https://p5js.org/reference/#/p5/if-else">in the p5 reference</a>
@@ -23,7 +23,7 @@
  * 45, which checks that the circle's x position is at least 100 and also
  * no more than 300.
  * <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR" target="_blank">||</a>
- * checks that at least one of the conditions are true. The circle reverses horizontal
+ * checks that at least one of the conditions is true. The circle reverses horizontal
  * speed when it reaches the left or right edge of the canvas because of the if statement
  * on line 75.
  */

examples/03_Imported_Media/00_Words.js

@@ -11,7 +11,7 @@ let font;
 let fontsize = 40;
 
 function preload() {
-  // Preload the font's file in the canvas' assets directory.
+  // Preload the font's file in the canvas's assets directory.
   // loadFont() accepts .ttf or .otf files.
   font = loadFont('assets/SourceSansPro-Regular.otf');
 }

examples/03_Imported_Media/01_Copy_Image_Data.js

@@ -2,33 +2,33 @@
  * @name Copy Image Data
  * @frame 600,400
  * @description Using the <a href="https://p5js.org/reference/#/p5/copy" target="_blank">copy()</a> method,
- * you can simulate coloring an image in by copying an image of the colored image on top of the black and
+ * you can simulate coloring an image in by copying an image of the colored image on top of the black-and-
  * white image wherever the cursor is dragged.
  */
 
 // Define the global variables: bottomImg and topImg.
 let bottomImg, topImg;
 
 function preload() {
-  // Preload the images from the canvas' assets directory.
+  // Preload the images from the canvas's assets directory.
   // The bottomImg is the photograph with color,
   // and the topImg is the black-and-white photograph.
   bottomImg = loadImage('assets/parrot-color.png');
   topImg = loadImage('assets/parrot-bw.png');
 }
 function setup() {
   describe(
-    'Black and white photograph of a parrot. The cursor, when dragged across the canvas, adds color to the photograph.'
+    'Black-and-white photograph of a parrot. The cursor, when dragged across the canvas, adds color to the photograph.'
   );
 
   createCanvas(720, 400);
 
   // Hide the cursor and replace it with a picture of
-  // a paint brush.
+  // a paintbrush.
   noCursor();
   cursor('assets/brush.png', 20, -10);
 
-  // Load the top image (the black and white image).
+  // Load the top image (the black-and-white image).
   image(topImg, 0, 0);
 }
 function mouseDragged() {

examples/03_Imported_Media/02_Alpha_Mask.js

@@ -3,7 +3,7 @@
  * @description Using the <a href="https://p5js.org/reference/#/p5/mask" target="_blank">mask()</a> method,
  * you can create a mask for an image to specify the transparency in
  * different parts of the image. To run this example locally, you will need two
- * image files, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
+ * image files and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
  * local server</a>.
  */
 // Preload the image assets from the canvas
@@ -18,15 +18,15 @@ function preload() {
 
 function setup() {
   describe(
-    'Two photos, the one on the left labeled with "Masked Image," and the one on the right labeled with "Mask."'
+    'Two photos, the one on the left labeled with "Masked Image" and the one on the right labeled with "Mask."'
   );
   createCanvas(710, 400);
 
   // Use the mask() method to apply imgMask photo as a
   // mask for img.
   img.mask(imgMask);
 
-  //Set the alignment of the text labels.
+  // Set the alignment of the text labels.
   textAlign(LEFT, TOP);
 }
 
@@ -47,7 +47,7 @@ function draw() {
   );
   image(imgMask, 350, 0, 350, 350);
 
-  //Add labels to explain the images shown.
+  // Add labels to explain the images shown.
   textSize(24);
   fill(0);
   text('Masked Image', 10, 10);

examples/03_Imported_Media/03_Image_Transparency.js

@@ -5,7 +5,7 @@
  * <a href="https://p5js.org/reference/#/p5/tint" target="_blank">tint()</a>
  * function. Move the cursor left and right across the canvas to change the
  * image's position. To run this example
- * locally, you will need an image file, and a running
+ * locally, you will need an image file and a running
  * <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.
  */
 // Define the global variables: img, offset, and easing.
@@ -16,13 +16,13 @@ let offset = 0;
 let easing = 0.05;
 
 function preload() {
-  // Load the bottom image from the canvas' assets directory.
+  // Load the bottom image from the canvas's assets directory.
   img = loadImage('assets/moonwalk.jpg');
 }
 
 function setup() {
   describe(
-    "An astronaut on planet as the background with a slightly transparent version of this image on top that moves with the horizontal direction of the user's mouse."
+    "An astronaut on a planet as the background with a slightly transparent version of this image on top that moves with the horizontal direction of the user's mouse."
   );
 
   createCanvas(720, 400);

examples/03_Imported_Media/05_Video.js

@@ -17,7 +17,7 @@ function setup() {
   // Use the noCanvas() function to remove the canvas.
   noCanvas();
 
-  // Upload the video in the canvas' assets directory, and
+  // Upload the video in the canvas's assets directory, and
   // use the createVideo() function to load in the video to the code.
   // This createVideo() function will build a p5.MediaElement class.
   // It's best to upload multiple video formats so the video

examples/03_Imported_Media/06_Video_Canvas.js

@@ -16,7 +16,7 @@ let playing = false;
 function setup() {
   createCanvas(710, 400);
 
-  // Upload the video in the canvas' assets directory, and
+  // Upload the video in the canvas's assets directory, and
   // use the createVideo() function to load the video into the code.
   // It's best to upload multiple video formats so the video
   // is visible within different browsers.
@@ -49,11 +49,11 @@ function draw() {
 
 function mousePressed() {
   // When the canvas is clicked, check to see if the videos are
-  // paused or playing. If it is playing, pause the videos.
+  // paused or playing. If they are playing, pause the videos.
   if (playing) {
     video.pause();
   } else {
-    // If it is paused, play the videos.
+    // If they are paused, play the videos.
     video.loop();
   }