Beau Muylle
📖
Ivy Feraco
🐛
Gareth Williams
💻
Ikko Ashimine
📖
Jonas Rinke
🐛
MATSUDA, Kouichi
🐛
stampyzfanz
📖
diff --git a/src/core/shape/2d_primitives.js b/src/core/shape/2d_primitives.js
index bc78959192..7484433b16 100644
--- a/src/core/shape/2d_primitives.js
+++ b/src/core/shape/2d_primitives.js
@@ -243,8 +243,8 @@ p5.prototype.arc = function(x, y, w, h, start, stop, mode, detail) {
* with the ellipseMode() function.
*
* @method ellipse
- * @param {Number} x x-coordinate of the center of ellipse.
- * @param {Number} y y-coordinate of the center of ellipse.
+ * @param {Number} x x-coordinate of the center of the ellipse.
+ * @param {Number} y y-coordinate of the center of the ellipse.
* @param {Number} w width of the ellipse.
* @param {Number} [h] height of the ellipse.
* @chainable
@@ -264,7 +264,7 @@ p5.prototype.arc = function(x, y, w, h, start, stop, mode, detail) {
* @param {Number} y
* @param {Number} w
* @param {Number} h
- * @param {Integer} [detail] optional parameter for WebGL mode only. This is to
+ * @param {Integer} [detail] optional parameter for WEBGL mode only. This is to
* specify the number of vertices that makes up the
* perimeter of the ellipse. Default value is 25. Won't
* draw a stroke for a detail of more than 50.
@@ -277,15 +277,16 @@ p5.prototype.ellipse = function(x, y, w, h, detailX) {
/**
* Draws a circle to the screen. A circle is a simple closed shape. It is the set
* of all points in a plane that are at a given distance from a given point,
- * the centre. This function is a special case of the ellipse() function, where
- * the width and height of the ellipse are the same. Height and width of the
- * ellipse correspond to the diameter of the circle. By default, the first two
- * parameters set the location of the centre of the circle, the third sets the
- * diameter of the circle.
+ * the center. This function is a special case of the
+ * ellipse() function, where the width and height
+ * of the ellipse are the same. Height and width of the ellipse correspond to
+ * the diameter of the circle. By default, the first two parameters set the
+ * location of the center of the circle, the third sets the diameter of the
+ * circle.
*
* @method circle
- * @param {Number} x x-coordinate of the centre of the circle.
- * @param {Number} y y-coordinate of the centre of the circle.
+ * @param {Number} x x-coordinate of the center of the circle.
+ * @param {Number} y y-coordinate of the center of the circle.
* @param {Number} d diameter of the circle.
* @chainable
* @example
@@ -481,7 +482,7 @@ p5.prototype.point = function(...args) {
};
/**
- * Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is
+ * Draws a quad on the canvas. A quad is a quadrilateral, a four-sided polygon. It is
* similar to a rectangle, but the angles between its edges are not
* constrained to ninety degrees. The first pair of parameters (x1,y1)
* sets the first vertex and the subsequent pairs should proceed
@@ -557,7 +558,7 @@ p5.prototype.quad = function(...args) {
* Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with
* every angle at ninety degrees. By default, the first two parameters set
* the location of the upper-left corner, the third sets the width, and the
- * fourth sets the height. The way these parameters are interpreted, may be
+ * fourth sets the height. The way these parameters are interpreted may be
* changed with the rectMode() function.
*
* The fifth, sixth, seventh and eighth parameters, if specified,
diff --git a/src/core/shape/attributes.js b/src/core/shape/attributes.js
index e65352d500..84d6158bd3 100644
--- a/src/core/shape/attributes.js
+++ b/src/core/shape/attributes.js
@@ -103,11 +103,12 @@ p5.prototype.ellipseMode = function(m) {
* 2 pixelated 36×36 white ellipses to left & right of center, black background
*/
p5.prototype.noSmooth = function() {
- this.setAttributes('antialias', false);
if (!this._renderer.isP3D) {
if ('imageSmoothingEnabled' in this.drawingContext) {
this.drawingContext.imageSmoothingEnabled = false;
}
+ } else {
+ this.setAttributes('antialias', false);
}
return this;
};
@@ -123,7 +124,7 @@ p5.prototype.noSmooth = function() {
* rectMode(CORNERS) interprets the first two parameters as the location of
* one of the corners, and the third and fourth parameters as the location of
* the diagonally opposite corner. Note, the rectangle is drawn between the
- * coordinates, so it is not neccesary that the first corner be the upper left
+ * coordinates, so it is not necessary that the first corner be the upper left
* corner.
*
* rectMode(CENTER) interprets the first two parameters as the shape's center
diff --git a/src/core/shape/curves.js b/src/core/shape/curves.js
index 73c0ff4ee3..4be0237f1a 100644
--- a/src/core/shape/curves.js
+++ b/src/core/shape/curves.js
@@ -454,7 +454,7 @@ p5.prototype.curveTightness = function(t) {
* @param {Number} c coordinate of second point
* @param {Number} d coordinate of second control point
* @param {Number} t value between 0 and 1
- * @return {Number} bezier value at position t
+ * @return {Number} Curve value at position t
* @example
*
*
diff --git a/src/core/shape/vertex.js b/src/core/shape/vertex.js
index 775889f3dc..b6abe9aec6 100644
--- a/src/core/shape/vertex.js
+++ b/src/core/shape/vertex.js
@@ -89,12 +89,12 @@ p5.prototype.beginContour = function() {
* Draw a series of connected triangles in strip fashion
*
* QUADS
- * Draw a series of separate quad
+ * Draw a series of separate quads
*
* QUAD_STRIP
* Draw quad strip using adjacent edges to form the next quad
*
- * TESS (WebGl only)
+ * TESS (WEBGL only)
* Handle irregular polygon for filling curve by explicit tessellation
*
* After calling the beginShape() function, a series of vertex() commands must follow. To stop
@@ -582,9 +582,9 @@ p5.prototype.endContour = function() {
/**
* The endShape() function is the companion to beginShape() and may only be
- * called after beginShape(). When endShape() is called, all of image data
- * defined since the previous call to beginShape() is written into the image
- * buffer. The constant CLOSE as the value for the MODE parameter to close
+ * called after beginShape(). When endShape() is called, all of the image
+ * data defined since the previous call to beginShape() is written into the image
+ * buffer. The constant CLOSE as the value for the `mode` parameter to close
* the shape (to connect the beginning and the end).
*
* @method endShape
@@ -781,7 +781,7 @@ p5.prototype.endShape = function(mode) {
*
*
* @alt
- * backwards s-shaped black line with the same s-shaped line in postive z-axis.
+ * backwards s-shaped black line with the same s-shaped line in positive z-axis.
*/
p5.prototype.quadraticVertex = function(...args) {
p5._validateParameters('quadraticVertex', args);
@@ -958,7 +958,7 @@ p5.prototype.quadraticVertex = function(...args) {
* @method vertex
* @param {Number} x
* @param {Number} y
- * @param {Number} z z-coordinate of the vertex.
+ * @param {Number} [z] z-coordinate of the vertex.
* Defaults to 0 if not specified.
* @chainable
*/
@@ -967,8 +967,8 @@ p5.prototype.quadraticVertex = function(...args) {
* @param {Number} x
* @param {Number} y
* @param {Number} [z]
- * @param {Number} u the vertex's texture u-coordinate
- * @param {Number} v the vertex's texture v-coordinate
+ * @param {Number} [u] the vertex's texture u-coordinate
+ * @param {Number} [v] the vertex's texture v-coordinate
* @chainable
*/
p5.prototype.vertex = function(x, y, moveTo, u, v) {
diff --git a/src/core/structure.js b/src/core/structure.js
index b01dc9e94e..85f66004dc 100644
--- a/src/core/structure.js
+++ b/src/core/structure.js
@@ -28,7 +28,7 @@ import p5 from './main';
* has been specified. Otherwise, the sketch would enter an odd state until
* loop() was called.
*
- * Use isLooping() to check current state of loop().
+ * Use isLooping() to check the current state of loop().
*
* @method noLoop
* @example
@@ -88,7 +88,7 @@ p5.prototype.noLoop = function() {
*
* Avoid calling loop() from inside setup().
*
- * Use isLooping() to check current state of loop().
+ * Use isLooping() to check the current state of loop().
*
* @method loop
* @example
@@ -138,6 +138,7 @@ p5.prototype.loop = function() {
* isLooping() returns the current state for use within custom event handlers.
*
* @method isLooping
+ * @returns {boolean}
* @example
*
*
diff --git a/src/core/transform.js b/src/core/transform.js
index 1fe637e5d9..f77523ab64 100644
--- a/src/core/transform.js
+++ b/src/core/transform.js
@@ -24,13 +24,41 @@ import p5 from './main';
* > 
*
+ * 
+ *
+ * @method applyMatrix
+ * @param {Array} arr an array of numbers - should be 6 or 16 length (2*3 or 4*4 matrix values)
+ * @chainable
+ */
+/**
* @method applyMatrix
- * @param {Number|Array} a numbers which define the 2×3 matrix to be multiplied, or an array of numbers
- * @param {Number} b numbers which define the 2×3 matrix to be multiplied
- * @param {Number} c numbers which define the 2×3 matrix to be multiplied
- * @param {Number} d numbers which define the 2×3 matrix to be multiplied
- * @param {Number} e numbers which define the 2×3 matrix to be multiplied
- * @param {Number} f numbers which define the 2×3 matrix to be multiplied
+ * @param {Number} a numbers which define the 2×3 or 4x4 matrix to be multiplied
+ * @param {Number} b numbers which define the 2×3 or 4x4 matrix to be multiplied
+ * @param {Number} c numbers which define the 2×3 or 4x4 matrix to be multiplied
+ * @param {Number} d numbers which define the 2×3 or 4x4 matrix to be multiplied
+ * @param {Number} e numbers which define the 2×3 or 4x4 matrix to be multiplied
+ * @param {Number} f numbers which define the 2×3 or 4x4 matrix to be multiplied
+ * @chainable
+ */
+/**
+ * @method applyMatrix
+ * @param {Number} a
+ * @param {Number} b
+ * @param {Number} c
+ * @param {Number} d
+ * @param {Number} e
+ * @param {Number} f
+ * @param {Number} g numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} h numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} i numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} j numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} k numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} l numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} m numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} n numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} o numbers which define the 4x4 matrix to be multiplied
+ * @param {Number} p numbers which define the 4x4 matrix to be multiplied
* @chainable
* @example
*
@@ -198,13 +226,13 @@ p5.prototype.resetMatrix = function() {
* Objects are always rotated around their relative position to the
* origin and positive numbers rotate objects in a clockwise direction.
* Transformations apply to everything that happens after and subsequent
- * calls to the function accumulates the effect. For example, calling
+ * calls to the function accumulate the effect. For example, calling
* rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).
* All transformations are reset when draw() begins again.
*
* Technically, rotate() multiplies the current transformation matrix
* by a rotation matrix. This function can be further controlled by
- * the push() and pop().
+ * push() and pop().
*
* @method rotate
* @param {Number} angle the angle of rotation, specified in radians
@@ -506,7 +534,7 @@ p5.prototype.shearY = function(angle) {
* @method translate
* @param {Number} x left/right translation
* @param {Number} y up/down translation
- * @param {Number} [z] forward/backward translation (webgl only)
+ * @param {Number} [z] forward/backward translation (WEBGL only)
* @chainable
* @example
*
diff --git a/src/data/local_storage.js b/src/data/local_storage.js
index cd19af5597..c316da5ad2 100644
--- a/src/data/local_storage.js
+++ b/src/data/local_storage.js
@@ -39,6 +39,8 @@ import p5 from '../core/main';
* if (myText === null) {
* myText = '';
* }
+ * describe(`When you type the key name is displayed as black text on white background.
+ * If you reload the page, the last letter typed is still displaying.`);
* }
*
* function draw() {
@@ -52,10 +54,6 @@ import p5 from '../core/main';
* storeItem('myText', myText);
* }
*
- *
- * @alt
- * When you type the key name is displayed as black text on white background.
- * If you reload the page, the last letter typed is still displaying.
*/
p5.prototype.storeItem = function(key, value) {
if (typeof key !== 'string') {
@@ -127,6 +125,9 @@ p5.prototype.storeItem = function(key, value) {
* if (myColor !== null) {
* background(myColor);
* }
+ * describe(`If you click, the canvas changes to a random color.·
+ * If you reload the page, the canvas is still the color it was when the
+ * page was previously loaded.`);
* }
*
* function mousePressed() {
@@ -134,11 +135,6 @@ p5.prototype.storeItem = function(key, value) {
* storeItem('myColor', myColor);
* }
*
- *
- * @alt
- * If you click, the canvas changes to a random color.
- * If you reload the page, the canvas is still the color it
- * was when the page was previously loaded.
*/
p5.prototype.getItem = function(key) {
let value = localStorage.getItem(key);
diff --git a/src/dom/dom.js b/src/dom/dom.js
index c66d67a53d..a07e277370 100644
--- a/src/dom/dom.js
+++ b/src/dom/dom.js
@@ -458,7 +458,7 @@ p5.prototype.createA = function(href, html, target) {
* @param {Number} max maximum value of the slider
* @param {Number} [value] default value of the slider
* @param {Number} [step] step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)
- * @return {p5.Element} pointer to p5.Element holding created node
+ * @return {p5.Element} pointer to p5.Element holding the created node
* @example
*
* let slider;
@@ -540,7 +540,8 @@ p5.prototype.createButton = function(label, value) {
/**
* Creates a checkbox `<input></input>` element in the DOM.
- * Calling .checked() on a checkbox returns if it is checked or not
+ * Calling .checked() on a checkbox returns a boolean indicating whether
+ * it is checked or not.
*
* @method createCheckbox
* @param {String} [label] label displayed after checkbox
@@ -624,14 +625,14 @@ p5.prototype.createCheckbox = function() {
* It also helps to assign select-box methods to p5.Element when selecting existing select box.
* - `.option(name, [value])` can be used to set options for the select after it is created.
* - `.value()` will return the currently selected option.
- * - `.selected()` will return current dropdown element which is an instance of p5.Element
+ * - `.selected()` will return the current dropdown element which is an instance of p5.Element.
* - `.selected(value)` can be used to make given option selected by default when the page first loads.
- * - `.disable()` marks whole of dropdown element as disabled.
- * - `.disable(value)` marks given option as disabled
+ * - `.disable()` marks the whole dropdown element as disabled.
+ * - `.disable(value)` marks a given option as disabled.
*
* @method createSelect
* @param {boolean} [multiple] true if dropdown should support multiple selections
- * @return {p5.Element}
+ * @return {p5.Element} pointer to p5.Element holding created node
* @example
*
* let sel;
@@ -768,7 +769,7 @@ p5.prototype.createSelect = function() {
};
/**
- * Creates a radio button element in the DOM.It also helps existing radio buttons
+ * Creates a radio button element in the DOM. It also helps existing radio buttons
* assign methods of p5.Element.
* - `.option(value, [label])` can be used to create a new option for the
* element. If an option with a value already exists, it will be returned.
@@ -783,8 +784,8 @@ p5.prototype.createSelect = function() {
* - `.disable(Boolean)` method will enable/disable the whole radio button element.
*
* @method createRadio
- * @param {Object} containerElement An container HTML Element either a div
- * or span inside which all existing radio inputs will be considered as options.
+ * @param {Object} containerElement A container HTML Element, either a div
+ * or span, inside which all existing radio inputs will be considered as options.
* @param {string} [name] A name parameter for each Input Element.
* @return {p5.Element} pointer to p5.Element holding created node
* @example
@@ -956,9 +957,17 @@ p5.prototype.createRadio = function() {
}
}
} else {
+ // forEach loop to uncheck all radio buttons before
+ // setting any one as checked.
+ self._getOptionsArray().forEach(option => {
+ option.checked = false;
+ option.removeAttribute('checked');
+ });
+
for (const option of self._getOptionsArray()) {
if (option.value === value) {
option.setAttribute('checked', true);
+ option.checked = true;
result = option;
}
}
@@ -978,7 +987,8 @@ p5.prototype.createRadio = function() {
/**
* Creates a colorPicker element in the DOM for color input.
* The .value() method will return a hex string (#rrggbb) of the color.
- * The .color() method will return a p5.Color object with the current chosen color.
+ * The .color() method will return a p5.Color
+ * object with the current chosen color.
*
* @method createColorPicker
* @param {String|p5.Color} [value] default color of element
@@ -1559,7 +1569,7 @@ p5.Element.prototype.removeClass = function(c) {
/**
*
- * Checks if specified class already set to element
+ * Checks if specified class is already applied to element.
*
* @method hasClass
* @returns {boolean} a boolean value if element has specified class
@@ -1588,7 +1598,7 @@ p5.Element.prototype.hasClass = function(c) {
/**
*
- * Toggles element class
+ * Toggles element class.
*
* @method toggleClass
* @param c {String} class name to toggle
@@ -1673,10 +1683,10 @@ p5.Element.prototype.child = function(childNode) {
};
/**
- * Centers a p5 Element either vertically, horizontally,
+ * Centers a p5.Element either vertically, horizontally,
* or both, relative to its parent or according to
- * the body if the Element has no parent. If no argument is passed
- * the Element is aligned both vertically and horizontally.
+ * the body if the p5.Element has no parent. If no argument is passed
+ * the p5.Element is aligned both vertically and horizontally.
*
* @method center
* @param {String} [align] passing 'vertical', 'horizontal' aligns element accordingly
@@ -1726,8 +1736,8 @@ p5.Element.prototype.center = function(align) {
/**
*
* If an argument is given, sets the inner HTML of the element,
- * replacing any existing html. If true is included as a second
- * argument, html is appended instead of replacing existing html.
+ * replacing any existing HTML. If true is included as a second
+ * argument, HTML is appended instead of replacing existing HTML.
* If no arguments are given, returns
* the inner HTML of the element.
*
@@ -1768,7 +1778,7 @@ p5.Element.prototype.html = function() {
* position will be relative to (0, 0) of the window.
* Essentially, this sets position:absolute and left and top
* properties of style. If an optional third argument specifying position type is given,
- * the x and y coordinates will be interpreted based on the positioning scheme.
* If no arguments given, the function returns the x and y position of the element.
*
@@ -1883,10 +1893,10 @@ p5.Element.prototype._rotate = function() {
};
/**
- * Sets the given style (css) property (1st arg) of the element with the
+ * Sets the given style (CSS) property (1st arg) of the element with the
* given value (2nd arg). If a single argument is given, .style()
- * returns the value of the given property; however, if the single argument
- * is given in css syntax ('text-align:center'), .style() sets the css
+ * returns the value of the given property; however, if a single argument
+ * is given in CSS syntax ('text-align:center'), .style() sets the CSS
* appropriately.
*
* @method style
@@ -1981,7 +1991,7 @@ p5.Element.prototype.style = function(prop, val) {
*
* Adds a new attribute or changes the value of an existing attribute
* on the specified element. If no value is specified, returns the
- * value of the given attribute, or null if attribute is not set.
+ * value of the given attribute, or null if the attribute is not set.
*
* @method attribute
* @return {String} value of attribute
@@ -2150,8 +2160,8 @@ p5.Element.prototype.hide = function() {
*
* Sets the width and height of the element. AUTO can be used to
* only adjust one dimension at a time. If no arguments are given, it
- * returns the width and height of the element in an object. In case of
- * elements which need to be loaded, such as images, it is recommended
+ * returns the width and height of the element in an Object. In the case of
+ * elements that need to be loaded, such as images, it is recommended
* to call the function after the element has finished loading.
*
* @method size
diff --git a/src/events/acceleration.js b/src/events/acceleration.js
index 0021609549..ecc7e6463d 100644
--- a/src/events/acceleration.js
+++ b/src/events/acceleration.js
@@ -35,11 +35,10 @@ p5.prototype.deviceOrientation =
* background(220, 50);
* fill('magenta');
* ellipse(width / 2, height / 2, accelerationX);
+ * describe('Magnitude of device acceleration is displayed as ellipse size.');
* }
*
*
- * @alt
- * Magnitude of device acceleration is displayed as ellipse size
*/
p5.prototype.accelerationX = 0;
@@ -58,11 +57,10 @@ p5.prototype.accelerationX = 0;
* background(220, 50);
* fill('magenta');
* ellipse(width / 2, height / 2, accelerationY);
+ * describe('Magnitude of device acceleration is displayed as ellipse size');
* }
*
*
- * @alt
- * Magnitude of device acceleration is displayed as ellipse size
*/
p5.prototype.accelerationY = 0;
@@ -82,12 +80,10 @@ p5.prototype.accelerationY = 0;
* background(220, 50);
* fill('magenta');
* ellipse(width / 2, height / 2, accelerationZ);
+ * describe('Magnitude of device acceleration is displayed as ellipse size');
* }
*
*
- *
- * @alt
- * Magnitude of device acceleration is displayed as ellipse size
*/
p5.prototype.accelerationZ = 0;
@@ -157,11 +153,11 @@ p5.prototype._updatePAccelerations = function() {
* rotateX(radians(rotationX));
* //rotateY(radians(rotationY));
* box(200, 200, 200);
+ * describe(`red horizontal line right, green vertical line bottom.
+ * black background.`);
* }
*
*
* function setup() {
* loadStrings('assets/test.txt', pickString);
+ * describe(`randomly generated text from a file,
+ * for example "i have three feet"`);
* }
*
* function pickString(result) {
@@ -233,10 +237,6 @@ p5.prototype.loadJSON = function(...args) {
* text(random(result), 10, 10, 80, 80);
* }
*
+ *
* // Saves p5.Image as an image
* img = createImage(10, 10);
* save(img, 'myImage.png');
+ * describe(`An example for saving a p5.Image element as an image.`);
*
*
*
* // Saves p5.Renderer object as an image
* obj = createGraphics(100, 100);
* save(obj, 'myObject.png');
+ * describe(`An example for saving a p5.Renderer element.`);
*
*
*
@@ -1458,6 +1455,9 @@ p5.PrintWriter = function(filename, extension) {
*
* // Tab Separated Values
* save(myTable, 'myTable.tsv');
+ *
+ * describe(`An example showing how to save a table in formats of
+ * HTML, CSV and TSV.`);
*
*
*
@@ -1468,21 +1468,17 @@ p5.PrintWriter = function(filename, extension) {
*
* // Optimizes JSON filesize
* save(myJSON, 'my.json', true);
+ *
+ * describe(`An example for saving JSON to a txt file with some extra arguments.`);
*
*
*
* // Saves array of strings to text file with line breaks after each item
* let arrayOfStrings = ['a', 'b'];
* save(arrayOfStrings, 'my.txt');
+ * describe(`An example for saving an array of strings to text file
+ * with line breaks.`);
*
- *
- * @alt
- * An example for saving a canvas as an image.
- * An example for saving a p5.Image element as an image.
- * An example for saving a p5.Renderer element.
- * An example showing how to save a table in formats of HTML, CSV and TSV.
- * An example for saving JSON to a txt file with some extra arguments.
- * An example for saving an array of strings to text file with line breaks.
*/
p5.prototype.save = function(object, _filename, _options) {
@@ -1556,6 +1552,7 @@ p5.prototype.save = function(object, _filename, _options) {
* createCanvas(100, 100);
* background(200);
* text('click here to save', 10, 10, 70, 80);
+ * describe(`no image displayed`);
* }
*
* function mousePressed() {
@@ -1571,9 +1568,6 @@ p5.prototype.save = function(object, _filename, _options) {
* // "name": "Lion"
* // }
*
@@ -441,12 +439,11 @@ p5.prototype.mag = function(x, y) {
* //after setting withinBounds to true
* let x2 = map(mouseX, 0, width, 0, 100, true);
* ellipse(x2, 75, 25, 25);
+ *
+ * describe(`Two 25×25 white ellipses move with mouse x.
+ * Bottom has more range from X`);
* }
* let x = round(3.7);
* text(x, width / 2, height / 2);
+ * describe(`"4" written in middle of canvas`);
*
* let x = round(12.782383, 2);
* text(x, width / 2, height / 2);
+ * describe(`"12.78" written in middle of canvas`);
*
* function draw() {
@@ -682,13 +680,10 @@ p5.prototype.pow = Math.pow;
* noStroke();
* text(nfc(ax, 2), ax, ay - 5);
* text(nfc(bx, 1), bx, by - 5);
+ *
+ * describe(`two horizontal lines rounded values displayed on top.`);
* }
*
* text(7345.73472742, 10, 25);
* text(fract(7345.73472742), 10, 75);
+ * describe(`first row having a number and the second having
+ * the fractional part of the number`);
*
* text(1.4215e-15, 10, 25);
* text(fract(1.4215e-15), 10, 75);
+ * describe(`first row having a number expressed in scientific
+ * notation and the second having the fractional part of the number`);
*
@@ -246,16 +246,16 @@ p5.Vector.prototype.copy = function copy() {
};
/**
- * Adds x, y, and z components to a vector, adds one vector to another, or
+ * Adds `x`, `y`, and `z` components to a vector, adds one vector to another, or
* adds two independent vectors together. The version of the method that adds
* two vectors together is a static method and returns a p5.Vector, the others
- * acts directly on the vector. Additionally, you may provide arguments to this function as an array.
+ * act directly on the vector. Additionally, you may provide arguments to this method as an array.
* See the examples for more context.
*
* @method add
- * @param {Number} x the x component of the vector to be added
- * @param {Number} [y] the y component of the vector to be added
- * @param {Number} [z] the z component of the vector to be added
+ * @param {Number} x The x component of the vector to be added
+ * @param {Number} [y] The y component of the vector to be added
+ * @param {Number} [z] The z component of the vector to be added
* @chainable
* @example
*
@@ -324,7 +324,7 @@ p5.Vector.prototype.copy = function copy() {
*/
/**
* @method add
- * @param {p5.Vector|Number[]} value the vector to add
+ * @param {p5.Vector|Number[]} value The vector to add
* @chainable
*/
p5.Vector.prototype.add = function add(x, y, z) {
@@ -370,13 +370,13 @@ const calculateRemainder3D = function(xComponent, yComponent, zComponent) {
return this;
};
/**
- * Gives remainder of a vector when it is divided by another vector.
+ * Gives the remainder of a vector when it is divided by another vector.
* See examples for more context.
*
* @method rem
- * @param {Number} x the x component of divisor vector
- * @param {Number} y the y component of divisor vector
- * @param {Number} z the z component of divisor vector
+ * @param {Number} x The x component of divisor vector
+ * @param {Number} y The y component of divisor vector
+ * @param {Number} z The z component of divisor vector
* @chainable
* @example
*
@@ -400,7 +400,7 @@ const calculateRemainder3D = function(xComponent, yComponent, zComponent) {
*/
/**
* @method rem
- * @param {p5.Vector | Number[]} value divisor vector
+ * @param {p5.Vector | Number[]} value The divisor vector
* @chainable
*/
p5.Vector.prototype.rem = function rem(x, y, z) {
@@ -459,16 +459,16 @@ p5.Vector.prototype.rem = function rem(x, y, z) {
};
/**
- * Subtracts x, y, and z components from a vector, subtracts one vector from
+ * Subtracts `x`, `y`, and `z` components from a vector, subtracts one vector from
* another, or subtracts two independent vectors. The version of the method
* that subtracts two vectors is a static method and returns a p5.Vector, the
- * other acts directly on the vector. Additionally, you may provide arguments to this function as an array.
+ * others act directly on the vector. Additionally, you may provide arguments to this method as an array.
* See the examples for more context.
*
* @method sub
- * @param {Number} x the x component of the vector to subtract
- * @param {Number} [y] the y component of the vector to subtract
- * @param {Number} [z] the z component of the vector to subtract
+ * @param {Number} x The x component of the vector to subtract
+ * @param {Number} [y] The y component of the vector to subtract
+ * @param {Number} [z] The z component of the vector to subtract
* @chainable
* @example
*
@@ -560,12 +560,12 @@ p5.Vector.prototype.sub = function sub(x, y, z) {
};
/**
- * Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies
- * the x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y,
- * and z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,
- * the x, y, z components of both vectors are multiplied by each other
- * (for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method
- * creates a new p5.Vector while the non static version acts on the vector
+ * Multiplies the vector by a scalar, multiplies the `x`, `y`, and `z` components from a vector, or multiplies
+ * the `x`, `y`, and `z` components of two independent vectors. When multiplying a vector by a scalar, the `x`, `y`,
+ * and `z` components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,
+ * the `x`, `y`, `z` components of both vectors are multiplied by each other
+ * (for example, with two vectors `a` and `b`: `a.x * b.x`, `a.y * b.y`, `a.z * b.z`). The static version of this method
+ * creates a new p5.Vector while the non-static version acts on the vector
* directly. Additionally, you may provide arguments to this function as an array.
* See the examples for more context.
*
@@ -752,14 +752,15 @@ p5.Vector.prototype.mult = function mult(x, y, z) {
};
/**
- * Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and
- * z components of two vectors against each other. When dividing a vector by a scalar, the x, y,
- * and z components of the vector are all divided by the scalar. When dividing a vector by a vector,
- * the x, y, z components of the source vector are treated as the dividend, and the x, y, z components
- * of the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z).
+ * Divides the vector by a scalar, divides a vector by the `x`, `y`, and `z` arguments, or divides the `x`, `y`, and
+ * `z` components of two vectors against each other. When dividing a vector by a scalar, the `x`, `y`,
+ * and `z` components of the vector are all divided by the scalar. When dividing a vector by a vector,
+ * the `x`, `y`, `z` components of the source vector are treated as the dividend, and the `x`, `y`, `z` components
+ * of the argument is treated as the divisor. (For example, with two vectors
+ * `a` and `b`: `a.x / b.x`, `a.y / b.y`, `a.z / b.z`.)
* The static version of this method creates a
- * new p5.Vector while the non static version acts on the vector directly.
- * Additionally, you may provide arguments to this function as an array.
+ * new p5.Vector while the non-static version acts on the vector directly.
+ * Additionally, you may provide arguments to this method as an array.
* See the examples for more context.
*
* @method div
@@ -958,10 +959,10 @@ p5.Vector.prototype.div = function div(x, y, z) {
};
/**
* Calculates the magnitude (length) of the vector and returns the result as
- * a float (this is simply the equation sqrt(x\*x + y\*y + z\*z).)
+ * a float. (This is simply the equation `sqrt(x*x + y*y + z*z)`.)
*
* @method mag
- * @return {Number} magnitude of the vector
+ * @return {Number} The magnitude of the vector
* @example
*
*
@@ -1006,12 +1007,12 @@ p5.Vector.prototype.mag = function mag() {
/**
* Calculates the squared magnitude of the vector and returns the result
- * as a float (this is simply the equation (x\*x + y\*y + z\*z).)
+ * as a float. (This is simply the equation `x*x + y*y + z*z`.)
* Faster if the real length is not required in the
* case of comparing vectors, etc.
*
* @method magSq
- * @return {number} squared magnitude of the vector
+ * @return {number} The squared magnitude of the vector
* @example
*
*
@@ -1064,10 +1065,10 @@ p5.Vector.prototype.magSq = function magSq() {
* method. See the examples for more context.
*
* @method dot
- * @param {Number} x x component of the vector
- * @param {Number} [y] y component of the vector
- * @param {Number} [z] z component of the vector
- * @return {Number} the dot product
+ * @param {Number} x The x component of the vector
+ * @param {Number} [y] The y component of the vector
+ * @param {Number} [z] The z component of the vector
+ * @return {Number} The dot product
*
* @example
*
@@ -1102,7 +1103,7 @@ p5.Vector.prototype.dot = function dot(x, y, z) {
/**
* Calculates and returns a vector composed of the cross product between
- * two vectors. Both the static and non static methods return a new p5.Vector.
+ * two vectors. Both the static and non-static methods return a new p5.Vector.
* See the examples for more context.
*
* @method cross
@@ -1145,11 +1146,11 @@ p5.Vector.prototype.cross = function cross(v) {
/**
* Calculates the Euclidean distance between two points (considering a
* point as a vector object).
- * If you are looking to calculate distance with 2 points see dist()
+ * If you are looking to calculate distance between 2 points see dist()
*
* @method dist
- * @param {p5.Vector} v the x, y, and z coordinates of a p5.Vector
- * @return {Number} the distance
+ * @param {p5.Vector} v The x, y, and z coordinates of a p5.Vector
+ * @return {Number} The distance
* @example
*
*
@@ -1218,7 +1219,7 @@ p5.Vector.prototype.dist = function dist(v) {
* Normalize the vector to length 1 (make it a unit vector).
*
* @method normalize
- * @return {p5.Vector} normalized p5.Vector
+ * @return {p5.Vector} The normalized p5.Vector
* @example
*
*
@@ -1285,11 +1286,11 @@ p5.Vector.prototype.normalize = function normalize() {
};
/**
- * Limit the magnitude of this vector to the value used for the max
+ * Limit the magnitude of this vector to the value used for the `max`
* parameter.
*
* @method limit
- * @param {Number} max the maximum magnitude for the vector
+ * @param {Number} max The maximum magnitude for the vector
* @chainable
* @example
*
@@ -1343,11 +1344,11 @@ p5.Vector.prototype.limit = function limit(max) {
};
/**
- * Set the magnitude of this vector to the value used for the len
+ * Set the magnitude of this vector to the value used for the `len`
* parameter.
*
* @method setMag
- * @param {number} len the new length for this vector
+ * @param {number} len The new length for this vector
* @chainable
* @example
*
@@ -1399,13 +1400,13 @@ p5.Vector.prototype.setMag = function setMag(n) {
};
/**
- * Calculate the angle of rotation for this vector(only 2D vectors).
+ * Calculate the angle of rotation for this vector (only 2D vectors).
* p5.Vectors created using createVector()
- * will take the current angleMode into
+ * will take the current angleMode() into
* consideration, and give the angle in radians or degree accordingly.
*
* @method heading
- * @return {Number} the angle of rotation
+ * @return {Number} The angle of rotation
* @example
*
*
@@ -1471,11 +1472,11 @@ p5.Vector.prototype.heading = function heading() {
};
/**
- * Rotate the vector to a specific angle (only 2D vectors), magnitude remains the
- * same
+ * Rotate the vector to a specific angle (only 2D vectors); magnitude remains the
+ * same.
*
* @method setHeading
- * @param {number} angle the angle of rotation
+ * @param {number} angle The angle of rotation
* @chainable
* @example
*
@@ -1496,11 +1497,11 @@ p5.Vector.prototype.setHeading = function setHeading(a) {
};
/**
- * Rotate the vector by an angle (only 2D vectors), magnitude remains the
- * same
+ * Rotate the vector by an angle (only 2D vectors); magnitude remains the
+ * same.
*
* @method rotate
- * @param {number} angle the angle of rotation
+ * @param {number} angle The angle of rotation
* @chainable
* @example
*
@@ -1565,13 +1566,13 @@ p5.Vector.prototype.rotate = function rotate(a) {
};
/**
- * Calculates and returns the angle between two vectors. This function will take
+ * Calculates and returns the angle between two vectors. This method will take
* the current angleMode into consideration, and
* give the angle in radians or degree accordingly.
*
* @method angleBetween
- * @param {p5.Vector} value the x, y, and z components of a p5.Vector
- * @return {Number} the angle between (in radians)
+ * @param {p5.Vector} value The x, y, and z components of a p5.Vector
+ * @return {Number} The angle between (in radians)
* @example
*
*
@@ -1645,13 +1646,13 @@ p5.Vector.prototype.angleBetween = function angleBetween(v) {
return angle;
};
/**
- * Linear interpolate the vector to another vector
+ * Linear interpolate the vector to another vector.
*
* @method lerp
- * @param {Number} x the x component
- * @param {Number} y the y component
- * @param {Number} z the z component
- * @param {Number} amt the amount of interpolation; some value between 0.0
+ * @param {Number} x The x component
+ * @param {Number} y The y component
+ * @param {Number} z The z component
+ * @param {Number} amt The amount of interpolation; some value between 0.0
* (old vector) and 1.0 (new vector). 0.9 is very near
* the new vector. 0.5 is halfway in between.
* @chainable
@@ -1719,7 +1720,7 @@ p5.Vector.prototype.angleBetween = function angleBetween(v) {
*/
/**
* @method lerp
- * @param {p5.Vector} v the p5.Vector to lerp to
+ * @param {p5.Vector} v The p5.Vector to lerp to
* @param {Number} amt
* @chainable
*/
@@ -1734,11 +1735,11 @@ p5.Vector.prototype.lerp = function lerp(x, y, z, amt) {
};
/**
- * Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D
- * This method acts on the vector directly
+ * Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D.
+ * This method acts on the vector directly.
*
* @method reflect
- * @param {p5.Vector} surfaceNormal the p5.Vector to reflect about, will be normalized by this method
+ * @param {p5.Vector} surfaceNormal The p5.Vector to reflect about; will be normalized by this method.
* @chainable
* @example
*
@@ -1795,7 +1796,7 @@ p5.Vector.prototype.reflect = function reflect(surfaceNormal) {
* array.
*
* @method array
- * @return {Number[]} an Array with the 3 values
+ * @return {Number[]} An Array with the 3 values
* @example
*
*
@@ -1821,13 +1822,13 @@ p5.Vector.prototype.array = function array() {
};
/**
- * Equality check against a p5.Vector
+ * Equality check against a p5.Vector.
*
* @method equals
- * @param {Number} [x] the x component of the vector
- * @param {Number} [y] the y component of the vector
- * @param {Number} [z] the z component of the vector
- * @return {Boolean} whether the vectors are equals
+ * @param {Number} [x] The x component of the vector
+ * @param {Number} [y] The y component of the vector
+ * @param {Number} [z] The z component of the vector
+ * @return {Boolean} Whether the vectors are equal
* @example
*
*
@@ -1852,7 +1853,7 @@ p5.Vector.prototype.array = function array() {
*/
/**
* @method equals
- * @param {p5.Vector|Array} value the vector to compare
+ * @param {p5.Vector|Array} value The vector to compare
* @return {Boolean}
*/
p5.Vector.prototype.equals = function equals(x, y, z) {
@@ -1876,13 +1877,13 @@ p5.Vector.prototype.equals = function equals(x, y, z) {
// Static Methods
/**
- * Make a new 2D vector from an angle
+ * Make a new 2D vector from an angle.
*
* @method fromAngle
* @static
- * @param {Number} angle the desired angle, in radians (unaffected by angleMode)
- * @param {Number} [length] the length of the new vector (defaults to 1)
- * @return {p5.Vector} the new p5.Vector object
+ * @param {Number} angle The desired angle, in radians (unaffected by angleMode)
+ * @param {Number} [length] The length of the new vector (defaults to 1)
+ * @return {p5.Vector} The new p5.Vector object
* @example
*
*
@@ -1927,15 +1928,15 @@ p5.Vector.fromAngle = function fromAngle(angle, length) {
};
/**
- * Make a new 3D vector from a pair of ISO spherical angles
+ * Make a new 3D vector from a pair of ISO spherical angles.
*
* @method fromAngles
* @static
- * @param {Number} theta the polar angle, in radians (zero is up)
- * @param {Number} phi the azimuthal angle, in radians
+ * @param {Number} theta The polar angle, in radians (zero is up)
+ * @param {Number} phi The azimuthal angle, in radians
* (zero is out of the screen)
- * @param {Number} [length] the length of the new vector (defaults to 1)
- * @return {p5.Vector} the new p5.Vector object
+ * @param {Number} [length] The length of the new vector (defaults to 1)
+ * @return {p5.Vector} A new p5.Vector object
* @example
*
*
@@ -1976,11 +1977,11 @@ p5.Vector.fromAngles = function(theta, phi, length) {
};
/**
- * Make a new 2D unit vector from a random angle
+ * Make a new 2D unit vector from a random angle.
*
* @method random2D
* @static
- * @return {p5.Vector} the new p5.Vector object
+ * @return {p5.Vector} A new p5.Vector object
* @example
*
*
@@ -2033,7 +2034,7 @@ p5.Vector.random2D = function random2D() {
*
* @method random3D
* @static
- * @return {p5.Vector} the new p5.Vector object
+ * @return {p5.Vector} A new p5.Vector object
* @example
*
*
@@ -2059,10 +2060,10 @@ p5.Vector.random3D = function random3D() {
/**
* @method add
* @static
- * @param {p5.Vector} v1 a p5.Vector to add
- * @param {p5.Vector} v2 a p5.Vector to add
- * @param {p5.Vector} [target] the vector to receive the result
- * @return {p5.Vector} the resulting p5.Vector
+ * @param {p5.Vector} v1 A p5.Vector to add
+ * @param {p5.Vector} v2 A p5.Vector to add
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector} The resulting p5.Vector
*/
p5.Vector.add = function add(v1, v2, target) {
@@ -2085,15 +2086,15 @@ p5.Vector.add = function add(v1, v2, target) {
/**
* @method rem
* @static
- * @param {p5.Vector} v1 dividend p5.Vector
- * @param {p5.Vector} v2 divisor p5.Vector
+ * @param {p5.Vector} v1 The dividend p5.Vector
+ * @param {p5.Vector} v2 The divisor p5.Vector
*/
/**
* @method rem
* @static
* @param {p5.Vector} v1
* @param {p5.Vector} v2
- * @return {p5.Vector} the resulting p5.Vector
+ * @return {p5.Vector} The resulting p5.Vector
*/
p5.Vector.rem = function rem(v1, v2) {
if (v1 instanceof p5.Vector && v2 instanceof p5.Vector) {
@@ -2105,15 +2106,15 @@ p5.Vector.rem = function rem(v1, v2) {
/*
* Subtracts one p5.Vector from another and returns a new one. The second
- * vector (v2) is subtracted from the first (v1), resulting in v1-v2.
+ * vector (`v2`) is subtracted from the first (`v1`), resulting in `v1-v2`.
*/
/**
* @method sub
* @static
- * @param {p5.Vector} v1 a p5.Vector to subtract from
- * @param {p5.Vector} v2 a p5.Vector to subtract
- * @param {p5.Vector} [target] the vector to receive the result
- * @return {p5.Vector} the resulting p5.Vector
+ * @param {p5.Vector} v1 A p5.Vector to subtract from
+ * @param {p5.Vector} v2 A p5.Vector to subtract
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector} The resulting p5.Vector
*/
p5.Vector.sub = function sub(v1, v2, target) {
@@ -2185,7 +2186,7 @@ p5.Vector.mult = function mult(v, n, target) {
};
/**
- * Rotates the vector (only 2D vectors) by the given angle, magnitude remains the same and returns a new vector.
+ * Rotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.
*/
/**
@@ -2193,7 +2194,7 @@ p5.Vector.mult = function mult(v, n, target) {
* @static
* @param {p5.Vector} v
* @param {Number} angle
- * @param {p5.Vector} [target] the vector to receive the result
+ * @param {p5.Vector} [target] The vector to receive the result
*/
p5.Vector.rotate = function rotate(v, a, target) {
if (arguments.length === 2) {
@@ -2229,7 +2230,7 @@ p5.Vector.rotate = function rotate(v, a, target) {
* @static
* @param {p5.Vector} v
* @param {Number} n
- * @param {p5.Vector} [target] the vector to receive the result
+ * @param {p5.Vector} [target] The vector to receive the result
*/
/**
@@ -2270,9 +2271,9 @@ p5.Vector.div = function div(v, n, target) {
/**
* @method dot
* @static
- * @param {p5.Vector} v1 the first p5.Vector
- * @param {p5.Vector} v2 the second p5.Vector
- * @return {Number} the dot product
+ * @param {p5.Vector} v1 The first p5.Vector
+ * @param {p5.Vector} v2 The second p5.Vector
+ * @return {Number} The dot product
*/
p5.Vector.dot = function dot(v1, v2) {
return v1.dot(v2);
@@ -2284,9 +2285,9 @@ p5.Vector.dot = function dot(v1, v2) {
/**
* @method cross
* @static
- * @param {p5.Vector} v1 the first p5.Vector
- * @param {p5.Vector} v2 the second p5.Vector
- * @return {Number} the cross product
+ * @param {p5.Vector} v1 The first p5.Vector
+ * @param {p5.Vector} v2 The second p5.Vector
+ * @return {Number} The cross product
*/
p5.Vector.cross = function cross(v1, v2) {
return v1.cross(v2);
@@ -2299,9 +2300,9 @@ p5.Vector.cross = function cross(v1, v2) {
/**
* @method dist
* @static
- * @param {p5.Vector} v1 the first p5.Vector
- * @param {p5.Vector} v2 the second p5.Vector
- * @return {Number} the distance
+ * @param {p5.Vector} v1 The first p5.Vector
+ * @param {p5.Vector} v2 The second p5.Vector
+ * @return {Number} The distance
*/
p5.Vector.dist = function dist(v1, v2) {
return v1.dist(v2);
@@ -2317,8 +2318,8 @@ p5.Vector.dist = function dist(v1, v2) {
* @param {p5.Vector} v1
* @param {p5.Vector} v2
* @param {Number} amt
- * @param {p5.Vector} [target] the vector to receive the result
- * @return {p5.Vector} the lerped value
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector} The lerped value
*/
p5.Vector.lerp = function lerp(v1, v2, amt, target) {
if (!target) {
@@ -2338,13 +2339,13 @@ p5.Vector.lerp = function lerp(v1, v2, amt, target) {
/**
* Calculates the magnitude (length) of the vector and returns the result as
- * a float (this is simply the equation sqrt(x\*x + y\*y + z\*z).)
+ * a float (this is simply the equation `sqrt(x*x + y*y + z*z)`.)
*/
/**
* @method mag
* @static
- * @param {p5.Vector} vecT the vector to return the magnitude of
- * @return {Number} the magnitude of vecT
+ * @param {p5.Vector} vecT The vector to return the magnitude of
+ * @return {Number} The magnitude of vecT
*/
p5.Vector.mag = function mag(vecT) {
const x = vecT.x,
@@ -2360,9 +2361,9 @@ p5.Vector.mag = function mag(vecT) {
/**
* @method normalize
* @static
- * @param {p5.Vector} v the vector to normalize
- * @param {p5.Vector} [target] the vector to receive the result
- * @return {p5.Vector} v normalized to a length of 1
+ * @param {p5.Vector} v The vector to normalize
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector} The vector v, normalized to a length of 1
*/
p5.Vector.normalize = function normalize(v, target) {
if (arguments.length < 2) {
diff --git a/src/math/random.js b/src/math/random.js
index 2914020d33..137a459a73 100644
--- a/src/math/random.js
+++ b/src/math/random.js
@@ -52,11 +52,9 @@ p5.prototype._lcgSetSeed = function(stateProperty, val) {
* stroke(r);
* line(i, 0, i, 100);
* }
+ * describe(`many vertical lines drawn in white, black, or grey.`);
*
*
- *
- * @alt
- * many vertical lines drawn in white, black or grey.
*/
p5.prototype.randomSeed = function(seed) {
this._lcgSetSeed(randomStateProp, seed);
@@ -92,6 +90,8 @@ p5.prototype.randomSeed = function(seed) {
* stroke(r * 5);
* line(50, i, 50 + r, i);
* }
+ * describe(`100 horizontal lines from center canvas to right.
+ * The size and fill change each time.`);
*
*
*
@@ -100,6 +100,8 @@ p5.prototype.randomSeed = function(seed) {
* let r = random(-50, 50);
* line(50, i, 50 + r, i);
* }
+ * describe(`100 horizontal lines from center of canvas.
+ * The height & side change each render.`);
*
*
*
@@ -108,13 +110,9 @@ p5.prototype.randomSeed = function(seed) {
* let words = ['apple', 'bear', 'cat', 'dog'];
* let word = random(words); // select random word
* text(word, 10, 50); // draw the word
+ * describe(`word displayed at random. Either apple, bear, cat, or dog.`);
*
*
- *
- * @alt
- * 100 horizontal lines from center canvas to right. size+fill change each time
- * 100 horizontal lines from center of canvas. height & side change each render
- * word displayed at random. Either apple, bear, cat, or dog
*/
/**
* @method random
@@ -160,9 +158,9 @@ p5.prototype.random = function(min, max) {
* be returned.
*
* Takes either 0, 1 or 2 arguments.
- * If no args, returns a mean of 0 and standard deviation of 1.
- * If one arg, that arg is the mean (standard deviation is 1).
- * If two args, first is mean, second is standard deviation.
+ * If no args, the mean is 0 and the standard deviation is 1.
+ * If one arg, that arg is the mean and the standard deviation is 1.
+ * If two args, the first arg is the mean and the second is the standard deviation.
*
* @method randomGaussian
* @param {Number} [mean] the mean
@@ -175,6 +173,8 @@ p5.prototype.random = function(min, max) {
* let x = randomGaussian(50, 15);
* line(50, y, x, y);
* }
+ * describe(`100 horizontal lines from center of canvas.
+ * The height & side change each render.`);
*
*
*
@@ -199,12 +199,12 @@ p5.prototype.random = function(min, max) {
* let dist = abs(distribution[i]);
* line(0, 0, dist, 0);
* }
+ *
+ * describe(`black lines radiate from center of canvas.
+ * The size changes each render.`);
* }
*
*
- * @alt
- * 100 horizontal lines from center of canvas. height & side change each render
- * black lines radiate from center of canvas. size determined each render
*/
p5.prototype.randomGaussian = function(mean, sd = 1) {
let y1, x1, x2, w;
diff --git a/src/math/trigonometry.js b/src/math/trigonometry.js
index d71449cfc2..536d1d575d 100644
--- a/src/math/trigonometry.js
+++ b/src/math/trigonometry.js
@@ -18,8 +18,8 @@ p5.prototype._angleMode = constants.RADIANS;
/**
* The inverse of cos(), returns the arc cosine of a value.
* This function expects the values in the range of -1 to 1 and values are returned in
- * the range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the
- * angle mode is DEGREES.
+ * the range 0 to PI (3.1415927) if the angleMode() is RADIANS
+ * or 0 to 180 if the angleMode() is DEGREES.
*
* @method acos
* @param {Number} value the value whose arc cosine is to be returned
@@ -123,12 +123,13 @@ p5.prototype.atan = function(ratio) {
/**
* Calculates the angle (in radians) from a specified point to the coordinate
* origin as measured from the positive x-axis. Values are returned as a
- * float in the range from PI to -PI if the angleMode is RADIANS or 180 to
- * -180 if the angleMode is DEGREES. The atan2() function is
- * most often used for orienting geometry to the position of the cursor.
+ * float in the range from PI to -PI if the angleMode()
+ * is RADIANS or 180 to -180 if the angleMode() is DEGREES.
+ * The atan2() function is most often used for orienting geometry
+ * to the position of the cursor.
*
* Note: The y-coordinate of the point is the first parameter, and the
- * x-coordinate is the second parameter, due the the structure of calculating
+ * x-coordinate is the second parameter, due to the structure of calculating
* the tangent.
*
* @method atan2
@@ -145,12 +146,10 @@ p5.prototype.atan = function(ratio) {
* let a = atan2(mouseY - height / 2, mouseX - width / 2);
* rotate(a);
* rect(-30, -5, 60, 10);
+ * describe(`60×10 rect at center of canvas rotates with mouse movements`);
* }
*
*
- *
- * @alt
- * 60 by 10 rect at center of canvas rotates with mouse movements
*/
p5.prototype.atan2 = function(y, x) {
return this._fromRadians(Math.atan2(y, x));
@@ -173,11 +172,10 @@ p5.prototype.atan2 = function(y, x) {
* line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
* a = a + inc;
* }
+ * describe(`vertical black lines form wave patterns, extend-down on
+ * left and right side`);
*
*
- *
- * @alt
- * vertical black lines form wave patterns, extend-down on left and right side
*/
p5.prototype.cos = function(angle) {
return Math.cos(this._toRadians(angle));
@@ -200,11 +198,10 @@ p5.prototype.cos = function(angle) {
* line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
* a = a + inc;
* }
+ * describe(`vertical black lines extend down and up from center
+ * to form wave pattern.`);
*
*
- *
- * @alt
- * vertical black lines extend down and up from center to form wave pattern
*/
p5.prototype.sin = function(angle) {
return Math.sin(this._toRadians(angle));
@@ -227,10 +224,9 @@ p5.prototype.sin = function(angle) {
* line(i, 50, i, 50 + tan(a) * 2.0);
* a = a + inc;
* }
+ * describe(`vertical black lines end down and up from center to
+ * form spike pattern.`);
*
- *
- * @alt
- * vertical black lines end down and up from center to form spike pattern
*/
p5.prototype.tan = function(angle) {
return Math.tan(this._toRadians(angle));
@@ -241,7 +237,7 @@ p5.prototype.tan = function(angle) {
* Radians and degrees are two ways of measuring the same thing. There are
* 360 degrees in a circle and 2*PI radians in a circle. For example,
* 90° = PI/2 = 1.5707964. This function does not take into account the
- * current angleMode.
+ * current angleMode().
*
* @method degrees
* @param {Number} radians the radians value to convert to degrees
@@ -283,11 +279,11 @@ p5.prototype.degrees = angle => angle * constants.RAD_TO_DEG;
p5.prototype.radians = angle => angle * constants.DEG_TO_RAD;
/**
- * Sets the current mode of p5 to given mode. Default mode is RADIANS.
+ * Sets the current mode of p5 to the given mode. Default mode is RADIANS.
*
+ * Calling angleMode() with no arguments returns current anglemode.
* @method angleMode
* @param {Constant} mode either RADIANS or DEGREES
- *
* @example
*
*
@@ -303,16 +299,22 @@ p5.prototype.radians = angle => angle * constants.DEG_TO_RAD;
* angleMode(RADIANS); // Change the mode to RADIANS
* rotate(a); // variable a stays the same
* rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
+ * describe(`40×10 rect in center rotates with mouse moves.
+ * 20×10 rect moves faster.`);
* }
*
*
*
- * @alt
- * 40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.
- *
+ */
+/**
+ * @method angleMode
+ * @return {Constant} mode either RADIANS or DEGREES
*/
p5.prototype.angleMode = function(mode) {
- if (mode === constants.DEGREES || mode === constants.RADIANS) {
+ p5._validateParameters('angleMode', arguments);
+ if (typeof mode === 'undefined') {
+ return this._angleMode;
+ } else if (mode === constants.DEGREES || mode === constants.RADIANS) {
this._angleMode = mode;
}
};
diff --git a/src/typography/attributes.js b/src/typography/attributes.js
index 0b8fba11ed..ee2fc13b89 100644
--- a/src/typography/attributes.js
+++ b/src/typography/attributes.js
@@ -20,7 +20,7 @@ import p5 from '../core/main';
* So if you write textAlign(LEFT), you are aligning the left
* edge of your text to the x value you give in text().
* If you write textAlign(RIGHT, TOP), you are aligning the right edge
- * of your text to the x value and the top of edge of the text
+ * of your text to the x value and the top edge of the text
* to the y value.
*
* @method textAlign
@@ -39,6 +39,8 @@ import p5 from '../core/main';
* text('EFGH', 50, 50);
* textAlign(LEFT);
* text('IJKL', 50, 70);
+ * describe(`Letters ABCD displayed at top left, EFGH at center, and
+ * IJKL at bottom right.`);
*
*
*
@@ -62,12 +64,12 @@ import p5 from '../core/main';
* line(0, 87, width, 87);
* textAlign(CENTER, BOTTOM);
* text('BOTTOM', 0, 87, width);
+ *
+ * describe(`The names of the four vertical alignments (TOP, CENTER, BASELINE,
+ * and BOTTOM) rendered each showing that alignment's placement relative to a
+ * horizontal line.`);
*
*
- *
- * @alt
- * Letters ABCD displayed at top left, EFGH at center and IJKL at bottom right.
- * The names of the four vertical alignments (TOP, CENTER, BASELINE & BOTTOM) rendered each showing that alignment's placement relative to a horizontal line.
*/
/**
* @method textAlign
@@ -100,11 +102,11 @@ p5.prototype.textAlign = function(horizAlign, vertAlign) {
*
* textLeading(30);
* text(lines, 70, 25);
+ *
+ * describe(`A set of L1, L2, and L3, displayed vertically 3 times.
+ * Spacing increases for each set.`);
*
*
- *
- * @alt
- * A set of L1 L2 & L3 displayed vertically 3 times. spacing increases for each set
*/
/**
* @method textLeading
@@ -132,11 +134,12 @@ p5.prototype.textLeading = function(theLeading) {
* text('Font Size 14', 10, 60);
* textSize(16);
* text('Font Size 16', 10, 90);
+ *
+ * describe(`'Font Size 12' displayed small,
+ * 'Font Size 14' medium, and
+ * 'Font Size 16' large`);
*
*
- *
- * @alt
- * 'Font Size 12' displayed small, 'Font Size 14' medium & 'Font Size 16' large
*/
/**
* @method textSize
@@ -169,11 +172,12 @@ p5.prototype.textSize = function(theSize) {
* text('Font Style Bold', 10, 65);
* textStyle(BOLDITALIC);
* text('Font Style Bold Italic', 10, 90);
+ * describe(`The words “Font Style Normal” displayed normally,
+ * “Font Style Italic” in italic,
+ * “Font Style Bold” in bold, and
+ * “Font Style Bold Italic” in bold italics.`);
*
*
- *
- * @alt
- * Words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.
*/
/**
* @method textStyle
@@ -204,11 +208,10 @@ p5.prototype.textStyle = function(theStyle) {
* let sWidth = textWidth(aString);
* text(aString, 0, 85);
* line(sWidth, 50, sWidth, 100);
+ *
+ * describe(`Letter P and p5.js are displayed with vertical lines at end.`);
*
*
- *
- * @alt
- * Letter P and p5.js are displayed with vertical lines at end.
*/
p5.prototype.textWidth = function(...args) {
args[0] += '';
diff --git a/src/typography/loading_displaying.js b/src/typography/loading_displaying.js
index d0a8553b73..5c046adf72 100644
--- a/src/typography/loading_displaying.js
+++ b/src/typography/loading_displaying.js
@@ -15,9 +15,9 @@ import '../core/friendly_errors/fes_core';
/**
* Loads an opentype font file (.otf, .ttf) from a file or a URL,
- * and returns a PFont Object. This method is asynchronous,
- * meaning it may not finish before the next line in your sketch
- * is executed.
+ * and returns a p5.Font object. This function
+ * is asynchronous, meaning it may not finish before the next line in
+ * your sketch is executed.
*
* The path to the font should be relative to the HTML file
* that links in your sketch. Loading fonts from a URL or other
@@ -119,11 +119,11 @@ p5.prototype.loadFont = function(path, onSuccess, onError) {
const lastDotIdx = fileNoPath.lastIndexOf('.');
let fontFamily;
let newStyle;
- const fileExt = lastDotIdx < 1 ? null : fileNoPath.substr(lastDotIdx + 1);
+ const fileExt = lastDotIdx < 1 ? null : fileNoPath.slice(lastDotIdx + 1);
// if so, add it to the DOM (name-only) for use with DOM module
if (validFontTypes.includes(fileExt)) {
- fontFamily = fileNoPath.substr(0, lastDotIdx);
+ fontFamily = fileNoPath.slice(0, lastDotIdx !== -1 ? lastDotIdx : 0);
newStyle = document.createElement('style');
newStyle.appendChild(
document.createTextNode(
diff --git a/src/typography/p5.Font.js b/src/typography/p5.Font.js
index 1c65ccae2a..b632db07da 100644
--- a/src/typography/p5.Font.js
+++ b/src/typography/p5.Font.js
@@ -64,12 +64,12 @@ p5.Font = function(p) {
* textFont(font);
* textSize(12);
* text(textString, 10, 30);
+ *
+ * describe(`Words “Lorem ipsum dol” go off canvas and
+ * contained by white bounding box`);
* }
*
*
- *
- * @alt
- *words Lorem ipsum dol go off canvas and contained by white bounding box
*/
p5.Font.prototype.textBounds = function(str, x = 0, y = 0, fontSize, opts) {
// Check cache for existing bounds. Take into consideration the text alignment
diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index 090a89479e..ef6a973cb0 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -27,6 +27,7 @@ import * as constants from '../core/constants';
* // with width 50 and height 50
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('a white plane with black wireframe lines');
* }
*
* function draw() {
@@ -112,6 +113,7 @@ p5.prototype.plane = function(width, height, detailX, detailY) {
* // with width, height and depth of 50
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('a white box rotating in 3D space');
* }
*
* function draw() {
@@ -231,6 +233,7 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
* // draw a sphere with radius 40
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('a white sphere with black wireframe lines');
* }
*
* function draw() {
@@ -250,6 +253,9 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
* detailX = createSlider(3, 24, 3);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
+ * describe(
+ * 'a white sphere with low detail on the x-axis, including a slider to adjust detailX'
+ * );
* }
*
* function draw() {
@@ -270,6 +276,9 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
* detailY = createSlider(3, 16, 3);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
+ * describe(
+ * 'a white sphere with low detail on the y-axis, including a slider to adjust detailY'
+ * );
* }
*
* function draw() {
@@ -441,6 +450,7 @@ const _truncatedCone = function(
* // with radius 20 and height 50
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('a rotating white cylinder');
* }
*
* function draw() {
@@ -462,6 +472,9 @@ const _truncatedCone = function(
* detailX = createSlider(3, 24, 3);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
+ * describe(
+ * 'a rotating white cylinder with limited X detail, with a slider that adjusts detailX'
+ * );
* }
*
* function draw() {
@@ -482,6 +495,9 @@ const _truncatedCone = function(
* detailY = createSlider(1, 16, 1);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
+ * describe(
+ * 'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY'
+ * );
* }
*
* function draw() {
@@ -576,6 +592,7 @@ p5.prototype.cylinder = function(
* // with radius 40 and height 70
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('a rotating white cone');
* }
*
* function draw() {
@@ -597,6 +614,9 @@ p5.prototype.cylinder = function(
* detailX = createSlider(3, 16, 3);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
+ * describe(
+ * 'a rotating white cone with limited X detail, with a slider that adjusts detailX'
+ * );
* }
*
* function draw() {
@@ -617,6 +637,9 @@ p5.prototype.cylinder = function(
* detailY = createSlider(3, 16, 3);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
+ * describe(
+ * 'a rotating white cone with limited Y detail, with a slider that adjusts detailY'
+ * );
* }
*
* function draw() {
@@ -692,6 +715,7 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) {
* // with radius 30, 40 and 40.
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('a white 3d ellipsoid');
* }
*
* function draw() {
@@ -711,6 +735,9 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) {
* detailX = createSlider(2, 24, 12);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
+ * describe(
+ * 'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX'
+ * );
* }
*
* function draw() {
@@ -731,6 +758,9 @@ p5.prototype.cone = function(radius, height, detailX, detailY, cap) {
* detailY = createSlider(2, 24, 6);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
+ * describe(
+ * 'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY'
+ * );
* }
*
* function draw() {
@@ -826,6 +856,7 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
* // with ring radius 30 and tube radius 15
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('a rotating white torus');
* }
*
* function draw() {
@@ -847,6 +878,9 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
* detailX = createSlider(3, 24, 3);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
+ * describe(
+ * 'a rotating white torus with limited X detail, with a slider that adjusts detailX'
+ * );
* }
*
* function draw() {
@@ -867,6 +901,9 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
* detailY = createSlider(3, 16, 3);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
+ * describe(
+ * 'a rotating white torus with limited Y detail, with a slider that adjusts detailY'
+ * );
* }
*
* function draw() {
diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js
index 87680921df..d13a9acd3e 100644
--- a/src/webgl/interaction.js
+++ b/src/webgl/interaction.js
@@ -30,6 +30,9 @@ import * as constants from '../core/constants';
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
+ * describe(
+ * 'Camera orbits around a box when mouse is hold-clicked & then moved.'
+ * );
* }
* function draw() {
* background(200);
@@ -167,6 +170,9 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* normalMaterial();
* debugMode();
+ * describe(
+ * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
+ * );
* }
*
* function draw() {
@@ -194,6 +200,7 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* normalMaterial();
* debugMode(GRID);
+ * describe('a 3D box is centered on a grid in a 3D sketch.');
* }
*
* function draw() {
@@ -214,6 +221,9 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* normalMaterial();
* debugMode(AXES);
+ * describe(
+ * 'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
+ * );
* }
*
* function draw() {
@@ -236,6 +246,7 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* normalMaterial();
* debugMode(GRID, 100, 10, 0, 0, 0);
+ * describe('a 3D box is centered on a grid in a 3D sketch');
* }
*
* function draw() {
@@ -256,6 +267,9 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* normalMaterial();
* debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
+ * describe(
+ * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
+ * );
* }
*
* function draw() {
@@ -361,6 +375,9 @@ p5.prototype.debugMode = function(...args) {
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* normalMaterial();
* debugMode();
+ * describe(
+ * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
+ * );
* }
*
* function draw() {
diff --git a/src/webgl/light.js b/src/webgl/light.js
index 739ff21d16..c5df0add0a 100644
--- a/src/webgl/light.js
+++ b/src/webgl/light.js
@@ -9,68 +9,91 @@ import p5 from '../core/main';
import * as constants from '../core/constants';
/**
- * Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas.
- * It has no particular source.
+ * Creates an ambient light with the given color.
+ *
+ * Ambient light does not come from a specific direction.
+ * Objects are evenly lit from all sides. Ambient lights are
+ * almost always used in combination with other types of lights.
+ *
+ * Note: lights need to be called (whether directly or indirectly)
+ * within draw() to remain persistent in a looping program.
+ * Placing them in setup() will cause them to only have an effect
+ * the first time through the loop.
+ *
* @method ambientLight
- * @param {Number} v1 red or hue value relative to
- * the current color range
- * @param {Number} v2 green or saturation value
- * relative to the current color range
- * @param {Number} v3 blue or brightness value
- * relative to the current color range
- * @param {Number} [alpha] the alpha value
+ * @param {Number} v1 red or hue value relative to
+ * the current color range
+ * @param {Number} v2 green or saturation value
+ * relative to the current color range
+ * @param {Number} v3 blue or brightness value
+ * relative to the current color range
+ * @param {Number} [alpha] alpha value relative to current
+ * color range (default is 0-255)
* @chainable
*
* @example
*
*
- * createCanvas(100, 100, WEBGL);
- * ambientLight(0);
- * ambientMaterial(250);
- * sphere(40);
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * describe('sphere with coral color under black light');
+ * }
+ * function draw() {
+ * background(100);
+ * ambientLight(0); // black light (no light)
+ * ambientMaterial(255, 127, 80); // coral material
+ * sphere(40);
+ * }
*
*
+ * @alt
+ * sphere with coral color under black light
+ *
+ * @example
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * describe('sphere with coral color under white light');
* }
* function draw() {
- * background(51);
- * ambientLight(100); // white light
- * ambientMaterial(255, 102, 94); // magenta material
- * box(30);
+ * background(100);
+ * ambientLight(255); // white light
+ * ambientMaterial(255, 127, 80); // coral material
+ * sphere(40);
* }
*
*
* @alt
- * evenly distributed light across a sphere
- * evenly distributed light across a rotating sphere
+ * sphere with coral color under white light
*/
/**
* @method ambientLight
- * @param {String} value a color string
+ * @param {Number} gray number specifying value between
+ * white and black
+ * @param {Number} [alpha]
* @chainable
*/
/**
* @method ambientLight
- * @param {Number} gray a gray value
- * @param {Number} [alpha]
+ * @param {String} value a color string
* @chainable
*/
/**
* @method ambientLight
* @param {Number[]} values an array containing the red,green,blue &
- * and alpha components of the color
+ * and alpha components of the color
* @chainable
*/
/**
* @method ambientLight
- * @param {p5.Color} color the ambient light color
+ * @param {p5.Color} color color as a p5.Color
* @chainable
*/
p5.prototype.ambientLight = function(v1, v2, v3, a) {
@@ -90,74 +113,101 @@ p5.prototype.ambientLight = function(v1, v2, v3, a) {
};
/**
- * Set's the color of the specular highlight when using a specular material and
- * specular light.
+ * Sets the color of the specular highlight of a non-ambient light
+ * (i.e. all lights except ambientLight()).
+ *
+ * specularColor() affects only the lights which are created after
+ * it in the code.
*
- * This method can be combined with specularMaterial() and shininess()
- * functions to set specular highlights. The default color is white, ie
- * (255, 255, 255), which is used if this method is not called before
- * specularMaterial(). If this method is called without specularMaterial(),
- * There will be no effect.
+ * This function is used in combination with
+ * specularMaterial().
+ * If a geometry does not use specularMaterial(), this function
+ * will have no effect.
*
- * Note: specularColor is equivalent to the processing function
+ * The default color is white (255, 255, 255), which is used if
+ * specularColor() is not explicitly called.
+ *
+ * Note: specularColor is equivalent to the Processing function
* lightSpecular.
*
* @method specularColor
* @param {Number} v1 red or hue value relative to
- * the current color range
+ * the current color range
* @param {Number} v2 green or saturation value
- * relative to the current color range
+ * relative to the current color range
* @param {Number} v3 blue or brightness value
- * relative to the current color range
+ * relative to the current color range
* @chainable
* @example
*
*
+ * let setRedSpecularColor = true;
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
+ * describe(
+ * 'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.'
+ * );
* }
*
* function draw() {
* background(0);
- * shininess(20);
- * ambientLight(50);
- * specularColor(255, 0, 0);
- * pointLight(255, 0, 0, 0, -50, 50);
- * specularColor(0, 255, 0);
- * pointLight(0, 255, 0, 0, 50, 50);
- * specularMaterial(255);
- * sphere(40);
+ *
+ * ambientLight(60);
+ *
+ * // add a point light to showcase specular color
+ * // -- use mouse location to position the light
+ * let lightPosX = mouseX - width / 2;
+ * let lightPosY = mouseY - height / 2;
+ * // -- set the light's specular color
+ * if (setRedSpecularColor) {
+ * specularColor(255, 0, 0); // red specular highlight
+ * }
+ * // -- create the light
+ * pointLight(200, 200, 200, lightPosX, lightPosY, 50); // white light
+ *
+ * // use specular material with high shininess
+ * specularMaterial(150);
+ * shininess(50);
+ *
+ * sphere(30, 64, 64);
+ * }
+ *
+ * function mouseClicked() {
+ * setRedSpecularColor = !setRedSpecularColor;
* }
*
*
*
* @alt
- * different specular light sources from top and bottom of canvas
+ * Sphere with specular highlight. Clicking the mouse toggles the
+ * specular highlight color between red and the default white.
*/
/**
* @method specularColor
- * @param {String} value a color string
+ * @param {Number} gray number specifying value between
+ * white and black
* @chainable
*/
/**
* @method specularColor
- * @param {Number} gray a gray value
+ * @param {String} value color as a CSS string
* @chainable
*/
/**
* @method specularColor
- * @param {Number[]} values an array containing the red,green,blue &
- * and alpha components of the color
+ * @param {Number[]} values color as an array containing the
+ * red, green, and blue components
* @chainable
*/
/**
* @method specularColor
- * @param {p5.Color} color the ambient light color
+ * @param {p5.Color} color color as a p5.Color
* @chainable
*/
p5.prototype.specularColor = function(v1, v2, v3) {
@@ -175,21 +225,45 @@ p5.prototype.specularColor = function(v1, v2, v3) {
};
/**
- * Creates a directional light with a color and a direction
+ * Creates a directional light with the given color and direction.
+ *
+ * Directional light comes from one direction.
+ * The direction is specified as numbers inclusively between -1 and 1.
+ * For example, setting the direction as (0, -1, 0) will cause the
+ * geometry to be lit from below (since the light will be facing
+ * directly upwards). Similarly, setting the direction as (1, 0, 0)
+ * will cause the geometry to be lit from the left (since the light
+ * will be facing directly rightwards).
+ *
+ * Directional lights do not have a specific point of origin, and
+ * therefore cannot be positioned closer or farther away from a geometry.
+ *
+ * A maximum of **5** directional lights can be active at once.
+ *
+ * Note: lights need to be called (whether directly or indirectly)
+ * within draw() to remain persistent in a looping program.
+ * Placing them in setup() will cause them to only have an effect
+ * the first time through the loop.
*
- * A maximum of 5 directionalLight can be active at one time
* @method directionalLight
- * @param {Number} v1 red or hue value (depending on the current
- * color mode),
- * @param {Number} v2 green or saturation value
- * @param {Number} v3 blue or brightness value
- * @param {p5.Vector} position the direction of the light
+ * @param {Number} v1 red or hue value relative to the current
+ * color range
+ * @param {Number} v2 green or saturation value relative to the
+ * current color range
+ * @param {Number} v3 blue or brightness value relative to the
+ * current color range
+ * @param {Number} x x component of direction (inclusive range of -1 to 1)
+ * @param {Number} y y component of direction (inclusive range of -1 to 1)
+ * @param {Number} z z component of direction (inclusive range of -1 to 1)
* @chainable
* @example
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe(
+ * 'scene with sphere and directional light. The direction of the light is controlled with the mouse position.'
+ * );
* }
* function draw() {
* background(0);
@@ -204,34 +278,34 @@ p5.prototype.specularColor = function(v1, v2, v3) {
*
*
* @alt
- * light source on canvas changeable with mouse position
+ * scene with sphere and directional light. The direction of
+ * the light is controlled with the mouse position.
*/
/**
* @method directionalLight
- * @param {Number[]|String|p5.Color} color color Array, CSS color string,
- * or p5.Color value
- * @param {Number} x x axis direction
- * @param {Number} y y axis direction
- * @param {Number} z z axis direction
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} direction direction of light as a
+ * p5.Vector
* @chainable
*/
/**
* @method directionalLight
- * @param {Number[]|String|p5.Color} color
- * @param {p5.Vector} position
+ * @param {p5.Color|Number[]|String} color color as a p5.Color,
+ * as an array, or as a CSS string
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
* @chainable
*/
/**
* @method directionalLight
- * @param {Number} v1
- * @param {Number} v2
- * @param {Number} v3
- * @param {Number} x
- * @param {Number} y
- * @param {Number} z
+ * @param {p5.Color|Number[]|String} color
+ * @param {p5.Vector} direction
* @chainable
*/
p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
@@ -278,36 +352,52 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
};
/**
- * Creates a point light with a color and a light position
+ * Creates a point light with the given color and position.
+ *
+ * A point light emits light from a single point in all directions.
+ * Because the light is emitted from a specific point (position),
+ * it has a different effect when it is positioned farther vs. nearer
+ * an object.
+ *
+ * A maximum of **5** point lights can be active at once.
+ *
+ * Note: lights need to be called (whether directly or indirectly)
+ * within draw() to remain persistent in a looping program.
+ * Placing them in setup() will cause them to only have an effect
+ * the first time through the loop.
*
- * A maximum of 5 pointLight can be active at one time
* @method pointLight
- * @param {Number} v1 red or hue value (depending on the current
- * color mode),
- * @param {Number} v2 green or saturation value
- * @param {Number} v3 blue or brightness value
- * @param {Number} x x axis position
- * @param {Number} y y axis position
- * @param {Number} z z axis position
+ * @param {Number} v1 red or hue value relative to the current
+ * color range
+ * @param {Number} v2 green or saturation value relative to the
+ * current color range
+ * @param {Number} v3 blue or brightness value relative to the
+ * current color range
+ * @param {Number} x x component of position
+ * @param {Number} y y component of position
+ * @param {Number} z z component of position
* @chainable
* @example
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe(
+ * 'scene with sphere and point light. The position of the light is controlled with the mouse position.'
+ * );
* }
* function draw() {
* background(0);
- * //move your mouse to change light position
+ * // move your mouse to change light position
* let locX = mouseX - width / 2;
* let locY = mouseY - height / 2;
* // to set the light position,
* // think of the world's coordinate as:
- * // -width/2,-height/2 -------- width/2,-height/2
- * // | |
- * // | 0,0 |
- * // | |
- * // -width/2,height/2--------width/2,height/2
+ * // -width/2,-height/2 ----------- width/2,-height/2
+ * // | |
+ * // | 0,0 |
+ * // | |
+ * // -width/2,height/2 ----------- width/2,height/2
* pointLight(250, 250, 250, locX, locY, 50);
* noStroke();
* sphere(40);
@@ -316,22 +406,23 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
*
*
* @alt
- * spot light on canvas changes position with mouse
+ * scene with sphere and point light. The position of
+ * the light is controlled with the mouse position.
*/
/**
* @method pointLight
- * @param {Number} v1
- * @param {Number} v2
- * @param {Number} v3
- * @param {p5.Vector} position the position of the light
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} position of light as a p5.Vector
* @chainable
*/
/**
* @method pointLight
- * @param {Number[]|String|p5.Color} color color Array, CSS color string,
- * or p5.Color value
+ * @param {p5.Color|Number[]|String} color color as a p5.Color,
+ * as an array, or as a CSS string
* @param {Number} x
* @param {Number} y
* @param {Number} z
@@ -340,7 +431,7 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
/**
* @method pointLight
- * @param {Number[]|String|p5.Color} color
+ * @param {p5.Color|Number[]|String} color
* @param {p5.Vector} position
* @chainable
*/
@@ -385,7 +476,15 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
};
/**
- * Sets the default ambient and directional light. The defaults are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1). Lights need to be included in the draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop.
+ * Places an ambient and directional light in the scene.
+ * The lights are set to ambientLight(128, 128, 128) and
+ * directionalLight(128, 128, 128, 0, 0, -1).
+ *
+ * Note: lights need to be called (whether directly or indirectly)
+ * within draw() to remain persistent in a looping program.
+ * Placing them in setup() will cause them to only have an effect
+ * the first time through the loop.
+ *
* @method lights
* @chainable
* @example
@@ -393,6 +492,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('the light is partially ambient and partially directional');
* }
* function draw() {
* background(0);
@@ -423,17 +523,22 @@ p5.prototype.lights = function() {
};
/**
- * Sets the falloff rates for point lights. It affects only the elements which are created after it in the code.
- * The default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:
+ * Sets the falloff rate for pointLight()
+ * and spotLight().
+ *
+ * lightFalloff() affects only the lights which are created after it
+ * in the code.
+ *
+ * The `constant`, `linear`, an `quadratic` parameters are used to calculate falloff as follows:
*
* d = distance from light position to vertex position
*
- * falloff = 1 / (CONSTANT + d \* LINEAR + ( d \* d ) \* QUADRATIC)
+ * falloff = 1 / (CONSTANT + d \* LINEAR + (d \* d) \* QUADRATIC)
*
* @method lightFalloff
- * @param {Number} constant constant value for determining falloff
- * @param {Number} linear linear value for determining falloff
- * @param {Number} quadratic quadratic value for determining falloff
+ * @param {Number} constant CONSTANT value for determining falloff
+ * @param {Number} linear LINEAR value for determining falloff
+ * @param {Number} quadratic QUADRATIC value for determining falloff
* @chainable
* @example
*
@@ -441,6 +546,9 @@ p5.prototype.lights = function() {
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
+ * describe(
+ * 'Two spheres with different falloff values show different intensity of light'
+ * );
* }
* function draw() {
* ortho();
@@ -517,26 +625,43 @@ p5.prototype.lightFalloff = function(
};
/**
- * Creates a spotlight with a given color, position, direction of light,
- * angle and concentration. Here, angle refers to the opening or aperture
- * of the cone of the spotlight, and concentration is used to focus the
- * light towards the center. Both angle and concentration are optional, but if
- * you want to provide concentration, you will also have to specify the angle.
+ * Creates a spot light with the given color, position,
+ * light direction, angle, and concentration.
+ *
+ * Like a pointLight(), a spotLight()
+ * emits light from a specific point (position). It has a different effect
+ * when it is positioned farther vs. nearer an object.
+ *
+ * However, unlike a pointLight(), the light is emitted in **one direction**
+ * along a conical shape. The shape of the cone can be controlled using
+ * the `angle` and `concentration` parameters.
+ *
+ * The `angle` parameter is used to
+ * determine the radius of the cone. And the `concentration`
+ * parameter is used to focus the light towards the center of
+ * the cone. Both parameters are optional, however if you want
+ * to specify `concentration`, you must also specify `angle`.
+ * The minimum concentration value is 1.
+ *
+ * A maximum of **5** spot lights can be active at once.
+ *
+ * Note: lights need to be called (whether directly or indirectly)
+ * within draw() to remain persistent in a looping program.
+ * Placing them in setup() will cause them to only have an effect
+ * the first time through the loop.
*
- * A maximum of 5 spotLight can be active at one time
* @method spotLight
- * @param {Number} v1 red or hue value (depending on the current
- * color mode),
- * @param {Number} v2 green or saturation value
- * @param {Number} v3 blue or brightness value
- * @param {Number} x x axis position
- * @param {Number} y y axis position
- * @param {Number} z z axis position
- * @param {Number} rx x axis direction of light
- * @param {Number} ry y axis direction of light
- * @param {Number} rz z axis direction of light
- * @param {Number} [angle] optional parameter for angle. Defaults to PI/3
- * @param {Number} [conc] optional parameter for concentration. Defaults to 100
+ * @param {Number} v1 red or hue value relative to the current color range
+ * @param {Number} v2 green or saturation value relative to the current color range
+ * @param {Number} v3 blue or brightness value relative to the current color range
+ * @param {Number} x x component of position
+ * @param {Number} y y component of position
+ * @param {Number} z z component of position
+ * @param {Number} rx x component of light direction (inclusive range of -1 to 1)
+ * @param {Number} ry y component of light direction (inclusive range of -1 to 1)
+ * @param {Number} rz z component of light direction (inclusive range of -1 to 1)
+ * @param {Number} [angle] angle of cone. Defaults to PI/3
+ * @param {Number} [concentration] concentration of cone. Defaults to 100
* @chainable
*
* @example
@@ -544,19 +669,22 @@ p5.prototype.lightFalloff = function(
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe(
+ * 'scene with sphere and spot light. The position of the light is controlled with the mouse position.'
+ * );
* }
* function draw() {
* background(0);
- * //move your mouse to change light position
+ * // move your mouse to change light position
* let locX = mouseX - width / 2;
* let locY = mouseY - height / 2;
* // to set the light position,
* // think of the world's coordinate as:
- * // -width/2,-height/2 -------- width/2,-height/2
- * // | |
- * // | 0,0 |
- * // | |
- * // -width/2,height/2--------width/2,height/2
+ * // -width/2,-height/2 ----------- width/2,-height/2
+ * // | |
+ * // | 0,0 |
+ * // | |
+ * // -width/2,height/2 ----------- width/2,height/2
* ambientLight(50);
* spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);
* noStroke();
@@ -566,16 +694,17 @@ p5.prototype.lightFalloff = function(
*
*
* @alt
- * Spot light on a sphere which changes position with mouse
+ * scene with sphere and spot light. The position of
+ * the light is controlled with the mouse position.
*/
/**
* @method spotLight
- * @param {Number[]|String|p5.Color} color color Array, CSS color string,
- * or p5.Color value
- * @param {p5.Vector} position the position of the light
- * @param {p5.Vector} direction the direction of the light
+ * @param {p5.Color|Number[]|String} color color as a p5.Color,
+ * as an array, or as a CSS string
+ * @param {p5.Vector} position position of light as a p5.Vector
+ * @param {p5.Vector} direction direction of light as a p5.Vector
* @param {Number} [angle]
- * @param {Number} [conc]
+ * @param {Number} [concentration]
*/
/**
* @method spotLight
@@ -585,27 +714,27 @@ p5.prototype.lightFalloff = function(
* @param {p5.Vector} position
* @param {p5.Vector} direction
* @param {Number} [angle]
- * @param {Number} [conc]
+ * @param {Number} [concentration]
*/
/**
* @method spotLight
- * @param {Number[]|String|p5.Color} color
+ * @param {p5.Color|Number[]|String} color
* @param {Number} x
* @param {Number} y
* @param {Number} z
* @param {p5.Vector} direction
* @param {Number} [angle]
- * @param {Number} [conc]
+ * @param {Number} [concentration]
*/
/**
* @method spotLight
- * @param {Number[]|String|p5.Color} color
+ * @param {p5.Color|Number[]|String} color
* @param {p5.Vector} position
* @param {Number} rx
* @param {Number} ry
* @param {Number} rz
* @param {Number} [angle]
- * @param {Number} [conc]
+ * @param {Number} [concentration]
*/
/**
* @method spotLight
@@ -617,7 +746,7 @@ p5.prototype.lightFalloff = function(
* @param {Number} z
* @param {p5.Vector} direction
* @param {Number} [angle]
- * @param {Number} [conc]
+ * @param {Number} [concentration]
*/
/**
* @method spotLight
@@ -629,11 +758,11 @@ p5.prototype.lightFalloff = function(
* @param {Number} ry
* @param {Number} rz
* @param {Number} [angle]
- * @param {Number} [conc]
+ * @param {Number} [concentration]
*/
/**
* @method spotLight
- * @param {Number[]|String|p5.Color} color
+ * @param {p5.Color|Number[]|String} color
* @param {Number} x
* @param {Number} y
* @param {Number} z
@@ -641,7 +770,7 @@ p5.prototype.lightFalloff = function(
* @param {Number} ry
* @param {Number} rz
* @param {Number} [angle]
- * @param {Number} [conc]
+ * @param {Number} [concentration]
*/
p5.prototype.spotLight = function(
v1,
@@ -857,10 +986,16 @@ p5.prototype.spotLight = function(
};
/**
- * This function will remove all the lights from the sketch for the
- * subsequent materials rendered. It affects all the subsequent methods.
- * Calls to lighting methods made after noLights() will re-enable lights
- * in the sketch.
+ * Removes all lights present in a sketch.
+ *
+ * All subsequent geometry is rendered without lighting (until a new
+ * light is created with a call to one of the lighting functions
+ * (lights(),
+ * ambientLight(),
+ * directionalLight(),
+ * pointLight(),
+ * spotLight()).
+ *
* @method noLights
* @chainable
* @example
@@ -868,6 +1003,9 @@ p5.prototype.spotLight = function(
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe(
+ * 'Three white spheres. Each appears as a different color due to lighting.'
+ * );
* }
* function draw() {
* background(200);
diff --git a/src/webgl/loading.js b/src/webgl/loading.js
index 78e19145c2..039eba7fea 100755
--- a/src/webgl/loading.js
+++ b/src/webgl/loading.js
@@ -50,6 +50,7 @@ import './p5.Geometry';
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('Vertically rotating 3-d octahedron.');
* }
*
* function draw() {
@@ -77,6 +78,7 @@ import './p5.Geometry';
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('Vertically rotating 3-d teapot with red, green and blue gradient.');
* }
*
* function draw() {
@@ -602,6 +604,7 @@ function parseASCIISTL(model, lines) {
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('Vertically rotating 3-d octahedron.');
* }
*
* function draw() {
diff --git a/src/webgl/material.js b/src/webgl/material.js
index 7590d0fe71..6694427a3b 100644
--- a/src/webgl/material.js
+++ b/src/webgl/material.js
@@ -45,6 +45,7 @@ import './p5.Texture';
* shader(mandel);
* noStroke();
* mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');
* }
*
* function draw() {
@@ -162,6 +163,7 @@ p5.prototype.loadShader = function(
*
* // 'p' is the center point of the Mandelbrot image
* mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');
* }
*
* function draw() {
@@ -233,6 +235,10 @@ p5.prototype.createShader = function(vertSrc, fragSrc) {
* orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
*
* noStroke();
+ *
+ * describe(
+ * 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'
+ * );
* }
*
* function draw() {
@@ -326,6 +332,10 @@ p5.prototype.shader = function(s) {
*
* // Create our shader
* shaderProgram = createShader(vertSrc, fragSrc);
+ *
+ * describe(
+ * 'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.'
+ * );
* }
*
* // prettier-ignore
@@ -392,6 +402,7 @@ p5.prototype.resetShader = function() {
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('spinning cube with a texture from an image');
* }
*
* function draw() {
@@ -417,6 +428,7 @@ p5.prototype.resetShader = function() {
* createCanvas(100, 100, WEBGL);
* pg = createGraphics(200, 200);
* pg.textSize(75);
+ * describe('plane with a texture from an image created by createGraphics()');
* }
*
* function draw() {
@@ -444,6 +456,7 @@ p5.prototype.resetShader = function() {
* }
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('rectangle with video as texture');
* }
*
* function draw() {
@@ -473,6 +486,7 @@ p5.prototype.resetShader = function() {
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('quad with a texture, mapped using normalized coordinates');
* }
*
* function draw() {
@@ -529,6 +543,7 @@ p5.prototype.texture = function(tex) {
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('quad with a texture, mapped using normalized coordinates');
* }
*
* function draw() {
@@ -557,6 +572,7 @@ p5.prototype.texture = function(tex) {
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('quad with a texture, mapped using image coordinates');
* }
*
* function draw() {
@@ -615,6 +631,7 @@ p5.prototype.textureMode = function(mode) {
* function setup() {
* createCanvas(100, 100, WEBGL);
* textureWrap(MIRROR);
+ * describe('an image of the rocky mountains repeated in mirrored tiles');
* }
*
* function draw() {
@@ -657,11 +674,17 @@ p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) {
};
/**
- * Normal material for geometry is a material that is not affected by light.
- * It is not reflective and is a placeholder material often used for debugging.
- * Surfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue.
- * You can view all possible materials in this
+ * Sets the current material as a normal material.
+ *
+ * A normal material is not affected by light. It is often used as
+ * a placeholder material when debugging.
+ *
+ * Surfaces facing the X-axis become red, those facing the Y-axis
+ * become green, and those facing the Z-axis become blue.
+ *
+ * You can view more materials in this
* example.
+ *
* @method normalMaterial
* @chainable
* @example
@@ -669,6 +692,7 @@ p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) {
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('Sphere with normal material');
* }
*
* function draw() {
@@ -679,7 +703,7 @@ p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) {
*
*
* @alt
- * Red, green and blue gradient.
+ * Sphere with normal material
*/
p5.prototype.normalMaterial = function(...args) {
this._assert3d('normalMaterial');
@@ -695,68 +719,103 @@ p5.prototype.normalMaterial = function(...args) {
};
/**
- * Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting.
- * For example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.
- * Here's an example containing all possible materials.
- * @method ambientMaterial
- * @param {Number} v1 gray value, red or hue value
- * (depending on the current color mode),
- * @param {Number} [v2] green or saturation value
- * @param {Number} [v3] blue or brightness value
+ * Sets the current material as an ambient material of the given color.
+ *
+ * The ambientMaterial() color is the color the object will reflect
+ * under **any** lighting.
+ *
+ * Consider an ambientMaterial() with the color yellow (255, 255, 0).
+ * If the light emits the color white (255, 255, 255), then the object
+ * will appear yellow as it will reflect the red and green components
+ * of the light. If the light emits the color red (255, 0, 0), then
+ * the object will appear red as it will reflect the red component
+ * of the light. If the light emits the color blue (0, 0, 255),
+ * then the object will appear black, as there is no component of
+ * the light that it can reflect.
+ *
+ * You can view more materials in this
+ * example.
+ *
+ * @method ambientMaterial
+ * @param {Number} v1 red or hue value relative to the current
+ * color range
+ * @param {Number} v2 green or saturation value relative to the
+ * current color range
+ * @param {Number} v3 blue or brightness value relative to the
+ * current color range
* @chainable
* @example
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('sphere reflecting red, blue, and green light');
* }
* function draw() {
* background(0);
* noStroke();
- * ambientLight(200);
+ * ambientLight(255);
* ambientMaterial(70, 130, 230);
* sphere(40);
* }
*
*
+ * @alt
+ * sphere reflecting red, blue, and green light
+ *
+ * @example
*
*
* // ambientLight is both red and blue (magenta),
* // so object only reflects it's red and blue components
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('box reflecting only red and blue light');
* }
* function draw() {
* background(70);
- * ambientLight(100); // white light
- * ambientMaterial(255, 0, 255); // pink material
+ * ambientLight(255, 0, 255); // magenta light
+ * ambientMaterial(255); // white material
* box(30);
* }
*
*
+ * @alt
+ * box reflecting only red and blue light
+ *
+ * @example
*
*
* // ambientLight is green. Since object does not contain
* // green, it does not reflect any light
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('box reflecting no light');
* }
* function draw() {
* background(70);
* ambientLight(0, 255, 0); // green light
- * ambientMaterial(255, 0, 255); // pink material
+ * ambientMaterial(255, 0, 255); // magenta material
* box(30);
* }
*
*
* @alt
- * radiating light source from top right of canvas
- * box reflecting only red and blue light
* box reflecting no light
*/
+
+/**
+ * @method ambientMaterial
+ * @param {Number} gray number specifying value between
+ * white and black
+ * @chainable
+ */
+
/**
- * @method ambientMaterial
- * @param {Number[]|String|p5.Color} color color, color Array, or CSS color string
+ * @method ambientMaterial
+ * @param {p5.Color|Number[]|String} color
+ * color as a p5.Color,
+ * as an array, or as a CSS string
* @chainable
*/
p5.prototype.ambientMaterial = function(v1, v2, v3) {
@@ -775,23 +834,35 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) {
};
/**
- * Sets the emissive color of the material used for geometry drawn to
- * the screen. This is a misnomer in the sense that the material does not
- * actually emit light that effects surrounding polygons. Instead,
- * it gives the appearance that the object is glowing. An emissive material
- * will display at full strength even if there is no light for it to reflect.
+ * Sets the current material as an emissive material of
+ * the given color.
+ *
+ * An emissive material will display the emissive color at
+ * full strength regardless of lighting. This can give the
+ * appearance that the object is glowing.
+ *
+ * Note, "emissive" is a misnomer in the sense that the material
+ * does not actually emit light that will affect surrounding objects.
+ *
+ * You can view more materials in this
+ * example.
+ *
* @method emissiveMaterial
- * @param {Number} v1 gray value, red or hue value
- * (depending on the current color mode),
- * @param {Number} [v2] green or saturation value
- * @param {Number} [v3] blue or brightness value
- * @param {Number} [a] opacity
+ * @param {Number} v1 red or hue value relative to the current
+ * color range
+ * @param {Number} v2 green or saturation value relative to the
+ * current color range
+ * @param {Number} v3 blue or brightness value relative to the
+ * current color range
+ * @param {Number} [alpha] alpha value relative to current color
+ * range (default is 0-255)
* @chainable
* @example
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('sphere with green emissive material');
* }
* function draw() {
* background(0);
@@ -804,11 +875,21 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) {
*
*
* @alt
- * radiating light source from top right of canvas
+ * sphere with green emissive material
*/
+
/**
- * @method emissiveMaterial
- * @param {Number[]|String|p5.Color} color color, color Array, or CSS color string
+ * @method emissiveMaterial
+ * @param {Number} gray number specifying value between
+ * white and black
+ * @chainable
+ */
+
+/**
+ * @method emissiveMaterial
+ * @param {p5.Color|Number[]|String} color
+ * color as a p5.Color,
+ * as an array, or as a CSS string
* @chainable
*/
p5.prototype.emissiveMaterial = function(v1, v2, v3, a) {
@@ -827,11 +908,23 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) {
};
/**
- * Specular material for geometry with a given color. Specular material is a shiny reflective material.
- * Like ambient material it also defines the color the object reflects under ambient lighting.
- * For example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.
- * For all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer.
- * Here's an example containing all possible materials.
+ * Sets the current material as a specular material of the given color.
+ *
+ * A specular material is reflective (shiny). The shininess can be
+ * controlled by the shininess() function.
+ *
+ * Like ambientMaterial(),
+ * the specularMaterial() color is the color the object will reflect
+ * under ambientLight().
+ * However unlike ambientMaterial(), for all other types of lights
+ * (directionalLight(),
+ * pointLight(),
+ * spotLight()),
+ * a specular material will reflect the **color of the light source**.
+ * This is what gives it its "shiny" appearance.
+ *
+ * You can view more materials in this
+ * example.
*
* @method specularMaterial
* @param {Number} gray number specifying value between white and black.
@@ -845,6 +938,7 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) {
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
+ * describe('torus with specular material');
* }
*
* function draw() {
@@ -881,7 +975,9 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) {
/**
* @method specularMaterial
- * @param {Number[]|String|p5.Color} color color Array, or CSS color string
+ * @param {p5.Color|Number[]|String} color
+ * color as a p5.Color,
+ * as an array, or as a CSS string
* @chainable
*/
p5.prototype.specularMaterial = function(v1, v2, v3, alpha) {
@@ -900,18 +996,20 @@ p5.prototype.specularMaterial = function(v1, v2, v3, alpha) {
};
/**
- * Sets the amount of gloss in the surface of shapes.
- * Used in combination with specularMaterial() in setting
- * the material properties of shapes. The default and minimum value is 1.
+ * Sets the amount of gloss ("shininess") of a
+ * specularMaterial().
+ *
+ * The default and minimum value is 1.
+ *
* @method shininess
- * @param {Number} shine Degree of Shininess.
- * Defaults to 1.
+ * @param {Number} shine degree of shininess
* @chainable
* @example
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('two spheres, one more shiny than the other');
* }
* function draw() {
* background(0);
@@ -931,7 +1029,7 @@ p5.prototype.specularMaterial = function(v1, v2, v3, alpha) {
*
*
* @alt
- * Shininess on Camera changes position with mouse
+ * two spheres, one more shiny than the other
*/
p5.prototype.shininess = function(shine) {
this._assert3d('shininess');
diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js
index f09dee3923..637ada8e69 100644
--- a/src/webgl/p5.Camera.js
+++ b/src/webgl/p5.Camera.js
@@ -45,6 +45,7 @@ import p5 from '../core/main';
*
* function setup() {
* createCanvas(100, 100, WEBGL);
+ * describe('a square moving closer and then away from the camera.');
* }
* function draw() {
* background(204);
@@ -82,6 +83,9 @@ import p5 from '../core/main';
* sliderGroup[i].position(10, height + h);
* sliderGroup[i].style('width', '80px');
* }
+ * describe(
+ * 'White square repeatedly grows to fill canvas and then shrinks. An interactive example of a red cube with 3 sliders for moving it across x, y, z axis and 3 sliders for shifting its center.'
+ * );
* }
*
* function draw() {
@@ -141,6 +145,9 @@ p5.prototype.camera = function(...args) {
* function setup() {
* createCanvas(100, 100, WEBGL);
* perspective(PI / 3.0, width / height, 0.1, 500);
+ * describe(
+ * 'two colored 3D boxes move back and forth, rotating as mouse is dragged.'
+ * );
* }
* function draw() {
* background(200);
@@ -203,6 +210,9 @@ p5.prototype.perspective = function(...args) {
* function setup() {
* createCanvas(100, 100, WEBGL);
* ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
+ * describe(
+ * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
+ * );
* }
* function draw() {
* background(200);
@@ -266,6 +276,9 @@ p5.prototype.ortho = function(...args) {
* createCanvas(100, 100, WEBGL);
* setAttributes('antialias', true);
* frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
+ * describe(
+ * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
+ * );
* }
* function draw() {
* background(200);
@@ -328,6 +341,7 @@ p5.prototype.frustum = function(...args) {
* createCanvas(100, 100, WEBGL);
* background(0);
* camera = createCamera();
+ * describe('An example that creates a camera and moves it around the box.');
* }
*
* function draw() {
@@ -398,6 +412,9 @@ p5.prototype.createCamera = function() {
* cam = createCamera();
* // set initial pan angle
* cam.pan(-0.8);
+ * describe(
+ * 'camera view pans left and right across a series of rotating 3D boxes.'
+ * );
* }
*
* function draw() {
@@ -455,6 +472,7 @@ p5.Camera = function(renderer) {
* cam = createCamera();
* div = createDiv();
* div.position(0, 0);
+ * describe('An example showing the use of camera object properties');
* }
*
* function draw() {
@@ -482,6 +500,7 @@ p5.Camera = function(renderer) {
* cam = createCamera();
* div = createDiv();
* div.position(0, 0);
+ * describe('An example showing the use of camera object properties');
* }
*
* function draw() {
@@ -509,6 +528,7 @@ p5.Camera = function(renderer) {
* cam = createCamera();
* div = createDiv();
* div.position(0, 0);
+ * describe('An example showing the use of camera object properties');
* }
*
* function draw() {
@@ -538,6 +558,7 @@ p5.Camera = function(renderer) {
* div = createDiv('centerX = ' + cam.centerX);
* div.position(0, 0);
* div.style('color', 'white');
+ * describe('An example showing the use of camera object properties');
* }
*
* function draw() {
@@ -566,6 +587,7 @@ p5.Camera = function(renderer) {
* div = createDiv('centerY = ' + cam.centerY);
* div.position(0, 0);
* div.style('color', 'white');
+ * describe('An example showing the use of camera object properties');
* }
*
* function draw() {
@@ -594,6 +616,7 @@ p5.Camera = function(renderer) {
* div = createDiv('centerZ = ' + cam.centerZ);
* div.position(0, 0);
* div.style('color', 'white');
+ * describe('An example showing the use of camera object properties');
* }
*
* function draw() {
@@ -622,6 +645,7 @@ p5.Camera = function(renderer) {
* div.position(0, 0);
* div.style('color', 'blue');
* div.style('font-size', '18px');
+ * describe('An example showing the use of camera object properties');
* }
*
*
@@ -645,6 +669,7 @@ p5.Camera = function(renderer) {
* div.position(0, 0);
* div.style('color', 'blue');
* div.style('font-size', '18px');
+ * describe('An example showing the use of camera object properties');
* }
*
*
@@ -668,6 +693,7 @@ p5.Camera = function(renderer) {
* div.position(0, 0);
* div.style('color', 'blue');
* div.style('font-size', '18px');
+ * describe('An example showing the use of camera object properties');
* }
*
*
@@ -1744,6 +1770,10 @@ p5.Camera.prototype._isActive = function() {
*
* // set variable for previously active camera:
* currentCamera = 1;
+ *
+ * describe(
+ * 'Canvas switches between two camera views, each showing a series of spinning 3D boxes.'
+ * );
* }
*
* function draw() {
diff --git a/src/webgl/p5.RendererGL.Immediate.js b/src/webgl/p5.RendererGL.Immediate.js
index 410237643b..3c23b0c56e 100644
--- a/src/webgl/p5.RendererGL.Immediate.js
+++ b/src/webgl/p5.RendererGL.Immediate.js
@@ -49,7 +49,7 @@ p5.RendererGL.prototype.beginShape = function(mode) {
p5.RendererGL.prototype.vertex = function(x, y) {
let z, u, v;
- // default to (x, y) mode: all other arugments assumed to be 0.
+ // default to (x, y) mode: all other arguments assumed to be 0.
z = u = v = 0;
if (arguments.length === 3) {
diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js
index 740e95978e..5435814f2d 100644
--- a/src/webgl/p5.Shader.js
+++ b/src/webgl/p5.Shader.js
@@ -341,6 +341,10 @@ p5.Shader.prototype.useProgram = function() {
* createCanvas(100, 100, WEBGL);
* shader(grad);
* noStroke();
+ *
+ * describe(
+ * 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'
+ * );
* }
*
* function draw() {
diff --git a/test/js/sinon.js b/test/js/sinon.js
index c84a8597c4..f0a9e842e8 100644
--- a/test/js/sinon.js
+++ b/test/js/sinon.js
@@ -5,13 +5,13 @@
* @author Contributors: https://github.com/cjohansen/Sinon.JS/blob/master/AUTHORS
*
* (The BSD License)
- *
+ *
* Copyright (c) 2010-2014, Christian Johansen, christian@cjohansen.no
* All rights reserved.
- *
+ *
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
- *
+ *
* * Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright notice,
@@ -20,7 +20,7 @@
* * Neither the name of Christian Johansen nor the names of his contributors
* may be used to endorse or promote products derived from this software
* without specific prior written permission.
- *
+ *
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
@@ -463,7 +463,7 @@
module.exports = m(require("samsam"));
}) || function (m) { this.formatio = m(this.samsam); }
)(function (samsam) {
-
+
var formatio = {
excludeConstructors: ["Object", /^.$/],
quoteStrings: true,
@@ -566,7 +566,7 @@
processed.push(array);
var pieces = [];
var i, l;
- l = (this.limitChildrenCount > 0) ?
+ l = (this.limitChildrenCount > 0) ?
Math.min(this.limitChildrenCount, array.length) : array.length;
for (i = 0; i < l; ++i) {
@@ -586,7 +586,7 @@
var pieces = [], properties = samsam.keys(object).sort();
var length = 3;
var prop, str, obj, i, k, l;
- l = (this.limitChildrenCount > 0) ?
+ l = (this.limitChildrenCount > 0) ?
Math.min(this.limitChildrenCount, properties.length) : properties.length;
for (i = 0; i < l; ++i) {
@@ -636,7 +636,7 @@
var content = element.innerHTML;
if (content.length > 20) {
- content = content.substr(0, 20) + "[...]";
+ content = content.slice(0, 20) + "[...]";
}
var res = formatted + pairs.join(" ") + ">" + content +
diff --git a/test/unit/color/p5.Color.js b/test/unit/color/p5.Color.js
index a4b274c4fc..43ffaa4f02 100644
--- a/test/unit/color/p5.Color.js
+++ b/test/unit/color/p5.Color.js
@@ -986,7 +986,7 @@ suite('p5.Color', function() {
test('should generate (r,g,b,a) color string with 0-1 normalized alpha', function() {
// Will not exactly equal 0.5 due to math: test "0.5" substr of
// 'rgba(128,0,128,0.5...' instead of checking the entire string
- assert.equal(colorStr.substr(15, 3), '0.5');
+ assert.equal(colorStr.slice(15, 18), '0.5');
});
test('should consistently generate the same output', function() {
diff --git a/test/unit/color/setting.js b/test/unit/color/setting.js
index d092831ac2..d72ce2bd74 100644
--- a/test/unit/color/setting.js
+++ b/test/unit/color/setting.js
@@ -214,4 +214,76 @@ suite('color/Setting', function() {
assert.deepEqual(myp5._colorMaxes[myp5.HSB], [360, 100, 100, 1]);
});
});
+
+ suite('p5.Color components', function() {
+ test('setRed() correctly sets red component', function() {
+ myp5.colorMode(myp5.RGB, 255);
+ const c = myp5.color(0, 162, 205, 255);
+ c.setRed(100);
+ assert.equal(myp5.red(c), 100);
+ assert.equal(myp5.green(c), 162);
+ assert.equal(myp5.blue(c), 205);
+ assert.equal(myp5.alpha(c), 255);
+ });
+
+ test('setGreen() correctly sets green component', function() {
+ myp5.colorMode(myp5.RGB, 255);
+ const c = myp5.color(0, 162, 205, 255);
+ c.setGreen(100);
+ assert.equal(myp5.red(c), 0);
+ assert.equal(myp5.green(c), 100);
+ assert.equal(myp5.blue(c), 205);
+ assert.equal(myp5.alpha(c), 255);
+ });
+
+ test('setBlue() correctly sets blue component', function() {
+ myp5.colorMode(myp5.RGB, 255);
+ const c = myp5.color(0, 162, 205, 255);
+ c.setBlue(100);
+ assert.equal(myp5.red(c), 0);
+ assert.equal(myp5.green(c), 162);
+ assert.equal(myp5.blue(c), 100);
+ assert.equal(myp5.alpha(c), 255);
+ });
+
+ test('setAlpha correctly sets alpha component', function() {
+ myp5.colorMode(myp5.RGB, 255);
+ const c = myp5.color(0, 162, 205, 255);
+ c.setAlpha(100);
+ assert.equal(myp5.red(c), 0);
+ assert.equal(myp5.green(c), 162);
+ assert.equal(myp5.blue(c), 205);
+ assert.equal(myp5.alpha(c), 100);
+ });
+
+ test('changing the red/green/blue/alpha components should clear the cached HSL/HSB values', function() {
+ myp5.colorMode(myp5.RGB, 255);
+ const c = myp5.color(0, 162, 205, 255);
+
+ // create HSL/HSB values
+ myp5.lightness(c);
+ myp5.brightness(c);
+ c.setRed(100);
+ assert(!c.hsba);
+ assert(!c.hsla);
+
+ myp5.lightness(c);
+ myp5.brightness(c);
+ c.setGreen(100);
+ assert(!c.hsba);
+ assert(!c.hsla);
+
+ myp5.lightness(c);
+ myp5.brightness(c);
+ c.setBlue(100);
+ assert(!c.hsba);
+ assert(!c.hsla);
+
+ myp5.lightness(c);
+ myp5.brightness(c);
+ c.setAlpha(100);
+ assert(!c.hsba);
+ assert(!c.hsla);
+ });
+ });
});
diff --git a/test/unit/math/trigonometry.js b/test/unit/math/trigonometry.js
index 437945f471..3445baa4c3 100644
--- a/test/unit/math/trigonometry.js
+++ b/test/unit/math/trigonometry.js
@@ -48,17 +48,33 @@ suite('Trigonometry', function() {
suite('p5.prototype.angleMode', function() {
test('should set constant to DEGREES', function() {
myp5.angleMode(DEGREES);
- assert.equal(myp5._angleMode, 'degrees');
+ assert.equal(myp5.angleMode(), 'degrees');
});
test('should set constant to RADIANS', function() {
myp5.angleMode(RADIANS);
- assert.equal(myp5._angleMode, 'radians');
+ assert.equal(myp5.angleMode(), 'radians');
+ });
+
+ test('wrong param type', function() {
+ assert.validationError(function() {
+ myp5.angleMode('wtflolzkk');
+ });
+ });
+
+ test('should return radians', function() {
+ myp5.angleMode(RADIANS);
+ assert.equal(myp5.angleMode(), 'radians');
+ });
+
+ test('should return degrees', function() {
+ myp5.angleMode(DEGREES);
+ assert.equal(myp5.angleMode(), 'degrees');
});
test('should always be RADIANS or DEGREES', function() {
myp5.angleMode('wtflolzkk');
- assert.equal(myp5._angleMode, 'radians');
+ assert.equal(myp5.angleMode(), 'radians');
});
});
diff --git a/translations/ko/README.md b/translations/ko/README.md
index 4603f10aa9..c15844116f 100644
--- a/translations/ko/README.md
+++ b/translations/ko/README.md
@@ -1,15 +1,26 @@
# Welcome to the FES Korean branch!
안녕하세요, FES 한국어 브랜치에 어서오세요!
-## 한국어 Translation Credits
+## 한국어 공동 번역 기여자 Korean Translation Credits
2021년 가을부터 공동작업으로 진행되어 2022년 1월에 마무리된 FES 에러메시지 공동 번역 작업은 아래 분들이 함께하셨습니다.
* [염인화](https://yinhwa.art/) (Inhwa Yeom): artist/XR researcher based in South Korea. (Take a look at her works on [p5 for 50+](https://p5for50.plus/) ([Processing Foundation Fellows 2020](https://medium.com/processing-foundation/p5-js-for-ages-50-in-korea-50d47b5927fb)) and p5js website Korean translation)
* 전유진 (Youjin Jeon): artist/organizer based in Seoul, South Korea. [여성을 위한 열린 기술랩(Woman Open Tech Lab.kr)](http://womanopentechlab.kr/) and [Seoul Express](http://seoulexpress.kr/)
* [정앎](https://www.almichu.com/) (Alm Chung, organizer): Korean-American artist/researcher based in Seattle, WA.
* 이지현 (Jihyun Lee): Korean publishing editor based in South Korea
-## 한국어 Translation Resources
-* 추후 추가될 예정입니다!
+## 영한 번역 리소스 (Korean-English Translation Resources)
+* 영한 [번역에 도움이 되는 툴과 유의점들]입니다.
+* 또한 영한 [번역 작업 중 마주치는 딜레마들] 속에서 저희가 채택한 방식을 모아 적어봤습니다.
+* 외래 [기술 용어 다루기]에 대한 논의입니다.
+* p5js 웹사이트와 기술 문서에서 사용하는 기술 용어들을 통일하기위해 사용하고 있 [p5js.org/ko 기술 용어 색인] 입니다.
+* 현존하는 검색툴/번역 툴들과 연계 가능한 "[사이를 맴도는]" 번역문에 대해 생각해보는 글입니다.
+이 외에도 FES의 세계화 작업 과정, 그리고 과정 중 논의된 이슈들을 [Friendly Errors i18n Book ✎ 친절한 오류 메시지 세계화 가이드북]에서 읽어보실 수 있습니다. "친절한 오류 메시지 세계화 가이드북"은 오픈 소스 프로젝트이며, 이 [독립된 레파지토리 (repository)]를 통해 기여 가능합니다.
-질문이나 건의 사항은 @almchung 에게 문의주시길 바랍니다.
\ No newline at end of file
+
+[번역에 도움이 되는 툴과 유의점들]: https://almchung.github.io/p5-fes-i18n-book/ch4/#tools
+[번역 작업 중 마주치는 딜레마들]: https://almchung.github.io/p5-fes-i18n-book/ch4/#dilemmas
+[기술 용어 다루기]: https://almchung.github.io/p5-fes-i18n-book/ch3/
+[사이를 맴도는]: https://almchung.github.io/p5-fes-i18n-book/ch5/
+[Friendly Errors i18n Book ✎ 친절한 오류 메시지 세계화 가이드북]: https://almchung.github.io/p5-fes-i18n-book/
+[독립된 레파지토리 (repository)]: https://github.com/almchung/p5-fes-i18n-book
\ No newline at end of file