Merge pull request #8075 from Nitin2332/reference-fix

Reference-fixes

Author: perminder-17

src/color/setting.js

@@ -439,6 +439,11 @@ p5.prototype.clip = function(callback, options) {
  * in RGB values. Calling `background(255, 204, 0)` sets the background a bright
  * yellow color.
  *
+ * The version of `background()` with four parameters interprets them as RGBA,
+ * HSBA, or HSLA colors, depending on the current
+ * <a href="#/p5/colorMode">colorMode()</a>. The last parameter sets the alpha
+ * (transparency) value.
+ *
  * @method background
  * @param {p5.Color} color  any value created by the <a href="#/p5/color">color()</a> function
  * @chainable
@@ -487,6 +492,19 @@ p5.prototype.clip = function(callback, options) {
  * function setup() {
  *   createCanvas(100, 100);
  *
+ *   // R, G, B, and Alpha values.
+ *   background(255, 0, 0, 128);
+ *
+ *   describe('A canvas with a semi-transparent red background.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
  *   // Use HSB color.
  *   colorMode(HSB);
  *
@@ -996,6 +1014,10 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * <a href="#/p5/colorMode">colorMode()</a>. The default color space is RGB,
  * with each value in the range from 0 to 255.
  *
+ * The version of `fill()` with four parameters interprets them as `RGBA`, `HSBA`,
+ * or `HSLA` colors, depending on the current <a href="#/p5/colorMode">colorMode()</a>. The last parameter
+ * sets the alpha (transparency) value.
+ *
  * @method fill
  * @param  {Number}        v1      red value if color mode is RGB or hue value if color mode is HSB.
  * @param  {Number}        v2      green value if color mode is RGB or saturation value if color mode is HSB.
@@ -1040,6 +1062,22 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * function setup() {
  *   createCanvas(100, 100);
  *
+ *   background(200);
+ *
+ *   // R, G, B, and Alpha values.
+ *   fill(255, 0, 0, 128);
+ *   square(20, 20, 60);
+ *
+ *   describe('A semi-transparent red square with a black outline.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
  *   background(100);
  *
  *   // Use HSB color.
@@ -1336,7 +1374,7 @@ p5.prototype.noStroke = function() {
  * Sets the color used to draw points, lines, and the outlines of shapes.
  *
  * Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn
- * after calling `stroke()` will be filled with the color orange. The way
+ * after calling `stroke()` will be outlined with the color orange. The way
  * these parameters are interpreted may be changed with the
  * <a href="#/p5/colorMode">colorMode()</a> function.
  *

src/core/shape/2d_primitives.js

@@ -111,8 +111,7 @@ p5.prototype._normalizeArcAngles = (
  * The fifth and sixth parameters, `start` and `stop`, set the angles
  * between which to draw the arc. Arcs are always drawn clockwise from
  * `start` to `stop`. The fifth and sixth parameters, start and stop, set the
- * angles between which to draw the arc. Arcs are always drawn clockwise from
- * start to stop. By default, angles are given in radians, but if angleMode
+ * angles between which to draw the arc. By default, angles are given in radians, but if angleMode
  * (DEGREES) is set, the function interprets the values in degrees.
  *
  * The seventh parameter, `mode`, is optional. It determines the arc's fill

src/core/shape/vertex.js

@@ -116,7 +116,7 @@ let isFirstContour = true;
  * </code>
  * </div>
  */
-p5.prototype.beginContour = function() {
+p5.prototype.beginContour = function () {
   if (this._renderer.isP3D) {
     this._renderer.beginContour();
   } else {
@@ -515,7 +515,7 @@ p5.prototype.beginContour = function() {
  * </code>
  * </div>
  */
-p5.prototype.beginShape = function(kind) {
+p5.prototype.beginShape = function (kind) {
   p5._validateParameters('beginShape', arguments);
   if (this._renderer.isP3D) {
     this._renderer.beginShape(...arguments);
@@ -802,7 +802,7 @@ p5.prototype.beginShape = function(kind) {
  * @param  {Number} z4 z-coordinate of the anchor point.
  * @chainable
  */
-p5.prototype.bezierVertex = function(...args) {
+p5.prototype.bezierVertex = function (...args) {
   p5._validateParameters('bezierVertex', args);
   if (this._renderer.isP3D) {
     this._renderer.bezierVertex(...args);
@@ -1210,7 +1210,7 @@ p5.prototype.bezierVertex = function(...args) {
  * </code>
  * </div>
  */
-p5.prototype.curveVertex = function(...args) {
+p5.prototype.curveVertex = function (...args) {
   p5._validateParameters('curveVertex', args);
   if (this._renderer.isP3D) {
     this._renderer.curveVertex(...args);
@@ -1319,7 +1319,7 @@ p5.prototype.curveVertex = function(...args) {
  * </code>
  * </div>
  */
-p5.prototype.endContour = function() {
+p5.prototype.endContour = function () {
   if (this._renderer.isP3D) {
     return this;
   }
@@ -1342,7 +1342,7 @@ p5.prototype.endContour = function() {
 };
 
 /**
- * Begins adding vertices to a custom shape.
+ * Stops adding vertices to a custom shape.
  *
  * The <a href="#/p5/beginShape">beginShape()</a> and `endShape()` functions
  * allow for creating custom shapes in 2D or 3D.
@@ -1417,6 +1417,37 @@ p5.prototype.endContour = function() {
  *
  * <div>
  * <code>
+ * function setup() {
+ *   createCanvas(200, 100);
+ *
+ *   background(240);
+ *
+ *   noFill();
+ *   stroke(0);
+ *
+ *   // Open shape (left)
+ *   beginShape();
+ *   vertex(20, 20);
+ *   vertex(80, 20);
+ *   vertex(80, 80);
+ *   endShape();  // Not closed
+ *
+ *   // Closed shape (right)
+ *   beginShape();
+ *   vertex(120, 20);
+ *   vertex(180, 20);
+ *   vertex(180, 80);
+ *   endShape(CLOSE);  // Closed
+ *
+ *   describe(
+ *     'Two right-angled shapes on a light gray background. The left shape is open with three lines. The right shape is closed, forming a triangle.'
+ *   );
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
  * // Note: A "uniform" is a global variable within a shader program.
  *
  * // Create a string with the vertex shader program.
@@ -1504,7 +1535,7 @@ p5.prototype.endContour = function() {
  * </code>
  * </div>
  */
-p5.prototype.endShape = function(mode, count = 1) {
+p5.prototype.endShape = function (mode, count = 1) {
   p5._validateParameters('endShape', arguments);
   if (count < 1) {
     console.log('🌸 p5.js says: You can not have less than one instance');
@@ -1807,7 +1838,7 @@ p5.prototype.endShape = function(mode, count = 1) {
  * @param  {Number} y3
  * @param  {Number} z3 z-coordinate of the anchor point.
  */
-p5.prototype.quadraticVertex = function(...args) {
+p5.prototype.quadraticVertex = function (...args) {
   p5._validateParameters('quadraticVertex', args);
   if (this._renderer.isP3D) {
     this._renderer.quadraticVertex(...args);
@@ -2034,7 +2065,7 @@ p5.prototype.quadraticVertex = function(...args) {
  * @param  {Number} [v]   v-coordinate of the vertex's texture. Defaults to 0.
  * @chainable
  */
-p5.prototype.vertex = function(x, y, moveTo, u, v) {
+p5.prototype.vertex = function (x, y, moveTo, u, v) {
   if (this._renderer.isP3D) {
     this._renderer.vertex(...arguments);
   } else {
@@ -2245,7 +2276,7 @@ p5.prototype.vertex = function(x, y, moveTo, u, v) {
  * @param  {Number} z z-component of the vertex normal.
  * @chainable
  */
-p5.prototype.normal = function(x, y, z) {
+p5.prototype.normal = function (x, y, z) {
   this._assert3d('normal');
   p5._validateParameters('normal', arguments);
   this._renderer.normal(...arguments);

src/core/transform.js

@@ -1181,7 +1181,7 @@ p5.prototype.shearX = function(angle) {
  * function draw() {
  *   background(200);
  *
- *   // Shear the coordinate system along the x-axis.
+ *   // Shear the coordinate system along the y-axis.
  *   shearY(QUARTER_PI);
  *
  *   // Draw the square.
@@ -1204,7 +1204,7 @@ p5.prototype.shearX = function(angle) {
  * function draw() {
  *   background(200);
  *
- *   // Shear the coordinate system along the x-axis.
+ *   // Shear the coordinate system along the y-axis.
  *   shearY(45);
  *
  *   // Draw the square.