Merge pull request #5560 from nickmcintyre/doc-edits

Assorted edits to inline docs

src/color/p5.Color.js

@@ -12,7 +12,7 @@ import * as constants from '../core/constants';
 import color_conversion from './color_conversion';
 
 /**
- * Each color stores the color mode and level maxes that was applied at the
+ * Each color stores the color mode and level maxes that were applied at the
  * time of its construction. These are used to interpret the input arguments
  * (at construction and later for that instance of color) and to format the
  * output e.g. when <a href="#/p5/saturation">saturation()</a> is requested.
@@ -21,7 +21,7 @@ import color_conversion from './color_conversion';
  * point form, normalized from 0 to 1. From this we calculate the closest
  * screen color (RGBA levels from 0 to 255) and expose this to the renderer.
  *
- * We also cache normalized, floating point components of the color in various
+ * We also cache normalized, floating-point components of the color in various
  * representations as they are calculated. This is done to prevent repeating a
  * conversion that has already been performed.
  *
@@ -49,7 +49,7 @@ p5.Color = function(pInst, vals) {
 };
 
 /**
- * This function returns the color formatted as a string. This can be useful
+ * This method returns the color formatted as a string. This can be useful
  * for debugging, or for using p5.js with other libraries.
  *
  * @method toString
@@ -252,7 +252,7 @@ p5.Color.prototype.toString = function(format) {
 };
 
 /**
- * The setRed function sets the red component of a color.
+ * The setRed method sets the red component of a color.
  * The range depends on your color mode, in the default RGB mode it's between 0 and 255.
  * @method setRed
  * @param {Number} red the new red value
@@ -279,7 +279,7 @@ p5.Color.prototype.setRed = function(new_red) {
 };
 
 /**
- * The setGreen function sets the green component of a color.
+ * The setGreen method sets the green component of a color.
  * The range depends on your color mode, in the default RGB mode it's between 0 and 255.
  * @method setGreen
  * @param {Number} green the new green value
@@ -302,7 +302,7 @@ p5.Color.prototype.setGreen = function(new_green) {
 };
 
 /**
- * The setBlue function sets the blue component of a color.
+ * The setBlue method sets the blue component of a color.
  * The range depends on your color mode, in the default RGB mode it's between 0 and 255.
  * @method setBlue
  * @param {Number} blue the new blue value
@@ -325,7 +325,7 @@ p5.Color.prototype.setBlue = function(new_blue) {
 };
 
 /**
- * The setAlpha function sets the transparency (alpha) value of a color.
+ * The setAlpha method sets the transparency (alpha) value of a color.
  * The range depends on your color mode, in the default RGB mode it's between 0 and 255.
  * @method setAlpha
  * @param {Number} alpha the new alpha value

src/color/setting.js

@@ -359,7 +359,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * and all named color strings are supported. In this case, an alpha number
  * value as a second argument is not supported, the RGBA form should be used.
  *
- * A p5 <a href="#/p5.Color">Color</a> object can also be provided to set the fill color.
+ * A <a href="#/p5.Color">p5.Color</a> object can also be provided to set the fill color.
  *
  * @method fill
  * @param  {Number}        v1      red or hue value relative to
@@ -594,7 +594,7 @@ p5.prototype.noStroke = function() {
  * number value as a second argument is not supported, the RGBA form should be
  * used.
  *
- * A p5 <a href="#/p5.Color">Color</a> object can also be provided to set the stroke color.
+ * A <a href="#/p5.Color">p5.Color</a> object can also be provided to set the stroke color.
  *
  * @method stroke
  * @param  {Number}        v1      red or hue value relative to

src/core/constants.js

@@ -154,8 +154,8 @@ export const TAU = _PI * 2;
  */
 export const TWO_PI = _PI * 2;
 /**
- * Constant to be used with <a href="#/p5/angleMode">angleMode()</a> function, to set the mode which
- * p5.js interprets and calculates angles (either DEGREES or RADIANS).
+ * Constant to be used with the <a href="#/p5/angleMode">angleMode()</a> function, to set the mode in
+ * which p5.js interprets and calculates angles (either DEGREES or RADIANS).
  * @property {String} DEGREES
  * @final
  *
@@ -168,8 +168,8 @@ export const TWO_PI = _PI * 2;
  */
 export const DEGREES = 'degrees';
 /**
- * Constant to be used with <a href="#/p5/angleMode">angleMode()</a> function, to set the mode which
- * p5.js interprets and calculates angles (either RADIANS or DEGREES).
+ * Constant to be used with the <a href="#/p5/angleMode">angleMode()</a> function, to set the mode
+ * in which p5.js interprets and calculates angles (either RADIANS or DEGREES).
  * @property {String} RADIANS
  * @final
  *

src/core/environment.js

@@ -53,7 +53,7 @@ p5.prototype.print = function(...args) {
  * The system variable <a href="#/p5/frameCount">frameCount</a> contains the
  * number of frames that have been displayed since the program started. Inside
  * <a href="#/p5/setup">setup()</a> the value is 0, after the first iteration
- * of draw it is 1, etc.
+ * of <a href="#/p5/draw">draw()</a> it is 1, etc.
  *
  * @property {Integer} frameCount
  * @readOnly
@@ -241,7 +241,7 @@ p5.prototype.cursor = function(type, x, y) {
  * return a value. This is the same as <a href="#/p5/getFrameRate">getFrameRate()</a>.
  *
  * Calling <a href="#/p5/frameRate">frameRate()</a> with arguments that are not
- * of the type numbers or are non positive also returns current framerate.
+ * of the type Number or are non-positive also returns current framerate.
  *
  * @method frameRate
  * @param  {Number} fps number of frames to be displayed every second
@@ -262,7 +262,7 @@ p5.prototype.cursor = function(type, x, y) {
  *
  * function draw() {
  *   background(200);
- *   rectX = rectX += 1; // Move Rectangle
+ *   rectX += 1; // Move Rectangle
  *
  *   if (rectX >= width) {
     // If you go off screen.

src/core/p5.Element.js

@@ -9,8 +9,8 @@ import p5 from './main';
 /**
  * Base class for all elements added to a sketch, including canvas,
  * graphics buffers, and other HTML elements. It is not called directly, but <a href="#/p5.Element">p5.Element</a>
- * objects are created by calling <a href="#/p5/createCanvas">createCanvas</a>, <a href="#/p5/createGraphics">createGraphics</a>,
- * <a href="#/p5/createDiv">createDiv</a>, <a href="#/p5/createImg">createImg</a>, <a href="#/p5/createInput">createInput</a>, etc.
+ * objects are created by calling <a href="#/p5/createCanvas">createCanvas()</a>, <a href="#/p5/createGraphics">createGraphics()</a>,
+ * <a href="#/p5/createDiv">createDiv()</a>, <a href="#/p5/createImg">createImg()</a>, <a href="#/p5/createInput">createInput()</a>, etc.
  *
  * @class p5.Element
  * @constructor
@@ -48,7 +48,7 @@ p5.Element = function(elt, pInst) {
  *
  * Attaches the element to the parent specified. A way of setting
  * the container for the element. Accepts either a string ID, DOM
- * node, or <a href="#/p5.Element">p5.Element</a>. If no arguments given, parent node is returned.
+ * node, or <a href="#/p5.Element">p5.Element</a>. If no arguments are given, parent node is returned.
  * For more ways to position the canvas, see the
  * <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>
  * positioning the canvas</a> wiki page.
@@ -116,7 +116,7 @@ p5.Element.prototype.parent = function(p) {
  * Sets the ID of the element. If no ID argument is passed in, it instead
  * returns the current ID of the element.
  * Note that only one element can have a particular id in a page.
- * The <a href="#/p5.Element/class">.class()</a> function can be used
+ * The <a href="#/p5.Element/class">class()</a> method can be used
  * to identify multiple elements with the same class name.
  *
  * @method id
@@ -187,10 +187,10 @@ p5.Element.prototype.class = function(c) {
 };
 
 /**
- * The .<a href="#/p5.Element/mousePressed">mousePressed()</a> function is called
+ * The <a href="#/p5.Element/mousePressed">mousePressed()</a> method is called
  * once after every time a mouse button is pressed over the element. Some mobile
  * browsers may also trigger this event on a touch screen, if the user performs
- * a quick tap. This can be used to attach element specific event listeners.
+ * a quick tap. This can be used to attach element-specific event listeners.
  *
  * @method mousePressed
  * @param  {Function|Boolean} fxn function to be fired when mouse is
@@ -244,9 +244,9 @@ p5.Element.prototype.mousePressed = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/doubleClicked">doubleClicked()</a> function is called once after every time a
+ * The <a href="#/p5.Element/doubleClicked">doubleClicked()</a> method is called once after every time a
  * mouse button is pressed twice over the element. This can be used to
- * attach element and action specific event listeners.
+ * attach element and action-specific event listeners.
  *
  * @method doubleClicked
  * @param  {Function|Boolean} fxn function to be fired when mouse is
@@ -290,18 +290,18 @@ p5.Element.prototype.doubleClicked = function(fxn) {
 };
 
 /**
- * The <a href="#/p5.Element/mouseWheel">mouseWheel()</a> function is called
+ * The <a href="#/p5.Element/mouseWheel">mouseWheel()</a> method is called
  * once after every time a mouse wheel is scrolled over the element. This can
- * be used to attach element specific event listeners.
+ * be used to attach element-specific event listeners.
  *
- * The function accepts a callback function as argument which will be executed
+ * The method accepts a callback function as argument which will be executed
  * when the `wheel` event is triggered on the element, the callback function is
  * passed one argument `event`. The `event.deltaY` property returns negative
  * values if the mouse wheel is rotated up or away from the user and positive
  * in the other direction. The `event.deltaX` does the same as `event.deltaY`
  * except it reads the horizontal wheel scroll of the mouse wheel.
  *
- * On OS X with "natural" scrolling enabled, the `event.deltaY` values are
+ * On macOS with "natural" scrolling enabled, the `event.deltaY` values are
  * reversed.
  *
  * @method mouseWheel
@@ -352,10 +352,10 @@ p5.Element.prototype.mouseWheel = function(fxn) {
 };
 
 /**
- * The <a href="#/p5.Element/mouseReleased">mouseReleased()</a> function is
+ * The <a href="#/p5.Element/mouseReleased">mouseReleased()</a> method is
  * called once after every time a mouse button is released over the element.
  * Some mobile browsers may also trigger this event on a touch screen, if the
- * user performs a quick tap. This can be used to attach element specific event listeners.
+ * user performs a quick tap. This can be used to attach element-specific event listeners.
  *
  * @method mouseReleased
  * @param  {Function|Boolean} fxn function to be fired when mouse is
@@ -401,10 +401,10 @@ p5.Element.prototype.mouseReleased = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/mouseClicked">mouseClicked()</a> function is
+ * The <a href="#/p5.Element/mouseClicked">mouseClicked()</a> method is
  * called once after a mouse button is pressed and released over the element.
  * Some mobile browsers may also trigger this event on a touch screen, if the
- * user performs a quick tap.This can be used to attach element specific event listeners.
+ * user performs a quick tap. This can be used to attach element-specific event listeners.
  *
  * @method mouseClicked
  * @param  {Function|Boolean} fxn function to be fired when mouse is
@@ -452,9 +452,9 @@ p5.Element.prototype.mouseClicked = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/mouseMoved">mouseMoved()</a> function is called once every time a
+ * The <a href="#/p5.Element/mouseMoved">mouseMoved()</a> method is called once every time a
  * mouse moves over the element. This can be used to attach an
- * element specific event listener.
+ * element-specific event listener.
  *
  * @method mouseMoved
  * @param  {Function|Boolean} fxn function to be fired when a mouse moves
@@ -508,9 +508,9 @@ p5.Element.prototype.mouseMoved = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/mouseOver">mouseOver()</a> function is called once after every time a
+ * The <a href="#/p5.Element/mouseOver">mouseOver()</a> method is called once after every time a
  * mouse moves onto the element. This can be used to attach an
- * element specific event listener.
+ * element-specific event listener.
  *
  * @method mouseOver
  * @param  {Function|Boolean} fxn function to be fired when a mouse moves
@@ -549,9 +549,9 @@ p5.Element.prototype.mouseOver = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/mouseOut">mouseOut()</a> function is called once after every time a
+ * The <a href="#/p5.Element/mouseOut">mouseOut()</a> method is called once after every time a
  * mouse moves off the element. This can be used to attach an
- * element specific event listener.
+ * element-specific event listener.
  *
  * @method mouseOut
  * @param  {Function|Boolean} fxn function to be fired when a mouse
@@ -590,8 +590,8 @@ p5.Element.prototype.mouseOut = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/touchStarted">touchStarted()</a> function is called once after every time a touch is
- * registered. This can be used to attach element specific event listeners.
+ * The <a href="#/p5.Element/touchStarted">touchStarted()</a> method is called once after every time a touch is
+ * registered. This can be used to attach element-specific event listeners.
  *
  * @method touchStarted
  * @param  {Function|Boolean} fxn function to be fired when a touch
@@ -637,8 +637,8 @@ p5.Element.prototype.touchStarted = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/touchMoved">touchMoved()</a> function is called once after every time a touch move is
- * registered. This can be used to attach element specific event listeners.
+ * The <a href="#/p5.Element/touchMoved">touchMoved()</a> method is called once after every time a touch move is
+ * registered. This can be used to attach element-specific event listeners.
  *
  * @method touchMoved
  * @param  {Function|Boolean} fxn function to be fired when a touch moves over
@@ -676,8 +676,8 @@ p5.Element.prototype.touchMoved = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/touchEnded">touchEnded()</a> function is called once after every time a touch is
- * registered. This can be used to attach element specific event listeners.
+ * The <a href="#/p5.Element/touchEnded">touchEnded()</a> method is called once after every time a touch is
+ * registered. This can be used to attach element-specific event listeners.
  *
  * @method touchEnded
  * @param  {Function|Boolean} fxn function to be fired when a touch ends
@@ -723,9 +723,9 @@ p5.Element.prototype.touchEnded = function(fxn) {
 };
 
 /**
- * The .<a href="#/p5.Element/dragOver">dragOver()</a> function is called once after every time a
+ * The <a href="#/p5.Element/dragOver">dragOver()</a> method is called once after every time a
  * file is dragged over the element. This can be used to attach an
- * element specific event listener.
+ * element-specific event listener.
  *
  * @method dragOver
  * @param  {Function|Boolean} fxn function to be fired when a file is
@@ -761,9 +761,9 @@ p5.Element.prototype.dragOver = function(fxn) {
 };
 
 /**
- * The .dragLeave() function is called once after every time a
+ * The <a href="#/p5.Element/dragLeave">dragLeave()</a> method is called once after every time a
  * dragged file leaves the element area. This can be used to attach an
- * element specific event listener.
+ * element-specific event listener.
  *
  * @method dragLeave
  * @param  {Function|Boolean} fxn function to be fired when a file is

src/core/rendering.js

@@ -13,11 +13,11 @@ let defaultId = 'defaultCanvas0'; // this gets set again in createCanvas
 const defaultClass = 'p5Canvas';
 
 /**
- * Creates a canvas element in the document, and sets the dimensions of it
- * in pixels. This method should be called only once at the start of setup.
+ * Creates a canvas element in the document and sets its dimensions
+ * in pixels. This method should be called only once at the start of <a href="#/p5/setup">setup()</a>.
  * Calling <a href="#/p5/createCanvas">createCanvas</a> more than once in a
  * sketch will result in very unpredictable behavior. If you want more than
- * one drawing canvas you could use <a href="#/p5/createGraphics">createGraphics</a>
+ * one drawing canvas you could use <a href="#/p5/createGraphics">createGraphics()</a>
  * (hidden by default but it can be shown).
  *
  * Important note: in 2D mode (i.e. when `p5.Renderer` is not set) the origin (0,0)
@@ -37,7 +37,7 @@ const defaultClass = 'p5Canvas';
  * @param  {Number} w width of the canvas
  * @param  {Number} h height of the canvas
  * @param  {Constant} [renderer] either P2D or WEBGL
- * @return {p5.Renderer}
+ * @return {p5.Renderer} pointer to p5.Renderer holding canvas
  * @example
  * <div>
  * <code>