+ *
+ *
+ *
+ * function setup() {
+ * background('pink');
+ *
+ * // Draw a heart.
+ * fill('red');
+ * noStroke();
+ * circle(67, 67, 20);
+ * circle(83, 67, 20);
+ * triangle(91, 73, 75, 95, 59, 73);
+ *
+ * // Add a general description of the canvas.
+ * describe('A pink square with a red heart in the bottom-right corner.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background('pink');
+ *
+ * // Draw a heart.
+ * fill('red');
+ * noStroke();
+ * circle(67, 67, 20);
+ * circle(83, 67, 20);
+ * triangle(91, 73, 75, 95, 59, 73);
+ *
+ * // Add a general description of the canvas
+ * // and display it for debugging.
+ * describe('A pink square with a red heart in the bottom-right corner.', LABEL);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // The expression
+ * // frameCount % 100
+ * // causes x to increase from 0
+ * // to 99, then restart from 0.
+ * let x = frameCount % 100;
+ *
+ * // Draw the circle.
+ * fill(0, 255, 0);
+ * circle(x, 50, 40);
+ *
+ * // Add a general description of the canvas.
+ * describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.describe = function (text, display) {
+ _main.default._validateParameters('describe', arguments);
+ if (typeof text !== 'string') {
+ return;
+ }
+ var cnvId = this.canvas.id;
+ //calls function that adds punctuation for better screen reading
+ text = _descriptionText(text);
+ //if there is no dummyDOM
+ if (!this.dummyDOM) {
+ this.dummyDOM = document.getElementById(cnvId).parentNode;
+ }
+ if (!this.descriptions) {
+ this.descriptions = {
+ };
+ } //check if html structure for description is ready
+
+ if (this.descriptions.fallback) {
+ //check if text is different from current description
+ if (this.descriptions.fallback.innerHTML !== text) {
+ //update description
+ this.descriptions.fallback.innerHTML = text;
+ }
+ } else {
+ //create fallback html structure
+ this._describeHTML('fallback', text);
+ } //if display is LABEL
+
+ if (display === this.LABEL) {
+ //check if html structure for label is ready
+ if (this.descriptions.label) {
+ //check if text is different from current label
+ if (this.descriptions.label.innerHTML !== text) {
+ //update label description
+ this.descriptions.label.innerHTML = text;
+ }
+ } else {
+ //create label html structure
+ this._describeHTML('label', text);
+ }
+ }
+ };
+ /**
+ * Creates a screen reader-accessible description of elements in the canvas.
+ *
+ * Elements are shapes or groups of shapes that create meaning together. For
+ * example, a few overlapping circles could make an "eye" element.
+ *
+ * The first parameter, `name`, is the name of the element.
+ *
+ * The second parameter, `text`, is the description of the element.
+ *
+ * The third parameter, `display`, is optional. It determines how the
+ * description is displayed. If `LABEL` is passed, as in
+ * `describe('A description.', LABEL)`, the description will be visible in
+ * a div element next to the canvas. Using `LABEL` creates unhelpful
+ * duplicates for screen readers. Only use `LABEL` during development. If
+ * `FALLBACK` is passed, as in `describe('A description.', FALLBACK)`, the
+ * description will only be visible to screen readers. This is the default
+ * mode.
+ *
+ * Read
+ * Writing accessible canvas descriptions
+ * to learn more about making sketches accessible.
+ *
+ * @method describeElement
+ * @param {String} name name of the element.
+ * @param {String} text description of the element.
+ * @param {Constant} [display] either LABEL or FALLBACK.
+ *
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // The expression
+ * // frameCount % 100
+ * // causes x to increase from 0
+ * // to 99, then restart from 0.
+ * let x = frameCount % 100;
+ *
+ * // Draw the circle.
+ * fill(0, 255, 0);
+ * circle(x, 50, 40);
+ *
+ * // Add a general description of the canvas
+ * // and display it for debugging.
+ * describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background('pink');
+ *
+ * // Describe the first element
+ * // and draw it.
+ * describeElement('Circle', 'A yellow circle in the top-left corner.');
+ * noStroke();
+ * fill('yellow');
+ * circle(25, 25, 40);
+ *
+ * // Describe the second element
+ * // and draw it.
+ * describeElement('Heart', 'A red heart in the bottom-right corner.');
+ * fill('red');
+ * circle(66.6, 66.6, 20);
+ * circle(83.2, 66.6, 20);
+ * triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red heart and yellow circle over a pink background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.describeElement = function (name, text, display) {
+ _main.default._validateParameters('describeElement', arguments);
+ if (typeof text !== 'string' || typeof name !== 'string') {
+ return;
+ }
+ var cnvId = this.canvas.id;
+ //calls function that adds punctuation for better screen reading
+ text = _descriptionText(text);
+ //calls function that adds punctuation for better screen reading
+ var elementName = _elementName(name);
+ //remove any special characters from name to use it as html id
+ name = name.replace(/[^a-zA-Z0-9]/g, '');
+ //store element description
+ var inner = '
+ * function setup() {
+ * background('pink');
+ *
+ * // Describe the first element
+ * // and draw it. Display the
+ * // description for debugging.
+ * describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);
+ * noStroke();
+ * fill('yellow');
+ * circle(25, 25, 40);
+ *
+ * // Describe the second element
+ * // and draw it. Display the
+ * // description for debugging.
+ * describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
+ * fill('red');
+ * circle(66.6, 66.6, 20);
+ * circle(83.2, 66.6, 20);
+ * triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red heart and yellow circle over a pink background.');
+ * }
+ *
+ * ');
+ if (!this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutput'))) {
+ //create description container +
for fallback description + this.dummyDOM.querySelector('#'.concat(cnvId)).innerHTML = html; + } else { + //create description container +
for fallback description before outputs + this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutput')).insertAdjacentHTML('beforebegin', html); + } + } else { + //if describeElement() has already created the container and added a table of elements + //create fallback description
before the table + this.dummyDOM.querySelector('#' + cnvId + fallbackTableId).insertAdjacentHTML('beforebegin', '
')); + } //if the container for the description exists + + this.descriptions.fallback = this.dummyDOM.querySelector('#'.concat(cnvId).concat(fallbackDescId)); + this.descriptions.fallback.innerHTML = text; + return; + } else if (type === 'label') { + //if there is no label container + if (!this.dummyDOM.querySelector('#'.concat(cnvId + labelContainer))) { + var _html = '');
+ //if there are no accessible outputs (see textOutput() and gridOutput())
+ if (!this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutputLabel'))) {
+ //create label container +
for label description + this.dummyDOM.querySelector('#' + cnvId).insertAdjacentHTML('afterend', _html); + } else { + //create label container +
for label description before outputs + this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutputLabel')).insertAdjacentHTML('beforebegin', _html); + } + } else if (this.dummyDOM.querySelector('#'.concat(cnvId + labelTableId))) { + //if describeElement() has already created the container and added a table of elements + //create label description
before the table + this.dummyDOM.querySelector('#'.concat(cnvId + labelTableId)).insertAdjacentHTML('beforebegin', '
')); + } + this.descriptions.label = this.dummyDOM.querySelector('#' + cnvId + labelDescId); + this.descriptions.label.innerHTML = text; + return; + } + }; + /* + * Helper functions for describeElement(). + */ + //check that name is not LABEL or FALLBACK and ensure text ends with colon + function _elementName(name) { + if (name === 'label' || name === 'fallback') { + throw new Error('element name should not be LABEL or FALLBACK'); + } //check if last character of string n is '.', ';', or ',' + + if (name.endsWith('.') || name.endsWith(';') || name.endsWith(',')) { + //replace last character with ':' + name = name.replace(/.$/, ':'); + } else if (!name.endsWith(':')) { + //if string n does not end with ':' + //add ':'' at the end of string + name = name + ':'; + } + return name; + } //creates HTML structure for element descriptions + + _main.default.prototype._describeElementHTML = function (type, name, text) { + var cnvId = this.canvas.id; + if (type === 'fallback') { + //if there is no description container + if (!this.dummyDOM.querySelector('#'.concat(cnvId + descContainer))) { + //if there are no accessible outputs (see textOutput() and gridOutput()) + var html = '
+ *
+ *
+ *
+ * function setup() {
+ * // Add the text description.
+ * textOutput();
+ *
+ * // Draw a couple of shapes.
+ * background(200);
+ * fill(255, 0, 0);
+ * circle(20, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red circle and a blue square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Add the text description and
+ * // display it for debugging.
+ * textOutput(LABEL);
+ *
+ * // Draw a couple of shapes.
+ * background(200);
+ * fill(255, 0, 0);
+ * circle(20, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red circle and a blue square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * // Add the text description.
+ * textOutput();
+ *
+ * // Draw a moving circle.
+ * background(200);
+ * let x = frameCount * 0.1;
+ * fill(255, 0, 0);
+ * circle(x, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red circle moves from left to right above a blue square.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.textOutput = function (display) {
+ _main.default._validateParameters('textOutput', arguments);
+ //if textOutput is already true
+ if (this._accessibleOutputs.text) {
+ return;
+ } else {
+ //make textOutput true
+ this._accessibleOutputs.text = true;
+ //create output for fallback
+ this._createOutput('textOutput', 'Fallback');
+ if (display === this.LABEL) {
+ //make textOutput label true
+ this._accessibleOutputs.textLabel = true;
+ //create output for label
+ this._createOutput('textOutput', 'Label');
+ }
+ }
+ };
+ /**
+ * Creates a screen reader-accessible description of shapes on the canvas.
+ *
+ * `gridOutput()` adds a general description, table of shapes, and list of
+ * shapes to the web page. The general description includes the canvas size,
+ * canvas color, and number of shapes. For example,
+ * `gray canvas, 100 by 100 pixels, contains 2 shapes: 1 circle 1 square`.
+ *
+ * `gridOutput()` uses its table of shapes as a grid. Each shape in the grid
+ * is placed in a cell whose row and column correspond to the shape's location
+ * on the canvas. The grid cells describe the color and type of shape at that
+ * location. For example, `red circle`. These descriptions can be selected
+ * individually to get more details. This is different from
+ * textOutput(), which uses its table as a list.
+ *
+ * A list of shapes follows the table. The list describes the color, type,
+ * location, and area of each shape. For example,
+ * `red circle, location = middle, area = 3 %`.
+ *
+ * The `display` parameter is optional. It determines how the description is
+ * displayed. If `LABEL` is passed, as in `gridOutput(LABEL)`, the description
+ * will be visible in a div element next to the canvas. Using `LABEL` creates
+ * unhelpful duplicates for screen readers. Only use `LABEL` during
+ * development. If `FALLBACK` is passed, as in `gridOutput(FALLBACK)`, the
+ * description will only be visible to screen readers. This is the default
+ * mode.
+ *
+ * Read
+ * Writing accessible canvas descriptions
+ * to learn more about making sketches accessible.
+ *
+ * @method gridOutput
+ * @param {Constant} [display] either FALLBACK or LABEL.
+ *
+ * @example
+ *
+ * function draw() {
+ * // Add the text description and
+ * // display it for debugging.
+ * textOutput(LABEL);
+ *
+ * // Draw a moving circle.
+ * background(200);
+ * let x = frameCount * 0.1;
+ * fill(255, 0, 0);
+ * circle(x, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red circle moves from left to right above a blue square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Add the grid description.
+ * gridOutput();
+ *
+ * // Draw a couple of shapes.
+ * background(200);
+ * fill(255, 0, 0);
+ * circle(20, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red circle and a blue square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Add the grid description and
+ * // display it for debugging.
+ * gridOutput(LABEL);
+ *
+ * // Draw a couple of shapes.
+ * background(200);
+ * fill(255, 0, 0);
+ * circle(20, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red circle and a blue square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * // Add the grid description.
+ * gridOutput();
+ *
+ * // Draw a moving circle.
+ * background(200);
+ * let x = frameCount * 0.1;
+ * fill(255, 0, 0);
+ * circle(x, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red circle moves from left to right above a blue square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.gridOutput = function (display) {
+ _main.default._validateParameters('gridOutput', arguments);
+ //if gridOutput is already true
+ if (this._accessibleOutputs.grid) {
+ return;
+ } else {
+ //make gridOutput true
+ this._accessibleOutputs.grid = true;
+ //create output for fallback
+ this._createOutput('gridOutput', 'Fallback');
+ if (display === this.LABEL) {
+ //make gridOutput label true
+ this._accessibleOutputs.gridLabel = true;
+ //create output for label
+ this._createOutput('gridOutput', 'Label');
+ }
+ }
+ };
+ //helper function returns true when accessible outputs are true
+ _main.default.prototype._addAccsOutput = function () {
+ //if there are no accessible outputs create object with all false
+ if (!this._accessibleOutputs) {
+ this._accessibleOutputs = {
+ text: false,
+ grid: false,
+ textLabel: false,
+ gridLabel: false
+ };
+ }
+ return this._accessibleOutputs.grid || this._accessibleOutputs.text;
+ };
+ //helper function that creates html structure for accessible outputs
+ _main.default.prototype._createOutput = function (type, display) {
+ var cnvId = this.canvas.id;
+ //if there are no ingredients create object. this object stores data for the outputs
+ if (!this.ingredients) {
+ this.ingredients = {
+ shapes: {
+ },
+ colors: {
+ background: 'white',
+ fill: 'white',
+ stroke: 'black'
+ },
+ pShapes: '',
+ pBackground: ''
+ };
+ } //if there is no dummyDOM create it
+
+ if (!this.dummyDOM) {
+ this.dummyDOM = document.getElementById(cnvId).parentNode;
+ }
+ var cIdT,
+ container,
+ inner;
+ var query = '';
+ if (display === 'Fallback') {
+ cIdT = cnvId + type;
+ container = cnvId + 'accessibleOutput';
+ if (!this.dummyDOM.querySelector('#'.concat(container))) {
+ //if there is no canvas description (see describe() and describeElement())
+ if (!this.dummyDOM.querySelector('#'.concat(cnvId, '_Description'))) {
+ //create html structure inside of canvas
+ this.dummyDOM.querySelector('#'.concat(cnvId)).innerHTML = '');
+ } else {
+ //create html structure after canvas description container
+ this.dummyDOM.querySelector('#'.concat(cnvId, '_Description')).insertAdjacentHTML('afterend', ''));
+ }
+ }
+ } else if (display === 'Label') {
+ query = display;
+ cIdT = cnvId + type + display;
+ container = cnvId + 'accessibleOutput' + display;
+ if (!this.dummyDOM.querySelector('#'.concat(container))) {
+ //if there is no canvas description label (see describe() and describeElement())
+ if (!this.dummyDOM.querySelector('#'.concat(cnvId, '_Label'))) {
+ //create html structure adjacent to canvas
+ this.dummyDOM.querySelector('#'.concat(cnvId)).insertAdjacentHTML('afterend', ''));
+ } else {
+ //create html structure after canvas label
+ this.dummyDOM.querySelector('#'.concat(cnvId, '_Label')).insertAdjacentHTML('afterend', ''));
+ }
+ }
+ } //create an object to store the latest output. this object is used in _updateTextOutput() and _updateGridOutput()
+
+ this._accessibleOutputs[cIdT] = {
+ };
+ if (type === 'textOutput') {
+ query = '#'.concat(cnvId, 'gridOutput').concat(query); //query is used to check if gridOutput already exists
+ inner = '
+ * function draw() {
+ * // Add the grid description and
+ * // display it for debugging.
+ * gridOutput(LABEL);
+ *
+ * // Draw a moving circle.
+ * background(200);
+ * let x = frameCount * 0.1;
+ * fill(255, 0, 0);
+ * circle(x, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ *
+ * // Add a general description of the canvas.
+ * describe('A red circle moves from left to right above a blue square.');
+ * }
+ *
+ * Text Output
');
+ //if gridOutput already exists
+ if (this.dummyDOM.querySelector(query)) {
+ //create textOutput before gridOutput
+ this.dummyDOM.querySelector(query).insertAdjacentHTML('beforebegin', inner);
+ } else {
+ //create output inside of container
+ this.dummyDOM.querySelector('#'.concat(container)).innerHTML = inner;
+ } //store output html elements
+
+ this._accessibleOutputs[cIdT].list = this.dummyDOM.querySelector('#'.concat(cIdT, '_list'));
+ } else if (type === 'gridOutput') {
+ query = '#'.concat(cnvId, 'textOutput').concat(query); //query is used to check if textOutput already exists
+ inner = 'Grid Output
');
+ //if textOutput already exists
+ if (this.dummyDOM.querySelector(query)) {
+ //create gridOutput after textOutput
+ this.dummyDOM.querySelector(query).insertAdjacentHTML('afterend', inner);
+ } else {
+ //create output inside of container
+ this.dummyDOM.querySelector('#'.concat(container)).innerHTML = inner;
+ } //store output html elements
+
+ this._accessibleOutputs[cIdT].map = this.dummyDOM.querySelector('#'.concat(cIdT, '_map'));
+ }
+ this._accessibleOutputs[cIdT].shapeDetails = this.dummyDOM.querySelector('#'.concat(cIdT, '_shapeDetails'));
+ this._accessibleOutputs[cIdT].summary = this.dummyDOM.querySelector('#'.concat(cIdT, '_summary'));
+ };
+ //this function is called at the end of setup and draw if using
+ //accessibleOutputs and calls update functions of outputs
+ _main.default.prototype._updateAccsOutput = function () {
+ var cnvId = this.canvas.id;
+ //if the shapes are not the same as before
+ if (JSON.stringify(this.ingredients.shapes) !== this.ingredients.pShapes || this.ingredients.colors.background !== this.ingredients.pBackground) {
+ //save current shapes as string in pShapes
+ this.ingredients.pShapes = JSON.stringify(this.ingredients.shapes);
+ if (this._accessibleOutputs.text) {
+ this._updateTextOutput(cnvId + 'textOutput');
+ }
+ if (this._accessibleOutputs.grid) {
+ this._updateGridOutput(cnvId + 'gridOutput');
+ }
+ if (this._accessibleOutputs.textLabel) {
+ this._updateTextOutput(cnvId + 'textOutputLabel');
+ }
+ if (this._accessibleOutputs.gridLabel) {
+ this._updateGridOutput(cnvId + 'gridOutputLabel');
+ }
+ }
+ };
+ //helper function that resets all ingredients when background is called
+ //and saves background color name
+ _main.default.prototype._accsBackground = function (args) {
+ //save current shapes as string in pShapes
+ this.ingredients.pShapes = JSON.stringify(this.ingredients.shapes);
+ this.ingredients.pBackground = this.ingredients.colors.background;
+ //empty shapes JSON
+ this.ingredients.shapes = {
+ };
+ //update background different
+ if (this.ingredients.colors.backgroundRGBA !== args) {
+ this.ingredients.colors.backgroundRGBA = args;
+ this.ingredients.colors.background = this._rgbColorName(args);
+ }
+ };
+ //helper function that gets fill and stroke of shapes
+ _main.default.prototype._accsCanvasColors = function (f, args) {
+ if (f === 'fill') {
+ //update fill different
+ if (this.ingredients.colors.fillRGBA !== args) {
+ this.ingredients.colors.fillRGBA = args;
+ this.ingredients.colors.fill = this._rgbColorName(args);
+ }
+ } else if (f === 'stroke') {
+ //update stroke if different
+ if (this.ingredients.colors.strokeRGBA !== args) {
+ this.ingredients.colors.strokeRGBA = args;
+ this.ingredients.colors.stroke = this._rgbColorName(args);
+ }
+ }
+ };
+ //builds ingredients.shapes used for building outputs
+ _main.default.prototype._accsOutput = function (f, args) {
+ if (f === 'ellipse' && args[2] === args[3]) {
+ f = 'circle';
+ } else if (f === 'rectangle' && args[2] === args[3]) {
+ f = 'square';
+ }
+ var include = {
+ };
+ var add = true;
+ var middle = _getMiddle(f, args);
+ if (f === 'line') {
+ //make color stroke
+ include.color = this.ingredients.colors.stroke;
+ //get lenght
+ include.length = Math.round(this.dist(args[0], args[1], args[2], args[3]));
+ //get position of end points
+ var p1 = this._getPos(args[0], [
+ 1
+ ]);
+ var p2 = this._getPos(args[2], [
+ 3
+ ]);
+ include.loc = _canvasLocator(middle, this.width, this.height);
+ if (p1 === p2) {
+ include.pos = 'at '.concat(p1);
+ } else {
+ include.pos = 'from '.concat(p1, ' to ').concat(p2);
+ }
+ } else {
+ if (f === 'point') {
+ //make color stroke
+ include.color = this.ingredients.colors.stroke;
+ } else {
+ //make color fill
+ include.color = this.ingredients.colors.fill;
+ //get area of shape
+ include.area = this._getArea(f, args);
+ } //get middle of shapes
+ //calculate position using middle of shape
+
+ include.pos = this._getPos.apply(this, _toConsumableArray(middle));
+ //calculate location using middle of shape
+ include.loc = _canvasLocator(middle, this.width, this.height);
+ } //if it is the first time this shape is created
+
+ if (!this.ingredients.shapes[f]) {
+ this.ingredients.shapes[f] = [
+ include
+ ];
+ //if other shapes of this type have been created
+ } else if (this.ingredients.shapes[f] !== [include]) {
+ //for every shape of this type
+ for (var y in this.ingredients.shapes[f]) {
+ //compare it with current shape and if it already exists make add false
+ if (JSON.stringify(this.ingredients.shapes[f][y]) === JSON.stringify(include)) {
+ add = false;
+ }
+ } //add shape by pushing it to the end
+
+ if (add === true) {
+ this.ingredients.shapes[f].push(include);
+ }
+ }
+ };
+ //gets middle point / centroid of shape
+ function _getMiddle(f, args) {
+ var x,
+ y;
+ if (f === 'rectangle' || f === 'ellipse' || f === 'arc' || f === 'circle' || f === 'square') {
+ x = Math.round(args[0] + args[2] / 2);
+ y = Math.round(args[1] + args[3] / 2);
+ } else if (f === 'triangle') {
+ x = (args[0] + args[2] + args[4]) / 3;
+ y = (args[1] + args[3] + args[5]) / 3;
+ } else if (f === 'quadrilateral') {
+ x = (args[0] + args[2] + args[4] + args[6]) / 4;
+ y = (args[1] + args[3] + args[5] + args[7]) / 4;
+ } else if (f === 'line') {
+ x = (args[0] + args[2]) / 2;
+ y = (args[1] + args[3]) / 2;
+ } else {
+ x = args[0];
+ y = args[1];
+ }
+ return [x,
+ y];
+ } //gets position of shape in the canvas
+
+ _main.default.prototype._getPos = function (x, y) {
+ var untransformedPosition = new DOMPointReadOnly(x, y);
+ var currentTransform = this._renderer.isP3D ? new DOMMatrix(this._renderer.uMVMatrix.mat4) : this.drawingContext.getTransform();
+ var _untransformedPositio = untransformedPosition.matrixTransform(currentTransform),
+ transformedX = _untransformedPositio.x,
+ transformedY = _untransformedPositio.y;
+ var canvasWidth = this.width * this._pixelDensity;
+ var canvasHeight = this.height * this._pixelDensity;
+ if (transformedX < 0.4 * canvasWidth) {
+ if (transformedY < 0.4 * canvasHeight) {
+ return 'top left';
+ } else if (transformedY > 0.6 * canvasHeight) {
+ return 'bottom left';
+ } else {
+ return 'mid left';
+ }
+ } else if (transformedX > 0.6 * canvasWidth) {
+ if (transformedY < 0.4 * canvasHeight) {
+ return 'top right';
+ } else if (transformedY > 0.6 * canvasHeight) {
+ return 'bottom right';
+ } else {
+ return 'mid right';
+ }
+ } else {
+ if (transformedY < 0.4 * canvasHeight) {
+ return 'top middle';
+ } else if (transformedY > 0.6 * canvasHeight) {
+ return 'bottom middle';
+ } else {
+ return 'middle';
+ }
+ }
+ };
+ //locates shape in a 10*10 grid
+ function _canvasLocator(args, canvasWidth, canvasHeight) {
+ var noRows = 10;
+ var noCols = 10;
+ var locX = Math.floor(args[0] / canvasWidth * noRows);
+ var locY = Math.floor(args[1] / canvasHeight * noCols);
+ if (locX === noRows) {
+ locX = locX - 1;
+ }
+ if (locY === noCols) {
+ locY = locY - 1;
+ }
+ return {
+ locX: locX,
+ locY: locY
+ };
+ } //calculates area of shape
+
+ _main.default.prototype._getArea = function (objectType, shapeArgs) {
+ var objectArea = 0;
+ if (objectType === 'arc') {
+ // area of full ellipse = PI * horizontal radius * vertical radius.
+ // therefore, area of arc = difference bet. arc's start and end radians * horizontal radius * vertical radius.
+ // the below expression is adjusted for negative values and differences in arc's start and end radians over PI*2
+ var arcSizeInRadians = ((shapeArgs[5] - shapeArgs[4]) % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
+ objectArea = arcSizeInRadians * shapeArgs[2] * shapeArgs[3] / 8;
+ if (shapeArgs[6] === 'open' || shapeArgs[6] === 'chord') {
+ // when the arc's mode is OPEN or CHORD, we need to account for the area of the triangle that is formed to close the arc
+ // (Ax( By − Cy) + Bx(Cy − Ay) + Cx(Ay − By ) )/2
+ var Ax = shapeArgs[0];
+ var Ay = shapeArgs[1];
+ var Bx = shapeArgs[0] + shapeArgs[2] / 2 * Math.cos(shapeArgs[4]).toFixed(2);
+ var By = shapeArgs[1] + shapeArgs[3] / 2 * Math.sin(shapeArgs[4]).toFixed(2);
+ var Cx = shapeArgs[0] + shapeArgs[2] / 2 * Math.cos(shapeArgs[5]).toFixed(2);
+ var Cy = shapeArgs[1] + shapeArgs[3] / 2 * Math.sin(shapeArgs[5]).toFixed(2);
+ var areaOfExtraTriangle = Math.abs(Ax * (By - Cy) + Bx * (Cy - Ay) + Cx * (Ay - By)) / 2;
+ if (arcSizeInRadians > Math.PI) {
+ objectArea = objectArea + areaOfExtraTriangle;
+ } else {
+ objectArea = objectArea - areaOfExtraTriangle;
+ }
+ }
+ } else if (objectType === 'ellipse' || objectType === 'circle') {
+ objectArea = 3.14 * shapeArgs[2] / 2 * shapeArgs[3] / 2;
+ } else if (objectType === 'line') {
+ objectArea = 0;
+ } else if (objectType === 'point') {
+ objectArea = 0;
+ } else if (objectType === 'quadrilateral') {
+ // ((x4+x1)*(y4-y1)+(x1+x2)*(y1-y2)+(x2+x3)*(y2-y3)+(x3+x4)*(y3-y4))/2
+ objectArea = Math.abs((shapeArgs[6] + shapeArgs[0]) * (shapeArgs[7] - shapeArgs[1]) + (shapeArgs[0] + shapeArgs[2]) * (shapeArgs[1] - shapeArgs[3]) + (shapeArgs[2] + shapeArgs[4]) * (shapeArgs[3] - shapeArgs[5]) + (shapeArgs[4] + shapeArgs[6]) * (shapeArgs[5] - shapeArgs[7])) / 2;
+ } else if (objectType === 'rectangle' || objectType === 'square') {
+ objectArea = shapeArgs[2] * shapeArgs[3];
+ } else if (objectType === 'triangle') {
+ objectArea = Math.abs(shapeArgs[0] * (shapeArgs[3] - shapeArgs[5]) + shapeArgs[2] * (shapeArgs[5] - shapeArgs[1]) + shapeArgs[4] * (shapeArgs[1] - shapeArgs[3])) / 2;
+ // (Ax( By − Cy) + Bx(Cy − Ay) + Cx(Ay − By ))/2
+ } // Store the positions of the canvas corners
+
+ var canvasWidth = this.width * this._pixelDensity;
+ var canvasHeight = this.height * this._pixelDensity;
+ var canvasCorners = [
+ new DOMPoint(0, 0),
+ new DOMPoint(canvasWidth, 0),
+ new DOMPoint(canvasWidth, canvasHeight),
+ new DOMPoint(0, canvasHeight)
+ ];
+ // Apply the inverse of the current transformations to the canvas corners
+ var currentTransform = this._renderer.isP3D ? new DOMMatrix(this._renderer.uMVMatrix.mat4) : this.drawingContext.getTransform();
+ var invertedTransform = currentTransform.inverse();
+ var tc = canvasCorners.map(function (corner) {
+ return corner.matrixTransform(invertedTransform);
+ });
+ /* Use same shoelace formula used for quad area (above) to calculate
+ the area of the canvas with inverted transformation applied */
+ var transformedCanvasArea = Math.abs((tc[3].x + tc[0].x) * (tc[3].y - tc[0].y) + (tc[0].x + tc[1].x) * (tc[0].y - tc[1].y) + (tc[1].x + tc[2].x) * (tc[1].y - tc[2].y) + (tc[2].x + tc[3].x) * (tc[2].y - tc[3].y)) / 2;
+ /* Compare area of shape (minus transformations) to area of canvas
+ with inverted transformation applied.
+ Return percentage */
+ var untransformedArea = Math.round(objectArea * 100 / transformedCanvasArea);
+ return untransformedArea;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.fill': 173,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.number.to-fixed': 198,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 285: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.concat');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Environment
+ * @submodule Environment
+ * @for p5
+ * @requires core
+ */
+ //the functions in this file support updating the text output
+ //updates textOutput
+
+ _main.default.prototype._updateTextOutput = function (idT) {
+ //if html structure is not there yet
+ if (!this.dummyDOM.querySelector('#'.concat(idT, '_summary'))) {
+ return;
+ }
+ var current = this._accessibleOutputs[idT];
+ //create shape list
+ var innerList = _shapeList(idT, this.ingredients.shapes);
+ //create output summary
+ var innerSummary = _textSummary(innerList.numShapes, this.ingredients.colors.background, this.width, this.height);
+ //create shape details
+ var innerShapeDetails = _shapeDetails(idT, this.ingredients.shapes);
+ //if it is different from current summary
+ if (innerSummary !== current.summary.innerHTML) {
+ //update
+ current.summary.innerHTML = innerSummary;
+ } //if it is different from current shape list
+
+ if (innerList.listShapes !== current.list.innerHTML) {
+ //update
+ current.list.innerHTML = innerList.listShapes;
+ } //if it is different from current shape details
+
+ if (innerShapeDetails !== current.shapeDetails.innerHTML) {
+ //update
+ current.shapeDetails.innerHTML = innerShapeDetails;
+ }
+ this._accessibleOutputs[idT] = current;
+ };
+ //Builds textOutput summary
+ function _textSummary(numShapes, background, width, height) {
+ var text = 'Your output is a, '.concat(width, ' by ').concat(height, ' pixels, ').concat(background, ' canvas containing the following');
+ if (numShapes === 1) {
+ text = ''.concat(text, ' shape:');
+ } else {
+ text = ''.concat(text, ' ').concat(numShapes, ' shapes:');
+ }
+ return text;
+ } //Builds textOutput table with shape details
+
+ function _shapeDetails(idT, ingredients) {
+ var shapeDetails = '';
+ var shapeNumber = 0;
+ //goes trhough every shape type in ingredients
+ for (var x in ingredients) {
+ //and for every shape
+ for (var y in ingredients[x]) {
+ //it creates a table row
+ var row = '
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let c = color(0, 126, 255, 102);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'alphaValue' to 102.
+ * let alphaValue = alpha(c);
+ *
+ * // Draw the right rectangle.
+ * fill(alphaValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a color array.
+ * let c = [0, 126, 255, 102];
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'alphaValue' to 102.
+ * let alphaValue = alpha(c);
+ *
+ * // Draw the left rectangle.
+ * fill(alphaValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.alpha = function (c) {
+ _main.default._validateParameters('alpha', arguments);
+ return this.color(c)._getAlpha();
+ };
+ /**
+ * Gets the blue value of a color.
+ *
+ * `blue()` extracts the blue value from a
+ * p5.Color object, an array of color components, or
+ * a CSS color string.
+ *
+ * By default, `blue()` returns a color's blue value in the range 0
+ * to 255. If the colorMode() is set to RGB, it
+ * returns the blue value in the given range.
+ *
+ * @method blue
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the blue value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a CSS color string.
+ * let c = 'rgba(0, 126, 255, 0.4)';
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'alphaValue' to 102.
+ * let alphaValue = alpha(c);
+ *
+ * // Draw the right rectangle.
+ * fill(alphaValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using RGB values.
+ * let c = color(175, 100, 220);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'blueValue' to 220.
+ * let blueValue = blue(c);
+ *
+ * // Draw the right rectangle.
+ * fill(0, 0, blueValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a color array.
+ * let c = [175, 100, 220];
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'blueValue' to 220.
+ * let blueValue = blue(c);
+ *
+ * // Draw the right rectangle.
+ * fill(0, 0, blueValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a CSS color string.
+ * let c = 'rgb(175, 100, 220)';
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'blueValue' to 220.
+ * let blueValue = blue(c);
+ *
+ * // Draw the right rectangle.
+ * fill(0, 0, blueValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.blue = function (c) {
+ _main.default._validateParameters('blue', arguments);
+ return this.color(c)._getBlue();
+ };
+ /**
+ * Gets the brightness value of a color.
+ *
+ * `brightness()` extracts the HSB brightness value from a
+ * p5.Color object, an array of color components, or
+ * a CSS color string.
+ *
+ * By default, `brightness()` returns a color's HSB brightness in the range 0
+ * to 100. If the colorMode() is set to HSB, it
+ * returns the brightness value in the given range.
+ *
+ * @method brightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the brightness value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use RGB color with values in the range 0-100.
+ * colorMode(RGB, 100);
+ *
+ * // Create a p5.Color object using RGB values.
+ * let c = color(69, 39, 86);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'blueValue' to 86.
+ * let blueValue = blue(c);
+ *
+ * // Draw the right rectangle.
+ * fill(0, 0, blueValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // Create a p5.Color object.
+ * let c = color(0, 50, 100);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'brightValue' to 100.
+ * let brightValue = brightness(c);
+ *
+ * // Draw the right rectangle.
+ * fill(brightValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is white.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // Create a color array.
+ * let c = [0, 50, 100];
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'brightValue' to 100.
+ * let brightValue = brightness(c);
+ *
+ * // Draw the right rectangle.
+ * fill(brightValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is white.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // Create a CSS color string.
+ * let c = 'rgb(255, 128, 128)';
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'brightValue' to 100.
+ * let brightValue = brightness(c);
+ *
+ * // Draw the right rectangle.
+ * fill(brightValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is white.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.brightness = function (c) {
+ _main.default._validateParameters('brightness', arguments);
+ return this.color(c)._getBrightness();
+ };
+ /**
+ * Creates a p5.Color object.
+ *
+ * By default, the parameters are interpreted as RGB values. Calling
+ * `color(255, 204, 0)` will return a bright yellow color. The way these
+ * parameters are interpreted may be changed with the
+ * colorMode() function.
+ *
+ * The version of `color()` with one parameter interprets the value one of two
+ * ways. If the parameter is a number, it's interpreted as a grayscale value.
+ * If the parameter is a string, it's interpreted as a CSS color string.
+ *
+ * The version of `color()` with two parameters interprets the first one as a
+ * grayscale value. The second parameter sets the alpha (transparency) value.
+ *
+ * The version of `color()` with three parameters interprets them as RGB, HSB,
+ * or HSL colors, depending on the current `colorMode()`.
+ *
+ * The version of `color()` with four parameters interprets them as RGBA, HSBA,
+ * or HSLA colors, depending on the current `colorMode()`. The last parameter
+ * sets the alpha (transparency) value.
+ *
+ * @method color
+ * @param {Number} gray number specifying value between white and black.
+ * @param {Number} [alpha] alpha value relative to current color range
+ * (default is 0-255).
+ * @return {p5.Color} resulting color.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSB color with values in the range 0-255.
+ * colorMode(HSB, 255);
+ *
+ * // Create a p5.Color object.
+ * let c = color(0, 127, 255);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'brightValue' to 255.
+ * let brightValue = brightness(c);
+ *
+ * // Draw the right rectangle.
+ * fill(brightValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is white.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using RGB values.
+ * let c = color(255, 204, 0);
+ *
+ * // Draw the square.
+ * fill(c);
+ * noStroke();
+ * square(30, 20, 55);
+ *
+ * describe('A yellow square on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using RGB values.
+ * let c1 = color(255, 204, 0);
+ *
+ * // Draw the left circle.
+ * fill(c1);
+ * noStroke();
+ * circle(25, 25, 80);
+ *
+ * // Create a p5.Color object using a grayscale value.
+ * let c2 = color(65);
+ *
+ * // Draw the right circle.
+ * fill(c2);
+ * circle(75, 75, 80);
+ *
+ * describe(
+ * 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using a named color.
+ * let c = color('magenta');
+ *
+ * // Draw the square.
+ * fill(c);
+ * noStroke();
+ * square(20, 20, 60);
+ *
+ * describe('A magenta square on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using a hex color code.
+ * let c1 = color('#0f0');
+ *
+ * // Draw the left rectangle.
+ * fill(c1);
+ * noStroke();
+ * rect(0, 10, 45, 80);
+ *
+ * // Create a p5.Color object using a hex color code.
+ * let c2 = color('#00ff00');
+ *
+ * // Draw the right rectangle.
+ * fill(c2);
+ * rect(55, 10, 45, 80);
+ *
+ * describe('Two bright green rectangles on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using a RGB color string.
+ * let c1 = color('rgb(0, 0, 255)');
+ *
+ * // Draw the top-left square.
+ * fill(c1);
+ * square(10, 10, 35);
+ *
+ * // Create a p5.Color object using a RGB color string.
+ * let c2 = color('rgb(0%, 0%, 100%)');
+ *
+ * // Draw the top-right square.
+ * fill(c2);
+ * square(55, 10, 35);
+ *
+ * // Create a p5.Color object using a RGBA color string.
+ * let c3 = color('rgba(0, 0, 255, 1)');
+ *
+ * // Draw the bottom-left square.
+ * fill(c3);
+ * square(10, 55, 35);
+ *
+ * // Create a p5.Color object using a RGBA color string.
+ * let c4 = color('rgba(0%, 0%, 100%, 1)');
+ *
+ * // Draw the bottom-right square.
+ * fill(c4);
+ * square(55, 55, 35);
+ *
+ * describe('Four blue squares in the corners of a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using a HSL color string.
+ * let c1 = color('hsl(160, 100%, 50%)');
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c1);
+ * rect(0, 10, 45, 80);
+ *
+ * // Create a p5.Color object using a HSLA color string.
+ * let c2 = color('hsla(160, 100%, 50%, 0.5)');
+ *
+ * // Draw the right rectangle.
+ * fill(c2);
+ * rect(55, 10, 45, 80);
+ *
+ * describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using a HSB color string.
+ * let c1 = color('hsb(160, 100%, 50%)');
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c1);
+ * rect(0, 10, 45, 80);
+ *
+ * // Create a p5.Color object using a HSBA color string.
+ * let c2 = color('hsba(160, 100%, 50%, 0.5)');
+ *
+ * // Draw the right rectangle.
+ * fill(c2);
+ * rect(55, 10, 45, 80);
+ *
+ * describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method color
+ * @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]
+ * @return {p5.Color}
+ */
+ /**
+ * @method color
+ * @param {String} value a color string.
+ * @return {p5.Color}
+ */
+ /**
+ * @method color
+ * @param {Number[]} values an array containing the red, green, blue,
+ * and alpha components of the color.
+ * @return {p5.Color}
+ */
+ /**
+ * @method color
+ * @param {p5.Color} color
+ * @return {p5.Color}
+ */
+ _main.default.prototype.color = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('color', args);
+ if (args[0] instanceof _main.default.Color) {
+ return args[0]; // Do nothing if argument is already a color object.
+ }
+ var arg = Array.isArray(args[0]) ? args[0] : args;
+ return new _main.default.Color(this, arg);
+ };
+ /**
+ * Gets the green value of a color.
+ *
+ * `green()` extracts the green value from a
+ * p5.Color object, an array of color components, or
+ * a CSS color string.
+ *
+ * By default, `green()` returns a color's green value in the range 0
+ * to 255. If the colorMode() is set to RGB, it
+ * returns the green value in the given range.
+ *
+ * @method green
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the green value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object using RGB values.
+ * let c1 = color(50, 55, 100);
+ *
+ * // Draw the left rectangle.
+ * fill(c1);
+ * rect(0, 10, 45, 80);
+ *
+ * // Switch the color mode to HSB.
+ * colorMode(HSB, 100);
+ *
+ * // Create a p5.Color object using HSB values.
+ * let c2 = color(50, 55, 100);
+ *
+ * // Draw the right rectangle.
+ * fill(c2);
+ * rect(55, 10, 45, 80);
+ *
+ * describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let c = color(175, 100, 220);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'greenValue' to 100.
+ * let greenValue = green(c);
+ *
+ * // Draw the right rectangle.
+ * fill(0, greenValue, 0);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is dark green.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a color array.
+ * let c = [175, 100, 220];
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'greenValue' to 100.
+ * let greenValue = green(c);
+ *
+ * // Draw the right rectangle.
+ * fill(0, greenValue, 0);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is dark green.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a CSS color string.
+ * let c = 'rgb(175, 100, 220)';
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'greenValue' to 100.
+ * let greenValue = green(c);
+ *
+ * // Draw the right rectangle.
+ * fill(0, greenValue, 0);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is dark green.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.green = function (c) {
+ _main.default._validateParameters('green', arguments);
+ return this.color(c)._getGreen();
+ };
+ /**
+ * Gets the hue value of a color.
+ *
+ * `hue()` extracts the hue value from a
+ * p5.Color object, an array of color components, or
+ * a CSS color string.
+ *
+ * Hue describes a color's position on the color wheel. By default, `hue()`
+ * returns a color's HSL hue in the range 0 to 360. If the
+ * colorMode() is set to HSB or HSL, it returns the hue
+ * value in the given mode.
+ *
+ * @method hue
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the hue value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use RGB color with values in the range 0-100.
+ * colorMode(RGB, 100);
+ *
+ * // Create a p5.Color object using RGB values.
+ * let c = color(69, 39, 86);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'greenValue' to 39.
+ * let greenValue = green(c);
+ *
+ * // Draw the right rectangle.
+ * fill(0, greenValue, 0);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is dark green.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSL color.
+ * colorMode(HSL);
+ *
+ * // Create a p5.Color object.
+ * let c = color(0, 50, 100);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ *
+ * // Set 'hueValue' to 0.
+ * let hueValue = hue(c);
+ *
+ * // Draw the right rectangle.
+ * fill(hueValue);
+ * rect(50, 20, 35, 60);
+ *
+ * describe(
+ * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSL color.
+ * colorMode(HSL);
+ *
+ * // Create a color array.
+ * let c = [0, 50, 100];
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ *
+ * // Set 'hueValue' to 0.
+ * let hueValue = hue(c);
+ *
+ * // Draw the right rectangle.
+ * fill(hueValue);
+ * rect(50, 20, 35, 60);
+ *
+ * describe(
+ * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.hue = function (c) {
+ _main.default._validateParameters('hue', arguments);
+ return this.color(c)._getHue();
+ };
+ /**
+ * Blends two colors to find a third color between them.
+ *
+ * The `amt` parameter specifies the amount to interpolate between the two
+ * values. 0 is equal to the first color, 0.1 is very near the first color,
+ * 0.5 is halfway between the two colors, and so on. Negative numbers are set
+ * to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
+ * lerp. It's necessary because numbers outside of the
+ * interval [0, 1] will produce strange and unexpected colors.
+ *
+ * The way that colors are interpolated depends on the current
+ * colorMode().
+ *
+ * @method lerpColor
+ * @param {p5.Color} c1 interpolate from this color.
+ * @param {p5.Color} c2 interpolate to this color.
+ * @param {Number} amt number between 0 and 1.
+ * @return {p5.Color} interpolated color.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSL color.
+ * colorMode(HSL);
+ *
+ * // Create a CSS color string.
+ * let c = 'rgb(255, 128, 128)';
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ *
+ * // Set 'hueValue' to 0.
+ * let hueValue = hue(c);
+ *
+ * // Draw the right rectangle.
+ * fill(hueValue);
+ * rect(50, 20, 35, 60);
+ *
+ * describe(
+ * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.lerpColor = function (c1, c2, amt) {
+ _main.default._validateParameters('lerpColor', arguments);
+ var mode = this._colorMode;
+ var maxes = this._colorMaxes;
+ var l0,
+ l1,
+ l2,
+ l3;
+ var fromArray,
+ toArray;
+ if (mode === constants.RGB) {
+ fromArray = c1.levels.map(function (level) {
+ return level / 255;
+ });
+ toArray = c2.levels.map(function (level) {
+ return level / 255;
+ });
+ } else if (mode === constants.HSB) {
+ c1._getBrightness(); // Cache hsba so it definitely exists.
+ c2._getBrightness();
+ fromArray = c1.hsba;
+ toArray = c2.hsba;
+ } else if (mode === constants.HSL) {
+ c1._getLightness(); // Cache hsla so it definitely exists.
+ c2._getLightness();
+ fromArray = c1.hsla;
+ toArray = c2.hsla;
+ } else {
+ throw new Error(''.concat(mode, ' cannot be used for interpolation.'));
+ } // Prevent extrapolation.
+
+ amt = Math.max(Math.min(amt, 1), 0);
+ // Define lerp here itself if user isn't using math module.
+ // Maintains the definition as found in math/calculation.js
+ if (typeof this.lerp === 'undefined') {
+ this.lerp = function (start, stop, amt) {
+ return amt * (stop - start) + start;
+ };
+ } // Perform interpolation.
+
+ if (mode === constants.RGB) {
+ l0 = this.lerp(fromArray[0], toArray[0], amt);
+ } // l0 (hue) has to wrap around (and it's between 0 and 1)
+ else {
+ // find shortest path in the color wheel
+ if (Math.abs(fromArray[0] - toArray[0]) > 0.5) {
+ if (fromArray[0] > toArray[0]) {
+ toArray[0] += 1;
+ } else {
+ fromArray[0] += 1;
+ }
+ }
+ l0 = this.lerp(fromArray[0], toArray[0], amt);
+ if (l0 >= 1) {
+ l0 -= 1;
+ }
+ }
+ l1 = this.lerp(fromArray[1], toArray[1], amt);
+ l2 = this.lerp(fromArray[2], toArray[2], amt);
+ l3 = this.lerp(fromArray[3], toArray[3], amt);
+ // Scale components.
+ l0 *= maxes[mode][0];
+ l1 *= maxes[mode][1];
+ l2 *= maxes[mode][2];
+ l3 *= maxes[mode][3];
+ return this.color(l0, l1, l2, l3);
+ };
+ /**
+ * Gets the lightness value of a color.
+ *
+ * `lightness()` extracts the HSL lightness value from a
+ * p5.Color object, an array of color components, or
+ * a CSS color string.
+ *
+ * By default, `lightness()` returns a color's HSL lightness in the range 0
+ * to 100. If the colorMode() is set to HSL, it
+ * returns the lightness value in the given range.
+ *
+ * @method lightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the lightness value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create p5.Color objects to interpolate between.
+ * let from = color(218, 165, 32);
+ * let to = color(72, 61, 139);
+ *
+ * // Create intermediate colors.
+ * let interA = lerpColor(from, to, 0.33);
+ * let interB = lerpColor(from, to, 0.66);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(from);
+ * rect(10, 20, 20, 60);
+ *
+ * // Draw the left-center rectangle.
+ * fill(interA);
+ * rect(30, 20, 20, 60);
+ *
+ * // Draw the right-center rectangle.
+ * fill(interB);
+ * rect(50, 20, 20, 60);
+ *
+ * // Draw the right rectangle.
+ * fill(to);
+ * rect(70, 20, 20, 60);
+ *
+ * describe(
+ * 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSL color.
+ * colorMode(HSL);
+ *
+ * // Create a p5.Color object using HSL values.
+ * let c = color(0, 100, 75);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'lightValue' to 75.
+ * let lightValue = lightness(c);
+ *
+ * // Draw the right rectangle.
+ * fill(lightValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSL color.
+ * colorMode(HSL);
+ *
+ * // Create a color array.
+ * let c = [0, 100, 75];
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'lightValue' to 75.
+ * let lightValue = lightness(c);
+ *
+ * // Draw the right rectangle.
+ * fill(lightValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSL color.
+ * colorMode(HSL);
+ *
+ * // Create a CSS color string.
+ * let c = 'rgb(255, 128, 128)';
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'lightValue' to 75.
+ * let lightValue = lightness(c);
+ *
+ * // Draw the right rectangle.
+ * fill(lightValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.lightness = function (c) {
+ _main.default._validateParameters('lightness', arguments);
+ return this.color(c)._getLightness();
+ };
+ /**
+ * Gets the red value of a color.
+ *
+ * `red()` extracts the red value from a
+ * p5.Color object, an array of color components, or
+ * a CSS color string.
+ *
+ * By default, `red()` returns a color's red value in the range 0
+ * to 255. If the colorMode() is set to RGB, it
+ * returns the red value in the given range.
+ *
+ * @method red
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the red value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSL color with values in the range 0-255.
+ * colorMode(HSL, 255);
+ *
+ * // Create a p5.Color object using HSL values.
+ * let c = color(0, 255, 191.5);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'lightValue' to 191.5.
+ * let lightValue = lightness(c);
+ *
+ * // Draw the right rectangle.
+ * fill(lightValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let c = color(175, 100, 220);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'redValue' to 175.
+ * let redValue = red(c);
+ *
+ * // Draw the right rectangle.
+ * fill(redValue, 0, 0);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is red.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a color array.
+ * let c = [175, 100, 220];
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'redValue' to 175.
+ * let redValue = red(c);
+ *
+ * // Draw the right rectangle.
+ * fill(redValue, 0, 0);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is red.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a CSS color string.
+ * let c = 'rgb(175, 100, 220)';
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'redValue' to 175.
+ * let redValue = red(c);
+ *
+ * // Draw the right rectangle.
+ * fill(redValue, 0, 0);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is red.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.red = function (c) {
+ _main.default._validateParameters('red', arguments);
+ return this.color(c)._getRed();
+ };
+ /**
+ * Gets the saturation value of a color.
+ *
+ * `saturation()` extracts the saturation value from a
+ * p5.Color object, an array of color components, or
+ * a CSS color string.
+ *
+ * Saturation is scaled differently in HSB and HSL. By default, `saturation()`
+ * returns a color's HSL saturation in the range 0 to 100. If the
+ * colorMode() is set to HSB or HSL, it returns the
+ * saturation value in the given mode.
+ *
+ * @method saturation
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the saturation value
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use RGB color with values in the range 0-100.
+ * colorMode(RGB, 100);
+ *
+ * // Create a p5.Color object.
+ * let c = color(69, 39, 86);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'redValue' to 69.
+ * let redValue = red(c);
+ *
+ * // Draw the right rectangle.
+ * fill(redValue, 0, 0);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is light purple and the right one is red.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // Create a p5.Color object.
+ * let c = color(0, 50, 100);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'satValue' to 50.
+ * let satValue = saturation(c);
+ *
+ * // Draw the right rectangle.
+ * fill(satValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // Create a color array.
+ * let c = [0, 50, 100];
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'satValue' to 100.
+ * let satValue = saturation(c);
+ *
+ * // Draw the right rectangle.
+ * fill(satValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // Create a CSS color string.
+ * let c = 'rgb(255, 128, 128)';
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'satValue' to 100.
+ * let satValue = saturation(c);
+ *
+ * // Draw the right rectangle.
+ * fill(satValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSL color.
+ * colorMode(HSL);
+ *
+ * // Create a p5.Color object.
+ * let c = color(0, 100, 75);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'satValue' to 100.
+ * let satValue = saturation(c);
+ *
+ * // Draw the right rectangle.
+ * fill(satValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is white.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.saturation = function (c) {
+ _main.default._validateParameters('saturation', arguments);
+ return this.color(c)._getSaturation();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/friendly_errors/fes_core': 294,
+ '../core/friendly_errors/file_errors': 295,
+ '../core/friendly_errors/validate_params': 298,
+ '../core/main': 303,
+ './p5.Color': 289,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 289: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.trim');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _color_conversion = _interopRequireDefault(_dereq_('./color_conversion'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ * @requires color_conversion
+ */
+ /**
+ * CSS named colors.
+ */
+
+ var namedColors = {
+ aliceblue: '#f0f8ff',
+ antiquewhite: '#faebd7',
+ aqua: '#00ffff',
+ aquamarine: '#7fffd4',
+ azure: '#f0ffff',
+ beige: '#f5f5dc',
+ bisque: '#ffe4c4',
+ black: '#000000',
+ blanchedalmond: '#ffebcd',
+ blue: '#0000ff',
+ blueviolet: '#8a2be2',
+ brown: '#a52a2a',
+ burlywood: '#deb887',
+ cadetblue: '#5f9ea0',
+ chartreuse: '#7fff00',
+ chocolate: '#d2691e',
+ coral: '#ff7f50',
+ cornflowerblue: '#6495ed',
+ cornsilk: '#fff8dc',
+ crimson: '#dc143c',
+ cyan: '#00ffff',
+ darkblue: '#00008b',
+ darkcyan: '#008b8b',
+ darkgoldenrod: '#b8860b',
+ darkgray: '#a9a9a9',
+ darkgreen: '#006400',
+ darkgrey: '#a9a9a9',
+ darkkhaki: '#bdb76b',
+ darkmagenta: '#8b008b',
+ darkolivegreen: '#556b2f',
+ darkorange: '#ff8c00',
+ darkorchid: '#9932cc',
+ darkred: '#8b0000',
+ darksalmon: '#e9967a',
+ darkseagreen: '#8fbc8f',
+ darkslateblue: '#483d8b',
+ darkslategray: '#2f4f4f',
+ darkslategrey: '#2f4f4f',
+ darkturquoise: '#00ced1',
+ darkviolet: '#9400d3',
+ deeppink: '#ff1493',
+ deepskyblue: '#00bfff',
+ dimgray: '#696969',
+ dimgrey: '#696969',
+ dodgerblue: '#1e90ff',
+ firebrick: '#b22222',
+ floralwhite: '#fffaf0',
+ forestgreen: '#228b22',
+ fuchsia: '#ff00ff',
+ gainsboro: '#dcdcdc',
+ ghostwhite: '#f8f8ff',
+ gold: '#ffd700',
+ goldenrod: '#daa520',
+ gray: '#808080',
+ green: '#008000',
+ greenyellow: '#adff2f',
+ grey: '#808080',
+ honeydew: '#f0fff0',
+ hotpink: '#ff69b4',
+ indianred: '#cd5c5c',
+ indigo: '#4b0082',
+ ivory: '#fffff0',
+ khaki: '#f0e68c',
+ lavender: '#e6e6fa',
+ lavenderblush: '#fff0f5',
+ lawngreen: '#7cfc00',
+ lemonchiffon: '#fffacd',
+ lightblue: '#add8e6',
+ lightcoral: '#f08080',
+ lightcyan: '#e0ffff',
+ lightgoldenrodyellow: '#fafad2',
+ lightgray: '#d3d3d3',
+ lightgreen: '#90ee90',
+ lightgrey: '#d3d3d3',
+ lightpink: '#ffb6c1',
+ lightsalmon: '#ffa07a',
+ lightseagreen: '#20b2aa',
+ lightskyblue: '#87cefa',
+ lightslategray: '#778899',
+ lightslategrey: '#778899',
+ lightsteelblue: '#b0c4de',
+ lightyellow: '#ffffe0',
+ lime: '#00ff00',
+ limegreen: '#32cd32',
+ linen: '#faf0e6',
+ magenta: '#ff00ff',
+ maroon: '#800000',
+ mediumaquamarine: '#66cdaa',
+ mediumblue: '#0000cd',
+ mediumorchid: '#ba55d3',
+ mediumpurple: '#9370db',
+ mediumseagreen: '#3cb371',
+ mediumslateblue: '#7b68ee',
+ mediumspringgreen: '#00fa9a',
+ mediumturquoise: '#48d1cc',
+ mediumvioletred: '#c71585',
+ midnightblue: '#191970',
+ mintcream: '#f5fffa',
+ mistyrose: '#ffe4e1',
+ moccasin: '#ffe4b5',
+ navajowhite: '#ffdead',
+ navy: '#000080',
+ oldlace: '#fdf5e6',
+ olive: '#808000',
+ olivedrab: '#6b8e23',
+ orange: '#ffa500',
+ orangered: '#ff4500',
+ orchid: '#da70d6',
+ palegoldenrod: '#eee8aa',
+ palegreen: '#98fb98',
+ paleturquoise: '#afeeee',
+ palevioletred: '#db7093',
+ papayawhip: '#ffefd5',
+ peachpuff: '#ffdab9',
+ peru: '#cd853f',
+ pink: '#ffc0cb',
+ plum: '#dda0dd',
+ powderblue: '#b0e0e6',
+ purple: '#800080',
+ rebeccapurple: '#663399',
+ red: '#ff0000',
+ rosybrown: '#bc8f8f',
+ royalblue: '#4169e1',
+ saddlebrown: '#8b4513',
+ salmon: '#fa8072',
+ sandybrown: '#f4a460',
+ seagreen: '#2e8b57',
+ seashell: '#fff5ee',
+ sienna: '#a0522d',
+ silver: '#c0c0c0',
+ skyblue: '#87ceeb',
+ slateblue: '#6a5acd',
+ slategray: '#708090',
+ slategrey: '#708090',
+ snow: '#fffafa',
+ springgreen: '#00ff7f',
+ steelblue: '#4682b4',
+ tan: '#d2b48c',
+ teal: '#008080',
+ thistle: '#d8bfd8',
+ tomato: '#ff6347',
+ turquoise: '#40e0d0',
+ violet: '#ee82ee',
+ wheat: '#f5deb3',
+ white: '#ffffff',
+ whitesmoke: '#f5f5f5',
+ yellow: '#ffff00',
+ yellowgreen: '#9acd32'
+ };
+ /**
+ * These regular expressions are used to build up the patterns for matching
+ * viable CSS color strings: fragmenting the regexes in this way increases the
+ * legibility and comprehensibility of the code.
+ *
+ * Note that RGB values of .9 are not parsed by IE, but are supported here for
+ * color string consistency.
+ */
+ var WHITESPACE = /\s*/; // Match zero or more whitespace characters.
+ var INTEGER = /(\d{1,3})/; // Match integers: 79, 255, etc.
+ var DECIMAL = /((?:\d+(?:\.\d+)?)|(?:\.\d+))/; // Match 129.6, 79, .9, etc.
+ var PERCENT = new RegExp(''.concat(DECIMAL.source, '%')); // Match 12.9%, 79%, .9%, etc.
+ /**
+ * Full color string patterns. The capture groups are necessary.
+ */
+ var colorPatterns = {
+ // Match colors in format #XXX, e.g. #416.
+ HEX3: /^#([a-f0-9])([a-f0-9])([a-f0-9])$/i,
+ // Match colors in format #XXXX, e.g. #5123.
+ HEX4: /^#([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])$/i,
+ // Match colors in format #XXXXXX, e.g. #b4d455.
+ HEX6: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
+ // Match colors in format #XXXXXXXX, e.g. #b4d45535.
+ HEX8: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
+ // Match colors in format rgb(R, G, B), e.g. rgb(255, 0, 128).
+ RGB: new RegExp(['^rgb\\(',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format rgb(R%, G%, B%), e.g. rgb(100%, 0%, 28.9%).
+ RGB_PERCENT: new RegExp(['^rgb\\(',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format rgb(R, G, B, A), e.g. rgb(255, 0, 128, 0.25).
+ RGBA: new RegExp(['^rgba\\(',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format rgb(R%, G%, B%, A), e.g. rgb(100%, 0%, 28.9%, 0.5).
+ RGBA_PERCENT: new RegExp(['^rgba\\(',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format hsla(H, S%, L%), e.g. hsl(100, 40%, 28.9%).
+ HSL: new RegExp(['^hsl\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format hsla(H, S%, L%, A), e.g. hsla(100, 40%, 28.9%, 0.5).
+ HSLA: new RegExp(['^hsla\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format hsb(H, S%, B%), e.g. hsb(100, 40%, 28.9%).
+ HSB: new RegExp(['^hsb\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format hsba(H, S%, B%, A), e.g. hsba(100, 40%, 28.9%, 0.5).
+ HSBA: new RegExp(['^hsba\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'].join(WHITESPACE.source), 'i')
+ };
+ /**
+ * A class to describe a color.
+ *
+ * Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * saturation() is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * Note: color() is the recommended way to create an
+ * instance of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst] pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals an array containing the color values
+ * for red, green, blue and alpha channel
+ * or CSS color.
+ */
+ _main.default.Color = /*#__PURE__*/ function () {
+ function Color(pInst, vals) {
+ _classCallCheck(this, Color);
+ // Record color mode and maxes at time of construction.
+ this._storeModeAndMaxes(pInst._colorMode, pInst._colorMaxes);
+ // Calculate normalized RGBA values.
+ if (![constants.RGB,
+ constants.HSL,
+ constants.HSB].includes(this.mode)) {
+ throw new Error(''.concat(this.mode, ' is an invalid colorMode.'));
+ } else {
+ this._array = Color._parseInputs.apply(this, vals);
+ } // Expose closest screen color.
+
+ this._calculateLevels();
+ } /**
+ * Returns the color formatted as a `String`.
+ *
+ * Calling `myColor.toString()` can be useful for debugging, as in
+ * `print(myColor.toString())`. It's also helpful for using p5.js with other
+ * libraries.
+ *
+ * The parameter, `format`, is optional. If a format string is passed, as in
+ * `myColor.toString('#rrggbb')`, it will determine how the color string is
+ * formatted. By default, color strings are formatted as `'rgba(r, g, b, a)'`.
+ *
+ * @method toString
+ * @param {String} [format] how the color string will be formatted.
+ * Leaving this empty formats the string as rgba(r, g, b, a).
+ * '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.
+ * 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.
+ * 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.
+ * 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
+ * @return {String} the formatted string.
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use HSL color with values in the range 0-255.
+ * colorMode(HSL, 255);
+ *
+ * // Create a p5.Color object.
+ * let c = color(0, 255, 191.5);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ *
+ * // Set 'satValue' to 255.
+ * let satValue = saturation(c);
+ *
+ * // Draw the right rectangle.
+ * fill(satValue);
+ * rect(50, 15, 35, 70);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is white.');
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(Color, [
+ {
+ key: 'toString',
+ value: function toString(format) {
+ var a = this.levels;
+ var f = this._array;
+ var alpha = f[3]; // String representation uses normalized alpha
+ switch (format) {
+ case '#rrggbb':
+ return '#'.concat(a[0] < 16 ? '0'.concat(a[0].toString(16)) : a[0].toString(16), a[1] < 16 ? '0'.concat(a[1].toString(16)) : a[1].toString(16), a[2] < 16 ? '0'.concat(a[2].toString(16)) : a[2].toString(16));
+ case '#rrggbbaa':
+ return '#'.concat(a[0] < 16 ? '0'.concat(a[0].toString(16)) : a[0].toString(16), a[1] < 16 ? '0'.concat(a[1].toString(16)) : a[1].toString(16), a[2] < 16 ? '0'.concat(a[2].toString(16)) : a[2].toString(16), a[3] < 16 ? '0'.concat(a[3].toString(16)) : a[3].toString(16));
+ case '#rgb':
+ return '#'.concat(Math.round(f[0] * 15).toString(16), Math.round(f[1] * 15).toString(16), Math.round(f[2] * 15).toString(16));
+ case '#rgba':
+ return '#'.concat(Math.round(f[0] * 15).toString(16), Math.round(f[1] * 15).toString(16), Math.round(f[2] * 15).toString(16), Math.round(f[3] * 15).toString(16));
+ case 'rgb':
+ return 'rgb('.concat(a[0], ', ', a[1], ', ', a[2], ')');
+ case 'rgb%':
+ return 'rgb('.concat((100 * f[0]).toPrecision(3), '%, ', (100 * f[1]).toPrecision(3), '%, ', (100 * f[2]).toPrecision(3), '%)');
+ case 'rgba%':
+ return 'rgba('.concat((100 * f[0]).toPrecision(3), '%, ', (100 * f[1]).toPrecision(3), '%, ', (100 * f[2]).toPrecision(3), '%, ', (100 * f[3]).toPrecision(3), '%)');
+ case 'hsb':
+ case 'hsv':
+ if (!this.hsba) this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsb('.concat(this.hsba[0] * this.maxes[constants.HSB][0], ', ', this.hsba[1] * this.maxes[constants.HSB][1], ', ', this.hsba[2] * this.maxes[constants.HSB][2], ')');
+ case 'hsb%':
+ case 'hsv%':
+ if (!this.hsba) this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsb('.concat((100 * this.hsba[0]).toPrecision(3), '%, ', (100 * this.hsba[1]).toPrecision(3), '%, ', (100 * this.hsba[2]).toPrecision(3), '%)');
+ case 'hsba':
+ case 'hsva':
+ if (!this.hsba) this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsba('.concat(this.hsba[0] * this.maxes[constants.HSB][0], ', ', this.hsba[1] * this.maxes[constants.HSB][1], ', ', this.hsba[2] * this.maxes[constants.HSB][2], ', ', alpha, ')');
+ case 'hsba%':
+ case 'hsva%':
+ if (!this.hsba) this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsba('.concat((100 * this.hsba[0]).toPrecision(3), '%, ', (100 * this.hsba[1]).toPrecision(3), '%, ', (100 * this.hsba[2]).toPrecision(3), '%, ', (100 * alpha).toPrecision(3), '%)');
+ case 'hsl':
+ if (!this.hsla) this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat(this.hsla[0] * this.maxes[constants.HSL][0], ', ', this.hsla[1] * this.maxes[constants.HSL][1], ', ', this.hsla[2] * this.maxes[constants.HSL][2], ')');
+ case 'hsl%':
+ if (!this.hsla) this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat((100 * this.hsla[0]).toPrecision(3), '%, ', (100 * this.hsla[1]).toPrecision(3), '%, ', (100 * this.hsla[2]).toPrecision(3), '%)');
+ case 'hsla':
+ if (!this.hsla) this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsla('.concat(this.hsla[0] * this.maxes[constants.HSL][0], ', ', this.hsla[1] * this.maxes[constants.HSL][1], ', ', this.hsla[2] * this.maxes[constants.HSL][2], ', ', alpha, ')');
+ case 'hsla%':
+ if (!this.hsla) this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat((100 * this.hsla[0]).toPrecision(3), '%, ', (100 * this.hsla[1]).toPrecision(3), '%, ', (100 * this.hsla[2]).toPrecision(3), '%, ', (100 * alpha).toPrecision(3), '%)');
+ case 'rgba':
+ default:
+ return 'rgba('.concat(a[0], ',', a[1], ',', a[2], ',', alpha, ')');
+ }
+ } /**
+ * Sets the red component of a color.
+ *
+ * The range depends on the colorMode(). In the
+ * default RGB mode it's between 0 and 255.
+ *
+ * @method setRed
+ * @param {Number} red the new red value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let myColor = color('darkorchid');
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the text.
+ * text(myColor.toString('#rrggbb'), 50, 50);
+ *
+ * describe('The text "#9932cc" written in purple on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setRed',
+ value: function setRed(new_red) {
+ this._array[0] = new_red / this.maxes[constants.RGB][0];
+ this._calculateLevels();
+ } /**
+ * Sets the green component of a color.
+ *
+ * The range depends on the colorMode(). In the
+ * default RGB mode it's between 0 and 255.
+ *
+ * @method setGreen
+ * @param {Number} green the new green value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let c = color(255, 128, 128);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ *
+ * // Change the red value.
+ * c.setRed(64);
+ *
+ * // Draw the right rectangle.
+ * fill(c);
+ * rect(50, 20, 35, 60);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is teal.');
+ * }
+ *
+ *
+ *
+ **/
+
+ },
+ {
+ key: 'setGreen',
+ value: function setGreen(new_green) {
+ this._array[1] = new_green / this.maxes[constants.RGB][1];
+ this._calculateLevels();
+ } /**
+ * Sets the blue component of a color.
+ *
+ * The range depends on the colorMode(). In the
+ * default RGB mode it's between 0 and 255.
+ *
+ * @method setBlue
+ * @param {Number} blue the new blue value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let c = color(255, 128, 128);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ *
+ * // Change the green value.
+ * c.setGreen(255);
+ *
+ * // Draw the right rectangle.
+ * fill(c);
+ * rect(50, 20, 35, 60);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is yellow.');
+ * }
+ *
+ *
+ *
+ **/
+
+ },
+ {
+ key: 'setBlue',
+ value: function setBlue(new_blue) {
+ this._array[2] = new_blue / this.maxes[constants.RGB][2];
+ this._calculateLevels();
+ } /**
+ * Sets the alpha (transparency) value of a color.
+ *
+ * The range depends on the
+ * colorMode(). In the default RGB mode it's
+ * between 0 and 255.
+ *
+ * @method setAlpha
+ * @param {Number} alpha the new alpha value.
+ *
+ * @example
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let c = color(255, 128, 128);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ *
+ * // Change the blue value.
+ * c.setBlue(255);
+ *
+ * // Draw the right rectangle.
+ * fill(c);
+ * rect(50, 20, 35, 60);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');
+ * }
+ *
+ *
+ *
+ **/
+
+ },
+ {
+ key: 'setAlpha',
+ value: function setAlpha(new_alpha) {
+ this._array[3] = new_alpha / this.maxes[this.mode][3];
+ this._calculateLevels();
+ } // calculates and stores the closest screen levels
+
+ },
+ {
+ key: '_calculateLevels',
+ value: function _calculateLevels() {
+ var array = this._array;
+ // (loop backwards for performance)
+ var levels = this.levels = new Array(array.length);
+ for (var i = array.length - 1; i >= 0; --i) {
+ levels[i] = Math.round(array[i] * 255);
+ } // Clear cached HSL/HSB values
+
+ this.hsla = null;
+ this.hsba = null;
+ }
+ },
+ {
+ key: '_getAlpha',
+ value: function _getAlpha() {
+ return this._array[3] * this.maxes[this.mode][3];
+ } // stores the color mode and maxes in this instance of Color
+ // for later use (by _parseInputs())
+
+ },
+ {
+ key: '_storeModeAndMaxes',
+ value: function _storeModeAndMaxes(new_mode, new_maxes) {
+ this.mode = new_mode;
+ this.maxes = new_maxes;
+ }
+ },
+ {
+ key: '_getMode',
+ value: function _getMode() {
+ return this.mode;
+ }
+ },
+ {
+ key: '_getMaxes',
+ value: function _getMaxes() {
+ return this.maxes;
+ }
+ },
+ {
+ key: '_getBlue',
+ value: function _getBlue() {
+ return this._array[2] * this.maxes[constants.RGB][2];
+ }
+ },
+ {
+ key: '_getBrightness',
+ value: function _getBrightness() {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[2] * this.maxes[constants.HSB][2];
+ }
+ },
+ {
+ key: '_getGreen',
+ value: function _getGreen() {
+ return this._array[1] * this.maxes[constants.RGB][1];
+ } /**
+ * Hue is the same in HSB and HSL, but the maximum value may be different.
+ * This function will return the HSB-normalized saturation when supplied with
+ * an HSB color object, but will default to the HSL-normalized saturation
+ * otherwise.
+ */
+
+ },
+ {
+ key: '_getHue',
+ value: function _getHue() {
+ if (this.mode === constants.HSB) {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[0] * this.maxes[constants.HSB][0];
+ } else {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[0] * this.maxes[constants.HSL][0];
+ }
+ }
+ },
+ {
+ key: '_getLightness',
+ value: function _getLightness() {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[2] * this.maxes[constants.HSL][2];
+ }
+ },
+ {
+ key: '_getRed',
+ value: function _getRed() {
+ return this._array[0] * this.maxes[constants.RGB][0];
+ } /**
+ * Saturation is scaled differently in HSB and HSL. This function will return
+ * the HSB saturation when supplied with an HSB color object, but will default
+ * to the HSL saturation otherwise.
+ */
+
+ },
+ {
+ key: '_getSaturation',
+ value: function _getSaturation() {
+ if (this.mode === constants.HSB) {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[1] * this.maxes[constants.HSB][1];
+ } else {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[1] * this.maxes[constants.HSL][1];
+ }
+ } /**
+ * For a number of different inputs, returns a color formatted as [r, g, b, a]
+ * arrays, with each component normalized between 0 and 1.
+ *
+ * @private
+ * @param {Array} [...args] An 'array-like' object that represents a list of
+ * arguments
+ * @return {Number[]} a color formatted as [r, g, b, a]
+ * Example:
+ * input ==> output
+ * g ==> [g, g, g, 255]
+ * g,a ==> [g, g, g, a]
+ * r, g, b ==> [r, g, b, 255]
+ * r, g, b, a ==> [r, g, b, a]
+ * [g] ==> [g, g, g, 255]
+ * [g, a] ==> [g, g, g, a]
+ * [r, g, b] ==> [r, g, b, 255]
+ * [r, g, b, a] ==> [r, g, b, a]
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let c = color(255, 128, 128);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ *
+ * // Change the alpha value.
+ * c.setAlpha(128);
+ *
+ * // Draw the right rectangle.
+ * fill(c);
+ * rect(50, 20, 35, 60);
+ *
+ * describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');
+ * }
+ *
+ *
+ *
+ */
+
+ }
+ ], [
+ {
+ key: '_parseInputs',
+ value: function _parseInputs(r, g, b, a) {
+ var numArgs = arguments.length;
+ var mode = this.mode;
+ var maxes = this.maxes[mode];
+ var results = [
+ ];
+ var i;
+ if (numArgs >= 3) {
+ // Argument is a list of component values.
+ results[0] = r / maxes[0];
+ results[1] = g / maxes[1];
+ results[2] = b / maxes[2];
+ // Alpha may be undefined, so default it to 100%.
+ if (typeof a === 'number') {
+ results[3] = a / maxes[3];
+ } else {
+ results[3] = 1;
+ } // Constrain components to the range [0,1].
+ // (loop backwards for performance)
+
+ for (i = results.length - 1; i >= 0; --i) {
+ var result = results[i];
+ if (result < 0) {
+ results[i] = 0;
+ } else if (result > 1) {
+ results[i] = 1;
+ }
+ } // Convert to RGBA and return.
+
+ if (mode === constants.HSL) {
+ return _color_conversion.default._hslaToRGBA(results);
+ } else if (mode === constants.HSB) {
+ return _color_conversion.default._hsbaToRGBA(results);
+ } else {
+ return results;
+ }
+ } else if (numArgs === 1 && typeof r === 'string') {
+ var str = r.trim().toLowerCase();
+ // Return if string is a named colour.
+ if (namedColors[str]) {
+ return Color._parseInputs.call(this, namedColors[str]);
+ } // Try RGBA pattern matching.
+
+ if (colorPatterns.HEX3.test(str)) {
+ // #rgb
+ results = colorPatterns.HEX3.exec(str).slice(1).map(function (color) {
+ return parseInt(color + color, 16) / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.HEX6.test(str)) {
+ // #rrggbb
+ results = colorPatterns.HEX6.exec(str).slice(1).map(function (color) {
+ return parseInt(color, 16) / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.HEX4.test(str)) {
+ // #rgba
+ results = colorPatterns.HEX4.exec(str).slice(1).map(function (color) {
+ return parseInt(color + color, 16) / 255;
+ });
+ return results;
+ } else if (colorPatterns.HEX8.test(str)) {
+ // #rrggbbaa
+ results = colorPatterns.HEX8.exec(str).slice(1).map(function (color) {
+ return parseInt(color, 16) / 255;
+ });
+ return results;
+ } else if (colorPatterns.RGB.test(str)) {
+ // rgb(R,G,B)
+ results = colorPatterns.RGB.exec(str).slice(1).map(function (color) {
+ return color / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.RGB_PERCENT.test(str)) {
+ // rgb(R%,G%,B%)
+ results = colorPatterns.RGB_PERCENT.exec(str).slice(1).map(function (color) {
+ return parseFloat(color) / 100;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.RGBA.test(str)) {
+ // rgba(R,G,B,A)
+ results = colorPatterns.RGBA.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 3) {
+ return parseFloat(color);
+ }
+ return color / 255;
+ });
+ return results;
+ } else if (colorPatterns.RGBA_PERCENT.test(str)) {
+ // rgba(R%,G%,B%,A%)
+ results = colorPatterns.RGBA_PERCENT.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseFloat(color) / 100;
+ });
+ return results;
+ } // Try HSLA pattern matching.
+
+ if (colorPatterns.HSL.test(str)) {
+ // hsl(H,S,L)
+ results = colorPatterns.HSL.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ }
+ return parseInt(color, 10) / 100;
+ });
+ results[3] = 1;
+ } else if (colorPatterns.HSLA.test(str)) {
+ // hsla(H,S,L,A)
+ results = colorPatterns.HSLA.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ } else if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseInt(color, 10) / 100;
+ });
+ }
+ results = results.map(function (value) {
+ return Math.max(Math.min(value, 1), 0);
+ });
+ if (results.length) {
+ return _color_conversion.default._hslaToRGBA(results);
+ } // Try HSBA pattern matching.
+
+ if (colorPatterns.HSB.test(str)) {
+ // hsb(H,S,B)
+ results = colorPatterns.HSB.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ }
+ return parseInt(color, 10) / 100;
+ });
+ results[3] = 1;
+ } else if (colorPatterns.HSBA.test(str)) {
+ // hsba(H,S,B,A)
+ results = colorPatterns.HSBA.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ } else if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseInt(color, 10) / 100;
+ });
+ }
+ if (results.length) {
+ // (loop backwards for performance)
+ for (i = results.length - 1; i >= 0; --i) {
+ results[i] = Math.max(Math.min(results[i], 1), 0);
+ }
+ return _color_conversion.default._hsbaToRGBA(results);
+ } // Input did not match any CSS color pattern: default to white.
+
+ results = [
+ 1,
+ 1,
+ 1,
+ 1
+ ];
+ } else if ((numArgs === 1 || numArgs === 2) && typeof r === 'number') {
+ // 'Grayscale' mode.
+ /**
+ * For HSB and HSL, interpret the gray level as a brightness/lightness
+ * value (they are equivalent when chroma is zero). For RGB, normalize the
+ * gray level according to the blue maximum.
+ */
+ results[0] = r / maxes[2];
+ results[1] = r / maxes[2];
+ results[2] = r / maxes[2];
+ // Alpha may be undefined, so default it to 100%.
+ if (typeof g === 'number') {
+ results[3] = g / maxes[3];
+ } else {
+ results[3] = 1;
+ } // Constrain components to the range [0,1].
+
+ results = results.map(function (value) {
+ return Math.max(Math.min(value, 1), 0);
+ });
+ } else {
+ throw new Error(''.concat(arguments, 'is not a valid color representation.'));
+ }
+ return results;
+ }
+ }
+ ]);
+ return Color;
+ }();
+ var _default = _main.default.Color;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ './color_conversion': 287,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.constructor': 209,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.trim': 224,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 290: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.fill');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Color');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Color
+ * @submodule Setting
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * Starts defining a shape that will mask any shapes drawn afterward.
+ *
+ * Any shapes drawn between `beginClip()` and
+ * endClip() will add to the mask shape. The mask
+ * will apply to anything drawn after endClip().
+ *
+ * The parameter, `options`, is optional. If an object with an `invert`
+ * property is passed, as in `beginClip({ invert: true })`, it will be used to
+ * set the masking mode. `{ invert: true }` inverts the mask, creating holes
+ * in shapes that are masked. `invert` is `false` by default.
+ *
+ * Masks can be contained between the
+ * push() and pop() functions.
+ * Doing so allows unmasked shapes to be drawn after masked shapes.
+ *
+ * Masks can also be defined in a callback function that's passed to
+ * clip().
+ *
+ * @method beginClip
+ * @param {Object} [options] an object containing clip settings.
+ *
+ * @example
+ *
+ * // todo
+ * //
+ * // describe('');
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a mask.
+ * beginClip();
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * endClip();
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ *
+ * describe('A white triangle and circle on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an inverted mask.
+ * beginClip({ invert: true });
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * endClip();
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ *
+ * describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * noStroke();
+ *
+ * // Draw a masked shape.
+ * push();
+ * // Create a mask.
+ * beginClip();
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * endClip();
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ * pop();
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw an inverted masked shape.
+ * push();
+ * // Create an inverted mask.
+ * beginClip({ invert: true });
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * endClip();
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ * pop();
+ *
+ * describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A silhouette of a rotating torus colored fuchsia.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a mask.
+ * beginClip();
+ * push();
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * scale(0.5);
+ * torus(30, 15);
+ * pop();
+ * endClip();
+ *
+ * // Draw a backing shape.
+ * noStroke();
+ * fill('fuchsia');
+ * plane(100);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.beginClip = function () {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+ };
+ this._renderer.beginClip(options);
+ };
+ /**
+ * Ends defining a mask that was started with
+ * beginClip().
+ *
+ * @method endClip
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a mask.
+ * beginClip();
+ * push();
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * scale(0.5);
+ * torus(30, 15);
+ * pop();
+ * endClip();
+ *
+ * // Draw a backing shape.
+ * noStroke();
+ * beginShape(QUAD_STRIP);
+ * fill(0, 255, 255);
+ * vertex(-width / 2, -height / 2);
+ * vertex(width / 2, -height / 2);
+ * fill(100, 0, 100);
+ * vertex(-width / 2, height / 2);
+ * vertex(width / 2, height / 2);
+ * endShape();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.endClip = function () {
+ this._renderer.endClip();
+ };
+ /**
+ * Defines a shape that will mask any shapes drawn afterward.
+ *
+ * The first parameter, `callback`, is a function that defines the mask.
+ * Any shapes drawn in `callback` will add to the mask shape. The mask
+ * will apply to anything drawn after `clip()` is called.
+ *
+ * The second parameter, `options`, is optional. If an object with an `invert`
+ * property is passed, as in `beginClip({ invert: true })`, it will be used to
+ * set the masking mode. `{ invert: true }` inverts the mask, creating holes
+ * in shapes that are masked. `invert` is `false` by default.
+ *
+ * Masks can be contained between the
+ * push() and pop() functions.
+ * Doing so allows unmasked shapes to be drawn after masked shapes.
+ *
+ * Masks can also be defined with beginClip()
+ * and endClip().
+ *
+ * @method clip
+ * @param {Function} callback a function that draws the mask shape.
+ * @param {Object} [options] an object containing clip settings.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a mask.
+ * beginClip();
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * endClip();
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ *
+ * describe('A white triangle and circle on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a mask.
+ * clip(mask);
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ *
+ * describe('A white triangle and circle on a gray background.');
+ * }
+ *
+ * // Declare a function that defines the mask.
+ * function mask() {
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an inverted mask.
+ * clip(mask, { invert: true });
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ *
+ * describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
+ * }
+ *
+ * // Declare a function that defines the mask.
+ * function mask() {
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * noStroke();
+ *
+ * // Draw a masked shape.
+ * push();
+ * // Create a mask.
+ * clip(mask);
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ * pop();
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw an inverted masked shape.
+ * push();
+ * // Create an inverted mask.
+ * clip(mask, { invert: true });
+ *
+ * // Draw a backing shape.
+ * square(5, 5, 45);
+ * pop();
+ *
+ * describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
+ * }
+ *
+ * // Declare a function that defines the mask.
+ * function mask() {
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A silhouette of a rotating torus colored fuchsia.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a mask.
+ * clip(mask);
+ *
+ * // Draw a backing shape.
+ * noStroke();
+ * fill('fuchsia');
+ * plane(100);
+ * }
+ *
+ * // Declare a function that defines the mask.
+ * function mask() {
+ * push();
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * scale(0.5);
+ * torus(30, 15);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.clip = function (callback, options) {
+ this._renderer.beginClip(options);
+ callback();
+ this._renderer.endClip(options);
+ };
+ /**
+ * Sets the color used for the background of the canvas.
+ *
+ * By default, the background is transparent. `background()` is typically used
+ * within draw() to clear the display window at the
+ * beginning of each frame. It can also be used inside
+ * setup() to set the background on the first frame
+ * of animation.
+ *
+ * The version of `background()` with one parameter interprets the value one
+ * of four ways. If the parameter is a `Number`, it's interpreted as a grayscale
+ * value. If the parameter is a `String`, it's interpreted as a CSS color string.
+ * RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the
+ * parameter is a p5.Color object, it will be used as
+ * the background color. If the parameter is a
+ * p5.Image object, it will be used as the background
+ * image.
+ *
+ * The version of `background()` with two parameters interprets the first one
+ * as a grayscale value. The second parameter sets the alpha (transparency)
+ * value.
+ *
+ * The version of `background()` with three parameters interprets them as RGB,
+ * HSB, or HSL colors, depending on the current
+ * colorMode(). By default, colors are specified
+ * in RGB values. Calling `background(255, 204, 0)` sets the background a bright
+ * yellow color.
+ *
+ * @method background
+ * @param {p5.Color} color any value created by the color() function
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a mask.
+ * clip(mask);
+ *
+ * // Draw a backing shape.
+ * noStroke();
+ * beginShape(QUAD_STRIP);
+ * fill(0, 255, 255);
+ * vertex(-width / 2, -height / 2);
+ * vertex(width / 2, -height / 2);
+ * fill(100, 0, 100);
+ * vertex(-width / 2, height / 2);
+ * vertex(width / 2, height / 2);
+ * endShape();
+ * }
+ *
+ * // Declare a function that defines the mask.
+ * function mask() {
+ * push();
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * scale(0.5);
+ * torus(30, 15);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // A grayscale value.
+ * background(51);
+ *
+ * describe('A canvas with a dark charcoal gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // A grayscale value and an alpha value.
+ * background(51, 0.4);
+ * describe('A canvas with a transparent gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // R, G & B values.
+ * background(255, 204, 0);
+ *
+ * describe('A canvas with a yellow background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // H, S & B values.
+ * background(255, 204, 100);
+ *
+ * describe('A canvas with a royal blue background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // A CSS named color.
+ * background('red');
+ *
+ * describe('A canvas with a red background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Three-digit hex RGB notation.
+ * background('#fae');
+ *
+ * describe('A canvas with a pink background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Six-digit hex RGB notation.
+ * background('#222222');
+ *
+ * describe('A canvas with a black background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Integer RGB notation.
+ * background('rgb(0, 255, 0)');
+ *
+ * describe('A canvas with a bright green background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Integer RGBA notation.
+ * background('rgba(0, 255, 0, 0.25)');
+ *
+ * describe('A canvas with a transparent green background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Percentage RGB notation.
+ * background('rgb(100%, 0%, 10%)');
+ *
+ * describe('A canvas with a red background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Percentage RGBA notation.
+ * background('rgba(100%, 0%, 100%, 0.5)');
+ *
+ * describe('A canvas with a transparent purple background.');
+ * }
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ * rgb() or rgba(), percentage rgb() or rgba(),
+ * 3-digit hex, 6-digit hex.
+ * @param {Number} [a] opacity of the background relative to current
+ * color range (default is 0-255).
+ * @chainable
+ */
+ /**
+ * @method background
+ * @param {Number} gray specifies a value between white and black.
+ * @param {Number} [a]
+ * @chainable
+ */
+ /**
+ * @method background
+ * @param {Number} v1 red value if color mode is RGB, or hue value if color mode is HSB.
+ * @param {Number} v2 green value if color mode is RGB, or saturation value if color mode is HSB.
+ * @param {Number} v3 blue value if color mode is RGB, or brightness value if color mode is HSB.
+ * @param {Number} [a]
+ * @chainable
+ */
+ /**
+ * @method background
+ * @param {Number[]} values an array containing the red, green, blue
+ * and alpha components of the color.
+ * @chainable
+ */
+ /**
+ * @method background
+ * @param {p5.Image} image image created with loadImage()
+ * or createImage(),
+ * to set as background.
+ * (must be same size as the sketch window).
+ * @param {Number} [a]
+ * @chainable
+ */
+ _main.default.prototype.background = function () {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).background.apply(_this$_renderer, arguments);
+ return this;
+ };
+ /**
+ * Clears the pixels on the canvas.
+ *
+ * `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't
+ * clear objects created by `createX()` functions such as
+ * createGraphics(),
+ * createVideo(), and
+ * createImg(). These objects will remain
+ * unchanged after calling `clear()` and can be redrawn.
+ *
+ * In WebGL mode, this function can clear the screen to a specific color. It
+ * interprets four numeric parameters as normalized RGBA color values. It also
+ * clears the depth buffer. If you are not using the WebGL renderer, these
+ * parameters will have no effect.
+ *
+ * @method clear
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // A p5.Color object.
+ * let c = color(0, 0, 255);
+ * background(c);
+ *
+ * describe('A canvas with a blue background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');
+ * }
+ *
+ * function draw() {
+ * circle(mouseX, mouseY, 20);
+ * }
+ *
+ * function mousePressed() {
+ * clear();
+ * background(200);
+ * }
+ *
+ *
+ *
+ *
+ * @param {Number} [r] normalized red value.
+ * @param {Number} [g] normalized green value.
+ * @param {Number} [b] normalized blue value.
+ * @param {Number} [a] normalized alpha value.
+ */
+ _main.default.prototype.clear = function () {
+ var _r = (arguments.length <= 0 ? undefined : arguments[0]) || 0;
+ var _g = (arguments.length <= 1 ? undefined : arguments[1]) || 0;
+ var _b = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ var _a = (arguments.length <= 3 ? undefined : arguments[3]) || 0;
+ this._renderer.clear(_r, _g, _b, _a);
+ return this;
+ };
+ /**
+ * Changes the way color values are interpreted.
+ *
+ * By default, the `Number` parameters for fill(),
+ * stroke(),
+ * background(), and
+ * color() are defined by values between 0 and 255
+ * using the RGB color model. This is equivalent to calling
+ * `colorMode(RGB, 255)`. Pure red is `color(255, 0, 0)` in this model.
+ *
+ * Calling `colorMode(RGB, 100)` sets colors to use RGB color values
+ * between 0 and 100. Pure red is `color(100, 0, 0)` in this model.
+ *
+ * Calling `colorMode(HSB)` or `colorMode(HSL)` changes to HSB or HSL system
+ * instead of RGB. Pure red is `color(0, 100, 100)` in HSB and
+ * `color(0, 100, 50)` in HSL.
+ *
+ * p5.Color objects remember the mode that they were
+ * created in. Changing modes doesn't affect their appearance.
+ *
+ * @method colorMode
+ * @param {Constant} mode either RGB, HSB or HSL, corresponding to
+ * Red/Green/Blue and Hue/Saturation/Brightness
+ * (or Lightness).
+ * @param {Number} [max] range for all values.
+ * @chainable
+ *
+ * @example
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ *
+ * pg = createGraphics(60, 60);
+ * pg.background(200);
+ * pg.noStroke();
+ * pg.circle(pg.width / 2, pg.height / 2, 15);
+ * image(pg, 20, 20);
+ *
+ * describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');
+ * }
+ *
+ * function mousePressed() {
+ * clear();
+ * image(pg, 20, 20);
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Fill with pure red.
+ * fill(255, 0, 0);
+ *
+ * circle(50, 50, 25);
+ *
+ * describe('A gray square with a red circle at its center.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use RGB color with values in the range 0-100.
+ * colorMode(RGB, 100);
+ *
+ * // Fill with pure red.
+ * fill(100, 0, 0);
+ *
+ * circle(50, 50, 25);
+ *
+ * describe('A gray square with a red circle at its center.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // Fill with pure red.
+ * fill(0, 100, 100);
+ *
+ * circle(50, 50, 25);
+ *
+ * describe('A gray square with a red circle at its center.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSL color.
+ * colorMode(HSL);
+ *
+ * // Fill with pure red.
+ * fill(0, 100, 50);
+ *
+ * circle(50, 50, 25);
+ *
+ * describe('A gray square with a red circle at its center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use RGB color with values in the range 0-100.
+ * colorMode(RGB, 100);
+ *
+ * for (let x = 0; x < 100; x += 1) {
+ * for (let y = 0; y < 100; y += 1) {
+ * stroke(x, y, 0);
+ * point(x, y);
+ * }
+ * }
+ *
+ * describe(
+ * 'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use HSB color with values in the range 0-100.
+ * colorMode(HSB, 100);
+ *
+ * for (let x = 0; x < 100; x += 1) {
+ * for (let y = 0; y < 100; y += 1) {
+ * stroke(x, y, 100);
+ * point(x, y);
+ * }
+ * }
+ *
+ * describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Color object.
+ * let myColor = color(180, 175, 230);
+ * background(myColor);
+ *
+ * // Use RGB color with values in the range 0-1.
+ * colorMode(RGB, 1);
+ *
+ * // Get the red, green, and blue color components.
+ * let redValue = red(myColor);
+ * let greenValue = green(myColor);
+ * let blueValue = blue(myColor);
+ *
+ * // Round the color components for display.
+ * redValue = round(redValue, 2);
+ * greenValue = round(greenValue, 2);
+ * blueValue = round(blueValue, 2);
+ *
+ * // Display the color components.
+ * text(`Red: ${redValue}`, 10, 10, 80, 80);
+ * text(`Green: ${greenValue}`, 10, 40, 80, 80);
+ * text(`Blue: ${blueValue}`, 10, 70, 80, 80);
+ *
+ * describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method colorMode
+ * @param {Constant} mode
+ * @param {Number} max1 range for the red or hue depending on the
+ * current color mode.
+ * @param {Number} max2 range for the green or saturation depending
+ * on the current color mode.
+ * @param {Number} max3 range for the blue or brightness/lightness
+ * depending on the current color mode.
+ * @param {Number} [maxA] range for the alpha.
+ * @chainable
+ */
+ _main.default.prototype.colorMode = function (mode, max1, max2, max3, maxA) {
+ _main.default._validateParameters('colorMode', arguments);
+ if (mode === constants.RGB || mode === constants.HSB || mode === constants.HSL) {
+ // Set color mode.
+ this._colorMode = mode;
+ // Set color maxes.
+ var maxes = this._colorMaxes[mode];
+ if (arguments.length === 2) {
+ maxes[0] = max1; // Red
+ maxes[1] = max1; // Green
+ maxes[2] = max1; // Blue
+ maxes[3] = max1; // Alpha
+ } else if (arguments.length === 4) {
+ maxes[0] = max1; // Red
+ maxes[1] = max2; // Green
+ maxes[2] = max3; // Blue
+ } else if (arguments.length === 5) {
+ maxes[0] = max1; // Red
+ maxes[1] = max2; // Green
+ maxes[2] = max3; // Blue
+ maxes[3] = maxA; // Alpha
+ }
+ }
+ return this;
+ };
+ /**
+ * Sets the color used to fill shapes.
+ *
+ * Calling `fill(255, 165, 0)` or `fill('orange')` means all shapes drawn
+ * after the fill command will be filled with the color orange.
+ *
+ * The version of `fill()` with one parameter interprets the value one of
+ * three ways. If the parameter is a `Number`, it's interpreted as a grayscale
+ * value. If the parameter is a `String`, it's interpreted as a CSS color
+ * string. A p5.Color object can also be provided to
+ * set the fill color.
+ *
+ * The version of `fill()` with three parameters interprets them as RGB, HSB,
+ * or HSL colors, depending on the current
+ * colorMode(). The default color space is RGB,
+ * with each value in the range from 0 to 255.
+ *
+ * @method fill
+ * @param {Number} v1 red value if color mode is RGB or hue value if color mode is HSB.
+ * @param {Number} v2 green value if color mode is RGB or saturation value if color mode is HSB.
+ * @param {Number} v3 blue value if color mode is RGB or brightness value if color mode is HSB.
+ * @param {Number} [alpha]
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(255);
+ *
+ * // Use RGB color with alpha values in the range 0-1.
+ * colorMode(RGB, 255, 255, 255, 1);
+ *
+ * noFill();
+ * strokeWeight(4);
+ * stroke(255, 0, 10, 0.3);
+ * circle(40, 40, 50);
+ * circle(50, 60, 50);
+ *
+ * describe('Two overlapping translucent pink circle outlines.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // A grayscale value.
+ * fill(51);
+ * square(20, 20, 60);
+ *
+ * describe('A dark charcoal gray square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // R, G & B values.
+ * fill(255, 204, 0);
+ * square(20, 20, 60);
+ *
+ * describe('A yellow square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(100);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // H, S & B values.
+ * fill(255, 204, 100);
+ * square(20, 20, 60);
+ *
+ * describe('A royal blue square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // A CSS named color.
+ * fill('red');
+ * square(20, 20, 60);
+ *
+ * describe('A red square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Three-digit hex RGB notation.
+ * fill('#fae');
+ * square(20, 20, 60);
+ *
+ * describe('A pink square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Six-digit hex RGB notation.
+ * fill('#A251FA');
+ * square(20, 20, 60);
+ *
+ * describe('A purple square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Integer RGB notation.
+ * fill('rgb(0, 255, 0)');
+ * square(20, 20, 60);
+ *
+ * describe('A bright green square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Integer RGBA notation.
+ * fill('rgba(0, 255, 0, 0.25)');
+ * square(20, 20, 60);
+ *
+ * describe('A soft green rectange with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Percentage RGB notation.
+ * fill('rgb(100%, 0%, 10%)');
+ * square(20, 20, 60);
+ *
+ * describe('A red square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Percentage RGBA notation.
+ * fill('rgba(100%, 0%, 100%, 0.5)');
+ * square(20, 20, 60);
+ *
+ * describe('A dark fuchsia square with a black outline.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method fill
+ * @param {String} value a color string.
+ * @chainable
+ */
+ /**
+ * @method fill
+ * @param {Number} gray a grayscale value.
+ * @param {Number} [alpha]
+ * @chainable
+ */
+ /**
+ * @method fill
+ * @param {Number[]} values an array containing the red, green, blue &
+ * and alpha components of the color.
+ * @chainable
+ */
+ /**
+ * @method fill
+ * @param {p5.Color} color the fill color.
+ * @chainable
+ */
+ _main.default.prototype.fill = function () {
+ var _this$_renderer2;
+ this._renderer._setProperty('_fillSet', true);
+ this._renderer._setProperty('_doFill', true);
+ (_this$_renderer2 = this._renderer).fill.apply(_this$_renderer2, arguments);
+ return this;
+ };
+ /**
+ * Disables setting the fill color for shapes.
+ *
+ * Calling `noFill()` is the same as making the fill completely transparent,
+ * as in `fill(0, 0)`. If both noStroke() and
+ * `noFill()` are called, nothing will be drawn to the screen.
+ *
+ * @method noFill
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // A p5.Color object.
+ * let c = color(0, 0, 255);
+ * fill(c);
+ * square(20, 20, 60);
+ *
+ * describe('A blue square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the top square.
+ * square(32, 10, 35);
+ *
+ * // Draw the bottom square.
+ * noFill();
+ * square(32, 55, 35);
+ *
+ * describe('A white square on above an empty square. Both squares have black outlines.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noFill = function () {
+ this._renderer._setProperty('_doFill', false);
+ return this;
+ };
+ /**
+ * Disables drawing points, lines, and the outlines of shapes.
+ *
+ * Calling `noStroke()` is the same as making the stroke completely transparent,
+ * as in `stroke(0, 0)`. If both `noStroke()` and
+ * noFill() are called, nothing will be drawn to the
+ * screen.
+ *
+ * @method noStroke
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A purple cube wireframe spinning on a black canvas.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Style the box.
+ * noFill();
+ * stroke(100, 100, 240);
+ *
+ * // Rotate the coordinates.
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw the box.
+ * box(45);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * noStroke();
+ * square(20, 20, 60);
+ *
+ * describe('A white square with no outline.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noStroke = function () {
+ this._renderer._setProperty('_doStroke', false);
+ return this;
+ };
+ /**
+ * Sets the color used to draw points, lines, and the outlines of shapes.
+ *
+ * Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn
+ * after calling `stroke()` will be filled with the color orange. The way
+ * these parameters are interpreted may be changed with the
+ * colorMode() function.
+ *
+ * The version of `stroke()` with one parameter interprets the value one of
+ * three ways. If the parameter is a `Number`, it's interpreted as a grayscale
+ * value. If the parameter is a `String`, it's interpreted as a CSS color
+ * string. A p5.Color object can also be provided to
+ * set the stroke color.
+ *
+ * The version of `stroke()` with two parameters interprets the first one as a
+ * grayscale value. The second parameter sets the alpha (transparency) value.
+ *
+ * The version of `stroke()` with three parameters interprets them as RGB, HSB,
+ * or HSL colors, depending on the current `colorMode()`.
+ *
+ * The version of `stroke()` with four parameters interprets them as RGBA, HSBA,
+ * or HSLA colors, depending on the current `colorMode()`. The last parameter
+ * sets the alpha (transparency) value.
+ *
+ * @method stroke
+ * @param {Number} v1 red value if color mode is RGB or hue value if color mode is HSB.
+ * @param {Number} v2 green value if color mode is RGB or saturation value if color mode is HSB.
+ * @param {Number} v3 blue value if color mode is RGB or brightness value if color mode is HSB.
+ * @param {Number} [alpha]
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A pink cube with no edge outlines spinning on a black canvas.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Style the box.
+ * noStroke();
+ * fill(240, 150, 150);
+ *
+ * // Rotate the coordinates.
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw the box.
+ * box(45);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // A grayscale value.
+ * strokeWeight(4);
+ * stroke(51);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a dark charcoal gray outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // R, G & B values.
+ * stroke(255, 204, 0);
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a yellow outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use HSB color.
+ * colorMode(HSB);
+ *
+ * // H, S & B values.
+ * strokeWeight(4);
+ * stroke(255, 204, 100);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a royal blue outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // A CSS named color.
+ * stroke('red');
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a red outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Three-digit hex RGB notation.
+ * stroke('#fae');
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a pink outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Six-digit hex RGB notation.
+ * stroke('#222222');
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Integer RGB notation.
+ * stroke('rgb(0, 255, 0)');
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A whiite square with a bright green outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Integer RGBA notation.
+ * stroke('rgba(0, 255, 0, 0.25)');
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a soft green outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Percentage RGB notation.
+ * stroke('rgb(100%, 0%, 10%)');
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a red outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Percentage RGBA notation.
+ * stroke('rgba(100%, 0%, 100%, 0.5)');
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a dark fuchsia outline.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method stroke
+ * @param {String} value a color string.
+ * @chainable
+ */
+ /**
+ * @method stroke
+ * @param {Number} gray a grayscale value.
+ * @param {Number} [alpha]
+ * @chainable
+ */
+ /**
+ * @method stroke
+ * @param {Number[]} values an array containing the red, green, blue,
+ * and alpha components of the color.
+ * @chainable
+ */
+ /**
+ * @method stroke
+ * @param {p5.Color} color the stroke color.
+ * @chainable
+ */
+ _main.default.prototype.stroke = function () {
+ var _this$_renderer3;
+ this._renderer._setProperty('_strokeSet', true);
+ this._renderer._setProperty('_doStroke', true);
+ (_this$_renderer3 = this._renderer).stroke.apply(_this$_renderer3, arguments);
+ return this;
+ };
+ /**
+ * Starts using shapes to erase parts of the canvas.
+ *
+ * All drawing that follows `erase()` will subtract from the canvas, revealing
+ * the web page underneath. The erased areas will become transparent, allowing
+ * the content behind the canvas to show through. The
+ * fill(), stroke(), and
+ * blendMode() have no effect once `erase()` is
+ * called.
+ *
+ * The `erase()` function has two optional parameters. The first parameter
+ * sets the strength of erasing by the shape's interior. A value of 0 means
+ * that no erasing will occur. A value of 255 means that the shape's interior
+ * will fully erase the content underneath. The default value is 255
+ * (full strength).
+ *
+ * The second parameter sets the strength of erasing by the shape's edge. A
+ * value of 0 means that no erasing will occur. A value of 255 means that the
+ * shape's edge will fully erase the content underneath. The default value is
+ * 255 (full strength).
+ *
+ * To cancel the erasing effect, use the noErase()
+ * function.
+ *
+ * `erase()` has no effect on drawing done with the
+ * image() and
+ * background() functions.
+ *
+ * @method erase
+ * @param {Number} [strengthFill] a number (0-255) for the strength of erasing under a shape's interior.
+ * Defaults to 255, which is full strength.
+ * @param {Number} [strengthStroke] a number (0-255) for the strength of erasing under a shape's edge.
+ * Defaults to 255, which is full strength.
+ *
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // A p5.Color object.
+ * stroke(color(0, 0, 255));
+ * strokeWeight(4);
+ * square(20, 20, 60);
+ *
+ * describe('A white square with a blue outline.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(100, 100, 250);
+ *
+ * // Draw a pink square.
+ * fill(250, 100, 100);
+ * square(20, 20, 60);
+ *
+ * // Erase a circular area.
+ * erase();
+ * circle(25, 30, 30);
+ * noErase();
+ *
+ * describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.erase = function () {
+ var opacityFill = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 255;
+ var opacityStroke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 255;
+ this._renderer.erase(opacityFill, opacityStroke);
+ return this;
+ };
+ /**
+ * Ends erasing that was started with erase().
+ *
+ * The fill(), stroke(), and
+ * blendMode() settings will return to what they
+ * were prior to calling erase().
+ *
+ * @method noErase
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(100, 100, 250);
+ *
+ * // Draw a pink square.
+ * fill(250, 100, 100);
+ * square(20, 20, 60);
+ *
+ * // Erase a circular area.
+ * strokeWeight(5);
+ * erase(150, 255);
+ * circle(25, 30, 30);
+ * noErase();
+ *
+ * describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noErase = function () {
+ this._renderer.noErase();
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ './p5.Color': 289,
+ 'core-js/modules/es.array.fill': 173,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 291: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.QUADRATIC = exports.LINEAR = exports._CTX_MIDDLE = exports._DEFAULT_LEADMULT = exports._DEFAULT_TEXT_FILL = exports.WORD = exports.CHAR = exports.BOLDITALIC = exports.BOLD = exports.ITALIC = exports.NORMAL = exports.BLUR = exports.ERODE = exports.DILATE = exports.POSTERIZE = exports.INVERT = exports.OPAQUE = exports.GRAY = exports.THRESHOLD = exports.BURN = exports.DODGE = exports.SOFT_LIGHT = exports.HARD_LIGHT = exports.OVERLAY = exports.REPLACE = exports.SCREEN = exports.MULTIPLY = exports.EXCLUSION = exports.SUBTRACT = exports.DIFFERENCE = exports.LIGHTEST = exports.DARKEST = exports.ADD = exports.REMOVE = exports.BLEND = exports.UP_ARROW = exports.TAB = exports.SHIFT = exports.RIGHT_ARROW = exports.RETURN = exports.OPTION = exports.LEFT_ARROW = exports.ESCAPE = exports.ENTER = exports.DOWN_ARROW = exports.DELETE = exports.CONTROL = exports.BACKSPACE = exports.ALT = exports.AUTO = exports.HSL = exports.HSB = exports.RGB = exports.MITER = exports.BEVEL = exports.ROUND = exports.SQUARE = exports.PROJECT = exports.PIE = exports.CHORD = exports.OPEN = exports.CLOSE = exports.TESS = exports.QUAD_STRIP = exports.QUADS = exports.TRIANGLE_STRIP = exports.TRIANGLE_FAN = exports.TRIANGLES = exports.LINE_LOOP = exports.LINE_STRIP = exports.LINES = exports.POINTS = exports.BASELINE = exports.BOTTOM = exports.TOP = exports.CENTER = exports.LEFT = exports.RIGHT = exports.RADIUS = exports.CORNERS = exports.CORNER = exports.RAD_TO_DEG = exports.DEG_TO_RAD = exports.RADIANS = exports.DEGREES = exports.TWO_PI = exports.TAU = exports.QUARTER_PI = exports.PI = exports.HALF_PI = exports.WAIT = exports.TEXT = exports.MOVE = exports.HAND = exports.CROSS = exports.ARROW = exports.WEBGL2 = exports.WEBGL = exports.P2D = exports.VERSION = void 0;
+ exports.RGBA = exports.HALF_FLOAT = exports.FLOAT = exports.UNSIGNED_INT = exports.UNSIGNED_BYTE = exports.COVER = exports.CONTAIN = exports.FALLBACK = exports.LABEL = exports.AXES = exports.GRID = exports._DEFAULT_FILL = exports._DEFAULT_STROKE = exports.PORTRAIT = exports.LANDSCAPE = exports.SMOOTH = exports.FLAT = exports.MIRROR = exports.CLAMP = exports.REPEAT = exports.NEAREST = exports.IMAGE = exports.IMMEDIATE = exports.TEXTURE = exports.FILL = exports.STROKE = exports.CURVE = exports.BEZIER = void 0;
+ /**
+ * @module Constants
+ * @submodule Constants
+ * @for p5
+ */
+ var _PI = Math.PI;
+ /**
+ * Version of this p5.js.
+ * @property {String} VERSION
+ * @final
+ */
+ var VERSION = '1.9.4';
+ // GRAPHICS RENDERER
+ /**
+ * The default, two-dimensional renderer.
+ * @property {String} P2D
+ * @final
+ */
+ exports.VERSION = VERSION;
+ var P2D = 'p2d';
+ /**
+ * One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.
+ *
+ * `WEBGL` differs from the default `P2D` renderer in the following ways:
+ *
+ * - **Coordinate System** - When drawing in `WEBGL` mode, the origin point (0,0,0) is located at the center of the screen, not the top-left corner. See the learn page about coordinates and transformations.
+ * - **3D Shapes** - `WEBGL` mode can be used to draw 3-dimensional shapes like box(), sphere(), cone(), and more. See the learn page about custom geometry to make more complex objects.
+ * - **Shape Detail** - When drawing in `WEBGL` mode, you can specify how smooth curves should be drawn by using a `detail` parameter. See the wiki section about shapes for a more information and an example.
+ * - **Textures** - A texture is like a skin that wraps onto a shape. See the wiki section about textures for examples of mapping images onto surfaces with textures.
+ * - **Materials and Lighting** - `WEBGL` offers different types of lights like ambientLight() to place around a scene. Materials like specularMaterial() reflect the lighting to convey shape and depth. See the learn page for styling and appearance to experiment with different combinations.
+ * - **Camera** - The viewport of a `WEBGL` sketch can be adjusted by changing camera attributes. See the learn page section about cameras for an explanation of camera controls.
+ * - **Text** - `WEBGL` requires opentype/truetype font files to be preloaded using loadFont(). See the wiki section about text for details, along with a workaround.
+ * - **Shaders** - Shaders are hardware accelerated programs that can be used for a variety of effects and graphics. See the introduction to shaders to get started with shaders in p5.js.
+ * - **Graphics Acceleration** - `WEBGL` mode uses the graphics card instead of the CPU, so it may help boost the performance of your sketch (example: drawing more shapes on the screen at once).
+ *
+ * To learn more about WEBGL mode, check out all the interactive WEBGL tutorials in the "Learn" section of this website, or read the wiki article "Getting started with WebGL in p5".
+ *
+ * @property {String} WEBGL
+ * @final
+ */
+ exports.P2D = P2D;
+ var WEBGL = 'webgl';
+ /**
+ * One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
+ * which can be used to determine what capabilities the rendering environment
+ * has.
+ * @property {String} WEBGL2
+ * @final
+ */
+ exports.WEBGL = WEBGL;
+ var WEBGL2 = 'webgl2';
+ // ENVIRONMENT
+ /**
+ * @property {String} ARROW
+ * @final
+ */
+ exports.WEBGL2 = WEBGL2;
+ var ARROW = 'default';
+ /**
+ * @property {String} CROSS
+ * @final
+ */
+ exports.ARROW = ARROW;
+ var CROSS = 'crosshair';
+ /**
+ * @property {String} HAND
+ * @final
+ */
+ exports.CROSS = CROSS;
+ var HAND = 'pointer';
+ /**
+ * @property {String} MOVE
+ * @final
+ */
+ exports.HAND = HAND;
+ var MOVE = 'move';
+ /**
+ * @property {String} TEXT
+ * @final
+ */
+ exports.MOVE = MOVE;
+ var TEXT = 'text';
+ /**
+ * @property {String} WAIT
+ * @final
+ */
+ exports.TEXT = TEXT;
+ var WAIT = 'wait';
+ // TRIGONOMETRY
+ /**
+ * A `Number` constant that's approximately 1.5708.
+ *
+ * `HALF_PI` is half the value of the mathematical constant π. It's useful for
+ * many tasks that involve rotation and oscillation. For example, calling
+ * `rotate(HALF_PI)` rotates the coordinate system `HALF_PI` radians, which is
+ * a quarter turn (90˚).
+ *
+ * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
+ * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
+ *
+ * @property {Number} HALF_PI
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(235, 145, 15);
+ *
+ * // Draw the left rectangle.
+ * noStroke();
+ * fill(30, 45, 220);
+ * rect(30, 10, 10, 80);
+ *
+ * // Erase a circle.
+ * erase();
+ * circle(50, 50, 60);
+ * noErase();
+ *
+ * // Draw the right rectangle.
+ * rect(70, 10, 10, 80);
+ *
+ * describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw an arc from 0 to HALF_PI.
+ * arc(50, 50, 80, 80, 0, HALF_PI);
+ *
+ * describe('The bottom-right quarter of a circle drawn in white on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw a line.
+ * line(0, 0, 40, 0);
+ *
+ * // Rotate a quarter turn.
+ * rotate(HALF_PI);
+ *
+ * // Draw the same line, rotated.
+ * line(0, 0, 40, 0);
+ *
+ * describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');
+ * }
+ *
+ *
+ *
+ */
+ exports.WAIT = WAIT;
+ var HALF_PI = _PI / 2;
+ /**
+ * A `Number` constant that's approximately 3.1416.
+ *
+ * `PI` is the mathematical constant π. It's useful for many tasks that
+ * involve rotation and oscillation. For example, calling `rotate(PI)` rotates
+ * the coordinate system `PI` radians, which is a half turn (180˚).
+ *
+ * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
+ * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
+ *
+ * @property {Number} PI
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Calculate the x-coordinates.
+ * let x1 = 40 * sin(frameCount * 0.05);
+ * let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);
+ *
+ * // Style the oscillators.
+ * noStroke();
+ *
+ * // Draw the red oscillator.
+ * fill(255, 0, 0);
+ * circle(x1, 0, 20);
+ *
+ * // Draw the blue oscillator.
+ * fill(0, 0, 255);
+ * circle(x2, 0, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw an arc from 0 to PI.
+ * arc(50, 50, 80, 80, 0, PI);
+ *
+ * describe('The bottom half of a circle drawn in white on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw a line.
+ * line(0, 0, 40, 0);
+ *
+ * // Rotate a half turn.
+ * rotate(PI);
+ *
+ * // Draw the same line, rotated.
+ * line(0, 0, 40, 0);
+ *
+ * describe('A horizontal black line on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ exports.HALF_PI = HALF_PI;
+ var PI = _PI;
+ /**
+ * A `Number` constant that's approximately 0.7854.
+ *
+ * `QUARTER_PI` is one-fourth the value of the mathematical constant π. It's
+ * useful for many tasks that involve rotation and oscillation. For example,
+ * calling `rotate(QUARTER_PI)` rotates the coordinate system `QUARTER_PI`
+ * radians, which is an eighth of a turn (45˚).
+ *
+ * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
+ * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
+ *
+ * @property {Number} QUARTER_PI
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Calculate the x-coordinates.
+ * let x1 = 40 * sin(frameCount * 0.05);
+ * let x2 = 40 * sin(frameCount * 0.05 + PI);
+ *
+ * // Style the oscillators.
+ * noStroke();
+ *
+ * // Draw the red oscillator.
+ * fill(255, 0, 0);
+ * circle(x1, 0, 20);
+ *
+ * // Draw the blue oscillator.
+ * fill(0, 0, 255);
+ * circle(x2, 0, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw an arc from 0 to QUARTER_PI.
+ * arc(50, 50, 80, 80, 0, QUARTER_PI);
+ *
+ * describe('A one-eighth slice of a circle drawn in white on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw a line.
+ * line(0, 0, 40, 0);
+ *
+ * // Rotate an eighth turn.
+ * rotate(QUARTER_PI);
+ *
+ * // Draw the same line, rotated.
+ * line(0, 0, 40, 0);
+ *
+ * describe('Two black lines that form a "V" opening towards the bottom-right corner of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ exports.PI = PI;
+ var QUARTER_PI = _PI / 4;
+ /**
+ * A `Number` constant that's approximately 6.2382.
+ *
+ * `TAU` is twice the value of the mathematical constant π. It's useful for
+ * many tasks that involve rotation and oscillation. For example, calling
+ * `rotate(TAU)` rotates the coordinate system `TAU` radians, which is one
+ * full turn (360˚). `TAU` and `TWO_PI` are equal.
+ *
+ * Note: `TAU` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
+ * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
+ *
+ * @property {Number} TAU
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Calculate the x-coordinates.
+ * let x1 = 40 * sin(frameCount * 0.05);
+ * let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);
+ *
+ * // Style the oscillators.
+ * noStroke();
+ *
+ * // Draw the red oscillator.
+ * fill(255, 0, 0);
+ * circle(x1, 0, 20);
+ *
+ * // Draw the blue oscillator.
+ * fill(0, 0, 255);
+ * circle(x2, 0, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw an arc from 0 to TAU.
+ * arc(50, 50, 80, 80, 0, TAU);
+ *
+ * describe('A white circle drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw a line.
+ * line(0, 0, 40, 0);
+ *
+ * // Rotate a full turn.
+ * rotate(TAU);
+ *
+ * // Style the second line.
+ * strokeWeight(5);
+ *
+ * // Draw the same line, shorter and rotated.
+ * line(0, 0, 20, 0);
+ *
+ * describe(
+ * 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ exports.QUARTER_PI = QUARTER_PI;
+ var TAU = _PI * 2;
+ /**
+ * A `Number` constant that's approximately 6.2382.
+ *
+ * `TWO_PI` is twice the value of the mathematical constant π. It's useful for
+ * many tasks that involve rotation and oscillation. For example, calling
+ * `rotate(TWO_PI)` rotates the coordinate system `TWO_PI` radians, which is
+ * one full turn (360˚). `TWO_PI` and `TAU` are equal.
+ *
+ * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
+ * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
+ *
+ * @property {Number} TWO_PI
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A red circle with a blue center oscillates from left to right on a gray background.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Calculate the x-coordinates.
+ * let x1 = 40 * sin(frameCount * 0.05);
+ * let x2 = 40 * sin(frameCount * 0.05 + TAU);
+ *
+ * // Style the oscillators.
+ * noStroke();
+ *
+ * // Draw the red oscillator.
+ * fill(255, 0, 0);
+ * circle(x1, 0, 20);
+ *
+ * // Draw the blue oscillator, smaller.
+ * fill(0, 0, 255);
+ * circle(x2, 0, 10);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw an arc from 0 to TWO_PI.
+ * arc(50, 50, 80, 80, 0, TWO_PI);
+ *
+ * describe('A white circle drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw a line.
+ * line(0, 0, 40, 0);
+ *
+ * // Rotate a full turn.
+ * rotate(TWO_PI);
+ *
+ * // Style the second line.
+ * strokeWeight(5);
+ *
+ * // Draw the same line, shorter and rotated.
+ * line(0, 0, 20, 0);
+ *
+ * describe(
+ * 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ exports.TAU = TAU;
+ var TWO_PI = _PI * 2;
+ /**
+ * A `String` constant that's used to set the
+ * angleMode().
+ *
+ * By default, functions such as rotate() and
+ * sin() expect angles measured in units of radians.
+ * Calling `angleMode(DEGREES)` ensures that angles are measured in units of
+ * degrees.
+ *
+ * Note: `TWO_PI` radians equals 360˚.
+ *
+ * @property {String} DEGREES
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A red circle with a blue center oscillates from left to right on a gray background.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Calculate the x-coordinates.
+ * let x1 = 40 * sin(frameCount * 0.05);
+ * let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);
+ *
+ * // Style the oscillators.
+ * noStroke();
+ *
+ * // Draw the red oscillator.
+ * fill(255, 0, 0);
+ * circle(x1, 0, 20);
+ *
+ * // Draw the blue oscillator, smaller.
+ * fill(0, 0, 255);
+ * circle(x2, 0, 10);
+ * }
+ *
+ *
+ *
+ */
+ exports.TWO_PI = TWO_PI;
+ var DEGREES = 'degrees';
+ /**
+ * A `String` constant that's used to set the
+ * angleMode().
+ *
+ * By default, functions such as rotate() and
+ * sin() expect angles measured in units of radians.
+ * Calling `angleMode(RADIANS)` ensures that angles are measured in units of
+ * radians. Doing so can be useful if the
+ * angleMode() has been set to
+ * DEGREES.
+ *
+ * Note: `TWO_PI` radians equals 360˚.
+ *
+ * @property {String} RADIANS
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a red arc from 0 to HALF_PI radians.
+ * fill(255, 0, 0);
+ * arc(50, 50, 80, 80, 0, HALF_PI);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Draw a blue arc from 90˚ to 180˚.
+ * fill(0, 0, 255);
+ * arc(50, 50, 80, 80, 90, 180);
+ *
+ * describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
+ * }
+ *
+ *
+ *
+ */
+ exports.DEGREES = DEGREES;
+ var RADIANS = 'radians';
+ exports.RADIANS = RADIANS;
+ var DEG_TO_RAD = _PI / 180;
+ exports.DEG_TO_RAD = DEG_TO_RAD;
+ var RAD_TO_DEG = 180 / _PI;
+ // SHAPE
+ /**
+ * @property {String} CORNER
+ * @final
+ */
+ exports.RAD_TO_DEG = RAD_TO_DEG;
+ var CORNER = 'corner';
+ /**
+ * @property {String} CORNERS
+ * @final
+ */
+ exports.CORNER = CORNER;
+ var CORNERS = 'corners';
+ /**
+ * @property {String} RADIUS
+ * @final
+ */
+ exports.CORNERS = CORNERS;
+ var RADIUS = 'radius';
+ /**
+ * @property {String} RIGHT
+ * @final
+ */
+ exports.RADIUS = RADIUS;
+ var RIGHT = 'right';
+ /**
+ * @property {String} LEFT
+ * @final
+ */
+ exports.RIGHT = RIGHT;
+ var LEFT = 'left';
+ /**
+ * @property {String} CENTER
+ * @final
+ */
+ exports.LEFT = LEFT;
+ var CENTER = 'center';
+ /**
+ * @property {String} TOP
+ * @final
+ */
+ exports.CENTER = CENTER;
+ var TOP = 'top';
+ /**
+ * @property {String} BOTTOM
+ * @final
+ */
+ exports.TOP = TOP;
+ var BOTTOM = 'bottom';
+ /**
+ * @property {String} BASELINE
+ * @final
+ * @default alphabetic
+ */
+ exports.BOTTOM = BOTTOM;
+ var BASELINE = 'alphabetic';
+ /**
+ * @property {Number} POINTS
+ * @final
+ * @default 0x0000
+ */
+ exports.BASELINE = BASELINE;
+ var POINTS = 0;
+ /**
+ * @property {Number} LINES
+ * @final
+ * @default 0x0001
+ */
+ exports.POINTS = POINTS;
+ var LINES = 1;
+ /**
+ * @property {Number} LINE_STRIP
+ * @final
+ * @default 0x0003
+ */
+ exports.LINES = LINES;
+ var LINE_STRIP = 3;
+ /**
+ * @property {Number} LINE_LOOP
+ * @final
+ * @default 0x0002
+ */
+ exports.LINE_STRIP = LINE_STRIP;
+ var LINE_LOOP = 2;
+ /**
+ * @property {Number} TRIANGLES
+ * @final
+ * @default 0x0004
+ */
+ exports.LINE_LOOP = LINE_LOOP;
+ var TRIANGLES = 4;
+ /**
+ * @property {Number} TRIANGLE_FAN
+ * @final
+ * @default 0x0006
+ */
+ exports.TRIANGLES = TRIANGLES;
+ var TRIANGLE_FAN = 6;
+ /**
+ * @property {Number} TRIANGLE_STRIP
+ * @final
+ * @default 0x0005
+ */
+ exports.TRIANGLE_FAN = TRIANGLE_FAN;
+ var TRIANGLE_STRIP = 5;
+ /**
+ * @property {String} QUADS
+ * @final
+ */
+ exports.TRIANGLE_STRIP = TRIANGLE_STRIP;
+ var QUADS = 'quads';
+ /**
+ * @property {String} QUAD_STRIP
+ * @final
+ * @default quad_strip
+ */
+ exports.QUADS = QUADS;
+ var QUAD_STRIP = 'quad_strip';
+ /**
+ * @property {String} TESS
+ * @final
+ * @default tess
+ */
+ exports.QUAD_STRIP = QUAD_STRIP;
+ var TESS = 'tess';
+ /**
+ * @property {String} CLOSE
+ * @final
+ */
+ exports.TESS = TESS;
+ var CLOSE = 'close';
+ /**
+ * @property {String} OPEN
+ * @final
+ */
+ exports.CLOSE = CLOSE;
+ var OPEN = 'open';
+ /**
+ * @property {String} CHORD
+ * @final
+ */
+ exports.OPEN = OPEN;
+ var CHORD = 'chord';
+ /**
+ * @property {String} PIE
+ * @final
+ */
+ exports.CHORD = CHORD;
+ var PIE = 'pie';
+ /**
+ * @property {String} PROJECT
+ * @final
+ * @default square
+ */
+ exports.PIE = PIE;
+ var PROJECT = 'square'; // PEND: careful this is counterintuitive
+ /**
+ * @property {String} SQUARE
+ * @final
+ * @default butt
+ */
+ exports.PROJECT = PROJECT;
+ var SQUARE = 'butt';
+ /**
+ * @property {String} ROUND
+ * @final
+ */
+ exports.SQUARE = SQUARE;
+ var ROUND = 'round';
+ /**
+ * @property {String} BEVEL
+ * @final
+ */
+ exports.ROUND = ROUND;
+ var BEVEL = 'bevel';
+ /**
+ * @property {String} MITER
+ * @final
+ */
+ exports.BEVEL = BEVEL;
+ var MITER = 'miter';
+ // COLOR
+ /**
+ * @property {String} RGB
+ * @final
+ */
+ exports.MITER = MITER;
+ var RGB = 'rgb';
+ /**
+ * HSB (hue, saturation, brightness) is a type of color model.
+ * You can learn more about it at
+ * HSB.
+ *
+ * @property {String} HSB
+ * @final
+ */
+ exports.RGB = RGB;
+ var HSB = 'hsb';
+ /**
+ * @property {String} HSL
+ * @final
+ */
+ exports.HSB = HSB;
+ var HSL = 'hsl';
+ // DOM EXTENSION
+ /**
+ * AUTO allows us to automatically set the width or height of an element (but not both),
+ * based on the current height and width of the element. Only one parameter can
+ * be passed to the size function as AUTO, at a time.
+ *
+ * @property {String} AUTO
+ * @final
+ */
+ exports.HSL = HSL;
+ var AUTO = 'auto';
+ /**
+ * @property {Number} ALT
+ * @final
+ */
+ // INPUT
+ exports.AUTO = AUTO;
+ var ALT = 18;
+ /**
+ * @property {Number} BACKSPACE
+ * @final
+ */
+ exports.ALT = ALT;
+ var BACKSPACE = 8;
+ /**
+ * @property {Number} CONTROL
+ * @final
+ */
+ exports.BACKSPACE = BACKSPACE;
+ var CONTROL = 17;
+ /**
+ * @property {Number} DELETE
+ * @final
+ */
+ exports.CONTROL = CONTROL;
+ var DELETE = 46;
+ /**
+ * @property {Number} DOWN_ARROW
+ * @final
+ */
+ exports.DELETE = DELETE;
+ var DOWN_ARROW = 40;
+ /**
+ * @property {Number} ENTER
+ * @final
+ */
+ exports.DOWN_ARROW = DOWN_ARROW;
+ var ENTER = 13;
+ /**
+ * @property {Number} ESCAPE
+ * @final
+ */
+ exports.ENTER = ENTER;
+ var ESCAPE = 27;
+ /**
+ * @property {Number} LEFT_ARROW
+ * @final
+ */
+ exports.ESCAPE = ESCAPE;
+ var LEFT_ARROW = 37;
+ /**
+ * @property {Number} OPTION
+ * @final
+ */
+ exports.LEFT_ARROW = LEFT_ARROW;
+ var OPTION = 18;
+ /**
+ * @property {Number} RETURN
+ * @final
+ */
+ exports.OPTION = OPTION;
+ var RETURN = 13;
+ /**
+ * @property {Number} RIGHT_ARROW
+ * @final
+ */
+ exports.RETURN = RETURN;
+ var RIGHT_ARROW = 39;
+ /**
+ * @property {Number} SHIFT
+ * @final
+ */
+ exports.RIGHT_ARROW = RIGHT_ARROW;
+ var SHIFT = 16;
+ /**
+ * @property {Number} TAB
+ * @final
+ */
+ exports.SHIFT = SHIFT;
+ var TAB = 9;
+ /**
+ * @property {Number} UP_ARROW
+ * @final
+ */
+ exports.TAB = TAB;
+ var UP_ARROW = 38;
+ // RENDERING
+ /**
+ * @property {String} BLEND
+ * @final
+ * @default source-over
+ */
+ exports.UP_ARROW = UP_ARROW;
+ var BLEND = 'source-over';
+ /**
+ * @property {String} REMOVE
+ * @final
+ * @default destination-out
+ */
+ exports.BLEND = BLEND;
+ var REMOVE = 'destination-out';
+ /**
+ * @property {String} ADD
+ * @final
+ * @default lighter
+ */
+ exports.REMOVE = REMOVE;
+ var ADD = 'lighter';
+ //ADD: 'add', //
+ //SUBTRACT: 'subtract', //
+ /**
+ * @property {String} DARKEST
+ * @final
+ */
+ exports.ADD = ADD;
+ var DARKEST = 'darken';
+ /**
+ * @property {String} LIGHTEST
+ * @final
+ * @default lighten
+ */
+ exports.DARKEST = DARKEST;
+ var LIGHTEST = 'lighten';
+ /**
+ * @property {String} DIFFERENCE
+ * @final
+ */
+ exports.LIGHTEST = LIGHTEST;
+ var DIFFERENCE = 'difference';
+ /**
+ * @property {String} SUBTRACT
+ * @final
+ */
+ exports.DIFFERENCE = DIFFERENCE;
+ var SUBTRACT = 'subtract';
+ /**
+ * @property {String} EXCLUSION
+ * @final
+ */
+ exports.SUBTRACT = SUBTRACT;
+ var EXCLUSION = 'exclusion';
+ /**
+ * @property {String} MULTIPLY
+ * @final
+ */
+ exports.EXCLUSION = EXCLUSION;
+ var MULTIPLY = 'multiply';
+ /**
+ * @property {String} SCREEN
+ * @final
+ */
+ exports.MULTIPLY = MULTIPLY;
+ var SCREEN = 'screen';
+ /**
+ * @property {String} REPLACE
+ * @final
+ * @default copy
+ */
+ exports.SCREEN = SCREEN;
+ var REPLACE = 'copy';
+ /**
+ * @property {String} OVERLAY
+ * @final
+ */
+ exports.REPLACE = REPLACE;
+ var OVERLAY = 'overlay';
+ /**
+ * @property {String} HARD_LIGHT
+ * @final
+ */
+ exports.OVERLAY = OVERLAY;
+ var HARD_LIGHT = 'hard-light';
+ /**
+ * @property {String} SOFT_LIGHT
+ * @final
+ */
+ exports.HARD_LIGHT = HARD_LIGHT;
+ var SOFT_LIGHT = 'soft-light';
+ /**
+ * @property {String} DODGE
+ * @final
+ * @default color-dodge
+ */
+ exports.SOFT_LIGHT = SOFT_LIGHT;
+ var DODGE = 'color-dodge';
+ /**
+ * @property {String} BURN
+ * @final
+ * @default color-burn
+ */
+ exports.DODGE = DODGE;
+ var BURN = 'color-burn';
+ // FILTERS
+ /**
+ * @property {String} THRESHOLD
+ * @final
+ */
+ exports.BURN = BURN;
+ var THRESHOLD = 'threshold';
+ /**
+ * @property {String} GRAY
+ * @final
+ */
+ exports.THRESHOLD = THRESHOLD;
+ var GRAY = 'gray';
+ /**
+ * @property {String} OPAQUE
+ * @final
+ */
+ exports.GRAY = GRAY;
+ var OPAQUE = 'opaque';
+ /**
+ * @property {String} INVERT
+ * @final
+ */
+ exports.OPAQUE = OPAQUE;
+ var INVERT = 'invert';
+ /**
+ * @property {String} POSTERIZE
+ * @final
+ */
+ exports.INVERT = INVERT;
+ var POSTERIZE = 'posterize';
+ /**
+ * @property {String} DILATE
+ * @final
+ */
+ exports.POSTERIZE = POSTERIZE;
+ var DILATE = 'dilate';
+ /**
+ * @property {String} ERODE
+ * @final
+ */
+ exports.DILATE = DILATE;
+ var ERODE = 'erode';
+ /**
+ * @property {String} BLUR
+ * @final
+ */
+ exports.ERODE = ERODE;
+ var BLUR = 'blur';
+ // TYPOGRAPHY
+ /**
+ * @property {String} NORMAL
+ * @final
+ */
+ exports.BLUR = BLUR;
+ var NORMAL = 'normal';
+ /**
+ * @property {String} ITALIC
+ * @final
+ */
+ exports.NORMAL = NORMAL;
+ var ITALIC = 'italic';
+ /**
+ * @property {String} BOLD
+ * @final
+ */
+ exports.ITALIC = ITALIC;
+ var BOLD = 'bold';
+ /**
+ * @property {String} BOLDITALIC
+ * @final
+ */
+ exports.BOLD = BOLD;
+ var BOLDITALIC = 'bold italic';
+ /**
+ * @property {String} CHAR
+ * @final
+ */
+ exports.BOLDITALIC = BOLDITALIC;
+ var CHAR = 'CHAR';
+ /**
+ * @property {String} WORD
+ * @final
+ */
+ exports.CHAR = CHAR;
+ var WORD = 'WORD';
+ // TYPOGRAPHY-INTERNAL
+ exports.WORD = WORD;
+ var _DEFAULT_TEXT_FILL = '#000000';
+ exports._DEFAULT_TEXT_FILL = _DEFAULT_TEXT_FILL;
+ var _DEFAULT_LEADMULT = 1.25;
+ exports._DEFAULT_LEADMULT = _DEFAULT_LEADMULT;
+ var _CTX_MIDDLE = 'middle';
+ // VERTICES
+ /**
+ * @property {String} LINEAR
+ * @final
+ */
+ exports._CTX_MIDDLE = _CTX_MIDDLE;
+ var LINEAR = 'linear';
+ /**
+ * @property {String} QUADRATIC
+ * @final
+ */
+ exports.LINEAR = LINEAR;
+ var QUADRATIC = 'quadratic';
+ /**
+ * @property {String} BEZIER
+ * @final
+ */
+ exports.QUADRATIC = QUADRATIC;
+ var BEZIER = 'bezier';
+ /**
+ * @property {String} CURVE
+ * @final
+ */
+ exports.BEZIER = BEZIER;
+ var CURVE = 'curve';
+ // WEBGL DRAWMODES
+ /**
+ * @property {String} STROKE
+ * @final
+ */
+ exports.CURVE = CURVE;
+ var STROKE = 'stroke';
+ /**
+ * @property {String} FILL
+ * @final
+ */
+ exports.STROKE = STROKE;
+ var FILL = 'fill';
+ /**
+ * @property {String} TEXTURE
+ * @final
+ */
+ exports.FILL = FILL;
+ var TEXTURE = 'texture';
+ /**
+ * @property {String} IMMEDIATE
+ * @final
+ */
+ exports.TEXTURE = TEXTURE;
+ var IMMEDIATE = 'immediate';
+ // WEBGL TEXTURE MODE
+ // NORMAL already exists for typography
+ /**
+ * @property {String} IMAGE
+ * @final
+ */
+ exports.IMMEDIATE = IMMEDIATE;
+ var IMAGE = 'image';
+ // WEBGL TEXTURE WRAP AND FILTERING
+ // LINEAR already exists above
+ /**
+ * @property {String} NEAREST
+ * @final
+ */
+ exports.IMAGE = IMAGE;
+ var NEAREST = 'nearest';
+ /**
+ * @property {String} REPEAT
+ * @final
+ */
+ exports.NEAREST = NEAREST;
+ var REPEAT = 'repeat';
+ /**
+ * @property {String} CLAMP
+ * @final
+ */
+ exports.REPEAT = REPEAT;
+ var CLAMP = 'clamp';
+ /**
+ * @property {String} MIRROR
+ * @final
+ */
+ exports.CLAMP = CLAMP;
+ var MIRROR = 'mirror';
+ // WEBGL GEOMETRY SHADING
+ /**
+ * @property {String} FLAT
+ * @final
+ */
+ exports.MIRROR = MIRROR;
+ var FLAT = 'flat';
+ /**
+ * @property {String} SMOOTH
+ * @final
+ */
+ exports.FLAT = FLAT;
+ var SMOOTH = 'smooth';
+ // DEVICE-ORIENTATION
+ /**
+ * @property {String} LANDSCAPE
+ * @final
+ */
+ exports.SMOOTH = SMOOTH;
+ var LANDSCAPE = 'landscape';
+ /**
+ * @property {String} PORTRAIT
+ * @final
+ */
+ exports.LANDSCAPE = LANDSCAPE;
+ var PORTRAIT = 'portrait';
+ // DEFAULTS
+ exports.PORTRAIT = PORTRAIT;
+ var _DEFAULT_STROKE = '#000000';
+ exports._DEFAULT_STROKE = _DEFAULT_STROKE;
+ var _DEFAULT_FILL = '#FFFFFF';
+ /**
+ * @property {String} GRID
+ * @final
+ */
+ exports._DEFAULT_FILL = _DEFAULT_FILL;
+ var GRID = 'grid';
+ /**
+ * @property {String} AXES
+ * @final
+ */
+ exports.GRID = GRID;
+ var AXES = 'axes';
+ /**
+ * @property {String} LABEL
+ * @final
+ */
+ exports.AXES = AXES;
+ var LABEL = 'label';
+ /**
+ * @property {String} FALLBACK
+ * @final
+ */
+ exports.LABEL = LABEL;
+ var FALLBACK = 'fallback';
+ /**
+ * @property {String} CONTAIN
+ * @final
+ */
+ exports.FALLBACK = FALLBACK;
+ var CONTAIN = 'contain';
+ /**
+ * @property {String} COVER
+ * @final
+ */
+ exports.CONTAIN = CONTAIN;
+ var COVER = 'cover';
+ /**
+ * @property {String} UNSIGNED_BYTE
+ * @final
+ */
+ exports.COVER = COVER;
+ var UNSIGNED_BYTE = 'unsigned-byte';
+ /**
+ * @property {String} UNSIGNED_INT
+ * @final
+ */
+ exports.UNSIGNED_BYTE = UNSIGNED_BYTE;
+ var UNSIGNED_INT = 'unsigned-int';
+ /**
+ * @property {String} FLOAT
+ * @final
+ */
+ exports.UNSIGNED_INT = UNSIGNED_INT;
+ var FLOAT = 'float';
+ /**
+ * @property {String} HALF_FLOAT
+ * @final
+ */
+ exports.FLOAT = FLOAT;
+ var HALF_FLOAT = 'half-float';
+ /**
+ * @property {String} RGBA
+ * @final
+ */
+ exports.HALF_FLOAT = HALF_FLOAT;
+ var RGBA = 'rgba';
+ exports.RGBA = RGBA;
+ },
+ {
+ }
+ ],
+ 292: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.search');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.search');
+ _dereq_('core-js/modules/es.string.split');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var C = _interopRequireWildcard(_dereq_('./constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Environment
+ * @submodule Environment
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+
+ var standardCursors = [
+ C.ARROW,
+ C.CROSS,
+ C.HAND,
+ C.MOVE,
+ C.TEXT,
+ C.WAIT
+ ];
+ _main.default.prototype._frameRate = 0;
+ _main.default.prototype._lastFrameTime = window.performance.now();
+ _main.default.prototype._targetFrameRate = 60;
+ var _windowPrint = window.print;
+ var windowPrintDisabled = false;
+ /**
+ * Displays text in the web browser's console.
+ *
+ * `print()` is helpful for printing values while debugging. Each call to
+ * `print()` creates a new line of text.
+ *
+ * Note: Call `print('\n')` to print a blank line. Calling `print()` without
+ * an argument opens the browser's dialog for printing documents.
+ *
+ * @method print
+ * @param {Any} contents content to print to the console.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Draw a red arc from 0˚ to 90˚.
+ * fill(255, 0, 0);
+ * arc(50, 50, 80, 80, 0, 90);
+ *
+ * // Use radians.
+ * angleMode(RADIANS);
+ *
+ * // Draw a blue arc from HALF_PI to PI.
+ * fill(0, 0, 255);
+ * arc(50, 50, 80, 80, HALF_PI, PI);
+ *
+ * describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Prints "hello, world" to the console.
+ * print('hello, world');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.print = function () {
+ if (!arguments.length) {
+ if (!windowPrintDisabled) {
+ _windowPrint();
+ if (window.confirm('You just tried to print the webpage. Do you want to prevent this from running again?')) {
+ windowPrintDisabled = true;
+ }
+ }
+ } else {
+ var _console;
+ (_console = console).log.apply(_console, arguments);
+ }
+ };
+ /**
+ * A `Number` variable that tracks the number of frames drawn since the sketch
+ * started.
+ *
+ * `frameCount`'s value is 0 inside setup(). It
+ * increments by 1 each time the code in draw()
+ * finishes executing.
+ *
+ * @property {Integer} frameCount
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * let name = 'ada';
+ * // Prints "hello, ada" to the console.
+ * print(`hello, ${name}`);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Display the value of
+ * // frameCount.
+ * textSize(30);
+ * textAlign(CENTER, CENTER);
+ * text(frameCount, 50, 50);
+ *
+ * describe('The number 0 written in black in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.frameCount = 0;
+ /**
+ * A `Number` variable that tracks the number of milliseconds it took to draw
+ * the last frame.
+ *
+ * `deltaTime` contains the amount of time it took
+ * draw() to execute during the previous frame. It's
+ * useful for simulating physics.
+ *
+ * @property {Integer} deltaTime
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Set the frameRate to 30.
+ * frameRate(30);
+ *
+ * textSize(30);
+ * textAlign(CENTER, CENTER);
+ *
+ * describe('A number written in black in the middle of a gray square. Its value increases rapidly.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Display the value of
+ * // frameCount.
+ * text(frameCount, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.deltaTime = 0;
+ /**
+ * A `Boolean` variable that's `true` if the browser is focused and `false` if
+ * not.
+ *
+ * Note: The browser window can only receive input if it's focused.
+ *
+ * @property {Boolean} focused
+ * @readOnly
+ * @example
+ *
+ * let x = 0;
+ * let speed = 0.05;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Set the frameRate to 30.
+ * frameRate(30);
+ *
+ * describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Use deltaTime to calculate
+ * // a change in position.
+ * let deltaX = speed * deltaTime;
+ *
+ * // Update the x variable.
+ * x += deltaX;
+ *
+ * // Reset x to 0 if it's
+ * // greater than 100.
+ * if (x > 100) {
+ * x = 0;
+ * }
+ *
+ * // Use x to set the circle's
+ * // position.
+ * circle(x, 50, 20);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.focused = document.hasFocus();
+ /**
+ * Changes the cursor's appearance.
+ *
+ * The first parameter, `type`, sets the type of cursor to display. The
+ * built-in options are `ARROW`, `CROSS`, `HAND`, `MOVE`, `TEXT`, and `WAIT`.
+ * `cursor()` also recognizes standard CSS cursor properties passed as
+ * strings: `'help'`, `'wait'`, `'crosshair'`, `'not-allowed'`, `'zoom-in'`,
+ * and `'grab'`. If the path to an image is passed, as in
+ * `cursor('assets/target.png')`, then the image will be used as the cursor.
+ * Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be at most 32 by 32 pixels large.
+ *
+ * The parameters `x` and `y` are optional. If an image is used for the
+ * cursor, `x` and `y` set the location pointed to within the image. They are
+ * both 0 by default, so the cursor points to the image's top-left corner. `x`
+ * and `y` must be less than the image's width and height, respectively.
+ *
+ * @method cursor
+ * @param {String|Constant} type Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
+ * Native CSS properties: 'grab', 'progress', and so on.
+ * Path to cursor image.
+ * @param {Number} [x] horizontal active spot of the cursor.
+ * @param {Number} [y] vertical active spot of the cursor.
+ * @example
+ *
+ * // Open this example in two separate browser
+ * // windows placed side-by-side to demonstrate.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A square changes color from green to red when the browser window is out of focus.');
+ * }
+ *
+ * function draw() {
+ * // Change the background color
+ * // when the browser window
+ * // goes in/out of focus.
+ * if (focused === true) {
+ * background(0, 255, 0);
+ * } else {
+ * background(255, 0, 0);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square. The cursor appears as crosshairs.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the cursor to crosshairs: +
+ * cursor(CROSS);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Divide the canvas into quadrants.
+ * line(50, 0, 50, 100);
+ * line(0, 50, 100, 50);
+ *
+ * // Change cursor based on mouse position.
+ * if (mouseX < 50 && mouseY < 50) {
+ * cursor(CROSS);
+ * } else if (mouseX > 50 && mouseY < 50) {
+ * cursor('progress');
+ * } else if (mouseX > 50 && mouseY > 50) {
+ * cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+ * } else {
+ * cursor('grab');
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.cursor = function (type, x, y) {
+ var cursor = 'auto';
+ var canvas = this._curElement.elt;
+ if (standardCursors.includes(type)) {
+ // Standard css cursor
+ cursor = type;
+ } else if (typeof type === 'string') {
+ var coords = '';
+ if (x && y && typeof x === 'number' && typeof y === 'number') {
+ // Note that x and y values must be unit-less positive integers < 32
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+ coords = ''.concat(x, ' ').concat(y);
+ }
+ if (type.substring(0, 7) === 'http://' || type.substring(0, 8) === 'https://') {
+ // Image (absolute url)
+ cursor = 'url('.concat(type, ') ').concat(coords, ', auto');
+ } else if (/\.(cur|jpg|jpeg|gif|png|CUR|JPG|JPEG|GIF|PNG)$/.test(type)) {
+ // Image file (relative path) - Separated for performance reasons
+ cursor = 'url('.concat(type, ') ').concat(coords, ', auto');
+ } else {
+ // Any valid string for the css cursor property
+ cursor = type;
+ }
+ }
+ canvas.style.cursor = cursor;
+ };
+ /**
+ * Sets the number of frames to draw per second.
+ *
+ * Calling `frameRate()` with one numeric argument, as in `frameRate(30)`,
+ * attempts to draw 30 frames per second (FPS). The target frame rate may not
+ * be achieved depending on the sketch's processing needs. Most computers
+ * default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are
+ * fast enough for smooth animations.
+ *
+ * Calling `frameRate()` without an argument returns the current frame rate.
+ * The value returned is an approximation.
+ *
+ * @method frameRate
+ * @param {Number} fps number of frames to draw per second.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Change the cursor's active spot
+ * // when the mouse is pressed.
+ * if (mouseIsPressed === true) {
+ * cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);
+ * } else {
+ * cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the x variable based
+ * // on the current frameCount.
+ * let x = frameCount % 100;
+ *
+ * // If the mouse is pressed,
+ * // decrease the frame rate.
+ * if (mouseIsPressed === true) {
+ * frameRate(10);
+ * } else {
+ * frameRate(60);
+ * }
+ *
+ * // Use x to set the circle's
+ * // position.
+ * circle(x, 50, 20);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method frameRate
+ * @return {Number} current frame rate.
+ */
+ _main.default.prototype.frameRate = function (fps) {
+ _main.default._validateParameters('frameRate', arguments);
+ if (typeof fps !== 'number' || fps < 0) {
+ return this._frameRate;
+ } else {
+ this._setProperty('_targetFrameRate', fps);
+ if (fps === 0) {
+ this._setProperty('_frameRate', fps);
+ }
+ return this;
+ }
+ };
+ /**
+ * Returns the current framerate.
+ *
+ * @private
+ * @return {Number} current frameRate
+ */
+ _main.default.prototype.getFrameRate = function () {
+ return this.frameRate();
+ };
+ /**
+ * Specifies the number of frames to be displayed every second. For example,
+ * the function call frameRate(30) will attempt to refresh 30 times a second.
+ * If the processor is not fast enough to maintain the specified rate, the
+ * frame rate will not be achieved. Setting the frame rate within setup() is
+ * recommended. The default rate is 60 frames per second.
+ *
+ * Calling `frameRate()` with no arguments returns the current frame rate.
+ *
+ * @private
+ * @param {Number} [fps] number of frames to be displayed every second
+ */
+ _main.default.prototype.setFrameRate = function (fps) {
+ return this.frameRate(fps);
+ };
+ /**
+ * Returns the target frame rate.
+ *
+ * The value is either the system frame rate or the last value passed to
+ * frameRate().
+ *
+ * @method getTargetFrameRate
+ * @return {Number} _targetFrameRate
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // If the mouse is pressed, do lots
+ * // of math to slow down drawing.
+ * if (mouseIsPressed === true) {
+ * for (let i = 0; i < 1000000; i += 1) {
+ * random();
+ * }
+ * }
+ *
+ * // Get the current frame rate
+ * // and display it.
+ * let fps = frameRate();
+ * text(fps, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.getTargetFrameRate = function () {
+ return this._targetFrameRate;
+ };
+ /**
+ * Hides the cursor from view.
+ *
+ * @method noCursor
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('The number 20 written in black on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the frame rate to 20.
+ * frameRate(20);
+ *
+ * // Get the target frame rate and
+ * // display it.
+ * let fps = getTargetFrameRate();
+ * text(fps, 43, 54);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noCursor = function () {
+ this._curElement.elt.style.cursor = 'none';
+ };
+ /**
+ * A `String` variable with the WebGL version in use.
+ *
+ * `webglVersion`'s value equals one of the following string constants:
+ *
+ * - `WEBGL2` whose value is `'webgl2'`,
+ * - `WEBGL` whose value is `'webgl'`, or
+ * - `P2D` whose value is `'p2d'`. This is the default for 2D sketches.
+ *
+ * See setAttributes() for ways to set the
+ * WebGL version.
+ *
+ * @property {String} webglVersion
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * // Hide the cursor.
+ * noCursor();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * circle(mouseX, mouseY, 10);
+ *
+ * describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Display the current WebGL version.
+ * text(webglVersion, 42, 54);
+ *
+ * describe('The text "p2d" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let font;
+ *
+ * function preload() {
+ * // Load a font to use.
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * // Create a canvas using WEBGL mode.
+ * createCanvas(100, 50, WEBGL);
+ * background(200);
+ *
+ * // Display the current WebGL version.
+ * fill(0);
+ * textFont(font);
+ * text(webglVersion, -15, 5);
+ *
+ * describe('The text "webgl2" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.webglVersion = C.P2D;
+ /**
+ * A `Number` variable that stores the width of the screen display.
+ *
+ * `displayWidth` is useful for running full-screen programs. Its value
+ * depends on the current pixelDensity().
+ *
+ * Note: The actual screen width can be computed as
+ * `displayWidth * pixelDensity()`.
+ *
+ * @property {Number} displayWidth
+ * @readOnly
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * // Load a font to use.
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * // Create a canvas using WEBGL mode.
+ * createCanvas(100, 50, WEBGL);
+ *
+ * // Set WebGL to version 1.
+ * setAttributes({ version: 1 });
+ *
+ * background(200);
+ *
+ * // Display the current WebGL version.
+ * fill(0);
+ * textFont(font);
+ * text(webglVersion, -14, 5);
+ *
+ * describe('The text "webgl" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ */
+ _main.default.prototype.displayWidth = screen.width;
+ /**
+ * A `Number` variable that stores the height of the screen display.
+ *
+ * `displayHeight` is useful for running full-screen programs. Its value
+ * depends on the current pixelDensity().
+ *
+ * Note: The actual screen height can be computed as
+ * `displayHeight * pixelDensity()`.
+ *
+ * @property {Number} displayHeight
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * // Set the canvas' width and height
+ * // using the display's dimensions.
+ * createCanvas(displayWidth, displayHeight);
+ *
+ * background(200);
+ *
+ * describe('A gray canvas that is the same size as the display.');
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ */
+ _main.default.prototype.displayHeight = screen.height;
+ /**
+ * A `Number` variable that stores the width of the browser's viewport.
+ *
+ * The layout viewport
+ * is the area within the browser that's available for drawing.
+ *
+ * @property {Number} windowWidth
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * // Set the canvas' width and height
+ * // using the display's dimensions.
+ * createCanvas(displayWidth, displayHeight);
+ *
+ * background(200);
+ *
+ * describe('A gray canvas that is the same size as the display.');
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ */
+ _main.default.prototype.windowWidth = getWindowWidth();
+ /**
+ * A `Number` variable that stores the height of the browser's viewport.
+ *
+ * The layout viewport
+ * is the area within the browser that's available for drawing.
+ *
+ * @property {Number} windowHeight
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * // Set the canvas' width and height
+ * // using the browser's dimensions.
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * background(200);
+ *
+ * describe('A gray canvas that takes up the entire browser window.');
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ */
+ _main.default.prototype.windowHeight = getWindowHeight();
+ /**
+ * A function that's called when the browser window is resized.
+ *
+ * Code placed in the body of `windowResized()` will run when the
+ * browser window's size changes. It's a good place to call
+ * resizeCanvas() or make other
+ * adjustments to accommodate the new window size.
+ *
+ * The `event` parameter is optional. If added to the function declaration, it
+ * can be used for debugging or other purposes.
+ *
+ * @method windowResized
+ * @param {UIEvent} [event] optional resize Event.
+ * @example
+ *
+ * function setup() {
+ * // Set the canvas' width and height
+ * // using the browser's dimensions.
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * background(200);
+ *
+ * describe('A gray canvas that takes up the entire browser window.');
+ * }
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ *
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a circle at the center.
+ * circle(width / 2, height / 2, 50);
+ * }
+ *
+ * // Resize the canvas when the
+ * // browser's size changes.
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ */
+ _main.default.prototype._onresize = function (e) {
+ this._setProperty('windowWidth', getWindowWidth());
+ this._setProperty('windowHeight', getWindowHeight());
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ if (typeof context.windowResized === 'function') {
+ executeDefault = context.windowResized(e);
+ if (executeDefault !== undefined && !executeDefault) {
+ e.preventDefault();
+ }
+ }
+ };
+ function getWindowWidth() {
+ return window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body && document.body.clientWidth || 0;
+ }
+ function getWindowHeight() {
+ return window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body && document.body.clientHeight || 0;
+ } /**
+ * A `Number` variable that stores the width of the canvas in pixels.
+ *
+ * `width`'s default value is 100. Calling
+ * createCanvas() or
+ * resizeCanvas() changes the value of
+ * `width`. Calling noCanvas() sets its value to
+ * 0.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * describe('A gray canvas that takes up the entire browser window. It changes size to match the browser window.');
+ * }
+ *
+ * function windowResized(event) {
+ * // Resize the canvas when the
+ * // browser's size changes.
+ * resizeCanvas(windowWidth, windowHeight);
+ *
+ * // Print the resize event to the console for debugging.
+ * print(event);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Display the canvas' width.
+ * text(width, 42, 54);
+ *
+ * describe('The number 100 written in black on a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(50, 100);
+ *
+ * background(200);
+ *
+ * // Display the canvas' width.
+ * text(width, 21, 54);
+ *
+ * describe('The number 50 written in black on a gray rectangle.');
+ * }
+ *
+ *
+ *
+ *
+ * @property {Number} width
+ * @readOnly
+ */
+
+ _main.default.prototype.width = 0;
+ /**
+ * A `Number` variable that stores the height of the canvas in pixels.
+ *
+ * `height`'s default value is 100. Calling
+ * createCanvas() or
+ * resizeCanvas() changes the value of
+ * `height`. Calling noCanvas() sets its value to
+ * 0.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Display the canvas' width.
+ * text(width, 42, 54);
+ *
+ * describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
+ * }
+ *
+ * // If the mouse is pressed, reisze
+ * // the canvas and display its new
+ * // width.
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * resizeCanvas(50, 100);
+ * background(200);
+ * text(width, 21, 54);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Display the canvas' height.
+ * text(height, 42, 54);
+ *
+ * describe('The number 100 written in black on a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 50);
+ *
+ * background(200);
+ *
+ * // Display the canvas' height.
+ * text(height, 42, 27);
+ *
+ * describe('The number 50 written in black on a gray rectangle.');
+ * }
+ *
+ *
+ *
+ *
+ * @property {Number} height
+ * @readOnly
+ */
+ _main.default.prototype.height = 0;
+ /**
+ * Toggles full-screen mode or returns the current mode.
+ *
+ * Calling `fullscreen(true)` makes the sketch full-screen. Calling
+ * `fullscreen(false)` makes the sketch its original size.
+ *
+ * Calling `fullscreen()` without an argument returns `true` if the sketch
+ * is in full-screen mode and `false` if not.
+ *
+ * Note: Due to browser restrictions, `fullscreen()` can only be called with
+ * user input such as a mouse press.
+ *
+ * @method fullscreen
+ * @param {Boolean} [val] whether the sketch should be in fullscreen mode.
+ * @return {Boolean} current fullscreen state.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Display the canvas' height.
+ * text(height, 42, 54);
+ *
+ * describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
+ * }
+ *
+ * // If the mouse is pressed, reisze
+ * // the canvas and display its new
+ * // height.
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * resizeCanvas(100, 50);
+ * background(200);
+ * text(height, 42, 27);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.fullscreen = function (val) {
+ _main.default._validateParameters('fullscreen', arguments);
+ // no arguments, return fullscreen or not
+ if (typeof val === 'undefined') {
+ return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+ } else {
+ // otherwise set to fullscreen or not
+ if (val) {
+ launchFullscreen(document.documentElement);
+ } else {
+ exitFullscreen();
+ }
+ }
+ };
+ /**
+ * Sets the pixel density or returns the current density.
+ *
+ * Computer displays are grids of little lights called pixels. A
+ * display's pixel density describes how many pixels it packs into an
+ * area. Displays with smaller pixels have a higher pixel density and create
+ * sharper images.
+ *
+ * `pixelDensity()` sets the pixel scaling for high pixel density displays.
+ * By default, the pixel density is set to match the display's density.
+ * Calling `pixelDensity(1)` turn this off.
+ *
+ * Calling `pixelDensity()` without an argument returns the current pixel
+ * density.
+ *
+ * @method pixelDensity
+ * @param {Number} [val] desired pixel density.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ *
+ * describe('A gray canvas that switches between default and full-screen display when clicked.');
+ * }
+ *
+ * // If the mouse is pressed,
+ * // toggle full-screen mode.
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * let fs = fullscreen();
+ * fullscreen(!fs);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Set the pixel density to 1.
+ * pixelDensity(1);
+ *
+ * // Create a canvas and draw
+ * // a circle.
+ * createCanvas(100, 100);
+ * background(200);
+ * circle(50, 50, 70);
+ *
+ * describe('A fuzzy white circle on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method pixelDensity
+ * @returns {Number} current pixel density of the sketch.
+ */
+ _main.default.prototype.pixelDensity = function (val) {
+ _main.default._validateParameters('pixelDensity', arguments);
+ var returnValue;
+ if (typeof val === 'number') {
+ if (val !== this._pixelDensity) {
+ this._pixelDensity = this._maxAllowedPixelDimensions = val;
+ }
+ returnValue = this;
+ this.resizeCanvas(this.width, this.height, true); // as a side effect, it will clear the canvas
+ } else {
+ returnValue = this._pixelDensity;
+ }
+ return returnValue;
+ };
+ /**
+ * Returns the display's current pixel density.
+ *
+ * @method displayDensity
+ * @returns {Number} current pixel density of the display.
+ * @example
+ *
+ * function setup() {
+ * // Set the pixel density to 3.
+ * pixelDensity(3);
+ *
+ * // Create a canvas, paint the
+ * // background, and draw a
+ * // circle.
+ * createCanvas(100, 100);
+ * background(200);
+ * circle(50, 50, 70);
+ *
+ * describe('A sharp white circle on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.displayDensity = function () {
+ return window.devicePixelRatio;
+ };
+ function launchFullscreen(element) {
+ var enabled = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
+ if (!enabled) {
+ throw new Error('Fullscreen not enabled in this browser.');
+ }
+ if (element.requestFullscreen) {
+ element.requestFullscreen();
+ } else if (element.mozRequestFullScreen) {
+ element.mozRequestFullScreen();
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen();
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen();
+ }
+ }
+ function exitFullscreen() {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ }
+ } /**
+ * Returns the sketch's current
+ * URL
+ * as a `String`.
+ *
+ * @method getURL
+ * @return {String} url
+ * @example
+ *
+ * function setup() {
+ * // Set the pixel density to 1.
+ * pixelDensity(1);
+ *
+ * // Create a canvas and draw
+ * // a circle.
+ * createCanvas(100, 100);
+ * background(200);
+ * circle(50, 50, 70);
+ *
+ * describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');
+ * }
+ *
+ * function mousePressed() {
+ * // Get the current display density.
+ * let d = displayDensity();
+ *
+ * // Use the display density to set
+ * // the sketch's pixel density.
+ * pixelDensity(d);
+ *
+ * // Paint the background and
+ * // draw a circle.
+ * background(200);
+ * circle(50, 50, 70);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.getURL = function () {
+ return location.href;
+ };
+ /**
+ * Returns the current
+ * URL
+ * path as an `Array` of `String`s.
+ *
+ * For example, consider a sketch hosted at the URL
+ * `https://example.com/sketchbook`. Calling `getURLPath()` returns
+ * `['sketchbook']`. For a sketch hosted at the URL
+ * `https://example.com/sketchbook/monday`, `getURLPath()` returns
+ * `['sketchbook', 'monday']`.
+ *
+ * @method getURLPath
+ * @return {String[]} path components.
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Get the sketch's URL
+ * // and display it.
+ * let url = getURL();
+ * textWrap(CHAR);
+ * text(url, 0, 40, 100);
+ *
+ * describe('The URL "https://p5js.org/reference/#/p5/getURL" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.getURLPath = function () {
+ return location.pathname.split('/').filter(function (v) {
+ return v !== '';
+ });
+ };
+ /**
+ * Returns the current
+ * URL parameters
+ * in an `Object`.
+ *
+ * For example, calling `getURLParams()` in a sketch hosted at the URL
+ * `http://p5js.org?year=2014&month=May&day=15` returns
+ * `{ year: 2014, month: 'May', day: 15 }`.
+ *
+ * @method getURLParams
+ * @return {Object} URL params
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Get the sketch's URL path
+ * // and display the first
+ * // part.
+ * let path = getURLPath();
+ * text(path[0], 25, 54);
+ *
+ * describe('The word "reference" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ */
+ _main.default.prototype.getURLParams = function () {
+ var re = /[?&]([^&=]+)(?:[&=])([^&=]+)/gim;
+ var m;
+ var v = {
+ };
+ while ((m = re.exec(location.search)) != null) {
+ if (m.index === re.lastIndex) {
+ re.lastIndex++;
+ }
+ v[m[1]] = m[2];
+ }
+ return v;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ './constants': 291,
+ './main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.filter': 174,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.search': 220,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 293: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ // This contains a data table used by ./fes_core.js/fesErrorMonitor().
+ //
+ // Note: Different browsers use different error strings for the same error.
+ // Extracting info from the browser error messages is easier and cleaner
+ // if we have a predefined lookup. This file serves as that lookup.
+ // Using this lookup we match the errors obtained from the browser, classify
+ // them into types and extract the required information.
+ // The FES can use the extracted info to generate a friendly error message
+ // for the matching error.
+ var strings = {
+ ReferenceError: [
+ {
+ msg: '{{}} is not defined',
+ type: 'NOTDEFINED',
+ browser: 'all'
+ },
+ {
+ msg: 'Can\'t find variable: {{}}',
+ type: 'NOTDEFINED',
+ browser: 'Safari'
+ },
+ {
+ msg: 'Cannot access \'{{.}}\' before initialization',
+ type: 'CANNOTACCESS',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'can\'t access lexical declaration \'{{.}}\' before initialization',
+ type: 'CANNOTACCESS',
+ browser: 'Firefox'
+ }
+ ],
+ SyntaxError: [
+ {
+ msg: 'illegal character',
+ type: 'INVALIDTOKEN',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Invalid character',
+ type: 'INVALIDTOKEN',
+ browser: 'Safari'
+ },
+ {
+ msg: 'Invalid or unexpected token',
+ type: 'INVALIDTOKEN',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'Unexpected token \'{{.}}\'',
+ type: 'UNEXPECTEDTOKEN',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'expected {{.}}, got \'{{.}}\'',
+ type: 'UNEXPECTEDTOKEN',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'Identifier \'{{.}}\' has already been declared',
+ type: 'REDECLAREDVARIABLE',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'redeclaration of {} {{.}}',
+ type: 'REDECLAREDVARIABLE',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Missing initializer in const declaration',
+ type: 'MISSINGINITIALIZER',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'missing = in const declaration',
+ type: 'MISSINGINITIALIZER',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Illegal return statement',
+ type: 'BADRETURNORYIELD',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'return not in function',
+ type: 'BADRETURNORYIELD',
+ browser: 'Firefox'
+ }
+ ],
+ TypeError: [
+ {
+ msg: '{{.}} is not a function',
+ type: 'NOTFUNC',
+ browser: 'all'
+ },
+ {
+ msg: 'Cannot read {{.}} null',
+ type: 'READNULL',
+ browser: 'Chrome'
+ },
+ {
+ msg: '{{.}} is null',
+ type: 'READNULL',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Cannot read {{.}} undefined',
+ type: 'READUDEFINED',
+ browser: 'Chrome'
+ },
+ {
+ msg: '{{.}} is undefined',
+ type: 'READUDEFINED',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Assignment to constant variable',
+ type: 'CONSTASSIGN',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'invalid assignment to const \'{{.}}\'',
+ type: 'CONSTASSIGN',
+ browser: 'Firefox'
+ }
+ ]
+ };
+ var _default = strings;
+ exports.default = _default;
+ },
+ {
+ }
+ ],
+ 294: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-names');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.starts-with');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-names');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.starts-with');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var _internationalization = _dereq_('../internationalization');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _slicedToArray(arr, i) {
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+ }
+ function _nonIterableRest() {
+ throw new TypeError('Invalid attempt to destructure non-iterable instance');
+ }
+ function _iterableToArrayLimit(arr, i) {
+ if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === '[object Arguments]')) {
+ return;
+ }
+ var _arr = [
+ ];
+ var _n = true;
+ var _d = false;
+ var _e = undefined;
+ try {
+ for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+ _arr.push(_s.value);
+ if (i && _arr.length === i) break;
+ }
+ } catch (err) {
+ _d = true;
+ _e = err;
+ } finally {
+ try {
+ if (!_n && _i['return'] != null) _i['return']();
+ } finally {
+ if (_d) throw _e;
+ }
+ }
+ return _arr;
+ }
+ function _arrayWithHoles(arr) {
+ if (Array.isArray(arr)) return arr;
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @for p5
+ * @requires core
+ *
+ * This is the main file for the Friendly Error System (FES), containing
+ * the core as well as miscellaneous functionality of the FES. Here is a
+ * brief outline of the functions called in this system.
+ *
+ * The FES may be invoked by a call to either
+ * (1) _validateParameters, (2) _friendlyFileLoadError, (3) _friendlyError,
+ * (4) helpForMisusedAtTopLevelCode, or (5) _fesErrorMonitor.
+ *
+ * _validateParameters is located in validate_params.js along with other code
+ * used for parameter validation.
+ * _friendlyFileLoadError is located in file_errors.js along with other code
+ * used for dealing with file load errors.
+ * Apart from this, there's also a file stacktrace.js, which contains the code
+ * to parse the error stack, borrowed from:
+ * https://github.com/stacktracejs/stacktrace.js
+ *
+ * For more detailed information on the FES functions, including the call
+ * sequence of each function, please look at the FES Reference + Dev Notes:
+ * https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md
+ */
+ // p5.js blue, p5.js orange, auto dark green; fallback p5.js darkened magenta
+ // See testColors below for all the color codes and names
+
+ var typeColors = [
+ '#2D7BB6',
+ '#EE9900',
+ '#4DB200',
+ '#C83C00'
+ ];
+ var misusedAtTopLevelCode = null;
+ var defineMisusedAtTopLevelCode = null;
+ // the threshold for the maximum allowed levenshtein distance
+ // used in misspelling detection
+ var EDIT_DIST_THRESHOLD = 2;
+ // to enable or disable styling (color, font-size, etc. ) for fes messages
+ var ENABLE_FES_STYLING = false;
+ if (typeof IS_MINIFIED !== 'undefined') {
+ _main.default._friendlyError = _main.default._checkForUserDefinedFunctions = _main.default._fesErrorMonitor = function () {
+ };
+ } else {
+ var doFriendlyWelcome = false; // TEMP until we get it all working LM
+ var errorTable = _dereq_('./browser_errors').default;
+ // -- Borrowed from jQuery 1.11.3 --
+ var class2type = {
+ };
+ var _toString = class2type.toString;
+ var names = [
+ 'Boolean',
+ 'Number',
+ 'String',
+ 'Function',
+ 'Array',
+ 'Date',
+ 'RegExp',
+ 'Object',
+ 'Error'
+ ];
+ for (var n = 0; n < names.length; n++) {
+ class2type['[object '.concat(names[n], ']')] = names[n].toLowerCase();
+ }
+ var getType = function getType(obj) {
+ if (obj == null) {
+ return ''.concat(obj);
+ }
+ return _typeof(obj) === 'object' || typeof obj === 'function' ? class2type[_toString.call(obj)] || 'object' : _typeof(obj);
+ };
+ // -- End borrow --
+ // entry points into user-defined code
+ var entryPoints = [
+ 'setup',
+ 'draw',
+ 'preload',
+ 'deviceMoved',
+ 'deviceTurned',
+ 'deviceShaken',
+ 'doubleClicked',
+ 'mousePressed',
+ 'mouseReleased',
+ 'mouseMoved',
+ 'mouseDragged',
+ 'mouseClicked',
+ 'mouseWheel',
+ 'touchStarted',
+ 'touchMoved',
+ 'touchEnded',
+ 'keyPressed',
+ 'keyReleased',
+ 'keyTyped',
+ 'windowResized'
+ ];
+ var friendlyWelcome = function friendlyWelcome() {
+ // p5.js brand - magenta: #ED225D
+ //const astrixBgColor = 'transparent';
+ //const astrixTxtColor = '#ED225D';
+ //const welcomeBgColor = '#ED225D';
+ //const welcomeTextColor = 'white';
+ var welcomeMessage = (0, _internationalization.translator) ('fes.pre', {
+ message: (0, _internationalization.translator) ('fes.welcome')
+ });
+ console.log(' _ \n' + ' /\\| |/\\ \n' + ' \\ ` \' / \n' + ' / , . \\ \n' + ' \\/|_|\\/ ' + '\n\n' + welcomeMessage);
+ };
+ /**
+ * Takes a message and a p5 function func, and adds a link pointing to
+ * the reference documentation of func at the end of the message
+ *
+ * @method mapToReference
+ * @private
+ * @param {String} message the words to be said
+ * @param {String} [func] the name of function
+ *
+ * @returns {String}
+ */
+ var mapToReference = function mapToReference(message, func) {
+ var msgWithReference = '';
+ if (func == null || func.substring(0, 4) === 'load') {
+ msgWithReference = message;
+ } else {
+ var methodParts = func.split('.');
+ var referenceSection = methodParts.length > 1 ? ''.concat(methodParts[0], '.').concat(methodParts[1]) : 'p5';
+ var funcName = methodParts.length === 1 ? func : methodParts.slice(2).join('/');
+ //Whenever func having p5.[Class] is encountered, we need to have the error link as mentioned below else different link
+ funcName.startsWith('p5.') ? msgWithReference = ''.concat(message, ' (http://p5js.org/reference/#/').concat(referenceSection, '.').concat(funcName, ')') : msgWithReference = ''.concat(message, ' (http://p5js.org/reference/#/').concat(referenceSection, '/').concat(funcName, ')');
+ }
+ return msgWithReference;
+ };
+ /**
+ * Prints out a fancy, colorful message to the console log
+ * Attaches Friendly Errors prefix [fes.pre] to the message.
+ *
+ * @method _report
+ * @private
+ * @param {String} message Message to be printed
+ * @param {String} [func] Name of function
+ * @param {Number|String} [color] CSS color code
+ *
+ * @return console logs
+ */
+ _main.default._report = function (message, func, color) {
+ // if p5._fesLogger is set ( i.e we are running tests ), use that
+ // instead of console.log
+ var log = _main.default._fesLogger == null ? console.log.bind(console) : _main.default._fesLogger;
+ if (doFriendlyWelcome) {
+ friendlyWelcome();
+ doFriendlyWelcome = false;
+ }
+ if ('undefined' === getType(color)) {
+ color = '#B40033'; // dark magenta
+ } else if (getType(color) === 'number') {
+ // Type to color
+ color = typeColors[color];
+ } // Add a link to the reference docs of func at the end of the message
+
+ message = mapToReference(message, func);
+ var style = [
+ 'color: '.concat(color),
+ 'font-family: Arial',
+ 'font-size: larger'
+ ];
+ var prefixedMsg = (0, _internationalization.translator) ('fes.pre', {
+ message: message
+ });
+ if (ENABLE_FES_STYLING) {
+ log('%c' + prefixedMsg, style.join(';'));
+ } else {
+ log(prefixedMsg);
+ }
+ };
+ /**
+ * This is a generic method that can be called from anywhere in the p5
+ * library to alert users to a common error.
+ *
+ * @method _friendlyError
+ * @private
+ * @param {String} message Message to be printed
+ * @param {String} [func] Name of the function linked to error
+ * @param {Number|String} [color] CSS color code
+ */
+ _main.default._friendlyError = function (message, func, color) {
+ _main.default._report(message, func, color);
+ };
+ /**
+ * This is called internally if there is an error with autoplay. Generates
+ * and prints a friendly error message [fes.autoplay].
+ *
+ * @method _friendlyAutoplayError
+ * @private
+ */
+ _main.default._friendlyAutoplayError = function (src) {
+ var message = (0, _internationalization.translator) ('fes.autoplay', {
+ src: src,
+ url: 'https://developer.mozilla.org/docs/Web/Media/Autoplay_guide'
+ });
+ console.log((0, _internationalization.translator) ('fes.pre', {
+ message: message
+ }));
+ };
+ /**
+ * Measures dissimilarity between two strings by calculating
+ * the Levenshtein distance.
+ *
+ * If the "distance" between them is small enough, it is
+ * reasonable to think that one is the misspelled version of the other.
+ *
+ * Specifically, this uses the Wagner–Fischer algorithm.
+ * @method computeEditDistance
+ * @private
+ * @param {String} w1 the first word
+ * @param {String} w2 the second word
+ *
+ * @returns {Number} the "distance" between the two words, a smaller value
+ * indicates that the words are similar
+ */
+ var computeEditDistance = function computeEditDistance(w1, w2) {
+ var l1 = w1.length,
+ l2 = w2.length;
+ if (l1 === 0) return w2;
+ if (l2 === 0) return w1;
+ var prev = [
+ ];
+ var cur = [
+ ];
+ for (var j = 0; j < l2 + 1; j++) {
+ cur[j] = j;
+ }
+ prev = cur;
+ for (var i = 1; i < l1 + 1; i++) {
+ cur = [
+ ];
+ for (var _j = 0; _j < l2 + 1; _j++) {
+ if (_j === 0) {
+ cur[_j] = i;
+ } else {
+ var a1 = w1[i - 1],
+ a2 = w2[_j - 1];
+ var temp = 999999;
+ var cost = a1.toLowerCase() === a2.toLowerCase() ? 0 : 1;
+ temp = temp > cost + prev[_j - 1] ? cost + prev[_j - 1] : temp;
+ temp = temp > 1 + cur[_j - 1] ? 1 + cur[_j - 1] : temp;
+ temp = temp > 1 + prev[_j] ? 1 + prev[_j] : temp;
+ cur[_j] = temp;
+ }
+ }
+ prev = cur;
+ }
+ return cur[l2];
+ };
+ /**
+ * Checks capitalization for user defined functions.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.checkUserDefinedFns".
+ *
+ * @method checkForUserDefinedFunctions
+ * @private
+ * @param {*} context Current default context. Set to window in
+ * "global mode" and to a p5 instance in "instance mode"
+ */
+ var checkForUserDefinedFunctions = function checkForUserDefinedFunctions(context) {
+ if (_main.default.disableFriendlyErrors) return;
+ // if using instance mode, this function would be called with the current
+ // instance as context
+ var instanceMode = context instanceof _main.default;
+ context = instanceMode ? context : window;
+ var fnNames = entryPoints;
+ var fxns = {
+ };
+ // lowercasename -> actualName mapping
+ fnNames.forEach(function (symbol) {
+ fxns[symbol.toLowerCase()] = symbol;
+ });
+ for (var _i = 0, _Object$keys = Object.keys(context); _i < _Object$keys.length; _i++) {
+ var prop = _Object$keys[_i];
+ var lowercase = prop.toLowerCase();
+ // check if the lowercase property name has an entry in fxns, if the
+ // actual name with correct capitalization doesnt exist in context,
+ // and if the user-defined symbol is of the type function
+ if (fxns[lowercase] && !context[fxns[lowercase]] && typeof context[prop] === 'function') {
+ var msg = (0, _internationalization.translator) ('fes.checkUserDefinedFns', {
+ name: prop,
+ actualName: fxns[lowercase]
+ });
+ _main.default._friendlyError(msg, fxns[lowercase]);
+ }
+ }
+ };
+ /**
+ * Compares the symbol caught in the ReferenceError to everything in
+ * misusedAtTopLevel ( all public p5 properties ).
+ *
+ * Generates and prints a friendly error message using key: "fes.misspelling".
+ *
+ * @method handleMisspelling
+ * @private
+ * @param {String} errSym Symbol to whose spelling to check
+ * @param {Error} error ReferenceError object
+ *
+ * @returns {Boolean} tell whether error was likely due to typo
+ */
+ var handleMisspelling = function handleMisspelling(errSym, error) {
+ if (!misusedAtTopLevelCode) {
+ defineMisusedAtTopLevelCode();
+ }
+ var distanceMap = {
+ };
+ var min = 999999;
+ // compute the levenshtein distance for the symbol against all known
+ // public p5 properties. Find the property with the minimum distance
+ misusedAtTopLevelCode.forEach(function (symbol) {
+ var dist = computeEditDistance(errSym, symbol.name);
+ if (distanceMap[dist]) distanceMap[dist].push(symbol);
+ else distanceMap[dist] = [
+ symbol
+ ];
+ if (dist < min) min = dist;
+ });
+ // if the closest match has more "distance" than the max allowed threshold
+ if (min > Math.min(EDIT_DIST_THRESHOLD, errSym.length)) return false;
+ // Show a message only if the caught symbol and the matched property name
+ // differ in their name ( either letter difference or difference of case )
+ var matchedSymbols = distanceMap[min].filter(function (symbol) {
+ return symbol.name !== errSym;
+ });
+ if (matchedSymbols.length !== 0) {
+ var parsed = _main.default._getErrorStackParser().parse(error);
+ var locationObj;
+ if (parsed && parsed[0] && parsed[0].fileName && parsed[0].lineNumber && parsed[0].columnNumber) {
+ locationObj = {
+ location: ''.concat(parsed[0].fileName, ':').concat(parsed[0].lineNumber, ':').concat(parsed[0].columnNumber),
+ file: parsed[0].fileName.split('/').slice( - 1),
+ line: parsed[0].lineNumber
+ };
+ }
+ var msg;
+ if (matchedSymbols.length === 1) {
+ // To be used when there is only one closest match. The count parameter
+ // allows i18n to pick between the keys "fes.misspelling" and
+ // "fes.misspelling_plural"
+ msg = (0, _internationalization.translator) ('fes.misspelling', {
+ name: errSym,
+ actualName: matchedSymbols[0].name,
+ type: matchedSymbols[0].type,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : '',
+ count: matchedSymbols.length
+ });
+ } else {
+ // To be used when there are multiple closest matches. Gives each
+ // suggestion on its own line, the function name followed by a link to
+ // reference documentation
+ var suggestions = matchedSymbols.map(function (symbol) {
+ var message = '▶️ ' + symbol.name + (symbol.type === 'function' ? '()' : '');
+ return mapToReference(message, symbol.name);
+ }).join('\n');
+ msg = (0, _internationalization.translator) ('fes.misspelling', {
+ name: errSym,
+ suggestions: suggestions,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : '',
+ count: matchedSymbols.length
+ });
+ } // If there is only one closest match, tell _friendlyError to also add
+ // a link to the reference documentation. In case of multiple matches,
+ // this is already done in the suggestions variable, one link for each
+ // suggestion.
+
+ _main.default._friendlyError(msg, matchedSymbols.length === 1 ? matchedSymbols[0].name : undefined);
+ return true;
+ }
+ return false;
+ };
+ /**
+ * Prints a friendly stacktrace for user-written functions for "global" errors
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.globalErrors.stackTop", "fes.globalErrors.stackSubseq".
+ *
+ * @method printFriendlyStack
+ * @private
+ * @param {Array} friendlyStack
+ */
+ var printFriendlyStack = function printFriendlyStack(friendlyStack) {
+ var log = _main.default._fesLogger && typeof _main.default._fesLogger === 'function' ? _main.default._fesLogger : console.log.bind(console);
+ if (friendlyStack.length > 1) {
+ var stacktraceMsg = '';
+ friendlyStack.forEach(function (frame, idx) {
+ var location = ''.concat(frame.fileName, ':').concat(frame.lineNumber, ':').concat(frame.columnNumber);
+ var frameMsg,
+ translationObj = {
+ func: frame.functionName,
+ line: frame.lineNumber,
+ location: location,
+ file: frame.fileName.split('/').slice( - 1)
+ };
+ if (idx === 0) {
+ frameMsg = (0, _internationalization.translator) ('fes.globalErrors.stackTop', translationObj);
+ } else {
+ frameMsg = (0, _internationalization.translator) ('fes.globalErrors.stackSubseq', translationObj);
+ }
+ stacktraceMsg += frameMsg;
+ });
+ log(stacktraceMsg);
+ }
+ };
+ /**
+ * Takes a stacktrace array and filters out all frames that show internal p5
+ * details.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.wrongPreload", "fes.libraryError".
+ *
+ * The processed stack is used to find whether the error happened internally
+ * within the library, and if the error was due to a non-loadX() method
+ * being used in preload.
+ *
+ * "Internally" here means that the exact location of the error (the top of
+ * the stack) is a piece of code written in the p5.js library (which may or
+ * may not have been called from the user's sketch).
+ *
+ * @method processStack
+ * @private
+ * @param {Error} error
+ * @param {Array} stacktrace
+ *
+ * @returns {Array} An array with two elements, [isInternal, friendlyStack]
+ * isInternal: a boolean value indicating whether the error
+ * happened internally
+ * friendlyStack: the filtered (simplified) stacktrace
+ */
+ var processStack = function processStack(error, stacktrace) {
+ // cannot process a stacktrace that doesn't exist
+ if (!stacktrace) return [false,
+ null];
+ stacktrace.forEach(function (frame) {
+ frame.functionName = frame.functionName || '';
+ });
+ // isInternal - Did this error happen inside the library
+ var isInternal = false;
+ var p5FileName,
+ friendlyStack,
+ currentEntryPoint;
+ // Intentionally throw an error that we catch so that we can check the name
+ // of the current file. Any errors we see from this file, we treat as
+ // internal errors.
+ try {
+ throw new Error();
+ } catch (testError) {
+ var testStacktrace = _main.default._getErrorStackParser().parse(testError);
+ p5FileName = testStacktrace[0].fileName;
+ }
+ for (var i = stacktrace.length - 1; i >= 0; i--) {
+ var splitted = stacktrace[i].functionName.split('.');
+ if (entryPoints.includes(splitted[splitted.length - 1])) {
+ // remove everything below an entry point function (setup, draw, etc).
+ // (it's usually the internal initialization calls)
+ friendlyStack = stacktrace.slice(0, i + 1);
+ currentEntryPoint = splitted[splitted.length - 1];
+ // We call the error "internal" if the source of the error was a
+ // function from within the p5.js library file, but called from the
+ // user's code directly. We only need to check the topmost frame in
+ // the stack trace since any function internal to p5 should pass this
+ // check, not just public p5 functions.
+ if (stacktrace[0].fileName === p5FileName) {
+ isInternal = true;
+ break;
+ }
+ break;
+ }
+ } // in some cases ( errors in promises, callbacks, etc), no entry-point
+ // function may be found in the stacktrace. In that case just use the
+ // entire stacktrace for friendlyStack
+
+ if (!friendlyStack) friendlyStack = stacktrace;
+ if (isInternal) {
+ // the frameIndex property is added before the filter, so frameIndex
+ // corresponds to the index of a frame in the original stacktrace.
+ // Then we filter out all frames which belong to the file that contains
+ // the p5 library
+ friendlyStack = friendlyStack.map(function (frame, index) {
+ frame.frameIndex = index;
+ return frame;
+ }).filter(function (frame) {
+ return frame.fileName !== p5FileName;
+ });
+ // a weird case, if for some reason we can't identify the function called
+ // from user's code
+ if (friendlyStack.length === 0) return [true,
+ null];
+ // get the function just above the topmost frame in the friendlyStack.
+ // i.e the name of the library function called from user's code
+ var func = stacktrace[friendlyStack[0].frameIndex - 1].functionName.split('.').slice( - 1) [0];
+ // Try and get the location (line no.) from the top element of the stack
+ var locationObj;
+ if (friendlyStack[0].fileName && friendlyStack[0].lineNumber && friendlyStack[0].columnNumber) {
+ locationObj = {
+ location: ''.concat(friendlyStack[0].fileName, ':').concat(friendlyStack[0].lineNumber, ':').concat(friendlyStack[0].columnNumber),
+ file: friendlyStack[0].fileName.split('/').slice( - 1),
+ line: friendlyStack[0].lineNumber
+ };
+ // if already handled by another part of the FES, don't handle again
+ if (_main.default._fesLogCache[locationObj.location]) return [true,
+ null];
+ } // Check if the error is due to a non loadX method being used incorrectly
+ // in preload
+
+ if (currentEntryPoint === 'preload' && _main.default.prototype._preloadMethods[func] == null) {
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.wrongPreload', {
+ func: func,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : '',
+ error: error.message
+ }), 'preload');
+ } else {
+ // Library error
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.libraryError', {
+ func: func,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : '',
+ error: error.message
+ }), func);
+ } // Finally, if it's an internal error, print the friendlyStack
+ // ( fesErrorMonitor won't handle this error )
+
+ if (friendlyStack && friendlyStack.length) {
+ printFriendlyStack(friendlyStack);
+ }
+ }
+ return [isInternal,
+ friendlyStack];
+ };
+ /**
+ * Handles "global" errors that the browser catches.
+ *
+ * Called when an error event happens and detects the type of error.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.globalErrors.syntax.[*]", "fes.globalErrors.reference.[*]",
+ * "fes.globalErrors.type.[*]".
+ *
+ * @method fesErrorMonitor
+ * @private
+ * @param {*} e Event object to extract error details from
+ */
+ var fesErrorMonitor = function fesErrorMonitor(e) {
+ if (_main.default.disableFriendlyErrors) return;
+ // Try to get the error object from e
+ var error;
+ if (e instanceof Error) {
+ error = e;
+ } else if (e instanceof ErrorEvent) {
+ error = e.error;
+ } else if (e instanceof PromiseRejectionEvent) {
+ error = e.reason;
+ if (!(error instanceof Error)) return;
+ }
+ if (!error) return;
+ var stacktrace = _main.default._getErrorStackParser().parse(error);
+ // process the stacktrace from the browser and simplify it to give
+ // friendlyStack.
+ var _processStack = processStack(error, stacktrace),
+ _processStack2 = _slicedToArray(_processStack, 2),
+ isInternal = _processStack2[0],
+ friendlyStack = _processStack2[1]; // if this is an internal library error, the type of the error is not relevant,
+ // only the user code that lead to it is.
+ if (isInternal) {
+ return;
+ }
+ var errList = errorTable[error.name];
+ if (!errList) return; // this type of error can't be handled yet
+ var matchedError;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = errList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var obj = _step.value;
+ var string = obj.msg;
+ // capture the primary symbol mentioned in the error
+ string = string.replace(new RegExp('{{}}', 'g'), '([a-zA-Z0-9_]+)');
+ string = string.replace(new RegExp('{{.}}', 'g'), '(.+)');
+ string = string.replace(new RegExp('{}', 'g'), '(?:[a-zA-Z0-9_]+)');
+ var matched = error.message.match(string);
+ if (matched) {
+ matchedError = Object.assign({
+ }, obj);
+ matchedError.match = matched;
+ break;
+ }
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ if (!matchedError) return;
+ // Try and get the location from the top element of the stack
+ var locationObj;
+ if (stacktrace && stacktrace[0].fileName && stacktrace[0].lineNumber && stacktrace[0].columnNumber) {
+ locationObj = {
+ location: ''.concat(stacktrace[0].fileName, ':').concat(stacktrace[0].lineNumber, ':').concat(stacktrace[0].columnNumber),
+ file: stacktrace[0].fileName.split('/').slice( - 1),
+ line: friendlyStack[0].lineNumber
+ };
+ }
+ switch (error.name) {
+ case 'SyntaxError':
+ {
+ // We can't really do much with syntax errors other than try to use
+ // a simpler framing of the error message. The stack isn't available
+ // for syntax errors
+ switch (matchedError.type) {
+ case 'INVALIDTOKEN':
+ {
+ //Error if there is an invalid or unexpected token that doesn't belong at this position in the code
+ //let x = “not a string”; -> string not in proper quotes
+ var url = 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Illegal_character#What_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.invalidToken', {
+ url: url
+ }));
+ break;
+ }
+ case 'UNEXPECTEDTOKEN':
+ {
+ //Error if a specific language construct(, { ; etc) was expected, but something else was provided
+ //for (let i = 0; i < 5,; ++i) -> a comma after i<5 instead of a semicolon
+ var _url = 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.unexpectedToken', {
+ url: _url
+ }));
+ break;
+ }
+ case 'REDECLAREDVARIABLE':
+ {
+ //Error if a variable is redeclared by the user. Example=>
+ //let a = 10;
+ //let a = 100;
+ var errSym = matchedError.match[1];
+ var _url2 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.redeclaredVariable', {
+ symbol: errSym,
+ url: _url2
+ }));
+ break;
+ }
+ case 'MISSINGINITIALIZER':
+ {
+ //Error if a const variable is not initialized during declaration
+ //Example => const a;
+ var _url3 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.missingInitializer', {
+ url: _url3
+ }));
+ break;
+ }
+ case 'BADRETURNORYIELD':
+ {
+ //Error when a return statement is misplaced(usually outside of a function)
+ // const a = function(){
+ // .....
+ // }
+ // return; -> misplaced return statement
+ var _url4 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.badReturnOrYield', {
+ url: _url4
+ }));
+ break;
+ }
+ }
+ break;
+ }
+ case 'ReferenceError':
+ {
+ switch (matchedError.type) {
+ case 'NOTDEFINED':
+ {
+ //Error if there is a non-existent variable referenced somewhere
+ //let a = 10;
+ //console.log(x);
+ var _errSym = matchedError.match[1];
+ if (_errSym && handleMisspelling(_errSym, error)) {
+ break;
+ } // if the flow gets this far, this is likely not a misspelling
+ // of a p5 property/function
+
+ var _url5 = 'https://p5js.org/examples/data-variable-scope.html';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.reference.notDefined', {
+ url: _url5,
+ symbol: _errSym,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ case 'CANNOTACCESS':
+ {
+ //Error if a lexical variable was accessed before it was initialized
+ //console.log(a); -> variable accessed before it was initialized
+ //let a=100;
+ var _errSym2 = matchedError.match[1];
+ var _url6 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.reference.cannotAccess', {
+ url: _url6,
+ symbol: _errSym2,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ }
+ break;
+ }
+ case 'TypeError':
+ {
+ switch (matchedError.type) {
+ case 'NOTFUNC':
+ {
+ //Error when some code expects you to provide a function, but that didn't happen
+ //let a = document.getElementByID('foo'); -> getElementById instead of getElementByID
+ var _errSym3 = matchedError.match[1];
+ var splitSym = _errSym3.split('.');
+ var _url7 = 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_a_function#What_went_wrong';
+ // if errSym is aa.bb.cc , symbol would be cc and obj would aa.bb
+ var translationObj = {
+ url: _url7,
+ symbol: splitSym[splitSym.length - 1],
+ obj: splitSym.slice(0, splitSym.length - 1).join('.'),
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ };
+ // There are two cases to handle here. When the function is called
+ // as a property of an object and when it's called independently.
+ // Both have different explanations.
+ if (splitSym.length > 1) {
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.notfuncObj', translationObj));
+ } else {
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.notfunc', translationObj));
+ }
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ case 'READNULL':
+ {
+ //Error if a property of null is accessed
+ //let a = null;
+ //console.log(a.property); -> a is null
+ var _errSym4 = matchedError.match[1];
+ var _url8 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong';
+ /*let url2 =
+ 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null';*/
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.readFromNull', {
+ url: _url8,
+ symbol: _errSym4,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ case 'READUDEFINED':
+ {
+ //Error if a property of undefined is accessed
+ //let a; -> default value of a is undefined
+ //console.log(a.property); -> a is undefined
+ var _errSym5 = matchedError.match[1];
+ var _url9 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong';
+ /*let url2 =
+ 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined#description';*/
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.readFromUndefined', {
+ url: _url9,
+ symbol: _errSym5,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ case 'CONSTASSIGN':
+ {
+ //Error when a const variable is reassigned a value
+ //const a = 100;
+ //a=10;
+ var _url10 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.constAssign', {
+ url: _url10,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ }
+ }
+ }
+ };
+ _main.default._fesErrorMonitor = fesErrorMonitor;
+ _main.default._checkForUserDefinedFunctions = checkForUserDefinedFunctions;
+ // logger for testing purposes.
+ _main.default._fesLogger = null;
+ _main.default._fesLogCache = {
+ };
+ window.addEventListener('load', checkForUserDefinedFunctions, false);
+ window.addEventListener('error', _main.default._fesErrorMonitor, false);
+ window.addEventListener('unhandledrejection', _main.default._fesErrorMonitor, false);
+ /**
+ * Prints out all the colors in the color pallete with white text.
+ * For color blindness testing.
+ */
+ /* function testColors() {
+ const str = 'A box of biscuits, a box of mixed biscuits and a biscuit mixer';
+ p5._friendlyError(str, 'print', '#ED225D'); // p5.js magenta
+ p5._friendlyError(str, 'print', '#2D7BB6'); // p5.js blue
+ p5._friendlyError(str, 'print', '#EE9900'); // p5.js orange
+ p5._friendlyError(str, 'print', '#A67F59'); // p5.js light brown
+ p5._friendlyError(str, 'print', '#704F21'); // p5.js gold
+ p5._friendlyError(str, 'print', '#1CC581'); // auto cyan
+ p5._friendlyError(str, 'print', '#FF6625'); // auto orange
+ p5._friendlyError(str, 'print', '#79EB22'); // auto green
+ p5._friendlyError(str, 'print', '#B40033'); // p5.js darkened magenta
+ p5._friendlyError(str, 'print', '#084B7F'); // p5.js darkened blue
+ p5._friendlyError(str, 'print', '#945F00'); // p5.js darkened orange
+ p5._friendlyError(str, 'print', '#6B441D'); // p5.js darkened brown
+ p5._friendlyError(str, 'print', '#2E1B00'); // p5.js darkened gold
+ p5._friendlyError(str, 'print', '#008851'); // auto dark cyan
+ p5._friendlyError(str, 'print', '#C83C00'); // auto dark orange
+ p5._friendlyError(str, 'print', '#4DB200'); // auto dark green
+ } */
+ } // This is a lazily-defined list of p5 symbols that may be
+ // misused by beginners at top-level code, outside of setup/draw. We'd like
+ // to detect these errors and help the user by suggesting they move them
+ // into setup/draw.
+ //
+ // For more details, see https://github.com/processing/p5.js/issues/1121.
+
+ misusedAtTopLevelCode = null;
+ var FAQ_URL = 'https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup';
+ /**
+ * A helper function for populating misusedAtTopLevel list.
+ *
+ * @method defineMisusedAtTopLevelCode
+ * @private
+ */
+ defineMisusedAtTopLevelCode = function defineMisusedAtTopLevelCode() {
+ var uniqueNamesFound = {
+ };
+ var getSymbols = function getSymbols(obj) {
+ return Object.getOwnPropertyNames(obj).filter(function (name) {
+ if (name[0] === '_') {
+ return false;
+ }
+ if (name in uniqueNamesFound) {
+ return false;
+ }
+ uniqueNamesFound[name] = true;
+ return true;
+ }).map(function (name) {
+ var type;
+ if (typeof obj[name] === 'function') {
+ type = 'function';
+ } else if (name === name.toUpperCase()) {
+ type = 'constant';
+ } else {
+ type = 'variable';
+ }
+ return {
+ name: name,
+ type: type
+ };
+ });
+ };
+ misusedAtTopLevelCode = [
+ ].concat(getSymbols(_main.default.prototype), // At present, p5 only adds its constants to p5.prototype during
+ // construction, which may not have happened at the time a
+ // ReferenceError is thrown, so we'll manually add them to our list.
+ getSymbols(_dereq_('../constants')));
+ // This will ultimately ensure that we report the most specific error
+ // possible to the user, e.g. advising them about HALF_PI instead of PI
+ // when their code misuses the former.
+ misusedAtTopLevelCode.sort(function (a, b) {
+ return b.name.length - a.name.length;
+ });
+ };
+ /**
+ * Detects browser level error event for p5 constants/functions used outside
+ * of setup() and draw().
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.misusedTopLevel".
+ *
+ * @method helpForMisusedAtTopLevelCode
+ * @private
+ * @param {Event} e Error event
+ * @param {Boolean} log false
+ *
+ * @returns {Boolean} true
+ */
+ var helpForMisusedAtTopLevelCode = function helpForMisusedAtTopLevelCode(e, log) {
+ if (!log) {
+ log = console.log.bind(console);
+ }
+ if (!misusedAtTopLevelCode) {
+ defineMisusedAtTopLevelCode();
+ } // If we find that we're logging lots of false positives, we can
+ // uncomment the following code to avoid displaying anything if the
+ // user's code isn't likely to be using p5's global mode. (Note that
+ // setup/draw are more likely to be defined due to JS function hoisting.)
+ //
+ //if (!('setup' in window || 'draw' in window)) {
+ // return;
+ //}
+
+ misusedAtTopLevelCode.some(function (symbol) {
+ // Note that while just checking for the occurrence of the
+ // symbol name in the error message could result in false positives,
+ // a more rigorous test is difficult because different browsers
+ // log different messages, and the format of those messages may
+ // change over time.
+ //
+ // For example, if the user uses 'PI' in their code, it may result
+ // in any one of the following messages:
+ //
+ // * 'PI' is undefined (Microsoft Edge)
+ // * ReferenceError: PI is undefined (Firefox)
+ // * Uncaught ReferenceError: PI is not defined (Chrome)
+ if (e.message && e.message.match('\\W?'.concat(symbol.name, '\\W')) !== null) {
+ var symbolName = symbol.type === 'function' ? ''.concat(symbol.name, '()') : symbol.name;
+ if (typeof IS_MINIFIED !== 'undefined') {
+ log('Did you just try to use p5.js\'s '.concat(symbolName, ' ').concat(symbol.type, '? If so, you may want to move it into your sketch\'s setup() function.\n\nFor more details, see: ').concat(FAQ_URL));
+ } else {
+ log((0, _internationalization.translator) ('fes.misusedTopLevel', {
+ symbolName: symbolName,
+ symbolType: symbol.type,
+ url: FAQ_URL
+ }));
+ }
+ return true;
+ }
+ });
+ };
+ // Exposing this primarily for unit testing.
+ _main.default.prototype._helpForMisusedAtTopLevelCode = helpForMisusedAtTopLevelCode;
+ if (document.readyState !== 'complete') {
+ window.addEventListener('error', helpForMisusedAtTopLevelCode, false);
+ // Our job is only to catch ReferenceErrors that are thrown when
+ // global (non-instance mode) p5 APIs are used at the top-level
+ // scope of a file, so we'll unbind our error listener now to make
+ // sure we don't log false positives later.
+ window.addEventListener('load', function () {
+ window.removeEventListener('error', helpForMisusedAtTopLevelCode, false);
+ });
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 291,
+ '../internationalization': 301,
+ '../main': 303,
+ './browser_errors': 293,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.filter': 174,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.some': 187,
+ 'core-js/modules/es.function.name': 191,
+ 'core-js/modules/es.object.assign': 199,
+ 'core-js/modules/es.object.get-own-property-names': 202,
+ 'core-js/modules/es.object.keys': 204,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.constructor': 209,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.match': 216,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.string.starts-with': 222,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.for-each': 260,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 295: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var _internationalization = _dereq_('../internationalization');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @for p5
+ * @requires core
+ */
+
+ if (typeof IS_MINIFIED !== 'undefined') {
+ _main.default._friendlyFileLoadError = function () {
+ };
+ } else {
+ // mapping used by `_friendlyFileLoadError`
+ var fileLoadErrorCases = function fileLoadErrorCases(num, filePath) {
+ var suggestion = (0, _internationalization.translator) ('fes.fileLoadError.suggestion', {
+ filePath: filePath,
+ url: 'https://github.com/processing/p5.js/wiki/Local-server'
+ });
+ switch (num) {
+ case 0:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.image', {
+ suggestion: suggestion
+ }),
+ method: 'loadImage'
+ };
+ case 1:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.xml', {
+ suggestion: suggestion
+ }),
+ method: 'loadXML'
+ };
+ case 2:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.table', {
+ suggestion: suggestion
+ }),
+ method: 'loadTable'
+ };
+ case 3:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.strings', {
+ suggestion: suggestion
+ }),
+ method: 'loadStrings'
+ };
+ case 4:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.font', {
+ suggestion: suggestion
+ }),
+ method: 'loadFont'
+ };
+ case 5:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.json', {
+ suggestion: suggestion
+ }),
+ method: 'loadJSON'
+ };
+ case 6:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.bytes', {
+ suggestion: suggestion
+ }),
+ method: 'loadBytes'
+ };
+ case 7:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.large'),
+ method: 'loadX'
+ };
+ case 8:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.gif'),
+ method: 'loadImage'
+ };
+ }
+ };
+ /**
+ * Called internally if there is an error during file loading.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.fileLoadError.[*]".
+ *
+ * @method _friendlyFileLoadError
+ * @private
+ * @param {Number} errorType Number of file load error type
+ * @param {String} filePath Path to file caused the error
+ */
+ _main.default._friendlyFileLoadError = function (errorType, filePath) {
+ var _fileLoadErrorCases = fileLoadErrorCases(errorType, filePath),
+ message = _fileLoadErrorCases.message,
+ method = _fileLoadErrorCases.method;
+ _main.default._friendlyError(message, method, 3);
+ };
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../internationalization': 301,
+ '../main': 303
+ }
+ ],
+ 296: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var _internationalization = _dereq_('../internationalization');
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Checks if any p5.js constant/function is declared outside of setup()
+ * and draw() function. Also checks any reserved constant/function is
+ * redeclared.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.sketchReaderErrors.reservedConst",
+ * "fes.sketchReaderErrors.reservedFunc".
+ *
+ * @method _fesCodeReader
+ * @private
+ */
+
+ if (typeof IS_MINIFIED !== 'undefined') {
+ _main.default._fesCodeReader = function () {
+ };
+ } else {
+ //list of functions to ignore as they either
+ //are ment to be defined or generate false positive
+ //outputs
+ var ignoreFunction = [
+ 'setup',
+ 'draw',
+ 'preload',
+ 'deviceMoved',
+ 'deviceTurned',
+ 'deviceShaken',
+ 'doubleClicked',
+ 'mousePressed',
+ 'mouseReleased',
+ 'mouseMoved',
+ 'mouseDragged',
+ 'mouseClicked',
+ 'mouseWheel',
+ 'touchStarted',
+ 'touchMoved',
+ 'touchEnded',
+ 'keyPressed',
+ 'keyReleased',
+ 'keyTyped',
+ 'windowResized',
+ 'name',
+ 'parent',
+ 'toString',
+ 'print',
+ 'stop',
+ 'onended'
+ ];
+ /**
+ * Takes a list of variables defined by the user in the code
+ * as an array and checks if the list contains p5.js constants and functions.
+ *
+ * @method checkForConstsAndFuncs
+ * @private
+ * @param {Array} variableArray
+ */
+ var checkForConstsAndFuncs = function checkForConstsAndFuncs(variableArray) {
+ for (var i = 0; i < variableArray.length; i++) {
+ //if the element in variableArray is a p5.js constant then the below condidion
+ //will be true, hence a match is found
+ if (constants[variableArray[i]] !== undefined) {
+ var url = 'https://p5js.org/reference/#/p5/'.concat(variableArray[i]);
+ //display the FES message if a match is found
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.sketchReaderErrors.reservedConst', {
+ url: url,
+ symbol: variableArray[i]
+ }));
+ return;
+ //if match found then end search
+ }
+ }
+ var p5Constructors = {
+ };
+ for (var _i = 0, _Object$keys = Object.keys(_main.default); _i < _Object$keys.length; _i++) {
+ var key = _Object$keys[_i];
+ // Get a list of all constructors in p5. They are functions whose names
+ // start with a capital letter
+ if (typeof _main.default[key] === 'function' && key[0] !== key[0].toLowerCase()) {
+ p5Constructors[key] = _main.default[key];
+ }
+ }
+ for (var _i2 = 0; _i2 < variableArray.length; _i2++) {
+ //ignoreFunction contains the list of functions to be ignored
+ if (!ignoreFunction.includes(variableArray[_i2])) {
+ var keyArray = Object.keys(p5Constructors);
+ var j = 0;
+ //for every function name obtained check if it matches any p5.js function name
+ for (; j < keyArray.length; j++) {
+ if (p5Constructors[keyArray[j]].prototype[variableArray[_i2]] !== undefined) {
+ //if a p5.js function is used ie it is in the funcs array
+ var _url = 'https://p5js.org/reference/#/p5/'.concat(variableArray[_i2]);
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.sketchReaderErrors.reservedFunc', {
+ url: _url,
+ symbol: variableArray[_i2]
+ }));
+ return;
+ }
+ }
+ }
+ }
+ };
+ //these regex are used to perform variable extraction
+ //visit https://regexr.com/ for the detailed view
+ var optionalVarKeyword = /(?:(?:let|const|var)\s+)?/;
+ // Bracketed expressions start with an opening bracket, some amount of non
+ // bracket characters, then a closing bracket. Note that this won't properly
+ // parse nested brackets: `constrain(millis(), 0, 1000)` will match
+ // `constrain(millis()` only, but will still fail gracefully and not try to
+ // mistakenly read any subsequent code as assignment expressions.
+ var roundBracketedExpr = /(?:\([^)]*\))/;
+ var squareBracketedExpr = /(?:\[[^\]]*\])/;
+ var curlyBracketedExpr = /(?:\{[^}]*\})/;
+ var bracketedExpr = new RegExp([roundBracketedExpr,
+ squareBracketedExpr,
+ curlyBracketedExpr].map(function (regex) {
+ return regex.source;
+ }).join('|'));
+ // In an a = b expression, `b` can be any character up to a newline or comma,
+ // unless the comma is inside of a bracketed expression of some kind (to make
+ // sure we parse function calls with multiple arguments properly.)
+ var rightHandSide = new RegExp('(?:' + bracketedExpr.source + '|[^\\n,])+');
+ var leftHandSide = /([\w$]+)/;
+ var assignmentOperator = /\s*=\s*/;
+ var singleAssignment = new RegExp(leftHandSide.source + assignmentOperator.source + rightHandSide.source);
+ var listSeparator = /,\s*/;
+ var oneOrMoreAssignments = new RegExp('(?:' + singleAssignment.source + listSeparator.source + ')*' + singleAssignment.source);
+ var assignmentStatement = new RegExp('^' + optionalVarKeyword.source + oneOrMoreAssignments.source);
+ var letConstName = /(?:(?:let|const)\s+)([\w$]+)/;
+ /**
+ * Takes an array in which each element is a line of code
+ * containing a variable definition(Eg: arr=['let x = 100', 'const y = 200'])
+ * and extracts the variables defined.
+ *
+ * @method extractVariables
+ * @private
+ * @param {Array} linesArray array of lines of code
+ */
+ var extractVariables = function extractVariables(linesArray) {
+ //extract variable names from the user's code
+ var matches = [
+ ];
+ linesArray.forEach(function (ele) {
+ // Match 0 is the part of the line of code that the regex looked at.
+ // Matches 1 and onward will be only the variable names on the left hand
+ // side of assignment expressions.
+ var match = ele.match(assignmentStatement);
+ if (!match) return;
+ matches.push.apply(matches, _toConsumableArray(match.slice(1).filter(function (group) {
+ return group !== undefined;
+ })));
+ });
+ //check if the obtained variables are a part of p5.js or not
+ checkForConstsAndFuncs(matches);
+ };
+ /**
+ * Takes an array in which each element is a line of code
+ * containing a function definition(array=['let x = () => {...}'])
+ * and extracts the functions defined.
+ *
+ * @method extractFuncVariables
+ * @private
+ * @param {Array} linesArray array of lines of code
+ */
+ var extractFuncVariables = function extractFuncVariables(linesArray) {
+ var matches = [
+ ];
+ //RegExp to extract function names from let/const x = function()...
+ //visit https://regexr.com/ for the detailed view.
+ linesArray.forEach(function (ele) {
+ var m = ele.match(letConstName);
+ if (m !== null) matches.push(ele.match(letConstName) [1]);
+ });
+ //matches array contains the names of the functions
+ checkForConstsAndFuncs(matches);
+ };
+ /**
+ * Converts code written by the user to an array
+ * every element of which is a seperate line of code.
+ *
+ * @method codeToLines
+ * @private
+ * @param {String} code code written by the user
+ */
+ var codeToLines = function codeToLines(code) {
+ //convert code to array of code and filter out
+ //unnecessary lines
+ var arrayVariables = code.split('\n').map(function (line) {
+ return line.trim();
+ }).filter(function (line) {
+ return line !== '' && !line.includes('//') && (line.includes('let') || line.includes('const')) && !line.includes('=>') && !line.includes('function');
+ } //filter out lines containing variable names
+ );
+ //filter out lines containing function names
+ var arrayFunctions = code.split('\n').map(function (line) {
+ return line.trim();
+ }).filter(function (line) {
+ return line !== '' && !line.includes('//') && (line.includes('let') || line.includes('const')) && (line.includes('=>') || line.includes('function'));
+ });
+ //pass the relevant array to a function which will extract all the variables/functions names
+ extractVariables(arrayVariables);
+ extractFuncVariables(arrayFunctions);
+ };
+ /**
+ * Remove multiline comments and the content inside it.
+ *
+ * @method removeMultilineComments
+ * @private
+ * @param {String} code code written by the user
+ * @returns {String}
+ */
+ var removeMultilineComments = function removeMultilineComments(code) {
+ var start = code.indexOf('/*');
+ var end = code.indexOf('*/');
+ //create a new string which don't have multiline comments
+ while (start !== - 1 && end !== - 1) {
+ if (start === 0) {
+ code = code.slice(end + 2);
+ } else code = code.slice(0, start) + code.slice(end + 2);
+ start = code.indexOf('/*');
+ end = code.indexOf('*/');
+ }
+ return code;
+ };
+ /**
+ * Checks if any p5.js constant or function is declared outside a function
+ * and reports it if found.
+ *
+ * @method globalConstFuncCheck
+ * @private
+ * @returns {Boolean}
+ */
+ var globalConstFuncCheck = function globalConstFuncCheck() {
+ // generate all the const key data as an array
+ var tempArray = Object.keys(constants);
+ var element;
+ for (var i = 0; i < tempArray.length; i++) {
+ try {
+ //if the user has not declared p5.js constant anywhere outside the
+ //setup or draw function then this will throw an
+ //error.
+ element = eval(tempArray[i]);
+ } catch (e) {
+ //We are catching the error due to the above mentioned
+ //reason. Since there is no declaration of constant everything
+ //is OK so we will skip the current iteration and check for the
+ //next element.
+ continue;
+ } //if we are not getting an error this means
+ //user have changed the value. We will check
+ //if the value is changed and if it is changed
+ //then report.
+
+ if (constants[tempArray[i]] !== element) {
+ var url = 'https://p5js.org/reference/#/p5/'.concat(tempArray[i]);
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.sketchReaderErrors.reservedConst', {
+ url: url,
+ symbol: tempArray[i]
+ }));
+ //if a p5.js constant is already reported then no need to check
+ //for p5.js functions.
+ return true;
+ }
+ } //the below code gets a list of p5.js functions
+
+ var p5Constructors = {
+ };
+ for (var _i3 = 0, _Object$keys2 = Object.keys(_main.default); _i3 < _Object$keys2.length; _i3++) {
+ var key = _Object$keys2[_i3];
+ // Get a list of all constructors in p5. They are functions whose names
+ // start with a capital letter
+ if (typeof _main.default[key] === 'function' && key[0] !== key[0].toLowerCase()) {
+ p5Constructors[key] = _main.default[key];
+ }
+ }
+ var keyArray = Object.keys(p5Constructors);
+ var classesWithGlobalFns = [
+ 'Renderer',
+ 'Renderer2D',
+ 'RendererGL'
+ ];
+ var functionArray = [
+ ];
+ //get the names of all p5.js functions which are available globally
+ for (var _i4 = 0; _i4 < classesWithGlobalFns.length; _i4++) {
+ functionArray.push.apply(functionArray, _toConsumableArray(Object.keys(p5Constructors[classesWithGlobalFns[_i4]].prototype)));
+ } //we have p5.js function names with us so we will check
+ //if they have been declared or not.
+
+ for (var _i5 = 0; _i5 < functionArray.length; _i5++) {
+ //ignoreFunction contains the list of functions to be ignored
+ if (!ignoreFunction.includes(functionArray[_i5])) {
+ try {
+ //if we get an error that means the function is not declared
+ element = eval(functionArray[_i5]);
+ } catch (e) {
+ //we will skip the iteration
+ continue;
+ } //if we are not getting an error this means
+ //user have used p5.js function. Check if it is
+ //changed and if so then report it.
+
+ for (var k = 0; k < keyArray.length; k++) {
+ if (p5Constructors[keyArray[k]].prototype[functionArray[_i5]] === undefined);
+ else {
+ if (p5Constructors[keyArray[k]].prototype[functionArray[_i5]] !== element) {
+ var _url2 = 'https://p5js.org/reference/#/p5/'.concat(functionArray[_i5]);
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.sketchReaderErrors.reservedFunc', {
+ url: _url2,
+ symbol: functionArray[_i5]
+ }));
+ return true;
+ }
+ }
+ }
+ }
+ }
+ };
+ /**
+ * Initiates the sketch_reader's processes.
+ * Obtains the code in setup and draw function
+ * and forwards it for further processing and evaluation.
+ *
+ * @method fesCodeReader
+ * @private
+ */
+ var fesCodeReader = function fesCodeReader() {
+ //moveAhead will determine if a match is found outside
+ //the setup and draw function. If a match is found then
+ //to prevent further potential reporting we will exit immidiately
+ var moveAhead = globalConstFuncCheck();
+ if (moveAhead) return;
+ var code = '';
+ try {
+ //get code from setup
+ code += '' + setup;
+ } catch (e) {
+ code += '';
+ }
+ try {
+ //get code from draw
+ code += '\n' + draw;
+ } catch (e) {
+ code += '';
+ }
+ if (code === '') return;
+ code = removeMultilineComments(code);
+ codeToLines(code);
+ };
+ _main.default._fesCodeReader = fesCodeReader;
+ window.addEventListener('load', _main.default._fesCodeReader);
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 291,
+ '../internationalization': 301,
+ '../main': 303,
+ 'core-js/modules/es.array.filter': 174,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.keys': 204,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.constructor': 209,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.match': 216,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.string.trim': 224,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.for-each': 260,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 297: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @for p5
+ * @requires core
+ */
+ // Borrow from stacktracejs https://github.com/stacktracejs/stacktrace.js with
+ // minor modifications. The license for the same and the code is included below
+ // Copyright (c) 2017 Eric Wendelin and other contributors
+ // Permission is hereby granted, free of charge, to any person obtaining a copy of
+ // this software and associated documentation files (the "Software"), to deal in
+ // the Software without restriction, including without limitation the rights to
+ // use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ // of the Software, and to permit persons to whom the Software is furnished to do
+ // so, subject to the following conditions:
+ // The above copyright notice and this permission notice shall be included in all
+ // copies or substantial portions of the Software.
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ // SOFTWARE.
+
+ function ErrorStackParser() {
+ var FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
+ var CHROME_IE_STACK_REGEXP = /^\s*at .*(\S+:\d+|\(native\))/m;
+ var SAFARI_NATIVE_CODE_REGEXP = /^(eval@)?(\[native code])?$/;
+ return {
+ /**
+ * Given an Error object, extract the most information from it.
+ * @private
+ * @param {Error} error object
+ * @return {Array} of stack frames
+ */
+ parse: function ErrorStackParser$$parse(error) {
+ if (typeof error.stacktrace !== 'undefined' || typeof error['opera#sourceloc'] !== 'undefined') {
+ return this.parseOpera(error);
+ } else if (error.stack && error.stack.match(CHROME_IE_STACK_REGEXP)) {
+ return this.parseV8OrIE(error);
+ } else if (error.stack) {
+ return this.parseFFOrSafari(error);
+ } else {
+ // throw new Error('Cannot parse given Error object');
+ }
+ },
+ // Separate line and column numbers from a string of the form: (URI:Line:Column)
+ extractLocation: function ErrorStackParser$$extractLocation(urlLike) {
+ // Fail-fast but return locations like "(native)"
+ if (urlLike.indexOf(':') === - 1) {
+ return [urlLike];
+ }
+ var regExp = /(.+?)(?::(\d+))?(?::(\d+))?$/;
+ var parts = regExp.exec(urlLike.replace(/[()]/g, ''));
+ return [parts[1],
+ parts[2] || undefined,
+ parts[3] || undefined];
+ },
+ parseV8OrIE: function ErrorStackParser$$parseV8OrIE(error) {
+ var filtered = error.stack.split('\n').filter(function (line) {
+ return !!line.match(CHROME_IE_STACK_REGEXP);
+ }, this);
+ return filtered.map(function (line) {
+ if (line.indexOf('(eval ') > - 1) {
+ // Throw away eval information until we implement stacktrace.js/stackframe#8
+ line = line.replace(/eval code/g, 'eval').replace(/(\(eval at [^()]*)|(\),.*$)/g, '');
+ }
+ var sanitizedLine = line.replace(/^\s+/, '').replace(/\(eval code/g, '(');
+ // capture and preseve the parenthesized location "(/foo/my bar.js:12:87)" in
+ // case it has spaces in it, as the string is split on \s+ later on
+ var location = sanitizedLine.match(/ (\((.+):(\d+):(\d+)\)$)/);
+ // remove the parenthesized location from the line, if it was matched
+ sanitizedLine = location ? sanitizedLine.replace(location[0], '') : sanitizedLine;
+ var tokens = sanitizedLine.split(/\s+/).slice(1);
+ // if a location was matched, pass it to extractLocation() otherwise pop the last token
+ var locationParts = this.extractLocation(location ? location[1] : tokens.pop());
+ var functionName = tokens.join(' ') || undefined;
+ var fileName = [
+ 'eval',
+ '
+ * // Imagine this sketch is hosted at the following URL:
+ * // https://p5js.org?year=2014&month=May&day=15
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Get the sketch's URL
+ * // parameters and display
+ * // them.
+ * let params = getURLParams();
+ * text(params.day, 10, 20);
+ * text(params.month, 10, 40);
+ * text(params.year, 10, 60);
+ *
+ * describe('The text "15", "May", and "2014" written in black on separate lines.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * A function that's called once when the sketch begins running.
+ *
+ * Declaring the function `setup()` sets a code block to run once
+ * automatically when the sketch starts running. It's used to perform
+ * setup tasks such as creating the canvas and initializing variables:
+ *
+ * ```js
+ * function setup() {
+ * // Code to run once at the start of the sketch.
+ * }
+ * ```
+ *
+ * Code placed in `setup()` will run once before code placed in
+ * draw() begins looping. If the
+ * preload() is declared, then `setup()` will
+ * run immediately after preload() finishes
+ * loading assets.
+ *
+ * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
+ *
+ * @method setup
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load an image and create a p5.Image object.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Draw the image.
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the circle.
+ * circle(50, 50, 40);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Paint the background once.
+ * background(200);
+ *
+ * describe(
+ * 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Draw circles repeatedly.
+ * circle(mouseX, mouseY, 40);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * A function that's called repeatedly while the sketch runs.
+ *
+ * Declaring the function `draw()` sets a code block to run repeatedly
+ * once the sketch starts. It’s used to create animations and respond to
+ * user inputs:
+ *
+ * ```js
+ * function draw() {
+ * // Code to run repeatedly.
+ * }
+ * ```
+ *
+ * This is often called the "draw loop" because p5.js calls the code in
+ * `draw()` in a loop behind the scenes. By default, `draw()` tries to run
+ * 60 times per second. The actual rate depends on many factors. The
+ * drawing rate, called the "frame rate", can be controlled by calling
+ * frameRate(). The number of times `draw()`
+ * has run is stored in the system variable
+ * frameCount().
+ *
+ * Code placed within `draw()` begins looping after
+ * setup() runs. `draw()` will run until the user
+ * closes the sketch. `draw()` can be stopped by calling the
+ * noLoop() function. `draw()` can be resumed by
+ * calling the loop() function.
+ *
+ * @method draw
+ *
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Draw the image.
+ * image(img, 0, 0);
+ *
+ * describe(
+ * 'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Style the circle.
+ * noStroke();
+ *
+ * // Draw the circle.
+ * circle(mouseX, mouseY, 10);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Paint the background once.
+ * background(200);
+ *
+ * describe(
+ * 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Draw circles repeatedly.
+ * circle(mouseX, mouseY, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A white circle on a gray background. The circle follows the mouse as the user moves.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Paint the background repeatedly.
+ * background(200);
+ *
+ * // Draw circles repeatedly.
+ * circle(mouseX, mouseY, 40);
+ * }
+ *
+ *
+ *
+ */
+ //////////////////////////////////////////////
+ // PRIVATE p5 PROPERTIES AND METHODS
+ //////////////////////////////////////////////
+ this._setupDone = false;
+ this._preloadDone = false;
+ // for handling hidpi
+ this._pixelDensity = Math.ceil(window.devicePixelRatio) || 1;
+ this._maxAllowedPixelDimensions = 0;
+ this._userNode = node;
+ this._curElement = null;
+ this._elements = [
+ ];
+ this._glAttributes = null;
+ this._requestAnimId = 0;
+ this._preloadCount = 0;
+ this._isGlobal = false;
+ this._loop = true;
+ this._startListener = null;
+ this._initializeInstanceVariables();
+ this._defaultCanvasSize = {
+ width: 100,
+ height: 100
+ };
+ this._events = {
+ // keep track of user-events for unregistering later
+ mousemove: null,
+ mousedown: null,
+ mouseup: null,
+ dragend: null,
+ dragover: null,
+ click: null,
+ dblclick: null,
+ mouseover: null,
+ mouseout: null,
+ keydown: null,
+ keyup: null,
+ keypress: null,
+ touchstart: null,
+ touchmove: null,
+ touchend: null,
+ resize: null,
+ blur: null
+ };
+ this._millisStart = - 1;
+ this._recording = false;
+ this.touchstart = false;
+ this.touchend = false;
+ // States used in the custom random generators
+ this._lcg_random_state = null;
+ this._gaussian_previous = false;
+ this._events.wheel = null;
+ this._loadingScreenId = 'p5_loading';
+ // Allows methods to be registered on an instance that
+ // are instance-specific.
+ this._registeredMethods = {
+ };
+ var methods = Object.getOwnPropertyNames(p5.prototype._registeredMethods);
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = methods[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var prop = _step.value;
+ this._registeredMethods[prop] = p5.prototype._registeredMethods[prop].slice();
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ if (window.DeviceOrientationEvent) {
+ this._events.deviceorientation = null;
+ }
+ if (window.DeviceMotionEvent && !window._isNodeWebkit) {
+ this._events.devicemotion = null;
+ } // Function to invoke registered hooks before or after events such as preload, setup, and pre/post draw.
+
+ p5.prototype.callRegisteredHooksFor = function (hookName) {
+ var target = this || p5.prototype;
+ var context = this._isGlobal ? window : this;
+ if (target._registeredMethods.hasOwnProperty(hookName)) {
+ var _methods = target._registeredMethods[hookName];
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = _methods[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var method = _step2.value;
+ if (typeof method === 'function') {
+ method.call(context);
+ }
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ }
+ };
+ this._start = function () {
+ // Find node if id given
+ if (_this._userNode) {
+ if (typeof _this._userNode === 'string') {
+ _this._userNode = document.getElementById(_this._userNode);
+ }
+ }
+ var context = _this._isGlobal ? window : _this;
+ if (context.preload) {
+ _this.callRegisteredHooksFor('beforePreload');
+ // Setup loading screen
+ // Set loading screen into dom if not present
+ // Otherwise displays and removes user provided loading screen
+ var loadingScreen = document.getElementById(_this._loadingScreenId);
+ if (!loadingScreen) {
+ loadingScreen = document.createElement('div');
+ loadingScreen.innerHTML = 'Loading...';
+ loadingScreen.style.position = 'absolute';
+ loadingScreen.id = _this._loadingScreenId;
+ var _node = _this._userNode || document.body;
+ _node.appendChild(loadingScreen);
+ }
+ var _methods2 = _this._preloadMethods;
+ for (var method in _methods2) {
+ // default to p5 if no object defined
+ _methods2[method] = _methods2[method] || p5;
+ var obj = _methods2[method];
+ //it's p5, check if it's global or instance
+ if (obj === p5.prototype || obj === p5) {
+ if (_this._isGlobal) {
+ window[method] = _this._wrapPreload(_this, method);
+ }
+ obj = _this;
+ }
+ _this._registeredPreloadMethods[method] = obj[method];
+ obj[method] = _this._wrapPreload(obj, method);
+ }
+ context.preload();
+ _this._runIfPreloadsAreDone();
+ } else {
+ _this._setup();
+ if (!_this._recording) {
+ _this._draw();
+ }
+ }
+ };
+ this._runIfPreloadsAreDone = function () {
+ var context = this._isGlobal ? window : this;
+ if (context._preloadCount === 0) {
+ var loadingScreen = document.getElementById(context._loadingScreenId);
+ if (loadingScreen) {
+ loadingScreen.parentNode.removeChild(loadingScreen);
+ }
+ this.callRegisteredHooksFor('afterPreload');
+ if (!this._setupDone) {
+ this._lastTargetFrameTime = window.performance.now();
+ this._lastRealFrameTime = window.performance.now();
+ context._setup();
+ if (!this._recording) {
+ context._draw();
+ }
+ }
+ }
+ };
+ this._decrementPreload = function () {
+ var context = this._isGlobal ? window : this;
+ if (!context._preloadDone && typeof context.preload === 'function') {
+ context._setProperty('_preloadCount', context._preloadCount - 1);
+ context._runIfPreloadsAreDone();
+ }
+ };
+ this._wrapPreload = function (obj, fnName) {
+ var _this2 = this;
+ return function () {
+ //increment counter
+ _this2._incrementPreload();
+ //call original function
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ return _this2._registeredPreloadMethods[fnName].apply(obj, args);
+ };
+ };
+ this._incrementPreload = function () {
+ var context = this._isGlobal ? window : this;
+ // Do nothing if we tried to increment preloads outside of `preload`
+ if (context._preloadDone) return;
+ context._setProperty('_preloadCount', context._preloadCount + 1);
+ };
+ this._setup = function () {
+ _this.callRegisteredHooksFor('beforeSetup');
+ // Always create a default canvas.
+ // Later on if the user calls createCanvas, this default one
+ // will be replaced
+ _this.createCanvas(_this._defaultCanvasSize.width, _this._defaultCanvasSize.height, 'p2d');
+ // return preload functions to their normal vals if switched by preload
+ var context = _this._isGlobal ? window : _this;
+ if (typeof context.preload === 'function') {
+ for (var f in _this._preloadMethods) {
+ context[f] = _this._preloadMethods[f][f];
+ if (context[f] && _this) {
+ context[f] = context[f].bind(_this);
+ }
+ }
+ } // Record the time when sketch starts
+
+ _this._millisStart = window.performance.now();
+ context._preloadDone = true;
+ // Short-circuit on this, in case someone used the library in "global"
+ // mode earlier
+ if (typeof context.setup === 'function') {
+ context.setup();
+ } // unhide any hidden canvases that were created
+
+ var canvases = document.getElementsByTagName('canvas');
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = canvases[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var k = _step3.value;
+ if (k.dataset.hidden === 'true') {
+ k.style.visibility = '';
+ delete k.dataset.hidden;
+ }
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ _this._lastTargetFrameTime = window.performance.now();
+ _this._lastRealFrameTime = window.performance.now();
+ _this._setupDone = true;
+ if (_this._accessibleOutputs.grid || _this._accessibleOutputs.text) {
+ _this._updateAccsOutput();
+ }
+ _this.callRegisteredHooksFor('afterSetup');
+ };
+ this._draw = function () {
+ var now = window.performance.now();
+ var time_since_last = now - _this._lastTargetFrameTime;
+ var target_time_between_frames = 1000 / _this._targetFrameRate;
+ // only draw if we really need to; don't overextend the browser.
+ // draw if we're within 5ms of when our next frame should paint
+ // (this will prevent us from giving up opportunities to draw
+ // again when it's really about time for us to do so). fixes an
+ // issue where the frameRate is too low if our refresh loop isn't
+ // in sync with the browser. note that we have to draw once even
+ // if looping is off, so we bypass the time delay if that
+ // is the case.
+ var epsilon = 5;
+ if (!_this._loop || time_since_last >= target_time_between_frames - epsilon) {
+ //mandatory update values(matrixes and stack)
+ _this.deltaTime = now - _this._lastRealFrameTime;
+ _this._setProperty('deltaTime', _this.deltaTime);
+ _this._frameRate = 1000 / _this.deltaTime;
+ _this.redraw();
+ _this._lastTargetFrameTime = Math.max(_this._lastTargetFrameTime + target_time_between_frames, now);
+ _this._lastRealFrameTime = now;
+ // If the user is actually using mouse module, then update
+ // coordinates, otherwise skip. We can test this by simply
+ // checking if any of the mouse functions are available or not.
+ // NOTE : This reflects only in complete build or modular build.
+ if (typeof _this._updateMouseCoords !== 'undefined') {
+ _this._updateMouseCoords();
+ //reset delta values so they reset even if there is no mouse event to set them
+ // for example if the mouse is outside the screen
+ _this._setProperty('movedX', 0);
+ _this._setProperty('movedY', 0);
+ }
+ } // get notified the next time the browser gives us
+ // an opportunity to draw.
+
+ if (_this._loop) {
+ _this._requestAnimId = window.requestAnimationFrame(_this._draw);
+ }
+ };
+ this._setProperty = function (prop, value) {
+ _this[prop] = value;
+ if (_this._isGlobal) {
+ window[prop] = value;
+ }
+ };
+ /**
+ * Removes the sketch from the web page.
+ *
+ * Calling `remove()` stops the draw loop and removes any HTML elements
+ * created by the sketch, including the canvas. A new sketch can be
+ * created by using the p5() constructor, as in
+ * `new p5()`.
+ *
+ * @method remove
+ *
+ * @example
+ *
+ * // Double-click the canvas to change the circle's color.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Paint the background repeatedly.
+ * background(200);
+ *
+ * // Draw circles repeatedly.
+ * circle(mouseX, mouseY, 40);
+ * }
+ *
+ * // Change the fill color when the user double-clicks.
+ * function doubleClicked() {
+ * fill('deeppink');
+ * }
+ *
+ *
+ *
+ */
+ this.remove = function () {
+ // Remove start listener to prevent orphan canvas being created
+ if (_this._startListener) {
+ window.removeEventListener('load', _this._startListener, false);
+ }
+ var loadingScreen = document.getElementById(_this._loadingScreenId);
+ if (loadingScreen) {
+ loadingScreen.parentNode.removeChild(loadingScreen);
+ // Add 1 to preload counter to prevent the sketch ever executing setup()
+ _this._incrementPreload();
+ }
+ if (_this._curElement) {
+ // stop draw
+ _this._loop = false;
+ if (_this._requestAnimId) {
+ window.cancelAnimationFrame(_this._requestAnimId);
+ } // unregister events sketch-wide
+
+ for (var ev in _this._events) {
+ window.removeEventListener(ev, _this._events[ev]);
+ } // remove DOM elements created by p5, and listeners
+
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ for (var _iterator4 = _this._elements[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ var e = _step4.value;
+ if (e.elt && e.elt.parentNode) {
+ e.elt.parentNode.removeChild(e.elt);
+ }
+ for (var elt_ev in e._events) {
+ e.elt.removeEventListener(elt_ev, e._events[elt_ev]);
+ }
+ } // call any registered remove functions
+
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ var self = _this;
+ _this._registeredMethods.remove.forEach(function (f) {
+ if (typeof f !== 'undefined') {
+ f.call(self);
+ }
+ });
+ } // remove window bound properties and methods
+
+ if (_this._isGlobal) {
+ for (var p in p5.prototype) {
+ try {
+ delete window[p];
+ } catch (x) {
+ window[p] = undefined;
+ }
+ }
+ for (var p2 in _this) {
+ if (_this.hasOwnProperty(p2)) {
+ try {
+ delete window[p2];
+ } catch (x) {
+ window[p2] = undefined;
+ }
+ }
+ }
+ p5.instance = null;
+ }
+ };
+ // call any registered init functions
+ this._registeredMethods.init.forEach(function (f) {
+ if (typeof f !== 'undefined') {
+ f.call(this);
+ }
+ }, this);
+ // Set up promise preloads
+ this._setupPromisePreloads();
+ var friendlyBindGlobal = this._createFriendlyGlobalFunctionBinder();
+ // If the user has created a global setup or draw function,
+ // assume "global" mode and make everything global (i.e. on the window)
+ if (!sketch) {
+ this._isGlobal = true;
+ p5.instance = this;
+ // Loop through methods on the prototype and attach them to the window
+ for (var p in p5.prototype) {
+ if (typeof p5.prototype[p] === 'function') {
+ var ev = p.substring(2);
+ if (!this._events.hasOwnProperty(ev)) {
+ if (Math.hasOwnProperty(p) && Math[p] === p5.prototype[p]) {
+ // Multiple p5 methods are just native Math functions. These can be
+ // called without any binding.
+ friendlyBindGlobal(p, p5.prototype[p]);
+ } else {
+ friendlyBindGlobal(p, p5.prototype[p].bind(this));
+ }
+ }
+ } else {
+ friendlyBindGlobal(p, p5.prototype[p]);
+ }
+ } // Attach its properties to the window
+
+ for (var p2 in this) {
+ if (this.hasOwnProperty(p2)) {
+ friendlyBindGlobal(p2, this[p2]);
+ }
+ }
+ } else {
+ // Else, the user has passed in a sketch closure that may set
+ // user-provided 'setup', 'draw', etc. properties on this instance of p5
+ sketch(this);
+ // Run a check to see if the user has misspelled 'setup', 'draw', etc
+ // detects capitalization mistakes only ( Setup, SETUP, MouseClicked, etc)
+ p5._checkForUserDefinedFunctions(this);
+ } // Bind events to window (not using container div bc key events don't work)
+
+ for (var e in this._events) {
+ var f = this['_on'.concat(e)];
+ if (f) {
+ var m = f.bind(this);
+ window.addEventListener(e, m, {
+ passive: false
+ });
+ this._events[e] = m;
+ }
+ }
+ var focusHandler = function focusHandler() {
+ _this._setProperty('focused', true);
+ };
+ var blurHandler = function blurHandler() {
+ _this._setProperty('focused', false);
+ };
+ window.addEventListener('focus', focusHandler);
+ window.addEventListener('blur', blurHandler);
+ this.registerMethod('remove', function () {
+ window.removeEventListener('focus', focusHandler);
+ window.removeEventListener('blur', blurHandler);
+ });
+ if (document.readyState === 'complete') {
+ this._start();
+ } else {
+ this._startListener = this._start.bind(this);
+ window.addEventListener('load', this._startListener, false);
+ }
+ }
+ _createClass(p5, [
+ {
+ key: '_initializeInstanceVariables',
+ value: function _initializeInstanceVariables() {
+ this._accessibleOutputs = {
+ text: false,
+ grid: false,
+ textLabel: false,
+ gridLabel: false
+ };
+ this._styles = [
+ ];
+ this._bezierDetail = 20;
+ this._curveDetail = 20;
+ this._colorMode = constants.RGB;
+ this._colorMaxes = {
+ rgb: [
+ 255,
+ 255,
+ 255,
+ 255
+ ],
+ hsb: [
+ 360,
+ 100,
+ 100,
+ 1
+ ],
+ hsl: [
+ 360,
+ 100,
+ 100,
+ 1
+ ]
+ };
+ this._downKeys = {
+ }; //Holds the key codes of currently pressed keys
+ }
+ },
+ {
+ key: 'registerPreloadMethod',
+ value: function registerPreloadMethod(fnString, obj) {
+ // obj = obj || p5.prototype;
+ if (!p5.prototype._preloadMethods.hasOwnProperty(fnString)) {
+ p5.prototype._preloadMethods[fnString] = obj;
+ }
+ }
+ },
+ {
+ key: 'registerMethod',
+ value: function registerMethod(name, m) {
+ var target = this || p5.prototype;
+ if (!target._registeredMethods.hasOwnProperty(name)) {
+ target._registeredMethods[name] = [
+ ];
+ }
+ target._registeredMethods[name].push(m);
+ }
+ },
+ {
+ key: 'unregisterMethod',
+ value: function unregisterMethod(name, m) {
+ var target = this || p5.prototype;
+ if (target._registeredMethods.hasOwnProperty(name)) {
+ var methods = target._registeredMethods[name];
+ var indexesToRemove = [
+ ];
+ // Find all indexes of the method `m` in the array of registered methods
+ for (var i = 0; i < methods.length; i++) {
+ if (methods[i] === m) {
+ indexesToRemove.push(i);
+ }
+ } // Remove all instances of the method `m` from the array
+
+ for (var _i = indexesToRemove.length - 1; _i >= 0; _i--) {
+ methods.splice(indexesToRemove[_i], 1);
+ }
+ }
+ } // create a function which provides a standardized process for binding
+ // globals; this is implemented as a factory primarily so that there's a
+ // way to redefine what "global" means for the binding function so it
+ // can be used in scenarios like unit testing where the window object
+ // might not exist
+
+ },
+ {
+ key: '_createFriendlyGlobalFunctionBinder',
+ value: function _createFriendlyGlobalFunctionBinder() {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+ };
+ var globalObject = options.globalObject || window;
+ var log = options.log || console.log.bind(console);
+ var propsToForciblyOverwrite = {
+ // p5.print actually always overwrites an existing global function,
+ // albeit one that is very unlikely to be used:
+ //
+ // https://developer.mozilla.org/en-US/docs/Web/API/Window/print
+ print: true
+ };
+ return function (prop, value) {
+ if (!p5.disableFriendlyErrors && typeof IS_MINIFIED === 'undefined' && typeof value === 'function' && !(prop in p5.prototype._preloadMethods)) {
+ try {
+ // Because p5 has so many common function names, it's likely
+ // that users may accidentally overwrite global p5 functions with
+ // their own variables. Let's allow this but log a warning to
+ // help users who may be doing this unintentionally.
+ //
+ // For more information, see:
+ //
+ // https://github.com/processing/p5.js/issues/1317
+ if (prop in globalObject && !(prop in propsToForciblyOverwrite)) {
+ throw new Error('global "'.concat(prop, '" already exists'));
+ } // It's possible that this might throw an error because there
+ // are a lot of edge-cases in which `Object.defineProperty` might
+ // not succeed; since this functionality is only intended to
+ // help beginners anyways, we'll just catch such an exception
+ // if it occurs, and fall back to legacy behavior.
+
+ Object.defineProperty(globalObject, prop, {
+ configurable: true,
+ enumerable: true,
+ get: function get() {
+ return value;
+ },
+ set: function set(newValue) {
+ Object.defineProperty(globalObject, prop, {
+ configurable: true,
+ enumerable: true,
+ value: newValue,
+ writable: true
+ });
+ log('You just changed the value of "'.concat(prop, '", which was a p5 function. This could cause problems later if you\'re not careful.'));
+ }
+ });
+ } catch (e) {
+ var message = 'p5 had problems creating the global function "'.concat(prop, '", possibly because your code is already using that name as a variable. You may want to rename your variable to something else.');
+ p5._friendlyError(message, prop);
+ globalObject[prop] = value;
+ }
+ } else {
+ globalObject[prop] = value;
+ }
+ };
+ }
+ }
+ ]);
+ return p5;
+ }(); // This is a pointer to our global mode p5 instance, if we're in
+ // global mode.
+ p5.instance = null;
+ /**
+ * Turns off the parts of the Friendly Error System (FES) that impact performance.
+ *
+ * The FES
+ * can cause sketches to draw slowly because it does extra work behind the
+ * scenes. For example, the FES checks the arguments passed to functions,
+ * which takes time to process. Disabling the FES can significantly improve
+ * performance by turning off these checks.
+ *
+ * @property {Boolean} disableFriendlyErrors
+ *
+ * @example
+ *
+ * // Double-click to remove the canvas.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Paint the background repeatedly.
+ * background(200);
+ *
+ * // Draw circles repeatedly.
+ * circle(mouseX, mouseY, 40);
+ * }
+ *
+ * // Remove the sketch when the user double-clicks.
+ * function doubleClicked() {
+ * remove();
+ * }
+ *
+ *
+ *
+ */
+ p5.disableFriendlyErrors = false;
+ // attach constants to p5 prototype
+ for (var k in constants) {
+ p5.prototype[k] = constants[k];
+ } // makes the `VERSION` constant available on the p5 object
+ // in instance mode, even if it hasn't been instantiated yet
+
+ p5.VERSION = constants.VERSION;
+ // functions that cause preload to wait
+ // more can be added by using registerPreloadMethod(func)
+ p5.prototype._preloadMethods = {
+ loadJSON: p5.prototype,
+ loadImage: p5.prototype,
+ loadStrings: p5.prototype,
+ loadXML: p5.prototype,
+ loadBytes: p5.prototype,
+ loadTable: p5.prototype,
+ loadFont: p5.prototype,
+ loadModel: p5.prototype,
+ loadShader: p5.prototype
+ };
+ p5.prototype._registeredMethods = {
+ init: [
+ ],
+ pre: [
+ ],
+ post: [
+ ],
+ remove: [
+ ]
+ };
+ p5.prototype._registeredPreloadMethods = {
+ };
+ var _default = p5;
+ exports.default = _default;
+ },
+ {
+ './constants': 291,
+ './shim': 314,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.get-own-property-names': 202,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.for-each': 260,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 304: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module DOM
+ * @submodule DOM
+ * @for p5.Element
+ */
+ /**
+ * A class to describe an
+ * HTML element.
+ *
+ * Sketches can use many elements. Common elements include the drawing canvas,
+ * buttons, sliders, webcam feeds, and so on.
+ *
+ * All elements share the methods of the `p5.Element` class. They're created
+ * with functions such as createCanvas() and
+ * createButton().
+ *
+ * @class p5.Element
+ * @constructor
+ * @param {HTMLElement} elt wrapped DOM element.
+ * @param {p5} [pInst] pointer to p5 instance.
+ *
+ * @example
+ *
+ * // Disable the FES.
+ * p5.disableFriendlyErrors = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // The circle() function requires three arguments. The
+ * // next line would normally display a friendly error that
+ * // points this out. Instead, nothing happens and it fails
+ * // silently.
+ * circle(50, 50);
+ *
+ * describe('A gray square.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.Element = /*#__PURE__*/ function () {
+ function _class(elt, pInst) {
+ _classCallCheck(this, _class);
+ /**
+ * The element's underlying `HTMLElement` object.
+ *
+ * The
+ * HTMLElement
+ * object's properties and methods can be used directly.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a button element and
+ * // place it beneath the canvas.
+ * let btn = createButton('change');
+ * btn.position(0, 100);
+ *
+ * // Call randomColor() when
+ * // the button is pressed.
+ * btn.mousePressed(randomColor);
+ *
+ * describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ *
+ * @property elt
+ * @name elt
+ * @readOnly
+ */
+ this.elt = elt;
+ /**
+ * @private
+ * @type {p5.Element}
+ * @name _pInst
+ */
+ this._pInst = this._pixelsState = pInst;
+ this._events = {
+ };
+ /**
+ * A `Number` property that stores the element's width.
+ *
+ * @type {Number}
+ * @property width
+ * @name width
+ */
+ this.width = this.elt.offsetWidth;
+ /**
+ * A `Number` property that stores the element's height.
+ *
+ * @type {Number}
+ * @property height
+ * @name height
+ */
+ this.height = this.elt.offsetHeight;
+ } /**
+ * Attaches the element to a parent element.
+ *
+ * For example, a `<div></div>` element may be used as a box to
+ * hold two pieces of text, a header and a paragraph. The
+ * `<div></div>` is the parent element of both the header and
+ * paragraph.
+ *
+ * The parameter `parent` can have one of three types. `parent` can be a
+ * string with the parent element's ID, as in
+ * `myElement.parent('container')`. It can also be another
+ * p5.Element object, as in
+ * `myElement.parent(myDiv)`. Finally, `parent` can be an `HTMLElement`
+ * object, as in `myElement.parent(anotherElement)`.
+ *
+ * Calling `myElement.parent()` without an argument returns the element's
+ * parent.
+ *
+ * @method parent
+ * @param {String|p5.Element|Object} parent ID, p5.Element,
+ * or HTMLElement of desired parent element.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the border style for the
+ * // canvas.
+ * cnv.elt.style.border = '5px dashed deeppink';
+ *
+ * describe('A gray square with a pink border drawn with dashed lines.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Create a div element.
+ * let div = createDiv();
+ *
+ * // Place the div in the top-left corner.
+ * div.position(10, 20);
+ *
+ * // Set its width and height.
+ * div.size(80, 60);
+ *
+ * // Set its background color to white
+ * div.style('background-color', 'white');
+ *
+ * // Align any text to the center.
+ * div.style('text-align', 'center');
+ *
+ * // Set its ID to "container".
+ * div.id('container');
+ *
+ * // Create a paragraph element.
+ * let p = createP('p5*js');
+ *
+ * // Make the div its parent
+ * // using its ID "container".
+ * p.parent('container');
+ *
+ * describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Create rectangular div element.
+ * let div = createDiv();
+ *
+ * // Place the div in the top-left corner.
+ * div.position(10, 20);
+ *
+ * // Set its width and height.
+ * div.size(80, 60);
+ *
+ * // Set its background color and align
+ * // any text to the center.
+ * div.style('background-color', 'white');
+ * div.style('text-align', 'center');
+ *
+ * // Create a paragraph element.
+ * let p = createP('p5*js');
+ *
+ * // Make the div its parent.
+ * p.parent(div);
+ *
+ * describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method parent
+ * @return {p5.Element}
+ */
+
+ _createClass(_class, [
+ {
+ key: 'parent',
+ value: function parent(p) {
+ if (typeof p === 'undefined') {
+ return this.elt.parentNode;
+ }
+ if (typeof p === 'string') {
+ if (p[0] === '#') {
+ p = p.substring(1);
+ }
+ p = document.getElementById(p);
+ } else if (p instanceof _main.default.Element) {
+ p = p.elt;
+ }
+ p.appendChild(this.elt);
+ return this;
+ } /**
+ * Sets the element's ID using a given string.
+ *
+ * Calling `myElement.id()` without an argument returns its ID as a string.
+ *
+ * @method id
+ * @param {String} id ID of the element.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Create rectangular div element.
+ * let div = createDiv();
+ *
+ * // Place the div in the top-left corner.
+ * div.position(10, 20);
+ *
+ * // Set its width and height.
+ * div.size(80, 60);
+ *
+ * // Set its background color and align
+ * // any text to the center.
+ * div.style('background-color', 'white');
+ * div.style('text-align', 'center');
+ *
+ * // Create a paragraph element.
+ * let p = createP('p5*js');
+ *
+ * // Make the div its parent
+ * // using the underlying
+ * // HTMLElement.
+ * p.parent(div.elt);
+ *
+ * describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method id
+ * @return {String} ID of the element.
+ */
+
+ },
+ {
+ key: 'id',
+ value: function id(_id) {
+ if (typeof _id === 'undefined') {
+ return this.elt.id;
+ }
+ this.elt.id = _id;
+ this.width = this.elt.offsetWidth;
+ this.height = this.elt.offsetHeight;
+ return this;
+ } /**
+ * Adds a
+ * class attribute
+ * to the element using a given string.
+ *
+ * Calling `myElement.class()` without an argument returns a string with its current classes.
+ *
+ * @method class
+ * @param {String} class class to add.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the canvas' ID
+ * // to "mycanvas".
+ * cnv.id('mycanvas');
+ *
+ * // Get the canvas' ID.
+ * let id = cnv.id();
+ * text(id, 24, 54);
+ *
+ * describe('The text "mycanvas" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method class
+ * @return {String} element's classes, if any.
+ */
+
+ },
+ {
+ key: 'class',
+ value: function _class(c) {
+ if (typeof c === 'undefined') {
+ return this.elt.className;
+ }
+ this.elt.className = c;
+ return this;
+ } /**
+ * Calls a function when the mouse is pressed over the element.
+ *
+ * Calling `myElement.mousePressed(false)` disables the function.
+ *
+ * Note: Some mobile browsers may also trigger this event when the element
+ * receives a quick tap.
+ *
+ * @method mousePressed
+ * @param {Function|Boolean} fxn function to call when the mouse is
+ * pressed over the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Add the class "small" to the
+ * // canvas element.
+ * cnv.class('small');
+ *
+ * // Get the canvas element's class
+ * // and display it.
+ * let c = cnv.class();
+ * text(c, 35, 54);
+ *
+ * describe('The word "small" written in black on a gray canvas.');
+ *
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mousePressed',
+ value: function mousePressed(fxn) {
+ // Prepend the mouse property setters to the event-listener.
+ // This is required so that mouseButton is set correctly prior to calling the callback (fxn).
+ // For details, see https://github.com/processing/p5.js/issues/3087.
+ var eventPrependedFxn = function eventPrependedFxn(event) {
+ this._pInst._setProperty('mouseIsPressed', true);
+ this._pInst._setMouseButton(event);
+ // Pass along the return-value of the callback:
+ return fxn.call(this, event);
+ };
+ // Pass along the event-prepended form of the callback.
+ _main.default.Element._adjustListener('mousedown', eventPrependedFxn, this);
+ return this;
+ } /**
+ * Calls a function when the mouse is pressed twice over the element.
+ *
+ * Calling `myElement.doubleClicked(false)` disables the function.
+ *
+ * @method doubleClicked
+ * @param {Function|Boolean} fxn function to call when the mouse is
+ * double clicked over the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the canvas
+ * // is pressed.
+ * cnv.mousePressed(randomColor);
+ *
+ * describe('A gray square changes color when the mouse is pressed.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'doubleClicked',
+ value: function doubleClicked(fxn) {
+ _main.default.Element._adjustListener('dblclick', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the mouse wheel scrolls over the element.
+ *
+ * The callback function, `fxn`, is passed an `event` object. `event` has
+ * two numeric properties, `deltaY` and `deltaX`. `event.deltaY` is
+ * negative if the mouse wheel rotates away from the user. It's positive if
+ * the mouse wheel rotates toward the user. `event.deltaX` is positive if
+ * the mouse wheel moves to the right. It's negative if the mouse wheel moves
+ * to the left.
+ *
+ * Calling `myElement.mouseWheel(false)` disables the function.
+ *
+ * @method mouseWheel
+ * @param {Function|Boolean} fxn function to call when the mouse wheel is
+ * scrolled over the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the
+ * // canvas is double-clicked.
+ * cnv.doubleClicked(randomColor);
+ *
+ * describe('A gray square changes color when the user double-clicks the canvas.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the
+ * // mouse wheel moves.
+ * cnv.mouseWheel(randomColor);
+ *
+ * describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mouseWheel',
+ value: function mouseWheel(fxn) {
+ _main.default.Element._adjustListener('wheel', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the mouse is released over the element.
+ *
+ * Calling `myElement.mouseReleased(false)` disables the function.
+ *
+ * Note: Some mobile browsers may also trigger this event when the element
+ * receives a quick tap.
+ *
+ * @method mouseReleased
+ * @param {Function|Boolean} fxn function to call when the mouse is
+ * pressed over the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call changeBackground() when the
+ * // mouse wheel moves.
+ * cnv.mouseWheel(changeBackground);
+ *
+ * describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.');
+ * }
+ *
+ * function changeBackground(event) {
+ * // Change the background color
+ * // based on deltaY.
+ * if (event.deltaY > 0) {
+ * background('deeppink');
+ * } else if (event.deltaY < 0) {
+ * background('cornflowerblue');
+ * } else {
+ * background(200);
+ * }
+ *
+ * // Draw a shape based on deltaX.
+ * if (event.deltaX > 0) {
+ * circle(50, 50, 20);
+ * } else if (event.deltaX < 0) {
+ * square(40, 40, 20);
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mouseReleased',
+ value: function mouseReleased(fxn) {
+ _main.default.Element._adjustListener('mouseup', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the mouse is pressed and released over the element.
+ *
+ * Calling `myElement.mouseReleased(false)` disables the function.
+ *
+ * Note: Some mobile browsers may also trigger this event when the element
+ * receives a quick tap.
+ *
+ * @method mouseClicked
+ * @param {Function|Boolean} fxn function to call when the mouse is
+ * pressed and released over the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when a
+ * // mouse press ends.
+ * cnv.mouseReleased(randomColor);
+ *
+ * describe('A gray square changes color when the user releases a mouse press.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mouseClicked',
+ value: function mouseClicked(fxn) {
+ _main.default.Element._adjustListener('click', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the mouse moves over the element.
+ *
+ * Calling `myElement.mouseMoved(false)` disables the function.
+ *
+ * @method mouseMoved
+ * @param {Function|Boolean} fxn function to call when the mouse
+ * moves over the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when a
+ * // mouse press ends.
+ * cnv.mouseClicked(randomColor);
+ *
+ * describe('A gray square changes color when the user releases a mouse press.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mouseMoved',
+ value: function mouseMoved(fxn) {
+ _main.default.Element._adjustListener('mousemove', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the mouse moves onto the element.
+ *
+ * Calling `myElement.mouseOver(false)` disables the function.
+ *
+ * @method mouseOver
+ * @param {Function|Boolean} fxn function to call when the mouse
+ * moves onto the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the
+ * // mouse moves.
+ * cnv.mouseMoved(randomColor);
+ *
+ * describe('A gray square changes color when the mouse moves over the canvas.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mouseOver',
+ value: function mouseOver(fxn) {
+ _main.default.Element._adjustListener('mouseover', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the mouse moves off the element.
+ *
+ * Calling `myElement.mouseOut(false)` disables the function.
+ *
+ * @method mouseOut
+ * @param {Function|Boolean} fxn function to call when the mouse
+ * moves off the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the
+ * // mouse moves onto the canvas.
+ * cnv.mouseOver(randomColor);
+ *
+ * describe('A gray square changes color when the mouse moves onto the canvas.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mouseOut',
+ value: function mouseOut(fxn) {
+ _main.default.Element._adjustListener('mouseout', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the element is touched.
+ *
+ * Calling `myElement.touchStarted(false)` disables the function.
+ *
+ * Note: Touch functions only work on mobile devices.
+ *
+ * @method touchStarted
+ * @param {Function|Boolean} fxn function to call when the touch
+ * starts.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the
+ * // mouse moves off the canvas.
+ * cnv.mouseOut(randomColor);
+ *
+ * describe('A gray square changes color when the mouse moves off the canvas.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'touchStarted',
+ value: function touchStarted(fxn) {
+ _main.default.Element._adjustListener('touchstart', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the user touches the element and moves.
+ *
+ * Calling `myElement.touchMoved(false)` disables the function.
+ *
+ * Note: Touch functions only work on mobile devices.
+ *
+ * @method touchMoved
+ * @param {Function|Boolean} fxn function to call when the touch
+ * moves over the element.
+ * `false` disables the function.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the
+ * // user touches the canvas.
+ * cnv.touchStarted(randomColor);
+ *
+ * describe('A gray square changes color when the user touches the canvas.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'touchMoved',
+ value: function touchMoved(fxn) {
+ _main.default.Element._adjustListener('touchmove', fxn, this);
+ return this;
+ } /**
+ * Calls a function when the user stops touching the element.
+ *
+ * Calling `myElement.touchMoved(false)` disables the function.
+ *
+ * Note: Touch functions only work on mobile devices.
+ *
+ * @method touchEnded
+ * @param {Function|Boolean} fxn function to call when the touch
+ * ends.
+ * `false` disables the function.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the
+ * // user touches the canvas
+ * // and moves.
+ * cnv.touchMoved(randomColor);
+ *
+ * describe('A gray square changes color when the user touches the canvas and moves.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'touchEnded',
+ value: function touchEnded(fxn) {
+ _main.default.Element._adjustListener('touchend', fxn, this);
+ return this;
+ } /**
+ * Calls a function when a file is dragged over the element.
+ *
+ * Calling `myElement.dragOver(false)` disables the function.
+ *
+ * @method dragOver
+ * @param {Function|Boolean} fxn function to call when the file is
+ * dragged over the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call randomColor() when the
+ * // user touches the canvas,
+ * // then lifts their finger.
+ * cnv.touchEnded(randomColor);
+ *
+ * describe('A gray square changes color when the user touches the canvas, then lifts their finger.');
+ * }
+ *
+ * // Paint the background either
+ * // red, yellow, blue, or green.
+ * function randomColor() {
+ * let c = random(['red', 'yellow', 'blue', 'green']);
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'dragOver',
+ value: function dragOver(fxn) {
+ _main.default.Element._adjustListener('dragover', fxn, this);
+ return this;
+ } /**
+ * Calls a function when a file is dragged off the element.
+ *
+ * Calling `myElement.dragLeave(false)` disables the function.
+ *
+ * @method dragLeave
+ * @param {Function|Boolean} fxn function to call when the file is
+ * dragged off the element.
+ * `false` disables the function.
+ * @chainable
+ * @example
+ *
+ * // Drag a file over the canvas to test.
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call helloFile() when a
+ * // file is dragged over
+ * // the canvas.
+ * cnv.dragOver(helloFile);
+ *
+ * describe('A gray square. The text "hello, file" appears when a file is dragged over the square.');
+ * }
+ *
+ * function helloFile() {
+ * text('hello, file', 50, 50);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'dragLeave',
+ value: function dragLeave(fxn) {
+ _main.default.Element._adjustListener('dragleave', fxn, this);
+ return this;
+ } /**
+ *
+ * @private
+ * @static
+ * @param {String} ev
+ * @param {Boolean|Function} fxn
+ * @param {Element} ctx
+ * @chainable
+ * @alt
+ * General handler for event attaching and detaching
+ */
+
+ },
+ {
+ key: '_setProperty',
+ /**
+ * Helper fxn for sharing pixel methods
+ */
+ value: function _setProperty(prop, value) {
+ this[prop] = value;
+ }
+ }
+ ], [
+ {
+ key: '_adjustListener',
+ value: function _adjustListener(ev, fxn, ctx) {
+ if (fxn === false) {
+ _main.default.Element._detachListener(ev, ctx);
+ } else {
+ _main.default.Element._attachListener(ev, fxn, ctx);
+ }
+ return this;
+ } /**
+ *
+ * @private
+ * @static
+ * @param {String} ev
+ * @param {Function} fxn
+ * @param {Element} ctx
+ */
+
+ },
+ {
+ key: '_attachListener',
+ value: function _attachListener(ev, fxn, ctx) {
+ // detach the old listener if there was one
+ if (ctx._events[ev]) {
+ _main.default.Element._detachListener(ev, ctx);
+ }
+ var f = fxn.bind(ctx);
+ ctx.elt.addEventListener(ev, f, false);
+ ctx._events[ev] = f;
+ } /**
+ *
+ * @private
+ * @static
+ * @param {String} ev
+ * @param {Element} ctx
+ */
+
+ },
+ {
+ key: '_detachListener',
+ value: function _detachListener(ev, ctx) {
+ var f = ctx._events[ev];
+ ctx.elt.removeEventListener(ev, f, false);
+ ctx._events[ev] = null;
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Element;
+ exports.default = _default;
+ },
+ {
+ './main': 303
+ }
+ ],
+ 305: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ } /**
+ * @module Rendering
+ * @submodule Rendering
+ * @for p5
+ */
+ /**
+ * A class to describe a drawing surface that's separate from the main canvas.
+ *
+ * Each `p5.Graphics` object provides a dedicated drawing surface called a
+ * *graphics buffer*. Graphics buffers are helpful when drawing should happen
+ * offscreen. For example, separate scenes can be drawn offscreen and
+ * displayed only when needed.
+ *
+ * `p5.Graphics` objects have nearly all the drawing features of the main
+ * canvas. For example, calling the method `myGraphics.circle(50, 50, 20)`
+ * draws to the graphics buffer. The resulting image can be displayed on the
+ * main canvas by passing the `p5.Graphics` object to the
+ * image() function, as in `image(myGraphics, 0, 0)`.
+ *
+ * Note: createGraphics() is the recommended
+ * way to create an instance of this class.
+ *
+ * @class p5.Graphics
+ * @constructor
+ * @extends p5.Element
+ * @param {Number} width width of the graphics buffer in pixels.
+ * @param {Number} height height of the graphics buffer in pixels.
+ * @param {Constant} renderer renderer to use, either P2D or WEBGL.
+ * @param {p5} [pInst] sketch instance.
+ * @param {HTMLCanvasElement} [canvas] existing `<canvas>` element to use.
+ *
+ * @example
+ *
+ * // Drag a file over, then off
+ * // the canvas to test.
+ *
+ * function setup() {
+ * // Create a canvas element and
+ * // assign it to cnv.
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call byeFile() when a
+ * // file is dragged over,
+ * // then off the canvas.
+ * cnv.dragLeave(byeFile);
+ *
+ * describe('A gray square. The text "bye, file" appears when a file is dragged over, then off the square.');
+ * }
+ *
+ * function byeFile() {
+ * text('bye, file', 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Graphics object.
+ * pg = createGraphics(50, 50);
+ *
+ * // Draw to the p5.Graphics object.
+ * pg.background(100);
+ * pg.circle(25, 25, 20);
+ *
+ * describe('A dark gray square with a white circle at its center drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Display the p5.Graphics object.
+ * image(pg, 25, 25);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.Graphics = /*#__PURE__*/ function (_p5$Element) {
+ _inherits(_class, _p5$Element);
+ var _super = _createSuper(_class);
+ function _class(w, h, renderer, pInst, canvas) {
+ var _this;
+ _classCallCheck(this, _class);
+ var canvasTemp;
+ if (canvas) {
+ canvasTemp = canvas;
+ } else {
+ canvasTemp = document.createElement('canvas');
+ }
+ _this = _super.call(this, canvasTemp, pInst);
+ _this.canvas = canvasTemp;
+ var r = renderer || constants.P2D;
+ var node = pInst._userNode || document.body;
+ if (!canvas) {
+ node.appendChild(_this.canvas);
+ } // bind methods and props of p5 to the new object
+
+ for (var p in _main.default.prototype) {
+ if (!_this[p]) {
+ if (typeof _main.default.prototype[p] === 'function') {
+ _this[p] = _main.default.prototype[p].bind(_assertThisInitialized(_this));
+ } else {
+ _this[p] = _main.default.prototype[p];
+ }
+ }
+ }
+ _main.default.prototype._initializeInstanceVariables.apply(_assertThisInitialized(_this));
+ _this.width = w;
+ _this.height = h;
+ _this._pixelDensity = pInst._pixelDensity;
+ if (r === constants.WEBGL) {
+ _this._renderer = new _main.default.RendererGL(_this.canvas, _assertThisInitialized(_this), false);
+ var _this$_renderer$_adju = _this._renderer._adjustDimensions(w, h),
+ adjustedWidth = _this$_renderer$_adju.adjustedWidth,
+ adjustedHeight = _this$_renderer$_adju.adjustedHeight;
+ w = adjustedWidth;
+ h = adjustedHeight;
+ } else {
+ _this._renderer = new _main.default.Renderer2D(_this.canvas, _assertThisInitialized(_this), false);
+ }
+ pInst._elements.push(_assertThisInitialized(_this));
+ Object.defineProperty(_assertThisInitialized(_this), 'deltaTime', {
+ get: function get() {
+ return this._pInst.deltaTime;
+ }
+ });
+ _this._renderer.resize(w, h);
+ _this._renderer._applyDefaults();
+ return _possibleConstructorReturn(_this, _assertThisInitialized(_this));
+ } /**
+ * Resets the graphics buffer's transformations and lighting.
+ *
+ * By default, the main canvas resets certain transformation and lighting
+ * values each time draw() executes. `p5.Graphics`
+ * objects must reset these values manually by calling `myGraphics.reset()`.
+ *
+ * @method reset
+ *
+ * @example
+ *
+ * // Click the canvas to display the graphics buffer.
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Graphics object.
+ * pg = createGraphics(50, 50);
+ *
+ * describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the background color.
+ * let bg = frameCount % 255;
+ *
+ * // Draw to the p5.Graphics object.
+ * pg.background(bg);
+ *
+ * // Display the p5.Graphics object while
+ * // the user presses the mouse.
+ * if (mouseIsPressed === true) {
+ * image(pg, 25, 25);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Graphics object.
+ * pg = createGraphics(60, 60);
+ *
+ * describe('A white circle moves downward slowly within a dark square. The circle resets at the top of the dark square when the user presses the mouse.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the p5.Graphics object's coordinate system.
+ * // The translation accumulates; the white circle moves.
+ * pg.translate(0, 0.1);
+ *
+ * // Draw to the p5.Graphics object.
+ * pg.background(100);
+ * pg.circle(30, 0, 10);
+ *
+ * // Display the p5.Graphics object.
+ * image(pg, 20, 20);
+ *
+ * // Translate the main canvas' coordinate system.
+ * // The translation doesn't accumulate; the dark
+ * // square is always in the same place.
+ * translate(0, 0.1);
+ *
+ * // Reset the p5.Graphics object when the
+ * // user presses the mouse.
+ * if (mouseIsPressed === true) {
+ * pg.reset();
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Graphics object.
+ * pg = createGraphics(60, 60);
+ *
+ * describe('A white circle at the center of a dark gray square. The image is drawn on a light gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the p5.Graphics object's coordinate system.
+ * pg.translate(30, 30);
+ *
+ * // Draw to the p5.Graphics object.
+ * pg.background(100);
+ * pg.circle(0, 0, 10);
+ *
+ * // Display the p5.Graphics object.
+ * image(pg, 20, 20);
+ *
+ * // Reset the p5.Graphics object automatically.
+ * pg.reset();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Graphics object using WebGL mode.
+ * pg = createGraphics(100, 100, WEBGL);
+ *
+ * describe("A sphere lit from above with a red light. The sphere's surface becomes glossy while the user clicks and holds the mouse.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Add a red point light from the top-right.
+ * pg.pointLight(255, 0, 0, 50, -100, 50);
+ *
+ * // Style the sphere.
+ * // It should appear glossy when the
+ * // lighting values are reset.
+ * pg.noStroke();
+ * pg.specularMaterial(255);
+ * pg.shininess(100);
+ *
+ * // Draw the sphere.
+ * pg.sphere(30);
+ *
+ * // Display the p5.Graphics object.
+ * image(pg, -50, -50);
+ *
+ * // Reset the p5.Graphics object when
+ * // the user presses the mouse.
+ * if (mouseIsPressed === true) {
+ * pg.reset();
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'reset',
+ value: function reset() {
+ this._renderer.resetMatrix();
+ if (this._renderer.isP3D) {
+ this._renderer._update();
+ }
+ } /**
+ * Removes the graphics buffer from the web page.
+ *
+ * Calling `myGraphics.remove()` removes the graphics buffer's
+ * `<canvas>` element from the web page. The graphics buffer also uses
+ * a bit of memory on the CPU that can be freed like so:
+ *
+ * ```js
+ * // Remove the graphics buffer from the web page.
+ * myGraphics.remove();
+ *
+ * // Delete the graphics buffer from CPU memory.
+ * myGraphics = undefined;
+ * ```
+ *
+ * Note: All variables that reference the graphics buffer must be assigned
+ * the value `undefined` to delete the graphics buffer from CPU memory. If any
+ * variable still refers to the graphics buffer, then it won't be garbage
+ * collected.
+ *
+ * @method remove
+ *
+ * @example
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Graphics object using WebGL mode.
+ * pg = createGraphics(100, 100, WEBGL);
+ *
+ * describe('A sphere with a glossy surface is lit from the top-right by a red light.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Add a red point light from the top-right.
+ * pg.pointLight(255, 0, 0, 50, -100, 50);
+ *
+ * // Style the sphere.
+ * pg.noStroke();
+ * pg.specularMaterial(255);
+ * pg.shininess(100);
+ *
+ * // Draw the sphere.
+ * pg.sphere(30);
+ *
+ * // Display the p5.Graphics object.
+ * image(pg, 0, 0);
+ *
+ * // Reset the p5.Graphics object automatically.
+ * pg.reset();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'remove',
+ value: function remove() {
+ if (this.elt.parentNode) {
+ this.elt.parentNode.removeChild(this.elt);
+ }
+ var idx = this._pInst._elements.indexOf(this);
+ if (idx !== - 1) {
+ this._pInst._elements.splice(idx, 1);
+ }
+ for (var elt_ev in this._events) {
+ this.elt.removeEventListener(elt_ev, this._events[elt_ev]);
+ }
+ } /**
+ * Creates a new p5.Framebuffer object with
+ * the same WebGL context as the graphics buffer.
+ *
+ * p5.Framebuffer objects are separate drawing
+ * surfaces that can be used as textures in WebGL mode. They're similar to
+ * p5.Graphics objects and generally run much
+ * faster when used as textures. Creating a
+ * p5.Framebuffer object in the same context
+ * as the graphics buffer makes this speedup possible.
+ *
+ * The parameter, `options`, is optional. An object can be passed to configure
+ * the p5.Framebuffer object. The available
+ * properties are:
+ *
+ * - `format`: data format of the texture, either `UNSIGNED_BYTE`, `FLOAT`, or `HALF_FLOAT`. Default is `UNSIGNED_BYTE`.
+ * - `channels`: whether to store `RGB` or `RGBA` color channels. Default is to match the graphics buffer which is `RGBA`.
+ * - `depth`: whether to include a depth buffer. Default is `true`.
+ * - `depthFormat`: data format of depth information, either `UNSIGNED_INT` or `FLOAT`. Default is `FLOAT`.
+ * - `stencil`: whether to include a stencil buffer for masking. `depth` must be `true` for this feature to work. Defaults to the value of `depth` which is `true`.
+ * - `antialias`: whether to perform anti-aliasing. If set to `true`, as in `{ antialias: true }`, 2 samples will be used by default. The number of samples can also be set, as in `{ antialias: 4 }`. Default is to match setAttributes() which is `false` (`true` in Safari).
+ * - `width`: width of the p5.Framebuffer object. Default is to always match the graphics buffer width.
+ * - `height`: height of the p5.Framebuffer object. Default is to always match the graphics buffer height.
+ * - `density`: pixel density of the p5.Framebuffer object. Default is to always match the graphics buffer pixel density.
+ * - `textureFiltering`: how to read values from the p5.Framebuffer object. Either `LINEAR` (nearby pixels will be interpolated) or `NEAREST` (no interpolation). Generally, use `LINEAR` when using the texture as an image and `NEAREST` if reading the texture as data. Default is `LINEAR`.
+ *
+ * If the `width`, `height`, or `density` attributes are set, they won't
+ * automatically match the graphics buffer and must be changed manually.
+ *
+ * @method createFramebuffer
+ * @param {Object} [options] configuration options.
+ * @return {p5.Framebuffer} new framebuffer.
+ *
+ * @example
+ *
+ * // Double-click to remove the p5.Graphics object.
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Graphics object.
+ * pg = createGraphics(60, 60);
+ *
+ * // Draw to the p5.Graphics object.
+ * pg.background(100);
+ * pg.circle(30, 30, 20);
+ *
+ * describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Display the p5.Graphics object if
+ * // it's available.
+ * if (pg) {
+ * image(pg, 20, 20);
+ * }
+ * }
+ *
+ * // Remove the p5.Graphics object when the
+ * // the user double-clicks.
+ * function doubleClicked() {
+ * // Remove the p5.Graphics object from the web page.
+ * pg.remove();
+ *
+ * // Delete the p5.Graphics object from CPU memory.
+ * pg = undefined;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and hold a mouse button to change shapes.
+ *
+ * let pg;
+ * let torusLayer;
+ * let boxLayer;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Graphics object using WebGL mode.
+ * pg = createGraphics(100, 100, WEBGL);
+ *
+ * // Create the p5.Framebuffer objects.
+ * torusLayer = pg.createFramebuffer();
+ * boxLayer = pg.createFramebuffer();
+ *
+ * describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');
+ * }
+ *
+ * function draw() {
+ * // Update and draw the layers offscreen.
+ * drawTorus();
+ * drawBox();
+ *
+ * // Choose the layer to display.
+ * let layer;
+ * if (mouseIsPressed === true) {
+ * layer = boxLayer;
+ * } else {
+ * layer = torusLayer;
+ * }
+ *
+ * // Draw to the p5.Graphics object.
+ * pg.background(50);
+ *
+ * // Iterate from left to right.
+ * for (let x = -50; x < 50; x += 25) {
+ * // Iterate from top to bottom.
+ * for (let y = -50; y < 50; y += 25) {
+ * // Draw the layer to the p5.Graphics object
+ * pg.image(layer, x, y, 25, 25);
+ * }
+ * }
+ *
+ * // Display the p5.Graphics object.
+ * image(pg, 0, 0);
+ * }
+ *
+ * // Update and draw the torus layer offscreen.
+ * function drawTorus() {
+ * // Start drawing to the torus p5.Framebuffer.
+ * torusLayer.begin();
+ *
+ * // Clear the drawing surface.
+ * pg.clear();
+ *
+ * // Turn on the lights.
+ * pg.lights();
+ *
+ * // Rotate the coordinate system.
+ * pg.rotateX(frameCount * 0.01);
+ * pg.rotateY(frameCount * 0.01);
+ *
+ * // Style the torus.
+ * pg.noStroke();
+ *
+ * // Draw the torus.
+ * pg.torus(20);
+ *
+ * // Start drawing to the torus p5.Framebuffer.
+ * torusLayer.end();
+ * }
+ *
+ * // Update and draw the box layer offscreen.
+ * function drawBox() {
+ * // Start drawing to the box p5.Framebuffer.
+ * boxLayer.begin();
+ *
+ * // Clear the drawing surface.
+ * pg.clear();
+ *
+ * // Turn on the lights.
+ * pg.lights();
+ *
+ * // Rotate the coordinate system.
+ * pg.rotateX(frameCount * 0.01);
+ * pg.rotateY(frameCount * 0.01);
+ *
+ * // Style the box.
+ * pg.noStroke();
+ *
+ * // Draw the box.
+ * pg.box(30);
+ *
+ * // Start drawing to the box p5.Framebuffer.
+ * boxLayer.end();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'createFramebuffer',
+ value: function createFramebuffer(options) {
+ return new _main.default.Framebuffer(this, options);
+ }
+ }
+ ]);
+ return _class;
+ }(_main.default.Element);
+ var _default = _main.default.Graphics;
+ exports.default = _default;
+ },
+ {
+ './constants': 291,
+ './main': 303,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 306: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ } /**
+ * @module Rendering
+ * @submodule Rendering
+ * @for p5
+ */
+ /**
+ * Main graphics and rendering context, as well as the base API
+ * implementation for p5.js "core". To be used as the superclass for
+ * Renderer2D and Renderer3D classes, respectively.
+ *
+ * @class p5.Renderer
+ * @constructor
+ * @extends p5.Element
+ * @param {HTMLElement} elt DOM node that is wrapped
+ * @param {p5} [pInst] pointer to p5 instance
+ * @param {Boolean} [isMainCanvas] whether we're using it as main canvas
+ */
+
+ var Renderer = /*#__PURE__*/ function (_p5$Element) {
+ _inherits(Renderer, _p5$Element);
+ var _super = _createSuper(Renderer);
+ function Renderer(elt, pInst, isMainCanvas) {
+ var _this;
+ _classCallCheck(this, Renderer);
+ _this = _super.call(this, elt, pInst);
+ _this.canvas = elt;
+ _this._pixelsState = pInst;
+ if (isMainCanvas) {
+ _this._isMainCanvas = true;
+ // for pixel method sharing with pimage
+ _this._pInst._setProperty('_curElement', _assertThisInitialized(_this));
+ _this._pInst._setProperty('canvas', _this.canvas);
+ _this._pInst._setProperty('width', _this.width);
+ _this._pInst._setProperty('height', _this.height);
+ } else {
+ // hide if offscreen buffer by default
+ _this.canvas.style.display = 'none';
+ _this._styles = [
+ ]; // non-main elt styles stored in p5.Renderer
+ }
+ _this._clipping = false;
+ _this._clipInvert = false;
+ _this._textSize = 12;
+ _this._textLeading = 15;
+ _this._textFont = 'sans-serif';
+ _this._textStyle = constants.NORMAL;
+ _this._textAscent = null;
+ _this._textDescent = null;
+ _this._textAlign = constants.LEFT;
+ _this._textBaseline = constants.BASELINE;
+ _this._textWrap = constants.WORD;
+ _this._rectMode = constants.CORNER;
+ _this._ellipseMode = constants.CENTER;
+ _this._curveTightness = 0;
+ _this._imageMode = constants.CORNER;
+ _this._tint = null;
+ _this._doStroke = true;
+ _this._doFill = true;
+ _this._strokeSet = false;
+ _this._fillSet = false;
+ _this._leadingSet = false;
+ _this._pushPopDepth = 0;
+ return _this;
+ } // the renderer should return a 'style' object that it wishes to
+ // store on the push stack.
+
+ _createClass(Renderer, [
+ {
+ key: 'push',
+ value: function push() {
+ this._pushPopDepth++;
+ return {
+ properties: {
+ _doStroke: this._doStroke,
+ _strokeSet: this._strokeSet,
+ _doFill: this._doFill,
+ _fillSet: this._fillSet,
+ _tint: this._tint,
+ _imageMode: this._imageMode,
+ _rectMode: this._rectMode,
+ _ellipseMode: this._ellipseMode,
+ _textFont: this._textFont,
+ _textLeading: this._textLeading,
+ _leadingSet: this._leadingSet,
+ _textSize: this._textSize,
+ _textAlign: this._textAlign,
+ _textBaseline: this._textBaseline,
+ _textStyle: this._textStyle,
+ _textWrap: this._textWrap
+ }
+ };
+ } // a pop() operation is in progress
+ // the renderer is passed the 'style' object that it returned
+ // from its push() method.
+
+ },
+ {
+ key: 'pop',
+ value: function pop(style) {
+ this._pushPopDepth--;
+ if (style.properties) {
+ // copy the style properties back into the renderer
+ Object.assign(this, style.properties);
+ }
+ }
+ },
+ {
+ key: 'beginClip',
+ value: function beginClip() {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+ };
+ if (this._clipping) {
+ throw new Error('It looks like you\'re trying to clip while already in the middle of clipping. Did you forget to endClip()?');
+ }
+ this._clipping = true;
+ this._clipInvert = options.invert;
+ }
+ },
+ {
+ key: 'endClip',
+ value: function endClip() {
+ if (!this._clipping) {
+ throw new Error('It looks like you\'ve called endClip() without beginClip(). Did you forget to call beginClip() first?');
+ }
+ this._clipping = false;
+ } /**
+ * Resize our canvas element.
+ */
+
+ },
+ {
+ key: 'resize',
+ value: function resize(w, h) {
+ this.width = w;
+ this.height = h;
+ this.elt.width = w * this._pInst._pixelDensity;
+ this.elt.height = h * this._pInst._pixelDensity;
+ this.elt.style.width = ''.concat(w, 'px');
+ this.elt.style.height = ''.concat(h, 'px');
+ if (this._isMainCanvas) {
+ this._pInst._setProperty('width', this.width);
+ this._pInst._setProperty('height', this.height);
+ }
+ }
+ },
+ {
+ key: 'get',
+ value: function get(x, y, w, h) {
+ var pixelsState = this._pixelsState;
+ var pd = pixelsState._pixelDensity;
+ var canvas = this.canvas;
+ if (typeof x === 'undefined' && typeof y === 'undefined') {
+ // get()
+ x = y = 0;
+ w = pixelsState.width;
+ h = pixelsState.height;
+ } else {
+ x *= pd;
+ y *= pd;
+ if (typeof w === 'undefined' && typeof h === 'undefined') {
+ // get(x,y)
+ if (x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) {
+ return [0,
+ 0,
+ 0,
+ 0];
+ }
+ return this._getPixel(x, y);
+ } // get(x,y,w,h)
+
+ }
+ var region = new _main.default.Image(w * pd, h * pd);
+ region.pixelDensity(pd);
+ region.canvas.getContext('2d').drawImage(canvas, x, y, w * pd, h * pd, 0, 0, w * pd, h * pd);
+ return region;
+ }
+ },
+ {
+ key: 'textLeading',
+ value: function textLeading(l) {
+ if (typeof l === 'number') {
+ this._setProperty('_leadingSet', true);
+ this._setProperty('_textLeading', l);
+ return this._pInst;
+ }
+ return this._textLeading;
+ }
+ },
+ {
+ key: 'textStyle',
+ value: function textStyle(s) {
+ if (s) {
+ if (s === constants.NORMAL || s === constants.ITALIC || s === constants.BOLD || s === constants.BOLDITALIC) {
+ this._setProperty('_textStyle', s);
+ }
+ return this._applyTextProperties();
+ }
+ return this._textStyle;
+ }
+ },
+ {
+ key: 'textAscent',
+ value: function textAscent() {
+ if (this._textAscent === null) {
+ this._updateTextMetrics();
+ }
+ return this._textAscent;
+ }
+ },
+ {
+ key: 'textDescent',
+ value: function textDescent() {
+ if (this._textDescent === null) {
+ this._updateTextMetrics();
+ }
+ return this._textDescent;
+ }
+ },
+ {
+ key: 'textAlign',
+ value: function textAlign(h, v) {
+ if (typeof h !== 'undefined') {
+ this._setProperty('_textAlign', h);
+ if (typeof v !== 'undefined') {
+ this._setProperty('_textBaseline', v);
+ }
+ return this._applyTextProperties();
+ } else {
+ return {
+ horizontal: this._textAlign,
+ vertical: this._textBaseline
+ };
+ }
+ }
+ },
+ {
+ key: 'textWrap',
+ value: function textWrap(wrapStyle) {
+ this._setProperty('_textWrap', wrapStyle);
+ return this._textWrap;
+ }
+ },
+ {
+ key: 'text',
+ value: function text(str, x, y, maxWidth, maxHeight) {
+ var p = this._pInst;
+ var textWrapStyle = this._textWrap;
+ var lines;
+ var line;
+ var testLine;
+ var testWidth;
+ var words;
+ var chars;
+ var shiftedY;
+ var finalMaxHeight = Number.MAX_VALUE;
+ // fix for #5785 (top of bounding box)
+ var finalMinHeight = y;
+ if (!(this._doFill || this._doStroke)) {
+ return;
+ }
+ if (typeof str === 'undefined') {
+ return;
+ } else if (typeof str !== 'string') {
+ str = str.toString();
+ } // Replaces tabs with double-spaces and splits string on any line
+ // breaks present in the original string
+
+ str = str.replace(/(\t)/g, ' ');
+ lines = str.split('\n');
+ if (typeof maxWidth !== 'undefined') {
+ if (this._rectMode === constants.CENTER) {
+ x -= maxWidth / 2;
+ }
+ switch (this._textAlign) {
+ case constants.CENTER:
+ x += maxWidth / 2;
+ break;
+ case constants.RIGHT:
+ x += maxWidth;
+ break;
+ }
+ if (typeof maxHeight !== 'undefined') {
+ if (this._rectMode === constants.CENTER) {
+ y -= maxHeight / 2;
+ finalMinHeight -= maxHeight / 2;
+ }
+ var originalY = y;
+ var ascent = p.textAscent();
+ switch (this._textBaseline) {
+ case constants.BOTTOM:
+ shiftedY = y + maxHeight;
+ y = Math.max(shiftedY, y);
+ // fix for #5785 (top of bounding box)
+ finalMinHeight += ascent;
+ break;
+ case constants.CENTER:
+ shiftedY = y + maxHeight / 2;
+ y = Math.max(shiftedY, y);
+ // fix for #5785 (top of bounding box)
+ finalMinHeight += ascent / 2;
+ break;
+ } // remember the max-allowed y-position for any line (fix to #928)
+
+ finalMaxHeight = y + maxHeight - ascent;
+ // fix for #5785 (bottom of bounding box)
+ if (this._textBaseline === constants.CENTER) {
+ finalMaxHeight = originalY + maxHeight - ascent / 2;
+ }
+ } else {
+ // no text-height specified, show warning for BOTTOM / CENTER
+ if (this._textBaseline === constants.BOTTOM || this._textBaseline === constants.CENTER) {
+ // use rectHeight as an approximation for text height
+ var rectHeight = p.textSize() * this._textLeading;
+ finalMinHeight = y - rectHeight / 2;
+ finalMaxHeight = y + rectHeight / 2;
+ }
+ } // Render lines of text according to settings of textWrap
+ // Splits lines at spaces, for loop adds one word + space
+ // at a time and tests length with next word added
+
+ if (textWrapStyle === constants.WORD) {
+ var nlines = [
+ ];
+ for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+ line = '';
+ words = lines[lineIndex].split(' ');
+ for (var wordIndex = 0; wordIndex < words.length; wordIndex++) {
+ testLine = ''.concat(line + words[wordIndex]) + ' ';
+ testWidth = this.textWidth(testLine);
+ if (testWidth > maxWidth && line.length > 0) {
+ nlines.push(line);
+ line = ''.concat(words[wordIndex]) + ' ';
+ } else {
+ line = testLine;
+ }
+ }
+ nlines.push(line);
+ }
+ var offset = 0;
+ if (this._textBaseline === constants.CENTER) {
+ offset = (nlines.length - 1) * p.textLeading() / 2;
+ } else if (this._textBaseline === constants.BOTTOM) {
+ offset = (nlines.length - 1) * p.textLeading();
+ }
+ for (var _lineIndex = 0; _lineIndex < lines.length; _lineIndex++) {
+ line = '';
+ words = lines[_lineIndex].split(' ');
+ for (var _wordIndex = 0; _wordIndex < words.length; _wordIndex++) {
+ testLine = ''.concat(line + words[_wordIndex]) + ' ';
+ testWidth = this.textWidth(testLine);
+ if (testWidth > maxWidth && line.length > 0) {
+ this._renderText(p, line.trim(), x, y - offset, finalMaxHeight, finalMinHeight);
+ line = ''.concat(words[_wordIndex]) + ' ';
+ y += p.textLeading();
+ } else {
+ line = testLine;
+ }
+ }
+ this._renderText(p, line.trim(), x, y - offset, finalMaxHeight, finalMinHeight);
+ y += p.textLeading();
+ }
+ } else {
+ var _nlines = [
+ ];
+ for (var _lineIndex2 = 0; _lineIndex2 < lines.length; _lineIndex2++) {
+ line = '';
+ chars = lines[_lineIndex2].split('');
+ for (var charIndex = 0; charIndex < chars.length; charIndex++) {
+ testLine = ''.concat(line + chars[charIndex]);
+ testWidth = this.textWidth(testLine);
+ if (testWidth <= maxWidth) {
+ line += chars[charIndex];
+ } else if (testWidth > maxWidth && line.length > 0) {
+ _nlines.push(line);
+ line = ''.concat(chars[charIndex]);
+ }
+ }
+ }
+ _nlines.push(line);
+ var _offset = 0;
+ if (this._textBaseline === constants.CENTER) {
+ _offset = (_nlines.length - 1) * p.textLeading() / 2;
+ } else if (this._textBaseline === constants.BOTTOM) {
+ _offset = (_nlines.length - 1) * p.textLeading();
+ } // Splits lines at characters, for loop adds one char at a time
+ // and tests length with next char added
+
+ for (var _lineIndex3 = 0; _lineIndex3 < lines.length; _lineIndex3++) {
+ line = '';
+ chars = lines[_lineIndex3].split('');
+ for (var _charIndex = 0; _charIndex < chars.length; _charIndex++) {
+ testLine = ''.concat(line + chars[_charIndex]);
+ testWidth = this.textWidth(testLine);
+ if (testWidth <= maxWidth) {
+ line += chars[_charIndex];
+ } else if (testWidth > maxWidth && line.length > 0) {
+ this._renderText(p, line.trim(), x, y - _offset, finalMaxHeight, finalMinHeight);
+ y += p.textLeading();
+ line = ''.concat(chars[_charIndex]);
+ }
+ }
+ }
+ this._renderText(p, line.trim(), x, y - _offset, finalMaxHeight, finalMinHeight);
+ y += p.textLeading();
+ }
+ } else {
+ // Offset to account for vertically centering multiple lines of text - no
+ // need to adjust anything for vertical align top or baseline
+ var _offset2 = 0;
+ if (this._textBaseline === constants.CENTER) {
+ _offset2 = (lines.length - 1) * p.textLeading() / 2;
+ } else if (this._textBaseline === constants.BOTTOM) {
+ _offset2 = (lines.length - 1) * p.textLeading();
+ } // Renders lines of text at any line breaks present in the original string
+
+ for (var i = 0; i < lines.length; i++) {
+ this._renderText(p, lines[i], x, y - _offset2, finalMaxHeight, finalMinHeight - _offset2);
+ y += p.textLeading();
+ }
+ }
+ return p;
+ }
+ },
+ {
+ key: '_applyDefaults',
+ value: function _applyDefaults() {
+ return this;
+ } /**
+ * Helper function to check font type (system or otf)
+ */
+
+ },
+ {
+ key: '_isOpenType',
+ value: function _isOpenType() {
+ var f = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._textFont;
+ return _typeof(f) === 'object' && f.font && f.font.supported;
+ }
+ },
+ {
+ key: '_updateTextMetrics',
+ value: function _updateTextMetrics() {
+ if (this._isOpenType()) {
+ this._setProperty('_textAscent', this._textFont._textAscent());
+ this._setProperty('_textDescent', this._textFont._textDescent());
+ return this;
+ } // Adapted from http://stackoverflow.com/a/25355178
+
+ var text = document.createElement('span');
+ text.style.fontFamily = this._textFont;
+ text.style.fontSize = ''.concat(this._textSize, 'px');
+ text.innerHTML = 'ABCjgq|';
+ var block = document.createElement('div');
+ block.style.display = 'inline-block';
+ block.style.width = '1px';
+ block.style.height = '0px';
+ var container = document.createElement('div');
+ container.appendChild(text);
+ container.appendChild(block);
+ container.style.height = '0px';
+ container.style.overflow = 'hidden';
+ document.body.appendChild(container);
+ block.style.verticalAlign = 'baseline';
+ var blockOffset = calculateOffset(block);
+ var textOffset = calculateOffset(text);
+ var ascent = blockOffset[1] - textOffset[1];
+ block.style.verticalAlign = 'bottom';
+ blockOffset = calculateOffset(block);
+ textOffset = calculateOffset(text);
+ var height = blockOffset[1] - textOffset[1];
+ var descent = height - ascent;
+ document.body.removeChild(container);
+ this._setProperty('_textAscent', ascent);
+ this._setProperty('_textDescent', descent);
+ return this;
+ }
+ }
+ ]);
+ return Renderer;
+ }(_main.default.Element);
+ /**
+ * Helper fxn to measure ascent and descent.
+ * Adapted from http://stackoverflow.com/a/25355178
+ */
+ function calculateOffset(object) {
+ var currentLeft = 0,
+ currentTop = 0;
+ if (object.offsetParent) {
+ do {
+ currentLeft += object.offsetLeft;
+ currentTop += object.offsetTop;
+ } while (object = object.offsetParent);
+ } else {
+ currentLeft += object.offsetLeft;
+ currentTop += object.offsetTop;
+ }
+ return [currentLeft,
+ currentTop];
+ } // This caused the test to failed.
+
+ Renderer.prototype.textSize = function (s) {
+ if (typeof s === 'number') {
+ this._setProperty('_textSize', s);
+ if (!this._leadingSet) {
+ // only use a default value if not previously set (#5181)
+ this._setProperty('_textLeading', s * constants._DEFAULT_LEADMULT);
+ }
+ return this._applyTextProperties();
+ }
+ return this._textSize;
+ };
+ _main.default.Renderer = Renderer;
+ var _default = _main.default.Renderer;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ './main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.number.constructor': 196,
+ 'core-js/modules/es.object.assign': 199,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.string.trim': 224,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 307: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.reflect.get');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ _dereq_('./p5.Renderer');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _get(target, property, receiver) {
+ if (typeof Reflect !== 'undefined' && Reflect.get) {
+ _get = Reflect.get;
+ } else {
+ _get = function _get(target, property, receiver) {
+ var base = _superPropBase(target, property);
+ if (!base) return;
+ var desc = Object.getOwnPropertyDescriptor(base, property);
+ if (desc.get) {
+ return desc.get.call(receiver);
+ }
+ return desc.value;
+ };
+ }
+ return _get(target, property, receiver || target);
+ }
+ function _superPropBase(object, property) {
+ while (!Object.prototype.hasOwnProperty.call(object, property)) {
+ object = _getPrototypeOf(object);
+ if (object === null) break;
+ }
+ return object;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ } /**
+ * p5.Renderer2D
+ * The 2D graphics canvas renderer class.
+ * extends p5.Renderer
+ */
+
+ var styleEmpty = 'rgba(0,0,0,0)';
+ // const alphaThreshold = 0.00125; // minimum visible
+ var Renderer2D = /*#__PURE__*/ function (_p5$Renderer) {
+ _inherits(Renderer2D, _p5$Renderer);
+ var _super = _createSuper(Renderer2D);
+ function Renderer2D(elt, pInst, isMainCanvas) {
+ var _this;
+ _classCallCheck(this, Renderer2D);
+ _this = _super.call(this, elt, pInst, isMainCanvas);
+ _this.drawingContext = _this.canvas.getContext('2d');
+ _this._pInst._setProperty('drawingContext', _this.drawingContext);
+ return _this;
+ }
+ _createClass(Renderer2D, [
+ {
+ key: 'getFilterGraphicsLayer',
+ value: function getFilterGraphicsLayer() {
+ // create hidden webgl renderer if it doesn't exist
+ if (!this.filterGraphicsLayer) {
+ // the real _pInst is buried when this is a secondary p5.Graphics
+ var pInst = this._pInst instanceof _main.default.Graphics ? this._pInst._pInst : this._pInst;
+ // create secondary layer
+ this.filterGraphicsLayer = new _main.default.Graphics(this.width, this.height, constants.WEBGL, pInst);
+ }
+ if (this.filterGraphicsLayer.width !== this.width || this.filterGraphicsLayer.height !== this.height) {
+ // Resize the graphics layer
+ this.filterGraphicsLayer.resizeCanvas(this.width, this.height);
+ }
+ if (this.filterGraphicsLayer.pixelDensity() !== this._pInst.pixelDensity()) {
+ this.filterGraphicsLayer.pixelDensity(this._pInst.pixelDensity());
+ }
+ return this.filterGraphicsLayer;
+ }
+ },
+ {
+ key: '_applyDefaults',
+ value: function _applyDefaults() {
+ this._cachedFillStyle = this._cachedStrokeStyle = undefined;
+ this._cachedBlendMode = constants.BLEND;
+ this._setFill(constants._DEFAULT_FILL);
+ this._setStroke(constants._DEFAULT_STROKE);
+ this.drawingContext.lineCap = constants.ROUND;
+ this.drawingContext.font = 'normal 12px sans-serif';
+ }
+ },
+ {
+ key: 'resize',
+ value: function resize(w, h) {
+ _get(_getPrototypeOf(Renderer2D.prototype), 'resize', this).call(this, w, h);
+ this.drawingContext.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
+ } //////////////////////////////////////////////
+ // COLOR | Setting
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: 'background',
+ value: function background() {
+ this.drawingContext.save();
+ this.resetMatrix();
+ if ((arguments.length <= 0 ? undefined : arguments[0]) instanceof _main.default.Image) {
+ if ((arguments.length <= 1 ? undefined : arguments[1]) >= 0) {
+ // set transparency of background
+ var img = arguments.length <= 0 ? undefined : arguments[0];
+ this.drawingContext.globalAlpha = (arguments.length <= 1 ? undefined : arguments[1]) / 255;
+ this._pInst.image(img, 0, 0, this.width, this.height);
+ } else {
+ this._pInst.image(arguments.length <= 0 ? undefined : arguments[0], 0, 0, this.width, this.height);
+ }
+ } else {
+ var _this$_pInst;
+ var curFill = this._getFill();
+ // create background rect
+ var color = (_this$_pInst = this._pInst).color.apply(_this$_pInst, arguments);
+ //accessible Outputs
+ if (this._pInst._addAccsOutput()) {
+ this._pInst._accsBackground(color.levels);
+ }
+ var newFill = color.toString();
+ this._setFill(newFill);
+ if (this._isErasing) {
+ this.blendMode(this._cachedBlendMode);
+ }
+ this.drawingContext.fillRect(0, 0, this.width, this.height);
+ // reset fill
+ this._setFill(curFill);
+ if (this._isErasing) {
+ this._pInst.erase();
+ }
+ }
+ this.drawingContext.restore();
+ }
+ },
+ {
+ key: 'clear',
+ value: function clear() {
+ this.drawingContext.save();
+ this.resetMatrix();
+ this.drawingContext.clearRect(0, 0, this.width, this.height);
+ this.drawingContext.restore();
+ }
+ },
+ {
+ key: 'fill',
+ value: function fill() {
+ var _this$_pInst2;
+ var color = (_this$_pInst2 = this._pInst).color.apply(_this$_pInst2, arguments);
+ this._setFill(color.toString());
+ //accessible Outputs
+ if (this._pInst._addAccsOutput()) {
+ this._pInst._accsCanvasColors('fill', color.levels);
+ }
+ }
+ },
+ {
+ key: 'stroke',
+ value: function stroke() {
+ var _this$_pInst3;
+ var color = (_this$_pInst3 = this._pInst).color.apply(_this$_pInst3, arguments);
+ this._setStroke(color.toString());
+ //accessible Outputs
+ if (this._pInst._addAccsOutput()) {
+ this._pInst._accsCanvasColors('stroke', color.levels);
+ }
+ }
+ },
+ {
+ key: 'erase',
+ value: function erase(opacityFill, opacityStroke) {
+ if (!this._isErasing) {
+ // cache the fill style
+ this._cachedFillStyle = this.drawingContext.fillStyle;
+ var newFill = this._pInst.color(255, opacityFill).toString();
+ this.drawingContext.fillStyle = newFill;
+ // cache the stroke style
+ this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+ var newStroke = this._pInst.color(255, opacityStroke).toString();
+ this.drawingContext.strokeStyle = newStroke;
+ // cache blendMode
+ var tempBlendMode = this._cachedBlendMode;
+ this.blendMode(constants.REMOVE);
+ this._cachedBlendMode = tempBlendMode;
+ this._isErasing = true;
+ }
+ }
+ },
+ {
+ key: 'noErase',
+ value: function noErase() {
+ if (this._isErasing) {
+ this.drawingContext.fillStyle = this._cachedFillStyle;
+ this.drawingContext.strokeStyle = this._cachedStrokeStyle;
+ this.blendMode(this._cachedBlendMode);
+ this._isErasing = false;
+ }
+ }
+ },
+ {
+ key: 'beginClip',
+ value: function beginClip() {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+ };
+ _get(_getPrototypeOf(Renderer2D.prototype), 'beginClip', this).call(this, options);
+ // cache the fill style
+ this._cachedFillStyle = this.drawingContext.fillStyle;
+ var newFill = this._pInst.color(255, 0).toString();
+ this.drawingContext.fillStyle = newFill;
+ // cache the stroke style
+ this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+ var newStroke = this._pInst.color(255, 0).toString();
+ this.drawingContext.strokeStyle = newStroke;
+ // cache blendMode
+ var tempBlendMode = this._cachedBlendMode;
+ this.blendMode(constants.BLEND);
+ this._cachedBlendMode = tempBlendMode;
+ // Start a new path. Everything from here on out should become part of this
+ // one path so that we can clip to the whole thing.
+ this.drawingContext.beginPath();
+ if (this._clipInvert) {
+ // Slight hack: draw a big rectangle over everything with reverse winding
+ // order. This is hopefully large enough to cover most things.
+ this.drawingContext.moveTo( - 2 * this.width, - 2 * this.height);
+ this.drawingContext.lineTo( - 2 * this.width, 2 * this.height);
+ this.drawingContext.lineTo(2 * this.width, 2 * this.height);
+ this.drawingContext.lineTo(2 * this.width, - 2 * this.height);
+ this.drawingContext.closePath();
+ }
+ }
+ },
+ {
+ key: 'endClip',
+ value: function endClip() {
+ this._doFillStrokeClose();
+ this.drawingContext.clip();
+ _get(_getPrototypeOf(Renderer2D.prototype), 'endClip', this).call(this);
+ this.drawingContext.fillStyle = this._cachedFillStyle;
+ this.drawingContext.strokeStyle = this._cachedStrokeStyle;
+ this.blendMode(this._cachedBlendMode);
+ } //////////////////////////////////////////////
+ // IMAGE | Loading & Displaying
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: 'image',
+ value: function image(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
+ var cnv;
+ if (img.gifProperties) {
+ img._animateGif(this._pInst);
+ }
+ try {
+ if (_main.default.MediaElement && img instanceof _main.default.MediaElement) {
+ img._ensureCanvas();
+ }
+ if (this._tint && img.canvas) {
+ cnv = this._getTintedImageCanvas(img);
+ }
+ if (!cnv) {
+ cnv = img.canvas || img.elt;
+ }
+ var s = 1;
+ if (img.width && img.width > 0) {
+ s = cnv.width / img.width;
+ }
+ if (this._isErasing) {
+ this.blendMode(this._cachedBlendMode);
+ }
+ this.drawingContext.drawImage(cnv, s * sx, s * sy, s * sWidth, s * sHeight, dx, dy, dWidth, dHeight);
+ if (this._isErasing) {
+ this._pInst.erase();
+ }
+ } catch (e) {
+ if (e.name !== 'NS_ERROR_NOT_AVAILABLE') {
+ throw e;
+ }
+ }
+ }
+ },
+ {
+ key: '_getTintedImageCanvas',
+ value: function _getTintedImageCanvas(img) {
+ if (!img.canvas) {
+ return img;
+ }
+ if (!img.tintCanvas) {
+ // Once an image has been tinted, keep its tint canvas
+ // around so we don't need to re-incur the cost of
+ // creating a new one for each tint
+ img.tintCanvas = document.createElement('canvas');
+ } // Keep the size of the tint canvas up-to-date
+
+ if (img.tintCanvas.width !== img.canvas.width) {
+ img.tintCanvas.width = img.canvas.width;
+ }
+ if (img.tintCanvas.height !== img.canvas.height) {
+ img.tintCanvas.height = img.canvas.height;
+ } // Goal: multiply the r,g,b,a values of the source by
+ // the r,g,b,a values of the tint color
+
+ var ctx = img.tintCanvas.getContext('2d');
+ ctx.save();
+ ctx.clearRect(0, 0, img.canvas.width, img.canvas.height);
+ if (this._tint[0] < 255 || this._tint[1] < 255 || this._tint[2] < 255) {
+ // Color tint: we need to use the multiply blend mode to change the colors.
+ // However, the canvas implementation of this destroys the alpha channel of
+ // the image. To accommodate, we first get a version of the image with full
+ // opacity everywhere, tint using multiply, and then use the destination-in
+ // blend mode to restore the alpha channel again.
+ // Start with the original image
+ ctx.drawImage(img.canvas, 0, 0);
+ // This blend mode makes everything opaque but forces the luma to match
+ // the original image again
+ ctx.globalCompositeOperation = 'luminosity';
+ ctx.drawImage(img.canvas, 0, 0);
+ // This blend mode forces the hue and chroma to match the original image.
+ // After this we should have the original again, but with full opacity.
+ ctx.globalCompositeOperation = 'color';
+ ctx.drawImage(img.canvas, 0, 0);
+ // Apply color tint
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.fillStyle = 'rgb('.concat(this._tint.slice(0, 3).join(', '), ')');
+ ctx.fillRect(0, 0, img.canvas.width, img.canvas.height);
+ // Replace the alpha channel with the original alpha * the alpha tint
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.globalAlpha = this._tint[3] / 255;
+ ctx.drawImage(img.canvas, 0, 0);
+ } else {
+ // If we only need to change the alpha, we can skip all the extra work!
+ ctx.globalAlpha = this._tint[3] / 255;
+ ctx.drawImage(img.canvas, 0, 0);
+ }
+ ctx.restore();
+ return img.tintCanvas;
+ } //////////////////////////////////////////////
+ // IMAGE | Pixels
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: 'blendMode',
+ value: function blendMode(mode) {
+ if (mode === constants.SUBTRACT) {
+ console.warn('blendMode(SUBTRACT) only works in WEBGL mode.');
+ } else if (mode === constants.BLEND || mode === constants.REMOVE || mode === constants.DARKEST || mode === constants.LIGHTEST || mode === constants.DIFFERENCE || mode === constants.MULTIPLY || mode === constants.EXCLUSION || mode === constants.SCREEN || mode === constants.REPLACE || mode === constants.OVERLAY || mode === constants.HARD_LIGHT || mode === constants.SOFT_LIGHT || mode === constants.DODGE || mode === constants.BURN || mode === constants.ADD) {
+ this._cachedBlendMode = mode;
+ this.drawingContext.globalCompositeOperation = mode;
+ } else {
+ throw new Error('Mode '.concat(mode, ' not recognized.'));
+ }
+ }
+ },
+ {
+ key: 'blend',
+ value: function blend() {
+ var currBlend = this.drawingContext.globalCompositeOperation;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ var blendMode = args[args.length - 1];
+ var copyArgs = Array.prototype.slice.call(args, 0, args.length - 1);
+ this.drawingContext.globalCompositeOperation = blendMode;
+ _main.default.prototype.copy.apply(this, copyArgs);
+ this.drawingContext.globalCompositeOperation = currBlend;
+ } // p5.Renderer2D.prototype.get = p5.Renderer.prototype.get;
+ // .get() is not overridden
+ // x,y are canvas-relative (pre-scaled by _pixelDensity)
+
+ },
+ {
+ key: '_getPixel',
+ value: function _getPixel(x, y) {
+ var imageData,
+ index;
+ imageData = this.drawingContext.getImageData(x, y, 1, 1).data;
+ index = 0;
+ return [imageData[index + 0],
+ imageData[index + 1],
+ imageData[index + 2],
+ imageData[index + 3]];
+ }
+ },
+ {
+ key: 'loadPixels',
+ value: function loadPixels() {
+ var pixelsState = this._pixelsState; // if called by p5.Image
+ var pd = pixelsState._pixelDensity;
+ var w = this.width * pd;
+ var h = this.height * pd;
+ var imageData = this.drawingContext.getImageData(0, 0, w, h);
+ // @todo this should actually set pixels per object, so diff buffers can
+ // have diff pixel arrays.
+ pixelsState._setProperty('imageData', imageData);
+ pixelsState._setProperty('pixels', imageData.data);
+ }
+ },
+ {
+ key: 'set',
+ value: function set(x, y, imgOrCol) {
+ // round down to get integer numbers
+ x = Math.floor(x);
+ y = Math.floor(y);
+ var pixelsState = this._pixelsState;
+ if (imgOrCol instanceof _main.default.Image) {
+ this.drawingContext.save();
+ this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
+ this.drawingContext.scale(pixelsState._pixelDensity, pixelsState._pixelDensity);
+ this.drawingContext.clearRect(x, y, imgOrCol.width, imgOrCol.height);
+ this.drawingContext.drawImage(imgOrCol.canvas, x, y);
+ this.drawingContext.restore();
+ } else {
+ var r = 0,
+ g = 0,
+ b = 0,
+ a = 0;
+ var idx = 4 * (y * pixelsState._pixelDensity * (this.width * pixelsState._pixelDensity) + x * pixelsState._pixelDensity);
+ if (!pixelsState.imageData) {
+ pixelsState.loadPixels();
+ }
+ if (typeof imgOrCol === 'number') {
+ if (idx < pixelsState.pixels.length) {
+ r = imgOrCol;
+ g = imgOrCol;
+ b = imgOrCol;
+ a = 255;
+ //this.updatePixels.call(this);
+ }
+ } else if (Array.isArray(imgOrCol)) {
+ if (imgOrCol.length < 4) {
+ throw new Error('pixel array must be of the form [R, G, B, A]');
+ }
+ if (idx < pixelsState.pixels.length) {
+ r = imgOrCol[0];
+ g = imgOrCol[1];
+ b = imgOrCol[2];
+ a = imgOrCol[3];
+ //this.updatePixels.call(this);
+ }
+ } else if (imgOrCol instanceof _main.default.Color) {
+ if (idx < pixelsState.pixels.length) {
+ r = imgOrCol.levels[0];
+ g = imgOrCol.levels[1];
+ b = imgOrCol.levels[2];
+ a = imgOrCol.levels[3];
+ //this.updatePixels.call(this);
+ }
+ } // loop over pixelDensity * pixelDensity
+
+ for (var i = 0; i < pixelsState._pixelDensity; i++) {
+ for (var j = 0; j < pixelsState._pixelDensity; j++) {
+ // loop over
+ idx = 4 * ((y * pixelsState._pixelDensity + j) * this.width * pixelsState._pixelDensity + (x * pixelsState._pixelDensity + i));
+ pixelsState.pixels[idx] = r;
+ pixelsState.pixels[idx + 1] = g;
+ pixelsState.pixels[idx + 2] = b;
+ pixelsState.pixels[idx + 3] = a;
+ }
+ }
+ }
+ }
+ },
+ {
+ key: 'updatePixels',
+ value: function updatePixels(x, y, w, h) {
+ var pixelsState = this._pixelsState;
+ var pd = pixelsState._pixelDensity;
+ if (x === undefined && y === undefined && w === undefined && h === undefined) {
+ x = 0;
+ y = 0;
+ w = this.width;
+ h = this.height;
+ }
+ x *= pd;
+ y *= pd;
+ w *= pd;
+ h *= pd;
+ if (this.gifProperties) {
+ this.gifProperties.frames[this.gifProperties.displayIndex].image = pixelsState.imageData;
+ }
+ this.drawingContext.putImageData(pixelsState.imageData, x, y, 0, 0, w, h);
+ } //////////////////////////////////////////////
+ // SHAPE | 2D Primitives
+ //////////////////////////////////////////////
+ /**
+ * Generate a cubic Bezier representing an arc on the unit circle of total
+ * angle `size` radians, beginning `start` radians above the x-axis. Up to
+ * four of these curves are combined to make a full arc.
+ *
+ * See ecridge.com/bezier.pdf for an explanation of the method.
+ */
+
+ },
+ {
+ key: '_acuteArcToBezier',
+ value: function _acuteArcToBezier(start, size) {
+ // Evaluate constants.
+ var alpha = size / 2,
+ cos_alpha = Math.cos(alpha),
+ sin_alpha = Math.sin(alpha),
+ cot_alpha = 1 / Math.tan(alpha),
+ // This is how far the arc needs to be rotated.
+ phi = start + alpha,
+ cos_phi = Math.cos(phi),
+ sin_phi = Math.sin(phi),
+ lambda = (4 - cos_alpha) / 3,
+ mu = sin_alpha + (cos_alpha - lambda) * cot_alpha;
+ // Return rotated waypoints.
+ return {
+ ax: Math.cos(start).toFixed(7),
+ ay: Math.sin(start).toFixed(7),
+ bx: (lambda * cos_phi + mu * sin_phi).toFixed(7),
+ by: (lambda * sin_phi - mu * cos_phi).toFixed(7),
+ cx: (lambda * cos_phi - mu * sin_phi).toFixed(7),
+ cy: (lambda * sin_phi + mu * cos_phi).toFixed(7),
+ dx: Math.cos(start + size).toFixed(7),
+ dy: Math.sin(start + size).toFixed(7)
+ };
+ } /*
+ * This function requires that:
+ *
+ * 0 <= start < TWO_PI
+ *
+ * start <= stop < start + TWO_PI
+ */
+
+ },
+ {
+ key: 'arc',
+ value: function arc(x, y, w, h, start, stop, mode) {
+ var ctx = this.drawingContext;
+ var rx = w / 2;
+ var ry = h / 2;
+ var epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
+ var arcToDraw = 0;
+ var curves = [
+ ];
+ x += rx;
+ y += ry;
+ // Create curves
+ while (stop - start >= epsilon) {
+ arcToDraw = Math.min(stop - start, constants.HALF_PI);
+ curves.push(this._acuteArcToBezier(start, arcToDraw));
+ start += arcToDraw;
+ } // Fill curves
+
+ if (this._doFill) {
+ if (!this._clipping) ctx.beginPath();
+ curves.forEach(function (curve, index) {
+ if (index === 0) {
+ ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry);
+ } /* eslint-disable indent */
+
+ ctx.bezierCurveTo(x + curve.bx * rx, y + curve.by * ry, x + curve.cx * rx, y + curve.cy * ry, x + curve.dx * rx, y + curve.dy * ry);
+ /* eslint-enable indent */
+ });
+ if (mode === constants.PIE || mode == null) {
+ ctx.lineTo(x, y);
+ }
+ ctx.closePath();
+ if (!this._clipping) ctx.fill();
+ } // Stroke curves
+
+ if (this._doStroke) {
+ if (!this._clipping) ctx.beginPath();
+ curves.forEach(function (curve, index) {
+ if (index === 0) {
+ ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry);
+ } /* eslint-disable indent */
+
+ ctx.bezierCurveTo(x + curve.bx * rx, y + curve.by * ry, x + curve.cx * rx, y + curve.cy * ry, x + curve.dx * rx, y + curve.dy * ry);
+ /* eslint-enable indent */
+ });
+ if (mode === constants.PIE) {
+ ctx.lineTo(x, y);
+ ctx.closePath();
+ } else if (mode === constants.CHORD) {
+ ctx.closePath();
+ }
+ if (!this._clipping) ctx.stroke();
+ }
+ return this;
+ }
+ },
+ {
+ key: 'ellipse',
+ value: function ellipse(args) {
+ var ctx = this.drawingContext;
+ var doFill = this._doFill,
+ doStroke = this._doStroke;
+ var x = parseFloat(args[0]),
+ y = parseFloat(args[1]),
+ w = parseFloat(args[2]),
+ h = parseFloat(args[3]);
+ if (doFill && !doStroke) {
+ if (this._getFill() === styleEmpty) {
+ return this;
+ }
+ } else if (!doFill && doStroke) {
+ if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ }
+ var centerX = x + w / 2,
+ centerY = y + h / 2,
+ radiusX = w / 2,
+ radiusY = h / 2;
+ if (!this._clipping) ctx.beginPath();
+ ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
+ if (!this._clipping && doFill) {
+ ctx.fill();
+ }
+ if (!this._clipping && doStroke) {
+ ctx.stroke();
+ }
+ }
+ },
+ {
+ key: 'line',
+ value: function line(x1, y1, x2, y2) {
+ var ctx = this.drawingContext;
+ if (!this._doStroke) {
+ return this;
+ } else if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ if (!this._clipping) ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+ return this;
+ }
+ },
+ {
+ key: 'point',
+ value: function point(x, y) {
+ var ctx = this.drawingContext;
+ if (!this._doStroke) {
+ return this;
+ } else if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ var s = this._getStroke();
+ var f = this._getFill();
+ if (!this._clipping) {
+ // swapping fill color to stroke and back after for correct point rendering
+ this._setFill(s);
+ }
+ if (!this._clipping) ctx.beginPath();
+ ctx.arc(x, y, ctx.lineWidth / 2, 0, constants.TWO_PI, false);
+ if (!this._clipping) {
+ ctx.fill();
+ this._setFill(f);
+ }
+ }
+ },
+ {
+ key: 'quad',
+ value: function quad(x1, y1, x2, y2, x3, y3, x4, y4) {
+ var ctx = this.drawingContext;
+ var doFill = this._doFill,
+ doStroke = this._doStroke;
+ if (doFill && !doStroke) {
+ if (this._getFill() === styleEmpty) {
+ return this;
+ }
+ } else if (!doFill && doStroke) {
+ if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ }
+ if (!this._clipping) ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.lineTo(x3, y3);
+ ctx.lineTo(x4, y4);
+ ctx.closePath();
+ if (!this._clipping && doFill) {
+ ctx.fill();
+ }
+ if (!this._clipping && doStroke) {
+ ctx.stroke();
+ }
+ return this;
+ }
+ },
+ {
+ key: 'rect',
+ value: function rect(args) {
+ var x = args[0];
+ var y = args[1];
+ var w = args[2];
+ var h = args[3];
+ var tl = args[4];
+ var tr = args[5];
+ var br = args[6];
+ var bl = args[7];
+ var ctx = this.drawingContext;
+ var doFill = this._doFill,
+ doStroke = this._doStroke;
+ if (doFill && !doStroke) {
+ if (this._getFill() === styleEmpty) {
+ return this;
+ }
+ } else if (!doFill && doStroke) {
+ if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ }
+ if (!this._clipping) ctx.beginPath();
+ if (typeof tl === 'undefined') {
+ // No rounded corners
+ ctx.rect(x, y, w, h);
+ } else {
+ // At least one rounded corner
+ // Set defaults when not specified
+ if (typeof tr === 'undefined') {
+ tr = tl;
+ }
+ if (typeof br === 'undefined') {
+ br = tr;
+ }
+ if (typeof bl === 'undefined') {
+ bl = br;
+ } // corner rounding must always be positive
+
+ var absW = Math.abs(w);
+ var absH = Math.abs(h);
+ var hw = absW / 2;
+ var hh = absH / 2;
+ // Clip radii
+ if (absW < 2 * tl) {
+ tl = hw;
+ }
+ if (absH < 2 * tl) {
+ tl = hh;
+ }
+ if (absW < 2 * tr) {
+ tr = hw;
+ }
+ if (absH < 2 * tr) {
+ tr = hh;
+ }
+ if (absW < 2 * br) {
+ br = hw;
+ }
+ if (absH < 2 * br) {
+ br = hh;
+ }
+ if (absW < 2 * bl) {
+ bl = hw;
+ }
+ if (absH < 2 * bl) {
+ bl = hh;
+ } // Draw shape
+
+ if (!this._clipping) ctx.beginPath();
+ ctx.moveTo(x + tl, y);
+ ctx.arcTo(x + w, y, x + w, y + h, tr);
+ ctx.arcTo(x + w, y + h, x, y + h, br);
+ ctx.arcTo(x, y + h, x, y, bl);
+ ctx.arcTo(x, y, x + w, y, tl);
+ ctx.closePath();
+ }
+ if (!this._clipping && this._doFill) {
+ ctx.fill();
+ }
+ if (!this._clipping && this._doStroke) {
+ ctx.stroke();
+ }
+ return this;
+ }
+ },
+ {
+ key: 'triangle',
+ value: function triangle(args) {
+ var ctx = this.drawingContext;
+ var doFill = this._doFill,
+ doStroke = this._doStroke;
+ var x1 = args[0],
+ y1 = args[1];
+ var x2 = args[2],
+ y2 = args[3];
+ var x3 = args[4],
+ y3 = args[5];
+ if (doFill && !doStroke) {
+ if (this._getFill() === styleEmpty) {
+ return this;
+ }
+ } else if (!doFill && doStroke) {
+ if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ }
+ if (!this._clipping) ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.lineTo(x3, y3);
+ ctx.closePath();
+ if (!this._clipping && doFill) {
+ ctx.fill();
+ }
+ if (!this._clipping && doStroke) {
+ ctx.stroke();
+ }
+ }
+ },
+ {
+ key: 'endShape',
+ value: function endShape(mode, vertices, isCurve, isBezier, isQuadratic, isContour, shapeKind) {
+ if (vertices.length === 0) {
+ return this;
+ }
+ if (!this._doStroke && !this._doFill) {
+ return this;
+ }
+ var closeShape = mode === constants.CLOSE;
+ var v;
+ if (closeShape && !isContour) {
+ vertices.push(vertices[0]);
+ }
+ var i,
+ j;
+ var numVerts = vertices.length;
+ if (isCurve && shapeKind === null) {
+ if (numVerts > 3) {
+ var b = [
+ ],
+ s = 1 - this._curveTightness;
+ if (!this._clipping) this.drawingContext.beginPath();
+ this.drawingContext.moveTo(vertices[1][0], vertices[1][1]);
+ for (i = 1; i + 2 < numVerts; i++) {
+ v = vertices[i];
+ b[0] = [
+ v[0],
+ v[1]
+ ];
+ b[1] = [
+ v[0] + (s * vertices[i + 1][0] - s * vertices[i - 1][0]) / 6,
+ v[1] + (s * vertices[i + 1][1] - s * vertices[i - 1][1]) / 6
+ ];
+ b[2] = [
+ vertices[i + 1][0] + (s * vertices[i][0] - s * vertices[i + 2][0]) / 6,
+ vertices[i + 1][1] + (s * vertices[i][1] - s * vertices[i + 2][1]) / 6
+ ];
+ b[3] = [
+ vertices[i + 1][0],
+ vertices[i + 1][1]
+ ];
+ this.drawingContext.bezierCurveTo(b[1][0], b[1][1], b[2][0], b[2][1], b[3][0], b[3][1]);
+ }
+ if (closeShape) {
+ this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ } else if (isBezier && shapeKind === null) {
+ if (!this._clipping) this.drawingContext.beginPath();
+ for (i = 0; i < numVerts; i++) {
+ if (vertices[i].isVert) {
+ if (vertices[i].moveTo) {
+ this.drawingContext.moveTo(vertices[i][0], vertices[i][1]);
+ } else {
+ this.drawingContext.lineTo(vertices[i][0], vertices[i][1]);
+ }
+ } else {
+ this.drawingContext.bezierCurveTo(vertices[i][0], vertices[i][1], vertices[i][2], vertices[i][3], vertices[i][4], vertices[i][5]);
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ } else if (isQuadratic && shapeKind === null) {
+ if (!this._clipping) this.drawingContext.beginPath();
+ for (i = 0; i < numVerts; i++) {
+ if (vertices[i].isVert) {
+ if (vertices[i].moveTo) {
+ this.drawingContext.moveTo(vertices[i][0], vertices[i][1]);
+ } else {
+ this.drawingContext.lineTo(vertices[i][0], vertices[i][1]);
+ }
+ } else {
+ this.drawingContext.quadraticCurveTo(vertices[i][0], vertices[i][1], vertices[i][2], vertices[i][3]);
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ } else {
+ if (shapeKind === constants.POINTS) {
+ for (i = 0; i < numVerts; i++) {
+ v = vertices[i];
+ if (this._doStroke) {
+ this._pInst.stroke(v[6]);
+ }
+ this._pInst.point(v[0], v[1]);
+ }
+ } else if (shapeKind === constants.LINES) {
+ for (i = 0; i + 1 < numVerts; i += 2) {
+ v = vertices[i];
+ if (this._doStroke) {
+ this._pInst.stroke(vertices[i + 1][6]);
+ }
+ this._pInst.line(v[0], v[1], vertices[i + 1][0], vertices[i + 1][1]);
+ }
+ } else if (shapeKind === constants.TRIANGLES) {
+ for (i = 0; i + 2 < numVerts; i += 3) {
+ v = vertices[i];
+ if (!this._clipping) this.drawingContext.beginPath();
+ this.drawingContext.moveTo(v[0], v[1]);
+ this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+ this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]);
+ this.drawingContext.closePath();
+ if (!this._clipping && this._doFill) {
+ this._pInst.fill(vertices[i + 2][5]);
+ this.drawingContext.fill();
+ }
+ if (!this._clipping && this._doStroke) {
+ this._pInst.stroke(vertices[i + 2][6]);
+ this.drawingContext.stroke();
+ }
+ }
+ } else if (shapeKind === constants.TRIANGLE_STRIP) {
+ for (i = 0; i + 1 < numVerts; i++) {
+ v = vertices[i];
+ if (!this._clipping) this.drawingContext.beginPath();
+ this.drawingContext.moveTo(vertices[i + 1][0], vertices[i + 1][1]);
+ this.drawingContext.lineTo(v[0], v[1]);
+ if (!this._clipping && this._doStroke) {
+ this._pInst.stroke(vertices[i + 1][6]);
+ }
+ if (!this._clipping && this._doFill) {
+ this._pInst.fill(vertices[i + 1][5]);
+ }
+ if (i + 2 < numVerts) {
+ this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]);
+ if (!this._clipping && this._doStroke) {
+ this._pInst.stroke(vertices[i + 2][6]);
+ }
+ if (!this._clipping && this._doFill) {
+ this._pInst.fill(vertices[i + 2][5]);
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ } else if (shapeKind === constants.TRIANGLE_FAN) {
+ if (numVerts > 2) {
+ // For performance reasons, try to batch as many of the
+ // fill and stroke calls as possible.
+ if (!this._clipping) this.drawingContext.beginPath();
+ for (i = 2; i < numVerts; i++) {
+ v = vertices[i];
+ this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
+ this.drawingContext.lineTo(vertices[i - 1][0], vertices[i - 1][1]);
+ this.drawingContext.lineTo(v[0], v[1]);
+ this.drawingContext.lineTo(vertices[0][0], vertices[0][1]);
+ // If the next colour is going to be different, stroke / fill now
+ if (i < numVerts - 1) {
+ if (this._doFill && v[5] !== vertices[i + 1][5] || this._doStroke && v[6] !== vertices[i + 1][6]) {
+ if (!this._clipping && this._doFill) {
+ this._pInst.fill(v[5]);
+ this.drawingContext.fill();
+ this._pInst.fill(vertices[i + 1][5]);
+ }
+ if (!this._clipping && this._doStroke) {
+ this._pInst.stroke(v[6]);
+ this.drawingContext.stroke();
+ this._pInst.stroke(vertices[i + 1][6]);
+ }
+ this.drawingContext.closePath();
+ if (!this._clipping) this.drawingContext.beginPath(); // Begin the next one
+ }
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ } else if (shapeKind === constants.QUADS) {
+ for (i = 0; i + 3 < numVerts; i += 4) {
+ v = vertices[i];
+ if (!this._clipping) this.drawingContext.beginPath();
+ this.drawingContext.moveTo(v[0], v[1]);
+ for (j = 1; j < 4; j++) {
+ this.drawingContext.lineTo(vertices[i + j][0], vertices[i + j][1]);
+ }
+ this.drawingContext.lineTo(v[0], v[1]);
+ if (!this._clipping && this._doFill) {
+ this._pInst.fill(vertices[i + 3][5]);
+ }
+ if (!this._clipping && this._doStroke) {
+ this._pInst.stroke(vertices[i + 3][6]);
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ } else if (shapeKind === constants.QUAD_STRIP) {
+ if (numVerts > 3) {
+ for (i = 0; i + 1 < numVerts; i += 2) {
+ v = vertices[i];
+ if (!this._clipping) this.drawingContext.beginPath();
+ if (i + 3 < numVerts) {
+ this.drawingContext.moveTo(vertices[i + 2][0], vertices[i + 2][1]);
+ this.drawingContext.lineTo(v[0], v[1]);
+ this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+ this.drawingContext.lineTo(vertices[i + 3][0], vertices[i + 3][1]);
+ if (!this._clipping && this._doFill) {
+ this._pInst.fill(vertices[i + 3][5]);
+ }
+ if (!this._clipping && this._doStroke) {
+ this._pInst.stroke(vertices[i + 3][6]);
+ }
+ } else {
+ this.drawingContext.moveTo(v[0], v[1]);
+ this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ }
+ } else {
+ if (!this._clipping) this.drawingContext.beginPath();
+ this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
+ for (i = 1; i < numVerts; i++) {
+ v = vertices[i];
+ if (v.isVert) {
+ if (v.moveTo) {
+ if (closeShape) this.drawingContext.closePath();
+ this.drawingContext.moveTo(v[0], v[1]);
+ } else {
+ this.drawingContext.lineTo(v[0], v[1]);
+ }
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ }
+ isCurve = false;
+ isBezier = false;
+ isQuadratic = false;
+ isContour = false;
+ if (closeShape) {
+ vertices.pop();
+ }
+ return this;
+ } //////////////////////////////////////////////
+ // SHAPE | Attributes
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: 'strokeCap',
+ value: function strokeCap(cap) {
+ if (cap === constants.ROUND || cap === constants.SQUARE || cap === constants.PROJECT) {
+ this.drawingContext.lineCap = cap;
+ }
+ return this;
+ }
+ },
+ {
+ key: 'strokeJoin',
+ value: function strokeJoin(join) {
+ if (join === constants.ROUND || join === constants.BEVEL || join === constants.MITER) {
+ this.drawingContext.lineJoin = join;
+ }
+ return this;
+ }
+ },
+ {
+ key: 'strokeWeight',
+ value: function strokeWeight(w) {
+ if (typeof w === 'undefined' || w === 0) {
+ // hack because lineWidth 0 doesn't work
+ this.drawingContext.lineWidth = 0.0001;
+ } else {
+ this.drawingContext.lineWidth = w;
+ }
+ return this;
+ }
+ },
+ {
+ key: '_getFill',
+ value: function _getFill() {
+ if (!this._cachedFillStyle) {
+ this._cachedFillStyle = this.drawingContext.fillStyle;
+ }
+ return this._cachedFillStyle;
+ }
+ },
+ {
+ key: '_setFill',
+ value: function _setFill(fillStyle) {
+ if (fillStyle !== this._cachedFillStyle) {
+ this.drawingContext.fillStyle = fillStyle;
+ this._cachedFillStyle = fillStyle;
+ }
+ }
+ },
+ {
+ key: '_getStroke',
+ value: function _getStroke() {
+ if (!this._cachedStrokeStyle) {
+ this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+ }
+ return this._cachedStrokeStyle;
+ }
+ },
+ {
+ key: '_setStroke',
+ value: function _setStroke(strokeStyle) {
+ if (strokeStyle !== this._cachedStrokeStyle) {
+ this.drawingContext.strokeStyle = strokeStyle;
+ this._cachedStrokeStyle = strokeStyle;
+ }
+ } //////////////////////////////////////////////
+ // SHAPE | Curves
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: 'bezier',
+ value: function bezier(x1, y1, x2, y2, x3, y3, x4, y4) {
+ this._pInst.beginShape();
+ this._pInst.vertex(x1, y1);
+ this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4);
+ this._pInst.endShape();
+ return this;
+ }
+ },
+ {
+ key: 'curve',
+ value: function curve(x1, y1, x2, y2, x3, y3, x4, y4) {
+ this._pInst.beginShape();
+ this._pInst.curveVertex(x1, y1);
+ this._pInst.curveVertex(x2, y2);
+ this._pInst.curveVertex(x3, y3);
+ this._pInst.curveVertex(x4, y4);
+ this._pInst.endShape();
+ return this;
+ } //////////////////////////////////////////////
+ // SHAPE | Vertex
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: '_doFillStrokeClose',
+ value: function _doFillStrokeClose(closeShape) {
+ if (closeShape) {
+ this.drawingContext.closePath();
+ }
+ if (!this._clipping && this._doFill) {
+ this.drawingContext.fill();
+ }
+ if (!this._clipping && this._doStroke) {
+ this.drawingContext.stroke();
+ }
+ } //////////////////////////////////////////////
+ // TRANSFORM
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: 'applyMatrix',
+ value: function applyMatrix(a, b, c, d, e, f) {
+ this.drawingContext.transform(a, b, c, d, e, f);
+ }
+ },
+ {
+ key: 'resetMatrix',
+ value: function resetMatrix() {
+ this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
+ this.drawingContext.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
+ return this;
+ }
+ },
+ {
+ key: 'rotate',
+ value: function rotate(rad) {
+ this.drawingContext.rotate(rad);
+ }
+ },
+ {
+ key: 'scale',
+ value: function scale(x, y) {
+ this.drawingContext.scale(x, y);
+ return this;
+ }
+ },
+ {
+ key: 'translate',
+ value: function translate(x, y) {
+ // support passing a vector as the 1st parameter
+ if (x instanceof _main.default.Vector) {
+ y = x.y;
+ x = x.x;
+ }
+ this.drawingContext.translate(x, y);
+ return this;
+ } //////////////////////////////////////////////
+ // TYPOGRAPHY
+ //
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: '_renderText',
+ value: function _renderText(p, line, x, y, maxY, minY) {
+ if (y < minY || y >= maxY) {
+ return; // don't render lines beyond our minY/maxY bounds (see #5785)
+ }
+ p.push(); // fix to #803
+ if (!this._isOpenType()) {
+ // a system/browser font
+ // no stroke unless specified by user
+ if (this._doStroke && this._strokeSet) {
+ this.drawingContext.strokeText(line, x, y);
+ }
+ if (!this._clipping && this._doFill) {
+ // if fill hasn't been set by user, use default text fill
+ if (!this._fillSet) {
+ this._setFill(constants._DEFAULT_TEXT_FILL);
+ }
+ this.drawingContext.fillText(line, x, y);
+ }
+ } else {
+ // an opentype font, let it handle the rendering
+ this._textFont._renderPath(line, x, y, {
+ renderer: this
+ });
+ }
+ p.pop();
+ return p;
+ }
+ },
+ {
+ key: 'textWidth',
+ value: function textWidth(s) {
+ if (this._isOpenType()) {
+ return this._textFont._textWidth(s, this._textSize);
+ }
+ return this.drawingContext.measureText(s).width;
+ }
+ },
+ {
+ key: '_applyTextProperties',
+ value: function _applyTextProperties() {
+ var font;
+ var p = this._pInst;
+ this._setProperty('_textAscent', null);
+ this._setProperty('_textDescent', null);
+ font = this._textFont;
+ if (this._isOpenType()) {
+ font = this._textFont.font.familyName;
+ this._setProperty('_textStyle', this._textFont.font.styleName);
+ }
+ var fontNameString = font || 'sans-serif';
+ if (/\s/.exec(fontNameString)) {
+ // If the name includes spaces, surround in quotes
+ fontNameString = '"'.concat(fontNameString, '"');
+ }
+ this.drawingContext.font = ''.concat(this._textStyle || 'normal', ' ').concat(this._textSize || 12, 'px ').concat(fontNameString);
+ this.drawingContext.textAlign = this._textAlign;
+ if (this._textBaseline === constants.CENTER) {
+ this.drawingContext.textBaseline = constants._CTX_MIDDLE;
+ } else {
+ this.drawingContext.textBaseline = this._textBaseline;
+ }
+ return p;
+ } //////////////////////////////////////////////
+ // STRUCTURE
+ //////////////////////////////////////////////
+ // a push() operation is in progress.
+ // the renderer should return a 'style' object that it wishes to
+ // store on the push stack.
+ // derived renderers should call the base class' push() method
+ // to fetch the base style object.
+
+ },
+ {
+ key: 'push',
+ value: function push() {
+ this.drawingContext.save();
+ // get the base renderer style
+ return _get(_getPrototypeOf(Renderer2D.prototype), 'push', this).call(this);
+ } // a pop() operation is in progress
+ // the renderer is passed the 'style' object that it returned
+ // from its push() method.
+ // derived renderers should pass this object to their base
+ // class' pop method
+
+ },
+ {
+ key: 'pop',
+ value: function pop(style) {
+ this.drawingContext.restore();
+ // Re-cache the fill / stroke state
+ this._cachedFillStyle = this.drawingContext.fillStyle;
+ this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+ _get(_getPrototypeOf(Renderer2D.prototype), 'pop', this).call(this, style);
+ }
+ }
+ ]);
+ return Renderer2D;
+ }(_main.default.Renderer); // Fix test
+ Renderer2D.prototype.text = function (str, x, y, maxWidth, maxHeight) {
+ var baselineHacked;
+ // baselineHacked: (HACK)
+ // A temporary fix to conform to Processing's implementation
+ // of BASELINE vertical alignment in a bounding box
+ if (typeof maxWidth !== 'undefined') {
+ if (this.drawingContext.textBaseline === constants.BASELINE) {
+ baselineHacked = true;
+ this.drawingContext.textBaseline = constants.TOP;
+ }
+ }
+ var p = _main.default.Renderer.prototype.text.apply(this, arguments);
+ if (baselineHacked) {
+ this.drawingContext.textBaseline = constants.BASELINE;
+ }
+ return p;
+ };
+ _main.default.Renderer2D = Renderer2D;
+ var _default = _main.default.Renderer2D;
+ exports.default = _default;
+ },
+ {
+ './constants': 291,
+ './main': 303,
+ './p5.Renderer': 306,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.fill': 173,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.function.name': 191,
+ 'core-js/modules/es.number.to-fixed': 198,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.reflect.get': 208,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 308: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ _main.default.prototype._promisePreloads = [
+ /* Example object
+ {
+ target: p5.prototype, // The target object to have the method modified
+ method: 'loadXAsync', // The name of the preload function to wrap
+ addCallbacks: true, // Whether to automatically handle the p5 callbacks
+ legacyPreloadSetup: { // Optional object to generate a legacy-style preload
+ method: 'loadX', // The name of the legacy preload function to generate
+ createBaseObject: function() {
+ return {};
+ } // An optional function to create the base object for the legacy preload.
+ }
+ }
+ */
+ ];
+ _main.default.prototype.registerPromisePreload = function (setup) {
+ _main.default.prototype._promisePreloads.push(setup);
+ };
+ var initialSetupRan = false;
+ _main.default.prototype._setupPromisePreloads = function () {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this._promisePreloads[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var preloadSetup = _step.value;
+ var thisValue = this;
+ var method = preloadSetup.method,
+ addCallbacks = preloadSetup.addCallbacks,
+ legacyPreloadSetup = preloadSetup.legacyPreloadSetup; // Get the target object that the preload gets assigned to by default,
+ // that is the current object.
+ var target = preloadSetup.target || this;
+ var sourceFunction = target[method].bind(target);
+ // If the target is the p5 prototype, then only set it up on the first run per page
+ if (target === _main.default.prototype) {
+ if (initialSetupRan) {
+ continue;
+ }
+ thisValue = null;
+ sourceFunction = target[method];
+ } // Replace the original method with a wrapped version
+
+ target[method] = this._wrapPromisePreload(thisValue, sourceFunction, addCallbacks);
+ // If a legacy preload is required
+ if (legacyPreloadSetup) {
+ // What is the name for this legacy preload
+ var legacyMethod = legacyPreloadSetup.method;
+ // Wrap the already wrapped Promise-returning method with the legacy setup
+ target[legacyMethod] = this._legacyPreloadGenerator(thisValue, legacyPreloadSetup, target[method]);
+ }
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ initialSetupRan = true;
+ };
+ _main.default.prototype._wrapPromisePreload = function (thisValue, fn, addCallbacks) {
+ var replacementFunction = function replacementFunction() {
+ var _this = this;
+ // Uses the current preload counting mechanism for now.
+ this._incrementPreload();
+ // A variable for the callback function if specified
+ var callback = null;
+ // A variable for the errorCallback function if specified
+ var errorCallback = null;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ if (addCallbacks) {
+ // Loop from the end of the args array, pulling up to two functions off of
+ // the end and putting them in fns
+ for (var i = args.length - 1; i >= 0 && !errorCallback; i--) {
+ if (typeof args[i] !== 'function') {
+ break;
+ }
+ errorCallback = callback;
+ callback = args.pop();
+ }
+ } // Call the underlying function and pass it to Promise.resolve,
+ // so that even if it didn't return a promise we can still
+ // act on the result as if it did.
+
+ var promise = Promise.resolve(fn.apply(this, args));
+ // Add the optional callbacks
+ if (callback) {
+ promise.then(callback);
+ }
+ if (errorCallback) {
+ promise.catch(errorCallback);
+ } // Decrement the preload counter only if the promise resolved
+
+ promise.then(function () {
+ return _this._decrementPreload();
+ });
+ // Return the original promise so that neither callback changes the result.
+ return promise;
+ };
+ if (thisValue) {
+ replacementFunction = replacementFunction.bind(thisValue);
+ }
+ return replacementFunction;
+ };
+ var objectCreator = function objectCreator() {
+ return {
+ };
+ };
+ _main.default.prototype._legacyPreloadGenerator = function (thisValue, legacyPreloadSetup, fn) {
+ // Create a function that will generate an object before the preload is
+ // launched. For example, if the object should be an array or be an instance
+ // of a specific class.
+ var baseValueGenerator = legacyPreloadSetup.createBaseObject || objectCreator;
+ var returnedFunction = function returnedFunction() {
+ var _this2 = this;
+ // Our then clause needs to run before setup, so we also increment the preload counter
+ this._incrementPreload();
+ // Generate the return value based on the generator.
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ var returnValue = baseValueGenerator.apply(this, args);
+ // Run the original wrapper
+ fn.apply(this, args).then(function (data) {
+ // Copy each key from the resolved value into returnValue
+ Object.assign(returnValue, data);
+ // Decrement the preload counter, to allow setup to continue.
+ _this2._decrementPreload();
+ });
+ return returnValue;
+ };
+ if (thisValue) {
+ returnedFunction = returnedFunction.bind(thisValue);
+ }
+ return returnedFunction;
+ };
+ },
+ {
+ './main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.assign': 199,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.promise': 206,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 309: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ _dereq_('./p5.Graphics');
+ _dereq_('./p5.Renderer2D');
+ _dereq_('../webgl/p5.RendererGL');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @module Rendering
+ * @submodule Rendering
+ * @for p5
+ */
+
+ var defaultId = 'defaultCanvas0'; // this gets set again in createCanvas
+ var defaultClass = 'p5Canvas';
+ /**
+ * Creates a canvas element on the web page.
+ *
+ * `createCanvas()` creates the main drawing canvas for a sketch. It should
+ * only be called once at the beginning of setup().
+ * Calling `createCanvas()` more than once causes unpredictable behavior.
+ *
+ * The first two parameters, `width` and `height`, are optional. They set the
+ * dimensions of the canvas and the values of the
+ * width and height system
+ * variables. For example, calling `createCanvas(900, 500)` creates a canvas
+ * that's 900×500 pixels. By default, `width` and `height` are both 100.
+ *
+ * The third parameter is also optional. If either of the constants `P2D` or
+ * `WEBGL` is passed, as in `createCanvas(900, 500, WEBGL)`, then it will set
+ * the sketch's rendering mode. If an existing
+ * HTMLCanvasElement
+ * is passed, as in `createCanvas(900, 500, myCanvas)`, then it will be used
+ * by the sketch.
+ *
+ * The fourth parameter is also optional. If an existing
+ * HTMLCanvasElement
+ * is passed, as in `createCanvas(900, 500, WEBGL, myCanvas)`, then it will be
+ * used by the sketch.
+ *
+ * Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported
+ * by the browser. Check the webglVersion
+ * system variable to check what version is being used, or call
+ * `setAttributes({ version: 1 })` to create a WebGL1 context.
+ *
+ * @method createCanvas
+ * @param {Number} [width] width of the canvas. Defaults to 100.
+ * @param {Number} [height] width of the canvas. Defaults to 100.
+ * @param {Constant} [renderer] either P2D or WEBGL. Defaults to `P2D`.
+ * @param {HTMLCanvasElement} [canvas] existing canvas element that should be used for the sketch.
+ * @return {p5.Renderer} new `p5.Renderer` that holds the canvas.
+ *
+ * @example
+ *
+ * // Click and hold a mouse button to change shapes.
+ *
+ * let pg;
+ * let torusLayer;
+ * let boxLayer;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create an options object.
+ * let options = { width: 25, height: 25 };
+ *
+ * // Create a p5.Graphics object using WebGL mode.
+ * pg = createGraphics(100, 100, WEBGL);
+ *
+ * // Create the p5.Framebuffer objects.
+ * // Use options for configuration.
+ * torusLayer = pg.createFramebuffer(options);
+ * boxLayer = pg.createFramebuffer(options);
+ *
+ * describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');
+ * }
+ *
+ * function draw() {
+ * // Update and draw the layers offscreen.
+ * drawTorus();
+ * drawBox();
+ *
+ * // Choose the layer to display.
+ * let layer;
+ * if (mouseIsPressed === true) {
+ * layer = boxLayer;
+ * } else {
+ * layer = torusLayer;
+ * }
+ *
+ * // Draw to the p5.Graphics object.
+ * pg.background(50);
+ *
+ * // Iterate from left to right.
+ * for (let x = -50; x < 50; x += 25) {
+ * // Iterate from top to bottom.
+ * for (let y = -50; y < 50; y += 25) {
+ * // Draw the layer to the p5.Graphics object
+ * pg.image(layer, x, y);
+ * }
+ * }
+ *
+ * // Display the p5.Graphics object.
+ * image(pg, 0, 0);
+ * }
+ *
+ * // Update and draw the torus layer offscreen.
+ * function drawTorus() {
+ * // Start drawing to the torus p5.Framebuffer.
+ * torusLayer.begin();
+ *
+ * // Clear the drawing surface.
+ * pg.clear();
+ *
+ * // Turn on the lights.
+ * pg.lights();
+ *
+ * // Rotate the coordinate system.
+ * pg.rotateX(frameCount * 0.01);
+ * pg.rotateY(frameCount * 0.01);
+ *
+ * // Style the torus.
+ * pg.noStroke();
+ *
+ * // Draw the torus.
+ * pg.torus(5, 2.5);
+ *
+ * // Start drawing to the torus p5.Framebuffer.
+ * torusLayer.end();
+ * }
+ *
+ * // Update and draw the box layer offscreen.
+ * function drawBox() {
+ * // Start drawing to the box p5.Framebuffer.
+ * boxLayer.begin();
+ *
+ * // Clear the drawing surface.
+ * pg.clear();
+ *
+ * // Turn on the lights.
+ * pg.lights();
+ *
+ * // Rotate the coordinate system.
+ * pg.rotateX(frameCount * 0.01);
+ * pg.rotateY(frameCount * 0.01);
+ *
+ * // Style the box.
+ * pg.noStroke();
+ *
+ * // Draw the box.
+ * pg.box(7.5);
+ *
+ * // Start drawing to the box p5.Framebuffer.
+ * boxLayer.end();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a diagonal line.
+ * line(0, 0, width, height);
+ *
+ * describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 50);
+ *
+ * background(200);
+ *
+ * // Draw a diagonal line.
+ * line(0, 0, width, height);
+ *
+ * describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Use WebGL mode.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Draw a diagonal line.
+ * line(-width / 2, -height / 2, width / 2, height / 2);
+ *
+ * describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method createCanvas
+ * @param {Number} [width]
+ * @param {Number} [height]
+ * @param {HTMLCanvasElement} [canvas]
+ * @return {p5.Renderer}
+ */
+ _main.default.prototype.createCanvas = function (w, h, renderer, canvas) {
+ _main.default._validateParameters('createCanvas', arguments);
+ //optional: renderer, otherwise defaults to p2d
+ var r;
+ if (arguments[2] instanceof HTMLCanvasElement) {
+ renderer = constants.P2D;
+ canvas = arguments[2];
+ } else {
+ r = renderer || constants.P2D;
+ }
+ var c;
+ if (canvas) {
+ c = document.getElementById(defaultId);
+ if (c) {
+ c.parentNode.removeChild(c); //replace the existing defaultCanvas
+ }
+ c = canvas;
+ this._defaultGraphicsCreated = false;
+ } else {
+ if (r === constants.WEBGL) {
+ c = document.getElementById(defaultId);
+ if (c) {
+ //if defaultCanvas already exists
+ c.parentNode.removeChild(c); //replace the existing defaultCanvas
+ var thisRenderer = this._renderer;
+ this._elements = this._elements.filter(function (e) {
+ return e !== thisRenderer;
+ });
+ }
+ c = document.createElement('canvas');
+ c.id = defaultId;
+ c.classList.add(defaultClass);
+ } else {
+ if (!this._defaultGraphicsCreated) {
+ if (canvas) {
+ c = canvas;
+ } else {
+ c = document.createElement('canvas');
+ }
+ var i = 0;
+ while (document.getElementById('defaultCanvas'.concat(i))) {
+ i++;
+ }
+ defaultId = 'defaultCanvas'.concat(i);
+ c.id = defaultId;
+ c.classList.add(defaultClass);
+ } else {
+ // resize the default canvas if new one is created
+ c = this.canvas;
+ }
+ } // set to invisible if still in setup (to prevent flashing with manipulate)
+
+ if (!this._setupDone) {
+ c.dataset.hidden = true; // tag to show later
+ c.style.visibility = 'hidden';
+ }
+ if (this._userNode) {
+ // user input node case
+ this._userNode.appendChild(c);
+ } else {
+ //create main element
+ if (document.getElementsByTagName('main').length === 0) {
+ var m = document.createElement('main');
+ document.body.appendChild(m);
+ } //append canvas to main
+
+ document.getElementsByTagName('main') [0].appendChild(c);
+ }
+ } // Init our graphics renderer
+ //webgl mode
+
+ if (r === constants.WEBGL) {
+ this._setProperty('_renderer', new _main.default.RendererGL(c, this, true));
+ this._elements.push(this._renderer);
+ var dimensions = this._renderer._adjustDimensions(w, h);
+ w = dimensions.adjustedWidth;
+ h = dimensions.adjustedHeight;
+ } else {
+ //P2D mode
+ if (!this._defaultGraphicsCreated) {
+ this._setProperty('_renderer', new _main.default.Renderer2D(c, this, true));
+ this._defaultGraphicsCreated = true;
+ this._elements.push(this._renderer);
+ }
+ }
+ this._renderer.resize(w, h);
+ this._renderer._applyDefaults();
+ return this._renderer;
+ };
+ /**
+ * Resizes the canvas to a given width and height.
+ *
+ * `resizeCanvas()` immediately clears the canvas and calls
+ * redraw(). It's common to call `resizeCanvas()`
+ * within the body of windowResized() like
+ * so:
+ *
+ * ```js
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ * ```
+ *
+ * The first two parameters, `width` and `height`, set the dimensions of the
+ * canvas. They also the values of the width and
+ * height system variables. For example, calling
+ * `resizeCanvas(300, 500)` resizes the canvas to 300×500 pixels, then sets
+ * width to 300 and
+ * height 500.
+ *
+ * The third parameter, `noRedraw`, is optional. If `true` is passed, as in
+ * `resizeCanvas(300, 500, true)`, then the canvas will be canvas to 300×500
+ * pixels but the redraw() function won't be called
+ * immediately. By default, redraw() is called
+ * immediately when `resizeCanvas()` finishes executing.
+ *
+ * @method resizeCanvas
+ * @param {Number} width width of the canvas.
+ * @param {Number} height height of the canvas.
+ * @param {Boolean} [noRedraw] whether to delay calling
+ * redraw(). Defaults
+ * to `false`.
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a p5.Render object.
+ * let cnv = createCanvas(50, 50);
+ *
+ * // Position the canvas.
+ * cnv.position(10, 20);
+ *
+ * background(200);
+ *
+ * // Draw a diagonal line.
+ * line(0, 0, width, height);
+ *
+ * describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click to resize the canvas.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a circle at the center of the canvas.
+ * circle(width / 2, height / 2, 20);
+ * }
+ *
+ * // Resize the canvas when the user double-clicks.
+ * function doubleClicked() {
+ * resizeCanvas(50, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.resizeCanvas = function (w, h, noRedraw) {
+ _main.default._validateParameters('resizeCanvas', arguments);
+ if (this._renderer) {
+ // save canvas properties
+ var props = {
+ };
+ for (var key in this.drawingContext) {
+ var val = this.drawingContext[key];
+ if (_typeof(val) !== 'object' && typeof val !== 'function') {
+ props[key] = val;
+ }
+ }
+ if (this._renderer instanceof _main.default.RendererGL) {
+ var dimensions = this._renderer._adjustDimensions(w, h);
+ w = dimensions.adjustedWidth;
+ h = dimensions.adjustedHeight;
+ }
+ this.width = w;
+ this.height = h;
+ // Make sure width and height are updated before the renderer resizes so
+ // that framebuffers updated from the resize read the correct size
+ this._renderer.resize(w, h);
+ // reset canvas properties
+ for (var savedKey in props) {
+ try {
+ this.drawingContext[savedKey] = props[savedKey];
+ } catch (err) {
+ // ignore read-only property errors
+ }
+ }
+ if (!noRedraw) {
+ this.redraw();
+ }
+ } //accessible Outputs
+
+ if (this._addAccsOutput()) {
+ this._updateAccsOutput();
+ }
+ };
+ /**
+ * Removes the default canvas.
+ *
+ * By default, a 100×100 pixels canvas is created without needing to call
+ * createCanvas(). `noCanvas()` removes the
+ * default canvas for sketches that don't need it.
+ *
+ * @method noCanvas
+ *
+ * @example
+ *
+ * // Resize the web browser to change the canvas size.
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * describe('A white circle drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a circle at the center of the canvas.
+ * circle(width / 2, height / 2, 20);
+ * }
+ *
+ * // Always resize the canvas to fill the browser window.
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noCanvas = function () {
+ if (this.canvas) {
+ this.canvas.parentNode.removeChild(this.canvas);
+ }
+ };
+ /**
+ * Creates a p5.Graphics object.
+ *
+ * `createGraphics()` creates an offscreen drawing canvas (graphics buffer)
+ * and returns it as a p5.Graphics object. Drawing
+ * to a separate graphics buffer can be helpful for performance and for
+ * organizing code.
+ *
+ * The first two parameters, `width` and `height`, are optional. They set the
+ * dimensions of the p5.Graphics object. For
+ * example, calling `createGraphics(900, 500)` creates a graphics buffer
+ * that's 900×500 pixels.
+ *
+ * The third parameter is also optional. If either of the constants `P2D` or
+ * `WEBGL` is passed, as in `createGraphics(900, 500, WEBGL)`, then it will set
+ * the p5.Graphics object's rendering mode. If an
+ * existing
+ * HTMLCanvasElement
+ * is passed, as in `createGraphics(900, 500, myCanvas)`, then it will be used
+ * by the graphics buffer.
+ *
+ * The fourth parameter is also optional. If an existing
+ * HTMLCanvasElement
+ * is passed, as in `createGraphics(900, 500, WEBGL, myCanvas)`, then it will be
+ * used by the graphics buffer.
+ *
+ * Note: In WebGL mode, the p5.Graphics object
+ * will use a WebGL2 context if it's supported by the browser. Check the
+ * webglVersion system variable to check what
+ * version is being used, or call `setAttributes({ version: 1 })` to create a
+ * WebGL1 context.
+ *
+ * @method createGraphics
+ * @param {Number} width width of the graphics buffer.
+ * @param {Number} height height of the graphics buffer.
+ * @param {Constant} [renderer] either P2D or WEBGL. Defaults to P2D.
+ * @param {HTMLCanvasElement} [canvas] existing canvas element that should be
+ * used for the graphics buffer..
+ * @return {p5.Graphics} new graphics buffer.
+ *
+ * @example
+ *
+ * function setup() {
+ * noCanvas();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click to draw the contents of the graphics buffer.
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create the p5.Graphics object.
+ * pg = createGraphics(50, 50);
+ *
+ * // Draw to the graphics buffer.
+ * pg.background(100);
+ * pg.circle(pg.width / 2, pg.height / 2, 20);
+ *
+ * describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.');
+ * }
+ *
+ * // Display the graphics buffer when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * image(pg, 25, 25);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method createGraphics
+ * @param {Number} width
+ * @param {Number} height
+ * @param {HTMLCanvasElement} [canvas]
+ * @return {p5.Graphics}
+ */
+ _main.default.prototype.createGraphics = function (w, h) {
+ for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+ args[_key - 2] = arguments[_key];
+ } /**
+ * args[0] is expected to be renderer
+ * args[1] is expected to be canvas
+ */
+
+ if (args[0] instanceof HTMLCanvasElement) {
+ args[1] = args[0];
+ args[0] = constants.P2D;
+ }
+ _main.default._validateParameters('createGraphics', arguments);
+ return new _main.default.Graphics(w, h, args[0], this, args[1]);
+ };
+ /**
+ * Creates and a new p5.Framebuffer object.
+ *
+ * p5.Framebuffer objects are separate drawing
+ * surfaces that can be used as textures in WebGL mode. They're similar to
+ * p5.Graphics objects and generally run much
+ * faster when used as textures.
+ *
+ * The parameter, `options`, is optional. An object can be passed to configure
+ * the p5.Framebuffer object. The available
+ * properties are:
+ *
+ * - `format`: data format of the texture, either `UNSIGNED_BYTE`, `FLOAT`, or `HALF_FLOAT`. Default is `UNSIGNED_BYTE`.
+ * - `channels`: whether to store `RGB` or `RGBA` color channels. Default is to match the main canvas which is `RGBA`.
+ * - `depth`: whether to include a depth buffer. Default is `true`.
+ * - `depthFormat`: data format of depth information, either `UNSIGNED_INT` or `FLOAT`. Default is `FLOAT`.
+ * - `stencil`: whether to include a stencil buffer for masking. `depth` must be `true` for this feature to work. Defaults to the value of `depth` which is `true`.
+ * - `antialias`: whether to perform anti-aliasing. If set to `true`, as in `{ antialias: true }`, 2 samples will be used by default. The number of samples can also be set, as in `{ antialias: 4 }`. Default is to match setAttributes() which is `false` (`true` in Safari).
+ * - `width`: width of the p5.Framebuffer object. Default is to always match the main canvas width.
+ * - `height`: height of the p5.Framebuffer object. Default is to always match the main canvas height.
+ * - `density`: pixel density of the p5.Framebuffer object. Default is to always match the main canvas pixel density.
+ * - `textureFiltering`: how to read values from the p5.Framebuffer object. Either `LINEAR` (nearby pixels will be interpolated) or `NEAREST` (no interpolation). Generally, use `LINEAR` when using the texture as an image and `NEAREST` if reading the texture as data. Default is `LINEAR`.
+ *
+ * If the `width`, `height`, or `density` attributes are set, they won't automatically match the main canvas and must be changed manually.
+ *
+ * Note: `createFramebuffer()` can only be used in WebGL mode.
+ *
+ * @method createFramebuffer
+ * @param {Object} [options] configuration options.
+ * @return {p5.Framebuffer} new framebuffer.
+ *
+ * @example
+ *
+ * // Double-click to draw the contents of the graphics buffer.
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create the p5.Graphics object in WebGL mode.
+ * pg = createGraphics(50, 50, WEBGL);
+ *
+ * // Draw to the graphics buffer.
+ * pg.background(100);
+ * pg.lights();
+ * pg.noStroke();
+ * pg.rotateX(QUARTER_PI);
+ * pg.rotateY(QUARTER_PI);
+ * pg.torus(15, 5);
+ *
+ * describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.');
+ * }
+ *
+ * // Display the graphics buffer when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * image(pg, 25, 25);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * describe('A grid of white toruses rotating against a dark gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Start drawing to the p5.Framebuffer object.
+ * myBuffer.begin();
+ *
+ * // Clear the drawing surface.
+ * clear();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate the coordinate system.
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ *
+ * // Style the torus.
+ * noStroke();
+ *
+ * // Draw the torus.
+ * torus(20);
+ *
+ * // Stop drawing to the p5.Framebuffer object.
+ * myBuffer.end();
+ *
+ * // Iterate from left to right.
+ * for (let x = -50; x < 50; x += 25) {
+ * // Iterate from top to bottom.
+ * for (let y = -50; y < 50; y += 25) {
+ * // Draw the p5.Framebuffer object to the canvas.
+ * image(myBuffer, x, y, 25, 25);
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createFramebuffer = function (options) {
+ return new _main.default.Framebuffer(this, options);
+ };
+ /**
+ * Clears the depth buffer in WebGL mode.
+ *
+ * `clearDepth()` clears information about how far objects are from the camera
+ * in 3D space. This information is stored in an object called the
+ * *depth buffer*. Clearing the depth buffer ensures new objects aren't drawn
+ * behind old ones. Doing so can be useful for feedback effects in which the
+ * previous frame serves as the background for the current frame.
+ *
+ * The parameter, `depth`, is optional. If a number is passed, as in
+ * `clearDepth(0.5)`, it determines the range of objects to clear from the
+ * depth buffer. 0 doesn't clear any depth information, 0.5 clears depth
+ * information halfway between the near and far clipping planes, and 1 clears
+ * depth information all the way to the far clipping plane. By default,
+ * `depth` is 1.
+ *
+ * Note: `clearDepth()` can only be used in WebGL mode.
+ *
+ * @method clearDepth
+ * @param {Number} [depth] amount of the depth buffer to clear between 0
+ * (none) and 1 (far clipping plane). Defaults to 1.
+ *
+ * @example
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create an options object.
+ * let options = { width: 25, height: 25 };
+ *
+ * // Create a p5.Framebuffer object.
+ * // Use options for configuration.
+ * myBuffer = createFramebuffer(options);
+ *
+ * describe('A grid of white toruses rotating against a dark gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Start drawing to the p5.Framebuffer object.
+ * myBuffer.begin();
+ *
+ * // Clear the drawing surface.
+ * clear();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate the coordinate system.
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ *
+ * // Style the torus.
+ * noStroke();
+ *
+ * // Draw the torus.
+ * torus(5, 2.5);
+ *
+ * // Stop drawing to the p5.Framebuffer object.
+ * myBuffer.end();
+ *
+ * // Iterate from left to right.
+ * for (let x = -50; x < 50; x += 25) {
+ * // Iterate from top to bottom.
+ * for (let y = -50; y < 50; y += 25) {
+ * // Draw the p5.Framebuffer object to the canvas.
+ * image(myBuffer, x, y);
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.clearDepth = function (depth) {
+ this._assert3d('clearDepth');
+ this._renderer.clearDepth(depth);
+ };
+ /**
+ * Sets the way colors blend when added to the canvas.
+ *
+ * By default, drawing with a solid color paints over the current pixel values
+ * on the canvas. `blendMode()` offers many options for blending colors.
+ *
+ * Shapes, images, and text can be used as sources for drawing to the canvas.
+ * A source pixel changes the color of the canvas pixel where it's drawn. The
+ * final color results from blending the source pixel's color with the canvas
+ * pixel's color. RGB color values from the source and canvas pixels are
+ * compared, added, subtracted, multiplied, and divided to create different
+ * effects. Red values with red values, greens with greens, and blues with
+ * blues.
+ *
+ * The parameter, `mode`, sets the blend mode. For example, calling
+ * `blendMode(ADD)` sets the blend mode to `ADD`. The following blend modes
+ * are available in both 2D and WebGL mode:
+ *
+ * - `BLEND`: color values from the source overwrite the canvas. This is the default mode.
+ * - `ADD`: color values from the source are added to values from the canvas.
+ * - `DARKEST`: keeps the darkest color value.
+ * - `LIGHTEST`: keeps the lightest color value.
+ * - `EXCLUSION`: similar to `DIFFERENCE` but with less contrast.
+ * - `MULTIPLY`: color values from the source are multiplied with values from the canvas. The result is always darker.
+ * - `SCREEN`: all color values are inverted, then multiplied, then inverted again. The result is always lighter. (Opposite of `MULTIPLY`)
+ * - `REPLACE`: the last source drawn completely replaces the rest of the canvas.
+ * - `REMOVE`: overlapping pixels are removed by making them completely transparent.
+ *
+ * The following blend modes are only available in 2D mode:
+ *
+ * - `DIFFERENCE`: color values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive.
+ * - `OVERLAY`: combines `MULTIPLY` and `SCREEN`. Dark values in the canvas get darker and light values get lighter.
+ * - `HARD_LIGHT`: combines `MULTIPLY` and `SCREEN`. Dark values in the source get darker and light values get lighter.
+ * - `SOFT_LIGHT`: a softer version of `HARD_LIGHT`.
+ * - `DODGE`: lightens light tones and increases contrast. Divides the canvas color values by the inverted color values from the source.
+ * - `BURN`: darkens dark tones and increases contrast. Divides the source color values by the inverted color values from the canvas, then inverts the result.
+ *
+ * The following blend modes are only available in WebGL mode:
+ *
+ * - `SUBTRACT`: RGB values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. Alpha (transparency) values from the source and canvas are added.
+ *
+ * @method blendMode
+ * @param {Constant} mode blend mode to set.
+ * either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
+ * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
+ *
+ * @example
+ *
+ * let previous;
+ * let current;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the p5.Framebuffer objects.
+ * prev = createFramebuffer({ format: FLOAT });
+ * current = createFramebuffer({ format: FLOAT });
+ *
+ * describe(
+ * 'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Set the previous p5.Framebuffer to the
+ * // current one so it can be used as a texture.
+ * previous = current;
+ *
+ * // Start drawing to the current p5.Framebuffer.
+ * current.begin();
+ *
+ * // Paint the background.
+ * background(255);
+ *
+ * // Draw the previous p5.Framebuffer.
+ * // Clear the depth buffer so the previous
+ * // frame doesn't block the current one.
+ * push();
+ * tint(255, 250);
+ * image(previous, -50, -50);
+ * clearDepth();
+ * pop();
+ *
+ * // Draw the box on top of the previous frame.
+ * push();
+ * let x = 25 * sin(frameCount * 0.01);
+ * let y = 25 * sin(frameCount * 0.02);
+ * translate(x, y, 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * normalMaterial();
+ * box(12);
+ * pop();
+ *
+ * // Stop drawing to the current p5.Framebuffer.
+ * current.end();
+ *
+ * // Display the current p5.Framebuffer.
+ * image(current, -50, -50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use the default blend mode.
+ * blendMode(BLEND);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A blue line and a red line form an X on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(ADD);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(DARKEST);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(LIGHTEST);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(EXCLUSION);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A yellow line and a cyan line form an X on a gray background. The area where they overlap is green.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(MULTIPLY);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(SCREEN);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(REPLACE);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A diagonal red line.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(REMOVE);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('The silhouette of an X is missing from a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(DIFFERENCE);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A yellow line and a cyan line form an X on a gray background. The area where they overlap is green.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(OVERLAY);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is bright magenta.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(HARD_LIGHT);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A blue line and a red line form an X on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(SOFT_LIGHT);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is violet.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(DODGE);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint violet.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(BURN);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.blendMode = function (mode) {
+ _main.default._validateParameters('blendMode', arguments);
+ if (mode === constants.NORMAL) {
+ // Warning added 3/26/19, can be deleted in future (1.0 release?)
+ console.warn('NORMAL has been deprecated for use in blendMode. defaulting to BLEND instead.');
+ mode = constants.BLEND;
+ }
+ this._renderer.blendMode(mode);
+ };
+ /**
+ * A system variable that provides direct access to the sketch's
+ * `<canvas>` element.
+ *
+ * The `<canvas>` element provides many specialized features that aren't
+ * included in the p5.js library. The `drawingContext` system variable
+ * provides access to these features by exposing the sketch's
+ * CanvasRenderingContext2D
+ * object.
+ *
+ * @property drawingContext
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the blend mode.
+ * blendMode(SUBTRACT);
+ *
+ * // Style the lines.
+ * strokeWeight(30);
+ *
+ * // Draw the blue line.
+ * stroke('blue');
+ * line(25, 25, 75, 75);
+ *
+ * // Draw the red line.
+ * stroke('red');
+ * line(75, 25, 25, 75);
+ *
+ * describe('A yellow line and a turquoise line form an X on a gray background. The area where they overlap is green.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the circle using shadows.
+ * drawingContext.shadowOffsetX = 5;
+ * drawingContext.shadowOffsetY = -5;
+ * drawingContext.shadowBlur = 10;
+ * drawingContext.shadowColor = 'black';
+ *
+ * // Draw the circle.
+ * circle(50, 50, 40);
+ *
+ * describe("A white circle on a gray background. The circle's edges are shadowy.");
+ * }
+ *
+ *
+ *
+ */
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../webgl/p5.RendererGL': 360,
+ './constants': 291,
+ './main': 303,
+ './p5.Graphics': 305,
+ './p5.Renderer2D': 307,
+ 'core-js/modules/es.array.filter': 174,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 310: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.slice');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ var _helpers = _interopRequireDefault(_dereq_('../helpers'));
+ _dereq_('../friendly_errors/fes_core');
+ _dereq_('../friendly_errors/file_errors');
+ _dereq_('../friendly_errors/validate_params');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * @module Shape
+ * @submodule 2D Primitives
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * This function does 3 things:
+ *
+ * 1. Bounds the desired start/stop angles for an arc (in radians) so that:
+ *
+ * 0 <= start < TWO_PI ; start <= stop < start + TWO_PI
+ *
+ * This means that the arc rendering functions don't have to be concerned
+ * with what happens if stop is smaller than start, or if the arc 'goes
+ * round more than once', etc.: they can just start at start and increase
+ * until stop and the correct arc will be drawn.
+ *
+ * 2. Optionally adjusts the angles within each quadrant to counter the naive
+ * scaling of the underlying ellipse up from the unit circle. Without
+ * this, the angles become arbitrary when width != height: 45 degrees
+ * might be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on
+ * a 'tall' ellipse.
+ *
+ * 3. Flags up when start and stop correspond to the same place on the
+ * underlying ellipse. This is useful if you want to do something special
+ * there (like rendering a whole ellipse instead).
+ */
+
+ _main.default.prototype._normalizeArcAngles = function (start, stop, width, height, correctForScaling) {
+ var epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
+ var separation;
+ // The order of the steps is important here: each one builds upon the
+ // adjustments made in the steps that precede it.
+ // Constrain both start and stop to [0,TWO_PI).
+ start = start - constants.TWO_PI * Math.floor(start / constants.TWO_PI);
+ stop = stop - constants.TWO_PI * Math.floor(stop / constants.TWO_PI);
+ // Get the angular separation between the requested start and stop points.
+ //
+ // Technically this separation only matches what gets drawn if
+ // correctForScaling is enabled. We could add a more complicated calculation
+ // for when the scaling is uncorrected (in which case the drawn points could
+ // end up pushed together or pulled apart quite dramatically relative to what
+ // was requested), but it would make things more opaque for little practical
+ // benefit.
+ //
+ // (If you do disable correctForScaling and find that correspondToSamePoint
+ // is set too aggressively, the easiest thing to do is probably to just make
+ // epsilon smaller...)
+ separation = Math.min(Math.abs(start - stop), constants.TWO_PI - Math.abs(start - stop));
+ // Optionally adjust the angles to counter linear scaling.
+ if (correctForScaling) {
+ if (start <= constants.HALF_PI) {
+ start = Math.atan(width / height * Math.tan(start));
+ } else if (start > constants.HALF_PI && start <= 3 * constants.HALF_PI) {
+ start = Math.atan(width / height * Math.tan(start)) + constants.PI;
+ } else {
+ start = Math.atan(width / height * Math.tan(start)) + constants.TWO_PI;
+ }
+ if (stop <= constants.HALF_PI) {
+ stop = Math.atan(width / height * Math.tan(stop));
+ } else if (stop > constants.HALF_PI && stop <= 3 * constants.HALF_PI) {
+ stop = Math.atan(width / height * Math.tan(stop)) + constants.PI;
+ } else {
+ stop = Math.atan(width / height * Math.tan(stop)) + constants.TWO_PI;
+ }
+ } // Ensure that start <= stop < start + TWO_PI.
+
+ if (start > stop) {
+ stop += constants.TWO_PI;
+ }
+ return {
+ start: start,
+ stop: stop,
+ correspondToSamePoint: separation < epsilon
+ };
+ };
+ /**
+ * Draws an arc.
+ *
+ * An arc is a section of an ellipse defined by the `x`, `y`, `w`, and
+ * `h` parameters. `x` and `y` set the location of the arc's center. `w` and
+ * `h` set the arc's width and height. See
+ * ellipse() and
+ * ellipseMode() for more details.
+ *
+ * The fifth and sixth parameters, `start` and `stop`, set the angles
+ * between which to draw the arc. Arcs are always drawn clockwise from
+ * `start` to `stop`. Angles are always given in radians.
+ *
+ * The seventh parameter, `mode`, is optional. It determines the arc's fill
+ * style. The fill modes are a semi-circle (`OPEN`), a closed semi-circle
+ * (`CHORD`), or a closed pie segment (`PIE`).
+ *
+ * The eighth parameter, `detail`, is also optional. It determines how many
+ * vertices are used to draw the arc in WebGL mode. The default value is 25.
+ *
+ * @method arc
+ * @param {Number} x x-coordinate of the arc's ellipse.
+ * @param {Number} y y-coordinate of the arc's ellipse.
+ * @param {Number} w width of the arc's ellipse by default.
+ * @param {Number} h height of the arc's ellipse by default.
+ * @param {Number} start angle to start the arc, specified in radians.
+ * @param {Number} stop angle to stop the arc, specified in radians.
+ * @param {Constant} [mode] optional parameter to determine the way of drawing
+ * the arc. either CHORD, PIE, or OPEN.
+ * @param {Integer} [detail] optional parameter for WebGL mode only. This is to
+ * specify the number of vertices that makes up the
+ * perimeter of the arc. Default value is 25. Won't
+ * draw a stroke for a detail of more than 50.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background('skyblue');
+ *
+ * // Style the circle using a color gradient.
+ * let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);
+ * myGradient.addColorStop(0, 'yellow');
+ * myGradient.addColorStop(0.6, 'orangered');
+ * myGradient.addColorStop(1, 'yellow');
+ * drawingContext.fillStyle = myGradient;
+ * drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';
+ *
+ * // Draw the circle.
+ * circle(50, 50, 40);
+ *
+ * describe('A fiery sun drawn on a light blue background.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * arc(50, 50, 80, 80, 0, PI + HALF_PI);
+ *
+ * describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * arc(50, 50, 80, 40, 0, PI + HALF_PI);
+ *
+ * describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Bottom-right.
+ * arc(50, 55, 50, 50, 0, HALF_PI);
+ *
+ * noFill();
+ *
+ * // Bottom-left.
+ * arc(50, 55, 60, 60, HALF_PI, PI);
+ *
+ * // Top-left.
+ * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+ *
+ * // Top-right.
+ * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+ *
+ * describe(
+ * 'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Default fill mode.
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+ *
+ * describe('A white circle with the top-right third missing. The bottom is outlined in black.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // OPEN fill mode.
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+ *
+ * describe(
+ * 'A white circle missing a section from the top-right. The bottom is outlined in black.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // CHORD fill mode.
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+ *
+ * describe('A white circle with a black outline missing a section from the top-right.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // PIE fill mode.
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+ *
+ * describe('A white circle with a black outline. The top-right third is missing.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // PIE fill mode.
+ * arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);
+ *
+ * describe('A white circle with a black outline. The top-right third is missing.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // PIE fill mode with 5 vertices.
+ * arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);
+ *
+ * describe('A white circle with a black outline. The top-right third is missing.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.arc = function (x, y, w, h, start, stop, mode, detail) {
+ _main.default._validateParameters('arc', arguments);
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }
+ if (start === stop) {
+ return this;
+ }
+ start = this._toRadians(start);
+ stop = this._toRadians(stop);
+ // p5 supports negative width and heights for ellipses
+ w = Math.abs(w);
+ h = Math.abs(h);
+ var vals = _helpers.default.modeAdjust(x, y, w, h, this._renderer._ellipseMode);
+ var angles = this._normalizeArcAngles(start, stop, vals.w, vals.h, true);
+ if (angles.correspondToSamePoint) {
+ // If the arc starts and ends at (near enough) the same place, we choose to
+ // draw an ellipse instead. This is preferable to faking an ellipse (by
+ // making stop ever-so-slightly less than start + TWO_PI) because the ends
+ // join up to each other rather than at a vertex at the centre (leaving
+ // an unwanted spike in the stroke/fill).
+ this._renderer.ellipse([vals.x,
+ vals.y,
+ vals.w,
+ vals.h,
+ detail]);
+ } else {
+ this._renderer.arc(vals.x, vals.y, vals.w, vals.h, angles.start, // [0, TWO_PI)
+ angles.stop, // [start, start + TWO_PI)
+ mode, detail);
+ //accessible Outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('arc', [
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h,
+ angles.start,
+ angles.stop,
+ mode
+ ]);
+ }
+ }
+ return this;
+ };
+ /**
+ * Draws an ellipse (oval).
+ *
+ * An ellipse is a round shape defined by the `x`, `y`, `w`, and
+ * `h` parameters. `x` and `y` set the location of its center. `w` and
+ * `h` set its width and height. See
+ * ellipseMode() for other ways to set
+ * its position.
+ *
+ * If no height is set, the value of width is used for both the width and
+ * height. If a negative height or width is specified, the absolute value is
+ * taken.
+ *
+ * The fifth parameter, `detail`, is also optional. It determines how many
+ * vertices are used to draw the ellipse in WebGL mode. The default value is
+ * 25.
+ *
+ * @method 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
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A yellow circle on a black background. The circle opens and closes its mouth.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Style the arc.
+ * noStroke();
+ * fill(255, 255, 0);
+ *
+ * // Update start and stop angles.
+ * let biteSize = PI / 16;
+ * let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
+ * let endAngle = TWO_PI - startAngle;
+ *
+ * // Draw the arc.
+ * arc(50, 50, 80, 80, startAngle, endAngle, PIE);
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * ellipse(50, 50, 80, 80);
+ *
+ * describe('A white circle on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * ellipse(50, 50, 80);
+ *
+ * describe('A white circle on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * ellipse(50, 50, 80, 40);
+ *
+ * describe('A white ellipse on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * ellipse(0, 0, 80, 40);
+ *
+ * describe('A white ellipse on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method ellipse
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @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.
+ */
+ _main.default.prototype.ellipse = function (x, y, w, h, detailX) {
+ _main.default._validateParameters('ellipse', arguments);
+ return this._renderEllipse.apply(this, arguments);
+ };
+ /**
+ * Draws a circle.
+ *
+ * A circle is a round shape defined by the `x`, `y`, and `d`
+ * parameters. `x` and `y` set the location of its center. `d` sets its
+ * width and height (diameter). Every point on the circle's edge is the
+ * same distance, `d`, from its center. See
+ * ellipseMode() for other ways to set
+ * its position.
+ *
+ * @method 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
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Use 6 vertices.
+ * ellipse(0, 0, 80, 40, 6);
+ *
+ * describe('A white hexagon on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * circle(50, 50, 25);
+ *
+ * describe('A white circle with black outline in the middle of a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.circle = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('circle', args);
+ var argss = args.slice(0, 2);
+ argss.push(args[2], args[2]);
+ return this._renderEllipse.apply(this, _toConsumableArray(argss));
+ };
+ // internal method for drawing ellipses (without parameter validation)
+ _main.default.prototype._renderEllipse = function (x, y, w, h, detailX) {
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ } // p5 supports negative width and heights for rects
+
+ if (w < 0) {
+ w = Math.abs(w);
+ }
+ if (typeof h === 'undefined') {
+ // Duplicate 3rd argument if only 3 given.
+ h = w;
+ } else if (h < 0) {
+ h = Math.abs(h);
+ }
+ var vals = _helpers.default.modeAdjust(x, y, w, h, this._renderer._ellipseMode);
+ this._renderer.ellipse([vals.x,
+ vals.y,
+ vals.w,
+ vals.h,
+ detailX]);
+ //accessible Outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('ellipse', [
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h
+ ]);
+ }
+ return this;
+ };
+ /**
+ * Draws a straight line between two points.
+ *
+ * A line's default width is one pixel. The version of `line()` with four
+ * parameters draws the line in 2D. To color a line, use the
+ * stroke() function. To change its width, use the
+ * strokeWeight() function. A line
+ * can't be filled, so the fill() function won't
+ * affect the line's color.
+ *
+ * The version of `line()` with six parameters allows the line to be drawn in
+ * 3D space. Doing so requires adding the `WEBGL` argument to
+ * createCanvas().
+ *
+ * @method line
+ * @param {Number} x1 the x-coordinate of the first point.
+ * @param {Number} y1 the y-coordinate of the first point.
+ * @param {Number} x2 the x-coordinate of the second point.
+ * @param {Number} y2 the y-coordinate of the second point.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * circle(0, 0, 25);
+ *
+ * describe('A white circle with black outline in the middle of a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * line(30, 20, 85, 75);
+ *
+ * describe(
+ * 'A black line on a gray canvas running from top-center to bottom-right.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the line.
+ * stroke('magenta');
+ * strokeWeight(5);
+ *
+ * line(30, 20, 85, 75);
+ *
+ * describe(
+ * 'A thick, magenta line on a gray canvas running from top-center to bottom-right.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top.
+ * line(30, 20, 85, 20);
+ *
+ * // Right.
+ * stroke(126);
+ * line(85, 20, 85, 75);
+ *
+ * // Bottom.
+ * stroke(255);
+ * line(85, 75, 30, 75);
+ *
+ * describe(
+ * 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * line(-20, -30, 35, 25);
+ *
+ * describe(
+ * 'A black line on a gray canvas running from top-center to bottom-right.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @method line
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 the z-coordinate of the first point.
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 the z-coordinate of the second point.
+ * @chainable
+ */
+ _main.default.prototype.line = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('line', args);
+ if (this._renderer._doStroke) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).line.apply(_this$_renderer, args);
+ } //accessible Outputs
+
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('line', args);
+ }
+ return this;
+ };
+ /**
+ * Draws a single point in space.
+ *
+ * A point's default width is one pixel. To color a point, use the
+ * stroke() function. To change its width, use the
+ * strokeWeight() function. A point
+ * can't be filled, so the fill() function won't
+ * affect the point's color.
+ *
+ * The version of `point()` with one parameter allows the point's location to
+ * be set with its x- and y-coordinates, as in `point(10, 20)`.
+ *
+ * The version of `point()` with three parameters allows the point to be drawn
+ * in 3D space with x-, y-, and z-coordinates, as in `point(10, 20, 30)`.
+ * Doing so requires adding the `WEBGL` argument to
+ * createCanvas().
+ *
+ * The version of `point()` with one parameter allows the point's location to
+ * be set with a p5.Vector object.
+ *
+ * @method point
+ * @param {Number} x the x-coordinate.
+ * @param {Number} y the y-coordinate.
+ * @param {Number} [z] the z-coordinate (for WebGL mode).
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A black line connecting two spheres. The scene spins slowly.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw a line.
+ * line(0, 0, 0, 30, 20, -10);
+ *
+ * // Draw the center sphere.
+ * sphere(10);
+ *
+ * // Translate to the second point.
+ * translate(30, 20, -10);
+ *
+ * // Draw the bottom-right sphere.
+ * sphere(10);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top-left.
+ * point(30, 20);
+ *
+ * // Top-right.
+ * point(85, 20);
+ *
+ * // Bottom-right.
+ * point(85, 75);
+ *
+ * // Bottom-left.
+ * point(30, 75);
+ *
+ * describe(
+ * 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top-left.
+ * point(30, 20);
+ *
+ * // Top-right.
+ * point(70, 20);
+ *
+ * // Style the next points.
+ * stroke('purple');
+ * strokeWeight(10);
+ *
+ * // Bottom-right.
+ * point(70, 80);
+ *
+ * // Bottom-left.
+ * point(30, 80);
+ *
+ * describe(
+ * 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top-left.
+ * let a = createVector(30, 20);
+ * point(a);
+ *
+ * // Top-right.
+ * let b = createVector(70, 20);
+ * point(b);
+ *
+ * // Bottom-right.
+ * let c = createVector(70, 80);
+ * point(c);
+ *
+ * // Bottom-left.
+ * let d = createVector(30, 80);
+ * point(d);
+ *
+ * describe(
+ * 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('Two purple points drawn on a gray canvas.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the points.
+ * stroke('purple');
+ * strokeWeight(10);
+ *
+ * // Top-left.
+ * point(-20, -30);
+ *
+ * // Bottom-right.
+ * point(20, 30);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method point
+ * @param {p5.Vector} coordinateVector the coordinate vector.
+ * @chainable
+ */
+ _main.default.prototype.point = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('point', args);
+ if (this._renderer._doStroke) {
+ if (args.length === 1 && args[0] instanceof _main.default.Vector) {
+ this._renderer.point.call(this._renderer, args[0].x, args[0].y, args[0].z);
+ } else {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).point.apply(_this$_renderer2, args);
+ //accessible Outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('point', args);
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * Draws a quadrilateral (four-sided shape).
+ *
+ * Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The
+ * first pair of parameters `(x1, y1)` sets the quad's first point. The next
+ * three pairs of parameters set the coordinates for its next three points
+ * `(x2, y2)`, `(x3, y3)`, and `(x4, y4)`. Points should be added in either
+ * clockwise or counter-clockwise order.
+ *
+ * The version of `quad()` with twelve parameters allows the quad to be drawn
+ * in 3D space. Doing so requires adding the `WEBGL` argument to
+ * createCanvas().
+ *
+ * The thirteenth and fourteenth parameters are optional. In WebGL mode, they
+ * set the number of segments used to draw the quadrilateral in the x- and
+ * y-directions. They're both 25 by default.
+ *
+ * @method quad
+ * @param {Number} x1 the x-coordinate of the first point.
+ * @param {Number} y1 the y-coordinate of the first point.
+ * @param {Number} x2 the x-coordinate of the second point.
+ * @param {Number} y2 the y-coordinate of the second point.
+ * @param {Number} x3 the x-coordinate of the third point.
+ * @param {Number} y3 the y-coordinate of the third point.
+ * @param {Number} x4 the x-coordinate of the fourth point.
+ * @param {Number} y4 the y-coordinate of the fourth point.
+ * @param {Integer} [detailX] number of segments in the x-direction.
+ * @param {Integer} [detailY] number of segments in the y-direction.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('Two purple points drawn on a gray canvas. The scene spins slowly.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Style the points.
+ * stroke('purple');
+ * strokeWeight(10);
+ *
+ * // Top-left.
+ * point(-20, -30, 0);
+ *
+ * // Bottom-right.
+ * point(20, 30, -50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * quad(20, 20, 80, 20, 80, 80, 20, 80);
+ *
+ * describe('A white square with a black outline drawn on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * quad(20, 30, 80, 30, 80, 70, 20, 70);
+ *
+ * describe('A white rectangle with a black outline drawn on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * quad(50, 62, 86, 50, 50, 38, 14, 50);
+ *
+ * describe('A white rhombus with a black outline drawn on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * quad(20, 50, 80, 30, 80, 70, 20, 70);
+ *
+ * describe('A white trapezoid with a black outline drawn on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * quad(-30, -30, 30, -30, 30, 30, -30, 30);
+ *
+ * describe('A white square with a black outline drawn on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method quad
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 the z-coordinate of the first point.
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 the z-coordinate of the second point.
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 the z-coordinate of the third point.
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 the z-coordinate of the fourth point.
+ * @param {Integer} [detailX]
+ * @param {Integer} [detailY]
+ * @chainable
+ */
+ _main.default.prototype.quad = function () {
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+ _main.default._validateParameters('quad', args);
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ if (this._renderer.isP3D && args.length < 12) {
+ // if 3D and we weren't passed 12 args, assume Z is 0
+ this._renderer.quad.call(this._renderer, args[0], args[1], 0, args[2], args[3], 0, args[4], args[5], 0, args[6], args[7], 0, args[8], args[9]);
+ } else {
+ var _this$_renderer3;
+ (_this$_renderer3 = this._renderer).quad.apply(_this$_renderer3, args);
+ //accessibile outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('quadrilateral', args);
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * Draws a rectangle.
+ *
+ * A rectangle is a four-sided shape defined by the `x`, `y`, `w`, and `h`
+ * parameters. `x` and `y` set the location of its top-left corner. `w` sets
+ * its width and `h` sets its height. Every angle in the rectangle measures
+ * 90˚. See rectMode() for other ways to define
+ * rectangles.
+ *
+ * The version of `rect()` with five parameters creates a rounded rectangle. The
+ * fifth parameter sets the radius for all four corners.
+ *
+ * The version of `rect()` with eight parameters also creates a rounded
+ * rectangle. Each of the last four parameters set the radius of a corner. The
+ * radii start with the top-left corner and move clockwise around the
+ * rectangle. If any of these parameters are omitted, they are set to the
+ * value of the last radius that was set.
+ *
+ * @method rect
+ * @param {Number} x x-coordinate of the rectangle.
+ * @param {Number} y y-coordinate of the rectangle.
+ * @param {Number} w width of the rectangle.
+ * @param {Number} [h] height of the rectangle.
+ * @param {Number} [tl] optional radius of top-left corner.
+ * @param {Number} [tr] optional radius of top-right corner.
+ * @param {Number} [br] optional radius of bottom-right corner.
+ * @param {Number} [bl] optional radius of bottom-left corner.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A wavy white surface spins around on gray canvas.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw the quad.
+ * quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * rect(30, 20, 55, 55);
+ *
+ * describe('A white square with a black outline on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * rect(30, 20, 55, 40);
+ *
+ * describe('A white rectangle with a black outline on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Give all corners a radius of 20.
+ * rect(30, 20, 55, 50, 20);
+ *
+ * describe('A white rectangle with a black outline and round edges on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Give each corner a unique radius.
+ * rect(30, 20, 55, 50, 20, 15, 10, 5);
+ *
+ * describe('A white rectangle with a black outline and round edges of different radii.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * rect(-20, -30, 55, 55);
+ *
+ * describe('A white square with a black outline on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method rect
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Integer} [detailX] number of segments in the x-direction (for WebGL mode).
+ * @param {Integer} [detailY] number of segments in the y-direction (for WebGL mode).
+ * @chainable
+ */
+ _main.default.prototype.rect = function () {
+ for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+ args[_key5] = arguments[_key5];
+ }
+ _main.default._validateParameters('rect', args);
+ return this._renderRect.apply(this, args);
+ };
+ /**
+ * Draws a square.
+ *
+ * A square is a four-sided shape defined by the `x`, `y`, and `s`
+ * parameters. `x` and `y` set the location of its top-left corner. `s` sets
+ * its width and height. Every angle in the square measures 90˚ and all its
+ * sides are the same length. See rectMode() for
+ * other ways to define squares.
+ *
+ * The version of `square()` with four parameters creates a rounded square.
+ * The fourth parameter sets the radius for all four corners.
+ *
+ * The version of `square()` with seven parameters also creates a rounded
+ * square. Each of the last four parameters set the radius of a corner. The
+ * radii start with the top-left corner and move clockwise around the
+ * square. If any of these parameters are omitted, they are set to the
+ * value of the last radius that was set.
+ *
+ * @method square
+ * @param {Number} x x-coordinate of the square.
+ * @param {Number} y y-coordinate of the square.
+ * @param {Number} s side size of the square.
+ * @param {Number} [tl] optional radius of top-left corner.
+ * @param {Number} [tr] optional radius of top-right corner.
+ * @param {Number} [br] optional radius of bottom-right corner.
+ * @param {Number} [bl] optional radius of bottom-left corner.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white square spins around on gray canvas.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw the rectangle.
+ * rect(-20, -30, 55, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * square(30, 20, 55);
+ *
+ * describe('A white square with a black outline in on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Give all corners a radius of 20.
+ * square(30, 20, 55, 20);
+ *
+ * describe(
+ * 'A white square with a black outline and round edges on a gray canvas.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Give each corner a unique radius.
+ * square(30, 20, 55, 20, 15, 10, 5);
+ *
+ * describe('A white square with a black outline and round edges of different radii.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * square(-20, -30, 55);
+ *
+ * describe('A white square with a black outline in on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.square = function (x, y, s, tl, tr, br, bl) {
+ _main.default._validateParameters('square', arguments);
+ // duplicate width for height in case of square
+ return this._renderRect.call(this, x, y, s, s, tl, tr, br, bl);
+ };
+ // internal method to have renderer draw a rectangle
+ _main.default.prototype._renderRect = function () {
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ // duplicate width for height in case only 3 arguments is provided
+ if (arguments.length === 3) {
+ arguments[3] = arguments[2];
+ }
+ var vals = _helpers.default.modeAdjust(arguments[0], arguments[1], arguments[2], arguments[3], this._renderer._rectMode);
+ var args = [
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h
+ ];
+ // append the additional arguments (either cornder radii, or
+ // segment details) to the argument list
+ for (var i = 4; i < arguments.length; i++) {
+ args[i] = arguments[i];
+ }
+ this._renderer.rect(args);
+ //accessible outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('rectangle', [
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h
+ ]);
+ }
+ }
+ return this;
+ };
+ /**
+ * Draws a triangle.
+ *
+ * A triangle is a three-sided shape defined by three points. The
+ * first two parameters specify the triangle's first point `(x1, y1)`. The
+ * middle two parameters specify its second point `(x2, y2)`. And the last two
+ * parameters specify its third point `(x3, y3)`.
+ *
+ * @method triangle
+ * @param {Number} x1 x-coordinate of the first point.
+ * @param {Number} y1 y-coordinate of the first point.
+ * @param {Number} x2 x-coordinate of the second point.
+ * @param {Number} y2 y-coordinate of the second point.
+ * @param {Number} x3 x-coordinate of the third point.
+ * @param {Number} y3 y-coordinate of the third point.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white square spins around on gray canvas.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw the square.
+ * square(-20, -30, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * triangle(30, 75, 58, 20, 86, 75);
+ *
+ * describe('A white triangle with a black outline on a gray canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * triangle(-20, 25, 8, -30, 36, 25);
+ *
+ * describe('A white triangle with a black outline on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.triangle = function () {
+ for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+ args[_key6] = arguments[_key6];
+ }
+ _main.default._validateParameters('triangle', args);
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ this._renderer.triangle(args);
+ } //accessible outputs
+
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('triangle', args);
+ }
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 291,
+ '../friendly_errors/fes_core': 294,
+ '../friendly_errors/file_errors': 295,
+ '../friendly_errors/validate_params': 298,
+ '../helpers': 299,
+ '../main': 303,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 311: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Shape
+ * @submodule Attributes
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * Changes where ellipses, circles, and arcs are drawn.
+ *
+ * By default, the first two parameters of
+ * ellipse(), circle(),
+ * and arc()
+ * are the x- and y-coordinates of the shape's center. The next parameters set
+ * the shape's width and height. This is the same as calling
+ * `ellipseMode(CENTER)`.
+ *
+ * `ellipseMode(RADIUS)` also uses the first two parameters to set the x- and
+ * y-coordinates of the shape's center. The next parameters are half of the
+ * shapes's width and height. Calling `ellipse(0, 0, 10, 15)` draws a shape
+ * with a width of 20 and height of 30.
+ *
+ * `ellipseMode(CORNER)` uses the first two parameters as the upper-left
+ * corner of the shape. The next parameters are its width and height.
+ *
+ * `ellipseMode(CORNERS)` uses the first two parameters as the location of one
+ * corner of the ellipse's bounding box. The next parameters are the location
+ * of the opposite corner.
+ *
+ * The argument passed to `ellipseMode()` must be written in ALL CAPS because
+ * the constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this
+ * way. JavaScript is a case-sensitive language.
+ *
+ * @method ellipseMode
+ * @param {Constant} mode either CENTER, RADIUS, CORNER, or CORNERS
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white triangle spins around on a gray canvas.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw the triangle.
+ * triangle(-20, 25, 8, -30, 36, 25);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // White ellipse.
+ * ellipseMode(RADIUS);
+ * fill(255);
+ * ellipse(50, 50, 30, 30);
+ *
+ * // Gray ellipse.
+ * ellipseMode(CENTER);
+ * fill(100);
+ * ellipse(50, 50, 30, 30);
+ *
+ * describe('A white circle with a gray circle at its center. Both circles have black outlines.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.ellipseMode = function (m) {
+ _main.default._validateParameters('ellipseMode', arguments);
+ if (m === constants.CORNER || m === constants.CORNERS || m === constants.RADIUS || m === constants.CENTER) {
+ this._renderer._ellipseMode = m;
+ }
+ return this;
+ };
+ /**
+ * Draws certain features with jagged (aliased) edges.
+ *
+ * smooth() is active by default. In 2D mode,
+ * `noSmooth()` is helpful for scaling up images without blurring. The
+ * functions don't affect shapes or fonts.
+ *
+ * In WebGL mode, `noSmooth()` causes all shapes to be drawn with jagged
+ * (aliased) edges. The functions don't affect images or fonts.
+ *
+ * @method noSmooth
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // White ellipse.
+ * ellipseMode(CORNER);
+ * fill(255);
+ * ellipse(25, 25, 50, 50);
+ *
+ * // Gray ellipse.
+ * ellipseMode(CORNERS);
+ * fill(100);
+ * ellipse(25, 25, 50, 50);
+ *
+ * describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let heart;
+ *
+ * // Load a pixelated heart image from an image data string.
+ * function preload() {
+ * heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Antialiased hearts.
+ * image(heart, 10, 10);
+ * image(heart, 20, 10, 16, 16);
+ * image(heart, 40, 10, 32, 32);
+ *
+ * // Aliased hearts.
+ * noSmooth();
+ * image(heart, 10, 60);
+ * image(heart, 20, 60, 16, 16);
+ * image(heart, 40, 60, 32, 32);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * circle(0, 0, 80);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noSmooth = function () {
+ if (!this._renderer.isP3D) {
+ if ('imageSmoothingEnabled' in this.drawingContext) {
+ this.drawingContext.imageSmoothingEnabled = false;
+ }
+ } else {
+ this.setAttributes('antialias', false);
+ }
+ return this;
+ };
+ /**
+ * Changes where rectangles and squares are drawn.
+ *
+ * By default, the first two parameters of
+ * rect() and square(),
+ * are the x- and y-coordinates of the shape's upper left corner. The next parameters set
+ * the shape's width and height. This is the same as calling
+ * `rectMode(CORNER)`.
+ *
+ * `rectMode(CORNERS)` also uses the first two parameters as the location of
+ * one of the corners. The next parameters are the location of the opposite
+ * corner. This mode only works for rect().
+ *
+ * `rectMode(CENTER)` uses the first two parameters as the x- and
+ * y-coordinates of the shape's center. The next parameters are its width and
+ * height.
+ *
+ * `rectMode(RADIUS)` also uses the first two parameters as the x- and
+ * y-coordinates of the shape's center. The next parameters are
+ * half of the shape's width and height.
+ *
+ * The argument passed to `rectMode()` must be written in ALL CAPS because the
+ * constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this way.
+ * JavaScript is a case-sensitive language.
+ *
+ * @method rectMode
+ * @param {Constant} mode either CORNER, CORNERS, CENTER, or RADIUS
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Disable smoothing.
+ * noSmooth();
+ *
+ * background(200);
+ *
+ * circle(0, 0, 80);
+ *
+ * describe('A pixelated white circle on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * rectMode(CORNER);
+ * fill(255);
+ * rect(25, 25, 50, 50);
+ *
+ * rectMode(CORNERS);
+ * fill(100);
+ * rect(25, 25, 50, 50);
+ *
+ * describe('A small gray square drawn at the top-left corner of a white square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * rectMode(RADIUS);
+ * fill(255);
+ * rect(50, 50, 30, 30);
+ *
+ * rectMode(CENTER);
+ * fill(100);
+ * rect(50, 50, 30, 30);
+ *
+ * describe('A small gray square drawn at the center of a white square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * rectMode(CORNER);
+ * fill(255);
+ * square(25, 25, 50);
+ *
+ * describe('A white square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rectMode = function (m) {
+ _main.default._validateParameters('rectMode', arguments);
+ if (m === constants.CORNER || m === constants.CORNERS || m === constants.RADIUS || m === constants.CENTER) {
+ this._renderer._rectMode = m;
+ }
+ return this;
+ };
+ /**
+ * Draws certain features with smooth (antialiased) edges.
+ *
+ * `smooth()` is active by default. In 2D mode,
+ * noSmooth() is helpful for scaling up images
+ * without blurring. The functions don't affect shapes or fonts.
+ *
+ * In WebGL mode, noSmooth() causes all shapes to
+ * be drawn with jagged (aliased) edges. The functions don't affect images or
+ * fonts.
+ *
+ * @method smooth
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * rectMode(RADIUS);
+ * fill(255);
+ * square(50, 50, 30);
+ *
+ * rectMode(CENTER);
+ * fill(100);
+ * square(50, 50, 30);
+ *
+ * describe('A small gray square drawn at the center of a white square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let heart;
+ *
+ * // Load a pixelated heart image from an image data string.
+ * function preload() {
+ * heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Antialiased hearts.
+ * image(heart, 10, 10);
+ * image(heart, 20, 10, 16, 16);
+ * image(heart, 40, 10, 32, 32);
+ *
+ * // Aliased hearts.
+ * noSmooth();
+ * image(heart, 10, 60);
+ * image(heart, 20, 60, 16, 16);
+ * image(heart, 40, 60, 32, 32);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * circle(0, 0, 80);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.smooth = function () {
+ this.setAttributes('antialias', true);
+ if (!this._renderer.isP3D) {
+ if ('imageSmoothingEnabled' in this.drawingContext) {
+ this.drawingContext.imageSmoothingEnabled = true;
+ }
+ }
+ return this;
+ };
+ /**
+ * Sets the style for rendering the ends of lines.
+ *
+ * The caps for line endings are either rounded (`ROUND`), squared
+ * (`SQUARE`), or extended (`PROJECT`). The default cap is `ROUND`.
+ *
+ * The argument passed to `strokeCap()` must be written in ALL CAPS because
+ * the constants `ROUND`, `SQUARE`, and `PROJECT` are defined this way.
+ * JavaScript is a case-sensitive language.
+ *
+ * @method strokeCap
+ * @param {Constant} cap either ROUND, SQUARE, or PROJECT
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Disable smoothing.
+ * noSmooth();
+ *
+ * background(200);
+ *
+ * circle(0, 0, 80);
+ *
+ * describe('A pixelated white circle on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.strokeCap = function (cap) {
+ _main.default._validateParameters('strokeCap', arguments);
+ if (cap === constants.ROUND || cap === constants.SQUARE || cap === constants.PROJECT) {
+ this._renderer.strokeCap(cap);
+ }
+ return this;
+ };
+ /**
+ * Sets the style of the joints that connect line segments.
+ *
+ * Joints are either mitered (`MITER`), beveled (`BEVEL`), or rounded
+ * (`ROUND`). The default joint is `MITER` in 2D mode and `ROUND` in WebGL
+ * mode.
+ *
+ * The argument passed to `strokeJoin()` must be written in ALL CAPS because
+ * the constants `MITER`, `BEVEL`, and `ROUND` are defined this way.
+ * JavaScript is a case-sensitive language.
+ *
+ * @method strokeJoin
+ * @param {Constant} join either MITER, BEVEL, or ROUND
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * strokeWeight(12);
+ *
+ * // Top.
+ * strokeCap(ROUND);
+ * line(20, 30, 80, 30);
+ *
+ * // Middle.
+ * strokeCap(SQUARE);
+ * line(20, 50, 80, 50);
+ *
+ * // Bottom.
+ * strokeCap(PROJECT);
+ * line(20, 70, 80, 70);
+ *
+ * describe(
+ * 'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the line.
+ * noFill();
+ * strokeWeight(10);
+ * strokeJoin(MITER);
+ *
+ * // Draw the line.
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ * describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the line.
+ * noFill();
+ * strokeWeight(10);
+ * strokeJoin(BEVEL);
+ *
+ * // Draw the line.
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ * describe('A right-facing arrowhead shape with a flat tip in center of canvas.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.strokeJoin = function (join) {
+ _main.default._validateParameters('strokeJoin', arguments);
+ if (join === constants.ROUND || join === constants.BEVEL || join === constants.MITER) {
+ this._renderer.strokeJoin(join);
+ }
+ return this;
+ };
+ /**
+ * Sets the width of the stroke used for points, lines, and the outlines of
+ * shapes.
+ *
+ * Note: `strokeWeight()` is affected by transformations, especially calls to
+ * scale().
+ *
+ * @method strokeWeight
+ * @param {Number} weight the weight of the stroke (in pixels).
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the line.
+ * noFill();
+ * strokeWeight(10);
+ * strokeJoin(ROUND);
+ *
+ * // Draw the line.
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ * describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top.
+ * line(20, 20, 80, 20);
+ *
+ * // Middle.
+ * strokeWeight(4);
+ * line(20, 40, 80, 40);
+ *
+ * // Bottom.
+ * strokeWeight(10);
+ * line(20, 70, 80, 70);
+ *
+ * describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.strokeWeight = function (w) {
+ _main.default._validateParameters('strokeWeight', arguments);
+ this._renderer.strokeWeight(w);
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 291,
+ '../main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 312: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ _dereq_('../friendly_errors/fes_core');
+ _dereq_('../friendly_errors/file_errors');
+ _dereq_('../friendly_errors/validate_params');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Shape
+ * @submodule Curves
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Draws a Bézier curve.
+ *
+ * Bézier curves can form shapes and curves that slope gently. They're defined
+ * by two anchor points and two control points. Bézier curves provide more
+ * control than the spline curves created with the
+ * curve() function.
+ *
+ * The first two parameters, `x1` and `y1`, set the first anchor point. The
+ * first anchor point is where the curve starts.
+ *
+ * The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two control
+ * points. The control points "pull" the curve towards them.
+ *
+ * The seventh and eighth parameters, `x4` and `y4`, set the last anchor
+ * point. The last anchor point is where the curve ends.
+ *
+ * Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+ * `bezier()` has twelve arguments because each point has x-, y-,
+ * and z-coordinates.
+ *
+ * @method bezier
+ * @param {Number} x1 x-coordinate of the first anchor point.
+ * @param {Number} y1 y-coordinate of the first anchor point.
+ * @param {Number} x2 x-coordinate of the first control point.
+ * @param {Number} y2 y-coordinate of the first control point.
+ * @param {Number} x3 x-coordinate of the second control point.
+ * @param {Number} y3 y-coordinate of the second control point.
+ * @param {Number} x4 x-coordinate of the second anchor point.
+ * @param {Number} y4 y-coordinate of the second anchor point.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top.
+ * line(20, 20, 80, 20);
+ *
+ * // Scale by a factor of 5.
+ * scale(5);
+ *
+ * // Bottom. Coordinates are adjusted for scaling.
+ * line(4, 8, 16, 8);
+ *
+ * describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * strokeWeight(5);
+ * point(85, 20);
+ * point(15, 80);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(10, 10);
+ * point(90, 90);
+ *
+ * // Draw a black bezier curve.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ *
+ * // Draw red lines from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * line(85, 20, 10, 10);
+ * line(15, 80, 90, 90);
+ *
+ * describe(
+ * 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click the mouse near the red dot in the top-left corner
+ * // and drag to change the curve's shape.
+ *
+ * let x2 = 10;
+ * let y2 = 10;
+ * let isChanging = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * strokeWeight(5);
+ * point(85, 20);
+ * point(15, 80);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(x2, y2);
+ * point(90, 90);
+ *
+ * // Draw a black bezier curve.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ * bezier(85, 20, x2, y2, 90, 90, 15, 80);
+ *
+ * // Draw red lines from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * line(85, 20, x2, y2);
+ * line(15, 80, 90, 90);
+ * }
+ *
+ * // Start changing the first control point if the user clicks near it.
+ * function mousePressed() {
+ * if (dist(mouseX, mouseY, x2, y2) < 20) {
+ * isChanging = true;
+ * }
+ * }
+ *
+ * // Stop changing the first control point when the user releases the mouse.
+ * function mouseReleased() {
+ * isChanging = false;
+ * }
+ *
+ * // Update the first control point while the user drags the mouse.
+ * function mouseDragged() {
+ * if (isChanging === true) {
+ * x2 = mouseX;
+ * y2 = mouseY;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background('skyblue');
+ *
+ * // Draw the red balloon.
+ * fill('red');
+ * bezier(50, 60, 5, 15, 95, 15, 50, 60);
+ *
+ * // Draw the balloon string.
+ * line(50, 60, 50, 80);
+ *
+ * describe('A red balloon in a blue sky.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method bezier
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate of the first anchor point.
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate of the first control point.
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate of the second control point.
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate of the second anchor point.
+ * @chainable
+ */
+
+ _main.default.prototype.bezier = function () {
+ var _this$_renderer;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('bezier', args);
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }(_this$_renderer = this._renderer).bezier.apply(_this$_renderer, args);
+ return this;
+ };
+ /**
+ * Sets the number of segments used to draw Bézier curves in WebGL mode.
+ *
+ * In WebGL mode, smooth shapes are drawn using many flat segments. Adding
+ * more flat segments makes shapes appear smoother.
+ *
+ * The parameter, `detail`, is the number of segments to use while drawing a
+ * Bézier curve. For example, calling `bezierDetail(5)` will use 5 segments to
+ * draw curves with the bezier() function. By
+ * default,`detail` is 20.
+ *
+ * Note: `bezierDetail()` has no effect in 2D mode.
+ *
+ * @method bezierDetail
+ * @param {Number} detail number of segments to use. Defaults to 20.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');
+ * }
+ *
+ * function draw() {
+ * background('skyblue');
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw the red balloon.
+ * fill('red');
+ * bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);
+ *
+ * // Draw the balloon string.
+ * line(0, 0, 0, 0, 20, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Draw the original curve.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * strokeWeight(5);
+ * point(85, 20);
+ * point(15, 80);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(10, 10);
+ * point(90, 90);
+ *
+ * // Draw a black bezier curve.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ *
+ * // Draw red lines from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * line(85, 20, 10, 10);
+ * line(15, 80, 90, 90);
+ *
+ * describe(
+ * 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.bezierDetail = function (d) {
+ _main.default._validateParameters('bezierDetail', arguments);
+ this._bezierDetail = d;
+ return this;
+ };
+ /**
+ * Calculates coordinates along a Bézier curve using interpolation.
+ *
+ * `bezierPoint()` calculates coordinates along a Bézier curve using the
+ * anchor and control points. It expects points in the same order as the
+ * bezier() function. `bezierPoint()` works one axis
+ * at a time. Passing the anchor and control points' x-coordinates will
+ * calculate the x-coordinate of a point on the curve. Passing the anchor and
+ * control points' y-coordinates will calculate the y-coordinate of a point on
+ * the curve.
+ *
+ * The first parameter, `a`, is the coordinate of the first anchor point.
+ *
+ * The second and third parameters, `b` and `c`, are the coordinates of the
+ * control points.
+ *
+ * The fourth parameter, `d`, is the coordinate of the last anchor point.
+ *
+ * The fifth parameter, `t`, is the amount to interpolate along the curve. 0
+ * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+ * between them.
+ *
+ * @method bezierPoint
+ * @param {Number} a coordinate of first control point.
+ * @param {Number} b coordinate of first anchor point.
+ * @param {Number} c coordinate of second anchor point.
+ * @param {Number} d coordinate of second control point.
+ * @param {Number} t amount to interpolate between 0 and 1.
+ * @return {Number} coordinate of the point on the curve.
+ *
+ * @example
+ *
+ * // Draw the curve with less detail.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Set the curveDetail() to 5.
+ * bezierDetail(5);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * strokeWeight(5);
+ * point(35, -30, 0);
+ * point(-35, 30, 0);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(-40, -40, 0);
+ * point(40, 40, 0);
+ *
+ * // Draw a black bezier curve.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ * bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);
+ *
+ * // Draw red lines from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * line(35, -30, -40, -40);
+ * line(-35, 30, 40, 40);
+ *
+ * describe(
+ * 'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 85;
+ * let x2 = 10;
+ * let x3 = 90;
+ * let x4 = 15;
+ * let y1 = 20;
+ * let y2 = 10;
+ * let y3 = 90;
+ * let y4 = 80;
+ *
+ * // Style the curve.
+ * noFill();
+ *
+ * // Draw the curve.
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+ *
+ * // Draw circles along the curve's path.
+ * fill(255);
+ *
+ * // Top-right.
+ * let x = bezierPoint(x1, x2, x3, x4, 0);
+ * let y = bezierPoint(y1, y2, y3, y4, 0);
+ * circle(x, y, 5);
+ *
+ * // Center.
+ * x = bezierPoint(x1, x2, x3, x4, 0.5);
+ * y = bezierPoint(y1, y2, y3, y4, 0.5);
+ * circle(x, y, 5);
+ *
+ * // Bottom-left.
+ * x = bezierPoint(x1, x2, x3, x4, 1);
+ * y = bezierPoint(y1, y2, y3, y4, 1);
+ * circle(x, y, 5);
+ *
+ * describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.bezierPoint = function (a, b, c, d, t) {
+ _main.default._validateParameters('bezierPoint', arguments);
+ var adjustedT = 1 - t;
+ return Math.pow(adjustedT, 3) * a + 3 * Math.pow(adjustedT, 2) * t * b + 3 * adjustedT * Math.pow(t, 2) * c + Math.pow(t, 3) * d;
+ };
+ /**
+ * Calculates coordinates along a line that's tangent to a Bézier curve.
+ *
+ * Tangent lines skim the surface of a curve. A tangent line's slope equals
+ * the curve's slope at the point where it intersects.
+ *
+ * `bezierTangent()` calculates coordinates along a tangent line using the
+ * Bézier curve's anchor and control points. It expects points in the same
+ * order as the bezier() function. `bezierTangent()`
+ * works one axis at a time. Passing the anchor and control points'
+ * x-coordinates will calculate the x-coordinate of a point on the tangent
+ * line. Passing the anchor and control points' y-coordinates will calculate
+ * the y-coordinate of a point on the tangent line.
+ *
+ * The first parameter, `a`, is the coordinate of the first anchor point.
+ *
+ * The second and third parameters, `b` and `c`, are the coordinates of the
+ * control points.
+ *
+ * The fourth parameter, `d`, is the coordinate of the last anchor point.
+ *
+ * The fifth parameter, `t`, is the amount to interpolate along the curve. 0
+ * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+ * between them.
+ *
+ * @method bezierTangent
+ * @param {Number} a coordinate of first anchor point.
+ * @param {Number} b coordinate of first control point.
+ * @param {Number} c coordinate of second control point.
+ * @param {Number} d coordinate of second anchor point.
+ * @param {Number} t amount to interpolate between 0 and 1.
+ * @return {Number} coordinate of a point on the tangent line.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 85;
+ * let x2 = 10;
+ * let x3 = 90;
+ * let x4 = 15;
+ * let y1 = 20;
+ * let y2 = 10;
+ * let y3 = 90;
+ * let y4 = 80;
+ *
+ * // Draw the curve.
+ * noFill();
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+ *
+ * // Calculate the circle's coordinates.
+ * let t = 0.5 * sin(frameCount * 0.01) + 0.5;
+ * let x = bezierPoint(x1, x2, x3, x4, t);
+ * let y = bezierPoint(y1, y2, y3, y4, t);
+ *
+ * // Draw the circle.
+ * fill(255);
+ * circle(x, y, 5);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.bezierTangent = function (a, b, c, d, t) {
+ _main.default._validateParameters('bezierTangent', arguments);
+ var adjustedT = 1 - t;
+ return 3 * d * Math.pow(t, 2) - 3 * c * Math.pow(t, 2) + 6 * c * adjustedT * t - 6 * b * adjustedT * t + 3 * b * Math.pow(adjustedT, 2) - 3 * a * Math.pow(adjustedT, 2);
+ };
+ /**
+ * Draws a curve using a Catmull-Rom spline.
+ *
+ * Spline curves can form shapes and curves that slope gently. They’re like
+ * cables that are attached to a set of points. Splines are defined by two
+ * anchor points and two control points.
+ *
+ * The first two parameters, `x1` and `y1`, set the first control point. This
+ * point isn’t drawn and can be thought of as the curve’s starting point.
+ *
+ * The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two anchor
+ * points. The anchor points are the start and end points of the curve’s
+ * visible segment.
+ *
+ * The seventh and eighth parameters, `x4` and `y4`, set the last control
+ * point. This point isn’t drawn and can be thought of as the curve’s ending
+ * point.
+ *
+ * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
+ * `curve()` has twelve arguments because each point has x-, y-, and
+ * z-coordinates.
+ *
+ * @method curve
+ * @param {Number} x1 x-coordinate of the first control point.
+ * @param {Number} y1 y-coordinate of the first control point.
+ * @param {Number} x2 x-coordinate of the first anchor point.
+ * @param {Number} y2 y-coordinate of the first anchor point.
+ * @param {Number} x3 x-coordinate of the second anchor point.
+ * @param {Number} y3 y-coordinate of the second anchor point.
+ * @param {Number} x4 x-coordinate of the second control point.
+ * @param {Number} y4 y-coordinate of the second control point.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 85;
+ * let x2 = 10;
+ * let x3 = 90;
+ * let x4 = 15;
+ * let y1 = 20;
+ * let y2 = 10;
+ * let y3 = 90;
+ * let y4 = 80;
+ *
+ * // Style the curve.
+ * noFill();
+ *
+ * // Draw the curve.
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+ *
+ * // Draw tangents along the curve's path.
+ * fill(255);
+ *
+ * // Top-right circle.
+ * stroke(0);
+ * let x = bezierPoint(x1, x2, x3, x4, 0);
+ * let y = bezierPoint(y1, y2, y3, y4, 0);
+ * circle(x, y, 5);
+ *
+ * // Top-right tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);
+ * let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ *
+ * // Center circle.
+ * stroke(0);
+ * x = bezierPoint(x1, x2, x3, x4, 0.5);
+ * y = bezierPoint(y1, y2, y3, y4, 0.5);
+ * circle(x, y, 5);
+ *
+ * // Center tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);
+ * ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ *
+ * // Bottom-left circle.
+ * stroke(0);
+ * x = bezierPoint(x1, x2, x3, x4, 1);
+ * y = bezierPoint(y1, y2, y3, y4, 1);
+ * circle(x, y, 5);
+ *
+ * // Bottom-left tangent.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);
+ * ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ *
+ * describe(
+ * 'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a black spline curve.
+ * noFill();
+ * strokeWeight(1);
+ * stroke(0);
+ * curve(5, 26, 73, 24, 73, 61, 15, 65);
+ *
+ * // Draw red spline curves from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * curve(5, 26, 5, 26, 73, 24, 73, 61);
+ * curve(73, 24, 73, 61, 15, 65, 15, 65);
+ *
+ * // Draw the anchor points in black.
+ * strokeWeight(5);
+ * stroke(0);
+ * point(73, 24);
+ * point(73, 61);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(5, 26);
+ * point(15, 65);
+ *
+ * describe(
+ * 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let x1 = 5;
+ * let y1 = 26;
+ * let isChanging = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a black spline curve.
+ * noFill();
+ * strokeWeight(1);
+ * stroke(0);
+ * curve(x1, y1, 73, 24, 73, 61, 15, 65);
+ *
+ * // Draw red spline curves from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * curve(x1, y1, x1, y1, 73, 24, 73, 61);
+ * curve(73, 24, 73, 61, 15, 65, 15, 65);
+ *
+ * // Draw the anchor points in black.
+ * strokeWeight(5);
+ * stroke(0);
+ * point(73, 24);
+ * point(73, 61);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(x1, y1);
+ * point(15, 65);
+ * }
+ *
+ * // Start changing the first control point if the user clicks near it.
+ * function mousePressed() {
+ * if (dist(mouseX, mouseY, x1, y1) < 20) {
+ * isChanging = true;
+ * }
+ * }
+ *
+ * // Stop changing the first control point when the user releases the mouse.
+ * function mouseReleased() {
+ * isChanging = false;
+ * }
+ *
+ * // Update the first control point while the user drags the mouse.
+ * function mouseDragged() {
+ * if (isChanging === true) {
+ * x1 = mouseX;
+ * y1 = mouseY;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background('skyblue');
+ *
+ * // Draw the red balloon.
+ * fill('red');
+ * curve(-150, 275, 50, 60, 50, 60, 250, 275);
+ *
+ * // Draw the balloon string.
+ * line(50, 60, 50, 80);
+ *
+ * describe('A red balloon in a blue sky.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method curve
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate of the first control point.
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate of the first anchor point.
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate of the second anchor point.
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate of the second control point.
+ * @chainable
+ */
+ _main.default.prototype.curve = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('curve', args);
+ if (this._renderer._doStroke) {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).curve.apply(_this$_renderer2, args);
+ }
+ return this;
+ };
+ /**
+ * Sets the number of segments used to draw spline curves in WebGL mode.
+ *
+ * In WebGL mode, smooth shapes are drawn using many flat segments. Adding
+ * more flat segments makes shapes appear smoother.
+ *
+ * The parameter, `detail`, is the number of segments to use while drawing a
+ * spline curve. For example, calling `curveDetail(5)` will use 5 segments to
+ * draw curves with the curve() function. By
+ * default,`detail` is 20.
+ *
+ * Note: `curveDetail()` has no effect in 2D mode.
+ *
+ * @method curveDetail
+ * @param {Number} resolution number of segments to use. Defaults to 20.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A red balloon in a blue sky.');
+ * }
+ *
+ * function draw() {
+ * background('skyblue');
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Draw the red balloon.
+ * fill('red');
+ * curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);
+ *
+ * // Draw the balloon string.
+ * line(0, 10, 0, 0, 30, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a black spline curve.
+ * noFill();
+ * strokeWeight(1);
+ * stroke(0);
+ * curve(5, 26, 73, 24, 73, 61, 15, 65);
+ *
+ * // Draw red spline curves from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * curve(5, 26, 5, 26, 73, 24, 73, 61);
+ * curve(73, 24, 73, 61, 15, 65, 15, 65);
+ *
+ * // Draw the anchor points in black.
+ * strokeWeight(5);
+ * stroke(0);
+ * point(73, 24);
+ * point(73, 61);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(5, 26);
+ * point(15, 65);
+ *
+ * describe(
+ * 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.curveDetail = function (d) {
+ _main.default._validateParameters('curveDetail', arguments);
+ if (d < 3) {
+ this._curveDetail = 3;
+ } else {
+ this._curveDetail = d;
+ }
+ return this;
+ };
+ /**
+ * Adjusts the way curve() and
+ * curveVertex() draw.
+ *
+ * Spline curves are like cables that are attached to a set of points.
+ * `curveTightness()` adjusts how tightly the cable is attached to the points.
+ *
+ * The parameter, `tightness`, determines how the curve fits to the vertex
+ * points. By default, `tightness` is set to 0. Setting tightness to 1,
+ * as in `curveTightness(1)`, connects the curve's points using straight
+ * lines. Values in the range from –5 to 5 deform curves while leaving them
+ * recognizable.
+ *
+ * @method curveTightness
+ * @param {Number} amount amount of tightness.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Set the curveDetail() to 3.
+ * curveDetail(3);
+ *
+ * // Draw a black spline curve.
+ * noFill();
+ * strokeWeight(1);
+ * stroke(0);
+ * curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);
+ *
+ * // Draw red spline curves from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);
+ * curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);
+ *
+ * // Draw the anchor points in black.
+ * strokeWeight(5);
+ * stroke(0);
+ * point(23, -26);
+ * point(23, 11);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(-45, -24);
+ * point(-35, 15);
+ *
+ * describe(
+ * 'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.curveTightness = function (t) {
+ _main.default._validateParameters('curveTightness', arguments);
+ this._renderer._curveTightness = t;
+ return this;
+ };
+ /**
+ * Calculates coordinates along a spline curve using interpolation.
+ *
+ * `curvePoint()` calculates coordinates along a spline curve using the
+ * anchor and control points. It expects points in the same order as the
+ * curve() function. `curvePoint()` works one axis
+ * at a time. Passing the anchor and control points' x-coordinates will
+ * calculate the x-coordinate of a point on the curve. Passing the anchor and
+ * control points' y-coordinates will calculate the y-coordinate of a point on
+ * the curve.
+ *
+ * The first parameter, `a`, is the coordinate of the first control point.
+ *
+ * The second and third parameters, `b` and `c`, are the coordinates of the
+ * anchor points.
+ *
+ * The fourth parameter, `d`, is the coordinate of the last control point.
+ *
+ * The fifth parameter, `t`, is the amount to interpolate along the curve. 0
+ * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+ * between them.
+ *
+ * @method curvePoint
+ * @param {Number} a coordinate of first anchor point.
+ * @param {Number} b coordinate of first control point.
+ * @param {Number} c coordinate of second control point.
+ * @param {Number} d coordinate of second anchor point.
+ * @param {Number} t amount to interpolate between 0 and 1.
+ * @return {Number} coordinate of a point on the curve.
+ *
+ * @example
+ *
+ * // Move the mouse left and right to see the curve change.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the curve's tightness using the mouse.
+ * let t = map(mouseX, 0, 100, -5, 5, true);
+ * curveTightness(t);
+ *
+ * // Draw the curve.
+ * noFill();
+ * beginShape();
+ * curveVertex(10, 26);
+ * curveVertex(10, 26);
+ * curveVertex(83, 24);
+ * curveVertex(83, 61);
+ * curveVertex(25, 65);
+ * curveVertex(25, 65);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 5;
+ * let y1 = 26;
+ * let x2 = 73;
+ * let y2 = 24;
+ * let x3 = 73;
+ * let y3 = 61;
+ * let x4 = 15;
+ * let y4 = 65;
+ *
+ * // Draw the curve.
+ * noFill();
+ * curve(x1, y1, x2, y2, x3, y3, x4, y4);
+ *
+ * // Draw circles along the curve's path.
+ * fill(255);
+ *
+ * // Top.
+ * let x = curvePoint(x1, x2, x3, x4, 0);
+ * let y = curvePoint(y1, y2, y3, y4, 0);
+ * circle(x, y, 5);
+ *
+ * // Center.
+ * x = curvePoint(x1, x2, x3, x4, 0.5);
+ * y = curvePoint(y1, y2, y3, y4, 0.5);
+ * circle(x, y, 5);
+ *
+ * // Bottom.
+ * x = curvePoint(x1, x2, x3, x4, 1);
+ * y = curvePoint(y1, y2, y3, y4, 1);
+ * circle(x, y, 5);
+ *
+ * describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.curvePoint = function (a, b, c, d, t) {
+ _main.default._validateParameters('curvePoint', arguments);
+ var s = this._renderer._curveTightness,
+ t3 = t * t * t,
+ t2 = t * t,
+ f1 = (s - 1) / 2 * t3 + (1 - s) * t2 + (s - 1) / 2 * t,
+ f2 = (s + 3) / 2 * t3 + ( - 5 - s) / 2 * t2 + 1,
+ f3 = ( - 3 - s) / 2 * t3 + (s + 2) * t2 + (1 - s) / 2 * t,
+ f4 = (1 - s) / 2 * t3 + (s - 1) / 2 * t2;
+ return a * f1 + b * f2 + c * f3 + d * f4;
+ };
+ /**
+ * Calculates coordinates along a line that's tangent to a spline curve.
+ *
+ * Tangent lines skim the surface of a curve. A tangent line's slope equals
+ * the curve's slope at the point where it intersects.
+ *
+ * `curveTangent()` calculates coordinates along a tangent line using the
+ * spline curve's anchor and control points. It expects points in the same
+ * order as the curve() function. `curveTangent()`
+ * works one axis at a time. Passing the anchor and control points'
+ * x-coordinates will calculate the x-coordinate of a point on the tangent
+ * line. Passing the anchor and control points' y-coordinates will calculate
+ * the y-coordinate of a point on the tangent line.
+ *
+ * The first parameter, `a`, is the coordinate of the first control point.
+ *
+ * The second and third parameters, `b` and `c`, are the coordinates of the
+ * anchor points.
+ *
+ * The fourth parameter, `d`, is the coordinate of the last control point.
+ *
+ * The fifth parameter, `t`, is the amount to interpolate along the curve. 0
+ * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+ * between them.
+ *
+ * @method curveTangent
+ * @param {Number} a coordinate of first control point.
+ * @param {Number} b coordinate of first anchor point.
+ * @param {Number} c coordinate of second anchor point.
+ * @param {Number} d coordinate of second control point.
+ * @param {Number} t amount to interpolate between 0 and 1.
+ * @return {Number} coordinate of a point on the tangent line.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black curve on a gray square. A white circle moves back and forth along the curve.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 5;
+ * let y1 = 26;
+ * let x2 = 73;
+ * let y2 = 24;
+ * let x3 = 73;
+ * let y3 = 61;
+ * let x4 = 15;
+ * let y4 = 65;
+ *
+ * // Draw the curve.
+ * noFill();
+ * curve(x1, y1, x2, y2, x3, y3, x4, y4);
+ *
+ * // Calculate the circle's coordinates.
+ * let t = 0.5 * sin(frameCount * 0.01) + 0.5;
+ * let x = curvePoint(x1, x2, x3, x4, t);
+ * let y = curvePoint(y1, y2, y3, y4, t);
+ *
+ * // Draw the circle.
+ * fill(255);
+ * circle(x, y, 5);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.curveTangent = function (a, b, c, d, t) {
+ _main.default._validateParameters('curveTangent', arguments);
+ var s = this._renderer._curveTightness,
+ tt3 = t * t * 3,
+ t2 = t * 2,
+ f1 = (s - 1) / 2 * tt3 + (1 - s) * t2 + (s - 1) / 2,
+ f2 = (s + 3) / 2 * tt3 + ( - 5 - s) / 2 * t2,
+ f3 = ( - 3 - s) / 2 * tt3 + (s + 2) * t2 + (1 - s) / 2,
+ f4 = (1 - s) / 2 * tt3 + (s - 1) / 2 * t2;
+ return a * f1 + b * f2 + c * f3 + d * f4;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../friendly_errors/fes_core': 294,
+ '../friendly_errors/file_errors': 295,
+ '../friendly_errors/validate_params': 298,
+ '../main': 303
+ }
+ ],
+ 313: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.slice');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Shape
+ * @submodule Vertex
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+
+ var shapeKind = null;
+ var vertices = [
+ ];
+ var contourVertices = [
+ ];
+ var isBezier = false;
+ var isCurve = false;
+ var isQuadratic = false;
+ var isContour = false;
+ var isFirstContour = true;
+ /**
+ * Begins creating a hole within a flat shape.
+ *
+ * The `beginContour()` and endContour()
+ * functions allow for creating negative space within custom shapes that are
+ * flat. `beginContour()` begins adding vertices to a negative space and
+ * endContour() stops adding them.
+ * `beginContour()` and endContour() must be
+ * called between beginShape() and
+ * endShape().
+ *
+ * Transformations such as translate(),
+ * rotate(), and scale()
+ * don't work between `beginContour()` and
+ * endContour(). It's also not possible to use
+ * other shapes, such as ellipse() or
+ * rect(), between `beginContour()` and
+ * endContour().
+ *
+ * Note: The vertices that define a negative space must "wind" in the opposite
+ * direction from the outer shape. First, draw vertices for the outer shape
+ * clockwise order. Then, draw vertices for the negative space in
+ * counter-clockwise order.
+ *
+ * @method beginContour
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 5;
+ * let y1 = 26;
+ * let x2 = 73;
+ * let y2 = 24;
+ * let x3 = 73;
+ * let y3 = 61;
+ * let x4 = 15;
+ * let y4 = 65;
+ *
+ * // Draw the curve.
+ * noFill();
+ * curve(x1, y1, x2, y2, x3, y3, x4, y4);
+ *
+ * // Draw tangents along the curve's path.
+ * fill(255);
+ *
+ * // Top circle.
+ * stroke(0);
+ * let x = curvePoint(x1, x2, x3, x4, 0);
+ * let y = curvePoint(y1, y2, y3, y4, 0);
+ * circle(x, y, 5);
+ *
+ * // Top tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);
+ * let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ *
+ * // Center circle.
+ * stroke(0);
+ * x = curvePoint(x1, x2, x3, x4, 0.5);
+ * y = curvePoint(y1, y2, y3, y4, 0.5);
+ * circle(x, y, 5);
+ *
+ * // Center tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);
+ * ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ *
+ * // Bottom circle.
+ * stroke(0);
+ * x = curvePoint(x1, x2, x3, x4, 1);
+ * y = curvePoint(y1, y2, y3, y4, 1);
+ * circle(x, y, 5);
+ *
+ * // Bottom tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);
+ * ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ *
+ * describe(
+ * 'A black curve on a gray square. A white circle moves back and forth along the curve.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Exterior vertices, clockwise winding.
+ * vertex(10, 10);
+ * vertex(90, 10);
+ * vertex(90, 90);
+ * vertex(10, 90);
+ *
+ * // Interior vertices, counter-clockwise winding.
+ * beginContour();
+ * vertex(30, 30);
+ * vertex(30, 70);
+ * vertex(70, 70);
+ * vertex(70, 30);
+ * endContour();
+ *
+ * // Stop drawing the shape.
+ * endShape(CLOSE);
+ *
+ * describe('A white square with a square hole in its center drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.beginContour = function () {
+ if (this._renderer.isP3D) {
+ this._renderer.beginContour();
+ } else {
+ contourVertices = [
+ ];
+ isContour = true;
+ }
+ return this;
+ };
+ /**
+ * Begins adding vertices to a custom shape.
+ *
+ * The `beginShape()` and endShape() functions
+ * allow for creating custom shapes in 2D or 3D. `beginShape()` begins adding
+ * vertices to a custom shape and endShape() stops
+ * adding them.
+ *
+ * The parameter, `kind`, sets the kind of shape to make. By default, any
+ * irregular polygon can be drawn. The available modes for kind are:
+ *
+ * - `POINTS` to draw a series of points.
+ * - `LINES` to draw a series of unconnected line segments.
+ * - `TRIANGLES` to draw a series of separate triangles.
+ * - `TRIANGLE_FAN` to draw a series of connected triangles sharing the first vertex in a fan-like fashion.
+ * - `TRIANGLE_STRIP` to draw a series of connected triangles in strip fashion.
+ * - `QUADS` to draw a series of separate quadrilaterals (quads).
+ * - `QUAD_STRIP` to draw quad strip using adjacent edges to form the next quad.
+ * - `TESS` to create a filling curve by explicit tessellation (WebGL only).
+ *
+ * After calling `beginShape()`, shapes can be built by calling
+ * vertex(),
+ * bezierVertex(),
+ * quadraticVertex(), and/or
+ * curveVertex(). Calling
+ * endShape() will stop adding vertices to the
+ * shape. Each shape will be outlined with the current stroke color and filled
+ * with the current fill color.
+ *
+ * Transformations such as translate(),
+ * rotate(), and
+ * scale() don't work between `beginShape()` and
+ * endShape(). It's also not possible to use
+ * other shapes, such as ellipse() or
+ * rect(), between `beginShape()` and
+ * endShape().
+ *
+ * @method beginShape
+ * @param {Constant} [kind] either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
+ * TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white square with a square hole in its center drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Exterior vertices, clockwise winding.
+ * vertex(-40, -40);
+ * vertex(40, -40);
+ * vertex(40, 40);
+ * vertex(-40, 40);
+ *
+ * // Interior vertices, counter-clockwise winding.
+ * beginContour();
+ * vertex(-20, -20);
+ * vertex(-20, 20);
+ * vertex(20, 20);
+ * vertex(20, -20);
+ * endContour();
+ *
+ * // Stop drawing the shape.
+ * endShape(CLOSE);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add vertices.
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape(CLOSE);
+ *
+ * describe('A white square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * // Only draw the vertices (points).
+ * beginShape(POINTS);
+ *
+ * // Add vertices.
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Four black dots that form a square are drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * // Only draw lines between alternating pairs of vertices.
+ * beginShape(LINES);
+ *
+ * // Add vertices.
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Two horizontal black lines on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the shape.
+ * noFill();
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add vertices.
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Three black lines form a sideways U shape on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the shape.
+ * noFill();
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add vertices.
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ *
+ * // Stop drawing the shape.
+ * // Connect the first and last vertices.
+ * endShape(CLOSE);
+ *
+ * describe('A black outline of a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * // Draw a series of triangles.
+ * beginShape(TRIANGLES);
+ *
+ * // Left triangle.
+ * vertex(30, 75);
+ * vertex(40, 20);
+ * vertex(50, 75);
+ *
+ * // Right triangle.
+ * vertex(60, 20);
+ * vertex(70, 75);
+ * vertex(80, 20);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Two white triangles drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * // Draw a series of triangles.
+ * beginShape(TRIANGLE_STRIP);
+ *
+ * // Add vertices.
+ * vertex(30, 75);
+ * vertex(40, 20);
+ * vertex(50, 75);
+ * vertex(60, 20);
+ * vertex(70, 75);
+ * vertex(80, 20);
+ * vertex(90, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Five white triangles that are interleaved drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * // Draw a series of triangles that share their first vertex.
+ * beginShape(TRIANGLE_FAN);
+ *
+ * // Add vertices.
+ * vertex(57.5, 50);
+ * vertex(57.5, 15);
+ * vertex(92, 50);
+ * vertex(57.5, 85);
+ * vertex(22, 50);
+ * vertex(57.5, 15);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Four white triangles form a square are drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * // Draw a series of quadrilaterals.
+ * beginShape(QUADS);
+ *
+ * // Left rectangle.
+ * vertex(30, 20);
+ * vertex(30, 75);
+ * vertex(50, 75);
+ * vertex(50, 20);
+ *
+ * // Right rectangle.
+ * vertex(65, 20);
+ * vertex(65, 75);
+ * vertex(85, 75);
+ * vertex(85, 20);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Two white rectangles drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * // Draw a series of quadrilaterals.
+ * beginShape(QUAD_STRIP);
+ *
+ * // Add vertices.
+ * vertex(30, 20);
+ * vertex(30, 75);
+ * vertex(50, 20);
+ * vertex(50, 75);
+ * vertex(65, 20);
+ * vertex(65, 75);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Three white rectangles that share edges are drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * // Draw a series of quadrilaterals.
+ * beginShape(TESS);
+ *
+ * // Add the vertices.
+ * vertex(-30, -30, 0);
+ * vertex(30, -30, 0);
+ * vertex(30, -10, 0);
+ * vertex(-10, -10, 0);
+ * vertex(-10, 10, 0);
+ * vertex(30, 10, 0);
+ * vertex(30, 30, 0);
+ * vertex(-30, 30, 0);
+ *
+ * // Stop drawing the shape.
+ * // Connect the first and last vertices.
+ * endShape(CLOSE);
+ *
+ * describe('A blocky C shape drawn in white on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.beginShape = function (kind) {
+ _main.default._validateParameters('beginShape', arguments);
+ if (this._renderer.isP3D) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).beginShape.apply(_this$_renderer, arguments);
+ } else {
+ if (kind === constants.POINTS || kind === constants.LINES || kind === constants.TRIANGLES || kind === constants.TRIANGLE_FAN || kind === constants.TRIANGLE_STRIP || kind === constants.QUADS || kind === constants.QUAD_STRIP) {
+ shapeKind = kind;
+ } else {
+ shapeKind = null;
+ }
+ vertices = [
+ ];
+ contourVertices = [
+ ];
+ }
+ return this;
+ };
+ /**
+ * Adds a Bézier curve segment to a custom shape.
+ *
+ * `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves
+ * it creates are defined like those made by the
+ * bezier() function. `bezierVertex()` must be
+ * called between the
+ * beginShape() and
+ * endShape() functions. The curved segment uses
+ * the previous vertex as the first anchor point, so there must be at least
+ * one call to vertex() before `bezierVertex()` can
+ * be used.
+ *
+ * The first four parameters, `x2`, `y2`, `x3`, and `y3`, set the curve’s two
+ * control points. The control points "pull" the curve towards them.
+ *
+ * The fifth and sixth parameters, `x4`, and `y4`, set the last anchor point.
+ * The last anchor point is where the curve ends.
+ *
+ * Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+ * `bezierVertex()` has eight arguments because each point has x-, y-, and
+ * z-coordinates.
+ *
+ * Note: `bezierVertex()` won’t work when an argument is passed to
+ * beginShape().
+ *
+ * @method bezierVertex
+ * @param {Number} x2 x-coordinate of the first control point.
+ * @param {Number} y2 y-coordinate of the first control point.
+ * @param {Number} x3 x-coordinate of the second control point.
+ * @param {Number} y3 y-coordinate of the second control point.
+ * @param {Number} x4 x-coordinate of the anchor point.
+ * @param {Number} y4 y-coordinate of the anchor point.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag with the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A blocky C shape drawn in red, blue, and green on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Start drawing the shape.
+ * // Draw a series of quadrilaterals.
+ * beginShape(TESS);
+ *
+ * // Add the vertices.
+ * fill('red');
+ * stroke('red');
+ * vertex(-30, -30, 0);
+ * vertex(30, -30, 0);
+ * vertex(30, -10, 0);
+ * fill('green');
+ * stroke('green');
+ * vertex(-10, -10, 0);
+ * vertex(-10, 10, 0);
+ * vertex(30, 10, 0);
+ * fill('blue');
+ * stroke('blue');
+ * vertex(30, 30, 0);
+ * vertex(-30, 30, 0);
+ *
+ * // Stop drawing the shape.
+ * // Connect the first and last vertices.
+ * endShape(CLOSE);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the shape.
+ * noFill();
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first anchor point.
+ * vertex(30, 20);
+ *
+ * // Add the Bézier vertex.
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('A black C curve on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * strokeWeight(5);
+ * point(30, 20);
+ * point(30, 75);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(80, 0);
+ * point(80, 75);
+ *
+ * // Style the shape.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first anchor point.
+ * vertex(30, 20);
+ *
+ * // Add the Bézier vertex.
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * // Draw red lines from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * line(30, 20, 80, 0);
+ * line(30, 75, 80, 75);
+ *
+ * describe(
+ * 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click the mouse near the red dot in the top-right corner
+ * // and drag to change the curve's shape.
+ *
+ * let x2 = 80;
+ * let y2 = 0;
+ * let isChanging = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * strokeWeight(5);
+ * point(30, 20);
+ * point(30, 75);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(x2, y2);
+ * point(80, 75);
+ *
+ * // Style the shape.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first anchor point.
+ * vertex(30, 20);
+ *
+ * // Add the Bézier vertex.
+ * bezierVertex(x2, y2, 80, 75, 30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * // Draw red lines from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * line(30, 20, x2, y2);
+ * line(30, 75, 80, 75);
+ * }
+ *
+ * // Start changing the first control point if the user clicks near it.
+ * function mousePressed() {
+ * if (dist(mouseX, mouseY, x2, y2) < 20) {
+ * isChanging = true;
+ * }
+ * }
+ *
+ * // Stop changing the first control point when the user releases the mouse.
+ * function mouseReleased() {
+ * isChanging = false;
+ * }
+ *
+ * // Update the first control point while the user drags the mouse.
+ * function mouseDragged() {
+ * if (isChanging === true) {
+ * x2 = mouseX;
+ * y2 = mouseY;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first anchor point.
+ * vertex(30, 20);
+ *
+ * // Add the Bézier vertices.
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * bezierVertex(50, 80, 60, 25, 30, 20);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('A crescent moon shape drawn in white on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method bezierVertex
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate of the first control point.
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate of the second control point.
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate of the anchor point.
+ * @chainable
+ */
+ _main.default.prototype.bezierVertex = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('bezierVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).bezierVertex.apply(_this$_renderer2, args);
+ } else {
+ if (vertices.length === 0) {
+ _main.default._friendlyError('vertex() must be used once before calling bezierVertex()', 'bezierVertex');
+ } else {
+ isBezier = true;
+ var vert = [
+ ];
+ for (var i = 0; i < args.length; i++) {
+ vert[i] = args[i];
+ }
+ vert.isVert = false;
+ if (isContour) {
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * Adds a spline curve segment to a custom shape.
+ *
+ * `curveVertex()` adds a curved segment to custom shapes. The spline curves
+ * it creates are defined like those made by the
+ * curve() function. `curveVertex()` must be called
+ * between the beginShape() and
+ * endShape() functions.
+ *
+ * Spline curves can form shapes and curves that slope gently. They’re like
+ * cables that are attached to a set of points. Splines are defined by two
+ * anchor points and two control points. `curveVertex()` must be called at
+ * least four times between
+ * beginShape() and
+ * endShape() in order to draw a curve:
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');
+ * }
+ *
+ * function draw() {
+ * background('midnightblue');
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the moons.
+ * noStroke();
+ * fill('lemonchiffon');
+ *
+ * // Draw the first moon.
+ * beginShape();
+ * vertex(-20, -30, 0);
+ * bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);
+ * bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);
+ * endShape();
+ *
+ * // Draw the second moon.
+ * beginShape();
+ * vertex(-20, -30, -20);
+ * bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);
+ * bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);
+ * endShape();
+ * }
+ *
+ *
+ * beginShape();
+ *
+ * // Add the first control point.
+ * curveVertex(84, 91);
+ *
+ * // Add the anchor points to draw between.
+ * curveVertex(68, 19);
+ * curveVertex(21, 17);
+ *
+ * // Add the second control point.
+ * curveVertex(32, 91);
+ *
+ * endShape();
+ *
+ *
+ * The code snippet above would only draw the curve between the anchor points,
+ * similar to the curve() function. The segments
+ * between the control and anchor points can be drawn by calling
+ * `curveVertex()` with the coordinates of the control points:
+ *
+ *
+ * beginShape();
+ *
+ * // Add the first control point and draw a segment to it.
+ * curveVertex(84, 91);
+ * curveVertex(84, 91);
+ *
+ * // Add the anchor points to draw between.
+ * curveVertex(68, 19);
+ * curveVertex(21, 17);
+ *
+ * // Add the second control point.
+ * curveVertex(32, 91);
+ *
+ * // Uncomment the next line to draw the segment to the second control point.
+ * // curveVertex(32, 91);
+ *
+ * endShape();
+ *
+ *
+ * The first two parameters, `x` and `y`, set the vertex’s location. For
+ * example, calling `curveVertex(10, 10)` adds a point to the curve at
+ * `(10, 10)`.
+ *
+ * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
+ * `curveVertex()` has three arguments because each point has x-, y-, and
+ * z-coordinates. By default, the vertex’s z-coordinate is set to 0.
+ *
+ * Note: `curveVertex()` won’t work when an argument is passed to
+ * beginShape().
+ *
+ * @method curveVertex
+ * @param {Number} x x-coordinate of the vertex
+ * @param {Number} y y-coordinate of the vertex
+ * @chainable
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the shape.
+ * noFill();
+ * strokeWeight(1);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first control point.
+ * curveVertex(32, 91);
+ *
+ * // Add the anchor points.
+ * curveVertex(21, 17);
+ * curveVertex(68, 19);
+ *
+ * // Add the second control point.
+ * curveVertex(84, 91);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * // Style the anchor and control points.
+ * strokeWeight(5);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * point(21, 17);
+ * point(68, 19);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(32, 91);
+ * point(84, 91);
+ *
+ * describe(
+ * 'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the shape.
+ * noFill();
+ * strokeWeight(1);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first control point and draw a segment to it.
+ * curveVertex(32, 91);
+ * curveVertex(32, 91);
+ *
+ * // Add the anchor points.
+ * curveVertex(21, 17);
+ * curveVertex(68, 19);
+ *
+ * // Add the second control point.
+ * curveVertex(84, 91);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * // Style the anchor and control points.
+ * strokeWeight(5);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * point(21, 17);
+ * point(68, 19);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(32, 91);
+ * point(84, 91);
+ *
+ * describe(
+ * 'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the shape.
+ * noFill();
+ * strokeWeight(1);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first control point and draw a segment to it.
+ * curveVertex(32, 91);
+ * curveVertex(32, 91);
+ *
+ * // Add the anchor points.
+ * curveVertex(21, 17);
+ * curveVertex(68, 19);
+ *
+ * // Add the second control point and draw a segment to it.
+ * curveVertex(84, 91);
+ * curveVertex(84, 91);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * // Style the anchor and control points.
+ * strokeWeight(5);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * point(21, 17);
+ * point(68, 19);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(32, 91);
+ * point(84, 91);
+ *
+ * describe(
+ * 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click the mouse near the red dot in the bottom-left corner
+ * // and drag to change the curve's shape.
+ *
+ * let x1 = 32;
+ * let y1 = 91;
+ * let isChanging = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the shape.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first control point and draw a segment to it.
+ * curveVertex(x1, y1);
+ * curveVertex(x1, y1);
+ *
+ * // Add the anchor points.
+ * curveVertex(21, 17);
+ * curveVertex(68, 19);
+ *
+ * // Add the second control point and draw a segment to it.
+ * curveVertex(84, 91);
+ * curveVertex(84, 91);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * // Style the anchor and control points.
+ * strokeWeight(5);
+ *
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * point(21, 17);
+ * point(68, 19);
+ *
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(x1, y1);
+ * point(84, 91);
+ * }
+ *
+ * // Start changing the first control point if the user clicks near it.
+ * function mousePressed() {
+ * if (dist(mouseX, mouseY, x1, y1) < 20) {
+ * isChanging = true;
+ * }
+ * }
+ *
+ * // Stop changing the first control point when the user releases the mouse.
+ * function mouseReleased() {
+ * isChanging = false;
+ * }
+ *
+ * // Update the first control point while the user drags the mouse.
+ * function mouseDragged() {
+ * if (isChanging === true) {
+ * x1 = mouseX;
+ * y1 = mouseY;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method curveVertex
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z] z-coordinate of the vertex.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the first control point and draw a segment to it.
+ * curveVertex(32, 91);
+ * curveVertex(32, 91);
+ *
+ * // Add the anchor points.
+ * curveVertex(21, 17);
+ * curveVertex(68, 19);
+ *
+ * // Add the second control point.
+ * curveVertex(84, 91);
+ * curveVertex(84, 91);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('A ghost shape drawn in white on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.curveVertex = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('curveVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer3;
+ (_this$_renderer3 = this._renderer).curveVertex.apply(_this$_renderer3, args);
+ } else {
+ isCurve = true;
+ this.vertex(args[0], args[1]);
+ }
+ return this;
+ };
+ /**
+ * Stops creating a hole within a flat shape.
+ *
+ * The beginContour() and `endContour()`
+ * functions allow for creating negative space within custom shapes that are
+ * flat. beginContour() begins adding vertices
+ * to a negative space and `endContour()` stops adding them.
+ * beginContour() and `endContour()` must be
+ * called between beginShape() and
+ * endShape().
+ *
+ * Transformations such as translate(),
+ * rotate(), and scale()
+ * don't work between beginContour() and
+ * `endContour()`. It's also not possible to use other shapes, such as
+ * ellipse() or rect(),
+ * between beginContour() and `endContour()`.
+ *
+ * Note: The vertices that define a negative space must "wind" in the opposite
+ * direction from the outer shape. First, draw vertices for the outer shape
+ * clockwise order. Then, draw vertices for the negative space in
+ * counter-clockwise order.
+ *
+ * @method endContour
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A ghost shape drawn in white on a blue background. When the user drags the mouse, the scene rotates to reveal the outline of a second ghost.');
+ * }
+ *
+ * function draw() {
+ * background('midnightblue');
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the first ghost.
+ * noStroke();
+ * fill('ghostwhite');
+ *
+ * beginShape();
+ * curveVertex(-28, 41, 0);
+ * curveVertex(-28, 41, 0);
+ * curveVertex(-29, -33, 0);
+ * curveVertex(18, -31, 0);
+ * curveVertex(34, 41, 0);
+ * curveVertex(34, 41, 0);
+ * endShape();
+ *
+ * // Draw the second ghost.
+ * noFill();
+ * stroke('ghostwhite');
+ *
+ * beginShape();
+ * curveVertex(-28, 41, -20);
+ * curveVertex(-28, 41, -20);
+ * curveVertex(-29, -33, -20);
+ * curveVertex(18, -31, -20);
+ * curveVertex(34, 41, -20);
+ * curveVertex(34, 41, -20);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Exterior vertices, clockwise winding.
+ * vertex(10, 10);
+ * vertex(90, 10);
+ * vertex(90, 90);
+ * vertex(10, 90);
+ *
+ * // Interior vertices, counter-clockwise winding.
+ * beginContour();
+ * vertex(30, 30);
+ * vertex(30, 70);
+ * vertex(70, 70);
+ * vertex(70, 30);
+ * endContour();
+ *
+ * // Stop drawing the shape.
+ * endShape(CLOSE);
+ *
+ * describe('A white square with a square hole in its center drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.endContour = function () {
+ if (this._renderer.isP3D) {
+ return this;
+ }
+ var vert = contourVertices[0].slice(); // copy all data
+ vert.isVert = contourVertices[0].isVert;
+ vert.moveTo = false;
+ contourVertices.push(vert);
+ // prevent stray lines with multiple contours
+ if (isFirstContour) {
+ vertices.push(vertices[0]);
+ isFirstContour = false;
+ }
+ for (var i = 0; i < contourVertices.length; i++) {
+ vertices.push(contourVertices[i]);
+ }
+ return this;
+ };
+ /**
+ * Begins adding vertices to a custom shape.
+ *
+ * The beginShape() and `endShape()` functions
+ * allow for creating custom shapes in 2D or 3D.
+ * beginShape() begins adding vertices to a
+ * custom shape and `endShape()` stops adding them.
+ *
+ * The first parameter, `mode`, is optional. By default, the first and last
+ * vertices of a shape aren't connected. If the constant `CLOSE` is passed, as
+ * in `endShape(CLOSE)`, then the first and last vertices will be connected.
+ *
+ * The second parameter, `count`, is also optional. In WebGL mode, it’s more
+ * efficient to draw many copies of the same shape using a technique called
+ * instancing.
+ * The `count` parameter tells WebGL mode how many copies to draw. For
+ * example, calling `endShape(CLOSE, 400)` after drawing a custom shape will
+ * make it efficient to draw 400 copies. This feature requires
+ * writing a custom shader.
+ *
+ * After calling beginShape(), shapes can be
+ * built by calling vertex(),
+ * bezierVertex(),
+ * quadraticVertex(), and/or
+ * curveVertex(). Calling
+ * `endShape()` will stop adding vertices to the
+ * shape. Each shape will be outlined with the current stroke color and filled
+ * with the current fill color.
+ *
+ * Transformations such as translate(),
+ * rotate(), and
+ * scale() don't work between
+ * beginShape() and `endShape()`. It's also not
+ * possible to use other shapes, such as ellipse() or
+ * rect(), between
+ * beginShape() and `endShape()`.
+ *
+ * @method endShape
+ * @param {Constant} [mode] use CLOSE to close the shape
+ * @param {Integer} [count] number of times you want to draw/instance the shape (for WebGL mode).
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white square with a square hole in its center drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Exterior vertices, clockwise winding.
+ * vertex(-40, -40);
+ * vertex(40, -40);
+ * vertex(40, 40);
+ * vertex(-40, 40);
+ *
+ * // Interior vertices, counter-clockwise winding.
+ * beginContour();
+ * vertex(-20, -20);
+ * vertex(-20, 20);
+ * vertex(20, 20);
+ * vertex(20, -20);
+ * endContour();
+ *
+ * // Stop drawing the shape.
+ * endShape(CLOSE);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the shapes.
+ * noFill();
+ *
+ * // Left triangle.
+ * beginShape();
+ * vertex(20, 20);
+ * vertex(45, 20);
+ * vertex(45, 80);
+ * endShape(CLOSE);
+ *
+ * // Right triangle.
+ * beginShape();
+ * vertex(50, 20);
+ * vertex(75, 20);
+ * vertex(75, 80);
+ * endShape();
+ *
+ * describe(
+ * 'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.endShape = function (mode) {
+ var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+ _main.default._validateParameters('endShape', arguments);
+ if (count < 1) {
+ console.log('🌸 p5.js says: You can not have less than one instance');
+ count = 1;
+ }
+ if (this._renderer.isP3D) {
+ this._renderer.endShape(mode, isCurve, isBezier, isQuadratic, isContour, shapeKind, count);
+ } else {
+ if (count !== 1) {
+ console.log('🌸 p5.js says: Instancing is only supported in WebGL2 mode');
+ }
+ if (vertices.length === 0) {
+ return this;
+ }
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }
+ var closeShape = mode === constants.CLOSE;
+ // if the shape is closed, the first element is also the last element
+ if (closeShape && !isContour) {
+ vertices.push(vertices[0]);
+ }
+ this._renderer.endShape(mode, vertices, isCurve, isBezier, isQuadratic, isContour, shapeKind);
+ // Reset some settings
+ isCurve = false;
+ isBezier = false;
+ isQuadratic = false;
+ isContour = false;
+ isFirstContour = true;
+ // If the shape is closed, the first element was added as last element.
+ // We must remove it again to prevent the list of vertices from growing
+ // over successive calls to endShape(CLOSE)
+ if (closeShape) {
+ vertices.pop();
+ }
+ }
+ return this;
+ };
+ /**
+ * Adds a quadratic Bézier curve segment to a custom shape.
+ *
+ * `quadraticVertex()` adds a curved segment to custom shapes. The Bézier
+ * curve segments it creates are similar to those made by the
+ * bezierVertex() function.
+ * `quadraticVertex()` must be called between the
+ * beginShape() and
+ * endShape() functions. The curved segment uses
+ * the previous vertex as the first anchor point, so there must be at least
+ * one call to vertex() before `quadraticVertex()` can
+ * be used.
+ *
+ * The first two parameters, `cx` and `cy`, set the curve’s control point.
+ * The control point "pulls" the curve towards its.
+ *
+ * The last two parameters, `x3`, and `y3`, set the last anchor point. The
+ * last anchor point is where the curve ends.
+ *
+ * Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+ * `bezierVertex()` has eight arguments because each point has x-, y-, and
+ * z-coordinates.
+ *
+ * Note: `quadraticVertex()` won’t work when an argument is passed to
+ * beginShape().
+ *
+ * @method quadraticVertex
+ * @param {Number} cx x-coordinate of the control point.
+ * @param {Number} cy y-coordinate of the control point.
+ * @param {Number} x3 x-coordinate of the anchor point.
+ * @param {Number} y3 y-coordinate of the anchor point.
+ * @chainable
+ *
+ * @example
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `#version 300 es
+ *
+ * precision mediump float;
+ *
+ * in vec3 aPosition;
+ * flat out int instanceID;
+ *
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * void main() {
+ *
+ * // Copy the instance ID to the fragment shader.
+ * instanceID = gl_InstanceID;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ *
+ * // gl_InstanceID represents a numeric value for each instance.
+ * // Using gl_InstanceID allows us to move each instance separately.
+ * // Here we move each instance horizontally by ID * 23.
+ * float xOffset = float(gl_InstanceID) * 23.0;
+ *
+ * // Apply the offset to the final position.
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -
+ * vec4(xOffset, 0.0, 0.0, 0.0));
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `#version 300 es
+ *
+ * precision mediump float;
+ *
+ * out vec4 outColor;
+ * flat in int instanceID;
+ * uniform float numInstances;
+ *
+ * void main() {
+ * vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
+ * vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
+ *
+ * // Normalize the instance ID.
+ * float normId = float(instanceID) / numInstances;
+ *
+ * // Mix between two colors using the normalized instance ID.
+ * outColor = mix(red, blue, normId);
+ * }
+ * `;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * let myShader = createShader(vertSrc, fragSrc);
+ *
+ * background(220);
+ *
+ * // Compile and apply the p5.Shader.
+ * shader(myShader);
+ *
+ * // Set the numInstances uniform.
+ * myShader.setUniform('numInstances', 4);
+ *
+ * // Translate the origin to help align the drawing.
+ * translate(25, -10);
+ *
+ * // Style the shapes.
+ * noStroke();
+ *
+ * // Draw the shapes.
+ * beginShape();
+ * vertex(0, 0);
+ * vertex(0, 20);
+ * vertex(20, 20);
+ * vertex(20, 0);
+ * vertex(0, 0);
+ * endShape(CLOSE, 4);
+ *
+ * describe('A row of four squares. Their colors transition from purple on the left to red on the right');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the curve.
+ * noFill();
+ *
+ * // Draw the curve.
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * endShape();
+ *
+ * describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the curve.
+ * noFill();
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * endShape();
+ *
+ * // Draw red lines from the anchor points to the control point.
+ * stroke(255, 0, 0);
+ * line(20, 20, 80, 20);
+ * line(50, 50, 80, 20);
+ *
+ * // Draw the anchor points in black.
+ * strokeWeight(5);
+ * stroke(0);
+ * point(20, 20);
+ * point(50, 50);
+ *
+ * // Draw the control point in red.
+ * stroke(255, 0, 0);
+ * point(80, 20);
+ *
+ * describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click the mouse near the red dot in the top-right corner
+ * // and drag to change the curve's shape.
+ *
+ * let x2 = 80;
+ * let y2 = 20;
+ * let isChanging = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the curve.
+ * noFill();
+ * strokeWeight(1);
+ * stroke(0);
+ *
+ * // Draw the curve.
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(x2, y2, 50, 50);
+ * endShape();
+ *
+ * // Draw red lines from the anchor points to the control point.
+ * stroke(255, 0, 0);
+ * line(20, 20, x2, y2);
+ * line(50, 50, x2, y2);
+ *
+ * // Draw the anchor points in black.
+ * strokeWeight(5);
+ * stroke(0);
+ * point(20, 20);
+ * point(50, 50);
+ *
+ * // Draw the control point in red.
+ * stroke(255, 0, 0);
+ * point(x2, y2);
+ * }
+ *
+ * // Start changing the first control point if the user clicks near it.
+ * function mousePressed() {
+ * if (dist(mouseX, mouseY, x2, y2) < 20) {
+ * isChanging = true;
+ * }
+ * }
+ *
+ * // Stop changing the first control point when the user releases the mouse.
+ * function mouseReleased() {
+ * isChanging = false;
+ * }
+ *
+ * // Update the first control point while the user drags the mouse.
+ * function mouseDragged() {
+ * if (isChanging === true) {
+ * x2 = mouseX;
+ * y2 = mouseY;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add the curved segments.
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * quadraticVertex(20, 80, 80, 80);
+ *
+ * // Add the straight segments.
+ * vertex(80, 10);
+ * vertex(20, 10);
+ * vertex(20, 20);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('A white puzzle piece drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method quadraticVertex
+ * @param {Number} cx
+ * @param {Number} cy
+ * @param {Number} cz z-coordinate of the control point.
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate of the anchor point.
+ */
+ _main.default.prototype.quadraticVertex = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('quadraticVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer4;
+ (_this$_renderer4 = this._renderer).quadraticVertex.apply(_this$_renderer4, args);
+ } else {
+ //if we're drawing a contour, put the points into an
+ // array for inside drawing
+ if (this._contourInited) {
+ var pt = {
+ };
+ pt.x = args[0];
+ pt.y = args[1];
+ pt.x3 = args[2];
+ pt.y3 = args[3];
+ pt.type = constants.QUADRATIC;
+ this._contourVertices.push(pt);
+ return this;
+ }
+ if (vertices.length > 0) {
+ isQuadratic = true;
+ var vert = [
+ ];
+ for (var i = 0; i < args.length; i++) {
+ vert[i] = args[i];
+ }
+ vert.isVert = false;
+ if (isContour) {
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ } else {
+ _main.default._friendlyError('vertex() must be used once before calling quadraticVertex()', 'quadraticVertex');
+ }
+ }
+ return this;
+ };
+ /**
+ * Adds a vertex to a custom shape.
+ *
+ * `vertex()` sets the coordinates of vertices drawn between the
+ * beginShape() and
+ * endShape() functions.
+ *
+ * The first two parameters, `x` and `y`, set the x- and y-coordinates of the
+ * vertex.
+ *
+ * The third parameter, `z`, is optional. It sets the z-coordinate of the
+ * vertex in WebGL mode. By default, `z` is 0.
+ *
+ * The fourth and fifth parameters, `u` and `v`, are also optional. They set
+ * the u- and v-coordinates for the vertex’s texture when used with
+ * endShape(). By default, `u` and `v` are both 0.
+ *
+ * @method vertex
+ * @param {Number} x x-coordinate of the vertex.
+ * @param {Number} y y-coordinate of the vertex.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click the and drag the mouse to view the scene from a different angle.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the first puzzle piece.
+ * noStroke();
+ * fill(255);
+ *
+ * // Draw the first puzzle piece.
+ * beginShape();
+ * vertex(-30, -30, 0);
+ * quadraticVertex(30, -30, 0, 0, 0, 0);
+ * quadraticVertex(-30, 30, 0, 30, 30, 0);
+ * vertex(30, -40, 0);
+ * vertex(-30, -40, 0);
+ * vertex(-30, -30, 0);
+ * endShape();
+ *
+ * // Style the second puzzle piece.
+ * stroke(255);
+ * noFill();
+ *
+ * // Draw the second puzzle piece.
+ * beginShape();
+ * vertex(-30, -30, -20);
+ * quadraticVertex(30, -30, -20, 0, 0, -20);
+ * quadraticVertex(-30, 30, -20, 30, 30, -20);
+ * vertex(30, -40, -20);
+ * vertex(-30, -40, -20);
+ * vertex(-30, -30, -20);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the shape.
+ * strokeWeight(3);
+ *
+ * // Start drawing the shape.
+ * // Only draw the vertices.
+ * beginShape(POINTS);
+ *
+ * // Add the vertices.
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ *
+ * describe('Four black dots that form a square are drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add vertices.
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ *
+ * // Stop drawing the shape.
+ * endShape(CLOSE);
+ *
+ * describe('A white square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add vertices.
+ * vertex(-20, -30, 0);
+ * vertex(35, -30, 0);
+ * vertex(35, 25, 0);
+ * vertex(-20, 25, 0);
+ *
+ * // Stop drawing the shape.
+ * endShape(CLOSE);
+ *
+ * describe('A white square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white square spins around slowly on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Start drawing the shape.
+ * beginShape();
+ *
+ * // Add vertices.
+ * vertex(-20, -30, 0);
+ * vertex(35, -30, 0);
+ * vertex(35, 25, 0);
+ * vertex(-20, 25, 0);
+ *
+ * // Stop drawing the shape.
+ * endShape(CLOSE);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method vertex
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z] z-coordinate of the vertex. Defaults to 0.
+ * @chainable
+ */
+ /**
+ * @method vertex
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z]
+ * @param {Number} [u] u-coordinate of the vertex's texture. Defaults to 0.
+ * @param {Number} [v] v-coordinate of the vertex's texture. Defaults to 0.
+ * @chainable
+ */
+ _main.default.prototype.vertex = function (x, y, moveTo, u, v) {
+ if (this._renderer.isP3D) {
+ var _this$_renderer5;
+ (_this$_renderer5 = this._renderer).vertex.apply(_this$_renderer5, arguments);
+ } else {
+ var vert = [
+ ];
+ vert.isVert = true;
+ vert[0] = x;
+ vert[1] = y;
+ vert[2] = 0;
+ vert[3] = 0;
+ vert[4] = 0;
+ vert[5] = this._renderer._getFill();
+ vert[6] = this._renderer._getStroke();
+ if (moveTo) {
+ vert.moveTo = moveTo;
+ }
+ if (isContour) {
+ if (contourVertices.length === 0) {
+ vert.moveTo = true;
+ }
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ }
+ return this;
+ };
+ /**
+ * Sets the normal vector for vertices in a custom 3D shape.
+ *
+ * 3D shapes created with beginShape() and
+ * endShape() are made by connecting sets of
+ * points called vertices. Each vertex added with
+ * vertex() has a normal vector that points away
+ * from it. The normal vector controls how light reflects off the shape.
+ *
+ * `normal()` can be called two ways with different parameters to define the
+ * normal vector's components.
+ *
+ * The first way to call `normal()` has three parameters, `x`, `y`, and `z`.
+ * If `Number`s are passed, as in `normal(1, 2, 3)`, they set the x-, y-, and
+ * z-components of the normal vector.
+ *
+ * The second way to call `normal()` has one parameter, `vector`. If a
+ * p5.Vector object is passed, as in
+ * `normal(myVector)`, its components will be used to set the normal vector.
+ *
+ * `normal()` changes the normal vector of vertices added to a custom shape
+ * with vertex(). `normal()` must be called between
+ * the beginShape() and
+ * endShape() functions, just like
+ * vertex(). The normal vector set by calling
+ * `normal()` will affect all following vertices until `normal()` is called
+ * again:
+ *
+ *
+ * let img;
+ *
+ * // Load an image to apply as a texture.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A photograph of a ceiling rotates slowly against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Style the shape.
+ * noStroke();
+ *
+ * // Apply the texture.
+ * texture(img);
+ * textureMode(NORMAL);
+ *
+ * // Start drawing the shape
+ * beginShape();
+ *
+ * // Add vertices.
+ * vertex(-20, -30, 0, 0, 0);
+ * vertex(35, -30, 0, 1, 0);
+ * vertex(35, 25, 0, 1, 1);
+ * vertex(-20, 25, 0, 0, 1);
+ *
+ * // Stop drawing the shape.
+ * endShape();
+ * }
+ *
+ *
+ * beginShape();
+ *
+ * // Set the vertex normal.
+ * normal(-0.4, -0.4, 0.8);
+ *
+ * // Add a vertex.
+ * vertex(-30, -30, 0);
+ *
+ * // Set the vertex normal.
+ * normal(0, 0, 1);
+ *
+ * // Add vertices.
+ * vertex(30, -30, 0);
+ * vertex(30, 30, 0);
+ *
+ * // Set the vertex normal.
+ * normal(0.4, -0.4, 0.8);
+ *
+ * // Add a vertex.
+ * vertex(-30, 30, 0);
+ *
+ * endShape();
+ *
+ *
+ * @method normal
+ * @param {p5.Vector} vector vertex normal as a p5.Vector object.
+ * @chainable
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Click the and drag the mouse to view the scene from a different angle.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the shape.
+ * normalMaterial();
+ * noStroke();
+ *
+ * // Draw the shape.
+ * beginShape();
+ * vertex(-30, -30, 0);
+ * vertex(30, -30, 0);
+ * vertex(30, 30, 0);
+ * vertex(-30, 30, 0);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click the and drag the mouse to view the scene from a different angle.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the shape.
+ * normalMaterial();
+ * noStroke();
+ *
+ * // Draw the shape.
+ * // Use normal() to set vertex normals.
+ * beginShape();
+ * normal(-0.4, -0.4, 0.8);
+ * vertex(-30, -30, 0);
+ *
+ * normal(0, 0, 1);
+ * vertex(30, -30, 0);
+ * vertex(30, 30, 0);
+ *
+ * normal(0.4, -0.4, 0.8);
+ * vertex(-30, 30, 0);
+ * endShape();
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method normal
+ * @param {Number} x x-component of the vertex normal.
+ * @param {Number} y y-component of the vertex normal.
+ * @param {Number} z z-component of the vertex normal.
+ * @chainable
+ */
+ _main.default.prototype.normal = function (x, y, z) {
+ var _this$_renderer6;
+ this._assert3d('normal');
+ _main.default._validateParameters('normal', arguments);
+ (_this$_renderer6 = this._renderer).normal.apply(_this$_renderer6, arguments);
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 291,
+ '../main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 314: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ },
+ {
+ }
+ ],
+ 315: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.assign');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Structure
+ * @submodule Structure
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Stops the code in draw() from running repeatedly.
+ *
+ * By default, draw() tries to run 60 times per
+ * second. Calling `noLoop()` stops draw() from
+ * repeating. The draw loop can be restarted by calling
+ * loop(). draw() can be run
+ * once by calling redraw().
+ *
+ * The isLooping() function can be used to check
+ * whether a sketch is looping, as in `isLooping() === true`.
+ *
+ * @method noLoop
+ *
+ * @example
+ *
+ * // Click the and drag the mouse to view the scene from a different angle.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the shape.
+ * normalMaterial();
+ * noStroke();
+ *
+ * // Create p5.Vector objects.
+ * let n1 = createVector(-0.4, -0.4, 0.8);
+ * let n2 = createVector(0, 0, 1);
+ * let n3 = createVector(0.4, -0.4, 0.8);
+ *
+ * // Draw the shape.
+ * // Use normal() to set vertex normals.
+ * beginShape();
+ * normal(n1);
+ * vertex(-30, -30, 0);
+ *
+ * normal(n2);
+ * vertex(30, -30, 0);
+ * vertex(30, 30, 0);
+ *
+ * normal(n3);
+ * vertex(-30, 30, 0);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Turn off the draw loop.
+ * noLoop();
+ *
+ * describe('A white half-circle on the left edge of a gray square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the circle's x-coordinate.
+ * let x = frameCount;
+ *
+ * // Draw the circle.
+ * // Normally, the circle would move from left to right.
+ * circle(x, 50, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click to stop the draw loop.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(5);
+ *
+ * describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the circle's coordinates.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ *
+ * // Draw the circle.
+ * // Normally, the circle would move from left to right.
+ * circle(x, y, 20);
+ * }
+ *
+ * // Stop the draw loop when the user double-clicks.
+ * function doubleClicked() {
+ * noLoop();
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.noLoop = function () {
+ this._loop = false;
+ };
+ /**
+ * Resumes the draw loop after noLoop() has been
+ * called.
+ *
+ * By default, draw() tries to run 60 times per
+ * second. Calling noLoop() stops
+ * draw() from repeating. The draw loop can be
+ * restarted by calling `loop()`.
+ *
+ * The isLooping() function can be used to check
+ * whether a sketch is looping, as in `isLooping() === true`.
+ *
+ * @method loop
+ *
+ * @example
+ *
+ * let startButton;
+ * let stopButton;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create the button elements and place them
+ * // beneath the canvas.
+ * startButton = createButton('▶');
+ * startButton.position(0, 100);
+ * startButton.size(50, 20);
+ * stopButton = createButton('◾');
+ * stopButton.position(50, 100);
+ * stopButton.size(50, 20);
+ *
+ * // Set functions to call when the buttons are pressed.
+ * startButton.mousePressed(loop);
+ * stopButton.mousePressed(noLoop);
+ *
+ * // Slow the frame rate.
+ * frameRate(5);
+ *
+ * describe(
+ * 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the circle's coordinates.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ *
+ * // Draw the circle.
+ * // Normally, the circle would move from left to right.
+ * circle(x, y, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Turn off the draw loop.
+ * noLoop();
+ *
+ * describe(
+ * 'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the circle's x-coordinate.
+ * let x = frameCount;
+ *
+ * // Draw the circle.
+ * circle(x, 50, 20);
+ * }
+ *
+ * // Resume the draw loop when the user double-clicks.
+ * function doubleClicked() {
+ * loop();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.loop = function () {
+ if (!this._loop) {
+ this._loop = true;
+ if (this._setupDone) {
+ this._draw();
+ }
+ }
+ };
+ /**
+ * Returns `true` if the draw loop is running and `false` if not.
+ *
+ * By default, draw() tries to run 60 times per
+ * second. Calling noLoop() stops
+ * draw() from repeating. The draw loop can be
+ * restarted by calling loop().
+ *
+ * The `isLooping()` function can be used to check whether a sketch is
+ * looping, as in `isLooping() === true`.
+ *
+ * @method isLooping
+ * @returns {boolean}
+ *
+ * @example
+ *
+ * let startButton;
+ * let stopButton;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create the button elements and place them
+ * // beneath the canvas.
+ * startButton = createButton('▶');
+ * startButton.position(0, 100);
+ * startButton.size(50, 20);
+ * stopButton = createButton('◾');
+ * stopButton.position(50, 100);
+ * stopButton.size(50, 20);
+ *
+ * // Set functions to call when the buttons are pressed.
+ * startButton.mousePressed(loop);
+ * stopButton.mousePressed(noLoop);
+ *
+ * // Slow the frame rate.
+ * frameRate(5);
+ *
+ * describe(
+ * 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the circle's coordinates.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ *
+ * // Draw the circle.
+ * // Normally, the circle would move from left to right.
+ * circle(x, y, 20);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.isLooping = function () {
+ return this._loop;
+ };
+ /**
+ * Begins a drawing group that contains its own styles and transformations.
+ *
+ * By default, styles such as fill() and
+ * transformations such as rotate() are applied to
+ * all drawing that follows. The `push()` and pop()
+ * functions can limit the effect of styles and transformations to a specific
+ * group of shapes, images, and text. For example, a group of shapes could be
+ * translated to follow the mouse without affecting the rest of the sketch:
+ *
+ * ```js
+ * // Begin the drawing group.
+ * push();
+ *
+ * // Translate the origin to the mouse's position.
+ * translate(mouseX, mouseY);
+ *
+ * // Style the face.
+ * noStroke();
+ * fill('green');
+ *
+ * // Draw the face.
+ * circle(0, 0, 60);
+ *
+ * // Style the eyes.
+ * fill('white');
+ *
+ * // Draw the left eye.
+ * ellipse(-20, -20, 30, 20);
+ *
+ * // Draw the right eye.
+ * ellipse(20, -20, 30, 20);
+ *
+ * // End the drawing group.
+ * pop();
+ *
+ * // Draw a bug.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ * text('🦟', x, y);
+ * ```
+ *
+ * In the code snippet above, the bug's position isn't affected by
+ * `translate(mouseX, mouseY)` because that transformation is contained
+ * between `push()` and pop(). The bug moves around
+ * the entire canvas as expected.
+ *
+ * Note: `push()` and pop() are always called as a
+ * pair. Both functions are required to begin and end a drawing group.
+ *
+ * `push()` and pop() can also be nested to create
+ * subgroups. For example, the code snippet above could be changed to give
+ * more detail to the frog’s eyes:
+ *
+ * ```js
+ * // Begin the drawing group.
+ * push();
+ *
+ * // Translate the origin to the mouse's position.
+ * translate(mouseX, mouseY);
+ *
+ * // Style the face.
+ * noStroke();
+ * fill('green');
+ *
+ * // Draw a face.
+ * circle(0, 0, 60);
+ *
+ * // Style the eyes.
+ * fill('white');
+ *
+ * // Draw the left eye.
+ * push();
+ * translate(-20, -20);
+ * ellipse(0, 0, 30, 20);
+ * fill('black');
+ * circle(0, 0, 8);
+ * pop();
+ *
+ * // Draw the right eye.
+ * push();
+ * translate(20, -20);
+ * ellipse(0, 0, 30, 20);
+ * fill('black');
+ * circle(0, 0, 8);
+ * pop();
+ *
+ * // End the drawing group.
+ * pop();
+ *
+ * // Draw a bug.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ * text('🦟', x, y);
+ * ```
+ *
+ * In this version, the code to draw each eye is contained between its own
+ * `push()` and pop() functions. Doing so makes it
+ * easier to add details in the correct part of a drawing.
+ *
+ * `push()` and pop() contain the effects of the
+ * following functions:
+ *
+ * - fill()
+ * - noFill()
+ * - noStroke()
+ * - stroke()
+ * - tint()
+ * - noTint()
+ * - strokeWeight()
+ * - strokeCap()
+ * - strokeJoin()
+ * - imageMode()
+ * - rectMode()
+ * - ellipseMode()
+ * - colorMode()
+ * - textAlign()
+ * - textFont()
+ * - textSize()
+ * - textLeading()
+ * - applyMatrix()
+ * - resetMatrix()
+ * - rotate()
+ * - scale()
+ * - shearX()
+ * - shearY()
+ * - translate()
+ *
+ * In WebGL mode, `push()` and pop() contain the
+ * effects of a few additional styles:
+ *
+ * - setCamera()
+ * - ambientLight()
+ * - directionalLight()
+ * - pointLight() texture()
+ * - specularMaterial()
+ * - shininess()
+ * - normalMaterial()
+ * - shader()
+ *
+ * @method push
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the circle at the mouse's position.
+ * circle(mouseX, mouseY, 20);
+ * }
+ *
+ * // Toggle the draw loop when the user double-clicks.
+ * function doubleClicked() {
+ * if (isLooping() === true) {
+ * noLoop();
+ * } else {
+ * loop();
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the left circle.
+ * circle(25, 50, 20);
+ *
+ * // Begin the drawing group.
+ * push();
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Style the circle.
+ * strokeWeight(5);
+ * stroke('royalblue');
+ * fill('orange');
+ *
+ * // Draw the circle.
+ * circle(0, 0, 20);
+ *
+ * // End the drawing group.
+ * pop();
+ *
+ * // Draw the right circle.
+ * circle(75, 50, 20);
+ *
+ * describe(
+ * 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(24);
+ *
+ * describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Begin the drawing group.
+ * push();
+ *
+ * // Translate the origin to the mouse's position.
+ * translate(mouseX, mouseY);
+ *
+ * // Style the face.
+ * noStroke();
+ * fill('green');
+ *
+ * // Draw a face.
+ * circle(0, 0, 60);
+ *
+ * // Style the eyes.
+ * fill('white');
+ *
+ * // Draw the left eye.
+ * push();
+ * translate(-20, -20);
+ * ellipse(0, 0, 30, 20);
+ * fill('black');
+ * circle(0, 0, 8);
+ * pop();
+ *
+ * // Draw the right eye.
+ * push();
+ * translate(20, -20);
+ * ellipse(0, 0, 30, 20);
+ * fill('black');
+ * circle(0, 0, 8);
+ * pop();
+ *
+ * // End the drawing group.
+ * pop();
+ *
+ * // Draw a bug.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ * text('🦟', x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.push = function () {
+ this._styles.push({
+ props: {
+ _colorMode: this._colorMode
+ },
+ renderer: this._renderer.push()
+ });
+ };
+ /**
+ * Ends a drawing group that contains its own styles and transformations.
+ *
+ * By default, styles such as fill() and
+ * transformations such as rotate() are applied to
+ * all drawing that follows. The push() and `pop()`
+ * functions can limit the effect of styles and transformations to a specific
+ * group of shapes, images, and text. For example, a group of shapes could be
+ * translated to follow the mouse without affecting the rest of the sketch:
+ *
+ * ```js
+ * // Begin the drawing group.
+ * push();
+ *
+ * // Translate the origin to the mouse's position.
+ * translate(mouseX, mouseY);
+ *
+ * // Style the face.
+ * noStroke();
+ * fill('green');
+ *
+ * // Draw the face.
+ * circle(0, 0, 60);
+ *
+ * // Style the eyes.
+ * fill('white');
+ *
+ * // Draw the left eye.
+ * ellipse(-20, -20, 30, 20);
+ *
+ * // Draw the right eye.
+ * ellipse(20, -20, 30, 20);
+ *
+ * // End the drawing group.
+ * pop();
+ *
+ * // Draw a bug.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ * text('🦟', x, y);
+ * ```
+ *
+ * In the code snippet above, the bug's position isn't affected by
+ * `translate(mouseX, mouseY)` because that transformation is contained
+ * between push() and `pop()`. The bug moves around
+ * the entire canvas as expected.
+ *
+ * Note: push() and `pop()` are always called as a
+ * pair. Both functions are required to begin and end a drawing group.
+ *
+ * push() and `pop()` can also be nested to create
+ * subgroups. For example, the code snippet above could be changed to give
+ * more detail to the frog’s eyes:
+ *
+ * ```js
+ * // Begin the drawing group.
+ * push();
+ *
+ * // Translate the origin to the mouse's position.
+ * translate(mouseX, mouseY);
+ *
+ * // Style the face.
+ * noStroke();
+ * fill('green');
+ *
+ * // Draw a face.
+ * circle(0, 0, 60);
+ *
+ * // Style the eyes.
+ * fill('white');
+ *
+ * // Draw the left eye.
+ * push();
+ * translate(-20, -20);
+ * ellipse(0, 0, 30, 20);
+ * fill('black');
+ * circle(0, 0, 8);
+ * pop();
+ *
+ * // Draw the right eye.
+ * push();
+ * translate(20, -20);
+ * ellipse(0, 0, 30, 20);
+ * fill('black');
+ * circle(0, 0, 8);
+ * pop();
+ *
+ * // End the drawing group.
+ * pop();
+ *
+ * // Draw a bug.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ * text('🦟', x, y);
+ * ```
+ *
+ * In this version, the code to draw each eye is contained between its own
+ * push() and `pop()` functions. Doing so makes it
+ * easier to add details in the correct part of a drawing.
+ *
+ * push() and `pop()` contain the effects of the
+ * following functions:
+ *
+ * - fill()
+ * - noFill()
+ * - noStroke()
+ * - stroke()
+ * - tint()
+ * - noTint()
+ * - strokeWeight()
+ * - strokeCap()
+ * - strokeJoin()
+ * - imageMode()
+ * - rectMode()
+ * - ellipseMode()
+ * - colorMode()
+ * - textAlign()
+ * - textFont()
+ * - textSize()
+ * - textLeading()
+ * - applyMatrix()
+ * - resetMatrix()
+ * - rotate()
+ * - scale()
+ * - shearX()
+ * - shearY()
+ * - translate()
+ *
+ * In WebGL mode, push() and `pop()` contain the
+ * effects of a few additional styles:
+ *
+ * - setCamera()
+ * - ambientLight()
+ * - directionalLight()
+ * - pointLight() texture()
+ * - specularMaterial()
+ * - shininess()
+ * - normalMaterial()
+ * - shader()
+ *
+ * @method pop
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the red sphere.
+ * push();
+ * translate(-25, 0, 0);
+ * noStroke();
+ * directionalLight(255, 0, 0, 0, 0, -1);
+ * sphere(20);
+ * pop();
+ *
+ * // Draw the blue sphere.
+ * push();
+ * translate(25, 0, 0);
+ * strokeWeight(0.3);
+ * stroke(0, 0, 255);
+ * noFill();
+ * sphere(20);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the left circle.
+ * circle(25, 50, 20);
+ *
+ * // Begin the drawing group.
+ * push();
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Style the circle.
+ * strokeWeight(5);
+ * stroke('royalblue');
+ * fill('orange');
+ *
+ * // Draw the circle.
+ * circle(0, 0, 20);
+ *
+ * // End the drawing group.
+ * pop();
+ *
+ * // Draw the right circle.
+ * circle(75, 50, 20);
+ *
+ * describe(
+ * 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(24);
+ *
+ * describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Begin the drawing group.
+ * push();
+ *
+ * // Translate the origin to the mouse's position.
+ * translate(mouseX, mouseY);
+ *
+ * // Style the face.
+ * noStroke();
+ * fill('green');
+ *
+ * // Draw a face.
+ * circle(0, 0, 60);
+ *
+ * // Style the eyes.
+ * fill('white');
+ *
+ * // Draw the left eye.
+ * push();
+ * translate(-20, -20);
+ * ellipse(0, 0, 30, 20);
+ * fill('black');
+ * circle(0, 0, 8);
+ * pop();
+ *
+ * // Draw the right eye.
+ * push();
+ * translate(20, -20);
+ * ellipse(0, 0, 30, 20);
+ * fill('black');
+ * circle(0, 0, 8);
+ * pop();
+ *
+ * // End the drawing group.
+ * pop();
+ *
+ * // Draw a bug.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ * text('🦟', x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pop = function () {
+ var style = this._styles.pop();
+ if (style) {
+ this._renderer.pop(style.renderer);
+ Object.assign(this, style.props);
+ } else {
+ console.warn('pop() was called without matching push()');
+ }
+ };
+ /**
+ * Runs the code in draw() once.
+ *
+ * By default, draw() tries to run 60 times per
+ * second. Calling noLoop() stops
+ * draw() from repeating. Calling `redraw()` will
+ * execute the code in the draw() function a set
+ * number of times.
+ *
+ * The parameter, `n`, is optional. If a number is passed, as in `redraw(5)`,
+ * then the draw loop will run the given number of times. By default, `n` is
+ * 1.
+ *
+ * @method redraw
+ * @param {Integer} [n] number of times to run draw(). Defaults to 1.
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the red sphere.
+ * push();
+ * translate(-25, 0, 0);
+ * noStroke();
+ * directionalLight(255, 0, 0, 0, 0, -1);
+ * sphere(20);
+ * pop();
+ *
+ * // Draw the blue sphere.
+ * push();
+ * translate(25, 0, 0);
+ * strokeWeight(0.3);
+ * stroke(0, 0, 255);
+ * noFill();
+ * sphere(20);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click the canvas to move the circle.
+ *
+ * let x = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Turn off the draw loop.
+ * noLoop();
+ *
+ * describe(
+ * 'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the circle.
+ * circle(x, 50, 20);
+ *
+ * // Increment x.
+ * x += 5;
+ * }
+ *
+ * // Run the draw loop when the user double-clicks.
+ * function doubleClicked() {
+ * redraw();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.redraw = function (n) {
+ if (this._inUserDraw || !this._setupDone) {
+ return;
+ }
+ var numberOfRedraws = parseInt(n);
+ if (isNaN(numberOfRedraws) || numberOfRedraws < 1) {
+ numberOfRedraws = 1;
+ }
+ var context = this._isGlobal ? window : this;
+ if (typeof context.draw === 'function') {
+ if (typeof context.setup === 'undefined') {
+ context.scale(context._pixelDensity, context._pixelDensity);
+ }
+ for (var idxRedraw = 0; idxRedraw < numberOfRedraws; idxRedraw++) {
+ context.resetMatrix();
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._updateAccsOutput();
+ }
+ if (context._renderer.isP3D) {
+ context._renderer._update();
+ }
+ context._setProperty('frameCount', context.frameCount + 1);
+ this.callRegisteredHooksFor('pre');
+ this._inUserDraw = true;
+ try {
+ context.draw();
+ } finally {
+ this._inUserDraw = false;
+ }
+ this.callRegisteredHooksFor('post');
+ }
+ }
+ };
+ /**
+ * Creates a new sketch in "instance" mode.
+ *
+ * All p5.js sketches are instances of the `p5` class. Put another way, all
+ * p5.js sketches are objects with methods including `pInst.setup()`,
+ * `pInst.draw()`, `pInst.circle()`, and `pInst.fill()`. By default, sketches
+ * run in "global mode" to hide some of this complexity.
+ *
+ * In global mode, a default instance of the `p5` class is created
+ * automatically. The default `p5` instance searches the web page's source
+ * code for declarations of system functions such as `setup()`, `draw()`,
+ * and `mousePressed()`, then attaches those functions to itself as methods.
+ * Calling a function such as `circle()` in global mode actually calls the
+ * default `p5` object's `pInst.circle()` method.
+ *
+ * It's often helpful to isolate the code within sketches from the rest of the
+ * code on a web page. Two common use cases are web pages that use other
+ * JavaScript libraries and web pages with multiple sketches. "Instance mode"
+ * makes it easy to support both of these scenarios.
+ *
+ * Instance mode sketches support the same API as global mode sketches. They
+ * use a function to bundle, or encapsulate, an entire sketch. The function
+ * containing the sketch is then passed to the `p5()` constructor.
+ *
+ * The first parameter, `sketch`, is a function that contains the sketch. For
+ * example, the statement `new p5(mySketch)` would create a new instance mode
+ * sketch from a function named `mySketch`. The function should have one
+ * parameter, `p`, that's a `p5` object.
+ *
+ * The second parameter, `node`, is optional. If a string is passed, as in
+ * `new p5(mySketch, 'sketch-one')` the new instance mode sketch will become a
+ * child of the HTML element with the id `sketch-one`. If an HTML element is
+ * passed, as in `new p5(mySketch, myElement)`, then the new instance mode
+ * sketch will become a child of the `Element` object called `myElement`.
+ *
+ * @method p5
+ * @param {Object} sketch function containing the sketch.
+ * @param {String|HTMLElement} node ID or reference to the HTML element that will contain the sketch.
+ *
+ * @example
+ *
+ * // Double-click the canvas to move the circle.
+ *
+ * let x = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Turn off the draw loop.
+ * noLoop();
+ *
+ * describe(
+ * 'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the circle.
+ * circle(x, 50, 20);
+ *
+ * // Increment x.
+ * x += 5;
+ * }
+ *
+ * // Run the draw loop three times when the user double-clicks.
+ * function doubleClicked() {
+ * redraw(3);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare the function containing the sketch.
+ * function sketch(p) {
+ *
+ * // Declare the setup() method.
+ * p.setup = function () {
+ * p.createCanvas(100, 100);
+ *
+ * p.describe('A white circle drawn on a gray background.');
+ * };
+ *
+ * // Declare the draw() method.
+ * p.draw = function () {
+ * p.background(200);
+ *
+ * // Draw the circle.
+ * p.circle(50, 50, 20);
+ * };
+ * }
+ *
+ * // Initialize the sketch.
+ * new p5(sketch);
+ *
+ *
+ *
+ *
+ *
+ * // Declare the function containing the sketch.
+ * function sketch(p) {
+ * // Create the sketch's variables within its scope.
+ * let x = 50;
+ * let y = 50;
+ *
+ * // Declare the setup() method.
+ * p.setup = function () {
+ * p.createCanvas(100, 100);
+ *
+ * p.describe('A white circle moves randomly on a gray background.');
+ * };
+ *
+ * // Declare the draw() method.
+ * p.draw = function () {
+ * p.background(200);
+ *
+ * // Update x and y.
+ * x += p.random(-1, 1);
+ * y += p.random(-1, 1);
+ *
+ * // Draw the circle.
+ * p.circle(x, y, 20);
+ * };
+ * }
+ *
+ * // Initialize the sketch.
+ * new p5(sketch);
+ *
+ *
+ *
+ *
+ *
+ * // Declare the function containing the sketch.
+ * function sketch(p) {
+ *
+ * // Declare the setup() method.
+ * p.setup = function () {
+ * p.createCanvas(100, 100);
+ *
+ * p.describe('A white circle drawn on a gray background.');
+ * };
+ *
+ * // Declare the draw() method.
+ * p.draw = function () {
+ * p.background(200);
+ *
+ * // Draw the circle.
+ * p.circle(50, 50, 20);
+ * };
+ * }
+ *
+ * // Select the web page's body element.
+ * let body = document.querySelector('body');
+ *
+ * // Initialize the sketch and attach it to the web page's body.
+ * new p5(sketch, body);
+ *
+ *
+ *
+ *
+ *
+ * // Declare the function containing the sketch.
+ * function sketch(p) {
+ *
+ * // Declare the setup() method.
+ * p.setup = function () {
+ * p.createCanvas(100, 100);
+ *
+ * p.describe(
+ * 'A white circle drawn on a gray background. The circle follows the mouse as the user moves.'
+ * );
+ * };
+ *
+ * // Declare the draw() method.
+ * p.draw = function () {
+ * p.background(200);
+ *
+ * // Draw the circle.
+ * p.circle(p.mouseX, p.mouseY, 20);
+ * };
+ * }
+ *
+ * // Initialize the sketch.
+ * new p5(sketch);
+ *
+ *
+ *
+ */
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ './main': 303,
+ 'core-js/modules/es.object.assign': 199
+ }
+ ],
+ 316: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * @module Transform
+ * @submodule Transform
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * Applies a transformation matrix to the coordinate system.
+ *
+ * Transformations such as
+ * translate(),
+ * rotate(), and
+ * scale()
+ * use matrix-vector multiplication behind the scenes. A table of numbers,
+ * called a matrix, encodes each transformation. The values in the matrix
+ * then multiply each point on the canvas, which is represented by a vector.
+ *
+ * `applyMatrix()` allows for many transformations to be applied at once. See
+ * Wikipedia
+ * and MDN
+ * for more details about transformations.
+ *
+ * There are two ways to call `applyMatrix()` in two and three dimensions.
+ *
+ * In 2D mode, the parameters `a`, `b`, `c`, `d`, `e`, and `f`, correspond to
+ * elements in the following transformation matrix:
+ *
+ * >
+ * // Declare the function containing the sketch.
+ * function sketch(p) {
+ *
+ * // Declare the setup() method.
+ * p.setup = function () {
+ * p.createCanvas(100, 100);
+ *
+ * p.describe(
+ * 'A white circle drawn on a gray background. The circle follows the mouse as the user moves. The circle becomes black when the user double-clicks.'
+ * );
+ * };
+ *
+ * // Declare the draw() method.
+ * p.draw = function () {
+ * p.background(200);
+ *
+ * // Draw the circle.
+ * p.circle(p.mouseX, p.mouseY, 20);
+ * };
+ *
+ * // Declare the doubleClicked() method.
+ * p.doubleClicked = function () {
+ * // Change the fill color when the user double-clicks.
+ * p.fill(0);
+ * };
+ * }
+ *
+ * // Initialize the sketch.
+ * new p5(sketch);
+ *
+ * 
+ *
+ * The numbers can be passed individually, as in
+ * `applyMatrix(2, 0, 0, 0, 2, 0)`. They can also be passed in an array, as in
+ * `applyMatrix([2, 0, 0, 0, 2, 0])`.
+ *
+ * In 3D mode, the parameters `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i`,
+ * `j`, `k`, `l`, `m`, `n`, `o`, and `p` correspond to elements in the
+ * following transformation matrix:
+ *
+ * 
+ *
+ * The numbers can be passed individually, as in
+ * `applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)`. They can
+ * also be passed in an array, as in
+ * `applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])`.
+ *
+ * By default, transformations accumulate. The
+ * push() and pop() functions
+ * can be used to isolate transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `applyMatrix()` inside the draw() function won't
+ * cause shapes to transform continuously.
+ *
+ * @method applyMatrix
+ * @param {Array} arr an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).
+ * @chainable
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * applyMatrix(1, 0, 0, 1, 50, 50);
+ *
+ * // Draw the circle at coordinates (0, 0).
+ * circle(0, 0, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * let m = [1, 0, 0, 1, 50, 50];
+ * applyMatrix(m);
+ *
+ * // Draw the circle at coordinates (0, 0).
+ * circle(0, 0, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * let angle = QUARTER_PI;
+ * let ca = cos(angle);
+ * let sa = sin(angle);
+ * applyMatrix(ca, sa, -sa, ca, 0, 0);
+ *
+ * // Draw a rectangle at coordinates (50, 0).
+ * rect(50, 0, 40, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a square at (30, 20).
+ * square(30, 20, 40);
+ *
+ * // Scale the coordinate system by a factor of 0.5.
+ * applyMatrix(0.5, 0, 0, 0.5, 0, 0);
+ *
+ * // Draw a square at (30, 20).
+ * // It appears at (15, 10) after scaling.
+ * square(30, 20, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white quadrilateral on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the shear factor.
+ * let angle = QUARTER_PI;
+ * let shearFactor = 1 / tan(HALF_PI - angle);
+ *
+ * // Shear the coordinate system along the x-axis.
+ * applyMatrix(1, 0, shearFactor, 1, 0, 0);
+ *
+ * // Draw the square.
+ * square(0, 0, 50);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method applyMatrix
+ * @param {Number} a an element of the transformation matrix.
+ * @param {Number} b an element of the transformation matrix.
+ * @param {Number} c an element of the transformation matrix.
+ * @param {Number} d an element of the transformation matrix.
+ * @param {Number} e an element of the transformation matrix.
+ * @param {Number} f an element of the transformation matrix.
+ * @chainable
+ */
+ /**
+ * @method applyMatrix
+ * @param {Number} a
+ * @param {Number} b
+ * @param {Number} c
+ * @param {Number} d
+ * @param {Number} e
+ * @param {Number} f
+ * @param {Number} g an element of the transformation matrix.
+ * @param {Number} h an element of the transformation matrix.
+ * @param {Number} i an element of the transformation matrix.
+ * @param {Number} j an element of the transformation matrix.
+ * @param {Number} k an element of the transformation matrix.
+ * @param {Number} l an element of the transformation matrix.
+ * @param {Number} m an element of the transformation matrix.
+ * @param {Number} n an element of the transformation matrix.
+ * @param {Number} o an element of the transformation matrix.
+ * @param {Number} p an element of the transformation matrix.
+ * @chainable
+ */
+
+ _main.default.prototype.applyMatrix = function () {
+ var isTypedArray = (arguments.length <= 0 ? undefined : arguments[0]) instanceof Object.getPrototypeOf(Uint8Array);
+ if (Array.isArray(arguments.length <= 0 ? undefined : arguments[0]) || isTypedArray) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).applyMatrix.apply(_this$_renderer, _toConsumableArray(arguments.length <= 0 ? undefined : arguments[0]));
+ } else {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).applyMatrix.apply(_this$_renderer2, arguments);
+ }
+ return this;
+ };
+ /**
+ * Clears all transformations applied to the coordinate system.
+ *
+ * @method resetMatrix
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube rotates slowly against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system a little more each frame.
+ * let angle = frameCount * 0.01;
+ * let ca = cos(angle);
+ * let sa = sin(angle);
+ * applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.resetMatrix = function () {
+ this._renderer.resetMatrix();
+ return this;
+ };
+ /**
+ * Rotates the coordinate system.
+ *
+ * By default, the positive x-axis points to the right and the positive y-axis
+ * points downward. The `rotate()` function changes this orientation by
+ * rotating the coordinate system about the origin. Everything drawn after
+ * `rotate()` is called will appear to be rotated.
+ *
+ * The first parameter, `angle`, is the amount to rotate. For example, calling
+ * `rotate(1)` rotates the coordinate system clockwise 1 radian which is
+ * nearly 57˚. `rotate()` interprets angle values using the current
+ * angleMode().
+ *
+ * The second parameter, `axis`, is optional. It's used to orient 3D rotations
+ * in WebGL mode. If a p5.Vector is passed, as in
+ * `rotate(QUARTER_PI, myVector)`, then the coordinate system will rotate
+ * `QUARTER_PI` radians about `myVector`. If an array of vector components is
+ * passed, as in `rotate(QUARTER_PI, [1, 0, 0])`, then the coordinate system
+ * will rotate `QUARTER_PI` radians about a vector with the components
+ * `[1, 0, 0]`.
+ *
+ * By default, transformations accumulate. For example, calling `rotate(1)`
+ * twice has the same effect as calling `rotate(2)` once. The
+ * push() and pop() functions
+ * can be used to isolate transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `rotate(1)` inside the draw() function won't cause
+ * shapes to spin.
+ *
+ * @method rotate
+ * @param {Number} angle angle of rotation in the current angleMode().
+ * @param {p5.Vector|Number[]} [axis] axis to rotate about in 3D.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw a blue circle at the coordinates (25, 25).
+ * fill('blue');
+ * circle(25, 25, 20);
+ *
+ * // Clear all transformations.
+ * // The origin is now at the top-left corner.
+ * resetMatrix();
+ *
+ * // Draw a red circle at the coordinates (25, 25).
+ * fill('red');
+ * circle(25, 25, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * rotate(QUARTER_PI);
+ *
+ * // Draw a rectangle at coordinates (50, 0).
+ * rect(50, 0, 40, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate the coordinate system 1/16 turn.
+ * rotate(QUARTER_PI / 2);
+ *
+ * // Rotate the coordinate system another 1/16 turn.
+ * rotate(QUARTER_PI / 2);
+ *
+ * // Draw a rectangle at coordinates (50, 0).
+ * rect(50, 0, 40, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * describe(
+ * "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * rotate(45);
+ *
+ * // Draw a rectangle at coordinates (50, 0).
+ * rect(50, 0, 40, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate the coordinate system a little more each frame.
+ * let angle = frameCount * 0.01;
+ * rotate(angle);
+ *
+ * // Draw a rectangle at coordinates (50, 0).
+ * rect(50, 0, 40, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe("A cube on a gray background. The cube's front face points to the top-right.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate the coordinate system 1/8 turn about
+ * // the axis [1, 1, 0].
+ * let axis = createVector(1, 1, 0);
+ * rotate(QUARTER_PI, axis);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rotate = function (angle, axis) {
+ _main.default._validateParameters('rotate', arguments);
+ this._renderer.rotate(this._toRadians(angle), axis);
+ return this;
+ };
+ /**
+ * Rotates the coordinate system about the x-axis in WebGL mode.
+ *
+ * The parameter, `angle`, is the amount to rotate. For example, calling
+ * `rotateX(1)` rotates the coordinate system about the x-axis by 1 radian.
+ * `rotateX()` interprets angle values using the current
+ * angleMode().
+ *
+ * By default, transformations accumulate. For example, calling `rotateX(1)`
+ * twice has the same effect as calling `rotateX(2)` once. The
+ * push() and pop() functions
+ * can be used to isolate transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `rotateX(1)` inside the draw() function won't cause
+ * shapes to spin.
+ *
+ * @method rotateX
+ * @param {Number} angle angle of rotation in the current angleMode().
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe("A cube on a gray background. The cube's front face points to the top-right.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate the coordinate system 1/8 turn about
+ * // the axis [1, 1, 0].
+ * let axis = [1, 1, 0];
+ * rotate(QUARTER_PI, axis);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * rotateX(QUARTER_PI);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/16 turn.
+ * rotateX(QUARTER_PI / 2);
+ *
+ * // Rotate the coordinate system 1/16 turn.
+ * rotateX(QUARTER_PI / 2);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * rotateX(45);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rotateX = function (angle) {
+ this._assert3d('rotateX');
+ _main.default._validateParameters('rotateX', arguments);
+ this._renderer.rotateX(this._toRadians(angle));
+ return this;
+ };
+ /**
+ * Rotates the coordinate system about the y-axis in WebGL mode.
+ *
+ * The parameter, `angle`, is the amount to rotate. For example, calling
+ * `rotateY(1)` rotates the coordinate system about the y-axis by 1 radian.
+ * `rotateY()` interprets angle values using the current
+ * angleMode().
+ *
+ * By default, transformations accumulate. For example, calling `rotateY(1)`
+ * twice has the same effect as calling `rotateY(2)` once. The
+ * push() and pop() functions
+ * can be used to isolate transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `rotateY(1)` inside the draw() function won't cause
+ * shapes to spin.
+ *
+ * @method rotateY
+ * @param {Number} angle angle of rotation in the current angleMode().
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube rotates slowly against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system a little more each frame.
+ * let angle = frameCount * 0.01;
+ * rotateX(angle);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * rotateY(QUARTER_PI);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/16 turn.
+ * rotateY(QUARTER_PI / 2);
+ *
+ * // Rotate the coordinate system 1/16 turn.
+ * rotateY(QUARTER_PI / 2);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * rotateY(45);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rotateY = function (angle) {
+ this._assert3d('rotateY');
+ _main.default._validateParameters('rotateY', arguments);
+ this._renderer.rotateY(this._toRadians(angle));
+ return this;
+ };
+ /**
+ * Rotates the coordinate system about the z-axis in WebGL mode.
+ *
+ * The parameter, `angle`, is the amount to rotate. For example, calling
+ * `rotateZ(1)` rotates the coordinate system about the z-axis by 1 radian.
+ * `rotateZ()` interprets angle values using the current
+ * angleMode().
+ *
+ * By default, transformations accumulate. For example, calling `rotateZ(1)`
+ * twice has the same effect as calling `rotateZ(2)` once. The
+ * push() and pop() functions
+ * can be used to isolate transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `rotateZ(1)` inside the draw() function won't cause
+ * shapes to spin.
+ *
+ * @method rotateZ
+ * @param {Number} angle angle of rotation in the current angleMode().
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube rotates slowly against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system a little more each frame.
+ * let angle = frameCount * 0.01;
+ * rotateY(angle);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * rotateZ(QUARTER_PI);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/16 turn.
+ * rotateZ(QUARTER_PI / 2);
+ *
+ * // Rotate the coordinate system 1/16 turn.
+ * rotateZ(QUARTER_PI / 2);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system 1/8 turn.
+ * rotateZ(45);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rotateZ = function (angle) {
+ this._assert3d('rotateZ');
+ _main.default._validateParameters('rotateZ', arguments);
+ this._renderer.rotateZ(this._toRadians(angle));
+ return this;
+ };
+ /**
+ * Scales the coordinate system.
+ *
+ * By default, shapes are drawn at their original scale. A rectangle that's 50
+ * pixels wide appears to take up half the width of a 100 pixel-wide canvas.
+ * The `scale()` function can shrink or stretch the coordinate system so that
+ * shapes appear at different sizes. There are two ways to call `scale()` with
+ * parameters that set the scale factor(s).
+ *
+ * The first way to call `scale()` uses numbers to set the amount of scaling.
+ * The first parameter, `s`, sets the amount to scale each axis. For example,
+ * calling `scale(2)` stretches the x-, y-, and z-axes by a factor of 2. The
+ * next two parameters, `y` and `z`, are optional. They set the amount to
+ * scale the y- and z-axes. For example, calling `scale(2, 0.5, 1)` stretches
+ * the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and
+ * leaves the z-axis unchanged.
+ *
+ * The second way to call `scale()` uses a p5.Vector
+ * object to set the scale factors. For example, calling `scale(myVector)`
+ * uses the x-, y-, and z-components of `myVector` to set the amount of
+ * scaling along the x-, y-, and z-axes. Doing so is the same as calling
+ * `scale(myVector.x, myVector.y, myVector.z)`.
+ *
+ * By default, transformations accumulate. For example, calling `scale(1)`
+ * twice has the same effect as calling `scale(2)` once. The
+ * push() and pop() functions
+ * can be used to isolate transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `scale(2)` inside the draw() function won't cause
+ * shapes to grow continuously.
+ *
+ * @method scale
+ * @param {Number|p5.Vector|Number[]} s amount to scale along the positive x-axis.
+ * @param {Number} [y] amount to scale along the positive y-axis. Defaults to `s`.
+ * @param {Number} [z] amount to scale along the positive z-axis. Defaults to `y`.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube rotates slowly against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rotate the coordinate system a little more each frame.
+ * let angle = frameCount * 0.01;
+ * rotateZ(angle);
+ *
+ * // Draw a box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a square at (30, 20).
+ * square(30, 20, 40);
+ *
+ * // Scale the coordinate system by a factor of 0.5.
+ * scale(0.5);
+ *
+ * // Draw a square at (30, 20).
+ * // It appears at (15, 10) after scaling.
+ * square(30, 20, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A rectangle and a square drawn in white on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a square at (30, 20).
+ * square(30, 20, 40);
+ *
+ * // Scale the coordinate system by factors of
+ * // 0.5 along the x-axis and
+ * // 1.3 along the y-axis.
+ * scale(0.5, 1.3);
+ *
+ * // Draw a square at (30, 20).
+ * // It appears as a rectangle at (15, 26) after scaling.
+ * square(30, 20, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A rectangle and a square drawn in white on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a square at (30, 20).
+ * square(30, 20, 40);
+ *
+ * // Create a p5.Vector object.
+ * let v = createVector(0.5, 1.3);
+ *
+ * // Scale the coordinate system by factors of
+ * // 0.5 along the x-axis and
+ * // 1.3 along the y-axis.
+ * scale(v);
+ *
+ * // Draw a square at (30, 20).
+ * // It appears as a rectangle at (15, 26) after scaling.
+ * square(30, 20, 40);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method scale
+ * @param {p5.Vector|Number[]} scales vector whose components should be used to scale.
+ * @chainable
+ */
+ _main.default.prototype.scale = function (x, y, z) {
+ _main.default._validateParameters('scale', arguments);
+ // Only check for Vector argument type if Vector is available
+ if (x instanceof _main.default.Vector) {
+ var v = x;
+ x = v.x;
+ y = v.y;
+ z = v.z;
+ } else if (Array.isArray(x)) {
+ var rg = x;
+ x = rg[0];
+ y = rg[1];
+ z = rg[2] || 1;
+ }
+ if (isNaN(y)) {
+ y = z = x;
+ } else if (isNaN(z)) {
+ z = 1;
+ }
+ this._renderer.scale(x, y, z);
+ return this;
+ };
+ /**
+ * Shears the x-axis so that shapes appear skewed.
+ *
+ * By default, the x- and y-axes are perpendicular. The `shearX()` function
+ * transforms the coordinate system so that x-coordinates are translated while
+ * y-coordinates are fixed.
+ *
+ * The first parameter, `angle`, is the amount to shear. For example, calling
+ * `shearX(1)` transforms all x-coordinates using the formula
+ * `x = x + y * tan(angle)`. `shearX()` interprets angle values using the
+ * current angleMode().
+ *
+ * By default, transformations accumulate. For example, calling
+ * `shearX(1)` twice has the same effect as calling `shearX(2)` once. The
+ * push() and
+ * pop() functions can be used to isolate
+ * transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `shearX(1)` inside the draw() function won't
+ * cause shapes to shear continuously.
+ *
+ * @method shearX
+ * @param {Number} angle angle to shear by in the current angleMode().
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the spheres.
+ * noStroke();
+ *
+ * // Draw the red sphere.
+ * fill('red');
+ * box();
+ *
+ * // Scale the coordinate system by factors of
+ * // 0.5 along the x-axis and
+ * // 1.3 along the y-axis and
+ * // 2 along the z-axis.
+ * scale(0.5, 1.3, 2);
+ *
+ * // Draw the blue sphere.
+ * fill('blue');
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white quadrilateral on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Shear the coordinate system along the x-axis.
+ * shearX(QUARTER_PI);
+ *
+ * // Draw the square.
+ * square(0, 0, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.shearX = function (angle) {
+ _main.default._validateParameters('shearX', arguments);
+ var rad = this._toRadians(angle);
+ this._renderer.applyMatrix(1, 0, Math.tan(rad), 1, 0, 0);
+ return this;
+ };
+ /**
+ * Shears the y-axis so that shapes appear skewed.
+ *
+ * By default, the x- and y-axes are perpendicular. The `shearY()` function
+ * transforms the coordinate system so that y-coordinates are translated while
+ * x-coordinates are fixed.
+ *
+ * The first parameter, `angle`, is the amount to shear. For example, calling
+ * `shearY(1)` transforms all y-coordinates using the formula
+ * `y = y + x * tan(angle)`. `shearY()` interprets angle values using the
+ * current angleMode().
+ *
+ * By default, transformations accumulate. For example, calling
+ * `shearY(1)` twice has the same effect as calling `shearY(2)` once. The
+ * push() and
+ * pop() functions can be used to isolate
+ * transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `shearY(1)` inside the draw() function won't
+ * cause shapes to shear continuously.
+ *
+ * @method shearY
+ * @param {Number} angle angle to shear by in the current angleMode().
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * describe('A white quadrilateral on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Shear the coordinate system along the x-axis.
+ * shearX(45);
+ *
+ * // Draw the square.
+ * square(0, 0, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white quadrilateral on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Shear the coordinate system along the x-axis.
+ * shearY(QUARTER_PI);
+ *
+ * // Draw the square.
+ * square(0, 0, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.shearY = function (angle) {
+ _main.default._validateParameters('shearY', arguments);
+ var rad = this._toRadians(angle);
+ this._renderer.applyMatrix(1, Math.tan(rad), 0, 1, 0, 0);
+ return this;
+ };
+ /**
+ * Translates the coordinate system.
+ *
+ * By default, the origin `(0, 0)` is at the sketch's top-left corner in 2D
+ * mode and center in WebGL mode. The `translate()` function shifts the origin
+ * to a different position. Everything drawn after `translate()` is called
+ * will appear to be shifted. There are two ways to call `translate()` with
+ * parameters that set the origin's position.
+ *
+ * The first way to call `translate()` uses numbers to set the amount of
+ * translation. The first two parameters, `x` and `y`, set the amount to
+ * translate along the positive x- and y-axes. For example, calling
+ * `translate(20, 30)` translates the origin 20 pixels along the x-axis and 30
+ * pixels along the y-axis. The third parameter, `z`, is optional. It sets the
+ * amount to translate along the positive z-axis. For example, calling
+ * `translate(20, 30, 40)` translates the origin 20 pixels along the x-axis,
+ * 30 pixels along the y-axis, and 40 pixels along the z-axis.
+ *
+ * The second way to call `translate()` uses a
+ * p5.Vector object to set the amount of
+ * translation. For example, calling `translate(myVector)` uses the x-, y-,
+ * and z-components of `myVector` to set the amount to translate along the x-,
+ * y-, and z-axes. Doing so is the same as calling
+ * `translate(myVector.x, myVector.y, myVector.z)`.
+ *
+ * By default, transformations accumulate. For example, calling
+ * `translate(10, 0)` twice has the same effect as calling
+ * `translate(20, 0)` once. The push() and
+ * pop() functions can be used to isolate
+ * transformations within distinct drawing groups.
+ *
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `translate(10, 0)` inside the draw() function won't
+ * cause shapes to move continuously.
+ *
+ * @method translate
+ * @param {Number} x amount to translate along the positive x-axis.
+ * @param {Number} y amount to translate along the positive y-axis.
+ * @param {Number} [z] amount to translate along the positive z-axis.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * describe('A white quadrilateral on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Shear the coordinate system along the x-axis.
+ * shearY(45);
+ *
+ * // Draw the square.
+ * square(0, 0, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw a circle at coordinates (0, 0).
+ * circle(0, 0, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Draw the red circle.
+ * fill('red');
+ * circle(0, 0, 40);
+ *
+ * // Translate the origin to the right.
+ * translate(25, 0);
+ *
+ * // Draw the blue circle.
+ * fill('blue');
+ * circle(0, 0, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle moves slowly from left to right on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the x-coordinate.
+ * let x = frameCount * 0.2;
+ *
+ * // Translate the origin.
+ * translate(x, 50);
+ *
+ * // Draw a circle at coordinates (0, 0).
+ * circle(0, 0, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a p5.Vector object.
+ * let v = createVector(50, 50);
+ *
+ * // Translate the origin by the vector.
+ * translate(v);
+ *
+ * // Draw a circle at coordinates (0, 0).
+ * circle(0, 0, 40);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method translate
+ * @param {p5.Vector} vector vector by which to translate.
+ * @chainable
+ */
+ _main.default.prototype.translate = function (x, y, z) {
+ _main.default._validateParameters('translate', arguments);
+ if (this._renderer.isP3D) {
+ this._renderer.translate(x, y, z);
+ } else {
+ this._renderer.translate(x, y);
+ }
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ './main': 303,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint8-array': 257,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 317: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.ends-with');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.ends-with');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @module Data
+ * @submodule LocalStorage
+ * @requires core
+ *
+ * This module defines the p5 methods for working with local storage
+ */
+ /**
+ * Stores a value in the web browser's local storage.
+ *
+ * Web browsers can save small amounts of data using the built-in
+ * localStorage object.
+ * Data stored in `localStorage` can be retrieved at any point, even after
+ * refreshing a page or restarting the browser. Data are stored as key-value
+ * pairs.
+ *
+ * `storeItem()` makes it easy to store values in `localStorage` and
+ * getItem() makes it easy to retrieve them.
+ *
+ * The first parameter, `key`, is the name of the value to be stored as a
+ * string.
+ *
+ * The second parameter, `value`, is the value to be stored. Values can have
+ * any type.
+ *
+ * Note: Sensitive data such as passwords or personal information shouldn't be
+ * stored in `localStorage`.
+ *
+ * @method storeItem
+ * @for p5
+ * @param {String} key name of the value.
+ * @param {String|Number|Boolean|Object|Array} value value to be stored.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the spheres.
+ * noStroke();
+ *
+ * // Draw the red sphere.
+ * fill('red');
+ * sphere(10);
+ *
+ * // Translate the origin to the right.
+ * translate(30, 0, 0);
+ *
+ * // Draw the blue sphere.
+ * fill('blue');
+ * sphere(10);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Store the player's name.
+ * storeItem('name', 'Feist');
+ *
+ * // Store the player's score.
+ * storeItem('score', 1234);
+ *
+ * describe('The text "Feist: 1234" written in black on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Retrieve the name.
+ * let name = getItem('name');
+ *
+ * // Retrieve the score.
+ * let score = getItem('score');
+ *
+ * // Display the score.
+ * text(`${name}: ${score}`, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Color object.
+ * let c = color('deeppink');
+ *
+ * // Store the object.
+ * storeItem('color', c);
+ *
+ * describe('A pink circle on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Retrieve the object.
+ * let c = getItem('color');
+ *
+ * // Style the circle.
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(50, 50, 30);
+ * }
+ *
+ *
+ */
+
+ _main.default.prototype.storeItem = function (key, value) {
+ if (typeof key !== 'string') {
+ console.log('The argument that you passed to storeItem() - '.concat(key, ' is not a string.'));
+ }
+ if (key.endsWith('p5TypeID')) {
+ console.log('The argument that you passed to storeItem() - '.concat(key, ' must not end with \'p5TypeID\'.'));
+ }
+ if (typeof value === 'undefined') {
+ console.log('You cannot store undefined variables using storeItem().');
+ }
+ var type = _typeof(value);
+ switch (type) {
+ case 'number':
+ case 'boolean':
+ value = value.toString();
+ break;
+ case 'object':
+ if (value instanceof _main.default.Color) {
+ type = 'p5.Color';
+ } else if (value instanceof _main.default.Vector) {
+ type = 'p5.Vector';
+ var coord = [
+ value.x,
+ value.y,
+ value.z
+ ];
+ value = coord;
+ }
+ value = JSON.stringify(value);
+ break;
+ case 'string':
+ default:
+ break;
+ }
+ localStorage.setItem(key, value);
+ var typeKey = ''.concat(key, 'p5TypeID');
+ localStorage.setItem(typeKey, type);
+ };
+ /**
+ * Returns a value in the web browser's local storage.
+ *
+ * Web browsers can save small amounts of data using the built-in
+ * localStorage object.
+ * Data stored in `localStorage` can be retrieved at any point, even after
+ * refreshing a page or restarting the browser. Data are stored as key-value
+ * pairs.
+ *
+ * storeItem() makes it easy to store values in
+ * `localStorage` and `getItem()` makes it easy to retrieve them.
+ *
+ * The first parameter, `key`, is the name of the value to be stored as a
+ * string.
+ *
+ * The second parameter, `value`, is the value to be retrieved a string. For
+ * example, calling `getItem('size')` retrieves the value with the key `size`.
+ *
+ * Note: Sensitive data such as passwords or personal information shouldn't be
+ * stored in `localStorage`.
+ *
+ * @method getItem
+ * @for p5
+ * @param {String} key name of the value.
+ * @return {String|Number|Boolean|Object|Array} stored item.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create an object.
+ * let p = { x: 50, y: 50 };
+ *
+ * // Store the object.
+ * storeItem('position', p);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Retrieve the object.
+ * let p = getItem('position');
+ *
+ * // Draw the circle.
+ * circle(p.x, p.y, 30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Store the player's name.
+ * storeItem('name', 'Feist');
+ *
+ * // Store the player's score.
+ * storeItem('score', 1234);
+ *
+ * describe('The text "Feist: 1234" written in black on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Retrieve the name.
+ * let name = getItem('name');
+ *
+ * // Retrieve the score.
+ * let score = getItem('score');
+ *
+ * // Display the score.
+ * text(`${name}: ${score}`, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create an object.
+ * let p = { x: 50, y: 50 };
+ *
+ * // Store the object.
+ * storeItem('position', p);
+ *
+ * describe('A white circle on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Retrieve the object.
+ * let p = getItem('position');
+ *
+ * // Draw the circle.
+ * circle(p.x, p.y, 30);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.getItem = function (key) {
+ var value = localStorage.getItem(key);
+ var type = localStorage.getItem(''.concat(key, 'p5TypeID'));
+ if (typeof type === 'undefined') {
+ console.log('Unable to determine type of item stored under '.concat(key, 'in local storage. Did you save the item with something other than setItem()?'));
+ } else if (value !== null) {
+ switch (type) {
+ case 'number':
+ value = parseFloat(value);
+ break;
+ case 'boolean':
+ value = value === 'true';
+ break;
+ case 'object':
+ value = JSON.parse(value);
+ break;
+ case 'p5.Color':
+ value = JSON.parse(value);
+ value = this.color.apply(this, _toConsumableArray(value.levels));
+ break;
+ case 'p5.Vector':
+ value = JSON.parse(value);
+ value = this.createVector.apply(this, _toConsumableArray(value));
+ break;
+ case 'string':
+ default:
+ break;
+ }
+ }
+ return value;
+ };
+ /**
+ * Removes all items in the web browser's local storage.
+ *
+ * Web browsers can save small amounts of data using the built-in
+ * localStorage object.
+ * Data stored in `localStorage` can be retrieved at any point, even after
+ * refreshing a page or restarting the browser. Data are stored as key-value
+ * pairs. Calling `clearStorage()` removes all data from `localStorage`.
+ *
+ * Note: Sensitive data such as passwords or personal information shouldn't be
+ * stored in `localStorage`.
+ *
+ * @method clearStorage
+ * @for p5
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Color object.
+ * let c = color('deeppink');
+ *
+ * // Store the object.
+ * storeItem('color', c);
+ *
+ * describe('A pink circle on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Retrieve the object.
+ * let c = getItem('color');
+ *
+ * // Style the circle.
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(50, 50, 30);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.clearStorage = function () {
+ var _this = this;
+ var keys = Object.keys(localStorage);
+ keys.forEach(function (key) {
+ if (key.endsWith('p5TypeID')) {
+ _this.removeItem(key.replace('p5TypeID', ''));
+ }
+ });
+ };
+ /**
+ * Removes an item from the web browser's local storage.
+ *
+ * Web browsers can save small amounts of data using the built-in
+ * localStorage object.
+ * Data stored in `localStorage` can be retrieved at any point, even after
+ * refreshing a page or restarting the browser. Data are stored as key-value
+ * pairs.
+ *
+ * storeItem() makes it easy to store values in
+ * `localStorage` and `removeItem()` makes it easy to delete them.
+ *
+ * The parameter, `key`, is the name of the value to remove as a string. For
+ * example, calling `removeItem('size')` removes the item with the key `size`.
+ *
+ * Note: Sensitive data such as passwords or personal information shouldn't be
+ * stored in `localStorage`.
+ *
+ * @method removeItem
+ * @param {String} key name of the value to remove.
+ * @for p5
+ *
+ * @example
+ *
+ * // Double-click to clear localStorage.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Store the player's name.
+ * storeItem('name', 'Feist');
+ *
+ * // Store the player's score.
+ * storeItem('score', 1234);
+ *
+ * describe(
+ * 'The text "Feist: 1234" written in black on a gray background. The text "null: null" appears when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Retrieve the name.
+ * let name = getItem('name');
+ *
+ * // Retrieve the score.
+ * let score = getItem('score');
+ *
+ * // Display the score.
+ * text(`${name}: ${score}`, 50, 50);
+ * }
+ *
+ * // Clear localStorage when the user double-clicks.
+ * function doubleClicked() {
+ * clearStorage();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.removeItem = function (key) {
+ if (typeof key !== 'string') {
+ console.log('The argument that you passed to removeItem() - '.concat(key, ' is not a string.'));
+ }
+ localStorage.removeItem(key);
+ localStorage.removeItem(''.concat(key, 'p5TypeID'));
+ };
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.keys': 204,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.ends-with': 213,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.for-each': 260,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 318: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.object.keys');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Data
+ * @submodule Dictionary
+ * @for p5.TypedDict
+ * @requires core
+ *
+ * This module defines the p5 methods for the p5 Dictionary classes.
+ * The classes StringDict and NumberDict are for storing and working
+ * with key-value pairs.
+ */
+ /**
+ *
+ * Creates a new instance of p5.StringDict using the key-value pair
+ * or the object you provide.
+ *
+ * @method createStringDict
+ * @for p5
+ * @param {String} key
+ * @param {String} value
+ * @return {p5.StringDict}
+ *
+ * @example
+ *
+ * // Double-click to remove an item from localStorage.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Store the player's name.
+ * storeItem('name', 'Feist');
+ *
+ * // Store the player's score.
+ * storeItem('score', 1234);
+ *
+ * describe(
+ * 'The text "Feist: 1234" written in black on a gray background. The text "Feist: null" appears when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Retrieve the name.
+ * let name = getItem('name');
+ *
+ * // Retrieve the score.
+ * let score = getItem('score');
+ *
+ * // Display the score.
+ * text(`${name}: ${score}`, 50, 50);
+ * }
+ *
+ * // Remove the word from localStorage when the user double-clicks.
+ * function doubleClicked() {
+ * removeItem('score');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method createStringDict
+ * @param {Object} object object
+ * @return {p5.StringDict}
+ */
+
+ _main.default.prototype.createStringDict = function (key, value) {
+ _main.default._validateParameters('createStringDict', arguments);
+ return new _main.default.StringDict(key, value);
+ };
+ /**
+ *
+ * Creates a new instance of p5.NumberDict using the key-value pair
+ * or object you provide.
+ *
+ * @method createNumberDict
+ * @for p5
+ * @param {Number} key
+ * @param {Number} value
+ * @return {p5.NumberDict}
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // logs true to console
+ *
+ * let anotherDictionary = createStringDict({ happy: 'coding' });
+ * print(anotherDictionary.hasKey('happy')); // logs true to console
+ * }
+ *
+ *
+ */
+ /**
+ * @method createNumberDict
+ * @param {Object} object object
+ * @return {p5.NumberDict}
+ */
+ _main.default.prototype.createNumberDict = function (key, value) {
+ _main.default._validateParameters('createNumberDict', arguments);
+ return new _main.default.NumberDict(key, value);
+ };
+ /**
+ *
+ * Base class for all p5.Dictionary types. Specifically
+ * typed Dictionary classes inherit from this class.
+ *
+ * @class p5.TypedDict
+ * @constructor
+ */
+ _main.default.TypedDict = /*#__PURE__*/ function () {
+ function TypedDict(key, value) {
+ _classCallCheck(this, TypedDict);
+ if (key instanceof Object) {
+ this.data = key;
+ } else {
+ this.data = {
+ };
+ this.data[key] = value;
+ }
+ return this;
+ } /**
+ * Returns the number of key-value pairs currently stored in the Dictionary.
+ *
+ * @method size
+ * @return {Integer} the number of key-value pairs in the Dictionary
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(100, 42);
+ * print(myDictionary.hasKey(100)); // logs true to console
+ *
+ * let anotherDictionary = createNumberDict({ 200: 84 });
+ * print(anotherDictionary.hasKey(200)); // logs true to console
+ * }
+ *
+ *
+ */
+
+ _createClass(TypedDict, [
+ {
+ key: 'size',
+ value: function size() {
+ return Object.keys(this.data).length;
+ } /**
+ * Returns true if the given key exists in the Dictionary,
+ * otherwise returns false.
+ *
+ * @method hasKey
+ * @param {Number|String} key that you want to look up
+ * @return {Boolean} whether that key exists in Dictionary
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(1, 10);
+ * myDictionary.create(2, 20);
+ * myDictionary.create(3, 30);
+ * print(myDictionary.size()); // logs 3 to the console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'hasKey',
+ value: function hasKey(key) {
+ return this.data.hasOwnProperty(key);
+ } /**
+ * Returns the value stored at the given key.
+ *
+ * @method get
+ * @param {Number|String} the key you want to access
+ * @return {Number|String} the value stored at that key
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // logs true to console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(key) {
+ if (this.data.hasOwnProperty(key)) {
+ return this.data[key];
+ } else {
+ console.log(''.concat(key, ' does not exist in this Dictionary'));
+ }
+ } /**
+ * Updates the value associated with the given key in case it already exists
+ * in the Dictionary. Otherwise a new key-value pair is added.
+ *
+ * @method set
+ * @param {Number|String} key
+ * @param {Number|String} value
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * let myValue = myDictionary.get('p5');
+ * print(myValue === 'js'); // logs true to console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(key, value) {
+ if (this._validate(value)) {
+ this.data[key] = value;
+ } else {
+ console.log('Those values dont work for this dictionary type.');
+ }
+ } /**
+ * private helper function to handle the user passing in objects
+ * during construction or calls to create()
+ */
+
+ },
+ {
+ key: '_addObj',
+ value: function _addObj(obj) {
+ for (var key in obj) {
+ this.set(key, obj[key]);
+ }
+ } /**
+ * Creates a new key-value pair in the Dictionary.
+ *
+ * @method create
+ * @param {Number|String} key
+ * @param {Number|String} value
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.set('p5', 'JS');
+ * myDictionary.print(); // logs "key: p5 - value: JS" to console
+ * }
+ *
+ *
+ */
+ /**
+ * @method create
+ * @param {Object} obj key/value pair
+ */
+
+ },
+ {
+ key: 'create',
+ value: function create(key, value) {
+ if (key instanceof Object && typeof value === 'undefined') {
+ this._addObj(key);
+ } else if (typeof key !== 'undefined') {
+ this.set(key, value);
+ } else {
+ console.log('In order to create a new Dictionary entry you must pass ' + 'an object or a key, value pair');
+ }
+ } /**
+ * Removes all previously stored key-value pairs from the Dictionary.
+ *
+ * @method clear
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'clear',
+ value: function clear() {
+ this.data = {
+ };
+ } /**
+ * Removes the key-value pair stored at the given key from the Dictionary.
+ *
+ * @method remove
+ * @param {Number|String} key for the pair to remove
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // prints 'true'
+ * myDictionary.clear();
+ * print(myDictionary.hasKey('p5')); // prints 'false'
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'remove',
+ value: function remove(key) {
+ if (this.data.hasOwnProperty(key)) {
+ delete this.data[key];
+ } else {
+ throw new Error(''.concat(key, ' does not exist in this Dictionary'));
+ }
+ } /**
+ * Logs the set of items currently stored in the Dictionary to the console.
+ *
+ * @method print
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * myDictionary.remove('p5');
+ * myDictionary.print();
+ * // above logs "key: happy value: coding" to console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'print',
+ value: function print() {
+ for (var item in this.data) {
+ console.log('key:'.concat(item, ' value:').concat(this.data[item]));
+ }
+ } /**
+ * Converts the Dictionary into a CSV file for local download.
+ *
+ * @method saveTable
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'saveTable',
+ value: function saveTable(filename) {
+ var output = '';
+ for (var key in this.data) {
+ output += ''.concat(key, ',').concat(this.data[key], '\n');
+ }
+ var blob = new Blob([output], {
+ type: 'text/csv'
+ });
+ _main.default.prototype.downloadFile(blob, filename || 'mycsv', 'csv');
+ } /**
+ * Converts the Dictionary into a JSON file for local download.
+ *
+ * @method saveJSON
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * createStringDict({
+ * john: 1940,
+ * paul: 1942,
+ * george: 1943,
+ * ringo: 1940
+ * }).saveTable('beatles');
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'saveJSON',
+ value: function saveJSON(filename, opt) {
+ _main.default.prototype.saveJSON(this.data, filename, opt);
+ } /**
+ * private helper function to ensure that the user passed in valid
+ * values for the Dictionary type
+ */
+
+ },
+ {
+ key: '_validate',
+ value: function _validate(value) {
+ return true;
+ }
+ }
+ ]);
+ return TypedDict;
+ }();
+ /**
+ *
+ * A simple Dictionary class for Strings.
+ *
+ * @class p5.StringDict
+ * @extends p5.TypedDict
+ */
+ _main.default.StringDict = /*#__PURE__*/ function (_p5$TypedDict) {
+ _inherits(StringDict, _p5$TypedDict);
+ var _super = _createSuper(StringDict);
+ function StringDict() {
+ _classCallCheck(this, StringDict);
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ return _super.call.apply(_super, [
+ this
+ ].concat(args));
+ }
+ _createClass(StringDict, [
+ {
+ key: '_validate',
+ value: function _validate(value) {
+ return typeof value === 'string';
+ }
+ }
+ ]);
+ return StringDict;
+ }(_main.default.TypedDict);
+ /**
+ *
+ * A simple Dictionary class for Numbers.
+ *
+ * @class p5.NumberDict
+ * @constructor
+ * @extends p5.TypedDict
+ */
+ _main.default.NumberDict = /*#__PURE__*/ function (_p5$TypedDict2) {
+ _inherits(NumberDict, _p5$TypedDict2);
+ var _super2 = _createSuper(NumberDict);
+ function NumberDict() {
+ _classCallCheck(this, NumberDict);
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ return _super2.call.apply(_super2, [
+ this
+ ].concat(args));
+ } /**
+ * private helper function to ensure that the user passed in valid
+ * values for the Dictionary type
+ */
+
+ _createClass(NumberDict, [
+ {
+ key: '_validate',
+ value: function _validate(value) {
+ return typeof value === 'number';
+ } /**
+ * Add the given number to the value currently stored at the given key.
+ * The sum then replaces the value previously stored in the Dictionary.
+ *
+ * @method add
+ * @param {Number} Key for the value you wish to add to
+ * @param {Number} Number to add to the value
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * createStringDict({
+ * john: 1940,
+ * paul: 1942,
+ * george: 1943,
+ * ringo: 1940
+ * }).saveJSON('beatles');
+ * }
+ * }
+ *
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'add',
+ value: function add(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] += amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ } /**
+ * Subtract the given number from the value currently stored at the given key.
+ * The difference then replaces the value previously stored in the Dictionary.
+ *
+ * @method sub
+ * @param {Number} Key for the value you wish to subtract from
+ * @param {Number} Number to subtract from the value
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.add(2, 2);
+ * print(myDictionary.get(2)); // logs 7 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'sub',
+ value: function sub(key, amount) {
+ this.add(key, - amount);
+ } /**
+ * Multiply the given number with the value currently stored at the given key.
+ * The product then replaces the value previously stored in the Dictionary.
+ *
+ * @method mult
+ * @param {Number} Key for value you wish to multiply
+ * @param {Number} Amount to multiply the value by
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.sub(2, 2);
+ * print(myDictionary.get(2)); // logs 3 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mult',
+ value: function mult(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] *= amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ } /**
+ * Divide the given number with the value currently stored at the given key.
+ * The quotient then replaces the value previously stored in the Dictionary.
+ *
+ * @method div
+ * @param {Number} Key for value you wish to divide
+ * @param {Number} Amount to divide the value by
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 4);
+ * myDictionary.mult(2, 2);
+ * print(myDictionary.get(2)); // logs 8 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'div',
+ value: function div(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] /= amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ } /**
+ * private helper function for finding lowest or highest value
+ * the argument 'flip' is used to flip the comparison arrow
+ * from 'less than' to 'greater than'
+ */
+
+ },
+ {
+ key: '_valueTest',
+ value: function _valueTest(flip) {
+ if (Object.keys(this.data).length === 0) {
+ throw new Error('Unable to search for a minimum or maximum value on an empty NumberDict');
+ } else if (Object.keys(this.data).length === 1) {
+ return this.data[Object.keys(this.data) [0]];
+ } else {
+ var result = this.data[Object.keys(this.data) [0]];
+ for (var key in this.data) {
+ if (this.data[key] * flip < result * flip) {
+ result = this.data[key];
+ }
+ }
+ return result;
+ }
+ } /**
+ * Return the lowest number currently stored in the Dictionary.
+ *
+ * @method minValue
+ * @return {Number}
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 8);
+ * myDictionary.div(2, 2);
+ * print(myDictionary.get(2)); // logs 4 to console.
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'minValue',
+ value: function minValue() {
+ return this._valueTest(1);
+ } /**
+ * Return the highest number currently stored in the Dictionary.
+ *
+ * @method maxValue
+ * @return {Number}
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let lowestValue = myDictionary.minValue(); // value is -10
+ * print(lowestValue);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'maxValue',
+ value: function maxValue() {
+ return this._valueTest( - 1);
+ } /**
+ * private helper function for finding lowest or highest key
+ * the argument 'flip' is used to flip the comparison arrow
+ * from 'less than' to 'greater than'
+ */
+
+ },
+ {
+ key: '_keyTest',
+ value: function _keyTest(flip) {
+ if (Object.keys(this.data).length === 0) {
+ throw new Error('Unable to use minValue on an empty NumberDict');
+ } else if (Object.keys(this.data).length === 1) {
+ return Object.keys(this.data) [0];
+ } else {
+ var result = Object.keys(this.data) [0];
+ for (var i = 1; i < Object.keys(this.data).length; i++) {
+ if (Object.keys(this.data) [i] * flip < result * flip) {
+ result = Object.keys(this.data) [i];
+ }
+ }
+ return result;
+ }
+ } /**
+ * Return the lowest key currently used in the Dictionary.
+ *
+ * @method minKey
+ * @return {Number}
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let highestValue = myDictionary.maxValue(); // value is 3
+ * print(highestValue);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'minKey',
+ value: function minKey() {
+ return this._keyTest(1);
+ } /**
+ * Return the highest key currently used in the Dictionary.
+ *
+ * @method maxKey
+ * @return {Number}
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let lowestKey = myDictionary.minKey(); // value is 1.2
+ * print(lowestKey);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'maxKey',
+ value: function maxKey() {
+ return this._keyTest( - 1);
+ }
+ }
+ ]);
+ return NumberDict;
+ }(_main.default.TypedDict);
+ var _default = _main.default.TypedDict;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.keys': 204,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 319: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/web.url');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/web.url');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * The web is much more than just canvas and the DOM functionality makes it easy to interact
+ * with other HTML5 objects, including text, hyperlink, image, input, video,
+ * audio, and webcam.
+ * There is a set of creation methods, DOM manipulation methods, and
+ * an extended p5.Element that supports a range of HTML elements. See the
+ *
+ * beyond the canvas tutorial for a full overview of how this addon works.
+ *
+ * See tutorial: beyond the canvas
+ * for more info on how to use this library.
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let highestKey = myDictionary.maxKey(); // value is 4
+ * print(highestKey);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ *
+ * // Select the canvas by its tag.
+ * let cnv = select('canvas');
+ * cnv.style('border', '5px deeppink dashed');
+ *
+ * describe('A gray square with a dashed pink border.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ *
+ * // Add a class attribute to the canvas.
+ * cnv.class('pinkborder');
+ *
+ * background(200);
+ *
+ * // Select the canvas by its class.
+ * cnv = select('.pinkborder');
+ *
+ * // Style its border.
+ * cnv.style('border', '5px deeppink dashed');
+ *
+ * describe('A gray square with a dashed pink border.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.select = function (e, p) {
+ _main.default._validateParameters('select', arguments);
+ var container = this._getContainer(p);
+ var res = container.querySelector(e);
+ if (res) {
+ return this._wrapElement(res);
+ } else {
+ return null;
+ }
+ };
+ /**
+ * Searches the page for all elements that matches the given
+ * CSS selector string.
+ *
+ * The selector string can be an ID, class, tag name, or a combination.
+ * `selectAll()` returns an array of p5.Element
+ * objects if it finds any matches and an empty array if none are found.
+ *
+ * The second parameter, `container`, is optional. It specifies a container to
+ * search within. `container` can be CSS selector string, a
+ * p5.Element object, or an
+ * HTMLElement object.
+ *
+ * @method selectAll
+ * @param {String} selectors CSS selector string of element to search for.
+ * @param {String|p5.Element|HTMLElement} [container] CSS selector string, p5.Element, or
+ * HTMLElement to search within.
+ * @return {p5.Element[]} array of p5.Elements containing any elements found.
+ *
+ * @example
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ *
+ * // Set the canvas' ID.
+ * cnv.id('mycanvas');
+ *
+ * background(200);
+ *
+ * // Select the canvas by its ID.
+ * cnv = select('#mycanvas');
+ *
+ * // Style its border.
+ * cnv.style('border', '5px deeppink dashed');
+ *
+ * describe('A gray square with a dashed pink border.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create three buttons.
+ * createButton('1');
+ * createButton('2');
+ * createButton('3');
+ *
+ * // Select the buttons by their tag.
+ * let buttons = selectAll('button');
+ *
+ * // Position the buttons.
+ * for (let i = 0; i < 3; i += 1) {
+ * buttons[i].position(0, i * 30);
+ * }
+ *
+ * describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.selectAll = function (e, p) {
+ _main.default._validateParameters('selectAll', arguments);
+ var arr = [
+ ];
+ var container = this._getContainer(p);
+ var res = container.querySelectorAll(e);
+ if (res) {
+ for (var j = 0; j < res.length; j++) {
+ var obj = this._wrapElement(res[j]);
+ arr.push(obj);
+ }
+ }
+ return arr;
+ };
+ /**
+ * Helper function for select and selectAll
+ */
+ _main.default.prototype._getContainer = function (p) {
+ var container = document;
+ if (typeof p === 'string') {
+ container = document.querySelector(p) || document;
+ } else if (p instanceof _main.default.Element) {
+ container = p.elt;
+ } else if (p instanceof HTMLElement) {
+ container = p;
+ }
+ return container;
+ };
+ /**
+ * Helper function for getElement and getElements.
+ */
+ _main.default.prototype._wrapElement = function (elt) {
+ var children = Array.prototype.slice.call(elt.children);
+ if (elt.tagName === 'INPUT' && elt.type === 'checkbox') {
+ var converted = new _main.default.Element(elt, this);
+ converted.checked = function () {
+ if (arguments.length === 0) {
+ return this.elt.checked;
+ } else if (arguments.length <= 0 ? undefined : arguments[0]) {
+ this.elt.checked = true;
+ } else {
+ this.elt.checked = false;
+ }
+ return this;
+ };
+ return converted;
+ } else if (elt.tagName === 'VIDEO' || elt.tagName === 'AUDIO') {
+ return new _main.default.MediaElement(elt, this);
+ } else if (elt.tagName === 'SELECT') {
+ return this.createSelect(new _main.default.Element(elt, this));
+ } else if (children.length > 0 && children.every(function (c) {
+ return c.tagName === 'INPUT' || c.tagName === 'LABEL';
+ })) {
+ return this.createRadio(new _main.default.Element(elt, this));
+ } else {
+ return new _main.default.Element(elt, this);
+ }
+ };
+ /**
+ * Removes all elements created by p5.js, including any event handlers.
+ *
+ * There are two exceptions:
+ * canvas elements created by createCanvas()
+ * and p5.Render objects created by
+ * createGraphics().
+ *
+ * @method removeElements
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create three buttons and position them.
+ * let b1 = createButton('1');
+ * b1.position(0, 0);
+ * let b2 = createButton('2');
+ * b2.position(0, 30);
+ * let b3 = createButton('3');
+ * b3.position(0, 60);
+ *
+ * // Add a class attribute to each button.
+ * b1.class('btn');
+ * b2.class('btn btn-pink');
+ * b3.class('btn');
+ *
+ * // Select the buttons by their class.
+ * let buttons = selectAll('.btn');
+ * let pinkButtons = selectAll('.btn-pink');
+ *
+ * // Style the selected buttons.
+ * buttons.forEach(setFont);
+ * pinkButtons.forEach(setColor);
+ *
+ * describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.');
+ * }
+ *
+ * // Set a button's font to Comic Sans MS.
+ * function setFont(btn) {
+ * btn.style('font-family', 'Comic Sans MS');
+ * }
+ *
+ * // Set a button's background and font color.
+ * function setColor(btn) {
+ * btn.style('background', 'deeppink');
+ * btn.style('color', 'white');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a paragraph element and place
+ * // it in the middle of the canvas.
+ * let p = createP('p5*js');
+ * p.position(25, 25);
+ *
+ * describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.');
+ * }
+ *
+ * // Remove all elements when the mouse is pressed.
+ * function mousePressed() {
+ * removeElements();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.removeElements = function (e) {
+ _main.default._validateParameters('removeElements', arguments);
+ // el.remove splices from this._elements, so don't mix iteration with it
+ var isNotCanvasElement = function isNotCanvasElement(el) {
+ return !(el.elt instanceof HTMLCanvasElement);
+ };
+ var removeableElements = this._elements.filter(isNotCanvasElement);
+ removeableElements.map(function (el) {
+ return el.remove();
+ });
+ };
+ /**
+ * Calls a function when the element changes.
+ *
+ * Calling `myElement.changed(false)` disables the function.
+ *
+ * @method changed
+ * @param {Function|Boolean} fxn function to call when the element changes.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * let slider;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a paragraph element and place
+ * // it at the top of the canvas.
+ * let p = createP('p5*js');
+ * p.position(25, 25);
+ *
+ * // Create a slider element and place it
+ * // beneath the canvas.
+ * slider = createSlider(0, 255, 200);
+ * slider.position(0, 100);
+ *
+ * describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');
+ * }
+ *
+ * function draw() {
+ * // Use the slider value to change the background color.
+ * let g = slider.value();
+ * background(g);
+ * }
+ *
+ * // Remove all elements when the mouse is double-clicked.
+ * function doubleClicked() {
+ * removeElements();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let dropdown;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a dropdown menu and add a few color options.
+ * dropdown = createSelect();
+ * dropdown.position(0, 0);
+ * dropdown.option('red');
+ * dropdown.option('green');
+ * dropdown.option('blue');
+ *
+ * // Call paintBackground() when the color option changes.
+ * dropdown.changed(paintBackground);
+ *
+ * describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');
+ * }
+ *
+ * // Paint the background with the selected color.
+ * function paintBackground() {
+ * let c = dropdown.value();
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.changed = function (fxn) {
+ _main.default.Element._adjustListener('change', fxn, this);
+ return this;
+ };
+ /**
+ * Calls a function when the element receives input.
+ *
+ * `myElement.input()` is often used to with text inputs and sliders. Calling
+ * `myElement.input(false)` disables the function.
+ *
+ * @method input
+ * @param {Function|Boolean} fxn function to call when input is detected within
+ * the element.
+ * `false` disables the function.
+ * @chainable
+ *
+ * @example
+ *
+ * let checkbox;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a checkbox and place it beneath the canvas.
+ * checkbox = createCheckbox(' circle');
+ * checkbox.position(0, 100);
+ *
+ * // Call repaint() when the checkbox changes.
+ * checkbox.changed(repaint);
+ *
+ * describe('A gray square with a checkbox underneath it that says "circle". A white circle appears when the box is checked and disappears otherwise.');
+ * }
+ *
+ * // Paint the background gray and determine whether to draw a circle.
+ * function repaint() {
+ * background(200);
+ * if (checkbox.checked() === true) {
+ * circle(50, 50, 30);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let slider;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a slider and place it beneath the canvas.
+ * slider = createSlider(0, 255, 200);
+ * slider.position(0, 100);
+ *
+ * // Call repaint() when the slider changes.
+ * slider.input(repaint);
+ *
+ * describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');
+ * }
+ *
+ * // Paint the background using slider's value.
+ * function repaint() {
+ * let g = slider.value();
+ * background(g);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.input = function (fxn) {
+ _main.default.Element._adjustListener('input', fxn, this);
+ return this;
+ };
+ /**
+ * Helpers for create methods.
+ */
+ function addElement(elt, pInst, media) {
+ var node = pInst._userNode ? pInst._userNode : document.body;
+ node.appendChild(elt);
+ var c = media ? new _main.default.MediaElement(elt, pInst) : new _main.default.Element(elt, pInst);
+ pInst._elements.push(c);
+ return c;
+ } /**
+ * Creates a `<div></div>` element.
+ *
+ * `<div></div>` elements are commonly used as containers for
+ * other elements.
+ *
+ * The parameter `html` is optional. It accepts a string that sets the
+ * inner HTML of the new `<div></div>`.
+ *
+ * @method createDiv
+ * @param {String} [html] inner HTML for the new `<div></div>` element.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * let input;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an input and place it beneath the canvas.
+ * input = createInput('');
+ * input.position(0, 100);
+ *
+ * // Call repaint() when input is detected.
+ * input.input(repaint);
+ *
+ * describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');
+ * }
+ *
+ * // Paint the background gray and display the input's value.
+ * function repaint() {
+ * background(200);
+ * let msg = input.value();
+ * text(msg, 5, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a div element and set its position.
+ * let div = createDiv('p5*js');
+ * div.position(25, 35);
+ *
+ * describe('A gray square with the text "p5*js" written in its center.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.createDiv = function () {
+ var html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+ var elt = document.createElement('div');
+ elt.innerHTML = html;
+ return addElement(elt, this);
+ };
+ /**
+ * Creates a `<p></p>` element.
+ *
+ * `<p></p>` elements are commonly used for paragraph-length text.
+ *
+ * The parameter `html` is optional. It accepts a string that sets the
+ * inner HTML of the new `<p></p>`.
+ *
+ * @method createP
+ * @param {String} [html] inner HTML for the new `<p></p>` element.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an h3 element within the div.
+ * let div = createDiv('p5*js
');
+ * div.position(20, 5);
+ *
+ * describe('A gray square with the text "p5*js" written in its center.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createP = function () {
+ var html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+ var elt = document.createElement('p');
+ elt.innerHTML = html;
+ return addElement(elt, this);
+ };
+ /**
+ * Creates a `<span></span>` element.
+ *
+ * `<span></span>` elements are commonly used as containers
+ * for inline elements. For example, a `<span></span>`
+ * can hold part of a sentence that's a
+ * different style.
+ *
+ * The parameter `html` is optional. It accepts a string that sets the
+ * inner HTML of the new `<span></span>`.
+ *
+ * @method createSpan
+ * @param {String} [html] inner HTML for the new `<span></span>` element.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a paragraph element and set its position.
+ * let p = createP('Tell me a story.');
+ * p.position(5, 0);
+ *
+ * describe('A gray square displaying the text "Tell me a story." written in black.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a span element and set its position.
+ * let span = createSpan('p5*js');
+ * span.position(25, 35);
+ *
+ * describe('A gray square with the text "p5*js" written in its center.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createSpan = function () {
+ var html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+ var elt = document.createElement('span');
+ elt.innerHTML = html;
+ return addElement(elt, this);
+ };
+ /**
+ * Creates an `<img>` element that can appear outside of the canvas.
+ *
+ * The first parameter, `src`, is a string with the path to the image file.
+ * `src` should be a relative path, as in `'assets/image.png'`, or a URL, as
+ * in `'https://example.com/image.png'`.
+ *
+ * The second parameter, `alt`, is a string with the
+ * alternate text
+ * for the image. An empty string `''` can be used for images that aren't displayed.
+ *
+ * The third parameter, `crossOrigin`, is optional. It's a string that sets the
+ * crossOrigin property
+ * of the image. Use `'anonymous'` or `'use-credentials'` to fetch the image
+ * with cross-origin access.
+ *
+ * The fourth parameter, `callback`, is also optional. It sets a function to
+ * call after the image loads. The new image is passed to the callback
+ * function as a p5.Element object.
+ *
+ * @method createImg
+ * @param {String} src relative path or URL for the image.
+ * @param {String} alt alternate text for the image.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Create a div element as a container.
+ * let div = createDiv();
+ *
+ * // Place the div at the center.
+ * div.position(25, 35);
+ *
+ * // Create a span element.
+ * let s1 = createSpan('p5');
+ *
+ * // Create a second span element.
+ * let s2 = createSpan('*');
+ *
+ * // Set the second span's font color.
+ * s2.style('color', 'deeppink');
+ *
+ * // Create a third span element.
+ * let s3 = createSpan('js');
+ *
+ * // Add all the spans to the container div.
+ * s1.parent(div);
+ * s2.parent(div);
+ * s3.parent(div);
+ *
+ * describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method createImg
+ * @param {String} src
+ * @param {String} alt
+ * @param {String} [crossOrigin] crossOrigin property to use when fetching the image.
+ * @param {Function} [successCallback] function to call once the image loads. The new image will be passed
+ * to the function as a p5.Element object.
+ * @return {p5.Element} new p5.Element object.
+ */
+ _main.default.prototype.createImg = function () {
+ _main.default._validateParameters('createImg', arguments);
+ var elt = document.createElement('img');
+ var args = arguments;
+ var self;
+ if (args.length > 1 && typeof args[1] === 'string') {
+ elt.alt = args[1];
+ }
+ if (args.length > 2 && typeof args[2] === 'string') {
+ elt.crossOrigin = args[2];
+ }
+ elt.src = args[0];
+ self = addElement(elt, this);
+ elt.addEventListener('load', function () {
+ self.width = elt.offsetWidth || elt.width;
+ self.height = elt.offsetHeight || elt.height;
+ var last = args[args.length - 1];
+ if (typeof last === 'function') last(self);
+ });
+ return self;
+ };
+ /**
+ * Creates an `<a></a>` element that links to another web page.
+ *
+ * The first parmeter, `href`, is a string that sets the URL of the linked
+ * page.
+ *
+ * The second parameter, `html`, is a string that sets the inner HTML of the
+ * link. It's common to use text, images, or buttons as links.
+ *
+ * The third parameter, `target`, is optional. It's a string that tells the
+ * web browser where to open the link. By default, links open in the current
+ * browser tab. Passing `'_blank'` will cause the link to open in a new
+ * browser tab. MDN describes a few
+ * other options.
+ *
+ * @method createA
+ * @param {String} href URL of linked page.
+ * @param {String} html inner HTML of link element to display.
+ * @param {String} [target] target where the new link should open,
+ * either `'_blank'`, `'_self'`, `'_parent'`, or `'_top'`.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * let img = createImg(
+ * 'https://p5js.org/assets/img/asterisk-01.png',
+ * 'The p5.js magenta asterisk.'
+ * );
+ * img.position(0, -10);
+ *
+ * describe('A gray square with a magenta asterisk in its center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an anchor element that links to p5js.org.
+ * let a = createA('http://p5js.org/', 'p5*js');
+ * a.position(25, 35);
+ *
+ * describe('The text "p5*js" written at the center of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createA = function (href, html, target) {
+ _main.default._validateParameters('createA', arguments);
+ var elt = document.createElement('a');
+ elt.href = href;
+ elt.innerHTML = html;
+ if (target) elt.target = target;
+ return addElement(elt, this);
+ };
+ /** INPUT **/
+ /**
+ * Creates a slider `<input></input>` element.
+ *
+ * Range sliders are useful for quickly selecting numbers from a given range.
+ *
+ * The first two parameters, `min` and `max`, are numbers that set the
+ * slider's minimum and maximum.
+ *
+ * The third parameter, `value`, is optional. It's a number that sets the
+ * slider's default value.
+ *
+ * The fourth parameter, `step`, is also optional. It's a number that sets the
+ * spacing between each value in the slider's range. Setting `step` to 0
+ * allows the slider to move smoothly from `min` to `max`.
+ *
+ * @method createSlider
+ * @param {Number} min minimum value of the slider.
+ * @param {Number} max maximum value of the slider.
+ * @param {Number} [value] default value of the slider.
+ * @param {Number} [step] size for each step in the slider's range.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ *
+ * // Create an anchor tag that links to p5js.org.
+ * // Open the link in a new tab.
+ * let a = createA('http://p5js.org/', 'p5*js', '_blank');
+ * a.position(25, 35);
+ *
+ * describe('The text "p5*js" written at the center of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let slider;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a slider and place it at the top of the canvas.
+ * slider = createSlider(0, 255);
+ * slider.position(10, 10);
+ * slider.size(80);
+ *
+ * describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
+ * }
+ *
+ * function draw() {
+ * // Use the slider as a grayscale value.
+ * let g = slider.value();
+ * background(g);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let slider;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a slider and place it at the top of the canvas.
+ * // Set its default value to 0.
+ * slider = createSlider(0, 255, 0);
+ * slider.position(10, 10);
+ * slider.size(80);
+ *
+ * describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+ * }
+ *
+ * function draw() {
+ * // Use the slider as a grayscale value.
+ * let g = slider.value();
+ * background(g);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let slider;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a slider and place it at the top of the canvas.
+ * // Set its default value to 0.
+ * // Set its step size to 50.
+ * slider = createSlider(0, 255, 0, 50);
+ * slider.position(10, 10);
+ * slider.size(80);
+ *
+ * describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+ * }
+ *
+ * function draw() {
+ * // Use the slider as a grayscale value.
+ * let g = slider.value();
+ * background(g);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createSlider = function (min, max, value, step) {
+ _main.default._validateParameters('createSlider', arguments);
+ var elt = document.createElement('input');
+ elt.type = 'range';
+ elt.min = min;
+ elt.max = max;
+ if (step === 0) {
+ elt.step = 1e-18; // smallest valid step
+ } else if (step) {
+ elt.step = step;
+ }
+ if (typeof value === 'number') elt.value = value;
+ return addElement(elt, this);
+ };
+ /**
+ * Creates a `<button></button>` element.
+ *
+ * The first parameter, `label`, is a string that sets the label displayed on
+ * the button.
+ *
+ * The second parameter, `value`, is optional. It's a string that sets the
+ * button's value. See
+ * MDN
+ * for more details.
+ *
+ * @method createButton
+ * @param {String} label label displayed on the button.
+ * @param {String} [value] value of the button.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * let slider;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a slider and place it at the top of the canvas.
+ * // Set its default value to 0.
+ * // Set its step size to 0 so that it moves smoothly.
+ * slider = createSlider(0, 255, 0, 0);
+ * slider.position(10, 10);
+ * slider.size(80);
+ *
+ * describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+ * }
+ *
+ * function draw() {
+ * // Use the slider as a grayscale value.
+ * let g = slider.value();
+ * background(g);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a button and place it beneath the canvas.
+ * let button = createButton('click me');
+ * button.position(0, 100);
+ *
+ * // Call repaint() when the button is pressed.
+ * button.mousePressed(repaint);
+ *
+ * describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+ * }
+ *
+ * // Change the background color.
+ * function repaint() {
+ * let g = random(255);
+ * background(g);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createButton = function (label, value) {
+ _main.default._validateParameters('createButton', arguments);
+ var elt = document.createElement('button');
+ elt.innerHTML = label;
+ if (value) elt.value = value;
+ return addElement(elt, this);
+ };
+ /**
+ * Creates a checkbox `<input></input>` element.
+ *
+ * Checkboxes extend the p5.Element class with a
+ * `checked()` method. Calling `myBox.checked()` returns `true` if it the box
+ * is checked and `false` if not.
+ *
+ * The first parameter, `label`, is optional. It's a string that sets the label
+ * to display next to the checkbox.
+ *
+ * The second parameter, `value`, is also optional. It's a boolean that sets the
+ * checkbox's value.
+ *
+ * @method createCheckbox
+ * @param {String} [label] label displayed after the checkbox.
+ * @param {boolean} [value] value of the checkbox. Checked is `true` and unchecked is `false`.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * let button;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a button and set its value to 0.
+ * // Place the button beneath the canvas.
+ * button = createButton('click me', 'red');
+ * button.position(0, 100);
+ *
+ * // Call randomColor() when the button is pressed.
+ * button.mousePressed(randomColor);
+ *
+ * describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+ * }
+ *
+ * function draw() {
+ * // Use the button's value to set the background color.
+ * let c = button.value();
+ * background(c);
+ * }
+ *
+ * // Set the button's value to a random color.
+ * function randomColor() {
+ * let c = random(['red', 'green', 'blue', 'yellow']);
+ * button.value(c);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let checkbox;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a checkbox and place it beneath the canvas.
+ * checkbox = createCheckbox();
+ * checkbox.position(0, 100);
+ *
+ * describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
+ * }
+ *
+ * function draw() {
+ * // Use the checkbox to set the background color.
+ * if (checkbox.checked()) {
+ * background(255);
+ * } else {
+ * background(0);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let checkbox;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a checkbox and place it beneath the canvas.
+ * // Label the checkbox "white".
+ * checkbox = createCheckbox(' white');
+ * checkbox.position(0, 100);
+ *
+ * describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
+ * }
+ *
+ * function draw() {
+ * // Use the checkbox to set the background color.
+ * if (checkbox.checked()) {
+ * background(255);
+ * } else {
+ * background(0);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createCheckbox = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('createCheckbox', args);
+ // Create a container element
+ var elt = document.createElement('div');
+ // Create checkbox type input element
+ var checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ // Create label element and wrap it around checkbox
+ var label = document.createElement('label');
+ label.appendChild(checkbox);
+ // Append label element inside the container
+ elt.appendChild(label);
+ //checkbox must be wrapped in p5.Element before label so that label appears after
+ var self = addElement(elt, this);
+ self.checked = function () {
+ var cb = self.elt.firstElementChild.getElementsByTagName('input') [0];
+ if (cb) {
+ if (arguments.length === 0) {
+ return cb.checked;
+ } else if (arguments.length <= 0 ? undefined : arguments[0]) {
+ cb.checked = true;
+ } else {
+ cb.checked = false;
+ }
+ }
+ return self;
+ };
+ this.value = function (val) {
+ self.value = val;
+ return this;
+ };
+ // Set the span element innerHTML as the label value if passed
+ if (args[0]) {
+ self.value(args[0]);
+ var span = document.createElement('span');
+ span.innerHTML = args[0];
+ label.appendChild(span);
+ } // Set the checked value of checkbox if passed
+
+ if (args[1]) {
+ checkbox.checked = true;
+ }
+ return self;
+ };
+ /**
+ * Creates a dropdown menu `<select></select>` element.
+ *
+ * The parameter is optional. If `true` is passed, as in
+ * `let mySelect = createSelect(true)`, then the dropdown will support
+ * multiple selections. If an existing `<select></select>` element
+ * is passed, as in `let mySelect = createSelect(otherSelect)`, the existing
+ * element will be wrapped in a new p5.Element
+ * object.
+ *
+ * Dropdowns extend the p5.Element class with a few
+ * helpful methods for managing options:
+ * - `mySelect.option(name, [value])` adds an option to the menu. The first paremeter, `name`, is a string that sets the option's name and value. The second parameter, `value`, is optional. If provided, it sets the value that corresponds to the key `name`. If an option with `name` already exists, its value is changed to `value`.
+ * - `mySelect.value()` returns the currently-selected option's value.
+ * - `mySelect.selected()` returns the currently-selected option.
+ * - `mySelect.selected(option)` selects the given option by default.
+ * - `mySelect.disable()` marks the whole dropdown element as disabled.
+ * - `mySelect.disable(option)` marks a given option as disabled.
+ * - `mySelect.enable()` marks the whole dropdown element as enabled.
+ * - `mySelect.enable(option)` marks a given option as enabled.
+ *
+ * @method createSelect
+ * @param {boolean} [multiple] support multiple selections.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * let checkbox;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a checkbox and place it beneath the canvas.
+ * // Label the checkbox "white" and set its value to true.
+ * checkbox = createCheckbox(' white', true);
+ * checkbox.position(0, 100);
+ *
+ * describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
+ * }
+ *
+ * function draw() {
+ * // Use the checkbox to set the background color.
+ * if (checkbox.checked()) {
+ * background(255);
+ * } else {
+ * background(0);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mySelect;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a dropdown and place it beneath the canvas.
+ * mySelect = createSelect();
+ * mySelect.position(0, 100);
+ *
+ * // Add color options.
+ * mySelect.option('red');
+ * mySelect.option('green');
+ * mySelect.option('blue');
+ * mySelect.option('yellow');
+ *
+ * // Set the selected option to "red".
+ * mySelect.selected('red');
+ *
+ * describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+ * }
+ *
+ * function draw() {
+ * // Use the selected value to paint the background.
+ * let c = mySelect.selected();
+ * background(c);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mySelect;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a dropdown and place it beneath the canvas.
+ * mySelect = createSelect();
+ * mySelect.position(0, 100);
+ *
+ * // Add color options.
+ * mySelect.option('red');
+ * mySelect.option('green');
+ * mySelect.option('blue');
+ * mySelect.option('yellow');
+ *
+ * // Set the selected option to "red".
+ * mySelect.selected('red');
+ *
+ * // Disable the "yellow" option.
+ * mySelect.disable('yellow');
+ *
+ * describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+ * }
+ *
+ * function draw() {
+ * // Use the selected value to paint the background.
+ * let c = mySelect.selected();
+ * background(c);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mySelect;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a dropdown and place it beneath the canvas.
+ * mySelect = createSelect();
+ * mySelect.position(0, 100);
+ *
+ * // Add color options with names and values.
+ * mySelect.option('one', 'red');
+ * mySelect.option('two', 'green');
+ * mySelect.option('three', 'blue');
+ * mySelect.option('four', 'yellow');
+ *
+ * // Set the selected option to "one".
+ * mySelect.selected('one');
+ *
+ * describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+ * }
+ *
+ * function draw() {
+ * // Use the selected value to paint the background.
+ * let c = mySelect.selected();
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method createSelect
+ * @param {Object} existing select element to wrap, either as a p5.Element or
+ * a HTMLSelectElement.
+ * @return {p5.Element}
+ */
+ _main.default.prototype.createSelect = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('createSelect', args);
+ var self;
+ var arg = args[0];
+ if (arg instanceof _main.default.Element && arg.elt instanceof HTMLSelectElement) {
+ // If given argument is p5.Element of select type
+ self = arg;
+ this.elt = arg.elt;
+ } else if (arg instanceof HTMLSelectElement) {
+ self = addElement(arg, this);
+ this.elt = arg;
+ } else {
+ var elt = document.createElement('select');
+ if (arg && typeof arg === 'boolean') {
+ elt.setAttribute('multiple', 'true');
+ }
+ self = addElement(elt, this);
+ this.elt = elt;
+ }
+ self.option = function (name, value) {
+ var index;
+ // if no name is passed, return
+ if (name === undefined) {
+ return;
+ } //see if there is already an option with this name
+
+ for (var i = 0; i < this.elt.length; i += 1) {
+ if (this.elt[i].textContent === name) {
+ index = i;
+ break;
+ }
+ } //if there is an option with this name we will modify it
+
+ if (index !== undefined) {
+ //if the user passed in false then delete that option
+ if (value === false) {
+ this.elt.remove(index);
+ } else {
+ // Update the option at index with the value
+ this.elt[index].value = value;
+ }
+ } else {
+ //if it doesn't exist create it
+ var opt = document.createElement('option');
+ opt.textContent = name;
+ opt.value = value === undefined ? name : value;
+ this.elt.appendChild(opt);
+ this._pInst._elements.push(opt);
+ }
+ };
+ self.selected = function (value) {
+ // Update selected status of option
+ if (value !== undefined) {
+ for (var i = 0; i < this.elt.length; i += 1) {
+ if (this.elt[i].value.toString() === value.toString()) {
+ this.elt.selectedIndex = i;
+ }
+ }
+ return this;
+ } else {
+ if (this.elt.getAttribute('multiple')) {
+ var arr = [
+ ];
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.elt.selectedOptions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var selectedOption = _step.value;
+ arr.push(selectedOption.value);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ return arr;
+ } else {
+ return this.elt.value;
+ }
+ }
+ };
+ self.disable = function (value) {
+ if (typeof value === 'string') {
+ for (var i = 0; i < this.elt.length; i++) {
+ if (this.elt[i].value.toString() === value) {
+ this.elt[i].disabled = true;
+ this.elt[i].selected = false;
+ }
+ }
+ } else {
+ this.elt.disabled = true;
+ }
+ return this;
+ };
+ self.enable = function (value) {
+ if (typeof value === 'string') {
+ for (var i = 0; i < this.elt.length; i++) {
+ if (this.elt[i].value.toString() === value) {
+ this.elt[i].disabled = false;
+ this.elt[i].selected = false;
+ }
+ }
+ } else {
+ this.elt.disabled = false;
+ for (var _i = 0; _i < this.elt.length; _i++) {
+ this.elt[_i].disabled = false;
+ this.elt[_i].selected = false;
+ }
+ }
+ return this;
+ };
+ return self;
+ };
+ /**
+ * Creates a radio button element.
+ *
+ * The parameter is optional. If a string is passed, as in
+ * `let myRadio = createSelect('food')`, then each radio option will
+ * have `"food"` as its `name` parameter: `<input name="food"></input>`.
+ * If an existing `<div></div>` or `<span></span>`
+ * element is passed, as in `let myRadio = createSelect(container)`, it will
+ * become the radio button's parent element.
+ *
+ * Radio buttons extend the p5.Element class with a few
+ * helpful methods for managing options:
+ * - `myRadio.option(value, [label])` adds an option to the menu. The first paremeter, `value`, is a string that sets the option's value and label. The second parameter, `label`, is optional. If provided, it sets the label displayed for the `value`. If an option with `value` already exists, its label is changed and its value is returned.
+ * - `myRadio.value()` returns the currently-selected option's value.
+ * - `myRadio.selected()` returns the currently-selected option.
+ * - `myRadio.selected(value)` selects the given option and returns it as an `HTMLInputElement`.
+ * - `myRadio.disable(shouldDisable)` enables the entire radio button if `true` is passed and disables it if `false` is passed.
+ *
+ * @method createRadio
+ * @param {Object} [containerElement] container HTML Element, either a `<div></div>`
+ * or `<span></span>`.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * // Hold CTRL to select multiple options on Windows and Linux.
+ * // Hold CMD to select multiple options on macOS.
+ * let mySelect;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a dropdown and allow multiple selections.
+ * // Place it beneath the canvas.
+ * mySelect = createSelect(true);
+ * mySelect.position(0, 100);
+ *
+ * // Add color options.
+ * mySelect.option('red');
+ * mySelect.option('green');
+ * mySelect.option('blue');
+ * mySelect.option('yellow');
+ *
+ * describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Use the selected value(s) to draw circles.
+ * let colors = mySelect.selected();
+ * for (let i = 0; i < colors.length; i += 1) {
+ * // Calculate the x-coordinate.
+ * let x = 10 + i * 20;
+ *
+ * // Access the color.
+ * let c = colors[i];
+ *
+ * // Draw the circle.
+ * fill(c);
+ * circle(x, 50, 20);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myRadio;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a radio button element and place it
+ * // in the top-left corner.
+ * myRadio = createRadio();
+ * myRadio.position(0, 0);
+ * myRadio.size(60);
+ *
+ * // Add a few color options.
+ * myRadio.option('red');
+ * myRadio.option('yellow');
+ * myRadio.option('blue');
+ *
+ * // Choose a default option.
+ * myRadio.selected('yellow');
+ *
+ * describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
+ * }
+ *
+ * function draw() {
+ * // Set the background color using the radio button.
+ * let g = myRadio.value();
+ * background(g);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myRadio;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a radio button element and place it
+ * // in the top-left corner.
+ * myRadio = createRadio();
+ * myRadio.position(0, 0);
+ * myRadio.size(50);
+ *
+ * // Add a few color options.
+ * // Color values are labeled with
+ * // emotions they evoke.
+ * myRadio.option('red', 'love');
+ * myRadio.option('yellow', 'joy');
+ * myRadio.option('blue', 'trust');
+ *
+ * // Choose a default option.
+ * myRadio.selected('yellow');
+ *
+ * describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
+ * }
+ *
+ * function draw() {
+ * // Set the background color using the radio button.
+ * let c = myRadio.value();
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method createRadio
+ * @param {String} [name] name parameter assigned to each option's `<input></input>` element.
+ * @return {p5.Element} new p5.Element object.
+ */
+ /**
+ * @method createRadio
+ * @return {p5.Element} new p5.Element object.
+ */
+ _main.default.prototype.createRadio = function () {
+ // Creates a div, adds each option as an individual input inside it.
+ // If already given with a containerEl, will search for all input[radio]
+ // it, create a p5.Element out of it, add options to it and return the p5.Element.
+ var self;
+ var radioElement;
+ var name;
+ var arg0 = arguments.length <= 0 ? undefined : arguments[0];
+ if (arg0 instanceof _main.default.Element && (arg0.elt instanceof HTMLDivElement || arg0.elt instanceof HTMLSpanElement)) {
+ // If given argument is p5.Element of div/span type
+ self = arg0;
+ this.elt = arg0.elt;
+ } else if ( // If existing radio Element is provided as argument 0
+ arg0 instanceof HTMLDivElement || arg0 instanceof HTMLSpanElement) {
+ self = addElement(arg0, this);
+ this.elt = arg0;
+ radioElement = arg0;
+ if (typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'string') name = arguments.length <= 1 ? undefined : arguments[1];
+ } else {
+ if (typeof arg0 === 'string') name = arg0;
+ radioElement = document.createElement('div');
+ self = addElement(radioElement, this);
+ this.elt = radioElement;
+ }
+ self._name = name || 'radioOption';
+ // setup member functions
+ var isRadioInput = function isRadioInput(el) {
+ return el instanceof HTMLInputElement && el.type === 'radio';
+ };
+ var isLabelElement = function isLabelElement(el) {
+ return el instanceof HTMLLabelElement;
+ };
+ var isSpanElement = function isSpanElement(el) {
+ return el instanceof HTMLSpanElement;
+ };
+ self._getOptionsArray = function () {
+ return Array.from(this.elt.children).filter(function (el) {
+ return isRadioInput(el) || isLabelElement(el) && isRadioInput(el.firstElementChild);
+ }).map(function (el) {
+ return isRadioInput(el) ? el : el.firstElementChild;
+ });
+ };
+ self.option = function (value, label) {
+ // return an option with this value, create if not exists.
+ var optionEl;
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = self._getOptionsArray() [Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var option = _step2.value;
+ if (option.value === value) {
+ optionEl = option;
+ break;
+ }
+ } // Create a new option, add it to radioElement and return it.
+
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ if (optionEl === undefined) {
+ optionEl = document.createElement('input');
+ optionEl.setAttribute('type', 'radio');
+ optionEl.setAttribute('value', value);
+ }
+ optionEl.setAttribute('name', self._name);
+ // Check if label element exists, else create it
+ var labelElement;
+ if (!isLabelElement(optionEl.parentElement)) {
+ labelElement = document.createElement('label');
+ labelElement.insertAdjacentElement('afterbegin', optionEl);
+ } else {
+ labelElement = optionEl.parentElement;
+ } // Check if span element exists, else create it
+
+ var spanElement;
+ if (!isSpanElement(labelElement.lastElementChild)) {
+ spanElement = document.createElement('span');
+ optionEl.insertAdjacentElement('afterend', spanElement);
+ } else {
+ spanElement = labelElement.lastElementChild;
+ } // Set the innerHTML of span element as the label text
+
+ spanElement.innerHTML = label === undefined ? value : label;
+ // Append the label element, which includes option element and
+ // span element to the radio container element
+ this.elt.appendChild(labelElement);
+ return optionEl;
+ };
+ self.remove = function (value) {
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = self._getOptionsArray() [Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var optionEl = _step3.value;
+ if (optionEl.value === value) {
+ if (isLabelElement(optionEl.parentElement)) {
+ // Remove parent label which also removes children elements
+ optionEl.parentElement.remove();
+ } else {
+ // Remove the option input if parent label does not exist
+ optionEl.remove();
+ }
+ return;
+ }
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ };
+ self.value = function () {
+ var result = '';
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ for (var _iterator4 = self._getOptionsArray() [Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ var option = _step4.value;
+ if (option.checked) {
+ result = option.value;
+ break;
+ }
+ }
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ return result;
+ };
+ self.selected = function (value) {
+ var result = null;
+ if (value === undefined) {
+ var _iteratorNormalCompletion5 = true;
+ var _didIteratorError5 = false;
+ var _iteratorError5 = undefined;
+ try {
+ for (var _iterator5 = self._getOptionsArray() [Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
+ var option = _step5.value;
+ if (option.checked) {
+ result = option;
+ break;
+ }
+ }
+ } catch (err) {
+ _didIteratorError5 = true;
+ _iteratorError5 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion5 && _iterator5.return != null) {
+ _iterator5.return();
+ }
+ } finally {
+ if (_didIteratorError5) {
+ throw _iteratorError5;
+ }
+ }
+ }
+ } else {
+ // forEach loop to uncheck all radio buttons before
+ // setting any one as checked.
+ self._getOptionsArray().forEach(function (option) {
+ option.checked = false;
+ option.removeAttribute('checked');
+ });
+ var _iteratorNormalCompletion6 = true;
+ var _didIteratorError6 = false;
+ var _iteratorError6 = undefined;
+ try {
+ for (var _iterator6 = self._getOptionsArray() [Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
+ var _option = _step6.value;
+ if (_option.value === value) {
+ _option.setAttribute('checked', true);
+ _option.checked = true;
+ result = _option;
+ }
+ }
+ } catch (err) {
+ _didIteratorError6 = true;
+ _iteratorError6 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion6 && _iterator6.return != null) {
+ _iterator6.return();
+ }
+ } finally {
+ if (_didIteratorError6) {
+ throw _iteratorError6;
+ }
+ }
+ }
+ }
+ return result;
+ };
+ self.disable = function () {
+ var shouldDisable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+ var _iteratorNormalCompletion7 = true;
+ var _didIteratorError7 = false;
+ var _iteratorError7 = undefined;
+ try {
+ for (var _iterator7 = self._getOptionsArray() [Symbol.iterator](), _step7; !(_iteratorNormalCompletion7 = (_step7 = _iterator7.next()).done); _iteratorNormalCompletion7 = true) {
+ var radioInput = _step7.value;
+ radioInput.setAttribute('disabled', shouldDisable);
+ }
+ } catch (err) {
+ _didIteratorError7 = true;
+ _iteratorError7 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion7 && _iterator7.return != null) {
+ _iterator7.return();
+ }
+ } finally {
+ if (_didIteratorError7) {
+ throw _iteratorError7;
+ }
+ }
+ }
+ };
+ return self;
+ };
+ /**
+ * Creates a color picker element.
+ *
+ * The parameter, `value`, is optional. If a color string or
+ * p5.Color object is passed, it will set the default
+ * color.
+ *
+ * Color pickers extend the p5.Element class with a
+ * couple of helpful methods for managing colors:
+ * - `myPicker.value()` returns the current color as a hex string in the format `'#rrggbb'`.
+ * - `myPicker.color()` returns the current color as a p5.Color object.
+ *
+ * @method createColorPicker
+ * @param {String|p5.Color} [value] default color as a CSS color string.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * let myRadio;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a radio button element and place it
+ * // in the top-left corner.
+ * myRadio = createRadio();
+ * myRadio.position(0, 0);
+ * myRadio.size(50);
+ *
+ * // Add a few color options.
+ * myRadio.option('red');
+ * myRadio.option('yellow');
+ * myRadio.option('blue');
+ *
+ * // Choose a default option.
+ * myRadio.selected('yellow');
+ *
+ * // Create a button and place it beneath the canvas.
+ * let btn = createButton('disable');
+ * btn.position(0, 100);
+ *
+ * // Call disableRadio() when btn is pressed.
+ * btn.mousePressed(disableRadio);
+ *
+ * describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');
+ * }
+ *
+ * function draw() {
+ * // Set the background color using the radio button.
+ * let c = myRadio.value();
+ * background(c);
+ * }
+ *
+ * // Disable myRadio.
+ * function disableRadio() {
+ * myRadio.disable(true);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myPicker;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a color picker and set its position.
+ * myPicker = createColorPicker('deeppink');
+ * myPicker.position(0, 100);
+ *
+ * describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');
+ * }
+ *
+ * function draw() {
+ * // Use the color picker to paint the background.
+ * let c = myPicker.color();
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createColorPicker = function (value) {
+ _main.default._validateParameters('createColorPicker', arguments);
+ var elt = document.createElement('input');
+ var self;
+ elt.type = 'color';
+ if (value) {
+ if (value instanceof _main.default.Color) {
+ elt.value = value.toString('#rrggbb');
+ } else {
+ _main.default.prototype._colorMode = 'rgb';
+ _main.default.prototype._colorMaxes = {
+ rgb: [
+ 255,
+ 255,
+ 255,
+ 255
+ ],
+ hsb: [
+ 360,
+ 100,
+ 100,
+ 1
+ ],
+ hsl: [
+ 360,
+ 100,
+ 100,
+ 1
+ ]
+ };
+ elt.value = _main.default.prototype.color(value).toString('#rrggbb');
+ }
+ } else {
+ elt.value = '#000000';
+ }
+ self = addElement(elt, this);
+ // Method to return a p5.Color object for the given color.
+ self.color = function () {
+ if (value) {
+ if (value.mode) {
+ _main.default.prototype._colorMode = value.mode;
+ }
+ if (value.maxes) {
+ _main.default.prototype._colorMaxes = value.maxes;
+ }
+ }
+ return _main.default.prototype.color(this.elt.value);
+ };
+ return self;
+ };
+ /**
+ * Creates a text `<input></input>` element.
+ *
+ * Call `myInput.size()` to set the length of the text box.
+ *
+ * The first parameter, `value`, is optional. It's a string that sets the
+ * input's default value. The input is blank by default.
+ *
+ * The second parameter, `type`, is also optional. It's a string that
+ * specifies the type of text being input. See MDN for a full
+ * list of options.
+ * The default is `'text'`.
+ *
+ * @method createInput
+ * @param {String} [value] default value of the input box. Defaults to an empty string `''`.
+ * @param {String} [type] type of input. Defaults to `'text'`.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * let myPicker;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a color picker and set its position.
+ * myPicker = createColorPicker('deeppink');
+ * myPicker.position(0, 100);
+ *
+ * describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.');
+ * }
+ *
+ * function draw() {
+ * // Use the color picker to paint the background.
+ * let c = myPicker.value();
+ * background(c);
+ *
+ * // Display the current color as a hex string.
+ * text(c, 25, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myInput;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create an input element and place it
+ * // beneath the canvas.
+ * myInput = createInput();
+ * myInput.position(0, 100);
+ *
+ * describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Use the input to display a message.
+ * let msg = myInput.value();
+ * text(msg, 25, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method createInput
+ * @param {String} [value]
+ * @return {p5.Element}
+ */
+ _main.default.prototype.createInput = function () {
+ var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+ var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+ _main.default._validateParameters('createInput', arguments);
+ var elt = document.createElement('input');
+ elt.setAttribute('value', value);
+ elt.setAttribute('type', type);
+ return addElement(elt, this);
+ };
+ /**
+ * Creates an `<input></input>` element of type `'file'`.
+ *
+ * `createFileInput()` allows users to select local files for use in a sketch.
+ * It returns a p5.File object.
+ *
+ * The first parameter, `callback`, is a function that's called when the file
+ * loads. The callback function should have one parameter, `file`, that's a
+ * p5.File object.
+ *
+ * The second parameter, `multiple`, is optional. It's a boolean value that
+ * allows loading multiple files if set to `true`. If `true`, `callback`
+ * will be called once per file.
+ *
+ * @method createFileInput
+ * @param {Function} callback function to call once the file loads.
+ * @param {Boolean} [multiple] allow multiple files to be selected.
+ * @return {p5.File} new p5.File object.
+ *
+ * @example
+ *
+ * let myInput;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create an input element and place it
+ * // beneath the canvas. Set its default
+ * // text to "hello!".
+ * myInput = createInput('hello!');
+ * myInput.position(0, 100);
+ *
+ * describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Use the input to display a message.
+ * let msg = myInput.value();
+ * text(msg, 25, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Use the file input to select an image to
+ * // load and display.
+ * let input;
+ * let img;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a file input and place it beneath
+ * // the canvas.
+ * input = createFileInput(handleImage);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the image if loaded.
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * // Create an image if the file is an image.
+ * function handleImage(file) {
+ * if (file.type === 'image') {
+ * img = createImg(file.data, '');
+ * img.hide();
+ * } else {
+ * img = null;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createFileInput = function (callback) {
+ var multiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+ _main.default._validateParameters('createFileInput', arguments);
+ var handleFileSelect = function handleFileSelect(event) {
+ var _iteratorNormalCompletion8 = true;
+ var _didIteratorError8 = false;
+ var _iteratorError8 = undefined;
+ try {
+ for (var _iterator8 = event.target.files[Symbol.iterator](), _step8; !(_iteratorNormalCompletion8 = (_step8 = _iterator8.next()).done); _iteratorNormalCompletion8 = true) {
+ var file = _step8.value;
+ _main.default.File._load(file, callback);
+ }
+ } catch (err) {
+ _didIteratorError8 = true;
+ _iteratorError8 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion8 && _iterator8.return != null) {
+ _iterator8.return();
+ }
+ } finally {
+ if (_didIteratorError8) {
+ throw _iteratorError8;
+ }
+ }
+ }
+ };
+ // If File API's are not supported, throw Error
+ if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
+ console.log('The File APIs are not fully supported in this browser. Cannot create element.');
+ return;
+ }
+ var fileInput = document.createElement('input');
+ fileInput.setAttribute('type', 'file');
+ if (multiple) fileInput.setAttribute('multiple', true);
+ fileInput.addEventListener('change', handleFileSelect, false);
+ return addElement(fileInput, this);
+ };
+ /** VIDEO STUFF **/
+ // Helps perform similar tasks for media element methods.
+ function createMedia(pInst, type, src, callback) {
+ var elt = document.createElement(type);
+ // Create source elements from given sources
+ src = src || '';
+ if (typeof src === 'string') {
+ src = [
+ src
+ ];
+ }
+ var _iteratorNormalCompletion9 = true;
+ var _didIteratorError9 = false;
+ var _iteratorError9 = undefined;
+ try {
+ for (var _iterator9 = src[Symbol.iterator](), _step9; !(_iteratorNormalCompletion9 = (_step9 = _iterator9.next()).done); _iteratorNormalCompletion9 = true) {
+ var mediaSource = _step9.value;
+ var sourceEl = document.createElement('source');
+ sourceEl.setAttribute('src', mediaSource);
+ elt.appendChild(sourceEl);
+ } // If callback is provided, attach to element
+
+ } catch (err) {
+ _didIteratorError9 = true;
+ _iteratorError9 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion9 && _iterator9.return != null) {
+ _iterator9.return();
+ }
+ } finally {
+ if (_didIteratorError9) {
+ throw _iteratorError9;
+ }
+ }
+ }
+ if (typeof callback === 'function') {
+ var callbackHandler = function callbackHandler() {
+ callback();
+ elt.removeEventListener('canplaythrough', callbackHandler);
+ };
+ elt.addEventListener('canplaythrough', callbackHandler);
+ }
+ var mediaEl = addElement(elt, pInst, true);
+ mediaEl.loadedmetadata = false;
+ // set width and height onload metadata
+ elt.addEventListener('loadedmetadata', function () {
+ mediaEl.width = elt.videoWidth;
+ mediaEl.height = elt.videoHeight;
+ // set elt width and height if not set
+ if (mediaEl.elt.width === 0) mediaEl.elt.width = elt.videoWidth;
+ if (mediaEl.elt.height === 0) mediaEl.elt.height = elt.videoHeight;
+ if (mediaEl.presetPlaybackRate) {
+ mediaEl.elt.playbackRate = mediaEl.presetPlaybackRate;
+ delete mediaEl.presetPlaybackRate;
+ }
+ mediaEl.loadedmetadata = true;
+ });
+ return mediaEl;
+ } /**
+ * Creates a `<video>` element for simple audio/video playback.
+ *
+ * `createVideo()` returns a new
+ * p5.MediaElement object. Videos are shown by
+ * default. They can be hidden by calling `video.hide()` and drawn to the
+ * canvas using image().
+ *
+ * The first parameter, `src`, is the path the video. If a single string is
+ * passed, as in `'assets/topsecret.mp4'`, a single video is loaded. An array
+ * of strings can be used to load the same video in different formats. For
+ * example, `['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm']`.
+ * This is useful for ensuring that the video can play across different browsers with
+ * different capabilities. See
+ * MDN
+ * for more information about supported formats.
+ *
+ * The second parameter, `callback`, is optional. It's a function to call once
+ * the video is ready to play.
+ *
+ * @method createVideo
+ * @param {String|String[]} src path to a video file, or an array of paths for
+ * supporting different browsers.
+ * @param {Function} [callback] function to call once the video is ready to play.
+ * @return {p5.MediaElement} new p5.MediaElement object.
+ *
+ * @example
+ *
+ * // Use the file input to select multiple images
+ * // to load and display.
+ * let input;
+ * let images = [];
+ *
+ * function setup() {
+ * // Create a file input and place it beneath
+ * // the canvas. Allow it to load multiple files.
+ * input = createFileInput(handleImage, true);
+ * input.position(0, 100);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the images if loaded. Each image
+ * // is drawn 20 pixels lower than the
+ * // previous image.
+ * for (let i = 0; i < images.length; i += 1) {
+ * // Calculate the y-coordinate.
+ * let y = i * 20;
+ *
+ * // Draw the image.
+ * image(img, 0, y, 100, 100);
+ * }
+ *
+ * describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');
+ * }
+ *
+ * // Create an image if the file is an image,
+ * // then add it to the images array.
+ * function handleImage(file) {
+ * if (file.type === 'image') {
+ * let img = createImg(file.data, '');
+ * img.hide();
+ * images.push(img);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * noCanvas();
+ *
+ * // Load a video and add it to the page.
+ * // Note: this may not work in some browsers.
+ * let video = createVideo('assets/small.mp4');
+ *
+ * // Show the default video controls.
+ * video.showControls();
+ *
+ * describe('A video of a toy robot with playback controls beneath it.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * noCanvas();
+ *
+ * // Load a video and add it to the page.
+ * // Provide an array options for different file formats.
+ * let video = createVideo(
+ * ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']
+ * );
+ *
+ * // Show the default video controls.
+ * video.showControls();
+ *
+ * describe('A video of a toy robot with playback controls beneath it.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.createVideo = function (src, callback) {
+ _main.default._validateParameters('createVideo', arguments);
+ return createMedia(this, 'video', src, callback);
+ };
+ /** AUDIO STUFF **/
+ /**
+ * Creates a hidden `<audio>` element for simple audio playback.
+ *
+ * `createAudio()` returns a new
+ * p5.MediaElement object.
+ *
+ * The first parameter, `src`, is the path the video. If a single string is
+ * passed, as in `'assets/video.mp4'`, a single video is loaded. An array
+ * of strings can be used to load the same video in different formats. For
+ * example, `['assets/video.mp4', 'assets/video.ogv', 'assets/video.webm']`.
+ * This is useful for ensuring that the video can play across different
+ * browsers with different capabilities. See
+ * MDN
+ * for more information about supported formats.
+ *
+ * The second parameter, `callback`, is optional. It's a function to call once
+ * the audio is ready to play.
+ *
+ * @method createAudio
+ * @param {String|String[]} [src] path to an audio file, or an array of paths
+ * for supporting different browsers.
+ * @param {Function} [callback] function to call once the audio is ready to play.
+ * @return {p5.MediaElement} new p5.MediaElement object.
+ *
+ * @example
+ *
+ * let video;
+ *
+ * function setup() {
+ * noCanvas();
+ *
+ * // Load a video and add it to the page.
+ * // Provide an array options for different file formats.
+ * // Call mute() once the video loads.
+ * video = createVideo(
+ * ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
+ * muteVideo
+ * );
+ *
+ * // Show the default video controls.
+ * video.showControls();
+ *
+ * describe('A video of a toy robot with playback controls beneath it.');
+ * }
+ *
+ * // Mute the video once it loads.
+ * function muteVideo() {
+ * video.volume(0);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createAudio = function (src, callback) {
+ _main.default._validateParameters('createAudio', arguments);
+ return createMedia(this, 'audio', src, callback);
+ };
+ /** CAMERA STUFF **/
+ _main.default.prototype.VIDEO = 'video';
+ _main.default.prototype.AUDIO = 'audio';
+ // from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+ // Older browsers might not implement mediaDevices at all, so we set an empty object first
+ if (navigator.mediaDevices === undefined) {
+ navigator.mediaDevices = {
+ };
+ } // Some browsers partially implement mediaDevices. We can't just assign an object
+ // with getUserMedia as it would overwrite existing properties.
+ // Here, we will just add the getUserMedia property if it's missing.
+
+ if (navigator.mediaDevices.getUserMedia === undefined) {
+ navigator.mediaDevices.getUserMedia = function (constraints) {
+ // First get ahold of the legacy getUserMedia, if present
+ var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+ // Some browsers just don't implement it - return a rejected promise with an error
+ // to keep a consistent interface
+ if (!getUserMedia) {
+ return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+ } // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+
+ return new Promise(function (resolve, reject) {
+ getUserMedia.call(navigator, constraints, resolve, reject);
+ });
+ };
+ } /**
+ * Creates a `<video>` element that "captures" the audio/video stream from
+ * the webcam and microphone.
+ *
+ * `createCapture()` returns a new
+ * p5.MediaElement object. Videos are shown by
+ * default. They can be hidden by calling `capture.hide()` and drawn to the
+ * canvas using image().
+ *
+ * The first parameter, `type`, is optional. It sets the type of capture to
+ * use. By default, `createCapture()` captures both audio and video. If `VIDEO`
+ * is passed, as in `createCapture(VIDEO)`, only video will be captured.
+ * If `AUDIO` is passed, as in `createCapture(AUDIO)`, only audio will be
+ * captured. A constraints object can also be passed to customize the stream.
+ * See the
+ * W3C documentation for possible properties. Different browsers support different
+ * properties.
+ *
+ * The 'flipped' property is an optional property which can be set to `{flipped:true}`
+ * to mirror the video output.If it is true then it means that video will be mirrored
+ * or flipped and if nothing is mentioned then by default it will be `false`.
+ *
+ * The second parameter,`callback`, is optional. It's a function to call once
+ * the capture is ready for use. The callback function should have one
+ * parameter, `stream`, that's a
+ * MediaStream object.
+ *
+ * Note: `createCapture()` only works when running a sketch locally or using HTTPS. Learn more
+ * here
+ * and here.
+ *
+ * @method createCapture
+ * @param {String|Constant|Object} [type] type of capture, either AUDIO or VIDEO,
+ * or a constraints object. Both video and audio
+ * audio streams are captured by default.
+ * @param {Object} [flipped] flip the capturing video and mirror the output with `{flipped:true}`. By
+ * default it is false.
+ * @param {Function} [callback] function to call once the stream
+ * has loaded.
+ * @return {p5.MediaElement} new p5.MediaElement object.
+ *
+ * @example
+ *
+ * function setup() {
+ * noCanvas();
+ *
+ * // Load the audio.
+ * let beat = createAudio('assets/beat.mp3');
+ *
+ * // Show the default audio controls.
+ * beat.showControls();
+ *
+ * describe('An audio beat plays when the user double-clicks the square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * noCanvas();
+ *
+ * // Create the video capture.
+ * createCapture(VIDEO);
+ *
+ * describe('A video stream from the webcam.');
+ * }
+ *
+ *
+ *
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create the video capture and hide the element.
+ * capture = createCapture(VIDEO);
+ * capture.hide();
+ *
+ * describe('A video stream from the webcam with inverted colors.');
+ * }
+ *
+ * function draw() {
+ * // Draw the video capture within the canvas.
+ * image(capture, 0, 0, width, width * capture.height / capture.width);
+ *
+ * // Invert the colors in the stream.
+ * filter(INVERT);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create the video capture with mirrored output.
+ * capture = createCapture(VIDEO,{ flipped:true });
+ * capture.size(100,100);
+ *
+ * describe('A video stream from the webcam with flipped or mirrored output.');
+ * }
+ *
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.createCapture = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('createCapture', args);
+ // return if getUserMedia is not supported by the browser
+ if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
+ throw new DOMException('getUserMedia not supported in this browser');
+ }
+ var useVideo = true;
+ var useAudio = true;
+ var constraints;
+ var callback;
+ var flipped = false;
+ for (var _i2 = 0, _args = args; _i2 < _args.length; _i2++) {
+ var arg = _args[_i2];
+ if (arg === _main.default.prototype.VIDEO) useAudio = false;
+ else if (arg === _main.default.prototype.AUDIO) useVideo = false;
+ else if (_typeof(arg) === 'object') {
+ if (arg.flipped !== undefined) {
+ flipped = arg.flipped;
+ delete arg.flipped;
+ }
+ constraints = Object.assign({
+ }, constraints, arg);
+ } else if (typeof arg === 'function') {
+ callback = arg;
+ }
+ }
+ var videoConstraints = {
+ video: useVideo,
+ audio: useAudio
+ };
+ constraints = Object.assign({
+ }, videoConstraints, constraints);
+ var domElement = document.createElement('video');
+ // required to work in iOS 11 & up:
+ domElement.setAttribute('playsinline', '');
+ navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
+ try {
+ if ('srcObject' in domElement) {
+ domElement.srcObject = stream;
+ } else {
+ domElement.src = window.URL.createObjectURL(stream);
+ }
+ } catch (err) {
+ domElement.src = stream;
+ }
+ }).catch(function (e) {
+ if (e.name === 'NotFoundError') _main.default._friendlyError('No webcam found on this device', 'createCapture');
+ if (e.name === 'NotAllowedError') _main.default._friendlyError('Access to the camera was denied', 'createCapture');
+ console.error(e);
+ });
+ var videoEl = addElement(domElement, this, true);
+ videoEl.loadedmetadata = false;
+ // set width and height onload metadata
+ domElement.addEventListener('loadedmetadata', function () {
+ domElement.play();
+ if (domElement.width) {
+ videoEl.width = domElement.width;
+ videoEl.height = domElement.height;
+ if (flipped) {
+ videoEl.elt.style.transform = 'scaleX(-1)';
+ }
+ } else {
+ videoEl.width = videoEl.elt.width = domElement.videoWidth;
+ videoEl.height = videoEl.elt.height = domElement.videoHeight;
+ }
+ videoEl.loadedmetadata = true;
+ if (callback) callback(domElement.srcObject);
+ });
+ videoEl.flipped = flipped;
+ return videoEl;
+ };
+ /**
+ * Creates a new p5.Element object.
+ *
+ * The first parameter, `tag`, is a string an HTML tag such as `'h5'`.
+ *
+ * The second parameter, `content`, is optional. It's a string that sets the
+ * HTML content to insert into the new element. New elements have no content
+ * by default.
+ *
+ * @method createElement
+ * @param {String} tag tag for the new element.
+ * @param {String} [content] HTML content to insert into the element.
+ * @return {p5.Element} new p5.Element object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(480, 120);
+ *
+ * // Create a constraints object.
+ * let constraints = {
+ * video: {
+ * mandatory: {
+ * minWidth: 1280,
+ * minHeight: 720
+ * },
+ * optional: [{ maxFrameRate: 10 }]
+ * },
+ * audio: false
+ * };
+ *
+ * // Create the video capture.
+ * createCapture(constraints);
+ *
+ * describe('A video stream from the webcam.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an h5 element with nothing in it.
+ * createElement('h5');
+ *
+ * describe('A gray square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createElement = function (tag, content) {
+ _main.default._validateParameters('createElement', arguments);
+ var elt = document.createElement(tag);
+ if (typeof content !== 'undefined') {
+ elt.innerHTML = content;
+ }
+ return addElement(elt, this);
+ };
+ // =============================================================================
+ // p5.Element additions
+ // =============================================================================
+ /**
+ *
+ * Adds a class to the element.
+ *
+ * @for p5.Element
+ * @method addClass
+ * @param {String} class name of class to add.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an h5 element with the content "p5*js".
+ * let h5 = createElement('h5', 'p5*js');
+ *
+ * // Set the element's style and position.
+ * h5.style('color', 'deeppink');
+ * h5.position(30, 15);
+ *
+ * describe('The text "p5*js" written in pink in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.addClass = function (c) {
+ if (this.elt.className) {
+ if (!this.hasClass(c)) {
+ this.elt.className = this.elt.className + ' ' + c;
+ }
+ } else {
+ this.elt.className = c;
+ }
+ return this;
+ };
+ /**
+ * Removes a class from the element.
+ *
+ * @method removeClass
+ * @param {String} class name of class to remove.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a div element.
+ * let div = createDiv('div');
+ *
+ * // Add a class to the div.
+ * div.addClass('myClass');
+ *
+ * describe('A gray square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.removeClass = function (c) {
+ // Note: Removing a class that does not exist does NOT throw an error in classList.remove method
+ this.elt.classList.remove(c);
+ return this;
+ };
+ /**
+ * Checks if a class is already applied to element.
+ *
+ * @method hasClass
+ * @returns {boolean} a boolean value if element has specified class.
+ * @param c {String} name of class to check.
+ *
+ * @example
+ *
+ * // In this example, a class is set when the div is created
+ * // and removed when mouse is pressed. This could link up
+ * // with a CSS style rule to toggle style properties.
+ *
+ * let div;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a div element.
+ * div = createDiv('div');
+ *
+ * // Add a class to the div.
+ * div.addClass('myClass');
+ *
+ * describe('A gray square.');
+ * }
+ *
+ * // Remove 'myClass' from the div when the user presses the mouse.
+ * function mousePressed() {
+ * div.removeClass('myClass');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.hasClass = function (c) {
+ return this.elt.classList.contains(c);
+ };
+ /**
+ * Toggles whether a class is applied to the element.
+ *
+ * @method toggleClass
+ * @param c {String} class name to toggle.
+ * @chainable
+ *
+ * @example
+ *
+ * let div;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a div element.
+ * div = createDiv('div');
+ *
+ * // Add the class 'show' to the div.
+ * div.addClass('show');
+ *
+ * describe('A gray square.');
+ * }
+ *
+ * // Toggle the class 'show' when the mouse is pressed.
+ * function mousePressed() {
+ * if (div.hasClass('show')) {
+ * div.addClass('show');
+ * } else {
+ * div.removeClass('show');
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.toggleClass = function (c) {
+ // classList also has a toggle() method, but we cannot use that yet as support is unclear.
+ // See https://github.com/processing/p5.js/issues/3631
+ // this.elt.classList.toggle(c);
+ if (this.elt.classList.contains(c)) {
+ this.elt.classList.remove(c);
+ } else {
+ this.elt.classList.add(c);
+ }
+ return this;
+ };
+ /**
+ * Attaches the element as a child of another element.
+ *
+ * `myElement.child()` accepts either a string ID, DOM node, or
+ * p5.Element. For example,
+ * `myElement.child(otherElement)`. If no argument is provided, an array of
+ * children DOM nodes is returned.
+ *
+ * @method child
+ * @returns {Node[]} an array of child nodes.
+ *
+ * @example
+ *
+ * let div;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a div element.
+ * div = createDiv('div');
+ *
+ * // Add the 'show' class to the div.
+ * div.addClass('show');
+ *
+ * describe('A gray square.');
+ * }
+ *
+ * // Toggle the 'show' class when the mouse is pressed.
+ * function mousePressed() {
+ * div.toggleClass('show');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create the div elements.
+ * let div0 = createDiv('Parent');
+ * let div1 = createDiv('Child');
+ *
+ * // Make div1 the child of div0
+ * // using the p5.Element.
+ * div0.child(div1);
+ *
+ * describe('A gray square with the words "Parent" and "Child" written beneath it.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create the div elements.
+ * let div0 = createDiv('Parent');
+ * let div1 = createDiv('Child');
+ *
+ * // Give div1 an ID.
+ * div1.id('apples');
+ *
+ * // Make div1 the child of div0
+ * // using its ID.
+ * div0.child('apples');
+ *
+ * describe('A gray square with the words "Parent" and "Child" written beneath it.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method child
+ * @param {String|p5.Element} [child] the ID, DOM node, or p5.Element
+ * to add to the current element
+ * @chainable
+ */
+ _main.default.Element.prototype.child = function (childNode) {
+ if (typeof childNode === 'undefined') {
+ return this.elt.childNodes;
+ }
+ if (typeof childNode === 'string') {
+ if (childNode[0] === '#') {
+ childNode = childNode.substring(1);
+ }
+ childNode = document.getElementById(childNode);
+ } else if (childNode instanceof _main.default.Element) {
+ childNode = childNode.elt;
+ }
+ if (childNode instanceof HTMLElement) {
+ this.elt.appendChild(childNode);
+ }
+ return this;
+ };
+ /**
+ * Centers the element either vertically, horizontally, or both.
+ *
+ * `center()` will center the element relative to its parent or according to
+ * the page's body if the element has no parent.
+ *
+ * If no argument is passed, as in `myElement.center()` the element is aligned
+ * both vertically and horizontally.
+ *
+ * @method center
+ * @param {String} [align] passing 'vertical', 'horizontal' aligns element accordingly
+ * @chainable
+ *
+ * @example
+ *
+ * // This example assumes there is a div already on the page
+ * // with id "myChildDiv".
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create the div elements.
+ * let div0 = createDiv('Parent');
+ *
+ * // Select the child element by its ID.
+ * let elt = document.getElementById('myChildDiv');
+ *
+ * // Make div1 the child of div0
+ * // using its HTMLElement object.
+ * div0.child(elt);
+ *
+ * describe('A gray square with the words "Parent" and "Child" written beneath it.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.center = function (align) {
+ var style = this.elt.style.display;
+ var hidden = this.elt.style.display === 'none';
+ var parentHidden = this.parent().style.display === 'none';
+ var pos = {
+ x: this.elt.offsetLeft,
+ y: this.elt.offsetTop
+ };
+ if (hidden) this.show();
+ if (parentHidden) this.parent().show();
+ this.elt.style.display = 'block';
+ this.position(0, 0);
+ var wOffset = Math.abs(this.parent().offsetWidth - this.elt.offsetWidth);
+ var hOffset = Math.abs(this.parent().offsetHeight - this.elt.offsetHeight);
+ if (align === 'both' || align === undefined) {
+ this.position(wOffset / 2 + this.parent().offsetLeft, hOffset / 2 + this.parent().offsetTop);
+ } else if (align === 'horizontal') {
+ this.position(wOffset / 2 + this.parent().offsetLeft, pos.y);
+ } else if (align === 'vertical') {
+ this.position(pos.x, hOffset / 2 + this.parent().offsetTop);
+ }
+ this.style('display', style);
+ if (hidden) this.hide();
+ if (parentHidden) this.parent().hide();
+ return this;
+ };
+ /**
+ * Sets the inner HTML of the element, replacing any existing HTML.
+ *
+ * The second parameter, `append`, is optional. If `true` is passed, as in
+ * `myElement.html('hi', true)`, the HTML is appended instead of replacing
+ * existing HTML.
+ *
+ * If no arguments are passed, as in `myElement.html()`, the element's inner
+ * HTML is returned.
+ *
+ * @for p5.Element
+ * @method html
+ * @returns {String} the inner HTML of the element
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create the div element and style it.
+ * let div = createDiv('');
+ * div.size(10, 10);
+ * div.style('background-color', 'orange');
+ *
+ * // Center the div relative to the page's body.
+ * div.center();
+ *
+ * describe('A gray square and an orange rectangle. The rectangle is at the center of the page.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create the div element and set its size.
+ * let div = createDiv('');
+ * div.size(100, 100);
+ *
+ * // Set the inner HTML to "hi".
+ * div.html('hi');
+ *
+ * describe('A gray square with the word "hi" written beneath it.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create the div element and set its size.
+ * let div = createDiv('Hello ');
+ * div.size(100, 100);
+ *
+ * // Append "World" to the div's HTML.
+ * div.html('World', true);
+ *
+ * describe('A gray square with the text "Hello World" written beneath it.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method html
+ * @param {String} [html] the HTML to be placed inside the element
+ * @param {boolean} [append] whether to append HTML to existing
+ * @chainable
+ */
+ _main.default.Element.prototype.html = function () {
+ if (arguments.length === 0) {
+ return this.elt.innerHTML;
+ } else if (arguments.length <= 1 ? undefined : arguments[1]) {
+ this.elt.insertAdjacentHTML('beforeend', arguments.length <= 0 ? undefined : arguments[0]);
+ return this;
+ } else {
+ this.elt.innerHTML = arguments.length <= 0 ? undefined : arguments[0];
+ return this;
+ }
+ };
+ /**
+ * Sets the element's position.
+ *
+ * The first two parameters, `x` and `y`, set the element's position relative
+ * to the top-left corner of the web page.
+ *
+ * The third parameter, `positionType`, is optional. It sets the element's
+ * positioning scheme.
+ * `positionType` is a string that can be either `'static'`, `'fixed'`,
+ * `'relative'`, `'sticky'`, `'initial'`, or `'inherit'`.
+ *
+ * If no arguments passed, as in `myElement.position()`, the method returns
+ * the element's position in an object, as in `{ x: 0, y: 0 }`.
+ *
+ * @method position
+ * @returns {Object} object of form `{ x: 0, y: 0 }` containing the element's position.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create the div element.
+ * let div = createDiv('Hello');
+ *
+ * // Prints "Hello" to the console.
+ * print(div.html());
+ *
+ * describe('A gray square with the word "Hello!" written beneath it.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Positions the canvas 50px to the right and 100px
+ * // below the top-left corner of the window.
+ * cnv.position(50, 100);
+ *
+ * describe('A gray square that is 50 pixels to the right and 100 pixels down from the top-left corner of the web page.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method position
+ * @param {Number} [x] x-position relative to top-left of window (optional)
+ * @param {Number} [y] y-position relative to top-left of window (optional)
+ * @param {String} [positionType] it can be static, fixed, relative, sticky, initial or inherit (optional)
+ * @chainable
+ */
+ _main.default.Element.prototype.position = function () {
+ if (arguments.length === 0) {
+ return {
+ x: this.elt.offsetLeft,
+ y: this.elt.offsetTop
+ };
+ } else {
+ var positionType = 'absolute';
+ if ((arguments.length <= 2 ? undefined : arguments[2]) === 'static' || (arguments.length <= 2 ? undefined : arguments[2]) === 'fixed' || (arguments.length <= 2 ? undefined : arguments[2]) === 'relative' || (arguments.length <= 2 ? undefined : arguments[2]) === 'sticky' || (arguments.length <= 2 ? undefined : arguments[2]) === 'initial' || (arguments.length <= 2 ? undefined : arguments[2]) === 'inherit') {
+ positionType = arguments.length <= 2 ? undefined : arguments[2];
+ }
+ this.elt.style.position = positionType;
+ this.elt.style.left = (arguments.length <= 0 ? undefined : arguments[0]) + 'px';
+ this.elt.style.top = (arguments.length <= 1 ? undefined : arguments[1]) + 'px';
+ this.x = arguments.length <= 0 ? undefined : arguments[0];
+ this.y = arguments.length <= 1 ? undefined : arguments[1];
+ return this;
+ }
+ };
+ /* Helper method called by p5.Element.style() */
+ _main.default.Element.prototype._translate = function () {
+ this.elt.style.position = 'absolute';
+ // save out initial non-translate transform styling
+ var transform = '';
+ if (this.elt.style.transform) {
+ transform = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
+ transform = transform.replace(/translate[X-Z]?\(.*\)/g, '');
+ }
+ if (arguments.length === 2) {
+ this.elt.style.transform = 'translate(' + (arguments.length <= 0 ? undefined : arguments[0]) + 'px, ' + (arguments.length <= 1 ? undefined : arguments[1]) + 'px)';
+ } else if (arguments.length > 2) {
+ this.elt.style.transform = 'translate3d(' + (arguments.length <= 0 ? undefined : arguments[0]) + 'px,' + (arguments.length <= 1 ? undefined : arguments[1]) + 'px,' + (arguments.length <= 2 ? undefined : arguments[2]) + 'px)';
+ if (arguments.length === 3) {
+ this.elt.parentElement.style.perspective = '1000px';
+ } else {
+ this.elt.parentElement.style.perspective = (arguments.length <= 3 ? undefined : arguments[3]) + 'px';
+ }
+ } // add any extra transform styling back on end
+
+ this.elt.style.transform += transform;
+ return this;
+ };
+ /* Helper method called by p5.Element.style() */
+ _main.default.Element.prototype._rotate = function () {
+ // save out initial non-rotate transform styling
+ var transform = '';
+ if (this.elt.style.transform) {
+ transform = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+ transform = transform.replace(/rotate[X-Z]?\(.*\)/g, '');
+ }
+ if (arguments.length === 1) {
+ this.elt.style.transform = 'rotate(' + (arguments.length <= 0 ? undefined : arguments[0]) + 'deg)';
+ } else if (arguments.length === 2) {
+ this.elt.style.transform = 'rotate(' + (arguments.length <= 0 ? undefined : arguments[0]) + 'deg, ' + (arguments.length <= 1 ? undefined : arguments[1]) + 'deg)';
+ } else if (arguments.length === 3) {
+ this.elt.style.transform = 'rotateX(' + (arguments.length <= 0 ? undefined : arguments[0]) + 'deg)';
+ this.elt.style.transform += 'rotateY(' + (arguments.length <= 1 ? undefined : arguments[1]) + 'deg)';
+ this.elt.style.transform += 'rotateZ(' + (arguments.length <= 2 ? undefined : arguments[2]) + 'deg)';
+ } // add remaining transform back on
+
+ this.elt.style.transform += transform;
+ return this;
+ };
+ /**
+ * Applies a style to the element by adding a
+ * CSS declaration.
+ *
+ * The first parameter, `property`, is a string. If the name of a style
+ * property is passed, as in `myElement.style('color')`, the method returns
+ * the current value as a string or `null` if it hasn't been set. If a
+ * `property:style` string is passed, as in
+ * `myElement.style('color:deeppink')`, the method sets the style `property`
+ * to `value`.
+ *
+ * The second parameter, `value`, is optional. It sets the property's value.
+ * `value` can be a string, as in
+ * `myElement.style('color', 'deeppink')`, or a
+ * p5.Color object, as in
+ * `myElement.style('color', myColor)`.
+ *
+ * @method style
+ * @param {String} property style property to set.
+ * @returns {String} value of the property.
+ *
+ * @example
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Positions the canvas at the top-left corner
+ * // of the window with a 'fixed' position type.
+ * cnv.position(0, 0, 'fixed');
+ *
+ * describe('A gray square in the top-left corner of the web page.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a paragraph element and set its font color to "deeppink".
+ * let p = createP('p5*js');
+ * p.position(25, 20);
+ * p.style('color', 'deeppink');
+ *
+ * describe('The text p5*js written in pink on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let c = color('deeppink');
+ *
+ * // Create a paragraph element and set its font color using a p5.Color object.
+ * let p = createP('p5*js');
+ * p.position(25, 20);
+ * p.style('color', c);
+ *
+ * describe('The text p5*js written in pink on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a paragraph element and set its font color to "deeppink"
+ * // using property:value syntax.
+ * let p = createP('p5*js');
+ * p.position(25, 20);
+ * p.style('color:deeppink');
+ *
+ * describe('The text p5*js written in pink on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method style
+ * @param {String} property
+ * @param {String|p5.Color} value value to assign to the property.
+ * @return {String} value of the property.
+ * @chainable
+ */
+ _main.default.Element.prototype.style = function (prop, val) {
+ var self = this;
+ if (val instanceof _main.default.Color) {
+ val = 'rgba(' + val.levels[0] + ',' + val.levels[1] + ',' + val.levels[2] + ',' + val.levels[3] / 255 + ')';
+ }
+ if (typeof val === 'undefined') {
+ if (prop.indexOf(':') === - 1) {
+ // no value set, so assume requesting a value
+ var styles = window.getComputedStyle(self.elt);
+ var style = styles.getPropertyValue(prop);
+ return style;
+ } else {
+ // value set using `:` in a single line string
+ var attrs = prop.split(';');
+ for (var i = 0; i < attrs.length; i++) {
+ var parts = attrs[i].split(':');
+ if (parts[0] && parts[1]) {
+ this.elt.style[parts[0].trim()] = parts[1].trim();
+ }
+ }
+ }
+ } else {
+ // input provided as key,val pair
+ this.elt.style[prop] = val;
+ if (prop === 'width' || prop === 'height' || prop === 'left' || prop === 'top') {
+ var _styles = window.getComputedStyle(self.elt);
+ var styleVal = _styles.getPropertyValue(prop);
+ var numVal = styleVal.replace(/[^\d.]/g, '');
+ this[prop] = Math.round(parseFloat(numVal, 10));
+ }
+ }
+ return this;
+ };
+ /**
+ * Adds an
+ * attribute
+ * to the element.
+ *
+ * This method is useful for advanced tasks. Most commonly-used attributes,
+ * such as `id`, can be set with their dedicated methods. For example,
+ * `nextButton.id('next')` sets an element's `id` attribute. Calling
+ * `nextButton.attribute('id', 'next')` has the same effect.
+ *
+ * The first parameter, `attr`, is the attribute's name as a string. Calling
+ * `myElement.attribute('align')` returns the attribute's current value as a
+ * string or `null` if it hasn't been set.
+ *
+ * The second parameter, `value`, is optional. It's a string used to set the
+ * attribute's value. For example, calling
+ * `myElement.attribute('align', 'center')` sets the element's horizontal
+ * alignment to `center`.
+ *
+ * @method attribute
+ * @return {String} value of the attribute.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an empty paragraph element and set its font color to "deeppink".
+ * let p = createP();
+ * p.position(5, 5);
+ * p.style('color', 'deeppink');
+ *
+ * // Get the element's color as an RGB color string.
+ * let c = p.style('color');
+ *
+ * // Set the element's inner HTML using the RGB color string.
+ * p.html(c);
+ *
+ * describe('The text "rgb(255, 20, 147)" written in pink on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method attribute
+ * @param {String} attr attribute to set.
+ * @param {String} value value to assign to the attribute.
+ * @chainable
+ */
+ _main.default.Element.prototype.attribute = function (attr, value) {
+ //handling for checkboxes and radios to ensure options get
+ //attributes not divs
+ if (this.elt.firstChild != null && (this.elt.firstChild.type === 'checkbox' || this.elt.firstChild.type === 'radio')) {
+ if (typeof value === 'undefined') {
+ return this.elt.firstChild.getAttribute(attr);
+ } else {
+ for (var i = 0; i < this.elt.childNodes.length; i++) {
+ this.elt.childNodes[i].setAttribute(attr, value);
+ }
+ }
+ } else if (typeof value === 'undefined') {
+ return this.elt.getAttribute(attr);
+ } else {
+ this.elt.setAttribute(attr, value);
+ return this;
+ }
+ };
+ /**
+ * Removes an attribute from the element.
+ *
+ * The parameter `attr` is the attribute's name as a string. For example,
+ * calling `myElement.removeAttribute('align')` removes its `align`
+ * attribute if it's been set.
+ *
+ * @method removeAttribute
+ * @param {String} attr attribute to remove.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a container div element and place it at the top-left corner.
+ * let container = createDiv();
+ * container.position(0, 0);
+ *
+ * // Create a paragraph element and place it within the container.
+ * // Set its horizontal alignment to "left".
+ * let p1 = createP('hi');
+ * p1.parent(container);
+ * p1.attribute('align', 'left');
+ *
+ * // Create a paragraph element and place it within the container.
+ * // Set its horizontal alignment to "center".
+ * let p2 = createP('hi');
+ * p2.parent(container);
+ * p2.attribute('align', 'center');
+ *
+ * // Create a paragraph element and place it within the container.
+ * // Set its horizontal alignment to "right".
+ * let p3 = createP('hi');
+ * p3.parent(container);
+ * p3.attribute('align', 'right');
+ *
+ * describe('A gray square with the text "hi" written on three separate lines, each placed further to the right.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.removeAttribute = function (attr) {
+ if (this.elt.firstChild != null && (this.elt.firstChild.type === 'checkbox' || this.elt.firstChild.type === 'radio')) {
+ for (var i = 0; i < this.elt.childNodes.length; i++) {
+ this.elt.childNodes[i].removeAttribute(attr);
+ }
+ }
+ this.elt.removeAttribute(attr);
+ return this;
+ };
+ /**
+ * Returns or sets the element's value.
+ *
+ * Calling `myElement.value()` returns the element's current value.
+ *
+ * The parameter, `value`, is an optional number or string. If provided,
+ * as in `myElement.value(123)`, it's used to set the element's value.
+ *
+ * @method value
+ * @return {String|Number} value of the element.
+ *
+ * @example
+ *
+ * let p;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a paragraph element and place it in the center of the canvas.
+ * // Set its "align" attribute to "center".
+ * p = createP('hi');
+ * p.position(0, 20);
+ * p.attribute('align', 'center');
+ *
+ * describe('The text "hi" written in black at the center of a gray square. The text moves to the left edge when double-clicked.');
+ * }
+ *
+ * // Remove the 'align' attribute when the user double-clicks the paragraph.
+ * function doubleClicked() {
+ * p.removeAttribute('align');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let input;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a text input and place it beneath the canvas.
+ * // Set its default value to "hello".
+ * input = createInput('hello');
+ * input.position(0, 100);
+ *
+ * describe('The text from an input box is displayed on a gray square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Use the input's value to display a message.
+ * let msg = input.value();
+ * text(msg, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method value
+ * @param {String|Number} value
+ * @chainable
+ */
+ _main.default.Element.prototype.value = function () {
+ if (arguments.length > 0) {
+ this.elt.value = arguments.length <= 0 ? undefined : arguments[0];
+ return this;
+ } else {
+ if (this.elt.type === 'range') {
+ return parseFloat(this.elt.value);
+ } else return this.elt.value;
+ }
+ };
+ /**
+ * Shows the current element.
+ *
+ * @method show
+ * @chainable
+ *
+ * @example
+ *
+ * let input;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a text input and place it beneath the canvas.
+ * // Set its default value to "hello".
+ * input = createInput('hello');
+ * input.position(0, 100);
+ *
+ * describe('The text from an input box is displayed on a gray square. The text resets to "hello" when the user double-clicks the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Use the input's value to display a message.
+ * let msg = input.value();
+ * text(msg, 0, 55);
+ * }
+ *
+ * // Reset the input's value.
+ * function doubleClicked() {
+ * input.value('hello');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.show = function () {
+ this.elt.style.display = 'block';
+ return this;
+ };
+ /**
+ * Hides the current element.
+ *
+ * @method hide
+ * @chainable
+ *
+ * @example
+ * let p;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a paragraph element.
+ * p = createP('p5*js');
+ * p.position(10, 10);
+ *
+ * describe('The text "p5*js" at the center of a gray square. The text disappears when the user double-clicks the square.');
+ * }
+ *
+ * // Hide the paragraph when the user double-clicks.
+ * function doubleClicked() {
+ * p.hide();
+ * }
+ *
+ *
+ */
+ _main.default.Element.prototype.hide = function () {
+ this.elt.style.display = 'none';
+ return this;
+ };
+ /**
+ * Sets the element's width and height.
+ *
+ * Calling `myElement.size()` without an argument returns the element's size
+ * as an object with the properties `width` and `height`. For example,
+ * `{ width: 20, height: 10 }`.
+ *
+ * The first parameter, `width`, is optional. It's a number used to set the
+ * element's width. Calling `myElement.size(10)`
+ *
+ * The second parameter, 'height`, is also optional. It's a
+ * number used to set the element's height. For example, calling
+ * `myElement.size(20, 10)` sets the element's width to 20 pixels and height
+ * to 10 pixels.
+ *
+ * The constant `AUTO` can be used to adjust one dimension at a time while
+ * maintaining the aspect ratio, which is `width / height`. For example,
+ * consider an element that's 200 pixels wide and 100 pixels tall. Calling
+ * `myElement.size(20, AUTO)` sets the width to 20 pixels and height to 10
+ * pixels.
+ *
+ * Note: In the case of elements that need to load data, such as images, wait
+ * to call `myElement.size()` until after the data loads.
+ *
+ * @method size
+ * @return {Object} width and height of the element in an object.
+ *
+ * @example
+ *
+ * let p;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a paragraph element and hide it.
+ * p = createP('p5*js');
+ * p.position(10, 10);
+ * p.hide();
+ *
+ * describe('A gray square. The text "p5*js" appears when the user double-clicks the square.');
+ * }
+ *
+ * // Show the paragraph when the user double-clicks.
+ * function doubleClicked() {
+ * p.show();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a pink div element and place it at the top-left corner.
+ * let div = createDiv();
+ * div.position(10, 10);
+ * div.style('background-color', 'deeppink');
+ *
+ * // Set the div's width to 80 pixels and height to 20 pixels.
+ * div.size(80, 20);
+ *
+ * describe('A gray square with a pink rectangle near its top.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a pink div element and place it at the top-left corner.
+ * let div = createDiv();
+ * div.position(10, 10);
+ * div.style('background-color', 'deeppink');
+ *
+ * // Set the div's width to 80 pixels and height to 40 pixels.
+ * div.size(80, 40);
+ *
+ * // Get the div's size as an object.
+ * let s = div.size();
+ *
+ * // Display the div's dimensions.
+ * div.html(`${s.width} x ${s.height}`);
+ *
+ * describe('A gray square with a pink rectangle near its top. The text "80 x 40" is written within the rectangle.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method size
+ * @param {Number|Constant} [w] width of the element, either AUTO, or a number.
+ * @param {Number|Constant} [h] height of the element, either AUTO, or a number.
+ * @chainable
+ */
+ _main.default.Element.prototype.size = function (w, h) {
+ if (arguments.length === 0) {
+ return {
+ width: this.elt.offsetWidth,
+ height: this.elt.offsetHeight
+ };
+ } else {
+ var aW = w;
+ var aH = h;
+ var AUTO = _main.default.prototype.AUTO;
+ if (aW !== AUTO || aH !== AUTO) {
+ if (aW === AUTO) {
+ aW = h * this.width / this.height;
+ } else if (aH === AUTO) {
+ aH = w * this.height / this.width;
+ } // set diff for cnv vs normal div
+
+ if (this.elt instanceof HTMLCanvasElement) {
+ var j = {
+ };
+ var k = this.elt.getContext('2d');
+ var prop;
+ for (prop in k) {
+ j[prop] = k[prop];
+ }
+ this.elt.setAttribute('width', aW * this._pInst._pixelDensity);
+ this.elt.setAttribute('height', aH * this._pInst._pixelDensity);
+ this.elt.style.width = aW + 'px';
+ this.elt.style.height = aH + 'px';
+ this._pInst.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
+ for (prop in j) {
+ this.elt.getContext('2d') [prop] = j[prop];
+ }
+ } else {
+ this.elt.style.width = aW + 'px';
+ this.elt.style.height = aH + 'px';
+ this.elt.width = aW;
+ this.elt.height = aH;
+ }
+ this.width = aW;
+ this.height = aH;
+ if (this._pInst && this._pInst._curElement) {
+ // main canvas associated with p5 instance
+ if (this._pInst._curElement.elt === this.elt) {
+ this._pInst._setProperty('width', aW);
+ this._pInst._setProperty('height', aH);
+ }
+ }
+ }
+ return this;
+ }
+ };
+ /**
+ * Removes the element, stops all audio/video streams, and removes all
+ * callback functions.
+ *
+ * @method remove
+ *
+ * @example
+ *
+ * let img1;
+ * let img2;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Load an image of an astronaut on the moon
+ * // and place it at the top-left of the canvas.
+ * img1 = createImg(
+ * 'assets/moonwalk.jpg',
+ * 'An astronaut walking on the moon',
+ * ''
+ * );
+ * img1.position(0, 0);
+ *
+ * // Load an image of an astronaut on the moon
+ * // and place it at the top-left of the canvas.
+ * // Resize the image once it's loaded.
+ * img2 = createImg(
+ * 'assets/moonwalk.jpg',
+ * 'An astronaut walking on the moon',
+ * '',
+ * resizeImage
+ * );
+ * img2.position(0, 0);
+ *
+ * describe('A gray square two copies of a space image at the top-left. The copy in front is smaller.');
+ * }
+ *
+ * // Resize img2 and keep its aspect ratio.
+ * function resizeImage() {
+ * img2.size(50, AUTO);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.remove = function () {
+ // stop all audios/videos and detach all devices like microphone/camera etc
+ // used as input/output for audios/videos.
+ if (this instanceof _main.default.MediaElement) {
+ this.stop();
+ var sources = this.elt.srcObject;
+ if (sources !== null) {
+ var tracks = sources.getTracks();
+ tracks.forEach(function (track) {
+ track.stop();
+ });
+ }
+ } // delete the reference in this._pInst._elements
+
+ var index = this._pInst._elements.indexOf(this);
+ if (index !== - 1) {
+ this._pInst._elements.splice(index, 1);
+ } // deregister events
+
+ for (var ev in this._events) {
+ this.elt.removeEventListener(ev, this._events[ev]);
+ }
+ if (this.elt && this.elt.parentNode) {
+ this.elt.parentNode.removeChild(this.elt);
+ }
+ };
+ /**
+ * Calls a function when the user drops a file on the element.
+ *
+ * The first parameter, `callback`, is a function to call once the file loads.
+ * The callback function should have one parameter, `file`, that's a
+ * p5.File object. If the user drops multiple files on
+ * the element, `callback`, is called once for each file.
+ *
+ * The second parameter, `fxn`, is a function to call when the browser detects
+ * one or more dropped files. The callback function should have one
+ * parameter, `event`, that's a
+ * DragEvent.
+ *
+ * @method drop
+ * @param {Function} callback called when a file loads. Called once for each file dropped.
+ * @param {Function} [fxn] called once when any files are dropped.
+ * @chainable
+ *
+ * @example
+ *
+ * let p;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a paragraph element.
+ * p = createP('p5*js');
+ * p.position(10, 10);
+ *
+ * describe('The text "p5*js" written at the center of a gray square. ');
+ * }
+ *
+ * // Remove the paragraph when the user double-clicks.
+ * function doubleClicked() {
+ * p.remove();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Drop an image on the canvas to view
+ * // this example.
+ * let img;
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call handleFile() when a file that's dropped on the canvas has loaded.
+ * c.drop(handleFile);
+ *
+ * describe('A gray square. When the user drops an image on the square, it is displayed.');
+ * }
+ *
+ * // Remove the existing image and display the new one.
+ * function handleFile(file) {
+ * // Remove the current image, if any.
+ * if (img) {
+ * img.remove();
+ * }
+ *
+ * // Create an ![]()
element with the
+ * // dropped file.
+ * img = createImg(file.data, '');
+ * img.hide();
+ *
+ * // Draw the image.
+ * image(img, 0, 0, width, height);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.drop = function (callback, fxn) {
+ // Is the file stuff supported?
+ if (window.File && window.FileReader && window.FileList && window.Blob) {
+ if (!this._dragDisabled) {
+ this._dragDisabled = true;
+ var preventDefault = function preventDefault(evt) {
+ evt.preventDefault();
+ };
+ // If you want to be able to drop you've got to turn off
+ // a lot of default behavior.
+ // avoid `attachListener` here, since it overrides other handlers.
+ this.elt.addEventListener('dragover', preventDefault);
+ // If this is a drag area we need to turn off the default behavior
+ this.elt.addEventListener('dragleave', preventDefault);
+ } // Deal with the files
+
+ _main.default.Element._attachListener('drop', function (evt) {
+ evt.preventDefault();
+ // Call the second argument as a callback that receives the raw drop event
+ if (typeof fxn === 'function') {
+ fxn.call(this, evt);
+ } // A FileList
+
+ var files = evt.dataTransfer.files;
+ // Load each one and trigger the callback
+ var _iteratorNormalCompletion10 = true;
+ var _didIteratorError10 = false;
+ var _iteratorError10 = undefined;
+ try {
+ for (var _iterator10 = files[Symbol.iterator](), _step10; !(_iteratorNormalCompletion10 = (_step10 = _iterator10.next()).done); _iteratorNormalCompletion10 = true) {
+ var f = _step10.value;
+ _main.default.File._load(f, callback);
+ }
+ } catch (err) {
+ _didIteratorError10 = true;
+ _iteratorError10 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion10 && _iterator10.return != null) {
+ _iterator10.return();
+ }
+ } finally {
+ if (_didIteratorError10) {
+ throw _iteratorError10;
+ }
+ }
+ }
+ }, this);
+ } else {
+ console.log('The File APIs are not fully supported in this browser.');
+ }
+ return this;
+ };
+ /**
+ * Makes the element draggable.
+ *
+ * The parameter, `elmnt`, is optional. If another
+ * p5.Element object is passed, as in
+ * `myElement.draggable(otherElement)`, the other element will become draggable.
+ *
+ * @method draggable
+ * @param {p5.Element} [elmnt] another p5.Element.
+ * @chainable
+ *
+ * @example
+ *
+ * // Drop an image on the canvas to view
+ * // this example.
+ * let img;
+ * let msg;
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Call functions when the user drops a file on the canvas
+ * // and when the file loads.
+ * c.drop(handleFile, handleDrop);
+ *
+ * describe('A gray square. When the user drops an image on the square, it is displayed. The id attribute of canvas element is also displayed.');
+ * }
+ *
+ * // Display the image when it loads.
+ * function handleFile(file) {
+ * // Remove the current image, if any.
+ * if (img) {
+ * img.remove();
+ * }
+ *
+ * // Create an img element with the dropped file.
+ * img = createImg(file.data, '');
+ * img.hide();
+ *
+ * // Draw the image.
+ * image(img, 0, 0, width, height);
+ * }
+ *
+ * // Display the file's name when it loads.
+ * function handleDrop(event) {
+ * // Remove current paragraph, if any.
+ * if (msg) {
+ * msg.remove();
+ * }
+ *
+ * // Use event to get the drop target's id.
+ * let id = event.target.id;
+ *
+ * // Write the canvas' id beneath it.
+ * msg = createP(id);
+ * msg.position(0, 100);
+ *
+ * // Set the font color randomly for each drop.
+ * let c = random(['red', 'green', 'blue']);
+ * msg.style('color', c);
+ * msg.style('font-size', '12px');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Element.prototype.draggable = function (elmMove) {
+ var isTouch = ('ontouchstart' in window);
+ var x = 0,
+ y = 0,
+ px = 0,
+ py = 0,
+ elmDrag,
+ dragMouseDownEvt = isTouch ? 'touchstart' : 'mousedown',
+ closeDragElementEvt = isTouch ? 'touchend' : 'mouseup',
+ elementDragEvt = isTouch ? 'touchmove' : 'mousemove';
+ if (elmMove === undefined) {
+ elmMove = this.elt;
+ elmDrag = elmMove;
+ } else if (elmMove !== this.elt && elmMove.elt !== this.elt) {
+ elmMove = elmMove.elt;
+ elmDrag = this.elt;
+ }
+ elmDrag.addEventListener(dragMouseDownEvt, dragMouseDown, false);
+ elmDrag.style.cursor = 'move';
+ function dragMouseDown(e) {
+ e = e || window.event;
+ if (isTouch) {
+ var touches = e.changedTouches;
+ px = parseInt(touches[0].clientX);
+ py = parseInt(touches[0].clientY);
+ } else {
+ px = parseInt(e.clientX);
+ py = parseInt(e.clientY);
+ }
+ document.addEventListener(closeDragElementEvt, closeDragElement, false);
+ document.addEventListener(elementDragEvt, elementDrag, false);
+ return false;
+ }
+ function elementDrag(e) {
+ e = e || window.event;
+ if (isTouch) {
+ var touches = e.changedTouches;
+ x = px - parseInt(touches[0].clientX);
+ y = py - parseInt(touches[0].clientY);
+ px = parseInt(touches[0].clientX);
+ py = parseInt(touches[0].clientY);
+ } else {
+ x = px - parseInt(e.clientX);
+ y = py - parseInt(e.clientY);
+ px = parseInt(e.clientX);
+ py = parseInt(e.clientY);
+ }
+ elmMove.style.left = elmMove.offsetLeft - x + 'px';
+ elmMove.style.top = elmMove.offsetTop - y + 'px';
+ }
+ function closeDragElement() {
+ document.removeEventListener(closeDragElementEvt, closeDragElement, false);
+ document.removeEventListener(elementDragEvt, elementDrag, false);
+ }
+ return this;
+ };
+ /*** SCHEDULE EVENTS ***/
+ // Cue inspired by JavaScript setTimeout, and the
+ // Tone.js Transport Timeline Event, MIT License Yotam Mann 2015 tonejs.org
+ // eslint-disable-next-line no-unused-vars
+ var Cue = function Cue(callback, time, id, val) {
+ _classCallCheck(this, Cue);
+ this.callback = callback;
+ this.time = time;
+ this.id = id;
+ this.val = val;
+ }; // =============================================================================
+ // p5.MediaElement additions
+ // =============================================================================
+ /**
+ * A class to handle audio and video.
+ *
+ * `p5.MediaElement` extends p5.Element with
+ * methods to handle audio and video. `p5.MediaElement` objects are created by
+ * calling createVideo,
+ * createAudio, and
+ * createCapture.
+ *
+ * @class p5.MediaElement
+ * @constructor
+ * @param {String} elt DOM node that is wrapped
+ * @extends p5.Element
+ *
+ * @example
+ *
+ * let stickyNote;
+ * let textInput;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a div element and style it.
+ * stickyNote = createDiv('Note');
+ * stickyNote.position(5, 5);
+ * stickyNote.size(80, 20);
+ * stickyNote.style('font-size', '16px');
+ * stickyNote.style('font-family', 'Comic Sans MS');
+ * stickyNote.style('background', 'orchid');
+ * stickyNote.style('padding', '5px');
+ *
+ * // Make the note draggable.
+ * stickyNote.draggable();
+ *
+ * // Create a panel div and style it.
+ * let panel = createDiv('');
+ * panel.position(5, 40);
+ * panel.size(80, 50);
+ * panel.style('background', 'orchid');
+ * panel.style('font-size', '16px');
+ * panel.style('padding', '5px');
+ * panel.style('text-align', 'center');
+ *
+ * // Make the panel draggable.
+ * panel.draggable();
+ *
+ * // Create a text input and style it.
+ * textInput = createInput('Note');
+ * textInput.size(70);
+ *
+ * // Add the input to the panel.
+ * textInput.parent(panel);
+ *
+ * // Call handleInput() when text is input.
+ * textInput.input(handleInput);
+ *
+ * describe(
+ * 'A gray square with two purple rectangles that move when dragged. The top rectangle displays the text that is typed into the bottom rectangle.'
+ * );
+ * }
+ *
+ * // Update stickyNote's HTML when text is input.
+ * function handleInput() {
+ * stickyNote.html(textInput.value());
+ * }
+ *
+ *
+ *
+ */
+ var MediaElement = /*#__PURE__*/ function (_p5$Element) {
+ _inherits(MediaElement, _p5$Element);
+ var _super = _createSuper(MediaElement);
+ function MediaElement(elt, pInst) {
+ var _this;
+ _classCallCheck(this, MediaElement);
+ _this = _super.call(this, elt, pInst);
+ var self = _assertThisInitialized(_this);
+ _this.elt.crossOrigin = 'anonymous';
+ _this._prevTime = 0;
+ _this._cueIDCounter = 0;
+ _this._cues = [
+ ];
+ _this.pixels = [
+ ];
+ _this._pixelsState = _assertThisInitialized(_this);
+ _this._pixelDensity = 1;
+ _this._modified = false;
+ // Media has an internal canvas that is used when drawing it to the main
+ // canvas. It will need to be updated each frame as the video itself plays.
+ // We don't want to update it every time we draw, however, in case the user
+ // has used load/updatePixels. To handle this, we record the frame drawn to
+ // the internal canvas so we only update it if the frame has changed.
+ _this._frameOnCanvas = - 1;
+ /**
+ * Path to the media element's source as a string.
+ *
+ * @property src
+ * @return {String} src
+ *
+ * @example
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createCapture().
+ * capture = createCapture(VIDEO);
+ * capture.hide();
+ *
+ * describe('A webcam feed with inverted colors.');
+ * }
+ *
+ * function draw() {
+ * // Display the video stream and invert the colors.
+ * image(capture, 0, 0, width, width * capture.height / capture.width);
+ * filter(INVERT);
+ * }
+ *
+ *
+ *
+ */
+ Object.defineProperty(self, 'src', {
+ get: function get() {
+ var firstChildSrc = self.elt.children[0].src;
+ var srcVal = self.elt.src === window.location.href ? '' : self.elt.src;
+ var ret = firstChildSrc === window.location.href ? srcVal : firstChildSrc;
+ return ret;
+ },
+ set: function set(newValue) {
+ for (var i = 0; i < self.elt.children.length; i++) {
+ self.elt.removeChild(self.elt.children[i]);
+ }
+ var source = document.createElement('source');
+ source.src = newValue;
+ elt.appendChild(source);
+ self.elt.src = newValue;
+ self.modified = true;
+ }
+ });
+ // private _onended callback, set by the method: onended(callback)
+ self._onended = function () {
+ };
+ self.elt.onended = function () {
+ self._onended(self);
+ };
+ return _this;
+ } /**
+ * Plays audio or video from a media element.
+ *
+ * @method play
+ * @chainable
+ *
+ * @example
+ *
+ * let beat;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * beat = createAudio('assets/beat.mp3');
+ *
+ * describe('The text "https://p5js.org/reference/assets/beat.mp3" written in black on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * textWrap(CHAR);
+ * text(beat.src, 10, 10, 80, 80);
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(MediaElement, [
+ {
+ key: 'play',
+ value: function play() {
+ var _this2 = this;
+ if (this.elt.currentTime === this.elt.duration) {
+ this.elt.currentTime = 0;
+ }
+ var promise;
+ if (this.elt.readyState > 1) {
+ promise = this.elt.play();
+ } else {
+ // in Chrome, playback cannot resume after being stopped and must reload
+ this.elt.load();
+ promise = this.elt.play();
+ }
+ if (promise && promise.catch) {
+ promise.catch(function (e) {
+ // if it's an autoplay failure error
+ if (e.name === 'NotAllowedError') {
+ if (typeof IS_MINIFIED === 'undefined') {
+ _main.default._friendlyAutoplayError(_this2.src);
+ } else {
+ console.error(e);
+ }
+ } else {
+ // any other kind of error
+ console.error('Media play method encountered an unexpected error', e);
+ }
+ });
+ }
+ return this;
+ } /**
+ * Stops a media element and sets its current time to 0.
+ *
+ * Calling `media.play()` will restart playing audio/video from the beginning.
+ *
+ * @method stop
+ * @chainable
+ *
+ * @example
+ *
+ * let beat;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display a message.
+ * text('Click to play', 50, 50);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * beat = createAudio('assets/beat.mp3');
+ *
+ * describe('The text "Click to play" written in black on a gray background. A beat plays when the user clicks the square.');
+ * }
+ *
+ * // Play the beat when the user presses the mouse.
+ * function mousePressed() {
+ * beat.play();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'stop',
+ value: function stop() {
+ this.elt.pause();
+ this.elt.currentTime = 0;
+ return this;
+ } /**
+ * Pauses a media element.
+ *
+ * Calling `media.play()` will resume playing audio/video from the moment it paused.
+ *
+ * @method pause
+ * @chainable
+ *
+ * @example
+ *
+ * let beat;
+ * let isStopped = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * beat = createAudio('assets/beat.mp3');
+ *
+ * describe('The text "Click to start" written in black on a gray background. The beat starts or stops when the user presses the mouse.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display different instructions based on playback.
+ * if (isStopped === true) {
+ * text('Click to start', 50, 50);
+ * } else {
+ * text('Click to stop', 50, 50);
+ * }
+ * }
+ *
+ * // Adjust playback when the user presses the mouse.
+ * function mousePressed() {
+ * if (isStopped === true) {
+ * // If the beat is stopped, play it.
+ * beat.play();
+ * isStopped = false;
+ * } else {
+ * // If the beat is playing, stop it.
+ * beat.stop();
+ * isStopped = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'pause',
+ value: function pause() {
+ this.elt.pause();
+ return this;
+ } /**
+ * Plays the audio/video repeatedly in a loop.
+ *
+ * @method loop
+ * @chainable
+ *
+ * @example
+ *
+ * let beat;
+ * let isPaused = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * beat = createAudio('assets/beat.mp3');
+ *
+ * describe('The text "Click to play" written in black on a gray background. The beat plays or pauses when the user clicks the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display different instructions based on playback.
+ * if (isPaused === true) {
+ * text('Click to play', 50, 50);
+ * } else {
+ * text('Click to pause', 50, 50);
+ * }
+ * }
+ *
+ * // Adjust playback when the user presses the mouse.
+ * function mousePressed() {
+ * if (isPaused === true) {
+ * // If the beat is paused,
+ * // play it.
+ * beat.play();
+ * isPaused = false;
+ * } else {
+ * // If the beat is playing,
+ * // pause it.
+ * beat.pause();
+ * isPaused = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'loop',
+ value: function loop() {
+ this.elt.setAttribute('loop', true);
+ this.play();
+ return this;
+ } /**
+ * Stops the audio/video from playing in a loop.
+ *
+ * The media will stop when it finishes playing.
+ *
+ * @method noLoop
+ * @chainable
+ *
+ * @example
+ *
+ * let beat;
+ * let isLooping = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * beat = createAudio('assets/beat.mp3');
+ *
+ * describe('The text "Click to loop" written in black on a gray background. A beat plays repeatedly in a loop when the user clicks. The beat stops when the user clicks again.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display different instructions based on playback.
+ * if (isLooping === true) {
+ * text('Click to stop', 50, 50);
+ * } else {
+ * text('Click to loop', 50, 50);
+ * }
+ * }
+ *
+ * // Adjust playback when the user presses the mouse.
+ * function mousePressed() {
+ * if (isLooping === true) {
+ * // If the beat is looping, stop it.
+ * beat.stop();
+ * isLooping = false;
+ * } else {
+ * // If the beat is stopped, loop it.
+ * beat.loop();
+ * isLooping = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'noLoop',
+ value: function noLoop() {
+ this.elt.removeAttribute('loop');
+ return this;
+ } /**
+ * Sets up logic to check that autoplay succeeded.
+ *
+ * @method setupAutoplayFailDetection
+ * @private
+ */
+
+ },
+ {
+ key: '_setupAutoplayFailDetection',
+ value: function _setupAutoplayFailDetection() {
+ var _this3 = this;
+ var timeout = setTimeout(function () {
+ if (typeof IS_MINIFIED === 'undefined') {
+ _main.default._friendlyAutoplayError(_this3.src);
+ } else {
+ console.error(e);
+ }
+ }, 500);
+ this.elt.addEventListener('play', function () {
+ return clearTimeout(timeout);
+ }, {
+ passive: true,
+ once: true
+ });
+ } /**
+ * Sets the audio/video to play once it's loaded.
+ *
+ * The parameter, `shouldAutoplay`, is optional. Calling
+ * `media.autoplay()` without an argument causes the media to play
+ * automatically. If `true` is passed, as in `media.autoplay(true)`, the
+ * media will automatically play. If `false` is passed, as in
+ * `media.autoPlay(false)`, it won't play automatically.
+ *
+ * @method autoplay
+ * @param {Boolean} [shouldAutoplay] whether the element should autoplay.
+ * @chainable
+ *
+ * @example
+ *
+ * let beat;
+ * let isPlaying = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * beat = createAudio('assets/beat.mp3');
+ *
+ * describe('The text "Click to play" written in black on a gray background. A beat plays when the user clicks. The beat stops when the user clicks again.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display different instructions based on playback.
+ * if (isPlaying === true) {
+ * text('Click to stop', 50, 50);
+ * } else {
+ * text('Click to play', 50, 50);
+ * }
+ * }
+ *
+ * // Adjust playback when the user presses the mouse.
+ * function mousePressed() {
+ * if (isPlaying === true) {
+ * // If the beat is playing, stop it.
+ * beat.stop();
+ * isPlaying = false;
+ * } else {
+ * // If the beat is stopped, play it.
+ * beat.play();
+ * isPlaying = true;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let video;
+ *
+ * function setup() {
+ * noCanvas();
+ *
+ * // Call handleVideo() once the video loads.
+ * video = createVideo('assets/fingers.mov', handleVideo);
+ *
+ * describe('A video of fingers walking on a treadmill.');
+ * }
+ *
+ * // Set the video's size and play it.
+ * function handleVideo() {
+ * video.size(100, 100);
+ * video.autoplay();
+ * }
+ *
+ *
+ *
+ *
+ * // Set the video's size and playback mode.
+ * function handleVideo() {
+ * video.size(100, 100);
+ * video.autoplay(false);
+ * }
+ *
+ * // Play the video.
+ * function handleClick() {
+ * video.play();
+ * }
+ */
+
+ },
+ {
+ key: 'autoplay',
+ value: function autoplay(val) {
+ var _this4 = this;
+ var oldVal = this.elt.getAttribute('autoplay');
+ this.elt.setAttribute('autoplay', val);
+ // if we turned on autoplay
+ if (val && !oldVal) {
+ // bind method to this scope
+ var setupAutoplayFailDetection = function setupAutoplayFailDetection() {
+ return _this4._setupAutoplayFailDetection();
+ };
+ // if media is ready to play, schedule check now
+ if (this.elt.readyState === 4) {
+ setupAutoplayFailDetection();
+ } else {
+ // otherwise, schedule check whenever it is ready
+ this.elt.addEventListener('canplay', setupAutoplayFailDetection, {
+ passive: true,
+ once: true
+ });
+ }
+ }
+ return this;
+ } /**
+ * Sets the audio/video volume.
+ *
+ * Calling `media.volume()` without an argument returns the current volume
+ * as a number in the range 0 (off) to 1 (maximum).
+ *
+ * The parameter, `val`, is optional. It's a number that sets the volume
+ * from 0 (off) to 1 (maximum). For example, calling `media.volume(0.5)`
+ * sets the volume to half of its maximum.
+ *
+ * @method volume
+ * @return {Number} current volume.
+ *
+ * @example
+ *
+ * function setup() {
+ * noCanvas();
+ *
+ * // Load a video, but don't play it automatically.
+ * let video = createVideo('assets/fingers.mov', handleVideo);
+ *
+ * // Play the video when the user clicks on it.
+ * video.mousePressed(handlePress);
+ *
+ * describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method volume
+ * @param {Number} val volume between 0.0 and 1.0.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'volume',
+ value: function volume(val) {
+ if (typeof val === 'undefined') {
+ return this.elt.volume;
+ } else {
+ this.elt.volume = val;
+ }
+ } /**
+ * Sets the audio/video playback speed.
+ *
+ * The parameter, `val`, is optional. It's a number that sets the playback
+ * speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
+ * plays it at double speed, and so on. -1 plays the media at normal speed
+ * in reverse.
+ *
+ * Calling `media.speed()` returns the current speed as a number.
+ *
+ * Note: Not all browsers support backward playback. Even if they do,
+ * playback might not be smooth.
+ *
+ * @method speed
+ * @return {Number} current playback speed.
+ *
+ * @example
+ *
+ * let dragon;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * dragon = createAudio('assets/lucky_dragons.mp3');
+ *
+ * // Show the default media controls.
+ * dragon.showControls();
+ *
+ * describe('The text "Volume: V" on a gray square with media controls beneath it. The number "V" oscillates between 0 and 1 as the music plays.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Produce a number between 0 and 1.
+ * let n = 0.5 * sin(frameCount * 0.01) + 0.5;
+ *
+ * // Use n to set the volume.
+ * dragon.volume(n);
+ *
+ * // Get the current volume and display it.
+ * let v = dragon.volume();
+ *
+ * // Round v to 1 decimal place for display.
+ * v = round(v, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the volume.
+ * text(`Volume: ${v}`, 50, 50);
+ * }
+ *
+ *
+ * 1) {
+ pImg.gifProperties = {
+ displayIndex: 0,
+ loopLimit: loopLimit,
+ loopCount: 0,
+ frames: frames,
+ numFrames: numFrames,
+ playing: true,
+ timeDisplayed: 0,
+ lastChangeTime: 0
+ };
+ }
+ if (typeof successCallback === 'function') {
+ successCallback(pImg);
+ }
+ finishCallback();
+ } /**
+ * @private
+ * @param {Constant} xAlign either LEFT, RIGHT or CENTER
+ * @param {Constant} yAlign either TOP, BOTTOM or CENTER
+ * @param {Number} dx
+ * @param {Number} dy
+ * @param {Number} dw
+ * @param {Number} dh
+ * @param {Number} sw
+ * @param {Number} sh
+ * @returns {Object}
+ */
+
+ function _imageContain(xAlign, yAlign, dx, dy, dw, dh, sw, sh) {
+ var r = Math.max(sw / dw, sh / dh);
+ var adjusted_dw = sw / r,
+ adjusted_dh = sh / r;
+ var x = dx;
+ var y = dy;
+ if (xAlign === constants.CENTER) {
+ x += (dw - adjusted_dw) / 2;
+ } else if (xAlign === constants.RIGHT) {
+ x += dw - adjusted_dw;
+ }
+ if (yAlign === constants.CENTER) {
+ y += (dh - adjusted_dh) / 2;
+ } else if (yAlign === constants.BOTTOM) {
+ y += dh - adjusted_dh;
+ }
+ return {
+ x: x,
+ y: y,
+ w: adjusted_dw,
+ h: adjusted_dh
+ };
+ } /**
+ * @private
+ * @param {Constant} xAlign either LEFT, RIGHT or CENTER
+ * @param {Constant} yAlign either TOP, BOTTOM or CENTER
+ * @param {Number} dw
+ * @param {Number} dh
+ * @param {Number} sx
+ * @param {Number} sy
+ * @param {Number} sw
+ * @param {Number} sh
+ * @returns {Object}
+ */
+
+ function _imageCover(xAlign, yAlign, dw, dh, sx, sy, sw, sh) {
+ var r = Math.max(dw / sw, dh / sh);
+ var adjusted_sw = dw / r,
+ adjusted_sh = dh / r;
+ var x = sx;
+ var y = sy;
+ if (xAlign === constants.CENTER) {
+ x += (sw - adjusted_sw) / 2;
+ } else if (xAlign === constants.RIGHT) {
+ x += sw - adjusted_sw;
+ }
+ if (yAlign === constants.CENTER) {
+ y += (sh - adjusted_sh) / 2;
+ } else if (yAlign === constants.BOTTOM) {
+ y += sh - adjusted_sh;
+ }
+ return {
+ x: x,
+ y: y,
+ w: adjusted_sw,
+ h: adjusted_sh
+ };
+ } /**
+ * @private
+ * @param {Constant} [fit] either CONTAIN or COVER
+ * @param {Constant} xAlign either LEFT, RIGHT or CENTER
+ * @param {Constant} yAlign either TOP, BOTTOM or CENTER
+ * @param {Number} dx
+ * @param {Number} dy
+ * @param {Number} dw
+ * @param {Number} dh
+ * @param {Number} sx
+ * @param {Number} sy
+ * @param {Number} sw
+ * @param {Number} sh
+ * @returns {Object}
+ */
+
+ function _imageFit(fit, xAlign, yAlign, dx, dy, dw, dh, sx, sy, sw, sh) {
+ if (fit === constants.COVER) {
+ var _imageCover2 = _imageCover(xAlign, yAlign, dw, dh, sx, sy, sw, sh),
+ x = _imageCover2.x,
+ y = _imageCover2.y,
+ w = _imageCover2.w,
+ h = _imageCover2.h;
+ sx = x;
+ sy = y;
+ sw = w;
+ sh = h;
+ }
+ if (fit === constants.CONTAIN) {
+ var _imageContain2 = _imageContain(xAlign, yAlign, dx, dy, dw, dh, sw, sh),
+ _x3 = _imageContain2.x,
+ _y = _imageContain2.y,
+ _w = _imageContain2.w,
+ _h = _imageContain2.h;
+ dx = _x3;
+ dy = _y;
+ dw = _w;
+ dh = _h;
+ }
+ return {
+ sx: sx,
+ sy: sy,
+ sw: sw,
+ sh: sh,
+ dx: dx,
+ dy: dy,
+ dw: dw,
+ dh: dh
+ };
+ } /**
+ * Validates clipping params. Per drawImage spec sWidth and sHight cannot be
+ * negative or greater than image intrinsic width and height
+ * @private
+ * @param {Number} sVal
+ * @param {Number} iVal
+ * @returns {Number}
+ * @private
+ */
+
+ function _sAssign(sVal, iVal) {
+ if (sVal > 0 && sVal < iVal) {
+ return sVal;
+ } else {
+ return iVal;
+ }
+ } /**
+ * Draws an image to the canvas.
+ *
+ * The first parameter, `img`, is the source image to be drawn. `img` can be
+ * any of the following objects:
+ * - p5.Image
+ * - p5.Element
+ * - p5.Texture
+ * - p5.Framebuffer
+ * - p5.FramebufferTexture
+ *
+ * The second and third parameters, `dx` and `dy`, set the coordinates of the
+ * destination image's top left corner. See
+ * imageMode() for other ways to position images.
+ *
+ * Here's a diagram that explains how optional parameters work in `image()`:
+ *
+ * 
+ *
+ * The fourth and fifth parameters, `dw` and `dh`, are optional. They set the
+ * the width and height to draw the destination image. By default, `image()`
+ * draws the full source image at its original size.
+ *
+ * The sixth and seventh parameters, `sx` and `sy`, are also optional.
+ * These coordinates define the top left corner of a subsection to draw from
+ * the source image.
+ *
+ * The eighth and ninth parameters, `sw` and `sh`, are also optional.
+ * They define the width and height of a subsection to draw from the source
+ * image. By default, `image()` draws the full subsection that begins at
+ * `(sx, sy)` and extends to the edges of the source image.
+ *
+ * The ninth parameter, `fit`, is also optional. It enables a subsection of
+ * the source image to be drawn without affecting its aspect ratio. If
+ * `CONTAIN` is passed, the full subsection will appear within the destination
+ * rectangle. If `COVER` is passed, the subsection will completely cover the
+ * destination rectangle. This may have the effect of zooming into the
+ * subsection.
+ *
+ * The tenth and eleventh paremeters, `xAlign` and `yAlign`, are also
+ * optional. They determine how to align the fitted subsection. `xAlign` can
+ * be set to either `LEFT`, `RIGHT`, or `CENTER`. `yAlign` can be set to
+ * either `TOP`, `BOTTOM`, or `CENTER`. By default, both `xAlign` and `yAlign`
+ * are set to `CENTER`.
+ *
+ * @method image
+ * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img image to display.
+ * @param {Number} x x-coordinate of the top-left corner of the image.
+ * @param {Number} y y-coordinate of the top-left corner of the image.
+ * @param {Number} [width] width to draw the image.
+ * @param {Number} [height] height to draw the image.
+ *
+ * @example
+ *
+ */
+ _main.default.prototype.loadBytes = function (file, callback, errorCallback) {
+ var ret = {
+ };
+ var self = this;
+ this.httpDo(file, 'GET', 'arrayBuffer', function (arrayBuffer) {
+ ret.bytes = new Uint8Array(arrayBuffer);
+ if (typeof callback === 'function') {
+ callback(ret);
+ }
+ self._decrementPreload();
+ }, function (err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(6, file);
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
+ });
+ return ret;
+ };
+ /**
+ * Method for executing an HTTP GET request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
+ * calling
+ */
+ /**
+ * @method httpGet
+ * @param {String} path
+ * @param {Object|Boolean} data
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ /**
+ * @method httpGet
+ * @param {String} path
+ * @param {function} callback
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ _main.default.prototype.httpGet = function () {
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+ _main.default._validateParameters('httpGet', args);
+ args.splice(1, 0, 'GET');
+ return _main.default.prototype.httpDo.apply(this, args);
+ };
+ /**
+ * Method for executing an HTTP POST request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
+ * calling
+ */
+ /**
+ * @method httpPost
+ * @param {String} path
+ * @param {Object|Boolean} data
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ /**
+ * @method httpPost
+ * @param {String} path
+ * @param {function} callback
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ _main.default.prototype.httpPost = function () {
+ for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+ args[_key5] = arguments[_key5];
+ }
+ _main.default._validateParameters('httpPost', args);
+ args.splice(1, 0, 'POST');
+ return _main.default.prototype.httpDo.apply(this, args);
+ };
+ /**
+ * Method for executing an HTTP request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text.
+ * For more advanced use, you may also pass in the path as the first argument + * and a object as the second argument, the signature follows the one specified + * in the Fetch API specification. + * This method is suitable for fetching files up to size of 64MB when "GET" is used. + * + * @method httpDo + * @param {String} path name of the file or url to load + * @param {String} [method] either "GET", "POST", or "PUT", + * defaults to "GET" + * @param {String} [datatype] "json", "jsonp", "xml", or "text" + * @param {Object} [data] param data passed sent with request + * @param {function} [callback] function to be executed after + * httpGet() completes, data is passed in + * as first argument + * @param {function} [errorCallback] function to be executed if + * there is an error, response is passed + * in as first argument + * @return {Promise} A promise that resolves with the data when the operation + * completes successfully or rejects with the error after + * one occurs. + * + * @example + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.save = function (object, _filename, _options) {
+ // parse the arguments and figure out which things we are saving
+ var args = arguments;
+ // =================================================
+ // OPTION 1: saveCanvas...
+ // if no arguments are provided, save canvas
+ var cnv = this._curElement ? this._curElement.elt : this.elt;
+ if (args.length === 0) {
+ _main.default.prototype.saveCanvas(cnv);
+ return;
+ } else if (args[0] instanceof _main.default.Renderer || args[0] instanceof _main.default.Graphics) {
+ // otherwise, parse the arguments
+ // if first param is a p5Graphics, then saveCanvas
+ _main.default.prototype.saveCanvas(args[0].elt, args[1], args[2]);
+ return;
+ } else if (args.length === 1 && typeof args[0] === 'string') {
+ // if 1st param is String and only one arg, assume it is canvas filename
+ _main.default.prototype.saveCanvas(cnv, args[0]);
+ } else {
+ // =================================================
+ // OPTION 2: extension clarifies saveStrings vs. saveJSON
+ var extension = _checkFileExtension(args[1], args[2]) [1];
+ switch (extension) {
+ case 'json':
+ _main.default.prototype.saveJSON(args[0], args[1], args[2]);
+ return;
+ case 'txt':
+ _main.default.prototype.saveStrings(args[0], args[1], args[2]);
+ return;
+ // =================================================
+ // OPTION 3: decide based on object...
+ default:
+ if (args[0] instanceof Array) {
+ _main.default.prototype.saveStrings(args[0], args[1], args[2]);
+ } else if (args[0] instanceof _main.default.Table) {
+ _main.default.prototype.saveTable(args[0], args[1], args[2]);
+ } else if (args[0] instanceof _main.default.Image) {
+ _main.default.prototype.saveCanvas(args[0].canvas, args[1]);
+ } else if (args[0] instanceof _main.default.SoundFile) {
+ _main.default.prototype.saveSound(args[0], args[1], args[2], args[3]);
+ }
+ }
+ }
+ };
+ /**
+ * Saves an `Object` or `Array` to a JSON file.
+ *
+ * JavaScript Object Notation
+ * (JSON)
+ * is a standard format for sending data between applications. The format is
+ * based on JavaScript objects which have keys and values. JSON files store
+ * data in an object with strings as keys. Values can be strings, numbers,
+ * Booleans, arrays, `null`, or other objects.
+ *
+ * The first parameter, `json`, is the data to save. The data can be an array,
+ * as in `[1, 2, 3]`, or an object, as in
+ * `{ x: 50, y: 50, color: 'deeppink' }`.
+ *
+ * The second parameter, `filename`, is a string that sets the file's name.
+ * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
+ * `[1, 2, 3]` to a file called `data.json` on the user's computer.
+ *
+ * The third parameter, `optimize`, is optional. If `true` is passed, as in
+ * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
+ * be removed to reduce the file size.
+ *
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ *
+ * @method saveJSON
+ * @param {Array|Object} json data to save.
+ * @param {String} filename name of the file to be saved.
+ * @param {Boolean} [optimize] whether to trim unneeded whitespace. Defaults
+ * to `true`.
+ *
+ * @example
+ *
+ */
+
+ _main.default.prototype.saveTable = function (table, filename, options) {
+ _main.default._validateParameters('saveTable', arguments);
+ var ext;
+ if (options === undefined) {
+ ext = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
+ } else {
+ ext = options;
+ }
+ var pWriter = this.createWriter(filename, ext);
+ var header = table.columns;
+ var sep = ','; // default to CSV
+ if (ext === 'tsv') {
+ sep = '\t';
+ }
+ if (ext !== 'html') {
+ // make header if it has values
+ if (header[0] !== '0') {
+ for (var h = 0; h < header.length; h++) {
+ if (h < header.length - 1) {
+ pWriter.write(header[h] + sep);
+ } else {
+ pWriter.write(header[h]);
+ }
+ }
+ pWriter.write('\n');
+ } // make rows
+
+ for (var i = 0; i < table.rows.length; i++) {
+ var j = void 0;
+ for (j = 0; j < table.rows[i].arr.length; j++) {
+ if (j < table.rows[i].arr.length - 1) {
+ //double quotes should be inserted in csv only if contains comma separated single value
+ if (ext === 'csv' && String(table.rows[i].arr[j]).includes(',')) {
+ pWriter.write('"' + table.rows[i].arr[j] + '"' + sep);
+ } else {
+ pWriter.write(table.rows[i].arr[j] + sep);
+ }
+ } else {
+ //double quotes should be inserted in csv only if contains comma separated single value
+ if (ext === 'csv' && String(table.rows[i].arr[j]).includes(',')) {
+ pWriter.write('"' + table.rows[i].arr[j] + '"');
+ } else {
+ pWriter.write(table.rows[i].arr[j]);
+ }
+ }
+ }
+ pWriter.write('\n');
+ }
+ } else {
+ // otherwise, make HTML
+ pWriter.print('');
+ pWriter.print('');
+ var str = ' ');
+ pWriter.print('');
+ pWriter.print(' ');
+ // make header if it has values
+ if (header[0] !== '0') {
+ pWriter.print('
');
+ pWriter.print('');
+ pWriter.print('');
+ } // close and clear the pWriter
+
+ pWriter.close();
+ pWriter.clear();
+ }; // end saveTable()
+ /**
+ * Generate a blob of file data as a url to prepare for download.
+ * Accepts an array of data, a filename, and an extension (optional).
+ * This is a private function because it does not do any formatting,
+ * but it is used by saveStrings, saveJSON, saveTable etc.
+ *
+ * @param {Array} dataToDownload
+ * @param {String} filename
+ * @param {String} [extension]
+ * @private
+ */
+ _main.default.prototype.writeFile = function (dataToDownload, filename, extension) {
+ var type = 'application/octet-stream';
+ if (_main.default.prototype._isSafari()) {
+ type = 'text/plain';
+ }
+ var blob = new Blob(dataToDownload, {
+ type: type
+ });
+ _main.default.prototype.downloadFile(blob, filename, extension);
+ };
+ /**
+ * Forces download. Accepts a url to filedata/blob, a filename,
+ * and an extension (optional).
+ * This is a private function because it does not do any formatting,
+ * but it is used by saveStrings, saveJSON, saveTable etc.
+ *
+ * @method downloadFile
+ * @private
+ * @param {String|Blob} data either an href generated by createObjectURL,
+ * or a Blob object containing the data
+ * @param {String} [filename]
+ * @param {String} [extension]
+ */
+ _main.default.prototype.downloadFile = function (data, fName, extension) {
+ var fx = _checkFileExtension(fName, extension);
+ var filename = fx[0];
+ if (data instanceof Blob) {
+ _fileSaver.default.saveAs(data, filename);
+ return;
+ }
+ var a = document.createElement('a');
+ a.href = data;
+ a.download = filename;
+ // Firefox requires the link to be added to the DOM before click()
+ a.onclick = function (e) {
+ destroyClickedElement(e);
+ e.stopPropagation();
+ };
+ a.style.display = 'none';
+ document.body.appendChild(a);
+ // Safari will open this file in the same page as a confusing Blob.
+ if (_main.default.prototype._isSafari()) {
+ var aText = 'Hello, Safari user! To download this file...\n';
+ aText += '1. Go to File --> Save As.\n';
+ aText += '2. Choose "Page Source" as the Format.\n';
+ aText += '3. Name it with this extension: ."'.concat(fx[1], '"');
+ alert(aText);
+ }
+ a.click();
+ };
+ /**
+ * Returns a file extension, or another string
+ * if the provided parameter has no extension.
+ *
+ * @param {String} filename
+ * @param {String} [extension]
+ * @return {String[]} [fileName, fileExtension]
+ *
+ * @private
+ */
+ function _checkFileExtension(filename, extension) {
+ if (!extension || extension === true || extension === 'true') {
+ extension = '';
+ }
+ if (!filename) {
+ filename = 'untitled';
+ }
+ var ext = '';
+ // make sure the file will have a name, see if filename needs extension
+ if (filename && filename.includes('.')) {
+ ext = filename.split('.').pop();
+ } // append extension if it doesn't exist
+
+ if (extension) {
+ if (ext !== extension) {
+ ext = extension;
+ filename = ''.concat(filename, '.').concat(ext);
+ }
+ }
+ return [filename,
+ ext];
+ }
+ _main.default.prototype._checkFileExtension = _checkFileExtension;
+ /**
+ * Returns true if the browser is Safari, false if not.
+ * Safari makes trouble for downloading files.
+ *
+ * @return {Boolean} [description]
+ * @private
+ */
+ _main.default.prototype._isSafari = function () {
+ return window.HTMLElement.toString().includes('Constructor');
+ };
+ /**
+ * Helper function, a callback for download that deletes
+ * an invisible anchor element from the DOM once the file
+ * has been automatically downloaded.
+ *
+ * @private
+ */
+ function destroyClickedElement(event) {
+ document.body.removeChild(event.target);
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/friendly_errors/fes_core': 294,
+ '../core/friendly_errors/file_errors': 295,
+ '../core/friendly_errors/validate_params': 298,
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.last-index-of': 184,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.function.name': 191,
+ 'core-js/modules/es.object.from-entries': 200,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.promise': 206,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint8-array': 257,
+ 'core-js/modules/web.dom-collections.iterator': 261,
+ 'core-js/modules/web.url': 263,
+ 'es6-promise/auto': 264,
+ 'fetch-jsonp': 266,
+ 'file-saver': 267,
+ 'whatwg-fetch': 280
+ }
+ ],
+ 330: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module IO
+ * @submodule Table
+ * @requires core
+ */
+ /**
+ * Table Options
+ * Generic class for handling tabular data, typically from a
+ * CSV, TSV, or other sort of spreadsheet file.
+ * CSV files are
+ *
+ * comma separated values, often with the data in quotes. TSV
+ * files use tabs as separators, and usually don't bother with the
+ * quotes.
+ * File names should end with .csv if they're comma separated.
+ * A rough "spec" for CSV can be found
+ * here.
+ * To load files, use the loadTable method.
+ * To save tables to your computer, use the save method
+ * or the saveTable method.
+ *
+ * Possible options include:
+ *
+ */
+
+ },
+ {
+ key: 'removeTokens',
+ value: function removeTokens(chars, column) {
+ var escape = function escape(s) {
+ return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+ };
+ var charArray = [
+ ];
+ for (var i = 0; i < chars.length; i++) {
+ charArray.push(escape(chars.charAt(i)));
+ }
+ var regex = new RegExp(charArray.join('|'), 'g');
+ if (typeof column === 'undefined') {
+ for (var c = 0; c < this.columns.length; c++) {
+ for (var d = 0; d < this.rows.length; d++) {
+ var s = this.rows[d].arr[c];
+ s = s.replace(regex, '');
+ this.rows[d].arr[c] = s;
+ this.rows[d].obj[this.columns[c]] = s;
+ }
+ }
+ } else if (typeof column === 'string') {
+ for (var j = 0; j < this.rows.length; j++) {
+ var val = this.rows[j].obj[column];
+ val = val.replace(regex, '');
+ this.rows[j].obj[column] = val;
+ var pos = this.columns.indexOf(column);
+ this.rows[j].arr[pos] = val;
+ }
+ } else {
+ for (var k = 0; k < this.rows.length; k++) {
+ var str = this.rows[k].arr[column];
+ str = str.replace(regex, '');
+ this.rows[k].arr[column] = str;
+ this.rows[k].obj[this.columns[column]] = str;
+ }
+ }
+ } /**
+ * Trims leading and trailing whitespace, such as spaces and tabs,
+ * from String table values. If no column is specified, then the
+ * values in all columns and rows are trimmed. A specific column
+ * may be referenced by either its ID or title.
+ *
+ * @method trim
+ * @param {String|Integer} [column] Column ID (number)
+ * or name (string)
+ * @example
+ *
+ */
+
+ },
+ {
+ key: 'trim',
+ value: function trim(column) {
+ var regex = new RegExp(' ', 'g');
+ if (typeof column === 'undefined') {
+ for (var c = 0; c < this.columns.length; c++) {
+ for (var d = 0; d < this.rows.length; d++) {
+ var s = this.rows[d].arr[c];
+ s = s.replace(regex, '');
+ this.rows[d].arr[c] = s;
+ this.rows[d].obj[this.columns[c]] = s;
+ }
+ }
+ } else if (typeof column === 'string') {
+ for (var j = 0; j < this.rows.length; j++) {
+ var val = this.rows[j].obj[column];
+ val = val.replace(regex, '');
+ this.rows[j].obj[column] = val;
+ var pos = this.columns.indexOf(column);
+ this.rows[j].arr[pos] = val;
+ }
+ } else {
+ for (var k = 0; k < this.rows.length; k++) {
+ var str = this.rows[k].arr[column];
+ str = str.replace(regex, '');
+ this.rows[k].arr[column] = str;
+ this.rows[k].obj[this.columns[column]] = str;
+ }
+ }
+ } /**
+ * Use removeColumn() to remove an existing column from a Table
+ * object. The column to be removed may be identified by either
+ * its title (a String) or its index value (an int).
+ * removeColumn(0) would remove the first column, removeColumn(1)
+ * would remove the second column, and so on.
+ *
+ * @method removeColumn
+ * @param {String|Integer} column columnName (string) or ID (number)
+ *
+ * @example
+ *
+ */
+
+ },
+ {
+ key: 'setString',
+ value: function setString(row, column, value) {
+ this.rows[row].setString(column, value);
+ } /**
+ * Retrieves a value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @method get
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String|Number}
+ *
+ * @example
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'set',
+ value: function set(column, value) {
+ // if typeof column is string, use .obj
+ if (typeof column === 'string') {
+ var cPos = this.table.columns.indexOf(column); // index of columnID
+ if (cPos >= 0) {
+ this.obj[column] = value;
+ this.arr[cPos] = value;
+ } else {
+ throw new Error('This table has no column named "'.concat(column, '"'));
+ }
+ } else {
+ // if typeof column is number, use .arr
+ if (column < this.table.columns.length) {
+ this.arr[column] = value;
+ var cTitle = this.table.columns[column];
+ this.obj[cTitle] = value;
+ } else {
+ throw new Error('Column #'.concat(column, ' is out of the range of this table'));
+ }
+ }
+ } /**
+ * Stores a Float value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method setNum
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {Number|String} value The value to be stored
+ * as a Float
+ * @example
+ *
+ */
+
+ },
+ {
+ key: 'setNum',
+ value: function setNum(column, value) {
+ var floatVal = parseFloat(value);
+ this.set(column, floatVal);
+ } /**
+ * Stores a String value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method setString
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {String|Number|Boolean|Object} value The value to be stored
+ * as a String
+ * @example
+ *
+ */
+
+ },
+ {
+ key: 'setString',
+ value: function setString(column, value) {
+ var stringVal = value.toString();
+ this.set(column, stringVal);
+ } /**
+ * Retrieves a value from the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method get
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String|Number}
+ *
+ * @example
+ *
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(column) {
+ if (typeof column === 'string') {
+ return this.obj[column];
+ } else {
+ return this.arr[column];
+ }
+ } /**
+ * Retrieves a Float value from the TableRow's specified
+ * column. The column may be specified by either its ID or
+ * title.
+ *
+ * @method getNum
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {Number} Float Floating point number
+ * @example
+ *
+ */
+
+ },
+ {
+ key: 'getNum',
+ value: function getNum(column) {
+ var ret;
+ if (typeof column === 'string') {
+ ret = parseFloat(this.obj[column]);
+ } else {
+ ret = parseFloat(this.arr[column]);
+ }
+ if (ret.toString() === 'NaN') {
+ throw 'Error: '.concat(this.obj[column], ' is NaN (Not a Number)');
+ }
+ return ret;
+ } /**
+ * Retrieves an String value from the TableRow's specified
+ * column. The column may be specified by either its ID or
+ * title.
+ *
+ * @method getString
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String} String
+ * @example
+ *
+ */
+
+ },
+ {
+ key: 'getString',
+ value: function getString(column) {
+ if (typeof column === 'string') {
+ return this.obj[column].toString();
+ } else {
+ return this.arr[column].toString();
+ }
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.from-entries': 200,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 332: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module IO
+ * @submodule Input
+ * @requires core
+ */
+ /**
+ * A class to describe an XML object.
+ *
+ * Each `p5.XML` object provides an easy way to interact with XML data.
+ * Extensible Markup Language
+ * (XML)
+ * is a standard format for sending data between applications. Like HTML, the
+ * XML format is based on tags and attributes, as in
+ * `<time units="s">1234</time>`.
+ *
+ * Note: Use loadXML() to load external XML files.
+ *
+ * @class p5.XML
+ * @constructor
+ *
+ * @example
+ * element, as a string,
+ * from the given opentype path or string/position
+ *
+ * @param {Object} path an opentype path, OR the following:
+ *
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional), set options.decimals
+ * to set the decimal precision of the path-data in the element,
+ * options.fill to set the fill color for the element,
+ * options.stroke to set the stroke color for the element,
+ * options.strokeWidth to set the strokeWidth for the element.
+ *
+ * @return {Object} this p5.Font object
+ */
+
+ },
+ {
+ key: '_getSVG',
+ value: function _getSVG(line, x, y, options) {
+ var decimals = 3;
+ // create path from string/position
+ if (typeof line === 'string' && arguments.length > 2) {
+ line = this._getPath(line, x, y, options);
+ } else if (_typeof(x) === 'object') {
+ // handle options specified in 2nd arg
+ options = x;
+ } // handle svg arguments
+
+ if (options) {
+ if (typeof options.decimals === 'number') {
+ decimals = options.decimals;
+ }
+ if (typeof options.strokeWidth === 'number') {
+ line.strokeWidth = options.strokeWidth;
+ }
+ if (typeof options.fill !== 'undefined') {
+ line.fill = options.fill;
+ }
+ if (typeof options.stroke !== 'undefined') {
+ line.stroke = options.stroke;
+ }
+ }
+ return line.toSVG(decimals);
+ } /*
+ * Renders an opentype path or string/position
+ * to the current graphics context
+ *
+ * @param {Object} path an opentype path, OR the following:
+ *
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional)
+ *
+ * @return {p5.Font} this p5.Font object
+ */
+
+ },
+ {
+ key: '_renderPath',
+ value: function _renderPath(line, x, y, options) {
+ var pdata;
+ var pg = options && options.renderer || this.parent._renderer;
+ var ctx = pg.drawingContext;
+ if (_typeof(line) === 'object' && line.commands) {
+ pdata = line.commands;
+ } else {
+ //pos = handleAlignment(p, ctx, line, x, y);
+ pdata = this._getPath(line, x, y, options).commands;
+ }
+ ctx.beginPath();
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = pdata[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var cmd = _step.value;
+ if (cmd.type === 'M') {
+ ctx.moveTo(cmd.x, cmd.y);
+ } else if (cmd.type === 'L') {
+ ctx.lineTo(cmd.x, cmd.y);
+ } else if (cmd.type === 'C') {
+ ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+ } else if (cmd.type === 'Q') {
+ ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+ } else if (cmd.type === 'Z') {
+ ctx.closePath();
+ }
+ } // only draw stroke if manually set by user
+
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ if (pg._doStroke && pg._strokeSet && !pg._clipping) {
+ ctx.stroke();
+ }
+ if (pg._doFill && !pg._clipping) {
+ // if fill hasn't been set by user, use default-text-fill
+ if (!pg._fillSet) {
+ pg._setFill(constants._DEFAULT_TEXT_FILL);
+ }
+ ctx.fill();
+ }
+ return this;
+ }
+ },
+ {
+ key: '_textWidth',
+ value: function _textWidth(str, fontSize) {
+ return this.font.getAdvanceWidth(str, fontSize);
+ }
+ },
+ {
+ key: '_textAscent',
+ value: function _textAscent(fontSize) {
+ return this.font.ascender * this._scale(fontSize);
+ }
+ },
+ {
+ key: '_textDescent',
+ value: function _textDescent(fontSize) {
+ return - this.font.descender * this._scale(fontSize);
+ }
+ },
+ {
+ key: '_scale',
+ value: function _scale(fontSize) {
+ return 1 / this.font.unitsPerEm * (fontSize || this.parent._renderer._textSize);
+ }
+ },
+ {
+ key: '_handleAlignment',
+ value: function _handleAlignment(renderer, line, x, y, textWidth) {
+ var fontSize = renderer._textSize;
+ if (typeof textWidth === 'undefined') {
+ textWidth = this._textWidth(line, fontSize);
+ }
+ switch (renderer._textAlign) {
+ case constants.CENTER:
+ x -= textWidth / 2;
+ break;
+ case constants.RIGHT:
+ x -= textWidth;
+ break;
+ }
+ switch (renderer._textBaseline) {
+ case constants.TOP:
+ y += this._textAscent(fontSize);
+ break;
+ case constants.CENTER:
+ y += this._textAscent(fontSize) / 2;
+ break;
+ case constants.BOTTOM:
+ y -= this._textDescent(fontSize);
+ break;
+ }
+ return {
+ x: x,
+ y: y
+ };
+ }
+ }
+ ]);
+ return _class;
+ }();
+ // path-utils
+ function pathToPoints(cmds, options) {
+ var opts = parseOpts(options, {
+ sampleFactor: 0.1,
+ simplifyThreshold: 0
+ });
+ var // total-length
+ len = pointAtLength(cmds, 0, 1),
+ t = len / (len * opts.sampleFactor),
+ pts = [
+ ];
+ for (var i = 0; i < len; i += t) {
+ pts.push(pointAtLength(cmds, i));
+ }
+ if (opts.simplifyThreshold) {
+ simplify(pts, opts.simplifyThreshold);
+ }
+ return pts;
+ }
+ function simplify(pts) {
+ var angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+ var num = 0;
+ for (var i = pts.length - 1; pts.length > 3 && i >= 0; --i) {
+ if (collinear(at(pts, i - 1), at(pts, i), at(pts, i + 1), angle)) {
+ // Remove the middle point
+ pts.splice(i % pts.length, 1);
+ num++;
+ }
+ }
+ return num;
+ }
+ function splitPaths(cmds) {
+ var paths = [
+ ];
+ var current;
+ for (var i = 0; i < cmds.length; i++) {
+ if (cmds[i].type === 'M') {
+ if (current) {
+ paths.push(current);
+ }
+ current = [
+ ];
+ }
+ current.push(cmdToArr(cmds[i]));
+ }
+ paths.push(current);
+ return paths;
+ }
+ function cmdToArr(cmd) {
+ var arr = [
+ cmd.type
+ ];
+ if (cmd.type === 'M' || cmd.type === 'L') {
+ // moveto or lineto
+ arr.push(cmd.x, cmd.y);
+ } else if (cmd.type === 'C') {
+ arr.push(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+ } else if (cmd.type === 'Q') {
+ arr.push(cmd.x1, cmd.y1, cmd.x, cmd.y);
+ } // else if (cmd.type === 'Z') { /* no-op */ }
+
+ return arr;
+ }
+ function parseOpts(options, defaults) {
+ if (_typeof(options) !== 'object') {
+ options = defaults;
+ } else {
+ for (var key in defaults) {
+ if (typeof options[key] === 'undefined') {
+ options[key] = defaults[key];
+ }
+ }
+ }
+ return options;
+ } //////////////////////// Helpers ////////////////////////////
+
+ function at(v, i) {
+ var s = v.length;
+ return v[i < 0 ? i % s + s : i % s];
+ }
+ function collinear(a, b, c, thresholdAngle) {
+ if (!thresholdAngle) {
+ return areaTriangle(a, b, c) === 0;
+ }
+ if (typeof collinear.tmpPoint1 === 'undefined') {
+ collinear.tmpPoint1 = [
+ ];
+ collinear.tmpPoint2 = [
+ ];
+ }
+ var ab = collinear.tmpPoint1,
+ bc = collinear.tmpPoint2;
+ ab.x = b.x - a.x;
+ ab.y = b.y - a.y;
+ bc.x = c.x - b.x;
+ bc.y = c.y - b.y;
+ var dot = ab.x * bc.x + ab.y * bc.y,
+ magA = Math.sqrt(ab.x * ab.x + ab.y * ab.y),
+ magB = Math.sqrt(bc.x * bc.x + bc.y * bc.y),
+ angle = Math.acos(dot / (magA * magB));
+ return angle < thresholdAngle;
+ }
+ function areaTriangle(a, b, c) {
+ return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
+ } // Portions of below code copyright 2008 Dmitry Baranovskiy (via MIT license)
+
+ function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+ var t1 = 1 - t;
+ var t13 = Math.pow(t1, 3);
+ var t12 = Math.pow(t1, 2);
+ var t2 = t * t;
+ var t3 = t2 * t;
+ var x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x + t3 * p2x;
+ var y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y + t3 * p2y;
+ var mx = p1x + 2 * t * (c1x - p1x) + t2 * (c2x - 2 * c1x + p1x);
+ var my = p1y + 2 * t * (c1y - p1y) + t2 * (c2y - 2 * c1y + p1y);
+ var nx = c1x + 2 * t * (c2x - c1x) + t2 * (p2x - 2 * c2x + c1x);
+ var ny = c1y + 2 * t * (c2y - c1y) + t2 * (p2y - 2 * c2y + c1y);
+ var ax = t1 * p1x + t * c1x;
+ var ay = t1 * p1y + t * c1y;
+ var cx = t1 * c2x + t * p2x;
+ var cy = t1 * c2y + t * p2y;
+ var alpha = 90 - Math.atan2(mx - nx, my - ny) * 180 / Math.PI;
+ if (mx > nx || my < ny) {
+ alpha += 180;
+ }
+ return {
+ x: x,
+ y: y,
+ m: {
+ x: mx,
+ y: my
+ },
+ n: {
+ x: nx,
+ y: ny
+ },
+ start: {
+ x: ax,
+ y: ay
+ },
+ end: {
+ x: cx,
+ y: cy
+ },
+ alpha: alpha
+ };
+ }
+ function getPointAtSegmentLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length) {
+ return length == null ? bezlen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) : findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, getTatLen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length));
+ }
+ function pointAtLength(path, length, istotal) {
+ path = path2curve(path);
+ var x;
+ var y;
+ var p;
+ var l;
+ var sp = '';
+ var subpaths = {
+ };
+ var point;
+ var len = 0;
+ for (var i = 0, ii = path.length; i < ii; i++) {
+ p = path[i];
+ if (p[0] === 'M') {
+ x = + p[1];
+ y = + p[2];
+ } else {
+ l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
+ if (len + l > length) {
+ if (!istotal) {
+ point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);
+ return {
+ x: point.x,
+ y: point.y,
+ alpha: point.alpha
+ };
+ }
+ }
+ len += l;
+ x = + p[5];
+ y = + p[6];
+ }
+ sp += p.shift() + p;
+ }
+ subpaths.end = sp;
+ point = istotal ? len : findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
+ if (point.alpha) {
+ point = {
+ x: point.x,
+ y: point.y,
+ alpha: point.alpha
+ };
+ }
+ return point;
+ }
+ function pathToAbsolute(pathArray) {
+ var res = [
+ ],
+ x = 0,
+ y = 0,
+ mx = 0,
+ my = 0,
+ start = 0;
+ if (!pathArray) {
+ // console.warn("Unexpected state: undefined pathArray"); // shouldn't happen
+ return res;
+ }
+ if (pathArray[0][0] === 'M') {
+ x = + pathArray[0][1];
+ y = + pathArray[0][2];
+ mx = x;
+ my = y;
+ start++;
+ res[0] = [
+ 'M',
+ x,
+ y
+ ];
+ }
+ var dots;
+ var crz = pathArray.length === 3 && pathArray[0][0] === 'M' && pathArray[1][0].toUpperCase() === 'R' && pathArray[2][0].toUpperCase() === 'Z';
+ for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) {
+ res.push(r = [
+ ]);
+ pa = pathArray[i];
+ if (pa[0] !== pa[0].toUpperCase()) {
+ r[0] = pa[0].toUpperCase();
+ switch (r[0]) {
+ case 'A':
+ r[1] = pa[1];
+ r[2] = pa[2];
+ r[3] = pa[3];
+ r[4] = pa[4];
+ r[5] = pa[5];
+ r[6] = + (pa[6] + x);
+ r[7] = + (pa[7] + y);
+ break;
+ case 'V':
+ r[1] = + pa[1] + y;
+ break;
+ case 'H':
+ r[1] = + pa[1] + x;
+ break;
+ case 'R':
+ dots = [
+ x,
+ y
+ ].concat(pa.slice(1));
+ for (var j = 2, jj = dots.length; j < jj; j++) {
+ dots[j] = + dots[j] + x;
+ dots[++j] = + dots[j] + y;
+ }
+ res.pop();
+ res = res.concat(catmullRom2bezier(dots, crz));
+ break;
+ case 'M':
+ mx = + pa[1] + x;
+ my = + pa[2] + y;
+ break;
+ default:
+ for (var _j = 1, _jj = pa.length; _j < _jj; _j++) {
+ r[_j] = + pa[_j] + (_j % 2 ? x : y);
+ }
+ }
+ } else if (pa[0] === 'R') {
+ dots = [
+ x,
+ y
+ ].concat(pa.slice(1));
+ res.pop();
+ res = res.concat(catmullRom2bezier(dots, crz));
+ r = [
+ 'R'
+ ].concat(pa.slice( - 2));
+ } else {
+ for (var k = 0, kk = pa.length; k < kk; k++) {
+ r[k] = pa[k];
+ }
+ }
+ switch (r[0]) {
+ case 'Z':
+ x = mx;
+ y = my;
+ break;
+ case 'H':
+ x = r[1];
+ break;
+ case 'V':
+ y = r[1];
+ break;
+ case 'M':
+ mx = r[r.length - 2];
+ my = r[r.length - 1];
+ break;
+ default:
+ x = r[r.length - 2];
+ y = r[r.length - 1];
+ }
+ }
+ return res;
+ }
+ function path2curve(path, path2) {
+ var p = pathToAbsolute(path),
+ p2 = path2 && pathToAbsolute(path2);
+ var attrs = {
+ x: 0,
+ y: 0,
+ bx: 0,
+ by: 0,
+ X: 0,
+ Y: 0,
+ qx: null,
+ qy: null
+ };
+ var attrs2 = {
+ x: 0,
+ y: 0,
+ bx: 0,
+ by: 0,
+ X: 0,
+ Y: 0,
+ qx: null,
+ qy: null
+ };
+ var pcoms1 = [
+ ]; // path commands of original path p
+ var pcoms2 = [
+ ]; // path commands of original path p2
+ var ii;
+ var processPath = function processPath(path, d, pcom) {
+ var nx;
+ var ny;
+ var tq = {
+ T: 1,
+ Q: 1
+ };
+ if (!path) {
+ return ['C',
+ d.x,
+ d.y,
+ d.x,
+ d.y,
+ d.x,
+ d.y];
+ }
+ if (!(path[0] in tq)) {
+ d.qx = d.qy = null;
+ }
+ switch (path[0]) {
+ case 'M':
+ d.X = path[1];
+ d.Y = path[2];
+ break;
+ case 'A':
+ path = [
+ 'C'
+ ].concat(a2c.apply(0, [
+ d.x,
+ d.y
+ ].concat(path.slice(1))));
+ break;
+ case 'S':
+ if (pcom === 'C' || pcom === 'S') {
+ nx = d.x * 2 - d.bx;
+ ny = d.y * 2 - d.by;
+ } else {
+ nx = d.x;
+ ny = d.y;
+ }
+ path = [
+ 'C',
+ nx,
+ ny
+ ].concat(path.slice(1));
+ break;
+ case 'T':
+ if (pcom === 'Q' || pcom === 'T') {
+ d.qx = d.x * 2 - d.qx;
+ d.qy = d.y * 2 - d.qy;
+ } else {
+ d.qx = d.x;
+ d.qy = d.y;
+ }
+ path = [
+ 'C'
+ ].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
+ break;
+ case 'Q':
+ d.qx = path[1];
+ d.qy = path[2];
+ path = [
+ 'C'
+ ].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
+ break;
+ case 'L':
+ path = [
+ 'C'
+ ].concat(l2c(d.x, d.y, path[1], path[2]));
+ break;
+ case 'H':
+ path = [
+ 'C'
+ ].concat(l2c(d.x, d.y, path[1], d.y));
+ break;
+ case 'V':
+ path = [
+ 'C'
+ ].concat(l2c(d.x, d.y, d.x, path[1]));
+ break;
+ case 'Z':
+ path = [
+ 'C'
+ ].concat(l2c(d.x, d.y, d.X, d.Y));
+ break;
+ }
+ return path;
+ },
+ fixArc = function fixArc(pp, i) {
+ if (pp[i].length > 7) {
+ pp[i].shift();
+ var pi = pp[i];
+ while (pi.length) {
+ pcoms1[i] = 'A';
+ if (p2) {
+ pcoms2[i] = 'A';
+ }
+ pp.splice(i++, 0, [
+ 'C'
+ ].concat(pi.splice(0, 6)));
+ }
+ pp.splice(i, 1);
+ ii = Math.max(p.length, p2 && p2.length || 0);
+ }
+ },
+ fixM = function fixM(path1, path2, a1, a2, i) {
+ if (path1 && path2 && path1[i][0] === 'M' && path2[i][0] !== 'M') {
+ path2.splice(i, 0, [
+ 'M',
+ a2.x,
+ a2.y
+ ]);
+ a1.bx = 0;
+ a1.by = 0;
+ a1.x = path1[i][1];
+ a1.y = path1[i][2];
+ ii = Math.max(p.length, p2 && p2.length || 0);
+ }
+ };
+ var pfirst = ''; // temporary holder for original path command
+ var pcom = ''; // holder for previous path command of original path
+ ii = Math.max(p.length, p2 && p2.length || 0);
+ for (var i = 0; i < ii; i++) {
+ if (p[i]) {
+ pfirst = p[i][0];
+ } // save current path command
+
+ if (pfirst !== 'C') {
+ pcoms1[i] = pfirst; // Save current path command
+ if (i) {
+ pcom = pcoms1[i - 1];
+ } // Get previous path command pcom
+
+ }
+ p[i] = processPath(p[i], attrs, pcom);
+ if (pcoms1[i] !== 'A' && pfirst === 'C') {
+ pcoms1[i] = 'C';
+ }
+ fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
+ if (p2) {
+ // the same procedures is done to p2
+ if (p2[i]) {
+ pfirst = p2[i][0];
+ }
+ if (pfirst !== 'C') {
+ pcoms2[i] = pfirst;
+ if (i) {
+ pcom = pcoms2[i - 1];
+ }
+ }
+ p2[i] = processPath(p2[i], attrs2, pcom);
+ if (pcoms2[i] !== 'A' && pfirst === 'C') {
+ pcoms2[i] = 'C';
+ }
+ fixArc(p2, i);
+ }
+ fixM(p, p2, attrs, attrs2, i);
+ fixM(p2, p, attrs2, attrs, i);
+ var seg = p[i],
+ seg2 = p2 && p2[i],
+ seglen = seg.length,
+ seg2len = p2 && seg2.length;
+ attrs.x = seg[seglen - 2];
+ attrs.y = seg[seglen - 1];
+ attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
+ attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
+ attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
+ attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
+ attrs2.x = p2 && seg2[seg2len - 2];
+ attrs2.y = p2 && seg2[seg2len - 1];
+ }
+ return p2 ? [
+ p,
+ p2
+ ] : p;
+ }
+ function a2c(x1, y1, rx, ry, angle, lac, sweep_flag, x2, y2, recursive) {
+ // for more information of where this Math came from visit:
+ // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
+ var PI = Math.PI;
+ var _120 = PI * 120 / 180;
+ var f1;
+ var f2;
+ var cx;
+ var cy;
+ var rad = PI / 180 * ( + angle || 0);
+ var res = [
+ ];
+ var xy;
+ var rotate = function rotate(x, y, rad) {
+ var X = x * Math.cos(rad) - y * Math.sin(rad),
+ Y = x * Math.sin(rad) + y * Math.cos(rad);
+ return {
+ x: X,
+ y: Y
+ };
+ };
+ if (!recursive) {
+ xy = rotate(x1, y1, - rad);
+ x1 = xy.x;
+ y1 = xy.y;
+ xy = rotate(x2, y2, - rad);
+ x2 = xy.x;
+ y2 = xy.y;
+ var x = (x1 - x2) / 2;
+ var y = (y1 - y2) / 2;
+ var h = x * x / (rx * rx) + y * y / (ry * ry);
+ if (h > 1) {
+ h = Math.sqrt(h);
+ rx = h * rx;
+ ry = h * ry;
+ }
+ var rx2 = rx * rx,
+ ry2 = ry * ry;
+ var k = (lac === sweep_flag ? - 1 : 1) * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)));
+ cx = k * rx * y / ry + (x1 + x2) / 2;
+ cy = k * - ry * x / rx + (y1 + y2) / 2;
+ f1 = Math.asin(((y1 - cy) / ry).toFixed(9));
+ f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
+ f1 = x1 < cx ? PI - f1 : f1;
+ f2 = x2 < cx ? PI - f2 : f2;
+ if (f1 < 0) {
+ f1 = PI * 2 + f1;
+ }
+ if (f2 < 0) {
+ f2 = PI * 2 + f2;
+ }
+ if (sweep_flag && f1 > f2) {
+ f1 = f1 - PI * 2;
+ }
+ if (!sweep_flag && f2 > f1) {
+ f2 = f2 - PI * 2;
+ }
+ } else {
+ f1 = recursive[0];
+ f2 = recursive[1];
+ cx = recursive[2];
+ cy = recursive[3];
+ }
+ var df = f2 - f1;
+ if (Math.abs(df) > _120) {
+ var f2old = f2,
+ x2old = x2,
+ y2old = y2;
+ f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : - 1);
+ x2 = cx + rx * Math.cos(f2);
+ y2 = cy + ry * Math.sin(f2);
+ res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [
+ f2,
+ f2old,
+ cx,
+ cy
+ ]);
+ }
+ df = f2 - f1;
+ var c1 = Math.cos(f1),
+ s1 = Math.sin(f1),
+ c2 = Math.cos(f2),
+ s2 = Math.sin(f2),
+ t = Math.tan(df / 4),
+ hx = 4 / 3 * rx * t,
+ hy = 4 / 3 * ry * t,
+ m1 = [
+ x1,
+ y1
+ ],
+ m2 = [
+ x1 + hx * s1,
+ y1 - hy * c1
+ ],
+ m3 = [
+ x2 + hx * s2,
+ y2 - hy * c2
+ ],
+ m4 = [
+ x2,
+ y2
+ ];
+ m2[0] = 2 * m1[0] - m2[0];
+ m2[1] = 2 * m1[1] - m2[1];
+ if (recursive) {
+ return [m2,
+ m3,
+ m4].concat(res);
+ } else {
+ res = [
+ m2,
+ m3,
+ m4
+ ].concat(res).join().split(',');
+ var newres = [
+ ];
+ for (var i = 0, ii = res.length; i < ii; i++) {
+ newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x;
+ }
+ return newres;
+ }
+ } // http://schepers.cc/getting-to-the-point
+
+ function catmullRom2bezier(crp, z) {
+ var d = [
+ ];
+ for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
+ var p = [
+ {
+ x: + crp[i - 2],
+ y: + crp[i - 1]
+ },
+ {
+ x: + crp[i],
+ y: + crp[i + 1]
+ },
+ {
+ x: + crp[i + 2],
+ y: + crp[i + 3]
+ },
+ {
+ x: + crp[i + 4],
+ y: + crp[i + 5]
+ }
+ ];
+ if (z) {
+ if (!i) {
+ p[0] = {
+ x: + crp[iLen - 2],
+ y: + crp[iLen - 1]
+ };
+ } else if (iLen - 4 === i) {
+ p[3] = {
+ x: + crp[0],
+ y: + crp[1]
+ };
+ } else if (iLen - 2 === i) {
+ p[2] = {
+ x: + crp[0],
+ y: + crp[1]
+ };
+ p[3] = {
+ x: + crp[2],
+ y: + crp[3]
+ };
+ }
+ } else {
+ if (iLen - 4 === i) {
+ p[3] = p[2];
+ } else if (!i) {
+ p[0] = {
+ x: + crp[i],
+ y: + crp[i + 1]
+ };
+ }
+ }
+ d.push(['C',
+ ( - p[0].x + 6 * p[1].x + p[2].x) / 6,
+ ( - p[0].y + 6 * p[1].y + p[2].y) / 6,
+ (p[1].x + 6 * p[2].x - p[3].x) / 6,
+ (p[1].y + 6 * p[2].y - p[3].y) / 6,
+ p[2].x,
+ p[2].y]);
+ }
+ return d;
+ }
+ function l2c(x1, y1, x2, y2) {
+ return [x1,
+ y1,
+ x2,
+ y2,
+ x2,
+ y2];
+ }
+ function q2c(x1, y1, ax, ay, x2, y2) {
+ var _13 = 1 / 3,
+ _23 = 2 / 3;
+ return [_13 * x1 + _23 * ax,
+ _13 * y1 + _23 * ay,
+ _13 * x2 + _23 * ax,
+ _13 * y2 + _23 * ay,
+ x2,
+ y2];
+ }
+ function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {
+ if (z == null) {
+ z = 1;
+ }
+ z = z > 1 ? 1 : z < 0 ? 0 : z;
+ var z2 = z / 2;
+ var n = 12;
+ var Tvalues = [
+ - 0.1252,
+ 0.1252,
+ - 0.3678,
+ 0.3678,
+ - 0.5873,
+ 0.5873,
+ - 0.7699,
+ 0.7699,
+ - 0.9041,
+ 0.9041,
+ - 0.9816,
+ 0.9816
+ ];
+ var sum = 0;
+ var Cvalues = [
+ 0.2491,
+ 0.2491,
+ 0.2335,
+ 0.2335,
+ 0.2032,
+ 0.2032,
+ 0.1601,
+ 0.1601,
+ 0.1069,
+ 0.1069,
+ 0.0472,
+ 0.0472
+ ];
+ for (var i = 0; i < n; i++) {
+ var ct = z2 * Tvalues[i] + z2,
+ xbase = base3(ct, x1, x2, x3, x4),
+ ybase = base3(ct, y1, y2, y3, y4),
+ comb = xbase * xbase + ybase * ybase;
+ sum += Cvalues[i] * Math.sqrt(comb);
+ }
+ return z2 * sum;
+ }
+ function getTatLen(x1, y1, x2, y2, x3, y3, x4, y4, ll) {
+ if (ll < 0 || bezlen(x1, y1, x2, y2, x3, y3, x4, y4) < ll) {
+ return;
+ }
+ var t = 1;
+ var step = t / 2;
+ var t2 = t - step;
+ var l;
+ var e = 0.01;
+ l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
+ while (Math.abs(l - ll) > e) {
+ step /= 2;
+ t2 += (l < ll ? 1 : - 1) * step;
+ l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
+ }
+ return t2;
+ }
+ function base3(t, p1, p2, p3, p4) {
+ var t1 = - 3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
+ t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
+ return t * t2 - 3 * p1 + 3 * p2;
+ }
+ function cacheKey() {
+ var hash = '';
+ for (var i = arguments.length - 1; i >= 0; --i) {
+ hash += '？'.concat(i < 0 || arguments.length <= i ? undefined : arguments[i]);
+ }
+ return hash;
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.fill': 173,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.function.name': 191,
+ 'core-js/modules/es.number.to-fixed': 198,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 342: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.array-buffer.constructor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.array-buffer.constructor');
+ _dereq_('core-js/modules/es.object.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Data
+ * @submodule Array Functions
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Adds a value to the end of an array. Extends the length of
+ * the array by one. Maps to Array.push().
+ *
+ * @method append
+ * @deprecated Use array.push(value) instead.
+ * @param {Array} array Array to append
+ * @param {any} value to be added to the Array
+ * @return {Array} the array that was appended to
+ * @example
+ *
+ */
+
+ _main.default.prototype.append = function (array, value) {
+ array.push(value);
+ return array;
+ };
+ /**
+ * Copies an array (or part of an array) to another array. The src array is
+ * copied to the dst array, beginning at the position specified by
+ * srcPosition and into the position specified by dstPosition. The number of
+ * elements to copy is determined by length. Note that copying values
+ * overwrites existing values in the destination array. To append values
+ * instead of overwriting them, use concat().
+ *
+ * The simplified version with only two arguments, arrayCopy(src, dst),
+ * copies an entire array to another of the same size. It is equivalent to
+ * arrayCopy(src, 0, dst, 0, src.length).
+ *
+ * Using this function is far more efficient for copying array data than
+ * iterating through a for() loop and copying each element individually.
+ *
+ * @method arrayCopy
+ * @deprecated Use arr1.copyWithin(arr2) instead.
+ * @param {Array} src the source Array
+ * @param {Integer} srcPosition starting position in the source Array
+ * @param {Array} dst the destination Array
+ * @param {Integer} dstPosition starting position in the destination Array
+ * @param {Integer} length number of Array elements to be copied
+ *
+ * @example
+ *
+ */
+ /**
+ * @method arrayCopy
+ * @deprecated Use arr1.copyWithin(arr2) instead.
+ * @param {Array} src
+ * @param {Array} dst
+ * @param {Integer} [length]
+ */
+ _main.default.prototype.arrayCopy = function (src, srcPosition, dst, dstPosition, length) {
+ // the index to begin splicing from dst array
+ var start;
+ var end;
+ if (typeof length !== 'undefined') {
+ end = Math.min(length, src.length);
+ start = dstPosition;
+ src = src.slice(srcPosition, end + srcPosition);
+ } else {
+ if (typeof dst !== 'undefined') {
+ // src, dst, length
+ // rename so we don't get confused
+ end = dst;
+ end = Math.min(end, src.length);
+ } else {
+ // src, dst
+ end = src.length;
+ }
+ start = 0;
+ // rename so we don't get confused
+ dst = srcPosition;
+ src = src.slice(0, end);
+ } // Since we are not returning the array and JavaScript is pass by reference
+ // we must modify the actual values of the array
+ // instead of reassigning arrays
+
+ Array.prototype.splice.apply(dst, [
+ start,
+ end
+ ].concat(src));
+ };
+ /**
+ * Concatenates two arrays, maps to Array.concat(). Does not modify the
+ * input arrays.
+ *
+ * @method concat
+ * @deprecated Use arr1.concat(arr2) instead.
+ * @param {Array} a first Array to concatenate
+ * @param {Array} b second Array to concatenate
+ * @return {Array} concatenated array
+ *
+ * @example
+ *
+ */
+ _main.default.prototype.concat = function (list0, list1) {
+ return list0.concat(list1);
+ };
+ /**
+ * Reverses the order of an array, maps to Array.reverse()
+ *
+ * @method reverse
+ * @deprecated Use array.reverse() instead.
+ * @param {Array} list Array to reverse
+ * @return {Array} the reversed list
+ * @example
+ *
+ */
+ _main.default.prototype.reverse = function (list) {
+ return list.reverse();
+ };
+ /**
+ * Decreases an array by one element and returns the shortened array,
+ * maps to Array.pop().
+ *
+ * @method shorten
+ * @deprecated Use array.pop() instead.
+ * @param {Array} list Array to shorten
+ * @return {Array} shortened Array
+ * @example
+ *
+ */
+ _main.default.prototype.shorten = function (list) {
+ list.pop();
+ return list;
+ };
+ /**
+ * Shuffles the elements of an array.
+ *
+ * The first parameter, `array`, is the array to be shuffled. For example,
+ * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By
+ * default, the original array won’t be modified. Instead, a copy will be
+ * created, shuffled, and returned.
+ *
+ * The second parameter, `modify`, is optional. If `true` is passed, as in
+ * `shuffle(myArray, true)`, then the array will be shuffled in place without
+ * making a copy.
+ *
+ * @method shuffle
+ * @param {Array} array array to shuffle.
+ * @param {Boolean} [bool] if `true`, shuffle the original array in place. Defaults to `false`.
+ * @return {Array} shuffled array.
+ *
+ * @example
+ *
+ *
+ */
+ _main.default.prototype.sort = function (list, count) {
+ var arr = count ? list.slice(0, Math.min(count, list.length)) : list;
+ var rest = count ? list.slice(Math.min(count, list.length)) : [
+ ];
+ if (typeof arr[0] === 'string') {
+ arr = arr.sort();
+ } else {
+ arr = arr.sort(function (a, b) {
+ return a - b;
+ });
+ }
+ return arr.concat(rest);
+ };
+ /**
+ * Inserts a value or an array of values into an existing array. The first
+ * parameter specifies the initial array to be modified, and the second
+ * parameter defines the data to be inserted. The third parameter is an index
+ * value which specifies the array position from which to insert data.
+ * (Remember that array index numbering starts at zero, so the first position
+ * is 0, the second position is 1, and so on.)
+ *
+ * @method splice
+ * @deprecated Use array.splice() instead.
+ * @param {Array} list Array to splice into
+ * @param {any} value value to be spliced in
+ * @param {Integer} position in the array from which to insert data
+ * @return {Array} the list
+ *
+ * @example
+ *
+ */
+ _main.default.prototype.splice = function (list, value, index) {
+ // note that splice returns spliced elements and not an array
+ Array.prototype.splice.apply(list, [
+ index,
+ 0
+ ].concat(value));
+ return list;
+ };
+ /**
+ * Extracts an array of elements from an existing array. The list parameter
+ * defines the array from which the elements will be copied, and the start
+ * and count parameters specify which elements to extract. If no count is
+ * given, elements will be extracted from the start to the end of the array.
+ * When specifying the start, remember that the first array element is 0.
+ * This function does not change the source array.
+ *
+ * @method subset
+ * @deprecated Use array.slice() instead.
+ * @param {Array} list Array to extract from
+ * @param {Integer} start position to begin
+ * @param {Integer} [count] number of values to extract
+ * @return {Array} Array of extracted elements
+ *
+ * @example
+ *
+ */
+ _main.default.prototype.subset = function (list, start, count) {
+ if (typeof count !== 'undefined') {
+ return list.slice(start, start + count);
+ } else {
+ return list.slice(start, list.length);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array-buffer.constructor': 169,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.object.to-string': 205
+ }
+ ],
+ 343: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.repeat');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.repeat');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Data
+ * @submodule Conversion
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Converts a `String` to a floating point (decimal) `Number`.
+ *
+ * `float()` converts strings that resemble numbers, such as `'12.34'`, into
+ * numbers.
+ *
+ * The parameter, `str`, is the string value to convert. For example, calling
+ * `float('12.34')` returns the number `12.34`. If an array of strings is
+ * passed, as in `float(['12.34', '56.78'])`, then an array of numbers will be
+ * returned.
+ *
+ * Note: If a string can't be converted to a number, as in `float('giraffe')`,
+ * then the value `NaN` (not a number) will be returned.
+ *
+ * @method float
+ * @param {String} str string to convert.
+ * @return {Number} converted number.
+ *
+ * @example
+ *
+ * let dragon;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * dragon = createAudio('assets/lucky_dragons.mp3');
+ *
+ * // Show the default media controls.
+ * dragon.showControls();
+ *
+ * describe('The text "Speed: S" on a gray square with media controls beneath it. The number "S" oscillates between 0 and 1 as the music plays.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Produce a number between 0 and 2.
+ * let n = sin(frameCount * 0.01) + 1;
+ *
+ * // Use n to set the playback speed.
+ * dragon.speed(n);
+ *
+ * // Get the current speed and display it.
+ * let s = dragon.speed();
+ *
+ * // Round s to 1 decimal place for display.
+ * s = round(s, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the speed.
+ * text(`Speed: ${s}`, 50, 50);
+ * }
+ *
+ */
+ /**
+ * @method speed
+ * @param {Number} speed speed multiplier for playback.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'speed',
+ value: function speed(val) {
+ if (typeof val === 'undefined') {
+ return this.presetPlaybackRate || this.elt.playbackRate;
+ } else {
+ if (this.loadedmetadata) {
+ this.elt.playbackRate = val;
+ } else {
+ this.presetPlaybackRate = val;
+ }
+ }
+ } /**
+ * Sets the media element's playback time.
+ *
+ * The parameter, `time`, is optional. It's a number that specifies the
+ * time, in seconds, to jump to when playback begins.
+ *
+ * Calling `media.time()` without an argument returns the number of seconds
+ * the audio/video has played.
+ *
+ * Note: Time resets to 0 when looping media restarts.
+ *
+ * @method time
+ * @return {Number} current time (in seconds).
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let dragon;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * dragon = createAudio('assets/lucky_dragons.mp3');
+ *
+ * // Show the default media controls.
+ * dragon.showControls();
+ *
+ * describe('The text "S seconds" on a gray square with media controls beneath it. The number "S" increases as the song plays.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get the current playback time.
+ * let s = dragon.time();
+ *
+ * // Round s to 1 decimal place for display.
+ * s = round(s, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the playback time.
+ * text(`${s} seconds`, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method time
+ * @param {Number} time time to jump to (in seconds).
+ * @chainable
+ */
+
+ },
+ {
+ key: 'time',
+ value: function time(val) {
+ if (typeof val === 'undefined') {
+ return this.elt.currentTime;
+ } else {
+ this.elt.currentTime = val;
+ return this;
+ }
+ } /**
+ * Returns the audio/video's duration in seconds.
+ *
+ * @method duration
+ * @return {Number} duration (in seconds).
+ *
+ * @example
+ *
+ * let dragon;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * dragon = createAudio('assets/lucky_dragons.mp3');
+ *
+ * // Show the default media controls.
+ * dragon.showControls();
+ *
+ * // Jump to 2 seconds to start.
+ * dragon.time(2);
+ *
+ * describe('The text "S seconds" on a gray square with media controls beneath it. The number "S" increases as the song plays.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get the current playback time.
+ * let s = dragon.time();
+ *
+ * // Round s to 1 decimal place for display.
+ * s = round(s, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the playback time.
+ * text(`${s} seconds`, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'duration',
+ value: function duration() {
+ return this.elt.duration;
+ }
+ },
+ {
+ key: '_ensureCanvas',
+ value: function _ensureCanvas() {
+ if (!this.canvas) {
+ this.canvas = document.createElement('canvas');
+ this.drawingContext = this.canvas.getContext('2d');
+ this.setModified(true);
+ } // Don't update the canvas again if we have already updated the canvas with
+ // the current frame
+
+ var needsRedraw = this._frameOnCanvas !== this._pInst.frameCount;
+ if (this.loadedmetadata && needsRedraw) {
+ // wait for metadata for w/h
+ if (this.canvas.width !== this.elt.width) {
+ this.canvas.width = this.elt.width;
+ this.canvas.height = this.elt.height;
+ this.width = this.canvas.width;
+ this.height = this.canvas.height;
+ }
+ this.drawingContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ if (this.flipped === true) {
+ this.drawingContext.save();
+ this.drawingContext.scale( - 1, 1);
+ this.drawingContext.translate( - this.canvas.width, 0);
+ }
+ this.drawingContext.drawImage(this.elt, 0, 0, this.canvas.width, this.canvas.height);
+ if (this.flipped === true) {
+ this.drawingContext.restore();
+ }
+ this.setModified(true);
+ this._frameOnCanvas = this._pInst.frameCount;
+ }
+ }
+ },
+ {
+ key: 'loadPixels',
+ value: function loadPixels() {
+ this._ensureCanvas();
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+ return _main.default.Renderer2D.prototype.loadPixels.apply(this, args);
+ }
+ },
+ {
+ key: 'updatePixels',
+ value: function updatePixels(x, y, w, h) {
+ if (this.loadedmetadata) {
+ // wait for metadata
+ this._ensureCanvas();
+ _main.default.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
+ }
+ this.setModified(true);
+ return this;
+ }
+ },
+ {
+ key: 'get',
+ value: function get() {
+ this._ensureCanvas();
+ for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+ args[_key5] = arguments[_key5];
+ }
+ return _main.default.Renderer2D.prototype.get.apply(this, args);
+ }
+ },
+ {
+ key: '_getPixel',
+ value: function _getPixel() {
+ this.loadPixels();
+ for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+ args[_key6] = arguments[_key6];
+ }
+ return _main.default.Renderer2D.prototype._getPixel.apply(this, args);
+ }
+ },
+ {
+ key: 'set',
+ value: function set(x, y, imgOrCol) {
+ if (this.loadedmetadata) {
+ // wait for metadata
+ this._ensureCanvas();
+ _main.default.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
+ this.setModified(true);
+ }
+ }
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ this._ensureCanvas();
+ for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+ args[_key7] = arguments[_key7];
+ }
+ _main.default.prototype.copy.apply(this, args);
+ }
+ },
+ {
+ key: 'mask',
+ value: function mask() {
+ this.loadPixels();
+ this.setModified(true);
+ for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+ args[_key8] = arguments[_key8];
+ }
+ _main.default.Image.prototype.mask.apply(this, args);
+ } /**
+ * helper method for web GL mode to figure out if the element
+ * has been modified and might need to be re-uploaded to texture
+ * memory between frames.
+ * @method isModified
+ * @private
+ * @return {boolean} a boolean indicating whether or not the
+ * image has been updated or modified since last texture upload.
+ */
+
+ },
+ {
+ key: 'isModified',
+ value: function isModified() {
+ return this._modified;
+ } /**
+ * helper method for web GL mode to indicate that an element has been
+ * changed or unchanged since last upload. gl texture upload will
+ * set this value to false after uploading the texture; or might set
+ * it to true if metadata has become available but there is no actual
+ * texture data available yet..
+ * @method setModified
+ * @param {boolean} val sets whether or not the element has been
+ * modified.
+ * @private
+ */
+
+ },
+ {
+ key: 'setModified',
+ value: function setModified(value) {
+ this._modified = value;
+ } /**
+ * Calls a function when the audio/video reaches the end of its playback.
+ *
+ * The element is passed as an argument to the callback function.
+ *
+ * Note: The function won't be called if the media is looping.
+ *
+ * @method onended
+ * @param {Function} callback function to call when playback ends.
+ * The `p5.MediaElement` is passed as
+ * the argument.
+ * @chainable
+ *
+ * @example
+ *
+ * let dragon;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * dragon = createAudio('assets/lucky_dragons.mp3');
+ *
+ * // Show the default media controls.
+ * dragon.showControls();
+ *
+ * describe('The text "S seconds left" on a gray square with media controls beneath it. The number "S" decreases as the song plays.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the time remaining.
+ * let s = dragon.duration() - dragon.time();
+ *
+ * // Round s to 1 decimal place for display.
+ * s = round(s, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the time remaining.
+ * text(`${s} seconds left`, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'onended',
+ value: function onended(callback) {
+ this._onended = callback;
+ return this;
+ } /*** CONNECT TO WEB AUDIO API / p5.sound.js ***/
+ /**
+ * Sends the element's audio to an output.
+ *
+ * The parameter, `audioNode`, can be an `AudioNode` or an object from the
+ * `p5.sound` library.
+ *
+ * If no element is provided, as in `myElement.connect()`, the element
+ * connects to the main output. All connections are removed by the
+ * `.disconnect()` method.
+ *
+ * Note: This method is meant to be used with the p5.sound.js addon library.
+ *
+ * @method connect
+ * @param {AudioNode|Object} audioNode AudioNode from the Web Audio API,
+ * or an object from the p5.sound library
+ */
+
+ },
+ {
+ key: 'connect',
+ value: function connect(obj) {
+ var audioContext,
+ mainOutput;
+ // if p5.sound exists, same audio context
+ if (typeof _main.default.prototype.getAudioContext === 'function') {
+ audioContext = _main.default.prototype.getAudioContext();
+ mainOutput = _main.default.soundOut.input;
+ } else {
+ try {
+ audioContext = obj.context;
+ mainOutput = audioContext.destination;
+ } catch (e) {
+ throw 'connect() is meant to be used with Web Audio API or p5.sound.js';
+ }
+ } // create a Web Audio MediaElementAudioSourceNode if none already exists
+
+ if (!this.audioSourceNode) {
+ this.audioSourceNode = audioContext.createMediaElementSource(this.elt);
+ // connect to main output when this method is first called
+ this.audioSourceNode.connect(mainOutput);
+ } // connect to object if provided
+
+ if (obj) {
+ if (obj.input) {
+ this.audioSourceNode.connect(obj.input);
+ } else {
+ this.audioSourceNode.connect(obj);
+ }
+ } else {
+ // otherwise connect to main output of p5.sound / AudioContext
+ this.audioSourceNode.connect(mainOutput);
+ }
+ } /**
+ * Disconnect all Web Audio routing, including to the main output.
+ *
+ * This is useful if you want to re-route the output through audio effects,
+ * for example.
+ *
+ * @method disconnect
+ */
+
+ },
+ {
+ key: 'disconnect',
+ value: function disconnect() {
+ if (this.audioSourceNode) {
+ this.audioSourceNode.disconnect();
+ } else {
+ throw 'nothing to disconnect';
+ }
+ } /*** SHOW / HIDE CONTROLS ***/
+ /**
+ * Show the default
+ * HTMLMediaElement
+ * controls.
+ *
+ * Note: The controls vary between web browsers.
+ *
+ * @method showControls
+ *
+ * @example
+ *
+ * let beat;
+ * let isPlaying = false;
+ * let isDone = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * beat = createAudio('assets/beat.mp3');
+ *
+ * // Call handleEnd() when the beat finishes.
+ * beat.onended(handleEnd);
+ *
+ * describe('The text "Click to play" written in black on a gray square. A beat plays when the user clicks. The text "Done!" appears when the beat finishes playing.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display different messages based on playback.
+ * if (isDone === true) {
+ * text('Done!', 50, 50);
+ * } else if (isPlaying === false) {
+ * text('Click to play', 50, 50);
+ * } else {
+ * text('Playing...', 50, 50);
+ * }
+ * }
+ *
+ * // Play the beat when the user presses the mouse.
+ * function mousePressed() {
+ * if (isPlaying === false) {
+ * isPlaying = true;
+ * beat.play();
+ * }
+ * }
+ *
+ * // Set isDone when playback ends.
+ * function handleEnd() {
+ * isDone = false;
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'showControls',
+ value: function showControls() {
+ // must set style for the element to show on the page
+ this.elt.style['text-align'] = 'inherit';
+ this.elt.controls = true;
+ } /**
+ * Hide the default
+ * HTMLMediaElement
+ * controls.
+ *
+ * @method hideControls
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background('cornflowerblue');
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(50);
+ *
+ * // Display a dragon.
+ * text('🐉', 50, 50);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * let dragon = createAudio('assets/lucky_dragons.mp3');
+ *
+ * // Show the default media controls.
+ * dragon.showControls();
+ *
+ * describe('A dragon emoji, 🐉, drawn in the center of a blue square. A song plays in the background. Audio controls are displayed beneath the canvas.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'hideControls',
+ value: function hideControls() {
+ this.elt.controls = false;
+ } /**
+ * Schedules a function to call when the audio/video reaches a specific time
+ * during its playback.
+ *
+ * The first parameter, `time`, is the time, in seconds, when the function
+ * should run. This value is passed to `callback` as its first argument.
+ *
+ * The second parameter, `callback`, is the function to call at the specified
+ * cue time.
+ *
+ * The third parameter, `value`, is optional and can be any type of value.
+ * `value` is passed to `callback`.
+ *
+ * Calling `media.addCue()` returns an ID as a string. This is useful for
+ * removing the cue later.
+ *
+ * @method addCue
+ * @param {Number} time cue time to run the callback function.
+ * @param {Function} callback function to call at the cue time.
+ * @param {Object} [value] object to pass as the argument to
+ * `callback`.
+ * @return {Number} id ID of this cue,
+ * useful for `media.removeCue(id)`.
+ *
+ * @example
+ *
+ * let dragon;
+ * let isHidden = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * dragon = createAudio('assets/lucky_dragons.mp3');
+ *
+ * // Show the default media controls.
+ * dragon.showControls();
+ *
+ * describe('The text "Double-click to hide controls" written in the middle of a gray square. A song plays in the background. Audio controls are displayed beneath the canvas. The controls appear/disappear when the user double-clicks the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ *
+ * // Display a different message when controls are hidden or shown.
+ * if (isHidden === true) {
+ * text('Double-click to show controls', 10, 20, 80, 80);
+ * } else {
+ * text('Double-click to hide controls', 10, 20, 80, 80);
+ * }
+ * }
+ *
+ * // Show/hide controls based on a double-click.
+ * function doubleClicked() {
+ * if (isHidden === true) {
+ * dragon.showControls();
+ * isHidden = false;
+ * } else {
+ * dragon.hideControls();
+ * isHidden = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'addCue',
+ value: function addCue(time, callback, val) {
+ var id = this._cueIDCounter++;
+ var cue = new Cue(callback, time, id, val);
+ this._cues.push(cue);
+ if (!this.elt.ontimeupdate) {
+ this.elt.ontimeupdate = this._onTimeUpdate.bind(this);
+ }
+ return id;
+ } /**
+ * Removes a callback based on its ID.
+ *
+ * @method removeCue
+ * @param {Number} id ID of the cue, created by `media.addCue()`.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * let beat = createAudio('assets/beat.mp3');
+ *
+ * // Play the beat in a loop.
+ * beat.loop();
+ *
+ * // Schedule a few events.
+ * beat.addCue(0, changeBackground, 'red');
+ * beat.addCue(2, changeBackground, 'deeppink');
+ * beat.addCue(4, changeBackground, 'orchid');
+ * beat.addCue(6, changeBackground, 'lavender');
+ *
+ * describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');
+ * }
+ *
+ * // Change the background color.
+ * function changeBackground(c) {
+ * background(c);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'removeCue',
+ value: function removeCue(id) {
+ for (var i = 0; i < this._cues.length; i++) {
+ if (this._cues[i].id === id) {
+ console.log(id);
+ this._cues.splice(i, 1);
+ }
+ }
+ if (this._cues.length === 0) {
+ this.elt.ontimeupdate = null;
+ }
+ } /**
+ * Removes all functions scheduled with `media.addCue()`.
+ *
+ * @method clearCues
+ *
+ * @example
+ *
+ * let lavenderID;
+ * let isRemoved = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * let beat = createAudio('assets/beat.mp3');
+ *
+ * // Play the beat in a loop.
+ * beat.loop();
+ *
+ * // Schedule a few events.
+ * beat.addCue(0, changeBackground, 'red');
+ * beat.addCue(2, changeBackground, 'deeppink');
+ * beat.addCue(4, changeBackground, 'orchid');
+ *
+ * // Record the ID of the "lavender" callback.
+ * lavenderID = beat.addCue(6, changeBackground, 'lavender');
+ *
+ * describe('The text "Double-click to remove lavender." written on a red square. The color changes every 2 seconds while the audio plays. The lavender option is removed when the user double-clicks the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Display different instructions based on the available callbacks.
+ * if (isRemoved === false) {
+ * text('Double-click to remove lavender.', 10, 10, 80, 80);
+ * } else {
+ * text('No more lavender.', 10, 10, 80, 80);
+ * }
+ * }
+ *
+ * // Change the background color.
+ * function changeBackground(c) {
+ * background(c);
+ * }
+ *
+ * // Remove the lavender color-change cue when the user double-clicks.
+ * function doubleClicked() {
+ * if (isRemoved === false) {
+ * beat.removeCue(lavenderID);
+ * isRemoved = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'clearCues',
+ value: function clearCues() {
+ this._cues = [
+ ];
+ this.elt.ontimeupdate = null;
+ } // private method that checks for cues to be fired if events
+ // have been scheduled using addCue(callback, time).
+
+ },
+ {
+ key: '_onTimeUpdate',
+ value: function _onTimeUpdate() {
+ var playbackTime = this.time();
+ for (var i = 0; i < this._cues.length; i++) {
+ var callbackTime = this._cues[i].time;
+ var val = this._cues[i].val;
+ if (this._prevTime < callbackTime && callbackTime <= playbackTime) {
+ // pass the scheduled callbackTime as parameter to the callback
+ this._cues[i].callback(val);
+ }
+ }
+ this._prevTime = playbackTime;
+ }
+ }
+ ]);
+ return MediaElement;
+ }(_main.default.Element);
+ _main.default.MediaElement = MediaElement;
+ /**
+ * A class to describe a file.
+ *
+ * `p5.File` objects are used by
+ * myElement.drop() and
+ * created by
+ * createFileInput.
+ *
+ * @class p5.File
+ * @constructor
+ * @param {File} file wrapped file.
+ *
+ * @example
+ *
+ * let isChanging = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.MediaElement using createAudio().
+ * let beat = createAudio('assets/beat.mp3');
+ *
+ * // Play the beat in a loop.
+ * beat.loop();
+ *
+ * // Schedule a few events.
+ * beat.addCue(0, changeBackground, 'red');
+ * beat.addCue(2, changeBackground, 'deeppink');
+ * beat.addCue(4, changeBackground, 'orchid');
+ * beat.addCue(6, changeBackground, 'lavender');
+ *
+ * describe('The text "Double-click to stop changing." written on a square. The color changes every 2 seconds while the audio plays. The color stops changing when the user double-clicks the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Display different instructions based on the available callbacks.
+ * if (isChanging === true) {
+ * text('Double-click to stop changing.', 10, 10, 80, 80);
+ * } else {
+ * text('No more changes.', 10, 10, 80, 80);
+ * }
+ * }
+ *
+ * // Change the background color.
+ * function changeBackground(c) {
+ * background(c);
+ * }
+ *
+ * // Remove cued functions and stop changing colors when the user
+ * // double-clicks.
+ * function doubleClicked() {
+ * if (isChanging === true) {
+ * beat.clearCues();
+ * isChanging = false;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Use the file input to load a
+ * // file and display its info.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a file input and place it beneath the canvas.
+ * // Call displayInfo() when the file loads.
+ * let input = createFileInput(displayInfo);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
+ * }
+ *
+ * // Display the p5.File's info once it loads.
+ * function displayInfo(file) {
+ * background(200);
+ *
+ * // Display the p5.File's name.
+ * text(file.name, 10, 10, 80, 40);
+ *
+ * // Display the p5.File's type and subtype.
+ * text(`${file.type}/${file.subtype}`, 10, 70);
+ *
+ * // Display the p5.File's size in bytes.
+ * text(file.size, 10, 90);
+ * }
+ *
+ *
+ *
+ */
+ var File = /*#__PURE__*/ function () {
+ function File(file, pInst) {
+ _classCallCheck(this, File);
+ /**
+ * Underlying
+ * File
+ * object. All `File` properties and methods are accessible.
+ *
+ * @property file
+ *
+ * @example
+ *
+ * // Use the file input to select an image to
+ * // load and display.
+ * let img;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a file input and place it beneath the canvas.
+ * // Call handleImage() when the file image loads.
+ * let input = createFileInput(handleImage);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the image if it's ready.
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * // Use the p5.File's data once it loads.
+ * function handleImage(file) {
+ * // Check the p5.File's type.
+ * if (file.type === 'image') {
+ * // Create an image using using the p5.File's data.
+ * img = createImg(file.data, '');
+ *
+ * // Hide the image element so it doesn't appear twice.
+ * img.hide();
+ * } else {
+ * img = null;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ this.file = file;
+ this._pInst = pInst;
+ // Splitting out the file type into two components
+ // This makes determining if image or text etc simpler
+ var typeList = file.type.split('/');
+ /**
+ * The file
+ * MIME type
+ * as a string.
+ *
+ * For example, `'image'` and `'text'` are both MIME types.
+ *
+ * @property type
+ *
+ * @example
+ *
+ * // Use the file input to load a
+ * // file and display its info.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a file input and place it beneath the canvas.
+ * // Call displayInfo() when the file loads.
+ * let input = createFileInput(displayInfo);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
+ * }
+ *
+ * // Use the p5.File once it loads.
+ * function displayInfo(file) {
+ * background(200);
+ *
+ * // Display the p5.File's name.
+ * text(file.name, 10, 10, 80, 40);
+ *
+ * // Display the p5.File's type and subtype.
+ * text(`${file.type}/${file.subtype}`, 10, 70);
+ *
+ * // Display the p5.File's size in bytes.
+ * text(file.size, 10, 90);
+ * }
+ *
+ *
+ *
+ */
+ this.type = typeList[0];
+ /**
+ * The file subtype as a string.
+ *
+ * For example, a file with an `'image'`
+ * MIME type
+ * may have a subtype such as ``png`` or ``jpeg``.
+ *
+ * @property subtype
+ *
+ * @example
+ *
+ * // Use the file input to load a file and display its info.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a file input and place it beneath the canvas.
+ * // Call displayType() when the file loads.
+ * let input = createFileInput(displayType);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user loads a file, its type is written in black.');
+ * }
+ *
+ * // Display the p5.File's type once it loads.
+ * function displayType(file) {
+ * background(200);
+ *
+ * // Display the p5.File's type.
+ * text(`This is file's type is: ${file.type}`, 10, 10, 80, 80);
+ * }
+ *
+ *
+ *
+ */
+ this.subtype = typeList[1];
+ /**
+ * The file name as a string.
+ *
+ * @property name
+ *
+ * @example
+ *
+ * // Use the file input to load a
+ * // file and display its info.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a file input and place it beneath the canvas.
+ * // Call displaySubtype() when the file loads.
+ * let input = createFileInput(displaySubtype);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user loads a file, its subtype is written in black.');
+ * }
+ *
+ * // Display the p5.File's type once it loads.
+ * function displaySubtype(file) {
+ * background(200);
+ *
+ * // Display the p5.File's subtype.
+ * text(`This is file's subtype is: ${file.subtype}`, 10, 10, 80, 80);
+ * }
+ *
+ *
+ *
+ */
+ this.name = file.name;
+ /**
+ * The number of bytes in the file.
+ *
+ * @property size
+ *
+ * @example
+ *
+ * // Use the file input to load a
+ * // file and display its info.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a file input and place it beneath the canvas.
+ * // Call displayName() when the file loads.
+ * let input = createFileInput(displayName);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user loads a file, its name is written in black.');
+ * }
+ *
+ * // Display the p5.File's name once it loads.
+ * function displayName(file) {
+ * background(200);
+ *
+ * // Display the p5.File's name.
+ * text(`This is file's name is: ${file.name}`, 10, 10, 80, 80);
+ * }
+ *
+ *
+ *
+ */
+ this.size = file.size;
+ /**
+ * A string containing the file's data.
+ *
+ * Data can be either image data, text contents, or a parsed object in the
+ * case of JSON and p5.XML objects.
+ *
+ * @property data
+ *
+ * @example
+ *
+ * // Use the file input to load a file and display its info.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a file input and place it beneath the canvas.
+ * // Call displaySize() when the file loads.
+ * let input = createFileInput(displaySize);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user loads a file, its size in bytes is written in black.');
+ * }
+ *
+ * // Display the p5.File's size in bytes once it loads.
+ * function displaySize(file) {
+ * background(200);
+ *
+ * // Display the p5.File's size.
+ * text(`This is file has ${file.size} bytes.`, 10, 10, 80, 80);
+ * }
+ *
+ *
+ *
+ */
+ this.data = undefined;
+ }
+ _createClass(File, null, [
+ {
+ key: '_createLoader',
+ value: function _createLoader(theFile, callback) {
+ var reader = new FileReader();
+ reader.onload = function (e) {
+ var p5file = new _main.default.File(theFile);
+ if (p5file.file.type === 'application/json') {
+ // Parse JSON and store the result in data
+ p5file.data = JSON.parse(e.target.result);
+ } else if (p5file.file.type === 'text/xml') {
+ // Parse XML, wrap it in p5.XML and store the result in data
+ var parser = new DOMParser();
+ var xml = parser.parseFromString(e.target.result, 'text/xml');
+ p5file.data = new _main.default.XML(xml.documentElement);
+ } else {
+ p5file.data = e.target.result;
+ }
+ callback(p5file);
+ };
+ return reader;
+ }
+ },
+ {
+ key: '_load',
+ value: function _load(f, callback) {
+ // Text or data?
+ // This should likely be improved
+ if (/^text\//.test(f.type) || f.type === 'application/json') {
+ _main.default.File._createLoader(f, callback).readAsText(f);
+ } else if (!/^(video|audio)\//.test(f.type)) {
+ _main.default.File._createLoader(f, callback).readAsDataURL(f);
+ } else {
+ var file = new _main.default.File(f);
+ file.data = URL.createObjectURL(f);
+ callback(file);
+ }
+ }
+ }
+ ]);
+ return File;
+ }();
+ _main.default.File = File;
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.every': 172,
+ 'core-js/modules/es.array.filter': 174,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.function.name': 191,
+ 'core-js/modules/es.object.assign': 199,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.promise': 206,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.string.trim': 224,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.for-each': 260,
+ 'core-js/modules/web.dom-collections.iterator': 261,
+ 'core-js/modules/web.url': 263
+ }
+ ],
+ 320: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Events
+ * @submodule Acceleration
+ * @for p5
+ * @requires core
+ * @main Events
+ */
+ /**
+ * The system variable deviceOrientation always contains the orientation of
+ * the device. The value of this variable will either be set 'landscape'
+ * or 'portrait'. If no data is available it will be set to 'undefined'.
+ * either LANDSCAPE or PORTRAIT.
+ *
+ * @property {Constant} deviceOrientation
+ * @readOnly
+ */
+
+ _main.default.prototype.deviceOrientation = window.innerWidth / window.innerHeight > 1 ? 'landscape' : 'portrait';
+ /**
+ * The system variable accelerationX always contains the acceleration of the
+ * device along the x axis. Value is represented as meters per second squared.
+ *
+ * @property {Number} accelerationX
+ * @readOnly
+ * @example
+ *
+ * // Use the file input to load a file and display its info.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a file input and place it beneath the canvas.
+ * // Call displayData() when the file loads.
+ * let input = createFileInput(displayData);
+ * input.position(0, 100);
+ *
+ * describe('A gray square with a file input beneath it. If the user loads a file, its data is written in black.');
+ * }
+ *
+ * // Display the p5.File's data once it loads.
+ * function displayData(file) {
+ * background(200);
+ *
+ * // Display the p5.File's data, which looks like a random string of characters.
+ * text(file.data, 10, 10, 80, 80);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.accelerationX = 0;
+ /**
+ * The system variable accelerationY always contains the acceleration of the
+ * device along the y axis. Value is represented as meters per second squared.
+ *
+ * @property {Number} accelerationY
+ * @readOnly
+ * @example
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationX);
+ * describe('Magnitude of device acceleration is displayed as ellipse size.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.accelerationY = 0;
+ /**
+ * The system variable accelerationZ always contains the acceleration of the
+ * device along the z axis. Value is represented as meters per second squared.
+ *
+ * @property {Number} accelerationZ
+ * @readOnly
+ *
+ * @example
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationY);
+ * describe('Magnitude of device acceleration is displayed as ellipse size');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.accelerationZ = 0;
+ /**
+ * The system variable pAccelerationX always contains the acceleration of the
+ * device along the x axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationX
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationX = 0;
+ /**
+ * The system variable pAccelerationY always contains the acceleration of the
+ * device along the y axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationY
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationY = 0;
+ /**
+ * The system variable pAccelerationZ always contains the acceleration of the
+ * device along the z axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationZ
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationZ = 0;
+ /**
+ * _updatePAccelerations updates the pAcceleration values
+ *
+ * @private
+ */
+ _main.default.prototype._updatePAccelerations = function () {
+ this._setProperty('pAccelerationX', this.accelerationX);
+ this._setProperty('pAccelerationY', this.accelerationY);
+ this._setProperty('pAccelerationZ', this.accelerationZ);
+ };
+ /**
+ * The system variable rotationX always contains the rotation of the
+ * device along the x axis. If the sketch
+ * angleMode() is set to DEGREES, the value will be -180 to 180. If
+ * it is set to RADIANS, the value will be -PI to PI.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @property {Number} rotationX
+ * @readOnly
+ * @example
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationZ);
+ * describe('Magnitude of device acceleration is displayed as ellipse size');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rotationX = 0;
+ /**
+ * The system variable rotationY always contains the rotation of the
+ * device along the y axis. If the sketch
+ * angleMode() is set to DEGREES, the value will be -90 to 90. If
+ * it is set to RADIANS, the value will be -PI/2 to PI/2.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @property {Number} rotationY
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * describe(`red horizontal line right, green vertical line bottom.
+ * black background.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rotationY = 0;
+ /**
+ * The system variable rotationZ always contains the rotation of the
+ * device along the z axis. If the sketch
+ * angleMode() is set to DEGREES, the value will be 0 to 360. If
+ * it is set to RADIANS, the value will be 0 to 2*PI.
+ *
+ * Unlike rotationX and rotationY, this variable is available for devices
+ * with a built-in compass only.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * describe(`red horizontal line right, green vertical line bottom.
+ * black background.`);
+ * }
+ *
+ *
+ *
+ *
+ * @property {Number} rotationZ
+ * @readOnly
+ */
+ _main.default.prototype.rotationZ = 0;
+ /**
+ * The system variable pRotationX always contains the rotation of the
+ * device along the x axis in the frame previous to the current frame.
+ * If the sketch angleMode() is set to DEGREES,
+ * the value will be -180 to 180. If it is set to RADIANS, the value will
+ * be -PI to PI.
+ *
+ * pRotationX can also be used with rotationX to determine the rotate
+ * direction of the device along the X-axis.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * describe(`red horizontal line right, green vertical line bottom.
+ * black background.`);
+ * }
+ *
+ *
+ *
+ *
+ * @property {Number} pRotationX
+ * @readOnly
+ */
+ _main.default.prototype.pRotationX = 0;
+ /**
+ * The system variable pRotationY always contains the rotation of the
+ * device along the y axis in the frame previous to the current frame.
+ * If the sketch angleMode() is set to DEGREES,
+ * the value will be -90 to 90. If it is set to RADIANS, the value will
+ * be -PI/2 to PI/2.
+ *
+ * pRotationY can also be used with rotationY to determine the rotate
+ * direction of the device along the Y-axis.
+ * @example
+ *
+ * // A simple if statement looking at whether
+ * // rotationX - pRotationX < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * // Simple range conversion to make things simpler.
+ * // This is not absolutely necessary but the logic
+ * // will be different in that case.
+ *
+ * let rX = rotationX + 180;
+ * let pRX = pRotationX + 180;
+ *
+ * if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
+ * rotateDirection = 'clockwise';
+ * } else if (rX - pRX < 0 || rX - pRX > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ *
+ * print(rotateDirection);
+ * describe('no image to display.');
+ *
+ *
+ *
+ *
+ * @property {Number} pRotationY
+ * @readOnly
+ */
+ _main.default.prototype.pRotationY = 0;
+ /**
+ * The system variable pRotationZ always contains the rotation of the
+ * device along the z axis in the frame previous to the current frame.
+ * If the sketch angleMode() is set to DEGREES,
+ * the value will be 0 to 360. If it is set to RADIANS, the value will
+ * be 0 to 2*PI.
+ *
+ * pRotationZ can also be used with rotationZ to determine the rotate
+ * direction of the device along the Z-axis.
+ * @example
+ *
+ * // A simple if statement looking at whether
+ * // rotationY - pRotationY < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * // Simple range conversion to make things simpler.
+ * // This is not absolutely necessary but the logic
+ * // will be different in that case.
+ *
+ * let rY = rotationY + 180;
+ * let pRY = pRotationY + 180;
+ *
+ * if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
+ * rotateDirection = 'clockwise';
+ * } else if (rY - pRY < 0 || rY - pRY > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ * print(rotateDirection);
+ * describe('no image to display.');
+ *
+ *
+ *
+ *
+ * @property {Number} pRotationZ
+ * @readOnly
+ */
+ _main.default.prototype.pRotationZ = 0;
+ var startAngleX = 0;
+ var startAngleY = 0;
+ var startAngleZ = 0;
+ var rotateDirectionX = 'clockwise';
+ var rotateDirectionY = 'clockwise';
+ var rotateDirectionZ = 'clockwise';
+ _main.default.prototype.pRotateDirectionX = undefined;
+ _main.default.prototype.pRotateDirectionY = undefined;
+ _main.default.prototype.pRotateDirectionZ = undefined;
+ _main.default.prototype._updatePRotations = function () {
+ this._setProperty('pRotationX', this.rotationX);
+ this._setProperty('pRotationY', this.rotationY);
+ this._setProperty('pRotationZ', this.rotationZ);
+ };
+ /**
+ * When a device is rotated, the axis that triggers the deviceTurned()
+ * method is stored in the turnAxis variable. The turnAxis variable is only defined within
+ * the scope of deviceTurned().
+ * @property {String} turnAxis
+ * @readOnly
+ * @example
+ *
+ * // A simple if statement looking at whether
+ * // rotationZ - pRotationZ < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * if (
+ * (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
+ * rotationZ - pRotationZ < -270
+ * ) {
+ * rotateDirection = 'clockwise';
+ * } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ * print(rotateDirection);
+ * describe('no image to display.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.turnAxis = undefined;
+ var move_threshold = 0.5;
+ var shake_threshold = 30;
+ /**
+ * The setMoveThreshold() function is used to set the movement threshold for
+ * the deviceMoved() function. The default threshold is set to 0.5.
+ *
+ * @method setMoveThreshold
+ * @param {number} value The threshold value
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device turns`);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when x-axis turns`);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.setMoveThreshold = function (val) {
+ _main.default._validateParameters('setMoveThreshold', arguments);
+ move_threshold = val;
+ };
+ /**
+ * The setShakeThreshold() function is used to set the movement threshold for
+ * the deviceShaken() function. The default threshold is set to 30.
+ *
+ * @method setShakeThreshold
+ * @param {number} value The threshold value
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // You will need to move the device incrementally further
+ * // the closer the square's color gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 0.5;
+ * function setup() {
+ * setMoveThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device moves`);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 0.1;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setMoveThreshold(threshold);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.setShakeThreshold = function (val) {
+ _main.default._validateParameters('setShakeThreshold', arguments);
+ shake_threshold = val;
+ };
+ /**
+ * The deviceMoved() function is called when the device is moved by more than
+ * the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
+ * The threshold value can be changed using setMoveThreshold().
+ *
+ * @method deviceMoved
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // You will need to shake the device more firmly
+ * // the closer the box's fill gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 30;
+ * function setup() {
+ * setShakeThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device is being shaked`);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 5;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setShakeThreshold(threshold);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The deviceTurned() function is called when the device rotates by
+ * more than 90 degrees continuously.
+ *
+ * The axis that triggers the deviceTurned() method is stored in the turnAxis
+ * variable. The deviceTurned() method can be locked to trigger on any axis:
+ * X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
+ *
+ * @method deviceTurned
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // Move the device around
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device moves`);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device turns`);
+ * }
+ * function deviceTurned() {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The deviceShaken() function is called when the device total acceleration
+ * changes of accelerationX and accelerationY values is more than
+ * the threshold value. The default threshold is set to 30.
+ * The threshold value can be changed using setShakeThreshold().
+ *
+ * @method deviceShaken
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when x-axis turns`);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._ondeviceorientation = function (e) {
+ this._updatePRotations();
+ // Convert from degrees into current angle mode
+ this._setProperty('rotationX', this._fromDegrees(e.beta));
+ this._setProperty('rotationY', this._fromDegrees(e.gamma));
+ this._setProperty('rotationZ', this._fromDegrees(e.alpha));
+ this._handleMotion();
+ };
+ _main.default.prototype._ondevicemotion = function (e) {
+ this._updatePAccelerations();
+ this._setProperty('accelerationX', e.acceleration.x * 2);
+ this._setProperty('accelerationY', e.acceleration.y * 2);
+ this._setProperty('accelerationZ', e.acceleration.z * 2);
+ this._handleMotion();
+ };
+ _main.default.prototype._handleMotion = function () {
+ if (window.orientation === 90 || window.orientation === - 90) {
+ this._setProperty('deviceOrientation', 'landscape');
+ } else if (window.orientation === 0) {
+ this._setProperty('deviceOrientation', 'portrait');
+ } else if (window.orientation === undefined) {
+ this._setProperty('deviceOrientation', 'undefined');
+ }
+ var context = this._isGlobal ? window : this;
+ if (typeof context.deviceMoved === 'function') {
+ if (Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold || Math.abs(this.accelerationY - this.pAccelerationY) > move_threshold || Math.abs(this.accelerationZ - this.pAccelerationZ) > move_threshold) {
+ context.deviceMoved();
+ }
+ }
+ if (typeof context.deviceTurned === 'function') {
+ // The angles given by rotationX etc is from range [-180 to 180].
+ // The following will convert them to [0 to 360] for ease of calculation
+ // of cases when the angles wrapped around.
+ // _startAngleX will be converted back at the end and updated.
+ // Rotations are converted to degrees and all calculations are done in degrees
+ var wRX = this._toDegrees(this.rotationX) + 180;
+ var wPRX = this._toDegrees(this.pRotationX) + 180;
+ var wSAX = startAngleX + 180;
+ if (wRX - wPRX > 0 && wRX - wPRX < 270 || wRX - wPRX < - 270) {
+ rotateDirectionX = 'clockwise';
+ } else if (wRX - wPRX < 0 || wRX - wPRX > 270) {
+ rotateDirectionX = 'counter-clockwise';
+ }
+ if (rotateDirectionX !== this.pRotateDirectionX) {
+ wSAX = wRX;
+ }
+ if (Math.abs(wRX - wSAX) > 90 && Math.abs(wRX - wSAX) < 270) {
+ wSAX = wRX;
+ this._setProperty('turnAxis', 'X');
+ context.deviceTurned();
+ }
+ this.pRotateDirectionX = rotateDirectionX;
+ startAngleX = wSAX - 180;
+ // Y-axis is identical to X-axis except for changing some names.
+ var wRY = this._toDegrees(this.rotationY) + 180;
+ var wPRY = this._toDegrees(this.pRotationY) + 180;
+ var wSAY = startAngleY + 180;
+ if (wRY - wPRY > 0 && wRY - wPRY < 270 || wRY - wPRY < - 270) {
+ rotateDirectionY = 'clockwise';
+ } else if (wRY - wPRY < 0 || wRY - this.pRotationY > 270) {
+ rotateDirectionY = 'counter-clockwise';
+ }
+ if (rotateDirectionY !== this.pRotateDirectionY) {
+ wSAY = wRY;
+ }
+ if (Math.abs(wRY - wSAY) > 90 && Math.abs(wRY - wSAY) < 270) {
+ wSAY = wRY;
+ this._setProperty('turnAxis', 'Y');
+ context.deviceTurned();
+ }
+ this.pRotateDirectionY = rotateDirectionY;
+ startAngleY = wSAY - 180;
+ // Z-axis is already in the range 0 to 360
+ // so no conversion is needed.
+ var rotZ = this._toDegrees(this.rotationZ);
+ var pRotZ = this._toDegrees(this.pRotationZ);
+ if (rotZ - pRotZ > 0 && rotZ - pRotZ < 270 || rotZ - pRotZ < - 270) {
+ rotateDirectionZ = 'clockwise';
+ } else if (rotZ - pRotZ < 0 || rotZ - pRotZ > 270) {
+ rotateDirectionZ = 'counter-clockwise';
+ }
+ if (rotateDirectionZ !== this.pRotateDirectionZ) {
+ startAngleZ = rotZ;
+ }
+ if (Math.abs(rotZ - startAngleZ) > 90 && Math.abs(rotZ - startAngleZ) < 270) {
+ startAngleZ = rotZ;
+ this._setProperty('turnAxis', 'Z');
+ context.deviceTurned();
+ }
+ this.pRotateDirectionZ = rotateDirectionZ;
+ this._setProperty('turnAxis', undefined);
+ }
+ if (typeof context.deviceShaken === 'function') {
+ var accelerationChangeX;
+ var accelerationChangeY;
+ // Add accelerationChangeZ if acceleration change on Z is needed
+ if (this.pAccelerationX !== null) {
+ accelerationChangeX = Math.abs(this.accelerationX - this.pAccelerationX);
+ accelerationChangeY = Math.abs(this.accelerationY - this.pAccelerationY);
+ }
+ if (accelerationChangeX + accelerationChangeY > shake_threshold) {
+ context.deviceShaken();
+ }
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303
+ }
+ ],
+ 321: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Events
+ * @submodule Keyboard
+ * @for p5
+ * @requires core
+ */
+ /**
+ * A `Boolean` system variable that's `true` if any key is currently pressed
+ * and `false` if not.
+ *
+ * @property {Boolean} keyIsPressed
+ * @readOnly
+ *
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // Shake the device to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device shakes`);
+ * }
+ * function deviceShaken() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a white square at its center. The white square turns black when the user presses a key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * if (keyIsPressed === true) {
+ * fill(0);
+ * } else {
+ * fill(255);
+ * }
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a white square at its center. The white square turns black when the user presses a key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * if (keyIsPressed) {
+ * fill(0);
+ * } else {
+ * fill(255);
+ * }
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.isKeyPressed = false;
+ _main.default.prototype.keyIsPressed = false; // khan
+ /**
+ * A `String` system variable that contains the value of the last key typed.
+ *
+ * The key variable is helpful for checking whether an
+ * ASCII
+ * key has been typed. For example, the expression `key === "a"` evaluates to
+ * `true` if the `a` key was typed and `false` if not. `key` doesn’t update
+ * for special keys such as `LEFT_ARROW` and `ENTER`. Use keyCode instead for
+ * special keys. The keyIsDown() function should
+ * be used to check for multiple different key presses at the same time.
+ *
+ * @property {String} key
+ * @readOnly
+ *
+ * @example
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the word "false" at its center. The word switches to "true" when the user presses a key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the value of keyIsPressed.
+ * text(keyIsPressed, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. The last key pressed is displayed at the center.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the last key pressed.
+ * text(key, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.key = '';
+ /**
+ * A `Number` system variable that contains the code of the last key typed.
+ *
+ * All keys have a `keyCode`. For example, the `a` key has the `keyCode` 65.
+ * The `keyCode` variable is helpful for checking whether a special key has
+ * been typed. For example, the following conditional checks whether the enter
+ * key has been typed:
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let x = 50;
+ * let y = 50;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe(
+ * 'A gray square with a black circle at its center. The circle moves when the user presses the keys "w", "a", "s", or "d". It leaves a trail as it moves.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Update x and y if a key is pressed.
+ * if (keyIsPressed === true) {
+ * if (key === 'w') {
+ * y -= 1;
+ * } else if (key === 's') {
+ * y += 1;
+ * } else if (key === 'a') {
+ * x -= 1;
+ * } else if (key === 'd') {
+ * x += 1;
+ * }
+ * }
+ *
+ * // Style the circle.
+ * fill(0);
+ *
+ * // Draw the circle at (x, y).
+ * circle(x, y, 5);
+ * }
+ *
+ *
+ * if (keyCode === 13) {
+ * // Code to run if the enter key was pressed.
+ * }
+ *
+ *
+ * The same code can be written more clearly using the system variable `ENTER`
+ * which has a value of 13:
+ *
+ *
+ * if (keyCode === ENTER) {
+ * // Code to run if the enter key was pressed.
+ * }
+ *
+ *
+ * The system variables `BACKSPACE`, `DELETE`, `ENTER`, `RETURN`, `TAB`,
+ * `ESCAPE`, `SHIFT`, `CONTROL`, `OPTION`, `ALT`, `UP_ARROW`, `DOWN_ARROW`,
+ * `LEFT_ARROW`, and `RIGHT_ARROW` are all helpful shorthands the key codes of
+ * special keys. Key codes can be found on websites such as
+ * keycode.info.
+ *
+ * @property {Integer} keyCode
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. The last key pressed and its code are displayed at the center.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the last key pressed and its code.
+ * text(`${key} : ${keyCode}`, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.keyCode = 0;
+ /**
+ * A function that's called once when any key is pressed.
+ *
+ * Declaring the function `keyPressed()` sets a code block to run once
+ * automatically when the user presses any key:
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let x = 50;
+ * let y = 50;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe(
+ * 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Update x and y if an arrow key is pressed.
+ * if (keyIsPressed === true) {
+ * if (keyCode === UP_ARROW) {
+ * y -= 1;
+ * } else if (keyCode === DOWN_ARROW) {
+ * y += 1;
+ * } else if (keyCode === LEFT_ARROW) {
+ * x -= 1;
+ * } else if (keyCode === RIGHT_ARROW) {
+ * x += 1;
+ * }
+ * }
+ *
+ * // Style the circle.
+ * fill(0);
+ *
+ * // Draw the circle at (x, y).
+ * circle(x, y, 5);
+ * }
+ *
+ *
+ * function keyPressed() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The key and keyCode
+ * variables will be updated with the most recently typed value when
+ * `keyPressed()` is called by p5.js:
+ *
+ *
+ * function keyPressed() {
+ * if (key === 'c') {
+ * // Code to run.
+ * }
+ *
+ * if (keyCode === ENTER) {
+ * // Code to run.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `keyPressed()` is always passed a
+ * KeyboardEvent
+ * object with properties that describe the key press event:
+ *
+ *
+ * function keyPressed(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * Browsers may have default behaviors attached to various key events. For
+ * example, some browsers may jump to the bottom of a web page when the
+ * `SPACE` key is pressed. To prevent any default behavior for this event, add
+ * `return false;` to the end of the function.
+ *
+ * @method keyPressed
+ * @param {KeyboardEvent} [event] optional `KeyboardEvent` callback argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square changes color when the user presses a key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle the background color when the user presses a key.
+ * function keyPressed() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a white square at its center. The inner square turns black when the user presses the "b" key. It turns white when the user presses the "a" key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Reassign value when the user presses the 'a' or 'b' key.
+ * function keyPressed() {
+ * if (key === 'a') {
+ * value = 255;
+ * } else if (key === 'b') {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onkeydown = function (e) {
+ if (this._downKeys[e.which]) {
+ // prevent multiple firings
+ return;
+ }
+ this._setProperty('isKeyPressed', true);
+ this._setProperty('keyIsPressed', true);
+ this._setProperty('keyCode', e.which);
+ this._downKeys[e.which] = true;
+ this._setProperty('key', e.key || String.fromCharCode(e.which) || e.which);
+ var context = this._isGlobal ? window : this;
+ if (typeof context.keyPressed === 'function' && !e.charCode) {
+ var executeDefault = context.keyPressed(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * A function that's called once when any key is released.
+ *
+ * Declaring the function `keyReleased()` sets a code block to run once
+ * automatically when the user releases any key:
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle the background color when the user presses an arrow key.
+ * function keyPressed() {
+ * if (keyCode === LEFT_ARROW) {
+ * value = 255;
+ * } else if (keyCode === RIGHT_ARROW) {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ * function keyReleased() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The key and keyCode
+ * variables will be updated with the most recently released value when
+ * `keyReleased()` is called by p5.js:
+ *
+ *
+ * function keyReleased() {
+ * if (key === 'c') {
+ * // Code to run.
+ * }
+ *
+ * if (keyCode === ENTER) {
+ * // Code to run.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `keyReleased()` is always passed a
+ * KeyboardEvent
+ * object with properties that describe the key press event:
+ *
+ *
+ * function keyReleased(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * Browsers may have default behaviors attached to various key events. To
+ * prevent any default behavior for this event, add `return false;` to the end
+ * of the function.
+ *
+ * @method keyReleased
+ * @param {KeyboardEvent} [event] optional `KeyboardEvent` callback argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square changes color when the user releases a key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle value when the user releases a key.
+ * function keyReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square becomes white when the user releases the "w" key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Set value to 255 the user releases the 'w' key.
+ * function keyReleased() {
+ * if (key === 'w') {
+ * value = 255;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onkeyup = function (e) {
+ this._downKeys[e.which] = false;
+ if (!this._areDownKeys()) {
+ this._setProperty('isKeyPressed', false);
+ this._setProperty('keyIsPressed', false);
+ }
+ this._setProperty('_lastKeyCodeTyped', null);
+ this._setProperty('key', e.key || String.fromCharCode(e.which) || e.which);
+ this._setProperty('keyCode', e.which);
+ var context = this._isGlobal ? window : this;
+ if (typeof context.keyReleased === 'function') {
+ var executeDefault = context.keyReleased(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * A function that's called once when keys with printable characters are pressed.
+ *
+ * Declaring the function `keyTyped()` sets a code block to run once
+ * automatically when the user presses any key with a printable character such
+ * as `a` or 1. Modifier keys such as `SHIFT`, `CONTROL`, and the arrow keys
+ * will be ignored:
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle the background color when the user releases an arrow key.
+ * function keyReleased() {
+ * if (keyCode === LEFT_ARROW) {
+ * value = 255;
+ * } else if (keyCode === RIGHT_ARROW) {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ * function keyTyped() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The key and keyCode
+ * variables will be updated with the most recently released value when
+ * `keyTyped()` is called by p5.js:
+ *
+ *
+ * function keyTyped() {
+ * // Check for the "c" character using key.
+ * if (key === 'c') {
+ * // Code to run.
+ * }
+ *
+ * // Check for "c" using keyCode.
+ * if (keyCode === 67) {
+ * // Code to run.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `keyTyped()` is always passed a
+ * KeyboardEvent
+ * object with properties that describe the key press event:
+ *
+ *
+ * function keyReleased(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * Note: Use the keyPressed() function and
+ * keyCode system variable to respond to modifier
+ * keys such as `ALT`.
+ *
+ * Browsers may have default behaviors attached to various key events. To
+ * prevent any default behavior for this event, add `return false;` to the end
+ * of the function.
+ *
+ * @method keyTyped
+ * @param {KeyboardEvent} [event] optional `KeyboardEvent` callback argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ * // Note: Pressing special keys such as SPACE have no effect.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a white square at its center. The inner square changes color when the user presses a key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle the square's color when the user types a printable key.
+ * function keyTyped() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onkeypress = function (e) {
+ if (e.which === this._lastKeyCodeTyped) {
+ // prevent multiple firings
+ return;
+ }
+ this._setProperty('_lastKeyCodeTyped', e.which); // track last keyCode
+ this._setProperty('key', e.key || String.fromCharCode(e.which) || e.which);
+ var context = this._isGlobal ? window : this;
+ if (typeof context.keyTyped === 'function') {
+ var executeDefault = context.keyTyped(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The onblur function is called when the user is no longer focused
+ * on the p5 element. Because the keyup events will not fire if the user is
+ * not focused on the element we must assume all keys currently down have
+ * been released.
+ */
+ _main.default.prototype._onblur = function (e) {
+ this._downKeys = {
+ };
+ };
+ /**
+ * Returns `true` if the key it’s checking is pressed and `false` if not.
+ *
+ * `keyIsDown()` is helpful when checking for multiple different key presses.
+ * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
+ * `UP_ARROW` are pressed:
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a white square at its center. The inner square turns black when the user types the "b" key. It turns white when the user types the "a" key.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Reassign value when the user types the 'a' or 'b' key.
+ * function keyTyped() {
+ * if (key === 'a') {
+ * value = 255;
+ * } else if (key === 'b') {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ * if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
+ * // Move diagonally.
+ * }
+ *
+ *
+ * `keyIsDown()` can check for key presses using
+ * keyCode values, as in `keyIsDown(37)` or
+ * `keyIsDown(LEFT_ARROW)`. Key codes can be found on websites such as
+ * keycode.info.
+ *
+ * @method keyIsDown
+ * @param {Number} code key to check.
+ * @return {Boolean} whether the key is down or not.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let x = 50;
+ * let y = 50;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe(
+ * 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Update x and y if an arrow key is pressed.
+ * if (keyIsDown(LEFT_ARROW) === true) {
+ * x -= 1;
+ * }
+ *
+ * if (keyIsDown(RIGHT_ARROW) === true) {
+ * x += 1;
+ * }
+ *
+ * if (keyIsDown(UP_ARROW) === true) {
+ * y -= 1;
+ * }
+ *
+ * if (keyIsDown(DOWN_ARROW) === true) {
+ * y += 1;
+ * }
+ *
+ * // Style the circle.
+ * fill(0);
+ *
+ * // Draw the circle.
+ * circle(x, y, 5);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.keyIsDown = function (code) {
+ _main.default._validateParameters('keyIsDown', arguments);
+ return this._downKeys[code] || false;
+ };
+ /**
+ * The _areDownKeys function returns a boolean true if any keys pressed
+ * and a false if no keys are currently pressed.
+
+ * Helps avoid instances where multiple keys are pressed simultaneously and
+ * releasing a single key will then switch the
+ * keyIsPressed property to true.
+ * @private
+**/
+ _main.default.prototype._areDownKeys = function () {
+ for (var key in this._downKeys) {
+ if (this._downKeys.hasOwnProperty(key) && this._downKeys[key] === true) {
+ return true;
+ }
+ }
+ return false;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303
+ }
+ ],
+ 322: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Events
+ * @submodule Mouse
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * A `Number` system variable that tracks the mouse's horizontal movement.
+ *
+ * `movedX` tracks how many pixels the mouse moves left or right between
+ * frames. `movedX` will have a negative value if the mouse moves left between
+ * frames and a positive value if it moves right. `movedX` can be calculated
+ * as `mouseX - pmouseX`.
+ *
+ * Note: `movedX` continues updating even when
+ * requestPointerLock() is active.
+ *
+ * @property {Number} movedX
+ * @readOnly
+ *
+ * @example
+ *
+ * // Click on the canvas to begin detecting key presses.
+ *
+ * let x = 50;
+ * let y = 50;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe(
+ * 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Update x and y if an arrow key is pressed.
+ * if (keyIsDown(37) === true) {
+ * x -= 1;
+ * }
+ *
+ * if (keyIsDown(39) === true) {
+ * x += 1;
+ * }
+ *
+ * if (keyIsDown(38) === true) {
+ * y -= 1;
+ * }
+ *
+ * if (keyIsDown(40) === true) {
+ * y += 1;
+ * }
+ *
+ * // Style the circle.
+ * fill(0);
+ *
+ * // Draw the circle.
+ * circle(x, y, 5);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.movedX = 0;
+ /**
+ * A `Number` system variable that tracks the mouse's vertical movement.
+ *
+ * `movedY` tracks how many pixels the mouse moves up or down between
+ * frames. `movedY` will have a negative value if the mouse moves up between
+ * frames and a positive value if it moves down. `movedY` can be calculated
+ * as `mouseY - pmouseY`.
+ *
+ * Note: `movedY` continues updating even when
+ * requestPointerLock() is active.
+ *
+ * @property {Number} movedY
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. The text ">>" appears when the user moves the mouse to the right. The text "<<" appears when the user moves the mouse to the left.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display >> when movedX is positive and
+ * // << when it's negative.
+ * if (movedX > 0) {
+ * text('>>', 50, 50);
+ * } else if (movedX < 0) {
+ * text('<<', 50, 50);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.movedY = 0;
+ /*
+ * This is a flag which is false until the first time
+ * we receive a mouse event. The pmouseX and pmouseY
+ * values will match the mouseX and mouseY values until
+ * this interaction takes place.
+ */
+ _main.default.prototype._hasMouseInteracted = false;
+ /**
+ * A `Number` system variable that tracks the mouse's horizontal position.
+ *
+ * In 2D mode, `mouseX` keeps track of the mouse's position relative to the
+ * top-left corner of the canvas. For example, if the mouse is 50 pixels from
+ * the left edge of the canvas, then `mouseX` will be 50.
+ *
+ * In WebGL mode, `mouseX` keeps track of the mouse's position relative to the
+ * center of the canvas. For example, if the mouse is 50 pixels to the right
+ * of the canvas' center, then `mouseX` will be 50.
+ *
+ * If touch is used instead of the mouse, then `mouseX` will hold the
+ * x-coordinate of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. The text "▲" appears when the user moves the mouse upward. The text "▼" appears when the user moves the mouse downward.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display ▼ when movedY is positive and
+ * // ▲ when it's negative.
+ * if (movedY > 0) {
+ * text('▼', 50, 50);
+ * } else if (movedY < 0) {
+ * text('▲', 50, 50);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A vertical black line moves left and right following the mouse's x-position.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a vertical line that follows the mouse's x-coordinate.
+ * line(mouseX, 0, mouseX, 100);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the mouse's coordinates.
+ * text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe("A vertical black line moves left and right following the mouse's x-position.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Adjust coordinates for WebGL mode.
+ * // The origin (0, 0) is at the center of the canvas.
+ * let mx = mouseX - 50;
+ *
+ * // Draw the line.
+ * line(mx, -50, mx, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mouseX = 0;
+ /**
+ * A `Number` system variable that tracks the mouse's vertical position.
+ *
+ * In 2D mode, `mouseY` keeps track of the mouse's position relative to the
+ * top-left corner of the canvas. For example, if the mouse is 50 pixels from
+ * the top edge of the canvas, then `mouseY` will be 50.
+ *
+ * In WebGL mode, `mouseY` keeps track of the mouse's position relative to the
+ * center of the canvas. For example, if the mouse is 50 pixels below the
+ * canvas' center, then `mouseY` will be 50.
+ *
+ * If touch is used instead of the mouse, then `mouseY` will hold the
+ * y-coordinate of the most recent touch point.
+ *
+ * @property {Number} mouseY
+ * @readOnly
+ *
+ * @example
+ *
+ * let font;
+ *
+ * // Load a font for WebGL mode.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the mouse's coordinates.
+ * text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A horizontal black line moves up and down following the mouse's y-position.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a horizontal line that follows the mouse's y-coordinate.
+ * line(0, mouseY, 0, mouseY);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the mouse's coordinates.
+ * text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe("A horizontal black line moves up and down following the mouse's y-position.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Adjust coordinates for WebGL mode.
+ * // The origin (0, 0) is at the center of the canvas.
+ * let my = mouseY - 50;
+ *
+ * // Draw the line.
+ * line(-50, my, 50, my);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mouseY = 0;
+ /**
+ * A `Number` system variable that tracks the mouse's previous horizontal
+ * position.
+ *
+ * In 2D mode, `pmouseX` keeps track of the mouse's position relative to the
+ * top-left corner of the canvas. Its value is
+ * mouseX from the previous frame. For example, if
+ * the mouse was 50 pixels from the left edge of the canvas during the last
+ * frame, then `pmouseX` will be 50.
+ *
+ * In WebGL mode, `pmouseX` keeps track of the mouse's position relative to the
+ * center of the canvas. For example, if the mouse was 50 pixels to the right
+ * of the canvas' center during the last frame, then `pmouseX` will be 50.
+ *
+ * If touch is used instead of the mouse, then `pmouseX` will hold the
+ * x-coordinate of the last touch point.
+ *
+ * Note: `pmouseX` is reset to the current mouseX
+ * value at the start of each touch event.
+ *
+ * @property {Number} pmouseX
+ * @readOnly
+ *
+ * @example
+ *
+ * let font;
+ *
+ * // Load a font for WebGL mode.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the mouse's coordinates.
+ * text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(10);
+ *
+ * describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * line(pmouseX, pmouseY, mouseX, mouseY);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pmouseX = 0;
+ /**
+ * A `Number` system variable that tracks the mouse's previous vertical
+ * position.
+ *
+ * In 2D mode, `pmouseY` keeps track of the mouse's position relative to the
+ * top-left corner of the canvas. Its value is
+ * mouseY from the previous frame. For example, if
+ * the mouse was 50 pixels from the top edge of the canvas during the last
+ * frame, then `pmouseY` will be 50.
+ *
+ * In WebGL mode, `pmouseY` keeps track of the mouse's position relative to the
+ * center of the canvas. For example, if the mouse was 50 pixels below the
+ * canvas' center during the last frame, then `pmouseY` will be 50.
+ *
+ * If touch is used instead of the mouse, then `pmouseY` will hold the
+ * y-coordinate of the last touch point.
+ *
+ * Note: `pmouseY` is reset to the current mouseY
+ * value at the start of each touch event.
+ *
+ * @property {Number} pmouseY
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Adjust coordinates for WebGL mode.
+ * // The origin (0, 0) is at the center of the canvas.
+ * let pmx = pmouseX - 50;
+ * let pmy = pmouseY - 50;
+ * let mx = mouseX - 50;
+ * let my = mouseY - 50;
+ *
+ * // Draw the line.
+ * line(pmx, pmy, mx, my);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(10);
+ *
+ * describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * line(pmouseX, pmouseY, mouseX, mouseY);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pmouseY = 0;
+ /**
+ * A `Number` variable that tracks the mouse's horizontal position within the
+ * browser.
+ *
+ * `winMouseX` keeps track of the mouse's position relative to the top-left
+ * corner of the browser window. For example, if the mouse is 50 pixels from
+ * the left edge of the browser, then `winMouseX` will be 50.
+ *
+ * On a touchscreen device, `winMouseX` will hold the x-coordinate of the most
+ * recent touch point.
+ *
+ * Note: Use mouseX to track the mouse’s
+ * x-coordinate within the canvas.
+ *
+ * @property {Number} winMouseX
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Adjust coordinates for WebGL mode.
+ * // The origin (0, 0) is at the center of the canvas.
+ * let pmx = pmouseX - 50;
+ * let pmy = pmouseY - 50;
+ * let mx = mouseX - 50;
+ * let my = mouseY - 50;
+ *
+ * // Draw the line.
+ * line(pmx, pmy, mx, my);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.winMouseX = 0;
+ /**
+ * A `Number` variable that tracks the mouse's vertical position within the
+ * browser.
+ *
+ * `winMouseY` keeps track of the mouse's position relative to the top-left
+ * corner of the browser window. For example, if the mouse is 50 pixels from
+ * the top edge of the browser, then `winMouseY` will be 50.
+ *
+ * On a touchscreen device, `winMouseY` will hold the y-coordinate of the most
+ * recent touch point.
+ *
+ * Note: Use mouseY to track the mouse’s
+ * y-coordinate within the canvas.
+ *
+ * @property {Number} winMouseY
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the mouse's coordinates within the browser window.
+ * text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.winMouseY = 0;
+ /**
+ * A `Number` variable that tracks the mouse's previous horizontal position
+ * within the browser.
+ *
+ * `pwinMouseX` keeps track of the mouse's position relative to the top-left
+ * corner of the browser window. Its value is
+ * winMouseX from the previous frame. For
+ * example, if the mouse was 50 pixels from
+ * the left edge of the browser during the last frame, then `pwinMouseX` will
+ * be 50.
+ *
+ * On a touchscreen device, `pwinMouseX` will hold the x-coordinate of the most
+ * recent touch point. `pwinMouseX` is reset to the current
+ * winMouseX value at the start of each touch
+ * event.
+ *
+ * Note: Use pmouseX to track the mouse’s previous
+ * x-coordinate within the canvas.
+ *
+ * @property {Number} pwinMouseX
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the mouse's coordinates within the browser window.
+ * text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(10);
+ *
+ * describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the circle's diameter.
+ * let d = winMouseX - pwinMouseX;
+ *
+ * // Draw the circle.
+ * circle(50, 50, d);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pwinMouseX = 0;
+ /**
+ * A `Number` variable that tracks the mouse's previous vertical position
+ * within the browser.
+ *
+ * `pwinMouseY` keeps track of the mouse's position relative to the top-left
+ * corner of the browser window. Its value is
+ * winMouseY from the previous frame. For
+ * example, if the mouse was 50 pixels from
+ * the top edge of the browser during the last frame, then `pwinMouseY` will
+ * be 50.
+ *
+ * On a touchscreen device, `pwinMouseY` will hold the y-coordinate of the most
+ * recent touch point. `pwinMouseY` is reset to the current
+ * winMouseY value at the start of each touch
+ * event.
+ *
+ * Note: Use pmouseY to track the mouse’s previous
+ * y-coordinate within the canvas.
+ *
+ * @property {Number} pwinMouseY
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create the canvas and set its position.
+ * let cnv = createCanvas(100, 100);
+ * cnv.position(20, 20);
+ *
+ * describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display pwinMouseX.
+ * text(pwinMouseX, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(10);
+ *
+ * describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the circle's diameter.
+ * let d = winMouseY - pwinMouseY;
+ *
+ * // Draw the circle.
+ * circle(50, 50, d);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pwinMouseY = 0;
+ /**
+ * A String system variable that contains the value of the last mouse button
+ * pressed.
+ *
+ * The `mouseButton` variable is either `LEFT`, `RIGHT`, or `CENTER`,
+ * depending on which button was pressed last.
+ *
+ * Note: Different browsers may track `mouseButton` differently. See
+ * MDN
+ * for more information.
+ *
+ * @property {Constant} mouseButton
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create the canvas and set its position.
+ * let cnv = createCanvas(100, 100);
+ * cnv.position(20, 20);
+ *
+ * describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display pwinMouseY.
+ * text(pwinMouseY, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with black text at its center. The text changes from 0 to either "left" or "right" when the user clicks a mouse button.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the mouse button.
+ * text(mouseButton, 50, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mouseButton = 0;
+ /**
+ * A `Boolean` system variable that's `true` if the mouse is pressed and
+ * `false` if not.
+ *
+ * @property {Boolean} mouseIsPressed
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * "A gray square. Different shapes appear at its center depending on the mouse button that's clicked."
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * if (mouseIsPressed === true) {
+ * if (mouseButton === LEFT) {
+ * circle(50, 50, 50);
+ * }
+ * if (mouseButton === RIGHT) {
+ * square(25, 25, 50);
+ * }
+ * if (mouseButton === CENTER) {
+ * triangle(23, 75, 50, 20, 78, 75);
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the word "false" at its center. The word changes to "true" when the user presses a mouse button.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the mouseIsPressed variable.
+ * text(mouseIsPressed, 25, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mouseIsPressed = false;
+ _main.default.prototype._updateNextMouseCoords = function (e) {
+ if (this._curElement !== null && (!e.touches || e.touches.length > 0)) {
+ var mousePos = getMousePos(this._curElement.elt, this.width, this.height, e);
+ this._setProperty('movedX', e.movementX);
+ this._setProperty('movedY', e.movementY);
+ this._setProperty('mouseX', mousePos.x);
+ this._setProperty('mouseY', mousePos.y);
+ this._setProperty('winMouseX', mousePos.winX);
+ this._setProperty('winMouseY', mousePos.winY);
+ }
+ if (!this._hasMouseInteracted) {
+ // For first draw, make previous and next equal
+ this._updateMouseCoords();
+ this._setProperty('_hasMouseInteracted', true);
+ }
+ };
+ _main.default.prototype._updateMouseCoords = function () {
+ this._setProperty('pmouseX', this.mouseX);
+ this._setProperty('pmouseY', this.mouseY);
+ this._setProperty('pwinMouseX', this.winMouseX);
+ this._setProperty('pwinMouseY', this.winMouseY);
+ this._setProperty('_pmouseWheelDeltaY', this._mouseWheelDeltaY);
+ };
+ function getMousePos(canvas, w, h, evt) {
+ if (evt && !evt.clientX) {
+ // use touches if touch and not mouse
+ if (evt.touches) {
+ evt = evt.touches[0];
+ } else if (evt.changedTouches) {
+ evt = evt.changedTouches[0];
+ }
+ }
+ var rect = canvas.getBoundingClientRect();
+ var sx = canvas.scrollWidth / w || 1;
+ var sy = canvas.scrollHeight / h || 1;
+ return {
+ x: (evt.clientX - rect.left) / sx,
+ y: (evt.clientY - rect.top) / sy,
+ winX: evt.clientX,
+ winY: evt.clientY,
+ id: evt.identifier
+ };
+ }
+ _main.default.prototype._setMouseButton = function (e) {
+ if (e.button === 1) {
+ this._setProperty('mouseButton', constants.CENTER);
+ } else if (e.button === 2) {
+ this._setProperty('mouseButton', constants.RIGHT);
+ } else {
+ this._setProperty('mouseButton', constants.LEFT);
+ }
+ };
+ /**
+ * A function that's called when the mouse moves.
+ *
+ * Declaring the function `mouseMoved()` sets a code block to run
+ * automatically when the user moves the mouse without clicking any mouse
+ * buttons:
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * if (mouseIsPressed === true) {
+ * fill(0);
+ * } else {
+ * fill(255);
+ * }
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ *
+ * function mouseMoved() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The mouse system variables, such as mouseX and
+ * mouseY, will be updated with their most recent
+ * value when `mouseMoved()` is called by p5.js:
+ *
+ *
+ * function mouseMoved() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ *
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `mouseMoved()` is always passed a
+ * MouseEvent
+ * object with properties that describe the mouse move event:
+ *
+ *
+ * function mouseMoved(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ *
+ * @method mouseMoved
+ * @param {MouseEvent} [event] optional `MouseEvent` argument.
+ *
+ * @example
+ *
+ *
+ */
+ /**
+ * A function that's called when the mouse moves while a button is pressed.
+ *
+ * Declaring the function `mouseDragged()` sets a code block to run
+ * automatically when the user clicks and drags the mouse:
+ *
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * function mouseMoved() {
+ * // Update the grayscale value.
+ * value += 5;
+ *
+ * // Reset the grayscale value.
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ * function mouseDragged() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The mouse system variables, such as mouseX and
+ * mouseY, will be updated with their most recent
+ * value when `mouseDragged()` is called by p5.js:
+ *
+ *
+ * function mouseDragged() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ *
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `mouseDragged()` is always passed a
+ * MouseEvent
+ * object with properties that describe the mouse drag event:
+ *
+ *
+ * function mouseDragged(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices, `mouseDragged()` will run when a user moves a touch
+ * point if touchMoved() isn’t declared. If
+ * touchMoved() is declared, then
+ * touchMoved() will run when a user moves a
+ * touch point and `mouseDragged()` won’t.
+ *
+ * Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ *
+ * @method mouseDragged
+ * @param {MouseEvent} [event] optional `MouseEvent` argument.
+ *
+ * @example
+ *
+ *
+ */
+ _main.default.prototype._onmousemove = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._updateNextMouseCoords(e);
+ if (!this.mouseIsPressed) {
+ if (typeof context.mouseMoved === 'function') {
+ executeDefault = context.mouseMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ } else {
+ if (typeof context.mouseDragged === 'function') {
+ executeDefault = context.mouseDragged(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.touchMoved === 'function') {
+ executeDefault = context.touchMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ }
+ };
+ /**
+ * A function that's called once when a mouse button is pressed.
+ *
+ * Declaring the function `mousePressed()` sets a code block to run
+ * automatically when the user presses a mouse button:
+ *
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * function mouseDragged() {
+ * // Update the grayscale value.
+ * value += 5;
+ *
+ * // Reset the grayscale value.
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ * function mousePressed() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The mouse system variables, such as mouseX and
+ * mouseY, will be updated with their most recent
+ * value when `mousePressed()` is called by p5.js:
+ *
+ *
+ * function mousePressed() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ *
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `mousePressed()` is always passed a
+ * MouseEvent
+ * object with properties that describe the mouse press event:
+ *
+ *
+ * function mousePressed(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices, `mousePressed()` will run when a user’s touch
+ * begins if touchStarted() isn’t declared. If
+ * touchStarted() is declared, then
+ * touchStarted() will run when a user’s touch
+ * begins and `mousePressed()` won’t.
+ *
+ * Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ *
+ * Note: `mousePressed()`, mouseReleased(),
+ * and mouseClicked() are all related.
+ * `mousePressed()` runs as soon as the user clicks the mouse.
+ * mouseReleased() runs as soon as the user
+ * releases the mouse click. mouseClicked()
+ * runs immediately after mouseReleased().
+ *
+ * @method mousePressed
+ * @param {MouseEvent} [event] optional `MouseEvent` argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * function mousePressed() {
+ * // Update the grayscale value.
+ * value += 5;
+ *
+ * // Reset the grayscale value.
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onmousedown = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', true);
+ this._setMouseButton(e);
+ this._updateNextMouseCoords(e);
+ // _ontouchstart triggers first and sets this.touchstart
+ if (this.touchstart) {
+ return;
+ }
+ if (typeof context.mousePressed === 'function') {
+ executeDefault = context.mousePressed(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.touchStarted === 'function') {
+ executeDefault = context.touchStarted(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ this.touchstart = false;
+ };
+ /**
+ * A function that's called once when a mouse button is released.
+ *
+ * Declaring the function `mouseReleased()` sets a code block to run
+ * automatically when the user releases a mouse button after having pressed
+ * it:
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Style the circle.
+ * fill('orange');
+ * stroke('royalblue');
+ * strokeWeight(10);
+ *
+ * describe(
+ * 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(220);
+ *
+ * // Draw the circle.
+ * circle(50, 50, 20);
+ * }
+ *
+ * // Set the stroke color and weight as soon as the user clicks.
+ * function mousePressed() {
+ * stroke('deeppink');
+ * strokeWeight(3);
+ * }
+ *
+ * // Set the stroke and fill colors as soon as the user releases
+ * // the mouse.
+ * function mouseReleased() {
+ * stroke('royalblue');
+ *
+ * // This is never visible because fill() is called
+ * // in mouseClicked() which runs immediately after
+ * // mouseReleased();
+ * fill('limegreen');
+ * }
+ *
+ * // Set the fill color and stroke weight after
+ * // mousePressed() and mouseReleased() are called.
+ * function mouseClicked() {
+ * fill('orange');
+ * strokeWeight(10);
+ * }
+ *
+ *
+ * function mouseReleased() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The mouse system variables, such as mouseX and
+ * mouseY, will be updated with their most recent
+ * value when `mouseReleased()` is called by p5.js:
+ *
+ *
+ * function mouseReleased() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ *
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `mouseReleased()` is always passed a
+ * MouseEvent
+ * object with properties that describe the mouse release event:
+ *
+ *
+ * function mouseReleased(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices, `mouseReleased()` will run when a user’s touch
+ * ends if touchEnded() isn’t declared. If
+ * touchEnded() is declared, then
+ * touchEnded() will run when a user’s touch
+ * ends and `mouseReleased()` won’t.
+ *
+ * Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ *
+ * Note: mousePressed(), `mouseReleased()`,
+ * and mouseClicked() are all related.
+ * mousePressed() runs as soon as the user
+ * clicks the mouse. `mouseReleased()` runs as soon as the user releases the
+ * mouse click. mouseClicked() runs
+ * immediately after `mouseReleased()`.
+ *
+ * @method mouseReleased
+ * @param {MouseEvent} [event] optional `MouseEvent` argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * function mouseReleased() {
+ * // Update the grayscale value.
+ * value += 5;
+ *
+ * // Reset the grayscale value.
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onmouseup = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', false);
+ // _ontouchend triggers first and sets this.touchend
+ if (this.touchend) {
+ return;
+ }
+ if (typeof context.mouseReleased === 'function') {
+ executeDefault = context.mouseReleased(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.touchEnded === 'function') {
+ executeDefault = context.touchEnded(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ this.touchend = false;
+ };
+ _main.default.prototype._ondragend = _main.default.prototype._onmouseup;
+ _main.default.prototype._ondragover = _main.default.prototype._onmousemove;
+ /**
+ * A function that's called once after a mouse button is pressed and released.
+ *
+ * Declaring the function `mouseClicked()` sets a code block to run
+ * automatically when the user releases a mouse button after having pressed
+ * it:
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Style the circle.
+ * fill('orange');
+ * stroke('royalblue');
+ * strokeWeight(10);
+ *
+ * describe(
+ * 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(220);
+ *
+ * // Draw the circle.
+ * circle(50, 50, 20);
+ * }
+ *
+ * // Set the stroke color and weight as soon as the user clicks.
+ * function mousePressed() {
+ * stroke('deeppink');
+ * strokeWeight(3);
+ * }
+ *
+ * // Set the stroke and fill colors as soon as the user releases
+ * // the mouse.
+ * function mouseReleased() {
+ * stroke('royalblue');
+ *
+ * // This is never visible because fill() is called
+ * // in mouseClicked() which runs immediately after
+ * // mouseReleased();
+ * fill('limegreen');
+ * }
+ *
+ * // Set the fill color and stroke weight after
+ * // mousePressed() and mouseReleased() are called.
+ * function mouseClicked() {
+ * fill('orange');
+ * strokeWeight(10);
+ * }
+ *
+ *
+ * function mouseClicked() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The mouse system variables, such as mouseX and
+ * mouseY, will be updated with their most recent
+ * value when `mouseClicked()` is called by p5.js:
+ *
+ *
+ * function mouseClicked() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ *
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `mouseClicked()` is always passed a
+ * MouseEvent
+ * object with properties that describe the mouse click event:
+ *
+ *
+ * function mouseClicked(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices, `mouseClicked()` will run when a user’s touch
+ * ends if touchEnded() isn’t declared. If
+ * touchEnded() is declared, then
+ * touchEnded() will run when a user’s touch
+ * ends and `mouseClicked()` won’t.
+ *
+ * Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ *
+ * Note: mousePressed(),
+ * mouseReleased(),
+ * and `mouseClicked()` are all related.
+ * mousePressed() runs as soon as the user
+ * clicks the mouse. mouseReleased() runs as
+ * soon as the user releases the mouse click. `mouseClicked()` runs
+ * immediately after mouseReleased().
+ *
+ * @method mouseClicked
+ * @param {MouseEvent} [event] optional `MouseEvent` argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle the square's color when the user clicks.
+ * function mouseClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onclick = function (e) {
+ var context = this._isGlobal ? window : this;
+ if (typeof context.mouseClicked === 'function') {
+ var executeDefault = context.mouseClicked(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * A function that's called once when a mouse button is clicked twice quickly.
+ *
+ * Declaring the function `doubleClicked()` sets a code block to run
+ * automatically when the user presses and releases the mouse button twice
+ * quickly:
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Style the circle.
+ * fill('orange');
+ * stroke('royalblue');
+ * strokeWeight(10);
+ *
+ * describe(
+ * 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(220);
+ *
+ * // Draw the circle.
+ * circle(50, 50, 20);
+ * }
+ *
+ * // Set the stroke color and weight as soon as the user clicks.
+ * function mousePressed() {
+ * stroke('deeppink');
+ * strokeWeight(3);
+ * }
+ *
+ * // Set the stroke and fill colors as soon as the user releases
+ * // the mouse.
+ * function mouseReleased() {
+ * stroke('royalblue');
+ *
+ * // This is never visible because fill() is called
+ * // in mouseClicked() which runs immediately after
+ * // mouseReleased();
+ * fill('limegreen');
+ * }
+ *
+ * // Set the fill color and stroke weight after
+ * // mousePressed() and mouseReleased() are called.
+ * function mouseClicked() {
+ * fill('orange');
+ * strokeWeight(10);
+ * }
+ *
+ *
+ * function doubleClicked() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The mouse system variables, such as mouseX and
+ * mouseY, will be updated with their most recent
+ * value when `doubleClicked()` is called by p5.js:
+ *
+ *
+ * function doubleClicked() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ *
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `doubleClicked()` is always passed a
+ * MouseEvent
+ * object with properties that describe the double-click event:
+ *
+ *
+ * function doubleClicked(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices, code placed in `doubleClicked()` will run after two
+ * touches that occur within a short time.
+ *
+ * Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ *
+ * @method doubleClicked
+ * @param {MouseEvent} [event] optional `MouseEvent` argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle the square's color when the user double-clicks.
+ * function doubleClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._ondblclick = function (e) {
+ var context = this._isGlobal ? window : this;
+ if (typeof context.doubleClicked === 'function') {
+ var executeDefault = context.doubleClicked(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * For use with WebGL orbitControl.
+ * @property {Number} _mouseWheelDeltaY
+ * @readOnly
+ * @private
+ */
+ _main.default.prototype._mouseWheelDeltaY = 0;
+ /**
+ * For use with WebGL orbitControl.
+ * @property {Number} _pmouseWheelDeltaY
+ * @readOnly
+ * @private
+ */
+ _main.default.prototype._pmouseWheelDeltaY = 0;
+ /**
+ * A function that's called once when the mouse wheel moves.
+ *
+ * Declaring the function `mouseWheel()` sets a code block to run
+ * automatically when the user scrolls with the mouse wheel:
+ *
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the circle.
+ * fill(value);
+ *
+ * // Draw the circle.
+ * circle(50, 50, 80);
+ * }
+ *
+ * // Reassign value to 255 when the user double-clicks on the circle.
+ * function doubleClicked() {
+ * if (dist(50, 50, mouseX, mouseY) < 40) {
+ * value = 255;
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ * function mouseWheel() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The mouse system variables, such as mouseX and
+ * mouseY, will be updated with their most recent
+ * value when `mouseWheel()` is called by p5.js:
+ *
+ *
+ * function mouseWheel() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ *
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }
+ *
+ *
+ * The parameter, `event`, is optional. `mouseWheel()` is always passed a
+ * MouseEvent
+ * object with properties that describe the mouse scroll event:
+ *
+ *
+ * function mouseWheel(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * The `event` object has many properties including `delta`, a `Number`
+ * containing the distance that the user scrolled. For example, `event.delta`
+ * might have the value 5 when the user scrolls up. `event.delta` is positive
+ * if the user scrolls up and negative if they scroll down. The signs are
+ * opposite on macOS with "natural" scrolling enabled.
+ *
+ * Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ *
+ * Note: On Safari, `mouseWheel()` may only work as expected if
+ * `return false;` is added at the end of the function.
+ *
+ * @method mouseWheel
+ * @param {WheelEvent} [event] optional `WheelEvent` argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let circleSize = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the circle
+ * circle(circleSize, 50, 50);
+ * }
+ *
+ * // Increment circleSize when the user scrolls the mouse wheel.
+ * function mouseWheel() {
+ * circleSize += 1;
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onwheel = function (e) {
+ var context = this._isGlobal ? window : this;
+ this._setProperty('_mouseWheelDeltaY', e.deltaY);
+ if (typeof context.mouseWheel === 'function') {
+ e.delta = e.deltaY;
+ var executeDefault = context.mouseWheel(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * Locks the mouse pointer to its current position and makes it invisible.
+ *
+ * `requestPointerLock()` allows the mouse to move forever without leaving the
+ * screen. Calling `requestPointerLock()` locks the values of
+ * mouseX, mouseY,
+ * pmouseX, and pmouseY.
+ * movedX and movedY
+ * continue updating and can be used to get the distance the mouse moved since
+ * the last frame was drawn. Calling
+ * exitPointerLock() resumes updating the
+ * mouse system variables.
+ *
+ * Note: Most browsers require an input, such as a click, before calling
+ * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
+ * an event function such as doubleClicked().
+ *
+ * @method requestPointerLock
+ *
+ * @example
+ *
+ * let direction = '';
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Draw an arrow that points where
+ * // the mouse last scrolled.
+ * text(direction, 50, 50);
+ * }
+ *
+ * // Change direction when the user scrolls the mouse wheel.
+ * function mouseWheel(event) {
+ * if (event.delta > 0) {
+ * direction = '▲';
+ * } else {
+ * direction = '▼';
+ * }
+ * // Uncomment to prevent any default behavior.
+ * // return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.requestPointerLock = function () {
+ // pointer lock object forking for cross browser
+ var canvas = this._curElement.elt;
+ canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
+ if (!canvas.requestPointerLock) {
+ console.log('requestPointerLock is not implemented in this browser');
+ return false;
+ }
+ canvas.requestPointerLock();
+ return true;
+ };
+ /**
+ * Exits a pointer lock started with
+ * requestPointerLock.
+ *
+ * Calling `requestPointerLock()` locks the values of
+ * mouseX, mouseY,
+ * pmouseX, and pmouseY.
+ * Calling `exitPointerLock()` resumes updating the mouse system variables.
+ *
+ * Note: Most browsers require an input, such as a click, before calling
+ * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
+ * an event function such as doubleClicked().
+ *
+ * @method exitPointerLock
+ *
+ * @example
+ *
+ * let score = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the text "Score: X" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Update the score.
+ * score -= movedY;
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the score.
+ * text(`Score: ${score}`, 50, 50);
+ * }
+ *
+ * // Lock the pointer when the user double-clicks.
+ * function doubleClicked() {
+ * requestPointerLock();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.exitPointerLock = function () {
+ document.exitPointerLock();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 323: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Events
+ * @submodule Touch
+ * @for p5
+ * @requires core
+ */
+ /**
+ * An `Array` of all the current touch points on a touchscreen device.
+ *
+ * The `touches` array is empty by default. When the user touches their
+ * screen, a new touch point is tracked and added to the array. Touch points
+ * are `Objects` with the following properties:
+ *
+ *
+ * let isLocked = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a word at its center. The word changes between "Unlocked" and "Locked" when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Tell the user whether the pointer is locked.
+ * if (isLocked === true) {
+ * text('Locked', 50, 50);
+ * } else {
+ * text('Unlocked', 50, 50);
+ * }
+ * }
+ *
+ * // Toggle the pointer lock when the user double-clicks.
+ * function doubleClicked() {
+ * if (isLocked === true) {
+ * exitPointerLock();
+ * isLocked = false;
+ * } else {
+ * requestPointerLock();
+ * isLocked = true;
+ * }
+ * }
+ *
+ *
+ * // Iterate over the touches array.
+ * for (let touch of touches) {
+ * // x-coordinate relative to the top-left
+ * // corner of the canvas.
+ * console.log(touch.x);
+ *
+ * // y-coordinate relative to the top-left
+ * // corner of the canvas.
+ * console.log(touch.y);
+ *
+ * // x-coordinate relative to the top-left
+ * // corner of the browser.
+ * console.log(touch.winX);
+ *
+ * // y-coordinate relative to the top-left
+ * // corner of the browser.
+ * console.log(touch.winY);
+ *
+ * // ID number
+ * console.log(touch.id);
+ * }
+ *
+ *
+ * @property {Object[]} touches
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. White circles appear where the user touches the square.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a circle at each touch point.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.touches = [
+ ];
+ _main.default.prototype._updateTouchCoords = function (e) {
+ if (this._curElement !== null) {
+ var touches = [
+ ];
+ for (var i = 0; i < e.touches.length; i++) {
+ touches[i] = getTouchInfo(this._curElement.elt, this.width, this.height, e, i);
+ }
+ this._setProperty('touches', touches);
+ }
+ };
+ function getTouchInfo(canvas, w, h, e) {
+ var i = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+ var rect = canvas.getBoundingClientRect();
+ var sx = canvas.scrollWidth / w || 1;
+ var sy = canvas.scrollHeight / h || 1;
+ var touch = e.touches[i] || e.changedTouches[i];
+ return {
+ x: (touch.clientX - rect.left) / sx,
+ y: (touch.clientY - rect.top) / sy,
+ winX: touch.clientX,
+ winY: touch.clientY,
+ id: touch.identifier
+ };
+ } /**
+ * A function that's called once each time the user touches the screen.
+ *
+ * Declaring a function called `touchStarted()` sets a code block to run
+ * automatically each time the user begins touching a touchscreen device:
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. Labels appear where the user touches the square, displaying the coordinates.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a label above each touch point.
+ * for (let touch of touches) {
+ * text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);
+ * }
+ * }
+ *
+ *
+ * function touchStarted() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The touches array will be updated with the most
+ * recent touch points when `touchStarted()` is called by p5.js:
+ *
+ *
+ * function touchStarted() {
+ * // Paint over the background.
+ * background(200);
+ *
+ * // Mark each touch point once with a circle.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ *
+ * The parameter, event, is optional. `touchStarted()` will be passed a
+ * TouchEvent
+ * object with properties that describe the touch event:
+ *
+ *
+ * function touchStarted(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices, mousePressed() will
+ * run when a user’s touch starts if `touchStarted()` isn’t declared. If
+ * `touchStarted()` is declared, then `touchStarted()` will run when a user’s
+ * touch starts and mousePressed() won’t.
+ *
+ * Note: `touchStarted()`, touchEnded(), and
+ * touchMoved() are all related.
+ * `touchStarted()` runs as soon as the user touches a touchscreen device.
+ * touchEnded() runs as soon as the user ends a
+ * touch. touchMoved() runs repeatedly as the
+ * user moves any touch points.
+ *
+ * @method touchStarted
+ * @param {TouchEvent} [event] optional `TouchEvent` argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle colors with each touch.
+ * function touchStarted() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype._ontouchstart = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', true);
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ this._updateMouseCoords(); // reset pmouseXY at the start of each touch event
+ if (typeof context.touchStarted === 'function') {
+ executeDefault = context.touchStarted(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ this.touchstart = true;
+ }
+ };
+ /**
+ * A function that's called when the user touches the screen and moves.
+ *
+ * Declaring the function `touchMoved()` sets a code block to run
+ * automatically when the user touches a touchscreen device and moves:
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let bgColor = 50;
+ * let fillColor = 255;
+ * let borderWidth = 0.5;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(bgColor);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * fill(0);
+ * noStroke();
+ *
+ * // Display the number of touch points.
+ * text(touches.length, 50, 20);
+ *
+ * // Style the touch points.
+ * fill(fillColor);
+ * stroke(0);
+ * strokeWeight(borderWidth);
+ *
+ * // Display the touch points as circles.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ * // Set the background color to a random grayscale value.
+ * function touchStarted() {
+ * bgColor = random(80, 255);
+ * }
+ *
+ * // Set the fill color to a random grayscale value.
+ * function touchEnded() {
+ * fillColor = random(0, 255);
+ * }
+ *
+ * // Set the stroke weight.
+ * function touchMoved() {
+ * // Increment the border width.
+ * borderWidth += 0.1;
+ *
+ * // Reset the border width once it's too thick.
+ * if (borderWidth > 20) {
+ * borderWidth = 0.5;
+ * }
+ * }
+ *
+ *
+ * function touchMoved() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The touches array will be updated with the most
+ * recent touch points when `touchMoved()` is called by p5.js:
+ *
+ *
+ * function touchMoved() {
+ * // Paint over the background.
+ * background(200);
+ *
+ * // Mark each touch point while the user moves.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ *
+ * The parameter, event, is optional. `touchMoved()` will be passed a
+ * TouchEvent
+ * object with properties that describe the touch event:
+ *
+ *
+ * function touchMoved(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices, mouseDragged() will
+ * run when the user’s touch points move if `touchMoved()` isn’t declared. If
+ * `touchMoved()` is declared, then `touchMoved()` will run when a user’s
+ * touch points move and mouseDragged() won’t.
+ *
+ * Note: touchStarted(),
+ * touchEnded(), and
+ * `touchMoved()` are all related.
+ * touchStarted() runs as soon as the user
+ * touches a touchscreen device. touchEnded()
+ * runs as soon as the user ends a touch. `touchMoved()` runs repeatedly as
+ * the user moves any touch points.
+ *
+ * @method touchMoved
+ * @param {TouchEvent} [event] optional TouchEvent argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * function touchMoved() {
+ * // Update the grayscale value.
+ * value += 5;
+ *
+ * // Reset the grayscale value.
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._ontouchmove = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ if (typeof context.touchMoved === 'function') {
+ executeDefault = context.touchMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.mouseDragged === 'function') {
+ executeDefault = context.mouseDragged(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * A function that's called once each time a screen touch ends.
+ *
+ * Declaring the function `touchEnded()` sets a code block to run
+ * automatically when the user stops touching a touchscreen device:
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let bgColor = 50;
+ * let fillColor = 255;
+ * let borderWidth = 0.5;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(bgColor);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * fill(0);
+ * noStroke();
+ *
+ * // Display the number of touch points.
+ * text(touches.length, 50, 20);
+ *
+ * // Style the touch points.
+ * fill(fillColor);
+ * stroke(0);
+ * strokeWeight(borderWidth);
+ *
+ * // Display the touch points as circles.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ * // Set the background color to a random grayscale value.
+ * function touchStarted() {
+ * bgColor = random(80, 255);
+ * }
+ *
+ * // Set the fill color to a random grayscale value.
+ * function touchEnded() {
+ * fillColor = random(0, 255);
+ * }
+ *
+ * // Set the stroke weight.
+ * function touchMoved() {
+ * // Increment the border width.
+ * borderWidth += 0.1;
+ *
+ * // Reset the border width once it's too thick.
+ * if (borderWidth > 20) {
+ * borderWidth = 0.5;
+ * }
+ * }
+ *
+ *
+ * function touchEnded() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The touches array will be updated with the most
+ * recent touch points when `touchEnded()` is called by p5.js:
+ *
+ *
+ * function touchEnded() {
+ * // Paint over the background.
+ * background(200);
+ *
+ * // Mark each remaining touch point when the user stops
+ * // a touch.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ *
+ * The parameter, event, is optional. `touchEnded()` will be passed a
+ * TouchEvent
+ * object with properties that describe the touch event:
+ *
+ *
+ * function touchEnded(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices, mouseReleased() will
+ * run when the user’s touch ends if `touchEnded()` isn’t declared. If
+ * `touchEnded()` is declared, then `touchEnded()` will run when a user’s
+ * touch ends and mouseReleased() won’t.
+ *
+ * Note: touchStarted(),
+ * `touchEnded()`, and touchMoved() are all
+ * related. touchStarted() runs as soon as the
+ * user touches a touchscreen device. `touchEnded()` runs as soon as the user
+ * ends a touch. touchMoved() runs repeatedly as
+ * the user moves any touch points.
+ *
+ * @method touchEnded
+ * @param {TouchEvent} [event] optional `TouchEvent` argument.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the square.
+ * fill(value);
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ * }
+ *
+ * // Toggle colors when a touch ends.
+ * function touchEnded() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._ontouchend = function (e) {
+ this._setProperty('mouseIsPressed', false);
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ if (typeof context.touchEnded === 'function') {
+ executeDefault = context.touchEnded(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ this.touchend = true;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303
+ }
+ ],
+ 324: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.int32-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.int32-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ /**
+ * This module defines the filters for use with image buffers.
+ *
+ * This module is basically a collection of functions stored in an object
+ * as opposed to modules. The functions are destructive, modifying
+ * the passed in canvas rather than creating a copy.
+ *
+ * Generally speaking users of this module will use the Filters.apply method
+ * on a canvas to create an effect.
+ *
+ * A number of functions are borrowed/adapted from
+ * http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ * or the java processing implementation.
+ */
+ var Filters = {
+ /*
+ * Helper functions
+ */
+ /**
+ * Returns the pixel buffer for a canvas.
+ *
+ * @private
+ *
+ * @param {Canvas|ImageData} canvas the canvas to get pixels from
+ * @return {Uint8ClampedArray} a one-dimensional array containing
+ * the data in the RGBA order, with integer
+ * values between 0 and 255.
+ */
+ _toPixels: function _toPixels(canvas) {
+ // Return pixel data if 'canvas' is an ImageData object.
+ if (canvas instanceof ImageData) {
+ return canvas.data;
+ } else {
+ // Check 2D context support.
+ if (canvas.getContext('2d')) {
+ // Retrieve pixel data.
+ return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data;
+ } else if (canvas.getContext('webgl')) {
+ //Check WebGL context support
+ var gl = canvas.getContext('webgl');
+ // Calculate the size of pixel data
+ // (4 bytes per pixel - one byte for each RGBA channel).
+ var len = gl.drawingBufferWidth * gl.drawingBufferHeight * 4;
+ var data = new Uint8Array(len);
+ // Use gl.readPixels to fetch pixel data from the WebGL
+ // canvas, storing it in the data array as UNSIGNED_BYTE integers.
+ gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
+ return data;
+ }
+ }
+ },
+ /**
+ * Returns a 32-bit number containing ARGB data at the ith pixel in the
+ * 1D array containing pixels data.
+ *
+ * @private
+ *
+ * @param {Uint8ClampedArray} data array returned by _toPixels()
+ * @param {Integer} i index of a 1D Image Array
+ * @return {Integer} 32-bit integer value representing
+ * ARGB value.
+ */
+ _getARGB: function _getARGB(data, i) {
+ // Determine the starting position in the 'data' array for the 'i'-th pixel.
+ var offset = i * 4;
+ return ( // Combining the extracted components using bitwise OR operations to form the final ARGB value.
+ data[offset + 3] << 24 & 4278190080 | //Extract alpha component
+ data[offset] << 16 & 16711680 | //Extract Red component
+ data[offset + 1] << 8 & 65280 | //Extract green component
+ data[offset + 2] & 255 //Extract blue component
+ );
+ },
+ /**
+ * Modifies pixels RGBA values to values contained in the data object.
+ *
+ * @private
+ *
+ * @param {Uint8ClampedArray} pixels array returned by _toPixels()
+ * @param {Int32Array} data source 1D array where each value
+ * represents ARGB values
+ */
+ _setPixels: function _setPixels(pixels, data) {
+ var offset = 0;
+ for (var i = 0, al = pixels.length; i < al; i++) {
+ offset = i * 4;
+ pixels[offset + 0] = (data[i] & 16711680) >>> 16;
+ pixels[offset + 1] = (data[i] & 65280) >>> 8;
+ pixels[offset + 2] = data[i] & 255;
+ pixels[offset + 3] = (data[i] & 4278190080) >>> 24;
+ }
+ },
+ /**
+ * Returns the ImageData object for a canvas.
+ * https://developer.mozilla.org/en-US/docs/Web/API/ImageData
+ *
+ * @private
+ *
+ * @param {Canvas|ImageData} canvas canvas to get image data from
+ * @return {ImageData} Holder of pixel data (and width and
+ * height) for a canvas
+ */
+ _toImageData: function _toImageData(canvas) {
+ if (canvas instanceof ImageData) {
+ return canvas;
+ } else {
+ return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
+ }
+ },
+ /**
+ * Returns a blank ImageData object.
+ *
+ * @private
+ *
+ * @param {Integer} width
+ * @param {Integer} height
+ * @return {ImageData}
+ */
+ _createImageData: function _createImageData(width, height) {
+ Filters._tmpCanvas = document.createElement('canvas');
+ Filters._tmpCtx = Filters._tmpCanvas.getContext('2d');
+ return this._tmpCtx.createImageData(width, height);
+ },
+ /**
+ * Applys a filter function to a canvas.
+ *
+ * The difference between this and the actual filter functions defined below
+ * is that the filter functions generally modify the pixel buffer but do
+ * not actually put that data back to the canvas (where it would actually
+ * update what is visible). By contrast this method does make the changes
+ * actually visible in the canvas.
+ *
+ * The apply method is the method that callers of this module would generally
+ * use. It has been separated from the actual filters to support an advanced
+ * use case of creating a filter chain that executes without actually updating
+ * the canvas in between everystep.
+ *
+ * @private
+ * @param {HTMLCanvasElement} canvas The input canvas to apply the filter on.
+ * @param {function(ImageData,Object)} func The filter function to apply to the canvas's pixel data.
+ * @param {Object} filterParam An optional parameter to pass to the filter function.
+ */
+ apply: function apply(canvas, func, filterParam) {
+ var pixelsState = canvas.getContext('2d');
+ var imageData = pixelsState.getImageData(0, 0, canvas.width, canvas.height);
+ //Filters can either return a new ImageData object, or just modify
+ //the one they received.
+ var newImageData = func(imageData, filterParam);
+ //If new ImageData is returned, replace the canvas's pixel data with it.
+ if (newImageData instanceof ImageData) {
+ pixelsState.putImageData(newImageData, 0, 0, 0, 0, canvas.width, canvas.height);
+ } else {
+ //Restore the original pixel.
+ pixelsState.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
+ }
+ },
+ /*
+ * Filters
+ */
+ /**
+ * Converts the image to black and white pixels depending if they are above or
+ * below the threshold defined by the level parameter. The parameter must be
+ * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
+ *
+ * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ *
+ * @private
+ * @param {Canvas} canvas Canvas to apply thershold filter on.
+ * @param {Float} level Threshold level (0-1).
+ */
+ threshold: function threshold(canvas) {
+ var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
+ var pixels = Filters._toPixels(canvas);
+ // Calculate threshold value on a (0-255) scale.
+ var thresh = Math.floor(level * 255);
+ for (var i = 0; i < pixels.length; i += 4) {
+ var r = pixels[i];
+ var g = pixels[i + 1];
+ var b = pixels[i + 2];
+ // CIE luminance for RGB
+ var gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ var val = void 0;
+ if (gray >= thresh) {
+ val = 255;
+ } else {
+ val = 0;
+ }
+ pixels[i] = pixels[i + 1] = pixels[i + 2] = val; //set pixel to val.
+ }
+ },
+ /**
+ * Converts any colors in the image to grayscale equivalents.
+ * No parameter is used.
+ *
+ * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ *
+ * @private
+ * @param {Canvas} canvas Canvas to apply gray filter on.
+ */
+ gray: function gray(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ for (var i = 0; i < pixels.length; i += 4) {
+ var r = pixels[i];
+ var g = pixels[i + 1];
+ var b = pixels[i + 2];
+ // CIE luminance for RGB
+ var gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ pixels[i] = pixels[i + 1] = pixels[i + 2] = gray; // set pixel to gray.
+ }
+ },
+ /**
+ * Sets the alpha channel to entirely opaque. No parameter is used.
+ *
+ * @private
+ * @param {Canvas} canvas
+ */
+ opaque: function opaque(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ for (var i = 0; i < pixels.length; i += 4) {
+ pixels[i + 3] = 255;
+ }
+ return pixels;
+ },
+ /**
+ * Sets each pixel to its inverse value. No parameter is used.
+ * @private
+ * @param {Canvas} canvas
+ */
+ invert: function invert(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ for (var i = 0; i < pixels.length; i += 4) {
+ pixels[i] = 255 - pixels[i];
+ pixels[i + 1] = 255 - pixels[i + 1];
+ pixels[i + 2] = 255 - pixels[i + 2];
+ }
+ },
+ /**
+ * Limits each channel of the image to the number of colors specified as
+ * the parameter. The parameter can be set to values between 2 and 255, but
+ * results are most noticeable in the lower ranges.
+ *
+ * Adapted from java based processing implementation
+ *
+ * @private
+ * @param {Canvas} canvas
+ * @param {Integer} level
+ */
+ posterize: function posterize(canvas) {
+ var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+ var pixels = Filters._toPixels(canvas);
+ if (level < 2 || level > 255) {
+ throw new Error('Level must be greater than 2 and less than 255 for posterize');
+ }
+ var levels1 = level - 1;
+ for (var i = 0; i < pixels.length; i += 4) {
+ var rlevel = pixels[i];
+ var glevel = pixels[i + 1];
+ var blevel = pixels[i + 2];
+ // New pixel value by posterizing each color.
+ pixels[i] = (rlevel * level >> 8) * 255 / levels1;
+ pixels[i + 1] = (glevel * level >> 8) * 255 / levels1;
+ pixels[i + 2] = (blevel * level >> 8) * 255 / levels1;
+ }
+ },
+ /**
+ * Increases the bright areas in an image.
+ * @private
+ * @param {Canvas} canvas
+ */
+ dilate: function dilate(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ var currIdx = 0;
+ var maxIdx = pixels.length ? pixels.length / 4 : 0;
+ var out = new Int32Array(maxIdx);
+ var currRowIdx,
+ maxRowIdx,
+ colOrig,
+ colOut,
+ currLum;
+ var idxRight,
+ idxLeft,
+ idxUp,
+ idxDown;
+ var colRight,
+ colLeft,
+ colUp,
+ colDown;
+ var lumRight,
+ lumLeft,
+ lumUp,
+ lumDown;
+ // Iterates through rows of pixels.
+ while (currIdx < maxIdx) {
+ currRowIdx = currIdx;
+ maxRowIdx = currIdx + canvas.width;
+ // Iterates through pixels within the current row.
+ while (currIdx < maxRowIdx) {
+ // Get original color of current pixel.
+ colOrig = colOut = Filters._getARGB(pixels, currIdx);
+ idxLeft = currIdx - 1;
+ idxRight = currIdx + 1;
+ idxUp = currIdx - canvas.width;
+ idxDown = currIdx + canvas.width;
+ // Adjust the indices to avoid going out of bounds.
+ if (idxLeft < currRowIdx) {
+ idxLeft = currIdx;
+ }
+ if (idxRight >= maxRowIdx) {
+ idxRight = currIdx;
+ }
+ if (idxUp < 0) {
+ idxUp = 0;
+ }
+ if (idxDown >= maxIdx) {
+ idxDown = currIdx;
+ }
+ colUp = Filters._getARGB(pixels, idxUp);
+ colLeft = Filters._getARGB(pixels, idxLeft);
+ colDown = Filters._getARGB(pixels, idxDown);
+ colRight = Filters._getARGB(pixels, idxRight);
+ // Compute luminance
+ currLum = 77 * (colOrig >> 16 & 255) + 151 * (colOrig >> 8 & 255) + 28 * (colOrig & 255);
+ lumLeft = 77 * (colLeft >> 16 & 255) + 151 * (colLeft >> 8 & 255) + 28 * (colLeft & 255);
+ lumRight = 77 * (colRight >> 16 & 255) + 151 * (colRight >> 8 & 255) + 28 * (colRight & 255);
+ lumUp = 77 * (colUp >> 16 & 255) + 151 * (colUp >> 8 & 255) + 28 * (colUp & 255);
+ lumDown = 77 * (colDown >> 16 & 255) + 151 * (colDown >> 8 & 255) + 28 * (colDown & 255);
+ // Update the output color based on the highest luminance value
+ if (lumLeft > currLum) {
+ colOut = colLeft;
+ currLum = lumLeft;
+ }
+ if (lumRight > currLum) {
+ colOut = colRight;
+ currLum = lumRight;
+ }
+ if (lumUp > currLum) {
+ colOut = colUp;
+ currLum = lumUp;
+ }
+ if (lumDown > currLum) {
+ colOut = colDown;
+ currLum = lumDown;
+ } // Store the updated color.
+
+ out[currIdx++] = colOut;
+ }
+ }
+ Filters._setPixels(pixels, out);
+ },
+ /**
+ * Reduces the bright areas in an image.
+ * Similar to `dilate()`, but updates the output color based on the lowest luminance value.
+ * @private
+ * @param {Canvas} canvas
+ */
+ erode: function erode(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ var currIdx = 0;
+ var maxIdx = pixels.length ? pixels.length / 4 : 0;
+ var out = new Int32Array(maxIdx);
+ var currRowIdx,
+ maxRowIdx,
+ colOrig,
+ colOut,
+ currLum;
+ var idxRight,
+ idxLeft,
+ idxUp,
+ idxDown;
+ var colRight,
+ colLeft,
+ colUp,
+ colDown;
+ var lumRight,
+ lumLeft,
+ lumUp,
+ lumDown;
+ while (currIdx < maxIdx) {
+ currRowIdx = currIdx;
+ maxRowIdx = currIdx + canvas.width;
+ while (currIdx < maxRowIdx) {
+ colOrig = colOut = Filters._getARGB(pixels, currIdx);
+ idxLeft = currIdx - 1;
+ idxRight = currIdx + 1;
+ idxUp = currIdx - canvas.width;
+ idxDown = currIdx + canvas.width;
+ if (idxLeft < currRowIdx) {
+ idxLeft = currIdx;
+ }
+ if (idxRight >= maxRowIdx) {
+ idxRight = currIdx;
+ }
+ if (idxUp < 0) {
+ idxUp = 0;
+ }
+ if (idxDown >= maxIdx) {
+ idxDown = currIdx;
+ }
+ colUp = Filters._getARGB(pixels, idxUp);
+ colLeft = Filters._getARGB(pixels, idxLeft);
+ colDown = Filters._getARGB(pixels, idxDown);
+ colRight = Filters._getARGB(pixels, idxRight);
+ //compute luminance
+ currLum = 77 * (colOrig >> 16 & 255) + 151 * (colOrig >> 8 & 255) + 28 * (colOrig & 255);
+ lumLeft = 77 * (colLeft >> 16 & 255) + 151 * (colLeft >> 8 & 255) + 28 * (colLeft & 255);
+ lumRight = 77 * (colRight >> 16 & 255) + 151 * (colRight >> 8 & 255) + 28 * (colRight & 255);
+ lumUp = 77 * (colUp >> 16 & 255) + 151 * (colUp >> 8 & 255) + 28 * (colUp & 255);
+ lumDown = 77 * (colDown >> 16 & 255) + 151 * (colDown >> 8 & 255) + 28 * (colDown & 255);
+ if (lumLeft < currLum) {
+ colOut = colLeft;
+ currLum = lumLeft;
+ }
+ if (lumRight < currLum) {
+ colOut = colRight;
+ currLum = lumRight;
+ }
+ if (lumUp < currLum) {
+ colOut = colUp;
+ currLum = lumUp;
+ }
+ if (lumDown < currLum) {
+ colOut = colDown;
+ currLum = lumDown;
+ } // Store the updated color.
+
+ out[currIdx++] = colOut;
+ }
+ }
+ Filters._setPixels(pixels, out);
+ },
+ blur: function blur(canvas, radius) {
+ blurARGB(canvas, radius);
+ }
+ };
+ // BLUR
+ // Internal kernel stuff for the gaussian blur filter.
+ var blurRadius;
+ var blurKernelSize;
+ var blurKernel;
+ var blurMult;
+ /*
+ * Port of https://github.com/processing/processing/blob/
+ * main/core/src/processing/core/PImage.java#L1250
+ *
+ * Optimized code for building the blur kernel.
+ * further optimized blur code (approx. 15% for radius=20)
+ * bigger speed gains for larger radii (~30%)
+ * added support for various image types (ALPHA, RGB, ARGB)
+ * [toxi 050728]
+ */
+ function buildBlurKernel(r) {
+ var radius = r * 3.5 | 0;
+ radius = radius < 1 ? 1 : radius < 248 ? radius : 248;
+ if (blurRadius !== radius) {
+ blurRadius = radius;
+ // Calculating the size of the blur kernel
+ blurKernelSize = 1 + blurRadius << 1;
+ blurKernel = new Int32Array(blurKernelSize);
+ blurMult = new Array(blurKernelSize);
+ for (var l = 0; l < blurKernelSize; l++) {
+ blurMult[l] = new Int32Array(256);
+ }
+ var bk,
+ bki;
+ var bm,
+ bmi;
+ // Generating blur kernel values.
+ for (var i = 1, radiusi = radius - 1; i < radius; i++) {
+ blurKernel[radius + i] = blurKernel[radiusi] = bki = radiusi * radiusi;
+ bm = blurMult[radius + i];
+ bmi = blurMult[radiusi--];
+ for (var j = 0; j < 256; j++) {
+ bm[j] = bmi[j] = bki * j;
+ }
+ }
+ bk = blurKernel[radius] = radius * radius;
+ bm = blurMult[radius];
+ for (var k = 0; k < 256; k++) {
+ bm[k] = bk * k;
+ }
+ }
+ } // Port of https://github.com/processing/processing/blob/
+ // main/core/src/processing/core/PImage.java#L1433
+
+ function blurARGB(canvas, radius) {
+ // Get pixel data.
+ var pixels = Filters._toPixels(canvas);
+ var width = canvas.width;
+ var height = canvas.height;
+ var numPackedPixels = width * height;
+ var argb = new Int32Array(numPackedPixels);
+ for (var j = 0; j < numPackedPixels; j++) {
+ argb[j] = Filters._getARGB(pixels, j);
+ }
+ var sum,
+ cr,
+ cg,
+ cb,
+ ca;
+ var read,
+ ri,
+ ym,
+ ymi,
+ bk0;
+ var a2 = new Int32Array(numPackedPixels);
+ var r2 = new Int32Array(numPackedPixels);
+ var g2 = new Int32Array(numPackedPixels);
+ var b2 = new Int32Array(numPackedPixels);
+ var yi = 0;
+ buildBlurKernel(radius);
+ var x,
+ y,
+ i;
+ var bm;
+ // Horizontal pass.
+ for (y = 0; y < height; y++) {
+ for (x = 0; x < width; x++) {
+ cb = cg = cr = ca = sum = 0;
+ read = x - blurRadius;
+ // Handle edge cases.
+ if (read < 0) {
+ bk0 = - read;
+ read = 0;
+ } else {
+ if (read >= width) {
+ break;
+ }
+ bk0 = 0;
+ }
+ for (i = bk0; i < blurKernelSize; i++) {
+ if (read >= width) {
+ break;
+ }
+ var c = argb[read + yi];
+ bm = blurMult[i];
+ ca += bm[(c & - 16777216) >>> 24];
+ cr += bm[(c & 16711680) >> 16];
+ cg += bm[(c & 65280) >> 8];
+ cb += bm[c & 255];
+ sum += blurKernel[i];
+ read++;
+ }
+ ri = yi + x;
+ a2[ri] = ca / sum;
+ r2[ri] = cr / sum;
+ g2[ri] = cg / sum;
+ b2[ri] = cb / sum;
+ }
+ yi += width;
+ }
+ yi = 0;
+ ym = - blurRadius;
+ ymi = ym * width;
+ // Vertical pass.
+ for (y = 0; y < height; y++) {
+ for (x = 0; x < width; x++) {
+ cb = cg = cr = ca = sum = 0;
+ // Handle edge cases.
+ if (ym < 0) {
+ bk0 = ri = - ym;
+ read = x;
+ } else {
+ if (ym >= height) {
+ break;
+ }
+ bk0 = 0;
+ ri = ym;
+ read = x + ymi;
+ }
+ for (i = bk0; i < blurKernelSize; i++) {
+ if (ri >= height) {
+ break;
+ }
+ bm = blurMult[i];
+ ca += bm[a2[read]];
+ cr += bm[r2[read]];
+ cg += bm[g2[read]];
+ cb += bm[b2[read]];
+ sum += blurKernel[i];
+ ri++;
+ read += width;
+ } // Set final ARGB value
+
+ argb[x + yi] = ca / sum << 24 | cr / sum << 16 | cg / sum << 8 | cb / sum;
+ }
+ yi += width;
+ ymi += width;
+ ym++;
+ }
+ Filters._setPixels(pixels, argb);
+ }
+ var _default = Filters;
+ exports.default = _default;
+ },
+ {
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.int32-array': 240,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint8-array': 257
+ }
+ ],
+ 325: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _omggif = _interopRequireDefault(_dereq_('omggif'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * @module Image
+ * @submodule Image
+ * @for p5
+ * @requires core
+ */
+ /**
+ * This module defines the p5 methods for the p5.Image class
+ * for drawing images to the main display canvas.
+ */
+ /**
+ * Creates a new p5.Image object.
+ *
+ * `createImage()` uses the `width` and `height` parameters to set the new
+ * p5.Image object's dimensions in pixels. The new
+ * p5.Image can be modified by updating its
+ * pixels array or by calling its
+ * get() and
+ * set() methods. The
+ * loadPixels() method must be called
+ * before reading or modifying pixel values. The
+ * updatePixels() method must be called
+ * for updates to take effect.
+ *
+ * Note: The new p5.Image object is transparent by
+ * default.
+ *
+ * @method createImage
+ * @param {Integer} width width in pixels.
+ * @param {Integer} height height in pixels.
+ * @return {p5.Image} new p5.Image object.
+ *
+ * @example
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let bgColor = 50;
+ * let fillColor = 255;
+ * let borderWidth = 0.5;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(bgColor);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * fill(0);
+ * noStroke();
+ *
+ * // Display the number of touch points.
+ * text(touches.length, 50, 20);
+ *
+ * // Style the touch points.
+ * fill(fillColor);
+ * stroke(0);
+ * strokeWeight(borderWidth);
+ *
+ * // Display the touch points as circles.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ * // Set the background color to a random grayscale value.
+ * function touchStarted() {
+ * bgColor = random(80, 255);
+ * }
+ *
+ * // Set the fill color to a random grayscale value.
+ * function touchEnded() {
+ * fillColor = random(0, 255);
+ * }
+ *
+ * // Set the stroke weight.
+ * function touchMoved() {
+ * // Increment the border width.
+ * borderWidth += 0.1;
+ *
+ * // Reset the border width once it's too thick.
+ * if (borderWidth > 20) {
+ * borderWidth = 0.5;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels into memory.
+ * img.loadPixels();
+ *
+ * // Set all the image's pixels to black.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ *
+ * // Update the image's pixel values.
+ * img.updatePixels();
+ *
+ * // Draw the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels into memory.
+ * img.loadPixels();
+ *
+ * // Create a color gradient.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * // Calculate the transparency.
+ * let a = map(x, 0, img.width, 0, 255);
+ *
+ * // Create a p5.Color object.
+ * let c = color(0, a);
+ *
+ * // Set the pixel's color.
+ * img.set(x, y, c);
+ * }
+ * }
+ *
+ * // Update the image's pixels.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A square with a horizontal color gradient that transitions from gray to black.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.createImage = function (width, height) {
+ _main.default._validateParameters('createImage', arguments);
+ return new _main.default.Image(width, height);
+ };
+ /**
+ * Saves the current canvas as an image.
+ *
+ * By default, `saveCanvas()` saves the canvas as a PNG image called
+ * `untitled.png`.
+ *
+ * The first parameter, `filename`, is optional. It's a string that sets the
+ * file's name. If a file extension is included, as in
+ * `saveCanvas('drawing.png')`, then the image will be saved using that
+ * format.
+ *
+ * The second parameter, `extension`, is also optional. It sets the files format.
+ * Either `'png'` or `'jpg'` can be used. For example, `saveCanvas('drawing', 'jpg')`
+ * saves the canvas to a file called `drawing.jpg`.
+ *
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ *
+ * @method saveCanvas
+ * @param {p5.Framebuffer|p5.Element|HTMLCanvasElement} selectedCanvas reference to a
+ * specific HTML5 canvas element.
+ * @param {String} [filename] file name. Defaults to 'untitled'.
+ * @param {String} [extension] file extension, either 'jpg' or 'png'. Defaults to 'png'.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the pixels into memory.
+ * img.loadPixels();
+ * // Get the current pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the pixel that is halfway through the image's pixel array.
+ * let halfImage = 4 * (d * img.width) * (d * img.height / 2);
+ *
+ * // Set half of the image's pixels to black.
+ * for (let i = 0; i < halfImage; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the image's pixels.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(255);
+ *
+ * // Save the canvas to 'untitled.png'.
+ * saveCanvas();
+ *
+ * describe('A white square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(255);
+ *
+ * // Save the canvas to 'myCanvas.jpg'.
+ * saveCanvas('myCanvas.jpg');
+ *
+ * describe('A white square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(255);
+ *
+ * // Save the canvas to 'myCanvas.jpg'.
+ * saveCanvas('myCanvas', 'jpg');
+ *
+ * describe('A white square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(255);
+ *
+ * // Save the canvas to 'untitled.png'.
+ * saveCanvas(cnv);
+ *
+ * describe('A white square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(255);
+ *
+ * // Save the canvas to 'myCanvas.jpg'.
+ * saveCanvas(cnv, 'myCanvas.jpg');
+ *
+ * describe('A white square.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method saveCanvas
+ * @param {String} [filename]
+ * @param {String} [extension]
+ */
+ _main.default.prototype.saveCanvas = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('saveCanvas', args);
+ // copy arguments to array
+ var htmlCanvas,
+ filename,
+ extension,
+ temporaryGraphics;
+ if (args[0] instanceof HTMLCanvasElement) {
+ htmlCanvas = args[0];
+ args.shift();
+ } else if (args[0] instanceof _main.default.Element) {
+ htmlCanvas = args[0].elt;
+ args.shift();
+ } else if (args[0] instanceof _main.default.Framebuffer) {
+ var framebuffer = args[0];
+ temporaryGraphics = this.createGraphics(framebuffer.width, framebuffer.height);
+ temporaryGraphics.pixelDensity(pixelDensity());
+ framebuffer.loadPixels();
+ temporaryGraphics.loadPixels();
+ temporaryGraphics.pixels.set(framebuffer.pixels);
+ temporaryGraphics.updatePixels();
+ htmlCanvas = temporaryGraphics.elt;
+ args.shift();
+ } else {
+ htmlCanvas = this._curElement && this._curElement.elt;
+ }
+ if (args.length >= 1) {
+ filename = args[0];
+ }
+ if (args.length >= 2) {
+ extension = args[1];
+ }
+ extension = extension || _main.default.prototype._checkFileExtension(filename, extension) [1] || 'png';
+ var mimeType;
+ switch (extension) {
+ default:
+ //case 'png':
+ mimeType = 'image/png';
+ break;
+ case 'jpeg':
+ case 'jpg':
+ mimeType = 'image/jpeg';
+ break;
+ }
+ htmlCanvas.toBlob(function (blob) {
+ _main.default.prototype.downloadFile(blob, filename, extension);
+ if (temporaryGraphics) temporaryGraphics.remove();
+ }, mimeType);
+ };
+ // this is the old saveGif, left here for compatibility purposes
+ // the only place I found it being used was on image/p5.Image.js, on the
+ // save function. that has been changed to use this function.
+ _main.default.prototype.encodeAndDownloadGif = function (pImg, filename) {
+ var props = pImg.gifProperties;
+ //convert loopLimit back into Netscape Block formatting
+ var loopLimit = props.loopLimit;
+ if (loopLimit === 1) {
+ loopLimit = null;
+ } else if (loopLimit === null) {
+ loopLimit = 0;
+ }
+ var buffer = new Uint8Array(pImg.width * pImg.height * props.numFrames);
+ var allFramesPixelColors = [
+ ];
+ // Used to determine the occurrence of unique palettes and the frames
+ // which use them
+ var paletteFreqsAndFrames = {
+ };
+ // Pass 1:
+ //loop over frames and get the frequency of each palette
+ for (var i = 0; i < props.numFrames; i++) {
+ var paletteSet = new Set();
+ var data = props.frames[i].image.data;
+ var dataLength = data.length;
+ // The color for each pixel in this frame ( for easier lookup later )
+ var pixelColors = new Uint32Array(pImg.width * pImg.height);
+ for (var j = 0, k = 0; j < dataLength; j += 4, k++) {
+ var r = data[j + 0];
+ var g = data[j + 1];
+ var b = data[j + 2];
+ var color = r << 16 | g << 8 | b << 0;
+ paletteSet.add(color);
+ // What color does this pixel have in this frame ?
+ pixelColors[k] = color;
+ } // A way to put use the entire palette as an object key
+
+ var paletteStr = _toConsumableArray(paletteSet).sort().toString();
+ if (paletteFreqsAndFrames[paletteStr] === undefined) {
+ paletteFreqsAndFrames[paletteStr] = {
+ freq: 1,
+ frames: [
+ i
+ ]
+ };
+ } else {
+ paletteFreqsAndFrames[paletteStr].freq += 1;
+ paletteFreqsAndFrames[paletteStr].frames.push(i);
+ }
+ allFramesPixelColors.push(pixelColors);
+ }
+ var framesUsingGlobalPalette = [
+ ];
+ // Now to build the global palette
+ // Sort all the unique palettes in descending order of their occurrence
+ var palettesSortedByFreq = Object.keys(paletteFreqsAndFrames).sort(function (a, b) {
+ return paletteFreqsAndFrames[b].freq - paletteFreqsAndFrames[a].freq;
+ });
+ // The initial global palette is the one with the most occurrence
+ var globalPalette = palettesSortedByFreq[0].split(',').map(function (a) {
+ return parseInt(a);
+ });
+ framesUsingGlobalPalette = framesUsingGlobalPalette.concat(paletteFreqsAndFrames[globalPalette].frames);
+ var globalPaletteSet = new Set(globalPalette);
+ // Build a more complete global palette
+ // Iterate over the remaining palettes in the order of
+ // their occurrence and see if the colors in this palette which are
+ // not in the global palette can be added there, while keeping the length
+ // of the global palette <= 256
+ for (var _i = 1; _i < palettesSortedByFreq.length; _i++) {
+ var palette = palettesSortedByFreq[_i].split(',').map(function (a) {
+ return parseInt(a);
+ });
+ var difference = palette.filter(function (x) {
+ return !globalPaletteSet.has(x);
+ });
+ if (globalPalette.length + difference.length <= 256) {
+ for (var _j = 0; _j < difference.length; _j++) {
+ globalPalette.push(difference[_j]);
+ globalPaletteSet.add(difference[_j]);
+ } // All frames using this palette now use the global palette
+
+ framesUsingGlobalPalette = framesUsingGlobalPalette.concat(paletteFreqsAndFrames[palettesSortedByFreq[_i]].frames);
+ }
+ }
+ framesUsingGlobalPalette = new Set(framesUsingGlobalPalette);
+ // Build a lookup table of the index of each color in the global palette
+ // Maps a color to its index
+ var globalIndicesLookup = {
+ };
+ for (var _i2 = 0; _i2 < globalPalette.length; _i2++) {
+ if (!globalIndicesLookup[globalPalette[_i2]]) {
+ globalIndicesLookup[globalPalette[_i2]] = _i2;
+ }
+ } // force palette to be power of 2
+
+ var powof2 = 1;
+ while (powof2 < globalPalette.length) {
+ powof2 <<= 1;
+ }
+ globalPalette.length = powof2;
+ // global opts
+ var opts = {
+ loop: loopLimit,
+ palette: new Uint32Array(globalPalette)
+ };
+ var gifWriter = new _omggif.default.GifWriter(buffer, pImg.width, pImg.height, opts);
+ var previousFrame = {
+ };
+ // Pass 2
+ // Determine if the frame needs a local palette
+ // Also apply transparency optimization. This function will often blow up
+ // the size of a GIF if not for transparency. If a pixel in one frame has
+ // the same color in the previous frame, that pixel can be marked as
+ // transparent. We decide one particular color as transparent and make all
+ // transparent pixels take this color. This helps in later in compression.
+ var _loop = function _loop(_i3) {
+ var localPaletteRequired = !framesUsingGlobalPalette.has(_i3);
+ var palette = localPaletteRequired ? [
+ ] : globalPalette;
+ var pixelPaletteIndex = new Uint8Array(pImg.width * pImg.height);
+ // Lookup table mapping color to its indices
+ var colorIndicesLookup = {
+ };
+ // All the colors that cannot be marked transparent in this frame
+ var cannotBeTransparent = new Set();
+ allFramesPixelColors[_i3].forEach(function (color, k) {
+ if (localPaletteRequired) {
+ if (colorIndicesLookup[color] === undefined) {
+ colorIndicesLookup[color] = palette.length;
+ palette.push(color);
+ }
+ pixelPaletteIndex[k] = colorIndicesLookup[color];
+ } else {
+ pixelPaletteIndex[k] = globalIndicesLookup[color];
+ }
+ if (_i3 > 0) {
+ // If even one pixel of this color has changed in this frame
+ // from the previous frame, we cannot mark it as transparent
+ if (allFramesPixelColors[_i3 - 1][k] !== color) {
+ cannotBeTransparent.add(color);
+ }
+ }
+ });
+ var frameOpts = {
+ };
+ // Transparency optimization
+ var canBeTransparent = palette.filter(function (a) {
+ return !cannotBeTransparent.has(a);
+ });
+ if (canBeTransparent.length > 0) {
+ // Select a color to mark as transparent
+ var transparent = canBeTransparent[0];
+ var transparentIndex = localPaletteRequired ? colorIndicesLookup[transparent] : globalIndicesLookup[transparent];
+ if (_i3 > 0) {
+ for (var _k = 0; _k < allFramesPixelColors[_i3].length; _k++) {
+ // If this pixel in this frame has the same color in previous frame
+ if (allFramesPixelColors[_i3 - 1][_k] === allFramesPixelColors[_i3][_k]) {
+ pixelPaletteIndex[_k] = transparentIndex;
+ }
+ }
+ frameOpts.transparent = transparentIndex;
+ // If this frame has any transparency, do not dispose the previous frame
+ previousFrame.frameOpts.disposal = 1;
+ }
+ }
+ frameOpts.delay = props.frames[_i3].delay / 10; // Move timing back into GIF formatting
+ if (localPaletteRequired) {
+ // force palette to be power of 2
+ var _powof = 1;
+ while (_powof < palette.length) {
+ _powof <<= 1;
+ }
+ palette.length = _powof;
+ frameOpts.palette = new Uint32Array(palette);
+ }
+ if (_i3 > 0) {
+ // add the frame that came before the current one
+ gifWriter.addFrame(0, 0, pImg.width, pImg.height, previousFrame.pixelPaletteIndex, previousFrame.frameOpts);
+ } // previous frame object should now have details of this frame
+
+ previousFrame = {
+ pixelPaletteIndex: pixelPaletteIndex,
+ frameOpts: frameOpts
+ };
+ };
+ for (var _i3 = 0; _i3 < props.numFrames; _i3++) {
+ _loop(_i3);
+ }
+ previousFrame.frameOpts.disposal = 1;
+ // add the last frame
+ gifWriter.addFrame(0, 0, pImg.width, pImg.height, previousFrame.pixelPaletteIndex, previousFrame.frameOpts);
+ var extension = 'gif';
+ var blob = new Blob([buffer.slice(0, gifWriter.end())], {
+ type: 'image/gif'
+ });
+ _main.default.prototype.downloadFile(blob, filename, extension);
+ };
+ /**
+ * Captures a sequence of frames from the canvas that can be saved as images.
+ *
+ * `saveFrames()` creates an array of frame objects. Each frame is stored as
+ * an object with its file type, file name, and image data as a string. For
+ * example, the first saved frame might have the following properties:
+ *
+ * `{ ext: 'png', filenmame: 'frame0', imageData: 'data:image/octet-stream;base64, abc123' }`.
+ *
+ * The first parameter, `filename`, sets the prefix for the file names. For
+ * example, setting the prefix to `'frame'` would generate the image files
+ * `frame0.png`, `frame1.png`, and so on.
+ *
+ * The second parameter, `extension`, sets the file type to either `'png'` or
+ * `'jpg'`.
+ *
+ * The third parameter, `duration`, sets the duration to record in seconds.
+ * The maximum duration is 15 seconds.
+ *
+ * The fourth parameter, `framerate`, sets the number of frames to record per
+ * second. The maximum frame rate value is 22. Limits are placed on `duration`
+ * and `framerate` to avoid using too much memory. Recording large canvases
+ * can easily crash sketches or even web browsers.
+ *
+ * The fifth parameter, `callback`, is optional. If a function is passed,
+ * image files won't be saved by default. The callback function can be used
+ * to process an array containing the data for each captured frame. The array
+ * of image data contains a sequence of objects with three properties for each
+ * frame: `imageData`, `filename`, and `extension`.
+ *
+ * Note: Frames are downloaded as individual image files by default.
+ *
+ * @method saveFrames
+ * @param {String} filename prefix of file name.
+ * @param {String} extension file extension, either 'jpg' or 'png'.
+ * @param {Number} duration duration in seconds to record. This parameter will be constrained to be less or equal to 15.
+ * @param {Number} framerate number of frames to save per second. This parameter will be constrained to be less or equal to 22.
+ * @param {function(Array)} [callback] callback function that will be executed
+ to handle the image data. This function
+ should accept an array as argument. The
+ array will contain the specified number of
+ frames of objects. Each object has three
+ properties: `imageData`, `filename`, and `extension`.
+ * @example
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ *
+ * background(255);
+ *
+ * // Save the canvas to 'myCanvas.jpg'.
+ * saveCanvas(cnv, 'myCanvas', 'jpg');
+ *
+ * describe('A white square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A square repeatedly changes color from blue to pink.');
+ * }
+ *
+ * function draw() {
+ * let r = frameCount % 255;
+ * let g = 50;
+ * let b = 100;
+ * background(r, g, b);
+ * }
+ *
+ * // Save the frames when the user presses the 's' key.
+ * function keyPressed() {
+ * if (key === 's') {
+ * saveFrames('frame', 'png', 1, 5);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.saveFrames = function (fName, ext, _duration, _fps, callback) {
+ _main.default._validateParameters('saveFrames', arguments);
+ var duration = _duration || 3;
+ duration = _main.default.prototype.constrain(duration, 0, 15);
+ duration = duration * 1000;
+ var fps = _fps || 15;
+ fps = _main.default.prototype.constrain(fps, 0, 22);
+ var count = 0;
+ var makeFrame = _main.default.prototype._makeFrame;
+ var cnv = this._curElement.elt;
+ var frames = [
+ ];
+ var frameFactory = setInterval(function () {
+ frames.push(makeFrame(fName + count, ext, cnv));
+ count++;
+ }, 1000 / fps);
+ setTimeout(function () {
+ clearInterval(frameFactory);
+ if (callback) {
+ callback(frames);
+ } else {
+ for (var _i4 = 0, _frames = frames; _i4 < _frames.length; _i4++) {
+ var f = _frames[_i4];
+ _main.default.prototype.downloadFile(f.imageData, f.filename, f.ext);
+ }
+ }
+ frames = [
+ ]; // clear frames
+ }, duration + 0.01);
+ };
+ _main.default.prototype._makeFrame = function (filename, extension, _cnv) {
+ var cnv;
+ if (this) {
+ cnv = this._curElement.elt;
+ } else {
+ cnv = _cnv;
+ }
+ var mimeType;
+ if (!extension) {
+ extension = 'png';
+ mimeType = 'image/png';
+ } else {
+ switch (extension.toLowerCase()) {
+ case 'png':
+ mimeType = 'image/png';
+ break;
+ case 'jpeg':
+ mimeType = 'image/jpeg';
+ break;
+ case 'jpg':
+ mimeType = 'image/jpeg';
+ break;
+ default:
+ mimeType = 'image/png';
+ break;
+ }
+ }
+ var downloadMime = 'image/octet-stream';
+ var imageData = cnv.toDataURL(mimeType);
+ imageData = imageData.replace(mimeType, downloadMime);
+ var thisFrame = {
+ };
+ thisFrame.imageData = imageData;
+ thisFrame.filename = filename;
+ thisFrame.ext = extension;
+ return thisFrame;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.filter': 174,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.object.keys': 204,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.set': 212,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint32-array': 256,
+ 'core-js/modules/es.typed-array.uint8-array': 257,
+ 'core-js/modules/web.dom-collections.for-each': 260,
+ 'core-js/modules/web.dom-collections.iterator': 261,
+ 'omggif': 275
+ }
+ ],
+ 326: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.copy-within');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.copy-within');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ _dereq_('regenerator-runtime/runtime');
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _helpers = _interopRequireDefault(_dereq_('../core/helpers'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _omggif = _interopRequireDefault(_dereq_('omggif'));
+ var _gifenc = _dereq_('gifenc');
+ _dereq_('../core/friendly_errors/validate_params');
+ _dereq_('../core/friendly_errors/file_errors');
+ _dereq_('../core/friendly_errors/fes_core');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+ try {
+ var info = gen[key](arg);
+ var value = info.value;
+ } catch (error) {
+ reject(error);
+ return;
+ }
+ if (info.done) {
+ resolve(value);
+ } else {
+ Promise.resolve(value).then(_next, _throw);
+ }
+ }
+ function _asyncToGenerator(fn) {
+ return function () {
+ var self = this,
+ args = arguments;
+ return new Promise(function (resolve, reject) {
+ var gen = fn.apply(self, args);
+ function _next(value) {
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value);
+ }
+ function _throw(err) {
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err);
+ }
+ _next(undefined);
+ });
+ };
+ } /**
+ * @module Image
+ * @submodule Loading & Displaying
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Loads an image to create a p5.Image object.
+ *
+ * `loadImage()` interprets the first parameter one of three ways. If the path
+ * to an image file is provided, `loadImage()` will load it. Paths to local
+ * files should be relative, such as `'assets/thundercat.jpg'`. URLs such as
+ * `'https://example.com/thundercat.jpg'` may be blocked due to browser
+ * security. Raw image data can also be passed as a base64 encoded image in
+ * the form `'data:image/png;base64,arandomsequenceofcharacters'`.
+ *
+ * The second parameter is optional. If a function is passed, it will be
+ * called once the image has loaded. The callback function can optionally use
+ * the new p5.Image object.
+ *
+ * The third parameter is also optional. If a function is passed, it will be
+ * called if the image fails to load. The callback function can optionally use
+ * the event error.
+ *
+ * Images can take time to load. Calling `loadImage()` in
+ * preload() ensures images load before they're
+ * used in setup() or draw().
+ *
+ * @method loadImage
+ * @param {String} path path of the image to be loaded or base64 encoded image.
+ * @param {function(p5.Image)} [successCallback] function called with
+ * p5.Image once it
+ * loads.
+ * @param {function(Event)} [failureCallback] function called with event
+ * error if the image fails to load.
+ * @return {p5.Image} the p5.Image object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A square repeatedly changes color from blue to pink.');
+ * }
+ *
+ * function draw() {
+ * let r = frameCount % 255;
+ * let g = 50;
+ * let b = 100;
+ * background(r, g, b);
+ * }
+ *
+ * // Print 5 frames when the user presses the mouse.
+ * function mousePressed() {
+ * saveFrames('frame', 'png', 1, 5, printFrames);
+ * }
+ *
+ * // Prints an array of objects containing raw image data, filenames, and extensions.
+ * function printFrames(frames) {
+ * for (let frame of frames) {
+ * print(frame);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image and create a p5.Image object.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Draw the image.
+ * image(img, 0, 0);
+ *
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Call handleImage() once the image loads.
+ * loadImage('assets/laDefense.jpg', handleImage);
+ *
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ *
+ * // Display the image.
+ * function handleImage(img) {
+ * image(img, 0, 0);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.loadImage = function (path, successCallback, failureCallback) {
+ _main.default._validateParameters('loadImage', arguments);
+ var pImg = new _main.default.Image(1, 1, this);
+ var self = this;
+ var req = new Request(path, {
+ method: 'GET',
+ mode: 'cors'
+ });
+ fetch(path, req).then(function (response) {
+ // GIF section
+ var contentType = response.headers.get('content-type');
+ if (contentType === null) {
+ console.warn('The image you loaded does not have a Content-Type header. If you are using the online editor consider reuploading the asset.');
+ }
+ if (contentType && contentType.includes('image/gif')) {
+ response.arrayBuffer().then(function (arrayBuffer) {
+ if (arrayBuffer) {
+ var byteArray = new Uint8Array(arrayBuffer);
+ _createGif(byteArray, pImg, successCallback, failureCallback, function (pImg) {
+ self._decrementPreload();
+ }.bind(self));
+ }
+ }, function (e) {
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ self._decrementPreload();
+ } else {
+ console.error(e);
+ }
+ });
+ } else {
+ // Non-GIF Section
+ var img = new Image();
+ img.onload = function () {
+ pImg.width = pImg.canvas.width = img.width;
+ pImg.height = pImg.canvas.height = img.height;
+ // Draw the image into the backing canvas of the p5.Image
+ pImg.drawingContext.drawImage(img, 0, 0);
+ pImg.modified = true;
+ if (typeof successCallback === 'function') {
+ successCallback(pImg);
+ }
+ self._decrementPreload();
+ };
+ img.onerror = function (e) {
+ _main.default._friendlyFileLoadError(0, img.src);
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ self._decrementPreload();
+ } else {
+ console.error(e);
+ }
+ };
+ // Set crossOrigin in case image is served with CORS headers.
+ // This will let us draw to the canvas without tainting it.
+ // See https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
+ // When using data-uris the file will be loaded locally
+ // so we don't need to worry about crossOrigin with base64 file types.
+ if (path.indexOf('data:image/') !== 0) {
+ img.crossOrigin = 'Anonymous';
+ } // start loading the image
+
+ img.src = path;
+ }
+ pImg.modified = true;
+ }).catch(function (e) {
+ _main.default._friendlyFileLoadError(0, path);
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ self._decrementPreload();
+ } else {
+ console.error(e);
+ }
+ });
+ return pImg;
+ };
+ /**
+ * Generates a gif from a sketch and saves it to a file.
+ *
+ * `saveGif()` may be called in setup() or at any
+ * point while a sketch is running.
+ *
+ * The first parameter, `fileName`, sets the gif's file name.
+ *
+ * The second parameter, `duration`, sets the gif's duration in seconds.
+ *
+ * The third parameter, `options`, is optional. If an object is passed,
+ * `saveGif()` will use its properties to customize the gif. `saveGif()`
+ * recognizes the properties `delay`, `units`, `silent`,
+ * `notificationDuration`, and `notificationID`.
+ *
+ * @method saveGif
+ * @param {String} filename file name of gif.
+ * @param {Number} duration duration in seconds to capture from the sketch.
+ * @param {Object} [options] an object that can contain five more properties:
+ * `delay`, a Number specifying how much time to wait before recording;
+ * `units`, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;
+ * `silent`, a Boolean that defines presence of progress notifications. By default it’s `false`;
+ * `notificationDuration`, a Number that defines how long in seconds the final notification
+ * will live. By default it's `0`, meaning the notification will never be removed;
+ * `notificationID`, a String that specifies the id of the notification's DOM element. By default it’s `'progressBar’`.
+ *
+ * @example
+ *
+ * function setup() {
+ * // Call handleImage() once the image loads or
+ * // call handleError() if an error occurs.
+ * loadImage('assets/laDefense.jpg', handleImage, handleError);
+ * }
+ *
+ * // Display the image.
+ * function handleImage(img) {
+ * image(img, 0, 0);
+ *
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ *
+ * // Log the error.
+ * function handleError(event) {
+ * console.error('Oops!', event);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the circle.
+ * let c = frameCount % 255;
+ * fill(c);
+ *
+ * // Display the circle.
+ * circle(50, 50, 25);
+ * }
+ *
+ * // Save a 5-second gif when the user presses the 's' key.
+ * function keyPressed() {
+ * if (key === 's') {
+ * saveGif('mySketch', 5);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.saveGif = /*#__PURE__*/ function () {
+ var _ref = _asyncToGenerator( /*#__PURE__*/ regeneratorRuntime.mark(function _callee(fileName, duration) {
+ var options,
+ delay,
+ units,
+ silent,
+ notificationDuration,
+ notificationID,
+ _frameRate,
+ gifFrameDelay,
+ nFrames,
+ nFramesDelay,
+ totalNumberOfFrames,
+ frameIterator,
+ lastPixelDensity,
+ frames,
+ p,
+ pixels,
+ gl,
+ data,
+ gif,
+ globalPalette,
+ paletteCache,
+ getIndexedFrame,
+ transparentIndex,
+ prevIndexedFrame,
+ i,
+ indexedFrame,
+ originalIndexedFrame,
+ _i,
+ buffer,
+ extension,
+ blob,
+ _args = arguments;
+ return regeneratorRuntime.wrap(function _callee$(_context) {
+ while (1) {
+ switch (_context.prev = _context.next) {
+ case 0:
+ options = _args.length > 2 && _args[2] !== undefined ? _args[2] : {
+ delay: 0,
+ units: 'seconds',
+ silent: false,
+ notificationDuration: 0,
+ notificationID: 'progressBar'
+ };
+ if (!(typeof fileName !== 'string')) {
+ _context.next = 3;
+ break;
+ }
+ throw TypeError('fileName parameter must be a string');
+ case 3:
+ if (!(typeof duration !== 'number')) {
+ _context.next = 5;
+ break;
+ }
+ throw TypeError('Duration parameter must be a number');
+ case 5:
+ // extract variables for more comfortable use
+ delay = options && options.delay || 0; // in seconds
+ units = options && options.units || 'seconds'; // either 'seconds' or 'frames'
+ silent = options && options.silent || false;
+ notificationDuration = options && options.notificationDuration || 0;
+ notificationID = options && options.notificationID || 'progressBar'; // if arguments in the options object are not correct, cancel operation
+ if (!(typeof delay !== 'number')) {
+ _context.next = 12;
+ break;
+ }
+ throw TypeError('Delay parameter must be a number');
+ case 12:
+ if (!(units !== 'seconds' && units !== 'frames')) {
+ _context.next = 14;
+ break;
+ }
+ throw TypeError('Units parameter must be either "frames" or "seconds"');
+ case 14:
+ if (!(typeof silent !== 'boolean')) {
+ _context.next = 16;
+ break;
+ }
+ throw TypeError('Silent parameter must be a boolean');
+ case 16:
+ if (!(typeof notificationDuration !== 'number')) {
+ _context.next = 18;
+ break;
+ }
+ throw TypeError('Notification duration parameter must be a number');
+ case 18:
+ if (!(typeof notificationID !== 'string')) {
+ _context.next = 20;
+ break;
+ }
+ throw TypeError('Notification ID parameter must be a string');
+ case 20:
+ this._recording = true;
+ // get the project's framerate
+ _frameRate = this._targetFrameRate; // if it is undefined or some non useful value, assume it's 60
+ if (_frameRate === Infinity || _frameRate === undefined || _frameRate === 0) {
+ _frameRate = 60;
+ } // calculate frame delay based on frameRate
+ // this delay has nothing to do with the
+ // delay in options, but rather is the delay
+ // we have to specify to the gif encoder between frames.
+
+ gifFrameDelay = 1 / _frameRate * 1000; // constrain it to be always greater than 20,
+ // otherwise it won't work in some browsers and systems
+ // reference: https://stackoverflow.com/questions/64473278/gif-frame-duration-seems-slower-than-expected
+ gifFrameDelay = gifFrameDelay < 20 ? 20 : gifFrameDelay;
+ // check the mode we are in and how many frames
+ // that duration translates to
+ nFrames = units === 'seconds' ? duration * _frameRate : duration;
+ nFramesDelay = units === 'seconds' ? delay * _frameRate : delay;
+ totalNumberOfFrames = nFrames + nFramesDelay; // initialize variables for the frames processing
+ frameIterator = nFramesDelay;
+ this.frameCount = frameIterator;
+ lastPixelDensity = this._pixelDensity;
+ this.pixelDensity(1);
+ // We first take every frame that we are going to use for the animation
+ frames = [
+ ];
+ if (document.getElementById(notificationID) !== null) document.getElementById(notificationID).remove();
+ if (!silent) {
+ p = this.createP('');
+ p.id(notificationID);
+ p.style('font-size', '16px');
+ p.style('font-family', 'Montserrat');
+ p.style('background-color', '#ffffffa0');
+ p.style('padding', '8px');
+ p.style('border-radius', '10px');
+ p.position(0, 0);
+ }
+ if (this._renderer instanceof _main.default.RendererGL) {
+ // if we have a WEBGL context, initialize the pixels array
+ // and the gl context to use them inside the loop
+ gl = this.drawingContext;
+ pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
+ } // stop the loop since we are going to manually redraw
+
+ this.noLoop();
+ // Defer execution until the rest of the call stack finishes, allowing the
+ // rest of `setup` to be called (and, importantly, canvases hidden in setup
+ // to be unhidden.)
+ //
+ // Waiting on this empty promise means we'll continue as soon as setup
+ // finishes without waiting for another frame.
+ _context.next = 39;
+ return Promise.resolve();
+ case 39:
+ if (!(frameIterator < totalNumberOfFrames)) {
+ _context.next = 50;
+ break;
+ } /*
+ we draw the next frame. this is important, since
+ busy sketches or low end devices might take longer
+ to render some frames. So we just wait for the frame
+ to be drawn and immediately save it to a buffer and continue
+ */
+
+ this.redraw();
+ // depending on the context we'll extract the pixels one way
+ // or another
+ data = undefined;
+ if (this._renderer instanceof _main.default.RendererGL) {
+ pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
+ gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+ data = _flipPixels(pixels, this.width, this.height);
+ } else {
+ data = this.drawingContext.getImageData(0, 0, this.width, this.height).data;
+ }
+ frames.push(data);
+ frameIterator++;
+ if (!silent) {
+ p.html('Saved frame ' + frames.length.toString() + ' out of ' + nFrames.toString());
+ }
+ _context.next = 48;
+ return new Promise(function (resolve) {
+ return setTimeout(resolve, 0);
+ });
+ case 48:
+ _context.next = 39;
+ break;
+ case 50:
+ if (!silent) p.html('Frames processed, generating color palette...');
+ this.loop();
+ this.pixelDensity(lastPixelDensity);
+ // create the gif encoder and the colorspace format
+ gif = (0, _gifenc.GIFEncoder) (); // calculate the global palette for this set of frames
+ globalPalette = _generateGlobalPalette(frames); // Rather than using applyPalette() from the gifenc library, we use our
+ // own function to map frame pixels to a palette color. This way, we can
+ // cache palette color mappings between frames for extra performance, and
+ // use our own caching mechanism to avoid flickering colors from cache
+ // key collisions.
+ paletteCache = {
+ };
+ getIndexedFrame = function getIndexedFrame(frame) {
+ var length = frame.length / 4;
+ var index = new Uint8Array(length);
+ for (var i = 0; i < length; i++) {
+ var key = frame[i * 4] << 24 | frame[i * 4 + 1] << 16 | frame[i * 4 + 2] << 8 | frame[i * 4 + 3];
+ if (paletteCache[key] === undefined) {
+ paletteCache[key] = (0, _gifenc.nearestColorIndex) (globalPalette, frame.slice(i * 4, (i + 1) * 4));
+ }
+ index[i] = paletteCache[key];
+ }
+ return index;
+ }; // the way we designed the palette means we always take the last index for transparency
+ transparentIndex = globalPalette.length - 1; // we are going to iterate the frames in pairs, n-1 and n
+ prevIndexedFrame = [
+ ];
+ i = 0;
+ case 60:
+ if (!(i < frames.length)) {
+ _context.next = 71;
+ break;
+ } //const indexedFrame = applyPalette(frames[i], globalPaletteWithoutAlpha, 'rgba565');
+
+ indexedFrame = getIndexedFrame(frames[i]); // Make a copy of the palette-applied frame before editing the original
+ // to use transparent pixels
+ originalIndexedFrame = indexedFrame.slice();
+ if (i === 0) {
+ gif.writeFrame(indexedFrame, this.width, this.height, {
+ palette: globalPalette,
+ delay: gifFrameDelay,
+ dispose: 1
+ });
+ } else {
+ // Matching pixels between frames can be set to full transparency,
+ // allowing the previous frame's pixels to show through. We only do
+ // this for pixels that get mapped to the same quantized color so that
+ // the resulting image would be the same.
+ for (_i = 0; _i < indexedFrame.length; _i++) {
+ if (indexedFrame[_i] === prevIndexedFrame[_i]) {
+ indexedFrame[_i] = transparentIndex;
+ }
+ } // Write frame into the encoder
+
+ gif.writeFrame(indexedFrame, this.width, this.height, {
+ delay: gifFrameDelay,
+ transparent: true,
+ transparentIndex: transparentIndex,
+ dispose: 1
+ });
+ }
+ prevIndexedFrame = originalIndexedFrame;
+ if (!silent) {
+ p.html('Rendered frame ' + i.toString() + ' out of ' + nFrames.toString());
+ } // this just makes the process asynchronous, preventing
+ // that the encoding locks up the browser
+
+ _context.next = 68;
+ return new Promise(function (resolve) {
+ return setTimeout(resolve, 0);
+ });
+ case 68:
+ i++;
+ _context.next = 60;
+ break;
+ case 71:
+ gif.finish();
+ // Get a direct typed array view into the buffer to avoid copying it
+ buffer = gif.bytesView();
+ extension = 'gif';
+ blob = new Blob([buffer], {
+ type: 'image/gif'
+ });
+ frames = [
+ ];
+ this._recording = false;
+ this.loop();
+ if (!silent) {
+ p.html('Done. Downloading your gif!🌸');
+ if (notificationDuration > 0) setTimeout(function () {
+ return p.remove();
+ }, notificationDuration * 1000);
+ }
+ _main.default.prototype.downloadFile(blob, fileName, extension);
+ case 80:
+ case 'end':
+ return _context.stop();
+ }
+ }
+ }, _callee, this);
+ }));
+ return function (_x, _x2) {
+ return _ref.apply(this, arguments);
+ };
+ }();
+ function _flipPixels(pixels, width, height) {
+ // extracting the pixels using readPixels returns
+ // an upside down image. we have to flip it back
+ // first. this solution is proposed by gman on
+ // this stack overflow answer:
+ // https://stackoverflow.com/questions/41969562/how-can-i-flip-the-result-of-webglrenderingcontext-readpixels
+ var halfHeight = parseInt(height / 2);
+ var bytesPerRow = width * 4;
+ // make a temp buffer to hold one row
+ var temp = new Uint8Array(width * 4);
+ for (var y = 0; y < halfHeight; ++y) {
+ var topOffset = y * bytesPerRow;
+ var bottomOffset = (height - y - 1) * bytesPerRow;
+ // make copy of a row on the top half
+ temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
+ // copy a row from the bottom half to the top
+ pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
+ // copy the copy of the top half row to the bottom half
+ pixels.set(temp, bottomOffset);
+ }
+ return pixels;
+ }
+ function _generateGlobalPalette(frames) {
+ // make an array the size of every possible color in every possible frame
+ // that is: width * height * frames.
+ var allColors = new Uint8Array(frames.length * frames[0].length);
+ // put every frame one after the other in sequence.
+ // this array will hold absolutely every pixel from the animation.
+ // the set function on the Uint8Array works super fast tho!
+ for (var f = 0; f < frames.length; f++) {
+ allColors.set(frames[f], f * frames[0].length);
+ } // quantize this massive array into 256 colors and return it!
+
+ var colorPalette = (0, _gifenc.quantize) (allColors, 256, {
+ format: 'rgba4444',
+ oneBitAlpha: true
+ });
+ // when generating the palette, we have to leave space for 1 of the
+ // indices to be a random color that does not appear anywhere in our
+ // animation to use for transparency purposes. So, if the palette is full
+ // (has 256 colors), we overwrite the last one with a random, fully transparent
+ // color. Otherwise, we just push a new color into the palette the same way.
+ // this guarantees that when using the transparency index, there are no matches
+ // between some colors of the animation and the "holes" we want to dig on them,
+ // which would cause pieces of some frames to be transparent and thus look glitchy.
+ if (colorPalette.length === 256) {
+ colorPalette[colorPalette.length - 1] = [
+ Math.random() * 255,
+ Math.random() * 255,
+ Math.random() * 255,
+ 0
+ ];
+ } else {
+ colorPalette.push([Math.random() * 255,
+ Math.random() * 255,
+ Math.random() * 255,
+ 0]);
+ }
+ return colorPalette;
+ } /**
+ * Helper function for loading GIF-based images
+ */
+
+ function _createGif(arrayBuffer, pImg, successCallback, failureCallback, finishCallback) {
+ var gifReader = new _omggif.default.GifReader(arrayBuffer);
+ pImg.width = pImg.canvas.width = gifReader.width;
+ pImg.height = pImg.canvas.height = gifReader.height;
+ var frames = [
+ ];
+ var numFrames = gifReader.numFrames();
+ var framePixels = new Uint8ClampedArray(pImg.width * pImg.height * 4);
+ var loadGIFFrameIntoImage = function loadGIFFrameIntoImage(frameNum, gifReader) {
+ try {
+ gifReader.decodeAndBlitFrameRGBA(frameNum, framePixels);
+ } catch (e) {
+ _main.default._friendlyFileLoadError(8, pImg.src);
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ } else {
+ console.error(e);
+ }
+ }
+ };
+ for (var j = 0; j < numFrames; j++) {
+ var frameInfo = gifReader.frameInfo(j);
+ var prevFrameData = pImg.drawingContext.getImageData(0, 0, pImg.width, pImg.height);
+ framePixels = prevFrameData.data.slice();
+ loadGIFFrameIntoImage(j, gifReader);
+ var imageData = new ImageData(framePixels, pImg.width, pImg.height);
+ pImg.drawingContext.putImageData(imageData, 0, 0);
+ var frameDelay = frameInfo.delay;
+ // To maintain the default of 10FPS when frameInfo.delay equals to 0
+ if (frameDelay === 0) {
+ frameDelay = 10;
+ }
+ frames.push({
+ image: pImg.drawingContext.getImageData(0, 0, pImg.width, pImg.height),
+ delay: frameDelay * 10 //GIF stores delay in one-hundredth of a second, shift to ms
+ });
+ // Some GIFs are encoded so that they expect the previous frame
+ // to be under the current frame. This can occur at a sub-frame level
+ //
+ // Values : 0 - No disposal specified. The decoder is
+ // not required to take any action.
+ // 1 - Do not dispose. The graphic is to be left
+ // in place.
+ // 2 - Restore to background color. The area used by the
+ // graphic must be restored to the background color.
+ // 3 - Restore to previous. The decoder is required to
+ // restore the area overwritten by the graphic with
+ // what was there prior to rendering the graphic.
+ // 4-7 - To be defined.
+ if (frameInfo.disposal === 2) {
+ // Restore background color
+ pImg.drawingContext.clearRect(frameInfo.x, frameInfo.y, frameInfo.width, frameInfo.height);
+ } else if (frameInfo.disposal === 3) {
+ // Restore previous
+ pImg.drawingContext.putImageData(prevFrameData, 0, 0, frameInfo.x, frameInfo.y, frameInfo.width, frameInfo.height);
+ }
+ } //Uses Netscape block encoding
+ //to repeat forever, this will be 0
+ //to repeat just once, this will be null
+ //to repeat N times (1
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the circle.
+ * let c = frameCount % 255;
+ * fill(c);
+ *
+ * // Display the circle.
+ * circle(50, 50, 25);
+ * }
+ *
+ * // Save a 5-second gif when the user presses the 's' key.
+ * // Wait 1 second after the key press before recording.
+ * function keyPressed() {
+ * if (key === 's') {
+ * saveGif('mySketch', 5, { delay: 1 });
+ * }
+ * }
+ *
+ *
+ *
+ * The fourth and fifth parameters, `dw` and `dh`, are optional. They set the
+ * the width and height to draw the destination image. By default, `image()`
+ * draws the full source image at its original size.
+ *
+ * The sixth and seventh parameters, `sx` and `sy`, are also optional.
+ * These coordinates define the top left corner of a subsection to draw from
+ * the source image.
+ *
+ * The eighth and ninth parameters, `sw` and `sh`, are also optional.
+ * They define the width and height of a subsection to draw from the source
+ * image. By default, `image()` draws the full subsection that begins at
+ * `(sx, sy)` and extends to the edges of the source image.
+ *
+ * The ninth parameter, `fit`, is also optional. It enables a subsection of
+ * the source image to be drawn without affecting its aspect ratio. If
+ * `CONTAIN` is passed, the full subsection will appear within the destination
+ * rectangle. If `COVER` is passed, the subsection will completely cover the
+ * destination rectangle. This may have the effect of zooming into the
+ * subsection.
+ *
+ * The tenth and eleventh paremeters, `xAlign` and `yAlign`, are also
+ * optional. They determine how to align the fitted subsection. `xAlign` can
+ * be set to either `LEFT`, `RIGHT`, or `CENTER`. `yAlign` can be set to
+ * either `TOP`, `BOTTOM`, or `CENTER`. By default, both `xAlign` and `yAlign`
+ * are set to `CENTER`.
+ *
+ * @method image
+ * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img image to display.
+ * @param {Number} x x-coordinate of the top-left corner of the image.
+ * @param {Number} y y-coordinate of the top-left corner of the image.
+ * @param {Number} [width] width to draw the image.
+ * @param {Number} [height] height to draw the image.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Draw the image.
+ * image(img, 0, 0);
+ *
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Draw the image.
+ * image(img, 10, 10);
+ *
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Draw the image 50x50.
+ * image(img, 0, 0, 50, 50);
+ *
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Draw the center of the image.
+ * image(img, 25, 25, 50, 50, 25, 25, 50, 50);
+ *
+ * describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/moonwalk.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Draw the image and scale it to fit within the canvas.
+ * image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
+ *
+ * describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method image
+ * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img
+ * @param {Number} dx the x-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param {Number} dy the y-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param {Number} dWidth the width of the destination rectangle
+ * @param {Number} dHeight the height of the destination rectangle
+ * @param {Number} sx the x-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param {Number} sy the y-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param {Number} [sWidth] the width of the subsection of the
+ * source image to draw into the destination
+ * rectangle
+ * @param {Number} [sHeight] the height of the subsection of the
+ * source image to draw into the destination rectangle
+ * @param {Constant} [fit] either CONTAIN or COVER
+ * @param {Constant} [xAlign] either LEFT, RIGHT or CENTER default is CENTER
+ * @param {Constant} [yAlign] either TOP, BOTTOM or CENTER default is CENTER
+ */
+
+ _main.default.prototype.image = function (img, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight, fit, xAlign, yAlign) {
+ // set defaults per spec: https://goo.gl/3ykfOq
+ _main.default._validateParameters('image', arguments);
+ var defW = img.width;
+ var defH = img.height;
+ yAlign = yAlign || constants.CENTER;
+ xAlign = xAlign || constants.CENTER;
+ if (img.elt) {
+ defW = defW !== undefined ? defW : img.elt.width;
+ defH = defH !== undefined ? defH : img.elt.height;
+ }
+ if (img.elt && img.elt.videoWidth && !img.canvas) {
+ // video no canvas
+ defW = defW !== undefined ? defW : img.elt.videoWidth;
+ defH = defH !== undefined ? defH : img.elt.videoHeight;
+ }
+ var _dx = dx;
+ var _dy = dy;
+ var _dw = dWidth || defW;
+ var _dh = dHeight || defH;
+ var _sx = sx || 0;
+ var _sy = sy || 0;
+ var _sw = sWidth !== undefined ? sWidth : defW;
+ var _sh = sHeight !== undefined ? sHeight : defH;
+ _sw = _sAssign(_sw, defW);
+ _sh = _sAssign(_sh, defH);
+ // This part needs cleanup and unit tests
+ // see issues https://github.com/processing/p5.js/issues/1741
+ // and https://github.com/processing/p5.js/issues/1673
+ var pd = 1;
+ if (img.elt && !img.canvas && img.elt.style.width) {
+ //if img is video and img.elt.size() has been used and
+ //no width passed to image()
+ if (img.elt.videoWidth && !dWidth) {
+ pd = img.elt.videoWidth;
+ } else {
+ //all other cases
+ pd = img.elt.width;
+ }
+ pd /= parseInt(img.elt.style.width, 10);
+ }
+ _sx *= pd;
+ _sy *= pd;
+ _sh *= pd;
+ _sw *= pd;
+ var vals = _helpers.default.modeAdjust(_dx, _dy, _dw, _dh, this._renderer._imageMode);
+ vals = _imageFit(fit, xAlign, yAlign, vals.x, vals.y, vals.w, vals.h, _sx, _sy, _sw, _sh);
+ // tint the image if there is a tint
+ this._renderer.image(img, vals.sx, vals.sy, vals.sw, vals.sh, vals.dx, vals.dy, vals.dw, vals.dh);
+ };
+ /**
+ * Tints images using a color.
+ *
+ * The version of `tint()` with one parameter interprets it one of four ways.
+ * If the parameter is a number, it's interpreted as a grayscale value. If the
+ * parameter is a string, it's interpreted as a CSS color string. An array of
+ * `[R, G, B, A]` values or a p5.Color object can
+ * also be used to set the tint color.
+ *
+ * The version of `tint()` with two parameters uses the first one as a
+ * grayscale value and the second as an alpha value. For example, calling
+ * `tint(255, 128)` will make an image 50% transparent.
+ *
+ * The version of `tint()` with three parameters interprets them as RGB or
+ * HSB values, depending on the current
+ * colorMode(). The optional fourth parameter
+ * sets the alpha value. For example, `tint(255, 0, 0, 100)` will give images
+ * a red tint and make them transparent.
+ *
+ * @method tint
+ * @param {Number} v1 red or hue value.
+ * @param {Number} v2 green or saturation value.
+ * @param {Number} v3 blue or brightness.
+ * @param {Number} [alpha]
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * // Image is 50 x 50 pixels.
+ * img = loadImage('assets/laDefense50.png');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Draw the image and scale it to cover the canvas.
+ * image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
+ *
+ * describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Left image.
+ * image(img, 0, 0);
+ *
+ * // Right image.
+ * // Tint with a CSS color string.
+ * tint('red');
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Left image.
+ * image(img, 0, 0);
+ *
+ * // Right image.
+ * // Tint with RGB values.
+ * tint(255, 0, 0);
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Left.
+ * image(img, 0, 0);
+ *
+ * // Right.
+ * // Tint with RGBA values.
+ * tint(255, 0, 0, 100);
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method tint
+ * @param {String} value CSS color string.
+ */
+ /**
+ * @method tint
+ * @param {Number} gray grayscale value.
+ * @param {Number} [alpha]
+ */
+ /**
+ * @method tint
+ * @param {Number[]} values array containing the red, green, blue &
+ * alpha components of the color.
+ */
+ /**
+ * @method tint
+ * @param {p5.Color} color the tint color
+ */
+ _main.default.prototype.tint = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('tint', args);
+ var c = this.color.apply(this, args);
+ this._renderer._tint = c.levels;
+ };
+ /**
+ * Removes the current tint set by tint().
+ *
+ * `noTint()` restores images to their original colors.
+ *
+ * @method noTint
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Left.
+ * image(img, 0, 0);
+ *
+ * // Right.
+ * // Tint with grayscale and alpha values.
+ * tint(255, 180);
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noTint = function () {
+ this._renderer._tint = null;
+ };
+ /**
+ * Apply the current tint color to the input image, return the resulting
+ * canvas.
+ *
+ * @private
+ * @param {p5.Image} The image to be tinted
+ * @return {canvas} The resulting tinted canvas
+ */
+ _main.default.prototype._getTintedImageCanvas = _main.default.Renderer2D.prototype._getTintedImageCanvas;
+ /**
+ * Changes the location from which images are drawn when
+ * image() is called.
+ *
+ * By default, the first
+ * two parameters of image() are the x- and
+ * y-coordinates of the image's upper-left corner. The next parameters are
+ * its width and height. This is the same as calling `imageMode(CORNER)`.
+ *
+ * `imageMode(CORNERS)` also uses the first two parameters of
+ * image() as the x- and y-coordinates of the image's
+ * top-left corner. The third and fourth parameters are the coordinates of its
+ * bottom-right corner.
+ *
+ * `imageMode(CENTER)` uses the first two parameters of
+ * image() as the x- and y-coordinates of the image's
+ * center. The next parameters are its width and height.
+ *
+ * @method imageMode
+ * @param {Constant} mode either CORNER, CORNERS, or CENTER.
+ *
+ * @example
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Left.
+ * // Tint with a CSS color string.
+ * tint('red');
+ * image(img, 0, 0);
+ *
+ * // Right.
+ * // Remove the tint.
+ * noTint();
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use CORNER mode.
+ * imageMode(CORNER);
+ *
+ * // Display the image.
+ * image(img, 10, 10, 50, 50);
+ *
+ * describe('A square image of a brick wall is drawn at the top left of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use CORNERS mode.
+ * imageMode(CORNERS);
+ *
+ * // Display the image.
+ * image(img, 10, 10, 90, 40);
+ *
+ * describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.imageMode = function (m) {
+ _main.default._validateParameters('imageMode', arguments);
+ if (m === constants.CORNER || m === constants.CORNERS || m === constants.CENTER) {
+ this._renderer._imageMode = m;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/friendly_errors/fes_core': 294,
+ '../core/friendly_errors/file_errors': 295,
+ '../core/friendly_errors/validate_params': 298,
+ '../core/helpers': 299,
+ '../core/main': 303,
+ 'core-js/modules/es.array.copy-within': 171,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.promise': 206,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint8-array': 257,
+ 'core-js/modules/es.typed-array.uint8-clamped-array': 258,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261,
+ 'gifenc': 268,
+ 'omggif': 275,
+ 'regenerator-runtime/runtime': 279
+ }
+ ],
+ 327: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _filters = _interopRequireDefault(_dereq_('./filters'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Image
+ * @submodule Image
+ * @requires core
+ * @requires constants
+ * @requires filters
+ */
+ /**
+ * This module defines the p5.Image class and P5 methods for
+ * drawing images to the main display canvas.
+ */
+ /*
+ * Class methods
+ */
+ /**
+ * A class to describe an image.
+ *
+ * Images are rectangular grids of pixels that can be displayed and modified.
+ *
+ * Existing images can be loaded by calling
+ * loadImage(). Blank images can be created by
+ * calling createImage(). `p5.Image` objects
+ * have methods for common tasks such as applying filters and modifying
+ * pixel values.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use CENTER mode.
+ * imageMode(CENTER);
+ *
+ * // Display the image.
+ * image(img, 50, 50, 80, 80);
+ *
+ * describe('A square image of a brick wall is drawn on a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('An image of a brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the GRAY filter.
+ * img.filter(GRAY);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A grayscale image of a brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ * @class p5.Image
+ * @constructor
+ * @param {Number} width
+ * @param {Number} height
+ */
+
+ _main.default.Image = /*#__PURE__*/ function () {
+ function _class(width, height) {
+ _classCallCheck(this, _class);
+ /**
+ * The image's width in pixels.
+ *
+ * @type {Number}
+ * @property {Number} width
+ * @name width
+ * @readOnly
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * // Set the pixels to black.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ this.width = width;
+ /**
+ * The image's height in pixels.
+ *
+ * @type {Number}
+ * @property height
+ * @name height
+ * @readOnly
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Calculate the center coordinates.
+ * let x = img.width / 2;
+ * let y = img.height / 2;
+ *
+ * // Draw a circle at the image's center.
+ * circle(x, y, 20);
+ *
+ * describe('An image of a mountain landscape with a white circle drawn in the middle.');
+ * }
+ *
+ *
+ *
+ */
+ this.height = height;
+ this.canvas = document.createElement('canvas');
+ this.canvas.width = this.width;
+ this.canvas.height = this.height;
+ this.drawingContext = this.canvas.getContext('2d');
+ this._pixelsState = this;
+ this._pixelDensity = 1;
+ //Object for working with GIFs, defaults to null
+ this.gifProperties = null;
+ //For WebGL Texturing only: used to determine whether to reupload texture to GPU
+ this._modified = false;
+ /**
+ * An array containing the color of each pixel in the image.
+ *
+ * Colors are stored as numbers representing red, green, blue, and alpha
+ * (RGBA) values. `img.pixels` is a one-dimensional array for performance
+ * reasons.
+ *
+ * Each pixel occupies four elements in the pixels array, one for each
+ * RGBA value. For example, the pixel at coordinates (0, 0) stores its
+ * RGBA values at `img.pixels[0]`, `img.pixels[1]`, `img.pixels[2]`,
+ * and `img.pixels[3]`, respectively. The next pixel at coordinates (1, 0)
+ * stores its RGBA values at `img.pixels[4]`, `img.pixels[5]`,
+ * `img.pixels[6]`, and `img.pixels[7]`. And so on. The `img.pixels` array
+ * for a 100×100 p5.Image object has
+ * 100 × 100 × 4 = 40,000 elements.
+ *
+ * Accessing the RGBA values for a pixel in the image requires a little
+ * math as shown in the examples below. The
+ * img.loadPixels()
+ * method must be called before accessing the `img.pixels` array. The
+ * img.updatePixels() method must be
+ * called after any changes are made.
+ *
+ * @property {Number[]} pixels
+ * @name pixels
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Calculate the center coordinates.
+ * let x = img.width / 2;
+ * let y = img.height / 2;
+ *
+ * // Draw a circle at the image's center.
+ * circle(x, y, 20);
+ *
+ * describe('An image of a mountain landscape with a white circle drawn in the middle.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * for (let i = 0; i < img.pixels.length; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ this.pixels = [
+ ];
+ } /**
+ * Gets or sets the pixel density for high pixel density displays.
+ *
+ * By default, the density will be set to 1.
+ *
+ * Call this method with no arguments to get the default density, or pass
+ * in a number to set the density. If a non-positive number is provided,
+ * it defaults to 1.
+ *
+ * @method pixelDensity
+ * @param {Number} [density] A scaling factor for the number of pixels per
+ * side
+ * @returns {Number} The current density if called without arguments, or the instance for chaining if setting density.
+ */
+
+ _createClass(_class, [
+ {
+ key: 'pixelDensity',
+ value: function pixelDensity(density) {
+ if (typeof density !== 'undefined') {
+ // Setter: set the density and handle resize
+ if (density <= 0) {
+ var errorObj = {
+ type: 'INVALID_VALUE',
+ format: {
+ types: [
+ 'Number'
+ ]
+ },
+ position: 1
+ };
+ _main.default._friendlyParamError(errorObj, 'pixelDensity');
+ // Default to 1 in case of an invalid value
+ density = 1;
+ }
+ this._pixelDensity = density;
+ // Adjust canvas dimensions based on pixel density
+ this.width /= density;
+ this.height /= density;
+ return this; // Return the image instance for chaining if needed
+ } else {
+ // Getter: return the default density
+ return this._pixelDensity;
+ }
+ } /**
+ * Helper function for animating GIF-based images with time
+ */
+
+ },
+ {
+ key: '_animateGif',
+ value: function _animateGif(pInst) {
+ var props = this.gifProperties;
+ var curTime = pInst._lastRealFrameTime || window.performance.now();
+ if (props.lastChangeTime === 0) {
+ props.lastChangeTime = curTime;
+ }
+ if (props.playing) {
+ props.timeDisplayed = curTime - props.lastChangeTime;
+ var curDelay = props.frames[props.displayIndex].delay;
+ if (props.timeDisplayed >= curDelay) {
+ //GIF is bound to 'realtime' so can skip frames
+ var skips = Math.floor(props.timeDisplayed / curDelay);
+ props.timeDisplayed = 0;
+ props.lastChangeTime = curTime;
+ props.displayIndex += skips;
+ props.loopCount = Math.floor(props.displayIndex / props.numFrames);
+ if (props.loopLimit !== null && props.loopCount >= props.loopLimit) {
+ props.playing = false;
+ } else {
+ var ind = props.displayIndex % props.numFrames;
+ this.drawingContext.putImageData(props.frames[ind].image, 0, 0);
+ props.displayIndex = ind;
+ this.setModified(true);
+ }
+ }
+ }
+ } /**
+ * Helper fxn for sharing pixel methods
+ */
+
+ },
+ {
+ key: '_setProperty',
+ value: function _setProperty(prop, value) {
+ this[prop] = value;
+ this.setModified(true);
+ } /**
+ * Loads the current value of each pixel in the image into the `img.pixels`
+ * array.
+ *
+ * `img.loadPixels()` must be called before reading or modifying pixel
+ * values.
+ *
+ * @method loadPixels
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * // Set the pixels to red.
+ * for (let i = 0; i < img.pixels.length; i += 4) {
+ * // Red.
+ * img.pixels[i] = 255;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A red square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * // Set the pixels to black.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'loadPixels',
+ value: function loadPixels() {
+ _main.default.Renderer2D.prototype.loadPixels.call(this);
+ this.setModified(true);
+ } /**
+ * Updates the canvas with the RGBA values in the
+ * img.pixels array.
+ *
+ * `img.updatePixels()` only needs to be called after changing values in
+ * the img.pixels array. Such changes can be
+ * made directly after calling
+ * img.loadPixels() or by calling
+ * img.set().
+ *
+ * The optional parameters `x`, `y`, `width`, and `height` define a
+ * subsection of the image to update. Doing so can improve performance in
+ * some cases.
+ *
+ * If the image was loaded from a GIF, then calling `img.updatePixels()`
+ * will update the pixels in current frame.
+ *
+ * @method updatePixels
+ * @param {Integer} x x-coordinate of the upper-left corner
+ * of the subsection to update.
+ * @param {Integer} y y-coordinate of the upper-left corner
+ * of the subsection to update.
+ * @param {Integer} w width of the subsection to update.
+ * @param {Integer} h height of the subsection to update.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * for (let i = 0; i < img.pixels.length; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * // Set the pixels to black.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method updatePixels
+ */
+
+ },
+ {
+ key: 'updatePixels',
+ value: function updatePixels(x, y, w, h) {
+ _main.default.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
+ this.setModified(true);
+ } /**
+ * Gets a pixel or a region of pixels from the image.
+ *
+ * `img.get()` is easy to use but it's not as fast as
+ * img.pixels. Use
+ * img.pixels to read many pixel values.
+ *
+ * The version of `img.get()` with no parameters returns the entire image.
+ *
+ * The version of `img.get()` with two parameters, as in `img.get(10, 20)`,
+ * interprets them as coordinates. It returns an array with the
+ * `[R, G, B, A]` values of the pixel at the given point.
+ *
+ * The version of `img.get()` with four parameters, as in
+ * `img,get(10, 20, 50, 90)`, interprets them as
+ * coordinates and dimensions. The first two parameters are the coordinates
+ * of the upper-left corner of the subsection. The last two parameters are
+ * the width and height of the subsection. It returns a subsection of the
+ * canvas in a new p5.Image object.
+ *
+ * Use `img.get()` instead of get() to work directly
+ * with images.
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number} w width of the subsection to be returned.
+ * @param {Number} h height of the subsection to be returned.
+ * @return {p5.Image} subsection as a p5.Image object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * // Set the pixels to black.
+ * for (let i = 0; i < img.pixels.length; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Copy the image.
+ * let img2 = get();
+ *
+ * // Display the copied image on the right.
+ * image(img2, 50, 0);
+ *
+ * describe('Two identical mountain landscapes shown side-by-side.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Get a pixel's color.
+ * let c = img.get(50, 90);
+ *
+ * // Style the square using the pixel's color.
+ * fill(c);
+ * noStroke();
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ *
+ * describe('A mountain landscape with an olive green square in its center.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method get
+ * @return {p5.Image} whole p5.Image
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of the pixel at (x, y) in array format `[R, G, B, A]`.
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(x, y, w, h) {
+ _main.default._validateParameters('p5.Image.get', arguments);
+ return _main.default.Renderer2D.prototype.get.apply(this, arguments);
+ }
+ },
+ {
+ key: '_getPixel',
+ value: function _getPixel() {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ return _main.default.Renderer2D.prototype._getPixel.apply(this, args);
+ } /**
+ * Sets the color of one or more pixels within an image.
+ *
+ * `img.set()` is easy to use but it's not as fast as
+ * img.pixels. Use
+ * img.pixels to set many pixel values.
+ *
+ * `img.set()` interprets the first two parameters as x- and y-coordinates. It
+ * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
+ * array, a p5.Color object, or another
+ * p5.Image object.
+ *
+ * img.updatePixels() must be called
+ * after using `img.set()` for changes to appear.
+ *
+ * @method set
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number|Number[]|Object} a grayscale value | pixel array |
+ * p5.Color object |
+ * p5.Image to copy.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Copy half of the image.
+ * let img2 = img.get(0, 0, img.width / 2, img.height / 2);
+ *
+ * // Display half of the image.
+ * image(img2, 50, 50);
+ *
+ * describe('A mountain landscape drawn on top of another mountain landscape.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(100, 100);
+ *
+ * // Set four pixels to black.
+ * img.set(30, 20, 0);
+ * img.set(85, 20, 0);
+ * img.set(85, 75, 0);
+ * img.set(30, 75, 0);
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(100, 100);
+ *
+ * // Create a p5.Color object.
+ * let black = color(0);
+ *
+ * // Set four pixels to black.
+ * img.set(30, 20, black);
+ * img.set(85, 20, black);
+ * img.set(85, 75, black);
+ * img.set(30, 75, black);
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Draw a color gradient.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * let c = map(x, 0, img.width, 0, 255);
+ * img.set(x, y, c);
+ * }
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(x, y, imgOrCol) {
+ _main.default.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
+ this.setModified(true);
+ } /**
+ * Resizes the image to a given width and height.
+ *
+ * The image's original aspect ratio can be kept by passing 0 for either
+ * `width` or `height`. For example, calling `img.resize(50, 0)` on an image
+ * that was 500 × 300 pixels will resize it to 50 × 30 pixels.
+ *
+ * @method resize
+ * @param {Number} width resized image width.
+ * @param {Number} height resized image height.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Image object.
+ * let img2 = createImage(100, 100);
+ *
+ * // Set the blank image's pixels using the landscape.
+ * img2.set(0, 0, img);
+ *
+ * // Display the second image.
+ * image(img2, 0, 0);
+ *
+ * describe('An image of a mountain landscape.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Resize the image.
+ * img.resize(50, 100);
+ *
+ * // Display the resized image.
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Resize the image, keeping the aspect ratio.
+ * img.resize(0, 30);
+ *
+ * // Display the resized image.
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'resize',
+ value: function resize(width, height) {
+ // Copy contents to a temporary canvas, resize the original
+ // and then copy back.
+ //
+ // There is a faster approach that involves just one copy and swapping the
+ // this.canvas reference. We could switch to that approach if (as i think
+ // is the case) there an expectation that the user would not hold a
+ // reference to the backing canvas of a p5.Image. But since we do not
+ // enforce that at the moment, I am leaving in the slower, but safer
+ // implementation.
+ // auto-resize
+ if (width === 0 && height === 0) {
+ width = this.canvas.width;
+ height = this.canvas.height;
+ } else if (width === 0) {
+ width = this.canvas.width * height / this.canvas.height;
+ } else if (height === 0) {
+ height = this.canvas.height * width / this.canvas.width;
+ }
+ width = Math.floor(width);
+ height = Math.floor(height);
+ var tempCanvas = document.createElement('canvas');
+ tempCanvas.width = width;
+ tempCanvas.height = height;
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ //adapted from github.com/LinusU/resize-image-data
+ var nearestNeighbor = function nearestNeighbor(src, dst) {
+ var pos = 0;
+ for (var y = 0; y < dst.height; y++) {
+ for (var x = 0; x < dst.width; x++) {
+ var srcX = Math.floor(x * src.width / dst.width);
+ var srcY = Math.floor(y * src.height / dst.height);
+ var srcPos = (srcY * src.width + srcX) * 4;
+ dst.data[pos++] = src.data[srcPos++]; // R
+ dst.data[pos++] = src.data[srcPos++]; // G
+ dst.data[pos++] = src.data[srcPos++]; // B
+ dst.data[pos++] = src.data[srcPos++]; // A
+ }
+ }
+ };
+ for (var i = 0; i < props.numFrames; i++) {
+ var resizedImageData = this.drawingContext.createImageData(width, height);
+ nearestNeighbor(props.frames[i].image, resizedImageData);
+ props.frames[i].image = resizedImageData;
+ }
+ }
+ tempCanvas.getContext('2d').drawImage(this.canvas, 0, 0, this.canvas.width, this.canvas.height, 0, 0, tempCanvas.width, tempCanvas.height);
+ // Resize the original canvas, which will clear its contents
+ this.canvas.width = this.width = width;
+ this.canvas.height = this.height = height;
+ //Copy the image back
+ this.drawingContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, width, height);
+ if (this.pixels.length > 0) {
+ this.loadPixels();
+ }
+ this.setModified(true);
+ } /**
+ * Copies pixels from a source image to this image.
+ *
+ * The first parameter, `srcImage`, is an optional
+ * p5.Image object to copy. If a source image isn't
+ * passed, then `img.copy()` can copy a region of this image to another
+ * region.
+ *
+ * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
+ * to copy from the source image. `(sx, sy)` is the top-left corner of the
+ * region. `sw` and `sh` are the region's width and height.
+ *
+ * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
+ * of this image to copy into. `(dx, dy)` is the top-left corner of the
+ * region. `dw` and `dh` are the region's width and height.
+ *
+ * Calling `img.copy()` will scale pixels from the source region if it isn't
+ * the same size as the destination region.
+ *
+ * @method copy
+ * @param {p5.Image|p5.Element} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Resize the image, keeping the aspect ratio.
+ * img.resize(60, 0);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Copy one region of the image to another.
+ * img.copy(7, 22, 10, 10, 35, 25, 50, 50);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Outline the copied region.
+ * stroke(255);
+ * noFill();
+ * square(7, 22, 10);
+ *
+ * describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method copy
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default.prototype.copy.apply(this, args);
+ } /**
+ * Masks part of the image with another.
+ *
+ * `img.mask()` uses another p5.Image object's
+ * alpha channel as the alpha channel for this image. Masks are cumulative
+ * and can't be removed once applied. If the mask has a different
+ * pixel density from this image, the mask will be scaled.
+ *
+ * @method mask
+ * @param {p5.Image} srcImage source image.
+ *
+ * @example
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * // Load the images.
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Calculate the center of the bricks image.
+ * let x = bricks.width / 2;
+ * let y = bricks.height / 2;
+ *
+ * // Copy the bricks to the mountains image.
+ * mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+ *
+ * // Display the mountains image.
+ * image(mountains, 0, 0);
+ *
+ * describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');
+ * }
+ *
+ *
+ *
+ */
+ // TODO: - Accept an array of alpha values.
+
+ },
+ {
+ key: 'mask',
+ value: function mask(p5Image) {
+ if (p5Image === undefined) {
+ p5Image = this;
+ }
+ var currBlend = this.drawingContext.globalCompositeOperation;
+ var imgScaleFactor = this._pixelDensity;
+ var maskScaleFactor = 1;
+ if (p5Image instanceof _main.default.Renderer) {
+ maskScaleFactor = p5Image._pInst._pixelDensity;
+ }
+ var copyArgs = [
+ p5Image,
+ 0,
+ 0,
+ maskScaleFactor * p5Image.width,
+ maskScaleFactor * p5Image.height,
+ 0,
+ 0,
+ imgScaleFactor * this.width,
+ imgScaleFactor * this.height
+ ];
+ this.drawingContext.globalCompositeOperation = 'destination-in';
+ if (this.gifProperties) {
+ for (var i = 0; i < this.gifProperties.frames.length; i++) {
+ this.drawingContext.putImageData(this.gifProperties.frames[i].image, 0, 0);
+ this.copy.apply(this, copyArgs);
+ this.gifProperties.frames[i].image = this.drawingContext.getImageData(0, 0, imgScaleFactor * this.width, imgScaleFactor * this.height);
+ }
+ this.drawingContext.putImageData(this.gifProperties.frames[this.gifProperties.displayIndex].image, 0, 0);
+ } else {
+ this.copy.apply(this, copyArgs);
+ }
+ this.drawingContext.globalCompositeOperation = currBlend;
+ this.setModified(true);
+ } /**
+ * Applies an image filter to the image.
+ *
+ * The preset options are:
+ *
+ * `INVERT`
+ * Inverts the colors in the image. No parameter is used.
+ *
+ * `GRAY`
+ * Converts the image to grayscale. No parameter is used.
+ *
+ * `THRESHOLD`
+ * Converts the image to black and white. Pixels with a grayscale value
+ * above a given threshold are converted to white. The rest are converted to
+ * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+ * value is specified, 0.5 is used.
+ *
+ * `OPAQUE`
+ * Sets the alpha channel to be entirely opaque. No parameter is used.
+ *
+ * `POSTERIZE`
+ * Limits the number of colors in the image. Each color channel is limited to
+ * the number of colors specified. Values between 2 and 255 are valid, but
+ * results are most noticeable with lower values. The default value is 4.
+ *
+ * `BLUR`
+ * Blurs the image. The level of blurring is specified by a blur radius. Larger
+ * values increase the blur. The default value is 4. A gaussian blur is used
+ * in `P2D` mode. A box blur is used in `WEBGL` mode.
+ *
+ * `ERODE`
+ * Reduces the light areas. No parameter is used.
+ *
+ * `DILATE`
+ * Increases the light areas. No parameter is used.
+ *
+ * @method filter
+ * @param {Constant} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
+ * POSTERIZE, ERODE, DILATE or BLUR.
+ * @param {Number} [filterParam] parameter unique to each filter.
+ *
+ * @example
+ *
+ * let photo;
+ * let maskImage;
+ *
+ * // Load the images.
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * maskImage = loadImage('assets/mask2.png');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the mask.
+ * photo.mask(maskImage);
+ *
+ * // Display the image.
+ * image(photo, 0, 0);
+ *
+ * describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the INVERT filter.
+ * img.filter(INVERT);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A blue brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the GRAY filter.
+ * img.filter(GRAY);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A brick wall drawn in grayscale.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the THRESHOLD filter.
+ * img.filter(THRESHOLD);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A brick wall drawn in black and white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the OPAQUE filter.
+ * img.filter(OPAQUE);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the POSTERIZE filter.
+ * img.filter(POSTERIZE, 3);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('An image of a red brick wall drawn with a limited color palette.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the BLUR filter.
+ * img.filter(BLUR, 3);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the DILATE filter.
+ * img.filter(DILATE);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall with bright lines between each brick.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'filter',
+ value: function filter(operation, value) {
+ _filters.default.apply(this.canvas, _filters.default[operation], value);
+ this.setModified(true);
+ } /**
+ * Copies a region of pixels from another image into this one.
+ *
+ * The first parameter, `srcImage`, is the
+ * p5.Image object to blend.
+ *
+ * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
+ * to blend from the source image. `(sx, sy)` is the top-left corner of the
+ * region. `sw` and `sh` are the regions width and height.
+ *
+ * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
+ * of the canvas to blend into. `(dx, dy)` is the top-left corner of the
+ * region. `dw` and `dh` are the regions width and height.
+ *
+ * The tenth parameter, `blendMode`, sets the effect used to blend the images'
+ * colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
+ * `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
+ * `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`.
+ *
+ * @method blend
+ * @param {p5.Image} srcImage source image
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ * @param {Constant} blendMode the blend mode. either
+ * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ *
+ * Available blend modes are: normal | multiply | screen | overlay |
+ * darken | lighten | color-dodge | color-burn | hard-light |
+ * soft-light | difference | exclusion | hue | saturation |
+ * color | luminosity
+ *
+ * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the ERODE filter.
+ * img.filter(ERODE);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall with faint lines between each brick.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * // Load the images.
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Blend the bricks image into the mountains.
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ *
+ * // Display the mountains image.
+ * image(mountains, 0, 0);
+ *
+ * // Display the bricks image.
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * // Load the images.
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Blend the bricks image into the mountains.
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ *
+ * // Display the mountains image.
+ * image(mountains, 0, 0);
+ *
+ * // Display the bricks image.
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method blend
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ * @param {Constant} blendMode
+ */
+
+ },
+ {
+ key: 'blend',
+ value: function blend() {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('p5.Image.blend', arguments);
+ _main.default.prototype.blend.apply(this, args);
+ this.setModified(true);
+ } /**
+ * helper method for web GL mode to indicate that an image has been
+ * changed or unchanged since last upload. gl texture upload will
+ * set this value to false after uploading the texture.
+ * @method setModified
+ * @param {boolean} val sets whether or not the image has been
+ * modified.
+ * @private
+ */
+
+ },
+ {
+ key: 'setModified',
+ value: function setModified(val) {
+ this._modified = val; //enforce boolean?
+ } /**
+ * helper method for web GL mode to figure out if the image
+ * has been modified and might need to be re-uploaded to texture
+ * memory between frames.
+ * @method isModified
+ * @private
+ * @return {boolean} a boolean indicating whether or not the
+ * image has been updated or modified since last texture upload.
+ */
+
+ },
+ {
+ key: 'isModified',
+ value: function isModified() {
+ return this._modified;
+ } /**
+ * Saves the image to a file.
+ *
+ * By default, `img.save()` saves the image as a PNG image called
+ * `untitled.png`.
+ *
+ * The first parameter, `filename`, is optional. It's a string that sets the
+ * file's name. If a file extension is included, as in
+ * `img.save('drawing.png')`, then the image will be saved using that
+ * format.
+ *
+ * The second parameter, `extension`, is also optional. It sets the files format.
+ * Either `'png'` or `'jpg'` can be used. For example, `img.save('drawing', 'jpg')`
+ * saves the canvas to a file called `drawing.jpg`.
+ *
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ *
+ * The image will only be downloaded as an animated GIF if it was loaded
+ * from a GIF file. See saveGif() to create new
+ * GIFs.
+ *
+ * @method save
+ * @param {String} filename filename. Defaults to 'untitled'.
+ * @param {String} [extension] file extension, either 'png' or 'jpg'.
+ * Defaults to 'png'.
+ *
+ * @example
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * // Load the images.
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Blend the bricks image into the mountains.
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ *
+ * // Display the mountains image.
+ * image(mountains, 0, 0);
+ *
+ * // Display the bricks image.
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'save',
+ value: function save(filename, extension) {
+ if (this.gifProperties) {
+ _main.default.prototype.encodeAndDownloadGif(this, filename);
+ } else {
+ _main.default.prototype.saveCanvas(this.canvas, filename, extension);
+ }
+ } // GIF Section
+ /**
+ * Restarts an animated GIF at its first frame.
+ *
+ * @method reset
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('An image of a mountain landscape. The image is downloaded when the user presses the "s", "j", or "p" key.');
+ * }
+ *
+ * // Save the image with different options when the user presses a key.
+ * function keyPressed() {
+ * if (key === 's') {
+ * img.save();
+ * } else if (key === 'j') {
+ * img.save('rockies.jpg');
+ * } else if (key === 'p') {
+ * img.save('rockies', 'png');
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'reset',
+ value: function reset() {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ props.playing = true;
+ props.timeSinceStart = 0;
+ props.timeDisplayed = 0;
+ props.lastChangeTime = 0;
+ props.loopCount = 0;
+ props.displayIndex = 0;
+ this.drawingContext.putImageData(props.frames[0].image, 0, 0);
+ }
+ } /**
+ * Gets the index of the current frame in an animated GIF.
+ *
+ * @method getCurrentFrame
+ * @return {Number} index of the GIF's current frame.
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ *
+ * // Display the image.
+ * image(gif, 0, 0);
+ * }
+ *
+ * // Reset the GIF when the user presses the mouse.
+ * function mousePressed() {
+ * gif.reset();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getCurrentFrame',
+ value: function getCurrentFrame() {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ return props.displayIndex % props.numFrames;
+ }
+ } /**
+ * Sets the current frame in an animated GIF.
+ *
+ * @method setFrame
+ * @param {Number} index index of the frame to display.
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
+ * }
+ *
+ * function draw() {
+ * // Get the index of the current GIF frame.
+ * let index = gif.getCurrentFrame();
+ *
+ * // Display the image.
+ * image(gif, 0, 0);
+ *
+ * // Display the current frame.
+ * text(index, 10, 90);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setFrame',
+ value: function setFrame(index) {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ if (index < props.numFrames && index >= 0) {
+ props.timeDisplayed = 0;
+ props.lastChangeTime = 0;
+ props.displayIndex = index;
+ this.drawingContext.putImageData(props.frames[index].image, 0, 0);
+ } else {
+ console.log('Cannot set GIF to a frame number that is higher than total number of frames or below zero.');
+ }
+ }
+ } /**
+ * Returns the number of frames in an animated GIF.
+ *
+ * @method numFrames
+ * @return {Number} number of frames in the GIF.
+ *
+ * @example
+ *
+ * let gif;
+ * let frameSlider;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Get the index of the last frame.
+ * let maxFrame = gif.numFrames() - 1;
+ *
+ * // Create a slider to control which frame is drawn.
+ * frameSlider = createSlider(0, maxFrame);
+ * frameSlider.position(10, 80);
+ * frameSlider.size(80);
+ *
+ * describe('A cartoon eye looks around when a slider is moved.');
+ * }
+ *
+ * function draw() {
+ * // Get the slider's value.
+ * let index = frameSlider.value();
+ *
+ * // Set the GIF's frame.
+ * gif.setFrame(index);
+ *
+ * // Display the image.
+ * image(gif, 0, 0);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'numFrames',
+ value: function numFrames() {
+ if (this.gifProperties) {
+ return this.gifProperties.numFrames;
+ }
+ } /**
+ * Plays an animated GIF that was paused with
+ * img.pause().
+ *
+ * @method play
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
+ * }
+ *
+ * function draw() {
+ * // Display the image.
+ * image(gif, 0, 0);
+ *
+ * // Display the current state of playback.
+ * let total = gif.numFrames();
+ * let index = gif.getCurrentFrame();
+ * text(`${index} / ${total}`, 30, 90);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'play',
+ value: function play() {
+ if (this.gifProperties) {
+ this.gifProperties.playing = true;
+ }
+ } /**
+ * Pauses an animated GIF.
+ *
+ * The GIF can be resumed by calling
+ * img.play().
+ *
+ * @method pause
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ * }
+ *
+ * // Pause the GIF when the user presses the mouse.
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * // Play the GIF when the user releases the mouse.
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'pause',
+ value: function pause() {
+ if (this.gifProperties) {
+ this.gifProperties.playing = false;
+ }
+ } /**
+ * Changes the delay between frames in an animated GIF.
+ *
+ * The first parameter, `delay`, is the length of the delay in milliseconds.
+ *
+ * The second parameter, `index`, is optional. If provided, only the frame
+ * at `index` will have its delay modified. All other frames will keep
+ * their default delay.
+ *
+ * @method delay
+ * @param {Number} d delay in milliseconds between switching frames.
+ * @param {Number} [index] index of the frame that will have its delay modified.
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ *
+ * // Display the image.
+ * image(gif, 0, 0);
+ * }
+ *
+ * // Pause the GIF when the user presses the mouse.
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * // Play the GIF when the user presses the mouse.
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let gifFast;
+ * let gifSlow;
+ *
+ * // Load the images.
+ * function preload() {
+ * gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Resize the images.
+ * gifFast.resize(50, 50);
+ * gifSlow.resize(50, 50);
+ *
+ * // Set the delay lengths.
+ * gifFast.delay(10);
+ * gifSlow.delay(100);
+ *
+ * describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
+ * }
+ *
+ * function draw() {
+ * // Display the images.
+ * image(gifFast, 0, 0);
+ * image(gifSlow, 50, 0);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'delay',
+ value: function delay(d, index) {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ if (index < props.numFrames && index >= 0) {
+ props.frames[index].delay = d;
+ } else {
+ // change all frames
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = props.frames[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var frame = _step.value;
+ frame.delay = d;
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Image;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ './filters': 324,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 328: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.filter');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _filters = _interopRequireDefault(_dereq_('./filters'));
+ _dereq_('../color/p5.Color');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Image
+ * @submodule Pixels
+ * @for p5
+ * @requires core
+ */
+ /**
+ * An array containing the color of each pixel on the canvas.
+ *
+ * Colors are stored as numbers representing red, green, blue, and alpha
+ * (RGBA) values. `pixels` is a one-dimensional array for performance reasons.
+ *
+ * Each pixel occupies four elements in the `pixels` array, one for each RGBA
+ * value. For example, the pixel at coordinates (0, 0) stores its RGBA values
+ * at `pixels[0]`, `pixels[1]`, `pixels[2]`, and `pixels[3]`, respectively.
+ * The next pixel at coordinates (1, 0) stores its RGBA values at `pixels[4]`,
+ * `pixels[5]`, `pixels[6]`, and `pixels[7]`. And so on. The `pixels` array
+ * for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.
+ *
+ * Some displays use several smaller pixels to set the color at a single
+ * point. The pixelDensity() function returns
+ * the pixel density of the canvas. High density displays often have a
+ * pixelDensity() of 2. On such a display, the
+ * `pixels` array for a 100×100 canvas has 200 × 200 × 4 =
+ * 160,000 elements.
+ *
+ * Accessing the RGBA values for a point on the canvas requires a little math
+ * as shown below. The loadPixels() function
+ * must be called before accessing the `pixels` array. The
+ * updatePixels() function must be called
+ * after any changes are made.
+ *
+ * @property {Number[]} pixels
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Set the delay of frame 67.
+ * gif.delay(3000, 67);
+ *
+ * describe('An animated eye looking around. It pauses for three seconds while it looks down.');
+ * }
+ *
+ * function draw() {
+ * // Display the image.
+ * image(gif, 0, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Set the dot's coordinates.
+ * let x = 50;
+ * let y = 50;
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Set the pixel(s) at the center of the canvas black.
+ * for (let i = 0; i < d; i += 1) {
+ * for (let j = 0; j < d; j += 1) {
+ * let index = 4 * ((y * d + j) * width * d + (x * d + i));
+ * // Red.
+ * pixels[index] = 0;
+ * // Green.
+ * pixels[index + 1] = 0;
+ * // Blue.
+ * pixels[index + 2] = 0;
+ * // Alpha.
+ * pixels[index + 3] = 255;
+ * }
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('A black dot in the middle of a gray rectangle.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the halfway index in the pixels array.
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ *
+ * // Make the top half of the canvas red.
+ * for (let i = 0; i < halfImage; i += 4) {
+ * // Red.
+ * pixels[i] = 255;
+ * // Green.
+ * pixels[i + 1] = 0;
+ * // Blue.
+ * pixels[i + 2] = 0;
+ * // Alpha.
+ * pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('A red rectangle drawn above a gray rectangle.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.pixels = [
+ ];
+ /**
+ * Copies a region of pixels from one image to another.
+ *
+ * The first parameter, `srcImage`, is the
+ * p5.Image object to blend.
+ *
+ * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
+ * to blend from the source image. `(sx, sy)` is the top-left corner of the
+ * region. `sw` and `sh` are the regions width and height.
+ *
+ * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
+ * of the canvas to blend into. `(dx, dy)` is the top-left corner of the
+ * region. `dw` and `dh` are the regions width and height.
+ *
+ * The tenth parameter, `blendMode`, sets the effect used to blend the images'
+ * colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
+ * `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
+ * `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`
+ *
+ * @method blend
+ * @param {p5.Image} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ * @param {Constant} blendMode the blend mode. either
+ * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Color object.
+ * let pink = color(255, 102, 204);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the halfway index in the pixels array.
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ *
+ * // Make the top half of the canvas red.
+ * for (let i = 0; i < halfImage; i += 4) {
+ * pixels[i] = red(pink);
+ * pixels[i + 1] = green(pink);
+ * pixels[i + 2] = blue(pink);
+ * pixels[i + 3] = alpha(pink);
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('A pink rectangle drawn above a gray rectangle.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * // Load the images.
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the mountains as the background.
+ * background(img0);
+ *
+ * // Display the bricks.
+ * image(img1, 0, 0);
+ *
+ * // Display the bricks faded into the landscape.
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * // Load the images.
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the mountains as the background.
+ * background(img0);
+ *
+ * // Display the bricks.
+ * image(img1, 0, 0);
+ *
+ * // Display the bricks partially transparent.
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method blend
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ * @param {Constant} blendMode
+ */
+ _main.default.prototype.blend = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('blend', args);
+ if (this._renderer) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).blend.apply(_this$_renderer, args);
+ } else {
+ _main.default.Renderer2D.prototype.blend.apply(this, args);
+ }
+ };
+ /**
+ * Copies pixels from a source image to a region of the canvas.
+ *
+ * The first parameter, `srcImage`, is the
+ * p5.Image object to blend. The source image can be
+ * the canvas itself or a
+ * p5.Image object. `copy()` will scale pixels from
+ * the source region if it isn't the same size as the destination region.
+ *
+ * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
+ * to copy from the source image. `(sx, sy)` is the top-left corner of the
+ * region. `sw` and `sh` are the region's width and height.
+ *
+ * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
+ * of the canvas to copy into. `(dx, dy)` is the top-left corner of the
+ * region. `dw` and `dh` are the region's width and height.
+ *
+ * @method copy
+ * @param {p5.Image|p5.Element} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ *
+ * @example
+ *
+ * let img0;
+ * let img1;
+ *
+ * // Load the images.
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the mountains as the background.
+ * background(img0);
+ *
+ * // Display the bricks.
+ * image(img1, 0, 0);
+ *
+ * // Display the bricks washed out into the landscape.
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method copy
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ */
+ _main.default.prototype.copy = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('copy', args);
+ var srcImage,
+ sx,
+ sy,
+ sw,
+ sh,
+ dx,
+ dy,
+ dw,
+ dh;
+ if (args.length === 9) {
+ srcImage = args[0];
+ sx = args[1];
+ sy = args[2];
+ sw = args[3];
+ sh = args[4];
+ dx = args[5];
+ dy = args[6];
+ dw = args[7];
+ dh = args[8];
+ } else if (args.length === 8) {
+ srcImage = this;
+ sx = args[0];
+ sy = args[1];
+ sw = args[2];
+ sh = args[3];
+ dx = args[4];
+ dy = args[5];
+ dw = args[6];
+ dh = args[7];
+ } else {
+ throw new Error('Signature not supported');
+ }
+ _main.default.prototype._copyHelper(this, srcImage, sx, sy, sw, sh, dx, dy, dw, dh);
+ };
+ _main.default.prototype._copyHelper = function (dstImage, srcImage, sx, sy, sw, sh, dx, dy, dw, dh) {
+ var s = srcImage.canvas.width / srcImage.width;
+ // adjust coord system for 3D when renderer
+ // ie top-left = -width/2, -height/2
+ var sxMod = 0;
+ var syMod = 0;
+ if (srcImage._renderer && srcImage._renderer.isP3D) {
+ sxMod = srcImage.width / 2;
+ syMod = srcImage.height / 2;
+ }
+ if (dstImage._renderer && dstImage._renderer.isP3D) {
+ dstImage.push();
+ dstImage.resetMatrix();
+ dstImage.noLights();
+ dstImage.blendMode(dstImage.BLEND);
+ dstImage.imageMode(dstImage.CORNER);
+ _main.default.RendererGL.prototype.image.call(dstImage._renderer, srcImage, sx + sxMod, sy + syMod, sw, sh, dx, dy, dw, dh);
+ dstImage.pop();
+ } else {
+ dstImage.drawingContext.drawImage(srcImage.canvas, s * (sx + sxMod), s * (sy + syMod), s * sw, s * sh, dx, dy, dw, dh);
+ }
+ };
+ /**
+ * Applies an image filter to the canvas.
+ *
+ * The preset options are:
+ *
+ * `INVERT`
+ * Inverts the colors in the image. No parameter is used.
+ *
+ * `GRAY`
+ * Converts the image to grayscale. No parameter is used.
+ *
+ * `THRESHOLD`
+ * Converts the image to black and white. Pixels with a grayscale value
+ * above a given threshold are converted to white. The rest are converted to
+ * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+ * value is specified, 0.5 is used.
+ *
+ * `OPAQUE`
+ * Sets the alpha channel to entirely opaque. No parameter is used.
+ *
+ * `POSTERIZE`
+ * Limits the number of colors in the image. Each color channel is limited to
+ * the number of colors specified. Values between 2 and 255 are valid, but
+ * results are most noticeable with lower values. The default value is 4.
+ *
+ * `BLUR`
+ * Blurs the image. The level of blurring is specified by a blur radius. Larger
+ * values increase the blur. The default value is 4. A gaussian blur is used
+ * in `P2D` mode. A box blur is used in `WEBGL` mode.
+ *
+ * `ERODE`
+ * Reduces the light areas. No parameter is used.
+ *
+ * `DILATE`
+ * Increases the light areas. No parameter is used.
+ *
+ * `filter()` uses WebGL in the background by default because it's faster.
+ * This can be disabled in `P2D` mode by adding a `false` argument, as in
+ * `filter(BLUR, false)`. This may be useful to keep computation off the GPU
+ * or to work around a lack of WebGL support.
+ *
+ * In WebgL mode, `filter()` can also use custom shaders. See
+ * createFilterShader() for more
+ * information.
+ *
+ *
+ * @method filter
+ * @param {Constant} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
+ * POSTERIZE, BLUR, ERODE, DILATE or BLUR.
+ * @param {Number} [filterParam] parameter unique to each filter.
+ * @param {Boolean} [useWebGL] flag to control whether to use fast
+ * WebGL filters (GPU) or original image
+ * filters (CPU); defaults to `true`.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the mountains as the background.
+ * background(img);
+ *
+ * // Copy a region of pixels to another spot.
+ * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+ *
+ * // Outline the copied region.
+ * stroke(255);
+ * noFill();
+ * square(7, 22, 10);
+ *
+ * describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the INVERT filter.
+ * filter(INVERT);
+ *
+ * describe('A blue brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the GRAY filter.
+ * filter(GRAY);
+ *
+ * describe('A brick wall drawn in grayscale.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the THRESHOLD filter.
+ * filter(THRESHOLD);
+ *
+ * describe('A brick wall drawn in black and white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the OPAQUE filter.
+ * filter(OPAQUE);
+ *
+ * describe('A red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the POSTERIZE filter.
+ * filter(POSTERIZE, 3);
+ *
+ * describe('An image of a red brick wall drawn with limited color palette.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the BLUR filter.
+ * filter(BLUR, 3);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the DILATE filter.
+ * filter(DILATE);
+ *
+ * describe('A red brick wall with bright lines between each brick.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the ERODE filter.
+ * filter(ERODE);
+ *
+ * describe('A red brick wall with faint lines between each brick.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method getFilterGraphicsLayer
+ * @private
+ * @returns {p5.Graphics}
+ */
+ _main.default.prototype.getFilterGraphicsLayer = function () {
+ return this._renderer.getFilterGraphicsLayer();
+ };
+ /**
+ * @method filter
+ * @param {Constant} filterType
+ * @param {Boolean} [useWebGL]
+ */
+ /**
+ * @method filter
+ * @param {p5.Shader} shaderFilter shader that's been loaded, with the
+ * frag shader using a `tex0` uniform.
+ */
+ _main.default.prototype.filter = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('filter', args);
+ var _parseFilterArgs = parseFilterArgs.apply(void 0, args),
+ shader = _parseFilterArgs.shader,
+ operation = _parseFilterArgs.operation,
+ value = _parseFilterArgs.value,
+ useWebGL = _parseFilterArgs.useWebGL; // when passed a shader, use it directly
+ if (this._renderer.isP3D && shader) {
+ _main.default.RendererGL.prototype.filter.call(this._renderer, shader);
+ return;
+ } // when opting out of webgl, use old pixels method
+
+ if (!useWebGL && !this._renderer.isP3D) {
+ if (this.canvas !== undefined) {
+ _filters.default.apply(this.canvas, _filters.default[operation], value);
+ } else {
+ _filters.default.apply(this.elt, _filters.default[operation], value);
+ }
+ return;
+ }
+ if (!useWebGL && this._renderer.isP3D) {
+ console.warn('filter() with useWebGL=false is not supported in WEBGL');
+ } // when this is a webgl renderer, apply constant shader filter
+
+ if (this._renderer.isP3D) {
+ _main.default.RendererGL.prototype.filter.call(this._renderer, operation, value);
+ } // when this is P2D renderer, create/use hidden webgl renderer
+ else {
+ var filterGraphicsLayer = this.getFilterGraphicsLayer();
+ // copy p2d canvas contents to secondary webgl renderer
+ // dest
+ filterGraphicsLayer.copy( // src
+ this._renderer, // src coods
+ 0, 0, this.width, this.height, // dest coords
+ - this.width / 2, - this.height / 2, this.width, this.height);
+ //clearing the main canvas
+ this._renderer.clear();
+ this._renderer.resetMatrix();
+ // filter it with shaders
+ filterGraphicsLayer.filter.apply(filterGraphicsLayer, args);
+ // copy secondary webgl renderer back to original p2d canvas
+ this.copy( // src
+ filterGraphicsLayer._renderer, // src coods
+ 0, 0, this.width, this.height, // dest coords
+ 0, 0, this.width, this.height);
+ filterGraphicsLayer.clear(); // prevent feedback effects on p2d canvas
+ }
+ };
+ function parseFilterArgs() {
+ var _ref;
+ // args could be:
+ // - operation, value, [useWebGL]
+ // - operation, [useWebGL]
+ // - shader
+ var result = {
+ shader: undefined,
+ operation: undefined,
+ value: undefined,
+ useWebGL: true
+ };
+ if ((arguments.length <= 0 ? undefined : arguments[0]) instanceof _main.default.Shader) {
+ result.shader = arguments.length <= 0 ? undefined : arguments[0];
+ return result;
+ } else {
+ result.operation = arguments.length <= 0 ? undefined : arguments[0];
+ }
+ if (arguments.length > 1 && typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'number') {
+ result.value = arguments.length <= 1 ? undefined : arguments[1];
+ }
+ if ((_ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref]) === false) {
+ result.useWebGL = false;
+ }
+ return result;
+ } /**
+ * Gets a pixel or a region of pixels from the canvas.
+ *
+ * `get()` is easy to use but it's not as fast as
+ * pixels. Use pixels
+ * to read many pixel values.
+ *
+ * The version of `get()` with no parameters returns the entire canvas.
+ *
+ * The version of `get()` with two parameters interprets them as
+ * coordinates. It returns an array with the `[R, G, B, A]` values of the
+ * pixel at the given point.
+ *
+ * The version of `get()` with four parameters interprets them as coordinates
+ * and dimensions. It returns a subsection of the canvas as a
+ * p5.Image object. The first two parameters are the
+ * coordinates for the upper-left corner of the subsection. The last two
+ * parameters are the width and height of the subsection.
+ *
+ * Use p5.Image.get() to work directly with
+ * p5.Image objects.
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number} w width of the subsection to be returned.
+ * @param {Number} h height of the subsection to be returned.
+ * @return {p5.Image} subsection as a p5.Image object.
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the BLUR filter.
+ * // Don't use WebGL.
+ * filter(BLUR, 3, false);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Get the entire canvas.
+ * let c = get();
+ *
+ * // Display half the canvas.
+ * image(c, 50, 0);
+ *
+ * describe('Two identical mountain landscapes shown side-by-side.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Get the color of a pixel.
+ * let c = get(50, 90);
+ *
+ * // Style the square with the pixel's color.
+ * fill(c);
+ * noStroke();
+ *
+ * // Display the square.
+ * square(25, 25, 50);
+ *
+ * describe('A mountain landscape with an olive green square in its center.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method get
+ * @return {p5.Image} whole canvas as a p5.Image.
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of the pixel at (x, y) in array format `[R, G, B, A]`.
+ */
+
+ _main.default.prototype.get = function (x, y, w, h) {
+ var _this$_renderer2;
+ _main.default._validateParameters('get', arguments);
+ return (_this$_renderer2 = this._renderer).get.apply(_this$_renderer2, arguments);
+ };
+ /**
+ * Loads the current value of each pixel on the canvas into the
+ * pixels array.
+ *
+ * `loadPixels()` must be called before reading from or writing to
+ * pixels.
+ *
+ * @method loadPixels
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Get a region of the image.
+ * let c = get(0, 0, 50, 50);
+ *
+ * // Display the region.
+ * image(c, 50, 50);
+ *
+ * describe('A mountain landscape drawn on top of another mountain landscape.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.loadPixels = function () {
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+ _main.default._validateParameters('loadPixels', args);
+ this._renderer.loadPixels();
+ };
+ /**
+ * Sets the color of a pixel or draws an image to the canvas.
+ *
+ * `set()` is easy to use but it's not as fast as
+ * pixels. Use pixels
+ * to set many pixel values.
+ *
+ * `set()` interprets the first two parameters as x- and y-coordinates. It
+ * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
+ * array, a p5.Color object, or a
+ * p5.Image object. If an image is passed, the first
+ * two parameters set the coordinates for the image's upper-left corner,
+ * regardless of the current imageMode().
+ *
+ * updatePixels() must be called after using
+ * `set()` for changes to appear.
+ *
+ * @method set
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number|Number[]|Object} c grayscale value | pixel array |
+ * p5.Color object | p5.Image to copy.
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0, 100, 100);
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the halfway index in the pixels array.
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Copy the top half of the canvas to the bottom.
+ * for (let i = 0; i < halfImage; i += 1) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('Two identical images of mountain landscapes, one on top of the other.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set four pixels to black.
+ * set(30, 20, 0);
+ * set(85, 20, 0);
+ * set(85, 75, 0);
+ * set(30, 75, 0);
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let black = color(0);
+ *
+ * // Set four pixels to black.
+ * set(30, 20, black);
+ * set(85, 20, black);
+ * set(85, 75, black);
+ * set(30, 75, black);
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(255);
+ *
+ * // Draw a horizontal color gradient.
+ * for (let x = 0; x < 100; x += 1) {
+ * for (let y = 0; y < 100; y += 1) {
+ * // Calculate the grayscale value.
+ * let c = map(x, 0, 100, 0, 255);
+ *
+ * // Set the pixel using the grayscale value.
+ * set(x, y, c);
+ * }
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('A horiztonal color gradient from black to white.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.set = function (x, y, imgOrCol) {
+ this._renderer.set(x, y, imgOrCol);
+ };
+ /**
+ * Updates the canvas with the RGBA values in the
+ * pixels array.
+ *
+ * `updatePixels()` only needs to be called after changing values in the
+ * pixels array. Such changes can be made directly
+ * after calling loadPixels() or by calling
+ * set().
+ *
+ * @method updatePixels
+ * @param {Number} [x] x-coordinate of the upper-left corner of region
+ * to update.
+ * @param {Number} [y] y-coordinate of the upper-left corner of region
+ * to update.
+ * @param {Number} [w] width of region to update.
+ * @param {Number} [h] height of region to update.
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the image to set all pixels.
+ * set(0, 0, img);
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('An image of a mountain landscape.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.updatePixels = function (x, y, w, h) {
+ _main.default._validateParameters('updatePixels', arguments);
+ // graceful fail - if loadPixels() or set() has not been called, pixel
+ // array will be empty, ignore call to updatePixels()
+ if (this.pixels.length === 0) {
+ return;
+ }
+ this._renderer.updatePixels(x, y, w, h);
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../color/p5.Color': 289,
+ '../core/main': 303,
+ './filters': 324,
+ 'core-js/modules/es.array.filter': 174
+ }
+ ],
+ 329: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.last-index-of');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.from-entries');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/web.url');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.last-index-of');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.from-entries');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/web.url');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('whatwg-fetch');
+ _dereq_('es6-promise/auto');
+ var _fetchJsonp = _interopRequireDefault(_dereq_('fetch-jsonp'));
+ var _fileSaver = _interopRequireDefault(_dereq_('file-saver'));
+ _dereq_('../core/friendly_errors/validate_params');
+ _dereq_('../core/friendly_errors/file_errors');
+ _dereq_('../core/friendly_errors/fes_core');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @module IO
+ * @submodule Input
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Loads a JSON file to create an `Object`.
+ *
+ * JavaScript Object Notation
+ * (JSON)
+ * is a standard format for sending data between applications. The format is
+ * based on JavaScript objects which have keys and values. JSON files store
+ * data in an object with strings as keys. Values can be strings, numbers,
+ * Booleans, arrays, `null`, or other objects.
+ *
+ * The first parameter, `path`, is always a string with the path to the file.
+ * Paths to local files should be relative, as in
+ * `loadJSON('assets/data.json')`. URLs such as
+ * `'https://example.com/data.json'` may be blocked due to browser security.
+ *
+ * The second parameter, `successCallback`, is optional. If a function is
+ * passed, as in `loadJSON('assets/data.json', handleData)`, then the
+ * `handleData()` function will be called once the data loads. The object
+ * created from the JSON data will be passed to `handleData()` as its only argument.
+ *
+ * The third parameter, `failureCallback`, is also optional. If a function is
+ * passed, as in `loadJSON('assets/data.json', handleData, handleFailure)`,
+ * then the `handleFailure()` function will be called if an error occurs while
+ * loading. The `Error` object will be passed to `handleFailure()` as its only
+ * argument.
+ *
+ * Note: Data can take time to load. Calling `loadJSON()` within
+ * preload() ensures data loads before it's used in
+ * setup() or draw().
+ *
+ * @method loadJSON
+ * @param {String} path path of the JSON file to be loaded.
+ * @param {function} [successCallback] function to call once the data is loaded. Will be passed the object.
+ * @param {function} [errorCallback] function to call if the data fails to load. Will be passed an `Error` event object.
+ * @return {Object} object containing the loaded data.
+ *
+ * @example
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0, 100, 100);
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the halfway index in the pixels array.
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Copy the top half of the canvas to the bottom.
+ * for (let i = 0; i < halfImage; i += 1) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('Two identical images of mountain landscapes, one on top of the other.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myData;
+ *
+ * // Load the JSON and create an object.
+ * function preload() {
+ * myData = loadJSON('assets/data.json');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the circle.
+ * fill(myData.color);
+ * noStroke();
+ *
+ * // Draw the circle.
+ * circle(myData.x, myData.y, myData.d);
+ *
+ * describe('A pink circle on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myData;
+ *
+ * // Load the JSON and create an object.
+ * function preload() {
+ * myData = loadJSON('assets/data.json');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object and make it transparent.
+ * let c = color(myData.color);
+ * c.setAlpha(80);
+ *
+ * // Style the circles.
+ * fill(c);
+ * noStroke();
+ *
+ * // Iterate over the myData.bubbles array.
+ * for (let b of myData.bubbles) {
+ * // Draw a circle for each bubble.
+ * circle(b.x, b.y, b.d);
+ * }
+ *
+ * describe('Several pink bubbles floating in a blue sky.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myData;
+ *
+ * // Load the GeoJSON and create an object.
+ * function preload() {
+ * myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get data about the most recent earthquake.
+ * let quake = myData.features[0].properties;
+ *
+ * // Draw a circle based on the earthquake's magnitude.
+ * circle(50, 50, quake.mag * 10);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(11);
+ *
+ * // Display the earthquake's location.
+ * text(quake.place, 5, 80, 100);
+ *
+ * describe(`A white circle on a gray background. The text "${quake.place}" is written beneath the circle.`);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let bigQuake;
+ *
+ * // Load the GeoJSON and preprocess it.
+ * function preload() {
+ * loadJSON(
+ * 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
+ * handleData
+ * );
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a circle based on the earthquake's magnitude.
+ * circle(50, 50, bigQuake.mag * 10);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(11);
+ *
+ * // Display the earthquake's location.
+ * text(bigQuake.place, 5, 80, 100);
+ *
+ * describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
+ * }
+ *
+ * // Find the biggest recent earthquake.
+ * function handleData(data) {
+ * let maxMag = 0;
+ * // Iterate over the earthquakes array.
+ * for (let quake of data.features) {
+ * // Reassign bigQuake if a larger
+ * // magnitude quake is found.
+ * if (quake.properties.mag > maxMag) {
+ * bigQuake = quake.properties;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.loadJSON = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('loadJSON', args);
+ var path = args[0];
+ var callback;
+ var errorCallback;
+ var options;
+ var ret = {
+ }; // object needed for preload
+ var t = 'json';
+ // check for explicit data type argument
+ for (var i = 1; i < args.length; i++) {
+ var arg = args[i];
+ if (typeof arg === 'string') {
+ if (arg === 'jsonp' || arg === 'json') {
+ t = arg;
+ }
+ } else if (typeof arg === 'function') {
+ if (!callback) {
+ callback = arg;
+ } else {
+ errorCallback = arg;
+ }
+ } else if (_typeof(arg) === 'object' && (arg.hasOwnProperty('jsonpCallback') || arg.hasOwnProperty('jsonpCallbackFunction'))) {
+ t = 'jsonp';
+ options = arg;
+ }
+ }
+ var self = this;
+ this.httpDo(path, 'GET', options, t, function (resp) {
+ for (var k in resp) {
+ ret[k] = resp[k];
+ }
+ if (typeof callback !== 'undefined') {
+ callback(resp);
+ }
+ self._decrementPreload();
+ }, function (err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(5, path);
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
+ });
+ return ret;
+ };
+ /**
+ * Loads a text file to create an `Array`.
+ *
+ * The first parameter, `path`, is always a string with the path to the file.
+ * Paths to local files should be relative, as in
+ * `loadStrings('assets/data.txt')`. URLs such as
+ * `'https://example.com/data.txt'` may be blocked due to browser security.
+ *
+ * The second parameter, `successCallback`, is optional. If a function is
+ * passed, as in `loadStrings('assets/data.txt', handleData)`, then the
+ * `handleData()` function will be called once the data loads. The array
+ * created from the text data will be passed to `handleData()` as its only
+ * argument.
+ *
+ * The third parameter, `failureCallback`, is also optional. If a function is
+ * passed, as in `loadStrings('assets/data.txt', handleData, handleFailure)`,
+ * then the `handleFailure()` function will be called if an error occurs while
+ * loading. The `Error` object will be passed to `handleFailure()` as its only
+ * argument.
+ *
+ * Note: Data can take time to load. Calling `loadStrings()` within
+ * preload() ensures data loads before it's used in
+ * setup() or draw().
+ *
+ * @method loadStrings
+ * @param {String} path path of the text file to be loaded.
+ * @param {function} [successCallback] function to call once the data is
+ * loaded. Will be passed the array.
+ * @param {function} [errorCallback] function to call if the data fails to
+ * load. Will be passed an `Error` event
+ * object.
+ * @return {String[]} new array containing the loaded text.
+ *
+ * @example
+ *
+ *
+ * let bigQuake;
+ *
+ * // Load the GeoJSON and preprocess it.
+ * function preload() {
+ * loadJSON(
+ * 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
+ * handleData,
+ * handleError
+ * );
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a circle based on the earthquake's magnitude.
+ * circle(50, 50, bigQuake.mag * 10);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(11);
+ *
+ * // Display the earthquake's location.
+ * text(bigQuake.place, 5, 80, 100);
+ *
+ * describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
+ * }
+ *
+ * // Find the biggest recent earthquake.
+ * function handleData(data) {
+ * let maxMag = 0;
+ * // Iterate over the earthquakes array.
+ * for (let quake of data.features) {
+ * // Reassign bigQuake if a larger
+ * // magnitude quake is found.
+ * if (quake.properties.mag > maxMag) {
+ * bigQuake = quake.properties;
+ * }
+ * }
+ * }
+ *
+ * // Log any errors to the console.
+ * function handleError(error) {
+ * console.log('Oops!', error);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myData;
+ *
+ * // Load the text and create an array.
+ * function preload() {
+ * myData = loadStrings('assets/test.txt');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Select a random line from the text.
+ * let phrase = random(myData);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display the text.
+ * text(phrase, 10, 50, 90);
+ *
+ * describe(`The text "${phrase}" written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let lastLine;
+ *
+ * // Load the text and preprocess it.
+ * function preload() {
+ * loadStrings('assets/test.txt', handleData);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display the text.
+ * text(lastLine, 10, 50, 90);
+ *
+ * describe('The text "I talk like an orange" written in black on a gray background.');
+ * }
+ *
+ * // Select the last line from the text.
+ * function handleData(data) {
+ * lastLine = data[data.length - 1];
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.loadStrings = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('loadStrings', args);
+ var ret = [
+ ];
+ var callback,
+ errorCallback;
+ for (var i = 1; i < args.length; i++) {
+ var arg = args[i];
+ if (typeof arg === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arg;
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arg;
+ }
+ }
+ }
+ var self = this;
+ _main.default.prototype.httpDo.call(this, args[0], 'GET', 'text', function (data) {
+ // split lines handling mac/windows/linux endings
+ var lines = data.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+ // safe insert approach which will not blow up stack when inserting
+ // >100k lines, but still be faster than iterating line-by-line. based on
+ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Examples
+ var QUANTUM = 32768;
+ for (var _i = 0, len = lines.length; _i < len; _i += QUANTUM) {
+ Array.prototype.push.apply(ret, lines.slice(_i, Math.min(_i + QUANTUM, len)));
+ }
+ if (typeof callback !== 'undefined') {
+ callback(ret);
+ }
+ self._decrementPreload();
+ }, function (err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(3, arguments[0]);
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
+ });
+ return ret;
+ };
+ /**
+ * Reads the contents of a file or URL and creates a p5.Table object with
+ * its values. If a file is specified, it must be located in the sketch's
+ * "data" folder. The filename parameter can also be a URL to a file found
+ * online. By default, the file is assumed to be comma-separated (in CSV
+ * format). Table only looks for a header row if the 'header' option is
+ * included.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed. Calling loadTable() inside preload()
+ * guarantees to complete the operation before setup() and draw() are called.
+ * Outside of preload(), you may supply a callback function to handle the
+ * object:
+ *
+ * All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.
+ * @method loadTable
+ * @param {String} filename name of the file or URL to load
+ * @param {String} [extension] parse the table by comma-separated values "csv", semicolon-separated
+ * values "ssv", or tab-separated values "tsv"
+ * @param {String} [header] "header" to indicate table has header row
+ * @param {function} [callback] function to be executed after
+ * loadTable() completes. On success, the
+ * Table object is passed in as the
+ * first argument.
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Object} Table object containing data
+ *
+ * @example
+ *
+ * let lastLine;
+ *
+ * // Load the text and preprocess it.
+ * function preload() {
+ * loadStrings('assets/test.txt', handleData, handleError);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display the text.
+ * text(lastLine, 10, 50, 90);
+ *
+ * describe('The text "I talk like an orange" written in black on a gray background.');
+ * }
+ *
+ * // Select the last line from the text.
+ * function handleData(data) {
+ * lastLine = data[data.length - 1];
+ * }
+ *
+ * // Log any errors to the console.
+ * function handleError(error) {
+ * console.error('Oops!', error);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.loadTable = function (path) {
+ // p5._validateParameters('loadTable', arguments);
+ var callback;
+ var errorCallback;
+ var options = [
+ ];
+ var header = false;
+ var ext = path.substring(path.lastIndexOf('.') + 1, path.length);
+ var sep;
+ if (ext === 'csv') {
+ sep = ',';
+ } else if (ext === 'ssv') {
+ sep = ';';
+ } else if (ext === 'tsv') {
+ sep = '\t';
+ }
+ for (var i = 1; i < arguments.length; i++) {
+ if (typeof arguments[i] === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arguments[i];
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arguments[i];
+ }
+ } else if (typeof arguments[i] === 'string') {
+ options.push(arguments[i]);
+ if (arguments[i] === 'header') {
+ header = true;
+ }
+ if (arguments[i] === 'csv') {
+ sep = ',';
+ } else if (arguments[i] === 'ssv') {
+ sep = ';';
+ } else if (arguments[i] === 'tsv') {
+ sep = '\t';
+ }
+ }
+ }
+ var t = new _main.default.Table();
+ var self = this;
+ this.httpDo(path, 'GET', 'table', function (resp) {
+ var state = {
+ };
+ // define constants
+ var PRE_TOKEN = 0,
+ MID_TOKEN = 1,
+ POST_TOKEN = 2,
+ POST_RECORD = 4;
+ var QUOTE = '"',
+ CR = '\r',
+ LF = '\n';
+ var records = [
+ ];
+ var offset = 0;
+ var currentRecord = null;
+ var currentChar;
+ var tokenBegin = function tokenBegin() {
+ state.currentState = PRE_TOKEN;
+ state.token = '';
+ };
+ var tokenEnd = function tokenEnd() {
+ currentRecord.push(state.token);
+ tokenBegin();
+ };
+ var recordBegin = function recordBegin() {
+ state.escaped = false;
+ currentRecord = [
+ ];
+ tokenBegin();
+ };
+ var recordEnd = function recordEnd() {
+ state.currentState = POST_RECORD;
+ records.push(currentRecord);
+ currentRecord = null;
+ };
+ for (; ; ) {
+ currentChar = resp[offset++];
+ // EOF
+ if (currentChar == null) {
+ if (state.escaped) {
+ throw new Error('Unclosed quote in file.');
+ }
+ if (currentRecord) {
+ tokenEnd();
+ recordEnd();
+ break;
+ }
+ }
+ if (currentRecord === null) {
+ recordBegin();
+ } // Handle opening quote
+
+ if (state.currentState === PRE_TOKEN) {
+ if (currentChar === QUOTE) {
+ state.escaped = true;
+ state.currentState = MID_TOKEN;
+ continue;
+ }
+ state.currentState = MID_TOKEN;
+ } // mid-token and escaped, look for sequences and end quote
+
+ if (state.currentState === MID_TOKEN && state.escaped) {
+ if (currentChar === QUOTE) {
+ if (resp[offset] === QUOTE) {
+ state.token += QUOTE;
+ offset++;
+ } else {
+ state.escaped = false;
+ state.currentState = POST_TOKEN;
+ }
+ } else if (currentChar === CR) {
+ continue;
+ } else {
+ state.token += currentChar;
+ }
+ continue;
+ } // fall-through: mid-token or post-token, not escaped
+
+ if (currentChar === CR) {
+ if (resp[offset] === LF) {
+ offset++;
+ }
+ tokenEnd();
+ recordEnd();
+ } else if (currentChar === LF) {
+ tokenEnd();
+ recordEnd();
+ } else if (currentChar === sep) {
+ tokenEnd();
+ } else if (state.currentState === MID_TOKEN) {
+ state.token += currentChar;
+ }
+ } // set up column names
+
+ if (header) {
+ t.columns = records.shift();
+ } else {
+ for (var _i2 = 0; _i2 < records[0].length; _i2++) {
+ t.columns[_i2] = 'null';
+ }
+ }
+ var row;
+ for (var _i3 = 0; _i3 < records.length; _i3++) {
+ //Handles row of 'undefined' at end of some CSVs
+ if (records[_i3].length === 1) {
+ if (records[_i3][0] === 'undefined' || records[_i3][0] === '') {
+ continue;
+ }
+ }
+ row = new _main.default.TableRow();
+ row.arr = records[_i3];
+ row.obj = makeObject(records[_i3], t.columns);
+ t.addRow(row);
+ }
+ if (typeof callback === 'function') {
+ callback(t);
+ }
+ self._decrementPreload();
+ }, function (err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(2, path);
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ console.error(err);
+ }
+ });
+ return t;
+ };
+ // helper function to turn a row into a JSON object
+ function makeObject(row, headers) {
+ headers = headers || [
+ ];
+ if (typeof headers === 'undefined') {
+ for (var j = 0; j < row.length; j++) {
+ headers[j.toString()] = j;
+ }
+ }
+ return Object.fromEntries(headers.map(function (key, i) {
+ return [key,
+ row[i]];
+ }));
+ } /**
+ * Loads an XML file to create a p5.XML object.
+ *
+ * Extensible Markup Language
+ * (XML)
+ * is a standard format for sending data between applications. Like HTML, the
+ * XML format is based on tags and attributes, as in
+ * `<time units="s">1234</time>`.
+ *
+ * The first parameter, `path`, is always a string with the path to the file.
+ * Paths to local files should be relative, as in
+ * `loadXML('assets/data.xml')`. URLs such as `'https://example.com/data.xml'`
+ * may be blocked due to browser security.
+ *
+ * The second parameter, `successCallback`, is optional. If a function is
+ * passed, as in `loadXML('assets/data.xml', handleData)`, then the
+ * `handleData()` function will be called once the data loads. The
+ * p5.XML object created from the data will be passed
+ * to `handleData()` as its only argument.
+ *
+ * The third parameter, `failureCallback`, is also optional. If a function is
+ * passed, as in `loadXML('assets/data.xml', handleData, handleFailure)`, then
+ * the `handleFailure()` function will be called if an error occurs while
+ * loading. The `Error` object will be passed to `handleFailure()` as its only
+ * argument.
+ *
+ * Note: Data can take time to load. Calling `loadXML()` within
+ * preload() ensures data loads before it's used in
+ * setup() or draw().
+ *
+ * @method loadXML
+ * @param {String} path path of the XML file to be loaded.
+ * @param {function} [successCallback] function to call once the data is
+ * loaded. Will be passed the
+ * p5.XML object.
+ * @param {function} [errorCallback] function to call if the data fails to
+ * load. Will be passed an `Error` event
+ * object.
+ * @return {p5.XML} XML data loaded into a p5.XML
+ * object.
+ *
+ * @example
+ *
+ * // Given the following CSV file called "mammals.csv"
+ * // located in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * //the file can be remote
+ * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+ * // "csv", "header");
+ * }
+ *
+ * function setup() {
+ * //count the columns
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ *
+ * print(table.getColumn('name'));
+ * //["Goat", "Leopard", "Zebra"]
+ *
+ * //cycle through the table
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(table.getString(r, c));
+ * }
+ * describe(`randomly generated text from a file,
+ * for example "i smell like butter"`);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array with all mammal tags.
+ * let mammals = myXML.getChildren('mammal');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the mammals array.
+ * for (let i = 0; i < mammals.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Get the mammal's common name.
+ * let name = mammals[i].getContent();
+ *
+ * // Display the mammal's name.
+ * text(name, 20, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let lastMammal;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * loadXML('assets/animals.xml', handleData);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Display the content of the last mammal element.
+ * text(lastMammal, 50, 50);
+ *
+ * describe('The word "Zebra" written in black on a gray background.');
+ * }
+ *
+ * // Get the content of the last mammal element.
+ * function handleData(data) {
+ * // Get an array with all mammal elements.
+ * let mammals = data.getChildren('mammal');
+ *
+ * // Get the content of the last mammal.
+ * lastMammal = mammals[mammals.length - 1].getContent();
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.loadXML = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ var ret = new _main.default.XML();
+ var callback,
+ errorCallback;
+ for (var i = 1; i < args.length; i++) {
+ var arg = args[i];
+ if (typeof arg === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arg;
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arg;
+ }
+ }
+ }
+ var self = this;
+ this.httpDo(args[0], 'GET', 'xml', function (xml) {
+ for (var key in xml) {
+ ret[key] = xml[key];
+ }
+ if (typeof callback !== 'undefined') {
+ callback(ret);
+ }
+ self._decrementPreload();
+ }, function (err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(1, arguments[0]);
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
+ });
+ return ret;
+ };
+ /**
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadBytes
+ * @param {string} file name of the file or URL to load
+ * @param {function} [callback] function to be executed after loadBytes()
+ * completes
+ * @param {function} [errorCallback] function to be executed if there
+ * is an error
+ * @returns {Object} an object whose 'bytes' property will be the loaded buffer
+ *
+ * @example
+ *
+ * let lastMammal;
+ *
+ * // Load the XML and preprocess it.
+ * function preload() {
+ * loadXML('assets/animals.xml', handleData, handleError);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Display the content of the last mammal element.
+ * text(lastMammal, 50, 50);
+ *
+ * describe('The word "Zebra" written in black on a gray background.');
+ * }
+ *
+ * // Get the content of the last mammal element.
+ * function handleData(data) {
+ * // Get an array with all mammal elements.
+ * let mammals = data.getChildren('mammal');
+ *
+ * // Get the content of the last mammal.
+ * lastMammal = mammals[mammals.length - 1].getContent();
+ * }
+ *
+ * // Log any errors to the console.
+ * function handleError(error) {
+ * console.error('Oops!', error);
+ * }
+ *
+ *
+ * let data;
+ *
+ * function preload() {
+ * data = loadBytes('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * for (let i = 0; i < 5; i++) {
+ * console.log(data.bytes[i].toString(16));
+ * }
+ * describe('no image displayed');
+ * }
+ * httpDo(path, 'GET'). The 'binary' datatype will return
+ * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+ * which can be used to initialize typed arrays (such as Uint8Array).
+ *
+ * @method httpGet
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "binary", "arrayBuffer",
+ * "xml", or "text"
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpGet() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ * @example
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+ * 'format=geojson&limit=1&orderby=time';
+ * httpGet(url, 'jsonp', false, function(response) {
+ * // when the HTTP request completes, populate the variable that holds the
+ * // earthquake data used in the visualization.
+ * earthquakes = response;
+ * });
+ * }
+ *
+ * function draw() {
+ * if (!earthquakes) {
+ * // Wait until the earthquake data has loaded before drawing.
+ * return;
+ * }
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * noLoop();
+ * }
+ * httpDo(path, 'POST').
+ *
+ * @method httpPost
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "xml", or "text".
+ * If omitted, httpPost() will guess.
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpPost() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Examples use jsonplaceholder.typicode.com for a Mock Data API
+ *
+ * let url = 'https://jsonplaceholder.typicode.com/posts';
+ * let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * }
+ *
+ * function mousePressed() {
+ * httpPost(url, 'json', postData, function(result) {
+ * strokeWeight(2);
+ * text(result.body, mouseX, mouseY);
+ * });
+ * }
+ *
+ *
+ * let url = 'ttps://invalidURL'; // A bad URL that will cause errors
+ * let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * }
+ *
+ * function mousePressed() {
+ * httpPost(
+ * url,
+ * 'json',
+ * postData,
+ * function(result) {
+ * // ... won't be called
+ * },
+ * function(error) {
+ * strokeWeight(2);
+ * text(error.toString(), mouseX, mouseY);
+ * }
+ * );
+ * }
+ * + * For more advanced use, you may also pass in the path as the first argument + * and a object as the second argument, the signature follows the one specified + * in the Fetch API specification. + * This method is suitable for fetching files up to size of 64MB when "GET" is used. + * + * @method httpDo + * @param {String} path name of the file or url to load + * @param {String} [method] either "GET", "POST", or "PUT", + * defaults to "GET" + * @param {String} [datatype] "json", "jsonp", "xml", or "text" + * @param {Object} [data] param data passed sent with request + * @param {function} [callback] function to be executed after + * httpGet() completes, data is passed in + * as first argument + * @param {function} [errorCallback] function to be executed if + * there is an error, response is passed + * in as first argument + * @return {Promise} A promise that resolves with the data when the operation + * completes successfully or rejects with the error after + * one occurs. + * + * @example + *
+ *
+ */
+ /**
+ * @method httpDo
+ * @param {String} path
+ * @param {Object} options Request object options as documented in the
+ * "fetch" API
+ * reference
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ _main.default.prototype.httpDo = function () {
+ var type;
+ var callback;
+ var errorCallback;
+ var request;
+ var promise;
+ var jsonpOptions = {
+ };
+ var cbCount = 0;
+ var contentType = 'text/plain';
+ // Trim the callbacks off the end to get an idea of how many arguments are passed
+ for (var i = arguments.length - 1; i > 0; i--) {
+ if (typeof (i < 0 || arguments.length <= i ? undefined : arguments[i]) === 'function') {
+ cbCount++;
+ } else {
+ break;
+ }
+ } // The number of arguments minus callbacks
+
+ var argsCount = arguments.length - cbCount;
+ var path = arguments.length <= 0 ? undefined : arguments[0];
+ if (argsCount === 2 && typeof path === 'string' && _typeof(arguments.length <= 1 ? undefined : arguments[1]) === 'object') {
+ // Intended for more advanced use, pass in Request parameters directly
+ request = new Request(path, arguments.length <= 1 ? undefined : arguments[1]);
+ callback = arguments.length <= 2 ? undefined : arguments[2];
+ errorCallback = arguments.length <= 3 ? undefined : arguments[3];
+ } else {
+ // Provided with arguments
+ var method = 'GET';
+ var data;
+ for (var j = 1; j < arguments.length; j++) {
+ var a = j < 0 || arguments.length <= j ? undefined : arguments[j];
+ if (typeof a === 'string') {
+ if (a === 'GET' || a === 'POST' || a === 'PUT' || a === 'DELETE') {
+ method = a;
+ } else if (a === 'json' || a === 'jsonp' || a === 'binary' || a === 'arrayBuffer' || a === 'xml' || a === 'text' || a === 'table') {
+ type = a;
+ } else {
+ data = a;
+ }
+ } else if (typeof a === 'number') {
+ data = a.toString();
+ } else if (_typeof(a) === 'object') {
+ if (a.hasOwnProperty('jsonpCallback') || a.hasOwnProperty('jsonpCallbackFunction')) {
+ for (var attr in a) {
+ jsonpOptions[attr] = a[attr];
+ }
+ } else if (a instanceof _main.default.XML) {
+ data = a.serialize();
+ contentType = 'application/xml';
+ } else {
+ data = JSON.stringify(a);
+ contentType = 'application/json';
+ }
+ } else if (typeof a === 'function') {
+ if (!callback) {
+ callback = a;
+ } else {
+ errorCallback = a;
+ }
+ }
+ }
+ var headers = method === 'GET' ? new Headers() : new Headers({
+ 'Content-Type': contentType
+ });
+ request = new Request(path, {
+ method: method,
+ mode: 'cors',
+ body: data,
+ headers: headers
+ });
+ } // do some sort of smart type checking
+
+ if (!type) {
+ if (path.includes('json')) {
+ type = 'json';
+ } else if (path.includes('xml')) {
+ type = 'xml';
+ } else {
+ type = 'text';
+ }
+ }
+ if (type === 'jsonp') {
+ promise = (0, _fetchJsonp.default) (path, jsonpOptions);
+ } else {
+ promise = fetch(request);
+ }
+ promise = promise.then(function (res) {
+ if (!res.ok) {
+ var err = new Error(res.body);
+ err.status = res.status;
+ err.ok = false;
+ throw err;
+ } else {
+ var fileSize = 0;
+ if (type !== 'jsonp') {
+ fileSize = res.headers.get('content-length');
+ }
+ if (fileSize && fileSize > 64000000) {
+ _main.default._friendlyFileLoadError(7, path);
+ }
+ switch (type) {
+ case 'json':
+ case 'jsonp':
+ return res.json();
+ case 'binary':
+ return res.blob();
+ case 'arrayBuffer':
+ return res.arrayBuffer();
+ case 'xml':
+ return res.text().then(function (text) {
+ var parser = new DOMParser();
+ var xml = parser.parseFromString(text, 'text/xml');
+ return new _main.default.XML(xml.documentElement);
+ });
+ default:
+ return res.text();
+ }
+ }
+ });
+ promise.then(callback || function () {
+ });
+ promise.catch(errorCallback || console.error);
+ return promise;
+ };
+ /**
+ * @module IO
+ * @submodule Output
+ * @for p5
+ */
+ window.URL = window.URL || window.webkitURL;
+ // private array of p5.PrintWriter objects
+ _main.default.prototype._pWriters = [
+ ];
+ /**
+ * Creates a new p5.PrintWriter object.
+ *
+ * p5.PrintWriter objects provide a way to
+ * save a sequence of text data, called the *print stream*, to the user's
+ * computer. They're low-level objects that enable precise control of text
+ * output. Functions such as
+ * saveStrings() and
+ * saveJSON() are easier to use for simple file
+ * saving.
+ *
+ * The first parameter, `filename`, is the name of the file to be written. If
+ * a string is passed, as in `createWriter('words.txt')`, a new
+ * p5.PrintWriter object will be created that
+ * writes to a file named `words.txt`.
+ *
+ * The second parameter, `extension`, is optional. If a string is passed, as
+ * in `createWriter('words', 'csv')`, the first parameter will be interpreted
+ * as the file name and the second parameter as the extension.
+ *
+ * @method createWriter
+ * @param {String} name name of the file to create.
+ * @param {String} [extension] format to use for the file.
+ * @return {p5.PrintWriter} stream for writing data.
+ *
+ * @example
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ *
+ * // displays an animation of all USGS earthquakes
+ * let earthquakes;
+ * let eqFeatureIndex = 0;
+ *
+ * function preload() {
+ * let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+ * httpDo(
+ * url,
+ * {
+ * method: 'GET',
+ * // Other Request options, like special headers for apis
+ * headers: { authorization: 'Bearer secretKey' }
+ * },
+ * function(res) {
+ * earthquakes = res;
+ * }
+ * );
+ * }
+ *
+ * function draw() {
+ * // wait until the data is loaded
+ * if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+ * return;
+ * }
+ * clear();
+ *
+ * let feature = earthquakes.features[eqFeatureIndex];
+ * let mag = feature.properties.mag;
+ * let rad = mag / 11 * ((width + height) / 2);
+ * fill(255, 0, 0, 100);
+ * ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+ *
+ * if (eqFeatureIndex >= earthquakes.features.length) {
+ * eqFeatureIndex = 0;
+ * } else {
+ * eqFeatureIndex += 1;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('xo.txt');
+ *
+ * // Add some lines to the print stream.
+ * myWriter.print('XOO');
+ * myWriter.print('OXO');
+ * myWriter.print('OOX');
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createWriter = function (name, extension) {
+ var newPW;
+ // check that it doesn't already exist
+ for (var i in _main.default.prototype._pWriters) {
+ if (_main.default.prototype._pWriters[i].name === name) {
+ // if a p5.PrintWriter w/ this name already exists...
+ // return p5.prototype._pWriters[i]; // return it w/ contents intact.
+ // or, could return a new, empty one with a unique name:
+ newPW = new _main.default.PrintWriter(name + this.millis(), extension);
+ _main.default.prototype._pWriters.push(newPW);
+ return newPW;
+ }
+ }
+ newPW = new _main.default.PrintWriter(name, extension);
+ _main.default.prototype._pWriters.push(newPW);
+ return newPW;
+ };
+ /**
+ * A class to describe a print stream.
+ *
+ * Each `p5.PrintWriter` object provides a way to save a sequence of text
+ * data, called the *print stream*, to the user's computer. It's a low-level
+ * object that enables precise control of text output. Functions such as
+ * saveStrings() and
+ * saveJSON() are easier to use for simple file
+ * saving.
+ *
+ * Note: createWriter() is the recommended way
+ * to make an instance of this class.
+ *
+ * @class p5.PrintWriter
+ * @param {String} filename name of the file to create.
+ * @param {String} [extension] format to use for the file.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create a p5.PrintWriter object.
+ * // Use the file format .csv.
+ * let myWriter = createWriter('mauna_loa_co2', 'csv');
+ *
+ * // Add some lines to the print stream.
+ * myWriter.print('date,ppm_co2');
+ * myWriter.print('1960-01-01,316.43');
+ * myWriter.print('1970-01-01,325.06');
+ * myWriter.print('1980-01-01,337.9');
+ * myWriter.print('1990-01-01,353.86');
+ * myWriter.print('2000-01-01,369.45');
+ * myWriter.print('2020-01-01,413.61');
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.PrintWriter = function (filename, extension) {
+ var self = this;
+ this.name = filename;
+ this.content = '';
+ /**
+ * Writes data to the print stream without adding new lines.
+ *
+ * The parameter, `data`, is the data to write. `data` can be a number or
+ * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
+ * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
+ * array elements when they're added to the print stream.
+ *
+ * @method write
+ * @param {String|Number|Array} data data to be written as a string, number,
+ * or array of strings and numbers.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('xo.txt');
+ *
+ * // Add some lines to the print stream.
+ * myWriter.print('XOO');
+ * myWriter.print('OXO');
+ * myWriter.print('OOX');
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ *
+ */
+ this.write = function (data) {
+ this.content += data;
+ };
+ /**
+ * Writes data to the print stream with new lines added.
+ *
+ * The parameter, `data`, is the data to write. `data` can be a number or
+ * string, as in `myWriter.print('hi')`, or an array of numbers and strings,
+ * as in `myWriter.print([1, 2, 3])`. A comma will be inserted between array
+ * array elements when they're added to the print stream.
+ *
+ * @method print
+ * @param {String|Number|Array} data data to be written as a string, number,
+ * or array of strings and numbers.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('numbers.txt');
+ *
+ * // Add some data to the print stream.
+ * myWriter.write('1,2,3,');
+ * myWriter.write(['4', '5', '6']);
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ *
+ */
+ this.print = function (data) {
+ this.content += ''.concat(data, '\n');
+ };
+ /**
+ * Clears all data from the print stream.
+ *
+ * @method clear
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('numbers.txt');
+ *
+ * // Add some data to the print stream.
+ * myWriter.print('1,2,3,');
+ * myWriter.print(['4', '5', '6']);
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ *
+ */
+ this.clear = function () {
+ this.content = '';
+ };
+ /**
+ * Saves the file and closes the print stream.
+ *
+ * @method close
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('numbers.txt');
+ *
+ * // Add some data to the print stream.
+ * myWriter.print('Hello p5*js!');
+ *
+ * // Clear the print stream.
+ * myWriter.clear();
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ *
+ */
+ this.close = function () {
+ // convert String to Array for the writeFile Blob
+ var arr = [
+ ];
+ arr.push(this.content);
+ _main.default.prototype.writeFile(arr, filename, extension);
+ // remove from _pWriters array and delete self
+ for (var i in _main.default.prototype._pWriters) {
+ if (_main.default.prototype._pWriters[i].name === this.name) {
+ // remove from _pWriters array
+ _main.default.prototype._pWriters.splice(i, 1);
+ }
+ }
+ self.clear();
+ self = {
+ };
+ };
+ };
+ /**
+ * @module IO
+ * @submodule Output
+ * @for p5
+ */
+ // object, filename, options --> saveJSON, saveStrings,
+ // filename, [extension] [canvas] --> saveImage
+ /**
+ * Saves a given element(image, text, json, csv, wav, or html) to the client's
+ * computer. The first parameter can be a pointer to element we want to save.
+ * The element can be one of p5.Element,an Array of
+ * Strings, an Array of JSON, a JSON object, a p5.Table
+ * , a p5.Image, or a p5.SoundFile (requires
+ * p5.sound). The second parameter is a filename (including extension).The
+ * third parameter is for options specific to this type of object. This method
+ * will save a file that fits the given parameters.
+ * If it is called without specifying an element, by default it will save the
+ * whole canvas as an image file. You can optionally specify a filename as
+ * the first parameter in such a case.
+ * **Note that it is not recommended to
+ * call this method within draw, as it will open a new save dialog on every
+ * render.**
+ *
+ * @method save
+ * @param {Object|String} [objectOrFilename] If filename is provided, will
+ * save canvas as an image with
+ * either png or jpg extension
+ * depending on the filename.
+ * If object is provided, will
+ * save depending on the object
+ * and filename (see examples
+ * above).
+ * @param {String} [filename] If an object is provided as the first
+ * parameter, then the second parameter
+ * indicates the filename,
+ * and should include an appropriate
+ * file extension (see examples above).
+ * @param {Boolean|String} [options] Additional options depend on
+ * filetype. For example, when saving JSON,
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('cat.txt');
+ *
+ * // Add some data to the print stream.
+ * // ASCII art courtesy Wikipedia:
+ * // https://en.wikipedia.org/wiki/ASCII_art
+ * myWriter.print(' (\\_/) ');
+ * myWriter.print("(='.'=)");
+ * myWriter.print('(")_(")');
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ * true indicates that the
+ * output will be optimized for filesize,
+ * rather than readability.
+ *
+ * @example
+ *
+ * // Saves the canvas as an image
+ * cnv = createCanvas(300, 300);
+ * save(cnv, 'myCanvas.jpg');
+ *
+ * // Saves the canvas as an image by default
+ * save('myCanvas.jpg');
+ * describe('An example for saving a canvas as an image.');
+ *
+ * // 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.');
+ *
+ * let myTable = new p5.Table();
+ * // Saves table as html file
+ * save(myTable, 'myTable.html');
+ *
+ * // Comma Separated Values
+ * save(myTable, 'myTable.csv');
+ *
+ * // Tab Separated Values
+ * save(myTable, 'myTable.tsv');
+ *
+ * describe(`An example showing how to save a table in formats of
+ * HTML, CSV and TSV.`);
+ *
+ * let myJSON = { a: 1, b: true };
+ *
+ * // Saves pretty JSON
+ * save(myJSON, 'my.json');
+ *
+ * // 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.`);
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an array.
+ * let data = [1, 2, 3];
+ *
+ * // Save the JSON file.
+ * saveJSON(data, 'numbers.json');
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an object.
+ * let data = { x: mouseX, y: mouseY };
+ *
+ * // Save the JSON file.
+ * saveJSON(data, 'state.json');
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.saveJSON = function (json, filename, opt) {
+ _main.default._validateParameters('saveJSON', arguments);
+ var stringify;
+ if (opt) {
+ stringify = JSON.stringify(json);
+ } else {
+ stringify = JSON.stringify(json, undefined, 2);
+ }
+ this.saveStrings(stringify.split('\n'), filename, 'json');
+ };
+ _main.default.prototype.saveJSONObject = _main.default.prototype.saveJSON;
+ _main.default.prototype.saveJSONArray = _main.default.prototype.saveJSON;
+ /**
+ * Saves an `Array` of `String`s to a file, one per line.
+ *
+ * The first parameter, `list`, is an array with the strings to save.
+ *
+ * The second parameter, `filename`, is a string that sets the file's name.
+ * For example, calling `saveStrings(['0', '01', '011'], 'data.txt')` saves
+ * the array `['0', '01', '011']` to a file called `data.txt` on the user's
+ * computer.
+ *
+ * The third parameter, `extension`, is optional. If a string is passed, as in
+ * `saveStrings(['0', '01', '0`1'], 'data', 'txt')`, the second parameter will
+ * be interpreted as the file name and the third parameter as the extension.
+ *
+ * The fourth parameter, `isCRLF`, is also optional, If `true` is passed, as
+ * in `saveStrings(['0', '01', '011'], 'data', 'txt', true)`, then two
+ * characters, `\r\n` , will be added to the end of each string to create new
+ * lines in the saved file. `\r` is a carriage return (CR) and `\n` is a line
+ * feed (LF). By default, only `\n` (line feed) is added to each string in
+ * order to create new lines.
+ *
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ *
+ * @method saveStrings
+ * @param {String[]} list data to save.
+ * @param {String} filename name of file to be saved.
+ * @param {String} [extension] format to use for the file.
+ * @param {Boolean} [isCRLF] whether to add `\r\n` to the end of each
+ * string. Defaults to `false`.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an object.
+ * let data = { x: mouseX, y: mouseY };
+ *
+ * // Save the JSON file and reduce its size.
+ * saveJSON(data, 'state.json', true);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an array.
+ * let data = ['0', '01', '011'];
+ *
+ * // Save the text file.
+ * saveStrings(data, 'data.txt');
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an array.
+ * // ASCII art courtesy Wikipedia:
+ * // https://en.wikipedia.org/wiki/ASCII_art
+ * let data = [' (\\_/) ', "(='.'=)", '(")_(")'];
+ *
+ * // Save the text file.
+ * saveStrings(data, 'cat', 'txt');
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.saveStrings = function (list, filename, extension, isCRLF) {
+ _main.default._validateParameters('saveStrings', arguments);
+ var ext = extension || 'txt';
+ var pWriter = this.createWriter(filename, ext);
+ for (var i = 0; i < list.length; i++) {
+ isCRLF ? pWriter.write(list[i] + '\r\n') : pWriter.write(list[i] + '\n');
+ }
+ pWriter.close();
+ pWriter.clear();
+ };
+ // =======
+ // HELPERS
+ // =======
+ function escapeHelper(content) {
+ return content.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''');
+ } /**
+ * Writes the contents of a Table object to a file. Defaults to a
+ * text file with comma-separated-values ('csv') but can also
+ * use tab separation ('tsv'), or generate an HTML table ('html').
+ * The file saving process and location of the saved file will
+ * vary between web browsers.
+ *
+ * @method saveTable
+ * @param {p5.Table} Table the Table object to save to a file
+ * @param {String} filename the filename to which the Table should be saved
+ * @param {String} [options] can be one of "tsv", "csv", or "html"
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an array.
+ * // +--+
+ * // / /|
+ * // +--+ +
+ * // | |/
+ * // +--+
+ * let data = [' +--+', ' / /|', '+--+ +', '| |/', '+--+'];
+ *
+ * // Save the text file.
+ * // Use CRLF for line endings.
+ * saveStrings(data, 'box', 'txt', true);
+ * }
+ * }
+ *
+ *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('id');
+ * table.addColumn('species');
+ * table.addColumn('name');
+ *
+ * let newRow = table.addRow();
+ * newRow.setNum('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Panthera leo');
+ * newRow.setString('name', 'Lion');
+ *
+ * // To save, un-comment next line then click 'run'
+ * // saveTable(table, 'new.csv');
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Saves the following to a file called 'new.csv':
+ * // id,species,name
+ * // 0,Panthera leo,Lion
+ * | '.concat(e)); + pWriter.print(' | '); + } + pWriter.print('
| '.concat(htmlEntry)); + pWriter.print(' | '); + } + pWriter.print('
-
+ *
- csv - parse the table as comma-separated values + *
- tsv - parse the table as tab-separated values + *
- header - this table has a header (title) row + *
+ *
+ */
+ function _class() {
+ var rows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [
+ ];
+ _classCallCheck(this, _class);
+ this.columns = [
+ ];
+ /**
+ * An array containing the p5.TableRow objects that make up the
+ * rows of the table. The same result as calling getRows()
+ * @type {p5.TableRow[]}
+ * @property rows
+ * @name rows
+ */
+ this.rows = rows;
+ } /**
+ * Use addRow() to add a new row of data to a p5.Table object. By default,
+ * an empty row is created. Typically, you would store a reference to
+ * the new row in a TableRow object (see newRow in the example above),
+ * and then set individual values using set().
+ *
+ * If a p5.TableRow object is included as a parameter, then that row is
+ * duplicated and added to the table.
+ *
+ * @method addRow
+ * @param {p5.TableRow} [row] row to be added to the table
+ * @return {p5.TableRow} the row that was added
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //print the column names
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print('column ' + c + ' is named ' + table.columns[c]);
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'addRow',
+ value: function addRow(row) {
+ // make sure it is a valid TableRow
+ var r = row || new _main.default.TableRow();
+ if (typeof r.arr === 'undefined' || typeof r.obj === 'undefined') {
+ //r = new p5.prototype.TableRow(r);
+ throw new Error('invalid TableRow: '.concat(r));
+ }
+ r.table = this;
+ this.rows.push(r);
+ return r;
+ } /**
+ * Removes a row from the table object.
+ *
+ * @method removeRow
+ * @param {Integer} id ID number of the row to remove
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'removeRow',
+ value: function removeRow(id) {
+ this.rows[id].table = null; // remove reference to table
+ var chunk = this.rows.splice(id + 1, this.rows.length);
+ this.rows.pop();
+ this.rows = this.rows.concat(chunk);
+ } /**
+ * Returns a reference to the specified p5.TableRow. The reference
+ * can then be used to get and set values of the selected row.
+ *
+ * @method getRow
+ * @param {Integer} rowID ID number of the row to get
+ * @return {p5.TableRow} p5.TableRow object
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //remove the first row
+ * table.removeRow(0);
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getRow',
+ value: function getRow(r) {
+ return this.rows[r];
+ } /**
+ * Gets all rows from the table. Returns an array of p5.TableRows.
+ *
+ * @method getRows
+ * @return {p5.TableRow[]} Array of p5.TableRows
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let row = table.getRow(1);
+ * //print it column by column
+ * //note: a row is an object, not an array
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(row.getString(c));
+ * }
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getRows',
+ value: function getRows() {
+ return this.rows;
+ } /**
+ * Finds the first row in the Table that contains the value
+ * provided, and returns a reference to that row. Even if
+ * multiple rows are possible matches, only the first matching
+ * row is returned. The column to search may be specified by
+ * either its ID or title.
+ *
+ * @method findRow
+ * @param {String} value The value to match
+ * @param {Integer|String} column ID number or title of the
+ * column to search
+ * @return {p5.TableRow}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ *
+ * //warning: rows is an array of objects
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'findRow',
+ value: function findRow(value, column) {
+ // try the Object
+ if (typeof column === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column] === value) {
+ return this.rows[i];
+ }
+ }
+ } else {
+ // try the Array
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column] === value) {
+ return this.rows[j];
+ }
+ }
+ } // otherwise...
+
+ return null;
+ } /**
+ * Finds the rows in the Table that contain the value
+ * provided, and returns references to those rows. Returns an
+ * Array, so for must be used to iterate through all the rows,
+ * as shown in the example above. The column to search may be
+ * specified by either its ID or title.
+ *
+ * @method findRows
+ * @param {String} value The value to match
+ * @param {Integer|String} column ID number or title of the
+ * column to search
+ * @return {p5.TableRow[]} An Array of TableRow objects
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //find the animal named zebra
+ * let row = table.findRow('Zebra', 'name');
+ * //find the corresponding species
+ * print(row.getString('species'));
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'findRows',
+ value: function findRows(value, column) {
+ var ret = [
+ ];
+ if (typeof column === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column] === value) {
+ ret.push(this.rows[i]);
+ }
+ }
+ } else {
+ // try the Array
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column] === value) {
+ ret.push(this.rows[j]);
+ }
+ }
+ }
+ return ret;
+ } /**
+ * Finds the first row in the Table that matches the regular
+ * expression provided, and returns a reference to that row.
+ * Even if multiple rows are possible matches, only the first
+ * matching row is returned. The column to search may be
+ * specified by either its ID or title.
+ *
+ * @method matchRow
+ * @param {String|RegExp} regexp The regular expression to match
+ * @param {String|Integer} column The column ID (number) or
+ * title (string)
+ * @return {p5.TableRow} TableRow object
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add another goat
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Scape Goat');
+ * newRow.setString('name', 'Goat');
+ *
+ * //find the rows containing animals named Goat
+ * let rows = table.findRows('Goat', 'name');
+ * print(rows.length + ' Goats found');
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'matchRow',
+ value: function matchRow(regexp, column) {
+ if (typeof column === 'number') {
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column].match(regexp)) {
+ return this.rows[j];
+ }
+ }
+ } else {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column].match(regexp)) {
+ return this.rows[i];
+ }
+ }
+ }
+ return null;
+ } /**
+ * Finds the rows in the Table that match the regular expression provided,
+ * and returns references to those rows. Returns an array, so for must be
+ * used to iterate through all the rows, as shown in the example. The
+ * column to search may be specified by either its ID or title.
+ *
+ * @method matchRows
+ * @param {String} regexp The regular expression to match
+ * @param {String|Integer} [column] The column ID (number) or
+ * title (string)
+ * @return {p5.TableRow[]} An Array of TableRow objects
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //Search using specified regex on a given column, return TableRow object
+ * let mammal = table.matchRow(new RegExp('ant'), 1);
+ * print(mammal.getString(1));
+ * //Output "Panthera pardus"
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'matchRows',
+ value: function matchRows(regexp, column) {
+ var ret = [
+ ];
+ if (typeof column === 'number') {
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column].match(regexp)) {
+ ret.push(this.rows[j]);
+ }
+ }
+ } else {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column].match(regexp)) {
+ ret.push(this.rows[i]);
+ }
+ }
+ }
+ return ret;
+ } /**
+ * Retrieves all values in the specified column, and returns them
+ * as an array. The column may be specified by either its ID or title.
+ *
+ * @method getColumn
+ * @param {String|Number} column String or Number of the column to return
+ * @return {Array} Array of column values
+ *
+ * @example
+ *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', 'Lion');
+ * newRow.setString('type', 'Mammal');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Snake');
+ * newRow.setString('type', 'Reptile');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Mosquito');
+ * newRow.setString('type', 'Insect');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Lizard');
+ * newRow.setString('type', 'Reptile');
+ *
+ * let rows = table.matchRows('R.*', 'type');
+ * for (let i = 0; i < rows.length; i++) {
+ * print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
+ * }
+ * }
+ * // Sketch prints:
+ * // Snake: Reptile
+ * // Lizard: Reptile
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getColumn',
+ value: function getColumn(value) {
+ var ret = [
+ ];
+ if (typeof value === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ ret.push(this.rows[i].obj[value]);
+ }
+ } else {
+ for (var j = 0; j < this.rows.length; j++) {
+ ret.push(this.rows[j].arr[value]);
+ }
+ }
+ return ret;
+ } /**
+ * Removes all rows from a Table. While all rows are removed,
+ * columns and column titles are maintained.
+ *
+ * @method clearRows
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //getColumn returns an array that can be printed directly
+ * print(table.getColumn('species'));
+ * //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'clearRows',
+ value: function clearRows() {
+ delete this.rows;
+ this.rows = [
+ ];
+ } /**
+ * Use addColumn() to add a new column to a Table object.
+ * Typically, you will want to specify a title, so the column
+ * may be easily referenced later by name. (If no title is
+ * specified, the new column's title will be null.)
+ *
+ * @method addColumn
+ * @param {String} [title] title of the given column
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.clearRows();
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'addColumn',
+ value: function addColumn(title) {
+ var t = title || null;
+ this.columns.push(t);
+ } /**
+ * Returns the total number of columns in a Table.
+ *
+ * @method getColumnCount
+ * @return {Integer} Number of columns in this table
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.addColumn('carnivore');
+ * table.set(0, 'carnivore', 'no');
+ * table.set(1, 'carnivore', 'yes');
+ * table.set(2, 'carnivore', 'no');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getColumnCount',
+ value: function getColumnCount() {
+ return this.columns.length;
+ } /**
+ * Returns the total number of rows in a Table.
+ *
+ * @method getRowCount
+ * @return {Integer} Number of rows in this table
+ * @example
+ *
+ * // given the cvs file "blobs.csv" in /assets directory
+ * // ID, Name, Flavor, Shape, Color
+ * // Blob1, Blobby, Sweet, Blob, Pink
+ * // Blob2, Saddy, Savory, Blob, Blue
+ *
+ * let table;
+ *
+ * function preload() {
+ * table = loadTable('assets/blobs.csv');
+ * }
+ *
+ * function setup() {
+ * createCanvas(200, 100);
+ * textAlign(CENTER);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * let numOfColumn = table.getColumnCount();
+ * text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getRowCount',
+ value: function getRowCount() {
+ return this.rows.length;
+ } /**
+ * Removes any of the specified characters (or "tokens").
+ *
+ * If no column is specified, then the values in all columns and
+ * rows are processed. A specific column may be referenced by
+ * either its ID or title.
+ *
+ * @method removeTokens
+ * @param {String} chars String listing characters to be removed
+ * @param {String|Integer} [column] Column ID (number)
+ * or name (string)
+ *
+ * @example
+ *
+ * // given the cvs file "blobs.csv" in /assets directory
+ * //
+ * // ID, Name, Flavor, Shape, Color
+ * // Blob1, Blobby, Sweet, Blob, Pink
+ * // Blob2, Saddy, Savory, Blob, Blue
+ *
+ * let table;
+ *
+ * function preload() {
+ * table = loadTable('assets/blobs.csv');
+ * }
+ *
+ * function setup() {
+ * createCanvas(200, 100);
+ * textAlign(CENTER);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * let table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', ' $Lion ,');
+ * newRow.setString('type', ',,,Mammal');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', '$Snake ');
+ * newRow.setString('type', ',,,Reptile');
+ *
+ * table.removeTokens(',$ ');
+ * print(table.getArray());
+ * }
+ *
+ * // prints:
+ * // 0 "Lion" "Mamal"
+ * // 1 "Snake" "Reptile"
+ *
+ * function setup() {
+ * let table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', ' Lion ,');
+ * newRow.setString('type', ' Mammal ');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', ' Snake ');
+ * newRow.setString('type', ' Reptile ');
+ *
+ * table.trim();
+ * print(table.getArray());
+ * }
+ *
+ * // prints:
+ * // 0 "Lion" "Mamal"
+ * // 1 "Snake" "Reptile"
+ *
+ *
+ */
+
+ },
+ {
+ key: 'removeColumn',
+ value: function removeColumn(c) {
+ var cString;
+ var cNumber;
+ if (typeof c === 'string') {
+ // find the position of c in the columns
+ cString = c;
+ cNumber = this.columns.indexOf(c);
+ } else {
+ cNumber = c;
+ cString = this.columns[c];
+ }
+ var chunk = this.columns.splice(cNumber + 1, this.columns.length);
+ this.columns.pop();
+ this.columns = this.columns.concat(chunk);
+ for (var i = 0; i < this.rows.length; i++) {
+ var tempR = this.rows[i].arr;
+ var chip = tempR.splice(cNumber + 1, tempR.length);
+ tempR.pop();
+ this.rows[i].arr = tempR.concat(chip);
+ delete this.rows[i].obj[cString];
+ }
+ } /**
+ * Stores a value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method set
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {String|Number} value value to assign
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.removeColumn('id');
+ * print(table.getColumnCount());
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(row, column, value) {
+ this.rows[row].set(column, value);
+ } /**
+ * Stores a Float value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method setNum
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {Number} value value to assign
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.set(0, 'species', 'Canis Lupus');
+ * table.set(0, 'name', 'Wolf');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setNum',
+ value: function setNum(row, column, value) {
+ this.rows[row].setNum(column, value);
+ } /**
+ * Stores a String value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method setString
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {String} value value to assign
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.setNum(1, 'id', 1);
+ *
+ * print(table.getColumn(0));
+ * //["0", 1, "2"]
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(row, column) {
+ return this.rows[row].get(column);
+ } /**
+ * Retrieves a Float value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @method getNum
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {Number}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.get(0, 1));
+ * //Capra hircus
+ * print(table.get(0, 'species'));
+ * //Capra hircus
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getNum',
+ value: function getNum(row, column) {
+ return this.rows[row].getNum(column);
+ } /**
+ * Retrieves a String value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @method getString
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.getNum(1, 0) + 100);
+ * //id 1 + 100 = 101
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getString',
+ value: function getString(row, column) {
+ return this.rows[row].getString(column);
+ } /**
+ * Retrieves all table data and returns as an object. If a column name is
+ * passed in, each row object will be stored with that attribute as its
+ * title.
+ *
+ * @method getObject
+ * @param {String} [headerColumn] Name of the column which should be used to
+ * title each row object (optional)
+ * @return {Object}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.getString(0, 0)); // 0
+ * print(table.getString(0, 1)); // Capra hircus
+ * print(table.getString(0, 2)); // Goat
+ * print(table.getString(1, 0)); // 1
+ * print(table.getString(1, 1)); // Panthera pardus
+ * print(table.getString(1, 2)); // Leopard
+ * print(table.getString(2, 0)); // 2
+ * print(table.getString(2, 1)); // Equus zebra
+ * print(table.getString(2, 2)); // Zebra
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getObject',
+ value: function getObject(headerColumn) {
+ var tableObject = {
+ };
+ var obj,
+ cPos,
+ index;
+ for (var i = 0; i < this.rows.length; i++) {
+ obj = this.rows[i].obj;
+ if (typeof headerColumn === 'string') {
+ cPos = this.columns.indexOf(headerColumn); // index of columnID
+ if (cPos >= 0) {
+ index = obj[headerColumn];
+ tableObject[index] = obj;
+ } else {
+ throw new Error('This table has no column named "'.concat(headerColumn, '"'));
+ }
+ } else {
+ tableObject[i] = this.rows[i].obj;
+ }
+ }
+ return tableObject;
+ } /**
+ * Retrieves all table data and returns it as a multidimensional array.
+ *
+ * @method getArray
+ * @return {Array}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableObject = table.getObject();
+ *
+ * print(tableObject);
+ * //outputs an object
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getArray',
+ value: function getArray() {
+ var tableArray = [
+ ];
+ for (var i = 0; i < this.rows.length; i++) {
+ tableArray.push(this.rows[i].arr);
+ }
+ return tableArray;
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.regexp.constructor': 209,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.match': 216,
+ 'core-js/modules/es.string.replace': 219
+ }
+ ],
+ 331: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.from-entries');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.from-entries');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module IO
+ * @submodule Table
+ * @requires core
+ */
+ /**
+ * A TableRow object represents a single row of data values,
+ * stored in columns, from a table.
+ *
+ * A Table Row contains both an ordered array, and an unordered
+ * JSON object.
+ *
+ * @class p5.TableRow
+ * @constructor
+ * @param {String} [str] optional: populate the row with a
+ * string of values, separated by the
+ * separator
+ * @param {String} [separator] comma separated values (csv) by default
+ */
+
+ _main.default.TableRow = /*#__PURE__*/ function () {
+ function _class(str, separator) {
+ _classCallCheck(this, _class);
+ var arr = [
+ ];
+ if (str) {
+ separator = separator || ',';
+ arr = str.split(separator);
+ }
+ this.arr = arr;
+ this.obj = Object.fromEntries(arr.entries());
+ this.table = null;
+ } /**
+ * Stores a value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method set
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {String|Number} value The value to be stored
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leoperd
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableArray = table.getArray();
+ * for (let i = 0; i < tableArray.length; i++) {
+ * print(tableArray[i]);
+ * }
+ * describe('no image displayed');
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].setNum('id', r + 10);
+ * }
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * let name = rows[r].getString('name');
+ * rows[r].setString('name', 'A ' + name + ' named George');
+ * }
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let names = [];
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * names.push(rows[r].get('name'));
+ * }
+ *
+ * print(names);
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let minId = Infinity;
+ * let maxId = -Infinity;
+ * for (let r = 0; r < rows.length; r++) {
+ * let id = rows[r].getNum('id');
+ * minId = min(minId, id);
+ * maxId = min(maxId, id);
+ * }
+ * print('minimum id = ' + minId + ', maximum id = ' + maxId);
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let longest = '';
+ * for (let r = 0; r < rows.length; r++) {
+ * let species = rows[r].getString('species');
+ * if (longest.length < species.length) {
+ * longest = species;
+ * }
+ * }
+ *
+ * print('longest: ' + longest);
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ */
+
+ _main.default.XML = /*#__PURE__*/ function () {
+ function _class(DOM) {
+ _classCallCheck(this, _class);
+ if (!DOM) {
+ var xmlDoc = document.implementation.createDocument(null, 'doc');
+ this.DOM = xmlDoc.createElement('root');
+ } else {
+ this.DOM = DOM;
+ }
+ } /**
+ * Returns the element's parent element as a new p5.XML
+ * object.
+ *
+ * @method getParent
+ * @return {p5.XML} parent element.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array with all mammal tags.
+ * let mammals = myXML.getChildren('mammal');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the mammals array.
+ * for (let i = 0; i < mammals.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Get the mammal's common name.
+ * let name = mammals[i].getContent();
+ *
+ * // Display the mammal's name.
+ * text(name, 20, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'getParent',
+ value: function getParent() {
+ return new _main.default.XML(this.DOM.parentElement);
+ } /**
+ * Returns the element's name as a `String`.
+ *
+ * An XML element's name is given by its tag. For example, the element
+ * `<language>JavaScript</language>` has the name `language`.
+ *
+ * @method getName
+ * @return {String} name of the element.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array with all mammal elements.
+ * let mammals = myXML.getChildren('mammal');
+ *
+ * // Get the first mammal element.
+ * let firstMammal = mammals[0];
+ *
+ * // Get the parent element.
+ * let parent = firstMammal.getParent();
+ *
+ * // Get the parent element's name.
+ * let name = parent.getName();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the parent element's name.
+ * text(name, 50, 50);
+ *
+ * describe('The word "animals" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getName',
+ value: function getName() {
+ return this.DOM.tagName;
+ } /**
+ * Sets the element's tag name.
+ *
+ * An XML element's name is given by its tag. For example, the element
+ * `<language>JavaScript</language>` has the name `language`.
+ *
+ * The parameter, `name`, is the element's new name as a string. For example,
+ * calling `myXML.setName('planet')` will make the element's new tag name
+ * `<planet></planet>`.
+ *
+ * @method setName
+ * @param {String} name new tag name of the element.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array with all mammal elements.
+ * let mammals = myXML.getChildren('mammal');
+ *
+ * // Get the first mammal element.
+ * let firstMammal = mammals[0];
+ *
+ * // Get the mammal element's name.
+ * let name = firstMammal.getName();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's name.
+ * text(name, 50, 50);
+ *
+ * describe('The word "mammal" written in black on a gray background.');
+ * }
+ *
+
+ *
+ */
+
+ },
+ {
+ key: 'setName',
+ value: function setName(name) {
+ var content = this.DOM.innerHTML;
+ var attributes = this.DOM.attributes;
+ var xmlDoc = document.implementation.createDocument(null, 'default');
+ var newDOM = xmlDoc.createElement(name);
+ newDOM.innerHTML = content;
+ for (var i = 0; i < attributes.length; i++) {
+ newDOM.setAttribute(attributes[i].nodeName, attributes[i].nodeValue);
+ }
+ this.DOM = newDOM;
+ } /**
+ * Returns `true` if the element has child elements and `false` if not.
+ *
+ * @method hasChildren
+ * @return {boolean} whether the element has children.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the element's original name.
+ * let oldName = myXML.getName();
+ *
+ * // Set the element's name.
+ * myXML.setName('monsters');
+ *
+ * // Get the element's new name.
+ * let newName = myXML.getName();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's names.
+ * text(oldName, 50, 33);
+ * text(newName, 50, 67);
+ *
+ * describe(
+ * 'The words "animals" and "monsters" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'hasChildren',
+ value: function hasChildren() {
+ return this.DOM.children.length > 0;
+ } /**
+ * Returns an array with the names of the element's child elements as
+ * `String`s.
+ *
+ * @method listChildren
+ * @return {String[]} names of the child elements.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Check whether the element has child elements.
+ * let isParent = myXML.hasChildren();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Style the text.
+ * if (isParent === true) {
+ * text('Parent', 50, 50);
+ * } else {
+ * text('Not Parent', 50, 50);
+ * }
+ *
+ * describe('The word "Parent" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'listChildren',
+ value: function listChildren() {
+ var arr = [
+ ];
+ for (var i = 0; i < this.DOM.childNodes.length; i++) {
+ arr.push(this.DOM.childNodes[i].nodeName);
+ }
+ return arr;
+ } /**
+ * Returns an array with the element's child elements as new
+ * p5.XML objects.
+ *
+ * The parameter, `name`, is optional. If a string is passed, as in
+ * `myXML.getChildren('cat')`, then the method will only return child elements
+ * with the tag `<cat>`.
+ *
+ * @method getChildren
+ * @param {String} [name] name of the elements to return.
+ * @return {p5.XML[]} child elements.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the names of the element's children as an array.
+ * let children = myXML.listChildren();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the child element's name.
+ * text(children[i], 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "mammal", "mammal", "mammal", and "reptile" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array of the child elements.
+ * let children = myXML.getChildren();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Get the child element's content.
+ * let content = children[i].getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", "Zebra", and "Turtle" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getChildren',
+ value: function getChildren(param) {
+ if (param) {
+ return elementsToP5XML(this.DOM.getElementsByTagName(param));
+ } else {
+ return elementsToP5XML(this.DOM.children);
+ }
+ } /**
+ * Returns the first matching child element as a new
+ * p5.XML object.
+ *
+ * The parameter, `name`, is optional. If a string is passed, as in
+ * `myXML.getChild('cat')`, then the first child element with the tag
+ * `<cat>` will be returned. If a number is passed, as in
+ * `myXML.getChild(1)`, then the child element at that index will be returned.
+ *
+ * @method getChild
+ * @param {String|Integer} name element name or index.
+ * @return {p5.XML} child element.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array of the child elements
+ * // that are mammals.
+ * let children = myXML.getChildren('mammal');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Get the child element's content.
+ * let content = children[i].getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", and "Zebra" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first child element that is a mammal.
+ * let goat = myXML.getChild('mammal');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Get the child element's content.
+ * let content = goat.getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 50, 50);
+ *
+ * describe('The word "Goat" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getChild',
+ value: function getChild(param) {
+ if (typeof param === 'string') {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.DOM.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var child = _step.value;
+ if (child.tagName === param) return new _main.default.XML(child);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ } else {
+ return new _main.default.XML(this.DOM.children[param]);
+ }
+ } /**
+ * Adds a new child element and returns a reference to it.
+ *
+ * The parameter, `child`, is the p5.XML object to add
+ * as a child element. For example, calling `myXML.addChild(otherXML)` inserts
+ * `otherXML` as a child element of `myXML`.
+ *
+ * @method addChild
+ * @param {p5.XML} child child element to add.
+ * @return {p5.XML} added child element.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the child element at index 1.
+ * let leopard = myXML.getChild(1);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Get the child element's content.
+ * let content = leopard.getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 50, 50);
+ *
+ * describe('The word "Leopard" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'addChild',
+ value: function addChild(node) {
+ if (node instanceof _main.default.XML) {
+ this.DOM.appendChild(node.DOM);
+ } else {
+ // PEND
+ }
+ } /**
+ * Removes the first matching child element.
+ *
+ * The parameter, `name`, is the child element to remove. If a string is
+ * passed, as in `myXML.removeChild('cat')`, then the first child element
+ * with the tag `<cat>` will be removed. If a number is passed, as in
+ * `myXML.removeChild(1)`, then the child element at that index will be
+ * removed.
+ *
+ * @method removeChild
+ * @param {String|Integer} name name or index of the child element to remove.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a new p5.XML object.
+ * let newAnimal = new p5.XML();
+ *
+ * // Set its properties.
+ * newAnimal.setName('hydrozoa');
+ * newAnimal.setAttribute('id', 4);
+ * newAnimal.setAttribute('species', 'Physalia physalis');
+ * newAnimal.setContent('Bluebottle');
+ *
+ * // Add the child element.
+ * myXML.addChild(newAnimal);
+ *
+ * // Get the first child element that is a hydrozoa.
+ * let blueBottle = myXML.getChild('hydrozoa');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Get the child element's content.
+ * let content = blueBottle.getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 50, 50);
+ *
+ * describe('The word "Bluebottle" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Remove the first mammal element.
+ * myXML.removeChild('mammal');
+ *
+ * // Get an array of child elements.
+ * let children = myXML.getChildren();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Get the child element's content.
+ * let content = children[i].getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "Leopard", "Zebra", and "Turtle" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'removeChild',
+ value: function removeChild(param) {
+ var ind = - 1;
+ if (typeof param === 'string') {
+ for (var i = 0; i < this.DOM.children.length; i++) {
+ if (this.DOM.children[i].tagName === param) {
+ ind = i;
+ break;
+ }
+ }
+ } else {
+ ind = param;
+ }
+ if (ind !== - 1) {
+ this.DOM.removeChild(this.DOM.children[ind]);
+ }
+ } /**
+ * Returns the number of attributes the element has.
+ *
+ * @method getAttributeCount
+ * @return {Integer} number of attributes.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Remove the element at index 2.
+ * myXML.removeChild(2);
+ *
+ * // Get an array of child elements.
+ * let children = myXML.getChildren();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Get the child element's content.
+ * let content = children[i].getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", and "Turtle" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getAttributeCount',
+ value: function getAttributeCount() {
+ return this.DOM.attributes.length;
+ } /**
+ * Returns an `Array` with the names of the element's attributes.
+ *
+ * Note: Use
+ * myXML.getString() or
+ * myXML.getNum() to return an attribute's value.
+ *
+ * @method listAttributes
+ * @return {String[]} attribute names.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first child element.
+ * let first = myXML.getChild(0);
+ *
+ * // Get the number of attributes.
+ * let numAttributes = first.getAttributeCount();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the number of attributes.
+ * text(numAttributes, 50, 50);
+ *
+ * describe('The number "2" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'listAttributes',
+ value: function listAttributes() {
+ var arr = [
+ ];
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = this.DOM.attributes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var attribute = _step2.value;
+ arr.push(attribute.nodeName);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ return arr;
+ } /**
+ * Returns `true` if the element has a given attribute and `false` if not.
+ *
+ * The parameter, `name`, is a string with the name of the attribute being
+ * checked.
+ *
+ * Note: Use
+ * myXML.getString() or
+ * myXML.getNum() to return an attribute's value.
+ *
+ * @method hasAttribute
+ * @param {String} name name of the attribute to be checked.
+ * @return {boolean} whether the element has the attribute.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first child element.
+ * let first = myXML.getChild(0);
+ *
+ * // Get the number of attributes.
+ * let attributes = first.listAttributes();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's attributes.
+ * text(attributes, 50, 50);
+ *
+ * describe('The text "id,species" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'hasAttribute',
+ value: function hasAttribute(name) {
+ var obj = {
+ };
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = this.DOM.attributes[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var attribute = _step3.value;
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ return obj[name] ? true : false;
+ } /**
+ * Return an attribute's value as a `Number`.
+ *
+ * The first parameter, `name`, is a string with the name of the attribute
+ * being checked. For example, calling `myXML.getNum('id')` returns the
+ * element's `id` attribute as a number.
+ *
+ * The second parameter, `defaultValue`, is optional. If a number is passed,
+ * as in `myXML.getNum('id', -1)`, it will be returned if the attribute
+ * doesn't exist or can't be converted to a number.
+ *
+ * Note: Use
+ * myXML.getString() or
+ * myXML.getNum() to return an attribute's value.
+ *
+ * @method getNum
+ * @param {String} name name of the attribute to be checked.
+ * @param {Number} [defaultValue] value to return if the attribute doesn't exist.
+ * @return {Number} attribute value as a number.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first mammal child element.
+ * let mammal = myXML.getChild('mammal');
+ *
+ * // Check whether the element has an
+ * // species attribute.
+ * let hasSpecies = mammal.hasAttribute('species');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display whether the element has a species attribute.
+ * if (hasSpecies === true) {
+ * text('Species', 50, 50);
+ * } else {
+ * text('No species', 50, 50);
+ * }
+ *
+ * describe('The text "Species" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's ID.
+ * let id = reptile.getNum('id');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the ID attribute.
+ * text(`${content} is ${id + 1}th`, 5, 50, 90);
+ *
+ * describe(`The text "${content} is ${id + 1}th" written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getNum',
+ value: function getNum(name, defaultValue) {
+ var obj = {
+ };
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ for (var _iterator4 = this.DOM.attributes[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ var attribute = _step4.value;
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ return Number(obj[name]) || defaultValue || 0;
+ } /**
+ * Return an attribute's value as a string.
+ *
+ * The first parameter, `name`, is a string with the name of the attribute
+ * being checked. For example, calling `myXML.getString('color')` returns the
+ * element's `id` attribute as a string.
+ *
+ * The second parameter, `defaultValue`, is optional. If a string is passed,
+ * as in `myXML.getString('color', 'deeppink')`, it will be returned if the
+ * attribute doesn't exist.
+ *
+ * Note: Use
+ * myXML.getString() or
+ * myXML.getNum() to return an attribute's value.
+ *
+ * @method getString
+ * @param {String} name name of the attribute to be checked.
+ * @param {Number} [defaultValue] value to return if the attribute doesn't exist.
+ * @return {String} attribute value as a string.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's size.
+ * let weight = reptile.getNum('weight', 135);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the ID attribute.
+ * text(`${content} is ${weight}kg`, 5, 50, 90);
+ *
+ * describe(
+ * `The text "${content} is ${weight}kg" written in black on a gray background.`
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's species.
+ * let species = reptile.getString('species');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the species attribute.
+ * text(`${content}: ${species}`, 5, 50, 90);
+ *
+ * describe(`The text "${content}: ${species}" written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getString',
+ value: function getString(name, defaultValue) {
+ var obj = {
+ };
+ var _iteratorNormalCompletion5 = true;
+ var _didIteratorError5 = false;
+ var _iteratorError5 = undefined;
+ try {
+ for (var _iterator5 = this.DOM.attributes[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
+ var attribute = _step5.value;
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
+ } catch (err) {
+ _didIteratorError5 = true;
+ _iteratorError5 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion5 && _iterator5.return != null) {
+ _iterator5.return();
+ }
+ } finally {
+ if (_didIteratorError5) {
+ throw _iteratorError5;
+ }
+ }
+ }
+ return obj[name] ? String(obj[name]) : defaultValue || null;
+ } /**
+ * Sets an attribute to a given value.
+ *
+ * The first parameter, `name`, is a string with the name of the attribute
+ * being set.
+ *
+ * The second parameter, `value`, is the attribute's new value. For example,
+ * calling `myXML.setAttribute('id', 123)` sets the `id` attribute to the
+ * value 123.
+ *
+ * @method setAttribute
+ * @param {String} name name of the attribute to be set.
+ * @param {Number|String|Boolean} value attribute's new value.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's color.
+ * let attribute = reptile.getString('color', 'green');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ * fill(attribute);
+ *
+ * // Display the element's content.
+ * text(content, 50, 50);
+ *
+ * describe(`The text "${content}" written in green on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setAttribute',
+ value: function setAttribute(name, value) {
+ this.DOM.setAttribute(name, value);
+ } /**
+ * Returns the element's content as a `String`.
+ *
+ * The parameter, `defaultValue`, is optional. If a string is passed, as in
+ * `myXML.getContent('???')`, it will be returned if the element has no
+ * content.
+ *
+ * @method getContent
+ * @param {String} [defaultValue] value to return if the element has no
+ * content.
+ * @return {String} element's content as a string.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Set the reptile's color.
+ * reptile.setAttribute('color', 'green');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's color.
+ * let attribute = reptile.getString('color');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's content.
+ * text(`${content} is ${attribute}`, 5, 50, 90);
+ *
+ * describe(
+ * `The text "${content} is ${attribute}" written in green on a gray background.`
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's content.
+ * text(content, 5, 50, 90);
+ *
+ * describe(`The text "${content}" written in green on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getContent',
+ value: function getContent(defaultValue) {
+ var str;
+ str = this.DOM.textContent;
+ str = str.replace(/\s\s+/g, ',');
+ return str || defaultValue || null;
+ } /**
+ * Sets the element's content.
+ *
+ * An element's content is the text between its tags. For example, the element
+ * `<language>JavaScript</language>` has the content `JavaScript`.
+ *
+ * The parameter, `content`, is a string with the element's new content.
+ *
+ * @method setContent
+ * @param {String} content new content for the element.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.XML object.
+ * let blankSpace = new p5.XML();
+ *
+ * // Get the element's content and use a default value.
+ * let content = blankSpace.getContent('Your name');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's content.
+ * text(content, 5, 50, 90);
+ *
+ * describe(`The text "${content}" written in green on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setContent',
+ value: function setContent(content) {
+ if (!this.DOM.children.length) {
+ this.DOM.textContent = content;
+ }
+ } /**
+ * Returns the element as a `String`.
+ *
+ * `myXML.serialize()` is useful for sending the element over the network or
+ * saving it to a file.
+ *
+ * @method serialize
+ * @return {String} element as a string.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's original content.
+ * let oldContent = reptile.getContent();
+ *
+ * // Set the reptile's content.
+ * reptile.setContent('Loggerhead');
+ *
+ * // Get the reptile's new content.
+ * let newContent = reptile.getContent();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's old and new content.
+ * text(`${oldContent}: ${newContent}`, 5, 50, 90);
+ *
+ * describe(
+ * `The text "${oldContent}: ${newContent}" written in green on a gray background.`
+ * );
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'serialize',
+ value: function serialize() {
+ var xmlSerializer = new XMLSerializer();
+ return xmlSerializer.serializeToString(this.DOM);
+ }
+ }
+ ]);
+ return _class;
+ }();
+ function elementsToP5XML(elements) {
+ var arr = [
+ ];
+ for (var i = 0; i < elements.length; i++) {
+ arr.push(new _main.default.XML(elements[i]));
+ }
+ return arr;
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.number.constructor': 196,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 333: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.string.includes');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * @module Math
+ * @submodule Calculation
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Calculates the absolute value of a number.
+ *
+ * A number's absolute value is its distance from zero on the number line.
+ * -5 and 5 are both five units away from zero, so calling `abs(-5)` and
+ * `abs(5)` both return 5. The absolute value of a number is always positive.
+ *
+ * @method abs
+ * @param {Number} n number to compute.
+ * @return {Number} absolute value of given number.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * // Use the file format .xml.
+ * let myWriter = createWriter('animals', 'xml');
+ *
+ * // Serialize the XML data to a string.
+ * let data = myXML.serialize();
+ *
+ * // Write the data to the print stream.
+ * myWriter.write(data);
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.abs = Math.abs;
+ /**
+ * Calculates the closest integer value that is greater than or equal to a
+ * number.
+ *
+ * For example, calling `ceil(9.03)` and `ceil(9.97)` both return the value
+ * 10.
+ *
+ * @method ceil
+ * @param {Number} n number to round up.
+ * @return {Integer} rounded up number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Divide the canvas.
+ * line(50, 0, 50, 100);
+ *
+ * // Calculate the mouse's distance from the middle.
+ * let h = abs(mouseX - 50);
+ *
+ * // Draw a rectangle based on the mouse's distance
+ * // from the middle.
+ * rect(0, 100 - h, 100, h);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.ceil = Math.ceil;
+ /**
+ * Constrains a number between a minimum and maximum value.
+ *
+ * @method constrain
+ * @param {Number} n number to constrain.
+ * @param {Number} low minimum limit.
+ * @param {Number} high maximum limit.
+ * @return {Number} constrained number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use RGB color with values from 0 to 1.
+ * colorMode(RGB, 1);
+ *
+ * noStroke();
+ *
+ * // Draw the left rectangle.
+ * let r = 0.3;
+ * fill(r, 0, 0);
+ * rect(0, 0, 50, 100);
+ *
+ * // Round r up to 1.
+ * r = ceil(r);
+ *
+ * // Draw the right rectangle.
+ * fill(r, 0, 0);
+ * rect(50, 0, 50, 100);
+ *
+ * describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let x = constrain(mouseX, 33, 67);
+ * let y = 50;
+ *
+ * strokeWeight(5);
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.constrain = function (n, low, high) {
+ _main.default._validateParameters('constrain', arguments);
+ return Math.max(Math.min(n, high), low);
+ };
+ /**
+ * Calculates the distance between two points.
+ *
+ * The version of `dist()` with four parameters calculates distance in two
+ * dimensions.
+ *
+ * The version of `dist()` with six parameters calculates distance in three
+ * dimensions.
+ *
+ * Use p5.Vector.dist() to calculate the
+ * distance between two p5.Vector objects.
+ *
+ * @method dist
+ * @param {Number} x1 x-coordinate of the first point.
+ * @param {Number} y1 y-coordinate of the first point.
+ * @param {Number} x2 x-coordinate of the second point.
+ * @param {Number} y2 y-coordinate of the second point.
+ * @return {Number} distance between the two points.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set boundaries and draw them.
+ * let leftWall = 25;
+ * let rightWall = 75;
+ * line(leftWall, 0, leftWall, 100);
+ * line(rightWall, 0, rightWall, 100);
+ *
+ * // Draw a circle that follows the mouse freely.
+ * fill(255);
+ * circle(mouseX, 33, 9);
+ *
+ * // Draw a circle that's constrained.
+ * let xc = constrain(mouseX, leftWall, rightWall);
+ * fill(0);
+ * circle(xc, 67, 9);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method dist
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate of the first point.
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate of the second point.
+ * @return {Number} distance between the two points.
+ */
+ _main.default.prototype.dist = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('dist', args);
+ if (args.length === 4) {
+ //2D
+ return Math.hypot(args[2] - args[0], args[3] - args[1]);
+ } else if (args.length === 6) {
+ //3D
+ return Math.hypot(args[3] - args[0], args[4] - args[1], args[5] - args[2]);
+ }
+ };
+ /**
+ * Calculates the value of Euler's number e (2.71828...) raised to the power
+ * of a number.
+ *
+ * @method exp
+ * @param {Number} n exponent to raise.
+ * @return {Number} e^n
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the coordinates.
+ * let x1 = 10;
+ * let y1 = 50;
+ * let x2 = 90;
+ * let y2 = 50;
+ *
+ * // Draw the points and a line connecting them.
+ * line(x1, y1, x2, y2);
+ * strokeWeight(5);
+ * point(x1, y1);
+ * point(x2, y2);
+ *
+ * // Calculate the distance.
+ * let d = dist(x1, y1, x2, y2);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the distance.
+ * text(d, 43, 40);
+ *
+ * describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top-left.
+ * let d = exp(1);
+ * circle(10, 10, d);
+ *
+ * // Left-center.
+ * d = exp(2);
+ * circle(20, 20, d);
+ *
+ * // Right-center.
+ * d = exp(3);
+ * circle(40, 40, d);
+ *
+ * // Bottom-right.
+ * d = exp(4);
+ * circle(80, 80, d);
+ *
+ * describe('A series of circles that grow exponentially from top left to bottom right.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.exp = Math.exp;
+ /**
+ * Calculates the closest integer value that is less than or equal to the
+ * value of a number.
+ *
+ * @method floor
+ * @param {Number} n number to round down.
+ * @return {Integer} rounded down number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots that grow exponentially from left to right.');
+ * }
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -100);
+ *
+ * // Calculate the coordinates.
+ * let x = frameCount;
+ * let y = 0.005 * exp(x * 0.1);
+ *
+ * // Draw a point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.floor = Math.floor;
+ /**
+ * Calculates a number between two numbers at a specific increment.
+ *
+ * The `amt` parameter is the amount to interpolate between the two numbers.
+ * 0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is
+ * half-way in between, and 1.0 is equal to the second number. The `lerp()`
+ * function is convenient for creating motion along a straight path and for
+ * drawing dotted lines.
+ *
+ * If the value of `amt` is less than 0 or more than 1, `lerp()` will return a
+ * number outside of the original interval. For example, calling
+ * `lerp(0, 10, 1.5)` will return 15.
+ *
+ * @method lerp
+ * @param {Number} start first value.
+ * @param {Number} stop second value.
+ * @param {Number} amt number.
+ * @return {Number} lerped value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use RGB color with values from 0 to 1.
+ * colorMode(RGB, 1);
+ *
+ * noStroke();
+ *
+ * // Draw the left rectangle.
+ * let r = 0.8;
+ * fill(r, 0, 0);
+ * rect(0, 0, 50, 100);
+ *
+ * // Round r down to 0.
+ * r = floor(r);
+ *
+ * // Draw the right rectangle.
+ * fill(r, 0, 0);
+ * rect(50, 0, 50, 100);
+ *
+ * describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Declare variables for coordinates.
+ * let a = 20;
+ * let b = 80;
+ * let c = lerp(a, b, 0.2);
+ * let d = lerp(a, b, 0.5);
+ * let e = lerp(a, b, 0.8);
+ *
+ * strokeWeight(5);
+ *
+ * // Draw the original points in black.
+ * stroke(0);
+ * point(a, 50);
+ * point(b, 50);
+ *
+ * // Draw the lerped points in gray.
+ * stroke(100);
+ * point(c, 50);
+ * point(d, 50);
+ * point(e, 50);
+ *
+ * describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.lerp = function (start, stop, amt) {
+ _main.default._validateParameters('lerp', arguments);
+ return amt * (stop - start) + start;
+ };
+ /**
+ * Calculates the natural logarithm (the base-e logarithm) of a number.
+ *
+ * `log()` expects the `n` parameter to be a value greater than 0 because
+ * the natural logarithm is defined that way.
+ *
+ * @method log
+ * @param {Number} n number greater than 0.
+ * @return {Number} natural logarithm of n.
+ *
+ * @example
+ *
+ * let x = 50;
+ * let y = 50;
+ * let targetX = 50;
+ * let targetY = 50;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');
+ * }
+ *
+ * function draw() {
+ * background(220);
+ *
+ * // Move x and y toward the target.
+ * x = lerp(x, targetX, 0.05);
+ * y = lerp(y, targetY, 0.05);
+ *
+ * // Draw the circle.
+ * circle(x, y, 20);
+ * }
+ *
+ * // Set x and y when the user clicks the mouse.
+ * function mouseClicked() {
+ * x = mouseX;
+ * y = mouseY;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top-left.
+ * let d = log(50);
+ * circle(33, 33, d);
+ *
+ * // Bottom-right.
+ * d = log(500000000);
+ * circle(67, 67, d);
+ *
+ * describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.log = Math.log;
+ /**
+ * Calculates the magnitude, or length, of a vector.
+ *
+ * A vector can be thought of in different ways. In one view, a vector is a
+ * point in space. The vector's components, `x` and `y`, are the point's
+ * coordinates `(x, y)`. A vector's magnitude is the distance from the origin
+ * `(0, 0)` to `(x, y)`. `mag(x, y)` is a shortcut for calling
+ * `dist(0, 0, x, y)`.
+ *
+ * A vector can also be thought of as an arrow pointing in space. This view is
+ * helpful for programming motion. See p5.Vector for
+ * more details.
+ *
+ * Use p5.Vector.mag() to calculate the
+ * magnitude of a p5.Vector object.
+ *
+ * @method mag
+ * @param {Number} x first component.
+ * @param {Number} y second component.
+ * @return {Number} magnitude of vector.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots that get higher slowly from left to right.');
+ * }
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -100);
+ *
+ * // Calculate coordinates.
+ * let x = frameCount;
+ * let y = 15 * log(x);
+ *
+ * // Draw a point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mag = function (x, y) {
+ _main.default._validateParameters('mag', arguments);
+ return Math.hypot(x, y);
+ };
+ /**
+ * Re-maps a number from one range to another.
+ *
+ * For example, calling `map(2, 0, 10, 0, 100)` returns 20. The first three
+ * arguments set the original value to 2 and the original range from 0 to 10.
+ * The last two arguments set the target range from 0 to 100. 20's position
+ * in the target range [0, 100] is proportional to 2's position in the
+ * original range [0, 10].
+ *
+ * The sixth parameter, `withinBounds`, is optional. By default, `map()` can
+ * return values outside of the target range. For example,
+ * `map(11, 0, 10, 0, 100)` returns 110. Passing `true` as the sixth parameter
+ * constrains the remapped value to the target range. For example,
+ * `map(11, 0, 10, 0, 100, true)` returns 100.
+ *
+ * @method map
+ * @param {Number} value the value to be remapped.
+ * @param {Number} start1 lower bound of the value's current range.
+ * @param {Number} stop1 upper bound of the value's current range.
+ * @param {Number} start2 lower bound of the value's target range.
+ * @param {Number} stop2 upper bound of the value's target range.
+ * @param {Boolean} [withinBounds] constrain the value to the newly mapped range.
+ * @return {Number} remapped number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the vector's components.
+ * let x = 30;
+ * let y = 40;
+ *
+ * // Calculate the magnitude.
+ * let m = mag(x, y);
+ *
+ * // Style the text.
+ * textSize(16);
+ *
+ * // Display the vector and its magnitude.
+ * line(0, 0, x, y);
+ * text(m, x, y);
+ *
+ * describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the top line.
+ * line(0, 25, mouseX, 25);
+ *
+ * // Remap mouseX from [0, 100] to [0, 50].
+ * let x = map(mouseX, 0, 100, 0, 50);
+ *
+ * // Draw the bottom line.
+ * line(0, 75, x, 75);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.map = function (n, start1, stop1, start2, stop2, withinBounds) {
+ _main.default._validateParameters('map', arguments);
+ var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+ if (!withinBounds) {
+ return newval;
+ }
+ if (start2 < stop2) {
+ return this.constrain(newval, start2, stop2);
+ } else {
+ return this.constrain(newval, stop2, start2);
+ }
+ };
+ /**
+ * Returns the largest value in a sequence of numbers.
+ *
+ * The version of `max()` with one parameter interprets it as an array of
+ * numbers and returns the largest number.
+ *
+ * The version of `max()` with two or more parameters interprets them as
+ * individual numbers and returns the largest number.
+ *
+ * @method max
+ * @param {Number} n0 first number to compare.
+ * @param {Number} n1 second number to compare.
+ * @return {Number} maximum number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A circle changes color from black to white as the mouse moves from left to right.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Remap mouseX from [0, 100] to [0, 255]
+ * let c = map(mouseX, 0, 100, 0, 255);
+ *
+ * // Style the circle.
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(50, 50, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate the maximum of 10, 5, and 20.
+ * let m = max(10, 5, 20);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the max.
+ * text(m, 50, 50);
+ *
+ * describe('The number 20 written in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method max
+ * @param {Number[]} nums numbers to compare.
+ * @return {Number}
+ */
+ _main.default.prototype.max = function () {
+ var findMax = function findMax(arr) {
+ return Math.max.apply(Math, _toConsumableArray(arr));
+ };
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ if (Array.isArray(args[0])) {
+ return findMax(args[0]);
+ } else {
+ return findMax(args);
+ }
+ };
+ /**
+ * Returns the smallest value in a sequence of numbers.
+ *
+ * The version of `min()` with one parameter interprets it as an array of
+ * numbers and returns the smallest number.
+ *
+ * The version of `min()` with two or more parameters interprets them as
+ * individual numbers and returns the smallest number.
+ *
+ * @method min
+ * @param {Number} n0 first number to compare.
+ * @param {Number} n1 second number to compare.
+ * @return {Number} minimum number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let numbers = [10, 5, 20];
+ *
+ * // Calculate the maximum of the array.
+ * let m = max(numbers);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the max.
+ * text(m, 50, 50);
+ *
+ * describe('The number 20 written in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate the minimum of 10, 5, and 20.
+ * let m = min(10, 5, 20);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the min.
+ * text(m, 50, 50);
+ *
+ * describe('The number 5 written in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method min
+ * @param {Number[]} nums numbers to compare.
+ * @return {Number}
+ */
+ _main.default.prototype.min = function () {
+ var findMin = function findMin(arr) {
+ return Math.min.apply(Math, _toConsumableArray(arr));
+ };
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ if (Array.isArray(args[0])) {
+ return findMin(args[0]);
+ } else {
+ return findMin(args);
+ }
+ };
+ /**
+ * Maps a number from one range to a value between 0 and 1.
+ *
+ * For example, `norm(2, 0, 10)` returns 0.2. 2's position in the original
+ * range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
+ * is the same as calling `map(2, 0, 10, 0, 1)`.
+ *
+ * Numbers outside of the original range are not constrained between 0 and 1.
+ * Out-of-range values are often intentional and useful.
+ *
+ * @method norm
+ * @param {Number} value incoming value to be normalized.
+ * @param {Number} start lower bound of the value's current range.
+ * @param {Number} stop upper bound of the value's current range.
+ * @return {Number} normalized number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let numbers = [10, 5, 20];
+ *
+ * // Calculate the minimum of the array.
+ * let m = min(numbers);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the min.
+ * text(m, 50, 50);
+ *
+ * describe('The number 5 written in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.norm = function (n, start, stop) {
+ _main.default._validateParameters('norm', arguments);
+ return this.map(n, start, stop, 0, 1);
+ };
+ /**
+ * Calculates exponential expressions such as 23.
+ *
+ * For example, `pow(2, 3)` evaluates the expression
+ * 2 × 2 × 2. `pow(2, -3)` evaluates 1 ÷
+ * (2 × 2 × 2).
+ *
+ * @method pow
+ * @param {Number} n base of the exponential expression.
+ * @param {Number} e power by which to raise the base.
+ * @return {Number} n^e.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use RGB color with values from 0 to 1.
+ * colorMode(RGB, 1);
+ *
+ * describe('A square changes color from black to red as the mouse moves from left to right.');
+ * }
+ *
+ * function draw() {
+ * // Calculate the redValue.
+ * let redValue = norm(mouseX, 0, 100);
+ *
+ * // Paint the background.
+ * background(redValue, 0, 0);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pow = Math.pow;
+ /**
+ * Calculates the integer closest to a number.
+ *
+ * For example, `round(133.8)` returns the value 134.
+ *
+ * The second parameter, `decimals`, is optional. It sets the number of
+ * decimal places to use when rounding. For example, `round(12.34, 1)` returns
+ * 12.3. `decimals` is 0 by default.
+ *
+ * @method round
+ * @param {Number} n number to round.
+ * @param {Number} [decimals] number of decimal places to round to, default is 0.
+ * @return {Integer} rounded number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the base of the exponent.
+ * let base = 3;
+ *
+ * // Top-left.
+ * let d = pow(base, 1);
+ * circle(10, 10, d);
+ *
+ * // Left-center.
+ * d = pow(base, 2);
+ * circle(20, 20, d);
+ *
+ * // Right-center.
+ * d = pow(base, 3);
+ * circle(40, 40, d);
+ *
+ * // Bottom-right.
+ * d = pow(base, 4);
+ * circle(80, 80, d);
+ *
+ * describe('A series of circles that grow exponentially from top left to bottom right.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Round a number.
+ * let x = round(4.2);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the rounded number.
+ * text(x, 50, 50);
+ *
+ * describe('The number 4 written in middle of the canvas.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.round = function (n, decimals) {
+ if (!decimals) {
+ return Math.round(n);
+ }
+ var multiplier = Math.pow(10, decimals);
+ return Math.round(n * multiplier) / multiplier;
+ };
+ /**
+ * Calculates the square of a number.
+ *
+ * Squaring a number means multiplying the number by itself. For example,
+ * `sq(3)` evaluates 3 × 3 which is 9. `sq(-3)` evaluates -3 × -3
+ * which is also 9. Multiplying two negative numbers produces a positive
+ * number. The value returned by `sq()` is always positive.
+ *
+ * @method sq
+ * @param {Number} n number to square.
+ * @return {Number} squared number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Round a number to 2 decimal places.
+ * let x = round(12.782383, 2);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the rounded number.
+ * text(x, 50, 50);
+ *
+ * describe('The number 12.78 written in middle of canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top-left.
+ * let d = sq(3);
+ * circle(33, 33, d);
+ *
+ * // Bottom-right.
+ * d = sq(6);
+ * circle(67, 67, d);
+ *
+ * describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.sq = function (n) {
+ return n * n;
+ };
+ /**
+ * Calculates the square root of a number.
+ *
+ * A number's square root can be multiplied by itself to produce the original
+ * number. For example, `sqrt(9)` returns 3 because 3 × 3 = 9. `sqrt()`
+ * always returns a positive value. `sqrt()` doesn't work with negative arguments
+ * such as `sqrt(-9)`.
+ *
+ * @method sqrt
+ * @param {Number} n non-negative number to square root.
+ * @return {Number} square root of number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots that get higher quickly from left to right.');
+ * }
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -100);
+ *
+ * // Calculate the coordinates.
+ * let x = frameCount;
+ * let y = 0.01 * sq(x);
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top-left.
+ * let d = sqrt(16);
+ * circle(33, 33, d);
+ *
+ * // Bottom-right.
+ * d = sqrt(1600);
+ * circle(67, 67, d);
+ *
+ * describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.sqrt = Math.sqrt;
+ /**
+ * Calculates the fractional part of a number.
+ *
+ * A number's fractional part includes its decimal values. For example,
+ * `fract(12.34)` returns 0.34.
+ *
+ * @method fract
+ * @param {Number} n number whose fractional part will be found.
+ * @returns {Number} fractional part of n.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots that get higher slowly from left to right.');
+ * }
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -100);
+ *
+ * // Calculate the coordinates.
+ * let x = frameCount;
+ * let y = 5 * sqrt(x);
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.fract = function (toConvert) {
+ _main.default._validateParameters('fract', arguments);
+ var sign = 0;
+ var num = Number(toConvert);
+ if (isNaN(num) || Math.abs(num) === Infinity) {
+ return num;
+ } else if (num < 0) {
+ num = - num;
+ sign = 1;
+ }
+ if (String(num).includes('.') && !String(num).includes('e')) {
+ var toFract = String(num);
+ toFract = Number('0' + toFract.slice(toFract.indexOf('.')));
+ return Math.abs(sign - toFract);
+ } else if (num < 1) {
+ return Math.abs(sign - num);
+ } else {
+ return 0;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.math.hypot': 193,
+ 'core-js/modules/es.number.constructor': 196,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 334: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.slice');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ function _construct(Parent, args, Class) {
+ if (isNativeReflectConstruct()) {
+ _construct = Reflect.construct;
+ } else {
+ _construct = function _construct(Parent, args, Class) {
+ var a = [
+ null
+ ];
+ a.push.apply(a, args);
+ var Constructor = Function.bind.apply(Parent, a);
+ var instance = new Constructor();
+ if (Class) _setPrototypeOf(instance, Class.prototype);
+ return instance;
+ };
+ }
+ return _construct.apply(null, arguments);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ } /**
+ * @module Math
+ * @submodule Vector
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Creates a new p5.Vector object.
+ *
+ * A vector can be thought of in different ways. In one view, a vector is like
+ * an arrow pointing in space. Vectors have both magnitude (length) and
+ * direction. This view is helpful for programming motion.
+ *
+ * A vector's components determine its magnitude and direction. For example,
+ * calling `createVector(3, 4)` creates a new
+ * p5.Vector object with an x-component of 3 and a
+ * y-component of 4. From the origin, this vector's tip is 3 units to the
+ * right and 4 units down.
+ *
+ * p5.Vector objects are often used to program
+ * motion because they simplify the math. For example, a moving ball has a
+ * position and a velocity. Position describes where the ball is in space. The
+ * ball's position vector extends from the origin to the ball's center.
+ * Velocity describes the ball's speed and the direction it's moving. If the
+ * ball is moving straight up, its velocity vector points straight up. Adding
+ * the ball's velocity vector to its position vector moves it, as in
+ * `pos.add(vel)`. Vector math relies on methods inside the
+ * p5.Vector class.
+ *
+ * @method createVector
+ * @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 {p5.Vector} new p5.Vector object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Original number.
+ * let n = 56.78;
+ * text(n, 50, 33);
+ *
+ * // Fractional part.
+ * let f = fract(n);
+ * text(f, 50, 67);
+ *
+ * describe('The number 56.78 written above the number 0.78.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let p1 = createVector(25, 25);
+ * let p2 = createVector(50, 50);
+ * let p3 = createVector(75, 75);
+ *
+ * // Draw the dots.
+ * strokeWeight(5);
+ * point(p1);
+ * point(p2);
+ * point(p3);
+ *
+ * describe('Three black dots form a diagonal line from top left to bottom right.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.createVector = function (x, y, z) {
+ if (this instanceof _main.default) {
+ return _construct(_main.default.Vector, [
+ this._fromRadians.bind(this),
+ this._toRadians.bind(this)
+ ].concat(Array.prototype.slice.call(arguments)));
+ } else {
+ return new _main.default.Vector(x, y, z);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.regexp.to-string': 211
+ }
+ ],
+ 335: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } //////////////////////////////////////////////////////////////
+ // http://mrl.nyu.edu/~perlin/noise/
+ // Adapting from PApplet.java
+ // which was adapted from toxi
+ // which was adapted from the german demo group farbrausch
+ // as used in their demo "art": http://www.farb-rausch.de/fr010src.zip
+ // someday we might consider using "improved noise"
+ // http://mrl.nyu.edu/~perlin/paper445.pdf
+ // See: https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/
+ // blob/main/introduction/Noise1D/noise.js
+ /**
+ * @module Math
+ * @submodule Noise
+ * @for p5
+ * @requires core
+ */
+
+ var PERLIN_YWRAPB = 4;
+ var PERLIN_YWRAP = 1 << PERLIN_YWRAPB;
+ var PERLIN_ZWRAPB = 8;
+ var PERLIN_ZWRAP = 1 << PERLIN_ZWRAPB;
+ var PERLIN_SIZE = 4095;
+ var perlin_octaves = 4; // default to medium smooth
+ var perlin_amp_falloff = 0.5; // 50% reduction/octave
+ var scaled_cosine = function scaled_cosine(i) {
+ return 0.5 * (1 - Math.cos(i * Math.PI));
+ };
+ var perlin; // will be initialized lazily by noise() or noiseSeed()
+ /**
+ * Returns random numbers that can be tuned to feel organic.
+ *
+ * Values returned by random() and
+ * randomGaussian() can change by large
+ * amounts between function calls. By contrast, values returned by `noise()`
+ * can be made "smooth". Calls to `noise()` with similar inputs will produce
+ * similar outputs. `noise()` is used to create textures, motion, shapes,
+ * terrains, and so on. Ken Perlin invented `noise()` while animating the
+ * original Tron film in the 1980s.
+ *
+ * `noise()` always returns values between 0 and 1. It returns the same value
+ * for a given input while a sketch is running. `noise()` produces different
+ * results each time a sketch runs. The
+ * noiseSeed() function can be used to generate
+ * the same sequence of Perlin noise values each time a sketch runs.
+ *
+ * The character of the noise can be adjusted in two ways. The first way is to
+ * scale the inputs. `noise()` interprets inputs as coordinates. The sequence
+ * of noise values will be smoother when the input coordinates are closer. The
+ * second way is to use the noiseDetail()
+ * function.
+ *
+ * The version of `noise()` with one parameter computes noise values in one
+ * dimension. This dimension can be thought of as space, as in `noise(x)`, or
+ * time, as in `noise(t)`.
+ *
+ * The version of `noise()` with two parameters computes noise values in two
+ * dimensions. These dimensions can be thought of as space, as in
+ * `noise(x, y)`, or space and time, as in `noise(x, t)`.
+ *
+ * The version of `noise()` with three parameters computes noise values in
+ * three dimensions. These dimensions can be thought of as space, as in
+ * `noise(x, y, z)`, or space and time, as in `noise(x, y, t)`.
+ *
+ * @method noise
+ * @param {Number} x x-coordinate in noise space.
+ * @param {Number} [y] y-coordinate in noise space.
+ * @param {Number} [z] z-coordinate in noise space.
+ * @return {Number} Perlin noise value at specified coordinates.
+ *
+ * @example
+ *
+ * let pos;
+ * let vel;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create p5.Vector objects.
+ * pos = createVector(50, 100);
+ * vel = createVector(0, -1);
+ *
+ * describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Add velocity to position.
+ * pos.add(vel);
+ *
+ * // If the dot reaches the top of the canvas,
+ * // restart from the bottom.
+ * if (pos.y < 0) {
+ * pos.y = 100;
+ * }
+ *
+ * // Draw the dot.
+ * strokeWeight(5);
+ * point(pos);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black dot moves randomly on a gray square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the coordinates.
+ * let x = 100 * noise(0.005 * frameCount);
+ * let y = 100 * noise(0.005 * frameCount + 10000);
+ *
+ * // Draw the point.
+ * strokeWeight(5);
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black dot moves randomly on a gray square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the noise level and scale.
+ * let noiseLevel = 100;
+ * let noiseScale = 0.005;
+ *
+ * // Scale the input coordinate.
+ * let nt = noiseScale * frameCount;
+ *
+ * // Compute the noise values.
+ * let x = noiseLevel * noise(nt);
+ * let y = noiseLevel * noise(nt + 10000);
+ *
+ * // Draw the point.
+ * strokeWeight(5);
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A hilly terrain drawn in gray against a black sky.');
+ * }
+ *
+ * function draw() {
+ * // Set the noise level and scale.
+ * let noiseLevel = 100;
+ * let noiseScale = 0.02;
+ *
+ * // Scale the input coordinate.
+ * let x = frameCount;
+ * let nx = noiseScale * x;
+ *
+ * // Compute the noise value.
+ * let y = noiseLevel * noise(nx);
+ *
+ * // Draw the line.
+ * line(x, 0, x, y);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A calm sea drawn in gray against a black sky.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the noise level and scale.
+ * let noiseLevel = 100;
+ * let noiseScale = 0.002;
+ *
+ * // Iterate from left to right.
+ * for (let x = 0; x < 100; x += 1) {
+ * // Scale the input coordinates.
+ * let nx = noiseScale * x;
+ * let nt = noiseScale * frameCount;
+ *
+ * // Compute the noise value.
+ * let y = noiseLevel * noise(nx, nt);
+ *
+ * // Draw the line.
+ * line(x, 0, x, y);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the noise level and scale.
+ * let noiseLevel = 255;
+ * let noiseScale = 0.01;
+ *
+ * // Iterate from top to bottom.
+ * for (let y = 0; y < 100; y += 1) {
+ * // Iterate from left to right.
+ * for (let x = 0; x < 100; x += 1) {
+ * // Scale the input coordinates.
+ * let nx = noiseScale * x;
+ * let ny = noiseScale * y;
+ *
+ * // Compute the noise value.
+ * let c = noiseLevel * noise(nx, ny);
+ *
+ * // Draw the point.
+ * stroke(c);
+ * point(x, y);
+ * }
+ * }
+ *
+ * describe('A gray cloudy pattern.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noise = function (x) {
+ var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+ var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+ if (perlin == null) {
+ perlin = new Array(PERLIN_SIZE + 1);
+ for (var i = 0; i < PERLIN_SIZE + 1; i++) {
+ perlin[i] = Math.random();
+ }
+ }
+ if (x < 0) {
+ x = - x;
+ }
+ if (y < 0) {
+ y = - y;
+ }
+ if (z < 0) {
+ z = - z;
+ }
+ var xi = Math.floor(x),
+ yi = Math.floor(y),
+ zi = Math.floor(z);
+ var xf = x - xi;
+ var yf = y - yi;
+ var zf = z - zi;
+ var rxf,
+ ryf;
+ var r = 0;
+ var ampl = 0.5;
+ var n1,
+ n2,
+ n3;
+ for (var o = 0; o < perlin_octaves; o++) {
+ var of = xi + (yi << PERLIN_YWRAPB) + (zi << PERLIN_ZWRAPB);
+ rxf = scaled_cosine(xf);
+ ryf = scaled_cosine(yf);
+ n1 = perlin[of & PERLIN_SIZE];
+ n1 += rxf * (perlin[of + 1 & PERLIN_SIZE] - n1);
+ n2 = perlin[of + PERLIN_YWRAP & PERLIN_SIZE];
+ n2 += rxf * (perlin[of + PERLIN_YWRAP + 1 & PERLIN_SIZE] - n2);
+ n1 += ryf * (n2 - n1);
+ of += PERLIN_ZWRAP;
+ n2 = perlin[of & PERLIN_SIZE];
+ n2 += rxf * (perlin[of + 1 & PERLIN_SIZE] - n2);
+ n3 = perlin[of + PERLIN_YWRAP & PERLIN_SIZE];
+ n3 += rxf * (perlin[of + PERLIN_YWRAP + 1 & PERLIN_SIZE] - n3);
+ n2 += ryf * (n3 - n2);
+ n1 += scaled_cosine(zf) * (n2 - n1);
+ r += n1 * ampl;
+ ampl *= perlin_amp_falloff;
+ xi <<= 1;
+ xf *= 2;
+ yi <<= 1;
+ yf *= 2;
+ zi <<= 1;
+ zf *= 2;
+ if (xf >= 1) {
+ xi++;
+ xf--;
+ }
+ if (yf >= 1) {
+ yi++;
+ yf--;
+ }
+ if (zf >= 1) {
+ zi++;
+ zf--;
+ }
+ }
+ return r;
+ };
+ /**
+ * Adjusts the character of the noise produced by the
+ * noise() function.
+ *
+ * Perlin noise values are created by adding layers of noise together. The
+ * noise layers, called octaves, are similar to harmonics in music. Lower
+ * octaves contribute more to the output signal. They define the overall
+ * intensity of the noise. Higher octaves create finer-grained details.
+ *
+ * By default, noise values are created by combining four octaves. Each higher
+ * octave contributes half as much (50% less) compared to its predecessor.
+ * `noiseDetail()` changes the number of octaves and the falloff amount. For
+ * example, calling `noiseDetail(6, 0.25)` ensures that
+ * noise() will use six octaves. Each higher octave
+ * will contribute 25% as much (75% less) compared to its predecessor. Falloff
+ * values between 0 and 1 are valid. However, falloff values greater than 0.5
+ * might result in noise values greater than 1.
+ *
+ * @method noiseDetail
+ * @param {Number} lod number of octaves to be used by the noise.
+ * @param {Number} falloff falloff factor for each octave.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray cloudy pattern that changes.');
+ * }
+ *
+ * function draw() {
+ * // Set the noise level and scale.
+ * let noiseLevel = 255;
+ * let noiseScale = 0.009;
+ *
+ * // Iterate from top to bottom.
+ * for (let y = 0; y < 100; y += 1) {
+ * // Iterate from left to right.
+ * for (let x = 0; x < width; x += 1) {
+ * // Scale the input coordinates.
+ * let nx = noiseScale * x;
+ * let ny = noiseScale * y;
+ * let nt = noiseScale * frameCount;
+ *
+ * // Compute the noise value.
+ * let c = noiseLevel * noise(nx, ny, nt);
+ *
+ * // Draw the point.
+ * stroke(c);
+ * point(x, y);
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noiseDetail = function (lod, falloff) {
+ if (lod > 0) {
+ perlin_octaves = lod;
+ }
+ if (falloff > 0) {
+ perlin_amp_falloff = falloff;
+ }
+ };
+ /**
+ * Sets the seed value for the noise() function.
+ *
+ * By default, noise() produces different results
+ * each time a sketch is run. Calling `noiseSeed()` with a constant argument,
+ * such as `noiseSeed(99)`, makes noise() produce the
+ * same results each time a sketch is run.
+ *
+ * @method noiseSeed
+ * @param {Number} seed seed value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Set the noise level and scale.
+ * let noiseLevel = 255;
+ * let noiseScale = 0.02;
+ *
+ * // Iterate from top to bottom.
+ * for (let y = 0; y < 100; y += 1) {
+ * // Iterate from left to right.
+ * for (let x = 0; x < 50; x += 1) {
+ * // Scale the input coordinates.
+ * let nx = noiseScale * x;
+ * let ny = noiseScale * y;
+ *
+ * // Compute the noise value with six octaves
+ * // and a low falloff factor.
+ * noiseDetail(6, 0.25);
+ * let c = noiseLevel * noise(nx, ny);
+ *
+ * // Draw the left side.
+ * stroke(c);
+ * point(x, y);
+ *
+ * // Compute the noise value with four octaves
+ * // and a high falloff factor.
+ * noiseDetail(4, 0.5);
+ * c = noiseLevel * noise(nx, ny);
+ *
+ * // Draw the right side.
+ * stroke(c);
+ * point(x + 50, y);
+ * }
+ * }
+ *
+ * describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noiseSeed = function (seed) {
+ // Linear Congruential Generator
+ // Variant of a Lehman Generator
+ var lcg = function () {
+ // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
+ // m is basically chosen to be large (as it is the max period)
+ // and for its relationships to a and c
+ var m = 4294967296;
+ // a - 1 should be divisible by m's prime factors
+ var a = 1664525;
+ // c and m should be co-prime
+ var c = 1013904223;
+ var seed,
+ z;
+ return {
+ setSeed: function setSeed(val) {
+ // pick a random seed if val is undefined or null
+ // the >>> 0 casts the seed to an unsigned 32-bit integer
+ z = seed = (val == null ? Math.random() * m : val) >>> 0;
+ },
+ getSeed: function getSeed() {
+ return seed;
+ },
+ rand: function rand() {
+ // define the recurrence relationship
+ z = (a * z + c) % m;
+ // return a float in [0, 1)
+ // if z = m then z / m = 0 therefore (z % m) / m < 1 always
+ return z / m;
+ }
+ };
+ }();
+ lcg.setSeed(seed);
+ perlin = new Array(PERLIN_SIZE + 1);
+ for (var i = 0; i < PERLIN_SIZE + 1; i++) {
+ perlin[i] = lcg.rand();
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303
+ }
+ ],
+ 336: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.number.is-finite');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.number.is-finite');
+ _dereq_('core-js/modules/es.string.sub');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Math
+ * @submodule Vector
+ * @requires constants
+ */
+ /**
+ * A class to describe a two or three-dimensional vector.
+ *
+ * A vector can be thought of in different ways. In one view, a vector is like
+ * an arrow pointing in space. Vectors have both magnitude (length) and
+ * direction.
+ *
+ * `p5.Vector` objects are often used to program motion because they simplify
+ * the math. For example, a moving ball has a position and a velocity.
+ * Position describes where the ball is in space. The ball's position vector
+ * extends from the origin to the ball's center. Velocity describes the ball's
+ * speed and the direction it's moving. If the ball is moving straight up, its
+ * velocity vector points straight up. Adding the ball's velocity vector to
+ * its position vector moves it, as in `pos.add(vel)`. Vector math relies on
+ * methods inside the `p5.Vector` class.
+ *
+ * Note: createVector() is the recommended way
+ * to make an instance of this class.
+ *
+ * @class p5.Vector
+ * @constructor
+ * @param {Number} [x] x component of the vector.
+ * @param {Number} [y] y component of the vector.
+ * @param {Number} [z] z component of the vector.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set the noise seed for consistent results.
+ * noiseSeed(99);
+ *
+ * describe('A black rectangle that grows randomly, first to the right and then to the left.');
+ * }
+ *
+ * function draw() {
+ * // Set the noise level and scale.
+ * let noiseLevel = 100;
+ * let noiseScale = 0.005;
+ *
+ * // Scale the input coordinate.
+ * let nt = noiseScale * frameCount;
+ *
+ * // Compute the noise value.
+ * let x = noiseLevel * noise(nt);
+ *
+ * // Draw the line.
+ * line(x, 0, x, height);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let p1 = createVector(25, 25);
+ * let p2 = createVector(75, 75);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Draw the first point using a p5.Vector.
+ * point(p1);
+ *
+ * // Draw the second point using a p5.Vector's components.
+ * point(p2.x, p2.y);
+ *
+ * describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.Vector = /*#__PURE__*/ function () {
+ // This is how it comes in with createVector()
+ // This check if the first argument is a function
+ function _class() {
+ _classCallCheck(this, _class);
+ var x,
+ y,
+ z;
+ if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'function') {
+ this.isPInst = true;
+ this._fromRadians = arguments.length <= 0 ? undefined : arguments[0];
+ this._toRadians = arguments.length <= 1 ? undefined : arguments[1];
+ x = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ y = (arguments.length <= 3 ? undefined : arguments[3]) || 0;
+ z = (arguments.length <= 4 ? undefined : arguments[4]) || 0;
+ // This is what we'll get with new p5.Vector()
+ } else {
+ x = (arguments.length <= 0 ? undefined : arguments[0]) || 0;
+ y = (arguments.length <= 1 ? undefined : arguments[1]) || 0;
+ z = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ } /**
+ * The x component of the vector
+ * @type {Number}
+ * @property x
+ * @name x
+ */
+
+ this.x = x;
+ /**
+ * The y component of the vector
+ * @type {Number}
+ * @property y
+ * @name y
+ */
+ this.y = y;
+ /**
+ * The z component of the vector
+ * @type {Number}
+ * @property z
+ * @name z
+ */
+ this.z = z;
+ } /**
+ * Returns a string representation of a vector.
+ *
+ * Calling `toString()` is useful for printing vectors to the console while
+ * debugging.
+ *
+ * @method toString
+ * @return {String} string representation of the vector.
+ *
+ * @example
+ *
+ * let pos;
+ * let vel;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create p5.Vector objects.
+ * pos = createVector(50, 100);
+ * vel = createVector(0, -1);
+ *
+ * describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Add velocity to position.
+ * pos.add(vel);
+ *
+ * // If the dot reaches the top of the canvas,
+ * // restart from the bottom.
+ * if (pos.y < 0) {
+ * pos.y = 100;
+ * }
+ *
+ * // Draw the dot.
+ * strokeWeight(5);
+ * point(pos);
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'toString',
+ value: function toString() {
+ return 'p5.Vector Object : ['.concat(this.x, ', ').concat(this.y, ', ').concat(this.z, ']');
+ } /**
+ * Sets the vector's `x`, `y`, and `z` components.
+ *
+ * `set()` can use separate numbers, as in `v.set(1, 2, 3)`, a
+ * p5.Vector object, as in `v.set(v2)`, or an
+ * array of numbers, as in `v.set([1, 2, 3])`.
+ *
+ * If a value isn't provided for a component, it will be set to 0. For
+ * example, `v.set(4, 5)` sets `v.x` to 4, `v.y` to 5, and `v.z` to 0.
+ * Calling `set()` with no arguments, as in `v.set()`, sets all the vector's
+ * components to 0.
+ *
+ * @method set
+ * @param {Number} [x] x component of the vector.
+ * @param {Number} [y] y component of the vector.
+ * @param {Number} [z] z component of the vector.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * let v = createVector(20, 30);
+ *
+ * // Prints 'p5.Vector Object : [20, 30, 0]'.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method set
+ * @param {p5.Vector|Number[]} value vector to set.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x = x.x || 0;
+ this.y = x.y || 0;
+ this.z = x.z || 0;
+ return this;
+ }
+ if (Array.isArray(x)) {
+ this.x = x[0] || 0;
+ this.y = x[1] || 0;
+ this.z = x[2] || 0;
+ return this;
+ }
+ this.x = x || 0;
+ this.y = y || 0;
+ this.z = z || 0;
+ return this;
+ } /**
+ * Returns a copy of the p5.Vector object.
+ *
+ * @method copy
+ * @return {p5.Vector} copy of the p5.Vector object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Top left.
+ * let pos = createVector(25, 25);
+ * point(pos);
+ *
+ * // Top right.
+ * // set() with numbers.
+ * pos.set(75, 25);
+ * point(pos);
+ *
+ * // Bottom right.
+ * // set() with a p5.Vector.
+ * let p2 = createVector(75, 75);
+ * pos.set(p2);
+ * point(pos);
+ *
+ * // Bottom left.
+ * // set() with an array.
+ * let arr = [25, 75];
+ * pos.set(arr);
+ * point(pos);
+ *
+ * describe('Four black dots arranged in a square on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ if (this.isPInst) {
+ return new _main.default.Vector(this._fromRadians, this._toRadians, this.x, this.y, this.z);
+ } else {
+ return new _main.default.Vector(this.x, this.y, this.z);
+ }
+ } /**
+ * Adds to a vector's `x`, `y`, and `z` components.
+ *
+ * `add()` can use separate numbers, as in `v.add(1, 2, 3)`,
+ * another p5.Vector object, as in `v.add(v2)`, or
+ * an array of numbers, as in `v.add([1, 2, 3])`.
+ *
+ * If a value isn't provided for a component, it won't change. For
+ * example, `v.add(4, 5)` adds 4 to `v.x`, 5 to `v.y`, and 0 to `v.z`.
+ * Calling `add()` with no arguments, as in `v.add()`, has no effect.
+ *
+ * The static version of `add()`, as in `p5.Vector.add(v2, v1)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method add
+ * @param {Number} x x component of the vector to be added.
+ * @param {Number} [y] y component of the vector to be added.
+ * @param {Number} [z] z component of the vector to be added.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100 ,100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Vector object.
+ * let pos = createVector(50, 50);
+ *
+ * // Make a copy.
+ * let pc = pos.copy();
+ *
+ * // Draw the point.
+ * strokeWeight(5);
+ * point(pc);
+ *
+ * describe('A black point drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Top left.
+ * let pos = createVector(25, 25);
+ * point(pos);
+ *
+ * // Top right.
+ * // Add numbers.
+ * pos.add(50, 0);
+ * point(pos);
+ *
+ * // Bottom right.
+ * // Add a p5.Vector.
+ * let p2 = createVector(0, 50);
+ * pos.add(p2);
+ * point(pos);
+ *
+ * // Bottom left.
+ * // Add an array.
+ * let arr = [-50, 0];
+ * pos.add(arr);
+ * point(pos);
+ *
+ * describe('Four black dots arranged in a square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top left.
+ * let p1 = createVector(25, 25);
+ *
+ * // Center.
+ * let p2 = createVector(50, 50);
+ *
+ * // Bottom right.
+ * // Add p1 and p2.
+ * let p3 = p5.Vector.add(p1, p2);
+ *
+ * // Draw the points.
+ * strokeWeight(5);
+ * point(p1);
+ * point(p2);
+ * point(p3);
+ *
+ * describe('Three black dots in a diagonal line from top left to bottom right.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method add
+ * @param {p5.Vector|Number[]} value The vector to add
+ * @chainable
+ */
+
+ },
+ {
+ key: 'add',
+ value: function add(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x += x.x || 0;
+ this.y += x.y || 0;
+ this.z += x.z || 0;
+ return this;
+ }
+ if (Array.isArray(x)) {
+ this.x += x[0] || 0;
+ this.y += x[1] || 0;
+ this.z += x[2] || 0;
+ return this;
+ }
+ this.x += x || 0;
+ this.y += y || 0;
+ this.z += z || 0;
+ return this;
+ } /**
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: 'calculateRemainder2D',
+ value: function calculateRemainder2D(xComponent, yComponent) {
+ if (xComponent !== 0) {
+ this.x = this.x % xComponent;
+ }
+ if (yComponent !== 0) {
+ this.y = this.y % yComponent;
+ }
+ return this;
+ } /**
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: 'calculateRemainder3D',
+ value: function calculateRemainder3D(xComponent, yComponent, zComponent) {
+ if (xComponent !== 0) {
+ this.x = this.x % xComponent;
+ }
+ if (yComponent !== 0) {
+ this.y = this.y % yComponent;
+ }
+ if (zComponent !== 0) {
+ this.z = this.z % zComponent;
+ }
+ return this;
+ } /**
+ * Performs modulo (remainder) division with a vector's `x`, `y`, and `z`
+ * components.
+ *
+ * `rem()` can use separate numbers, as in `v.rem(1, 2, 3)`,
+ * another p5.Vector object, as in `v.rem(v2)`, or
+ * an array of numbers, as in `v.rem([1, 2, 3])`.
+ *
+ * If only one value is provided, as in `v.rem(2)`, then all the components
+ * will be set to their values modulo 2. If two values are provided, as in
+ * `v.rem(2, 3)`, then `v.z` won't change. Calling `rem()` with no
+ * arguments, as in `v.rem()`, has no effect.
+ *
+ * The static version of `rem()`, as in `p5.Vector.rem(v2, v1)`, returns a
+ * new p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method rem
+ * @param {Number} x x component of divisor vector.
+ * @param {Number} y y component of divisor vector.
+ * @param {Number} z z component of divisor vector.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Three arrows drawn on a gray square. A red arrow extends from the top left corner to the center. A blue arrow extends from the tip of the red arrow. A purple arrow extends from the origin to the tip of the blue arrow.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ *
+ * // Draw the red arrow.
+ * let v1 = createVector(50, 50);
+ * drawArrow(origin, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * let v2 = createVector(-30, 20);
+ * drawArrow(v1, v2, 'blue');
+ *
+ * // Purple arrow.
+ * let v3 = p5.Vector.add(v1, v2);
+ * drawArrow(origin, v3, 'purple');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(3, 4, 5);
+ *
+ * // Divide numbers.
+ * v.rem(2);
+ *
+ * // Prints 'p5.Vector Object : [1, 0, 1]'.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(3, 4, 5);
+ *
+ * // Divide numbers.
+ * v.rem(2, 3);
+ *
+ * // Prints 'p5.Vector Object : [1, 1, 5]'.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(3, 4, 5);
+ *
+ * // Divide numbers.
+ * v.rem(2, 3, 4);
+ *
+ * // Prints 'p5.Vector Object : [1, 1, 1]'.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v1 = createVector(3, 4, 5);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * // Divide a p5.Vector.
+ * v1.rem(v2);
+ *
+ * // Prints 'p5.Vector Object : [1, 1, 1]'.
+ * print(v1.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(3, 4, 5);
+ *
+ * // Divide an array.
+ * let arr = [2, 3, 4];
+ * v.rem(arr);
+ *
+ * // Prints 'p5.Vector Object : [1, 1, 1]'.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method rem
+ * @param {p5.Vector | Number[]} value divisor vector.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'rem',
+ value: function rem() {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ var x = args[0],
+ y = args[1],
+ z = args[2];
+ if (x instanceof _main.default.Vector) {
+ if ([x.x,
+ x.y,
+ x.z].every(Number.isFinite)) {
+ var xComponent = parseFloat(x.x);
+ var yComponent = parseFloat(x.y);
+ var zComponent = parseFloat(x.z);
+ return this.calculateRemainder3D(xComponent, yComponent, zComponent);
+ }
+ } else if (Array.isArray(x)) {
+ if (x.every(Number.isFinite)) {
+ if (x.length === 2) {
+ return this.calculateRemainder2D(x[0], x[1]);
+ }
+ if (x.length === 3) {
+ return this.calculateRemainder3D(x[0], x[1], x[2]);
+ }
+ }
+ } else if (args.length === 1) {
+ if (Number.isFinite(x) && x !== 0) {
+ this.x = this.x % x;
+ this.y = this.y % x;
+ this.z = this.z % x;
+ return this;
+ }
+ } else if (args.length === 2) {
+ if (args.every(Number.isFinite)) {
+ return this.calculateRemainder2D(x, y);
+ }
+ } else if (args.length === 3) {
+ if (args.every(Number.isFinite)) {
+ return this.calculateRemainder3D(x, y, z);
+ }
+ }
+ } /**
+ * Subtracts from a vector's `x`, `y`, and `z` components.
+ *
+ * `sub()` can use separate numbers, as in `v.sub(1, 2, 3)`, another
+ * p5.Vector object, as in `v.sub(v2)`, or an array
+ * of numbers, as in `v.sub([1, 2, 3])`.
+ *
+ * If a value isn't provided for a component, it won't change. For
+ * example, `v.sub(4, 5)` subtracts 4 from `v.x`, 5 from `v.y`, and 0 from `v.z`.
+ * Calling `sub()` with no arguments, as in `v.sub()`, has no effect.
+ *
+ * The static version of `sub()`, as in `p5.Vector.sub(v2, v1)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method sub
+ * @param {Number} x x component of the vector to subtract.
+ * @param {Number} [y] y component of the vector to subtract.
+ * @param {Number} [z] z component of the vector to subtract.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v1 = createVector(3, 4, 5);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * // Divide without modifying the original vectors.
+ * let v3 = p5.Vector.rem(v1, v2);
+ *
+ * // Prints 'p5.Vector Object : [1, 1, 1]'.
+ * print(v3.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Bottom right.
+ * let pos = createVector(75, 75);
+ * point(pos);
+ *
+ * // Top right.
+ * // Subtract numbers.
+ * pos.sub(0, 50);
+ * point(pos);
+ *
+ * // Top left.
+ * // Subtract a p5.Vector.
+ * let p2 = createVector(50, 0);
+ * pos.sub(p2);
+ * point(pos);
+ *
+ * // Bottom left.
+ * // Subtract an array.
+ * let arr = [0, -50];
+ * pos.sub(arr);
+ * point(pos);
+ *
+ * describe('Four black dots arranged in a square on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let p1 = createVector(75, 75);
+ * let p2 = createVector(50, 50);
+ *
+ * // Subtract with modifying the original vectors.
+ * let p3 = p5.Vector.sub(p1, p2);
+ *
+ * // Draw the points.
+ * strokeWeight(5);
+ * point(p1);
+ * point(p2);
+ * point(p3);
+ *
+ * describe('Three black dots in a diagonal line from top left to bottom right.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method sub
+ * @param {p5.Vector|Number[]} value the vector to subtract
+ * @chainable
+ */
+
+ },
+ {
+ key: 'sub',
+ value: function sub(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x -= x.x || 0;
+ this.y -= x.y || 0;
+ this.z -= x.z || 0;
+ return this;
+ }
+ if (Array.isArray(x)) {
+ this.x -= x[0] || 0;
+ this.y -= x[1] || 0;
+ this.z -= x[2] || 0;
+ return this;
+ }
+ this.x -= x || 0;
+ this.y -= y || 0;
+ this.z -= z || 0;
+ return this;
+ } /**
+ * Multiplies a vector's `x`, `y`, and `z` components.
+ *
+ * `mult()` can use separate numbers, as in `v.mult(1, 2, 3)`, another
+ * p5.Vector object, as in `v.mult(v2)`, or an array
+ * of numbers, as in `v.mult([1, 2, 3])`.
+ *
+ * If only one value is provided, as in `v.mult(2)`, then all the components
+ * will be multiplied by 2. If a value isn't provided for a component, it
+ * won't change. For example, `v.mult(4, 5)` multiplies `v.x` by, `v.y` by 5,
+ * and `v.z` by 1. Calling `mult()` with no arguments, as in `v.mult()`, has
+ * no effect.
+ *
+ * The static version of `mult()`, as in `p5.Vector.mult(v, 2)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method mult
+ * @param {Number} n The number to multiply with the vector
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ *
+ * // Draw the red arrow.
+ * let v1 = createVector(50, 50);
+ * drawArrow(origin, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * let v2 = createVector(20, 70);
+ * drawArrow(origin, v2, 'blue');
+ *
+ * // Purple arrow.
+ * let v3 = p5.Vector.sub(v2, v1);
+ * drawArrow(v1, v3, 'purple');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Top-left.
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * // Center.
+ * // Multiply all components by 2.
+ * p.mult(2);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * strokeWeight(5);
+ *
+ * // Top-left.
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * // Bottom-right.
+ * // Multiply p.x * 2 and p.y * 3
+ * p.mult(2, 3);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Top-left.
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * // Bottom-right.
+ * // Multiply p.x * 2 and p.y * 3
+ * let arr = [2, 3];
+ * p.mult(arr);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Top-left.
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * // Bottom-right.
+ * // Multiply p.x * p2.x and p.y * p2.y
+ * let p2 = createVector(2, 3);
+ * p.mult(p2);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Top-left.
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * // Bottom-right.
+ * // Create a new p5.Vector with
+ * // p3.x = p.x * p2.x
+ * // p3.y = p.y * p2.y
+ * let p2 = createVector(2, 3);
+ * let p3 = p5.Vector.mult(p, p2);
+ * point(p3);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method mult
+ * @param {Number} x number to multiply with the x component of the vector.
+ * @param {Number} y number to multiply with the y component of the vector.
+ * @param {Number} [z] number to multiply with the z component of the vector.
+ * @chainable
+ */
+ /**
+ * @method mult
+ * @param {Number[]} arr array to multiply with the components of the vector.
+ * @chainable
+ */
+ /**
+ * @method mult
+ * @param {p5.Vector} v vector to multiply with the components of the original vector.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'mult',
+ value: function mult() {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ var x = args[0],
+ y = args[1],
+ z = args[2];
+ if (x instanceof _main.default.Vector) {
+ // new p5.Vector will check that values are valid upon construction but it's possible
+ // that someone could change the value of a component after creation, which is why we still
+ // perform this check
+ if (Number.isFinite(x.x) && Number.isFinite(x.y) && Number.isFinite(x.z) && typeof x.x === 'number' && typeof x.y === 'number' && typeof x.z === 'number') {
+ this.x *= x.x;
+ this.y *= x.y;
+ this.z *= x.z;
+ } else {
+ console.warn('p5.Vector.prototype.mult:', 'x contains components that are either undefined or not finite numbers');
+ }
+ return this;
+ }
+ if (Array.isArray(x)) {
+ if (x.every(function (element) {
+ return Number.isFinite(element);
+ }) && x.every(function (element) {
+ return typeof element === 'number';
+ })) {
+ if (x.length === 1) {
+ this.x *= x[0];
+ this.y *= x[0];
+ this.z *= x[0];
+ } else if (x.length === 2) {
+ this.x *= x[0];
+ this.y *= x[1];
+ } else if (x.length === 3) {
+ this.x *= x[0];
+ this.y *= x[1];
+ this.z *= x[2];
+ }
+ } else {
+ console.warn('p5.Vector.prototype.mult:', 'x contains elements that are either undefined or not finite numbers');
+ }
+ return this;
+ }
+ var vectorComponents = args;
+ if (vectorComponents.every(function (element) {
+ return Number.isFinite(element);
+ }) && vectorComponents.every(function (element) {
+ return typeof element === 'number';
+ })) {
+ if (args.length === 1) {
+ this.x *= x;
+ this.y *= x;
+ this.z *= x;
+ }
+ if (args.length === 2) {
+ this.x *= x;
+ this.y *= y;
+ }
+ if (args.length === 3) {
+ this.x *= x;
+ this.y *= y;
+ this.z *= z;
+ }
+ } else {
+ console.warn('p5.Vector.prototype.mult:', 'x, y, or z arguments are either undefined or not a finite number');
+ }
+ return this;
+ } /**
+ * Divides a vector's `x`, `y`, and `z` components.
+ *
+ * `div()` can use separate numbers, as in `v.div(1, 2, 3)`, another
+ * p5.Vector object, as in `v.div(v2)`, or an array
+ * of numbers, as in `v.div([1, 2, 3])`.
+ *
+ * If only one value is provided, as in `v.div(2)`, then all the components
+ * will be divided by 2. If a value isn't provided for a component, it
+ * won't change. For example, `v.div(4, 5)` divides `v.x` by, `v.y` by 5,
+ * and `v.z` by 1. Calling `div()` with no arguments, as in `v.div()`, has
+ * no effect.
+ *
+ * The static version of `div()`, as in `p5.Vector.div(v, 2)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method div
+ * @param {number} n The number to divide the vector by
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');
+ * }
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ *
+ * // Draw the red arrow.
+ * let v1 = createVector(25, 25);
+ * drawArrow(origin, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * let v2 = p5.Vector.mult(v1, 2);
+ * drawArrow(origin, v2, 'blue');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Center.
+ * let p = createVector(50, 50);
+ * point(p);
+ *
+ * // Top-left.
+ * // Divide p.x / 2 and p.y / 2
+ * p.div(2);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Bottom-right.
+ * let p = createVector(50, 75);
+ * point(p);
+ *
+ * // Top-left.
+ * // Divide p.x / 2 and p.y / 3
+ * p.div(2, 3);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Bottom-right.
+ * let p = createVector(50, 75);
+ * point(p);
+ *
+ * // Top-left.
+ * // Divide p.x / 2 and p.y / 3
+ * let arr = [2, 3];
+ * p.div(arr);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Bottom-right.
+ * let p = createVector(50, 75);
+ * point(p);
+ *
+ * // Top-left.
+ * // Divide p.x / 2 and p.y / 3
+ * let p2 = createVector(2, 3);
+ * p.div(p2);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the points.
+ * strokeWeight(5);
+ *
+ * // Bottom-right.
+ * let p = createVector(50, 75);
+ * point(p);
+ *
+ * // Top-left.
+ * // Create a new p5.Vector with
+ * // p3.x = p.x / p2.x
+ * // p3.y = p.y / p2.y
+ * let p2 = createVector(2, 3);
+ * let p3 = p5.Vector.div(p, p2);
+ * point(p3);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method div
+ * @param {Number} x number to divide with the x component of the vector.
+ * @param {Number} y number to divide with the y component of the vector.
+ * @param {Number} [z] number to divide with the z component of the vector.
+ * @chainable
+ */
+ /**
+ * @method div
+ * @param {Number[]} arr array to divide the components of the vector by.
+ * @chainable
+ */
+ /**
+ * @method div
+ * @param {p5.Vector} v vector to divide the components of the original vector by.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'div',
+ value: function div() {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ var x = args[0],
+ y = args[1],
+ z = args[2];
+ if (x instanceof _main.default.Vector) {
+ // new p5.Vector will check that values are valid upon construction but it's possible
+ // that someone could change the value of a component after creation, which is why we still
+ // perform this check
+ if (Number.isFinite(x.x) && Number.isFinite(x.y) && Number.isFinite(x.z) && typeof x.x === 'number' && typeof x.y === 'number' && typeof x.z === 'number') {
+ var isLikely2D = x.z === 0 && this.z === 0;
+ if (x.x === 0 || x.y === 0 || !isLikely2D && x.z === 0) {
+ console.warn('p5.Vector.prototype.div:', 'divide by 0');
+ return this;
+ }
+ this.x /= x.x;
+ this.y /= x.y;
+ if (!isLikely2D) {
+ this.z /= x.z;
+ }
+ } else {
+ console.warn('p5.Vector.prototype.div:', 'x contains components that are either undefined or not finite numbers');
+ }
+ return this;
+ }
+ if (Array.isArray(x)) {
+ if (x.every(Number.isFinite) && x.every(function (element) {
+ return typeof element === 'number';
+ })) {
+ if (x.some(function (element) {
+ return element === 0;
+ })) {
+ console.warn('p5.Vector.prototype.div:', 'divide by 0');
+ return this;
+ }
+ if (x.length === 1) {
+ this.x /= x[0];
+ this.y /= x[0];
+ this.z /= x[0];
+ } else if (x.length === 2) {
+ this.x /= x[0];
+ this.y /= x[1];
+ } else if (x.length === 3) {
+ this.x /= x[0];
+ this.y /= x[1];
+ this.z /= x[2];
+ }
+ } else {
+ console.warn('p5.Vector.prototype.div:', 'x contains components that are either undefined or not finite numbers');
+ }
+ return this;
+ }
+ if (args.every(Number.isFinite) && args.every(function (element) {
+ return typeof element === 'number';
+ })) {
+ if (args.some(function (element) {
+ return element === 0;
+ })) {
+ console.warn('p5.Vector.prototype.div:', 'divide by 0');
+ return this;
+ }
+ if (args.length === 1) {
+ this.x /= x;
+ this.y /= x;
+ this.z /= x;
+ }
+ if (args.length === 2) {
+ this.x /= x;
+ this.y /= y;
+ }
+ if (args.length === 3) {
+ this.x /= x;
+ this.y /= y;
+ this.z /= z;
+ }
+ } else {
+ console.warn('p5.Vector.prototype.div:', 'x, y, or z arguments are either undefined or not a finite number');
+ }
+ return this;
+ } /**
+ * Calculates the magnitude (length) of the vector.
+ *
+ * Use mag() to calculate the magnitude of a 2D vector
+ * using components as in `mag(x, y)`.
+ *
+ * @method mag
+ * @return {Number} magnitude of the vector.
+ *
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ *
+ * // Draw the red arrow.
+ * let v1 = createVector(50, 50);
+ * drawArrow(origin, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * let v2 = p5.Vector.div(v1, 2);
+ * drawArrow(origin, v2, 'blue');
+ *
+ * describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mag',
+ value: function mag() {
+ return Math.sqrt(this.magSq());
+ } /**
+ * Calculates the magnitude (length) of the vector squared.
+ *
+ * @method magSq
+ * @return {number} squared magnitude of the vector.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Vector object.
+ * let p = createVector(30, 40);
+ *
+ * // Draw a line from the origin.
+ * line(0, 0, p.x, p.y);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the vector's magnitude.
+ * let m = p.mag();
+ * text(m, p.x, p.y);
+ *
+ * describe('A diagonal black line extends from the top left corner of a gray square. The number 50 is written at the end of the line.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'magSq',
+ value: function magSq() {
+ var x = this.x;
+ var y = this.y;
+ var z = this.z;
+ return x * x + y * y + z * z;
+ } /**
+ * Calculates the dot product of two vectors.
+ *
+ * The dot product is a number that describes the overlap between two vectors.
+ * Visually, the dot product can be thought of as the "shadow" one vector
+ * casts on another. The dot product's magnitude is largest when two vectors
+ * point in the same or opposite directions. Its magnitude is 0 when two
+ * vectors form a right angle.
+ *
+ * The version of `dot()` with one parameter interprets it as another
+ * p5.Vector object.
+ *
+ * The version of `dot()` with multiple parameters interprets them as the
+ * `x`, `y`, and `z` components of another vector.
+ *
+ * The static version of `dot()`, as in `p5.Vector.dot(v1, v2)`, is the same
+ * as calling `v1.dot(v2)`.
+ *
+ * @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} dot product.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Vector object.
+ * let p = createVector(30, 40);
+ *
+ * // Draw a line from the origin.
+ * line(0, 0, p.x, p.y);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ *
+ * // Display the vector's magnitude squared.
+ * let m = p.magSq();
+ * text(m, p.x, p.y);
+ *
+ * describe('A diagonal black line extends from the top left corner of a gray square. The number 2500 is written at the end of the line.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v1 = createVector(3, 4);
+ * let v2 = createVector(3, 0);
+ *
+ * // Calculate the dot product.
+ * let dp = v1.dot(v2);
+ *
+ * // Prints "9" to the console.
+ * print(dp);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(0, 1);
+ *
+ * // Calculate the dot product.
+ * let dp = p5.Vector.dot(v1, v2);
+ *
+ * // Prints "0" to the console.
+ * print(dp);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method dot
+ * @param {p5.Vector} v p5.Vector to be dotted.
+ * @return {Number}
+ */
+
+ },
+ {
+ key: 'dot',
+ value: function dot(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ return this.dot(x.x, x.y, x.z);
+ }
+ return this.x * (x || 0) + this.y * (y || 0) + this.z * (z || 0);
+ } /**
+ * Calculates the cross product of two vectors.
+ *
+ * The cross product is a vector that points straight out of the plane created
+ * by two vectors. The cross product's magnitude is the area of the parallelogram
+ * formed by the original two vectors.
+ *
+ * The static version of `cross()`, as in `p5.Vector.cross(v1, v2)`, is the same
+ * as calling `v1.cross(v2)`.
+ *
+ * @method cross
+ * @param {p5.Vector} v p5.Vector to be crossed.
+ * @return {p5.Vector} cross product as a p5.Vector.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Two arrows drawn on a gray square. A black arrow points to the right and a red arrow follows the mouse. The text "v1 • v2 = something" changes as the mouse moves.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Center.
+ * let v0 = createVector(50, 50);
+ *
+ * // Draw the black arrow.
+ * let v1 = createVector(30, 0);
+ * drawArrow(v0, v1, 'black');
+ *
+ * // Draw the red arrow.
+ * let v2 = createVector(mouseX - 50, mouseY - 50);
+ * drawArrow(v0, v2, 'red');
+ *
+ * // Display the dot product.
+ * let dp = v2.dot(v1);
+ * text(`v2 • v1 = ${dp}`, 10, 20);
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(3, 4);
+ *
+ * // Calculate the cross product.
+ * let cp = v1.cross(v2);
+ *
+ * // Prints "p5.Vector Object : [0, 0, 4]" to the console.
+ * print(cp.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'cross',
+ value: function cross(v) {
+ var x = this.y * v.z - this.z * v.y;
+ var y = this.z * v.x - this.x * v.z;
+ var z = this.x * v.y - this.y * v.x;
+ if (this.isPInst) {
+ return new _main.default.Vector(this._fromRadians, this._toRadians, x, y, z);
+ } else {
+ return new _main.default.Vector(x, y, z);
+ }
+ } /**
+ * Calculates the distance between two points represented by vectors.
+ *
+ * A point's coordinates can be represented by the components of a vector
+ * that extends from the origin to the point.
+ *
+ * The static version of `dist()`, as in `p5.Vector.dist(v1, v2)`, is the same
+ * as calling `v1.dist(v2)`.
+ *
+ * Use dist() to calculate the distance between points
+ * using coordinates as in `dist(x1, y1, x2, y2)`.
+ *
+ * @method dist
+ * @param {p5.Vector} v x, y, and z coordinates of a p5.Vector.
+ * @return {Number} distance.
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(3, 4);
+ *
+ * // Calculate the cross product.
+ * let cp = p5.Vector.cross(v1, v2);
+ *
+ * // Prints "p5.Vector Object : [0, 0, 4]" to the console.
+ * print(cp.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(0, 1);
+ *
+ * // Calculate the distance between them.
+ * let d = v1.dist(v2);
+ *
+ * // Prints "1.414..." to the console.
+ * print(d);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(0, 1);
+ *
+ * // Calculate the distance between them.
+ * let d = p5.Vector.dist(v1, v2);
+ *
+ * // Prints "1.414..." to the console.
+ * print(d);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'dist',
+ value: function dist(v) {
+ return v.copy().sub(this).mag();
+ } /**
+ * Scales the components of a p5.Vector object so
+ * that its magnitude is 1.
+ *
+ * The static version of `normalize()`, as in `p5.Vector.normalize(v)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method normalize
+ * @return {p5.Vector} normalized p5.Vector.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow. The number 36 is written in black near the purple arrow.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ *
+ * // Draw the red arrow.
+ * let v1 = createVector(50, 50);
+ * drawArrow(origin, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * let v2 = createVector(20, 70);
+ * drawArrow(origin, v2, 'blue');
+ *
+ * // Purple arrow.
+ * let v3 = p5.Vector.sub(v2, v1);
+ * drawArrow(v1, v3, 'purple');
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ *
+ * // Display the magnitude.
+ * let m = floor(v3.mag());
+ * text(m, 50, 75);
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Vector.
+ * let v = createVector(10, 20, 2);
+ *
+ * // Normalize.
+ * v.normalize();
+ *
+ * // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Vector.
+ * let v0 = createVector(10, 20, 2);
+ *
+ * // Create a normalized copy.
+ * let v1 = p5.Vector.normalize(v0);
+ *
+ * // Prints "p5.Vector Object : [10, 20, 2]" to the console.
+ * print(v0.toString());
+ * // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the console.
+ * print(v1.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'normalize',
+ value: function normalize() {
+ var len = this.mag();
+ // here we multiply by the reciprocal instead of calling 'div()'
+ // since div duplicates this zero check.
+ if (len !== 0) this.mult(1 / len);
+ return this;
+ } /**
+ * Limits a vector's magnitude to a maximum value.
+ *
+ * The static version of `limit()`, as in `p5.Vector.limit(v, 5)`, returns a
+ * new p5.Vector object and doesn't change the
+ * original.
+ *
+ * @method limit
+ * @param {Number} max maximum magnitude for the vector.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow's length is fixed to the circle's radius.");
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * // Vector to the center.
+ * let v0 = createVector(50, 50);
+ *
+ * // Vector from the center to the mouse.
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * // Circle's radius.
+ * let r = 25;
+ *
+ * // Draw the red arrow.
+ * drawArrow(v0, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * v1.normalize();
+ * drawArrow(v0, v1.mult(r), 'blue');
+ *
+ * // Draw the circle.
+ * noFill();
+ * circle(50, 50, r * 2);
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(10, 20, 2);
+ *
+ * // Limit its magnitude.
+ * v.limit(5);
+ *
+ * // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v0 = createVector(10, 20, 2);
+ *
+ * // Create a copy an limit its magintude.
+ * let v1 = p5.Vector.limit(v0, 5);
+ *
+ * // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the console.
+ * print(v1.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'limit',
+ value: function limit(max) {
+ var mSq = this.magSq();
+ if (mSq > max * max) {
+ this.div(Math.sqrt(mSq)) //normalize it
+ .mult(max);
+ }
+ return this;
+ } /**
+ * Sets a vector's magnitude to a given value.
+ *
+ * The static version of `setMag()`, as in `p5.Vector.setMag(v, 10)`, returns
+ * a new p5.Vector object and doesn't change the
+ * original.
+ *
+ * @method setMag
+ * @param {number} len new length for this vector.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe("A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow never crosses the circle's edge.");
+ * }
+ * function draw() {
+ * background(240);
+ *
+ * // Vector to the center.
+ * let v0 = createVector(50, 50);
+ *
+ * // Vector from the center to the mouse.
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * // Circle's radius.
+ * let r = 25;
+ *
+ * // Draw the red arrow.
+ * drawArrow(v0, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * drawArrow(v0, v1.limit(r), 'blue');
+ *
+ * // Draw the circle.
+ * noFill();
+ * circle(50, 50, r * 2);
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(3, 4, 0);
+ *
+ * // Prints "5" to the console.
+ * print(v.mag());
+ *
+ * // Set its magnitude to 10.
+ * v.setMag(10);
+ *
+ * // Prints "p5.Vector Object : [6, 8, 0]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v0 = createVector(3, 4, 0);
+ *
+ * // Create a copy with a magnitude of 10.
+ * let v1 = p5.Vector.setMag(v0, 10);
+ *
+ * // Prints "5" to the console.
+ * print(v0.mag());
+ *
+ * // Prints "p5.Vector Object : [6, 8, 0]" to the console.
+ * print(v1.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setMag',
+ value: function setMag(n) {
+ return this.normalize().mult(n);
+ } /**
+ * Calculates the angle a 2D vector makes with the positive x-axis.
+ *
+ * By convention, the positive x-axis has an angle of 0. Angles increase in
+ * the clockwise direction.
+ *
+ * If the vector was created with
+ * createVector(), `heading()` returns angles
+ * in the units of the current angleMode().
+ *
+ * The static version of `heading()`, as in `p5.Vector.heading(v)`, works the
+ * same way.
+ *
+ * @method heading
+ * @return {Number} angle of rotation.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Two arrows extend from the top left corner of a square toward its center. The red arrow reaches the center and the blue arrow only extends part of the way.');
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let origin = createVector(0, 0);
+ * let v = createVector(50, 50);
+ *
+ * // Draw the red arrow.
+ * drawArrow(origin, v, 'red');
+ *
+ * // Set v's magnitude to 30.
+ * v.setMag(30);
+ *
+ * // Draw the blue arrow.
+ * drawArrow(origin, v, 'blue');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(1, 1);
+ *
+ * // Prints "0.785..." to the console.
+ * print(v.heading());
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Prints "45" to the console.
+ * print(v.heading());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(1, 1);
+ *
+ * // Prints "0.785..." to the console.
+ * print(p5.Vector.heading(v));
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Prints "45" to the console.
+ * print(p5.Vector.heading(v));
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'heading',
+ value: function heading() {
+ var h = Math.atan2(this.y, this.x);
+ if (this.isPInst) return this._fromRadians(h);
+ return h;
+ } /**
+ * Rotates a 2D vector to a specific angle without changing its magnitude.
+ *
+ * By convention, the positive x-axis has an angle of 0. Angles increase in
+ * the clockwise direction.
+ *
+ * If the vector was created with
+ * createVector(), `setHeading()` uses
+ * the units of the current angleMode().
+ *
+ * @method setHeading
+ * @param {number} angle angle of rotation.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black arrow extends from the top left of a square to its center. The text "Radians: 0.79" and "Degrees: 45" is written near the tip of the arrow.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ * let v = createVector(50, 50);
+ *
+ * // Draw the black arrow.
+ * drawArrow(origin, v, 'black');
+ *
+ * // Use radians.
+ * angleMode(RADIANS);
+ *
+ * // Display the heading in radians.
+ * let h = round(v.heading(), 2);
+ * text(`Radians: ${h}`, 20, 70);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Display the heading in degrees.
+ * h = v.heading();
+ * text(`Degrees: ${h}`, 20, 85);
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(0, 1);
+ *
+ * // Prints "1.570..." to the console.
+ * print(v.heading());
+ *
+ * // Point to the left.
+ * v.setHeading(PI);
+ *
+ * // Prints "3.141..." to the console.
+ * print(v.heading());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Create a p5.Vector object.
+ * let v = createVector(0, 1);
+ *
+ * // Prints "90" to the console.
+ * print(v.heading());
+ *
+ * // Point to the left.
+ * v.setHeading(180);
+ *
+ * // Prints "180" to the console.
+ * print(v.heading());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setHeading',
+ value: function setHeading(a) {
+ if (this.isPInst) a = this._toRadians(a);
+ var m = this.mag();
+ this.x = m * Math.cos(a);
+ this.y = m * Math.sin(a);
+ return this;
+ } /**
+ * Rotates a 2D vector by an angle without changing its magnitude.
+ *
+ * By convention, the positive x-axis has an angle of 0. Angles increase in
+ * the clockwise direction.
+ *
+ * If the vector was created with
+ * createVector(), `rotate()` uses
+ * the units of the current angleMode().
+ *
+ * The static version of `rotate()`, as in `p5.Vector.rotate(v, PI)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method rotate
+ * @param {number} angle angle of rotation.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(30, 0);
+ *
+ * // Draw the red arrow.
+ * drawArrow(v0, v1, 'red');
+ *
+ * // Point down.
+ * v1.setHeading(HALF_PI);
+ *
+ * // Draw the blue arrow.
+ * drawArrow(v0, v1, 'blue');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(1, 0);
+ *
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v.toString());
+ *
+ * // Rotate a quarter turn.
+ * v.rotate(HALF_PI);
+ *
+ * // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Create a p5.Vector object.
+ * let v = createVector(1, 0);
+ *
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v.toString());
+ *
+ * // Rotate a quarter turn.
+ * v.rotate(90);
+ *
+ * // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v0 = createVector(1, 0);
+ *
+ * // Create a rotated copy.
+ * let v1 = p5.Vector.rotate(v0, HALF_PI);
+ *
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v0.toString());
+ * // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+ * print(v1.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Create a p5.Vector object.
+ * let v0 = createVector(1, 0);
+ *
+ * // Create a rotated copy.
+ * let v1 = p5.Vector.rotate(v0, 90);
+ *
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v0.toString());
+ *
+ * // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+ * print(v1.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'rotate',
+ value: function rotate(a) {
+ var newHeading = this.heading() + a;
+ if (this.isPInst) newHeading = this._toRadians(newHeading);
+ var mag = this.mag();
+ this.x = Math.cos(newHeading) * mag;
+ this.y = Math.sin(newHeading) * mag;
+ return this;
+ } /**
+ * Calculates the angle between two vectors.
+ *
+ * The angles returned are signed, which means that
+ * `v1.angleBetween(v2) === -v2.angleBetween(v1)`.
+ *
+ * If the vector was created with
+ * createVector(), `angleBetween()` returns
+ * angles in the units of the current
+ * angleMode().
+ *
+ * @method angleBetween
+ * @param {p5.Vector} value x, y, and z components of a p5.Vector.
+ * @return {Number} angle between the vectors.
+ * @example
+ *
+ * let v0;
+ * let v1;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create p5.Vector objects.
+ * v0 = createVector(50, 50);
+ * v1 = createVector(30, 0);
+ *
+ * describe('A black arrow extends from the center of a gray square. The arrow rotates clockwise.');
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * // Rotate v1.
+ * v1.rotate(0.01);
+ *
+ * // Draw the black arrow.
+ * drawArrow(v0, v1, 'black');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v0 = createVector(1, 0);
+ * let v1 = createVector(0, 1);
+ *
+ * // Prints "1.570..." to the console.
+ * print(v0.angleBetween(v1));
+ *
+ * // Prints "-1.570..." to the console.
+ * print(v1.angleBetween(v0));
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Use degrees.
+ * angleMode(DEGREES);
+ * // Create p5.Vector objects.
+ * let v0 = createVector(1, 0);
+ * let v1 = createVector(0, 1);
+ *
+ * // Prints "90" to the console.
+ * print(v0.angleBetween(v1));
+ *
+ * // Prints "-90" to the console.
+ * print(v1.angleBetween(v0));
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v0 = createVector(1, 0);
+ * let v1 = createVector(0, 1);
+ *
+ * // Prints "1.570..." to the console.
+ * print(p5.Vector.angleBetween(v0, v1));
+ *
+ * // Prints "-1.570..." to the console.
+ * print(p5.Vector.angleBetween(v1, v0));
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Create p5.Vector objects.
+ * let v0 = createVector(1, 0);
+ * let v1 = createVector(0, 1);
+ *
+ * // Prints "90" to the console.
+ * print(p5.Vector.angleBetween(v0, v1));
+ *
+ * // Prints "-90" to the console.
+ * print(p5.Vector.angleBetween(v1, v0));
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'angleBetween',
+ value: function angleBetween(v) {
+ var magSqMult = this.magSq() * v.magSq();
+ // Returns NaN if either vector is the zero vector.
+ if (magSqMult === 0) {
+ return NaN;
+ }
+ var u = this.cross(v);
+ // The dot product computes the cos value, and the cross product computes
+ // the sin value. Find the angle based on them. In addition, in the case of
+ // 2D vectors, a sign is added according to the direction of the vector.
+ var angle = Math.atan2(u.mag(), this.dot(v)) * Math.sign(u.z || 1);
+ if (this.isPInst) {
+ angle = this._fromRadians(angle);
+ }
+ return angle;
+ } /**
+ * Calculates new `x`, `y`, and `z` components that are proportionally the
+ * same distance between two vectors.
+ *
+ * The `amt` parameter is the amount to interpolate between the old vector and
+ * the new vector. 0.0 keeps all components equal to the old vector's, 0.5 is
+ * halfway between, and 1.0 sets all components equal to the new vector's.
+ *
+ * The static version of `lerp()`, as in `p5.Vector.lerp(v0, v1, 0.5)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method lerp
+ * @param {Number} x x component.
+ * @param {Number} y y component.
+ * @param {Number} z z component.
+ * @param {Number} amt amount of interpolation between 0.0 (old vector)
+ * and 1.0 (new vector). 0.5 is halfway between.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Two arrows extend from the center of a gray square. A red arrow points to the right and a blue arrow points down. The text "Radians: 1.57" and "Degrees: 90" is written above the arrows.');
+ * }
+ * function draw() {
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(30, 0);
+ * let v2 = createVector(0, 30);
+ *
+ * // Draw the red arrow.
+ * drawArrow(v0, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * drawArrow(v0, v2, 'blue');
+ *
+ * // Use radians.
+ * angleMode(RADIANS);
+ *
+ * // Display the angle in radians.
+ * let angle = round(v1.angleBetween(v2), 2);
+ * text(`Radians: ${angle}`, 20, 20);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Display the angle in degrees.
+ * angle = round(v1.angleBetween(v2), 2);
+ * text(`Degrees: ${angle}`, 20, 35);
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v0 = createVector(1, 1, 1);
+ * let v1 = createVector(3, 3, 3);
+ *
+ * // Interpolate.
+ * v0.lerp(v1, 0.5);
+ *
+ * // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+ * print(v0.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(1, 1, 1);
+ *
+ * // Interpolate.
+ * v.lerp(3, 3, 3, 0.5);
+ *
+ * // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v0 = createVector(1, 1, 1);
+ * let v1 = createVector(3, 3, 3);
+ *
+ * // Interpolate.
+ * let v2 = p5.Vector.lerp(v0, v1, 0.5);
+ *
+ * // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+ * print(v2.toString());
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method lerp
+ * @param {p5.Vector} v p5.Vector to lerp toward.
+ * @param {Number} amt
+ * @chainable
+ */
+
+ },
+ {
+ key: 'lerp',
+ value: function lerp(x, y, z, amt) {
+ if (x instanceof _main.default.Vector) {
+ return this.lerp(x.x, x.y, x.z, y);
+ }
+ this.x += (x - this.x) * amt || 0;
+ this.y += (y - this.y) * amt || 0;
+ this.z += (z - this.z) * amt || 0;
+ return this;
+ } /**
+ * Calculates a new heading and magnitude that are between two vectors.
+ *
+ * The `amt` parameter is the amount to interpolate between the old vector and
+ * the new vector. 0.0 keeps the heading and magnitude equal to the old
+ * vector's, 0.5 sets them halfway between, and 1.0 sets the heading and
+ * magnitude equal to the new vector's.
+ *
+ * `slerp()` differs from lerp() because
+ * it interpolates magnitude. Calling `v0.slerp(v1, 0.5)` sets `v0`'s
+ * magnitude to a value halfway between its original magnitude and `v1`'s.
+ * Calling `v0.lerp(v1, 0.5)` makes no such guarantee.
+ *
+ * The static version of `slerp()`, as in `p5.Vector.slerp(v0, v1, 0.5)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method slerp
+ * @param {p5.Vector} v p5.Vector to slerp toward.
+ * @param {Number} amt amount of interpolation between 0.0 (old vector)
+ * and 1.0 (new vector). 0.5 is halfway between.
+ * @return {p5.Vector}
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points down, and a purple arrow points to the bottom right.');
+ * }
+ * function draw() {
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(30, 0);
+ * let v2 = createVector(0, 30);
+ *
+ * // Interpolate.
+ * let v3 = p5.Vector.lerp(v1, v2, 0.5);
+ *
+ * // Draw the red arrow.
+ * drawArrow(v0, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * drawArrow(v0, v2, 'blue');
+ *
+ * // Draw the purple arrow.
+ * drawArrow(v0, v3, 'purple');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v0 = createVector(3, 0);
+ *
+ * // Prints "3" to the console.
+ * print(v0.mag());
+ *
+ * // Prints "0" to the console.
+ * print(v0.heading());
+ *
+ * // Create a p5.Vector object.
+ * let v1 = createVector(0, 1);
+ *
+ * // Prints "1" to the console.
+ * print(v1.mag());
+ *
+ * // Prints "1.570..." to the console.
+ * print(v1.heading());
+ *
+ * // Interpolate halfway between v0 and v1.
+ * v0.slerp(v1, 0.5);
+ *
+ * // Prints "2" to the console.
+ * print(v0.mag());
+ *
+ * // Prints "0.785..." to the console.
+ * print(v0.heading());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v0 = createVector(3, 0);
+ *
+ * // Prints "3" to the console.
+ * print(v0.mag());
+ *
+ * // Prints "0" to the console.
+ * print(v0.heading());
+ *
+ * // Create a p5.Vector object.
+ * let v1 = createVector(0, 1);
+ *
+ * // Prints "1" to the console.
+ * print(v1.mag());
+ *
+ * // Prints "1.570..." to the console.
+ * print(v1.heading());
+ *
+ * // Create a p5.Vector that's halfway between v0 and v1.
+ * let v3 = p5.Vector.slerp(v0, v1, 0.5);
+ *
+ * // Prints "2" to the console.
+ * print(v3.mag());
+ *
+ * // Prints "0.785..." to the console.
+ * print(v3.heading());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'slerp',
+ value: function slerp(v, amt) {
+ // edge cases.
+ if (amt === 0) {
+ return this;
+ }
+ if (amt === 1) {
+ return this.set(v);
+ } // calculate magnitudes
+
+ var selfMag = this.mag();
+ var vMag = v.mag();
+ var magmag = selfMag * vMag;
+ // if either is a zero vector, linearly interpolate by these vectors
+ if (magmag === 0) {
+ this.mult(1 - amt).add(v.x * amt, v.y * amt, v.z * amt);
+ return this;
+ } // the cross product of 'this' and 'v' is the axis of rotation
+
+ var axis = this.cross(v);
+ var axisMag = axis.mag();
+ // Calculates the angle between 'this' and 'v'
+ var theta = Math.atan2(axisMag, this.dot(v));
+ // However, if the norm of axis is 0, normalization cannot be performed,
+ // so we will divide the cases
+ if (axisMag > 0) {
+ axis.x /= axisMag;
+ axis.y /= axisMag;
+ axis.z /= axisMag;
+ } else if (theta < Math.PI * 0.5) {
+ // if the norm is 0 and the angle is less than PI/2,
+ // the angle is very close to 0, so do linear interpolation.
+ this.mult(1 - amt).add(v.x * amt, v.y * amt, v.z * amt);
+ return this;
+ } else {
+ // If the norm is 0 and the angle is more than PI/2, the angle is
+ // very close to PI.
+ // In this case v can be regarded as '-this', so take any vector
+ // that is orthogonal to 'this' and use that as the axis.
+ if (this.z === 0 && v.z === 0) {
+ // if both this and v are 2D vectors, use (0,0,1)
+ // this makes the result also a 2D vector.
+ axis.set(0, 0, 1);
+ } else if (this.x !== 0) {
+ // if the x components is not 0, use (y, -x, 0)
+ axis.set(this.y, - this.x, 0).normalize();
+ } else {
+ // if the x components is 0, use (1,0,0)
+ axis.set(1, 0, 0);
+ }
+ } // Since 'axis' is a unit vector, ey is a vector of the same length as 'this'.
+
+ var ey = axis.cross(this);
+ // interpolate the length with 'this' and 'v'.
+ var lerpedMagFactor = 1 - amt + amt * vMag / selfMag;
+ // imagine a situation where 'axis', 'this', and 'ey' are pointing
+ // along the z, x, and y axes, respectively.
+ // rotates 'this' around 'axis' by amt * theta towards 'ey'.
+ var cosMultiplier = lerpedMagFactor * Math.cos(amt * theta);
+ var sinMultiplier = lerpedMagFactor * Math.sin(amt * theta);
+ // then, calculate 'result'.
+ this.x = this.x * cosMultiplier + ey.x * sinMultiplier;
+ this.y = this.y * cosMultiplier + ey.y * sinMultiplier;
+ this.z = this.z * cosMultiplier + ey.z * sinMultiplier;
+ return this;
+ } /**
+ * Reflects a vector about a line in 2D or a plane in 3D.
+ *
+ * The orientation of the line or plane is described by a normal vector that
+ * points away from the shape.
+ *
+ * The static version of `reflect()`, as in `p5.Vector.reflect(v, n)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method reflect
+ * @param {p5.Vector} surfaceNormal p5.Vector
+ * to reflect about.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points to the left, and a purple arrow points down.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create p5.Vector objects.
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(20, 0);
+ * let v2 = createVector(-40, 0);
+ *
+ * // Create a p5.Vector that's halfway between v1 and v2.
+ * let v3 = p5.Vector.slerp(v1, v2, 0.5);
+ *
+ * // Draw the red arrow.
+ * drawArrow(v0, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * drawArrow(v0, v2, 'blue');
+ *
+ * // Draw the purple arrow.
+ * drawArrow(v0, v3, 'purple');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a normal vector.
+ * let n = createVector(0, 1);
+ * // Create a vector to reflect.
+ * let v = createVector(4, 6);
+ *
+ * // Reflect v about n.
+ * v.reflect(n);
+ *
+ * // Prints "p5.Vector Object : [4, -6, 0]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a normal vector.
+ * let n = createVector(0, 1);
+ *
+ * // Create a vector to reflect.
+ * let v0 = createVector(4, 6);
+ *
+ * // Create a reflected vector.
+ * let v1 = p5.Vector.reflect(v0, n);
+ *
+ * // Prints "p5.Vector Object : [4, -6, 0]" to the console.
+ * print(v1.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'reflect',
+ value: function reflect(surfaceNormal) {
+ surfaceNormal.normalize();
+ return this.sub(surfaceNormal.mult(2 * this.dot(surfaceNormal)));
+ } /**
+ * Returns the vector's components as an array of numbers.
+ *
+ * @method array
+ * @return {Number[]} array with the vector's components.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Three arrows extend from the center of a gray square with a vertical line down its middle. A black arrow points to the right, a blue arrow points to the bottom left, and a red arrow points to the bottom right.');
+ * }
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a vertical line.
+ * line(50, 0, 50, 100);
+ *
+ * // Create a normal vector.
+ * let n = createVector(1, 0);
+ *
+ * // Center.
+ * let v0 = createVector(50, 50);
+ *
+ * // Create a vector to reflect.
+ * let v1 = createVector(30, 40);
+ *
+ * // Create a reflected vector.
+ * let v2 = p5.Vector.reflect(v1, n);
+ *
+ * // Scale the normal vector for drawing.
+ * n.setMag(30);
+ *
+ * // Draw the black arrow.
+ * drawArrow(v0, n, 'black');
+ *
+ * // Draw the red arrow.
+ * drawArrow(v0, v1, 'red');
+ *
+ * // Draw the blue arrow.
+ * drawArrow(v0, v2, 'blue');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'array',
+ value: function array() {
+ return [this.x || 0,
+ this.y || 0,
+ this.z || 0];
+ } /**
+ * Checks whether all the vector's components are equal to another vector's.
+ *
+ * `equals()` returns `true` if the vector's components are all the same as another
+ * vector's and `false` if not.
+ *
+ * The version of `equals()` with one parameter interprets it as another
+ * p5.Vector object.
+ *
+ * The version of `equals()` with multiple parameters interprets them as the
+ * components of another vector. Any missing parameters are assigned the value
+ * 0.
+ *
+ * The static version of `equals()`, as in `p5.Vector.equals(v0, v1)`,
+ * interprets both parameters as p5.Vector objects.
+ *
+ * @method equals
+ * @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 {Boolean} whether the vectors are equal.
+ * @example
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = createVector(20, 30);
+ *
+ * // Prints "[20, 30, 0]" to the console.
+ * print(v.array());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v0 = createVector(10, 20, 30);
+ * let v1 = createVector(10, 20, 30);
+ * let v2 = createVector(0, 0, 0);
+ *
+ * // Prints "true" to the console.
+ * print(v0.equals(v1));
+ *
+ * // Prints "false" to the console.
+ * print(v0.equals(v2));
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v0 = createVector(5, 10, 20);
+ * let v1 = createVector(5, 10, 20);
+ * let v2 = createVector(13, 10, 19);
+ *
+ * // Prints "true" to the console.
+ * print(v0.equals(v1.x, v1.y, v1.z));
+ *
+ * // Prints "false" to the console.
+ * print(v0.equals(v2.x, v2.y, v2.z));
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method equals
+ * @param {p5.Vector|Array} value vector to compare.
+ * @return {Boolean}
+ */
+
+ },
+ {
+ key: 'equals',
+ value: function equals(x, y, z) {
+ var a,
+ b,
+ c;
+ if (x instanceof _main.default.Vector) {
+ a = x.x || 0;
+ b = x.y || 0;
+ c = x.z || 0;
+ } else if (Array.isArray(x)) {
+ a = x[0] || 0;
+ b = x[1] || 0;
+ c = x[2] || 0;
+ } else {
+ a = x || 0;
+ b = y || 0;
+ c = z || 0;
+ }
+ return this.x === a && this.y === b && this.z === c;
+ } // Static Methods
+ /**
+ * Creates a new 2D vector from an angle.
+ *
+ * @method fromAngle
+ * @static
+ * @param {Number} angle desired angle, in radians. Unaffected by angleMode().
+ * @param {Number} [length] length of the new vector (defaults to 1).
+ * @return {p5.Vector} new p5.Vector object.
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create p5.Vector objects.
+ * let v0 = createVector(10, 20, 30);
+ * let v1 = createVector(10, 20, 30);
+ * let v2 = createVector(0, 0, 0);
+ *
+ * // Prints "true" to the console.
+ * print(p5.Vector.equals(v0, v1));
+ *
+ * // Prints "false" to the console.
+ * print(p5.Vector.equals(v0, v2));
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = p5.Vector.fromAngle(0);
+ *
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = p5.Vector.fromAngle(0, 30);
+ *
+ * // Prints "p5.Vector Object : [30, 0, 0]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ }
+ ], [
+ {
+ key: 'fromAngle',
+ value: function fromAngle(angle) {
+ var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+ return new _main.default.Vector(length * Math.cos(angle), length * Math.sin(angle), 0);
+ } /**
+ * Creates a new 3D vector from a pair of ISO spherical angles.
+ *
+ * @method fromAngles
+ * @static
+ * @param {Number} theta polar angle in radians (zero is up).
+ * @param {Number} phi azimuthal angle in radians
+ * (zero is out of the screen).
+ * @param {Number} [length] length of the new vector (defaults to 1).
+ * @return {p5.Vector} new p5.Vector object.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A black arrow extends from the center of a gray square. It points to the right.');
+ * }
+ * function draw() {
+ * background(200);
+ *
+ * // Create a p5.Vector to the center.
+ * let v0 = createVector(50, 50);
+ *
+ * // Create a p5.Vector with an angle 0 and magnitude 30.
+ * let v1 = p5.Vector.fromAngle(0, 30);
+ *
+ * // Draw the black arrow.
+ * drawArrow(v0, v1, 'black');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = p5.Vector.fromAngles(0, 0);
+ *
+ * // Prints "p5.Vector Object : [0, -1, 0]" to the console.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'fromAngles',
+ value: function fromAngles(theta, phi) {
+ var length = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+ return new _main.default.Vector(length * sinTheta * sinPhi, - length * cosTheta, length * sinTheta * cosPhi);
+ } /**
+ * Creates a new 2D unit vector with a random heading.
+ *
+ * @method random2D
+ * @static
+ * @return {p5.Vector} new p5.Vector object.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A light shines on a pink sphere as it orbits.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Calculate the ISO angles.
+ * let theta = frameCount * 0.05;
+ * let phi = 0;
+ *
+ * // Create a p5.Vector object.
+ * let v = p5.Vector.fromAngles(theta, phi, 100);
+ *
+ * // Create a point light using the p5.Vector.
+ * let c = color('deeppink');
+ * pointLight(c, v);
+ *
+ * // Style the sphere.
+ * fill(255);
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(35);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = p5.Vector.random2D();
+ *
+ * // Prints "p5.Vector Object : [x, y, 0]" to the console
+ * // where x and y are small random numbers.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'random2D',
+ value: function random2D() {
+ return this.fromAngle(Math.random() * constants.TWO_PI);
+ } /**
+ * Creates a new 3D unit vector with a random heading.
+ *
+ * @method random3D
+ * @static
+ * @return {p5.Vector} new p5.Vector object.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(1);
+ *
+ * describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a p5.Vector to the center.
+ * let v0 = createVector(50, 50);
+ *
+ * // Create a random p5.Vector.
+ * let v1 = p5.Vector.random2D();
+ *
+ * // Scale v1 for drawing.
+ * v1.mult(30);
+ *
+ * // Draw the black arrow.
+ * drawArrow(v0, v1, 'black');
+ * }
+ *
+ * // Draws an arrow between two vectors.
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'random3D',
+ value: function random3D() {
+ var angle = Math.random() * constants.TWO_PI;
+ var vz = Math.random() * 2 - 1;
+ var vzBase = Math.sqrt(1 - vz * vz);
+ var vx = vzBase * Math.cos(angle);
+ var vy = vzBase * Math.sin(angle);
+ return new _main.default.Vector(vx, vy, vz);
+ } // Returns a copy of a vector.
+ /**
+ * @method copy
+ * @static
+ * @param {p5.Vector} v the p5.Vector to create a copy of
+ * @return {p5.Vector} the copy of the p5.Vector object
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy(v) {
+ return v.copy(v);
+ } // Adds two vectors together and returns a new one.
+ /**
+ * @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] vector to receive the result.
+ * @return {p5.Vector} resulting p5.Vector.
+ */
+
+ },
+ {
+ key: 'add',
+ value: function add() {
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+ var v1 = args[0],
+ v2 = args[1],
+ target = args[2];
+ if (!target) {
+ target = v1.copy();
+ if (args.length === 3) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.add');
+ }
+ } else {
+ target.set(v1);
+ }
+ target.add(v2);
+ return target;
+ } // Returns a vector remainder when it is divided by another vector
+ /**
+ * @method rem
+ * @static
+ * @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
+ */
+
+ },
+ {
+ key: 'rem',
+ value: function rem(v1, v2) {
+ if (v1 instanceof _main.default.Vector && v2 instanceof _main.default.Vector) {
+ var target = v1.copy();
+ target.rem(v2);
+ return target;
+ }
+ } /*
+ * 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`.
+ */
+ /**
+ * @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] vector to receive the result.
+ * @return {p5.Vector} The resulting p5.Vector
+ */
+
+ },
+ {
+ key: 'sub',
+ value: function sub() {
+ for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+ args[_key5] = arguments[_key5];
+ }
+ var v1 = args[0],
+ v2 = args[1],
+ target = args[2];
+ if (!target) {
+ target = v1.copy();
+ if (args.length === 3) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.sub');
+ }
+ } else {
+ target.set(v1);
+ }
+ target.sub(v2);
+ return target;
+ } /**
+ * Multiplies a vector by a scalar and returns a new vector.
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z]
+ * @return {p5.Vector} resulting new p5.Vector.
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {p5.Vector} v
+ * @param {Number} n
+ * @param {p5.Vector} [target] vector to receive the result.
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {p5.Vector} v0
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} [target]
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {p5.Vector} v0
+ * @param {Number[]} arr
+ * @param {p5.Vector} [target]
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+
+ },
+ {
+ key: 'mult',
+ value: function mult() {
+ for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+ args[_key6] = arguments[_key6];
+ }
+ var v = args[0],
+ n = args[1],
+ target = args[2];
+ if (!target) {
+ target = v.copy();
+ if (args.length === 3) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.mult');
+ }
+ } else {
+ target.set(v);
+ }
+ target.mult(n);
+ return target;
+ } /**
+ * Rotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.
+ */
+ /**
+ * @method rotate
+ * @static
+ * @param {p5.Vector} v
+ * @param {Number} angle
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+
+ },
+ {
+ key: 'rotate',
+ value: function rotate() {
+ for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+ args[_key7] = arguments[_key7];
+ }
+ var v = args[0],
+ a = args[1],
+ target = args[2];
+ if (args.length === 2) {
+ target = v.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.rotate');
+ }
+ target.set(v);
+ }
+ target.rotate(a);
+ return target;
+ } /**
+ * Divides a vector by a scalar and returns a new vector.
+ */
+ /**
+ * @method div
+ * @static
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z]
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+ /**
+ * @method div
+ * @static
+ * @param {p5.Vector} v
+ * @param {Number} n
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+ /**
+ * @method div
+ * @static
+ * @param {p5.Vector} v0
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} [target]
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+ /**
+ * @method div
+ * @static
+ * @param {p5.Vector} v0
+ * @param {Number[]} arr
+ * @param {p5.Vector} [target]
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+
+ },
+ {
+ key: 'div',
+ value: function div() {
+ for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+ args[_key8] = arguments[_key8];
+ }
+ var v = args[0],
+ n = args[1],
+ target = args[2];
+ if (!target) {
+ target = v.copy();
+ if (args.length === 3) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.div');
+ }
+ } else {
+ target.set(v);
+ }
+ target.div(n);
+ return target;
+ } /**
+ * Calculates the dot product of two vectors.
+ */
+ /**
+ * @method dot
+ * @static
+ * @param {p5.Vector} v1 first p5.Vector.
+ * @param {p5.Vector} v2 second p5.Vector.
+ * @return {Number} dot product.
+ */
+
+ },
+ {
+ key: 'dot',
+ value: function dot(v1, v2) {
+ return v1.dot(v2);
+ } /**
+ * Calculates the cross product of two vectors.
+ */
+ /**
+ * @method cross
+ * @static
+ * @param {p5.Vector} v1 first p5.Vector.
+ * @param {p5.Vector} v2 second p5.Vector.
+ * @return {Number} cross product.
+ */
+
+ },
+ {
+ key: 'cross',
+ value: function cross(v1, v2) {
+ return v1.cross(v2);
+ } /**
+ * Calculates the Euclidean distance between two points (considering a
+ * point as a vector object).
+ */
+ /**
+ * @method dist
+ * @static
+ * @param {p5.Vector} v1 The first p5.Vector
+ * @param {p5.Vector} v2 The second p5.Vector
+ * @return {Number} The distance
+ */
+
+ },
+ {
+ key: 'dist',
+ value: function dist(v1, v2) {
+ return v1.dist(v2);
+ } /**
+ * Linear interpolate a vector to another vector and return the result as a
+ * new vector.
+ */
+ /**
+ * @method lerp
+ * @static
+ * @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
+ */
+
+ },
+ {
+ key: 'lerp',
+ value: function lerp() {
+ for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
+ args[_key9] = arguments[_key9];
+ }
+ var v1 = args[0],
+ v2 = args[1],
+ amt = args[2],
+ target = args[3];
+ if (!target) {
+ target = v1.copy();
+ if (args.length === 4) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.lerp');
+ }
+ } else {
+ target.set(v1);
+ }
+ target.lerp(v2, amt);
+ return target;
+ } /**
+ * Performs spherical linear interpolation with the other vector
+ * and returns the resulting vector.
+ * This works in both 3D and 2D. As for 2D, the result of slerping
+ * between 2D vectors is always a 2D vector.
+ */
+ /**
+ * @method slerp
+ * @static
+ * @param {p5.Vector} v1 old vector.
+ * @param {p5.Vector} v2 new vector.
+ * @param {Number} amt
+ * @param {p5.Vector} [target] vector to receive the result.
+ * @return {p5.Vector} slerped vector between v1 and v2
+ */
+
+ },
+ {
+ key: 'slerp',
+ value: function slerp() {
+ for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+ args[_key10] = arguments[_key10];
+ }
+ var v1 = args[0],
+ v2 = args[1],
+ amt = args[2],
+ target = args[3];
+ if (!target) {
+ target = v1.copy();
+ if (args.length === 4) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.slerp');
+ }
+ } else {
+ target.set(v1);
+ }
+ target.slerp(v2, amt);
+ return 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)`.)
+ */
+ /**
+ * @method mag
+ * @static
+ * @param {p5.Vector} vecT The vector to return the magnitude of
+ * @return {Number} The magnitude of vecT
+ */
+
+ },
+ {
+ key: 'mag',
+ value: function mag(vecT) {
+ return vecT.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).)
+ * Faster if the real length is not required in the
+ * case of comparing vectors, etc.
+ */
+ /**
+ * @method magSq
+ * @static
+ * @param {p5.Vector} vecT the vector to return the squared magnitude of
+ * @return {Number} the squared magnitude of vecT
+ */
+
+ },
+ {
+ key: 'magSq',
+ value: function magSq(vecT) {
+ return vecT.magSq();
+ } /**
+ * Normalize the vector to length 1 (make it a unit vector).
+ */
+ /**
+ * @method normalize
+ * @static
+ * @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
+ */
+
+ },
+ {
+ key: 'normalize',
+ value: function normalize() {
+ for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+ args[_key11] = arguments[_key11];
+ }
+ var v = args[0],
+ target = args[1];
+ if (args.length < 2) {
+ target = v.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.normalize');
+ }
+ target.set(v);
+ }
+ return target.normalize();
+ } /**
+ * Limit the magnitude of the vector to the value used for the max
+ * parameter.
+ */
+ /**
+ * @method limit
+ * @static
+ * @param {p5.Vector} v the vector to limit
+ * @param {Number} max
+ * @param {p5.Vector} [target] the vector to receive the result (Optional)
+ * @return {p5.Vector} v with a magnitude limited to max
+ */
+
+ },
+ {
+ key: 'limit',
+ value: function limit() {
+ for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+ args[_key12] = arguments[_key12];
+ }
+ var v = args[0],
+ max = args[1],
+ target = args[2];
+ if (args.length < 3) {
+ target = v.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.limit');
+ }
+ target.set(v);
+ }
+ return target.limit(max);
+ } /**
+ * Set the magnitude of the vector to the value used for the len
+ * parameter.
+ */
+ /**
+ * @method setMag
+ * @static
+ * @param {p5.Vector} v the vector to set the magnitude of
+ * @param {number} len
+ * @param {p5.Vector} [target] the vector to receive the result (Optional)
+ * @return {p5.Vector} v with a magnitude set to len
+ */
+
+ },
+ {
+ key: 'setMag',
+ value: function setMag() {
+ for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+ args[_key13] = arguments[_key13];
+ }
+ var v = args[0],
+ len = args[1],
+ target = args[2];
+ if (args.length < 3) {
+ target = v.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.setMag');
+ }
+ target.set(v);
+ }
+ return target.setMag(len);
+ } /**
+ * Calculate the angle of rotation for this vector (only 2D vectors).
+ * p5.Vectors created using createVector()
+ * will take the current angleMode into
+ * consideration, and give the angle in radians or degrees accordingly.
+ */
+ /**
+ * @method heading
+ * @static
+ * @param {p5.Vector} v the vector to find the angle of
+ * @return {Number} the angle of rotation
+ */
+
+ },
+ {
+ key: 'heading',
+ value: function heading(v) {
+ return v.heading();
+ } /**
+ * Calculates and returns the angle between two vectors. This function will take
+ * the angleMode on v1 into consideration, and
+ * give the angle in radians or degrees accordingly.
+ */
+ /**
+ * @method angleBetween
+ * @static
+ * @param {p5.Vector} v1 the first vector.
+ * @param {p5.Vector} v2 the second vector.
+ * @return {Number} angle between the two vectors.
+ */
+
+ },
+ {
+ key: 'angleBetween',
+ value: function angleBetween(v1, v2) {
+ return v1.angleBetween(v2);
+ } /**
+ * Reflect a vector about a normal to a line in 2D, or about a normal to a
+ * plane in 3D.
+ */
+ /**
+ * @method reflect
+ * @static
+ * @param {p5.Vector} incidentVector vector to be reflected.
+ * @param {p5.Vector} surfaceNormal
+ * @param {p5.Vector} [target] vector to receive the result.
+ * @return {p5.Vector} the reflected vector
+ */
+
+ },
+ {
+ key: 'reflect',
+ value: function reflect() {
+ for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+ args[_key14] = arguments[_key14];
+ }
+ var incidentVector = args[0],
+ surfaceNormal = args[1],
+ target = args[2];
+ if (args.length < 3) {
+ target = incidentVector.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.reflect');
+ }
+ target.set(incidentVector);
+ }
+ return target.reflect(surfaceNormal);
+ } /**
+ * Return a representation of this vector as a float array. This is only
+ * for temporary use. If used in any other fashion, the contents should be
+ * copied by using the p5.Vector.copy()
+ * method to copy into your own vector.
+ */
+ /**
+ * @method array
+ * @static
+ * @param {p5.Vector} v the vector to convert to an array
+ * @return {Number[]} an Array with the 3 values
+ */
+
+ },
+ {
+ key: 'array',
+ value: function array(v) {
+ return v.array();
+ } /**
+ * Equality check against a p5.Vector
+ */
+ /**
+ * @method equals
+ * @static
+ * @param {p5.Vector|Array} v1 the first vector to compare
+ * @param {p5.Vector|Array} v2 the second vector to compare
+ * @return {Boolean}
+ */
+
+ },
+ {
+ key: 'equals',
+ value: function equals(v1, v2) {
+ var v;
+ if (v1 instanceof _main.default.Vector) {
+ v = v1;
+ } else if (Array.isArray(v1)) {
+ v = new _main.default.Vector().set(v1);
+ } else {
+ _main.default._friendlyError('The v1 parameter should be of type Array or p5.Vector', 'p5.Vector.equals');
+ }
+ return v.equals(v2);
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Vector;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.every': 172,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.some': 187,
+ 'core-js/modules/es.math.sign': 195,
+ 'core-js/modules/es.number.constructor': 196,
+ 'core-js/modules/es.number.is-finite': 197,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.sub': 223,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 337: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Math
+ * @submodule Random
+ * @for p5
+ * @requires core
+ */
+ // variables used for random number generators
+
+ var randomStateProp = '_lcg_random_state';
+ // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
+ // m is basically chosen to be large (as it is the max period)
+ // and for its relationships to a and c
+ var m = 4294967296;
+ // a - 1 should be divisible by m's prime factors
+ var a = 1664525;
+ // c and m should be co-prime
+ var c = 1013904223;
+ var y2 = 0;
+ // Linear Congruential Generator that stores its state at instance[stateProperty]
+ _main.default.prototype._lcg = function (stateProperty) {
+ // define the recurrence relationship
+ this[stateProperty] = (a * this[stateProperty] + c) % m;
+ // return a float in [0, 1)
+ // we've just used % m, so / m is always < 1
+ return this[stateProperty] / m;
+ };
+ _main.default.prototype._lcgSetSeed = function (stateProperty, val) {
+ // pick a random seed if val is undefined or null
+ // the >>> 0 casts the seed to an unsigned 32-bit integer
+ this[stateProperty] = (val == null ? Math.random() * m : val) >>> 0;
+ };
+ /**
+ * Sets the seed value for the random() and
+ * randomGaussian() functions.
+ *
+ * By default, random() and
+ * randomGaussian() produce different
+ * results each time a sketch is run. Calling `randomSeed()` with a constant
+ * argument, such as `randomSeed(99)`, makes these functions produce the same
+ * results each time a sketch is run.
+ *
+ * @method randomSeed
+ * @param {Number} seed seed value.
+ *
+ * @example
+ *
+ * function setup() {
+ * // Create a p5.Vector object.
+ * let v = p5.Vector.random3D();
+ *
+ * // Prints "p5.Vector Object : [x, y, z]" to the console
+ * // where x, y, and z are small random numbers.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.randomSeed = function (seed) {
+ this._lcgSetSeed(randomStateProp, seed);
+ this._gaussian_previous = false;
+ };
+ /**
+ * Returns a random number or a random element from an array.
+ *
+ * `random()` follows uniform distribution, which means that all outcomes are
+ * equally likely. When `random()` is used to generate numbers, all
+ * numbers in the output range are equally likely to be returned. When
+ * `random()` is used to select elements from an array, all elements are
+ * equally likely to be chosen.
+ *
+ * By default, `random()` produces different results each time a sketch runs.
+ * The randomSeed() function can be used to
+ * generate the same sequence of numbers or choices each time a sketch runs.
+ *
+ * The version of `random()` with no parameters returns a random number from 0
+ * up to but not including 1.
+ *
+ * The version of `random()` with one parameter works one of two ways. If the
+ * argument passed is a number, `random()` returns a random number from 0 up
+ * to but not including the number. For example, calling `random(5)` returns
+ * values between 0 and 5. If the argument passed is an array, `random()`
+ * returns a random element from that array. For example, calling
+ * `random(['🦁', '🐯', '🐻'])` returns either a lion, tiger, or bear emoji.
+ *
+ * The version of `random()` with two parameters returns a random number from
+ * a given range. The arguments passed set the range's lower and upper bounds.
+ * For example, calling `random(-5, 10.2)` returns values from -5 up to but
+ * not including 10.2.
+ *
+ * @method random
+ * @param {Number} [min] lower bound (inclusive).
+ * @param {Number} [max] upper bound (exclusive).
+ * @return {Number} random number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get random coordinates.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ *
+ * // Draw the white circle.
+ * circle(x, y, 10);
+ *
+ * // Set a random seed for consistency.
+ * randomSeed(99);
+ *
+ * // Get random coordinates.
+ * x = random(0, 100);
+ * y = random(0, 100);
+ *
+ * // Draw the black circle.
+ * fill(0);
+ * circle(x, y, 10);
+ *
+ * describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get random coordinates between 0 and 100.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ *
+ * // Draw a point.
+ * strokeWeight(5);
+ * point(x, y);
+ *
+ * describe('A black dot appears in a random position on a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get random coordinates between 0 and 100.
+ * let x = random(100);
+ * let y = random(100);
+ *
+ * // Draw the point.
+ * strokeWeight(5);
+ * point(x, y);
+ *
+ * describe('A black dot appears in a random position on a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of emoji strings.
+ * let animals = ['🦁', '🐯', '🐻'];
+ *
+ * // Choose a random element from the array.
+ * let choice = random(animals);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(20);
+ *
+ * // Display the emoji.
+ * text(choice, 50, 50);
+ *
+ * describe('An animal face is displayed at random. Either a lion, tiger, or bear.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(5);
+ *
+ * describe('A black dot moves around randomly on a gray square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get random coordinates between 0 and 100.
+ * let x = random(100);
+ * let y = random(100);
+ *
+ * // Draw the point.
+ * strokeWeight(5);
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(5);
+ *
+ * describe('A black dot moves around randomly in the middle of a gray square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get random coordinates between 45 and 55.
+ * let x = random(45, 55);
+ * let y = random(45, 55);
+ *
+ * // Draw the point.
+ * strokeWeight(5);
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method random
+ * @param {Array} choices array to choose from.
+ * @return {*} random element from the array.
+ * @example
+ */
+ _main.default.prototype.random = function (min, max) {
+ _main.default._validateParameters('random', arguments);
+ var rand;
+ if (this[randomStateProp] != null) {
+ rand = this._lcg(randomStateProp);
+ } else {
+ rand = Math.random();
+ }
+ if (typeof min === 'undefined') {
+ return rand;
+ } else if (typeof max === 'undefined') {
+ if (Array.isArray(min)) {
+ return min[Math.floor(rand * min.length)];
+ } else {
+ return rand * min;
+ }
+ } else {
+ if (min > max) {
+ var tmp = min;
+ min = max;
+ max = tmp;
+ }
+ return rand * (max - min) + min;
+ }
+ };
+ /**
+ * Returns a random number fitting a Gaussian, or normal, distribution.
+ *
+ * Normal distributions look like bell curves when plotted. Values from a
+ * normal distribution cluster around a central value called the mean. The
+ * cluster's standard deviation describes its spread.
+ *
+ * By default, `randomGaussian()` produces different results each time a
+ * sketch runs. The randomSeed() function can be
+ * used to generate the same sequence of numbers each time a sketch runs.
+ *
+ * There's no minimum or maximum value that `randomGaussian()` might return.
+ * Values far from the mean are very unlikely and values near the mean are
+ * very likely.
+ *
+ * The version of `randomGaussian()` with no parameters returns values with a
+ * mean of 0 and standard deviation of 1.
+ *
+ * The version of `randomGaussian()` with one parameter interprets the
+ * argument passed as the mean. The standard deviation is 1.
+ *
+ * The version of `randomGaussian()` with two parameters interprets the first
+ * argument passed as the mean and the second as the standard deviation.
+ *
+ * @method randomGaussian
+ * @param {Number} [mean] mean.
+ * @param {Number} [sd] standard deviation.
+ * @return {Number} random number.
+ * @example
+ *
+ * let x = 50;
+ * let y = 50;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A black dot moves around randomly leaving a trail.');
+ * }
+ *
+ * function draw() {
+ * // Update x and y randomly.
+ * x += random(-1, 1);
+ * y += random(-1, 1);
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.randomGaussian = function (mean) {
+ var sd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+ var y1,
+ x1,
+ x2,
+ w;
+ if (this._gaussian_previous) {
+ y1 = y2;
+ this._gaussian_previous = false;
+ } else {
+ do {
+ x1 = this.random(2) - 1;
+ x2 = this.random(2) - 1;
+ w = x1 * x1 + x2 * x2;
+ } while (w >= 1);
+ w = Math.sqrt( - 2 * Math.log(w) / w);
+ y1 = x1 * w;
+ y2 = x2 * w;
+ this._gaussian_previous = true;
+ }
+ var m = mean || 0;
+ return y1 * sd + m;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303
+ }
+ ],
+ 338: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Math
+ * @submodule Trigonometry
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /*
+ * all DEGREES/RADIANS conversion should be done in the p5 instance
+ * if possible, using the p5._toRadians(), p5._fromRadians() methods.
+ */
+
+ _main.default.prototype._angleMode = constants.RADIANS;
+ /**
+ * Calculates the arc cosine of a number.
+ *
+ * `acos()` is the inverse of cos(). It expects
+ * arguments in the range -1 to 1. By default, `acos()` returns values in the
+ * range 0 to π (about 3.14). If the
+ * angleMode() is `DEGREES`, then values are
+ * returned in the range 0 to 180.
+ *
+ * @method acos
+ * @param {Number} value value whose arc cosine is to be returned.
+ * @return {Number} arc cosine of the given value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');
+ * }
+ *
+ * function draw() {
+ * // Style the circles.
+ * noStroke();
+ * fill(0, 10);
+ *
+ * // Uniform distribution between 0 and 100.
+ * let x = random(100);
+ * let y = 25;
+ * circle(x, y, 5);
+ *
+ * // Gaussian distribution with a mean of 50 and sd of 1.
+ * x = randomGaussian(50);
+ * y = 50;
+ * circle(x, y, 5);
+ *
+ * // Gaussian distribution with a mean of 50 and sd of 10.
+ * x = randomGaussian(50, 10);
+ * y = 75;
+ * circle(x, y, 5);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate cos() and acos() values.
+ * let a = PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(c, 3)}`, 35, 50);
+ * text(`${round(ac, 3)}`, 35, 75);
+ *
+ * describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.acos = function (ratio) {
+ return this._fromRadians(Math.acos(ratio));
+ };
+ /**
+ * Calculates the arc sine of a number.
+ *
+ * `asin()` is the inverse of sin(). It expects input
+ * values in the range of -1 to 1. By default, `asin()` returns values in the
+ * range -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If
+ * the angleMode() is `DEGREES` then values are
+ * returned in the range -90 to 90.
+ *
+ * @method asin
+ * @param {Number} value value whose arc sine is to be returned.
+ * @return {Number} arc sine of the given value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate cos() and acos() values.
+ * let a = PI + QUARTER_PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(c, 3)}`, 35, 50);
+ * text(`${round(ac, 3)}`, 35, 75);
+ *
+ * describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate sin() and asin() values.
+ * let a = PI / 3;
+ * let s = sin(a);
+ * let as = asin(s);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(s, 3)}`, 35, 50);
+ * text(`${round(as, 3)}`, 35, 75);
+ *
+ * describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.asin = function (ratio) {
+ return this._fromRadians(Math.asin(ratio));
+ };
+ /**
+ * Calculates the arc tangent of a number.
+ *
+ * `atan()` is the inverse of tan(). It expects input
+ * values in the range of -Infinity to Infinity. By default, `atan()` returns
+ * values in the range -π ÷ 2 (about -1.57) to π ÷ 2
+ * (about 1.57). If the angleMode() is `DEGREES`
+ * then values are returned in the range -90 to 90.
+ *
+ * @method atan
+ * @param {Number} value value whose arc tangent is to be returned.
+ * @return {Number} arc tangent of the given value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate sin() and asin() values.
+ * let a = PI + PI / 3;
+ * let s = sin(a);
+ * let as = asin(s);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(s, 3)}`, 35, 50);
+ * text(`${round(as, 3)}`, 35, 75);
+ *
+ * describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate tan() and atan() values.
+ * let a = PI / 3;
+ * let t = tan(a);
+ * let at = atan(t);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(t, 3)}`, 35, 50);
+ * text(`${round(at, 3)}`, 35, 75);
+ *
+ * describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.atan = function (ratio) {
+ return this._fromRadians(Math.atan(ratio));
+ };
+ /**
+ * Calculates the angle formed by a point, the origin, and the positive
+ * x-axis.
+ *
+ * `atan2()` is most often used for orienting geometry to the mouse's
+ * position, as in `atan2(mouseY, mouseX)`. The first parameter is the point's
+ * y-coordinate and the second parameter is its x-coordinate.
+ *
+ * By default, `atan2()` returns values in the range
+ * -π (about -3.14) to π (3.14). If the
+ * angleMode() is `DEGREES`, then values are
+ * returned in the range -180 to 180.
+ *
+ * @method atan2
+ * @param {Number} y y-coordinate of the point.
+ * @param {Number} x x-coordinate of the point.
+ * @return {Number} arc tangent of the given point.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate tan() and atan() values.
+ * let a = PI + PI / 3;
+ * let t = tan(a);
+ * let at = atan(t);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(t, 3)}`, 35, 50);
+ * text(`${round(at, 3)}`, 35, 75);
+ *
+ * describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A rectangle at the top-left of the canvas rotates with mouse movements.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the angle between the mouse
+ * // and the origin.
+ * let a = atan2(mouseY, mouseX);
+ *
+ * // Rotate.
+ * rotate(a);
+ *
+ * // Draw the shape.
+ * rect(0, 0, 60, 10);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.atan2 = function (y, x) {
+ return this._fromRadians(Math.atan2(y, x));
+ };
+ /**
+ * Calculates the cosine of an angle.
+ *
+ * `cos()` is useful for many geometric tasks in creative coding. The values
+ * returned oscillate between -1 and 1 as the input angle increases. `cos()`
+ * takes into account the current angleMode().
+ *
+ * @method cos
+ * @param {Number} angle the angle.
+ * @return {Number} cosine of the angle.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A rectangle at the center of the canvas rotates with mouse movements.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Get the mouse's coordinates relative to the origin.
+ * let x = mouseX - 50;
+ * let y = mouseY - 50;
+ *
+ * // Calculate the angle between the mouse and the origin.
+ * let a = atan2(y, x);
+ *
+ * // Rotate.
+ * rotate(a);
+ *
+ * // Draw the shape.
+ * rect(-30, -5, 60, 10);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white ball on a string oscillates left and right.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 0.05) + 50;
+ * let y = 50;
+ *
+ * // Draw the oscillator.
+ * line(50, y, x, y);
+ * circle(x, y, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
+ * function draw() {
+ * // Calculate the coordinates.
+ * let x = frameCount;
+ * let y = 30 * cos(x * 0.1) + 50;
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.cos = function (angle) {
+ return Math.cos(this._toRadians(angle));
+ };
+ /**
+ * Calculates the sine of an angle.
+ *
+ * `sin()` is useful for many geometric tasks in creative coding. The values
+ * returned oscillate between -1 and 1 as the input angle increases. `sin()`
+ * takes into account the current angleMode().
+ *
+ * @method sin
+ * @param {Number} angle the angle.
+ * @return {Number} sine of the angle.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots form an infinity symbol.');
+ * }
+ *
+ * function draw() {
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 0.1) + 50;
+ * let y = 10 * sin(frameCount * 0.2) + 50;
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white ball on a string oscillates up and down.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the coordinates.
+ * let x = 50;
+ * let y = 30 * sin(frameCount * 0.05) + 50;
+ *
+ * // Draw the oscillator.
+ * line(50, y, x, y);
+ * circle(x, y, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
+ * function draw() {
+ * // Calculate the coordinates.
+ * let x = frameCount;
+ * let y = 30 * sin(x * 0.1) + 50;
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.sin = function (angle) {
+ return Math.sin(this._toRadians(angle));
+ };
+ /**
+ * Calculates the tangent of an angle.
+ *
+ * `tan()` is useful for many geometric tasks in creative coding. The values
+ * returned range from -Infinity to Infinity and repeat periodically as the
+ * input angle increases. `tan()` takes into account the current
+ * angleMode().
+ *
+ * @method tan
+ * @param {Number} angle the angle.
+ * @return {Number} tangent of the angle.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots form an infinity symbol.');
+ * }
+ *
+ * function draw() {
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 0.1) + 50;
+ * let y = 10 * sin(frameCount * 0.2) + 50;
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.tan = function (angle) {
+ return Math.tan(this._toRadians(angle));
+ };
+ /**
+ * Converts an angle measured in radians to its value in degrees.
+ *
+ * Degrees and radians are both units for measuring angles. There are 360˚ in
+ * one full rotation. A full rotation is 2 × π (about 6.28) radians.
+ *
+ * The same angle can be expressed in with either unit. For example, 90° is a
+ * quarter of a full rotation. The same angle is 2 × π ÷ 4
+ * (about 1.57) radians.
+ *
+ * @method degrees
+ * @param {Number} radians radians value to convert to degrees.
+ * @return {Number} converted angle.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
+ * }
+ *
+ * function draw() {
+ * // Calculate the coordinates.
+ * let x = frameCount;
+ * let y = 5 * tan(x * 0.1) + 50;
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.degrees = function (angle) {
+ return angle * constants.RAD_TO_DEG;
+ };
+ /**
+ * Converts an angle measured in degrees to its value in radians.
+ *
+ * Degrees and radians are both units for measuring angles. There are 360˚ in
+ * one full rotation. A full rotation is 2 × π (about 6.28) radians.
+ *
+ * The same angle can be expressed in with either unit. For example, 90° is a
+ * quarter of a full rotation. The same angle is 2 × π ÷ 4
+ * (about 1.57) radians.
+ *
+ * @method radians
+ * @param {Number} degrees degree value to convert to radians.
+ * @return {Number} converted angle.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate the angle conversion.
+ * let rad = QUARTER_PI;
+ * let deg = degrees(rad);
+ *
+ * // Display the conversion.
+ * text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
+ *
+ * describe('The text "0.79 rad = 45˚".');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.radians = function (angle) {
+ return angle * constants.DEG_TO_RAD;
+ };
+ /**
+ * Changes the unit system used to measure angles.
+ *
+ * Degrees and radians are both units for measuring angles. There are 360˚ in
+ * one full rotation. A full rotation is 2 × π (about 6.28) radians.
+ *
+ * Functions such as rotate() and
+ * sin() expect angles measured radians by default.
+ * Calling `angleMode(DEGREES)` switches to degrees. Calling
+ * `angleMode(RADIANS)` switches back to radians.
+ *
+ * Calling `angleMode()` with no arguments returns current angle mode, which
+ * is either `RADIANS` or `DEGREES`.
+ *
+ * @method angleMode
+ * @param {Constant} mode either RADIANS or DEGREES.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Caclulate the angle conversion.
+ * let deg = 45;
+ * let rad = radians(deg);
+ *
+ * // Display the angle conversion.
+ * text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
+ *
+ * describe('The text "45˚ = 0.785 rad".');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Rotate 1/8 turn.
+ * rotate(QUARTER_PI);
+ *
+ * // Draw a line.
+ * line(0, 0, 80, 0);
+ *
+ * describe('A diagonal line radiating from the top-left corner of a square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Rotate 1/8 turn.
+ * rotate(45);
+ *
+ * // Draw a line.
+ * line(0, 0, 80, 0);
+ *
+ * describe('A diagonal line radiating from the top-left corner of a square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Calculate the angle to rotate.
+ * let angle = TWO_PI / 7;
+ *
+ * // Move the origin to the center.
+ * translate(50, 50);
+ *
+ * // Style the flower.
+ * noStroke();
+ * fill(255, 50);
+ *
+ * // Draw the flower.
+ * for (let i = 0; i < 7; i += 1) {
+ * ellipse(0, 0, 80, 20);
+ * rotate(angle);
+ * }
+ *
+ * describe('A translucent white flower on a dark background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Calculate the angle to rotate.
+ * let angle = 360 / 7;
+ *
+ * // Move the origin to the center.
+ * translate(50, 50);
+ *
+ * // Style the flower.
+ * noStroke();
+ * fill(255, 50);
+ *
+ * // Draw the flower.
+ * for (let i = 0; i < 7; i += 1) {
+ * ellipse(0, 0, 80, 20);
+ * rotate(angle);
+ * }
+ *
+ * describe('A translucent white flower on a dark background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white ball on a string oscillates left and right.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 0.05) + 50;
+ * let y = 50;
+ *
+ * // Draw the oscillator.
+ * line(50, y, x, y);
+ * circle(x, y, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * describe('A white ball on a string oscillates left and right.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 2.86) + 50;
+ * let y = 50;
+ *
+ * // Draw the oscillator.
+ * line(50, y, x, y);
+ * circle(x, y, 20);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method angleMode
+ * @return {Constant} mode either RADIANS or DEGREES
+ */
+ _main.default.prototype.angleMode = function (mode) {
+ _main.default._validateParameters('angleMode', arguments);
+ if (typeof mode === 'undefined') {
+ return this._angleMode;
+ } else if (mode === constants.DEGREES || mode === constants.RADIANS) {
+ var prevMode = this._angleMode;
+ // No change
+ if (mode === prevMode) return;
+ // Otherwise adjust pRotation according to new mode
+ // This is necessary for acceleration events to work properly
+ if (mode === constants.RADIANS) {
+ // Change pRotation to radians
+ this._setProperty('pRotationX', this.pRotationX * constants.DEG_TO_RAD);
+ this._setProperty('pRotationY', this.pRotationY * constants.DEG_TO_RAD);
+ this._setProperty('pRotationZ', this.pRotationZ * constants.DEG_TO_RAD);
+ } else {
+ // Change pRotation to degrees
+ this._setProperty('pRotationX', this.pRotationX * constants.RAD_TO_DEG);
+ this._setProperty('pRotationY', this.pRotationY * constants.RAD_TO_DEG);
+ this._setProperty('pRotationZ', this.pRotationZ * constants.RAD_TO_DEG);
+ }
+ this._angleMode = mode;
+ }
+ };
+ /**
+ * converts angles from the current angleMode to RADIANS
+ *
+ * @method _toRadians
+ * @private
+ * @param {Number} angle
+ * @returns {Number}
+ */
+ _main.default.prototype._toRadians = function (angle) {
+ if (this._angleMode === constants.DEGREES) {
+ return angle * constants.DEG_TO_RAD;
+ }
+ return angle;
+ };
+ /**
+ * converts angles from the current angleMode to DEGREES
+ *
+ * @method _toDegrees
+ * @private
+ * @param {Number} angle
+ * @returns {Number}
+ */
+ _main.default.prototype._toDegrees = function (angle) {
+ if (this._angleMode === constants.RADIANS) {
+ return angle * constants.RAD_TO_DEG;
+ }
+ return angle;
+ };
+ /**
+ * converts angles from RADIANS into the current angleMode
+ *
+ * @method _fromRadians
+ * @private
+ * @param {Number} angle
+ * @returns {Number}
+ */
+ _main.default.prototype._fromRadians = function (angle) {
+ if (this._angleMode === constants.DEGREES) {
+ return angle * constants.RAD_TO_DEG;
+ }
+ return angle;
+ };
+ /**
+ * converts angles from DEGREES into the current angleMode
+ *
+ * @method _fromDegrees
+ * @private
+ * @param {Number} angle
+ * @returns {Number}
+ */
+ _main.default.prototype._fromDegrees = function (angle) {
+ if (this._angleMode === constants.RADIANS) {
+ return angle * constants.DEG_TO_RAD;
+ }
+ return angle;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 339: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Typography
+ * @submodule Attributes
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * Sets the way text is aligned when text() is called.
+ *
+ * By default, calling `text('hi', 10, 20)` places the bottom-left corner of
+ * the text's bounding box at (10, 20).
+ *
+ * The first parameter, `horizAlign`, changes the way
+ * text() interprets x-coordinates. By default, the
+ * x-coordinate sets the left edge of the bounding box. `textAlign()` accepts
+ * the following values for `horizAlign`: `LEFT`, `CENTER`, or `RIGHT`.
+ *
+ * The second parameter, `vertAlign`, is optional. It changes the way
+ * text() interprets y-coordinates. By default, the
+ * y-coordinate sets the bottom edge of the bounding box. `textAlign()`
+ * accepts the following values for `vertAlign`: `TOP`, `BOTTOM`, `CENTER`,
+ * or `BASELINE`.
+ *
+ * @method textAlign
+ * @param {Constant} horizAlign horizontal alignment, either LEFT,
+ * CENTER, or RIGHT.
+ * @param {Constant} [vertAlign] vertical alignment, either TOP,
+ * BOTTOM, CENTER, or BASELINE.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the upper line.
+ * rotate(PI / 6);
+ * line(0, 0, 80, 0);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Draw the lower line.
+ * rotate(30);
+ * line(0, 0, 80, 0);
+ *
+ * describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a vertical line.
+ * strokeWeight(0.5);
+ * line(50, 0, 50, 100);
+ *
+ * // Top line.
+ * textSize(16);
+ * textAlign(RIGHT);
+ * text('ABCD', 50, 30);
+ *
+ * // Middle line.
+ * textAlign(CENTER);
+ * text('EFGH', 50, 50);
+ *
+ * // Bottom line.
+ * textAlign(LEFT);
+ * text('IJKL', 50, 70);
+ *
+ * describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method textAlign
+ * @return {Object}
+ */
+
+ _main.default.prototype.textAlign = function (horizAlign, vertAlign) {
+ var _this$_renderer;
+ _main.default._validateParameters('textAlign', arguments);
+ return (_this$_renderer = this._renderer).textAlign.apply(_this$_renderer, arguments);
+ };
+ /**
+ * Sets the spacing between lines of text when
+ * text() is called.
+ *
+ * Note: Spacing is measured in pixels.
+ *
+ * Calling `textLeading()` without an argument returns the current spacing.
+ *
+ * @method textLeading
+ * @param {Number} leading spacing between lines of text in units of pixels.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * strokeWeight(0.5);
+ *
+ * // First line.
+ * line(0, 12, width, 12);
+ * textAlign(CENTER, TOP);
+ * text('TOP', 50, 12);
+ *
+ * // Second line.
+ * line(0, 37, width, 37);
+ * textAlign(CENTER, CENTER);
+ * text('CENTER', 50, 37);
+ *
+ * // Third line.
+ * line(0, 62, width, 62);
+ * textAlign(CENTER, BASELINE);
+ * text('BASELINE', 50, 62);
+ *
+ * // Fourth line.
+ * line(0, 97, width, 97);
+ * textAlign(CENTER, BOTTOM);
+ * text('BOTTOM', 50, 97);
+ *
+ * describe('The words "TOP", "CENTER", "BASELINE", and "BOTTOM" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method textLeading
+ * @return {Number}
+ */
+ _main.default.prototype.textLeading = function (theLeading) {
+ var _this$_renderer2;
+ _main.default._validateParameters('textLeading', arguments);
+ return (_this$_renderer2 = this._renderer).textLeading.apply(_this$_renderer2, arguments);
+ };
+ /**
+ * Sets the font size when
+ * text() is called.
+ *
+ * Note: Font size is measured in pixels.
+ *
+ * Calling `textSize()` without an arugment returns the current size.
+ *
+ * @method textSize
+ * @param {Number} size size of the letters in units of pixels.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // "\n" starts a new line of text.
+ * let lines = 'one\ntwo';
+ *
+ * // Left.
+ * text(lines, 10, 25);
+ *
+ * // Right.
+ * textLeading(30);
+ * text(lines, 70, 25);
+ *
+ * describe('The words "one" and "two" written on separate lines twice. The words on the left have less vertical spacing than the words on the right.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method textSize
+ * @return {Number}
+ */
+ _main.default.prototype.textSize = function (theSize) {
+ var _this$_renderer3;
+ _main.default._validateParameters('textSize', arguments);
+ return (_this$_renderer3 = this._renderer).textSize.apply(_this$_renderer3, arguments);
+ };
+ /**
+ * Sets the style for system fonts when
+ * text() is called.
+ *
+ * The parameter, `style`, can be either `NORMAL`, `ITALIC`, `BOLD`, or
+ * `BOLDITALIC`.
+ *
+ * `textStyle()` may be overridden by CSS styling. This function doesn't
+ * affect fonts loaded with loadFont().
+ *
+ * @method textStyle
+ * @param {Constant} style styling for text, either NORMAL,
+ * ITALIC, BOLD or BOLDITALIC.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Top.
+ * textSize(12);
+ * text('Font Size 12', 10, 30);
+ *
+ * // Middle.
+ * textSize(14);
+ * text('Font Size 14', 10, 60);
+ *
+ * // Bottom.
+ * textSize(16);
+ * text('Font Size 16', 10, 90);
+ *
+ * describe('The text "Font Size 12" drawn small, "Font Size 14" drawn medium, and "Font Size 16" drawn large.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method textStyle
+ * @return {String}
+ */
+ _main.default.prototype.textStyle = function (theStyle) {
+ var _this$_renderer4;
+ _main.default._validateParameters('textStyle', arguments);
+ return (_this$_renderer4 = this._renderer).textStyle.apply(_this$_renderer4, arguments);
+ };
+ /**
+ * Calculates the maximum width of a string of text drawn when
+ * text() is called.
+ *
+ * @method textWidth
+ * @param {String} str string of text to measure.
+ * @return {Number} width measured in units of pixels.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textSize(12);
+ * textAlign(CENTER);
+ *
+ * // First row.
+ * textStyle(NORMAL);
+ * text('Normal', 50, 15);
+ *
+ * // Second row.
+ * textStyle(ITALIC);
+ * text('Italic', 50, 40);
+ *
+ * // Third row.
+ * textStyle(BOLD);
+ * text('Bold', 50, 65);
+ *
+ * // Fourth row.
+ * textStyle(BOLDITALIC);
+ * text('Bold Italic', 50, 90);
+ *
+ * describe('The words "Normal" displayed normally, "Italic" in italic, "Bold" in bold, and "Bold Italic" in bold italics.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textSize(28);
+ * strokeWeight(0.5);
+ *
+ * // Calculate the text width.
+ * let s = 'yoyo';
+ * let w = textWidth(s);
+ *
+ * // Display the text.
+ * text(s, 22, 55);
+ *
+ * // Underline the text.
+ * line(22, 55, 22 + w, 55);
+ *
+ * describe('The word "yoyo" underlined.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.textWidth = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ args[0] += '';
+ _main.default._validateParameters('textWidth', args);
+ if (args[0].length === 0) {
+ return 0;
+ } // Only use the line with the longest width, and replace tabs with double-space
+
+ var textLines = args[0].replace(/\t/g, ' ').split(/\r?\n|\r|\n/g);
+ var newArr = [
+ ];
+ // Return the textWidth for every line
+ for (var i = 0; i < textLines.length; i++) {
+ newArr.push(this._renderer.textWidth(textLines[i]));
+ } // Return the largest textWidth
+
+ var largestWidth = Math.max.apply(Math, newArr);
+ return largestWidth;
+ };
+ /**
+ * Calculates the ascent of the current font at its current size.
+ *
+ * The ascent represents the distance, in pixels, of the tallest character
+ * above the baseline.
+ *
+ * @method textAscent
+ * @return {Number} ascent measured in units of pixels.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textSize(28);
+ * strokeWeight(0.5);
+ *
+ * // Calculate the text width.
+ * // "\n" starts a new line.
+ * let s = 'yo\nyo';
+ * let w = textWidth(s);
+ *
+ * // Display the text.
+ * text(s, 22, 55);
+ *
+ * // Underline the text.
+ * line(22, 55, 22 + w, 55);
+ *
+ * describe('The word "yo" written twice, one copy beneath the other. The words are divided by a horizontal line.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.textAscent = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('textAscent', args);
+ return this._renderer.textAscent();
+ };
+ /**
+ * Calculates the descent of the current font at its current size.
+ *
+ * The descent represents the distance, in pixels, of the character with the
+ * longest descender below the baseline.
+ *
+ * @method textDescent
+ * @return {Number} descent measured in units of pixels.
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textFont(font);
+ *
+ * // Different for each font.
+ * let fontScale = 0.8;
+ *
+ * let baseY = 75;
+ * strokeWeight(0.5);
+ *
+ * // Draw small text.
+ * textSize(24);
+ * text('dp', 0, baseY);
+ *
+ * // Draw baseline and ascent.
+ * let a = textAscent() * fontScale;
+ * line(0, baseY, 23, baseY);
+ * line(23, baseY - a, 23, baseY);
+ *
+ * // Draw large text.
+ * textSize(48);
+ * text('dp', 45, baseY);
+ *
+ * // Draw baseline and ascent.
+ * a = textAscent() * fontScale;
+ * line(45, baseY, 91, baseY);
+ * line(91, baseY - a, 91, baseY);
+ *
+ * describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the "d".');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.textDescent = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('textDescent', args);
+ return this._renderer.textDescent();
+ };
+ /**
+ * Helper function to measure ascent and descent.
+ */
+ _main.default.prototype._updateTextMetrics = function () {
+ return this._renderer._updateTextMetrics();
+ };
+ /**
+ * Sets the style for wrapping text when
+ * text() is called.
+ *
+ * The parameter, `style`, can be one of the following values:
+ *
+ * `WORD` starts new lines of text at spaces. If a string of text doesn't
+ * have spaces, it may overflow the text box and the canvas. This is the
+ * default style.
+ *
+ * `CHAR` starts new lines as needed to stay within the text box.
+ *
+ * `textWrap()` only works when the maximum width is set for a text box. For
+ * example, calling `text('Have a wonderful day', 0, 10, 100)` sets the
+ * maximum width to 100 pixels.
+ *
+ * Calling `textWrap()` without an argument returns the current style.
+ *
+ * @method textWrap
+ * @param {Constant} style text wrapping style, either WORD or CHAR.
+ * @return {String} style
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the font.
+ * textFont(font);
+ *
+ * // Different for each font.
+ * let fontScale = 0.9;
+ *
+ * let baseY = 75;
+ * strokeWeight(0.5);
+ *
+ * // Draw small text.
+ * textSize(24);
+ * text('dp', 0, baseY);
+ *
+ * // Draw baseline and descent.
+ * let d = textDescent() * fontScale;
+ * line(0, baseY, 23, baseY);
+ * line(23, baseY, 23, baseY + d);
+ *
+ * // Draw large text.
+ * textSize(48);
+ * text('dp', 45, baseY);
+ *
+ * // Draw baseline and descent.
+ * d = textDescent() * fontScale;
+ * line(45, baseY, 91, baseY);
+ * line(91, baseY, 91, baseY + d);
+ *
+ * describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the "p".');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textSize(20);
+ * textWrap(WORD);
+ *
+ * // Display the text.
+ * text('Have a wonderful day', 0, 10, 100);
+ *
+ * describe('The text "Have a wonderful day" written across three lines.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textSize(20);
+ * textWrap(CHAR);
+ *
+ * // Display the text.
+ * text('Have a wonderful day', 0, 10, 100);
+ *
+ * describe('The text "Have a wonderful day" written across two lines.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.textWrap = function (wrapStyle) {
+ _main.default._validateParameters('textWrap', [
+ wrapStyle
+ ]);
+ return this._renderer.textWrap(wrapStyle);
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.string.split': 221
+ }
+ ],
+ 340: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.last-index-of');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.last-index-of');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.split');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var opentype = _interopRequireWildcard(_dereq_('opentype.js'));
+ _dereq_('../core/friendly_errors/validate_params');
+ _dereq_('../core/friendly_errors/file_errors');
+ _dereq_('../core/friendly_errors/fes_core');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Typography
+ * @submodule Loading & Displaying
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Loads a font and creates a p5.Font object.
+ * `loadFont()` can load fonts in either .otf or .ttf format. Loaded fonts can
+ * be used to style text on the canvas and in HTML elements.
+ *
+ * The first parameter, `path`, is the path to a font file.
+ * Paths to local files should be relative. For example,
+ * `'assets/inconsolata.otf'`. The Inconsolata font used in the following
+ * examples can be downloaded for free
+ * here.
+ * Paths to remote files should be URLs. For example,
+ * `'https://example.com/inconsolata.otf'`. URLs may be blocked due to browser
+ * security.
+ *
+ * The second parameter, `successCallback`, is optional. If a function is
+ * passed, it will be called once the font has loaded. The callback function
+ * may use the new p5.Font object if needed.
+ *
+ * The third parameter, `failureCallback`, is also optional. If a function is
+ * passed, it will be called if the font fails to load. The callback function
+ * may use the error
+ * Event
+ * object if needed.
+ *
+ * Fonts can take time to load. Calling `loadFont()` in
+ * preload() ensures fonts load before they're
+ * used in setup() or
+ * draw().
+ *
+ * @method loadFont
+ * @param {String} path path of the font to be loaded.
+ * @param {Function} [successCallback] function called with the
+ * p5.Font object after it
+ * loads.
+ * @param {Function} [failureCallback] function called with the error
+ * Event
+ * object if the font fails to load.
+ * @return {p5.Font} p5.Font object.
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textSize(20);
+ * textWrap(CHAR);
+ *
+ * // Display the text.
+ * text('祝你有美好的一天', 0, 10, 100);
+ *
+ * describe('The text "祝你有美好的一天" written across two lines.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * fill('deeppink');
+ * textFont(font);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * loadFont('assets/inconsolata.otf', font => {
+ * fill('deeppink');
+ * textFont(font);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * });
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * loadFont('assets/inconsolata.otf', success, failure);
+ * }
+ *
+ * function success(font) {
+ * fill('deeppink');
+ * textFont(font);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * }
+ *
+ * function failure(event) {
+ * console.error('Oops!', event);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.loadFont = function (path, onSuccess, onError) {
+ _main.default._validateParameters('loadFont', arguments);
+ var p5Font = new _main.default.Font(this);
+ var self = this;
+ opentype.load(path, function (err, font) {
+ if (err) {
+ _main.default._friendlyFileLoadError(4, path);
+ if (typeof onError !== 'undefined') {
+ return onError(err);
+ }
+ console.error(err, path);
+ return;
+ }
+ p5Font.font = font;
+ if (typeof onSuccess !== 'undefined') {
+ onSuccess(p5Font);
+ }
+ self._decrementPreload();
+ // check that we have an acceptable font type
+ var validFontTypes = [
+ 'ttf',
+ 'otf',
+ 'woff',
+ 'woff2'
+ ];
+ var fileNoPath = path.split('\\').pop().split('/').pop();
+ var lastDotIdx = fileNoPath.lastIndexOf('.');
+ var fontFamily;
+ var newStyle;
+ var 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.slice(0, lastDotIdx !== - 1 ? lastDotIdx : 0);
+ newStyle = document.createElement('style');
+ newStyle.appendChild(document.createTextNode('\n@font-face {\nfont-family: '.concat(fontFamily, ';\nsrc: url(').concat(path, ');\n}\n')));
+ document.head.appendChild(newStyle);
+ }
+ });
+ return p5Font;
+ };
+ /**
+ * Draws text to the canvas.
+ *
+ * The first parameter, `str`, is the text to be drawn. The second and third
+ * parameters, `x` and `y`, set the coordinates of the text's bottom-left
+ * corner. See textAlign() for other ways to
+ * align text.
+ *
+ * The fourth and fifth parameters, `maxWidth` and `maxHeight`, are optional.
+ * They set the dimensions of the invisible rectangle containing the text. By
+ * default, they set its maximum width and height. See
+ * rectMode() for other ways to define the
+ * rectangular text box. Text will wrap to fit within the text box. Text
+ * outside of the box won't be drawn.
+ *
+ * Text can be styled a few ways. Call the fill()
+ * function to set the text's fill color. Call
+ * stroke() and
+ * strokeWeight() to set the text's outline.
+ * Call textSize() and
+ * textFont() to set the text's size and font,
+ * respectively.
+ *
+ * Note: `WEBGL` mode only supports fonts loaded with
+ * loadFont(). Calling
+ * stroke() has no effect in `WEBGL` mode.
+ *
+ * @method text
+ * @param {String|Object|Array|Number|Boolean} str text to be displayed.
+ * @param {Number} x x-coordinate of the text box.
+ * @param {Number} y y-coordinate of the text box.
+ * @param {Number} [maxWidth] maximum width of the text box. See
+ * rectMode() for
+ * other options.
+ * @param {Number} [maxHeight] maximum height of the text box. See
+ * rectMode() for
+ * other options.
+ *
+ * @chainable
+ * @example
+ *
+ * function preload() {
+ * loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * let p = createP('p5*js');
+ * p.style('color', 'deeppink');
+ * p.style('font-family', 'Inconsolata');
+ * p.style('font-size', '36px');
+ * p.position(10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * text('hi', 50, 50);
+ *
+ * describe('The text "hi" written in black in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background('skyblue');
+ * textSize(100);
+ * text('🌈', 0, 100);
+ *
+ * describe('A rainbow in a blue sky.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * textSize(32);
+ * fill(255);
+ * stroke(0);
+ * strokeWeight(4);
+ * text('hi', 50, 50);
+ *
+ * describe('The text "hi" written in white with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background('black');
+ * textSize(22);
+ * fill('yellow');
+ * text('rainbows', 6, 20);
+ * fill('cornflowerblue');
+ * text('rainbows', 6, 45);
+ * fill('tomato');
+ * text('rainbows', 6, 70);
+ * fill('limegreen');
+ * text('rainbows', 6, 95);
+ *
+ * describe('The text "rainbows" written on several lines, each in a different color.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * let s = 'The quick brown fox jumps over the lazy dog.';
+ * text(s, 10, 10, 70, 80);
+ *
+ * describe('The sample text "The quick brown fox..." written in black across several lines.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * rectMode(CENTER);
+ * let s = 'The quick brown fox jumps over the lazy dog.';
+ * text(s, 50, 50, 70, 80);
+ *
+ * describe('The sample text "The quick brown fox..." written in black across several lines.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.text = function (str, x, y, maxWidth, maxHeight) {
+ var _this$_renderer;
+ _main.default._validateParameters('text', arguments);
+ return !(this._renderer._doFill || this._renderer._doStroke) ? this : (_this$_renderer = this._renderer).text.apply(_this$_renderer, arguments);
+ };
+ /**
+ * Sets the font used by the text() function.
+ *
+ * The first parameter, `font`, sets the font. `textFont()` recognizes either
+ * a p5.Font object or a string with the name of a
+ * system font. For example, `'Courier New'`.
+ *
+ * The second parameter, `size`, is optional. It sets the font size in pixels.
+ * This has the same effect as calling textSize().
+ *
+ * Note: `WEBGL` mode only supports fonts loaded with
+ * loadFont().
+ *
+ * @method textFont
+ * @return {Object} current font or p5 Object.
+ *
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * textFont(font);
+ * textSize(32);
+ * textAlign(CENTER, CENTER);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * rotateY(frameCount / 30);
+ * text('p5*js', 0, 0);
+ *
+ * describe('The text "p5*js" written in white and spinning in 3D.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * textFont('Courier New');
+ * textSize(24);
+ * text('hi', 35, 55);
+ *
+ * describe('The text "hi" written in a black, monospace font on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background('black');
+ * fill('palegreen');
+ * textFont('Courier New', 10);
+ * text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);
+ * text('>', 5, 70);
+ *
+ * describe('A text prompt from a game is written in a green, monospace font on a black background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * textFont('Verdana');
+ * let currentFont = textFont();
+ * text(currentFont, 25, 50);
+ *
+ * describe('The text "Verdana" written in a black, sans-serif font on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method textFont
+ * @param {Object|String} font font as a p5.Font object or a string.
+ * @param {Number} [size] font size in pixels.
+ * @chainable
+ */
+ _main.default.prototype.textFont = function (theFont, theSize) {
+ _main.default._validateParameters('textFont', arguments);
+ if (arguments.length) {
+ if (!theFont) {
+ throw new Error('null font passed to textFont');
+ }
+ this._renderer._setProperty('_textFont', theFont);
+ if (theSize) {
+ this._renderer._setProperty('_textSize', theSize);
+ if (!this._renderer._leadingSet) {
+ // only use a default value if not previously set (#5181)
+ this._renderer._setProperty('_textLeading', theSize * constants._DEFAULT_LEADMULT);
+ }
+ }
+ return this._renderer._applyTextProperties();
+ }
+ return this._renderer._textFont;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/friendly_errors/fes_core': 294,
+ '../core/friendly_errors/file_errors': 295,
+ '../core/friendly_errors/validate_params': 298,
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.last-index-of': 184,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261,
+ 'opentype.js': 276
+ }
+ ],
+ 341: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * This module defines the p5.Font class and functions for
+ * drawing text to the display canvas.
+ * @module Typography
+ * @submodule Loading & Displaying
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * A class to describe fonts.
+ *
+ * @class p5.Font
+ * @constructor
+ * @param {p5} [pInst] pointer to p5 instance.
+ * @example
+ *
+ * let fontRegular;
+ * let fontItalic;
+ * let fontBold;
+ *
+ * function preload() {
+ * fontRegular = loadFont('assets/Regular.otf');
+ * fontItalic = loadFont('assets/Italic.ttf');
+ * fontBold = loadFont('assets/Bold.ttf');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ * textFont(fontRegular);
+ * text('I am Normal', 10, 30);
+ * textFont(fontItalic);
+ * text('I am Italic', 10, 50);
+ * textFont(fontBold);
+ * text('I am Bold', 10, 70);
+ *
+ * describe('The statements "I am Normal", "I am Italic", and "I am Bold" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.Font = /*#__PURE__*/ function () {
+ function _class(p) {
+ _classCallCheck(this, _class);
+ this.parent = p;
+ this.cache = {
+ };
+ /**
+ * The font's underlying
+ * opentype.js
+ * font object.
+ *
+ * @property font
+ * @name font
+ */
+ this.font = undefined;
+ } /**
+ * Returns the bounding box for a string of text written using the font.
+ *
+ * The bounding box is the smallest rectangle that can contain a string of
+ * text. `font.textBounds()` returns an object with the bounding box's
+ * location and size. For example, calling `font.textBounds('p5*js', 5, 20)`
+ * returns an object in the format
+ * `{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }`. The `x` and `y` properties are
+ * always the coordinates of the bounding box's top-left corner.
+ *
+ * The first parameter, `str`, is a string of text. The second and third
+ * parameters, `x` and `y`, are the text's position. By default, they set the
+ * coordinates of the bounding box's bottom-left corner. See
+ * textAlign() for more ways to align text.
+ *
+ * The fourth parameter, `fontSize`, is optional. It sets the font size used to
+ * determine the bounding box. By default, `font.textBounds()` will use the
+ * current textSize().
+ *
+ * @method textBounds
+ * @param {String} str string of text.
+ * @param {Number} x x-coordinate of the text.
+ * @param {Number} y y-coordinate of the text.
+ * @param {Number} [fontSize] font size. Defaults to the current
+ * textSize().
+ * @return {Object} object describing the bounding box with
+ * properties x, y, w, and h.
+ *
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * // Creates a p5.Font object.
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Style the text.
+ * fill('deeppink');
+ * textFont(font);
+ * textSize(36);
+ *
+ * // Display the text.
+ * text('p5*js', 10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Display the bounding box.
+ * let bbox = font.textBounds('p5*js', 35, 53);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ *
+ * // Style the text.
+ * textFont(font);
+ *
+ * // Display the text.
+ * text('p5*js', 35, 53);
+ *
+ * describe('The text "p5*js" written in black inside a white rectangle.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textFont(font);
+ * textSize(15);
+ * textAlign(CENTER, CENTER);
+ *
+ * // Display the bounding box.
+ * let bbox = font.textBounds('p5*js', 50, 50);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ *
+ * // Display the text.
+ * text('p5*js', 50, 50);
+ *
+ * describe('The text "p5*js" written in black inside a white rectangle.');
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'textBounds',
+ value: function textBounds(str) {
+ var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+ var y = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+ var fontSize = arguments.length > 3 ? arguments[3] : undefined;
+ var opts = arguments.length > 4 ? arguments[4] : undefined;
+ // Check cache for existing bounds. Take into consideration the text alignment
+ // settings. Default alignment should match opentype's origin: left-aligned &
+ // alphabetic baseline.
+ var p = opts && opts.renderer && opts.renderer._pInst || this.parent;
+ var ctx = p._renderer.drawingContext;
+ var alignment = ctx.textAlign || constants.LEFT;
+ var baseline = ctx.textBaseline || constants.BASELINE;
+ var cacheResults = false;
+ var result;
+ var key;
+ fontSize = fontSize || p._renderer._textSize;
+ // NOTE: cache disabled for now pending further discussion of #3436
+ if (cacheResults) {
+ key = cacheKey('textBounds', str, x, y, fontSize, alignment, baseline);
+ result = this.cache[key];
+ }
+ if (!result) {
+ var minX = [
+ ];
+ var minY;
+ var maxX = [
+ ];
+ var maxY;
+ var pos;
+ var xCoords = [
+ ];
+ xCoords[0] = [
+ ];
+ var yCoords = [
+ ];
+ var scale = this._scale(fontSize);
+ var lineHeight = p._renderer.textLeading();
+ var lineCount = 0;
+ this.font.forEachGlyph(str, x, y, fontSize, opts, function (glyph, gX, gY, gFontSize) {
+ var gm = glyph.getMetrics();
+ if (glyph.index === 0) {
+ lineCount += 1;
+ xCoords[lineCount] = [
+ ];
+ } else {
+ xCoords[lineCount].push(gX + gm.xMin * scale);
+ xCoords[lineCount].push(gX + gm.xMax * scale);
+ yCoords.push(gY + lineCount * lineHeight + - gm.yMin * scale);
+ yCoords.push(gY + lineCount * lineHeight + - gm.yMax * scale);
+ }
+ });
+ if (xCoords[lineCount].length > 0) {
+ minX[lineCount] = Math.min.apply(null, xCoords[lineCount]);
+ maxX[lineCount] = Math.max.apply(null, xCoords[lineCount]);
+ }
+ var finalMaxX = 0;
+ for (var i = 0; i <= lineCount; i++) {
+ minX[i] = Math.min.apply(null, xCoords[i]);
+ maxX[i] = Math.max.apply(null, xCoords[i]);
+ var lineLength = maxX[i] - minX[i];
+ if (lineLength > finalMaxX) {
+ finalMaxX = lineLength;
+ }
+ }
+ var finalMinX = Math.min.apply(null, minX);
+ minY = Math.min.apply(null, yCoords);
+ maxY = Math.max.apply(null, yCoords);
+ result = {
+ x: finalMinX,
+ y: minY,
+ h: maxY - minY,
+ w: finalMaxX,
+ advance: finalMinX - x
+ };
+ // Bounds are now calculated, so shift the x & y to match alignment settings
+ pos = this._handleAlignment(p._renderer, str, result.x, result.y, result.w + result.advance);
+ result.x = pos.x;
+ result.y = pos.y;
+ if (cacheResults) {
+ this.cache[key] = result;
+ }
+ }
+ return result;
+ } /**
+ * Returns an array of points outlining a string of text written using the
+ * font.
+ *
+ * Each point object in the array has three properties that describe the
+ * point's location and orientation, called its path angle. For example,
+ * `{ x: 10, y: 20, alpha: 450 }`.
+ *
+ * The first parameter, `str`, is a string of text. The second and third
+ * parameters, `x` and `y`, are the text's position. By default, they set the
+ * coordinates of the bounding box's bottom-left corner. See
+ * textAlign() for more ways to align text.
+ *
+ * The fourth parameter, `fontSize`, is optional. It sets the text's font
+ * size. By default, `font.textToPoints()` will use the current
+ * textSize().
+ *
+ * The fifth parameter, `options`, is also optional. `font.textToPoints()`
+ * expects an object with the following properties:
+ *
+ * `sampleFactor` is the ratio of the text's path length to the number of
+ * samples. It defaults to 0.1. Higher values produce more points along the
+ * path and are more precise.
+ *
+ * `simplifyThreshold` removes collinear points if it's set to a number other
+ * than 0. The value represents the threshold angle to use when determining
+ * whether two edges are collinear.
+ *
+ * @method textToPoints
+ * @param {String} str string of text.
+ * @param {Number} x x-coordinate of the text.
+ * @param {Number} y y-coordinate of the text.
+ * @param {Number} [fontSize] font size. Defaults to the current
+ * textSize().
+ * @param {Object} [options] object with sampleFactor and simplifyThreshold
+ * properties.
+ * @return {Array} array of point objects, each with x, y, and alpha (path angle) properties.
+ *
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Display the bounding box.
+ * let bbox = font.textBounds('p5*js', 31, 53, 15);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ *
+ * // Style the text.
+ * textFont(font);
+ * textSize(15);
+ *
+ * // Display the text.
+ * text('p5*js', 31, 53);
+ *
+ * describe('The text "p5*js" written in black inside a white rectangle.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'textToPoints',
+ value: function textToPoints(txt, x, y, fontSize, options) {
+ var xOriginal = x;
+ var result = [
+ ];
+ var lines = txt.split(/\r?\n|\r|\n/g);
+ fontSize = fontSize || this.parent._renderer._textSize;
+ function isSpace(i, text, glyphsLine) {
+ return glyphsLine[i].name && glyphsLine[i].name === 'space' || text.length === glyphsLine.length && text[i] === ' ' //||
+ //(glyphs[i].index && glyphs[i].index === 3)
+ ;
+ }
+ for (var i = 0; i < lines.length; i++) {
+ var xoff = 0;
+ x = xOriginal;
+ var line = lines[i];
+ line = line.replace('\t', ' ');
+ var glyphs = this._getGlyphs(line);
+ for (var j = 0; j < glyphs.length; j++) {
+ if (!isSpace(j, line, glyphs)) {
+ // fix to #1817, #2069
+ var gpath = glyphs[j].getPath(x, y, fontSize),
+ paths = splitPaths(gpath.commands);
+ for (var k = 0; k < paths.length; k++) {
+ var pts = pathToPoints(paths[k], options);
+ for (var l = 0; l < pts.length; l++) {
+ pts[l].x += xoff;
+ result.push(pts[l]);
+ }
+ }
+ }
+ xoff += glyphs[j].advanceWidth * this._scale(fontSize);
+ }
+ y = y + this.parent._renderer._textLeading;
+ }
+ return result;
+ } // ----------------------------- End API ------------------------------
+ /**
+ * Returns the set of opentype glyphs for the supplied string.
+ *
+ * Note that there is not a strict one-to-one mapping between characters
+ * and glyphs, so the list of returned glyphs can be larger or smaller
+ * than the length of the given string.
+ *
+ * @private
+ * @param {String} str the string to be converted
+ * @return {Array} the opentype glyphs
+ */
+
+ },
+ {
+ key: '_getGlyphs',
+ value: function _getGlyphs(str) {
+ return this.font.stringToGlyphs(str);
+ } /**
+ * Returns an opentype path for the supplied string and position.
+ *
+ * @private
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional)
+ * @return {Object} the opentype path
+ */
+
+ },
+ {
+ key: '_getPath',
+ value: function _getPath(line, x, y, options) {
+ var p = options && options.renderer && options.renderer._pInst || this.parent,
+ renderer = p._renderer,
+ pos = this._handleAlignment(renderer, line, x, y);
+ return this.font.getPath(line, pos.x, pos.y, renderer._textSize, options);
+ } /*
+ * Creates an SVG-formatted path-data string
+ * (See http://www.w3.org/TR/SVG/paths.html#PathData)
+ * from the given opentype path or string/position
+ *
+ * @param {Object} path an opentype path, OR the following:
+ *
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional), set options.decimals
+ * to set the decimal precision of the path-data
+ *
+ * @return {Object} this p5.Font object
+ */
+
+ },
+ {
+ key: '_getPathData',
+ value: function _getPathData(line, x, y, options) {
+ var decimals = 3;
+ // create path from string/position
+ if (typeof line === 'string' && arguments.length > 2) {
+ line = this._getPath(line, x, y, options);
+ } else if (_typeof(x) === 'object') {
+ // handle options specified in 2nd arg
+ options = x;
+ } // handle svg arguments
+
+ if (options && typeof options.decimals === 'number') {
+ decimals = options.decimals;
+ }
+ return line.toPathData(decimals);
+ } /*
+ * Creates an SVG
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the point array.
+ * let points = font.textToPoints('p5*js', 6, 60, 35, { sampleFactor: 0.5 });
+ *
+ * // Draw a dot at each point.
+ * for (let p of points) {
+ * point(p.x, p.y);
+ * }
+ *
+ * describe('A set of black dots outlining the text "p5*js" on a gray background.');
+ * }
+ *
+ *
+ * function setup() {
+ * let myArray = ['Mango', 'Apple', 'Papaya'];
+ * print(myArray); // ['Mango', 'Apple', 'Papaya']
+ *
+ * append(myArray, 'Peach');
+ * print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+ * }
+ *
+ * let src = ['A', 'B', 'C'];
+ * let dst = [1, 2, 3];
+ * let srcPosition = 1;
+ * let dstPosition = 0;
+ * let length = 2;
+ *
+ * print(src); // ['A', 'B', 'C']
+ * print(dst); // [ 1 , 2 , 3 ]
+ *
+ * arrayCopy(src, srcPosition, dst, dstPosition, length);
+ * print(dst); // ['B', 'C', 3]
+ *
+ * function setup() {
+ * let arr1 = ['A', 'B', 'C'];
+ * let arr2 = [1, 2, 3];
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1,2,3]
+ *
+ * let arr3 = concat(arr1, arr2);
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1, 2, 3]
+ * print(arr3); // ['A','B','C', 1, 2, 3]
+ * }
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A','B','C']
+ *
+ * reverse(myArray);
+ * print(myArray); // ['C','B','A']
+ * }
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A', 'B', 'C']
+ * let newArray = shorten(myArray);
+ * print(myArray); // ['A','B','C']
+ * print(newArray); // ['A','B']
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of colors.
+ * let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+ *
+ * // Create a shuffled copy of the array.
+ * let shuffledColors = shuffle(colors);
+ *
+ * // Draw a row of circles using the original array.
+ * for (let i = 0; i < colors.length; i += 1) {
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 12.5;
+ *
+ * // Style the circle.
+ * let c = colors[i];
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(x, 33, 10);
+ * }
+ *
+ * // Draw a row of circles using the original array.
+ * for (let i = 0; i < shuffledColors.length; i += 1) {
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 12.5;
+ *
+ * // Style the circle.
+ * let c = shuffledColors[i];
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(x, 67, 10);
+ * }
+ *
+ * describe(
+ * 'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.shuffle = function (arr, bool) {
+ var isView = ArrayBuffer && ArrayBuffer.isView && ArrayBuffer.isView(arr);
+ arr = bool || isView ? arr : arr.slice();
+ var rnd,
+ tmp,
+ idx = arr.length;
+ while (idx > 1) {
+ rnd = this.random(0, 1) * idx | 0;
+ tmp = arr[--idx];
+ arr[idx] = arr[rnd];
+ arr[rnd] = tmp;
+ }
+ return arr;
+ };
+ /**
+ * Sorts an array of numbers from smallest to largest, or puts an array of
+ * words in alphabetical order. The original array is not modified; a
+ * re-ordered array is returned. The count parameter states the number of
+ * elements to sort. For example, if there are 12 elements in an array and
+ * count is set to 5, only the first 5 elements in the array will be sorted.
+ *
+ * @method sort
+ * @deprecated Use array.sort() instead.
+ * @param {Array} list Array to sort
+ * @param {Integer} [count] number of elements to sort, starting from 0
+ * @return {Array} the sorted list
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of colors.
+ * let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+ *
+ * // Shuffle the array.
+ * shuffle(colors, true);
+ *
+ * // Draw a row of circles using the original array.
+ * for (let i = 0; i < colors.length; i += 1) {
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 12.5;
+ *
+ * // Style the circle.
+ * let c = colors[i];
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(x, 50, 10);
+ * }
+ *
+ * describe(
+ * 'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'
+ * );
+ * }
+ *
+ *
+ * function setup() {
+ * let words = ['banana', 'apple', 'pear', 'lime'];
+ * print(words); // ['banana', 'apple', 'pear', 'lime']
+ * let count = 4; // length of array
+ *
+ * words = sort(words, count);
+ * print(words); // ['apple', 'banana', 'lime', 'pear']
+ * }
+ *
+ * function setup() {
+ * let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+ * print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+ * let count = 5; // Less than the length of the array
+ *
+ * numbers = sort(numbers, count);
+ * print(numbers); // [1,2,5,6,14,9,8,12]
+ * }
+ *
+ * function setup() {
+ * let myArray = [0, 1, 2, 3, 4];
+ * let insArray = ['A', 'B', 'C'];
+ * print(myArray); // [0, 1, 2, 3, 4]
+ * print(insArray); // ['A','B','C']
+ *
+ * splice(myArray, insArray, 3);
+ * print(myArray); // [0,1,2,'A','B','C',3,4]
+ * }
+ *
+ * function setup() {
+ * let myArray = [1, 2, 3, 4, 5];
+ * print(myArray); // [1, 2, 3, 4, 5]
+ *
+ * let sub1 = subset(myArray, 0, 3);
+ * let sub2 = subset(myArray, 2, 2);
+ * print(sub1); // [1,2,3]
+ * print(sub2); // [3,4]
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = '12.3';
+ *
+ * // Convert the string to a number.
+ * let converted = float(original);
+ *
+ * // Double the converted value.
+ * let twice = converted * 2;
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(12);
+ *
+ * // Display the original and converted values.
+ * text(`${original} × 2 = ${twice}`, 50, 50);
+ *
+ * describe('The text "12.3 × 2 = 24.6" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method float
+ * @param {String[]} ns array of strings to convert.
+ * @return {Number[]} converted numbers.
+ */
+
+ _main.default.prototype.float = function (str) {
+ if (str instanceof Array) {
+ return str.map(parseFloat);
+ }
+ return parseFloat(str);
+ };
+ /**
+ * Converts a `Boolean`, `String`, or decimal `Number` to an integer.
+ *
+ * `int()` converts values to integers. Integers are positive or negative
+ * numbers without decimals. If the original value has decimals, as in -34.56,
+ * they're removed to produce an integer such as -34.
+ *
+ * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
+ * `int(false)` or `int(true)`, then the number 0 (`false`) or 1 (`true`) will
+ * be returned. If `n` is a string or number, as in `int('45')` or
+ * `int(67.89)`, then an integer will be returned. If an array is passed, as
+ * in `int([12.34, 56.78])`, then an array of integers will be returned.
+ *
+ * Note: If a value can't be converted to a number, as in `int('giraffe')`,
+ * then the value `NaN` (not a number) will be returned.
+ *
+ * @method int
+ * @param {String|Boolean|Number} n value to convert.
+ * @return {Number} converted number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of strings.
+ * let original = ['60', '30', '15'];
+ *
+ * // Convert the strings to numbers.
+ * let diameters = float(original);
+ *
+ * for (let d of diameters) {
+ * // Draw a circle.
+ * circle(50, 50, d);
+ * }
+ *
+ * describe('Three white, concentric circles on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a Boolean variable.
+ * let original = false;
+ *
+ * // Convert the Boolean to an integer.
+ * let converted = int(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "false : 0" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = '12.34';
+ *
+ * // Convert the string to an integer.
+ * let converted = int(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Display the original and converted values.
+ * text(`${original} ≈ ${converted}`, 50, 50);
+ *
+ * describe('The text "12.34 ≈ 12" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a decimal number variable.
+ * let original = 12.34;
+ *
+ * // Convert the decimal number to an integer.
+ * let converted = int(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Display the original and converted values.
+ * text(`${original} ≈ ${converted}`, 50, 50);
+ *
+ * describe('The text "12.34 ≈ 12" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method int
+ * @param {Array} ns values to convert.
+ * @return {Number[]} converted numbers.
+ */
+ _main.default.prototype.int = function (n) {
+ var radix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+ if (n === Infinity || n === 'Infinity') {
+ return Infinity;
+ } else if (n === - Infinity || n === '-Infinity') {
+ return - Infinity;
+ } else if (typeof n === 'string') {
+ return parseInt(n, radix);
+ } else if (typeof n === 'number') {
+ return n | 0;
+ } else if (typeof n === 'boolean') {
+ return n ? 1 : 0;
+ } else if (n instanceof Array) {
+ return n.map(function (n) {
+ return _main.default.prototype.int(n, radix);
+ });
+ }
+ };
+ /**
+ * Converts a `Boolean` or `Number` to `String`.
+ *
+ * `str()` converts values to strings. See the
+ * String reference page for guidance on using
+ * template literals instead.
+ *
+ * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
+ * `str(false)` or `str(true)`, then the value will be returned as a string,
+ * as in `'false'` or `'true'`. If `n` is a number, as in `str(123)`, then its
+ * value will be returned as a string, as in `'123'`. If an array is passed,
+ * as in `str([12.34, 56.78])`, then an array of strings will be returned.
+ *
+ * @method str
+ * @param {String|Boolean|Number} n value to convert.
+ * @return {String} converted string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of strings.
+ * let original = ['60', '30', '15'];
+ *
+ * // Convert the strings to integers.
+ * let diameters = int(original);
+ *
+ * for (let d of diameters) {
+ * // Draw a circle.
+ * circle(50, 50, d);
+ * }
+ *
+ * describe('Three white, concentric circles on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a Boolean variable.
+ * let original = false;
+ *
+ * // Convert the Boolean to a string.
+ * let converted = str(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "false : false" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 123;
+ *
+ * // Convert the number to a string.
+ * let converted = str(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} = ${converted}`, 50, 50);
+ *
+ * describe('The text "123 = 123" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.str = function (n) {
+ if (n instanceof Array) {
+ return n.map(_main.default.prototype.str);
+ } else {
+ return String(n);
+ }
+ };
+ /**
+ * Converts a `String` or `Number` to a `Boolean`.
+ *
+ * `boolean()` converts values to `true` or `false`.
+ *
+ * The parameter, `n`, is the value to convert. If `n` is a string, then
+ * `boolean('true')` will return `true` and every other string value will
+ * return `false`. If `n` is a number, then `boolean(0)` will return `false`
+ * and every other numeric value will return `true`. If an array is passed, as
+ * `in boolean([0, 1, 'true', 'blue'])`, then an array of Boolean values will
+ * be returned.
+ *
+ * @method boolean
+ * @param {String|Boolean|Number} n value to convert.
+ * @return {Boolean} converted Boolean value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let original = [12, 34, 56];
+ *
+ * // Convert the numbers to strings.
+ * let strings = str(original);
+ *
+ * // Create an empty string variable.
+ * let final = '';
+ *
+ * // Concatenate all the strings.
+ * for (let s of strings) {
+ * final += s;
+ * }
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the concatenated string.
+ * text(final, 50, 50);
+ *
+ * describe('The text "123456" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 0;
+ *
+ * // Convert the number to a Boolean value.
+ * let converted = boolean(original);
+ *
+ * // Style the circle based on the converted value.
+ * if (converted === true) {
+ * fill('blue');
+ * } else {
+ * fill('red');
+ * }
+ *
+ * // Draw the circle.
+ * circle(50, 50, 40);
+ *
+ * describe('A red circle on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = 'true';
+ *
+ * // Convert the string to a Boolean value.
+ * let converted = boolean(original);
+ *
+ * // Style the circle based on the converted value.
+ * if (converted === true) {
+ * fill('blue');
+ * } else {
+ * fill('red');
+ * }
+ *
+ * // Draw the circle.
+ * circle(50, 50, 40);
+ *
+ * describe('A blue circle on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method boolean
+ * @param {Array} ns values to convert.
+ * @return {Boolean[]} converted Boolean values.
+ */
+ _main.default.prototype.boolean = function (n) {
+ if (typeof n === 'number') {
+ return n !== 0;
+ } else if (typeof n === 'string') {
+ return n.toLowerCase() === 'true';
+ } else if (typeof n === 'boolean') {
+ return n;
+ } else if (n instanceof Array) {
+ return n.map(_main.default.prototype.boolean);
+ }
+ };
+ /**
+ * Converts a `Boolean`, `String`, or `Number` to its byte value.
+ *
+ * `byte()` converts a value to an integer (whole number) between -128 and
+ * 127. Values greater than 127 wrap around while negative values are
+ * unchanged. For example, 128 becomes -128 and -129 remains the same.
+ *
+ * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
+ * `byte(false)` or `byte(true)`, the number 0 (`false`) or 1 (`true`) will be
+ * returned. If `n` is a string or number, as in `byte('256')` or `byte(256)`,
+ * then the byte value will be returned. Decimal values are ignored. If an
+ * array is passed, as in `byte([true, 123, '456'])`, then an array of byte
+ * values will be returned.
+ *
+ * Note: If a value can't be converted to a number, as in `byte('giraffe')`,
+ * then the value `NaN` (not a number) will be returned.
+ *
+ * @method byte
+ * @param {String|Boolean|Number} n value to convert.
+ * @return {Number} converted byte value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of values.
+ * let original = [0, 'hi', 123, 'true'];
+ *
+ * // Convert the array to a Boolean values.
+ * let converted = boolean(original);
+ *
+ * // Iterate over the array of converted Boolean values.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Style the circle based on the converted value.
+ * if (converted[i] === true) {
+ * fill('blue');
+ * } else {
+ * fill('red');
+ * }
+ *
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 20;
+ *
+ * // Draw the circle.
+ * circle(x, 50, 15);
+ * }
+ *
+ * describe(
+ * 'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a Boolean variable.
+ * let original = true;
+ *
+ * // Convert the Boolean to its byte value.
+ * let converted = byte(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "true : 1" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = '256';
+ *
+ * // Convert the string to its byte value.
+ * let converted = byte(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "256 : 0" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 256;
+ *
+ * // Convert the number to its byte value.
+ * let converted = byte(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "256 : 0" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method byte
+ * @param {Array} ns values to convert.
+ * @return {Number[]} converted byte values.
+ */
+ _main.default.prototype.byte = function (n) {
+ var nn = _main.default.prototype.int(n, 10);
+ if (typeof nn === 'number') {
+ return (nn + 128) % 256 - 128;
+ } else if (nn instanceof Array) {
+ return nn.map(_main.default.prototype.byte);
+ }
+ };
+ /**
+ * Converts a `Number` or `String` to a single-character `String`.
+ *
+ * `char()` converts numbers to their single-character string representations.
+ *
+ * The parameter, `n`, is the value to convert. If a number is passed, as in
+ * `char(65)`, the corresponding single-character string is returned. If a
+ * string is passed, as in `char('65')`, the string is converted to an integer
+ * (whole number) and the corresponding single-character string is returned.
+ * If an array is passed, as in `char([65, 66, 67])`, an array of
+ * single-character strings is returned.
+ *
+ * See MDN
+ * for more information about conversions.
+ *
+ * @method char
+ * @param {String|Number} n value to convert.
+ * @return {String} converted single-character string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of values.
+ * let original = [false, '64', 383];
+ *
+ * // Convert the array elements to their byte values.
+ * let converted = byte(original);
+ *
+ * // Iterate over the converted array elements.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Style the circle.
+ * fill(converted[i]);
+ *
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 25;
+ *
+ * // Draw the circle.
+ * circle(x, 50, 20);
+ * }
+ *
+ * describe(
+ * 'Three gray circles on a gray background. The circles get lighter from left to right.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 65;
+ *
+ * // Convert the number to a char.
+ * let converted = char(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "65 : A" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = '65';
+ *
+ * // Convert the string to a char.
+ * let converted = char(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "65 : A" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method char
+ * @param {Array} ns values to convert.
+ * @return {String[]} converted single-character strings.
+ */
+ _main.default.prototype.char = function (n) {
+ if (typeof n === 'number' && !isNaN(n)) {
+ return String.fromCharCode(n);
+ } else if (n instanceof Array) {
+ return n.map(_main.default.prototype.char);
+ } else if (typeof n === 'string') {
+ return _main.default.prototype.char(parseInt(n, 10));
+ }
+ };
+ /**
+ * Converts a single-character `String` to a `Number`.
+ *
+ * `unchar()` converts single-character strings to their corresponding
+ * integer (whole number).
+ *
+ * The parameter, `n`, is the character to convert. For example,
+ * `unchar('A')`, returns the number 65. If an array is passed, as in
+ * `unchar(['A', 'B', 'C'])`, an array of integers is returned.
+ *
+ * @method unchar
+ * @param {String} n value to convert.
+ * @return {Number} converted number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let original = ['65', 66, '67'];
+ *
+ * // Convert the string to a char.
+ * let converted = char(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over elements of the converted array.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the original and converted values.
+ * text(`${original[i]} : ${converted[i]}`, 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "65 : A", "66 : B", and "67 : C" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = 'A';
+ *
+ * // Convert the string to a number.
+ * let converted = unchar(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "A : 65" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method unchar
+ * @param {String[]} ns values to convert.
+ * @return {Number[]} converted numbers.
+ */
+ _main.default.prototype.unchar = function (n) {
+ if (typeof n === 'string' && n.length === 1) {
+ return n.charCodeAt(0);
+ } else if (n instanceof Array) {
+ return n.map(_main.default.prototype.unchar);
+ }
+ };
+ /**
+ * Converts a `Number` to a `String` with its hexadecimal value.
+ *
+ * `hex()` converts a number to a string with its hexadecimal number value.
+ * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
+ * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
+ * number `11` (eleven) in base-10 is written as the letter `B` in hex.
+ *
+ * The first parameter, `n`, is the number to convert. For example, `hex(20)`,
+ * returns the string `'00000014'`. If an array is passed, as in
+ * `hex([1, 10, 100])`, an array of hexadecimal strings is returned.
+ *
+ * The second parameter, `digits`, is optional. If a number is passed, as in
+ * `hex(20, 2)`, it sets the number of hexadecimal digits to display. For
+ * example, calling `hex(20, 2)` returns the string `'14'`.
+ *
+ * @method hex
+ * @param {Number} n value to convert.
+ * @param {Number} [digits] number of digits to include.
+ * @return {String} converted hexadecimal value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of characters.
+ * let original = ['A', 'B', 'C'];
+ *
+ * // Convert the string to a number.
+ * let converted = unchar(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over elements of the converted array.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the original and converted values.
+ * text(`${original[i]} : ${converted[i]}`, 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "A : 65", "B : 66", and "C :67" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 20;
+ *
+ * // Convert the number to a hex string.
+ * let converted = hex(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Display the original and converted values.
+ * text(`${original} = ${converted}`, 50, 50);
+ *
+ * describe('The text "20 = 00000014" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 20;
+ *
+ * // Convert the number to a hex string.
+ * // Only display two hex digits.
+ * let converted = hex(original, 2);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} = ${converted}`, 50, 50);
+ *
+ * describe('The text "20 = 14" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method hex
+ * @param {Number[]} ns values to convert.
+ * @param {Number} [digits]
+ * @return {String[]} converted hexadecimal values.
+ */
+ _main.default.prototype.hex = function (n, digits) {
+ digits = digits === undefined || digits === null ? digits = 8 : digits;
+ if (n instanceof Array) {
+ return n.map(function (n) {
+ return _main.default.prototype.hex(n, digits);
+ });
+ } else if (n === Infinity || n === - Infinity) {
+ var c = n === Infinity ? 'F' : '0';
+ return c.repeat(digits);
+ } else if (typeof n === 'number') {
+ if (n < 0) {
+ n = 4294967295 + n + 1;
+ }
+ var hex = Number(n).toString(16).toUpperCase();
+ while (hex.length < digits) {
+ hex = '0'.concat(hex);
+ }
+ if (hex.length >= digits) {
+ hex = hex.substring(hex.length - digits, hex.length);
+ }
+ return hex;
+ }
+ };
+ /**
+ * Converts a `String` with a hexadecimal value to a `Number`.
+ *
+ * `unhex()` converts a string with its hexadecimal number value to a number.
+ * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
+ * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
+ * number `11` (eleven) in base-10 is written as the letter `B` in hex.
+ *
+ * The first parameter, `n`, is the hex string to convert. For example,
+ * `unhex('FF')`, returns the number 255. If an array is passed, as in
+ * `unhex(['00', '80', 'FF'])`, an array of numbers is returned.
+ *
+ * @method unhex
+ * @param {String} n value to convert.
+ * @return {Number} converted number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let original = [1, 10, 100];
+ *
+ * // Convert the numbers to hex strings.
+ * // Only use two hex digits.
+ * let converted = hex(original, 2);
+ *
+ * // Style the text.
+ * textAlign(RIGHT, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over the converted values.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the original and converted values.
+ * text(`${ original[i]} = ${converted[i]}`, 75, y);
+ * }
+ *
+ * describe(
+ * 'The text "1 = 01", "10 = 0A", and "100 = 64" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a a hex string variable
+ * let original = 'FF';
+ *
+ * // Convert the hex string to a number.
+ * let converted = unhex(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} = ${converted}`, 50, 50);
+ *
+ * describe('The text "FF = 255" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method unhex
+ * @param {String[]} ns values to convert.
+ * @return {Number[]} converted numbers.
+ */
+ _main.default.prototype.unhex = function (n) {
+ if (n instanceof Array) {
+ return n.map(_main.default.prototype.unhex);
+ } else {
+ return parseInt('0x'.concat(n), 16);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.number.constructor': 196,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.repeat': 218
+ }
+ ],
+ 344: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.pad-start');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.pad-start');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('../core/friendly_errors/validate_params');
+ _dereq_('../core/friendly_errors/file_errors');
+ _dereq_('../core/friendly_errors/fes_core');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _slicedToArray(arr, i) {
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+ }
+ function _nonIterableRest() {
+ throw new TypeError('Invalid attempt to destructure non-iterable instance');
+ }
+ function _iterableToArrayLimit(arr, i) {
+ if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === '[object Arguments]')) {
+ return;
+ }
+ var _arr = [
+ ];
+ var _n = true;
+ var _d = false;
+ var _e = undefined;
+ try {
+ for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+ _arr.push(_s.value);
+ if (i && _arr.length === i) break;
+ }
+ } catch (err) {
+ _d = true;
+ _e = err;
+ } finally {
+ try {
+ if (!_n && _i['return'] != null) _i['return']();
+ } finally {
+ if (_d) throw _e;
+ }
+ }
+ return _arr;
+ }
+ function _arrayWithHoles(arr) {
+ if (Array.isArray(arr)) return arr;
+ } /**
+ * @module Data
+ * @submodule String Functions
+ * @for p5
+ * @requires core
+ */
+ //return p5; //LM is this a mistake?
+ /**
+ * Combines an array of strings into one string.
+ *
+ * The first parameter, `list`, is the array of strings to join.
+ *
+ * The second parameter, `separator`, is the character(s) that should be used
+ * to separate the combined strings. For example, calling
+ * `join(myWords, ' : ')` would return a string of words each separated by a
+ * colon and spaces.
+ *
+ * @method join
+ * @param {Array} list array of strings to combine.
+ * @param {String} separator character(s) to place between strings when they're combined.
+ * @return {String} combined string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let original = ['00', '80', 'FF'];
+ *
+ * // Convert the numbers to hex strings.
+ * // Only use two hex digits.
+ * let converted = unhex(original, 2);
+ *
+ * // Style the text.
+ * textAlign(RIGHT, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over the converted values.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the original and converted values.
+ * text(`${ original[i]} = ${converted[i]}`, 80, y);
+ * }
+ *
+ * describe(
+ * 'The text "00 = 0", "80 = 128", and "FF = 255" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.join = function (list, separator) {
+ _main.default._validateParameters('join', arguments);
+ return list.join(separator);
+ };
+ /**
+ * Applies a regular expression to a string and returns an array with the
+ * first match.
+ *
+ * `match()` uses regular expressions (regex) to match patterns in text. For
+ * example, the regex `abc` can be used to search a string for the exact
+ * sequence of characters `abc`. See
+ * MDN.
+ * for more information about regexes.
+ *
+ * The first parameter, `str`, is the string to search.
+ *
+ * The second parameter, `regex`, is a string with the regular expression to
+ * apply. For example, calling `match('Hello, p5*js!', '[a-z][0-9]')` would
+ * return the array `['p5']`.
+ *
+ * Note: If no matches are found, `null` is returned.
+ *
+ * @method match
+ * @param {String} str string to search.
+ * @param {String} regexp regular expression to match.
+ * @return {String[]} match if found.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of strings.
+ * let myWords = ['one', 'two', 'three'];
+ *
+ * // Create a combined string
+ * let combined = join(myWords, ' : ');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ *
+ * // Display the combined string.
+ * text(combined, 50, 50);
+ *
+ * describe('The text "one : two : three" written in black on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.match = function (str, reg) {
+ _main.default._validateParameters('match', arguments);
+ return str.match(reg);
+ };
+ /**
+ * Applies a regular expression to a string and returns an array of matches.
+ *
+ * `match()` uses regular expressions (regex) to match patterns in text. For
+ * example, the regex `abc` can be used to search a string for the exact
+ * sequence of characters `abc`. See
+ * MDN.
+ * for more information about regexes. `matchAll()` is different from
+ * match() because it returns every match, not just
+ * the first.
+ *
+ * The first parameter, `str`, is the string to search.
+ *
+ * The second parameter, `regex`, is a string with the regular expression to
+ * apply. For example, calling
+ * `matchAll('p5*js is easier than abc123', '[a-z][0-9]')` would return the
+ * 2D array `[['p5'], ['c1']]`.
+ *
+ * Note: If no matches are found, an empty array `[]` is returned.
+ *
+ * @method matchAll
+ * @param {String} str string to search.
+ * @param {String} regexp regular expression to match.
+ * @return {String[]} matches found.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'Hello, p5*js!';
+ *
+ * // Match the characters that are lowercase
+ * // letters followed by digits.
+ * let matches = match(string, '[a-z][0-9]');
+ *
+ * // Print the matches array to the console:
+ * // ['p5']
+ * print(matches);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the matches.
+ * text(matches, 50, 50);
+ *
+ * describe('The text "p5" written in black on a gray canvas.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.matchAll = function (str, reg) {
+ _main.default._validateParameters('matchAll', arguments);
+ var re = new RegExp(reg, 'g');
+ var match = re.exec(str);
+ var matches = [
+ ];
+ while (match !== null) {
+ matches.push(match);
+ // matched text: match[0]
+ // match start: match.index
+ // capturing group n: match[n]
+ match = re.exec(str);
+ }
+ return matches;
+ };
+ /**
+ * Converts a `Number` into a `String` with a given number of digits.
+ *
+ * `nf()` converts numbers such as `123.45` into strings formatted with a set
+ * number of digits, as in `'123.4500'`.
+ *
+ * The first parameter, `num`, is the number to convert to a string. For
+ * example, calling `nf(123.45)` returns the string `'123.45'`. If an array of
+ * numbers is passed, as in `nf([123.45, 67.89])`, an array of formatted
+ * strings will be returned.
+ *
+ * The second parameter, `left`, is optional. If a number is passed, as in
+ * `nf(123.45, 4)`, it sets the minimum number of digits to include to the
+ * left of the decimal place. If `left` is larger than the number of digits in
+ * `num`, then unused digits will be set to 0. For example, calling
+ * `nf(123.45, 4)` returns the string `'0123.45'`.
+ *
+ * The third parameter, `right`, is also optional. If a number is passed, as
+ * in `nf(123.45, 4, 1)`, it sets the minimum number of digits to include to
+ * the right of the decimal place. If `right` is smaller than the number of
+ * decimal places in `num`, then `num` will be rounded to the given number of
+ * decimal places. For example, calling `nf(123.45, 4, 1)` returns the string
+ * `'0123.5'`. If right is larger than the number of decimal places in `num`,
+ * then unused decimal places will be set to 0. For example, calling
+ * `nf(123.45, 4, 3)` returns the string `'0123.450'`.
+ *
+ * @method nf
+ * @param {Number|String} num number to format.
+ * @param {Integer|String} [left] number of digits to include to the left of
+ * the decimal point.
+ * @param {Integer|String} [right] number of digits to include to the right
+ * of the decimal point.
+ * @return {String} formatted string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'p5*js is easier than abc123';
+ *
+ * // Match the character sequences that are
+ * // lowercase letters followed by digits.
+ * let matches = matchAll(string, '[a-z][0-9]');
+ *
+ * // Print the matches array to the console:
+ * // [['p5'], ['c1']]
+ * print(matches);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over the matches array.
+ * for (let i = 0; i < matches.length; i += 1) {
+ *
+ * // Calculate the y-coordainate.
+ * let y = (i + 1) * 33;
+ *
+ * // Display the match.
+ * text(matches[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "p5" and "c1" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nf
+ * @param {Number[]} nums numbers to format.
+ * @param {Integer|String} [left]
+ * @param {Integer|String} [right]
+ * @return {String[]} formatted strings.
+ */
+ _main.default.prototype.nf = function (nums, left, right) {
+ _main.default._validateParameters('nf', arguments);
+ if (nums instanceof Array) {
+ return nums.map(function (x) {
+ return doNf(x, left, right);
+ });
+ } else {
+ var typeOfFirst = Object.prototype.toString.call(nums);
+ if (typeOfFirst === '[object Arguments]') {
+ if (nums.length === 3) {
+ return this.nf(nums[0], nums[1], nums[2]);
+ } else if (nums.length === 2) {
+ return this.nf(nums[0], nums[1]);
+ } else {
+ return this.nf(nums[0]);
+ }
+ } else {
+ return doNf(nums, left, right);
+ }
+ }
+ };
+ function doNf(num, left, right) {
+ var _num$toString$split = num.toString().split('.'),
+ _num$toString$split2 = _slicedToArray(_num$toString$split, 2),
+ leftPart = _num$toString$split2[0],
+ rightPart = _num$toString$split2[1];
+ if (typeof right === 'undefined') {
+ leftPart = leftPart.padStart(left, '0');
+ return rightPart ? leftPart + '.' + rightPart : leftPart;
+ } else {
+ var roundedOff = num.toFixed(right);
+ var _roundedOff$toString$ = roundedOff.toString().split('.');
+ var _roundedOff$toString$2 = _slicedToArray(_roundedOff$toString$, 2);
+ leftPart = _roundedOff$toString$2[0];
+ rightPart = _roundedOff$toString$2[1];
+ leftPart = leftPart.padStart(left, '0');
+ if (typeof rightPart === 'undefined') {
+ return leftPart;
+ } else {
+ return leftPart + '.' + rightPart;
+ }
+ }
+ } /**
+ * Converts a `Number` into a `String` with commas to mark units of 1,000.
+ *
+ * `nfc()` converts numbers such as 12345 into strings formatted with commas
+ * to mark the thousands place, as in `'12,345'`.
+ *
+ * The first parameter, `num`, is the number to convert to a string. For
+ * example, calling `nfc(12345)` returns the string `'12,345'`.
+ *
+ * The second parameter, `right`, is optional. If a number is passed, as in
+ * `nfc(12345, 1)`, it sets the minimum number of digits to include to the
+ * right of the decimal place. If `right` is smaller than the number of
+ * decimal places in `num`, then `num` will be rounded to the given number of
+ * decimal places. For example, calling `nfc(12345.67, 1)` returns the string
+ * `'12,345.7'`. If `right` is larger than the number of decimal places in
+ * `num`, then unused decimal places will be set to 0. For example, calling
+ * `nfc(12345.67, 3)` returns the string `'12,345.670'`.
+ *
+ * @method nfc
+ * @param {Number|String} num number to format.
+ * @param {Integer|String} [right] number of digits to include to the right
+ * of the decimal point.
+ * @return {String} formatted string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(16);
+ *
+ * // Create a number variable.
+ * let number = 123.45;
+ *
+ * // Display the number as a string.
+ * let formatted = nf(number);
+ * text(formatted, 20, 25);
+ *
+ * // Display the number with four digits
+ * // to the left of the decimal.
+ * let left = nf(number, 4);
+ * text(left, 20, 50);
+ *
+ * // Display the number with four digits
+ * // to the left of the decimal and one
+ * // to the right.
+ * let right = nf(number, 4, 1);
+ * text(right, 20, 75);
+ *
+ * describe(
+ * 'The numbers "123.45", "0123.45", and "0123.5" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(16);
+ *
+ * // Create a number variable.
+ * let number = 12345;
+ *
+ * // Display the number as a string.
+ * let commas = nfc(number);
+ * text(commas, 15, 33);
+ *
+ * // Display the number with four digits
+ * // to the left of the decimal.
+ * let decimals = nfc(number, 2);
+ * text(decimals, 15, 67);
+ *
+ * describe(
+ * 'The numbers "12,345" and "12,345.00" written on separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nfc
+ * @param {Number[]} nums numbers to format.
+ * @param {Integer|String} [right]
+ * @return {String[]} formatted strings.
+ */
+
+ _main.default.prototype.nfc = function (num, right) {
+ _main.default._validateParameters('nfc', arguments);
+ if (num instanceof Array) {
+ return num.map(function (x) {
+ return doNfc(x, right);
+ });
+ } else {
+ return doNfc(num, right);
+ }
+ };
+ function doNfc(num, right) {
+ num = num.toString();
+ var dec = num.indexOf('.');
+ var rem = dec !== - 1 ? num.substring(dec) : '';
+ var n = dec !== - 1 ? num.substring(0, dec) : num;
+ n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+ if (right === 0) {
+ rem = '';
+ } else if (typeof right !== 'undefined') {
+ if (right > rem.length) {
+ rem += dec === - 1 ? '.' : '';
+ var len = right - rem.length + 1;
+ for (var i = 0; i < len; i++) {
+ rem += '0';
+ }
+ } else {
+ rem = rem.substring(0, right + 1);
+ }
+ }
+ return n + rem;
+ } /**
+ * Converts a `Number` into a `String` with a plus or minus sign.
+ *
+ * `nfp()` converts numbers such as 123 into strings formatted with a `+` or
+ * `-` symbol to mark whether they're positive or negative, as in `'+123'`.
+ *
+ * The first parameter, `num`, is the number to convert to a string. For
+ * example, calling `nfp(123.45)` returns the string `'+123.45'`. If an array
+ * of numbers is passed, as in `nfp([123.45, -6.78])`, an array of formatted
+ * strings will be returned.
+ *
+ * The second parameter, `left`, is optional. If a number is passed, as in
+ * `nfp(123.45, 4)`, it sets the minimum number of digits to include to the
+ * left of the decimal place. If `left` is larger than the number of digits in
+ * `num`, then unused digits will be set to 0. For example, calling
+ * `nfp(123.45, 4)` returns the string `'+0123.45'`.
+ *
+ * The third parameter, `right`, is also optional. If a number is passed, as
+ * in `nfp(123.45, 4, 1)`, it sets the minimum number of digits to include to
+ * the right of the decimal place. If `right` is smaller than the number of
+ * decimal places in `num`, then `num` will be rounded to the given number of
+ * decimal places. For example, calling `nfp(123.45, 4, 1)` returns the
+ * string `'+0123.5'`. If `right` is larger than the number of decimal places
+ * in `num`, then unused decimal places will be set to 0. For example,
+ * calling `nfp(123.45, 4, 3)` returns the string `'+0123.450'`.
+ *
+ * @method nfp
+ * @param {Number} num number to format.
+ * @param {Integer} [left] number of digits to include to the left of the
+ * decimal point.
+ * @param {Integer} [right] number of digits to include to the right of the
+ * decimal point.
+ * @return {String} formatted string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let numbers = [12345, 6789];
+ *
+ * // Convert the numbers to formatted strings.
+ * let formatted = nfc(numbers);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < formatted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 33;
+ *
+ * // Display the original and formatted numbers.
+ * text(`${numbers[i]} : ${formatted[i]}`, 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "12345 : 12,345" and "6789 : 6,789" written on two separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create number variables.
+ * let positive = 123;
+ * let negative = -123;
+ *
+ * // Convert the positive number to a formatted string.
+ * let p = nfp(positive);
+ *
+ * // Convert the negative number to a formatted string
+ * // with four digits to the left of the decimal
+ * // and two digits to the right of the decimal.
+ * let n = nfp(negative, 4, 2);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Display the original and formatted numbers.
+ * text(`${positive} : ${p}`, 50, 33);
+ * text(`${negative} : ${n}`, 50, 67);
+ *
+ * describe(
+ * 'The text "123 : +123" and "-123 : -123.00" written on separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nfp
+ * @param {Number[]} nums numbers to format.
+ * @param {Integer} [left]
+ * @param {Integer} [right]
+ * @return {String[]} formatted strings.
+ */
+
+ _main.default.prototype.nfp = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('nfp', args);
+ var nfRes = _main.default.prototype.nf.apply(this, args);
+ if (nfRes instanceof Array) {
+ return nfRes.map(addNfp);
+ } else {
+ return addNfp(nfRes);
+ }
+ };
+ function addNfp(num) {
+ return parseFloat(num) > 0 ? '+'.concat(num.toString()) : num.toString();
+ } /**
+ * Converts a positive `Number` into a `String` with an extra space in front.
+ *
+ * `nfs()` converts positive numbers such as 123.45 into strings formatted
+ * with an extra space in front, as in ' 123.45'. Doing so can be helpful for
+ * aligning positive and negative numbers.
+ *
+ * The first parameter, `num`, is the number to convert to a string. For
+ * example, calling `nfs(123.45)` returns the string `' 123.45'`.
+ *
+ * The second parameter, `left`, is optional. If a number is passed, as in
+ * `nfs(123.45, 4)`, it sets the minimum number of digits to include to the
+ * left of the decimal place. If `left` is larger than the number of digits in
+ * `num`, then unused digits will be set to 0. For example, calling
+ * `nfs(123.45, 4)` returns the string `' 0123.45'`.
+ *
+ * The third parameter, `right`, is also optional. If a number is passed, as
+ * in `nfs(123.45, 4, 1)`, it sets the minimum number of digits to include to
+ * the right of the decimal place. If `right` is smaller than the number of
+ * decimal places in `num`, then `num` will be rounded to the given number of
+ * decimal places. For example, calling `nfs(123.45, 4, 1)` returns the
+ * string `' 0123.5'`. If `right` is larger than the number of decimal places
+ * in `num`, then unused decimal places will be set to 0. For example,
+ * calling `nfs(123.45, 4, 3)` returns the string `' 0123.450'`.
+ *
+ * @method nfs
+ * @param {Number} num number to format.
+ * @param {Integer} [left] number of digits to include to the left of the
+ * decimal point.
+ * @param {Integer} [right] number of digits to include to the right of the
+ * decimal point.
+ * @return {String} formatted string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create number variables.
+ * let numbers = [123, -4.56];
+ *
+ * // Convert the numbers to formatted strings
+ * // with four digits to the left of the decimal
+ * // and one digit to the right of the decimal.
+ * let formatted = nfp(numbers, 4, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < formatted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 33;
+ *
+ * // Display the original and formatted numbers.
+ * text(`${numbers[i]} : ${formatted[i]}`, 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "123 : +0123.0" and "-4.56 : 00-4.6" written on separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create number variables.
+ * let positive = 123;
+ * let negative = -123;
+ *
+ * // Convert the positive number to a formatted string.
+ * let formatted = nfs(positive);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Display the negative number and the formatted positive number.
+ * text(negative, 50, 33);
+ * text(formatted, 50, 67);
+ *
+ * describe(
+ * 'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nfs
+ * @param {Array} nums numbers to format.
+ * @param {Integer} [left]
+ * @param {Integer} [right]
+ * @return {String[]} formatted strings.
+ */
+
+ _main.default.prototype.nfs = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('nfs', args);
+ var nfRes = _main.default.prototype.nf.apply(this, args);
+ if (nfRes instanceof Array) {
+ return nfRes.map(addNfs);
+ } else {
+ return addNfs(nfRes);
+ }
+ };
+ function addNfs(num) {
+ return parseFloat(num) >= 0 ? ' '.concat(num.toString()) : num.toString();
+ } /**
+ * Splits a `String` into pieces and returns an array containing the pieces.
+ *
+ * The first parameter, `value`, is the string to split.
+ *
+ * The second parameter, `delim`, is the character(s) that should be used to
+ * split the string. For example, calling
+ * `split('rock...paper...scissors', '...')` would return the array
+ * `['rock', 'paper', 'scissors']` because there are three periods `...`
+ * between each word.
+ *
+ * @method split
+ * @param {String} value the String to be split
+ * @param {String} delim the String used to separate the data
+ * @return {String[]} Array of Strings
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let number = 123.45;
+ *
+ * // Convert the positive number to a formatted string.
+ * // Use four digits to the left of the decimal and
+ * // one digit to the right.
+ * let formatted = nfs(number, 4, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Display a negative version of the number and
+ * // the formatted positive version.
+ * text('-0123.5', 50, 33);
+ * text(formatted, 50, 67);
+ *
+ * describe(
+ * 'The numbers "-0123.5" and "0123.5" written on separate lines. The numbers align vertically. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.split = function (str, delim) {
+ _main.default._validateParameters('split', arguments);
+ return str.split(delim);
+ };
+ /**
+ * Splits a `String` into pieces and returns an array containing the pieces.
+ *
+ * `splitTokens()` is an enhanced version of
+ * split(). It can split a string when any characters
+ * from a list are detected.
+ *
+ * The first parameter, `value`, is the string to split.
+ *
+ * The second parameter, `delim`, is optional. It sets the character(s) that
+ * should be used to split the string. `delim` can be a single string, as in
+ * `splitTokens('rock...paper...scissors...shoot', '...')`, or an array of
+ * strings, as in
+ * `splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])`. By default,
+ * if no `delim` characters are specified, then any whitespace character is
+ * used to split. Whitespace characters include tab (`\t`), line feed (`\n`),
+ * carriage return (`\r`), form feed (`\f`), and space.
+ *
+ * @method splitTokens
+ * @param {String} value string to split.
+ * @param {String} [delim] character(s) to use for splitting the string.
+ * @return {String[]} separated strings.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'rock...paper...scissors';
+ *
+ * // Split the string at each ...
+ * let words = split(string, '...');
+ *
+ * // Print the array to the console:
+ * // ["rock", "paper", "scissors"]
+ * print(words);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Iterate over the words array.
+ * for (let i = 0; i < words.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the word.
+ * text(words[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The words "rock", "paper", and "scissors" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'rock paper scissors shoot';
+ *
+ * // Split the string at each space.
+ * let words = splitTokens(string);
+ *
+ * // Print the array to the console.
+ * print(words);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Iterate over the words array.
+ * for (let i = 0; i < words.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Display the word.
+ * text(words[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'rock...paper...scissors...shoot';
+ *
+ * // Split the string at each ...
+ * let words = splitTokens(string, '...');
+ *
+ * // Print the array to the console.
+ * print(words);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Iterate over the words array.
+ * for (let i = 0; i < words.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Display the word.
+ * text(words[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.splitTokens = function (value, delims) {
+ _main.default._validateParameters('splitTokens', arguments);
+ var d;
+ if (typeof delims !== 'undefined') {
+ var str = delims;
+ var sqc = /\]/g.exec(str);
+ var sqo = /\[/g.exec(str);
+ if (sqo && sqc) {
+ str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+ sqo = /\[/g.exec(str);
+ str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+ d = new RegExp('[\\['.concat(str, '\\]]'), 'g');
+ } else if (sqc) {
+ str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+ d = new RegExp('['.concat(str, '\\]]'), 'g');
+ } else if (sqo) {
+ str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+ d = new RegExp('['.concat(str, '\\[]'), 'g');
+ } else {
+ d = new RegExp('['.concat(str, ']'), 'g');
+ }
+ } else {
+ d = /\s/g;
+ }
+ return value.split(d).filter(function (n) {
+ return n;
+ });
+ };
+ /**
+ * Removes whitespace from the start and end of a `String` without changing the middle.
+ *
+ * `trim()` trims
+ * whitespace characters
+ * such as spaces, carriage returns, tabs, Unicode "nbsp" character.
+ *
+ * The parameter, `str`, is the string to trim. If a single string is passed,
+ * as in `trim(' pad ')`, a single string is returned. If an array of
+ * strings is passed, as in `trim([' pad ', '\n space \n'])`, an array of
+ * strings is returned.
+ *
+ * @method trim
+ * @param {String} str string to trim.
+ * @return {String} trimmed string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'rock;paper,scissors...shoot';
+ *
+ * // Split the string at each semicolon, comma, or ...
+ * let words = splitTokens(string, [';', ',', '...']);
+ *
+ * // Print the array to the console.
+ * print(words);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Iterate over the words array.
+ * for (let i = 0; i < words.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Display the word.
+ * text(words[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = ' p5*js ';
+ *
+ * // Trim the whitespace.
+ * let trimmed = trim(string);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the text.
+ * text(`Hello, ${trimmed}!`, 50, 50);
+ *
+ * describe('The text "Hello, p5*js!" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method trim
+ * @param {String[]} strs strings to trim.
+ * @return {String[]} trimmed strings.
+ */
+ _main.default.prototype.trim = function (str) {
+ _main.default._validateParameters('trim', arguments);
+ if (str instanceof Array) {
+ return str.map(this.trim);
+ } else {
+ return str.trim();
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/friendly_errors/fes_core': 294,
+ '../core/friendly_errors/file_errors': 295,
+ '../core/friendly_errors/validate_params': 298,
+ '../core/main': 303,
+ 'core-js/modules/es.array.filter': 174,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.number.to-fixed': 198,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.constructor': 209,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.match': 216,
+ 'core-js/modules/es.string.pad-start': 217,
+ 'core-js/modules/es.string.replace': 219,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.string.trim': 224,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 345: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module IO
+ * @submodule Time & Date
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Returns the current day as a number from 1–31.
+ *
+ * @method day
+ * @return {Integer} current day between 1 and 31.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of strings.
+ * let strings = [' wide ', '\n open ', '\n spaces '];
+ *
+ * // Trim the whitespace.
+ * let trimmed = trim(strings);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(10);
+ *
+ * // Display the text.
+ * text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);
+ *
+ * describe('The text "wide open spaces" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.day = function () {
+ return new Date().getDate();
+ };
+ /**
+ * Returns the current hour as a number from 0–23.
+ *
+ * @method hour
+ * @return {Integer} current hour between 0 and 23.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current day.
+ * let d = day();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the day.
+ * text(`Current day: ${d}`, 20, 50, 60);
+ *
+ * describe(`The text 'Current day: ${d}' written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.hour = function () {
+ return new Date().getHours();
+ };
+ /**
+ * Returns the current minute as a number from 0–59.
+ *
+ * @method minute
+ * @return {Integer} current minute between 0 and 59.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current hour.
+ * let h = hour();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the hour.
+ * text(`Current hour: ${h}`, 20, 50, 60);
+ *
+ * describe(`The text 'Current hour: ${h}' written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.minute = function () {
+ return new Date().getMinutes();
+ };
+ /**
+ * Returns the number of milliseconds since a sketch started running.
+ *
+ * `millis()` keeps track of how long a sketch has been running in
+ * milliseconds (thousandths of a second). This information is often
+ * helpful for timing events and animations.
+ *
+ * If a sketch has a
+ * setup() function, then `millis()` begins tracking
+ * time before the code in setup() runs. If a
+ * sketch includes a preload() function, then
+ * `millis()` begins tracking time as soon as the code in
+ * preload() starts running.
+ *
+ * @method millis
+ * @return {Number} number of milliseconds since starting the sketch.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current minute.
+ * let m = minute();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the minute.
+ * text(`Current minute: ${m}`, 10, 50, 80);
+ *
+ * describe(`The text 'Current minute: ${m}' written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the number of milliseconds the sketch has run.
+ * let ms = millis();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(10);
+ * textFont('Courier New');
+ *
+ * // Display how long it took setup() to be called.
+ * text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
+ *
+ * describe(
+ * `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get the number of seconds the sketch has run.
+ * let s = millis() / 1000;
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(10);
+ * textFont('Courier New');
+ *
+ * // Display how long the sketch has run.
+ * text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle oscillates left and right on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get the number of seconds the sketch has run.
+ * let s = millis() / 1000;
+ *
+ * // Calculate an x-coordinate.
+ * let x = 30 * sin(s) + 50;
+ *
+ * // Draw the circle.
+ * circle(x, 50, 30);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.millis = function () {
+ if (this._millisStart === - 1) {
+ // Sketch has not started
+ return 0;
+ } else {
+ return window.performance.now() - this._millisStart;
+ }
+ };
+ /**
+ * Returns the current month as a number from 1–12.
+ *
+ * @method month
+ * @return {Integer} current month between 1 and 12.
+ *
+ * @example
+ *
+ * // Load the GeoJSON.
+ * function preload() {
+ * loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the number of milliseconds the sketch has run.
+ * let ms = millis();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(11);
+ *
+ * // Display how long it took to load the data.
+ * text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
+ *
+ * describe(
+ * `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
+ * );
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.month = function () {
+ //January is 0!
+ return new Date().getMonth() + 1;
+ };
+ /**
+ * Returns the current second as a number from 0–59.
+ *
+ * @method second
+ * @return {Integer} current second between 0 and 59.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current month.
+ * let m = month();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the month.
+ * text(`Current month: ${m}`, 10, 50, 80);
+ *
+ * describe(`The text 'Current month: ${m}' written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.second = function () {
+ return new Date().getSeconds();
+ };
+ /**
+ * Returns the current year as a number such as 1999.
+ *
+ * @method year
+ * @return {Integer} current year.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current second.
+ * let s = second();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the second.
+ * text(`Current second: ${s}`, 10, 50, 80);
+ *
+ * describe(`The text 'Current second: ${s}' written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.year = function () {
+ return new Date().getFullYear();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303
+ }
+ ],
+ 346: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('./p5.Geometry');
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Shape
+ * @submodule 3D Primitives
+ * @for p5
+ * @requires core
+ * @requires p5.Geometry
+ */
+ /**
+ * Begins adding shapes to a new
+ * p5.Geometry object.
+ *
+ * The `beginGeometry()` and endGeometry()
+ * functions help with creating complex 3D shapes from simpler ones such as
+ * sphere(). `beginGeometry()` begins adding shapes
+ * to a custom p5.Geometry object and
+ * endGeometry() stops adding them.
+ *
+ * `beginGeometry()` and endGeometry() can help
+ * to make sketches more performant. For example, if a complex 3D shape
+ * doesn’t change while a sketch runs, then it can be created with
+ * `beginGeometry()` and endGeometry().
+ * Creating a p5.Geometry object once and then
+ * drawing it will run faster than repeatedly drawing the individual pieces.
+ *
+ * See buildGeometry() for another way to
+ * build 3D shapes.
+ *
+ * Note: `beginGeometry()` can only be used in WebGL mode.
+ *
+ * @method beginGeometry
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current year.
+ * let y = year();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the year.
+ * text(`Current year: ${y}`, 10, 50, 80);
+ *
+ * describe(`The text 'Current year: ${y}' written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Start building the p5.Geometry object.
+ * beginGeometry();
+ *
+ * // Add a cone.
+ * cone();
+ *
+ * // Stop building the p5.Geometry object.
+ * shape = endGeometry();
+ *
+ * describe('A white cone drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the p5.Geometry object.
+ * noStroke();
+ *
+ * // Draw the p5.Geometry object.
+ * model(shape);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the p5.Geometry object.
+ * createArrow();
+ *
+ * describe('A white arrow drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the p5.Geometry object.
+ * noStroke();
+ *
+ * // Draw the p5.Geometry object.
+ * model(shape);
+ * }
+ *
+ * function createArrow() {
+ * // Start building the p5.Geometry object.
+ * beginGeometry();
+ *
+ * // Add shapes.
+ * push();
+ * rotateX(PI);
+ * cone(10);
+ * translate(0, -10, 0);
+ * cylinder(3, 20);
+ * pop();
+ *
+ * // Stop building the p5.Geometry object.
+ * shape = endGeometry();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let blueArrow;
+ * let redArrow;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the arrows.
+ * redArrow = createArrow('red');
+ * blueArrow = createArrow('blue');
+ *
+ * describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the arrows.
+ * noStroke();
+ *
+ * // Draw the red arrow.
+ * model(redArrow);
+ *
+ * // Translate and rotate the coordinate system.
+ * translate(30, 0, 0);
+ * rotateZ(frameCount * 0.01);
+ *
+ * // Draw the blue arrow.
+ * model(blueArrow);
+ * }
+ *
+ * function createArrow(fillColor) {
+ * // Start building the p5.Geometry object.
+ * beginGeometry();
+ *
+ * fill(fillColor);
+ *
+ * // Add shapes to the p5.Geometry object.
+ * push();
+ * rotateX(PI);
+ * cone(10);
+ * translate(0, -10, 0);
+ * cylinder(3, 20);
+ * pop();
+ *
+ * // Stop building the p5.Geometry object.
+ * let shape = endGeometry();
+ *
+ * return shape;
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.beginGeometry = function () {
+ return this._renderer.beginGeometry();
+ };
+ /**
+ * Stops adding shapes to a new
+ * p5.Geometry object and returns the object.
+ *
+ * The `beginGeometry()` and endGeometry()
+ * functions help with creating complex 3D shapes from simpler ones such as
+ * sphere(). `beginGeometry()` begins adding shapes
+ * to a custom p5.Geometry object and
+ * endGeometry() stops adding them.
+ *
+ * `beginGeometry()` and endGeometry() can help
+ * to make sketches more performant. For example, if a complex 3D shape
+ * doesn’t change while a sketch runs, then it can be created with
+ * `beginGeometry()` and endGeometry().
+ * Creating a p5.Geometry object once and then
+ * drawing it will run faster than repeatedly drawing the individual pieces.
+ *
+ * See buildGeometry() for another way to
+ * build 3D shapes.
+ *
+ * Note: `endGeometry()` can only be used in WebGL mode.
+ *
+ * @method endGeometry
+ * @returns {p5.Geometry} new 3D shape.
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let button;
+ * let particles;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a button to reset the particle system.
+ * button = createButton('Reset');
+ *
+ * // Call resetModel() when the user presses the button.
+ * button.mousePressed(resetModel);
+ *
+ * // Add the original set of particles.
+ * resetModel();
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the particles.
+ * noStroke();
+ *
+ * // Draw the particles.
+ * model(particles);
+ * }
+ *
+ * function resetModel() {
+ * // If the p5.Geometry object has already been created,
+ * // free those resources.
+ * if (particles) {
+ * freeGeometry(particles);
+ * }
+ *
+ * // Create a new p5.Geometry object with random spheres.
+ * particles = createParticles();
+ * }
+ *
+ * function createParticles() {
+ * // Start building the p5.Geometry object.
+ * beginGeometry();
+ *
+ * // Add shapes.
+ * for (let i = 0; i < 60; i += 1) {
+ * // Calculate random coordinates.
+ * let x = randomGaussian(0, 20);
+ * let y = randomGaussian(0, 20);
+ * let z = randomGaussian(0, 20);
+ *
+ * push();
+ * // Translate to the particle's coordinates.
+ * translate(x, y, z);
+ * // Draw the particle.
+ * sphere(5);
+ * pop();
+ * }
+ *
+ * // Stop building the p5.Geometry object.
+ * let shape = endGeometry();
+ *
+ * return shape;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Start building the p5.Geometry object.
+ * beginGeometry();
+ *
+ * // Add a cone.
+ * cone();
+ *
+ * // Stop building the p5.Geometry object.
+ * shape = endGeometry();
+ *
+ * describe('A white cone drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the p5.Geometry object.
+ * noStroke();
+ *
+ * // Draw the p5.Geometry object.
+ * model(shape);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the p5.Geometry object.
+ * createArrow();
+ *
+ * describe('A white arrow drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the p5.Geometry object.
+ * noStroke();
+ *
+ * // Draw the p5.Geometry object.
+ * model(shape);
+ * }
+ *
+ * function createArrow() {
+ * // Start building the p5.Geometry object.
+ * beginGeometry();
+ *
+ * // Add shapes.
+ * push();
+ * rotateX(PI);
+ * cone(10);
+ * translate(0, -10, 0);
+ * cylinder(3, 20);
+ * pop();
+ *
+ * // Stop building the p5.Geometry object.
+ * shape = endGeometry();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let blueArrow;
+ * let redArrow;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the arrows.
+ * redArrow = createArrow('red');
+ * blueArrow = createArrow('blue');
+ *
+ * describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the arrows.
+ * noStroke();
+ *
+ * // Draw the red arrow.
+ * model(redArrow);
+ *
+ * // Translate and rotate the coordinate system.
+ * translate(30, 0, 0);
+ * rotateZ(frameCount * 0.01);
+ *
+ * // Draw the blue arrow.
+ * model(blueArrow);
+ * }
+ *
+ * function createArrow(fillColor) {
+ * // Start building the p5.Geometry object.
+ * beginGeometry();
+ *
+ * fill(fillColor);
+ *
+ * // Add shapes to the p5.Geometry object.
+ * push();
+ * rotateX(PI);
+ * cone(10);
+ * translate(0, -10, 0);
+ * cylinder(3, 20);
+ * pop();
+ *
+ * // Stop building the p5.Geometry object.
+ * let shape = endGeometry();
+ *
+ * return shape;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.endGeometry = function () {
+ return this._renderer.endGeometry();
+ };
+ /**
+ * Creates a custom p5.Geometry object from
+ * simpler 3D shapes.
+ *
+ * `buildGeometry()` helps with creating complex 3D shapes from simpler ones
+ * such as sphere(). It can help to make sketches
+ * more performant. For example, if a complex 3D shape doesn’t change while a
+ * sketch runs, then it can be created with `buildGeometry()`. Creating a
+ * p5.Geometry object once and then drawing it
+ * will run faster than repeatedly drawing the individual pieces.
+ *
+ * The parameter, `callback`, is a function with the drawing instructions for
+ * the new p5.Geometry object. It will be called
+ * once to create the new 3D shape.
+ *
+ * See beginGeometry() and
+ * endGeometry() for another way to build 3D
+ * shapes.
+ *
+ * Note: `buildGeometry()` can only be used in WebGL mode.
+ *
+ * @method buildGeometry
+ * @param {Function} callback function that draws the shape.
+ * @returns {p5.Geometry} new 3D shape.
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let button;
+ * let particles;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a button to reset the particle system.
+ * button = createButton('Reset');
+ *
+ * // Call resetModel() when the user presses the button.
+ * button.mousePressed(resetModel);
+ *
+ * // Add the original set of particles.
+ * resetModel();
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the particles.
+ * noStroke();
+ *
+ * // Draw the particles.
+ * model(particles);
+ * }
+ *
+ * function resetModel() {
+ * // If the p5.Geometry object has already been created,
+ * // free those resources.
+ * if (particles) {
+ * freeGeometry(particles);
+ * }
+ *
+ * // Create a new p5.Geometry object with random spheres.
+ * particles = createParticles();
+ * }
+ *
+ * function createParticles() {
+ * // Start building the p5.Geometry object.
+ * beginGeometry();
+ *
+ * // Add shapes.
+ * for (let i = 0; i < 60; i += 1) {
+ * // Calculate random coordinates.
+ * let x = randomGaussian(0, 20);
+ * let y = randomGaussian(0, 20);
+ * let z = randomGaussian(0, 20);
+ *
+ * push();
+ * // Translate to the particle's coordinates.
+ * translate(x, y, z);
+ * // Draw the particle.
+ * sphere(5);
+ * pop();
+ * }
+ *
+ * // Stop building the p5.Geometry object.
+ * let shape = endGeometry();
+ *
+ * return shape;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the p5.Geometry object.
+ * shape = buildGeometry(createShape);
+ *
+ * describe('A white cone drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the p5.Geometry object.
+ * noStroke();
+ *
+ * // Draw the p5.Geometry object.
+ * model(shape);
+ * }
+ *
+ * // Create p5.Geometry object from a single cone.
+ * function createShape() {
+ * cone();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the arrow.
+ * shape = buildGeometry(createArrow);
+ *
+ * describe('A white arrow drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the arrow.
+ * noStroke();
+ *
+ * // Draw the arrow.
+ * model(shape);
+ * }
+ *
+ * function createArrow() {
+ * // Add shapes to the p5.Geometry object.
+ * push();
+ * rotateX(PI);
+ * cone(10);
+ * translate(0, -10, 0);
+ * cylinder(3, 20);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the p5.Geometry object.
+ * shape = buildGeometry(createArrow);
+ *
+ * describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the arrows.
+ * noStroke();
+ *
+ * // Draw the p5.Geometry object.
+ * model(shape);
+ *
+ * // Translate and rotate the coordinate system.
+ * translate(30, 0, 0);
+ * rotateZ(frameCount * 0.01);
+ *
+ * // Draw the p5.Geometry object again.
+ * model(shape);
+ * }
+ *
+ * function createArrow() {
+ * // Add shapes to the p5.Geometry object.
+ * push();
+ * rotateX(PI);
+ * cone(10);
+ * translate(0, -10, 0);
+ * cylinder(3, 20);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.buildGeometry = function (callback) {
+ return this._renderer.buildGeometry(callback);
+ };
+ /**
+ * Clears a p5.Geometry object from the graphics
+ * processing unit (GPU) memory.
+ *
+ * p5.Geometry objects can contain lots of data
+ * about their vertices, surface normals, colors, and so on. Complex 3D shapes
+ * can use lots of memory which is a limited resource in many GPUs. Calling
+ * `freeGeometry()` can improve performance by freeing a
+ * p5.Geometry object’s resources from GPU memory.
+ * `freeGeometry()` works with p5.Geometry objects
+ * created with beginGeometry() and
+ * endGeometry(),
+ * buildGeometry(), and
+ * loadModel().
+ *
+ * The parameter, `geometry`, is the p5.Geometry
+ * object to be freed.
+ *
+ * Note: A p5.Geometry object can still be drawn
+ * after its resources are cleared from GPU memory. It may take longer to draw
+ * the first time it’s redrawn.
+ *
+ * Note: `freeGeometry()` can only be used in WebGL mode.
+ *
+ * @method freeGeometry
+ * @param {p5.Geometry} geometry 3D shape whose resources should be freed.
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let button;
+ * let particles;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a button to reset the particle system.
+ * button = createButton('Reset');
+ *
+ * // Call resetModel() when the user presses the button.
+ * button.mousePressed(resetModel);
+ *
+ * // Add the original set of particles.
+ * resetModel();
+ *
+ * describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the particles.
+ * noStroke();
+ *
+ * // Draw the particles.
+ * model(particles);
+ * }
+ *
+ * function resetModel() {
+ * // If the p5.Geometry object has already been created,
+ * // free those resources.
+ * if (particles) {
+ * freeGeometry(particles);
+ * }
+ *
+ * // Create a new p5.Geometry object with random spheres.
+ * particles = buildGeometry(createParticles);
+ * }
+ *
+ * function createParticles() {
+ * for (let i = 0; i < 60; i += 1) {
+ * // Calculate random coordinates.
+ * let x = randomGaussian(0, 20);
+ * let y = randomGaussian(0, 20);
+ * let z = randomGaussian(0, 20);
+ *
+ * push();
+ * // Translate to the particle's coordinates.
+ * translate(x, y, z);
+ * // Draw the particle.
+ * sphere(5);
+ * pop();
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create a p5.Geometry object.
+ * beginGeometry();
+ * cone();
+ * let shape = endGeometry();
+ *
+ * // Draw the shape.
+ * model(shape);
+ *
+ * // Free the shape's resources.
+ * freeGeometry(shape);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.freeGeometry = function (geometry) {
+ this._renderer._freeBuffers(geometry.gid);
+ };
+ /**
+ * Draws a plane.
+ *
+ * A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
+ * similar to a rectangle and offers advanced drawing features in WebGL mode.
+ *
+ * The first parameter, `width`, is optional. If a `Number` is passed, as in
+ * `plane(20)`, it sets the plane’s width and height. By default, `width` is
+ * 50.
+ *
+ * The second parameter, `height`, is also optional. If a `Number` is passed,
+ * as in `plane(20, 30)`, it sets the plane’s height. By default, `height` is
+ * set to the plane’s `width`.
+ *
+ * The third parameter, `detailX`, is also optional. If a `Number` is passed,
+ * as in `plane(20, 30, 5)` it sets the number of triangle subdivisions to use
+ * along the x-axis. All 3D shapes are made by connecting triangles to form
+ * their surfaces. By default, `detailX` is 1.
+ *
+ * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
+ * as in `plane(20, 30, 5, 7)` it sets the number of triangle subdivisions to
+ * use along the y-axis. All 3D shapes are made by connecting triangles to
+ * form their surfaces. By default, `detailY` is 1.
+ *
+ * Note: `plane()` can only be used in WebGL mode.
+ *
+ * @method plane
+ * @param {Number} [width] width of the plane.
+ * @param {Number} [height] height of the plane.
+ * @param {Integer} [detailX] number of triangle subdivisions along the x-axis.
+ * @param {Integer} [detailY] number of triangle subdivisions along the y-axis.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let button;
+ * let particles;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a button to reset the particle system.
+ * button = createButton('Reset');
+ *
+ * // Call resetModel() when the user presses the button.
+ * button.mousePressed(resetModel);
+ *
+ * // Add the original set of particles.
+ * resetModel();
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the particles.
+ * noStroke();
+ *
+ * // Draw the particles.
+ * model(particles);
+ * }
+ *
+ * function resetModel() {
+ * // If the p5.Geometry object has already been created,
+ * // free those resources.
+ * if (particles) {
+ * freeGeometry(particles);
+ * }
+ *
+ * // Create a new p5.Geometry object with random spheres.
+ * particles = buildGeometry(createParticles);
+ * }
+ *
+ * function createParticles() {
+ * for (let i = 0; i < 60; i += 1) {
+ * // Calculate random coordinates.
+ * let x = randomGaussian(0, 20);
+ * let y = randomGaussian(0, 20);
+ * let z = randomGaussian(0, 20);
+ *
+ * push();
+ * // Translate to the particle's coordinates.
+ * translate(x, y, z);
+ * // Draw the particle.
+ * sphere(5);
+ * pop();
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white plane on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the plane.
+ * plane();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white plane on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the plane.
+ * // Set its width and height to 30.
+ * plane(30);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.plane = function () {
+ var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+ var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : width;
+ var detailX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+ var detailY = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+ this._assert3d('plane');
+ _main.default._validateParameters('plane', arguments);
+ var gId = 'plane|'.concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _plane = function _plane() {
+ var u,
+ v,
+ p;
+ for (var i = 0; i <= this.detailY; i++) {
+ v = i / this.detailY;
+ for (var j = 0; j <= this.detailX; j++) {
+ u = j / this.detailX;
+ p = new _main.default.Vector(u - 0.5, v - 0.5, 0);
+ this.vertices.push(p);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var planeGeom = new _main.default.Geometry(detailX, detailY, _plane);
+ planeGeom.computeFaces().computeNormals();
+ if (detailX <= 1 && detailY <= 1) {
+ planeGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on plane objects with more' + ' than 1 detailX or 1 detailY');
+ }
+ this._renderer.createBuffers(gId, planeGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, width, height, 1);
+ return this;
+ };
+ /**
+ * Draws a box (rectangular prism).
+ *
+ * A box is a 3D shape with six faces. Each face makes a 90˚ with four
+ * neighboring faces.
+ *
+ * The first parameter, `width`, is optional. If a `Number` is passed, as in
+ * `box(20)`, it sets the box’s width and height. By default, `width` is 50.
+ *
+ * The second parameter, `height`, is also optional. If a `Number` is passed,
+ * as in `box(20, 30)`, it sets the box’s height. By default, `height` is set
+ * to the box’s `width`.
+ *
+ * The third parameter, `depth`, is also optional. If a `Number` is passed, as
+ * in `box(20, 30, 40)`, it sets the box’s depth. By default, `depth` is set
+ * to the box’s `height`.
+ *
+ * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
+ * as in `box(20, 30, 40, 5)`, it sets the number of triangle subdivisions to
+ * use along the x-axis. All 3D shapes are made by connecting triangles to
+ * form their surfaces. By default, `detailX` is 1.
+ *
+ * The fifth parameter, `detailY`, is also optional. If a number is passed, as
+ * in `box(20, 30, 40, 5, 7)`, it sets the number of triangle subdivisions to
+ * use along the y-axis. All 3D shapes are made by connecting triangles to
+ * form their surfaces. By default, `detailY` is 1.
+ *
+ * Note: `box()` can only be used in WebGL mode.
+ *
+ * @method box
+ * @param {Number} [width] width of the box.
+ * @param {Number} [height] height of the box.
+ * @param {Number} [depth] depth of the box.
+ * @param {Integer} [detailX] number of triangle subdivisions along the x-axis.
+ * @param {Integer} [detailY] number of triangle subdivisions along the y-axis.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white plane on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the plane.
+ * // Set its width to 30 and height to 50.
+ * plane(30, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white box on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white box on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the box.
+ * // Set its width and height to 30.
+ * box(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white box on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the box.
+ * // Set its width to 30 and height to 50.
+ * box(30, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.box = function (width, height, depth, detailX, detailY) {
+ this._assert3d('box');
+ _main.default._validateParameters('box', arguments);
+ if (typeof width === 'undefined') {
+ width = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = width;
+ }
+ if (typeof depth === 'undefined') {
+ depth = height;
+ }
+ var perPixelLighting = this._renderer.attributes && this._renderer.attributes.perPixelLighting;
+ if (typeof detailX === 'undefined') {
+ detailX = perPixelLighting ? 1 : 4;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = perPixelLighting ? 1 : 4;
+ }
+ var gId = 'box|'.concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _box = function _box() {
+ var _this = this;
+ var cubeIndices = [
+ [0,
+ 4,
+ 2,
+ 6],
+ // -1, 0, 0],// -x
+ [
+ 1,
+ 3,
+ 5,
+ 7
+ ],
+ // +1, 0, 0],// +x
+ [
+ 0,
+ 1,
+ 4,
+ 5
+ ],
+ // 0, -1, 0],// -y
+ [
+ 2,
+ 6,
+ 3,
+ 7
+ ],
+ // 0, +1, 0],// +y
+ [
+ 0,
+ 2,
+ 1,
+ 3
+ ],
+ // 0, 0, -1],// -z
+ [
+ 4,
+ 5,
+ 6,
+ 7
+ ] // 0, 0, +1] // +z
+ ];
+ //using custom edges
+ //to avoid diagonal stroke lines across face of box
+ this.edges = [
+ [0,
+ 1],
+ [
+ 1,
+ 3
+ ],
+ [
+ 3,
+ 2
+ ],
+ [
+ 6,
+ 7
+ ],
+ [
+ 8,
+ 9
+ ],
+ [
+ 9,
+ 11
+ ],
+ [
+ 14,
+ 15
+ ],
+ [
+ 16,
+ 17
+ ],
+ [
+ 17,
+ 19
+ ],
+ [
+ 18,
+ 19
+ ],
+ [
+ 20,
+ 21
+ ],
+ [
+ 22,
+ 23
+ ]
+ ];
+ cubeIndices.forEach(function (cubeIndex, i) {
+ var v = i * 4;
+ for (var j = 0; j < 4; j++) {
+ var d = cubeIndex[j];
+ //inspired by lightgl:
+ //https://github.com/evanw/lightgl.js
+ //octants:https://en.wikipedia.org/wiki/Octant_(solid_geometry)
+ var octant = new _main.default.Vector(((d & 1) * 2 - 1) / 2, ((d & 2) - 1) / 2, ((d & 4) / 2 - 1) / 2);
+ _this.vertices.push(octant);
+ _this.uvs.push(j & 1, (j & 2) / 2);
+ }
+ _this.faces.push([v,
+ v + 1,
+ v + 2]);
+ _this.faces.push([v + 2,
+ v + 1,
+ v + 3]);
+ });
+ };
+ var boxGeom = new _main.default.Geometry(detailX, detailY, _box);
+ boxGeom.computeNormals();
+ if (detailX <= 4 && detailY <= 4) {
+ boxGeom._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on box objects with more' + ' than 4 detailX or 4 detailY');
+ } //initialize our geometry buffer with
+ //the key val pair:
+ //geometry Id, Geom object
+
+ this._renderer.createBuffers(gId, boxGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, width, height, depth);
+ return this;
+ };
+ /**
+ * Draws a sphere.
+ *
+ * A sphere is a 3D shape with triangular faces that connect to form a round
+ * surface. Spheres with few faces look like crystals. Spheres with many faces
+ * have smooth surfaces and look like balls.
+ *
+ * The first parameter, `radius`, is optional. If a `Number` is passed, as in
+ * `sphere(20)`, it sets the radius of the sphere. By default, `radius` is 50.
+ *
+ * The second parameter, `detailX`, is also optional. If a `Number` is passed,
+ * as in `sphere(20, 5)`, it sets the number of triangle subdivisions to use
+ * along the x-axis. All 3D shapes are made by connecting triangles to form
+ * their surfaces. By default, `detailX` is 24.
+ *
+ * The third parameter, `detailY`, is also optional. If a `Number` is passed,
+ * as in `sphere(20, 5, 2)`, it sets the number of triangle subdivisions to
+ * use along the y-axis. All 3D shapes are made by connecting triangles to
+ * form their surfaces. By default, `detailY` is 16.
+ *
+ * Note: `sphere()` can only be used in WebGL mode.
+ *
+ * @method sphere
+ * @param {Number} [radius] radius of the sphere. Defaults to 50.
+ * @param {Integer} [detailX] number of triangle subdivisions along the x-axis. Defaults to 24.
+ * @param {Integer} [detailY] number of triangle subdivisions along the y-axis. Defaults to 16.
+ *
+ * @chainable
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white box on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the box.
+ * // Set its width to 30, height to 50, and depth to 10.
+ * box(30, 50, 10);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white sphere on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the sphere.
+ * sphere();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white sphere on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the sphere.
+ * // Set its radius to 30.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white sphere on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the sphere.
+ * // Set its radius to 30.
+ * // Set its detailX to 6.
+ * sphere(30, 6);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.sphere = function () {
+ var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+ var detailX = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 24;
+ var detailY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16;
+ this._assert3d('sphere');
+ _main.default._validateParameters('sphere', arguments);
+ this.ellipsoid(radius, radius, radius, detailX, detailY);
+ return this;
+ };
+ /**
+ * @private
+ * Helper function for creating both cones and cylinders
+ * Will only generate well-defined geometry when bottomRadius, height > 0
+ * and topRadius >= 0
+ * If topRadius == 0, topCap should be false
+ */
+ var _truncatedCone = function _truncatedCone(bottomRadius, topRadius, height, detailX, detailY, bottomCap, topCap) {
+ bottomRadius = bottomRadius <= 0 ? 1 : bottomRadius;
+ topRadius = topRadius < 0 ? 0 : topRadius;
+ height = height <= 0 ? bottomRadius : height;
+ detailX = detailX < 3 ? 3 : detailX;
+ detailY = detailY < 1 ? 1 : detailY;
+ bottomCap = bottomCap === undefined ? true : bottomCap;
+ topCap = topCap === undefined ? topRadius !== 0 : topCap;
+ var start = bottomCap ? - 2 : 0;
+ var end = detailY + (topCap ? 2 : 0);
+ //ensure constant slant for interior vertex normals
+ var slant = Math.atan2(bottomRadius - topRadius, height);
+ var sinSlant = Math.sin(slant);
+ var cosSlant = Math.cos(slant);
+ var yy,
+ ii,
+ jj;
+ for (yy = start; yy <= end; ++yy) {
+ var v = yy / detailY;
+ var y = height * v;
+ var ringRadius = void 0;
+ if (yy < 0) {
+ //for the bottomCap edge
+ y = 0;
+ v = 0;
+ ringRadius = bottomRadius;
+ } else if (yy > detailY) {
+ //for the topCap edge
+ y = height;
+ v = 1;
+ ringRadius = topRadius;
+ } else {
+ //for the middle
+ ringRadius = bottomRadius + (topRadius - bottomRadius) * v;
+ }
+ if (yy === - 2 || yy === detailY + 2) {
+ //center of bottom or top caps
+ ringRadius = 0;
+ }
+ y -= height / 2; //shift coordiate origin to the center of object
+ for (ii = 0; ii < detailX; ++ii) {
+ var u = ii / (detailX - 1);
+ var ur = 2 * Math.PI * u;
+ var sur = Math.sin(ur);
+ var cur = Math.cos(ur);
+ //VERTICES
+ this.vertices.push(new _main.default.Vector(sur * ringRadius, y, cur * ringRadius));
+ //VERTEX NORMALS
+ var vertexNormal = void 0;
+ if (yy < 0) {
+ vertexNormal = new _main.default.Vector(0, - 1, 0);
+ } else if (yy > detailY && topRadius) {
+ vertexNormal = new _main.default.Vector(0, 1, 0);
+ } else {
+ vertexNormal = new _main.default.Vector(sur * cosSlant, sinSlant, cur * cosSlant);
+ }
+ this.vertexNormals.push(vertexNormal);
+ //UVs
+ this.uvs.push(u, v);
+ }
+ }
+ var startIndex = 0;
+ if (bottomCap) {
+ for (jj = 0; jj < detailX; ++jj) {
+ var nextjj = (jj + 1) % detailX;
+ this.faces.push([startIndex + jj,
+ startIndex + detailX + nextjj,
+ startIndex + detailX + jj]);
+ }
+ startIndex += detailX * 2;
+ }
+ for (yy = 0; yy < detailY; ++yy) {
+ for (ii = 0; ii < detailX; ++ii) {
+ var nextii = (ii + 1) % detailX;
+ this.faces.push([startIndex + ii,
+ startIndex + nextii,
+ startIndex + detailX + nextii]);
+ this.faces.push([startIndex + ii,
+ startIndex + detailX + nextii,
+ startIndex + detailX + ii]);
+ }
+ startIndex += detailX;
+ }
+ if (topCap) {
+ startIndex += detailX;
+ for (ii = 0; ii < detailX; ++ii) {
+ this.faces.push([startIndex + ii,
+ startIndex + (ii + 1) % detailX,
+ startIndex + detailX]);
+ }
+ }
+ };
+ /**
+ * Draws a cylinder.
+ *
+ * A cylinder is a 3D shape with triangular faces that connect a flat bottom
+ * to a flat top. Cylinders with few faces look like boxes. Cylinders with
+ * many faces have smooth surfaces.
+ *
+ * The first parameter, `radius`, is optional. If a `Number` is passed, as in
+ * `cylinder(20)`, it sets the radius of the cylinder’s base. By default,
+ * `radius` is 50.
+ *
+ * The second parameter, `height`, is also optional. If a `Number` is passed,
+ * as in `cylinder(20, 30)`, it sets the cylinder’s height. By default,
+ * `height` is set to the cylinder’s `radius`.
+ *
+ * The third parameter, `detailX`, is also optional. If a `Number` is passed,
+ * as in `cylinder(20, 30, 5)`, it sets the number of edges used to form the
+ * cylinder's top and bottom. Using more edges makes the top and bottom look
+ * more like circles. By default, `detailX` is 24.
+ *
+ * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
+ * as in `cylinder(20, 30, 5, 2)`, it sets the number of triangle subdivisions
+ * to use along the y-axis, between cylinder's the top and bottom. All 3D
+ * shapes are made by connecting triangles to form their surfaces. By default,
+ * `detailY` is 1.
+ *
+ * The fifth parameter, `bottomCap`, is also optional. If a `false` is passed,
+ * as in `cylinder(20, 30, 5, 2, false)` the cylinder’s bottom won’t be drawn.
+ * By default, `bottomCap` is `true`.
+ *
+ * The sixth parameter, `topCap`, is also optional. If a `false` is passed, as
+ * in `cylinder(20, 30, 5, 2, false, false)` the cylinder’s top won’t be
+ * drawn. By default, `topCap` is `true`.
+ *
+ * Note: `cylinder()` can only be used in WebGL mode.
+ *
+ * @method cylinder
+ * @param {Number} [radius] radius of the cylinder. Defaults to 50.
+ * @param {Number} [height] height of the cylinder. Defaults to the value of `radius`.
+ * @param {Integer} [detailX] number of edges along the top and bottom. Defaults to 24.
+ * @param {Integer} [detailY] number of triangle subdivisions along the y-axis. Defaults to 1.
+ * @param {Boolean} [bottomCap] whether to draw the cylinder's bottom. Defaults to `true`.
+ * @param {Boolean} [topCap] whether to draw the cylinder's top. Defaults to `true`.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white sphere on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the sphere.
+ * // Set its radius to 30.
+ * // Set its detailX to 24.
+ * // Set its detailY to 4.
+ * sphere(30, 24, 4);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cylinder on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cylinder.
+ * cylinder();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cylinder on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cylinder.
+ * // Set its radius and height to 30.
+ * cylinder(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cylinder on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cylinder.
+ * // Set its radius to 30 and height to 50.
+ * cylinder(30, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white box on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cylinder.
+ * // Set its radius to 30 and height to 50.
+ * // Set its detailX to 5.
+ * cylinder(30, 50, 5);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cylinder on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cylinder.
+ * // Set its radius to 30 and height to 50.
+ * // Set its detailX to 24 and detailY to 2.
+ * cylinder(30, 50, 24, 2);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cylinder on a gray background. Its top is missing.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cylinder.
+ * // Set its radius to 30 and height to 50.
+ * // Set its detailX to 24 and detailY to 1.
+ * // Don't draw its bottom.
+ * cylinder(30, 50, 24, 1, false);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.cylinder = function () {
+ var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+ var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : radius;
+ var detailX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 24;
+ var detailY = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+ var bottomCap = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+ var topCap = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+ this._assert3d('cylinder');
+ _main.default._validateParameters('cylinder', arguments);
+ var gId = 'cylinder|'.concat(detailX, '|').concat(detailY, '|').concat(bottomCap, '|').concat(topCap);
+ if (!this._renderer.geometryInHash(gId)) {
+ var cylinderGeom = new _main.default.Geometry(detailX, detailY);
+ _truncatedCone.call(cylinderGeom, 1, 1, 1, detailX, detailY, bottomCap, topCap);
+ // normals are computed in call to _truncatedCone
+ if (detailX <= 24 && detailY <= 16) {
+ cylinderGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on cylinder objects with more' + ' than 24 detailX or 16 detailY');
+ }
+ this._renderer.createBuffers(gId, cylinderGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radius, height, radius);
+ return this;
+ };
+ /**
+ * Draws a cone.
+ *
+ * A cone is a 3D shape with triangular faces that connect a flat bottom to a
+ * single point. Cones with few faces look like pyramids. Cones with many
+ * faces have smooth surfaces.
+ *
+ * The first parameter, `radius`, is optional. If a `Number` is passed, as in
+ * `cone(20)`, it sets the radius of the cone’s base. By default, `radius` is
+ * 50.
+ *
+ * The second parameter, `height`, is also optional. If a `Number` is passed,
+ * as in `cone(20, 30)`, it sets the cone’s height. By default, `height` is
+ * set to the cone’s `radius`.
+ *
+ * The third parameter, `detailX`, is also optional. If a `Number` is passed,
+ * as in `cone(20, 30, 5)`, it sets the number of edges used to form the
+ * cone's base. Using more edges makes the base look more like a circle. By
+ * default, `detailX` is 24.
+ *
+ * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
+ * as in `cone(20, 30, 5, 7)`, it sets the number of triangle subdivisions to
+ * use along the y-axis connecting the base to the tip. All 3D shapes are made
+ * by connecting triangles to form their surfaces. By default, `detailY` is 1.
+ *
+ * The fifth parameter, `cap`, is also optional. If a `false` is passed, as
+ * in `cone(20, 30, 5, 7, false)` the cone’s base won’t be drawn. By default,
+ * `cap` is `true`.
+ *
+ * Note: `cone()` can only be used in WebGL mode.
+ *
+ * @method cone
+ * @param {Number} [radius] radius of the cone's base. Defaults to 50.
+ * @param {Number} [height] height of the cone. Defaults to the value of `radius`.
+ * @param {Integer} [detailX] number of edges used to draw the base. Defaults to 24.
+ * @param {Integer} [detailY] number of triangle subdivisions along the y-axis. Defaults to 1.
+ * @param {Boolean} [cap] whether to draw the cone's base. Defaults to `true`.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cylinder on a gray background. Its top and bottom are missing.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cylinder.
+ * // Set its radius to 30 and height to 50.
+ * // Set its detailX to 24 and detailY to 1.
+ * // Don't draw its bottom or top.
+ * cylinder(30, 50, 24, 1, false, false);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cone on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cone.
+ * cone();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cone on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cone.
+ * // Set its radius and height to 30.
+ * cone(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cone on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cone.
+ * // Set its radius to 30 and height to 50.
+ * cone(30, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cone on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cone.
+ * // Set its radius to 30 and height to 50.
+ * // Set its detailX to 5.
+ * cone(30, 50, 5);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white pyramid on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cone.
+ * // Set its radius to 30 and height to 50.
+ * // Set its detailX to 5.
+ * cone(30, 50, 5);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cone on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cone.
+ * // Set its radius to 30 and height to 50.
+ * // Set its detailX to 24 and detailY to 2.
+ * cone(30, 50, 24, 2);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.cone = function () {
+ var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+ var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : radius;
+ var detailX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 24;
+ var detailY = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+ var cap = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+ this._assert3d('cone');
+ _main.default._validateParameters('cone', arguments);
+ var gId = 'cone|'.concat(detailX, '|').concat(detailY, '|').concat(cap);
+ if (!this._renderer.geometryInHash(gId)) {
+ var coneGeom = new _main.default.Geometry(detailX, detailY);
+ _truncatedCone.call(coneGeom, 1, 0, 1, detailX, detailY, cap, false);
+ if (detailX <= 24 && detailY <= 16) {
+ coneGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on cone objects with more' + ' than 24 detailX or 16 detailY');
+ }
+ this._renderer.createBuffers(gId, coneGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radius, height, radius);
+ return this;
+ };
+ /**
+ * Draws an ellipsoid.
+ *
+ * An ellipsoid is a 3D shape with triangular faces that connect to form a
+ * round surface. Ellipsoids with few faces look like crystals. Ellipsoids
+ * with many faces have smooth surfaces and look like eggs. `ellipsoid()`
+ * defines a shape by its radii. This is different from
+ * ellipse() which uses diameters
+ * (width and height).
+ *
+ * The first parameter, `radiusX`, is optional. If a `Number` is passed, as in
+ * `ellipsoid(20)`, it sets the radius of the ellipsoid along the x-axis. By
+ * default, `radiusX` is 50.
+ *
+ * The second parameter, `radiusY`, is also optional. If a `Number` is passed,
+ * as in `ellipsoid(20, 30)`, it sets the ellipsoid’s radius along the y-axis.
+ * By default, `radiusY` is set to the ellipsoid’s `radiusX`.
+ *
+ * The third parameter, `radiusZ`, is also optional. If a `Number` is passed,
+ * as in `ellipsoid(20, 30, 40)`, it sets the ellipsoid’s radius along the
+ * z-axis. By default, `radiusZ` is set to the ellipsoid’s `radiusY`.
+ *
+ * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
+ * as in `ellipsoid(20, 30, 40, 5)`, it sets the number of triangle
+ * subdivisions to use along the x-axis. All 3D shapes are made by connecting
+ * triangles to form their surfaces. By default, `detailX` is 24.
+ *
+ * The fifth parameter, `detailY`, is also optional. If a `Number` is passed,
+ * as in `ellipsoid(20, 30, 40, 5, 7)`, it sets the number of triangle
+ * subdivisions to use along the y-axis. All 3D shapes are made by connecting
+ * triangles to form their surfaces. By default, `detailY` is 16.
+ *
+ * Note: `ellipsoid()` can only be used in WebGL mode.
+ *
+ * @method ellipsoid
+ * @param {Number} [radiusX] radius of the ellipsoid along the x-axis. Defaults to 50.
+ * @param {Number} [radiusY] radius of the ellipsoid along the y-axis. Defaults to `radiusX`.
+ * @param {Number} [radiusZ] radius of the ellipsoid along the z-axis. Defaults to `radiusY`.
+ * @param {Integer} [detailX] number of triangle subdivisions along the x-axis. Defaults to 24.
+ * @param {Integer} [detailY] number of triangle subdivisions along the y-axis. Defaults to 16.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cone on a gray background. Its base is missing.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the cone.
+ * // Set its radius to 30 and height to 50.
+ * // Set its detailX to 24 and detailY to 1.
+ * // Don't draw its base.
+ * cone(30, 50, 24, 1, false);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white sphere on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the ellipsoid.
+ * // Set its radiusX to 30.
+ * ellipsoid(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white ellipsoid on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the ellipsoid.
+ * // Set its radiusX to 30.
+ * // Set its radiusY to 40.
+ * ellipsoid(30, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white ellipsoid on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the ellipsoid.
+ * // Set its radiusX to 30.
+ * // Set its radiusY to 40.
+ * // Set its radiusZ to 50.
+ * ellipsoid(30, 40, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white ellipsoid on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the ellipsoid.
+ * // Set its radiusX to 30.
+ * // Set its radiusY to 40.
+ * // Set its radiusZ to 50.
+ * // Set its detailX to 4.
+ * ellipsoid(30, 40, 50, 4);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.ellipsoid = function () {
+ var radiusX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+ var radiusY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : radiusX;
+ var radiusZ = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : radiusX;
+ var detailX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 24;
+ var detailY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 16;
+ this._assert3d('ellipsoid');
+ _main.default._validateParameters('ellipsoid', arguments);
+ var gId = 'ellipsoid|'.concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _ellipsoid = function _ellipsoid() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ var phi = Math.PI * v - Math.PI / 2;
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var theta = 2 * Math.PI * u;
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+ var p = new _main.default.Vector(cosPhi * sinTheta, sinPhi, cosPhi * cosTheta);
+ this.vertices.push(p);
+ this.vertexNormals.push(p);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var ellipsoidGeom = new _main.default.Geometry(detailX, detailY, _ellipsoid);
+ ellipsoidGeom.computeFaces();
+ if (detailX <= 24 && detailY <= 24) {
+ ellipsoidGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on ellipsoids with more' + ' than 24 detailX or 24 detailY');
+ }
+ this._renderer.createBuffers(gId, ellipsoidGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radiusX, radiusY, radiusZ);
+ return this;
+ };
+ /**
+ * Draws a torus.
+ *
+ * A torus is a 3D shape with triangular faces that connect to form a ring.
+ * Toruses with few faces look flattened. Toruses with many faces have smooth
+ * surfaces.
+ *
+ * The first parameter, `radius`, is optional. If a `Number` is passed, as in
+ * `torus(30)`, it sets the radius of the ring. By default, `radius` is 50.
+ *
+ * The second parameter, `tubeRadius`, is also optional. If a `Number` is
+ * passed, as in `torus(30, 15)`, it sets the radius of the tube. By default,
+ * `tubeRadius` is 10.
+ *
+ * The third parameter, `detailX`, is also optional. If a `Number` is passed,
+ * as in `torus(30, 15, 5)`, it sets the number of edges used to draw the hole
+ * of the torus. Using more edges makes the hole look more like a circle. By
+ * default, `detailX` is 24.
+ *
+ * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
+ * as in `torus(30, 15, 5, 7)`, it sets the number of triangle subdivisions to
+ * use while filling in the torus’ height. By default, `detailY` is 16.
+ *
+ * Note: `torus()` can only be used in WebGL mode.
+ *
+ * @method torus
+ * @param {Number} [radius] radius of the torus. Defaults to 50.
+ * @param {Number} [tubeRadius] radius of the tube. Defaults to 10.
+ * @param {Integer} [detailX] number of edges that form the hole. Defaults to 24.
+ * @param {Integer} [detailY] number of triangle subdivisions along the y-axis. Defaults to 16.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white ellipsoid on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the ellipsoid.
+ * // Set its radiusX to 30.
+ * // Set its radiusY to 40.
+ * // Set its radiusZ to 50.
+ * // Set its detailX to 4.
+ * // Set its detailY to 3.
+ * ellipsoid(30, 40, 50, 4, 3);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white torus on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the torus.
+ * torus();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white torus on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the torus.
+ * // Set its radius to 30.
+ * torus(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white torus on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the torus.
+ * // Set its radius to 30 and tubeRadius to 15.
+ * torus(30, 15);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white torus on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the torus.
+ * // Set its radius to 30 and tubeRadius to 15.
+ * // Set its detailX to 5.
+ * torus(30, 15, 5);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.torus = function (radius, tubeRadius, detailX, detailY) {
+ this._assert3d('torus');
+ _main.default._validateParameters('torus', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ } else if (!radius) {
+ return; // nothing to draw
+ }
+ if (typeof tubeRadius === 'undefined') {
+ tubeRadius = 10;
+ } else if (!tubeRadius) {
+ return; // nothing to draw
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 16;
+ }
+ var tubeRatio = (tubeRadius / radius).toPrecision(4);
+ var gId = 'torus|'.concat(tubeRatio, '|').concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _torus = function _torus() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ var phi = 2 * Math.PI * v;
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+ var r = 1 + tubeRatio * cosPhi;
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var theta = 2 * Math.PI * u;
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+ var p = new _main.default.Vector(r * cosTheta, r * sinTheta, tubeRatio * sinPhi);
+ var n = new _main.default.Vector(cosPhi * cosTheta, cosPhi * sinTheta, sinPhi);
+ this.vertices.push(p);
+ this.vertexNormals.push(n);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var torusGeom = new _main.default.Geometry(detailX, detailY, _torus);
+ torusGeom.computeFaces();
+ if (detailX <= 24 && detailY <= 16) {
+ torusGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw strokes on torus object with more' + ' than 24 detailX or 16 detailY');
+ }
+ this._renderer.createBuffers(gId, torusGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radius, radius, radius);
+ return this;
+ };
+ ///////////////////////
+ /// 2D primitives
+ /////////////////////////
+ //
+ // Note: Documentation is not generated on the p5.js website for functions on
+ // the p5.RendererGL prototype.
+ /**
+ * Draws a point, a coordinate in space at the dimension of one pixel,
+ * given x, y and z coordinates. The color of the point is determined
+ * by the current stroke, while the point size is determined by current
+ * stroke weight.
+ * @private
+ * @param {Number} x x-coordinate of point
+ * @param {Number} y y-coordinate of point
+ * @param {Number} z z-coordinate of point
+ * @chainable
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white torus on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the torus.
+ * // Set its radius to 30 and tubeRadius to 15.
+ * // Set its detailX to 5.
+ * // Set its detailY to 3.
+ * torus(30, 15, 5, 3);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.RendererGL.prototype.point = function (x, y) {
+ var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+ var _vertex = [
+ ];
+ _vertex.push(new _main.default.Vector(x, y, z));
+ this._drawPoints(_vertex, this.immediateMode.buffers.point);
+ return this;
+ };
+ _main.default.RendererGL.prototype.triangle = function (args) {
+ var x1 = args[0],
+ y1 = args[1];
+ var x2 = args[2],
+ y2 = args[3];
+ var x3 = args[4],
+ y3 = args[5];
+ var gId = 'tri';
+ if (!this.geometryInHash(gId)) {
+ var _triangle = function _triangle() {
+ var vertices = [
+ ];
+ vertices.push(new _main.default.Vector(0, 0, 0));
+ vertices.push(new _main.default.Vector(1, 0, 0));
+ vertices.push(new _main.default.Vector(0, 1, 0));
+ this.edges = [
+ [0,
+ 1],
+ [
+ 1,
+ 2
+ ],
+ [
+ 2,
+ 0
+ ]
+ ];
+ this.vertices = vertices;
+ this.faces = [
+ [0,
+ 1,
+ 2]
+ ];
+ this.uvs = [
+ 0,
+ 0,
+ 1,
+ 0,
+ 1,
+ 1
+ ];
+ };
+ var triGeom = new _main.default.Geometry(1, 1, _triangle);
+ triGeom._edgesToVertices();
+ triGeom.computeNormals();
+ this.createBuffers(gId, triGeom);
+ } // only one triangle is cached, one point is at the origin, and the
+ // two adjacent sides are tne unit vectors along the X & Y axes.
+ //
+ // this matrix multiplication transforms those two unit vectors
+ // onto the required vector prior to rendering, and moves the
+ // origin appropriately.
+
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ // triangle orientation.
+ var orientation = Math.sign(x1 * y2 - x2 * y1 + x2 * y3 - x3 * y2 + x3 * y1 - x1 * y3);
+ var mult = new _main.default.Matrix([x2 - x1,
+ y2 - y1,
+ 0,
+ 0,
+ // the resulting unit X-axis
+ x3 - x1,
+ y3 - y1,
+ 0,
+ 0,
+ // the resulting unit Y-axis
+ 0,
+ 0,
+ orientation,
+ 0,
+ // the resulting unit Z-axis (Reflect the specified order of vertices)
+ x1,
+ y1,
+ 0,
+ 1 // the resulting origin
+ ]).mult(this.uMVMatrix);
+ this.uMVMatrix = mult;
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ return this;
+ };
+ _main.default.RendererGL.prototype.ellipse = function (args) {
+ this.arc(args[0], args[1], args[2], args[3], 0, constants.TWO_PI, constants.OPEN, args[4]);
+ };
+ _main.default.RendererGL.prototype.arc = function () {
+ var x = arguments.length <= 0 ? undefined : arguments[0];
+ var y = arguments.length <= 1 ? undefined : arguments[1];
+ var width = arguments.length <= 2 ? undefined : arguments[2];
+ var height = arguments.length <= 3 ? undefined : arguments[3];
+ var start = arguments.length <= 4 ? undefined : arguments[4];
+ var stop = arguments.length <= 5 ? undefined : arguments[5];
+ var mode = arguments.length <= 6 ? undefined : arguments[6];
+ var detail = (arguments.length <= 7 ? undefined : arguments[7]) || 25;
+ var shape;
+ var gId;
+ // check if it is an ellipse or an arc
+ if (Math.abs(stop - start) >= constants.TWO_PI) {
+ shape = 'ellipse';
+ gId = ''.concat(shape, '|').concat(detail, '|');
+ } else {
+ shape = 'arc';
+ gId = ''.concat(shape, '|').concat(start, '|').concat(stop, '|').concat(mode, '|').concat(detail, '|');
+ }
+ if (!this.geometryInHash(gId)) {
+ var _arc = function _arc() {
+ // if the start and stop angles are not the same, push vertices to the array
+ if (start.toFixed(10) !== stop.toFixed(10)) {
+ // if the mode specified is PIE or null, push the mid point of the arc in vertices
+ if (mode === constants.PIE || typeof mode === 'undefined') {
+ this.vertices.push(new _main.default.Vector(0.5, 0.5, 0));
+ this.uvs.push([0.5,
+ 0.5]);
+ } // vertices for the perimeter of the circle
+
+ for (var i = 0; i <= detail; i++) {
+ var u = i / detail;
+ var theta = (stop - start) * u + start;
+ var _x = 0.5 + Math.cos(theta) / 2;
+ var _y = 0.5 + Math.sin(theta) / 2;
+ this.vertices.push(new _main.default.Vector(_x, _y, 0));
+ this.uvs.push([_x,
+ _y]);
+ if (i < detail - 1) {
+ this.faces.push([0,
+ i + 1,
+ i + 2]);
+ this.edges.push([i + 1,
+ i + 2]);
+ }
+ } // check the mode specified in order to push vertices and faces, different for each mode
+
+ switch (mode) {
+ case constants.PIE:
+ this.faces.push([0,
+ this.vertices.length - 2,
+ this.vertices.length - 1]);
+ this.edges.push([0,
+ 1]);
+ this.edges.push([this.vertices.length - 2,
+ this.vertices.length - 1]);
+ this.edges.push([0,
+ this.vertices.length - 1]);
+ break;
+ case constants.CHORD:
+ this.edges.push([0,
+ 1]);
+ this.edges.push([0,
+ this.vertices.length - 1]);
+ break;
+ case constants.OPEN:
+ this.edges.push([0,
+ 1]);
+ break;
+ default:
+ this.faces.push([0,
+ this.vertices.length - 2,
+ this.vertices.length - 1]);
+ this.edges.push([this.vertices.length - 2,
+ this.vertices.length - 1]);
+ }
+ }
+ };
+ var arcGeom = new _main.default.Geometry(detail, 1, _arc);
+ arcGeom.computeNormals();
+ if (detail <= 50) {
+ arcGeom._edgesToVertices(arcGeom);
+ } else if (this._doStroke) {
+ console.log('Cannot apply a stroke to an '.concat(shape, ' with more than 50 detail'));
+ }
+ this.createBuffers(gId, arcGeom);
+ }
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ this.uMVMatrix.translate([x,
+ y,
+ 0]);
+ this.uMVMatrix.scale(width, height, 1);
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ return this;
+ };
+ _main.default.RendererGL.prototype.rect = function (args) {
+ var x = args[0];
+ var y = args[1];
+ var width = args[2];
+ var height = args[3];
+ if (typeof args[4] === 'undefined') {
+ // Use the retained mode for drawing rectangle,
+ // if args for rounding rectangle is not provided by user.
+ var perPixelLighting = this._pInst._glAttributes.perPixelLighting;
+ var detailX = args[4] || (perPixelLighting ? 1 : 24);
+ var detailY = args[5] || (perPixelLighting ? 1 : 16);
+ var gId = 'rect|'.concat(detailX, '|').concat(detailY);
+ if (!this.geometryInHash(gId)) {
+ var _rect = function _rect() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var p = new _main.default.Vector(u, v, 0);
+ this.vertices.push(p);
+ this.uvs.push(u, v);
+ }
+ } // using stroke indices to avoid stroke over face(s) of rectangle
+
+ if (detailX > 0 && detailY > 0) {
+ this.edges = [
+ [0,
+ detailX],
+ [
+ detailX,
+ (detailX + 1) * (detailY + 1) - 1
+ ],
+ [
+ (detailX + 1) * (detailY + 1) - 1,
+ (detailX + 1) * detailY
+ ],
+ [
+ (detailX + 1) * detailY,
+ 0
+ ]
+ ];
+ }
+ };
+ var rectGeom = new _main.default.Geometry(detailX, detailY, _rect);
+ rectGeom.computeFaces().computeNormals()._edgesToVertices();
+ this.createBuffers(gId, rectGeom);
+ } // only a single rectangle (of a given detail) is cached: a square with
+ // opposite corners at (0,0) & (1,1).
+ //
+ // before rendering, this square is scaled & moved to the required location.
+
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ this.uMVMatrix.translate([x,
+ y,
+ 0]);
+ this.uMVMatrix.scale(width, height, 1);
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ } else {
+ // Use Immediate mode to round the rectangle corner,
+ // if args for rounding corners is provided by user
+ var tl = args[4];
+ var tr = typeof args[5] === 'undefined' ? tl : args[5];
+ var br = typeof args[6] === 'undefined' ? tr : args[6];
+ var bl = typeof args[7] === 'undefined' ? br : args[7];
+ var a = x;
+ var b = y;
+ var c = width;
+ var d = height;
+ c += a;
+ d += b;
+ if (a > c) {
+ var temp = a;
+ a = c;
+ c = temp;
+ }
+ if (b > d) {
+ var _temp = b;
+ b = d;
+ d = _temp;
+ }
+ var maxRounding = Math.min((c - a) / 2, (d - b) / 2);
+ if (tl > maxRounding) tl = maxRounding;
+ if (tr > maxRounding) tr = maxRounding;
+ if (br > maxRounding) br = maxRounding;
+ if (bl > maxRounding) bl = maxRounding;
+ var x1 = a;
+ var y1 = b;
+ var x2 = c;
+ var y2 = d;
+ this.beginShape();
+ if (tr !== 0) {
+ this.vertex(x2 - tr, y1);
+ this.quadraticVertex(x2, y1, x2, y1 + tr);
+ } else {
+ this.vertex(x2, y1);
+ }
+ if (br !== 0) {
+ this.vertex(x2, y2 - br);
+ this.quadraticVertex(x2, y2, x2 - br, y2);
+ } else {
+ this.vertex(x2, y2);
+ }
+ if (bl !== 0) {
+ this.vertex(x1 + bl, y2);
+ this.quadraticVertex(x1, y2, x1, y2 - bl);
+ } else {
+ this.vertex(x1, y2);
+ }
+ if (tl !== 0) {
+ this.vertex(x1, y1 + tl);
+ this.quadraticVertex(x1, y1, x1 + tl, y1);
+ } else {
+ this.vertex(x1, y1);
+ }
+ this.immediateMode.geometry.uvs.length = 0;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.immediateMode.geometry.vertices[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var vert = _step.value;
+ var u = (vert.x - x1) / width;
+ var v = (vert.y - y1) / height;
+ this.immediateMode.geometry.uvs.push(u, v);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ this.endShape(constants.CLOSE);
+ }
+ return this;
+ };
+ /* eslint-disable max-len */
+ _main.default.RendererGL.prototype.quad = function (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) {
+ var detailX = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : 2;
+ var detailY = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : 2;
+ /* eslint-enable max-len */
+ var gId = 'quad|'.concat(x1, '|').concat(y1, '|').concat(z1, '|').concat(x2, '|').concat(y2, '|').concat(z2, '|').concat(x3, '|').concat(y3, '|').concat(z3, '|').concat(x4, '|').concat(y4, '|').concat(z4, '|').concat(detailX, '|').concat(detailY);
+ if (!this.geometryInHash(gId)) {
+ var quadGeom = new _main.default.Geometry(detailX, detailY, function () {
+ //algorithm adapted from c++ to js
+ //https://stackoverflow.com/questions/16989181/whats-the-correct-way-to-draw-a-distorted-plane-in-opengl/16993202#16993202
+ var xRes = 1 / (this.detailX - 1);
+ var yRes = 1 / (this.detailY - 1);
+ for (var y = 0; y < this.detailY; y++) {
+ for (var x = 0; x < this.detailX; x++) {
+ var pctx = x * xRes;
+ var pcty = y * yRes;
+ var linePt0x = (1 - pcty) * x1 + pcty * x4;
+ var linePt0y = (1 - pcty) * y1 + pcty * y4;
+ var linePt0z = (1 - pcty) * z1 + pcty * z4;
+ var linePt1x = (1 - pcty) * x2 + pcty * x3;
+ var linePt1y = (1 - pcty) * y2 + pcty * y3;
+ var linePt1z = (1 - pcty) * z2 + pcty * z3;
+ var ptx = (1 - pctx) * linePt0x + pctx * linePt1x;
+ var pty = (1 - pctx) * linePt0y + pctx * linePt1y;
+ var ptz = (1 - pctx) * linePt0z + pctx * linePt1z;
+ this.vertices.push(new _main.default.Vector(ptx, pty, ptz));
+ this.uvs.push([pctx,
+ pcty]);
+ }
+ }
+ });
+ quadGeom.faces = [
+ ];
+ for (var y = 0; y < detailY - 1; y++) {
+ for (var x = 0; x < detailX - 1; x++) {
+ var pt0 = x + y * detailX;
+ var pt1 = x + 1 + y * detailX;
+ var pt2 = x + 1 + (y + 1) * detailX;
+ var pt3 = x + (y + 1) * detailX;
+ quadGeom.faces.push([pt0,
+ pt1,
+ pt2]);
+ quadGeom.faces.push([pt0,
+ pt2,
+ pt3]);
+ }
+ }
+ quadGeom.computeNormals();
+ quadGeom.edges.length = 0;
+ var vertexOrder = [
+ 0,
+ 2,
+ 3,
+ 1
+ ];
+ for (var i = 0; i < vertexOrder.length; i++) {
+ var startVertex = vertexOrder[i];
+ var endVertex = vertexOrder[(i + 1) % vertexOrder.length];
+ quadGeom.edges.push([startVertex,
+ endVertex]);
+ }
+ quadGeom._edgesToVertices();
+ this.createBuffers(gId, quadGeom);
+ }
+ this.drawBuffers(gId);
+ return this;
+ };
+ //this implementation of bezier curve
+ //is based on Bernstein polynomial
+ // pretier-ignore
+ _main.default.RendererGL.prototype.bezier = function (x1, y1, z1, // x2
+ x2, // y2
+ y2, // x3
+ z2, // y3
+ x3, // x4
+ y3, // y4
+ z3, x4, y4, z4) {
+ if (arguments.length === 8) {
+ y4 = y3;
+ x4 = x3;
+ y3 = z2;
+ x3 = y2;
+ y2 = x2;
+ x2 = z1;
+ z1 = z2 = z3 = z4 = 0;
+ }
+ var bezierDetail = this._pInst._bezierDetail || 20; //value of Bezier detail
+ this.beginShape();
+ for (var i = 0; i <= bezierDetail; i++) {
+ var c1 = Math.pow(1 - i / bezierDetail, 3);
+ var c2 = 3 * (i / bezierDetail) * Math.pow(1 - i / bezierDetail, 2);
+ var c3 = 3 * Math.pow(i / bezierDetail, 2) * (1 - i / bezierDetail);
+ var c4 = Math.pow(i / bezierDetail, 3);
+ this.vertex(x1 * c1 + x2 * c2 + x3 * c3 + x4 * c4, y1 * c1 + y2 * c2 + y3 * c3 + y4 * c4, z1 * c1 + z2 * c2 + z3 * c3 + z4 * c4);
+ }
+ this.endShape();
+ return this;
+ };
+ // pretier-ignore
+ _main.default.RendererGL.prototype.curve = function (x1, y1, z1, // x2
+ x2, // y2
+ y2, // x3
+ z2, // y3
+ x3, // x4
+ y3, // y4
+ z3, x4, y4, z4) {
+ if (arguments.length === 8) {
+ x4 = x3;
+ y4 = y3;
+ x3 = y2;
+ y3 = x2;
+ x2 = z1;
+ y2 = x2;
+ z1 = z2 = z3 = z4 = 0;
+ }
+ var curveDetail = this._pInst._curveDetail;
+ this.beginShape();
+ for (var i = 0; i <= curveDetail; i++) {
+ var c1 = Math.pow(i / curveDetail, 3) * 0.5;
+ var c2 = Math.pow(i / curveDetail, 2) * 0.5;
+ var c3 = i / curveDetail * 0.5;
+ var c4 = 0.5;
+ var vx = c1 * ( - x1 + 3 * x2 - 3 * x3 + x4) + c2 * (2 * x1 - 5 * x2 + 4 * x3 - x4) + c3 * ( - x1 + x3) + c4 * (2 * x2);
+ var vy = c1 * ( - y1 + 3 * y2 - 3 * y3 + y4) + c2 * (2 * y1 - 5 * y2 + 4 * y3 - y4) + c3 * ( - y1 + y3) + c4 * (2 * y2);
+ var vz = c1 * ( - z1 + 3 * z2 - 3 * z3 + z4) + c2 * (2 * z1 - 5 * z2 + 4 * z3 - z4) + c3 * ( - z1 + z3) + c4 * (2 * z2);
+ this.vertex(vx, vy, vz);
+ }
+ this.endShape();
+ return this;
+ };
+ /**
+ * Draw a line given two points
+ * @private
+ * @param {Number} x0 x-coordinate of first vertex
+ * @param {Number} y0 y-coordinate of first vertex
+ * @param {Number} z0 z-coordinate of first vertex
+ * @param {Number} x1 x-coordinate of second vertex
+ * @param {Number} y1 y-coordinate of second vertex
+ * @param {Number} z1 z-coordinate of second vertex
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(50);
+ * stroke(255);
+ * strokeWeight(4);
+ * point(25, 0);
+ * strokeWeight(3);
+ * point(-25, 0);
+ * strokeWeight(2);
+ * point(0, 25);
+ * strokeWeight(1);
+ * point(0, -25);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.RendererGL.prototype.line = function () {
+ if (arguments.length === 6) {
+ this.beginShape(constants.LINES);
+ this.vertex(arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2]);
+ this.vertex(arguments.length <= 3 ? undefined : arguments[3], arguments.length <= 4 ? undefined : arguments[4], arguments.length <= 5 ? undefined : arguments[5]);
+ this.endShape();
+ } else if (arguments.length === 4) {
+ this.beginShape(constants.LINES);
+ this.vertex(arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], 0);
+ this.vertex(arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3], 0);
+ this.endShape();
+ }
+ return this;
+ };
+ _main.default.RendererGL.prototype.bezierVertex = function () {
+ if (this.immediateMode._bezierVertex.length === 0) {
+ throw Error('vertex() must be used once before calling bezierVertex()');
+ } else {
+ var w_x = [
+ ];
+ var w_y = [
+ ];
+ var w_z = [
+ ];
+ var t,
+ _x,
+ _y,
+ _z,
+ i,
+ k,
+ m;
+ // variable i for bezierPoints, k for components, and m for anchor points.
+ var argLength = arguments.length;
+ t = 0;
+ if (this._lookUpTableBezier.length === 0 || this._lutBezierDetail !== this._pInst._curveDetail) {
+ this._lookUpTableBezier = [
+ ];
+ this._lutBezierDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutBezierDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+ var LUTLength = this._lookUpTableBezier.length;
+ // fillColors[0]: start point color
+ // fillColors[1],[2]: control point color
+ // fillColors[3]: end point color
+ var fillColors = [
+ ];
+ for (m = 0; m < 4; m++) {
+ fillColors.push([]);
+ }
+ fillColors[0] = this.immediateMode.geometry.vertexColors.slice( - 4);
+ fillColors[3] = this.curFillColor.slice();
+ // Do the same for strokeColor.
+ var strokeColors = [
+ ];
+ for (m = 0; m < 4; m++) {
+ strokeColors.push([]);
+ }
+ strokeColors[0] = this.immediateMode.geometry.vertexStrokeColors.slice( - 4);
+ strokeColors[3] = this.curStrokeColor.slice();
+ if (argLength === 6) {
+ this.isBezier = true;
+ w_x = [
+ this.immediateMode._bezierVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 4 ? undefined : arguments[4]
+ ];
+ w_y = [
+ this.immediateMode._bezierVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 3 ? undefined : arguments[3],
+ arguments.length <= 5 ? undefined : arguments[5]
+ ];
+ // The ratio of the distance between the start point, the two control-
+ // points, and the end point determines the intermediate color.
+ var d0 = Math.hypot(w_x[0] - w_x[1], w_y[0] - w_y[1]);
+ var d1 = Math.hypot(w_x[1] - w_x[2], w_y[1] - w_y[2]);
+ var d2 = Math.hypot(w_x[2] - w_x[3], w_y[2] - w_y[3]);
+ var totalLength = d0 + d1 + d2;
+ d0 /= totalLength;
+ d2 /= totalLength;
+ for (k = 0; k < 4; k++) {
+ fillColors[1].push(fillColors[0][k] * (1 - d0) + fillColors[3][k] * d0);
+ fillColors[2].push(fillColors[0][k] * d2 + fillColors[3][k] * (1 - d2));
+ strokeColors[1].push(strokeColors[0][k] * (1 - d0) + strokeColors[3][k] * d0);
+ strokeColors[2].push(strokeColors[0][k] * d2 + strokeColors[3][k] * (1 - d2));
+ }
+ for (i = 0; i < LUTLength; i++) {
+ // Interpolate colors using control points
+ this.curFillColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ this.curStrokeColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _x = _y = 0;
+ for (m = 0; m < 4; m++) {
+ for (k = 0; k < 4; k++) {
+ this.curFillColor[k] += this._lookUpTableBezier[i][m] * fillColors[m][k];
+ this.curStrokeColor[k] += this._lookUpTableBezier[i][m] * strokeColors[m][k];
+ }
+ _x += w_x[m] * this._lookUpTableBezier[i][m];
+ _y += w_y[m] * this._lookUpTableBezier[i][m];
+ }
+ this.vertex(_x, _y);
+ } // so that we leave currentColor with the last value the user set it to
+
+ this.curFillColor = fillColors[3];
+ this.curStrokeColor = strokeColors[3];
+ this.immediateMode._bezierVertex[0] = arguments.length <= 4 ? undefined : arguments[4];
+ this.immediateMode._bezierVertex[1] = arguments.length <= 5 ? undefined : arguments[5];
+ } else if (argLength === 9) {
+ this.isBezier = true;
+ w_x = [
+ this.immediateMode._bezierVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 3 ? undefined : arguments[3],
+ arguments.length <= 6 ? undefined : arguments[6]
+ ];
+ w_y = [
+ this.immediateMode._bezierVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 4 ? undefined : arguments[4],
+ arguments.length <= 7 ? undefined : arguments[7]
+ ];
+ w_z = [
+ this.immediateMode._bezierVertex[2],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 5 ? undefined : arguments[5],
+ arguments.length <= 8 ? undefined : arguments[8]
+ ];
+ // The ratio of the distance between the start point, the two control-
+ // points, and the end point determines the intermediate color.
+ var _d = Math.hypot(w_x[0] - w_x[1], w_y[0] - w_y[1], w_z[0] - w_z[1]);
+ var _d2 = Math.hypot(w_x[1] - w_x[2], w_y[1] - w_y[2], w_z[1] - w_z[2]);
+ var _d3 = Math.hypot(w_x[2] - w_x[3], w_y[2] - w_y[3], w_z[2] - w_z[3]);
+ var _totalLength = _d + _d2 + _d3;
+ _d /= _totalLength;
+ _d3 /= _totalLength;
+ for (k = 0; k < 4; k++) {
+ fillColors[1].push(fillColors[0][k] * (1 - _d) + fillColors[3][k] * _d);
+ fillColors[2].push(fillColors[0][k] * _d3 + fillColors[3][k] * (1 - _d3));
+ strokeColors[1].push(strokeColors[0][k] * (1 - _d) + strokeColors[3][k] * _d);
+ strokeColors[2].push(strokeColors[0][k] * _d3 + strokeColors[3][k] * (1 - _d3));
+ }
+ for (i = 0; i < LUTLength; i++) {
+ // Interpolate colors using control points
+ this.curFillColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ this.curStrokeColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _x = _y = _z = 0;
+ for (m = 0; m < 4; m++) {
+ for (k = 0; k < 4; k++) {
+ this.curFillColor[k] += this._lookUpTableBezier[i][m] * fillColors[m][k];
+ this.curStrokeColor[k] += this._lookUpTableBezier[i][m] * strokeColors[m][k];
+ }
+ _x += w_x[m] * this._lookUpTableBezier[i][m];
+ _y += w_y[m] * this._lookUpTableBezier[i][m];
+ _z += w_z[m] * this._lookUpTableBezier[i][m];
+ }
+ this.vertex(_x, _y, _z);
+ } // so that we leave currentColor with the last value the user set it to
+
+ this.curFillColor = fillColors[3];
+ this.curStrokeColor = strokeColors[3];
+ this.immediateMode._bezierVertex[0] = arguments.length <= 6 ? undefined : arguments[6];
+ this.immediateMode._bezierVertex[1] = arguments.length <= 7 ? undefined : arguments[7];
+ this.immediateMode._bezierVertex[2] = arguments.length <= 8 ? undefined : arguments[8];
+ }
+ }
+ };
+ _main.default.RendererGL.prototype.quadraticVertex = function () {
+ if (this.immediateMode._quadraticVertex.length === 0) {
+ throw Error('vertex() must be used once before calling quadraticVertex()');
+ } else {
+ var w_x = [
+ ];
+ var w_y = [
+ ];
+ var w_z = [
+ ];
+ var t,
+ _x,
+ _y,
+ _z,
+ i,
+ k,
+ m;
+ // variable i for bezierPoints, k for components, and m for anchor points.
+ var argLength = arguments.length;
+ t = 0;
+ if (this._lookUpTableQuadratic.length === 0 || this._lutQuadraticDetail !== this._pInst._curveDetail) {
+ this._lookUpTableQuadratic = [
+ ];
+ this._lutQuadraticDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutQuadraticDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableQuadratic[j] = this._quadraticCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableQuadratic[j] = this._quadraticCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+ var LUTLength = this._lookUpTableQuadratic.length;
+ // fillColors[0]: start point color
+ // fillColors[1]: control point color
+ // fillColors[2]: end point color
+ var fillColors = [
+ ];
+ for (m = 0; m < 3; m++) {
+ fillColors.push([]);
+ }
+ fillColors[0] = this.immediateMode.geometry.vertexColors.slice( - 4);
+ fillColors[2] = this.curFillColor.slice();
+ // Do the same for strokeColor.
+ var strokeColors = [
+ ];
+ for (m = 0; m < 3; m++) {
+ strokeColors.push([]);
+ }
+ strokeColors[0] = this.immediateMode.geometry.vertexStrokeColors.slice( - 4);
+ strokeColors[2] = this.curStrokeColor.slice();
+ if (argLength === 4) {
+ this.isQuadratic = true;
+ w_x = [
+ this.immediateMode._quadraticVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 2 ? undefined : arguments[2]
+ ];
+ w_y = [
+ this.immediateMode._quadraticVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 3 ? undefined : arguments[3]
+ ];
+ // The ratio of the distance between the start point, the control-
+ // point, and the end point determines the intermediate color.
+ var d0 = Math.hypot(w_x[0] - w_x[1], w_y[0] - w_y[1]);
+ var d1 = Math.hypot(w_x[1] - w_x[2], w_y[1] - w_y[2]);
+ var totalLength = d0 + d1;
+ d0 /= totalLength;
+ for (k = 0; k < 4; k++) {
+ fillColors[1].push(fillColors[0][k] * (1 - d0) + fillColors[2][k] * d0);
+ strokeColors[1].push(strokeColors[0][k] * (1 - d0) + strokeColors[2][k] * d0);
+ }
+ for (i = 0; i < LUTLength; i++) {
+ // Interpolate colors using control points
+ this.curFillColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ this.curStrokeColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _x = _y = 0;
+ for (m = 0; m < 3; m++) {
+ for (k = 0; k < 4; k++) {
+ this.curFillColor[k] += this._lookUpTableQuadratic[i][m] * fillColors[m][k];
+ this.curStrokeColor[k] += this._lookUpTableQuadratic[i][m] * strokeColors[m][k];
+ }
+ _x += w_x[m] * this._lookUpTableQuadratic[i][m];
+ _y += w_y[m] * this._lookUpTableQuadratic[i][m];
+ }
+ this.vertex(_x, _y);
+ } // so that we leave currentColor with the last value the user set it to
+
+ this.curFillColor = fillColors[2];
+ this.curStrokeColor = strokeColors[2];
+ this.immediateMode._quadraticVertex[0] = arguments.length <= 2 ? undefined : arguments[2];
+ this.immediateMode._quadraticVertex[1] = arguments.length <= 3 ? undefined : arguments[3];
+ } else if (argLength === 6) {
+ this.isQuadratic = true;
+ w_x = [
+ this.immediateMode._quadraticVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 3 ? undefined : arguments[3]
+ ];
+ w_y = [
+ this.immediateMode._quadraticVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 4 ? undefined : arguments[4]
+ ];
+ w_z = [
+ this.immediateMode._quadraticVertex[2],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 5 ? undefined : arguments[5]
+ ];
+ // The ratio of the distance between the start point, the control-
+ // point, and the end point determines the intermediate color.
+ var _d4 = Math.hypot(w_x[0] - w_x[1], w_y[0] - w_y[1], w_z[0] - w_z[1]);
+ var _d5 = Math.hypot(w_x[1] - w_x[2], w_y[1] - w_y[2], w_z[1] - w_z[2]);
+ var _totalLength2 = _d4 + _d5;
+ _d4 /= _totalLength2;
+ for (k = 0; k < 4; k++) {
+ fillColors[1].push(fillColors[0][k] * (1 - _d4) + fillColors[2][k] * _d4);
+ strokeColors[1].push(strokeColors[0][k] * (1 - _d4) + strokeColors[2][k] * _d4);
+ }
+ for (i = 0; i < LUTLength; i++) {
+ // Interpolate colors using control points
+ this.curFillColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ this.curStrokeColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _x = _y = _z = 0;
+ for (m = 0; m < 3; m++) {
+ for (k = 0; k < 4; k++) {
+ this.curFillColor[k] += this._lookUpTableQuadratic[i][m] * fillColors[m][k];
+ this.curStrokeColor[k] += this._lookUpTableQuadratic[i][m] * strokeColors[m][k];
+ }
+ _x += w_x[m] * this._lookUpTableQuadratic[i][m];
+ _y += w_y[m] * this._lookUpTableQuadratic[i][m];
+ _z += w_z[m] * this._lookUpTableQuadratic[i][m];
+ }
+ this.vertex(_x, _y, _z);
+ } // so that we leave currentColor with the last value the user set it to
+
+ this.curFillColor = fillColors[2];
+ this.curStrokeColor = strokeColors[2];
+ this.immediateMode._quadraticVertex[0] = arguments.length <= 3 ? undefined : arguments[3];
+ this.immediateMode._quadraticVertex[1] = arguments.length <= 4 ? undefined : arguments[4];
+ this.immediateMode._quadraticVertex[2] = arguments.length <= 5 ? undefined : arguments[5];
+ }
+ }
+ };
+ _main.default.RendererGL.prototype.curveVertex = function () {
+ var w_x = [
+ ];
+ var w_y = [
+ ];
+ var w_z = [
+ ];
+ var t,
+ _x,
+ _y,
+ _z,
+ i;
+ t = 0;
+ var argLength = arguments.length;
+ if (this._lookUpTableBezier.length === 0 || this._lutBezierDetail !== this._pInst._curveDetail) {
+ this._lookUpTableBezier = [
+ ];
+ this._lutBezierDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutBezierDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+ var LUTLength = this._lookUpTableBezier.length;
+ if (argLength === 2) {
+ this.immediateMode._curveVertex.push(arguments.length <= 0 ? undefined : arguments[0]);
+ this.immediateMode._curveVertex.push(arguments.length <= 1 ? undefined : arguments[1]);
+ if (this.immediateMode._curveVertex.length === 8) {
+ this.isCurve = true;
+ w_x = this._bezierToCatmull([this.immediateMode._curveVertex[0],
+ this.immediateMode._curveVertex[2],
+ this.immediateMode._curveVertex[4],
+ this.immediateMode._curveVertex[6]]);
+ w_y = this._bezierToCatmull([this.immediateMode._curveVertex[1],
+ this.immediateMode._curveVertex[3],
+ this.immediateMode._curveVertex[5],
+ this.immediateMode._curveVertex[7]]);
+ for (i = 0; i < LUTLength; i++) {
+ _x = w_x[0] * this._lookUpTableBezier[i][0] + w_x[1] * this._lookUpTableBezier[i][1] + w_x[2] * this._lookUpTableBezier[i][2] + w_x[3] * this._lookUpTableBezier[i][3];
+ _y = w_y[0] * this._lookUpTableBezier[i][0] + w_y[1] * this._lookUpTableBezier[i][1] + w_y[2] * this._lookUpTableBezier[i][2] + w_y[3] * this._lookUpTableBezier[i][3];
+ this.vertex(_x, _y);
+ }
+ for (i = 0; i < argLength; i++) {
+ this.immediateMode._curveVertex.shift();
+ }
+ }
+ } else if (argLength === 3) {
+ this.immediateMode._curveVertex.push(arguments.length <= 0 ? undefined : arguments[0]);
+ this.immediateMode._curveVertex.push(arguments.length <= 1 ? undefined : arguments[1]);
+ this.immediateMode._curveVertex.push(arguments.length <= 2 ? undefined : arguments[2]);
+ if (this.immediateMode._curveVertex.length === 12) {
+ this.isCurve = true;
+ w_x = this._bezierToCatmull([this.immediateMode._curveVertex[0],
+ this.immediateMode._curveVertex[3],
+ this.immediateMode._curveVertex[6],
+ this.immediateMode._curveVertex[9]]);
+ w_y = this._bezierToCatmull([this.immediateMode._curveVertex[1],
+ this.immediateMode._curveVertex[4],
+ this.immediateMode._curveVertex[7],
+ this.immediateMode._curveVertex[10]]);
+ w_z = this._bezierToCatmull([this.immediateMode._curveVertex[2],
+ this.immediateMode._curveVertex[5],
+ this.immediateMode._curveVertex[8],
+ this.immediateMode._curveVertex[11]]);
+ for (i = 0; i < LUTLength; i++) {
+ _x = w_x[0] * this._lookUpTableBezier[i][0] + w_x[1] * this._lookUpTableBezier[i][1] + w_x[2] * this._lookUpTableBezier[i][2] + w_x[3] * this._lookUpTableBezier[i][3];
+ _y = w_y[0] * this._lookUpTableBezier[i][0] + w_y[1] * this._lookUpTableBezier[i][1] + w_y[2] * this._lookUpTableBezier[i][2] + w_y[3] * this._lookUpTableBezier[i][3];
+ _z = w_z[0] * this._lookUpTableBezier[i][0] + w_z[1] * this._lookUpTableBezier[i][1] + w_z[2] * this._lookUpTableBezier[i][2] + w_z[3] * this._lookUpTableBezier[i][3];
+ this.vertex(_x, _y, _z);
+ }
+ for (i = 0; i < argLength; i++) {
+ this.immediateMode._curveVertex.shift();
+ }
+ }
+ }
+ };
+ _main.default.RendererGL.prototype.image = function (img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
+ if (this._isErasing) {
+ this.blendMode(this._cachedBlendMode);
+ }
+ this._pInst.push();
+ this._pInst.noLights();
+ this._pInst.noStroke();
+ this._pInst.texture(img);
+ this._pInst.textureMode(constants.NORMAL);
+ var u0 = 0;
+ if (sx <= img.width) {
+ u0 = sx / img.width;
+ }
+ var u1 = 1;
+ if (sx + sWidth <= img.width) {
+ u1 = (sx + sWidth) / img.width;
+ }
+ var v0 = 0;
+ if (sy <= img.height) {
+ v0 = sy / img.height;
+ }
+ var v1 = 1;
+ if (sy + sHeight <= img.height) {
+ v1 = (sy + sHeight) / img.height;
+ }
+ this.beginShape();
+ this.vertex(dx, dy, 0, u0, v0);
+ this.vertex(dx + dWidth, dy, 0, u1, v0);
+ this.vertex(dx + dWidth, dy + dHeight, 0, u1, v1);
+ this.vertex(dx, dy + dHeight, 0, u0, v1);
+ this.endShape(constants.CLOSE);
+ this._pInst.pop();
+ if (this._isErasing) {
+ this.blendMode(constants.REMOVE);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ './p5.Geometry': 355,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.math.hypot': 193,
+ 'core-js/modules/es.math.sign': 195,
+ 'core-js/modules/es.number.to-fixed': 198,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 347: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.object.assign');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @private
+ * A class responsible for converting successive WebGL draw calls into a single
+ * `p5.Geometry` that can be reused and drawn with `model()`.
+ */
+
+ var GeometryBuilder = /*#__PURE__*/ function () {
+ function GeometryBuilder(renderer) {
+ _classCallCheck(this, GeometryBuilder);
+ this.renderer = renderer;
+ renderer._pInst.push();
+ this.identityMatrix = new _main.default.Matrix();
+ renderer.uMVMatrix = new _main.default.Matrix();
+ this.geometry = new _main.default.Geometry();
+ this.geometry.gid = '_p5_GeometryBuilder_'.concat(GeometryBuilder.nextGeometryId);
+ GeometryBuilder.nextGeometryId++;
+ this.hasTransform = false;
+ } /**
+ * @private
+ * Applies the current transformation matrix to each vertex.
+ */
+
+ _createClass(GeometryBuilder, [
+ {
+ key: 'transformVertices',
+ value: function transformVertices(vertices) {
+ var _this = this;
+ if (!this.hasTransform) return vertices;
+ return vertices.map(function (v) {
+ return _this.renderer.uMVMatrix.multiplyPoint(v);
+ });
+ } /**
+ * @private
+ * Applies the current normal matrix to each normal.
+ */
+
+ },
+ {
+ key: 'transformNormals',
+ value: function transformNormals(normals) {
+ var _this2 = this;
+ if (!this.hasTransform) return normals;
+ return normals.map(function (v) {
+ return _this2.renderer.uNMatrix.multiplyVec3(v);
+ });
+ } /**
+ * @private
+ * Adds a p5.Geometry to the builder's combined geometry, flattening
+ * transformations.
+ */
+
+ },
+ {
+ key: 'addGeometry',
+ value: function addGeometry(input) {
+ var _this3 = this,
+ _this$geometry$vertic,
+ _this$geometry$vertex,
+ _this$geometry$uvs,
+ _this$geometry$vertex2;
+ this.hasTransform = !this.renderer.uMVMatrix.mat4.every(function (v, i) {
+ return v === _this3.identityMatrix.mat4[i];
+ });
+ if (this.hasTransform) {
+ this.renderer.uNMatrix.inverseTranspose(this.renderer.uMVMatrix);
+ }
+ var startIdx = this.geometry.vertices.length;
+ (_this$geometry$vertic = this.geometry.vertices).push.apply(_this$geometry$vertic, _toConsumableArray(this.transformVertices(input.vertices)));
+ (_this$geometry$vertex = this.geometry.vertexNormals).push.apply(_this$geometry$vertex, _toConsumableArray(this.transformNormals(input.vertexNormals)));
+ (_this$geometry$uvs = this.geometry.uvs).push.apply(_this$geometry$uvs, _toConsumableArray(input.uvs));
+ if (this.renderer._doFill) {
+ var _this$geometry$faces;
+ (_this$geometry$faces = this.geometry.faces).push.apply(_this$geometry$faces, _toConsumableArray(input.faces.map(function (f) {
+ return f.map(function (idx) {
+ return idx + startIdx;
+ });
+ })));
+ }
+ if (this.renderer._doStroke) {
+ var _this$geometry$edges;
+ (_this$geometry$edges = this.geometry.edges).push.apply(_this$geometry$edges, _toConsumableArray(input.edges.map(function (edge) {
+ return edge.map(function (idx) {
+ return idx + startIdx;
+ });
+ })));
+ }
+ var vertexColors = _toConsumableArray(input.vertexColors);
+ while (vertexColors.length < input.vertices.length * 4) {
+ vertexColors.push.apply(vertexColors, _toConsumableArray(this.renderer.curFillColor));
+ }(_this$geometry$vertex2 = this.geometry.vertexColors).push.apply(_this$geometry$vertex2, _toConsumableArray(vertexColors));
+ } /**
+ * Adds geometry from the renderer's immediate mode into the builder's
+ * combined geometry.
+ */
+
+ },
+ {
+ key: 'addImmediate',
+ value: function addImmediate() {
+ var geometry = this.renderer.immediateMode.geometry;
+ var shapeMode = this.renderer.immediateMode.shapeMode;
+ var faces = [
+ ];
+ if (this.renderer._doFill) {
+ if (shapeMode === constants.TRIANGLE_STRIP || shapeMode === constants.QUAD_STRIP) {
+ for (var i = 2; i < geometry.vertices.length; i++) {
+ if (i % 2 === 0) {
+ faces.push([i,
+ i - 1,
+ i - 2]);
+ } else {
+ faces.push([i,
+ i - 2,
+ i - 1]);
+ }
+ }
+ } else if (shapeMode === constants.TRIANGLE_FAN) {
+ for (var _i = 2; _i < geometry.vertices.length; _i++) {
+ faces.push([0,
+ _i - 1,
+ _i]);
+ }
+ } else {
+ for (var _i2 = 0; _i2 < geometry.vertices.length; _i2 += 3) {
+ faces.push([_i2,
+ _i2 + 1,
+ _i2 + 2]);
+ }
+ }
+ }
+ this.addGeometry(Object.assign({
+ }, geometry, {
+ faces: faces
+ }));
+ } /**
+ * Adds geometry from the renderer's retained mode into the builder's
+ * combined geometry.
+ */
+
+ },
+ {
+ key: 'addRetained',
+ value: function addRetained(geometry) {
+ this.addGeometry(geometry.model);
+ } /**
+ * Cleans up the state of the renderer and returns the combined geometry that
+ * was built.
+ * @returns p5.Geometry The flattened, combined geometry
+ */
+
+ },
+ {
+ key: 'finish',
+ value: function finish() {
+ this.renderer._pInst.pop();
+ return this.geometry;
+ }
+ }
+ ]);
+ return GeometryBuilder;
+ }();
+ /**
+ * Keeps track of how many custom geometry objects have been made so that each
+ * can be assigned a unique ID.
+ */
+ GeometryBuilder.nextGeometryId = 0;
+ var _default = GeometryBuilder;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ 'core-js/modules/es.array.every': 172,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.object.assign': 199,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 348: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @module 3D
+ * @submodule Interaction
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Allows the user to orbit around a 3D sketch using a mouse, trackpad, or
+ * touchscreen.
+ *
+ * 3D sketches are viewed through an imaginary camera. Calling
+ * `orbitControl()` within the draw() function allows
+ * the user to change the camera’s position:
+ *
+ *
+ * //draw a line
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * // Use fill instead of stroke to change the color of shape.
+ * fill(255, 0, 0);
+ * line(10, 10, 0, 60, 60, 20);
+ * }
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rest of sketch.
+ * }
+ *
+ *
+ * Left-clicking and dragging or swipe motion will rotate the camera position
+ * about the center of the sketch. Right-clicking and dragging or multi-swipe
+ * will pan the camera position without rotation. Using the mouse wheel
+ * (scrolling) or pinch in/out will move the camera further or closer from the
+ * center of the sketch.
+ *
+ * The first three parameters, `sensitivityX`, `sensitivityY`, and
+ * `sensitivityZ`, are optional. They’re numbers that set the sketch’s
+ * sensitivity to movement along each axis. For example, calling
+ * `orbitControl(1, 2, -1)` keeps movement along the x-axis at its default
+ * value, makes the sketch twice as sensitive to movement along the y-axis,
+ * and reverses motion along the z-axis. By default, all sensitivity values
+ * are 1.
+ *
+ * The fourth parameter, `options`, is also optional. It’s an object that
+ * changes the behavior of orbiting. For example, calling
+ * `orbitControl(1, 1, 1, options)` keeps the default sensitivity values while
+ * changing the behaviors set with `options`. The object can have the
+ * following properties:
+ *
+ *
+ * let options = {
+ * // Setting this to false makes mobile interactions smoother by
+ * // preventing accidental interactions with the page while orbiting.
+ * // By default, it's true.
+ * disableTouchActions: true,
+ *
+ * // Setting this to true makes the camera always rotate in the
+ * // direction the mouse/touch is moving.
+ * // By default, it's false.
+ * freeRotation: false
+ * };
+ *
+ * orbitControl(1, 1, 1, options);
+ *
+ *
+ * @method orbitControl
+ * @for p5
+ * @param {Number} [sensitivityX] sensitivity to movement along the x-axis. Defaults to 1.
+ * @param {Number} [sensitivityY] sensitivity to movement along the y-axis. Defaults to 1.
+ * @param {Number} [sensitivityZ] sensitivity to movement along the z-axis. Defaults to 1.
+ * @param {Object} [options] object with two optional properties, `disableTouchActions`
+ * and `freeRotation`. Both are `Boolean`s. `disableTouchActions`
+ * defaults to `true` and `freeRotation` defaults to `false`.
+ * @chainable
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(30, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * // Make the interactions 3X sensitive.
+ * orbitControl(3, 3, 3);
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(30, 50);
+ * }
+ *
+ *
+ *
+ */
+ // implementation based on three.js 'orbitControls':
+ // https://github.com/mrdoob/three.js/blob/6afb8595c0bf8b2e72818e42b64e6fe22707d896/examples/jsm/controls/OrbitControls.js#L22
+
+ _main.default.prototype.orbitControl = function (sensitivityX, sensitivityY, sensitivityZ, options) {
+ var _this = this;
+ this._assert3d('orbitControl');
+ _main.default._validateParameters('orbitControl', arguments);
+ var cam = this._renderer._curCamera;
+ if (typeof sensitivityX === 'undefined') {
+ sensitivityX = 1;
+ }
+ if (typeof sensitivityY === 'undefined') {
+ sensitivityY = sensitivityX;
+ }
+ if (typeof sensitivityZ === 'undefined') {
+ sensitivityZ = 1;
+ }
+ if (_typeof(options) !== 'object') {
+ options = {
+ };
+ } // default right-mouse and mouse-wheel behaviors (context menu and scrolling,
+ // respectively) are disabled here to allow use of those events for panning and
+ // zooming. However, whether or not to disable touch actions is an option.
+ // disable context menu for canvas element and add 'contextMenuDisabled'
+ // flag to p5 instance
+
+ if (this.contextMenuDisabled !== true) {
+ this.canvas.oncontextmenu = function () {
+ return false;
+ };
+ this._setProperty('contextMenuDisabled', true);
+ } // disable default scrolling behavior on the canvas element and add
+ // 'wheelDefaultDisabled' flag to p5 instance
+
+ if (this.wheelDefaultDisabled !== true) {
+ this.canvas.onwheel = function () {
+ return false;
+ };
+ this._setProperty('wheelDefaultDisabled', true);
+ } // disable default touch behavior on the canvas element and add
+ // 'touchActionsDisabled' flag to p5 instance
+
+ var _options = options,
+ _options$disableTouch = _options.disableTouchActions,
+ disableTouchActions = _options$disableTouch === void 0 ? true : _options$disableTouch;
+ if (this.touchActionsDisabled !== true && disableTouchActions) {
+ this.canvas.style['touch-action'] = 'none';
+ this._setProperty('touchActionsDisabled', true);
+ } // If option.freeRotation is true, the camera always rotates freely in the direction
+ // the pointer moves. default value is false (normal behavior)
+
+ var _options2 = options,
+ _options2$freeRotatio = _options2.freeRotation,
+ freeRotation = _options2$freeRotatio === void 0 ? false : _options2$freeRotatio; // get moved touches.
+ var movedTouches = [
+ ];
+ this.touches.forEach(function (curTouch) {
+ _this._renderer.prevTouches.forEach(function (prevTouch) {
+ if (curTouch.id === prevTouch.id) {
+ var movedTouch = {
+ x: curTouch.x,
+ y: curTouch.y,
+ px: prevTouch.x,
+ py: prevTouch.y
+ };
+ movedTouches.push(movedTouch);
+ }
+ });
+ });
+ this._renderer.prevTouches = this.touches;
+ // The idea of using damping is based on the following website. thank you.
+ // https://github.com/freshfork/p5.EasyCam/blob/9782964680f6a5c4c9bee825c475d9f2021d5134/p5.easycam.js#L1124
+ // variables for interaction
+ var deltaRadius = 0;
+ var deltaTheta = 0;
+ var deltaPhi = 0;
+ var moveDeltaX = 0;
+ var moveDeltaY = 0;
+ // constants for dampingProcess
+ var damping = 0.85;
+ var rotateAccelerationFactor = 0.6;
+ var moveAccelerationFactor = 0.15;
+ // For touches, the appropriate scale is different
+ // because the distance difference is multiplied.
+ var mouseZoomScaleFactor = 0.01;
+ var touchZoomScaleFactor = 0.0004;
+ var scaleFactor = this.height < this.width ? this.height : this.width;
+ // Flag whether the mouse or touch pointer is inside the canvas
+ var pointersInCanvas = false;
+ // calculate and determine flags and variables.
+ if (movedTouches.length > 0) {
+ /* for touch */
+ // if length === 1, rotate
+ // if length > 1, zoom and move
+ // for touch, it is calculated based on one moved touch pointer position.
+ pointersInCanvas = movedTouches[0].x > 0 && movedTouches[0].x < this.width && movedTouches[0].y > 0 && movedTouches[0].y < this.height;
+ if (movedTouches.length === 1) {
+ var t = movedTouches[0];
+ deltaTheta = - sensitivityX * (t.x - t.px) / scaleFactor;
+ deltaPhi = sensitivityY * (t.y - t.py) / scaleFactor;
+ } else {
+ var t0 = movedTouches[0];
+ var t1 = movedTouches[1];
+ var distWithTouches = Math.hypot(t0.x - t1.x, t0.y - t1.y);
+ var prevDistWithTouches = Math.hypot(t0.px - t1.px, t0.py - t1.py);
+ var changeDist = distWithTouches - prevDistWithTouches;
+ // move the camera farther when the distance between the two touch points
+ // decreases, move the camera closer when it increases.
+ deltaRadius = - changeDist * sensitivityZ * touchZoomScaleFactor;
+ // Move the center of the camera along with the movement of
+ // the center of gravity of the two touch points.
+ moveDeltaX = 0.5 * (t0.x + t1.x) - 0.5 * (t0.px + t1.px);
+ moveDeltaY = 0.5 * (t0.y + t1.y) - 0.5 * (t0.py + t1.py);
+ }
+ if (this.touches.length > 0) {
+ if (pointersInCanvas) {
+ // Initiate an interaction if touched in the canvas
+ this._renderer.executeRotateAndMove = true;
+ this._renderer.executeZoom = true;
+ }
+ } else {
+ // End an interaction when the touch is released
+ this._renderer.executeRotateAndMove = false;
+ this._renderer.executeZoom = false;
+ }
+ } else {
+ /* for mouse */
+ // if wheelDeltaY !== 0, zoom
+ // if mouseLeftButton is down, rotate
+ // if mouseRightButton is down, move
+ // For mouse, it is calculated based on the mouse position.
+ pointersInCanvas = this.mouseX > 0 && this.mouseX < this.width && this.mouseY > 0 && this.mouseY < this.height;
+ if (this._mouseWheelDeltaY !== 0) {
+ // zoom the camera depending on the value of _mouseWheelDeltaY.
+ // move away if positive, move closer if negative
+ deltaRadius = Math.sign(this._mouseWheelDeltaY) * sensitivityZ;
+ deltaRadius *= mouseZoomScaleFactor;
+ this._mouseWheelDeltaY = 0;
+ // start zoom when the mouse is wheeled within the canvas.
+ if (pointersInCanvas) this._renderer.executeZoom = true;
+ } else {
+ // quit zoom when you stop wheeling.
+ this._renderer.executeZoom = false;
+ }
+ if (this.mouseIsPressed) {
+ if (this.mouseButton === this.LEFT) {
+ deltaTheta = - sensitivityX * this.movedX / scaleFactor;
+ deltaPhi = sensitivityY * this.movedY / scaleFactor;
+ } else if (this.mouseButton === this.RIGHT) {
+ moveDeltaX = this.movedX;
+ moveDeltaY = this.movedY * cam.yScale;
+ } // start rotate and move when mouse is pressed within the canvas.
+
+ if (pointersInCanvas) this._renderer.executeRotateAndMove = true;
+ } else {
+ // quit rotate and move if mouse is released.
+ this._renderer.executeRotateAndMove = false;
+ }
+ } // interactions
+ // zoom process
+
+ if (deltaRadius !== 0 && this._renderer.executeZoom) {
+ // accelerate zoom velocity
+ this._renderer.zoomVelocity += deltaRadius;
+ }
+ if (Math.abs(this._renderer.zoomVelocity) > 0.001) {
+ // if freeRotation is true, we use _orbitFree() instead of _orbit()
+ if (freeRotation) {
+ cam._orbitFree(0, 0, this._renderer.zoomVelocity);
+ } else {
+ cam._orbit(0, 0, this._renderer.zoomVelocity);
+ } // In orthogonal projection, the scale does not change even if
+ // the distance to the gaze point is changed, so the projection matrix
+ // needs to be modified.
+
+ if (cam.projMatrix.mat4[15] !== 0) {
+ cam.projMatrix.mat4[0] *= Math.pow(10, - this._renderer.zoomVelocity);
+ cam.projMatrix.mat4[5] *= Math.pow(10, - this._renderer.zoomVelocity);
+ // modify uPMatrix
+ this._renderer.uPMatrix.mat4[0] = cam.projMatrix.mat4[0];
+ this._renderer.uPMatrix.mat4[5] = cam.projMatrix.mat4[5];
+ } // damping
+
+ this._renderer.zoomVelocity *= damping;
+ } else {
+ this._renderer.zoomVelocity = 0;
+ } // rotate process
+
+ if ((deltaTheta !== 0 || deltaPhi !== 0) && this._renderer.executeRotateAndMove) {
+ // accelerate rotate velocity
+ this._renderer.rotateVelocity.add(deltaTheta * rotateAccelerationFactor, deltaPhi * rotateAccelerationFactor);
+ }
+ if (this._renderer.rotateVelocity.magSq() > 0.000001) {
+ // if freeRotation is true, the camera always rotates freely in the direction the pointer moves
+ if (freeRotation) {
+ cam._orbitFree( - this._renderer.rotateVelocity.x, this._renderer.rotateVelocity.y, 0);
+ } else {
+ cam._orbit(this._renderer.rotateVelocity.x, this._renderer.rotateVelocity.y, 0);
+ } // damping
+
+ this._renderer.rotateVelocity.mult(damping);
+ } else {
+ this._renderer.rotateVelocity.set(0, 0);
+ } // move process
+
+ if ((moveDeltaX !== 0 || moveDeltaY !== 0) && this._renderer.executeRotateAndMove) {
+ // Normalize movement distance
+ var ndcX = moveDeltaX * 2 / this.width;
+ var ndcY = - moveDeltaY * 2 / this.height;
+ // accelerate move velocity
+ this._renderer.moveVelocity.add(ndcX * moveAccelerationFactor, ndcY * moveAccelerationFactor);
+ }
+ if (this._renderer.moveVelocity.magSq() > 0.000001) {
+ // Translate the camera so that the entire object moves
+ // perpendicular to the line of sight when the mouse is moved
+ // or when the centers of gravity of the two touch pointers move.
+ var local = cam._getLocalAxes();
+ // Calculate the z coordinate in the view coordinates of
+ // the center, that is, the distance to the view point
+ var diffX = cam.eyeX - cam.centerX;
+ var diffY = cam.eyeY - cam.centerY;
+ var diffZ = cam.eyeZ - cam.centerZ;
+ var viewZ = Math.sqrt(diffX * diffX + diffY * diffY + diffZ * diffZ);
+ // position vector of the center.
+ var cv = new _main.default.Vector(cam.centerX, cam.centerY, cam.centerZ);
+ // Calculate the normalized device coordinates of the center.
+ cv = cam.cameraMatrix.multiplyPoint(cv);
+ cv = this._renderer.uPMatrix.multiplyAndNormalizePoint(cv);
+ // Move the center by this distance
+ // in the normalized device coordinate system.
+ cv.x -= this._renderer.moveVelocity.x;
+ cv.y -= this._renderer.moveVelocity.y;
+ // Calculate the translation vector
+ // in the direction perpendicular to the line of sight of center.
+ var dx,
+ dy;
+ var uP = this._renderer.uPMatrix.mat4;
+ if (uP[15] === 0) {
+ dx = (uP[8] + cv.x) / uP[0] * viewZ;
+ dy = (uP[9] + cv.y) / uP[5] * viewZ;
+ } else {
+ dx = (cv.x - uP[12]) / uP[0];
+ dy = (cv.y - uP[13]) / uP[5];
+ } // translate the camera.
+
+ cam.setPosition(cam.eyeX + dx * local.x[0] + dy * local.y[0], cam.eyeY + dx * local.x[1] + dy * local.y[1], cam.eyeZ + dx * local.x[2] + dy * local.y[2]);
+ // damping
+ this._renderer.moveVelocity.mult(damping);
+ } else {
+ this._renderer.moveVelocity.set(0, 0);
+ }
+ return this;
+ };
+ /**
+ * Adds a grid and an axes icon to clarify orientation in 3D sketches.
+ *
+ * `debugMode()` adds a grid that shows where the “ground” is in a sketch. By
+ * default, the grid will run through the origin `(0, 0, 0)` of the sketch
+ * along the XZ plane. `debugMode()` also adds an axes icon that points along
+ * the positive x-, y-, and z-axes. Calling `debugMode()` displays the grid
+ * and axes icon with their default size and position.
+ *
+ * There are four ways to call `debugMode()` with optional parameters to
+ * customize the debugging environment.
+ *
+ * The first way to call `debugMode()` has one parameter, `mode`. If the
+ * system constant `GRID` is passed, as in `debugMode(GRID)`, then the grid
+ * will be displayed and the axes icon will be hidden. If the constant `AXES`
+ * is passed, as in `debugMode(AXES)`, then the axes icon will be displayed
+ * and the grid will be hidden.
+ *
+ * The second way to call `debugMode()` has six parameters. The first
+ * parameter, `mode`, selects either `GRID` or `AXES` to be displayed. The
+ * next five parameters, `gridSize`, `gridDivisions`, `xOff`, `yOff`, and
+ * `zOff` are optional. They’re numbers that set the appearance of the grid
+ * (`gridSize` and `gridDivisions`) and the placement of the axes icon
+ * (`xOff`, `yOff`, and `zOff`). For example, calling
+ * `debugMode(20, 5, 10, 10, 10)` sets the `gridSize` to 20 pixels, the number
+ * of `gridDivisions` to 5, and offsets the axes icon by 10 pixels along the
+ * x-, y-, and z-axes.
+ *
+ * The third way to call `debugMode()` has five parameters. The first
+ * parameter, `mode`, selects either `GRID` or `AXES` to be displayed. The
+ * next four parameters, `axesSize`, `xOff`, `yOff`, and `zOff` are optional.
+ * They’re numbers that set the appearance of the size of the axes icon
+ * (`axesSize`) and its placement (`xOff`, `yOff`, and `zOff`).
+ *
+ * The fourth way to call `debugMode()` has nine optional parameters. The
+ * first five parameters, `gridSize`, `gridDivisions`, `gridXOff`, `gridYOff`,
+ * and `gridZOff` are numbers that set the appearance of the grid. For
+ * example, calling `debugMode(100, 5, 0, 0, 0)` sets the `gridSize` to 100,
+ * the number of `gridDivisions` to 5, and sets all the offsets to 0 so that
+ * the grid is centered at the origin. The next four parameters, `axesSize`,
+ * `xOff`, `yOff`, and `zOff` are numbers that set the appearance of the size
+ * of the axes icon (`axesSize`) and its placement (`axesXOff`, `axesYOff`,
+ * and `axesZOff`). For example, calling
+ * `debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)` sets the `gridSize` to 100,
+ * the number of `gridDivisions` to 5, and sets all the offsets to 0 so that
+ * the grid is centered at the origin. It then sets the `axesSize` to 50 and
+ * offsets the icon 10 pixels along each axis.
+ *
+ * @method debugMode
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create an options object.
+ * let options = {
+ * disableTouchActions: false,
+ * freeRotation: true
+ * };
+ *
+ * // Enable orbiting with the mouse.
+ * // Prevent accidental touch actions on touchscreen devices
+ * // and enable free rotation.
+ * orbitControl(1, 1, 1, options);
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(30, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Enable debug mode.
+ * debugMode();
+ *
+ * describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(20, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Enable debug mode.
+ * // Only display the axes icon.
+ * debugMode(AXES);
+ *
+ * describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(20, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Enable debug mode.
+ * // Only display the grid and customize it:
+ * // - size: 50
+ * // - divisions: 10
+ * // - offsets: 0, 20, 0
+ * debugMode(GRID, 50, 10, 0, 20, 0);
+ *
+ * describe('A multicolor box on a gray background. A grid is displayed below the box.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(20, 40);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method debugMode
+ * @param {Constant} mode either GRID or AXES
+ */
+ /**
+ * @method debugMode
+ * @param {Constant} mode
+ * @param {Number} [gridSize] side length of the grid.
+ * @param {Number} [gridDivisions] number of divisions in the grid.
+ * @param {Number} [xOff] offset from origin along the x-axis.
+ * @param {Number} [yOff] offset from origin along the y-axis.
+ * @param {Number} [zOff] offset from origin along the z-axis.
+ */
+ /**
+ * @method debugMode
+ * @param {Constant} mode
+ * @param {Number} [axesSize] length of axes icon markers.
+ * @param {Number} [xOff]
+ * @param {Number} [yOff]
+ * @param {Number} [zOff]
+ */
+ /**
+ * @method debugMode
+ * @param {Number} [gridSize]
+ * @param {Number} [gridDivisions]
+ * @param {Number} [gridXOff] grid offset from the origin along the x-axis.
+ * @param {Number} [gridYOff] grid offset from the origin along the y-axis.
+ * @param {Number} [gridZOff] grid offset from the origin along the z-axis.
+ * @param {Number} [axesSize]
+ * @param {Number} [axesXOff] axes icon offset from the origin along the x-axis.
+ * @param {Number} [axesYOff] axes icon offset from the origin along the y-axis.
+ * @param {Number} [axesZOff] axes icon offset from the origin along the z-axis.
+ */
+ _main.default.prototype.debugMode = function () {
+ this._assert3d('debugMode');
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('debugMode', args);
+ // start by removing existing 'post' registered debug methods
+ for (var i = this._registeredMethods.post.length - 1; i >= 0; i--) {
+ // test for equality...
+ if (this._registeredMethods.post[i].toString() === this._grid().toString() || this._registeredMethods.post[i].toString() === this._axesIcon().toString()) {
+ this._registeredMethods.post.splice(i, 1);
+ }
+ } // then add new debugMode functions according to the argument list
+
+ if (args[0] === constants.GRID) {
+ this.registerMethod('post', this._grid(args[1], args[2], args[3], args[4], args[5]));
+ } else if (args[0] === constants.AXES) {
+ this.registerMethod('post', this._axesIcon(args[1], args[2], args[3], args[4]));
+ } else {
+ this.registerMethod('post', this._grid(args[0], args[1], args[2], args[3], args[4]));
+ this.registerMethod('post', this._axesIcon(args[5], args[6], args[7], args[8]));
+ }
+ };
+ /**
+ * Turns off debugMode() in a 3D sketch.
+ *
+ * @method noDebugMode
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Enable debug mode.
+ * // Display the grid and axes icon and customize them:
+ * // Grid
+ * // ----
+ * // - size: 50
+ * // - divisions: 10
+ * // - offsets: 0, 20, 0
+ * // Axes
+ * // ----
+ * // - size: 50
+ * // - offsets: 0, 0, 0
+ * debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);
+ *
+ * describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(20, 40);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noDebugMode = function () {
+ this._assert3d('noDebugMode');
+ // start by removing existing 'post' registered debug methods
+ for (var i = this._registeredMethods.post.length - 1; i >= 0; i--) {
+ // test for equality...
+ if (this._registeredMethods.post[i].toString() === this._grid().toString() || this._registeredMethods.post[i].toString() === this._axesIcon().toString()) {
+ this._registeredMethods.post.splice(i, 1);
+ }
+ }
+ };
+ /**
+ * For use with debugMode
+ * @private
+ * @method _grid
+ * @param {Number} [size] size of grid sides
+ * @param {Number} [div] number of grid divisions
+ * @param {Number} [xOff] offset of grid center from origin in X axis
+ * @param {Number} [yOff] offset of grid center from origin in Y axis
+ * @param {Number} [zOff] offset of grid center from origin in Z axis
+ */
+ _main.default.prototype._grid = function (size, numDivs, xOff, yOff, zOff) {
+ if (typeof size === 'undefined') {
+ size = this.width / 2;
+ }
+ if (typeof numDivs === 'undefined') {
+ // ensure at least 2 divisions
+ numDivs = Math.round(size / 30) < 4 ? 4 : Math.round(size / 30);
+ }
+ if (typeof xOff === 'undefined') {
+ xOff = 0;
+ }
+ if (typeof yOff === 'undefined') {
+ yOff = 0;
+ }
+ if (typeof zOff === 'undefined') {
+ zOff = 0;
+ }
+ var spacing = size / numDivs;
+ var halfSize = size / 2;
+ return function () {
+ this.push();
+ this.stroke(this._renderer.curStrokeColor[0] * 255, this._renderer.curStrokeColor[1] * 255, this._renderer.curStrokeColor[2] * 255);
+ this._renderer.uMVMatrix.set(this._renderer._curCamera.cameraMatrix);
+ // Lines along X axis
+ for (var q = 0; q <= numDivs; q++) {
+ this.beginShape(this.LINES);
+ this.vertex( - halfSize + xOff, yOff, q * spacing - halfSize + zOff);
+ this.vertex( + halfSize + xOff, yOff, q * spacing - halfSize + zOff);
+ this.endShape();
+ } // Lines along Z axis
+
+ for (var i = 0; i <= numDivs; i++) {
+ this.beginShape(this.LINES);
+ this.vertex(i * spacing - halfSize + xOff, yOff, - halfSize + zOff);
+ this.vertex(i * spacing - halfSize + xOff, yOff, + halfSize + zOff);
+ this.endShape();
+ }
+ this.pop();
+ };
+ };
+ /**
+ * For use with debugMode
+ * @private
+ * @method _axesIcon
+ * @param {Number} [size] size of axes icon lines
+ * @param {Number} [xOff] offset of icon from origin in X axis
+ * @param {Number} [yOff] offset of icon from origin in Y axis
+ * @param {Number} [zOff] offset of icon from origin in Z axis
+ */
+ _main.default.prototype._axesIcon = function (size, xOff, yOff, zOff) {
+ if (typeof size === 'undefined') {
+ size = this.width / 20 > 40 ? this.width / 20 : 40;
+ }
+ if (typeof xOff === 'undefined') {
+ xOff = - this.width / 4;
+ }
+ if (typeof yOff === 'undefined') {
+ yOff = xOff;
+ }
+ if (typeof zOff === 'undefined') {
+ zOff = xOff;
+ }
+ return function () {
+ this.push();
+ this._renderer.uMVMatrix.set(this._renderer._curCamera.cameraMatrix);
+ // X axis
+ this.strokeWeight(2);
+ this.stroke(255, 0, 0);
+ this.beginShape(this.LINES);
+ this.vertex(xOff, yOff, zOff);
+ this.vertex(xOff + size, yOff, zOff);
+ this.endShape();
+ // Y axis
+ this.stroke(0, 255, 0);
+ this.beginShape(this.LINES);
+ this.vertex(xOff, yOff, zOff);
+ this.vertex(xOff, yOff + size, zOff);
+ this.endShape();
+ // Z axis
+ this.stroke(0, 0, 255);
+ this.beginShape(this.LINES);
+ this.vertex(xOff, yOff, zOff);
+ this.vertex(xOff, yOff, zOff + size);
+ this.endShape();
+ this.pop();
+ };
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.math.hypot': 193,
+ 'core-js/modules/es.math.sign': 195,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.for-each': 260,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 349: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.filter');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module 3D
+ * @submodule Lights
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Creates a light that shines from all directions.
+ *
+ * Ambient light does not come from one direction. Instead, 3D shapes are
+ * lit evenly from all sides. Ambient lights are almost always used in
+ * combination with other types of lights.
+ *
+ * There are three ways to call `ambientLight()` with optional parameters to
+ * set the light’s color.
+ *
+ * The first way to call `ambientLight()` has two parameters, `gray` and
+ * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
+ * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
+ * `ambientLight(50, 30)`.
+ *
+ * The second way to call `ambientLight()` has one parameter, color. A
+ * p5.Color object, an array of color values, or a
+ * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
+ * ambient light’s color.
+ *
+ * The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
+ * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+ * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
+ * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
+ * the current colorMode().
+ *
+ * @method ambientLight
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @param {Number} [alpha] alpha (transparency) value in the current
+ * colorMode().
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Enable debug mode.
+ * debugMode();
+ *
+ * describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box. box(20, 40);
+ * }
+ *
+ * // Disable debug mode when the user double-clicks.
+ * function doubleClicked() {
+ * noDebugMode();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to turn on the light.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Control the light.
+ * if (isLit === true) {
+ * // Use a grayscale value of 80.
+ * ambientLight(80);
+ * }
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the ambient light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A faded magenta sphere drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * // Use a p5.Color object.
+ * let c = color('orchid');
+ * ambientLight(c);
+ *
+ * // Draw the sphere.
+ * sphere();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A faded magenta sphere drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * // Use a CSS color string.
+ * ambientLight('#DA70D6');
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method ambientLight
+ * @param {Number} gray grayscale value between 0 and 255.
+ * @param {Number} [alpha]
+ * @chainable
+ */
+ /**
+ * @method ambientLight
+ * @param {String} value color as a CSS string.
+ * @chainable
+ */
+ /**
+ * @method ambientLight
+ * @param {Number[]} values color as an array of RGBA, HSBA, or HSLA
+ * values.
+ * @chainable
+ */
+ /**
+ * @method ambientLight
+ * @param {p5.Color} color color as a p5.Color object.
+ * @chainable
+ */
+
+ _main.default.prototype.ambientLight = function (v1, v2, v3, a) {
+ this._assert3d('ambientLight');
+ _main.default._validateParameters('ambientLight', arguments);
+ var color = this.color.apply(this, arguments);
+ this._renderer.ambientLightColors.push(color._array[0], color._array[1], color._array[2]);
+ this._renderer._enableLighting = true;
+ return this;
+ };
+ /**
+ * Sets the specular color for lights.
+ *
+ * `specularColor()` affects lights that bounce off a surface in a preferred
+ * direction. These lights include
+ * directionalLight(),
+ * pointLight(), and
+ * spotLight(). The function helps to create
+ * highlights on p5.Geometry objects that are
+ * styled with specularMaterial(). If a
+ * geometry does not use
+ * specularMaterial(), then
+ * `specularColor()` will have no effect.
+ *
+ * Note: `specularColor()` doesn’t affect lights that bounce in all
+ * directions, including ambientLight() and
+ * imageLight().
+ *
+ * There are three ways to call `specularColor()` with optional parameters to
+ * set the specular highlight color.
+ *
+ * The first way to call `specularColor()` has two optional parameters, `gray`
+ * and `alpha`. Grayscale and alpha values between 0 and 255, as in
+ * `specularColor(50)` or `specularColor(50, 80)`, can be passed to set the
+ * specular highlight color.
+ *
+ * The second way to call `specularColor()` has one optional parameter,
+ * `color`. A p5.Color object, an array of color
+ * values, or a CSS color string can be passed to set the specular highlight
+ * color.
+ *
+ * The third way to call `specularColor()` has four optional parameters, `v1`,
+ * `v2`, `v3`, and `alpha`. RGBA, HSBA, or HSLA values, as in
+ * `specularColor(255, 0, 0, 80)`, can be passed to set the specular highlight
+ * color. Color values will be interpreted using the current
+ * colorMode().
+ *
+ * @method specularColor
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A faded magenta sphere drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * // Use RGB values
+ * ambientLight(218, 112, 214);
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white sphere drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // No specular color.
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to add a point light.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the sphere.
+ * noStroke();
+ * specularColor(100);
+ * specularMaterial(255, 255, 255);
+ *
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ * }
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the point light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a specular highlight.
+ * // Use a p5.Color object.
+ * let c = color('dodgerblue');
+ * specularColor(c);
+ *
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a specular highlight.
+ * // Use a CSS color string.
+ * specularColor('#1E90FF');
+ *
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method specularColor
+ * @param {Number} gray grayscale value between 0 and 255.
+ * @chainable
+ */
+ /**
+ * @method specularColor
+ * @param {String} value color as a CSS string.
+ * @chainable
+ */
+ /**
+ * @method specularColor
+ * @param {Number[]} values color as an array of RGBA, HSBA, or HSLA
+ * values.
+ * @chainable
+ */
+ /**
+ * @method specularColor
+ * @param {p5.Color} color color as a p5.Color object.
+ * @chainable
+ */
+ _main.default.prototype.specularColor = function (v1, v2, v3) {
+ this._assert3d('specularColor');
+ _main.default._validateParameters('specularColor', arguments);
+ var color = this.color.apply(this, arguments);
+ this._renderer.specularColors = [
+ color._array[0],
+ color._array[1],
+ color._array[2]
+ ];
+ return this;
+ };
+ /**
+ * Creates a light that shines in one direction.
+ *
+ * Directional lights don’t shine from a specific point. They’re like a sun
+ * that shines from somewhere offscreen. The light’s direction is set using
+ * three `(x, y, z)` values between -1 and 1. For example, setting a light’s
+ * direction as `(1, 0, 0)` will light p5.Geometry
+ * objects from the left since the light faces directly to the right.
+ *
+ * There are four ways to call `directionalLight()` with parameters to set the
+ * light’s color and direction.
+ *
+ * The first way to call `directionalLight()` has six parameters. The first
+ * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
+ * current colorMode(). The last three
+ * parameters, `x`, `y`, and `z`, set the light’s direction. For example,
+ * `directionalLight(255, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
+ * that shines to the right `(1, 0, 0)`.
+ *
+ * The second way to call `directionalLight()` has four parameters. The first
+ * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
+ * current colorMode(). The last parameter,
+ * `direction` sets the light’s direction using a
+ * p5.Geometry object. For example,
+ * `directionalLight(255, 0, 0, lightDir)` creates a red `(255, 0, 0)` light
+ * that shines in the direction the `lightDir` vector points.
+ *
+ * The third way to call `directionalLight()` has four parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * last three parameters, `x`, `y`, and `z`, set the light’s direction. For
+ * example, `directionalLight(myColor, 1, 0, 0)` creates a light that shines
+ * to the right `(1, 0, 0)` with the color value of `myColor`.
+ *
+ * The fourth way to call `directionalLight()` has two parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * second parameter, `direction`, sets the light’s direction using a
+ * p5.Color object. For example,
+ * `directionalLight(myColor, lightDir)` creates a light that shines in the
+ * direction the `lightDir` vector points with the color value of `myColor`.
+ *
+ * @method directionalLight
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @param {Number} x x-component of the light's direction between -1 and 1.
+ * @param {Number} y y-component of the light's direction between -1 and 1.
+ * @param {Number} z z-component of the light's direction between -1 and 1.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a specular highlight.
+ * // Use RGB values.
+ * specularColor(30, 144, 255);
+ *
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the directional light.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a red directional light from above.
+ * // Use RGB values and XYZ directions.
+ * directionalLight(255, 0, 0, 0, 1, 0);
+ * }
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red directional light from above.
+ * // Use a p5.Color object and XYZ directions.
+ * let c = color(255, 0, 0);
+ * directionalLight(c, 0, 1, 0);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method directionalLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} direction direction of the light as a
+ * p5.Vector object.
+ * @chainable
+ */
+ /**
+ * @method directionalLight
+ * @param {p5.Color|Number[]|String} color color as a p5.Color object,
+ * an array of color values, or as a CSS string.
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @chainable
+ */
+ /**
+ * @method directionalLight
+ * @param {p5.Color|Number[]|String} color
+ * @param {p5.Vector} direction
+ * @chainable
+ */
+ _main.default.prototype.directionalLight = function (v1, v2, v3, x, y, z) {
+ this._assert3d('directionalLight');
+ _main.default._validateParameters('directionalLight', arguments);
+ //@TODO: check parameters number
+ var color;
+ if (v1 instanceof _main.default.Color) {
+ color = v1;
+ } else {
+ color = this.color(v1, v2, v3);
+ }
+ var _x,
+ _y,
+ _z;
+ var v = arguments[arguments.length - 1];
+ if (typeof v === 'number') {
+ _x = arguments[arguments.length - 3];
+ _y = arguments[arguments.length - 2];
+ _z = arguments[arguments.length - 1];
+ } else {
+ _x = v.x;
+ _y = v.y;
+ _z = v.z;
+ } // normalize direction
+
+ var l = Math.sqrt(_x * _x + _y * _y + _z * _z);
+ this._renderer.directionalLightDirections.push(_x / l, _y / l, _z / l);
+ this._renderer.directionalLightDiffuseColors.push(color._array[0], color._array[1], color._array[2]);
+ Array.prototype.push.apply(this._renderer.directionalLightSpecularColors, this._renderer.specularColors);
+ this._renderer._enableLighting = true;
+ return this;
+ };
+ /**
+ * Creates a light that shines from a point in all directions.
+ *
+ * Point lights are like light bulbs that shine in all directions. They can be
+ * placed at different positions to achieve different lighting effects. A
+ * maximum of 5 point lights can be active at once.
+ *
+ * There are four ways to call `pointLight()` with parameters to set the
+ * light’s color and position.
+ *
+ * The first way to call `pointLight()` has six parameters. The first three
+ * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
+ * colorMode(). The last three parameters, `x`,
+ * `y`, and `z`, set the light’s position. For example,
+ * `pointLight(255, 0, 0, 50, 0, 0)` creates a red `(255, 0, 0)` light that
+ * shines from the coordinates `(50, 0, 0)`.
+ *
+ * The second way to call `pointLight()` has four parameters. The first three
+ * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
+ * colorMode(). The last parameter, position sets
+ * the light’s position using a p5.Vector object.
+ * For example, `pointLight(255, 0, 0, lightPos)` creates a red `(255, 0, 0)`
+ * light that shines from the position set by the `lightPos` vector.
+ *
+ * The third way to call `pointLight()` has four parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * last three parameters, `x`, `y`, and `z`, set the light’s position. For
+ * example, `directionalLight(myColor, 50, 0, 0)` creates a light that shines
+ * from the coordinates `(50, 0, 0)` with the color value of `myColor`.
+ *
+ * The fourth way to call `pointLight()` has two parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * second parameter, `position`, sets the light’s position using a
+ * p5.Vector object. For example,
+ * `directionalLight(myColor, lightPos)` creates a light that shines from the
+ * position set by the `lightPos` vector with the color value of `myColor`.
+ *
+ * @method pointLight
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @param {Number} x x-coordinate of the light.
+ * @param {Number} y y-coordinate of the light.
+ * @param {Number} z z-coordinate of the light.
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red directional light from above.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightDir = createVector(0, 1, 0);
+ * directionalLight(c, lightDir);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the point light.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a red point light from above.
+ * // Use RGB values and XYZ coordinates.
+ * pointLight(255, 0, 0, 0, -150, 0);
+ * }
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the point light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red point light from above.
+ * // Use a p5.Color object and XYZ directions.
+ * let c = color(255, 0, 0);
+ * pointLight(c, 0, -150, 0);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red point light from above.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightPos = createVector(0, -150, 0);
+ * pointLight(c, lightPos);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method pointLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} position position of the light as a
+ * p5.Vector object.
+ * @chainable
+ */
+ /**
+ * @method pointLight
+ * @param {p5.Color|Number[]|String} color color as a p5.Color object,
+ * an array of color values, or a CSS string.
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @chainable
+ */
+ /**
+ * @method pointLight
+ * @param {p5.Color|Number[]|String} color
+ * @param {p5.Vector} position
+ * @chainable
+ */
+ _main.default.prototype.pointLight = function (v1, v2, v3, x, y, z) {
+ this._assert3d('pointLight');
+ _main.default._validateParameters('pointLight', arguments);
+ //@TODO: check parameters number
+ var color;
+ if (v1 instanceof _main.default.Color) {
+ color = v1;
+ } else {
+ color = this.color(v1, v2, v3);
+ }
+ var _x,
+ _y,
+ _z;
+ var v = arguments[arguments.length - 1];
+ if (typeof v === 'number') {
+ _x = arguments[arguments.length - 3];
+ _y = arguments[arguments.length - 2];
+ _z = arguments[arguments.length - 1];
+ } else {
+ _x = v.x;
+ _y = v.y;
+ _z = v.z;
+ }
+ this._renderer.pointLightPositions.push(_x, _y, _z);
+ this._renderer.pointLightDiffuseColors.push(color._array[0], color._array[1], color._array[2]);
+ Array.prototype.push.apply(this._renderer.pointLightSpecularColors, this._renderer.specularColors);
+ this._renderer._enableLighting = true;
+ return this;
+ };
+ /**
+ * Creates an ambient light from an image.
+ *
+ * `imageLight()` simulates a light shining from all directions. The effect is
+ * like placing the sketch at the center of a giant sphere that uses the image
+ * as its texture. The image's diffuse light will be affected by
+ * fill() and the specular reflections will be
+ * affected by specularMaterial() and
+ * shininess().
+ *
+ * The parameter, `img`, is the p5.Image object to
+ * use as the light source.
+ *
+ * @method imageLight
+ * @param {p5.image} img image to use as the light source.
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red point light that points to the center of the scene.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightPos = createVector(0, 0, 65);
+ * pointLight(c, lightPos);
+ *
+ * // Style the spheres.
+ * noStroke();
+ *
+ * // Draw a sphere up and to the left.
+ * push();
+ * translate(-25, -25, 25);
+ * sphere(10);
+ * pop();
+ *
+ * // Draw a box up and to the right.
+ * push();
+ * translate(25, -25, 25);
+ * sphere(10);
+ * pop();
+ *
+ * // Draw a sphere down and to the left.
+ * push();
+ * translate(-25, 25, 25);
+ * sphere(10);
+ * pop();
+ *
+ * // Draw a box down and to the right.
+ * push();
+ * translate(25, 25, 25);
+ * sphere(10);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.imageLight = function (img) {
+ // activeImageLight property is checked by _setFillUniforms
+ // for sending uniforms to the fillshader
+ this._renderer.activeImageLight = img;
+ this._renderer._enableLighting = true;
+ };
+ /**
+ * Creates an immersive 3D background.
+ *
+ * `panorama()` transforms images containing 360˚ content, such as maps or
+ * HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
+ * space requires changing the camera's perspective with functions such as
+ * orbitControl() or
+ * camera().
+ *
+ * @method panorama
+ * @param {p5.Image} img 360˚ image to use as the background.
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let img;
+ *
+ * // Load an image and create a p5.Image object.
+ * function preload() {
+ * img = loadImage('assets/outdoor_spheremap.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');
+ * }
+ *
+ * function draw() {
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the image as a panorama (360˚ background).
+ * panorama(img);
+ *
+ * // Add a soft ambient light.
+ * ambientLight(50);
+ *
+ * // Add light from the image.
+ * imageLight(img);
+ *
+ * // Style the sphere.
+ * specularMaterial(20);
+ * shininess(100);
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.panorama = function (img) {
+ this.filter(this._renderer._getSphereMapping(img));
+ };
+ /**
+ * 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
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let img;
+ *
+ * // Load an image and create a p5.Image object.
+ * function preload() {
+ * img = loadImage('assets/outdoor_spheremap.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100 ,100 ,WEBGL);
+ *
+ * describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
+ * }
+ *
+ * function draw() {
+ * // Add the panorama.
+ * panorama(img);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Use the image as a light source.
+ * imageLight(img);
+ *
+ * // Style the sphere.
+ * noStroke();
+ * specularMaterial(50);
+ * shininess(200);
+ * metalness(100);
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the lights.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Control the lights.
+ * if (isLit === true) {
+ * lights();
+ * }
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ * // Turn on the lights when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.lights = function () {
+ this._assert3d('lights');
+ // Both specify gray by default.
+ var grayColor = this.color('rgb(128,128,128)');
+ this.ambientLight(grayColor);
+ this.directionalLight(grayColor, 0, 0, - 1);
+ return this;
+ };
+ /**
+ * Sets the falloff rate for pointLight()
+ * and spotLight().
+ *
+ * A light’s falloff describes the intensity of its beam at a distance. For
+ * example, a lantern has a slow falloff, a flashlight has a medium falloff,
+ * and a laser pointer has a sharp falloff.
+ *
+ * `lightFalloff()` has three parameters, `constant`, `linear`, and
+ * `quadratic`. They’re numbers used to calculate falloff at a distance, `d`,
+ * as follows:
+ *
+ * `falloff = 1 / (constant + d * linear + (d * d) * quadratic)`
+ *
+ * Note: `constant`, `linear`, and `quadratic` should always be set to values
+ * greater than 0.
+ *
+ * @method lightFalloff
+ * @param {Number} constant constant value for calculating falloff.
+ * @param {Number} linear linear value for calculating falloff.
+ * @param {Number} quadratic quadratic value for calculating falloff.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white box drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * ambientLight(128, 128, 128);
+ * directionalLight(128, 128, 128, 0, 0, -1);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.lightFalloff = function (constantAttenuation, linearAttenuation, quadraticAttenuation) {
+ this._assert3d('lightFalloff');
+ _main.default._validateParameters('lightFalloff', arguments);
+ if (constantAttenuation < 0) {
+ constantAttenuation = 0;
+ console.warn('Value of constant argument in lightFalloff() should be never be negative. Set to 0.');
+ }
+ if (linearAttenuation < 0) {
+ linearAttenuation = 0;
+ console.warn('Value of linear argument in lightFalloff() should be never be negative. Set to 0.');
+ }
+ if (quadraticAttenuation < 0) {
+ quadraticAttenuation = 0;
+ console.warn('Value of quadratic argument in lightFalloff() should be never be negative. Set to 0.');
+ }
+ if (constantAttenuation === 0 && linearAttenuation === 0 && quadraticAttenuation === 0) {
+ constantAttenuation = 1;
+ console.warn('Either one of the three arguments in lightFalloff() should be greater than zero. Set constant argument to 1.');
+ }
+ this._renderer.constantAttenuation = constantAttenuation;
+ this._renderer.linearAttenuation = linearAttenuation;
+ this._renderer.quadraticAttenuation = quadraticAttenuation;
+ return this;
+ };
+ /**
+ * Creates a light that shines from a point in one direction.
+ *
+ * Spot lights are like flashlights that shine in one direction creating a
+ * cone of light. The shape of the cone can be controlled using the angle and
+ * concentration parameters. A maximum of 5 spot lights can be active at once.
+ *
+ * There are eight ways to call `spotLight()` with parameters to set the
+ * light’s color, position, direction. For example,
+ * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
+ * at the origin `(0, 0, 0)` that points to the right `(1, 0, 0)`.
+ *
+ * The `angle` parameter is optional. It sets the radius of the light cone.
+ * For example, `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)` creates a
+ * red `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
+ * `(1, 0, 0)` with an angle of `PI / 16` radians. By default, `angle` is
+ * `PI / 3` radians.
+ *
+ * The `concentration` parameter is also optional. It focuses the light
+ * towards the center of the light cone. For example,
+ * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)` creates a red
+ * `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
+ * `(1, 0, 0)` with an angle of `PI / 16` radians at concentration of 50. By
+ * default, `concentration` is 100.
+ *
+ * @method spotLight
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @param {Number} x x-coordinate of the light.
+ * @param {Number} y y-coordinate of the light.
+ * @param {Number} z z-coordinate of the light.
+ * @param {Number} rx x-component of light direction between -1 and 1.
+ * @param {Number} ry y-component of light direction between -1 and 1.
+ * @param {Number} rz z-component of light direction between -1 and 1.
+ * @param {Number} [angle] angle of the light cone. Defaults to `PI / 3`.
+ * @param {Number} [concentration] concentration of the light. Defaults to 100.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to change the falloff rate.
+ *
+ * let useFalloff = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Set the light falloff.
+ * if (useFalloff === true) {
+ * lightFalloff(2, 0, 0);
+ * }
+ *
+ * // Add a white point light from the front.
+ * pointLight(255, 255, 255, 0, 0, 100);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Change the falloff value when the user double-clicks.
+ * function doubleClicked() {
+ * useFalloff = true;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to adjust the spotlight.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Control the spotlight.
+ * if (isLit === true) {
+ * // Add a red spot light that shines into the screen.
+ * // Set its angle to PI / 32 radians.
+ * spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);
+ * }
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the spotlight when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method spotLight
+ * @param {p5.Color|Number[]|String} color color as a p5.Color object,
+ * an array of color values, or a CSS string.
+ * @param {p5.Vector} position position of the light as a p5.Vector object.
+ * @param {p5.Vector} direction direction of light as a p5.Vector object.
+ * @param {Number} [angle]
+ * @param {Number} [concentration]
+ */
+ /**
+ * @method spotLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} position
+ * @param {p5.Vector} direction
+ * @param {Number} [angle]
+ * @param {Number} [concentration]
+ */
+ /**
+ * @method spotLight
+ * @param {p5.Color|Number[]|String} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @param {p5.Vector} direction
+ * @param {Number} [angle]
+ * @param {Number} [concentration]
+ */
+ /**
+ * @method spotLight
+ * @param {p5.Color|Number[]|String} color
+ * @param {p5.Vector} position
+ * @param {Number} rx
+ * @param {Number} ry
+ * @param {Number} rz
+ * @param {Number} [angle]
+ * @param {Number} [concentration]
+ */
+ /**
+ * @method spotLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @param {p5.Vector} direction
+ * @param {Number} [angle]
+ * @param {Number} [concentration]
+ */
+ /**
+ * @method spotLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} position
+ * @param {Number} rx
+ * @param {Number} ry
+ * @param {Number} rz
+ * @param {Number} [angle]
+ * @param {Number} [concentration]
+ */
+ /**
+ * @method spotLight
+ * @param {p5.Color|Number[]|String} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @param {Number} rx
+ * @param {Number} ry
+ * @param {Number} rz
+ * @param {Number} [angle]
+ * @param {Number} [concentration]
+ */
+ _main.default.prototype.spotLight = function (v1, v2, v3, x, y, z, nx, ny, nz, angle, concentration) {
+ this._assert3d('spotLight');
+ _main.default._validateParameters('spotLight', arguments);
+ var color,
+ position,
+ direction;
+ var length = arguments.length;
+ switch (length) {
+ case 11:
+ case 10:
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = new _main.default.Vector(nx, ny, nz);
+ break;
+ case 9:
+ if (v1 instanceof _main.default.Color) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = new _main.default.Vector(y, z, nx);
+ angle = ny;
+ concentration = nz;
+ } else if (x instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = new _main.default.Vector(y, z, nx);
+ angle = ny;
+ concentration = nz;
+ } else if (nx instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = nx;
+ angle = ny;
+ concentration = nz;
+ } else {
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = new _main.default.Vector(nx, ny, nz);
+ }
+ break;
+ case 8:
+ if (v1 instanceof _main.default.Color) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = new _main.default.Vector(y, z, nx);
+ angle = ny;
+ } else if (x instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = new _main.default.Vector(y, z, nx);
+ angle = ny;
+ } else {
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = nx;
+ angle = ny;
+ }
+ break;
+ case 7:
+ if (v1 instanceof _main.default.Color && v2 instanceof _main.default.Vector) {
+ color = v1;
+ position = v2;
+ direction = new _main.default.Vector(v3, x, y);
+ angle = z;
+ concentration = nx;
+ } else if (v1 instanceof _main.default.Color && y instanceof _main.default.Vector) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = y;
+ angle = z;
+ concentration = nx;
+ } else if (x instanceof _main.default.Vector && y instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = y;
+ angle = z;
+ concentration = nx;
+ } else if (v1 instanceof _main.default.Color) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = new _main.default.Vector(y, z, nx);
+ } else if (x instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = new _main.default.Vector(y, z, nx);
+ } else {
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = nx;
+ }
+ break;
+ case 6:
+ if (x instanceof _main.default.Vector && y instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = y;
+ angle = z;
+ } else if (v1 instanceof _main.default.Color && y instanceof _main.default.Vector) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = y;
+ angle = z;
+ } else if (v1 instanceof _main.default.Color && v2 instanceof _main.default.Vector) {
+ color = v1;
+ position = v2;
+ direction = new _main.default.Vector(v3, x, y);
+ angle = z;
+ }
+ break;
+ case 5:
+ if (v1 instanceof _main.default.Color && v2 instanceof _main.default.Vector && v3 instanceof _main.default.Vector) {
+ color = v1;
+ position = v2;
+ direction = v3;
+ angle = x;
+ concentration = y;
+ } else if (x instanceof _main.default.Vector && y instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = y;
+ } else if (v1 instanceof _main.default.Color && y instanceof _main.default.Vector) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = y;
+ } else if (v1 instanceof _main.default.Color && v2 instanceof _main.default.Vector) {
+ color = v1;
+ position = v2;
+ direction = new _main.default.Vector(v3, x, y);
+ }
+ break;
+ case 4:
+ color = v1;
+ position = v2;
+ direction = v3;
+ angle = x;
+ break;
+ case 3:
+ color = v1;
+ position = v2;
+ direction = v3;
+ break;
+ default:
+ console.warn('Sorry, input for spotlight() is not in prescribed format. Too '.concat(length < 3 ? 'few' : 'many', ' arguments were provided'));
+ return this;
+ }
+ this._renderer.spotLightDiffuseColors.push(color._array[0], color._array[1], color._array[2]);
+ Array.prototype.push.apply(this._renderer.spotLightSpecularColors, this._renderer.specularColors);
+ this._renderer.spotLightPositions.push(position.x, position.y, position.z);
+ direction.normalize();
+ this._renderer.spotLightDirections.push(direction.x, direction.y, direction.z);
+ if (angle === undefined) {
+ angle = Math.PI / 3;
+ }
+ if (concentration !== undefined && concentration < 1) {
+ concentration = 1;
+ console.warn('Value of concentration needs to be greater than 1. Setting it to 1');
+ } else if (concentration === undefined) {
+ concentration = 100;
+ }
+ angle = this._renderer._pInst._toRadians(angle);
+ this._renderer.spotLightAngle.push(Math.cos(angle));
+ this._renderer.spotLightConc.push(concentration);
+ this._renderer._enableLighting = true;
+ return this;
+ };
+ /**
+ * Removes all lights from the sketch.
+ *
+ * Calling `noLights()` removes any lights created with
+ * lights(),
+ * ambientLight(),
+ * directionalLight(),
+ * pointLight(), or
+ * spotLight(). These functions may be called
+ * after `noLights()` to create a new lighting scheme.
+ *
+ * @method noLights
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to adjust the spotlight.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Control the spotlight.
+ * if (isLit === true) {
+ * // Add a red spot light that shines into the screen.
+ * // Set its angle to PI / 3 radians (default).
+ * // Set its concentration to 1000.
+ * let c = color(255, 0, 0);
+ * let position = createVector(0, 0, 100);
+ * let direction = createVector(0, 0, -1);
+ * spotLight(c, position, direction, PI / 3, 1000);
+ * }
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the spotlight when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noLights = function () {
+ this._assert3d('noLights');
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('noLights', args);
+ this._renderer.activeImageLight = null;
+ this._renderer._enableLighting = false;
+ this._renderer.ambientLightColors.length = 0;
+ this._renderer.specularColors = [
+ 1,
+ 1,
+ 1
+ ];
+ this._renderer.directionalLightDirections.length = 0;
+ this._renderer.directionalLightDiffuseColors.length = 0;
+ this._renderer.directionalLightSpecularColors.length = 0;
+ this._renderer.pointLightPositions.length = 0;
+ this._renderer.pointLightDiffuseColors.length = 0;
+ this._renderer.pointLightSpecularColors.length = 0;
+ this._renderer.spotLightPositions.length = 0;
+ this._renderer.spotLightDirections.length = 0;
+ this._renderer.spotLightDiffuseColors.length = 0;
+ this._renderer.spotLightSpecularColors.length = 0;
+ this._renderer.spotLightAngle.length = 0;
+ this._renderer.spotLightConc.length = 0;
+ this._renderer.constantAttenuation = 1;
+ this._renderer.linearAttenuation = 0;
+ this._renderer.quadraticAttenuation = 0;
+ this._renderer._useShininess = 1;
+ this._renderer._useMetalness = 0;
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.filter': 174
+ }
+ ],
+ 350: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ _dereq_('regenerator-runtime/runtime');
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('./p5.Geometry');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+ try {
+ var info = gen[key](arg);
+ var value = info.value;
+ } catch (error) {
+ reject(error);
+ return;
+ }
+ if (info.done) {
+ resolve(value);
+ } else {
+ Promise.resolve(value).then(_next, _throw);
+ }
+ }
+ function _asyncToGenerator(fn) {
+ return function () {
+ var self = this,
+ args = arguments;
+ return new Promise(function (resolve, reject) {
+ var gen = fn.apply(self, args);
+ function _next(value) {
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value);
+ }
+ function _throw(err) {
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err);
+ }
+ _next(undefined);
+ });
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @module Shape
+ * @submodule 3D Models
+ * @for p5
+ * @requires core
+ * @requires p5.Geometry
+ */
+ /**
+ * Loads a 3D model to create a
+ * p5.Geometry object.
+ *
+ * `loadModel()` can load 3D models from OBJ and STL files. Once the model is
+ * loaded, it can be displayed with the
+ * model() function, as in `model(shape)`.
+ *
+ * There are three ways to call `loadModel()` with optional parameters to help
+ * process the model.
+ *
+ * The first parameter, `path`, is always a `String` with the path to the
+ * file. Paths to local files should be relative, as in
+ * `loadModel('assets/model.obj')`. URLs such as
+ * `'https://example.com/model.obj'` may be blocked due to browser security.
+ *
+ * The first way to call `loadModel()` has three optional parameters after the
+ * file path. The first optional parameter, `successCallback`, is a function
+ * to call once the model loads. For example,
+ * `loadModel('assets/model.obj', handleModel)` will call the `handleModel()`
+ * function once the model loads. The second optional parameter,
+ * `failureCallback`, is a function to call if the model fails to load. For
+ * example, `loadModel('assets/model.obj', handleModel, handleFailure)` will
+ * call the `handleFailure()` function if an error occurs while loading. The
+ * third optional parameter, `fileType`, is the model’s file extension as a
+ * string. For example,
+ * `loadModel('assets/model', handleModel, handleFailure, '.obj')` will try to
+ * load the file model as a `.obj` file.
+ *
+ * The second way to call `loadModel()` has four optional parameters after the
+ * file path. The first optional parameter is a `Boolean` value. If `true` is
+ * passed, as in `loadModel('assets/model.obj', true)`, then the model will be
+ * resized to ensure it fits the canvas. The next three parameters are
+ * `successCallback`, `failureCallback`, and `fileType` as described above.
+ *
+ * The third way to call `loadModel()` has one optional parameter after the
+ * file path. The optional parameter, `options`, is an `Object` with options,
+ * as in `loadModel('assets/model.obj', options)`. The `options` object can
+ * have the following properties:
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the spheres.
+ * noStroke();
+ *
+ * // Draw the top sphere.
+ * push();
+ * translate(0, -25, 0);
+ * sphere(20);
+ * pop();
+ *
+ * // Turn off the lights.
+ * noLights();
+ *
+ * // Add a red directional light that points into the screen.
+ * directionalLight(255, 0, 0, 0, 0, -1);
+ *
+ * // Draw the bottom sphere.
+ * push();
+ * translate(0, 25, 0);
+ * sphere(20);
+ * pop();
+ * }
+ *
+ *
+ * let options = {
+ * // Enables standardized size scaling during loading if set to true.
+ * normalize: true,
+ *
+ * // Function to call once the model loads.
+ * successCallback: handleModel,
+ *
+ * // Function to call if an error occurs while loading.
+ * failureCallback: handleError,
+ *
+ * // Model's file extension.
+ * fileType: '.stl',
+ *
+ * // Flips the U texture coordinates of the model.
+ * flipU: false,
+ *
+ * // Flips the V texture coordinates of the model.
+ * flipV: false
+ * };
+ *
+ * // Pass the options object to loadModel().
+ * loadModel('assets/model.obj', options);
+ *
+ *
+ * Models can take time to load. Calling `loadModel()` in
+ * preload() ensures models load before they're
+ * used in setup() or draw().
+ *
+ * Note: There’s no support for colored STL files. STL files with color will
+ * be rendered without color.
+ *
+ * @method loadModel
+ * @param {String} path path of the model to be loaded.
+ * @param {Boolean} normalize if `true`, scale the model to fit the canvas.
+ * @param {function(p5.Geometry)} [successCallback] function to call once the model is loaded. Will be passed
+ * the p5.Geometry object.
+ * @param {function(Event)} [failureCallback] function to call if the model fails to load. Will be passed an `Error` event object.
+ * @param {String} [fileType] model’s file extension. Either `'.obj'` or `'.stl'`.
+ * @return {p5.Geometry} the p5.Geometry object
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * // Load the file and create a p5.Geometry object.
+ * function preload() {
+ * shape = loadModel('assets/teapot.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white teapot drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the shape.
+ * model(shape);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * // Load the file and create a p5.Geometry object.
+ * // Normalize the geometry's size to fit the canvas.
+ * function preload() {
+ * shape = loadModel('assets/teapot.obj', true);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white teapot drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the shape.
+ * model(shape);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * // Load the file and create a p5.Geometry object.
+ * function preload() {
+ * loadModel('assets/teapot.obj', true, handleModel);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white teapot drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the shape.
+ * model(shape);
+ * }
+ *
+ * // Set the shape variable and log the geometry's
+ * // ID to the console.
+ * function handleModel(data) {
+ * shape = data;
+ * console.log(shape.gid);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * // Load the file and create a p5.Geometry object.
+ * function preload() {
+ * loadModel('assets/wrong.obj', true, handleModel, handleError);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white teapot drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the shape.
+ * model(shape);
+ * }
+ *
+ * // Set the shape variable and print the geometry's
+ * // ID to the console.
+ * function handleModel(data) {
+ * shape = data;
+ * console.log(shape.gid);
+ * }
+ *
+ * // Print an error message if the file doesn't load.
+ * function handleError(error) {
+ * console.error('Oops!', error);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * // Load the file and create a p5.Geometry object.
+ * function preload() {
+ * loadModel('assets/teapot.obj', true, handleModel, handleError, '.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white teapot drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the shape.
+ * model(shape);
+ * }
+ *
+ * // Set the shape variable and print the geometry's
+ * // ID to the console.
+ * function handleModel(data) {
+ * shape = data;
+ * console.log(shape.gid);
+ * }
+ *
+ * // Print an error message if the file doesn't load.
+ * function handleError(error) {
+ * console.error('Oops!', error);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method loadModel
+ * @param {String} path
+ * @param {function(p5.Geometry)} [successCallback]
+ * @param {function(Event)} [failureCallback]
+ * @param {String} [fileType]
+ * @return {p5.Geometry} new p5.Geometry object.
+ */
+ /**
+ * @method loadModel
+ * @param {String} path
+ * @param {Object} [options] loading options.
+ * @param {function(p5.Geometry)} [options.successCallback]
+ * @param {function(Event)} [options.failureCallback]
+ * @param {String} [options.fileType]
+ * @param {boolean} [options.normalize]
+ * @param {boolean} [options.flipU]
+ * @param {boolean} [options.flipV]
+ * @return {p5.Geometry} new p5.Geometry object.
+ */
+
+ _main.default.prototype.loadModel = function (path, options) {
+ _main.default._validateParameters('loadModel', arguments);
+ var normalize = false;
+ var successCallback;
+ var failureCallback;
+ var flipU = false;
+ var flipV = false;
+ var fileType = path.slice( - 4);
+ if (options && _typeof(options) === 'object') {
+ normalize = options.normalize || false;
+ successCallback = options.successCallback;
+ failureCallback = options.failureCallback;
+ fileType = options.fileType || fileType;
+ flipU = options.flipU || false;
+ flipV = options.flipV || false;
+ } else if (typeof options === 'boolean') {
+ normalize = options;
+ successCallback = arguments[2];
+ failureCallback = arguments[3];
+ if (typeof arguments[4] !== 'undefined') {
+ fileType = arguments[4];
+ }
+ } else {
+ successCallback = typeof arguments[1] === 'function' ? arguments[1] : undefined;
+ failureCallback = arguments[2];
+ if (typeof arguments[3] !== 'undefined') {
+ fileType = arguments[3];
+ }
+ }
+ var model = new _main.default.Geometry();
+ model.gid = ''.concat(path, '|').concat(normalize);
+ var self = this;
+ function getMaterials(_x) {
+ return _getMaterials.apply(this, arguments);
+ }
+ function _getMaterials() {
+ _getMaterials = _asyncToGenerator( /*#__PURE__*/ regeneratorRuntime.mark(function _callee2(lines) {
+ var parsedMaterialPromises,
+ i,
+ mtllibMatch,
+ parsedMaterials,
+ materials;
+ return regeneratorRuntime.wrap(function _callee2$(_context2) {
+ while (1) {
+ switch (_context2.prev = _context2.next) {
+ case 0:
+ parsedMaterialPromises = [
+ ];
+ for (i = 0; i < lines.length; i++) {
+ mtllibMatch = lines[i].match(/^mtllib (.+)/);
+ if (mtllibMatch) {
+ (function () {
+ var mtlPath = '';
+ var mtlFilename = mtllibMatch[1];
+ var objPathParts = path.split('/');
+ if (objPathParts.length > 1) {
+ objPathParts.pop();
+ var objFolderPath = objPathParts.join('/');
+ mtlPath = objFolderPath + '/' + mtlFilename;
+ } else {
+ mtlPath = mtlFilename;
+ }
+ parsedMaterialPromises.push(fileExists(mtlPath).then(function (exists) {
+ if (exists) {
+ return parseMtl(self, mtlPath);
+ } else {
+ console.warn('MTL file not found or error in parsing; proceeding without materials: '.concat(mtlPath));
+ return {
+ };
+ }
+ }).catch(function (error) {
+ console.warn('Error loading MTL file: '.concat(mtlPath), error);
+ return {
+ };
+ }));
+ }) ();
+ }
+ }
+ _context2.prev = 2;
+ _context2.next = 5;
+ return Promise.all(parsedMaterialPromises);
+ case 5:
+ parsedMaterials = _context2.sent;
+ materials = Object.assign.apply(Object, [
+ {
+ }
+ ].concat(_toConsumableArray(parsedMaterials)));
+ return _context2.abrupt('return', materials);
+ case 10:
+ _context2.prev = 10;
+ _context2.t0 = _context2['catch'](2);
+ return _context2.abrupt('return', {
+ });
+ case 13:
+ case 'end':
+ return _context2.stop();
+ }
+ }
+ }, _callee2, null, [
+ [2,
+ 10]
+ ]);
+ }));
+ return _getMaterials.apply(this, arguments);
+ }
+ function fileExists(_x2) {
+ return _fileExists.apply(this, arguments);
+ }
+ function _fileExists() {
+ _fileExists = _asyncToGenerator( /*#__PURE__*/ regeneratorRuntime.mark(function _callee3(url) {
+ var response;
+ return regeneratorRuntime.wrap(function _callee3$(_context3) {
+ while (1) {
+ switch (_context3.prev = _context3.next) {
+ case 0:
+ _context3.prev = 0;
+ _context3.next = 3;
+ return fetch(url, {
+ method: 'HEAD'
+ });
+ case 3:
+ response = _context3.sent;
+ return _context3.abrupt('return', response.ok);
+ case 7:
+ _context3.prev = 7;
+ _context3.t0 = _context3['catch'](0);
+ return _context3.abrupt('return', false);
+ case 10:
+ case 'end':
+ return _context3.stop();
+ }
+ }
+ }, _callee3, null, [
+ [0,
+ 7]
+ ]);
+ }));
+ return _fileExists.apply(this, arguments);
+ }
+ if (fileType.match(/\.stl$/i)) {
+ this.httpDo(path, 'GET', 'arrayBuffer', function (arrayBuffer) {
+ parseSTL(model, arrayBuffer);
+ if (normalize) {
+ model.normalize();
+ }
+ if (flipU) {
+ model.flipU();
+ }
+ if (flipV) {
+ model.flipV();
+ }
+ self._decrementPreload();
+ if (typeof successCallback === 'function') {
+ successCallback(model);
+ }
+ }, failureCallback);
+ } else if (fileType.match(/\.obj$/i)) {
+ this.loadStrings(path, /*#__PURE__*/ function () {
+ var _ref = _asyncToGenerator( /*#__PURE__*/ regeneratorRuntime.mark(function _callee(lines) {
+ var parsedMaterials;
+ return regeneratorRuntime.wrap(function _callee$(_context) {
+ while (1) {
+ switch (_context.prev = _context.next) {
+ case 0:
+ _context.prev = 0;
+ _context.next = 3;
+ return getMaterials(lines);
+ case 3:
+ parsedMaterials = _context.sent;
+ parseObj(model, lines, parsedMaterials);
+ _context.next = 11;
+ break;
+ case 7:
+ _context.prev = 7;
+ _context.t0 = _context['catch'](0);
+ if (failureCallback) {
+ failureCallback(_context.t0);
+ } else {
+ _main.default._friendlyError('Error during parsing: ' + _context.t0.message);
+ }
+ return _context.abrupt('return');
+ case 11:
+ _context.prev = 11;
+ if (normalize) {
+ model.normalize();
+ }
+ if (flipU) {
+ model.flipU();
+ }
+ if (flipV) {
+ model.flipV();
+ }
+ self._decrementPreload();
+ if (typeof successCallback === 'function') {
+ successCallback(model);
+ }
+ return _context.finish(11);
+ case 18:
+ case 'end':
+ return _context.stop();
+ }
+ }
+ }, _callee, null, [
+ [0,
+ 7,
+ 11,
+ 18]
+ ]);
+ }));
+ return function (_x3) {
+ return _ref.apply(this, arguments);
+ };
+ }(), failureCallback);
+ } else {
+ _main.default._friendlyFileLoadError(3, path);
+ if (failureCallback) {
+ failureCallback();
+ } else {
+ _main.default._friendlyError('Sorry, the file type is invalid. Only OBJ and STL files are supported.');
+ }
+ }
+ return model;
+ };
+ function parseMtl(p5, mtlPath) {
+ return new Promise(function (resolve, reject) {
+ var currentMaterial = null;
+ var materials = {
+ };
+ p5.loadStrings(mtlPath, function (lines) {
+ for (var line = 0; line < lines.length; ++line) {
+ var tokens = lines[line].trim().split(/\s+/);
+ if (tokens[0] === 'newmtl') {
+ var materialName = tokens[1];
+ currentMaterial = materialName;
+ materials[currentMaterial] = {
+ };
+ } else if (tokens[0] === 'Kd') {
+ //Diffuse color
+ materials[currentMaterial].diffuseColor = [
+ parseFloat(tokens[1]),
+ parseFloat(tokens[2]),
+ parseFloat(tokens[3])
+ ];
+ } else if (tokens[0] === 'Ka') {
+ //Ambient Color
+ materials[currentMaterial].ambientColor = [
+ parseFloat(tokens[1]),
+ parseFloat(tokens[2]),
+ parseFloat(tokens[3])
+ ];
+ } else if (tokens[0] === 'Ks') {
+ //Specular color
+ materials[currentMaterial].specularColor = [
+ parseFloat(tokens[1]),
+ parseFloat(tokens[2]),
+ parseFloat(tokens[3])
+ ];
+ } else if (tokens[0] === 'map_Kd') {
+ //Texture path
+ materials[currentMaterial].texturePath = tokens[1];
+ }
+ }
+ resolve(materials);
+ }, reject);
+ });
+ } /**
+ * Parse OBJ lines into model. For reference, this is what a simple model of a
+ * square might look like:
+ *
+ * v -0.5 -0.5 0.5
+ * v -0.5 -0.5 -0.5
+ * v -0.5 0.5 -0.5
+ * v -0.5 0.5 0.5
+ *
+ * f 4 3 2 1
+ */
+
+ function parseObj(model, lines) {
+ var materials = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+ };
+ // OBJ allows a face to specify an index for a vertex (in the above example),
+ // but it also allows you to specify a custom combination of vertex, UV
+ // coordinate, and vertex normal. So, "3/4/3" would mean, "use vertex 3 with
+ // UV coordinate 4 and vertex normal 3". In WebGL, every vertex with different
+ // parameters must be a different vertex, so loadedVerts is used to
+ // temporarily store the parsed vertices, normals, etc., and indexedVerts is
+ // used to map a specific combination (keyed on, for example, the string
+ // "3/4/3"), to the actual index of the newly created vertex in the final
+ // object.
+ var loadedVerts = {
+ v: [
+ ],
+ vt: [
+ ],
+ vn: [
+ ]
+ };
+ // Map from source index → Map of material → destination index
+ var usedVerts = {
+ }; // Track colored vertices
+ var currentMaterial = null;
+ var coloredVerts = new Set(); //unique vertices with color
+ var hasColoredVertices = false;
+ var hasColorlessVertices = false;
+ for (var line = 0; line < lines.length; ++line) {
+ // Each line is a separate object (vertex, face, vertex normal, etc)
+ // For each line, split it into tokens on whitespace. The first token
+ // describes the type.
+ var tokens = lines[line].trim().split(/\b\s+/);
+ if (tokens.length > 0) {
+ if (tokens[0] === 'usemtl') {
+ // Switch to a new material
+ currentMaterial = tokens[1];
+ } else if (tokens[0] === 'v' || tokens[0] === 'vn') {
+ // Check if this line describes a vertex or vertex normal.
+ // It will have three numeric parameters.
+ var vertex = new _main.default.Vector(parseFloat(tokens[1]), parseFloat(tokens[2]), parseFloat(tokens[3]));
+ loadedVerts[tokens[0]].push(vertex);
+ } else if (tokens[0] === 'vt') {
+ // Check if this line describes a texture coordinate.
+ // It will have two numeric parameters U and V (W is omitted).
+ // Because of WebGL texture coordinates rendering behaviour, the V
+ // coordinate is inversed.
+ var texVertex = [
+ parseFloat(tokens[1]),
+ 1 - parseFloat(tokens[2])
+ ];
+ loadedVerts[tokens[0]].push(texVertex);
+ } else if (tokens[0] === 'f') {
+ // Check if this line describes a face.
+ // OBJ faces can have more than three points. Triangulate points.
+ for (var tri = 3; tri < tokens.length; ++tri) {
+ var face = [
+ ];
+ var vertexTokens = [
+ 1,
+ tri - 1,
+ tri
+ ];
+ for (var tokenInd = 0; tokenInd < vertexTokens.length; ++tokenInd) {
+ // Now, convert the given token into an index
+ var vertString = tokens[vertexTokens[tokenInd]];
+ var vertParts = vertString.split('/');
+ // TODO: Faces can technically use negative numbers to refer to the
+ // previous nth vertex. I haven't seen this used in practice, but
+ // it might be good to implement this in the future.
+ for (var i = 0; i < vertParts.length; i++) {
+ vertParts[i] = parseInt(vertParts[i]) - 1;
+ }
+ if (!usedVerts[vertString]) {
+ usedVerts[vertString] = {
+ };
+ }
+ if (usedVerts[vertString][currentMaterial] === undefined) {
+ var vertIndex = model.vertices.length;
+ model.vertices.push(loadedVerts.v[vertParts[0]].copy());
+ model.uvs.push(loadedVerts.vt[vertParts[1]] ? loadedVerts.vt[vertParts[1]].slice() : [
+ 0,
+ 0
+ ]);
+ model.vertexNormals.push(loadedVerts.vn[vertParts[2]] ? loadedVerts.vn[vertParts[2]].copy() : new _main.default.Vector());
+ usedVerts[vertString][currentMaterial] = vertIndex;
+ face.push(vertIndex);
+ if (currentMaterial && materials[currentMaterial] && materials[currentMaterial].diffuseColor) {
+ // Mark this vertex as colored
+ coloredVerts.add(loadedVerts.v[vertParts[0]]); //since a set would only push unique values
+ }
+ } else {
+ face.push(usedVerts[vertString][currentMaterial]);
+ }
+ }
+ if (face[0] !== face[1] && face[0] !== face[2] && face[1] !== face[2]) {
+ model.faces.push(face);
+ //same material for all vertices in a particular face
+ if (currentMaterial && materials[currentMaterial] && materials[currentMaterial].diffuseColor) {
+ hasColoredVertices = true;
+ //flag to track color or no color model
+ hasColoredVertices = true;
+ var materialDiffuseColor = materials[currentMaterial].diffuseColor;
+ for (var _i = 0; _i < face.length; _i++) {
+ model.vertexColors.push(materialDiffuseColor[0]);
+ model.vertexColors.push(materialDiffuseColor[1]);
+ model.vertexColors.push(materialDiffuseColor[2]);
+ }
+ } else {
+ hasColorlessVertices = true;
+ }
+ }
+ }
+ }
+ }
+ } // If the model doesn't have normals, compute the normals
+
+ if (model.vertexNormals.length === 0) {
+ model.computeNormals();
+ }
+ if (hasColoredVertices === hasColorlessVertices) {
+ // If both are true or both are false, throw an error because the model is inconsistent
+ throw new Error('Model coloring is inconsistent. Either all vertices should have colors or none should.');
+ }
+ return model;
+ } /**
+ * STL files can be of two types, ASCII and Binary,
+ *
+ * We need to convert the arrayBuffer to an array of strings,
+ * to parse it as an ASCII file.
+ */
+
+ function parseSTL(model, buffer) {
+ if (isBinary(buffer)) {
+ parseBinarySTL(model, buffer);
+ } else {
+ var reader = new DataView(buffer);
+ if (!('TextDecoder' in window)) {
+ console.warn('Sorry, ASCII STL loading only works in browsers that support TextDecoder (https://caniuse.com/#feat=textencoder)');
+ return model;
+ }
+ var decoder = new TextDecoder('utf-8');
+ var lines = decoder.decode(reader);
+ var lineArray = lines.split('\n');
+ parseASCIISTL(model, lineArray);
+ }
+ return model;
+ } /**
+ * This function checks if the file is in ASCII format or in Binary format
+ *
+ * It is done by searching keyword `solid` at the start of the file.
+ *
+ * An ASCII STL data must begin with `solid` as the first six bytes.
+ * However, ASCII STLs lacking the SPACE after the `d` are known to be
+ * plentiful. So, check the first 5 bytes for `solid`.
+ *
+ * Several encodings, such as UTF-8, precede the text with up to 5 bytes:
+ * https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding
+ * Search for `solid` to start anywhere after those prefixes.
+ */
+
+ function isBinary(data) {
+ var reader = new DataView(data);
+ // US-ASCII ordinal values for `s`, `o`, `l`, `i`, `d`
+ var solid = [
+ 115,
+ 111,
+ 108,
+ 105,
+ 100
+ ];
+ for (var off = 0; off < 5; off++) {
+ // If "solid" text is matched to the current offset, declare it to be an ASCII STL.
+ if (matchDataViewAt(solid, reader, off)) return false;
+ } // Couldn't find "solid" text at the beginning; it is binary STL.
+
+ return true;
+ } /**
+ * This function matches the `query` at the provided `offset`
+ */
+
+ function matchDataViewAt(query, reader, offset) {
+ // Check if each byte in query matches the corresponding byte from the current offset
+ for (var i = 0, il = query.length; i < il; i++) {
+ if (query[i] !== reader.getUint8(offset + i, false)) return false;
+ }
+ return true;
+ } /**
+ * This function parses the Binary STL files.
+ * https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL
+ *
+ * Currently there is no support for the colors provided in STL files.
+ */
+
+ function parseBinarySTL(model, buffer) {
+ var reader = new DataView(buffer);
+ // Number of faces is present following the header
+ var faces = reader.getUint32(80, true);
+ var r,
+ g,
+ b,
+ hasColors = false,
+ colors;
+ var defaultR,
+ defaultG,
+ defaultB;
+ // Binary files contain 80-byte header, which is generally ignored.
+ for (var index = 0; index < 80 - 10; index++) {
+ // Check for `COLOR=`
+ if (reader.getUint32(index, false) === 1129270351 /*COLO*/ && reader.getUint8(index + 4) === 82 /*'R'*/ && reader.getUint8(index + 5) === 61 /*'='*/ ) {
+ hasColors = true;
+ colors = [
+ ];
+ defaultR = reader.getUint8(index + 6) / 255;
+ defaultG = reader.getUint8(index + 7) / 255;
+ defaultB = reader.getUint8(index + 8) / 255;
+ // To be used when color support is added
+ // alpha = reader.getUint8(index + 9) / 255;
+ }
+ }
+ var dataOffset = 84;
+ var faceLength = 12 * 4 + 2;
+ // Iterate the faces
+ for (var face = 0; face < faces; face++) {
+ var start = dataOffset + face * faceLength;
+ var normalX = reader.getFloat32(start, true);
+ var normalY = reader.getFloat32(start + 4, true);
+ var normalZ = reader.getFloat32(start + 8, true);
+ if (hasColors) {
+ var packedColor = reader.getUint16(start + 48, true);
+ if ((packedColor & 32768) === 0) {
+ // facet has its own unique color
+ r = (packedColor & 31) / 31;
+ g = (packedColor >> 5 & 31) / 31;
+ b = (packedColor >> 10 & 31) / 31;
+ } else {
+ r = defaultR;
+ g = defaultG;
+ b = defaultB;
+ }
+ }
+ var newNormal = new _main.default.Vector(normalX, normalY, normalZ);
+ for (var i = 1; i <= 3; i++) {
+ var vertexstart = start + i * 12;
+ var newVertex = new _main.default.Vector(reader.getFloat32(vertexstart, true), reader.getFloat32(vertexstart + 4, true), reader.getFloat32(vertexstart + 8, true));
+ model.vertices.push(newVertex);
+ model.vertexNormals.push(newNormal);
+ if (hasColors) {
+ colors.push(r, g, b);
+ }
+ }
+ model.faces.push([3 * face,
+ 3 * face + 1,
+ 3 * face + 2]);
+ model.uvs.push([0,
+ 0], [
+ 0,
+ 0
+ ], [
+ 0,
+ 0
+ ]);
+ }
+ if (hasColors) {
+ // add support for colors here.
+ }
+ return model;
+ } /**
+ * ASCII STL file starts with `solid 'nameOfFile'`
+ * Then contain the normal of the face, starting with `facet normal`
+ * Next contain a keyword indicating the start of face vertex, `outer loop`
+ * Next comes the three vertex, starting with `vertex x y z`
+ * Vertices ends with `endloop`
+ * Face ends with `endfacet`
+ * Next face starts with `facet normal`
+ * The end of the file is indicated by `endsolid`
+ */
+
+ function parseASCIISTL(model, lines) {
+ var state = '';
+ var curVertexIndex = [
+ ];
+ var newNormal,
+ newVertex;
+ for (var iterator = 0; iterator < lines.length; ++iterator) {
+ var line = lines[iterator].trim();
+ var parts = line.split(' ');
+ for (var partsiterator = 0; partsiterator < parts.length; ++partsiterator) {
+ if (parts[partsiterator] === '') {
+ // Ignoring multiple whitespaces
+ parts.splice(partsiterator, 1);
+ }
+ }
+ if (parts.length === 0) {
+ // Remove newline
+ continue;
+ }
+ switch (state) {
+ case '':
+ // First run
+ if (parts[0] !== 'solid') {
+ // Invalid state
+ console.error(line);
+ console.error('Invalid state "'.concat(parts[0], '", should be "solid"'));
+ return;
+ } else {
+ state = 'solid';
+ }
+ break;
+ case 'solid':
+ // First face
+ if (parts[0] !== 'facet' || parts[1] !== 'normal') {
+ // Invalid state
+ console.error(line);
+ console.error('Invalid state "'.concat(parts[0], '", should be "facet normal"'));
+ return;
+ } else {
+ // Push normal for first face
+ newNormal = new _main.default.Vector(parseFloat(parts[2]), parseFloat(parts[3]), parseFloat(parts[4]));
+ model.vertexNormals.push(newNormal, newNormal, newNormal);
+ state = 'facet normal';
+ }
+ break;
+ case 'facet normal':
+ // After normal is defined
+ if (parts[0] !== 'outer' || parts[1] !== 'loop') {
+ // Invalid State
+ console.error(line);
+ console.error('Invalid state "'.concat(parts[0], '", should be "outer loop"'));
+ return;
+ } else {
+ // Next should be vertices
+ state = 'vertex';
+ }
+ break;
+ case 'vertex':
+ if (parts[0] === 'vertex') {
+ //Vertex of triangle
+ newVertex = new _main.default.Vector(parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3]));
+ model.vertices.push(newVertex);
+ model.uvs.push([0,
+ 0]);
+ curVertexIndex.push(model.vertices.indexOf(newVertex));
+ } else if (parts[0] === 'endloop') {
+ // End of vertices
+ model.faces.push(curVertexIndex);
+ curVertexIndex = [
+ ];
+ state = 'endloop';
+ } else {
+ // Invalid State
+ console.error(line);
+ console.error('Invalid state "'.concat(parts[0], '", should be "vertex" or "endloop"'));
+ return;
+ }
+ break;
+ case 'endloop':
+ if (parts[0] !== 'endfacet') {
+ // End of face
+ console.error(line);
+ console.error('Invalid state "'.concat(parts[0], '", should be "endfacet"'));
+ return;
+ } else {
+ state = 'endfacet';
+ }
+ break;
+ case 'endfacet':
+ if (parts[0] === 'endsolid') {
+ // End of solid
+ } else if (parts[0] === 'facet' && parts[1] === 'normal') {
+ // Next face
+ newNormal = new _main.default.Vector(parseFloat(parts[2]), parseFloat(parts[3]), parseFloat(parts[4]));
+ model.vertexNormals.push(newNormal, newNormal, newNormal);
+ state = 'facet normal';
+ } else {
+ // Invalid State
+ console.error(line);
+ console.error('Invalid state "'.concat(parts[0], '", should be "endsolid" or "facet normal"'));
+ return;
+ }
+ break;
+ default:
+ console.error('Invalid state "'.concat(state, '"'));
+ break;
+ }
+ }
+ return model;
+ } /**
+ * Draws a p5.Geometry object to the canvas.
+ *
+ * The parameter, `model`, is the
+ * p5.Geometry object to draw.
+ * p5.Geometry objects can be built with
+ * buildGeometry(), or
+ * beginGeometry() and
+ * endGeometry(). They can also be loaded from
+ * a file with loadGeometry().
+ *
+ * Note: `model()` can only be used in WebGL mode.
+ *
+ * @method model
+ * @param {p5.Geometry} model 3D shape to be drawn.
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ * let options = {
+ * normalize: true,
+ * successCallback: handleModel,
+ * failureCallback: handleError,
+ * fileType: '.obj'
+ * };
+ *
+ * // Load the file and create a p5.Geometry object.
+ * function preload() {
+ * loadModel('assets/teapot.obj', options);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white teapot drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the shape.
+ * model(shape);
+ * }
+ *
+ * // Set the shape variable and print the geometry's
+ * // ID to the console.
+ * function handleModel(data) {
+ * shape = data;
+ * console.log(shape.gid);
+ * }
+ *
+ * // Print an error message if the file doesn't load.
+ * function handleError(error) {
+ * console.error('Oops!', error);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the p5.Geometry object.
+ * shape = buildGeometry(createShape);
+ *
+ * describe('A white cone drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the p5.Geometry object.
+ * model(shape);
+ * }
+ *
+ * // Create p5.Geometry object from a single cone.
+ * function createShape() {
+ * cone();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the p5.Geometry object.
+ * shape = buildGeometry(createArrow);
+ *
+ * describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the arrows.
+ * noStroke();
+ *
+ * // Draw the p5.Geometry object.
+ * model(shape);
+ *
+ * // Translate and rotate the coordinate system.
+ * translate(30, 0, 0);
+ * rotateZ(frameCount * 0.01);
+ *
+ * // Draw the p5.Geometry object again.
+ * model(shape);
+ * }
+ *
+ * function createArrow() {
+ * // Add shapes to the p5.Geometry object.
+ * push();
+ * rotateX(PI);
+ * cone(10);
+ * translate(0, -10, 0);
+ * cylinder(3, 20);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.model = function (model) {
+ this._assert3d('model');
+ _main.default._validateParameters('model', arguments);
+ if (model.vertices.length > 0) {
+ if (!this._renderer.geometryInHash(model.gid)) {
+ if (model.edges.length === 0) {
+ model._makeTriangleEdges();
+ }
+ model._edgesToVertices();
+ this._renderer.createBuffers(model.gid, model);
+ }
+ this._renderer.drawBuffers(model.gid);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ './p5.Geometry': 355,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.splice': 188,
+ 'core-js/modules/es.object.assign': 199,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.promise': 206,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.set': 212,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.match': 216,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.string.trim': 224,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261,
+ 'regenerator-runtime/runtime': 279
+ }
+ ],
+ 351: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Texture');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module 3D
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Loads vertex and fragment shaders to create a
+ * p5.Shader object.
+ *
+ * Shaders are programs that run on the graphics processing unit (GPU). They
+ * can process many pixels at the same time, making them fast for many
+ * graphics tasks. They’re written in a language called
+ * GLSL
+ * and run along with the rest of the code in a sketch.
+ *
+ * Once the p5.Shader object is created, it can be
+ * used with the shader() function, as in
+ * `shader(myShader)`. A shader program consists of two files, a vertex shader
+ * and a fragment shader. The vertex shader affects where 3D geometry is drawn
+ * on the screen and the fragment shader affects color.
+ *
+ * `loadShader()` loads the vertex and fragment shaders from their `.vert` and
+ * `.frag` files. For example, calling
+ * `loadShader('assets/shader.vert', 'assets/shader.frag')` loads both
+ * required shaders and returns a p5.Shader object.
+ *
+ * The third parameter, `successCallback`, is optional. If a function is
+ * passed, it will be called once the shader has loaded. The callback function
+ * can use the new p5.Shader object as its
+ * parameter.
+ *
+ * The fourth parameter, `failureCallback`, is also optional. If a function is
+ * passed, it will be called if the shader fails to load. The callback
+ * function can use the event error as its parameter.
+ *
+ * Shaders can take time to load. Calling `loadShader()` in
+ * preload() ensures shaders load before they're
+ * used in setup() or draw().
+ *
+ * Note: Shaders can only be used in WebGL mode.
+ *
+ * @method loadShader
+ * @param {String} vertFilename path of the vertex shader to be loaded.
+ * @param {String} fragFilename path of the fragment shader to be loaded.
+ * @param {function} [successCallback] function to call once the shader is loaded. Can be passed the
+ * p5.Shader object.
+ * @param {function} [failureCallback] function to call if the shader fails to load. Can be passed an
+ * `Error` event object.
+ * @return {p5.Shader} new shader created from the vertex and fragment shader files.
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let shape;
+ *
+ * // Load the file and create a p5.Geometry object.
+ * function preload() {
+ * shape = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white octahedron drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the shape.
+ * model(shape);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * let mandelbrot;
+ *
+ * // Load the shader and create a p5.Shader object.
+ * function preload() {
+ * mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Compile and apply the p5.Shader object.
+ * shader(mandelbrot);
+ *
+ * // Set the shader uniform p to an array.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *
+ * // Set the shader uniform r to the value 1.5.
+ * mandelbrot.setUniform('r', 1.5);
+ *
+ * // Add a quad as a display surface for the shader.
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ *
+ * describe('A black fractal image on a magenta background.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.loadShader = function (vertFilename, fragFilename, successCallback, failureCallback) {
+ _main.default._validateParameters('loadShader', arguments);
+ if (!failureCallback) {
+ failureCallback = console.error;
+ }
+ var loadedShader = new _main.default.Shader();
+ var self = this;
+ var loadedFrag = false;
+ var loadedVert = false;
+ var onLoad = function onLoad() {
+ self._decrementPreload();
+ if (successCallback) {
+ successCallback(loadedShader);
+ }
+ };
+ this.loadStrings(vertFilename, function (result) {
+ loadedShader._vertSrc = result.join('\n');
+ loadedVert = true;
+ if (loadedFrag) {
+ onLoad();
+ }
+ }, failureCallback);
+ this.loadStrings(fragFilename, function (result) {
+ loadedShader._fragSrc = result.join('\n');
+ loadedFrag = true;
+ if (loadedVert) {
+ onLoad();
+ }
+ }, failureCallback);
+ return loadedShader;
+ };
+ /**
+ * Creates a new p5.Shader object.
+ *
+ * Shaders are programs that run on the graphics processing unit (GPU). They
+ * can process many pixels at the same time, making them fast for many
+ * graphics tasks. They’re written in a language called
+ * GLSL
+ * and run along with the rest of the code in a sketch.
+ *
+ * Once the p5.Shader object is created, it can be
+ * used with the shader() function, as in
+ * `shader(myShader)`. A shader program consists of two parts, a vertex shader
+ * and a fragment shader. The vertex shader affects where 3D geometry is drawn
+ * on the screen and the fragment shader affects color.
+ *
+ * The first parameter, `vertSrc`, sets the vertex shader. It’s a string that
+ * contains the vertex shader program written in GLSL.
+ *
+ * The second parameter, `fragSrc`, sets the fragment shader. It’s a string
+ * that contains the fragment shader program written in GLSL.
+ *
+ * Note: Only filter shaders can be used in 2D mode. All shaders can be used
+ * in WebGL mode.
+ *
+ * @method createShader
+ * @param {String} vertSrc source code for the vertex shader.
+ * @param {String} fragSrc source code for the fragment shader.
+ * @returns {p5.Shader} new shader object created from the
+ * vertex and fragment shaders.
+ *
+ * @example
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * let mandelbrot;
+ *
+ * // Load the shader and create a p5.Shader object.
+ * function preload() {
+ * mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Use the p5.Shader object.
+ * shader(mandelbrot);
+ *
+ * // Set the shader uniform p to an array.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *
+ * describe('A fractal image zooms in and out of focus.');
+ * }
+ *
+ * function draw() {
+ * // Set the shader uniform r to a value that oscillates between 0 and 2.
+ * mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+ *
+ * // Add a quad as a display surface for the shader.
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ *
+ * void main() {
+ * // Set each pixel's RGBA value to yellow.
+ * gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+ * }
+ * `;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * let shaderProgram = createShader(vertSrc, fragSrc);
+ *
+ * // Compile and apply the p5.Shader object.
+ * shader(shaderProgram);
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ *
+ * describe('A yellow square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ * uniform vec2 p;
+ * uniform float r;
+ * const int numIterations = 500;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vec2 c = p + gl_FragCoord.xy * r;
+ * vec2 z = c;
+ * float n = 0.0;
+ *
+ * for (int i = numIterations; i > 0; i--) {
+ * if (z.x * z.x + z.y * z.y > 4.0) {
+ * n = float(i) / float(numIterations);
+ * break;
+ * }
+ * z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+ * }
+ *
+ * gl_FragColor = vec4(
+ * 0.5 - cos(n * 17.0) / 2.0,
+ * 0.5 - cos(n * 13.0) / 2.0,
+ * 0.5 - cos(n * 23.0) / 2.0,
+ * 1.0
+ * );
+ * }
+ * `;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * let mandelbrot = createShader(vertSrc, fragSrc);
+ *
+ * // Compile and apply the p5.Shader object.
+ * shader(mandelbrot);
+ *
+ * // Set the shader uniform p to an array.
+ * // p is the center point of the Mandelbrot image.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *
+ * // Set the shader uniform r to 0.005.
+ * // r is the size of the image in Mandelbrot-space.
+ * mandelbrot.setUniform('r', 0.005);
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ *
+ * describe('A black fractal image on a magenta background.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createShader = function (vertSrc, fragSrc) {
+ _main.default._validateParameters('createShader', arguments);
+ return new _main.default.Shader(this._renderer, vertSrc, fragSrc);
+ };
+ /**
+ * Creates a p5.Shader object to be used with the
+ * filter() function.
+ *
+ * `createFilterShader()` works like
+ * createShader() but has a default vertex
+ * shader included. `createFilterShader()` is intended to be used along with
+ * filter() for filtering the contents of a canvas.
+ * A filter shader will be applied to the whole canvas instead of just
+ * p5.Geometry objects.
+ *
+ * The parameter, `fragSrc`, sets the fragment shader. It’s a string that
+ * contains the fragment shader program written in
+ * GLSL.
+ *
+ * The p5.Shader object that's created has some
+ * uniforms that can be set:
+ * - `sampler2D tex0`, which contains the canvas contents as a texture.
+ * - `vec2 canvasSize`, which is the width and height of the canvas, not including pixel density.
+ * - `vec2 texelSize`, which is the size of a physical pixel including pixel density. This is calculated as `1.0 / (width * density)` for the pixel width and `1.0 / (height * density)` for the pixel height.
+ *
+ * The p5.Shader that's created also provides
+ * `varying vec2 vTexCoord`, a coordinate with values between 0 and 1.
+ * `vTexCoord` describes where on the canvas the pixel will be drawn.
+ *
+ * For more info about filters and shaders, see Adam Ferriss' repo of shader examples
+ * or the Introduction to Shaders tutorial.
+ *
+ * @method createFilterShader
+ * @param {String} fragSrc source code for the fragment shader.
+ * @returns {p5.Shader} new shader object created from the fragment shader.
+ *
+ * @example
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ * uniform vec2 p;
+ * uniform float r;
+ * const int numIterations = 500;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vec2 c = p + gl_FragCoord.xy * r;
+ * vec2 z = c;
+ * float n = 0.0;
+ *
+ * for (int i = numIterations; i > 0; i--) {
+ * if (z.x * z.x + z.y * z.y > 4.0) {
+ * n = float(i) / float(numIterations);
+ * break;
+ * }
+ *
+ * z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+ * }
+ *
+ * gl_FragColor = vec4(
+ * 0.5 - cos(n * 17.0) / 2.0,
+ * 0.5 - cos(n * 13.0) / 2.0,
+ * 0.5 - cos(n * 23.0) / 2.0,
+ * 1.0
+ * );
+ * }
+ * `;
+ *
+ * let mandelbrot;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * mandelbrot = createShader(vertSrc, fragSrc);
+ *
+ * // Apply the p5.Shader object.
+ * shader(mandelbrot);
+ *
+ * // Set the shader uniform p to an array.
+ * // p is the center point of the Mandelbrot image.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *
+ * describe('A fractal image zooms in and out of focus.');
+ * }
+ *
+ * function draw() {
+ * // Set the shader uniform r to a value that oscillates
+ * // between 0 and 0.005.
+ * // r is the size of the image in Mandelbrot-space.
+ * let radius = 0.005 * (sin(frameCount * 0.01) + 1);
+ * mandelbrot.setUniform('r', radius);
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * let fragSrc = `precision highp float;
+ * void main() {
+ * gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+ * }`;
+ *
+ * createCanvas(100, 100, WEBGL);
+ * let s = createFilterShader(fragSrc);
+ * filter(s);
+ * describe('a yellow canvas');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createFilterShader = function (fragSrc) {
+ _main.default._validateParameters('createFilterShader', arguments);
+ var defaultVertV1 = '\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n\n attribute vec3 aPosition;\n // texcoords only come from p5 to vertex shader\n // so pass texcoords on to the fragment shader in a varying variable\n attribute vec2 aTexCoord;\n varying vec2 vTexCoord;\n\n void main() {\n // transferring texcoords for the frag shader\n vTexCoord = aTexCoord;\n\n // copy position with a fourth coordinate for projection (1.0 is normal)\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // project to 3D space\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n }\n ';
+ var defaultVertV2 = '#version 300 es\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n\n in vec3 aPosition;\n in vec2 aTexCoord;\n out vec2 vTexCoord;\n\n void main() {\n // transferring texcoords for the frag shader\n vTexCoord = aTexCoord;\n\n // copy position with a fourth coordinate for projection (1.0 is normal)\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // project to 3D space\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n }\n ';
+ var vertSrc = fragSrc.includes('#version 300 es') ? defaultVertV2 : defaultVertV1;
+ var shader = new _main.default.Shader(this._renderer, vertSrc, fragSrc);
+ if (this._renderer.GL) {
+ shader.ensureCompiledOnContext(this);
+ } else {
+ shader.ensureCompiledOnContext(this._renderer.getFilterGraphicsLayer());
+ }
+ return shader;
+ };
+ /**
+ * Sets the p5.Shader object to apply while drawing.
+ *
+ * Shaders are programs that run on the graphics processing unit (GPU). They
+ * can process many pixels or vertices at the same time, making them fast for
+ * many graphics tasks. They’re written in a language called
+ * GLSL
+ * and run along with the rest of the code in a sketch.
+ * p5.Shader objects can be created using the
+ * createShader() and
+ * loadShader() functions.
+ *
+ * The parameter, `s`, is the p5.Shader object to
+ * apply. For example, calling `shader(myShader)` applies `myShader` to
+ * process each pixel on the canvas. The shader will be used for:
+ * - Fills when a texture is enabled if it includes a uniform `sampler2D`.
+ * - Fills when lights are enabled if it includes the attribute `aNormal`, or if it has any of the following uniforms: `uUseLighting`, `uAmbientLightCount`, `uDirectionalLightCount`, `uPointLightCount`, `uAmbientColor`, `uDirectionalDiffuseColors`, `uDirectionalSpecularColors`, `uPointLightLocation`, `uPointLightDiffuseColors`, `uPointLightSpecularColors`, `uLightingDirection`, or `uSpecular`.
+ * - Fills whenever there are no lights or textures.
+ * - Strokes if it includes the uniform `uStrokeWeight`.
+ *
+ * The source code from a p5.Shader object's
+ * fragment and vertex shaders will be compiled the first time it's passed to
+ * `shader()`. See
+ * MDN
+ * for more information about compiling shaders.
+ *
+ * Calling resetShader() restores a sketch’s
+ * default shaders.
+ *
+ * Note: Shaders can only be used in WebGL mode.
+ *
+ * @method shader
+ * @chainable
+ * @param {p5.Shader} s p5.Shader object
+ * to apply.
+ *
+ * @example
+ *
+ * let img, s;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * let fragSrc = `precision highp float;
+ *
+ * // x,y coordinates, given from the vertex shader
+ * varying vec2 vTexCoord;
+ *
+ * // the canvas contents, given from filter()
+ * uniform sampler2D tex0;
+ * // other useful information from the canvas
+ * uniform vec2 texelSize;
+ * uniform vec2 canvasSize;
+ * // a custom variable from this sketch
+ * uniform float darkness;
+ *
+ * void main() {
+ * // get the color at current pixel
+ * vec4 color = texture2D(tex0, vTexCoord);
+ * // set the output color
+ * color.b = 1.0;
+ * color *= darkness;
+ * gl_FragColor = vec4(color.rgb, 1.0);
+ * }`;
+ *
+ * createCanvas(100, 100, WEBGL);
+ * s = createFilterShader(fragSrc);
+ * }
+ * function draw() {
+ * image(img, -50, -50);
+ * s.setUniform('darkness', 0.5);
+ * filter(s);
+ * describe('a image of bricks tinted dark blue');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ *
+ * void main() {
+ * // Set each pixel's RGBA value to yellow.
+ * gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+ * }
+ * `;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * let shaderProgram = createShader(vertSrc, fragSrc);
+ *
+ * // Apply the p5.Shader object.
+ * shader(shaderProgram);
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ *
+ * describe('A yellow square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * let mandelbrot;
+ *
+ * // Load the shader and create a p5.Shader object.
+ * function preload() {
+ * mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Use the p5.Shader object.
+ * shader(mandelbrot);
+ *
+ * // Set the shader uniform p to an array.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *
+ * describe('A fractal image zooms in and out of focus.');
+ * }
+ *
+ * function draw() {
+ * // Set the shader uniform r to a value that oscillates between 0 and 2.
+ * mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+ *
+ * // Add a quad as a display surface for the shader.
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.shader = function (s) {
+ this._assert3d('shader');
+ _main.default._validateParameters('shader', arguments);
+ s.ensureCompiledOnContext(this);
+ if (s.isStrokeShader()) {
+ this._renderer.userStrokeShader = s;
+ } else {
+ this._renderer.userFillShader = s;
+ this._renderer._useNormalMaterial = false;
+ }
+ return this;
+ };
+ /**
+ * Restores the default shaders.
+ *
+ * `resetShader()` deactivates any shaders previously applied by
+ * shader().
+ *
+ * Note: Shaders can only be used in WebGL mode.
+ *
+ * @method resetShader
+ * @chainable
+ *
+ * @example
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * let redGreen;
+ * let orangeBlue;
+ * let showRedGreen = false;
+ *
+ * // Load the shader and create two separate p5.Shader objects.
+ * function preload() {
+ * redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Initialize the redGreen shader.
+ * shader(redGreen);
+ *
+ * // Set the redGreen shader's center and background color.
+ * redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+ * redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+ *
+ * // Initialize the orangeBlue shader.
+ * shader(orangeBlue);
+ *
+ * // Set the orangeBlue shader's center and background color.
+ * orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+ * orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+ *
+ * describe(
+ * 'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Update the offset values for each shader.
+ * // Move orangeBlue vertically.
+ * // Move redGreen horizontally.
+ * orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);
+ * redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);
+ *
+ * if (showRedGreen === true) {
+ * shader(redGreen);
+ * } else {
+ * shader(orangeBlue);
+ * }
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Add a quad as a drawing surface.
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * // Toggle between shaders when the user double-clicks.
+ * function doubleClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.resetShader = function () {
+ this._renderer.userFillShader = this._renderer.userStrokeShader = null;
+ return this;
+ };
+ /**
+ * Sets the texture that will be used on shapes.
+ *
+ * A texture is like a skin that wraps around a shape. `texture()` works with
+ * built-in shapes, such as square() and
+ * sphere(), and custom shapes created with
+ * functions such as buildGeometry(). To
+ * texture a geometry created with beginShape(),
+ * uv coordinates must be passed to each
+ * vertex() call.
+ *
+ * The parameter, `tex`, is the texture to apply. `texture()` can use a range
+ * of sources including images, videos, and offscreen renderers such as
+ * p5.Graphics and
+ * p5.Framebuffer objects.
+ *
+ * To texture a geometry created with beginShape(),
+ * you will need to specify uv coordinates in vertex().
+ *
+ * Note: `texture()` can only be used in WebGL mode.
+ *
+ * @method texture
+ * @param {p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} tex media to use as the texture.
+ * @chainable
+ *
+ * @example
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * uniform mat4 uProjectionMatrix;
+ * uniform mat4 uModelViewMatrix;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 position = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * position;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision mediump float;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vec2 uv = vTexCoord;
+ * vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
+ * gl_FragColor = vec4(color, 1.0);
+ * }
+ * `;
+ *
+ * let myShader;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * myShader = createShader(vertSrc, fragSrc);
+ *
+ * describe(
+ * 'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a box using the p5.Shader.
+ * // shader() sets the active shader to myShader.
+ * shader(myShader);
+ * push();
+ * translate(-25, 0, 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(width / 4);
+ * pop();
+ *
+ * // Draw a box using the default fill shader.
+ * // resetShader() restores the default fill shader.
+ * resetShader();
+ * fill(255, 0, 0);
+ * push();
+ * translate(25, 0, 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(width / 4);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load an image and create a p5.Image object.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A spinning cube with an image of a ceiling on each face.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Rotate around the x-, y-, and z-axes.
+ * rotateZ(frameCount * 0.01);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the box.
+ * box(50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Graphics object.
+ * pg = createGraphics(100, 100);
+ *
+ * // Draw a circle to the p5.Graphics object.
+ * pg.background(200);
+ * pg.circle(50, 50, 30);
+ *
+ * describe('A spinning cube with circle at the center of each face.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Rotate around the x-, y-, and z-axes.
+ * rotateZ(frameCount * 0.01);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ *
+ * // Apply the p5.Graphics object as a texture.
+ * texture(pg);
+ *
+ * // Draw the box.
+ * box(50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let vid;
+ *
+ * // Load a video and create a p5.MediaElement object.
+ * function preload() {
+ * vid = createVideo('assets/fingers.mov');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Hide the video.
+ * vid.hide();
+ *
+ * // Set the video to loop.
+ * vid.loop();
+ *
+ * describe('A rectangle with video as texture');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Apply the video as a texture.
+ * texture(vid);
+ *
+ * // Draw the rectangle.
+ * rect(-40, -40, 80, 80);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.texture = function (tex) {
+ this._assert3d('texture');
+ _main.default._validateParameters('texture', arguments);
+ if (tex.gifProperties) {
+ tex._animateGif(this);
+ }
+ this._renderer.drawMode = constants.TEXTURE;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._tex = tex;
+ this._renderer._setProperty('_doFill', true);
+ return this;
+ };
+ /**
+ * Changes the coordinate system used for textures when they’re applied to
+ * custom shapes.
+ *
+ * In order for texture() to work, a shape needs a
+ * way to map the points on its surface to the pixels in an image. Built-in
+ * shapes such as rect() and
+ * box() already have these texture mappings based on
+ * their vertices. Custom shapes created with
+ * vertex() require texture mappings to be passed as
+ * uv coordinates.
+ *
+ * Each call to vertex() must include 5 arguments,
+ * as in `vertex(x, y, z, u, v)`, to map the vertex at coordinates `(x, y, z)`
+ * to the pixel at coordinates `(u, v)` within an image. For example, the
+ * corners of a rectangular image are mapped to the corners of a rectangle by default:
+ *
+ *
+ * let vid;
+ *
+ * // Load a video and create a p5.MediaElement object.
+ * function preload() {
+ * vid = createVideo('assets/fingers.mov');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Hide the video.
+ * vid.hide();
+ *
+ * // Set the video to loop.
+ * vid.loop();
+ *
+ * describe('A rectangle with video as texture');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ *
+ * // Apply the video as a texture.
+ * texture(vid);
+ *
+ * // Draw a custom shape using uv coordinates.
+ * beginShape();
+ * vertex(-40, -40, 0, 0);
+ * vertex(40, -40, 1, 0);
+ * vertex(40, 40, 1, 1);
+ * vertex(-40, 40, 0, 1);
+ * endShape();
+ * }
+ *
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the rectangle.
+ * rect(0, 0, 30, 50);
+ *
+ *
+ * If the image in the code snippet above has dimensions of 300 x 500 pixels,
+ * the same result could be achieved as follows:
+ *
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the rectangle.
+ * beginShape();
+ *
+ * // Top-left.
+ * // u: 0, v: 0
+ * vertex(0, 0, 0, 0, 0);
+ *
+ * // Top-right.
+ * // u: 300, v: 0
+ * vertex(30, 0, 0, 300, 0);
+ *
+ * // Bottom-right.
+ * // u: 300, v: 500
+ * vertex(30, 50, 0, 300, 500);
+ *
+ * // Bottom-left.
+ * // u: 0, v: 500
+ * vertex(0, 50, 0, 0, 500);
+ *
+ * endShape();
+ *
+ *
+ * `textureMode()` changes the coordinate system for uv coordinates.
+ *
+ * The parameter, `mode`, accepts two possible constants. If `NORMAL` is
+ * passed, as in `textureMode(NORMAL)`, then the texture’s uv coordinates can
+ * be provided in the range 0 to 1 instead of the image’s dimensions. This can
+ * be helpful for using the same code for multiple images of different sizes.
+ * For example, the code snippet above could be rewritten as follows:
+ *
+ *
+ * // Set the texture mode to use normalized coordinates.
+ * textureMode(NORMAL);
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the rectangle.
+ * beginShape();
+ *
+ * // Top-left.
+ * // u: 0, v: 0
+ * vertex(0, 0, 0, 0, 0);
+ *
+ * // Top-right.
+ * // u: 1, v: 0
+ * vertex(30, 0, 0, 1, 0);
+ *
+ * // Bottom-right.
+ * // u: 1, v: 1
+ * vertex(30, 50, 0, 1, 1);
+ *
+ * // Bottom-left.
+ * // u: 0, v: 1
+ * vertex(0, 50, 0, 0, 1);
+ *
+ * endShape();
+ *
+ *
+ * By default, `mode` is `IMAGE`, which scales uv coordinates to the
+ * dimensions of the image. Calling `textureMode(IMAGE)` applies the default.
+ *
+ * Note: `textureMode()` can only be used in WebGL mode.
+ *
+ * @method textureMode
+ * @param {Constant} mode either IMAGE or NORMAL.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load an image and create a p5.Image object.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('An image of a ceiling against a black background.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the custom shape.
+ * // Use the image's width and height as uv coordinates.
+ * beginShape();
+ * vertex(-30, -30, 0, 0);
+ * vertex(30, -30, img.width, 0);
+ * vertex(30, 30, img.width, img.height);
+ * vertex(-30, 30, 0, img.height);
+ * endShape();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.textureMode = function (mode) {
+ if (mode !== constants.IMAGE && mode !== constants.NORMAL) {
+ console.warn('You tried to set '.concat(mode, ' textureMode only supports IMAGE & NORMAL '));
+ } else {
+ this._renderer.textureMode = mode;
+ }
+ };
+ /**
+ * Changes the way textures behave when a shape’s uv coordinates go beyond the
+ * texture.
+ *
+ * In order for texture() to work, a shape needs a
+ * way to map the points on its surface to the pixels in an image. Built-in
+ * shapes such as rect() and
+ * box() already have these texture mappings based on
+ * their vertices. Custom shapes created with
+ * vertex() require texture mappings to be passed as
+ * uv coordinates.
+ *
+ * Each call to vertex() must include 5 arguments,
+ * as in `vertex(x, y, z, u, v)`, to map the vertex at coordinates `(x, y, z)`
+ * to the pixel at coordinates `(u, v)` within an image. For example, the
+ * corners of a rectangular image are mapped to the corners of a rectangle by default:
+ *
+ *
+ * let img;
+ *
+ * // Load an image and create a p5.Image object.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('An image of a ceiling against a black background.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the custom shape.
+ * // Use normalized uv coordinates.
+ * beginShape();
+ * vertex(-30, -30, 0, 0);
+ * vertex(30, -30, 1, 0);
+ * vertex(30, 30, 1, 1);
+ * vertex(-30, 30, 0, 1);
+ * endShape();
+ * }
+ *
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the rectangle.
+ * rect(0, 0, 30, 50);
+ *
+ *
+ * If the image in the code snippet above has dimensions of 300 x 500 pixels,
+ * the same result could be achieved as follows:
+ *
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the rectangle.
+ * beginShape();
+ *
+ * // Top-left.
+ * // u: 0, v: 0
+ * vertex(0, 0, 0, 0, 0);
+ *
+ * // Top-right.
+ * // u: 300, v: 0
+ * vertex(30, 0, 0, 300, 0);
+ *
+ * // Bottom-right.
+ * // u: 300, v: 500
+ * vertex(30, 50, 0, 300, 500);
+ *
+ * // Bottom-left.
+ * // u: 0, v: 500
+ * vertex(0, 50, 0, 0, 500);
+ *
+ * endShape();
+ *
+ *
+ * `textureWrap()` controls how textures behave when their uv's go beyond the
+ * texture. Doing so can produce interesting visual effects such as tiling.
+ * For example, the custom shape above could have u-coordinates are greater
+ * than the image’s width:
+ *
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Draw the rectangle.
+ * beginShape();
+ * vertex(0, 0, 0, 0, 0);
+ *
+ * // Top-right.
+ * // u: 600
+ * vertex(30, 0, 0, 600, 0);
+ *
+ * // Bottom-right.
+ * // u: 600
+ * vertex(30, 50, 0, 600, 500);
+ *
+ * vertex(0, 50, 0, 0, 500);
+ * endShape();
+ *
+ *
+ * The u-coordinates of 600 are greater than the texture image’s width of 300.
+ * This creates interesting possibilities.
+ *
+ * The first parameter, `wrapX`, accepts three possible constants. If `CLAMP`
+ * is passed, as in `textureWrap(CLAMP)`, the pixels at the edge of the
+ * texture will extend to the shape’s edges. If `REPEAT` is passed, as in
+ * `textureWrap(REPEAT)`, the texture will tile repeatedly until reaching the
+ * shape’s edges. If `MIRROR` is passed, as in `textureWrap(MIRROR)`, the
+ * texture will tile repeatedly until reaching the shape’s edges, flipping
+ * its orientation between tiles. By default, textures `CLAMP`.
+ *
+ * The second parameter, `wrapY`, is optional. It accepts the same three
+ * constants, `CLAMP`, `REPEAT`, and `MIRROR`. If one of these constants is
+ * passed, as in `textureWRAP(MIRROR, REPEAT)`, then the texture will `MIRROR`
+ * horizontally and `REPEAT` vertically. By default, `wrapY` will be set to
+ * the same value as `wrapX`.
+ *
+ * Note: `textureWrap()` can only be used in WebGL mode.
+ *
+ * @method textureWrap
+ * @param {Constant} wrapX either CLAMP, REPEAT, or MIRROR
+ * @param {Constant} [wrapY] either CLAMP, REPEAT, or MIRROR
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies128.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ *
+ * // Set the texture wrapping.
+ * // Note: CLAMP is the default mode.
+ * textureWrap(CLAMP);
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Style the shape.
+ * noStroke();
+ *
+ * // Draw the shape.
+ * // Use uv coordinates > 1.
+ * beginShape();
+ * vertex(-30, -30, 0, 0, 0);
+ * vertex(30, -30, 0, 2, 0);
+ * vertex(30, 30, 0, 2, 2);
+ * vertex(-30, 30, 0, 0, 2);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies128.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('Four identical images of a landscape arranged in a grid.');
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ *
+ * // Set the texture wrapping.
+ * textureWrap(REPEAT);
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Style the shape.
+ * noStroke();
+ *
+ * // Draw the shape.
+ * // Use uv coordinates > 1.
+ * beginShape();
+ * vertex(-30, -30, 0, 0, 0);
+ * vertex(30, -30, 0, 2, 0);
+ * vertex(30, 30, 0, 2, 2);
+ * vertex(-30, 30, 0, 0, 2);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies128.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ *
+ * // Set the texture wrapping.
+ * textureWrap(MIRROR);
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Style the shape.
+ * noStroke();
+ *
+ * // Draw the shape.
+ * // Use uv coordinates > 1.
+ * beginShape();
+ * vertex(-30, -30, 0, 0, 0);
+ * vertex(30, -30, 0, 2, 0);
+ * vertex(30, 30, 0, 2, 2);
+ * vertex(-30, 30, 0, 0, 2);
+ * endShape();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.textureWrap = function (wrapX) {
+ var wrapY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : wrapX;
+ this._renderer.textureWrapX = wrapX;
+ this._renderer.textureWrapY = wrapY;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this._renderer.textures.values() [Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var texture = _step.value;
+ texture.setWrapMode(wrapX, wrapY);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ };
+ /**
+ * Sets the current material as a normal material.
+ *
+ * A normal material sets surfaces facing the x-axis to red, those facing the
+ * y-axis to green, and those facing the z-axis to blue. Normal material isn't
+ * affected by light. It’s often used as a placeholder material when debugging.
+ *
+ * Note: `normalMaterial()` can only be used in WebGL mode.
+ *
+ * @method normalMaterial
+ * @chainable
+ *
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies128.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ *
+ * // Set the texture wrapping.
+ * textureWrap(REPEAT, MIRROR);
+ *
+ * // Apply the image as a texture.
+ * texture(img);
+ *
+ * // Style the shape.
+ * noStroke();
+ *
+ * // Draw the shape.
+ * // Use uv coordinates > 1.
+ * beginShape();
+ * vertex(-30, -30, 0, 0, 0);
+ * vertex(30, -30, 0, 2, 0);
+ * vertex(30, 30, 0, 2, 2);
+ * vertex(-30, 30, 0, 0, 2);
+ * endShape();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.normalMaterial = function () {
+ this._assert3d('normalMaterial');
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('normalMaterial', args);
+ this._renderer.drawMode = constants.FILL;
+ this._renderer._useSpecularMaterial = false;
+ this._renderer._useEmissiveMaterial = false;
+ this._renderer._useNormalMaterial = true;
+ this._renderer.curFillColor = [
+ 1,
+ 1,
+ 1,
+ 1
+ ];
+ this._renderer._setProperty('_doFill', true);
+ this.noStroke();
+ return this;
+ };
+ /**
+ * Sets the ambient color of shapes’ surface material.
+ *
+ * The `ambientMaterial()` color sets the components of the
+ * ambientLight() color that shapes will
+ * reflect. For example, calling `ambientMaterial(255, 255, 0)` would cause a
+ * shape to reflect red and green light, but not blue light.
+ *
+ * `ambientMaterial()` can be called three ways with different parameters to
+ * set the material’s color.
+ *
+ * The first way to call `ambientMaterial()` has one parameter, `gray`.
+ * Grayscale values between 0 and 255, as in `ambientMaterial(50)`, can be
+ * passed to set the material’s color. Higher grayscale values make shapes
+ * appear brighter.
+ *
+ * The second way to call `ambientMaterial()` has one parameter, `color`. A
+ * p5.Color object, an array of color values, or a
+ * CSS color string, as in `ambientMaterial('magenta')`, can be passed to set
+ * the material’s color.
+ *
+ * The third way to call `ambientMaterial()` has three parameters, `v1`, `v2`,
+ * and `v3`. RGB, HSB, or HSL values, as in `ambientMaterial(255, 0, 0)`, can
+ * be passed to set the material’s colors. Color values will be interpreted
+ * using the current colorMode().
+ *
+ * Note: `ambientMaterial()` can only be used in WebGL mode.
+ *
+ * @method ambientMaterial
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the
+ * current colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the
+ * current colorMode().
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A multicolor torus drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the torus.
+ * normalMaterial();
+ *
+ * // Draw the torus.
+ * torus(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A magenta cube drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A purple cube drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ *
+ * // Add a dark gray ambient material.
+ * ambientMaterial(150);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A red cube drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ *
+ * // Add a yellow ambient material using RGB values.
+ * ambientMaterial(255, 255, 0);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A red cube drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ *
+ * // Add a yellow ambient material using a p5.Color object.
+ * let c = color(255, 255, 0);
+ * ambientMaterial(c);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A red cube drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ *
+ * // Add a yellow ambient material using a color string.
+ * ambientMaterial('yellow');
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method ambientMaterial
+ * @param {Number} gray grayscale value between 0 (black) and 255 (white).
+ * @chainable
+ */
+ /**
+ * @method ambientMaterial
+ * @param {p5.Color|Number[]|String} color
+ * color as a p5.Color object,
+ * an array of color values, or a CSS string.
+ * @chainable
+ */
+ _main.default.prototype.ambientMaterial = function (v1, v2, v3) {
+ this._assert3d('ambientMaterial');
+ _main.default._validateParameters('ambientMaterial', arguments);
+ var color = _main.default.prototype.color.apply(this, arguments);
+ this._renderer._hasSetAmbient = true;
+ this._renderer.curAmbientColor = color._array;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._enableLighting = true;
+ this._renderer._setProperty('_doFill', true);
+ return this;
+ };
+ /**
+ * Sets the emissive color of shapes’ surface material.
+ *
+ * The `emissiveMaterial()` color sets a color shapes display at full
+ * strength, regardless of lighting. This can give the appearance that a shape
+ * is glowing. However, emissive materials don’t actually emit light that
+ * can affect surrounding objects.
+ *
+ * `emissiveMaterial()` can be called three ways with different parameters to
+ * set the material’s color.
+ *
+ * The first way to call `emissiveMaterial()` has one parameter, `gray`.
+ * Grayscale values between 0 and 255, as in `emissiveMaterial(50)`, can be
+ * passed to set the material’s color. Higher grayscale values make shapes
+ * appear brighter.
+ *
+ * The second way to call `emissiveMaterial()` has one parameter, `color`. A
+ * p5.Color object, an array of color values, or a
+ * CSS color string, as in `emissiveMaterial('magenta')`, can be passed to set
+ * the material’s color.
+ *
+ * The third way to call `emissiveMaterial()` has four parameters, `v1`, `v2`,
+ * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+ * passed to set the material’s colors, as in `emissiveMaterial(255, 0, 0)` or
+ * `emissiveMaterial(255, 0, 0, 30)`. Color values will be interpreted using
+ * the current colorMode().
+ *
+ * Note: `emissiveMaterial()` can only be used in WebGL mode.
+ *
+ * @method emissiveMaterial
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the
+ * current colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the
+ * current colorMode().
+ * @param {Number} [alpha] alpha value in the current
+ * colorMode().
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A yellow cube drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a white ambient light.
+ * ambientLight(255, 255, 255);
+ *
+ * // Add a yellow ambient material using a color string.
+ * ambientMaterial('yellow');
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method emissiveMaterial
+ * @param {Number} gray grayscale value between 0 (black) and 255 (white).
+ * @chainable
+ */
+ /**
+ * @method emissiveMaterial
+ * @param {p5.Color|Number[]|String} color
+ * color as a p5.Color object,
+ * an array of color values, or a CSS string.
+ * @chainable
+ */
+ _main.default.prototype.emissiveMaterial = function (v1, v2, v3, a) {
+ this._assert3d('emissiveMaterial');
+ _main.default._validateParameters('emissiveMaterial', arguments);
+ var color = _main.default.prototype.color.apply(this, arguments);
+ this._renderer.curEmissiveColor = color._array;
+ this._renderer._useEmissiveMaterial = true;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._enableLighting = true;
+ return this;
+ };
+ /**
+ * Sets the specular color of shapes’ surface material.
+ *
+ * The `specularMaterial()` color sets the components of light color that
+ * glossy coats on shapes will reflect. For example, calling
+ * `specularMaterial(255, 255, 0)` would cause a shape to reflect red and
+ * green light, but not blue light.
+ *
+ * Unlike ambientMaterial(),
+ * `specularMaterial()` will reflect the full color of light sources including
+ * directionalLight(),
+ * pointLight(),
+ * and spotLight(). This is what gives it shapes
+ * their "shiny" appearance. The material’s shininess can be controlled by the
+ * shininess() function.
+ *
+ * `specularMaterial()` can be called three ways with different parameters to
+ * set the material’s color.
+ *
+ * The first way to call `specularMaterial()` has one parameter, `gray`.
+ * Grayscale values between 0 and 255, as in `specularMaterial(50)`, can be
+ * passed to set the material’s color. Higher grayscale values make shapes
+ * appear brighter.
+ *
+ * The second way to call `specularMaterial()` has one parameter, `color`. A
+ * p5.Color> object, an array of color values, or a CSS
+ * color string, as in `specularMaterial('magenta')`, can be passed to set the
+ * material’s color.
+ *
+ * The third way to call `specularMaterial()` has four parameters, `v1`, `v2`,
+ * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+ * passed to set the material’s colors, as in `specularMaterial(255, 0, 0)` or
+ * `specularMaterial(255, 0, 0, 30)`. Color values will be interpreted using
+ * the current colorMode().
+ *
+ * @method specularMaterial
+ * @param {Number} gray grayscale value between 0 (black) and 255 (white).
+ * @param {Number} [alpha] alpha value in the current current
+ * colorMode().
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A red cube drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a white ambient light.
+ * ambientLight(255, 255, 255);
+ *
+ * // Add a red emissive material using RGB values.
+ * emissiveMaterial(255, 0, 0);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to apply a specular material.
+ *
+ * let isGlossy = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a white point light at the top-right.
+ * pointLight(255, 255, 255, 30, -40, 30);
+ *
+ * // Add a glossy coat if the user has double-clicked.
+ * if (isGlossy === true) {
+ * specularMaterial(255);
+ * shininess(50);
+ * }
+ *
+ * // Style the torus.
+ * noStroke();
+ * fill(255, 0, 0);
+ *
+ * // Draw the torus.
+ * torus(30);
+ * }
+ *
+ * // Make the torus glossy when the user double-clicks.
+ * function doubleClicked() {
+ * isGlossy = true;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to apply a specular material.
+ *
+ * let isGlossy = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a white point light at the top-right.
+ * pointLight(255, 255, 255, 30, -40, 30);
+ *
+ * // Add a glossy green coat if the user has double-clicked.
+ * if (isGlossy === true) {
+ * specularMaterial(0, 255, 0);
+ * shininess(50);
+ * }
+ *
+ * // Style the torus.
+ * noStroke();
+ * fill(255, 0, 0);
+ *
+ * // Draw the torus.
+ * torus(30);
+ * }
+ *
+ * // Make the torus glossy when the user double-clicks.
+ * function doubleClicked() {
+ * isGlossy = true;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to apply a specular material.
+ *
+ * let isGlossy = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a white point light at the top-right.
+ * pointLight(255, 255, 255, 30, -40, 30);
+ *
+ * // Add a glossy green coat if the user has double-clicked.
+ * if (isGlossy === true) {
+ * // Create a p5.Color object.
+ * let c = color('green');
+ * specularMaterial(c);
+ * shininess(50);
+ * }
+ *
+ * // Style the torus.
+ * noStroke();
+ * fill(255, 0, 0);
+ *
+ * // Draw the torus.
+ * torus(30);
+ * }
+ *
+ * // Make the torus glossy when the user double-clicks.
+ * function doubleClicked() {
+ * isGlossy = true;
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method specularMaterial
+ * @param {Number} v1 red or hue value in
+ * the current colorMode().
+ * @param {Number} v2 green or saturation value
+ * in the current colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value
+ * in the current colorMode().
+ * @param {Number} [alpha]
+ * @chainable
+ */
+ /**
+ * @method specularMaterial
+ * @param {p5.Color|Number[]|String} color
+ * color as a p5.Color object,
+ * an array of color values, or a CSS string.
+ * @chainable
+ */
+ _main.default.prototype.specularMaterial = function (v1, v2, v3, alpha) {
+ this._assert3d('specularMaterial');
+ _main.default._validateParameters('specularMaterial', arguments);
+ var color = _main.default.prototype.color.apply(this, arguments);
+ this._renderer.curSpecularColor = color._array;
+ this._renderer._useSpecularMaterial = true;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._enableLighting = true;
+ return this;
+ };
+ /**
+ * Sets the amount of gloss ("shininess") of a
+ * specularMaterial().
+ *
+ * Shiny materials focus reflected light more than dull materials.
+ * `shininess()` affects the way materials reflect light sources including
+ * directionalLight(),
+ * pointLight(),
+ * and spotLight().
+ *
+ * The parameter, `shine`, is a number that sets the amount of shininess.
+ * `shine` must be greater than 1, which is its default value.
+ *
+ * @method shininess
+ * @param {Number} shine amount of shine.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to apply a specular material.
+ *
+ * let isGlossy = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on a white point light at the top-right.
+ * pointLight(255, 255, 255, 30, -40, 30);
+ *
+ * // Add a glossy green coat if the user has double-clicked.
+ * if (isGlossy === true) {
+ * specularMaterial('#00FF00');
+ * shininess(50);
+ * }
+ *
+ * // Style the torus.
+ * noStroke();
+ * fill(255, 0, 0);
+ *
+ * // Draw the torus.
+ * torus(30);
+ * }
+ *
+ * // Make the torus glossy when the user double-clicks.
+ * function doubleClicked() {
+ * isGlossy = true;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.shininess = function (shine) {
+ this._assert3d('shininess');
+ _main.default._validateParameters('shininess', arguments);
+ if (shine < 1) {
+ shine = 1;
+ }
+ this._renderer._useShininess = shine;
+ return this;
+ };
+ /**
+ * Sets the amount of "metalness" of a
+ * specularMaterial().
+ *
+ * `metalness()` can make materials appear more metallic. It affects the way
+ * materials reflect light sources including
+ * affects the way materials reflect light sources including
+ * directionalLight(),
+ * pointLight(),
+ * spotLight(), and
+ * imageLight().
+ *
+ * The parameter, `metallic`, is a number that sets the amount of metalness.
+ * `metallic` must be greater than 1, which is its default value. Higher
+ * values, such as `metalness(100)`, make specular materials appear more
+ * metallic.
+ *
+ * @method metalness
+ * @param {Number} metallic amount of metalness.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Turn on a red ambient light.
+ * ambientLight(255, 0, 0);
+ *
+ * // Get the mouse's coordinates.
+ * let mx = mouseX - 50;
+ * let my = mouseY - 50;
+ *
+ * // Turn on a white point light that follows the mouse.
+ * pointLight(255, 255, 255, mx, my, 50);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Add a specular material with a grayscale value.
+ * specularMaterial(255);
+ *
+ * // Draw the left sphere with low shininess.
+ * translate(-25, 0, 0);
+ * shininess(10);
+ * sphere(20);
+ *
+ * // Draw the right sphere with high shininess.
+ * translate(50, 0, 0);
+ * shininess(100);
+ * sphere(20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Turn on an ambient light.
+ * ambientLight(200);
+ *
+ * // Get the mouse's coordinates.
+ * let mx = mouseX - 50;
+ * let my = mouseY - 50;
+ *
+ * // Turn on a white point light that follows the mouse.
+ * pointLight(255, 255, 255, mx, my, 50);
+ *
+ * // Style the spheres.
+ * noStroke();
+ * fill(30, 30, 255);
+ * specularMaterial(255);
+ * shininess(20);
+ *
+ * // Draw the left sphere with low metalness.
+ * translate(-25, 0, 0);
+ * metalness(1);
+ * sphere(20);
+ *
+ * // Draw the right sphere with high metalness.
+ * translate(50, 0, 0);
+ * metalness(50);
+ * sphere(20);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.metalness = function (metallic) {
+ this._assert3d('metalness');
+ var metalMix = 1 - Math.exp( - metallic / 100);
+ this._renderer._useMetalness = metalMix;
+ return this;
+ };
+ /**
+ * @private blends colors according to color components.
+ * If alpha value is less than 1, or non-standard blendMode
+ * we need to enable blending on our gl context.
+ * @param {Number[]} color The currently set color, with values in 0-1 range
+ * @param {Boolean} [hasTransparency] Whether the shape being drawn has other
+ * transparency internally, e.g. via vertex colors
+ * @return {Number[]]} Normalized numbers array
+ */
+ _main.default.RendererGL.prototype._applyColorBlend = function (colors, hasTransparency) {
+ var gl = this.GL;
+ var isTexture = this.drawMode === constants.TEXTURE;
+ var doBlend = hasTransparency || this.userFillShader || this.userStrokeShader || this.userPointShader || isTexture || this.curBlendMode !== constants.BLEND || colors[colors.length - 1] < 1 || this._isErasing;
+ if (doBlend !== this._isBlending) {
+ if (doBlend || this.curBlendMode !== constants.BLEND && this.curBlendMode !== constants.ADD) {
+ gl.enable(gl.BLEND);
+ } else {
+ gl.disable(gl.BLEND);
+ }
+ gl.depthMask(true);
+ this._isBlending = doBlend;
+ }
+ this._applyBlendMode();
+ return colors;
+ };
+ /**
+ * @private sets blending in gl context to curBlendMode
+ * @param {Number[]} color [description]
+ * @return {Number[]} Normalized numbers array
+ */
+ _main.default.RendererGL.prototype._applyBlendMode = function () {
+ if (this._cachedBlendMode === this.curBlendMode) {
+ return;
+ }
+ var gl = this.GL;
+ switch (this.curBlendMode) {
+ case constants.BLEND:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.ADD:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ONE);
+ break;
+ case constants.REMOVE:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.MULTIPLY:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.SCREEN:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
+ break;
+ case constants.EXCLUSION:
+ gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE_MINUS_DST_COLOR, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE);
+ break;
+ case constants.REPLACE:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ZERO);
+ break;
+ case constants.SUBTRACT:
+ gl.blendEquationSeparate(gl.FUNC_REVERSE_SUBTRACT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.DARKEST:
+ if (this.blendExt) {
+ gl.blendEquationSeparate(this.blendExt.MIN || this.blendExt.MIN_EXT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+ } else {
+ console.warn('blendMode(DARKEST) does not work in your browser in WEBGL mode.');
+ }
+ break;
+ case constants.LIGHTEST:
+ if (this.blendExt) {
+ gl.blendEquationSeparate(this.blendExt.MAX || this.blendExt.MAX_EXT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+ } else {
+ console.warn('blendMode(LIGHTEST) does not work in your browser in WEBGL mode.');
+ }
+ break;
+ default:
+ console.error('Oops! Somehow RendererGL set curBlendMode to an unsupported mode.');
+ break;
+ }
+ if (!this._isErasing) {
+ this._cachedBlendMode = this.curBlendMode;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ './p5.Texture': 362,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.join': 183,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 352: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.string.sub');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module 3D
+ * @submodule Camera
+ * @requires core
+ */
+ ////////////////////////////////////////////////////////////////////////////////
+ // p5.Prototype Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Sets the position and orientation of the current camera in a 3D sketch.
+ *
+ * `camera()` allows objects to be viewed from different angles. It has nine
+ * parameters that are all optional.
+ *
+ * The first three parameters, `x`, `y`, and `z`, are the coordinates of the
+ * camera’s position. For example, calling `camera(0, 0, 0)` places the camera
+ * at the origin `(0, 0, 0)`. By default, the camera is placed at
+ * `(0, 0, 800)`.
+ *
+ * The next three parameters, `centerX`, `centerY`, and `centerZ` are the
+ * coordinates of the point where the camera faces. For example, calling
+ * `camera(0, 0, 0, 10, 20, 30)` places the camera at the origin `(0, 0, 0)`
+ * and points it at `(10, 20, 30)`. By default, the camera points at the
+ * origin `(0, 0, 0)`.
+ *
+ * The last three parameters, `upX`, `upY`, and `upZ` are the components of
+ * the "up" vector. The "up" vector orients the camera’s y-axis. For example,
+ * calling `camera(0, 0, 0, 10, 20, 30, 0, -1, 0)` places the camera at the
+ * origin `(0, 0, 0)`, points it at `(10, 20, 30)`, and sets the "up" vector
+ * to `(0, -1, 0)` which is like holding it upside-down. By default, the "up"
+ * vector is `(0, 1, 0)`.
+ *
+ * Note: `camera()` can only be used in WebGL mode.
+ *
+ * @method camera
+ * @constructor
+ * @for p5
+ * @param {Number} [x] x-coordinate of the camera. Defaults to 0.
+ * @param {Number} [y] y-coordinate of the camera. Defaults to 0.
+ * @param {Number} [z] z-coordinate of the camera. Defaults to 800.
+ * @param {Number} [centerX] x-coordinate of the point the camera faces. Defaults to 0.
+ * @param {Number} [centerY] y-coordinate of the point the camera faces. Defaults to 0.
+ * @param {Number} [centerZ] z-coordinate of the point the camera faces. Defaults to 0.
+ * @param {Number} [upX] x-component of the camera’s "up" vector. Defaults to 0.
+ * @param {Number} [upY] y-component of the camera’s "up" vector. Defaults to 1.
+ * @param {Number} [upZ] z-component of the camera’s "up" vector. Defaults to 0.
+ * @chainable
+ *
+ * @example
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/outdoor_spheremap.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100 ,100 ,WEBGL);
+ *
+ * describe(
+ * 'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Add the panorama.
+ * panorama(img);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Use the image as a light source.
+ * imageLight(img);
+ *
+ * // Style the spheres.
+ * noStroke();
+ * specularMaterial(50);
+ * shininess(200);
+ *
+ * // Draw the left sphere with low metalness.
+ * translate(-25, 0, 0);
+ * metalness(1);
+ * sphere(20);
+ *
+ * // Draw the right sphere with high metalness.
+ * translate(50, 0, 0);
+ * metalness(50);
+ * sphere(20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Move the camera to the top-right.
+ * camera(200, -400, 800);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube apperas to sway left and right on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the camera's x-coordinate.
+ * let x = 400 * cos(frameCount * 0.01);
+ *
+ * // Orbit the camera around the box.
+ * camera(x, -400, 800);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.camera = function () {
+ var _this$_renderer$_curC;
+ this._assert3d('camera');
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('camera', args);
+ (_this$_renderer$_curC = this._renderer._curCamera).camera.apply(_this$_renderer$_curC, args);
+ return this;
+ };
+ /**
+ * Sets a perspective projection for the current camera in a 3D sketch.
+ *
+ * In a perspective projection, shapes that are further from the camera appear
+ * smaller than shapes that are near the camera. This technique, called
+ * foreshortening, creates realistic 3D scenes. It’s applied by default in
+ * WebGL mode.
+ *
+ * `perspective()` changes the camera’s perspective by changing its viewing
+ * frustum. The frustum is the volume of space that’s visible to the camera.
+ * Its shape is a pyramid with its top cut off. The camera is placed where
+ * the top of the pyramid should be and views everything between the frustum’s
+ * top (near) plane and its bottom (far) plane.
+ *
+ * The first parameter, `fovy`, is the camera’s vertical field of view. It’s
+ * an angle that describes how tall or narrow a view the camera has. For
+ * example, calling `perspective(0.5)` sets the camera’s vertical field of
+ * view to 0.5 radians. By default, `fovy` is calculated based on the sketch’s
+ * height and the camera’s default z-coordinate, which is 800. The formula for
+ * the default `fovy` is `2 * atan(height / 2 / 800)`.
+ *
+ * The second parameter, `aspect`, is the camera’s aspect ratio. It’s a number
+ * that describes the ratio of the top plane’s width to its height. For
+ * example, calling `perspective(0.5, 1.5)` sets the camera’s field of view to
+ * 0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner
+ * on a square canvas. By default, aspect is set to `width / height`.
+ *
+ * The third parameter, `near`, is the distance from the camera to the near
+ * plane. For example, calling `perspective(0.5, 1.5, 100)` sets the camera’s
+ * field of view to 0.5 radians, its aspect ratio to 1.5, and places the near
+ * plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
+ * from the camera won’t be visible. By default, near is set to `0.1 * 800`,
+ * which is 1/10th the default distance between the camera and the origin.
+ *
+ * The fourth parameter, `far`, is the distance from the camera to the far
+ * plane. For example, calling `perspective(0.5, 1.5, 100, 10000)` sets the
+ * camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
+ * near plane 100 pixels from the camera, and places the far plane 10,000
+ * pixels from the camera. Any shapes drawn more than 10,000 pixels from the
+ * camera won’t be visible. By default, far is set to `10 * 800`, which is 10
+ * times the default distance between the camera and the origin.
+ *
+ * Note: `perspective()` can only be used in WebGL mode.
+ *
+ * @method perspective
+ * @for p5
+ * @param {Number} [fovy] camera frustum vertical field of view. Defaults to
+ * `2 * atan(height / 2 / 800)`.
+ * @param {Number} [aspect] camera frustum aspect ratio. Defaults to
+ * `width / height`.
+ * @param {Number} [near] distance from the camera to the near clipping plane.
+ * Defaults to `0.1 * 800`.
+ * @param {Number} [far] distance from the camera to the far clipping plane.
+ * Defaults to `10 * 800`.
+ * @chainable
+ *
+ * @example
+ *
+ * // Adjust the range sliders to change the camera's position.
+ *
+ * let xSlider;
+ * let ySlider;
+ * let zSlider;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create slider objects to set the camera's coordinates.
+ * xSlider = createSlider(-400, 400, 400);
+ * xSlider.position(0, 100);
+ * xSlider.size(100);
+ * ySlider = createSlider(-400, 400, -200);
+ * ySlider.position(0, 120);
+ * ySlider.size(100);
+ * zSlider = createSlider(0, 1600, 800);
+ * zSlider.position(0, 140);
+ * zSlider.size(100);
+ *
+ * describe(
+ * 'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get the camera's coordinates from the sliders.
+ * let x = xSlider.value();
+ * let y = ySlider.value();
+ * let z = zSlider.value();
+ *
+ * // Move the camera.
+ * camera(x, y, z);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click to squeeze the box.
+ *
+ * let isSqueezed = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Place the camera at the top-right.
+ * camera(400, -400, 800);
+ *
+ * if (isSqueezed === true) {
+ * // Set fovy to 0.2.
+ * // Set aspect to 1.5.
+ * perspective(0.2, 1.5);
+ * }
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ * // Change the camera's perspective when the user double-clicks.
+ * function doubleClicked() {
+ * isSqueezed = true;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.perspective = function () {
+ var _this$_renderer$_curC2;
+ this._assert3d('perspective');
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('perspective', args);
+ (_this$_renderer$_curC2 = this._renderer._curCamera).perspective.apply(_this$_renderer$_curC2, args);
+ return this;
+ };
+ /**
+ * Enables or disables perspective for lines in 3D sketches.
+ *
+ * In WebGL mode, lines can be drawn with a thinner stroke when they’re
+ * further from the camera. Doing so gives them a more realistic appearance.
+ *
+ * By default, lines are drawn differently based on the type of perspective
+ * being used:
+ * - `perspective()` and `frustum()` simulate a realistic perspective. In
+ * these modes, stroke weight is affected by the line’s distance from the
+ * camera. Doing so results in a more natural appearance. `perspective()` is
+ * the default mode for 3D sketches.
+ * - `ortho()` doesn’t simulate a realistic perspective. In this mode, stroke
+ * weights are consistent regardless of the line’s distance from the camera.
+ * Doing so results in a more predictable and consistent appearance.
+ *
+ * `linePerspective()` can override the default line drawing mode.
+ *
+ * The parameter, `enable`, is optional. It’s a `Boolean` value that sets the
+ * way lines are drawn. If `true` is passed, as in `linePerspective(true)`,
+ * then lines will appear thinner when they are further from the camera. If
+ * `false` is passed, as in `linePerspective(false)`, then lines will have
+ * consistent stroke weights regardless of their distance from the camera. By
+ * default, `linePerspective()` is enabled.
+ *
+ * Calling `linePerspective()` without passing an argument returns `true` if
+ * it's enabled and `false` if not.
+ *
+ * Note: `linePerspective()` can only be used in WebGL mode.
+ *
+ * @method linePerspective
+ * @for p5
+ * @param {boolean} enable whether to enable line perspective.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Place the camera at the top-right.
+ * camera(400, -400, 800);
+ *
+ * // Set fovy to 0.2.
+ * // Set aspect to 1.5.
+ * // Set near to 600.
+ * // Set far to 1200.
+ * perspective(0.2, 1.5, 600, 1200);
+ *
+ * // Move the origin away from the camera.
+ * let x = -frameCount;
+ * let y = frameCount;
+ * let z = -2 * frameCount;
+ * translate(x, y, z);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click the canvas to toggle the line perspective.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 600);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -40);
+ * box(10);
+ * }
+ * }
+ *
+ * // Toggle the line perspective when the user double-clicks.
+ * function doubleClicked() {
+ * let isEnabled = linePerspective();
+ * linePerspective(!isEnabled);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method linePerspective
+ * @return {boolean} whether line perspective is enabled.
+ */
+ _main.default.prototype.linePerspective = function (enable) {
+ _main.default._validateParameters('linePerspective', arguments);
+ if (!(this._renderer instanceof _main.default.RendererGL)) {
+ throw new Error('linePerspective() must be called in WebGL mode.');
+ }
+ if (enable !== undefined) {
+ // Set the line perspective if enable is provided
+ this._renderer._curCamera.useLinePerspective = enable;
+ } else {
+ // If no argument is provided, return the current value
+ return this._renderer._curCamera.useLinePerspective;
+ }
+ };
+ /**
+ * Sets an orthographic projection for the current camera in a 3D sketch.
+ *
+ * In an orthographic projection, shapes with the same size always appear the
+ * same size, regardless of whether they are near or far from the camera.
+ *
+ * `ortho()` changes the camera’s perspective by changing its viewing frustum
+ * from a truncated pyramid to a rectangular prism. The camera is placed in
+ * front of the frustum and views everything between the frustum’s near plane
+ * and its far plane. `ortho()` has six optional parameters to define the
+ * frustum.
+ *
+ * The first four parameters, `left`, `right`, `bottom`, and `top`, set the
+ * coordinates of the frustum’s sides, bottom, and top. For example, calling
+ * `ortho(-100, 100, 200, -200)` creates a frustum that’s 200 pixels wide and
+ * 400 pixels tall. By default, these coordinates are set based on the
+ * sketch’s width and height, as in
+ * `ortho(-width / 2, width / 2, -height / 2, height / 2)`.
+ *
+ * The last two parameters, `near` and `far`, set the distance of the
+ * frustum’s near and far plane from the camera. For example, calling
+ * `ortho(-100, 100, 200, 200, 50, 1000)` creates a frustum that’s 200 pixels
+ * wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
+ * pixels from the camera. By default, `near` and `far` are set to 0 and
+ * `max(width, height) + 800`, respectively.
+ *
+ * Note: `ortho()` can only be used in WebGL mode.
+ *
+ * @method ortho
+ * @for p5
+ * @param {Number} [left] x-coordinate of the frustum’s left plane. Defaults to `-width / 2`.
+ * @param {Number} [right] x-coordinate of the frustum’s right plane. Defaults to `width / 2`.
+ * @param {Number} [bottom] y-coordinate of the frustum’s bottom plane. Defaults to `height / 2`.
+ * @param {Number} [top] y-coordinate of the frustum’s top plane. Defaults to `-height / 2`.
+ * @param {Number} [near] z-coordinate of the frustum’s near plane. Defaults to 0.
+ * @param {Number} [far] z-coordinate of the frustum’s far plane. Defaults to `max(width, height) + 800`.
+ * @chainable
+ *
+ * @example
+ *
+ * // Double-click the canvas to toggle the line perspective.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe(
+ * 'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Use an orthographic projection.
+ * ortho();
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 600);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -40);
+ * box(10);
+ * }
+ * }
+ *
+ * // Toggle the line perspective when the user double-clicks.
+ * function doubleClicked() {
+ * let isEnabled = linePerspective();
+ * linePerspective(!isEnabled);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Apply an orthographic projection.
+ * ortho();
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 600);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -40);
+ * box(10);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.ortho = function () {
+ var _this$_renderer$_curC3;
+ this._assert3d('ortho');
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('ortho', args);
+ (_this$_renderer$_curC3 = this._renderer._curCamera).ortho.apply(_this$_renderer$_curC3, args);
+ return this;
+ };
+ /**
+ * Sets the frustum of the current camera in a 3D sketch.
+ *
+ * In a frustum projection, shapes that are further from the camera appear
+ * smaller than shapes that are near the camera. This technique, called
+ * foreshortening, creates realistic 3D scenes.
+ *
+ * `frustum()` changes the default camera’s perspective by changing its
+ * viewing frustum. The frustum is the volume of space that’s visible to the
+ * camera. The frustum’s shape is a pyramid with its top cut off. The camera
+ * is placed where the top of the pyramid should be and points towards the
+ * base of the pyramid. It views everything within the frustum.
+ *
+ * The first four parameters, `left`, `right`, `bottom`, and `top`, set the
+ * coordinates of the frustum’s sides, bottom, and top. For example, calling
+ * `frustum(-100, 100, 200, -200)` creates a frustum that’s 200 pixels wide
+ * and 400 pixels tall. By default, these coordinates are set based on the
+ * sketch’s width and height, as in
+ * `ortho(-width / 20, width / 20, height / 20, -height / 20)`.
+ *
+ * The last two parameters, `near` and `far`, set the distance of the
+ * frustum’s near and far plane from the camera. For example, calling
+ * `ortho(-100, 100, 200, -200, 50, 1000)` creates a frustum that’s 200 pixels
+ * wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
+ * pixels from the camera. By default, near is set to `0.1 * 800`, which is
+ * 1/10th the default distance between the camera and the origin. `far` is set
+ * to `10 * 800`, which is 10 times the default distance between the camera
+ * and the origin.
+ *
+ * Note: `frustum()` can only be used in WebGL mode.
+ *
+ * @method frustum
+ * @for p5
+ * @param {Number} [left] x-coordinate of the frustum’s left plane. Defaults to `-width / 20`.
+ * @param {Number} [right] x-coordinate of the frustum’s right plane. Defaults to `width / 20`.
+ * @param {Number} [bottom] y-coordinate of the frustum’s bottom plane. Defaults to `height / 20`.
+ * @param {Number} [top] y-coordinate of the frustum’s top plane. Defaults to `-height / 20`.
+ * @param {Number} [near] z-coordinate of the frustum’s near plane. Defaults to `0.1 * 800`.
+ * @param {Number} [far] z-coordinate of the frustum’s far plane. Defaults to `10 * 800`.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Apply an orthographic projection.
+ * // Center the frustum.
+ * // Set its width and height to 20.
+ * // Place its near plane 300 pixels from the camera.
+ * // Place its far plane 350 pixels from the camera.
+ * ortho(-10, 10, -10, 10, 300, 350);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 600);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -40);
+ * box(10);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A row of white cubes on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Apply the default frustum projection.
+ * frustum();
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 600);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -40);
+ * box(10);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.frustum = function () {
+ var _this$_renderer$_curC4;
+ this._assert3d('frustum');
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+ _main.default._validateParameters('frustum', args);
+ (_this$_renderer$_curC4 = this._renderer._curCamera).frustum.apply(_this$_renderer$_curC4, args);
+ return this;
+ };
+ ////////////////////////////////////////////////////////////////////////////////
+ // p5.Camera
+ ////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Creates a new p5.Camera object and sets it
+ * as the current (active) camera.
+ *
+ * The new camera is initialized with a default position `(0, 0, 800)` and a
+ * default perspective projection. Its properties can be controlled with
+ * p5.Camera methods such as
+ * `myCamera.lookAt(0, 0, 0)`.
+ *
+ * Note: Every 3D sketch starts with a default camera initialized.
+ * This camera can be controlled with the functions
+ * camera(),
+ * perspective(),
+ * ortho(), and
+ * frustum() if it's the only camera in the scene.
+ *
+ * Note: `createCamera()` can only be used in WebGL mode.
+ *
+ * @method createCamera
+ * @return {p5.Camera} the new camera.
+ * @for p5
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * describe('A white cube on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Adjust the frustum.
+ * // Center it.
+ * // Set its width and height to 20 pixels.
+ * // Place its near plane 300 pixels from the camera.
+ * // Place its far plane 350 pixels from the camera.
+ * frustum(-10, 10, -10, 10, 300, 350);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 600);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -40);
+ * box(10);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createCamera = function () {
+ this._assert3d('createCamera');
+ var _cam = new _main.default.Camera(this._renderer);
+ // compute default camera settings, then set a default camera
+ _cam._computeCameraDefaultSettings();
+ _cam._setDefaultCamera();
+ // set renderer current camera to the new camera
+ this._renderer._curCamera = _cam;
+ return _cam;
+ };
+ /**
+ * A class to describe a camera for viewing a 3D sketch.
+ *
+ * Each `p5.Camera` object represents a camera that views a section of 3D
+ * space. It stores information about the camera’s position, orientation, and
+ * projection.
+ *
+ * In WebGL mode, the default camera is a `p5.Camera` object that can be
+ * controlled with the camera(),
+ * perspective(),
+ * ortho(), and
+ * frustum() functions. Additional cameras can be
+ * created with createCamera() and activated
+ * with setCamera().
+ *
+ * Note: `p5.Camera`’s methods operate in two coordinate systems:
+ * - The “world” coordinate system describes positions in terms of their
+ * relationship to the origin along the x-, y-, and z-axes. For example,
+ * calling `myCamera.setPosition()` places the camera in 3D space using
+ * "world" coordinates.
+ * - The "local" coordinate system describes positions from the camera's point
+ * of view: left-right, up-down, and forward-backward. For example, calling
+ * `myCamera.move()` moves the camera along its own axes.
+ *
+ * @class p5.Camera
+ * @param {rendererGL} rendererGL instance of WebGL renderer
+ *
+ * @example
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let usingCam1 = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * // Place it at the top-left.
+ * // Point it at the origin.
+ * cam2 = createCamera();
+ * cam2.setPosition(400, -400, 800);
+ * cam2.lookAt(0, 0, 0);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (usingCam1 === true) {
+ * setCamera(cam2);
+ * usingCam1 = false;
+ * } else {
+ * setCamera(cam1);
+ * usingCam1 = true;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let delta = 0.001;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Turn the camera left and right, called "panning".
+ * cam.pan(delta);
+ *
+ * // Switch directions every 120 frames.
+ * if (frameCount % 120 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Camera = /*#__PURE__*/ function () {
+ function Camera(renderer) {
+ _classCallCheck(this, Camera);
+ this._renderer = renderer;
+ this.cameraType = 'default';
+ this.useLinePerspective = true;
+ this.cameraMatrix = new _main.default.Matrix();
+ this.projMatrix = new _main.default.Matrix();
+ this.yScale = 1;
+ } /**
+ * The camera’s y-coordinate.
+ *
+ * By default, the camera’s y-coordinate is set to 0 in "world" space.
+ *
+ * @property {Number} eyeX
+ * @readonly
+ *
+ * @example
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * // Place it at the top-left.
+ * // Point it at the origin.
+ * cam2 = createCamera();
+ * cam2.setPosition(400, -400, 800);
+ * cam2.lookAt(0, 0, 0);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe(
+ * 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "eyeX: 0" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of eyeX, rounded to the nearest integer.
+ * text(`eyeX: ${round(cam.eyeX)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The camera’s y-coordinate.
+ *
+ * By default, the camera’s y-coordinate is set to 0 in "world" space.
+ *
+ * @property {Number} eyeY
+ * @readonly
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube appears to move left and right as the camera moves. The text "eyeX: X" is written in black beneath the cube. X oscillates between -25 and 25.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the new x-coordinate.
+ * let x = 25 * sin(frameCount * 0.01);
+ *
+ * // Set the camera's position.
+ * cam.setPosition(x, -400, 800);
+ *
+ * // Display the value of eyeX, rounded to the nearest integer.
+ * text(`eyeX: ${round(cam.eyeX)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "eyeY: -400" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of eyeY, rounded to the nearest integer.
+ * text(`eyeX: ${round(cam.eyeY)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The camera’s z-coordinate.
+ *
+ * By default, the camera’s z-coordinate is set to 800 in "world" space.
+ *
+ * @property {Number} eyeZ
+ * @readonly
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube appears to move up and down as the camera moves. The text "eyeY: Y" is written in black beneath the cube. Y oscillates between -374 and -425.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the new y-coordinate.
+ * let y = 25 * sin(frameCount * 0.01) - 400;
+ *
+ * // Set the camera's position.
+ * cam.setPosition(0, y, 800);
+ *
+ * // Display the value of eyeY, rounded to the nearest integer.
+ * text(`eyeY: ${round(cam.eyeY)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "eyeZ: 800" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of eyeZ, rounded to the nearest integer.
+ * text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The x-coordinate of the place where the camera looks.
+ *
+ * By default, the camera looks at the origin `(0, 0, 0)` in "world" space, so
+ * `myCamera.centerX` is 0.
+ *
+ * @property {Number} centerX
+ * @readonly
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube appears to move forward and back as the camera moves. The text "eyeZ: Z" is written in black beneath the cube. Z oscillates between 700 and 900.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the new z-coordinate.
+ * let z = 100 * sin(frameCount * 0.01) + 800;
+ *
+ * // Set the camera's position.
+ * cam.setPosition(0, -400, z);
+ *
+ * // Display the value of eyeZ, rounded to the nearest integer.
+ * text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at (10, 20, -30).
+ * cam.lookAt(10, 20, -30);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "centerX: 10" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of centerX, rounded to the nearest integer.
+ * text(`centerX: ${round(cam.centerX)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The y-coordinate of the place where the camera looks.
+ *
+ * By default, the camera looks at the origin `(0, 0, 0)` in "world" space, so
+ * `myCamera.centerY` is 0.
+ *
+ * @property {Number} centerY
+ * @readonly
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right.
+ * cam.setPosition(100, -400, 800);
+ *
+ * // Point the camera at (10, 20, -30).
+ * cam.lookAt(10, 20, -30);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube appears to move left and right as the camera shifts its focus. The text "centerX: X" is written in black beneath the cube. X oscillates between -15 and 35.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the new x-coordinate.
+ * let x = 25 * sin(frameCount * 0.01) + 10;
+ *
+ * // Point the camera.
+ * cam.lookAt(x, 20, -30);
+ *
+ * // Display the value of centerX, rounded to the nearest integer.
+ * text(`centerX: ${round(cam.centerX)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at (10, 20, -30).
+ * cam.lookAt(10, 20, -30);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "centerY: 20" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of centerY, rounded to the nearest integer.
+ * text(`centerY: ${round(cam.centerY)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The y-coordinate of the place where the camera looks.
+ *
+ * By default, the camera looks at the origin `(0, 0, 0)` in "world" space, so
+ * `myCamera.centerZ` is 0.
+ *
+ * @property {Number} centerZ
+ * @readonly
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right.
+ * cam.setPosition(100, -400, 800);
+ *
+ * // Point the camera at (10, 20, -30).
+ * cam.lookAt(10, 20, -30);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube appears to move up and down as the camera shifts its focus. The text "centerY: Y" is written in black beneath the cube. Y oscillates between -5 and 45.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the new y-coordinate.
+ * let y = 25 * sin(frameCount * 0.01) + 20;
+ *
+ * // Point the camera.
+ * cam.lookAt(10, y, -30);
+ *
+ * // Display the value of centerY, rounded to the nearest integer.
+ * text(`centerY: ${round(cam.centerY)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at (10, 20, -30).
+ * cam.lookAt(10, 20, -30);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "centerZ: -30" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of centerZ, rounded to the nearest integer.
+ * text(`centerZ: ${round(cam.centerZ)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The x-component of the camera's "up" vector.
+ *
+ * The camera's "up" vector orients its y-axis. By default, the "up" vector is
+ * `(0, 1, 0)`, so its x-component is 0 in "local" space.
+ *
+ * @property {Number} upX
+ * @readonly
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right.
+ * cam.setPosition(100, -400, 800);
+ *
+ * // Point the camera at (10, 20, -30).
+ * cam.lookAt(10, 20, -30);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube appears to move forward and back as the camera shifts its focus. The text "centerZ: Z" is written in black beneath the cube. Z oscillates between -55 and -25.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the new z-coordinate.
+ * let z = 25 * sin(frameCount * 0.01) - 30;
+ *
+ * // Point the camera.
+ * cam.lookAt(10, 20, z);
+ *
+ * // Display the value of centerZ, rounded to the nearest integer.
+ * text(`centerZ: ${round(cam.centerZ)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right: (100, -400, 800)
+ * // Point it at the origin: (0, 0, 0)
+ * // Set its "up" vector: (0, 1, 0).
+ * cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "upX: 0" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of upX, rounded to the nearest tenth.
+ * text(`upX: ${round(cam.upX, 1)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The y-component of the camera's "up" vector.
+ *
+ * The camera's "up" vector orients its y-axis. By default, the "up" vector is
+ * `(0, 1, 0)`, so its y-component is 1 in "local" space.
+ *
+ * @property {Number} upY
+ * @readonly
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right: (100, -400, 800)
+ * // Point it at the origin: (0, 0, 0)
+ * // Set its "up" vector: (0, 1, 0).
+ * cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube appears to rock back and forth. The text "upX: X" is written in black beneath it. X oscillates between -1 and 1.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the x-component.
+ * let x = sin(frameCount * 0.01);
+ *
+ * // Update the camera's "up" vector.
+ * cam.camera(100, -400, 800, 0, 0, 0, x, 1, 0);
+ *
+ * // Display the value of upX, rounded to the nearest tenth.
+ * text(`upX: ${round(cam.upX, 1)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right: (100, -400, 800)
+ * // Point it at the origin: (0, 0, 0)
+ * // Set its "up" vector: (0, 1, 0).
+ * cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "upY: 1" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of upY, rounded to the nearest tenth.
+ * text(`upY: ${round(cam.upY, 1)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The z-component of the camera's "up" vector.
+ *
+ * The camera's "up" vector orients its y-axis. By default, the "up" vector is
+ * `(0, 1, 0)`, so its z-component is 0 in "local" space.
+ *
+ * @property {Number} upZ
+ * @readonly
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right: (100, -400, 800)
+ * // Point it at the origin: (0, 0, 0)
+ * // Set its "up" vector: (0, 1, 0).
+ * cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube flips upside-down periodically. The text "upY: Y" is written in black beneath it. Y oscillates between -1 and 1.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the y-component.
+ * let y = sin(frameCount * 0.01);
+ *
+ * // Update the camera's "up" vector.
+ * cam.camera(100, -400, 800, 0, 0, 0, 0, y, 0);
+ *
+ * // Display the value of upY, rounded to the nearest tenth.
+ * text(`upY: ${round(cam.upY, 1)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right: (100, -400, 800)
+ * // Point it at the origin: (0, 0, 0)
+ * // Set its "up" vector: (0, 1, 0).
+ * cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The text "upZ: 0" is written in black beneath it.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Display the value of upZ, rounded to the nearest tenth.
+ * text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ */
+ ////////////////////////////////////////////////////////////////////////////////
+ // Camera Projection Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Sets a perspective projection for the camera.
+ *
+ * In a perspective projection, shapes that are further from the camera appear
+ * smaller than shapes that are near the camera. This technique, called
+ * foreshortening, creates realistic 3D scenes. It’s applied by default in new
+ * `p5.Camera` objects.
+ *
+ * `myCamera.perspective()` changes the camera’s perspective by changing its
+ * viewing frustum. The frustum is the volume of space that’s visible to the
+ * camera. The frustum’s shape is a pyramid with its top cut off. The camera
+ * is placed where the top of the pyramid should be and points towards the
+ * base of the pyramid. It views everything within the frustum.
+ *
+ * The first parameter, `fovy`, is the camera’s vertical field of view. It’s
+ * an angle that describes how tall or narrow a view the camera has. For
+ * example, calling `myCamera.perspective(0.5)` sets the camera’s vertical
+ * field of view to 0.5 radians. By default, `fovy` is calculated based on the
+ * sketch’s height and the camera’s default z-coordinate, which is 800. The
+ * formula for the default `fovy` is `2 * atan(height / 2 / 800)`.
+ *
+ * The second parameter, `aspect`, is the camera’s aspect ratio. It’s a number
+ * that describes the ratio of the top plane’s width to its height. For
+ * example, calling `myCamera.perspective(0.5, 1.5)` sets the camera’s field
+ * of view to 0.5 radians and aspect ratio to 1.5, which would make shapes
+ * appear thinner on a square canvas. By default, `aspect` is set to
+ * `width / height`.
+ *
+ * The third parameter, `near`, is the distance from the camera to the near
+ * plane. For example, calling `myCamera.perspective(0.5, 1.5, 100)` sets the
+ * camera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places
+ * the near plane 100 pixels from the camera. Any shapes drawn less than 100
+ * pixels from the camera won’t be visible. By default, `near` is set to
+ * `0.1 * 800`, which is 1/10th the default distance between the camera and
+ * the origin.
+ *
+ * The fourth parameter, `far`, is the distance from the camera to the far
+ * plane. For example, calling `myCamera.perspective(0.5, 1.5, 100, 10000)`
+ * sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,
+ * places the near plane 100 pixels from the camera, and places the far plane
+ * 10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels
+ * from the camera won’t be visible. By default, `far` is set to `10 * 800`,
+ * which is 10 times the default distance between the camera and the origin.
+ *
+ * @method perspective
+ * @for p5.Camera
+ * @param {Number} [fovy] camera frustum vertical field of view. Defaults to
+ * `2 * atan(height / 2 / 800)`.
+ * @param {Number} [aspect] camera frustum aspect ratio. Defaults to
+ * `width / height`.
+ * @param {Number} [near] distance from the camera to the near clipping plane.
+ * Defaults to `0.1 * 800`.
+ * @param {Number} [far] distance from the camera to the far clipping plane.
+ * Defaults to `10 * 800`.
+ *
+ * @example
+ *
+ * let cam;
+ * let font;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right: (100, -400, 800)
+ * // Point it at the origin: (0, 0, 0)
+ * // Set its "up" vector: (0, 1, 0).
+ * cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube appears to rock back and forth. The text "upZ: Z" is written in black beneath it. Z oscillates between -1 and 1.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the box.
+ * fill(255);
+ *
+ * // Draw the box.
+ * box();
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * textFont(font);
+ * fill(0);
+ *
+ * // Calculate the z-component.
+ * let z = sin(frameCount * 0.01);
+ *
+ * // Update the camera's "up" vector.
+ * cam.camera(100, -400, 800, 0, 0, 0, 0, 1, z);
+ *
+ * // Display the value of upZ, rounded to the nearest tenth.
+ * text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Place it at the top-right.
+ * cam2.camera(400, -400, 800);
+ *
+ * // Set its fovy to 0.2.
+ * // Set its aspect to 1.5.
+ * // Set its near to 600.
+ * // Set its far to 1200.
+ * cam2.perspective(0.2, 1.5, 600, 1200);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe('A white cube on a gray background. The camera toggles between a frontal view and a skewed aerial view when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(Camera, [
+ {
+ key: 'perspective',
+ value: function perspective(fovy, aspect, near, far) {
+ this.cameraType = arguments.length > 0 ? 'custom' : 'default';
+ if (typeof fovy === 'undefined') {
+ fovy = this.defaultCameraFOV;
+ // this avoids issue where setting angleMode(DEGREES) before calling
+ // perspective leads to a smaller than expected FOV (because
+ // _computeCameraDefaultSettings computes in radians)
+ this.cameraFOV = fovy;
+ } else {
+ this.cameraFOV = this._renderer._pInst._toRadians(fovy);
+ }
+ if (typeof aspect === 'undefined') {
+ aspect = this.defaultAspectRatio;
+ }
+ if (typeof near === 'undefined') {
+ near = this.defaultCameraNear;
+ }
+ if (typeof far === 'undefined') {
+ far = this.defaultCameraFar;
+ }
+ if (near <= 0.0001) {
+ near = 0.01;
+ console.log('Avoid perspective near plane values close to or below 0. ' + 'Setting value to 0.01.');
+ }
+ if (far < near) {
+ console.log('Perspective far plane value is less than near plane value. ' + 'Nothing will be shown.');
+ }
+ this.aspectRatio = aspect;
+ this.cameraNear = near;
+ this.cameraFar = far;
+ this.projMatrix = _main.default.Matrix.identity();
+ var f = 1 / Math.tan(this.cameraFOV / 2);
+ var nf = 1 / (this.cameraNear - this.cameraFar);
+ /* eslint-disable indent */
+ this.projMatrix.set(f / aspect, 0, 0, 0, 0, - f * this.yScale, 0, 0, 0, 0, (far + near) * nf, - 1, 0, 0, 2 * far * near * nf, 0);
+ /* eslint-enable indent */
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(this.projMatrix);
+ }
+ } /**
+ * Sets an orthographic projection for the camera.
+ *
+ * In an orthographic projection, shapes with the same size always appear the
+ * same size, regardless of whether they are near or far from the camera.
+ *
+ * `myCamera.ortho()` changes the camera’s perspective by changing its viewing
+ * frustum from a truncated pyramid to a rectangular prism. The frustum is the
+ * volume of space that’s visible to the camera. The camera is placed in front
+ * of the frustum and views everything within the frustum. `myCamera.ortho()`
+ * has six optional parameters to define the viewing frustum.
+ *
+ * The first four parameters, `left`, `right`, `bottom`, and `top`, set the
+ * coordinates of the frustum’s sides, bottom, and top. For example, calling
+ * `myCamera.ortho(-100, 100, 200, -200)` creates a frustum that’s 200 pixels
+ * wide and 400 pixels tall. By default, these dimensions are set based on
+ * the sketch’s width and height, as in
+ * `myCamera.ortho(-width / 2, width / 2, -height / 2, height / 2)`.
+ *
+ * The last two parameters, `near` and `far`, set the distance of the
+ * frustum’s near and far plane from the camera. For example, calling
+ * `myCamera.ortho(-100, 100, 200, -200, 50, 1000)` creates a frustum that’s
+ * 200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
+ * ends 1,000 pixels from the camera. By default, `near` and `far` are set to
+ * 0 and `max(width, height) + 800`, respectively.
+ *
+ * @method ortho
+ * @for p5.Camera
+ * @param {Number} [left] x-coordinate of the frustum’s left plane. Defaults to `-width / 2`.
+ * @param {Number} [right] x-coordinate of the frustum’s right plane. Defaults to `width / 2`.
+ * @param {Number} [bottom] y-coordinate of the frustum’s bottom plane. Defaults to `height / 2`.
+ * @param {Number} [top] y-coordinate of the frustum’s top plane. Defaults to `-height / 2`.
+ * @param {Number} [near] z-coordinate of the frustum’s near plane. Defaults to 0.
+ * @param {Number} [far] z-coordinate of the frustum’s far plane. Defaults to `max(width, height) + 800`.
+ *
+ * @example
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Place it at the top-right.
+ * cam2.camera(400, -400, 800);
+ *
+ * // Set its fovy to 0.2.
+ * // Set its aspect to 1.5.
+ * // Set its near to 600.
+ * // Set its far to 1200.
+ * cam2.perspective(0.2, 1.5, 600, 1200);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe('A white cube moves left and right on a gray background. The camera toggles between a frontal and a skewed aerial view when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin left and right.
+ * let x = 100 * sin(frameCount * 0.01);
+ * translate(x, 0, 0);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Apply an orthographic projection.
+ * cam2.ortho();
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe('A row of white cubes against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 500);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -40);
+ * box(10);
+ * }
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'ortho',
+ value: function ortho(left, right, bottom, top, near, far) {
+ if (left === undefined) left = - this._renderer.width / 2;
+ if (right === undefined) right = + this._renderer.width / 2;
+ if (bottom === undefined) bottom = - this._renderer.height / 2;
+ if (top === undefined) top = + this._renderer.height / 2;
+ if (near === undefined) near = 0;
+ if (far === undefined) far = Math.max(this._renderer.width, this._renderer.height) + 800;
+ this.cameraNear = near;
+ this.cameraFar = far;
+ var w = right - left;
+ var h = top - bottom;
+ var d = far - near;
+ var x = + 2 / w;
+ var y = + 2 / h * this.yScale;
+ var z = - 2 / d;
+ var tx = - (right + left) / w;
+ var ty = - (top + bottom) / h;
+ var tz = - (far + near) / d;
+ this.projMatrix = _main.default.Matrix.identity();
+ /* eslint-disable indent */
+ this.projMatrix.set(x, 0, 0, 0, 0, - y, 0, 0, 0, 0, z, 0, tx, ty, tz, 1);
+ /* eslint-enable indent */
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(this.projMatrix);
+ }
+ this.cameraType = 'custom';
+ } /**
+ * Sets the camera's frustum.
+ *
+ * In a frustum projection, shapes that are further from the camera appear
+ * smaller than shapes that are near the camera. This technique, called
+ * foreshortening, creates realistic 3D scenes.
+ *
+ * `myCamera.frustum()` changes the camera’s perspective by changing its
+ * viewing frustum. The frustum is the volume of space that’s visible to the
+ * camera. The frustum’s shape is a pyramid with its top cut off. The camera
+ * is placed where the top of the pyramid should be and points towards the
+ * base of the pyramid. It views everything within the frustum.
+ *
+ * The first four parameters, `left`, `right`, `bottom`, and `top`, set the
+ * coordinates of the frustum’s sides, bottom, and top. For example, calling
+ * `myCamera.frustum(-100, 100, 200, -200)` creates a frustum that’s 200
+ * pixels wide and 400 pixels tall. By default, these coordinates are set
+ * based on the sketch’s width and height, as in
+ * `myCamera.frustum(-width / 20, width / 20, height / 20, -height / 20)`.
+ *
+ * The last two parameters, `near` and `far`, set the distance of the
+ * frustum’s near and far plane from the camera. For example, calling
+ * `myCamera.frustum(-100, 100, 200, -200, 50, 1000)` creates a frustum that’s
+ * 200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends
+ * 1,000 pixels from the camera. By default, near is set to `0.1 * 800`, which
+ * is 1/10th the default distance between the camera and the origin. `far` is
+ * set to `10 * 800`, which is 10 times the default distance between the
+ * camera and the origin.
+ *
+ * @method frustum
+ * @for p5.Camera
+ * @param {Number} [left] x-coordinate of the frustum’s left plane. Defaults to `-width / 20`.
+ * @param {Number} [right] x-coordinate of the frustum’s right plane. Defaults to `width / 20`.
+ * @param {Number} [bottom] y-coordinate of the frustum’s bottom plane. Defaults to `height / 20`.
+ * @param {Number} [top] y-coordinate of the frustum’s top plane. Defaults to `-height / 20`.
+ * @param {Number} [near] z-coordinate of the frustum’s near plane. Defaults to `0.1 * 800`.
+ * @param {Number} [far] z-coordinate of the frustum’s far plane. Defaults to `10 * 800`.
+ *
+ * @example
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Apply an orthographic projection.
+ * cam2.ortho();
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe('A row of white cubes slither like a snake against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 500);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * push();
+ * // Calculate the box's coordinates.
+ * let x = 10 * sin(frameCount * 0.02 + i * 0.6);
+ * let z = -40 * i;
+ * // Translate the origin.
+ * translate(x, 0, z);
+ * // Draw the box.
+ * box(10);
+ * pop();
+ * }
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'frustum',
+ value: function frustum(left, right, bottom, top, near, far) {
+ if (left === undefined) left = - this._renderer.width * 0.05;
+ if (right === undefined) right = + this._renderer.width * 0.05;
+ if (bottom === undefined) bottom = + this._renderer.height * 0.05;
+ if (top === undefined) top = - this._renderer.height * 0.05;
+ if (near === undefined) near = this.defaultCameraNear;
+ if (far === undefined) far = this.defaultCameraFar;
+ this.cameraNear = near;
+ this.cameraFar = far;
+ var w = right - left;
+ var h = top - bottom;
+ var d = far - near;
+ var x = + (2 * near) / w;
+ var y = + (2 * near) / h * this.yScale;
+ var z = - (2 * far * near) / d;
+ var tx = (right + left) / w;
+ var ty = (top + bottom) / h;
+ var tz = - (far + near) / d;
+ this.projMatrix = _main.default.Matrix.identity();
+ /* eslint-disable indent */
+ this.projMatrix.set(x, 0, 0, 0, 0, - y, 0, 0, tx, ty, tz, - 1, 0, 0, z, 0);
+ /* eslint-enable indent */
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(this.projMatrix);
+ }
+ this.cameraType = 'custom';
+ } ////////////////////////////////////////////////////////////////////////////////
+ // Camera Orientation Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Rotate camera view about arbitrary axis defined by x,y,z
+ * based on http://learnwebgl.brown37.net/07_cameras/camera_rotating_motion.html
+ * @method _rotateView
+ * @private
+ */
+
+ },
+ {
+ key: '_rotateView',
+ value: function _rotateView(a, x, y, z) {
+ var centerX = this.centerX;
+ var centerY = this.centerY;
+ var centerZ = this.centerZ;
+ // move center by eye position such that rotation happens around eye position
+ centerX -= this.eyeX;
+ centerY -= this.eyeY;
+ centerZ -= this.eyeZ;
+ var rotation = _main.default.Matrix.identity(this._renderer._pInst);
+ rotation.rotate(this._renderer._pInst._toRadians(a), x, y, z);
+ /* eslint-disable max-len */
+ var rotatedCenter = [
+ centerX * rotation.mat4[0] + centerY * rotation.mat4[4] + centerZ * rotation.mat4[8],
+ centerX * rotation.mat4[1] + centerY * rotation.mat4[5] + centerZ * rotation.mat4[9],
+ centerX * rotation.mat4[2] + centerY * rotation.mat4[6] + centerZ * rotation.mat4[10]
+ ];
+ /* eslint-enable max-len */
+ // add eye position back into center
+ rotatedCenter[0] += this.eyeX;
+ rotatedCenter[1] += this.eyeY;
+ rotatedCenter[2] += this.eyeZ;
+ this.camera(this.eyeX, this.eyeY, this.eyeZ, rotatedCenter[0], rotatedCenter[1], rotatedCenter[2], this.upX, this.upY, this.upZ);
+ } /**
+ * Rotates the camera left and right.
+ *
+ * Panning rotates the camera without changing its position. The rotation
+ * happens in the camera’s "local" space.
+ *
+ * The parameter, `angle`, is the angle the camera should rotate. Passing a
+ * positive angle, as in `myCamera.pan(0.001)`, rotates the camera to the
+ * right. Passing a negative angle, as in `myCamera.pan(-0.001)`, rotates the
+ * camera to the left.
+ *
+ * Note: Angles are interpreted based on the current
+ * angleMode().
+ *
+ * @method pan
+ * @param {Number} angle amount to rotate in the current
+ * angleMode().
+ *
+ * @example
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Adjust the frustum.
+ * // Center it.
+ * // Set its width and height to 20 pixels.
+ * // Place its near plane 300 pixels from the camera.
+ * // Place its far plane 350 pixels from the camera.
+ * cam2.frustum(-10, 10, -10, 10, 300, 350);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe(
+ * 'A row of white cubes against a gray background. The camera zooms in on one cube when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 600);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -40);
+ * box(10);
+ * }
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'pan',
+ value: function pan(amount) {
+ var local = this._getLocalAxes();
+ this._rotateView(amount, local.y[0], local.y[1], local.y[2]);
+ } /**
+ * Rotates the camera up and down.
+ *
+ * Tilting rotates the camera without changing its position. The rotation
+ * happens in the camera’s "local" space.
+ *
+ * The parameter, `angle`, is the angle the camera should rotate. Passing a
+ * positive angle, as in `myCamera.tilt(0.001)`, rotates the camera down.
+ * Passing a negative angle, as in `myCamera.tilt(-0.001)`, rotates the camera
+ * up.
+ *
+ * Note: Angles are interpreted based on the current
+ * angleMode().
+ *
+ * @method tilt
+ * @param {Number} angle amount to rotate in the current
+ * angleMode().
+ *
+ * @example
+ *
+ * let cam;
+ * let delta = 0.001;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Pan with the camera.
+ * cam.pan(delta);
+ *
+ * // Switch directions every 120 frames.
+ * if (frameCount % 120 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'tilt',
+ value: function tilt(amount) {
+ var local = this._getLocalAxes();
+ this._rotateView(amount, local.x[0], local.x[1], local.x[2]);
+ } /**
+ * Points the camera at a location.
+ *
+ * `myCamera.lookAt()` changes the camera’s orientation without changing its
+ * position.
+ *
+ * The parameters, `x`, `y`, and `z`, are the coordinates in "world" space
+ * where the camera should point. For example, calling
+ * `myCamera.lookAt(10, 20, 30)` points the camera at the coordinates
+ * `(10, 20, 30)`.
+ *
+ * @method lookAt
+ * @for p5.Camera
+ * @param {Number} x x-coordinate of the position where the camera should look in "world" space.
+ * @param {Number} y y-coordinate of the position where the camera should look in "world" space.
+ * @param {Number} z z-coordinate of the position where the camera should look in "world" space.
+ *
+ * @example
+ *
+ * let cam;
+ * let delta = 0.001;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube on a gray background. The cube goes in and out of view as the camera tilts up and down.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Pan with the camera.
+ * cam.tilt(delta);
+ *
+ * // Switch directions every 120 frames.
+ * if (frameCount % 120 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'lookAt',
+ value: function lookAt(x, y, z) {
+ this.camera(this.eyeX, this.eyeY, this.eyeZ, x, y, z, this.upX, this.upY, this.upZ);
+ } ////////////////////////////////////////////////////////////////////////////////
+ // Camera Position Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Sets the position and orientation of the camera.
+ *
+ * `myCamera.camera()` allows objects to be viewed from different angles. It
+ * has nine parameters that are all optional.
+ *
+ * The first three parameters, `x`, `y`, and `z`, are the coordinates of the
+ * camera’s position in "world" space. For example, calling
+ * `myCamera.camera(0, 0, 0)` places the camera at the origin `(0, 0, 0)`. By
+ * default, the camera is placed at `(0, 0, 800)`.
+ *
+ * The next three parameters, `centerX`, `centerY`, and `centerZ` are the
+ * coordinates of the point where the camera faces in "world" space. For
+ * example, calling `myCamera.camera(0, 0, 0, 10, 20, 30)` places the camera
+ * at the origin `(0, 0, 0)` and points it at `(10, 20, 30)`. By default, the
+ * camera points at the origin `(0, 0, 0)`.
+ *
+ * The last three parameters, `upX`, `upY`, and `upZ` are the components of
+ * the "up" vector in "local" space. The "up" vector orients the camera’s
+ * y-axis. For example, calling
+ * `myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0)` places the camera at the
+ * origin `(0, 0, 0)`, points it at `(10, 20, 30)`, and sets the "up" vector
+ * to `(0, -1, 0)` which is like holding it upside-down. By default, the "up"
+ * vector is `(0, 1, 0)`.
+ *
+ * @method camera
+ * @for p5.Camera
+ * @param {Number} [x] x-coordinate of the camera. Defaults to 0.
+ * @param {Number} [y] y-coordinate of the camera. Defaults to 0.
+ * @param {Number} [z] z-coordinate of the camera. Defaults to 800.
+ * @param {Number} [centerX] x-coordinate of the point the camera faces. Defaults to 0.
+ * @param {Number} [centerY] y-coordinate of the point the camera faces. Defaults to 0.
+ * @param {Number} [centerZ] z-coordinate of the point the camera faces. Defaults to 0.
+ * @param {Number} [upX] x-component of the camera’s "up" vector. Defaults to 0.
+ * @param {Number} [upY] x-component of the camera’s "up" vector. Defaults to 1.
+ * @param {Number} [upZ] z-component of the camera’s "up" vector. Defaults to 0.
+ *
+ * @example
+ *
+ * // Double-click to look at a different cube.
+ *
+ * let cam;
+ * let isLookingLeft = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Camera object.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-center.
+ * cam.setPosition(0, -400, 800);
+ *
+ * // Point the camera at the origin.
+ * cam.lookAt(-30, 0, 0);
+ *
+ * describe(
+ * 'A red cube and a blue cube on a gray background. The camera switches focus between the cubes when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the box on the left.
+ * push();
+ * // Translate the origin to the left.
+ * translate(-30, 0, 0);
+ * // Style the box.
+ * fill(255, 0, 0);
+ * // Draw the box.
+ * box(20);
+ * pop();
+ *
+ * // Draw the box on the right.
+ * push();
+ * // Translate the origin to the right.
+ * translate(30, 0, 0);
+ * // Style the box.
+ * fill(0, 0, 255);
+ * // Draw the box.
+ * box(20);
+ * pop();
+ * }
+ *
+ * // Change the camera's focus when the user double-clicks.
+ * function doubleClicked() {
+ * if (isLookingLeft === true) {
+ * cam.lookAt(30, 0, 0);
+ * isLookingLeft = false;
+ * } else {
+ * cam.lookAt(-30, 0, 0);
+ * isLookingLeft = true;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Place it at the top-right: (1200, -600, 100)
+ * // Point it at the row of boxes: (-10, -10, 400)
+ * // Set its "up" vector to the default: (0, 1, 0)
+ * cam2.camera(1200, -600, 100, -10, -10, 400, 0, 1, 0);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe(
+ * 'A row of white cubes against a gray background. The camera toggles between a frontal and an aerial view when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 500);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -30);
+ * box(10);
+ * }
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'camera',
+ value: function camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ) {
+ if (typeof eyeX === 'undefined') {
+ eyeX = this.defaultEyeX;
+ eyeY = this.defaultEyeY;
+ eyeZ = this.defaultEyeZ;
+ centerX = eyeX;
+ centerY = eyeY;
+ centerZ = 0;
+ upX = 0;
+ upY = 1;
+ upZ = 0;
+ }
+ this.eyeX = eyeX;
+ this.eyeY = eyeY;
+ this.eyeZ = eyeZ;
+ if (typeof centerX !== 'undefined') {
+ this.centerX = centerX;
+ this.centerY = centerY;
+ this.centerZ = centerZ;
+ }
+ if (typeof upX !== 'undefined') {
+ this.upX = upX;
+ this.upY = upY;
+ this.upZ = upZ;
+ }
+ var local = this._getLocalAxes();
+ // the camera affects the model view matrix, insofar as it
+ // inverse translates the world to the eye position of the camera
+ // and rotates it.
+ /* eslint-disable indent */
+ this.cameraMatrix.set(local.x[0], local.y[0], local.z[0], 0, local.x[1], local.y[1], local.z[1], 0, local.x[2], local.y[2], local.z[2], 0, 0, 0, 0, 1);
+ /* eslint-enable indent */
+ var tx = - eyeX;
+ var ty = - eyeY;
+ var tz = - eyeZ;
+ this.cameraMatrix.translate([tx,
+ ty,
+ tz]);
+ if (this._isActive()) {
+ this._renderer.uMVMatrix.set(this.cameraMatrix);
+ }
+ return this;
+ } /**
+ * Moves the camera along its "local" axes without changing its orientation.
+ *
+ * The parameters, `x`, `y`, and `z`, are the distances the camera should
+ * move. For example, calling `myCamera.move(10, 20, 30)` moves the camera 10
+ * pixels to the right, 20 pixels down, and 30 pixels backward in its "local"
+ * space.
+ *
+ * @method move
+ * @param {Number} x distance to move along the camera’s "local" x-axis.
+ * @param {Number} y distance to move along the camera’s "local" y-axis.
+ * @param {Number} z distance to move along the camera’s "local" z-axis.
+ * @example
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Place it at the right: (1200, 0, 100)
+ * // Point it at the row of boxes: (-10, -10, 400)
+ * // Set its "up" vector to the default: (0, 1, 0)
+ * cam2.camera(1200, 0, 100, -10, -10, 400, 0, 1, 0);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe(
+ * 'A row of white cubes against a gray background. The camera toggles between a static frontal view and an orbiting view when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Update cam2's position.
+ * let x = 1200 * cos(frameCount * 0.01);
+ * let y = -600 * sin(frameCount * 0.01);
+ * cam2.camera(x, y, 100, -10, -10, 400, 0, 1, 0);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 500);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -30);
+ * box(10);
+ * }
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'move',
+ value: function move(x, y, z) {
+ var local = this._getLocalAxes();
+ // scale local axes by movement amounts
+ // based on http://learnwebgl.brown37.net/07_cameras/camera_linear_motion.html
+ var dx = [
+ local.x[0] * x,
+ local.x[1] * x,
+ local.x[2] * x
+ ];
+ var dy = [
+ local.y[0] * y,
+ local.y[1] * y,
+ local.y[2] * y
+ ];
+ var dz = [
+ local.z[0] * z,
+ local.z[1] * z,
+ local.z[2] * z
+ ];
+ this.camera(this.eyeX + dx[0] + dy[0] + dz[0], this.eyeY + dx[1] + dy[1] + dz[1], this.eyeZ + dx[2] + dy[2] + dz[2], this.centerX + dx[0] + dy[0] + dz[0], this.centerY + dx[1] + dy[1] + dz[1], this.centerZ + dx[2] + dy[2] + dz[2], this.upX, this.upY, this.upZ);
+ } /**
+ * Sets the camera’s position in "world" space without changing its
+ * orientation.
+ *
+ * The parameters, `x`, `y`, and `z`, are the coordinates where the camera
+ * should be placed. For example, calling `myCamera.setPosition(10, 20, 30)`
+ * places the camera at coordinates `(10, 20, 30)` in "world" space.
+ *
+ * @method setPosition
+ * @param {Number} x x-coordinate in "world" space.
+ * @param {Number} y y-coordinate in "world" space.
+ * @param {Number} z z-coordinate in "world" space.
+ *
+ * @example
+ *
+ * // Click the canvas to begin detecting key presses.
+ *
+ * let cam;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam = createCamera();
+ *
+ * // Place the camera at the top-right.
+ * cam.setPosition(400, -400, 800);
+ *
+ * // Point it at the origin.
+ * cam.lookAt(0, 0, 0);
+ *
+ * describe(
+ * 'A white cube drawn against a gray background. The cube appears to move when the user presses certain keys.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Move the camera along its "local" axes
+ * // when the user presses certain keys.
+ * if (keyIsPressed === true) {
+ *
+ * // Move horizontally.
+ * if (keyCode === LEFT_ARROW) {
+ * cam.move(-1, 0, 0);
+ * }
+ * if (keyCode === RIGHT_ARROW) {
+ * cam.move(1, 0, 0);
+ * }
+ *
+ * // Move vertically.
+ * if (keyCode === UP_ARROW) {
+ * cam.move(0, -1, 0);
+ * }
+ * if (keyCode === DOWN_ARROW) {
+ * cam.move(0, 1, 0);
+ * }
+ *
+ * // Move in/out of the screen.
+ * if (key === 'i') {
+ * cam.move(0, 0, -1);
+ * }
+ * if (key === 'o') {
+ * cam.move(0, 0, 1);
+ * }
+ * }
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Place it closer to the origin.
+ * cam2.setPosition(0, 0, 600);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe(
+ * 'A row of white cubes against a gray background. The camera toggles the amount of zoom when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 500);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -30);
+ * box(10);
+ * }
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setPosition',
+ value: function setPosition(x, y, z) {
+ var diffX = x - this.eyeX;
+ var diffY = y - this.eyeY;
+ var diffZ = z - this.eyeZ;
+ this.camera(x, y, z, this.centerX + diffX, this.centerY + diffY, this.centerZ + diffZ, this.upX, this.upY, this.upZ);
+ } /**
+ * Sets the camera’s position, orientation, and projection by copying another
+ * camera.
+ *
+ * The parameter, `cam`, is the `p5.Camera` object to copy. For example, calling
+ * `cam2.set(cam1)` will set `cam2` using `cam1`’s configuration.
+ *
+ * @method set
+ * @param {p5.Camera} cam camera to copy.
+ *
+ * @example
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let isDefaultCamera = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Place it closer to the origin.
+ * cam2.setPosition(0, 0, 600);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe(
+ * 'A row of white cubes against a gray background. The camera toggles between a static view and a view that zooms in and out when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Update cam2's z-coordinate.
+ * let z = 100 * sin(frameCount * 0.01) + 700;
+ * cam2.setPosition(0, 0, z);
+ *
+ * // Translate the origin toward the camera.
+ * translate(-10, 10, 500);
+ *
+ * // Rotate the coordinate system.
+ * rotateY(-0.1);
+ * rotateX(-0.1);
+ *
+ * // Draw the row of boxes.
+ * for (let i = 0; i < 6; i += 1) {
+ * translate(0, 0, -30);
+ * box(10);
+ * }
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (isDefaultCamera === true) {
+ * setCamera(cam2);
+ * isDefaultCamera = false;
+ * } else {
+ * setCamera(cam1);
+ * isDefaultCamera = true;
+ * }
+ * }
+ *
+ *
+ * "
+ ]
+ },
+ 'p5.Gain': {
+ name: 'p5.Gain',
+ shortname: 'p5.Gain',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 11879,
+ description:
+ '\n"
+ ]
+ },
+ 'p5.AudioVoice': {
+ name: 'p5.AudioVoice',
+ shortname: 'p5.AudioVoice',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 12020,
+ description:
+ ''
+ ]
+ },
+ 'p5.PolySynth': {
+ name: 'p5.PolySynth',
+ shortname: 'p5.PolySynth',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 12362,
+ description:
+ ''
+ ]
+ },
+ 'p5.Distortion': {
+ name: 'p5.Distortion',
+ shortname: 'p5.Distortion',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 12767,
+ description:
+ ''],
+ alt: '80x80 white quarter-circle with curve toward bottom right of canvas.',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 77,
+ description:
+ ''],
+ alt: 'white half-circle with curve toward bottom of canvas.',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 96,
+ description:
+ ''
+ ],
+ alt:
+ 'white eighth-circle rotated about 40 degrees with curve bottom right canvas.',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 115,
+ description:
+ ''],
+ alt: '80x80 white ellipse shape in center of canvas.',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 134,
+ description:
+ ''],
+ alt: '80x80 white ellipse shape in center of canvas.',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 153,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 167,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 185,
+ itemtype: 'property',
+ name: 'CORNER',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 190,
+ itemtype: 'property',
+ name: 'CORNERS',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 195,
+ itemtype: 'property',
+ name: 'RADIUS',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 200,
+ itemtype: 'property',
+ name: 'RIGHT',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 205,
+ itemtype: 'property',
+ name: 'LEFT',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 210,
+ itemtype: 'property',
+ name: 'CENTER',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 215,
+ itemtype: 'property',
+ name: 'TOP',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 220,
+ itemtype: 'property',
+ name: 'BOTTOM',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 225,
+ itemtype: 'property',
+ name: 'BASELINE',
+ type: 'String',
+ final: 1,
+ default: 'alphabetic',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 231,
+ itemtype: 'property',
+ name: 'POINTS',
+ type: 'Number',
+ final: 1,
+ default: '0x0000',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 237,
+ itemtype: 'property',
+ name: 'LINES',
+ type: 'Number',
+ final: 1,
+ default: '0x0001',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 243,
+ itemtype: 'property',
+ name: 'LINE_STRIP',
+ type: 'Number',
+ final: 1,
+ default: '0x0003',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 249,
+ itemtype: 'property',
+ name: 'LINE_LOOP',
+ type: 'Number',
+ final: 1,
+ default: '0x0002',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 255,
+ itemtype: 'property',
+ name: 'TRIANGLES',
+ type: 'Number',
+ final: 1,
+ default: '0x0004',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 261,
+ itemtype: 'property',
+ name: 'TRIANGLE_FAN',
+ type: 'Number',
+ final: 1,
+ default: '0x0006',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 267,
+ itemtype: 'property',
+ name: 'TRIANGLE_STRIP',
+ type: 'Number',
+ final: 1,
+ default: '0x0005',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 273,
+ itemtype: 'property',
+ name: 'QUADS',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 278,
+ itemtype: 'property',
+ name: 'QUAD_STRIP',
+ type: 'String',
+ final: 1,
+ default: 'quad_strip',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 284,
+ itemtype: 'property',
+ name: 'CLOSE',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 289,
+ itemtype: 'property',
+ name: 'OPEN',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 294,
+ itemtype: 'property',
+ name: 'CHORD',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 299,
+ itemtype: 'property',
+ name: 'PIE',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 304,
+ itemtype: 'property',
+ name: 'PROJECT',
+ type: 'String',
+ final: 1,
+ default: 'square',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 310,
+ itemtype: 'property',
+ name: 'SQUARE',
+ type: 'String',
+ final: 1,
+ default: 'butt',
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 316,
+ itemtype: 'property',
+ name: 'ROUND',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 321,
+ itemtype: 'property',
+ name: 'BEVEL',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 326,
+ itemtype: 'property',
+ name: 'MITER',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 333,
+ itemtype: 'property',
+ name: 'RGB',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 338,
+ itemtype: 'property',
+ name: 'HSB',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 343,
+ itemtype: 'property',
+ name: 'HSL',
+ type: 'String',
+ final: 1,
+ class: 'p5',
+ module: 'Constants',
+ submodule: 'Constants'
+ },
+ {
+ file: 'src/core/constants.js',
+ line: 350,
+ description:
+ '"
+ ],
+ alt: 'default grey canvas',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 51,
+ description:
+ ''
+ ],
+ alt: 'numbers rapidly counting upward with frame count set to 30.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 78,
+ description:
+ ''
+ ],
+ alt:
+ 'red rect moves left to right, followed by blue rect moving at the same speed\nwith a lower frame rate. Loops.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 129,
+ description:
+ ''
+ ],
+ alt:
+ 'green 50x50 ellipse at top left. Red X covers canvas when page focus changes',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 161,
+ description:
+ '"
+ ],
+ alt:
+ 'canvas is divided into four quadrants. cursor on first is a cross, second is a progress,\nthird is a custom cursor using path to the cursor and fourth is a grab.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 230,
+ description:
+ ''
+ ],
+ alt:
+ 'blue rect moves left to right, followed by red rect moving faster. Loops.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment',
+ overloads: [
+ {
+ line: 230,
+ params: [
+ {
+ name: 'fps',
+ description:
+ ''
+ ],
+ alt: 'cursor becomes 10x 10 white ellipse the moves with mouse x and y.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 358,
+ description:
+ ''
+ ],
+ alt: 'cursor becomes 10x 10 white ellipse the moves with mouse x and y.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 377,
+ description:
+ ''
+ ],
+ alt: 'no display.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 396,
+ description:
+ ''
+ ],
+ alt: 'no display.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 412,
+ description:
+ ''
+ ],
+ alt: 'no display.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 428,
+ description:
+ ''
+ ],
+ alt: 'no display.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 482,
+ description:
+ '"
+ ],
+ alt: 'no display',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 715,
+ description: '"
+ ],
+ alt: 'nothing displayed',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/main.js',
+ line: 82,
+ description:
+ ''
+ ],
+ alt: 'nothing displayed',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/main.js',
+ line: 113,
+ description:
+ ''
+ ],
+ alt: 'nothing displayed',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/main.js',
+ line: 406,
+ description:
+ '"
+ ],
+ alt: 'nothing displayed',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/main.js',
+ line: 674,
+ description:
+ "'
+ ],
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 20,
+ description:
+ '\n \n \n "
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 46,
+ params: [
+ {
+ name: 'parent',
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 111,
+ params: [
+ {
+ name: 'id',
+ description: '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 151,
+ params: [
+ {
+ name: 'class',
+ description: '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 247,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 296,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 362,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 416,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 530,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 573,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 615,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 663,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 703,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 752,
+ description:
+ '"
+ ],
+ alt: 'nothing displayed',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 790,
+ description:
+ '"
+ ],
+ alt: 'nothing displayed',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 854,
+ description: '"
+ ],
+ alt:
+ 'A white line on a black background stays still on the top-left half.\nA black line animates from top to bottom on a white background on the right half.\nWhen clicked, the black line starts back over at the top.',
+ class: 'p5.Graphics',
+ module: 'Rendering',
+ submodule: 'Rendering'
+ },
+ {
+ file: 'src/core/p5.Graphics.js',
+ line: 115,
+ description:
+ '\n\n"
+ ],
+ alt:
+ 'no image\na multi-colored circle moving back and forth over a scrolling background.',
+ class: 'p5.Graphics',
+ module: 'Rendering',
+ submodule: 'Rendering'
+ },
+ {
+ file: 'src/core/p5.Renderer.js',
+ line: 95,
+ description: ''
+ ],
+ alt: 'No image displayed.',
+ class: 'p5',
+ module: 'Rendering',
+ submodule: 'Rendering'
+ },
+ {
+ file: 'src/core/rendering.js',
+ line: 170,
+ description:
+ '
\n(2D) indicates that this blend mode only works in the 2D renderer.
\n(3D) indicates that this blend mode only works in the WEBGL renderer.", + itemtype: 'method', + name: 'blendMode', + params: [ + { + name: 'mode', + description: + '\n\n'
+ ],
+ alt:
+ '113 pixel long line extending from top-left to bottom right of canvas.\nhorizontal line moves slowly from left. Loops but stops on mouse press.',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/structure.js',
+ line: 72,
+ description:
+ ''
+ ],
+ alt:
+ 'horizontal line moves slowly from left. Loops but stops on mouse press.',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/structure.js',
+ line: 120,
+ description:
+ '\n"
+ ],
+ alt: 'black line on far left of canvas\n black line on far left of canvas',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 11,
+ description:
+ '"
+ ],
+ alt:
+ 'When you type the key name is displayed as black text on white background.\n If you reload the page, the last letter typed is still displaying.',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'LocalStorage'
+ },
+ {
+ file: 'src/data/local_storage.js',
+ line: 91,
+ description:
+ '"
+ ],
+ alt:
+ 'If you click, the canvas changes to a random color.\n If you reload the page, the canvas is still the color it\n was when the page was previously loaded.',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'LocalStorage'
+ },
+ {
+ file: 'src/data/local_storage.js',
+ line: 168,
+ description:
+ '\n\n"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 88,
+ description:
+ '\n\n"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 149,
+ description: '\n"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 226,
+ description:
+ '\n\n"
+ ],
+ alt:
+ 'dropdown: pear, kiwi, grape. When selected text "its a" + selection shown.',
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 294,
+ description:
+ '"
+ ],
+ alt: 'no display.',
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 329,
+ description: '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 352,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 365,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 386,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 386,
+ params: [
+ {
+ name: 'src',
+ description: '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 452,
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 454,
+ description:
+ '\n\n"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 509,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 543,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 611,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 611,
+ params: [
+ {
+ name: 'multiple',
+ description:
+ '\n"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 854,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 956,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1029,
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1071,
+ description:
+ '"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1117,
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1119,
+ description:
+ ""
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1156,
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1158,
+ itemtype: 'property',
+ name: 'VIDEO',
+ type: 'String',
+ final: 1,
+ category: ['Constants'],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1164,
+ itemtype: 'property',
+ name: 'AUDIO',
+ type: 'String',
+ final: 1,
+ category: ['Constants'],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1201,
+ description:
+ "\n\n
+ * // Double-click to "reset" the camera zoom.
+ *
+ * let cam1;
+ * let cam2;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * cam1 = createCamera();
+ *
+ * // Place the camera at the top-right.
+ * cam1.setPosition(400, -400, 800);
+ *
+ * // Point it at the origin.
+ * cam1.lookAt(0, 0, 0);
+ *
+ * // Create the second camera.
+ * cam2 = createCamera();
+ *
+ * // Copy cam1's configuration.
+ * cam2.set(cam1);
+ *
+ * describe(
+ * 'A white cube drawn against a gray background. The camera slowly moves forward. The camera resets when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Update cam2's position.
+ * cam2.move(0, 0, -1);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ * // "Reset" the camera when the user double-clicks.
+ * function doubleClicked() {
+ * cam2.set(cam1);
+ * }
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(cam) {
+ var keyNamesOfThePropToCopy = [
+ 'eyeX',
+ 'eyeY',
+ 'eyeZ',
+ 'centerX',
+ 'centerY',
+ 'centerZ',
+ 'upX',
+ 'upY',
+ 'upZ',
+ 'cameraFOV',
+ 'aspectRatio',
+ 'cameraNear',
+ 'cameraFar',
+ 'cameraType',
+ 'yScale'
+ ];
+ for (var _i = 0, _keyNamesOfThePropToC = keyNamesOfThePropToCopy; _i < _keyNamesOfThePropToC.length; _i++) {
+ var keyName = _keyNamesOfThePropToC[_i];
+ this[keyName] = cam[keyName];
+ }
+ this.cameraMatrix = cam.cameraMatrix.copy();
+ this.projMatrix = cam.projMatrix.copy();
+ // If the target camera is active, update uMVMatrix and uPMatrix.
+ if (this._isActive()) {
+ this._renderer.uMVMatrix.mat4 = this.cameraMatrix.mat4.slice();
+ this._renderer.uPMatrix.mat4 = this.projMatrix.mat4.slice();
+ }
+ } /**
+ * Sets the camera’s position and orientation to values that are in-between
+ * those of two other cameras.
+ *
+ * `myCamera.slerp()` uses spherical linear interpolation to calculate a
+ * position and orientation that’s in-between two other cameras. Doing so is
+ * helpful for transitioning smoothly between two perspectives.
+ *
+ * The first two parameters, `cam0` and `cam1`, are the `p5.Camera` objects
+ * that should be used to set the current camera.
+ *
+ * The third parameter, `amt`, is the amount to interpolate between `cam0` and
+ * `cam1`. 0.0 keeps the camera’s position and orientation equal to `cam0`’s,
+ * 0.5 sets them halfway between `cam0`’s and `cam1`’s , and 1.0 sets the
+ * position and orientation equal to `cam1`’s.
+ *
+ * For example, calling `myCamera.slerp(cam0, cam1, 0.1)` sets cam’s position
+ * and orientation very close to `cam0`’s. Calling
+ * `myCamera.slerp(cam0, cam1, 0.9)` sets cam’s position and orientation very
+ * close to `cam1`’s.
+ *
+ * Note: All of the cameras must use the same projection.
+ *
+ * @method slerp
+ * @param {p5.Camera} cam0 first camera.
+ * @param {p5.Camera} cam1 second camera.
+ * @param {Number} amt amount of interpolation between 0.0 (`cam0`) and 1.0 (`cam1`).
+ *
+ * @example
+ *
+ *
+ * let cam;
+ * let cam0;
+ * let cam1;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the main camera.
+ * // Keep its default settings.
+ * cam = createCamera();
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam0 = createCamera();
+ *
+ * // Create the second camera.
+ * cam1 = createCamera();
+ *
+ * // Place it at the top-right.
+ * cam1.setPosition(400, -400, 800);
+ *
+ * // Point it at the origin.
+ * cam1.lookAt(0, 0, 0);
+ *
+ * // Set the current camera to cam.
+ * setCamera(cam);
+ *
+ * describe('A white cube drawn against a gray background. The camera slowly oscillates between a frontal view and an aerial view.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the amount to interpolate between cam0 and cam1.
+ * let amt = 0.5 * sin(frameCount * 0.01) + 0.5;
+ *
+ * // Update the main camera's position and orientation.
+ * cam.slerp(cam0, cam1, amt);
+ *
+ * box();
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'slerp',
+ value: function slerp(cam0, cam1, amt) {
+ // If t is 0 or 1, do not interpolate and set the argument camera.
+ if (amt === 0) {
+ this.set(cam0);
+ return;
+ } else if (amt === 1) {
+ this.set(cam1);
+ return;
+ } // For this cameras is ortho, assume that cam0 and cam1 are also ortho
+ // and interpolate the elements of the projection matrix.
+ // Use logarithmic interpolation for interpolation.
+
+ if (this.projMatrix.mat4[15] !== 0) {
+ this.projMatrix.mat4[0] = cam0.projMatrix.mat4[0] * Math.pow(cam1.projMatrix.mat4[0] / cam0.projMatrix.mat4[0], amt);
+ this.projMatrix.mat4[5] = cam0.projMatrix.mat4[5] * Math.pow(cam1.projMatrix.mat4[5] / cam0.projMatrix.mat4[5], amt);
+ // If the camera is active, make uPMatrix reflect changes in projMatrix.
+ if (this._isActive()) {
+ this._renderer.uPMatrix.mat4 = this.projMatrix.mat4.slice();
+ }
+ } // prepare eye vector and center vector of argument cameras.
+
+ var eye0 = new _main.default.Vector(cam0.eyeX, cam0.eyeY, cam0.eyeZ);
+ var eye1 = new _main.default.Vector(cam1.eyeX, cam1.eyeY, cam1.eyeZ);
+ var center0 = new _main.default.Vector(cam0.centerX, cam0.centerY, cam0.centerZ);
+ var center1 = new _main.default.Vector(cam1.centerX, cam1.centerY, cam1.centerZ);
+ // Calculate the distance between eye and center for each camera.
+ // Logarithmically interpolate these with amt.
+ var dist0 = _main.default.Vector.dist(eye0, center0);
+ var dist1 = _main.default.Vector.dist(eye1, center1);
+ var lerpedDist = dist0 * Math.pow(dist1 / dist0, amt);
+ // Next, calculate the ratio to interpolate the eye and center by a constant
+ // ratio for each camera. This ratio is the same for both. Also, with this ratio
+ // of points, the distance is the minimum distance of the two points of
+ // the same ratio.
+ // With this method, if the viewpoint is fixed, linear interpolation is performed
+ // at the viewpoint, and if the center is fixed, linear interpolation is performed
+ // at the center, resulting in reasonable interpolation. If both move, the point
+ // halfway between them is taken.
+ var eyeDiff = _main.default.Vector.sub(eye0, eye1);
+ var diffDiff = eye0.copy().sub(eye1).sub(center0).add(center1);
+ // Suppose there are two line segments. Consider the distance between the points
+ // above them as if they were taken in the same ratio. This calculation figures out
+ // a ratio that minimizes this.
+ // Each line segment is, a line segment connecting the viewpoint and the center
+ // for each camera.
+ var divider = diffDiff.magSq();
+ var ratio = 1; // default.
+ if (divider > 0.000001) {
+ ratio = _main.default.Vector.dot(eyeDiff, diffDiff) / divider;
+ ratio = Math.max(0, Math.min(ratio, 1));
+ } // Take the appropriate proportions and work out the points
+ // that are between the new viewpoint and the new center position.
+
+ var lerpedMedium = _main.default.Vector.lerp(_main.default.Vector.lerp(eye0, center0, ratio), _main.default.Vector.lerp(eye1, center1, ratio), amt);
+ // Prepare each of rotation matrix from their camera matrix
+ var rotMat0 = cam0.cameraMatrix.createSubMatrix3x3();
+ var rotMat1 = cam1.cameraMatrix.createSubMatrix3x3();
+ // get front and up vector from local-coordinate-system.
+ var front0 = rotMat0.row(2);
+ var front1 = rotMat1.row(2);
+ var up0 = rotMat0.row(1);
+ var up1 = rotMat1.row(1);
+ // prepare new vectors.
+ var newFront = new _main.default.Vector();
+ var newUp = new _main.default.Vector();
+ var newEye = new _main.default.Vector();
+ var newCenter = new _main.default.Vector();
+ // Create the inverse matrix of mat0 by transposing mat0,
+ // and multiply it to mat1 from the right.
+ // This matrix represents the difference between the two.
+ // 'deltaRot' means 'difference of rotation matrices'.
+ var deltaRot = rotMat1.mult3x3(rotMat0.copy().transpose3x3());
+ // Calculate the trace and from it the cos value of the angle.
+ // An orthogonal matrix is just an orthonormal basis. If this is not the identity
+ // matrix, it is a centered orthonormal basis plus some angle of rotation about
+ // some axis. That's the angle. Letting this be theta, trace becomes 1+2cos(theta).
+ // reference: https://en.wikipedia.org/wiki/Rotation_matrix#Determining_the_angle
+ var diag = deltaRot.diagonal();
+ var cosTheta = 0.5 * (diag[0] + diag[1] + diag[2] - 1);
+ // If the angle is close to 0, the two matrices are very close,
+ // so in that case we execute linearly interpolate.
+ if (1 - cosTheta < 1e-7) {
+ // Obtain the front vector and up vector by linear interpolation
+ // and normalize them.
+ // calculate newEye, newCenter with newFront vector.
+ newFront.set(_main.default.Vector.lerp(front0, front1, amt)).normalize();
+ newEye.set(newFront).mult(ratio * lerpedDist).add(lerpedMedium);
+ newCenter.set(newFront).mult((ratio - 1) * lerpedDist).add(lerpedMedium);
+ newUp.set(_main.default.Vector.lerp(up0, up1, amt)).normalize();
+ // set the camera
+ this.camera(newEye.x, newEye.y, newEye.z, newCenter.x, newCenter.y, newCenter.z, newUp.x, newUp.y, newUp.z);
+ return;
+ } // Calculates the axis vector and the angle of the difference orthogonal matrix.
+ // The axis vector is what I explained earlier in the comments.
+ // similar calculation is here:
+ // https://github.com/mrdoob/three.js/blob/883249620049d1632e8791732808fefd1a98c871/src/math/Quaternion.js#L294
+
+ var a,
+ b,
+ c,
+ sinTheta;
+ var invOneMinusCosTheta = 1 / (1 - cosTheta);
+ var maxDiag = Math.max(diag[0], diag[1], diag[2]);
+ var offDiagSum13 = deltaRot.mat3[1] + deltaRot.mat3[3];
+ var offDiagSum26 = deltaRot.mat3[2] + deltaRot.mat3[6];
+ var offDiagSum57 = deltaRot.mat3[5] + deltaRot.mat3[7];
+ if (maxDiag === diag[0]) {
+ a = Math.sqrt((diag[0] - cosTheta) * invOneMinusCosTheta); // not zero.
+ invOneMinusCosTheta /= a;
+ b = 0.5 * offDiagSum13 * invOneMinusCosTheta;
+ c = 0.5 * offDiagSum26 * invOneMinusCosTheta;
+ sinTheta = 0.5 * (deltaRot.mat3[7] - deltaRot.mat3[5]) / a;
+ } else if (maxDiag === diag[1]) {
+ b = Math.sqrt((diag[1] - cosTheta) * invOneMinusCosTheta); // not zero.
+ invOneMinusCosTheta /= b;
+ c = 0.5 * offDiagSum57 * invOneMinusCosTheta;
+ a = 0.5 * offDiagSum13 * invOneMinusCosTheta;
+ sinTheta = 0.5 * (deltaRot.mat3[2] - deltaRot.mat3[6]) / b;
+ } else {
+ c = Math.sqrt((diag[2] - cosTheta) * invOneMinusCosTheta); // not zero.
+ invOneMinusCosTheta /= c;
+ a = 0.5 * offDiagSum26 * invOneMinusCosTheta;
+ b = 0.5 * offDiagSum57 * invOneMinusCosTheta;
+ sinTheta = 0.5 * (deltaRot.mat3[3] - deltaRot.mat3[1]) / c;
+ } // Constructs a new matrix after interpolating the angles.
+ // Multiplying mat0 by the first matrix yields mat1, but by creating a state
+ // in the middle of that matrix, you can obtain a matrix that is
+ // an intermediate state between mat0 and mat1.
+
+ var angle = amt * Math.atan2(sinTheta, cosTheta);
+ var cosAngle = Math.cos(angle);
+ var sinAngle = Math.sin(angle);
+ var oneMinusCosAngle = 1 - cosAngle;
+ var ab = a * b;
+ var bc = b * c;
+ var ca = c * a;
+ var lerpedRotMat = new _main.default.Matrix('mat3', [
+ cosAngle + oneMinusCosAngle * a * a,
+ oneMinusCosAngle * ab + sinAngle * c,
+ oneMinusCosAngle * ca - sinAngle * b,
+ oneMinusCosAngle * ab - sinAngle * c,
+ cosAngle + oneMinusCosAngle * b * b,
+ oneMinusCosAngle * bc + sinAngle * a,
+ oneMinusCosAngle * ca + sinAngle * b,
+ oneMinusCosAngle * bc - sinAngle * a,
+ cosAngle + oneMinusCosAngle * c * c
+ ]);
+ // Multiply this to mat0 from left to get the interpolated front vector.
+ // calculate newEye, newCenter with newFront vector.
+ lerpedRotMat.multiplyVec3(front0, newFront);
+ newEye.set(newFront).mult(ratio * lerpedDist).add(lerpedMedium);
+ newCenter.set(newFront).mult((ratio - 1) * lerpedDist).add(lerpedMedium);
+ lerpedRotMat.multiplyVec3(up0, newUp);
+ // We also get the up vector in the same way and set the camera.
+ // The eye position and center position are calculated based on the front vector.
+ this.camera(newEye.x, newEye.y, newEye.z, newCenter.x, newCenter.y, newCenter.z, newUp.x, newUp.y, newUp.z);
+ } ////////////////////////////////////////////////////////////////////////////////
+ // Camera Helper Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ // @TODO: combine this function with _setDefaultCamera to compute these values
+ // as-needed
+
+ },
+ {
+ key: '_computeCameraDefaultSettings',
+ value: function _computeCameraDefaultSettings() {
+ this.defaultAspectRatio = this._renderer.width / this._renderer.height;
+ this.defaultEyeX = 0;
+ this.defaultEyeY = 0;
+ this.defaultEyeZ = 800;
+ this.defaultCameraFOV = 2 * Math.atan(this._renderer.height / 2 / this.defaultEyeZ);
+ this.defaultCenterX = 0;
+ this.defaultCenterY = 0;
+ this.defaultCenterZ = 0;
+ this.defaultCameraNear = this.defaultEyeZ * 0.1;
+ this.defaultCameraFar = this.defaultEyeZ * 10;
+ } //detect if user didn't set the camera
+ //then call this function below
+
+ },
+ {
+ key: '_setDefaultCamera',
+ value: function _setDefaultCamera() {
+ this.cameraFOV = this.defaultCameraFOV;
+ this.aspectRatio = this.defaultAspectRatio;
+ this.eyeX = this.defaultEyeX;
+ this.eyeY = this.defaultEyeY;
+ this.eyeZ = this.defaultEyeZ;
+ this.centerX = this.defaultCenterX;
+ this.centerY = this.defaultCenterY;
+ this.centerZ = this.defaultCenterZ;
+ this.upX = 0;
+ this.upY = 1;
+ this.upZ = 0;
+ this.cameraNear = this.defaultCameraNear;
+ this.cameraFar = this.defaultCameraFar;
+ this.perspective();
+ this.camera();
+ this.cameraType = 'default';
+ }
+ },
+ {
+ key: '_resize',
+ value: function _resize() {
+ // If we're using the default camera, update the aspect ratio
+ if (this.cameraType === 'default') {
+ this._computeCameraDefaultSettings();
+ this.cameraFOV = this.defaultCameraFOV;
+ this.aspectRatio = this.defaultAspectRatio;
+ this.perspective();
+ }
+ } /**
+ * Returns a copy of a camera.
+ * @method copy
+ * @private
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ var _cam = new _main.default.Camera(this._renderer);
+ _cam.cameraFOV = this.cameraFOV;
+ _cam.aspectRatio = this.aspectRatio;
+ _cam.eyeX = this.eyeX;
+ _cam.eyeY = this.eyeY;
+ _cam.eyeZ = this.eyeZ;
+ _cam.centerX = this.centerX;
+ _cam.centerY = this.centerY;
+ _cam.centerZ = this.centerZ;
+ _cam.upX = this.upX;
+ _cam.upY = this.upY;
+ _cam.upZ = this.upZ;
+ _cam.cameraNear = this.cameraNear;
+ _cam.cameraFar = this.cameraFar;
+ _cam.cameraType = this.cameraType;
+ _cam.cameraMatrix = this.cameraMatrix.copy();
+ _cam.projMatrix = this.projMatrix.copy();
+ _cam.yScale = this.yScale;
+ return _cam;
+ } /**
+ * Returns a camera's local axes: left-right, up-down, and forward-backward,
+ * as defined by vectors in world-space.
+ * @method _getLocalAxes
+ * @private
+ */
+
+ },
+ {
+ key: '_getLocalAxes',
+ value: function _getLocalAxes() {
+ // calculate camera local Z vector
+ var z0 = this.eyeX - this.centerX;
+ var z1 = this.eyeY - this.centerY;
+ var z2 = this.eyeZ - this.centerZ;
+ // normalize camera local Z vector
+ var eyeDist = Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
+ if (eyeDist !== 0) {
+ z0 /= eyeDist;
+ z1 /= eyeDist;
+ z2 /= eyeDist;
+ } // calculate camera Y vector
+
+ var y0 = this.upX;
+ var y1 = this.upY;
+ var y2 = this.upZ;
+ // compute camera local X vector as up vector (local Y) cross local Z
+ var x0 = y1 * z2 - y2 * z1;
+ var x1 = - y0 * z2 + y2 * z0;
+ var x2 = y0 * z1 - y1 * z0;
+ // recompute y = z cross x
+ y0 = z1 * x2 - z2 * x1;
+ y1 = - z0 * x2 + z2 * x0;
+ y2 = z0 * x1 - z1 * x0;
+ // cross product gives area of parallelogram, which is < 1.0 for
+ // non-perpendicular unit-length vectors; so normalize x, y here:
+ var xmag = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
+ if (xmag !== 0) {
+ x0 /= xmag;
+ x1 /= xmag;
+ x2 /= xmag;
+ }
+ var ymag = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
+ if (ymag !== 0) {
+ y0 /= ymag;
+ y1 /= ymag;
+ y2 /= ymag;
+ }
+ return {
+ x: [
+ x0,
+ x1,
+ x2
+ ],
+ y: [
+ y0,
+ y1,
+ y2
+ ],
+ z: [
+ z0,
+ z1,
+ z2
+ ]
+ };
+ } /**
+ * Orbits the camera about center point. For use with orbitControl().
+ * @method _orbit
+ * @private
+ * @param {Number} dTheta change in spherical coordinate theta
+ * @param {Number} dPhi change in spherical coordinate phi
+ * @param {Number} dRadius change in radius
+ */
+
+ },
+ {
+ key: '_orbit',
+ value: function _orbit(dTheta, dPhi, dRadius) {
+ // Calculate the vector and its magnitude from the center to the viewpoint
+ var diffX = this.eyeX - this.centerX;
+ var diffY = this.eyeY - this.centerY;
+ var diffZ = this.eyeZ - this.centerZ;
+ var camRadius = Math.hypot(diffX, diffY, diffZ);
+ // front vector. unit vector from center to eye.
+ var front = new _main.default.Vector(diffX, diffY, diffZ).normalize();
+ // up vector. normalized camera's up vector.
+ var up = new _main.default.Vector(this.upX, this.upY, this.upZ).normalize(); // y-axis
+ // side vector. Right when viewed from the front
+ var side = _main.default.Vector.cross(up, front).normalize(); // x-axis
+ // vertical vector. normalized vector of projection of front vector.
+ var vertical = _main.default.Vector.cross(side, up); // z-axis
+ // update camRadius
+ camRadius *= Math.pow(10, dRadius);
+ // prevent zooming through the center:
+ if (camRadius < this.cameraNear) {
+ camRadius = this.cameraNear;
+ }
+ if (camRadius > this.cameraFar) {
+ camRadius = this.cameraFar;
+ } // calculate updated camera angle
+ // Find the angle between the "up" and the "front", add dPhi to that.
+ // angleBetween() may return negative value. Since this specification is subject to change
+ // due to version updates, it cannot be adopted, so here we calculate using a method
+ // that directly obtains the absolute value.
+
+ var camPhi = Math.acos(Math.max( - 1, Math.min(1, _main.default.Vector.dot(front, up)))) + dPhi;
+ // Rotate by dTheta in the shortest direction from "vertical" to "side"
+ var camTheta = dTheta;
+ // Invert camera's upX, upY, upZ if dPhi is below 0 or above PI
+ if (camPhi <= 0 || camPhi >= Math.PI) {
+ this.upX *= - 1;
+ this.upY *= - 1;
+ this.upZ *= - 1;
+ } // update eye vector by calculate new front vector
+
+ up.mult(Math.cos(camPhi));
+ vertical.mult(Math.cos(camTheta) * Math.sin(camPhi));
+ side.mult(Math.sin(camTheta) * Math.sin(camPhi));
+ front.set(up).add(vertical).add(side);
+ this.eyeX = camRadius * front.x + this.centerX;
+ this.eyeY = camRadius * front.y + this.centerY;
+ this.eyeZ = camRadius * front.z + this.centerZ;
+ // update camera
+ this.camera(this.eyeX, this.eyeY, this.eyeZ, this.centerX, this.centerY, this.centerZ, this.upX, this.upY, this.upZ);
+ } /**
+ * Orbits the camera about center point. For use with orbitControl().
+ * Unlike _orbit(), the direction of rotation always matches the direction of pointer movement.
+ * @method _orbitFree
+ * @private
+ * @param {Number} dx the x component of the rotation vector.
+ * @param {Number} dy the y component of the rotation vector.
+ * @param {Number} dRadius change in radius
+ */
+
+ },
+ {
+ key: '_orbitFree',
+ value: function _orbitFree(dx, dy, dRadius) {
+ // Calculate the vector and its magnitude from the center to the viewpoint
+ var diffX = this.eyeX - this.centerX;
+ var diffY = this.eyeY - this.centerY;
+ var diffZ = this.eyeZ - this.centerZ;
+ var camRadius = Math.hypot(diffX, diffY, diffZ);
+ // front vector. unit vector from center to eye.
+ var front = new _main.default.Vector(diffX, diffY, diffZ).normalize();
+ // up vector. camera's up vector.
+ var up = new _main.default.Vector(this.upX, this.upY, this.upZ);
+ // side vector. Right when viewed from the front. (like x-axis)
+ var side = _main.default.Vector.cross(up, front).normalize();
+ // down vector. Bottom when viewed from the front. (like y-axis)
+ var down = _main.default.Vector.cross(front, side);
+ // side vector and down vector are no longer used as-is.
+ // Create a vector representing the direction of rotation
+ // in the form cos(direction)*side + sin(direction)*down.
+ // Make the current side vector into this.
+ var directionAngle = Math.atan2(dy, dx);
+ down.mult(Math.sin(directionAngle));
+ side.mult(Math.cos(directionAngle)).add(down);
+ // The amount of rotation is the size of the vector (dx, dy).
+ var rotAngle = Math.sqrt(dx * dx + dy * dy);
+ // The vector that is orthogonal to both the front vector and
+ // the rotation direction vector is the rotation axis vector.
+ var axis = _main.default.Vector.cross(front, side);
+ // update camRadius
+ camRadius *= Math.pow(10, dRadius);
+ // prevent zooming through the center:
+ if (camRadius < this.cameraNear) {
+ camRadius = this.cameraNear;
+ }
+ if (camRadius > this.cameraFar) {
+ camRadius = this.cameraFar;
+ } // If the axis vector is likened to the z-axis, the front vector is
+ // the x-axis and the side vector is the y-axis. Rotate the up and front
+ // vectors respectively by thinking of them as rotations around the z-axis.
+ // Calculate the components by taking the dot product and
+ // calculate a rotation based on that.
+
+ var c = Math.cos(rotAngle);
+ var s = Math.sin(rotAngle);
+ var dotFront = up.dot(front);
+ var dotSide = up.dot(side);
+ var ux = dotFront * c + dotSide * s;
+ var uy = - dotFront * s + dotSide * c;
+ var uz = up.dot(axis);
+ up.x = ux * front.x + uy * side.x + uz * axis.x;
+ up.y = ux * front.y + uy * side.y + uz * axis.y;
+ up.z = ux * front.z + uy * side.z + uz * axis.z;
+ // We won't be using the side vector and the front vector anymore,
+ // so let's make the front vector into the vector from the center to the new eye.
+ side.mult( - s);
+ front.mult(c).add(side).mult(camRadius);
+ // it's complete. let's update camera.
+ this.camera(front.x + this.centerX, front.y + this.centerY, front.z + this.centerZ, this.centerX, this.centerY, this.centerZ, up.x, up.y, up.z);
+ } /**
+ * Returns true if camera is currently attached to renderer.
+ * @method _isActive
+ * @private
+ */
+
+ },
+ {
+ key: '_isActive',
+ value: function _isActive() {
+ return this === this._renderer._curCamera;
+ }
+ }
+ ]);
+ return Camera;
+ }();
+ /**
+ * Sets the current (active) camera of a 3D sketch.
+ *
+ * `setCamera()` allows for switching between multiple cameras created with
+ * createCamera().
+ *
+ * Note: `setCamera()` can only be used in WebGL mode.
+ *
+ * @method setCamera
+ * @param {p5.Camera} cam camera that should be made active.
+ * @for p5
+ *
+ * @example
+ *
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let cam1;
+ * let cam2;
+ * let usingCam1 = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = createCamera();
+ *
+ * // Create the second camera.
+ * // Place it at the top-left.
+ * // Point it at the origin.
+ * cam2 = createCamera();
+ * cam2.setPosition(400, -400, 800);
+ * cam2.lookAt(0, 0, 0);
+ *
+ * // Set the current camera to cam1.
+ * setCamera(cam1);
+ *
+ * describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (usingCam1 === true) {
+ * setCamera(cam2);
+ * usingCam1 = false;
+ * } else {
+ * setCamera(cam1);
+ * usingCam1 = true;
+ * }
+ * }
+ *
+ *
+ */
+ _main.default.prototype.setCamera = function (cam) {
+ this._renderer._curCamera = cam;
+ // set the projection matrix (which is not normally updated each frame)
+ this._renderer.uPMatrix.set(cam.projMatrix);
+ };
+ var _default = _main.default.Camera;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.math.hypot': 193,
+ 'core-js/modules/es.string.sub': 223
+ }
+ ],
+ 353: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.log2');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.log2');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * An internal class to store data that will be sent to a p5.RenderBuffer.
+ * Those need to eventually go into a Float32Array, so this class provides a
+ * variable-length array container backed by a Float32Array so that it can be
+ * sent to the GPU without allocating a new array each frame.
+ *
+ * Like a C++ vector, its fixed-length Float32Array backing its contents will
+ * double in size when it goes over its capacity.
+ *
+ * @example
+ *
+ *
+ * // Initialize storage with a capacity of 4
+ * const storage = new DataArray(4);
+ * console.log(storage.data.length); // 4
+ * console.log(storage.length); // 0
+ * console.log(storage.dataArray()); // Empty Float32Array
+ *
+ * storage.push(1, 2, 3, 4, 5, 6);
+ * console.log(storage.data.length); // 8
+ * console.log(storage.length); // 6
+ * console.log(storage.dataArray()); // Float32Array{1, 2, 3, 4, 5, 6}
+ *
+ *
+ */
+
+ _main.default.DataArray = /*#__PURE__*/ function () {
+ function DataArray() {
+ var initialLength = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 128;
+ _classCallCheck(this, DataArray);
+ this.length = 0;
+ this.data = new Float32Array(initialLength);
+ this.initialLength = initialLength;
+ } /**
+ * Returns a Float32Array window sized to the exact length of the data
+ */
+
+ _createClass(DataArray, [
+ {
+ key: 'dataArray',
+ value: function dataArray() {
+ return this.subArray(0, this.length);
+ } /**
+ * A "soft" clear, which keeps the underlying storage size the same, but
+ * empties the contents of its dataArray()
+ */
+
+ },
+ {
+ key: 'clear',
+ value: function clear() {
+ this.length = 0;
+ } /**
+ * Can be used to scale a DataArray back down to fit its contents.
+ */
+
+ },
+ {
+ key: 'rescale',
+ value: function rescale() {
+ if (this.length < this.data.length / 2) {
+ // Find the power of 2 size that fits the data
+ var targetLength = 1 << Math.ceil(Math.log2(this.length));
+ var newData = new Float32Array(targetLength);
+ newData.set(this.data.subarray(0, this.length), 0);
+ this.data = newData;
+ }
+ } /**
+ * A full reset, which allocates a new underlying Float32Array at its initial
+ * length
+ */
+
+ },
+ {
+ key: 'reset',
+ value: function reset() {
+ this.clear();
+ this.data = new Float32Array(this.initialLength);
+ } /**
+ * Adds values to the DataArray, expanding its internal storage to
+ * accommodate the new items.
+ */
+
+ },
+ {
+ key: 'push',
+ value: function push() {
+ for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+ values[_key] = arguments[_key];
+ }
+ this.ensureLength(this.length + values.length);
+ this.data.set(values, this.length);
+ this.length += values.length;
+ } /**
+ * Returns a copy of the data from the index `from`, inclusive, to the index
+ * `to`, exclusive
+ */
+
+ },
+ {
+ key: 'slice',
+ value: function slice(from, to) {
+ return this.data.slice(from, Math.min(to, this.length));
+ } /**
+ * Returns a mutable Float32Array window from the index `from`, inclusive, to
+ * the index `to`, exclusive
+ */
+
+ },
+ {
+ key: 'subArray',
+ value: function subArray(from, to) {
+ return this.data.subarray(from, Math.min(to, this.length));
+ } /**
+ * Expand capacity of the internal storage until it can fit a target size
+ */
+
+ },
+ {
+ key: 'ensureLength',
+ value: function ensureLength(target) {
+ while (this.data.length < target) {
+ var newData = new Float32Array(this.data.length * 2);
+ newData.set(this.data, 0);
+ this.data = newData;
+ }
+ }
+ }
+ ]);
+ return DataArray;
+ }();
+ var _default = _main.default.DataArray;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.math.log2': 194,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.float32-array': 234,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254
+ }
+ ],
+ 354: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.reflect.get');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _p = _dereq_('./p5.Texture');
+ var _p2 = _dereq_('./p5.RendererGL');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _slicedToArray(arr, i) {
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+ }
+ function _nonIterableRest() {
+ throw new TypeError('Invalid attempt to destructure non-iterable instance');
+ }
+ function _iterableToArrayLimit(arr, i) {
+ if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === '[object Arguments]')) {
+ return;
+ }
+ var _arr = [
+ ];
+ var _n = true;
+ var _d = false;
+ var _e = undefined;
+ try {
+ for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+ _arr.push(_s.value);
+ if (i && _arr.length === i) break;
+ }
+ } catch (err) {
+ _d = true;
+ _e = err;
+ } finally {
+ try {
+ if (!_n && _i['return'] != null) _i['return']();
+ } finally {
+ if (_d) throw _e;
+ }
+ }
+ return _arr;
+ }
+ function _arrayWithHoles(arr) {
+ if (Array.isArray(arr)) return arr;
+ }
+ function _defineProperty(obj, key, value) {
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+ return obj;
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _get(target, property, receiver) {
+ if (typeof Reflect !== 'undefined' && Reflect.get) {
+ _get = Reflect.get;
+ } else {
+ _get = function _get(target, property, receiver) {
+ var base = _superPropBase(target, property);
+ if (!base) return;
+ var desc = Object.getOwnPropertyDescriptor(base, property);
+ if (desc.get) {
+ return desc.get.call(receiver);
+ }
+ return desc.value;
+ };
+ }
+ return _get(target, property, receiver || target);
+ }
+ function _superPropBase(object, property) {
+ while (!Object.prototype.hasOwnProperty.call(object, property)) {
+ object = _getPrototypeOf(object);
+ if (object === null) break;
+ }
+ return object;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ } /**
+ * @module Rendering
+ * @requires constants
+ */
+
+ var FramebufferCamera = /*#__PURE__*/ function (_p5$Camera) {
+ _inherits(FramebufferCamera, _p5$Camera);
+ var _super = _createSuper(FramebufferCamera);
+ /**
+ * A p5.Camera attached to a
+ * p5.Framebuffer.
+ *
+ * @class p5.FramebufferCamera
+ * @constructor
+ * @param {p5.Framebuffer} framebuffer The framebuffer this camera is
+ * attached to
+ * @private
+ */
+ function FramebufferCamera(framebuffer) {
+ var _this;
+ _classCallCheck(this, FramebufferCamera);
+ _this = _super.call(this, framebuffer.target._renderer);
+ _this.fbo = framebuffer;
+ // WebGL textures are upside-down compared to textures that come from
+ // images and graphics. Framebuffer cameras need to invert their y
+ // axes when being rendered to so that the texture comes out rightway up
+ // when read in shaders or image().
+ _this.yScale = - 1;
+ return _this;
+ }
+ _createClass(FramebufferCamera, [
+ {
+ key: '_computeCameraDefaultSettings',
+ value: function _computeCameraDefaultSettings() {
+ _get(_getPrototypeOf(FramebufferCamera.prototype), '_computeCameraDefaultSettings', this).call(this);
+ this.defaultAspectRatio = this.fbo.width / this.fbo.height;
+ this.defaultCameraFOV = 2 * Math.atan(this.fbo.height / 2 / this.defaultEyeZ);
+ }
+ }
+ ]);
+ return FramebufferCamera;
+ }(_main.default.Camera);
+ _main.default.FramebufferCamera = FramebufferCamera;
+ var FramebufferTexture = /*#__PURE__*/ function () {
+ /**
+ * A p5.Texture corresponding to a property of a
+ * p5.Framebuffer.
+ *
+ * @class p5.FramebufferTexture
+ * @param {p5.Framebuffer} framebuffer The framebuffer represented by this
+ * texture
+ * @param {String} property The property of the framebuffer represented by
+ * this texture, either `color` or `depth`
+ * @private
+ */
+ function FramebufferTexture(framebuffer, property) {
+ _classCallCheck(this, FramebufferTexture);
+ this.framebuffer = framebuffer;
+ this.property = property;
+ }
+ _createClass(FramebufferTexture, [
+ {
+ key: 'rawTexture',
+ value: function rawTexture() {
+ return this.framebuffer[this.property];
+ }
+ },
+ {
+ key: 'width',
+ get: function get() {
+ return this.framebuffer.width * this.framebuffer.density;
+ }
+ },
+ {
+ key: 'height',
+ get: function get() {
+ return this.framebuffer.height * this.framebuffer.density;
+ }
+ }
+ ]);
+ return FramebufferTexture;
+ }();
+ _main.default.FramebufferTexture = FramebufferTexture;
+ var Framebuffer = /*#__PURE__*/ function () {
+ /**
+ * A class to describe a high-performance drawing surface for textures.
+ *
+ * Each `p5.Framebuffer` object provides a dedicated drawing surface called
+ * a *framebuffer*. They're similar to
+ * p5.Graphics objects but can run much faster.
+ * Performance is improved because the framebuffer shares the same WebGL
+ * context as the canvas used to create it.
+ *
+ * `p5.Framebuffer` objects have all the drawing features of the main
+ * canvas. Drawing instructions meant for the framebuffer must be placed
+ * between calls to
+ * myBuffer.begin() and
+ * myBuffer.end(). The resulting image
+ * can be applied as a texture by passing the `p5.Framebuffer` object to the
+ * texture() function, as in `texture(myBuffer)`.
+ * It can also be displayed on the main canvas by passing it to the
+ * image() function, as in `image(myBuffer, 0, 0)`.
+ *
+ * Note: createFramebuffer() is the
+ * recommended way to create an instance of this class.
+ *
+ * @class p5.Framebuffer
+ * @constructor
+ * @param {p5.Graphics|p5} target sketch instance or
+ * p5.Graphics
+ * object.
+ * @param {Object} [settings] configuration options.
+ */
+ function Framebuffer(target) {
+ var _this2 = this;
+ var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+ };
+ _classCallCheck(this, Framebuffer);
+ this.target = target;
+ this.target._renderer.framebuffers.add(this);
+ this._isClipApplied = false;
+ /**
+ * An array containing the color of each pixel in the framebuffer.
+ *
+ * myBuffer.loadPixels() must be
+ * called before accessing the `myBuffer.pixels` array.
+ * myBuffer.updatePixels()
+ * must be called after any changes are made.
+ *
+ * Note: Updating pixels via this property is slower than drawing to the
+ * framebuffer directly. Consider using a
+ * p5.Shader object instead of looping over
+ * `myBuffer.pixels`.
+ *
+ * @property {Number[]} pixels
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create a p5.Framebuffer object.
+ * let myBuffer = createFramebuffer();
+ *
+ * // Load the pixels array.
+ * myBuffer.loadPixels();
+ *
+ * // Get the number of pixels in the
+ * // top half of the framebuffer.
+ * let numPixels = myBuffer.pixels.length / 2;
+ *
+ * // Set the framebuffer's top half to pink.
+ * for (let i = 0; i < numPixels; i += 4) {
+ * myBuffer.pixels[i] = 255;
+ * myBuffer.pixels[i + 1] = 102;
+ * myBuffer.pixels[i + 2] = 204;
+ * myBuffer.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the pixels array.
+ * myBuffer.updatePixels();
+ *
+ * // Draw the p5.Framebuffer object to the canvas.
+ * image(myBuffer, -50, -50);
+ *
+ * describe('A pink rectangle above a gray rectangle.');
+ * }
+ *
+ *
+ */
+ this.pixels = [
+ ];
+ this.format = settings.format || constants.UNSIGNED_BYTE;
+ this.channels = settings.channels || (target._renderer._pInst._glAttributes.alpha ? constants.RGBA : constants.RGB);
+ this.useDepth = settings.depth === undefined ? true : settings.depth;
+ this.depthFormat = settings.depthFormat || constants.FLOAT;
+ this.textureFiltering = settings.textureFiltering || constants.LINEAR;
+ if (settings.antialias === undefined) {
+ this.antialiasSamples = target._renderer._pInst._glAttributes.antialias ? 2 : 0;
+ } else if (typeof settings.antialias === 'number') {
+ this.antialiasSamples = settings.antialias;
+ } else {
+ this.antialiasSamples = settings.antialias ? 2 : 0;
+ }
+ this.antialias = this.antialiasSamples > 0;
+ if (this.antialias && target.webglVersion !== constants.WEBGL2) {
+ console.warn('Antialiasing is unsupported in a WebGL 1 context');
+ this.antialias = false;
+ }
+ this.density = settings.density || target.pixelDensity();
+ var gl = target._renderer.GL;
+ this.gl = gl;
+ if (settings.width && settings.height) {
+ var dimensions = target._renderer._adjustDimensions(settings.width, settings.height);
+ this.width = dimensions.adjustedWidth;
+ this.height = dimensions.adjustedHeight;
+ this._autoSized = false;
+ } else {
+ if (settings.width === undefined !== (settings.height === undefined)) {
+ console.warn('Please supply both width and height for a framebuffer to give it a ' + 'size. Only one was given, so the framebuffer will match the size ' + 'of its canvas.');
+ }
+ this.width = target.width;
+ this.height = target.height;
+ this._autoSized = true;
+ }
+ this._checkIfFormatsAvailable();
+ if (settings.stencil && !this.useDepth) {
+ console.warn('A stencil buffer can only be used if also using depth. Since the framebuffer has no depth buffer, the stencil buffer will be ignored.');
+ }
+ this.useStencil = this.useDepth && (settings.stencil === undefined ? true : settings.stencil);
+ this.framebuffer = gl.createFramebuffer();
+ if (!this.framebuffer) {
+ throw new Error('Unable to create a framebuffer');
+ }
+ if (this.antialias) {
+ this.aaFramebuffer = gl.createFramebuffer();
+ if (!this.aaFramebuffer) {
+ throw new Error('Unable to create a framebuffer for antialiasing');
+ }
+ }
+ this._recreateTextures();
+ var prevCam = this.target._renderer._curCamera;
+ this.defaultCamera = this.createCamera();
+ this.filterCamera = this.createCamera();
+ this.target._renderer._curCamera = prevCam;
+ this.draw(function () {
+ return _this2.target.clear();
+ });
+ } /**
+ * Resizes the framebuffer to a given width and height.
+ *
+ * The parameters, `width` and `height`, set the dimensions of the
+ * framebuffer. For example, calling `myBuffer.resize(300, 500)` resizes
+ * the framebuffer to 300×500 pixels, then sets `myBuffer.width` to 300
+ * and `myBuffer.height` 500.
+ *
+ * @method resize
+ * @param {Number} width width of the framebuffer.
+ * @param {Number} height height of the framebuffer.
+ *
+ * @example
+ *
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * describe('A multicolor sphere on a white surface. The image grows larger or smaller when the user moves the mouse, revealing a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw to the p5.Framebuffer object.
+ * myBuffer.begin();
+ * background(255);
+ * normalMaterial();
+ * sphere(20);
+ * myBuffer.end();
+ *
+ * // Display the p5.Framebuffer object.
+ * image(myBuffer, -50, -50);
+ * }
+ *
+ * // Resize the p5.Framebuffer object when the
+ * // user moves the mouse.
+ * function mouseMoved() {
+ * myBuffer.resize(mouseX, mouseY);
+ * }
+ *
+ *
+ */
+
+ _createClass(Framebuffer, [
+ {
+ key: 'resize',
+ value: function resize(width, height) {
+ this._autoSized = false;
+ var dimensions = this.target._renderer._adjustDimensions(width, height);
+ width = dimensions.adjustedWidth;
+ height = dimensions.adjustedHeight;
+ this.width = width;
+ this.height = height;
+ this._handleResize();
+ } /**
+ * Sets the framebuffer's pixel density or returns its current density.
+ *
+ * Computer displays are grids of little lights called pixels. A display's
+ * pixel density describes how many pixels it packs into an area. Displays
+ * with smaller pixels have a higher pixel density and create sharper
+ * images.
+ *
+ * The parameter, `density`, is optional. If a number is passed, as in
+ * `myBuffer.pixelDensity(1)`, it sets the framebuffer's pixel density. By
+ * default, the framebuffer's pixel density will match that of the canvas
+ * where it was created. All canvases default to match the display's pixel
+ * density.
+ *
+ * Calling `myBuffer.pixelDensity()` without an argument returns its current
+ * pixel density.
+ *
+ * @method pixelDensity
+ * @param {Number} [density] pixel density to set.
+ * @returns {Number} current pixel density.
+ *
+ * @example
+ *
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * describe("A white circle on a gray canvas. The circle's edge become fuzzy while the user presses and holds the mouse.");
+ * }
+ *
+ * function draw() {
+ * // Draw to the p5.Framebuffer object.
+ * myBuffer.begin();
+ * background(200);
+ * circle(0, 0, 40);
+ * myBuffer.end();
+ *
+ * // Display the p5.Framebuffer object.
+ * image(myBuffer, -50, -50);
+ * }
+ *
+ * // Decrease the pixel density when the user
+ * // presses the mouse.
+ * function mousePressed() {
+ * myBuffer.pixelDensity(1);
+ * }
+ *
+ * // Increase the pixel density when the user
+ * // releases the mouse.
+ * function mouseReleased() {
+ * myBuffer.pixelDensity(2);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myBuffer;
+ * let myFont;
+ *
+ * // Load a font and create a p5.Font object.
+ * function preload() {
+ * myFont = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * // Get the p5.Framebuffer object's pixel density.
+ * let d = myBuffer.pixelDensity();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont(myFont);
+ * textSize(16);
+ * fill(0);
+ *
+ * // Display the pixel density.
+ * text(`Density: ${d}`, 0, 0);
+ *
+ * describe(`The text "Density: ${d}" written in black on a gray background.`);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'pixelDensity',
+ value: function pixelDensity(density) {
+ if (density) {
+ this._autoSized = false;
+ this.density = density;
+ this._handleResize();
+ } else {
+ return this.density;
+ }
+ } /**
+ * Toggles the framebuffer's autosizing mode or returns the current mode.
+ *
+ * By default, the framebuffer automatically resizes to match the canvas
+ * that created it. Calling `myBuffer.autoSized(false)` disables this
+ * behavior and calling `myBuffer.autoSized(true)` re-enables it.
+ *
+ * Calling `myBuffer.autoSized()` without an argument returns `true` if
+ * the framebuffer automatically resizes and `false` if not.
+ *
+ * @method autoSized
+ * @param {Boolean} [autoSized] whether to automatically resize the framebuffer to match the canvas.
+ * @returns {Boolean} current autosize setting.
+ *
+ * @example
+ *
+ *
+ * // Double-click to toggle the autosizing mode.
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * describe('A multicolor sphere on a gray background. The image resizes when the user moves the mouse.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Draw to the p5.Framebuffer object.
+ * myBuffer.begin();
+ * background(200);
+ * normalMaterial();
+ * sphere(width / 4);
+ * myBuffer.end();
+ *
+ * // Display the p5.Framebuffer object.
+ * image(myBuffer, -width / 2, -height / 2);
+ * }
+ *
+ * // Resize the canvas when the user moves the mouse.
+ * function mouseMoved() {
+ * let w = constrain(mouseX, 0, 100);
+ * let h = constrain(mouseY, 0, 100);
+ * resizeCanvas(w, h);
+ * }
+ *
+ * // Toggle autoSizing when the user double-clicks.
+ * // Note: opened an issue to fix(?) this.
+ * function doubleClicked() {
+ * let isAuto = myBuffer.autoSized();
+ * myBuffer.autoSized(!isAuto);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'autoSized',
+ value: function autoSized(_autoSized) {
+ if (_autoSized === undefined) {
+ return this._autoSized;
+ } else {
+ this._autoSized = _autoSized;
+ this._handleResize();
+ }
+ } /**
+ * Checks the capabilities of the current WebGL environment to see if the
+ * settings supplied by the user are capable of being fulfilled. If they
+ * are not, warnings will be logged and the settings will be changed to
+ * something close that can be fulfilled.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_checkIfFormatsAvailable',
+ value: function _checkIfFormatsAvailable() {
+ var gl = this.gl;
+ if (this.useDepth && this.target.webglVersion === constants.WEBGL && !gl.getExtension('WEBGL_depth_texture')) {
+ console.warn('Unable to create depth textures in this environment. Falling back ' + 'to a framebuffer without depth.');
+ this.useDepth = false;
+ }
+ if (this.useDepth && this.target.webglVersion === constants.WEBGL && this.depthFormat === constants.FLOAT) {
+ console.warn('FLOAT depth format is unavailable in WebGL 1. ' + 'Defaulting to UNSIGNED_INT.');
+ this.depthFormat = constants.UNSIGNED_INT;
+ }
+ if (![constants.UNSIGNED_BYTE,
+ constants.FLOAT,
+ constants.HALF_FLOAT].includes(this.format)) {
+ console.warn('Unknown Framebuffer format. ' + 'Please use UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. ' + 'Defaulting to UNSIGNED_BYTE.');
+ this.format = constants.UNSIGNED_BYTE;
+ }
+ if (this.useDepth && ![constants.UNSIGNED_INT,
+ constants.FLOAT].includes(this.depthFormat)) {
+ console.warn('Unknown Framebuffer depth format. ' + 'Please use UNSIGNED_INT or FLOAT. Defaulting to FLOAT.');
+ this.depthFormat = constants.FLOAT;
+ }
+ var support = (0, _p.checkWebGLCapabilities) (this.target._renderer);
+ if (!support.float && this.format === constants.FLOAT) {
+ console.warn('This environment does not support FLOAT textures. ' + 'Falling back to UNSIGNED_BYTE.');
+ this.format = constants.UNSIGNED_BYTE;
+ }
+ if (this.useDepth && !support.float && this.depthFormat === constants.FLOAT) {
+ console.warn('This environment does not support FLOAT depth textures. ' + 'Falling back to UNSIGNED_INT.');
+ this.depthFormat = constants.UNSIGNED_INT;
+ }
+ if (!support.halfFloat && this.format === constants.HALF_FLOAT) {
+ console.warn('This environment does not support HALF_FLOAT textures. ' + 'Falling back to UNSIGNED_BYTE.');
+ this.format = constants.UNSIGNED_BYTE;
+ }
+ if (this.channels === constants.RGB && [
+ constants.FLOAT,
+ constants.HALF_FLOAT
+ ].includes(this.format)) {
+ console.warn('FLOAT and HALF_FLOAT formats do not work cross-platform with only ' + 'RGB channels. Falling back to RGBA.');
+ this.channels = constants.RGBA;
+ }
+ } /**
+ * Creates new textures and renderbuffers given the current size of the
+ * framebuffer.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_recreateTextures',
+ value: function _recreateTextures() {
+ var gl = this.gl;
+ this._updateSize();
+ var prevBoundTexture = gl.getParameter(gl.TEXTURE_BINDING_2D);
+ var prevBoundFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+ var colorTexture = gl.createTexture();
+ if (!colorTexture) {
+ throw new Error('Unable to create color texture');
+ }
+ gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+ var colorFormat = this._glColorFormat();
+ gl.texImage2D(gl.TEXTURE_2D, 0, colorFormat.internalFormat, this.width * this.density, this.height * this.density, 0, colorFormat.format, colorFormat.type, null);
+ this.colorTexture = colorTexture;
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+ gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);
+ if (this.useDepth) {
+ // Create the depth texture
+ var depthTexture = gl.createTexture();
+ if (!depthTexture) {
+ throw new Error('Unable to create depth texture');
+ }
+ var depthFormat = this._glDepthFormat();
+ gl.bindTexture(gl.TEXTURE_2D, depthTexture);
+ gl.texImage2D(gl.TEXTURE_2D, 0, depthFormat.internalFormat, this.width * this.density, this.height * this.density, 0, depthFormat.format, depthFormat.type, null);
+ gl.framebufferTexture2D(gl.FRAMEBUFFER, this.useStencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
+ this.depthTexture = depthTexture;
+ } // Create separate framebuffer for antialiasing
+
+ if (this.antialias) {
+ this.colorRenderbuffer = gl.createRenderbuffer();
+ gl.bindRenderbuffer(gl.RENDERBUFFER, this.colorRenderbuffer);
+ gl.renderbufferStorageMultisample(gl.RENDERBUFFER, Math.max(0, Math.min(this.antialiasSamples, gl.getParameter(gl.MAX_SAMPLES))), colorFormat.internalFormat, this.width * this.density, this.height * this.density);
+ if (this.useDepth) {
+ var _depthFormat = this._glDepthFormat();
+ this.depthRenderbuffer = gl.createRenderbuffer();
+ gl.bindRenderbuffer(gl.RENDERBUFFER, this.depthRenderbuffer);
+ gl.renderbufferStorageMultisample(gl.RENDERBUFFER, Math.max(0, Math.min(this.antialiasSamples, gl.getParameter(gl.MAX_SAMPLES))), _depthFormat.internalFormat, this.width * this.density, this.height * this.density);
+ }
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer);
+ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, this.colorRenderbuffer);
+ if (this.useDepth) {
+ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, this.useStencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.depthRenderbuffer);
+ }
+ }
+ if (this.useDepth) {
+ this.depth = new FramebufferTexture(this, 'depthTexture');
+ var depthFilter = gl.NEAREST;
+ this.depthP5Texture = new _main.default.Texture(this.target._renderer, this.depth, {
+ minFilter: depthFilter,
+ magFilter: depthFilter
+ });
+ this.target._renderer.textures.set(this.depth, this.depthP5Texture);
+ }
+ this.color = new FramebufferTexture(this, 'colorTexture');
+ var filter = this.textureFiltering === constants.LINEAR ? gl.LINEAR : gl.NEAREST;
+ this.colorP5Texture = new _main.default.Texture(this.target._renderer, this.color, {
+ minFilter: filter,
+ magFilter: filter
+ });
+ this.target._renderer.textures.set(this.color, this.colorP5Texture);
+ gl.bindTexture(gl.TEXTURE_2D, prevBoundTexture);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevBoundFramebuffer);
+ } /**
+ * To create a WebGL texture, one needs to supply three pieces of information:
+ * the type (the data type each channel will be stored as, e.g. int or float),
+ * the format (the color channels that will each be stored in the previously
+ * specified type, e.g. rgb or rgba), and the internal format (the specifics
+ * of how data for each channel, in the aforementioned type, will be packed
+ * together, such as how many bits to use, e.g. RGBA32F or RGB565.)
+ *
+ * The format and channels asked for by the user hint at what these values
+ * need to be, and the WebGL version affects what options are avaiable.
+ * This method returns the values for these three properties, given the
+ * framebuffer's settings.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_glColorFormat',
+ value: function _glColorFormat() {
+ var type,
+ format,
+ internalFormat;
+ var gl = this.gl;
+ if (this.format === constants.FLOAT) {
+ type = gl.FLOAT;
+ } else if (this.format === constants.HALF_FLOAT) {
+ type = this.target.webglVersion === constants.WEBGL2 ? gl.HALF_FLOAT : gl.getExtension('OES_texture_half_float').HALF_FLOAT_OES;
+ } else {
+ type = gl.UNSIGNED_BYTE;
+ }
+ if (this.channels === constants.RGBA) {
+ format = gl.RGBA;
+ } else {
+ format = gl.RGB;
+ }
+ if (this.target.webglVersion === constants.WEBGL2) {
+ var _gl$UNSIGNED_BYTE,
+ _table;
+ // https://webgl2fundamentals.org/webgl/lessons/webgl-data-textures.html
+ var table = (_table = {
+ }, _defineProperty(_table, gl.FLOAT, _defineProperty({
+ }, gl.RGBA, gl.RGBA32F)), _defineProperty(_table, gl.HALF_FLOAT, _defineProperty({
+ }, gl.RGBA, gl.RGBA16F)), _defineProperty(_table, gl.UNSIGNED_BYTE, (_gl$UNSIGNED_BYTE = {
+ }, _defineProperty(_gl$UNSIGNED_BYTE, gl.RGBA, gl.RGBA8), _defineProperty(_gl$UNSIGNED_BYTE, gl.RGB, gl.RGB8), _gl$UNSIGNED_BYTE)), _table);
+ internalFormat = table[type][format];
+ } else if (this.format === constants.HALF_FLOAT) {
+ internalFormat = gl.RGBA;
+ } else {
+ internalFormat = format;
+ }
+ return {
+ internalFormat: internalFormat,
+ format: format,
+ type: type
+ };
+ } /**
+ * To create a WebGL texture, one needs to supply three pieces of information:
+ * the type (the data type each channel will be stored as, e.g. int or float),
+ * the format (the color channels that will each be stored in the previously
+ * specified type, e.g. rgb or rgba), and the internal format (the specifics
+ * of how data for each channel, in the aforementioned type, will be packed
+ * together, such as how many bits to use, e.g. RGBA32F or RGB565.)
+ *
+ * This method takes into account the settings asked for by the user and
+ * returns values for these three properties that can be used for the
+ * texture storing depth information.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_glDepthFormat',
+ value: function _glDepthFormat() {
+ var type,
+ format,
+ internalFormat;
+ var gl = this.gl;
+ if (this.useStencil) {
+ if (this.depthFormat === constants.FLOAT) {
+ type = gl.FLOAT_32_UNSIGNED_INT_24_8_REV;
+ } else if (this.target.webglVersion === constants.WEBGL2) {
+ type = gl.UNSIGNED_INT_24_8;
+ } else {
+ type = gl.getExtension('WEBGL_depth_texture').UNSIGNED_INT_24_8_WEBGL;
+ }
+ } else {
+ if (this.depthFormat === constants.FLOAT) {
+ type = gl.FLOAT;
+ } else {
+ type = gl.UNSIGNED_INT;
+ }
+ }
+ if (this.useStencil) {
+ format = gl.DEPTH_STENCIL;
+ } else {
+ format = gl.DEPTH_COMPONENT;
+ }
+ if (this.useStencil) {
+ if (this.depthFormat === constants.FLOAT) {
+ internalFormat = gl.DEPTH32F_STENCIL8;
+ } else if (this.target.webglVersion === constants.WEBGL2) {
+ internalFormat = gl.DEPTH24_STENCIL8;
+ } else {
+ internalFormat = gl.DEPTH_STENCIL;
+ }
+ } else if (this.target.webglVersion === constants.WEBGL2) {
+ if (this.depthFormat === constants.FLOAT) {
+ internalFormat = gl.DEPTH_COMPONENT32F;
+ } else {
+ internalFormat = gl.DEPTH_COMPONENT24;
+ }
+ } else {
+ internalFormat = gl.DEPTH_COMPONENT;
+ }
+ return {
+ internalFormat: internalFormat,
+ format: format,
+ type: type
+ };
+ } /**
+ * A method that will be called when recreating textures. If the framebuffer
+ * is auto-sized, it will update its width, height, and density properties.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_updateSize',
+ value: function _updateSize() {
+ if (this._autoSized) {
+ this.width = this.target.width;
+ this.height = this.target.height;
+ this.density = this.target.pixelDensity();
+ }
+ } /**
+ * Called when the canvas that the framebuffer is attached to resizes. If the
+ * framebuffer is auto-sized, it will update its textures to match the new
+ * size.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_canvasSizeChanged',
+ value: function _canvasSizeChanged() {
+ if (this._autoSized) {
+ this._handleResize();
+ }
+ } /**
+ * Called when the size of the framebuffer has changed (either by being
+ * manually updated or from auto-size updates when its canvas changes size.)
+ * Old textures and renderbuffers will be deleted, and then recreated with the
+ * new size.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_handleResize',
+ value: function _handleResize() {
+ var oldColor = this.color;
+ var oldDepth = this.depth;
+ var oldColorRenderbuffer = this.colorRenderbuffer;
+ var oldDepthRenderbuffer = this.depthRenderbuffer;
+ this._deleteTexture(oldColor);
+ if (oldDepth) this._deleteTexture(oldDepth);
+ var gl = this.gl;
+ if (oldColorRenderbuffer) gl.deleteRenderbuffer(oldColorRenderbuffer);
+ if (oldDepthRenderbuffer) gl.deleteRenderbuffer(oldDepthRenderbuffer);
+ this._recreateTextures();
+ this.defaultCamera._resize();
+ } /**
+ * Creates a new
+ * p5.Camera object to use with the framebuffer.
+ *
+ * The new camera is initialized with a default position `(0, 0, 800)` and a
+ * default perspective projection. Its properties can be controlled with
+ * p5.Camera methods such as `myCamera.lookAt(0, 0, 0)`.
+ *
+ * Framebuffer cameras should be created between calls to
+ * myBuffer.begin() and
+ * myBuffer.end() like so:
+ *
+ * ```js
+ * let myCamera;
+ *
+ * myBuffer.begin();
+ *
+ * // Create the camera for the framebuffer.
+ * myCamera = myBuffer.createCamera();
+ *
+ * myBuffer.end();
+ * ```
+ *
+ * Calling setCamera() updates the
+ * framebuffer's projection using the camera.
+ * resetMatrix() must also be called for the
+ * view to change properly:
+ *
+ * ```js
+ * myBuffer.begin();
+ *
+ * // Set the camera for the framebuffer.
+ * setCamera(myCamera);
+ *
+ * // Reset all transformations.
+ * resetMatrix();
+ *
+ * // Draw stuff...
+ *
+ * myBuffer.end();
+ * ```
+ *
+ * @method createCamera
+ * @returns {p5.Camera} new camera.
+ *
+ * @example
+ *
+ *
+ * // Double-click to toggle between cameras.
+ *
+ * let myBuffer;
+ * let cam1;
+ * let cam2;
+ * let usingCam1 = true;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * // Create the cameras between begin() and end().
+ * myBuffer.begin();
+ *
+ * // Create the first camera.
+ * // Keep its default settings.
+ * cam1 = myBuffer.createCamera();
+ *
+ * // Create the second camera.
+ * // Place it at the top-left.
+ * // Point it at the origin.
+ * cam2 = myBuffer.createCamera();
+ * cam2.setPosition(400, -400, 800);
+ * cam2.lookAt(0, 0, 0);
+ *
+ * myBuffer.end();
+ *
+ * describe(
+ * 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'
+ * );
+ * }
+ *
+ * function draw() {
+ * // Draw to the p5.Framebuffer object.
+ * myBuffer.begin();
+ * background(200);
+ *
+ * // Set the camera.
+ * if (usingCam1 === true) {
+ * setCamera(cam1);
+ * } else {
+ * setCamera(cam2);
+ * }
+ *
+ * // Reset all transformations.
+ * resetMatrix();
+ *
+ * // Draw the box.
+ * box();
+ *
+ * myBuffer.end();
+ *
+ * // Display the p5.Framebuffer object.
+ * image(myBuffer, -50, -50);
+ * }
+ *
+ * // Toggle the current camera when the user double-clicks.
+ * function doubleClicked() {
+ * if (usingCam1 === true) {
+ * usingCam1 = false;
+ * } else {
+ * usingCam1 = true;
+ * }
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'createCamera',
+ value: function createCamera() {
+ var cam = new FramebufferCamera(this);
+ cam._computeCameraDefaultSettings();
+ cam._setDefaultCamera();
+ this.target._renderer._curCamera = cam;
+ return cam;
+ } /**
+ * Given a raw texture wrapper, delete its stored texture from WebGL memory,
+ * and remove it from p5's list of active textures.
+ *
+ * @param {p5.FramebufferTexture} texture
+ * @private
+ */
+
+ },
+ {
+ key: '_deleteTexture',
+ value: function _deleteTexture(texture) {
+ var gl = this.gl;
+ gl.deleteTexture(texture.rawTexture());
+ this.target._renderer.textures.delete(texture);
+ } /**
+ * Deletes the framebuffer from GPU memory.
+ *
+ * Calling `myBuffer.remove()` frees the GPU memory used by the framebuffer.
+ * The framebuffer also uses a bit of memory on the CPU which can be freed
+ * like so:
+ *
+ * ```js
+ * // Delete the framebuffer from GPU memory.
+ * myBuffer.remove();
+ *
+ * // Delete the framebuffer from CPU memory.
+ * myBuffer = undefined;
+ * ```
+ *
+ * Note: All variables that reference the framebuffer must be assigned
+ * the value `undefined` to delete the framebuffer from CPU memory. If any
+ * variable still refers to the framebuffer, then it won't be garbage
+ * collected.
+ *
+ * @method remove
+ *
+ * @example
+ *
+ *
+ * // Double-click to remove the p5.Framebuffer object.
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create an options object.
+ * let options = { width: 60, height: 60 };
+ *
+ * // Create a p5.Framebuffer object and
+ * // configure it using options.
+ * myBuffer = createFramebuffer(options);
+ *
+ * describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Display the p5.Framebuffer object if
+ * // it's available.
+ * if (myBuffer) {
+ * // Draw to the p5.Framebuffer object.
+ * myBuffer.begin();
+ * background(100);
+ * circle(0, 0, 20);
+ * myBuffer.end();
+ *
+ * image(myBuffer, -30, -30);
+ * }
+ * }
+ *
+ * // Remove the p5.Framebuffer object when the
+ * // the user double-clicks.
+ * function doubleClicked() {
+ * // Delete the framebuffer from GPU memory.
+ * myBuffer.remove();
+ *
+ * // Delete the framebuffer from CPU memory.
+ * myBuffer = undefined;
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'remove',
+ value: function remove() {
+ var gl = this.gl;
+ this._deleteTexture(this.color);
+ if (this.depth) this._deleteTexture(this.depth);
+ gl.deleteFramebuffer(this.framebuffer);
+ if (this.aaFramebuffer) {
+ gl.deleteFramebuffer(this.aaFramebuffer);
+ }
+ if (this.depthRenderbuffer) {
+ gl.deleteRenderbuffer(this.depthRenderbuffer);
+ }
+ if (this.colorRenderbuffer) {
+ gl.deleteRenderbuffer(this.colorRenderbuffer);
+ }
+ this.target._renderer.framebuffers.delete(this);
+ } /**
+ * Begins drawing shapes to the framebuffer.
+ *
+ * `myBuffer.begin()` and myBuffer.end()
+ * allow shapes to be drawn to the framebuffer. `myBuffer.begin()` begins
+ * drawing to the framebuffer and
+ * myBuffer.end() stops drawing to the
+ * framebuffer. Changes won't be visible until the framebuffer is displayed
+ * as an image or texture.
+ *
+ * @method begin
+ *
+ * @example
+ *
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Start drawing to the p5.Framebuffer object.
+ * myBuffer.begin();
+ *
+ * background(50);
+ * rotateY(frameCount * 0.01);
+ * normalMaterial();
+ * torus(30);
+ *
+ * // Stop drawing to the p5.Framebuffer object.
+ * myBuffer.end();
+ *
+ * // Display the p5.Framebuffer object while
+ * // the user presses the mouse.
+ * if (mouseIsPressed === true) {
+ * image(myBuffer, -50, -50);
+ * }
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'begin',
+ value: function begin() {
+ this.prevFramebuffer = this.target._renderer.activeFramebuffer();
+ if (this.prevFramebuffer) {
+ this.prevFramebuffer._beforeEnd();
+ }
+ this.target._renderer.activeFramebuffers.push(this);
+ this._beforeBegin();
+ this.target.push();
+ // Apply the framebuffer's camera. This does almost what
+ // RendererGL.reset() does, but this does not try to clear any buffers;
+ // it only sets the camera.
+ this.target.setCamera(this.defaultCamera);
+ this.target._renderer.uMVMatrix.set(this.target._renderer._curCamera.cameraMatrix);
+ this.target._renderer._applyStencilTestIfClipping();
+ } /**
+ * When making a p5.Framebuffer active so that it may be drawn to, this method
+ * returns the underlying WebGL framebuffer that needs to be active to
+ * support this. Antialiased framebuffers first write to a multisampled
+ * renderbuffer, while other framebuffers can write directly to their main
+ * framebuffers.
+ *
+ * @method _framebufferToBind
+ * @private
+ */
+
+ },
+ {
+ key: '_framebufferToBind',
+ value: function _framebufferToBind() {
+ if (this.antialias) {
+ // If antialiasing, draw to an antialiased renderbuffer rather
+ // than directly to the texture. In end() we will copy from the
+ // renderbuffer to the texture.
+ return this.aaFramebuffer;
+ } else {
+ return this.framebuffer;
+ }
+ } /**
+ * Ensures that the framebuffer is ready to be drawn to
+ *
+ * @method _beforeBegin
+ * @private
+ */
+
+ },
+ {
+ key: '_beforeBegin',
+ value: function _beforeBegin() {
+ var gl = this.gl;
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebufferToBind());
+ this.target._renderer.viewport(this.width * this.density, this.height * this.density);
+ } /**
+ * Ensures that the framebuffer is ready to be read by other framebuffers.
+ *
+ * @method _beforeEnd
+ * @private
+ */
+
+ },
+ {
+ key: '_beforeEnd',
+ value: function _beforeEnd() {
+ if (this.antialias) {
+ var gl = this.gl;
+ gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.aaFramebuffer);
+ gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
+ var partsToCopy = [
+ [gl.COLOR_BUFFER_BIT,
+ this.colorP5Texture.glMagFilter]
+ ];
+ if (this.useDepth) {
+ partsToCopy.push([gl.DEPTH_BUFFER_BIT,
+ this.depthP5Texture.glMagFilter]);
+ }
+ for (var _i = 0, _partsToCopy = partsToCopy; _i < _partsToCopy.length; _i++) {
+ var _partsToCopy$_i = _slicedToArray(_partsToCopy[_i], 2),
+ flag = _partsToCopy$_i[0],
+ filter = _partsToCopy$_i[1];
+ gl.blitFramebuffer(0, 0, this.width * this.density, this.height * this.density, 0, 0, this.width * this.density, this.height * this.density, flag, filter);
+ }
+ }
+ } /**
+ * Stops drawing shapes to the framebuffer.
+ *
+ * myBuffer.begin() and `myBuffer.end()`
+ * allow shapes to be drawn to the framebuffer.
+ * myBuffer.begin() begins drawing to
+ * the framebuffer and `myBuffer.end()` stops drawing to the framebuffer.
+ * Changes won't be visible until the framebuffer is displayed as an image
+ * or texture.
+ *
+ * @method end
+ *
+ * @example
+ *
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Start drawing to the p5.Framebuffer object.
+ * myBuffer.begin();
+ *
+ * background(50);
+ * rotateY(frameCount * 0.01);
+ * normalMaterial();
+ * torus(30);
+ *
+ * // Stop drawing to the p5.Framebuffer object.
+ * myBuffer.end();
+ *
+ * // Display the p5.Framebuffer object while
+ * // the user presses the mouse.
+ * if (mouseIsPressed === true) {
+ * image(myBuffer, -50, -50);
+ * }
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'end',
+ value: function end() {
+ var gl = this.gl;
+ this.target.pop();
+ var fbo = this.target._renderer.activeFramebuffers.pop();
+ if (fbo !== this) {
+ throw new Error('It looks like you\'ve called end() while another Framebuffer is active.');
+ }
+ this._beforeEnd();
+ if (this.prevFramebuffer) {
+ this.prevFramebuffer._beforeBegin();
+ } else {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+ this.target._renderer.viewport(this.target._renderer._origViewport.width, this.target._renderer._origViewport.height);
+ }
+ this.target._renderer._applyStencilTestIfClipping();
+ } /**
+ * Draws to the framebuffer by calling a function that contains drawing
+ * instructions.
+ *
+ * The parameter, `callback`, is a function with the drawing instructions
+ * for the framebuffer. For example, calling `myBuffer.draw(myFunction)`
+ * will call a function named `myFunction()` to draw to the framebuffer.
+ * Doing so has the same effect as the following:
+ *
+ * ```js
+ * myBuffer.begin();
+ * myFunction();
+ * myBuffer.end();
+ * ```
+ *
+ * @method draw
+ * @param {Function} callback function that draws to the framebuffer.
+ *
+ * @example
+ *
+ *
+ * // Click the canvas to display the framebuffer.
+ *
+ * let myBuffer;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw to the p5.Framebuffer object.
+ * myBuffer.draw(bagel);
+ *
+ * // Display the p5.Framebuffer object while
+ * // the user presses the mouse.
+ * if (mouseIsPressed === true) {
+ * image(myBuffer, -50, -50);
+ * }
+ * }
+ *
+ * // Draw a rotating, multicolor torus.
+ * function bagel() {
+ * background(50);
+ * rotateY(frameCount * 0.01);
+ * normalMaterial();
+ * torus(30);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'draw',
+ value: function draw(callback) {
+ this.begin();
+ callback();
+ this.end();
+ } /**
+ * Loads the current value of each pixel in the framebuffer into its
+ * pixels array.
+ *
+ * `myBuffer.loadPixels()` must be called before reading from or writing to
+ * myBuffer.pixels.
+ *
+ * @method loadPixels
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create a p5.Framebuffer object.
+ * let myBuffer = createFramebuffer();
+ *
+ * // Load the pixels array.
+ * myBuffer.loadPixels();
+ *
+ * // Get the number of pixels in the
+ * // top half of the framebuffer.
+ * let numPixels = myBuffer.pixels.length / 2;
+ *
+ * // Set the framebuffer's top half to pink.
+ * for (let i = 0; i < numPixels; i += 4) {
+ * myBuffer.pixels[i] = 255;
+ * myBuffer.pixels[i + 1] = 102;
+ * myBuffer.pixels[i + 2] = 204;
+ * myBuffer.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the pixels array.
+ * myBuffer.updatePixels();
+ *
+ * // Draw the p5.Framebuffer object to the canvas.
+ * image(myBuffer, -50, -50);
+ *
+ * describe('A pink rectangle above a gray rectangle.');
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'loadPixels',
+ value: function loadPixels() {
+ var gl = this.gl;
+ var prevFramebuffer = this.target._renderer.activeFramebuffer();
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+ var colorFormat = this._glColorFormat();
+ this.pixels = (0, _p2.readPixelsWebGL) (this.pixels, gl, this.framebuffer, 0, 0, this.width * this.density, this.height * this.density, colorFormat.format, colorFormat.type);
+ if (prevFramebuffer) {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer._framebufferToBind());
+ } else {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+ }
+ } /**
+ * Gets a pixel or a region of pixels from the framebuffer.
+ *
+ * `myBuffer.get()` is easy to use but it's not as fast as
+ * myBuffer.pixels. Use
+ * myBuffer.pixels to read many pixel
+ * values.
+ *
+ * The version of `myBuffer.get()` with no parameters returns the entire
+ * framebuffer as a a p5.Image object.
+ *
+ * The version of `myBuffer.get()` with two parameters interprets them as
+ * coordinates. It returns an array with the `[R, G, B, A]` values of the
+ * pixel at the given point.
+ *
+ * The version of `myBuffer.get()` with four parameters interprets them as
+ * coordinates and dimensions. It returns a subsection of the framebuffer as
+ * a p5.Image object. The first two parameters are
+ * the coordinates for the upper-left corner of the subsection. The last two
+ * parameters are the width and height of the subsection.
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel. Defaults to 0.
+ * @param {Number} y y-coordinate of the pixel. Defaults to 0.
+ * @param {Number} w width of the subsection to be returned.
+ * @param {Number} h height of the subsection to be returned.
+ * @return {p5.Image} subsection as a p5.Image object.
+ */
+ /**
+ * @method get
+ * @return {p5.Image} entire framebuffer as a p5.Image object.
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of the pixel at `(x, y)` as an array of color values `[R, G, B, A]`.
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(x, y, w, h) {
+ _main.default._validateParameters('p5.Framebuffer.get', arguments);
+ var colorFormat = this._glColorFormat();
+ if (x === undefined && y === undefined) {
+ x = 0;
+ y = 0;
+ w = this.width;
+ h = this.height;
+ } else if (w === undefined && h === undefined) {
+ if (x < 0 || y < 0 || x >= this.width || y >= this.height) {
+ console.warn('The x and y values passed to p5.Framebuffer.get are outside of its range and will be clamped.');
+ x = this.target.constrain(x, 0, this.width - 1);
+ y = this.target.constrain(y, 0, this.height - 1);
+ }
+ return (0, _p2.readPixelWebGL) (this.gl, this.framebuffer, x * this.density, y * this.density, colorFormat.format, colorFormat.type);
+ }
+ x = this.target.constrain(x, 0, this.width - 1);
+ y = this.target.constrain(y, 0, this.height - 1);
+ w = this.target.constrain(w, 1, this.width - x);
+ h = this.target.constrain(h, 1, this.height - y);
+ var rawData = (0, _p2.readPixelsWebGL) (undefined, this.gl, this.framebuffer, x * this.density, y * this.density, w * this.density, h * this.density, colorFormat.format, colorFormat.type);
+ // Framebuffer data might be either a Uint8Array or Float32Array
+ // depending on its format, and it may or may not have an alpha channel.
+ // To turn it into an image, we have to normalize the data into a
+ // Uint8ClampedArray with alpha.
+ var fullData = new Uint8ClampedArray(w * h * this.density * this.density * 4);
+ // Default channels that aren't in the framebuffer (e.g. alpha, if the
+ // framebuffer is in RGB mode instead of RGBA) to 255
+ fullData.fill(255);
+ var channels = colorFormat.type === this.gl.RGB ? 3 : 4;
+ for (var _y = 0; _y < h * this.density; _y++) {
+ for (var _x = 0; _x < w * this.density; _x++) {
+ for (var channel = 0; channel < 4; channel++) {
+ var idx = (_y * w * this.density + _x) * 4 + channel;
+ if (channel < channels) {
+ // Find the index of this pixel in `rawData`, which might have a
+ // different number of channels
+ var rawDataIdx = channels === 4 ? idx : (_y * w * this.density + _x) * channels + channel;
+ fullData[idx] = rawData[rawDataIdx];
+ }
+ }
+ }
+ } // Create an image from the data
+
+ var region = new _main.default.Image(w * this.density, h * this.density);
+ region.imageData = region.canvas.getContext('2d').createImageData(region.width, region.height);
+ region.imageData.data.set(fullData);
+ region.pixels = region.imageData.data;
+ region.updatePixels();
+ if (this.density !== 1) {
+ // TODO: support get() at a pixel density > 1
+ region.resize(w, h);
+ }
+ return region;
+ } /**
+ * Updates the framebuffer with the RGBA values in the
+ * pixels array.
+ *
+ * `myBuffer.updatePixels()` only needs to be called after changing values
+ * in the myBuffer.pixels array. Such
+ * changes can be made directly after calling
+ * myBuffer.loadPixels().
+ *
+ * @method updatePixels
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create a p5.Framebuffer object.
+ * let myBuffer = createFramebuffer();
+ *
+ * // Load the pixels array.
+ * myBuffer.loadPixels();
+ *
+ * // Get the number of pixels in the
+ * // top half of the framebuffer.
+ * let numPixels = myBuffer.pixels.length / 2;
+ *
+ * // Set the framebuffer's top half to pink.
+ * for (let i = 0; i < numPixels; i += 4) {
+ * myBuffer.pixels[i] = 255;
+ * myBuffer.pixels[i + 1] = 102;
+ * myBuffer.pixels[i + 2] = 204;
+ * myBuffer.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the pixels array.
+ * myBuffer.updatePixels();
+ *
+ * // Draw the p5.Framebuffer object to the canvas.
+ * image(myBuffer, -50, -50);
+ *
+ * describe('A pink rectangle above a gray rectangle.');
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'updatePixels',
+ value: function updatePixels() {
+ var gl = this.gl;
+ this.colorP5Texture.bindTexture();
+ var colorFormat = this._glColorFormat();
+ var channels = colorFormat.format === gl.RGBA ? 4 : 3;
+ var len = this.width * this.height * this.density * this.density * channels;
+ var TypedArrayClass = colorFormat.type === gl.UNSIGNED_BYTE ? Uint8Array : Float32Array;
+ if (!(this.pixels instanceof TypedArrayClass) || this.pixels.length !== len) {
+ throw new Error('The pixels array has not been set correctly. Please call loadPixels() before updatePixels().');
+ }
+ gl.texImage2D(gl.TEXTURE_2D, 0, colorFormat.internalFormat, this.width * this.density, this.height * this.density, 0, colorFormat.format, colorFormat.type, this.pixels);
+ this.colorP5Texture.unbindTexture();
+ var prevFramebuffer = this.target._renderer.activeFramebuffer();
+ if (this.antialias) {
+ // We need to make sure the antialiased framebuffer also has the updated
+ // pixels so that if more is drawn to it, it goes on top of the updated
+ // pixels instead of replacing them.
+ // We can't blit the framebuffer to the multisampled antialias
+ // framebuffer to leave both in the same state, so instead we have
+ // to use image() to put the framebuffer texture onto the antialiased
+ // framebuffer.
+ this.begin();
+ this.target.push();
+ this.target.imageMode(this.target.CENTER);
+ this.target.resetMatrix();
+ this.target.noStroke();
+ this.target.clear();
+ this.target.image(this, 0, 0);
+ this.target.pop();
+ if (this.useDepth) {
+ gl.clearDepth(1);
+ gl.clear(gl.DEPTH_BUFFER_BIT);
+ }
+ this.end();
+ } else {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+ if (this.useDepth) {
+ gl.clearDepth(1);
+ gl.clear(gl.DEPTH_BUFFER_BIT);
+ }
+ if (prevFramebuffer) {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer._framebufferToBind());
+ } else {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+ }
+ }
+ }
+ }
+ ]);
+ return Framebuffer;
+ }();
+ /**
+ * An object that stores the framebuffer's color data.
+ *
+ * Each framebuffer uses a
+ * WebGLTexture
+ * object internally to store its color data. The `myBuffer.color` property
+ * makes it possible to pass this data directly to other functions. For
+ * example, calling `texture(myBuffer.color)` or
+ * `myShader.setUniform('colorTexture', myBuffer.color)` may be helpful for
+ * advanced use cases.
+ *
+ * Note: By default, a framebuffer's y-coordinates are flipped compared to
+ * images and videos. It's easy to flip a framebuffer's y-coordinates as
+ * needed when applying it as a texture. For example, calling
+ * `plane(myBuffer.width, -myBuffer.height)` will flip the framebuffer.
+ *
+ * @property {p5.FramebufferTexture} color
+ * @for p5.Framebuffer
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create a p5.Framebuffer object.
+ * let myBuffer = createFramebuffer();
+ *
+ * // Start drawing to the p5.Framebuffer object.
+ * myBuffer.begin();
+ *
+ * triangle(-25, 25, 0, -25, 25, 25);
+ *
+ * // Stop drawing to the p5.Framebuffer object.
+ * myBuffer.end();
+ *
+ * // Use the p5.Framebuffer object's WebGLTexture.
+ * texture(myBuffer.color);
+ *
+ * // Style the plane.
+ * noStroke();
+ *
+ * // Draw the plane.
+ * plane(myBuffer.width, myBuffer.height);
+ *
+ * describe('A white triangle on a gray background.');
+ * }
+ *
+ *
+ */
+ /**
+ * An object that stores the framebuffer's dpeth data.
+ *
+ * Each framebuffer uses a
+ * WebGLTexture
+ * object internally to store its depth data. The `myBuffer.depth` property
+ * makes it possible to pass this data directly to other functions. For
+ * example, calling `texture(myBuffer.depth)` or
+ * `myShader.setUniform('depthTexture', myBuffer.depth)` may be helpful for
+ * advanced use cases.
+ *
+ * Note: By default, a framebuffer's y-coordinates are flipped compared to
+ * images and videos. It's easy to flip a framebuffer's y-coordinates as
+ * needed when applying it as a texture. For example, calling
+ * `plane(myBuffer.width, -myBuffer.height)` will flip the framebuffer.
+ *
+ * @property {p5.FramebufferTexture} depth
+ * @for p5.Framebuffer
+ *
+ * @example
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * viewModelPosition;
+ * vTexCoord = aTexCoord;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ * varying vec2 vTexCoord;
+ * uniform sampler2D depth;
+ *
+ * void main() {
+ * // Get the pixel's depth value.
+ * float depthVal = texture2D(depth, vTexCoord).r;
+ *
+ * // Set the pixel's color based on its depth.
+ * gl_FragColor = mix(
+ * vec4(0., 0., 0., 1.),
+ * vec4(1., 0., 1., 1.),
+ * depthVal);
+ * }
+ * `;
+ *
+ * let myBuffer;
+ * let myShader;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Framebuffer object.
+ * myBuffer = createFramebuffer();
+ *
+ * // Create a p5.Shader object.
+ * myShader = createShader(vertSrc, fragSrc);
+ *
+ * // Compile and apply the shader.
+ * shader(myShader);
+ *
+ * describe('The shadow of a box rotates slowly against a magenta background.');
+ * }
+ *
+ * function draw() {
+ * // Draw to the p5.Framebuffer object.
+ * myBuffer.begin();
+ * background(255);
+ * rotateX(frameCount * 0.01);
+ * box(20, 20, 80);
+ * myBuffer.end();
+ *
+ * // Set the shader's depth uniform using
+ * // the framebuffer's depth texture.
+ * myShader.setUniform('depth', myBuffer.depth);
+ *
+ * // Style the plane.
+ * noStroke();
+ *
+ * // Draw the plane.
+ * plane(myBuffer.width, myBuffer.height);
+ * }
+ *
+ *
+ */
+ _main.default.Framebuffer = Framebuffer;
+ var _default = Framebuffer;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ './p5.RendererGL': 360,
+ './p5.Texture': 362,
+ 'core-js/modules/es.array.fill': 173,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.reflect.get': 208,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.float32-array': 234,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint8-array': 257,
+ 'core-js/modules/es.typed-array.uint8-clamped-array': 258,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 355: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.flat');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.unscopables.flat');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.flat');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.unscopables.flat');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Shape
+ * @submodule 3D Primitives
+ * @for p5
+ * @requires core
+ * @requires p5.Geometry
+ */
+ //some of the functions are adjusted from Three.js(http://threejs.org)
+ /**
+ * A class to describe a 3D shape.
+ *
+ * Each `p5.Geometry` object represents a 3D shape as a set of connected
+ * points called *vertices*. All 3D shapes are made by connecting vertices to
+ * form triangles that are stitched together. Each triangular patch on the
+ * geometry's surface is called a *face*. The geometry stores information
+ * about its vertices and faces for use with effects such as lighting and
+ * texture mapping.
+ *
+ * The first parameter, `detailX`, is optional. If a number is passed, as in
+ * `new p5.Geometry(24)`, it sets the number of triangle subdivisions to use
+ * along the geometry's x-axis. By default, `detailX` is 1.
+ *
+ * The second parameter, `detailY`, is also optional. If a number is passed,
+ * as in `new p5.Geometry(24, 16)`, it sets the number of triangle
+ * subdivisions to use along the geometry's y-axis. By default, `detailX` is
+ * 1.
+ *
+ * The third parameter, `callback`, is also optional. If a function is passed,
+ * as in `new p5.Geometry(24, 16, createShape)`, it will be called once to add
+ * vertices to the new 3D shape.
+ *
+ * @class p5.Geometry
+ * @constructor
+ * @param {Integer} [detailX] number of vertices along the x-axis.
+ * @param {Integer} [detailY] number of vertices along the y-axis.
+ * @param {function} [callback] function to call once the geometry is created.
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * myGeometry = new p5.Geometry();
+ *
+ * // Create p5.Vector objects to position the vertices.
+ * let v0 = createVector(-40, 0, 0);
+ * let v1 = createVector(0, -40, 0);
+ * let v2 = createVector(40, 0, 0);
+ *
+ * // Add the vertices to the p5.Geometry object's vertices array.
+ * myGeometry.vertices.push(v0, v1, v2);
+ *
+ * describe('A white triangle drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object using a callback function.
+ * myGeometry = new p5.Geometry(1, 1, createShape);
+ *
+ * describe('A white triangle drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ * function createShape() {
+ * // Create p5.Vector objects to position the vertices.
+ * let v0 = createVector(-40, 0, 0);
+ * let v1 = createVector(0, -40, 0);
+ * let v2 = createVector(40, 0, 0);
+ *
+ * // "this" refers to the p5.Geometry object being created.
+ *
+ * // Add the vertices to the p5.Geometry object's vertices array.
+ * this.vertices.push(v0, v1, v2);
+ *
+ * // Add an array to list which vertices belong to the face.
+ * // Vertices are listed in clockwise "winding" order from
+ * // left to top to right.
+ * this.faces.push([0, 1, 2]);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object using a callback function.
+ * myGeometry = new p5.Geometry(1, 1, createShape);
+ *
+ * describe('A white triangle drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ * function createShape() {
+ * // Create p5.Vector objects to position the vertices.
+ * let v0 = createVector(-40, 0, 0);
+ * let v1 = createVector(0, -40, 0);
+ * let v2 = createVector(40, 0, 0);
+ *
+ * // "this" refers to the p5.Geometry object being created.
+ *
+ * // Add the vertices to the p5.Geometry object's vertices array.
+ * this.vertices.push(v0, v1, v2);
+ *
+ * // Add an array to list which vertices belong to the face.
+ * // Vertices are listed in clockwise "winding" order from
+ * // left to top to right.
+ * this.faces.push([0, 1, 2]);
+ *
+ * // Compute the surface normals to help with lighting.
+ * this.computeNormals();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * // Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.
+ * // https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/
+ * // CC-BY-SA 4.0
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create the p5.Geometry object.
+ * // Set detailX to 48 and detailY to 2.
+ * // >>> try changing them.
+ * myGeometry = new p5.Geometry(48, 2, createShape);
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the p5.Geometry object.
+ * strokeWeight(0.2);
+ *
+ * // Draw the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ * function createShape() {
+ * // "this" refers to the p5.Geometry object being created.
+ *
+ * // Define the Möbius strip with a few parameters.
+ * let spread = 0.1;
+ * let radius = 30;
+ * let stripWidth = 15;
+ * let xInterval = 4 * PI / this.detailX;
+ * let yOffset = -stripWidth / 2;
+ * let yInterval = stripWidth / this.detailY;
+ *
+ * for (let j = 0; j <= this.detailY; j += 1) {
+ * // Calculate the "vertical" point along the strip.
+ * let v = yOffset + yInterval * j;
+ *
+ * for (let i = 0; i <= this.detailX; i += 1) {
+ * // Calculate the angle of rotation around the strip.
+ * let u = i * xInterval;
+ *
+ * // Calculate the coordinates of the vertex.
+ * let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread;
+ * let y = (radius + v * cos(u / 2)) * sin(u);
+ * if (u < TWO_PI) {
+ * y += sin(u) * spread;
+ * } else {
+ * y -= sin(u) * spread;
+ * }
+ * let z = v * sin(u / 2) + sin(u / 4) * 4 * spread;
+ *
+ * // Create a p5.Vector object to position the vertex.
+ * let vert = createVector(x, y, z);
+ *
+ * // Add the vertex to the p5.Geometry object's vertices array.
+ * this.vertices.push(vert);
+ * }
+ * }
+ *
+ * // Compute the faces array.
+ * this.computeFaces();
+ *
+ * // Compute the surface normals to help with lighting.
+ * this.computeNormals();
+ * }
+ *
+ *
+ */
+
+ _main.default.Geometry = /*#__PURE__*/ function () {
+ function Geometry(detailX, detailY, callback) {
+ _classCallCheck(this, Geometry);
+ /**
+ * An array with the geometry's vertices.
+ *
+ * The geometry's vertices are stored as
+ * p5.Vector objects in the `myGeometry.vertices`
+ * array. The geometry's first vertex is the
+ * p5.Vector object at `myGeometry.vertices[0]`,
+ * its second vertex is `myGeometry.vertices[1]`, its third vertex is
+ * `myGeometry.vertices[2]`, and so on.
+ *
+ * @property vertices
+ * @name vertices
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * myGeometry = new p5.Geometry();
+ *
+ * // Create p5.Vector objects to position the vertices.
+ * let v0 = createVector(-40, 0, 0);
+ * let v1 = createVector(0, -40, 0);
+ * let v2 = createVector(40, 0, 0);
+ *
+ * // Add the vertices to the p5.Geometry object's vertices array.
+ * myGeometry.vertices.push(v0, v1, v2);
+ *
+ * describe('A white triangle drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Draw the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * beginGeometry();
+ * torus(30, 15, 10, 8);
+ * myGeometry = endGeometry();
+ *
+ * describe('A white torus rotates slowly against a dark gray background. Red spheres mark its vertices.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate the coordinate system.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Style the p5.Geometry object.
+ * fill(255);
+ * stroke(0);
+ *
+ * // Display the p5.Geometry object.
+ * model(myGeometry);
+ *
+ * // Style the vertices.
+ * fill(255, 0, 0);
+ * noStroke();
+ *
+ * // Iterate over the vertices array.
+ * for (let v of myGeometry.vertices) {
+ * // Draw a sphere to mark the vertex.
+ * push();
+ * translate(v);
+ * sphere(2.5);
+ * pop();
+ * }
+ * }
+ *
+ *
+ */
+ this.vertices = [
+ ];
+ this.boundingBoxCache = null;
+ //an array containing every vertex for stroke drawing
+ this.lineVertices = new _main.default.DataArray();
+ // The tangents going into or out of a vertex on a line. Along a straight
+ // line segment, both should be equal. At an endpoint, one or the other
+ // will not exist and will be all 0. In joins between line segments, they
+ // may be different, as they will be the tangents on either side of the join.
+ this.lineTangentsIn = new _main.default.DataArray();
+ this.lineTangentsOut = new _main.default.DataArray();
+ // When drawing lines with thickness, entries in this buffer represent which
+ // side of the centerline the vertex will be placed. The sign of the number
+ // will represent the side of the centerline, and the absolute value will be
+ // used as an enum to determine which part of the cap or join each vertex
+ // represents. See the doc comments for _addCap and _addJoin for diagrams.
+ this.lineSides = new _main.default.DataArray();
+ /**
+ * An array with the vectors that are normal to the geometry's vertices.
+ *
+ * A face's orientation is defined by its *normal vector* which points out
+ * of the face and is normal (perpendicular) to the surface. Calling
+ * `myGeometry.computeNormals()` first calculates each face's normal
+ * vector. Then it calculates the normal vector for each vertex by
+ * averaging the normal vectors of the faces surrounding the vertex. The
+ * vertex normals are stored as p5.Vector
+ * objects in the `myGeometry.vertexNormals` array.
+ *
+ * @property vertexNormals
+ * @name vertexNormals
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * beginGeometry();
+ * torus(30, 15, 10, 8);
+ * myGeometry = endGeometry();
+ *
+ * // Compute the vertex normals.
+ * myGeometry.computeNormals();
+ *
+ * describe(
+ * 'A white torus rotates against a dark gray background. Red lines extend outward from its vertices.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate the coordinate system.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Style the p5.Geometry object.
+ * stroke(0);
+ *
+ * // Display the p5.Geometry object.
+ * model(myGeometry);
+ *
+ * // Style the normal vectors.
+ * stroke(255, 0, 0);
+ *
+ * // Iterate over the vertices and vertexNormals arrays.
+ * for (let i = 0; i < myGeometry.vertices.length; i += 1) {
+ *
+ * // Get the vertex p5.Vector object.
+ * let v = myGeometry.vertices[i];
+ *
+ * // Get the vertex normal p5.Vector object.
+ * let n = myGeometry.vertexNormals[i];
+ *
+ * // Calculate a point along the vertex normal.
+ * let p = p5.Vector.mult(n, 8);
+ *
+ * // Draw the vertex normal as a red line.
+ * push();
+ * translate(v);
+ * line(0, 0, 0, p.x, p.y, p.z);
+ * pop();
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * myGeometry = new p5.Geometry();
+ *
+ * // Create p5.Vector objects to position the vertices.
+ * let v0 = createVector(-40, 0, 0);
+ * let v1 = createVector(0, -40, 0);
+ * let v2 = createVector(0, 40, 0);
+ * let v3 = createVector(40, 0, 0);
+ *
+ * // Add the vertices to the p5.Geometry object's vertices array.
+ * myGeometry.vertices.push(v0, v1, v2, v3);
+ *
+ * // Compute the faces array.
+ * myGeometry.computeFaces();
+ *
+ * // Compute the surface normals.
+ * myGeometry.computeNormals();
+ *
+ * describe('A red square drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a white point light.
+ * pointLight(255, 255, 255, 0, 0, 10);
+ *
+ * // Style the p5.Geometry object.
+ * noStroke();
+ * fill(255, 0, 0);
+ *
+ * // Display the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ *
+ */
+ this.vertexNormals = [
+ ];
+ /**
+ * An array that lists which of the geometry's vertices form each of its
+ * faces.
+ *
+ * All 3D shapes are made by connecting sets of points called *vertices*. A
+ * geometry's surface is formed by connecting vertices to form triangles
+ * that are stitched together. Each triangular patch on the geometry's
+ * surface is called a *face*.
+ *
+ * The geometry's vertices are stored as
+ * p5.Vector objects in the
+ * myGeometry.vertices array. The
+ * geometry's first vertex is the p5.Vector
+ * object at `myGeometry.vertices[0]`, its second vertex is
+ * `myGeometry.vertices[1]`, its third vertex is `myGeometry.vertices[2]`,
+ * and so on.
+ *
+ * For example, a geometry made from a rectangle has two faces because a
+ * rectangle is made by joining two triangles. `myGeometry.faces` for a
+ * rectangle would be the two-dimensional array `[[0, 1, 2], [2, 1, 3]]`.
+ * The first face, `myGeometry.faces[0]`, is the array `[0, 1, 2]` because
+ * it's formed by connecting `myGeometry.vertices[0]`,
+ * `myGeometry.vertices[1]`,and `myGeometry.vertices[2]`. The second face,
+ * `myGeometry.faces[1]`, is the array `[2, 1, 3]` because it's formed by
+ * connecting `myGeometry.vertices[2]`, `myGeometry.vertices[1]`,and
+ * `myGeometry.vertices[3]`.
+ *
+ * @property faces
+ * @name faces
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * beginGeometry();
+ * sphere();
+ * myGeometry = endGeometry();
+ *
+ * describe("A sphere drawn on a gray background. The sphere's surface is a grayscale patchwork of triangles.");
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the p5.Geometry object.
+ * noStroke();
+ *
+ * // Set a random seed.
+ * randomSeed(1234);
+ *
+ * // Iterate over the faces array.
+ * for (let face of myGeometry.faces) {
+ *
+ * // Style the face.
+ * let g = random(0, 255);
+ * fill(g);
+ *
+ * // Draw the face.
+ * beginShape();
+ * // Iterate over the vertices that form the face.
+ * for (let f of face) {
+ * // Get the vertex's p5.Vector object.
+ * let v = myGeometry.vertices[f];
+ * vertex(v.x, v.y, v.z);
+ * }
+ * endShape();
+ *
+ * }
+ * }
+ *
+ *
+ */
+ this.faces = [
+ ];
+ /**
+ * An array that lists the texture coordinates for each of the geometry's
+ * vertices.
+ *
+ * In order for texture() to work, the geometry
+ * needs a way to map the points on its surface to the pixels in a
+ * rectangular image that's used as a texture. The geometry's vertex at
+ * coordinates `(x, y, z)` maps to the texture image's pixel at coordinates
+ * `(u, v)`.
+ *
+ * The `myGeometry.uvs` array stores the `(u, v)` coordinates for each
+ * vertex in the order it was added to the geometry. For example, the
+ * first vertex, `myGeometry.vertices[0]`, has its `(u, v)` coordinates
+ * stored at `myGeometry.uvs[0]` and `myGeometry.uvs[1]`.
+ *
+ * @property uvs
+ * @name uvs
+ *
+ * @example
+ *
+ *
+ * let img;
+ *
+ * // Load the image and create a p5.Image object.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create p5.Geometry objects.
+ * let geom1 = buildGeometry(createShape);
+ * let geom2 = buildGeometry(createShape);
+ *
+ * // Left (original).
+ * push();
+ * translate(-25, 0, 0);
+ * texture(img);
+ * noStroke();
+ * model(geom1);
+ * pop();
+ *
+ * // Set geom2's texture coordinates.
+ * geom2.uvs = [0.25, 0.25, 0.75, 0.25, 0.25, 0.75, 0.75, 0.75];
+ *
+ * // Right (zoomed in).
+ * push();
+ * translate(25, 0, 0);
+ * texture(img);
+ * noStroke();
+ * model(geom2);
+ * pop();
+ *
+ * describe(
+ * 'Two photos of a ceiling on a gray background. The photo on the right zooms in to the center of the photo.'
+ * );
+ * }
+ *
+ * function createShape() {
+ * plane(40);
+ * }
+ *
+ *
+ */
+ this.uvs = [
+ ];
+ // a 2D array containing edge connectivity pattern for create line vertices
+ //based on faces for most objects;
+ this.edges = [
+ ];
+ this.vertexColors = [
+ ];
+ // One color per vertex representing the stroke color at that vertex
+ this.vertexStrokeColors = [
+ ];
+ // One color per line vertex, generated automatically based on
+ // vertexStrokeColors in _edgesToVertices()
+ this.lineVertexColors = new _main.default.DataArray();
+ this.detailX = detailX !== undefined ? detailX : 1;
+ this.detailY = detailY !== undefined ? detailY : 1;
+ this.dirtyFlags = {
+ };
+ this._hasFillTransparency = undefined;
+ this._hasStrokeTransparency = undefined;
+ if (callback instanceof Function) {
+ callback.call(this);
+ }
+ } /**
+ * Calculates the position and size of the smallest box that contains the geometry.
+ *
+ * A bounding box is the smallest rectangular prism that contains the entire
+ * geometry. It's defined by the box's minimum and maximum coordinates along
+ * each axis, as well as the size (length) and offset (center).
+ *
+ * Calling `myGeometry.calculateBoundingBox()` returns an object with four
+ * properties that describe the bounding box:
+ *
+ * ```js
+ * // Get myGeometry's bounding box.
+ * let bbox = myGeometry.calculateBoundingBox();
+ *
+ * // Print the bounding box to the console.
+ * console.log(bbox);
+ *
+ * // {
+ * // // The minimum coordinate along each axis.
+ * // min: { x: -1, y: -2, z: -3 },
+ * //
+ * // // The maximum coordinate along each axis.
+ * // max: { x: 1, y: 2, z: 3},
+ * //
+ * // // The size (length) along each axis.
+ * // size: { x: 2, y: 4, z: 6},
+ * //
+ * // // The offset (center) along each axis.
+ * // offset: { x: 0, y: 0, z: 0}
+ * // }
+ * ```
+ *
+ * @method calculateBoundingBox
+ * @returns {Object} bounding box of the geometry.
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let particles;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a new p5.Geometry object with random spheres.
+ * particles = buildGeometry(createParticles);
+ *
+ * describe('Ten white spheres placed randomly against a gray background. A box encloses the spheres.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the particles.
+ * noStroke();
+ * fill(255);
+ *
+ * // Draw the particles.
+ * model(particles);
+ *
+ * // Calculate the bounding box.
+ * let bbox = particles.calculateBoundingBox();
+ *
+ * // Translate to the bounding box's center.
+ * translate(bbox.offset.x, bbox.offset.y, bbox.offset.z);
+ *
+ * // Style the bounding box.
+ * stroke(255);
+ * noFill();
+ *
+ * // Draw the bounding box.
+ * box(bbox.size.x, bbox.size.y, bbox.size.z);
+ * }
+ *
+ * function createParticles() {
+ * for (let i = 0; i < 10; i += 1) {
+ * // Calculate random coordinates.
+ * let x = randomGaussian(0, 15);
+ * let y = randomGaussian(0, 15);
+ * let z = randomGaussian(0, 15);
+ *
+ * push();
+ * // Translate to the particle's coordinates.
+ * translate(x, y, z);
+ * // Draw the particle.
+ * sphere(3);
+ * pop();
+ * }
+ * }
+ *
+ *
+ */
+
+ _createClass(Geometry, [
+ {
+ key: 'calculateBoundingBox',
+ value: function calculateBoundingBox() {
+ if (this.boundingBoxCache) {
+ return this.boundingBoxCache; // Return cached result if available
+ }
+ var minVertex = new _main.default.Vector(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
+ var maxVertex = new _main.default.Vector(Number.MIN_VALUE, Number.MIN_VALUE, Number.MIN_VALUE);
+ for (var i = 0; i < this.vertices.length; i++) {
+ var vertex = this.vertices[i];
+ minVertex.x = Math.min(minVertex.x, vertex.x);
+ minVertex.y = Math.min(minVertex.y, vertex.y);
+ minVertex.z = Math.min(minVertex.z, vertex.z);
+ maxVertex.x = Math.max(maxVertex.x, vertex.x);
+ maxVertex.y = Math.max(maxVertex.y, vertex.y);
+ maxVertex.z = Math.max(maxVertex.z, vertex.z);
+ } // Calculate size and offset properties
+
+ var size = new _main.default.Vector(maxVertex.x - minVertex.x, maxVertex.y - minVertex.y, maxVertex.z - minVertex.z);
+ var offset = new _main.default.Vector((minVertex.x + maxVertex.x) / 2, (minVertex.y + maxVertex.y) / 2, (minVertex.z + maxVertex.z) / 2);
+ // Cache the result for future access
+ this.boundingBoxCache = {
+ min: minVertex,
+ max: maxVertex,
+ size: size,
+ offset: offset
+ };
+ return this.boundingBoxCache;
+ }
+ },
+ {
+ key: 'reset',
+ value: function reset() {
+ this._hasFillTransparency = undefined;
+ this._hasStrokeTransparency = undefined;
+ this.lineVertices.clear();
+ this.lineTangentsIn.clear();
+ this.lineTangentsOut.clear();
+ this.lineSides.clear();
+ this.vertices.length = 0;
+ this.edges.length = 0;
+ this.vertexColors.length = 0;
+ this.vertexStrokeColors.length = 0;
+ this.lineVertexColors.clear();
+ this.vertexNormals.length = 0;
+ this.uvs.length = 0;
+ this.dirtyFlags = {
+ };
+ }
+ },
+ {
+ key: 'hasFillTransparency',
+ value: function hasFillTransparency() {
+ if (this._hasFillTransparency === undefined) {
+ this._hasFillTransparency = false;
+ for (var i = 0; i < this.vertexColors.length; i += 4) {
+ if (this.vertexColors[i + 3] < 1) {
+ this._hasFillTransparency = true;
+ break;
+ }
+ }
+ }
+ return this._hasFillTransparency;
+ }
+ },
+ {
+ key: 'hasStrokeTransparency',
+ value: function hasStrokeTransparency() {
+ if (this._hasStrokeTransparency === undefined) {
+ this._hasStrokeTransparency = false;
+ for (var i = 0; i < this.lineVertexColors.length; i += 4) {
+ if (this.lineVertexColors[i + 3] < 1) {
+ this._hasStrokeTransparency = true;
+ break;
+ }
+ }
+ }
+ return this._hasStrokeTransparency;
+ } /**
+ * Removes the geometry’s internal colors.
+ *
+ * `p5.Geometry` objects can be created with "internal colors" assigned to
+ * vertices or the entire shape. When a geometry has internal colors,
+ * fill() has no effect. Calling
+ * `myGeometry.clearColors()` allows the
+ * fill() function to apply color to the geometry.
+ *
+ * @method clearColors
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create a p5.Geometry object.
+ * // Set its internal color to red.
+ * beginGeometry();
+ * fill(255, 0, 0);
+ * plane(20);
+ * let myGeometry = endGeometry();
+ *
+ * // Style the shape.
+ * noStroke();
+ *
+ * // Draw the p5.Geometry object (center).
+ * model(myGeometry);
+ *
+ * // Translate the origin to the bottom-right.
+ * translate(25, 25, 0);
+ *
+ * // Try to fill the geometry with green.
+ * fill(0, 255, 0);
+ *
+ * // Draw the geometry again (bottom-right).
+ * model(myGeometry);
+ *
+ * // Clear the geometry's colors.
+ * myGeometry.clearColors();
+ *
+ * // Fill the geometry with blue.
+ * fill(0, 0, 255);
+ *
+ * // Translate the origin up.
+ * translate(0, -50, 0);
+ *
+ * // Draw the geometry again (top-right).
+ * model(myGeometry);
+ *
+ * describe(
+ * 'Three squares drawn against a gray background. Red squares are at the center and the bottom-right. A blue square is at the top-right.'
+ * );
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'clearColors',
+ value: function clearColors() {
+ this.vertexColors = [
+ ];
+ return this;
+ } /**
+ * Flips the geometry’s texture u-coordinates.
+ *
+ * In order for texture() to work, the geometry
+ * needs a way to map the points on its surface to the pixels in a rectangular
+ * image that's used as a texture. The geometry's vertex at coordinates
+ * `(x, y, z)` maps to the texture image's pixel at coordinates `(u, v)`.
+ *
+ * The myGeometry.uvs array stores the
+ * `(u, v)` coordinates for each vertex in the order it was added to the
+ * geometry. Calling `myGeometry.flipU()` flips a geometry's u-coordinates
+ * so that the texture appears mirrored horizontally.
+ *
+ * For example, a plane's four vertices are added clockwise starting from the
+ * top-left corner. Here's how calling `myGeometry.flipU()` would change a
+ * plane's texture coordinates:
+ *
+ * ```js
+ * // Print the original texture coordinates.
+ * // Output: [0, 0, 1, 0, 0, 1, 1, 1]
+ * console.log(myGeometry.uvs);
+ *
+ * // Flip the u-coordinates.
+ * myGeometry.flipU();
+ *
+ * // Print the flipped texture coordinates.
+ * // Output: [1, 0, 0, 0, 1, 1, 0, 1]
+ * console.log(myGeometry.uvs);
+ *
+ * // Notice the swaps:
+ * // Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]
+ * // Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]
+ * ```
+ *
+ * @method flipU
+ * @for p5.Geometry
+ *
+ * @example
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create p5.Geometry objects.
+ * let geom1 = buildGeometry(createShape);
+ * let geom2 = buildGeometry(createShape);
+ *
+ * // Flip geom2's U texture coordinates.
+ * geom2.flipU();
+ *
+ * // Left (original).
+ * push();
+ * translate(-25, 0, 0);
+ * texture(img);
+ * noStroke();
+ * model(geom1);
+ * pop();
+ *
+ * // Right (flipped).
+ * push();
+ * translate(25, 0, 0);
+ * texture(img);
+ * noStroke();
+ * model(geom2);
+ * pop();
+ *
+ * describe(
+ * 'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'
+ * );
+ * }
+ *
+ * function createShape() {
+ * plane(40);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'flipU',
+ value: function flipU() {
+ this.uvs = this.uvs.flat().map(function (val, index) {
+ if (index % 2 === 0) {
+ return 1 - val;
+ } else {
+ return val;
+ }
+ });
+ } /**
+ * Flips the geometry’s texture v-coordinates.
+ *
+ * In order for texture() to work, the geometry
+ * needs a way to map the points on its surface to the pixels in a rectangular
+ * image that's used as a texture. The geometry's vertex at coordinates
+ * `(x, y, z)` maps to the texture image's pixel at coordinates `(u, v)`.
+ *
+ * The myGeometry.uvs array stores the
+ * `(u, v)` coordinates for each vertex in the order it was added to the
+ * geometry. Calling `myGeometry.flipV()` flips a geometry's v-coordinates
+ * so that the texture appears mirrored vertically.
+ *
+ * For example, a plane's four vertices are added clockwise starting from the
+ * top-left corner. Here's how calling `myGeometry.flipV()` would change a
+ * plane's texture coordinates:
+ *
+ * ```js
+ * // Print the original texture coordinates.
+ * // Output: [0, 0, 1, 0, 0, 1, 1, 1]
+ * console.log(myGeometry.uvs);
+ *
+ * // Flip the v-coordinates.
+ * myGeometry.flipV();
+ *
+ * // Print the flipped texture coordinates.
+ * // Output: [0, 1, 1, 1, 0, 0, 1, 0]
+ * console.log(myGeometry.uvs);
+ *
+ * // Notice the swaps:
+ * // Left vertices: [0, 0] <--> [1, 0]
+ * // Right vertices: [1, 0] <--> [1, 1]
+ * ```
+ *
+ * @method flipV
+ * @for p5.Geometry
+ *
+ * @example
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create p5.Geometry objects.
+ * let geom1 = buildGeometry(createShape);
+ * let geom2 = buildGeometry(createShape);
+ *
+ * // Flip geom2's V texture coordinates.
+ * geom2.flipV();
+ *
+ * // Left (original).
+ * push();
+ * translate(-25, 0, 0);
+ * texture(img);
+ * noStroke();
+ * model(geom1);
+ * pop();
+ *
+ * // Right (flipped).
+ * push();
+ * translate(25, 0, 0);
+ * texture(img);
+ * noStroke();
+ * model(geom2);
+ * pop();
+ *
+ * describe(
+ * 'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'
+ * );
+ * }
+ *
+ * function createShape() {
+ * plane(40);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'flipV',
+ value: function flipV() {
+ this.uvs = this.uvs.flat().map(function (val, index) {
+ if (index % 2 === 0) {
+ return val;
+ } else {
+ return 1 - val;
+ }
+ });
+ } /**
+ * Computes the geometry's faces using its vertices.
+ *
+ * All 3D shapes are made by connecting sets of points called *vertices*. A
+ * geometry's surface is formed by connecting vertices to form triangles that
+ * are stitched together. Each triangular patch on the geometry's surface is
+ * called a *face*. `myGeometry.computeFaces()` performs the math needed to
+ * define each face based on the distances between vertices.
+ *
+ * The geometry's vertices are stored as p5.Vector
+ * objects in the myGeometry.vertices
+ * array. The geometry's first vertex is the
+ * p5.Vector object at `myGeometry.vertices[0]`,
+ * its second vertex is `myGeometry.vertices[1]`, its third vertex is
+ * `myGeometry.vertices[2]`, and so on.
+ *
+ * Calling `myGeometry.computeFaces()` fills the
+ * myGeometry.faces array with three-element
+ * arrays that list the vertices that form each face. For example, a geometry
+ * made from a rectangle has two faces because a rectangle is made by joining
+ * two triangles. myGeometry.faces for a
+ * rectangle would be the two-dimensional array
+ * `[[0, 1, 2], [2, 1, 3]]`. The first face, `myGeometry.faces[0]`, is the
+ * array `[0, 1, 2]` because it's formed by connecting
+ * `myGeometry.vertices[0]`, `myGeometry.vertices[1]`,and
+ * `myGeometry.vertices[2]`. The second face, `myGeometry.faces[1]`, is the
+ * array `[2, 1, 3]` because it's formed by connecting
+ * `myGeometry.vertices[2]`, `myGeometry.vertices[1]`, and
+ * `myGeometry.vertices[3]`.
+ *
+ * Note: `myGeometry.computeFaces()` only works when geometries have four or more vertices.
+ *
+ * @method computeFaces
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * myGeometry = new p5.Geometry();
+ *
+ * // Create p5.Vector objects to position the vertices.
+ * let v0 = createVector(-40, 0, 0);
+ * let v1 = createVector(0, -40, 0);
+ * let v2 = createVector(0, 40, 0);
+ * let v3 = createVector(40, 0, 0);
+ *
+ * // Add the vertices to myGeometry's vertices array.
+ * myGeometry.vertices.push(v0, v1, v2, v3);
+ *
+ * // Compute myGeometry's faces array.
+ * myGeometry.computeFaces();
+ *
+ * describe('A red square drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the shape.
+ * noStroke();
+ * fill(255, 0, 0);
+ *
+ * // Draw the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object using a callback function.
+ * myGeometry = new p5.Geometry(1, 1, createShape);
+ *
+ * describe('A red square drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the shape.
+ * noStroke();
+ * fill(255, 0, 0);
+ *
+ * // Draw the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ * function createShape() {
+ * // Create p5.Vector objects to position the vertices.
+ * let v0 = createVector(-40, 0, 0);
+ * let v1 = createVector(0, -40, 0);
+ * let v2 = createVector(0, 40, 0);
+ * let v3 = createVector(40, 0, 0);
+ *
+ * // Add the vertices to the p5.Geometry object's vertices array.
+ * this.vertices.push(v0, v1, v2, v3);
+ *
+ * // Compute the faces array.
+ * this.computeFaces();
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'computeFaces',
+ value: function computeFaces() {
+ this.faces.length = 0;
+ var sliceCount = this.detailX + 1;
+ var a,
+ b,
+ c,
+ d;
+ for (var i = 0; i < this.detailY; i++) {
+ for (var j = 0; j < this.detailX; j++) {
+ a = i * sliceCount + j; // + offset;
+ b = i * sliceCount + j + 1; // + offset;
+ c = (i + 1) * sliceCount + j + 1; // + offset;
+ d = (i + 1) * sliceCount + j; // + offset;
+ this.faces.push([a,
+ b,
+ d]);
+ this.faces.push([d,
+ b,
+ c]);
+ }
+ }
+ return this;
+ }
+ },
+ {
+ key: '_getFaceNormal',
+ value: function _getFaceNormal(faceId) {
+ //This assumes that vA->vB->vC is a counter-clockwise ordering
+ var face = this.faces[faceId];
+ var vA = this.vertices[face[0]];
+ var vB = this.vertices[face[1]];
+ var vC = this.vertices[face[2]];
+ var ab = _main.default.Vector.sub(vB, vA);
+ var ac = _main.default.Vector.sub(vC, vA);
+ var n = _main.default.Vector.cross(ab, ac);
+ var ln = _main.default.Vector.mag(n);
+ var sinAlpha = ln / (_main.default.Vector.mag(ab) * _main.default.Vector.mag(ac));
+ if (sinAlpha === 0 || isNaN(sinAlpha)) {
+ console.warn('p5.Geometry.prototype._getFaceNormal:', 'face has colinear sides or a repeated vertex');
+ return n;
+ }
+ if (sinAlpha > 1) sinAlpha = 1; // handle float rounding error
+ return n.mult(Math.asin(sinAlpha) / ln);
+ } /**
+ * Calculates the normal vector for each vertex on the geometry.
+ *
+ * All 3D shapes are made by connecting sets of points called *vertices*. A
+ * geometry's surface is formed by connecting vertices to create triangles
+ * that are stitched together. Each triangular patch on the geometry's
+ * surface is called a *face*. `myGeometry.computeNormals()` performs the
+ * math needed to orient each face. Orientation is important for lighting
+ * and other effects.
+ *
+ * A face's orientation is defined by its *normal vector* which points out
+ * of the face and is normal (perpendicular) to the surface. Calling
+ * `myGeometry.computeNormals()` first calculates each face's normal vector.
+ * Then it calculates the normal vector for each vertex by averaging the
+ * normal vectors of the faces surrounding the vertex. The vertex normals
+ * are stored as p5.Vector objects in the
+ * myGeometry.vertexNormals array.
+ *
+ * The first parameter, `shadingType`, is optional. Passing the constant
+ * `FLAT`, as in `myGeometry.computeNormals(FLAT)`, provides neighboring
+ * faces with their own copies of the vertices they share. Surfaces appear
+ * tiled with flat shading. Passing the constant `SMOOTH`, as in
+ * `myGeometry.computeNormals(SMOOTH)`, makes neighboring faces reuse their
+ * shared vertices. Surfaces appear smoother with smooth shading. By
+ * default, `shadingType` is `FLAT`.
+ *
+ * The second parameter, `options`, is also optional. If an object with a
+ * `roundToPrecision` property is passed, as in
+ * `myGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 })`, it sets the
+ * number of decimal places to use for calculations. By default,
+ * `roundToPrecision` uses 3 decimal places.
+ *
+ * @method computeNormals
+ * @param {String} [shadingType] shading type. either FLAT or SMOOTH. Defaults to `FLAT`.
+ * @param {Object} [options] shading options.
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * beginGeometry();
+ * torus();
+ * myGeometry = endGeometry();
+ *
+ * // Compute the vertex normals.
+ * myGeometry.computeNormals();
+ *
+ * describe(
+ * "A white torus drawn on a dark gray background. Red lines extend outward from the torus' vertices."
+ * );
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate the coordinate system.
+ * rotateX(1);
+ *
+ * // Style the helix.
+ * stroke(0);
+ *
+ * // Display the helix.
+ * model(myGeometry);
+ *
+ * // Style the normal vectors.
+ * stroke(255, 0, 0);
+ *
+ * // Iterate over the vertices and vertexNormals arrays.
+ * for (let i = 0; i < myGeometry.vertices.length; i += 1) {
+ *
+ * // Get the vertex p5.Vector object.
+ * let v = myGeometry.vertices[i];
+ *
+ * // Get the vertex normal p5.Vector object.
+ * let n = myGeometry.vertexNormals[i];
+ *
+ * // Calculate a point along the vertex normal.
+ * let p = p5.Vector.mult(n, 5);
+ *
+ * // Draw the vertex normal as a red line.
+ * push();
+ * translate(v);
+ * line(0, 0, 0, p.x, p.y, p.z);
+ * pop();
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object using a callback function.
+ * myGeometry = new p5.Geometry();
+ *
+ * // Create p5.Vector objects to position the vertices.
+ * let v0 = createVector(-40, 0, 0);
+ * let v1 = createVector(0, -40, 0);
+ * let v2 = createVector(0, 40, 0);
+ * let v3 = createVector(40, 0, 0);
+ *
+ * // Add the vertices to the p5.Geometry object's vertices array.
+ * myGeometry.vertices.push(v0, v1, v2, v3);
+ *
+ * // Compute the faces array.
+ * myGeometry.computeFaces();
+ *
+ * // Compute the surface normals.
+ * myGeometry.computeNormals();
+ *
+ * describe('A red square drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a white point light.
+ * pointLight(255, 255, 255, 0, 0, 10);
+ *
+ * // Style the p5.Geometry object.
+ * noStroke();
+ * fill(255, 0, 0);
+ *
+ * // Draw the p5.Geometry object.
+ * model(myGeometry);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * myGeometry = buildGeometry(createShape);
+ *
+ * // Compute normals using default (FLAT) shading.
+ * myGeometry.computeNormals(FLAT);
+ *
+ * describe('A white, helical structure drawn on a dark gray background. Its faces appear faceted.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate the coordinate system.
+ * rotateX(1);
+ *
+ * // Style the helix.
+ * noStroke();
+ *
+ * // Display the helix.
+ * model(myGeometry);
+ * }
+ *
+ * function createShape() {
+ * // Create a helical shape.
+ * beginShape();
+ * for (let i = 0; i < TWO_PI * 3; i += 0.5) {
+ * let x = 30 * cos(i);
+ * let y = 30 * sin(i);
+ * let z = map(i, 0, TWO_PI * 3, -40, 40);
+ * vertex(x, y, z);
+ * }
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * myGeometry = buildGeometry(createShape);
+ *
+ * // Compute normals using smooth shading.
+ * myGeometry.computeNormals(SMOOTH);
+ *
+ * describe('A white, helical structure drawn on a dark gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate the coordinate system.
+ * rotateX(1);
+ *
+ * // Style the helix.
+ * noStroke();
+ *
+ * // Display the helix.
+ * model(myGeometry);
+ * }
+ *
+ * function createShape() {
+ * // Create a helical shape.
+ * beginShape();
+ * for (let i = 0; i < TWO_PI * 3; i += 0.5) {
+ * let x = 30 * cos(i);
+ * let y = 30 * sin(i);
+ * let z = map(i, 0, TWO_PI * 3, -40, 40);
+ * vertex(x, y, z);
+ * }
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Geometry object.
+ * myGeometry = buildGeometry(createShape);
+ *
+ * // Create an options object.
+ * let options = { roundToPrecision: 5 };
+ *
+ * // Compute normals using smooth shading.
+ * myGeometry.computeNormals(SMOOTH, options);
+ *
+ * describe('A white, helical structure drawn on a dark gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate the coordinate system.
+ * rotateX(1);
+ *
+ * // Style the helix.
+ * noStroke();
+ *
+ * // Display the helix.
+ * model(myGeometry);
+ * }
+ *
+ * function createShape() {
+ * // Create a helical shape.
+ * beginShape();
+ * for (let i = 0; i < TWO_PI * 3; i += 0.5) {
+ * let x = 30 * cos(i);
+ * let y = 30 * sin(i);
+ * let z = map(i, 0, TWO_PI * 3, -40, 40);
+ * vertex(x, y, z);
+ * }
+ * endShape();
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'computeNormals',
+ value: function computeNormals() {
+ var _this = this;
+ var shadingType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : constants.FLAT;
+ var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+ },
+ _ref$roundToPrecision = _ref.roundToPrecision,
+ roundToPrecision = _ref$roundToPrecision === void 0 ? 3 : _ref$roundToPrecision;
+ var vertexNormals = this.vertexNormals;
+ var vertices = this.vertices;
+ var faces = this.faces;
+ var iv;
+ if (shadingType === constants.SMOOTH) {
+ var vertexIndices = {
+ };
+ var uniqueVertices = [
+ ];
+ var power = Math.pow(10, roundToPrecision);
+ var rounded = function rounded(val) {
+ return Math.round(val * power) / power;
+ };
+ var getKey = function getKey(vert) {
+ return ''.concat(rounded(vert.x), ',').concat(rounded(vert.y), ',').concat(rounded(vert.z));
+ };
+ // loop through each vertex and add uniqueVertices
+ for (var i = 0; i < vertices.length; i++) {
+ var vertex = vertices[i];
+ var key = getKey(vertex);
+ if (vertexIndices[key] === undefined) {
+ vertexIndices[key] = uniqueVertices.length;
+ uniqueVertices.push(vertex);
+ }
+ } // update face indices to use the deduplicated vertex indices
+
+ faces.forEach(function (face) {
+ for (var fv = 0; fv < 3; ++fv) {
+ var originalVertexIndex = face[fv];
+ var originalVertex = vertices[originalVertexIndex];
+ var _key = getKey(originalVertex);
+ face[fv] = vertexIndices[_key];
+ }
+ });
+ // update edge indices to use the deduplicated vertex indices
+ this.edges.forEach(function (edge) {
+ for (var ev = 0; ev < 2; ++ev) {
+ var originalVertexIndex = edge[ev];
+ var originalVertex = vertices[originalVertexIndex];
+ var _key2 = getKey(originalVertex);
+ edge[ev] = vertexIndices[_key2];
+ }
+ });
+ // update the deduplicated vertices
+ this.vertices = vertices = uniqueVertices;
+ } // initialize the vertexNormals array with empty vectors
+
+ vertexNormals.length = 0;
+ for (iv = 0; iv < vertices.length; ++iv) {
+ vertexNormals.push(new _main.default.Vector());
+ } // loop through all the faces adding its normal to the normal
+ // of each of its vertices
+
+ faces.forEach(function (face, f) {
+ var faceNormal = _this._getFaceNormal(f);
+ // all three vertices get the normal added
+ for (var fv = 0; fv < 3; ++fv) {
+ var vertexIndex = face[fv];
+ vertexNormals[vertexIndex].add(faceNormal);
+ }
+ });
+ // normalize the normals
+ for (iv = 0; iv < vertices.length; ++iv) {
+ vertexNormals[iv].normalize();
+ }
+ return this;
+ } /**
+ * Averages the vertex normals. Used in curved
+ * surfaces
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: 'averageNormals',
+ value: function averageNormals() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var offset = this.detailX + 1;
+ var temp = _main.default.Vector.add(this.vertexNormals[i * offset], this.vertexNormals[i * offset + this.detailX]);
+ temp = _main.default.Vector.div(temp, 2);
+ this.vertexNormals[i * offset] = temp;
+ this.vertexNormals[i * offset + this.detailX] = temp;
+ }
+ return this;
+ } /**
+ * Averages pole normals. Used in spherical primitives
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: 'averagePoleNormals',
+ value: function averagePoleNormals() {
+ //average the north pole
+ var sum = new _main.default.Vector(0, 0, 0);
+ for (var i = 0; i < this.detailX; i++) {
+ sum.add(this.vertexNormals[i]);
+ }
+ sum = _main.default.Vector.div(sum, this.detailX);
+ for (var _i = 0; _i < this.detailX; _i++) {
+ this.vertexNormals[_i] = sum;
+ } //average the south pole
+
+ sum = new _main.default.Vector(0, 0, 0);
+ for (var _i2 = this.vertices.length - 1; _i2 > this.vertices.length - 1 - this.detailX; _i2--) {
+ sum.add(this.vertexNormals[_i2]);
+ }
+ sum = _main.default.Vector.div(sum, this.detailX);
+ for (var _i3 = this.vertices.length - 1; _i3 > this.vertices.length - 1 - this.detailX; _i3--) {
+ this.vertexNormals[_i3] = sum;
+ }
+ return this;
+ } /**
+ * Create a 2D array for establishing stroke connections
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_makeTriangleEdges',
+ value: function _makeTriangleEdges() {
+ this.edges.length = 0;
+ for (var j = 0; j < this.faces.length; j++) {
+ this.edges.push([this.faces[j][0],
+ this.faces[j][1]]);
+ this.edges.push([this.faces[j][1],
+ this.faces[j][2]]);
+ this.edges.push([this.faces[j][2],
+ this.faces[j][0]]);
+ }
+ return this;
+ } /**
+ * Converts each line segment into the vertices and vertex attributes needed
+ * to turn the line into a polygon on screen. This will include:
+ * - Two triangles line segment to create a rectangle
+ * - Two triangles per endpoint to create a stroke cap rectangle. A fragment
+ * shader is responsible for displaying the appropriate cap style within
+ * that rectangle.
+ * - Four triangles per join between adjacent line segments, creating a quad on
+ * either side of the join, perpendicular to the lines. A vertex shader will
+ * discard the quad in the "elbow" of the join, and a fragment shader will
+ * display the appropriate join style within the remaining quad.
+ *
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_edgesToVertices',
+ value: function _edgesToVertices() {
+ this.lineVertices.clear();
+ this.lineTangentsIn.clear();
+ this.lineTangentsOut.clear();
+ this.lineSides.clear();
+ var potentialCaps = new Map();
+ var connected = new Set();
+ var lastValidDir;
+ for (var i = 0; i < this.edges.length; i++) {
+ var prevEdge = this.edges[i - 1];
+ var currEdge = this.edges[i];
+ var begin = this.vertices[currEdge[0]];
+ var end = this.vertices[currEdge[1]];
+ var fromColor = this.vertexStrokeColors.length > 0 ? this.vertexStrokeColors.slice(currEdge[0] * 4, (currEdge[0] + 1) * 4) : [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ var toColor = this.vertexStrokeColors.length > 0 ? this.vertexStrokeColors.slice(currEdge[1] * 4, (currEdge[1] + 1) * 4) : [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ var dir = end.copy().sub(begin).normalize();
+ var dirOK = dir.magSq() > 0;
+ if (dirOK) {
+ this._addSegment(begin, end, fromColor, toColor, dir);
+ }
+ if (i > 0 && prevEdge[1] === currEdge[0]) {
+ if (!connected.has(currEdge[0])) {
+ connected.add(currEdge[0]);
+ potentialCaps.delete(currEdge[0]);
+ // Add a join if this segment shares a vertex with the previous. Skip
+ // actually adding join vertices if either the previous segment or this
+ // one has a length of 0.
+ //
+ // Don't add a join if the tangents point in the same direction, which
+ // would mean the edges line up exactly, and there is no need for a join.
+ if (lastValidDir && dirOK && dir.dot(lastValidDir) < 1 - 1e-8) {
+ this._addJoin(begin, lastValidDir, dir, fromColor);
+ }
+ }
+ } else {
+ // Start a new line
+ if (dirOK && !connected.has(currEdge[0])) {
+ var existingCap = potentialCaps.get(currEdge[0]);
+ if (existingCap) {
+ this._addJoin(begin, existingCap.dir, dir, fromColor);
+ potentialCaps.delete(currEdge[0]);
+ connected.add(currEdge[0]);
+ } else {
+ potentialCaps.set(currEdge[0], {
+ point: begin,
+ dir: dir.copy().mult( - 1),
+ color: fromColor
+ });
+ }
+ }
+ if (lastValidDir && !connected.has(prevEdge[1])) {
+ var _existingCap = potentialCaps.get(prevEdge[1]);
+ if (_existingCap) {
+ this._addJoin(this.vertices[prevEdge[1]], lastValidDir, _existingCap.dir.copy().mult( - 1), fromColor);
+ potentialCaps.delete(prevEdge[1]);
+ connected.add(prevEdge[1]);
+ } else {
+ // Close off the last segment with a cap
+ potentialCaps.set(prevEdge[1], {
+ point: this.vertices[prevEdge[1]],
+ dir: lastValidDir,
+ color: fromColor
+ });
+ }
+ lastValidDir = undefined;
+ }
+ }
+ if (i === this.edges.length - 1 && !connected.has(currEdge[1])) {
+ var _existingCap2 = potentialCaps.get(currEdge[1]);
+ if (_existingCap2) {
+ this._addJoin(end, dir, _existingCap2.dir.copy().mult( - 1), toColor);
+ potentialCaps.delete(currEdge[1]);
+ connected.add(currEdge[1]);
+ } else {
+ potentialCaps.set(currEdge[1], {
+ point: end,
+ dir: dir,
+ color: toColor
+ });
+ }
+ }
+ if (dirOK) {
+ lastValidDir = dir;
+ }
+ }
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = potentialCaps.values() [Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var _step$value = _step.value,
+ point = _step$value.point,
+ _dir = _step$value.dir,
+ color = _step$value.color;
+ this._addCap(point, _dir, color);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ return this;
+ } /**
+ * Adds the vertices and vertex attributes for two triangles making a rectangle
+ * for a straight line segment. A vertex shader is responsible for picking
+ * proper coordinates on the screen given the centerline positions, the tangent,
+ * and the side of the centerline each vertex belongs to. Sides follow the
+ * following scheme:
+ *
+ * -1 -1
+ * o-------------o
+ * | |
+ * o-------------o
+ * 1 1
+ *
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_addSegment',
+ value: function _addSegment(begin, end, fromColor, toColor, dir) {
+ var _this$lineVertices,
+ _this$lineVertexColor;
+ var a = begin.array();
+ var b = end.array();
+ var dirArr = dir.array();
+ this.lineSides.push(1, 1, - 1, 1, - 1, - 1);
+ for (var _i4 = 0, _arr = [
+ this.lineTangentsIn,
+ this.lineTangentsOut
+ ]; _i4 < _arr.length; _i4++) {
+ var tangents = _arr[_i4];
+ for (var i = 0; i < 6; i++) {
+ tangents.push.apply(tangents, _toConsumableArray(dirArr));
+ }
+ }(_this$lineVertices = this.lineVertices).push.apply(_this$lineVertices, _toConsumableArray(a).concat(_toConsumableArray(b), _toConsumableArray(a), _toConsumableArray(b), _toConsumableArray(b), _toConsumableArray(a)));
+ (_this$lineVertexColor = this.lineVertexColors).push.apply(_this$lineVertexColor, _toConsumableArray(fromColor).concat(_toConsumableArray(toColor), _toConsumableArray(fromColor), _toConsumableArray(toColor), _toConsumableArray(toColor), _toConsumableArray(fromColor)));
+ return this;
+ } /**
+ * Adds the vertices and vertex attributes for two triangles representing the
+ * stroke cap of a line. A fragment shader is responsible for displaying the
+ * appropriate cap style within the rectangle they make.
+ *
+ * The lineSides buffer will include the following values for the points on
+ * the cap rectangle:
+ *
+ * -1 -2
+ * -----------o---o
+ * | |
+ * -----------o---o
+ * 1 2
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_addCap',
+ value: function _addCap(point, tangent, color) {
+ var ptArray = point.array();
+ var tanInArray = tangent.array();
+ var tanOutArray = [
+ 0,
+ 0,
+ 0
+ ];
+ for (var i = 0; i < 6; i++) {
+ var _this$lineVertices2,
+ _this$lineTangentsIn,
+ _this$lineTangentsOut,
+ _this$lineVertexColor2;
+ (_this$lineVertices2 = this.lineVertices).push.apply(_this$lineVertices2, _toConsumableArray(ptArray));
+ (_this$lineTangentsIn = this.lineTangentsIn).push.apply(_this$lineTangentsIn, _toConsumableArray(tanInArray));
+ (_this$lineTangentsOut = this.lineTangentsOut).push.apply(_this$lineTangentsOut, tanOutArray);
+ (_this$lineVertexColor2 = this.lineVertexColors).push.apply(_this$lineVertexColor2, _toConsumableArray(color));
+ }
+ this.lineSides.push( - 1, 2, - 2, 1, 2, - 1);
+ return this;
+ } /**
+ * Adds the vertices and vertex attributes for four triangles representing a
+ * join between two adjacent line segments. This creates a quad on either side
+ * of the shared vertex of the two line segments, with each quad perpendicular
+ * to the lines. A vertex shader will discard all but the quad in the "elbow" of
+ * the join, and a fragment shader will display the appropriate join style
+ * within the remaining quad.
+ *
+ * The lineSides buffer will include the following values for the points on
+ * the join rectangles:
+ *
+ * -1 -2
+ * -------------o----o
+ * | |
+ * 1 o----o----o -3
+ * | | 0 |
+ * --------o----o |
+ * 2| 3 |
+ * | |
+ * | |
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_addJoin',
+ value: function _addJoin(point, fromTangent, toTangent, color) {
+ var ptArray = point.array();
+ var tanInArray = fromTangent.array();
+ var tanOutArray = toTangent.array();
+ for (var i = 0; i < 12; i++) {
+ var _this$lineVertices3,
+ _this$lineTangentsIn2,
+ _this$lineTangentsOut2,
+ _this$lineVertexColor3;
+ (_this$lineVertices3 = this.lineVertices).push.apply(_this$lineVertices3, _toConsumableArray(ptArray));
+ (_this$lineTangentsIn2 = this.lineTangentsIn).push.apply(_this$lineTangentsIn2, _toConsumableArray(tanInArray));
+ (_this$lineTangentsOut2 = this.lineTangentsOut).push.apply(_this$lineTangentsOut2, _toConsumableArray(tanOutArray));
+ (_this$lineVertexColor3 = this.lineVertexColors).push.apply(_this$lineVertexColor3, _toConsumableArray(color));
+ }
+ this.lineSides.push( - 1, - 3, - 2, - 1, 0, - 3);
+ this.lineSides.push(3, 1, 2, 3, 0, 1);
+ return this;
+ } /**
+ * Transforms the geometry's vertices to fit snugly within a 100×100×100 box
+ * centered at the origin.
+ *
+ * Calling `myGeometry.normalize()` translates the geometry's vertices so that
+ * they're centered at the origin `(0, 0, 0)`. Then it scales the vertices so
+ * that they fill a 100×100×100 box. As a result, small geometries will grow
+ * and large geometries will shrink.
+ *
+ * Note: `myGeometry.normalize()` only works when called in the
+ * setup() function.
+ *
+ * @method normalize
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * let myGeometry;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a very small torus.
+ * beginGeometry();
+ * torus(1, 0.25);
+ * myGeometry = endGeometry();
+ *
+ * // Normalize the torus so its vertices fill
+ * // the range [-100, 100].
+ * myGeometry.normalize();
+ *
+ * describe('A white torus rotates slowly against a dark gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ *
+ * // Style the torus.
+ * noStroke();
+ *
+ * // Draw the torus.
+ * model(myGeometry);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'normalize',
+ value: function normalize() {
+ if (this.vertices.length > 0) {
+ // Find the corners of our bounding box
+ var maxPosition = this.vertices[0].copy();
+ var minPosition = this.vertices[0].copy();
+ for (var i = 0; i < this.vertices.length; i++) {
+ maxPosition.x = Math.max(maxPosition.x, this.vertices[i].x);
+ minPosition.x = Math.min(minPosition.x, this.vertices[i].x);
+ maxPosition.y = Math.max(maxPosition.y, this.vertices[i].y);
+ minPosition.y = Math.min(minPosition.y, this.vertices[i].y);
+ maxPosition.z = Math.max(maxPosition.z, this.vertices[i].z);
+ minPosition.z = Math.min(minPosition.z, this.vertices[i].z);
+ }
+ var center = _main.default.Vector.lerp(maxPosition, minPosition, 0.5);
+ var dist = _main.default.Vector.sub(maxPosition, minPosition);
+ var longestDist = Math.max(Math.max(dist.x, dist.y), dist.z);
+ var scale = 200 / longestDist;
+ for (var _i5 = 0; _i5 < this.vertices.length; _i5++) {
+ this.vertices[_i5].sub(center);
+ this.vertices[_i5].mult(scale);
+ }
+ }
+ return this;
+ }
+ }
+ ]);
+ return Geometry;
+ }();
+ var _default = _main.default.Geometry;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.flat': 177,
+ 'core-js/modules/es.array.for-each': 178,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.unscopables.flat': 190,
+ 'core-js/modules/es.map': 192,
+ 'core-js/modules/es.number.constructor': 196,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.set': 212,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.sub': 223,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.for-each': 260,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 356: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @requires constants
+ * @todo see methods below needing further implementation.
+ * future consideration: implement SIMD optimizations
+ * when browser compatibility becomes available
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/
+ * Reference/Global_Objects/SIMD
+ */
+
+ var GLMAT_ARRAY_TYPE = Array;
+ var isMatrixArray = function isMatrixArray(x) {
+ return Array.isArray(x);
+ };
+ if (typeof Float32Array !== 'undefined') {
+ GLMAT_ARRAY_TYPE = Float32Array;
+ isMatrixArray = function isMatrixArray(x) {
+ return Array.isArray(x) || x instanceof Float32Array;
+ };
+ } /**
+ * A class to describe a 4×4 matrix
+ * for model and view matrix manipulation in the p5js webgl renderer.
+ * @class p5.Matrix
+ * @private
+ * @constructor
+ * @param {Array} [mat4] column-major array literal of our 4×4 matrix
+ */
+
+ _main.default.Matrix = /*#__PURE__*/ function () {
+ function _class() {
+ var _ref;
+ _classCallCheck(this, _class);
+ // This is default behavior when object
+ // instantiated using createMatrix()
+ // @todo implement createMatrix() in core/math.js
+ if (arguments.length && (_ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref]) instanceof _main.default) {
+ var _ref2;
+ this.p5 = (_ref2 = arguments.length - 1, _ref2 < 0 || arguments.length <= _ref2 ? undefined : arguments[_ref2]);
+ }
+ if ((arguments.length <= 0 ? undefined : arguments[0]) === 'mat3') {
+ this.mat3 = Array.isArray(arguments.length <= 1 ? undefined : arguments[1]) ? arguments.length <= 1 ? undefined : arguments[1] : new GLMAT_ARRAY_TYPE([1,
+ 0,
+ 0,
+ 0,
+ 1,
+ 0,
+ 0,
+ 0,
+ 1]);
+ } else {
+ this.mat4 = Array.isArray(arguments.length <= 0 ? undefined : arguments[0]) ? arguments.length <= 0 ? undefined : arguments[0] : new GLMAT_ARRAY_TYPE([1,
+ 0,
+ 0,
+ 0,
+ 0,
+ 1,
+ 0,
+ 0,
+ 0,
+ 0,
+ 1,
+ 0,
+ 0,
+ 0,
+ 0,
+ 1]);
+ }
+ return this;
+ } /**
+ * Replace the entire contents of a 4x4 matrix.
+ * If providing an array or a p5.Matrix, the values will be copied without
+ * referencing the source object.
+ * Can also provide 16 numbers as individual arguments.
+ *
+ * @method set
+ * @param {p5.Matrix|Float32Array|Number[]} [inMatrix] the input p5.Matrix or
+ * an Array of length 16
+ * @chainable
+ */
+ /**
+ * @method set
+ * @param {Number[]} elements 16 numbers passed by value to avoid
+ * array copying.
+ * @chainable
+ */
+
+ _createClass(_class, [
+ {
+ key: 'set',
+ value: function set(inMatrix) {
+ var refArray = arguments;
+ if (inMatrix instanceof _main.default.Matrix) {
+ refArray = inMatrix.mat4;
+ } else if (isMatrixArray(inMatrix)) {
+ refArray = inMatrix;
+ }
+ if (refArray.length !== 16) {
+ _main.default._friendlyError('Expected 16 values but received '.concat(refArray.length, '.'), 'p5.Matrix.set');
+ return this;
+ }
+ for (var i = 0; i < 16; i++) {
+ this.mat4[i] = refArray[i];
+ }
+ return this;
+ } /**
+ * Gets a copy of the vector, returns a p5.Matrix object.
+ *
+ * @method get
+ * @return {p5.Matrix} the copy of the p5.Matrix object
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get() {
+ return new _main.default.Matrix(this.mat4, this.p5);
+ } /**
+ * return a copy of this matrix.
+ * If this matrix is 4x4, a 4x4 matrix with exactly the same entries will be
+ * generated. The same is true if this matrix is 3x3.
+ *
+ * @method copy
+ * @return {p5.Matrix} the result matrix
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ if (this.mat3 !== undefined) {
+ var copied3x3 = new _main.default.Matrix('mat3', this.p5);
+ copied3x3.mat3[0] = this.mat3[0];
+ copied3x3.mat3[1] = this.mat3[1];
+ copied3x3.mat3[2] = this.mat3[2];
+ copied3x3.mat3[3] = this.mat3[3];
+ copied3x3.mat3[4] = this.mat3[4];
+ copied3x3.mat3[5] = this.mat3[5];
+ copied3x3.mat3[6] = this.mat3[6];
+ copied3x3.mat3[7] = this.mat3[7];
+ copied3x3.mat3[8] = this.mat3[8];
+ return copied3x3;
+ }
+ var copied = new _main.default.Matrix(this.p5);
+ copied.mat4[0] = this.mat4[0];
+ copied.mat4[1] = this.mat4[1];
+ copied.mat4[2] = this.mat4[2];
+ copied.mat4[3] = this.mat4[3];
+ copied.mat4[4] = this.mat4[4];
+ copied.mat4[5] = this.mat4[5];
+ copied.mat4[6] = this.mat4[6];
+ copied.mat4[7] = this.mat4[7];
+ copied.mat4[8] = this.mat4[8];
+ copied.mat4[9] = this.mat4[9];
+ copied.mat4[10] = this.mat4[10];
+ copied.mat4[11] = this.mat4[11];
+ copied.mat4[12] = this.mat4[12];
+ copied.mat4[13] = this.mat4[13];
+ copied.mat4[14] = this.mat4[14];
+ copied.mat4[15] = this.mat4[15];
+ return copied;
+ } /**
+ * return an identity matrix
+ * @method identity
+ * @return {p5.Matrix} the result matrix
+ */
+
+ },
+ {
+ key: 'transpose',
+ /**
+ * transpose according to a given matrix
+ * @method transpose
+ * @param {p5.Matrix|Float32Array|Number[]} a the matrix to be
+ * based on to transpose
+ * @chainable
+ */
+ value: function transpose(a) {
+ var a01,
+ a02,
+ a03,
+ a12,
+ a13,
+ a23;
+ if (a instanceof _main.default.Matrix) {
+ a01 = a.mat4[1];
+ a02 = a.mat4[2];
+ a03 = a.mat4[3];
+ a12 = a.mat4[6];
+ a13 = a.mat4[7];
+ a23 = a.mat4[11];
+ this.mat4[0] = a.mat4[0];
+ this.mat4[1] = a.mat4[4];
+ this.mat4[2] = a.mat4[8];
+ this.mat4[3] = a.mat4[12];
+ this.mat4[4] = a01;
+ this.mat4[5] = a.mat4[5];
+ this.mat4[6] = a.mat4[9];
+ this.mat4[7] = a.mat4[13];
+ this.mat4[8] = a02;
+ this.mat4[9] = a12;
+ this.mat4[10] = a.mat4[10];
+ this.mat4[11] = a.mat4[14];
+ this.mat4[12] = a03;
+ this.mat4[13] = a13;
+ this.mat4[14] = a23;
+ this.mat4[15] = a.mat4[15];
+ } else if (isMatrixArray(a)) {
+ a01 = a[1];
+ a02 = a[2];
+ a03 = a[3];
+ a12 = a[6];
+ a13 = a[7];
+ a23 = a[11];
+ this.mat4[0] = a[0];
+ this.mat4[1] = a[4];
+ this.mat4[2] = a[8];
+ this.mat4[3] = a[12];
+ this.mat4[4] = a01;
+ this.mat4[5] = a[5];
+ this.mat4[6] = a[9];
+ this.mat4[7] = a[13];
+ this.mat4[8] = a02;
+ this.mat4[9] = a12;
+ this.mat4[10] = a[10];
+ this.mat4[11] = a[14];
+ this.mat4[12] = a03;
+ this.mat4[13] = a13;
+ this.mat4[14] = a23;
+ this.mat4[15] = a[15];
+ }
+ return this;
+ } /**
+ * invert matrix according to a give matrix
+ * @method invert
+ * @param {p5.Matrix|Float32Array|Number[]} a the matrix to be
+ * based on to invert
+ * @chainable
+ */
+
+ },
+ {
+ key: 'invert',
+ value: function invert(a) {
+ var a00,
+ a01,
+ a02,
+ a03,
+ a10,
+ a11,
+ a12,
+ a13;
+ var a20,
+ a21,
+ a22,
+ a23,
+ a30,
+ a31,
+ a32,
+ a33;
+ if (a instanceof _main.default.Matrix) {
+ a00 = a.mat4[0];
+ a01 = a.mat4[1];
+ a02 = a.mat4[2];
+ a03 = a.mat4[3];
+ a10 = a.mat4[4];
+ a11 = a.mat4[5];
+ a12 = a.mat4[6];
+ a13 = a.mat4[7];
+ a20 = a.mat4[8];
+ a21 = a.mat4[9];
+ a22 = a.mat4[10];
+ a23 = a.mat4[11];
+ a30 = a.mat4[12];
+ a31 = a.mat4[13];
+ a32 = a.mat4[14];
+ a33 = a.mat4[15];
+ } else if (isMatrixArray(a)) {
+ a00 = a[0];
+ a01 = a[1];
+ a02 = a[2];
+ a03 = a[3];
+ a10 = a[4];
+ a11 = a[5];
+ a12 = a[6];
+ a13 = a[7];
+ a20 = a[8];
+ a21 = a[9];
+ a22 = a[10];
+ a23 = a[11];
+ a30 = a[12];
+ a31 = a[13];
+ a32 = a[14];
+ a33 = a[15];
+ }
+ var b00 = a00 * a11 - a01 * a10;
+ var b01 = a00 * a12 - a02 * a10;
+ var b02 = a00 * a13 - a03 * a10;
+ var b03 = a01 * a12 - a02 * a11;
+ var b04 = a01 * a13 - a03 * a11;
+ var b05 = a02 * a13 - a03 * a12;
+ var b06 = a20 * a31 - a21 * a30;
+ var b07 = a20 * a32 - a22 * a30;
+ var b08 = a20 * a33 - a23 * a30;
+ var b09 = a21 * a32 - a22 * a31;
+ var b10 = a21 * a33 - a23 * a31;
+ var b11 = a22 * a33 - a23 * a32;
+ // Calculate the determinant
+ var det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
+ if (!det) {
+ return null;
+ }
+ det = 1 / det;
+ this.mat4[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
+ this.mat4[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
+ this.mat4[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
+ this.mat4[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
+ this.mat4[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
+ this.mat4[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
+ this.mat4[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
+ this.mat4[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
+ this.mat4[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
+ this.mat4[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
+ this.mat4[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
+ this.mat4[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
+ this.mat4[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
+ this.mat4[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
+ this.mat4[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
+ this.mat4[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
+ return this;
+ } /**
+ * Inverts a 3×3 matrix
+ * @method invert3x3
+ * @chainable
+ */
+
+ },
+ {
+ key: 'invert3x3',
+ value: function invert3x3() {
+ var a00 = this.mat3[0];
+ var a01 = this.mat3[1];
+ var a02 = this.mat3[2];
+ var a10 = this.mat3[3];
+ var a11 = this.mat3[4];
+ var a12 = this.mat3[5];
+ var a20 = this.mat3[6];
+ var a21 = this.mat3[7];
+ var a22 = this.mat3[8];
+ var b01 = a22 * a11 - a12 * a21;
+ var b11 = - a22 * a10 + a12 * a20;
+ var b21 = a21 * a10 - a11 * a20;
+ // Calculate the determinant
+ var det = a00 * b01 + a01 * b11 + a02 * b21;
+ if (!det) {
+ return null;
+ }
+ det = 1 / det;
+ this.mat3[0] = b01 * det;
+ this.mat3[1] = ( - a22 * a01 + a02 * a21) * det;
+ this.mat3[2] = (a12 * a01 - a02 * a11) * det;
+ this.mat3[3] = b11 * det;
+ this.mat3[4] = (a22 * a00 - a02 * a20) * det;
+ this.mat3[5] = ( - a12 * a00 + a02 * a10) * det;
+ this.mat3[6] = b21 * det;
+ this.mat3[7] = ( - a21 * a00 + a01 * a20) * det;
+ this.mat3[8] = (a11 * a00 - a01 * a10) * det;
+ return this;
+ } /**
+ * This function is only for 3x3 matrices.
+ * transposes a 3×3 p5.Matrix by a mat3
+ * If there is an array of arguments, the matrix obtained by transposing
+ * the 3x3 matrix generated based on that array is set.
+ * If no arguments, it transposes itself and returns it.
+ *
+ * @method transpose3x3
+ * @param {Number[]} mat3 1-dimensional array
+ * @chainable
+ */
+
+ },
+ {
+ key: 'transpose3x3',
+ value: function transpose3x3(mat3) {
+ if (mat3 === undefined) {
+ mat3 = this.mat3;
+ }
+ var a01 = mat3[1];
+ var a02 = mat3[2];
+ var a12 = mat3[5];
+ this.mat3[0] = mat3[0];
+ this.mat3[1] = mat3[3];
+ this.mat3[2] = mat3[6];
+ this.mat3[3] = a01;
+ this.mat3[4] = mat3[4];
+ this.mat3[5] = mat3[7];
+ this.mat3[6] = a02;
+ this.mat3[7] = a12;
+ this.mat3[8] = mat3[8];
+ return this;
+ } /**
+ * converts a 4×4 matrix to its 3×3 inverse transform
+ * commonly used in MVMatrix to NMatrix conversions.
+ * @method invertTranspose
+ * @param {p5.Matrix} mat4 the matrix to be based on to invert
+ * @chainable
+ * @todo finish implementation
+ */
+
+ },
+ {
+ key: 'inverseTranspose',
+ value: function inverseTranspose(_ref3) {
+ var mat4 = _ref3.mat4;
+ if (this.mat3 === undefined) {
+ _main.default._friendlyError('sorry, this function only works with mat3');
+ } else {
+ //convert mat4 -> mat3
+ this.mat3[0] = mat4[0];
+ this.mat3[1] = mat4[1];
+ this.mat3[2] = mat4[2];
+ this.mat3[3] = mat4[4];
+ this.mat3[4] = mat4[5];
+ this.mat3[5] = mat4[6];
+ this.mat3[6] = mat4[8];
+ this.mat3[7] = mat4[9];
+ this.mat3[8] = mat4[10];
+ }
+ var inverse = this.invert3x3();
+ // check inverse succeeded
+ if (inverse) {
+ inverse.transpose3x3(this.mat3);
+ } else {
+ // in case of singularity, just zero the matrix
+ for (var i = 0; i < 9; i++) {
+ this.mat3[i] = 0;
+ }
+ }
+ return this;
+ } /**
+ * inspired by Toji's mat4 determinant
+ * @method determinant
+ * @return {Number} Determinant of our 4×4 matrix
+ */
+
+ },
+ {
+ key: 'determinant',
+ value: function determinant() {
+ var d00 = this.mat4[0] * this.mat4[5] - this.mat4[1] * this.mat4[4],
+ d01 = this.mat4[0] * this.mat4[6] - this.mat4[2] * this.mat4[4],
+ d02 = this.mat4[0] * this.mat4[7] - this.mat4[3] * this.mat4[4],
+ d03 = this.mat4[1] * this.mat4[6] - this.mat4[2] * this.mat4[5],
+ d04 = this.mat4[1] * this.mat4[7] - this.mat4[3] * this.mat4[5],
+ d05 = this.mat4[2] * this.mat4[7] - this.mat4[3] * this.mat4[6],
+ d06 = this.mat4[8] * this.mat4[13] - this.mat4[9] * this.mat4[12],
+ d07 = this.mat4[8] * this.mat4[14] - this.mat4[10] * this.mat4[12],
+ d08 = this.mat4[8] * this.mat4[15] - this.mat4[11] * this.mat4[12],
+ d09 = this.mat4[9] * this.mat4[14] - this.mat4[10] * this.mat4[13],
+ d10 = this.mat4[9] * this.mat4[15] - this.mat4[11] * this.mat4[13],
+ d11 = this.mat4[10] * this.mat4[15] - this.mat4[11] * this.mat4[14];
+ // Calculate the determinant
+ return d00 * d11 - d01 * d10 + d02 * d09 + d03 * d08 - d04 * d07 + d05 * d06;
+ } /**
+ * multiply two mat4s
+ * @method mult
+ * @param {p5.Matrix|Float32Array|Number[]} multMatrix The matrix
+ * we want to multiply by
+ * @chainable
+ */
+
+ },
+ {
+ key: 'mult',
+ value: function mult(multMatrix) {
+ var _src;
+ if (multMatrix === this || multMatrix === this.mat4) {
+ _src = this.copy().mat4; // only need to allocate in this rare case
+ } else if (multMatrix instanceof _main.default.Matrix) {
+ _src = multMatrix.mat4;
+ } else if (isMatrixArray(multMatrix)) {
+ _src = multMatrix;
+ } else if (arguments.length === 16) {
+ _src = arguments;
+ } else {
+ return; // nothing to do.
+ } // each row is used for the multiplier
+
+ var b0 = this.mat4[0],
+ b1 = this.mat4[1],
+ b2 = this.mat4[2],
+ b3 = this.mat4[3];
+ this.mat4[0] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[1] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[2] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[3] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+ b0 = this.mat4[4];
+ b1 = this.mat4[5];
+ b2 = this.mat4[6];
+ b3 = this.mat4[7];
+ this.mat4[4] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[5] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[6] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[7] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+ b0 = this.mat4[8];
+ b1 = this.mat4[9];
+ b2 = this.mat4[10];
+ b3 = this.mat4[11];
+ this.mat4[8] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[9] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[10] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[11] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+ b0 = this.mat4[12];
+ b1 = this.mat4[13];
+ b2 = this.mat4[14];
+ b3 = this.mat4[15];
+ this.mat4[12] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[13] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[14] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[15] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+ return this;
+ }
+ },
+ {
+ key: 'apply',
+ value: function apply(multMatrix) {
+ var _src;
+ if (multMatrix === this || multMatrix === this.mat4) {
+ _src = this.copy().mat4; // only need to allocate in this rare case
+ } else if (multMatrix instanceof _main.default.Matrix) {
+ _src = multMatrix.mat4;
+ } else if (isMatrixArray(multMatrix)) {
+ _src = multMatrix;
+ } else if (arguments.length === 16) {
+ _src = arguments;
+ } else {
+ return; // nothing to do.
+ }
+ var mat4 = this.mat4;
+ // each row is used for the multiplier
+ var m0 = mat4[0];
+ var m4 = mat4[4];
+ var m8 = mat4[8];
+ var m12 = mat4[12];
+ mat4[0] = _src[0] * m0 + _src[1] * m4 + _src[2] * m8 + _src[3] * m12;
+ mat4[4] = _src[4] * m0 + _src[5] * m4 + _src[6] * m8 + _src[7] * m12;
+ mat4[8] = _src[8] * m0 + _src[9] * m4 + _src[10] * m8 + _src[11] * m12;
+ mat4[12] = _src[12] * m0 + _src[13] * m4 + _src[14] * m8 + _src[15] * m12;
+ var m1 = mat4[1];
+ var m5 = mat4[5];
+ var m9 = mat4[9];
+ var m13 = mat4[13];
+ mat4[1] = _src[0] * m1 + _src[1] * m5 + _src[2] * m9 + _src[3] * m13;
+ mat4[5] = _src[4] * m1 + _src[5] * m5 + _src[6] * m9 + _src[7] * m13;
+ mat4[9] = _src[8] * m1 + _src[9] * m5 + _src[10] * m9 + _src[11] * m13;
+ mat4[13] = _src[12] * m1 + _src[13] * m5 + _src[14] * m9 + _src[15] * m13;
+ var m2 = mat4[2];
+ var m6 = mat4[6];
+ var m10 = mat4[10];
+ var m14 = mat4[14];
+ mat4[2] = _src[0] * m2 + _src[1] * m6 + _src[2] * m10 + _src[3] * m14;
+ mat4[6] = _src[4] * m2 + _src[5] * m6 + _src[6] * m10 + _src[7] * m14;
+ mat4[10] = _src[8] * m2 + _src[9] * m6 + _src[10] * m10 + _src[11] * m14;
+ mat4[14] = _src[12] * m2 + _src[13] * m6 + _src[14] * m10 + _src[15] * m14;
+ var m3 = mat4[3];
+ var m7 = mat4[7];
+ var m11 = mat4[11];
+ var m15 = mat4[15];
+ mat4[3] = _src[0] * m3 + _src[1] * m7 + _src[2] * m11 + _src[3] * m15;
+ mat4[7] = _src[4] * m3 + _src[5] * m7 + _src[6] * m11 + _src[7] * m15;
+ mat4[11] = _src[8] * m3 + _src[9] * m7 + _src[10] * m11 + _src[11] * m15;
+ mat4[15] = _src[12] * m3 + _src[13] * m7 + _src[14] * m11 + _src[15] * m15;
+ return this;
+ } /**
+ * scales a p5.Matrix by scalars or a vector
+ * @method scale
+ * @param {p5.Vector|Float32Array|Number[]} s vector to scale by
+ * @chainable
+ */
+
+ },
+ {
+ key: 'scale',
+ value: function scale(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ // x is a vector, extract the components from it.
+ y = x.y;
+ z = x.z;
+ x = x.x; // must be last
+ } else if (x instanceof Array) {
+ // x is an array, extract the components from it.
+ y = x[1];
+ z = x[2];
+ x = x[0]; // must be last
+ }
+ this.mat4[0] *= x;
+ this.mat4[1] *= x;
+ this.mat4[2] *= x;
+ this.mat4[3] *= x;
+ this.mat4[4] *= y;
+ this.mat4[5] *= y;
+ this.mat4[6] *= y;
+ this.mat4[7] *= y;
+ this.mat4[8] *= z;
+ this.mat4[9] *= z;
+ this.mat4[10] *= z;
+ this.mat4[11] *= z;
+ return this;
+ } /**
+ * rotate our Matrix around an axis by the given angle.
+ * @method rotate
+ * @param {Number} a The angle of rotation in radians
+ * @param {p5.Vector|Number[]} axis the axis(es) to rotate around
+ * @chainable
+ * inspired by Toji's gl-matrix lib, mat4 rotation
+ */
+
+ },
+ {
+ key: 'rotate',
+ value: function rotate(a, x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ // x is a vector, extract the components from it.
+ y = x.y;
+ z = x.z;
+ x = x.x; //must be last
+ } else if (x instanceof Array) {
+ // x is an array, extract the components from it.
+ y = x[1];
+ z = x[2];
+ x = x[0]; //must be last
+ }
+ var len = Math.sqrt(x * x + y * y + z * z);
+ x *= 1 / len;
+ y *= 1 / len;
+ z *= 1 / len;
+ var a00 = this.mat4[0];
+ var a01 = this.mat4[1];
+ var a02 = this.mat4[2];
+ var a03 = this.mat4[3];
+ var a10 = this.mat4[4];
+ var a11 = this.mat4[5];
+ var a12 = this.mat4[6];
+ var a13 = this.mat4[7];
+ var a20 = this.mat4[8];
+ var a21 = this.mat4[9];
+ var a22 = this.mat4[10];
+ var a23 = this.mat4[11];
+ //sin,cos, and tan of respective angle
+ var sA = Math.sin(a);
+ var cA = Math.cos(a);
+ var tA = 1 - cA;
+ // Construct the elements of the rotation matrix
+ var b00 = x * x * tA + cA;
+ var b01 = y * x * tA + z * sA;
+ var b02 = z * x * tA - y * sA;
+ var b10 = x * y * tA - z * sA;
+ var b11 = y * y * tA + cA;
+ var b12 = z * y * tA + x * sA;
+ var b20 = x * z * tA + y * sA;
+ var b21 = y * z * tA - x * sA;
+ var b22 = z * z * tA + cA;
+ // rotation-specific matrix multiplication
+ this.mat4[0] = a00 * b00 + a10 * b01 + a20 * b02;
+ this.mat4[1] = a01 * b00 + a11 * b01 + a21 * b02;
+ this.mat4[2] = a02 * b00 + a12 * b01 + a22 * b02;
+ this.mat4[3] = a03 * b00 + a13 * b01 + a23 * b02;
+ this.mat4[4] = a00 * b10 + a10 * b11 + a20 * b12;
+ this.mat4[5] = a01 * b10 + a11 * b11 + a21 * b12;
+ this.mat4[6] = a02 * b10 + a12 * b11 + a22 * b12;
+ this.mat4[7] = a03 * b10 + a13 * b11 + a23 * b12;
+ this.mat4[8] = a00 * b20 + a10 * b21 + a20 * b22;
+ this.mat4[9] = a01 * b20 + a11 * b21 + a21 * b22;
+ this.mat4[10] = a02 * b20 + a12 * b21 + a22 * b22;
+ this.mat4[11] = a03 * b20 + a13 * b21 + a23 * b22;
+ return this;
+ } /**
+ * @todo finish implementing this method!
+ * translates
+ * @method translate
+ * @param {Number[]} v vector to translate by
+ * @chainable
+ */
+
+ },
+ {
+ key: 'translate',
+ value: function translate(v) {
+ var x = v[0],
+ y = v[1],
+ z = v[2] || 0;
+ this.mat4[12] += this.mat4[0] * x + this.mat4[4] * y + this.mat4[8] * z;
+ this.mat4[13] += this.mat4[1] * x + this.mat4[5] * y + this.mat4[9] * z;
+ this.mat4[14] += this.mat4[2] * x + this.mat4[6] * y + this.mat4[10] * z;
+ this.mat4[15] += this.mat4[3] * x + this.mat4[7] * y + this.mat4[11] * z;
+ }
+ },
+ {
+ key: 'rotateX',
+ value: function rotateX(a) {
+ this.rotate(a, 1, 0, 0);
+ }
+ },
+ {
+ key: 'rotateY',
+ value: function rotateY(a) {
+ this.rotate(a, 0, 1, 0);
+ }
+ },
+ {
+ key: 'rotateZ',
+ value: function rotateZ(a) {
+ this.rotate(a, 0, 0, 1);
+ } /**
+ * sets the perspective matrix
+ * @method perspective
+ * @param {Number} fovy [description]
+ * @param {Number} aspect [description]
+ * @param {Number} near near clipping plane
+ * @param {Number} far far clipping plane
+ * @chainable
+ */
+
+ },
+ {
+ key: 'perspective',
+ value: function perspective(fovy, aspect, near, far) {
+ var f = 1 / Math.tan(fovy / 2),
+ nf = 1 / (near - far);
+ this.mat4[0] = f / aspect;
+ this.mat4[1] = 0;
+ this.mat4[2] = 0;
+ this.mat4[3] = 0;
+ this.mat4[4] = 0;
+ this.mat4[5] = f;
+ this.mat4[6] = 0;
+ this.mat4[7] = 0;
+ this.mat4[8] = 0;
+ this.mat4[9] = 0;
+ this.mat4[10] = (far + near) * nf;
+ this.mat4[11] = - 1;
+ this.mat4[12] = 0;
+ this.mat4[13] = 0;
+ this.mat4[14] = 2 * far * near * nf;
+ this.mat4[15] = 0;
+ return this;
+ } /**
+ * sets the ortho matrix
+ * @method ortho
+ * @param {Number} left [description]
+ * @param {Number} right [description]
+ * @param {Number} bottom [description]
+ * @param {Number} top [description]
+ * @param {Number} near near clipping plane
+ * @param {Number} far far clipping plane
+ * @chainable
+ */
+
+ },
+ {
+ key: 'ortho',
+ value: function ortho(left, right, bottom, top, near, far) {
+ var lr = 1 / (left - right),
+ bt = 1 / (bottom - top),
+ nf = 1 / (near - far);
+ this.mat4[0] = - 2 * lr;
+ this.mat4[1] = 0;
+ this.mat4[2] = 0;
+ this.mat4[3] = 0;
+ this.mat4[4] = 0;
+ this.mat4[5] = - 2 * bt;
+ this.mat4[6] = 0;
+ this.mat4[7] = 0;
+ this.mat4[8] = 0;
+ this.mat4[9] = 0;
+ this.mat4[10] = 2 * nf;
+ this.mat4[11] = 0;
+ this.mat4[12] = (left + right) * lr;
+ this.mat4[13] = (top + bottom) * bt;
+ this.mat4[14] = (far + near) * nf;
+ this.mat4[15] = 1;
+ return this;
+ } /**
+ * apply a matrix to a vector with x,y,z,w components
+ * get the results in the form of an array
+ * @method multiplyVec4
+ * @param {Number}
+ * @return {Number[]}
+ */
+
+ },
+ {
+ key: 'multiplyVec4',
+ value: function multiplyVec4(x, y, z, w) {
+ var result = new Array(4);
+ var m = this.mat4;
+ result[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
+ result[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
+ result[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
+ result[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
+ return result;
+ } /**
+ * Applies a matrix to a vector.
+ * The fourth component is set to 1.
+ * Returns a vector consisting of the first
+ * through third components of the result.
+ *
+ * @method multiplyPoint
+ * @param {p5.Vector}
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'multiplyPoint',
+ value: function multiplyPoint(_ref4) {
+ var x = _ref4.x,
+ y = _ref4.y,
+ z = _ref4.z;
+ var array = this.multiplyVec4(x, y, z, 1);
+ return new _main.default.Vector(array[0], array[1], array[2]);
+ } /**
+ * Applies a matrix to a vector.
+ * The fourth component is set to 1.
+ * Returns the result of dividing the 1st to 3rd components
+ * of the result by the 4th component as a vector.
+ *
+ * @method multiplyAndNormalizePoint
+ * @param {p5.Vector}
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'multiplyAndNormalizePoint',
+ value: function multiplyAndNormalizePoint(_ref5) {
+ var x = _ref5.x,
+ y = _ref5.y,
+ z = _ref5.z;
+ var array = this.multiplyVec4(x, y, z, 1);
+ array[0] /= array[3];
+ array[1] /= array[3];
+ array[2] /= array[3];
+ return new _main.default.Vector(array[0], array[1], array[2]);
+ } /**
+ * Applies a matrix to a vector.
+ * The fourth component is set to 0.
+ * Returns a vector consisting of the first
+ * through third components of the result.
+ *
+ * @method multiplyDirection
+ * @param {p5.Vector}
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'multiplyDirection',
+ value: function multiplyDirection(_ref6) {
+ var x = _ref6.x,
+ y = _ref6.y,
+ z = _ref6.z;
+ var array = this.multiplyVec4(x, y, z, 0);
+ return new _main.default.Vector(array[0], array[1], array[2]);
+ } /**
+ * This function is only for 3x3 matrices.
+ * multiply two mat3s. It is an operation to multiply the 3x3 matrix of
+ * the argument from the right. Arguments can be a 3x3 p5.Matrix,
+ * a Float32Array of length 9, or a javascript array of length 9.
+ * In addition, it can also be done by enumerating 9 numbers.
+ *
+ * @method mult3x3
+ * @param {p5.Matrix|Float32Array|Number[]} multMatrix The matrix
+ * we want to multiply by
+ * @chainable
+ */
+
+ },
+ {
+ key: 'mult3x3',
+ value: function mult3x3(multMatrix) {
+ var _src;
+ if (multMatrix === this || multMatrix === this.mat3) {
+ _src = this.copy().mat3; // only need to allocate in this rare case
+ } else if (multMatrix instanceof _main.default.Matrix) {
+ _src = multMatrix.mat3;
+ } else if (isMatrixArray(multMatrix)) {
+ _src = multMatrix;
+ } else if (arguments.length === 9) {
+ _src = arguments;
+ } else {
+ return; // nothing to do.
+ } // each row is used for the multiplier
+
+ var b0 = this.mat3[0];
+ var b1 = this.mat3[1];
+ var b2 = this.mat3[2];
+ this.mat3[0] = b0 * _src[0] + b1 * _src[3] + b2 * _src[6];
+ this.mat3[1] = b0 * _src[1] + b1 * _src[4] + b2 * _src[7];
+ this.mat3[2] = b0 * _src[2] + b1 * _src[5] + b2 * _src[8];
+ b0 = this.mat3[3];
+ b1 = this.mat3[4];
+ b2 = this.mat3[5];
+ this.mat3[3] = b0 * _src[0] + b1 * _src[3] + b2 * _src[6];
+ this.mat3[4] = b0 * _src[1] + b1 * _src[4] + b2 * _src[7];
+ this.mat3[5] = b0 * _src[2] + b1 * _src[5] + b2 * _src[8];
+ b0 = this.mat3[6];
+ b1 = this.mat3[7];
+ b2 = this.mat3[8];
+ this.mat3[6] = b0 * _src[0] + b1 * _src[3] + b2 * _src[6];
+ this.mat3[7] = b0 * _src[1] + b1 * _src[4] + b2 * _src[7];
+ this.mat3[8] = b0 * _src[2] + b1 * _src[5] + b2 * _src[8];
+ return this;
+ } /**
+ * This function is only for 3x3 matrices.
+ * A function that returns a column vector of a 3x3 matrix.
+ *
+ * @method column
+ * @param {Number} columnIndex matrix column number
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'column',
+ value: function column(columnIndex) {
+ return new _main.default.Vector(this.mat3[3 * columnIndex], this.mat3[3 * columnIndex + 1], this.mat3[3 * columnIndex + 2]);
+ } /**
+ * This function is only for 3x3 matrices.
+ * A function that returns a row vector of a 3x3 matrix.
+ *
+ * @method row
+ * @param {Number} rowIndex matrix row number
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'row',
+ value: function row(rowIndex) {
+ return new _main.default.Vector(this.mat3[rowIndex], this.mat3[rowIndex + 3], this.mat3[rowIndex + 6]);
+ } /**
+ * Returns the diagonal elements of the matrix in the form of an array.
+ * A 3x3 matrix will return an array of length 3.
+ * A 4x4 matrix will return an array of length 4.
+ *
+ * @method diagonal
+ * @return {Number[]} An array obtained by arranging the diagonal elements
+ * of the matrix in ascending order of index
+ */
+
+ },
+ {
+ key: 'diagonal',
+ value: function diagonal() {
+ if (this.mat3 !== undefined) {
+ return [this.mat3[0],
+ this.mat3[4],
+ this.mat3[8]];
+ }
+ return [this.mat4[0],
+ this.mat4[5],
+ this.mat4[10],
+ this.mat4[15]];
+ } /**
+ * This function is only for 3x3 matrices.
+ * Takes a vector and returns the vector resulting from multiplying to
+ * that vector by this matrix from left.
+ *
+ * @method multiplyVec3
+ * @param {p5.Vector} multVector the vector to which this matrix applies
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'multiplyVec3',
+ value: function multiplyVec3(multVector, target) {
+ if (target === undefined) {
+ target = multVector.copy();
+ }
+ target.x = this.row(0).dot(multVector);
+ target.y = this.row(1).dot(multVector);
+ target.z = this.row(2).dot(multVector);
+ return target;
+ } /**
+ * This function is only for 4x4 matrices.
+ * Creates a 3x3 matrix whose entries are the top left 3x3 part and returns it.
+ *
+ * @method createSubMatrix3x3
+ * @return {p5.Matrix}
+ */
+
+ },
+ {
+ key: 'createSubMatrix3x3',
+ value: function createSubMatrix3x3() {
+ var result = new _main.default.Matrix('mat3');
+ result.mat3[0] = this.mat4[0];
+ result.mat3[1] = this.mat4[1];
+ result.mat3[2] = this.mat4[2];
+ result.mat3[3] = this.mat4[4];
+ result.mat3[4] = this.mat4[5];
+ result.mat3[5] = this.mat4[6];
+ result.mat3[6] = this.mat4[8];
+ result.mat3[7] = this.mat4[9];
+ result.mat3[8] = this.mat4[10];
+ return result;
+ } /**
+ * PRIVATE
+ */
+ // matrix methods adapted from:
+ // https://developer.mozilla.org/en-US/docs/Web/WebGL/
+ // gluPerspective
+ //
+ // function _makePerspective(fovy, aspect, znear, zfar){
+ // const ymax = znear * Math.tan(fovy * Math.PI / 360.0);
+ // const ymin = -ymax;
+ // const xmin = ymin * aspect;
+ // const xmax = ymax * aspect;
+ // return _makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
+ // }
+ ////
+ //// glFrustum
+ ////
+ //function _makeFrustum(left, right, bottom, top, znear, zfar){
+ // const X = 2*znear/(right-left);
+ // const Y = 2*znear/(top-bottom);
+ // const A = (right+left)/(right-left);
+ // const B = (top+bottom)/(top-bottom);
+ // const C = -(zfar+znear)/(zfar-znear);
+ // const D = -2*zfar*znear/(zfar-znear);
+ // const frustrumMatrix =[
+ // X, 0, A, 0,
+ // 0, Y, B, 0,
+ // 0, 0, C, D,
+ // 0, 0, -1, 0
+ //];
+ //return frustrumMatrix;
+ // }
+ // function _setMVPMatrices(){
+ ////an identity matrix
+ ////@TODO use the p5.Matrix class to abstract away our MV matrices and
+ ///other math
+ //const _mvMatrix =
+ //[
+ // 1.0,0.0,0.0,0.0,
+ // 0.0,1.0,0.0,0.0,
+ // 0.0,0.0,1.0,0.0,
+ // 0.0,0.0,0.0,1.0
+ //];
+
+ }
+ ], [
+ {
+ key: 'identity',
+ value: function identity(pInst) {
+ return new _main.default.Matrix(pInst);
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Matrix;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.float32-array': 234,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254
+ }
+ ],
+ 357: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.map');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ _main.default.RenderBuffer = /*#__PURE__*/ function () {
+ function _class(size, src, dst, attr, renderer, map) {
+ _classCallCheck(this, _class);
+ this.size = size; // the number of FLOATs in each vertex
+ this.src = src; // the name of the model's source array
+ this.dst = dst; // the name of the geometry's buffer
+ this.attr = attr; // the name of the vertex attribute
+ this._renderer = renderer;
+ this.map = map; // optional, a transformation function to apply to src
+ } /**
+ * Enables and binds the buffers used by shader when the appropriate data exists in geometry.
+ * Must always be done prior to drawing geometry in WebGL.
+ * @param {p5.Geometry} geometry Geometry that is going to be drawn
+ * @param {p5.Shader} shader Active shader
+ * @private
+ */
+
+ _createClass(_class, [
+ {
+ key: '_prepareBuffer',
+ value: function _prepareBuffer(geometry, shader) {
+ var attributes = shader.attributes;
+ var gl = this._renderer.GL;
+ var model;
+ if (geometry.model) {
+ model = geometry.model;
+ } else {
+ model = geometry;
+ } // loop through each of the buffer definitions
+
+ var attr = attributes[this.attr];
+ if (!attr) {
+ return;
+ } // check if the model has the appropriate source array
+
+ var buffer = geometry[this.dst];
+ var src = model[this.src];
+ if (src.length > 0) {
+ // check if we need to create the GL buffer
+ var createBuffer = !buffer;
+ if (createBuffer) {
+ // create and remember the buffer
+ geometry[this.dst] = buffer = gl.createBuffer();
+ } // bind the buffer
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ // check if we need to fill the buffer with data
+ if (createBuffer || model.dirtyFlags[this.src] !== false) {
+ var map = this.map;
+ // get the values from the model, possibly transformed
+ var values = map ? map(src) : src;
+ // fill the buffer with the values
+ this._renderer._bindBuffer(buffer, gl.ARRAY_BUFFER, values);
+ // mark the model's source array as clean
+ model.dirtyFlags[this.src] = false;
+ } // enable the attribute
+
+ shader.enableAttrib(attr, this.size);
+ } else {
+ var loc = attr.location;
+ if (loc === - 1 || !this._renderer.registerEnabled.has(loc)) {
+ return;
+ } // Disable register corresponding to unused attribute
+
+ gl.disableVertexAttribArray(loc);
+ // Record register availability
+ this._renderer.registerEnabled.delete(loc);
+ }
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.RenderBuffer;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.map': 185
+ }
+ ],
+ 358: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.find-index');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.find-index');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.RenderBuffer');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * Welcome to RendererGL Immediate Mode.
+ * Immediate mode is used for drawing custom shapes
+ * from a set of vertices. Immediate Mode is activated
+ * when you call beginShape() & de-activated when you call endShape().
+ * Immediate mode is a style of programming borrowed
+ * from OpenGL's (now-deprecated) immediate mode.
+ * It differs from p5.js' default, Retained Mode, which caches
+ * geometries and buffers on the CPU to reduce the number of webgl
+ * draw calls. Retained mode is more efficient & performative,
+ * however, Immediate Mode is useful for sketching quick
+ * geometric ideas.
+ */
+ /**
+ * Begin shape drawing. This is a helpful way of generating
+ * custom shapes quickly. However in WEBGL mode, application
+ * performance will likely drop as a result of too many calls to
+ * beginShape() / endShape(). As a high performance alternative,
+ * please use p5.js geometry primitives.
+ * @private
+ * @method beginShape
+ * @param {Number} mode webgl primitives mode. beginShape supports the
+ * following modes:
+ * POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,
+ * TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP,
+ * and TESS(WEBGL only)
+ * @chainable
+ */
+
+ _main.default.RendererGL.prototype.beginShape = function (mode) {
+ this.immediateMode.shapeMode = mode !== undefined ? mode : constants.TESS;
+ this.immediateMode.geometry.reset();
+ this.immediateMode.contourIndices = [
+ ];
+ return this;
+ };
+ var immediateBufferStrides = {
+ vertices: 1,
+ vertexNormals: 1,
+ vertexColors: 4,
+ vertexStrokeColors: 4,
+ uvs: 2
+ };
+ _main.default.RendererGL.prototype.beginContour = function () {
+ if (this.immediateMode.shapeMode !== constants.TESS) {
+ throw new Error('WebGL mode can only use contours with beginShape(TESS).');
+ }
+ this.immediateMode.contourIndices.push(this.immediateMode.geometry.vertices.length);
+ };
+ /**
+ * adds a vertex to be drawn in a custom Shape.
+ * @private
+ * @method vertex
+ * @param {Number} x x-coordinate of vertex
+ * @param {Number} y y-coordinate of vertex
+ * @param {Number} z z-coordinate of vertex
+ * @chainable
+ * @TODO implement handling of p5.Vector args
+ */
+ _main.default.RendererGL.prototype.vertex = function (x, y) {
+ // WebGL 1 doesn't support QUADS or QUAD_STRIP, so we duplicate data to turn
+ // QUADS into TRIANGLES and QUAD_STRIP into TRIANGLE_STRIP. (There is no extra
+ // work to convert QUAD_STRIP here, since the only difference is in how edges
+ // are rendered.)
+ if (this.immediateMode.shapeMode === constants.QUADS) {
+ // A finished quad turned into triangles should leave 6 vertices in the
+ // buffer:
+ // 0--3 0 3--5
+ // | | --> | \ \ |
+ // 1--2 1--2 4
+ // When vertex index 3 is being added, add the necessary duplicates.
+ if (this.immediateMode.geometry.vertices.length % 6 === 3) {
+ for (var key in immediateBufferStrides) {
+ var stride = immediateBufferStrides[key];
+ var buffer = this.immediateMode.geometry[key];
+ buffer.push.apply(buffer, _toConsumableArray(buffer.slice(buffer.length - 3 * stride, buffer.length - 2 * stride)).concat(_toConsumableArray(buffer.slice(buffer.length - stride, buffer.length))));
+ }
+ }
+ }
+ var z,
+ u,
+ v;
+ // default to (x, y) mode: all other arguments assumed to be 0.
+ z = u = v = 0;
+ if (arguments.length === 3) {
+ // (x, y, z) mode: (u, v) assumed to be 0.
+ z = arguments[2];
+ } else if (arguments.length === 4) {
+ // (x, y, u, v) mode: z assumed to be 0.
+ u = arguments[2];
+ v = arguments[3];
+ } else if (arguments.length === 5) {
+ // (x, y, z, u, v) mode
+ z = arguments[2];
+ u = arguments[3];
+ v = arguments[4];
+ }
+ var vert = new _main.default.Vector(x, y, z);
+ this.immediateMode.geometry.vertices.push(vert);
+ this.immediateMode.geometry.vertexNormals.push(this._currentNormal);
+ var vertexColor = this.curFillColor || [
+ 0.5,
+ 0.5,
+ 0.5,
+ 1
+ ];
+ this.immediateMode.geometry.vertexColors.push(vertexColor[0], vertexColor[1], vertexColor[2], vertexColor[3]);
+ var lineVertexColor = this.curStrokeColor || [
+ 0.5,
+ 0.5,
+ 0.5,
+ 1
+ ];
+ this.immediateMode.geometry.vertexStrokeColors.push(lineVertexColor[0], lineVertexColor[1], lineVertexColor[2], lineVertexColor[3]);
+ if (this.textureMode === constants.IMAGE && !this.isProcessingVertices) {
+ if (this._tex !== null) {
+ if (this._tex.width > 0 && this._tex.height > 0) {
+ u /= this._tex.width;
+ v /= this._tex.height;
+ }
+ } else if (this.userFillShader !== undefined || this.userStrokeShader !== undefined || this.userPointShader !== undefined) {
+ // Do nothing if user-defined shaders are present
+ } else if (this._tex === null && arguments.length >= 4) {
+ // Only throw this warning if custom uv's have been provided
+ console.warn('You must first call texture() before using' + ' vertex() with image based u and v coordinates');
+ }
+ }
+ this.immediateMode.geometry.uvs.push(u, v);
+ this.immediateMode._bezierVertex[0] = x;
+ this.immediateMode._bezierVertex[1] = y;
+ this.immediateMode._bezierVertex[2] = z;
+ this.immediateMode._quadraticVertex[0] = x;
+ this.immediateMode._quadraticVertex[1] = y;
+ this.immediateMode._quadraticVertex[2] = z;
+ return this;
+ };
+ /**
+ * Sets the normal to use for subsequent vertices.
+ * @private
+ * @method normal
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @chainable
+ *
+ * @method normal
+ * @param {Vector} v
+ * @chainable
+ */
+ _main.default.RendererGL.prototype.normal = function (xorv, y, z) {
+ if (xorv instanceof _main.default.Vector) {
+ this._currentNormal = xorv;
+ } else {
+ this._currentNormal = new _main.default.Vector(xorv, y, z);
+ }
+ return this;
+ };
+ /**
+ * End shape drawing and render vertices to screen.
+ * @chainable
+ */
+ _main.default.RendererGL.prototype.endShape = function (mode, isCurve, isBezier, isQuadratic, isContour, shapeKind) {
+ var count = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1;
+ if (this.immediateMode.shapeMode === constants.POINTS) {
+ this._drawPoints(this.immediateMode.geometry.vertices, this.immediateMode.buffers.point);
+ return this;
+ } // When we are drawing a shape then the shape mode is TESS,
+ // but in case of triangle we can skip the breaking into small triangle
+ // this can optimize performance by skipping the step of breaking it into triangles
+
+ if (this.immediateMode.geometry.vertices.length === 3 && this.immediateMode.shapeMode === constants.TESS) {
+ this.immediateMode.shapeMode === constants.TRIANGLES;
+ }
+ this.isProcessingVertices = true;
+ this._processVertices.apply(this, arguments);
+ this.isProcessingVertices = false;
+ // LINE_STRIP and LINES are not used for rendering, instead
+ // they only indicate a way to modify vertices during the _processVertices() step
+ var is_line = false;
+ if (this.immediateMode.shapeMode === constants.LINE_STRIP || this.immediateMode.shapeMode === constants.LINES) {
+ this.immediateMode.shapeMode = constants.TRIANGLE_FAN;
+ is_line = true;
+ } // WebGL doesn't support the QUADS and QUAD_STRIP modes, so we
+ // need to convert them to a supported format. In `vertex()`, we reformat
+ // the input data into the formats specified below.
+
+ if (this.immediateMode.shapeMode === constants.QUADS) {
+ this.immediateMode.shapeMode = constants.TRIANGLES;
+ } else if (this.immediateMode.shapeMode === constants.QUAD_STRIP) {
+ this.immediateMode.shapeMode = constants.TRIANGLE_STRIP;
+ }
+ if (this._doFill && !is_line) {
+ if (!this.geometryBuilder && this.immediateMode.geometry.vertices.length >= 3) {
+ this._drawImmediateFill(count);
+ }
+ }
+ if (this._doStroke) {
+ if (!this.geometryBuilder && this.immediateMode.geometry.lineVertices.length >= 1) {
+ this._drawImmediateStroke();
+ }
+ }
+ if (this.geometryBuilder) {
+ this.geometryBuilder.addImmediate();
+ }
+ this.isBezier = false;
+ this.isQuadratic = false;
+ this.isCurve = false;
+ this.immediateMode._bezierVertex.length = 0;
+ this.immediateMode._quadraticVertex.length = 0;
+ this.immediateMode._curveVertex.length = 0;
+ return this;
+ };
+ /**
+ * Called from endShape(). This function calculates the stroke vertices for custom shapes and
+ * tesselates shapes when applicable.
+ * @private
+ * @param {Number} mode webgl primitives mode. beginShape supports the
+ * following modes:
+ * POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,
+ * TRIANGLE_STRIP, TRIANGLE_FAN and TESS(WEBGL only)
+ */
+ _main.default.RendererGL.prototype._processVertices = function (mode) {
+ if (this.immediateMode.geometry.vertices.length === 0) return;
+ var calculateStroke = this._doStroke;
+ var shouldClose = mode === constants.CLOSE;
+ if (calculateStroke) {
+ this.immediateMode.geometry.edges = this._calculateEdges(this.immediateMode.shapeMode, this.immediateMode.geometry.vertices, shouldClose);
+ if (!this.geometryBuilder) {
+ this.immediateMode.geometry._edgesToVertices();
+ }
+ } // For hollow shapes, user must set mode to TESS
+
+ var convexShape = this.immediateMode.shapeMode === constants.TESS;
+ // If the shape has a contour, we have to re-triangulate to cut out the
+ // contour region
+ var hasContour = this.immediateMode.contourIndices.length > 0;
+ // We tesselate when drawing curves or convex shapes
+ var shouldTess = this._doFill && (this.isBezier || this.isQuadratic || this.isCurve || convexShape || hasContour) && this.immediateMode.shapeMode !== constants.LINES;
+ if (shouldTess) {
+ this._tesselateShape();
+ }
+ };
+ /**
+ * Called from _processVertices(). This function calculates the stroke vertices for custom shapes and
+ * tesselates shapes when applicable.
+ * @private
+ * @returns {Array[Number]} indices for custom shape vertices indicating edges.
+ */
+ _main.default.RendererGL.prototype._calculateEdges = function (shapeMode, verts, shouldClose) {
+ var res = [
+ ];
+ var i = 0;
+ var contourIndices = this.immediateMode.contourIndices.slice();
+ var contourStart = 0;
+ switch (shapeMode) {
+ case constants.TRIANGLE_STRIP:
+ for (i = 0; i < verts.length - 2; i++) {
+ res.push([i,
+ i + 1]);
+ res.push([i,
+ i + 2]);
+ }
+ res.push([i,
+ i + 1]);
+ break;
+ case constants.TRIANGLE_FAN:
+ for (i = 1; i < verts.length - 1; i++) {
+ res.push([0,
+ i]);
+ res.push([i,
+ i + 1]);
+ }
+ res.push([0,
+ verts.length - 1]);
+ break;
+ case constants.TRIANGLES:
+ for (i = 0; i < verts.length - 2; i = i + 3) {
+ res.push([i,
+ i + 1]);
+ res.push([i + 1,
+ i + 2]);
+ res.push([i + 2,
+ i]);
+ }
+ break;
+ case constants.LINES:
+ for (i = 0; i < verts.length - 1; i = i + 2) {
+ res.push([i,
+ i + 1]);
+ }
+ break;
+ case constants.QUADS:
+ // Quads have been broken up into two triangles by `vertex()`:
+ // 0 3--5
+ // | \ \ |
+ // 1--2 4
+ for (i = 0; i < verts.length - 5; i += 6) {
+ res.push([i,
+ i + 1]);
+ res.push([i + 1,
+ i + 2]);
+ res.push([i + 3,
+ i + 5]);
+ res.push([i + 4,
+ i + 5]);
+ }
+ break;
+ case constants.QUAD_STRIP:
+ // 0---2---4
+ // | | |
+ // 1---3---5
+ for (i = 0; i < verts.length - 2; i += 2) {
+ res.push([i,
+ i + 1]);
+ res.push([i,
+ i + 2]);
+ res.push([i + 1,
+ i + 3]);
+ }
+ res.push([i,
+ i + 1]);
+ break;
+ default:
+ // TODO: handle contours in other modes too
+ for (i = 0; i < verts.length; i++) {
+ // Handle breaks between contours
+ if (i + 1 < verts.length && i + 1 !== contourIndices[0]) {
+ res.push([i,
+ i + 1]);
+ } else {
+ if (shouldClose || contourStart) {
+ res.push([i,
+ contourStart]);
+ }
+ if (contourIndices.length > 0) {
+ contourStart = contourIndices.shift();
+ }
+ }
+ }
+ break;
+ }
+ if (shapeMode !== constants.TESS && shouldClose) {
+ res.push([verts.length - 1,
+ 0]);
+ }
+ return res;
+ };
+ /**
+ * Called from _processVertices() when applicable. This function tesselates immediateMode.geometry.
+ * @private
+ */
+ _main.default.RendererGL.prototype._tesselateShape = function () {
+ var _this = this;
+ // TODO: handle non-TESS shape modes that have contours
+ this.immediateMode.shapeMode = constants.TRIANGLES;
+ var contours = [
+ []
+ ];
+ for (var i = 0; i < this.immediateMode.geometry.vertices.length; i++) {
+ if (this.immediateMode.contourIndices.length > 0 && this.immediateMode.contourIndices[0] === i) {
+ this.immediateMode.contourIndices.shift();
+ contours.push([]);
+ }
+ contours[contours.length - 1].push(this.immediateMode.geometry.vertices[i].x, this.immediateMode.geometry.vertices[i].y, this.immediateMode.geometry.vertices[i].z, this.immediateMode.geometry.uvs[i * 2], this.immediateMode.geometry.uvs[i * 2 + 1], this.immediateMode.geometry.vertexColors[i * 4], this.immediateMode.geometry.vertexColors[i * 4 + 1], this.immediateMode.geometry.vertexColors[i * 4 + 2], this.immediateMode.geometry.vertexColors[i * 4 + 3], this.immediateMode.geometry.vertexNormals[i].x, this.immediateMode.geometry.vertexNormals[i].y, this.immediateMode.geometry.vertexNormals[i].z);
+ }
+ var polyTriangles = this._triangulate(contours);
+ var originalVertices = this.immediateMode.geometry.vertices;
+ this.immediateMode.geometry.vertices = [
+ ];
+ this.immediateMode.geometry.vertexNormals = [
+ ];
+ this.immediateMode.geometry.uvs = [
+ ];
+ var colors = [
+ ];
+ for (var j = 0, polyTriLength = polyTriangles.length; j < polyTriLength; j = j + _main.default.RendererGL.prototype.tessyVertexSize) {
+ colors.push.apply(colors, _toConsumableArray(polyTriangles.slice(j + 5, j + 9)));
+ this.normal.apply(this, _toConsumableArray(polyTriangles.slice(j + 9, j + 12)));
+ this.vertex.apply(this, _toConsumableArray(polyTriangles.slice(j, j + 5)));
+ }
+ if (this.geometryBuilder) {
+ // Tesselating the face causes the indices of edge vertices to stop being
+ // correct. When rendering, this is not a problem, since _edgesToVertices
+ // will have been called before this, and edge vertex indices are no longer
+ // needed. However, the geometry builder still needs this information, so
+ // when one is active, we need to update the indices.
+ //
+ // We record index mappings in a Map so that once we have found a
+ // corresponding vertex, we don't need to loop to find it again.
+ var newIndex = new Map();
+ this.immediateMode.geometry.edges = this.immediateMode.geometry.edges.map(function (edge) {
+ return edge.map(function (origIdx) {
+ if (!newIndex.has(origIdx)) {
+ var orig = originalVertices[origIdx];
+ var newVertIndex = _this.immediateMode.geometry.vertices.findIndex(function (v) {
+ return orig.x === v.x && orig.y === v.y && orig.z === v.z;
+ });
+ if (newVertIndex === - 1) {
+ // The tesselation process didn't output a vertex with the exact
+ // coordinate as before, potentially due to numerical issues. This
+ // doesn't happen often, but in this case, pick the closest point
+ var closestDist = Infinity;
+ var closestIndex = 0;
+ for (var _i = 0; _i < _this.immediateMode.geometry.vertices.length; _i++) {
+ var vert = _this.immediateMode.geometry.vertices[_i];
+ var dX = orig.x - vert.x;
+ var dY = orig.y - vert.y;
+ var dZ = orig.z - vert.z;
+ var dist = dX * dX + dY * dY + dZ * dZ;
+ if (dist < closestDist) {
+ closestDist = dist;
+ closestIndex = _i;
+ }
+ }
+ newVertIndex = closestIndex;
+ }
+ newIndex.set(origIdx, newVertIndex);
+ }
+ return newIndex.get(origIdx);
+ });
+ });
+ }
+ this.immediateMode.geometry.vertexColors = colors;
+ };
+ /**
+ * Called from endShape(). Responsible for calculating normals, setting shader uniforms,
+ * enabling all appropriate buffers, applying color blend, and drawing the fill geometry.
+ * @private
+ */
+ _main.default.RendererGL.prototype._drawImmediateFill = function () {
+ var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+ var gl = this.GL;
+ this._useVertexColor = this.immediateMode.geometry.vertexColors.length > 0;
+ var shader;
+ shader = this._getImmediateFillShader();
+ this._setFillUniforms(shader);
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.immediateMode.buffers.fill[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var buff = _step.value;
+ buff._prepareBuffer(this.immediateMode.geometry, shader);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ shader.disableRemainingAttributes();
+ this._applyColorBlend(this.curFillColor, this.immediateMode.geometry.hasFillTransparency());
+ if (count === 1) {
+ gl.drawArrays(this.immediateMode.shapeMode, 0, this.immediateMode.geometry.vertices.length);
+ } else {
+ try {
+ gl.drawArraysInstanced(this.immediateMode.shapeMode, 0, this.immediateMode.geometry.vertices.length, count);
+ } catch (e) {
+ console.log('🌸 p5.js says: Instancing is only supported in WebGL2 mode');
+ }
+ }
+ shader.unbindShader();
+ };
+ /**
+ * Called from endShape(). Responsible for calculating normals, setting shader uniforms,
+ * enabling all appropriate buffers, applying color blend, and drawing the stroke geometry.
+ * @private
+ */
+ _main.default.RendererGL.prototype._drawImmediateStroke = function () {
+ var gl = this.GL;
+ this._useLineColor = this.immediateMode.geometry.vertexStrokeColors.length > 0;
+ var shader = this._getImmediateStrokeShader();
+ this._setStrokeUniforms(shader);
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = this.immediateMode.buffers.stroke[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var buff = _step2.value;
+ buff._prepareBuffer(this.immediateMode.geometry, shader);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ shader.disableRemainingAttributes();
+ this._applyColorBlend(this.curStrokeColor, this.immediateMode.geometry.hasFillTransparency());
+ gl.drawArrays(gl.TRIANGLES, 0, this.immediateMode.geometry.lineVertices.length / 3);
+ shader.unbindShader();
+ };
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ './p5.RenderBuffer': 357,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.fill': 173,
+ 'core-js/modules/es.array.find-index': 175,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.map': 192,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 359: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.uint16-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.uint16-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('./p5.RendererGL');
+ _dereq_('./p5.RenderBuffer');
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } //Retained Mode. The default mode for rendering 3D primitives
+ //in WEBGL.
+ /**
+ * @param {p5.Geometry} geometry The model whose resources will be freed
+ */
+
+ _main.default.RendererGL.prototype.freeGeometry = function (geometry) {
+ if (!geometry.gid) {
+ console.warn('The model you passed to freeGeometry does not have an id!');
+ return;
+ }
+ this._freeBuffers(geometry.gid);
+ };
+ /**
+ * _initBufferDefaults
+ * @private
+ * @description initializes buffer defaults. runs each time a new geometry is
+ * registered
+ * @param {String} gId key of the geometry object
+ * @returns {Object} a new buffer object
+ */
+ _main.default.RendererGL.prototype._initBufferDefaults = function (gId) {
+ this._freeBuffers(gId);
+ //@TODO remove this limit on hashes in retainedMode.geometry
+ if (Object.keys(this.retainedMode.geometry).length > 1000) {
+ var key = Object.keys(this.retainedMode.geometry) [0];
+ this._freeBuffers(key);
+ } //create a new entry in our retainedMode.geometry
+
+ return this.retainedMode.geometry[gId] = {
+ };
+ };
+ _main.default.RendererGL.prototype._freeBuffers = function (gId) {
+ var buffers = this.retainedMode.geometry[gId];
+ if (!buffers) {
+ return;
+ }
+ delete this.retainedMode.geometry[gId];
+ var gl = this.GL;
+ if (buffers.indexBuffer) {
+ gl.deleteBuffer(buffers.indexBuffer);
+ }
+ function freeBuffers(defs) {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = defs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var def = _step.value;
+ if (buffers[def.dst]) {
+ gl.deleteBuffer(buffers[def.dst]);
+ buffers[def.dst] = null;
+ }
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ } // free all the buffers
+
+ freeBuffers(this.retainedMode.buffers.stroke);
+ freeBuffers(this.retainedMode.buffers.fill);
+ };
+ /**
+ * creates a buffers object that holds the WebGL render buffers
+ * for a geometry.
+ * @private
+ * @param {String} gId key of the geometry object
+ * @param {p5.Geometry} model contains geometry data
+ */
+ _main.default.RendererGL.prototype.createBuffers = function (gId, model) {
+ var gl = this.GL;
+ //initialize the gl buffers for our geom groups
+ var buffers = this._initBufferDefaults(gId);
+ buffers.model = model;
+ var indexBuffer = buffers.indexBuffer;
+ if (model.faces.length) {
+ // allocate space for faces
+ if (!indexBuffer) indexBuffer = buffers.indexBuffer = gl.createBuffer();
+ var vals = _main.default.RendererGL.prototype._flatten(model.faces);
+ // If any face references a vertex with an index greater than the maximum
+ // un-singed 16 bit integer, then we need to use a Uint32Array instead of a
+ // Uint16Array
+ var hasVertexIndicesOverMaxUInt16 = vals.some(function (v) {
+ return v > 65535;
+ });
+ var type = hasVertexIndicesOverMaxUInt16 ? Uint32Array : Uint16Array;
+ this._bindBuffer(indexBuffer, gl.ELEMENT_ARRAY_BUFFER, vals, type);
+ // If we're using a Uint32Array for our indexBuffer we will need to pass a
+ // different enum value to WebGL draw triangles. This happens in
+ // the _drawElements function.
+ buffers.indexBufferType = hasVertexIndicesOverMaxUInt16 ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
+ // the vertex count is based on the number of faces
+ buffers.vertexCount = model.faces.length * 3;
+ } else {
+ // the index buffer is unused, remove it
+ if (indexBuffer) {
+ gl.deleteBuffer(indexBuffer);
+ buffers.indexBuffer = null;
+ } // the vertex count comes directly from the model
+
+ buffers.vertexCount = model.vertices ? model.vertices.length : 0;
+ }
+ buffers.lineVertexCount = model.lineVertices ? model.lineVertices.length / 3 : 0;
+ return buffers;
+ };
+ /**
+ * Draws buffers given a geometry key ID
+ * @private
+ * @param {String} gId ID in our geom hash
+ * @chainable
+ */
+ _main.default.RendererGL.prototype.drawBuffers = function (gId) {
+ var gl = this.GL;
+ var geometry = this.retainedMode.geometry[gId];
+ if (!this.geometryBuilder && this._doFill && this.retainedMode.geometry[gId].vertexCount > 0) {
+ this._useVertexColor = geometry.model.vertexColors.length > 0;
+ var fillShader = this._getRetainedFillShader();
+ this._setFillUniforms(fillShader);
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = this.retainedMode.buffers.fill[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var buff = _step2.value;
+ buff._prepareBuffer(geometry, fillShader);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ fillShader.disableRemainingAttributes();
+ if (geometry.indexBuffer) {
+ //vertex index buffer
+ this._bindBuffer(geometry.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
+ }
+ this._applyColorBlend(this.curFillColor, geometry.model.hasFillTransparency());
+ this._drawElements(gl.TRIANGLES, gId);
+ fillShader.unbindShader();
+ }
+ if (!this.geometryBuilder && this._doStroke && geometry.lineVertexCount > 0) {
+ this._useLineColor = geometry.model.vertexStrokeColors.length > 0;
+ var strokeShader = this._getRetainedStrokeShader();
+ this._setStrokeUniforms(strokeShader);
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = this.retainedMode.buffers.stroke[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var _buff = _step3.value;
+ _buff._prepareBuffer(geometry, strokeShader);
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ strokeShader.disableRemainingAttributes();
+ this._applyColorBlend(this.curStrokeColor, geometry.model.hasStrokeTransparency());
+ this._drawArrays(gl.TRIANGLES, gId);
+ strokeShader.unbindShader();
+ }
+ if (this.geometryBuilder) {
+ this.geometryBuilder.addRetained(geometry);
+ }
+ return this;
+ };
+ /**
+ * Calls drawBuffers() with a scaled model/view matrix.
+ *
+ * This is used by various 3d primitive methods (in primitives.js, eg. plane,
+ * box, torus, etc...) to allow caching of un-scaled geometries. Those
+ * geometries are generally created with unit-length dimensions, cached as
+ * such, and then scaled appropriately in this method prior to rendering.
+ *
+ * @private
+ * @method drawBuffersScaled
+ * @param {String} gId ID in our geom hash
+ * @param {Number} scaleX the amount to scale in the X direction
+ * @param {Number} scaleY the amount to scale in the Y direction
+ * @param {Number} scaleZ the amount to scale in the Z direction
+ */
+ _main.default.RendererGL.prototype.drawBuffersScaled = function (gId, scaleX, scaleY, scaleZ) {
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ this.uMVMatrix.scale(scaleX, scaleY, scaleZ);
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ };
+ _main.default.RendererGL.prototype._drawArrays = function (drawMode, gId) {
+ this.GL.drawArrays(drawMode, 0, this.retainedMode.geometry[gId].lineVertexCount);
+ return this;
+ };
+ _main.default.RendererGL.prototype._drawElements = function (drawMode, gId) {
+ var buffers = this.retainedMode.geometry[gId];
+ var gl = this.GL;
+ // render the fill
+ if (buffers.indexBuffer) {
+ // If this model is using a Uint32Array we need to ensure the
+ // OES_element_index_uint WebGL extension is enabled.
+ if (this._pInst.webglVersion !== constants.WEBGL2 && buffers.indexBufferType === gl.UNSIGNED_INT) {
+ if (!gl.getExtension('OES_element_index_uint')) {
+ throw new Error('Unable to render a 3d model with > 65535 triangles. Your web browser does not support the WebGL Extension OES_element_index_uint.');
+ }
+ } // we're drawing faces
+
+ gl.drawElements(gl.TRIANGLES, buffers.vertexCount, buffers.indexBufferType, 0);
+ } else {
+ // drawing vertices
+ gl.drawArrays(drawMode || gl.TRIANGLES, 0, buffers.vertexCount);
+ }
+ };
+ _main.default.RendererGL.prototype._drawPoints = function (vertices, vertexBuffer) {
+ var gl = this.GL;
+ var pointShader = this._getImmediatePointShader();
+ this._setPointUniforms(pointShader);
+ this._bindBuffer(vertexBuffer, gl.ARRAY_BUFFER, this._vToNArray(vertices), Float32Array, gl.STATIC_DRAW);
+ pointShader.enableAttrib(pointShader.attributes.aPosition, 3);
+ this._applyColorBlend(this.curStrokeColor);
+ gl.drawArrays(gl.Points, 0, vertices.length);
+ pointShader.unbindShader();
+ };
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ './p5.RenderBuffer': 357,
+ './p5.RendererGL': 360,
+ 'core-js/modules/es.array.fill': 173,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.some': 187,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.keys': 204,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.float32-array': 234,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint16-array': 255,
+ 'core-js/modules/es.typed-array.uint32-array': 256,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 360: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.copy-within');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.flat');
+ _dereq_('core-js/modules/es.array.flat-map');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.array.unscopables.flat');
+ _dereq_('core-js/modules/es.array.unscopables.flat-map');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.reflect.get');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.float64-array');
+ _dereq_('core-js/modules/es.typed-array.int16-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint16-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.copy-within');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.flat');
+ _dereq_('core-js/modules/es.array.flat-map');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.array.unscopables.flat');
+ _dereq_('core-js/modules/es.array.unscopables.flat-map');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.float64-array');
+ _dereq_('core-js/modules/es.typed-array.int16-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint16-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.readPixelsWebGL = readPixelsWebGL;
+ exports.readPixelWebGL = readPixelWebGL;
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _GeometryBuilder = _interopRequireDefault(_dereq_('./GeometryBuilder'));
+ var _libtess = _interopRequireDefault(_dereq_('libtess'));
+ _dereq_('./p5.Shader');
+ _dereq_('./p5.Camera');
+ _dereq_('../core/p5.Renderer');
+ _dereq_('./p5.Matrix');
+ _dereq_('./p5.Framebuffer');
+ var _path = _dereq_('path');
+ var _p6 = _dereq_('./p5.Texture');
+ var _filterShaderFrags;
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _get(target, property, receiver) {
+ if (typeof Reflect !== 'undefined' && Reflect.get) {
+ _get = Reflect.get;
+ } else {
+ _get = function _get(target, property, receiver) {
+ var base = _superPropBase(target, property);
+ if (!base) return;
+ var desc = Object.getOwnPropertyDescriptor(base, property);
+ if (desc.get) {
+ return desc.get.call(receiver);
+ }
+ return desc.value;
+ };
+ }
+ return _get(target, property, receiver || target);
+ }
+ function _superPropBase(object, property) {
+ while (!Object.prototype.hasOwnProperty.call(object, property)) {
+ object = _getPrototypeOf(object);
+ if (object === null) break;
+ }
+ return object;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+ function _defineProperty(obj, key, value) {
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+ return obj;
+ }
+ var STROKE_CAP_ENUM = {
+ };
+ var STROKE_JOIN_ENUM = {
+ };
+ var lineDefs = '';
+ var defineStrokeCapEnum = function defineStrokeCapEnum(key, val) {
+ lineDefs += '#define STROKE_CAP_'.concat(key, ' ').concat(val, '\n');
+ STROKE_CAP_ENUM[constants[key]] = val;
+ };
+ var defineStrokeJoinEnum = function defineStrokeJoinEnum(key, val) {
+ lineDefs += '#define STROKE_JOIN_'.concat(key, ' ').concat(val, '\n');
+ STROKE_JOIN_ENUM[constants[key]] = val;
+ };
+ // Define constants in line shaders for each type of cap/join, and also record
+ // the values in JS objects
+ defineStrokeCapEnum('ROUND', 0);
+ defineStrokeCapEnum('PROJECT', 1);
+ defineStrokeCapEnum('SQUARE', 2);
+ defineStrokeJoinEnum('ROUND', 0);
+ defineStrokeJoinEnum('MITER', 1);
+ defineStrokeJoinEnum('BEVEL', 2);
+ var lightingShader = '#define PI 3.141592\n\nprecision highp float;\nprecision highp int;\n\nuniform mat4 uViewMatrix;\n\nuniform bool uUseLighting;\n\nuniform int uAmbientLightCount;\nuniform vec3 uAmbientColor[5];\nuniform mat3 uCameraRotation;\nuniform int uDirectionalLightCount;\nuniform vec3 uLightingDirection[5];\nuniform vec3 uDirectionalDiffuseColors[5];\nuniform vec3 uDirectionalSpecularColors[5];\n\nuniform int uPointLightCount;\nuniform vec3 uPointLightLocation[5];\nuniform vec3 uPointLightDiffuseColors[5];\t\nuniform vec3 uPointLightSpecularColors[5];\n\nuniform int uSpotLightCount;\nuniform float uSpotLightAngle[5];\nuniform float uSpotLightConc[5];\nuniform vec3 uSpotLightDiffuseColors[5];\nuniform vec3 uSpotLightSpecularColors[5];\nuniform vec3 uSpotLightLocation[5];\nuniform vec3 uSpotLightDirection[5];\n\nuniform bool uSpecular;\nuniform float uShininess;\nuniform float metallic;\n\nuniform float uConstantAttenuation;\nuniform float uLinearAttenuation;\nuniform float uQuadraticAttenuation;\n\n// setting from _setImageLightUniforms()\n// boolean to initiate the calculateImageDiffuse and calculateImageSpecular\nuniform bool uUseImageLight;\n// texture for use in calculateImageDiffuse\nuniform sampler2D environmentMapDiffused;\n// texture for use in calculateImageSpecular\nuniform sampler2D environmentMapSpecular;\n// roughness for use in calculateImageSpecular\nuniform float levelOfDetail;\n\nconst float specularFactor = 2.0;\nconst float diffuseFactor = 0.73;\n\nstruct LightResult {\n float specular;\n float diffuse;\n};\n\nfloat _phongSpecular(\n vec3 lightDirection,\n vec3 viewDirection,\n vec3 surfaceNormal,\n float shininess) {\n\n vec3 R = reflect(lightDirection, surfaceNormal);\n return pow(max(0.0, dot(R, viewDirection)), shininess);\n}\n\nfloat _lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal) {\n return max(0.0, dot(-lightDirection, surfaceNormal));\n}\n\nLightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector) {\n\n vec3 lightDir = normalize(lightVector);\n\n //compute our diffuse & specular terms\n LightResult lr;\n float specularIntensity = mix(1.0, 0.4, metallic);\n float diffuseIntensity = mix(1.0, 0.1, metallic);\n if (uSpecular)\n lr.specular = (_phongSpecular(lightDir, viewDirection, normal, uShininess)) * specularIntensity;\n lr.diffuse = _lambertDiffuse(lightDir, normal) * diffuseIntensity;\n return lr;\n}\n\n// converts the range of "value" from [min1 to max1] to [min2 to max2]\nfloat map(float value, float min1, float max1, float min2, float max2) {\n return min2 + (value - min1) * (max2 - min2) / (max1 - min1);\n}\n\nvec2 mapTextureToNormal( vec3 v ){\n // x = r sin(phi) cos(theta) \n // y = r cos(phi) \n // z = r sin(phi) sin(theta)\n float phi = acos( v.y );\n // if phi is 0, then there are no x, z components\n float theta = 0.0;\n // else \n theta = acos(v.x / sin(phi));\n float sinTheta = v.z / sin(phi);\n if (sinTheta < 0.0) {\n // Turn it into -theta, but in the 0-2PI range\n theta = 2.0 * PI - theta;\n }\n theta = theta / (2.0 * 3.14159);\n phi = phi / 3.14159 ;\n \n vec2 angles = vec2( fract(theta + 0.25), 1.0 - phi );\n return angles;\n}\n\n\nvec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){\n // make 2 seperate builds \n vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0); // hardcoded world camera position\n vec3 worldNormal = normalize(vNormal * uCameraRotation);\n vec2 newTexCoor = mapTextureToNormal( worldNormal );\n vec4 texture = TEXTURE( environmentMapDiffused, newTexCoor );\n // this is to make the darker sections more dark\n // png and jpg usually flatten the brightness so it is to reverse that\n return mix(smoothstep(vec3(0.0), vec3(1.0), texture.xyz), vec3(0.0), metallic);\n}\n\nvec3 calculateImageSpecular( vec3 vNormal, vec3 vViewPosition ){\n vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0);\n vec3 worldNormal = normalize(vNormal);\n vec3 lightDirection = normalize( vViewPosition - worldCameraPosition );\n vec3 R = reflect(lightDirection, worldNormal) * uCameraRotation;\n vec2 newTexCoor = mapTextureToNormal( R );\n#ifdef WEBGL2\n vec4 outColor = textureLod(environmentMapSpecular, newTexCoor, levelOfDetail);\n#else\n vec4 outColor = TEXTURE(environmentMapSpecular, newTexCoor);\n#endif\n // this is to make the darker sections more dark\n // png and jpg usually flatten the brightness so it is to reverse that\n return mix(\n pow(outColor.xyz, vec3(10)),\n pow(outColor.xyz, vec3(1.2)),\n metallic \n );\n}\n\nvoid totalLight(\n vec3 modelPosition,\n vec3 normal,\n out vec3 totalDiffuse,\n out vec3 totalSpecular\n) {\n\n totalSpecular = vec3(0.0);\n\n if (!uUseLighting) {\n totalDiffuse = vec3(1.0);\n return;\n }\n\n totalDiffuse = vec3(0.0);\n\n vec3 viewDirection = normalize(-modelPosition);\n\n for (int j = 0; j < 5; j++) {\n if (j < uDirectionalLightCount) {\n vec3 lightVector = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;\n vec3 lightColor = uDirectionalDiffuseColors[j];\n vec3 specularColor = uDirectionalSpecularColors[j];\n LightResult result = _light(viewDirection, normal, lightVector);\n totalDiffuse += result.diffuse * lightColor;\n totalSpecular += result.specular * lightColor * specularColor;\n }\n\n if (j < uPointLightCount) {\n vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation[j], 1.0)).xyz;\n vec3 lightVector = modelPosition - lightPosition;\n //calculate attenuation\n float lightDistance = length(lightVector);\n float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n vec3 lightColor = lightFalloff * uPointLightDiffuseColors[j];\n vec3 specularColor = lightFalloff * uPointLightSpecularColors[j];\n\n LightResult result = _light(viewDirection, normal, lightVector);\n totalDiffuse += result.diffuse * lightColor;\n totalSpecular += result.specular * lightColor * specularColor;\n }\n\n if(j < uSpotLightCount) {\n vec3 lightPosition = (uViewMatrix * vec4(uSpotLightLocation[j], 1.0)).xyz;\n vec3 lightVector = modelPosition - lightPosition;\n \n float lightDistance = length(lightVector);\n float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n\n vec3 lightDirection = (uViewMatrix * vec4(uSpotLightDirection[j], 0.0)).xyz;\n float spotDot = dot(normalize(lightVector), normalize(lightDirection));\n float spotFalloff;\n if(spotDot < uSpotLightAngle[j]) {\n spotFalloff = 0.0;\n }\n else {\n spotFalloff = pow(spotDot, uSpotLightConc[j]);\n }\n lightFalloff *= spotFalloff;\n\n vec3 lightColor = uSpotLightDiffuseColors[j];\n vec3 specularColor = uSpotLightSpecularColors[j];\n \n LightResult result = _light(viewDirection, normal, lightVector);\n \n totalDiffuse += result.diffuse * lightColor * lightFalloff;\n totalSpecular += result.specular * lightColor * specularColor * lightFalloff;\n }\n }\n\n if( uUseImageLight ){\n totalDiffuse += calculateImageDiffuse(normal, modelPosition);\n totalSpecular += calculateImageSpecular(normal, modelPosition);\n }\n\n totalDiffuse *= diffuseFactor;\n totalSpecular *= specularFactor;\n}\n';
+ var webgl2CompatibilityShader = '#ifdef WEBGL2\n\n#define IN in\n#define OUT out\n\n#ifdef FRAGMENT_SHADER\nout vec4 outColor;\n#define OUT_COLOR outColor\n#endif\n#define TEXTURE texture\n\n#else\n\n#ifdef FRAGMENT_SHADER\n#define IN varying\n#else\n#define IN attribute\n#endif\n#define OUT varying\n#define TEXTURE texture2D\n\n#ifdef FRAGMENT_SHADER\n#define OUT_COLOR gl_FragColor\n#endif\n\n#endif\n';
+ var defaultShaders = {
+ sphereMappingFrag: '#define PI 3.141592\n\nprecision highp float;\n \nuniform sampler2D uSampler;\nuniform mat3 uNewNormalMatrix;\nuniform float uFovY;\nuniform float uAspect;\n\nvarying vec2 vTexCoord;\n \nvoid main() {\n float uFovX = uFovY * uAspect; \n vec4 newTexColor = texture2D(uSampler, vTexCoord);\n float angleY = mix(uFovY/2.0, -uFovY/2.0, vTexCoord.y);\n float angleX = mix(uFovX/2.0, -uFovX/2.0, vTexCoord.x);\n vec3 rotatedNormal = vec3( angleX, angleY, 1.0 );\n rotatedNormal = uNewNormalMatrix * normalize(rotatedNormal);\n vec2 suv;\n suv.y = 0.5 + 0.5 * (-rotatedNormal.y);\n suv.x = atan(rotatedNormal.z, rotatedNormal.x) / (2.0 * PI) + 0.5;\n newTexColor = texture2D(uSampler, suv.xy);\n gl_FragColor = newTexColor;\n}\n',
+ immediateVert: 'IN vec3 aPosition;\nIN vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uResolution;\nuniform float uPointSize;\n\nOUT vec4 vColor;\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vColor = aVertexColor;\n gl_PointSize = uPointSize;\n}\n',
+ vertexColorVert: 'IN vec3 aPosition;\nIN vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nOUT vec4 vColor;\n\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vColor = aVertexColor;\n}\n',
+ vertexColorFrag: 'IN vec4 vColor;\nvoid main(void) {\n OUT_COLOR = vec4(vColor.rgb, 1.) * vColor.a;\n}\n',
+ normalVert: 'IN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nuniform vec4 uMaterialColor;\nuniform bool uUseVertexColor;\n\nOUT vec3 vVertexNormal;\nOUT highp vec2 vVertTexCoord;\nOUT vec4 vColor;\n\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vVertexNormal = normalize(vec3( uNormalMatrix * aNormal ));\n vVertTexCoord = aTexCoord;\n vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);\n}\n',
+ normalFrag: 'IN vec3 vVertexNormal;\nvoid main(void) {\n OUT_COLOR = vec4(vVertexNormal, 1.0);\n}\n',
+ basicFrag: 'IN vec4 vColor;\nvoid main(void) {\n OUT_COLOR = vec4(vColor.rgb, 1.) * vColor.a;\n}\n',
+ lightVert: lightingShader + '// include lighting.glgl\n\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nOUT highp vec2 vVertTexCoord;\nOUT vec3 vDiffuseColor;\nOUT vec3 vSpecularColor;\nOUT vec4 vColor;\n\nvoid main(void) {\n\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n\n vec3 vertexNormal = normalize(uNormalMatrix * aNormal);\n vVertTexCoord = aTexCoord;\n\n totalLight(viewModelPosition.xyz, vertexNormal, vDiffuseColor, vSpecularColor);\n\n for (int i = 0; i < 8; i++) {\n if (i < uAmbientLightCount) {\n vDiffuseColor += uAmbientColor[i];\n }\n }\n \n vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);\n}\n',
+ lightTextureFrag: 'uniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\nuniform bool uEmissive;\n\nIN highp vec2 vVertTexCoord;\nIN vec3 vDiffuseColor;\nIN vec3 vSpecularColor;\nIN vec4 vColor;\n\nvoid main(void) {\n if(uEmissive && !isTexture) {\n OUT_COLOR = vColor;\n }\n else {\n vec4 baseColor = isTexture\n // Textures come in with premultiplied alpha. To apply tint and still have\n // premultiplied alpha output, we need to multiply the RGB channels by the\n // tint RGB, and all channels by the tint alpha.\n ? TEXTURE(uSampler, vVertTexCoord) * vec4(uTint.rgb/255., 1.) * (uTint.a/255.)\n // Colors come in with unmultiplied alpha, so we need to multiply the RGB\n // channels by alpha to convert it to premultiplied alpha.\n : vec4(vColor.rgb * vColor.a, vColor.a);\n OUT_COLOR = vec4(baseColor.rgb * vDiffuseColor + vSpecularColor, baseColor.a);\n }\n}\n',
+ phongVert: 'precision highp int;\n\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\nuniform vec3 uAmbientColor[5];\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\nuniform int uAmbientLightCount;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nOUT vec3 vNormal;\nOUT vec2 vTexCoord;\nOUT vec3 vViewPosition;\nOUT vec3 vAmbientColor;\nOUT vec4 vColor;\n\nvoid main(void) {\n\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n\n // Pass varyings to fragment shader\n vViewPosition = viewModelPosition.xyz;\n gl_Position = uProjectionMatrix * viewModelPosition; \n\n vNormal = uNormalMatrix * aNormal;\n vTexCoord = aTexCoord;\n\n // TODO: this should be a uniform\n vAmbientColor = vec3(0.0);\n for (int i = 0; i < 5; i++) {\n if (i < uAmbientLightCount) {\n vAmbientColor += uAmbientColor[i];\n }\n }\n \n vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);\n}\n',
+ phongFrag: lightingShader + '// include lighting.glsl\nprecision highp int;\n\nuniform bool uHasSetAmbient;\nuniform vec4 uSpecularMatColor;\nuniform vec4 uAmbientMatColor;\nuniform vec4 uEmissiveMatColor;\n\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\n\nIN vec3 vNormal;\nIN vec2 vTexCoord;\nIN vec3 vViewPosition;\nIN vec3 vAmbientColor;\nIN vec4 vColor;\n\nvoid main(void) {\n\n vec3 diffuse;\n vec3 specular;\n totalLight(vViewPosition, normalize(vNormal), diffuse, specular);\n\n // Calculating final color as result of all lights (plus emissive term).\n\n vec4 baseColor = isTexture\n // Textures come in with premultiplied alpha. To apply tint and still have\n // premultiplied alpha output, we need to multiply the RGB channels by the\n // tint RGB, and all channels by the tint alpha.\n ? TEXTURE(uSampler, vTexCoord) * vec4(uTint.rgb/255., 1.) * (uTint.a/255.)\n // Colors come in with unmultiplied alpha, so we need to multiply the RGB\n // channels by alpha to convert it to premultiplied alpha.\n : vec4(vColor.rgb * vColor.a, vColor.a);\n OUT_COLOR = vec4(diffuse * baseColor.rgb + \n vAmbientColor * (\n uHasSetAmbient ? uAmbientMatColor.rgb : baseColor.rgb\n ) + \n specular * uSpecularMatColor.rgb + \n uEmissiveMatColor.rgb, baseColor.a);\n}\n',
+ fontVert: 'IN vec3 aPosition;\nIN vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uGlyphRect;\nuniform float uGlyphOffset;\n\nOUT vec2 vTexCoord;\nOUT float w;\n\nvoid main() {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // scale by the size of the glyph\'s rectangle\n positionVec4.xy *= uGlyphRect.zw - uGlyphRect.xy;\n\n // Expand glyph bounding boxes by 1px on each side to give a bit of room\n // for antialiasing\n vec3 newOrigin = (uModelViewMatrix * vec4(0., 0., 0., 1.)).xyz;\n vec3 newDX = (uModelViewMatrix * vec4(1., 0., 0., 1.)).xyz;\n vec3 newDY = (uModelViewMatrix * vec4(0., 1., 0., 1.)).xyz;\n vec2 pixelScale = vec2(\n 1. / length(newOrigin - newDX),\n 1. / length(newOrigin - newDY)\n );\n vec2 offset = pixelScale * normalize(aTexCoord - vec2(0.5, 0.5)) * vec2(1., -1.);\n vec2 textureOffset = offset * (1. / vec2(\n uGlyphRect.z - uGlyphRect.x,\n uGlyphRect.w - uGlyphRect.y\n ));\n\n // move to the corner of the glyph\n positionVec4.xy += uGlyphRect.xy;\n\n // move to the letter\'s line offset\n positionVec4.x += uGlyphOffset;\n\n positionVec4.xy += offset;\n \n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vTexCoord = aTexCoord + textureOffset;\n w = gl_Position.w;\n}\n',
+ fontFrag: '#ifndef WEBGL2\n#extension GL_OES_standard_derivatives : enable\n#endif\n\n#if 0\n // simulate integer math using floats\n\t#define int float\n\t#define ivec2 vec2\n\t#define INT(x) float(x)\n\n\tint ifloor(float v) { return floor(v); }\n\tivec2 ifloor(vec2 v) { return floor(v); }\n\n#else\n // use native integer math\n\tprecision highp int;\n\t#define INT(x) x\n\n\tint ifloor(float v) { return int(v); }\n\tint ifloor(int v) { return v; }\n\tivec2 ifloor(vec2 v) { return ivec2(v); }\n\n#endif\n\nuniform sampler2D uSamplerStrokes;\nuniform sampler2D uSamplerRowStrokes;\nuniform sampler2D uSamplerRows;\nuniform sampler2D uSamplerColStrokes;\nuniform sampler2D uSamplerCols;\n\nuniform ivec2 uStrokeImageSize;\nuniform ivec2 uCellsImageSize;\nuniform ivec2 uGridImageSize;\n\nuniform ivec2 uGridOffset;\nuniform ivec2 uGridSize;\nuniform vec4 uMaterialColor;\n\nIN vec2 vTexCoord;\n\n// some helper functions\nint ROUND(float v) { return ifloor(v + 0.5); }\nivec2 ROUND(vec2 v) { return ifloor(v + 0.5); }\nfloat saturate(float v) { return clamp(v, 0.0, 1.0); }\nvec2 saturate(vec2 v) { return clamp(v, 0.0, 1.0); }\n\nint mul(float v1, int v2) {\n return ifloor(v1 * float(v2));\n}\n\nivec2 mul(vec2 v1, ivec2 v2) {\n return ifloor(v1 * vec2(v2) + 0.5);\n}\n\n// unpack a 16-bit integer from a float vec2\nint getInt16(vec2 v) {\n ivec2 iv = ROUND(v * 255.0);\n return iv.x * INT(128) + iv.y;\n}\n\nvec2 pixelScale;\nvec2 coverage = vec2(0.0);\nvec2 weight = vec2(0.5);\nconst float minDistance = 1.0/8192.0;\nconst float hardness = 1.05; // amount of antialias\n\n// the maximum number of curves in a glyph\nconst int N = INT(250);\n\n// retrieves an indexed pixel from a sampler\nvec4 getTexel(sampler2D sampler, int pos, ivec2 size) {\n int width = size.x;\n int y = ifloor(pos / width);\n int x = pos - y * width; // pos % width\n\n return TEXTURE(sampler, (vec2(x, y) + 0.5) / vec2(size));\n}\n\nvoid calulateCrossings(vec2 p0, vec2 p1, vec2 p2, out vec2 C1, out vec2 C2) {\n\n // get the coefficients of the quadratic in t\n vec2 a = p0 - p1 * 2.0 + p2;\n vec2 b = p0 - p1;\n vec2 c = p0 - vTexCoord;\n\n // found out which values of \'t\' it crosses the axes\n vec2 surd = sqrt(max(vec2(0.0), b * b - a * c));\n vec2 t1 = ((b - surd) / a).yx;\n vec2 t2 = ((b + surd) / a).yx;\n\n // approximate straight lines to avoid rounding errors\n if (abs(a.y) < 0.001)\n t1.x = t2.x = c.y / (2.0 * b.y);\n\n if (abs(a.x) < 0.001)\n t1.y = t2.y = c.x / (2.0 * b.x);\n\n // plug into quadratic formula to find the corrdinates of the crossings\n C1 = ((a * t1 - b * 2.0) * t1 + c) * pixelScale;\n C2 = ((a * t2 - b * 2.0) * t2 + c) * pixelScale;\n}\n\nvoid coverageX(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n // determine on which side of the x-axis the points lie\n bool y0 = p0.y > vTexCoord.y;\n bool y1 = p1.y > vTexCoord.y;\n bool y2 = p2.y > vTexCoord.y;\n\n // could web be under the curve (after t1)?\n if (y1 ? !y2 : y0) {\n // add the coverage for t1\n coverage.x += saturate(C1.x + 0.5);\n // calculate the anti-aliasing for t1\n weight.x = min(weight.x, abs(C1.x));\n }\n\n // are we outside the curve (after t2)?\n if (y1 ? !y0 : y2) {\n // subtract the coverage for t2\n coverage.x -= saturate(C2.x + 0.5);\n // calculate the anti-aliasing for t2\n weight.x = min(weight.x, abs(C2.x));\n }\n}\n\n// this is essentially the same as coverageX, but with the axes swapped\nvoid coverageY(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n bool x0 = p0.x > vTexCoord.x;\n bool x1 = p1.x > vTexCoord.x;\n bool x2 = p2.x > vTexCoord.x;\n\n if (x1 ? !x2 : x0) {\n coverage.y -= saturate(C1.y + 0.5);\n weight.y = min(weight.y, abs(C1.y));\n }\n\n if (x1 ? !x0 : x2) {\n coverage.y += saturate(C2.y + 0.5);\n weight.y = min(weight.y, abs(C2.y));\n }\n}\n\nvoid main() {\n\n // calculate the pixel scale based on screen-coordinates\n pixelScale = hardness / fwidth(vTexCoord);\n\n // which grid cell is this pixel in?\n ivec2 gridCoord = ifloor(vTexCoord * vec2(uGridSize));\n\n // intersect curves in this row\n {\n // the index into the row info bitmap\n int rowIndex = gridCoord.y + uGridOffset.y;\n // fetch the info texel\n vec4 rowInfo = getTexel(uSamplerRows, rowIndex, uGridImageSize);\n // unpack the rowInfo\n int rowStrokeIndex = getInt16(rowInfo.xy);\n int rowStrokeCount = getInt16(rowInfo.zw);\n\n for (int iRowStroke = INT(0); iRowStroke < N; iRowStroke++) {\n if (iRowStroke >= rowStrokeCount)\n break;\n\n // each stroke is made up of 3 points: the start and control point\n // and the start of the next curve.\n // fetch the indices of this pair of strokes:\n vec4 strokeIndices = getTexel(uSamplerRowStrokes, rowStrokeIndex++, uCellsImageSize);\n\n // unpack the stroke index\n int strokePos = getInt16(strokeIndices.xy);\n\n // fetch the two strokes\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n\n // calculate the coverage\n coverageX(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n // intersect curves in this column\n {\n int colIndex = gridCoord.x + uGridOffset.x;\n vec4 colInfo = getTexel(uSamplerCols, colIndex, uGridImageSize);\n int colStrokeIndex = getInt16(colInfo.xy);\n int colStrokeCount = getInt16(colInfo.zw);\n \n for (int iColStroke = INT(0); iColStroke < N; iColStroke++) {\n if (iColStroke >= colStrokeCount)\n break;\n\n vec4 strokeIndices = getTexel(uSamplerColStrokes, colStrokeIndex++, uCellsImageSize);\n\n int strokePos = getInt16(strokeIndices.xy);\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n coverageY(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n weight = saturate(1.0 - weight * 2.0);\n float distance = max(weight.x + weight.y, minDistance); // manhattan approx.\n float antialias = abs(dot(coverage, weight) / distance);\n float cover = min(abs(coverage.x), abs(coverage.y));\n OUT_COLOR = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n OUT_COLOR *= saturate(max(antialias, cover));\n}\n',
+ lineVert: lineDefs + '/*\n Part of the Processing project - http://processing.org\n Copyright (c) 2012-15 The Processing Foundation\n Copyright (c) 2004-12 Ben Fry and Casey Reas\n Copyright (c) 2001-04 Massachusetts Institute of Technology\n This library is free software; you can redistribute it and/or\n modify it under the terms of the GNU Lesser General Public\n License as published by the Free Software Foundation, version 2.1.\n This library is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\n Lesser General Public License for more details.\n You should have received a copy of the GNU Lesser General\n Public License along with this library; if not, write to the\n Free Software Foundation, Inc., 59 Temple Place, Suite 330,\n Boston, MA 02111-1307 USA\n*/\n\n#define PROCESSING_LINE_SHADER\n\nprecision mediump int;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform bool uUseLineColor;\nuniform vec4 uMaterialColor;\n\nuniform vec4 uViewport;\nuniform int uPerspective;\nuniform int uStrokeJoin;\n\nIN vec4 aPosition;\nIN vec3 aTangentIn;\nIN vec3 aTangentOut;\nIN float aSide;\nIN vec4 aVertexColor;\n\nOUT vec4 vColor;\nOUT vec2 vTangent;\nOUT vec2 vCenter;\nOUT vec2 vPosition;\nOUT float vMaxDist;\nOUT float vCap;\nOUT float vJoin;\n\nvec2 lineIntersection(vec2 aPoint, vec2 aDir, vec2 bPoint, vec2 bDir) {\n // Rotate and translate so a starts at the origin and goes out to the right\n bPoint -= aPoint;\n vec2 rotatedBFrom = vec2(\n bPoint.x*aDir.x + bPoint.y*aDir.y,\n bPoint.y*aDir.x - bPoint.x*aDir.y\n );\n vec2 bTo = bPoint + bDir;\n vec2 rotatedBTo = vec2(\n bTo.x*aDir.x + bTo.y*aDir.y,\n bTo.y*aDir.x - bTo.x*aDir.y\n );\n float intersectionDistance =\n rotatedBTo.x + (rotatedBFrom.x - rotatedBTo.x) * rotatedBTo.y /\n (rotatedBTo.y - rotatedBFrom.y);\n return aPoint + aDir * intersectionDistance;\n}\n\nvoid main() {\n // Caps have one of either the in or out tangent set to 0\n vCap = (aTangentIn == vec3(0.)) != (aTangentOut == (vec3(0.)))\n ? 1. : 0.;\n\n // Joins have two unique, defined tangents\n vJoin = (\n aTangentIn != vec3(0.) &&\n aTangentOut != vec3(0.) &&\n aTangentIn != aTangentOut\n ) ? 1. : 0.;\n\n vec4 posp = uModelViewMatrix * aPosition;\n vec4 posqIn = uModelViewMatrix * (aPosition + vec4(aTangentIn, 0));\n vec4 posqOut = uModelViewMatrix * (aPosition + vec4(aTangentOut, 0));\n\n float facingCamera = pow(\n // The word space tangent\'s z value is 0 if it\'s facing the camera\n abs(normalize(posqIn-posp).z),\n\n // Using pow() here to ramp `facingCamera` up from 0 to 1 really quickly\n // so most lines get scaled and don\'t get clipped\n 0.25\n );\n\n // using a scale <1 moves the lines towards the camera\n // in order to prevent popping effects due to half of\n // the line disappearing behind the geometry faces.\n float scale = mix(1., 0.995, facingCamera);\n\n // Moving vertices slightly toward the camera\n // to avoid depth-fighting with the fill triangles.\n // Discussed here:\n // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848 \n posp.xyz = posp.xyz * scale;\n posqIn.xyz = posqIn.xyz * scale;\n posqOut.xyz = posqOut.xyz * scale;\n\n vec4 p = uProjectionMatrix * posp;\n vec4 qIn = uProjectionMatrix * posqIn;\n vec4 qOut = uProjectionMatrix * posqOut;\n vCenter = p.xy;\n\n // formula to convert from clip space (range -1..1) to screen space (range 0..[width or height])\n // screen_p = (p.xy/p.w + <1,1>) * 0.5 * uViewport.zw\n\n // prevent division by W by transforming the tangent formula (div by 0 causes\n // the line to disappear, see https://github.com/processing/processing/issues/5183)\n // t = screen_q - screen_p\n //\n // tangent is normalized and we don\'t care which aDirection it points to (+-)\n // t = +- normalize( screen_q - screen_p )\n // t = +- normalize( (q.xy/q.w+<1,1>)*0.5*uViewport.zw - (p.xy/p.w+<1,1>)*0.5*uViewport.zw )\n //\n // extract common factor, <1,1> - <1,1> cancels out\n // t = +- normalize( (q.xy/q.w - p.xy/p.w) * 0.5 * uViewport.zw )\n //\n // convert to common divisor\n // t = +- normalize( ((q.xy*p.w - p.xy*q.w) / (p.w*q.w)) * 0.5 * uViewport.zw )\n //\n // remove the common scalar divisor/factor, not needed due to normalize and +-\n // (keep uViewport - can\'t remove because it has different components for x and y\n // and corrects for aspect ratio, see https://github.com/processing/processing/issues/5181)\n // t = +- normalize( (q.xy*p.w - p.xy*q.w) * uViewport.zw )\n\n vec2 tangentIn = normalize((qIn.xy*p.w - p.xy*qIn.w) * uViewport.zw);\n vec2 tangentOut = normalize((qOut.xy*p.w - p.xy*qOut.w) * uViewport.zw);\n\n vec2 curPerspScale;\n if(uPerspective == 1) {\n // Perspective ---\n // convert from world to clip by multiplying with projection scaling factor\n // to get the right thickness (see https://github.com/processing/processing/issues/5182)\n\n // The y value of the projection matrix may be flipped if rendering to a Framebuffer.\n // Multiplying again by its sign here negates the flip to get just the scale.\n curPerspScale = (uProjectionMatrix * vec4(1, sign(uProjectionMatrix[1][1]), 0, 0)).xy;\n } else {\n // No Perspective ---\n // multiply by W (to cancel out division by W later in the pipeline) and\n // convert from screen to clip (derived from clip to screen above)\n curPerspScale = p.w / (0.5 * uViewport.zw);\n }\n\n vec2 offset;\n if (vJoin == 1.) {\n vTangent = normalize(tangentIn + tangentOut);\n vec2 normalIn = vec2(-tangentIn.y, tangentIn.x);\n vec2 normalOut = vec2(-tangentOut.y, tangentOut.x);\n float side = sign(aSide);\n float sideEnum = abs(aSide);\n\n // We generate vertices for joins on either side of the centerline, but\n // the "elbow" side is the only one needing a join. By not setting the\n // offset for the other side, all its vertices will end up in the same\n // spot and not render, effectively discarding it.\n if (sign(dot(tangentOut, vec2(-tangentIn.y, tangentIn.x))) != side) {\n // Side enums:\n // 1: the side going into the join\n // 2: the middle of the join\n // 3: the side going out of the join\n if (sideEnum == 2.) {\n // Calculate the position + tangent on either side of the join, and\n // find where the lines intersect to find the elbow of the join\n vec2 c = (posp.xy/posp.w + vec2(1.,1.)) * 0.5 * uViewport.zw;\n vec2 intersection = lineIntersection(\n c + (side * normalIn * uStrokeWeight / 2.),\n tangentIn,\n c + (side * normalOut * uStrokeWeight / 2.),\n tangentOut\n );\n offset = (intersection - c);\n\n // When lines are thick and the angle of the join approaches 180, the\n // elbow might be really far from the center. We\'ll apply a limit to\n // the magnitude to avoid lines going across the whole screen when this\n // happens.\n float mag = length(offset);\n float maxMag = 3. * uStrokeWeight;\n if (mag > maxMag) {\n offset *= maxMag / mag;\n }\n } else if (sideEnum == 1.) {\n offset = side * normalIn * uStrokeWeight / 2.;\n } else if (sideEnum == 3.) {\n offset = side * normalOut * uStrokeWeight / 2.;\n }\n }\n if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 avgNormal = vec2(-vTangent.y, vTangent.x);\n vMaxDist = abs(dot(avgNormal, normalIn * uStrokeWeight / 2.));\n } else {\n vMaxDist = uStrokeWeight / 2.;\n }\n } else {\n vec2 tangent = aTangentIn == vec3(0.) ? tangentOut : tangentIn;\n vTangent = tangent;\n vec2 normal = vec2(-tangent.y, tangent.x);\n\n float normalOffset = sign(aSide);\n // Caps will have side values of -2 or 2 on the edge of the cap that\n // extends out from the line\n float tangentOffset = abs(aSide) - 1.;\n offset = (normal * normalOffset + tangent * tangentOffset) *\n uStrokeWeight * 0.5;\n vMaxDist = uStrokeWeight / 2.;\n }\n vPosition = vCenter + offset;\n\n gl_Position.xy = p.xy + offset.xy * curPerspScale;\n gl_Position.zw = p.zw;\n \n vColor = (uUseLineColor ? aVertexColor : uMaterialColor);\n}\n',
+ lineFrag: lineDefs + 'precision mediump int;\n\nuniform vec4 uMaterialColor;\nuniform int uStrokeCap;\nuniform int uStrokeJoin;\nuniform float uStrokeWeight;\n\nIN vec4 vColor;\nIN vec2 vTangent;\nIN vec2 vCenter;\nIN vec2 vPosition;\nIN float vMaxDist;\nIN float vCap;\nIN float vJoin;\n\nfloat distSquared(vec2 a, vec2 b) {\n vec2 aToB = b - a;\n return dot(aToB, aToB);\n}\n\nvoid main() {\n if (vCap > 0.) {\n if (\n uStrokeCap == STROKE_CAP_ROUND &&\n distSquared(vPosition, vCenter) > uStrokeWeight * uStrokeWeight * 0.25\n ) {\n discard;\n } else if (\n uStrokeCap == STROKE_CAP_SQUARE &&\n dot(vPosition - vCenter, vTangent) > 0.\n ) {\n discard;\n }\n // Use full area for PROJECT\n } else if (vJoin > 0.) {\n if (\n uStrokeJoin == STROKE_JOIN_ROUND &&\n distSquared(vPosition, vCenter) > uStrokeWeight * uStrokeWeight * 0.25\n ) {\n discard;\n } else if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 normal = vec2(-vTangent.y, vTangent.x);\n if (abs(dot(vPosition - vCenter, normal)) > vMaxDist) {\n discard;\n }\n }\n // Use full area for MITER\n }\n OUT_COLOR = vec4(vColor.rgb, 1.) * vColor.a;\n}\n',
+ pointVert: 'IN vec3 aPosition;\nuniform float uPointSize;\nOUT float vStrokeWeight;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvoid main() {\n\tvec4 positionVec4 = vec4(aPosition, 1.0);\n\tgl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n\tgl_PointSize = uPointSize;\n\tvStrokeWeight = uPointSize;\n}\n',
+ pointFrag: 'precision mediump int;\nuniform vec4 uMaterialColor;\nIN float vStrokeWeight;\n\nvoid main(){\n float mask = 0.0;\n\n // make a circular mask using the gl_PointCoord (goes from 0 - 1 on a point)\n // might be able to get a nicer edge on big strokeweights with smoothstep but slightly less performant\n\n mask = step(0.98, length(gl_PointCoord * 2.0 - 1.0));\n\n // if strokeWeight is 1 or less lets just draw a square\n // this prevents weird artifacting from carving circles when our points are really small\n // if strokeWeight is larger than 1, we just use it as is\n\n mask = mix(0.0, mask, clamp(floor(vStrokeWeight - 0.5),0.0,1.0));\n\n // throw away the borders of the mask\n // otherwise we get weird alpha blending issues\n\n if(mask > 0.98){\n discard;\n }\n\n OUT_COLOR = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n}\n',
+ imageLightVert: 'precision highp float;\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nvarying vec3 localPos;\nvarying vec3 vWorldNormal;\nvarying vec3 vWorldPosition;\nvarying vec2 vTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvoid main() {\n // Multiply the position by the matrix.\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition; \n \n // orient the normals and pass to the fragment shader\n vWorldNormal = uNormalMatrix * aNormal;\n \n // send the view position to the fragment shader\n vWorldPosition = (uModelViewMatrix * vec4(aPosition, 1.0)).xyz;\n \n localPos = vWorldPosition;\n vTexCoord = aTexCoord;\n}\n\n\n/*\nin the vertex shader we\'ll compute the world position and world oriented normal of the vertices and pass those to the fragment shader as varyings.\n*/\n',
+ imageLightDiffusedFrag: 'precision highp float;\nvarying vec3 localPos;\n\n// the HDR cubemap converted (can be from an equirectangular environment map.)\nuniform sampler2D environmentMap;\nvarying vec2 vTexCoord;\n\nconst float PI = 3.14159265359;\n\nvec2 nTOE( vec3 v ){\n // x = r sin(phi) cos(theta) \n // y = r cos(phi) \n // z = r sin(phi) sin(theta)\n float phi = acos( v.y );\n // if phi is 0, then there are no x, z components\n float theta = 0.0;\n // else \n theta = acos(v.x / sin(phi));\n float sinTheta = v.z / sin(phi);\n if (sinTheta < 0.0) {\n // Turn it into -theta, but in the 0-2PI range\n theta = 2.0 * PI - theta;\n }\n theta = theta / (2.0 * 3.14159);\n phi = phi / 3.14159 ;\n \n vec2 angles = vec2( phi, theta );\n return angles;\n}\n\nfloat random(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n}\n\nvoid main()\n{ \t \n\t// the sample direction equals the hemisphere\'s orientation\n float phi = vTexCoord.x * 2.0 * PI;\n float theta = vTexCoord.y * PI;\n float x = sin(theta) * cos(phi);\n float y = sin(theta) * sin(phi);\n float z = cos(theta);\n vec3 normal = vec3( x, y, z);\n\n\t// Discretely sampling the hemisphere given the integral\'s\n // spherical coordinates translates to the following fragment code:\n\tvec3 irradiance = vec3(0.0); \n\tvec3 up\t= vec3(0.0, 1.0, 0.0);\n\tvec3 right = normalize(cross(up, normal));\n\tup = normalize(cross(normal, right));\n\n\t// We specify a fixed sampleDelta delta value to traverse\n // the hemisphere; decreasing or increasing the sample delta\n // will increase or decrease the accuracy respectively.\n\tconst float sampleDelta = 0.100;\n\tfloat nrSamples = 0.0;\n float randomOffset = random(gl_FragCoord.xy) * sampleDelta;\n\tfor(float rawPhi = 0.0; rawPhi < 2.0 * PI; rawPhi += sampleDelta)\n\t{\n float phi = rawPhi + randomOffset;\n for(float rawTheta = 0.0; rawTheta < ( 0.5 ) * PI; rawTheta += sampleDelta)\n {\n float theta = rawTheta + randomOffset;\n // spherical to cartesian (in tangent space) // tangent space to world // add each sample result to irradiance\n float x = sin(theta) * cos(phi);\n float y = sin(theta) * sin(phi);\n float z = cos(theta);\n vec3 tangentSample = vec3( x, y, z);\n \n vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * normal;\n irradiance += (texture2D(environmentMap, nTOE(sampleVec)).xyz) * cos(theta) * sin(theta);\n nrSamples++;\n }\n\t}\n\t// divide by the total number of samples taken, giving us the average sampled irradiance.\n\tirradiance = PI * irradiance * (1.0 / float(nrSamples )) ;\n \n \n\tgl_FragColor = vec4(irradiance, 1.0);\n}',
+ imageLightSpecularFrag: 'precision highp float;\r\nvarying vec3 localPos;\r\nvarying vec2 vTexCoord;\r\n\r\n// our texture\r\nuniform sampler2D environmentMap;\r\nuniform float roughness;\r\n\r\nconst float PI = 3.14159265359;\r\n\r\nfloat VanDerCorput(int bits);\r\nvec2 HammersleyNoBitOps(int i, int N);\r\nvec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness);\r\n\r\n\r\nvec2 nTOE( vec3 v ){\r\n // x = r sin(phi) cos(theta) \r\n // y = r cos(phi) \r\n // z = r sin(phi) sin(theta)\r\n float phi = acos( v.y );\r\n // if phi is 0, then there are no x, z components\r\n float theta = 0.0;\r\n // else \r\n theta = acos(v.x / sin(phi));\r\n float sinTheta = v.z / sin(phi);\r\n if (sinTheta < 0.0) {\r\n // Turn it into -theta, but in the 0-2PI range\r\n theta = 2.0 * PI - theta;\r\n }\r\n theta = theta / (2.0 * 3.14159);\r\n phi = phi / 3.14159 ;\r\n \r\n vec2 angles = vec2( phi, theta );\r\n return angles;\r\n}\r\n\r\n\r\nvoid main(){\r\n const int SAMPLE_COUNT = 400; // 4096\r\n int lowRoughnessLimit = int(pow(2.0,(roughness+0.1)*20.0));\r\n float totalWeight = 0.0;\r\n vec3 prefilteredColor = vec3(0.0);\r\n float phi = vTexCoord.x * 2.0 * PI;\r\n float theta = vTexCoord.y * PI;\r\n float x = sin(theta) * cos(phi);\r\n float y = sin(theta) * sin(phi);\r\n float z = cos(theta);\r\n vec3 N = vec3(x,y,z);\r\n vec3 V = N;\r\n for (int i = 0; i < SAMPLE_COUNT; ++i)\r\n {\r\n // break at smaller sample numbers for low roughness levels\r\n if(i == lowRoughnessLimit)\r\n {\r\n break;\r\n }\r\n vec2 Xi = HammersleyNoBitOps(i, SAMPLE_COUNT);\r\n vec3 H = ImportanceSampleGGX(Xi, N, roughness);\r\n vec3 L = normalize(2.0 * dot(V, H) * H - V);\r\n\r\n float NdotL = max(dot(N, L), 0.0);\r\n if (NdotL > 0.0)\r\n {\r\n prefilteredColor += texture2D(environmentMap, nTOE(L)).xyz * NdotL;\r\n totalWeight += NdotL;\r\n }\r\n }\r\n prefilteredColor = prefilteredColor / totalWeight;\r\n\r\n gl_FragColor = vec4(prefilteredColor, 1.0);\r\n}\r\n\r\nvec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness){\r\n float a = roughness * roughness;\r\n\r\n float phi = 2.0 * PI * Xi.x;\r\n float cosTheta = sqrt((1.0 - Xi.y) / (1.0 + (a * a - 1.0) * Xi.y));\r\n float sinTheta = sqrt(1.0 - cosTheta * cosTheta);\r\n // from spherical coordinates to cartesian coordinates\r\n vec3 H;\r\n H.x = cos(phi) * sinTheta;\r\n H.y = sin(phi) * sinTheta;\r\n H.z = cosTheta;\r\n\r\n // from tangent-space vector to world-space sample vector\r\n vec3 up = abs(N.z) < 0.999 ? vec3(0.0, 0.0, 1.0) : vec3(1.0, 0.0, 0.0);\r\n vec3 tangent = normalize(cross(up, N));\r\n vec3 bitangent = cross(N, tangent);\r\n\r\n vec3 sampleVec = tangent * H.x + bitangent * H.y + N * H.z;\r\n return normalize(sampleVec);\r\n}\r\n\r\n\r\nfloat VanDerCorput(int n, int base)\r\n{\r\n#ifdef WEBGL2\r\n\r\n uint bits = uint(n);\r\n bits = (bits << 16u) | (bits >> 16u);\r\n bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u);\r\n bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u);\r\n bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u);\r\n bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u);\r\n return float(bits) * 2.3283064365386963e-10; // / 0x100000000\r\n\r\n#else\r\n\r\n float invBase = 1.0 / float(base);\r\n float denom = 1.0;\r\n float result = 0.0;\r\n\r\n\r\n for (int i = 0; i < 32; ++i)\r\n {\r\n if (n > 0)\r\n {\r\n denom = mod(float(n), 2.0);\r\n result += denom * invBase;\r\n invBase = invBase / 2.0;\r\n n = int(float(n) / 2.0);\r\n }\r\n }\r\n\r\n\r\n return result;\r\n\r\n#endif\r\n}\r\n\r\nvec2 HammersleyNoBitOps(int i, int N)\r\n{\r\n return vec2(float(i) / float(N), VanDerCorput(i, 2));\r\n}\r\n'
+ };
+ var sphereMapping = defaultShaders.sphereMappingFrag;
+ for (var key in defaultShaders) {
+ defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key];
+ }
+ var filterShaderFrags = (_filterShaderFrags = {
+ }, _defineProperty(_filterShaderFrags, constants.GRAY, 'precision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n vec4 tex = texture2D(tex0, vTexCoord);\n float gray = luma(tex.rgb);\n gl_FragColor = vec4(gray, gray, gray, tex.a);\n}\n'), _defineProperty(_filterShaderFrags, constants.ERODE, '// Reduces the bright areas in an image\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform vec2 texelSize;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n // weights 77, 151, 28 taken from src/image/filters.js\n return dot(color, vec3(0.300781, 0.589844, 0.109375));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float lum = luma(color.rgb);\n\n // set current color as the darkest neighbor color\n\n vec4 neighbors[4];\n neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));\n neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));\n neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0, texelSize.y));\n neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));\n\n for (int i = 0; i < 4; i++) {\n vec4 neighborColor = neighbors[i];\n float neighborLum = luma(neighborColor.rgb);\n\n if (neighborLum < lum) {\n color = neighborColor;\n lum = neighborLum;\n }\n }\n\n gl_FragColor = color;\n}\n'), _defineProperty(_filterShaderFrags, constants.DILATE, '// Increase the bright areas in an image\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform vec2 texelSize;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n // weights 77, 151, 28 taken from src/image/filters.js\n return dot(color, vec3(0.300781, 0.589844, 0.109375));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float lum = luma(color.rgb);\n\n // set current color as the brightest neighbor color\n\n vec4 neighbors[4];\n neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));\n neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));\n neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0, texelSize.y));\n neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));\n\n for (int i = 0; i < 4; i++) {\n vec4 neighborColor = neighbors[i];\n float neighborLum = luma(neighborColor.rgb);\n\n if (neighborLum > lum) {\n color = neighborColor;\n lum = neighborLum;\n }\n }\n\n gl_FragColor = color;\n}\n'), _defineProperty(_filterShaderFrags, constants.BLUR, 'precision highp float;\n\n// Two-pass blur filter, unweighted kernel.\n// See also a similar blur at Adam Ferriss\' repo of shader examples:\n// https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/4_image-effects/4-9_single-pass-blur/effect.frag\n\n\nuniform sampler2D tex0;\nvarying vec2 vTexCoord;\nuniform vec2 direction;\nuniform vec2 canvasSize;\nuniform float radius;\n\nfloat random(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n}\n\n// This isn\'t a real Gaussian weight, it\'s a quadratic weight. It\'s what the\n// CPU mode\'s blur uses though, so we also use it here to match.\nfloat quadWeight(float x, float e) {\n return pow(e-abs(x), 2.);\n}\n\nvoid main(){\n vec2 uv = vTexCoord;\n\n // A reasonable maximum number of samples\n const float maxSamples = 64.0;\n\n float numSamples = floor(7. * radius);\n if (fract(numSamples / 2.) == 0.) {\n numSamples++;\n }\n vec4 avg = vec4(0.0);\n float total = 0.0;\n\n // Calculate the spacing to avoid skewing if numSamples > maxSamples\n float spacing = 1.0;\n if (numSamples > maxSamples) {\n spacing = numSamples / maxSamples;\n numSamples = maxSamples;\n }\n\n float randomOffset = (spacing - 1.0) * mix(-0.5, 0.5, random(gl_FragCoord.xy));\n for (float i = 0.0; i < maxSamples; i++) {\n if (i >= numSamples) break;\n\n float sample = i * spacing - (numSamples - 1.0) * 0.5 * spacing + randomOffset;\n vec2 sampleCoord = uv + vec2(sample, sample) / canvasSize * direction;\n float weight = quadWeight(sample, (numSamples - 1.0) * 0.5 * spacing);\n\n avg += weight * texture2D(tex0, sampleCoord);\n total += weight;\n }\n\n avg /= total;\n gl_FragColor = avg;\n}\n'), _defineProperty(_filterShaderFrags, constants.POSTERIZE, '// Limit color space for a stylized cartoon / poster effect\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform float filterParameter;\n\nvec3 quantize(vec3 color, float n) {\n // restrict values to N options/bins\n // and floor each channel to nearest value\n //\n // eg. when N = 5, values = 0.0, 0.25, 0.50, 0.75, 1.0\n // then quantize (0.1, 0.7, 0.9) -> (0.0, 0.5, 1.0)\n\n color = color * n;\n color = floor(color);\n color = color / (n - 1.0);\n return color;\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n\n vec3 restrictedColor = quantize(color.rgb / color.a, filterParameter);\n\n gl_FragColor = vec4(restrictedColor.rgb * color.a, color.a);\n}\n'), _defineProperty(_filterShaderFrags, constants.OPAQUE, '// Set alpha channel to entirely opaque\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n gl_FragColor = vec4(color.rgb / color.a, 1.0);\n}\n'), _defineProperty(_filterShaderFrags, constants.INVERT, '// Set each pixel to inverse value\n// Note that original INVERT does not change the opacity, so this follows suit\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nvoid main() {\nvec4 color = texture2D(tex0, vTexCoord);\nvec3 origColor = color.rgb / color.a;\nvec3 invertedColor = vec3(1.0) - origColor;\ngl_FragColor = vec4(invertedColor * color.a, color.a);\n}\n'), _defineProperty(_filterShaderFrags, constants.THRESHOLD, '// Convert pixels to either white or black, \n// depending on if their luma is above or below filterParameter\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform float filterParameter;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float gray = luma(color.rgb / color.a);\n // floor() used to match src/image/filters.js\n float threshold = floor(filterParameter * 255.0) / 255.0;\n float blackOrWhite = step(threshold, gray);\n gl_FragColor = vec4(vec3(blackOrWhite) * color.a, color.a);\n}\n'), _filterShaderFrags);
+ var filterShaderVert = 'uniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\n// texcoords only come from p5 to vertex shader\n// so pass texcoords on to the fragment shader in a varying variable\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n // transferring texcoords for the frag shader\n vTexCoord = aTexCoord;\n\n // copy position with a fourth coordinate for projection (1.0 is normal)\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n';
+ /**
+ * @module Rendering
+ * @submodule Rendering
+ * @for p5
+ */
+ /**
+ * Set attributes for the WebGL Drawing context.
+ * This is a way of adjusting how the WebGL
+ * renderer works to fine-tune the display and performance.
+ *
+ * Note that this will reinitialize the drawing context
+ * if called after the WebGL canvas is made.
+ *
+ * If an object is passed as the parameter, all attributes
+ * not declared in the object will be set to defaults.
+ *
+ * The available attributes are:
+ *
+ * alpha - indicates if the canvas contains an alpha buffer
+ * default is true
+ *
+ * depth - indicates whether the drawing buffer has a depth buffer
+ * of at least 16 bits - default is true
+ *
+ * stencil - indicates whether the drawing buffer has a stencil buffer
+ * of at least 8 bits
+ *
+ * antialias - indicates whether or not to perform anti-aliasing
+ * default is false (true in Safari)
+ *
+ * premultipliedAlpha - indicates that the page compositor will assume
+ * the drawing buffer contains colors with pre-multiplied alpha
+ * default is true
+ *
+ * preserveDrawingBuffer - if true the buffers will not be cleared and
+ * and will preserve their values until cleared or overwritten by author
+ * (note that p5 clears automatically on draw loop)
+ * default is true
+ *
+ * perPixelLighting - if true, per-pixel lighting will be used in the
+ * lighting shader otherwise per-vertex lighting is used.
+ * default is true.
+ *
+ * version - either 1 or 2, to specify which WebGL version to ask for. By
+ * default, WebGL 2 will be requested. If WebGL2 is not available, it will
+ * fall back to WebGL 1. You can check what version is used with by looking at
+ * the global `webglVersion` property.
+ *
+ * @method setAttributes
+ * @for p5
+ * @param {String} key Name of attribute
+ * @param {Boolean} value New value of named attribute
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * push();
+ * rotateZ(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * rotateY(frameCount * 0.02);
+ * fill(0, 0, 0);
+ * box(50);
+ * pop();
+ * }
+ *
+ *
+ *
+ * Now with the antialias attribute set to true.
+ *
+ *
+ *
+ * function setup() {
+ * setAttributes('antialias', true);
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * push();
+ * rotateZ(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * rotateY(frameCount * 0.02);
+ * fill(0, 0, 0);
+ * box(50);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // press the mouse button to disable perPixelLighting
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ * let lights = [
+ * { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+ * { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+ * { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+ * { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+ * { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+ * { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+ * ];
+ *
+ * function draw() {
+ * let t = millis() / 1000 + 1000;
+ * background(0);
+ * directionalLight(color('#222'), 1, 1, 1);
+ *
+ * for (let i = 0; i < lights.length; i++) {
+ * let light = lights[i];
+ * pointLight(
+ * color(light.c),
+ * p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+ * );
+ * }
+ *
+ * specularMaterial(255);
+ * sphere(width * 0.1);
+ *
+ * rotateX(t * 0.77);
+ * rotateY(t * 0.83);
+ * rotateZ(t * 0.91);
+ * torus(width * 0.3, width * 0.07, 24, 10);
+ * }
+ *
+ * function mousePressed() {
+ * setAttributes('perPixelLighting', false);
+ * noStroke();
+ * fill(255);
+ * }
+ * function mouseReleased() {
+ * setAttributes('perPixelLighting', true);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ *
+ *
+ * @alt a rotating cube with smoother edges
+ */
+ /**
+ * @method setAttributes
+ * @for p5
+ * @param {Object} obj object with key-value pairs
+ */
+ _main.default.prototype.setAttributes = function (key, value) {
+ if (typeof this._glAttributes === 'undefined') {
+ console.log('You are trying to use setAttributes on a p5.Graphics object ' + 'that does not use a WEBGL renderer.');
+ return;
+ }
+ var unchanged = true;
+ if (typeof value !== 'undefined') {
+ //first time modifying the attributes
+ if (this._glAttributes === null) {
+ this._glAttributes = {
+ };
+ }
+ if (this._glAttributes[key] !== value) {
+ //changing value of previously altered attribute
+ this._glAttributes[key] = value;
+ unchanged = false;
+ } //setting all attributes with some change
+
+ } else if (key instanceof Object) {
+ if (this._glAttributes !== key) {
+ this._glAttributes = key;
+ unchanged = false;
+ }
+ } //@todo_FES
+
+ if (!this._renderer.isP3D || unchanged) {
+ return;
+ }
+ if (!this._setupDone) {
+ for (var x in this._renderer.retainedMode.geometry) {
+ if (this._renderer.retainedMode.geometry.hasOwnProperty(x)) {
+ _main.default._friendlyError('Sorry, Could not set the attributes, you need to call setAttributes() ' + 'before calling the other drawing methods in setup()');
+ return;
+ }
+ }
+ }
+ this.push();
+ this._renderer._resetContext();
+ this.pop();
+ if (this._renderer._curCamera) {
+ this._renderer._curCamera._renderer = this._renderer;
+ }
+ };
+ /**
+ * @private
+ * @param {Uint8Array|Float32Array|undefined} pixels An existing pixels array to reuse if the size is the same
+ * @param {WebGLRenderingContext} gl The WebGL context
+ * @param {WebGLFramebuffer|null} framebuffer The Framebuffer to read
+ * @param {Number} x The x coordiante to read, premultiplied by pixel density
+ * @param {Number} y The y coordiante to read, premultiplied by pixel density
+ * @param {Number} width The width in pixels to be read (factoring in pixel density)
+ * @param {Number} height The height in pixels to be read (factoring in pixel density)
+ * @param {GLEnum} format Either RGB or RGBA depending on how many channels to read
+ * @param {GLEnum} type The datatype of each channel, e.g. UNSIGNED_BYTE or FLOAT
+ * @param {Number|undefined} flipY If provided, the total height with which to flip the y axis about
+ * @returns {Uint8Array|Float32Array} pixels A pixels array with the current state of the
+ * WebGL context read into it
+ */
+ function readPixelsWebGL(pixels, gl, framebuffer, x, y, width, height, format, type, flipY) {
+ // Record the currently bound framebuffer so we can go back to it after, and
+ // bind the framebuffer we want to read from
+ var prevFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+ var channels = format === gl.RGBA ? 4 : 3;
+ // Make a pixels buffer if it doesn't already exist
+ var len = width * height * channels;
+ var TypedArrayClass = type === gl.UNSIGNED_BYTE ? Uint8Array : Float32Array;
+ if (!(pixels instanceof TypedArrayClass) || pixels.length !== len) {
+ pixels = new TypedArrayClass(len);
+ }
+ gl.readPixels(x, flipY ? flipY - y - height : y, width, height, format, type, pixels);
+ // Re-bind whatever was previously bound
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer);
+ if (flipY) {
+ // WebGL pixels are inverted compared to 2D pixels, so we have to flip
+ // the resulting rows. Adapted from https://stackoverflow.com/a/41973289
+ var halfHeight = Math.floor(height / 2);
+ var tmpRow = new TypedArrayClass(width * channels);
+ for (var _y = 0; _y < halfHeight; _y++) {
+ var topOffset = _y * width * 4;
+ var bottomOffset = (height - _y - 1) * width * 4;
+ tmpRow.set(pixels.subarray(topOffset, topOffset + width * 4));
+ pixels.copyWithin(topOffset, bottomOffset, bottomOffset + width * 4);
+ pixels.set(tmpRow, bottomOffset);
+ }
+ }
+ return pixels;
+ } /**
+ * @private
+ * @param {WebGLRenderingContext} gl The WebGL context
+ * @param {WebGLFramebuffer|null} framebuffer The Framebuffer to read
+ * @param {Number} x The x coordinate to read, premultiplied by pixel density
+ * @param {Number} y The y coordinate to read, premultiplied by pixel density
+ * @param {GLEnum} format Either RGB or RGBA depending on how many channels to read
+ * @param {GLEnum} type The datatype of each channel, e.g. UNSIGNED_BYTE or FLOAT
+ * @param {Number|undefined} flipY If provided, the total height with which to flip the y axis about
+ * @returns {Number[]} pixels The channel data for the pixel at that location
+ */
+
+ function readPixelWebGL(gl, framebuffer, x, y, format, type, flipY) {
+ // Record the currently bound framebuffer so we can go back to it after, and
+ // bind the framebuffer we want to read from
+ var prevFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+ var channels = format === gl.RGBA ? 4 : 3;
+ var TypedArrayClass = type === gl.UNSIGNED_BYTE ? Uint8Array : Float32Array;
+ var pixels = new TypedArrayClass(channels);
+ gl.readPixels(x, flipY ? flipY - y - 1 : y, 1, 1, format, type, pixels);
+ // Re-bind whatever was previously bound
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer);
+ return Array.from(pixels);
+ } /**
+ * 3D graphics class
+ * @private
+ * @class p5.RendererGL
+ * @constructor
+ * @extends p5.Renderer
+ * @todo extend class to include public method for offscreen
+ * rendering (FBO).
+ */
+
+ _main.default.RendererGL = /*#__PURE__*/ function (_p5$Renderer) {
+ _inherits(RendererGL, _p5$Renderer);
+ var _super = _createSuper(RendererGL);
+ function RendererGL(elt, pInst, isMainCanvas, attr) {
+ var _this;
+ _classCallCheck(this, RendererGL);
+ _this = _super.call(this, elt, pInst, isMainCanvas);
+ _this._setAttributeDefaults(pInst);
+ _this._initContext();
+ _this.isP3D = true; //lets us know we're in 3d mode
+ // When constructing a new p5.Geometry, this will represent the builder
+ _this.geometryBuilder = undefined;
+ // This redundant property is useful in reminding you that you are
+ // interacting with WebGLRenderingContext, still worth considering future removal
+ _this.GL = _this.drawingContext;
+ _this._pInst._setProperty('drawingContext', _this.drawingContext);
+ // erasing
+ _this._isErasing = false;
+ // clipping
+ _this._clipDepths = [
+ ];
+ _this._isClipApplied = false;
+ _this._stencilTestOn = false;
+ // lights
+ _this._enableLighting = false;
+ _this.ambientLightColors = [
+ ];
+ _this.mixedAmbientLight = [
+ ];
+ _this.mixedSpecularColor = [
+ ];
+ _this.specularColors = [
+ 1,
+ 1,
+ 1
+ ];
+ _this.directionalLightDirections = [
+ ];
+ _this.directionalLightDiffuseColors = [
+ ];
+ _this.directionalLightSpecularColors = [
+ ];
+ _this.pointLightPositions = [
+ ];
+ _this.pointLightDiffuseColors = [
+ ];
+ _this.pointLightSpecularColors = [
+ ];
+ _this.spotLightPositions = [
+ ];
+ _this.spotLightDirections = [
+ ];
+ _this.spotLightDiffuseColors = [
+ ];
+ _this.spotLightSpecularColors = [
+ ];
+ _this.spotLightAngle = [
+ ];
+ _this.spotLightConc = [
+ ];
+ // This property contains the input image if imageLight function
+ // is called.
+ // activeImageLight is checked by _setFillUniforms
+ // for sending uniforms to the fillshader
+ _this.activeImageLight = null;
+ // If activeImageLight property is Null, diffusedTextures,
+ // specularTextures are Empty.
+ // Else, it maps a p5.Image used by imageLight() to a p5.framebuffer.
+ // p5.framebuffer for this are calculated in getDiffusedTexture function
+ _this.diffusedTextures = new Map();
+ // p5.framebuffer for this are calculated in getSpecularTexture function
+ _this.specularTextures = new Map();
+ _this.drawMode = constants.FILL;
+ _this.curFillColor = _this._cachedFillStyle = [
+ 1,
+ 1,
+ 1,
+ 1
+ ];
+ _this.curAmbientColor = _this._cachedFillStyle = [
+ 1,
+ 1,
+ 1,
+ 1
+ ];
+ _this.curSpecularColor = _this._cachedFillStyle = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _this.curEmissiveColor = _this._cachedFillStyle = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _this.curStrokeColor = _this._cachedStrokeStyle = [
+ 0,
+ 0,
+ 0,
+ 1
+ ];
+ _this.curBlendMode = constants.BLEND;
+ _this.preEraseBlend = undefined;
+ _this._cachedBlendMode = undefined;
+ if (_this.webglVersion === constants.WEBGL2) {
+ _this.blendExt = _this.GL;
+ } else {
+ _this.blendExt = _this.GL.getExtension('EXT_blend_minmax');
+ }
+ _this._isBlending = false;
+ _this._hasSetAmbient = false;
+ _this._useSpecularMaterial = false;
+ _this._useEmissiveMaterial = false;
+ _this._useNormalMaterial = false;
+ _this._useShininess = 1;
+ _this._useMetalness = 0;
+ _this._useLineColor = false;
+ _this._useVertexColor = false;
+ _this.registerEnabled = new Set();
+ _this._tint = [
+ 255,
+ 255,
+ 255,
+ 255
+ ];
+ // lightFalloff variables
+ _this.constantAttenuation = 1;
+ _this.linearAttenuation = 0;
+ _this.quadraticAttenuation = 0;
+ /**
+ * model view, projection, & normal
+ * matrices
+ */
+ _this.uMVMatrix = new _main.default.Matrix();
+ _this.uPMatrix = new _main.default.Matrix();
+ _this.uNMatrix = new _main.default.Matrix('mat3');
+ _this.curMatrix = new _main.default.Matrix('mat3');
+ // Current vertex normal
+ _this._currentNormal = new _main.default.Vector(0, 0, 1);
+ // Camera
+ _this._curCamera = new _main.default.Camera(_assertThisInitialized(_this));
+ _this._curCamera._computeCameraDefaultSettings();
+ _this._curCamera._setDefaultCamera();
+ // FilterCamera
+ _this.filterCamera = new _main.default.Camera(_assertThisInitialized(_this));
+ _this.filterCamera._computeCameraDefaultSettings();
+ _this.filterCamera._setDefaultCamera();
+ // Information about the previous frame's touch object
+ // for executing orbitControl()
+ _this.prevTouches = [
+ ];
+ // Velocity variable for use with orbitControl()
+ _this.zoomVelocity = 0;
+ _this.rotateVelocity = new _main.default.Vector(0, 0);
+ _this.moveVelocity = new _main.default.Vector(0, 0);
+ // Flags for recording the state of zooming, rotation and moving
+ _this.executeZoom = false;
+ _this.executeRotateAndMove = false;
+ _this.specularShader = undefined;
+ _this.sphereMapping = undefined;
+ _this.diffusedShader = undefined;
+ _this._defaultLightShader = undefined;
+ _this._defaultImmediateModeShader = undefined;
+ _this._defaultNormalShader = undefined;
+ _this._defaultColorShader = undefined;
+ _this._defaultPointShader = undefined;
+ _this.userFillShader = undefined;
+ _this.userStrokeShader = undefined;
+ _this.userPointShader = undefined;
+ // Default drawing is done in Retained Mode
+ // Geometry and Material hashes stored here
+ _this.retainedMode = {
+ geometry: {
+ },
+ buffers: {
+ stroke: [
+ new _main.default.RenderBuffer(4, 'lineVertexColors', 'lineColorBuffer', 'aVertexColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineVertices', 'lineVerticesBuffer', 'aPosition', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineTangentsIn', 'lineTangentsInBuffer', 'aTangentIn', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineTangentsOut', 'lineTangentsOutBuffer', 'aTangentOut', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(1, 'lineSides', 'lineSidesBuffer', 'aSide', _assertThisInitialized(_this))
+ ],
+ fill: [
+ new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(3, 'vertexNormals', 'normalBuffer', 'aNormal', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(4, 'vertexColors', 'colorBuffer', 'aVertexColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'vertexAmbients', 'ambientBuffer', 'aAmbientColor', _assertThisInitialized(_this)),
+ //new BufferDef(3, 'vertexSpeculars', 'specularBuffer', 'aSpecularColor'),
+ new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', _assertThisInitialized(_this), _this._flatten)
+ ],
+ text: [
+ new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', _assertThisInitialized(_this), _this._flatten)
+ ]
+ }
+ };
+ // Immediate Mode
+ // Geometry and Material hashes stored here
+ _this.immediateMode = {
+ geometry: new _main.default.Geometry(),
+ shapeMode: constants.TRIANGLE_FAN,
+ contourIndices: [
+ ],
+ _bezierVertex: [
+ ],
+ _quadraticVertex: [
+ ],
+ _curveVertex: [
+ ],
+ buffers: {
+ fill: [
+ new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(3, 'vertexNormals', 'normalBuffer', 'aNormal', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(4, 'vertexColors', 'colorBuffer', 'aVertexColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'vertexAmbients', 'ambientBuffer', 'aAmbientColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', _assertThisInitialized(_this), _this._flatten)
+ ],
+ stroke: [
+ new _main.default.RenderBuffer(4, 'lineVertexColors', 'lineColorBuffer', 'aVertexColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineVertices', 'lineVerticesBuffer', 'aPosition', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineTangentsIn', 'lineTangentsInBuffer', 'aTangentIn', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineTangentsOut', 'lineTangentsOutBuffer', 'aTangentOut', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(1, 'lineSides', 'lineSidesBuffer', 'aSide', _assertThisInitialized(_this))
+ ],
+ point: _this.GL.createBuffer()
+ }
+ };
+ _this.pointSize = 5; //default point size
+ _this.curStrokeWeight = 1;
+ _this.curStrokeCap = constants.ROUND;
+ _this.curStrokeJoin = constants.ROUND;
+ // map of texture sources to textures created in this gl context via this.getTexture(src)
+ _this.textures = new Map();
+ // set of framebuffers in use
+ _this.framebuffers = new Set();
+ // stack of active framebuffers
+ _this.activeFramebuffers = [
+ ];
+ // for post processing step
+ _this.filterShader = undefined;
+ _this.filterLayer = undefined;
+ _this.filterLayerTemp = undefined;
+ _this.defaultFilterShaders = {
+ };
+ _this.textureMode = constants.IMAGE;
+ // default wrap settings
+ _this.textureWrapX = constants.CLAMP;
+ _this.textureWrapY = constants.CLAMP;
+ _this._tex = null;
+ _this._curveTightness = 6;
+ // lookUpTable for coefficients needed to be calculated for bezierVertex, same are used for curveVertex
+ _this._lookUpTableBezier = [
+ ];
+ // lookUpTable for coefficients needed to be calculated for quadraticVertex
+ _this._lookUpTableQuadratic = [
+ ];
+ // current curveDetail in the Bezier lookUpTable
+ _this._lutBezierDetail = 0;
+ // current curveDetail in the Quadratic lookUpTable
+ _this._lutQuadraticDetail = 0;
+ // Used to distinguish between user calls to vertex() and internal calls
+ _this.isProcessingVertices = false;
+ _this._tessy = _this._initTessy();
+ _this.fontInfos = {
+ };
+ _this._curShader = undefined;
+ return _this;
+ } /**
+ * Starts creating a new p5.Geometry. Subsequent shapes drawn will be added
+ * to the geometry and then returned when
+ * endGeometry() is called. One can also use
+ * buildGeometry() to pass a function that
+ * draws shapes.
+ *
+ * If you need to draw complex shapes every frame which don't change over time,
+ * combining them upfront with `beginGeometry()` and `endGeometry()` and then
+ * drawing that will run faster than repeatedly drawing the individual pieces.
+ *
+ * @method beginGeometry
+ */
+
+ _createClass(RendererGL, [
+ {
+ key: 'beginGeometry',
+ value: function beginGeometry() {
+ if (this.geometryBuilder) {
+ throw new Error('It looks like `beginGeometry()` is being called while another p5.Geometry is already being build.');
+ }
+ this.geometryBuilder = new _GeometryBuilder.default(this);
+ } /**
+ * Finishes creating a new p5.Geometry that was
+ * started using beginGeometry(). One can also
+ * use buildGeometry() to pass a function that
+ * draws shapes.
+ *
+ * @method endGeometry
+ * @returns {p5.Geometry} The model that was built.
+ */
+
+ },
+ {
+ key: 'endGeometry',
+ value: function endGeometry() {
+ if (!this.geometryBuilder) {
+ throw new Error('Make sure you call beginGeometry() before endGeometry()!');
+ }
+ var geometry = this.geometryBuilder.finish();
+ this.geometryBuilder = undefined;
+ return geometry;
+ } /**
+ * Creates a new p5.Geometry that contains all
+ * the shapes drawn in a provided callback function. The returned combined shape
+ * can then be drawn all at once using model().
+ *
+ * If you need to draw complex shapes every frame which don't change over time,
+ * combining them with `buildGeometry()` once and then drawing that will run
+ * faster than repeatedly drawing the individual pieces.
+ *
+ * One can also draw shapes directly between
+ * beginGeometry() and
+ * endGeometry() instead of using a callback
+ * function.
+ *
+ * @method buildGeometry
+ * @param {Function} callback A function that draws shapes.
+ * @returns {p5.Geometry} The model that was built from the callback function.
+ */
+
+ },
+ {
+ key: 'buildGeometry',
+ value: function buildGeometry(callback) {
+ this.beginGeometry();
+ callback();
+ return this.endGeometry();
+ } //////////////////////////////////////////////
+ // Setting
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: '_setAttributeDefaults',
+ value: function _setAttributeDefaults(pInst) {
+ // See issue #3850, safer to enable AA in Safari
+ var applyAA = navigator.userAgent.toLowerCase().includes('safari');
+ var defaults = {
+ alpha: true,
+ depth: true,
+ stencil: true,
+ antialias: applyAA,
+ premultipliedAlpha: true,
+ preserveDrawingBuffer: true,
+ perPixelLighting: true,
+ version: 2
+ };
+ if (pInst._glAttributes === null) {
+ pInst._glAttributes = defaults;
+ } else {
+ pInst._glAttributes = Object.assign(defaults, pInst._glAttributes);
+ }
+ return;
+ }
+ },
+ {
+ key: '_initContext',
+ value: function _initContext() {
+ if (this._pInst._glAttributes.version !== 1) {
+ // Unless WebGL1 is explicitly asked for, try to create a WebGL2 context
+ this.drawingContext = this.canvas.getContext('webgl2', this._pInst._glAttributes);
+ }
+ this.webglVersion = this.drawingContext ? constants.WEBGL2 : constants.WEBGL;
+ // If this is the main canvas, make sure the global `webglVersion` is set
+ this._pInst._setProperty('webglVersion', this.webglVersion);
+ if (!this.drawingContext) {
+ // If we were unable to create a WebGL2 context (either because it was
+ // disabled via `setAttributes({ version: 1 })` or because the device
+ // doesn't support it), fall back to a WebGL1 context
+ this.drawingContext = this.canvas.getContext('webgl', this._pInst._glAttributes) || this.canvas.getContext('experimental-webgl', this._pInst._glAttributes);
+ }
+ if (this.drawingContext === null) {
+ throw new Error('Error creating webgl context');
+ } else {
+ var gl = this.drawingContext;
+ gl.enable(gl.DEPTH_TEST);
+ gl.depthFunc(gl.LEQUAL);
+ gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+ // Make sure all images are loaded into the canvas premultiplied so that
+ // they match the way we render colors. This will make framebuffer textures
+ // be encoded the same way as textures from everything else.
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+ this._viewport = this.drawingContext.getParameter(this.drawingContext.VIEWPORT);
+ }
+ }
+ },
+ {
+ key: '_getParam',
+ value: function _getParam() {
+ var gl = this.drawingContext;
+ return gl.getParameter(gl.MAX_TEXTURE_SIZE);
+ }
+ },
+ {
+ key: '_adjustDimensions',
+ value: function _adjustDimensions(width, height) {
+ if (!this._maxTextureSize) {
+ this._maxTextureSize = this._getParam();
+ }
+ var maxTextureSize = this._maxTextureSize;
+ var maxAllowedPixelDimensions = _main.default.prototype._maxAllowedPixelDimensions;
+ maxAllowedPixelDimensions = Math.floor(maxTextureSize / this.pixelDensity());
+ var adjustedWidth = Math.min(width, maxAllowedPixelDimensions);
+ var adjustedHeight = Math.min(height, maxAllowedPixelDimensions);
+ if (adjustedWidth !== width || adjustedHeight !== height) {
+ console.warn('Warning: The requested width/height exceeds hardware limits. ' + 'Adjusting dimensions to width: '.concat(adjustedWidth, ', height: ').concat(adjustedHeight, '.'));
+ }
+ return {
+ adjustedWidth: adjustedWidth,
+ adjustedHeight: adjustedHeight
+ };
+ } //This is helper function to reset the context anytime the attributes
+ //are changed with setAttributes()
+
+ },
+ {
+ key: '_resetContext',
+ value: function _resetContext(options, callback) {
+ var w = this.width;
+ var h = this.height;
+ var defaultId = this.canvas.id;
+ var isPGraphics = this._pInst instanceof _main.default.Graphics;
+ if (isPGraphics) {
+ var pg = this._pInst;
+ pg.canvas.parentNode.removeChild(pg.canvas);
+ pg.canvas = document.createElement('canvas');
+ var node = pg._pInst._userNode || document.body;
+ node.appendChild(pg.canvas);
+ _main.default.Element.call(pg, pg.canvas, pg._pInst);
+ pg.width = w;
+ pg.height = h;
+ } else {
+ var c = this.canvas;
+ if (c) {
+ c.parentNode.removeChild(c);
+ }
+ c = document.createElement('canvas');
+ c.id = defaultId;
+ if (this._pInst._userNode) {
+ this._pInst._userNode.appendChild(c);
+ } else {
+ document.body.appendChild(c);
+ }
+ this._pInst.canvas = c;
+ this.canvas = c;
+ }
+ var renderer = new _main.default.RendererGL(this._pInst.canvas, this._pInst, !isPGraphics);
+ this._pInst._setProperty('_renderer', renderer);
+ renderer.resize(w, h);
+ renderer._applyDefaults();
+ if (!isPGraphics) {
+ this._pInst._elements.push(renderer);
+ }
+ if (typeof callback === 'function') {
+ //setTimeout with 0 forces the task to the back of the queue, this ensures that
+ //we finish switching out the renderer
+ setTimeout(function () {
+ callback.apply(window._renderer, options);
+ }, 0);
+ }
+ } /**
+ * @class p5.RendererGL
+ */
+
+ },
+ {
+ key: '_update',
+ value: function _update() {
+ // reset model view and apply initial camera transform
+ // (containing only look at info; no projection).
+ this.uMVMatrix.set(this._curCamera.cameraMatrix);
+ // reset light data for new frame.
+ this.ambientLightColors.length = 0;
+ this.specularColors = [
+ 1,
+ 1,
+ 1
+ ];
+ this.directionalLightDirections.length = 0;
+ this.directionalLightDiffuseColors.length = 0;
+ this.directionalLightSpecularColors.length = 0;
+ this.pointLightPositions.length = 0;
+ this.pointLightDiffuseColors.length = 0;
+ this.pointLightSpecularColors.length = 0;
+ this.spotLightPositions.length = 0;
+ this.spotLightDirections.length = 0;
+ this.spotLightDiffuseColors.length = 0;
+ this.spotLightSpecularColors.length = 0;
+ this.spotLightAngle.length = 0;
+ this.spotLightConc.length = 0;
+ this._enableLighting = false;
+ //reset tint value for new frame
+ this._tint = [
+ 255,
+ 255,
+ 255,
+ 255
+ ];
+ //Clear depth every frame
+ this.GL.clearStencil(0);
+ this.GL.clear(this.GL.DEPTH_BUFFER_BIT | this.GL.STENCIL_BUFFER_BIT);
+ this.GL.disable(this.GL.STENCIL_TEST);
+ } /**
+ * [background description]
+ */
+
+ },
+ {
+ key: 'background',
+ value: function background() {
+ var _this$_pInst;
+ var _col = (_this$_pInst = this._pInst).color.apply(_this$_pInst, arguments);
+ var _r = _col.levels[0] / 255;
+ var _g = _col.levels[1] / 255;
+ var _b = _col.levels[2] / 255;
+ var _a = _col.levels[3] / 255;
+ this.clear(_r, _g, _b, _a);
+ } //////////////////////////////////////////////
+ // COLOR
+ //////////////////////////////////////////////
+ /**
+ * Basic fill material for geometry with a given color
+ * @method fill
+ * @class p5.RendererGL
+ * @param {Number|Number[]|String|p5.Color} v1 gray value,
+ * red or hue value (depending on the current color mode),
+ * or color Array, or CSS color string
+ * @param {Number} [v2] green or saturation value
+ * @param {Number} [v3] blue or brightness value
+ * @param {Number} [a] opacity
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * fill(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(75, 75, 75);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black canvas with purple cube spinning
+ */
+
+ },
+ {
+ key: 'fill',
+ value: function fill(v1, v2, v3, a) {
+ //see material.js for more info on color blending in webgl
+ var color = _main.default.prototype.color.apply(this._pInst, arguments);
+ this.curFillColor = color._array;
+ this.drawMode = constants.FILL;
+ this._useNormalMaterial = false;
+ this._tex = null;
+ } /**
+ * Basic stroke material for geometry with a given color
+ * @method stroke
+ * @param {Number|Number[]|String|p5.Color} v1 gray value,
+ * red or hue value (depending on the current color mode),
+ * or color Array, or CSS color string
+ * @param {Number} [v2] green or saturation value
+ * @param {Number} [v3] blue or brightness value
+ * @param {Number} [a] opacity
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * stroke(240, 150, 150);
+ * fill(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(75, 75, 75);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black canvas with purple cube with pink outline spinning
+ */
+
+ },
+ {
+ key: 'stroke',
+ value: function stroke(r, g, b, a) {
+ var color = _main.default.prototype.color.apply(this._pInst, arguments);
+ this.curStrokeColor = color._array;
+ }
+ },
+ {
+ key: 'strokeCap',
+ value: function strokeCap(cap) {
+ this.curStrokeCap = cap;
+ }
+ },
+ {
+ key: 'strokeJoin',
+ value: function strokeJoin(join) {
+ this.curStrokeJoin = join;
+ }
+ },
+ {
+ key: 'getFilterLayer',
+ value: function getFilterLayer() {
+ if (!this.filterLayer) {
+ this.filterLayer = this._pInst.createFramebuffer();
+ }
+ return this.filterLayer;
+ }
+ },
+ {
+ key: 'getFilterLayerTemp',
+ value: function getFilterLayerTemp() {
+ if (!this.filterLayerTemp) {
+ this.filterLayerTemp = this._pInst.createFramebuffer();
+ }
+ return this.filterLayerTemp;
+ }
+ },
+ {
+ key: 'matchSize',
+ value: function matchSize(fboToMatch, target) {
+ if (fboToMatch.width !== target.width || fboToMatch.height !== target.height) {
+ fboToMatch.resize(target.width, target.height);
+ }
+ if (fboToMatch.pixelDensity() !== target.pixelDensity()) {
+ fboToMatch.pixelDensity(target.pixelDensity());
+ }
+ }
+ },
+ {
+ key: 'filter',
+ value: function filter() {
+ var _this2 = this;
+ var fbo = this.getFilterLayer();
+ // use internal shader for filter constants BLUR, INVERT, etc
+ var filterParameter = undefined;
+ var operation = undefined;
+ if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
+ var _defaults;
+ operation = arguments.length <= 0 ? undefined : arguments[0];
+ var defaults = (_defaults = {
+ }, _defineProperty(_defaults, constants.BLUR, 3), _defineProperty(_defaults, constants.POSTERIZE, 4), _defineProperty(_defaults, constants.THRESHOLD, 0.5), _defaults);
+ var useDefaultParam = operation in defaults && (arguments.length <= 1 ? undefined : arguments[1]) === undefined;
+ filterParameter = useDefaultParam ? defaults[operation] : arguments.length <= 1 ? undefined : arguments[1];
+ // Create and store shader for constants once on initial filter call.
+ // Need to store multiple in case user calls different filters,
+ // eg. filter(BLUR) then filter(GRAY)
+ if (!(operation in this.defaultFilterShaders)) {
+ this.defaultFilterShaders[operation] = new _main.default.Shader(fbo._renderer, filterShaderVert, filterShaderFrags[operation]);
+ }
+ this.filterShader = this.defaultFilterShaders[operation];
+ } // use custom user-supplied shader
+ else {
+ this.filterShader = arguments.length <= 0 ? undefined : arguments[0];
+ } // Setting the target to the framebuffer when applying a filter to a framebuffer.
+
+ var target = this.activeFramebuffer() || this;
+ // Resize the framebuffer 'fbo' and adjust its pixel density if it doesn't match the target.
+ this.matchSize(fbo, target);
+ fbo.draw(function () {
+ return _this2._pInst.clear();
+ }); // prevent undesirable feedback effects accumulating secretly.
+ var texelSize = [
+ 1 / (target.width * target.pixelDensity()),
+ 1 / (target.height * target.pixelDensity())
+ ];
+ // apply blur shader with multiple passes.
+ if (operation === constants.BLUR) {
+ // Treating 'tmp' as a framebuffer.
+ var tmp = this.getFilterLayerTemp();
+ // Resize the framebuffer 'tmp' and adjust its pixel density if it doesn't match the target.
+ this.matchSize(tmp, target);
+ // setup
+ this._pInst.push();
+ this._pInst.noStroke();
+ this._pInst.blendMode(constants.BLEND);
+ // draw main to temp buffer
+ this._pInst.shader(this.filterShader);
+ this.filterShader.setUniform('texelSize', texelSize);
+ this.filterShader.setUniform('canvasSize', [
+ target.width,
+ target.height
+ ]);
+ this.filterShader.setUniform('radius', Math.max(1, filterParameter));
+ // Horiz pass: draw `target` to `tmp`
+ tmp.draw(function () {
+ _this2.filterShader.setUniform('direction', [
+ 1,
+ 0
+ ]);
+ _this2.filterShader.setUniform('tex0', target);
+ _this2._pInst.clear();
+ _this2._pInst.shader(_this2.filterShader);
+ _this2._pInst.noLights();
+ _this2._pInst.plane(target.width, target.height);
+ });
+ // Vert pass: draw `tmp` to `fbo`
+ fbo.draw(function () {
+ _this2.filterShader.setUniform('direction', [
+ 0,
+ 1
+ ]);
+ _this2.filterShader.setUniform('tex0', tmp);
+ _this2._pInst.clear();
+ _this2._pInst.shader(_this2.filterShader);
+ _this2._pInst.noLights();
+ _this2._pInst.plane(target.width, target.height);
+ });
+ this._pInst.pop();
+ } // every other non-blur shader uses single pass
+ else {
+ fbo.draw(function () {
+ _this2._pInst.noStroke();
+ _this2._pInst.blendMode(constants.BLEND);
+ _this2._pInst.shader(_this2.filterShader);
+ _this2.filterShader.setUniform('tex0', target);
+ _this2.filterShader.setUniform('texelSize', texelSize);
+ _this2.filterShader.setUniform('canvasSize', [
+ target.width,
+ target.height
+ ]);
+ // filterParameter uniform only used for POSTERIZE, and THRESHOLD
+ // but shouldn't hurt to always set
+ _this2.filterShader.setUniform('filterParameter', filterParameter);
+ _this2._pInst.noLights();
+ _this2._pInst.plane(target.width, target.height);
+ });
+ } // draw fbo contents onto main renderer.
+
+ this._pInst.push();
+ this._pInst.noStroke();
+ this.clear();
+ this._pInst.push();
+ this._pInst.imageMode(constants.CORNER);
+ this._pInst.blendMode(constants.BLEND);
+ target.filterCamera._resize();
+ this._pInst.setCamera(target.filterCamera);
+ this._pInst.resetMatrix();
+ this._pInst.image(fbo, - target.width / 2, - target.height / 2, target.width, target.height);
+ this._pInst.clearDepth();
+ this._pInst.pop();
+ this._pInst.pop();
+ } // Pass this off to the host instance so that we can treat a renderer and a
+ // framebuffer the same in filter()
+
+ },
+ {
+ key: 'pixelDensity',
+ value: function pixelDensity(newDensity) {
+ if (newDensity) {
+ return this._pInst.pixelDensity(newDensity);
+ }
+ return this._pInst.pixelDensity();
+ }
+ },
+ {
+ key: 'blendMode',
+ value: function blendMode(mode) {
+ if (mode === constants.DARKEST || mode === constants.LIGHTEST || mode === constants.ADD || mode === constants.BLEND || mode === constants.SUBTRACT || mode === constants.SCREEN || mode === constants.EXCLUSION || mode === constants.REPLACE || mode === constants.MULTIPLY || mode === constants.REMOVE) this.curBlendMode = mode;
+ else if (mode === constants.BURN || mode === constants.OVERLAY || mode === constants.HARD_LIGHT || mode === constants.SOFT_LIGHT || mode === constants.DODGE) {
+ console.warn('BURN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, and DODGE only work for blendMode in 2D mode.');
+ }
+ }
+ },
+ {
+ key: 'erase',
+ value: function erase(opacityFill, opacityStroke) {
+ if (!this._isErasing) {
+ this.preEraseBlend = this.curBlendMode;
+ this._isErasing = true;
+ this.blendMode(constants.REMOVE);
+ this._cachedFillStyle = this.curFillColor.slice();
+ this.curFillColor = [
+ 1,
+ 1,
+ 1,
+ opacityFill / 255
+ ];
+ this._cachedStrokeStyle = this.curStrokeColor.slice();
+ this.curStrokeColor = [
+ 1,
+ 1,
+ 1,
+ opacityStroke / 255
+ ];
+ }
+ }
+ },
+ {
+ key: 'noErase',
+ value: function noErase() {
+ if (this._isErasing) {
+ // Restore colors
+ this.curFillColor = this._cachedFillStyle.slice();
+ this.curStrokeColor = this._cachedStrokeStyle.slice();
+ // Restore blend mode
+ this.curBlendMode = this.preEraseBlend;
+ this.blendMode(this.preEraseBlend);
+ // Ensure that _applyBlendMode() sets preEraseBlend back to the original blend mode
+ this._isErasing = false;
+ this._applyBlendMode();
+ }
+ }
+ },
+ {
+ key: 'drawTarget',
+ value: function drawTarget() {
+ return this.activeFramebuffers[this.activeFramebuffers.length - 1] || this;
+ }
+ },
+ {
+ key: 'beginClip',
+ value: function beginClip() {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+ };
+ _get(_getPrototypeOf(RendererGL.prototype), 'beginClip', this).call(this, options);
+ this.drawTarget()._isClipApplied = true;
+ var gl = this.GL;
+ gl.clearStencil(0);
+ gl.clear(gl.STENCIL_BUFFER_BIT);
+ gl.enable(gl.STENCIL_TEST);
+ this._stencilTestOn = true;
+ gl.stencilFunc(gl.ALWAYS, // the test
+ 1, // reference value
+ 255 // mask
+ );
+ gl.stencilOp(gl.KEEP, // what to do if the stencil test fails
+ gl.KEEP, // what to do if the depth test fails
+ gl.REPLACE // what to do if both tests pass
+ );
+ gl.disable(gl.DEPTH_TEST);
+ this._pInst.push();
+ this._pInst.resetShader();
+ if (this._doFill) this._pInst.fill(0, 0);
+ if (this._doStroke) this._pInst.stroke(0, 0);
+ }
+ },
+ {
+ key: 'endClip',
+ value: function endClip() {
+ this._pInst.pop();
+ var gl = this.GL;
+ gl.stencilOp(gl.KEEP, // what to do if the stencil test fails
+ gl.KEEP, // what to do if the depth test fails
+ gl.KEEP // what to do if both tests pass
+ );
+ gl.stencilFunc(this._clipInvert ? gl.EQUAL : gl.NOTEQUAL, // the test
+ 0, // reference value
+ 255 // mask
+ );
+ gl.enable(gl.DEPTH_TEST);
+ // Mark the depth at which the clip has been applied so that we can clear it
+ // when we pop past this depth
+ this._clipDepths.push(this._pushPopDepth);
+ _get(_getPrototypeOf(RendererGL.prototype), 'endClip', this).call(this);
+ }
+ },
+ {
+ key: '_clearClip',
+ value: function _clearClip() {
+ this.GL.clearStencil(1);
+ this.GL.clear(this.GL.STENCIL_BUFFER_BIT);
+ if (this._clipDepths.length > 0) {
+ this._clipDepths.pop();
+ }
+ this.drawTarget()._isClipApplied = false;
+ } /**
+ * Change weight of stroke
+ * @method strokeWeight
+ * @param {Number} stroke weight to be used for drawing
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(200, 400, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * translate(0, -100, 0);
+ * stroke(240, 150, 150);
+ * fill(100, 100, 240);
+ * push();
+ * strokeWeight(8);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * sphere(75);
+ * pop();
+ * push();
+ * translate(0, 200, 0);
+ * strokeWeight(1);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * sphere(75);
+ * pop();
+ * }
+ *
+ *
+ *
+ * @alt
+ * black canvas with two purple rotating spheres with pink
+ * outlines the sphere on top has much heavier outlines,
+ */
+
+ },
+ {
+ key: 'strokeWeight',
+ value: function strokeWeight(w) {
+ if (this.curStrokeWeight !== w) {
+ this.pointSize = w;
+ this.curStrokeWeight = w;
+ }
+ } // x,y are canvas-relative (pre-scaled by _pixelDensity)
+
+ },
+ {
+ key: '_getPixel',
+ value: function _getPixel(x, y) {
+ var gl = this.GL;
+ return readPixelWebGL(gl, null, x, y, gl.RGBA, gl.UNSIGNED_BYTE, this._pInst.height * this._pInst.pixelDensity());
+ } /**
+ * Loads the pixels data for this canvas into the pixels[] attribute.
+ * Note that updatePixels() and set() do not work.
+ * Any pixel manipulation must be done directly to the pixels[] array.
+ *
+ * @private
+ * @method loadPixels
+ */
+
+ },
+ {
+ key: 'loadPixels',
+ value: function loadPixels() {
+ var pixelsState = this._pixelsState;
+ //@todo_FES
+ if (this._pInst._glAttributes.preserveDrawingBuffer !== true) {
+ console.log('loadPixels only works in WebGL when preserveDrawingBuffer ' + 'is true.');
+ return;
+ }
+ var pd = this._pInst._pixelDensity;
+ var gl = this.GL;
+ pixelsState._setProperty('pixels', readPixelsWebGL(pixelsState.pixels, gl, null, 0, 0, this.width * pd, this.height * pd, gl.RGBA, gl.UNSIGNED_BYTE, this.height * pd));
+ }
+ },
+ {
+ key: 'updatePixels',
+ value: function updatePixels() {
+ var fbo = this._getTempFramebuffer();
+ fbo.pixels = this._pixelsState.pixels;
+ fbo.updatePixels();
+ this._pInst.push();
+ this._pInst.resetMatrix();
+ this._pInst.clear();
+ this._pInst.imageMode(constants.CENTER);
+ this._pInst.image(fbo, 0, 0);
+ this._pInst.pop();
+ this.GL.clearDepth(1);
+ this.GL.clear(this.GL.DEPTH_BUFFER_BIT);
+ } /**
+ * @private
+ * @returns {p5.Framebuffer} A p5.Framebuffer set to match the size and settings
+ * of the renderer's canvas. It will be created if it does not yet exist, and
+ * reused if it does.
+ */
+
+ },
+ {
+ key: '_getTempFramebuffer',
+ value: function _getTempFramebuffer() {
+ if (!this._tempFramebuffer) {
+ this._tempFramebuffer = this._pInst.createFramebuffer({
+ format: constants.UNSIGNED_BYTE,
+ useDepth: this._pInst._glAttributes.depth,
+ depthFormat: constants.UNSIGNED_INT,
+ antialias: this._pInst._glAttributes.antialias
+ });
+ }
+ return this._tempFramebuffer;
+ } //////////////////////////////////////////////
+ // HASH | for geometry
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: 'geometryInHash',
+ value: function geometryInHash(gId) {
+ return this.retainedMode.geometry[gId] !== undefined;
+ }
+ },
+ {
+ key: 'viewport',
+ value: function viewport(w, h) {
+ this._viewport = [
+ 0,
+ 0,
+ w,
+ h
+ ];
+ this.GL.viewport(0, 0, w, h);
+ } /**
+ * [resize description]
+ * @private
+ * @param {Number} w [description]
+ * @param {Number} h [description]
+ */
+
+ },
+ {
+ key: 'resize',
+ value: function resize(w, h) {
+ _main.default.Renderer.prototype.resize.call(this, w, h);
+ this._origViewport = {
+ width: this.GL.drawingBufferWidth,
+ height: this.GL.drawingBufferHeight
+ };
+ this.viewport(this._origViewport.width, this._origViewport.height);
+ this._curCamera._resize();
+ //resize pixels buffer
+ var pixelsState = this._pixelsState;
+ if (typeof pixelsState.pixels !== 'undefined') {
+ pixelsState._setProperty('pixels', new Uint8Array(this.GL.drawingBufferWidth * this.GL.drawingBufferHeight * 4));
+ }
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.framebuffers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var framebuffer = _step.value;
+ // Notify framebuffers of the resize so that any auto-sized framebuffers
+ // can also update their size
+ framebuffer._canvasSizeChanged();
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ } /**
+ * clears color and depth buffers
+ * with r,g,b,a
+ * @private
+ * @param {Number} r normalized red val.
+ * @param {Number} g normalized green val.
+ * @param {Number} b normalized blue val.
+ * @param {Number} a normalized alpha val.
+ */
+
+ },
+ {
+ key: 'clear',
+ value: function clear() {
+ var _r = (arguments.length <= 0 ? undefined : arguments[0]) || 0;
+ var _g = (arguments.length <= 1 ? undefined : arguments[1]) || 0;
+ var _b = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ var _a = (arguments.length <= 3 ? undefined : arguments[3]) || 0;
+ var activeFramebuffer = this.activeFramebuffer();
+ if (activeFramebuffer && activeFramebuffer.format === constants.UNSIGNED_BYTE && !activeFramebuffer.antialias && _a === 0) {
+ // Drivers on Intel Macs check for 0,0,0,0 exactly when drawing to a
+ // framebuffer and ignore the command if it's the only drawing command to
+ // the framebuffer. To work around it, we can set the alpha to a value so
+ // low that it still rounds down to 0, but that circumvents the buggy
+ // check in the driver.
+ _a = 1e-10;
+ }
+ this.GL.clearColor(_r * _a, _g * _a, _b * _a, _a);
+ this.GL.clearDepth(1);
+ this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
+ } /**
+ * Resets all depth information so that nothing previously drawn will
+ * occlude anything subsequently drawn.
+ */
+
+ },
+ {
+ key: 'clearDepth',
+ value: function clearDepth() {
+ var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+ this.GL.clearDepth(depth);
+ this.GL.clear(this.GL.DEPTH_BUFFER_BIT);
+ }
+ },
+ {
+ key: 'applyMatrix',
+ value: function applyMatrix(a, b, c, d, e, f) {
+ if (arguments.length === 16) {
+ _main.default.Matrix.prototype.apply.apply(this.uMVMatrix, arguments);
+ } else {
+ this.uMVMatrix.apply([a,
+ b,
+ 0,
+ 0,
+ c,
+ d,
+ 0,
+ 0,
+ 0,
+ 0,
+ 1,
+ 0,
+ e,
+ f,
+ 0,
+ 1]);
+ }
+ } /**
+ * [translate description]
+ * @private
+ * @param {Number} x [description]
+ * @param {Number} y [description]
+ * @param {Number} z [description]
+ * @chainable
+ * @todo implement handle for components or vector as args
+ */
+
+ },
+ {
+ key: 'translate',
+ value: function translate(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ z = x.z;
+ y = x.y;
+ x = x.x;
+ }
+ this.uMVMatrix.translate([x,
+ y,
+ z]);
+ return this;
+ } /**
+ * Scales the Model View Matrix by a vector
+ * @private
+ * @param {Number | p5.Vector | Array} x [description]
+ * @param {Number} [y] y-axis scalar
+ * @param {Number} [z] z-axis scalar
+ * @chainable
+ */
+
+ },
+ {
+ key: 'scale',
+ value: function scale(x, y, z) {
+ this.uMVMatrix.scale(x, y, z);
+ return this;
+ }
+ },
+ {
+ key: 'rotate',
+ value: function rotate(rad, axis) {
+ if (typeof axis === 'undefined') {
+ return this.rotateZ(rad);
+ }
+ _main.default.Matrix.prototype.rotate.apply(this.uMVMatrix, arguments);
+ return this;
+ }
+ },
+ {
+ key: 'rotateX',
+ value: function rotateX(rad) {
+ this.rotate(rad, 1, 0, 0);
+ return this;
+ }
+ },
+ {
+ key: 'rotateY',
+ value: function rotateY(rad) {
+ this.rotate(rad, 0, 1, 0);
+ return this;
+ }
+ },
+ {
+ key: 'rotateZ',
+ value: function rotateZ(rad) {
+ this.rotate(rad, 0, 0, 1);
+ return this;
+ }
+ },
+ {
+ key: 'push',
+ value: function push() {
+ // get the base renderer style
+ var style = _main.default.Renderer.prototype.push.apply(this);
+ // add webgl-specific style properties
+ var properties = style.properties;
+ properties.uMVMatrix = this.uMVMatrix.copy();
+ properties.uPMatrix = this.uPMatrix.copy();
+ properties._curCamera = this._curCamera;
+ // make a copy of the current camera for the push state
+ // this preserves any references stored using 'createCamera'
+ this._curCamera = this._curCamera.copy();
+ properties.ambientLightColors = this.ambientLightColors.slice();
+ properties.specularColors = this.specularColors.slice();
+ properties.directionalLightDirections = this.directionalLightDirections.slice();
+ properties.directionalLightDiffuseColors = this.directionalLightDiffuseColors.slice();
+ properties.directionalLightSpecularColors = this.directionalLightSpecularColors.slice();
+ properties.pointLightPositions = this.pointLightPositions.slice();
+ properties.pointLightDiffuseColors = this.pointLightDiffuseColors.slice();
+ properties.pointLightSpecularColors = this.pointLightSpecularColors.slice();
+ properties.spotLightPositions = this.spotLightPositions.slice();
+ properties.spotLightDirections = this.spotLightDirections.slice();
+ properties.spotLightDiffuseColors = this.spotLightDiffuseColors.slice();
+ properties.spotLightSpecularColors = this.spotLightSpecularColors.slice();
+ properties.spotLightAngle = this.spotLightAngle.slice();
+ properties.spotLightConc = this.spotLightConc.slice();
+ properties.userFillShader = this.userFillShader;
+ properties.userStrokeShader = this.userStrokeShader;
+ properties.userPointShader = this.userPointShader;
+ properties.pointSize = this.pointSize;
+ properties.curStrokeWeight = this.curStrokeWeight;
+ properties.curStrokeColor = this.curStrokeColor;
+ properties.curFillColor = this.curFillColor;
+ properties.curAmbientColor = this.curAmbientColor;
+ properties.curSpecularColor = this.curSpecularColor;
+ properties.curEmissiveColor = this.curEmissiveColor;
+ properties._hasSetAmbient = this._hasSetAmbient;
+ properties._useSpecularMaterial = this._useSpecularMaterial;
+ properties._useEmissiveMaterial = this._useEmissiveMaterial;
+ properties._useShininess = this._useShininess;
+ properties._useMetalness = this._useMetalness;
+ properties.constantAttenuation = this.constantAttenuation;
+ properties.linearAttenuation = this.linearAttenuation;
+ properties.quadraticAttenuation = this.quadraticAttenuation;
+ properties._enableLighting = this._enableLighting;
+ properties._useNormalMaterial = this._useNormalMaterial;
+ properties._tex = this._tex;
+ properties.drawMode = this.drawMode;
+ properties._currentNormal = this._currentNormal;
+ properties.curBlendMode = this.curBlendMode;
+ // So that the activeImageLight gets reset in push/pop
+ properties.activeImageLight = this.activeImageLight;
+ return style;
+ }
+ },
+ {
+ key: 'pop',
+ value: function pop() {
+ var _get2;
+ if (this._clipDepths.length > 0 && this._pushPopDepth === this._clipDepths[this._clipDepths.length - 1]) {
+ this._clearClip();
+ }
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }(_get2 = _get(_getPrototypeOf(RendererGL.prototype), 'pop', this)).call.apply(_get2, [
+ this
+ ].concat(args));
+ this._applyStencilTestIfClipping();
+ }
+ },
+ {
+ key: '_applyStencilTestIfClipping',
+ value: function _applyStencilTestIfClipping() {
+ var drawTarget = this.drawTarget();
+ if (drawTarget._isClipApplied !== this._stencilTestOn) {
+ if (drawTarget._isClipApplied) {
+ this.GL.enable(this.GL.STENCIL_TEST);
+ this._stencilTestOn = true;
+ } else {
+ this.GL.disable(this.GL.STENCIL_TEST);
+ this._stencilTestOn = false;
+ }
+ }
+ }
+ },
+ {
+ key: 'resetMatrix',
+ value: function resetMatrix() {
+ this.uMVMatrix.set(this._curCamera.cameraMatrix);
+ return this;
+ } //////////////////////////////////////////////
+ // SHADER
+ //////////////////////////////////////////////
+ /*
+ * shaders are created and cached on a per-renderer basis,
+ * on the grounds that each renderer will have its own gl context
+ * and the shader must be valid in that context.
+ */
+
+ },
+ {
+ key: '_getImmediateStrokeShader',
+ value: function _getImmediateStrokeShader() {
+ // select the stroke shader to use
+ var stroke = this.userStrokeShader;
+ if (!stroke || !stroke.isStrokeShader()) {
+ return this._getLineShader();
+ }
+ return stroke;
+ }
+ },
+ {
+ key: '_getRetainedStrokeShader',
+ value: function _getRetainedStrokeShader() {
+ return this._getImmediateStrokeShader();
+ }
+ },
+ {
+ key: '_getSphereMapping',
+ value: function _getSphereMapping(img) {
+ if (!this.sphereMapping) {
+ this.sphereMapping = this._pInst.createFilterShader(sphereMapping);
+ }
+ this.uNMatrix.inverseTranspose(this.uMVMatrix);
+ this.uNMatrix.invert3x3(this.uNMatrix);
+ this.sphereMapping.setUniform('uFovY', this._curCamera.cameraFOV);
+ this.sphereMapping.setUniform('uAspect', this._curCamera.aspectRatio);
+ this.sphereMapping.setUniform('uNewNormalMatrix', this.uNMatrix.mat3);
+ this.sphereMapping.setUniform('uSampler', img);
+ return this.sphereMapping;
+ } /*
+ * selects which fill shader should be used based on renderer state,
+ * for use with begin/endShape and immediate vertex mode.
+ */
+
+ },
+ {
+ key: '_getImmediateFillShader',
+ value: function _getImmediateFillShader() {
+ var fill = this.userFillShader;
+ if (this._useNormalMaterial) {
+ if (!fill || !fill.isNormalShader()) {
+ return this._getNormalShader();
+ }
+ }
+ if (this._enableLighting) {
+ if (!fill || !fill.isLightShader()) {
+ return this._getLightShader();
+ }
+ } else if (this._tex) {
+ if (!fill || !fill.isTextureShader()) {
+ return this._getLightShader();
+ }
+ } else if (!fill /*|| !fill.isColorShader()*/ ) {
+ return this._getImmediateModeShader();
+ }
+ return fill;
+ } /*
+ * selects which fill shader should be used based on renderer state
+ * for retained mode.
+ */
+
+ },
+ {
+ key: '_getRetainedFillShader',
+ value: function _getRetainedFillShader() {
+ if (this._useNormalMaterial) {
+ return this._getNormalShader();
+ }
+ var fill = this.userFillShader;
+ if (this._enableLighting) {
+ if (!fill || !fill.isLightShader()) {
+ return this._getLightShader();
+ }
+ } else if (this._tex) {
+ if (!fill || !fill.isTextureShader()) {
+ return this._getLightShader();
+ }
+ } else if (!fill /* || !fill.isColorShader()*/ ) {
+ return this._getColorShader();
+ }
+ return fill;
+ }
+ },
+ {
+ key: '_getImmediatePointShader',
+ value: function _getImmediatePointShader() {
+ // select the point shader to use
+ var point = this.userPointShader;
+ if (!point || !point.isPointShader()) {
+ return this._getPointShader();
+ }
+ return point;
+ }
+ },
+ {
+ key: '_getRetainedLineShader',
+ value: function _getRetainedLineShader() {
+ return this._getImmediateLineShader();
+ }
+ },
+ {
+ key: '_getLightShader',
+ value: function _getLightShader() {
+ if (!this._defaultLightShader) {
+ if (this._pInst._glAttributes.perPixelLighting) {
+ this._defaultLightShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'highp') + defaultShaders.phongVert, this._webGL2CompatibilityPrefix('frag', 'highp') + defaultShaders.phongFrag);
+ } else {
+ this._defaultLightShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'highp') + defaultShaders.lightVert, this._webGL2CompatibilityPrefix('frag', 'highp') + defaultShaders.lightTextureFrag);
+ }
+ }
+ return this._defaultLightShader;
+ }
+ },
+ {
+ key: '_getImmediateModeShader',
+ value: function _getImmediateModeShader() {
+ if (!this._defaultImmediateModeShader) {
+ this._defaultImmediateModeShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'mediump') + defaultShaders.immediateVert, this._webGL2CompatibilityPrefix('frag', 'mediump') + defaultShaders.vertexColorFrag);
+ }
+ return this._defaultImmediateModeShader;
+ }
+ },
+ {
+ key: '_getNormalShader',
+ value: function _getNormalShader() {
+ if (!this._defaultNormalShader) {
+ this._defaultNormalShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'mediump') + defaultShaders.normalVert, this._webGL2CompatibilityPrefix('frag', 'mediump') + defaultShaders.normalFrag);
+ }
+ return this._defaultNormalShader;
+ }
+ },
+ {
+ key: '_getColorShader',
+ value: function _getColorShader() {
+ if (!this._defaultColorShader) {
+ this._defaultColorShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'mediump') + defaultShaders.normalVert, this._webGL2CompatibilityPrefix('frag', 'mediump') + defaultShaders.basicFrag);
+ }
+ return this._defaultColorShader;
+ }
+ },
+ {
+ key: '_getPointShader',
+ value: function _getPointShader() {
+ if (!this._defaultPointShader) {
+ this._defaultPointShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'mediump') + defaultShaders.pointVert, this._webGL2CompatibilityPrefix('frag', 'mediump') + defaultShaders.pointFrag);
+ }
+ return this._defaultPointShader;
+ }
+ },
+ {
+ key: '_getLineShader',
+ value: function _getLineShader() {
+ if (!this._defaultLineShader) {
+ this._defaultLineShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'mediump') + defaultShaders.lineVert, this._webGL2CompatibilityPrefix('frag', 'mediump') + defaultShaders.lineFrag);
+ }
+ return this._defaultLineShader;
+ }
+ },
+ {
+ key: '_getFontShader',
+ value: function _getFontShader() {
+ if (!this._defaultFontShader) {
+ if (this.webglVersion === constants.WEBGL) {
+ this.GL.getExtension('OES_standard_derivatives');
+ }
+ this._defaultFontShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'mediump') + defaultShaders.fontVert, this._webGL2CompatibilityPrefix('frag', 'mediump') + defaultShaders.fontFrag);
+ }
+ return this._defaultFontShader;
+ }
+ },
+ {
+ key: '_webGL2CompatibilityPrefix',
+ value: function _webGL2CompatibilityPrefix(shaderType, floatPrecision) {
+ var code = '';
+ if (this.webglVersion === constants.WEBGL2) {
+ code += '#version 300 es\n#define WEBGL2\n';
+ }
+ if (shaderType === 'vert') {
+ code += '#define VERTEX_SHADER\n';
+ } else if (shaderType === 'frag') {
+ code += '#define FRAGMENT_SHADER\n';
+ }
+ if (floatPrecision) {
+ code += 'precision '.concat(floatPrecision, ' float;\n');
+ }
+ return code;
+ }
+ },
+ {
+ key: '_getEmptyTexture',
+ value: function _getEmptyTexture() {
+ if (!this._emptyTexture) {
+ // a plain white texture RGBA, full alpha, single pixel.
+ var im = new _main.default.Image(1, 1);
+ im.set(0, 0, 255);
+ this._emptyTexture = new _main.default.Texture(this, im);
+ }
+ return this._emptyTexture;
+ }
+ },
+ {
+ key: 'getTexture',
+ value: function getTexture(input) {
+ var src = input;
+ if (src instanceof _main.default.Framebuffer) {
+ src = src.color;
+ }
+ var texture = this.textures.get(src);
+ if (texture) {
+ return texture;
+ }
+ var tex = new _main.default.Texture(this, src);
+ this.textures.set(src, tex);
+ return tex;
+ } /*
+ * used in imageLight,
+ * To create a blurry image from the input non blurry img, if it doesn't already exist
+ * Add it to the diffusedTexture map,
+ * Returns the blurry image
+ * maps a p5.Image used by imageLight() to a p5.Framebuffer
+ */
+
+ },
+ {
+ key: 'getDiffusedTexture',
+ value: function getDiffusedTexture(input) {
+ var _this3 = this;
+ // if one already exists for a given input image
+ if (this.diffusedTextures.get(input) != null) {
+ return this.diffusedTextures.get(input);
+ } // if not, only then create one
+
+ var newFramebuffer;
+ // hardcoded to 200px, because it's going to be blurry and smooth
+ var smallWidth = 200;
+ var width = smallWidth;
+ var height = Math.floor(smallWidth * (input.height / input.width));
+ newFramebuffer = this._pInst.createFramebuffer({
+ width: width,
+ height: height,
+ density: 1
+ });
+ // create framebuffer is like making a new sketch, all functions on main
+ // sketch it would be available on framebuffer
+ if (!this.diffusedShader) {
+ this.diffusedShader = this._pInst.createShader(defaultShaders.imageLightVert, defaultShaders.imageLightDiffusedFrag);
+ }
+ newFramebuffer.draw(function () {
+ _this3._pInst.shader(_this3.diffusedShader);
+ _this3.diffusedShader.setUniform('environmentMap', input);
+ _this3._pInst.noStroke();
+ _this3._pInst.rectMode(constants.CENTER);
+ _this3._pInst.noLights();
+ _this3._pInst.rect(0, 0, width, height);
+ });
+ this.diffusedTextures.set(input, newFramebuffer);
+ return newFramebuffer;
+ } /*
+ * used in imageLight,
+ * To create a texture from the input non blurry image, if it doesn't already exist
+ * Creating 8 different levels of textures according to different
+ * sizes and atoring them in `levels` array
+ * Creating a new Mipmap texture with that `levels` array
+ * Storing the texture for input image in map called `specularTextures`
+ * maps the input p5.Image to a p5.MipmapTexture
+ */
+
+ },
+ {
+ key: 'getSpecularTexture',
+ value: function getSpecularTexture(input) {
+ var _this4 = this;
+ // check if already exits (there are tex of diff resolution so which one to check)
+ // currently doing the whole array
+ if (this.specularTextures.get(input) != null) {
+ return this.specularTextures.get(input);
+ } // Hardcoded size
+
+ var size = 512;
+ var tex;
+ var levels = [
+ ];
+ var framebuffer = this._pInst.createFramebuffer({
+ width: size,
+ height: size,
+ density: 1
+ });
+ var count = Math.log(size) / Math.log(2);
+ if (!this.specularShader) {
+ this.specularShader = this._pInst.createShader(defaultShaders.imageLightVert, defaultShaders.imageLightSpecularFrag);
+ } // currently only 8 levels
+ // This loop calculates 8 framebuffers of varying size of canvas
+ // and corresponding different roughness levels.
+ // Roughness increases with the decrease in canvas size,
+ // because rougher surfaces have less detailed/more blurry reflections.
+
+ var _loop = function _loop(w) {
+ framebuffer.resize(w, w);
+ var currCount = Math.log(w) / Math.log(2);
+ var roughness = 1 - currCount / count;
+ framebuffer.draw(function () {
+ _this4._pInst.shader(_this4.specularShader);
+ _this4._pInst.clear();
+ _this4.specularShader.setUniform('environmentMap', input);
+ _this4.specularShader.setUniform('roughness', roughness);
+ _this4._pInst.noStroke();
+ _this4._pInst.noLights();
+ _this4._pInst.plane(w, w);
+ });
+ levels.push(framebuffer.get().drawingContext.getImageData(0, 0, w, w));
+ };
+ for (var w = size; w >= 1; w /= 2) {
+ _loop(w);
+ } // Free the Framebuffer
+
+ framebuffer.remove();
+ tex = new _p6.MipmapTexture(this, levels, {
+ });
+ this.specularTextures.set(input, tex);
+ return tex;
+ } /**
+ * @method activeFramebuffer
+ * @private
+ * @returns {p5.Framebuffer|null} The currently active framebuffer, or null if
+ * the main canvas is the current draw target.
+ */
+
+ },
+ {
+ key: 'activeFramebuffer',
+ value: function activeFramebuffer() {
+ return this.activeFramebuffers[this.activeFramebuffers.length - 1] || null;
+ }
+ },
+ {
+ key: 'createFramebuffer',
+ value: function createFramebuffer(options) {
+ return new _main.default.Framebuffer(this, options);
+ }
+ },
+ {
+ key: '_setStrokeUniforms',
+ value: function _setStrokeUniforms(strokeShader) {
+ strokeShader.bindShader();
+ // set the uniform values
+ strokeShader.setUniform('uUseLineColor', this._useLineColor);
+ strokeShader.setUniform('uMaterialColor', this.curStrokeColor);
+ strokeShader.setUniform('uStrokeWeight', this.curStrokeWeight);
+ strokeShader.setUniform('uStrokeCap', STROKE_CAP_ENUM[this.curStrokeCap]);
+ strokeShader.setUniform('uStrokeJoin', STROKE_JOIN_ENUM[this.curStrokeJoin]);
+ }
+ },
+ {
+ key: '_setFillUniforms',
+ value: function _setFillUniforms(fillShader) {
+ var _this5 = this;
+ fillShader.bindShader();
+ this.mixedSpecularColor = _toConsumableArray(this.curSpecularColor);
+ if (this._useMetalness > 0) {
+ this.mixedSpecularColor = this.mixedSpecularColor.map(function (mixedSpecularColor, index) {
+ return _this5.curFillColor[index] * _this5._useMetalness + mixedSpecularColor * (1 - _this5._useMetalness);
+ });
+ } // TODO: optimize
+
+ fillShader.setUniform('uUseVertexColor', this._useVertexColor);
+ fillShader.setUniform('uMaterialColor', this.curFillColor);
+ fillShader.setUniform('isTexture', !!this._tex);
+ if (this._tex) {
+ fillShader.setUniform('uSampler', this._tex);
+ }
+ fillShader.setUniform('uTint', this._tint);
+ fillShader.setUniform('uHasSetAmbient', this._hasSetAmbient);
+ fillShader.setUniform('uAmbientMatColor', this.curAmbientColor);
+ fillShader.setUniform('uSpecularMatColor', this.mixedSpecularColor);
+ fillShader.setUniform('uEmissiveMatColor', this.curEmissiveColor);
+ fillShader.setUniform('uSpecular', this._useSpecularMaterial);
+ fillShader.setUniform('uEmissive', this._useEmissiveMaterial);
+ fillShader.setUniform('uShininess', this._useShininess);
+ fillShader.setUniform('metallic', this._useMetalness);
+ this._setImageLightUniforms(fillShader);
+ fillShader.setUniform('uUseLighting', this._enableLighting);
+ var pointLightCount = this.pointLightDiffuseColors.length / 3;
+ fillShader.setUniform('uPointLightCount', pointLightCount);
+ fillShader.setUniform('uPointLightLocation', this.pointLightPositions);
+ fillShader.setUniform('uPointLightDiffuseColors', this.pointLightDiffuseColors);
+ fillShader.setUniform('uPointLightSpecularColors', this.pointLightSpecularColors);
+ var directionalLightCount = this.directionalLightDiffuseColors.length / 3;
+ fillShader.setUniform('uDirectionalLightCount', directionalLightCount);
+ fillShader.setUniform('uLightingDirection', this.directionalLightDirections);
+ fillShader.setUniform('uDirectionalDiffuseColors', this.directionalLightDiffuseColors);
+ fillShader.setUniform('uDirectionalSpecularColors', this.directionalLightSpecularColors);
+ // TODO: sum these here...
+ var ambientLightCount = this.ambientLightColors.length / 3;
+ this.mixedAmbientLight = _toConsumableArray(this.ambientLightColors);
+ if (this._useMetalness > 0) {
+ this.mixedAmbientLight = this.mixedAmbientLight.map(function (ambientColors) {
+ var mixing = ambientColors - _this5._useMetalness;
+ return Math.max(0, mixing);
+ });
+ }
+ fillShader.setUniform('uAmbientLightCount', ambientLightCount);
+ fillShader.setUniform('uAmbientColor', this.mixedAmbientLight);
+ var spotLightCount = this.spotLightDiffuseColors.length / 3;
+ fillShader.setUniform('uSpotLightCount', spotLightCount);
+ fillShader.setUniform('uSpotLightAngle', this.spotLightAngle);
+ fillShader.setUniform('uSpotLightConc', this.spotLightConc);
+ fillShader.setUniform('uSpotLightDiffuseColors', this.spotLightDiffuseColors);
+ fillShader.setUniform('uSpotLightSpecularColors', this.spotLightSpecularColors);
+ fillShader.setUniform('uSpotLightLocation', this.spotLightPositions);
+ fillShader.setUniform('uSpotLightDirection', this.spotLightDirections);
+ fillShader.setUniform('uConstantAttenuation', this.constantAttenuation);
+ fillShader.setUniform('uLinearAttenuation', this.linearAttenuation);
+ fillShader.setUniform('uQuadraticAttenuation', this.quadraticAttenuation);
+ fillShader.bindTextures();
+ } // getting called from _setFillUniforms
+
+ },
+ {
+ key: '_setImageLightUniforms',
+ value: function _setImageLightUniforms(shader) {
+ //set uniform values
+ shader.setUniform('uUseImageLight', this.activeImageLight != null);
+ // true
+ if (this.activeImageLight) {
+ // this.activeImageLight has image as a key
+ // look up the texture from the diffusedTexture map
+ var diffusedLight = this.getDiffusedTexture(this.activeImageLight);
+ shader.setUniform('environmentMapDiffused', diffusedLight);
+ var specularLight = this.getSpecularTexture(this.activeImageLight);
+ // In p5js the range of shininess is >= 1,
+ // Therefore roughness range will be ([0,1]*8)*20 or [0, 160]
+ // The factor of 8 is because currently the getSpecularTexture
+ // only calculated 8 different levels of roughness
+ // The factor of 20 is just to spread up this range so that,
+ // [1, max] of shininess is converted to [0,160] of roughness
+ var roughness = 20 / this._useShininess;
+ shader.setUniform('levelOfDetail', roughness * 8);
+ shader.setUniform('environmentMapSpecular', specularLight);
+ }
+ }
+ },
+ {
+ key: '_setPointUniforms',
+ value: function _setPointUniforms(pointShader) {
+ pointShader.bindShader();
+ // set the uniform values
+ pointShader.setUniform('uMaterialColor', this.curStrokeColor);
+ // @todo is there an instance where this isn't stroke weight?
+ // should be they be same var?
+ pointShader.setUniform('uPointSize', this.pointSize * this._pInst._pixelDensity);
+ } /* Binds a buffer to the drawing context
+ * when passed more than two arguments it also updates or initializes
+ * the data associated with the buffer
+ */
+
+ },
+ {
+ key: '_bindBuffer',
+ value: function _bindBuffer(buffer, target, values, type, usage) {
+ if (!target) target = this.GL.ARRAY_BUFFER;
+ this.GL.bindBuffer(target, buffer);
+ if (values !== undefined) {
+ var data = values;
+ if (values instanceof _main.default.DataArray) {
+ data = values.dataArray();
+ } else if (!(data instanceof (type || Float32Array))) {
+ data = new (type || Float32Array) (data);
+ }
+ this.GL.bufferData(target, data, usage || this.GL.STATIC_DRAW);
+ }
+ } ///////////////////////////////
+ //// UTILITY FUNCTIONS
+ //////////////////////////////
+
+ },
+ {
+ key: '_arraysEqual',
+ value: function _arraysEqual(a, b) {
+ var aLength = a.length;
+ if (aLength !== b.length) return false;
+ return a.every(function (ai, i) {
+ return ai === b[i];
+ });
+ }
+ },
+ {
+ key: '_isTypedArray',
+ value: function _isTypedArray(arr) {
+ return [Float32Array,
+ Float64Array,
+ Int16Array,
+ Uint16Array,
+ Uint32Array].some(function (x) {
+ return arr instanceof x;
+ });
+ } /**
+ * turn a two dimensional array into one dimensional array
+ * @private
+ * @param {Array} arr 2-dimensional array
+ * @return {Array} 1-dimensional array
+ * [[1, 2, 3],[4, 5, 6]] -> [1, 2, 3, 4, 5, 6]
+ */
+
+ },
+ {
+ key: '_flatten',
+ value: function _flatten(arr) {
+ return arr.flat();
+ } /**
+ * turn a p5.Vector Array into a one dimensional number array
+ * @private
+ * @param {p5.Vector[]} arr an array of p5.Vector
+ * @return {Number[]} a one dimensional array of numbers
+ * [p5.Vector(1, 2, 3), p5.Vector(4, 5, 6)] ->
+ * [1, 2, 3, 4, 5, 6]
+ */
+
+ },
+ {
+ key: '_vToNArray',
+ value: function _vToNArray(arr) {
+ return arr.flatMap(function (item) {
+ return [item.x,
+ item.y,
+ item.z];
+ });
+ } // function to calculate BezierVertex Coefficients
+
+ },
+ {
+ key: '_bezierCoefficients',
+ value: function _bezierCoefficients(t) {
+ var t2 = t * t;
+ var t3 = t2 * t;
+ var mt = 1 - t;
+ var mt2 = mt * mt;
+ var mt3 = mt2 * mt;
+ return [mt3,
+ 3 * mt2 * t,
+ 3 * mt * t2,
+ t3];
+ } // function to calculate QuadraticVertex Coefficients
+
+ },
+ {
+ key: '_quadraticCoefficients',
+ value: function _quadraticCoefficients(t) {
+ var t2 = t * t;
+ var mt = 1 - t;
+ var mt2 = mt * mt;
+ return [mt2,
+ 2 * mt * t,
+ t2];
+ } // function to convert Bezier coordinates to Catmull Rom Splines
+
+ },
+ {
+ key: '_bezierToCatmull',
+ value: function _bezierToCatmull(w) {
+ var p1 = w[1];
+ var p2 = w[1] + (w[2] - w[0]) / this._curveTightness;
+ var p3 = w[2] - (w[3] - w[1]) / this._curveTightness;
+ var p4 = w[2];
+ var p = [
+ p1,
+ p2,
+ p3,
+ p4
+ ];
+ return p;
+ }
+ },
+ {
+ key: '_initTessy',
+ value: function _initTessy() {
+ // function called for each vertex of tesselator output
+ function vertexCallback(data, polyVertArray) {
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = data[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var element = _step2.value;
+ polyVertArray.push(element);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ }
+ function begincallback(type) {
+ if (type !== _libtess.default.primitiveType.GL_TRIANGLES) {
+ console.log('expected TRIANGLES but got type: '.concat(type));
+ }
+ }
+ function errorcallback(errno) {
+ console.log('error callback');
+ console.log('error number: '.concat(errno));
+ } // callback for when segments intersect and must be split
+
+ function combinecallback(coords, data, weight) {
+ var result = new Array(_main.default.RendererGL.prototype.tessyVertexSize).fill(0);
+ for (var i = 0; i < weight.length; i++) {
+ for (var j = 0; j < result.length; j++) {
+ if (weight[i] === 0 || !data[i]) continue;
+ result[j] += data[i][j] * weight[i];
+ }
+ }
+ return result;
+ }
+ function edgeCallback(flag) {
+ // don't really care about the flag, but need no-strip/no-fan behavior
+ }
+ var tessy = new _libtess.default.GluTesselator();
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_VERTEX_DATA, vertexCallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_BEGIN, begincallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_ERROR, errorcallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_COMBINE, combinecallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_EDGE_FLAG, edgeCallback);
+ tessy.gluTessProperty(_libtess.default.gluEnum.GLU_TESS_WINDING_RULE, _libtess.default.windingRule.GLU_TESS_WINDING_NONZERO);
+ return tessy;
+ }
+ },
+ {
+ key: '_triangulate',
+ value: function _triangulate(contours) {
+ // libtess will take 3d verts and flatten to a plane for tesselation.
+ // libtess is capable of calculating a plane to tesselate on, but
+ // if all of the vertices have the same z values, we'll just
+ // assume the face is facing the camera, letting us skip any performance
+ // issues or bugs in libtess's automatic calculation.
+ var z = contours[0] ? contours[0][2] : undefined;
+ var allSameZ = true;
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = contours[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var contour = _step3.value;
+ for (var j = 0; j < contour.length; j += _main.default.RendererGL.prototype.tessyVertexSize) {
+ if (contour[j + 2] !== z) {
+ allSameZ = false;
+ break;
+ }
+ }
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ if (allSameZ) {
+ this._tessy.gluTessNormal(0, 0, 1);
+ } else {
+ // Let libtess pick a plane for us
+ this._tessy.gluTessNormal(0, 0, 0);
+ }
+ var triangleVerts = [
+ ];
+ this._tessy.gluTessBeginPolygon(triangleVerts);
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ for (var _iterator4 = contours[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ var _contour = _step4.value;
+ this._tessy.gluTessBeginContour();
+ for (var _j = 0; _j < _contour.length; _j += _main.default.RendererGL.prototype.tessyVertexSize) {
+ var coords = _contour.slice(_j, _j + _main.default.RendererGL.prototype.tessyVertexSize);
+ this._tessy.gluTessVertex(coords, coords);
+ }
+ this._tessy.gluTessEndContour();
+ } // finish polygon
+
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ this._tessy.gluTessEndPolygon();
+ return triangleVerts;
+ }
+ }
+ ]);
+ return RendererGL;
+ }(_main.default.Renderer);
+ /**
+ * ensures that p5 is using a 3d renderer. throws an error if not.
+ */
+ _main.default.prototype._assert3d = function (name) {
+ if (!this._renderer.isP3D) throw new Error(''.concat(name, '() is only supported in WEBGL mode. If you\'d like to use 3D graphics and WebGL, see https://p5js.org/examples/form-3d-primitives.html for more information.'));
+ };
+ // function to initialize GLU Tesselator
+ _main.default.RendererGL.prototype.tessyVertexSize = 12;
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ '../core/p5.Renderer': 306,
+ './GeometryBuilder': 347,
+ './p5.Camera': 352,
+ './p5.Framebuffer': 354,
+ './p5.Matrix': 356,
+ './p5.Shader': 361,
+ './p5.Texture': 362,
+ 'core-js/modules/es.array.concat': 170,
+ 'core-js/modules/es.array.copy-within': 171,
+ 'core-js/modules/es.array.every': 172,
+ 'core-js/modules/es.array.fill': 173,
+ 'core-js/modules/es.array.flat': 177,
+ 'core-js/modules/es.array.flat-map': 176,
+ 'core-js/modules/es.array.from': 179,
+ 'core-js/modules/es.array.includes': 180,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.map': 185,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.some': 187,
+ 'core-js/modules/es.array.unscopables.flat': 190,
+ 'core-js/modules/es.array.unscopables.flat-map': 189,
+ 'core-js/modules/es.map': 192,
+ 'core-js/modules/es.object.assign': 199,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.reflect.get': 208,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.set': 212,
+ 'core-js/modules/es.string.includes': 214,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.float32-array': 234,
+ 'core-js/modules/es.typed-array.float64-array': 235,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.int16-array': 239,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint16-array': 255,
+ 'core-js/modules/es.typed-array.uint32-array': 256,
+ 'core-js/modules/es.typed-array.uint8-array': 257,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261,
+ 'libtess': 274,
+ 'path': 277
+ }
+ ],
+ 361: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * This module defines the p5.Shader class
+ * @module 3D
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */
+ /**
+ * A class to describe a shader program.
+ *
+ * Each `p5.Shader` object contains a shader program that runs on the graphics
+ * processing unit (GPU). Shaders can process many pixels or vertices at the
+ * same time, making them fast for many graphics tasks. They’re written in a
+ * language called
+ * GLSL
+ * and run along with the rest of the code in a sketch.
+ *
+ * A shader program consists of two files, a vertex shader and a fragment
+ * shader. The vertex shader affects where 3D geometry is drawn on the screen
+ * and the fragment shader affects color. Once the `p5.Shader` object is
+ * created, it can be used with the shader()
+ * function, as in `shader(myShader)`.
+ *
+ * Note: createShader(),
+ * createFilterShader(), and
+ * loadShader() are the recommended ways to
+ * create an instance of this class.
+ *
+ * @class p5.Shader
+ * @constructor
+ * @param {p5.RendererGL} renderer WebGL context for this shader.
+ * @param {String} vertSrc source code for the vertex shader program.
+ * @param {String} fragSrc source code for the fragment shader program.
+ *
+ * @example
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ *
+ * void main() {
+ * // Set each pixel's RGBA value to yellow.
+ * gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+ * }
+ * `;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * let myShader = createShader(vertSrc, fragSrc);
+ *
+ * // Apply the p5.Shader object.
+ * shader(myShader);
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ *
+ * describe('A yellow square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * let mandelbrot;
+ *
+ * // Load the shader and create a p5.Shader object.
+ * function preload() {
+ * mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Use the p5.Shader object.
+ * shader(mandelbrot);
+ *
+ * // Set the shader uniform p to an array.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *
+ * describe('A fractal image zooms in and out of focus.');
+ * }
+ *
+ * function draw() {
+ * // Set the shader uniform r to a value that oscillates between 0 and 2.
+ * mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+ *
+ * // Add a quad as a display surface for the shader.
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ */
+
+ _main.default.Shader = /*#__PURE__*/ function () {
+ function _class(renderer, vertSrc, fragSrc) {
+ _classCallCheck(this, _class);
+ // TODO: adapt this to not take ids, but rather,
+ // to take the source for a vertex and fragment shader
+ // to enable custom shaders at some later date
+ this._renderer = renderer;
+ this._vertSrc = vertSrc;
+ this._fragSrc = fragSrc;
+ this._vertShader = - 1;
+ this._fragShader = - 1;
+ this._glProgram = 0;
+ this._loadedAttributes = false;
+ this.attributes = {
+ };
+ this._loadedUniforms = false;
+ this.uniforms = {
+ };
+ this._bound = false;
+ this.samplers = [
+ ];
+ } /**
+ * Creates, compiles, and links the shader based on its
+ * sources for the vertex and fragment shaders (provided
+ * to the constructor). Populates known attributes and
+ * uniforms from the shader.
+ * @method init
+ * @chainable
+ * @private
+ */
+
+ _createClass(_class, [
+ {
+ key: 'init',
+ value: function init() {
+ if (this._glProgram === 0 /* or context is stale? */ ) {
+ var gl = this._renderer.GL;
+ // @todo: once custom shading is allowed,
+ // friendly error messages should be used here to share
+ // compiler and linker errors.
+ //set up the shader by
+ // 1. creating and getting a gl id for the shader program,
+ // 2. compliling its vertex & fragment sources,
+ // 3. linking the vertex and fragment shaders
+ this._vertShader = gl.createShader(gl.VERTEX_SHADER);
+ //load in our default vertex shader
+ gl.shaderSource(this._vertShader, this._vertSrc);
+ gl.compileShader(this._vertShader);
+ // if our vertex shader failed compilation?
+ if (!gl.getShaderParameter(this._vertShader, gl.COMPILE_STATUS)) {
+ _main.default._friendlyError('Yikes! An error occurred compiling the vertex shader:'.concat(gl.getShaderInfoLog(this._vertShader)));
+ return null;
+ }
+ this._fragShader = gl.createShader(gl.FRAGMENT_SHADER);
+ //load in our material frag shader
+ gl.shaderSource(this._fragShader, this._fragSrc);
+ gl.compileShader(this._fragShader);
+ // if our frag shader failed compilation?
+ if (!gl.getShaderParameter(this._fragShader, gl.COMPILE_STATUS)) {
+ _main.default._friendlyError('Darn! An error occurred compiling the fragment shader:'.concat(gl.getShaderInfoLog(this._fragShader)));
+ return null;
+ }
+ this._glProgram = gl.createProgram();
+ gl.attachShader(this._glProgram, this._vertShader);
+ gl.attachShader(this._glProgram, this._fragShader);
+ gl.linkProgram(this._glProgram);
+ if (!gl.getProgramParameter(this._glProgram, gl.LINK_STATUS)) {
+ _main.default._friendlyError('Snap! Error linking shader program: '.concat(gl.getProgramInfoLog(this._glProgram)));
+ }
+ this._loadAttributes();
+ this._loadUniforms();
+ }
+ return this;
+ } /**
+ * Copies the shader from one drawing context to another.
+ *
+ * Each `p5.Shader` object must be compiled by calling
+ * shader() before it can run. Compilation happens
+ * in a drawing context which is usually the main canvas or an instance of
+ * p5.Graphics. A shader can only be used in the
+ * context where it was compiled. The `copyToContext()` method compiles the
+ * shader again and copies it to another drawing context where it can be
+ * reused.
+ *
+ * The parameter, `context`, is the drawing context where the shader will be
+ * used. The shader can be copied to an instance of
+ * p5.Graphics, as in
+ * `myShader.copyToContext(pg)`. The shader can also be copied from a
+ * p5.Graphics object to the main canvas using
+ * the `window` variable, as in `myShader.copyToContext(window)`.
+ *
+ * Note: A p5.Shader object created with
+ * createShader(),
+ * createFilterShader(), or
+ * loadShader()
+ * can be used directly with a p5.Framebuffer
+ * object created with
+ * createFramebuffer(). Both objects
+ * have the same context as the main canvas.
+ *
+ * @method copyToContext
+ * @param {p5|p5.Graphics} context WebGL context for the copied shader.
+ * @returns {p5.Shader} new shader compiled for the target context.
+ *
+ * @example
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision mediump float;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vec2 uv = vTexCoord;
+ * vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
+ * gl_FragColor = vec4(color, 1.0);\
+ * }
+ * `;
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * background(200);
+ *
+ * // Create a p5.Shader object.
+ * let original = createShader(vertSrc, fragSrc);
+ *
+ * // Compile the p5.Shader object.
+ * shader(original);
+ *
+ * // Create a p5.Graphics object.
+ * pg = createGraphics(50, 50, WEBGL);
+ *
+ * // Copy the original shader to the p5.Graphics object.
+ * let copied = original.copyToContext(pg);
+ *
+ * // Apply the copied shader to the p5.Graphics object.
+ * pg.shader(copied);
+ *
+ * // Style the display surface.
+ * pg.noStroke();
+ *
+ * // Add a display surface for the shader.
+ * pg.plane(50, 50);
+ *
+ * describe('A square with purple-blue gradient on its surface drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw the p5.Graphics object to the main canvas.
+ * image(pg, -25, -25);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision mediump float;
+ *
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vec2 uv = vTexCoord;
+ * vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
+ * gl_FragColor = vec4(color, 1.0);
+ * }
+ * `;
+ *
+ * let copied;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Graphics object.
+ * let pg = createGraphics(25, 25, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * let original = pg.createShader(vertSrc, fragSrc);
+ *
+ * // Compile the p5.Shader object.
+ * pg.shader(original);
+ *
+ * // Copy the original shader to the main canvas.
+ * copied = original.copyToContext(window);
+ *
+ * // Apply the copied shader to the main canvas.
+ * shader(copied);
+ *
+ * describe('A rotating cube with a purple-blue gradient on its surface drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Rotate around the x-, y-, and z-axes.
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ *
+ * // Draw the box.
+ * box(50);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'copyToContext',
+ value: function copyToContext(context) {
+ var shader = new _main.default.Shader(context._renderer, this._vertSrc, this._fragSrc);
+ shader.ensureCompiledOnContext(context);
+ return shader;
+ } /**
+ * @private
+ */
+
+ },
+ {
+ key: 'ensureCompiledOnContext',
+ value: function ensureCompiledOnContext(context) {
+ if (this._glProgram !== 0 && this._renderer !== context._renderer) {
+ throw new Error('The shader being run is attached to a different context. Do you need to copy it to this context first with .copyToContext()?');
+ } else if (this._glProgram === 0) {
+ this._renderer = context._renderer;
+ this.init();
+ }
+ } /**
+ * Queries the active attributes for this shader and loads
+ * their names and locations into the attributes array.
+ * @method _loadAttributes
+ * @private
+ */
+
+ },
+ {
+ key: '_loadAttributes',
+ value: function _loadAttributes() {
+ if (this._loadedAttributes) {
+ return;
+ }
+ this.attributes = {
+ };
+ var gl = this._renderer.GL;
+ var numAttributes = gl.getProgramParameter(this._glProgram, gl.ACTIVE_ATTRIBUTES);
+ for (var i = 0; i < numAttributes; ++i) {
+ var attributeInfo = gl.getActiveAttrib(this._glProgram, i);
+ var name = attributeInfo.name;
+ var location = gl.getAttribLocation(this._glProgram, name);
+ var attribute = {
+ };
+ attribute.name = name;
+ attribute.location = location;
+ attribute.index = i;
+ attribute.type = attributeInfo.type;
+ attribute.size = attributeInfo.size;
+ this.attributes[name] = attribute;
+ }
+ this._loadedAttributes = true;
+ } /**
+ * Queries the active uniforms for this shader and loads
+ * their names and locations into the uniforms array.
+ * @method _loadUniforms
+ * @private
+ */
+
+ },
+ {
+ key: '_loadUniforms',
+ value: function _loadUniforms() {
+ if (this._loadedUniforms) {
+ return;
+ }
+ var gl = this._renderer.GL;
+ // Inspect shader and cache uniform info
+ var numUniforms = gl.getProgramParameter(this._glProgram, gl.ACTIVE_UNIFORMS);
+ var samplerIndex = 0;
+ for (var i = 0; i < numUniforms; ++i) {
+ var uniformInfo = gl.getActiveUniform(this._glProgram, i);
+ var uniform = {
+ };
+ uniform.location = gl.getUniformLocation(this._glProgram, uniformInfo.name);
+ uniform.size = uniformInfo.size;
+ var uniformName = uniformInfo.name;
+ //uniforms that are arrays have their name returned as
+ //someUniform[0] which is a bit silly so we trim it
+ //off here. The size property tells us that its an array
+ //so we dont lose any information by doing this
+ if (uniformInfo.size > 1) {
+ uniformName = uniformName.substring(0, uniformName.indexOf('[0]'));
+ }
+ uniform.name = uniformName;
+ uniform.type = uniformInfo.type;
+ uniform._cachedData = undefined;
+ if (uniform.type === gl.SAMPLER_2D) {
+ uniform.samplerIndex = samplerIndex;
+ samplerIndex++;
+ this.samplers.push(uniform);
+ }
+ uniform.isArray = uniformInfo.size > 1 || uniform.type === gl.FLOAT_MAT3 || uniform.type === gl.FLOAT_MAT4 || uniform.type === gl.FLOAT_VEC2 || uniform.type === gl.FLOAT_VEC3 || uniform.type === gl.FLOAT_VEC4 || uniform.type === gl.INT_VEC2 || uniform.type === gl.INT_VEC4 || uniform.type === gl.INT_VEC3;
+ this.uniforms[uniformName] = uniform;
+ }
+ this._loadedUniforms = true;
+ }
+ },
+ {
+ key: 'compile',
+ value: function compile() {
+ // TODO
+ } /**
+ * initializes (if needed) and binds the shader program.
+ * @method bindShader
+ * @private
+ */
+
+ },
+ {
+ key: 'bindShader',
+ value: function bindShader() {
+ this.init();
+ if (!this._bound) {
+ this.useProgram();
+ this._bound = true;
+ this._setMatrixUniforms();
+ this.setUniform('uViewport', this._renderer._viewport);
+ }
+ } /**
+ * @method unbindShader
+ * @chainable
+ * @private
+ */
+
+ },
+ {
+ key: 'unbindShader',
+ value: function unbindShader() {
+ if (this._bound) {
+ this.unbindTextures();
+ //this._renderer.GL.useProgram(0); ??
+ this._bound = false;
+ }
+ return this;
+ }
+ },
+ {
+ key: 'bindTextures',
+ value: function bindTextures() {
+ var gl = this._renderer.GL;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.samplers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var uniform = _step.value;
+ var tex = uniform.texture;
+ if (tex === undefined) {
+ // user hasn't yet supplied a texture for this slot.
+ // (or there may not be one--maybe just lighting),
+ // so we supply a default texture instead.
+ tex = this._renderer._getEmptyTexture();
+ }
+ gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+ tex.bindTexture();
+ tex.update();
+ gl.uniform1i(uniform.location, uniform.samplerIndex);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ }
+ },
+ {
+ key: 'updateTextures',
+ value: function updateTextures() {
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = this.samplers[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var uniform = _step2.value;
+ var tex = uniform.texture;
+ if (tex) {
+ tex.update();
+ }
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ }
+ },
+ {
+ key: 'unbindTextures',
+ value: function unbindTextures() {
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = this.samplers[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var uniform = _step3.value;
+ this.setUniform(uniform.name, this._renderer._getEmptyTexture());
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ }
+ },
+ {
+ key: '_setMatrixUniforms',
+ value: function _setMatrixUniforms() {
+ var viewMatrix = this._renderer._curCamera.cameraMatrix;
+ var projectionMatrix = this._renderer.uPMatrix;
+ var modelViewMatrix = this._renderer.uMVMatrix;
+ var modelViewProjectionMatrix = modelViewMatrix.copy();
+ modelViewProjectionMatrix.mult(projectionMatrix);
+ if (this.isStrokeShader()) {
+ this.setUniform('uPerspective', this._renderer._curCamera.useLinePerspective ? 1 : 0);
+ }
+ this.setUniform('uViewMatrix', viewMatrix.mat4);
+ this.setUniform('uProjectionMatrix', projectionMatrix.mat4);
+ this.setUniform('uModelViewMatrix', modelViewMatrix.mat4);
+ this.setUniform('uModelViewProjectionMatrix', modelViewProjectionMatrix.mat4);
+ if (this.uniforms.uNormalMatrix) {
+ this._renderer.uNMatrix.inverseTranspose(this._renderer.uMVMatrix);
+ this.setUniform('uNormalMatrix', this._renderer.uNMatrix.mat3);
+ }
+ if (this.uniforms.uCameraRotation) {
+ this._renderer.curMatrix.inverseTranspose(this._renderer._curCamera.cameraMatrix);
+ this.setUniform('uCameraRotation', this._renderer.curMatrix.mat3);
+ }
+ } /**
+ * @method useProgram
+ * @chainable
+ * @private
+ */
+
+ },
+ {
+ key: 'useProgram',
+ value: function useProgram() {
+ var gl = this._renderer.GL;
+ if (this._renderer._curShader !== this) {
+ gl.useProgram(this._glProgram);
+ this._renderer._curShader = this;
+ }
+ return this;
+ } /**
+ * Sets the shader’s uniform (global) variables.
+ *
+ * Shader programs run on the computer’s graphics processing unit (GPU).
+ * They live in part of the computer’s memory that’s completely separate
+ * from the sketch that runs them. Uniforms are global variables within a
+ * shader program. They provide a way to pass values from a sketch running
+ * on the CPU to a shader program running on the GPU.
+ *
+ * The first parameter, `uniformName`, is a string with the uniform’s name.
+ * For the shader above, `uniformName` would be `'r'`.
+ *
+ * The second parameter, `data`, is the value that should be used to set the
+ * uniform. For example, calling `myShader.setUniform('r', 0.5)` would set
+ * the `r` uniform in the shader above to `0.5`. data should match the
+ * uniform’s type. Numbers, strings, booleans, arrays, and many types of
+ * images can all be passed to a shader with `setUniform()`.
+ *
+ * @method setUniform
+ * @chainable
+ * @param {String} uniformName name of the uniform. Must match the name
+ * used in the vertex and fragment shaders.
+ * @param {Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture}
+ * data value to assign to the uniform. Must match the uniform’s data type.
+ *
+ * @example
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision mediump float;
+ *
+ * uniform float r;
+ *
+ * void main() {
+ * gl_FragColor = vec4(r, 1.0, 1.0, 1.0);
+ * }
+ * `;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * let myShader = createShader(vertSrc, fragSrc);
+ *
+ * // Apply the p5.Shader object.
+ * shader(myShader);
+ *
+ * // Set the r uniform to 0.5.
+ * myShader.setUniform('r', 0.5);
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Add a plane as a drawing surface for the shader.
+ * plane(100, 100);
+ *
+ * describe('A cyan square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision mediump float;
+ *
+ * uniform float r;
+ *
+ * void main() {
+ * gl_FragColor = vec4(r, 1.0, 1.0, 1.0);
+ * }
+ * `;
+ *
+ * let myShader;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * myShader = createShader(vertSrc, fragSrc);
+ *
+ * // Compile and apply the p5.Shader object.
+ * shader(myShader);
+ *
+ * describe('A square oscillates color between cyan and white.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Update the r uniform.
+ * let nextR = 0.5 * (sin(frameCount * 0.01) + 1);
+ * myShader.setUniform('r', nextR);
+ *
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Note: A "uniform" is a global variable within a shader program.
+ *
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ *
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ * uniform vec2 p;
+ * uniform float r;
+ * const int numIterations = 500;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ * vec2 c = p + gl_FragCoord.xy * r;
+ * vec2 z = c;
+ * float n = 0.0;
+ *
+ * for (int i = numIterations; i > 0; i--) {
+ * if (z.x * z.x + z.y * z.y > 4.0) {
+ * n = float(i) / float(numIterations);
+ * break;
+ * }
+ *
+ * z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+ * }
+ *
+ * gl_FragColor = vec4(
+ * 0.5 - cos(n * 17.0) / 2.0,
+ * 0.5 - cos(n * 13.0) / 2.0,
+ * 0.5 - cos(n * 23.0) / 2.0,
+ * 1.0
+ * );
+ * }
+ * `;
+ *
+ * let mandelbrot;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // Create a p5.Shader object.
+ * mandelbrot = createShader(vertSrc, fragSrc);
+ *
+ * // Compile and apply the p5.Shader object.
+ * shader(mandelbrot);
+ *
+ * // Set the shader uniform p to an array.
+ * // p is the center point of the Mandelbrot image.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *
+ * describe('A fractal image zooms in and out of focus.');
+ * }
+ *
+ * function draw() {
+ * // Set the shader uniform r to a value that oscillates
+ * // between 0 and 0.005.
+ * // r is the size of the image in Mandelbrot-space.
+ * let radius = 0.005 * (sin(frameCount * 0.01) + 1);
+ * mandelbrot.setUniform('r', radius);
+ *
+ * // Style the drawing surface.
+ * noStroke();
+ *
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setUniform',
+ value: function setUniform(uniformName, data) {
+ var uniform = this.uniforms[uniformName];
+ if (!uniform) {
+ return;
+ }
+ var gl = this._renderer.GL;
+ if (uniform.isArray) {
+ if (uniform._cachedData && this._renderer._arraysEqual(uniform._cachedData, data)) {
+ return;
+ } else {
+ uniform._cachedData = data.slice(0);
+ }
+ } else if (uniform._cachedData && uniform._cachedData === data) {
+ return;
+ } else {
+ if (Array.isArray(data)) {
+ uniform._cachedData = data.slice(0);
+ } else {
+ uniform._cachedData = data;
+ }
+ }
+ var location = uniform.location;
+ this.useProgram();
+ switch (uniform.type) {
+ case gl.BOOL:
+ if (data === true) {
+ gl.uniform1i(location, 1);
+ } else {
+ gl.uniform1i(location, 0);
+ }
+ break;
+ case gl.INT:
+ if (uniform.size > 1) {
+ data.length && gl.uniform1iv(location, data);
+ } else {
+ gl.uniform1i(location, data);
+ }
+ break;
+ case gl.FLOAT:
+ if (uniform.size > 1) {
+ data.length && gl.uniform1fv(location, data);
+ } else {
+ gl.uniform1f(location, data);
+ }
+ break;
+ case gl.FLOAT_MAT3:
+ gl.uniformMatrix3fv(location, false, data);
+ break;
+ case gl.FLOAT_MAT4:
+ gl.uniformMatrix4fv(location, false, data);
+ break;
+ case gl.FLOAT_VEC2:
+ if (uniform.size > 1) {
+ data.length && gl.uniform2fv(location, data);
+ } else {
+ gl.uniform2f(location, data[0], data[1]);
+ }
+ break;
+ case gl.FLOAT_VEC3:
+ if (uniform.size > 1) {
+ data.length && gl.uniform3fv(location, data);
+ } else {
+ gl.uniform3f(location, data[0], data[1], data[2]);
+ }
+ break;
+ case gl.FLOAT_VEC4:
+ if (uniform.size > 1) {
+ data.length && gl.uniform4fv(location, data);
+ } else {
+ gl.uniform4f(location, data[0], data[1], data[2], data[3]);
+ }
+ break;
+ case gl.INT_VEC2:
+ if (uniform.size > 1) {
+ data.length && gl.uniform2iv(location, data);
+ } else {
+ gl.uniform2i(location, data[0], data[1]);
+ }
+ break;
+ case gl.INT_VEC3:
+ if (uniform.size > 1) {
+ data.length && gl.uniform3iv(location, data);
+ } else {
+ gl.uniform3i(location, data[0], data[1], data[2]);
+ }
+ break;
+ case gl.INT_VEC4:
+ if (uniform.size > 1) {
+ data.length && gl.uniform4iv(location, data);
+ } else {
+ gl.uniform4i(location, data[0], data[1], data[2], data[3]);
+ }
+ break;
+ case gl.SAMPLER_2D:
+ gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+ uniform.texture = data instanceof _main.default.Texture ? data : this._renderer.getTexture(data);
+ gl.uniform1i(location, uniform.samplerIndex);
+ if (uniform.texture.src.gifProperties) {
+ uniform.texture.src._animateGif(this._renderer._pInst);
+ }
+ break;
+ //@todo complete all types
+ }
+ return this;
+ } /* NONE OF THIS IS FAST OR EFFICIENT BUT BEAR WITH ME
+ *
+ * these shader "type" query methods are used by various
+ * facilities of the renderer to determine if changing
+ * the shader type for the required action (for example,
+ * do we need to load the default lighting shader if the
+ * current shader cannot handle lighting?)
+ *
+ **/
+
+ },
+ {
+ key: 'isLightShader',
+ value: function isLightShader() {
+ return [this.attributes.aNormal,
+ this.uniforms.uUseLighting,
+ this.uniforms.uAmbientLightCount,
+ this.uniforms.uDirectionalLightCount,
+ this.uniforms.uPointLightCount,
+ this.uniforms.uAmbientColor,
+ this.uniforms.uDirectionalDiffuseColors,
+ this.uniforms.uDirectionalSpecularColors,
+ this.uniforms.uPointLightLocation,
+ this.uniforms.uPointLightDiffuseColors,
+ this.uniforms.uPointLightSpecularColors,
+ this.uniforms.uLightingDirection,
+ this.uniforms.uSpecular].some(function (x) {
+ return x !== undefined;
+ });
+ }
+ },
+ {
+ key: 'isNormalShader',
+ value: function isNormalShader() {
+ return this.attributes.aNormal !== undefined;
+ }
+ },
+ {
+ key: 'isTextureShader',
+ value: function isTextureShader() {
+ return this.samplers.length > 0;
+ }
+ },
+ {
+ key: 'isColorShader',
+ value: function isColorShader() {
+ return this.attributes.aVertexColor !== undefined || this.uniforms.uMaterialColor !== undefined;
+ }
+ },
+ {
+ key: 'isTexLightShader',
+ value: function isTexLightShader() {
+ return this.isLightShader() && this.isTextureShader();
+ }
+ },
+ {
+ key: 'isStrokeShader',
+ value: function isStrokeShader() {
+ return this.uniforms.uStrokeWeight !== undefined;
+ } /**
+ * @method enableAttrib
+ * @chainable
+ * @private
+ */
+
+ },
+ {
+ key: 'enableAttrib',
+ value: function enableAttrib(attr, size, type, normalized, stride, offset) {
+ if (attr) {
+ if (typeof IS_MINIFIED === 'undefined' && this.attributes[attr.name] !== attr) {
+ console.warn('The attribute "'.concat(attr.name, '"passed to enableAttrib does not belong to this shader.'));
+ }
+ var loc = attr.location;
+ if (loc !== - 1) {
+ var gl = this._renderer.GL;
+ // Enable register even if it is disabled
+ if (!this._renderer.registerEnabled.has(loc)) {
+ gl.enableVertexAttribArray(loc);
+ // Record register availability
+ this._renderer.registerEnabled.add(loc);
+ }
+ this._renderer.GL.vertexAttribPointer(loc, size, type || gl.FLOAT, normalized || false, stride || 0, offset || 0);
+ }
+ }
+ return this;
+ } /**
+ * Once all buffers have been bound, this checks to see if there are any
+ * remaining active attributes, likely left over from previous renders,
+ * and disables them so that they don't affect rendering.
+ * @method disableRemainingAttributes
+ * @private
+ */
+
+ },
+ {
+ key: 'disableRemainingAttributes',
+ value: function disableRemainingAttributes() {
+ var _this = this;
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ var _loop = function _loop() {
+ var location = _step4.value;
+ if (!Object.keys(_this.attributes).some(function (key) {
+ return _this.attributes[key].location === location;
+ })) {
+ _this._renderer.GL.disableVertexAttribArray(location);
+ _this._renderer.registerEnabled.delete(location);
+ }
+ };
+ for (var _iterator4 = this._renderer.registerEnabled.values() [Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ _loop();
+ }
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Shader;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 303,
+ 'core-js/modules/es.array.index-of': 181,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.array.slice': 186,
+ 'core-js/modules/es.array.some': 187,
+ 'core-js/modules/es.function.name': 191,
+ 'core-js/modules/es.object.keys': 204,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 362: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.checkWebGLCapabilities = checkWebGLCapabilities;
+ exports.default = exports.MipmapTexture = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * This module defines the p5.Texture class
+ * @module 3D
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Texture class for WEBGL Mode
+ * @private
+ * @class p5.Texture
+ * @param {p5.RendererGL} renderer an instance of p5.RendererGL that
+ * will provide the GL context for this new p5.Texture
+ * @param {p5.Image|p5.Graphics|p5.Element|p5.MediaElement|ImageData|p5.Framebuffer|p5.FramebufferTexture|ImageData} [obj] the
+ * object containing the image data to store in the texture.
+ * @param {Object} [settings] optional A javascript object containing texture
+ * settings.
+ * @param {Number} [settings.format] optional The internal color component
+ * format for the texture. Possible values for format include gl.RGBA,
+ * gl.RGB, gl.ALPHA, gl.LUMINANCE, gl.LUMINANCE_ALPHA. Defaults to gl.RBGA
+ * @param {Number} [settings.minFilter] optional The texture minification
+ * filter setting. Possible values are gl.NEAREST or gl.LINEAR. Defaults
+ * to gl.LINEAR. Note, Mipmaps are not implemented in p5.
+ * @param {Number} [settings.magFilter] optional The texture magnification
+ * filter setting. Possible values are gl.NEAREST or gl.LINEAR. Defaults
+ * to gl.LINEAR. Note, Mipmaps are not implemented in p5.
+ * @param {Number} [settings.wrapS] optional The texture wrap settings for
+ * the s coordinate, or x axis. Possible values are gl.CLAMP_TO_EDGE,
+ * gl.REPEAT, and gl.MIRRORED_REPEAT. The mirror settings are only available
+ * when using a power of two sized texture. Defaults to gl.CLAMP_TO_EDGE
+ * @param {Number} [settings.wrapT] optional The texture wrap settings for
+ * the t coordinate, or y axis. Possible values are gl.CLAMP_TO_EDGE,
+ * gl.REPEAT, and gl.MIRRORED_REPEAT. The mirror settings are only available
+ * when using a power of two sized texture. Defaults to gl.CLAMP_TO_EDGE
+ * @param {Number} [settings.dataType] optional The data type of the texel
+ * data. Possible values are gl.UNSIGNED_BYTE or gl.FLOAT. There are more
+ * formats that are not implemented in p5. Defaults to gl.UNSIGNED_BYTE.
+ */
+
+ _main.default.Texture = /*#__PURE__*/ function () {
+ function Texture(renderer, obj, settings) {
+ _classCallCheck(this, Texture);
+ this._renderer = renderer;
+ var gl = this._renderer.GL;
+ settings = settings || {
+ };
+ this.src = obj;
+ this.glTex = undefined;
+ this.glTarget = gl.TEXTURE_2D;
+ this.glFormat = settings.format || gl.RGBA;
+ this.mipmaps = false;
+ this.glMinFilter = settings.minFilter || gl.LINEAR;
+ this.glMagFilter = settings.magFilter || gl.LINEAR;
+ this.glWrapS = settings.wrapS || gl.CLAMP_TO_EDGE;
+ this.glWrapT = settings.wrapT || gl.CLAMP_TO_EDGE;
+ this.glDataType = settings.dataType || gl.UNSIGNED_BYTE;
+ var support = checkWebGLCapabilities(renderer);
+ if (this.glFormat === gl.HALF_FLOAT && !support.halfFloat) {
+ console.log('This device does not support dataType HALF_FLOAT. Falling back to FLOAT.');
+ this.glDataType = gl.FLOAT;
+ }
+ if (this.glFormat === gl.HALF_FLOAT && (this.glMinFilter === gl.LINEAR || this.glMagFilter === gl.LINEAR) && !support.halfFloatLinear) {
+ console.log('This device does not support linear filtering for dataType FLOAT. Falling back to NEAREST.');
+ if (this.glMinFilter === gl.LINEAR) this.glMinFilter = gl.NEAREST;
+ if (this.glMagFilter === gl.LINEAR) this.glMagFilter = gl.NEAREST;
+ }
+ if (this.glFormat === gl.FLOAT && !support.float) {
+ console.log('This device does not support dataType FLOAT. Falling back to UNSIGNED_BYTE.');
+ this.glDataType = gl.UNSIGNED_BYTE;
+ }
+ if (this.glFormat === gl.FLOAT && (this.glMinFilter === gl.LINEAR || this.glMagFilter === gl.LINEAR) && !support.floatLinear) {
+ console.log('This device does not support linear filtering for dataType FLOAT. Falling back to NEAREST.');
+ if (this.glMinFilter === gl.LINEAR) this.glMinFilter = gl.NEAREST;
+ if (this.glMagFilter === gl.LINEAR) this.glMagFilter = gl.NEAREST;
+ } // used to determine if this texture might need constant updating
+ // because it is a video or gif.
+
+ this.isSrcMediaElement = typeof _main.default.MediaElement !== 'undefined' && obj instanceof _main.default.MediaElement;
+ this._videoPrevUpdateTime = 0;
+ this.isSrcHTMLElement = typeof _main.default.Element !== 'undefined' && obj instanceof _main.default.Element && !(obj instanceof _main.default.Graphics) && !(obj instanceof _main.default.Renderer);
+ this.isSrcP5Image = obj instanceof _main.default.Image;
+ this.isSrcP5Graphics = obj instanceof _main.default.Graphics;
+ this.isSrcP5Renderer = obj instanceof _main.default.Renderer;
+ this.isImageData = typeof ImageData !== 'undefined' && obj instanceof ImageData;
+ this.isFramebufferTexture = obj instanceof _main.default.FramebufferTexture;
+ var textureData = this._getTextureDataFromSource();
+ this.width = textureData.width;
+ this.height = textureData.height;
+ this.init(textureData);
+ return this;
+ }
+ _createClass(Texture, [
+ {
+ key: '_getTextureDataFromSource',
+ value: function _getTextureDataFromSource() {
+ var textureData;
+ if (this.isFramebufferTexture) {
+ textureData = this.src.rawTexture();
+ } else if (this.isSrcP5Image) {
+ // param is a p5.Image
+ textureData = this.src.canvas;
+ } else if (this.isSrcMediaElement || this.isSrcP5Graphics || this.isSrcP5Renderer || this.isSrcHTMLElement) {
+ // if param is a video HTML element
+ textureData = this.src.elt;
+ } else if (this.isImageData) {
+ textureData = this.src;
+ }
+ return textureData;
+ } /**
+ * Initializes common texture parameters, creates a gl texture,
+ * tries to upload the texture for the first time if data is
+ * already available.
+ * @private
+ * @method init
+ */
+
+ },
+ {
+ key: 'init',
+ value: function init(data) {
+ var gl = this._renderer.GL;
+ if (!this.isFramebufferTexture) {
+ this.glTex = gl.createTexture();
+ }
+ this.glWrapS = this._renderer.textureWrapX;
+ this.glWrapT = this._renderer.textureWrapY;
+ this.setWrapMode(this.glWrapS, this.glWrapT);
+ this.bindTexture();
+ //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.glMagFilter);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.glMinFilter);
+ if (this.isFramebufferTexture) {
+ // Do nothing, the framebuffer manages its own content
+ } else if (this.width === 0 || this.height === 0 || this.isSrcMediaElement && !this.src.loadedmetadata) {
+ // assign a 1×1 empty texture initially, because data is not yet ready,
+ // so that no errors occur in gl console!
+ var tmpdata = new Uint8Array([1,
+ 1,
+ 1,
+ 1]);
+ gl.texImage2D(this.glTarget, 0, gl.RGBA, 1, 1, 0, this.glFormat, this.glDataType, tmpdata);
+ } else {
+ // data is ready: just push the texture!
+ gl.texImage2D(this.glTarget, 0, this.glFormat, this.glFormat, this.glDataType, data);
+ }
+ } /**
+ * Checks if the source data for this texture has changed (if it's
+ * easy to do so) and reuploads the texture if necessary. If it's not
+ * possible or to expensive to do a calculation to determine wheter or
+ * not the data has occurred, this method simply re-uploads the texture.
+ * @method update
+ */
+
+ },
+ {
+ key: 'update',
+ value: function update() {
+ var data = this.src;
+ if (data.width === 0 || data.height === 0) {
+ return false; // nothing to do!
+ } // FramebufferTexture instances wrap raw WebGL textures already, which
+ // don't need any extra updating, as they already live on the GPU
+
+ if (this.isFramebufferTexture) {
+ return false;
+ }
+ var textureData = this._getTextureDataFromSource();
+ var updated = false;
+ var gl = this._renderer.GL;
+ // pull texture from data, make sure width & height are appropriate
+ if (textureData.width !== this.width || textureData.height !== this.height) {
+ updated = true;
+ // make sure that if the width and height of this.src have changed
+ // for some reason, we update our metadata and upload the texture again
+ this.width = textureData.width || data.width;
+ this.height = textureData.height || data.height;
+ if (this.isSrcP5Image) {
+ data.setModified(false);
+ } else if (this.isSrcMediaElement || this.isSrcHTMLElement) {
+ // on the first frame the metadata comes in, the size will be changed
+ // from 0 to actual size, but pixels may not be available.
+ // flag for update in a future frame.
+ // if we don't do this, a paused video, for example, may not
+ // send the first frame to texture memory.
+ data.setModified(true);
+ }
+ } else if (this.isSrcP5Image) {
+ // for an image, we only update if the modified field has been set,
+ // for example, by a call to p5.Image.set
+ if (data.isModified()) {
+ updated = true;
+ data.setModified(false);
+ }
+ } else if (this.isSrcMediaElement) {
+ // for a media element (video), we'll check if the current time in
+ // the video frame matches the last time. if it doesn't match, the
+ // video has advanced or otherwise been taken to a new frame,
+ // and we need to upload it.
+ if (data.isModified()) {
+ // p5.MediaElement may have also had set/updatePixels, etc. called
+ // on it and should be updated, or may have been set for the first
+ // time!
+ updated = true;
+ data.setModified(false);
+ } else if (data.loadedmetadata) {
+ // if the meta data has been loaded, we can ask the video
+ // what it's current position (in time) is.
+ if (this._videoPrevUpdateTime !== data.time()) {
+ // update the texture in gpu mem only if the current
+ // video timestamp does not match the timestamp of the last
+ // time we uploaded this texture (and update the time we
+ // last uploaded, too)
+ this._videoPrevUpdateTime = data.time();
+ updated = true;
+ }
+ }
+ } else if (this.isImageData) {
+ if (data._dirty) {
+ data._dirty = false;
+ updated = true;
+ }
+ } else {
+ /* data instanceof p5.Graphics, probably */
+ // there is not enough information to tell if the texture can be
+ // conditionally updated; so to be safe, we just go ahead and upload it.
+ updated = true;
+ }
+ if (updated) {
+ this.bindTexture();
+ gl.texImage2D(this.glTarget, 0, this.glFormat, this.glFormat, this.glDataType, textureData);
+ }
+ return updated;
+ } /**
+ * Binds the texture to the appropriate GL target.
+ * @method bindTexture
+ */
+
+ },
+ {
+ key: 'bindTexture',
+ value: function bindTexture() {
+ // bind texture using gl context + glTarget and
+ // generated gl texture object
+ var gl = this._renderer.GL;
+ gl.bindTexture(this.glTarget, this.getTexture());
+ return this;
+ } /**
+ * Unbinds the texture from the appropriate GL target.
+ * @method unbindTexture
+ */
+
+ },
+ {
+ key: 'unbindTexture',
+ value: function unbindTexture() {
+ // unbind per above, disable texturing on glTarget
+ var gl = this._renderer.GL;
+ gl.bindTexture(this.glTarget, null);
+ }
+ },
+ {
+ key: 'getTexture',
+ value: function getTexture() {
+ if (this.isFramebufferTexture) {
+ return this.src.rawTexture();
+ } else {
+ return this.glTex;
+ }
+ } /**
+ * Sets how a texture is be interpolated when upscaled or downscaled.
+ * Nearest filtering uses nearest neighbor scaling when interpolating
+ * Linear filtering uses WebGL's linear scaling when interpolating
+ * @method setInterpolation
+ * @param {String} downScale Specifies the texture filtering when
+ * textures are shrunk. Options are LINEAR or NEAREST
+ * @param {String} upScale Specifies the texture filtering when
+ * textures are magnified. Options are LINEAR or NEAREST
+ * @todo implement mipmapping filters
+ */
+
+ },
+ {
+ key: 'setInterpolation',
+ value: function setInterpolation(downScale, upScale) {
+ var gl = this._renderer.GL;
+ this.glMinFilter = this.glFilter(downScale);
+ this.glMagFilter = this.glFilter(upScale);
+ this.bindTexture();
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.glMinFilter);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.glMagFilter);
+ this.unbindTexture();
+ }
+ },
+ {
+ key: 'glFilter',
+ value: function glFilter(filter) {
+ var gl = this._renderer.GL;
+ if (filter === constants.NEAREST) {
+ return gl.NEAREST;
+ } else {
+ return gl.LINEAR;
+ }
+ } /**
+ * Sets the texture wrapping mode. This controls how textures behave
+ * when their uv's go outside of the 0 - 1 range. There are three options:
+ * CLAMP, REPEAT, and MIRROR. REPEAT & MIRROR are only available if the texture
+ * is a power of two size (128, 256, 512, 1024, etc.).
+ * @method setWrapMode
+ * @param {String} wrapX Controls the horizontal texture wrapping behavior
+ * @param {String} wrapY Controls the vertical texture wrapping behavior
+ */
+
+ },
+ {
+ key: 'setWrapMode',
+ value: function setWrapMode(wrapX, wrapY) {
+ var gl = this._renderer.GL;
+ // for webgl 1 we need to check if the texture is power of two
+ // if it isn't we will set the wrap mode to CLAMP
+ // webgl2 will support npot REPEAT and MIRROR but we don't check for it yet
+ var isPowerOfTwo = function isPowerOfTwo(x) {
+ return (x & x - 1) === 0;
+ };
+ var textureData = this._getTextureDataFromSource();
+ var wrapWidth;
+ var wrapHeight;
+ if (textureData.naturalWidth && textureData.naturalHeight) {
+ wrapWidth = textureData.naturalWidth;
+ wrapHeight = textureData.naturalHeight;
+ } else {
+ wrapWidth = this.width;
+ wrapHeight = this.height;
+ }
+ var widthPowerOfTwo = isPowerOfTwo(wrapWidth);
+ var heightPowerOfTwo = isPowerOfTwo(wrapHeight);
+ if (wrapX === constants.REPEAT) {
+ if (this._renderer.webglVersion === constants.WEBGL2 || widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapS = gl.REPEAT;
+ } else {
+ console.warn('You tried to set the wrap mode to REPEAT but the texture size is not a power of two. Setting to CLAMP instead');
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+ } else if (wrapX === constants.MIRROR) {
+ if (this._renderer.webglVersion === constants.WEBGL2 || widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapS = gl.MIRRORED_REPEAT;
+ } else {
+ console.warn('You tried to set the wrap mode to MIRROR but the texture size is not a power of two. Setting to CLAMP instead');
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+ } else {
+ // falling back to default if didn't get a proper mode
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+ if (wrapY === constants.REPEAT) {
+ if (this._renderer.webglVersion === constants.WEBGL2 || widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapT = gl.REPEAT;
+ } else {
+ console.warn('You tried to set the wrap mode to REPEAT but the texture size is not a power of two. Setting to CLAMP instead');
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+ } else if (wrapY === constants.MIRROR) {
+ if (this._renderer.webglVersion === constants.WEBGL2 || widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapT = gl.MIRRORED_REPEAT;
+ } else {
+ console.warn('You tried to set the wrap mode to MIRROR but the texture size is not a power of two. Setting to CLAMP instead');
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+ } else {
+ // falling back to default if didn't get a proper mode
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+ this.bindTexture();
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.glWrapS);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.glWrapT);
+ this.unbindTexture();
+ }
+ }
+ ]);
+ return Texture;
+ }();
+ var MipmapTexture = /*#__PURE__*/ function (_p5$Texture) {
+ _inherits(MipmapTexture, _p5$Texture);
+ var _super = _createSuper(MipmapTexture);
+ function MipmapTexture(renderer, levels, settings) {
+ var _this;
+ _classCallCheck(this, MipmapTexture);
+ _this = _super.call(this, renderer, levels, settings);
+ var gl = _this._renderer.GL;
+ if (_this.glMinFilter === gl.LINEAR) {
+ _this.glMinFilter = gl.LINEAR_MIPMAP_LINEAR;
+ }
+ return _this;
+ }
+ _createClass(MipmapTexture, [
+ {
+ key: 'glFilter',
+ value: function glFilter(_filter) {
+ var gl = this._renderer.GL;
+ // TODO: support others
+ return gl.LINEAR_MIPMAP_LINEAR;
+ }
+ },
+ {
+ key: '_getTextureDataFromSource',
+ value: function _getTextureDataFromSource() {
+ return this.src;
+ }
+ },
+ {
+ key: 'init',
+ value: function init(levels) {
+ var gl = this._renderer.GL;
+ this.glTex = gl.createTexture();
+ this.bindTexture();
+ for (var level = 0; level < levels.length; level++) {
+ gl.texImage2D(this.glTarget, level, this.glFormat, this.glFormat, this.glDataType, levels[level]);
+ }
+ this.glMinFilter = gl.LINEAR_MIPMAP_LINEAR;
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.glMagFilter);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.glMinFilter);
+ this.unbindTexture();
+ }
+ },
+ {
+ key: 'update',
+ value: function update() {
+ }
+ }
+ ]);
+ return MipmapTexture;
+ }(_main.default.Texture);
+ exports.MipmapTexture = MipmapTexture;
+ function checkWebGLCapabilities(_ref) {
+ var GL = _ref.GL,
+ webglVersion = _ref.webglVersion;
+ var gl = GL;
+ var supportsFloat = webglVersion === constants.WEBGL2 ? gl.getExtension('EXT_color_buffer_float') && gl.getExtension('EXT_float_blend') : gl.getExtension('OES_texture_float');
+ var supportsFloatLinear = supportsFloat && gl.getExtension('OES_texture_float_linear');
+ var supportsHalfFloat = webglVersion === constants.WEBGL2 ? gl.getExtension('EXT_color_buffer_float') : gl.getExtension('OES_texture_half_float');
+ var supportsHalfFloatLinear = supportsHalfFloat && gl.getExtension('OES_texture_half_float_linear');
+ return {
+ float: supportsFloat,
+ floatLinear: supportsFloatLinear,
+ halfFloat: supportsHalfFloat,
+ halfFloatLinear: supportsHalfFloatLinear
+ };
+ }
+ var _default = _main.default.Texture;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.get-prototype-of': 203,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.reflect.construct': 207,
+ 'core-js/modules/es.regexp.to-string': 211,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.typed-array.copy-within': 228,
+ 'core-js/modules/es.typed-array.every': 229,
+ 'core-js/modules/es.typed-array.fill': 230,
+ 'core-js/modules/es.typed-array.filter': 231,
+ 'core-js/modules/es.typed-array.find': 233,
+ 'core-js/modules/es.typed-array.find-index': 232,
+ 'core-js/modules/es.typed-array.for-each': 236,
+ 'core-js/modules/es.typed-array.includes': 237,
+ 'core-js/modules/es.typed-array.index-of': 238,
+ 'core-js/modules/es.typed-array.iterator': 241,
+ 'core-js/modules/es.typed-array.join': 242,
+ 'core-js/modules/es.typed-array.last-index-of': 243,
+ 'core-js/modules/es.typed-array.map': 244,
+ 'core-js/modules/es.typed-array.reduce': 246,
+ 'core-js/modules/es.typed-array.reduce-right': 245,
+ 'core-js/modules/es.typed-array.reverse': 247,
+ 'core-js/modules/es.typed-array.set': 248,
+ 'core-js/modules/es.typed-array.slice': 249,
+ 'core-js/modules/es.typed-array.some': 250,
+ 'core-js/modules/es.typed-array.sort': 251,
+ 'core-js/modules/es.typed-array.subarray': 252,
+ 'core-js/modules/es.typed-array.to-locale-string': 253,
+ 'core-js/modules/es.typed-array.to-string': 254,
+ 'core-js/modules/es.typed-array.uint8-array': 257,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 363: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Shader');
+ _dereq_('./p5.RendererGL.Retained');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } // Text/Typography
+ // @TODO:
+
+ _main.default.RendererGL.prototype._applyTextProperties = function () {
+ //@TODO finish implementation
+ //console.error('text commands not yet implemented in webgl');
+ };
+ _main.default.RendererGL.prototype.textWidth = function (s) {
+ if (this._isOpenType()) {
+ return this._textFont._textWidth(s, this._textSize);
+ }
+ return 0; // TODO: error
+ };
+ // rendering constants
+ // the number of rows/columns dividing each glyph
+ var charGridWidth = 9;
+ var charGridHeight = charGridWidth;
+ // size of the image holding the bezier stroke info
+ var strokeImageWidth = 64;
+ var strokeImageHeight = 64;
+ // size of the image holding the stroke indices for each row/col
+ var gridImageWidth = 64;
+ var gridImageHeight = 64;
+ // size of the image holding the offset/length of each row/col stripe
+ var cellImageWidth = 64;
+ var cellImageHeight = 64;
+ /**
+ * @private
+ * @class ImageInfos
+ * @param {Integer} width
+ * @param {Integer} height
+ *
+ * the ImageInfos class holds a list of ImageDatas of a given size.
+ */
+ var ImageInfos = /*#__PURE__*/ function () {
+ function ImageInfos(width, height) {
+ _classCallCheck(this, ImageInfos);
+ this.width = width;
+ this.height = height;
+ this.infos = [
+ ]; // the list of images
+ } /**
+ *
+ * @method findImage
+ * @param {Integer} space
+ * @return {Object} contains the ImageData, and pixel index into that
+ * ImageData where the free space was allocated.
+ *
+ * finds free space of a given size in the ImageData list
+ */
+
+ _createClass(ImageInfos, [
+ {
+ key: 'findImage',
+ value: function findImage(space) {
+ var imageSize = this.width * this.height;
+ if (space > imageSize) throw new Error('font is too complex to render in 3D');
+ // search through the list of images, looking for one with
+ // anough unused space.
+ var imageInfo,
+ imageData;
+ for (var ii = this.infos.length - 1; ii >= 0; --ii) {
+ var imageInfoTest = this.infos[ii];
+ if (imageInfoTest.index + space < imageSize) {
+ // found one
+ imageInfo = imageInfoTest;
+ imageData = imageInfoTest.imageData;
+ break;
+ }
+ }
+ if (!imageInfo) {
+ try {
+ // create a new image
+ imageData = new ImageData(this.width, this.height);
+ } catch (err) {
+ // for browsers that don't support ImageData constructors (ie IE11)
+ // create an ImageData using the old method
+ var canvas = document.getElementsByTagName('canvas') [0];
+ var created = !canvas;
+ if (!canvas) {
+ // create a temporary canvas
+ canvas = document.createElement('canvas');
+ canvas.style.display = 'none';
+ document.body.appendChild(canvas);
+ }
+ var ctx = canvas.getContext('2d');
+ if (ctx) {
+ imageData = ctx.createImageData(this.width, this.height);
+ }
+ if (created) {
+ // distroy the temporary canvas, if necessary
+ document.body.removeChild(canvas);
+ }
+ } // construct & dd the new image info
+
+ imageInfo = {
+ index: 0,
+ imageData: imageData
+ };
+ this.infos.push(imageInfo);
+ }
+ var index = imageInfo.index;
+ imageInfo.index += space; // move to the start of the next image
+ imageData._dirty = true;
+ return {
+ imageData: imageData,
+ index: index
+ };
+ }
+ }
+ ]);
+ return ImageInfos;
+ }();
+ /**
+ * @function setPixel
+ * @param {Object} imageInfo
+ * @param {Number} r
+ * @param {Number} g
+ * @param {Number} b
+ * @param {Number} a
+ *
+ * writes the next pixel into an indexed ImageData
+ */
+ function setPixel(imageInfo, r, g, b, a) {
+ var imageData = imageInfo.imageData;
+ var pixels = imageData.data;
+ var index = imageInfo.index++ * 4;
+ pixels[index++] = r;
+ pixels[index++] = g;
+ pixels[index++] = b;
+ pixels[index++] = a;
+ }
+ var SQRT3 = Math.sqrt(3);
+ /**
+ * @private
+ * @class FontInfo
+ * @param {Object} font an opentype.js font object
+ *
+ * contains cached images and glyph information for an opentype font
+ */
+ var FontInfo = /*#__PURE__*/ function () {
+ function FontInfo(font) {
+ _classCallCheck(this, FontInfo);
+ this.font = font;
+ // the bezier curve coordinates
+ this.strokeImageInfos = new ImageInfos(strokeImageWidth, strokeImageHeight);
+ // lists of curve indices for each row/column slice
+ this.colDimImageInfos = new ImageInfos(gridImageWidth, gridImageHeight);
+ this.rowDimImageInfos = new ImageInfos(gridImageWidth, gridImageHeight);
+ // the offset & length of each row/col slice in the glyph
+ this.colCellImageInfos = new ImageInfos(cellImageWidth, cellImageHeight);
+ this.rowCellImageInfos = new ImageInfos(cellImageWidth, cellImageHeight);
+ // the cached information for each glyph
+ this.glyphInfos = {
+ };
+ } /**
+ * @method getGlyphInfo
+ * @param {Glyph} glyph the x positions of points in the curve
+ * @returns {Object} the glyphInfo for that glyph
+ *
+ * calculates rendering info for a glyph, including the curve information,
+ * row & column stripes compiled into textures.
+ */
+
+ _createClass(FontInfo, [
+ {
+ key: 'getGlyphInfo',
+ value: function getGlyphInfo(glyph) {
+ // check the cache
+ var gi = this.glyphInfos[glyph.index];
+ if (gi) return gi;
+ // get the bounding box of the glyph from opentype.js
+ var bb = glyph.getBoundingBox();
+ var xMin = bb.x1;
+ var yMin = bb.y1;
+ var gWidth = bb.x2 - xMin;
+ var gHeight = bb.y2 - yMin;
+ var cmds = glyph.path.commands;
+ // don't bother rendering invisible glyphs
+ if (gWidth === 0 || gHeight === 0 || !cmds.length) {
+ return this.glyphInfos[glyph.index] = {
+ };
+ }
+ var i;
+ var strokes = [
+ ]; // the strokes in this glyph
+ var rows = [
+ ]; // the indices of strokes in each row
+ var cols = [
+ ]; // the indices of strokes in each column
+ for (i = charGridWidth - 1; i >= 0; --i) {
+ cols.push([]);
+ }
+ for (i = charGridHeight - 1; i >= 0; --i) {
+ rows.push([]);
+ } /**
+ * @function push
+ * @param {Number[]} xs the x positions of points in the curve
+ * @param {Number[]} ys the y positions of points in the curve
+ * @param {Object} v the curve information
+ *
+ * adds a curve to the rows & columns that it intersects with
+ */
+
+ function push(xs, ys, v) {
+ var index = strokes.length; // the index of this stroke
+ strokes.push(v); // add this stroke to the list
+ /**
+ * @function minMax
+ * @param {Number[]} rg the list of values to compare
+ * @param {Number} min the initial minimum value
+ * @param {Number} max the initial maximum value
+ *
+ * find the minimum & maximum value in a list of values
+ */
+ function minMax(rg, min, max) {
+ for (var _i = rg.length; _i-- > 0; ) {
+ var _v = rg[_i];
+ if (min > _v) min = _v;
+ if (max < _v) max = _v;
+ }
+ return {
+ min: min,
+ max: max
+ };
+ } // Expand the bounding box of the glyph by the number of cells below
+ // before rounding. Curves only partially through a cell won't be added
+ // to adjacent cells, but ones that are close will be. This helps fix
+ // small visual glitches that occur when curves are close to grid cell
+ // boundaries.
+
+ var cellOffset = 0.5;
+ // loop through the rows & columns that the curve intersects
+ // adding the curve to those slices
+ var mmX = minMax(xs, 1, 0);
+ var ixMin = Math.max(Math.floor(mmX.min * charGridWidth - cellOffset), 0);
+ var ixMax = Math.min(Math.ceil(mmX.max * charGridWidth + cellOffset), charGridWidth);
+ for (var iCol = ixMin; iCol < ixMax; ++iCol) {
+ cols[iCol].push(index);
+ }
+ var mmY = minMax(ys, 1, 0);
+ var iyMin = Math.max(Math.floor(mmY.min * charGridHeight - cellOffset), 0);
+ var iyMax = Math.min(Math.ceil(mmY.max * charGridHeight + cellOffset), charGridHeight);
+ for (var iRow = iyMin; iRow < iyMax; ++iRow) {
+ rows[iRow].push(index);
+ }
+ } /**
+ * @function clamp
+ * @param {Number} v the value to clamp
+ * @param {Number} min the minimum value
+ * @param {Number} max the maxmimum value
+ *
+ * clamps a value between a minimum & maximum value
+ */
+
+ function clamp(v, min, max) {
+ if (v < min) return min;
+ if (v > max) return max;
+ return v;
+ } /**
+ * @function byte
+ * @param {Number} v the value to scale
+ *
+ * converts a floating-point number in the range 0-1 to a byte 0-255
+ */
+
+ function byte(v) {
+ return clamp(255 * v, 0, 255);
+ } /**
+ * @private
+ * @class Cubic
+ * @param {Number} p0 the start point of the curve
+ * @param {Number} c0 the first control point
+ * @param {Number} c1 the second control point
+ * @param {Number} p1 the end point
+ *
+ * a cubic curve
+ */
+
+ var Cubic = /*#__PURE__*/ function () {
+ function Cubic(p0, c0, c1, p1) {
+ _classCallCheck(this, Cubic);
+ this.p0 = p0;
+ this.c0 = c0;
+ this.c1 = c1;
+ this.p1 = p1;
+ } /**
+ * @method toQuadratic
+ * @return {Object} the quadratic approximation
+ *
+ * converts the cubic to a quadtratic approximation by
+ * picking an appropriate quadratic control point
+ */
+
+ _createClass(Cubic, [
+ {
+ key: 'toQuadratic',
+ value: function toQuadratic() {
+ return {
+ x: this.p0.x,
+ y: this.p0.y,
+ x1: this.p1.x,
+ y1: this.p1.y,
+ cx: ((this.c0.x + this.c1.x) * 3 - (this.p0.x + this.p1.x)) / 4,
+ cy: ((this.c0.y + this.c1.y) * 3 - (this.p0.y + this.p1.y)) / 4
+ };
+ } /**
+ * @method quadError
+ * @return {Number} the error
+ *
+ * calculates the magnitude of error of this curve's
+ * quadratic approximation.
+ */
+
+ },
+ {
+ key: 'quadError',
+ value: function quadError() {
+ return _main.default.Vector.sub(_main.default.Vector.sub(this.p1, this.p0), _main.default.Vector.mult(_main.default.Vector.sub(this.c1, this.c0), 3)).mag() / 2;
+ } /**
+ * @method split
+ * @param {Number} t the value (0-1) at which to split
+ * @return {Cubic} the second part of the curve
+ *
+ * splits the cubic into two parts at a point 't' along the curve.
+ * this cubic keeps its start point and its end point becomes the
+ * point at 't'. the 'end half is returned.
+ */
+
+ },
+ {
+ key: 'split',
+ value: function split(t) {
+ var m1 = _main.default.Vector.lerp(this.p0, this.c0, t);
+ var m2 = _main.default.Vector.lerp(this.c0, this.c1, t);
+ var mm1 = _main.default.Vector.lerp(m1, m2, t);
+ this.c1 = _main.default.Vector.lerp(this.c1, this.p1, t);
+ this.c0 = _main.default.Vector.lerp(m2, this.c1, t);
+ var pt = _main.default.Vector.lerp(mm1, this.c0, t);
+ var part1 = new Cubic(this.p0, m1, mm1, pt);
+ this.p0 = pt;
+ return part1;
+ } /**
+ * @method splitInflections
+ * @return {Cubic[]} the non-inflecting pieces of this cubic
+ *
+ * returns an array containing 0, 1 or 2 cubics split resulting
+ * from splitting this cubic at its inflection points.
+ * this cubic is (potentially) altered and returned in the list.
+ */
+
+ },
+ {
+ key: 'splitInflections',
+ value: function splitInflections() {
+ var a = _main.default.Vector.sub(this.c0, this.p0);
+ var b = _main.default.Vector.sub(_main.default.Vector.sub(this.c1, this.c0), a);
+ var c = _main.default.Vector.sub(_main.default.Vector.sub(_main.default.Vector.sub(this.p1, this.c1), a), _main.default.Vector.mult(b, 2));
+ var cubics = [
+ ];
+ // find the derivative coefficients
+ var A = b.x * c.y - b.y * c.x;
+ if (A !== 0) {
+ var B = a.x * c.y - a.y * c.x;
+ var C = a.x * b.y - a.y * b.x;
+ var disc = B * B - 4 * A * C;
+ if (disc >= 0) {
+ if (A < 0) {
+ A = - A;
+ B = - B;
+ C = - C;
+ }
+ var Q = Math.sqrt(disc);
+ var t0 = ( - B - Q) / (2 * A); // the first inflection point
+ var t1 = ( - B + Q) / (2 * A); // the second inflection point
+ // test if the first inflection point lies on the curve
+ if (t0 > 0 && t0 < 1) {
+ // split at the first inflection point
+ cubics.push(this.split(t0));
+ // scale t2 into the second part
+ t1 = 1 - (1 - t1) / (1 - t0);
+ } // test if the second inflection point lies on the curve
+
+ if (t1 > 0 && t1 < 1) {
+ // split at the second inflection point
+ cubics.push(this.split(t1));
+ }
+ }
+ }
+ cubics.push(this);
+ return cubics;
+ }
+ }
+ ]);
+ return Cubic;
+ }();
+ /**
+ * @function cubicToQuadratics
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} cx0
+ * @param {Number} cy0
+ * @param {Number} cx1
+ * @param {Number} cy1
+ * @param {Number} x1
+ * @param {Number} y1
+ * @returns {Cubic[]} an array of cubics whose quadratic approximations
+ * closely match the civen cubic.
+ *
+ * converts a cubic curve to a list of quadratics.
+ */
+ function cubicToQuadratics(x0, y0, cx0, cy0, cx1, cy1, x1, y1) {
+ // create the Cubic object and split it at its inflections
+ var cubics = new Cubic(new _main.default.Vector(x0, y0), new _main.default.Vector(cx0, cy0), new _main.default.Vector(cx1, cy1), new _main.default.Vector(x1, y1)).splitInflections();
+ var qs = [
+ ]; // the final list of quadratics
+ var precision = 30 / SQRT3;
+ // for each of the non-inflected pieces of the original cubic
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = cubics[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var cubic = _step.value;
+ // the cubic is iteratively split in 3 pieces:
+ // the first piece is accumulated in 'qs', the result.
+ // the last piece is accumulated in 'tail', temporarily.
+ // the middle piece is repeatedly split again, while necessary.
+ var tail = [
+ ];
+ var t3 = void 0;
+ for (; ; ) {
+ // calculate this cubic's precision
+ t3 = precision / cubic.quadError();
+ if (t3 >= 0.5 * 0.5 * 0.5) {
+ break; // not too bad, we're done
+ } // find a split point based on the error
+
+ var t = Math.pow(t3, 1 / 3);
+ // split the cubic in 3
+ var start = cubic.split(t);
+ var middle = cubic.split(1 - t / (1 - t));
+ qs.push(start); // the first part
+ tail.push(cubic); // the last part
+ cubic = middle; // iterate on the middle piece
+ }
+ if (t3 < 1) {
+ // a little excess error, split the middle in two
+ qs.push(cubic.split(0.5));
+ } // add the middle piece to the result
+
+ qs.push(cubic);
+ // finally add the tail, reversed, onto the result
+ Array.prototype.push.apply(qs, tail.reverse());
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ return qs;
+ } /**
+ * @function pushLine
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} x1
+ * @param {Number} y1
+ *
+ * add a straight line to the row/col grid of a glyph
+ */
+
+ function pushLine(x0, y0, x1, y1) {
+ var mx = (x0 + x1) / 2;
+ var my = (y0 + y1) / 2;
+ push([x0,
+ x1], [
+ y0,
+ y1
+ ], {
+ x: x0,
+ y: y0,
+ cx: mx,
+ cy: my
+ });
+ } /**
+ * @function samePoint
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} x1
+ * @param {Number} y1
+ * @return {Boolean} true if the two points are sufficiently close
+ *
+ * tests if two points are close enough to be considered the same
+ */
+
+ function samePoint(x0, y0, x1, y1) {
+ return Math.abs(x1 - x0) < 0.00001 && Math.abs(y1 - y0) < 0.00001;
+ }
+ var x0,
+ y0,
+ xs,
+ ys;
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = cmds[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var cmd = _step2.value;
+ // scale the coordinates to the range 0-1
+ var x1 = (cmd.x - xMin) / gWidth;
+ var y1 = (cmd.y - yMin) / gHeight;
+ // don't bother if this point is the same as the last
+ if (samePoint(x0, y0, x1, y1)) continue;
+ switch (cmd.type) {
+ case 'M':
+ {
+ // move
+ xs = x1;
+ ys = y1;
+ break;
+ }
+ case 'L':
+ {
+ // line
+ pushLine(x0, y0, x1, y1);
+ break;
+ }
+ case 'Q':
+ {
+ // quadratic
+ var cx = (cmd.x1 - xMin) / gWidth;
+ var cy = (cmd.y1 - yMin) / gHeight;
+ push([x0,
+ x1,
+ cx], [
+ y0,
+ y1,
+ cy
+ ], {
+ x: x0,
+ y: y0,
+ cx: cx,
+ cy: cy
+ });
+ break;
+ }
+ case 'Z':
+ {
+ // end
+ if (!samePoint(x0, y0, xs, ys)) {
+ // add an extra line closing the loop, if necessary
+ pushLine(x0, y0, xs, ys);
+ strokes.push({
+ x: xs,
+ y: ys
+ });
+ } else {
+ strokes.push({
+ x: x0,
+ y: y0
+ });
+ }
+ break;
+ }
+ case 'C':
+ {
+ // cubic
+ var cx1 = (cmd.x1 - xMin) / gWidth;
+ var cy1 = (cmd.y1 - yMin) / gHeight;
+ var cx2 = (cmd.x2 - xMin) / gWidth;
+ var cy2 = (cmd.y2 - yMin) / gHeight;
+ var qs = cubicToQuadratics(x0, y0, cx1, cy1, cx2, cy2, x1, y1);
+ for (var iq = 0; iq < qs.length; iq++) {
+ var q = qs[iq].toQuadratic();
+ push([q.x,
+ q.x1,
+ q.cx], [
+ q.y,
+ q.y1,
+ q.cy
+ ], q);
+ }
+ break;
+ }
+ default:
+ throw new Error('unknown command type: '.concat(cmd.type));
+ }
+ x0 = x1;
+ y0 = y1;
+ } // allocate space for the strokes
+
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ var strokeCount = strokes.length;
+ var strokeImageInfo = this.strokeImageInfos.findImage(strokeCount);
+ var strokeOffset = strokeImageInfo.index;
+ // fill the stroke image
+ for (var il = 0; il < strokeCount; ++il) {
+ var s = strokes[il];
+ setPixel(strokeImageInfo, byte(s.x), byte(s.y), byte(s.cx), byte(s.cy));
+ } /**
+ * @function layout
+ * @param {Number[][]} dim
+ * @param {ImageInfo[]} dimImageInfos
+ * @param {ImageInfo[]} cellImageInfos
+ * @return {Object}
+ *
+ * lays out the curves in a dimension (row or col) into two
+ * images, one for the indices of the curves themselves, and
+ * one containing the offset and length of those index spans.
+ */
+
+ function layout(dim, dimImageInfos, cellImageInfos) {
+ var dimLength = dim.length; // the number of slices in this dimension
+ var dimImageInfo = dimImageInfos.findImage(dimLength);
+ var dimOffset = dimImageInfo.index;
+ // calculate the total number of stroke indices in this dimension
+ var totalStrokes = 0;
+ for (var id = 0; id < dimLength; ++id) {
+ totalStrokes += dim[id].length;
+ } // allocate space for the stroke indices
+
+ var cellImageInfo = cellImageInfos.findImage(totalStrokes);
+ // for each slice in the glyph
+ for (var _i2 = 0; _i2 < dimLength; ++_i2) {
+ var strokeIndices = dim[_i2];
+ var _strokeCount = strokeIndices.length;
+ var cellLineIndex = cellImageInfo.index;
+ // write the offset and count into the glyph slice image
+ setPixel(dimImageInfo, cellLineIndex >> 7, cellLineIndex & 127, _strokeCount >> 7, _strokeCount & 127);
+ // for each stroke index in that slice
+ for (var iil = 0; iil < _strokeCount; ++iil) {
+ // write the stroke index into the slice's image
+ var strokeIndex = strokeIndices[iil] + strokeOffset;
+ setPixel(cellImageInfo, strokeIndex >> 7, strokeIndex & 127, 0, 0);
+ }
+ }
+ return {
+ cellImageInfo: cellImageInfo,
+ dimOffset: dimOffset,
+ dimImageInfo: dimImageInfo
+ };
+ } // initialize the info for this glyph
+
+ gi = this.glyphInfos[glyph.index] = {
+ glyph: glyph,
+ uGlyphRect: [
+ bb.x1,
+ - bb.y1,
+ bb.x2,
+ - bb.y2
+ ],
+ strokeImageInfo: strokeImageInfo,
+ strokes: strokes,
+ colInfo: layout(cols, this.colDimImageInfos, this.colCellImageInfos),
+ rowInfo: layout(rows, this.rowDimImageInfos, this.rowCellImageInfos)
+ };
+ gi.uGridOffset = [
+ gi.colInfo.dimOffset,
+ gi.rowInfo.dimOffset
+ ];
+ return gi;
+ }
+ }
+ ]);
+ return FontInfo;
+ }();
+ _main.default.RendererGL.prototype._renderText = function (p, line, x, y, maxY) {
+ if (!this._textFont || typeof this._textFont === 'string') {
+ console.log('WEBGL: you must load and set a font before drawing text. See `loadFont` and `textFont` for more details.');
+ return;
+ }
+ if (y >= maxY || !this._doFill) {
+ return; // don't render lines beyond our maxY position
+ }
+ if (!this._isOpenType()) {
+ console.log('WEBGL: only Opentype (.otf) and Truetype (.ttf) fonts are supported');
+ return p;
+ }
+ p.push(); // fix to #803
+ // remember this state, so it can be restored later
+ var doStroke = this._doStroke;
+ var drawMode = this.drawMode;
+ this._doStroke = false;
+ this.drawMode = constants.TEXTURE;
+ // get the cached FontInfo object
+ var font = this._textFont.font;
+ var fontInfo = this._textFont._fontInfo;
+ if (!fontInfo) {
+ fontInfo = this._textFont._fontInfo = new FontInfo(font);
+ } // calculate the alignment and move/scale the view accordingly
+
+ var pos = this._textFont._handleAlignment(this, line, x, y);
+ var fontSize = this._textSize;
+ var scale = fontSize / font.unitsPerEm;
+ this.translate(pos.x, pos.y, 0);
+ this.scale(scale, scale, 1);
+ // initialize the font shader
+ var gl = this.GL;
+ var initializeShader = !this._defaultFontShader;
+ var sh = this._getFontShader();
+ sh.init();
+ sh.bindShader(); // first time around, bind the shader fully
+ if (initializeShader) {
+ // these are constants, really. just initialize them one-time.
+ sh.setUniform('uGridImageSize', [
+ gridImageWidth,
+ gridImageHeight
+ ]);
+ sh.setUniform('uCellsImageSize', [
+ cellImageWidth,
+ cellImageHeight
+ ]);
+ sh.setUniform('uStrokeImageSize', [
+ strokeImageWidth,
+ strokeImageHeight
+ ]);
+ sh.setUniform('uGridSize', [
+ charGridWidth,
+ charGridHeight
+ ]);
+ }
+ this._applyColorBlend(this.curFillColor);
+ var g = this.retainedMode.geometry['glyph'];
+ if (!g) {
+ // create the geometry for rendering a quad
+ var geom = this._textGeom = new _main.default.Geometry(1, 1, function () {
+ for (var i = 0; i <= 1; i++) {
+ for (var j = 0; j <= 1; j++) {
+ this.vertices.push(new _main.default.Vector(j, i, 0));
+ this.uvs.push(j, i);
+ }
+ }
+ });
+ geom.computeFaces().computeNormals();
+ g = this.createBuffers('glyph', geom);
+ } // bind the shader buffers
+
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = this.retainedMode.buffers.text[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var buff = _step3.value;
+ buff._prepareBuffer(g, sh);
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ this._bindBuffer(g.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
+ // this will have to do for now...
+ sh.setUniform('uMaterialColor', this.curFillColor);
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+ try {
+ var dx = 0; // the x position in the line
+ var glyphPrev = null; // the previous glyph, used for kerning
+ // fetch the glyphs in the line of text
+ var glyphs = font.stringToGlyphs(line);
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ for (var _iterator4 = glyphs[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ var glyph = _step4.value;
+ // kern
+ if (glyphPrev) dx += font.getKerningValue(glyphPrev, glyph);
+ var gi = fontInfo.getGlyphInfo(glyph);
+ if (gi.uGlyphRect) {
+ var rowInfo = gi.rowInfo;
+ var colInfo = gi.colInfo;
+ sh.setUniform('uSamplerStrokes', gi.strokeImageInfo.imageData);
+ sh.setUniform('uSamplerRowStrokes', rowInfo.cellImageInfo.imageData);
+ sh.setUniform('uSamplerRows', rowInfo.dimImageInfo.imageData);
+ sh.setUniform('uSamplerColStrokes', colInfo.cellImageInfo.imageData);
+ sh.setUniform('uSamplerCols', colInfo.dimImageInfo.imageData);
+ sh.setUniform('uGridOffset', gi.uGridOffset);
+ sh.setUniform('uGlyphRect', gi.uGlyphRect);
+ sh.setUniform('uGlyphOffset', dx);
+ sh.bindTextures(); // afterwards, only textures need updating
+ // draw it
+ gl.drawElements(gl.TRIANGLES, 6, this.GL.UNSIGNED_SHORT, 0);
+ }
+ dx += glyph.advanceWidth;
+ glyphPrev = glyph;
+ }
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ } finally {
+ // clean up
+ sh.unbindShader();
+ this._doStroke = doStroke;
+ this.drawMode = drawMode;
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+ p.pop();
+ }
+ return p;
+ };
+ },
+ {
+ '../core/constants': 291,
+ '../core/main': 303,
+ './p5.RendererGL.Retained': 359,
+ './p5.Shader': 361,
+ 'core-js/modules/es.array.iterator': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 201,
+ 'core-js/modules/es.object.to-string': 205,
+ 'core-js/modules/es.regexp.exec': 210,
+ 'core-js/modules/es.string.iterator': 215,
+ 'core-js/modules/es.string.split': 221,
+ 'core-js/modules/es.string.sub': 223,
+ 'core-js/modules/es.symbol': 227,
+ 'core-js/modules/es.symbol.description': 225,
+ 'core-js/modules/es.symbol.iterator': 226,
+ 'core-js/modules/es.weak-map': 259,
+ 'core-js/modules/web.dom-collections.iterator': 261
+ }
+ ],
+ 364: [
+ function (_dereq_, module, exports) {
+ module.exports = {
+ 'fes': {
+ 'autoplay': 'The media that tried to play (with \'{{src}}\') wasn\'t allowed to by this browser, most likely due to the browser\'s autoplay policy.\n\n+ More info: {{url}}',
+ 'checkUserDefinedFns': 'It seems that you may have accidentally written {{name}} instead of {{actualName}}. Please correct it if it\'s not intentional.',
+ 'fileLoadError': {
+ 'bytes': 'It looks like there was a problem loading your file. {{suggestion}}',
+ 'font': 'It looks like there was a problem loading your font. {{suggestion}}',
+ 'gif': 'There was some trouble loading your GIF. Make sure that your GIF is using 87a or 89a encoding.',
+ 'image': 'It looks like there was a problem loading your image. {{suggestion}}',
+ 'json': 'It looks like there was a problem loading your JSON file. {{suggestion}}',
+ 'large': 'If your large file isn\'t fetched successfully, we recommend splitting the file into smaller segments and fetching those.',
+ 'strings': 'It looks like there was a problem loading your text file. {{suggestion}}',
+ 'suggestion': 'Try checking if the file path ({{filePath}}) is correct, hosting the file online, or running a local server.\n\n+ More info: {{url}}',
+ 'table': 'It looks like there was a problem loading your table file. {{suggestion}}',
+ 'xml': 'It looks like there was a problem loading your XML file. {{suggestion}}'
+ },
+ 'friendlyParamError': {
+ 'type_EMPTY_VAR': '{{location}} {{func}}() was expecting {{formatType}} for the {{position}} parameter, received an empty variable instead. If not intentional, this is often a problem with scope.\n\n+ More info: {{url}}',
+ 'type_TOO_FEW_ARGUMENTS': '{{location}} {{func}}() was expecting at least {{minParams}} arguments, but received only {{argCount}}.',
+ 'type_TOO_MANY_ARGUMENTS': '{{location}} {{func}}() was expecting no more than {{maxParams}} arguments, but received {{argCount}}.',
+ 'type_WRONG_TYPE': '{{location}} {{func}}() was expecting {{formatType}} for the {{position}} parameter, received {{argType}} instead.'
+ },
+ 'globalErrors': {
+ 'reference': {
+ 'cannotAccess': '\n{{location}} "{{symbol}}" is used before declaration. Make sure you have declared the variable before using it.\n\n+ More info: {{url}}',
+ 'notDefined': '\n{{location}} "{{symbol}}" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).\n\n+ More info: {{url}}'
+ },
+ 'stackSubseq': '└[{{location}}] \n\t Called from line {{line}} in {{func}}()\n',
+ 'stackTop': '┌[{{location}}] \n\t Error at line {{line}} in {{func}}()\n',
+ 'syntax': {
+ 'badReturnOrYield': '\nSyntax Error - return lies outside of a function. Make sure you’re not missing any brackets, so that return lies inside a function.\n\n+ More info: {{url}}',
+ 'invalidToken': '\nSyntax Error - Found a symbol that JavaScript doesn\'t recognize or didn\'t expect at it\'s place.\n\n+ More info: {{url}}',
+ 'missingInitializer': '\nSyntax Error - A const variable is declared but not initialized. In JavaScript, an initializer for a const is required. A value must be specified in the same statement in which the variable is declared. Check the line number in the error and assign the const variable a value.\n\n+ More info: {{url}}',
+ 'redeclaredVariable': '\nSyntax Error - "{{symbol}}" is being redeclared. JavaScript doesn\'t allow declaring a variable more than once. Check the line number in error for redeclaration of the variable.\n\n+ More info: {{url}}',
+ 'unexpectedToken': '\nSyntax Error - Symbol present at a place that wasn\'t expected.\nUsually this is due to a typo. Check the line number in the error for anything missing/extra.\n\n+ More info: {{url}}'
+ },
+ 'type': {
+ 'constAssign': '\n{{location}} A const variable is being re-assigned. In javascript, re-assigning a value to a constant is not allowed. If you want to re-assign new values to a variable, make sure it is declared as var or let.\n\n+ More info: {{url}}',
+ 'notfunc': '\n{{location}} "{{symbol}}" could not be called as a function.\nCheck the spelling, letter-casing (JavaScript is case-sensitive) and its type.\n\n+ More info: {{url}}',
+ 'notfuncObj': '\n{{location}} "{{symbol}}" could not be called as a function.\nVerify whether "{{obj}}" has "{{symbol}}" in it and check the spelling, letter-casing (JavaScript is case-sensitive) and its type.\n\n+ More info: {{url}}',
+ 'readFromNull': '\n{{location}} The property of null can\'t be read. In javascript the value null indicates that an object has no value.\n\n+ More info: {{url}}',
+ 'readFromUndefined': '\n{{location}} Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.\n\n + More info: {{url}}'
+ }
+ },
+ 'libraryError': '{{location}} An error with message "{{error}}" occurred inside the p5js library when {{func}} was called. If not stated otherwise, it might be an issue with the arguments passed to {{func}}.',
+ 'location': '[{{file}}, line {{line}}]',
+ 'misspelling': '{{location}} It seems that you may have accidentally written "{{name}}" instead of "{{actualName}}". Please correct it to {{actualName}} if you wish to use the {{type}} from p5.js.',
+ 'misspelling_plural': '{{location}} It seems that you may have accidentally written "{{name}}".\nYou may have meant one of the following: \n{{suggestions}}',
+ 'misusedTopLevel': 'Did you just try to use p5.js\'s {{symbolName}} {{symbolType}}? If so, you may want to move it into your sketch\'s setup() function.\n\n+ More info: {{url}}',
+ 'positions': {
+ 'p_1': 'first',
+ 'p_10': 'tenth',
+ 'p_11': 'eleventh',
+ 'p_12': 'twelfth',
+ 'p_2': 'second',
+ 'p_3': 'third',
+ 'p_4': 'fourth',
+ 'p_5': 'fifth',
+ 'p_6': 'sixth',
+ 'p_7': 'seventh',
+ 'p_8': 'eighth',
+ 'p_9': 'ninth'
+ },
+ 'pre': '\n🌸 p5.js says: {{message}}',
+ 'sketchReaderErrors': {
+ 'reservedConst': 'you have used a p5.js reserved variable "{{symbol}}" make sure you change the variable name to something else.\n\n+ More info: {{url}}',
+ 'reservedFunc': 'you have used a p5.js reserved function "{{symbol}}" make sure you change the function name to something else.\n\n+ More info: {{url}}'
+ },
+ 'welcome': 'Welcome! This is your friendly debugger. To turn me off, switch to using p5.min.js.',
+ 'wrongPreload': '{{location}} An error with message "{{error}}" occurred inside the p5js library when "{{func}}" was called. If not stated otherwise, it might be due to "{{func}}" being called from preload. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function.'
+ }
+ }
+ },
+ {
+ }
+ ],
+ 365: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.languages = exports.default = void 0;
+ var _translation = _interopRequireDefault(_dereq_('./en/translation'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } // Only one language is imported above. This is intentional as other languages
+ // will be hosted online and then downloaded whenever needed
+ /**
+ * Here, we define a default/fallback language which we can use without internet.
+ * You won't have to change this when adding a new language.
+ *
+ * `translation` is the namespace we are using for our initial set of strings
+ */
+
+ var _default = {
+ en: {
+ translation: _translation.default
+ }
+ };
+ /**
+ * This is a list of languages that we have added so far.
+ * If you have just added a new language (yay!), add its key to the list below
+ * (`en` is english, `es` es español). Also add its export to
+ * dev.js, which is another file in this folder.
+ */
+ exports.default = _default;
+ var languages = [
+ 'en',
+ 'es',
+ 'ko',
+ 'zh',
+ 'hi',
+ 'ja'
+ ];
+ exports.languages = languages;
+ },
+ {
+ './en/translation': 364
+ }
+ ]
+ }, {
+ }, [
+ 286
+ ]) (286)
+});
diff --git a/estudiantes/01-SofiaAbarca/clase-14/p5.sound.min.js b/estudiantes/01-SofiaAbarca/clase-14/p5.sound.min.js
new file mode 100644
index 00000000..44f25231
--- /dev/null
+++ b/estudiantes/01-SofiaAbarca/clase-14/p5.sound.min.js
@@ -0,0 +1,3 @@
+/** [p5.sound] Version: 1.0.1 - 2021-05-25 */
+ !function(n){var i={};function r(t){if(i[t])return i[t].exports;var e=i[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}r.m=n,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=40)}([function(t,e,n){var i;void 0===(i=function(){"use strict";function l(t,e){this.isUndef(t)||1===t?this.input=this.context.createGain():1t)this.cancelScheduledValues(t),this.linearRampToValueAtTime(e,t);else{var i=this._searchAfter(t);i&&(this.cancelScheduledValues(t),i.type===u.TimelineSignal.Type.Linear?this.linearRampToValueAtTime(e,t):i.type===u.TimelineSignal.Type.Exponential&&this.exponentialRampToValueAtTime(e,t)),this.setValueAtTime(e,t)}return this},u.TimelineSignal.prototype.linearRampToValueBetween=function(t,e,n){return this.setRampPoint(e),this.linearRampToValueAtTime(t,n),this},u.TimelineSignal.prototype.exponentialRampToValueBetween=function(t,e,n){return this.setRampPoint(e),this.exponentialRampToValueAtTime(t,n),this},u.TimelineSignal.prototype._searchBefore=function(t){return this._events.get(t)},u.TimelineSignal.prototype._searchAfter=function(t){return this._events.getAfter(t)},u.TimelineSignal.prototype.getValueAtTime=function(t){t=this.toSeconds(t);var e=this._searchAfter(t),n=this._searchBefore(t),i=this._initial;if(null===n)i=this._initial;else if(n.type===u.TimelineSignal.Type.Target){var r,o=this._events.getBefore(n.time);r=null===o?this._initial:o.value,i=this._exponentialApproach(n.time,r,n.value,n.constant,t)}else i=n.type===u.TimelineSignal.Type.Curve?this._curveInterpolate(n.time,n.value,n.duration,t):null===e?n.value:e.type===u.TimelineSignal.Type.Linear?this._linearInterpolate(n.time,n.value,e.time,e.value,t):e.type===u.TimelineSignal.Type.Exponential?this._exponentialInterpolate(n.time,n.value,e.time,e.value,t):n.value;return i},u.TimelineSignal.prototype.connect=u.SignalBase.prototype.connect,u.TimelineSignal.prototype._exponentialApproach=function(t,e,n,i,r){return n+(e-n)*Math.exp(-(r-t)/i)},u.TimelineSignal.prototype._linearInterpolate=function(t,e,n,i,r){return e+(r-t)/(n-t)*(i-e)},u.TimelineSignal.prototype._exponentialInterpolate=function(t,e,n,i,r){return(e=Math.max(this._minOutput,e))*Math.pow(i/e,(r-t)/(n-t))},u.TimelineSignal.prototype._curveInterpolate=function(t,e,n,i){var r=e.length;if(t+n<=i)return e[r-1];if(i<=t)return e[0];var o=(i-t)/n,s=Math.floor((r-1)*o),a=Math.ceil((r-1)*o),u=e[s],c=e[a];return a===s?u:this._linearInterpolate(s,u,a,c,o*(r-1))},u.TimelineSignal.prototype.dispose=function(){u.Signal.prototype.dispose.call(this),u.Param.prototype.dispose.call(this),this._events.dispose(),this._events=null},u.TimelineSignal}.apply(e,i))||(t.exports=r)},function(t,e,n){var i,r;i=[n(0),n(4),n(1),n(2)],void 0===(r=function(n){"use strict";return n.Scale=function(t,e){this._outputMin=this.defaultArg(t,0),this._outputMax=this.defaultArg(e,1),this._scale=this.input=new n.Multiply(1),this._add=this.output=new n.Add(0),this._scale.connect(this._add),this._setRange()},n.extend(n.Scale,n.SignalBase),Object.defineProperty(n.Scale.prototype,"min",{get:function(){return this._outputMin},set:function(t){this._outputMin=t,this._setRange()}}),Object.defineProperty(n.Scale.prototype,"max",{get:function(){return this._outputMax},set:function(t){this._outputMax=t,this._setRange()}}),n.Scale.prototype._setRange=function(){this._add.value=this._outputMin,this._scale.value=this._outputMax-this._outputMin},n.Scale.prototype.dispose=function(){return n.prototype.dispose.call(this),this._add.dispose(),this._add=null,this._scale.dispose(),this._scale=null,this},n.Scale}.apply(e,i))||(t.exports=r)},function(t,e,n){var i,r;i=[n(0),n(16),n(30),n(31),n(12)],void 0===(r=function(e){return e.Type={Default:"number",Time:"time",Frequency:"frequency",TransportTime:"transportTime",Ticks:"ticks",NormalRange:"normalRange",AudioRange:"audioRange",Decibels:"db",Interval:"interval",BPM:"bpm",Positive:"positive",Cents:"cents",Degrees:"degrees",MIDI:"midi",BarsBeatsSixteenths:"barsBeatsSixteenths",Samples:"samples",Hertz:"hertz",Note:"note",Milliseconds:"milliseconds",Seconds:"seconds",Notation:"notation"},e.prototype.toSeconds=function(t){return this.isNumber(t)?t:this.isUndef(t)?this.now():this.isString(t)?new e.Time(t).toSeconds():t instanceof e.TimeBase?t.toSeconds():void 0},e.prototype.toFrequency=function(t){return this.isNumber(t)?t:this.isString(t)||this.isUndef(t)?new e.Frequency(t).valueOf():t instanceof e.TimeBase?t.toFrequency():void 0},e.prototype.toTicks=function(t){return this.isNumber(t)||this.isString(t)?new e.TransportTime(t).toTicks():this.isUndef(t)?e.Transport.ticks:t instanceof e.TimeBase?t.toTicks():void 0},e}.apply(e,i))||(t.exports=r)},function(t,e,n){var i,r;i=[n(0),n(18),n(9)],void 0===(r=function(n){"use strict";return window.GainNode&&!AudioContext.prototype.createGain&&(AudioContext.prototype.createGain=AudioContext.prototype.createGainNode),n.Gain=function(){var t=this.optionsObject(arguments,["gain","units"],n.Gain.defaults);this.input=this.output=this._gainNode=this.context.createGain(),this.gain=new n.Param({param:this._gainNode.gain,units:t.units,value:t.gain,convert:t.convert}),this._readOnly("gain")},n.extend(n.Gain),n.Gain.defaults={gain:1,convert:!0},n.Gain.prototype.dispose=function(){n.Param.prototype.dispose.call(this),this._gainNode.disconnect(),this._gainNode=null,this._writable("gain"),this.gain.dispose(),this.gain=null},n.prototype.createInsOuts=function(t,e){1===t?this.input=new n.Gain:1this._nextTick&&this._state;){var e=this._state.getValueAtTime(this._nextTick);if(e!==this._lastState){this._lastState=e;var n=this._state.get(this._nextTick);e===r.State.Started?(this._nextTick=n.time,this.isUndef(n.offset)||(this.ticks=n.offset),this.emit("start",n.time,this.ticks)):e===r.State.Stopped?(this.ticks=0,this.emit("stop",n.time)):e===r.State.Paused&&this.emit("pause",n.time)}var i=this._nextTick;this.frequency&&(this._nextTick+=1/this.frequency.getValueAtTime(this._nextTick),e===r.State.Started&&(this.callback(i),this.ticks++))}},r.Clock.prototype.getStateAtTime=function(t){return t=this.toSeconds(t),this._state.getValueAtTime(t)},r.Clock.prototype.dispose=function(){r.Emitter.prototype.dispose.call(this),this.context.off("tick",this._boundLoop),this._writable("frequency"),this.frequency.dispose(),this.frequency=null,this._boundLoop=null,this._nextTick=1/0,this.callback=null,this._state.dispose(),this._state=null},r.Clock}.apply(e,i))||(t.exports=r)},function(t,e,n){var i,r;i=[n(0),n(14)],void 0===(r=function(i){function t(t,e,n){if(t.input)Array.isArray(t.input)?(i.prototype.isUndef(n)&&(n=0),this.connect(t.input[n])):this.connect(t.input,e,n);else try{t instanceof AudioNode?r.call(this,t,e,n):r.call(this,t,e)}catch(e){throw new Error("error connecting to node: "+t+"\n"+e)}}var r,o;return!window.hasOwnProperty("AudioContext")&&window.hasOwnProperty("webkitAudioContext")&&(window.AudioContext=window.webkitAudioContext),i.Context=function(t){for(var e in i.Emitter.call(this),t=t||new window.AudioContext,this._context=t,this._context)this._defineProperty(this._context,e);this._latencyHint="interactive",this._lookAhead=.1,this._updateInterval=this._lookAhead/3,this._computedUpdateInterval=0,this._worker=this._createWorker(),this._constants={}},i.extend(i.Context,i.Emitter),i.Emitter.mixin(i.Context),i.Context.prototype._defineProperty=function(e,n){this.isUndef(this[n])&&Object.defineProperty(this,n,{get:function(){return"function"==typeof e[n]?e[n].bind(e):e[n]},set:function(t){e[n]=t}})},i.Context.prototype.now=function(){return this._context.currentTime},i.Context.prototype._createWorker=function(){window.URL=window.URL||window.webkitURL;var t=new Blob(["var timeoutTime = "+(1e3*this._updateInterval).toFixed(1)+";self.onmessage = function(msg){\ttimeoutTime = parseInt(msg.data);};function tick(){\tsetTimeout(tick, timeoutTime);\tself.postMessage('tick');}tick();"]),e=URL.createObjectURL(t),n=new Worker(e);return n.addEventListener("message",function(){this.emit("tick")}.bind(this)),n.addEventListener("message",function(){var t=this.now();if(this.isNumber(this._lastUpdate)){var e=t-this._lastUpdate;this._computedUpdateInterval=Math.max(e,.97*this._computedUpdateInterval)}this._lastUpdate=t}.bind(this)),n},i.Context.prototype.getConstant=function(t){if(this._constants[t])return this._constants[t];for(var e=this._context.createBuffer(1,128,this._context.sampleRate),n=e.getChannelData(0),i=0;ithis.memory){var n=this.length-this.memory;this._timeline.splice(0,n)}return this},e.Timeline.prototype.remove=function(t){if(this._iterating)this._toRemove.push(t);else{var e=this._timeline.indexOf(t);-1!==e&&this._timeline.splice(e,1)}return this},e.Timeline.prototype.get=function(t){var e=this._search(t);return-1!==e?this._timeline[e]:null},e.Timeline.prototype.peek=function(){return this._timeline[0]},e.Timeline.prototype.shift=function(){return this._timeline.shift()},e.Timeline.prototype.getAfter=function(t){var e=this._search(t);return e+1=t&&(this._timeline=[]);return this},e.Timeline.prototype.cancelBefore=function(t){if(this._timeline.length){var e=this._search(t);0<=e&&(this._timeline=this._timeline.slice(e+1))}return this},e.Timeline.prototype._search=function(t){var e=0,n=this._timeline.length,i=n;if(0t)return r;o.time>t?i=r:o.time=t;)n--;return this._iterate(e,n+1),this},e.Timeline.prototype.forEachAtTime=function(e,n){var t=this._search(e);return-1!==t&&this._iterate(function(t){t.time===e&&n(t)},0,t),this},e.Timeline.prototype.dispose=function(){e.prototype.dispose.call(this),this._timeline=null,this._toRemove=null},e.Timeline}.apply(e,i))||(t.exports=r)},function(t,e,n){var i,r;i=[n(0),n(1),n(2)],void 0===(r=function(t){"use strict";return t.Negate=function(){this._multiply=this.input=this.output=new t.Multiply(-1)},t.extend(t.Negate,t.SignalBase),t.Negate.prototype.dispose=function(){return t.prototype.dispose.call(this),this._multiply.dispose(),this._multiply=null,this},t.Negate}.apply(e,i))||(t.exports=r)},function(t,e,n){var i,r;i=[n(0),n(2),n(1),n(6)],void 0===(r=function(t){"use strict";return t.GreaterThanZero=function(){this._thresh=this.output=new t.WaveShaper(function(t){return t<=0?0:1},127),this._scale=this.input=new t.Multiply(1e4),this._scale.connect(this._thresh)},t.extend(t.GreaterThanZero,t.SignalBase),t.GreaterThanZero.prototype.dispose=function(){return t.prototype.dispose.call(this),this._scale.dispose(),this._scale=null,this._thresh.dispose(),this._thresh=null,this},t.GreaterThanZero}.apply(e,i))||(t.exports=r)},function(t,e,n){var i,r,o;r=[],void 0===(o="function"==typeof(i=function(){var s=function(t,e){this._dragged=!1,this._element=t,this._bindedMove=this._moved.bind(this),this._bindedEnd=this._ended.bind(this,e),t.addEventListener("touchstart",this._bindedEnd),t.addEventListener("touchmove",this._bindedMove),t.addEventListener("touchend",this._bindedEnd),t.addEventListener("mouseup",this._bindedEnd)};function o(t){return"running"===t.state}return s.prototype._moved=function(t){this._dragged=!0},s.prototype._ended=function(t){this._dragged||function(t){var e=t.createBuffer(1,1,t.sampleRate),n=t.createBufferSource();n.buffer=e,n.connect(t.destination),n.start(0),t.resume&&t.resume()}(t),this._dragged=!1},s.prototype.dispose=function(){this._element.removeEventListener("touchstart",this._bindedEnd),this._element.removeEventListener("touchmove",this._bindedMove),this._element.removeEventListener("touchend",this._bindedEnd),this._element.removeEventListener("mouseup",this._bindedEnd),this._bindedMove=null,this._bindedEnd=null,this._element=null},function(e,t,n){var i=new Promise(function(t){!function(e,n){o(e)?n():function t(){o(e)?n():(requestAnimationFrame(t),e.resume&&e.resume())}()}(e,t)}),r=[];return function t(e,n,i){if(Array.isArray(e)||NodeList&&e instanceof NodeList)for(var r=0;r= this._length) {\n this._writeIndex = 0;\n } // For excessive frames, the buffer will be overwritten.\n\n\n this._framesAvailable += sourceLength;\n\n if (this._framesAvailable > this._length) {\n this._framesAvailable = this._length;\n }\n }\n /**\n * Pull data out of buffer and fill a given sequence of Float32Arrays.\n *\n * @param {array} arraySequence An array of Float32Arrays.\n */\n\n }, {\n key: "pull",\n value: function pull(arraySequence) {\n // The channel count of arraySequence and the length of each channel must\n // match with this buffer obejct.\n // If the FIFO is completely empty, do nothing.\n if (this._framesAvailable === 0) {\n return;\n }\n\n var destinationLength = arraySequence[0].length; // Transfer data from the internal buffer to the |arraySequence| storage.\n\n for (var i = 0; i < destinationLength; ++i) {\n var readIndex = (this._readIndex + i) % this._length;\n\n for (var channel = 0; channel < this._channelCount; ++channel) {\n arraySequence[channel][i] = this._channelData[channel][readIndex];\n }\n }\n\n this._readIndex += destinationLength;\n\n if (this._readIndex >= this._length) {\n this._readIndex = 0;\n }\n\n this._framesAvailable -= destinationLength;\n\n if (this._framesAvailable < 0) {\n this._framesAvailable = 0;\n }\n }\n }, {\n key: "framesAvailable",\n get: function get() {\n return this._framesAvailable;\n }\n }]);\n\n return RingBuffer;\n }()\n}["default"];\n\nvar RecorderProcessor =\n/*#__PURE__*/\nfunction (_AudioWorkletProcesso) {\n _inherits(RecorderProcessor, _AudioWorkletProcesso);\n\n function RecorderProcessor(options) {\n var _this;\n\n _classCallCheck(this, RecorderProcessor);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(RecorderProcessor).call(this));\n var processorOptions = options.processorOptions || {};\n _this.numOutputChannels = options.outputChannelCount || 2;\n _this.numInputChannels = processorOptions.numInputChannels || 2;\n _this.bufferSize = processorOptions.bufferSize || 1024;\n _this.recording = false;\n\n _this.clear();\n\n _this.port.onmessage = function (event) {\n var data = event.data;\n\n if (data.name === \'start\') {\n _this.record(data.duration);\n } else if (data.name === \'stop\') {\n _this.stop();\n }\n };\n\n return _this;\n }\n\n _createClass(RecorderProcessor, [{\n key: "process",\n value: function process(inputs) {\n if (!this.recording) {\n return true;\n } else if (this.sampleLimit && this.recordedSamples >= this.sampleLimit) {\n this.stop();\n return true;\n }\n\n var input = inputs[0];\n this.inputRingBuffer.push(input);\n\n if (this.inputRingBuffer.framesAvailable >= this.bufferSize) {\n this.inputRingBuffer.pull(this.inputRingBufferArraySequence);\n\n for (var channel = 0; channel < this.numOutputChannels; ++channel) {\n var inputChannelCopy = this.inputRingBufferArraySequence[channel].slice();\n\n if (channel === 0) {\n this.leftBuffers.push(inputChannelCopy);\n\n if (this.numInputChannels === 1) {\n this.rightBuffers.push(inputChannelCopy);\n }\n } else if (channel === 1 && this.numInputChannels > 1) {\n this.rightBuffers.push(inputChannelCopy);\n }\n }\n\n this.recordedSamples += this.bufferSize;\n }\n\n return true;\n }\n }, {\n key: "record",\n value: function record(duration) {\n if (duration) {\n this.sampleLimit = Math.round(duration * sampleRate);\n }\n\n this.recording = true;\n }\n }, {\n key: "stop",\n value: function stop() {\n this.recording = false;\n var buffers = this.getBuffers();\n var leftBuffer = buffers[0].buffer;\n var rightBuffer = buffers[1].buffer;\n this.port.postMessage({\n name: \'buffers\',\n leftBuffer: leftBuffer,\n rightBuffer: rightBuffer\n }, [leftBuffer, rightBuffer]);\n this.clear();\n }\n }, {\n key: "getBuffers",\n value: function getBuffers() {\n var buffers = [];\n buffers.push(this.mergeBuffers(this.leftBuffers));\n buffers.push(this.mergeBuffers(this.rightBuffers));\n return buffers;\n }\n }, {\n key: "mergeBuffers",\n value: function mergeBuffers(channelBuffer) {\n var result = new Float32Array(this.recordedSamples);\n var offset = 0;\n var lng = channelBuffer.length;\n\n for (var i = 0; i < lng; i++) {\n var buffer = channelBuffer[i];\n result.set(buffer, offset);\n offset += buffer.length;\n }\n\n return result;\n }\n }, {\n key: "clear",\n value: function clear() {\n var _this2 = this;\n\n this.leftBuffers = [];\n this.rightBuffers = [];\n this.inputRingBuffer = new RingBuffer(this.bufferSize, this.numInputChannels);\n this.inputRingBufferArraySequence = new Array(this.numInputChannels).fill(null).map(function () {\n return new Float32Array(_this2.bufferSize);\n });\n this.recordedSamples = 0;\n this.sampleLimit = null;\n }\n }]);\n\n return RecorderProcessor;\n}(_wrapNativeSuper(AudioWorkletProcessor));\n\nregisterProcessor(processorNames.recorderProcessor, RecorderProcessor);'},function(t,e,n){"use strict";n.r(e),e.default='function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }\n\nfunction isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _construct(Parent, args, Class) { if (isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }\n\nfunction _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n// import dependencies via preval.require so that they\'re available as values at compile time\nvar processorNames = {\n "recorderProcessor": "recorder-processor",\n "soundFileProcessor": "sound-file-processor",\n "amplitudeProcessor": "amplitude-processor"\n};\nvar RingBuffer = {\n "default":\n /*#__PURE__*/\n function () {\n /**\n * @constructor\n * @param {number} length Buffer length in frames.\n * @param {number} channelCount Buffer channel count.\n */\n function RingBuffer(length, channelCount) {\n _classCallCheck(this, RingBuffer);\n\n this._readIndex = 0;\n this._writeIndex = 0;\n this._framesAvailable = 0;\n this._channelCount = channelCount;\n this._length = length;\n this._channelData = [];\n\n for (var i = 0; i < this._channelCount; ++i) {\n this._channelData[i] = new Float32Array(length);\n }\n }\n /**\n * Getter for Available frames in buffer.\n *\n * @return {number} Available frames in buffer.\n */\n\n\n _createClass(RingBuffer, [{\n key: "push",\n\n /**\n * Push a sequence of Float32Arrays to buffer.\n *\n * @param {array} arraySequence A sequence of Float32Arrays.\n */\n value: function push(arraySequence) {\n // The channel count of arraySequence and the length of each channel must\n // match with this buffer obejct.\n // Transfer data from the |arraySequence| storage to the internal buffer.\n var sourceLength = arraySequence[0] ? arraySequence[0].length : 0;\n\n for (var i = 0; i < sourceLength; ++i) {\n var writeIndex = (this._writeIndex + i) % this._length;\n\n for (var channel = 0; channel < this._channelCount; ++channel) {\n this._channelData[channel][writeIndex] = arraySequence[channel][i];\n }\n }\n\n this._writeIndex += sourceLength;\n\n if (this._writeIndex >= this._length) {\n this._writeIndex = 0;\n } // For excessive frames, the buffer will be overwritten.\n\n\n this._framesAvailable += sourceLength;\n\n if (this._framesAvailable > this._length) {\n this._framesAvailable = this._length;\n }\n }\n /**\n * Pull data out of buffer and fill a given sequence of Float32Arrays.\n *\n * @param {array} arraySequence An array of Float32Arrays.\n */\n\n }, {\n key: "pull",\n value: function pull(arraySequence) {\n // The channel count of arraySequence and the length of each channel must\n // match with this buffer obejct.\n // If the FIFO is completely empty, do nothing.\n if (this._framesAvailable === 0) {\n return;\n }\n\n var destinationLength = arraySequence[0].length; // Transfer data from the internal buffer to the |arraySequence| storage.\n\n for (var i = 0; i < destinationLength; ++i) {\n var readIndex = (this._readIndex + i) % this._length;\n\n for (var channel = 0; channel < this._channelCount; ++channel) {\n arraySequence[channel][i] = this._channelData[channel][readIndex];\n }\n }\n\n this._readIndex += destinationLength;\n\n if (this._readIndex >= this._length) {\n this._readIndex = 0;\n }\n\n this._framesAvailable -= destinationLength;\n\n if (this._framesAvailable < 0) {\n this._framesAvailable = 0;\n }\n }\n }, {\n key: "framesAvailable",\n get: function get() {\n return this._framesAvailable;\n }\n }]);\n\n return RingBuffer;\n }()\n}["default"];\n\nvar SoundFileProcessor =\n/*#__PURE__*/\nfunction (_AudioWorkletProcesso) {\n _inherits(SoundFileProcessor, _AudioWorkletProcesso);\n\n function SoundFileProcessor(options) {\n var _this;\n\n _classCallCheck(this, SoundFileProcessor);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(SoundFileProcessor).call(this));\n var processorOptions = options.processorOptions || {};\n _this.bufferSize = processorOptions.bufferSize || 256;\n _this.inputRingBuffer = new RingBuffer(_this.bufferSize, 1);\n _this.inputRingBufferArraySequence = [new Float32Array(_this.bufferSize)];\n return _this;\n }\n\n _createClass(SoundFileProcessor, [{\n key: "process",\n value: function process(inputs) {\n var input = inputs[0]; // we only care about the first input channel, because that contains the position data\n\n this.inputRingBuffer.push([input[0]]);\n\n if (this.inputRingBuffer.framesAvailable >= this.bufferSize) {\n this.inputRingBuffer.pull(this.inputRingBufferArraySequence);\n var inputChannel = this.inputRingBufferArraySequence[0];\n var position = inputChannel[inputChannel.length - 1] || 0;\n this.port.postMessage({\n name: \'position\',\n position: position\n });\n }\n\n return true;\n }\n }]);\n\n return SoundFileProcessor;\n}(_wrapNativeSuper(AudioWorkletProcessor));\n\nregisterProcessor(processorNames.soundFileProcessor, SoundFileProcessor);'},function(t,e,n){"use strict";n.r(e),e.default='function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }\n\nfunction isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _construct(Parent, args, Class) { if (isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }\n\nfunction _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n// import dependencies via preval.require so that they\'re available as values at compile time\nvar processorNames = {\n "recorderProcessor": "recorder-processor",\n "soundFileProcessor": "sound-file-processor",\n "amplitudeProcessor": "amplitude-processor"\n};\nvar RingBuffer = {\n "default":\n /*#__PURE__*/\n function () {\n /**\n * @constructor\n * @param {number} length Buffer length in frames.\n * @param {number} channelCount Buffer channel count.\n */\n function RingBuffer(length, channelCount) {\n _classCallCheck(this, RingBuffer);\n\n this._readIndex = 0;\n this._writeIndex = 0;\n this._framesAvailable = 0;\n this._channelCount = channelCount;\n this._length = length;\n this._channelData = [];\n\n for (var i = 0; i < this._channelCount; ++i) {\n this._channelData[i] = new Float32Array(length);\n }\n }\n /**\n * Getter for Available frames in buffer.\n *\n * @return {number} Available frames in buffer.\n */\n\n\n _createClass(RingBuffer, [{\n key: "push",\n\n /**\n * Push a sequence of Float32Arrays to buffer.\n *\n * @param {array} arraySequence A sequence of Float32Arrays.\n */\n value: function push(arraySequence) {\n // The channel count of arraySequence and the length of each channel must\n // match with this buffer obejct.\n // Transfer data from the |arraySequence| storage to the internal buffer.\n var sourceLength = arraySequence[0] ? arraySequence[0].length : 0;\n\n for (var i = 0; i < sourceLength; ++i) {\n var writeIndex = (this._writeIndex + i) % this._length;\n\n for (var channel = 0; channel < this._channelCount; ++channel) {\n this._channelData[channel][writeIndex] = arraySequence[channel][i];\n }\n }\n\n this._writeIndex += sourceLength;\n\n if (this._writeIndex >= this._length) {\n this._writeIndex = 0;\n } // For excessive frames, the buffer will be overwritten.\n\n\n this._framesAvailable += sourceLength;\n\n if (this._framesAvailable > this._length) {\n this._framesAvailable = this._length;\n }\n }\n /**\n * Pull data out of buffer and fill a given sequence of Float32Arrays.\n *\n * @param {array} arraySequence An array of Float32Arrays.\n */\n\n }, {\n key: "pull",\n value: function pull(arraySequence) {\n // The channel count of arraySequence and the length of each channel must\n // match with this buffer obejct.\n // If the FIFO is completely empty, do nothing.\n if (this._framesAvailable === 0) {\n return;\n }\n\n var destinationLength = arraySequence[0].length; // Transfer data from the internal buffer to the |arraySequence| storage.\n\n for (var i = 0; i < destinationLength; ++i) {\n var readIndex = (this._readIndex + i) % this._length;\n\n for (var channel = 0; channel < this._channelCount; ++channel) {\n arraySequence[channel][i] = this._channelData[channel][readIndex];\n }\n }\n\n this._readIndex += destinationLength;\n\n if (this._readIndex >= this._length) {\n this._readIndex = 0;\n }\n\n this._framesAvailable -= destinationLength;\n\n if (this._framesAvailable < 0) {\n this._framesAvailable = 0;\n }\n }\n }, {\n key: "framesAvailable",\n get: function get() {\n return this._framesAvailable;\n }\n }]);\n\n return RingBuffer;\n }()\n}["default"];\n\nvar AmplitudeProcessor =\n/*#__PURE__*/\nfunction (_AudioWorkletProcesso) {\n _inherits(AmplitudeProcessor, _AudioWorkletProcesso);\n\n function AmplitudeProcessor(options) {\n var _this;\n\n _classCallCheck(this, AmplitudeProcessor);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(AmplitudeProcessor).call(this));\n var processorOptions = options.processorOptions || {};\n _this.numOutputChannels = options.outputChannelCount || 1;\n _this.numInputChannels = processorOptions.numInputChannels || 2;\n _this.normalize = processorOptions.normalize || false;\n _this.smoothing = processorOptions.smoothing || 0;\n _this.bufferSize = processorOptions.bufferSize || 2048;\n _this.inputRingBuffer = new RingBuffer(_this.bufferSize, _this.numInputChannels);\n _this.outputRingBuffer = new RingBuffer(_this.bufferSize, _this.numOutputChannels);\n _this.inputRingBufferArraySequence = new Array(_this.numInputChannels).fill(null).map(function () {\n return new Float32Array(_this.bufferSize);\n });\n _this.stereoVol = [0, 0];\n _this.stereoVolNorm = [0, 0];\n _this.volMax = 0.001;\n\n _this.port.onmessage = function (event) {\n var data = event.data;\n\n if (data.name === \'toggleNormalize\') {\n _this.normalize = data.normalize;\n } else if (data.name === \'smoothing\') {\n _this.smoothing = Math.max(0, Math.min(1, data.smoothing));\n }\n };\n\n return _this;\n } // TO DO make this stereo / dependent on # of audio channels\n\n\n _createClass(AmplitudeProcessor, [{\n key: "process",\n value: function process(inputs, outputs) {\n var input = inputs[0];\n var output = outputs[0];\n var smoothing = this.smoothing;\n this.inputRingBuffer.push(input);\n\n if (this.inputRingBuffer.framesAvailable >= this.bufferSize) {\n this.inputRingBuffer.pull(this.inputRingBufferArraySequence);\n\n for (var channel = 0; channel < this.numInputChannels; ++channel) {\n var inputBuffer = this.inputRingBufferArraySequence[channel];\n var bufLength = inputBuffer.length;\n var sum = 0;\n\n for (var i = 0; i < bufLength; i++) {\n var x = inputBuffer[i];\n\n if (this.normalize) {\n sum += Math.max(Math.min(x / this.volMax, 1), -1) * Math.max(Math.min(x / this.volMax, 1), -1);\n } else {\n sum += x * x;\n }\n } // ... then take the square root of the sum.\n\n\n var rms = Math.sqrt(sum / bufLength);\n this.stereoVol[channel] = Math.max(rms, this.stereoVol[channel] * smoothing);\n this.volMax = Math.max(this.stereoVol[channel], this.volMax);\n } // calculate stero normalized volume and add volume from all channels together\n\n\n var volSum = 0;\n\n for (var index = 0; index < this.stereoVol.length; index++) {\n this.stereoVolNorm[index] = Math.max(Math.min(this.stereoVol[index] / this.volMax, 1), 0);\n volSum += this.stereoVol[index];\n } // volume is average of channels\n\n\n var volume = volSum / this.stereoVol.length; // normalized value\n\n var volNorm = Math.max(Math.min(volume / this.volMax, 1), 0);\n this.port.postMessage({\n name: \'amplitude\',\n volume: volume,\n volNorm: volNorm,\n stereoVol: this.stereoVol,\n stereoVolNorm: this.stereoVolNorm\n }); // pass input through to output\n\n this.outputRingBuffer.push(this.inputRingBufferArraySequence);\n } // pull 128 frames out of the ring buffer\n // if the ring buffer does not have enough frames, the output will be silent\n\n\n this.outputRingBuffer.pull(output);\n return true;\n }\n }]);\n\n return AmplitudeProcessor;\n}(_wrapNativeSuper(AudioWorkletProcessor));\n\nregisterProcessor(processorNames.amplitudeProcessor, AmplitudeProcessor);'},function(t,e,n){var i,r;i=[n(0),n(17)],void 0===(r=function(r){r.Frequency=function(t,e){if(!(this instanceof r.Frequency))return new r.Frequency(t,e);r.TimeBase.call(this,t,e)},r.extend(r.Frequency,r.TimeBase),r.Frequency.prototype._primaryExpressions=Object.create(r.TimeBase.prototype._primaryExpressions),r.Frequency.prototype._primaryExpressions.midi={regexp:/^(\d+(?:\.\d+)?midi)/,method:function(t){return this.midiToFrequency(t)}},r.Frequency.prototype._primaryExpressions.note={regexp:/^([a-g]{1}(?:b|#|x|bb)?)(-?[0-9]+)/i,method:function(t,e){var n=i[t.toLowerCase()]+12*(parseInt(e)+1);return this.midiToFrequency(n)}},r.Frequency.prototype._primaryExpressions.tr={regexp:/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?):?(\d+(?:\.\d+)?)?/,method:function(t,e,n){var i=1;return t&&"0"!==t&&(i*=this._beatsToUnits(this._timeSignature()*parseFloat(t))),e&&"0"!==e&&(i*=this._beatsToUnits(parseFloat(e))),n&&"0"!==n&&(i*=this._beatsToUnits(parseFloat(n)/4)),i}},r.Frequency.prototype.transpose=function(t){return this._expr=function(t,e){return t()*this.intervalToFrequencyRatio(e)}.bind(this,this._expr,t),this},r.Frequency.prototype.harmonize=function(t){return this._expr=function(t,e){for(var n=t(),i=[],r=0;rthis.buffer.duration)throw"jump time out of range";if(e>this.buffer.duration-t)throw"end time out of range";var n=t||0,i=e||void 0;this.isPlaying()&&(this.stop(0),this.play(0,this.playbackRate,this.output.gain.value,n,i))}},{key:"channels",value:function(){return this.buffer.numberOfChannels}},{key:"sampleRate",value:function(){return this.buffer.sampleRate}},{key:"frames",value:function(){return this.buffer.length}},{key:"getPeaks",value:function(t){if(!this.buffer)throw"Cannot load peaks yet, buffer is not loaded";if(t=t||5*window.width,this.buffer){for(var e=this.buffer,n=e.length/t,i=~~(n/10)||1,r=e.numberOfChannels,o=new Float32Array(Math.round(t)),s=0;so[u])&&(o[u]=h)}return o}}},{key:"reverseBuffer",value:function(){if(!this.buffer)throw"SoundFile is not done loading";var t=this._lastPos/R.sampleRate,e=this.getVolume();this.setVolume(0,.001);for(var n=this.buffer.numberOfChannels,i=0;it[o].hi&&o++,r[o]=void 0!==r[o]?(r[o]+n[s])/2:n[s]}return r}},{key:"getOctaveBands",value:function(t,e){var n=t||3,i=e||15.625,r=[],o={lo:i/Math.pow(2,1/(2*n)),ctr:i,hi:i*Math.pow(2,1/(2*n))};r.push(o);for(var s=p.audiocontext.sampleRate/2;o.hi=this._maxDelay)throw new Error("Delay Time exceeds maximum delay time of "+this._maxDelay+" second.");t.connect(this.input),this.leftDelay.delayTime.setValueAtTime(o,this.ac.currentTime),this.rightDelay.delayTime.setValueAtTime(o,this.ac.currentTime),this._leftGain.gain.value=r,this._rightGain.gain.value=r,i&&(this._leftFilter.freq(i),this._rightFilter.freq(i))}},{key:"delayTime",value:function(t){"number"!=typeof t?(t.connect(this.leftDelay.delayTime),t.connect(this.rightDelay.delayTime)):(this.leftDelay.delayTime.cancelScheduledValues(this.ac.currentTime),this.rightDelay.delayTime.cancelScheduledValues(this.ac.currentTime),this.leftDelay.delayTime.linearRampToValueAtTime(t,this.ac.currentTime),this.rightDelay.delayTime.linearRampToValueAtTime(t,this.ac.currentTime))}},{key:"feedback",value:function(t){if(t&&"number"!=typeof t)t.connect(this._leftGain.gain),t.connect(this._rightGain.gain);else{if(1<=t)throw new Error("Feedback value will force a positive feedback loop.");"number"==typeof t&&(this._leftGain.gain.value=t,this._rightGain.gain.value=t)}return this._leftGain.gain.value}},{key:"filter",value:function(t,e){this._leftFilter.set(t,e),this._rightFilter.set(t,e)}},{key:"setType",value:function(t){switch(1===t&&(t="pingPong"),this._split.disconnect(),this._leftFilter.disconnect(),this._rightFilter.disconnect(),this._split.connect(this.leftDelay,0),this._split.connect(this.rightDelay,1),t){case"pingPong":this._rightFilter.setType(this._leftFilter.biquad.type),this._leftFilter.output.connect(this._merge,0,0),this._rightFilter.output.connect(this._merge,0,1),this._leftFilter.output.connect(this.rightDelay),this._rightFilter.output.connect(this.leftDelay);break;default:this._leftFilter.output.connect(this._merge,0,0),this._rightFilter.output.connect(this._merge,0,1),this._leftFilter.output.connect(this.leftDelay),this._rightFilter.output.connect(this.rightDelay)}}},{key:"dispose",value:function(){de(ye(e.prototype),"dispose",this).call(this),this._split.disconnect(),this._leftFilter.dispose(),this._rightFilter.dispose(),this._merge.disconnect(),this._leftGain.disconnect(),this._rightGain.disconnect(),this.leftDelay.disconnect(),this.rightDelay.disconnect(),this._split=void 0,this._leftFilter=void 0,this._rightFilter=void 0,this._merge=void 0,this._leftGain=void 0,this._rightGain=void 0,this.leftDelay=void 0,this.rightDelay=void 0}}]),e}();function _e(t){return(_e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function ge(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function be(t,e){for(var n=0;nthis.length&&(this.length=i.sequence.length)}},{key:"removePhrase",value:function(t){for(var e in this.phrases)this.phrases[e].name===t&&this.phrases.splice(e,1)}},{key:"getPhrase",value:function(t){for(var e in this.phrases)if(this.phrases[e].name===t)return this.phrases[e]}},{key:"replaceSequence",value:function(t,e){for(var n in this.phrases)this.phrases[n].name===t&&(this.phrases[n].sequence=e)}},{key:"incrementStep",value:function(t){this.partStep=t.parts.length?(t.scoreStep=0,t.onended()):(t.scoreStep=0,t.parts[t.currentPart-1].stop(),t.parts[t.currentPart].start())}function Ue(t,e){for(var n=0;nthis.cutoff&&e>this.threshold&&0this.treshold){this.isDetected=!0,this.callback?this.callback(this.energy):e&&e(this.energy);var n=this;setTimeout(function(){n.isDetected=!1},this.sensitivity)}this.penergy=this.energy}}]),r}();function xn(t,e){for(var n=0;n p5.js says: copy() was expecting Integer for parameter #1 (zero-based index), received number instead at blob:https://preview.p5js.org/77c42ecf-36ea-4529-b563-32e626c539d7:92:5. [http://p5js.org/reference/#p5/copy]
```
-Aún no lo puedo solucionar
+Aún no lo puedo solucionar.
+
+Al llegar a la U el código dejó de funcionar. Así que hablé con el profe y volví a la referencia de copy(). Nos dimos cuenta que faltaba el parámetro de source image, es decir, la imagen fuente que era copiada y dibujada de nuevo. Le puse de fuente la imagen "faad" y se solucionó el problema. :)
+``` javascript
+ copy(faad, mouseX, mouseY, 1, randHeight, mouseX, mouseY, randWidth, randHeight);
+```
+
+
Sketch del examen final: https://editor.p5js.org/SofiaAbarca/sketches/zn0A3Amwa
diff --git a/estudiantes/01-SofiaAbarca/clase-15/faad.jpg b/estudiantes/01-SofiaAbarca/clase-15/faad.jpg
new file mode 100644
index 00000000..75189587
Binary files /dev/null and b/estudiantes/01-SofiaAbarca/clase-15/faad.jpg differ
diff --git a/estudiantes/01-SofiaAbarca/clase-15/grafico.jpg b/estudiantes/01-SofiaAbarca/clase-15/grafico.jpg
new file mode 100644
index 00000000..a490632d
Binary files /dev/null and b/estudiantes/01-SofiaAbarca/clase-15/grafico.jpg differ
diff --git a/estudiantes/01-SofiaAbarca/clase-15/index.html b/estudiantes/01-SofiaAbarca/clase-15/index.html
new file mode 100644
index 00000000..b9d16ffa
--- /dev/null
+++ b/estudiantes/01-SofiaAbarca/clase-15/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/estudiantes/01-SofiaAbarca/clase-15/industrial.jpg b/estudiantes/01-SofiaAbarca/clase-15/industrial.jpg
new file mode 100644
index 00000000..1c076e3e
Binary files /dev/null and b/estudiantes/01-SofiaAbarca/clase-15/industrial.jpg differ
diff --git a/estudiantes/01-SofiaAbarca/clase-15/moda.jpg b/estudiantes/01-SofiaAbarca/clase-15/moda.jpg
new file mode 100644
index 00000000..5122ba3b
Binary files /dev/null and b/estudiantes/01-SofiaAbarca/clase-15/moda.jpg differ
diff --git a/estudiantes/01-SofiaAbarca/clase-15/p5.js b/estudiantes/01-SofiaAbarca/clase-15/p5.js
new file mode 100644
index 00000000..7b99589f
--- /dev/null
+++ b/estudiantes/01-SofiaAbarca/clase-15/p5.js
@@ -0,0 +1,100567 @@
+/*! p5.js v0.10.2 October 14, 2019 */
+(function(f) {
+ if (typeof exports === 'object' && typeof module !== 'undefined') {
+ module.exports = f();
+ } else if (typeof define === 'function' && define.amd) {
+ define([], f);
+ } else {
+ var g;
+ if (typeof window !== 'undefined') {
+ g = window;
+ } else if (typeof global !== 'undefined') {
+ g = global;
+ } else if (typeof self !== 'undefined') {
+ g = self;
+ } else {
+ g = this;
+ }
+ g.p5 = f();
+ }
+})(function() {
+ var define, module, exports;
+ return (function() {
+ function r(e, n, t) {
+ function o(i, f) {
+ if (!n[i]) {
+ if (!e[i]) {
+ var c = 'function' == typeof require && require;
+ if (!f && c) return c(i, !0);
+ if (u) return u(i, !0);
+ var a = new Error("Cannot find module '" + i + "'");
+ throw ((a.code = 'MODULE_NOT_FOUND'), a);
+ }
+ var p = (n[i] = { exports: {} });
+ e[i][0].call(
+ p.exports,
+ function(r) {
+ var n = e[i][1][r];
+ return o(n || r);
+ },
+ p,
+ p.exports,
+ r,
+ e,
+ n,
+ t
+ );
+ }
+ return n[i].exports;
+ }
+ for (var u = 'function' == typeof require && require, i = 0; i < t.length; i++)
+ o(t[i]);
+ return o;
+ }
+ return r;
+ })()(
+ {
+ 1: [
+ function(_dereq_, module, exports) {
+ module.exports = {
+ project: {
+ name: 'p5',
+ description:
+ '[](https://travis-ci.org/processing/p5.js) [](https://www.npmjs.com/package/p5)',
+ version: '0.10.2',
+ url: 'https://github.com/processing/p5.js#readme'
+ },
+ files: {
+ 'src/color/color_conversion.js': {
+ name: 'src/color/color_conversion.js',
+ modules: {
+ 'Color Conversion': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/color/creating_reading.js': {
+ name: 'src/color/creating_reading.js',
+ modules: {
+ 'Creating & Reading': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/color/p5.Color.js': {
+ name: 'src/color/p5.Color.js',
+ modules: {},
+ classes: {
+ 'p5.Color': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/color/setting.js': {
+ name: 'src/color/setting.js',
+ modules: {
+ Setting: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/shape/2d_primitives.js': {
+ name: 'src/core/shape/2d_primitives.js',
+ modules: {
+ '2D Primitives': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/shape/attributes.js': {
+ name: 'src/core/shape/attributes.js',
+ modules: {
+ Attributes: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/shape/curves.js': {
+ name: 'src/core/shape/curves.js',
+ modules: {
+ Curves: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/shape/vertex.js': {
+ name: 'src/core/shape/vertex.js',
+ modules: {
+ Vertex: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/constants.js': {
+ name: 'src/core/constants.js',
+ modules: {
+ Constants: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/environment.js': {
+ name: 'src/core/environment.js',
+ modules: {
+ Environment: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/error_helpers.js': {
+ name: 'src/core/error_helpers.js',
+ modules: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/helpers.js': {
+ name: 'src/core/helpers.js',
+ modules: {},
+ classes: {},
+ fors: {},
+ namespaces: {}
+ },
+ 'src/core/init.js': {
+ name: 'src/core/init.js',
+ modules: {},
+ classes: {},
+ fors: {},
+ namespaces: {}
+ },
+ 'src/core/legacy.js': {
+ name: 'src/core/legacy.js',
+ modules: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/main.js': {
+ name: 'src/core/main.js',
+ modules: {
+ Structure: 1
+ },
+ classes: {
+ p5: 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/p5.Element.js': {
+ name: 'src/core/p5.Element.js',
+ modules: {
+ DOM: 1
+ },
+ classes: {
+ 'p5.Element': 1
+ },
+ fors: {
+ 'p5.Element': 1
+ },
+ namespaces: {}
+ },
+ 'src/core/p5.Graphics.js': {
+ name: 'src/core/p5.Graphics.js',
+ modules: {
+ Rendering: 1
+ },
+ classes: {
+ 'p5.Graphics': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/p5.Renderer.js': {
+ name: 'src/core/p5.Renderer.js',
+ modules: {},
+ classes: {
+ 'p5.Renderer': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/p5.Renderer2D.js': {
+ name: 'src/core/p5.Renderer2D.js',
+ modules: {},
+ classes: {},
+ fors: {},
+ namespaces: {}
+ },
+ 'src/core/reference.js': {
+ name: 'src/core/reference.js',
+ modules: {
+ Declaration: 1,
+ 'Comparison Operators': 1,
+ 'Control Statement': 1,
+ Function: 1,
+ Types: 1,
+ Classes: 1,
+ 'Iterative Statement': 1,
+ 'JS Method': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1,
+ JSON: 1,
+ console: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/rendering.js': {
+ name: 'src/core/rendering.js',
+ modules: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/shim.js': {
+ name: 'src/core/shim.js',
+ modules: {},
+ classes: {},
+ fors: {},
+ namespaces: {}
+ },
+ 'src/core/structure.js': {
+ name: 'src/core/structure.js',
+ modules: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/core/transform.js': {
+ name: 'src/core/transform.js',
+ modules: {
+ Transform: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/data/local_storage.js': {
+ name: 'src/data/local_storage.js',
+ modules: {
+ LocalStorage: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/data/p5.TypedDict.js': {
+ name: 'src/data/p5.TypedDict.js',
+ modules: {
+ Dictionary: 1
+ },
+ classes: {
+ 'p5.TypedDict': 1,
+ 'p5.StringDict': 1,
+ 'p5.NumberDict': 1
+ },
+ fors: {
+ 'p5.TypedDict': 1,
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/dom/dom.js': {
+ name: 'src/dom/dom.js',
+ modules: {},
+ classes: {
+ 'p5.MediaElement': 1,
+ 'p5.File': 1
+ },
+ fors: {
+ p5: 1,
+ 'p5.Element': 1
+ },
+ namespaces: {}
+ },
+ 'src/events/acceleration.js': {
+ name: 'src/events/acceleration.js',
+ modules: {
+ Acceleration: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/events/keyboard.js': {
+ name: 'src/events/keyboard.js',
+ modules: {
+ Keyboard: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/events/mouse.js': {
+ name: 'src/events/mouse.js',
+ modules: {
+ Mouse: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/events/touch.js': {
+ name: 'src/events/touch.js',
+ modules: {
+ Touch: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/image/filters.js': {
+ name: 'src/image/filters.js',
+ modules: {},
+ classes: {},
+ fors: {},
+ namespaces: {}
+ },
+ 'src/image/image.js': {
+ name: 'src/image/image.js',
+ modules: {
+ Image: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/image/loading_displaying.js': {
+ name: 'src/image/loading_displaying.js',
+ modules: {
+ 'Loading & Displaying': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/image/p5.Image.js': {
+ name: 'src/image/p5.Image.js',
+ modules: {},
+ classes: {
+ 'p5.Image': 1
+ },
+ fors: {},
+ namespaces: {}
+ },
+ 'src/image/pixels.js': {
+ name: 'src/image/pixels.js',
+ modules: {
+ Pixels: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/io/files.js': {
+ name: 'src/io/files.js',
+ modules: {
+ Input: 1,
+ Output: 1
+ },
+ classes: {
+ 'p5.PrintWriter': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/io/p5.Table.js': {
+ name: 'src/io/p5.Table.js',
+ modules: {
+ Table: 1
+ },
+ classes: {
+ 'p5.Table': 1
+ },
+ fors: {},
+ namespaces: {}
+ },
+ 'src/io/p5.TableRow.js': {
+ name: 'src/io/p5.TableRow.js',
+ modules: {},
+ classes: {
+ 'p5.TableRow': 1
+ },
+ fors: {},
+ namespaces: {}
+ },
+ 'src/io/p5.XML.js': {
+ name: 'src/io/p5.XML.js',
+ modules: {},
+ classes: {
+ 'p5.XML': 1
+ },
+ fors: {},
+ namespaces: {}
+ },
+ 'src/math/calculation.js': {
+ name: 'src/math/calculation.js',
+ modules: {
+ Calculation: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/math/math.js': {
+ name: 'src/math/math.js',
+ modules: {
+ Vector: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/math/noise.js': {
+ name: 'src/math/noise.js',
+ modules: {
+ Noise: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/math/p5.Vector.js': {
+ name: 'src/math/p5.Vector.js',
+ modules: {},
+ classes: {
+ 'p5.Vector': 1
+ },
+ fors: {},
+ namespaces: {}
+ },
+ 'src/math/random.js': {
+ name: 'src/math/random.js',
+ modules: {
+ Random: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/math/trigonometry.js': {
+ name: 'src/math/trigonometry.js',
+ modules: {
+ Trigonometry: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/typography/attributes.js': {
+ name: 'src/typography/attributes.js',
+ modules: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/typography/loading_displaying.js': {
+ name: 'src/typography/loading_displaying.js',
+ modules: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/typography/p5.Font.js': {
+ name: 'src/typography/p5.Font.js',
+ modules: {},
+ classes: {
+ 'p5.Font': 1
+ },
+ fors: {},
+ namespaces: {}
+ },
+ 'src/utilities/array_functions.js': {
+ name: 'src/utilities/array_functions.js',
+ modules: {
+ 'Array Functions': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/utilities/conversion.js': {
+ name: 'src/utilities/conversion.js',
+ modules: {
+ Conversion: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/utilities/string_functions.js': {
+ name: 'src/utilities/string_functions.js',
+ modules: {
+ 'String Functions': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/utilities/time_date.js': {
+ name: 'src/utilities/time_date.js',
+ modules: {
+ 'Time & Date': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/3d_primitives.js': {
+ name: 'src/webgl/3d_primitives.js',
+ modules: {
+ '3D Primitives': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/interaction.js': {
+ name: 'src/webgl/interaction.js',
+ modules: {
+ Interaction: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/light.js': {
+ name: 'src/webgl/light.js',
+ modules: {
+ Lights: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/loading.js': {
+ name: 'src/webgl/loading.js',
+ modules: {
+ '3D Models': 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/material.js': {
+ name: 'src/webgl/material.js',
+ modules: {
+ Material: 1
+ },
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/p5.Camera.js': {
+ name: 'src/webgl/p5.Camera.js',
+ modules: {
+ Camera: 1
+ },
+ classes: {
+ 'p5.Camera': 1
+ },
+ fors: {
+ p5: 1,
+ 'p5.Camera': 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/p5.Geometry.js': {
+ name: 'src/webgl/p5.Geometry.js',
+ modules: {},
+ classes: {
+ 'p5.Geometry': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/p5.Matrix.js': {
+ name: 'src/webgl/p5.Matrix.js',
+ modules: {},
+ classes: {
+ 'p5.Matrix': 1
+ },
+ fors: {},
+ namespaces: {}
+ },
+ 'src/webgl/p5.RendererGL.Immediate.js': {
+ name: 'src/webgl/p5.RendererGL.Immediate.js',
+ modules: {},
+ classes: {},
+ fors: {},
+ namespaces: {}
+ },
+ 'src/webgl/p5.RendererGL.Retained.js': {
+ name: 'src/webgl/p5.RendererGL.Retained.js',
+ modules: {},
+ classes: {},
+ fors: {},
+ namespaces: {}
+ },
+ 'src/webgl/p5.RendererGL.js': {
+ name: 'src/webgl/p5.RendererGL.js',
+ modules: {},
+ classes: {
+ 'p5.RendererGL': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/p5.Shader.js': {
+ name: 'src/webgl/p5.Shader.js',
+ modules: {},
+ classes: {
+ 'p5.Shader': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/p5.Texture.js': {
+ name: 'src/webgl/p5.Texture.js',
+ modules: {},
+ classes: {
+ 'p5.Texture': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'src/webgl/text.js': {
+ name: 'src/webgl/text.js',
+ modules: {},
+ classes: {
+ ImageInfos: 1,
+ FontInfo: 1,
+ Cubic: 1
+ },
+ fors: {},
+ namespaces: {}
+ },
+ 'lib/addons/p5.sound.js': {
+ name: 'lib/addons/p5.sound.js',
+ modules: {
+ 'p5.sound': 1
+ },
+ classes: {
+ 'p5.SoundFile': 1,
+ 'p5.Amplitude': 1,
+ 'p5.FFT': 1,
+ 'p5.Signal': 1,
+ 'p5.Oscillator': 1,
+ 'p5.SinOsc': 1,
+ 'p5.TriOsc': 1,
+ 'p5.SawOsc': 1,
+ 'p5.SqrOsc': 1,
+ 'p5.Envelope': 1,
+ 'p5.Pulse': 1,
+ 'p5.Noise': 1,
+ 'p5.AudioIn': 1,
+ 'p5.Effect': 1,
+ 'p5.Filter': 1,
+ 'p5.LowPass': 1,
+ 'p5.HighPass': 1,
+ 'p5.BandPass': 1,
+ 'p5.EQ': 1,
+ 'p5.Panner3D': 1,
+ 'p5.Delay': 1,
+ 'p5.Reverb': 1,
+ 'p5.Convolver': 1,
+ 'p5.Phrase': 1,
+ 'p5.Part': 1,
+ 'p5.Score': 1,
+ 'p5.SoundLoop': 1,
+ 'p5.Compressor': 1,
+ 'p5.SoundRecorder': 1,
+ 'p5.PeakDetect': 1,
+ 'p5.Gain': 1,
+ 'p5.AudioVoice': 1,
+ 'p5.MonoSynth': 1,
+ 'p5.PolySynth': 1,
+ 'p5.Distortion': 1
+ },
+ fors: {
+ 'p5.sound': 1,
+ p5: 1
+ },
+ namespaces: {}
+ },
+ 'lib/addons/p5.sound.min.js': {
+ name: 'lib/addons/p5.sound.min.js',
+ modules: {},
+ classes: {},
+ fors: {},
+ namespaces: {}
+ }
+ },
+ modules: {
+ Color: {
+ name: 'Color',
+ submodules: {
+ 'Color Conversion': 1,
+ 'Creating & Reading': 1,
+ Setting: 1
+ },
+ elements: {},
+ classes: {
+ 'p5.Color': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ file: 'src/color/p5.Color.js',
+ line: 14
+ },
+ 'Color Conversion': {
+ name: 'Color Conversion',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Color',
+ namespace: '',
+ file: 'src/color/color_conversion.js',
+ line: 1,
+ requires: ['core']
+ },
+ 'Creating & Reading': {
+ name: 'Creating & Reading',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.Color': 1
+ },
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Color',
+ namespace: '',
+ file: 'src/color/p5.Color.js',
+ line: 14,
+ requires: ['core', 'constants'],
+ description:
+ 'Each color stores the color mode and level maxes that applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when saturation() is requested.
\nInternally we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.
\nWe also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.
\n'
+ },
+ Setting: {
+ name: 'Setting',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Color',
+ namespace: '',
+ file: 'src/color/setting.js',
+ line: 1,
+ requires: ['core', 'constants']
+ },
+ Shape: {
+ name: 'Shape',
+ submodules: {
+ '2D Primitives': 1,
+ Curves: 1,
+ Vertex: 1,
+ '3D Primitives': 1,
+ '3D Models': 1
+ },
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ '2D Primitives': {
+ name: '2D Primitives',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Shape',
+ namespace: '',
+ file: 'src/core/shape/2d_primitives.js',
+ line: 1,
+ requires: ['core', 'constants']
+ },
+ Attributes: {
+ name: 'Attributes',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Typography',
+ namespace: '',
+ file: 'src/core/shape/attributes.js',
+ line: 1,
+ requires: ['core', 'constants']
+ },
+ Curves: {
+ name: 'Curves',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Shape',
+ namespace: '',
+ file: 'src/core/shape/curves.js',
+ line: 1,
+ requires: ['core']
+ },
+ Vertex: {
+ name: 'Vertex',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Shape',
+ namespace: '',
+ file: 'src/core/shape/vertex.js',
+ line: 1,
+ requires: ['core', 'constants']
+ },
+ Constants: {
+ name: 'Constants',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ module: 'Constants',
+ file: 'src/core/constants.js',
+ line: 1
+ },
+ Environment: {
+ name: 'Environment',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ module: 'Environment',
+ file: 'src/core/environment.js',
+ line: 1,
+ requires: ['core', 'constants']
+ },
+ Structure: {
+ name: 'Structure',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ module: 'Structure',
+ file: 'src/core/main.js',
+ line: 1,
+ requires: ['constants']
+ },
+ DOM: {
+ name: 'DOM',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.Element': 1,
+ 'p5.MediaElement': 1,
+ 'p5.File': 1
+ },
+ fors: {
+ 'p5.Element': 1,
+ p5: 1
+ },
+ namespaces: {},
+ module: 'DOM',
+ file: 'src/dom/dom.js',
+ line: 3268,
+ description:
+ "The web is much more than just canvas and the DOM functionality makes it easy to interact\nwith other HTML5 objects, including text, hyperlink, image, input, video,\naudio, and webcam.
\nThere is a set of creation methods, DOM manipulation methods, and\nan extended p5.Element that supports a range of HTML elements. See the\n\nbeyond the canvas tutorial for a full overview of how this addon works.\n\n
See tutorial: beyond the canvas\nfor more info on how to use this library.",
+ requires: ['p5']
+ },
+ Rendering: {
+ name: 'Rendering',
+ submodules: {
+ undefined: 1
+ },
+ elements: {},
+ classes: {
+ 'p5.RendererGL': 1,
+ 'p5.Graphics': 1,
+ 'p5.Renderer': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ module: 'Rendering',
+ file: 'src/webgl/p5.RendererGL.js',
+ line: 548,
+ description:
+ '
Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.
\n'
+ },
+ Foundation: {
+ name: 'Foundation',
+ submodules: {
+ Declaration: 1,
+ 'Comparison Operators': 1,
+ 'Control Statement': 1,
+ Function: 1,
+ Types: 1,
+ Classes: 1,
+ 'Iterative Statement': 1
+ },
+ elements: {},
+ classes: {
+ JSON: 1,
+ console: 1
+ },
+ fors: {
+ p5: 1,
+ JSON: 1,
+ console: 1
+ },
+ namespaces: {}
+ },
+ Declaration: {
+ name: 'Declaration',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Foundation',
+ namespace: '',
+ file: 'src/core/reference.js',
+ line: 1
+ },
+ 'Comparison Operators': {
+ name: 'Comparison Operators',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {},
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Foundation',
+ namespace: '',
+ file: 'src/core/reference.js',
+ line: 57
+ },
+ 'Control Statement': {
+ name: 'Control Statement',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {},
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Foundation',
+ namespace: '',
+ file: 'src/core/reference.js',
+ line: 162
+ },
+ Function: {
+ name: 'Function',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {},
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Foundation',
+ namespace: '',
+ file: 'src/core/reference.js',
+ line: 193
+ },
+ Types: {
+ name: 'Types',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {},
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Foundation',
+ namespace: '',
+ file: 'src/core/reference.js',
+ line: 237
+ },
+ Classes: {
+ name: 'Classes',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {},
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Foundation',
+ namespace: '',
+ file: 'src/core/reference.js',
+ line: 317
+ },
+ 'Iterative Statement': {
+ name: 'Iterative Statement',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {},
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Foundation',
+ namespace: '',
+ file: 'src/core/reference.js',
+ line: 344
+ },
+ 'JS Method': {
+ name: 'JS Method',
+ submodules: {},
+ elements: {},
+ classes: {
+ JSON: 1,
+ console: 1
+ },
+ fors: {
+ JSON: 1,
+ console: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'IO',
+ namespace: '',
+ file: 'src/core/reference.js',
+ line: 416
+ },
+ Transform: {
+ name: 'Transform',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ module: 'Transform',
+ file: 'src/core/transform.js',
+ line: 1,
+ requires: ['core', 'constants']
+ },
+ Data: {
+ name: 'Data',
+ submodules: {
+ LocalStorage: 1,
+ Dictionary: 1,
+ 'Array Functions': 1,
+ Conversion: 1,
+ 'String Functions': 1
+ },
+ elements: {},
+ classes: {
+ 'p5.TypedDict': 1,
+ 'p5.StringDict': 1,
+ 'p5.NumberDict': 1
+ },
+ fors: {
+ p5: 1,
+ 'p5.TypedDict': 1
+ },
+ namespaces: {},
+ file: 'src/data/p5.TypedDict.js',
+ line: 416
+ },
+ LocalStorage: {
+ name: 'LocalStorage',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Data',
+ namespace: '',
+ file: 'src/data/local_storage.js',
+ line: 1,
+ requires: [
+ 'core\n\nThis module defines the p5 methods for working with local storage'
+ ]
+ },
+ Dictionary: {
+ name: 'Dictionary',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.TypedDict': 1,
+ 'p5.StringDict': 1,
+ 'p5.NumberDict': 1
+ },
+ fors: {
+ 'p5.TypedDict': 1,
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Data',
+ namespace: '',
+ file: 'src/data/p5.TypedDict.js',
+ line: 416,
+ requires: [
+ 'core\n\nThis module defines the p5 methods for the p5 Dictionary classes.\nThe classes StringDict and NumberDict are for storing and working\nwith key-value pairs.'
+ ],
+ description:
+ 'Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.
\n'
+ },
+ Events: {
+ name: 'Events',
+ submodules: {
+ Acceleration: 1,
+ Keyboard: 1,
+ Mouse: 1,
+ Touch: 1
+ },
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ namespaces: {}
+ },
+ Acceleration: {
+ name: 'Acceleration',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Events',
+ namespace: '',
+ file: 'src/events/acceleration.js',
+ line: 1,
+ requires: ['core']
+ },
+ Keyboard: {
+ name: 'Keyboard',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Events',
+ namespace: '',
+ file: 'src/events/keyboard.js',
+ line: 1,
+ requires: ['core']
+ },
+ Mouse: {
+ name: 'Mouse',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Events',
+ namespace: '',
+ file: 'src/events/mouse.js',
+ line: 1,
+ requires: ['core', 'constants']
+ },
+ Touch: {
+ name: 'Touch',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Events',
+ namespace: '',
+ file: 'src/events/touch.js',
+ line: 1,
+ requires: ['core']
+ },
+ Image: {
+ name: 'Image',
+ submodules: {
+ Pixels: 1
+ },
+ elements: {},
+ classes: {
+ 'p5.Image': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ module: 'Image',
+ file: 'src/image/p5.Image.js',
+ line: 21,
+ requires: ['core'],
+ description:
+ 'Creates a new p5.Image. A p5.Image is a canvas backed representation of an\nimage.\n
\np5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\nloadImage() function. The p5.Image class contains fields for the width and\nheight of the image, as well as an array called pixels[] that contains the\nvalues for every pixel in the image.\n
\nThe methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.\n
\nBefore using the pixels[] array, be sure to use the loadPixels() method on\nthe image to make sure that the pixel data is properly loaded.
\n'
+ },
+ 'Loading & Displaying': {
+ name: 'Loading & Displaying',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.Font': 1
+ },
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Typography',
+ namespace: '',
+ file: 'src/typography/p5.Font.js',
+ line: 13,
+ requires: ['core'],
+ description:
+ 'This module defines the p5.Font class and functions for\ndrawing text to the display canvas.
\n'
+ },
+ Pixels: {
+ name: 'Pixels',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Image',
+ namespace: '',
+ file: 'src/image/pixels.js',
+ line: 1,
+ requires: ['core']
+ },
+ IO: {
+ name: 'IO',
+ submodules: {
+ 'JS Method': 1,
+ Input: 1,
+ Output: 1,
+ Table: 1,
+ 'Time & Date': 1
+ },
+ elements: {},
+ classes: {
+ p5: 1,
+ 'p5.PrintWriter': 1,
+ 'p5.Table': 1,
+ 'p5.TableRow': 1,
+ 'p5.XML': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ file: 'src/io/p5.XML.js',
+ line: 9
+ },
+ Input: {
+ name: 'Input',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.XML': 1
+ },
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'IO',
+ namespace: '',
+ file: 'src/io/p5.XML.js',
+ line: 9,
+ requires: ['core'],
+ description:
+ 'XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.
\n'
+ },
+ Output: {
+ name: 'Output',
+ submodules: {},
+ elements: {},
+ classes: {
+ p5: 1,
+ 'p5.PrintWriter': 1
+ },
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'IO',
+ namespace: '',
+ file: 'src/io/files.js',
+ line: 1235,
+ description:
+ 'This is the p5 instance constructor.
\nA p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(), setup(), and/or\ndraw() properties on it for running a sketch.
\nA p5 sketch can run in "global" or "instance" mode:\n"global" - all properties and methods are attached to the window\n"instance" - all properties and methods are bound to this p5 object
\n'
+ },
+ Table: {
+ name: 'Table',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.Table': 1,
+ 'p5.TableRow': 1
+ },
+ fors: {},
+ is_submodule: 1,
+ namespaces: {},
+ module: 'IO',
+ namespace: '',
+ file: 'src/io/p5.TableRow.js',
+ line: 9,
+ requires: ['core'],
+ description:
+ 'Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.
\n'
+ },
+ Math: {
+ name: 'Math',
+ submodules: {
+ Calculation: 1,
+ Vector: 1,
+ Noise: 1,
+ Random: 1,
+ Trigonometry: 1
+ },
+ elements: {},
+ classes: {
+ 'p5.Vector': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ file: 'src/math/p5.Vector.js',
+ line: 10
+ },
+ Calculation: {
+ name: 'Calculation',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Math',
+ namespace: '',
+ file: 'src/math/calculation.js',
+ line: 1,
+ requires: ['core']
+ },
+ Vector: {
+ name: 'Vector',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.Vector': 1
+ },
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Math',
+ namespace: '',
+ file: 'src/math/p5.Vector.js',
+ line: 10,
+ requires: ['core'],
+ description:
+ 'A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods mag() and heading().\n
\nIn many of the p5.js examples, you will see p5.Vector used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).\n
\nSince vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n"vector" math, which is made easy by the methods inside the p5.Vector class.
\n'
+ },
+ Noise: {
+ name: 'Noise',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Math',
+ namespace: '',
+ file: 'src/math/noise.js',
+ line: 14,
+ requires: ['core']
+ },
+ Random: {
+ name: 'Random',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Math',
+ namespace: '',
+ file: 'src/math/random.js',
+ line: 1,
+ requires: ['core']
+ },
+ Trigonometry: {
+ name: 'Trigonometry',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Math',
+ namespace: '',
+ file: 'src/math/trigonometry.js',
+ line: 1,
+ requires: ['core', 'constants']
+ },
+ Typography: {
+ name: 'Typography',
+ submodules: {
+ Attributes: 1,
+ 'Loading & Displaying': 1
+ },
+ elements: {},
+ classes: {
+ 'p5.Font': 1
+ },
+ fors: {
+ p5: 1
+ },
+ namespaces: {},
+ file: 'src/typography/p5.Font.js',
+ line: 13
+ },
+ 'Array Functions': {
+ name: 'Array Functions',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Data',
+ namespace: '',
+ file: 'src/utilities/array_functions.js',
+ line: 1,
+ requires: ['core']
+ },
+ Conversion: {
+ name: 'Conversion',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Data',
+ namespace: '',
+ file: 'src/utilities/conversion.js',
+ line: 1,
+ requires: ['core']
+ },
+ 'String Functions': {
+ name: 'String Functions',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Data',
+ namespace: '',
+ file: 'src/utilities/string_functions.js',
+ line: 1,
+ requires: ['core']
+ },
+ 'Time & Date': {
+ name: 'Time & Date',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'IO',
+ namespace: '',
+ file: 'src/utilities/time_date.js',
+ line: 1,
+ requires: ['core']
+ },
+ '3D Primitives': {
+ name: '3D Primitives',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Shape',
+ namespace: '',
+ file: 'src/webgl/3d_primitives.js',
+ line: 1,
+ requires: ['core', 'p5.Geometry']
+ },
+ 'Lights, Camera': {
+ name: 'Lights, Camera',
+ submodules: {
+ Interaction: 1,
+ Lights: 1,
+ Material: 1,
+ Camera: 1
+ },
+ elements: {},
+ classes: {
+ 'p5.Camera': 1,
+ 'p5.Geometry': 1,
+ 'p5.Matrix': 1,
+ 'p5.Shader': 1,
+ 'p5.Texture': 1,
+ ImageInfos: 1,
+ FontInfo: 1,
+ Cubic: 1
+ },
+ fors: {
+ p5: 1,
+ 'p5.Camera': 1
+ },
+ namespaces: {},
+ file: 'src/webgl/text.js',
+ line: 260
+ },
+ Interaction: {
+ name: 'Interaction',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Lights, Camera',
+ namespace: '',
+ file: 'src/webgl/interaction.js',
+ line: 1,
+ requires: ['core']
+ },
+ Lights: {
+ name: 'Lights',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Lights, Camera',
+ namespace: '',
+ file: 'src/webgl/light.js',
+ line: 1,
+ requires: ['core']
+ },
+ '3D Models': {
+ name: '3D Models',
+ submodules: {},
+ elements: {},
+ classes: {},
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Shape',
+ namespace: '',
+ file: 'src/webgl/loading.js',
+ line: 1,
+ requires: ['core', 'p5.Geometry']
+ },
+ Material: {
+ name: 'Material',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.Geometry': 1,
+ 'p5.Shader': 1,
+ 'p5.Texture': 1
+ },
+ fors: {
+ p5: 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Lights, Camera',
+ namespace: '',
+ file: 'src/webgl/p5.Texture.js',
+ line: 12,
+ requires: ['core'],
+ description: 'This module defines the p5.Shader class
\n'
+ },
+ Camera: {
+ name: 'Camera',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.Camera': 1
+ },
+ fors: {
+ p5: 1,
+ 'p5.Camera': 1
+ },
+ is_submodule: 1,
+ namespaces: {},
+ module: 'Lights, Camera',
+ namespace: '',
+ file: 'src/webgl/p5.Camera.js',
+ line: 319,
+ requires: ['core'],
+ description:
+ 'This class describes a camera for use in p5's\n\nWebGL mode. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.
\nNew p5.Camera objects can be made through the\ncreateCamera() function and controlled through\nthe methods described below. A camera created in this way will use a default\nposition in the scene and a default perspective projection until these\nproperties are changed through the various methods available. It is possible\nto create multiple cameras, in which case the current camera\ncan be set through the setCamera() method.
\nNote:\nThe methods below operate in two coordinate systems: the 'world' coordinate\nsystem describe positions in terms of their relationship to the origin along\nthe X, Y and Z axes whereas the camera's 'local' coordinate system\ndescribes positions from the camera's point of view: left-right, up-down,\nand forward-backward. The move() method,\nfor instance, moves the camera along its own axes, whereas the\nsetPosition()\nmethod sets the camera's position in world-space.
\n'
+ },
+ 'p5.sound': {
+ name: 'p5.sound',
+ submodules: {},
+ elements: {},
+ classes: {
+ 'p5.sound': 1,
+ 'p5.SoundFile': 1,
+ 'p5.Amplitude': 1,
+ 'p5.FFT': 1,
+ 'p5.Signal': 1,
+ 'p5.Oscillator': 1,
+ 'p5.SinOsc': 1,
+ 'p5.TriOsc': 1,
+ 'p5.SawOsc': 1,
+ 'p5.SqrOsc': 1,
+ 'p5.Envelope': 1,
+ 'p5.Pulse': 1,
+ 'p5.Noise': 1,
+ 'p5.AudioIn': 1,
+ 'p5.Effect': 1,
+ 'p5.Filter': 1,
+ 'p5.LowPass': 1,
+ 'p5.HighPass': 1,
+ 'p5.BandPass': 1,
+ 'p5.EQ': 1,
+ 'p5.Panner3D': 1,
+ 'p5.Delay': 1,
+ 'p5.Reverb': 1,
+ 'p5.Convolver': 1,
+ 'p5.Phrase': 1,
+ 'p5.Part': 1,
+ 'p5.Score': 1,
+ 'p5.SoundLoop': 1,
+ 'p5.Compressor': 1,
+ 'p5.SoundRecorder': 1,
+ 'p5.PeakDetect': 1,
+ 'p5.Gain': 1,
+ 'p5.AudioVoice': 1,
+ 'p5.MonoSynth': 1,
+ 'p5.PolySynth': 1,
+ 'p5.Distortion': 1
+ },
+ fors: {
+ 'p5.sound': 1,
+ p5: 1
+ },
+ namespaces: {},
+ module: 'p5.sound',
+ file: 'lib/addons/p5.sound.js',
+ line: 12767,
+ description:
+ 'p5.sound extends p5 with Web Audio functionality including audio input,\nplayback, analysis and synthesis.\n
\np5.SoundFile: Load and play sound files.
\np5.Amplitude: Get the current volume of a sound.
\np5.AudioIn: Get sound from an input source, typically\n a computer microphone.
\np5.FFT: Analyze the frequency of sound. Returns\n results from the frequency spectrum or time domain (waveform).
\np5.Oscillator: Generate Sine,\n Triangle, Square and Sawtooth waveforms. Base class of\n p5.Noise and p5.Pulse.\n
\np5.Envelope: An Envelope is a series\n of fades over time. Often used to control an object's\n output gain level as an "ADSR Envelope" (Attack, Decay,\n Sustain, Release). Can also modulate other parameters.
\np5.Delay: A delay effect with\n parameters for feedback, delayTime, and lowpass filter.
\np5.Filter: Filter the frequency range of a\n sound.\n
\np5.Reverb: Add reverb to a sound by specifying\n duration and decay.
\np5.Convolver: Extends\np5.Reverb to simulate the sound of real\n physical spaces through convolution.
\np5.SoundRecorder: Record sound for playback\n / save the .wav file.\np5.Phrase, p5.Part and\np5.Score: Compose musical sequences.\n
\np5.sound is on GitHub.\nDownload the latest version\nhere.
\n',
+ tag: 'main',
+ itemtype: 'main'
+ }
+ },
+ classes: {
+ p5: {
+ name: 'p5',
+ shortname: 'p5',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'IO',
+ submodule: 'Output',
+ namespace: '',
+ file: 'src/core/main.js',
+ line: 13,
+ description:
+ 'This is the p5 instance constructor.
\nA p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(), setup(), and/or\ndraw() properties on it for running a sketch.
\nA p5 sketch can run in "global" or "instance" mode:\n"global" - all properties and methods are attached to the window\n"instance" - all properties and methods are bound to this p5 object
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'sketch',
+ description:
+ 'a closure that can set optional preload(),\n setup(), and/or draw() properties on the\n given p5 instance
\n',
+ type: 'Function'
+ },
+ {
+ name: 'node',
+ description: 'element to attach canvas to
\n',
+ type: 'HTMLElement',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'a p5 instance',
+ type: 'P5'
+ }
+ },
+ 'p5.Color': {
+ name: 'p5.Color',
+ shortname: 'p5.Color',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Color',
+ submodule: 'Creating & Reading',
+ namespace: '',
+ file: 'src/color/p5.Color.js',
+ line: 14,
+ description:
+ 'Each color stores the color mode and level maxes that applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when saturation() is requested.
\nInternally we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.
\nWe also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.
\n'
+ },
+ 'p5.Element': {
+ name: 'p5.Element',
+ shortname: 'p5.Element',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'DOM',
+ submodule: 'DOM',
+ namespace: '',
+ file: 'src/core/p5.Element.js',
+ line: 9,
+ description:
+ 'Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. It is not called directly, but p5.Element\nobjects are created by calling createCanvas, createGraphics,\ncreateDiv, createImg, createInput, etc.
\n',
+ params: [
+ {
+ name: 'elt',
+ description: 'DOM node that is wrapped
\n',
+ type: 'String'
+ },
+ {
+ name: 'pInst',
+ description: 'pointer to p5 instance
\n',
+ type: 'P5',
+ optional: true
+ }
+ ]
+ },
+ 'p5.Graphics': {
+ name: 'p5.Graphics',
+ shortname: 'p5.Graphics',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Rendering',
+ submodule: 'Rendering',
+ namespace: '',
+ file: 'src/core/p5.Graphics.js',
+ line: 10,
+ description:
+ 'Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.
\n',
+ extends: 'p5.Element',
+ params: [
+ {
+ name: 'w',
+ description: 'width
\n',
+ type: 'Number'
+ },
+ {
+ name: 'h',
+ description: 'height
\n',
+ type: 'Number'
+ },
+ {
+ name: 'renderer',
+ description: 'the renderer to use, either P2D or WEBGL
\n',
+ type: 'Constant'
+ },
+ {
+ name: 'pInst',
+ description: 'pointer to p5 instance
\n',
+ type: 'P5',
+ optional: true
+ }
+ ]
+ },
+ 'p5.Renderer': {
+ name: 'p5.Renderer',
+ shortname: 'p5.Renderer',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Rendering',
+ submodule: 'Rendering',
+ namespace: '',
+ file: 'src/core/p5.Renderer.js',
+ line: 10,
+ description:
+ 'Main graphics and rendering context, as well as the base API\nimplementation for p5.js "core". To be used as the superclass for\nRenderer2D and Renderer3D classes, respecitvely.
\n',
+ is_constructor: 1,
+ extends: 'p5.Element',
+ params: [
+ {
+ name: 'elt',
+ description: 'DOM node that is wrapped
\n',
+ type: 'String'
+ },
+ {
+ name: 'pInst',
+ description: 'pointer to p5 instance
\n',
+ type: 'P5',
+ optional: true
+ },
+ {
+ name: 'isMainCanvas',
+ description: 'whether we're using it as main canvas
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ]
+ },
+ JSON: {
+ name: 'JSON',
+ shortname: 'JSON',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Foundation',
+ submodule: 'JS Method',
+ namespace: ''
+ },
+ console: {
+ name: 'console',
+ shortname: 'console',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Foundation',
+ submodule: 'JS Method',
+ namespace: ''
+ },
+ 'p5.TypedDict': {
+ name: 'p5.TypedDict',
+ shortname: 'p5.TypedDict',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Data',
+ submodule: 'Dictionary',
+ namespace: '',
+ file: 'src/data/p5.TypedDict.js',
+ line: 82,
+ description:
+ 'Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.
\n'
+ },
+ 'p5.StringDict': {
+ name: 'p5.StringDict',
+ shortname: 'p5.StringDict',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Data',
+ submodule: 'Dictionary',
+ namespace: '',
+ file: 'src/data/p5.TypedDict.js',
+ line: 399,
+ description: 'A simple Dictionary class for Strings.
\n',
+ extends: 'p5.TypedDict'
+ },
+ 'p5.NumberDict': {
+ name: 'p5.NumberDict',
+ shortname: 'p5.NumberDict',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Data',
+ submodule: 'Dictionary',
+ namespace: '',
+ file: 'src/data/p5.TypedDict.js',
+ line: 416,
+ description: 'A simple Dictionary class for Numbers.
\n',
+ extends: 'p5.TypedDict'
+ },
+ 'p5.MediaElement': {
+ name: 'p5.MediaElement',
+ shortname: 'p5.MediaElement',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'DOM',
+ submodule: 'DOM',
+ namespace: '',
+ file: 'src/dom/dom.js',
+ line: 2185,
+ description:
+ 'Extends p5.Element to handle audio and video. In addition to the methods\nof p5.Element, it also contains methods for controlling media. It is not\ncalled directly, but p5.MediaElements are created by calling createVideo,\ncreateAudio, and createCapture.
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'elt',
+ description: 'DOM node that is wrapped
\n',
+ type: 'String'
+ }
+ ]
+ },
+ 'p5.File': {
+ name: 'p5.File',
+ shortname: 'p5.File',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'DOM',
+ submodule: 'DOM',
+ namespace: '',
+ file: 'src/dom/dom.js',
+ line: 3268,
+ description:
+ 'Base class for a file.\nUsed for Element.drop and createFileInput.
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'file',
+ description: 'File that is wrapped
\n',
+ type: 'File'
+ }
+ ]
+ },
+ 'p5.Image': {
+ name: 'p5.Image',
+ shortname: 'p5.Image',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Image',
+ submodule: 'Image',
+ namespace: '',
+ file: 'src/image/p5.Image.js',
+ line: 21,
+ description:
+ 'Creates a new p5.Image. A p5.Image is a canvas backed representation of an\nimage.\n
\np5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\nloadImage() function. The p5.Image class contains fields for the width and\nheight of the image, as well as an array called pixels[] that contains the\nvalues for every pixel in the image.\n
\nThe methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.\n
\nBefore using the pixels[] array, be sure to use the loadPixels() method on\nthe image to make sure that the pixel data is properly loaded.
\n',
+ example: [
+ '\n\nfunction setup() {\n let img = createImage(100, 100); // same as new p5.Image(100, 100);\n img.loadPixels();\n createCanvas(100, 100);\n background(0);\n\n // helper for writing color to array\n function writeColor(image, x, y, red, green, blue, alpha) {\n let index = (x + y * width) * 4;\n image.pixels[index] = red;\n image.pixels[index + 1] = green;\n image.pixels[index + 2] = blue;\n image.pixels[index + 3] = alpha;\n }\n\n let x, y;\n // fill with random colors\n for (y = 0; y < img.height; y++) {\n for (x = 0; x < img.width; x++) {\n let red = random(255);\n let green = random(255);\n let blue = random(255);\n let alpha = 255;\n writeColor(img, x, y, red, green, blue, alpha);\n }\n }\n\n // draw a red line\n y = 0;\n for (x = 0; x < img.width; x++) {\n writeColor(img, x, y, 255, 0, 0, 255);\n }\n\n // draw a green line\n y = img.height - 1;\n for (x = 0; x < img.width; x++) {\n writeColor(img, x, y, 0, 255, 0, 255);\n }\n\n img.updatePixels();\n image(img, 0, 0);\n}\n'
+ ],
+ params: [
+ {
+ name: 'width',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'height',
+ description: '',
+ type: 'Number'
+ }
+ ]
+ },
+ 'p5.PrintWriter': {
+ name: 'p5.PrintWriter',
+ shortname: 'p5.PrintWriter',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'IO',
+ submodule: 'Output',
+ namespace: '',
+ file: 'src/io/files.js',
+ line: 1235,
+ params: [
+ {
+ name: 'filename',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'extension',
+ description: '',
+ type: 'String',
+ optional: true
+ }
+ ]
+ },
+ 'p5.Table': {
+ name: 'p5.Table',
+ shortname: 'p5.Table',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'IO',
+ submodule: 'Table',
+ namespace: '',
+ file: 'src/io/p5.Table.js',
+ line: 33,
+ description:
+ 'Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'rows',
+ description: 'An array of p5.TableRow objects
\n',
+ type: 'p5.TableRow[]',
+ optional: true
+ }
+ ]
+ },
+ 'p5.TableRow': {
+ name: 'p5.TableRow',
+ shortname: 'p5.TableRow',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'IO',
+ submodule: 'Table',
+ namespace: '',
+ file: 'src/io/p5.TableRow.js',
+ line: 9,
+ description:
+ 'A TableRow object represents a single row of data values,\nstored in columns, from a table.
\nA Table Row contains both an ordered array, and an unordered\nJSON object.
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'str',
+ description:
+ 'optional: populate the row with a\n string of values, separated by the\n separator
\n',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'separator',
+ description: 'comma separated values (csv) by default
\n',
+ type: 'String',
+ optional: true
+ }
+ ]
+ },
+ 'p5.XML': {
+ name: 'p5.XML',
+ shortname: 'p5.XML',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'IO',
+ submodule: 'Input',
+ namespace: '',
+ file: 'src/io/p5.XML.js',
+ line: 9,
+ description:
+ 'XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.
\n',
+ is_constructor: 1,
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let children = xml.getChildren(\'animal\');\n\n for (let i = 0; i < children.length; i++) {\n let id = children[i].getNum(\'id\');\n let coloring = children[i].getString(\'species\');\n let name = children[i].getContent();\n print(id + \', \' + coloring + \', \' + name);\n }\n}\n\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n'
+ ],
+ alt: 'no image displayed'
+ },
+ 'p5.Vector': {
+ name: 'p5.Vector',
+ shortname: 'p5.Vector',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Math',
+ submodule: 'Vector',
+ namespace: '',
+ file: 'src/math/p5.Vector.js',
+ line: 10,
+ description:
+ 'A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods mag() and heading().\n
\nIn many of the p5.js examples, you will see p5.Vector used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).\n
\nSince vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n"vector" math, which is made easy by the methods inside the p5.Vector class.
\n',
+ params: [
+ {
+ name: 'x',
+ description: 'x component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'y',
+ description: 'y component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'z component of the vector
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\nlet v1 = createVector(40, 50);\nlet v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n\n'
+ ],
+ alt:
+ '2 white ellipses. One center-left the other bottom right and off canvas'
+ },
+ 'p5.Font': {
+ name: 'p5.Font',
+ shortname: 'p5.Font',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Typography',
+ submodule: 'Loading & Displaying',
+ namespace: '',
+ file: 'src/typography/p5.Font.js',
+ line: 13,
+ description: 'Base class for font handling
\n',
+ params: [
+ {
+ name: 'pInst',
+ description: 'pointer to p5 instance
\n',
+ type: 'P5',
+ optional: true
+ }
+ ]
+ },
+ 'p5.Camera': {
+ name: 'p5.Camera',
+ shortname: 'p5.Camera',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Lights, Camera',
+ submodule: 'Camera',
+ namespace: '',
+ file: 'src/webgl/p5.Camera.js',
+ line: 319,
+ description:
+ 'This class describes a camera for use in p5's\n\nWebGL mode. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.
\nNew p5.Camera objects can be made through the\ncreateCamera() function and controlled through\nthe methods described below. A camera created in this way will use a default\nposition in the scene and a default perspective projection until these\nproperties are changed through the various methods available. It is possible\nto create multiple cameras, in which case the current camera\ncan be set through the setCamera() method.
\nNote:\nThe methods below operate in two coordinate systems: the 'world' coordinate\nsystem describe positions in terms of their relationship to the origin along\nthe X, Y and Z axes whereas the camera's 'local' coordinate system\ndescribes positions from the camera's point of view: left-right, up-down,\nand forward-backward. The move() method,\nfor instance, moves the camera along its own axes, whereas the\nsetPosition()\nmethod sets the camera's position in world-space.
\n',
+ params: [
+ {
+ name: 'rendererGL',
+ description: 'instance of WebGL renderer
\n',
+ type: 'RendererGL'
+ }
+ ],
+ example: [
+ "\n\n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n // set initial pan angle\n cam.pan(-0.8);\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.pan(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n"
+ ],
+ alt: 'camera view pans left and right across a series of rotating 3D boxes.'
+ },
+ 'p5.Geometry': {
+ name: 'p5.Geometry',
+ shortname: 'p5.Geometry',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Lights, Camera',
+ submodule: 'Material',
+ namespace: '',
+ file: 'src/webgl/p5.Geometry.js',
+ line: 12,
+ description: 'p5 Geometry class
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'detailX',
+ description: 'number of vertices on horizontal surface
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'detailY',
+ description: 'number of vertices on horizontal surface
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'callback',
+ description: 'function to call upon object instantiation.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ]
+ },
+ 'p5.Shader': {
+ name: 'p5.Shader',
+ shortname: 'p5.Shader',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'Lights, Camera',
+ submodule: 'Material',
+ namespace: '',
+ file: 'src/webgl/p5.Shader.js',
+ line: 11,
+ description: 'Shader class for WEBGL Mode
\n',
+ params: [
+ {
+ name: 'renderer',
+ description:
+ 'an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader
\n',
+ type: 'p5.RendererGL'
+ },
+ {
+ name: 'vertSrc',
+ description: 'source code for the vertex shader (as a string)
\n',
+ type: 'String'
+ },
+ {
+ name: 'fragSrc',
+ description:
+ 'source code for the fragment shader (as a string)
\n',
+ type: 'String'
+ }
+ ]
+ },
+ 'p5.sound': {
+ name: 'p5.sound',
+ shortname: 'p5.sound',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: ''
+ },
+ 'p5.SoundFile': {
+ name: 'p5.SoundFile',
+ shortname: 'p5.SoundFile',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 1645,
+ description:
+ 'SoundFile object with a path to a file.
\n\nThe p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.
\n\nTo do something with the sound as soon as it loads\npass the name of a function as the second parameter.
\n\nOnly one file path is required. However, audio file formats\n(i.e. mp3, ogg, wav and m4a/aac) are not supported by all\nweb browsers. If you want to ensure compatability, instead of a single\nfile path, you may include an Array of filepaths, and the browser will\nchoose a format that works.
',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'path',
+ description:
+ 'path to a sound file (String). Optionally,\n you may include multiple file formats in\n an array. Alternately, accepts an object\n from the HTML5 File API, or a p5.File.
\n',
+ type: 'String|Array'
+ },
+ {
+ name: 'successCallback',
+ description: 'Name of a function to call once file loads
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'Name of a function to call if file fails to\n load. This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'whileLoadingCallback',
+ description:
+ 'Name of a function to call while file\n is loading. That function will\n receive progress of the request to\n load the sound file\n (between 0 and 1) as its first\n parameter. This progress\n does not account for the additional\n time needed to decode the audio data.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\n\nfunction preload() {\n soundFormats('mp3', 'ogg');\n mySound = loadSound('assets/doorbell.mp3');\n}\n\nfunction setup() {\n mySound.setVolume(0.1);\n mySound.play();\n}\n\n "
+ ]
+ },
+ 'p5.Amplitude': {
+ name: 'p5.Amplitude',
+ shortname: 'p5.Amplitude',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 3179,
+ description:
+ 'Amplitude measures volume between 0.0 and 1.0.\nListens to all p5sound by default, or use setInput()\nto listen to a specific sound source. Accepts an optional\nsmoothing value, which defaults to 0.
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'smoothing',
+ description:
+ 'between 0.0 and .999 to smooth\n amplitude readings (defaults to 0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet sound, amplitude, cnv;\n\nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\nfunction setup() {\n cnv = createCanvas(100,100);\n amplitude = new p5.Amplitude();\n\n // start / stop the sound when canvas is clicked\n cnv.mouseClicked(function() {\n if (sound.isPlaying() ){\n sound.stop();\n } else {\n sound.play();\n }\n });\n}\nfunction draw() {\n background(0);\n fill(255);\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\n"
+ ]
+ },
+ 'p5.FFT': {
+ name: 'p5.FFT',
+ shortname: 'p5.FFT',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 3458,
+ description:
+ 'FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n\naudio frequencies within a waveform.
\n\nOnce instantiated, a p5.FFT object can return an array based on\ntwo types of analyses:
• FFT.waveform() computes\namplitude values along the time domain. The array indices correspond\nto samples across a brief moment in time. Each value represents\namplitude of the waveform at that sample of time.
\n• FFT.analyze() computes amplitude values along the\nfrequency domain. The array indices correspond to frequencies (i.e.\npitches), from the lowest to the highest that humans can hear. Each\nvalue represents amplitude at that slice of the frequency spectrum.\nUse with getEnergy() to measure amplitude at specific\nfrequencies, or within a range of frequencies.
\n\nFFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as bins. The array is 1024 bins long by default.\nYou can change the bin array length, but it must be a power of 2\nbetween 16 and 1024 in order for the FFT algorithm to function\ncorrectly. The actual size of the FFT buffer is twice the\nnumber of bins, so given a standard sample rate, the buffer is\n2048/44100 seconds long.
',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'smoothing',
+ description:
+ 'Smooth results of Freq Spectrum.\n 0.0 < smoothing < 1.0.\n Defaults to 0.8.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'bins',
+ description:
+ 'Length of resulting array.\n Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nfunction preload(){\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup(){\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n fft = new p5.FFT();\n sound.amp(0.2);\n}\n\nfunction draw(){\n background(0);\n\n let spectrum = fft.analyze();\n noStroke();\n fill(0,255,0); // spectrum is green\n for (var i = 0; i< spectrum.length; i++){\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h )\n }\n\n let waveform = fft.waveform();\n noFill();\n beginShape();\n stroke(255,0,0); // waveform is red\n strokeWeight(1);\n for (var i = 0; i< waveform.length; i++){\n let x = map(i, 0, waveform.length, 0, width);\n let y = map( waveform[i], -1, 1, 0, height);\n vertex(x,y);\n }\n endShape();\n\n text('click to play/pause', 4, 10);\n}\n\n// fade sound if mouse is over canvas\nfunction togglePlay() {\n if (sound.isPlaying()) {\n sound.pause();\n } else {\n sound.loop();\n }\n}\n"
+ ]
+ },
+ 'p5.Signal': {
+ name: 'p5.Signal',
+ shortname: 'p5.Signal',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 5223,
+ description:
+ "p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.
\n\nThis is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\ntone.js.
",
+ is_constructor: 1,
+ return: {
+ description: 'A Signal object from the Tone.js library',
+ type: 'Tone.Signal'
+ },
+ example: [
+ "\n\nfunction setup() {\n carrier = new p5.Oscillator('sine');\n carrier.amp(1); // set amplitude\n carrier.freq(220); // set frequency\n carrier.start(); // start oscillating\n\n modulator = new p5.Oscillator('sawtooth');\n modulator.disconnect();\n modulator.amp(1);\n modulator.freq(4);\n modulator.start();\n\n // Modulator's default amplitude range is -1 to 1.\n // Multiply it by -200, so the range is -200 to 200\n // then add 220 so the range is 20 to 420\n carrier.freq( modulator.mult(-200).add(220) );\n}\n"
+ ]
+ },
+ 'p5.Oscillator': {
+ name: 'p5.Oscillator',
+ shortname: 'p5.Oscillator',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 5369,
+ description:
+ "Creates a signal that oscillates between -1.0 and 1.0.\nBy default, the oscillation takes the form of a sinusoidal\nshape ('sine'). Additional types include 'triangle',\n'sawtooth' and 'square'. The frequency defaults to\n440 oscillations per second (440Hz, equal to the pitch of an\n'A' note).
\n\nSet the type of oscillation with setType(), or by instantiating a\nspecific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc.\n
",
+ is_constructor: 1,
+ params: [
+ {
+ name: 'freq',
+ description: 'frequency defaults to 440Hz
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'type',
+ description:
+ 'type of oscillator. Options:\n 'sine' (default), 'triangle',\n 'sawtooth', 'square'
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet osc;\nlet playing = false;\n\nfunction setup() {\n backgroundColor = color(255,0,255);\n textAlign(CENTER);\n\n osc = new p5.Oscillator();\n osc.setType('sine');\n osc.freq(240);\n osc.amp(0);\n osc.start();\n}\n\nfunction draw() {\n background(backgroundColor)\n text('click to play', width/2, height/2);\n}\n\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {\n if (!playing) {\n // ramp amplitude to 0.5 over 0.05 seconds\n osc.amp(0.5, 0.05);\n playing = true;\n backgroundColor = color(0,255,255);\n } else {\n // ramp amplitude to 0 over 0.5 seconds\n osc.amp(0, 0.5);\n playing = false;\n backgroundColor = color(255,0,255);\n }\n }\n}\n "
+ ]
+ },
+ 'p5.SinOsc': {
+ name: 'p5.SinOsc',
+ shortname: 'p5.SinOsc',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 5810,
+ description:
+ "Constructor: new p5.SinOsc().\nThis creates a Sine Wave Oscillator and is\nequivalent to new p5.Oscillator('sine')\n or creating a p5.Oscillator and then calling\nits method setType('sine').\nSee p5.Oscillator for methods.
\n",
+ is_constructor: 1,
+ extends: 'p5.Oscillator',
+ params: [
+ {
+ name: 'freq',
+ description: 'Set the frequency
\n',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ 'p5.TriOsc': {
+ name: 'p5.TriOsc',
+ shortname: 'p5.TriOsc',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 5827,
+ description:
+ "Constructor: new p5.TriOsc().\nThis creates a Triangle Wave Oscillator and is\nequivalent to new p5.Oscillator('triangle')\n or creating a p5.Oscillator and then calling\nits method setType('triangle').\nSee p5.Oscillator for methods.
\n",
+ is_constructor: 1,
+ extends: 'p5.Oscillator',
+ params: [
+ {
+ name: 'freq',
+ description: 'Set the frequency
\n',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ 'p5.SawOsc': {
+ name: 'p5.SawOsc',
+ shortname: 'p5.SawOsc',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 5844,
+ description:
+ "Constructor: new p5.SawOsc().\nThis creates a SawTooth Wave Oscillator and is\nequivalent to new p5.Oscillator('sawtooth')\n or creating a p5.Oscillator and then calling\nits method setType('sawtooth').\nSee p5.Oscillator for methods.
\n",
+ is_constructor: 1,
+ extends: 'p5.Oscillator',
+ params: [
+ {
+ name: 'freq',
+ description: 'Set the frequency
\n',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ 'p5.SqrOsc': {
+ name: 'p5.SqrOsc',
+ shortname: 'p5.SqrOsc',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 5861,
+ description:
+ "Constructor: new p5.SqrOsc().\nThis creates a Square Wave Oscillator and is\nequivalent to new p5.Oscillator('square')\n or creating a p5.Oscillator and then calling\nits method setType('square').\nSee p5.Oscillator for methods.
\n",
+ is_constructor: 1,
+ extends: 'p5.Oscillator',
+ params: [
+ {
+ name: 'freq',
+ description: 'Set the frequency
\n',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ 'p5.Envelope': {
+ name: 'p5.Envelope',
+ shortname: 'p5.Envelope',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 6316,
+ description:
+ 'Envelopes are pre-defined amplitude distribution over time.\nTypically, envelopes are used to control the output volume\nof an object, a series of fades referred to as Attack, Decay,\nSustain and Release (\nADSR\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator\'s frequency like this: osc.freq(env).
\nUse setRange to change the attack/release level.\nUse setADSR to change attackTime, decayTime, sustainPercent and releaseTime.
\nUse the play method to play the entire envelope,\nthe ramp method for a pingable trigger,\nor triggerAttack/\ntriggerRelease to trigger noteOn/noteOff.
',
+ is_constructor: 1,
+ example: [
+ "\n\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(playEnv);\n}\n\nfunction playEnv() {\n env.play();\n}\n"
+ ]
+ },
+ 'p5.Pulse': {
+ name: 'p5.Pulse',
+ shortname: 'p5.Pulse',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 7114,
+ description:
+ 'Creates a Pulse object, an oscillator that implements\nPulse Width Modulation.\nThe pulse is created with two oscillators.\nAccepts a parameter for frequency, and to set the\nwidth between the pulses. See \np5.Oscillator for a full list of methods.
\n',
+ extends: 'p5.Oscillator',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'freq',
+ description: 'Frequency in oscillations per second (Hz)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'w',
+ description:
+ 'Width between the pulses (0 to 1.0,\n defaults to 0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\nlet pulse;\nfunction setup() {\n background(0);\n\n // Create and start the pulse wave oscillator\n pulse = new p5.Pulse();\n pulse.amp(0.5);\n pulse.freq(220);\n pulse.start();\n}\n\nfunction draw() {\n let w = map(mouseX, 0, width, 0, 1);\n w = constrain(w, 0, 1);\n pulse.width(w)\n}\n'
+ ]
+ },
+ 'p5.Noise': {
+ name: 'p5.Noise',
+ shortname: 'p5.Noise',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 7293,
+ description:
+ 'Noise is a type of oscillator that generates a buffer with random values.
\n',
+ extends: 'p5.Oscillator',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'type',
+ description:
+ 'Type of noise can be 'white' (default),\n 'brown' or 'pink'.
\n',
+ type: 'String'
+ }
+ ]
+ },
+ 'p5.AudioIn': {
+ name: 'p5.AudioIn',
+ shortname: 'p5.AudioIn',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 7441,
+ description:
+ 'Get audio from an input, i.e. your computer\'s microphone.
\n\nTurn the mic on/off with the start() and stop() methods. When the mic\nis on, its volume can be measured with getLevel or by connecting an\nFFT object.
\n\nIf you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.
\n\nNote: This uses the getUserMedia/\nStream API, which is not supported by certain browsers. Access in Chrome browser\nis limited to localhost and https, but access over http may be limited.
',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'errorCallback',
+ description:
+ 'A function to call if there is an error\n accessing the AudioIn. For example,\n Safari and iOS devices do not\n currently allow microphone access.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\nlet mic;\nfunction setup(){\n mic = new p5.AudioIn()\n mic.start();\n}\nfunction draw(){\n background(0);\n micLevel = mic.getLevel();\n ellipse(width/2, constrain(height-micLevel*height*5, 0, height), 10, 10);\n}\n'
+ ]
+ },
+ 'p5.Effect': {
+ name: 'p5.Effect',
+ shortname: 'p5.Effect',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 8357,
+ description:
+ 'Effect is a base class for audio effects in p5.
\nThis module handles the nodes and methods that are \ncommon and useful for current and future effects.
\nThis class is extended by p5.Distortion, \np5.Compressor,\np5.Delay, \np5.Filter, \np5.Reverb.
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'ac',
+ description: 'Reference to the audio context of the p5 object
\n',
+ type: 'Object',
+ optional: true
+ },
+ {
+ name: 'input',
+ description: 'Gain Node effect wrapper
\n',
+ type: 'AudioNode',
+ optional: true
+ },
+ {
+ name: 'output',
+ description: 'Gain Node effect wrapper
\n',
+ type: 'AudioNode',
+ optional: true
+ },
+ {
+ name: '_drywet',
+ description: 'Tone.JS CrossFade node (defaults to value: 1)
\n',
+ type: 'Object',
+ optional: true
+ },
+ {
+ name: 'wet',
+ description:
+ 'Effects that extend this class should connect\n to the wet signal to this gain node, so that dry and wet \n signals are mixed properly.
\n',
+ type: 'AudioNode',
+ optional: true
+ }
+ ]
+ },
+ 'p5.Filter': {
+ name: 'p5.Filter',
+ shortname: 'p5.Filter',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 8499,
+ description:
+ 'A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:
\n* p5.LowPass:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.
\n* p5.HighPass:\nThe opposite of a lowpass filter.
\n* p5.BandPass:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.
\n\nThe .res() method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.
\nThis class extends p5.Effect. \nMethods amp(), chain(), \ndrywet(), connect(), and \ndisconnect() are available.
\n',
+ extends: 'p5.Effect',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'type',
+ description:
+ ''lowpass' (default), 'highpass', 'bandpass'
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\nlet fft, noise, filter;\n\nfunction setup() {\n fill(255, 40, 255);\n\n filter = new p5.BandPass();\n\n noise = new p5.Noise();\n // disconnect unfiltered noise,\n // and connect to filter\n noise.disconnect();\n noise.connect(filter);\n noise.start();\n\n fft = new p5.FFT();\n}\n\nfunction draw() {\n background(30);\n\n // set the BandPass frequency based on mouseX\n let freq = map(mouseX, 0, width, 20, 10000);\n filter.freq(freq);\n // give the filter a narrow band (lower res = wider bandpass)\n filter.res(50);\n\n // draw filtered spectrum\n let spectrum = fft.analyze();\n noStroke();\n for (let i = 0; i < spectrum.length; i++) {\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width/spectrum.length, h);\n }\n\n isMouseOverCanvas();\n}\n\nfunction isMouseOverCanvas() {\n let mX = mouseX, mY = mouseY;\n if (mX > 0 && mX < width && mY < height && mY > 0) {\n noise.amp(0.5, 0.2);\n } else {\n noise.amp(0, 0.2);\n }\n}\n'
+ ]
+ },
+ 'p5.LowPass': {
+ name: 'p5.LowPass',
+ shortname: 'p5.LowPass',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 8730,
+ description:
+ "Constructor: new p5.LowPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('lowpass').\nSee p5.Filter for methods.
\n",
+ is_constructor: 1,
+ extends: 'p5.Filter'
+ },
+ 'p5.HighPass': {
+ name: 'p5.HighPass',
+ shortname: 'p5.HighPass',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 8744,
+ description:
+ "Constructor: new p5.HighPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('highpass').\nSee p5.Filter for methods.
\n",
+ is_constructor: 1,
+ extends: 'p5.Filter'
+ },
+ 'p5.BandPass': {
+ name: 'p5.BandPass',
+ shortname: 'p5.BandPass',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 8758,
+ description:
+ "Constructor: new p5.BandPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('bandpass').\nSee p5.Filter for methods.
\n",
+ is_constructor: 1,
+ extends: 'p5.Filter'
+ },
+ 'p5.EQ': {
+ name: 'p5.EQ',
+ shortname: 'p5.EQ',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 8829,
+ description:
+ 'p5.EQ is an audio effect that performs the function of a multiband\naudio equalizer. Equalization is used to adjust the balance of\nfrequency compoenents of an audio signal. This process is commonly used\nin sound production and recording to change the waveform before it reaches\na sound output device. EQ can also be used as an audio effect to create\ninteresting distortions by filtering out parts of the spectrum. p5.EQ is\nbuilt using a chain of Web Audio Biquad Filter Nodes and can be\ninstantiated with 3 or 8 bands. Bands can be added or removed from\nthe EQ by directly modifying p5.EQ.bands (the array that stores filters).
\nThis class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n',
+ is_constructor: 1,
+ extends: 'p5.Effect',
+ params: [
+ {
+ name: '_eqsize',
+ description: 'Constructor will accept 3 or 8, defaults to 3
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'p5.EQ object',
+ type: 'Object'
+ },
+ example: [
+ "\n\nlet eq;\nlet band_names;\nlet band_index;\n\nlet soundFile, play;\n\nfunction preload() {\n soundFormats('mp3', 'ogg');\n soundFile = loadSound('assets/beat');\n}\n\nfunction setup() {\n eq = new p5.EQ(3);\n soundFile.disconnect();\n eq.process(soundFile);\n\n band_names = ['lows','mids','highs'];\n band_index = 0;\n play = false;\n textAlign(CENTER);\n}\n\nfunction draw() {\n background(30);\n noStroke();\n fill(255);\n text('click to kill',50,25);\n\n fill(255, 40, 255);\n textSize(26);\n text(band_names[band_index],50,55);\n\n fill(255);\n textSize(9);\n text('space = play/pause',50,80);\n}\n\n//If mouse is over canvas, cycle to the next band and kill the frequency\nfunction mouseClicked() {\n for (let i = 0; i < eq.bands.length; i++) {\n eq.bands[i].gain(0);\n }\n eq.bands[band_index].gain(-40);\n if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {\n band_index === 2 ? band_index = 0 : band_index++;\n }\n}\n\n//use space bar to trigger play / pause\nfunction keyPressed() {\n if (key===' ') {\n play = !play\n play ? soundFile.loop() : soundFile.pause();\n }\n}\n"
+ ]
+ },
+ 'p5.Panner3D': {
+ name: 'p5.Panner3D',
+ shortname: 'p5.Panner3D',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 9021,
+ description:
+ 'Panner3D is based on the \nWeb Audio Spatial Panner Node.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.
\nThe position is relative to an \nAudio Context Listener, which can be accessed\nby p5.soundOut.audiocontext.listener
\n',
+ is_constructor: 1
+ },
+ 'p5.Delay': {
+ name: 'p5.Delay',
+ shortname: 'p5.Delay',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 9472,
+ description:
+ 'Delay is an echo effect. It processes an existing sound source,\nand outputs a delayed version of that sound. The p5.Delay can\nproduce different effects depending on the delayTime, feedback,\nfilter, and type. In the example below, a feedback of 0.5 (the\ndefaul value) will produce a looping delay that decreases in\nvolume by 50% each repeat. A filter will cut out the high\nfrequencies so that the delay does not sound as piercing as the\noriginal source.
\nThis class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n',
+ extends: 'p5.Effect',
+ is_constructor: 1,
+ example: [
+ "\n\nlet noise, env, delay;\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n noise = new p5.Noise('brown');\n noise.amp(0);\n noise.start();\n\n delay = new p5.Delay();\n\n // delay.process() accepts 4 parameters:\n // source, delayTime, feedback, filter frequency\n // play with these numbers!!\n delay.process(noise, .12, .7, 2300);\n\n // play the noise with an envelope,\n // a series of fades ( time / value pairs )\n env = new p5.Envelope(.01, 0.2, .2, .1);\n}\n\n// mouseClick triggers envelope\nfunction mouseClicked() {\n // is mouse over canvas?\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n env.play(noise);\n }\n}\n"
+ ]
+ },
+ 'p5.Reverb': {
+ name: 'p5.Reverb',
+ shortname: 'p5.Reverb',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 9749,
+ description:
+ 'Reverb adds depth to a sound through a large number of decaying\nechoes. It creates the perception that sound is occurring in a\nphysical space. The p5.Reverb has paramters for Time (how long does the\nreverb last) and decayRate (how much the sound decays with each echo)\nthat can be set with the .set() or .process() methods. The p5.Convolver\nextends p5.Reverb allowing you to recreate the sound of actual physical\nspaces through convolution.
\nThis class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n',
+ extends: 'p5.Effect',
+ is_constructor: 1,
+ example: [
+ "\n\nlet soundFile, reverb;\nfunction preload() {\n soundFile = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n reverb = new p5.Reverb();\n soundFile.disconnect(); // so we'll only hear reverb...\n\n // connect soundFile to reverb, process w/\n // 3 second reverbTime, decayRate of 2%\n reverb.process(soundFile, 3, 2);\n soundFile.play();\n}\n"
+ ]
+ },
+ 'p5.Convolver': {
+ name: 'p5.Convolver',
+ shortname: 'p5.Convolver',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 9920,
+ description:
+ 'p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called \nconvolution.
\n\nConvolution multiplies any audio input by an "impulse response"\nto simulate the dispersion of sound over time. The impulse response is\ngenerated from an audio file that you provide. One way to\ngenerate an impulse response is to pop a balloon in a reverberant space\nand record the echo. Convolution can also be used to experiment with\nsound.
\n\nUse the method createConvolution(path) to instantiate a\np5.Convolver with a path to your impulse response audio file.
',
+ extends: 'p5.Effect',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'path',
+ description: 'path to a sound file
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: 'function to call when loading succeeds
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to call if loading fails.\n This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n // disconnect from master output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n\n sound.play();\n}\n"
+ ]
+ },
+ 'p5.Phrase': {
+ name: 'p5.Phrase',
+ shortname: 'p5.Phrase',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 10476,
+ description:
+ "A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.
\n\nPhrases must be added to a p5.Part for playback, and\neach part can play multiple phrases at the same time.\nFor example, one Phrase might be a kick drum, another\ncould be a snare, and another could be the bassline.
\n\nThe first parameter is a name so that the phrase can be\nmodified or deleted later. The callback is a a function that\nthis phrase will call at every step—for example it might be\ncalled playNote(value){}. The array determines\nwhich value is passed into the callback at each step of the\nphrase. It can be numbers, an object with multiple numbers,\nor a zero (0) indicates a rest so the callback won't be called).
",
+ is_constructor: 1,
+ params: [
+ {
+ name: 'name',
+ description: 'Name so that you can access the Phrase.
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description:
+ 'The name of a function that this phrase\n will call. Typically it will play a sound,\n and accept two parameters: a time at which\n to play the sound (in seconds from now),\n and a value from the sequence array. The\n time should be passed into the play() or\n start() method to ensure precision.
\n',
+ type: 'Function'
+ },
+ {
+ name: 'sequence',
+ description:
+ 'Array of values to pass into the callback\n at each step of the phrase.
\n',
+ type: 'Array'
+ }
+ ],
+ example: [
+ "\n\nlet mySound, myPhrase, myPart;\nlet pattern = [1,0,0,2,0,2,0,0];\nlet msg = 'click to play';\n\nfunction preload() {\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n noStroke();\n fill(255);\n textAlign(CENTER);\n masterVolume(0.1);\n\n myPhrase = new p5.Phrase('bbox', makeSound, pattern);\n myPart = new p5.Part();\n myPart.addPhrase(myPhrase);\n myPart.setBPM(60);\n}\n\nfunction draw() {\n background(0);\n text(msg, width/2, height/2);\n}\n\nfunction makeSound(time, playbackRate) {\n mySound.rate(playbackRate);\n mySound.play(time);\n}\n\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n myPart.start();\n msg = 'playing pattern';\n }\n}\n\n"
+ ]
+ },
+ 'p5.Part': {
+ name: 'p5.Part',
+ shortname: 'p5.Part',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 10561,
+ description:
+ 'A p5.Part plays back one or more p5.Phrases. Instantiate a part\nwith steps and tatums. By default, each step represents a 1/16th note.
\n\nSee p5.Phrase for more about musical timing.
',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'steps',
+ description: 'Steps in the part
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'tatums',
+ description:
+ 'Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet box, drum, myPart;\nlet boxPat = [1,0,0,2,0,2,0,0];\nlet drumPat = [0,1,1,0,2,0,1,0];\nlet msg = 'click to play';\n\nfunction preload() {\n box = loadSound('assets/beatbox.mp3');\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n noStroke();\n fill(255);\n textAlign(CENTER);\n masterVolume(0.1);\n\n let boxPhrase = new p5.Phrase('box', playBox, boxPat);\n let drumPhrase = new p5.Phrase('drum', playDrum, drumPat);\n myPart = new p5.Part();\n myPart.addPhrase(boxPhrase);\n myPart.addPhrase(drumPhrase);\n myPart.setBPM(60);\n masterVolume(0.1);\n}\n\nfunction draw() {\n background(0);\n text(msg, width/2, height/2);\n}\n\nfunction playBox(time, playbackRate) {\n box.rate(playbackRate);\n box.play(time);\n}\n\nfunction playDrum(time, playbackRate) {\n drum.rate(playbackRate);\n drum.play(time);\n}\n\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n myPart.start();\n msg = 'playing part';\n }\n}\n"
+ ]
+ },
+ 'p5.Score': {
+ name: 'p5.Score',
+ shortname: 'p5.Score',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 10814,
+ description:
+ 'A Score consists of a series of Parts. The parts will\nbe played back in order. For example, you could have an\nA part, a B part, and a C part, and play them back in this order\nnew p5.Score(a, a, b, a, c)
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'parts',
+ description:
+ 'One or multiple parts, to be played in sequence.
\n',
+ type: 'p5.Part',
+ optional: true,
+ multiple: true
+ }
+ ]
+ },
+ 'p5.SoundLoop': {
+ name: 'p5.SoundLoop',
+ shortname: 'p5.SoundLoop',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 10945,
+ description: 'SoundLoop
\n',
+ is_constructor: 1,
+ params: [
+ {
+ name: 'callback',
+ description:
+ 'this function will be called on each iteration of theloop
\n',
+ type: 'Function'
+ },
+ {
+ name: 'interval',
+ description:
+ 'amount of time or beats for each iteration of the loop\n defaults to 1
\n',
+ type: 'Number|String',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet click;\nlet looper1;\n\nfunction preload() {\n click = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n //the looper's callback is passed the timeFromNow\n //this value should be used as a reference point from\n //which to schedule sounds\n looper1 = new p5.SoundLoop(function(timeFromNow){\n click.play(timeFromNow);\n background(255 * (looper1.iterations % 2));\n }, 2);\n\n //stop after 10 iteratios;\n looper1.maxIterations = 10;\n //start the loop\n looper1.start();\n}\n"
+ ]
+ },
+ 'p5.Compressor': {
+ name: 'p5.Compressor',
+ shortname: 'p5.Compressor',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 11205,
+ description:
+ 'Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer, \nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to \npeaks in volume) and is especially useful when many sounds are played \nat once. Compression can be used on indivudal sound sources in addition\nto the master output.
\nThis class extends p5.Effect. \nMethods amp(), chain(), \ndrywet(), connect(), and \ndisconnect() are available.
\n',
+ is_constructor: 1,
+ extends: 'p5.Effect'
+ },
+ 'p5.SoundRecorder': {
+ name: 'p5.SoundRecorder',
+ shortname: 'p5.SoundRecorder',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 11417,
+ description:
+ 'Record sounds for playback and/or to save as a .wav file.\nThe p5.SoundRecorder records all sound output from your sketch,\nor can be assigned a specific source with setInput().
\nThe record() method accepts a p5.SoundFile as a parameter.\nWhen playback is stopped (either after the given amount of time,\nor with the stop() method), the p5.SoundRecorder will send its\nrecording to that p5.SoundFile for playback.
',
+ is_constructor: 1,
+ example: [
+ "\n\nlet mic, recorder, soundFile;\nlet state = 0;\n\nfunction setup() {\n background(200);\n // create an audio in\n mic = new p5.AudioIn();\n\n // prompts user to enable their browser mic\n mic.start();\n\n // create a sound recorder\n recorder = new p5.SoundRecorder();\n\n // connect the mic to the recorder\n recorder.setInput(mic);\n\n // this sound file will be used to\n // playback & save the recording\n soundFile = new p5.SoundFile();\n\n text('keyPress to record', 20, 20);\n}\n\nfunction keyPressed() {\n // make sure user enabled the mic\n if (state === 0 && mic.enabled) {\n\n // record to our p5.SoundFile\n recorder.record(soundFile);\n\n background(255,0,0);\n text('Recording!', 20, 20);\n state++;\n }\n else if (state === 1) {\n background(0,255,0);\n\n // stop recorder and\n // send result to soundFile\n recorder.stop();\n\n text('Stopped', 20, 20);\n state++;\n }\n\n else if (state === 2) {\n soundFile.play(); // play the result!\n save(soundFile, 'mySound.wav');\n state++;\n }\n}\n "
+ ]
+ },
+ 'p5.PeakDetect': {
+ name: 'p5.PeakDetect',
+ shortname: 'p5.PeakDetect',
+ classitems: [],
+ plugins: [],
+ extensions: [],
+ plugin_for: [],
+ extension_for: [],
+ module: 'p5.sound',
+ submodule: 'p5.sound',
+ namespace: '',
+ file: 'lib/addons/p5.sound.js',
+ line: 11655,
+ description:
+ '
PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n
\n\nTo use p5.PeakDetect, call update in the draw loop\nand pass in a p5.FFT object.\n
\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between freq1 and freq2.\n
threshold is the threshold for detecting a peak,\nscaled between 0 and 1. It is logarithmic, so 0.1 is half as loud\nas 1.0.
\nThe update method is meant to be run in the draw loop, and\nframes determines how many loops must pass before\nanother peak can be detected.\nFor example, if the frameRate() = 60, you could detect the beat of a\n120 beat-per-minute song with this equation:\n framesPerPeak = 60 / (estimatedBPM / 60 );\n
\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by
lowFrequency - defaults to 20Hz
\n', + type: 'Number', + optional: true + }, + { + name: 'freq2', + description: 'highFrequency - defaults to 20000 Hz
\n', + type: 'Number', + optional: true + }, + { + name: 'threshold', + description: + 'Threshold for detecting a beat between 0 and 1\n scaled logarithmically where 0.1 is 1/2 the loudness\n of 1.0. Defaults to 0.35.
\n', + type: 'Number', + optional: true + }, + { + name: 'framesPerPeak', + description: 'Defaults to 20.
\n', + type: 'Number', + optional: true + } + ], + example: [ + "\n\n\nlet cnv, soundFile, fft, peakDetect;\nlet ellipseWidth = 10;\n\nfunction preload() {\n soundFile = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n\n // p5.PeakDetect requires a p5.FFT\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n}\n\nfunction draw() {\n background(0);\n text('click to play/pause', width/2, height/2);\n\n // peakDetect accepts an fft post-analysis\n fft.analyze();\n peakDetect.update(fft);\n\n if ( peakDetect.isDetected ) {\n ellipseWidth = 50;\n } else {\n ellipseWidth *= 0.95;\n }\n\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// toggle play/stop when canvas is clicked\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n }\n}\nA gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.
\n', + is_constructor: 1, + example: [ + "\n\n\n // load two soundfile and crossfade beetween them\n let sound1,sound2;\n let gain1, gain2, gain3;\n\n function preload(){\n soundFormats('ogg', 'mp3');\n sound1 = loadSound('assets/Damscray_-_Dancing_Tiger_01');\n sound2 = loadSound('assets/beat.mp3');\n }\n\n function setup() {\n createCanvas(400,200);\n\n // create a 'master' gain to which we will connect both soundfiles\n gain3 = new p5.Gain();\n gain3.connect();\n\n // setup first sound for playing\n sound1.rate(1);\n sound1.loop();\n sound1.disconnect(); // diconnect from p5 output\n\n gain1 = new p5.Gain(); // setup a gain node\n gain1.setInput(sound1); // connect the first sound to its input\n gain1.connect(gain3); // connect its output to the 'master'\n\n sound2.rate(1);\n sound2.disconnect();\n sound2.loop();\n\n gain2 = new p5.Gain();\n gain2.setInput(sound2);\n gain2.connect(gain3);\n\n }\n\n function draw(){\n background(180);\n\n // calculate the horizontal distance beetween the mouse and the right of the screen\n let d = dist(mouseX,0,width,0);\n\n // map the horizontal position of the mouse to values useable for volume control of sound1\n let vol1 = map(mouseX,0,width,0,1);\n let vol2 = 1-vol1; // when sound1 is loud, sound2 is quiet and vice versa\n\n gain1.amp(vol1,0.5,0);\n gain2.amp(vol2,0.5,0);\n\n // map the vertical position of the mouse to values useable for 'master volume control'\n let vol3 = map(mouseY,0,height,0,1);\n gain3.amp(vol3,0.5,0);\n }\nBase class for monophonic synthesizers. Any extensions of this class\nshould follow the API and implement the methods below in order to \nremain compatible with p5.PolySynth();
\n', + is_constructor: 1 + }, + 'p5.MonoSynth': { + name: 'p5.MonoSynth', + shortname: 'p5.MonoSynth', + classitems: [], + plugins: [], + extensions: [], + plugin_for: [], + extension_for: [], + module: 'p5.sound', + submodule: 'p5.sound', + namespace: '', + file: 'lib/addons/p5.sound.js', + line: 12073, + description: + 'A MonoSynth is used as a single voice for sound synthesis.\nThis is a class to be used in conjunction with the PolySynth\nclass. Custom synthetisers should be built inheriting from\nthis class.
\n', + is_constructor: 1, + example: [ + '\n\nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n\n monoSynth = new p5.MonoSynth();\n\n textAlign(CENTER);\n text(\'click to play\', width/2, height/2);\n}\n\nfunction playSynth() {\n // time from now (in seconds)\n let time = 0;\n // note duration (in seconds)\n let dur = 0.25;\n // velocity (volume, from 0 to 1)\n let v = 0.2;\n\n monoSynth.play("G3", v, time, dur);\n monoSynth.play("C4", v, time += dur, dur);\n\n background(random(255), random(255), 255);\n text(\'click to play\', width/2, height/2);\n}\nAn AudioVoice is used as a single voice for sound synthesis.\nThe PolySynth class holds an array of AudioVoice, and deals\nwith voices allocations, with setting notes to be played, and\nparameters to be set.
\n', + is_constructor: 1, + params: [ + { + name: 'synthVoice', + description: + 'A monophonic synth voice inheriting\n the AudioVoice class. Defaults to p5.MonoSynth
\n', + type: 'Number', + optional: true + }, + { + name: 'maxVoices', + description: 'Number of voices, defaults to 8;
\n', + type: 'Number', + optional: true + } + ], + example: [ + '\n\nlet polySynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n\n polySynth = new p5.PolySynth();\n\n textAlign(CENTER);\n text(\'click to play\', width/2, height/2);\n}\n\nfunction playSynth() {\n // note duration (in seconds)\n let dur = 1.5;\n\n // time from now (in seconds)\n let time = 0;\n\n // velocity (volume, from 0 to 1)\n let vel = 0.1;\n\n // notes can overlap with each other\n polySynth.play("G2", vel, 0, dur);\n polySynth.play("C3", vel, time += 1/3, dur);\n polySynth.play("G3", vel, time += 1/3, dur);\n\n background(random(255), random(255), 255);\n text(\'click to play\', width/2, height/2);\n}\nA Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\nKevin Ennis
\nThis class extends p5.Effect. \nMethods amp(), chain(), \ndrywet(), connect(), and \ndisconnect() are available.
\n', + extends: 'p5.Effect', + is_constructor: 1, + params: [ + { + name: 'amount', + description: + 'Unbounded distortion amount.\n Normal values range from 0-1.
\n', + type: 'Number', + optional: true, + optdefault: '0.25' + }, + { + name: 'oversample', + description: ''none', '2x', or '4x'.
\n', + type: 'String', + optional: true, + optdefault: "'none'" + } + ] + } + }, + elements: {}, + classitems: [ + { + file: 'src/color/color_conversion.js', + line: 8, + description: + 'Conversions adapted from http://www.easyrgb.com/en/math.php.
\nIn these functions, hue is always in the range [0, 1], just like all other\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\ninterchangeably.
\n', + class: 'p5', + module: 'Color', + submodule: 'Color Conversion' + }, + { + file: 'src/color/color_conversion.js', + line: 19, + description: 'Convert an HSBA array to HSLA.
\n', + class: 'p5', + module: 'Color', + submodule: 'Color Conversion' + }, + { + file: 'src/color/color_conversion.js', + line: 45, + description: 'Convert an HSBA array to RGBA.
\n', + class: 'p5', + module: 'Color', + submodule: 'Color Conversion' + }, + { + file: 'src/color/color_conversion.js', + line: 100, + description: 'Convert an HSLA array to HSBA.
\n', + class: 'p5', + module: 'Color', + submodule: 'Color Conversion' + }, + { + file: 'src/color/color_conversion.js', + line: 123, + description: + 'Convert an HSLA array to RGBA.
\nWe need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.
\n', + class: 'p5', + module: 'Color', + submodule: 'Color Conversion' + }, + { + file: 'src/color/color_conversion.js', + line: 187, + description: 'Convert an RGBA array to HSBA.
\n', + class: 'p5', + module: 'Color', + submodule: 'Color Conversion' + }, + { + file: 'src/color/color_conversion.js', + line: 226, + description: 'Convert an RGBA array to HSLA.
\n', + class: 'p5', + module: 'Color', + submodule: 'Color Conversion' + }, + { + file: 'src/color/creating_reading.js', + line: 14, + description: + 'Extracts the alpha value from a color or pixel array.
\n', + itemtype: 'method', + name: 'alpha', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + return: { + description: 'the alpha value', + type: 'Number' + }, + example: [ + "\n\n
"
+ ],
+ alt:
+ 'Left half of canvas light blue and right half light charcoal grey.\nLeft half of canvas light purple and right half a royal blue.\nLeft half of canvas salmon pink and the right half white.\nYellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left canvas, black ellipse in bottom right,both 80x80.\nBright fuchsia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and light green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.\nblue rect on left and green on right, both with black outlines & 35x60.\nsalmon pink rect on left and black on right, both 35x60.\n4 rects, tan, brown, brownish purple and purple, with white outlines & 20x60.\nlight pastel green rect on left and dark grey rect on right, both 35x60.\nyellow rect on left and red rect on right, both with black outlines & 35x60.\ngrey canvas\ndeep pink rect on left and grey rect on right, both 35x60.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/creating_reading.js',
+ line: 59,
+ description:
+ '\nnoStroke();\nlet c = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nlet value = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n\nExtracts the blue value from a color or pixel array.
\n', + itemtype: 'method', + name: 'blue', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + return: { + description: 'the blue value', + type: 'Number' + }, + example: [ + "\n\n
"
+ ],
+ alt: 'Left half of canvas light purple and right half a royal blue.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/creating_reading.js',
+ line: 89,
+ description:
+ '\nlet c = color(175, 100, 220); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet blueValue = blue(c); // Get blue in 'c'\nprint(blueValue); // Prints \"220.0\"\nfill(0, 0, blueValue); // Use 'blueValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n\nExtracts the HSB brightness value from a color or pixel array.
\n', + itemtype: 'method', + name: 'brightness', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + return: { + description: 'the brightness value', + type: 'Number' + }, + example: [ + "\n\n
\n\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n\n\n
"
+ ],
+ alt:
+ 'Left half of canvas salmon pink and the right half white.\nLeft half of canvas yellow at half brightness and the right gray .',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/creating_reading.js',
+ line: 132,
+ description:
+ '\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color('hsb(60, 100%, 50%)');\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // A 'value' of 50% is 127.5\nfill(value);\nrect(50, 20, 35, 60);\n\nCreates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent colorMode(). The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.\n
\nNote that if only one value is provided to color(), it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.\n
\nIf a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.
\n
\n\n\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nrect(30, 20, 55, 55); // Draw rectangle\n\n\n
\n\n\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nellipse(25, 25, 80, 80); // Draw left circle\n\n// Using only one value with color()\n// generates a grayscale value.\nc = color(65); // Update 'c' with grayscale value\nfill(c); // Use updated 'c' as fill color\nellipse(75, 75, 80, 80); // Draw right circle\n\n\n
\n\n\n// Named SVG & CSS colors may be used,\nlet c = color('magenta');\nfill(c); // Use 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nrect(20, 20, 60, 60); // Draw rectangle\n\n\n
\n\n\n// as can hex color codes:\nnoStroke(); // Don't draw a stroke around shapes\nlet c = color('#0f0');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('#00ff00');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n\n\n
\n\n\n// RGB and RGBA color strings are also supported:\n// these all set to the same color (solid blue)\nlet c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('rgb(0,0,255)');\nfill(c); // Use 'c' as fill color\nrect(10, 10, 35, 35); // Draw rectangle\n\nc = color('rgb(0%, 0%, 100%)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 35, 35); // Draw rectangle\n\nc = color('rgba(0, 0, 255, 1)');\nfill(c); // Use updated 'c' as fill color\nrect(10, 55, 35, 35); // Draw rectangle\n\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 55, 35, 35); // Draw rectangle\n\n\n
\n\n\n// HSL color is also supported and can be specified\n// by value\nlet c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('hsl(160, 100%, 50%)');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n\n\n
\n\n\n// HSB color is also supported and can be specified\n// by value\nlet c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('hsb(160, 100%, 50%)');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n\n\n
"
+ ],
+ alt:
+ 'Yellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.\nBright fuchsia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and lighter green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading',
+ overloads: [
+ {
+ line: 132,
+ params: [
+ {
+ name: 'gray',
+ description:
+ '\nlet c; // Declare color 'c'\nnoStroke(); // Don't draw a stroke around shapes\n\n// If no colorMode is specified, then the\n// default of RGB with scale of 0-255 is used.\nc = color(50, 55, 100); // Create a color for 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(0, 10, 45, 80); // Draw left rect\n\ncolorMode(HSB, 100); // Use HSB with scale of 0-100\nc = color(50, 55, 100); // Update 'c' with new color\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw right rect\n\nnumber specifying value between white\n and black.
\n', + type: 'Number' + }, + { + name: 'alpha', + description: + 'alpha value relative to current color range\n (default is 0-255)
\n', + type: 'Number', + optional: true + } + ], + return: { + description: 'resulting color', + type: 'p5.Color' + } + }, + { + line: 291, + params: [ + { + name: 'v1', + description: + 'red or hue value relative to\n the current color range
\n', + type: 'Number' + }, + { + name: 'v2', + description: + 'green or saturation value\n relative to the current color range
\n', + type: 'Number' + }, + { + name: 'v3', + description: + 'blue or brightness value\n relative to the current color range
\n', + type: 'Number' + }, + { + name: 'alpha', + description: '', + type: 'Number', + optional: true + } + ], + return: { + description: '', + type: 'p5.Color' + } + }, + { + line: 303, + params: [ + { + name: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + return: { + description: '', + type: 'p5.Color' + } + }, + { + line: 308, + params: [ + { + name: 'values', + description: + 'an array containing the red,green,blue &\n and alpha components of the color
\n', + type: 'Number[]' + } + ], + return: { + description: '', + type: 'p5.Color' + } + }, + { + line: 314, + params: [ + { + name: 'color', + description: '', + type: 'p5.Color' + } + ], + return: { + description: '', + type: 'p5.Color' + } + } + ] + }, + { + file: 'src/color/creating_reading.js', + line: 330, + description: + 'Extracts the green value from a color or pixel array.
\n', + itemtype: 'method', + name: 'green', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + return: { + description: 'the green value', + type: 'Number' + }, + example: [ + "\n\n
"
+ ],
+ alt:
+ 'blue rect on left and green on right, both with black outlines & 35x60.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/creating_reading.js',
+ line: 361,
+ description:
+ '\nlet c = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet greenValue = green(c); // Get green in 'c'\nprint(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n\nExtracts the hue value from a color or pixel array.
\nHue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)
\n', + itemtype: 'method', + name: 'hue', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + return: { + description: 'the hue', + type: 'Number' + }, + example: [ + '\n\n
'
+ ],
+ alt: 'salmon pink rect on left and black on right, both 35x60.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/creating_reading.js',
+ line: 398,
+ description:
+ '\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = hue(c); // Sets \'value\' to "0"\nfill(value);\nrect(50, 20, 35, 60);\n\nBlends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of lerp(),\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.\n
\nThe way that colours are interpolated depends on the current color mode.
interpolate from this color
\n', + type: 'p5.Color' + }, + { + name: 'c2', + description: 'interpolate to this color
\n', + type: 'p5.Color' + }, + { + name: 'amt', + description: 'number between 0 and 1
\n', + type: 'Number' + } + ], + return: { + description: 'interpolated color', + type: 'p5.Color' + }, + example: [ + '\n\n
'
+ ],
+ alt:
+ '4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/creating_reading.js',
+ line: 489,
+ description:
+ '\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nlet from = color(218, 165, 32);\nlet to = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\nlet interA = lerpColor(from, to, 0.33);\nlet interB = lerpColor(from, to, 0.66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n\nExtracts the HSL lightness value from a color or pixel array.
\n', + itemtype: 'method', + name: 'lightness', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + return: { + description: 'the lightness', + type: 'Number' + }, + example: [ + "\n\n
"
+ ],
+ alt:
+ 'light pastel green rect on left and dark grey rect on right, both 35x60.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/creating_reading.js',
+ line: 519,
+ description: '\nnoStroke();\ncolorMode(HSL);\nlet c = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n\nExtracts the red value from a color or pixel array.
\n', + itemtype: 'method', + name: 'red', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + return: { + description: 'the red value', + type: 'Number' + }, + example: [ + "\n\n
\n\n\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet redValue = red(c); // Get red in 'c'\nprint(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n\n\n
"
+ ],
+ alt:
+ 'yellow rect on left and red rect on right, both with black outlines and 35x60.\ngrey canvas',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/creating_reading.js',
+ line: 559,
+ description:
+ '\ncolorMode(RGB, 255); // Sets the range for red, green, and blue to 255\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1); // Sets the range for red, green, and blue to 1\nlet myColor = red(c);\nprint(myColor); // 0.4980392156862745\n\nExtracts the saturation value from a color or pixel array.
\nSaturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.
\n', + itemtype: 'method', + name: 'saturation', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + return: { + description: 'the saturation value', + type: 'Number' + }, + example: [ + "\n\n
"
+ ],
+ alt: 'deep pink rect on left and grey rect on right, both 35x60.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/p5.Color.js',
+ line: 50,
+ description:
+ '\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n\nThis function returns the color formatted as a string. This can be useful\nfor debugging, or for using p5.js with other libraries.
\n', + itemtype: 'method', + name: 'toString', + params: [ + { + name: 'format', + description: + 'How the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
\n', + type: 'String', + optional: true + } + ], + return: { + description: 'the formatted string', + type: 'String' + }, + example: [ + "\n\n
"
+ ],
+ alt: 'canvas with text representation of color',
+ class: 'p5.Color',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/p5.Color.js',
+ line: 251,
+ description:
+ '\nlet myColor;\nfunction setup() {\n createCanvas(200, 200);\n stroke(255);\n myColor = color(100, 100, 250);\n fill(myColor);\n}\n\nfunction draw() {\n rotate(HALF_PI);\n text(myColor.toString(), 0, -5);\n text(myColor.toString('#rrggbb'), 0, -30);\n text(myColor.toString('rgba%'), 0, -55);\n}\n\nThe setRed function sets the red component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.
\n', + itemtype: 'method', + name: 'setRed', + params: [ + { + name: 'red', + description: 'the new red value
\n', + type: 'Number' + } + ], + example: [ + '\n\n
'
+ ],
+ alt: 'canvas with gradually changing background color',
+ class: 'p5.Color',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/p5.Color.js',
+ line: 280,
+ description:
+ '\nlet backgroundColor;\n\nfunction setup() {\n backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n background(backgroundColor);\n}\n\nThe setGreen function sets the green component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.
\n', + itemtype: 'method', + name: 'setGreen', + params: [ + { + name: 'green', + description: 'the new green value
\n', + type: 'Number' + } + ], + example: [ + '\n\n
'
+ ],
+ alt: 'canvas with gradually changing background color',
+ class: 'p5.Color',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/p5.Color.js',
+ line: 309,
+ description:
+ '\nlet backgroundColor;\n\nfunction setup() {\n backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n background(backgroundColor);\n}\n\nThe setBlue function sets the blue component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.
\n', + itemtype: 'method', + name: 'setBlue', + params: [ + { + name: 'blue', + description: 'the new blue value
\n', + type: 'Number' + } + ], + example: [ + '\n\n
'
+ ],
+ alt: 'canvas with gradually changing background color',
+ class: 'p5.Color',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/p5.Color.js',
+ line: 338,
+ description:
+ '\nlet backgroundColor;\n\nfunction setup() {\n backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n background(backgroundColor);\n}\n\nThe setAlpha function sets the transparency (alpha) value of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.
\n', + itemtype: 'method', + name: 'setAlpha', + params: [ + { + name: 'alpha', + description: 'the new alpha value
\n', + type: 'Number' + } + ], + example: [ + '\n\n
'
+ ],
+ alt: 'circle behind a square with gradually changing opacity',
+ class: 'p5.Color',
+ module: 'Color',
+ submodule: 'Creating & Reading'
+ },
+ {
+ file: 'src/color/p5.Color.js',
+ line: 421,
+ description:
+ '\nlet squareColor;\n\nfunction setup() {\n ellipseMode(CORNERS);\n strokeWeight(4);\n squareColor = color(100, 50, 150);\n}\n\nfunction draw() {\n background(255);\n\n noFill();\n stroke(0);\n ellipse(10, 10, width - 10, height - 10);\n\n squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n fill(squareColor);\n noStroke();\n rect(13, 13, width - 26, height - 26);\n}\n\nHue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.
\n', + class: 'p5.Color', + module: 'Color', + submodule: 'Creating & Reading' + }, + { + file: 'src/color/p5.Color.js', + line: 452, + description: + 'Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.
\n', + class: 'p5.Color', + module: 'Color', + submodule: 'Creating & Reading' + }, + { + file: 'src/color/p5.Color.js', + line: 471, + description: 'CSS named colors.
\n', + class: 'p5.Color', + module: 'Color', + submodule: 'Creating & Reading' + }, + { + file: 'src/color/p5.Color.js', + line: 625, + description: + 'These regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.
\nNote that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.
\n', + class: 'p5.Color', + module: 'Color', + submodule: 'Creating & Reading' + }, + { + file: 'src/color/p5.Color.js', + line: 638, + description: + 'Full color string patterns. The capture groups are necessary.
\n', + class: 'p5.Color', + module: 'Color', + submodule: 'Creating & Reading' + }, + { + file: 'src/color/p5.Color.js', + line: 987, + description: + 'For HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.
\n', + class: 'p5.Color', + module: 'Color', + submodule: 'Creating & Reading' + }, + { + file: 'src/color/setting.js', + line: 13, + description: + 'The background() function sets the color used for the background of the\np5.js canvas. The default background is transparent. This function is\ntypically used within draw() to clear the display window at the beginning\nof each frame, but it can be used inside setup() to set the background on\nthe first frame of animation or if the background need only be set once.\n
\nThe color is either specified in terms of the RGB, HSB, or HSL color\ndepending on the current colorMode. (The default color space is RGB, with\neach value in the range from 0 to 255). The alpha range by default is also 0 to 255.\n
\nIf a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.\n
\nA p5.Color object can also be provided to set the background color.\n
\nA p5.Image can also be provided to set the background image.
\n
\n\n\n// Grayscale integer value\nbackground(51);\n\n\n
\n\n\n// R, G & B integer values\nbackground(255, 204, 0);\n\n\n
\n\n\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n\n\n
\n\n\n// Named SVG/CSS color string\nbackground('red');\n\n\n
\n\n\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n\n\n
\n\n\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n\n\n
\n\n\n// integer RGB notation\nbackground('rgb(0,255,0)');\n\n\n
\n\n\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n\n\n
\n\n\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n\n\n
\n\n\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n\n\n
"
+ ],
+ alt:
+ 'canvas with darkest charcoal grey background.\ncanvas with yellow background.\ncanvas with royal blue background.\ncanvas with red background.\ncanvas with pink background.\ncanvas with black background.\ncanvas with bright green background.\ncanvas with soft green background.\ncanvas with red background.\ncanvas with light purple background.\ncanvas with blue background.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting',
+ overloads: [
+ {
+ line: 13,
+ params: [
+ {
+ name: 'color',
+ description:
+ '\n// p5 Color object\nbackground(color(0, 0, 255));\n\nany value created by the color() function
\n', + type: 'p5.Color' + } + ], + chainable: 1 + }, + { + line: 129, + params: [ + { + name: 'colorstring', + description: + 'color string, possible formats include: integer\n rgb() or rgba(), percentage rgb() or rgba(),\n 3-digit hex, 6-digit hex
\n', + type: 'String' + }, + { + name: 'a', + description: + 'opacity of the background relative to current\n color range (default is 0-255)
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 139, + params: [ + { + name: 'gray', + description: 'specifies a value between white and black
\n', + type: 'Number' + }, + { + name: 'a', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 146, + params: [ + { + name: 'v1', + description: + 'red or hue value (depending on the current color\n mode)
\n', + type: 'Number' + }, + { + name: 'v2', + description: + 'green or saturation value (depending on the current\n color mode)
\n', + type: 'Number' + }, + { + name: 'v3', + description: + 'blue or brightness value (depending on the current\n color mode)
\n', + type: 'Number' + }, + { + name: 'a', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 158, + params: [ + { + name: 'values', + description: + 'an array containing the red, green, blue\n and alpha components of the color
\n', + type: 'Number[]' + } + ], + chainable: 1 + }, + { + line: 165, + params: [ + { + name: 'image', + description: + 'image created with loadImage() or createImage(),\n to set as background\n (must be same size as the sketch window)
\n', + type: 'p5.Image' + }, + { + name: 'a', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/color/setting.js', + line: 179, + description: + 'Clears the pixels within a buffer. This function only clears the canvas.\nIt will not clear objects created by createX() methods such as\ncreateVideo() or createDiv().\nUnlike the main graphics context, pixels in additional graphics areas created\nwith createGraphics() can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.
\n', + itemtype: 'method', + name: 'clear', + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ '20x20 white ellipses are continually drawn at mouse x and y coordinates.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting'
+ },
+ {
+ file: 'src/color/setting.js',
+ line: 218,
+ description:
+ '\n// Clear the screen on mouse press.\nfunction setup() {\n createCanvas(100, 100);\n}\n\nfunction draw() {\n ellipse(mouseX, mouseY, 20, 20);\n}\n\nfunction mousePressed() {\n clear();\n}\n\ncolorMode() changes the way p5.js interprets color data. By default, the\nparameters for fill(), stroke(), background(), and color() are defined by\nvalues between 0 and 255 using the RGB color model. This is equivalent to\nsetting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB\nsystem instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You\ncan also use HSL.\n
\nNote: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.
\n
\n\n\nnoStroke();\ncolorMode(RGB, 100);\nfor (let i = 0; i < 100; i++) {\n for (let j = 0; j < 100; j++) {\n stroke(i, j, 0);\n point(i, j);\n }\n}\n\n\n
\n\n\nnoStroke();\ncolorMode(HSB, 100);\nfor (let i = 0; i < 100; i++) {\n for (let j = 0; j < 100; j++) {\n stroke(i, j, 100);\n point(i, j);\n }\n}\n\n\n
\n\n\ncolorMode(RGB, 255);\nlet c = color(127, 255, 0);\n\ncolorMode(RGB, 1);\nlet myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n\n\n
'
+ ],
+ alt:
+ 'Green to red gradient from bottom L to top R. shading originates from top left.\nRainbow gradient from left to right. Brightness increasing to white at top.\nunknown image.\n50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting',
+ overloads: [
+ {
+ line: 218,
+ params: [
+ {
+ name: 'mode',
+ description:
+ '\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\n\nstrokeWeight(4);\nstroke(255, 0, 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n\neither RGB, HSB or HSL, corresponding to\n Red/Green/Blue and Hue/Saturation/Brightness\n (or Lightness)
\n', + type: 'Constant' + }, + { + name: 'max', + description: 'range for all values
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 295, + params: [ + { + name: 'mode', + description: '', + type: 'Constant' + }, + { + name: 'max1', + description: + 'range for the red or hue depending on the\n current color mode
\n', + type: 'Number' + }, + { + name: 'max2', + description: + 'range for the green or saturation depending\n on the current color mode
\n', + type: 'Number' + }, + { + name: 'max3', + description: + 'range for the blue or brightness/lightness\n depending on the current color mode
\n', + type: 'Number' + }, + { + name: 'maxA', + description: 'range for the alpha
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/color/setting.js', + line: 339, + description: + 'Sets the color used to fill shapes. For example, if you run\nfill(204, 102, 0), all shapes drawn after the fill command will be filled with the color orange. This\ncolor is either specified in terms of the RGB or HSB color depending on\nthe current colorMode(). (The default color space is RGB, with each value\nin the range from 0 to 255). The alpha range by default is also 0 to 255.\n
\nIf a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.\n
\nA p5 Color object can also be provided to set the fill color.
\n
\n\n\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n\n\n
"
+ ],
+ alt:
+ '60x60 dark charcoal grey rect with black outline in center of canvas.\n60x60 yellow rect with black outline in center of canvas.\n60x60 royal blue rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 pink rect with black outline in center of canvas.\n60x60 black rect with black outline in center of canvas.\n60x60 light green rect with black outline in center of canvas.\n60x60 soft green rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 dark fuchsia rect with black outline in center of canvas.\n60x60 blue rect with black outline in center of canvas.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting',
+ overloads: [
+ {
+ line: 339,
+ params: [
+ {
+ name: 'v1',
+ description:
+ '\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n\nred or hue value relative to\n the current color range
\n', + type: 'Number' + }, + { + name: 'v2', + description: + 'green or saturation value\n relative to the current color range
\n', + type: 'Number' + }, + { + name: 'v3', + description: + 'blue or brightness value\n relative to the current color range
\n', + type: 'Number' + }, + { + name: 'alpha', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 464, + params: [ + { + name: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + line: 470, + params: [ + { + name: 'gray', + description: 'a gray value
\n', + type: 'Number' + }, + { + name: 'alpha', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 477, + params: [ + { + name: 'values', + description: + 'an array containing the red,green,blue &\n and alpha components of the color
\n', + type: 'Number[]' + } + ], + chainable: 1 + }, + { + line: 484, + params: [ + { + name: 'color', + description: 'the fill color
\n', + type: 'p5.Color' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/color/setting.js', + line: 496, + description: + 'Disables filling geometry. If both noStroke() and noFill() are called,\nnothing will be drawn to the screen.
\n', + itemtype: 'method', + name: 'noFill', + chainable: 1, + example: [ + "\n\n
\n\n\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n\n\n
"
+ ],
+ alt:
+ 'white rect top middle and noFill rect center. Both 60x60 with black outlines.\nblack canvas with purple cube wireframe spinning',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting'
+ },
+ {
+ file: 'src/color/setting.js',
+ line: 537,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(0);\n noFill();\n stroke(100, 100, 240);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(45, 45, 45);\n}\n\nDisables drawing the stroke (outline). If both noStroke() and noFill()\nare called, nothing will be drawn to the screen.
\n', + itemtype: 'method', + name: 'noStroke', + chainable: 1, + example: [ + "\n\n
\n\n\nnoStroke();\nrect(20, 20, 60, 60);\n\n\n
"
+ ],
+ alt:
+ '60x60 white rect at center. no outline.\nblack canvas with pink cube spinning',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting'
+ },
+ {
+ file: 'src/color/setting.js',
+ line: 577,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(0);\n noStroke();\n fill(240, 150, 150);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(45, 45, 45);\n}\n\nSets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent colorMode() (the default color space is RGB, with each value in\nthe range from 0 to 255). The alpha range by default is also 0 to 255.\n
\nIf a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.\n
\nA p5 Color object can also be provided to set the stroke color.
\n
\n\n\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n\n
\n\n\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n\n
"
+ ],
+ alt:
+ '60x60 white rect at center. Dark charcoal grey outline.\n60x60 white rect at center. Yellow outline.\n60x60 white rect at center. Royal blue outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Pink outline.\n60x60 white rect at center. Black outline.\n60x60 white rect at center. Bright green outline.\n60x60 white rect at center. Soft green outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Dark fuchsia outline.\n60x60 white rect at center. Blue outline.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting',
+ overloads: [
+ {
+ line: 577,
+ params: [
+ {
+ name: 'v1',
+ description:
+ '\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\nred or hue value relative to\n the current color range
\n', + type: 'Number' + }, + { + name: 'v2', + description: + 'green or saturation value\n relative to the current color range
\n', + type: 'Number' + }, + { + name: 'v3', + description: + 'blue or brightness value\n relative to the current color range
\n', + type: 'Number' + }, + { + name: 'alpha', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 716, + params: [ + { + name: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + line: 722, + params: [ + { + name: 'gray', + description: 'a gray value
\n', + type: 'Number' + }, + { + name: 'alpha', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 729, + params: [ + { + name: 'values', + description: + 'an array containing the red,green,blue &\n and alpha components of the color
\n', + type: 'Number[]' + } + ], + chainable: 1 + }, + { + line: 736, + params: [ + { + name: 'color', + description: 'the stroke color
\n', + type: 'p5.Color' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/color/setting.js', + line: 749, + description: + 'All drawing that follows erase() will subtract from the canvas.\nErased areas will reveal the web page underneath the canvas.\nErasing can be canceled with noErase().\n
\nDrawing done with image()\nand background() will not be affected by erase()\n
A number (0-255) for the strength of erasing for a shape's fill.\n This will default to 255 when no argument is given, which\n is full strength.
\n', + type: 'Number', + optional: true + }, + { + name: 'strengthStroke', + description: + 'A number (0-255) for the strength of erasing for a shape's stroke.\n This will default to 255 when no argument is given, which\n is full strength.
\n', + type: 'Number', + optional: true + } + ], + chainable: 1, + example: [ + "\n\n
\n\n\nbackground(100, 100, 250);\nfill(250, 100, 100);\nrect(20, 20, 60, 60);\nerase();\nellipse(25, 30, 30);\nnoErase();\n\n\n
\n\n\nbackground(150, 250, 150);\nfill(100, 100, 250);\nrect(20, 20, 60, 60);\nstrokeWeight(5);\nerase(150, 255);\ntriangle(50, 10, 70, 50, 90, 10);\nnoErase();\n\n\n
"
+ ],
+ alt:
+ '60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.\n60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.\n60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting'
+ },
+ {
+ file: 'src/color/setting.js',
+ line: 829,
+ description:
+ '\nfunction setup() {\n smooth();\n createCanvas(100, 100, WEBGL);\n // Make a <p> element and put it behind the canvas\n let p = createP('I am a dom element');\n p.center();\n p.style('font-size', '20px');\n p.style('text-align', 'center');\n p.style('z-index', '-9999');\n}\n\nfunction draw() {\n background(250, 250, 150);\n fill(15, 195, 185);\n noStroke();\n sphere(30);\n erase();\n rotateY(frameCount * 0.02);\n translate(0, 0, 40);\n torus(15, 5);\n noErase();\n}\n\nEnds erasing that was started with erase().\nThe fill(), stroke(), and\nblendMode() settings will return to what they were\nprior to calling erase().
\n', + itemtype: 'method', + name: 'noErase', + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ 'Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.',
+ class: 'p5',
+ module: 'Color',
+ submodule: 'Setting'
+ },
+ {
+ file: 'src/core/shape/2d_primitives.js',
+ line: 14,
+ description:
+ '\nbackground(235, 145, 15);\nnoStroke();\nfill(30, 45, 220);\nrect(30, 10, 10, 80);\nerase();\nellipse(50, 50, 60);\nnoErase();\nrect(70, 10, 10, 80);\n\nThis function does 3 things:
\n- \n
Bounds the desired start/stop angles for an arc (in radians) so that:
\n0 <= start < TWO_PI ; start <= stop < start + TWO_PIThis means that the arc rendering functions don't have to be concerned\nwith what happens if stop is smaller than start, or if the arc 'goes\nround more than once', etc.: they can just start at start and increase\nuntil stop and the correct arc will be drawn.
\n \nOptionally adjusts the angles within each quadrant to counter the naive\nscaling of the underlying ellipse up from the unit circle. Without\nthis, the angles become arbitrary when width != height: 45 degrees\nmight be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\na 'tall' ellipse.
\n \nFlags up when start and stop correspond to the same place on the\nunderlying ellipse. This is useful if you want to do something special\nthere (like rendering a whole ellipse instead).
\n \n
Draw an arc to the screen. If called with only x, y, w, h, start, and\nstop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc\nwill be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The\norigin may be changed with the ellipseMode() function.
\nThe arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse.\nAdding or subtracting TWO_PI to either angle does not change where they fall.\nIf both start and stop fall at the same place, a full ellipse will be drawn. Be aware that the the\ny-axis increases in the downward direction, therefore angles are measured clockwise from the positive\nx-direction ("3 o'clock").
x-coordinate of the arc's ellipse
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the arc's ellipse
\n', + type: 'Number' + }, + { + name: 'w', + description: 'width of the arc's ellipse by default
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height of the arc's ellipse by default
\n', + type: 'Number' + }, + { + name: 'start', + description: 'angle to start the arc, specified in radians
\n', + type: 'Number' + }, + { + name: 'stop', + description: 'angle to stop the arc, specified in radians
\n', + type: 'Number' + }, + { + name: 'mode', + description: + 'optional parameter to determine the way of drawing\n the arc. either CHORD, PIE or OPEN
\n', + type: 'Constant', + optional: true + }, + { + name: 'detail', + description: + 'optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the arc. Default value is 25.
\n', + type: 'Number', + optional: true + } + ], + chainable: 1, + example: [ + '\n\n
\n\n\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n\n\n
\n\n\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n\n\n
\n\n\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n\n\n
\n\n\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n\n\n
'
+ ],
+ alt:
+ 'shattered outline of an ellipse with a quarter of a white circle bottom-right.\nwhite ellipse with top right quarter missing.\nwhite ellipse with black outline with top right missing.\nwhite ellipse with top right missing with black outline around shape.\nwhite ellipse with top right quarter missing with black outline around the shape.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives'
+ },
+ {
+ file: 'src/core/shape/2d_primitives.js',
+ line: 211,
+ description:
+ '\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n\nDraws an ellipse (oval) to the screen. An ellipse with equal width and\nheight is a circle. By default, the first two parameters set the location,\nand the third and fourth parameters set the shape's width and height. If\nno height is specified, the value of width is used for both the width and\nheight. If a negative height or width is specified, the absolute value is taken.\nThe origin may be changed with the ellipseMode() function.
\n', + itemtype: 'method', + name: 'ellipse', + chainable: 1, + example: ['\n\n
'],
+ alt:
+ 'white ellipse with black outline in middle-right of canvas that is 55x55.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives',
+ overloads: [
+ {
+ line: 211,
+ params: [
+ {
+ name: 'x',
+ description: '\nellipse(56, 46, 55, 55);\n\nx-coordinate of the ellipse.
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the ellipse.
\n', + type: 'Number' + }, + { + name: 'w', + description: 'width of the ellipse.
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height of the ellipse.
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 236, + params: [ + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'w', + description: '', + type: 'Number' + }, + { + name: 'h', + description: '', + type: 'Number' + }, + { + name: 'detail', + description: + 'number of radial sectors to draw (for WebGL mode)
\n', + type: 'Integer' + } + ] + } + ] + }, + { + file: 'src/core/shape/2d_primitives.js', + line: 271, + description: + 'Draws a circle to the screen. A circle is a simple closed shape.\nIt is the set of all points in a plane that are at a given distance from a given point, the centre.\nThis function is a special case of the ellipse() function, where the width and height of the ellipse are the same.\nHeight and width of the ellipse correspond to the diameter of the circle.\nBy default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle.
\n', + itemtype: 'method', + name: 'circle', + params: [ + { + name: 'x', + description: 'x-coordinate of the centre of the circle.
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the centre of the circle.
\n', + type: 'Number' + }, + { + name: 'd', + description: 'diameter of the circle.
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt: 'white circle with black outline in mid of canvas that is 55x55.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives'
+ },
+ {
+ file: 'src/core/shape/2d_primitives.js',
+ line: 301,
+ description:
+ '\n// Draw a circle at location (30, 30) with a diameter of 20.\ncircle(30, 30, 20);\n\nDraws a line (a direct path between two points) to the screen. The version\nof line() with four parameters draws the line in 2D. To color a line, use\nthe stroke() function. A line cannot be filled, therefore the fill()\nfunction will not affect the color of a line. 2D lines are drawn with a\nwidth of one pixel by default, but this can be changed with the\nstrokeWeight() function.
\n', + itemtype: 'method', + name: 'line', + chainable: 1, + example: [ + '\n\n
\n\n\nline(30, 20, 85, 75);\n\n\n
'
+ ],
+ alt:
+ 'line 78 pixels long running from mid-top to bottom-right of canvas.\n3 lines of various stroke sizes. Form top, bottom and right sides of a square.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives',
+ overloads: [
+ {
+ line: 301,
+ params: [
+ {
+ name: 'x1',
+ description: '\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n\nthe x-coordinate of the first point
\n', + type: 'Number' + }, + { + name: 'y1', + description: 'the y-coordinate of the first point
\n', + type: 'Number' + }, + { + name: 'x2', + description: 'the x-coordinate of the second point
\n', + type: 'Number' + }, + { + name: 'y2', + description: 'the y-coordinate of the second point
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 337, + params: [ + { + name: 'x1', + description: '', + type: 'Number' + }, + { + name: 'y1', + description: '', + type: 'Number' + }, + { + name: 'z1', + description: 'the z-coordinate of the first point
\n', + type: 'Number' + }, + { + name: 'x2', + description: '', + type: 'Number' + }, + { + name: 'y2', + description: '', + type: 'Number' + }, + { + name: 'z2', + description: 'the z-coordinate of the second point
\n', + type: 'Number' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/2d_primitives.js', + line: 357, + description: + 'Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nvalue is the vertical value for the point. The color of the point is\nchanged with the stroke() function. The size of the point\nis changed with the strokeWeight() function.
\n', + itemtype: 'method', + name: 'point', + chainable: 1, + example: [ + "\n\n
\n\n\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n\n\n
\n\n\nstroke('purple'); // Change the color\nstrokeWeight(10); // Make the points 10 pixels in size\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n\n\n
"
+ ],
+ alt:
+ '4 points centered in the middle-right of the canvas.\n4 large purple points centered in the middle-right of the canvas.\nVertices of a square of length 10 pixels towards the top-left of the canvas.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives',
+ overloads: [
+ {
+ line: 357,
+ params: [
+ {
+ name: 'x',
+ description: '\nlet a = createVector(10, 10);\npoint(a);\nlet b = createVector(10, 20);\npoint(b);\npoint(createVector(20, 10));\npoint(createVector(20, 20));\n\nthe x-coordinate
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y-coordinate
\n', + type: 'Number' + }, + { + name: 'z', + description: 'the z-coordinate (for WebGL mode)
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 407, + params: [ + { + name: 'coordinate_vector', + description: 'the coordinate vector
\n', + type: 'p5.Vector' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/2d_primitives.js', + line: 432, + description: + 'Draw a quad. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.
\n', + itemtype: 'method', + name: 'quad', + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ 'irregular white quadrilateral shape with black outline mid-right of canvas.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives',
+ overloads: [
+ {
+ line: 432,
+ params: [
+ {
+ name: 'x1',
+ description: '\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n\nthe x-coordinate of the first point
\n', + type: 'Number' + }, + { + name: 'y1', + description: 'the y-coordinate of the first point
\n', + type: 'Number' + }, + { + name: 'x2', + description: 'the x-coordinate of the second point
\n', + type: 'Number' + }, + { + name: 'y2', + description: 'the y-coordinate of the second point
\n', + type: 'Number' + }, + { + name: 'x3', + description: 'the x-coordinate of the third point
\n', + type: 'Number' + }, + { + name: 'y3', + description: 'the y-coordinate of the third point
\n', + type: 'Number' + }, + { + name: 'x4', + description: 'the x-coordinate of the fourth point
\n', + type: 'Number' + }, + { + name: 'y4', + description: 'the y-coordinate of the fourth point
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 462, + params: [ + { + name: 'x1', + description: '', + type: 'Number' + }, + { + name: 'y1', + description: '', + type: 'Number' + }, + { + name: 'z1', + description: 'the z-coordinate of the first point
\n', + type: 'Number' + }, + { + name: 'x2', + description: '', + type: 'Number' + }, + { + name: 'y2', + description: '', + type: 'Number' + }, + { + name: 'z2', + description: 'the z-coordinate of the second point
\n', + type: 'Number' + }, + { + name: 'x3', + description: '', + type: 'Number' + }, + { + name: 'y3', + description: '', + type: 'Number' + }, + { + name: 'z3', + description: 'the z-coordinate of the third point
\n', + type: 'Number' + }, + { + name: 'x4', + description: '', + type: 'Number' + }, + { + name: 'y4', + description: '', + type: 'Number' + }, + { + name: 'z4', + description: 'the z-coordinate of the fourth point
\n', + type: 'Number' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/2d_primitives.js', + line: 499, + description: + 'Draws a rectangle to the screen. A rectangle is a four-sided shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, however,\nmay be changed with the rectMode() function.\n
\nThe fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.
\n
\n\n\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n\n\n
\n\n\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n\n\n
'
+ ],
+ alt:
+ '55x55 white rect with black outline in mid-right of canvas.\n55x55 white rect with black outline and rounded edges in mid-right of canvas.\n55x55 white rect with black outline and rounded edges of different radii.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives',
+ overloads: [
+ {
+ line: 499,
+ params: [
+ {
+ name: 'x',
+ description: '\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5);\n\nx-coordinate of the rectangle.
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the rectangle.
\n', + type: 'Number' + }, + { + name: 'w', + description: 'width of the rectangle.
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height of the rectangle.
\n', + type: 'Number' + }, + { + name: 'tl', + description: 'optional radius of top-left corner.
\n', + type: 'Number', + optional: true + }, + { + name: 'tr', + description: 'optional radius of top-right corner.
\n', + type: 'Number', + optional: true + }, + { + name: 'br', + description: 'optional radius of bottom-right corner.
\n', + type: 'Number', + optional: true + }, + { + name: 'bl', + description: 'optional radius of bottom-left corner.
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 549, + params: [ + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'w', + description: '', + type: 'Number' + }, + { + name: 'h', + description: '', + type: 'Number' + }, + { + name: 'detailX', + description: + 'number of segments in the x-direction (for WebGL mode)
\n', + type: 'Integer', + optional: true + }, + { + name: 'detailY', + description: + 'number of segments in the y-direction (for WebGL mode)
\n', + type: 'Integer', + optional: true + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/2d_primitives.js', + line: 582, + description: + 'Draws a square to the screen. A square is a four-sided shape with\nevery angle at ninety degrees, and equal side size.\nThis function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size.\nBy default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, however,\nmay be changed with the rectMode() function.\n
\nThe fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.
x-coordinate of the square.
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the square.
\n', + type: 'Number' + }, + { + name: 's', + description: 'side size of the square.
\n', + type: 'Number' + }, + { + name: 'tl', + description: 'optional radius of top-left corner.
\n', + type: 'Number', + optional: true + }, + { + name: 'tr', + description: 'optional radius of top-right corner.
\n', + type: 'Number', + optional: true + }, + { + name: 'br', + description: 'optional radius of bottom-right corner.
\n', + type: 'Number', + optional: true + }, + { + name: 'bl', + description: 'optional radius of bottom-left corner.
\n', + type: 'Number', + optional: true + } + ], + chainable: 1, + example: [ + '\n\n
\n\n\n// Draw a square at location (30, 20) with a side size of 55.\nsquare(30, 20, 55);\n\n\n
\n\n\n// Draw a square with rounded corners, each having a radius of 20.\nsquare(30, 20, 55, 20);\n\n\n
'
+ ],
+ alt:
+ '55x55 white square with black outline in mid-right of canvas.\n55x55 white square with black outline and rounded edges in mid-right of canvas.\n55x55 white square with black outline and rounded edges of different radii.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives'
+ },
+ {
+ file: 'src/core/shape/2d_primitives.js',
+ line: 636,
+ description:
+ '\n// Draw a square with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nsquare(30, 20, 55, 20, 15, 10, 5);\n\nA triangle is a plane created by connecting three points. The first two\narguments specify the first point, the middle two arguments specify the\nsecond point, and the last two arguments specify the third point.
\n', + itemtype: 'method', + name: 'triangle', + params: [ + { + name: 'x1', + description: 'x-coordinate of the first point
\n', + type: 'Number' + }, + { + name: 'y1', + description: 'y-coordinate of the first point
\n', + type: 'Number' + }, + { + name: 'x2', + description: 'x-coordinate of the second point
\n', + type: 'Number' + }, + { + name: 'y2', + description: 'y-coordinate of the second point
\n', + type: 'Number' + }, + { + name: 'x3', + description: 'x-coordinate of the third point
\n', + type: 'Number' + }, + { + name: 'y3', + description: 'y-coordinate of the third point
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt: 'white triangle with black outline in mid-right of canvas.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '2D Primitives'
+ },
+ {
+ file: 'src/core/shape/attributes.js',
+ line: 12,
+ description:
+ '\ntriangle(30, 75, 58, 20, 86, 75);\n\nModifies the location from which ellipses are drawn by changing the way\nin which parameters given to ellipse(),\ncircle() and arc() are interpreted.\n
\nThe default mode is ellipseMode(CENTER), which interprets the first two\nparameters of ellipse() as the shape's center point, while the third and\nfourth parameters are its width and height.\n
\nellipseMode(RADIUS) also uses the first two parameters of ellipse() as\nthe shape's center point, but uses the third and fourth parameters to\nspecify half of the shapes's width and height.\n
\nellipseMode(CORNER) interprets the first two parameters of ellipse() as\nthe upper-left corner of the shape, while the third and fourth parameters\nare its width and height.\n
\nellipseMode(CORNERS) interprets the first two parameters of ellipse() as\nthe location of one corner of the ellipse's bounding box, and the third\nand fourth parameters as the location of the opposite corner.\n
\nThe parameter must be written in ALL CAPS because Javascript is a\ncase-sensitive language.
either CENTER, RADIUS, CORNER, or CORNERS
\n', + type: 'Constant' + } + ], + chainable: 1, + example: [ + '\n\n
\n\n\nellipseMode(RADIUS); // Set ellipseMode to RADIUS\nfill(255); // Set fill to white\nellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode\n\nellipseMode(CENTER); // Set ellipseMode to CENTER\nfill(100); // Set fill to gray\nellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode\n\n\n
'
+ ],
+ alt:
+ '60x60 white ellipse and 30x30 grey ellipse with black outlines at center.\n60x60 white ellipse @center and 30x30 grey ellipse top-right, black outlines.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/core/shape/attributes.js',
+ line: 82,
+ description:
+ '\nellipseMode(CORNER); // Set ellipseMode is CORNER\nfill(255); // Set fill to white\nellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode\n\nellipseMode(CORNERS); // Set ellipseMode to CORNERS\nfill(100); // Set fill to gray\nellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode\n\nDraws all geometry with jagged (aliased) edges. Note that smooth() is\nactive by default in 2D mode, so it is necessary to call noSmooth() to disable\nsmoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled\nby default, so it is necessary to call smooth() if you would like\nsmooth (antialiased) edges on your geometry.
\n', + itemtype: 'method', + name: 'noSmooth', + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ '2 pixelated 36x36 white ellipses to left & right of center, black background',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/core/shape/attributes.js',
+ line: 117,
+ description:
+ '\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n\nModifies the location from which rectangles are drawn by changing the way\nin which parameters given to rect() are interpreted.\n
\nThe default mode is rectMode(CORNER), which interprets the first two\nparameters of rect() as the upper-left corner of the shape, while the\nthird and fourth parameters are its width and height.\n
\nrectMode(CORNERS) interprets the first two parameters of rect() as the\nlocation of one corner, and the third and fourth parameters as the\nlocation of the opposite corner.\n
\nrectMode(CENTER) interprets the first two parameters of rect() as the\nshape's center point, while the third and fourth parameters are its\nwidth and height.\n
\nrectMode(RADIUS) also uses the first two parameters of rect() as the\nshape's center point, but uses the third and fourth parameters to specify\nhalf of the shapes's width and height.\n
\nThe parameter must be written in ALL CAPS because Javascript is a\ncase-sensitive language.
either CORNER, CORNERS, CENTER, or RADIUS
\n', + type: 'Constant' + } + ], + chainable: 1, + example: [ + '\n\n
\n\n\nrectMode(CORNER); // Default rectMode is CORNER\nfill(255); // Set fill to white\nrect(25, 25, 50, 50); // Draw white rect using CORNER mode\n\nrectMode(CORNERS); // Set rectMode to CORNERS\nfill(100); // Set fill to gray\nrect(25, 25, 50, 50); // Draw gray rect using CORNERS mode\n\n\n
'
+ ],
+ alt:
+ '50x50 white rect at center and 25x25 grey rect in the top left of the other.\n50x50 white rect at center and 25x25 grey rect in the center of the other.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/core/shape/attributes.js',
+ line: 186,
+ description:
+ '\nrectMode(RADIUS); // Set rectMode to RADIUS\nfill(255); // Set fill to white\nrect(50, 50, 30, 30); // Draw white rect using RADIUS mode\n\nrectMode(CENTER); // Set rectMode to CENTER\nfill(100); // Set fill to gray\nrect(50, 50, 30, 30); // Draw gray rect using CENTER mode\n\nDraws all geometry with smooth (anti-aliased) edges. smooth() will also\nimprove image quality of resized images. Note that smooth() is active by\ndefault in 2D mode; noSmooth() can be used to disable smoothing of geometry,\nimages, and fonts. In 3D mode, noSmooth() is enabled\nby default, so it is necessary to call smooth() if you would like\nsmooth (antialiased) edges on your geometry.
\n', + itemtype: 'method', + name: 'smooth', + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ '2 pixelated 36x36 white ellipses one left one right of center. On black.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/core/shape/attributes.js',
+ line: 222,
+ description:
+ '\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n\nSets the style for rendering line endings. These ends are either squared,\nextended, or rounded, each of which specified with the corresponding\nparameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.
\n', + itemtype: 'method', + name: 'strokeCap', + params: [ + { + name: 'cap', + description: 'either SQUARE, PROJECT, or ROUND
\n', + type: 'Constant' + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ '3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/core/shape/attributes.js',
+ line: 259,
+ description:
+ '\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n\nSets the style of the joints which connect line segments. These joints\nare either mitered, beveled, or rounded and specified with the\ncorresponding parameters MITER, BEVEL, and ROUND. The default joint is\nMITER.
\n', + itemtype: 'method', + name: 'strokeJoin', + params: [ + { + name: 'join', + description: 'either MITER, BEVEL, ROUND
\n', + type: 'Constant' + } + ], + chainable: 1, + example: [ + '\n\n
\n\n\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n\n\n
\n\n\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n\n\n
'
+ ],
+ alt:
+ 'Right-facing arrowhead shape with pointed tip in center of canvas.\nRight-facing arrowhead shape with flat tip in center of canvas.\nRight-facing arrowhead shape with rounded tip in center of canvas.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/core/shape/attributes.js',
+ line: 326,
+ description:
+ '\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n\nSets the width of the stroke used for lines, points, and the border\naround shapes. All widths are set in units of pixels.
\n', + itemtype: 'method', + name: 'strokeWeight', + params: [ + { + name: 'weight', + description: 'the weight (in pixels) of the stroke
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt: '3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/core/shape/curves.js',
+ line: 11,
+ description:
+ '\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n\nDraws a cubic Bezier curve on the screen. These curves are defined by a\nseries of anchor and control points. The first two parameters specify\nthe first anchor point and the last two parameters specify the other\nanchor point, which become the first and last points on the curve. The\nmiddle parameters specify the two control points which define the shape\nof the curve. Approximately speaking, control points "pull" the curve\ntowards them.
Bezier curves were developed by French\nautomotive engineer Pierre Bezier, and are commonly used in computer\ngraphics to define gently sloping curves. See also curve().
\n
\n\n\nnoFill();\nstroke(255, 102, 0);\nline(85, 20, 10, 10);\nline(90, 90, 15, 80);\nstroke(0, 0, 0);\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n\n
'
+ ],
+ alt:
+ 'stretched black s-shape in center with orange lines extending from end points.\nstretched black s-shape with 10 5x5 white ellipses along the shape.\nstretched black s-shape with 7 5x5 ellipses and orange lines along the shape.\nstretched black s-shape with 17 small orange lines extending from under shape.\nhorseshoe shape with orange ends facing left and black curved center.\nhorseshoe shape with orange ends facing left and black curved center.\nLine shaped like right-facing arrow,points move with mouse-x and warp shape.\nhorizontal line that hooks downward on the right and 13 5x5 ellipses along it.\nright curving line mid-right of canvas with 7 short lines radiating from it.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves',
+ overloads: [
+ {
+ line: 11,
+ params: [
+ {
+ name: 'x1',
+ description: '\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n\nx-coordinate for the first anchor point
\n', + type: 'Number' + }, + { + name: 'y1', + description: 'y-coordinate for the first anchor point
\n', + type: 'Number' + }, + { + name: 'x2', + description: 'x-coordinate for the first control point
\n', + type: 'Number' + }, + { + name: 'y2', + description: 'y-coordinate for the first control point
\n', + type: 'Number' + }, + { + name: 'x3', + description: 'x-coordinate for the second control point
\n', + type: 'Number' + }, + { + name: 'y3', + description: 'y-coordinate for the second control point
\n', + type: 'Number' + }, + { + name: 'x4', + description: 'x-coordinate for the second anchor point
\n', + type: 'Number' + }, + { + name: 'y4', + description: 'y-coordinate for the second anchor point
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 64, + params: [ + { + name: 'x1', + description: '', + type: 'Number' + }, + { + name: 'y1', + description: '', + type: 'Number' + }, + { + name: 'z1', + description: 'z-coordinate for the first anchor point
\n', + type: 'Number' + }, + { + name: 'x2', + description: '', + type: 'Number' + }, + { + name: 'y2', + description: '', + type: 'Number' + }, + { + name: 'z2', + description: 'z-coordinate for the first control point
\n', + type: 'Number' + }, + { + name: 'x3', + description: '', + type: 'Number' + }, + { + name: 'y3', + description: '', + type: 'Number' + }, + { + name: 'z3', + description: 'z-coordinate for the second control point
\n', + type: 'Number' + }, + { + name: 'x4', + description: '', + type: 'Number' + }, + { + name: 'y4', + description: '', + type: 'Number' + }, + { + name: 'z4', + description: 'z-coordinate for the second anchor point
\n', + type: 'Number' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/curves.js', + line: 94, + description: + 'Sets the resolution at which Beziers display.
\nThe default value is 20.
\nThis function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.
\n', + itemtype: 'method', + name: 'bezierDetail', + params: [ + { + name: 'detail', + description: 'resolution of the curves
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + "\n\n
"
+ ],
+ alt: 'stretched black s-shape with a low level of bezier detail',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves'
+ },
+ {
+ file: 'src/core/shape/curves.js',
+ line: 137,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noFill();\n\n bezierDetail(5);\n}\n\nfunction draw() {\n background(200);\n\n bezier(-40, -40, 0,\n 90, -40, 0,\n -90, 40, 0,\n 40, 40, 0);\n}\n\nEvaluates the Bezier at position t for points a, b, c, d.\nThe parameters a and d are the first and last points\non the curve, and b and c are the control points.\nThe final parameter t varies between 0 and 1.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a bezier curve at t.
\n', + itemtype: 'method', + name: 'bezierPoint', + params: [ + { + name: 'a', + description: 'coordinate of first point on the curve
\n', + type: 'Number' + }, + { + name: 'b', + description: 'coordinate of first control point
\n', + type: 'Number' + }, + { + name: 'c', + description: 'coordinate of second control point
\n', + type: 'Number' + }, + { + name: 'd', + description: 'coordinate of second point on the curve
\n', + type: 'Number' + }, + { + name: 't', + description: 'value between 0 and 1
\n', + type: 'Number' + } + ], + return: { + description: 'the value of the Bezier at position t', + type: 'Number' + }, + example: [ + '\n\n
'
+ ],
+ alt:
+ 'stretched black s-shape with 17 small orange lines extending from under shape.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves'
+ },
+ {
+ file: 'src/core/shape/curves.js',
+ line: 192,
+ description:
+ '\nnoFill();\nlet x1 = 85,\n x2 = 10,\n x3 = 90,\n x4 = 15;\nlet y1 = 20,\n y2 = 10,\n y3 = 90,\n y4 = 80;\nbezier(x1, y1, x2, y2, x3, y3, x4, y4);\nfill(255);\nlet steps = 10;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = bezierPoint(x1, x2, x3, x4, t);\n let y = bezierPoint(y1, y2, y3, y4, t);\n ellipse(x, y, 5, 5);\n}\n\nEvaluates the tangent to the Bezier at position t for points a, b, c, d.\nThe parameters a and d are the first and last points\non the curve, and b and c are the control points.\nThe final parameter t varies between 0 and 1.
\n', + itemtype: 'method', + name: 'bezierTangent', + params: [ + { + name: 'a', + description: 'coordinate of first point on the curve
\n', + type: 'Number' + }, + { + name: 'b', + description: 'coordinate of first control point
\n', + type: 'Number' + }, + { + name: 'c', + description: 'coordinate of second control point
\n', + type: 'Number' + }, + { + name: 'd', + description: 'coordinate of second point on the curve
\n', + type: 'Number' + }, + { + name: 't', + description: 'value between 0 and 1
\n', + type: 'Number' + } + ], + return: { + description: 'the tangent at position t', + type: 'Number' + }, + example: [ + '\n\n
\n\n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nlet steps = 6;\nfill(255);\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n // Get the location of the point\n let x = bezierPoint(85, 10, 90, 15, t);\n let y = bezierPoint(20, 10, 90, 80, t);\n // Get the tangent points\n let tx = bezierTangent(85, 10, 90, 15, t);\n let ty = bezierTangent(20, 10, 90, 80, t);\n // Calculate an angle from the tangent points\n let a = atan2(ty, tx);\n a += PI;\n stroke(255, 102, 0);\n line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);\n // The following line of code makes a line\n // inverse of the above line\n //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);\n stroke(0);\n ellipse(x, y, 5, 5);\n}\n\n\n
'
+ ],
+ alt:
+ 's-shaped line with 17 short orange lines extending from underside of shape',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves'
+ },
+ {
+ file: 'src/core/shape/curves.js',
+ line: 271,
+ description:
+ '\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nstroke(255, 102, 0);\nlet steps = 16;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = bezierPoint(85, 10, 90, 15, t);\n let y = bezierPoint(20, 10, 90, 80, t);\n let tx = bezierTangent(85, 10, 90, 15, t);\n let ty = bezierTangent(20, 10, 90, 80, t);\n let a = atan2(ty, tx);\n a -= HALF_PI;\n line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n}\n\nDraws a curved line on the screen between two points, given as the\nmiddle four parameters. The first two parameters are a control point, as\nif the curve came from this point even though it's not drawn. The last\ntwo parameters similarly describe the other control point.
\nLonger curves can be created by putting a series of curve() functions\ntogether or using curveVertex(). An additional function called\ncurveTightness() provides control for the visual quality of the curve.\nThe curve() function is an implementation of Catmull-Rom splines.
\n
\n\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\nstroke(0);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nstroke(255, 102, 0);\ncurve(73, 24, 73, 61, 15, 65, 15, 65);\n\n\n
\n\n// Define the curve points as JavaScript objects\nlet p1 = { x: 5, y: 26 },\n p2 = { x: 73, y: 24 };\nlet p3 = { x: 73, y: 61 },\n p4 = { x: 15, y: 65 };\nnoFill();\nstroke(255, 102, 0);\ncurve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);\nstroke(0);\ncurve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);\nstroke(255, 102, 0);\ncurve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);\n\n\n
'
+ ],
+ alt:
+ 'horseshoe shape with orange ends facing left and black curved center.\nhorseshoe shape with orange ends facing left and black curved center.\ncurving black and orange lines.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves',
+ overloads: [
+ {
+ line: 271,
+ params: [
+ {
+ name: 'x1',
+ description:
+ '\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);\nstroke(0);\ncurve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);\nstroke(255, 102, 0);\ncurve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);\n\nx-coordinate for the beginning control point
\n', + type: 'Number' + }, + { + name: 'y1', + description: + 'y-coordinate for the beginning control point
\n', + type: 'Number' + }, + { + name: 'x2', + description: 'x-coordinate for the first point
\n', + type: 'Number' + }, + { + name: 'y2', + description: 'y-coordinate for the first point
\n', + type: 'Number' + }, + { + name: 'x3', + description: 'x-coordinate for the second point
\n', + type: 'Number' + }, + { + name: 'y3', + description: 'y-coordinate for the second point
\n', + type: 'Number' + }, + { + name: 'x4', + description: 'x-coordinate for the ending control point
\n', + type: 'Number' + }, + { + name: 'y4', + description: 'y-coordinate for the ending control point
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 336, + params: [ + { + name: 'x1', + description: '', + type: 'Number' + }, + { + name: 'y1', + description: '', + type: 'Number' + }, + { + name: 'z1', + description: + 'z-coordinate for the beginning control point
\n', + type: 'Number' + }, + { + name: 'x2', + description: '', + type: 'Number' + }, + { + name: 'y2', + description: '', + type: 'Number' + }, + { + name: 'z2', + description: 'z-coordinate for the first point
\n', + type: 'Number' + }, + { + name: 'x3', + description: '', + type: 'Number' + }, + { + name: 'y3', + description: '', + type: 'Number' + }, + { + name: 'z3', + description: 'z-coordinate for the second point
\n', + type: 'Number' + }, + { + name: 'x4', + description: '', + type: 'Number' + }, + { + name: 'y4', + description: '', + type: 'Number' + }, + { + name: 'z4', + description: 'z-coordinate for the ending control point
\n', + type: 'Number' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/curves.js', + line: 362, + description: + 'Sets the resolution at which curves display.
\nThe default value is 20 while the minimum value is 3.
\nThis function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.
\n', + itemtype: 'method', + name: 'curveDetail', + params: [ + { + name: 'resolution', + description: 'resolution of the curves
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + "\n\n
"
+ ],
+ alt: 'white arch shape with a low level of curve detail.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves'
+ },
+ {
+ file: 'src/core/shape/curves.js',
+ line: 404,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n curveDetail(5);\n}\nfunction draw() {\n background(200);\n\n curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);\n}\n\nModifies the quality of forms created with curve() and curveVertex().\nThe parameter tightness determines how the curve fits to the vertex\npoints. The value 0.0 is the default value for tightness (this value\ndefines the curves to be Catmull-Rom splines) and the value 1.0 connects\nall the points with straight lines. Values within the range -5.0 and 5.0\nwill deform the curves but will leave them recognizable and as values\nincrease in magnitude, they will continue to deform.
\n', + itemtype: 'method', + name: 'curveTightness', + params: [ + { + name: 'amount', + description: + 'amount of deformation from the original vertices
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ 'Line shaped like right-facing arrow,points move with mouse-x and warp shape.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves'
+ },
+ {
+ file: 'src/core/shape/curves.js',
+ line: 451,
+ description:
+ '\n// Move the mouse left and right to see the curve change\n\nfunction setup() {\n createCanvas(100, 100);\n noFill();\n}\n\nfunction draw() {\n background(204);\n let t = map(mouseX, 0, width, -5, 5);\n curveTightness(t);\n beginShape();\n curveVertex(10, 26);\n curveVertex(10, 26);\n curveVertex(83, 24);\n curveVertex(83, 61);\n curveVertex(25, 65);\n curveVertex(25, 65);\n endShape();\n}\n\nEvaluates the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are control points\nof the curve, and b and c are the start and end points of the curve.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a curve at t.
\n', + itemtype: 'method', + name: 'curvePoint', + params: [ + { + name: 'a', + description: 'coordinate of first control point of the curve
\n', + type: 'Number' + }, + { + name: 'b', + description: 'coordinate of first point
\n', + type: 'Number' + }, + { + name: 'c', + description: 'coordinate of second point
\n', + type: 'Number' + }, + { + name: 'd', + description: 'coordinate of second control point
\n', + type: 'Number' + }, + { + name: 't', + description: 'value between 0 and 1
\n', + type: 'Number' + } + ], + return: { + description: 'bezier value at position t', + type: 'Number' + }, + example: [ + '\n\n
\n\nline hooking down to right-bottom with 13 5x5 white ellipse points'
+ ],
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves'
+ },
+ {
+ file: 'src/core/shape/curves.js',
+ line: 500,
+ description:
+ '\nnoFill();\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nfill(255);\nellipseMode(CENTER);\nlet steps = 6;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = curvePoint(5, 5, 73, 73, t);\n let y = curvePoint(26, 26, 24, 61, t);\n ellipse(x, y, 5, 5);\n x = curvePoint(5, 73, 73, 15, t);\n y = curvePoint(26, 24, 61, 65, t);\n ellipse(x, y, 5, 5);\n}\n\nEvaluates the tangent to the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are points on the curve,\nand b and c are the control points.
\n', + itemtype: 'method', + name: 'curveTangent', + params: [ + { + name: 'a', + description: 'coordinate of first point on the curve
\n', + type: 'Number' + }, + { + name: 'b', + description: 'coordinate of first control point
\n', + type: 'Number' + }, + { + name: 'c', + description: 'coordinate of second control point
\n', + type: 'Number' + }, + { + name: 'd', + description: 'coordinate of second point on the curve
\n', + type: 'Number' + }, + { + name: 't', + description: 'value between 0 and 1
\n', + type: 'Number' + } + ], + return: { + description: 'the tangent at position t', + type: 'Number' + }, + example: [ + '\n\n
'
+ ],
+ alt:
+ 'right curving line mid-right of canvas with 7 short lines radiating from it.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Curves'
+ },
+ {
+ file: 'src/core/shape/vertex.js',
+ line: 20,
+ description:
+ '\nnoFill();\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nlet steps = 6;\nfor (let i = 0; i <= steps; i++) {\n let t = i / steps;\n let x = curvePoint(5, 73, 73, 15, t);\n let y = curvePoint(26, 24, 61, 65, t);\n //ellipse(x, y, 5, 5);\n let tx = curveTangent(5, 73, 73, 15, t);\n let ty = curveTangent(26, 24, 61, 65, t);\n let a = atan2(ty, tx);\n a -= PI / 2.0;\n line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n}\n\nUse the beginContour() and endContour() functions to create negative\nshapes within shapes such as the center of the letter 'O'. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must "wind" in the opposite\ndirection from the exterior shape. First draw vertices for the exterior\nclockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.\n
\nThese functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.
\n
'
+ ],
+ alt:
+ 'white rect and smaller grey rect with red outlines in center of canvas.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Vertex'
+ },
+ {
+ file: 'src/core/shape/vertex.js',
+ line: 68,
+ description:
+ '\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n\nUsing the beginShape() and endShape() functions allow creating more\ncomplex forms. beginShape() begins recording vertices for a shape and\nendShape() stops recording. The value of the kind parameter tells it which\ntypes of shapes to create from the provided vertices. With no mode\nspecified, the shape can be any irregular polygon.\n
\nThe parameters available for beginShape() are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the\nbeginShape() function, a series of vertex() commands must follow. To stop\ndrawing the shape, call endShape(). Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.\n
\nTransformations such as translate(), rotate(), and scale() do not work\nwithin beginShape(). It is also not possible to use other shapes, such as\nellipse() or rect() within beginShape().
either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, or QUAD_STRIP
\n', + type: 'Constant', + optional: true + } + ], + chainable: 1, + example: [ + '\n\n
\n\n\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n\n\n
\n\n\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n\n
\n\n\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n\n
\n\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n\n
\n\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n\n\n
\n\n\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n\n\n
\n\n\nbeginShape(TRIANGLE_STRIP);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nvertex(90, 75);\nendShape();\n\n\n
\n\n\nbeginShape(TRIANGLE_FAN);\nvertex(57.5, 50);\nvertex(57.5, 15);\nvertex(92, 50);\nvertex(57.5, 85);\nvertex(22, 50);\nvertex(57.5, 15);\nendShape();\n\n\n
\n\n\nbeginShape(QUADS);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 75);\nvertex(50, 20);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 75);\nvertex(85, 20);\nendShape();\n\n\n
\n\n\nbeginShape(QUAD_STRIP);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 20);\nvertex(50, 75);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 20);\nvertex(85, 75);\nendShape();\n\n\n
'
+ ],
+ alt:
+ 'white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20x55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Vertex'
+ },
+ {
+ file: 'src/core/shape/vertex.js',
+ line: 268,
+ description:
+ '\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n\nSpecifies vertex coordinates for Bezier curves. Each call to\nbezierVertex() defines the position of two control points and\none anchor point of a Bezier curve, adding a new segment to a\nline or shape. For WebGL mode bezierVertex() can be used in 2D\nas well as 3D mode. 2D mode expects 6 parameters, while 3D mode\nexpects 9 parameters (including z coordinates).\n
\nThe first time bezierVertex() is used within a beginShape()\ncall, it must be prefaced with a call to vertex() to set the first anchor\npoint. This function must be used between beginShape() and endShape()\nand only when there is no MODE or POINTS parameter specified to\nbeginShape().
\n
',
+ '\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n\n\n
',
+ "\n\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n\n\n
"
+ ],
+ alt:
+ 'crescent shape in middle of canvas with another crescent shape on positive z-axis.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Vertex',
+ overloads: [
+ {
+ line: 268,
+ params: [
+ {
+ name: 'x2',
+ description: '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n}\nfunction draw() {\n orbitControl();\n background(50);\n strokeWeight(4);\n stroke(255);\n point(-25, 30);\n point(25, 30);\n point(25, -30);\n point(-25, -30);\n\n strokeWeight(1);\n noFill();\n\n beginShape();\n vertex(-25, 30);\n bezierVertex(25, 30, 25, -30, -25, -30);\n endShape();\n\n beginShape();\n vertex(-25, 30, 20);\n bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);\n endShape();\n}\n\nx-coordinate for the first control point
\n', + type: 'Number' + }, + { + name: 'y2', + description: 'y-coordinate for the first control point
\n', + type: 'Number' + }, + { + name: 'x3', + description: 'x-coordinate for the second control point
\n', + type: 'Number' + }, + { + name: 'y3', + description: 'y-coordinate for the second control point
\n', + type: 'Number' + }, + { + name: 'x4', + description: 'x-coordinate for the anchor point
\n', + type: 'Number' + }, + { + name: 'y4', + description: 'y-coordinate for the anchor point
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 356, + params: [ + { + name: 'x2', + description: '', + type: 'Number' + }, + { + name: 'y2', + description: '', + type: 'Number' + }, + { + name: 'z2', + description: + 'z-coordinate for the first control point (for WebGL mode)
\n', + type: 'Number' + }, + { + name: 'x3', + description: '', + type: 'Number' + }, + { + name: 'y3', + description: '', + type: 'Number' + }, + { + name: 'z3', + description: + 'z-coordinate for the second control point (for WebGL mode)
\n', + type: 'Number' + }, + { + name: 'x4', + description: '', + type: 'Number' + }, + { + name: 'y4', + description: '', + type: 'Number' + }, + { + name: 'z4', + description: + 'z-coordinate for the anchor point (for WebGL mode)
\n', + type: 'Number' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/vertex.js', + line: 396, + description: + 'Specifies vertex coordinates for curves. This function may only\nbe used between beginShape() and endShape() and only when there\nis no MODE parameter specified to beginShape().\nFor WebGL mode curveVertex() can be used in 2D as well as 3D mode.\n2D mode expects 2 parameters, while 3D mode expects 3 parameters.\n
\nThe first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.
\n
'
+ ],
+ alt:
+ 'Upside-down u-shape line, mid canvas. left point extends beyond canvas view.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Vertex',
+ overloads: [
+ {
+ line: 396,
+ params: [
+ {
+ name: 'x',
+ description: '\nstrokeWeight(5);\npoint(84, 91);\npoint(68, 19);\npoint(21, 17);\npoint(32, 91);\nstrokeWeight(1);\n\nnoFill();\nbeginShape();\ncurveVertex(84, 91);\ncurveVertex(84, 91);\ncurveVertex(68, 19);\ncurveVertex(21, 17);\ncurveVertex(32, 91);\ncurveVertex(32, 91);\nendShape();\n\nx-coordinate of the vertex
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the vertex
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 441, + params: [ + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: 'z-coordinate of the vertex (for WebGL mode)
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/vertex.js', + line: 506, + description: + 'Use the beginContour() and endContour() functions to create negative\nshapes within shapes such as the center of the letter 'O'. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must "wind" in the opposite\ndirection from the exterior shape. First draw vertices for the exterior\nclockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.\n
\nThese functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.
\n
'
+ ],
+ alt:
+ 'white rect and smaller grey rect with red outlines in center of canvas.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Vertex'
+ },
+ {
+ file: 'src/core/shape/vertex.js',
+ line: 566,
+ description:
+ '\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n\nThe endShape() function is the companion to beginShape() and may only be\ncalled after beginShape(). When endShape() is called, all of image data\ndefined since the previous call to beginShape() is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).
\n', + itemtype: 'method', + name: 'endShape', + params: [ + { + name: 'mode', + description: 'use CLOSE to close the shape
\n', + type: 'Constant', + optional: true + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ 'Triangle line shape with smallest interior angle on bottom and upside-down L.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Vertex'
+ },
+ {
+ file: 'src/core/shape/vertex.js',
+ line: 652,
+ description:
+ '\nnoFill();\n\nbeginShape();\nvertex(20, 20);\nvertex(45, 20);\nvertex(45, 80);\nendShape(CLOSE);\n\nbeginShape();\nvertex(50, 20);\nvertex(75, 20);\nvertex(75, 80);\nendShape();\n\nSpecifies vertex coordinates for quadratic Bezier curves. Each call to\nquadraticVertex() defines the position of one control points and one\nanchor point of a Bezier curve, adding a new segment to a line or shape.\nThe first time quadraticVertex() is used within a beginShape() call, it\nmust be prefaced with a call to vertex() to set the first anchor point.\nFor WebGL mode quadraticVertex() can be used in 2D as well as 3D mode.\n2D mode expects 4 parameters, while 3D mode expects 6 parameters\n(including z coordinates).\n
\nThis function must be used between beginShape() and endShape()\nand only when there is no MODE or POINTS parameter specified to\nbeginShape().
\n
\n\n\nstrokeWeight(5);\npoint(20, 20);\npoint(80, 20);\npoint(50, 50);\n\nnoFill();\nstrokeWeight(1);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nendShape();\n\n\n
'
+ ],
+ alt:
+ 'arched-shaped black line with 4 pixel thick stroke weight.\nbackwards s-shaped black line with 4 pixel thick stroke weight.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Vertex',
+ overloads: [
+ {
+ line: 652,
+ params: [
+ {
+ name: 'cx',
+ description: '\nstrokeWeight(5);\npoint(20, 20);\npoint(80, 20);\npoint(50, 50);\n\npoint(20, 80);\npoint(80, 80);\npoint(80, 60);\n\nnoFill();\nstrokeWeight(1);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nquadraticVertex(20, 80, 80, 80);\nvertex(80, 60);\nendShape();\n\nx-coordinate for the control point
\n', + type: 'Number' + }, + { + name: 'cy', + description: 'y-coordinate for the control point
\n', + type: 'Number' + }, + { + name: 'x3', + description: 'x-coordinate for the anchor point
\n', + type: 'Number' + }, + { + name: 'y3', + description: 'y-coordinate for the anchor point
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 718, + params: [ + { + name: 'cx', + description: '', + type: 'Number' + }, + { + name: 'cy', + description: '', + type: 'Number' + }, + { + name: 'cz', + description: + 'z-coordinate for the control point (for WebGL mode)
\n', + type: 'Number' + }, + { + name: 'x3', + description: '', + type: 'Number' + }, + { + name: 'y3', + description: '', + type: 'Number' + }, + { + name: 'z3', + description: + 'z-coordinate for the anchor point (for WebGL mode)
\n', + type: 'Number' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/shape/vertex.js', + line: 811, + description: + 'All shapes are constructed by connecting a series of vertices. vertex()\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the beginShape() and\nendShape() functions.
\n', + itemtype: 'method', + name: 'vertex', + chainable: 1, + example: [ + "\n\n
\n\n\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n\n
\n\n\ncreateCanvas(100, 100, WEBGL);\nbackground(240, 240, 240);\nfill(237, 34, 93);\nnoStroke();\nbeginShape();\nvertex(0, 35);\nvertex(35, 0);\nvertex(0, -35);\nvertex(-35, 0);\nendShape();\n\n\n
\n\n\ncreateCanvas(100, 100, WEBGL);\nbackground(240, 240, 240);\nfill(237, 34, 93);\nnoStroke();\nbeginShape();\nvertex(-10, 10);\nvertex(0, 35);\nvertex(10, 10);\nvertex(35, 0);\nvertex(10, -8);\nvertex(0, -35);\nvertex(-10, -8);\nvertex(-35, 0);\nendShape();\n\n\n
\n\n\nstrokeWeight(3);\nstroke(237, 34, 93);\nbeginShape(LINES);\nvertex(10, 35);\nvertex(90, 35);\nvertex(10, 65);\nvertex(90, 65);\nvertex(35, 10);\nvertex(35, 90);\nvertex(65, 10);\nvertex(65, 90);\nendShape();\n\n\n
"
+ ],
+ alt:
+ '4 black points in a square shape in middle-right of canvas.\n4 points making a diamond shape.\n8 points making a star.\n8 points making 4 lines.\nA rotating 3D shape with a hollow section in the middle.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: 'Vertex',
+ overloads: [
+ {
+ line: 811,
+ params: [
+ {
+ name: 'x',
+ description: '\n// Click to change the number of sides.\n// In WebGL mode, custom shapes will only\n// display hollow fill sections when\n// all calls to vertex() use the same z-value.\n\nlet sides = 3;\nlet angle, px, py;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n fill(237, 34, 93);\n strokeWeight(3);\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n ngon(sides, 0, 0, 80);\n}\n\nfunction mouseClicked() {\n if (sides > 6) {\n sides = 3;\n } else {\n sides++;\n }\n}\n\nfunction ngon(n, x, y, d) {\n beginShape();\n for (let i = 0; i < n + 1; i++) {\n angle = TWO_PI / n * i;\n px = x + sin(angle) * d / 2;\n py = y - cos(angle) * d / 2;\n vertex(px, py, 0);\n }\n for (let i = 0; i < n + 1; i++) {\n angle = TWO_PI / n * i;\n px = x + sin(angle) * d / 4;\n py = y - cos(angle) * d / 4;\n vertex(px, py, 0);\n }\n endShape();\n}\n\nx-coordinate of the vertex
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the vertex
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 943, + params: [ + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: 'z-coordinate of the vertex
\n', + type: 'Number' + }, + { + name: 'u', + description: 'the vertex's texture u-coordinate
\n', + type: 'Number', + optional: true + }, + { + name: 'v', + description: 'the vertex's texture v-coordinate
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/constants.js', + line: 10, + description: 'The default, two-dimensional renderer.
\n', + itemtype: 'property', + name: 'P2D', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 16, + description: + 'One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z
\n', + itemtype: 'property', + name: 'WEBGL', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 25, + itemtype: 'property', + name: 'ARROW', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 30, + itemtype: 'property', + name: 'CROSS', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 35, + itemtype: 'property', + name: 'HAND', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 40, + itemtype: 'property', + name: 'MOVE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 45, + itemtype: 'property', + name: 'TEXT', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 50, + itemtype: 'property', + name: 'WAIT', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 58, + description: + 'HALF_PI is a mathematical constant with the value\n1.57079632679489661923. It is half the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().
\n', + itemtype: 'property', + name: 'HALF_PI', + type: 'Number', + final: 1, + example: ['\n\narc(50, 50, 80, 80, 0, HALF_PI);\nPI is a mathematical constant with the value\n3.14159265358979323846. It is the ratio of the circumference\nof a circle to its diameter. It is useful in combination with\nthe trigonometric functions sin() and cos().
\n', + itemtype: 'property', + name: 'PI', + type: 'Number', + final: 1, + example: ['\n\narc(50, 50, 80, 80, 0, PI);\nQUARTER_PI is a mathematical constant with the value 0.7853982.\nIt is one quarter the ratio of the circumference of a circle to\nits diameter. It is useful in combination with the trigonometric\nfunctions sin() and cos().
\n', + itemtype: 'property', + name: 'QUARTER_PI', + type: 'Number', + final: 1, + example: [ + '\n\narc(50, 50, 80, 80, 0, QUARTER_PI);\nTAU is an alias for TWO_PI, a mathematical constant with the\nvalue 6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().
\n', + itemtype: 'property', + name: 'TAU', + type: 'Number', + final: 1, + example: ['\n\narc(50, 50, 80, 80, 0, TAU);\nTWO_PI is a mathematical constant with the value\n6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().
\n', + itemtype: 'property', + name: 'TWO_PI', + type: 'Number', + final: 1, + example: ['\n\narc(50, 50, 80, 80, 0, TWO_PI);\nConstant to be used with angleMode() function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).
\n', + itemtype: 'property', + name: 'DEGREES', + type: 'String', + final: 1, + example: [ + "\n\nfunction setup() {\n angleMode(DEGREES);\n}\nConstant to be used with angleMode() function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).
\n', + itemtype: 'property', + name: 'RADIANS', + type: 'String', + final: 1, + example: [ + "\n\nfunction setup() {\n angleMode(RADIANS);\n}\nAUTO allows us to automatically set the width or height of an element (but not both),\nbased on the current height and width of the element. Only one parameter can\nbe passed to the size function as AUTO, at a time.
\n', + itemtype: 'property', + name: 'AUTO', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 360, + itemtype: 'property', + name: 'ALT', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 366, + itemtype: 'property', + name: 'BACKSPACE', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 371, + itemtype: 'property', + name: 'CONTROL', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 376, + itemtype: 'property', + name: 'DELETE', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 381, + itemtype: 'property', + name: 'DOWN_ARROW', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 386, + itemtype: 'property', + name: 'ENTER', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 391, + itemtype: 'property', + name: 'ESCAPE', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 396, + itemtype: 'property', + name: 'LEFT_ARROW', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 401, + itemtype: 'property', + name: 'OPTION', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 406, + itemtype: 'property', + name: 'RETURN', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 411, + itemtype: 'property', + name: 'RIGHT_ARROW', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 416, + itemtype: 'property', + name: 'SHIFT', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 421, + itemtype: 'property', + name: 'TAB', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 426, + itemtype: 'property', + name: 'UP_ARROW', + type: 'Number', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 433, + itemtype: 'property', + name: 'BLEND', + type: 'String', + final: 1, + default: 'source-over', + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 439, + itemtype: 'property', + name: 'REMOVE', + type: 'String', + final: 1, + default: 'destination-out', + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 445, + itemtype: 'property', + name: 'ADD', + type: 'String', + final: 1, + default: 'lighter', + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 453, + itemtype: 'property', + name: 'DARKEST', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 458, + itemtype: 'property', + name: 'LIGHTEST', + type: 'String', + final: 1, + default: 'lighten', + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 464, + itemtype: 'property', + name: 'DIFFERENCE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 469, + itemtype: 'property', + name: 'SUBTRACT', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 474, + itemtype: 'property', + name: 'EXCLUSION', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 479, + itemtype: 'property', + name: 'MULTIPLY', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 484, + itemtype: 'property', + name: 'SCREEN', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 489, + itemtype: 'property', + name: 'REPLACE', + type: 'String', + final: 1, + default: 'copy', + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 495, + itemtype: 'property', + name: 'OVERLAY', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 500, + itemtype: 'property', + name: 'HARD_LIGHT', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 505, + itemtype: 'property', + name: 'SOFT_LIGHT', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 510, + itemtype: 'property', + name: 'DODGE', + type: 'String', + final: 1, + default: 'color-dodge', + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 516, + itemtype: 'property', + name: 'BURN', + type: 'String', + final: 1, + default: 'color-burn', + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 524, + itemtype: 'property', + name: 'THRESHOLD', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 529, + itemtype: 'property', + name: 'GRAY', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 534, + itemtype: 'property', + name: 'OPAQUE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 539, + itemtype: 'property', + name: 'INVERT', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 544, + itemtype: 'property', + name: 'POSTERIZE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 549, + itemtype: 'property', + name: 'DILATE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 554, + itemtype: 'property', + name: 'ERODE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 559, + itemtype: 'property', + name: 'BLUR', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 566, + itemtype: 'property', + name: 'NORMAL', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 571, + itemtype: 'property', + name: 'ITALIC', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 576, + itemtype: 'property', + name: 'BOLD', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 581, + itemtype: 'property', + name: 'BOLDITALIC', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 593, + itemtype: 'property', + name: 'LINEAR', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 598, + itemtype: 'property', + name: 'QUADRATIC', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 603, + itemtype: 'property', + name: 'BEZIER', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 608, + itemtype: 'property', + name: 'CURVE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 615, + itemtype: 'property', + name: 'STROKE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 620, + itemtype: 'property', + name: 'FILL', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 625, + itemtype: 'property', + name: 'TEXTURE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 630, + itemtype: 'property', + name: 'IMMEDIATE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 638, + itemtype: 'property', + name: 'IMAGE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 646, + itemtype: 'property', + name: 'NEAREST', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 651, + itemtype: 'property', + name: 'REPEAT', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 656, + itemtype: 'property', + name: 'CLAMP', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 661, + itemtype: 'property', + name: 'MIRROR', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 668, + itemtype: 'property', + name: 'LANDSCAPE', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 673, + itemtype: 'property', + name: 'PORTRAIT', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 683, + itemtype: 'property', + name: 'GRID', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/constants.js', + line: 689, + itemtype: 'property', + name: 'AXES', + type: 'String', + final: 1, + class: 'p5', + module: 'Constants', + submodule: 'Constants' + }, + { + file: 'src/core/environment.js', + line: 20, + description: + 'The print() function writes to the console area of your browser.\nThis function is often helpful for looking at the data a program is\nproducing. This function creates a new line of text for each call to\nthe function. Individual elements can be\nseparated with quotes ("") and joined with the addition operator (+).
\nNote that calling print() without any arguments invokes the window.print()\nfunction which opens the browser's print dialog. To print a blank line\nto console you can write print('\\n').
\n', + itemtype: 'method', + name: 'print', + params: [ + { + name: 'contents', + description: + 'any combination of Number, String, Object, Boolean,\n Array to print
\n', + type: 'Any' + } + ], + example: [ + "\n\nlet x = 10;\nprint('The value of x is ' + x);\n// prints \"The value of x is 10\"\nThe system variable frameCount contains the number of frames that have\nbeen displayed since the program started. Inside setup() the value is 0,\nafter the first iteration of draw it is 1, etc.
\n', + itemtype: 'property', + name: 'frameCount', + type: 'Integer', + readonly: '', + example: [ + '\n\nfunction setup() {\n frameRate(30);\n textSize(30);\n textAlign(CENTER);\n}\n\nfunction draw() {\n background(200);\n text(frameCount, width / 2, height / 2);\n}\nThe system variable deltaTime contains the time\ndifference between the beginning of the previous frame and the beginning\nof the current frame in milliseconds.\n
\nThis variable is useful for creating time sensitive animation or physics\ncalculation that should stay constant regardless of frame rate.
\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n background(200);\n frameRate(fr); // Attempt to refresh at starting FPS\n clr = color(255, 0, 0);\n}\n\nfunction draw() {\n background(200);\n rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime\n\n if (rectX >= width) {\n // If you go off screen.\n if (fr === 30) {\n clr = color(0, 0, 255);\n fr = 10;\n frameRate(fr); // make frameRate 10 FPS\n } else {\n clr = color(255, 0, 0);\n fr = 30;\n frameRate(fr); // make frameRate 30 FPS\n }\n rectX = 0;\n }\n fill(clr);\n rect(rectX, 40, 20, 20);\n}\nConfirms if the window a p5.js program is in is "focused," meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n"true" if the window is focused and "false" if not.
\n', + itemtype: 'property', + name: 'focused', + type: 'Boolean', + readonly: '', + example: [ + '\n\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn\'t in!\nfunction draw() {\n background(200);\n noStroke();\n fill(0, 200, 0);\n ellipse(25, 25, 50, 50);\n\n if (!focused) {\n // or "if (focused === false)"\n stroke(200, 0, 0);\n line(0, 0, 100, 100);\n line(100, 0, 0, 100);\n }\n}\nSets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. The values for parameters x and y\nmust be less than the dimensions of the image.
\n', + itemtype: 'method', + name: 'cursor', + params: [ + { + name: 'type', + description: + 'Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n Native CSS properties: 'grab', 'progress', 'cell' etc.\n External: path for cursor's images\n (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n For more information on Native CSS cursors and url visit:\n https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
\n', + type: 'String|Constant' + }, + { + name: 'x', + description: + 'the horizontal active spot of the cursor (must be less than 32)
\n', + type: 'Number', + optional: true + }, + { + name: 'y', + description: + 'the vertical active spot of the cursor (must be less than 32)
\n', + type: 'Number', + optional: true + } + ], + example: [ + "\n\n// Move the mouse across the quadrants\n// to see the cursor change\nfunction draw() {\n line(width / 2, 0, width / 2, height);\n line(0, height / 2, width, height / 2);\n if (mouseX < 50 && mouseY < 50) {\n cursor(CROSS);\n } else if (mouseX > 50 && mouseY < 50) {\n cursor('progress');\n } else if (mouseX > 50 && mouseY > 50) {\n cursor('https://s3.amazonaws.com/mupublicdata/cursor.cur');\n } else {\n cursor('grab');\n }\n}\nSpecifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within setup() is\nrecommended. The default frame rate is based on the frame rate of the display\n(here also called "refresh rate"), which is set to 60 frames per second on most\ncomputers. A frame rate of 24 frames per second (usual for movies) or above\nwill be enough for smooth animations\nThis is the same as setFrameRate(val).\n
\nCalling frameRate() with no arguments returns the current framerate. The\ndraw function must run at least once before it will return a value. This\nis the same as getFrameRate().\n
\nCalling frameRate() with arguments that are not of the type numbers\nor are non positive also returns current framerate.
\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n background(200);\n frameRate(fr); // Attempt to refresh at starting FPS\n clr = color(255, 0, 0);\n}\n\nfunction draw() {\n background(200);\n rectX = rectX += 1; // Move Rectangle\n\n if (rectX >= width) {\n // If you go off screen.\n if (fr === 30) {\n clr = color(0, 0, 255);\n fr = 10;\n frameRate(fr); // make frameRate 10 FPS\n } else {\n clr = color(255, 0, 0);\n fr = 30;\n frameRate(fr); // make frameRate 30 FPS\n }\n rectX = 0;\n }\n fill(clr);\n rect(rectX, 40, 20, 20);\n}\nnumber of frames to be displayed every second
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 291, + params: [], + return: { + description: 'current frameRate', + type: 'Number' + } + } + ] + }, + { + file: 'src/core/environment.js', + line: 333, + description: 'Hides the cursor from view.
\n', + itemtype: 'method', + name: 'noCursor', + example: [ + '\n\nfunction setup() {\n noCursor();\n}\n\nfunction draw() {\n background(200);\n ellipse(mouseX, mouseY, 10, 10);\n}\nSystem variable that stores the width of the screen display according to The\ndefault pixelDensity. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.
\n', + itemtype: 'property', + name: 'displayWidth', + type: 'Number', + readonly: '', + example: [ + '\n\ncreateCanvas(displayWidth, displayHeight);\nSystem variable that stores the height of the screen display according to The\ndefault pixelDensity. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.
\n', + itemtype: 'property', + name: 'displayHeight', + type: 'Number', + readonly: '', + example: [ + '\n\ncreateCanvas(displayWidth, displayHeight);\nSystem variable that stores the width of the inner window, it maps to\nwindow.innerWidth.
\n', + itemtype: 'property', + name: 'windowWidth', + type: 'Number', + readonly: '', + example: [ + '\n\ncreateCanvas(windowWidth, windowHeight);\nSystem variable that stores the height of the inner window, it maps to\nwindow.innerHeight.
\n', + itemtype: 'property', + name: 'windowHeight', + type: 'Number', + readonly: '', + example: [ + '\n\ncreateCanvas(windowWidth, windowHeight);\nThe windowResized() function is called once every time the browser window\nis resized. This is a good place to resize the canvas or do any other\nadjustments to accommodate the new window size.
\n', + itemtype: 'method', + name: 'windowResized', + example: [ + '\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n background(0, 100, 200);\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\nSystem variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the createCanvas() function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\ncreateCanvas() is not used in a program.
\n', + itemtype: 'property', + name: 'width', + type: 'Number', + readonly: '', + class: 'p5', + module: 'Environment', + submodule: 'Environment' + }, + { + file: 'src/core/environment.js', + line: 494, + description: + 'System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the createCanvas() function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\ncreateCanvas() is not used in a program.
\n', + itemtype: 'property', + name: 'height', + type: 'Number', + readonly: '', + class: 'p5', + module: 'Environment', + submodule: 'Environment' + }, + { + file: 'src/core/environment.js', + line: 506, + description: + 'If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.
\n', + itemtype: 'method', + name: 'fullscreen', + params: [ + { + name: 'val', + description: + 'whether the sketch should be in fullscreen mode\nor not
\n', + type: 'Boolean', + optional: true + } + ], + return: { + description: 'current fullscreen state', + type: 'Boolean' + }, + example: [ + '\n\n
'
+ ],
+ alt: 'no display.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 557,
+ description:
+ '\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n background(200);\n}\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n let fs = fullscreen();\n fullscreen(!fs);\n }\n}\n\nSets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling pixelDensity() with no arguments returns\nthe current pixel density of the sketch.
\n', + itemtype: 'method', + name: 'pixelDensity', + chainable: 1, + example: [ + '\n\n
\n\nfunction setup() {\n pixelDensity(1);\n createCanvas(100, 100);\n background(200);\n ellipse(width / 2, height / 2, 50, 50);\n}\n\n\n
'
+ ],
+ alt:
+ 'fuzzy 50x50 white ellipse with black outline in center of canvas.\nsharp 50x50 white ellipse with black outline in center of canvas.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment',
+ overloads: [
+ {
+ line: 557,
+ params: [
+ {
+ name: 'val',
+ description: '\nfunction setup() {\n pixelDensity(3.0);\n createCanvas(100, 100);\n background(200);\n ellipse(width / 2, height / 2, 50, 50);\n}\n\nwhether or how much the sketch should scale
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + line: 592, + params: [], + return: { + description: 'current pixel density of the sketch', + type: 'Number' + } + } + ] + }, + { + file: 'src/core/environment.js', + line: 611, + description: + 'Returns the pixel density of the current display the sketch is running on.
\n', + itemtype: 'method', + name: 'displayDensity', + return: { + description: 'current pixel density of the display', + type: 'Number' + }, + example: [ + '\n\n
'
+ ],
+ alt: '50x50 white ellipse with black outline in center of canvas.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 666,
+ description: '\nfunction setup() {\n let density = displayDensity();\n pixelDensity(density);\n createCanvas(100, 100);\n background(200);\n ellipse(width / 2, height / 2, 50, 50);\n}\n\nGets the current URL.
\n', + itemtype: 'method', + name: 'getURL', + return: { + description: 'url', + type: 'String' + }, + example: [ + '\n\n
'
+ ],
+ alt:
+ 'current url (http://p5js.org/reference/#/p5/getURL) moves right to left.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/environment.js',
+ line: 695,
+ description: '\nlet url;\nlet x = 100;\n\nfunction setup() {\n fill(0);\n noStroke();\n url = getURL();\n}\n\nfunction draw() {\n background(200);\n text(url, x, height / 2);\n x--;\n}\n\nGets the current URL path as an array.
\n', + itemtype: 'method', + name: 'getURLPath', + return: { + description: 'path components', + type: 'String[]' + }, + example: [ + "\n\nfunction setup() {\n let urlPath = getURLPath();\n for (let i = 0; i < urlPath.length; i++) {\n text(urlPath[i], 10, i * 20 + 20);\n }\n}\nGets the current URL params as an Object.
\n', + itemtype: 'method', + name: 'getURLParams', + return: { + description: 'URL params', + type: 'Object' + }, + example: [ + "\n\n
"
+ ],
+ alt: 'no display.',
+ class: 'p5',
+ module: 'Environment',
+ submodule: 'Environment'
+ },
+ {
+ file: 'src/core/error_helpers.js',
+ line: 1,
+ requires: [
+ 'core\n\nThis is the main file for the Friendly Error System (FES). Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either (1) _validateParameters',
+ '(2) _friendlyFileLoadError',
+ '(3) _friendlyError',
+ 'or (4) helpForMisusedAtTopLevelCode.\n\nhelpForMisusedAtTopLevelCode is called by this file on window load to check for use\nof p5.js functions outside of setup() or draw()\nItems 1-3 above are called by functions in the p5 library located in other files.\n\n_friendlyFileLoadError is called by the loadX() methods.\n_friendlyError can be called by any function to offer a helpful error message.\n\n_validateParameters is called by functions in the p5.js API to help users ensure\nther are calling p5 function with the right parameter types. The property\ndisableFriendlyErrors = false can be set from a p5.js sketch to turn off parameter\nchecking. The call sequence from _validateParameters looks something like this:\n\n_validateParameters\n lookupParamDoc\n scoreOverload\n testParamTypes\n testParamType\n getOverloadErrors\n _friendlyParamError\n ValidationError\n report\n friendlyWelcome\n\nThe call sequences to _friendlyFileLoadError and _friendlyError are like this:\n_friendlyFileLoadError\n report\n\n_friendlyError\n report\n\nreport() is the main function that prints directly to console with the output\nof the error helper message. Note: friendlyWelcome() also prints to console directly.'
+ ],
+ class: 'p5',
+ module: 'Environment'
+ },
+ {
+ file: 'src/core/error_helpers.js',
+ line: 600,
+ description:
+ '\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n let params = getURLParams();\n text(params.day, 10, 20);\n text(params.month, 10, 40);\n text(params.year, 10, 60);\n}\n\nValidates parameters\nparam {String} func the name of the function\nparam {Array} args user input arguments
\nexample:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n "It looks like ellipse received an empty variable in spot #2."
\nexample:\n ellipse(10,"foo",5,5);\nconsole output:\n "ellipse was expecting a number for parameter #1,\n received "foo" instead."
\n', + class: 'p5', + module: 'Environment' + }, + { + file: 'src/core/error_helpers.js', + line: 661, + description: + 'Prints out all the colors in the color pallete with white text.\nFor color blindness testing.
\n', + class: 'p5', + module: 'Environment' + }, + { + file: 'src/core/helpers.js', + line: 1, + requires: ['constants'], + class: 'p5', + module: 'Environment' + }, + { + file: 'src/core/legacy.js', + line: 1, + requires: [ + 'core\nThese are functions that are part of the Processing API but are not part of\nthe p5.js API. In some cases they have a new name', + 'in others', + 'they are\nremoved completely. Not all unsupported Processing functions are listed here\nbut we try to include ones that a user coming from Processing might likely\ncall.' + ], + class: 'p5', + module: 'Environment' + }, + { + file: 'src/core/main.js', + line: 41, + description: + 'Called directly before setup(), the preload() function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, setup() will wait until any load calls within have\nfinished. Nothing besides load calls (loadImage, loadJSON, loadFont,\nloadStrings, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in setup()\nor anywhere else with the use of a callback parameter.\n
\nBy default the text "loading..." will be displayed. To make your own\nloading page, include an HTML element with id "p5_loading" in your\npage. More information here.
\nlet img;\nlet c;\nfunction preload() {\n // preload() runs once\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n // setup() waits until preload() is done\n img.loadPixels();\n // get color of middle pixel\n c = img.get(img.width / 2, img.height / 2);\n}\n\nfunction draw() {\n background(c);\n image(img, 25, 25, 50, 50);\n}\nThe setup() function is called once when the program starts. It's used to\ndefine initial environment properties such as screen size and background\ncolor and to load media such as images and fonts as the program starts.\nThere can only be one setup() function for each program and it shouldn't\nbe called again after its initial execution.\n
\nNote: Variables declared within setup() are not accessible within other\nfunctions, including draw().
\nlet a = 0;\n\nfunction setup() {\n background(0);\n noStroke();\n fill(102);\n}\n\nfunction draw() {\n rect(a++ % width, 10, 2, 80);\n}\nCalled directly after setup(), the draw() function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor noLoop() is called. Note if noLoop() is called in setup(), draw() will\nstill be executed once before stopping. draw() is called automatically and\nshould never be called explicitly.\n
\nIt should always be controlled with noLoop(), redraw() and loop(). After\nnoLoop() stops the code in draw() from executing, redraw() causes the\ncode inside draw() to execute once, and loop() will cause the code\ninside draw() to resume executing continuously.\n
\nThe number of times draw() executes in each second may be controlled with\nthe frameRate() function.\n
\nThere can only be one draw() function for each sketch, and draw() must\nexist if you want the code to run continuously, or to process events such\nas mousePressed(). Sometimes, you might have an empty call to draw() in\nyour program, as shown in the above example.\n
\nIt is important to note that the drawing coordinate system will be reset\nat the beginning of each draw() call. If any transformations are performed\nwithin draw() (ex: scale, rotate, translate), their effects will be\nundone at the beginning of draw(), so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.
\nlet yPos = 0;\nfunction setup() {\n // setup() runs once\n frameRate(30);\n}\nfunction draw() {\n // draw() loops forever, until stopped\n background(204);\n yPos = yPos - 1;\n if (yPos < 0) {\n yPos = height;\n }\n line(0, yPos, width, yPos);\n}\nRemoves the entire p5 sketch. This will remove the canvas and any\nelements created by p5.js. It will also stop the draw loop and unbind\nany properties or methods from the window global scope. It will\nleave a variable p5 in case you wanted to create a new p5 sketch.\nIf you like, you can set p5 = null to erase it. While all functions and\nvariables and objects created by the p5 library will be removed, any\nother global variables created by your code will remain.
\n', + itemtype: 'method', + name: 'remove', + example: [ + "\n\nfunction draw() {\n ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n remove(); // remove whole sketch on mouse press\n}\nAllows for the friendly error system (FES) to be turned off when creating a sketch,\nwhich can give a significant boost to performance when needed.\nSee \ndisabling the friendly error system.
\n", + itemtype: 'property', + name: 'disableFriendlyErrors', + type: 'Boolean', + example: [ + '\n\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n createCanvas(100, 50);\n}\nUnderlying HTML element. All normal HTML methods can be called on this.
\n', + example: [ + "\n\n
"
+ ],
+ itemtype: 'property',
+ name: 'elt',
+ readonly: '',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 46,
+ description:
+ '\nfunction setup() {\n let c = createCanvas(50, 50);\n c.elt.style.border = '5px solid red';\n}\n\nfunction draw() {\n background(220);\n}\n\nAttaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or p5.Element. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n \n positioning the canvas wiki page.
\n', + itemtype: 'method', + name: 'parent', + chainable: 1, + example: [ + "\n\n // in the html file:\n // <div id=\"myContainer\"></div>\n// in the js file:\n let cnv = createCanvas(100, 100);\n cnv.parent('myContainer');\n \n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n \n let div0 = createDiv('this is the parent');\n div0.id('apples');\n let div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n \n let elt = document.getElementById('myParentDiv');\n let div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n the ID, DOM node, or p5.Element\n of desired parent element
\n', + type: 'String|p5.Element|Object' + } + ], + chainable: 1 + }, + { + line: 89, + params: [], + return: { + description: '', + type: 'p5.Element' + } + } + ] + }, + { + file: 'src/core/p5.Element.js', + line: 111, + description: + 'Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.\n Note that only one element can have a particular id in a page.\n The .class() function can be used\n to identify multiple elements with the same class name.
\n', + itemtype: 'method', + name: 'id', + chainable: 1, + example: [ + "\n\n function setup() {\n let cnv = createCanvas(100, 100);\n // Assigns a CSS selector ID to\n // the canvas element.\n cnv.id('mycanvas');\n }\n ID of the element
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + line: 136, + params: [], + return: { + description: 'the id of the element', + type: 'String' + } + } + ] + }, + { + file: 'src/core/p5.Element.js', + line: 151, + description: + 'Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.
\n', + itemtype: 'method', + name: 'class', + chainable: 1, + example: [ + "\n\n function setup() {\n let cnv = createCanvas(100, 100);\n // Assigns a CSS selector class 'small'\n // to the canvas element.\n cnv.class('small');\n }\n class to add
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + line: 173, + params: [], + return: { + description: 'the class of the element', + type: 'String' + } + } + ] + }, + { + file: 'src/core/p5.Element.js', + line: 186, + description: + 'The .mousePressed() function is called once after every time a\nmouse button is pressed over the element.\nSome mobile browsers may also trigger this event on a touch screen,\nif the user performs a quick tap.\nThis can be used to attach element specific event listeners.
\n', + itemtype: 'method', + name: 'mousePressed', + params: [ + { + name: 'fxn', + description: + 'function to be fired when mouse is\n pressed over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mousePressed(changeGray); // attach listener for\n // canvas click only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n g = random(0, 255);\n}\nThe .doubleClicked() function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.
\n', + itemtype: 'method', + name: 'doubleClicked', + params: [ + { + name: 'fxn', + description: + 'function to be fired when mouse is\n double clicked over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.doubleClicked(changeGray); // attach listener for\n // canvas double click only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any double click anywhere\nfunction doubleClicked() {\n d = d + 10;\n}\n\n// this function fires only when cnv is double clicked\nfunction changeGray() {\n g = random(0, 255);\n}\nThe .mouseWheel() function is called once after every time a\nmouse wheel is scrolled over the element. This can be used to\nattach element specific event listeners.\n
\nThe function accepts a callback function as argument which will be executed\nwhen the wheel event is triggered on the element, the callback function is\npassed one argument event. The event.deltaY property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The event.deltaX does the same as event.deltaY\nexcept it reads the horizontal wheel scroll of the mouse wheel.\n
\nOn OS X with "natural" scrolling enabled, the event.deltaY values are\nreversed.
function to be fired when mouse is\n scrolled over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseWheel(changeSize); // attach listener for\n // activity on canvas only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize(event) {\n if (event.deltaY > 0) {\n d = d + 10;\n } else {\n d = d - 10;\n }\n}\nThe .mouseReleased() function is called once after every time a\nmouse button is released over the element.\nSome mobile browsers may also trigger this event on a touch screen,\nif the user performs a quick tap.\nThis can be used to attach element specific event listeners.
\n', + itemtype: 'method', + name: 'mouseReleased', + params: [ + { + name: 'fxn', + description: + 'function to be fired when mouse is\n released over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseReleased(changeGray); // attach listener for\n // activity on canvas only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n g = random(0, 255);\n}\nThe .mouseClicked() function is called once after a mouse button is\npressed and released over the element.\nSome mobile browsers may also trigger this event on a touch screen,\nif the user performs a quick tap.\nThis can be used to attach element specific event listeners.
\n', + itemtype: 'method', + name: 'mouseClicked', + params: [ + { + name: 'fxn', + description: + 'function to be fired when mouse is\n clicked over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\n
'
+ ],
+ alt: 'no display.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/core/p5.Element.js',
+ line: 472,
+ description:
+ '\nlet cnv;\nlet d;\nlet g;\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseClicked(changeGray); // attach listener for\n // activity on canvas only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// clicked anywhere\nfunction mouseClicked() {\n d = d + 10;\n}\n\n// this function fires after the mouse has been\n// clicked on canvas\nfunction changeGray() {\n g = random(0, 255);\n}\n\nThe .mouseMoved() function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.
\n', + itemtype: 'method', + name: 'mouseMoved', + params: [ + { + name: 'fxn', + description: + 'function to be fired when a mouse moves\n over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d = 30;\nlet g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseMoved(changeSize); // attach listener for\n // activity on canvas only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n fill(200);\n ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n g = g + 5;\n if (g > 255) {\n g = 0;\n }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n d = d + 2;\n if (d > 100) {\n d = 0;\n }\n}\nThe .mouseOver() function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.
\n', + itemtype: 'method', + name: 'mouseOver', + params: [ + { + name: 'fxn', + description: + 'function to be fired when a mouse moves\n onto the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseOver(changeGray);\n d = 10;\n}\n\nfunction draw() {\n ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n d = d + 10;\n if (d > 100) {\n d = 0;\n }\n}\nThe .mouseOut() function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.
\n', + itemtype: 'method', + name: 'mouseOut', + params: [ + { + name: 'fxn', + description: + 'function to be fired when a mouse\n moves off of an element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mouseOut(changeGray);\n d = 10;\n}\n\nfunction draw() {\n ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n d = d + 10;\n if (d > 100) {\n d = 0;\n }\n}\nThe .touchStarted() function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.
\n', + itemtype: 'method', + name: 'touchStarted', + params: [ + { + name: 'fxn', + description: + 'function to be fired when a touch\n starts over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.touchStarted(changeGray); // attach listener for\n // canvas click only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n g = random(0, 255);\n}\nThe .touchMoved() function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.
\n', + itemtype: 'method', + name: 'touchMoved', + params: [ + { + name: 'fxn', + description: + 'function to be fired when a touch moves over\n the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.touchMoved(changeGray); // attach listener for\n // canvas click only\n g = 100;\n}\n\nfunction draw() {\n background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n g = random(0, 255);\n}\nThe .touchEnded() function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.
\n', + itemtype: 'method', + name: 'touchEnded', + params: [ + { + name: 'fxn', + description: + 'function to be fired when a touch ends\n over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.touchEnded(changeGray); // attach listener for\n // canvas click only\n d = 10;\n g = 100;\n}\n\nfunction draw() {\n background(g);\n ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n g = random(0, 255);\n}\nThe .dragOver() function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.
\n', + itemtype: 'method', + name: 'dragOver', + params: [ + { + name: 'fxn', + description: + 'function to be fired when a file is\n dragged over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\n// To test this sketch, simply drag a\n// file over the canvas\nfunction setup() {\n let c = createCanvas(100, 100);\n background(200);\n textAlign(CENTER);\n text('Drag file', width / 2, height / 2);\n c.dragOver(dragOverCallback);\n}\n\n// This function will be called whenever\n// a file is dragged over the canvas\nfunction dragOverCallback() {\n background(240);\n text('Dragged over', width / 2, height / 2);\n}\nThe .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.
\n', + itemtype: 'method', + name: 'dragLeave', + params: [ + { + name: 'fxn', + description: + 'function to be fired when a file is\n dragged off the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\n// To test this sketch, simply drag a file\n// over and then out of the canvas area\nfunction setup() {\n let c = createCanvas(100, 100);\n background(200);\n textAlign(CENTER);\n text('Drag file', width / 2, height / 2);\n c.dragLeave(dragLeaveCallback);\n}\n\n// This function will be called whenever\n// a file is dragged out of the canvas\nfunction dragLeaveCallback() {\n background(240);\n text('Dragged off', width / 2, height / 2);\n}\nHelper fxn for sharing pixel methods
\n', + class: 'p5.Element', + module: 'DOM', + submodule: 'DOM' + }, + { + file: 'src/core/p5.Graphics.js', + line: 63, + description: + "Resets certain values such as those modified by functions in the Transform category\nand in the Lights category that are not automatically reset\nwith graphics buffer objects. Calling this in draw() will copy the behavior\nof the standard canvas.
\n", + itemtype: 'method', + name: 'reset', + example: [ + "\n\n\nlet pg;\nfunction setup() {\n createCanvas(100, 100);\n background(0);\n pg = createGraphics(50, 100);\n pg.fill(0);\n frameRate(5);\n}\nfunction draw() {\n image(pg, width / 2, 0);\n pg.background(255);\n // p5.Graphics object behave a bit differently in some cases\n // The normal canvas on the left resets the translate\n // with every loop through draw()\n // the graphics object on the right doesn't automatically reset\n // so translate() is additive and it moves down the screen\n rect(0, 0, width / 2, 5);\n pg.rect(0, 0, width / 2, 5);\n translate(0, 5, 0);\n pg.translate(0, 5, 0);\n}\nfunction mouseClicked() {\n // if you click you will see that\n // reset() resets the translate back to the initial state\n // of the Graphics object\n pg.reset();\n}\nRemoves a Graphics object from the page and frees any resources\nassociated with it.
\n', + itemtype: 'method', + name: 'remove', + example: [ + "\n\nlet bg;\nfunction setup() {\n bg = createCanvas(100, 100);\n bg.background(0);\n image(bg, 0, 0);\n bg.remove();\n}\n\nlet bg;\nfunction setup() {\n pixelDensity(1);\n createCanvas(100, 100);\n stroke(255);\n fill(0);\n\n // create and draw the background image\n bg = createGraphics(100, 100);\n bg.background(200);\n bg.ellipse(50, 50, 80, 80);\n}\nfunction draw() {\n let t = millis() / 1000;\n // draw the background\n if (bg) {\n image(bg, frameCount % 100, 0);\n image(bg, frameCount % 100 - 100, 0);\n }\n // draw the foreground\n let p = p5.Vector.fromAngle(t, 35).add(50, 50);\n ellipse(p.x, p.y, 30);\n}\nfunction mouseClicked() {\n // remove the background\n if (bg) {\n bg.remove();\n bg = null;\n }\n}\nResize our canvas element.
\n', + class: 'p5.Renderer', + module: 'Rendering', + submodule: 'Rendering' + }, + { + file: 'src/core/p5.Renderer.js', + line: 334, + description: 'Helper fxn to check font type (system or otf)
\n', + class: 'p5.Renderer', + module: 'Rendering', + submodule: 'Rendering' + }, + { + file: 'src/core/p5.Renderer.js', + line: 386, + description: + 'Helper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178
\n', + class: 'p5.Renderer', + module: 'Rendering', + submodule: 'Rendering' + }, + { + file: 'src/core/p5.Renderer2D.js', + line: 7, + description: + 'p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer
\n', + class: 'p5', + module: 'Rendering' + }, + { + file: 'src/core/p5.Renderer2D.js', + line: 385, + description: + 'Generate a cubic Bezier representing an arc on the unit circle of total\nangle size radians, beginning start radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.
See www.joecridge.me/bezier.pdf for an explanation of the method.
\n', + class: 'p5', + module: 'Rendering' + }, + { + file: 'src/core/reference.js', + line: 7, + description: + 'Creates and names a new variable. A variable is a container for a value.
\nVariables that are declared with let will have block-scope.\nThis means that the variable only exists within the \nblock that it is created within.
\nFrom the MDN entry:\nDeclares a block scope local variable, optionally initializing it to a value.
\n', + itemtype: 'property', + name: 'let', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Declaration'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 31,
+ description:
+ '\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n\nCreates and names a new constant. Like a variable created with let, a constant\nthat is created with const is a container for a value,\nhowever constants cannot be changed once they are declared.
\nConstants have block-scope. This means that the constant only exists within\nthe \nblock that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.
\nFrom the MDN entry:\nDeclares a read-only named constant.\nConstants are block-scoped, much like variables defined using the 'let' statement.\nThe value of a constant can't be changed through reassignment, and it can't be redeclared.
\n', + itemtype: 'property', + name: 'const', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Declaration'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 61,
+ description:
+ '\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n\nThe strict equality operator ===\nchecks to see if two values are equal and of the same type.
\nA comparison expression always evaluates to a boolean.
\nFrom the MDN entry:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.
\nNote: In some examples around the web you may see a double-equals-sign\n==,\nused for comparison instead. This is the non-strict equality operator in Javascript.\nThis will convert the two values being compared to the same type before comparing them.
\n', + itemtype: 'property', + name: '===', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Comparison Operators'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 86,
+ description:
+ '\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n\nThe greater than operator >\nevaluates to true if the left value is greater than\nthe right value.
\nThere is more info on comparison operators on MDN.
\n', + itemtype: 'property', + name: '>', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Comparison Operators'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 105,
+ description:
+ '\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n\nThe greater than or equal to operator >=\nevaluates to true if the left value is greater than or equal to\nthe right value.
\nThere is more info on comparison operators on MDN.
\n', + itemtype: 'property', + name: '>=', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Comparison Operators'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 124,
+ description:
+ '\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n\nThe less than operator <\nevaluates to true if the left value is less than\nthe right value.
\nThere is more info on comparison operators on MDN.
\n', + itemtype: 'property', + name: '<', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Comparison Operators'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 143,
+ description:
+ '\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n\nThe less than or equal to operator <=\nevaluates to true if the left value is less than or equal to\nthe right value.
\nThere is more info on comparison operators on MDN.
\n', + itemtype: 'property', + name: '<=', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Comparison Operators'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 166,
+ description:
+ '\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n\nThe if-else statement helps control the flow of your code.
\nA condition is placed between the parenthesis following 'if',\nwhen that condition evalues to truthy,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to falsy,\nthe code between the curly braces that follow 'else' is run instead.
\nFrom the MDN entry:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed
\n', + itemtype: 'property', + name: 'if-else', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Control Statement'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 197,
+ description:
+ '\nlet a = 4;\nif (a > 0) {\n console.log('positive');\n} else {\n console.log('negative');\n}\n\nCreates and names a function.\nA function is a set of statements that perform a task.
\nOptionally, functions can have parameters. Parameters\nare variables that are scoped to the function, that can be assigned a value when calling the function.
\nFrom the MDN entry:\nDeclares a function with the specified parameters.
\n', + itemtype: 'property', + name: 'function', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Function'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 220,
+ description:
+ '\nlet myName = 'Hridi';\nfunction sayHello(name) {\n console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n\nSpecifies the value to be returned by a function.\nFor more info checkout \nthe MDN entry for return.
\n', + itemtype: 'property', + name: 'return', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Function'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 241,
+ description:
+ '\nfunction calculateSquare(x) {\n return x * x;\n}\ncalculateSquare(4); // returns 16\n\nA boolean is one of the 7 primitive data types in Javascript.\nA boolean can only be true or false.
From the MDN entry:\nBoolean represents a logical entity and can have two values: true, and false.
\n', + itemtype: 'property', + name: 'boolean', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Types'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 259,
+ description:
+ '\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n\nA string is one of the 7 primitive data types in Javascript.\nA string is a series of text characters. In Javascript, a string value must be surrounded by either single-quotation marks(') or double-quotation marks(").
\nFrom the MDN entry:\nA string is a sequence of characters used to represent text.
\n', + itemtype: 'property', + name: 'string', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Types'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 277,
+ description:
+ '\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n\nA number is one of the 7 primitive data types in Javascript.\nA number can be a whole number or a decimal number.
\n\n', + itemtype: 'property', + name: 'number', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Types'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 294,
+ description:
+ '\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n\nFrom MDN's object basics:\n An object is a collection of related data and/or functionality (which usually consists of several variables and functions —\n which are called properties and methods when they are inside objects.)
\n', + itemtype: 'property', + name: 'object', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Types'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 321,
+ description:
+ '\n let author = {\n name: 'Ursula K Le Guin',\n books: [\n 'The Left Hand of Darkness',\n 'The Dispossessed',\n 'A Wizard of Earthsea'\n ]\n };\n console.log(author.name); // prints 'Ursula K Le Guin' to the console\n \n Creates and names a class which is a template for the creation of objects.
\nFrom the MDN entry:\nThe class declaration creates a new Class with a given name using prototype-based inheritance.
\n', + itemtype: 'property', + name: 'class', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Classes'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 348,
+ description:
+ '\nclass Rectangle {\n constructor(name, height, width) {\n this.name = name;\n this.height = height;\n this.width = width;\n }\n}\nlet square = new Rectangle('square', 1, 1); // creating new instance of Polygon Class.\nconsole.log(square.width); // prints '1' to the console\n\nfor creates a loop that is useful for executing one section of code multiple times.
\nA 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.\nThese expressions are used to control the number of times the loop is run.\nThe first expression is a statement that is used to set the initial state for the loop.\nThe second expression is a condition that you would like to check before each loop. If this expression returns\nfalse then the loop will exit.\nThe third expression is executed at the end of each loop.
\nThe code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.
\nAs with any loop, it is important to ensure that the loop can 'exit', or that\nthe test condition will eventually evaluate to false. The test condition with a for loop\nis the second expression detailed above. Ensuring that this expression can eventually\nbecome false ensures that your loop doesn't attempt to run an infinite amount of times,\nwhich can crash your browser.
\nFrom the MDN entry:\nCreates a loop that executes a specified statement until the test condition evaluates to false.\nThe condition is evaluated after executing the statement, resulting in the specified statement executing at least once.
\n', + itemtype: 'property', + name: 'for', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Iterative Statement'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 382,
+ description:
+ '\nfor (let i = 0; i < 9; i++) {\n console.log(i);\n}\n\nwhile creates a loop that is useful for executing one section of code multiple times.
\nWith a 'while loop', the code inside of the loop body (between the curly braces) is run repeatedly until the test condition\n(inside of the parenthesis) evaluates to false. Unlike a for loop, the condition is tested before executing the code body with while,\nso if the condition is initially false the loop body, or statement, will never execute.
\nAs with any loop, it is important to ensure that the loop can 'exit', or that\nthe test condition will eventually evaluate to false. This is to keep your loop from trying to run an infinite amount of times,\nwhich can crash your browser.
\nFrom the MDN entry:\nThe while statement creates a loop that executes a specified statement as long as the test condition evaluates to true.\nThe condition is evaluated before executing the statement.
\n', + itemtype: 'property', + name: 'while', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Foundation',
+ submodule: 'Iterative Statement'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 420,
+ description:
+ '\n// This example logs the lines below to the console\n// 4\n// 3\n// 2\n// 1\n// 0\nlet num = 5;\nwhile (num > 0) {\n num = num - 1;\n console.log(num);\n}\n\nFrom the MDN entry:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON string.
\n', + itemtype: 'method', + name: 'stringify', + static: 1, + params: [ + { + name: 'object', + description: + ':Javascript object that you would like to convert to JSON
\n', + type: 'Object' + } + ], + example: [ + '\n\n
'
+ ],
+ class: 'JSON',
+ module: 'Foundation',
+ submodule: 'JS Method'
+ },
+ {
+ file: 'src/core/reference.js',
+ line: 439,
+ description:
+ '\nlet myObject = { x: 5, y: 6 };\nlet myObjectAsString = JSON.stringify(myObject);\nconsole.log(myObjectAsString); // prints "{"x":5,"y":6}" to the console\nconsole.log(typeof myObjectAsString); // prints \'string\' to the console\n\nPrints a message to your browser's web console. When using p5, you can use print\nand console.log interchangeably.
\nThe console is opened differently depending on which browser you are using.\nHere are links on how to open the console in Firefox\n, Chrome, Edge,\nand Safari. With the online p5 editor the\nconsole is embedded directly in the page underneath the code editor.
\nFrom the MDN entry:\nThe Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values),\nor it may be any one or more JavaScript objects.
\n', + itemtype: 'method', + name: 'log', + static: 1, + params: [ + { + name: 'message', + description: + ':Message that you would like to print to the console
\n', + type: 'String|Expression|Object' + } + ], + example: [ + "\n\n
"
+ ],
+ class: 'console',
+ module: 'Foundation',
+ submodule: 'JS Method'
+ },
+ {
+ file: 'src/core/rendering.js',
+ line: 15,
+ description:
+ '\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n\nCreates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling createCanvas more than once in a sketch will result in very\nunpredictable behavior. If you want more than one drawing canvas\nyou could use createGraphics (hidden by default but it can be shown).\n
\nThe system variables width and height are set by the parameters passed\nto this function. If createCanvas() is not used, the window will be\ngiven a default size of 100x100 pixels.\n
\nFor more ways to position the canvas, see the\n\npositioning the canvas wiki page.
width of the canvas
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height of the canvas
\n', + type: 'Number' + }, + { + name: 'renderer', + description: 'either P2D or WEBGL
\n', + type: 'Constant', + optional: true + } + ], + return: { + description: '', + type: 'p5.Renderer' + }, + example: [ + '\n\n
'
+ ],
+ alt: 'Black line extending from top-left of canvas to bottom right.',
+ class: 'p5',
+ module: 'Rendering',
+ submodule: 'Rendering'
+ },
+ {
+ file: 'src/core/rendering.js',
+ line: 115,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 50);\n background(153);\n line(0, 0, width, height);\n}\n\nResizes the canvas to given width and height. The canvas will be cleared\nand draw will be called immediately, allowing the sketch to re-render itself\nin the resized canvas.
\n', + itemtype: 'method', + name: 'resizeCanvas', + params: [ + { + name: 'w', + description: 'width of the canvas
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height of the canvas
\n', + type: 'Number' + }, + { + name: 'noRedraw', + description: 'don't redraw the canvas immediately
\n', + type: 'Boolean', + optional: true + } + ], + example: [ + '\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n background(0, 100, 200);\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\nRemoves the default canvas for a p5 sketch that doesn't\nrequire a canvas
\n', + itemtype: 'method', + name: 'noCanvas', + example: [ + '\n\n
'
+ ],
+ alt: 'no image displayed',
+ class: 'p5',
+ module: 'Rendering',
+ submodule: 'Rendering'
+ },
+ {
+ file: 'src/core/rendering.js',
+ line: 193,
+ description:
+ '\nfunction setup() {\n noCanvas();\n}\n\nCreates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.
\n', + itemtype: 'method', + name: 'createGraphics', + params: [ + { + name: 'w', + description: 'width of the offscreen graphics buffer
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height of the offscreen graphics buffer
\n', + type: 'Number' + }, + { + name: 'renderer', + description: 'either P2D or WEBGL\nundefined defaults to p2d
\n', + type: 'Constant', + optional: true + } + ], + return: { + description: 'offscreen graphics buffer', + type: 'p5.Graphics' + }, + example: [ + '\n\n
'
+ ],
+ alt:
+ '4 grey squares alternating light and dark grey. White quarter circle mid-left.',
+ class: 'p5',
+ module: 'Rendering',
+ submodule: 'Rendering'
+ },
+ {
+ file: 'src/core/rendering.js',
+ line: 232,
+ description:
+ "\nlet pg;\nfunction setup() {\n createCanvas(100, 100);\n pg = createGraphics(100, 100);\n}\nfunction draw() {\n background(200);\n pg.background(100);\n pg.noStroke();\n pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);\n image(pg, 50, 50);\n image(pg, 0, 0, 50, 50);\n}\n\nBlends the pixels in the display window according to the defined mode.\nThere is a choice of the following modes to blend the source pixels (A)\nwith the ones of pixels already in the display window (B):
\n- \n
BLEND- linear interpolation of colours: C =\nA\\*factor + B. This is the default blending mode. \nADD- sum of A and B \nDARKEST- only the darkest colour succeeds: C =\nmin(A\\*factor, B). \nLIGHTEST- only the lightest colour succeeds: C =\nmax(A\\*factor, B). \nDIFFERENCE- subtract colors from underlying image. \nEXCLUSION- similar toDIFFERENCE, but less\nextreme. \nMULTIPLY- multiply the colors, result will always be\ndarker. \nSCREEN- opposite multiply, uses inverse values of the\ncolors. \nREPLACE- the pixels entirely replace the others and\ndon't utilize alpha (transparency) values. \nREMOVE- removes pixels from B with the alpha strength of A. \nOVERLAY- mix ofMULTIPLYandSCREEN\n. Multiplies dark values, and screens light values. (2D) \nHARD_LIGHT-SCREENwhen greater than 50%\ngray,MULTIPLYwhen lower. (2D) \nSOFT_LIGHT- mix ofDARKESTand\nLIGHTEST. Works likeOVERLAY, but not as harsh. (2D)\n \nDODGE- lightens light tones and increases contrast,\nignores darks. (2D) \nBURN- darker areas are applied, increasing contrast,\nignores lights. (2D) \nSUBTRACT- remainder of A and B (3D) \n
\n(2D) indicates that this blend mode only works in the 2D renderer.
\n(3D) indicates that this blend mode only works in the WEBGL renderer.", + itemtype: 'method', + name: 'blendMode', + params: [ + { + name: 'mode', + description: + '
blend mode to set for canvas.\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
\n', + type: 'Constant' + } + ], + example: [ + '\n\n
\n\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n\n\n
'
+ ],
+ alt:
+ 'translucent image thick red & blue diagonal rounded lines intersecting center\nThick red & blue diagonal rounded lines intersecting center. dark at overlap',
+ class: 'p5',
+ module: 'Rendering',
+ submodule: 'Rendering'
+ },
+ {
+ file: 'src/core/shim.js',
+ line: 18,
+ description:
+ '\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.
\n', + class: 'p5', + module: 'Rendering' + }, + { + file: 'src/core/shim.js', + line: 39, + description: + 'this is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from https://github.com/ljharb/object.assign
\n', + class: 'p5', + module: 'Rendering' + }, + { + file: 'src/core/structure.js', + line: 10, + description: + 'Stops p5.js from continuously executing the code within draw().\nIf loop() is called, the code in draw() begins to run continuously again.\nIf using noLoop() in setup(), it should be the last line inside the block.\n
\nWhen noLoop() is used, it's not possible to manipulate or access the\nscreen inside event handling functions such as mousePressed() or\nkeyPressed(). Instead, use those functions to call redraw() or loop(),\nwhich will run draw(), which can update the screen properly. This means\nthat when noLoop() has been called, no drawing can happen, and functions\nlike saveFrame() or loadPixels() may not be used.\n
\nNote that if the sketch is resized, redraw() will be called to update\nthe sketch, even after noLoop() has been specified. Otherwise, the sketch\nwould enter an odd state until loop() was called.
\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n noLoop();\n}\n\nfunction draw() {\n line(10, 10, 90, 90);\n}\n\nlet x = 0;\nfunction setup() {\n createCanvas(100, 100);\n}\n\nfunction draw() {\n background(204);\n x = x + 0.1;\n if (x > width) {\n x = 0;\n }\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n noLoop();\n}\n\nfunction mouseReleased() {\n loop();\n}\nBy default, p5.js loops through draw() continuously, executing the code\nwithin it. However, the draw() loop may be stopped by calling noLoop().\nIn that case, the draw() loop can be resumed with loop().
\nAvoid calling loop() from inside setup().
\n', + itemtype: 'method', + name: 'loop', + example: [ + '\n\nlet x = 0;\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n}\n\nfunction draw() {\n background(204);\n x = x + 0.1;\n if (x > width) {\n x = 0;\n }\n line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n loop();\n}\n\nfunction mouseReleased() {\n noLoop();\n}\nThe push() function saves the current drawing style settings and\ntransformations, while pop() restores these settings. Note that these\nfunctions are always used together. They allow you to change the style\nand transformation settings and later return to what you had. When a new\nstate is started with push(), it builds on the current style and transform\ninformation. The push() and pop() functions can be embedded to provide\nmore control. (See the second example for a demonstration.)\n
\npush() stores information related to the current transformation state\nand style settings controlled by the following functions:\nfill(),\nnoFill(),\nnoStroke(),\nstroke(),\ntint(),\nnoTint(),\nstrokeWeight(),\nstrokeCap(),\nstrokeJoin(),\nimageMode(),\nrectMode(),\nellipseMode(),\ncolorMode(),\ntextAlign(),\ntextFont(),\ntextSize(),\ntextLeading(),\napplyMatrix(),\nresetMatrix(),\nrotate(),\nscale(),\nshearX(),\nshearY(),\ntranslate(),\nnoiseSeed().\n
\nIn WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(),\npointLight(), texture(), specularMaterial(), shininess(), normalMaterial()\nand shader().
\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\ntranslate(50, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n\n
'
+ ],
+ alt:
+ 'Gold ellipse + thick black outline @center 2 white ellipses on left and right.\n2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/structure.js',
+ line: 211,
+ description:
+ '\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\nThe push() function saves the current drawing style settings and\ntransformations, while pop() restores these settings. Note that these\nfunctions are always used together. They allow you to change the style\nand transformation settings and later return to what you had. When a new\nstate is started with push(), it builds on the current style and transform\ninformation. The push() and pop() functions can be embedded to provide\nmore control. (See the second example for a demonstration.)\n
\npush() stores information related to the current transformation state\nand style settings controlled by the following functions:\nfill(),\nnoFill(),\nnoStroke(),\nstroke(),\ntint(),\nnoTint(),\nstrokeWeight(),\nstrokeCap(),\nstrokeJoin(),\nimageMode(),\nrectMode(),\nellipseMode(),\ncolorMode(),\ntextAlign(),\ntextFont(),\ntextSize(),\ntextLeading(),\napplyMatrix(),\nresetMatrix(),\nrotate(),\nscale(),\nshearX(),\nshearY(),\ntranslate(),\nnoiseSeed().\n
\nIn WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(),\npointLight(), texture(), specularMaterial(), shininess(), normalMaterial()\nand shader().
\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\ntranslate(50, 0);\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n\n
'
+ ],
+ alt:
+ 'Gold ellipse + thick black outline @center 2 white ellipses on left and right.\n2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.',
+ class: 'p5',
+ module: 'Structure',
+ submodule: 'Structure'
+ },
+ {
+ file: 'src/core/structure.js',
+ line: 303,
+ description:
+ '\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\nExecutes the code within draw() one time. This functions allows the\n program to update the display window only when necessary, for example\n when an event registered by mousePressed() or keyPressed() occurs.\n
\n In structuring a program, it only makes sense to call redraw() within\n events such as mousePressed(). This is because redraw() does not run\n draw() immediately (it only sets a flag that indicates an update is\n needed).\n
\n The redraw() function does not work properly when called inside draw().\n To enable/disable animations, use loop() and noLoop().\n
\n In addition you can set the number of redraws per method call. Just\n add an integer as single parameter for the number of redraws.
Redraw for n-times. The default value is 1.
\n', + type: 'Integer', + optional: true + } + ], + example: [ + "\n\n let x = 0;\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n }\nfunction draw() {\n background(204);\n line(x, 0, x, height);\n }\nfunction mousePressed() {\n x += 1;\n redraw();\n }\n \n let x = 0;\nfunction setup() {\n createCanvas(100, 100);\n noLoop();\n }\nfunction draw() {\n background(204);\n x += 1;\n line(x, 0, x, height);\n }\nfunction mousePressed() {\n redraw(5);\n }\n Multiplies the current matrix by the one specified through the parameters.\nThis is a powerful operation that can perform the equivalent of translate,\nscale, shear and rotate all at once. You can learn more about transformation\nmatrices on \nWikipedia.
\nThe naming of the arguments here follows the naming of the \nWHATWG specification and corresponds to a\ntransformation matrix of the\nform:
\n\n\n', + itemtype: 'method', + name: 'applyMatrix', + params: [ + { + name: 'a', + description: + '\n
numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'b', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'c', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'd', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'e', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'f', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + "\n\n
\n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n background(200);\n // Equivalent to translate(x, y);\n applyMatrix(1, 0, 0, 1, 40 + step, 50);\n rect(0, 0, 50, 50);\n}\n\n\n
\n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n background(200);\n translate(50, 50);\n // Equivalent to scale(x, y);\n applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n\n
\n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n let angle = map(step, 0, 20, 0, TWO_PI);\n let cos_a = cos(angle);\n let sin_a = sin(angle);\n background(200);\n translate(50, 50);\n // Equivalent to rotate(angle);\n applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n\n
\n\nfunction setup() {\n frameRate(10);\n rectMode(CENTER);\n}\n\nfunction draw() {\n let step = frameCount % 20;\n let angle = map(step, 0, 20, -PI / 4, PI / 4);\n background(200);\n translate(50, 50);\n // equivalent to shearX(angle);\n let shear_factor = 1 / tan(PI / 2 - angle);\n applyMatrix(1, 0, shear_factor, 1, 0, 0);\n rect(0, 0, 50, 50);\n}\n\n\n
"
+ ],
+ alt:
+ 'A rectangle translating to the right\nA rectangle shrinking to the center\nA rectangle rotating clockwise about the center\nA rectangle shearing',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 148,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noFill();\n}\n\nfunction draw() {\n background(200);\n rotateY(PI / 6);\n stroke(153);\n box(35);\n let rad = millis() / 1000;\n // Set rotation angles\n let ct = cos(rad);\n let st = sin(rad);\n // Matrix for rotation around the Y axis\n applyMatrix( ct, 0.0, st, 0.0,\n 0.0, 1.0, 0.0, 0.0,\n -st, 0.0, ct, 0.0,\n 0.0, 0.0, 0.0, 1.0);\n stroke(255);\n box(50);\n}\n\nReplaces the current matrix with the identity matrix.
\n', + itemtype: 'method', + name: 'resetMatrix', + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt: 'A rotated retangle in the center with another at the top left corner',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 174,
+ description:
+ '\ntranslate(50, 50);\napplyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);\nrect(0, 0, 20, 20);\n// Note that the translate is also reset.\nresetMatrix();\nrect(0, 0, 20, 20);\n\nRotates a shape the amount specified by the angle parameter. This\nfunction accounts for angleMode, so angles can be entered in either\nRADIANS or DEGREES.\n
\nObjects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when draw() begins again.\n
\nTechnically, rotate() multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe push() and pop().
the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', + type: 'Number' + }, + { + name: 'axis', + description: '(in 3d) the axis to rotate around
\n', + type: 'p5.Vector|Number[]', + optional: true + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt:
+ 'white 52x52 rect with black outline at center rotated counter 45 degrees',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 214,
+ description: '\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n\nRotates around X axis.
\n', + itemtype: 'method', + name: 'rotateX', + params: [ + { + name: 'angle', + description: + 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + "\n\n
"
+ ],
+ alt: '3d box rotating around the x axis.',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 244,
+ description: '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(255);\n rotateX(millis() / 1000);\n box();\n}\n\nRotates around Y axis.
\n', + itemtype: 'method', + name: 'rotateY', + params: [ + { + name: 'angle', + description: + 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + "\n\n
"
+ ],
+ alt: '3d box rotating around the y axis.',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 274,
+ description: '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(255);\n rotateY(millis() / 1000);\n box();\n}\n\nRotates around Z axis. Webgl mode only.
\n', + itemtype: 'method', + name: 'rotateZ', + params: [ + { + name: 'angle', + description: + 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + "\n\n
"
+ ],
+ alt: '3d box rotating around the z axis.',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 304,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(255);\n rotateZ(millis() / 1000);\n box();\n}\n\nIncreases or decreases the size of a shape by expanding and contracting\nvertices. Objects always scale from their relative origin to the\ncoordinate system. Scale values are specified as decimal percentages.\nFor example, the function call scale(2.0) increases the dimension of a\nshape by 200%.\n
\nTransformations apply to everything that happens after and subsequent\ncalls to the function multiply the effect. For example, calling scale(2.0)\nand then scale(1.5) is the same as scale(3.0). If scale() is called\nwithin draw(), the transformation is reset when the loop begins again.\n
\nUsing this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with push() and pop().
\n
\n\n\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n\n\n
'
+ ],
+ alt:
+ 'white 52x52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform',
+ overloads: [
+ {
+ line: 304,
+ params: [
+ {
+ name: 's',
+ description:
+ '\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n\npercent to scale the object, or percentage to\n scale the object in the x-axis if multiple arguments\n are given
\n', + type: 'Number|p5.Vector|Number[]' + }, + { + name: 'y', + description: 'percent to scale the object in the y-axis
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: + 'percent to scale the object in the z-axis (webgl only)
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 349, + params: [ + { + name: 'scales', + description: 'per-axis percents to scale the object
\n', + type: 'p5.Vector|Number[]' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/core/transform.js', + line: 379, + description: + 'Shears a shape around the x-axis the amount specified by the angle\nparameter. Angles should be specified in the current angleMode.\nObjects are always sheared around their relative position to the origin\nand positive numbers shear objects in a clockwise direction.\n
\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nshearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).\nIf shearX() is called within the draw(), the transformation is reset when\nthe loop begins again.\n
\nTechnically, shearX() multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\npush() and pop() functions.
angle of shear specified in radians or degrees,\n depending on current angleMode
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt: 'white irregular quadrilateral with black outline at top middle.',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 419,
+ description:
+ '\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n\nShears a shape around the y-axis the amount specified by the angle\nparameter. Angles should be specified in the current angleMode. Objects\nare always sheared around their relative position to the origin and\npositive numbers shear objects in a clockwise direction.\n
\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nshearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If\nshearY() is called within the draw(), the transformation is reset when\nthe loop begins again.\n
\nTechnically, shearY() multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\npush() and pop() functions.
angle of shear specified in radians or degrees,\n depending on current angleMode
\n', + type: 'Number' + } + ], + chainable: 1, + example: [ + '\n\n
'
+ ],
+ alt: 'white irregular quadrilateral with black outline at middle bottom.',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform'
+ },
+ {
+ file: 'src/core/transform.js',
+ line: 459,
+ description:
+ '\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n\nSpecifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.\n
\nTransformations are cumulative and apply to everything that happens after\nand subsequent calls to the function accumulates the effect. For example,\ncalling translate(50, 0) and then translate(20, 0) is the same as\ntranslate(70, 0). If translate() is called within draw(), the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using push() and pop().
\n
\n\n\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n\n\n
\n\n\n\nrect(0, 0, 55, 55); // Draw rect at original 0,0\ntranslate(30, 20);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\ntranslate(14, 14);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\n\n\n
'
+ ],
+ alt:
+ 'white 55x55 rect with black outline at center right.\n3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.\na 20x20 white rect moving in a circle around the canvas',
+ class: 'p5',
+ module: 'Transform',
+ submodule: 'Transform',
+ overloads: [
+ {
+ line: 459,
+ params: [
+ {
+ name: 'x',
+ description: '\nfunction draw() {\n background(200);\n rectMode(CENTER);\n translate(width / 2, height / 2);\n translate(p5.Vector.fromAngle(millis() / 1000, 40));\n rect(0, 0, 20, 20);\n}\n\nleft/right translation
\n', + type: 'Number' + }, + { + name: 'y', + description: 'up/down translation
\n', + type: 'Number' + }, + { + name: 'z', + description: 'forward/backward translation (webgl only)
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + line: 513, + params: [ + { + name: 'vector', + description: 'the vector to translate by
\n', + type: 'p5.Vector' + } + ], + chainable: 1 + } + ] + }, + { + file: 'src/data/local_storage.js', + line: 10, + description: + 'Stores a value in local storage under the key name.\n Local storage is saved in the browser and persists\n between browsing sessions and page reloads.\n The key can be the name of the variable but doesn't\n have to be. To retrieve stored items\n see getItem.\n
\n Sensitive data such as passwords or personal information\n should not be stored in local storage.
\n // Type to change the letter in the\n // center of the canvas.\n // If you reload the page, it will\n // still display the last key you entered\nlet myText;\nfunction setup() {\n createCanvas(100, 100);\n myText = getItem('myText');\n if (myText === null) {\n myText = '';\n }\n }\nfunction draw() {\n textSize(40);\n background(255);\n text(myText, width / 2, height / 2);\n }\nfunction keyPressed() {\n myText = key;\n storeItem('myText', myText);\n }\n Returns the value of an item that was stored in local storage\n using storeItem()
\n', + itemtype: 'method', + name: 'getItem', + params: [ + { + name: 'key', + description: + 'name that you wish to use to store in local storage
\n', + type: 'String' + } + ], + return: { + description: 'Value of stored item', + type: 'Number|Object|String|Boolean|p5.Color|p5.Vector' + }, + example: [ + "\n\n // Click the mouse to change\n // the color of the background\n // Once you have changed the color\n // it will stay changed even when you\n // reload the page.\nlet myColor;\nfunction setup() {\n createCanvas(100, 100);\n myColor = getItem('myColor');\n }\nfunction draw() {\n if (myColor !== null) {\n background(myColor);\n }\n }\nfunction mousePressed() {\n myColor = color(random(255), random(255), random(255));\n storeItem('myColor', myColor);\n }\n Clears all local storage items set with storeItem()\n for the current domain.
\n', + itemtype: 'method', + name: 'clearStorage', + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'LocalStorage'
+ },
+ {
+ file: 'src/data/local_storage.js',
+ line: 196,
+ description: '\n function setup() {\n let myNum = 10;\n let myBool = false;\n storeItem('myNum', myNum);\n storeItem('myBool', myBool);\n print(getItem('myNum')); // logs 10 to the console\n print(getItem('myBool')); // logs false to the console\n clearStorage();\n print(getItem('myNum')); // logs null to the console\n print(getItem('myBool')); // logs null to the console\n }\n Removes an item that was stored with storeItem()
\n', + itemtype: 'method', + name: 'removeItem', + params: [ + { + name: 'key', + description: '', + type: 'String' + } + ], + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'LocalStorage'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 14,
+ description:
+ '\n function setup() {\n let myVar = 10;\n storeItem('myVar', myVar);\n print(getItem('myVar')); // logs 10 to the console\n removeItem('myVar');\n print(getItem('myVar')); // logs null to the console\n }\n Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.
\n', + itemtype: 'method', + name: 'createStringDict', + return: { + description: '', + type: 'p5.StringDict' + }, + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Dictionary',
+ overloads: [
+ {
+ line: 14,
+ params: [
+ {
+ name: 'key',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'value',
+ description: '',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'p5.StringDict'
+ }
+ },
+ {
+ line: 37,
+ params: [
+ {
+ name: 'object',
+ description: '\n function setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n let anotherDictionary = createStringDict({ happy: 'coding' });\n print(anotherDictionary.hasKey('happy')); // logs true to console\n }\n object
\n', + type: 'Object' + } + ], + return: { + description: '', + type: 'p5.StringDict' + } + } + ] + }, + { + file: 'src/data/p5.TypedDict.js', + line: 48, + description: + 'Creates a new instance of p5.NumberDict using the key-value pair\n or object you provide.
\n', + itemtype: 'method', + name: 'createNumberDict', + return: { + description: '', + type: 'p5.NumberDict' + }, + example: [ + '\n\n
'
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Dictionary',
+ overloads: [
+ {
+ line: 48,
+ params: [
+ {
+ name: 'key',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'value',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'p5.NumberDict'
+ }
+ },
+ {
+ line: 71,
+ params: [
+ {
+ name: 'object',
+ description: '\n function setup() {\n let myDictionary = createNumberDict(100, 42);\n print(myDictionary.hasKey(100)); // logs true to console\n let anotherDictionary = createNumberDict({ 200: 84 });\n print(anotherDictionary.hasKey(200)); // logs true to console\n }\n object
\n', + type: 'Object' + } + ], + return: { + description: '', + type: 'p5.NumberDict' + } + } + ] + }, + { + file: 'src/data/p5.TypedDict.js', + line: 101, + description: + 'Returns the number of key-value pairs currently stored in the Dictionary.
\n', + itemtype: 'method', + name: 'size', + return: { + description: 'the number of key-value pairs in the Dictionary', + type: 'Integer' + }, + example: [ + '\n\n
\n'
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 123,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict(1, 10);\n myDictionary.create(2, 20);\n myDictionary.create(3, 30);\n print(myDictionary.size()); // logs 3 to the console\n}\nReturns true if the given key exists in the Dictionary,\notherwise returns false.
\n', + itemtype: 'method', + name: 'hasKey', + params: [ + { + name: 'key', + description: 'that you want to look up
\n', + type: 'Number|String' + } + ], + return: { + description: 'whether that key exists in Dictionary', + type: 'Boolean' + }, + example: [ + "\n\n
\n"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 146,
+ description: '\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n}\nReturns the value stored at the given key.
\n', + itemtype: 'method', + name: 'get', + params: [ + { + name: 'the', + description: 'key you want to access
\n', + type: 'Number|String' + } + ], + return: { + description: 'the value stored at that key', + type: 'Number|String' + }, + example: [ + "\n\n
\n"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 173,
+ description:
+ '\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n let myValue = myDictionary.get('p5');\n print(myValue === 'js'); // logs true to console\n}\nUpdates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.
\n', + itemtype: 'method', + name: 'set', + params: [ + { + name: 'key', + description: '', + type: 'Number|String' + }, + { + name: 'value', + description: '', + type: 'Number|String' + } + ], + example: [ + "\n\n
\n"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 201,
+ description:
+ '\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.set('p5', 'JS');\n myDictionary.print(); // logs \"key: p5 - value: JS\" to console\n}\nprivate helper function to handle the user passing in objects\nduring construction or calls to create()
\n', + class: 'p5.TypedDict', + module: 'Data', + submodule: 'Dictionary' + }, + { + file: 'src/data/p5.TypedDict.js', + line: 212, + description: 'Creates a new key-value pair in the Dictionary.
\n', + itemtype: 'method', + name: 'create', + example: [ + "\n\n
"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary',
+ overloads: [
+ {
+ line: 212,
+ params: [
+ {
+ name: 'key',
+ description: '',
+ type: 'Number|String'
+ },
+ {
+ name: 'value',
+ description: '',
+ type: 'Number|String'
+ }
+ ]
+ },
+ {
+ line: 230,
+ params: [
+ {
+ name: 'obj',
+ description: '\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\nkey/value pair
\n', + type: 'Object' + } + ] + } + ] + }, + { + file: 'src/data/p5.TypedDict.js', + line: 248, + description: + 'Removes all previously stored key-value pairs from the Dictionary.
\n', + itemtype: 'method', + name: 'clear', + example: [ + "\n\n
"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 269,
+ description:
+ '\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // prints 'true'\n myDictionary.clear();\n print(myDictionary.hasKey('p5')); // prints 'false'\n}\n\nRemoves the key-value pair stored at the given key from the Dictionary.
\n', + itemtype: 'method', + name: 'remove', + params: [ + { + name: 'key', + description: 'for the pair to remove
\n', + type: 'Number|String' + } + ], + example: [ + "\n\n
\n"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 299,
+ description:
+ '\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n myDictionary.remove('p5');\n myDictionary.print();\n // above logs \"key: happy value: coding\" to console\n}\nLogs the set of items currently stored in the Dictionary to the console.
\n', + itemtype: 'method', + name: 'print', + example: [ + "\n\n
"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 323,
+ description:
+ '\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n\nConverts the Dictionary into a CSV file for local download.
\n', + itemtype: 'method', + name: 'saveTable', + example: [ + "\n\n
"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 361,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveTable('beatles');\n }\n}\n\nConverts the Dictionary into a JSON file for local download.
\n', + itemtype: 'method', + name: 'saveJSON', + example: [ + "\n\n
"
+ ],
+ class: 'p5.TypedDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 392,
+ description:
+ '\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveJSON('beatles');\n }\n}\n\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type
\n', + class: 'p5.TypedDict', + module: 'Data', + submodule: 'Dictionary' + }, + { + file: 'src/data/p5.TypedDict.js', + line: 431, + description: + 'private helper function to ensure that the user passed in valid\nvalues for the Dictionary type
\n', + class: 'p5.NumberDict', + module: 'Data', + submodule: 'Dictionary' + }, + { + file: 'src/data/p5.TypedDict.js', + line: 438, + description: + 'Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.
\n', + itemtype: 'method', + name: 'add', + params: [ + { + name: 'Key', + description: 'for the value you wish to add to
\n', + type: 'Number' + }, + { + name: 'Number', + description: 'to add to the value
\n', + type: 'Number' + } + ], + example: [ + "\n\n
\n\n"
+ ],
+ class: 'p5.NumberDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 466,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.add(2, 2);\n print(myDictionary.get(2)); // logs 7 to console.\n}\nSubtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.
\n', + itemtype: 'method', + name: 'sub', + params: [ + { + name: 'Key', + description: 'for the value you wish to subtract from
\n', + type: 'Number' + }, + { + name: 'Number', + description: 'to subtract from the value
\n', + type: 'Number' + } + ], + example: [ + "\n\n
\n\n"
+ ],
+ class: 'p5.NumberDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 490,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.sub(2, 2);\n print(myDictionary.get(2)); // logs 3 to console.\n}\nMultiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.
\n', + itemtype: 'method', + name: 'mult', + params: [ + { + name: 'Key', + description: 'for value you wish to multiply
\n', + type: 'Number' + }, + { + name: 'Amount', + description: 'to multiply the value by
\n', + type: 'Number' + } + ], + example: [ + "\n\n
\n\n"
+ ],
+ class: 'p5.NumberDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 518,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict(2, 4);\n myDictionary.mult(2, 2);\n print(myDictionary.get(2)); // logs 8 to console.\n}\nDivide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.
\n', + itemtype: 'method', + name: 'div', + params: [ + { + name: 'Key', + description: 'for value you wish to divide
\n', + type: 'Number' + }, + { + name: 'Amount', + description: 'to divide the value by
\n', + type: 'Number' + } + ], + example: [ + "\n\n
\n\n"
+ ],
+ class: 'p5.NumberDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 546,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict(2, 8);\n myDictionary.div(2, 2);\n print(myDictionary.get(2)); // logs 4 to console.\n}\nprivate helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'
\n', + class: 'p5.NumberDict', + module: 'Data', + submodule: 'Dictionary' + }, + { + file: 'src/data/p5.TypedDict.js', + line: 571, + description: + 'Return the lowest number currently stored in the Dictionary.
\n', + itemtype: 'method', + name: 'minValue', + return: { + description: '', + type: 'Number' + }, + example: [ + "\n\n
\n"
+ ],
+ class: 'p5.NumberDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 592,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let lowestValue = myDictionary.minValue(); // value is -10\n print(lowestValue);\n}\nReturn the highest number currently stored in the Dictionary.
\n', + itemtype: 'method', + name: 'maxValue', + return: { + description: '', + type: 'Number' + }, + example: [ + "\n\n
\n"
+ ],
+ class: 'p5.NumberDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 613,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let highestValue = myDictionary.maxValue(); // value is 3\n print(highestValue);\n}\nprivate helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'
\n', + class: 'p5.NumberDict', + module: 'Data', + submodule: 'Dictionary' + }, + { + file: 'src/data/p5.TypedDict.js', + line: 636, + description: + 'Return the lowest key currently used in the Dictionary.
\n', + itemtype: 'method', + name: 'minKey', + return: { + description: '', + type: 'Number' + }, + example: [ + "\n\n
\n"
+ ],
+ class: 'p5.NumberDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/data/p5.TypedDict.js',
+ line: 657,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let lowestKey = myDictionary.minKey(); // value is 1.2\n print(lowestKey);\n}\nReturn the highest key currently used in the Dictionary.
\n', + itemtype: 'method', + name: 'maxKey', + return: { + description: '', + type: 'Number' + }, + example: [ + "\n\n
\n"
+ ],
+ class: 'p5.NumberDict',
+ module: 'Data',
+ submodule: 'Dictionary'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 21,
+ description:
+ '\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let highestKey = myDictionary.maxKey(); // value is 4\n print(highestKey);\n}\nSearches the page for an element with the given ID, class, or tag name (using the '#' or '.'\nprefixes to specify an ID or class respectively, and none for a tag) and returns it as\na p5.Element. If a class or tag name is given with more than 1 element,\nonly the first element will be returned.\nThe DOM node itself can be accessed with .elt.\nReturns null if none found. You can also specify a container to search within.
\n', + itemtype: 'method', + name: 'select', + params: [ + { + name: 'name', + description: 'id, class, or tag name of element to search for
\n', + type: 'String' + }, + { + name: 'container', + description: + 'id, p5.Element, or\n HTML element to search within
\n', + type: 'String|p5.Element|HTMLElement', + optional: true + } + ], + return: { + description: + 'p5.Element containing node found', + type: 'p5.Element|null' + }, + example: [ + "\n\nfunction setup() {\n createCanvas(100, 100);\n //translates canvas 50px down\n select('canvas').position(100, 100);\n}\n\n// these are all valid calls to select()\nlet a = select('#moo');\nlet b = select('#blah', '#myContainer');\nlet c, e;\nif (b) {\n c = select('#foo', b);\n}\nlet d = document.getElementById('beep');\nif (d) {\n e = select('p', d);\n}\n[a, b, c, d, e]; // unused\nSearches the page for elements with the given class or tag name (using the '.' prefix\nto specify a class and no prefix for a tag) and returns them as p5.Elements\nin an array.\nThe DOM node itself can be accessed with .elt.\nReturns an empty array if none found.\nYou can also specify a container to search within.
\n', + itemtype: 'method', + name: 'selectAll', + params: [ + { + name: 'name', + description: 'class or tag name of elements to search for
\n', + type: 'String' + }, + { + name: 'container', + description: + 'id, p5.Element, or HTML element to search within
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'Array of p5.Elements containing nodes found', + type: 'p5.Element[]' + }, + example: [ + "\n\nfunction setup() {\n createButton('btn');\n createButton('2nd btn');\n createButton('3rd btn');\n let buttons = selectAll('button');\n\n for (let i = 0; i < buttons.length; i++) {\n buttons[i].size(100, 100);\n }\n}\n\n// these are all valid calls to selectAll()\nlet a = selectAll('.moo');\na = selectAll('div');\na = selectAll('button', '#myContainer');\n\nlet d = select('#container');\na = selectAll('p', d);\n\nlet f = document.getElementById('beep');\na = select('.blah', f);\n\na; // unused\nHelper function for select and selectAll
\n', + class: 'p5', + module: 'DOM', + submodule: 'DOM' + }, + { + file: 'src/dom/dom.js', + line: 165, + description: 'Helper function for getElement and getElements.
\n', + class: 'p5', + module: 'DOM', + submodule: 'DOM' + }, + { + file: 'src/dom/dom.js', + line: 199, + description: + 'Removes all elements created by p5, except any canvas / graphics\nelements created by createCanvas or createGraphics.\nEvent handlers are removed, and element is removed from the DOM.
\n', + itemtype: 'method', + name: 'removeElements', + example: [ + "\n\nfunction setup() {\n createCanvas(100, 100);\n createDiv('this is some text');\n createP('this is a paragraph');\n}\nfunction mousePressed() {\n removeElements(); // this will remove the div and p, not canvas\n}\nThe .changed() function is called when the value of an\nelement changes.\nThis can be used to attach an element specific event listener.
\n', + itemtype: 'method', + name: 'changed', + params: [ + { + name: 'fxn', + description: + 'function to be fired when the value of\n an element changes.\n if false is passed instead, the previously\n firing function will no longer fire.
\nlet sel;\n\nfunction setup() {\n textAlign(CENTER);\n background(200);\n sel = createSelect();\n sel.position(10, 10);\n sel.option('pear');\n sel.option('kiwi');\n sel.option('grape');\n sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n let item = sel.value();\n background(200);\n text(\"it's a \" + item + '!', 50, 50);\n}\n\nlet checkbox;\nlet cnv;\n\nfunction setup() {\n checkbox = createCheckbox(' fill');\n checkbox.changed(changeFill);\n cnv = createCanvas(100, 100);\n cnv.position(0, 30);\n noFill();\n}\n\nfunction draw() {\n background(200);\n ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n if (checkbox.checked()) {\n fill(0);\n } else {\n noFill();\n }\n}\nThe .input() function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.
\n', + itemtype: 'method', + name: 'input', + params: [ + { + name: 'fxn', + description: + 'function to be fired when any user input is\n detected within the element.\n if false is passed instead, the previously\n firing function will no longer fire.
\n// Open your console to see the output\nfunction setup() {\n let inp = createInput('');\n inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n console.log('you are typing: ', this.value());\n}\nHelpers for create methods.
\n', + class: 'p5', + module: 'DOM', + submodule: 'DOM' + }, + { + file: 'src/dom/dom.js', + line: 340, + description: + 'Creates a <div></div> element in the DOM with given inner HTML.
\n', + itemtype: 'method', + name: 'createDiv', + params: [ + { + name: 'html', + description: 'inner HTML for element created
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\ncreateDiv('this is some text');\nCreates a <p></p> element in the DOM with given inner HTML. Used\nfor paragraph length text.
\n', + itemtype: 'method', + name: 'createP', + params: [ + { + name: 'html', + description: 'inner HTML for element created
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\ncreateP('this is some text');\nCreates a <span></span> element in the DOM with given inner HTML.
\n', + itemtype: 'method', + name: 'createSpan', + params: [ + { + name: 'html', + description: 'inner HTML for element created
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\ncreateSpan('this is some text');\nCreates an <img> element in the DOM with given src and\nalternate text.
\n', + itemtype: 'method', + name: 'createImg', + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\ncreateImg(\n 'https://p5js.org/assets/img/asterisk-01.png',\n 'the p5 magenta asterisk'\n);\nsrc path or url for image
\n', + type: 'String' + }, + { + name: 'alt', + description: + 'alternate text to be used if image does not load. You can use also an empty string ("") if that an image is not intended to be viewed.
crossOrigin property of the img element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with canvas. if an empty string("") is passed, CORS is not used
callback to be called once image data is loaded
\n', + type: 'Function', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + } + } + ] + }, + { + file: 'src/dom/dom.js', + line: 429, + description: + 'Creates an <a></a> element in the DOM for including a hyperlink.
\n', + itemtype: 'method', + name: 'createA', + params: [ + { + name: 'href', + description: 'url of page to link to
\n', + type: 'String' + }, + { + name: 'html', + description: 'inner html of link element to display
\n', + type: 'String' + }, + { + name: 'target', + description: + 'target where new link should open,\n could be _blank, _self, _parent, _top.
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\ncreateA('http://p5js.org/', 'this is a link');\nCreates a slider <input></input> element in the DOM.\nUse .size() to set the display length of the slider.
\n', + itemtype: 'method', + name: 'createSlider', + params: [ + { + name: 'min', + description: 'minimum value of the slider
\n', + type: 'Number' + }, + { + name: 'max', + description: 'maximum value of the slider
\n', + type: 'Number' + }, + { + name: 'value', + description: 'default value of the slider
\n', + type: 'Number', + optional: true + }, + { + name: 'step', + description: + '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)
\n', + type: 'Number', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\nlet slider;\nfunction setup() {\n slider = createSlider(0, 255, 100);\n slider.position(10, 10);\n slider.style('width', '80px');\n}\n\nfunction draw() {\n let val = slider.value();\n background(val);\n}\n\nlet slider;\nfunction setup() {\n colorMode(HSB);\n slider = createSlider(0, 360, 60, 40);\n slider.position(10, 10);\n slider.style('width', '80px');\n}\n\nfunction draw() {\n let val = slider.value();\n background(val, 100, 100, 1);\n}\nCreates a <button></button> element in the DOM.\nUse .size() to set the display size of the button.\nUse .mousePressed() to specify behavior on press.
\n', + itemtype: 'method', + name: 'createButton', + params: [ + { + name: 'label', + description: 'label displayed on the button
\n', + type: 'String' + }, + { + name: 'value', + description: 'value of the button
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\nlet button;\nfunction setup() {\n createCanvas(100, 100);\n background(0);\n button = createButton('click me');\n button.position(19, 19);\n button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n let val = random(255);\n background(val);\n}\nCreates a checkbox <input></input> element in the DOM.\nCalling .checked() on a checkbox returns if it is checked or not
\n', + itemtype: 'method', + name: 'createCheckbox', + params: [ + { + name: 'label', + description: 'label displayed after checkbox
\n', + type: 'String', + optional: true + }, + { + name: 'value', + description: + 'value of the checkbox; checked is true, unchecked is false
\n', + type: 'Boolean', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\nlet checkbox;\n\nfunction setup() {\n checkbox = createCheckbox('label', false);\n checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n if (this.checked()) {\n console.log('Checking!');\n } else {\n console.log('Unchecking!');\n }\n}\nCreates a dropdown menu <select></select> element in the DOM.\nIt also helps to assign select-box methods to p5.Element when selecting existing select box
\n', + itemtype: 'method', + name: 'createSelect', + return: { + description: '', + type: 'p5.Element' + }, + example: [ + "\n\nlet sel;\n\nfunction setup() {\n textAlign(CENTER);\n background(200);\n sel = createSelect();\n sel.position(10, 10);\n sel.option('pear');\n sel.option('kiwi');\n sel.option('grape');\n sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n let item = sel.value();\n background(200);\n text('It is a ' + item + '!', 50, 50);\n}\ntrue if dropdown should support multiple selections
\n', + type: 'Boolean', + optional: true + } + ], + return: { + description: '', + type: 'p5.Element' + } + }, + { + line: 639, + params: [ + { + name: 'existing', + description: 'DOM select element
\n', + type: 'Object' + } + ], + return: { + description: '', + type: 'p5.Element' + } + } + ] + }, + { + file: 'src/dom/dom.js', + line: 716, + description: + 'Creates a radio button <input></input> element in the DOM.\nThe .option() method can be used to set options for the radio after it is\ncreated. The .value() method will return the currently selected option.
\n', + itemtype: 'method', + name: 'createRadio', + params: [ + { + name: 'divId', + description: + 'the id and name of the created div and input field respectively
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\nlet radio;\n\nfunction setup() {\n radio = createRadio();\n radio.option('black');\n radio.option('white');\n radio.option('gray');\n radio.style('width', '60px');\n textAlign(CENTER);\n fill(255, 0, 0);\n}\n\nfunction draw() {\n let val = radio.value();\n background(val);\n text(val, width / 2, height / 2);\n}\n\nlet radio;\n\nfunction setup() {\n radio = createRadio();\n radio.option('apple', 1);\n radio.option('bread', 2);\n radio.option('juice', 3);\n radio.style('width', '60px');\n textAlign(CENTER);\n}\n\nfunction draw() {\n background(200);\n let val = radio.value();\n if (val) {\n text('item cost is $' + val, width / 2, height / 2);\n }\n}\nCreates a colorPicker element in the DOM for color input.\nThe .value() method will return a hex string (#rrggbb) of the color.\nThe .color() method will return a p5.Color object with the current chosen color.
\n', + itemtype: 'method', + name: 'createColorPicker', + params: [ + { + name: 'value', + description: 'default color of element
\n', + type: 'String|p5.Color', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\n
"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 928,
+ description:
+ '\nlet inp1, inp2;\nfunction setup() {\n createCanvas(100, 100);\n background('grey');\n inp1 = createColorPicker('#ff0000');\n inp2 = createColorPicker(color('yellow'));\n inp1.input(setShade1);\n inp2.input(setShade2);\n setMidShade();\n}\n\nfunction setMidShade() {\n // Finding a shade between the two\n let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);\n fill(commonShade);\n rect(20, 20, 60, 60);\n}\n\nfunction setShade1() {\n setMidShade();\n console.log('You are choosing shade 1 to be : ', this.value());\n}\nfunction setShade2() {\n setMidShade();\n console.log('You are choosing shade 2 to be : ', this.value());\n}\n\nCreates an <input></input> element in the DOM for text input.\nUse .size() to set the display length of the box.
\n', + itemtype: 'method', + name: 'createInput', + params: [ + { + name: 'value', + description: 'default value of the input box
\n', + type: 'String', + optional: true + }, + { + name: 'type', + description: + 'type of text, ie text, password etc. Defaults to text
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created node', + type: 'p5.Element' + }, + example: [ + "\n\nfunction setup() {\n let inp = createInput('');\n inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n console.log('you are typing: ', this.value());\n}\nCreates an <input></input> element in the DOM of type 'file'.\nThis allows users to select local files for use in a sketch.
\n', + itemtype: 'method', + name: 'createFileInput', + params: [ + { + name: 'callback', + description: 'callback function for when a file loaded
\n', + type: 'Function', + optional: true + }, + { + name: 'multiple', + description: 'optional to allow multiple files selected
\n', + type: 'String', + optional: true + } + ], + return: { + description: + 'pointer to p5.Element holding created DOM element', + type: 'p5.Element' + }, + example: [ + "\n\nlet input;\nlet img;\n\nfunction setup() {\n input = createFileInput(handleFile);\n input.position(0, 0);\n}\n\nfunction draw() {\n background(255);\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\nfunction handleFile(file) {\n print(file);\n if (file.type === 'image') {\n img = createImg(file.data, '');\n img.hide();\n } else {\n img = null;\n }\n}\nCreates an HTML5 <video> element in the DOM for simple playback\nof audio/video. Shown by default, can be hidden with .hide()\nand drawn into canvas using video(). The first parameter\ncan be either a single string path to a video file, or an array of string\npaths to different formats of the same video. This is useful for ensuring\nthat your video can play across different browsers, as each supports\ndifferent formats. See this\npage for further information about supported formats.
\n', + itemtype: 'method', + name: 'createVideo', + params: [ + { + name: 'src', + description: + 'path to a video file, or array of paths for\n supporting different browsers
\n', + type: 'String|String[]' + }, + { + name: 'callback', + description: + 'callback function to be called upon\n 'canplaythrough' event fire, that is, when the\n browser can play the media, and estimates that\n enough data has been loaded to play the media\n up to its end without having to stop for\n further buffering of content
\n', + type: 'Function', + optional: true + } + ], + return: { + description: 'pointer to video p5.Element', + type: 'p5.MediaElement' + }, + example: [ + "\n\nlet vid;\nfunction setup() {\n noCanvas();\n\n vid = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n vidLoad\n );\n\n vid.size(100, 100);\n}\n\n// This function is called when the video loads\nfunction vidLoad() {\n vid.loop();\n vid.volume(0);\n}\nCreates a hidden HTML5 <audio> element in the DOM for simple audio\nplayback. The first parameter can be either a single string path to a\naudio file, or an array of string paths to different formats of the same\naudio. This is useful for ensuring that your audio can play across\ndifferent browsers, as each supports different formats.\nSee this\npage for further information about supported formats.
\n", + itemtype: 'method', + name: 'createAudio', + params: [ + { + name: 'src', + description: + 'path to an audio file, or array of paths\n for supporting different browsers
\n', + type: 'String|String[]', + optional: true + }, + { + name: 'callback', + description: + 'callback function to be called upon\n 'canplaythrough' event fire, that is, when the\n browser can play the media, and estimates that\n enough data has been loaded to play the media\n up to its end without having to stop for\n further buffering of content
\n', + type: 'Function', + optional: true + } + ], + return: { + description: 'pointer to audio p5.Element', + type: 'p5.MediaElement' + }, + example: [ + "\n\nlet ele;\nfunction setup() {\n ele = createAudio('assets/beat.mp3');\n\n // here we set the element to autoplay\n // The element will play as soon\n // as it is able to do so.\n ele.autoplay(true);\n}\nCreates a new HTML5 <video> element that contains the audio/video\nfeed from a webcam. The element is separate from the canvas and is\ndisplayed by default. The element can be hidden using .hide(). The feed\ncan be drawn onto the canvas using image(). The loadedmetadata property can\nbe used to detect when the element has fully loaded (see second example).
\nMore specific properties of the feed can be passing in a Constraints object.\nSee the\n W3C\nspec for possible properties. Note that not all of these are supported\nby all browsers.
\nSecurity note: A new browser security specification requires that getUserMedia,\nwhich is behind createCapture(), only works when you're running the code locally,\nor on HTTPS. Learn more here\nand here.
", + itemtype: 'method', + name: 'createCapture', + params: [ + { + name: 'type', + description: + 'type of capture, either VIDEO or\n AUDIO if none specified, default both,\n or a Constraints object
\n', + type: 'String|Constant|Object' + }, + { + name: 'callback', + description: + 'function to be called once\n stream has loaded
\n', + type: 'Function', + optional: true + } + ], + return: { + description: 'capture video p5.Element', + type: 'p5.Element' + }, + example: [ + "\n\nlet capture;\n\nfunction setup() {\n createCanvas(480, 480);\n capture = createCapture(VIDEO);\n capture.hide();\n}\n\nfunction draw() {\n image(capture, 0, 0, width, width * capture.height / capture.width);\n filter(INVERT);\n}\n\nfunction setup() {\n createCanvas(480, 120);\n let constraints = {\n video: {\n mandatory: {\n minWidth: 1280,\n minHeight: 720\n },\n optional: [{ maxFrameRate: 10 }]\n },\n audio: true\n };\n createCapture(constraints, function(stream) {\n console.log(stream);\n });\n}\n\nlet capture;\n\nfunction setup() {\n createCanvas(640, 480);\n capture = createCapture(VIDEO);\n}\nfunction draw() {\n background(0);\n if (capture.loadedmetadata) {\n let c = capture.get(0, 0, 100, 100);\n image(c, 0, 0);\n }\n}\n"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1338,
+ description:
+ 'Creates element with given tag in the DOM with given content.
\n',
+ itemtype: 'method',
+ name: 'createElement',
+ params: [
+ {
+ name: 'tag',
+ description: 'tag for the new element
\n',
+ type: 'String'
+ },
+ {
+ name: 'content',
+ description: 'html content to be inserted into the element
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'pointer to p5.Element holding created node',
+ type: 'p5.Element'
+ },
+ example: [
+ "\n\ncreateElement('h2', 'im an h2 p5.element!');\n"
+ ],
+ class: 'p5',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1362,
+ description: 'Adds specified class to the element.
\n',
+ itemtype: 'method',
+ name: 'addClass',
+ params: [
+ {
+ name: 'class',
+ description: 'name of class to add
\n',
+ type: 'String'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n \n let div = createDiv('div');\n div.addClass('myClass');\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1387,
+ description: 'Removes specified class from the element.
\n',
+ itemtype: 'method',
+ name: 'removeClass',
+ params: [
+ {
+ name: 'class',
+ description: 'name of class to remove
\n',
+ type: 'String'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n \n // In this example, a class is set when the div is created\n // and removed when mouse is pressed. This could link up\n // with a CSS style rule to toggle style properties.\nlet div;\nfunction setup() {\n div = createDiv('div');\n div.addClass('myClass');\n }\nfunction mousePressed() {\n div.removeClass('myClass');\n }\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1418,
+ description: 'Checks if specified class already set to element
\n',
+ itemtype: 'method',
+ name: 'hasClass',
+ return: {
+ description: 'a boolean value if element has specified class',
+ type: 'Boolean'
+ },
+ params: [
+ {
+ name: 'c',
+ description: 'class name of class to check
\n',
+ type: 'String'
+ }
+ ],
+ example: [
+ "\n \n let div;\nfunction setup() {\n div = createDiv('div');\n div.addClass('show');\n }\nfunction mousePressed() {\n if (div.hasClass('show')) {\n div.addClass('show');\n } else {\n div.removeClass('show');\n }\n }\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1447,
+ description: 'Toggles element class
\n',
+ itemtype: 'method',
+ name: 'toggleClass',
+ params: [
+ {
+ name: 'c',
+ description: 'class name to toggle
\n',
+ type: 'String'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n \n let div;\nfunction setup() {\n div = createDiv('div');\n div.addClass('show');\n }\nfunction mousePressed() {\n div.toggleClass('show');\n }\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1480,
+ description:
+ 'Attaches the element as a child to the parent specified.\n Accepts either a string ID, DOM node, or p5.Element.\n If no argument is specified, an array of children DOM nodes is returned.
\n',
+ itemtype: 'method',
+ name: 'child',
+ return: {
+ description: 'an array of child nodes',
+ type: 'Node[]'
+ },
+ example: [
+ "\n \n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n \n \n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n \n \n // this example assumes there is a div already on the page\n // with id \"myChildDiv\"\n let div0 = createDiv('this is the parent');\n let elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 1480,
+ params: [],
+ return: {
+ description: 'an array of child nodes',
+ type: 'Node[]'
+ }
+ },
+ {
+ line: 1508,
+ params: [
+ {
+ name: 'child',
+ description:
+ 'the ID, DOM node, or p5.Element\n to add to the current element
\n',
+ type: 'String|p5.Element',
+ optional: true
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1530,
+ description:
+ 'Centers a p5 Element either vertically, horizontally,\nor both, relative to its parent or according to\nthe body if the Element has no parent. If no argument is passed\nthe Element is aligned both vertically and horizontally.
\n',
+ itemtype: 'method',
+ name: 'center',
+ params: [
+ {
+ name: 'align',
+ description:
+ 'passing 'vertical', 'horizontal' aligns element accordingly
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\nfunction setup() {\n let div = createDiv('').size(10, 10);\n div.style('background-color', 'orange');\n div.center();\n}\n"
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1584,
+ description:
+ 'If an argument is given, sets the inner HTML of the element,\n replacing any existing html. If true is included as a second\n argument, html is appended instead of replacing existing html.\n If no arguments are given, returns\n the inner HTML of the element.
\n',
+ itemtype: 'method',
+ name: 'html',
+ return: {
+ description: 'the inner HTML of the element',
+ type: 'String'
+ },
+ example: [
+ "\n \n let div = createDiv('').size(100, 100);\n div.html('hi');\n \n \n let div = createDiv('Hello ').size(100, 100);\n div.html('World', true);\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 1584,
+ params: [],
+ return: {
+ description: 'the inner HTML of the element',
+ type: 'String'
+ }
+ },
+ {
+ line: 1605,
+ params: [
+ {
+ name: 'html',
+ description: 'the HTML to be placed inside the element
\n',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'append',
+ description: 'whether to append HTML to existing
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1623,
+ description:
+ 'Sets the position of the element relative to (0, 0) of the\n window. Essentially, sets position:absolute and left and top\n properties of style. If no arguments given returns the x and y position\n of the element in an object.
\n',
+ itemtype: 'method',
+ name: 'position',
+ return: {
+ description: 'the x and y position of the element in an object',
+ type: 'Object'
+ },
+ example: [
+ "\n \n function setup() {\n let cnv = createCanvas(100, 100);\n // positions canvas 50px to the right and 100px\n // below upper left corner of the window\n cnv.position(50, 100);\n }\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 1623,
+ params: [],
+ return: {
+ description: 'the x and y position of the element in an object',
+ type: 'Object'
+ }
+ },
+ {
+ line: 1642,
+ params: [
+ {
+ name: 'x',
+ description: 'x-position relative to upper left of window
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'y',
+ description: 'y-position relative to upper left of window
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1717,
+ description:
+ 'Sets the given style (css) property (1st arg) of the element with the\ngiven value (2nd arg). If a single argument is given, .style()\nreturns the value of the given property; however, if the single argument\nis given in css syntax ('text-align:center'), .style() sets the css\nappropriately.
\n',
+ itemtype: 'method',
+ name: 'style',
+ return: {
+ description: 'value of property',
+ type: 'String'
+ },
+ example: [
+ "\n\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\n\n\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(10, 10);\n\n\nlet myDiv;\nfunction setup() {\n background(200);\n myDiv = createDiv('I like gray.');\n myDiv.position(20, 20);\n}\n\nfunction draw() {\n myDiv.style('font-size', mouseX + 'px');\n}\n"
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 1717,
+ params: [
+ {
+ name: 'property',
+ description: 'property to be set
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'value of property',
+ type: 'String'
+ }
+ },
+ {
+ line: 1752,
+ params: [
+ {
+ name: 'property',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'value',
+ description: 'value to assign to property
\n',
+ type: 'String|Number|p5.Color'
+ }
+ ],
+ chainable: 1,
+ return: {
+ description:
+ 'current value of property, if no value is given as second argument',
+ type: 'String'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1806,
+ description:
+ 'Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.
\n',
+ itemtype: 'method',
+ name: 'attribute',
+ return: {
+ description: 'value of attribute',
+ type: 'String'
+ },
+ example: [
+ "\n \n let myDiv = createDiv('I like pandas.');\n myDiv.attribute('align', 'center');\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 1806,
+ params: [],
+ return: {
+ description: 'value of attribute',
+ type: 'String'
+ }
+ },
+ {
+ line: 1821,
+ params: [
+ {
+ name: 'attr',
+ description: 'attribute to set
\n',
+ type: 'String'
+ },
+ {
+ name: 'value',
+ description: 'value to assign to attribute
\n',
+ type: 'String'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1850,
+ description: 'Removes an attribute on the specified element.
\n',
+ itemtype: 'method',
+ name: 'removeAttribute',
+ params: [
+ {
+ name: 'attr',
+ description: 'attribute to remove
\n',
+ type: 'String'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n \n let button;\n let checkbox;\nfunction setup() {\n checkbox = createCheckbox('enable', true);\n checkbox.changed(enableButton);\n button = createButton('button');\n button.position(10, 10);\n }\nfunction enableButton() {\n if (this.checked()) {\n // Re-enable the button\n button.removeAttribute('disabled');\n } else {\n // Disable the button\n button.attribute('disabled', '');\n }\n }\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1895,
+ description:
+ 'Either returns the value of the element if no arguments\ngiven, or sets the value of the element.
\n',
+ itemtype: 'method',
+ name: 'value',
+ return: {
+ description: 'value of the element',
+ type: 'String|Number'
+ },
+ example: [
+ "\n\n// gets the value\nlet inp;\nfunction setup() {\n inp = createInput('');\n}\n\nfunction mousePressed() {\n print(inp.value());\n}\n\n\n// sets the value\nlet inp;\nfunction setup() {\n inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n inp.value('myValue');\n}\n"
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 1895,
+ params: [],
+ return: {
+ description: 'value of the element',
+ type: 'String|Number'
+ }
+ },
+ {
+ line: 1925,
+ params: [
+ {
+ name: 'value',
+ description: '',
+ type: 'String|Number'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1941,
+ description:
+ 'Shows the current element. Essentially, setting display:block for the style.
\n',
+ itemtype: 'method',
+ name: 'show',
+ chainable: 1,
+ example: [
+ "\n \n let div = createDiv('div');\n div.style('display', 'none');\n div.show(); // turns display to block\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1959,
+ description:
+ 'Hides the current element. Essentially, setting display:none for the style.
\n',
+ itemtype: 'method',
+ name: 'hide',
+ chainable: 1,
+ example: [
+ "\n\nlet div = createDiv('this is a div');\ndiv.hide();\n"
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 1975,
+ description:
+ 'Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.
\n',
+ itemtype: 'method',
+ name: 'size',
+ return: {
+ description: 'the width and height of the element in an object',
+ type: 'Object'
+ },
+ example: [
+ "\n \n let div = createDiv('this is a div');\n div.size(100, 100);\n let img = createImg(\n 'assets/rockies.jpg',\n 'A tall mountain with a small forest and field in front of it on a sunny day',\n '',\n () => {\n img.size(10, AUTO);\n }\n );\n "
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 1975,
+ params: [],
+ return: {
+ description: 'the width and height of the element in an object',
+ type: 'Object'
+ }
+ },
+ {
+ line: 1999,
+ params: [
+ {
+ name: 'w',
+ description:
+ 'width of the element, either AUTO, or a number
\n',
+ type: 'Number|Constant'
+ },
+ {
+ name: 'h',
+ description:
+ 'height of the element, either AUTO, or a number
\n',
+ type: 'Number|Constant',
+ optional: true
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2056,
+ description: 'Removes the element and deregisters all listeners.
\n',
+ itemtype: 'method',
+ name: 'remove',
+ example: [
+ "\n\nlet myDiv = createDiv('this is some text');\nmyDiv.remove();\n"
+ ],
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2076,
+ description:
+ 'Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.
\nYou can optionally pass a second callback which will be registered to the raw\ndrop event.\nThe callback will thus be provided the original\nDragEvent.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.
\n',
+ itemtype: 'method',
+ name: 'drop',
+ params: [
+ {
+ name: 'callback',
+ description:
+ 'callback to receive loaded file, called for each file dropped.
\n',
+ type: 'Function'
+ },
+ {
+ name: 'fxn',
+ description:
+ 'callback triggered once when files are dropped with the drop event.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\nfunction setup() {\n let c = createCanvas(100, 100);\n background(200);\n textAlign(CENTER);\n text('drop file', width / 2, height / 2);\n c.drop(gotFile);\n}\n\nfunction gotFile(file) {\n background(200);\n text('received file:', width / 2, height / 2);\n text(file.name, width / 2, height / 2 + 50);\n}\n\n\n\nlet img;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n background(200);\n textAlign(CENTER);\n text('drop image', width / 2, height / 2);\n c.drop(gotFile);\n}\n\nfunction draw() {\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\nfunction gotFile(file) {\n img = createImg(file.data, '').hide();\n}\n"
+ ],
+ alt: 'Canvas turns into whatever image is dragged/dropped onto it.',
+ class: 'p5.Element',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2208,
+ description: 'Path to the media element source.
\n',
+ itemtype: 'property',
+ name: 'src',
+ return: {
+ description: 'src',
+ type: 'String'
+ },
+ example: [
+ "\n\nlet ele;\n\nfunction setup() {\n background(250);\n\n //p5.MediaElement objects are usually created\n //by calling the createAudio(), createVideo(),\n //and createCapture() functions.\n\n //In this example we create\n //a new p5.MediaElement via createAudio().\n ele = createAudio('assets/beat.mp3');\n\n //We'll set up our example so that\n //when you click on the text,\n //an alert box displays the MediaElement's\n //src field.\n textAlign(CENTER);\n text('Click Me!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n //here we test if the mouse is over the\n //canvas element when it's clicked\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n //Show our p5.MediaElement's src field\n alert(ele.src);\n }\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2273,
+ description: 'Play an HTML5 media element.
\n',
+ itemtype: 'method',
+ name: 'play',
+ chainable: 1,
+ example: [
+ "\n\nlet ele;\n\nfunction setup() {\n //p5.MediaElement objects are usually created\n //by calling the createAudio(), createVideo(),\n //and createCapture() functions.\n\n //In this example we create\n //a new p5.MediaElement via createAudio().\n ele = createAudio('assets/beat.mp3');\n\n background(250);\n textAlign(CENTER);\n text('Click to Play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n //here we test if the mouse is over the\n //canvas element when it's clicked\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n //Here we call the play() function on\n //the p5.MediaElement we created above.\n //This will start the audio sample.\n ele.play();\n\n background(200);\n text('You clicked Play!', width / 2, height / 2);\n }\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2334,
+ description:
+ 'Stops an HTML5 media element (sets current time to zero).
\n',
+ itemtype: 'method',
+ name: 'stop',
+ chainable: 1,
+ example: [
+ "\n\n//This example both starts\n//and stops a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n //Here we create a p5.MediaElement object\n //using the createAudio() function.\n ele = createAudio('assets/beat.mp3');\n background(200);\n textAlign(CENTER);\n text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n //here we test if the mouse is over the\n //canvas element when it's clicked\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n background(200);\n\n if (sampleIsPlaying) {\n //if the sample is currently playing\n //calling the stop() function on\n //our p5.MediaElement will stop\n //it and reset its current\n //time to 0 (i.e. it will start\n //at the beginning the next time\n //you play it)\n ele.stop();\n\n sampleIsPlaying = false;\n text('Click to play!', width / 2, height / 2);\n } else {\n //loop our sound element until we\n //call ele.stop() on it.\n ele.loop();\n\n sampleIsPlaying = true;\n text('Click to stop!', width / 2, height / 2);\n }\n }\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2398,
+ description: 'Pauses an HTML5 media element.
\n',
+ itemtype: 'method',
+ name: 'pause',
+ chainable: 1,
+ example: [
+ "\n\n//This example both starts\n//and pauses a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n //Here we create a p5.MediaElement object\n //using the createAudio() function.\n ele = createAudio('assets/lucky_dragons.mp3');\n background(200);\n textAlign(CENTER);\n text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n //here we test if the mouse is over the\n //canvas element when it's clicked\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n background(200);\n\n if (sampleIsPlaying) {\n //Calling pause() on our\n //p5.MediaElement will stop it\n //playing, but when we call the\n //loop() or play() functions\n //the sample will start from\n //where we paused it.\n ele.pause();\n\n sampleIsPlaying = false;\n text('Click to resume!', width / 2, height / 2);\n } else {\n //loop our sound element until we\n //call ele.pause() on it.\n ele.loop();\n\n sampleIsPlaying = true;\n text('Click to pause!', width / 2, height / 2);\n }\n }\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2460,
+ description:
+ 'Set 'loop' to true for an HTML5 media element, and starts playing.
\n',
+ itemtype: 'method',
+ name: 'loop',
+ chainable: 1,
+ example: [
+ "\n\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsLooping = false;\n\nfunction setup() {\n //Here we create a p5.MediaElement object\n //using the createAudio() function.\n ele = createAudio('assets/lucky_dragons.mp3');\n background(200);\n textAlign(CENTER);\n text('Click to loop!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n //here we test if the mouse is over the\n //canvas element when it's clicked\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n background(200);\n\n if (!sampleIsLooping) {\n //loop our sound element until we\n //call ele.stop() on it.\n ele.loop();\n\n sampleIsLooping = true;\n text('Click to stop!', width / 2, height / 2);\n } else {\n ele.stop();\n\n sampleIsLooping = false;\n text('Click to loop!', width / 2, height / 2);\n }\n }\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2516,
+ description:
+ 'Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.
\n',
+ itemtype: 'method',
+ name: 'noLoop',
+ chainable: 1,
+ example: [
+ "\n\n//This example both starts\n//and stops loop of sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n //Here we create a p5.MediaElement object\n //using the createAudio() function.\n ele = createAudio('assets/beat.mp3');\n background(200);\n textAlign(CENTER);\n text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n //here we test if the mouse is over the\n //canvas element when it's clicked\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n background(200);\n\n if (sampleIsPlaying) {\n ele.noLoop();\n text('No more Loops!', width / 2, height / 2);\n } else {\n ele.loop();\n sampleIsPlaying = true;\n text('Click to stop looping!', width / 2, height / 2);\n }\n }\n}\n\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2568,
+ description: 'Set HTML5 media element to autoplay or not.
\n',
+ itemtype: 'method',
+ name: 'autoplay',
+ params: [
+ {
+ name: 'autoplay',
+ description: 'whether the element should autoplay
\n',
+ type: 'Boolean'
+ }
+ ],
+ chainable: 1,
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2580,
+ description:
+ 'Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.
\n',
+ itemtype: 'method',
+ name: 'volume',
+ return: {
+ description: 'current volume',
+ type: 'Number'
+ },
+ example: [
+ "\n\nlet ele;\nfunction setup() {\n // p5.MediaElement objects are usually created\n // by calling the createAudio(), createVideo(),\n // and createCapture() functions.\n // In this example we create\n // a new p5.MediaElement via createAudio().\n ele = createAudio('assets/lucky_dragons.mp3');\n background(250);\n textAlign(CENTER);\n text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n // Here we call the volume() function\n // on the sound element to set its volume\n // Volume must be between 0.0 and 1.0\n ele.volume(0.2);\n ele.play();\n background(200);\n text('You clicked Play!', width / 2, height / 2);\n}\n\n\nlet audio;\nlet counter = 0;\n\nfunction loaded() {\n audio.play();\n}\n\nfunction setup() {\n audio = createAudio('assets/lucky_dragons.mp3', loaded);\n textAlign(CENTER);\n}\n\nfunction draw() {\n if (counter === 0) {\n background(0, 255, 0);\n text('volume(0.9)', width / 2, height / 2);\n } else if (counter === 1) {\n background(255, 255, 0);\n text('volume(0.5)', width / 2, height / 2);\n } else if (counter === 2) {\n background(255, 0, 0);\n text('volume(0.1)', width / 2, height / 2);\n }\n}\n\nfunction mousePressed() {\n counter++;\n if (counter === 0) {\n audio.volume(0.9);\n } else if (counter === 1) {\n audio.volume(0.5);\n } else if (counter === 2) {\n audio.volume(0.1);\n } else {\n counter = 0;\n audio.volume(0.9);\n }\n}\n\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 2580,
+ params: [],
+ return: {
+ description: 'current volume',
+ type: 'Number'
+ }
+ },
+ {
+ line: 2653,
+ params: [
+ {
+ name: 'val',
+ description: 'volume between 0.0 and 1.0
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2666,
+ description:
+ 'If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)
\n',
+ itemtype: 'method',
+ name: 'speed',
+ return: {
+ description: 'current playback speed of the element',
+ type: 'Number'
+ },
+ example: [
+ "\n\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\nlet button;\n\nfunction setup() {\n createCanvas(710, 400);\n //Here we create a p5.MediaElement object\n //using the createAudio() function.\n ele = createAudio('assets/beat.mp3');\n ele.loop();\n background(200);\n\n button = createButton('2x speed');\n button.position(100, 68);\n button.mousePressed(twice_speed);\n\n button = createButton('half speed');\n button.position(200, 68);\n button.mousePressed(half_speed);\n\n button = createButton('reverse play');\n button.position(300, 68);\n button.mousePressed(reverse_speed);\n\n button = createButton('STOP');\n button.position(400, 68);\n button.mousePressed(stop_song);\n\n button = createButton('PLAY!');\n button.position(500, 68);\n button.mousePressed(play_speed);\n}\n\nfunction twice_speed() {\n ele.speed(2);\n}\n\nfunction half_speed() {\n ele.speed(0.5);\n}\n\nfunction reverse_speed() {\n ele.speed(-1);\n}\n\nfunction stop_song() {\n ele.stop();\n}\n\nfunction play_speed() {\n ele.play();\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 2666,
+ params: [],
+ return: {
+ description: 'current playback speed of the element',
+ type: 'Number'
+ }
+ },
+ {
+ line: 2737,
+ params: [
+ {
+ name: 'speed',
+ description: 'speed multiplier for element playback
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2754,
+ description:
+ 'If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.
\n',
+ itemtype: 'method',
+ name: 'time',
+ return: {
+ description: 'current time (in seconds)',
+ type: 'Number'
+ },
+ example: [
+ "\n\nlet ele;\nlet beginning = true;\nfunction setup() {\n //p5.MediaElement objects are usually created\n //by calling the createAudio(), createVideo(),\n //and createCapture() functions.\n\n //In this example we create\n //a new p5.MediaElement via createAudio().\n ele = createAudio('assets/lucky_dragons.mp3');\n background(250);\n textAlign(CENTER);\n text('start at beginning', width / 2, height / 2);\n}\n\n// this function fires with click anywhere\nfunction mousePressed() {\n if (beginning === true) {\n // here we start the sound at the beginning\n // time(0) is not necessary here\n // as this produces the same result as\n // play()\n ele.play().time(0);\n background(200);\n text('jump 2 sec in', width / 2, height / 2);\n beginning = false;\n } else {\n // here we jump 2 seconds into the sound\n ele.play().time(2);\n background(250);\n text('start at beginning', width / 2, height / 2);\n beginning = true;\n }\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM',
+ overloads: [
+ {
+ line: 2754,
+ params: [],
+ return: {
+ description: 'current time (in seconds)',
+ type: 'Number'
+ }
+ },
+ {
+ line: 2799,
+ params: [
+ {
+ name: 'time',
+ description: 'time to jump to (in seconds)
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2813,
+ description: 'Returns the duration of the HTML5 media element.
\n',
+ itemtype: 'method',
+ name: 'duration',
+ return: {
+ description: 'duration',
+ type: 'Number'
+ },
+ example: [
+ "\n\nlet ele;\nfunction setup() {\n //p5.MediaElement objects are usually created\n //by calling the createAudio(), createVideo(),\n //and createCapture() functions.\n //In this example we create\n //a new p5.MediaElement via createAudio().\n ele = createAudio('assets/doorbell.mp3');\n background(250);\n textAlign(CENTER);\n text('Click to know the duration!', 10, 25, 70, 80);\n}\nfunction mouseClicked() {\n ele.play();\n background(200);\n //ele.duration dislpays the duration\n text(ele.duration() + ' seconds', width / 2, height / 2);\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2935,
+ description:
+ 'Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.
\n',
+ itemtype: 'method',
+ name: 'onended',
+ params: [
+ {
+ name: 'callback',
+ description:
+ 'function to call when the\n soundfile has ended. The\n media element will be passed\n in as the argument to the\n callback.
\n',
+ type: 'Function'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\nfunction setup() {\n let audioEl = createAudio('assets/beat.mp3');\n audioEl.showControls();\n audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n alert('done playing ' + elt.src);\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2966,
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 2968,
+ description:
+ 'Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's master\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.
\nThis method is meant to be used with the p5.sound.js addon library.
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'audioNode',
+ description:
+ 'AudioNode from the Web Audio API,\nor an object from the p5.sound library
\n',
+ type: 'AudioNode|Object'
+ }
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3017,
+ description:
+ 'Disconnect all Web Audio routing, including to master output.\nThis is useful if you want to re-route the output through\naudio effects, for example.
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3032,
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3034,
+ description:
+ 'Show the default MediaElement controls, as determined by the web browser.
\n',
+ itemtype: 'method',
+ name: 'showControls',
+ example: [
+ "\n\nlet ele;\nfunction setup() {\n //p5.MediaElement objects are usually created\n //by calling the createAudio(), createVideo(),\n //and createCapture() functions.\n //In this example we create\n //a new p5.MediaElement via createAudio()\n ele = createAudio('assets/lucky_dragons.mp3');\n background(200);\n textAlign(CENTER);\n text('Click to Show Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n ele.showControls();\n background(200);\n text('Controls Shown', width / 2, height / 2);\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3065,
+ description: 'Hide the default mediaElement controls.
\n',
+ itemtype: 'method',
+ name: 'hideControls',
+ example: [
+ "\n\nlet ele;\nfunction setup() {\n //p5.MediaElement objects are usually created\n //by calling the createAudio(), createVideo(),\n //and createCapture() functions.\n //In this example we create\n //a new p5.MediaElement via createAudio()\n ele = createAudio('assets/lucky_dragons.mp3');\n ele.showControls();\n background(200);\n textAlign(CENTER);\n text('Click to hide Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n ele.hideControls();\n background(200);\n text('Controls hidden', width / 2, height / 2);\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3094,
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3105,
+ description:
+ 'Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.
\nAccepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.
\nTime will be passed as the first parameter to the callback function,\nand param will be the second parameter.
\n',
+ itemtype: 'method',
+ name: 'addCue',
+ params: [
+ {
+ name: 'time',
+ description:
+ 'Time in seconds, relative to this media\n element's playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.
\n',
+ type: 'Number'
+ },
+ {
+ name: 'callback',
+ description:
+ 'Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.
\n',
+ type: 'Function'
+ },
+ {
+ name: 'value',
+ description:
+ 'An object to be passed as the\n second parameter to the\n callback function.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'id ID of this cue,\n useful for removeCue(id)',
+ type: 'Number'
+ },
+ example: [
+ "\n\n//\n//\nfunction setup() {\n noCanvas();\n\n let audioEl = createAudio('assets/beat.mp3');\n audioEl.showControls();\n\n // schedule three calls to changeBackground\n audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\n}\n\nfunction changeBackground(val) {\n background(val);\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3169,
+ description:
+ 'Remove a callback based on its ID. The ID is returned by the\naddCue method.
\n',
+ itemtype: 'method',
+ name: 'removeCue',
+ params: [
+ {
+ name: 'id',
+ description: 'ID of the cue, as returned by addCue
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\nlet audioEl, id1, id2;\nfunction setup() {\n background(255, 255, 255);\n audioEl = createAudio('assets/beat.mp3');\n audioEl.showControls();\n // schedule five calls to changeBackground\n id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n text('Click to remove first and last Cue!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n audioEl.removeCue(id1);\n audioEl.removeCue(id2);\n}\nfunction changeBackground(val) {\n background(val);\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3211,
+ description:
+ 'Remove all of the callbacks that had originally been scheduled\nvia the addCue method.
\n',
+ itemtype: 'method',
+ name: 'clearCues',
+ params: [
+ {
+ name: 'id',
+ description: 'ID of the cue, as returned by addCue
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\nlet audioEl;\nfunction setup() {\n background(255, 255, 255);\n audioEl = createAudio('assets/beat.mp3');\n //Show the default MediaElement controls, as determined by the web browser\n audioEl.showControls();\n // schedule calls to changeBackground\n background(200);\n text('Click to change Cue!', 10, 25, 70, 80);\n audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n}\nfunction mousePressed() {\n // here we clear the scheduled callbacks\n audioEl.clearCues();\n // then we add some more callbacks\n audioEl.addCue(1, changeBackground, color(2, 2, 2));\n audioEl.addCue(3, changeBackground, color(255, 255, 0));\n}\nfunction changeBackground(val) {\n background(val);\n}\n"
+ ],
+ class: 'p5.MediaElement',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3277,
+ description:
+ 'Underlying File object. All normal File methods can be called on this.
\n',
+ itemtype: 'property',
+ name: 'file',
+ class: 'p5.File',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3289,
+ description: 'File type (image, text, etc.)
\n',
+ itemtype: 'property',
+ name: 'type',
+ class: 'p5.File',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3295,
+ description:
+ 'File subtype (usually the file extension jpg, png, xml, etc.)
\n',
+ itemtype: 'property',
+ name: 'subtype',
+ class: 'p5.File',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3301,
+ description: 'File name
\n',
+ itemtype: 'property',
+ name: 'name',
+ class: 'p5.File',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3307,
+ description: 'File size
\n',
+ itemtype: 'property',
+ name: 'size',
+ class: 'p5.File',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/dom/dom.js',
+ line: 3314,
+ description: 'URL string containing image data.
\n',
+ itemtype: 'property',
+ name: 'data',
+ class: 'p5.File',
+ module: 'DOM',
+ submodule: 'DOM'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 10,
+ description:
+ 'The system variable deviceOrientation always contains the orientation of\nthe device. The value of this variable will either be set 'landscape'\nor 'portrait'. If no data is available it will be set to 'undefined'.\neither LANDSCAPE or PORTRAIT.
\n',
+ itemtype: 'property',
+ name: 'deviceOrientation',
+ type: 'Constant',
+ readonly: '',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 21,
+ description:
+ 'The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.
\n',
+ itemtype: 'property',
+ name: 'accelerationX',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationX);\n}\n\n"
+ ],
+ alt: 'Magnitude of device acceleration is displayed as ellipse size',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 44,
+ description:
+ 'The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.
\n',
+ itemtype: 'property',
+ name: 'accelerationY',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationY);\n}\n\n"
+ ],
+ alt: 'Magnitude of device acceleration is displayed as ellipse size',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 67,
+ description:
+ 'The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.
\n',
+ itemtype: 'property',
+ name: 'accelerationZ',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationZ);\n}\n\n"
+ ],
+ alt: 'Magnitude of device acceleration is displayed as ellipse size',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 92,
+ description:
+ 'The system variable pAccelerationX always contains the acceleration of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n',
+ itemtype: 'property',
+ name: 'pAccelerationX',
+ type: 'Number',
+ readonly: '',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 102,
+ description:
+ 'The system variable pAccelerationY always contains the acceleration of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n',
+ itemtype: 'property',
+ name: 'pAccelerationY',
+ type: 'Number',
+ readonly: '',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 112,
+ description:
+ 'The system variable pAccelerationZ always contains the acceleration of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n',
+ itemtype: 'property',
+ name: 'pAccelerationZ',
+ type: 'Number',
+ readonly: '',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 133,
+ description:
+ 'The system variable rotationX always contains the rotation of the\ndevice along the x axis. Value is represented as 0 to +/-180 degrees.\n
\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n',
+ itemtype: 'property',
+ name: 'rotationX',
+ type: 'Number',
+ readonly: '',
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n}\n\n'
+ ],
+ alt:
+ 'red horizontal line right, green vertical line bottom. black background.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 164,
+ description:
+ 'The system variable rotationY always contains the rotation of the\ndevice along the y axis. Value is represented as 0 to +/-90 degrees.\n
\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n',
+ itemtype: 'property',
+ name: 'rotationY',
+ type: 'Number',
+ readonly: '',
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n rotateY(radians(rotationY));\n box(200, 200, 200);\n}\n\n'
+ ],
+ alt:
+ 'red horizontal line right, green vertical line bottom. black background.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 195,
+ description:
+ 'The system variable rotationZ always contains the rotation of the\ndevice along the z axis. Value is represented as 0 to 359 degrees.\n
\nUnlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.\n
\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n',
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n}\n\n'
+ ],
+ itemtype: 'property',
+ name: 'rotationZ',
+ type: 'Number',
+ readonly: '',
+ alt:
+ 'red horizontal line right, green vertical line bottom. black background.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 231,
+ description:
+ 'The system variable pRotationX always contains the rotation of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as 0 to +/-180 degrees.\n
\npRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.
\n',
+ example: [
+ "\n\n\n// A simple if statement looking at whether\n// rotationX - pRotationX < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rX = rotationX + 180;\nlet pRX = pRotationX + 180;\n\nif ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\n rotateDirection = 'clockwise';\n} else if (rX - pRX < 0 || rX - pRX > 270) {\n rotateDirection = 'counter-clockwise';\n}\n\nprint(rotateDirection);\n\n"
+ ],
+ alt: 'no image to display.',
+ itemtype: 'property',
+ name: 'pRotationX',
+ type: 'Number',
+ readonly: '',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 276,
+ description:
+ 'The system variable pRotationY always contains the rotation of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as 0 to +/-90 degrees.\n
\npRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.
\n',
+ example: [
+ "\n\n\n// A simple if statement looking at whether\n// rotationY - pRotationY < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rY = rotationY + 180;\nlet pRY = pRotationY + 180;\n\nif ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\n rotateDirection = 'clockwise';\n} else if (rY - pRY < 0 || rY - pRY > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\n\n"
+ ],
+ alt: 'no image to display.',
+ itemtype: 'property',
+ name: 'pRotationY',
+ type: 'Number',
+ readonly: '',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 320,
+ description:
+ 'The system variable pRotationZ always contains the rotation of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as 0 to 359 degrees.\n
\npRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.
\n',
+ example: [
+ "\n\n\n// A simple if statement looking at whether\n// rotationZ - pRotationZ < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\nif (\n (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\n rotationZ - pRotationZ < -270\n) {\n rotateDirection = 'clockwise';\n} else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\n\n"
+ ],
+ alt: 'no image to display.',
+ itemtype: 'property',
+ name: 'pRotationZ',
+ type: 'Number',
+ readonly: '',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 378,
+ description:
+ 'When a device is rotated, the axis that triggers the deviceTurned()\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().
\n',
+ itemtype: 'property',
+ name: 'turnAxis',
+ type: 'String',
+ readonly: '',
+ example: [
+ "\n\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n\n"
+ ],
+ alt:
+ '50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 417,
+ description:
+ 'The setMoveThreshold() function is used to set the movement threshold for\nthe deviceMoved() function. The default threshold is set to 0.5.
\n',
+ itemtype: 'method',
+ name: 'setMoveThreshold',
+ params: [
+ {
+ name: 'value',
+ description: 'The threshold value
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ '\n\n\n// Run this example on a mobile device\n// You will need to move the device incrementally further\n// the closer the square\'s color gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 0.5;\nfunction setup() {\n setMoveThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 0.1;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setMoveThreshold(threshold);\n}\n\n'
+ ],
+ alt:
+ '50x50 black rect in center of canvas. turns white on mobile when device moves',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 460,
+ description:
+ 'The setShakeThreshold() function is used to set the movement threshold for\nthe deviceShaken() function. The default threshold is set to 30.
\n',
+ itemtype: 'method',
+ name: 'setShakeThreshold',
+ params: [
+ {
+ name: 'value',
+ description: 'The threshold value
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ '\n\n\n// Run this example on a mobile device\n// You will need to shake the device more firmly\n// the closer the box\'s fill gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 30;\nfunction setup() {\n setShakeThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 5;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setShakeThreshold(threshold);\n}\n\n'
+ ],
+ alt:
+ '50x50 black rect in center of canvas. turns white on mobile when device\nis being shaked',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 504,
+ description:
+ 'The deviceMoved() function is called when the device is moved by more than\nthe threshold value along X, Y or Z axis. The default threshold is set to 0.5.\nThe threshold value can be changed using setMoveThreshold().
\n',
+ itemtype: 'method',
+ name: 'deviceMoved',
+ example: [
+ '\n\n\n// Run this example on a mobile device\n// Move the device around\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n'
+ ],
+ alt:
+ '50x50 black rect in center of canvas. turns white on mobile when device moves',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 536,
+ description:
+ 'The deviceTurned() function is called when the device rotates by\nmore than 90 degrees continuously.\n
\nThe axis that triggers the deviceTurned() method is stored in the turnAxis\nvariable. The deviceTurned() method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
\n',
+ itemtype: 'method',
+ name: 'deviceTurned',
+ example: [
+ '\n\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceTurned() {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n}\n\n\n\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceTurned() {\n if (turnAxis === \'X\') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n\n'
+ ],
+ alt:
+ '50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/acceleration.js',
+ line: 595,
+ description:
+ 'The deviceShaken() function is called when the device total acceleration\nchanges of accelerationX and accelerationY values is more than\nthe threshold value. The default threshold is set to 30.\nThe threshold value can be changed using setShakeThreshold().
\n',
+ itemtype: 'method',
+ name: 'deviceShaken',
+ example: [
+ '\n\n\n// Run this example on a mobile device\n// Shake the device to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction deviceShaken() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n'
+ ],
+ alt:
+ '50x50 black rect in center of canvas. turns white on mobile when device shakes',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Acceleration'
+ },
+ {
+ file: 'src/events/keyboard.js',
+ line: 10,
+ description:
+ 'The boolean system variable keyIsPressed is true if any key is pressed\nand false if no keys are pressed.
\n',
+ itemtype: 'property',
+ name: 'keyIsPressed',
+ type: 'Boolean',
+ readonly: '',
+ example: [
+ '\n\n\nfunction draw() {\n if (keyIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n rect(25, 25, 50, 50);\n}\n\n'
+ ],
+ alt: '50x50 white rect that turns black on keypress.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Keyboard'
+ },
+ {
+ file: 'src/events/keyboard.js',
+ line: 37,
+ description:
+ 'The system variable key always contains the value of the most recent\nkey on the keyboard that was typed. To get the proper capitalization, it\nis best to use it within keyTyped(). For non-ASCII keys, use the keyCode\nvariable.
\n',
+ itemtype: 'property',
+ name: 'key',
+ type: 'String',
+ readonly: '',
+ example: [
+ '\n\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n fill(245, 123, 158);\n textSize(50);\n}\n\nfunction draw() {\n background(200);\n text(key, 33, 65); // Display last key pressed.\n}\n'
+ ],
+ alt: 'canvas displays any key value that is pressed in pink font.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Keyboard'
+ },
+ {
+ file: 'src/events/keyboard.js',
+ line: 66,
+ description:
+ 'The variable keyCode is used to detect special keys such as BACKSPACE,\nDELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,\nDOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\nYou can also check for custom keys by looking up the keyCode of any key\non a site like this: keycode.info.
\n',
+ itemtype: 'property',
+ name: 'keyCode',
+ type: 'Integer',
+ readonly: '',
+ example: [
+ "\n\nlet fillVal = 126;\nfunction draw() {\n fill(fillVal);\n rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n if (keyCode === UP_ARROW) {\n fillVal = 255;\n } else if (keyCode === DOWN_ARROW) {\n fillVal = 0;\n }\n return false; // prevent default\n}\n\n\nfunction draw() {}\nfunction keyPressed() {\n background('yellow');\n text(`${key} ${keyCode}`, 10, 40);\n print(key, ' ', keyCode);\n return false; // prevent default\n}\n"
+ ],
+ alt:
+ 'Grey rect center. turns white when up arrow pressed and black when down\nDisplay key pressed and its keyCode in a yellow box',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Keyboard'
+ },
+ {
+ file: 'src/events/keyboard.js',
+ line: 107,
+ description:
+ 'The keyPressed() function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the keyCode variable.\n
\nFor non-ASCII keys, use the keyCode variable. You can check if the keyCode\nequals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL,\nOPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\n
\nFor ASCII keys, the key that was pressed is stored in the key variable. However, it\ndoes not distinguish between uppercase and lowercase. For this reason, it\nis recommended to use keyTyped() to read the key variable, in which the\ncase of the variable will be distinguished.\n
\nBecause of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to keyTyped() (and keyReleased() as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.
\nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n',
+ itemtype: 'method',
+ name: 'keyPressed',
+ example: [
+ '\n\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n\n\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n}\n\n\n\n\nfunction keyPressed() {\n // Do something\n return false; // prevent any default behaviour\n}\n\n'
+ ],
+ alt:
+ 'black rect center. turns white when key pressed and black when released\nblack rect center. turns white when left arrow pressed and black when right.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Keyboard'
+ },
+ {
+ file: 'src/events/keyboard.js',
+ line: 194,
+ description:
+ 'The keyReleased() function is called once every time a key is released.\nSee key and keyCode for more information.
\nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n',
+ itemtype: 'method',
+ name: 'keyReleased',
+ example: [
+ '\n\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n return false; // prevent any default behavior\n}\n\n'
+ ],
+ alt:
+ 'black rect center. turns white when key pressed and black when pressed again',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Keyboard'
+ },
+ {
+ file: 'src/events/keyboard.js',
+ line: 246,
+ description:
+ 'The keyTyped() function is called once every time a key is pressed, but\naction keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect\na keyCode for one of these keys, use the keyPressed() function instead.\nThe most recent key typed will be stored in the key variable.\n
\nBecause of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to keyTyped() (and keyReleased() as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.
\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add "return false"\nto the end of the method.
\n',
+ itemtype: 'method',
+ name: 'keyTyped',
+ example: [
+ "\n\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // uncomment to prevent any default behavior\n // return false;\n}\n\n"
+ ],
+ alt:
+ "black rect center. turns white when 'a' key typed and black when 'b' pressed",
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Keyboard'
+ },
+ {
+ file: 'src/events/keyboard.js',
+ line: 300,
+ description:
+ 'The onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.
\n',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Keyboard'
+ },
+ {
+ file: 'src/events/keyboard.js',
+ line: 310,
+ description:
+ 'The keyIsDown() function checks if the key is currently down, i.e. pressed.\nIt can be used if you have an object that moves, and you want several keys\nto be able to affect its behaviour simultaneously, such as moving a\nsprite diagonally. You can put in any number representing the keyCode of\nthe key, or use any of the variable keyCode names listed\nhere.
\n',
+ itemtype: 'method',
+ name: 'keyIsDown',
+ params: [
+ {
+ name: 'code',
+ description: 'The key to check for.
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'whether key is down or not',
+ type: 'Boolean'
+ },
+ example: [
+ '\n\nlet x = 100;\nlet y = 100;\n\nfunction setup() {\n createCanvas(512, 512);\n fill(255, 0, 0);\n}\n\nfunction draw() {\n if (keyIsDown(LEFT_ARROW)) {\n x -= 5;\n }\n\n if (keyIsDown(RIGHT_ARROW)) {\n x += 5;\n }\n\n if (keyIsDown(UP_ARROW)) {\n y -= 5;\n }\n\n if (keyIsDown(DOWN_ARROW)) {\n y += 5;\n }\n\n clear();\n ellipse(x, y, 50, 50);\n}\n\n\n\nlet diameter = 50;\n\nfunction setup() {\n createCanvas(512, 512);\n}\n\nfunction draw() {\n // 107 and 187 are keyCodes for "+"\n if (keyIsDown(107) || keyIsDown(187)) {\n diameter += 1;\n }\n\n // 109 and 189 are keyCodes for "-"\n if (keyIsDown(109) || keyIsDown(189)) {\n diameter -= 1;\n }\n\n clear();\n fill(255, 0, 0);\n ellipse(50, 50, diameter, diameter);\n}\n'
+ ],
+ alt:
+ '50x50 red ellipse moves left, right, up and down with arrow presses.\n50x50 red ellipse gets bigger or smaller when + or - are pressed.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Keyboard'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 12,
+ description:
+ 'The variable movedX contains the horizontal movement of the mouse since the last frame
\n',
+ itemtype: 'property',
+ name: 'movedX',
+ type: 'Number',
+ readonly: '',
+ example: [
+ '\n \n \n let x = 50;\n function setup() {\n rectMode(CENTER);\n }\nfunction draw() {\n if (x > 48) {\n x -= 2;\n } else if (x < 48) {\n x += 2;\n }\n x += floor(movedX / 5);\n background(237, 34, 93);\n fill(0);\n rect(x, 50, 50, 50);\n }\n \n '
+ ],
+ alt:
+ 'box moves left and right according to mouse movement then slowly back towards the center',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 44,
+ description:
+ 'The variable movedY contains the vertical movement of the mouse since the last frame
\n',
+ itemtype: 'property',
+ name: 'movedY',
+ type: 'Number',
+ readonly: '',
+ example: [
+ '\n\n\nlet y = 50;\nfunction setup() {\n rectMode(CENTER);\n}\n\nfunction draw() {\n if (y > 48) {\n y -= 2;\n } else if (y < 48) {\n y += 2;\n }\n y += floor(movedY / 5);\n background(237, 34, 93);\n fill(0);\n rect(y, 50, 50, 50);\n}\n\n'
+ ],
+ alt:
+ 'box moves up and down according to mouse movement then slowly back towards the center',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 82,
+ description:
+ 'The system variable mouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the canvas. The value at\nthe top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\nIf touch is used instead of mouse input, mouseX will hold the x value\nof the most recent touch point.
\n',
+ itemtype: 'property',
+ name: 'mouseX',
+ type: 'Number',
+ readonly: '',
+ example: [
+ '\n\n\n// Move the mouse across the canvas\nfunction draw() {\n background(244, 248, 252);\n line(mouseX, 0, mouseX, 100);\n}\n\n'
+ ],
+ alt: 'horizontal black line moves left and right with mouse x-position',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 109,
+ description:
+ 'The system variable mouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the canvas. The value at\nthe top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\nIf touch is used instead of mouse input, mouseY will hold the y value\nof the most recent touch point.
\n',
+ itemtype: 'property',
+ name: 'mouseY',
+ type: 'Number',
+ readonly: '',
+ example: [
+ '\n\n\n// Move the mouse across the canvas\nfunction draw() {\n background(244, 248, 252);\n line(0, mouseY, 100, mouseY);\n}\n\n'
+ ],
+ alt: 'vertical black line moves up and down with mouse y-position',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 136,
+ description:
+ 'The system variable pmouseX always contains the horizontal position of\nthe mouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and\n(-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX\nvalue at the start of each touch event.
\n',
+ itemtype: 'property',
+ name: 'pmouseX',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\n\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n //slow down the frameRate to make it more visible\n frameRate(10);\n}\n\nfunction draw() {\n background(244, 248, 252);\n line(mouseX, mouseY, pmouseX, pmouseY);\n print(pmouseX + ' -> ' + mouseX);\n}\n\n"
+ ],
+ alt:
+ 'line trail is created from cursor movements. faster movement make longer line.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 169,
+ description:
+ 'The system variable pmouseY always contains the vertical position of\nthe mouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and\n(-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY\nvalue at the start of each touch event.
\n',
+ itemtype: 'property',
+ name: 'pmouseY',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n //draw a square only if the mouse is not moving\n if (mouseY === pmouseY && mouseX === pmouseX) {\n rect(20, 20, 60, 60);\n }\n\n print(pmouseY + ' -> ' + mouseY);\n}\n\n"
+ ],
+ alt:
+ '60x60 black rect center, fuchsia background. rect flickers on mouse movement',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 201,
+ description:
+ 'The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.
\n',
+ itemtype: 'property',
+ name: 'winMouseX',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n let body = document.getElementsByTagName('body')[0];\n myCanvas.parent(body);\n}\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n //move the canvas to the horizontal mouse position\n //relative to the window\n myCanvas.position(winMouseX + 1, windowHeight / 2);\n\n //the y of the square is relative to the canvas\n rect(20, mouseY, 60, 60);\n}\n\n"
+ ],
+ alt:
+ '60x60 black rect y moves with mouse y and fuchsia canvas moves with mouse x',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 240,
+ description:
+ 'The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.
\n',
+ itemtype: 'property',
+ name: 'winMouseY',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n let body = document.getElementsByTagName('body')[0];\n myCanvas.parent(body);\n}\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n //move the canvas to the vertical mouse position\n //relative to the window\n myCanvas.position(windowWidth / 2, winMouseY + 1);\n\n //the x of the square is relative to the canvas\n rect(mouseX, 20, 60, 60);\n}\n\n"
+ ],
+ alt:
+ '60x60 black rect x moves with mouse x and fuchsia canvas y moves with mouse y',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 279,
+ description:
+ 'The system variable pwinMouseX always contains the horizontal position\nof the mouse in the frame previous to the current frame, relative to\n(0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX\nvalue at the start of each touch event.
\n',
+ itemtype: 'property',
+ name: 'pwinMouseX',
+ type: 'Number',
+ readonly: '',
+ example: [
+ '\n\n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n noStroke();\n fill(237, 34, 93);\n}\n\nfunction draw() {\n clear();\n //the difference between previous and\n //current x position is the horizontal mouse speed\n let speed = abs(winMouseX - pwinMouseX);\n //change the size of the circle\n //according to the horizontal speed\n ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n //move the canvas to the mouse position\n myCanvas.position(winMouseX + 1, winMouseY + 1);\n}\n\n'
+ ],
+ alt:
+ 'fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 320,
+ description:
+ 'The system variable pwinMouseY always contains the vertical position of\nthe mouse in the frame previous to the current frame, relative to (0, 0)\nof the window. Note: pwinMouseY will be reset to the current winMouseY\nvalue at the start of each touch event.
\n',
+ itemtype: 'property',
+ name: 'pwinMouseY',
+ type: 'Number',
+ readonly: '',
+ example: [
+ '\n\n\nlet myCanvas;\n\nfunction setup() {\n //use a variable to store a pointer to the canvas\n myCanvas = createCanvas(100, 100);\n noStroke();\n fill(237, 34, 93);\n}\n\nfunction draw() {\n clear();\n //the difference between previous and\n //current y position is the vertical mouse speed\n let speed = abs(winMouseY - pwinMouseY);\n //change the size of the circle\n //according to the vertical speed\n ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n //move the canvas to the mouse position\n myCanvas.position(winMouseX + 1, winMouseY + 1);\n}\n\n'
+ ],
+ alt:
+ 'fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 362,
+ description:
+ 'Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.
\n',
+ itemtype: 'property',
+ name: 'mouseButton',
+ type: 'Constant',
+ readonly: '',
+ example: [
+ '\n\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n if (mouseIsPressed) {\n if (mouseButton === LEFT) {\n ellipse(50, 50, 50, 50);\n }\n if (mouseButton === RIGHT) {\n rect(25, 25, 50, 50);\n }\n if (mouseButton === CENTER) {\n triangle(23, 75, 50, 20, 78, 75);\n }\n }\n\n print(mouseButton);\n}\n\n'
+ ],
+ alt:
+ '50x50 black ellipse appears on center of fuchsia canvas on mouse click/press.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 401,
+ description:
+ 'The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.
\n',
+ itemtype: 'property',
+ name: 'mouseIsPressed',
+ type: 'Boolean',
+ readonly: '',
+ example: [
+ '\n\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n\n if (mouseIsPressed) {\n ellipse(50, 50, 50, 50);\n } else {\n rect(25, 25, 50, 50);\n }\n\n print(mouseIsPressed);\n}\n\n'
+ ],
+ alt:
+ 'black 50x50 rect becomes ellipse with mouse click/press. fuchsia background.',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 494,
+ description:
+ 'The mouseMoved() function is called every time the mouse moves and a mouse\nbutton is not pressed.
\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n',
+ itemtype: 'method',
+ name: 'mouseMoved',
+ params: [
+ {
+ name: 'event',
+ description: 'optional MouseEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Move the mouse across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mouseMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n\n\n\n\nfunction mouseMoved() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt:
+ 'black 50x50 rect becomes lighter with mouse movements until white then resets\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 549,
+ description:
+ 'The mouseDragged() function is called once every time the mouse moves and\na mouse button is pressed. If no mouseDragged() function is defined, the\ntouchMoved() function will be called instead if it is defined.
\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n',
+ itemtype: 'method',
+ name: 'mouseDragged',
+ params: [
+ {
+ name: 'event',
+ description: 'optional MouseEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Drag the mouse across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mouseDragged() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n\n\n\n\nfunction mouseDragged() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt:
+ 'black 50x50 rect turns lighter with mouse click and drag until white, resets\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 630,
+ description:
+ 'The mousePressed() function is called once after every time a mouse button\nis pressed. The mouseButton variable (see the related reference entry)\ncan be used to determine which button has been pressed. If no\nmousePressed() function is defined, the touchStarted() function will be\ncalled instead if it is defined.
\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n',
+ itemtype: 'method',
+ name: 'mousePressed',
+ params: [
+ {
+ name: 'event',
+ description: 'optional MouseEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Click within the image to change\n// the value of the rectangle\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mousePressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n\n\n\n\nfunction mousePressed() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt:
+ 'black 50x50 rect turns white with mouse click/press.\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 712,
+ description:
+ 'The mouseReleased() function is called every time a mouse button is\nreleased. If no mouseReleased() function is defined, the touchEnded()\nfunction will be called instead if it is defined.
\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n',
+ itemtype: 'method',
+ name: 'mouseReleased',
+ params: [
+ {
+ name: 'event',
+ description: 'optional MouseEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction mouseReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n\n\n\n\nfunction mouseReleased() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt:
+ 'black 50x50 rect turns white with mouse click/press.\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 790,
+ description:
+ 'The mouseClicked() function is called once after a mouse button has been\npressed and then released.
\nBrowsers handle clicks differently, so this function is only guaranteed to be\nrun when the left mouse button is clicked. To handle other mouse buttons\nbeing pressed or released, see mousePressed() or mouseReleased().
\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n',
+ itemtype: 'method',
+ name: 'mouseClicked',
+ params: [
+ {
+ name: 'event',
+ description: 'optional MouseEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\n\nfunction mouseClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n\n\n\n\nfunction mouseClicked() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt:
+ 'black 50x50 rect turns white with mouse click/press.\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 860,
+ description:
+ 'The doubleClicked() function is executed every time a event\nlistener has detected a dblclick event which is a part of the\nDOM L3 specification. The doubleClicked event is fired when a\npointing device button (usually a mouse's primary button)\nis clicked twice on a single element. For more info on the\ndblclick event refer to mozilla's documentation here:\nhttps://developer.mozilla.org/en-US/docs/Web/Events/dblclick
\n',
+ itemtype: 'method',
+ name: 'doubleClicked',
+ params: [
+ {
+ name: 'event',
+ description: 'optional MouseEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been double clicked\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\n\nfunction doubleClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n\n\n\n\nfunction doubleClicked() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt:
+ 'black 50x50 rect turns white with mouse doubleClick/press.\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 945,
+ description:
+ 'The function mouseWheel() is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.
\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with "natural" scrolling enabled, the signs\nare inverted).
\nBrowsers may have different default behaviors attached to various\nmouse events. To prevent any default behavior for this event, add\n"return false" to the end of the method.
\nDue to the current support of the "wheel" event on Safari, the function\nmay only work as expected if "return false" is included while using Safari.
\n',
+ itemtype: 'method',
+ name: 'mouseWheel',
+ params: [
+ {
+ name: 'event',
+ description: 'optional WheelEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\nlet pos = 25;\n\nfunction draw() {\n background(237, 34, 93);\n fill(0);\n rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n print(event.delta);\n //move the square according to the vertical scroll amount\n pos += event.delta;\n //uncomment to block page scrolling\n //return false;\n}\n\n'
+ ],
+ alt:
+ 'black 50x50 rect moves up and down with vertical scroll. fuchsia background',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 999,
+ description:
+ 'The function requestPointerLock()\nlocks the pointer to its current position and makes it invisible.\nUse movedX and movedY to get the difference the mouse was moved since\nthe last call of draw
\nNote that not all browsers support this feature
\nThis enables you to create experiences that aren\'t limited by the mouse moving out of the screen\neven if it is repeatedly moved into one direction.
\nFor example a first person perspective experience
',
+ itemtype: 'method',
+ name: 'requestPointerLock',
+ example: [
+ '\n\n\nlet cam;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n requestPointerLock();\n cam = createCamera();\n}\n\nfunction draw() {\n background(255);\n cam.pan(-movedX * 0.001);\n cam.tilt(movedY * 0.001);\n sphere(25);\n}\n\n'
+ ],
+ alt:
+ '3D scene moves according to mouse mouse movement in a first person perspective',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/mouse.js',
+ line: 1046,
+ description:
+ 'The function exitPointerLock()\nexits a previously triggered pointer Lock\nfor example to make ui elements usable etc',
+ itemtype: 'method',
+ name: 'exitPointerLock',
+ example: [
+ '\n
\n\n//click the canvas to lock the pointer\n//click again to exit (otherwise escape)\nlet locked = false;\nfunction draw() {\n background(237, 34, 93);\n}\nfunction mouseClicked() {\n if (!locked) {\n locked = true;\n requestPointerLock();\n } else {\n exitPointerLock();\n locked = false;\n }\n}\n\n'
+ ],
+ alt: 'cursor gets locked / unlocked on mouse-click',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Mouse'
+ },
+ {
+ file: 'src/events/touch.js',
+ line: 10,
+ description:
+ 'The system variable touches[] contains an array of the positions of all\ncurrent touch points, relative to (0, 0) of the canvas, and IDs identifying a\nunique touch as it moves. Each element in the array is an object with x, y,\nand id properties.
\nThe touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).
\n',
+ itemtype: 'property',
+ name: 'touches',
+ type: 'Object[]',
+ readonly: '',
+ example: [
+ "\n\n\n// On a touchscreen device, touch\n// the canvas using one or more fingers\n// at the same time\nfunction draw() {\n clear();\n let display = touches.length + ' touches';\n text(display, 5, 10);\n}\n\n"
+ ],
+ alt: 'Number of touches currently registered are displayed on the canvas',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Touch'
+ },
+ {
+ file: 'src/events/touch.js',
+ line: 71,
+ description:
+ 'The touchStarted() function is called once after every time a touch is\nregistered. If no touchStarted() function is defined, the mousePressed()\nfunction will be called instead if it is defined.
\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add "return false"\nto the end of the method.
\n',
+ itemtype: 'method',
+ name: 'touchStarted',
+ params: [
+ {
+ name: 'event',
+ description: 'optional TouchEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Touch within the image to change\n// the value of the rectangle\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction touchStarted() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n\n\n\n\nfunction touchStarted() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt: '50x50 black rect turns white with touch event.\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Touch'
+ },
+ {
+ file: 'src/events/touch.js',
+ line: 151,
+ description:
+ 'The touchMoved() function is called every time a touch move is registered.\nIf no touchMoved() function is defined, the mouseDragged() function will\nbe called instead if it is defined.
\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add "return false"\nto the end of the method.
\n',
+ itemtype: 'method',
+ name: 'touchMoved',
+ params: [
+ {
+ name: 'event',
+ description: 'optional TouchEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Move your finger across the page\n// to change its value\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction touchMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n\n\n\n\n\nfunction touchMoved() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt:
+ '50x50 black rect turns lighter with touch until white. resets\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Touch'
+ },
+ {
+ file: 'src/events/touch.js',
+ line: 224,
+ description:
+ 'The touchEnded() function is called every time a touch ends. If no\ntouchEnded() function is defined, the mouseReleased() function will be\ncalled instead if it is defined.
\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add "return false"\nto the end of the method.
\n',
+ itemtype: 'method',
+ name: 'touchEnded',
+ params: [
+ {
+ name: 'event',
+ description: 'optional TouchEvent callback argument.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\n\n// Release touch within the image to\n// change the value of the rectangle\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n}\nfunction touchEnded() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n\n\n\n\n\nfunction touchEnded() {\n ellipse(mouseX, mouseY, 5, 5);\n // prevent default\n return false;\n}\n\n\n\n\n\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n console.log(event);\n}\n\n'
+ ],
+ alt: '50x50 black rect turns white with touch.\nno image displayed',
+ class: 'p5',
+ module: 'Events',
+ submodule: 'Touch'
+ },
+ {
+ file: 'src/image/filters.js',
+ line: 3,
+ description:
+ 'This module defines the filters for use with image buffers.
\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.
\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.
\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.
\n',
+ class: 'p5',
+ module: 'Events'
+ },
+ {
+ file: 'src/image/image.js',
+ line: 8,
+ description:
+ 'This module defines the p5 methods for the p5.Image class\nfor drawing images to the main display canvas.
\n',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/image.js',
+ line: 22,
+ description:
+ 'Creates a new p5.Image (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.\n
\n.pixels gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .pixels for\nmore info. It may also be simpler to use set() or get().\n
\nBefore accessing the pixels of an image, the data must loaded with the\nloadPixels() function. After the array data has been modified, the\nupdatePixels() function must be run to update the changes.
\n',
+ itemtype: 'method',
+ name: 'createImage',
+ params: [
+ {
+ name: 'width',
+ description: 'width in pixels
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'height',
+ description: 'height in pixels
\n',
+ type: 'Integer'
+ }
+ ],
+ return: {
+ description: 'the p5.Image object',
+ type: 'p5.Image'
+ },
+ example: [
+ '\n\n\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n for (let j = 0; j < img.height; j++) {\n img.set(i, j, color(0, 90, 102));\n }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n\n\n\n\n\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n for (let j = 0; j < img.height; j++) {\n img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n\n\n\n\n\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (img.width * d) * (img.height / 2 * d);\nfor (let i = 0; i < halfImage; i += 4) {\n img.pixels[i] = red(pink);\n img.pixels[i + 1] = green(pink);\n img.pixels[i + 2] = blue(pink);\n img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n\n'
+ ],
+ alt:
+ '66x66 dark turquoise rect in center of canvas.\n2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas\nno image displayed',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/image.js',
+ line: 102,
+ description:
+ 'Save the current canvas as an image. The browser will either save the\nfile immediately, or prompt the user with a dialogue window.
\n',
+ itemtype: 'method',
+ name: 'saveCanvas',
+ example: [
+ "\n \n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n }\n \n \n // note that this example has the same result as above\n // if no canvas is specified, defaults to main canvas\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n\n // all of the following are valid\n saveCanvas(c, 'myCanvas', 'jpg');\n saveCanvas(c, 'myCanvas.jpg');\n saveCanvas(c, 'myCanvas');\n saveCanvas(c);\n saveCanvas('myCanvas', 'png');\n saveCanvas('myCanvas');\n saveCanvas();\n }\n "
+ ],
+ alt: 'no image displayed\n no image displayed\n no image displayed',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Image',
+ overloads: [
+ {
+ line: 102,
+ params: [
+ {
+ name: 'selectedCanvas',
+ description:
+ 'a variable\n representing a specific html5 canvas (optional)
\n',
+ type: 'p5.Element|HTMLCanvasElement'
+ },
+ {
+ name: 'filename',
+ description: '',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'extension',
+ description: ''jpg' or 'png'
\n',
+ type: 'String',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 144,
+ params: [
+ {
+ name: 'filename',
+ description: '',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'extension',
+ description: '',
+ type: 'String',
+ optional: true
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/image/image.js',
+ line: 249,
+ description:
+ 'Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn't saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.
\nNote that saveFrames() will only save the first 15 frames of an animation.\nTo export longer animations, you might look into a library like\nccapture.js.
\n',
+ itemtype: 'method',
+ name: 'saveFrames',
+ params: [
+ {
+ name: 'filename',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'extension',
+ description: ''jpg' or 'png'
\n',
+ type: 'String'
+ },
+ {
+ name: 'duration',
+ description: 'Duration in seconds to save the frames for.
\n',
+ type: 'Number'
+ },
+ {
+ name: 'framerate',
+ description: 'Framerate to save the frames in.
\n',
+ type: 'Number'
+ },
+ {
+ name: 'callback',
+ description:
+ 'A callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData - an\n image/octet-stream, filename and extension.
\n',
+ type: 'Function(Array)',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\n function draw() {\n background(mouseX);\n }\n\n function mousePressed() {\n saveFrames('out', 'png', 1, 25, data => {\n print(data);\n });\n }\n"
+ ],
+ alt: 'canvas background goes from light to dark with mouse x.',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/loading_displaying.js',
+ line: 16,
+ description:
+ 'Loads an image from a path and creates a p5.Image from it.\n
\nThe image may not be immediately available for rendering\nIf you want to ensure that the image is ready before doing\nanything with it, place the loadImage() call in preload().\nYou may also supply a callback function to handle the image when it's ready.\n
\nThe path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.
\n',
+ itemtype: 'method',
+ name: 'loadImage',
+ params: [
+ {
+ name: 'path',
+ description: 'Path of the image to be loaded
\n',
+ type: 'String'
+ },
+ {
+ name: 'successCallback',
+ description:
+ 'Function to be called once\n the image is loaded. Will be passed the\n p5.Image.
\n',
+ type: 'function(p5.Image)',
+ optional: true
+ },
+ {
+ name: 'failureCallback',
+ description:
+ 'called with event error if\n the image fails to load.
\n',
+ type: 'Function(Event)',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the p5.Image object',
+ type: 'p5.Image'
+ },
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n}\n\n\n\n\nfunction setup() {\n // here we use a callback to display the image after loading\n loadImage('assets/laDefense.jpg', img => {\n image(img, 0, 0);\n });\n}\n\n"
+ ],
+ alt:
+ 'image of the underside of a white umbrella and grided ceililng above\nimage of the underside of a white umbrella and grided ceililng above',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/image/loading_displaying.js',
+ line: 143,
+ description: 'Helper function for loading GIF-based images
\n',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/image/loading_displaying.js',
+ line: 251,
+ description:
+ 'Draw an image to the p5.js canvas.
\nThis function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.
\nThis function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n"destination rectangle" (which corresponds to "dx", "dy", etc.) and "source\nimage" (which corresponds to "sx", "sy", etc.) below. Specifying the\n"source image" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n
\n',
+ itemtype: 'method',
+ name: 'image',
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n // Top-left corner of the img is at (0, 0)\n // Width and height are the img's original width and height\n image(img, 0, 0);\n}\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n background(50);\n // Top-left corner of the img is at (10, 10)\n // Width and height are 50 x 50\n image(img, 10, 10, 50, 50);\n}\n\n\n\n\nfunction setup() {\n // Here, we use a callback to display the image after loading\n loadImage('assets/laDefense.jpg', img => {\n image(img, 0, 0);\n });\n}\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/gradient.png');\n}\nfunction setup() {\n // 1. Background image\n // Top-left corner of the img is at (0, 0)\n // Width and height are the img's original width and height, 100 x 100\n image(img, 0, 0);\n // 2. Top right image\n // Top-left corner of destination rectangle is at (50, 0)\n // Destination rectangle width and height are 40 x 20\n // The next parameters are relative to the source image:\n // - Starting at position (50, 50) on the source image, capture a 50 x 50\n // subsection\n // - Draw this subsection to fill the dimensions of the destination rectangle\n image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n}\n\n"
+ ],
+ alt:
+ 'image of the underside of a white umbrella and gridded ceiling above\nimage of the underside of a white umbrella and gridded ceiling above',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Loading & Displaying',
+ overloads: [
+ {
+ line: 251,
+ params: [
+ {
+ name: 'img',
+ description: 'the image to display
\n',
+ type: 'p5.Image|p5.Element'
+ },
+ {
+ name: 'x',
+ description:
+ 'the x-coordinate of the top-left corner of the image
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description:
+ 'the y-coordinate of the top-left corner of the image
\n',
+ type: 'Number'
+ },
+ {
+ name: 'width',
+ description: 'the width to draw the image
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'height',
+ description: 'the height to draw the image
\n',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 339,
+ params: [
+ {
+ name: 'img',
+ description: '',
+ type: 'p5.Image|p5.Element'
+ },
+ {
+ name: 'dx',
+ description:
+ 'the x-coordinate of the destination\n rectangle in which to draw the source image
\n',
+ type: 'Number'
+ },
+ {
+ name: 'dy',
+ description:
+ 'the y-coordinate of the destination\n rectangle in which to draw the source image
\n',
+ type: 'Number'
+ },
+ {
+ name: 'dWidth',
+ description: 'the width of the destination rectangle
\n',
+ type: 'Number'
+ },
+ {
+ name: 'dHeight',
+ description: 'the height of the destination rectangle
\n',
+ type: 'Number'
+ },
+ {
+ name: 'sx',
+ description:
+ 'the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n',
+ type: 'Number'
+ },
+ {
+ name: 'sy',
+ description:
+ 'the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n',
+ type: 'Number'
+ },
+ {
+ name: 'sWidth',
+ description:
+ 'the width of the subsection of the\n source image to draw into the destination\n rectangle
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'sHeight',
+ description:
+ 'the height of the subsection of the\n source image to draw into the destination rectangle
\n',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/image/loading_displaying.js',
+ line: 422,
+ description:
+ 'Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.\n
\nTo apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with colorMode()).\n
\nThe value for the gray parameter must be less than or equal to the current\nmaximum value as specified by colorMode(). The default maximum value is\n255.
\n',
+ itemtype: 'method',
+ name: 'tint',
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n tint(0, 153, 204); // Tint blue\n image(img, 50, 0);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n tint(0, 153, 204, 126); // Tint blue and set transparency\n image(img, 50, 0);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n tint(255, 126); // Apply transparency without changing color\n image(img, 50, 0);\n}\n\n"
+ ],
+ alt:
+ '2 side by side images of umbrella and ceiling, one image with blue tint\nImages of umbrella and ceiling, one half of image with blue tint\n2 side by side images of umbrella and ceiling, one image translucent',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Loading & Displaying',
+ overloads: [
+ {
+ line: 422,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'red or hue value relative to\n the current color range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description:
+ 'green or saturation value\n relative to the current color range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description:
+ 'blue or brightness value\n relative to the current color range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'alpha',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 495,
+ params: [
+ {
+ name: 'value',
+ description: 'a color string
\n',
+ type: 'String'
+ }
+ ]
+ },
+ {
+ line: 500,
+ params: [
+ {
+ name: 'gray',
+ description: 'a gray value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'alpha',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 506,
+ params: [
+ {
+ name: 'values',
+ description:
+ 'an array containing the red,green,blue &\n and alpha components of the color
\n',
+ type: 'Number[]'
+ }
+ ]
+ },
+ {
+ line: 512,
+ params: [
+ {
+ name: 'color',
+ description: 'the tint color
\n',
+ type: 'p5.Color'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/image/loading_displaying.js',
+ line: 522,
+ description:
+ 'Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.
\n',
+ itemtype: 'method',
+ name: 'noTint',
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n tint(0, 153, 204); // Tint blue\n image(img, 0, 0);\n noTint(); // Disable tint\n image(img, 50, 0);\n}\n\n"
+ ],
+ alt: '2 side by side images of bricks, left image with blue tint',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/image/loading_displaying.js',
+ line: 588,
+ description:
+ 'Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to image() are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of image() as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.\n
\nimageMode(CORNERS) interprets the second and third parameters of image()\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.\n
\nimageMode(CENTER) interprets the second and third parameters of image()\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.
\n',
+ itemtype: 'method',
+ name: 'imageMode',
+ params: [
+ {
+ name: 'mode',
+ description: 'either CORNER, CORNERS, or CENTER
\n',
+ type: 'Constant'
+ }
+ ],
+ example: [
+ "\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n imageMode(CORNER);\n image(img, 10, 10, 50, 50);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n imageMode(CORNERS);\n image(img, 10, 10, 90, 40);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n imageMode(CENTER);\n image(img, 50, 50, 80, 80);\n}\n\n"
+ ],
+ alt:
+ 'small square image of bricks\nhorizontal rectangle image of bricks\nlarge square image of bricks',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 9,
+ description:
+ 'This module defines the p5.Image class and P5 methods for\ndrawing images to the main display canvas.
\n',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 88,
+ description: 'Image width.
\n',
+ itemtype: 'property',
+ name: 'width',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n image(img, 0, 0);\n for (let i = 0; i < img.width; i++) {\n let c = img.get(i, img.height / 2);\n stroke(c);\n line(i, height / 2, i, height);\n }\n}\n"
+ ],
+ alt:
+ 'rocky mountains in top and horizontal lines in corresponding colors in bottom.',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 115,
+ description: 'Image height.
\n',
+ itemtype: 'property',
+ name: 'height',
+ type: 'Number',
+ readonly: '',
+ example: [
+ "\n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n image(img, 0, 0);\n for (let i = 0; i < img.height; i++) {\n let c = img.get(img.width / 2, i);\n stroke(c);\n line(0, i, width / 2, i);\n }\n}\n"
+ ],
+ alt:
+ 'rocky mountains on right and vertical lines in corresponding colors on left.',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 152,
+ description:
+ 'Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh denisty displays may have more pixels (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):
\nlet d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n for (let j = 0; j < d; j++) {\n // loop over\n index = 4 * ((y * d + j) * width * d + (x * d + i));\n pixels[index] = r;\n pixels[index+1] = g;\n pixels[index+2] = b;\n pixels[index+3] = a;\n }\n}
\n
\nBefore accessing this array, the data must loaded with the loadPixels()\nfunction. After the array data has been modified, the updatePixels()\nfunction must be run to update the changes.
\n',
+ itemtype: 'property',
+ name: 'pixels',
+ type: 'Number[]',
+ example: [
+ '\n\n\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n for (let j = 0; j < img.height; j++) {\n img.set(i, j, color(0, 90, 102));\n }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n\n\n\n\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < 4 * (width * height / 2); i += 4) {\n img.pixels[i] = red(pink);\n img.pixels[i + 1] = green(pink);\n img.pixels[i + 2] = blue(pink);\n img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n\n'
+ ],
+ alt:
+ '66x66 turquoise rect in center of canvas\n66x66 pink rect in center of canvas',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 222,
+ description:
+ 'Helper function for animating GIF-based images with time
\n',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 249,
+ description: 'Helper fxn for sharing pixel methods
\n',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 258,
+ description:
+ 'Loads the pixels data for this image into the [pixels] attribute.
\n',
+ itemtype: 'method',
+ name: 'loadPixels',
+ example: [
+ "\n\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n myImage.loadPixels();\n halfImage = 4 * myImage.width * myImage.height / 2;\n for (let i = 0; i < halfImage; i++) {\n myImage.pixels[i + halfImage] = myImage.pixels[i];\n }\n myImage.updatePixels();\n}\n\nfunction draw() {\n image(myImage, 0, 0, width, height);\n}\n"
+ ],
+ alt: '2 images of rocky mountains vertically stacked',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 294,
+ description:
+ 'Updates the backing canvas for this image with the contents of\nthe [pixels] array.\n
\nIf this image is an animated GIF then the pixels will be updated\nin the frame that is currently displayed.
\n',
+ itemtype: 'method',
+ name: 'updatePixels',
+ example: [
+ "\n\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n myImage.loadPixels();\n halfImage = 4 * myImage.width * myImage.height / 2;\n for (let i = 0; i < halfImage; i++) {\n myImage.pixels[i + halfImage] = myImage.pixels[i];\n }\n myImage.updatePixels();\n}\n\nfunction draw() {\n image(myImage, 0, 0, width, height);\n}\n"
+ ],
+ alt: '2 images of rocky mountains vertically stacked',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image',
+ overloads: [
+ {
+ line: 294,
+ params: [
+ {
+ name: 'x',
+ description:
+ 'x-offset of the target update area for the\n underlying canvas
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'y',
+ description:
+ 'y-offset of the target update area for the\n underlying canvas
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'w',
+ description:
+ 'height of the target update area for the\n underlying canvas
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'h',
+ description:
+ 'height of the target update area for the\n underlying canvas
\n',
+ type: 'Integer'
+ }
+ ]
+ },
+ {
+ line: 337,
+ params: []
+ }
+ ]
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 345,
+ description:
+ 'Get a region of pixels from an image.
\nIf no params are passed, the whole image is returned.\nIf x and y are the only params passed a single pixel is extracted.\nIf all params are passed a rectangle region is extracted and a p5.Image\nis returned.
\n',
+ itemtype: 'method',
+ name: 'get',
+ return: {
+ description: 'the rectangle p5.Image',
+ type: 'p5.Image'
+ },
+ example: [
+ "\n\nlet myImage;\nlet c;\n\nfunction preload() {\n myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n background(myImage);\n noStroke();\n c = myImage.get(60, 90);\n fill(c);\n rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n"
+ ],
+ alt: 'image of rocky mountains with 50x50 green rect in front',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image',
+ overloads: [
+ {
+ line: 345,
+ params: [
+ {
+ name: 'x',
+ description: 'x-coordinate of the pixel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y-coordinate of the pixel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'w',
+ description: 'width
\n',
+ type: 'Number'
+ },
+ {
+ name: 'h',
+ description: 'height
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the rectangle p5.Image',
+ type: 'p5.Image'
+ }
+ },
+ {
+ line: 383,
+ params: [],
+ return: {
+ description: 'the whole p5.Image',
+ type: 'p5.Image'
+ }
+ },
+ {
+ line: 387,
+ params: [
+ {
+ name: 'x',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'color of pixel at x,y in array format [R, G, B, A]',
+ type: 'Number[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 400,
+ description:
+ 'Set the color of a single pixel or write an image into\nthis p5.Image.
\nNote that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling updatePixels().
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'x',
+ description: 'x-coordinate of the pixel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y-coordinate of the pixel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'a',
+ description:
+ 'grayscale value | pixel array |\n a p5.Color | image to copy
\n',
+ type: 'Number|Number[]|Object'
+ }
+ ],
+ example: [
+ '\n\n\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n for (let j = 0; j < img.height; j++) {\n img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n\n'
+ ],
+ alt:
+ '2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 438,
+ description:
+ 'Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).
\n',
+ itemtype: 'method',
+ name: 'resize',
+ params: [
+ {
+ name: 'width',
+ description: 'the resized image width
\n',
+ type: 'Number'
+ },
+ {
+ name: 'height',
+ description: 'the resized image height
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n image(img, 0, 0);\n}\n\nfunction mousePressed() {\n img.resize(50, 100);\n}\n"
+ ],
+ alt: 'image of rocky mountains. zoomed in',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 550,
+ description:
+ 'Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.
\n',
+ itemtype: 'method',
+ name: 'copy',
+ example: [
+ "\n\nlet photo;\nlet bricks;\nlet x;\nlet y;\n\nfunction preload() {\n photo = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n x = bricks.width / 2;\n y = bricks.height / 2;\n photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n image(photo, 0, 0);\n}\n"
+ ],
+ alt:
+ 'image of rocky mountains and smaller image on top of bricks at top left',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image',
+ overloads: [
+ {
+ line: 550,
+ params: [
+ {
+ name: 'srcImage',
+ description: 'source image
\n',
+ type: 'p5.Image|p5.Element'
+ },
+ {
+ name: 'sx',
+ description:
+ 'X coordinate of the source's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sy',
+ description:
+ 'Y coordinate of the source's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sw',
+ description: 'source image width
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sh',
+ description: 'source image height
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dx',
+ description:
+ 'X coordinate of the destination's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dy',
+ description:
+ 'Y coordinate of the destination's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dw',
+ description: 'destination image width
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dh',
+ description: 'destination image height
\n',
+ type: 'Integer'
+ }
+ ]
+ },
+ {
+ line: 591,
+ params: [
+ {
+ name: 'sx',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sy',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sw',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sh',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dx',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dy',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dw',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dh',
+ description: '',
+ type: 'Integer'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 606,
+ description:
+ 'Masks part of an image from displaying by loading another\nimage and using it's alpha channel as an alpha channel for\nthis image.
\n',
+ itemtype: 'method',
+ name: 'mask',
+ params: [
+ {
+ name: 'srcImage',
+ description: 'source image
\n',
+ type: 'p5.Image'
+ }
+ ],
+ example: [
+ "\n\nlet photo, maskImage;\nfunction preload() {\n photo = loadImage('assets/rockies.jpg');\n maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n photo.mask(maskImage);\n image(photo, 0, 0);\n}\n"
+ ],
+ alt:
+ 'image of rocky mountains with white at right\n\n\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 669,
+ description:
+ 'Applies an image filter to a p5.Image
\n',
+ itemtype: 'method',
+ name: 'filter',
+ params: [
+ {
+ name: 'filterType',
+ description:
+ 'either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n',
+ type: 'Constant'
+ },
+ {
+ name: 'filterParam',
+ description:
+ 'an optional parameter unique\n to each filter, see above
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet photo1;\nlet photo2;\n\nfunction preload() {\n photo1 = loadImage('assets/rockies.jpg');\n photo2 = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n photo2.filter(GRAY);\n image(photo1, 0, 0);\n image(photo2, width / 2, 0);\n}\n"
+ ],
+ alt:
+ '2 images of rocky mountains left one in color, right in black and white',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 705,
+ description:
+ 'Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.
\n',
+ itemtype: 'method',
+ name: 'blend',
+ example: [
+ "\n\nlet mountains;\nlet bricks;\n\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n image(mountains, 0, 0);\n image(bricks, 0, 0);\n}\n\n\nlet mountains;\nlet bricks;\n\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n image(mountains, 0, 0);\n image(bricks, 0, 0);\n}\n\n\nlet mountains;\nlet bricks;\n\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n image(mountains, 0, 0);\n image(bricks, 0, 0);\n}\n"
+ ],
+ alt:
+ 'image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image',
+ overloads: [
+ {
+ line: 705,
+ params: [
+ {
+ name: 'srcImage',
+ description: 'source image
\n',
+ type: 'p5.Image'
+ },
+ {
+ name: 'sx',
+ description:
+ 'X coordinate of the source's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sy',
+ description:
+ 'Y coordinate of the source's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sw',
+ description: 'source image width
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sh',
+ description: 'source image height
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dx',
+ description:
+ 'X coordinate of the destination's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dy',
+ description:
+ 'Y coordinate of the destination's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dw',
+ description: 'destination image width
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dh',
+ description: 'destination image height
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'blendMode',
+ description:
+ 'the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\nAvailable blend modes are: normal | multiply | screen | overlay |\n darken | lighten | color-dodge | color-burn | hard-light |\n soft-light | difference | exclusion | hue | saturation |\n color | luminosity
\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
\n',
+ type: 'Constant'
+ }
+ ]
+ },
+ {
+ line: 784,
+ params: [
+ {
+ name: 'sx',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sy',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sw',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sh',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dx',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dy',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dw',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dh',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'blendMode',
+ description: '',
+ type: 'Constant'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 827,
+ description:
+ 'Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default), jpg, and gif\n
\nNote that the file will only be downloaded as an animated GIF\nif the p5.Image was loaded from a GIF file.
\n',
+ itemtype: 'method',
+ name: 'save',
+ params: [
+ {
+ name: 'filename',
+ description: 'give your file a name
\n',
+ type: 'String'
+ },
+ {
+ name: 'extension',
+ description: ''png' or 'jpg'
\n',
+ type: 'String'
+ }
+ ],
+ example: [
+ "\n\nlet photo;\n\nfunction preload() {\n photo = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n if (key === 's') {\n photo.save('photo', 'png');\n }\n}\n"
+ ],
+ alt: 'image of rocky mountains.',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 869,
+ description: 'Starts an animated GIF over at the beginning state.
\n',
+ itemtype: 'method',
+ name: 'reset',
+ example: [
+ "\n\nlet gif;\n\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction draw() {\n background(255);\n // The GIF file that we loaded only loops once\n // so it freezes on the last frame after playing through\n image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n // Click to reset the GIF and begin playback from start\n gif.reset();\n}\n"
+ ],
+ alt:
+ 'Animated image of a cartoon face that winks once and then freezes\nWhen you click it animates again, winks once and freezes',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 910,
+ description:
+ 'Gets the index for the frame that is currently visible in an animated GIF.
\n',
+ itemtype: 'method',
+ name: 'getCurrentFrame',
+ return: {
+ description:
+ 'The index for the currently displaying frame in animated GIF',
+ type: 'Number'
+ },
+ example: [
+ "\n\nlet gif;\n\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction draw() {\n let frame = gif.getCurrentFrame();\n image(gif, 0, 0);\n text(frame, 10, 90);\n}\n"
+ ],
+ alt:
+ 'Animated image of a cartoon eye looking around and then\nlooking outwards, in the lower-left hand corner a number counts\nup quickly to 124 and then starts back over at 0',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 942,
+ description:
+ 'Sets the index of the frame that is currently visible in an animated GIF
\n',
+ itemtype: 'method',
+ name: 'setFrame',
+ params: [
+ {
+ name: 'index',
+ description:
+ 'the index for the frame that should be displayed
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\nlet gif;\n\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n gif.pause();\n image(gif, 0, 0);\n // Get the highest frame number which is the number of frames - 1\n let maxFrame = gif.numFrames() - 1;\n // Set the current frame that is mapped to be relative to mouse position\n let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n gif.setFrame(frameNumber);\n}\n"
+ ],
+ alt:
+ 'A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 987,
+ description: 'Returns the number of frames in an animated GIF
\n',
+ itemtype: 'method',
+ name: 'numFrames',
+ return: {
+ description: '',
+ type: 'Number'
+ },
+ example: [
+ " The number of frames in the animated GIF\n\nlet gif;\n\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n gif.pause();\n image(gif, 0, 0);\n // Get the highest frame number which is the number of frames - 1\n let maxFrame = gif.numFrames() - 1;\n // Set the current frame that is mapped to be relative to mouse position\n let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n gif.setFrame(frameNumber);\n}\n"
+ ],
+ alt:
+ 'A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 1023,
+ description:
+ 'Plays an animated GIF that was paused with\npause()
\n',
+ itemtype: 'method',
+ name: 'play',
+ example: [
+ "\n\nlet gif;\n\nfunction preload() {\n gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n gif.pause();\n}\n\nfunction mouseReleased() {\n gif.play();\n}\n"
+ ],
+ alt:
+ 'An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 1061,
+ description: 'Pauses an animated GIF.
\n',
+ itemtype: 'method',
+ name: 'pause',
+ example: [
+ "\n\nlet gif;\n\nfunction preload() {\n gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n gif.pause();\n}\n\nfunction mouseReleased() {\n gif.play();\n}\n"
+ ],
+ alt:
+ 'An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/p5.Image.js',
+ line: 1098,
+ description: 'Changes the delay between frames in an animated GIF
\n',
+ itemtype: 'method',
+ name: 'delay',
+ params: [
+ {
+ name: 'd',
+ description:
+ 'the amount in milliseconds to delay between switching frames
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\nlet gifFast, gifSlow;\n\nfunction preload() {\n gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n gifFast.resize(width / 2, height / 2);\n gifSlow.resize(width / 2, height / 2);\n\n //Change the delay here\n gifFast.delay(10);\n gifSlow.delay(100);\n}\n\nfunction draw() {\n background(255);\n image(gifFast, 0, 0);\n image(gifSlow, width / 2, 0);\n}\n"
+ ],
+ alt:
+ 'Two animated gifs of cartoon eyes looking around\nThe gif on the left animates quickly, on the right\nthe animation is much slower',
+ class: 'p5.Image',
+ module: 'Image',
+ submodule: 'Image'
+ },
+ {
+ file: 'src/image/pixels.js',
+ line: 12,
+ description:
+ 'Uint8ClampedArray\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.\n
\nThe first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):
\nlet d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n for (let j = 0; j < d; j++) {\n // loop over\n index = 4 * ((y * d + j) * width * d + (x * d + i));\n pixels[index] = r;\n pixels[index+1] = g;\n pixels[index+2] = b;\n pixels[index+3] = a;\n }\n}
\nWhile the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that set() will automatically take care of\nsetting all the appropriate values in pixels[] for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.\n
\nBefore accessing this array, the data must loaded with the loadPixels()\nfunction. After the array data has been modified, the updatePixels()\nfunction must be run to update the changes.\n
\nNote that this is not a standard javascript array. This means that\nstandard javascript functions such as slice() or\narrayCopy() do not\nwork.
',
+ itemtype: 'property',
+ name: 'pixels',
+ type: 'Number[]',
+ example: [
+ '\n\n\nlet pink = color(255, 102, 204);\nloadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (width * d) * (height / 2 * d);\nfor (let i = 0; i < halfImage; i += 4) {\n pixels[i] = red(pink);\n pixels[i + 1] = green(pink);\n pixels[i + 2] = blue(pink);\n pixels[i + 3] = alpha(pink);\n}\nupdatePixels();\n\n'
+ ],
+ alt: 'top half of canvas pink, bottom grey',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Pixels'
+ },
+ {
+ file: 'src/image/pixels.js',
+ line: 81,
+ description:
+ 'Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.
\n',
+ itemtype: 'method',
+ name: 'blend',
+ example: [
+ "\n\nlet img0;\nlet img1;\n\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n background(img0);\n image(img1, 0, 0);\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n\n\nlet img0;\nlet img1;\n\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n background(img0);\n image(img1, 0, 0);\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n\n\nlet img0;\nlet img1;\n\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n background(img0);\n image(img1, 0, 0);\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n"
+ ],
+ alt:
+ 'image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Pixels',
+ overloads: [
+ {
+ line: 81,
+ params: [
+ {
+ name: 'srcImage',
+ description: 'source image
\n',
+ type: 'p5.Image'
+ },
+ {
+ name: 'sx',
+ description:
+ 'X coordinate of the source's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sy',
+ description:
+ 'Y coordinate of the source's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sw',
+ description: 'source image width
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sh',
+ description: 'source image height
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dx',
+ description:
+ 'X coordinate of the destination's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dy',
+ description:
+ 'Y coordinate of the destination's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dw',
+ description: 'destination image width
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dh',
+ description: 'destination image height
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'blendMode',
+ description:
+ 'the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\n',
+ type: 'Constant'
+ }
+ ]
+ },
+ {
+ line: 154,
+ params: [
+ {
+ name: 'sx',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sy',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sw',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sh',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dx',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dy',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dw',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dh',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'blendMode',
+ description: '',
+ type: 'Constant'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/image/pixels.js',
+ line: 175,
+ description:
+ 'Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.
\n',
+ itemtype: 'method',
+ name: 'copy',
+ example: [
+ "\n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n background(img);\n copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n stroke(255);\n noFill();\n // Rectangle shows area being copied\n rect(7, 22, 10, 10);\n}\n"
+ ],
+ alt:
+ 'image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Pixels',
+ overloads: [
+ {
+ line: 175,
+ params: [
+ {
+ name: 'srcImage',
+ description: 'source image
\n',
+ type: 'p5.Image|p5.Element'
+ },
+ {
+ name: 'sx',
+ description:
+ 'X coordinate of the source's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sy',
+ description:
+ 'Y coordinate of the source's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sw',
+ description: 'source image width
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'sh',
+ description: 'source image height
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dx',
+ description:
+ 'X coordinate of the destination's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dy',
+ description:
+ 'Y coordinate of the destination's upper left corner
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dw',
+ description: 'destination image width
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dh',
+ description: 'destination image height
\n',
+ type: 'Integer'
+ }
+ ]
+ },
+ {
+ line: 218,
+ params: [
+ {
+ name: 'sx',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sy',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sw',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'sh',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dx',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dy',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dw',
+ description: '',
+ type: 'Integer'
+ },
+ {
+ name: 'dh',
+ description: '',
+ type: 'Integer'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/image/pixels.js',
+ line: 310,
+ description:
+ 'Applies a filter to the canvas.\n
\nThe presets options are:\n
\nTHRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\n
\nGRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.\n
\nOPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.\n
\nINVERT\nSets each pixel to its inverse value. No parameter is used.\n
\nPOSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.\n
\nBLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.\n
\nERODE\nReduces the light areas. No parameter is used.\n
\nDILATE\nIncreases the light areas. No parameter is used.
\n',
+ itemtype: 'method',
+ name: 'filter',
+ params: [
+ {
+ name: 'filterType',
+ description:
+ 'either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n',
+ type: 'Constant'
+ },
+ {
+ name: 'filterParam',
+ description:
+ 'an optional parameter unique\n to each filter, see above
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n filter(THRESHOLD);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n filter(GRAY);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n filter(OPAQUE);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n filter(INVERT);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n filter(POSTERIZE, 3);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n filter(DILATE);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n filter(BLUR, 3);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n filter(ERODE);\n}\n\n"
+ ],
+ alt:
+ 'black and white image of a brick wall.\ngreyscale image of a brickwall\nimage of a brickwall\njade colored image of a brickwall\nred and pink image of a brickwall\nimage of a brickwall\nblurry image of a brickwall\nimage of a brickwall\nimage of a brickwall with less detail',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Pixels'
+ },
+ {
+ file: 'src/image/pixels.js',
+ line: 489,
+ description:
+ 'Get a region of pixels, or a single pixel, from the canvas.
\nReturns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current imageMode().\n
\nGetting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from pixels[]. The equivalent statement to\nget(x, y) using pixels[] with pixel density d is
\nlet x, y, d; // set these to the coordinates\nlet off = (y * width + x) * d * 4;\nlet components = [\n pixels[off],\n pixels[off + 1],\n pixels[off + 2],\n pixels[off + 3]\n];\nprint(components);
\n
\nSee the reference for pixels[] for more information.
\nIf you want to extract an array of colors or a subimage from an p5.Image object,\ntake a look at p5.Image.get()
\n',
+ itemtype: 'method',
+ name: 'get',
+ return: {
+ description: 'the rectangle p5.Image',
+ type: 'p5.Image'
+ },
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n let c = get();\n image(c, width / 2, 0);\n}\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n image(img, 0, 0);\n let c = get(50, 90);\n fill(c);\n noStroke();\n rect(25, 25, 50, 50);\n}\n\n"
+ ],
+ alt:
+ '2 images of the rocky mountains, side-by-side\nImage of the rocky mountains with 50x50 green rect in center of canvas',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Pixels',
+ overloads: [
+ {
+ line: 489,
+ params: [
+ {
+ name: 'x',
+ description: 'x-coordinate of the pixel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y-coordinate of the pixel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'w',
+ description: 'width
\n',
+ type: 'Number'
+ },
+ {
+ name: 'h',
+ description: 'height
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the rectangle p5.Image',
+ type: 'p5.Image'
+ }
+ },
+ {
+ line: 562,
+ params: [],
+ return: {
+ description: 'the whole p5.Image',
+ type: 'p5.Image'
+ }
+ },
+ {
+ line: 566,
+ params: [
+ {
+ name: 'x',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'color of pixel at x,y in array format [R, G, B, A]',
+ type: 'Number[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/image/pixels.js',
+ line: 577,
+ description:
+ 'Loads the pixel data for the display window into the pixels[] array. This\nfunction must always be called before reading from or writing to pixels[].\nNote that only changes made with set() or direct manipulation of pixels[]\nwill occur.
\n',
+ itemtype: 'method',
+ name: 'loadPixels',
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n image(img, 0, 0, width, height);\n let d = pixelDensity();\n let halfImage = 4 * (width * d) * (height * d / 2);\n loadPixels();\n for (let i = 0; i < halfImage; i++) {\n pixels[i + halfImage] = pixels[i];\n }\n updatePixels();\n}\n\n"
+ ],
+ alt:
+ 'two images of the rocky mountains. one on top, one on bottom of canvas.',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Pixels'
+ },
+ {
+ file: 'src/image/pixels.js',
+ line: 614,
+ description:
+ 'Changes the color of any pixel, or writes an image directly to the\ndisplay window.
\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a p5.Color object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current imageMode().\n
\n\nAfter using set(), you must call updatePixels() for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .get() or drawing the image.\n
\nSetting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into pixels[]. Setting the pixels[]\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop.
\nSee the reference for pixels[] for more information.
',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'x',
+ description: 'x-coordinate of the pixel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y-coordinate of the pixel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'c',
+ description:
+ 'insert a grayscale value | a pixel array |\n a p5.Color object | a p5.Image to copy
\n',
+ type: 'Number|Number[]|Object'
+ }
+ ],
+ example: [
+ "\n\n\nlet black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n\n\n\n\n\nfor (let i = 30; i < width - 15; i++) {\n for (let j = 20; j < height - 25; j++) {\n let c = color(204 - j, 153 - i, 0);\n set(i, j, c);\n }\n}\nupdatePixels();\n\n\n\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n set(0, 0, img);\n updatePixels();\n line(0, 0, width, height);\n line(0, height, width, 0);\n}\n\n"
+ ],
+ alt:
+ "4 black points in the shape of a square middle-right of canvas.\nsquare with orangey-brown gradient lightening at bottom right.\nimage of the rocky mountains. with lines like an 'x' through the center.",
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Pixels'
+ },
+ {
+ file: 'src/image/pixels.js',
+ line: 688,
+ description:
+ 'Updates the display window with the data in the pixels[] array.\nUse in conjunction with loadPixels(). If you're only reading pixels from\nthe array, there's no need to call updatePixels() — updating is only\nnecessary to apply changes. updatePixels() should be called anytime the\npixels array is manipulated or set() is called, and only changes made with\nset() or direct changes to pixels[] will occur.
\n',
+ itemtype: 'method',
+ name: 'updatePixels',
+ params: [
+ {
+ name: 'x',
+ description:
+ 'x-coordinate of the upper-left corner of region\n to update
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'y',
+ description:
+ 'y-coordinate of the upper-left corner of region\n to update
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'w',
+ description: 'width of region to update
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'h',
+ description: 'height of region to update
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n image(img, 0, 0, width, height);\n let d = pixelDensity();\n let halfImage = 4 * (width * d) * (height * d / 2);\n loadPixels();\n for (let i = 0; i < halfImage; i++) {\n pixels[i + halfImage] = pixels[i];\n }\n updatePixels();\n}\n\n"
+ ],
+ alt:
+ 'two images of the rocky mountains. one on top, one on bottom of canvas.',
+ class: 'p5',
+ module: 'Image',
+ submodule: 'Pixels'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 18,
+ description:
+ 'Loads a JSON file from a file or a URL, and returns an Object.\nNote that even if the JSON file contains an Array, an Object will be\nreturned with index numbers as keys.
\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. JSONP is supported via a polyfill and you\ncan pass in as the second argument an object with definitions of the json\ncallback following the syntax specified here.
\nThis method is suitable for fetching files up to size of 64MB.
\n',
+ itemtype: 'method',
+ name: 'loadJSON',
+ return: {
+ description: 'JSON data',
+ type: 'Object|Array'
+ },
+ example: [
+ '\n\nCalling loadJSON() inside preload() guarantees to complete the\noperation before setup() and draw() are called.
\n\n\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nfunction preload() {\n // Get the most recent earthquake in the database\n let url =\n \'https://earthquake.usgs.gov/earthquakes/feed/v1.0/\' +\n \'summary/all_day.geojson\';\n earthquakes = loadJSON(url);\n}\n\nfunction setup() {\n noLoop();\n}\n\nfunction draw() {\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n}\n\n\n\nOutside of preload(), you may supply a callback function to handle the\nobject:
\n\nfunction setup() {\n noLoop();\n let url =\n \'https://earthquake.usgs.gov/earthquakes/feed/v1.0/\' +\n \'summary/all_day.geojson\';\n loadJSON(url, drawEarthquake);\n}\n\nfunction draw() {\n background(200);\n}\n\nfunction drawEarthquake(earthquakes) {\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n}\n'
+ ],
+ alt:
+ '50x50 ellipse that changes from black to white depending on the current humidity\n50x50 ellipse that changes from black to white depending on the current humidity',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Input',
+ overloads: [
+ {
+ line: 18,
+ params: [
+ {
+ name: 'path',
+ description: 'name of the file or url to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'jsonpOptions',
+ description: 'options object for jsonp related settings
\n',
+ type: 'Object',
+ optional: true
+ },
+ {
+ name: 'datatype',
+ description: '"json" or "jsonp"
\n',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after\n loadJSON() completes, data is passed\n in as first argument
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to be executed if\n there is an error, response is passed\n in as first argument
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'JSON data',
+ type: 'Object|Array'
+ }
+ },
+ {
+ line: 104,
+ params: [
+ {
+ name: 'path',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'datatype',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: '',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description: '',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Object|Array'
+ }
+ },
+ {
+ line: 112,
+ params: [
+ {
+ name: 'path',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: '',
+ type: 'Function'
+ },
+ {
+ name: 'errorCallback',
+ description: '',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Object|Array'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/io/files.js',
+ line: 183,
+ description:
+ 'Reads the contents of a file and creates a String array of its individual\nlines. If the name of the file is used as the parameter, as in the above\nexample, the file must be located in the sketch directory/folder.\n
\nAlternatively, the file maybe be loaded from anywhere on the local\ncomputer using an absolute path (something that starts with / on Unix and\nLinux, or a drive letter on Windows), or the filename parameter can be a\nURL for a file found on a network.\n
\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.
\nThis method is suitable for fetching files up to size of 64MB.
\n',
+ itemtype: 'method',
+ name: 'loadStrings',
+ params: [
+ {
+ name: 'filename',
+ description: 'name of the file or url to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after loadStrings()\n completes, Array is passed in as first\n argument
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to be executed if\n there is an error, response is passed\n in as first argument
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Array of Strings',
+ type: 'String[]'
+ },
+ example: [
+ '\n\nCalling loadStrings() inside preload() guarantees to complete the\noperation before setup() and draw() are called.
\n\n\nlet result;\nfunction preload() {\n result = loadStrings(\'assets/test.txt\');\n}\n\nfunction setup() {\n background(200);\n text(random(result), 10, 10, 80, 80);\n}\n\n\nOutside of preload(), you may supply a callback function to handle the\nobject:
\n\n\nfunction setup() {\n loadStrings(\'assets/test.txt\', pickString);\n}\n\nfunction pickString(result) {\n background(200);\n text(random(result), 10, 10, 80, 80);\n}\n'
+ ],
+ alt:
+ 'randomly generated text from a file, for example "i smell like butter"\nrandomly generated text from a file, for example "i have three feet"',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 294,
+ description:
+ 'Reads the contents of a file or URL and creates a p5.Table object with\nits values. If a file is specified, it must be located in the sketch\'s\n"data" folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the \'header\' option is\nincluded.
\n\nPossible options include:\n
\n- csv - parse the table as comma-separated values
\n- tsv - parse the table as tab-separated values
\n- header - this table has a header (title) row
\n
\n\n\nWhen passing in multiple options, pass them in as separate parameters,\nseperated by commas. For example:\n
\n\nloadTable(\'my_csv_file.csv\', \'csv\', \'header\');\n\n
\n\n All files loaded and saved use UTF-8 encoding.
\n\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadTable() inside preload()\nguarantees to complete the operation before setup() and draw() are called.\n
Outside of preload(), you may supply a callback function to handle the\nobject:
\n\n\nThis method is suitable for fetching files up to size of 64MB.
\n',
+ itemtype: 'method',
+ name: 'loadTable',
+ return: {
+ description: 'Table object containing data',
+ type: 'Object'
+ },
+ example: [
+ '\n\n\n// Given the following CSV file called "mammals.csv"\n// located in the project\'s "assets" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value "csv"\n //and has a header specifying the columns labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n //the file can be remote\n //table = loadTable("http://p5js.org/reference/assets/mammals.csv",\n // "csv", "header");\n}\n\nfunction setup() {\n //count the columns\n print(table.getRowCount() + \' total rows in table\');\n print(table.getColumnCount() + \' total columns in table\');\n\n print(table.getColumn(\'name\'));\n //["Goat", "Leopard", "Zebra"]\n\n //cycle through the table\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(table.getString(r, c));\n }\n}\n\n'
+ ],
+ alt:
+ 'randomly generated text from a file, for example "i smell like butter"\nrandomly generated text from a file, for example "i have three feet"',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Input',
+ overloads: [
+ {
+ line: 294,
+ params: [
+ {
+ name: 'filename',
+ description: 'name of the file or URL to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'options',
+ description:
+ '"header" "csv" "tsv"
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after\n loadTable() completes. On success, the\n Table object is passed in as the\n first argument.
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to be executed if\n there is an error, response is passed\n in as first argument
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Table object containing data',
+ type: 'Object'
+ }
+ },
+ {
+ line: 384,
+ params: [
+ {
+ name: 'filename',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: '',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description: '',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Object'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/io/files.js',
+ line: 604,
+ description:
+ 'Reads the contents of a file and creates an XML object with its values.\nIf the name of the file is used as the parameter, as in the above example,\nthe file must be located in the sketch directory/folder.
\nAlternatively, the file maybe be loaded from anywhere on the local\ncomputer using an absolute path (something that starts with / on Unix and\nLinux, or a drive letter on Windows), or the filename parameter can be a\nURL for a file found on a network.
\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadXML() inside preload()\nguarantees to complete the operation before setup() and draw() are called.
\nOutside of preload(), you may supply a callback function to handle the\nobject.
\nThis method is suitable for fetching files up to size of 64MB.
\n',
+ itemtype: 'method',
+ name: 'loadXML',
+ params: [
+ {
+ name: 'filename',
+ description: 'name of the file or URL to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after loadXML()\n completes, XML object is passed in as\n first argument
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to be executed if\n there is an error, response is passed\n in as first argument
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'XML object containing data',
+ type: 'Object'
+ },
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let children = xml.getChildren(\'animal\');\n\n for (let i = 0; i < children.length; i++) {\n let id = children[i].getNum(\'id\');\n let coloring = children[i].getString(\'species\');\n let name = children[i].getContent();\n print(id + \', \' + coloring + \', \' + name);\n }\n}\n\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 715,
+ description:
+ 'This method is suitable for fetching files up to size of 64MB.
\n',
+ itemtype: 'method',
+ name: 'loadBytes',
+ params: [
+ {
+ name: 'file',
+ description: 'name of the file or URL to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after loadBytes()\n completes
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to be executed if there\n is an error
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: "an object whose 'bytes' property will be the loaded buffer",
+ type: 'Object'
+ },
+ example: [
+ "\n\nlet data;\n\nfunction preload() {\n data = loadBytes('assets/mammals.xml');\n}\n\nfunction setup() {\n for (let i = 0; i < 5; i++) {\n console.log(data.bytes[i].toString(16));\n }\n}\n"
+ ],
+ alt: 'no image displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 775,
+ description:
+ "Method for executing an HTTP GET request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'GET'). The 'binary' datatype will return\na Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer\nwhich can be used to initialize typed arrays (such as Uint8Array).
\n",
+ itemtype: 'method',
+ name: 'httpGet',
+ return: {
+ description:
+ 'A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.',
+ type: 'Promise'
+ },
+ example: [
+ "\n\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nfunction preload() {\n // Get the most recent earthquake in the database\n let url =\n 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\n 'format=geojson&limit=1&orderby=time';\n httpGet(url, 'jsonp', false, function(response) {\n // when the HTTP request completes, populate the variable that holds the\n // earthquake data used in the visualization.\n earthquakes = response;\n });\n}\n\nfunction draw() {\n if (!earthquakes) {\n // Wait until the earthquake data has loaded before drawing.\n return;\n }\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n noLoop();\n}\n"
+ ],
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Input',
+ overloads: [
+ {
+ line: 775,
+ params: [
+ {
+ name: 'path',
+ description: 'name of the file or url to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'datatype',
+ description:
+ '"json", "jsonp", "binary", "arrayBuffer",\n "xml", or "text"
\n',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'data',
+ description: 'param data passed sent with request
\n',
+ type: 'Object|Boolean',
+ optional: true
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to be executed if\n there is an error, response is passed\n in as first argument
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.',
+ type: 'Promise'
+ }
+ },
+ {
+ line: 829,
+ params: [
+ {
+ name: 'path',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'data',
+ description: '',
+ type: 'Object|Boolean'
+ },
+ {
+ name: 'callback',
+ description: '',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description: '',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Promise'
+ }
+ },
+ {
+ line: 837,
+ params: [
+ {
+ name: 'path',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: '',
+ type: 'Function'
+ },
+ {
+ name: 'errorCallback',
+ description: '',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Promise'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/io/files.js',
+ line: 852,
+ description:
+ "Method for executing an HTTP POST request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'POST').
\n",
+ itemtype: 'method',
+ name: 'httpPost',
+ return: {
+ description:
+ 'A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.',
+ type: 'Promise'
+ },
+ example: [
+ "\n\n\n// Examples use jsonplaceholder.typicode.com for a Mock Data API\n\nlet url = 'https://jsonplaceholder.typicode.com/posts';\nlet postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n\nfunction setup() {\n createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n // Pick new random color values\n let r = random(255);\n let g = random(255);\n let b = random(255);\n\n httpPost(url, 'json', postData, function(result) {\n strokeWeight(2);\n stroke(r, g, b);\n fill(r, g, b, 127);\n ellipse(mouseX, mouseY, 200, 200);\n text(result.body, mouseX, mouseY);\n });\n}\n\n\n\n\n\nlet url = 'https://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n\nfunction setup() {\n createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n // Pick new random color values\n let r = random(255);\n let g = random(255);\n let b = random(255);\n\n httpPost(\n url,\n 'json',\n postData,\n function(result) {\n // ... won't be called\n },\n function(error) {\n strokeWeight(2);\n stroke(r, g, b);\n fill(r, g, b, 127);\n text(error.toString(), mouseX, mouseY);\n }\n );\n}\n\n"
+ ],
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Input',
+ overloads: [
+ {
+ line: 852,
+ params: [
+ {
+ name: 'path',
+ description: 'name of the file or url to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'datatype',
+ description:
+ '"json", "jsonp", "xml", or "text".\n If omitted, httpPost() will guess.
\n',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'data',
+ description: 'param data passed sent with request
\n',
+ type: 'Object|Boolean',
+ optional: true
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after\n httpPost() completes, data is passed in\n as first argument
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to be executed if\n there is an error, response is passed\n in as first argument
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.',
+ type: 'Promise'
+ }
+ },
+ {
+ line: 934,
+ params: [
+ {
+ name: 'path',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'data',
+ description: '',
+ type: 'Object|Boolean'
+ },
+ {
+ name: 'callback',
+ description: '',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description: '',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Promise'
+ }
+ },
+ {
+ line: 942,
+ params: [
+ {
+ name: 'path',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: '',
+ type: 'Function'
+ },
+ {
+ name: 'errorCallback',
+ description: '',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Promise'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/io/files.js',
+ line: 957,
+ description:
+ 'Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.
\nFor more advanced use, you may also pass in the path as the first argument\nand a object as the second argument, the signature follows the one specified\nin the Fetch API specification.\nThis method is suitable for fetching files up to size of 64MB when "GET" is used.
\n',
+ itemtype: 'method',
+ name: 'httpDo',
+ return: {
+ description:
+ 'A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.',
+ type: 'Promise'
+ },
+ example: [
+ "\n\n\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\n\n// displays an animation of all USGS earthquakes\nlet earthquakes;\nlet eqFeatureIndex = 0;\n\nfunction preload() {\n let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\n httpDo(\n url,\n {\n method: 'GET',\n // Other Request options, like special headers for apis\n headers: { authorization: 'Bearer secretKey' }\n },\n function(res) {\n earthquakes = res;\n }\n );\n}\n\nfunction draw() {\n // wait until the data is loaded\n if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\n return;\n }\n clear();\n\n let feature = earthquakes.features[eqFeatureIndex];\n let mag = feature.properties.mag;\n let rad = mag / 11 * ((width + height) / 2);\n fill(255, 0, 0, 100);\n ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\n\n if (eqFeatureIndex >= earthquakes.features.length) {\n eqFeatureIndex = 0;\n } else {\n eqFeatureIndex += 1;\n }\n}\n\n"
+ ],
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Input',
+ overloads: [
+ {
+ line: 957,
+ params: [
+ {
+ name: 'path',
+ description: 'name of the file or url to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'method',
+ description:
+ 'either "GET", "POST", or "PUT",\n defaults to "GET"
\n',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'datatype',
+ description:
+ '"json", "jsonp", "xml", or "text"
\n',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'data',
+ description: 'param data passed sent with request
\n',
+ type: 'Object',
+ optional: true
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to be executed if\n there is an error, response is passed\n in as first argument
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.',
+ type: 'Promise'
+ }
+ },
+ {
+ line: 1028,
+ params: [
+ {
+ name: 'path',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'options',
+ description:
+ 'Request object options as documented in the\n "fetch" API\nreference
\n',
+ type: 'Object'
+ },
+ {
+ name: 'callback',
+ description: '',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description: '',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Promise'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1190,
+ itemtype: 'method',
+ name: 'createWriter',
+ params: [
+ {
+ name: 'name',
+ description: 'name of the file to be created
\n',
+ type: 'String'
+ },
+ {
+ name: 'extension',
+ description: '',
+ type: 'String',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'p5.PrintWriter'
+ },
+ example: [
+ "\n\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n const writer = createWriter('squares.txt');\n for (let i = 0; i < 10; i++) {\n writer.print(i * i);\n }\n writer.close();\n writer.clear();\n }\n}\n\n"
+ ],
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1245,
+ description: 'Writes data to the PrintWriter stream
\n',
+ itemtype: 'method',
+ name: 'write',
+ params: [
+ {
+ name: 'data',
+ description: 'all data to be written by the PrintWriter
\n',
+ type: 'Array'
+ }
+ ],
+ example: [
+ "\n\n\n// creates a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// write 'Hello world!'' to the file\nwriter.write(['Hello world!']);\n// close the PrintWriter and save the file\nwriter.close();\n\n\n\n\n// creates a file called 'newFile2.txt'\nlet writer = createWriter('newFile2.txt');\n// write 'apples,bananas,123' to the file\nwriter.write(['apples', 'bananas', 123]);\n// close the PrintWriter and save the file\nwriter.close();\n\n\n\n\n// creates a file called 'newFile3.txt'\nlet writer = createWriter('newFile3.txt');\n// write 'My name is: Teddy' to the file\nwriter.write('My name is:');\nwriter.write(' Teddy');\n// close the PrintWriter and save the file\nwriter.close();\n\n"
+ ],
+ class: 'p5.PrintWriter',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1285,
+ description:
+ 'Writes data to the PrintWriter stream, and adds a new line at the end
\n',
+ itemtype: 'method',
+ name: 'print',
+ params: [
+ {
+ name: 'data',
+ description: 'all data to be printed by the PrintWriter
\n',
+ type: 'Array'
+ }
+ ],
+ example: [
+ "\n\n\n// creates a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// creates a file containing\n// My name is:\n// Teddy\nwriter.print('My name is:');\nwriter.print('Teddy');\n// close the PrintWriter and save the file\nwriter.close();\n\n\n\n\nlet writer;\n\nfunction setup() {\n createCanvas(400, 400);\n // create a PrintWriter\n writer = createWriter('newFile.txt');\n}\n\nfunction draw() {\n // print all mouseX and mouseY coordinates to the stream\n writer.print([mouseX, mouseY]);\n}\n\nfunction mouseClicked() {\n // close the PrintWriter and save the file\n writer.close();\n}\n\n"
+ ],
+ class: 'p5.PrintWriter',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1328,
+ description:
+ 'Clears the data already written to the PrintWriter object
\n',
+ itemtype: 'method',
+ name: 'clear',
+ example: [
+ "\n\n// create writer object\nlet writer = createWriter('newFile.txt');\nwriter.write(['clear me']);\n// clear writer object here\nwriter.clear();\n// close writer\nwriter.close();\n\n"
+ ],
+ class: 'p5.PrintWriter',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1346,
+ description: 'Closes the PrintWriter
\n',
+ itemtype: 'method',
+ name: 'close',
+ example: [
+ "\n\n\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n\n\n\n\n// create a file called 'newFile2.txt'\nlet writer = createWriter('newFile2.txt');\n// write some data to the file\nwriter.write([100, 101, 102]);\n// close the PrintWriter and save the file\nwriter.close();\n\n"
+ ],
+ class: 'p5.PrintWriter',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1395,
+ description:
+ "Save an image, text, json, csv, wav, or html. Prompts download to\nthe client's computer. Note that it is not recommended to call save()\nwithin draw if it's looping, as the save() function will open a new save\ndialog every frame.
\nThe default behavior is to save the canvas as an image. You can\noptionally specify a filename.\nFor example:
\n \n save();\n save('myCanvas.jpg'); // save a specific canvas with a filename\n
\n\nAlternately, the first parameter can be a pointer to a canvas\np5.Element, an Array of Strings,\nan Array of JSON, a JSON object, a p5.Table, a p5.Image, or a\np5.SoundFile (requires p5.sound). The second parameter is a filename\n(including extension). The third parameter is for options specific\nto this type of object. This method will save a file that fits the\ngiven parameters. For example:
\n\n \n // Saves canvas as an image\n save('myCanvas.jpg');\n\n // Saves pImage as a png image\n let img = createImage(10, 10);\n save(img, 'my.png');\n\n // Saves canvas as an image\n let cnv = createCanvas(100, 100);\n save(cnv, 'myCanvas.jpg');\n\n // Saves p5.Renderer object as an image\n let gb = createGraphics(100, 100);\n save(gb, 'myGraphics.jpg');\n\n let myTable = new p5.Table();\n\n // Saves table as html file\n save(myTable, 'myTable.html');\n\n // Comma Separated Values\n save(myTable, 'myTable.csv');\n\n // Tab Separated Values\n save(myTable, 'myTable.tsv');\n\n let myJSON = { a: 1, b: true };\n\n // Saves pretty JSON\n save(myJSON, 'my.json');\n\n // Optimizes JSON filesize\n save(myJSON, 'my.json', true);\n\n // Saves array of strings to a text file with line breaks after each item\n let arrayOfStrings = ['a', 'b'];\n save(arrayOfStrings, 'my.txt');\n
",
+ itemtype: 'method',
+ name: 'save',
+ params: [
+ {
+ name: 'objectOrFilename',
+ description:
+ 'If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).
\n',
+ type: 'Object|String',
+ optional: true
+ },
+ {
+ name: 'filename',
+ description:
+ 'If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).
\n',
+ type: 'String',
+ optional: true
+ },
+ {
+ name: 'options',
+ description:
+ 'Additional options depend on\n filetype. For example, when saving JSON,\n true indicates that the\n output will be optimized for filesize,\n rather than readability.
\n',
+ type: 'Boolean|String',
+ optional: true
+ }
+ ],
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1523,
+ description:
+ 'Writes the contents of an Array or a JSON object to a .json file.\nThe file saving process and location of the saved file will\nvary between web browsers.
\n',
+ itemtype: 'method',
+ name: 'saveJSON',
+ params: [
+ {
+ name: 'json',
+ description: '',
+ type: 'Array|Object'
+ },
+ {
+ name: 'filename',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'optimize',
+ description:
+ 'If true, removes line breaks\n and spaces from the output\n file to optimize filesize\n (but not readability).
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ example: [
+ '\n \n let json = {}; // new JSON Object\n\n json.id = 0;\n json.species = \'Panthera leo\';\n json.name = \'Lion\';\n\n function setup() {\n createCanvas(100, 100);\n background(200);\n text(\'click here to save\', 10, 10, 70, 80);\n }\n\n function mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n saveJSON(json, \'lion.json\');\n }\n }\n\n // saves the following to a file called "lion.json":\n // {\n // "id": 0,\n // "species": "Panthera leo",\n // "name": "Lion"\n // }\n '
+ ],
+ alt: 'no image displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1581,
+ description:
+ 'Writes an array of Strings to a text file, one line per String.\nThe file saving process and location of the saved file will\nvary between web browsers.
\n',
+ itemtype: 'method',
+ name: 'saveStrings',
+ params: [
+ {
+ name: 'list',
+ description: 'string array to be written
\n',
+ type: 'String[]'
+ },
+ {
+ name: 'filename',
+ description: 'filename for output
\n',
+ type: 'String'
+ },
+ {
+ name: 'extension',
+ description: 'the filename's extension
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ example: [
+ "\n \n let words = 'apple bear cat dog';\n\n // .split() outputs an Array\n let list = split(words, ' ');\n\n function setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n }\n\n function mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n saveStrings(list, 'nouns.txt');\n }\n }\n\n // Saves the following to a file called 'nouns.txt':\n //\n // apple\n // bear\n // cat\n // dog\n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/files.js',
+ line: 1649,
+ description:
+ 'Writes the contents of a Table object to a file. Defaults to a\ntext file with comma-separated-values ('csv') but can also\nuse tab separation ('tsv'), or generate an HTML table ('html').\nThe file saving process and location of the saved file will\nvary between web browsers.
\n',
+ itemtype: 'method',
+ name: 'saveTable',
+ params: [
+ {
+ name: 'Table',
+ description:
+ 'the Table object to save to a file
\n',
+ type: 'p5.Table'
+ },
+ {
+ name: 'filename',
+ description: 'the filename to which the Table should be saved
\n',
+ type: 'String'
+ },
+ {
+ name: 'options',
+ description:
+ 'can be one of "tsv", "csv", or "html"
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\n let table;\n\n function setup() {\n table = new p5.Table();\n\n table.addColumn('id');\n table.addColumn('species');\n table.addColumn('name');\n\n let newRow = table.addRow();\n newRow.setNum('id', table.getRowCount() - 1);\n newRow.setString('species', 'Panthera leo');\n newRow.setString('name', 'Lion');\n\n // To save, un-comment next line then click 'run'\n // saveTable(table, 'new.csv');\n }\n\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Output'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 9,
+ description:
+ 'Table Options
\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.
\nCSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don\'t bother with the\nquotes.
\nFile names should end with .csv if they\'re comma separated.
\nA rough "spec" for CSV can be found\nhere.
\nTo load files, use the loadTable method.
\nTo save tables to your computer, use the save method\n or the saveTable method.
\n\nPossible options include:
\n\n- csv - parse the table as comma-separated values\n
- tsv - parse the table as tab-separated values\n
- header - this table has a header (title) row\n
',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 43,
+ description:
+ 'An array containing the names of the columns in the table, if the "header" the table is\nloaded with the "header" parameter.
\n',
+ itemtype: 'property',
+ name: 'columns',
+ type: 'String[]',
+ example: [
+ "\n\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //print the column names\n for (let c = 0; c < table.getColumnCount(); c++) {\n print('column ' + c + ' is named ' + table.columns[c]);\n }\n}\n\n"
+ ],
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 77,
+ description:
+ 'An array containing the p5.TableRow objects that make up the\nrows of the table. The same result as calling getRows()
\n',
+ itemtype: 'property',
+ name: 'rows',
+ type: 'p5.TableRow[]',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 85,
+ description:
+ 'Use addRow() to add a new row of data to a p5.Table object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using set().
\nIf a p5.TableRow object is included as a parameter, then that row is\nduplicated and added to the table.
\n',
+ itemtype: 'method',
+ name: 'addRow',
+ params: [
+ {
+ name: 'row',
+ description: 'row to be added to the table
\n',
+ type: 'p5.TableRow',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the row that was added',
+ type: 'p5.TableRow'
+ },
+ example: [
+ "\n \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n }\n \n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 149,
+ description: 'Removes a row from the table object.
\n',
+ itemtype: 'method',
+ name: 'removeRow',
+ params: [
+ {
+ name: 'id',
+ description: 'ID number of the row to remove
\n',
+ type: 'Integer'
+ }
+ ],
+ example: [
+ '\n\n\n// Given the CSV file "mammals.csv"\n// in the project\'s "assets" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value "csv"\n //and has a header specifying the columns labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n}\n\nfunction setup() {\n //remove the first row\n table.removeRow(0);\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n}\n\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 197,
+ description:
+ 'Returns a reference to the specified p5.TableRow. The reference\ncan then be used to get and set values of the selected row.
\n',
+ itemtype: 'method',
+ name: 'getRow',
+ params: [
+ {
+ name: 'rowID',
+ description: 'ID number of the row to get
\n',
+ type: 'Integer'
+ }
+ ],
+ return: {
+ description: 'p5.TableRow object',
+ type: 'p5.TableRow'
+ },
+ example: [
+ '\n\n\n// Given the CSV file "mammals.csv"\n// in the project\'s "assets" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value "csv"\n //and has a header specifying the columns labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n}\n\nfunction setup() {\n let row = table.getRow(1);\n //print it column by column\n //note: a row is an object, not an array\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(row.getString(c));\n }\n}\n\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 243,
+ description:
+ 'Gets all rows from the table. Returns an array of p5.TableRows.
\n',
+ itemtype: 'method',
+ name: 'getRows',
+ return: {
+ description: 'Array of p5.TableRows',
+ type: 'p5.TableRow[]'
+ },
+ example: [
+ "\n \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n\n //warning: rows is an array of objects\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n }\n \n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 292,
+ description:
+ 'Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.
\n',
+ itemtype: 'method',
+ name: 'findRow',
+ params: [
+ {
+ name: 'value',
+ description: 'The value to match
\n',
+ type: 'String'
+ },
+ {
+ name: 'column',
+ description:
+ 'ID number or title of the\n column to search
\n',
+ type: 'Integer|String'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'p5.TableRow'
+ },
+ example: [
+ "\n \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //find the animal named zebra\n let row = table.findRow('Zebra', 'name');\n //find the corresponding species\n print(row.getString('species'));\n }\n \n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 357,
+ description:
+ 'Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'findRows',
+ params: [
+ {
+ name: 'value',
+ description: 'The value to match
\n',
+ type: 'String'
+ },
+ {
+ name: 'column',
+ description:
+ 'ID number or title of the\n column to search
\n',
+ type: 'Integer|String'
+ }
+ ],
+ return: {
+ description: 'An Array of TableRow objects',
+ type: 'p5.TableRow[]'
+ },
+ example: [
+ "\n \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add another goat\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Scape Goat');\n newRow.setString('name', 'Goat');\n\n //find the rows containing animals named Goat\n let rows = table.findRows('Goat', 'name');\n print(rows.length + ' Goats found');\n }\n \n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 426,
+ description:
+ 'Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'matchRow',
+ params: [
+ {
+ name: 'regexp',
+ description: 'The regular expression to match
\n',
+ type: 'String|RegExp'
+ },
+ {
+ name: 'column',
+ description:
+ 'The column ID (number) or\n title (string)
\n',
+ type: 'String|Integer'
+ }
+ ],
+ return: {
+ description: 'TableRow object',
+ type: 'p5.TableRow'
+ },
+ example: [
+ '\n\n\n// Given the CSV file "mammals.csv"\n// in the project\'s "assets" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value "csv"\n //and has a header specifying the columns labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n}\n\nfunction setup() {\n //Search using specified regex on a given column, return TableRow object\n let mammal = table.matchRow(new RegExp(\'ant\'), 1);\n print(mammal.getString(1));\n //Output "Panthera pardus"\n}\n\n\n'
+ ],
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 485,
+ description:
+ 'Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'matchRows',
+ params: [
+ {
+ name: 'regexp',
+ description: 'The regular expression to match
\n',
+ type: 'String'
+ },
+ {
+ name: 'column',
+ description:
+ 'The column ID (number) or\n title (string)
\n',
+ type: 'String|Integer',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'An Array of TableRow objects',
+ type: 'p5.TableRow[]'
+ },
+ example: [
+ "\n\n\nlet table;\n\nfunction setup() {\n table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', 'Lion');\n newRow.setString('type', 'Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', 'Snake');\n newRow.setString('type', 'Reptile');\n\n newRow = table.addRow();\n newRow.setString('name', 'Mosquito');\n newRow.setString('type', 'Insect');\n\n newRow = table.addRow();\n newRow.setString('name', 'Lizard');\n newRow.setString('type', 'Reptile');\n\n let rows = table.matchRows('R.*', 'type');\n for (let i = 0; i < rows.length; i++) {\n print(rows[i].getString('name') + ': ' + rows[i].getString('type'));\n }\n}\n// Sketch prints:\n// Snake: Reptile\n// Lizard: Reptile\n\n"
+ ],
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 552,
+ description:
+ 'Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'getColumn',
+ params: [
+ {
+ name: 'column',
+ description: 'String or Number of the column to return
\n',
+ type: 'String|Number'
+ }
+ ],
+ return: {
+ description: 'Array of column values',
+ type: 'Array'
+ },
+ example: [
+ '\n \n \n // Given the CSV file "mammals.csv"\n // in the project\'s "assets" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value "csv"\n //and has a header specifying the columns labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n }\n\n function setup() {\n //getColumn returns an array that can be printed directly\n print(table.getColumn(\'species\'));\n //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]\n }\n \n '
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 605,
+ description:
+ 'Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.
\n',
+ itemtype: 'method',
+ name: 'clearRows',
+ example: [
+ "\n \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.clearRows();\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n }\n \n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 647,
+ description:
+ 'Use addColumn() to add a new column to a Table object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)
\n',
+ itemtype: 'method',
+ name: 'addColumn',
+ params: [
+ {
+ name: 'title',
+ description: 'title of the given column
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ example: [
+ "\n \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.addColumn('carnivore');\n table.set(0, 'carnivore', 'no');\n table.set(1, 'carnivore', 'yes');\n table.set(2, 'carnivore', 'no');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n }\n \n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 698,
+ description: 'Returns the total number of columns in a Table.
\n',
+ itemtype: 'method',
+ name: 'getColumnCount',
+ return: {
+ description: 'Number of columns in this table',
+ type: 'Integer'
+ },
+ example: [
+ "\n \n \n // given the cvs file \"blobs.csv\" in /assets directory\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n let numOfColumn = table.getColumnCount();\n text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\n }\n \n "
+ ],
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 734,
+ description: 'Returns the total number of rows in a Table.
\n',
+ itemtype: 'method',
+ name: 'getRowCount',
+ return: {
+ description: 'Number of rows in this table',
+ type: 'Integer'
+ },
+ example: [
+ "\n \n \n // given the cvs file \"blobs.csv\" in /assets directory\n //\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\n }\n \n "
+ ],
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 770,
+ description:
+ 'Removes any of the specified characters (or "tokens").
\n\nIf no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.
',
+ itemtype: 'method',
+ name: 'removeTokens',
+ params: [
+ {
+ name: 'chars',
+ description: 'String listing characters to be removed
\n',
+ type: 'String'
+ },
+ {
+ name: 'column',
+ description:
+ 'Column ID (number)\n or name (string)
\n',
+ type: 'String|Integer',
+ optional: true
+ }
+ ],
+ example: [
+ "\n \n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' $Lion ,');\n newRow.setString('type', ',,,Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', '$Snake ');\n newRow.setString('type', ',,,Reptile');\n\n table.removeTokens(',$ ');\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n "
+ ],
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 842,
+ description:
+ 'Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'trim',
+ params: [
+ {
+ name: 'column',
+ description:
+ 'Column ID (number)\n or name (string)
\n',
+ type: 'String|Integer',
+ optional: true
+ }
+ ],
+ example: [
+ "\n \n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' Lion ,');\n newRow.setString('type', ' Mammal ');\n\n newRow = table.addRow();\n newRow.setString('name', ' Snake ');\n newRow.setString('type', ' Reptile ');\n\n table.trim();\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n "
+ ],
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 906,
+ description:
+ 'Use removeColumn() to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.
\n',
+ itemtype: 'method',
+ name: 'removeColumn',
+ params: [
+ {
+ name: 'column',
+ description: 'columnName (string) or ID (number)
\n',
+ type: 'String|Integer'
+ }
+ ],
+ example: [
+ "\n \n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.removeColumn('id');\n print(table.getColumnCount());\n }\n \n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 971,
+ description:
+ 'Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'row',
+ description: 'row ID
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'column',
+ description:
+ 'column ID (Number)\n or title (String)
\n',
+ type: 'String|Integer'
+ },
+ {
+ name: 'value',
+ description: 'value to assign
\n',
+ type: 'String|Number'
+ }
+ ],
+ example: [
+ "\n\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.set(0, 'species', 'Canis Lupus');\n table.set(0, 'name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n}\n\n"
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 1021,
+ description:
+ 'Stores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'setNum',
+ params: [
+ {
+ name: 'row',
+ description: 'row ID
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'column',
+ description:
+ 'column ID (Number)\n or title (String)
\n',
+ type: 'String|Integer'
+ },
+ {
+ name: 'value',
+ description: 'value to assign
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ '\n\n\n// Given the CSV file "mammals.csv"\n// in the project\'s "assets" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value "csv"\n //and has a header specifying the columns labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n}\n\nfunction setup() {\n table.setNum(1, \'id\', 1);\n\n print(table.getColumn(0));\n //["0", 1, "2"]\n}\n\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 1067,
+ description:
+ 'Stores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'setString',
+ params: [
+ {
+ name: 'row',
+ description: 'row ID
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'column',
+ description:
+ 'column ID (Number)\n or title (String)
\n',
+ type: 'String|Integer'
+ },
+ {
+ name: 'value',
+ description: 'value to assign
\n',
+ type: 'String'
+ }
+ ],
+ example: [
+ "\n\n// Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n print(table.getArray());\n}\n"
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 1112,
+ description:
+ 'Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n',
+ itemtype: 'method',
+ name: 'get',
+ params: [
+ {
+ name: 'row',
+ description: 'row ID
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'column',
+ description:
+ 'columnName (string) or\n ID (number)
\n',
+ type: 'String|Integer'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'String|Number'
+ },
+ example: [
+ "\n\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.get(0, 1));\n //Capra hircus\n print(table.get(0, 'species'));\n //Capra hircus\n}\n\n"
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 1159,
+ description:
+ 'Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n',
+ itemtype: 'method',
+ name: 'getNum',
+ params: [
+ {
+ name: 'row',
+ description: 'row ID
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'column',
+ description:
+ 'columnName (string) or\n ID (number)
\n',
+ type: 'String|Integer'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\n// Given the CSV file "mammals.csv"\n// in the project\'s "assets" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value "csv"\n //and has a header specifying the columns labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n}\n\nfunction setup() {\n print(table.getNum(1, 0) + 100);\n //id 1 + 100 = 101\n}\n\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 1204,
+ description:
+ 'Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n',
+ itemtype: 'method',
+ name: 'getString',
+ params: [
+ {
+ name: 'row',
+ description: 'row ID
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'column',
+ description:
+ 'columnName (string) or\n ID (number)
\n',
+ type: 'String|Integer'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'String'
+ },
+ example: [
+ '\n\n\n// Given the CSV file "mammals.csv"\n// in the project\'s "assets" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value "CSV"\n // and has specifiying header for column labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n}\n\nfunction setup() {\n print(table.getString(0, 0)); // 0\n print(table.getString(0, 1)); // Capra hircus\n print(table.getString(0, 2)); // Goat\n print(table.getString(1, 0)); // 1\n print(table.getString(1, 1)); // Panthera pardus\n print(table.getString(1, 2)); // Leopard\n print(table.getString(2, 0)); // 2\n print(table.getString(2, 1)); // Equus zebra\n print(table.getString(2, 2)); // Zebra\n}\n\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 1257,
+ description:
+ 'Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.
\n',
+ itemtype: 'method',
+ name: 'getObject',
+ params: [
+ {
+ name: 'headerColumn',
+ description:
+ 'Name of the column which should be used to\n title each row object (optional)
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Object'
+ },
+ example: [
+ '\n\n\n// Given the CSV file "mammals.csv"\n// in the project\'s "assets" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value "csv"\n //and has a header specifying the columns labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n}\n\nfunction setup() {\n let tableObject = table.getObject();\n\n print(tableObject);\n //outputs an object\n}\n\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.Table.js',
+ line: 1321,
+ description:
+ 'Retrieves all table data and returns it as a multidimensional array.
\n',
+ itemtype: 'method',
+ name: 'getArray',
+ return: {
+ description: '',
+ type: 'Array'
+ },
+ example: [
+ '\n\n\n// Given the CSV file "mammals.csv"\n// in the project\'s "assets" folder\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leoperd\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value "CSV"\n // and has specifiying header for column labels\n table = loadTable(\'assets/mammals.csv\', \'csv\', \'header\');\n}\n\nfunction setup() {\n let tableArray = table.getArray();\n for (let i = 0; i < tableArray.length; i++) {\n print(tableArray[i]);\n }\n}\n\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5.Table',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.TableRow.js',
+ line: 40,
+ description:
+ 'Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'column',
+ description:
+ 'Column ID (Number)\n or Title (String)
\n',
+ type: 'String|Integer'
+ },
+ {
+ name: 'value',
+ description: 'The value to be stored
\n',
+ type: 'String|Number'
+ }
+ ],
+ example: [
+ "\n \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n print(table.getArray());\n }\n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.TableRow',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.TableRow.js',
+ line: 102,
+ description:
+ 'Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'setNum',
+ params: [
+ {
+ name: 'column',
+ description:
+ 'Column ID (Number)\n or Title (String)
\n',
+ type: 'String|Integer'
+ },
+ {
+ name: 'value',
+ description:
+ 'The value to be stored\n as a Float
\n',
+ type: 'Number|String'
+ }
+ ],
+ example: [
+ "\n \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].setNum('id', r + 10);\n }\n\n print(table.getArray());\n }\n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.TableRow',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.TableRow.js',
+ line: 146,
+ description:
+ 'Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'setString',
+ params: [
+ {
+ name: 'column',
+ description:
+ 'Column ID (Number)\n or Title (String)
\n',
+ type: 'String|Integer'
+ },
+ {
+ name: 'value',
+ description:
+ 'The value to be stored\n as a String
\n',
+ type: 'String|Number|Boolean|Object'
+ }
+ ],
+ example: [
+ "\n \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n let name = rows[r].getString('name');\n rows[r].setString('name', 'A ' + name + ' named George');\n }\n\n print(table.getArray());\n }\n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.TableRow',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.TableRow.js',
+ line: 191,
+ description:
+ 'Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n',
+ itemtype: 'method',
+ name: 'get',
+ params: [
+ {
+ name: 'column',
+ description:
+ 'columnName (string) or\n ID (number)
\n',
+ type: 'String|Integer'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'String|Number'
+ },
+ example: [
+ "\n \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let names = [];\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n names.push(rows[r].get('name'));\n }\n\n print(names);\n }\n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.TableRow',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.TableRow.js',
+ line: 239,
+ description:
+ 'Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.
\n',
+ itemtype: 'method',
+ name: 'getNum',
+ params: [
+ {
+ name: 'column',
+ description:
+ 'columnName (string) or\n ID (number)
\n',
+ type: 'String|Integer'
+ }
+ ],
+ return: {
+ description: 'Float Floating point number',
+ type: 'Number'
+ },
+ example: [
+ "\n \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let minId = Infinity;\n let maxId = -Infinity;\n for (let r = 0; r < rows.length; r++) {\n let id = rows[r].getNum('id');\n minId = min(minId, id);\n maxId = min(maxId, id);\n }\n print('minimum id = ' + minId + ', maximum id = ' + maxId);\n }\n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.TableRow',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.TableRow.js',
+ line: 295,
+ description:
+ 'Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.
\n',
+ itemtype: 'method',
+ name: 'getString',
+ params: [
+ {
+ name: 'column',
+ description:
+ 'columnName (string) or\n ID (number)
\n',
+ type: 'String|Integer'
+ }
+ ],
+ return: {
+ description: 'String',
+ type: 'String'
+ },
+ example: [
+ "\n \n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let longest = '';\n for (let r = 0; r < rows.length; r++) {\n let species = rows[r].getString('species');\n if (longest.length < species.length) {\n longest = species;\n }\n }\n\n print('longest: ' + longest);\n }\n "
+ ],
+ alt: 'no image displayed',
+ class: 'p5.TableRow',
+ module: 'IO',
+ submodule: 'Table'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 63,
+ description:
+ 'Gets a copy of the element's parent. Returns the parent as another\np5.XML object.
\n',
+ itemtype: 'method',
+ name: 'getParent',
+ return: {
+ description: 'element parent',
+ type: 'p5.XML'
+ },
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let children = xml.getChildren(\'animal\');\n let parent = children[1].getParent();\n print(parent.getName());\n}\n\n// Sketch prints:\n// mammals\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 101,
+ description:
+ 'Gets the element's full name, which is returned as a String.
\n',
+ itemtype: 'method',
+ name: 'getName',
+ return: {
+ description: 'the name of the node',
+ type: 'String'
+ },
+ example: [
+ '<animal\n \n // The following short XML file called "mammals.xml" is parsed\n // in the code below.\n //\n // \n // <mammals>\n // <animal id="0" species="Capra hircus">Goat</animal>\n // <animal id="1" species="Panthera pardus">Leopard</animal>\n // <animal id="2" species="Equus zebra">Zebra</animal>\n // </mammals>\n\n let xml;\n\n function preload() {\n xml = loadXML(\'assets/mammals.xml\');\n }\n\n function setup() {\n print(xml.getName());\n }\n\n // Sketch prints:\n // mammals\n '
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 136,
+ description:
+ 'Sets the element's name, which is specified as a String.
\n',
+ itemtype: 'method',
+ name: 'setName',
+ params: [
+ {
+ name: 'the',
+ description: 'new name of the node
\n',
+ type: 'String'
+ }
+ ],
+ example: [
+ '<animal\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n print(xml.getName());\n xml.setName(\'fish\');\n print(xml.getName());\n}\n\n// Sketch prints:\n// mammals\n// fish\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 182,
+ description:
+ 'Checks whether or not the element has any children, and returns the result\nas a boolean.
\n',
+ itemtype: 'method',
+ name: 'hasChildren',
+ return: {
+ description: '',
+ type: 'Boolean'
+ },
+ example: [
+ '<animal\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n print(xml.hasChildren());\n}\n\n// Sketch prints:\n// true\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 218,
+ description:
+ 'Get the names of all of the element's children, and returns the names as an\narray of Strings. This is the same as looping through and calling getName()\non each child element individually.
\n',
+ itemtype: 'method',
+ name: 'listChildren',
+ return: {
+ description: 'names of the children of the element',
+ type: 'String[]'
+ },
+ example: [
+ '<animal\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n print(xml.listChildren());\n}\n\n// Sketch prints:\n// ["animal", "animal", "animal"]\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 259,
+ description:
+ 'Returns all of the element's children as an array of p5.XML objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.
\n',
+ itemtype: 'method',
+ name: 'getChildren',
+ params: [
+ {
+ name: 'name',
+ description: 'element name
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'children of the element',
+ type: 'p5.XML[]'
+ },
+ example: [
+ '<animal\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let animals = xml.getChildren(\'animal\');\n\n for (let i = 0; i < animals.length; i++) {\n print(animals[i].getContent());\n }\n}\n\n// Sketch prints:\n// "Goat"\n// "Leopard"\n// "Zebra"\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 315,
+ description:
+ 'Returns the first of the element's children that matches the name parameter\nor the child of the given index.It returns undefined if no matching\nchild is found.
\n',
+ itemtype: 'method',
+ name: 'getChild',
+ params: [
+ {
+ name: 'name',
+ description: 'element name or index
\n',
+ type: 'String|Integer'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'p5.XML'
+ },
+ example: [
+ '<animal\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// "Goat"\n\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let secondChild = xml.getChild(1);\n print(secondChild.getContent());\n}\n\n// Sketch prints:\n// "Leopard"\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 375,
+ description:
+ 'Appends a new child to the element. The child can be specified with\neither a String, which will be used as the new tag's name, or as a\nreference to an existing p5.XML object.\nA reference to the newly created child is returned as an p5.XML object.
\n',
+ itemtype: 'method',
+ name: 'addChild',
+ params: [
+ {
+ name: 'node',
+ description:
+ 'a p5.XML Object which will be the child to be added
\n',
+ type: 'p5.XML'
+ }
+ ],
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let child = new p5.XML();\n child.setName(\'animal\');\n child.setAttribute(\'id\', \'3\');\n child.setAttribute(\'species\', \'Ornithorhynchus anatinus\');\n child.setContent(\'Platypus\');\n xml.addChild(child);\n\n let animals = xml.getChildren(\'animal\');\n print(animals[animals.length - 1].getContent());\n}\n\n// Sketch prints:\n// "Goat"\n// "Leopard"\n// "Zebra"\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 427,
+ description: 'Removes the element specified by name or index.
\n',
+ itemtype: 'method',
+ name: 'removeChild',
+ params: [
+ {
+ name: 'name',
+ description: 'element name or index
\n',
+ type: 'String|Integer'
+ }
+ ],
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n xml.removeChild(\'animal\');\n let children = xml.getChildren();\n for (let i = 0; i < children.length; i++) {\n print(children[i].getContent());\n }\n}\n\n// Sketch prints:\n// "Leopard"\n// "Zebra"\n\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n xml.removeChild(1);\n let children = xml.getChildren();\n for (let i = 0; i < children.length; i++) {\n print(children[i].getContent());\n }\n}\n\n// Sketch prints:\n// "Goat"\n// "Zebra"\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 499,
+ description:
+ 'Counts the specified element's number of attributes, returned as an Number.
\n',
+ itemtype: 'method',
+ name: 'getAttributeCount',
+ return: {
+ description: '',
+ type: 'Integer'
+ },
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.getAttributeCount());\n}\n\n// Sketch prints:\n// 2\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 535,
+ description:
+ 'Gets all of the specified element's attributes, and returns them as an\narray of Strings.
\n',
+ itemtype: 'method',
+ name: 'listAttributes',
+ return: {
+ description: 'an array of strings containing the names of attributes',
+ type: 'String[]'
+ },
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.listAttributes());\n}\n\n// Sketch prints:\n// ["id", "species"]\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 578,
+ description:
+ 'Checks whether or not an element has the specified attribute.
\n',
+ itemtype: 'method',
+ name: 'hasAttribute',
+ params: [
+ {
+ name: 'the',
+ description: 'attribute to be checked
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'true if attribute found else false',
+ type: 'Boolean'
+ },
+ example: [
+ '\n \n // The following short XML file called "mammals.xml" is parsed\n // in the code below.\n //\n // \n // <mammals>\n // <animal id="0" species="Capra hircus">Goat</animal>\n // <animal id="1" species="Panthera pardus">Leopard</animal>\n // <animal id="2" species="Equus zebra">Zebra</animal>\n // </mammals>\n\n let xml;\n\n function preload() {\n xml = loadXML(\'assets/mammals.xml\');\n }\n\n function setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.hasAttribute(\'species\'));\n print(firstChild.hasAttribute(\'color\'));\n }\n\n // Sketch prints:\n // true\n // false\n '
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 623,
+ description:
+ 'Returns an attribute value of the element as an Number. If the defaultValue\nparameter is specified and the attribute doesn't exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn't\nexist, the value 0 is returned.
\n',
+ itemtype: 'method',
+ name: 'getNum',
+ params: [
+ {
+ name: 'name',
+ description: 'the non-null full name of the attribute
\n',
+ type: 'String'
+ },
+ {
+ name: 'defaultValue',
+ description: 'the default value of the attribute
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Number'
+ },
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.getNum(\'id\'));\n}\n\n// Sketch prints:\n// 0\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 670,
+ description:
+ 'Returns an attribute value of the element as an String. If the defaultValue\nparameter is specified and the attribute doesn't exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn't\nexist, null is returned.
\n',
+ itemtype: 'method',
+ name: 'getString',
+ params: [
+ {
+ name: 'name',
+ description: 'the non-null full name of the attribute
\n',
+ type: 'String'
+ },
+ {
+ name: 'defaultValue',
+ description: 'the default value of the attribute
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'String'
+ },
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.getString(\'species\'));\n}\n\n// Sketch prints:\n// "Capra hircus"\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 717,
+ description:
+ 'Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.
\n',
+ itemtype: 'method',
+ name: 'setAttribute',
+ params: [
+ {
+ name: 'name',
+ description: 'the full name of the attribute
\n',
+ type: 'String'
+ },
+ {
+ name: 'value',
+ description: 'the value of the attribute
\n',
+ type: 'Number|String|Boolean'
+ }
+ ],
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.getString(\'species\'));\n firstChild.setAttribute(\'species\', \'Jamides zebra\');\n print(firstChild.getString(\'species\'));\n}\n\n// Sketch prints:\n// "Capra hircus"\n// "Jamides zebra"\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 758,
+ description:
+ 'Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.
\n',
+ itemtype: 'method',
+ name: 'getContent',
+ params: [
+ {
+ name: 'defaultValue',
+ description: 'value returned if no content is found
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'String'
+ },
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// "Goat"\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 799,
+ description: 'Sets the element's content.
\n',
+ itemtype: 'method',
+ name: 'setContent',
+ params: [
+ {
+ name: 'text',
+ description: 'the new content
\n',
+ type: 'String'
+ }
+ ],
+ example: [
+ '\n\n// The following short XML file called "mammals.xml" is parsed\n// in the code below.\n//\n// \n// <mammals>\n// <animal id="0" species="Capra hircus">Goat</animal>\n// <animal id="1" species="Panthera pardus">Leopard</animal>\n// <animal id="2" species="Equus zebra">Zebra</animal>\n// </mammals>\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n let firstChild = xml.getChild(\'animal\');\n print(firstChild.getContent());\n firstChild.setContent(\'Mountain Goat\');\n print(firstChild.getContent());\n}\n\n// Sketch prints:\n// "Goat"\n// "Mountain Goat"\n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/io/p5.XML.js',
+ line: 840,
+ description:
+ 'Serializes the element into a string. This function is useful for preparing\nthe content to be sent over a http request or saved to file.
\n',
+ itemtype: 'method',
+ name: 'serialize',
+ return: {
+ description: 'Serialized string of the element',
+ type: 'String'
+ },
+ example: [
+ '\n\nlet xml;\n\nfunction preload() {\n xml = loadXML(\'assets/mammals.xml\');\n}\n\nfunction setup() {\n print(xml.serialize());\n}\n\n// Sketch prints:\n// \n// Goat \n// Leopard \n// Zebra \n// \n'
+ ],
+ class: 'p5.XML',
+ module: 'IO',
+ submodule: 'Input'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 10,
+ description:
+ 'Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.
\n',
+ itemtype: 'method',
+ name: 'abs',
+ params: [
+ {
+ name: 'n',
+ description: 'number to compute
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'absolute value of given number',
+ type: 'Number'
+ },
+ example: [
+ '\n\nfunction setup() {\n let x = -3;\n let y = abs(x);\n\n print(x); // -3\n print(y); // 3\n}\n'
+ ],
+ alt: 'no image displayed',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 34,
+ description:
+ 'Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.
\n',
+ itemtype: 'method',
+ name: 'ceil',
+ params: [
+ {
+ name: 'n',
+ description: 'number to round up
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'rounded up number',
+ type: 'Integer'
+ },
+ example: [
+ '\n\nfunction draw() {\n background(200);\n // map, mouseX between 0 and 5.\n let ax = map(mouseX, 0, 100, 0, 5);\n let ay = 66;\n\n //Get the ceiling of the mapped number.\n let bx = ceil(map(mouseX, 0, 100, 0, 5));\n let by = 33;\n\n // Multiply the mapped numbers by 20 to more easily\n // see the changes.\n stroke(0);\n fill(0);\n line(0, ay, ax * 20, ay);\n line(0, by, bx * 20, by);\n\n // Reformat the float returned by map and draw it.\n noStroke();\n text(nfc(ax, 2), ax, ay - 5);\n text(nfc(bx, 1), bx, by - 5);\n}\n'
+ ],
+ alt:
+ '2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 74,
+ description:
+ 'Constrains a value between a minimum and maximum value.
\n',
+ itemtype: 'method',
+ name: 'constrain',
+ params: [
+ {
+ name: 'n',
+ description: 'number to constrain
\n',
+ type: 'Number'
+ },
+ {
+ name: 'low',
+ description: 'minimum limit
\n',
+ type: 'Number'
+ },
+ {
+ name: 'high',
+ description: 'maximum limit
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'constrained number',
+ type: 'Number'
+ },
+ example: [
+ '\n\nfunction draw() {\n background(200);\n\n let leftWall = 25;\n let rightWall = 75;\n\n // xm is just the mouseX, while\n // xc is the mouseX, but constrained\n // between the leftWall and rightWall!\n let xm = mouseX;\n let xc = constrain(mouseX, leftWall, rightWall);\n\n // Draw the walls.\n stroke(150);\n line(leftWall, 0, leftWall, height);\n line(rightWall, 0, rightWall, height);\n\n // Draw xm and xc as circles.\n noStroke();\n fill(150);\n ellipse(xm, 33, 9, 9); // Not Constrained\n fill(0);\n ellipse(xc, 66, 9, 9); // Constrained\n}\n'
+ ],
+ alt:
+ '2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 119,
+ description:
+ 'Calculates the distance between two points, in either two or three dimensions.
\n',
+ itemtype: 'method',
+ name: 'dist',
+ return: {
+ description: 'distance between the two points',
+ type: 'Number'
+ },
+ example: [
+ "\n\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n background(200);\n fill(0);\n\n let x1 = 10;\n let y1 = 90;\n let x2 = mouseX;\n let y2 = mouseY;\n\n line(x1, y1, x2, y2);\n ellipse(x1, y1, 7, 7);\n ellipse(x2, y2, 7, 7);\n\n // d is the length of the line\n // the distance from point 1 to point 2.\n let d = int(dist(x1, y1, x2, y2));\n\n // Let's write d along the line we are drawing!\n push();\n translate((x1 + x2) / 2, (y1 + y2) / 2);\n rotate(atan2(y2 - y1, x2 - x1));\n text(nfc(d, 1), 0, -5);\n pop();\n // Fancy!\n}\n"
+ ],
+ alt:
+ '2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation',
+ overloads: [
+ {
+ line: 119,
+ params: [
+ {
+ name: 'x1',
+ description: 'x-coordinate of the first point
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y1',
+ description: 'y-coordinate of the first point
\n',
+ type: 'Number'
+ },
+ {
+ name: 'x2',
+ description: 'x-coordinate of the second point
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y2',
+ description: 'y-coordinate of the second point
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'distance between the two points',
+ type: 'Number'
+ }
+ },
+ {
+ line: 163,
+ params: [
+ {
+ name: 'x1',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y1',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'z1',
+ description: 'z-coordinate of the first point
\n',
+ type: 'Number'
+ },
+ {
+ name: 'x2',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y2',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'z2',
+ description: 'z-coordinate of the second point
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'distance between the two points',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 184,
+ description:
+ 'Returns Euler's number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().
\n',
+ itemtype: 'method',
+ name: 'exp',
+ params: [
+ {
+ name: 'n',
+ description: 'exponent to raise
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'e^n',
+ type: 'Number'
+ },
+ example: [
+ "\n\nfunction draw() {\n background(200);\n\n // Compute the exp() function with a value between 0 and 2\n let xValue = map(mouseX, 0, width, 0, 2);\n let yValue = exp(xValue);\n\n let y = map(yValue, 0, 8, height, 0);\n\n let legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n stroke(150);\n line(mouseX, y, mouseX, height);\n fill(0);\n text(legend, 5, 15);\n noStroke();\n ellipse(mouseX, y, 7, 7);\n\n // Draw the exp(x) curve,\n // over the domain of x from 0 to 2\n noFill();\n stroke(0);\n beginShape();\n for (let x = 0; x < width; x++) {\n xValue = map(x, 0, width, 0, 2);\n yValue = exp(xValue);\n y = map(yValue, 0, 8, height, 0);\n vertex(x, y);\n }\n\n endShape();\n line(0, 0, 0, height);\n line(0, height - 1, width, height - 1);\n}\n"
+ ],
+ alt: 'ellipse moves along a curve with mouse x. e^n displayed.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 234,
+ description:
+ 'Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().
\n',
+ itemtype: 'method',
+ name: 'floor',
+ params: [
+ {
+ name: 'n',
+ description: 'number to round down
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'rounded down number',
+ type: 'Integer'
+ },
+ example: [
+ '\n\nfunction draw() {\n background(200);\n //map, mouseX between 0 and 5.\n let ax = map(mouseX, 0, 100, 0, 5);\n let ay = 66;\n\n //Get the floor of the mapped number.\n let bx = floor(map(mouseX, 0, 100, 0, 5));\n let by = 33;\n\n // Multiply the mapped numbers by 20 to more easily\n // see the changes.\n stroke(0);\n fill(0);\n line(0, ay, ax * 20, ay);\n line(0, by, bx * 20, by);\n\n // Reformat the float returned by map and draw it.\n noStroke();\n text(nfc(ax, 2), ax, ay - 5);\n text(nfc(bx, 1), bx, by - 5);\n}\n'
+ ],
+ alt:
+ '2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 273,
+ description:
+ 'Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, and 1.0 is equal to the second point. If the\nvalue of amt is more than 1.0 or less than 0.0, the number will be\ncalculated accordingly in the ratio of the two given numbers. The lerp\nfunction is convenient for creating motion along a straight\npath and for drawing dotted lines.
\n',
+ itemtype: 'method',
+ name: 'lerp',
+ params: [
+ {
+ name: 'start',
+ description: 'first value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'stop',
+ description: 'second value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'amt',
+ description: 'number
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'lerped value',
+ type: 'Number'
+ },
+ example: [
+ '\n\nfunction setup() {\n background(200);\n let a = 20;\n let b = 80;\n let c = lerp(a, b, 0.2);\n let d = lerp(a, b, 0.5);\n let e = lerp(a, b, 0.8);\n\n let y = 50;\n\n strokeWeight(5);\n stroke(0); // Draw the original points in black\n point(a, y);\n point(b, y);\n\n stroke(100); // Draw the lerp points in gray\n point(c, y);\n point(d, y);\n point(e, y);\n}\n'
+ ],
+ alt:
+ '5 points horizontally staggered mid-canvas. mid 3 are grey, outer black',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 321,
+ description:
+ 'Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().
\n',
+ itemtype: 'method',
+ name: 'log',
+ params: [
+ {
+ name: 'n',
+ description: 'number greater than 0
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'natural logarithm of n',
+ type: 'Number'
+ },
+ example: [
+ "\n\nfunction draw() {\n background(200);\n let maxX = 2.8;\n let maxY = 1.5;\n\n // Compute the natural log of a value between 0 and maxX\n let xValue = map(mouseX, 0, width, 0, maxX);\n let yValue, y;\n if (xValue > 0) {\n // Cannot take the log of a negative number.\n yValue = log(xValue);\n y = map(yValue, -maxY, maxY, height, 0);\n\n // Display the calculation occurring.\n let legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n stroke(150);\n line(mouseX, y, mouseX, height);\n fill(0);\n text(legend, 5, 15);\n noStroke();\n ellipse(mouseX, y, 7, 7);\n }\n\n // Draw the log(x) curve,\n // over the domain of x from 0 to maxX\n noFill();\n stroke(0);\n beginShape();\n for (let x = 0; x < width; x++) {\n xValue = map(x, 0, width, 0, maxX);\n yValue = log(xValue);\n y = map(yValue, -maxY, maxY, height, 0);\n vertex(x, y);\n }\n endShape();\n line(0, 0, 0, height);\n line(0, height / 2, width, height / 2);\n}\n"
+ ],
+ alt:
+ 'ellipse moves along a curve with mouse x. natural logarithm of n displayed.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 377,
+ description:
+ 'Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no "start" position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, mag() is\na shortcut for writing dist(0, 0, x, y).
\n',
+ itemtype: 'method',
+ name: 'mag',
+ params: [
+ {
+ name: 'a',
+ description: 'first value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'b',
+ description: 'second value
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'magnitude of vector from (0,0) to (a,b)',
+ type: 'Number'
+ },
+ example: [
+ '\n\nfunction setup() {\n let x1 = 20;\n let x2 = 80;\n let y1 = 30;\n let y2 = 70;\n\n line(0, 0, x1, y1);\n print(mag(x1, y1)); // Prints "36.05551275463989"\n line(0, 0, x2, y1);\n print(mag(x2, y1)); // Prints "85.44003745317531"\n line(0, 0, x1, y2);\n print(mag(x1, y2)); // Prints "72.80109889280519"\n line(0, 0, x2, y2);\n print(mag(x2, y2)); // Prints "106.3014581273465"\n}\n'
+ ],
+ alt: '4 lines of different length radiate from top left of canvas.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 416,
+ description:
+ 'Re-maps a number from one range to another.\n
\nIn the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).
\n',
+ itemtype: 'method',
+ name: 'map',
+ params: [
+ {
+ name: 'value',
+ description: 'the incoming value to be converted
\n',
+ type: 'Number'
+ },
+ {
+ name: 'start1',
+ description: 'lower bound of the value's current range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'stop1',
+ description: 'upper bound of the value's current range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'start2',
+ description: 'lower bound of the value's target range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'stop2',
+ description: 'upper bound of the value's target range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'withinBounds',
+ description: 'constrain the value to the newly mapped range
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'remapped number',
+ type: 'Number'
+ },
+ example: [
+ '\n \nlet value = 25;\nlet m = map(value, 0, 100, 0, width);\nellipse(m, 50, 10, 10);\n\n\n \nfunction setup() {\n noStroke();\n}\n\nfunction draw() {\n background(204);\n let x1 = map(mouseX, 0, width, 25, 75);\n ellipse(x1, 25, 25, 25);\n //This ellipse is constrained to the 0-100 range\n //after setting withinBounds to true\n let x2 = map(mouseX, 0, width, 0, 100, true);\n ellipse(x2, 75, 25, 25);\n}\n'
+ ],
+ alt:
+ '10 by 10 white ellipse with in mid left canvas\n2 25 by 25 white ellipses move with mouse x. Bottom has more range from X',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 472,
+ description:
+ 'Determines the largest value in a sequence of numbers, and then returns\nthat value. max() accepts any number of Number parameters, or an Array\nof any length.
\n',
+ itemtype: 'method',
+ name: 'max',
+ return: {
+ description: 'maximum Number',
+ type: 'Number'
+ },
+ example: [
+ "\n\nfunction setup() {\n // Change the elements in the array and run the sketch\n // to show how max() works!\n let numArray = [2, 1, 5, 4, 8, 9];\n fill(0);\n noStroke();\n text('Array Elements', 0, 10);\n // Draw all numbers in the array\n let spacing = 15;\n let elemsY = 25;\n for (let i = 0; i < numArray.length; i++) {\n text(numArray[i], i * spacing, elemsY);\n }\n let maxX = 33;\n let maxY = 80;\n // Draw the Maximum value in the array.\n textSize(32);\n text(max(numArray), maxX, maxY);\n}\n"
+ ],
+ alt:
+ 'Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation',
+ overloads: [
+ {
+ line: 472,
+ params: [
+ {
+ name: 'n0',
+ description: 'Number to compare
\n',
+ type: 'Number'
+ },
+ {
+ name: 'n1',
+ description: 'Number to compare
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'maximum Number',
+ type: 'Number'
+ }
+ },
+ {
+ line: 508,
+ params: [
+ {
+ name: 'nums',
+ description: 'Numbers to compare
\n',
+ type: 'Number[]'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 522,
+ description:
+ 'Determines the smallest value in a sequence of numbers, and then returns\nthat value. min() accepts any number of Number parameters, or an Array\nof any length.
\n',
+ itemtype: 'method',
+ name: 'min',
+ return: {
+ description: 'minimum Number',
+ type: 'Number'
+ },
+ example: [
+ "\n\nfunction setup() {\n // Change the elements in the array and run the sketch\n // to show how min() works!\n let numArray = [2, 1, 5, 4, 8, 9];\n fill(0);\n noStroke();\n text('Array Elements', 0, 10);\n // Draw all numbers in the array\n let spacing = 15;\n let elemsY = 25;\n for (let i = 0; i < numArray.length; i++) {\n text(numArray[i], i * spacing, elemsY);\n }\n let maxX = 33;\n let maxY = 80;\n // Draw the Minimum value in the array.\n textSize(32);\n text(min(numArray), maxX, maxY);\n}\n"
+ ],
+ alt:
+ 'Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation',
+ overloads: [
+ {
+ line: 522,
+ params: [
+ {
+ name: 'n0',
+ description: 'Number to compare
\n',
+ type: 'Number'
+ },
+ {
+ name: 'n1',
+ description: 'Number to compare
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'minimum Number',
+ type: 'Number'
+ }
+ },
+ {
+ line: 558,
+ params: [
+ {
+ name: 'nums',
+ description: 'Numbers to compare
\n',
+ type: 'Number[]'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 572,
+ description:
+ 'Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the example above.)
\n',
+ itemtype: 'method',
+ name: 'norm',
+ params: [
+ {
+ name: 'value',
+ description: 'incoming value to be normalized
\n',
+ type: 'Number'
+ },
+ {
+ name: 'start',
+ description: 'lower bound of the value's current range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'stop',
+ description: 'upper bound of the value's current range
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'normalized number',
+ type: 'Number'
+ },
+ example: [
+ "\n\nfunction draw() {\n background(200);\n let currentNum = mouseX;\n let lowerBound = 0;\n let upperBound = width; //100;\n let normalized = norm(currentNum, lowerBound, upperBound);\n let lineY = 70;\n stroke(3);\n line(0, lineY, width, lineY);\n //Draw an ellipse mapped to the non-normalized value.\n noStroke();\n fill(50);\n let s = 7; // ellipse size\n ellipse(currentNum, lineY, s, s);\n\n // Draw the guide\n let guideY = lineY + 15;\n text('0', 0, guideY);\n textAlign(RIGHT);\n text('100', width, guideY);\n\n // Draw the normalized value\n textAlign(LEFT);\n fill(0);\n textSize(32);\n let normalY = 40;\n let normalX = 20;\n text(normalized, normalX, normalY);\n}\n"
+ ],
+ alt:
+ 'ellipse moves with mouse. 0 shown left & 100 right and updating values center',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 625,
+ description:
+ 'Facilitates exponential expressions. The pow() function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 /\n3 × 3 × 3 × 3 × 3. Maps to\nMath.pow().
\n',
+ itemtype: 'method',
+ name: 'pow',
+ params: [
+ {
+ name: 'n',
+ description: 'base of the exponential expression
\n',
+ type: 'Number'
+ },
+ {
+ name: 'e',
+ description: 'power by which to raise the base
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'n^e',
+ type: 'Number'
+ },
+ example: [
+ '\n\nfunction setup() {\n //Exponentially increase the size of an ellipse.\n let eSize = 3; // Original Size\n let eLoc = 10; // Original Location\n\n ellipse(eLoc, eLoc, eSize, eSize);\n\n ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n\n ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n\n ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n}\n'
+ ],
+ alt: 'small to large ellipses radiating from top left of canvas',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 660,
+ description:
+ 'Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().
\n',
+ itemtype: 'method',
+ name: 'round',
+ params: [
+ {
+ name: 'n',
+ description: 'number to round
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'rounded number',
+ type: 'Integer'
+ },
+ example: [
+ '\n\nfunction draw() {\n background(200);\n //map, mouseX between 0 and 5.\n let ax = map(mouseX, 0, 100, 0, 5);\n let ay = 66;\n\n // Round the mapped number.\n let bx = round(map(mouseX, 0, 100, 0, 5));\n let by = 33;\n\n // Multiply the mapped numbers by 20 to more easily\n // see the changes.\n stroke(0);\n fill(0);\n line(0, ay, ax * 20, ay);\n line(0, by, bx * 20, by);\n\n // Reformat the float returned by map and draw it.\n noStroke();\n text(nfc(ax, 2), ax, ay - 5);\n text(nfc(bx, 1), bx, by - 5);\n}\n'
+ ],
+ alt:
+ 'horizontal center line squared values displayed on top and regular on bottom.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 699,
+ description:
+ 'Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.
\n',
+ itemtype: 'method',
+ name: 'sq',
+ params: [
+ {
+ name: 'n',
+ description: 'number to square
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'squared number',
+ type: 'Number'
+ },
+ example: [
+ "\n\nfunction draw() {\n background(200);\n let eSize = 7;\n let x1 = map(mouseX, 0, width, 0, 10);\n let y1 = 80;\n let x2 = sq(x1);\n let y2 = 20;\n\n // Draw the non-squared.\n line(0, y1, width, y1);\n ellipse(x1, y1, eSize, eSize);\n\n // Draw the squared.\n line(0, y2, width, y2);\n ellipse(x2, y2, eSize, eSize);\n\n // Draw dividing line.\n stroke(100);\n line(0, height / 2, width, height / 2);\n\n // Draw text.\n let spacing = 15;\n noStroke();\n fill(0);\n text('x = ' + x1, 0, y1 + spacing);\n text('sq(x) = ' + x2, 0, y2 + spacing);\n}\n"
+ ],
+ alt:
+ 'horizontal center line squared values displayed on top and regular on bottom.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/calculation.js',
+ line: 744,
+ description:
+ 'Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().
\n',
+ itemtype: 'method',
+ name: 'sqrt',
+ params: [
+ {
+ name: 'n',
+ description: 'non-negative number to square root
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'square root of number',
+ type: 'Number'
+ },
+ example: [
+ "\n\nfunction draw() {\n background(200);\n let eSize = 7;\n let x1 = mouseX;\n let y1 = 80;\n let x2 = sqrt(x1);\n let y2 = 20;\n\n // Draw the non-squared.\n line(0, y1, width, y1);\n ellipse(x1, y1, eSize, eSize);\n\n // Draw the squared.\n line(0, y2, width, y2);\n ellipse(x2, y2, eSize, eSize);\n\n // Draw dividing line.\n stroke(100);\n line(0, height / 2, width, height / 2);\n\n // Draw text.\n noStroke();\n fill(0);\n let spacing = 15;\n text('x = ' + x1, 0, y1 + spacing);\n text('sqrt(x) = ' + x2, 0, y2 + spacing);\n}\n"
+ ],
+ alt:
+ 'horizontal center line squareroot values displayed on top and regular on bottom.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Calculation'
+ },
+ {
+ file: 'src/math/math.js',
+ line: 10,
+ description:
+ 'Creates a new p5.Vector (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.
\n',
+ itemtype: 'method',
+ name: 'createVector',
+ params: [
+ {
+ name: 'x',
+ description: 'x component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'y',
+ description: 'y component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'z component of the vector
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'p5.Vector'
+ },
+ example: [
+ "\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n fill(255, 102, 204);\n}\n\nfunction draw() {\n background(255);\n pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));\n scale(0.75);\n sphere();\n}\n"
+ ],
+ alt: 'a purple sphere lit by a point light oscillating horizontally',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/noise.js',
+ line: 36,
+ description:
+ 'Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more natural ordered, harmonic\nsuccession of numbers compared to the standard random() function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.
The main difference to the\nrandom() function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.
The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction's use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result.
Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn't matter as such, only the distance between\nsuccessive coordinates does (eg. when using noise() within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.
\n',
+ itemtype: 'method',
+ name: 'noise',
+ params: [
+ {
+ name: 'x',
+ description: 'x-coordinate in noise space
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y-coordinate in noise space
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'z-coordinate in noise space
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'Perlin noise value (between 0 and 1) at specified\n coordinates',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\nlet xoff = 0.0;\n\nfunction draw() {\n background(204);\n xoff = xoff + 0.01;\n let n = noise(xoff) * width;\n line(n, 0, n, height);\n}\n\n\n\nlet noiseScale=0.02;\n\nfunction draw() {\n background(0);\n for (let x=0; x < width; x++) {\n let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n stroke(noiseVal*255);\n line(x, mouseY+noiseVal*80, x, height);\n }\n}\n\n'
+ ],
+ alt:
+ 'vertical line moves left to right with updating noise values.\nhorizontal wave pattern effected by mouse x-position & updating noise values.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Noise'
+ },
+ {
+ file: 'src/math/noise.js',
+ line: 180,
+ description:
+ 'Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\n
\n By default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by noise().\n
\n By changing these parameters, the signal created by the noise()\n function can be adapted to fit very specific needs and characteristics.
\n',
+ itemtype: 'method',
+ name: 'noiseDetail',
+ params: [
+ {
+ name: 'lod',
+ description: 'number of octaves to be used by the noise
\n',
+ type: 'Number'
+ },
+ {
+ name: 'falloff',
+ description: 'falloff factor for each octave
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ '\n \n \n let noiseVal;\n let noiseScale = 0.02;\nfunction setup() {\n createCanvas(100, 100);\n }\nfunction draw() {\n background(0);\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width / 2; x++) {\n noiseDetail(2, 0.2);\n noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n stroke(noiseVal * 255);\n point(x, y);\n noiseDetail(8, 0.65);\n noiseVal = noise(\n (mouseX + x + width / 2) * noiseScale,\n (mouseY + y) * noiseScale\n );\n stroke(noiseVal * 255);\n point(x + width / 2, y);\n }\n }\n }\n \n '
+ ],
+ alt:
+ '2 vertical grey smokey patterns affected my mouse x-position and noise.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Noise'
+ },
+ {
+ file: 'src/math/noise.js',
+ line: 246,
+ description:
+ 'Sets the seed value for noise(). By default, noise()\nproduces different results each time the program is run. Set the\nvalue parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.
\n',
+ itemtype: 'method',
+ name: 'noiseSeed',
+ params: [
+ {
+ name: 'seed',
+ description: 'the seed value
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ '\n\nlet xoff = 0.0;\n\nfunction setup() {\n noiseSeed(99);\n stroke(0, 10);\n}\n\nfunction draw() {\n xoff = xoff + .01;\n let n = noise(xoff) * width;\n line(n, 0, n, height);\n}\n\n'
+ ],
+ alt: 'vertical grey lines drawing in pattern affected by noise.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Noise'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 65,
+ description: 'The x component of the vector
\n',
+ itemtype: 'property',
+ name: 'x',
+ type: 'Number',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 70,
+ description: 'The y component of the vector
\n',
+ itemtype: 'property',
+ name: 'y',
+ type: 'Number',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 75,
+ description: 'The z component of the vector
\n',
+ itemtype: 'property',
+ name: 'z',
+ type: 'Number',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 82,
+ description:
+ 'Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.
\n',
+ itemtype: 'method',
+ name: 'toString',
+ return: {
+ description: '',
+ type: 'String'
+ },
+ example: [
+ '\n\n\nfunction setup() {\n let v = createVector(20, 30);\n print(String(v)); // prints "p5.Vector Object : [20, 30, 0]"\n}\n\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(0, 0);\n let v1 = createVector(mouseX, mouseY);\n drawArrow(v0, v1, \'black\');\n\n noStroke();\n text(v1.toString(), 10, 25, 90, 75);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 132,
+ description:
+ 'Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a p5.Vector, or the values from a float array.
\n',
+ itemtype: 'method',
+ name: 'set',
+ chainable: 1,
+ example: [
+ "\n\n\nfunction setup() {\n let v = createVector(1, 2, 3);\n v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n\n let v1 = createVector(0, 0, 0);\n let arr = [1, 2, 3];\n v1.set(arr); // Sets vector to [1, 2, 3]\n}\n\n\n\n\n\nlet v0, v1;\nfunction setup() {\n createCanvas(100, 100);\n\n v0 = createVector(0, 0);\n v1 = createVector(50, 50);\n}\n\nfunction draw() {\n background(240);\n\n drawArrow(v0, v1, 'black');\n v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\n\n noStroke();\n text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 132,
+ params: [
+ {
+ name: 'x',
+ description: 'the x component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'y',
+ description: 'the y component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'the z component of the vector
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 191,
+ params: [
+ {
+ name: 'value',
+ description: 'the vector to set
\n',
+ type: 'p5.Vector|Number[]'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 215,
+ description:
+ 'Gets a copy of the vector, returns a p5.Vector object.
\n',
+ itemtype: 'method',
+ name: 'copy',
+ return: {
+ description: 'the copy of the p5.Vector object',
+ type: 'p5.Vector'
+ },
+ example: [
+ '\n\n\nlet v1 = createVector(1, 2, 3);\nlet v2 = v1.copy();\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n// Prints "true"\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 238,
+ description:
+ 'Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a p5.Vector, the others\nacts directly on the vector. See the examples for more context.
\n',
+ itemtype: 'method',
+ name: 'add',
+ chainable: 1,
+ example: [
+ "\n\n\nlet v = createVector(1, 2, 3);\nv.add(4, 5, 6);\n// v's components are set to [5, 7, 9]\n\n\n\n\n\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\nprint(v3);\n\n\n\n\n\n// red vector + blue vector = purple vector\nfunction draw() {\n background(240);\n\n let v0 = createVector(0, 0);\n let v1 = createVector(mouseX, mouseY);\n drawArrow(v0, v1, 'red');\n\n let v2 = createVector(-30, 20);\n drawArrow(v1, v2, 'blue');\n\n let v3 = p5.Vector.add(v1, v2);\n drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 238,
+ params: [
+ {
+ name: 'x',
+ description: 'the x component of the vector to be added
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'the y component of the vector to be added
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'the z component of the vector to be added
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 304,
+ params: [
+ {
+ name: 'value',
+ description: 'the vector to add
\n',
+ type: 'p5.Vector|Number[]'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 1557,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'a p5.Vector to add
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description:
+ 'a p5.Vector to add
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'target',
+ description: 'the vector to receive the result
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1
+ },
+ {
+ line: 1564,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the resulting p5.Vector',
+ type: 'p5.Vector'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 328,
+ description:
+ 'Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a p5.Vector, the\nother acts directly on the vector. See the examples for more context.
\n',
+ itemtype: 'method',
+ name: 'sub',
+ chainable: 1,
+ example: [
+ "\n\n\nlet v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's components are set to [3, 4, 5]\n\n\n\n\n\n// Static method\nlet v1 = createVector(2, 3, 4);\nlet v2 = createVector(1, 2, 3);\n\nlet v3 = p5.Vector.sub(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n\n\n\n\n\n// red vector - blue vector = purple vector\nfunction draw() {\n background(240);\n\n let v0 = createVector(0, 0);\n let v1 = createVector(70, 50);\n drawArrow(v0, v1, 'red');\n\n let v2 = createVector(mouseX, mouseY);\n drawArrow(v0, v2, 'blue');\n\n let v3 = p5.Vector.sub(v1, v2);\n drawArrow(v2, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 328,
+ params: [
+ {
+ name: 'x',
+ description: 'the x component of the vector to subtract
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'the y component of the vector to subtract
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'the z component of the vector to subtract
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 394,
+ params: [
+ {
+ name: 'value',
+ description: 'the vector to subtract
\n',
+ type: 'p5.Vector|Number[]'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 1587,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'a p5.Vector to subtract from
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description:
+ 'a p5.Vector to subtract
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'target',
+ description: 'if undefined a new vector will be created
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1
+ },
+ {
+ line: 1594,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the resulting p5.Vector',
+ type: 'p5.Vector'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 418,
+ description:
+ 'Multiply the vector by a scalar. The static version of this method\ncreates a new p5.Vector while the non static version acts on the vector\ndirectly. See the examples for more context.
\n',
+ itemtype: 'method',
+ name: 'mult',
+ chainable: 1,
+ example: [
+ "\n\n\nlet v = createVector(1, 2, 3);\nv.mult(2);\n// v's components are set to [2, 4, 6]\n\n\n\n\n\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = p5.Vector.mult(v1, 2);\n// v2 has components [2, 4, 6]\nprint(v2);\n\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(50, 50);\n let v1 = createVector(25, -25);\n drawArrow(v0, v1, 'red');\n\n let num = map(mouseX, 0, width, -2, 2, true);\n let v2 = p5.Vector.mult(v1, num);\n drawArrow(v0, v2, 'blue');\n\n noStroke();\n text('multiplied by ' + num.toFixed(2), 5, 90);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 418,
+ params: [
+ {
+ name: 'n',
+ description: 'the number to multiply with the vector
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 1615,
+ params: [
+ {
+ name: 'v',
+ description: 'the vector to multiply
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'n',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'target',
+ description: 'if undefined a new vector will be created
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1
+ },
+ {
+ line: 1622,
+ params: [
+ {
+ name: 'v',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'n',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the resulting new p5.Vector',
+ type: 'p5.Vector'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 493,
+ description:
+ 'Divide the vector by a scalar. The static version of this method creates a\nnew p5.Vector while the non static version acts on the vector directly.\nSee the examples for more context.
\n',
+ itemtype: 'method',
+ name: 'div',
+ chainable: 1,
+ example: [
+ "\n\n\nlet v = createVector(6, 4, 2);\nv.div(2); //v's components are set to [3, 2, 1]\n\n\n\n\n\n// Static method\nlet v1 = createVector(6, 4, 2);\nlet v2 = p5.Vector.div(v1, 2);\n// v2 has components [3, 2, 1]\nprint(v2);\n\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(0, 100);\n let v1 = createVector(50, -50);\n drawArrow(v0, v1, 'red');\n\n let num = map(mouseX, 0, width, 10, 0.5, true);\n let v2 = p5.Vector.div(v1, num);\n drawArrow(v0, v2, 'blue');\n\n noStroke();\n text('divided by ' + num.toFixed(2), 10, 90);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 493,
+ params: [
+ {
+ name: 'n',
+ description: 'the number to divide the vector by
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 1642,
+ params: [
+ {
+ name: 'v',
+ description: 'the vector to divide
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'n',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'target',
+ description: 'if undefined a new vector will be created
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1
+ },
+ {
+ line: 1649,
+ params: [
+ {
+ name: 'v',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'n',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the resulting new p5.Vector',
+ type: 'p5.Vector'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 571,
+ description:
+ 'Calculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation sqrt(xx + yy + z*z).)
\n',
+ itemtype: 'method',
+ name: 'mag',
+ return: {
+ description: 'magnitude of the vector',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(0, 0);\n let v1 = createVector(mouseX, mouseY);\n drawArrow(v0, v1, \'black\');\n\n noStroke();\n text(\'vector length: \' + v1.mag().toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n\n\n\nlet v = createVector(20.0, 30.0, 40.0);\nlet m = v.mag();\nprint(m); // Prints "53.85164807134504"\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 571,
+ params: [],
+ return: {
+ description: 'magnitude of the vector',
+ type: 'Number'
+ }
+ },
+ {
+ line: 1739,
+ params: [
+ {
+ name: 'vecT',
+ description: 'the vector to return the magnitude of
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the magnitude of vecT',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 619,
+ description:
+ 'Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation (xx + yy + z*z).)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.
\n',
+ itemtype: 'method',
+ name: 'magSq',
+ return: {
+ description: 'squared magnitude of the vector',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\n// Static method\nlet v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints "56"\n\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(0, 0);\n let v1 = createVector(mouseX, mouseY);\n drawArrow(v0, v1, \'black\');\n\n noStroke();\n text(\'vector length squared: \' + v1.magSq().toFixed(2), 10, 45, 90, 55);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 673,
+ description:
+ 'Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.
\n',
+ itemtype: 'method',
+ name: 'dot',
+ return: {
+ description: 'the dot product',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints "20"\n\n\n\n\n\n//Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(3, 2, 1);\nprint(p5.Vector.dot(v1, v2)); // Prints "10"\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 673,
+ params: [
+ {
+ name: 'x',
+ description: 'x component of the vector
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'z component of the vector
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the dot product',
+ type: 'Number'
+ }
+ },
+ {
+ line: 704,
+ params: [
+ {
+ name: 'value',
+ description:
+ 'value component of the vector or a p5.Vector
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Number'
+ }
+ },
+ {
+ line: 1669,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'the first p5.Vector
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description:
+ 'the second p5.Vector
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the dot product',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 716,
+ description:
+ 'Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new p5.Vector.\nSee the examples for more context.
\n',
+ itemtype: 'method',
+ name: 'cross',
+ return: {
+ description:
+ 'p5.Vector composed of cross product',
+ type: 'p5.Vector'
+ },
+ example: [
+ '\n\n\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(1, 2, 3);\n\nv1.cross(v2); // v\'s components are [0, 0, 0]\n\n\n\n\n\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\nprint(crossProduct);\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 716,
+ params: [
+ {
+ name: 'v',
+ description:
+ 'p5.Vector to be crossed
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ return: {
+ description:
+ 'p5.Vector composed of cross product',
+ type: 'p5.Vector'
+ }
+ },
+ {
+ line: 1683,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'the first p5.Vector
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description:
+ 'the second p5.Vector
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the cross product',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 757,
+ description:
+ 'Calculates the Euclidean distance between two points (considering a\npoint as a vector object).
\n',
+ itemtype: 'method',
+ name: 'dist',
+ return: {
+ description: 'the distance',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = v1.dist(v2); // distance is 1.4142...\nprint(distance);\n\n\n\n\n\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = p5.Vector.dist(v1, v2);\n// distance is 1.4142...\nprint(distance);\n\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(0, 0);\n\n let v1 = createVector(70, 50);\n drawArrow(v0, v1, 'red');\n\n let v2 = createVector(mouseX, mouseY);\n drawArrow(v0, v2, 'blue');\n\n noStroke();\n text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 757,
+ params: [
+ {
+ name: 'v',
+ description:
+ 'the x, y, and z coordinates of a p5.Vector
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ return: {
+ description: 'the distance',
+ type: 'Number'
+ }
+ },
+ {
+ line: 1698,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'the first p5.Vector
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description:
+ 'the second p5.Vector
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the distance',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 828,
+ description:
+ 'Normalize the vector to length 1 (make it a unit vector).
\n',
+ itemtype: 'method',
+ name: 'normalize',
+ return: {
+ description: 'normalized p5.Vector',
+ type: 'p5.Vector'
+ },
+ example: [
+ "\n\n\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.normalize();\n// v's components are set to\n// [0.4454354, 0.8908708, 0.089087084]\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(50, 50);\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n drawArrow(v0, v1, 'red');\n v1.normalize();\n drawArrow(v0, v1.mult(35), 'blue');\n\n noFill();\n ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 884,
+ description:
+ 'Limit the magnitude of this vector to the value used for the max\nparameter.
\n',
+ itemtype: 'method',
+ name: 'limit',
+ params: [
+ {
+ name: 'max',
+ description: 'the maximum magnitude for the vector
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\n\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.limit(5);\n// v's components are set to\n// [2.2271771, 4.4543543, 0.4454354]\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(50, 50);\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n drawArrow(v0, v1, 'red');\n drawArrow(v0, v1.limit(35), 'blue');\n\n noFill();\n ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 942,
+ description:
+ 'Set the magnitude of this vector to the value used for the len\nparameter.
\n',
+ itemtype: 'method',
+ name: 'setMag',
+ params: [
+ {
+ name: 'len',
+ description: 'the new length for this vector
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\n\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.setMag(10);\n// v's components are set to [6.0, 8.0, 0.0]\n\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(0, 0);\n let v1 = createVector(50, 50);\n\n drawArrow(v0, v1, 'red');\n\n let length = map(mouseX, 0, width, 0, 141, true);\n v1.setMag(length);\n drawArrow(v0, v1, 'blue');\n\n noStroke();\n text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 998,
+ description:
+ 'Calculate the angle of rotation for this vector (only 2D vectors)
\n',
+ itemtype: 'method',
+ name: 'heading',
+ return: {
+ description: 'the angle of rotation',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nfunction setup() {\n let v1 = createVector(30, 50);\n print(v1.heading()); // 1.0303768265243125\n\n v1 = createVector(40, 50);\n print(v1.heading()); // 0.8960553845713439\n\n v1 = createVector(30, 70);\n print(v1.heading()); // 1.1659045405098132\n}\n\n\n\n\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(50, 50);\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n drawArrow(v0, v1, 'black');\n\n let myHeading = v1.heading();\n noStroke();\n text(\n 'vector heading: ' +\n myHeading.toFixed(2) +\n ' radians or ' +\n degrees(myHeading).toFixed(2) +\n ' degrees',\n 10,\n 50,\n 90,\n 50\n );\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1067,
+ description:
+ 'Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame
\n',
+ itemtype: 'method',
+ name: 'rotate',
+ params: [
+ {
+ name: 'angle',
+ description: 'the angle of rotation
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\n\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's components are set to [-20.0, 9.999999, 0.0]\n\n\n\n\n\nlet angle = 0;\nfunction draw() {\n background(240);\n\n let v0 = createVector(50, 50);\n let v1 = createVector(50, 0);\n\n drawArrow(v0, v1.rotate(angle), 'black');\n angle += 0.01;\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1123,
+ description:
+ 'Calculates and returns the angle (in radians) between two vectors.
\n',
+ itemtype: 'method',
+ name: 'angleBetween',
+ params: [
+ {
+ name: 'value',
+ description:
+ 'the x, y, and z components of a p5.Vector
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ return: {
+ description: 'the angle between (in radians)',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet angle = v1.angleBetween(v2);\n// angle is PI/2\nprint(angle);\n\n\n\n\n\nfunction draw() {\n background(240);\n let v0 = createVector(50, 50);\n\n let v1 = createVector(50, 0);\n drawArrow(v0, v1, 'red');\n\n let v2 = createVector(mouseX - 50, mouseY - 50);\n drawArrow(v0, v2, 'blue');\n\n let angleBetween = v1.angleBetween(v2);\n noStroke();\n text(\n 'angle between: ' +\n angleBetween.toFixed(2) +\n ' radians or ' +\n degrees(angleBetween).toFixed(2) +\n ' degrees',\n 10,\n 50,\n 90,\n 50\n );\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1200,
+ description: 'Linear interpolate the vector to another vector
\n',
+ itemtype: 'method',
+ name: 'lerp',
+ chainable: 1,
+ example: [
+ "\n\n\nlet v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n\n\n\n\n\nlet v1 = createVector(0, 0, 0);\nlet v2 = createVector(100, 100, 0);\n\nlet v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\nprint(v3);\n\n\n\n\n\nlet step = 0.01;\nlet amount = 0;\n\nfunction draw() {\n background(240);\n let v0 = createVector(0, 0);\n\n let v1 = createVector(mouseX, mouseY);\n drawArrow(v0, v1, 'red');\n\n let v2 = createVector(90, 90);\n drawArrow(v0, v2, 'blue');\n\n if (amount > 1 || amount < 0) {\n step *= -1;\n }\n amount += step;\n let v3 = p5.Vector.lerp(v1, v2, amount);\n\n drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 1200,
+ params: [
+ {
+ name: 'x',
+ description: 'the x component
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'the y component
\n',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: 'the z component
\n',
+ type: 'Number'
+ },
+ {
+ name: 'amt',
+ description:
+ 'the amount of interpolation; some value between 0.0\n (old vector) and 1.0 (new vector). 0.9 is very near\n the new vector. 0.5 is halfway in between.
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 1273,
+ params: [
+ {
+ name: 'v',
+ description:
+ 'the p5.Vector to lerp to
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'amt',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 1713,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'amt',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'target',
+ description: 'if undefined a new vector will be created
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ static: 1
+ },
+ {
+ line: 1721,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'amt',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ static: 1,
+ return: {
+ description: 'the lerped value',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1289,
+ description:
+ 'Return a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the p5.Vector.copy() method to copy into your own\narray.
\n',
+ itemtype: 'method',
+ name: 'array',
+ return: {
+ description: 'an Array with the 3 values',
+ type: 'Number[]'
+ },
+ example: [
+ '\n\n\nfunction setup() {\n let v = createVector(20, 30);\n print(v.array()); // Prints : Array [20, 30, 0]\n}\n\n\n\n\n\nlet v = createVector(10.0, 20.0, 30.0);\nlet f = v.array();\nprint(f[0]); // Prints "10.0"\nprint(f[1]); // Prints "20.0"\nprint(f[2]); // Prints "30.0"\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1321,
+ description:
+ 'Equality check against a p5.Vector
\n',
+ itemtype: 'method',
+ name: 'equals',
+ return: {
+ description: 'whether the vectors are equals',
+ type: 'Boolean'
+ },
+ example: [
+ '\n\n\nlet v1 = createVector(5, 10, 20);\nlet v2 = createVector(5, 10, 20);\nlet v3 = createVector(13, 10, 19);\n\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\n\n\n\n\n\nlet v1 = createVector(10.0, 20.0, 30.0);\nlet v2 = createVector(10.0, 20.0, 30.0);\nlet v3 = createVector(0.0, 0.0, 0.0);\nprint(v1.equals(v2)); // true\nprint(v1.equals(v3)); // false\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector',
+ overloads: [
+ {
+ line: 1321,
+ params: [
+ {
+ name: 'x',
+ description: 'the x component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'y',
+ description: 'the y component of the vector
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'the z component of the vector
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'whether the vectors are equals',
+ type: 'Boolean'
+ }
+ },
+ {
+ line: 1351,
+ params: [
+ {
+ name: 'value',
+ description: 'the vector to compare
\n',
+ type: 'p5.Vector|Array'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Boolean'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1376,
+ description: 'Make a new 2D vector from an angle
\n',
+ itemtype: 'method',
+ name: 'fromAngle',
+ static: 1,
+ params: [
+ {
+ name: 'angle',
+ description:
+ 'the desired angle, in radians (unaffected by angleMode)
\n',
+ type: 'Number'
+ },
+ {
+ name: 'length',
+ description: 'the length of the new vector (defaults to 1)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the new p5.Vector object',
+ type: 'p5.Vector'
+ },
+ example: [
+ "\n\n\nfunction draw() {\n background(200);\n\n // Create a variable, proportional to the mouseX,\n // varying from 0-360, to represent an angle in degrees.\n let myDegrees = map(mouseX, 0, width, 0, 360);\n\n // Display that variable in an onscreen text.\n // (Note the nfc() function to truncate additional decimal places,\n // and the \"\\xB0\" character for the degree symbol.)\n let readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n noStroke();\n fill(0);\n text(readout, 5, 15);\n\n // Create a p5.Vector using the fromAngle function,\n // and extract its x and y components.\n let v = p5.Vector.fromAngle(radians(myDegrees), 30);\n let vx = v.x;\n let vy = v.y;\n\n push();\n translate(width / 2, height / 2);\n noFill();\n stroke(150);\n line(0, 0, 30, 0);\n stroke(0);\n line(0, 0, vx, vy);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1427,
+ description:
+ 'Make a new 3D vector from a pair of ISO spherical angles
\n',
+ itemtype: 'method',
+ name: 'fromAngles',
+ static: 1,
+ params: [
+ {
+ name: 'theta',
+ description: 'the polar angle, in radians (zero is up)
\n',
+ type: 'Number'
+ },
+ {
+ name: 'phi',
+ description:
+ 'the azimuthal angle, in radians\n (zero is out of the screen)
\n',
+ type: 'Number'
+ },
+ {
+ name: 'length',
+ description: 'the length of the new vector (defaults to 1)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the new p5.Vector object',
+ type: 'p5.Vector'
+ },
+ example: [
+ "\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n fill(255);\n noStroke();\n}\nfunction draw() {\n background(255);\n\n let t = millis() / 1000;\n\n // add three point lights\n pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n\n sphere(35);\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1476,
+ description: 'Make a new 2D unit vector from a random angle
\n',
+ itemtype: 'method',
+ name: 'random2D',
+ static: 1,
+ return: {
+ description: 'the new p5.Vector object',
+ type: 'p5.Vector'
+ },
+ example: [
+ "\n\n\nlet v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\nprint(v);\n\n\n\n\n\nfunction setup() {\n frameRate(1);\n}\n\nfunction draw() {\n background(240);\n\n let v0 = createVector(50, 50);\n let v1 = p5.Vector.random2D();\n drawArrow(v0, v1.mult(50), 'black');\n}\n\n// draw an arrow for a vector at a given base position\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n\n"
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1529,
+ description: 'Make a new random 3D unit vector.
\n',
+ itemtype: 'method',
+ name: 'random3D',
+ static: 1,
+ return: {
+ description: 'the new p5.Vector object',
+ type: 'p5.Vector'
+ },
+ example: [
+ '\n\n\nlet v = p5.Vector.random3D();\n// May make v\'s attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\nprint(v);\n\n'
+ ],
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1612,
+ description:
+ 'Multiplies a vector by a scalar and returns a new vector.
\n',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1639,
+ description:
+ 'Divides a vector by a scalar and returns a new vector.
\n',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1666,
+ description: 'Calculates the dot product of two vectors.
\n',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1680,
+ description: 'Calculates the cross product of two vectors.
\n',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1694,
+ description:
+ 'Calculates the Euclidean distance between two points (considering a\npoint as a vector object).
\n',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/p5.Vector.js',
+ line: 1709,
+ description:
+ 'Linear interpolate a vector to another vector and return the result as a\nnew vector.
\n',
+ class: 'p5.Vector',
+ module: 'Math',
+ submodule: 'Vector'
+ },
+ {
+ file: 'src/math/random.js',
+ line: 37,
+ description:
+ 'Sets the seed value for random().
\nBy default, random() produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.
\n',
+ itemtype: 'method',
+ name: 'randomSeed',
+ params: [
+ {
+ name: 'seed',
+ description: 'the seed value
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ '\n\n\nrandomSeed(99);\nfor (let i = 0; i < 100; i++) {\n let r = random(0, 255);\n stroke(r);\n line(i, 0, i, 100);\n}\n\n'
+ ],
+ alt: 'many vertical lines drawn in white, black or grey.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Random'
+ },
+ {
+ file: 'src/math/random.js',
+ line: 67,
+ description:
+ 'Return a random floating-point number.
\nTakes either 0, 1 or 2 arguments.
\nIf no argument is given, returns a random number from 0\nup to (but not including) 1.
\nIf one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.
\nIf one argument is given and it is an array, returns a random element from\nthat array.
\nIf two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.
\n',
+ itemtype: 'method',
+ name: 'random',
+ return: {
+ description: 'the random number',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nfor (let i = 0; i < 100; i++) {\n let r = random(50);\n stroke(r * 5);\n line(50, i, 50 + r, i);\n}\n\n\n\n\nfor (let i = 0; i < 100; i++) {\n let r = random(-50, 50);\n line(50, i, 50 + r, i);\n}\n\n\n\n\n// Get a random element from an array using the random(Array) syntax\nlet words = ['apple', 'bear', 'cat', 'dog'];\nlet word = random(words); // select random word\ntext(word, 10, 50); // draw the word\n\n"
+ ],
+ alt:
+ '100 horizontal lines from center canvas to right. size+fill change each time\n100 horizontal lines from center of canvas. height & side change each render\nword displayed at random. Either apple, bear, cat, or dog',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Random',
+ overloads: [
+ {
+ line: 67,
+ params: [
+ {
+ name: 'min',
+ description: 'the lower bound (inclusive)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'max',
+ description: 'the upper bound (exclusive)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the random number',
+ type: 'Number'
+ }
+ },
+ {
+ line: 121,
+ params: [
+ {
+ name: 'choices',
+ description: 'the array to choose from
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'the random element from the array',
+ type: '*'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/math/random.js',
+ line: 155,
+ description:
+ 'Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that randomGaussian() might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\n
\n Takes either 0, 1 or 2 arguments.
\n If no args, returns a mean of 0 and standard deviation of 1.
\n If one arg, that arg is the mean (standard deviation is 1).
\n If two args, first is mean, second is standard deviation.
\n',
+ itemtype: 'method',
+ name: 'randomGaussian',
+ params: [
+ {
+ name: 'mean',
+ description: 'the mean
\n',
+ type: 'Number'
+ },
+ {
+ name: 'sd',
+ description: 'the standard deviation
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the random number',
+ type: 'Number'
+ },
+ example: [
+ '\n \n \n for (let y = 0; y < 100; y++) {\n let x = randomGaussian(50, 15);\n line(50, y, x, y);\n }\n \n \n \n \n let distribution = new Array(360);\nfunction setup() {\n createCanvas(100, 100);\n for (let i = 0; i < distribution.length; i++) {\n distribution[i] = floor(randomGaussian(0, 15));\n }\n }\nfunction draw() {\n background(204);\n translate(width / 2, width / 2);\n for (let i = 0; i < distribution.length; i++) {\n rotate(TWO_PI / distribution.length);\n stroke(0);\n let dist = abs(distribution[i]);\n line(0, 0, dist, 0);\n }\n }\n \n '
+ ],
+ alt:
+ '100 horizontal lines from center of canvas. height & side change each render\n black lines radiate from center of canvas. size determined each render',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Random'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 18,
+ description:
+ 'The inverse of cos(), returns the arc cosine of a value. This function\nexpects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927).
\n',
+ itemtype: 'method',
+ name: 'acos',
+ params: [
+ {
+ name: 'value',
+ description: 'the value whose arc cosine is to be returned
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the arc cosine of the given value',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet a = PI;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprint(a + ' : ' + c + ' : ' + ac);\n\n\n\n\n\nlet a = PI + PI / 4.0;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprint(a + ' : ' + c + ' : ' + ac);\n\n"
+ ],
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 52,
+ description:
+ 'The inverse of sin(), returns the arc sine of a value. This function\nexpects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2.
\n',
+ itemtype: 'method',
+ name: 'asin',
+ params: [
+ {
+ name: 'value',
+ description: 'the value whose arc sine is to be returned
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the arc sine of the given value',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet a = PI + PI / 3;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"1.0471976 : 0.86602545 : 1.0471976\"\nprint(a + ' : ' + s + ' : ' + as);\n\n\n\n\n\nlet a = PI + PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"4.1887903 : -0.86602545 : -1.0471976\"\nprint(a + ' : ' + s + ' : ' + as);\n\n\n"
+ ],
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 87,
+ description:
+ 'The inverse of tan(), returns the arc tangent of a value. This function\nexpects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2.
\n',
+ itemtype: 'method',
+ name: 'atan',
+ params: [
+ {
+ name: 'value',
+ description: 'the value whose arc tangent is to be returned
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the arc tangent of the given value',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet a = PI + PI / 3;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"1.0471976 : 1.7320509 : 1.0471976\"\nprint(a + ' : ' + t + ' : ' + at);\n\n\n\n\n\nlet a = PI + PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"4.1887903 : 1.7320513 : 1.0471977\"\nprint(a + ' : ' + t + ' : ' + at);\n\n\n"
+ ],
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 122,
+ description:
+ 'Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI. The atan2() function is most often used\nfor orienting geometry to the position of the cursor.\n
\nNote: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.
\n',
+ itemtype: 'method',
+ name: 'atan2',
+ params: [
+ {
+ name: 'y',
+ description: 'y-coordinate of the point
\n',
+ type: 'Number'
+ },
+ {
+ name: 'x',
+ description: 'x-coordinate of the point
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the arc tangent of the given point',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\nfunction draw() {\n background(204);\n translate(width / 2, height / 2);\n let a = atan2(mouseY - height / 2, mouseX - width / 2);\n rotate(a);\n rect(-30, -5, 60, 10);\n}\n\n'
+ ],
+ alt: '60 by 10 rect at center of canvas rotates with mouse movements',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 158,
+ description:
+ 'Calculates the cosine of an angle. This function takes into account the\ncurrent angleMode. Values are returned in the range -1 to 1.
\n',
+ itemtype: 'method',
+ name: 'cos',
+ params: [
+ {
+ name: 'angle',
+ description: 'the angle
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the cosine of the angle',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n a = a + inc;\n}\n\n'
+ ],
+ alt:
+ 'vertical black lines form wave patterns, extend-down on left and right side',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 186,
+ description:
+ 'Calculates the sine of an angle. This function takes into account the\ncurrent angleMode. Values are returned in the range -1 to 1.
\n',
+ itemtype: 'method',
+ name: 'sin',
+ params: [
+ {
+ name: 'angle',
+ description: 'the angle
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the sine of the angle',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n a = a + inc;\n}\n\n'
+ ],
+ alt:
+ 'vertical black lines extend down and up from center to form wave pattern',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 214,
+ description:
+ 'Calculates the tangent of an angle. This function takes into account\nthe current angleMode. Values are returned in the range of all real numbers.
\n',
+ itemtype: 'method',
+ name: 'tan',
+ params: [
+ {
+ name: 'angle',
+ description: 'the angle
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the tangent of the angle',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\nlet a = 0.0;\nlet inc = TWO_PI / 50.0;\nfor (let i = 0; i < 100; i = i + 2) {\n line(i, 50, i, 50 + tan(a) * 2.0);\n a = a + inc;\n}\n'
+ ],
+ alt:
+ 'vertical black lines end down and up from center to form spike pattern',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 242,
+ description:
+ 'Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent angleMode.
\n',
+ itemtype: 'method',
+ name: 'degrees',
+ params: [
+ {
+ name: 'radians',
+ description: 'the radians value to convert to degrees
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the converted angle',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet rad = PI / 4;\nlet deg = degrees(rad);\nprint(rad + ' radians is ' + deg + ' degrees');\n// Prints: 0.7853981633974483 radians is 45 degrees\n\n\n"
+ ],
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 267,
+ description:
+ 'Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent angleMode.
\n',
+ itemtype: 'method',
+ name: 'radians',
+ params: [
+ {
+ name: 'degrees',
+ description: 'the degree value to convert to radians
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'the converted angle',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet deg = 45.0;\nlet rad = radians(deg);\nprint(deg + ' degrees is ' + rad + ' radians');\n// Prints: 45 degrees is 0.7853981633974483 radians\n\n"
+ ],
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/math/trigonometry.js',
+ line: 290,
+ description:
+ 'Sets the current mode of p5 to given mode. Default mode is RADIANS.
\n',
+ itemtype: 'method',
+ name: 'angleMode',
+ params: [
+ {
+ name: 'mode',
+ description: 'either RADIANS or DEGREES
\n',
+ type: 'Constant'
+ }
+ ],
+ example: [
+ '\n\n\nfunction draw() {\n background(204);\n angleMode(DEGREES); // Change the mode to DEGREES\n let a = atan2(mouseY - height / 2, mouseX - width / 2);\n translate(width / 2, height / 2);\n push();\n rotate(a);\n rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n pop();\n angleMode(RADIANS); // Change the mode to RADIANS\n rotate(a); // variable a stays the same\n rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n\n'
+ ],
+ alt:
+ '40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.',
+ class: 'p5',
+ module: 'Math',
+ submodule: 'Trigonometry'
+ },
+ {
+ file: 'src/typography/attributes.js',
+ line: 11,
+ description:
+ 'Sets the current alignment for drawing text. Accepts two\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).
\nThe horizAlign parameter is in reference to the x value\nof the text() function, while the vertAlign parameter is\nin reference to the y value.
\nSo if you write textAlign(LEFT), you are aligning the left\nedge of your text to the x value you give in text(). If you\nwrite textAlign(RIGHT, TOP), you are aligning the right edge\nof your text to the x value and the top of edge of the text\nto the y value.
\n',
+ itemtype: 'method',
+ name: 'textAlign',
+ chainable: 1,
+ example: [
+ "\n\n\ntextSize(16);\ntextAlign(RIGHT);\ntext('ABCD', 50, 30);\ntextAlign(CENTER);\ntext('EFGH', 50, 50);\ntextAlign(LEFT);\ntext('IJKL', 50, 70);\n\n\n\n\n\ntextSize(16);\nstrokeWeight(0.5);\n\nline(0, 12, width, 12);\ntextAlign(CENTER, TOP);\ntext('TOP', 0, 12, width);\n\nline(0, 37, width, 37);\ntextAlign(CENTER, CENTER);\ntext('CENTER', 0, 37, width);\n\nline(0, 62, width, 62);\ntextAlign(CENTER, BASELINE);\ntext('BASELINE', 0, 62, width);\n\nline(0, 87, width, 87);\ntextAlign(CENTER, BOTTOM);\ntext('BOTTOM', 0, 87, width);\n\n"
+ ],
+ alt:
+ "Letters ABCD displayed at top right, EFGH at center and IJKL at bottom left.\nThe names of the four vertical alignments rendered each showing that alignment's placement relative to a horizontal line.",
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Attributes',
+ overloads: [
+ {
+ line: 11,
+ params: [
+ {
+ name: 'horizAlign',
+ description:
+ 'horizontal alignment, either LEFT,\n CENTER, or RIGHT
\n',
+ type: 'Constant'
+ },
+ {
+ name: 'vertAlign',
+ description:
+ 'vertical alignment, either TOP,\n BOTTOM, CENTER, or BASELINE
\n',
+ type: 'Constant',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 73,
+ params: [],
+ return: {
+ description: '',
+ type: 'Object'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/typography/attributes.js',
+ line: 82,
+ description:
+ 'Sets/gets the spacing, in pixels, between lines of text. This\nsetting will be used in all subsequent calls to the text() function.
\n',
+ itemtype: 'method',
+ name: 'textLeading',
+ chainable: 1,
+ example: [
+ '\n\n\n// Text to display. The "\\n" is a "new line" character\nlet lines = \'L1\\nL2\\nL3\';\ntextSize(12);\n\ntextLeading(10); // Set leading to 10\ntext(lines, 10, 25);\n\ntextLeading(20); // Set leading to 20\ntext(lines, 40, 25);\n\ntextLeading(30); // Set leading to 30\ntext(lines, 70, 25);\n\n'
+ ],
+ alt:
+ 'set L1 L2 & L3 displayed vertically 3 times. spacing increases for each set',
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Attributes',
+ overloads: [
+ {
+ line: 82,
+ params: [
+ {
+ name: 'leading',
+ description:
+ 'the size in pixels for spacing between lines
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 111,
+ params: [],
+ return: {
+ description: '',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/typography/attributes.js',
+ line: 120,
+ description:
+ 'Sets/gets the current font size. This size will be used in all subsequent\ncalls to the text() function. Font size is measured in pixels.
\n',
+ itemtype: 'method',
+ name: 'textSize',
+ chainable: 1,
+ example: [
+ "\n\n\ntextSize(12);\ntext('Font Size 12', 10, 30);\ntextSize(14);\ntext('Font Size 14', 10, 60);\ntextSize(16);\ntext('Font Size 16', 10, 90);\n\n"
+ ],
+ alt:
+ 'Font Size 12 displayed small, Font Size 14 medium & Font Size 16 large',
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Attributes',
+ overloads: [
+ {
+ line: 120,
+ params: [
+ {
+ name: 'theSize',
+ description: 'the size of the letters in units of pixels
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 143,
+ params: [],
+ return: {
+ description: '',
+ type: 'Number'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/typography/attributes.js',
+ line: 152,
+ description:
+ 'Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.\nNote: this may be is overridden by CSS styling. For non-system fonts\n(opentype, truetype, etc.) please load styled fonts instead.
\n',
+ itemtype: 'method',
+ name: 'textStyle',
+ chainable: 1,
+ example: [
+ "\n\n\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext('Font Style Normal', 10, 15);\ntextStyle(ITALIC);\ntext('Font Style Italic', 10, 40);\ntextStyle(BOLD);\ntext('Font Style Bold', 10, 65);\ntextStyle(BOLDITALIC);\ntext('Font Style Bold Italic', 10, 90);\n\n"
+ ],
+ alt:
+ 'words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.',
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Attributes',
+ overloads: [
+ {
+ line: 152,
+ params: [
+ {
+ name: 'theStyle',
+ description:
+ 'styling for text, either NORMAL,\n ITALIC, BOLD or BOLDITALIC
\n',
+ type: 'Constant'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 180,
+ params: [],
+ return: {
+ description: '',
+ type: 'String'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/typography/attributes.js',
+ line: 189,
+ description:
+ 'Calculates and returns the width of any character or text string.
\n',
+ itemtype: 'method',
+ name: 'textWidth',
+ params: [
+ {
+ name: 'theText',
+ description: 'the String of characters to measure
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: '',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\ntextSize(28);\n\nlet aChar = 'P';\nlet cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nlet aString = 'p5.js';\nlet sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n\n"
+ ],
+ alt:
+ 'Letter P and p5.js are displayed with vertical lines at end. P is wide',
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/typography/attributes.js',
+ line: 225,
+ description:
+ 'Returns the ascent of the current font at its current size. The ascent\nrepresents the distance, in pixels, of the tallest character above\nthe baseline.
\n',
+ itemtype: 'method',
+ name: 'textAscent',
+ return: {
+ description: '',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext('dp', 40, base); // Draw text on baseline\n\n"
+ ],
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/typography/attributes.js',
+ line: 254,
+ description:
+ 'Returns the descent of the current font at its current size. The descent\nrepresents the distance, in pixels, of the character with the longest\ndescender below the baseline.
\n',
+ itemtype: 'method',
+ name: 'textDescent',
+ return: {
+ description: '',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet desc = textDescent() * scalar; // Calc ascent\nline(0, base + desc, width, base + desc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext('dp', 40, base); // Draw text on baseline\n\n"
+ ],
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/typography/attributes.js',
+ line: 283,
+ description: 'Helper function to measure ascent and descent.
\n',
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Attributes'
+ },
+ {
+ file: 'src/typography/loading_displaying.js',
+ line: 14,
+ description:
+ 'Loads an opentype font file (.otf, .ttf) from a file or a URL,\nand returns a PFont Object. This method is asynchronous,\nmeaning it may not finish before the next line in your sketch\nis executed.\n
\nThe path to the font should be relative to the HTML file\nthat links in your sketch. Loading fonts from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.
\n',
+ itemtype: 'method',
+ name: 'loadFont',
+ params: [
+ {
+ name: 'path',
+ description: 'name of the file or url to load
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to be executed after\n loadFont() completes
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'onError',
+ description:
+ 'function to be executed if\n an error occurs
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'p5.Font object',
+ type: 'p5.Font'
+ },
+ example: [
+ "\n\nCalling loadFont() inside preload() guarantees that the load\noperation will have completed before setup() and draw() are called.
\n\n\nlet myFont;\nfunction preload() {\n myFont = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n fill('#ED225D');\n textFont(myFont);\n textSize(36);\n text('p5*js', 10, 50);\n}\n\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n\nfunction setup() {\n loadFont('assets/inconsolata.otf', drawText);\n}\n\nfunction drawText(font) {\n fill('#ED225D');\n textFont(font, 36);\n text('p5*js', 10, 50);\n}\n\n\nYou can also use the font filename string (without the file extension) to style other HTML\nelements.
\n\n\nfunction preload() {\n loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n let myDiv = createDiv('hello there');\n myDiv.style('font-family', 'Inconsolata');\n}\n"
+ ],
+ alt: "p5*js in p5's theme dark pink\np5*js in p5's theme dark pink",
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/typography/loading_displaying.js',
+ line: 138,
+ description:
+ 'Draws text to the screen. Displays the information specified in the first\nparameter on the screen in the position specified by the additional\nparameters. A default font will be used unless a font is set with the\ntextFont() function and a default size will be used unless a font is set\nwith textSize(). Change the color of the text with the fill() function.\nChange the outline of the text with the stroke() and strokeWeight()\nfunctions.\n
\nThe text displays in relation to the textAlign() function, which gives the\noption to draw to the left, right, and center of the coordinates.\n
\nThe x2 and y2 parameters define a rectangular area to display within and\nmay only be used with string data. When these parameters are specified,\nthey are interpreted based on the current rectMode() setting. Text that\ndoes not fit completely within the rectangle specified will not be drawn\nto the screen. If x2 and y2 are not specified, the baseline alignment is the\ndefault, which means that the text will be drawn upwards from x and y.\n
\nWEBGL: Only opentype/truetype fonts are supported. You must load a font using the\nloadFont() method (see the example above).\nstroke() currently has no effect in webgl mode.
\n',
+ itemtype: 'method',
+ name: 'text',
+ params: [
+ {
+ name: 'str',
+ description:
+ 'the alphanumeric\n symbols to be displayed
\n',
+ type: 'String|Object|Array|Number|Boolean'
+ },
+ {
+ name: 'x',
+ description: 'x-coordinate of text
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y-coordinate of text
\n',
+ type: 'Number'
+ },
+ {
+ name: 'x2',
+ description:
+ 'by default, the width of the text box,\n see rectMode() for more info
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'y2',
+ description:
+ 'by default, the height of the text box,\n see rectMode() for more info
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\n\ntextSize(32);\ntext('word', 10, 30);\nfill(0, 102, 153);\ntext('word', 10, 60);\nfill(0, 102, 153, 51);\ntext('word', 10, 90);\n\n\n\n\nlet s = 'The quick brown fox jumped over the lazy dog.';\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n\n\n\n\n\nlet inconsolata;\nfunction preload() {\n inconsolata = loadFont('assets/inconsolata.otf');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n textFont(inconsolata);\n textSize(width / 3);\n textAlign(CENTER, CENTER);\n}\nfunction draw() {\n background(0);\n let time = millis();\n rotateX(time / 1000);\n rotateZ(time / 1234);\n text('p5.js', 0, 0);\n}\n\n"
+ ],
+ alt:
+ "'word' displayed 3 times going from black, blue to translucent blue\nThe quick brown fox jumped over the lazy dog.\nthe text 'p5.js' spinning in 3d",
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/typography/loading_displaying.js',
+ line: 225,
+ description:
+ 'Sets the current font that will be drawn with the text() function.\n
\nWEBGL: Only fonts loaded via loadFont() are supported.
\n',
+ itemtype: 'method',
+ name: 'textFont',
+ return: {
+ description: 'the current font',
+ type: 'Object'
+ },
+ example: [
+ "\n\n\nfill(0);\ntextSize(12);\ntextFont('Georgia');\ntext('Georgia', 12, 30);\ntextFont('Helvetica');\ntext('Helvetica', 12, 60);\n\n\n\n\nlet fontRegular, fontItalic, fontBold;\nfunction preload() {\n fontRegular = loadFont('assets/Regular.otf');\n fontItalic = loadFont('assets/Italic.ttf');\n fontBold = loadFont('assets/Bold.ttf');\n}\nfunction setup() {\n background(210);\n fill(0)\n .strokeWeight(0)\n .textSize(10);\n textFont(fontRegular);\n text('Font Style Normal', 10, 30);\n textFont(fontItalic);\n text('Font Style Italic', 10, 50);\n textFont(fontBold);\n text('Font Style Bold', 10, 70);\n}\n\n"
+ ],
+ alt:
+ 'words Font Style Normal displayed normally, Italic in italic and bold in bold',
+ class: 'p5',
+ module: 'Typography',
+ submodule: 'Loading & Displaying',
+ overloads: [
+ {
+ line: 225,
+ params: [],
+ return: {
+ description: 'the current font',
+ type: 'Object'
+ }
+ },
+ {
+ line: 270,
+ params: [
+ {
+ name: 'font',
+ description:
+ 'a font loaded via loadFont(), or a String\nrepresenting a web safe font (a font\nthat is generally available across all systems)
\n',
+ type: 'Object|String'
+ },
+ {
+ name: 'size',
+ description: 'the font size to use
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/typography/p5.Font.js',
+ line: 23,
+ description: 'Underlying opentype font implementation
\n',
+ itemtype: 'property',
+ name: 'font',
+ class: 'p5.Font',
+ module: 'Typography',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/typography/p5.Font.js',
+ line: 30,
+ description:
+ 'Returns a tight bounding box for the given text string using this\nfont (currently only supports single lines)
\n',
+ itemtype: 'method',
+ name: 'textBounds',
+ params: [
+ {
+ name: 'line',
+ description: 'a line of text
\n',
+ type: 'String'
+ },
+ {
+ name: 'x',
+ description: 'x-position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y-position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'fontSize',
+ description: 'font size to use (optional) Default is 12.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'options',
+ description:
+ 'opentype options (optional)\n opentype fonts contains alignment and baseline options.\n Default is 'LEFT' and 'alphabetic'
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'a rectangle object with properties: x, y, w, h',
+ type: 'Object'
+ },
+ example: [
+ "\n\n\nlet font;\nlet textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n font = loadFont('./assets/Regular.otf');\n}\nfunction setup() {\n background(210);\n\n let bbox = font.textBounds(textString, 10, 30, 12);\n fill(255);\n stroke(0);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n fill(0);\n noStroke();\n\n textFont(font);\n textSize(12);\n text(textString, 10, 30);\n}\n\n"
+ ],
+ alt:
+ 'words Lorem ipsum dol go off canvas and contained by white bounding box',
+ class: 'p5.Font',
+ module: 'Typography',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/typography/p5.Font.js',
+ line: 154,
+ description:
+ 'Computes an array of points following the path for specified text
\n',
+ itemtype: 'method',
+ name: 'textToPoints',
+ params: [
+ {
+ name: 'txt',
+ description: 'a line of text
\n',
+ type: 'String'
+ },
+ {
+ name: 'x',
+ description: 'x-position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y-position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'fontSize',
+ description: 'font size to use (optional)
\n',
+ type: 'Number'
+ },
+ {
+ name: 'options',
+ description:
+ 'an (optional) object that can contain:
\n
sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise
\n
simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'an array of points, each with x, y, alpha (the path angle)',
+ type: 'Array'
+ },
+ example: [
+ "\n\n\nlet font;\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nlet points;\nlet bounds;\nfunction setup() {\n createCanvas(100, 100);\n stroke(0);\n fill(255, 104, 204);\n\n points = font.textToPoints('p5', 0, 0, 10, {\n sampleFactor: 5,\n simplifyThreshold: 0\n });\n bounds = font.textBounds(' p5 ', 0, 0, 10);\n}\n\nfunction draw() {\n background(255);\n beginShape();\n translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n for (let i = 0; i < points.length; i++) {\n let p = points[i];\n vertex(\n p.x * width / bounds.w +\n sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n p.y * height / bounds.h\n );\n }\n endShape(CLOSE);\n}\n\n\n"
+ ],
+ class: 'p5.Font',
+ module: 'Typography',
+ submodule: 'Loading & Displaying'
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 10,
+ description:
+ 'Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().
\n',
+ itemtype: 'method',
+ name: 'append',
+ deprecated: true,
+ deprecationMessage:
+ 'Use array.push(value) instead.',
+ params: [
+ {
+ name: 'array',
+ description: 'Array to append
\n',
+ type: 'Array'
+ },
+ {
+ name: 'value',
+ description: 'to be added to the Array
\n',
+ type: 'Any'
+ }
+ ],
+ return: {
+ description: 'the array that was appended to',
+ type: 'Array'
+ },
+ example: [
+ "\n\nfunction setup() {\n let myArray = ['Mango', 'Apple', 'Papaya'];\n print(myArray); // ['Mango', 'Apple', 'Papaya']\n\n append(myArray, 'Peach');\n print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']\n}\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions'
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 35,
+ description:
+ 'Copies an array (or part of an array) to another array. The src array is\ncopied to the dst array, beginning at the position specified by\nsrcPosition and into the position specified by dstPosition. The number of\nelements to copy is determined by length. Note that copying values\noverwrites existing values in the destination array. To append values\ninstead of overwriting them, use concat().\n
\nThe simplified version with only two arguments, arrayCopy(src, dst),\ncopies an entire array to another of the same size. It is equivalent to\narrayCopy(src, 0, dst, 0, src.length).\n
\nUsing this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.
\n',
+ itemtype: 'method',
+ name: 'arrayCopy',
+ deprecated: true,
+ example: [
+ "\n\nlet src = ['A', 'B', 'C'];\nlet dst = [1, 2, 3];\nlet srcPosition = 1;\nlet dstPosition = 0;\nlet length = 2;\n\nprint(src); // ['A', 'B', 'C']\nprint(dst); // [ 1 , 2 , 3 ]\n\narrayCopy(src, srcPosition, dst, dstPosition, length);\nprint(dst); // ['B', 'C', 3]\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions',
+ overloads: [
+ {
+ line: 35,
+ params: [
+ {
+ name: 'src',
+ description: 'the source Array
\n',
+ type: 'Array'
+ },
+ {
+ name: 'srcPosition',
+ description: 'starting position in the source Array
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'dst',
+ description: 'the destination Array
\n',
+ type: 'Array'
+ },
+ {
+ name: 'dstPosition',
+ description: 'starting position in the destination Array
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'length',
+ description: 'number of Array elements to be copied
\n',
+ type: 'Integer'
+ }
+ ]
+ },
+ {
+ line: 73,
+ params: [
+ {
+ name: 'src',
+ description: '',
+ type: 'Array'
+ },
+ {
+ name: 'dst',
+ description: '',
+ type: 'Array'
+ },
+ {
+ name: 'length',
+ description: '',
+ type: 'Integer',
+ optional: true
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 112,
+ description:
+ 'Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.
\n',
+ itemtype: 'method',
+ name: 'concat',
+ deprecated: true,
+ deprecationMessage:
+ 'Use arr1.concat(arr2) instead.',
+ params: [
+ {
+ name: 'a',
+ description: 'first Array to concatenate
\n',
+ type: 'Array'
+ },
+ {
+ name: 'b',
+ description: 'second Array to concatenate
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'concatenated array',
+ type: 'Array'
+ },
+ example: [
+ "\n\nfunction setup() {\n let arr1 = ['A', 'B', 'C'];\n let arr2 = [1, 2, 3];\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1,2,3]\n\n let arr3 = concat(arr1, arr2);\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1, 2, 3]\n print(arr3); // ['A','B','C', 1, 2, 3]\n}\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions'
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 141,
+ description:
+ 'Reverses the order of an array, maps to Array.reverse()
\n',
+ itemtype: 'method',
+ name: 'reverse',
+ deprecated: true,
+ deprecationMessage:
+ 'Use array.reverse() instead.',
+ params: [
+ {
+ name: 'list',
+ description: 'Array to reverse
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'the reversed list',
+ type: 'Array'
+ },
+ example: [
+ "\n\nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A','B','C']\n\n reverse(myArray);\n print(myArray); // ['C','B','A']\n}\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions'
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 161,
+ description:
+ 'Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().
\n',
+ itemtype: 'method',
+ name: 'shorten',
+ deprecated: true,
+ deprecationMessage:
+ 'Use array.pop() instead.',
+ params: [
+ {
+ name: 'list',
+ description: 'Array to shorten
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'shortened Array',
+ type: 'Array'
+ },
+ example: [
+ "\n\nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A', 'B', 'C']\n let newArray = shorten(myArray);\n print(myArray); // ['A','B','C']\n print(newArray); // ['A','B']\n}\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions'
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 185,
+ description:
+ "Randomizes the order of the elements of an array. Implements\n\nFisher-Yates Shuffle Algorithm.
\n",
+ itemtype: 'method',
+ name: 'shuffle',
+ params: [
+ {
+ name: 'array',
+ description: 'Array to shuffle
\n',
+ type: 'Array'
+ },
+ {
+ name: 'bool',
+ description: 'modify passed array
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'shuffled Array',
+ type: 'Array'
+ },
+ example: [
+ "\n\nfunction setup() {\n let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];\n print(regularArr);\n shuffle(regularArr, true); // force modifications to passed array\n print(regularArr);\n\n // By default shuffle() returns a shuffled cloned array:\n let newArr = shuffle(regularArr);\n print(regularArr);\n print(newArr);\n}\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions'
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 227,
+ description:
+ 'Sorts an array of numbers from smallest to largest, or puts an array of\nwords in alphabetical order. The original array is not modified; a\nre-ordered array is returned. The count parameter states the number of\nelements to sort. For example, if there are 12 elements in an array and\ncount is set to 5, only the first 5 elements in the array will be sorted.
\n',
+ itemtype: 'method',
+ name: 'sort',
+ deprecated: true,
+ deprecationMessage:
+ 'Use array.sort() instead.',
+ params: [
+ {
+ name: 'list',
+ description: 'Array to sort
\n',
+ type: 'Array'
+ },
+ {
+ name: 'count',
+ description: 'number of elements to sort, starting from 0
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the sorted list',
+ type: 'Array'
+ },
+ example: [
+ "\n\nfunction setup() {\n let words = ['banana', 'apple', 'pear', 'lime'];\n print(words); // ['banana', 'apple', 'pear', 'lime']\n let count = 4; // length of array\n\n words = sort(words, count);\n print(words); // ['apple', 'banana', 'lime', 'pear']\n}\n\n\nfunction setup() {\n let numbers = [2, 6, 1, 5, 14, 9, 8, 12];\n print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]\n let count = 5; // Less than the length of the array\n\n numbers = sort(numbers, count);\n print(numbers); // [1,2,5,6,14,9,8,12]\n}\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions'
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 273,
+ description:
+ 'Inserts a value or an array of values into an existing array. The first\nparameter specifies the initial array to be modified, and the second\nparameter defines the data to be inserted. The third parameter is an index\nvalue which specifies the array position from which to insert data.\n(Remember that array index numbering starts at zero, so the first position\nis 0, the second position is 1, and so on.)
\n',
+ itemtype: 'method',
+ name: 'splice',
+ deprecated: true,
+ deprecationMessage:
+ 'Use array.splice() instead.',
+ params: [
+ {
+ name: 'list',
+ description: 'Array to splice into
\n',
+ type: 'Array'
+ },
+ {
+ name: 'value',
+ description: 'value to be spliced in
\n',
+ type: 'Any'
+ },
+ {
+ name: 'position',
+ description: 'in the array from which to insert data
\n',
+ type: 'Integer'
+ }
+ ],
+ return: {
+ description: 'the list',
+ type: 'Array'
+ },
+ example: [
+ "\n\nfunction setup() {\n let myArray = [0, 1, 2, 3, 4];\n let insArray = ['A', 'B', 'C'];\n print(myArray); // [0, 1, 2, 3, 4]\n print(insArray); // ['A','B','C']\n\n splice(myArray, insArray, 3);\n print(myArray); // [0,1,2,'A','B','C',3,4]\n}\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions'
+ },
+ {
+ file: 'src/utilities/array_functions.js',
+ line: 308,
+ description:
+ 'Extracts an array of elements from an existing array. The list parameter\ndefines the array from which the elements will be copied, and the start\nand count parameters specify which elements to extract. If no count is\ngiven, elements will be extracted from the start to the end of the array.\nWhen specifying the start, remember that the first array element is 0.\nThis function does not change the source array.
\n',
+ itemtype: 'method',
+ name: 'subset',
+ deprecated: true,
+ deprecationMessage:
+ 'Use array.slice() instead.',
+ params: [
+ {
+ name: 'list',
+ description: 'Array to extract from
\n',
+ type: 'Array'
+ },
+ {
+ name: 'start',
+ description: 'position to begin
\n',
+ type: 'Integer'
+ },
+ {
+ name: 'count',
+ description: 'number of values to extract
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Array of extracted elements',
+ type: 'Array'
+ },
+ example: [
+ "\n\nfunction setup() {\n let myArray = [1, 2, 3, 4, 5];\n print(myArray); // [1, 2, 3, 4, 5]\n\n let sub1 = subset(myArray, 0, 3);\n let sub2 = subset(myArray, 2, 2);\n print(sub1); // [1,2,3]\n print(sub2); // [3,4]\n}\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Array Functions'
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 10,
+ description:
+ 'Converts a string to its floating point representation. The contents of a\nstring must resemble a number, or NaN (not a number) will be returned.\nFor example, float("1234.56") evaluates to 1234.56, but float("giraffe")\nwill return NaN.
\nWhen an array of values is passed in, then an array of floats of the same\nlength is returned.
\n',
+ itemtype: 'method',
+ name: 'float',
+ params: [
+ {
+ name: 'str',
+ description: 'float string to parse
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'floating point representation of string',
+ type: 'Number'
+ },
+ example: [
+ "\n\nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\n\n\nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n"
+ ],
+ alt: '20 by 20 white ellipse in the center of the canvas',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion'
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 45,
+ description:
+ 'Converts a boolean, string, or float to its integer representation.\nWhen an array of values is passed in, then an int array of the same length\nis returned.
\n',
+ itemtype: 'method',
+ name: 'int',
+ return: {
+ description: 'integer representation of value',
+ type: 'Number'
+ },
+ example: [
+ "\n\nprint(int('10')); // 10\nprint(int(10.31)); // 10\nprint(int(-10)); // -10\nprint(int(true)); // 1\nprint(int(false)); // 0\nprint(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]\nprint(int(Infinity)); // Infinity\nprint(int('-Infinity')); // -Infinity\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion',
+ overloads: [
+ {
+ line: 45,
+ params: [
+ {
+ name: 'n',
+ description: 'value to parse
\n',
+ type: 'String|Boolean|Number'
+ },
+ {
+ name: 'radix',
+ description: 'the radix to convert to (default: 10)
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'integer representation of value',
+ type: 'Number'
+ }
+ },
+ {
+ line: 67,
+ params: [
+ {
+ name: 'ns',
+ description: 'values to parse
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'integer representation of values',
+ type: 'Number[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 88,
+ description:
+ 'Converts a boolean, string or number to its string representation.\nWhen an array of values is passed in, then an array of strings of the same\nlength is returned.
\n',
+ itemtype: 'method',
+ name: 'str',
+ params: [
+ {
+ name: 'n',
+ description: 'value to parse
\n',
+ type: 'String|Boolean|Number|Array'
+ }
+ ],
+ return: {
+ description: 'string representation of value',
+ type: 'String'
+ },
+ example: [
+ '\n\nprint(str(\'10\')); // "10"\nprint(str(10.31)); // "10.31"\nprint(str(-10)); // "-10"\nprint(str(true)); // "true"\nprint(str(false)); // "false"\nprint(str([true, \'10.3\', 9.8])); // [ "true", "10.3", "9.8" ]\n'
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion'
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 114,
+ description:
+ 'Converts a number or string to its boolean representation.\nFor a number, any non-zero value (positive or negative) evaluates to true,\nwhile zero evaluates to false. For a string, the value "true" evaluates to\ntrue, while any other value evaluates to false. When an array of number or\nstring values is passed in, then a array of booleans of the same length is\nreturned.
\n',
+ itemtype: 'method',
+ name: 'boolean',
+ params: [
+ {
+ name: 'n',
+ description: 'value to parse
\n',
+ type: 'String|Boolean|Number|Array'
+ }
+ ],
+ return: {
+ description: 'boolean representation of value',
+ type: 'Boolean'
+ },
+ example: [
+ "\n\nprint(boolean(0)); // false\nprint(boolean(1)); // true\nprint(boolean('true')); // true\nprint(boolean('abcd')); // false\nprint(boolean([0, 12, 'true'])); // [false, true, true]\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion'
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 146,
+ description:
+ 'Converts a number, string representation of a number, or boolean to its byte\nrepresentation. A byte can be only a whole number between -128 and 127, so\nwhen a value outside of this range is converted, it wraps around to the\ncorresponding byte representation. When an array of number, string or boolean\nvalues is passed in, then an array of bytes the same length is returned.
\n',
+ itemtype: 'method',
+ name: 'byte',
+ return: {
+ description: 'byte representation of value',
+ type: 'Number'
+ },
+ example: [
+ "\n\nprint(byte(127)); // 127\nprint(byte(128)); // -128\nprint(byte(23.4)); // 23\nprint(byte('23.4')); // 23\nprint(byte('hello')); // NaN\nprint(byte(true)); // 1\nprint(byte([0, 255, '100'])); // [0, -1, 100]\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion',
+ overloads: [
+ {
+ line: 146,
+ params: [
+ {
+ name: 'n',
+ description: 'value to parse
\n',
+ type: 'String|Boolean|Number'
+ }
+ ],
+ return: {
+ description: 'byte representation of value',
+ type: 'Number'
+ }
+ },
+ {
+ line: 168,
+ params: [
+ {
+ name: 'ns',
+ description: 'values to parse
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'array of byte representation of values',
+ type: 'Number[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 182,
+ description:
+ 'Converts a number or string to its corresponding single-character\nstring representation. If a string parameter is provided, it is first\nparsed as an integer and then translated into a single-character string.\nWhen an array of number or string values is passed in, then an array of\nsingle-character strings of the same length is returned.
\n',
+ itemtype: 'method',
+ name: 'char',
+ return: {
+ description: 'string representation of value',
+ type: 'String'
+ },
+ example: [
+ '\n\nprint(char(65)); // "A"\nprint(char(\'65\')); // "A"\nprint(char([65, 66, 67])); // [ "A", "B", "C" ]\nprint(join(char([65, 66, 67]), \'\')); // "ABC"\n'
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion',
+ overloads: [
+ {
+ line: 182,
+ params: [
+ {
+ name: 'n',
+ description: 'value to parse
\n',
+ type: 'String|Number'
+ }
+ ],
+ return: {
+ description: 'string representation of value',
+ type: 'String'
+ }
+ },
+ {
+ line: 201,
+ params: [
+ {
+ name: 'ns',
+ description: 'values to parse
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'array of string representation of values',
+ type: 'String[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 216,
+ description:
+ 'Converts a single-character string to its corresponding integer\nrepresentation. When an array of single-character string values is passed\nin, then an array of integers of the same length is returned.
\n',
+ itemtype: 'method',
+ name: 'unchar',
+ return: {
+ description: 'integer representation of value',
+ type: 'Number'
+ },
+ example: [
+ "\n\nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion',
+ overloads: [
+ {
+ line: 216,
+ params: [
+ {
+ name: 'n',
+ description: 'value to parse
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'integer representation of value',
+ type: 'Number'
+ }
+ },
+ {
+ line: 232,
+ params: [
+ {
+ name: 'ns',
+ description: 'values to parse
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'integer representation of values',
+ type: 'Number[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 245,
+ description:
+ 'Converts a number to a string in its equivalent hexadecimal notation. If a\nsecond parameter is passed, it is used to set the number of characters to\ngenerate in the hexadecimal notation. When an array is passed in, an\narray of strings in hexadecimal notation of the same length is returned.
\n',
+ itemtype: 'method',
+ name: 'hex',
+ return: {
+ description: 'hexadecimal string representation of value',
+ type: 'String'
+ },
+ example: [
+ '\n\nprint(hex(255)); // "000000FF"\nprint(hex(255, 6)); // "0000FF"\nprint(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]\nprint(Infinity); // "FFFFFFFF"\nprint(-Infinity); // "00000000"\n'
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion',
+ overloads: [
+ {
+ line: 245,
+ params: [
+ {
+ name: 'n',
+ description: 'value to parse
\n',
+ type: 'Number'
+ },
+ {
+ name: 'digits',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'hexadecimal string representation of value',
+ type: 'String'
+ }
+ },
+ {
+ line: 265,
+ params: [
+ {
+ name: 'ns',
+ description: 'array of values to parse
\n',
+ type: 'Number[]'
+ },
+ {
+ name: 'digits',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'hexadecimal string representation of values',
+ type: 'String[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/conversion.js',
+ line: 295,
+ description:
+ 'Converts a string representation of a hexadecimal number to its equivalent\ninteger value. When an array of strings in hexadecimal notation is passed\nin, an array of integers of the same length is returned.
\n',
+ itemtype: 'method',
+ name: 'unhex',
+ return: {
+ description: 'integer representation of hexadecimal value',
+ type: 'Number'
+ },
+ example: [
+ "\n\nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'Conversion',
+ overloads: [
+ {
+ line: 295,
+ params: [
+ {
+ name: 'n',
+ description: 'value to parse
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'integer representation of hexadecimal value',
+ type: 'Number'
+ }
+ },
+ {
+ line: 311,
+ params: [
+ {
+ name: 'ns',
+ description: 'values to parse
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'integer representations of hexadecimal value',
+ type: 'Number[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 13,
+ description:
+ 'Combines an array of Strings into one String, each separated by the\ncharacter(s) used for the separator parameter. To join arrays of ints or\nfloats, it's necessary to first convert them to Strings using nf() or\nnfs().
\n',
+ itemtype: 'method',
+ name: 'join',
+ params: [
+ {
+ name: 'list',
+ description: 'array of Strings to be joined
\n',
+ type: 'Array'
+ },
+ {
+ name: 'separator',
+ description: 'String to be placed between each item
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'joined String',
+ type: 'String'
+ },
+ example: [
+ "\n\n\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\n\n"
+ ],
+ alt: '"hello world!" displayed middle left of canvas.',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions'
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 42,
+ description:
+ 'This function is used to apply a regular expression to a piece of text,\nand return matching groups (elements found inside parentheses) as a\nString array. If there are no matches, a null value will be returned.\nIf no groups are specified in the regular expression, but the sequence\nmatches, an array of length 1 (with the matched text as the first element\nof the array) will be returned.\n
\nTo use the function, first check to see if the result is null. If the\nresult is null, then the sequence did not match at all. If the sequence\ndid match, an array is returned.\n
\nIf there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nElement [0] of a regular expression match returns the entire matching\nstring, and the match groups start at element [1] (the first group is [1],\nthe second [2], and so on).
\n',
+ itemtype: 'method',
+ name: 'match',
+ params: [
+ {
+ name: 'str',
+ description: 'the String to be searched
\n',
+ type: 'String'
+ },
+ {
+ name: 'regexp',
+ description: 'the regexp to be used for matching
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'Array of Strings found',
+ type: 'String[]'
+ },
+ example: [
+ "\n\n\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\n\n"
+ ],
+ alt: '"p5js*" displayed middle left of canvas.',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions'
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 83,
+ description:
+ 'This function is used to apply a regular expression to a piece of text,\nand return a list of matching groups (elements found inside parentheses)\nas a two-dimensional String array. If there are no matches, a null value\nwill be returned. If no groups are specified in the regular expression,\nbut the sequence matches, a two dimensional array is still returned, but\nthe second dimension is only of length one.\n
\nTo use the function, first check to see if the result is null. If the\nresult is null, then the sequence did not match at all. If the sequence\ndid match, a 2D array is returned.\n
\nIf there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nAssuming a loop with counter variable i, element [i][0] of a regular\nexpression match returns the entire matching string, and the match groups\nstart at element [i][1] (the first group is [i][1], the second [i][2],\nand so on).
\n',
+ itemtype: 'method',
+ name: 'matchAll',
+ params: [
+ {
+ name: 'str',
+ description: 'the String to be searched
\n',
+ type: 'String'
+ },
+ {
+ name: 'regexp',
+ description: 'the regexp to be used for matching
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: '2d Array of Strings found',
+ type: 'String[]'
+ },
+ example: [
+ "\n\n\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n\n"
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions'
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 130,
+ description:
+ 'Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.\n(NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter\nif greater than the current length of the number.\nFor example if number is 123.2 and left parameter passed is 4 which is greater than length of 123\n(integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than\nthe result will be 123.200.
\n',
+ itemtype: 'method',
+ name: 'nf',
+ return: {
+ description: 'formatted String',
+ type: 'String'
+ },
+ example: [
+ "\n\n\nlet myFont;\nfunction preload() {\n myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n background(200);\n let num1 = 321;\n let num2 = -1321;\n\n noStroke();\n fill(0);\n textFont(myFont);\n textSize(22);\n\n text(nf(num1, 4, 2), 10, 30);\n text(nf(num2, 4, 2), 10, 80);\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n}\n\n"
+ ],
+ alt: '"0321.00" middle top, -1321.00" middle bottom canvas',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions',
+ overloads: [
+ {
+ line: 130,
+ params: [
+ {
+ name: 'num',
+ description: 'the Number to format
\n',
+ type: 'Number|String'
+ },
+ {
+ name: 'left',
+ description:
+ 'number of digits to the left of the\n decimal point
\n',
+ type: 'Integer|String',
+ optional: true
+ },
+ {
+ name: 'right',
+ description:
+ 'number of digits to the right of the\n decimal point
\n',
+ type: 'Integer|String',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'formatted String',
+ type: 'String'
+ }
+ },
+ {
+ line: 178,
+ params: [
+ {
+ name: 'nums',
+ description: 'the Numbers to format
\n',
+ type: 'Array'
+ },
+ {
+ name: 'left',
+ description: '',
+ type: 'Integer|String',
+ optional: true
+ },
+ {
+ name: 'right',
+ description: '',
+ type: 'Integer|String',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'formatted Strings',
+ type: 'String[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 239,
+ description:
+ 'Utility function for formatting numbers into strings and placing\nappropriate commas to mark units of 1000. There are two versions: one\nfor formatting ints, and one for formatting an array of ints. The value\nfor the right parameter should always be a positive integer.
\n',
+ itemtype: 'method',
+ name: 'nfc',
+ return: {
+ description: 'formatted String',
+ type: 'String'
+ },
+ example: [
+ '\n\n\nfunction setup() {\n background(200);\n let num = 11253106.115;\n let numArr = [1, 1, 2];\n\n noStroke();\n fill(0);\n textSize(12);\n\n // Draw formatted numbers\n text(nfc(num, 4), 10, 30);\n text(nfc(numArr, 2), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n}\n\n'
+ ],
+ alt:
+ '"11,253,106.115" top middle and "1.00,1.00,2.00" displayed bottom mid',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions',
+ overloads: [
+ {
+ line: 239,
+ params: [
+ {
+ name: 'num',
+ description: 'the Number to format
\n',
+ type: 'Number|String'
+ },
+ {
+ name: 'right',
+ description:
+ 'number of digits to the right of the\n decimal point
\n',
+ type: 'Integer|String',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'formatted String',
+ type: 'String'
+ }
+ },
+ {
+ line: 277,
+ params: [
+ {
+ name: 'nums',
+ description: 'the Numbers to format
\n',
+ type: 'Array'
+ },
+ {
+ name: 'right',
+ description: '',
+ type: 'Integer|String',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'formatted Strings',
+ type: 'String[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 313,
+ description:
+ 'Utility function for formatting numbers into strings. Similar to nf() but\nputs a "+" in front of positive numbers and a "-" in front of negative\nnumbers. There are two versions: one for formatting floats, and one for\nformatting ints. The values for left, and right parameters\nshould always be positive integers.
\n',
+ itemtype: 'method',
+ name: 'nfp',
+ return: {
+ description: 'formatted String',
+ type: 'String'
+ },
+ example: [
+ '\n\n\nfunction setup() {\n background(200);\n let num1 = 11253106.115;\n let num2 = -11253106.115;\n\n noStroke();\n fill(0);\n textSize(12);\n\n // Draw formatted numbers\n text(nfp(num1, 4, 2), 10, 30);\n text(nfp(num2, 4, 2), 10, 80);\n\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n}\n\n'
+ ],
+ alt: '"+11253106.11" top middle and "-11253106.11" displayed bottom middle',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions',
+ overloads: [
+ {
+ line: 313,
+ params: [
+ {
+ name: 'num',
+ description: 'the Number to format
\n',
+ type: 'Number'
+ },
+ {
+ name: 'left',
+ description:
+ 'number of digits to the left of the decimal\n point
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'right',
+ description:
+ 'number of digits to the right of the\n decimal point
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'formatted String',
+ type: 'String'
+ }
+ },
+ {
+ line: 354,
+ params: [
+ {
+ name: 'nums',
+ description: 'the Numbers to format
\n',
+ type: 'Number[]'
+ },
+ {
+ name: 'left',
+ description: '',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'right',
+ description: '',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'formatted Strings',
+ type: 'String[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 375,
+ description:
+ 'Utility function for formatting numbers into strings. Similar to nf() but\nputs an additional "_" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes "-" (minus) sign.\nThe main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative\nnumber with some negative number (See the example to get a clear picture).\nThere are two versions: one for formatting float, and one for formatting int.\nThe values for the digits, left, and right parameters should always be positive integers.\n(IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using.\n(NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter\nif greater than the current length of the number.\nFor example if number is 123.2 and left parameter passed is 4 which is greater than length of 123\n(integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than\nthe result will be 123.200.
\n',
+ itemtype: 'method',
+ name: 'nfs',
+ return: {
+ description: 'formatted String',
+ type: 'String'
+ },
+ example: [
+ "\n\n\nlet myFont;\nfunction preload() {\n myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n background(200);\n let num1 = 321;\n let num2 = -1321;\n\n noStroke();\n fill(0);\n textFont(myFont);\n textSize(22);\n\n // nfs() aligns num1 (positive number) with num2 (negative number) by\n // adding a blank space in front of the num1 (positive number)\n // [left = 4] in num1 add one 0 in front, to align the digits with num2\n // [right = 2] in num1 and num2 adds two 0's after both numbers\n // To see the differences check the example of nf() too.\n text(nfs(num1, 4, 2), 10, 30);\n text(nfs(num2, 4, 2), 10, 80);\n // Draw dividing line\n stroke(120);\n line(0, 50, width, 50);\n}\n\n"
+ ],
+ alt: '"0321.00" top middle and "-1321.00" displayed bottom middle',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions',
+ overloads: [
+ {
+ line: 375,
+ params: [
+ {
+ name: 'num',
+ description: 'the Number to format
\n',
+ type: 'Number'
+ },
+ {
+ name: 'left',
+ description:
+ 'number of digits to the left of the decimal\n point
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'right',
+ description:
+ 'number of digits to the right of the\n decimal point
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'formatted String',
+ type: 'String'
+ }
+ },
+ {
+ line: 432,
+ params: [
+ {
+ name: 'nums',
+ description: 'the Numbers to format
\n',
+ type: 'Array'
+ },
+ {
+ name: 'left',
+ description: '',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'right',
+ description: '',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'formatted Strings',
+ type: 'String[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 453,
+ description:
+ 'The split() function maps to String.split(), it breaks a String into\npieces using a character or string as the delimiter. The delim parameter\nspecifies the character or characters that mark the boundaries between\neach piece. A String[] array is returned that contains each of the pieces.
\nThe splitTokens() function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.
\n',
+ itemtype: 'method',
+ name: 'split',
+ params: [
+ {
+ name: 'value',
+ description: 'the String to be split
\n',
+ type: 'String'
+ },
+ {
+ name: 'delim',
+ description: 'the String used to separate the data
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'Array of Strings',
+ type: 'String[]'
+ },
+ example: [
+ "\n\n\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n\n"
+ ],
+ alt: '"pat" top left, "Xio" mid left and "Alex" displayed bottom left',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions'
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 487,
+ description:
+ 'The splitTokens() function splits a String at one or many character\ndelimiters or "tokens." The delim parameter specifies the character or\ncharacters to be used as a boundary.\n
\nIf no delim characters are specified, any whitespace character is used to\nsplit. Whitespace characters include tab (\\t), line feed (\\n), carriage\nreturn (\\r), form feed (\\f), and space.
\n',
+ itemtype: 'method',
+ name: 'splitTokens',
+ params: [
+ {
+ name: 'value',
+ description: 'the String to be split
\n',
+ type: 'String'
+ },
+ {
+ name: 'delim',
+ description:
+ 'list of individual Strings that will be used as\n separators
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Array of Strings',
+ type: 'String[]'
+ },
+ example: [
+ '\n\n\nfunction setup() {\n let myStr = \'Mango, Banana, Lime\';\n let myStrArr = splitTokens(myStr, \',\');\n\n print(myStrArr); // prints : ["Mango"," Banana"," Lime"]\n}\n\n'
+ ],
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions'
+ },
+ {
+ file: 'src/utilities/string_functions.js',
+ line: 540,
+ description:
+ 'Removes whitespace characters from the beginning and end of a String. In\naddition to standard whitespace characters such as space, carriage return,\nand tab, this function also removes the Unicode "nbsp" character.
\n',
+ itemtype: 'method',
+ name: 'trim',
+ return: {
+ description: 'a trimmed String',
+ type: 'String'
+ },
+ example: [
+ "\n\n\nlet string = trim(' No new lines\\n ');\ntext(string + ' here', 2, 50);\n\n"
+ ],
+ alt: '"No new lines here" displayed center canvas',
+ class: 'p5',
+ module: 'Data',
+ submodule: 'String Functions',
+ overloads: [
+ {
+ line: 540,
+ params: [
+ {
+ name: 'str',
+ description: 'a String to be trimmed
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description: 'a trimmed String',
+ type: 'String'
+ }
+ },
+ {
+ line: 560,
+ params: [
+ {
+ name: 'strs',
+ description: 'an Array of Strings to be trimmed
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description: 'an Array of trimmed Strings',
+ type: 'String[]'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/utilities/time_date.js',
+ line: 10,
+ description:
+ 'p5.js communicates with the clock on your computer. The day() function\nreturns the current day as a value from 1 - 31.
\n',
+ itemtype: 'method',
+ name: 'day',
+ return: {
+ description: 'the current day',
+ type: 'Integer'
+ },
+ example: [
+ "\n\n\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\n\n"
+ ],
+ alt: 'Current day is displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Time & Date'
+ },
+ {
+ file: 'src/utilities/time_date.js',
+ line: 30,
+ description:
+ 'p5.js communicates with the clock on your computer. The hour() function\nreturns the current hour as a value from 0 - 23.
\n',
+ itemtype: 'method',
+ name: 'hour',
+ return: {
+ description: 'the current hour',
+ type: 'Integer'
+ },
+ example: [
+ "\n\n\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\n\n"
+ ],
+ alt: 'Current hour is displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Time & Date'
+ },
+ {
+ file: 'src/utilities/time_date.js',
+ line: 50,
+ description:
+ 'p5.js communicates with the clock on your computer. The minute() function\nreturns the current minute as a value from 0 - 59.
\n',
+ itemtype: 'method',
+ name: 'minute',
+ return: {
+ description: 'the current minute',
+ type: 'Integer'
+ },
+ example: [
+ "\n\n\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\n\n"
+ ],
+ alt: 'Current minute is displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Time & Date'
+ },
+ {
+ file: 'src/utilities/time_date.js',
+ line: 70,
+ description:
+ 'Returns the number of milliseconds (thousandths of a second) since\nstarting the program. This information is often used for timing events and\nanimation sequences.
\n',
+ itemtype: 'method',
+ name: 'millis',
+ return: {
+ description: 'the number of milliseconds since starting the program',
+ type: 'Number'
+ },
+ example: [
+ "\n\n\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n\n"
+ ],
+ alt: 'number of milliseconds since program has started displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Time & Date'
+ },
+ {
+ file: 'src/utilities/time_date.js',
+ line: 91,
+ description:
+ 'p5.js communicates with the clock on your computer. The month() function\nreturns the current month as a value from 1 - 12.
\n',
+ itemtype: 'method',
+ name: 'month',
+ return: {
+ description: 'the current month',
+ type: 'Integer'
+ },
+ example: [
+ "\n\n\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\n\n"
+ ],
+ alt: 'Current month is displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Time & Date'
+ },
+ {
+ file: 'src/utilities/time_date.js',
+ line: 113,
+ description:
+ 'p5.js communicates with the clock on your computer. The second() function\nreturns the current second as a value from 0 - 59.
\n',
+ itemtype: 'method',
+ name: 'second',
+ return: {
+ description: 'the current second',
+ type: 'Integer'
+ },
+ example: [
+ "\n\n\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\n\n"
+ ],
+ alt: 'Current second is displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Time & Date'
+ },
+ {
+ file: 'src/utilities/time_date.js',
+ line: 133,
+ description:
+ 'p5.js communicates with the clock on your computer. The year() function\nreturns the current year as an integer (2014, 2015, 2016, etc).
\n',
+ itemtype: 'method',
+ name: 'year',
+ return: {
+ description: 'the current year',
+ type: 'Integer'
+ },
+ example: [
+ "\n\n\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\n\n"
+ ],
+ alt: 'Current year is displayed',
+ class: 'p5',
+ module: 'IO',
+ submodule: 'Time & Date'
+ },
+ {
+ file: 'src/webgl/3d_primitives.js',
+ line: 13,
+ description: 'Draw a plane with given a width and height
\n',
+ itemtype: 'method',
+ name: 'plane',
+ params: [
+ {
+ name: 'width',
+ description: 'width of the plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'height',
+ description: 'height of the plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'detailX',
+ description:
+ 'Optional number of triangle\n subdivisions in x-dimension
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'detailY',
+ description:
+ 'Optional number of triangle\n subdivisions in y-dimension
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n plane(50, 50);\n}\n\n'
+ ],
+ alt:
+ 'Nothing displayed on canvas\nRotating interior view of a box with sides that change color.\n3d red and green gradient.\nRotating interior view of a cylinder with sides that change color.\nRotating view of a cylinder with sides that change color.\n3d red and green gradient.\nrotating view of a multi-colored cylinder with concave sides.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Primitives'
+ },
+ {
+ file: 'src/webgl/3d_primitives.js',
+ line: 97,
+ description: 'Draw a box with given width, height and depth
\n',
+ itemtype: 'method',
+ name: 'box',
+ params: [
+ {
+ name: 'width',
+ description: 'width of the box
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'Height',
+ description: 'height of the box
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'depth',
+ description: 'depth of the box
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'detailX',
+ description:
+ 'Optional number of triangle\n subdivisions in x-dimension
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'detailY',
+ description:
+ 'Optional number of triangle\n subdivisions in y-dimension
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(50);\n}\n\n'
+ ],
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Primitives'
+ },
+ {
+ file: 'src/webgl/3d_primitives.js',
+ line: 215,
+ description:
+ 'Draw a sphere with given radius.
\nDetailX and detailY determines the number of subdivisions in the x-dimension\nand the y-dimension of a sphere. More subdivisions make the sphere seem\nsmoother. The recommended maximum values are both 24. Using a value greater\nthan 24 may cause a warning or slow down the browser.
\n',
+ itemtype: 'method',
+ name: 'sphere',
+ params: [
+ {
+ name: 'radius',
+ description: 'radius of circle
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'detailX',
+ description: 'optional number of subdivisions in x-dimension
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'detailY',
+ description: 'optional number of subdivisions in y-dimension
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\n// draw a sphere with radius 40\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(205, 102, 94);\n sphere(40);\n}\n\n',
+ "\n\n\nlet detailX;\n// slide to see how detailX works\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n sphere(40, detailX.value(), 16);\n}\n\n",
+ "\n\n\nlet detailY;\n// slide to see how detailY works\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n sphere(40, 16, detailY.value());\n}\n\n"
+ ],
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Primitives'
+ },
+ {
+ file: 'src/webgl/3d_primitives.js',
+ line: 419,
+ description:
+ 'Draw a cylinder with given radius and height
\nDetailX and detailY determines the number of subdivisions in the x-dimension\nand the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother.\nThe recommended maximum value for detailX is 24. Using a value greater than 24\nmay cause a warning or slow down the browser.
\n',
+ itemtype: 'method',
+ name: 'cylinder',
+ params: [
+ {
+ name: 'radius',
+ description: 'radius of the surface
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'height',
+ description: 'height of the cylinder
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'detailX',
+ description:
+ 'number of subdivisions in x-dimension;\n default is 24
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'detailY',
+ description:
+ 'number of subdivisions in y-dimension;\n default is 1
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'bottomCap',
+ description: 'whether to draw the bottom of the cylinder
\n',
+ type: 'Boolean',
+ optional: true
+ },
+ {
+ name: 'topCap',
+ description: 'whether to draw the top of the cylinder
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n cylinder(20, 50);\n}\n\n',
+ "\n\n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n cylinder(20, 75, detailX.value(), 1);\n}\n\n",
+ "\n\n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(1, 16, 1);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n cylinder(20, 75, 16, detailY.value());\n}\n\n"
+ ],
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Primitives'
+ },
+ {
+ file: 'src/webgl/3d_primitives.js',
+ line: 554,
+ description:
+ 'Draw a cone with given radius and height
\nDetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a cone. More subdivisions make the cone seem smoother. The\nrecommended maximum value for detailX is 24. Using a value greater than 24\nmay cause a warning or slow down the browser.
\n',
+ itemtype: 'method',
+ name: 'cone',
+ params: [
+ {
+ name: 'radius',
+ description: 'radius of the bottom surface
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'height',
+ description: 'height of the cone
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'detailX',
+ description:
+ 'number of segments,\n the more segments the smoother geometry\n default is 24
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'detailY',
+ description:
+ 'number of segments,\n the more segments the smoother geometry\n default is 1
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'cap',
+ description: 'whether to draw the base of the cone
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n cone(40, 70);\n}\n\n',
+ "\n\n\n// slide to see how detailx works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 16, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n cone(30, 65, detailX.value(), 16);\n}\n\n",
+ "\n\n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n cone(30, 65, 16, detailY.value());\n}\n\n"
+ ],
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Primitives'
+ },
+ {
+ file: 'src/webgl/3d_primitives.js',
+ line: 669,
+ description:
+ 'Draw an ellipsoid with given radius
\nDetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother.\nAvoid detail number above 150, it may crash the browser.
\n',
+ itemtype: 'method',
+ name: 'ellipsoid',
+ params: [
+ {
+ name: 'radiusx',
+ description: 'x-radius of ellipsoid
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'radiusy',
+ description: 'y-radius of ellipsoid
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'radiusz',
+ description: 'z-radius of ellipsoid
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'detailX',
+ description:
+ 'number of segments,\n the more segments the smoother geometry\n default is 24. Avoid detail number above\n 150, it may crash the browser.
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'detailY',
+ description:
+ 'number of segments,\n the more segments the smoother geometry\n default is 16. Avoid detail number above\n 150, it may crash the browser.
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(205, 105, 94);\n ellipsoid(30, 40, 40);\n}\n\n',
+ "\n\n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(2, 24, 12);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 105, 94);\n rotateY(millis() / 1000);\n ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n\n",
+ "\n\n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(2, 24, 6);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 105, 9);\n rotateY(millis() / 1000);\n ellipsoid(30, 40, 40, 12, detailY.value());\n}\n\n\n"
+ ],
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Primitives'
+ },
+ {
+ file: 'src/webgl/3d_primitives.js',
+ line: 805,
+ description:
+ 'Draw a torus with given radius and tube radius
\nDetailX and detailY determine the number of subdivisions in the x-dimension and\nthe y-dimension of a torus. More subdivisions make the torus appear to be smoother.\nThe default and maximum values for detailX and detailY are 24 and 16, respectively.\nSetting them to relatively small values like 4 and 6 allows you to create new\nshapes other than a torus.
\n',
+ itemtype: 'method',
+ name: 'torus',
+ params: [
+ {
+ name: 'radius',
+ description: 'radius of the whole ring
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'tubeRadius',
+ description: 'radius of the tube
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'detailX',
+ description:
+ 'number of segments in x-dimension,\n the more segments the smoother geometry\n default is 24
\n',
+ type: 'Integer',
+ optional: true
+ },
+ {
+ name: 'detailY',
+ description:
+ 'number of segments in y-dimension,\n the more segments the smoother geometry\n default is 16
\n',
+ type: 'Integer',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n torus(30, 15);\n}\n\n',
+ "\n\n\n// slide to see how detailX works\nlet detailX;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailX = createSlider(3, 24, 3);\n detailX.position(10, height + 5);\n detailX.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n torus(30, 15, detailX.value(), 12);\n}\n\n",
+ "\n\n\n// slide to see how detailY works\nlet detailY;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n detailY = createSlider(3, 16, 3);\n detailY.position(10, height + 5);\n detailY.style('width', '80px');\n}\n\nfunction draw() {\n background(205, 102, 94);\n rotateY(millis() / 1000);\n torus(30, 15, 16, detailY.value());\n}\n\n"
+ ],
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Primitives'
+ },
+ {
+ file: 'src/webgl/interaction.js',
+ line: 11,
+ description:
+ 'Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking\nand dragging will rotate the camera position about the center of the sketch,\nright-clicking and dragging will pan the camera position without rotation,\nand using the mouse wheel (scrolling) will move the camera closer or further\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse movement along the X and Y axes. Calling\nthis function without parameters is equivalent to calling orbitControl(1,1).\nTo reverse direction of movement in either axis, enter a negative number\nfor sensitivity.
\n',
+ itemtype: 'method',
+ name: 'orbitControl',
+ params: [
+ {
+ name: 'sensitivityX',
+ description: 'sensitivity to mouse movement along X axis
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'sensitivityY',
+ description: 'sensitivity to mouse movement along Y axis
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'sensitivityZ',
+ description: 'sensitivity to scroll movement along Z axis
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n}\nfunction draw() {\n background(200);\n orbitControl();\n rotateY(0.5);\n box(30, 50);\n}\n\n'
+ ],
+ alt: 'Camera orbits around a box when mouse is hold-clicked & then moved.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Interaction'
+ },
+ {
+ file: 'src/webgl/interaction.js',
+ line: 145,
+ description:
+ 'debugMode() helps visualize 3D space by adding a grid to indicate where the\n‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z\ndirections. This function can be called without parameters to create a\ndefault grid and axes icon, or it can be called according to the examples\nabove to customize the size and position of the grid and/or axes icon. The\ngrid is drawn using the most recently set stroke color and weight. To\nspecify these parameters, add a call to stroke() and strokeWeight()\njust before the end of the draw() loop.
\nBy default, the grid will run through the origin (0,0,0) of the sketch\nalong the XZ plane\nand the axes icon will be offset from the origin. Both the grid and axes\nicon will be sized according to the current canvas size. Note that because the\ngrid runs parallel to the default camera view, it is often helpful to use\ndebugMode along with orbitControl to allow full view of the grid.
\n',
+ itemtype: 'method',
+ name: 'debugMode',
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n normalMaterial();\n debugMode();\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n // Press the spacebar to turn debugMode off!\n if (keyIsDown(32)) {\n noDebugMode();\n }\n}\n\n',
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n normalMaterial();\n debugMode(GRID);\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n',
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n normalMaterial();\n debugMode(AXES);\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n',
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n normalMaterial();\n debugMode(GRID, 100, 10, 0, 0, 0);\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n}\n\n',
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n normalMaterial();\n debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\n}\n\nfunction draw() {\n noStroke();\n background(200);\n orbitControl();\n box(15, 30);\n // set the stroke color and weight for the grid!\n stroke(255, 0, 150);\n strokeWeight(0.8);\n}\n\n'
+ ],
+ alt:
+ 'a 3D box is centered on a grid in a 3D sketch. an icon\nindicates the direction of each axis: a red line points +X,\na green line +Y, and a blue line +Z.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Interaction',
+ overloads: [
+ {
+ line: 145,
+ params: []
+ },
+ {
+ line: 278,
+ params: [
+ {
+ name: 'mode',
+ description: 'either GRID or AXES
\n',
+ type: 'Constant'
+ }
+ ]
+ },
+ {
+ line: 283,
+ params: [
+ {
+ name: 'mode',
+ description: '',
+ type: 'Constant'
+ },
+ {
+ name: 'gridSize',
+ description: 'size of one side of the grid
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'gridDivisions',
+ description: 'number of divisions in the grid
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'xOff',
+ description: 'X axis offset from origin (0,0,0)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'yOff',
+ description: 'Y axis offset from origin (0,0,0)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'zOff',
+ description: 'Z axis offset from origin (0,0,0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 293,
+ params: [
+ {
+ name: 'mode',
+ description: '',
+ type: 'Constant'
+ },
+ {
+ name: 'axesSize',
+ description: 'size of axes icon
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'xOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'yOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'zOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 302,
+ params: [
+ {
+ name: 'gridSize',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'gridDivisions',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'gridXOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'gridYOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'gridZOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'axesSize',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'axesXOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'axesYOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'axesZOff',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/interaction.js',
+ line: 353,
+ description: 'Turns off debugMode() in a 3D sketch.
\n',
+ itemtype: 'method',
+ name: 'noDebugMode',
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n normalMaterial();\n debugMode();\n}\n\nfunction draw() {\n background(200);\n orbitControl();\n box(15, 30);\n // Press the spacebar to turn debugMode off!\n if (keyIsDown(32)) {\n noDebugMode();\n }\n}\n\n'
+ ],
+ alt:
+ 'a 3D box is centered on a grid in a 3D sketch. an icon\nindicates the direction of each axis: a red line points +X,\na green line +Y, and a blue line +Z. the grid and icon disappear when the\nspacebar is pressed.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Interaction'
+ },
+ {
+ file: 'src/webgl/light.js',
+ line: 10,
+ description: 'Creates an ambient light with a color
\n',
+ itemtype: 'method',
+ name: 'ambientLight',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n ambientLight(150);\n ambientMaterial(250);\n noStroke();\n sphere(40);\n}\n\n'
+ ],
+ alt: 'evenly distributed light across a sphere',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Lights',
+ overloads: [
+ {
+ line: 10,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'red or hue value relative to\n the current color range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description:
+ 'green or saturation value\n relative to the current color range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description:
+ 'blue or brightness value\n relative to the current color range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'alpha',
+ description: 'the alpha value
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 44,
+ params: [
+ {
+ name: 'value',
+ description: 'a color string
\n',
+ type: 'String'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 50,
+ params: [
+ {
+ name: 'gray',
+ description: 'a gray value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'alpha',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 57,
+ params: [
+ {
+ name: 'values',
+ description:
+ 'an array containing the red,green,blue &\n and alpha components of the color
\n',
+ type: 'Number[]'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 64,
+ params: [
+ {
+ name: 'color',
+ description: 'the ambient light color
\n',
+ type: 'p5.Color'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/light.js',
+ line: 85,
+ description:
+ 'Set's the color of the specular highlight when using a specular material and\nspecular light.
\nThis method can be combined with specularMaterial() and shininess()\nfunctions to set specular highlights. The default color is white, ie\n(255, 255, 255), which is used if this method is not called before\nspecularMaterial(). If this method is called without specularMaterial(),\nThere will be no effect.
\nNote: specularColor is equivalent to the processing function\nlightSpecular.
\n',
+ itemtype: 'method',
+ name: 'specularColor',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n}\n\nfunction draw() {\n background(0);\n shininess(20);\n ambientLight(50);\n specularColor(255, 0, 0);\n pointLight(255, 0, 0, 0, -50, 50);\n specularColor(0, 255, 0);\n pointLight(0, 255, 0, 0, 50, 50);\n specularMaterial(255);\n sphere(40);\n}\n\n'
+ ],
+ alt: 'different specular light sources from top and bottom of canvas',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Lights',
+ overloads: [
+ {
+ line: 85,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'red or hue value relative to\n the current color range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description:
+ 'green or saturation value\n relative to the current color range
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description:
+ 'blue or brightness value\n relative to the current color range
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 132,
+ params: [
+ {
+ name: 'value',
+ description: 'a color string
\n',
+ type: 'String'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 138,
+ params: [
+ {
+ name: 'gray',
+ description: 'a gray value
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 144,
+ params: [
+ {
+ name: 'values',
+ description:
+ 'an array containing the red,green,blue &\n and alpha components of the color
\n',
+ type: 'Number[]'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 151,
+ params: [
+ {
+ name: 'color',
+ description: 'the ambient light color
\n',
+ type: 'p5.Color'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/light.js',
+ line: 170,
+ description:
+ 'Creates a directional light with a color and a direction
\n',
+ itemtype: 'method',
+ name: 'directionalLight',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n //move your mouse to change light direction\n let dirX = (mouseX / width - 0.5) * 2;\n let dirY = (mouseY / height - 0.5) * 2;\n directionalLight(250, 250, 250, -dirX, -dirY, -1);\n noStroke();\n sphere(40);\n}\n\n'
+ ],
+ alt: 'light source on canvas changeable with mouse position',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Lights',
+ overloads: [
+ {
+ line: 170,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'red or hue value (depending on the current\ncolor mode),
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: 'green or saturation value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description: 'blue or brightness value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'position',
+ description: 'the direction of the light
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 202,
+ params: [
+ {
+ name: 'color',
+ description:
+ 'color Array, CSS color string,\n or p5.Color value
\n',
+ type: 'Number[]|String|p5.Color'
+ },
+ {
+ name: 'x',
+ description: 'x axis direction
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y axis direction
\n',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: 'z axis direction
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 212,
+ params: [
+ {
+ name: 'color',
+ description: '',
+ type: 'Number[]|String|p5.Color'
+ },
+ {
+ name: 'position',
+ description: '',
+ type: 'p5.Vector'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 219,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'x',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/light.js',
+ line: 272,
+ description:
+ 'Creates a point light with a color and a light position
\n',
+ itemtype: 'method',
+ name: 'pointLight',
+ chainable: 1,
+ example: [
+ "\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n //move your mouse to change light position\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n // to set the light position,\n // think of the world's coordinate as:\n // -width/2,-height/2 -------- width/2,-height/2\n // | |\n // | 0,0 |\n // | |\n // -width/2,height/2--------width/2,height/2\n pointLight(250, 250, 250, locX, locY, 50);\n noStroke();\n sphere(40);\n}\n\n"
+ ],
+ alt: 'spot light on canvas changes position with mouse',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Lights',
+ overloads: [
+ {
+ line: 272,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'red or hue value (depending on the current\ncolor mode),
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: 'green or saturation value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description: 'blue or brightness value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'x',
+ description: 'x axis position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y axis position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: 'z axis position
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 313,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'position',
+ description: 'the position of the light
\n',
+ type: 'p5.Vector'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 322,
+ params: [
+ {
+ name: 'color',
+ description:
+ 'color Array, CSS color string,\nor p5.Color value
\n',
+ type: 'Number[]|String|p5.Color'
+ },
+ {
+ name: 'x',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 332,
+ params: [
+ {
+ name: 'color',
+ description: '',
+ type: 'Number[]|String|p5.Color'
+ },
+ {
+ name: 'position',
+ description: '',
+ type: 'p5.Vector'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/light.js',
+ line: 378,
+ description:
+ '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.
\n',
+ itemtype: 'method',
+ name: 'lights',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n lights();\n rotateX(millis() / 1000);\n rotateY(millis() / 1000);\n rotateZ(millis() / 1000);\n box();\n}\n\n'
+ ],
+ alt: 'the light is partially ambient and partially directional',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Lights'
+ },
+ {
+ file: 'src/webgl/light.js',
+ line: 409,
+ description:
+ 'Sets the falloff rates for point lights. It affects only the elements which are created after it in the code.\nThe default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:
\nd = distance from light position to vertex position
\nfalloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)
\n',
+ itemtype: 'method',
+ name: 'lightFalloff',
+ params: [
+ {
+ name: 'constant',
+ description: 'constant value for determining falloff
\n',
+ type: 'Number'
+ },
+ {
+ name: 'linear',
+ description: 'linear value for determining falloff
\n',
+ type: 'Number'
+ },
+ {
+ name: 'quadratic',
+ description: 'quadratic value for determining falloff
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n}\nfunction draw() {\n background(0);\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n translate(-25, 0, 0);\n lightFalloff(1, 0, 0);\n pointLight(250, 250, 250, locX, locY, 50);\n sphere(20);\n translate(50, 0, 0);\n lightFalloff(0.9, 0.01, 0);\n pointLight(250, 250, 250, locX, locY, 50);\n sphere(20);\n}\n\n'
+ ],
+ alt:
+ 'Two spheres with different falloff values show different intensity of light',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Lights'
+ },
+ {
+ file: 'src/webgl/light.js',
+ line: 495,
+ description:
+ 'Creates a spotlight with a given color, position, direction of light,\nangle and concentration. Here, angle refers to the opening or aperture\nof the cone of the spotlight, and concentration is used to focus the\nlight towards the center. Both angle and concentration are optional, but if\nyou want to provide concentration, you will also have to specify the angle.
\n',
+ itemtype: 'method',
+ name: 'spotLight',
+ chainable: 1,
+ example: [
+ "\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('perPixelLighting', true);\n}\nfunction draw() {\n background(0);\n //move your mouse to change light position\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n // to set the light position,\n // think of the world's coordinate as:\n // -width/2,-height/2 -------- width/2,-height/2\n // | |\n // | 0,0 |\n // | |\n // -width/2,height/2--------width/2,height/2\n ambientLight(50);\n spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);\n noStroke();\n sphere(40);\n}\n\n"
+ ],
+ alt: 'Spot light on a sphere which changes position with mouse',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Lights',
+ overloads: [
+ {
+ line: 495,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'red or hue value (depending on the current\ncolor mode),
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: 'green or saturation value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description: 'blue or brightness value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'x',
+ description: 'x axis position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y axis position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: 'z axis position
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rx',
+ description: 'x axis direction of light
\n',
+ type: 'Number'
+ },
+ {
+ name: 'ry',
+ description: 'y axis direction of light
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rz',
+ description: 'z axis direction of light
\n',
+ type: 'Number'
+ },
+ {
+ name: 'angle',
+ description:
+ 'optional parameter for angle. Defaults to PI/3
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'conc',
+ description:
+ 'optional parameter for concentration. Defaults to 100
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 547,
+ params: [
+ {
+ name: 'color',
+ description:
+ 'color Array, CSS color string,\nor p5.Color value
\n',
+ type: 'Number[]|String|p5.Color'
+ },
+ {
+ name: 'position',
+ description: 'the position of the light
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'direction',
+ description: 'the direction of the light
\n',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'angle',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'conc',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 556,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'position',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'direction',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'angle',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'conc',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 566,
+ params: [
+ {
+ name: 'color',
+ description: '',
+ type: 'Number[]|String|p5.Color'
+ },
+ {
+ name: 'x',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'direction',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'angle',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'conc',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 576,
+ params: [
+ {
+ name: 'color',
+ description: '',
+ type: 'Number[]|String|p5.Color'
+ },
+ {
+ name: 'position',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'rx',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'ry',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'rz',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'angle',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'conc',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 586,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'x',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'direction',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'angle',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'conc',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 598,
+ params: [
+ {
+ name: 'v1',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'v3',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'position',
+ description: '',
+ type: 'p5.Vector'
+ },
+ {
+ name: 'rx',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'ry',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'rz',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'angle',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'conc',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ },
+ {
+ line: 610,
+ params: [
+ {
+ name: 'color',
+ description: '',
+ type: 'Number[]|String|p5.Color'
+ },
+ {
+ name: 'x',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'rx',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'ry',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'rz',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'angle',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'conc',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/light.js',
+ line: 835,
+ description:
+ 'This function will remove all the lights from the sketch for the\nsubsequent materials rendered. It affects all the subsequent methods.\nCalls to lighting methods made after noLights() will re-enable lights\nin the sketch.
\n',
+ itemtype: 'method',
+ name: 'noLights',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n noStroke();\n\n ambientLight(150, 0, 0);\n translate(-25, 0, 0);\n ambientMaterial(250);\n sphere(20);\n\n noLights();\n ambientLight(0, 150, 0);\n translate(50, 0, 0);\n ambientMaterial(250);\n sphere(20);\n}\n\n'
+ ],
+ alt: 'Two spheres showing different colors',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Lights'
+ },
+ {
+ file: 'src/webgl/loading.js',
+ line: 12,
+ description:
+ 'Load a 3d model from an OBJ or STL file.\n
\nloadModel() should be placed inside of preload().\nThis allows the model to load fully before the rest of your code is run.\n
\nOne of the limitations of the OBJ and STL format is that it doesn't have a built-in\nsense of scale. This means that models exported from different programs might\nbe very different sizes. If your model isn't displaying, try calling\nloadModel() with the normalized parameter set to true. This will resize the\nmodel to a scale appropriate for p5. You can also make additional changes to\nthe final size of your model with the scale() function.
\nAlso, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.
\n',
+ itemtype: 'method',
+ name: 'loadModel',
+ return: {
+ description: 'the p5.Geometry object',
+ type: 'p5.Geometry'
+ },
+ example: [
+ "\n\n\n//draw a spinning octahedron\nlet octahedron;\n\nfunction preload() {\n octahedron = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n model(octahedron);\n}\n\n",
+ "\n\n\n//draw a spinning teapot\nlet teapot;\n\nfunction preload() {\n // Load model with normalise parameter set to true\n teapot = loadModel('assets/teapot.obj', true);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n scale(0.4); // Scaled to make model fit into canvas\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n normalMaterial(); // For effect\n model(teapot);\n}\n\n"
+ ],
+ alt: 'Vertically rotating 3-d teapot with red, green and blue gradient.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Models',
+ overloads: [
+ {
+ line: 12,
+ params: [
+ {
+ name: 'path',
+ description: 'Path of the model to be loaded
\n',
+ type: 'String'
+ },
+ {
+ name: 'normalize',
+ description:
+ 'If true, scale the model to a\n standardized size when loading
\n',
+ type: 'Boolean'
+ },
+ {
+ name: 'successCallback',
+ description:
+ 'Function to be called\n once the model is loaded. Will be passed\n the 3D model object.
\n',
+ type: 'function(p5.Geometry)',
+ optional: true
+ },
+ {
+ name: 'failureCallback',
+ description:
+ 'called with event error if\n the model fails to load.
\n',
+ type: 'Function(Event)',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the p5.Geometry object',
+ type: 'p5.Geometry'
+ }
+ },
+ {
+ line: 94,
+ params: [
+ {
+ name: 'path',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'successCallback',
+ description: '',
+ type: 'function(p5.Geometry)',
+ optional: true
+ },
+ {
+ name: 'failureCallback',
+ description: '',
+ type: 'Function(Event)',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'the p5.Geometry object',
+ type: 'p5.Geometry'
+ }
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/loading.js',
+ line: 170,
+ description:
+ 'Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:
\nv -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5
\nf 4 3 2 1
\n',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Models'
+ },
+ {
+ file: 'src/webgl/loading.js',
+ line: 279,
+ description:
+ 'STL files can be of two types, ASCII and Binary,
\nWe need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.
\n',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Models'
+ },
+ {
+ file: 'src/webgl/loading.js',
+ line: 306,
+ description:
+ 'This function checks if the file is in ASCII format or in Binary format
\nIt is done by searching keyword solid at the start of the file.
\nAn ASCII STL data must begin with solid as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the d are known to be\nplentiful. So, check the first 5 bytes for solid.
\nSeveral encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for solid to start anywhere after those prefixes.
\n',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Models'
+ },
+ {
+ file: 'src/webgl/loading.js',
+ line: 333,
+ description:
+ 'This function matches the query at the provided offset
\n',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Models'
+ },
+ {
+ file: 'src/webgl/loading.js',
+ line: 345,
+ description:
+ 'This function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL
\nCurrently there is no support for the colors provided in STL files.
\n',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Models'
+ },
+ {
+ file: 'src/webgl/loading.js',
+ line: 435,
+ description:
+ 'ASCII STL file starts with solid 'nameOfFile'\nThen contain the normal of the face, starting with facet normal\nNext contain a keyword indicating the start of face vertex, outer loop\nNext comes the three vertex, starting with vertex x y z\nVertices ends with endloop\nFace ends with endfacet\nNext face starts with facet normal\nThe end of the file is indicated by endsolid
\n',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Models'
+ },
+ {
+ file: 'src/webgl/loading.js',
+ line: 579,
+ description: 'Render a 3d model to the screen.
\n',
+ itemtype: 'method',
+ name: 'model',
+ params: [
+ {
+ name: 'model',
+ description: 'Loaded 3d model to be rendered
\n',
+ type: 'p5.Geometry'
+ }
+ ],
+ example: [
+ "\n\n\n//draw a spinning octahedron\nlet octahedron;\n\nfunction preload() {\n octahedron = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n model(octahedron);\n}\n\n"
+ ],
+ alt: 'Vertically rotating 3-d octahedron.',
+ class: 'p5',
+ module: 'Shape',
+ submodule: '3D Models'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 12,
+ description:
+ 'Loads a custom shader from the provided vertex and fragment\nshader paths. The shader files are loaded asynchronously in the\nbackground, so this method should be used in preload().
\nFor now, there are three main types of shaders. p5 will automatically\nsupply appropriate vertices, normals, colors, and lighting attributes\nif the parameters defined in the shader match the names.
\n',
+ itemtype: 'method',
+ name: 'loadShader',
+ params: [
+ {
+ name: 'vertFilename',
+ description:
+ 'path to file containing vertex shader\nsource code
\n',
+ type: 'String'
+ },
+ {
+ name: 'fragFilename',
+ description:
+ 'path to file containing fragment shader\nsource code
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description:
+ 'callback to be executed after loadShader\ncompletes. On success, the Shader object is passed as the first argument.
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'a shader object created from the provided\nvertex and fragment shader files.',
+ type: 'p5.Shader'
+ },
+ example: [
+ "\n\n\nlet mandel;\nfunction preload() {\n // load the shader definitions from files\n mandel = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n // use the shader\n shader(mandel);\n noStroke();\n mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n}\n\nfunction draw() {\n mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n"
+ ],
+ alt: 'zooming Mandelbrot set. a colorful, infinitely detailed fractal.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 111,
+ itemtype: 'method',
+ name: 'createShader',
+ params: [
+ {
+ name: 'vertSrc',
+ description: 'source code for the vertex shader
\n',
+ type: 'String'
+ },
+ {
+ name: 'fragSrc',
+ description: 'source code for the fragment shader
\n',
+ type: 'String'
+ }
+ ],
+ return: {
+ description:
+ 'a shader object created from the provided\nvertex and fragment shaders.',
+ type: 'p5.Shader'
+ },
+ example: [
+ "\n\n\n// the 'varying's are shared between both vertex & fragment shaders\nlet varying = 'precision highp float; varying vec2 vPos;';\n\n// the vertex shader is called for each vertex\nlet vs =\n varying +\n 'attribute vec3 aPosition;' +\n 'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n\n// the fragment shader is called for each pixel\nlet fs =\n varying +\n 'uniform vec2 p;' +\n 'uniform float r;' +\n 'const int I = 500;' +\n 'void main() {' +\n ' vec2 c = p + vPos * r, z = c;' +\n ' float n = 0.0;' +\n ' for (int i = I; i > 0; i --) {' +\n ' if(z.x*z.x+z.y*z.y > 4.0) {' +\n ' n = float(i)/float(I);' +\n ' break;' +\n ' }' +\n ' z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n ' }' +\n ' gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n '}';\n\nlet mandel;\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // create and initialize the shader\n mandel = createShader(vs, fs);\n shader(mandel);\n noStroke();\n\n // 'p' is the center point of the Mandelbrot image\n mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n}\n\nfunction draw() {\n // 'r' is the size of the image in Mandelbrot-space\n mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n"
+ ],
+ alt: 'zooming Mandelbrot set. a colorful, infinitely detailed fractal.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 179,
+ description:
+ 'The shader() function lets the user provide a custom shader\nto fill in shapes in WEBGL mode. Users can create their\nown shaders by loading vertex and fragment shaders with\nloadShader().
\n',
+ itemtype: 'method',
+ name: 'shader',
+ chainable: 1,
+ params: [
+ {
+ name: 's',
+ description:
+ 'the desired p5.Shader to use for rendering\nshapes.
\n',
+ type: 'p5.Shader',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\n\n// Click within the image to toggle\n// the shader used by the quad shape\n// Note: for an alternative approach to the same example,\n// involving changing uniforms please refer to:\n// https://p5js.org/reference/#/p5.Shader/setUniform\n\nlet redGreen;\nlet orangeBlue;\nlet showRedGreen = false;\n\nfunction preload() {\n // note that we are using two instances\n // of the same vertex and fragment shaders\n redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // initialize the colors for redGreen shader\n shader(redGreen);\n redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);\n redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);\n\n // initialize the colors for orangeBlue shader\n shader(orangeBlue);\n orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);\n orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);\n\n noStroke();\n}\n\nfunction draw() {\n // update the offset values for each shader,\n // moving orangeBlue in vertical and redGreen\n // in horizontal direction\n orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);\n redGreen.setUniform('offset', [sin(millis() / 2000), 1]);\n\n if (showRedGreen === true) {\n shader(redGreen);\n } else {\n shader(orangeBlue);\n }\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\nfunction mouseClicked() {\n showRedGreen = !showRedGreen;\n}\n\n"
+ ],
+ alt:
+ '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.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 270,
+ description:
+ 'This function restores the default shaders in WEBGL mode. Code that runs\nafter resetShader() will not be affected by previously defined\nshaders. Should be run after shader().
\n',
+ itemtype: 'method',
+ name: 'resetShader',
+ chainable: 1,
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 283,
+ description:
+ 'Normal material for geometry. You can view all\npossible materials in this\nexample.
\n',
+ itemtype: 'method',
+ name: 'normalMaterial',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n normalMaterial();\n sphere(40);\n}\n\n'
+ ],
+ alt: 'Red, green and blue gradient.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 321,
+ description:
+ 'Texture for geometry. You can view other possible materials in this\nexample.
\n',
+ itemtype: 'method',
+ name: 'texture',
+ params: [
+ {
+ name: 'tex',
+ description:
+ '2-dimensional graphics\n to render as texture
\n',
+ type: 'p5.Image|p5.MediaElement|p5.Graphics'
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(0);\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n //pass image as texture\n texture(img);\n box(200, 200, 200);\n}\n\n\n\n\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n pg = createGraphics(200, 200);\n pg.textSize(75);\n}\n\nfunction draw() {\n background(0);\n pg.background(255);\n pg.text('hello!', 0, 100);\n //pass image as texture\n texture(pg);\n rotateX(0.5);\n noStroke();\n plane(50);\n}\n\n\n\n\n\nlet vid;\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n vid.hide();\n}\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(0);\n //pass video frame as texture\n texture(vid);\n rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n vid.loop();\n}\n\n"
+ ],
+ alt:
+ 'Rotating view of many images umbrella and grid roof on a 3d plane\nblack canvas\nblack canvas',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 422,
+ description:
+ 'Sets the coordinate space for texture mapping. The default mode is IMAGE\nwhich refers to the actual coordinates of the image.\nNORMAL refers to a normalized space of values ranging from 0 to 1.\nThis function only works in WEBGL mode.
\nWith IMAGE, if an image is 100 x 200 pixels, mapping the image onto the entire\nsize of a quad would require the points (0,0) (100, 0) (100,200) (0,200).\nThe same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1).
\n',
+ itemtype: 'method',
+ name: 'textureMode',
+ params: [
+ {
+ name: 'mode',
+ description: 'either IMAGE or NORMAL
\n',
+ type: 'Constant'
+ }
+ ],
+ example: [
+ "\n\n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n texture(img);\n textureMode(NORMAL);\n beginShape();\n vertex(-50, -50, 0, 0);\n vertex(50, -50, 1, 0);\n vertex(50, 50, 1, 1);\n vertex(-50, 50, 0, 1);\n endShape();\n}\n\n"
+ ],
+ alt: 'the underside of a white umbrella and gridded ceiling above',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 501,
+ description:
+ 'Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 - 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.
\nCLAMP causes the pixels at the edge of the texture to extend to the bounds\nREPEAT causes the texture to tile repeatedly until reaching the bounds\nMIRROR works similarly to REPEAT but it flips the texture with every new tile
\nREPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).
\nThis method will affect all textures in your sketch until a subsequent\ntextureWrap call is made.
\nIf only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.
\n',
+ itemtype: 'method',
+ name: 'textureWrap',
+ params: [
+ {
+ name: 'wrapX',
+ description: 'either CLAMP, REPEAT, or MIRROR
\n',
+ type: 'Constant'
+ },
+ {
+ name: 'wrapY',
+ description: 'either CLAMP, REPEAT, or MIRROR
\n',
+ type: 'Constant',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\n\nlet img;\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n textureWrap(MIRROR);\n}\n\nfunction draw() {\n background(0);\n\n let dX = mouseX;\n let dY = mouseY;\n\n let u = lerp(1.0, 2.0, dX);\n let v = lerp(1.0, 2.0, dY);\n\n scale(width / 2);\n\n texture(img);\n\n beginShape(TRIANGLES);\n vertex(-1, -1, 0, 0, 0);\n vertex(1, -1, 0, u, 0);\n vertex(1, 1, 0, u, v);\n\n vertex(1, 1, 0, u, v);\n vertex(-1, 1, 0, 0, v);\n vertex(-1, -1, 0, 0, 0);\n endShape();\n}\n\n"
+ ],
+ alt: 'an image of the rocky mountains repeated in mirrored tiles',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 574,
+ description:
+ 'Ambient material for geometry with a given color. You can view all\npossible materials in this\nexample.
\n',
+ itemtype: 'method',
+ name: 'ambientMaterial',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n noStroke();\n ambientLight(200);\n ambientMaterial(70, 130, 230);\n sphere(40);\n}\n\n'
+ ],
+ alt: 'radiating light source from top right of canvas',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material',
+ overloads: [
+ {
+ line: 574,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'gray value, red or hue value\n (depending on the current color mode),
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: 'green or saturation value
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'v3',
+ description: 'blue or brightness value
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'a',
+ description: 'opacity
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 605,
+ params: [
+ {
+ name: 'color',
+ description: 'color, color Array, or CSS color string
\n',
+ type: 'Number[]|String|p5.Color'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 625,
+ description:
+ 'Sets the emissive color of the material used for geometry drawn to\nthe screen. This is a misnomer in the sense that the material does not\nactually emit light that effects surrounding polygons. Instead,\nit gives the appearance that the object is glowing. An emissive material\nwill display at full strength even if there is no light for it to reflect.
\n',
+ itemtype: 'method',
+ name: 'emissiveMaterial',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n noStroke();\n ambientLight(0);\n emissiveMaterial(130, 230, 0);\n sphere(40);\n}\n\n'
+ ],
+ alt: 'radiating light source from top right of canvas',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material',
+ overloads: [
+ {
+ line: 625,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'gray value, red or hue value\n (depending on the current color mode),
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: 'green or saturation value
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'v3',
+ description: 'blue or brightness value
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'a',
+ description: 'opacity
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 657,
+ params: [
+ {
+ name: 'color',
+ description: 'color, color Array, or CSS color string
\n',
+ type: 'Number[]|String|p5.Color'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 677,
+ description:
+ 'Specular material for geometry with a given color. You can view all\npossible materials in this\nexample.
\n',
+ itemtype: 'method',
+ name: 'specularMaterial',
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n noStroke();\n ambientLight(50);\n pointLight(250, 250, 250, 100, 100, 30);\n specularMaterial(250);\n sphere(40);\n}\n\n'
+ ],
+ alt: 'diffused radiating light source from top right of canvas',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material',
+ overloads: [
+ {
+ line: 677,
+ params: [
+ {
+ name: 'v1',
+ description:
+ 'gray value, red or hue value\n (depending on the current color mode),
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: 'green or saturation value
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'v3',
+ description: 'blue or brightness value
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'a',
+ description: 'opacity
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1
+ },
+ {
+ line: 709,
+ params: [
+ {
+ name: 'color',
+ description: 'color Array, or CSS color string
\n',
+ type: 'Number[]|String|p5.Color'
+ }
+ ],
+ chainable: 1
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/material.js',
+ line: 729,
+ description:
+ 'Sets the amount of gloss in the surface of shapes.\nUsed in combination with specularMaterial() in setting\nthe material properties of shapes. The default and minimum value is 1.
\n',
+ itemtype: 'method',
+ name: 'shininess',
+ params: [
+ {
+ name: 'shine',
+ description:
+ 'Degree of Shininess.\n Defaults to 1.
\n',
+ type: 'Number'
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(0);\n noStroke();\n let locX = mouseX - width / 2;\n let locY = mouseY - height / 2;\n ambientLight(60, 60, 60);\n pointLight(255, 255, 255, locX, locY, 50);\n specularMaterial(250);\n translate(-25, 0, 0);\n shininess(1);\n sphere(20);\n translate(50, 0, 0);\n shininess(20);\n sphere(20);\n}\n\n'
+ ],
+ alt: 'Shininess on Camera changes position with mouse',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 13,
+ description:
+ 'Sets the camera position for a 3D sketch. Parameters for this function define\nthe position for the camera, the center of the sketch (where the camera is\npointing), and an up direction (the orientation of the camera).
\nThis function simulates the movements of the camera, allowing objects to be\nviewed from various angles. Remember, it does not move the objects themselves\nbut the camera instead. For example when centerX value is positive, the camera\nis rotating to the right side of the sketch, so the object would seem like\nmoving to the left.
\nSee this example to view the position of your camera.
\nWhen called with no arguments, this function creates a default camera\nequivalent to\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
\n',
+ itemtype: 'method',
+ name: 'camera',
+ params: [
+ {
+ name: 'x',
+ description: 'camera position value on x axis
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'y',
+ description: 'camera position value on y axis
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'z',
+ description: 'camera position value on z axis
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'centerX',
+ description: 'x coordinate representing center of the sketch
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'centerY',
+ description: 'y coordinate representing center of the sketch
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'centerZ',
+ description: 'z coordinate representing center of the sketch
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'upX',
+ description:
+ 'x component of direction 'up' from camera
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'upY',
+ description:
+ 'y component of direction 'up' from camera
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'upZ',
+ description:
+ 'z component of direction 'up' from camera
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n background(204);\n //move the camera away from the plane by a sin wave\n camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);\n plane(10, 10);\n}\n\n',
+ "\n\n\n//move slider to see changes!\n//sliders control the first 6 parameters of camera()\nlet sliderGroup = [];\nlet X;\nlet Y;\nlet Z;\nlet centerX;\nlet centerY;\nlet centerZ;\nlet h = 20;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n //create sliders\n for (var i = 0; i < 6; i++) {\n if (i === 2) {\n sliderGroup[i] = createSlider(10, 400, 200);\n } else {\n sliderGroup[i] = createSlider(-400, 400, 0);\n }\n h = map(i, 0, 6, 5, 85);\n sliderGroup[i].position(10, height + h);\n sliderGroup[i].style('width', '80px');\n }\n}\n\nfunction draw() {\n background(60);\n // assigning sliders' value to each parameters\n X = sliderGroup[0].value();\n Y = sliderGroup[1].value();\n Z = sliderGroup[2].value();\n centerX = sliderGroup[3].value();\n centerY = sliderGroup[4].value();\n centerZ = sliderGroup[5].value();\n camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n stroke(255);\n fill(255, 102, 94);\n box(85);\n}\n\n"
+ ],
+ alt: 'White square repeatedly grows to fill canvas and then shrinks.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 112,
+ description:
+ 'Sets a perspective projection for the camera in a 3D sketch. This projection\nrepresents depth through foreshortening: objects that are close to the camera\nappear their actual size while those that are further away from the camera\nappear smaller. The parameters to this function define the viewing frustum\n(the truncated pyramid within which objects are seen by the camera) through\nvertical field of view, aspect ratio (usually width/height), and near and far\nclipping planes.
\nWhen called with no arguments, the defaults\nprovided are equivalent to\nperspective(PI/3.0, width/height, eyeZ/10.0, eyeZ10.0), where eyeZ\nis equal to ((height/2.0) / tan(PI60.0/360.0));
\n',
+ itemtype: 'method',
+ name: 'perspective',
+ params: [
+ {
+ name: 'fovy',
+ description:
+ 'camera frustum vertical field of view,\n from bottom to top of view, in angleMode units
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'aspect',
+ description: 'camera frustum aspect ratio
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'near',
+ description: 'frustum near plane length
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'far',
+ description: 'frustum far plane length
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ '\n\n\n//drag the mouse to look around!\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n perspective(PI / 3.0, width / height, 0.1, 500);\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(-0.3);\n rotateY(-0.2);\n translate(0, 0, -50);\n\n push();\n translate(-15, 0, sin(frameCount / 30) * 95);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 95);\n box(30);\n pop();\n}\n\n'
+ ],
+ alt:
+ 'two colored 3D boxes move back and forth, rotating as mouse is dragged.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 173,
+ description:
+ 'Sets an orthographic projection for the camera in a 3D sketch and defines a\nbox-shaped viewing frustum within which objects are seen. In this projection,\nall objects with the same dimension appear the same size, regardless of\nwhether they are near or far from the camera. The parameters to this\nfunction specify the viewing frustum where left and right are the minimum and\nmaximum x values, top and bottom are the minimum and maximum y values, and near\nand far are the minimum and maximum z values. If no parameters are given, the\ndefault is used: ortho(-width/2, width/2, -height/2, height/2).
\n',
+ itemtype: 'method',
+ name: 'ortho',
+ params: [
+ {
+ name: 'left',
+ description: 'camera frustum left plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'right',
+ description: 'camera frustum right plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'bottom',
+ description: 'camera frustum bottom plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'top',
+ description: 'camera frustum top plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'near',
+ description: 'camera frustum near plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'far',
+ description: 'camera frustum far plane
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\n\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n background(200);\n orbitControl();\n normalMaterial();\n\n rotateX(0.2);\n rotateY(-0.2);\n push();\n translate(-15, 0, sin(frameCount / 30) * 65);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\n box(30);\n pop();\n}\n\n"
+ ],
+ alt:
+ 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 230,
+ description:
+ 'Sets a perspective matrix as defined by the parameters.
\nA frustum is a geometric form: a pyramid with its top\ncut off. With the viewer's eye at the imaginary top of\nthe pyramid, the six planes of the frustum act as clipping\nplanes when rendering a 3D view. Thus, any form inside the\nclipping planes is visible; anything outside\nthose planes is not visible.
\nSetting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\nperspective().
\n',
+ itemtype: 'method',
+ name: 'frustum',
+ params: [
+ {
+ name: 'left',
+ description: 'camera frustum left plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'right',
+ description: 'camera frustum right plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'bottom',
+ description: 'camera frustum bottom plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'top',
+ description: 'camera frustum top plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'near',
+ description: 'camera frustum near plane
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'far',
+ description: 'camera frustum far plane
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ chainable: 1,
+ example: [
+ "\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n setAttributes('antialias', true);\n frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\nfunction draw() {\n background(200);\n orbitControl();\n strokeWeight(10);\n stroke(0, 0, 255);\n noFill();\n\n rotateY(-0.2);\n rotateX(-0.3);\n push();\n translate(-15, 0, sin(frameCount / 30) * 25);\n box(30);\n pop();\n push();\n translate(15, 0, sin(frameCount / 30 + PI) * 25);\n box(30);\n pop();\n}\n\n"
+ ],
+ alt:
+ 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 297,
+ description:
+ 'Creates a new p5.Camera object and tells the\nrenderer to use that camera.\nReturns the p5.Camera object.
\n',
+ itemtype: 'method',
+ name: 'createCamera',
+ return: {
+ description: 'The newly created camera object.',
+ type: 'p5.Camera'
+ },
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 408,
+ description:
+ 'Sets a perspective projection for a p5.Camera object and sets parameters\nfor that projection according to perspective()\nsyntax.
\n',
+ itemtype: 'method',
+ name: 'perspective',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 488,
+ description:
+ 'Sets an orthographic projection for a p5.Camera object and sets parameters\nfor that projection according to ortho() syntax.
\n',
+ itemtype: 'method',
+ name: 'ortho',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 547,
+ itemtype: 'method',
+ name: 'frustum',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 652,
+ description:
+ 'Panning rotates the camera view to the left and right.
\n',
+ itemtype: 'method',
+ name: 'pan',
+ params: [
+ {
+ name: 'angle',
+ description:
+ 'amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n // set initial pan angle\n cam.pan(-0.8);\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.pan(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n"
+ ],
+ alt:
+ 'camera view pans left and right across a series of rotating 3D boxes.',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 711,
+ description: 'Tilting rotates the camera view up and down.
\n',
+ itemtype: 'method',
+ name: 'tilt',
+ params: [
+ {
+ name: 'angle',
+ description:
+ 'amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\n\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n // set initial tilt\n cam.tilt(-0.8);\n}\n\nfunction draw() {\n background(200);\n\n // pan camera according to angle 'delta'\n cam.tilt(delta);\n\n // every 160 frames, switch direction\n if (frameCount % 160 === 0) {\n delta *= -1;\n }\n\n rotateY(frameCount * 0.01);\n translate(0, -100, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n translate(0, 35, 0);\n box(20);\n}\n\n"
+ ],
+ alt: 'camera view tilts up and down across a series of rotating 3D boxes.',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 769,
+ description:
+ 'Reorients the camera to look at a position in world space.
\n',
+ itemtype: 'method',
+ name: 'lookAt',
+ params: [
+ {
+ name: 'x',
+ description: 'x position of a point in world space
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y position of a point in world space
\n',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: 'z position of a point in world space
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ '\n\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n}\n\nfunction draw() {\n background(200);\n\n // look at a new random point every 60 frames\n if (frameCount % 60 === 0) {\n cam.lookAt(random(-100, 100), random(-50, 50), 0);\n }\n\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n'
+ ],
+ alt:
+ 'camera view of rotating 3D cubes changes to look at a new random\npoint every second .',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 836,
+ description:
+ 'Sets a camera's position and orientation. This is equivalent to calling\ncamera() on a p5.Camera object.
\n',
+ itemtype: 'method',
+ name: 'camera',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 917,
+ description:
+ 'Move camera along its local axes while maintaining current camera orientation.
\n',
+ itemtype: 'method',
+ name: 'move',
+ params: [
+ {
+ name: 'x',
+ description:
+ 'amount to move along camera's left-right axis
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'amount to move along camera's up-down axis
\n',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description:
+ 'amount to move along camera's forward-backward axis
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ '\n\n\n// see the camera move along its own axes while maintaining its orientation\nlet cam;\nlet delta = 0.5;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n}\n\nfunction draw() {\n background(200);\n\n // move the camera along its local axes\n cam.move(delta, delta, 0);\n\n // every 100 frames, switch direction\n if (frameCount % 150 === 0) {\n delta *= -1;\n }\n\n translate(-10, -10, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n translate(15, 15, 0);\n box(50, 8, 50);\n}\n\n'
+ ],
+ alt:
+ 'camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 989,
+ description:
+ 'Set camera position in world-space while maintaining current camera\norientation.
\n',
+ itemtype: 'method',
+ name: 'setPosition',
+ params: [
+ {
+ name: 'x',
+ description: 'x position of a point in world space
\n',
+ type: 'Number'
+ },
+ {
+ name: 'y',
+ description: 'y position of a point in world space
\n',
+ type: 'Number'
+ },
+ {
+ name: 'z',
+ description: 'z position of a point in world space
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\n\n// press '1' '2' or '3' keys to set camera position\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n cam = createCamera();\n}\n\nfunction draw() {\n background(200);\n\n // '1' key\n if (keyIsDown(49)) {\n cam.setPosition(30, 0, 80);\n }\n // '2' key\n if (keyIsDown(50)) {\n cam.setPosition(0, 0, 80);\n }\n // '3' key\n if (keyIsDown(51)) {\n cam.setPosition(-30, 0, 80);\n }\n\n box(20);\n}\n\n"
+ ],
+ alt:
+ 'camera position changes as the user presses keys, altering view of a 3D box',
+ class: 'p5.Camera',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Camera.js',
+ line: 1254,
+ description:
+ 'Sets rendererGL's current camera to a p5.Camera object. Allows switching\nbetween multiple cameras.
\n',
+ itemtype: 'method',
+ name: 'setCamera',
+ params: [
+ {
+ name: 'cam',
+ description: 'p5.Camera object
\n',
+ type: 'p5.Camera'
+ }
+ ],
+ example: [
+ '\n\n\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n\n cam1 = createCamera();\n cam2 = createCamera();\n cam2.setPosition(30, 0, 50);\n cam2.lookAt(0, 0, 0);\n cam2.ortho();\n\n // set variable for previously active camera:\n currentCamera = 1;\n}\n\nfunction draw() {\n background(200);\n\n // camera 1:\n cam1.lookAt(0, 0, 0);\n cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\n\n // every 100 frames, switch between the two cameras\n if (frameCount % 100 === 0) {\n if (currentCamera === 1) {\n setCamera(cam1);\n currentCamera = 0;\n } else {\n setCamera(cam2);\n currentCamera = 1;\n }\n }\n\n drawBoxes();\n}\n\nfunction drawBoxes() {\n rotateX(frameCount * 0.01);\n translate(-100, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n translate(35, 0, 0);\n box(20);\n}\n\n'
+ ],
+ alt:
+ 'Canvas switches between two camera views, each showing a series of spinning\n3D boxes.',
+ class: 'p5',
+ module: 'Lights, Camera',
+ submodule: 'Camera'
+ },
+ {
+ file: 'src/webgl/p5.Geometry.js',
+ line: 72,
+ itemtype: 'method',
+ name: 'computeFaces',
+ chainable: 1,
+ class: 'p5.Geometry',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/p5.Geometry.js',
+ line: 114,
+ description:
+ 'computes smooth normals per vertex as an average of each\nface.
\n',
+ itemtype: 'method',
+ name: 'computeNormals',
+ chainable: 1,
+ class: 'p5.Geometry',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/p5.Geometry.js',
+ line: 153,
+ description:
+ 'Averages the vertex normals. Used in curved\nsurfaces
\n',
+ itemtype: 'method',
+ name: 'averageNormals',
+ chainable: 1,
+ class: 'p5.Geometry',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/p5.Geometry.js',
+ line: 174,
+ description:
+ 'Averages pole normals. Used in spherical primitives
\n',
+ itemtype: 'method',
+ name: 'averagePoleNormals',
+ chainable: 1,
+ class: 'p5.Geometry',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/p5.Geometry.js',
+ line: 267,
+ description:
+ 'Modifies all vertices to be centered within the range -100 to 100.
\n',
+ itemtype: 'method',
+ name: 'normalize',
+ chainable: 1,
+ class: 'p5.Geometry',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'src/webgl/p5.RendererGL.js',
+ line: 279,
+ description:
+ 'Set attributes for the WebGL Drawing context.\nThis is a way of adjusting how the WebGL\nrenderer works to fine-tune the display and performance.\n
\nNote that this will reinitialize the drawing context\nif called after the WebGL canvas is made.\n
\nIf an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.\n
\nThe available attributes are:\n
\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true\n
\ndepth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true\n
\nstencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits\n
\nantialias - indicates whether or not to perform anti-aliasing\ndefault is false\n
\npremultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is false\n
\npreserveDrawingBuffer - if true the buffers will not be cleared and\nand will preserve their values until cleared or overwritten by author\n(note that p5 clears automatically on draw loop)\ndefault is true\n
\nperPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader.\ndefault is false\n
\n',
+ itemtype: 'method',
+ name: 'setAttributes',
+ example: [
+ "\n\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n\n\n
\nNow with the antialias attribute set to true.\n
\n\n\nfunction setup() {\n setAttributes('antialias', true);\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n\n\n\n\n\n// press the mouse button to enable perPixelLighting\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n fill(255);\n}\n\nlet lights = [\n { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\n { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\n { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\n { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\n { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\n { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\n];\n\nfunction draw() {\n let t = millis() / 1000 + 1000;\n background(0);\n directionalLight(color('#222'), 1, 1, 1);\n\n for (let i = 0; i < lights.length; i++) {\n let light = lights[i];\n pointLight(\n color(light.c),\n p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\n );\n }\n\n specularMaterial(255);\n sphere(width * 0.1);\n\n rotateX(t * 0.77);\n rotateY(t * 0.83);\n rotateZ(t * 0.91);\n torus(width * 0.3, width * 0.07, 24, 10);\n}\n\nfunction mousePressed() {\n setAttributes('perPixelLighting', true);\n noStroke();\n fill(255);\n}\nfunction mouseReleased() {\n setAttributes('perPixelLighting', false);\n noStroke();\n fill(255);\n}\n\n"
+ ],
+ alt: 'a rotating cube with smoother edges',
+ class: 'p5',
+ module: 'Rendering',
+ submodule: 'Rendering',
+ overloads: [
+ {
+ line: 279,
+ params: [
+ {
+ name: 'key',
+ description: 'Name of attribute
\n',
+ type: 'String'
+ },
+ {
+ name: 'value',
+ description: 'New value of named attribute
\n',
+ type: 'Boolean'
+ }
+ ]
+ },
+ {
+ line: 418,
+ params: [
+ {
+ name: 'obj',
+ description: 'object with key-value pairs
\n',
+ type: 'Object'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ file: 'src/webgl/p5.Shader.js',
+ line: 281,
+ description:
+ 'Wrapper around gl.uniform functions.\nAs we store uniform info in the shader we can use that\nto do type checking on the supplied data and call\nthe appropriate function.
\n',
+ itemtype: 'method',
+ name: 'setUniform',
+ chainable: 1,
+ params: [
+ {
+ name: 'uniformName',
+ description: 'the name of the uniform in the\nshader program
\n',
+ type: 'String'
+ },
+ {
+ name: 'data',
+ description:
+ 'the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)
\n',
+ type: 'Object|Number|Boolean|Number[]'
+ }
+ ],
+ example: [
+ "\n\n\n// Click within the image to toggle the value of uniforms\n// Note: for an alternative approach to the same example,\n// involving toggling between shaders please refer to:\n// https://p5js.org/reference/#/p5/shader\n\nlet grad;\nlet showRedGreen = false;\n\nfunction preload() {\n // note that we are using two instances\n // of the same vertex and fragment shaders\n grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n shader(grad);\n noStroke();\n}\n\nfunction draw() {\n // update the offset values for each scenario,\n // moving the \"grad\" shader in either vertical or\n // horizontal direction each with differing colors\n\n if (showRedGreen === true) {\n grad.setUniform('colorCenter', [1, 0, 0]);\n grad.setUniform('colorBackground', [0, 1, 0]);\n grad.setUniform('offset', [sin(millis() / 2000), 1]);\n } else {\n grad.setUniform('colorCenter', [1, 0.5, 0]);\n grad.setUniform('colorBackground', [0.226, 0, 0.615]);\n grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);\n }\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\nfunction mouseClicked() {\n showRedGreen = !showRedGreen;\n}\n\n"
+ ],
+ alt:
+ '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.',
+ class: 'p5.Shader',
+ module: 'Lights, Camera',
+ submodule: 'Material'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 46,
+ description:
+ 'p5.sound \nhttps://p5js.org/reference/#/libraries/p5.sound
\nFrom the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors
\nMIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE
\nSome of the many audio libraries & resources that inspire p5.sound:
\n\nTONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js
\nbuzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/
\nBoris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0
\nwavesurfer.js https://github.com/katspaugh/wavesurfer.js
\nWeb Audio Components by Jordan Santell https://github.com/web-audio-components
\nWilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound
\nWeb Audio API: http://w3.org/TR/webaudio/
\n
\n',
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 214,
+ description:
+ 'Determine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats
\n',
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 363,
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 740,
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 810,
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1005,
+ description:
+ "Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the Web Audio API\n.
\n\nSome browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.
",
+ itemtype: 'method',
+ name: 'getAudioContext',
+ return: {
+ description: 'AudioContext for this sketch',
+ type: 'Object'
+ },
+ example: [
+ "\n\n function draw() {\n background(255);\n textAlign(CENTER);\n\n if (getAudioContext().state !== 'running') {\n text('click to start audio', width/2, height/2);\n } else {\n text('audio is enabled', width/2, height/2);\n }\n }\n\n function touchStarted() {\n if (getAudioContext().state !== 'running') {\n getAudioContext().resume();\n }\n let synth = new p5.MonoSynth();\n synth.play('A4', 0.5, 0, 0.2);\n }\n\n"
+ ],
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1042,
+ description:
+ 'It is a good practice to give users control over starting audio playback.\nThis practice is enforced by Google Chrome\'s autoplay policy as of r70\n(info), iOS Safari, and other browsers.\n
\n\n\nuserStartAudio() starts the Audio Context on a user gesture. It utilizes\nthe StartAudioContext library by\nYotam Mann (MIT Licence, 2016). Read more at https://github.com/tambien/StartAudioContext.\n
\n\nStarting the audio context on a user gesture can be as simple as userStartAudio().\nOptional parameters let you decide on a specific element that will start the audio context,\nand/or call a function once the audio context is started.
',
+ params: [
+ {
+ name: 'element(s)',
+ description:
+ 'This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.
\n',
+ type: 'Element|Array',
+ optional: true
+ },
+ {
+ name: 'callback',
+ description:
+ 'Callback to invoke when the AudioContext has started
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ "Returns a Promise which is resolved when\n the AudioContext state is 'running'",
+ type: 'Promise'
+ },
+ itemtype: 'method',
+ name: 'userStartAudio',
+ example: [
+ "\n\nfunction setup() {\n let myDiv = createDiv('click to start audio');\n myDiv.position(0, 0);\n\n let mySynth = new p5.MonoSynth();\n\n // This won't play until the context has started\n mySynth.play('A6');\n\n // Start the audio context on a click/touch event\n userStartAudio().then(function() {\n myDiv.remove();\n });\n}\n"
+ ],
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1099,
+ description:
+ 'Master contains AudioContext and the master sound output.
\n',
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1132,
+ description:
+ 'Returns a number representing the master amplitude (volume) for sound\nin this sketch.
\n',
+ itemtype: 'method',
+ name: 'getMasterVolume',
+ return: {
+ description:
+ 'Master amplitude (volume) for sound in this sketch.\n Should be between 0.0 (silence) and 1.0.',
+ type: 'Number'
+ },
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1143,
+ description:
+ "Scale the output of all sound in this sketch
\nScaled between 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a rampTime parameter. For more\ncomplex fades, see the Envelope class.\n\nAlternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.
\nHow This Works: When you load the p5.sound module, it\ncreates a single instance of p5sound. All sound objects in this\nmodule output to p5sound before reaching your computer's output.\nSo if you change the amplitude of p5sound, it impacts all of the\nsound in this module.
\n\nIf no value is provided, returns a Web Audio API Gain Node
",
+ itemtype: 'method',
+ name: 'masterVolume',
+ params: [
+ {
+ name: 'volume',
+ description:
+ 'Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n',
+ type: 'Number|Object'
+ },
+ {
+ name: 'rampTime',
+ description: 'Fade for t seconds
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'Schedule this event to happen at\n t seconds in the future
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1185,
+ description:
+ 'p5.soundOut is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (.limiter),\nand Gain Nodes for .input and .output.
\n',
+ itemtype: 'property',
+ name: 'soundOut',
+ type: 'Object',
+ class: 'p5.sound',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1210,
+ class: 'p5',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1213,
+ description:
+ 'Returns a number representing the sample rate, in samples per second,\nof all sound objects in this audio context. It is determined by the\nsampling rate of your operating system's sound card, and it is not\ncurrently possile to change.\nIt is often 44100, or twice the range of human hearing.
\n',
+ itemtype: 'method',
+ name: 'sampleRate',
+ return: {
+ description: 'samplerate samples per second',
+ type: 'Number'
+ },
+ class: 'p5',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1226,
+ description:
+ 'Returns the closest MIDI note value for\na given frequency.
\n',
+ itemtype: 'method',
+ name: 'freqToMidi',
+ params: [
+ {
+ name: 'frequency',
+ description:
+ 'A freqeuncy, for example, the "A"\n above Middle C is 440Hz
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'MIDI note value',
+ type: 'Number'
+ },
+ class: 'p5',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1240,
+ description:
+ 'Returns the frequency value of a MIDI note value.\nGeneral MIDI treats notes as integers where middle C\nis 60, C# is 61, D is 62 etc. Useful for generating\nmusical frequencies with oscillators.
\n',
+ itemtype: 'method',
+ name: 'midiToFreq',
+ params: [
+ {
+ name: 'midiNote',
+ description: 'The number of a MIDI note
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'Frequency value of the given MIDI note',
+ type: 'Number'
+ },
+ example: [
+ "\n\nlet notes = [60, 64, 67, 72];\nlet i = 0;\n\nfunction setup() {\n osc = new p5.Oscillator('Triangle');\n osc.start();\n frameRate(1);\n}\n\nfunction draw() {\n let freq = midiToFreq(notes[i]);\n osc.freq(freq);\n i++;\n if (i >= notes.length){\n i = 0;\n }\n}\n"
+ ],
+ class: 'p5',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1302,
+ description:
+ 'List the SoundFile formats that you will include. LoadSound\nwill search your directory for these extensions, and will pick\na format that is compatable with the client's web browser.\nHere is a free online file\nconverter.
\n',
+ itemtype: 'method',
+ name: 'soundFormats',
+ params: [
+ {
+ name: 'formats',
+ description:
+ 'i.e. 'mp3', 'wav', 'ogg'
\n',
+ type: 'String',
+ optional: true,
+ multiple: true
+ }
+ ],
+ example: [
+ "\n\nfunction preload() {\n // set the global sound formats\n soundFormats('mp3', 'ogg');\n\n // load either beatbox.mp3, or .ogg, depending on browser\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n mySound.play();\n}\n"
+ ],
+ class: 'p5',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1415,
+ description: 'Used by Osc and Envelope to chain signal math
\n',
+ class: 'p5',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1763,
+ description:
+ 'loadSound() returns a new p5.SoundFile from a specified\npath. If called during preload(), the p5.SoundFile will be ready\nto play in time for setup() and draw(). If called outside of\npreload, the p5.SoundFile will not be ready immediately, so\nloadSound accepts a callback as the second parameter. Using a\n\nlocal server is recommended when loading external files.
\n',
+ itemtype: 'method',
+ name: 'loadSound',
+ params: [
+ {
+ name: 'path',
+ description:
+ 'Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. ['sound.ogg', 'sound.mp3'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.
\n',
+ type: 'String|Array'
+ },
+ {
+ name: 'successCallback',
+ description: 'Name of a function to call once file loads
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'Name of a function to call if there is\n an error loading the file.
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'whileLoading',
+ description:
+ 'Name of a function to call while file is loading.\n This function will receive the percentage loaded\n so far, from 0.0 to 1.0.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Returns a p5.SoundFile',
+ type: 'SoundFile'
+ },
+ example: [
+ "\n\nfunction preload() {\n mySound = loadSound('assets/doorbell.mp3');\n}\n\nfunction setup() {\n mySound.setVolume(0.1);\n mySound.play();\n}\n"
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1919,
+ description:
+ 'Returns true if the sound file finished loading successfully.
\n',
+ itemtype: 'method',
+ name: 'isLoaded',
+ return: {
+ description: '',
+ type: 'Boolean'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 1932,
+ description: 'Play the p5.SoundFile
\n',
+ itemtype: 'method',
+ name: 'play',
+ params: [
+ {
+ name: 'startTime',
+ description:
+ '(optional) schedule playback to start (in seconds from now).
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'rate',
+ description: '(optional) playback rate
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'amp',
+ description:
+ '(optional) amplitude (volume)\n of playback
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'cueStart',
+ description: '(optional) cue start time in seconds
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'duration',
+ description: '(optional) duration of playback in seconds
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2022,
+ description:
+ 'p5.SoundFile has two play modes: restart and\nsustain. Play Mode determines what happens to a\np5.SoundFile if it is triggered while in the middle of playback.\nIn sustain mode, playback will continue simultaneous to the\nnew playback. In restart mode, play() will stop playback\nand start over. With untilDone, a sound will play only if it's\nnot already playing. Sustain is the default mode.
\n',
+ itemtype: 'method',
+ name: 'playMode',
+ params: [
+ {
+ name: 'str',
+ description:
+ ''restart' or 'sustain' or 'untilDone'
\n',
+ type: 'String'
+ }
+ ],
+ example: [
+ "\n\nlet mySound;\nfunction preload(){\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\nfunction mouseClicked() {\n mySound.playMode('sustain');\n mySound.play();\n}\nfunction keyPressed() {\n mySound.playMode('restart');\n mySound.play();\n}\n\n "
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2066,
+ description:
+ 'Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.
\nAfter pausing, .play() will resume from the paused\nposition.\nIf p5.SoundFile had been set to loop before it was paused,\nit will continue to loop after it is unpaused with .play().
\n',
+ itemtype: 'method',
+ name: 'pause',
+ params: [
+ {
+ name: 'startTime',
+ description:
+ '(optional) schedule event to occur\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet soundFile;\n\nfunction preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\n}\nfunction setup() {\n background(0, 255, 0);\n soundFile.setVolume(0.1);\n soundFile.loop();\n}\nfunction keyTyped() {\n if (key == 'p') {\n soundFile.pause();\n background(255, 0, 0);\n }\n}\n\nfunction keyReleased() {\n if (key == 'p') {\n soundFile.play();\n background(0, 255, 0);\n }\n}\n\n"
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2122,
+ description:
+ 'Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.
\n',
+ itemtype: 'method',
+ name: 'loop',
+ params: [
+ {
+ name: 'startTime',
+ description:
+ '(optional) schedule event to occur\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'rate',
+ description: '(optional) playback rate
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'amp',
+ description: '(optional) playback volume
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'cueLoopStart',
+ description: '(optional) startTime in seconds
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'duration',
+ description: '(optional) loop duration in seconds
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2138,
+ description:
+ 'Set a p5.SoundFile's looping flag to true or false. If the sound\nis currently playing, this change will take effect when it\nreaches the end of the current playback.
\n',
+ itemtype: 'method',
+ name: 'setLoop',
+ params: [
+ {
+ name: 'Boolean',
+ description: 'set looping to true or false
\n',
+ type: 'Boolean'
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2159,
+ description:
+ 'Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.
\n',
+ itemtype: 'method',
+ name: 'isLooping',
+ return: {
+ description: '',
+ type: 'Boolean'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2174,
+ description:
+ 'Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).
\n',
+ itemtype: 'method',
+ name: 'isPlaying',
+ return: {
+ description: '',
+ type: 'Boolean'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2184,
+ description:
+ 'Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).
\n',
+ itemtype: 'method',
+ name: 'isPaused',
+ return: {
+ description: '',
+ type: 'Boolean'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2194,
+ description: 'Stop soundfile playback.
\n',
+ itemtype: 'method',
+ name: 'stop',
+ params: [
+ {
+ name: 'startTime',
+ description:
+ '(optional) schedule event to occur\n in seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2239,
+ description:
+ 'Multiply the output volume (amplitude) of a sound file\nbetween 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a rampTime parameter. For more\ncomplex fades, see the Envelope class.
\nAlternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.
\n',
+ itemtype: 'method',
+ name: 'setVolume',
+ params: [
+ {
+ name: 'volume',
+ description:
+ 'Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n',
+ type: 'Number|Object'
+ },
+ {
+ name: 'rampTime',
+ description: 'Fade for t seconds
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'Schedule this event to happen at\n t seconds in the future
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2280,
+ description:
+ 'Set the stereo panning of a p5.sound object to\na floating point number between -1.0 (left) and 1.0 (right).\nDefault is 0.0 (center).
\n',
+ itemtype: 'method',
+ name: 'pan',
+ params: [
+ {
+ name: 'panValue',
+ description: 'Set the stereo panner
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\n\n let ball = {};\n let soundFile;\n\n function preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/beatbox.mp3');\n }\n\n function draw() {\n background(0);\n ball.x = constrain(mouseX, 0, width);\n ellipse(ball.x, height/2, 20, 20)\n }\n\n function mousePressed(){\n // map the ball's x location to a panning degree\n // between -1.0 (left) and 1.0 (right)\n let panning = map(ball.x, 0., width,-1.0, 1.0);\n soundFile.pan(panning);\n soundFile.play();\n }\n "
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2319,
+ description:
+ 'Returns the current stereo pan position (-1.0 to 1.0)
\n',
+ itemtype: 'method',
+ name: 'getPan',
+ return: {
+ description:
+ 'Returns the stereo pan setting of the Oscillator\n as a number between -1.0 (left) and 1.0 (right).\n 0.0 is center and default.',
+ type: 'Number'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2330,
+ description:
+ 'Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.
\n',
+ itemtype: 'method',
+ name: 'rate',
+ params: [
+ {
+ name: 'playbackRate',
+ description:
+ 'Set the playback rate. 1.0 is normal,\n .5 is half-speed, 2.0 is twice as fast.\n Values less than zero play backwards.
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet song;\n\nfunction preload() {\n song = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n song.loop();\n}\n\nfunction draw() {\n background(200);\n\n // Set the rate to a range between 0.1 and 4\n // Changing the rate also alters the pitch\n let speed = map(mouseY, 0.1, height, 0, 2);\n speed = constrain(speed, 0.01, 4);\n song.rate(speed);\n\n // Draw a circle to show what is going on\n stroke(0);\n fill(51, 100);\n ellipse(mouseX, 100, 48, 48);\n}\n\n \n \n"
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2403,
+ description: 'Returns the duration of a sound file in seconds.
\n',
+ itemtype: 'method',
+ name: 'duration',
+ return: {
+ description: 'The duration of the soundFile in seconds.',
+ type: 'Number'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2417,
+ description:
+ 'Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if reverseBuffer\nhas been called, currentTime will count backwards.
\n',
+ itemtype: 'method',
+ name: 'currentTime',
+ return: {
+ description: 'currentTime of the soundFile in seconds.',
+ type: 'Number'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2428,
+ description:
+ 'Move the playhead of the song to a position, in seconds. Start timing\nand playback duration. If none are given, will reset the file to play\nentire duration from start to finish.
\n',
+ itemtype: 'method',
+ name: 'jump',
+ params: [
+ {
+ name: 'cueTime',
+ description: 'cueTime of the soundFile in seconds.
\n',
+ type: 'Number'
+ },
+ {
+ name: 'duration',
+ description: 'duration in seconds.
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2451,
+ description:
+ 'Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.
\n',
+ itemtype: 'method',
+ name: 'channels',
+ return: {
+ description: '[channels]',
+ type: 'Number'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2461,
+ description: 'Return the sample rate of the sound file.
\n',
+ itemtype: 'method',
+ name: 'sampleRate',
+ return: {
+ description: '[sampleRate]',
+ type: 'Number'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2470,
+ description:
+ 'Return the number of samples in a sound file.\nEqual to sampleRate * duration.
\n',
+ itemtype: 'method',
+ name: 'frames',
+ return: {
+ description: '[sampleCount]',
+ type: 'Number'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2480,
+ description:
+ 'Returns an array of amplitude peaks in a p5.SoundFile that can be\nused to draw a static waveform. Scans through the p5.SoundFile's\naudio buffer to find the greatest amplitudes. Accepts one\nparameter, 'length', which determines size of the array.\nLarger arrays result in more precise waveform visualizations.
\nInspired by Wavesurfer.js.
\n',
+ itemtype: 'method',
+ name: 'getPeaks',
+ params: [
+ {
+ name: 'length',
+ description:
+ 'length is the size of the returned array.\n Larger length results in more precision.\n Defaults to 5*width of the browser window.
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Array of peaks.',
+ type: 'Float32Array'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2532,
+ description:
+ 'Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).
\n',
+ itemtype: 'method',
+ name: 'reverseBuffer',
+ example: [
+ "\n\nlet drum;\n\nfunction preload() {\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n drum.reverseBuffer();\n drum.play();\n}\n\n \n "
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2572,
+ description:
+ 'Schedule an event to be called when the soundfile\nreaches the end of a buffer. If the soundfile is\nplaying through once, this will be called when it\nends. If it is looping, it will be called when\nstop is called.
\n',
+ itemtype: 'method',
+ name: 'onended',
+ params: [
+ {
+ name: 'callback',
+ description:
+ 'function to call when the\n soundfile has ended.
\n',
+ type: 'Function'
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2625,
+ description:
+ 'Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe master output. Most p5sound objects connect to the master\noutput when they are created.
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'object',
+ description: 'Audio object that accepts an input
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2646,
+ description: 'Disconnects the output of this p5sound object.
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2656,
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2661,
+ description:
+ 'Reset the source for this SoundFile to a\nnew path (URL).
\n',
+ itemtype: 'method',
+ name: 'setPath',
+ params: [
+ {
+ name: 'path',
+ description: 'path to audio file
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: 'Callback
\n',
+ type: 'Function'
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2674,
+ description: 'Replace the current Audio Buffer with a new Buffer.
\n',
+ itemtype: 'method',
+ name: 'setBuffer',
+ params: [
+ {
+ name: 'buf',
+ description:
+ 'Array of Float32 Array(s). 2 Float32 Arrays\n will create a stereo source. 1 will create\n a mono source.
\n',
+ type: 'Array'
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2741,
+ description:
+ 'processPeaks returns an array of timestamps where it thinks there is a beat.
\nThis is an asynchronous function that processes the soundfile in an offline audio context,\nand sends the results to your callback function.
\nThe process involves running the soundfile through a lowpass filter, and finding all of the\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.
\n',
+ itemtype: 'method',
+ name: 'processPeaks',
+ params: [
+ {
+ name: 'callback',
+ description: 'a function to call once this data is returned
\n',
+ type: 'Function'
+ },
+ {
+ name: 'initThreshold',
+ description: 'initial threshold defaults to 0.9
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'minThreshold',
+ description: 'minimum threshold defaults to 0.22
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'minPeaks',
+ description: 'minimum number of peaks defaults to 200
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Array of timestamped peaks',
+ type: 'Array'
+ },
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2934,
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 2943,
+ description:
+ 'Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.
\nAccepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.
\nTime will be passed as the first parameter to the callback function,\nand param will be the second parameter.
\n',
+ itemtype: 'method',
+ name: 'addCue',
+ params: [
+ {
+ name: 'time',
+ description:
+ 'Time in seconds, relative to this media\n element's playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.
\n',
+ type: 'Number'
+ },
+ {
+ name: 'callback',
+ description:
+ 'Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.
\n',
+ type: 'Function'
+ },
+ {
+ name: 'value',
+ description:
+ 'An object to be passed as the\n second parameter to the\n callback function.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'id ID of this cue,\n useful for removeCue(id)',
+ type: 'Number'
+ },
+ example: [
+ '\n\nlet mySound;\nfunction preload() {\n mySound = loadSound(\'assets/beat.mp3\');\n}\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n text(\'click to play\', width/2, height/2);\n\n // schedule calls to changeText\n mySound.addCue(0.50, changeText, "hello" );\n mySound.addCue(1.00, changeText, "p5" );\n mySound.addCue(1.50, changeText, "what" );\n mySound.addCue(2.00, changeText, "do" );\n mySound.addCue(2.50, changeText, "you" );\n mySound.addCue(3.00, changeText, "want" );\n mySound.addCue(4.00, changeText, "to" );\n mySound.addCue(5.00, changeText, "make" );\n mySound.addCue(6.00, changeText, "?" );\n}\n\nfunction changeText(val) {\n background(0);\n text(val, width/2, height/2);\n}\n\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n if (mySound.isPlaying() ) {\n mySound.stop();\n } else {\n mySound.play();\n }\n }\n}\n'
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3021,
+ description:
+ 'Remove a callback based on its ID. The ID is returned by the\naddCue method.
\n',
+ itemtype: 'method',
+ name: 'removeCue',
+ params: [
+ {
+ name: 'id',
+ description: 'ID of the cue, as returned by addCue
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3040,
+ description:
+ 'Remove all of the callbacks that had originally been scheduled\nvia the addCue method.
\n',
+ itemtype: 'method',
+ name: 'clearCues',
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3065,
+ description:
+ 'Save a p5.SoundFile as a .wav file. The browser will prompt the user\nto download the file to their device. To upload a file to a server, see\ngetBlob
\n',
+ itemtype: 'method',
+ name: 'save',
+ params: [
+ {
+ name: 'fileName',
+ description: 'name of the resulting .wav file.
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ example: [
+ "\n \n let inp, button, mySound;\n let fileName = 'cool';\n function preload() {\n mySound = loadSound('assets/doorbell.mp3');\n }\n function setup() {\n btn = createButton('click to save file');\n btn.position(0, 0);\n btn.mouseClicked(handleMouseClick);\n }\n\n function handleMouseClick() {\n mySound.save(fileName);\n }\n"
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3094,
+ description:
+ 'This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a "Blob".\nA Blob is a file-like data object that can be uploaded to a server\nwith an http request. We'll\nuse the httpDo options object to send a POST request with some\nspecific options: we encode the request as multipart/form-data,\nand attach the blob as one of the form values using FormData.
\n',
+ itemtype: 'method',
+ name: 'getBlob',
+ return: {
+ description: 'A file-like data object',
+ type: 'Blob'
+ },
+ example: [
+ "\n \n\n function preload() {\n mySound = loadSound('assets/doorbell.mp3');\n }\n\n function setup() {\n noCanvas();\n let soundBlob = mySound.getBlob();\n\n // Now we can send the blob to a server...\n let serverUrl = 'https://jsonplaceholder.typicode.com/posts';\n let httpRequestOptions = {\n method: 'POST',\n body: new FormData().append('soundBlob', soundBlob),\n headers: new Headers({\n 'Content-Type': 'multipart/form-data'\n })\n };\n httpDo(serverUrl, httpRequestOptions);\n\n // We can also create an `ObjectURL` pointing to the Blob\n let blobUrl = URL.createObjectURL(soundBlob);\n\n // The `"
+ ],
+ class: 'p5.SoundFile',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3257,
+ description:
+ 'Connects to the p5sound instance (master output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).
\n',
+ itemtype: 'method',
+ name: 'setInput',
+ params: [
+ {
+ name: 'snd',
+ description:
+ 'set the sound source\n (optional, defaults to\n master output)
\n',
+ type: 'SoundObject|undefined',
+ optional: true
+ },
+ {
+ name: 'smoothing',
+ description:
+ 'a range between 0.0 and 1.0\n to smooth amplitude readings
\n',
+ type: 'Number|undefined',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nfunction preload(){\n sound1 = loadSound('assets/beat.mp3');\n sound2 = loadSound('assets/drum.mp3');\n}\nfunction setup(){\n amplitude = new p5.Amplitude();\n sound1.play();\n sound2.play();\n amplitude.setInput(sound2);\n}\nfunction draw() {\n background(0);\n fill(255);\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\nfunction mouseClicked(){\n sound1.stop();\n sound2.stop();\n}\n"
+ ],
+ class: 'p5.Amplitude',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3364,
+ description:
+ 'Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.
\n',
+ itemtype: 'method',
+ name: 'getLevel',
+ params: [
+ {
+ name: 'channel',
+ description:
+ 'Optionally return only channel 0 (left) or 1 (right)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Amplitude as a number between 0.0 and 1.0',
+ type: 'Number'
+ },
+ example: [
+ "\n\nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\nfunction setup() {\n amplitude = new p5.Amplitude();\n sound.play();\n}\nfunction draw() {\n background(0);\n fill(255);\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\nfunction mouseClicked(){\n sound.stop();\n}\n"
+ ],
+ class: 'p5.Amplitude',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3405,
+ description:
+ 'Determines whether the results of Amplitude.process() will be\nNormalized. To normalize, Amplitude finds the difference the\nloudest reading it has processed and the maximum amplitude of\n1.0. Amplitude adds this difference to all values to produce\nresults that will reliably map between 0.0 and 1.0. However,\nif a louder moment occurs, the amount that Normalize adds to\nall the values will change. Accepts an optional boolean parameter\n(true or false). Normalizing is off by default.
\n',
+ itemtype: 'method',
+ name: 'toggleNormalize',
+ params: [
+ {
+ name: 'boolean',
+ description: 'set normalize to true (1) or false (0)
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ class: 'p5.Amplitude',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3425,
+ description:
+ 'Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.
\n',
+ itemtype: 'method',
+ name: 'smooth',
+ params: [
+ {
+ name: 'set',
+ description: 'smoothing from 0.0 <= 1
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Amplitude',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3599,
+ description:
+ 'Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.
\n',
+ itemtype: 'method',
+ name: 'setInput',
+ params: [
+ {
+ name: 'source',
+ description: 'p5.sound object (or web audio API source node)
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3618,
+ description:
+ 'Returns an array of amplitude values (between -1.0 and +1.0) that represent\na snapshot of amplitude readings in a single buffer. Length will be\nequal to bins (defaults to 1024). Can be used to draw the waveform\nof a sound.
\n',
+ itemtype: 'method',
+ name: 'waveform',
+ params: [
+ {
+ name: 'bins',
+ description:
+ 'Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'precision',
+ description:
+ 'If any value is provided, will return results\n in a Float32 Array which is more precise\n than a regular array.
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'Array Array of amplitude values (-1 to 1)\n over time. Array length = bins.',
+ type: 'Array'
+ },
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3661,
+ description:
+ 'Returns an array of amplitude values (between 0 and 255)\nacross the frequency spectrum. Length is equal to FFT bins\n(1024 by default). The array indices correspond to frequencies\n(i.e. pitches), from the lowest to the highest that humans can\nhear. Each value represents amplitude at that slice of the\nfrequency spectrum. Must be called prior to using\ngetEnergy().
\n',
+ itemtype: 'method',
+ name: 'analyze',
+ params: [
+ {
+ name: 'bins',
+ description:
+ 'Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'scale',
+ description:
+ 'If "dB," returns decibel\n float measurements between\n -140 and 0 (max).\n Otherwise returns integers from 0-255.
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'spectrum Array of energy (amplitude/volume)\n values across the frequency spectrum.\n Lowest energy (silence) = 0, highest\n possible is 255.',
+ type: 'Array'
+ },
+ example: [
+ "\n\nlet osc;\nlet fft;\n\nfunction setup(){\n createCanvas(100,100);\n osc = new p5.Oscillator();\n osc.amp(0);\n osc.start();\n fft = new p5.FFT();\n}\n\nfunction draw(){\n background(0);\n\n let freq = map(mouseX, 0, 800, 20, 15000);\n freq = constrain(freq, 1, 20000);\n osc.freq(freq);\n\n let spectrum = fft.analyze();\n noStroke();\n fill(0,255,0); // spectrum is green\n for (var i = 0; i< spectrum.length; i++){\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h );\n }\n\n stroke(255);\n text('Freq: ' + round(freq)+'Hz', 10, 10);\n\n isMouseOverCanvas();\n}\n\n// only play sound when mouse is over canvas\nfunction isMouseOverCanvas() {\n let mX = mouseX, mY = mouseY;\n if (mX > 0 && mX < width && mY < height && mY > 0) {\n osc.amp(0.5, 0.2);\n } else {\n osc.amp(0, 0.2);\n }\n}\n\n\n"
+ ],
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3753,
+ description:
+ 'Returns the amount of energy (volume) at a specific\n\nfrequency, or the average amount of energy between two\nfrequencies. Accepts Number(s) corresponding\nto frequency (in Hz), or a String corresponding to predefined\nfrequency ranges ("bass", "lowMid", "mid", "highMid", "treble").\nReturns a range between 0 (no energy/volume at that frequency) and\n255 (maximum energy).\nNOTE: analyze() must be called prior to getEnergy(). Analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results determine the value at a specific frequency or\nrange of frequencies.
\n',
+ itemtype: 'method',
+ name: 'getEnergy',
+ params: [
+ {
+ name: 'frequency1',
+ description:
+ 'Will return a value representing\n energy at this frequency. Alternately,\n the strings "bass", "lowMid" "mid",\n "highMid", and "treble" will return\n predefined frequency ranges.
\n',
+ type: 'Number|String'
+ },
+ {
+ name: 'frequency2',
+ description:
+ 'If a second frequency is given,\n will return average amount of\n energy that exists between the\n two frequencies.
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'Energy Energy (volume/amplitude) from\n 0 and 255.',
+ type: 'Number'
+ },
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3835,
+ description:
+ 'Returns the\n\nspectral centroid of the input signal.\nNOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.
\n',
+ itemtype: 'method',
+ name: 'getCentroid',
+ return: {
+ description:
+ 'Spectral Centroid Frequency Frequency of the spectral centroid in Hz.',
+ type: 'Number'
+ },
+ example: [
+ '\n\n\n\nfunction setup(){\ncnv = createCanvas(100,100);\nsound = new p5.AudioIn();\nsound.start();\nfft = new p5.FFT();\nsound.connect(fft);\n}\n\n\nfunction draw(){\n\nvar centroidplot = 0.0;\nvar spectralCentroid = 0;\n\n\nbackground(0);\nstroke(0,255,0);\nvar spectrum = fft.analyze();\nfill(0,255,0); // spectrum is green\n\n//draw the spectrum\nfor (var i = 0; i< spectrum.length; i++){\n var x = map(log(i), 0, log(spectrum.length), 0, width);\n var h = map(spectrum[i], 0, 255, 0, height);\n var rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));\n rect(x, height, rectangle_width, -h )\n}\n\nvar nyquist = 22050;\n\n// get the centroid\nspectralCentroid = fft.getCentroid();\n\n// the mean_freq_index calculation is for the display.\nvar mean_freq_index = spectralCentroid/(nyquist/spectrum.length);\n\ncentroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);\n\n\nstroke(255,0,0); // the line showing where the centroid is will be red\n\nrect(centroidplot, 0, width / spectrum.length, height)\nnoStroke();\nfill(255,255,255); // text is white\ntext("centroid: ", 10, 20);\ntext(round(spectralCentroid)+" Hz", 10, 40);\n}\n '
+ ],
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3915,
+ description:
+ 'Smooth FFT analysis by averaging with the last analysis frame.
\n',
+ itemtype: 'method',
+ name: 'smooth',
+ params: [
+ {
+ name: 'smoothing',
+ description:
+ '0.0 < smoothing < 1.0.\n Defaults to 0.8.
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3937,
+ description:
+ 'Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\nNOTE: analyze() must be called prior to linAverages(). Analyze()\ntells the FFT to analyze frequency data, and linAverages() uses\nthe results to group them into a smaller set of averages.
\n',
+ itemtype: 'method',
+ name: 'linAverages',
+ params: [
+ {
+ name: 'N',
+ description: 'Number of returned frequency groups
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description:
+ 'linearAverages Array of average amplitude values for each group',
+ type: 'Array'
+ },
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3967,
+ description:
+ 'Returns an array of average amplitude values of the spectrum, for a given\nset of \nOctave Bands\nNOTE: analyze() must be called prior to logAverages(). Analyze()\ntells the FFT to analyze frequency data, and logAverages() uses\nthe results to group them into a smaller set of averages.
\n',
+ itemtype: 'method',
+ name: 'logAverages',
+ params: [
+ {
+ name: 'octaveBands',
+ description: 'Array of Octave Bands objects for grouping
\n',
+ type: 'Array'
+ }
+ ],
+ return: {
+ description:
+ 'logAverages Array of average amplitude values for each group',
+ type: 'Array'
+ },
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 3997,
+ description:
+ 'Calculates and Returns the 1/N\nOctave Bands\nN defaults to 3 and minimum central frequency to 15.625Hz.\n(1/3 Octave Bands ~= 31 Frequency Bands)\nSetting fCtr0 to a central value of a higher octave will ignore the lower bands\nand produce less frequency groups.
\n',
+ itemtype: 'method',
+ name: 'getOctaveBands',
+ params: [
+ {
+ name: 'N',
+ description:
+ 'Specifies the 1/N type of generated octave bands
\n',
+ type: 'Number'
+ },
+ {
+ name: 'fCtr0',
+ description: 'Minimum central frequency for the lowest band
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description:
+ 'octaveBands Array of octave band objects with their bounds',
+ type: 'Array'
+ },
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 4055,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 4076,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 4135,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 4453,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 4625,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 4783,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 4824,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 4881,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5049,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5097,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5128,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5149,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5169,
+ class: 'p5.FFT',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5268,
+ description: 'Fade to value, for smooth transitions
\n',
+ itemtype: 'method',
+ name: 'fade',
+ params: [
+ {
+ name: 'value',
+ description: 'Value to set this signal
\n',
+ type: 'Number'
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'Length of fade, in seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Signal',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5279,
+ description:
+ 'Connect a p5.sound object or Web Audio node to this\np5.Signal so that its amplitude values can be scaled.
\n',
+ itemtype: 'method',
+ name: 'setInput',
+ params: [
+ {
+ name: 'input',
+ description: '',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.Signal',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5293,
+ description:
+ 'Add a constant value to this audio signal,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalAdd.
\n',
+ itemtype: 'method',
+ name: 'add',
+ params: [
+ {
+ name: 'number',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'object',
+ type: 'p5.Signal'
+ },
+ class: 'p5.Signal',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5312,
+ description:
+ 'Multiply this signal by a constant value,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalMult.
\n',
+ itemtype: 'method',
+ name: 'mult',
+ params: [
+ {
+ name: 'number',
+ description: 'to multiply
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'object',
+ type: 'p5.Signal'
+ },
+ class: 'p5.Signal',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5331,
+ description:
+ 'Scale this signal value to a given range,\nand return the result as an audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalScale.
\n',
+ itemtype: 'method',
+ name: 'scale',
+ params: [
+ {
+ name: 'number',
+ description: 'to multiply
\n',
+ type: 'Number'
+ },
+ {
+ name: 'inMin',
+ description: 'input range minumum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'inMax',
+ description: 'input range maximum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'outMin',
+ description: 'input range minumum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'outMax',
+ description: 'input range maximum
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'object',
+ type: 'p5.Signal'
+ },
+ class: 'p5.Signal',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5465,
+ description:
+ 'Start an oscillator. Accepts an optional parameter to\ndetermine how long (in seconds from now) until the\noscillator starts.
\n',
+ itemtype: 'method',
+ name: 'start',
+ params: [
+ {
+ name: 'time',
+ description: 'startTime in seconds from now.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'frequency',
+ description: 'frequency in Hz.
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5505,
+ description:
+ 'Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.
\n',
+ itemtype: 'method',
+ name: 'stop',
+ params: [
+ {
+ name: 'secondsFromNow',
+ description: 'Time, in seconds from now.
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5521,
+ description:
+ 'Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.
\n',
+ itemtype: 'method',
+ name: 'amp',
+ params: [
+ {
+ name: 'vol',
+ description:
+ 'between 0 and 1.0\n or a modulating signal/oscillator
\n',
+ type: 'Number|Object'
+ },
+ {
+ name: 'rampTime',
+ description: 'create a fade that lasts rampTime
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ "gain If no value is provided,\n returns the Web Audio API\n AudioParam that controls\n this oscillator's\n gain/amplitude/volume)",
+ type: 'AudioParam'
+ },
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5556,
+ description:
+ 'Set frequency of an oscillator to a value. Or, pass in an object\nsuch as an oscillator to modulate the frequency with an audio signal.
\n',
+ itemtype: 'method',
+ name: 'freq',
+ params: [
+ {
+ name: 'Frequency',
+ description:
+ 'Frequency in Hz\n or modulating signal/oscillator
\n',
+ type: 'Number|Object'
+ },
+ {
+ name: 'rampTime',
+ description: 'Ramp time (in seconds)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'Schedule this event to happen\n at x seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ "Frequency If no value is provided,\n returns the Web Audio API\n AudioParam that controls\n this oscillator's frequency",
+ type: 'AudioParam'
+ },
+ example: [
+ '\n\nlet osc = new p5.Oscillator(300);\nosc.start();\nosc.freq(40, 10);\n'
+ ],
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5615,
+ description:
+ 'Set type to 'sine', 'triangle', 'sawtooth' or 'square'.
\n',
+ itemtype: 'method',
+ name: 'setType',
+ params: [
+ {
+ name: 'type',
+ description:
+ ''sine', 'triangle', 'sawtooth' or 'square'.
\n',
+ type: 'String'
+ }
+ ],
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5627,
+ description: 'Connect to a p5.sound / Web Audio object.
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description: 'A p5.sound or Web Audio object
\n',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5644,
+ description: 'Disconnect all outputs
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5661,
+ description: 'Pan between Left (-1) and Right (1)
\n',
+ itemtype: 'method',
+ name: 'pan',
+ params: [
+ {
+ name: 'panning',
+ description: 'Number between -1 and 1
\n',
+ type: 'Number'
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5693,
+ description:
+ 'Set the phase of an oscillator between 0.0 and 1.0.\nIn this implementation, phase is a delay time\nbased on the oscillator's current frequency.
\n',
+ itemtype: 'method',
+ name: 'phase',
+ params: [
+ {
+ name: 'phase',
+ description: 'float between 0.0 and 1.0
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5747,
+ description:
+ 'Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method again\nwill override the initial add() with a new value.
\n',
+ itemtype: 'method',
+ name: 'add',
+ params: [
+ {
+ name: 'number',
+ description: 'Constant number to add
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description:
+ 'Oscillator Returns this oscillator\n with scaled output',
+ type: 'p5.Oscillator'
+ },
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5764,
+ description:
+ 'Multiply the p5.Oscillator's output amplitude\nby a fixed value (i.e. turn it up!). Calling this method\nagain will override the initial mult() with a new value.
\n',
+ itemtype: 'method',
+ name: 'mult',
+ params: [
+ {
+ name: 'number',
+ description: 'Constant number to multiply
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description:
+ 'Oscillator Returns this oscillator\n with multiplied output',
+ type: 'p5.Oscillator'
+ },
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5780,
+ description:
+ 'Scale this oscillator's amplitude values to a given\nrange, and return the oscillator. Calling this method\nagain will override the initial scale() with new values.
\n',
+ itemtype: 'method',
+ name: 'scale',
+ params: [
+ {
+ name: 'inMin',
+ description: 'input range minumum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'inMax',
+ description: 'input range maximum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'outMin',
+ description: 'input range minumum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'outMax',
+ description: 'input range maximum
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description:
+ 'Oscillator Returns this oscillator\n with scaled output',
+ type: 'p5.Oscillator'
+ },
+ class: 'p5.Oscillator',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 5879,
+ class: 'p5.SqrOsc',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6082,
+ class: 'p5.SqrOsc',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6369,
+ description: 'Time until envelope reaches attackLevel
\n',
+ itemtype: 'property',
+ name: 'attackTime',
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6374,
+ description: 'Level once attack is complete.
\n',
+ itemtype: 'property',
+ name: 'attackLevel',
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6379,
+ description: 'Time until envelope reaches decayLevel.
\n',
+ itemtype: 'property',
+ name: 'decayTime',
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6384,
+ description:
+ 'Level after decay. The envelope will sustain here until it is released.
\n',
+ itemtype: 'property',
+ name: 'decayLevel',
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6389,
+ description: 'Duration of the release portion of the envelope.
\n',
+ itemtype: 'property',
+ name: 'releaseTime',
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6394,
+ description: 'Level at the end of the release.
\n',
+ itemtype: 'property',
+ name: 'releaseLevel',
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6430,
+ description:
+ 'Reset the envelope with a series of time/value pairs.
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'attackTime',
+ description:
+ 'Time (in seconds) before level\n reaches attackLevel
\n',
+ type: 'Number'
+ },
+ {
+ name: 'attackLevel',
+ description:
+ 'Typically an amplitude between\n 0.0 and 1.0
\n',
+ type: 'Number'
+ },
+ {
+ name: 'decayTime',
+ description: 'Time
\n',
+ type: 'Number'
+ },
+ {
+ name: 'decayLevel',
+ description:
+ 'Amplitude (In a standard ADSR envelope,\n decayLevel = sustainLevel)
\n',
+ type: 'Number'
+ },
+ {
+ name: 'releaseTime',
+ description: 'Release Time (in seconds)
\n',
+ type: 'Number'
+ },
+ {
+ name: 'releaseLevel',
+ description: 'Amplitude
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\nlet t1 = 0.1; // attack time in seconds\nlet l1 = 0.7; // attack level 0.0 to 1.0\nlet t2 = 0.3; // decay time in seconds\nlet l2 = 0.1; // decay level 0.0 to 1.0\nlet t3 = 0.2; // sustain time in seconds\nlet l3 = 0.5; // sustain level 0.0 to 1.0\n// release level defaults to zero\n\nlet env;\nlet triOsc;\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Envelope(t1, l1, t2, l2, t3, l3);\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env); // give the env control of the triOsc's amp\n triOsc.start();\n}\n\n// mouseClick triggers envelope if over canvas\nfunction mouseClicked() {\n // is mouse over canvas?\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n env.play(triOsc);\n }\n}\n\n"
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6489,
+ description:
+ 'Set values like a traditional\n\nADSR envelope\n.
\n',
+ itemtype: 'method',
+ name: 'setADSR',
+ params: [
+ {
+ name: 'attackTime',
+ description:
+ 'Time (in seconds before envelope\n reaches Attack Level
\n',
+ type: 'Number'
+ },
+ {
+ name: 'decayTime',
+ description:
+ 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'susRatio',
+ description:
+ 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'releaseTime',
+ description: 'Time in seconds from now (defaults to 0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(playEnv);\n}\n\nfunction playEnv() {\n env.play();\n}\n"
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6554,
+ description:
+ 'Set max (attackLevel) and min (releaseLevel) of envelope.
\n',
+ itemtype: 'method',
+ name: 'setRange',
+ params: [
+ {
+ name: 'aLevel',
+ description: 'attack level (defaults to 1)
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rLevel',
+ description: 'release level (defaults to 0)
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(playEnv);\n}\n\nfunction playEnv() {\n env.play();\n}\n"
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6633,
+ description:
+ 'Assign a parameter to be controlled by this envelope.\nIf a p5.Sound object is given, then the p5.Envelope will control its\noutput gain. If multiple inputs are provided, the env will\ncontrol all of them.
\n',
+ itemtype: 'method',
+ name: 'setInput',
+ params: [
+ {
+ name: 'inputs',
+ description:
+ 'A p5.sound object or\n Web Audio Param.
\n',
+ type: 'Object',
+ optional: true,
+ multiple: true
+ }
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6648,
+ description:
+ 'Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.
\n',
+ itemtype: 'method',
+ name: 'setExp',
+ params: [
+ {
+ name: 'isExp',
+ description: 'true is exponential, false is linear
\n',
+ type: 'Boolean'
+ }
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6666,
+ description:
+ 'Play tells the envelope to start acting on a given input.\nIf the input is a p5.sound object (i.e. AudioIn, Oscillator,\nSoundFile), then Envelope will control its output volume.\nEnvelopes can also be used to control any \nWeb Audio Audio Param.
\n',
+ itemtype: 'method',
+ name: 'play',
+ params: [
+ {
+ name: 'unit',
+ description:
+ 'A p5.sound object or\n Web Audio Param.
\n',
+ type: 'Object'
+ },
+ {
+ name: 'startTime',
+ description: 'time from now (in seconds) at which to play
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'sustainTime',
+ description: 'time to sustain before releasing the envelope
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(playEnv);\n}\n\nfunction playEnv() {\n // trigger env on triOsc, 0 seconds from now\n // After decay, sustain for 0.2 seconds before release\n env.play(triOsc, 0, 0.2);\n}\n"
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6727,
+ description:
+ 'Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go. Input can be\nany p5.sound object, or a \nWeb Audio Param.
\n',
+ itemtype: 'method',
+ name: 'triggerAttack',
+ params: [
+ {
+ name: 'unit',
+ description: 'p5.sound Object or Web Audio Param
\n',
+ type: 'Object'
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'time from now (in seconds)
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\n\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.3;\nlet susPercent = 0.4;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(200);\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack() {\n console.log('trigger attack');\n env.triggerAttack();\n\n background(0,255,0);\n text('attack!', width/2, height/2);\n}\n\nfunction mouseReleased() {\n env.triggerRelease();\n\n background(200);\n text('click to play', width/2, height/2);\n}\n"
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6834,
+ description:
+ 'Trigger the Release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.
\n',
+ itemtype: 'method',
+ name: 'triggerRelease',
+ params: [
+ {
+ name: 'unit',
+ description: 'p5.sound Object or Web Audio Param
\n',
+ type: 'Object'
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'time to trigger the release
\n',
+ type: 'Number'
+ }
+ ],
+ example: [
+ "\n\n\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.3;\nlet susPercent = 0.4;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(200);\n textAlign(CENTER);\n text('click to play', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.start();\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack() {\n console.log('trigger attack');\n env.triggerAttack();\n\n background(0,255,0);\n text('attack!', width/2, height/2);\n}\n\nfunction mouseReleased() {\n env.triggerRelease();\n\n background(200);\n text('click to play', width/2, height/2);\n}\n"
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 6931,
+ description:
+ 'Exponentially ramp to a value using the first two\nvalues from setADSR(attackTime, decayTime)\nas \ntime constants for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.
\n',
+ itemtype: 'method',
+ name: 'ramp',
+ params: [
+ {
+ name: 'unit',
+ description: 'p5.sound Object or Web Audio Param
\n',
+ type: 'Object'
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'When to trigger the ramp
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v',
+ description: 'Target value
\n',
+ type: 'Number'
+ },
+ {
+ name: 'v2',
+ description: 'Second target value (optional)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet env, osc, amp, cnv;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet attackLevel = 1;\nlet decayLevel = 0;\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n fill(0,255,0);\n noStroke();\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime);\n\n osc = new p5.Oscillator();\n osc.amp(env);\n osc.start();\n\n amp = new p5.Amplitude();\n\n cnv.mousePressed(triggerRamp);\n}\n\nfunction triggerRamp() {\n env.ramp(osc, 0, attackLevel, decayLevel);\n}\n\nfunction draw() {\n background(20,20,20);\n text('click me', 10, 20);\n let h = map(amp.getLevel(), 0, 0.4, 0, height);;\n\n rect(0, height, width, -h);\n}\n"
+ ],
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7038,
+ description:
+ 'Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method\nagain will override the initial add() with new values.
\n',
+ itemtype: 'method',
+ name: 'add',
+ params: [
+ {
+ name: 'number',
+ description: 'Constant number to add
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description:
+ 'Envelope Returns this envelope\n with scaled output',
+ type: 'p5.Envelope'
+ },
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7054,
+ description:
+ 'Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.
\n',
+ itemtype: 'method',
+ name: 'mult',
+ params: [
+ {
+ name: 'number',
+ description: 'Constant number to multiply
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description:
+ 'Envelope Returns this envelope\n with scaled output',
+ type: 'p5.Envelope'
+ },
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7070,
+ description:
+ 'Scale this envelope's amplitude values to a given\nrange, and return the envelope. Calling this method\nagain will override the initial scale() with new values.
\n',
+ itemtype: 'method',
+ name: 'scale',
+ params: [
+ {
+ name: 'inMin',
+ description: 'input range minumum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'inMax',
+ description: 'input range maximum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'outMin',
+ description: 'input range minumum
\n',
+ type: 'Number'
+ },
+ {
+ name: 'outMax',
+ description: 'input range maximum
\n',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description:
+ 'Envelope Returns this envelope\n with scaled output',
+ type: 'p5.Envelope'
+ },
+ class: 'p5.Envelope',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7178,
+ description:
+ 'Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).
\n',
+ itemtype: 'method',
+ name: 'width',
+ params: [
+ {
+ name: 'width',
+ description:
+ 'Width between the pulses (0 to 1.0,\n defaults to 0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Pulse',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7365,
+ description:
+ 'Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.
\n',
+ itemtype: 'method',
+ name: 'setType',
+ params: [
+ {
+ name: 'type',
+ description:
+ ''white', 'pink' or 'brown'
\n',
+ type: 'String',
+ optional: true
+ }
+ ],
+ class: 'p5.Noise',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7478,
+ itemtype: 'property',
+ name: 'input',
+ type: 'GainNode',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7482,
+ itemtype: 'property',
+ name: 'output',
+ type: 'GainNode',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7486,
+ itemtype: 'property',
+ name: 'stream',
+ type: 'MediaStream|null',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7490,
+ itemtype: 'property',
+ name: 'mediaStream',
+ type: 'MediaStreamAudioSourceNode|null',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7494,
+ itemtype: 'property',
+ name: 'currentSource',
+ type: 'Number|null',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7498,
+ description:
+ 'Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.
\n',
+ itemtype: 'property',
+ name: 'enabled',
+ type: 'Boolean',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7505,
+ description:
+ 'Input amplitude, connect to it by default but not to master out
\n',
+ itemtype: 'property',
+ name: 'amplitude',
+ type: 'p5.Amplitude',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7518,
+ description:
+ 'Start processing audio input. This enables the use of other\nAudioIn methods like getLevel(). Note that by default, AudioIn\nis not connected to p5.sound's output. So you won't hear\nanything unless you use the connect() method.
\nCertain browsers limit access to the user's microphone. For example,\nChrome only allows access from localhost and over https. For this reason,\nyou may want to include an errorCallback—a function that is called in case\nthe browser won't provide mic access.
\n',
+ itemtype: 'method',
+ name: 'start',
+ params: [
+ {
+ name: 'successCallback',
+ description:
+ 'Name of a function to call on\n success.
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'Name of a function to call if\n there was an error. For example,\n some browsers do not support\n getUserMedia.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7571,
+ description:
+ 'Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.
\n',
+ itemtype: 'method',
+ name: 'stop',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7587,
+ description:
+ 'Connect to an audio unit. If no parameter is provided, will\nconnect to the master output (i.e. your speakers).
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description:
+ 'An object that accepts audio input,\n such as an FFT
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7608,
+ description:
+ 'Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7622,
+ description:
+ 'Read the Amplitude (volume level) of an AudioIn. The AudioIn\nclass contains its own instance of the Amplitude class to help\nmake it easy to get a microphone's volume level. Accepts an\noptional smoothing value (0.0 < 1.0). NOTE: AudioIn must\n.start() before using .getLevel().
\n',
+ itemtype: 'method',
+ name: 'getLevel',
+ params: [
+ {
+ name: 'smoothing',
+ description:
+ 'Smoothing is 0.0 by default.\n Smooths values based on previous values.
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'Volume level (between 0.0 and 1.0)',
+ type: 'Number'
+ },
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7640,
+ description:
+ 'Set amplitude (volume) of a mic input between 0 and 1.0.
\n',
+ itemtype: 'method',
+ name: 'amp',
+ params: [
+ {
+ name: 'vol',
+ description: 'between 0 and 1.0
\n',
+ type: 'Number'
+ },
+ {
+ name: 'time',
+ description: 'ramp time (optional)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7659,
+ description:
+ 'Returns a list of available input sources. This is a wrapper\nfor <a title="MediaDevices.enumerateDevices() - Web APIs | MDN" target="_blank" href=\n "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices"
\n\nand it returns a Promise.
\n
\n',
+ itemtype: 'method',
+ name: 'getSources',
+ params: [
+ {
+ name: 'successCallback',
+ description:
+ 'This callback function handles the sources when they\n have been enumerated. The callback function\n receives the deviceList array as its only argument
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'This optional callback receives the error\n message as its argument.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description:
+ 'Returns a Promise that can be used in place of the callbacks, similar\n to the enumerateDevices() method',
+ type: 'Promise'
+ },
+ example: [
+ '\n \n let audiograb;\n\n function setup(){\n //new audioIn\n audioGrab = new p5.AudioIn();\n\n audioGrab.getSources(function(deviceList) {\n //print out the array of available sources\n console.log(deviceList);\n //set the source to the first item in the deviceList array\n audioGrab.setSource(0);\n });\n }\n '
+ ],
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7710,
+ description:
+ 'Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n<a title="MediaDevices.enumerateDevices() - Web APIs | MDN" target="_blank" href=\n"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices"
\n\nnavigator.mediaDevices.enumerateDevices().
\n
\n',
+ itemtype: 'method',
+ name: 'setSource',
+ params: [
+ {
+ name: 'num',
+ description: 'position of input source in the array
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7750,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7766,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7790,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7816,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7838,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7860,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7906,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7937,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 7955,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8292,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8314,
+ class: 'p5.AudioIn',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8390,
+ description:
+ 'In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter
\n',
+ class: 'p5.Effect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8403,
+ description: 'Set the output volume of the filter.
\n',
+ itemtype: 'method',
+ name: 'amp',
+ params: [
+ {
+ name: 'vol',
+ description: 'amplitude between 0 and 1.0
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'rampTime',
+ description: 'create a fade that lasts until rampTime
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'tFromNow',
+ description:
+ 'schedule this event to happen in tFromNow seconds
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Effect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8420,
+ description:
+ 'Link effects together in a chain
Example usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments
\n',
+ itemtype: 'method',
+ name: 'chain',
+ params: [
+ {
+ name: 'arguments',
+ description: 'Chain together multiple sound objects
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ class: 'p5.Effect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8437,
+ description: 'Adjust the dry/wet value.
\n',
+ itemtype: 'method',
+ name: 'drywet',
+ params: [
+ {
+ name: 'fade',
+ description: 'The desired drywet value (0 - 1.0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Effect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8449,
+ description:
+ 'Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description: '',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.Effect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8460,
+ description: 'Disconnect all output.
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.Effect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8578,
+ description:
+ 'The p5.Filter is built with a\n\nWeb Audio BiquadFilter Node.
\n',
+ itemtype: 'property',
+ name: 'biquadFilter',
+ type: 'DelayNode',
+ class: 'p5.Filter',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8596,
+ description:
+ 'Filter an audio signal according to a set\nof filter parameters.
\n',
+ itemtype: 'method',
+ name: 'process',
+ params: [
+ {
+ name: 'Signal',
+ description: 'An object that outputs audio
\n',
+ type: 'Object'
+ },
+ {
+ name: 'freq',
+ description: 'Frequency in Hz, from 10 to 22050
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'res',
+ description:
+ 'Resonance/Width of the filter frequency\n from 0.001 to 1000
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Filter',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8610,
+ description: 'Set the frequency and the resonance of the filter.
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'freq',
+ description: 'Frequency in Hz, from 10 to 22050
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'res',
+ description: 'Resonance (Q) from 0.001 to 1000
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Filter',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8627,
+ description:
+ 'Set the filter frequency, in Hz, from 10 to 22050 (the range of\nhuman hearing, although in reality most people hear in a narrower\nrange).
\n',
+ itemtype: 'method',
+ name: 'freq',
+ params: [
+ {
+ name: 'freq',
+ description: 'Filter Frequency
\n',
+ type: 'Number'
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'value Returns the current frequency value',
+ type: 'Number'
+ },
+ class: 'p5.Filter',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8651,
+ description:
+ 'Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.
\n',
+ itemtype: 'method',
+ name: 'res',
+ params: [
+ {
+ name: 'res',
+ description:
+ 'Resonance/Width of filter freq\n from 0.001 to 1000
\n',
+ type: 'Number'
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'value Returns the current res value',
+ type: 'Number'
+ },
+ class: 'p5.Filter',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8673,
+ description:
+ 'Controls the gain attribute of a Biquad Filter.\nThis is distinctly different from .amp() which is inherited from p5.Effect\n.amp() controls the volume via the output gain node\np5.Filter.gain() controls the gain parameter of a Biquad Filter node.
\n',
+ itemtype: 'method',
+ name: 'gain',
+ params: [
+ {
+ name: 'gain',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'Returns the current or updated gain value',
+ type: 'Number'
+ },
+ class: 'p5.Filter',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8694,
+ description:
+ 'Toggle function. Switches between the specified type and allpass
\n',
+ itemtype: 'method',
+ name: 'toggle',
+ return: {
+ description: '[Toggle value]',
+ type: 'Boolean'
+ },
+ class: 'p5.Filter',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8709,
+ description:
+ 'Set the type of a p5.Filter. Possible types include:\n"lowpass" (default), "highpass", "bandpass",\n"lowshelf", "highshelf", "peaking", "notch",\n"allpass".
\n',
+ itemtype: 'method',
+ name: 'setType',
+ params: [
+ {
+ name: 't',
+ description: '',
+ type: 'String'
+ }
+ ],
+ class: 'p5.Filter',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8916,
+ description:
+ 'The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the \np5.Filter API, especially gain and freq.\nBands are stored in an array, with indices 0 - 3, or 0 - 7
\n',
+ itemtype: 'property',
+ name: 'bands',
+ type: 'Array',
+ class: 'p5.EQ',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 8951,
+ description: 'Process an input by connecting it to the EQ
\n',
+ itemtype: 'method',
+ name: 'process',
+ params: [
+ {
+ name: 'src',
+ description: 'Audio source
\n',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.EQ',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9039,
+ description:
+ '\nWeb Audio Spatial Panner Node
\nProperties include
\n\n- <a title="w3 spec for Panning Model"\nhref="https://www.w3.org/TR/webaudio/#idl-def-PanningModelType"
\npanningModel: "equal power" or "HRTF"
\n
\n \n- <a title="w3 spec for Distance Model"\nhref="https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType"
\ndistanceModel: "linear", "inverse", or "exponential"
\n
\n \n
\n',
+ itemtype: 'property',
+ name: 'panner',
+ type: 'AudioNode',
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9062,
+ description: 'Connect an audio sorce
\n',
+ itemtype: 'method',
+ name: 'process',
+ params: [
+ {
+ name: 'src',
+ description: 'Input source
\n',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9071,
+ description: 'Set the X,Y,Z position of the Panner
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'xVal',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'yVal',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'zVal',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'time',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'Updated x, y, z values as an array',
+ type: 'Array'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9090,
+ description: 'Getter and setter methods for position coordinates
\n',
+ itemtype: 'method',
+ name: 'positionX',
+ return: {
+ description: 'updated coordinate value',
+ type: 'Number'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9095,
+ description: 'Getter and setter methods for position coordinates
\n',
+ itemtype: 'method',
+ name: 'positionY',
+ return: {
+ description: 'updated coordinate value',
+ type: 'Number'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9100,
+ description: 'Getter and setter methods for position coordinates
\n',
+ itemtype: 'method',
+ name: 'positionZ',
+ return: {
+ description: 'updated coordinate value',
+ type: 'Number'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9138,
+ description: 'Set the X,Y,Z position of the Panner
\n',
+ itemtype: 'method',
+ name: 'orient',
+ params: [
+ {
+ name: 'xVal',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'yVal',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'zVal',
+ description: '',
+ type: 'Number'
+ },
+ {
+ name: 'time',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'Updated x, y, z values as an array',
+ type: 'Array'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9157,
+ description: 'Getter and setter methods for orient coordinates
\n',
+ itemtype: 'method',
+ name: 'orientX',
+ return: {
+ description: 'updated coordinate value',
+ type: 'Number'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9162,
+ description: 'Getter and setter methods for orient coordinates
\n',
+ itemtype: 'method',
+ name: 'orientY',
+ return: {
+ description: 'updated coordinate value',
+ type: 'Number'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9167,
+ description: 'Getter and setter methods for orient coordinates
\n',
+ itemtype: 'method',
+ name: 'orientZ',
+ return: {
+ description: 'updated coordinate value',
+ type: 'Number'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9205,
+ description: 'Set the rolloff factor and max distance
\n',
+ itemtype: 'method',
+ name: 'setFalloff',
+ params: [
+ {
+ name: 'maxDistance',
+ description: '',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'rolloffFactor',
+ description: '',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9215,
+ description: 'Maxium distance between the source and the listener
\n',
+ itemtype: 'method',
+ name: 'maxDist',
+ params: [
+ {
+ name: 'maxDistance',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'updated value',
+ type: 'Number'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9227,
+ description:
+ 'How quickly the volume is reduced as the source moves away from the listener
\n',
+ itemtype: 'method',
+ name: 'rollof',
+ params: [
+ {
+ name: 'rolloffFactor',
+ description: '',
+ type: 'Number'
+ }
+ ],
+ return: {
+ description: 'updated value',
+ type: 'Number'
+ },
+ class: 'p5.Panner3D',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9532,
+ description:
+ 'The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.
\n',
+ itemtype: 'property',
+ name: 'leftDelay',
+ type: 'DelayNode',
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9540,
+ description:
+ 'The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.
\n',
+ itemtype: 'property',
+ name: 'rightDelay',
+ type: 'DelayNode',
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9572,
+ description:
+ 'Add delay to an audio signal according to a set\nof delay parameters.
\n',
+ itemtype: 'method',
+ name: 'process',
+ params: [
+ {
+ name: 'Signal',
+ description: 'An object that outputs audio
\n',
+ type: 'Object'
+ },
+ {
+ name: 'delayTime',
+ description:
+ 'Time (in seconds) of the delay/echo.\n Some browsers limit delayTime to\n 1 second.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'feedback',
+ description:
+ 'sends the delay back through itself\n in a loop that decreases in volume\n each time.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'lowPass',
+ description:
+ 'Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9607,
+ description:
+ 'Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.
\n',
+ itemtype: 'method',
+ name: 'delayTime',
+ params: [
+ {
+ name: 'delayTime',
+ description: 'Time (in seconds) of the delay
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9626,
+ description:
+ 'Feedback occurs when Delay sends its signal back through its input\nin a loop. The feedback amount determines how much signal to send each\ntime through the loop. A feedback greater than 1.0 is not desirable because\nit will increase the overall output each time through the loop,\ncreating an infinite feedback loop. The default value is 0.5
\n',
+ itemtype: 'method',
+ name: 'feedback',
+ params: [
+ {
+ name: 'feedback',
+ description:
+ '0.0 to 1.0, or an object such as an\n Oscillator that can be used to\n modulate this param
\n',
+ type: 'Number|Object'
+ }
+ ],
+ return: {
+ description: 'Feedback value',
+ type: 'Number'
+ },
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9654,
+ description:
+ 'Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.
\n',
+ itemtype: 'method',
+ name: 'filter',
+ params: [
+ {
+ name: 'cutoffFreq',
+ description:
+ 'A lowpass filter will cut off any\n frequencies higher than the filter frequency.
\n',
+ type: 'Number|Object'
+ },
+ {
+ name: 'res',
+ description:
+ 'Resonance of the filter frequency\n cutoff, or an object (i.e. a p5.Oscillator)\n that can be used to modulate this parameter.\n High numbers (i.e. 15) will produce a resonance,\n low numbers (i.e. .2) will produce a slope.
\n',
+ type: 'Number|Object'
+ }
+ ],
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9671,
+ description:
+ 'Choose a preset type of delay. 'pingPong' bounces the signal\nfrom the left to the right channel to produce a stereo effect.\nAny other parameter will revert to the default delay setting.
\n',
+ itemtype: 'method',
+ name: 'setType',
+ params: [
+ {
+ name: 'type',
+ description: ''pingPong' (1) or 'default' (0)
\n',
+ type: 'String|Number'
+ }
+ ],
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9704,
+ description: 'Set the output level of the delay effect.
\n',
+ itemtype: 'method',
+ name: 'amp',
+ params: [
+ {
+ name: 'volume',
+ description: 'amplitude between 0 and 1.0
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rampTime',
+ description: 'create a fade that lasts rampTime
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9713,
+ description: 'Send output to a p5.sound or web audio object
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description: '',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9719,
+ description: 'Disconnect all output.
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.Delay',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9812,
+ description:
+ 'Connect a source to the reverb, and assign reverb parameters.
\n',
+ itemtype: 'method',
+ name: 'process',
+ params: [
+ {
+ name: 'src',
+ description:
+ 'p5.sound / Web Audio object with a sound\n output.
\n',
+ type: 'Object'
+ },
+ {
+ name: 'seconds',
+ description:
+ 'Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'decayRate',
+ description:
+ 'Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'reverse',
+ description: 'Play the reverb backwards or forwards.
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ class: 'p5.Reverb',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9841,
+ description:
+ 'Set the reverb settings. Similar to .process(), but without\nassigning a new input.
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'seconds',
+ description:
+ 'Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'decayRate',
+ description:
+ 'Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'reverse',
+ description: 'Play the reverb backwards or forwards.
\n',
+ type: 'Boolean',
+ optional: true
+ }
+ ],
+ class: 'p5.Reverb',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9869,
+ description: 'Set the output level of the reverb effect.
\n',
+ itemtype: 'method',
+ name: 'amp',
+ params: [
+ {
+ name: 'volume',
+ description: 'amplitude between 0 and 1.0
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rampTime',
+ description: 'create a fade that lasts rampTime
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Reverb',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9878,
+ description: 'Send output to a p5.sound or web audio object
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description: '',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.Reverb',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9884,
+ description: 'Disconnect all output.
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.Reverb',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9975,
+ description:
+ 'Internally, the p5.Convolver uses the a\n\nWeb Audio Convolver Node.
\n',
+ itemtype: 'property',
+ name: 'convolverNode',
+ type: 'ConvolverNode',
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 9998,
+ description:
+ 'Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.
\n',
+ itemtype: 'method',
+ name: 'createConvolver',
+ params: [
+ {
+ name: 'path',
+ description: 'path to a sound file
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description:
+ 'function to call if loading is successful.\n The object will be passed in as the argument\n to the callback function.
\n',
+ type: 'Function',
+ optional: true
+ },
+ {
+ name: 'errorCallback',
+ description:
+ 'function to call if loading is not successful.\n A custom error will be passed in as the argument\n to the callback function.
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ return: {
+ description: '',
+ type: 'p5.Convolver'
+ },
+ example: [
+ "\n\nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n // disconnect from master output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n\n sound.play();\n}\n"
+ ],
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10122,
+ description:
+ 'Connect a source to the reverb, and assign reverb parameters.
\n',
+ itemtype: 'method',
+ name: 'process',
+ params: [
+ {
+ name: 'src',
+ description:
+ 'p5.sound / Web Audio object with a sound\n output.
\n',
+ type: 'Object'
+ }
+ ],
+ example: [
+ "\n\nlet cVerb, sound;\nfunction preload() {\n soundFormats('ogg', 'mp3');\n\n cVerb = createConvolver('assets/concrete-tunnel.mp3');\n\n sound = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n // disconnect from master output...\n sound.disconnect();\n\n // ...and process with (i.e. connect to) cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n\n sound.play();\n}\n"
+ ],
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10154,
+ description:
+ 'If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the toggleImpulse(id) method.
\n',
+ itemtype: 'property',
+ name: 'impulses',
+ type: 'Array',
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10162,
+ description:
+ 'Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the .impulses array. Previous\nimpulses can be accessed with the .toggleImpulse(id)\nmethod.
\n',
+ itemtype: 'method',
+ name: 'addImpulse',
+ params: [
+ {
+ name: 'path',
+ description: 'path to a sound file
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: 'function (optional)
\n',
+ type: 'Function'
+ },
+ {
+ name: 'errorCallback',
+ description: 'function (optional)
\n',
+ type: 'Function'
+ }
+ ],
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10180,
+ description:
+ 'Similar to .addImpulse, except that the .impulses\nArray is reset to save memory. A new .impulses\narray is created with this impulse as the only item.
\n',
+ itemtype: 'method',
+ name: 'resetImpulse',
+ params: [
+ {
+ name: 'path',
+ description: 'path to a sound file
\n',
+ type: 'String'
+ },
+ {
+ name: 'callback',
+ description: 'function (optional)
\n',
+ type: 'Function'
+ },
+ {
+ name: 'errorCallback',
+ description: 'function (optional)
\n',
+ type: 'Function'
+ }
+ ],
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10198,
+ description:
+ 'If you have used .addImpulse() to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the .impulses Array. Accepts a parameter\nto identify which impulse you wish to use, identified either by its\noriginal filename (String) or by its position in the .impulses\n Array (Number).
\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an .audioBuffer (type:\nWeb Audio \nAudioBuffer) and a .name, a String that corresponds\nwith the original filename.
\n',
+ itemtype: 'method',
+ name: 'toggleImpulse',
+ params: [
+ {
+ name: 'id',
+ description:
+ 'Identify the impulse by its original filename\n (String), or by its position in the\n .impulses Array (Number).
\n',
+ type: 'String|Number'
+ }
+ ],
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10240,
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10265,
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10460,
+ description:
+ 'Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.
\n',
+ itemtype: 'method',
+ name: 'setBPM',
+ params: [
+ {
+ name: 'BPM',
+ description: 'Beats Per Minute
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rampTime',
+ description: 'Seconds from now
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Convolver',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10550,
+ description:
+ 'Array of values to pass into the callback\nat each step of the phrase. Depending on the callback\nfunction's requirements, these values may be numbers,\nstrings, or an object with multiple parameters.\nZero (0) indicates a rest.
\n',
+ itemtype: 'property',
+ name: 'sequence',
+ type: 'Array',
+ class: 'p5.Phrase',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10638,
+ description: 'Set the tempo of this part, in Beats Per Minute.
\n',
+ itemtype: 'method',
+ name: 'setBPM',
+ params: [
+ {
+ name: 'BPM',
+ description: 'Beats Per Minute
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rampTime',
+ description: 'Seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10648,
+ description:
+ 'Returns the tempo, in Beats Per Minute, of this part.
\n',
+ itemtype: 'method',
+ name: 'getBPM',
+ return: {
+ description: '',
+ type: 'Number'
+ },
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10657,
+ description:
+ 'Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.
\n',
+ itemtype: 'method',
+ name: 'start',
+ params: [
+ {
+ name: 'time',
+ description: 'seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10673,
+ description:
+ 'Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.
\n',
+ itemtype: 'method',
+ name: 'loop',
+ params: [
+ {
+ name: 'time',
+ description: 'seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10690,
+ description: 'Tell the part to stop looping.
\n',
+ itemtype: 'method',
+ name: 'noLoop',
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10702,
+ description:
+ 'Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.
\n',
+ itemtype: 'method',
+ name: 'stop',
+ params: [
+ {
+ name: 'time',
+ description: 'seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10712,
+ description:
+ 'Pause the part. Playback will resume\nfrom the current step.
\n',
+ itemtype: 'method',
+ name: 'pause',
+ params: [
+ {
+ name: 'time',
+ description: 'seconds from now
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10724,
+ description: 'Add a p5.Phrase to this Part.
\n',
+ itemtype: 'method',
+ name: 'addPhrase',
+ params: [
+ {
+ name: 'phrase',
+ description: 'reference to a p5.Phrase
\n',
+ type: 'p5.Phrase'
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10745,
+ description:
+ 'Remove a phrase from this part, based on the name it was\ngiven when it was created.
\n',
+ itemtype: 'method',
+ name: 'removePhrase',
+ params: [
+ {
+ name: 'phraseName',
+ description: '',
+ type: 'String'
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10759,
+ description:
+ 'Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.
\n',
+ itemtype: 'method',
+ name: 'getPhrase',
+ params: [
+ {
+ name: 'phraseName',
+ description: '',
+ type: 'String'
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10773,
+ description:
+ 'Find all sequences with the specified name, and replace their patterns with the specified array.
\n',
+ itemtype: 'method',
+ name: 'replaceSequence',
+ params: [
+ {
+ name: 'phraseName',
+ description: '',
+ type: 'String'
+ },
+ {
+ name: 'sequence',
+ description:
+ 'Array of values to pass into the callback\n at each step of the phrase.
\n',
+ type: 'Array'
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10800,
+ description:
+ 'Set the function that will be called at every step. This will clear the previous function.
\n',
+ itemtype: 'method',
+ name: 'onStep',
+ params: [
+ {
+ name: 'callback',
+ description:
+ 'The name of the callback\n you want to fire\n on every beat/tatum.
\n',
+ type: 'Function'
+ }
+ ],
+ class: 'p5.Part',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10853,
+ description: 'Start playback of the score.
\n',
+ itemtype: 'method',
+ name: 'start',
+ class: 'p5.Score',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10862,
+ description: 'Stop playback of the score.
\n',
+ itemtype: 'method',
+ name: 'stop',
+ class: 'p5.Score',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10872,
+ description: 'Pause playback of the score.
\n',
+ itemtype: 'method',
+ name: 'pause',
+ class: 'p5.Score',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10880,
+ description: 'Loop playback of the score.
\n',
+ itemtype: 'method',
+ name: 'loop',
+ class: 'p5.Score',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10889,
+ description:
+ 'Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.
\n',
+ itemtype: 'method',
+ name: 'noLoop',
+ class: 'p5.Score',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10914,
+ description: 'Set the tempo for all parts in the score
\n',
+ itemtype: 'method',
+ name: 'setBPM',
+ params: [
+ {
+ name: 'BPM',
+ description: 'Beats Per Minute
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rampTime',
+ description: 'Seconds from now
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Score',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10982,
+ description:
+ 'musicalTimeMode uses Tone.Time convention\ntrue if string, false if number
\n',
+ itemtype: 'property',
+ name: 'musicalTimeMode',
+ type: 'Boolean',
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10989,
+ description:
+ 'musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string
\n',
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 10996,
+ description:
+ 'Set a limit to the number of loops to play. defaults to Infinity
\n',
+ itemtype: 'property',
+ name: 'maxIterations',
+ type: 'Number',
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11005,
+ description:
+ 'Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded
\nThe callback should only be called until maxIterations is reached
\n',
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11019,
+ description: 'Start the loop
\n',
+ itemtype: 'method',
+ name: 'start',
+ params: [
+ {
+ name: 'timeFromNow',
+ description: 'schedule a starting time
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11032,
+ description: 'Stop the loop
\n',
+ itemtype: 'method',
+ name: 'stop',
+ params: [
+ {
+ name: 'timeFromNow',
+ description: 'schedule a stopping time
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11045,
+ description: 'Pause the loop
\n',
+ itemtype: 'method',
+ name: 'pause',
+ params: [
+ {
+ name: 'timeFromNow',
+ description: 'schedule a pausing time
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11058,
+ description:
+ 'Synchronize loops. Use this method to start two more more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)
\n',
+ itemtype: 'method',
+ name: 'syncedStart',
+ params: [
+ {
+ name: 'otherLoop',
+ description: 'a p5.SoundLoop to sync with
\n',
+ type: 'Object'
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'Start the loops in sync after timeFromNow seconds
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11139,
+ description:
+ 'Getters and Setters, setting any paramter will result in a change in the clock's\nfrequency, that will be reflected after the next callback\nbeats per minute (defaults to 60)
\n',
+ itemtype: 'property',
+ name: 'bpm',
+ type: 'Number',
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11157,
+ description:
+ 'number of quarter notes in a measure (defaults to 4)
\n',
+ itemtype: 'property',
+ name: 'timeSignature',
+ type: 'Number',
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11173,
+ description: 'length of the loops interval
\n',
+ itemtype: 'property',
+ name: 'interval',
+ type: 'Number|String',
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11187,
+ description: 'how many times the callback has been called so far
\n',
+ itemtype: 'property',
+ name: 'iterations',
+ type: 'Number',
+ readonly: '',
+ class: 'p5.SoundLoop',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11228,
+ description:
+ 'The p5.Compressor is built with a Web Audio Dynamics Compressor Node\n
\n',
+ itemtype: 'property',
+ name: 'compressor',
+ type: 'AudioNode',
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11239,
+ description:
+ 'Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams
\n',
+ itemtype: 'method',
+ name: 'process',
+ params: [
+ {
+ name: 'src',
+ description: 'Sound source to be connected
\n',
+ type: 'Object'
+ },
+ {
+ name: 'attack',
+ description:
+ 'The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'knee',
+ description:
+ 'A decibel value representing the range above the \n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'ratio',
+ description:
+ 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'threshold',
+ description:
+ 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'release',
+ description:
+ 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11262,
+ description: 'Set the paramters of a compressor.
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'attack',
+ description:
+ 'The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n',
+ type: 'Number'
+ },
+ {
+ name: 'knee',
+ description:
+ 'A decibel value representing the range above the \n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n',
+ type: 'Number'
+ },
+ {
+ name: 'ratio',
+ description:
+ 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n',
+ type: 'Number'
+ },
+ {
+ name: 'threshold',
+ description:
+ 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n',
+ type: 'Number'
+ },
+ {
+ name: 'release',
+ description:
+ 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n',
+ type: 'Number'
+ }
+ ],
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11294,
+ description: 'Get current attack or set value w/ time ramp
\n',
+ itemtype: 'method',
+ name: 'attack',
+ params: [
+ {
+ name: 'attack',
+ description:
+ 'Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'time',
+ description:
+ 'Assign time value to schedule the change in value
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11314,
+ description: 'Get current knee or set value w/ time ramp
\n',
+ itemtype: 'method',
+ name: 'knee',
+ params: [
+ {
+ name: 'knee',
+ description:
+ 'A decibel value representing the range above the \n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'time',
+ description:
+ 'Assign time value to schedule the change in value
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11334,
+ description: 'Get current ratio or set value w/ time ramp
\n',
+ itemtype: 'method',
+ name: 'ratio',
+ params: [
+ {
+ name: 'ratio',
+ description:
+ 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'time',
+ description:
+ 'Assign time value to schedule the change in value
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11353,
+ description: 'Get current threshold or set value w/ time ramp
\n',
+ itemtype: 'method',
+ name: 'threshold',
+ params: [
+ {
+ name: 'threshold',
+ description:
+ 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n',
+ type: 'Number'
+ },
+ {
+ name: 'time',
+ description:
+ 'Assign time value to schedule the change in value
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11372,
+ description: 'Get current release or set value w/ time ramp
\n',
+ itemtype: 'method',
+ name: 'release',
+ params: [
+ {
+ name: 'release',
+ description:
+ 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n',
+ type: 'Number'
+ },
+ {
+ name: 'time',
+ description:
+ 'Assign time value to schedule the change in value
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11392,
+ description: 'Return the current reduction value
\n',
+ itemtype: 'method',
+ name: 'reduction',
+ return: {
+ description:
+ 'Value of the amount of gain reduction that is applied to the signal',
+ type: 'Number'
+ },
+ class: 'p5.Compressor',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11508,
+ description:
+ 'Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.
\n',
+ itemtype: 'method',
+ name: 'setInput',
+ params: [
+ {
+ name: 'unit',
+ description:
+ 'p5.sound object or a web audio unit\n that outputs sound
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundRecorder',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11529,
+ description:
+ 'Start recording. To access the recording, provide\na p5.SoundFile as the first parameter. The p5.SoundRecorder\nwill send its recording to that p5.SoundFile for playback once\nrecording is complete. Optional parameters include duration\n(in seconds) of the recording, and a callback function that\nwill be called once the complete recording has been\ntransfered to the p5.SoundFile.
\n',
+ itemtype: 'method',
+ name: 'record',
+ params: [
+ {
+ name: 'soundFile',
+ description: 'p5.SoundFile
\n',
+ type: 'p5.SoundFile'
+ },
+ {
+ name: 'duration',
+ description: 'Time (in seconds)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'callback',
+ description:
+ 'The name of a function that will be\n called once the recording completes
\n',
+ type: 'Function',
+ optional: true
+ }
+ ],
+ class: 'p5.SoundRecorder',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11562,
+ description:
+ 'Stop the recording. Once the recording is stopped,\nthe results will be sent to the p5.SoundFile that\nwas given on .record(), and if a callback function\nwas provided on record, that function will be called.
\n',
+ itemtype: 'method',
+ name: 'stop',
+ class: 'p5.SoundRecorder',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11635,
+ description:
+ 'Save a p5.SoundFile as a .wav file. The browser will prompt the user\nto download the file to their device.\nFor uploading audio to a server, use\np5.SoundFile.saveBlob.
\n',
+ itemtype: 'method',
+ name: 'saveSound',
+ params: [
+ {
+ name: 'soundFile',
+ description: 'p5.SoundFile that you wish to save
\n',
+ type: 'p5.SoundFile'
+ },
+ {
+ name: 'fileName',
+ description: 'name of the resulting .wav file.
\n',
+ type: 'String'
+ }
+ ],
+ class: 'p5',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11761,
+ description: 'isDetected is set to true when a peak is detected.
\n',
+ itemtype: 'attribute',
+ name: 'isDetected',
+ type: 'Boolean',
+ default: 'false',
+ class: 'p5.PeakDetect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11774,
+ description:
+ 'The update method is run in the draw loop.
\nAccepts an FFT object. You must call .analyze()\non the FFT object prior to updating the peakDetect\nbecause it relies on a completed FFT analysis.
\n',
+ itemtype: 'method',
+ name: 'update',
+ params: [
+ {
+ name: 'fftObject',
+ description: 'A p5.FFT object
\n',
+ type: 'p5.FFT'
+ }
+ ],
+ class: 'p5.PeakDetect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11805,
+ description:
+ 'onPeak accepts two arguments: a function to call when\na peak is detected. The value of the peak,\nbetween 0.0 and 1.0, is passed to the callback.
\n',
+ itemtype: 'method',
+ name: 'onPeak',
+ params: [
+ {
+ name: 'callback',
+ description:
+ 'Name of a function that will\n be called when a peak is\n detected.
\n',
+ type: 'Function'
+ },
+ {
+ name: 'val',
+ description:
+ 'Optional value to pass\n into the function when\n a peak is detected.
\n',
+ type: 'Object',
+ optional: true
+ }
+ ],
+ example: [
+ "\n\nlet cnv, soundFile, fft, peakDetect;\nlet ellipseWidth = 0;\n\nfunction preload() {\n soundFile = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n cnv = createCanvas(100,100);\n textAlign(CENTER);\n\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n\n setupSound();\n\n // when a beat is detected, call triggerBeat()\n peakDetect.onPeak(triggerBeat);\n}\n\nfunction draw() {\n background(0);\n fill(255);\n text('click to play', width/2, height/2);\n\n fft.analyze();\n peakDetect.update(fft);\n\n ellipseWidth *= 0.95;\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// this function is called by peakDetect.onPeak\nfunction triggerBeat() {\n ellipseWidth = 50;\n}\n\n// mouseclick starts/stops sound\nfunction setupSound() {\n cnv.mouseClicked( function() {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n });\n}\n"
+ ],
+ class: 'p5.PeakDetect',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11954,
+ description: 'Connect a source to the gain node.
\n',
+ itemtype: 'method',
+ name: 'setInput',
+ params: [
+ {
+ name: 'src',
+ description:
+ 'p5.sound / Web Audio object with a sound\n output.
\n',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.Gain',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11964,
+ description: 'Send output to a p5.sound or web audio object
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description: '',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.Gain',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11974,
+ description: 'Disconnect all output.
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.Gain',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 11984,
+ description: 'Set the output level of the gain node.
\n',
+ itemtype: 'method',
+ name: 'amp',
+ params: [
+ {
+ name: 'volume',
+ description: 'amplitude between 0 and 1.0
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rampTime',
+ description: 'create a fade that lasts rampTime
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'timeFromNow',
+ description:
+ 'schedule this event to happen\n seconds from now
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.Gain',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12042,
+ description: 'Connect to p5 objects or Web Audio Nodes
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description: '',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.AudioVoice',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12051,
+ description: 'Disconnect from soundOut
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.AudioVoice',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12131,
+ description:
+ 'Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.
\n',
+ itemtype: 'method',
+ name: 'play',
+ params: [
+ {
+ name: 'note',
+ description:
+ 'the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format ("C4", "Eb3"...etc")\n See \n Tone. Defaults to 440 hz.
\n',
+ type: 'String | Number'
+ },
+ {
+ name: 'velocity',
+ description:
+ 'velocity of the note to play (ranging from 0 to 1)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'time from now (in seconds) at which to play
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'sustainTime',
+ description: 'time to sustain before releasing the envelope
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n\n monoSynth = new p5.MonoSynth();\n\n textAlign(CENTER);\n text(\'click to play\', width/2, height/2);\n}\n\nfunction playSynth() {\n // time from now (in seconds)\n let time = 0;\n // note duration (in seconds)\n let dur = 1/6;\n // note velocity (volume, from 0 to 1)\n let v = random();\n\n monoSynth.play("Fb3", v, 0, dur);\n monoSynth.play("Gb3", v, time += dur, dur);\n\n background(random(255), random(255), 255);\n text(\'click to play\', width/2, height/2);\n}\n\n'
+ ],
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12179,
+ description:
+ 'Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.
\n',
+ params: [
+ {
+ name: 'note',
+ description:
+ 'the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format ("C4", "Eb3"...etc")\n See \n Tone. Defaults to 440 hz
\n',
+ type: 'String | Number'
+ },
+ {
+ name: 'velocity',
+ description:
+ 'velocity of the note to play (ranging from 0 to 1)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'time from now (in seconds) at which to play
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ itemtype: 'method',
+ name: 'triggerAttack',
+ example: [
+ '\n\nlet monoSynth = new p5.MonoSynth();\n\nfunction mousePressed() {\n monoSynth.triggerAttack("E3");\n}\n\nfunction mouseReleased() {\n monoSynth.triggerRelease();\n}\n'
+ ],
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12212,
+ description:
+ 'Trigger the release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.
\n',
+ params: [
+ {
+ name: 'secondsFromNow',
+ description: 'time to trigger the release
\n',
+ type: 'Number'
+ }
+ ],
+ itemtype: 'method',
+ name: 'triggerRelease',
+ example: [
+ '\n\nlet monoSynth = new p5.MonoSynth();\n\nfunction mousePressed() {\n monoSynth.triggerAttack("E3");\n}\n\nfunction mouseReleased() {\n monoSynth.triggerRelease();\n}\n'
+ ],
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12236,
+ description:
+ 'Set values like a traditional\n\nADSR envelope\n.
\n',
+ itemtype: 'method',
+ name: 'setADSR',
+ params: [
+ {
+ name: 'attackTime',
+ description:
+ 'Time (in seconds before envelope\n reaches Attack Level
\n',
+ type: 'Number'
+ },
+ {
+ name: 'decayTime',
+ description:
+ 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'susRatio',
+ description:
+ 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'releaseTime',
+ description: 'Time in seconds from now (defaults to 0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12260,
+ description: 'Getters and Setters
\n',
+ itemtype: 'property',
+ name: 'attack',
+ type: 'Number',
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12264,
+ itemtype: 'property',
+ name: 'decay',
+ type: 'Number',
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12267,
+ itemtype: 'property',
+ name: 'sustain',
+ type: 'Number',
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12270,
+ itemtype: 'property',
+ name: 'release',
+ type: 'Number',
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12307,
+ description: 'MonoSynth amp
\n',
+ itemtype: 'method',
+ name: 'amp',
+ params: [
+ {
+ name: 'vol',
+ description: 'desired volume
\n',
+ type: 'Number'
+ },
+ {
+ name: 'rampTime',
+ description: 'Time to reach new volume
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ return: {
+ description: 'new volume value',
+ type: 'Number'
+ },
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12321,
+ description: 'Connect to a p5.sound / Web Audio object.
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description: 'A p5.sound or Web Audio object
\n',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12331,
+ description: 'Disconnect all outputs
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12341,
+ description:
+ 'Get rid of the MonoSynth and free up its resources / memory.
\n',
+ itemtype: 'method',
+ name: 'dispose',
+ class: 'p5.MonoSynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12411,
+ description:
+ 'An object that holds information about which notes have been played and\nwhich notes are currently being played. New notes are added as keys\non the fly. While a note has been attacked, but not released, the value of the\nkey is the audiovoice which is generating that note. When notes are released,\nthe value of the key becomes undefined.
\n',
+ itemtype: 'property',
+ name: 'notes',
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12423,
+ description:
+ 'A PolySynth must have at least 1 voice, defaults to 8
\n',
+ itemtype: 'property',
+ name: 'polyvalue',
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12428,
+ description:
+ 'Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.
\n',
+ itemtype: 'property',
+ name: 'AudioVoice',
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12459,
+ description:
+ 'Play a note by triggering noteAttack and noteRelease with sustain time
\n',
+ itemtype: 'method',
+ name: 'play',
+ params: [
+ {
+ name: 'note',
+ description:
+ 'midi note to play (ranging from 0 to 127 - 60 being a middle C)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'velocity',
+ description:
+ 'velocity of the note to play (ranging from 0 to 1)
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'time from now (in seconds) at which to play
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'sustainTime',
+ description: 'time to sustain before releasing the envelope
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\nlet polySynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n\n polySynth = new p5.PolySynth();\n\n textAlign(CENTER);\n text(\'click to play\', width/2, height/2);\n}\n\nfunction playSynth() {\n // note duration (in seconds)\n let dur = 0.1;\n\n // time from now (in seconds)\n let time = 0;\n\n // velocity (volume, from 0 to 1)\n let vel = 0.1;\n\n polySynth.play("G2", vel, 0, dur);\n polySynth.play("C3", vel, 0, dur);\n polySynth.play("G3", vel, 0, dur);\n\n background(random(255), random(255), 255);\n text(\'click to play\', width/2, height/2);\n}\n'
+ ],
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12505,
+ description:
+ 'noteADSR sets the envelope for a specific note that has just been triggered.\nUsing this method modifies the envelope of whichever audiovoice is being used\nto play the desired note. The envelope should be reset before noteRelease is called\nin order to prevent the modified envelope from being used on other notes.
\n',
+ itemtype: 'method',
+ name: 'noteADSR',
+ params: [
+ {
+ name: 'note',
+ description: 'Midi note on which ADSR should be set.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'attackTime',
+ description:
+ 'Time (in seconds before envelope\n reaches Attack Level
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'decayTime',
+ description:
+ 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'susRatio',
+ description:
+ 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'releaseTime',
+ description: 'Time in seconds from now (defaults to 0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12533,
+ description:
+ 'Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.
\n',
+ itemtype: 'method',
+ name: 'setADSR',
+ params: [
+ {
+ name: 'attackTime',
+ description:
+ 'Time (in seconds before envelope\n reaches Attack Level
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'decayTime',
+ description:
+ 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'susRatio',
+ description:
+ 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'releaseTime',
+ description: 'Time in seconds from now (defaults to 0)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12557,
+ description:
+ 'Trigger the Attack, and Decay portion of a MonoSynth.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.
\n',
+ itemtype: 'method',
+ name: 'noteAttack',
+ params: [
+ {
+ name: 'note',
+ description: 'midi note on which attack should be triggered.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'velocity',
+ description:
+ 'velocity of the note to play (ranging from 0 to 1)/
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'time from now (in seconds)
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\nlet polySynth = new p5.PolySynth();\nlet pitches = ["G", "D", "G", "C"];\nlet octaves = [2, 3, 4];\n\nfunction mousePressed() {\n // play a chord: multiple notes at the same time\n for (let i = 0; i < 4; i++) {\n let note = random(pitches) + random(octaves);\n polySynth.noteAttack(note, 0.1);\n }\n}\n\nfunction mouseReleased() {\n // release all voices\n polySynth.noteRelease();\n}\n'
+ ],
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12647,
+ description:
+ 'Trigger the Release of an AudioVoice note. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.
\n',
+ itemtype: 'method',
+ name: 'noteRelease',
+ params: [
+ {
+ name: 'note',
+ description:
+ 'midi note on which attack should be triggered.\n If no value is provided, all notes will be released.
\n',
+ type: 'Number',
+ optional: true
+ },
+ {
+ name: 'secondsFromNow',
+ description: 'time to trigger the release
\n',
+ type: 'Number',
+ optional: true
+ }
+ ],
+ example: [
+ '\n\nlet pitches = ["G", "D", "G", "C"];\nlet octaves = [2, 3, 4];\nlet polySynth = new p5.PolySynth();\n\nfunction mousePressed() {\n // play a chord: multiple notes at the same time\n for (let i = 0; i < 4; i++) {\n let note = random(pitches) + random(octaves);\n polySynth.noteAttack(note, 0.1);\n }\n}\n\nfunction mouseReleased() {\n // release all voices\n polySynth.noteRelease();\n}\n\n'
+ ],
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12712,
+ description: 'Connect to a p5.sound / Web Audio object.
\n',
+ itemtype: 'method',
+ name: 'connect',
+ params: [
+ {
+ name: 'unit',
+ description: 'A p5.sound or Web Audio object
\n',
+ type: 'Object'
+ }
+ ],
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12722,
+ description: 'Disconnect all outputs
\n',
+ itemtype: 'method',
+ name: 'disconnect',
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12732,
+ description:
+ 'Get rid of the MonoSynth and free up its resources / memory.
\n',
+ itemtype: 'method',
+ name: 'dispose',
+ class: 'p5.PolySynth',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12800,
+ description:
+ 'The p5.Distortion is built with a\n\nWeb Audio WaveShaper Node.
\n',
+ itemtype: 'property',
+ name: 'WaveShaperNode',
+ type: 'AudioNode',
+ class: 'p5.Distortion',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12815,
+ description:
+ 'Process a sound source, optionally specify amount and oversample values.
\n',
+ itemtype: 'method',
+ name: 'process',
+ params: [
+ {
+ name: 'amount',
+ description:
+ 'Unbounded distortion amount.\n Normal values range from 0-1.
\n',
+ type: 'Number',
+ optional: true,
+ optdefault: '0.25'
+ },
+ {
+ name: 'oversample',
+ description: ''none', '2x', or '4x'.
\n',
+ type: 'String',
+ optional: true,
+ optdefault: "'none'"
+ }
+ ],
+ class: 'p5.Distortion',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12827,
+ description:
+ 'Set the amount and oversample of the waveshaper distortion.
\n',
+ itemtype: 'method',
+ name: 'set',
+ params: [
+ {
+ name: 'amount',
+ description:
+ 'Unbounded distortion amount.\n Normal values range from 0-1.
\n',
+ type: 'Number',
+ optional: true,
+ optdefault: '0.25'
+ },
+ {
+ name: 'oversample',
+ description: ''none', '2x', or '4x'.
\n',
+ type: 'String',
+ optional: true,
+ optdefault: "'none'"
+ }
+ ],
+ class: 'p5.Distortion',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12845,
+ description:
+ 'Return the distortion amount, typically between 0-1.
\n',
+ itemtype: 'method',
+ name: 'getAmount',
+ return: {
+ description:
+ 'Unbounded distortion amount.\n Normal values range from 0-1.',
+ type: 'Number'
+ },
+ class: 'p5.Distortion',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ },
+ {
+ file: 'lib/addons/p5.sound.js',
+ line: 12855,
+ description: 'Return the oversampling.
\n',
+ itemtype: 'method',
+ name: 'getOversample',
+ return: {
+ description: "Oversample can either be 'none', '2x', or '4x'.",
+ type: 'String'
+ },
+ class: 'p5.Distortion',
+ module: 'p5.sound',
+ submodule: 'p5.sound'
+ }
+ ],
+ warnings: [
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:14'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:59'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:89'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:132'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:330'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:361'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:398'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:489'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:519'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/creating_reading.js:559'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/p5.Color.js:50'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/p5.Color.js:251'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/p5.Color.js:280'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/p5.Color.js:309'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/p5.Color.js:338'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/p5.Color.js:775'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:13'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:179'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:218'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:339'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:496'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:537'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:577'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:749'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/color/setting.js:829'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:100'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:211'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:271'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:301'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:357'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:432'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:499'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:582'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/2d_primitives.js:636'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/attributes.js:12'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/attributes.js:82'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/attributes.js:117'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/attributes.js:186'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/attributes.js:222'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/attributes.js:259'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/attributes.js:326'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/curves.js:11'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/curves.js:94'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/curves.js:137'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/curves.js:192'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/curves.js:271'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/curves.js:362'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/curves.js:404'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/curves.js:500'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:20'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:68'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:268'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:268'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:268'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:396'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:441'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:506'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:566'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:652'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:718'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/shape/vertex.js:811'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/constants.js:58'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/constants.js:77'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/constants.js:96'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/constants.js:115'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/constants.js:134'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:20'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:51'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:78'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:129'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:161'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:230'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:333'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:358'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:377'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:396'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:412'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:428'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:506'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:557'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/core/environment.js:592'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/core/environment.js:611'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:611'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:666'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:695'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/environment.js:715'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/main.js:41'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/main.js:82'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/main.js:113'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/main.js:406'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:46'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:111'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:151'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:186'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:247'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:296'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:362'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:416'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:472'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:530'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:573'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:615'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:663'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:703'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:752'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Element.js:790'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Graphics.js:63'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/p5.Graphics.js:115'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/rendering.js:15'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/rendering.js:115'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/rendering.js:170'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/rendering.js:193'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/rendering.js:232'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/structure.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/structure.js:72'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/structure.js:120'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/structure.js:211'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/structure.js:303'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:11'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:148'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:174'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:214'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:244'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:274'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:304'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:379'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:419'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/core/transform.js:459'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/data/local_storage.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/data/local_storage.js:91'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/dom/dom.js:226'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/dom/dom.js:294'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/dom/dom.js:1418'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/dom/dom.js:1480'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/dom/dom.js:1584'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/dom/dom.js:1623'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/dom/dom.js:1717'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/dom/dom.js:2076'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:21'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:44'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:67'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:133'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:164'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:195'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:231'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:276'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:320'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:378'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:417'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:460'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:504'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:536'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/acceleration.js:595'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/keyboard.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/keyboard.js:37'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/keyboard.js:66'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/keyboard.js:107'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/keyboard.js:194'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/keyboard.js:246'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/keyboard.js:310'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:12'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:44'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:82'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:109'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:136'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:169'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:201'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:240'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:279'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:320'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:362'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:401'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:494'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:549'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:630'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:712'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:790'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:860'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:945'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:999'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/mouse.js:1046'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/touch.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/touch.js:71'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/touch.js:151'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/events/touch.js:224'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/image.js:22'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/image.js:102'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/image.js:249'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/loading_displaying.js:16'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/image/loading_displaying.js:234'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/loading_displaying.js:251'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/loading_displaying.js:422'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/loading_displaying.js:522'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/loading_displaying.js:588'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:88'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:115'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:152'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:258'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:294'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:345'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:400'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:438'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:550'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:606'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:669'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:705'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:827'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:869'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:910'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:942'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:987'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:1023'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:1061'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/p5.Image.js:1098'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/pixels.js:12'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/pixels.js:81'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/pixels.js:175'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/pixels.js:310'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/pixels.js:489'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/pixels.js:577'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/pixels.js:614'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/image/pixels.js:688'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/files.js:18'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/files.js:183'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/files.js:294'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/files.js:604'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/io/files.js:715'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/files.js:715'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/files.js:1523'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/files.js:1581'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/files.js:1649'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:85'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:149'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:197'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:243'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:292'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:357'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:552'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:605'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:647'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:906'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:971'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:1021'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:1067'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:1112'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:1159'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:1204'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:1257'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.Table.js:1321'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.TableRow.js:40'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.TableRow.js:102'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.TableRow.js:146'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.TableRow.js:191'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.TableRow.js:239'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.TableRow.js:295'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/io/p5.XML.js:9'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:34'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:74'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:119'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:184'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:234'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:273'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:321'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:377'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:416'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:472'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:522'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:572'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:625'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:660'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:699'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/calculation.js:744'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/math.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/noise.js:36'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/noise.js:180'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/noise.js:246'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/p5.Vector.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/random.js:37'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/random.js:67'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/random.js:155'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/trigonometry.js:122'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/trigonometry.js:158'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/trigonometry.js:186'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/trigonometry.js:214'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/math/trigonometry.js:290'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/math/trigonometry.js:326'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/math/trigonometry.js:341'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/math/trigonometry.js:356'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/attributes.js:11'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/attributes.js:82'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/attributes.js:120'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/attributes.js:152'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/attributes.js:189'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/loading_displaying.js:14'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/loading_displaying.js:138'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/loading_displaying.js:225'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/typography/p5.Font.js:30'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/conversion.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/string_functions.js:13'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/string_functions.js:42'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/string_functions.js:130'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/string_functions.js:239'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/string_functions.js:313'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/string_functions.js:375'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/string_functions.js:453'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/string_functions.js:540'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/time_date.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/time_date.js:30'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/time_date.js:50'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/time_date.js:70'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/time_date.js:91'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/time_date.js:113'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/utilities/time_date.js:133'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/3d_primitives.js:13'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/interaction.js:11'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/interaction.js:145'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/interaction.js:145'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/interaction.js:145'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/interaction.js:145'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/interaction.js:145'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/interaction.js:353'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/light.js:10'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/light.js:85'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/light.js:170'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/light.js:272'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/light.js:378'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/light.js:409'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/light.js:495'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/light.js:835'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/loading.js:12'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/loading.js:12'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/loading.js:579'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:12'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/webgl/material.js:111'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:111'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:179'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:283'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:321'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:422'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:422'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:501'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:574'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:625'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:677'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/material.js:729'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:13'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:112'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:173'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:230'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:319'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:652'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:711'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:769'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:917'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:989'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Camera.js:1254'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/webgl/p5.RendererGL.Retained.js:38'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.RendererGL.js:279'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.RendererGL.js:548'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.RendererGL.js:590'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.RendererGL.js:692'
+ },
+ {
+ message: 'unknown tag: alt',
+ line: ' src/webgl/p5.Shader.js:281'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:115'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/webgl/text.js:158'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:191'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:203'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:236'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:250'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:388'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' src/webgl/text.js:388'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:456'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:471'
+ },
+ {
+ message: 'replacing incorrect tag: function with method',
+ line: ' src/webgl/text.js:556'
+ },
+ {
+ message: 'replacing incorrect tag: params with param',
+ line: ' lib/addons/p5.sound.js:2480'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' lib/addons/p5.sound.js:2480'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' lib/addons/p5.sound.js:3094'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' lib/addons/p5.sound.js:7659'
+ },
+ {
+ message: 'replacing incorrect tag: returns with return',
+ line: ' lib/addons/p5.sound.js:9626'
+ },
+ {
+ message:
+ "Missing item type\nConversions adapted from .\n\nIn these functions, hue is always in the range [0, 1], just like all other\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\ninterchangeably.",
+ line: ' src/color/color_conversion.js:8'
+ },
+ {
+ message: 'Missing item type\nConvert an HSBA array to HSLA.',
+ line: ' src/color/color_conversion.js:19'
+ },
+ {
+ message: 'Missing item type\nConvert an HSBA array to RGBA.',
+ line: ' src/color/color_conversion.js:45'
+ },
+ {
+ message: 'Missing item type\nConvert an HSLA array to HSBA.',
+ line: ' src/color/color_conversion.js:100'
+ },
+ {
+ message:
+ "Missing item type\nConvert an HSLA array to RGBA.\n\nWe need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.",
+ line: ' src/color/color_conversion.js:123'
+ },
+ {
+ message: 'Missing item type\nConvert an RGBA array to HSBA.',
+ line: ' src/color/color_conversion.js:187'
+ },
+ {
+ message: 'Missing item type\nConvert an RGBA array to HSLA.',
+ line: ' src/color/color_conversion.js:226'
+ },
+ {
+ message:
+ 'Missing item type\nHue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.',
+ line: ' src/color/p5.Color.js:421'
+ },
+ {
+ message:
+ 'Missing item type\nSaturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.',
+ line: ' src/color/p5.Color.js:452'
+ },
+ {
+ message: 'Missing item type\nCSS named colors.',
+ line: ' src/color/p5.Color.js:471'
+ },
+ {
+ message:
+ 'Missing item type\nThese regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.\n\nNote that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.',
+ line: ' src/color/p5.Color.js:625'
+ },
+ {
+ message:
+ 'Missing item type\nFull color string patterns. The capture groups are necessary.',
+ line: ' src/color/p5.Color.js:638'
+ },
+ {
+ message:
+ 'Missing item type\nFor a number of different inputs, returns a color formatted as [r, g, b, a]\narrays, with each component normalized between 0 and 1.',
+ line: ' src/color/p5.Color.js:775'
+ },
+ {
+ message:
+ 'Missing item type\nFor HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.',
+ line: ' src/color/p5.Color.js:987'
+ },
+ {
+ message:
+ "Missing item type\nThis function does 3 things:\n\n 1. Bounds the desired start/stop angles for an arc (in radians) so that:\n\n 0 <= start < TWO_PI ; start <= stop < start + TWO_PI\n\n This means that the arc rendering functions don't have to be concerned\n with what happens if stop is smaller than start, or if the arc 'goes\n round more than once', etc.: they can just start at start and increase\n until stop and the correct arc will be drawn.\n\n 2. Optionally adjusts the angles within each quadrant to counter the naive\n scaling of the underlying ellipse up from the unit circle. Without\n this, the angles become arbitrary when width != height: 45 degrees\n might be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\n a 'tall' ellipse.\n\n 3. Flags up when start and stop correspond to the same place on the\n underlying ellipse. This is useful if you want to do something special\n there (like rendering a whole ellipse instead).",
+ line: ' src/core/shape/2d_primitives.js:14'
+ },
+ {
+ message: 'Missing item type\nReturns the current framerate.',
+ line: ' src/core/environment.js:307'
+ },
+ {
+ message:
+ 'Missing item type\nSpecifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within setup() is\nrecommended. The default rate is 60 frames per second.\n\nCalling frameRate() with no arguments returns the current framerate.',
+ line: ' src/core/environment.js:317'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/core/error_helpers.js:1'
+ },
+ {
+ message:
+ 'Missing item type\nValidates parameters\nparam {String} func the name of the function\nparam {Array} args user input arguments\n\nexample:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n "It looks like ellipse received an empty variable in spot #2."\n\nexample:\n ellipse(10,"foo",5,5);\nconsole output:\n "ellipse was expecting a number for parameter #1,\n received "foo" instead."',
+ line: ' src/core/error_helpers.js:600'
+ },
+ {
+ message:
+ 'Missing item type\nPrints out all the colors in the color pallete with white text.\nFor color blindness testing.',
+ line: ' src/core/error_helpers.js:661'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/core/helpers.js:1'
+ },
+ {
+ message:
+ 'Missing item type\n_globalInit\n\nTODO: ???\nif sketch is on window\nassume "global" mode\nand instantiate p5 automatically\notherwise do nothing',
+ line: ' src/core/init.js:3'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/core/legacy.js:1'
+ },
+ {
+ message: 'Missing item type\nHelper fxn for sharing pixel methods',
+ line: ' src/core/p5.Element.js:854'
+ },
+ {
+ message: 'Missing item type\nResize our canvas element.',
+ line: ' src/core/p5.Renderer.js:95'
+ },
+ {
+ message: 'Missing item type\nHelper fxn to check font type (system or otf)',
+ line: ' src/core/p5.Renderer.js:334'
+ },
+ {
+ message:
+ 'Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178',
+ line: ' src/core/p5.Renderer.js:386'
+ },
+ {
+ message:
+ 'Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer',
+ line: ' src/core/p5.Renderer2D.js:7'
+ },
+ {
+ message:
+ 'Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee www.joecridge.me/bezier.pdf for an explanation of the method.',
+ line: ' src/core/p5.Renderer2D.js:385'
+ },
+ {
+ message:
+ 'Missing item type\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.',
+ line: ' src/core/shim.js:18'
+ },
+ {
+ message:
+ 'Missing item type\nthis is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from https://github.com/ljharb/object.assign',
+ line: ' src/core/shim.js:39'
+ },
+ {
+ message:
+ 'Missing item type\nprivate helper function to handle the user passing in objects\nduring construction or calls to create()',
+ line: ' src/data/p5.TypedDict.js:201'
+ },
+ {
+ message:
+ 'Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type',
+ line: ' src/data/p5.TypedDict.js:392'
+ },
+ {
+ message:
+ 'Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type',
+ line: ' src/data/p5.TypedDict.js:431'
+ },
+ {
+ message:
+ "Missing item type\nprivate helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'",
+ line: ' src/data/p5.TypedDict.js:546'
+ },
+ {
+ message:
+ "Missing item type\nprivate helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'",
+ line: ' src/data/p5.TypedDict.js:613'
+ },
+ {
+ message: 'Missing item type\nHelper function for select and selectAll',
+ line: ' src/dom/dom.js:149'
+ },
+ {
+ message:
+ 'Missing item type\nHelper function for getElement and getElements.',
+ line: ' src/dom/dom.js:165'
+ },
+ {
+ message: 'Missing item type\nHelpers for create methods.',
+ line: ' src/dom/dom.js:329'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/dom/dom.js:452'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/dom/dom.js:1029'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/dom/dom.js:1117'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/dom/dom.js:1156'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/dom/dom.js:2966'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/dom/dom.js:3032'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/dom/dom.js:3094'
+ },
+ {
+ message:
+ 'Missing item type\n_updatePAccelerations updates the pAcceleration values',
+ line: ' src/events/acceleration.js:122'
+ },
+ {
+ message:
+ 'Missing item type\nThe onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.',
+ line: ' src/events/keyboard.js:300'
+ },
+ {
+ message:
+ 'Missing item type\nThe _areDownKeys function returns a boolean true if any keys pressed\nand a false if no keys are currently pressed.\n\nHelps avoid instances where multiple keys are pressed simultaneously and\nreleasing a single key will then switch the\nkeyIsPressed property to true.',
+ line: ' src/events/keyboard.js:387'
+ },
+ {
+ message:
+ 'Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.',
+ line: ' src/image/filters.js:3'
+ },
+ {
+ message: 'Missing item type\nReturns the pixel buffer for a canvas',
+ line: ' src/image/filters.js:24'
+ },
+ {
+ message:
+ 'Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.',
+ line: ' src/image/filters.js:44'
+ },
+ {
+ message:
+ 'Missing item type\nModifies pixels RGBA values to values contained in the data object.',
+ line: ' src/image/filters.js:65'
+ },
+ {
+ message:
+ 'Missing item type\nReturns the ImageData object for a canvas\nhttps://developer.mozilla.org/en-US/docs/Web/API/ImageData',
+ line: ' src/image/filters.js:85'
+ },
+ {
+ message: 'Missing item type\nReturns a blank ImageData object.',
+ line: ' src/image/filters.js:105'
+ },
+ {
+ message:
+ 'Missing item type\nApplys a filter function to a canvas.\n\nThe difference between this and the actual filter functions defined below\nis that the filter functions generally modify the pixel buffer but do\nnot actually put that data back to the canvas (where it would actually\nupdate what is visible). By contrast this method does make the changes\nactually visible in the canvas.\n\nThe apply method is the method that callers of this module would generally\nuse. It has been separated from the actual filters to support an advanced\nuse case of creating a filter chain that executes without actually updating\nthe canvas in between everystep.',
+ line: ' src/image/filters.js:120'
+ },
+ {
+ message:
+ 'Missing item type\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/',
+ line: ' src/image/filters.js:173'
+ },
+ {
+ message:
+ 'Missing item type\nConverts any colors in the image to grayscale equivalents.\nNo parameter is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/',
+ line: ' src/image/filters.js:207'
+ },
+ {
+ message:
+ 'Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.',
+ line: ' src/image/filters.js:230'
+ },
+ {
+ message:
+ 'Missing item type\nSets each pixel to its inverse value. No parameter is used.',
+ line: ' src/image/filters.js:246'
+ },
+ {
+ message:
+ 'Missing item type\nLimits each channel of the image to the number of colors specified as\nthe parameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.\n\nAdapted from java based processing implementation',
+ line: ' src/image/filters.js:261'
+ },
+ {
+ message: 'Missing item type\nreduces the bright areas in an image',
+ line: ' src/image/filters.js:293'
+ },
+ {
+ message: 'Missing item type\nincreases the bright areas in an image',
+ line: ' src/image/filters.js:381'
+ },
+ {
+ message:
+ 'Missing item type\nThis module defines the p5 methods for the p5.Image class\nfor drawing images to the main display canvas.',
+ line: ' src/image/image.js:8'
+ },
+ {
+ message: 'Missing item type\nHelper function for loading GIF-based images',
+ line: ' src/image/loading_displaying.js:143'
+ },
+ {
+ message:
+ 'Missing item type\nValidates clipping params. Per drawImage spec sWidth and sHight cannot be\nnegative or greater than image intrinsic width and height',
+ line: ' src/image/loading_displaying.js:234'
+ },
+ {
+ message:
+ 'Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.',
+ line: ' src/image/loading_displaying.js:551'
+ },
+ {
+ message:
+ 'Missing item type\nThis module defines the p5.Image class and P5 methods for\ndrawing images to the main display canvas.',
+ line: ' src/image/p5.Image.js:9'
+ },
+ {
+ message:
+ 'Missing item type\nHelper function for animating GIF-based images with time',
+ line: ' src/image/p5.Image.js:222'
+ },
+ {
+ message: 'Missing item type\nHelper fxn for sharing pixel methods',
+ line: ' src/image/p5.Image.js:249'
+ },
+ {
+ message:
+ 'Missing item type\nGenerate a blob of file data as a url to prepare for download.\nAccepts an array of data, a filename, and an extension (optional).\nThis is a private function because it does not do any formatting,\nbut it is used by saveStrings, saveJSON, saveTable etc.',
+ line: ' src/io/files.js:1775'
+ },
+ {
+ message:
+ 'Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.',
+ line: ' src/io/files.js:1843'
+ },
+ {
+ message:
+ 'Missing item type\nReturns true if the browser is Safari, false if not.\nSafari makes trouble for downloading files.',
+ line: ' src/io/files.js:1876'
+ },
+ {
+ message:
+ 'Missing item type\nHelper function, a callback for download that deletes\nan invisible anchor element from the DOM once the file\nhas been automatically downloaded.',
+ line: ' src/io/files.js:1888'
+ },
+ {
+ message:
+ 'Missing item type\nTable Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.
\nCSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don\'t bother with the\nquotes.
\nFile names should end with .csv if they\'re comma separated.
\nA rough "spec" for CSV can be found\nhere.
\nTo load files, use the loadTable method.
\nTo save tables to your computer, use the save method\n or the saveTable method.
\n\nPossible options include:\n\n- csv - parse the table as comma-separated values\n
- tsv - parse the table as tab-separated values\n
- header - this table has a header (title) row\n
',
+ line: ' src/io/p5.Table.js:9'
+ },
+ {
+ message:
+ 'Missing item type\nMultiplies a vector by a scalar and returns a new vector.',
+ line: ' src/math/p5.Vector.js:1612'
+ },
+ {
+ message:
+ 'Missing item type\nDivides a vector by a scalar and returns a new vector.',
+ line: ' src/math/p5.Vector.js:1639'
+ },
+ {
+ message: 'Missing item type\nCalculates the dot product of two vectors.',
+ line: ' src/math/p5.Vector.js:1666'
+ },
+ {
+ message: 'Missing item type\nCalculates the cross product of two vectors.',
+ line: ' src/math/p5.Vector.js:1680'
+ },
+ {
+ message:
+ 'Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).',
+ line: ' src/math/p5.Vector.js:1694'
+ },
+ {
+ message:
+ 'Missing item type\nLinear interpolate a vector to another vector and return the result as a\nnew vector.',
+ line: ' src/math/p5.Vector.js:1709'
+ },
+ {
+ message:
+ 'Missing item type\nHelper function to measure ascent and descent.',
+ line: ' src/typography/attributes.js:283'
+ },
+ {
+ message:
+ 'Missing item type\nReturns the set of opentype glyphs for the supplied string.\n\nNote that there is not a strict one-to-one mapping between characters\nand glyphs, so the list of returned glyphs can be larger or smaller\n than the length of the given string.',
+ line: ' src/typography/p5.Font.js:253'
+ },
+ {
+ message:
+ 'Missing item type\nReturns an opentype path for the supplied string and position.',
+ line: ' src/typography/p5.Font.js:268'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/webgl/3d_primitives.js:301'
+ },
+ {
+ message:
+ 'Missing item type\nDraws a point, a coordinate in space at the dimension of one pixel,\ngiven x, y and z coordinates. The color of the point is determined\nby the current stroke, while the point size is determined by current\nstroke weight.',
+ line: ' src/webgl/3d_primitives.js:956'
+ },
+ {
+ message: 'Missing item type\nDraw a line given two points',
+ line: ' src/webgl/3d_primitives.js:1356'
+ },
+ {
+ message:
+ 'Missing item type\nParse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:\n\nv -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5\n\nf 4 3 2 1',
+ line: ' src/webgl/loading.js:170'
+ },
+ {
+ message:
+ 'Missing item type\nSTL files can be of two types, ASCII and Binary,\n\nWe need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.',
+ line: ' src/webgl/loading.js:279'
+ },
+ {
+ message:
+ 'Missing item type\nThis function checks if the file is in ASCII format or in Binary format\n\nIt is done by searching keyword `solid` at the start of the file.\n\nAn ASCII STL data must begin with `solid` as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the `d` are known to be\nplentiful. So, check the first 5 bytes for `solid`.\n\nSeveral encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for `solid` to start anywhere after those prefixes.',
+ line: ' src/webgl/loading.js:306'
+ },
+ {
+ message:
+ 'Missing item type\nThis function matches the `query` at the provided `offset`',
+ line: ' src/webgl/loading.js:333'
+ },
+ {
+ message:
+ 'Missing item type\nThis function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\n\nCurrently there is no support for the colors provided in STL files.',
+ line: ' src/webgl/loading.js:345'
+ },
+ {
+ message:
+ "Missing item type\nASCII STL file starts with `solid 'nameOfFile'`\nThen contain the normal of the face, starting with `facet normal`\nNext contain a keyword indicating the start of face vertex, `outer loop`\nNext comes the three vertex, starting with `vertex x y z`\nVertices ends with `endloop`\nFace ends with `endfacet`\nNext face starts with `facet normal`\nThe end of the file is indicated by `endsolid`",
+ line: ' src/webgl/loading.js:435'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/webgl/material.js:774'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/webgl/material.js:796'
+ },
+ {
+ message:
+ 'Missing item type\nCreate a 2D array for establishing stroke connections',
+ line: ' src/webgl/p5.Geometry.js:212'
+ },
+ {
+ message:
+ "Missing item type\nCreate 4 vertices for each stroke line, two at the beginning position\nand two at the end position. These vertices are displaced relative to\nthat line's normal on the GPU",
+ line: ' src/webgl/p5.Geometry.js:233'
+ },
+ {
+ message: 'Missing item type',
+ line: ' src/webgl/p5.Matrix.js:1'
+ },
+ {
+ message: 'Missing item type\nPRIVATE',
+ line: ' src/webgl/p5.Matrix.js:722'
+ },
+ {
+ message:
+ 'Missing item type\nWelcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices. Immediate Mode is activated\nwhen you call beginShape() & de-activated when you call endShape().\nImmediate mode is a style of programming borrowed\nfrom OpenGL\'s (now-deprecated) immediate mode.\nIt differs from p5.js\' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.',
+ line: ' src/webgl/p5.RendererGL.Immediate.js:1'
+ },
+ {
+ message:
+ 'Missing item type\nEnd shape drawing and render vertices to screen.',
+ line: ' src/webgl/p5.RendererGL.Immediate.js:138'
+ },
+ {
+ message:
+ 'Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered',
+ line: ' src/webgl/p5.RendererGL.Retained.js:38'
+ },
+ {
+ message:
+ 'Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.',
+ line: ' src/webgl/p5.RendererGL.Retained.js:139'
+ },
+ {
+ message: 'Missing item type\nDraws buffers given a geometry key ID',
+ line: ' src/webgl/p5.RendererGL.Retained.js:177'
+ },
+ {
+ message: 'Missing item type\nmodel view, projection, & normal\nmatrices',
+ line: ' src/webgl/p5.RendererGL.js:112'
+ },
+ {
+ message: 'Missing item type\n[background description]',
+ line: ' src/webgl/p5.RendererGL.js:531'
+ },
+ {
+ message: 'Missing item type\n[resize description]',
+ line: ' src/webgl/p5.RendererGL.js:805'
+ },
+ {
+ message: 'Missing item type\nclears color and depth buffers\nwith r,g,b,a',
+ line: ' src/webgl/p5.RendererGL.js:835'
+ },
+ {
+ message: 'Missing item type\n[translate description]',
+ line: ' src/webgl/p5.RendererGL.js:867'
+ },
+ {
+ message: 'Missing item type\nScales the Model View Matrix by a vector',
+ line: ' src/webgl/p5.RendererGL.js:886'
+ },
+ {
+ message:
+ 'Missing item type\nturn a two dimensional array into one dimensional array',
+ line: ' src/webgl/p5.RendererGL.js:1289'
+ },
+ {
+ message:
+ 'Missing item type\nturn a p5.Vector Array into a one dimensional number array',
+ line: ' src/webgl/p5.RendererGL.js:1326'
+ },
+ {
+ message:
+ 'Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.',
+ line: ' src/webgl/p5.RendererGL.js:1344'
+ },
+ {
+ message:
+ "Missing item type\np5.sound \nhttps://p5js.org/reference/#/libraries/p5.sound\n\nFrom the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors\n\nMIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE\n\nSome of the many audio libraries & resources that inspire p5.sound:\n - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js\n - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/\n - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0\n - wavesurfer.js https://github.com/katspaugh/wavesurfer.js\n - Web Audio Components by Jordan Santell https://github.com/web-audio-components\n - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound\n\n Web Audio API: http://w3.org/TR/webaudio/",
+ line: ' lib/addons/p5.sound.js:46'
+ },
+ {
+ message:
+ 'Missing item type\nDetermine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats',
+ line: ' lib/addons/p5.sound.js:214'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:363'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:740'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:810'
+ },
+ {
+ message:
+ 'Missing item type\nMaster contains AudioContext and the master sound output.',
+ line: ' lib/addons/p5.sound.js:1099'
+ },
+ {
+ message:
+ 'Missing item type\na silent connection to the DesinationNode\nwhich will ensure that anything connected to it\nwill not be garbage collected',
+ line: ' lib/addons/p5.sound.js:1194'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:1210'
+ },
+ {
+ message: 'Missing item type\nUsed by Osc and Envelope to chain signal math',
+ line: ' lib/addons/p5.sound.js:1415'
+ },
+ {
+ message:
+ 'Missing item type\nThis is a helper function that the p5.SoundFile calls to load\nitself. Accepts a callback (the name of another function)\nas an optional parameter.',
+ line: ' lib/addons/p5.sound.js:1813'
+ },
+ {
+ message:
+ "Missing item type\nStop playback on all of this soundfile's sources.",
+ line: ' lib/addons/p5.sound.js:2218'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:2656'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:2934'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:4055'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:4076'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:4135'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:4453'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:4625'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:4783'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:4824'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:4881'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:5049'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:5097'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:5128'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:5149'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:5169'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:5879'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:6082'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7750'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7766'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7790'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7816'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7838'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7860'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7906'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7937'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:7955'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:8292'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:8314'
+ },
+ {
+ message:
+ 'Missing item type\nThe p5.Effect class is built\n \tusing Tone.js CrossFade',
+ line: ' lib/addons/p5.sound.js:8384'
+ },
+ {
+ message:
+ 'Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter',
+ line: ' lib/addons/p5.sound.js:8390'
+ },
+ {
+ message:
+ 'Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ',
+ line: ' lib/addons/p5.sound.js:8779'
+ },
+ {
+ message:
+ 'Missing item type\nInspired by Simple Reverb by Jordan Santell\nhttps://github.com/web-audio-components/simple-reverb/blob/master/index.js\n\nUtility function for building an impulse response\nbased on the module parameters.',
+ line: ' lib/addons/p5.sound.js:9889'
+ },
+ {
+ message:
+ 'Missing item type\nPrivate method to load a buffer as an Impulse Response,\nassign it to the convolverNode, and add to the Array of .impulses.',
+ line: ' lib/addons/p5.sound.js:10056'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:10240'
+ },
+ {
+ message: 'Missing item type',
+ line: ' lib/addons/p5.sound.js:10265'
+ },
+ {
+ message:
+ 'Missing item type\nmusicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string',
+ line: ' lib/addons/p5.sound.js:10989'
+ },
+ {
+ message:
+ 'Missing item type\nDo not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded\n\nThe callback should only be called until maxIterations is reached',
+ line: ' lib/addons/p5.sound.js:11005'
+ },
+ {
+ message: 'Missing item type\ncallback invoked when the recording is over',
+ line: ' lib/addons/p5.sound.js:11495'
+ },
+ {
+ message: 'Missing item type\ninternal method called on audio process',
+ line: ' lib/addons/p5.sound.js:11581'
+ },
+ {
+ message:
+ 'Missing item type\nPrivate method to ensure accurate values of this._voicesInUse\nAny time a new value is scheduled, it is necessary to increment all subsequent\nscheduledValues after attack, and decrement all subsequent\nscheduledValues after release',
+ line: ' lib/addons/p5.sound.js:12627'
+ },
+ {
+ message:
+ "Missing item type\np5.sound \nhttps://p5js.org/reference/#/libraries/p5.sound\n\nFrom the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors\n\nMIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE\n\nSome of the many audio libraries & resources that inspire p5.sound:\n - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js\n - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/\n - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0\n - wavesurfer.js https://github.com/katspaugh/wavesurfer.js\n - Web Audio Components by Jordan Santell https://github.com/web-audio-components\n - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound\n\n Web Audio API: http://w3.org/TR/webaudio/",
+ line: ' lib/addons/p5.sound.min.js:3'
+ }
+ ],
+ consts: {
+ RGB: ['p5.colorMode'],
+ HSB: ['p5.colorMode'],
+ HSL: ['p5.colorMode'],
+ CHORD: ['p5.arc'],
+ PIE: ['p5.arc'],
+ OPEN: ['p5.arc'],
+ CENTER: ['p5.ellipseMode', 'p5.rectMode', 'p5.imageMode', 'p5.textAlign'],
+ RADIUS: ['p5.ellipseMode', 'p5.rectMode'],
+ CORNER: ['p5.ellipseMode', 'p5.rectMode', 'p5.imageMode'],
+ CORNERS: ['p5.ellipseMode', 'p5.rectMode', 'p5.imageMode'],
+ SQUARE: ['p5.strokeCap'],
+ PROJECT: ['p5.strokeCap'],
+ ROUND: ['p5.strokeCap', 'p5.strokeJoin'],
+ MITER: ['p5.strokeJoin'],
+ BEVEL: ['p5.strokeJoin'],
+ POINTS: ['p5.beginShape'],
+ LINES: ['p5.beginShape'],
+ TRIANGLES: ['p5.beginShape'],
+ TRIANGLE_FAN: ['p5.beginShape'],
+ TRIANGLE_STRIP: ['p5.beginShape'],
+ QUADS: ['p5.beginShape'],
+ QUAD_STRIP: ['p5.beginShape'],
+ CLOSE: ['p5.endShape'],
+ ARROW: ['p5.cursor'],
+ CROSS: ['p5.cursor'],
+ HAND: ['p5.cursor'],
+ MOVE: ['p5.cursor'],
+ TEXT: ['p5.cursor'],
+ P2D: ['p5.createCanvas', 'p5.createGraphics'],
+ WEBGL: ['p5.createCanvas', 'p5.createGraphics'],
+ BLEND: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ DARKEST: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ LIGHTEST: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ DIFFERENCE: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ MULTIPLY: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ EXCLUSION: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ SCREEN: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ REPLACE: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ OVERLAY: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ HARD_LIGHT: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ SOFT_LIGHT: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ DODGE: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ BURN: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ ADD: ['p5.blendMode', 'p5.Image.blend', 'p5.blend'],
+ REMOVE: ['p5.blendMode'],
+ SUBTRACT: ['p5.blendMode'],
+ VIDEO: ['p5.createCapture'],
+ AUDIO: ['p5.createCapture'],
+ THRESHOLD: ['p5.Image.filter', 'p5.filter'],
+ GRAY: ['p5.Image.filter', 'p5.filter'],
+ OPAQUE: ['p5.Image.filter', 'p5.filter'],
+ INVERT: ['p5.Image.filter', 'p5.filter'],
+ POSTERIZE: ['p5.Image.filter', 'p5.filter'],
+ BLUR: ['p5.Image.filter', 'p5.filter'],
+ ERODE: ['p5.Image.filter', 'p5.filter'],
+ DILATE: ['p5.Image.filter', 'p5.filter'],
+ NORMAL: ['p5.Image.blend', 'p5.blend', 'p5.textStyle', 'p5.textureMode'],
+ RADIANS: ['p5.angleMode'],
+ DEGREES: ['p5.angleMode'],
+ LEFT: ['p5.textAlign'],
+ RIGHT: ['p5.textAlign'],
+ TOP: ['p5.textAlign'],
+ BOTTOM: ['p5.textAlign'],
+ BASELINE: ['p5.textAlign'],
+ ITALIC: ['p5.textStyle'],
+ BOLD: ['p5.textStyle'],
+ BOLDITALIC: ['p5.textStyle'],
+ IMAGE: ['p5.textureMode'],
+ CLAMP: ['p5.textureWrap'],
+ REPEAT: ['p5.textureWrap'],
+ MIRROR: ['p5.textureWrap']
+ }
+ };
+ },
+ {}
+ ],
+ 2: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+
+ exports.byteLength = byteLength;
+ exports.toByteArray = toByteArray;
+ exports.fromByteArray = fromByteArray;
+
+ var lookup = [];
+ var revLookup = [];
+ var Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array;
+
+ var code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+ for (var i = 0, len = code.length; i < len; ++i) {
+ lookup[i] = code[i];
+ revLookup[code.charCodeAt(i)] = i;
+ }
+
+ // Support decoding URL-safe base64 strings, as Node.js does.
+ // See: https://en.wikipedia.org/wiki/Base64#URL_applications
+ revLookup['-'.charCodeAt(0)] = 62;
+ revLookup['_'.charCodeAt(0)] = 63;
+
+ function getLens(b64) {
+ var len = b64.length;
+
+ if (len % 4 > 0) {
+ throw new Error('Invalid string. Length must be a multiple of 4');
+ }
+
+ // Trim off extra bytes after placeholder bytes are found
+ // See: https://github.com/beatgammit/base64-js/issues/42
+ var validLen = b64.indexOf('=');
+ if (validLen === -1) validLen = len;
+
+ var placeHoldersLen = validLen === len ? 0 : 4 - validLen % 4;
+
+ return [validLen, placeHoldersLen];
+ }
+
+ // base64 is 4/3 + up to two characters of the original data
+ function byteLength(b64) {
+ var lens = getLens(b64);
+ var validLen = lens[0];
+ var placeHoldersLen = lens[1];
+ return (validLen + placeHoldersLen) * 3 / 4 - placeHoldersLen;
+ }
+
+ function _byteLength(b64, validLen, placeHoldersLen) {
+ return (validLen + placeHoldersLen) * 3 / 4 - placeHoldersLen;
+ }
+
+ function toByteArray(b64) {
+ var tmp;
+ var lens = getLens(b64);
+ var validLen = lens[0];
+ var placeHoldersLen = lens[1];
+
+ var arr = new Arr(_byteLength(b64, validLen, placeHoldersLen));
+
+ var curByte = 0;
+
+ // if there are placeholders, only get up to the last complete 4 chars
+ var len = placeHoldersLen > 0 ? validLen - 4 : validLen;
+
+ for (var i = 0; i < len; i += 4) {
+ tmp =
+ (revLookup[b64.charCodeAt(i)] << 18) |
+ (revLookup[b64.charCodeAt(i + 1)] << 12) |
+ (revLookup[b64.charCodeAt(i + 2)] << 6) |
+ revLookup[b64.charCodeAt(i + 3)];
+ arr[curByte++] = (tmp >> 16) & 0xff;
+ arr[curByte++] = (tmp >> 8) & 0xff;
+ arr[curByte++] = tmp & 0xff;
+ }
+
+ if (placeHoldersLen === 2) {
+ tmp =
+ (revLookup[b64.charCodeAt(i)] << 2) |
+ (revLookup[b64.charCodeAt(i + 1)] >> 4);
+ arr[curByte++] = tmp & 0xff;
+ }
+
+ if (placeHoldersLen === 1) {
+ tmp =
+ (revLookup[b64.charCodeAt(i)] << 10) |
+ (revLookup[b64.charCodeAt(i + 1)] << 4) |
+ (revLookup[b64.charCodeAt(i + 2)] >> 2);
+ arr[curByte++] = (tmp >> 8) & 0xff;
+ arr[curByte++] = tmp & 0xff;
+ }
+
+ return arr;
+ }
+
+ function tripletToBase64(num) {
+ return (
+ lookup[(num >> 18) & 0x3f] +
+ lookup[(num >> 12) & 0x3f] +
+ lookup[(num >> 6) & 0x3f] +
+ lookup[num & 0x3f]
+ );
+ }
+
+ function encodeChunk(uint8, start, end) {
+ var tmp;
+ var output = [];
+ for (var i = start; i < end; i += 3) {
+ tmp =
+ ((uint8[i] << 16) & 0xff0000) +
+ ((uint8[i + 1] << 8) & 0xff00) +
+ (uint8[i + 2] & 0xff);
+ output.push(tripletToBase64(tmp));
+ }
+ return output.join('');
+ }
+
+ function fromByteArray(uint8) {
+ var tmp;
+ var len = uint8.length;
+ var extraBytes = len % 3; // if we have 1 byte left, pad 2 bytes
+ var parts = [];
+ var maxChunkLength = 16383; // must be multiple of 3
+
+ // go through the array every three bytes, we'll deal with trailing stuff later
+ for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) {
+ parts.push(
+ encodeChunk(uint8, i, i + maxChunkLength > len2 ? len2 : i + maxChunkLength)
+ );
+ }
+
+ // pad the end with zeros, but make sure to not forget the extra bytes
+ if (extraBytes === 1) {
+ tmp = uint8[len - 1];
+ parts.push(lookup[tmp >> 2] + lookup[(tmp << 4) & 0x3f] + '==');
+ } else if (extraBytes === 2) {
+ tmp = (uint8[len - 2] << 8) + uint8[len - 1];
+ parts.push(
+ lookup[tmp >> 10] +
+ lookup[(tmp >> 4) & 0x3f] +
+ lookup[(tmp << 2) & 0x3f] +
+ '='
+ );
+ }
+
+ return parts.join('');
+ }
+ },
+ {}
+ ],
+ 3: [function(_dereq_, module, exports) {}, {}],
+ 4: [
+ function(_dereq_, module, exports) {
+ /*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author Feross Aboukhadijeh
+ * @license MIT
+ */
+ /* eslint-disable no-proto */
+
+ 'use strict';
+
+ var base64 = _dereq_('base64-js');
+ var ieee754 = _dereq_('ieee754');
+
+ exports.Buffer = Buffer;
+ exports.SlowBuffer = SlowBuffer;
+ exports.INSPECT_MAX_BYTES = 50;
+
+ var K_MAX_LENGTH = 0x7fffffff;
+ exports.kMaxLength = K_MAX_LENGTH;
+
+ /**
+ * If `Buffer.TYPED_ARRAY_SUPPORT`:
+ * === true Use Uint8Array implementation (fastest)
+ * === false Print warning and recommend using `buffer` v4.x which has an Object
+ * implementation (most compatible, even IE6)
+ *
+ * Browsers that support typed arrays are IE 10+, Firefox 4+, Chrome 7+, Safari 5.1+,
+ * Opera 11.6+, iOS 4.2+.
+ *
+ * We report that the browser does not support typed arrays if the are not subclassable
+ * using __proto__. Firefox 4-29 lacks support for adding new properties to `Uint8Array`
+ * (See: https://bugzilla.mozilla.org/show_bug.cgi?id=695438). IE 10 lacks support
+ * for __proto__ and has a buggy typed array implementation.
+ */
+ Buffer.TYPED_ARRAY_SUPPORT = typedArraySupport();
+
+ if (
+ !Buffer.TYPED_ARRAY_SUPPORT &&
+ typeof console !== 'undefined' &&
+ typeof console.error === 'function'
+ ) {
+ console.error(
+ 'This browser lacks typed array (Uint8Array) support which is required by ' +
+ '`buffer` v5.x. Use `buffer` v4.x if you require old browser support.'
+ );
+ }
+
+ function typedArraySupport() {
+ // Can typed array instances can be augmented?
+ try {
+ var arr = new Uint8Array(1);
+ arr.__proto__ = {
+ __proto__: Uint8Array.prototype,
+ foo: function() {
+ return 42;
+ }
+ };
+ return arr.foo() === 42;
+ } catch (e) {
+ return false;
+ }
+ }
+
+ Object.defineProperty(Buffer.prototype, 'parent', {
+ enumerable: true,
+ get: function() {
+ if (!Buffer.isBuffer(this)) return undefined;
+ return this.buffer;
+ }
+ });
+
+ Object.defineProperty(Buffer.prototype, 'offset', {
+ enumerable: true,
+ get: function() {
+ if (!Buffer.isBuffer(this)) return undefined;
+ return this.byteOffset;
+ }
+ });
+
+ function createBuffer(length) {
+ if (length > K_MAX_LENGTH) {
+ throw new RangeError(
+ 'The value "' + length + '" is invalid for option "size"'
+ );
+ }
+ // Return an augmented `Uint8Array` instance
+ var buf = new Uint8Array(length);
+ buf.__proto__ = Buffer.prototype;
+ return buf;
+ }
+
+ /**
+ * The Buffer constructor returns instances of `Uint8Array` that have their
+ * prototype changed to `Buffer.prototype`. Furthermore, `Buffer` is a subclass of
+ * `Uint8Array`, so the returned instances will have all the node `Buffer` methods
+ * and the `Uint8Array` methods. Square bracket notation works as expected -- it
+ * returns a single octet.
+ *
+ * The `Uint8Array` prototype remains unmodified.
+ */
+
+ function Buffer(arg, encodingOrOffset, length) {
+ // Common case.
+ if (typeof arg === 'number') {
+ if (typeof encodingOrOffset === 'string') {
+ throw new TypeError(
+ 'The "string" argument must be of type string. Received type number'
+ );
+ }
+ return allocUnsafe(arg);
+ }
+ return from(arg, encodingOrOffset, length);
+ }
+
+ // Fix subarray() in ES2016. See: https://github.com/feross/buffer/pull/97
+ if (
+ typeof Symbol !== 'undefined' &&
+ Symbol.species != null &&
+ Buffer[Symbol.species] === Buffer
+ ) {
+ Object.defineProperty(Buffer, Symbol.species, {
+ value: null,
+ configurable: true,
+ enumerable: false,
+ writable: false
+ });
+ }
+
+ Buffer.poolSize = 8192; // not used by this implementation
+
+ function from(value, encodingOrOffset, length) {
+ if (typeof value === 'string') {
+ return fromString(value, encodingOrOffset);
+ }
+
+ if (ArrayBuffer.isView(value)) {
+ return fromArrayLike(value);
+ }
+
+ if (value == null) {
+ throw TypeError(
+ 'The first argument must be one of type string, Buffer, ArrayBuffer, Array, ' +
+ 'or Array-like Object. Received type ' +
+ typeof value
+ );
+ }
+
+ if (
+ isInstance(value, ArrayBuffer) ||
+ (value && isInstance(value.buffer, ArrayBuffer))
+ ) {
+ return fromArrayBuffer(value, encodingOrOffset, length);
+ }
+
+ if (typeof value === 'number') {
+ throw new TypeError(
+ 'The "value" argument must not be of type number. Received type number'
+ );
+ }
+
+ var valueOf = value.valueOf && value.valueOf();
+ if (valueOf != null && valueOf !== value) {
+ return Buffer.from(valueOf, encodingOrOffset, length);
+ }
+
+ var b = fromObject(value);
+ if (b) return b;
+
+ if (
+ typeof Symbol !== 'undefined' &&
+ Symbol.toPrimitive != null &&
+ typeof value[Symbol.toPrimitive] === 'function'
+ ) {
+ return Buffer.from(
+ value[Symbol.toPrimitive]('string'),
+ encodingOrOffset,
+ length
+ );
+ }
+
+ throw new TypeError(
+ 'The first argument must be one of type string, Buffer, ArrayBuffer, Array, ' +
+ 'or Array-like Object. Received type ' +
+ typeof value
+ );
+ }
+
+ /**
+ * Functionally equivalent to Buffer(arg, encoding) but throws a TypeError
+ * if value is a number.
+ * Buffer.from(str[, encoding])
+ * Buffer.from(array)
+ * Buffer.from(buffer)
+ * Buffer.from(arrayBuffer[, byteOffset[, length]])
+ **/
+ Buffer.from = function(value, encodingOrOffset, length) {
+ return from(value, encodingOrOffset, length);
+ };
+
+ // Note: Change prototype *after* Buffer.from is defined to workaround Chrome bug:
+ // https://github.com/feross/buffer/pull/148
+ Buffer.prototype.__proto__ = Uint8Array.prototype;
+ Buffer.__proto__ = Uint8Array;
+
+ function assertSize(size) {
+ if (typeof size !== 'number') {
+ throw new TypeError('"size" argument must be of type number');
+ } else if (size < 0) {
+ throw new RangeError('The value "' + size + '" is invalid for option "size"');
+ }
+ }
+
+ function alloc(size, fill, encoding) {
+ assertSize(size);
+ if (size <= 0) {
+ return createBuffer(size);
+ }
+ if (fill !== undefined) {
+ // Only pay attention to encoding if it's a string. This
+ // prevents accidentally sending in a number that would
+ // be interpretted as a start offset.
+ return typeof encoding === 'string'
+ ? createBuffer(size).fill(fill, encoding)
+ : createBuffer(size).fill(fill);
+ }
+ return createBuffer(size);
+ }
+
+ /**
+ * Creates a new filled Buffer instance.
+ * alloc(size[, fill[, encoding]])
+ **/
+ Buffer.alloc = function(size, fill, encoding) {
+ return alloc(size, fill, encoding);
+ };
+
+ function allocUnsafe(size) {
+ assertSize(size);
+ return createBuffer(size < 0 ? 0 : checked(size) | 0);
+ }
+
+ /**
+ * Equivalent to Buffer(num), by default creates a non-zero-filled Buffer instance.
+ * */
+ Buffer.allocUnsafe = function(size) {
+ return allocUnsafe(size);
+ };
+ /**
+ * Equivalent to SlowBuffer(num), by default creates a non-zero-filled Buffer instance.
+ */
+ Buffer.allocUnsafeSlow = function(size) {
+ return allocUnsafe(size);
+ };
+
+ function fromString(string, encoding) {
+ if (typeof encoding !== 'string' || encoding === '') {
+ encoding = 'utf8';
+ }
+
+ if (!Buffer.isEncoding(encoding)) {
+ throw new TypeError('Unknown encoding: ' + encoding);
+ }
+
+ var length = byteLength(string, encoding) | 0;
+ var buf = createBuffer(length);
+
+ var actual = buf.write(string, encoding);
+
+ if (actual !== length) {
+ // Writing a hex string, for example, that contains invalid characters will
+ // cause everything after the first invalid character to be ignored. (e.g.
+ // 'abxxcd' will be treated as 'ab')
+ buf = buf.slice(0, actual);
+ }
+
+ return buf;
+ }
+
+ function fromArrayLike(array) {
+ var length = array.length < 0 ? 0 : checked(array.length) | 0;
+ var buf = createBuffer(length);
+ for (var i = 0; i < length; i += 1) {
+ buf[i] = array[i] & 255;
+ }
+ return buf;
+ }
+
+ function fromArrayBuffer(array, byteOffset, length) {
+ if (byteOffset < 0 || array.byteLength < byteOffset) {
+ throw new RangeError('"offset" is outside of buffer bounds');
+ }
+
+ if (array.byteLength < byteOffset + (length || 0)) {
+ throw new RangeError('"length" is outside of buffer bounds');
+ }
+
+ var buf;
+ if (byteOffset === undefined && length === undefined) {
+ buf = new Uint8Array(array);
+ } else if (length === undefined) {
+ buf = new Uint8Array(array, byteOffset);
+ } else {
+ buf = new Uint8Array(array, byteOffset, length);
+ }
+
+ // Return an augmented `Uint8Array` instance
+ buf.__proto__ = Buffer.prototype;
+ return buf;
+ }
+
+ function fromObject(obj) {
+ if (Buffer.isBuffer(obj)) {
+ var len = checked(obj.length) | 0;
+ var buf = createBuffer(len);
+
+ if (buf.length === 0) {
+ return buf;
+ }
+
+ obj.copy(buf, 0, 0, len);
+ return buf;
+ }
+
+ if (obj.length !== undefined) {
+ if (typeof obj.length !== 'number' || numberIsNaN(obj.length)) {
+ return createBuffer(0);
+ }
+ return fromArrayLike(obj);
+ }
+
+ if (obj.type === 'Buffer' && Array.isArray(obj.data)) {
+ return fromArrayLike(obj.data);
+ }
+ }
+
+ function checked(length) {
+ // Note: cannot use `length < K_MAX_LENGTH` here because that fails when
+ // length is NaN (which is otherwise coerced to zero.)
+ if (length >= K_MAX_LENGTH) {
+ throw new RangeError(
+ 'Attempt to allocate Buffer larger than maximum ' +
+ 'size: 0x' +
+ K_MAX_LENGTH.toString(16) +
+ ' bytes'
+ );
+ }
+ return length | 0;
+ }
+
+ function SlowBuffer(length) {
+ if (+length != length) {
+ // eslint-disable-line eqeqeq
+ length = 0;
+ }
+ return Buffer.alloc(+length);
+ }
+
+ Buffer.isBuffer = function isBuffer(b) {
+ return b != null && b._isBuffer === true && b !== Buffer.prototype; // so Buffer.isBuffer(Buffer.prototype) will be false
+ };
+
+ Buffer.compare = function compare(a, b) {
+ if (isInstance(a, Uint8Array)) a = Buffer.from(a, a.offset, a.byteLength);
+ if (isInstance(b, Uint8Array)) b = Buffer.from(b, b.offset, b.byteLength);
+ if (!Buffer.isBuffer(a) || !Buffer.isBuffer(b)) {
+ throw new TypeError(
+ 'The "buf1", "buf2" arguments must be one of type Buffer or Uint8Array'
+ );
+ }
+
+ if (a === b) return 0;
+
+ var x = a.length;
+ var y = b.length;
+
+ for (var i = 0, len = Math.min(x, y); i < len; ++i) {
+ if (a[i] !== b[i]) {
+ x = a[i];
+ y = b[i];
+ break;
+ }
+ }
+
+ if (x < y) return -1;
+ if (y < x) return 1;
+ return 0;
+ };
+
+ Buffer.isEncoding = function isEncoding(encoding) {
+ switch (String(encoding).toLowerCase()) {
+ case 'hex':
+ case 'utf8':
+ case 'utf-8':
+ case 'ascii':
+ case 'latin1':
+ case 'binary':
+ case 'base64':
+ case 'ucs2':
+ case 'ucs-2':
+ case 'utf16le':
+ case 'utf-16le':
+ return true;
+ default:
+ return false;
+ }
+ };
+
+ Buffer.concat = function concat(list, length) {
+ if (!Array.isArray(list)) {
+ throw new TypeError('"list" argument must be an Array of Buffers');
+ }
+
+ if (list.length === 0) {
+ return Buffer.alloc(0);
+ }
+
+ var i;
+ if (length === undefined) {
+ length = 0;
+ for (i = 0; i < list.length; ++i) {
+ length += list[i].length;
+ }
+ }
+
+ var buffer = Buffer.allocUnsafe(length);
+ var pos = 0;
+ for (i = 0; i < list.length; ++i) {
+ var buf = list[i];
+ if (isInstance(buf, Uint8Array)) {
+ buf = Buffer.from(buf);
+ }
+ if (!Buffer.isBuffer(buf)) {
+ throw new TypeError('"list" argument must be an Array of Buffers');
+ }
+ buf.copy(buffer, pos);
+ pos += buf.length;
+ }
+ return buffer;
+ };
+
+ function byteLength(string, encoding) {
+ if (Buffer.isBuffer(string)) {
+ return string.length;
+ }
+ if (ArrayBuffer.isView(string) || isInstance(string, ArrayBuffer)) {
+ return string.byteLength;
+ }
+ if (typeof string !== 'string') {
+ throw new TypeError(
+ 'The "string" argument must be one of type string, Buffer, or ArrayBuffer. ' +
+ 'Received type ' +
+ typeof string
+ );
+ }
+
+ var len = string.length;
+ var mustMatch = arguments.length > 2 && arguments[2] === true;
+ if (!mustMatch && len === 0) return 0;
+
+ // Use a for loop to avoid recursion
+ var loweredCase = false;
+ for (;;) {
+ switch (encoding) {
+ case 'ascii':
+ case 'latin1':
+ case 'binary':
+ return len;
+ case 'utf8':
+ case 'utf-8':
+ return utf8ToBytes(string).length;
+ case 'ucs2':
+ case 'ucs-2':
+ case 'utf16le':
+ case 'utf-16le':
+ return len * 2;
+ case 'hex':
+ return len >>> 1;
+ case 'base64':
+ return base64ToBytes(string).length;
+ default:
+ if (loweredCase) {
+ return mustMatch ? -1 : utf8ToBytes(string).length; // assume utf8
+ }
+ encoding = ('' + encoding).toLowerCase();
+ loweredCase = true;
+ }
+ }
+ }
+ Buffer.byteLength = byteLength;
+
+ function slowToString(encoding, start, end) {
+ var loweredCase = false;
+
+ // No need to verify that "this.length <= MAX_UINT32" since it's a read-only
+ // property of a typed array.
+
+ // This behaves neither like String nor Uint8Array in that we set start/end
+ // to their upper/lower bounds if the value passed is out of range.
+ // undefined is handled specially as per ECMA-262 6th Edition,
+ // Section 13.3.3.7 Runtime Semantics: KeyedBindingInitialization.
+ if (start === undefined || start < 0) {
+ start = 0;
+ }
+ // Return early if start > this.length. Done here to prevent potential uint32
+ // coercion fail below.
+ if (start > this.length) {
+ return '';
+ }
+
+ if (end === undefined || end > this.length) {
+ end = this.length;
+ }
+
+ if (end <= 0) {
+ return '';
+ }
+
+ // Force coersion to uint32. This will also coerce falsey/NaN values to 0.
+ end >>>= 0;
+ start >>>= 0;
+
+ if (end <= start) {
+ return '';
+ }
+
+ if (!encoding) encoding = 'utf8';
+
+ while (true) {
+ switch (encoding) {
+ case 'hex':
+ return hexSlice(this, start, end);
+
+ case 'utf8':
+ case 'utf-8':
+ return utf8Slice(this, start, end);
+
+ case 'ascii':
+ return asciiSlice(this, start, end);
+
+ case 'latin1':
+ case 'binary':
+ return latin1Slice(this, start, end);
+
+ case 'base64':
+ return base64Slice(this, start, end);
+
+ case 'ucs2':
+ case 'ucs-2':
+ case 'utf16le':
+ case 'utf-16le':
+ return utf16leSlice(this, start, end);
+
+ default:
+ if (loweredCase) throw new TypeError('Unknown encoding: ' + encoding);
+ encoding = (encoding + '').toLowerCase();
+ loweredCase = true;
+ }
+ }
+ }
+
+ // This property is used by `Buffer.isBuffer` (and the `is-buffer` npm package)
+ // to detect a Buffer instance. It's not possible to use `instanceof Buffer`
+ // reliably in a browserify context because there could be multiple different
+ // copies of the 'buffer' package in use. This method works even for Buffer
+ // instances that were created from another copy of the `buffer` package.
+ // See: https://github.com/feross/buffer/issues/154
+ Buffer.prototype._isBuffer = true;
+
+ function swap(b, n, m) {
+ var i = b[n];
+ b[n] = b[m];
+ b[m] = i;
+ }
+
+ Buffer.prototype.swap16 = function swap16() {
+ var len = this.length;
+ if (len % 2 !== 0) {
+ throw new RangeError('Buffer size must be a multiple of 16-bits');
+ }
+ for (var i = 0; i < len; i += 2) {
+ swap(this, i, i + 1);
+ }
+ return this;
+ };
+
+ Buffer.prototype.swap32 = function swap32() {
+ var len = this.length;
+ if (len % 4 !== 0) {
+ throw new RangeError('Buffer size must be a multiple of 32-bits');
+ }
+ for (var i = 0; i < len; i += 4) {
+ swap(this, i, i + 3);
+ swap(this, i + 1, i + 2);
+ }
+ return this;
+ };
+
+ Buffer.prototype.swap64 = function swap64() {
+ var len = this.length;
+ if (len % 8 !== 0) {
+ throw new RangeError('Buffer size must be a multiple of 64-bits');
+ }
+ for (var i = 0; i < len; i += 8) {
+ swap(this, i, i + 7);
+ swap(this, i + 1, i + 6);
+ swap(this, i + 2, i + 5);
+ swap(this, i + 3, i + 4);
+ }
+ return this;
+ };
+
+ Buffer.prototype.toString = function toString() {
+ var length = this.length;
+ if (length === 0) return '';
+ if (arguments.length === 0) return utf8Slice(this, 0, length);
+ return slowToString.apply(this, arguments);
+ };
+
+ Buffer.prototype.toLocaleString = Buffer.prototype.toString;
+
+ Buffer.prototype.equals = function equals(b) {
+ if (!Buffer.isBuffer(b)) throw new TypeError('Argument must be a Buffer');
+ if (this === b) return true;
+ return Buffer.compare(this, b) === 0;
+ };
+
+ Buffer.prototype.inspect = function inspect() {
+ var str = '';
+ var max = exports.INSPECT_MAX_BYTES;
+ str = this.toString('hex', 0, max)
+ .replace(/(.{2})/g, '$1 ')
+ .trim();
+ if (this.length > max) str += ' ... ';
+ return '';
+ };
+
+ Buffer.prototype.compare = function compare(
+ target,
+ start,
+ end,
+ thisStart,
+ thisEnd
+ ) {
+ if (isInstance(target, Uint8Array)) {
+ target = Buffer.from(target, target.offset, target.byteLength);
+ }
+ if (!Buffer.isBuffer(target)) {
+ throw new TypeError(
+ 'The "target" argument must be one of type Buffer or Uint8Array. ' +
+ 'Received type ' +
+ typeof target
+ );
+ }
+
+ if (start === undefined) {
+ start = 0;
+ }
+ if (end === undefined) {
+ end = target ? target.length : 0;
+ }
+ if (thisStart === undefined) {
+ thisStart = 0;
+ }
+ if (thisEnd === undefined) {
+ thisEnd = this.length;
+ }
+
+ if (
+ start < 0 ||
+ end > target.length ||
+ thisStart < 0 ||
+ thisEnd > this.length
+ ) {
+ throw new RangeError('out of range index');
+ }
+
+ if (thisStart >= thisEnd && start >= end) {
+ return 0;
+ }
+ if (thisStart >= thisEnd) {
+ return -1;
+ }
+ if (start >= end) {
+ return 1;
+ }
+
+ start >>>= 0;
+ end >>>= 0;
+ thisStart >>>= 0;
+ thisEnd >>>= 0;
+
+ if (this === target) return 0;
+
+ var x = thisEnd - thisStart;
+ var y = end - start;
+ var len = Math.min(x, y);
+
+ var thisCopy = this.slice(thisStart, thisEnd);
+ var targetCopy = target.slice(start, end);
+
+ for (var i = 0; i < len; ++i) {
+ if (thisCopy[i] !== targetCopy[i]) {
+ x = thisCopy[i];
+ y = targetCopy[i];
+ break;
+ }
+ }
+
+ if (x < y) return -1;
+ if (y < x) return 1;
+ return 0;
+ };
+
+ // Finds either the first index of `val` in `buffer` at offset >= `byteOffset`,
+ // OR the last index of `val` in `buffer` at offset <= `byteOffset`.
+ //
+ // Arguments:
+ // - buffer - a Buffer to search
+ // - val - a string, Buffer, or number
+ // - byteOffset - an index into `buffer`; will be clamped to an int32
+ // - encoding - an optional encoding, relevant is val is a string
+ // - dir - true for indexOf, false for lastIndexOf
+ function bidirectionalIndexOf(buffer, val, byteOffset, encoding, dir) {
+ // Empty buffer means no match
+ if (buffer.length === 0) return -1;
+
+ // Normalize byteOffset
+ if (typeof byteOffset === 'string') {
+ encoding = byteOffset;
+ byteOffset = 0;
+ } else if (byteOffset > 0x7fffffff) {
+ byteOffset = 0x7fffffff;
+ } else if (byteOffset < -0x80000000) {
+ byteOffset = -0x80000000;
+ }
+ byteOffset = +byteOffset; // Coerce to Number.
+ if (numberIsNaN(byteOffset)) {
+ // byteOffset: it it's undefined, null, NaN, "foo", etc, search whole buffer
+ byteOffset = dir ? 0 : buffer.length - 1;
+ }
+
+ // Normalize byteOffset: negative offsets start from the end of the buffer
+ if (byteOffset < 0) byteOffset = buffer.length + byteOffset;
+ if (byteOffset >= buffer.length) {
+ if (dir) return -1;
+ else byteOffset = buffer.length - 1;
+ } else if (byteOffset < 0) {
+ if (dir) byteOffset = 0;
+ else return -1;
+ }
+
+ // Normalize val
+ if (typeof val === 'string') {
+ val = Buffer.from(val, encoding);
+ }
+
+ // Finally, search either indexOf (if dir is true) or lastIndexOf
+ if (Buffer.isBuffer(val)) {
+ // Special case: looking for empty string/buffer always fails
+ if (val.length === 0) {
+ return -1;
+ }
+ return arrayIndexOf(buffer, val, byteOffset, encoding, dir);
+ } else if (typeof val === 'number') {
+ val = val & 0xff; // Search for a byte value [0-255]
+ if (typeof Uint8Array.prototype.indexOf === 'function') {
+ if (dir) {
+ return Uint8Array.prototype.indexOf.call(buffer, val, byteOffset);
+ } else {
+ return Uint8Array.prototype.lastIndexOf.call(buffer, val, byteOffset);
+ }
+ }
+ return arrayIndexOf(buffer, [val], byteOffset, encoding, dir);
+ }
+
+ throw new TypeError('val must be string, number or Buffer');
+ }
+
+ function arrayIndexOf(arr, val, byteOffset, encoding, dir) {
+ var indexSize = 1;
+ var arrLength = arr.length;
+ var valLength = val.length;
+
+ if (encoding !== undefined) {
+ encoding = String(encoding).toLowerCase();
+ if (
+ encoding === 'ucs2' ||
+ encoding === 'ucs-2' ||
+ encoding === 'utf16le' ||
+ encoding === 'utf-16le'
+ ) {
+ if (arr.length < 2 || val.length < 2) {
+ return -1;
+ }
+ indexSize = 2;
+ arrLength /= 2;
+ valLength /= 2;
+ byteOffset /= 2;
+ }
+ }
+
+ function read(buf, i) {
+ if (indexSize === 1) {
+ return buf[i];
+ } else {
+ return buf.readUInt16BE(i * indexSize);
+ }
+ }
+
+ var i;
+ if (dir) {
+ var foundIndex = -1;
+ for (i = byteOffset; i < arrLength; i++) {
+ if (read(arr, i) === read(val, foundIndex === -1 ? 0 : i - foundIndex)) {
+ if (foundIndex === -1) foundIndex = i;
+ if (i - foundIndex + 1 === valLength) return foundIndex * indexSize;
+ } else {
+ if (foundIndex !== -1) i -= i - foundIndex;
+ foundIndex = -1;
+ }
+ }
+ } else {
+ if (byteOffset + valLength > arrLength) byteOffset = arrLength - valLength;
+ for (i = byteOffset; i >= 0; i--) {
+ var found = true;
+ for (var j = 0; j < valLength; j++) {
+ if (read(arr, i + j) !== read(val, j)) {
+ found = false;
+ break;
+ }
+ }
+ if (found) return i;
+ }
+ }
+
+ return -1;
+ }
+
+ Buffer.prototype.includes = function includes(val, byteOffset, encoding) {
+ return this.indexOf(val, byteOffset, encoding) !== -1;
+ };
+
+ Buffer.prototype.indexOf = function indexOf(val, byteOffset, encoding) {
+ return bidirectionalIndexOf(this, val, byteOffset, encoding, true);
+ };
+
+ Buffer.prototype.lastIndexOf = function lastIndexOf(val, byteOffset, encoding) {
+ return bidirectionalIndexOf(this, val, byteOffset, encoding, false);
+ };
+
+ function hexWrite(buf, string, offset, length) {
+ offset = Number(offset) || 0;
+ var remaining = buf.length - offset;
+ if (!length) {
+ length = remaining;
+ } else {
+ length = Number(length);
+ if (length > remaining) {
+ length = remaining;
+ }
+ }
+
+ var strLen = string.length;
+
+ if (length > strLen / 2) {
+ length = strLen / 2;
+ }
+ for (var i = 0; i < length; ++i) {
+ var parsed = parseInt(string.substr(i * 2, 2), 16);
+ if (numberIsNaN(parsed)) return i;
+ buf[offset + i] = parsed;
+ }
+ return i;
+ }
+
+ function utf8Write(buf, string, offset, length) {
+ return blitBuffer(
+ utf8ToBytes(string, buf.length - offset),
+ buf,
+ offset,
+ length
+ );
+ }
+
+ function asciiWrite(buf, string, offset, length) {
+ return blitBuffer(asciiToBytes(string), buf, offset, length);
+ }
+
+ function latin1Write(buf, string, offset, length) {
+ return asciiWrite(buf, string, offset, length);
+ }
+
+ function base64Write(buf, string, offset, length) {
+ return blitBuffer(base64ToBytes(string), buf, offset, length);
+ }
+
+ function ucs2Write(buf, string, offset, length) {
+ return blitBuffer(
+ utf16leToBytes(string, buf.length - offset),
+ buf,
+ offset,
+ length
+ );
+ }
+
+ Buffer.prototype.write = function write(string, offset, length, encoding) {
+ // Buffer#write(string)
+ if (offset === undefined) {
+ encoding = 'utf8';
+ length = this.length;
+ offset = 0;
+ // Buffer#write(string, encoding)
+ } else if (length === undefined && typeof offset === 'string') {
+ encoding = offset;
+ length = this.length;
+ offset = 0;
+ // Buffer#write(string, offset[, length][, encoding])
+ } else if (isFinite(offset)) {
+ offset = offset >>> 0;
+ if (isFinite(length)) {
+ length = length >>> 0;
+ if (encoding === undefined) encoding = 'utf8';
+ } else {
+ encoding = length;
+ length = undefined;
+ }
+ } else {
+ throw new Error(
+ 'Buffer.write(string, encoding, offset[, length]) is no longer supported'
+ );
+ }
+
+ var remaining = this.length - offset;
+ if (length === undefined || length > remaining) length = remaining;
+
+ if ((string.length > 0 && (length < 0 || offset < 0)) || offset > this.length) {
+ throw new RangeError('Attempt to write outside buffer bounds');
+ }
+
+ if (!encoding) encoding = 'utf8';
+
+ var loweredCase = false;
+ for (;;) {
+ switch (encoding) {
+ case 'hex':
+ return hexWrite(this, string, offset, length);
+
+ case 'utf8':
+ case 'utf-8':
+ return utf8Write(this, string, offset, length);
+
+ case 'ascii':
+ return asciiWrite(this, string, offset, length);
+
+ case 'latin1':
+ case 'binary':
+ return latin1Write(this, string, offset, length);
+
+ case 'base64':
+ // Warning: maxLength not taken into account in base64Write
+ return base64Write(this, string, offset, length);
+
+ case 'ucs2':
+ case 'ucs-2':
+ case 'utf16le':
+ case 'utf-16le':
+ return ucs2Write(this, string, offset, length);
+
+ default:
+ if (loweredCase) throw new TypeError('Unknown encoding: ' + encoding);
+ encoding = ('' + encoding).toLowerCase();
+ loweredCase = true;
+ }
+ }
+ };
+
+ Buffer.prototype.toJSON = function toJSON() {
+ return {
+ type: 'Buffer',
+ data: Array.prototype.slice.call(this._arr || this, 0)
+ };
+ };
+
+ function base64Slice(buf, start, end) {
+ if (start === 0 && end === buf.length) {
+ return base64.fromByteArray(buf);
+ } else {
+ return base64.fromByteArray(buf.slice(start, end));
+ }
+ }
+
+ function utf8Slice(buf, start, end) {
+ end = Math.min(buf.length, end);
+ var res = [];
+
+ var i = start;
+ while (i < end) {
+ var firstByte = buf[i];
+ var codePoint = null;
+ var bytesPerSequence =
+ firstByte > 0xef ? 4 : firstByte > 0xdf ? 3 : firstByte > 0xbf ? 2 : 1;
+
+ if (i + bytesPerSequence <= end) {
+ var secondByte, thirdByte, fourthByte, tempCodePoint;
+
+ switch (bytesPerSequence) {
+ case 1:
+ if (firstByte < 0x80) {
+ codePoint = firstByte;
+ }
+ break;
+ case 2:
+ secondByte = buf[i + 1];
+ if ((secondByte & 0xc0) === 0x80) {
+ tempCodePoint = ((firstByte & 0x1f) << 0x6) | (secondByte & 0x3f);
+ if (tempCodePoint > 0x7f) {
+ codePoint = tempCodePoint;
+ }
+ }
+ break;
+ case 3:
+ secondByte = buf[i + 1];
+ thirdByte = buf[i + 2];
+ if ((secondByte & 0xc0) === 0x80 && (thirdByte & 0xc0) === 0x80) {
+ tempCodePoint =
+ ((firstByte & 0xf) << 0xc) |
+ ((secondByte & 0x3f) << 0x6) |
+ (thirdByte & 0x3f);
+ if (
+ tempCodePoint > 0x7ff &&
+ (tempCodePoint < 0xd800 || tempCodePoint > 0xdfff)
+ ) {
+ codePoint = tempCodePoint;
+ }
+ }
+ break;
+ case 4:
+ secondByte = buf[i + 1];
+ thirdByte = buf[i + 2];
+ fourthByte = buf[i + 3];
+ if (
+ (secondByte & 0xc0) === 0x80 &&
+ (thirdByte & 0xc0) === 0x80 &&
+ (fourthByte & 0xc0) === 0x80
+ ) {
+ tempCodePoint =
+ ((firstByte & 0xf) << 0x12) |
+ ((secondByte & 0x3f) << 0xc) |
+ ((thirdByte & 0x3f) << 0x6) |
+ (fourthByte & 0x3f);
+ if (tempCodePoint > 0xffff && tempCodePoint < 0x110000) {
+ codePoint = tempCodePoint;
+ }
+ }
+ }
+ }
+
+ if (codePoint === null) {
+ // we did not generate a valid codePoint so insert a
+ // replacement char (U+FFFD) and advance only 1 byte
+ codePoint = 0xfffd;
+ bytesPerSequence = 1;
+ } else if (codePoint > 0xffff) {
+ // encode to utf16 (surrogate pair dance)
+ codePoint -= 0x10000;
+ res.push(((codePoint >>> 10) & 0x3ff) | 0xd800);
+ codePoint = 0xdc00 | (codePoint & 0x3ff);
+ }
+
+ res.push(codePoint);
+ i += bytesPerSequence;
+ }
+
+ return decodeCodePointsArray(res);
+ }
+
+ // Based on http://stackoverflow.com/a/22747272/680742, the browser with
+ // the lowest limit is Chrome, with 0x10000 args.
+ // We go 1 magnitude less, for safety
+ var MAX_ARGUMENTS_LENGTH = 0x1000;
+
+ function decodeCodePointsArray(codePoints) {
+ var len = codePoints.length;
+ if (len <= MAX_ARGUMENTS_LENGTH) {
+ return String.fromCharCode.apply(String, codePoints); // avoid extra slice()
+ }
+
+ // Decode in chunks to avoid "call stack size exceeded".
+ var res = '';
+ var i = 0;
+ while (i < len) {
+ res += String.fromCharCode.apply(
+ String,
+ codePoints.slice(i, (i += MAX_ARGUMENTS_LENGTH))
+ );
+ }
+ return res;
+ }
+
+ function asciiSlice(buf, start, end) {
+ var ret = '';
+ end = Math.min(buf.length, end);
+
+ for (var i = start; i < end; ++i) {
+ ret += String.fromCharCode(buf[i] & 0x7f);
+ }
+ return ret;
+ }
+
+ function latin1Slice(buf, start, end) {
+ var ret = '';
+ end = Math.min(buf.length, end);
+
+ for (var i = start; i < end; ++i) {
+ ret += String.fromCharCode(buf[i]);
+ }
+ return ret;
+ }
+
+ function hexSlice(buf, start, end) {
+ var len = buf.length;
+
+ if (!start || start < 0) start = 0;
+ if (!end || end < 0 || end > len) end = len;
+
+ var out = '';
+ for (var i = start; i < end; ++i) {
+ out += toHex(buf[i]);
+ }
+ return out;
+ }
+
+ function utf16leSlice(buf, start, end) {
+ var bytes = buf.slice(start, end);
+ var res = '';
+ for (var i = 0; i < bytes.length; i += 2) {
+ res += String.fromCharCode(bytes[i] + bytes[i + 1] * 256);
+ }
+ return res;
+ }
+
+ Buffer.prototype.slice = function slice(start, end) {
+ var len = this.length;
+ start = ~~start;
+ end = end === undefined ? len : ~~end;
+
+ if (start < 0) {
+ start += len;
+ if (start < 0) start = 0;
+ } else if (start > len) {
+ start = len;
+ }
+
+ if (end < 0) {
+ end += len;
+ if (end < 0) end = 0;
+ } else if (end > len) {
+ end = len;
+ }
+
+ if (end < start) end = start;
+
+ var newBuf = this.subarray(start, end);
+ // Return an augmented `Uint8Array` instance
+ newBuf.__proto__ = Buffer.prototype;
+ return newBuf;
+ };
+
+ /*
+ * Need to make sure that buffer isn't trying to write out of bounds.
+ */
+ function checkOffset(offset, ext, length) {
+ if (offset % 1 !== 0 || offset < 0) throw new RangeError('offset is not uint');
+ if (offset + ext > length)
+ throw new RangeError('Trying to access beyond buffer length');
+ }
+
+ Buffer.prototype.readUIntLE = function readUIntLE(offset, byteLength, noAssert) {
+ offset = offset >>> 0;
+ byteLength = byteLength >>> 0;
+ if (!noAssert) checkOffset(offset, byteLength, this.length);
+
+ var val = this[offset];
+ var mul = 1;
+ var i = 0;
+ while (++i < byteLength && (mul *= 0x100)) {
+ val += this[offset + i] * mul;
+ }
+
+ return val;
+ };
+
+ Buffer.prototype.readUIntBE = function readUIntBE(offset, byteLength, noAssert) {
+ offset = offset >>> 0;
+ byteLength = byteLength >>> 0;
+ if (!noAssert) {
+ checkOffset(offset, byteLength, this.length);
+ }
+
+ var val = this[offset + --byteLength];
+ var mul = 1;
+ while (byteLength > 0 && (mul *= 0x100)) {
+ val += this[offset + --byteLength] * mul;
+ }
+
+ return val;
+ };
+
+ Buffer.prototype.readUInt8 = function readUInt8(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 1, this.length);
+ return this[offset];
+ };
+
+ Buffer.prototype.readUInt16LE = function readUInt16LE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 2, this.length);
+ return this[offset] | (this[offset + 1] << 8);
+ };
+
+ Buffer.prototype.readUInt16BE = function readUInt16BE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 2, this.length);
+ return (this[offset] << 8) | this[offset + 1];
+ };
+
+ Buffer.prototype.readUInt32LE = function readUInt32LE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 4, this.length);
+
+ return (
+ (this[offset] | (this[offset + 1] << 8) | (this[offset + 2] << 16)) +
+ this[offset + 3] * 0x1000000
+ );
+ };
+
+ Buffer.prototype.readUInt32BE = function readUInt32BE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 4, this.length);
+
+ return (
+ this[offset] * 0x1000000 +
+ ((this[offset + 1] << 16) | (this[offset + 2] << 8) | this[offset + 3])
+ );
+ };
+
+ Buffer.prototype.readIntLE = function readIntLE(offset, byteLength, noAssert) {
+ offset = offset >>> 0;
+ byteLength = byteLength >>> 0;
+ if (!noAssert) checkOffset(offset, byteLength, this.length);
+
+ var val = this[offset];
+ var mul = 1;
+ var i = 0;
+ while (++i < byteLength && (mul *= 0x100)) {
+ val += this[offset + i] * mul;
+ }
+ mul *= 0x80;
+
+ if (val >= mul) val -= Math.pow(2, 8 * byteLength);
+
+ return val;
+ };
+
+ Buffer.prototype.readIntBE = function readIntBE(offset, byteLength, noAssert) {
+ offset = offset >>> 0;
+ byteLength = byteLength >>> 0;
+ if (!noAssert) checkOffset(offset, byteLength, this.length);
+
+ var i = byteLength;
+ var mul = 1;
+ var val = this[offset + --i];
+ while (i > 0 && (mul *= 0x100)) {
+ val += this[offset + --i] * mul;
+ }
+ mul *= 0x80;
+
+ if (val >= mul) val -= Math.pow(2, 8 * byteLength);
+
+ return val;
+ };
+
+ Buffer.prototype.readInt8 = function readInt8(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 1, this.length);
+ if (!(this[offset] & 0x80)) return this[offset];
+ return (0xff - this[offset] + 1) * -1;
+ };
+
+ Buffer.prototype.readInt16LE = function readInt16LE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 2, this.length);
+ var val = this[offset] | (this[offset + 1] << 8);
+ return val & 0x8000 ? val | 0xffff0000 : val;
+ };
+
+ Buffer.prototype.readInt16BE = function readInt16BE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 2, this.length);
+ var val = this[offset + 1] | (this[offset] << 8);
+ return val & 0x8000 ? val | 0xffff0000 : val;
+ };
+
+ Buffer.prototype.readInt32LE = function readInt32LE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 4, this.length);
+
+ return (
+ this[offset] |
+ (this[offset + 1] << 8) |
+ (this[offset + 2] << 16) |
+ (this[offset + 3] << 24)
+ );
+ };
+
+ Buffer.prototype.readInt32BE = function readInt32BE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 4, this.length);
+
+ return (
+ (this[offset] << 24) |
+ (this[offset + 1] << 16) |
+ (this[offset + 2] << 8) |
+ this[offset + 3]
+ );
+ };
+
+ Buffer.prototype.readFloatLE = function readFloatLE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 4, this.length);
+ return ieee754.read(this, offset, true, 23, 4);
+ };
+
+ Buffer.prototype.readFloatBE = function readFloatBE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 4, this.length);
+ return ieee754.read(this, offset, false, 23, 4);
+ };
+
+ Buffer.prototype.readDoubleLE = function readDoubleLE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 8, this.length);
+ return ieee754.read(this, offset, true, 52, 8);
+ };
+
+ Buffer.prototype.readDoubleBE = function readDoubleBE(offset, noAssert) {
+ offset = offset >>> 0;
+ if (!noAssert) checkOffset(offset, 8, this.length);
+ return ieee754.read(this, offset, false, 52, 8);
+ };
+
+ function checkInt(buf, value, offset, ext, max, min) {
+ if (!Buffer.isBuffer(buf))
+ throw new TypeError('"buffer" argument must be a Buffer instance');
+ if (value > max || value < min)
+ throw new RangeError('"value" argument is out of bounds');
+ if (offset + ext > buf.length) throw new RangeError('Index out of range');
+ }
+
+ Buffer.prototype.writeUIntLE = function writeUIntLE(
+ value,
+ offset,
+ byteLength,
+ noAssert
+ ) {
+ value = +value;
+ offset = offset >>> 0;
+ byteLength = byteLength >>> 0;
+ if (!noAssert) {
+ var maxBytes = Math.pow(2, 8 * byteLength) - 1;
+ checkInt(this, value, offset, byteLength, maxBytes, 0);
+ }
+
+ var mul = 1;
+ var i = 0;
+ this[offset] = value & 0xff;
+ while (++i < byteLength && (mul *= 0x100)) {
+ this[offset + i] = (value / mul) & 0xff;
+ }
+
+ return offset + byteLength;
+ };
+
+ Buffer.prototype.writeUIntBE = function writeUIntBE(
+ value,
+ offset,
+ byteLength,
+ noAssert
+ ) {
+ value = +value;
+ offset = offset >>> 0;
+ byteLength = byteLength >>> 0;
+ if (!noAssert) {
+ var maxBytes = Math.pow(2, 8 * byteLength) - 1;
+ checkInt(this, value, offset, byteLength, maxBytes, 0);
+ }
+
+ var i = byteLength - 1;
+ var mul = 1;
+ this[offset + i] = value & 0xff;
+ while (--i >= 0 && (mul *= 0x100)) {
+ this[offset + i] = (value / mul) & 0xff;
+ }
+
+ return offset + byteLength;
+ };
+
+ Buffer.prototype.writeUInt8 = function writeUInt8(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 1, 0xff, 0);
+ this[offset] = value & 0xff;
+ return offset + 1;
+ };
+
+ Buffer.prototype.writeUInt16LE = function writeUInt16LE(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 2, 0xffff, 0);
+ this[offset] = value & 0xff;
+ this[offset + 1] = value >>> 8;
+ return offset + 2;
+ };
+
+ Buffer.prototype.writeUInt16BE = function writeUInt16BE(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 2, 0xffff, 0);
+ this[offset] = value >>> 8;
+ this[offset + 1] = value & 0xff;
+ return offset + 2;
+ };
+
+ Buffer.prototype.writeUInt32LE = function writeUInt32LE(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 4, 0xffffffff, 0);
+ this[offset + 3] = value >>> 24;
+ this[offset + 2] = value >>> 16;
+ this[offset + 1] = value >>> 8;
+ this[offset] = value & 0xff;
+ return offset + 4;
+ };
+
+ Buffer.prototype.writeUInt32BE = function writeUInt32BE(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 4, 0xffffffff, 0);
+ this[offset] = value >>> 24;
+ this[offset + 1] = value >>> 16;
+ this[offset + 2] = value >>> 8;
+ this[offset + 3] = value & 0xff;
+ return offset + 4;
+ };
+
+ Buffer.prototype.writeIntLE = function writeIntLE(
+ value,
+ offset,
+ byteLength,
+ noAssert
+ ) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) {
+ var limit = Math.pow(2, 8 * byteLength - 1);
+
+ checkInt(this, value, offset, byteLength, limit - 1, -limit);
+ }
+
+ var i = 0;
+ var mul = 1;
+ var sub = 0;
+ this[offset] = value & 0xff;
+ while (++i < byteLength && (mul *= 0x100)) {
+ if (value < 0 && sub === 0 && this[offset + i - 1] !== 0) {
+ sub = 1;
+ }
+ this[offset + i] = (((value / mul) >> 0) - sub) & 0xff;
+ }
+
+ return offset + byteLength;
+ };
+
+ Buffer.prototype.writeIntBE = function writeIntBE(
+ value,
+ offset,
+ byteLength,
+ noAssert
+ ) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) {
+ var limit = Math.pow(2, 8 * byteLength - 1);
+
+ checkInt(this, value, offset, byteLength, limit - 1, -limit);
+ }
+
+ var i = byteLength - 1;
+ var mul = 1;
+ var sub = 0;
+ this[offset + i] = value & 0xff;
+ while (--i >= 0 && (mul *= 0x100)) {
+ if (value < 0 && sub === 0 && this[offset + i + 1] !== 0) {
+ sub = 1;
+ }
+ this[offset + i] = (((value / mul) >> 0) - sub) & 0xff;
+ }
+
+ return offset + byteLength;
+ };
+
+ Buffer.prototype.writeInt8 = function writeInt8(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 1, 0x7f, -0x80);
+ if (value < 0) value = 0xff + value + 1;
+ this[offset] = value & 0xff;
+ return offset + 1;
+ };
+
+ Buffer.prototype.writeInt16LE = function writeInt16LE(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 2, 0x7fff, -0x8000);
+ this[offset] = value & 0xff;
+ this[offset + 1] = value >>> 8;
+ return offset + 2;
+ };
+
+ Buffer.prototype.writeInt16BE = function writeInt16BE(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 2, 0x7fff, -0x8000);
+ this[offset] = value >>> 8;
+ this[offset + 1] = value & 0xff;
+ return offset + 2;
+ };
+
+ Buffer.prototype.writeInt32LE = function writeInt32LE(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 4, 0x7fffffff, -0x80000000);
+ this[offset] = value & 0xff;
+ this[offset + 1] = value >>> 8;
+ this[offset + 2] = value >>> 16;
+ this[offset + 3] = value >>> 24;
+ return offset + 4;
+ };
+
+ Buffer.prototype.writeInt32BE = function writeInt32BE(value, offset, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) checkInt(this, value, offset, 4, 0x7fffffff, -0x80000000);
+ if (value < 0) value = 0xffffffff + value + 1;
+ this[offset] = value >>> 24;
+ this[offset + 1] = value >>> 16;
+ this[offset + 2] = value >>> 8;
+ this[offset + 3] = value & 0xff;
+ return offset + 4;
+ };
+
+ function checkIEEE754(buf, value, offset, ext, max, min) {
+ if (offset + ext > buf.length) throw new RangeError('Index out of range');
+ if (offset < 0) throw new RangeError('Index out of range');
+ }
+
+ function writeFloat(buf, value, offset, littleEndian, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) {
+ checkIEEE754(
+ buf,
+ value,
+ offset,
+ 4,
+ 3.4028234663852886e38,
+ -3.4028234663852886e38
+ );
+ }
+ ieee754.write(buf, value, offset, littleEndian, 23, 4);
+ return offset + 4;
+ }
+
+ Buffer.prototype.writeFloatLE = function writeFloatLE(value, offset, noAssert) {
+ return writeFloat(this, value, offset, true, noAssert);
+ };
+
+ Buffer.prototype.writeFloatBE = function writeFloatBE(value, offset, noAssert) {
+ return writeFloat(this, value, offset, false, noAssert);
+ };
+
+ function writeDouble(buf, value, offset, littleEndian, noAssert) {
+ value = +value;
+ offset = offset >>> 0;
+ if (!noAssert) {
+ checkIEEE754(
+ buf,
+ value,
+ offset,
+ 8,
+ 1.7976931348623157e308,
+ -1.7976931348623157e308
+ );
+ }
+ ieee754.write(buf, value, offset, littleEndian, 52, 8);
+ return offset + 8;
+ }
+
+ Buffer.prototype.writeDoubleLE = function writeDoubleLE(value, offset, noAssert) {
+ return writeDouble(this, value, offset, true, noAssert);
+ };
+
+ Buffer.prototype.writeDoubleBE = function writeDoubleBE(value, offset, noAssert) {
+ return writeDouble(this, value, offset, false, noAssert);
+ };
+
+ // copy(targetBuffer, targetStart=0, sourceStart=0, sourceEnd=buffer.length)
+ Buffer.prototype.copy = function copy(target, targetStart, start, end) {
+ if (!Buffer.isBuffer(target))
+ throw new TypeError('argument should be a Buffer');
+ if (!start) start = 0;
+ if (!end && end !== 0) end = this.length;
+ if (targetStart >= target.length) targetStart = target.length;
+ if (!targetStart) targetStart = 0;
+ if (end > 0 && end < start) end = start;
+
+ // Copy 0 bytes; we're done
+ if (end === start) return 0;
+ if (target.length === 0 || this.length === 0) return 0;
+
+ // Fatal error conditions
+ if (targetStart < 0) {
+ throw new RangeError('targetStart out of bounds');
+ }
+ if (start < 0 || start >= this.length)
+ throw new RangeError('Index out of range');
+ if (end < 0) throw new RangeError('sourceEnd out of bounds');
+
+ // Are we oob?
+ if (end > this.length) end = this.length;
+ if (target.length - targetStart < end - start) {
+ end = target.length - targetStart + start;
+ }
+
+ var len = end - start;
+
+ if (this === target && typeof Uint8Array.prototype.copyWithin === 'function') {
+ // Use built-in when available, missing from IE11
+ this.copyWithin(targetStart, start, end);
+ } else if (this === target && start < targetStart && targetStart < end) {
+ // descending copy from end
+ for (var i = len - 1; i >= 0; --i) {
+ target[i + targetStart] = this[i + start];
+ }
+ } else {
+ Uint8Array.prototype.set.call(target, this.subarray(start, end), targetStart);
+ }
+
+ return len;
+ };
+
+ // Usage:
+ // buffer.fill(number[, offset[, end]])
+ // buffer.fill(buffer[, offset[, end]])
+ // buffer.fill(string[, offset[, end]][, encoding])
+ Buffer.prototype.fill = function fill(val, start, end, encoding) {
+ // Handle string cases:
+ if (typeof val === 'string') {
+ if (typeof start === 'string') {
+ encoding = start;
+ start = 0;
+ end = this.length;
+ } else if (typeof end === 'string') {
+ encoding = end;
+ end = this.length;
+ }
+ if (encoding !== undefined && typeof encoding !== 'string') {
+ throw new TypeError('encoding must be a string');
+ }
+ if (typeof encoding === 'string' && !Buffer.isEncoding(encoding)) {
+ throw new TypeError('Unknown encoding: ' + encoding);
+ }
+ if (val.length === 1) {
+ var code = val.charCodeAt(0);
+ if ((encoding === 'utf8' && code < 128) || encoding === 'latin1') {
+ // Fast path: If `val` fits into a single byte, use that numeric value.
+ val = code;
+ }
+ }
+ } else if (typeof val === 'number') {
+ val = val & 255;
+ }
+
+ // Invalid ranges are not set to a default, so can range check early.
+ if (start < 0 || this.length < start || this.length < end) {
+ throw new RangeError('Out of range index');
+ }
+
+ if (end <= start) {
+ return this;
+ }
+
+ start = start >>> 0;
+ end = end === undefined ? this.length : end >>> 0;
+
+ if (!val) val = 0;
+
+ var i;
+ if (typeof val === 'number') {
+ for (i = start; i < end; ++i) {
+ this[i] = val;
+ }
+ } else {
+ var bytes = Buffer.isBuffer(val) ? val : Buffer.from(val, encoding);
+ var len = bytes.length;
+ if (len === 0) {
+ throw new TypeError(
+ 'The value "' + val + '" is invalid for argument "value"'
+ );
+ }
+ for (i = 0; i < end - start; ++i) {
+ this[i + start] = bytes[i % len];
+ }
+ }
+
+ return this;
+ };
+
+ // HELPER FUNCTIONS
+ // ================
+
+ var INVALID_BASE64_RE = /[^+/0-9A-Za-z-_]/g;
+
+ function base64clean(str) {
+ // Node takes equal signs as end of the Base64 encoding
+ str = str.split('=')[0];
+ // Node strips out invalid characters like \n and \t from the string, base64-js does not
+ str = str.trim().replace(INVALID_BASE64_RE, '');
+ // Node converts strings with length < 2 to ''
+ if (str.length < 2) return '';
+ // Node allows for non-padded base64 strings (missing trailing ===), base64-js does not
+ while (str.length % 4 !== 0) {
+ str = str + '=';
+ }
+ return str;
+ }
+
+ function toHex(n) {
+ if (n < 16) return '0' + n.toString(16);
+ return n.toString(16);
+ }
+
+ function utf8ToBytes(string, units) {
+ units = units || Infinity;
+ var codePoint;
+ var length = string.length;
+ var leadSurrogate = null;
+ var bytes = [];
+
+ for (var i = 0; i < length; ++i) {
+ codePoint = string.charCodeAt(i);
+
+ // is surrogate component
+ if (codePoint > 0xd7ff && codePoint < 0xe000) {
+ // last char was a lead
+ if (!leadSurrogate) {
+ // no lead yet
+ if (codePoint > 0xdbff) {
+ // unexpected trail
+ if ((units -= 3) > -1) bytes.push(0xef, 0xbf, 0xbd);
+ continue;
+ } else if (i + 1 === length) {
+ // unpaired lead
+ if ((units -= 3) > -1) bytes.push(0xef, 0xbf, 0xbd);
+ continue;
+ }
+
+ // valid lead
+ leadSurrogate = codePoint;
+
+ continue;
+ }
+
+ // 2 leads in a row
+ if (codePoint < 0xdc00) {
+ if ((units -= 3) > -1) bytes.push(0xef, 0xbf, 0xbd);
+ leadSurrogate = codePoint;
+ continue;
+ }
+
+ // valid surrogate pair
+ codePoint =
+ (((leadSurrogate - 0xd800) << 10) | (codePoint - 0xdc00)) + 0x10000;
+ } else if (leadSurrogate) {
+ // valid bmp char, but last char was a lead
+ if ((units -= 3) > -1) bytes.push(0xef, 0xbf, 0xbd);
+ }
+
+ leadSurrogate = null;
+
+ // encode utf8
+ if (codePoint < 0x80) {
+ if ((units -= 1) < 0) break;
+ bytes.push(codePoint);
+ } else if (codePoint < 0x800) {
+ if ((units -= 2) < 0) break;
+ bytes.push((codePoint >> 0x6) | 0xc0, (codePoint & 0x3f) | 0x80);
+ } else if (codePoint < 0x10000) {
+ if ((units -= 3) < 0) break;
+ bytes.push(
+ (codePoint >> 0xc) | 0xe0,
+ ((codePoint >> 0x6) & 0x3f) | 0x80,
+ (codePoint & 0x3f) | 0x80
+ );
+ } else if (codePoint < 0x110000) {
+ if ((units -= 4) < 0) break;
+ bytes.push(
+ (codePoint >> 0x12) | 0xf0,
+ ((codePoint >> 0xc) & 0x3f) | 0x80,
+ ((codePoint >> 0x6) & 0x3f) | 0x80,
+ (codePoint & 0x3f) | 0x80
+ );
+ } else {
+ throw new Error('Invalid code point');
+ }
+ }
+
+ return bytes;
+ }
+
+ function asciiToBytes(str) {
+ var byteArray = [];
+ for (var i = 0; i < str.length; ++i) {
+ // Node's code seems to be doing this and not & 0x7F..
+ byteArray.push(str.charCodeAt(i) & 0xff);
+ }
+ return byteArray;
+ }
+
+ function utf16leToBytes(str, units) {
+ var c, hi, lo;
+ var byteArray = [];
+ for (var i = 0; i < str.length; ++i) {
+ if ((units -= 2) < 0) break;
+
+ c = str.charCodeAt(i);
+ hi = c >> 8;
+ lo = c % 256;
+ byteArray.push(lo);
+ byteArray.push(hi);
+ }
+
+ return byteArray;
+ }
+
+ function base64ToBytes(str) {
+ return base64.toByteArray(base64clean(str));
+ }
+
+ function blitBuffer(src, dst, offset, length) {
+ for (var i = 0; i < length; ++i) {
+ if (i + offset >= dst.length || i >= src.length) break;
+ dst[i + offset] = src[i];
+ }
+ return i;
+ }
+
+ // ArrayBuffer or Uint8Array objects from other contexts (i.e. iframes) do not pass
+ // the `instanceof` check but they should be treated as of that type.
+ // See: https://github.com/feross/buffer/issues/166
+ function isInstance(obj, type) {
+ return (
+ obj instanceof type ||
+ (obj != null &&
+ obj.constructor != null &&
+ obj.constructor.name != null &&
+ obj.constructor.name === type.name)
+ );
+ }
+ function numberIsNaN(obj) {
+ // For IE11 support
+ return obj !== obj; // eslint-disable-line no-self-compare
+ }
+ },
+ { 'base64-js': 2, ieee754: 9 }
+ ],
+ 5: [
+ function(_dereq_, module, exports) {
+ // This file can be required in Browserify and Node.js for automatic polyfill
+ // To use it: require('es6-promise/auto');
+ 'use strict';
+ module.exports = _dereq_('./').polyfill();
+ },
+ { './': 6 }
+ ],
+ 6: [
+ function(_dereq_, module, exports) {
+ (function(process, global) {
+ /*!
+ * @overview es6-promise - a tiny implementation of Promises/A+.
+ * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+ * @license Licensed under MIT license
+ * See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+ * @version v4.2.6+9869a4bc
+ */
+
+ (function(global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined'
+ ? (module.exports = factory())
+ : typeof define === 'function' && define.amd
+ ? define(factory)
+ : (global.ES6Promise = factory());
+ })(this, function() {
+ 'use strict';
+
+ function objectOrFunction(x) {
+ var type = typeof x;
+ return x !== null && (type === 'object' || type === 'function');
+ }
+
+ function isFunction(x) {
+ return typeof x === 'function';
+ }
+
+ var _isArray = void 0;
+ if (Array.isArray) {
+ _isArray = Array.isArray;
+ } else {
+ _isArray = function(x) {
+ return Object.prototype.toString.call(x) === '[object Array]';
+ };
+ }
+
+ var isArray = _isArray;
+
+ var len = 0;
+ var vertxNext = void 0;
+ var customSchedulerFn = void 0;
+
+ var asap = function asap(callback, arg) {
+ queue[len] = callback;
+ queue[len + 1] = arg;
+ len += 2;
+ if (len === 2) {
+ // If len is 2, that means that we need to schedule an async flush.
+ // If additional callbacks are queued before the queue is flushed, they
+ // will be processed by this flush that we are scheduling.
+ if (customSchedulerFn) {
+ customSchedulerFn(flush);
+ } else {
+ scheduleFlush();
+ }
+ }
+ };
+
+ function setScheduler(scheduleFn) {
+ customSchedulerFn = scheduleFn;
+ }
+
+ function setAsap(asapFn) {
+ asap = asapFn;
+ }
+
+ var browserWindow = typeof window !== 'undefined' ? window : undefined;
+ var browserGlobal = browserWindow || {};
+ var BrowserMutationObserver =
+ browserGlobal.MutationObserver || browserGlobal.WebKitMutationObserver;
+ var isNode =
+ typeof self === 'undefined' &&
+ typeof process !== 'undefined' &&
+ {}.toString.call(process) === '[object process]';
+
+ // test for web worker but not in IE10
+ var isWorker =
+ typeof Uint8ClampedArray !== 'undefined' &&
+ typeof importScripts !== 'undefined' &&
+ typeof MessageChannel !== 'undefined';
+
+ // node
+ function useNextTick() {
+ // node version 0.10.x displays a deprecation warning when nextTick is used recursively
+ // see https://github.com/cujojs/when/issues/410 for details
+ return function() {
+ return process.nextTick(flush);
+ };
+ }
+
+ // vertx
+ function useVertxTimer() {
+ if (typeof vertxNext !== 'undefined') {
+ return function() {
+ vertxNext(flush);
+ };
+ }
+
+ return useSetTimeout();
+ }
+
+ function useMutationObserver() {
+ var iterations = 0;
+ var observer = new BrowserMutationObserver(flush);
+ var node = document.createTextNode('');
+ observer.observe(node, { characterData: true });
+
+ return function() {
+ node.data = iterations = ++iterations % 2;
+ };
+ }
+
+ // web worker
+ function useMessageChannel() {
+ var channel = new MessageChannel();
+ channel.port1.onmessage = flush;
+ return function() {
+ return channel.port2.postMessage(0);
+ };
+ }
+
+ function useSetTimeout() {
+ // Store setTimeout reference so es6-promise will be unaffected by
+ // other code modifying setTimeout (like sinon.useFakeTimers())
+ var globalSetTimeout = setTimeout;
+ return function() {
+ return globalSetTimeout(flush, 1);
+ };
+ }
+
+ var queue = new Array(1000);
+ function flush() {
+ for (var i = 0; i < len; i += 2) {
+ var callback = queue[i];
+ var arg = queue[i + 1];
+
+ callback(arg);
+
+ queue[i] = undefined;
+ queue[i + 1] = undefined;
+ }
+
+ len = 0;
+ }
+
+ function attemptVertx() {
+ try {
+ var vertx = Function('return this')().require('vertx');
+ vertxNext = vertx.runOnLoop || vertx.runOnContext;
+ return useVertxTimer();
+ } catch (e) {
+ return useSetTimeout();
+ }
+ }
+
+ var scheduleFlush = void 0;
+ // Decide what async method to use to triggering processing of queued callbacks:
+ if (isNode) {
+ scheduleFlush = useNextTick();
+ } else if (BrowserMutationObserver) {
+ scheduleFlush = useMutationObserver();
+ } else if (isWorker) {
+ scheduleFlush = useMessageChannel();
+ } else if (browserWindow === undefined && typeof _dereq_ === 'function') {
+ scheduleFlush = attemptVertx();
+ } else {
+ scheduleFlush = useSetTimeout();
+ }
+
+ function then(onFulfillment, onRejection) {
+ var parent = this;
+
+ var child = new this.constructor(noop);
+
+ if (child[PROMISE_ID] === undefined) {
+ makePromise(child);
+ }
+
+ var _state = parent._state;
+
+ if (_state) {
+ var callback = arguments[_state - 1];
+ asap(function() {
+ return invokeCallback(_state, child, callback, parent._result);
+ });
+ } else {
+ subscribe(parent, child, onFulfillment, onRejection);
+ }
+
+ return child;
+ }
+
+ /**
+ `Promise.resolve` returns a promise that will become resolved with the
+ passed `value`. It is shorthand for the following:
+
+ ```javascript
+ let promise = new Promise(function(resolve, reject){
+ resolve(1);
+ });
+
+ promise.then(function(value){
+ // value === 1
+ });
+ ```
+
+ Instead of writing the above, your code now simply becomes the following:
+
+ ```javascript
+ let promise = Promise.resolve(1);
+
+ promise.then(function(value){
+ // value === 1
+ });
+ ```
+
+ @method resolve
+ @static
+ @param {Any} value value that the returned promise will be resolved with
+ Useful for tooling.
+ @return {Promise} a promise that will become fulfilled with the given
+ `value`
+*/
+ function resolve$1(object) {
+ /*jshint validthis:true */
+ var Constructor = this;
+
+ if (
+ object &&
+ typeof object === 'object' &&
+ object.constructor === Constructor
+ ) {
+ return object;
+ }
+
+ var promise = new Constructor(noop);
+ resolve(promise, object);
+ return promise;
+ }
+
+ var PROMISE_ID = Math.random()
+ .toString(36)
+ .substring(2);
+
+ function noop() {}
+
+ var PENDING = void 0;
+ var FULFILLED = 1;
+ var REJECTED = 2;
+
+ var TRY_CATCH_ERROR = { error: null };
+
+ function selfFulfillment() {
+ return new TypeError('You cannot resolve a promise with itself');
+ }
+
+ function cannotReturnOwn() {
+ return new TypeError(
+ 'A promises callback cannot return that same promise.'
+ );
+ }
+
+ function getThen(promise) {
+ try {
+ return promise.then;
+ } catch (error) {
+ TRY_CATCH_ERROR.error = error;
+ return TRY_CATCH_ERROR;
+ }
+ }
+
+ function tryThen(then$$1, value, fulfillmentHandler, rejectionHandler) {
+ try {
+ then$$1.call(value, fulfillmentHandler, rejectionHandler);
+ } catch (e) {
+ return e;
+ }
+ }
+
+ function handleForeignThenable(promise, thenable, then$$1) {
+ asap(function(promise) {
+ var sealed = false;
+ var error = tryThen(
+ then$$1,
+ thenable,
+ function(value) {
+ if (sealed) {
+ return;
+ }
+ sealed = true;
+ if (thenable !== value) {
+ resolve(promise, value);
+ } else {
+ fulfill(promise, value);
+ }
+ },
+ function(reason) {
+ if (sealed) {
+ return;
+ }
+ sealed = true;
+
+ reject(promise, reason);
+ },
+ 'Settle: ' + (promise._label || ' unknown promise')
+ );
+
+ if (!sealed && error) {
+ sealed = true;
+ reject(promise, error);
+ }
+ }, promise);
+ }
+
+ function handleOwnThenable(promise, thenable) {
+ if (thenable._state === FULFILLED) {
+ fulfill(promise, thenable._result);
+ } else if (thenable._state === REJECTED) {
+ reject(promise, thenable._result);
+ } else {
+ subscribe(
+ thenable,
+ undefined,
+ function(value) {
+ return resolve(promise, value);
+ },
+ function(reason) {
+ return reject(promise, reason);
+ }
+ );
+ }
+ }
+
+ function handleMaybeThenable(promise, maybeThenable, then$$1) {
+ if (
+ maybeThenable.constructor === promise.constructor &&
+ then$$1 === then &&
+ maybeThenable.constructor.resolve === resolve$1
+ ) {
+ handleOwnThenable(promise, maybeThenable);
+ } else {
+ if (then$$1 === TRY_CATCH_ERROR) {
+ reject(promise, TRY_CATCH_ERROR.error);
+ TRY_CATCH_ERROR.error = null;
+ } else if (then$$1 === undefined) {
+ fulfill(promise, maybeThenable);
+ } else if (isFunction(then$$1)) {
+ handleForeignThenable(promise, maybeThenable, then$$1);
+ } else {
+ fulfill(promise, maybeThenable);
+ }
+ }
+ }
+
+ function resolve(promise, value) {
+ if (promise === value) {
+ reject(promise, selfFulfillment());
+ } else if (objectOrFunction(value)) {
+ handleMaybeThenable(promise, value, getThen(value));
+ } else {
+ fulfill(promise, value);
+ }
+ }
+
+ function publishRejection(promise) {
+ if (promise._onerror) {
+ promise._onerror(promise._result);
+ }
+
+ publish(promise);
+ }
+
+ function fulfill(promise, value) {
+ if (promise._state !== PENDING) {
+ return;
+ }
+
+ promise._result = value;
+ promise._state = FULFILLED;
+
+ if (promise._subscribers.length !== 0) {
+ asap(publish, promise);
+ }
+ }
+
+ function reject(promise, reason) {
+ if (promise._state !== PENDING) {
+ return;
+ }
+ promise._state = REJECTED;
+ promise._result = reason;
+
+ asap(publishRejection, promise);
+ }
+
+ function subscribe(parent, child, onFulfillment, onRejection) {
+ var _subscribers = parent._subscribers;
+ var length = _subscribers.length;
+
+ parent._onerror = null;
+
+ _subscribers[length] = child;
+ _subscribers[length + FULFILLED] = onFulfillment;
+ _subscribers[length + REJECTED] = onRejection;
+
+ if (length === 0 && parent._state) {
+ asap(publish, parent);
+ }
+ }
+
+ function publish(promise) {
+ var subscribers = promise._subscribers;
+ var settled = promise._state;
+
+ if (subscribers.length === 0) {
+ return;
+ }
+
+ var child = void 0,
+ callback = void 0,
+ detail = promise._result;
+
+ for (var i = 0; i < subscribers.length; i += 3) {
+ child = subscribers[i];
+ callback = subscribers[i + settled];
+
+ if (child) {
+ invokeCallback(settled, child, callback, detail);
+ } else {
+ callback(detail);
+ }
+ }
+
+ promise._subscribers.length = 0;
+ }
+
+ function tryCatch(callback, detail) {
+ try {
+ return callback(detail);
+ } catch (e) {
+ TRY_CATCH_ERROR.error = e;
+ return TRY_CATCH_ERROR;
+ }
+ }
+
+ function invokeCallback(settled, promise, callback, detail) {
+ var hasCallback = isFunction(callback),
+ value = void 0,
+ error = void 0,
+ succeeded = void 0,
+ failed = void 0;
+
+ if (hasCallback) {
+ value = tryCatch(callback, detail);
+
+ if (value === TRY_CATCH_ERROR) {
+ failed = true;
+ error = value.error;
+ value.error = null;
+ } else {
+ succeeded = true;
+ }
+
+ if (promise === value) {
+ reject(promise, cannotReturnOwn());
+ return;
+ }
+ } else {
+ value = detail;
+ succeeded = true;
+ }
+
+ if (promise._state !== PENDING) {
+ // noop
+ } else if (hasCallback && succeeded) {
+ resolve(promise, value);
+ } else if (failed) {
+ reject(promise, error);
+ } else if (settled === FULFILLED) {
+ fulfill(promise, value);
+ } else if (settled === REJECTED) {
+ reject(promise, value);
+ }
+ }
+
+ function initializePromise(promise, resolver) {
+ try {
+ resolver(
+ function resolvePromise(value) {
+ resolve(promise, value);
+ },
+ function rejectPromise(reason) {
+ reject(promise, reason);
+ }
+ );
+ } catch (e) {
+ reject(promise, e);
+ }
+ }
+
+ var id = 0;
+ function nextId() {
+ return id++;
+ }
+
+ function makePromise(promise) {
+ promise[PROMISE_ID] = id++;
+ promise._state = undefined;
+ promise._result = undefined;
+ promise._subscribers = [];
+ }
+
+ function validationError() {
+ return new Error('Array Methods must be provided an Array');
+ }
+
+ var Enumerator = (function() {
+ function Enumerator(Constructor, input) {
+ this._instanceConstructor = Constructor;
+ this.promise = new Constructor(noop);
+
+ if (!this.promise[PROMISE_ID]) {
+ makePromise(this.promise);
+ }
+
+ if (isArray(input)) {
+ this.length = input.length;
+ this._remaining = input.length;
+
+ this._result = new Array(this.length);
+
+ if (this.length === 0) {
+ fulfill(this.promise, this._result);
+ } else {
+ this.length = this.length || 0;
+ this._enumerate(input);
+ if (this._remaining === 0) {
+ fulfill(this.promise, this._result);
+ }
+ }
+ } else {
+ reject(this.promise, validationError());
+ }
+ }
+
+ Enumerator.prototype._enumerate = function _enumerate(input) {
+ for (var i = 0; this._state === PENDING && i < input.length; i++) {
+ this._eachEntry(input[i], i);
+ }
+ };
+
+ Enumerator.prototype._eachEntry = function _eachEntry(entry, i) {
+ var c = this._instanceConstructor;
+ var resolve$$1 = c.resolve;
+
+ if (resolve$$1 === resolve$1) {
+ var _then = getThen(entry);
+
+ if (_then === then && entry._state !== PENDING) {
+ this._settledAt(entry._state, i, entry._result);
+ } else if (typeof _then !== 'function') {
+ this._remaining--;
+ this._result[i] = entry;
+ } else if (c === Promise$1) {
+ var promise = new c(noop);
+ handleMaybeThenable(promise, entry, _then);
+ this._willSettleAt(promise, i);
+ } else {
+ this._willSettleAt(
+ new c(function(resolve$$1) {
+ return resolve$$1(entry);
+ }),
+ i
+ );
+ }
+ } else {
+ this._willSettleAt(resolve$$1(entry), i);
+ }
+ };
+
+ Enumerator.prototype._settledAt = function _settledAt(state, i, value) {
+ var promise = this.promise;
+
+ if (promise._state === PENDING) {
+ this._remaining--;
+
+ if (state === REJECTED) {
+ reject(promise, value);
+ } else {
+ this._result[i] = value;
+ }
+ }
+
+ if (this._remaining === 0) {
+ fulfill(promise, this._result);
+ }
+ };
+
+ Enumerator.prototype._willSettleAt = function _willSettleAt(promise, i) {
+ var enumerator = this;
+
+ subscribe(
+ promise,
+ undefined,
+ function(value) {
+ return enumerator._settledAt(FULFILLED, i, value);
+ },
+ function(reason) {
+ return enumerator._settledAt(REJECTED, i, reason);
+ }
+ );
+ };
+
+ return Enumerator;
+ })();
+
+ /**
+ `Promise.all` accepts an array of promises, and returns a new promise which
+ is fulfilled with an array of fulfillment values for the passed promises, or
+ rejected with the reason of the first passed promise to be rejected. It casts all
+ elements of the passed iterable to promises as it runs this algorithm.
+
+ Example:
+
+ ```javascript
+ let promise1 = resolve(1);
+ let promise2 = resolve(2);
+ let promise3 = resolve(3);
+ let promises = [ promise1, promise2, promise3 ];
+
+ Promise.all(promises).then(function(array){
+ // The array here would be [ 1, 2, 3 ];
+ });
+ ```
+
+ If any of the `promises` given to `all` are rejected, the first promise
+ that is rejected will be given as an argument to the returned promises's
+ rejection handler. For example:
+
+ Example:
+
+ ```javascript
+ let promise1 = resolve(1);
+ let promise2 = reject(new Error("2"));
+ let promise3 = reject(new Error("3"));
+ let promises = [ promise1, promise2, promise3 ];
+
+ Promise.all(promises).then(function(array){
+ // Code here never runs because there are rejected promises!
+ }, function(error) {
+ // error.message === "2"
+ });
+ ```
+
+ @method all
+ @static
+ @param {Array} entries array of promises
+ @param {String} label optional string for labeling the promise.
+ Useful for tooling.
+ @return {Promise} promise that is fulfilled when all `promises` have been
+ fulfilled, or rejected if any of them become rejected.
+ @static
+*/
+ function all(entries) {
+ return new Enumerator(this, entries).promise;
+ }
+
+ /**
+ `Promise.race` returns a new promise which is settled in the same way as the
+ first passed promise to settle.
+
+ Example:
+
+ ```javascript
+ let promise1 = new Promise(function(resolve, reject){
+ setTimeout(function(){
+ resolve('promise 1');
+ }, 200);
+ });
+
+ let promise2 = new Promise(function(resolve, reject){
+ setTimeout(function(){
+ resolve('promise 2');
+ }, 100);
+ });
+
+ Promise.race([promise1, promise2]).then(function(result){
+ // result === 'promise 2' because it was resolved before promise1
+ // was resolved.
+ });
+ ```
+
+ `Promise.race` is deterministic in that only the state of the first
+ settled promise matters. For example, even if other promises given to the
+ `promises` array argument are resolved, but the first settled promise has
+ become rejected before the other promises became fulfilled, the returned
+ promise will become rejected:
+
+ ```javascript
+ let promise1 = new Promise(function(resolve, reject){
+ setTimeout(function(){
+ resolve('promise 1');
+ }, 200);
+ });
+
+ let promise2 = new Promise(function(resolve, reject){
+ setTimeout(function(){
+ reject(new Error('promise 2'));
+ }, 100);
+ });
+
+ Promise.race([promise1, promise2]).then(function(result){
+ // Code here never runs
+ }, function(reason){
+ // reason.message === 'promise 2' because promise 2 became rejected before
+ // promise 1 became fulfilled
+ });
+ ```
+
+ An example real-world use case is implementing timeouts:
+
+ ```javascript
+ Promise.race([ajax('foo.json'), timeout(5000)])
+ ```
+
+ @method race
+ @static
+ @param {Array} promises array of promises to observe
+ Useful for tooling.
+ @return {Promise} a promise which settles in the same way as the first passed
+ promise to settle.
+*/
+ function race(entries) {
+ /*jshint validthis:true */
+ var Constructor = this;
+
+ if (!isArray(entries)) {
+ return new Constructor(function(_, reject) {
+ return reject(new TypeError('You must pass an array to race.'));
+ });
+ } else {
+ return new Constructor(function(resolve, reject) {
+ var length = entries.length;
+ for (var i = 0; i < length; i++) {
+ Constructor.resolve(entries[i]).then(resolve, reject);
+ }
+ });
+ }
+ }
+
+ /**
+ `Promise.reject` returns a promise rejected with the passed `reason`.
+ It is shorthand for the following:
+
+ ```javascript
+ let promise = new Promise(function(resolve, reject){
+ reject(new Error('WHOOPS'));
+ });
+
+ promise.then(function(value){
+ // Code here doesn't run because the promise is rejected!
+ }, function(reason){
+ // reason.message === 'WHOOPS'
+ });
+ ```
+
+ Instead of writing the above, your code now simply becomes the following:
+
+ ```javascript
+ let promise = Promise.reject(new Error('WHOOPS'));
+
+ promise.then(function(value){
+ // Code here doesn't run because the promise is rejected!
+ }, function(reason){
+ // reason.message === 'WHOOPS'
+ });
+ ```
+
+ @method reject
+ @static
+ @param {Any} reason value that the returned promise will be rejected with.
+ Useful for tooling.
+ @return {Promise} a promise rejected with the given `reason`.
+*/
+ function reject$1(reason) {
+ /*jshint validthis:true */
+ var Constructor = this;
+ var promise = new Constructor(noop);
+ reject(promise, reason);
+ return promise;
+ }
+
+ function needsResolver() {
+ throw new TypeError(
+ 'You must pass a resolver function as the first argument to the promise constructor'
+ );
+ }
+
+ function needsNew() {
+ throw new TypeError(
+ "Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function."
+ );
+ }
+
+ /**
+ Promise objects represent the eventual result of an asynchronous operation. The
+ primary way of interacting with a promise is through its `then` method, which
+ registers callbacks to receive either a promise's eventual value or the reason
+ why the promise cannot be fulfilled.
+
+ Terminology
+ -----------
+
+ - `promise` is an object or function with a `then` method whose behavior conforms to this specification.
+ - `thenable` is an object or function that defines a `then` method.
+ - `value` is any legal JavaScript value (including undefined, a thenable, or a promise).
+ - `exception` is a value that is thrown using the throw statement.
+ - `reason` is a value that indicates why a promise was rejected.
+ - `settled` the final resting state of a promise, fulfilled or rejected.
+
+ A promise can be in one of three states: pending, fulfilled, or rejected.
+
+ Promises that are fulfilled have a fulfillment value and are in the fulfilled
+ state. Promises that are rejected have a rejection reason and are in the
+ rejected state. A fulfillment value is never a thenable.
+
+ Promises can also be said to *resolve* a value. If this value is also a
+ promise, then the original promise's settled state will match the value's
+ settled state. So a promise that *resolves* a promise that rejects will
+ itself reject, and a promise that *resolves* a promise that fulfills will
+ itself fulfill.
+
+
+ Basic Usage:
+ ------------
+
+ ```js
+ let promise = new Promise(function(resolve, reject) {
+ // on success
+ resolve(value);
+
+ // on failure
+ reject(reason);
+ });
+
+ promise.then(function(value) {
+ // on fulfillment
+ }, function(reason) {
+ // on rejection
+ });
+ ```
+
+ Advanced Usage:
+ ---------------
+
+ Promises shine when abstracting away asynchronous interactions such as
+ `XMLHttpRequest`s.
+
+ ```js
+ function getJSON(url) {
+ return new Promise(function(resolve, reject){
+ let xhr = new XMLHttpRequest();
+
+ xhr.open('GET', url);
+ xhr.onreadystatechange = handler;
+ xhr.responseType = 'json';
+ xhr.setRequestHeader('Accept', 'application/json');
+ xhr.send();
+
+ function handler() {
+ if (this.readyState === this.DONE) {
+ if (this.status === 200) {
+ resolve(this.response);
+ } else {
+ reject(new Error('getJSON: `' + url + '` failed with status: [' + this.status + ']'));
+ }
+ }
+ };
+ });
+ }
+
+ getJSON('/posts.json').then(function(json) {
+ // on fulfillment
+ }, function(reason) {
+ // on rejection
+ });
+ ```
+
+ Unlike callbacks, promises are great composable primitives.
+
+ ```js
+ Promise.all([
+ getJSON('/posts'),
+ getJSON('/comments')
+ ]).then(function(values){
+ values[0] // => postsJSON
+ values[1] // => commentsJSON
+
+ return values;
+ });
+ ```
+
+ @class Promise
+ @param {Function} resolver
+ Useful for tooling.
+ @constructor
+*/
+
+ var Promise$1 = (function() {
+ function Promise(resolver) {
+ this[PROMISE_ID] = nextId();
+ this._result = this._state = undefined;
+ this._subscribers = [];
+
+ if (noop !== resolver) {
+ typeof resolver !== 'function' && needsResolver();
+ this instanceof Promise
+ ? initializePromise(this, resolver)
+ : needsNew();
+ }
+ }
+
+ /**
+ The primary way of interacting with a promise is through its `then` method,
+ which registers callbacks to receive either a promise's eventual value or the
+ reason why the promise cannot be fulfilled.
+ ```js
+ findUser().then(function(user){
+ // user is available
+ }, function(reason){
+ // user is unavailable, and you are given the reason why
+ });
+ ```
+ Chaining
+ --------
+ The return value of `then` is itself a promise. This second, 'downstream'
+ promise is resolved with the return value of the first promise's fulfillment
+ or rejection handler, or rejected if the handler throws an exception.
+ ```js
+ findUser().then(function (user) {
+ return user.name;
+ }, function (reason) {
+ return 'default name';
+ }).then(function (userName) {
+ // If `findUser` fulfilled, `userName` will be the user's name, otherwise it
+ // will be `'default name'`
+ });
+ findUser().then(function (user) {
+ throw new Error('Found user, but still unhappy');
+ }, function (reason) {
+ throw new Error('`findUser` rejected and we're unhappy');
+ }).then(function (value) {
+ // never reached
+ }, function (reason) {
+ // if `findUser` fulfilled, `reason` will be 'Found user, but still unhappy'.
+ // If `findUser` rejected, `reason` will be '`findUser` rejected and we're unhappy'.
+ });
+ ```
+ If the downstream promise does not specify a rejection handler, rejection reasons will be propagated further downstream.
+ ```js
+ findUser().then(function (user) {
+ throw new PedagogicalException('Upstream error');
+ }).then(function (value) {
+ // never reached
+ }).then(function (value) {
+ // never reached
+ }, function (reason) {
+ // The `PedgagocialException` is propagated all the way down to here
+ });
+ ```
+ Assimilation
+ ------------
+ Sometimes the value you want to propagate to a downstream promise can only be
+ retrieved asynchronously. This can be achieved by returning a promise in the
+ fulfillment or rejection handler. The downstream promise will then be pending
+ until the returned promise is settled. This is called *assimilation*.
+ ```js
+ findUser().then(function (user) {
+ return findCommentsByAuthor(user);
+ }).then(function (comments) {
+ // The user's comments are now available
+ });
+ ```
+ If the assimliated promise rejects, then the downstream promise will also reject.
+ ```js
+ findUser().then(function (user) {
+ return findCommentsByAuthor(user);
+ }).then(function (comments) {
+ // If `findCommentsByAuthor` fulfills, we'll have the value here
+ }, function (reason) {
+ // If `findCommentsByAuthor` rejects, we'll have the reason here
+ });
+ ```
+ Simple Example
+ --------------
+ Synchronous Example
+ ```javascript
+ let result;
+ try {
+ result = findResult();
+ // success
+ } catch(reason) {
+ // failure
+ }
+ ```
+ Errback Example
+ ```js
+ findResult(function(result, err){
+ if (err) {
+ // failure
+ } else {
+ // success
+ }
+ });
+ ```
+ Promise Example;
+ ```javascript
+ findResult().then(function(result){
+ // success
+ }, function(reason){
+ // failure
+ });
+ ```
+ Advanced Example
+ --------------
+ Synchronous Example
+ ```javascript
+ let author, books;
+ try {
+ author = findAuthor();
+ books = findBooksByAuthor(author);
+ // success
+ } catch(reason) {
+ // failure
+ }
+ ```
+ Errback Example
+ ```js
+ function foundBooks(books) {
+ }
+ function failure(reason) {
+ }
+ findAuthor(function(author, err){
+ if (err) {
+ failure(err);
+ // failure
+ } else {
+ try {
+ findBoooksByAuthor(author, function(books, err) {
+ if (err) {
+ failure(err);
+ } else {
+ try {
+ foundBooks(books);
+ } catch(reason) {
+ failure(reason);
+ }
+ }
+ });
+ } catch(error) {
+ failure(err);
+ }
+ // success
+ }
+ });
+ ```
+ Promise Example;
+ ```javascript
+ findAuthor().
+ then(findBooksByAuthor).
+ then(function(books){
+ // found books
+ }).catch(function(reason){
+ // something went wrong
+ });
+ ```
+ @method then
+ @param {Function} onFulfilled
+ @param {Function} onRejected
+ Useful for tooling.
+ @return {Promise}
+ */
+
+ /**
+ `catch` is simply sugar for `then(undefined, onRejection)` which makes it the same
+ as the catch block of a try/catch statement.
+ ```js
+ function findAuthor(){
+ throw new Error('couldn't find that author');
+ }
+ // synchronous
+ try {
+ findAuthor();
+ } catch(reason) {
+ // something went wrong
+ }
+ // async with promises
+ findAuthor().catch(function(reason){
+ // something went wrong
+ });
+ ```
+ @method catch
+ @param {Function} onRejection
+ Useful for tooling.
+ @return {Promise}
+ */
+
+ Promise.prototype.catch = function _catch(onRejection) {
+ return this.then(null, onRejection);
+ };
+
+ /**
+ `finally` will be invoked regardless of the promise's fate just as native
+ try/catch/finally behaves
+
+ Synchronous example:
+
+ ```js
+ findAuthor() {
+ if (Math.random() > 0.5) {
+ throw new Error();
+ }
+ return new Author();
+ }
+
+ try {
+ return findAuthor(); // succeed or fail
+ } catch(error) {
+ return findOtherAuther();
+ } finally {
+ // always runs
+ // doesn't affect the return value
+ }
+ ```
+
+ Asynchronous example:
+
+ ```js
+ findAuthor().catch(function(reason){
+ return findOtherAuther();
+ }).finally(function(){
+ // author was either found, or not
+ });
+ ```
+
+ @method finally
+ @param {Function} callback
+ @return {Promise}
+ */
+
+ Promise.prototype.finally = function _finally(callback) {
+ var promise = this;
+ var constructor = promise.constructor;
+
+ if (isFunction(callback)) {
+ return promise.then(
+ function(value) {
+ return constructor.resolve(callback()).then(function() {
+ return value;
+ });
+ },
+ function(reason) {
+ return constructor.resolve(callback()).then(function() {
+ throw reason;
+ });
+ }
+ );
+ }
+
+ return promise.then(callback, callback);
+ };
+
+ return Promise;
+ })();
+
+ Promise$1.prototype.then = then;
+ Promise$1.all = all;
+ Promise$1.race = race;
+ Promise$1.resolve = resolve$1;
+ Promise$1.reject = reject$1;
+ Promise$1._setScheduler = setScheduler;
+ Promise$1._setAsap = setAsap;
+ Promise$1._asap = asap;
+
+ /*global self*/
+ function polyfill() {
+ var local = void 0;
+
+ if (typeof global !== 'undefined') {
+ local = global;
+ } else if (typeof self !== 'undefined') {
+ local = self;
+ } else {
+ try {
+ local = Function('return this')();
+ } catch (e) {
+ throw new Error(
+ 'polyfill failed because global object is unavailable in this environment'
+ );
+ }
+ }
+
+ var P = local.Promise;
+
+ if (P) {
+ var promiseToString = null;
+ try {
+ promiseToString = Object.prototype.toString.call(P.resolve());
+ } catch (e) {
+ // silently ignored
+ }
+
+ if (promiseToString === '[object Promise]' && !P.cast) {
+ return;
+ }
+ }
+
+ local.Promise = Promise$1;
+ }
+
+ // Strange compat..
+ Promise$1.polyfill = polyfill;
+ Promise$1.Promise = Promise$1;
+
+ return Promise$1;
+ });
+ }.call(
+ this,
+ _dereq_('_process'),
+ typeof global !== 'undefined'
+ ? global
+ : typeof self !== 'undefined'
+ ? self
+ : typeof window !== 'undefined' ? window : {}
+ ));
+ },
+ { _process: 14 }
+ ],
+ 7: [
+ function(_dereq_, module, exports) {
+ (function(global, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['exports', 'module'], factory);
+ } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
+ factory(exports, module);
+ } else {
+ var mod = {
+ exports: {}
+ };
+ factory(mod.exports, mod);
+ global.fetchJsonp = mod.exports;
+ }
+ })(this, function(exports, module) {
+ 'use strict';
+
+ var defaultOptions = {
+ timeout: 5000,
+ jsonpCallback: 'callback',
+ jsonpCallbackFunction: null
+ };
+
+ function generateCallbackFunction() {
+ return 'jsonp_' + Date.now() + '_' + Math.ceil(Math.random() * 100000);
+ }
+
+ function clearFunction(functionName) {
+ // IE8 throws an exception when you try to delete a property on window
+ // http://stackoverflow.com/a/1824228/751089
+ try {
+ delete window[functionName];
+ } catch (e) {
+ window[functionName] = undefined;
+ }
+ }
+
+ function removeScript(scriptId) {
+ var script = document.getElementById(scriptId);
+ if (script) {
+ document.getElementsByTagName('head')[0].removeChild(script);
+ }
+ }
+
+ function fetchJsonp(_url) {
+ var options =
+ arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+ // to avoid param reassign
+ var url = _url;
+ var timeout = options.timeout || defaultOptions.timeout;
+ var jsonpCallback = options.jsonpCallback || defaultOptions.jsonpCallback;
+
+ var timeoutId = undefined;
+
+ return new Promise(function(resolve, reject) {
+ var callbackFunction =
+ options.jsonpCallbackFunction || generateCallbackFunction();
+ var scriptId = jsonpCallback + '_' + callbackFunction;
+
+ window[callbackFunction] = function(response) {
+ resolve({
+ ok: true,
+ // keep consistent with fetch API
+ json: function json() {
+ return Promise.resolve(response);
+ }
+ });
+
+ if (timeoutId) clearTimeout(timeoutId);
+
+ removeScript(scriptId);
+
+ clearFunction(callbackFunction);
+ };
+
+ // Check if the user set their own params, and if not add a ? to start a list of params
+ url += url.indexOf('?') === -1 ? '?' : '&';
+
+ var jsonpScript = document.createElement('script');
+ jsonpScript.setAttribute(
+ 'src',
+ '' + url + jsonpCallback + '=' + callbackFunction
+ );
+ if (options.charset) {
+ jsonpScript.setAttribute('charset', options.charset);
+ }
+ jsonpScript.id = scriptId;
+ document.getElementsByTagName('head')[0].appendChild(jsonpScript);
+
+ timeoutId = setTimeout(function() {
+ reject(new Error('JSONP request to ' + _url + ' timed out'));
+
+ clearFunction(callbackFunction);
+ removeScript(scriptId);
+ window[callbackFunction] = function() {
+ clearFunction(callbackFunction);
+ };
+ }, timeout);
+
+ // Caught if got 404/500
+ jsonpScript.onerror = function() {
+ reject(new Error('JSONP request to ' + _url + ' failed'));
+
+ clearFunction(callbackFunction);
+ removeScript(scriptId);
+ if (timeoutId) clearTimeout(timeoutId);
+ };
+ });
+ }
+
+ // export as global function
+ /*
+ let local;
+ if (typeof global !== 'undefined') {
+ local = global;
+ } else if (typeof self !== 'undefined') {
+ local = self;
+ } else {
+ try {
+ local = Function('return this')();
+ } catch (e) {
+ throw new Error('polyfill failed because global object is unavailable in this environment');
+ }
+ }
+ local.fetchJsonp = fetchJsonp;
+ */
+
+ module.exports = fetchJsonp;
+ });
+ },
+ {}
+ ],
+ 8: [
+ function(_dereq_, module, exports) {
+ /* FileSaver.js
+ * A saveAs() FileSaver implementation.
+ * 1.3.2
+ * 2016-06-16 18:25:19
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: MIT
+ * See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
+ */
+
+ /*global self */
+ /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
+
+ /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
+
+ var saveAs =
+ saveAs ||
+ (function(view) {
+ 'use strict';
+ // IE <10 is explicitly unsupported
+ if (
+ typeof view === 'undefined' ||
+ (typeof navigator !== 'undefined' &&
+ /MSIE [1-9]\./.test(navigator.userAgent))
+ ) {
+ return;
+ }
+ var doc = view.document,
+ // only get URL when necessary in case Blob.js hasn't overridden it yet
+ get_URL = function() {
+ return view.URL || view.webkitURL || view;
+ },
+ save_link = doc.createElementNS('http://www.w3.org/1999/xhtml', 'a'),
+ can_use_save_link = 'download' in save_link,
+ click = function(node) {
+ var event = new MouseEvent('click');
+ node.dispatchEvent(event);
+ },
+ is_safari = /constructor/i.test(view.HTMLElement) || view.safari,
+ is_chrome_ios = /CriOS\/[\d]+/.test(navigator.userAgent),
+ throw_outside = function(ex) {
+ (view.setImmediate || view.setTimeout)(function() {
+ throw ex;
+ }, 0);
+ },
+ force_saveable_type = 'application/octet-stream',
+ // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
+ arbitrary_revoke_timeout = 1000 * 40, // in ms
+ revoke = function(file) {
+ var revoker = function() {
+ if (typeof file === 'string') {
+ // file is an object URL
+ get_URL().revokeObjectURL(file);
+ } else {
+ // file is a File
+ file.remove();
+ }
+ };
+ setTimeout(revoker, arbitrary_revoke_timeout);
+ },
+ dispatch = function(filesaver, event_types, event) {
+ event_types = [].concat(event_types);
+ var i = event_types.length;
+ while (i--) {
+ var listener = filesaver['on' + event_types[i]];
+ if (typeof listener === 'function') {
+ try {
+ listener.call(filesaver, event || filesaver);
+ } catch (ex) {
+ throw_outside(ex);
+ }
+ }
+ }
+ },
+ auto_bom = function(blob) {
+ // prepend BOM for UTF-8 XML and text/* types (including HTML)
+ // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
+ if (
+ /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(
+ blob.type
+ )
+ ) {
+ return new Blob([String.fromCharCode(0xfeff), blob], {
+ type: blob.type
+ });
+ }
+ return blob;
+ },
+ FileSaver = function(blob, name, no_auto_bom) {
+ if (!no_auto_bom) {
+ blob = auto_bom(blob);
+ }
+ // First try a.download, then web filesystem, then object URLs
+ var filesaver = this,
+ type = blob.type,
+ force = type === force_saveable_type,
+ object_url,
+ dispatch_all = function() {
+ dispatch(filesaver, 'writestart progress write writeend'.split(' '));
+ },
+ // on any filesys errors revert to saving with object URLs
+ fs_error = function() {
+ if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
+ // Safari doesn't allow downloading of blob urls
+ var reader = new FileReader();
+ reader.onloadend = function() {
+ var url = is_chrome_ios
+ ? reader.result
+ : reader.result.replace(
+ /^data:[^;]*;/,
+ 'data:attachment/file;'
+ );
+ var popup = view.open(url, '_blank');
+ if (!popup) view.location.href = url;
+ url = undefined; // release reference before dispatching
+ filesaver.readyState = filesaver.DONE;
+ dispatch_all();
+ };
+ reader.readAsDataURL(blob);
+ filesaver.readyState = filesaver.INIT;
+ return;
+ }
+ // don't create more object URLs than needed
+ if (!object_url) {
+ object_url = get_URL().createObjectURL(blob);
+ }
+ if (force) {
+ view.location.href = object_url;
+ } else {
+ var opened = view.open(object_url, '_blank');
+ if (!opened) {
+ // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
+ view.location.href = object_url;
+ }
+ }
+ filesaver.readyState = filesaver.DONE;
+ dispatch_all();
+ revoke(object_url);
+ };
+ filesaver.readyState = filesaver.INIT;
+
+ if (can_use_save_link) {
+ object_url = get_URL().createObjectURL(blob);
+ setTimeout(function() {
+ save_link.href = object_url;
+ save_link.download = name;
+ click(save_link);
+ dispatch_all();
+ revoke(object_url);
+ filesaver.readyState = filesaver.DONE;
+ });
+ return;
+ }
+
+ fs_error();
+ },
+ FS_proto = FileSaver.prototype,
+ saveAs = function(blob, name, no_auto_bom) {
+ return new FileSaver(blob, name || blob.name || 'download', no_auto_bom);
+ };
+ // IE 10+ (native saveAs)
+ if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
+ return function(blob, name, no_auto_bom) {
+ name = name || blob.name || 'download';
+
+ if (!no_auto_bom) {
+ blob = auto_bom(blob);
+ }
+ return navigator.msSaveOrOpenBlob(blob, name);
+ };
+ }
+
+ FS_proto.abort = function() {};
+ FS_proto.readyState = FS_proto.INIT = 0;
+ FS_proto.WRITING = 1;
+ FS_proto.DONE = 2;
+
+ FS_proto.error = FS_proto.onwritestart = FS_proto.onprogress = FS_proto.onwrite = FS_proto.onabort = FS_proto.onerror = FS_proto.onwriteend = null;
+
+ return saveAs;
+ })(
+ (typeof self !== 'undefined' && self) ||
+ (typeof window !== 'undefined' && window) ||
+ this.content
+ );
+ // `self` is undefined in Firefox for Android content script context
+ // while `this` is nsIContentFrameMessageManager
+ // with an attribute `content` that corresponds to the window
+
+ if (typeof module !== 'undefined' && module.exports) {
+ module.exports.saveAs = saveAs;
+ } else if (
+ typeof define !== 'undefined' &&
+ define !== null &&
+ define.amd !== null
+ ) {
+ define('FileSaver.js', function() {
+ return saveAs;
+ });
+ }
+ },
+ {}
+ ],
+ 9: [
+ function(_dereq_, module, exports) {
+ exports.read = function(buffer, offset, isLE, mLen, nBytes) {
+ var e, m;
+ var eLen = nBytes * 8 - mLen - 1;
+ var eMax = (1 << eLen) - 1;
+ var eBias = eMax >> 1;
+ var nBits = -7;
+ var i = isLE ? nBytes - 1 : 0;
+ var d = isLE ? -1 : 1;
+ var s = buffer[offset + i];
+
+ i += d;
+
+ e = s & ((1 << -nBits) - 1);
+ s >>= -nBits;
+ nBits += eLen;
+ for (; nBits > 0; e = e * 256 + buffer[offset + i], i += d, nBits -= 8) {}
+
+ m = e & ((1 << -nBits) - 1);
+ e >>= -nBits;
+ nBits += mLen;
+ for (; nBits > 0; m = m * 256 + buffer[offset + i], i += d, nBits -= 8) {}
+
+ if (e === 0) {
+ e = 1 - eBias;
+ } else if (e === eMax) {
+ return m ? NaN : (s ? -1 : 1) * Infinity;
+ } else {
+ m = m + Math.pow(2, mLen);
+ e = e - eBias;
+ }
+ return (s ? -1 : 1) * m * Math.pow(2, e - mLen);
+ };
+
+ exports.write = function(buffer, value, offset, isLE, mLen, nBytes) {
+ var e, m, c;
+ var eLen = nBytes * 8 - mLen - 1;
+ var eMax = (1 << eLen) - 1;
+ var eBias = eMax >> 1;
+ var rt = mLen === 23 ? Math.pow(2, -24) - Math.pow(2, -77) : 0;
+ var i = isLE ? 0 : nBytes - 1;
+ var d = isLE ? 1 : -1;
+ var s = value < 0 || (value === 0 && 1 / value < 0) ? 1 : 0;
+
+ value = Math.abs(value);
+
+ if (isNaN(value) || value === Infinity) {
+ m = isNaN(value) ? 1 : 0;
+ e = eMax;
+ } else {
+ e = Math.floor(Math.log(value) / Math.LN2);
+ if (value * (c = Math.pow(2, -e)) < 1) {
+ e--;
+ c *= 2;
+ }
+ if (e + eBias >= 1) {
+ value += rt / c;
+ } else {
+ value += rt * Math.pow(2, 1 - eBias);
+ }
+ if (value * c >= 2) {
+ e++;
+ c /= 2;
+ }
+
+ if (e + eBias >= eMax) {
+ m = 0;
+ e = eMax;
+ } else if (e + eBias >= 1) {
+ m = (value * c - 1) * Math.pow(2, mLen);
+ e = e + eBias;
+ } else {
+ m = value * Math.pow(2, eBias - 1) * Math.pow(2, mLen);
+ e = 0;
+ }
+ }
+
+ for (; mLen >= 8; buffer[offset + i] = m & 0xff, i += d, m /= 256, mLen -= 8) {}
+
+ e = (e << mLen) | m;
+ eLen += mLen;
+ for (; eLen > 0; buffer[offset + i] = e & 0xff, i += d, e /= 256, eLen -= 8) {}
+
+ buffer[offset + i - d] |= s * 128;
+ };
+ },
+ {}
+ ],
+ 10: [
+ function(_dereq_, module, exports) {
+ /*
+
+ Copyright 2000, Silicon Graphics, Inc. All Rights Reserved.
+ Copyright 2015, Google Inc. All Rights Reserved.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to
+ deal in the Software without restriction, including without limitation the
+ rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ sell copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice including the dates of first publication and
+ either this permission notice or a reference to http://oss.sgi.com/projects/FreeB/
+ shall be included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ SILICON GRAPHICS, INC. BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
+ IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+ Original Code. The Original Code is: OpenGL Sample Implementation,
+ Version 1.2.1, released January 26, 2000, developed by Silicon Graphics,
+ Inc. The Original Code is Copyright (c) 1991-2000 Silicon Graphics, Inc.
+ Copyright in any portions created by third parties is as indicated
+ elsewhere herein. All Rights Reserved.
+*/
+ 'use strict';
+ var n;
+ function t(a, b) {
+ return a.b === b.b && a.a === b.a;
+ }
+ function u(a, b) {
+ return a.b < b.b || (a.b === b.b && a.a <= b.a);
+ }
+ function v(a, b, c) {
+ var d = b.b - a.b,
+ e = c.b - b.b;
+ return 0 < d + e
+ ? d < e
+ ? b.a - a.a + d / (d + e) * (a.a - c.a)
+ : b.a - c.a + e / (d + e) * (c.a - a.a)
+ : 0;
+ }
+ function x(a, b, c) {
+ var d = b.b - a.b,
+ e = c.b - b.b;
+ return 0 < d + e ? (b.a - c.a) * d + (b.a - a.a) * e : 0;
+ }
+ function z(a, b) {
+ return a.a < b.a || (a.a === b.a && a.b <= b.b);
+ }
+ function aa(a, b, c) {
+ var d = b.a - a.a,
+ e = c.a - b.a;
+ return 0 < d + e
+ ? d < e
+ ? b.b - a.b + d / (d + e) * (a.b - c.b)
+ : b.b - c.b + e / (d + e) * (c.b - a.b)
+ : 0;
+ }
+ function ba(a, b, c) {
+ var d = b.a - a.a,
+ e = c.a - b.a;
+ return 0 < d + e ? (b.b - c.b) * d + (b.b - a.b) * e : 0;
+ }
+ function ca(a) {
+ return u(a.b.a, a.a);
+ }
+ function da(a) {
+ return u(a.a, a.b.a);
+ }
+ function A(a, b, c, d) {
+ a = 0 > a ? 0 : a;
+ c = 0 > c ? 0 : c;
+ return a <= c
+ ? 0 === c ? (b + d) / 2 : b + a / (a + c) * (d - b)
+ : d + c / (a + c) * (b - d);
+ }
+ function ea(a) {
+ var b = B(a.b);
+ C(b, a.c);
+ C(b.b, a.c);
+ D(b, a.a);
+ return b;
+ }
+ function E(a, b) {
+ var c = !1,
+ d = !1;
+ a !== b &&
+ (b.a !== a.a && ((d = !0), F(b.a, a.a)),
+ b.d !== a.d && ((c = !0), G(b.d, a.d)),
+ H(b, a),
+ d || (C(b, a.a), (a.a.c = a)),
+ c || (D(b, a.d), (a.d.a = a)));
+ }
+ function I(a) {
+ var b = a.b,
+ c = !1;
+ a.d !== a.b.d && ((c = !0), G(a.d, a.b.d));
+ a.c === a
+ ? F(a.a, null)
+ : ((a.b.d.a = J(a)), (a.a.c = a.c), H(a, J(a)), c || D(a, a.d));
+ b.c === b
+ ? (F(b.a, null), G(b.d, null))
+ : ((a.d.a = J(b)), (b.a.c = b.c), H(b, J(b)));
+ fa(a);
+ }
+ function K(a) {
+ var b = B(a),
+ c = b.b;
+ H(b, a.e);
+ b.a = a.b.a;
+ C(c, b.a);
+ b.d = c.d = a.d;
+ b = b.b;
+ H(a.b, J(a.b));
+ H(a.b, b);
+ a.b.a = b.a;
+ b.b.a.c = b.b;
+ b.b.d = a.b.d;
+ b.f = a.f;
+ b.b.f = a.b.f;
+ return b;
+ }
+ function L(a, b) {
+ var c = !1,
+ d = B(a),
+ e = d.b;
+ b.d !== a.d && ((c = !0), G(b.d, a.d));
+ H(d, a.e);
+ H(e, b);
+ d.a = a.b.a;
+ e.a = b.a;
+ d.d = e.d = a.d;
+ a.d.a = e;
+ c || D(d, a.d);
+ return d;
+ }
+ function B(a) {
+ var b = new M(),
+ c = new M(),
+ d = a.b.h;
+ c.h = d;
+ d.b.h = b;
+ b.h = a;
+ a.b.h = c;
+ b.b = c;
+ b.c = b;
+ b.e = c;
+ c.b = b;
+ c.c = c;
+ return (c.e = b);
+ }
+ function H(a, b) {
+ var c = a.c,
+ d = b.c;
+ c.b.e = b;
+ d.b.e = a;
+ a.c = d;
+ b.c = c;
+ }
+ function C(a, b) {
+ var c = b.f,
+ d = new N(b, c);
+ c.e = d;
+ b.f = d;
+ c = d.c = a;
+ do (c.a = d), (c = c.c);
+ while (c !== a);
+ }
+ function D(a, b) {
+ var c = b.d,
+ d = new ga(b, c);
+ c.b = d;
+ b.d = d;
+ d.a = a;
+ d.c = b.c;
+ c = a;
+ do (c.d = d), (c = c.e);
+ while (c !== a);
+ }
+ function fa(a) {
+ var b = a.h;
+ a = a.b.h;
+ b.b.h = a;
+ a.b.h = b;
+ }
+ function F(a, b) {
+ var c = a.c,
+ d = c;
+ do (d.a = b), (d = d.c);
+ while (d !== c);
+ c = a.f;
+ d = a.e;
+ d.f = c;
+ c.e = d;
+ }
+ function G(a, b) {
+ var c = a.a,
+ d = c;
+ do (d.d = b), (d = d.e);
+ while (d !== c);
+ c = a.d;
+ d = a.b;
+ d.d = c;
+ c.b = d;
+ }
+ function ha(a) {
+ var b = 0;
+ Math.abs(a[1]) > Math.abs(a[0]) && (b = 1);
+ Math.abs(a[2]) > Math.abs(a[b]) && (b = 2);
+ return b;
+ }
+ var O = 4 * 1e150;
+ function P(a, b) {
+ a.f += b.f;
+ a.b.f += b.b.f;
+ }
+ function ia(a, b, c) {
+ a = a.a;
+ b = b.a;
+ c = c.a;
+ if (b.b.a === a)
+ return c.b.a === a
+ ? u(b.a, c.a) ? 0 >= x(c.b.a, b.a, c.a) : 0 <= x(b.b.a, c.a, b.a)
+ : 0 >= x(c.b.a, a, c.a);
+ if (c.b.a === a) return 0 <= x(b.b.a, a, b.a);
+ b = v(b.b.a, a, b.a);
+ a = v(c.b.a, a, c.a);
+ return b >= a;
+ }
+ function Q(a) {
+ a.a.i = null;
+ var b = a.e;
+ b.a.c = b.c;
+ b.c.a = b.a;
+ a.e = null;
+ }
+ function ja(a, b) {
+ I(a.a);
+ a.c = !1;
+ a.a = b;
+ b.i = a;
+ }
+ function ka(a) {
+ var b = a.a.a;
+ do a = R(a);
+ while (a.a.a === b);
+ a.c && ((b = L(S(a).a.b, a.a.e)), ja(a, b), (a = R(a)));
+ return a;
+ }
+ function la(a, b, c) {
+ var d = new ma();
+ d.a = c;
+ d.e = na(a.f, b.e, d);
+ return (c.i = d);
+ }
+ function oa(a, b) {
+ switch (a.s) {
+ case 100130:
+ return 0 !== (b & 1);
+ case 100131:
+ return 0 !== b;
+ case 100132:
+ return 0 < b;
+ case 100133:
+ return 0 > b;
+ case 100134:
+ return 2 <= b || -2 >= b;
+ }
+ return !1;
+ }
+ function pa(a) {
+ var b = a.a,
+ c = b.d;
+ c.c = a.d;
+ c.a = b;
+ Q(a);
+ }
+ function T(a, b, c) {
+ a = b;
+ for (b = b.a; a !== c; ) {
+ a.c = !1;
+ var d = S(a),
+ e = d.a;
+ if (e.a !== b.a) {
+ if (!d.c) {
+ pa(a);
+ break;
+ }
+ e = L(b.c.b, e.b);
+ ja(d, e);
+ }
+ b.c !== e && (E(J(e), e), E(b, e));
+ pa(a);
+ b = d.a;
+ a = d;
+ }
+ return b;
+ }
+ function U(a, b, c, d, e, f) {
+ var g = !0;
+ do la(a, b, c.b), (c = c.c);
+ while (c !== d);
+ for (null === e && (e = S(b).a.b.c); ; ) {
+ d = S(b);
+ c = d.a.b;
+ if (c.a !== e.a) break;
+ c.c !== e && (E(J(c), c), E(J(e), c));
+ d.f = b.f - c.f;
+ d.d = oa(a, d.f);
+ b.b = !0;
+ !g && qa(a, b) && (P(c, e), Q(b), I(e));
+ g = !1;
+ b = d;
+ e = c;
+ }
+ b.b = !0;
+ f && ra(a, b);
+ }
+ function sa(a, b, c, d, e) {
+ var f = [b.g[0], b.g[1], b.g[2]];
+ b.d = null;
+ b.d = a.o ? a.o(f, c, d, a.c) || null : null;
+ null === b.d && (e ? a.n || (V(a, 100156), (a.n = !0)) : (b.d = c[0]));
+ }
+ function ta(a, b, c) {
+ var d = [null, null, null, null];
+ d[0] = b.a.d;
+ d[1] = c.a.d;
+ sa(a, b.a, d, [0.5, 0.5, 0, 0], !1);
+ E(b, c);
+ }
+ function ua(a, b, c, d, e) {
+ var f = Math.abs(b.b - a.b) + Math.abs(b.a - a.a),
+ g = Math.abs(c.b - a.b) + Math.abs(c.a - a.a),
+ h = e + 1;
+ d[e] = 0.5 * g / (f + g);
+ d[h] = 0.5 * f / (f + g);
+ a.g[0] += d[e] * b.g[0] + d[h] * c.g[0];
+ a.g[1] += d[e] * b.g[1] + d[h] * c.g[1];
+ a.g[2] += d[e] * b.g[2] + d[h] * c.g[2];
+ }
+ function qa(a, b) {
+ var c = S(b),
+ d = b.a,
+ e = c.a;
+ if (u(d.a, e.a)) {
+ if (0 < x(e.b.a, d.a, e.a)) return !1;
+ if (!t(d.a, e.a)) K(e.b), E(d, J(e)), (b.b = c.b = !0);
+ else if (d.a !== e.a) {
+ var c = a.e,
+ f = d.a.h;
+ if (0 <= f) {
+ var c = c.b,
+ g = c.d,
+ h = c.e,
+ k = c.c,
+ l = k[f];
+ g[l] = g[c.a];
+ k[g[l]] = l;
+ l <= --c.a &&
+ (1 >= l ? W(c, l) : u(h[g[l >> 1]], h[g[l]]) ? W(c, l) : va(c, l));
+ h[f] = null;
+ k[f] = c.b;
+ c.b = f;
+ } else
+ for (c.c[-(f + 1)] = null; 0 < c.a && null === c.c[c.d[c.a - 1]]; ) --c.a;
+ ta(a, J(e), d);
+ }
+ } else {
+ if (0 > x(d.b.a, e.a, d.a)) return !1;
+ R(b).b = b.b = !0;
+ K(d.b);
+ E(J(e), d);
+ }
+ return !0;
+ }
+ function wa(a, b) {
+ var c = S(b),
+ d = b.a,
+ e = c.a,
+ f = d.a,
+ g = e.a,
+ h = d.b.a,
+ k = e.b.a,
+ l = new N();
+ x(h, a.a, f);
+ x(k, a.a, g);
+ if (f === g || Math.min(f.a, h.a) > Math.max(g.a, k.a)) return !1;
+ if (u(f, g)) {
+ if (0 < x(k, f, g)) return !1;
+ } else if (0 > x(h, g, f)) return !1;
+ var r = h,
+ p = f,
+ q = k,
+ y = g,
+ m,
+ w;
+ u(r, p) || ((m = r), (r = p), (p = m));
+ u(q, y) || ((m = q), (q = y), (y = m));
+ u(r, q) || ((m = r), (r = q), (q = m), (m = p), (p = y), (y = m));
+ u(q, p)
+ ? u(p, y)
+ ? ((m = v(r, q, p)),
+ (w = v(q, p, y)),
+ 0 > m + w && ((m = -m), (w = -w)),
+ (l.b = A(m, q.b, w, p.b)))
+ : ((m = x(r, q, p)),
+ (w = -x(r, y, p)),
+ 0 > m + w && ((m = -m), (w = -w)),
+ (l.b = A(m, q.b, w, y.b)))
+ : (l.b = (q.b + p.b) / 2);
+ z(r, p) || ((m = r), (r = p), (p = m));
+ z(q, y) || ((m = q), (q = y), (y = m));
+ z(r, q) || ((m = r), (r = q), (q = m), (m = p), (p = y), (y = m));
+ z(q, p)
+ ? z(p, y)
+ ? ((m = aa(r, q, p)),
+ (w = aa(q, p, y)),
+ 0 > m + w && ((m = -m), (w = -w)),
+ (l.a = A(m, q.a, w, p.a)))
+ : ((m = ba(r, q, p)),
+ (w = -ba(r, y, p)),
+ 0 > m + w && ((m = -m), (w = -w)),
+ (l.a = A(m, q.a, w, y.a)))
+ : (l.a = (q.a + p.a) / 2);
+ u(l, a.a) && ((l.b = a.a.b), (l.a = a.a.a));
+ r = u(f, g) ? f : g;
+ u(r, l) && ((l.b = r.b), (l.a = r.a));
+ if (t(l, f) || t(l, g)) return qa(a, b), !1;
+ if ((!t(h, a.a) && 0 <= x(h, a.a, l)) || (!t(k, a.a) && 0 >= x(k, a.a, l))) {
+ if (k === a.a)
+ return (
+ K(d.b),
+ E(e.b, d),
+ (b = ka(b)),
+ (d = S(b).a),
+ T(a, S(b), c),
+ U(a, b, J(d), d, d, !0),
+ !0
+ );
+ if (h === a.a) {
+ K(e.b);
+ E(d.e, J(e));
+ f = c = b;
+ g = f.a.b.a;
+ do f = R(f);
+ while (f.a.b.a === g);
+ b = f;
+ f = S(b).a.b.c;
+ c.a = J(e);
+ e = T(a, c, null);
+ U(a, b, e.c, d.b.c, f, !0);
+ return !0;
+ }
+ 0 <= x(h, a.a, l) &&
+ ((R(b).b = b.b = !0), K(d.b), (d.a.b = a.a.b), (d.a.a = a.a.a));
+ 0 >= x(k, a.a, l) &&
+ ((b.b = c.b = !0), K(e.b), (e.a.b = a.a.b), (e.a.a = a.a.a));
+ return !1;
+ }
+ K(d.b);
+ K(e.b);
+ E(J(e), d);
+ d.a.b = l.b;
+ d.a.a = l.a;
+ d.a.h = xa(a.e, d.a);
+ d = d.a;
+ e = [0, 0, 0, 0];
+ l = [f.d, h.d, g.d, k.d];
+ d.g[0] = d.g[1] = d.g[2] = 0;
+ ua(d, f, h, e, 0);
+ ua(d, g, k, e, 2);
+ sa(a, d, l, e, !0);
+ R(b).b = b.b = c.b = !0;
+ return !1;
+ }
+ function ra(a, b) {
+ for (var c = S(b); ; ) {
+ for (; c.b; ) (b = c), (c = S(c));
+ if (!b.b && ((c = b), (b = R(b)), null === b || !b.b)) break;
+ b.b = !1;
+ var d = b.a,
+ e = c.a,
+ f;
+ if ((f = d.b.a !== e.b.a))
+ a: {
+ f = b;
+ var g = S(f),
+ h = f.a,
+ k = g.a,
+ l = void 0;
+ if (u(h.b.a, k.b.a)) {
+ if (0 > x(h.b.a, k.b.a, h.a)) {
+ f = !1;
+ break a;
+ }
+ R(f).b = f.b = !0;
+ l = K(h);
+ E(k.b, l);
+ l.d.c = f.d;
+ } else {
+ if (0 < x(k.b.a, h.b.a, k.a)) {
+ f = !1;
+ break a;
+ }
+ f.b = g.b = !0;
+ l = K(k);
+ E(h.e, k.b);
+ l.b.d.c = f.d;
+ }
+ f = !0;
+ }
+ f &&
+ (c.c
+ ? (Q(c), I(e), (c = S(b)), (e = c.a))
+ : b.c && (Q(b), I(d), (b = R(c)), (d = b.a)));
+ if (d.a !== e.a)
+ if (d.b.a === e.b.a || b.c || c.c || (d.b.a !== a.a && e.b.a !== a.a))
+ qa(a, b);
+ else if (wa(a, b)) break;
+ d.a === e.a && d.b.a === e.b.a && (P(e, d), Q(b), I(d), (b = R(c)));
+ }
+ }
+ function ya(a, b) {
+ a.a = b;
+ for (var c = b.c; null === c.i; )
+ if (((c = c.c), c === b.c)) {
+ var c = a,
+ d = b,
+ e = new ma();
+ e.a = d.c.b;
+ var f = c.f,
+ g = f.a;
+ do g = g.a;
+ while (null !== g.b && !f.c(f.b, e, g.b));
+ var f = g.b,
+ h = S(f),
+ e = f.a,
+ g = h.a;
+ if (0 === x(e.b.a, d, e.a))
+ (e = f.a),
+ t(e.a, d) ||
+ t(e.b.a, d) ||
+ (K(e.b), f.c && (I(e.c), (f.c = !1)), E(d.c, e), ya(c, d));
+ else {
+ var k = u(g.b.a, e.b.a) ? f : h,
+ h = void 0;
+ f.d || k.c
+ ? (k === f ? (h = L(d.c.b, e.e)) : (h = L(g.b.c.b, d.c).b),
+ k.c
+ ? ja(k, h)
+ : ((e = c),
+ (f = la(c, f, h)),
+ (f.f = R(f).f + f.a.f),
+ (f.d = oa(e, f.f))),
+ ya(c, d))
+ : U(c, f, d.c, d.c, null, !0);
+ }
+ return;
+ }
+ c = ka(c.i);
+ e = S(c);
+ f = e.a;
+ e = T(a, e, null);
+ if (e.c === f) {
+ var f = e,
+ e = f.c,
+ g = S(c),
+ h = c.a,
+ k = g.a,
+ l = !1;
+ h.b.a !== k.b.a && wa(a, c);
+ t(h.a, a.a) &&
+ (E(J(e), h), (c = ka(c)), (e = S(c).a), T(a, S(c), g), (l = !0));
+ t(k.a, a.a) && (E(f, J(k)), (f = T(a, g, null)), (l = !0));
+ l
+ ? U(a, c, f.c, e, e, !0)
+ : (u(k.a, h.a) ? (d = J(k)) : (d = h),
+ (d = L(f.c.b, d)),
+ U(a, c, d, d.c, d.c, !1),
+ (d.b.i.c = !0),
+ ra(a, c));
+ } else U(a, c, e.c, f, f, !0);
+ }
+ function za(a, b) {
+ var c = new ma(),
+ d = ea(a.b);
+ d.a.b = O;
+ d.a.a = b;
+ d.b.a.b = -O;
+ d.b.a.a = b;
+ a.a = d.b.a;
+ c.a = d;
+ c.f = 0;
+ c.d = !1;
+ c.c = !1;
+ c.h = !0;
+ c.b = !1;
+ d = a.f;
+ d = na(d, d.a, c);
+ c.e = d;
+ }
+ function Aa(a) {
+ this.a = new Ba();
+ this.b = a;
+ this.c = ia;
+ }
+ function na(a, b, c) {
+ do b = b.c;
+ while (null !== b.b && !a.c(a.b, b.b, c));
+ a = new Ba(c, b.a, b);
+ b.a.c = a;
+ return (b.a = a);
+ }
+ function Ba(a, b, c) {
+ this.b = a || null;
+ this.a = b || this;
+ this.c = c || this;
+ }
+ function X() {
+ this.d = Y;
+ this.p = this.b = this.q = null;
+ this.j = [0, 0, 0];
+ this.s = 100130;
+ this.n = !1;
+ this.o = this.a = this.e = this.f = null;
+ this.m = !1;
+ this.c = this.r = this.i = this.k = this.l = this.h = null;
+ }
+ var Y = 0;
+ n = X.prototype;
+ n.x = function() {
+ Z(this, Y);
+ };
+ n.B = function(a, b) {
+ switch (a) {
+ case 100142:
+ return;
+ case 100140:
+ switch (b) {
+ case 100130:
+ case 100131:
+ case 100132:
+ case 100133:
+ case 100134:
+ this.s = b;
+ return;
+ }
+ break;
+ case 100141:
+ this.m = !!b;
+ return;
+ default:
+ V(this, 100900);
+ return;
+ }
+ V(this, 100901);
+ };
+ n.y = function(a) {
+ switch (a) {
+ case 100142:
+ return 0;
+ case 100140:
+ return this.s;
+ case 100141:
+ return this.m;
+ default:
+ V(this, 100900);
+ }
+ return !1;
+ };
+ n.A = function(a, b, c) {
+ this.j[0] = a;
+ this.j[1] = b;
+ this.j[2] = c;
+ };
+ n.z = function(a, b) {
+ var c = b ? b : null;
+ switch (a) {
+ case 100100:
+ case 100106:
+ this.h = c;
+ break;
+ case 100104:
+ case 100110:
+ this.l = c;
+ break;
+ case 100101:
+ case 100107:
+ this.k = c;
+ break;
+ case 100102:
+ case 100108:
+ this.i = c;
+ break;
+ case 100103:
+ case 100109:
+ this.p = c;
+ break;
+ case 100105:
+ case 100111:
+ this.o = c;
+ break;
+ case 100112:
+ this.r = c;
+ break;
+ default:
+ V(this, 100900);
+ }
+ };
+ n.C = function(a, b) {
+ var c = !1,
+ d = [0, 0, 0];
+ Z(this, 2);
+ for (var e = 0; 3 > e; ++e) {
+ var f = a[e];
+ -1e150 > f && ((f = -1e150), (c = !0));
+ 1e150 < f && ((f = 1e150), (c = !0));
+ d[e] = f;
+ }
+ c && V(this, 100155);
+ c = this.q;
+ null === c ? ((c = ea(this.b)), E(c, c.b)) : (K(c), (c = c.e));
+ c.a.d = b;
+ c.a.g[0] = d[0];
+ c.a.g[1] = d[1];
+ c.a.g[2] = d[2];
+ c.f = 1;
+ c.b.f = -1;
+ this.q = c;
+ };
+ n.u = function(a) {
+ Z(this, Y);
+ this.d = 1;
+ this.b = new Ca();
+ this.c = a;
+ };
+ n.t = function() {
+ Z(this, 1);
+ this.d = 2;
+ this.q = null;
+ };
+ n.v = function() {
+ Z(this, 2);
+ this.d = 1;
+ };
+ n.w = function() {
+ Z(this, 1);
+ this.d = Y;
+ var a = this.j[0],
+ b = this.j[1],
+ c = this.j[2],
+ d = !1,
+ e = [a, b, c];
+ if (0 === a && 0 === b && 0 === c) {
+ for (
+ var b = [-2 * 1e150, -2 * 1e150, -2 * 1e150],
+ f = [2 * 1e150, 2 * 1e150, 2 * 1e150],
+ c = [],
+ g = [],
+ d = this.b.c,
+ a = d.e;
+ a !== d;
+ a = a.e
+ )
+ for (var h = 0; 3 > h; ++h) {
+ var k = a.g[h];
+ k < f[h] && ((f[h] = k), (g[h] = a));
+ k > b[h] && ((b[h] = k), (c[h] = a));
+ }
+ a = 0;
+ b[1] - f[1] > b[0] - f[0] && (a = 1);
+ b[2] - f[2] > b[a] - f[a] && (a = 2);
+ if (f[a] >= b[a]) (e[0] = 0), (e[1] = 0), (e[2] = 1);
+ else {
+ b = 0;
+ f = g[a];
+ c = c[a];
+ g = [0, 0, 0];
+ f = [f.g[0] - c.g[0], f.g[1] - c.g[1], f.g[2] - c.g[2]];
+ h = [0, 0, 0];
+ for (a = d.e; a !== d; a = a.e)
+ (h[0] = a.g[0] - c.g[0]),
+ (h[1] = a.g[1] - c.g[1]),
+ (h[2] = a.g[2] - c.g[2]),
+ (g[0] = f[1] * h[2] - f[2] * h[1]),
+ (g[1] = f[2] * h[0] - f[0] * h[2]),
+ (g[2] = f[0] * h[1] - f[1] * h[0]),
+ (k = g[0] * g[0] + g[1] * g[1] + g[2] * g[2]),
+ k > b && ((b = k), (e[0] = g[0]), (e[1] = g[1]), (e[2] = g[2]));
+ 0 >= b && ((e[0] = e[1] = e[2] = 0), (e[ha(f)] = 1));
+ }
+ d = !0;
+ }
+ g = ha(e);
+ a = this.b.c;
+ b = (g + 1) % 3;
+ c = (g + 2) % 3;
+ g = 0 < e[g] ? 1 : -1;
+ for (e = a.e; e !== a; e = e.e) (e.b = e.g[b]), (e.a = g * e.g[c]);
+ if (d) {
+ e = 0;
+ d = this.b.a;
+ for (a = d.b; a !== d; a = a.b)
+ if (((b = a.a), !(0 >= b.f))) {
+ do (e += (b.a.b - b.b.a.b) * (b.a.a + b.b.a.a)), (b = b.e);
+ while (b !== a.a);
+ }
+ if (0 > e) for (e = this.b.c, d = e.e; d !== e; d = d.e) d.a = -d.a;
+ }
+ this.n = !1;
+ e = this.b.b;
+ for (a = e.h; a !== e; a = d)
+ if (
+ ((d = a.h),
+ (b = a.e),
+ t(a.a, a.b.a) && a.e.e !== a && (ta(this, b, a), I(a), (a = b), (b = a.e)),
+ b.e === a)
+ ) {
+ if (b !== a) {
+ if (b === d || b === d.b) d = d.h;
+ I(b);
+ }
+ if (a === d || a === d.b) d = d.h;
+ I(a);
+ }
+ this.e = e = new Da();
+ d = this.b.c;
+ for (a = d.e; a !== d; a = a.e) a.h = xa(e, a);
+ Ea(e);
+ this.f = new Aa(this);
+ za(this, -O);
+ for (za(this, O); null !== (e = Fa(this.e)); ) {
+ for (;;) {
+ a: if (((a = this.e), 0 === a.a)) d = Ga(a.b);
+ else if (
+ ((d = a.c[a.d[a.a - 1]]), 0 !== a.b.a && ((a = Ga(a.b)), u(a, d)))
+ ) {
+ d = a;
+ break a;
+ }
+ if (null === d || !t(d, e)) break;
+ d = Fa(this.e);
+ ta(this, e.c, d.c);
+ }
+ ya(this, e);
+ }
+ this.a = this.f.a.a.b.a.a;
+ for (e = 0; null !== (d = this.f.a.a.b); ) d.h || ++e, Q(d);
+ this.f = null;
+ e = this.e;
+ e.b = null;
+ e.d = null;
+ this.e = e.c = null;
+ e = this.b;
+ for (a = e.a.b; a !== e.a; a = d)
+ (d = a.b), (a = a.a), a.e.e === a && (P(a.c, a), I(a));
+ if (!this.n) {
+ e = this.b;
+ if (this.m)
+ for (a = e.b.h; a !== e.b; a = d)
+ (d = a.h), a.b.d.c !== a.d.c ? (a.f = a.d.c ? 1 : -1) : I(a);
+ else
+ for (a = e.a.b; a !== e.a; a = d)
+ if (((d = a.b), a.c)) {
+ for (a = a.a; u(a.b.a, a.a); a = a.c.b);
+ for (; u(a.a, a.b.a); a = a.e);
+ b = a.c.b;
+ for (c = void 0; a.e !== b; )
+ if (u(a.b.a, b.a)) {
+ for (; b.e !== a && (ca(b.e) || 0 >= x(b.a, b.b.a, b.e.b.a)); )
+ (c = L(b.e, b)), (b = c.b);
+ b = b.c.b;
+ } else {
+ for (; b.e !== a && (da(a.c.b) || 0 <= x(a.b.a, a.a, a.c.b.a)); )
+ (c = L(a, a.c.b)), (a = c.b);
+ a = a.e;
+ }
+ for (; b.e.e !== a; ) (c = L(b.e, b)), (b = c.b);
+ }
+ if (this.h || this.i || this.k || this.l)
+ if (this.m)
+ for (e = this.b, d = e.a.b; d !== e.a; d = d.b) {
+ if (d.c) {
+ this.h && this.h(2, this.c);
+ a = d.a;
+ do this.k && this.k(a.a.d, this.c), (a = a.e);
+ while (a !== d.a);
+ this.i && this.i(this.c);
+ }
+ }
+ else {
+ e = this.b;
+ d = !!this.l;
+ a = !1;
+ b = -1;
+ for (c = e.a.d; c !== e.a; c = c.d)
+ if (c.c) {
+ a || (this.h && this.h(4, this.c), (a = !0));
+ g = c.a;
+ do
+ d &&
+ ((f = g.b.d.c ? 0 : 1),
+ b !== f && ((b = f), this.l && this.l(!!b, this.c))),
+ this.k && this.k(g.a.d, this.c),
+ (g = g.e);
+ while (g !== c.a);
+ }
+ a && this.i && this.i(this.c);
+ }
+ if (this.r) {
+ e = this.b;
+ for (a = e.a.b; a !== e.a; a = d)
+ if (((d = a.b), !a.c)) {
+ b = a.a;
+ c = b.e;
+ g = void 0;
+ do
+ (g = c),
+ (c = g.e),
+ (g.d = null),
+ null === g.b.d &&
+ (g.c === g ? F(g.a, null) : ((g.a.c = g.c), H(g, J(g))),
+ (f = g.b),
+ f.c === f ? F(f.a, null) : ((f.a.c = f.c), H(f, J(f))),
+ fa(g));
+ while (g !== b);
+ b = a.d;
+ a = a.b;
+ a.d = b;
+ b.b = a;
+ }
+ this.r(this.b);
+ this.c = this.b = null;
+ return;
+ }
+ }
+ this.b = this.c = null;
+ };
+ function Z(a, b) {
+ if (a.d !== b)
+ for (; a.d !== b; )
+ if (a.d < b)
+ switch (a.d) {
+ case Y:
+ V(a, 100151);
+ a.u(null);
+ break;
+ case 1:
+ V(a, 100152), a.t();
+ }
+ else
+ switch (a.d) {
+ case 2:
+ V(a, 100154);
+ a.v();
+ break;
+ case 1:
+ V(a, 100153), a.w();
+ }
+ }
+ function V(a, b) {
+ a.p && a.p(b, a.c);
+ }
+ function ga(a, b) {
+ this.b = a || this;
+ this.d = b || this;
+ this.a = null;
+ this.c = !1;
+ }
+ function M() {
+ this.h = this;
+ this.i = this.d = this.a = this.e = this.c = this.b = null;
+ this.f = 0;
+ }
+ function J(a) {
+ return a.b.e;
+ }
+ function Ca() {
+ this.c = new N();
+ this.a = new ga();
+ this.b = new M();
+ this.d = new M();
+ this.b.b = this.d;
+ this.d.b = this.b;
+ }
+ function N(a, b) {
+ this.e = a || this;
+ this.f = b || this;
+ this.d = this.c = null;
+ this.g = [0, 0, 0];
+ this.h = this.a = this.b = 0;
+ }
+ function Da() {
+ this.c = [];
+ this.d = null;
+ this.a = 0;
+ this.e = !1;
+ this.b = new Ha();
+ }
+ function Ea(a) {
+ a.d = [];
+ for (var b = 0; b < a.a; b++) a.d[b] = b;
+ a.d.sort(
+ (function(a) {
+ return function(b, e) {
+ return u(a[b], a[e]) ? 1 : -1;
+ };
+ })(a.c)
+ );
+ a.e = !0;
+ Ia(a.b);
+ }
+ function xa(a, b) {
+ if (a.e) {
+ var c = a.b,
+ d = ++c.a;
+ 2 * d > c.f && ((c.f *= 2), (c.c = Ja(c.c, c.f + 1)));
+ var e;
+ 0 === c.b ? (e = d) : ((e = c.b), (c.b = c.c[c.b]));
+ c.e[e] = b;
+ c.c[e] = d;
+ c.d[d] = e;
+ c.h && va(c, d);
+ return e;
+ }
+ c = a.a++;
+ a.c[c] = b;
+ return -(c + 1);
+ }
+ function Fa(a) {
+ if (0 === a.a) return Ka(a.b);
+ var b = a.c[a.d[a.a - 1]];
+ if (0 !== a.b.a && u(Ga(a.b), b)) return Ka(a.b);
+ do --a.a;
+ while (0 < a.a && null === a.c[a.d[a.a - 1]]);
+ return b;
+ }
+ function Ha() {
+ this.d = Ja([0], 33);
+ this.e = [null, null];
+ this.c = [0, 0];
+ this.a = 0;
+ this.f = 32;
+ this.b = 0;
+ this.h = !1;
+ this.d[1] = 1;
+ }
+ function Ja(a, b) {
+ for (var c = Array(b), d = 0; d < a.length; d++) c[d] = a[d];
+ for (; d < b; d++) c[d] = 0;
+ return c;
+ }
+ function Ia(a) {
+ for (var b = a.a; 1 <= b; --b) W(a, b);
+ a.h = !0;
+ }
+ function Ga(a) {
+ return a.e[a.d[1]];
+ }
+ function Ka(a) {
+ var b = a.d,
+ c = a.e,
+ d = a.c,
+ e = b[1],
+ f = c[e];
+ 0 < a.a &&
+ ((b[1] = b[a.a]),
+ (d[b[1]] = 1),
+ (c[e] = null),
+ (d[e] = a.b),
+ (a.b = e),
+ 0 < --a.a && W(a, 1));
+ return f;
+ }
+ function W(a, b) {
+ for (var c = a.d, d = a.e, e = a.c, f = b, g = c[f]; ; ) {
+ var h = f << 1;
+ h < a.a && u(d[c[h + 1]], d[c[h]]) && (h += 1);
+ var k = c[h];
+ if (h > a.a || u(d[g], d[k])) {
+ c[f] = g;
+ e[g] = f;
+ break;
+ }
+ c[f] = k;
+ e[k] = f;
+ f = h;
+ }
+ }
+ function va(a, b) {
+ for (var c = a.d, d = a.e, e = a.c, f = b, g = c[f]; ; ) {
+ var h = f >> 1,
+ k = c[h];
+ if (0 === h || u(d[k], d[g])) {
+ c[f] = g;
+ e[g] = f;
+ break;
+ }
+ c[f] = k;
+ e[k] = f;
+ f = h;
+ }
+ }
+ function ma() {
+ this.e = this.a = null;
+ this.f = 0;
+ this.c = this.b = this.h = this.d = !1;
+ }
+ function S(a) {
+ return a.e.c.b;
+ }
+ function R(a) {
+ return a.e.a.b;
+ }
+ this.libtess = {
+ GluTesselator: X,
+ windingRule: {
+ GLU_TESS_WINDING_ODD: 100130,
+ GLU_TESS_WINDING_NONZERO: 100131,
+ GLU_TESS_WINDING_POSITIVE: 100132,
+ GLU_TESS_WINDING_NEGATIVE: 100133,
+ GLU_TESS_WINDING_ABS_GEQ_TWO: 100134
+ },
+ primitiveType: {
+ GL_LINE_LOOP: 2,
+ GL_TRIANGLES: 4,
+ GL_TRIANGLE_STRIP: 5,
+ GL_TRIANGLE_FAN: 6
+ },
+ errorType: {
+ GLU_TESS_MISSING_BEGIN_POLYGON: 100151,
+ GLU_TESS_MISSING_END_POLYGON: 100153,
+ GLU_TESS_MISSING_BEGIN_CONTOUR: 100152,
+ GLU_TESS_MISSING_END_CONTOUR: 100154,
+ GLU_TESS_COORD_TOO_LARGE: 100155,
+ GLU_TESS_NEED_COMBINE_CALLBACK: 100156
+ },
+ gluEnum: {
+ GLU_TESS_MESH: 100112,
+ GLU_TESS_TOLERANCE: 100142,
+ GLU_TESS_WINDING_RULE: 100140,
+ GLU_TESS_BOUNDARY_ONLY: 100141,
+ GLU_INVALID_ENUM: 100900,
+ GLU_INVALID_VALUE: 100901,
+ GLU_TESS_BEGIN: 100100,
+ GLU_TESS_VERTEX: 100101,
+ GLU_TESS_END: 100102,
+ GLU_TESS_ERROR: 100103,
+ GLU_TESS_EDGE_FLAG: 100104,
+ GLU_TESS_COMBINE: 100105,
+ GLU_TESS_BEGIN_DATA: 100106,
+ GLU_TESS_VERTEX_DATA: 100107,
+ GLU_TESS_END_DATA: 100108,
+ GLU_TESS_ERROR_DATA: 100109,
+ GLU_TESS_EDGE_FLAG_DATA: 100110,
+ GLU_TESS_COMBINE_DATA: 100111
+ }
+ };
+ X.prototype.gluDeleteTess = X.prototype.x;
+ X.prototype.gluTessProperty = X.prototype.B;
+ X.prototype.gluGetTessProperty = X.prototype.y;
+ X.prototype.gluTessNormal = X.prototype.A;
+ X.prototype.gluTessCallback = X.prototype.z;
+ X.prototype.gluTessVertex = X.prototype.C;
+ X.prototype.gluTessBeginPolygon = X.prototype.u;
+ X.prototype.gluTessBeginContour = X.prototype.t;
+ X.prototype.gluTessEndContour = X.prototype.v;
+ X.prototype.gluTessEndPolygon = X.prototype.w;
+ if (typeof module !== 'undefined') {
+ module.exports = this.libtess;
+ }
+ },
+ {}
+ ],
+ 11: [
+ function(_dereq_, module, exports) {
+ // (c) Dean McNamee , 2013.
+ //
+ // https://github.com/deanm/omggif
+ //
+ // Permission is hereby granted, free of charge, to any person obtaining a copy
+ // of this software and associated documentation files (the "Software"), to
+ // deal in the Software without restriction, including without limitation the
+ // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ // sell copies of the Software, and to permit persons to whom the Software is
+ // furnished to do so, subject to the following conditions:
+ //
+ // The above copyright notice and this permission notice shall be included in
+ // all copies or substantial portions of the Software.
+ //
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ // FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ // IN THE SOFTWARE.
+ //
+ // omggif is a JavaScript implementation of a GIF 89a encoder and decoder,
+ // including animation and compression. It does not rely on any specific
+ // underlying system, so should run in the browser, Node, or Plask.
+
+ 'use strict';
+
+ function GifWriter(buf, width, height, gopts) {
+ var p = 0;
+
+ var gopts = gopts === undefined ? {} : gopts;
+ var loop_count = gopts.loop === undefined ? null : gopts.loop;
+ var global_palette = gopts.palette === undefined ? null : gopts.palette;
+
+ if (width <= 0 || height <= 0 || width > 65535 || height > 65535)
+ throw new Error('Width/Height invalid.');
+
+ function check_palette_and_num_colors(palette) {
+ var num_colors = palette.length;
+ if (num_colors < 2 || num_colors > 256 || num_colors & (num_colors - 1)) {
+ throw new Error(
+ 'Invalid code/color length, must be power of 2 and 2 .. 256.'
+ );
+ }
+ return num_colors;
+ }
+
+ // - Header.
+ buf[p++] = 0x47;
+ buf[p++] = 0x49;
+ buf[p++] = 0x46; // GIF
+ buf[p++] = 0x38;
+ buf[p++] = 0x39;
+ buf[p++] = 0x61; // 89a
+
+ // Handling of Global Color Table (palette) and background index.
+ var gp_num_colors_pow2 = 0;
+ var background = 0;
+ if (global_palette !== null) {
+ var gp_num_colors = check_palette_and_num_colors(global_palette);
+ while ((gp_num_colors >>= 1)) ++gp_num_colors_pow2;
+ gp_num_colors = 1 << gp_num_colors_pow2;
+ --gp_num_colors_pow2;
+ if (gopts.background !== undefined) {
+ background = gopts.background;
+ if (background >= gp_num_colors)
+ throw new Error('Background index out of range.');
+ // The GIF spec states that a background index of 0 should be ignored, so
+ // this is probably a mistake and you really want to set it to another
+ // slot in the palette. But actually in the end most browsers, etc end
+ // up ignoring this almost completely (including for dispose background).
+ if (background === 0)
+ throw new Error('Background index explicitly passed as 0.');
+ }
+ }
+
+ // - Logical Screen Descriptor.
+ // NOTE(deanm): w/h apparently ignored by implementations, but set anyway.
+ buf[p++] = width & 0xff;
+ buf[p++] = (width >> 8) & 0xff;
+ buf[p++] = height & 0xff;
+ buf[p++] = (height >> 8) & 0xff;
+ // NOTE: Indicates 0-bpp original color resolution (unused?).
+ buf[p++] =
+ (global_palette !== null ? 0x80 : 0) | gp_num_colors_pow2; // Global Color Table Flag. // NOTE: No sort flag (unused?).
+ buf[p++] = background; // Background Color Index.
+ buf[p++] = 0; // Pixel aspect ratio (unused?).
+
+ // - Global Color Table
+ if (global_palette !== null) {
+ for (var i = 0, il = global_palette.length; i < il; ++i) {
+ var rgb = global_palette[i];
+ buf[p++] = (rgb >> 16) & 0xff;
+ buf[p++] = (rgb >> 8) & 0xff;
+ buf[p++] = rgb & 0xff;
+ }
+ }
+
+ if (loop_count !== null) {
+ // Netscape block for looping.
+ if (loop_count < 0 || loop_count > 65535)
+ throw new Error('Loop count invalid.');
+ // Extension code, label, and length.
+ buf[p++] = 0x21;
+ buf[p++] = 0xff;
+ buf[p++] = 0x0b;
+ // NETSCAPE2.0
+ buf[p++] = 0x4e;
+ buf[p++] = 0x45;
+ buf[p++] = 0x54;
+ buf[p++] = 0x53;
+ buf[p++] = 0x43;
+ buf[p++] = 0x41;
+ buf[p++] = 0x50;
+ buf[p++] = 0x45;
+ buf[p++] = 0x32;
+ buf[p++] = 0x2e;
+ buf[p++] = 0x30;
+ // Sub-block
+ buf[p++] = 0x03;
+ buf[p++] = 0x01;
+ buf[p++] = loop_count & 0xff;
+ buf[p++] = (loop_count >> 8) & 0xff;
+ buf[p++] = 0x00; // Terminator.
+ }
+
+ var ended = false;
+
+ this.addFrame = function(x, y, w, h, indexed_pixels, opts) {
+ if (ended === true) {
+ --p;
+ ended = false;
+ } // Un-end.
+
+ opts = opts === undefined ? {} : opts;
+
+ // TODO(deanm): Bounds check x, y. Do they need to be within the virtual
+ // canvas width/height, I imagine?
+ if (x < 0 || y < 0 || x > 65535 || y > 65535) throw new Error('x/y invalid.');
+
+ if (w <= 0 || h <= 0 || w > 65535 || h > 65535)
+ throw new Error('Width/Height invalid.');
+
+ if (indexed_pixels.length < w * h)
+ throw new Error('Not enough pixels for the frame size.');
+
+ var using_local_palette = true;
+ var palette = opts.palette;
+ if (palette === undefined || palette === null) {
+ using_local_palette = false;
+ palette = global_palette;
+ }
+
+ if (palette === undefined || palette === null)
+ throw new Error('Must supply either a local or global palette.');
+
+ var num_colors = check_palette_and_num_colors(palette);
+
+ // Compute the min_code_size (power of 2), destroying num_colors.
+ var min_code_size = 0;
+ while ((num_colors >>= 1)) ++min_code_size;
+ num_colors = 1 << min_code_size; // Now we can easily get it back.
+
+ var delay = opts.delay === undefined ? 0 : opts.delay;
+
+ // From the spec:
+ // 0 - No disposal specified. The decoder is
+ // not required to take any action.
+ // 1 - Do not dispose. The graphic is to be left
+ // in place.
+ // 2 - Restore to background color. The area used by the
+ // graphic must be restored to the background color.
+ // 3 - Restore to previous. The decoder is required to
+ // restore the area overwritten by the graphic with
+ // what was there prior to rendering the graphic.
+ // 4-7 - To be defined.
+ // NOTE(deanm): Dispose background doesn't really work, apparently most
+ // browsers ignore the background palette index and clear to transparency.
+ var disposal = opts.disposal === undefined ? 0 : opts.disposal;
+ if (disposal < 0 || disposal > 3)
+ // 4-7 is reserved.
+ throw new Error('Disposal out of range.');
+
+ var use_transparency = false;
+ var transparent_index = 0;
+ if (opts.transparent !== undefined && opts.transparent !== null) {
+ use_transparency = true;
+ transparent_index = opts.transparent;
+ if (transparent_index < 0 || transparent_index >= num_colors)
+ throw new Error('Transparent color index.');
+ }
+
+ if (disposal !== 0 || use_transparency || delay !== 0) {
+ // - Graphics Control Extension
+ buf[p++] = 0x21;
+ buf[p++] = 0xf9; // Extension / Label.
+ buf[p++] = 4; // Byte size.
+
+ buf[p++] = (disposal << 2) | (use_transparency === true ? 1 : 0);
+ buf[p++] = delay & 0xff;
+ buf[p++] = (delay >> 8) & 0xff;
+ buf[p++] = transparent_index; // Transparent color index.
+ buf[p++] = 0; // Block Terminator.
+ }
+
+ // - Image Descriptor
+ buf[p++] = 0x2c; // Image Seperator.
+ buf[p++] = x & 0xff;
+ buf[p++] = (x >> 8) & 0xff; // Left.
+ buf[p++] = y & 0xff;
+ buf[p++] = (y >> 8) & 0xff; // Top.
+ buf[p++] = w & 0xff;
+ buf[p++] = (w >> 8) & 0xff;
+ buf[p++] = h & 0xff;
+ buf[p++] = (h >> 8) & 0xff;
+ // NOTE: No sort flag (unused?).
+ // TODO(deanm): Support interlace.
+ buf[p++] = using_local_palette === true ? 0x80 | (min_code_size - 1) : 0;
+
+ // - Local Color Table
+ if (using_local_palette === true) {
+ for (var i = 0, il = palette.length; i < il; ++i) {
+ var rgb = palette[i];
+ buf[p++] = (rgb >> 16) & 0xff;
+ buf[p++] = (rgb >> 8) & 0xff;
+ buf[p++] = rgb & 0xff;
+ }
+ }
+
+ p = GifWriterOutputLZWCodeStream(
+ buf,
+ p,
+ min_code_size < 2 ? 2 : min_code_size,
+ indexed_pixels
+ );
+
+ return p;
+ };
+
+ this.end = function() {
+ if (ended === false) {
+ buf[p++] = 0x3b; // Trailer.
+ ended = true;
+ }
+ return p;
+ };
+
+ this.getOutputBuffer = function() {
+ return buf;
+ };
+ this.setOutputBuffer = function(v) {
+ buf = v;
+ };
+ this.getOutputBufferPosition = function() {
+ return p;
+ };
+ this.setOutputBufferPosition = function(v) {
+ p = v;
+ };
+ }
+
+ // Main compression routine, palette indexes -> LZW code stream.
+ // |index_stream| must have at least one entry.
+ function GifWriterOutputLZWCodeStream(buf, p, min_code_size, index_stream) {
+ buf[p++] = min_code_size;
+ var cur_subblock = p++; // Pointing at the length field.
+
+ var clear_code = 1 << min_code_size;
+ var code_mask = clear_code - 1;
+ var eoi_code = clear_code + 1;
+ var next_code = eoi_code + 1;
+
+ var cur_code_size = min_code_size + 1; // Number of bits per code.
+ var cur_shift = 0;
+ // We have at most 12-bit codes, so we should have to hold a max of 19
+ // bits here (and then we would write out).
+ var cur = 0;
+
+ function emit_bytes_to_buffer(bit_block_size) {
+ while (cur_shift >= bit_block_size) {
+ buf[p++] = cur & 0xff;
+ cur >>= 8;
+ cur_shift -= 8;
+ if (p === cur_subblock + 256) {
+ // Finished a subblock.
+ buf[cur_subblock] = 255;
+ cur_subblock = p++;
+ }
+ }
+ }
+
+ function emit_code(c) {
+ cur |= c << cur_shift;
+ cur_shift += cur_code_size;
+ emit_bytes_to_buffer(8);
+ }
+
+ // I am not an expert on the topic, and I don't want to write a thesis.
+ // However, it is good to outline here the basic algorithm and the few data
+ // structures and optimizations here that make this implementation fast.
+ // The basic idea behind LZW is to build a table of previously seen runs
+ // addressed by a short id (herein called output code). All data is
+ // referenced by a code, which represents one or more values from the
+ // original input stream. All input bytes can be referenced as the same
+ // value as an output code. So if you didn't want any compression, you
+ // could more or less just output the original bytes as codes (there are
+ // some details to this, but it is the idea). In order to achieve
+ // compression, values greater then the input range (codes can be up to
+ // 12-bit while input only 8-bit) represent a sequence of previously seen
+ // inputs. The decompressor is able to build the same mapping while
+ // decoding, so there is always a shared common knowledge between the
+ // encoding and decoder, which is also important for "timing" aspects like
+ // how to handle variable bit width code encoding.
+ //
+ // One obvious but very important consequence of the table system is there
+ // is always a unique id (at most 12-bits) to map the runs. 'A' might be
+ // 4, then 'AA' might be 10, 'AAA' 11, 'AAAA' 12, etc. This relationship
+ // can be used for an effecient lookup strategy for the code mapping. We
+ // need to know if a run has been seen before, and be able to map that run
+ // to the output code. Since we start with known unique ids (input bytes),
+ // and then from those build more unique ids (table entries), we can
+ // continue this chain (almost like a linked list) to always have small
+ // integer values that represent the current byte chains in the encoder.
+ // This means instead of tracking the input bytes (AAAABCD) to know our
+ // current state, we can track the table entry for AAAABC (it is guaranteed
+ // to exist by the nature of the algorithm) and the next character D.
+ // Therefor the tuple of (table_entry, byte) is guaranteed to also be
+ // unique. This allows us to create a simple lookup key for mapping input
+ // sequences to codes (table indices) without having to store or search
+ // any of the code sequences. So if 'AAAA' has a table entry of 12, the
+ // tuple of ('AAAA', K) for any input byte K will be unique, and can be our
+ // key. This leads to a integer value at most 20-bits, which can always
+ // fit in an SMI value and be used as a fast sparse array / object key.
+
+ // Output code for the current contents of the index buffer.
+ var ib_code = index_stream[0] & code_mask; // Load first input index.
+ var code_table = {}; // Key'd on our 20-bit "tuple".
+
+ emit_code(clear_code); // Spec says first code should be a clear code.
+
+ // First index already loaded, process the rest of the stream.
+ for (var i = 1, il = index_stream.length; i < il; ++i) {
+ var k = index_stream[i] & code_mask;
+ var cur_key = (ib_code << 8) | k; // (prev, k) unique tuple.
+ var cur_code = code_table[cur_key]; // buffer + k.
+
+ // Check if we have to create a new code table entry.
+ if (cur_code === undefined) {
+ // We don't have buffer + k.
+ // Emit index buffer (without k).
+ // This is an inline version of emit_code, because this is the core
+ // writing routine of the compressor (and V8 cannot inline emit_code
+ // because it is a closure here in a different context). Additionally
+ // we can call emit_byte_to_buffer less often, because we can have
+ // 30-bits (from our 31-bit signed SMI), and we know our codes will only
+ // be 12-bits, so can safely have 18-bits there without overflow.
+ // emit_code(ib_code);
+ cur |= ib_code << cur_shift;
+ cur_shift += cur_code_size;
+ while (cur_shift >= 8) {
+ buf[p++] = cur & 0xff;
+ cur >>= 8;
+ cur_shift -= 8;
+ if (p === cur_subblock + 256) {
+ // Finished a subblock.
+ buf[cur_subblock] = 255;
+ cur_subblock = p++;
+ }
+ }
+
+ if (next_code === 4096) {
+ // Table full, need a clear.
+ emit_code(clear_code);
+ next_code = eoi_code + 1;
+ cur_code_size = min_code_size + 1;
+ code_table = {};
+ } else {
+ // Table not full, insert a new entry.
+ // Increase our variable bit code sizes if necessary. This is a bit
+ // tricky as it is based on "timing" between the encoding and
+ // decoder. From the encoders perspective this should happen after
+ // we've already emitted the index buffer and are about to create the
+ // first table entry that would overflow our current code bit size.
+ if (next_code >= 1 << cur_code_size) ++cur_code_size;
+ code_table[cur_key] = next_code++; // Insert into code table.
+ }
+
+ ib_code = k; // Index buffer to single input k.
+ } else {
+ ib_code = cur_code; // Index buffer to sequence in code table.
+ }
+ }
+
+ emit_code(ib_code); // There will still be something in the index buffer.
+ emit_code(eoi_code); // End Of Information.
+
+ // Flush / finalize the sub-blocks stream to the buffer.
+ emit_bytes_to_buffer(1);
+
+ // Finish the sub-blocks, writing out any unfinished lengths and
+ // terminating with a sub-block of length 0. If we have already started
+ // but not yet used a sub-block it can just become the terminator.
+ if (cur_subblock + 1 === p) {
+ // Started but unused.
+ buf[cur_subblock] = 0;
+ } else {
+ // Started and used, write length and additional terminator block.
+ buf[cur_subblock] = p - cur_subblock - 1;
+ buf[p++] = 0;
+ }
+ return p;
+ }
+
+ function GifReader(buf) {
+ var p = 0;
+
+ // - Header (GIF87a or GIF89a).
+ if (
+ buf[p++] !== 0x47 ||
+ buf[p++] !== 0x49 ||
+ buf[p++] !== 0x46 ||
+ buf[p++] !== 0x38 ||
+ ((buf[p++] + 1) & 0xfd) !== 0x38 ||
+ buf[p++] !== 0x61
+ ) {
+ throw new Error('Invalid GIF 87a/89a header.');
+ }
+
+ // - Logical Screen Descriptor.
+ var width = buf[p++] | (buf[p++] << 8);
+ var height = buf[p++] | (buf[p++] << 8);
+ var pf0 = buf[p++]; // .
+ var global_palette_flag = pf0 >> 7;
+ var num_global_colors_pow2 = pf0 & 0x7;
+ var num_global_colors = 1 << (num_global_colors_pow2 + 1);
+ var background = buf[p++];
+ buf[p++]; // Pixel aspect ratio (unused?).
+
+ var global_palette_offset = null;
+ var global_palette_size = null;
+
+ if (global_palette_flag) {
+ global_palette_offset = p;
+ global_palette_size = num_global_colors;
+ p += num_global_colors * 3; // Seek past palette.
+ }
+
+ var no_eof = true;
+
+ var frames = [];
+
+ var delay = 0;
+ var transparent_index = null;
+ var disposal = 0; // 0 - No disposal specified.
+ var loop_count = null;
+
+ this.width = width;
+ this.height = height;
+
+ while (no_eof && p < buf.length) {
+ switch (buf[p++]) {
+ case 0x21: // Graphics Control Extension Block
+ switch (buf[p++]) {
+ case 0xff: // Application specific block
+ // Try if it's a Netscape block (with animation loop counter).
+ if (
+ buf[p] !== 0x0b || // 21 FF already read, check block size.
+ // NETSCAPE2.0
+ (buf[p + 1] == 0x4e &&
+ buf[p + 2] == 0x45 &&
+ buf[p + 3] == 0x54 &&
+ buf[p + 4] == 0x53 &&
+ buf[p + 5] == 0x43 &&
+ buf[p + 6] == 0x41 &&
+ buf[p + 7] == 0x50 &&
+ buf[p + 8] == 0x45 &&
+ buf[p + 9] == 0x32 &&
+ buf[p + 10] == 0x2e &&
+ buf[p + 11] == 0x30 &&
+ // Sub-block
+ buf[p + 12] == 0x03 &&
+ buf[p + 13] == 0x01 &&
+ buf[p + 16] == 0)
+ ) {
+ p += 14;
+ loop_count = buf[p++] | (buf[p++] << 8);
+ p++; // Skip terminator.
+ } else {
+ // We don't know what it is, just try to get past it.
+ p += 12;
+ while (true) {
+ // Seek through subblocks.
+ var block_size = buf[p++];
+ // Bad block size (ex: undefined from an out of bounds read).
+ if (!(block_size >= 0)) throw Error('Invalid block size');
+ if (block_size === 0) break; // 0 size is terminator
+ p += block_size;
+ }
+ }
+ break;
+
+ case 0xf9: // Graphics Control Extension
+ if (buf[p++] !== 0x4 || buf[p + 4] !== 0)
+ throw new Error('Invalid graphics extension block.');
+ var pf1 = buf[p++];
+ delay = buf[p++] | (buf[p++] << 8);
+ transparent_index = buf[p++];
+ if ((pf1 & 1) === 0) transparent_index = null;
+ disposal = (pf1 >> 2) & 0x7;
+ p++; // Skip terminator.
+ break;
+
+ case 0xfe: // Comment Extension.
+ while (true) {
+ // Seek through subblocks.
+ var block_size = buf[p++];
+ // Bad block size (ex: undefined from an out of bounds read).
+ if (!(block_size >= 0)) throw Error('Invalid block size');
+ if (block_size === 0) break; // 0 size is terminator
+ // console.log(buf.slice(p, p+block_size).toString('ascii'));
+ p += block_size;
+ }
+ break;
+
+ default:
+ throw new Error(
+ 'Unknown graphic control label: 0x' + buf[p - 1].toString(16)
+ );
+ }
+ break;
+
+ case 0x2c: // Image Descriptor.
+ var x = buf[p++] | (buf[p++] << 8);
+ var y = buf[p++] | (buf[p++] << 8);
+ var w = buf[p++] | (buf[p++] << 8);
+ var h = buf[p++] | (buf[p++] << 8);
+ var pf2 = buf[p++];
+ var local_palette_flag = pf2 >> 7;
+ var interlace_flag = (pf2 >> 6) & 1;
+ var num_local_colors_pow2 = pf2 & 0x7;
+ var num_local_colors = 1 << (num_local_colors_pow2 + 1);
+ var palette_offset = global_palette_offset;
+ var palette_size = global_palette_size;
+ var has_local_palette = false;
+ if (local_palette_flag) {
+ var has_local_palette = true;
+ palette_offset = p; // Override with local palette.
+ palette_size = num_local_colors;
+ p += num_local_colors * 3; // Seek past palette.
+ }
+
+ var data_offset = p;
+
+ p++; // codesize
+ while (true) {
+ var block_size = buf[p++];
+ // Bad block size (ex: undefined from an out of bounds read).
+ if (!(block_size >= 0)) throw Error('Invalid block size');
+ if (block_size === 0) break; // 0 size is terminator
+ p += block_size;
+ }
+
+ frames.push({
+ x: x,
+ y: y,
+ width: w,
+ height: h,
+ has_local_palette: has_local_palette,
+ palette_offset: palette_offset,
+ palette_size: palette_size,
+ data_offset: data_offset,
+ data_length: p - data_offset,
+ transparent_index: transparent_index,
+ interlaced: !!interlace_flag,
+ delay: delay,
+ disposal: disposal
+ });
+ break;
+
+ case 0x3b: // Trailer Marker (end of file).
+ no_eof = false;
+ break;
+
+ default:
+ throw new Error('Unknown gif block: 0x' + buf[p - 1].toString(16));
+ break;
+ }
+ }
+
+ this.numFrames = function() {
+ return frames.length;
+ };
+
+ this.loopCount = function() {
+ return loop_count;
+ };
+
+ this.frameInfo = function(frame_num) {
+ if (frame_num < 0 || frame_num >= frames.length)
+ throw new Error('Frame index out of range.');
+ return frames[frame_num];
+ };
+
+ this.decodeAndBlitFrameBGRA = function(frame_num, pixels) {
+ var frame = this.frameInfo(frame_num);
+ var num_pixels = frame.width * frame.height;
+ var index_stream = new Uint8Array(num_pixels); // At most 8-bit indices.
+ GifReaderLZWOutputIndexStream(
+ buf,
+ frame.data_offset,
+ index_stream,
+ num_pixels
+ );
+ var palette_offset = frame.palette_offset;
+
+ // NOTE(deanm): It seems to be much faster to compare index to 256 than
+ // to === null. Not sure why, but CompareStub_EQ_STRICT shows up high in
+ // the profile, not sure if it's related to using a Uint8Array.
+ var trans = frame.transparent_index;
+ if (trans === null) trans = 256;
+
+ // We are possibly just blitting to a portion of the entire frame.
+ // That is a subrect within the framerect, so the additional pixels
+ // must be skipped over after we finished a scanline.
+ var framewidth = frame.width;
+ var framestride = width - framewidth;
+ var xleft = framewidth; // Number of subrect pixels left in scanline.
+
+ // Output indicies of the top left and bottom right corners of the subrect.
+ var opbeg = (frame.y * width + frame.x) * 4;
+ var opend = ((frame.y + frame.height) * width + frame.x) * 4;
+ var op = opbeg;
+
+ var scanstride = framestride * 4;
+
+ // Use scanstride to skip past the rows when interlacing. This is skipping
+ // 7 rows for the first two passes, then 3 then 1.
+ if (frame.interlaced === true) {
+ scanstride += width * 4 * 7; // Pass 1.
+ }
+
+ var interlaceskip = 8; // Tracking the row interval in the current pass.
+
+ for (var i = 0, il = index_stream.length; i < il; ++i) {
+ var index = index_stream[i];
+
+ if (xleft === 0) {
+ // Beginning of new scan line
+ op += scanstride;
+ xleft = framewidth;
+ if (op >= opend) {
+ // Catch the wrap to switch passes when interlacing.
+ scanstride = framestride * 4 + width * 4 * (interlaceskip - 1);
+ // interlaceskip / 2 * 4 is interlaceskip << 1.
+ op = opbeg + (framewidth + framestride) * (interlaceskip << 1);
+ interlaceskip >>= 1;
+ }
+ }
+
+ if (index === trans) {
+ op += 4;
+ } else {
+ var r = buf[palette_offset + index * 3];
+ var g = buf[palette_offset + index * 3 + 1];
+ var b = buf[palette_offset + index * 3 + 2];
+ pixels[op++] = b;
+ pixels[op++] = g;
+ pixels[op++] = r;
+ pixels[op++] = 255;
+ }
+ --xleft;
+ }
+ };
+
+ // I will go to copy and paste hell one day...
+ this.decodeAndBlitFrameRGBA = function(frame_num, pixels) {
+ var frame = this.frameInfo(frame_num);
+ var num_pixels = frame.width * frame.height;
+ var index_stream = new Uint8Array(num_pixels); // At most 8-bit indices.
+ GifReaderLZWOutputIndexStream(
+ buf,
+ frame.data_offset,
+ index_stream,
+ num_pixels
+ );
+ var palette_offset = frame.palette_offset;
+
+ // NOTE(deanm): It seems to be much faster to compare index to 256 than
+ // to === null. Not sure why, but CompareStub_EQ_STRICT shows up high in
+ // the profile, not sure if it's related to using a Uint8Array.
+ var trans = frame.transparent_index;
+ if (trans === null) trans = 256;
+
+ // We are possibly just blitting to a portion of the entire frame.
+ // That is a subrect within the framerect, so the additional pixels
+ // must be skipped over after we finished a scanline.
+ var framewidth = frame.width;
+ var framestride = width - framewidth;
+ var xleft = framewidth; // Number of subrect pixels left in scanline.
+
+ // Output indicies of the top left and bottom right corners of the subrect.
+ var opbeg = (frame.y * width + frame.x) * 4;
+ var opend = ((frame.y + frame.height) * width + frame.x) * 4;
+ var op = opbeg;
+
+ var scanstride = framestride * 4;
+
+ // Use scanstride to skip past the rows when interlacing. This is skipping
+ // 7 rows for the first two passes, then 3 then 1.
+ if (frame.interlaced === true) {
+ scanstride += width * 4 * 7; // Pass 1.
+ }
+
+ var interlaceskip = 8; // Tracking the row interval in the current pass.
+
+ for (var i = 0, il = index_stream.length; i < il; ++i) {
+ var index = index_stream[i];
+
+ if (xleft === 0) {
+ // Beginning of new scan line
+ op += scanstride;
+ xleft = framewidth;
+ if (op >= opend) {
+ // Catch the wrap to switch passes when interlacing.
+ scanstride = framestride * 4 + width * 4 * (interlaceskip - 1);
+ // interlaceskip / 2 * 4 is interlaceskip << 1.
+ op = opbeg + (framewidth + framestride) * (interlaceskip << 1);
+ interlaceskip >>= 1;
+ }
+ }
+
+ if (index === trans) {
+ op += 4;
+ } else {
+ var r = buf[palette_offset + index * 3];
+ var g = buf[palette_offset + index * 3 + 1];
+ var b = buf[palette_offset + index * 3 + 2];
+ pixels[op++] = r;
+ pixels[op++] = g;
+ pixels[op++] = b;
+ pixels[op++] = 255;
+ }
+ --xleft;
+ }
+ };
+ }
+
+ function GifReaderLZWOutputIndexStream(code_stream, p, output, output_length) {
+ var min_code_size = code_stream[p++];
+
+ var clear_code = 1 << min_code_size;
+ var eoi_code = clear_code + 1;
+ var next_code = eoi_code + 1;
+
+ var cur_code_size = min_code_size + 1; // Number of bits per code.
+ // NOTE: This shares the same name as the encoder, but has a different
+ // meaning here. Here this masks each code coming from the code stream.
+ var code_mask = (1 << cur_code_size) - 1;
+ var cur_shift = 0;
+ var cur = 0;
+
+ var op = 0; // Output pointer.
+
+ var subblock_size = code_stream[p++];
+
+ // TODO(deanm): Would using a TypedArray be any faster? At least it would
+ // solve the fast mode / backing store uncertainty.
+ // var code_table = Array(4096);
+ var code_table = new Int32Array(4096); // Can be signed, we only use 20 bits.
+
+ var prev_code = null; // Track code-1.
+
+ while (true) {
+ // Read up to two bytes, making sure we always 12-bits for max sized code.
+ while (cur_shift < 16) {
+ if (subblock_size === 0) break; // No more data to be read.
+
+ cur |= code_stream[p++] << cur_shift;
+ cur_shift += 8;
+
+ if (subblock_size === 1) {
+ // Never let it get to 0 to hold logic above.
+ subblock_size = code_stream[p++]; // Next subblock.
+ } else {
+ --subblock_size;
+ }
+ }
+
+ // TODO(deanm): We should never really get here, we should have received
+ // and EOI.
+ if (cur_shift < cur_code_size) break;
+
+ var code = cur & code_mask;
+ cur >>= cur_code_size;
+ cur_shift -= cur_code_size;
+
+ // TODO(deanm): Maybe should check that the first code was a clear code,
+ // at least this is what you're supposed to do. But actually our encoder
+ // now doesn't emit a clear code first anyway.
+ if (code === clear_code) {
+ // We don't actually have to clear the table. This could be a good idea
+ // for greater error checking, but we don't really do any anyway. We
+ // will just track it with next_code and overwrite old entries.
+
+ next_code = eoi_code + 1;
+ cur_code_size = min_code_size + 1;
+ code_mask = (1 << cur_code_size) - 1;
+
+ // Don't update prev_code ?
+ prev_code = null;
+ continue;
+ } else if (code === eoi_code) {
+ break;
+ }
+
+ // We have a similar situation as the decoder, where we want to store
+ // variable length entries (code table entries), but we want to do in a
+ // faster manner than an array of arrays. The code below stores sort of a
+ // linked list within the code table, and then "chases" through it to
+ // construct the dictionary entries. When a new entry is created, just the
+ // last byte is stored, and the rest (prefix) of the entry is only
+ // referenced by its table entry. Then the code chases through the
+ // prefixes until it reaches a single byte code. We have to chase twice,
+ // first to compute the length, and then to actually copy the data to the
+ // output (backwards, since we know the length). The alternative would be
+ // storing something in an intermediate stack, but that doesn't make any
+ // more sense. I implemented an approach where it also stored the length
+ // in the code table, although it's a bit tricky because you run out of
+ // bits (12 + 12 + 8), but I didn't measure much improvements (the table
+ // entries are generally not the long). Even when I created benchmarks for
+ // very long table entries the complexity did not seem worth it.
+ // The code table stores the prefix entry in 12 bits and then the suffix
+ // byte in 8 bits, so each entry is 20 bits.
+
+ var chase_code = code < next_code ? code : prev_code;
+
+ // Chase what we will output, either {CODE} or {CODE-1}.
+ var chase_length = 0;
+ var chase = chase_code;
+ while (chase > clear_code) {
+ chase = code_table[chase] >> 8;
+ ++chase_length;
+ }
+
+ var k = chase;
+
+ var op_end = op + chase_length + (chase_code !== code ? 1 : 0);
+ if (op_end > output_length) {
+ console.log('Warning, gif stream longer than expected.');
+ return;
+ }
+
+ // Already have the first byte from the chase, might as well write it fast.
+ output[op++] = k;
+
+ op += chase_length;
+ var b = op; // Track pointer, writing backwards.
+
+ if (chase_code !== code)
+ // The case of emitting {CODE-1} + k.
+ output[op++] = k;
+
+ chase = chase_code;
+ while (chase_length--) {
+ chase = code_table[chase];
+ output[--b] = chase & 0xff; // Write backwards.
+ chase >>= 8; // Pull down to the prefix code.
+ }
+
+ if (prev_code !== null && next_code < 4096) {
+ code_table[next_code++] = (prev_code << 8) | k;
+ // TODO(deanm): Figure out this clearing vs code growth logic better. I
+ // have an feeling that it should just happen somewhere else, for now it
+ // is awkward between when we grow past the max and then hit a clear code.
+ // For now just check if we hit the max 12-bits (then a clear code should
+ // follow, also of course encoded in 12-bits).
+ if (next_code >= code_mask + 1 && cur_code_size < 12) {
+ ++cur_code_size;
+ code_mask = (code_mask << 1) | 1;
+ }
+ }
+
+ prev_code = code;
+ }
+
+ if (op !== output_length) {
+ console.log('Warning, gif stream shorter than expected.');
+ }
+
+ return output;
+ }
+
+ // CommonJS.
+ try {
+ exports.GifWriter = GifWriter;
+ exports.GifReader = GifReader;
+ } catch (e) {}
+ },
+ {}
+ ],
+ 12: [
+ function(_dereq_, module, exports) {
+ (function(Buffer) {
+ /**
+ * https://opentype.js.org v0.9.0 | (c) Frederik De Bleser and other contributors | MIT License | Uses tiny-inflate by Devon Govett and string.prototype.codepointat polyfill by Mathias Bynens
+ */
+
+ (function(global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined'
+ ? factory(exports)
+ : typeof define === 'function' && define.amd
+ ? define(['exports'], factory)
+ : factory((global.opentype = {}));
+ })(this, function(exports) {
+ 'use strict';
+
+ /*! https://mths.be/codepointat v0.2.0 by @mathias */
+ if (!String.prototype.codePointAt) {
+ (function() {
+ var defineProperty = (function() {
+ // IE 8 only supports `Object.defineProperty` on DOM elements
+ try {
+ var object = {};
+ var $defineProperty = Object.defineProperty;
+ var result =
+ $defineProperty(object, object, object) && $defineProperty;
+ } catch (error) {}
+ return result;
+ })();
+ var codePointAt = function(position) {
+ if (this == null) {
+ throw TypeError();
+ }
+ var string = String(this);
+ var size = string.length;
+ // `ToInteger`
+ var index = position ? Number(position) : 0;
+ if (index != index) {
+ // better `isNaN`
+ index = 0;
+ }
+ // Account for out-of-bounds indices:
+ if (index < 0 || index >= size) {
+ return undefined;
+ }
+ // Get the first code unit
+ var first = string.charCodeAt(index);
+ var second;
+ if (
+ // check if it’s the start of a surrogate pair
+ first >= 0xd800 &&
+ first <= 0xdbff && // high surrogate
+ size > index + 1 // there is a next code unit
+ ) {
+ second = string.charCodeAt(index + 1);
+ if (second >= 0xdc00 && second <= 0xdfff) {
+ // low surrogate
+ // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+ return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000;
+ }
+ }
+ return first;
+ };
+ if (defineProperty) {
+ defineProperty(String.prototype, 'codePointAt', {
+ value: codePointAt,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ String.prototype.codePointAt = codePointAt;
+ }
+ })();
+ }
+
+ var TINF_OK = 0;
+ var TINF_DATA_ERROR = -3;
+
+ function Tree() {
+ this.table = new Uint16Array(16); /* table of code length counts */
+ this.trans = new Uint16Array(288); /* code -> symbol translation table */
+ }
+
+ function Data(source, dest) {
+ this.source = source;
+ this.sourceIndex = 0;
+ this.tag = 0;
+ this.bitcount = 0;
+
+ this.dest = dest;
+ this.destLen = 0;
+
+ this.ltree = new Tree(); /* dynamic length/symbol tree */
+ this.dtree = new Tree(); /* dynamic distance tree */
+ }
+
+ /* --------------------------------------------------- *
+ * -- uninitialized global data (static structures) -- *
+ * --------------------------------------------------- */
+
+ var sltree = new Tree();
+ var sdtree = new Tree();
+
+ /* extra bits and base tables for length codes */
+ var length_bits = new Uint8Array(30);
+ var length_base = new Uint16Array(30);
+
+ /* extra bits and base tables for distance codes */
+ var dist_bits = new Uint8Array(30);
+ var dist_base = new Uint16Array(30);
+
+ /* special ordering of code length codes */
+ var clcidx = new Uint8Array([
+ 16,
+ 17,
+ 18,
+ 0,
+ 8,
+ 7,
+ 9,
+ 6,
+ 10,
+ 5,
+ 11,
+ 4,
+ 12,
+ 3,
+ 13,
+ 2,
+ 14,
+ 1,
+ 15
+ ]);
+
+ /* used by tinf_decode_trees, avoids allocations every call */
+ var code_tree = new Tree();
+ var lengths = new Uint8Array(288 + 32);
+
+ /* ----------------------- *
+ * -- utility functions -- *
+ * ----------------------- */
+
+ /* build extra bits and base tables */
+ function tinf_build_bits_base(bits, base, delta, first) {
+ var i, sum;
+
+ /* build bits table */
+ for (i = 0; i < delta; ++i) {
+ bits[i] = 0;
+ }
+ for (i = 0; i < 30 - delta; ++i) {
+ bits[i + delta] = (i / delta) | 0;
+ }
+
+ /* build base table */
+ for (sum = first, i = 0; i < 30; ++i) {
+ base[i] = sum;
+ sum += 1 << bits[i];
+ }
+ }
+
+ /* build the fixed huffman trees */
+ function tinf_build_fixed_trees(lt, dt) {
+ var i;
+
+ /* build fixed length tree */
+ for (i = 0; i < 7; ++i) {
+ lt.table[i] = 0;
+ }
+
+ lt.table[7] = 24;
+ lt.table[8] = 152;
+ lt.table[9] = 112;
+
+ for (i = 0; i < 24; ++i) {
+ lt.trans[i] = 256 + i;
+ }
+ for (i = 0; i < 144; ++i) {
+ lt.trans[24 + i] = i;
+ }
+ for (i = 0; i < 8; ++i) {
+ lt.trans[24 + 144 + i] = 280 + i;
+ }
+ for (i = 0; i < 112; ++i) {
+ lt.trans[24 + 144 + 8 + i] = 144 + i;
+ }
+
+ /* build fixed distance tree */
+ for (i = 0; i < 5; ++i) {
+ dt.table[i] = 0;
+ }
+
+ dt.table[5] = 32;
+
+ for (i = 0; i < 32; ++i) {
+ dt.trans[i] = i;
+ }
+ }
+
+ /* given an array of code lengths, build a tree */
+ var offs = new Uint16Array(16);
+
+ function tinf_build_tree(t, lengths, off, num) {
+ var i, sum;
+
+ /* clear code length count table */
+ for (i = 0; i < 16; ++i) {
+ t.table[i] = 0;
+ }
+
+ /* scan symbol lengths, and sum code length counts */
+ for (i = 0; i < num; ++i) {
+ t.table[lengths[off + i]]++;
+ }
+
+ t.table[0] = 0;
+
+ /* compute offset table for distribution sort */
+ for (sum = 0, i = 0; i < 16; ++i) {
+ offs[i] = sum;
+ sum += t.table[i];
+ }
+
+ /* create code->symbol translation table (symbols sorted by code) */
+ for (i = 0; i < num; ++i) {
+ if (lengths[off + i]) {
+ t.trans[offs[lengths[off + i]]++] = i;
+ }
+ }
+ }
+
+ /* ---------------------- *
+ * -- decode functions -- *
+ * ---------------------- */
+
+ /* get one bit from source stream */
+ function tinf_getbit(d) {
+ /* check if tag is empty */
+ if (!d.bitcount--) {
+ /* load next tag */
+ d.tag = d.source[d.sourceIndex++];
+ d.bitcount = 7;
+ }
+
+ /* shift bit out of tag */
+ var bit = d.tag & 1;
+ d.tag >>>= 1;
+
+ return bit;
+ }
+
+ /* read a num bit value from a stream and add base */
+ function tinf_read_bits(d, num, base) {
+ if (!num) {
+ return base;
+ }
+
+ while (d.bitcount < 24) {
+ d.tag |= d.source[d.sourceIndex++] << d.bitcount;
+ d.bitcount += 8;
+ }
+
+ var val = d.tag & (0xffff >>> (16 - num));
+ d.tag >>>= num;
+ d.bitcount -= num;
+ return val + base;
+ }
+
+ /* given a data stream and a tree, decode a symbol */
+ function tinf_decode_symbol(d, t) {
+ while (d.bitcount < 24) {
+ d.tag |= d.source[d.sourceIndex++] << d.bitcount;
+ d.bitcount += 8;
+ }
+
+ var sum = 0,
+ cur = 0,
+ len = 0;
+ var tag = d.tag;
+
+ /* get more bits while code value is above sum */
+ do {
+ cur = 2 * cur + (tag & 1);
+ tag >>>= 1;
+ ++len;
+
+ sum += t.table[len];
+ cur -= t.table[len];
+ } while (cur >= 0);
+
+ d.tag = tag;
+ d.bitcount -= len;
+
+ return t.trans[sum + cur];
+ }
+
+ /* given a data stream, decode dynamic trees from it */
+ function tinf_decode_trees(d, lt, dt) {
+ var hlit, hdist, hclen;
+ var i, num, length;
+
+ /* get 5 bits HLIT (257-286) */
+ hlit = tinf_read_bits(d, 5, 257);
+
+ /* get 5 bits HDIST (1-32) */
+ hdist = tinf_read_bits(d, 5, 1);
+
+ /* get 4 bits HCLEN (4-19) */
+ hclen = tinf_read_bits(d, 4, 4);
+
+ for (i = 0; i < 19; ++i) {
+ lengths[i] = 0;
+ }
+
+ /* read code lengths for code length alphabet */
+ for (i = 0; i < hclen; ++i) {
+ /* get 3 bits code length (0-7) */
+ var clen = tinf_read_bits(d, 3, 0);
+ lengths[clcidx[i]] = clen;
+ }
+
+ /* build code length tree */
+ tinf_build_tree(code_tree, lengths, 0, 19);
+
+ /* decode code lengths for the dynamic trees */
+ for (num = 0; num < hlit + hdist; ) {
+ var sym = tinf_decode_symbol(d, code_tree);
+
+ switch (sym) {
+ case 16:
+ /* copy previous code length 3-6 times (read 2 bits) */
+ var prev = lengths[num - 1];
+ for (length = tinf_read_bits(d, 2, 3); length; --length) {
+ lengths[num++] = prev;
+ }
+ break;
+ case 17:
+ /* repeat code length 0 for 3-10 times (read 3 bits) */
+ for (length = tinf_read_bits(d, 3, 3); length; --length) {
+ lengths[num++] = 0;
+ }
+ break;
+ case 18:
+ /* repeat code length 0 for 11-138 times (read 7 bits) */
+ for (length = tinf_read_bits(d, 7, 11); length; --length) {
+ lengths[num++] = 0;
+ }
+ break;
+ default:
+ /* values 0-15 represent the actual code lengths */
+ lengths[num++] = sym;
+ break;
+ }
+ }
+
+ /* build dynamic trees */
+ tinf_build_tree(lt, lengths, 0, hlit);
+ tinf_build_tree(dt, lengths, hlit, hdist);
+ }
+
+ /* ----------------------------- *
+ * -- block inflate functions -- *
+ * ----------------------------- */
+
+ /* given a stream and two trees, inflate a block of data */
+ function tinf_inflate_block_data(d, lt, dt) {
+ while (1) {
+ var sym = tinf_decode_symbol(d, lt);
+
+ /* check for end of block */
+ if (sym === 256) {
+ return TINF_OK;
+ }
+
+ if (sym < 256) {
+ d.dest[d.destLen++] = sym;
+ } else {
+ var length, dist, offs;
+ var i;
+
+ sym -= 257;
+
+ /* possibly get more bits from length code */
+ length = tinf_read_bits(d, length_bits[sym], length_base[sym]);
+
+ dist = tinf_decode_symbol(d, dt);
+
+ /* possibly get more bits from distance code */
+ offs = d.destLen - tinf_read_bits(d, dist_bits[dist], dist_base[dist]);
+
+ /* copy match */
+ for (i = offs; i < offs + length; ++i) {
+ d.dest[d.destLen++] = d.dest[i];
+ }
+ }
+ }
+ }
+
+ /* inflate an uncompressed block of data */
+ function tinf_inflate_uncompressed_block(d) {
+ var length, invlength;
+ var i;
+
+ /* unread from bitbuffer */
+ while (d.bitcount > 8) {
+ d.sourceIndex--;
+ d.bitcount -= 8;
+ }
+
+ /* get length */
+ length = d.source[d.sourceIndex + 1];
+ length = 256 * length + d.source[d.sourceIndex];
+
+ /* get one's complement of length */
+ invlength = d.source[d.sourceIndex + 3];
+ invlength = 256 * invlength + d.source[d.sourceIndex + 2];
+
+ /* check length */
+ if (length !== (~invlength & 0x0000ffff)) {
+ return TINF_DATA_ERROR;
+ }
+
+ d.sourceIndex += 4;
+
+ /* copy block */
+ for (i = length; i; --i) {
+ d.dest[d.destLen++] = d.source[d.sourceIndex++];
+ }
+
+ /* make sure we start next block on a byte boundary */
+ d.bitcount = 0;
+
+ return TINF_OK;
+ }
+
+ /* inflate stream from source to dest */
+ function tinf_uncompress(source, dest) {
+ var d = new Data(source, dest);
+ var bfinal, btype, res;
+
+ do {
+ /* read final block flag */
+ bfinal = tinf_getbit(d);
+
+ /* read block type (2 bits) */
+ btype = tinf_read_bits(d, 2, 0);
+
+ /* decompress block */
+ switch (btype) {
+ case 0:
+ /* decompress uncompressed block */
+ res = tinf_inflate_uncompressed_block(d);
+ break;
+ case 1:
+ /* decompress block with fixed huffman trees */
+ res = tinf_inflate_block_data(d, sltree, sdtree);
+ break;
+ case 2:
+ /* decompress block with dynamic huffman trees */
+ tinf_decode_trees(d, d.ltree, d.dtree);
+ res = tinf_inflate_block_data(d, d.ltree, d.dtree);
+ break;
+ default:
+ res = TINF_DATA_ERROR;
+ }
+
+ if (res !== TINF_OK) {
+ throw new Error('Data error');
+ }
+ } while (!bfinal);
+
+ if (d.destLen < d.dest.length) {
+ if (typeof d.dest.slice === 'function') {
+ return d.dest.slice(0, d.destLen);
+ } else {
+ return d.dest.subarray(0, d.destLen);
+ }
+ }
+
+ return d.dest;
+ }
+
+ /* -------------------- *
+ * -- initialization -- *
+ * -------------------- */
+
+ /* build fixed huffman trees */
+ tinf_build_fixed_trees(sltree, sdtree);
+
+ /* build extra bits and base tables */
+ tinf_build_bits_base(length_bits, length_base, 4, 3);
+ tinf_build_bits_base(dist_bits, dist_base, 2, 1);
+
+ /* fix a special case */
+ length_bits[28] = 0;
+ length_base[28] = 258;
+
+ var tinyInflate = tinf_uncompress;
+
+ // The Bounding Box object
+
+ function derive(v0, v1, v2, v3, t) {
+ return (
+ Math.pow(1 - t, 3) * v0 +
+ 3 * Math.pow(1 - t, 2) * t * v1 +
+ 3 * (1 - t) * Math.pow(t, 2) * v2 +
+ Math.pow(t, 3) * v3
+ );
+ }
+ /**
+ * A bounding box is an enclosing box that describes the smallest measure within which all the points lie.
+ * It is used to calculate the bounding box of a glyph or text path.
+ *
+ * On initialization, x1/y1/x2/y2 will be NaN. Check if the bounding box is empty using `isEmpty()`.
+ *
+ * @exports opentype.BoundingBox
+ * @class
+ * @constructor
+ */
+ function BoundingBox() {
+ this.x1 = Number.NaN;
+ this.y1 = Number.NaN;
+ this.x2 = Number.NaN;
+ this.y2 = Number.NaN;
+ }
+
+ /**
+ * Returns true if the bounding box is empty, that is, no points have been added to the box yet.
+ */
+ BoundingBox.prototype.isEmpty = function() {
+ return isNaN(this.x1) || isNaN(this.y1) || isNaN(this.x2) || isNaN(this.y2);
+ };
+
+ /**
+ * Add the point to the bounding box.
+ * The x1/y1/x2/y2 coordinates of the bounding box will now encompass the given point.
+ * @param {number} x - The X coordinate of the point.
+ * @param {number} y - The Y coordinate of the point.
+ */
+ BoundingBox.prototype.addPoint = function(x, y) {
+ if (typeof x === 'number') {
+ if (isNaN(this.x1) || isNaN(this.x2)) {
+ this.x1 = x;
+ this.x2 = x;
+ }
+ if (x < this.x1) {
+ this.x1 = x;
+ }
+ if (x > this.x2) {
+ this.x2 = x;
+ }
+ }
+ if (typeof y === 'number') {
+ if (isNaN(this.y1) || isNaN(this.y2)) {
+ this.y1 = y;
+ this.y2 = y;
+ }
+ if (y < this.y1) {
+ this.y1 = y;
+ }
+ if (y > this.y2) {
+ this.y2 = y;
+ }
+ }
+ };
+
+ /**
+ * Add a X coordinate to the bounding box.
+ * This extends the bounding box to include the X coordinate.
+ * This function is used internally inside of addBezier.
+ * @param {number} x - The X coordinate of the point.
+ */
+ BoundingBox.prototype.addX = function(x) {
+ this.addPoint(x, null);
+ };
+
+ /**
+ * Add a Y coordinate to the bounding box.
+ * This extends the bounding box to include the Y coordinate.
+ * This function is used internally inside of addBezier.
+ * @param {number} y - The Y coordinate of the point.
+ */
+ BoundingBox.prototype.addY = function(y) {
+ this.addPoint(null, y);
+ };
+
+ /**
+ * Add a Bézier curve to the bounding box.
+ * This extends the bounding box to include the entire Bézier.
+ * @param {number} x0 - The starting X coordinate.
+ * @param {number} y0 - The starting Y coordinate.
+ * @param {number} x1 - The X coordinate of the first control point.
+ * @param {number} y1 - The Y coordinate of the first control point.
+ * @param {number} x2 - The X coordinate of the second control point.
+ * @param {number} y2 - The Y coordinate of the second control point.
+ * @param {number} x - The ending X coordinate.
+ * @param {number} y - The ending Y coordinate.
+ */
+ BoundingBox.prototype.addBezier = function(x0, y0, x1, y1, x2, y2, x, y) {
+ var this$1 = this;
+
+ // This code is based on http://nishiohirokazu.blogspot.com/2009/06/how-to-calculate-bezier-curves-bounding.html
+ // and https://github.com/icons8/svg-path-bounding-box
+
+ var p0 = [x0, y0];
+ var p1 = [x1, y1];
+ var p2 = [x2, y2];
+ var p3 = [x, y];
+
+ this.addPoint(x0, y0);
+ this.addPoint(x, y);
+
+ for (var i = 0; i <= 1; i++) {
+ var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
+ var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
+ var c = 3 * p1[i] - 3 * p0[i];
+
+ if (a === 0) {
+ if (b === 0) {
+ continue;
+ }
+ var t = -c / b;
+ if (0 < t && t < 1) {
+ if (i === 0) {
+ this$1.addX(derive(p0[i], p1[i], p2[i], p3[i], t));
+ }
+ if (i === 1) {
+ this$1.addY(derive(p0[i], p1[i], p2[i], p3[i], t));
+ }
+ }
+ continue;
+ }
+
+ var b2ac = Math.pow(b, 2) - 4 * c * a;
+ if (b2ac < 0) {
+ continue;
+ }
+ var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
+ if (0 < t1 && t1 < 1) {
+ if (i === 0) {
+ this$1.addX(derive(p0[i], p1[i], p2[i], p3[i], t1));
+ }
+ if (i === 1) {
+ this$1.addY(derive(p0[i], p1[i], p2[i], p3[i], t1));
+ }
+ }
+ var t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
+ if (0 < t2 && t2 < 1) {
+ if (i === 0) {
+ this$1.addX(derive(p0[i], p1[i], p2[i], p3[i], t2));
+ }
+ if (i === 1) {
+ this$1.addY(derive(p0[i], p1[i], p2[i], p3[i], t2));
+ }
+ }
+ }
+ };
+
+ /**
+ * Add a quadratic curve to the bounding box.
+ * This extends the bounding box to include the entire quadratic curve.
+ * @param {number} x0 - The starting X coordinate.
+ * @param {number} y0 - The starting Y coordinate.
+ * @param {number} x1 - The X coordinate of the control point.
+ * @param {number} y1 - The Y coordinate of the control point.
+ * @param {number} x - The ending X coordinate.
+ * @param {number} y - The ending Y coordinate.
+ */
+ BoundingBox.prototype.addQuad = function(x0, y0, x1, y1, x, y) {
+ var cp1x = x0 + 2 / 3 * (x1 - x0);
+ var cp1y = y0 + 2 / 3 * (y1 - y0);
+ var cp2x = cp1x + 1 / 3 * (x - x0);
+ var cp2y = cp1y + 1 / 3 * (y - y0);
+ this.addBezier(x0, y0, cp1x, cp1y, cp2x, cp2y, x, y);
+ };
+
+ // Geometric objects
+
+ /**
+ * A bézier path containing a set of path commands similar to a SVG path.
+ * Paths can be drawn on a context using `draw`.
+ * @exports opentype.Path
+ * @class
+ * @constructor
+ */
+ function Path() {
+ this.commands = [];
+ this.fill = 'black';
+ this.stroke = null;
+ this.strokeWidth = 1;
+ }
+
+ /**
+ * @param {number} x
+ * @param {number} y
+ */
+ Path.prototype.moveTo = function(x, y) {
+ this.commands.push({
+ type: 'M',
+ x: x,
+ y: y
+ });
+ };
+
+ /**
+ * @param {number} x
+ * @param {number} y
+ */
+ Path.prototype.lineTo = function(x, y) {
+ this.commands.push({
+ type: 'L',
+ x: x,
+ y: y
+ });
+ };
+
+ /**
+ * Draws cubic curve
+ * @function
+ * curveTo
+ * @memberof opentype.Path.prototype
+ * @param {number} x1 - x of control 1
+ * @param {number} y1 - y of control 1
+ * @param {number} x2 - x of control 2
+ * @param {number} y2 - y of control 2
+ * @param {number} x - x of path point
+ * @param {number} y - y of path point
+ */
+
+ /**
+ * Draws cubic curve
+ * @function
+ * bezierCurveTo
+ * @memberof opentype.Path.prototype
+ * @param {number} x1 - x of control 1
+ * @param {number} y1 - y of control 1
+ * @param {number} x2 - x of control 2
+ * @param {number} y2 - y of control 2
+ * @param {number} x - x of path point
+ * @param {number} y - y of path point
+ * @see curveTo
+ */
+ Path.prototype.curveTo = Path.prototype.bezierCurveTo = function(
+ x1,
+ y1,
+ x2,
+ y2,
+ x,
+ y
+ ) {
+ this.commands.push({
+ type: 'C',
+ x1: x1,
+ y1: y1,
+ x2: x2,
+ y2: y2,
+ x: x,
+ y: y
+ });
+ };
+
+ /**
+ * Draws quadratic curve
+ * @function
+ * quadraticCurveTo
+ * @memberof opentype.Path.prototype
+ * @param {number} x1 - x of control
+ * @param {number} y1 - y of control
+ * @param {number} x - x of path point
+ * @param {number} y - y of path point
+ */
+
+ /**
+ * Draws quadratic curve
+ * @function
+ * quadTo
+ * @memberof opentype.Path.prototype
+ * @param {number} x1 - x of control
+ * @param {number} y1 - y of control
+ * @param {number} x - x of path point
+ * @param {number} y - y of path point
+ */
+ Path.prototype.quadTo = Path.prototype.quadraticCurveTo = function(
+ x1,
+ y1,
+ x,
+ y
+ ) {
+ this.commands.push({
+ type: 'Q',
+ x1: x1,
+ y1: y1,
+ x: x,
+ y: y
+ });
+ };
+
+ /**
+ * Closes the path
+ * @function closePath
+ * @memberof opentype.Path.prototype
+ */
+
+ /**
+ * Close the path
+ * @function close
+ * @memberof opentype.Path.prototype
+ */
+ Path.prototype.close = Path.prototype.closePath = function() {
+ this.commands.push({
+ type: 'Z'
+ });
+ };
+
+ /**
+ * Add the given path or list of commands to the commands of this path.
+ * @param {Array} pathOrCommands - another opentype.Path, an opentype.BoundingBox, or an array of commands.
+ */
+ Path.prototype.extend = function(pathOrCommands) {
+ if (pathOrCommands.commands) {
+ pathOrCommands = pathOrCommands.commands;
+ } else if (pathOrCommands instanceof BoundingBox) {
+ var box = pathOrCommands;
+ this.moveTo(box.x1, box.y1);
+ this.lineTo(box.x2, box.y1);
+ this.lineTo(box.x2, box.y2);
+ this.lineTo(box.x1, box.y2);
+ this.close();
+ return;
+ }
+
+ Array.prototype.push.apply(this.commands, pathOrCommands);
+ };
+
+ /**
+ * Calculate the bounding box of the path.
+ * @returns {opentype.BoundingBox}
+ */
+ Path.prototype.getBoundingBox = function() {
+ var this$1 = this;
+
+ var box = new BoundingBox();
+
+ var startX = 0;
+ var startY = 0;
+ var prevX = 0;
+ var prevY = 0;
+ for (var i = 0; i < this.commands.length; i++) {
+ var cmd = this$1.commands[i];
+ switch (cmd.type) {
+ case 'M':
+ box.addPoint(cmd.x, cmd.y);
+ startX = prevX = cmd.x;
+ startY = prevY = cmd.y;
+ break;
+ case 'L':
+ box.addPoint(cmd.x, cmd.y);
+ prevX = cmd.x;
+ prevY = cmd.y;
+ break;
+ case 'Q':
+ box.addQuad(prevX, prevY, cmd.x1, cmd.y1, cmd.x, cmd.y);
+ prevX = cmd.x;
+ prevY = cmd.y;
+ break;
+ case 'C':
+ box.addBezier(
+ prevX,
+ prevY,
+ cmd.x1,
+ cmd.y1,
+ cmd.x2,
+ cmd.y2,
+ cmd.x,
+ cmd.y
+ );
+ prevX = cmd.x;
+ prevY = cmd.y;
+ break;
+ case 'Z':
+ prevX = startX;
+ prevY = startY;
+ break;
+ default:
+ throw new Error('Unexpected path command ' + cmd.type);
+ }
+ }
+ if (box.isEmpty()) {
+ box.addPoint(0, 0);
+ }
+ return box;
+ };
+
+ /**
+ * Draw the path to a 2D context.
+ * @param {CanvasRenderingContext2D} ctx - A 2D drawing context.
+ */
+ Path.prototype.draw = function(ctx) {
+ var this$1 = this;
+
+ ctx.beginPath();
+ for (var i = 0; i < this.commands.length; i += 1) {
+ var cmd = this$1.commands[i];
+ if (cmd.type === 'M') {
+ ctx.moveTo(cmd.x, cmd.y);
+ } else if (cmd.type === 'L') {
+ ctx.lineTo(cmd.x, cmd.y);
+ } else if (cmd.type === 'C') {
+ ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+ } else if (cmd.type === 'Q') {
+ ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+ } else if (cmd.type === 'Z') {
+ ctx.closePath();
+ }
+ }
+
+ if (this.fill) {
+ ctx.fillStyle = this.fill;
+ ctx.fill();
+ }
+
+ if (this.stroke) {
+ ctx.strokeStyle = this.stroke;
+ ctx.lineWidth = this.strokeWidth;
+ ctx.stroke();
+ }
+ };
+
+ /**
+ * Convert the Path to a string of path data instructions
+ * See http://www.w3.org/TR/SVG/paths.html#PathData
+ * @param {number} [decimalPlaces=2] - The amount of decimal places for floating-point values
+ * @return {string}
+ */
+ Path.prototype.toPathData = function(decimalPlaces) {
+ var this$1 = this;
+
+ decimalPlaces = decimalPlaces !== undefined ? decimalPlaces : 2;
+
+ function floatToString(v) {
+ if (Math.round(v) === v) {
+ return '' + Math.round(v);
+ } else {
+ return v.toFixed(decimalPlaces);
+ }
+ }
+
+ function packValues() {
+ var arguments$1 = arguments;
+
+ var s = '';
+ for (var i = 0; i < arguments.length; i += 1) {
+ var v = arguments$1[i];
+ if (v >= 0 && i > 0) {
+ s += ' ';
+ }
+
+ s += floatToString(v);
+ }
+
+ return s;
+ }
+
+ var d = '';
+ for (var i = 0; i < this.commands.length; i += 1) {
+ var cmd = this$1.commands[i];
+ if (cmd.type === 'M') {
+ d += 'M' + packValues(cmd.x, cmd.y);
+ } else if (cmd.type === 'L') {
+ d += 'L' + packValues(cmd.x, cmd.y);
+ } else if (cmd.type === 'C') {
+ d += 'C' + packValues(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+ } else if (cmd.type === 'Q') {
+ d += 'Q' + packValues(cmd.x1, cmd.y1, cmd.x, cmd.y);
+ } else if (cmd.type === 'Z') {
+ d += 'Z';
+ }
+ }
+
+ return d;
+ };
+
+ /**
+ * Convert the path to an SVG element, as a string.
+ * @param {number} [decimalPlaces=2] - The amount of decimal places for floating-point values
+ * @return {string}
+ */
+ Path.prototype.toSVG = function(decimalPlaces) {
+ var svg = '= 0 && v <= 255,
+ 'Byte value should be between 0 and 255.'
+ );
+ return [v];
+ };
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.BYTE = constant(1);
+
+ /**
+ * Convert a 8-bit signed integer to a list of 1 byte.
+ * @param {string}
+ * @returns {Array}
+ */
+ encode.CHAR = function(v) {
+ return [v.charCodeAt(0)];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.CHAR = constant(1);
+
+ /**
+ * Convert an ASCII string to a list of bytes.
+ * @param {string}
+ * @returns {Array}
+ */
+ encode.CHARARRAY = function(v) {
+ var b = [];
+ for (var i = 0; i < v.length; i += 1) {
+ b[i] = v.charCodeAt(i);
+ }
+
+ return b;
+ };
+
+ /**
+ * @param {Array}
+ * @returns {number}
+ */
+ sizeOf.CHARARRAY = function(v) {
+ return v.length;
+ };
+
+ /**
+ * Convert a 16-bit unsigned integer to a list of 2 bytes.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.USHORT = function(v) {
+ return [(v >> 8) & 0xff, v & 0xff];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.USHORT = constant(2);
+
+ /**
+ * Convert a 16-bit signed integer to a list of 2 bytes.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.SHORT = function(v) {
+ // Two's complement
+ if (v >= LIMIT16) {
+ v = -(2 * LIMIT16 - v);
+ }
+
+ return [(v >> 8) & 0xff, v & 0xff];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.SHORT = constant(2);
+
+ /**
+ * Convert a 24-bit unsigned integer to a list of 3 bytes.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.UINT24 = function(v) {
+ return [(v >> 16) & 0xff, (v >> 8) & 0xff, v & 0xff];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.UINT24 = constant(3);
+
+ /**
+ * Convert a 32-bit unsigned integer to a list of 4 bytes.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.ULONG = function(v) {
+ return [(v >> 24) & 0xff, (v >> 16) & 0xff, (v >> 8) & 0xff, v & 0xff];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.ULONG = constant(4);
+
+ /**
+ * Convert a 32-bit unsigned integer to a list of 4 bytes.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.LONG = function(v) {
+ // Two's complement
+ if (v >= LIMIT32) {
+ v = -(2 * LIMIT32 - v);
+ }
+
+ return [(v >> 24) & 0xff, (v >> 16) & 0xff, (v >> 8) & 0xff, v & 0xff];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.LONG = constant(4);
+
+ encode.FIXED = encode.ULONG;
+ sizeOf.FIXED = sizeOf.ULONG;
+
+ encode.FWORD = encode.SHORT;
+ sizeOf.FWORD = sizeOf.SHORT;
+
+ encode.UFWORD = encode.USHORT;
+ sizeOf.UFWORD = sizeOf.USHORT;
+
+ /**
+ * Convert a 32-bit Apple Mac timestamp integer to a list of 8 bytes, 64-bit timestamp.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.LONGDATETIME = function(v) {
+ return [
+ 0,
+ 0,
+ 0,
+ 0,
+ (v >> 24) & 0xff,
+ (v >> 16) & 0xff,
+ (v >> 8) & 0xff,
+ v & 0xff
+ ];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.LONGDATETIME = constant(8);
+
+ /**
+ * Convert a 4-char tag to a list of 4 bytes.
+ * @param {string}
+ * @returns {Array}
+ */
+ encode.TAG = function(v) {
+ check.argument(v.length === 4, 'Tag should be exactly 4 ASCII characters.');
+ return [v.charCodeAt(0), v.charCodeAt(1), v.charCodeAt(2), v.charCodeAt(3)];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.TAG = constant(4);
+
+ // CFF data types ///////////////////////////////////////////////////////////
+
+ encode.Card8 = encode.BYTE;
+ sizeOf.Card8 = sizeOf.BYTE;
+
+ encode.Card16 = encode.USHORT;
+ sizeOf.Card16 = sizeOf.USHORT;
+
+ encode.OffSize = encode.BYTE;
+ sizeOf.OffSize = sizeOf.BYTE;
+
+ encode.SID = encode.USHORT;
+ sizeOf.SID = sizeOf.USHORT;
+
+ // Convert a numeric operand or charstring number to a variable-size list of bytes.
+ /**
+ * Convert a numeric operand or charstring number to a variable-size list of bytes.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.NUMBER = function(v) {
+ if (v >= -107 && v <= 107) {
+ return [v + 139];
+ } else if (v >= 108 && v <= 1131) {
+ v = v - 108;
+ return [(v >> 8) + 247, v & 0xff];
+ } else if (v >= -1131 && v <= -108) {
+ v = -v - 108;
+ return [(v >> 8) + 251, v & 0xff];
+ } else if (v >= -32768 && v <= 32767) {
+ return encode.NUMBER16(v);
+ } else {
+ return encode.NUMBER32(v);
+ }
+ };
+
+ /**
+ * @param {number}
+ * @returns {number}
+ */
+ sizeOf.NUMBER = function(v) {
+ return encode.NUMBER(v).length;
+ };
+
+ /**
+ * Convert a signed number between -32768 and +32767 to a three-byte value.
+ * This ensures we always use three bytes, but is not the most compact format.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.NUMBER16 = function(v) {
+ return [28, (v >> 8) & 0xff, v & 0xff];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.NUMBER16 = constant(3);
+
+ /**
+ * Convert a signed number between -(2^31) and +(2^31-1) to a five-byte value.
+ * This is useful if you want to be sure you always use four bytes,
+ * at the expense of wasting a few bytes for smaller numbers.
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.NUMBER32 = function(v) {
+ return [29, (v >> 24) & 0xff, (v >> 16) & 0xff, (v >> 8) & 0xff, v & 0xff];
+ };
+
+ /**
+ * @constant
+ * @type {number}
+ */
+ sizeOf.NUMBER32 = constant(5);
+
+ /**
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.REAL = function(v) {
+ var value = v.toString();
+
+ // Some numbers use an epsilon to encode the value. (e.g. JavaScript will store 0.0000001 as 1e-7)
+ // This code converts it back to a number without the epsilon.
+ var m = /\.(\d*?)(?:9{5,20}|0{5,20})\d{0,2}(?:e(.+)|$)/.exec(value);
+ if (m) {
+ var epsilon = parseFloat('1e' + ((m[2] ? +m[2] : 0) + m[1].length));
+ value = (Math.round(v * epsilon) / epsilon).toString();
+ }
+
+ var nibbles = '';
+ for (var i = 0, ii = value.length; i < ii; i += 1) {
+ var c = value[i];
+ if (c === 'e') {
+ nibbles += value[++i] === '-' ? 'c' : 'b';
+ } else if (c === '.') {
+ nibbles += 'a';
+ } else if (c === '-') {
+ nibbles += 'e';
+ } else {
+ nibbles += c;
+ }
+ }
+
+ nibbles += nibbles.length & 1 ? 'f' : 'ff';
+ var out = [30];
+ for (var i$1 = 0, ii$1 = nibbles.length; i$1 < ii$1; i$1 += 2) {
+ out.push(parseInt(nibbles.substr(i$1, 2), 16));
+ }
+
+ return out;
+ };
+
+ /**
+ * @param {number}
+ * @returns {number}
+ */
+ sizeOf.REAL = function(v) {
+ return encode.REAL(v).length;
+ };
+
+ encode.NAME = encode.CHARARRAY;
+ sizeOf.NAME = sizeOf.CHARARRAY;
+
+ encode.STRING = encode.CHARARRAY;
+ sizeOf.STRING = sizeOf.CHARARRAY;
+
+ /**
+ * @param {DataView} data
+ * @param {number} offset
+ * @param {number} numBytes
+ * @returns {string}
+ */
+ decode.UTF8 = function(data, offset, numBytes) {
+ var codePoints = [];
+ var numChars = numBytes;
+ for (var j = 0; j < numChars; j++, offset += 1) {
+ codePoints[j] = data.getUint8(offset);
+ }
+
+ return String.fromCharCode.apply(null, codePoints);
+ };
+
+ /**
+ * @param {DataView} data
+ * @param {number} offset
+ * @param {number} numBytes
+ * @returns {string}
+ */
+ decode.UTF16 = function(data, offset, numBytes) {
+ var codePoints = [];
+ var numChars = numBytes / 2;
+ for (var j = 0; j < numChars; j++, offset += 2) {
+ codePoints[j] = data.getUint16(offset);
+ }
+
+ return String.fromCharCode.apply(null, codePoints);
+ };
+
+ /**
+ * Convert a JavaScript string to UTF16-BE.
+ * @param {string}
+ * @returns {Array}
+ */
+ encode.UTF16 = function(v) {
+ var b = [];
+ for (var i = 0; i < v.length; i += 1) {
+ var codepoint = v.charCodeAt(i);
+ b[b.length] = (codepoint >> 8) & 0xff;
+ b[b.length] = codepoint & 0xff;
+ }
+
+ return b;
+ };
+
+ /**
+ * @param {string}
+ * @returns {number}
+ */
+ sizeOf.UTF16 = function(v) {
+ return v.length * 2;
+ };
+
+ // Data for converting old eight-bit Macintosh encodings to Unicode.
+ // This representation is optimized for decoding; encoding is slower
+ // and needs more memory. The assumption is that all opentype.js users
+ // want to open fonts, but saving a font will be comparatively rare
+ // so it can be more expensive. Keyed by IANA character set name.
+ //
+ // Python script for generating these strings:
+ //
+ // s = u''.join([chr(c).decode('mac_greek') for c in range(128, 256)])
+ // print(s.encode('utf-8'))
+ /**
+ * @private
+ */
+ var eightBitMacEncodings = {
+ // Python: 'mac_croatian'
+ 'x-mac-croatian':
+ 'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®Š™´¨≠ŽØ∞±≤≥∆µ∂∑∏š∫ªºΩžø' +
+ '¿¡¬√ƒ≈Ć«Č… ÀÃÕŒœĐ—“”‘’÷◊©⁄€‹›Æ»–·‚„‰ÂćÁčÈÍÎÏÌÓÔđÒÚÛÙıˆ˜¯πË˚¸Êæˇ',
+ // Python: 'mac_cyrillic'
+ 'x-mac-cyrillic':
+ 'АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ†°Ґ£§•¶І®©™Ђђ≠Ѓѓ∞±≤≥іµґЈЄєЇїЉљЊњ' +
+ 'јЅ¬√ƒ≈∆«»… ЋћЌќѕ–—“”‘’÷„ЎўЏџ№Ёёяабвгдежзийклмнопрстуфхцчшщъыьэю',
+ // http://unicode.org/Public/MAPPINGS/VENDORS/APPLE/GAELIC.TXT
+ 'x-mac-gaelic':
+ 'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØḂ±≤≥ḃĊċḊḋḞḟĠġṀæø' +
+ 'ṁṖṗɼƒſṠ«»… ÀÃÕŒœ–—“”‘’ṡẛÿŸṪ€‹›Ŷŷṫ·Ỳỳ⁊ÂÊÁËÈÍÎÏÌÓÔ♣ÒÚÛÙıÝýŴŵẄẅẀẁẂẃ',
+ // Python: 'mac_greek'
+ 'x-mac-greek':
+ 'Ĺ²É³ÖÜ΅àâä΄¨çéèê룙î‰ôö¦€ùûü†ΓΔΘΛΞΠß®©ΣΪ§≠°·Α±≤≥¥ΒΕΖΗΙΚΜΦΫΨΩ' +
+ 'άΝ¬ΟΡ≈Τ«»… ΥΧΆΈœ–―“”‘’÷ΉΊΌΎέήίόΏύαβψδεφγηιξκλμνοπώρστθωςχυζϊϋΐΰ\u00AD',
+ // Python: 'mac_iceland'
+ 'x-mac-icelandic':
+ 'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûüÝ°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø' +
+ '¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€ÐðÞþý·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ',
+ // http://unicode.org/Public/MAPPINGS/VENDORS/APPLE/INUIT.TXT
+ 'x-mac-inuit':
+ 'ᐃᐄᐅᐆᐊᐋᐱᐲᐳᐴᐸᐹᑉᑎᑏᑐᑑᑕᑖᑦᑭᑮᑯᑰᑲᑳᒃᒋᒌᒍᒎᒐᒑ°ᒡᒥᒦ•¶ᒧ®©™ᒨᒪᒫᒻᓂᓃᓄᓅᓇᓈᓐᓯᓰᓱᓲᓴᓵᔅᓕᓖᓗ' +
+ 'ᓘᓚᓛᓪᔨᔩᔪᔫᔭ… ᔮᔾᕕᕖᕗ–—“”‘’ᕘᕙᕚᕝᕆᕇᕈᕉᕋᕌᕐᕿᖀᖁᖂᖃᖄᖅᖏᖐᖑᖒᖓᖔᖕᙱᙲᙳᙴᙵᙶᖖᖠᖡᖢᖣᖤᖥᖦᕼŁł',
+ // Python: 'mac_latin2'
+ 'x-mac-ce':
+ 'ÄĀāÉĄÖÜáąČäčĆć鏟ĎíďĒēĖóėôöõúĚěü†°Ę£§•¶ß®©™ę¨≠ģĮįĪ≤≥īĶ∂∑łĻļĽľĹĺŅ' +
+ 'ņѬ√ńŇ∆«»… ňŐÕőŌ–—“”‘’÷◊ōŔŕŘ‹›řŖŗŠ‚„šŚśÁŤťÍŽžŪÓÔūŮÚůŰűŲųÝýķŻŁżĢˇ',
+ // Python: 'mac_roman'
+ macintosh:
+ 'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø' +
+ '¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€‹›fifl‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ',
+ // Python: 'mac_romanian'
+ 'x-mac-romanian':
+ 'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ĂȘ∞±≤≥¥µ∂∑∏π∫ªºΩăș' +
+ '¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€‹›Țț‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ',
+ // Python: 'mac_turkish'
+ 'x-mac-turkish':
+ 'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø' +
+ '¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸĞğİıŞş‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙˆ˜¯˘˙˚¸˝˛ˇ'
+ };
+
+ /**
+ * Decodes an old-style Macintosh string. Returns either a Unicode JavaScript
+ * string, or 'undefined' if the encoding is unsupported. For example, we do
+ * not support Chinese, Japanese or Korean because these would need large
+ * mapping tables.
+ * @param {DataView} dataView
+ * @param {number} offset
+ * @param {number} dataLength
+ * @param {string} encoding
+ * @returns {string}
+ */
+ decode.MACSTRING = function(dataView, offset, dataLength, encoding) {
+ var table = eightBitMacEncodings[encoding];
+ if (table === undefined) {
+ return undefined;
+ }
+
+ var result = '';
+ for (var i = 0; i < dataLength; i++) {
+ var c = dataView.getUint8(offset + i);
+ // In all eight-bit Mac encodings, the characters 0x00..0x7F are
+ // mapped to U+0000..U+007F; we only need to look up the others.
+ if (c <= 0x7f) {
+ result += String.fromCharCode(c);
+ } else {
+ result += table[c & 0x7f];
+ }
+ }
+
+ return result;
+ };
+
+ // Helper function for encode.MACSTRING. Returns a dictionary for mapping
+ // Unicode character codes to their 8-bit MacOS equivalent. This table
+ // is not exactly a super cheap data structure, but we do not care because
+ // encoding Macintosh strings is only rarely needed in typical applications.
+ var macEncodingTableCache = typeof WeakMap === 'function' && new WeakMap();
+ var macEncodingCacheKeys;
+ var getMacEncodingTable = function(encoding) {
+ // Since we use encoding as a cache key for WeakMap, it has to be
+ // a String object and not a literal. And at least on NodeJS 2.10.1,
+ // WeakMap requires that the same String instance is passed for cache hits.
+ if (!macEncodingCacheKeys) {
+ macEncodingCacheKeys = {};
+ for (var e in eightBitMacEncodings) {
+ /*jshint -W053 */ // Suppress "Do not use String as a constructor."
+ macEncodingCacheKeys[e] = new String(e);
+ }
+ }
+
+ var cacheKey = macEncodingCacheKeys[encoding];
+ if (cacheKey === undefined) {
+ return undefined;
+ }
+
+ // We can't do "if (cache.has(key)) {return cache.get(key)}" here:
+ // since garbage collection may run at any time, it could also kick in
+ // between the calls to cache.has() and cache.get(). In that case,
+ // we would return 'undefined' even though we do support the encoding.
+ if (macEncodingTableCache) {
+ var cachedTable = macEncodingTableCache.get(cacheKey);
+ if (cachedTable !== undefined) {
+ return cachedTable;
+ }
+ }
+
+ var decodingTable = eightBitMacEncodings[encoding];
+ if (decodingTable === undefined) {
+ return undefined;
+ }
+
+ var encodingTable = {};
+ for (var i = 0; i < decodingTable.length; i++) {
+ encodingTable[decodingTable.charCodeAt(i)] = i + 0x80;
+ }
+
+ if (macEncodingTableCache) {
+ macEncodingTableCache.set(cacheKey, encodingTable);
+ }
+
+ return encodingTable;
+ };
+
+ /**
+ * Encodes an old-style Macintosh string. Returns a byte array upon success.
+ * If the requested encoding is unsupported, or if the input string contains
+ * a character that cannot be expressed in the encoding, the function returns
+ * 'undefined'.
+ * @param {string} str
+ * @param {string} encoding
+ * @returns {Array}
+ */
+ encode.MACSTRING = function(str, encoding) {
+ var table = getMacEncodingTable(encoding);
+ if (table === undefined) {
+ return undefined;
+ }
+
+ var result = [];
+ for (var i = 0; i < str.length; i++) {
+ var c = str.charCodeAt(i);
+
+ // In all eight-bit Mac encodings, the characters 0x00..0x7F are
+ // mapped to U+0000..U+007F; we only need to look up the others.
+ if (c >= 0x80) {
+ c = table[c];
+ if (c === undefined) {
+ // str contains a Unicode character that cannot be encoded
+ // in the requested encoding.
+ return undefined;
+ }
+ }
+ result[i] = c;
+ // result.push(c);
+ }
+
+ return result;
+ };
+
+ /**
+ * @param {string} str
+ * @param {string} encoding
+ * @returns {number}
+ */
+ sizeOf.MACSTRING = function(str, encoding) {
+ var b = encode.MACSTRING(str, encoding);
+ if (b !== undefined) {
+ return b.length;
+ } else {
+ return 0;
+ }
+ };
+
+ // Helper for encode.VARDELTAS
+ function isByteEncodable(value) {
+ return value >= -128 && value <= 127;
+ }
+
+ // Helper for encode.VARDELTAS
+ function encodeVarDeltaRunAsZeroes(deltas, pos, result) {
+ var runLength = 0;
+ var numDeltas = deltas.length;
+ while (pos < numDeltas && runLength < 64 && deltas[pos] === 0) {
+ ++pos;
+ ++runLength;
+ }
+ result.push(0x80 | (runLength - 1));
+ return pos;
+ }
+
+ // Helper for encode.VARDELTAS
+ function encodeVarDeltaRunAsBytes(deltas, offset, result) {
+ var runLength = 0;
+ var numDeltas = deltas.length;
+ var pos = offset;
+ while (pos < numDeltas && runLength < 64) {
+ var value = deltas[pos];
+ if (!isByteEncodable(value)) {
+ break;
+ }
+
+ // Within a byte-encoded run of deltas, a single zero is best
+ // stored literally as 0x00 value. However, if we have two or
+ // more zeroes in a sequence, it is better to start a new run.
+ // Fore example, the sequence of deltas [15, 15, 0, 15, 15]
+ // becomes 6 bytes (04 0F 0F 00 0F 0F) when storing the zero
+ // within the current run, but 7 bytes (01 0F 0F 80 01 0F 0F)
+ // when starting a new run.
+ if (value === 0 && pos + 1 < numDeltas && deltas[pos + 1] === 0) {
+ break;
+ }
+
+ ++pos;
+ ++runLength;
+ }
+ result.push(runLength - 1);
+ for (var i = offset; i < pos; ++i) {
+ result.push((deltas[i] + 256) & 0xff);
+ }
+ return pos;
+ }
+
+ // Helper for encode.VARDELTAS
+ function encodeVarDeltaRunAsWords(deltas, offset, result) {
+ var runLength = 0;
+ var numDeltas = deltas.length;
+ var pos = offset;
+ while (pos < numDeltas && runLength < 64) {
+ var value = deltas[pos];
+
+ // Within a word-encoded run of deltas, it is easiest to start
+ // a new run (with a different encoding) whenever we encounter
+ // a zero value. For example, the sequence [0x6666, 0, 0x7777]
+ // needs 7 bytes when storing the zero inside the current run
+ // (42 66 66 00 00 77 77), and equally 7 bytes when starting a
+ // new run (40 66 66 80 40 77 77).
+ if (value === 0) {
+ break;
+ }
+
+ // Within a word-encoded run of deltas, a single value in the
+ // range (-128..127) should be encoded within the current run
+ // because it is more compact. For example, the sequence
+ // [0x6666, 2, 0x7777] becomes 7 bytes when storing the value
+ // literally (42 66 66 00 02 77 77), but 8 bytes when starting
+ // a new run (40 66 66 00 02 40 77 77).
+ if (
+ isByteEncodable(value) &&
+ pos + 1 < numDeltas &&
+ isByteEncodable(deltas[pos + 1])
+ ) {
+ break;
+ }
+
+ ++pos;
+ ++runLength;
+ }
+ result.push(0x40 | (runLength - 1));
+ for (var i = offset; i < pos; ++i) {
+ var val = deltas[i];
+ result.push(((val + 0x10000) >> 8) & 0xff, (val + 0x100) & 0xff);
+ }
+ return pos;
+ }
+
+ /**
+ * Encode a list of variation adjustment deltas.
+ *
+ * Variation adjustment deltas are used in ‘gvar’ and ‘cvar’ tables.
+ * They indicate how points (in ‘gvar’) or values (in ‘cvar’) get adjusted
+ * when generating instances of variation fonts.
+ *
+ * @see https://www.microsoft.com/typography/otspec/gvar.htm
+ * @see https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6gvar.html
+ * @param {Array}
+ * @return {Array}
+ */
+ encode.VARDELTAS = function(deltas) {
+ var pos = 0;
+ var result = [];
+ while (pos < deltas.length) {
+ var value = deltas[pos];
+ if (value === 0) {
+ pos = encodeVarDeltaRunAsZeroes(deltas, pos, result);
+ } else if (value >= -128 && value <= 127) {
+ pos = encodeVarDeltaRunAsBytes(deltas, pos, result);
+ } else {
+ pos = encodeVarDeltaRunAsWords(deltas, pos, result);
+ }
+ }
+ return result;
+ };
+
+ // Convert a list of values to a CFF INDEX structure.
+ // The values should be objects containing name / type / value.
+ /**
+ * @param {Array} l
+ * @returns {Array}
+ */
+ encode.INDEX = function(l) {
+ //var offset, offsets, offsetEncoder, encodedOffsets, encodedOffset, data,
+ // i, v;
+ // Because we have to know which data type to use to encode the offsets,
+ // we have to go through the values twice: once to encode the data and
+ // calculate the offsets, then again to encode the offsets using the fitting data type.
+ var offset = 1; // First offset is always 1.
+ var offsets = [offset];
+ var data = [];
+ for (var i = 0; i < l.length; i += 1) {
+ var v = encode.OBJECT(l[i]);
+ Array.prototype.push.apply(data, v);
+ offset += v.length;
+ offsets.push(offset);
+ }
+
+ if (data.length === 0) {
+ return [0, 0];
+ }
+
+ var encodedOffsets = [];
+ var offSize = (1 + Math.floor(Math.log(offset) / Math.log(2)) / 8) | 0;
+ var offsetEncoder = [
+ undefined,
+ encode.BYTE,
+ encode.USHORT,
+ encode.UINT24,
+ encode.ULONG
+ ][offSize];
+ for (var i$1 = 0; i$1 < offsets.length; i$1 += 1) {
+ var encodedOffset = offsetEncoder(offsets[i$1]);
+ Array.prototype.push.apply(encodedOffsets, encodedOffset);
+ }
+
+ return Array.prototype.concat(
+ encode.Card16(l.length),
+ encode.OffSize(offSize),
+ encodedOffsets,
+ data
+ );
+ };
+
+ /**
+ * @param {Array}
+ * @returns {number}
+ */
+ sizeOf.INDEX = function(v) {
+ return encode.INDEX(v).length;
+ };
+
+ /**
+ * Convert an object to a CFF DICT structure.
+ * The keys should be numeric.
+ * The values should be objects containing name / type / value.
+ * @param {Object} m
+ * @returns {Array}
+ */
+ encode.DICT = function(m) {
+ var d = [];
+ var keys = Object.keys(m);
+ var length = keys.length;
+
+ for (var i = 0; i < length; i += 1) {
+ // Object.keys() return string keys, but our keys are always numeric.
+ var k = parseInt(keys[i], 0);
+ var v = m[k];
+ // Value comes before the key.
+ d = d.concat(encode.OPERAND(v.value, v.type));
+ d = d.concat(encode.OPERATOR(k));
+ }
+
+ return d;
+ };
+
+ /**
+ * @param {Object}
+ * @returns {number}
+ */
+ sizeOf.DICT = function(m) {
+ return encode.DICT(m).length;
+ };
+
+ /**
+ * @param {number}
+ * @returns {Array}
+ */
+ encode.OPERATOR = function(v) {
+ if (v < 1200) {
+ return [v];
+ } else {
+ return [12, v - 1200];
+ }
+ };
+
+ /**
+ * @param {Array} v
+ * @param {string}
+ * @returns {Array}
+ */
+ encode.OPERAND = function(v, type) {
+ var d = [];
+ if (Array.isArray(type)) {
+ for (var i = 0; i < type.length; i += 1) {
+ check.argument(
+ v.length === type.length,
+ 'Not enough arguments given for type' + type
+ );
+ d = d.concat(encode.OPERAND(v[i], type[i]));
+ }
+ } else {
+ if (type === 'SID') {
+ d = d.concat(encode.NUMBER(v));
+ } else if (type === 'offset') {
+ // We make it easy for ourselves and always encode offsets as
+ // 4 bytes. This makes offset calculation for the top dict easier.
+ d = d.concat(encode.NUMBER32(v));
+ } else if (type === 'number') {
+ d = d.concat(encode.NUMBER(v));
+ } else if (type === 'real') {
+ d = d.concat(encode.REAL(v));
+ } else {
+ throw new Error('Unknown operand type ' + type);
+ // FIXME Add support for booleans
+ }
+ }
+
+ return d;
+ };
+
+ encode.OP = encode.BYTE;
+ sizeOf.OP = sizeOf.BYTE;
+
+ // memoize charstring encoding using WeakMap if available
+ var wmm = typeof WeakMap === 'function' && new WeakMap();
+
+ /**
+ * Convert a list of CharString operations to bytes.
+ * @param {Array}
+ * @returns {Array}
+ */
+ encode.CHARSTRING = function(ops) {
+ // See encode.MACSTRING for why we don't do "if (wmm && wmm.has(ops))".
+ if (wmm) {
+ var cachedValue = wmm.get(ops);
+ if (cachedValue !== undefined) {
+ return cachedValue;
+ }
+ }
+
+ var d = [];
+ var length = ops.length;
+
+ for (var i = 0; i < length; i += 1) {
+ var op = ops[i];
+ d = d.concat(encode[op.type](op.value));
+ }
+
+ if (wmm) {
+ wmm.set(ops, d);
+ }
+
+ return d;
+ };
+
+ /**
+ * @param {Array}
+ * @returns {number}
+ */
+ sizeOf.CHARSTRING = function(ops) {
+ return encode.CHARSTRING(ops).length;
+ };
+
+ // Utility functions ////////////////////////////////////////////////////////
+
+ /**
+ * Convert an object containing name / type / value to bytes.
+ * @param {Object}
+ * @returns {Array}
+ */
+ encode.OBJECT = function(v) {
+ var encodingFunction = encode[v.type];
+ check.argument(
+ encodingFunction !== undefined,
+ 'No encoding function for type ' + v.type
+ );
+ return encodingFunction(v.value);
+ };
+
+ /**
+ * @param {Object}
+ * @returns {number}
+ */
+ sizeOf.OBJECT = function(v) {
+ var sizeOfFunction = sizeOf[v.type];
+ check.argument(
+ sizeOfFunction !== undefined,
+ 'No sizeOf function for type ' + v.type
+ );
+ return sizeOfFunction(v.value);
+ };
+
+ /**
+ * Convert a table object to bytes.
+ * A table contains a list of fields containing the metadata (name, type and default value).
+ * The table itself has the field values set as attributes.
+ * @param {opentype.Table}
+ * @returns {Array}
+ */
+ encode.TABLE = function(table) {
+ var d = [];
+ var length = table.fields.length;
+ var subtables = [];
+ var subtableOffsets = [];
+
+ for (var i = 0; i < length; i += 1) {
+ var field = table.fields[i];
+ var encodingFunction = encode[field.type];
+ check.argument(
+ encodingFunction !== undefined,
+ 'No encoding function for field type ' +
+ field.type +
+ ' (' +
+ field.name +
+ ')'
+ );
+ var value = table[field.name];
+ if (value === undefined) {
+ value = field.value;
+ }
+
+ var bytes = encodingFunction(value);
+
+ if (field.type === 'TABLE') {
+ subtableOffsets.push(d.length);
+ d = d.concat([0, 0]);
+ subtables.push(bytes);
+ } else {
+ d = d.concat(bytes);
+ }
+ }
+
+ for (var i$1 = 0; i$1 < subtables.length; i$1 += 1) {
+ var o = subtableOffsets[i$1];
+ var offset = d.length;
+ check.argument(offset < 65536, 'Table ' + table.tableName + ' too big.');
+ d[o] = offset >> 8;
+ d[o + 1] = offset & 0xff;
+ d = d.concat(subtables[i$1]);
+ }
+
+ return d;
+ };
+
+ /**
+ * @param {opentype.Table}
+ * @returns {number}
+ */
+ sizeOf.TABLE = function(table) {
+ var numBytes = 0;
+ var length = table.fields.length;
+
+ for (var i = 0; i < length; i += 1) {
+ var field = table.fields[i];
+ var sizeOfFunction = sizeOf[field.type];
+ check.argument(
+ sizeOfFunction !== undefined,
+ 'No sizeOf function for field type ' +
+ field.type +
+ ' (' +
+ field.name +
+ ')'
+ );
+ var value = table[field.name];
+ if (value === undefined) {
+ value = field.value;
+ }
+
+ numBytes += sizeOfFunction(value);
+
+ // Subtables take 2 more bytes for offsets.
+ if (field.type === 'TABLE') {
+ numBytes += 2;
+ }
+ }
+
+ return numBytes;
+ };
+
+ encode.RECORD = encode.TABLE;
+ sizeOf.RECORD = sizeOf.TABLE;
+
+ // Merge in a list of bytes.
+ encode.LITERAL = function(v) {
+ return v;
+ };
+
+ sizeOf.LITERAL = function(v) {
+ return v.length;
+ };
+
+ // Table metadata
+
+ /**
+ * @exports opentype.Table
+ * @class
+ * @param {string} tableName
+ * @param {Array} fields
+ * @param {Object} options
+ * @constructor
+ */
+ function Table(tableName, fields, options) {
+ var this$1 = this;
+
+ for (var i = 0; i < fields.length; i += 1) {
+ var field = fields[i];
+ this$1[field.name] = field.value;
+ }
+
+ this.tableName = tableName;
+ this.fields = fields;
+ if (options) {
+ var optionKeys = Object.keys(options);
+ for (var i$1 = 0; i$1 < optionKeys.length; i$1 += 1) {
+ var k = optionKeys[i$1];
+ var v = options[k];
+ if (this$1[k] !== undefined) {
+ this$1[k] = v;
+ }
+ }
+ }
+ }
+
+ /**
+ * Encodes the table and returns an array of bytes
+ * @return {Array}
+ */
+ Table.prototype.encode = function() {
+ return encode.TABLE(this);
+ };
+
+ /**
+ * Get the size of the table.
+ * @return {number}
+ */
+ Table.prototype.sizeOf = function() {
+ return sizeOf.TABLE(this);
+ };
+
+ /**
+ * @private
+ */
+ function ushortList(itemName, list, count) {
+ if (count === undefined) {
+ count = list.length;
+ }
+ var fields = new Array(list.length + 1);
+ fields[0] = { name: itemName + 'Count', type: 'USHORT', value: count };
+ for (var i = 0; i < list.length; i++) {
+ fields[i + 1] = { name: itemName + i, type: 'USHORT', value: list[i] };
+ }
+ return fields;
+ }
+
+ /**
+ * @private
+ */
+ function tableList(itemName, records, itemCallback) {
+ var count = records.length;
+ var fields = new Array(count + 1);
+ fields[0] = { name: itemName + 'Count', type: 'USHORT', value: count };
+ for (var i = 0; i < count; i++) {
+ fields[i + 1] = {
+ name: itemName + i,
+ type: 'TABLE',
+ value: itemCallback(records[i], i)
+ };
+ }
+ return fields;
+ }
+
+ /**
+ * @private
+ */
+ function recordList(itemName, records, itemCallback) {
+ var count = records.length;
+ var fields = [];
+ fields[0] = { name: itemName + 'Count', type: 'USHORT', value: count };
+ for (var i = 0; i < count; i++) {
+ fields = fields.concat(itemCallback(records[i], i));
+ }
+ return fields;
+ }
+
+ // Common Layout Tables
+
+ /**
+ * @exports opentype.Coverage
+ * @class
+ * @param {opentype.Table}
+ * @constructor
+ * @extends opentype.Table
+ */
+ function Coverage(coverageTable) {
+ if (coverageTable.format === 1) {
+ Table.call(
+ this,
+ 'coverageTable',
+ [{ name: 'coverageFormat', type: 'USHORT', value: 1 }].concat(
+ ushortList('glyph', coverageTable.glyphs)
+ )
+ );
+ } else {
+ check.assert(false, "Can't create coverage table format 2 yet.");
+ }
+ }
+ Coverage.prototype = Object.create(Table.prototype);
+ Coverage.prototype.constructor = Coverage;
+
+ function ScriptList(scriptListTable) {
+ Table.call(
+ this,
+ 'scriptListTable',
+ recordList('scriptRecord', scriptListTable, function(scriptRecord, i) {
+ var script = scriptRecord.script;
+ var defaultLangSys = script.defaultLangSys;
+ check.assert(
+ !!defaultLangSys,
+ 'Unable to write GSUB: script ' +
+ scriptRecord.tag +
+ ' has no default language system.'
+ );
+ return [
+ { name: 'scriptTag' + i, type: 'TAG', value: scriptRecord.tag },
+ {
+ name: 'script' + i,
+ type: 'TABLE',
+ value: new Table(
+ 'scriptTable',
+ [
+ {
+ name: 'defaultLangSys',
+ type: 'TABLE',
+ value: new Table(
+ 'defaultLangSys',
+ [
+ { name: 'lookupOrder', type: 'USHORT', value: 0 },
+ {
+ name: 'reqFeatureIndex',
+ type: 'USHORT',
+ value: defaultLangSys.reqFeatureIndex
+ }
+ ].concat(
+ ushortList('featureIndex', defaultLangSys.featureIndexes)
+ )
+ )
+ }
+ ].concat(
+ recordList('langSys', script.langSysRecords, function(
+ langSysRecord,
+ i
+ ) {
+ var langSys = langSysRecord.langSys;
+ return [
+ {
+ name: 'langSysTag' + i,
+ type: 'TAG',
+ value: langSysRecord.tag
+ },
+ {
+ name: 'langSys' + i,
+ type: 'TABLE',
+ value: new Table(
+ 'langSys',
+ [
+ { name: 'lookupOrder', type: 'USHORT', value: 0 },
+ {
+ name: 'reqFeatureIndex',
+ type: 'USHORT',
+ value: langSys.reqFeatureIndex
+ }
+ ].concat(
+ ushortList('featureIndex', langSys.featureIndexes)
+ )
+ )
+ }
+ ];
+ })
+ )
+ )
+ }
+ ];
+ })
+ );
+ }
+ ScriptList.prototype = Object.create(Table.prototype);
+ ScriptList.prototype.constructor = ScriptList;
+
+ /**
+ * @exports opentype.FeatureList
+ * @class
+ * @param {opentype.Table}
+ * @constructor
+ * @extends opentype.Table
+ */
+ function FeatureList(featureListTable) {
+ Table.call(
+ this,
+ 'featureListTable',
+ recordList('featureRecord', featureListTable, function(featureRecord, i) {
+ var feature = featureRecord.feature;
+ return [
+ { name: 'featureTag' + i, type: 'TAG', value: featureRecord.tag },
+ {
+ name: 'feature' + i,
+ type: 'TABLE',
+ value: new Table(
+ 'featureTable',
+ [
+ {
+ name: 'featureParams',
+ type: 'USHORT',
+ value: feature.featureParams
+ }
+ ].concat(ushortList('lookupListIndex', feature.lookupListIndexes))
+ )
+ }
+ ];
+ })
+ );
+ }
+ FeatureList.prototype = Object.create(Table.prototype);
+ FeatureList.prototype.constructor = FeatureList;
+
+ /**
+ * @exports opentype.LookupList
+ * @class
+ * @param {opentype.Table}
+ * @param {Object}
+ * @constructor
+ * @extends opentype.Table
+ */
+ function LookupList(lookupListTable, subtableMakers) {
+ Table.call(
+ this,
+ 'lookupListTable',
+ tableList('lookup', lookupListTable, function(lookupTable) {
+ var subtableCallback = subtableMakers[lookupTable.lookupType];
+ check.assert(
+ !!subtableCallback,
+ 'Unable to write GSUB lookup type ' +
+ lookupTable.lookupType +
+ ' tables.'
+ );
+ return new Table(
+ 'lookupTable',
+ [
+ {
+ name: 'lookupType',
+ type: 'USHORT',
+ value: lookupTable.lookupType
+ },
+ {
+ name: 'lookupFlag',
+ type: 'USHORT',
+ value: lookupTable.lookupFlag
+ }
+ ].concat(
+ tableList('subtable', lookupTable.subtables, subtableCallback)
+ )
+ );
+ })
+ );
+ }
+ LookupList.prototype = Object.create(Table.prototype);
+ LookupList.prototype.constructor = LookupList;
+
+ // Record = same as Table, but inlined (a Table has an offset and its data is further in the stream)
+ // Don't use offsets inside Records (probable bug), only in Tables.
+ var table = {
+ Table: Table,
+ Record: Table,
+ Coverage: Coverage,
+ ScriptList: ScriptList,
+ FeatureList: FeatureList,
+ LookupList: LookupList,
+ ushortList: ushortList,
+ tableList: tableList,
+ recordList: recordList
+ };
+
+ // Parsing utility functions
+
+ // Retrieve an unsigned byte from the DataView.
+ function getByte(dataView, offset) {
+ return dataView.getUint8(offset);
+ }
+
+ // Retrieve an unsigned 16-bit short from the DataView.
+ // The value is stored in big endian.
+ function getUShort(dataView, offset) {
+ return dataView.getUint16(offset, false);
+ }
+
+ // Retrieve a signed 16-bit short from the DataView.
+ // The value is stored in big endian.
+ function getShort(dataView, offset) {
+ return dataView.getInt16(offset, false);
+ }
+
+ // Retrieve an unsigned 32-bit long from the DataView.
+ // The value is stored in big endian.
+ function getULong(dataView, offset) {
+ return dataView.getUint32(offset, false);
+ }
+
+ // Retrieve a 32-bit signed fixed-point number (16.16) from the DataView.
+ // The value is stored in big endian.
+ function getFixed(dataView, offset) {
+ var decimal = dataView.getInt16(offset, false);
+ var fraction = dataView.getUint16(offset + 2, false);
+ return decimal + fraction / 65535;
+ }
+
+ // Retrieve a 4-character tag from the DataView.
+ // Tags are used to identify tables.
+ function getTag(dataView, offset) {
+ var tag = '';
+ for (var i = offset; i < offset + 4; i += 1) {
+ tag += String.fromCharCode(dataView.getInt8(i));
+ }
+
+ return tag;
+ }
+
+ // Retrieve an offset from the DataView.
+ // Offsets are 1 to 4 bytes in length, depending on the offSize argument.
+ function getOffset(dataView, offset, offSize) {
+ var v = 0;
+ for (var i = 0; i < offSize; i += 1) {
+ v <<= 8;
+ v += dataView.getUint8(offset + i);
+ }
+
+ return v;
+ }
+
+ // Retrieve a number of bytes from start offset to the end offset from the DataView.
+ function getBytes(dataView, startOffset, endOffset) {
+ var bytes = [];
+ for (var i = startOffset; i < endOffset; i += 1) {
+ bytes.push(dataView.getUint8(i));
+ }
+
+ return bytes;
+ }
+
+ // Convert the list of bytes to a string.
+ function bytesToString(bytes) {
+ var s = '';
+ for (var i = 0; i < bytes.length; i += 1) {
+ s += String.fromCharCode(bytes[i]);
+ }
+
+ return s;
+ }
+
+ var typeOffsets = {
+ byte: 1,
+ uShort: 2,
+ short: 2,
+ uLong: 4,
+ fixed: 4,
+ longDateTime: 8,
+ tag: 4
+ };
+
+ // A stateful parser that changes the offset whenever a value is retrieved.
+ // The data is a DataView.
+ function Parser(data, offset) {
+ this.data = data;
+ this.offset = offset;
+ this.relativeOffset = 0;
+ }
+
+ Parser.prototype.parseByte = function() {
+ var v = this.data.getUint8(this.offset + this.relativeOffset);
+ this.relativeOffset += 1;
+ return v;
+ };
+
+ Parser.prototype.parseChar = function() {
+ var v = this.data.getInt8(this.offset + this.relativeOffset);
+ this.relativeOffset += 1;
+ return v;
+ };
+
+ Parser.prototype.parseCard8 = Parser.prototype.parseByte;
+
+ Parser.prototype.parseUShort = function() {
+ var v = this.data.getUint16(this.offset + this.relativeOffset);
+ this.relativeOffset += 2;
+ return v;
+ };
+
+ Parser.prototype.parseCard16 = Parser.prototype.parseUShort;
+ Parser.prototype.parseSID = Parser.prototype.parseUShort;
+ Parser.prototype.parseOffset16 = Parser.prototype.parseUShort;
+
+ Parser.prototype.parseShort = function() {
+ var v = this.data.getInt16(this.offset + this.relativeOffset);
+ this.relativeOffset += 2;
+ return v;
+ };
+
+ Parser.prototype.parseF2Dot14 = function() {
+ var v = this.data.getInt16(this.offset + this.relativeOffset) / 16384;
+ this.relativeOffset += 2;
+ return v;
+ };
+
+ Parser.prototype.parseULong = function() {
+ var v = getULong(this.data, this.offset + this.relativeOffset);
+ this.relativeOffset += 4;
+ return v;
+ };
+
+ Parser.prototype.parseOffset32 = Parser.prototype.parseULong;
+
+ Parser.prototype.parseFixed = function() {
+ var v = getFixed(this.data, this.offset + this.relativeOffset);
+ this.relativeOffset += 4;
+ return v;
+ };
+
+ Parser.prototype.parseString = function(length) {
+ var dataView = this.data;
+ var offset = this.offset + this.relativeOffset;
+ var string = '';
+ this.relativeOffset += length;
+ for (var i = 0; i < length; i++) {
+ string += String.fromCharCode(dataView.getUint8(offset + i));
+ }
+
+ return string;
+ };
+
+ Parser.prototype.parseTag = function() {
+ return this.parseString(4);
+ };
+
+ // LONGDATETIME is a 64-bit integer.
+ // JavaScript and unix timestamps traditionally use 32 bits, so we
+ // only take the last 32 bits.
+ // + Since until 2038 those bits will be filled by zeros we can ignore them.
+ Parser.prototype.parseLongDateTime = function() {
+ var v = getULong(this.data, this.offset + this.relativeOffset + 4);
+ // Subtract seconds between 01/01/1904 and 01/01/1970
+ // to convert Apple Mac timestamp to Standard Unix timestamp
+ v -= 2082844800;
+ this.relativeOffset += 8;
+ return v;
+ };
+
+ Parser.prototype.parseVersion = function(minorBase) {
+ var major = getUShort(this.data, this.offset + this.relativeOffset);
+
+ // How to interpret the minor version is very vague in the spec. 0x5000 is 5, 0x1000 is 1
+ // Default returns the correct number if minor = 0xN000 where N is 0-9
+ // Set minorBase to 1 for tables that use minor = N where N is 0-9
+ var minor = getUShort(this.data, this.offset + this.relativeOffset + 2);
+ this.relativeOffset += 4;
+ if (minorBase === undefined) {
+ minorBase = 0x1000;
+ }
+ return major + minor / minorBase / 10;
+ };
+
+ Parser.prototype.skip = function(type, amount) {
+ if (amount === undefined) {
+ amount = 1;
+ }
+
+ this.relativeOffset += typeOffsets[type] * amount;
+ };
+
+ ///// Parsing lists and records ///////////////////////////////
+
+ // Parse a list of 32 bit unsigned integers.
+ Parser.prototype.parseULongList = function(count) {
+ if (count === undefined) {
+ count = this.parseULong();
+ }
+ var offsets = new Array(count);
+ var dataView = this.data;
+ var offset = this.offset + this.relativeOffset;
+ for (var i = 0; i < count; i++) {
+ offsets[i] = dataView.getUint32(offset);
+ offset += 4;
+ }
+
+ this.relativeOffset += count * 4;
+ return offsets;
+ };
+
+ // Parse a list of 16 bit unsigned integers. The length of the list can be read on the stream
+ // or provided as an argument.
+ Parser.prototype.parseOffset16List = Parser.prototype.parseUShortList = function(
+ count
+ ) {
+ if (count === undefined) {
+ count = this.parseUShort();
+ }
+ var offsets = new Array(count);
+ var dataView = this.data;
+ var offset = this.offset + this.relativeOffset;
+ for (var i = 0; i < count; i++) {
+ offsets[i] = dataView.getUint16(offset);
+ offset += 2;
+ }
+
+ this.relativeOffset += count * 2;
+ return offsets;
+ };
+
+ // Parses a list of 16 bit signed integers.
+ Parser.prototype.parseShortList = function(count) {
+ var list = new Array(count);
+ var dataView = this.data;
+ var offset = this.offset + this.relativeOffset;
+ for (var i = 0; i < count; i++) {
+ list[i] = dataView.getInt16(offset);
+ offset += 2;
+ }
+
+ this.relativeOffset += count * 2;
+ return list;
+ };
+
+ // Parses a list of bytes.
+ Parser.prototype.parseByteList = function(count) {
+ var list = new Array(count);
+ var dataView = this.data;
+ var offset = this.offset + this.relativeOffset;
+ for (var i = 0; i < count; i++) {
+ list[i] = dataView.getUint8(offset++);
+ }
+
+ this.relativeOffset += count;
+ return list;
+ };
+
+ /**
+ * Parse a list of items.
+ * Record count is optional, if omitted it is read from the stream.
+ * itemCallback is one of the Parser methods.
+ */
+ Parser.prototype.parseList = function(count, itemCallback) {
+ var this$1 = this;
+
+ if (!itemCallback) {
+ itemCallback = count;
+ count = this.parseUShort();
+ }
+ var list = new Array(count);
+ for (var i = 0; i < count; i++) {
+ list[i] = itemCallback.call(this$1);
+ }
+ return list;
+ };
+
+ Parser.prototype.parseList32 = function(count, itemCallback) {
+ var this$1 = this;
+
+ if (!itemCallback) {
+ itemCallback = count;
+ count = this.parseULong();
+ }
+ var list = new Array(count);
+ for (var i = 0; i < count; i++) {
+ list[i] = itemCallback.call(this$1);
+ }
+ return list;
+ };
+
+ /**
+ * Parse a list of records.
+ * Record count is optional, if omitted it is read from the stream.
+ * Example of recordDescription: { sequenceIndex: Parser.uShort, lookupListIndex: Parser.uShort }
+ */
+ Parser.prototype.parseRecordList = function(count, recordDescription) {
+ var this$1 = this;
+
+ // If the count argument is absent, read it in the stream.
+ if (!recordDescription) {
+ recordDescription = count;
+ count = this.parseUShort();
+ }
+ var records = new Array(count);
+ var fields = Object.keys(recordDescription);
+ for (var i = 0; i < count; i++) {
+ var rec = {};
+ for (var j = 0; j < fields.length; j++) {
+ var fieldName = fields[j];
+ var fieldType = recordDescription[fieldName];
+ rec[fieldName] = fieldType.call(this$1);
+ }
+ records[i] = rec;
+ }
+ return records;
+ };
+
+ Parser.prototype.parseRecordList32 = function(count, recordDescription) {
+ var this$1 = this;
+
+ // If the count argument is absent, read it in the stream.
+ if (!recordDescription) {
+ recordDescription = count;
+ count = this.parseULong();
+ }
+ var records = new Array(count);
+ var fields = Object.keys(recordDescription);
+ for (var i = 0; i < count; i++) {
+ var rec = {};
+ for (var j = 0; j < fields.length; j++) {
+ var fieldName = fields[j];
+ var fieldType = recordDescription[fieldName];
+ rec[fieldName] = fieldType.call(this$1);
+ }
+ records[i] = rec;
+ }
+ return records;
+ };
+
+ // Parse a data structure into an object
+ // Example of description: { sequenceIndex: Parser.uShort, lookupListIndex: Parser.uShort }
+ Parser.prototype.parseStruct = function(description) {
+ var this$1 = this;
+
+ if (typeof description === 'function') {
+ return description.call(this);
+ } else {
+ var fields = Object.keys(description);
+ var struct = {};
+ for (var j = 0; j < fields.length; j++) {
+ var fieldName = fields[j];
+ var fieldType = description[fieldName];
+ struct[fieldName] = fieldType.call(this$1);
+ }
+ return struct;
+ }
+ };
+
+ /**
+ * Parse a GPOS valueRecord
+ * https://docs.microsoft.com/en-us/typography/opentype/spec/gpos#value-record
+ * valueFormat is optional, if omitted it is read from the stream.
+ */
+ Parser.prototype.parseValueRecord = function(valueFormat) {
+ if (valueFormat === undefined) {
+ valueFormat = this.parseUShort();
+ }
+ if (valueFormat === 0) {
+ // valueFormat2 in kerning pairs is most often 0
+ // in this case return undefined instead of an empty object, to save space
+ return;
+ }
+ var valueRecord = {};
+
+ if (valueFormat & 0x0001) {
+ valueRecord.xPlacement = this.parseShort();
+ }
+ if (valueFormat & 0x0002) {
+ valueRecord.yPlacement = this.parseShort();
+ }
+ if (valueFormat & 0x0004) {
+ valueRecord.xAdvance = this.parseShort();
+ }
+ if (valueFormat & 0x0008) {
+ valueRecord.yAdvance = this.parseShort();
+ }
+
+ // Device table (non-variable font) / VariationIndex table (variable font) not supported
+ // https://docs.microsoft.com/fr-fr/typography/opentype/spec/chapter2#devVarIdxTbls
+ if (valueFormat & 0x0010) {
+ valueRecord.xPlaDevice = undefined;
+ this.parseShort();
+ }
+ if (valueFormat & 0x0020) {
+ valueRecord.yPlaDevice = undefined;
+ this.parseShort();
+ }
+ if (valueFormat & 0x0040) {
+ valueRecord.xAdvDevice = undefined;
+ this.parseShort();
+ }
+ if (valueFormat & 0x0080) {
+ valueRecord.yAdvDevice = undefined;
+ this.parseShort();
+ }
+
+ return valueRecord;
+ };
+
+ /**
+ * Parse a list of GPOS valueRecords
+ * https://docs.microsoft.com/en-us/typography/opentype/spec/gpos#value-record
+ * valueFormat and valueCount are read from the stream.
+ */
+ Parser.prototype.parseValueRecordList = function() {
+ var this$1 = this;
+
+ var valueFormat = this.parseUShort();
+ var valueCount = this.parseUShort();
+ var values = new Array(valueCount);
+ for (var i = 0; i < valueCount; i++) {
+ values[i] = this$1.parseValueRecord(valueFormat);
+ }
+ return values;
+ };
+
+ Parser.prototype.parsePointer = function(description) {
+ var structOffset = this.parseOffset16();
+ if (structOffset > 0) {
+ // NULL offset => return undefined
+ return new Parser(this.data, this.offset + structOffset).parseStruct(
+ description
+ );
+ }
+ return undefined;
+ };
+
+ Parser.prototype.parsePointer32 = function(description) {
+ var structOffset = this.parseOffset32();
+ if (structOffset > 0) {
+ // NULL offset => return undefined
+ return new Parser(this.data, this.offset + structOffset).parseStruct(
+ description
+ );
+ }
+ return undefined;
+ };
+
+ /**
+ * Parse a list of offsets to lists of 16-bit integers,
+ * or a list of offsets to lists of offsets to any kind of items.
+ * If itemCallback is not provided, a list of list of UShort is assumed.
+ * If provided, itemCallback is called on each item and must parse the item.
+ * See examples in tables/gsub.js
+ */
+ Parser.prototype.parseListOfLists = function(itemCallback) {
+ var this$1 = this;
+
+ var offsets = this.parseOffset16List();
+ var count = offsets.length;
+ var relativeOffset = this.relativeOffset;
+ var list = new Array(count);
+ for (var i = 0; i < count; i++) {
+ var start = offsets[i];
+ if (start === 0) {
+ // NULL offset
+ // Add i as owned property to list. Convenient with assert.
+ list[i] = undefined;
+ continue;
+ }
+ this$1.relativeOffset = start;
+ if (itemCallback) {
+ var subOffsets = this$1.parseOffset16List();
+ var subList = new Array(subOffsets.length);
+ for (var j = 0; j < subOffsets.length; j++) {
+ this$1.relativeOffset = start + subOffsets[j];
+ subList[j] = itemCallback.call(this$1);
+ }
+ list[i] = subList;
+ } else {
+ list[i] = this$1.parseUShortList();
+ }
+ }
+ this.relativeOffset = relativeOffset;
+ return list;
+ };
+
+ ///// Complex tables parsing //////////////////////////////////
+
+ // Parse a coverage table in a GSUB, GPOS or GDEF table.
+ // https://www.microsoft.com/typography/OTSPEC/chapter2.htm
+ // parser.offset must point to the start of the table containing the coverage.
+ Parser.prototype.parseCoverage = function() {
+ var this$1 = this;
+
+ var startOffset = this.offset + this.relativeOffset;
+ var format = this.parseUShort();
+ var count = this.parseUShort();
+ if (format === 1) {
+ return {
+ format: 1,
+ glyphs: this.parseUShortList(count)
+ };
+ } else if (format === 2) {
+ var ranges = new Array(count);
+ for (var i = 0; i < count; i++) {
+ ranges[i] = {
+ start: this$1.parseUShort(),
+ end: this$1.parseUShort(),
+ index: this$1.parseUShort()
+ };
+ }
+ return {
+ format: 2,
+ ranges: ranges
+ };
+ }
+ throw new Error(
+ '0x' + startOffset.toString(16) + ': Coverage format must be 1 or 2.'
+ );
+ };
+
+ // Parse a Class Definition Table in a GSUB, GPOS or GDEF table.
+ // https://www.microsoft.com/typography/OTSPEC/chapter2.htm
+ Parser.prototype.parseClassDef = function() {
+ var startOffset = this.offset + this.relativeOffset;
+ var format = this.parseUShort();
+ if (format === 1) {
+ return {
+ format: 1,
+ startGlyph: this.parseUShort(),
+ classes: this.parseUShortList()
+ };
+ } else if (format === 2) {
+ return {
+ format: 2,
+ ranges: this.parseRecordList({
+ start: Parser.uShort,
+ end: Parser.uShort,
+ classId: Parser.uShort
+ })
+ };
+ }
+ throw new Error(
+ '0x' + startOffset.toString(16) + ': ClassDef format must be 1 or 2.'
+ );
+ };
+
+ ///// Static methods ///////////////////////////////////
+ // These convenience methods can be used as callbacks and should be called with "this" context set to a Parser instance.
+
+ Parser.list = function(count, itemCallback) {
+ return function() {
+ return this.parseList(count, itemCallback);
+ };
+ };
+
+ Parser.list32 = function(count, itemCallback) {
+ return function() {
+ return this.parseList32(count, itemCallback);
+ };
+ };
+
+ Parser.recordList = function(count, recordDescription) {
+ return function() {
+ return this.parseRecordList(count, recordDescription);
+ };
+ };
+
+ Parser.recordList32 = function(count, recordDescription) {
+ return function() {
+ return this.parseRecordList32(count, recordDescription);
+ };
+ };
+
+ Parser.pointer = function(description) {
+ return function() {
+ return this.parsePointer(description);
+ };
+ };
+
+ Parser.pointer32 = function(description) {
+ return function() {
+ return this.parsePointer32(description);
+ };
+ };
+
+ Parser.tag = Parser.prototype.parseTag;
+ Parser.byte = Parser.prototype.parseByte;
+ Parser.uShort = Parser.offset16 = Parser.prototype.parseUShort;
+ Parser.uShortList = Parser.prototype.parseUShortList;
+ Parser.uLong = Parser.offset32 = Parser.prototype.parseULong;
+ Parser.uLongList = Parser.prototype.parseULongList;
+ Parser.struct = Parser.prototype.parseStruct;
+ Parser.coverage = Parser.prototype.parseCoverage;
+ Parser.classDef = Parser.prototype.parseClassDef;
+
+ ///// Script, Feature, Lookup lists ///////////////////////////////////////////////
+ // https://www.microsoft.com/typography/OTSPEC/chapter2.htm
+
+ var langSysTable = {
+ reserved: Parser.uShort,
+ reqFeatureIndex: Parser.uShort,
+ featureIndexes: Parser.uShortList
+ };
+
+ Parser.prototype.parseScriptList = function() {
+ return (
+ this.parsePointer(
+ Parser.recordList({
+ tag: Parser.tag,
+ script: Parser.pointer({
+ defaultLangSys: Parser.pointer(langSysTable),
+ langSysRecords: Parser.recordList({
+ tag: Parser.tag,
+ langSys: Parser.pointer(langSysTable)
+ })
+ })
+ })
+ ) || []
+ );
+ };
+
+ Parser.prototype.parseFeatureList = function() {
+ return (
+ this.parsePointer(
+ Parser.recordList({
+ tag: Parser.tag,
+ feature: Parser.pointer({
+ featureParams: Parser.offset16,
+ lookupListIndexes: Parser.uShortList
+ })
+ })
+ ) || []
+ );
+ };
+
+ Parser.prototype.parseLookupList = function(lookupTableParsers) {
+ return (
+ this.parsePointer(
+ Parser.list(
+ Parser.pointer(function() {
+ var lookupType = this.parseUShort();
+ check.argument(
+ 1 <= lookupType && lookupType <= 9,
+ 'GPOS/GSUB lookup type ' + lookupType + ' unknown.'
+ );
+ var lookupFlag = this.parseUShort();
+ var useMarkFilteringSet = lookupFlag & 0x10;
+ return {
+ lookupType: lookupType,
+ lookupFlag: lookupFlag,
+ subtables: this.parseList(
+ Parser.pointer(lookupTableParsers[lookupType])
+ ),
+ markFilteringSet: useMarkFilteringSet
+ ? this.parseUShort()
+ : undefined
+ };
+ })
+ )
+ ) || []
+ );
+ };
+
+ Parser.prototype.parseFeatureVariationsList = function() {
+ return (
+ this.parsePointer32(function() {
+ var majorVersion = this.parseUShort();
+ var minorVersion = this.parseUShort();
+ check.argument(
+ majorVersion === 1 && minorVersion < 1,
+ 'GPOS/GSUB feature variations table unknown.'
+ );
+ var featureVariations = this.parseRecordList32({
+ conditionSetOffset: Parser.offset32,
+ featureTableSubstitutionOffset: Parser.offset32
+ });
+ return featureVariations;
+ }) || []
+ );
+ };
+
+ var parse = {
+ getByte: getByte,
+ getCard8: getByte,
+ getUShort: getUShort,
+ getCard16: getUShort,
+ getShort: getShort,
+ getULong: getULong,
+ getFixed: getFixed,
+ getTag: getTag,
+ getOffset: getOffset,
+ getBytes: getBytes,
+ bytesToString: bytesToString,
+ Parser: Parser
+ };
+
+ // The `cmap` table stores the mappings from characters to glyphs.
+
+ function parseCmapTableFormat12(cmap, p) {
+ //Skip reserved.
+ p.parseUShort();
+
+ // Length in bytes of the sub-tables.
+ cmap.length = p.parseULong();
+ cmap.language = p.parseULong();
+
+ var groupCount;
+ cmap.groupCount = groupCount = p.parseULong();
+ cmap.glyphIndexMap = {};
+
+ for (var i = 0; i < groupCount; i += 1) {
+ var startCharCode = p.parseULong();
+ var endCharCode = p.parseULong();
+ var startGlyphId = p.parseULong();
+
+ for (var c = startCharCode; c <= endCharCode; c += 1) {
+ cmap.glyphIndexMap[c] = startGlyphId;
+ startGlyphId++;
+ }
+ }
+ }
+
+ function parseCmapTableFormat4(cmap, p, data, start, offset) {
+ // Length in bytes of the sub-tables.
+ cmap.length = p.parseUShort();
+ cmap.language = p.parseUShort();
+
+ // segCount is stored x 2.
+ var segCount;
+ cmap.segCount = segCount = p.parseUShort() >> 1;
+
+ // Skip searchRange, entrySelector, rangeShift.
+ p.skip('uShort', 3);
+
+ // The "unrolled" mapping from character codes to glyph indices.
+ cmap.glyphIndexMap = {};
+ var endCountParser = new parse.Parser(data, start + offset + 14);
+ var startCountParser = new parse.Parser(
+ data,
+ start + offset + 16 + segCount * 2
+ );
+ var idDeltaParser = new parse.Parser(
+ data,
+ start + offset + 16 + segCount * 4
+ );
+ var idRangeOffsetParser = new parse.Parser(
+ data,
+ start + offset + 16 + segCount * 6
+ );
+ var glyphIndexOffset = start + offset + 16 + segCount * 8;
+ for (var i = 0; i < segCount - 1; i += 1) {
+ var glyphIndex = void 0;
+ var endCount = endCountParser.parseUShort();
+ var startCount = startCountParser.parseUShort();
+ var idDelta = idDeltaParser.parseShort();
+ var idRangeOffset = idRangeOffsetParser.parseUShort();
+ for (var c = startCount; c <= endCount; c += 1) {
+ if (idRangeOffset !== 0) {
+ // The idRangeOffset is relative to the current position in the idRangeOffset array.
+ // Take the current offset in the idRangeOffset array.
+ glyphIndexOffset =
+ idRangeOffsetParser.offset + idRangeOffsetParser.relativeOffset - 2;
+
+ // Add the value of the idRangeOffset, which will move us into the glyphIndex array.
+ glyphIndexOffset += idRangeOffset;
+
+ // Then add the character index of the current segment, multiplied by 2 for USHORTs.
+ glyphIndexOffset += (c - startCount) * 2;
+ glyphIndex = parse.getUShort(data, glyphIndexOffset);
+ if (glyphIndex !== 0) {
+ glyphIndex = (glyphIndex + idDelta) & 0xffff;
+ }
+ } else {
+ glyphIndex = (c + idDelta) & 0xffff;
+ }
+
+ cmap.glyphIndexMap[c] = glyphIndex;
+ }
+ }
+ }
+
+ // Parse the `cmap` table. This table stores the mappings from characters to glyphs.
+ // There are many available formats, but we only support the Windows format 4 and 12.
+ // This function returns a `CmapEncoding` object or null if no supported format could be found.
+ function parseCmapTable(data, start) {
+ var cmap = {};
+ cmap.version = parse.getUShort(data, start);
+ check.argument(cmap.version === 0, 'cmap table version should be 0.');
+
+ // The cmap table can contain many sub-tables, each with their own format.
+ // We're only interested in a "platform 0" (Unicode format) and "platform 3" (Windows format) table.
+ cmap.numTables = parse.getUShort(data, start + 2);
+ var offset = -1;
+ for (var i = cmap.numTables - 1; i >= 0; i -= 1) {
+ var platformId = parse.getUShort(data, start + 4 + i * 8);
+ var encodingId = parse.getUShort(data, start + 4 + i * 8 + 2);
+ if (
+ (platformId === 3 &&
+ (encodingId === 0 || encodingId === 1 || encodingId === 10)) ||
+ (platformId === 0 &&
+ (encodingId === 0 ||
+ encodingId === 1 ||
+ encodingId === 2 ||
+ encodingId === 3 ||
+ encodingId === 4))
+ ) {
+ offset = parse.getULong(data, start + 4 + i * 8 + 4);
+ break;
+ }
+ }
+
+ if (offset === -1) {
+ // There is no cmap table in the font that we support.
+ throw new Error('No valid cmap sub-tables found.');
+ }
+
+ var p = new parse.Parser(data, start + offset);
+ cmap.format = p.parseUShort();
+
+ if (cmap.format === 12) {
+ parseCmapTableFormat12(cmap, p);
+ } else if (cmap.format === 4) {
+ parseCmapTableFormat4(cmap, p, data, start, offset);
+ } else {
+ throw new Error(
+ 'Only format 4 and 12 cmap tables are supported (found format ' +
+ cmap.format +
+ ').'
+ );
+ }
+
+ return cmap;
+ }
+
+ function addSegment(t, code, glyphIndex) {
+ t.segments.push({
+ end: code,
+ start: code,
+ delta: -(code - glyphIndex),
+ offset: 0,
+ glyphIndex: glyphIndex
+ });
+ }
+
+ function addTerminatorSegment(t) {
+ t.segments.push({
+ end: 0xffff,
+ start: 0xffff,
+ delta: 1,
+ offset: 0
+ });
+ }
+
+ // Make cmap table, format 4 by default, 12 if needed only
+ function makeCmapTable(glyphs) {
+ // Plan 0 is the base Unicode Plan but emojis, for example are on another plan, and needs cmap 12 format (with 32bit)
+ var isPlan0Only = true;
+ var i;
+
+ // Check if we need to add cmap format 12 or if format 4 only is fine
+ for (i = glyphs.length - 1; i > 0; i -= 1) {
+ var g = glyphs.get(i);
+ if (g.unicode > 65535) {
+ console.log('Adding CMAP format 12 (needed!)');
+ isPlan0Only = false;
+ break;
+ }
+ }
+
+ var cmapTable = [
+ { name: 'version', type: 'USHORT', value: 0 },
+ { name: 'numTables', type: 'USHORT', value: isPlan0Only ? 1 : 2 },
+
+ // CMAP 4 header
+ { name: 'platformID', type: 'USHORT', value: 3 },
+ { name: 'encodingID', type: 'USHORT', value: 1 },
+ { name: 'offset', type: 'ULONG', value: isPlan0Only ? 12 : 12 + 8 }
+ ];
+
+ if (!isPlan0Only) {
+ cmapTable = cmapTable.concat([
+ // CMAP 12 header
+ { name: 'cmap12PlatformID', type: 'USHORT', value: 3 }, // We encode only for PlatformID = 3 (Windows) because it is supported everywhere
+ { name: 'cmap12EncodingID', type: 'USHORT', value: 10 },
+ { name: 'cmap12Offset', type: 'ULONG', value: 0 }
+ ]);
+ }
+
+ cmapTable = cmapTable.concat([
+ // CMAP 4 Subtable
+ { name: 'format', type: 'USHORT', value: 4 },
+ { name: 'cmap4Length', type: 'USHORT', value: 0 },
+ { name: 'language', type: 'USHORT', value: 0 },
+ { name: 'segCountX2', type: 'USHORT', value: 0 },
+ { name: 'searchRange', type: 'USHORT', value: 0 },
+ { name: 'entrySelector', type: 'USHORT', value: 0 },
+ { name: 'rangeShift', type: 'USHORT', value: 0 }
+ ]);
+
+ var t = new table.Table('cmap', cmapTable);
+
+ t.segments = [];
+ for (i = 0; i < glyphs.length; i += 1) {
+ var glyph = glyphs.get(i);
+ for (var j = 0; j < glyph.unicodes.length; j += 1) {
+ addSegment(t, glyph.unicodes[j], i);
+ }
+
+ t.segments = t.segments.sort(function(a, b) {
+ return a.start - b.start;
+ });
+ }
+
+ addTerminatorSegment(t);
+
+ var segCount = t.segments.length;
+ var segCountToRemove = 0;
+
+ // CMAP 4
+ // Set up parallel segment arrays.
+ var endCounts = [];
+ var startCounts = [];
+ var idDeltas = [];
+ var idRangeOffsets = [];
+ var glyphIds = [];
+
+ // CMAP 12
+ var cmap12Groups = [];
+
+ // Reminder this loop is not following the specification at 100%
+ // The specification -> find suites of characters and make a group
+ // Here we're doing one group for each letter
+ // Doing as the spec can save 8 times (or more) space
+ for (i = 0; i < segCount; i += 1) {
+ var segment = t.segments[i];
+
+ // CMAP 4
+ if (segment.end <= 65535 && segment.start <= 65535) {
+ endCounts = endCounts.concat({
+ name: 'end_' + i,
+ type: 'USHORT',
+ value: segment.end
+ });
+ startCounts = startCounts.concat({
+ name: 'start_' + i,
+ type: 'USHORT',
+ value: segment.start
+ });
+ idDeltas = idDeltas.concat({
+ name: 'idDelta_' + i,
+ type: 'SHORT',
+ value: segment.delta
+ });
+ idRangeOffsets = idRangeOffsets.concat({
+ name: 'idRangeOffset_' + i,
+ type: 'USHORT',
+ value: segment.offset
+ });
+ if (segment.glyphId !== undefined) {
+ glyphIds = glyphIds.concat({
+ name: 'glyph_' + i,
+ type: 'USHORT',
+ value: segment.glyphId
+ });
+ }
+ } else {
+ // Skip Unicode > 65535 (16bit unsigned max) for CMAP 4, will be added in CMAP 12
+ segCountToRemove += 1;
+ }
+
+ // CMAP 12
+ // Skip Terminator Segment
+ if (!isPlan0Only && segment.glyphIndex !== undefined) {
+ cmap12Groups = cmap12Groups.concat({
+ name: 'cmap12Start_' + i,
+ type: 'ULONG',
+ value: segment.start
+ });
+ cmap12Groups = cmap12Groups.concat({
+ name: 'cmap12End_' + i,
+ type: 'ULONG',
+ value: segment.end
+ });
+ cmap12Groups = cmap12Groups.concat({
+ name: 'cmap12Glyph_' + i,
+ type: 'ULONG',
+ value: segment.glyphIndex
+ });
+ }
+ }
+
+ // CMAP 4 Subtable
+ t.segCountX2 = (segCount - segCountToRemove) * 2;
+ t.searchRange =
+ Math.pow(
+ 2,
+ Math.floor(Math.log(segCount - segCountToRemove) / Math.log(2))
+ ) * 2;
+ t.entrySelector = Math.log(t.searchRange / 2) / Math.log(2);
+ t.rangeShift = t.segCountX2 - t.searchRange;
+
+ t.fields = t.fields.concat(endCounts);
+ t.fields.push({ name: 'reservedPad', type: 'USHORT', value: 0 });
+ t.fields = t.fields.concat(startCounts);
+ t.fields = t.fields.concat(idDeltas);
+ t.fields = t.fields.concat(idRangeOffsets);
+ t.fields = t.fields.concat(glyphIds);
+
+ t.cmap4Length =
+ 14 + // Subtable header
+ endCounts.length * 2 +
+ 2 + // reservedPad
+ startCounts.length * 2 +
+ idDeltas.length * 2 +
+ idRangeOffsets.length * 2 +
+ glyphIds.length * 2;
+
+ if (!isPlan0Only) {
+ // CMAP 12 Subtable
+ var cmap12Length =
+ 16 + // Subtable header
+ cmap12Groups.length * 4;
+
+ t.cmap12Offset = 12 + 2 * 2 + 4 + t.cmap4Length;
+ t.fields = t.fields.concat([
+ { name: 'cmap12Format', type: 'USHORT', value: 12 },
+ { name: 'cmap12Reserved', type: 'USHORT', value: 0 },
+ { name: 'cmap12Length', type: 'ULONG', value: cmap12Length },
+ { name: 'cmap12Language', type: 'ULONG', value: 0 },
+ { name: 'cmap12nGroups', type: 'ULONG', value: cmap12Groups.length / 3 }
+ ]);
+
+ t.fields = t.fields.concat(cmap12Groups);
+ }
+
+ return t;
+ }
+
+ var cmap = { parse: parseCmapTable, make: makeCmapTable };
+
+ // Glyph encoding
+
+ var cffStandardStrings = [
+ '.notdef',
+ 'space',
+ 'exclam',
+ 'quotedbl',
+ 'numbersign',
+ 'dollar',
+ 'percent',
+ 'ampersand',
+ 'quoteright',
+ 'parenleft',
+ 'parenright',
+ 'asterisk',
+ 'plus',
+ 'comma',
+ 'hyphen',
+ 'period',
+ 'slash',
+ 'zero',
+ 'one',
+ 'two',
+ 'three',
+ 'four',
+ 'five',
+ 'six',
+ 'seven',
+ 'eight',
+ 'nine',
+ 'colon',
+ 'semicolon',
+ 'less',
+ 'equal',
+ 'greater',
+ 'question',
+ 'at',
+ 'A',
+ 'B',
+ 'C',
+ 'D',
+ 'E',
+ 'F',
+ 'G',
+ 'H',
+ 'I',
+ 'J',
+ 'K',
+ 'L',
+ 'M',
+ 'N',
+ 'O',
+ 'P',
+ 'Q',
+ 'R',
+ 'S',
+ 'T',
+ 'U',
+ 'V',
+ 'W',
+ 'X',
+ 'Y',
+ 'Z',
+ 'bracketleft',
+ 'backslash',
+ 'bracketright',
+ 'asciicircum',
+ 'underscore',
+ 'quoteleft',
+ 'a',
+ 'b',
+ 'c',
+ 'd',
+ 'e',
+ 'f',
+ 'g',
+ 'h',
+ 'i',
+ 'j',
+ 'k',
+ 'l',
+ 'm',
+ 'n',
+ 'o',
+ 'p',
+ 'q',
+ 'r',
+ 's',
+ 't',
+ 'u',
+ 'v',
+ 'w',
+ 'x',
+ 'y',
+ 'z',
+ 'braceleft',
+ 'bar',
+ 'braceright',
+ 'asciitilde',
+ 'exclamdown',
+ 'cent',
+ 'sterling',
+ 'fraction',
+ 'yen',
+ 'florin',
+ 'section',
+ 'currency',
+ 'quotesingle',
+ 'quotedblleft',
+ 'guillemotleft',
+ 'guilsinglleft',
+ 'guilsinglright',
+ 'fi',
+ 'fl',
+ 'endash',
+ 'dagger',
+ 'daggerdbl',
+ 'periodcentered',
+ 'paragraph',
+ 'bullet',
+ 'quotesinglbase',
+ 'quotedblbase',
+ 'quotedblright',
+ 'guillemotright',
+ 'ellipsis',
+ 'perthousand',
+ 'questiondown',
+ 'grave',
+ 'acute',
+ 'circumflex',
+ 'tilde',
+ 'macron',
+ 'breve',
+ 'dotaccent',
+ 'dieresis',
+ 'ring',
+ 'cedilla',
+ 'hungarumlaut',
+ 'ogonek',
+ 'caron',
+ 'emdash',
+ 'AE',
+ 'ordfeminine',
+ 'Lslash',
+ 'Oslash',
+ 'OE',
+ 'ordmasculine',
+ 'ae',
+ 'dotlessi',
+ 'lslash',
+ 'oslash',
+ 'oe',
+ 'germandbls',
+ 'onesuperior',
+ 'logicalnot',
+ 'mu',
+ 'trademark',
+ 'Eth',
+ 'onehalf',
+ 'plusminus',
+ 'Thorn',
+ 'onequarter',
+ 'divide',
+ 'brokenbar',
+ 'degree',
+ 'thorn',
+ 'threequarters',
+ 'twosuperior',
+ 'registered',
+ 'minus',
+ 'eth',
+ 'multiply',
+ 'threesuperior',
+ 'copyright',
+ 'Aacute',
+ 'Acircumflex',
+ 'Adieresis',
+ 'Agrave',
+ 'Aring',
+ 'Atilde',
+ 'Ccedilla',
+ 'Eacute',
+ 'Ecircumflex',
+ 'Edieresis',
+ 'Egrave',
+ 'Iacute',
+ 'Icircumflex',
+ 'Idieresis',
+ 'Igrave',
+ 'Ntilde',
+ 'Oacute',
+ 'Ocircumflex',
+ 'Odieresis',
+ 'Ograve',
+ 'Otilde',
+ 'Scaron',
+ 'Uacute',
+ 'Ucircumflex',
+ 'Udieresis',
+ 'Ugrave',
+ 'Yacute',
+ 'Ydieresis',
+ 'Zcaron',
+ 'aacute',
+ 'acircumflex',
+ 'adieresis',
+ 'agrave',
+ 'aring',
+ 'atilde',
+ 'ccedilla',
+ 'eacute',
+ 'ecircumflex',
+ 'edieresis',
+ 'egrave',
+ 'iacute',
+ 'icircumflex',
+ 'idieresis',
+ 'igrave',
+ 'ntilde',
+ 'oacute',
+ 'ocircumflex',
+ 'odieresis',
+ 'ograve',
+ 'otilde',
+ 'scaron',
+ 'uacute',
+ 'ucircumflex',
+ 'udieresis',
+ 'ugrave',
+ 'yacute',
+ 'ydieresis',
+ 'zcaron',
+ 'exclamsmall',
+ 'Hungarumlautsmall',
+ 'dollaroldstyle',
+ 'dollarsuperior',
+ 'ampersandsmall',
+ 'Acutesmall',
+ 'parenleftsuperior',
+ 'parenrightsuperior',
+ '266 ff',
+ 'onedotenleader',
+ 'zerooldstyle',
+ 'oneoldstyle',
+ 'twooldstyle',
+ 'threeoldstyle',
+ 'fouroldstyle',
+ 'fiveoldstyle',
+ 'sixoldstyle',
+ 'sevenoldstyle',
+ 'eightoldstyle',
+ 'nineoldstyle',
+ 'commasuperior',
+ 'threequartersemdash',
+ 'periodsuperior',
+ 'questionsmall',
+ 'asuperior',
+ 'bsuperior',
+ 'centsuperior',
+ 'dsuperior',
+ 'esuperior',
+ 'isuperior',
+ 'lsuperior',
+ 'msuperior',
+ 'nsuperior',
+ 'osuperior',
+ 'rsuperior',
+ 'ssuperior',
+ 'tsuperior',
+ 'ff',
+ 'ffi',
+ 'ffl',
+ 'parenleftinferior',
+ 'parenrightinferior',
+ 'Circumflexsmall',
+ 'hyphensuperior',
+ 'Gravesmall',
+ 'Asmall',
+ 'Bsmall',
+ 'Csmall',
+ 'Dsmall',
+ 'Esmall',
+ 'Fsmall',
+ 'Gsmall',
+ 'Hsmall',
+ 'Ismall',
+ 'Jsmall',
+ 'Ksmall',
+ 'Lsmall',
+ 'Msmall',
+ 'Nsmall',
+ 'Osmall',
+ 'Psmall',
+ 'Qsmall',
+ 'Rsmall',
+ 'Ssmall',
+ 'Tsmall',
+ 'Usmall',
+ 'Vsmall',
+ 'Wsmall',
+ 'Xsmall',
+ 'Ysmall',
+ 'Zsmall',
+ 'colonmonetary',
+ 'onefitted',
+ 'rupiah',
+ 'Tildesmall',
+ 'exclamdownsmall',
+ 'centoldstyle',
+ 'Lslashsmall',
+ 'Scaronsmall',
+ 'Zcaronsmall',
+ 'Dieresissmall',
+ 'Brevesmall',
+ 'Caronsmall',
+ 'Dotaccentsmall',
+ 'Macronsmall',
+ 'figuredash',
+ 'hypheninferior',
+ 'Ogoneksmall',
+ 'Ringsmall',
+ 'Cedillasmall',
+ 'questiondownsmall',
+ 'oneeighth',
+ 'threeeighths',
+ 'fiveeighths',
+ 'seveneighths',
+ 'onethird',
+ 'twothirds',
+ 'zerosuperior',
+ 'foursuperior',
+ 'fivesuperior',
+ 'sixsuperior',
+ 'sevensuperior',
+ 'eightsuperior',
+ 'ninesuperior',
+ 'zeroinferior',
+ 'oneinferior',
+ 'twoinferior',
+ 'threeinferior',
+ 'fourinferior',
+ 'fiveinferior',
+ 'sixinferior',
+ 'seveninferior',
+ 'eightinferior',
+ 'nineinferior',
+ 'centinferior',
+ 'dollarinferior',
+ 'periodinferior',
+ 'commainferior',
+ 'Agravesmall',
+ 'Aacutesmall',
+ 'Acircumflexsmall',
+ 'Atildesmall',
+ 'Adieresissmall',
+ 'Aringsmall',
+ 'AEsmall',
+ 'Ccedillasmall',
+ 'Egravesmall',
+ 'Eacutesmall',
+ 'Ecircumflexsmall',
+ 'Edieresissmall',
+ 'Igravesmall',
+ 'Iacutesmall',
+ 'Icircumflexsmall',
+ 'Idieresissmall',
+ 'Ethsmall',
+ 'Ntildesmall',
+ 'Ogravesmall',
+ 'Oacutesmall',
+ 'Ocircumflexsmall',
+ 'Otildesmall',
+ 'Odieresissmall',
+ 'OEsmall',
+ 'Oslashsmall',
+ 'Ugravesmall',
+ 'Uacutesmall',
+ 'Ucircumflexsmall',
+ 'Udieresissmall',
+ 'Yacutesmall',
+ 'Thornsmall',
+ 'Ydieresissmall',
+ '001.000',
+ '001.001',
+ '001.002',
+ '001.003',
+ 'Black',
+ 'Bold',
+ 'Book',
+ 'Light',
+ 'Medium',
+ 'Regular',
+ 'Roman',
+ 'Semibold'
+ ];
+
+ var cffStandardEncoding = [
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ 'space',
+ 'exclam',
+ 'quotedbl',
+ 'numbersign',
+ 'dollar',
+ 'percent',
+ 'ampersand',
+ 'quoteright',
+ 'parenleft',
+ 'parenright',
+ 'asterisk',
+ 'plus',
+ 'comma',
+ 'hyphen',
+ 'period',
+ 'slash',
+ 'zero',
+ 'one',
+ 'two',
+ 'three',
+ 'four',
+ 'five',
+ 'six',
+ 'seven',
+ 'eight',
+ 'nine',
+ 'colon',
+ 'semicolon',
+ 'less',
+ 'equal',
+ 'greater',
+ 'question',
+ 'at',
+ 'A',
+ 'B',
+ 'C',
+ 'D',
+ 'E',
+ 'F',
+ 'G',
+ 'H',
+ 'I',
+ 'J',
+ 'K',
+ 'L',
+ 'M',
+ 'N',
+ 'O',
+ 'P',
+ 'Q',
+ 'R',
+ 'S',
+ 'T',
+ 'U',
+ 'V',
+ 'W',
+ 'X',
+ 'Y',
+ 'Z',
+ 'bracketleft',
+ 'backslash',
+ 'bracketright',
+ 'asciicircum',
+ 'underscore',
+ 'quoteleft',
+ 'a',
+ 'b',
+ 'c',
+ 'd',
+ 'e',
+ 'f',
+ 'g',
+ 'h',
+ 'i',
+ 'j',
+ 'k',
+ 'l',
+ 'm',
+ 'n',
+ 'o',
+ 'p',
+ 'q',
+ 'r',
+ 's',
+ 't',
+ 'u',
+ 'v',
+ 'w',
+ 'x',
+ 'y',
+ 'z',
+ 'braceleft',
+ 'bar',
+ 'braceright',
+ 'asciitilde',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ 'exclamdown',
+ 'cent',
+ 'sterling',
+ 'fraction',
+ 'yen',
+ 'florin',
+ 'section',
+ 'currency',
+ 'quotesingle',
+ 'quotedblleft',
+ 'guillemotleft',
+ 'guilsinglleft',
+ 'guilsinglright',
+ 'fi',
+ 'fl',
+ '',
+ 'endash',
+ 'dagger',
+ 'daggerdbl',
+ 'periodcentered',
+ '',
+ 'paragraph',
+ 'bullet',
+ 'quotesinglbase',
+ 'quotedblbase',
+ 'quotedblright',
+ 'guillemotright',
+ 'ellipsis',
+ 'perthousand',
+ '',
+ 'questiondown',
+ '',
+ 'grave',
+ 'acute',
+ 'circumflex',
+ 'tilde',
+ 'macron',
+ 'breve',
+ 'dotaccent',
+ 'dieresis',
+ '',
+ 'ring',
+ 'cedilla',
+ '',
+ 'hungarumlaut',
+ 'ogonek',
+ 'caron',
+ 'emdash',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ 'AE',
+ '',
+ 'ordfeminine',
+ '',
+ '',
+ '',
+ '',
+ 'Lslash',
+ 'Oslash',
+ 'OE',
+ 'ordmasculine',
+ '',
+ '',
+ '',
+ '',
+ '',
+ 'ae',
+ '',
+ '',
+ '',
+ 'dotlessi',
+ '',
+ '',
+ 'lslash',
+ 'oslash',
+ 'oe',
+ 'germandbls'
+ ];
+
+ var cffExpertEncoding = [
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ 'space',
+ 'exclamsmall',
+ 'Hungarumlautsmall',
+ '',
+ 'dollaroldstyle',
+ 'dollarsuperior',
+ 'ampersandsmall',
+ 'Acutesmall',
+ 'parenleftsuperior',
+ 'parenrightsuperior',
+ 'twodotenleader',
+ 'onedotenleader',
+ 'comma',
+ 'hyphen',
+ 'period',
+ 'fraction',
+ 'zerooldstyle',
+ 'oneoldstyle',
+ 'twooldstyle',
+ 'threeoldstyle',
+ 'fouroldstyle',
+ 'fiveoldstyle',
+ 'sixoldstyle',
+ 'sevenoldstyle',
+ 'eightoldstyle',
+ 'nineoldstyle',
+ 'colon',
+ 'semicolon',
+ 'commasuperior',
+ 'threequartersemdash',
+ 'periodsuperior',
+ 'questionsmall',
+ '',
+ 'asuperior',
+ 'bsuperior',
+ 'centsuperior',
+ 'dsuperior',
+ 'esuperior',
+ '',
+ '',
+ 'isuperior',
+ '',
+ '',
+ 'lsuperior',
+ 'msuperior',
+ 'nsuperior',
+ 'osuperior',
+ '',
+ '',
+ 'rsuperior',
+ 'ssuperior',
+ 'tsuperior',
+ '',
+ 'ff',
+ 'fi',
+ 'fl',
+ 'ffi',
+ 'ffl',
+ 'parenleftinferior',
+ '',
+ 'parenrightinferior',
+ 'Circumflexsmall',
+ 'hyphensuperior',
+ 'Gravesmall',
+ 'Asmall',
+ 'Bsmall',
+ 'Csmall',
+ 'Dsmall',
+ 'Esmall',
+ 'Fsmall',
+ 'Gsmall',
+ 'Hsmall',
+ 'Ismall',
+ 'Jsmall',
+ 'Ksmall',
+ 'Lsmall',
+ 'Msmall',
+ 'Nsmall',
+ 'Osmall',
+ 'Psmall',
+ 'Qsmall',
+ 'Rsmall',
+ 'Ssmall',
+ 'Tsmall',
+ 'Usmall',
+ 'Vsmall',
+ 'Wsmall',
+ 'Xsmall',
+ 'Ysmall',
+ 'Zsmall',
+ 'colonmonetary',
+ 'onefitted',
+ 'rupiah',
+ 'Tildesmall',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ 'exclamdownsmall',
+ 'centoldstyle',
+ 'Lslashsmall',
+ '',
+ '',
+ 'Scaronsmall',
+ 'Zcaronsmall',
+ 'Dieresissmall',
+ 'Brevesmall',
+ 'Caronsmall',
+ '',
+ 'Dotaccentsmall',
+ '',
+ '',
+ 'Macronsmall',
+ '',
+ '',
+ 'figuredash',
+ 'hypheninferior',
+ '',
+ '',
+ 'Ogoneksmall',
+ 'Ringsmall',
+ 'Cedillasmall',
+ '',
+ '',
+ '',
+ 'onequarter',
+ 'onehalf',
+ 'threequarters',
+ 'questiondownsmall',
+ 'oneeighth',
+ 'threeeighths',
+ 'fiveeighths',
+ 'seveneighths',
+ 'onethird',
+ 'twothirds',
+ '',
+ '',
+ 'zerosuperior',
+ 'onesuperior',
+ 'twosuperior',
+ 'threesuperior',
+ 'foursuperior',
+ 'fivesuperior',
+ 'sixsuperior',
+ 'sevensuperior',
+ 'eightsuperior',
+ 'ninesuperior',
+ 'zeroinferior',
+ 'oneinferior',
+ 'twoinferior',
+ 'threeinferior',
+ 'fourinferior',
+ 'fiveinferior',
+ 'sixinferior',
+ 'seveninferior',
+ 'eightinferior',
+ 'nineinferior',
+ 'centinferior',
+ 'dollarinferior',
+ 'periodinferior',
+ 'commainferior',
+ 'Agravesmall',
+ 'Aacutesmall',
+ 'Acircumflexsmall',
+ 'Atildesmall',
+ 'Adieresissmall',
+ 'Aringsmall',
+ 'AEsmall',
+ 'Ccedillasmall',
+ 'Egravesmall',
+ 'Eacutesmall',
+ 'Ecircumflexsmall',
+ 'Edieresissmall',
+ 'Igravesmall',
+ 'Iacutesmall',
+ 'Icircumflexsmall',
+ 'Idieresissmall',
+ 'Ethsmall',
+ 'Ntildesmall',
+ 'Ogravesmall',
+ 'Oacutesmall',
+ 'Ocircumflexsmall',
+ 'Otildesmall',
+ 'Odieresissmall',
+ 'OEsmall',
+ 'Oslashsmall',
+ 'Ugravesmall',
+ 'Uacutesmall',
+ 'Ucircumflexsmall',
+ 'Udieresissmall',
+ 'Yacutesmall',
+ 'Thornsmall',
+ 'Ydieresissmall'
+ ];
+
+ var standardNames = [
+ '.notdef',
+ '.null',
+ 'nonmarkingreturn',
+ 'space',
+ 'exclam',
+ 'quotedbl',
+ 'numbersign',
+ 'dollar',
+ 'percent',
+ 'ampersand',
+ 'quotesingle',
+ 'parenleft',
+ 'parenright',
+ 'asterisk',
+ 'plus',
+ 'comma',
+ 'hyphen',
+ 'period',
+ 'slash',
+ 'zero',
+ 'one',
+ 'two',
+ 'three',
+ 'four',
+ 'five',
+ 'six',
+ 'seven',
+ 'eight',
+ 'nine',
+ 'colon',
+ 'semicolon',
+ 'less',
+ 'equal',
+ 'greater',
+ 'question',
+ 'at',
+ 'A',
+ 'B',
+ 'C',
+ 'D',
+ 'E',
+ 'F',
+ 'G',
+ 'H',
+ 'I',
+ 'J',
+ 'K',
+ 'L',
+ 'M',
+ 'N',
+ 'O',
+ 'P',
+ 'Q',
+ 'R',
+ 'S',
+ 'T',
+ 'U',
+ 'V',
+ 'W',
+ 'X',
+ 'Y',
+ 'Z',
+ 'bracketleft',
+ 'backslash',
+ 'bracketright',
+ 'asciicircum',
+ 'underscore',
+ 'grave',
+ 'a',
+ 'b',
+ 'c',
+ 'd',
+ 'e',
+ 'f',
+ 'g',
+ 'h',
+ 'i',
+ 'j',
+ 'k',
+ 'l',
+ 'm',
+ 'n',
+ 'o',
+ 'p',
+ 'q',
+ 'r',
+ 's',
+ 't',
+ 'u',
+ 'v',
+ 'w',
+ 'x',
+ 'y',
+ 'z',
+ 'braceleft',
+ 'bar',
+ 'braceright',
+ 'asciitilde',
+ 'Adieresis',
+ 'Aring',
+ 'Ccedilla',
+ 'Eacute',
+ 'Ntilde',
+ 'Odieresis',
+ 'Udieresis',
+ 'aacute',
+ 'agrave',
+ 'acircumflex',
+ 'adieresis',
+ 'atilde',
+ 'aring',
+ 'ccedilla',
+ 'eacute',
+ 'egrave',
+ 'ecircumflex',
+ 'edieresis',
+ 'iacute',
+ 'igrave',
+ 'icircumflex',
+ 'idieresis',
+ 'ntilde',
+ 'oacute',
+ 'ograve',
+ 'ocircumflex',
+ 'odieresis',
+ 'otilde',
+ 'uacute',
+ 'ugrave',
+ 'ucircumflex',
+ 'udieresis',
+ 'dagger',
+ 'degree',
+ 'cent',
+ 'sterling',
+ 'section',
+ 'bullet',
+ 'paragraph',
+ 'germandbls',
+ 'registered',
+ 'copyright',
+ 'trademark',
+ 'acute',
+ 'dieresis',
+ 'notequal',
+ 'AE',
+ 'Oslash',
+ 'infinity',
+ 'plusminus',
+ 'lessequal',
+ 'greaterequal',
+ 'yen',
+ 'mu',
+ 'partialdiff',
+ 'summation',
+ 'product',
+ 'pi',
+ 'integral',
+ 'ordfeminine',
+ 'ordmasculine',
+ 'Omega',
+ 'ae',
+ 'oslash',
+ 'questiondown',
+ 'exclamdown',
+ 'logicalnot',
+ 'radical',
+ 'florin',
+ 'approxequal',
+ 'Delta',
+ 'guillemotleft',
+ 'guillemotright',
+ 'ellipsis',
+ 'nonbreakingspace',
+ 'Agrave',
+ 'Atilde',
+ 'Otilde',
+ 'OE',
+ 'oe',
+ 'endash',
+ 'emdash',
+ 'quotedblleft',
+ 'quotedblright',
+ 'quoteleft',
+ 'quoteright',
+ 'divide',
+ 'lozenge',
+ 'ydieresis',
+ 'Ydieresis',
+ 'fraction',
+ 'currency',
+ 'guilsinglleft',
+ 'guilsinglright',
+ 'fi',
+ 'fl',
+ 'daggerdbl',
+ 'periodcentered',
+ 'quotesinglbase',
+ 'quotedblbase',
+ 'perthousand',
+ 'Acircumflex',
+ 'Ecircumflex',
+ 'Aacute',
+ 'Edieresis',
+ 'Egrave',
+ 'Iacute',
+ 'Icircumflex',
+ 'Idieresis',
+ 'Igrave',
+ 'Oacute',
+ 'Ocircumflex',
+ 'apple',
+ 'Ograve',
+ 'Uacute',
+ 'Ucircumflex',
+ 'Ugrave',
+ 'dotlessi',
+ 'circumflex',
+ 'tilde',
+ 'macron',
+ 'breve',
+ 'dotaccent',
+ 'ring',
+ 'cedilla',
+ 'hungarumlaut',
+ 'ogonek',
+ 'caron',
+ 'Lslash',
+ 'lslash',
+ 'Scaron',
+ 'scaron',
+ 'Zcaron',
+ 'zcaron',
+ 'brokenbar',
+ 'Eth',
+ 'eth',
+ 'Yacute',
+ 'yacute',
+ 'Thorn',
+ 'thorn',
+ 'minus',
+ 'multiply',
+ 'onesuperior',
+ 'twosuperior',
+ 'threesuperior',
+ 'onehalf',
+ 'onequarter',
+ 'threequarters',
+ 'franc',
+ 'Gbreve',
+ 'gbreve',
+ 'Idotaccent',
+ 'Scedilla',
+ 'scedilla',
+ 'Cacute',
+ 'cacute',
+ 'Ccaron',
+ 'ccaron',
+ 'dcroat'
+ ];
+
+ /**
+ * This is the encoding used for fonts created from scratch.
+ * It loops through all glyphs and finds the appropriate unicode value.
+ * Since it's linear time, other encodings will be faster.
+ * @exports opentype.DefaultEncoding
+ * @class
+ * @constructor
+ * @param {opentype.Font}
+ */
+ function DefaultEncoding(font) {
+ this.font = font;
+ }
+
+ DefaultEncoding.prototype.charToGlyphIndex = function(c) {
+ var code = c.codePointAt(0);
+ var glyphs = this.font.glyphs;
+ if (glyphs) {
+ for (var i = 0; i < glyphs.length; i += 1) {
+ var glyph = glyphs.get(i);
+ for (var j = 0; j < glyph.unicodes.length; j += 1) {
+ if (glyph.unicodes[j] === code) {
+ return i;
+ }
+ }
+ }
+ }
+ return null;
+ };
+
+ /**
+ * @exports opentype.CmapEncoding
+ * @class
+ * @constructor
+ * @param {Object} cmap - a object with the cmap encoded data
+ */
+ function CmapEncoding(cmap) {
+ this.cmap = cmap;
+ }
+
+ /**
+ * @param {string} c - the character
+ * @return {number} The glyph index.
+ */
+ CmapEncoding.prototype.charToGlyphIndex = function(c) {
+ return this.cmap.glyphIndexMap[c.codePointAt(0)] || 0;
+ };
+
+ /**
+ * @exports opentype.CffEncoding
+ * @class
+ * @constructor
+ * @param {string} encoding - The encoding
+ * @param {Array} charset - The character set.
+ */
+ function CffEncoding(encoding, charset) {
+ this.encoding = encoding;
+ this.charset = charset;
+ }
+
+ /**
+ * @param {string} s - The character
+ * @return {number} The index.
+ */
+ CffEncoding.prototype.charToGlyphIndex = function(s) {
+ var code = s.codePointAt(0);
+ var charName = this.encoding[code];
+ return this.charset.indexOf(charName);
+ };
+
+ /**
+ * @exports opentype.GlyphNames
+ * @class
+ * @constructor
+ * @param {Object} post
+ */
+ function GlyphNames(post) {
+ var this$1 = this;
+
+ switch (post.version) {
+ case 1:
+ this.names = standardNames.slice();
+ break;
+ case 2:
+ this.names = new Array(post.numberOfGlyphs);
+ for (var i = 0; i < post.numberOfGlyphs; i++) {
+ if (post.glyphNameIndex[i] < standardNames.length) {
+ this$1.names[i] = standardNames[post.glyphNameIndex[i]];
+ } else {
+ this$1.names[i] =
+ post.names[post.glyphNameIndex[i] - standardNames.length];
+ }
+ }
+
+ break;
+ case 2.5:
+ this.names = new Array(post.numberOfGlyphs);
+ for (var i$1 = 0; i$1 < post.numberOfGlyphs; i$1++) {
+ this$1.names[i$1] = standardNames[i$1 + post.glyphNameIndex[i$1]];
+ }
+
+ break;
+ case 3:
+ this.names = [];
+ break;
+ default:
+ this.names = [];
+ break;
+ }
+ }
+
+ /**
+ * Gets the index of a glyph by name.
+ * @param {string} name - The glyph name
+ * @return {number} The index
+ */
+ GlyphNames.prototype.nameToGlyphIndex = function(name) {
+ return this.names.indexOf(name);
+ };
+
+ /**
+ * @param {number} gid
+ * @return {string}
+ */
+ GlyphNames.prototype.glyphIndexToName = function(gid) {
+ return this.names[gid];
+ };
+
+ /**
+ * @alias opentype.addGlyphNames
+ * @param {opentype.Font}
+ */
+ function addGlyphNames(font) {
+ var glyph;
+ var glyphIndexMap = font.tables.cmap.glyphIndexMap;
+ var charCodes = Object.keys(glyphIndexMap);
+
+ for (var i = 0; i < charCodes.length; i += 1) {
+ var c = charCodes[i];
+ var glyphIndex = glyphIndexMap[c];
+ glyph = font.glyphs.get(glyphIndex);
+ glyph.addUnicode(parseInt(c));
+ }
+
+ for (var i$1 = 0; i$1 < font.glyphs.length; i$1 += 1) {
+ glyph = font.glyphs.get(i$1);
+ if (font.cffEncoding) {
+ if (font.isCIDFont) {
+ glyph.name = 'gid' + i$1;
+ } else {
+ glyph.name = font.cffEncoding.charset[i$1];
+ }
+ } else if (font.glyphNames.names) {
+ glyph.name = font.glyphNames.glyphIndexToName(i$1);
+ }
+ }
+ }
+
+ // Drawing utility functions.
+
+ // Draw a line on the given context from point `x1,y1` to point `x2,y2`.
+ function line(ctx, x1, y1, x2, y2) {
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+ }
+
+ var draw = { line: line };
+
+ // The Glyph object
+ // import glyf from './tables/glyf' Can't be imported here, because it's a circular dependency
+
+ function getPathDefinition(glyph, path) {
+ var _path = path || new Path();
+ return {
+ configurable: true,
+
+ get: function() {
+ if (typeof _path === 'function') {
+ _path = _path();
+ }
+
+ return _path;
+ },
+
+ set: function(p) {
+ _path = p;
+ }
+ };
+ }
+ /**
+ * @typedef GlyphOptions
+ * @type Object
+ * @property {string} [name] - The glyph name
+ * @property {number} [unicode]
+ * @property {Array} [unicodes]
+ * @property {number} [xMin]
+ * @property {number} [yMin]
+ * @property {number} [xMax]
+ * @property {number} [yMax]
+ * @property {number} [advanceWidth]
+ */
+
+ // A Glyph is an individual mark that often corresponds to a character.
+ // Some glyphs, such as ligatures, are a combination of many characters.
+ // Glyphs are the basic building blocks of a font.
+ //
+ // The `Glyph` class contains utility methods for drawing the path and its points.
+ /**
+ * @exports opentype.Glyph
+ * @class
+ * @param {GlyphOptions}
+ * @constructor
+ */
+ function Glyph(options) {
+ // By putting all the code on a prototype function (which is only declared once)
+ // we reduce the memory requirements for larger fonts by some 2%
+ this.bindConstructorValues(options);
+ }
+
+ /**
+ * @param {GlyphOptions}
+ */
+ Glyph.prototype.bindConstructorValues = function(options) {
+ this.index = options.index || 0;
+
+ // These three values cannot be deferred for memory optimization:
+ this.name = options.name || null;
+ this.unicode = options.unicode || undefined;
+ this.unicodes =
+ options.unicodes || options.unicode !== undefined
+ ? [options.unicode]
+ : [];
+
+ // But by binding these values only when necessary, we reduce can
+ // the memory requirements by almost 3% for larger fonts.
+ if (options.xMin) {
+ this.xMin = options.xMin;
+ }
+
+ if (options.yMin) {
+ this.yMin = options.yMin;
+ }
+
+ if (options.xMax) {
+ this.xMax = options.xMax;
+ }
+
+ if (options.yMax) {
+ this.yMax = options.yMax;
+ }
+
+ if (options.advanceWidth) {
+ this.advanceWidth = options.advanceWidth;
+ }
+
+ // The path for a glyph is the most memory intensive, and is bound as a value
+ // with a getter/setter to ensure we actually do path parsing only once the
+ // path is actually needed by anything.
+ Object.defineProperty(this, 'path', getPathDefinition(this, options.path));
+ };
+
+ /**
+ * @param {number}
+ */
+ Glyph.prototype.addUnicode = function(unicode) {
+ if (this.unicodes.length === 0) {
+ this.unicode = unicode;
+ }
+
+ this.unicodes.push(unicode);
+ };
+
+ /**
+ * Calculate the minimum bounding box for this glyph.
+ * @return {opentype.BoundingBox}
+ */
+ Glyph.prototype.getBoundingBox = function() {
+ return this.path.getBoundingBox();
+ };
+
+ /**
+ * Convert the glyph to a Path we can draw on a drawing context.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {Object=} options - xScale, yScale to stretch the glyph.
+ * @param {opentype.Font} if hinting is to be used, the font
+ * @return {opentype.Path}
+ */
+ Glyph.prototype.getPath = function(x, y, fontSize, options, font) {
+ x = x !== undefined ? x : 0;
+ y = y !== undefined ? y : 0;
+ fontSize = fontSize !== undefined ? fontSize : 72;
+ var commands;
+ var hPoints;
+ if (!options) {
+ options = {};
+ }
+ var xScale = options.xScale;
+ var yScale = options.yScale;
+
+ if (options.hinting && font && font.hinting) {
+ // in case of hinting, the hinting engine takes care
+ // of scaling the points (not the path) before hinting.
+ hPoints = this.path && font.hinting.exec(this, fontSize);
+ // in case the hinting engine failed hPoints is undefined
+ // and thus reverts to plain rending
+ }
+
+ if (hPoints) {
+ // Call font.hinting.getCommands instead of `glyf.getPath(hPoints).commands` to avoid a circular dependency
+ commands = font.hinting.getCommands(hPoints);
+ x = Math.round(x);
+ y = Math.round(y);
+ // TODO in case of hinting xyScaling is not yet supported
+ xScale = yScale = 1;
+ } else {
+ commands = this.path.commands;
+ var scale = 1 / this.path.unitsPerEm * fontSize;
+ if (xScale === undefined) {
+ xScale = scale;
+ }
+ if (yScale === undefined) {
+ yScale = scale;
+ }
+ }
+
+ var p = new Path();
+ for (var i = 0; i < commands.length; i += 1) {
+ var cmd = commands[i];
+ if (cmd.type === 'M') {
+ p.moveTo(x + cmd.x * xScale, y + -cmd.y * yScale);
+ } else if (cmd.type === 'L') {
+ p.lineTo(x + cmd.x * xScale, y + -cmd.y * yScale);
+ } else if (cmd.type === 'Q') {
+ p.quadraticCurveTo(
+ x + cmd.x1 * xScale,
+ y + -cmd.y1 * yScale,
+ x + cmd.x * xScale,
+ y + -cmd.y * yScale
+ );
+ } else if (cmd.type === 'C') {
+ p.curveTo(
+ x + cmd.x1 * xScale,
+ y + -cmd.y1 * yScale,
+ x + cmd.x2 * xScale,
+ y + -cmd.y2 * yScale,
+ x + cmd.x * xScale,
+ y + -cmd.y * yScale
+ );
+ } else if (cmd.type === 'Z') {
+ p.closePath();
+ }
+ }
+
+ return p;
+ };
+
+ /**
+ * Split the glyph into contours.
+ * This function is here for backwards compatibility, and to
+ * provide raw access to the TrueType glyph outlines.
+ * @return {Array}
+ */
+ Glyph.prototype.getContours = function() {
+ var this$1 = this;
+
+ if (this.points === undefined) {
+ return [];
+ }
+
+ var contours = [];
+ var currentContour = [];
+ for (var i = 0; i < this.points.length; i += 1) {
+ var pt = this$1.points[i];
+ currentContour.push(pt);
+ if (pt.lastPointOfContour) {
+ contours.push(currentContour);
+ currentContour = [];
+ }
+ }
+
+ check.argument(
+ currentContour.length === 0,
+ 'There are still points left in the current contour.'
+ );
+ return contours;
+ };
+
+ /**
+ * Calculate the xMin/yMin/xMax/yMax/lsb/rsb for a Glyph.
+ * @return {Object}
+ */
+ Glyph.prototype.getMetrics = function() {
+ var commands = this.path.commands;
+ var xCoords = [];
+ var yCoords = [];
+ for (var i = 0; i < commands.length; i += 1) {
+ var cmd = commands[i];
+ if (cmd.type !== 'Z') {
+ xCoords.push(cmd.x);
+ yCoords.push(cmd.y);
+ }
+
+ if (cmd.type === 'Q' || cmd.type === 'C') {
+ xCoords.push(cmd.x1);
+ yCoords.push(cmd.y1);
+ }
+
+ if (cmd.type === 'C') {
+ xCoords.push(cmd.x2);
+ yCoords.push(cmd.y2);
+ }
+ }
+
+ var metrics = {
+ xMin: Math.min.apply(null, xCoords),
+ yMin: Math.min.apply(null, yCoords),
+ xMax: Math.max.apply(null, xCoords),
+ yMax: Math.max.apply(null, yCoords),
+ leftSideBearing: this.leftSideBearing
+ };
+
+ if (!isFinite(metrics.xMin)) {
+ metrics.xMin = 0;
+ }
+
+ if (!isFinite(metrics.xMax)) {
+ metrics.xMax = this.advanceWidth;
+ }
+
+ if (!isFinite(metrics.yMin)) {
+ metrics.yMin = 0;
+ }
+
+ if (!isFinite(metrics.yMax)) {
+ metrics.yMax = 0;
+ }
+
+ metrics.rightSideBearing =
+ this.advanceWidth -
+ metrics.leftSideBearing -
+ (metrics.xMax - metrics.xMin);
+ return metrics;
+ };
+
+ /**
+ * Draw the glyph on the given context.
+ * @param {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {Object=} options - xScale, yScale to stretch the glyph.
+ */
+ Glyph.prototype.draw = function(ctx, x, y, fontSize, options) {
+ this.getPath(x, y, fontSize, options).draw(ctx);
+ };
+
+ /**
+ * Draw the points of the glyph.
+ * On-curve points will be drawn in blue, off-curve points will be drawn in red.
+ * @param {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ */
+ Glyph.prototype.drawPoints = function(ctx, x, y, fontSize) {
+ function drawCircles(l, x, y, scale) {
+ var PI_SQ = Math.PI * 2;
+ ctx.beginPath();
+ for (var j = 0; j < l.length; j += 1) {
+ ctx.moveTo(x + l[j].x * scale, y + l[j].y * scale);
+ ctx.arc(x + l[j].x * scale, y + l[j].y * scale, 2, 0, PI_SQ, false);
+ }
+
+ ctx.closePath();
+ ctx.fill();
+ }
+
+ x = x !== undefined ? x : 0;
+ y = y !== undefined ? y : 0;
+ fontSize = fontSize !== undefined ? fontSize : 24;
+ var scale = 1 / this.path.unitsPerEm * fontSize;
+
+ var blueCircles = [];
+ var redCircles = [];
+ var path = this.path;
+ for (var i = 0; i < path.commands.length; i += 1) {
+ var cmd = path.commands[i];
+ if (cmd.x !== undefined) {
+ blueCircles.push({ x: cmd.x, y: -cmd.y });
+ }
+
+ if (cmd.x1 !== undefined) {
+ redCircles.push({ x: cmd.x1, y: -cmd.y1 });
+ }
+
+ if (cmd.x2 !== undefined) {
+ redCircles.push({ x: cmd.x2, y: -cmd.y2 });
+ }
+ }
+
+ ctx.fillStyle = 'blue';
+ drawCircles(blueCircles, x, y, scale);
+ ctx.fillStyle = 'red';
+ drawCircles(redCircles, x, y, scale);
+ };
+
+ /**
+ * Draw lines indicating important font measurements.
+ * Black lines indicate the origin of the coordinate system (point 0,0).
+ * Blue lines indicate the glyph bounding box.
+ * Green line indicates the advance width of the glyph.
+ * @param {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ */
+ Glyph.prototype.drawMetrics = function(ctx, x, y, fontSize) {
+ var scale;
+ x = x !== undefined ? x : 0;
+ y = y !== undefined ? y : 0;
+ fontSize = fontSize !== undefined ? fontSize : 24;
+ scale = 1 / this.path.unitsPerEm * fontSize;
+ ctx.lineWidth = 1;
+
+ // Draw the origin
+ ctx.strokeStyle = 'black';
+ draw.line(ctx, x, -10000, x, 10000);
+ draw.line(ctx, -10000, y, 10000, y);
+
+ // This code is here due to memory optimization: by not using
+ // defaults in the constructor, we save a notable amount of memory.
+ var xMin = this.xMin || 0;
+ var yMin = this.yMin || 0;
+ var xMax = this.xMax || 0;
+ var yMax = this.yMax || 0;
+ var advanceWidth = this.advanceWidth || 0;
+
+ // Draw the glyph box
+ ctx.strokeStyle = 'blue';
+ draw.line(ctx, x + xMin * scale, -10000, x + xMin * scale, 10000);
+ draw.line(ctx, x + xMax * scale, -10000, x + xMax * scale, 10000);
+ draw.line(ctx, -10000, y + -yMin * scale, 10000, y + -yMin * scale);
+ draw.line(ctx, -10000, y + -yMax * scale, 10000, y + -yMax * scale);
+
+ // Draw the advance width
+ ctx.strokeStyle = 'green';
+ draw.line(
+ ctx,
+ x + advanceWidth * scale,
+ -10000,
+ x + advanceWidth * scale,
+ 10000
+ );
+ };
+
+ // The GlyphSet object
+
+ // Define a property on the glyph that depends on the path being loaded.
+ function defineDependentProperty(glyph, externalName, internalName) {
+ Object.defineProperty(glyph, externalName, {
+ get: function() {
+ // Request the path property to make sure the path is loaded.
+ glyph.path; // jshint ignore:line
+ return glyph[internalName];
+ },
+ set: function(newValue) {
+ glyph[internalName] = newValue;
+ },
+ enumerable: true,
+ configurable: true
+ });
+ }
+
+ /**
+ * A GlyphSet represents all glyphs available in the font, but modelled using
+ * a deferred glyph loader, for retrieving glyphs only once they are absolutely
+ * necessary, to keep the memory footprint down.
+ * @exports opentype.GlyphSet
+ * @class
+ * @param {opentype.Font}
+ * @param {Array}
+ */
+ function GlyphSet(font, glyphs) {
+ var this$1 = this;
+
+ this.font = font;
+ this.glyphs = {};
+ if (Array.isArray(glyphs)) {
+ for (var i = 0; i < glyphs.length; i++) {
+ this$1.glyphs[i] = glyphs[i];
+ }
+ }
+
+ this.length = (glyphs && glyphs.length) || 0;
+ }
+
+ /**
+ * @param {number} index
+ * @return {opentype.Glyph}
+ */
+ GlyphSet.prototype.get = function(index) {
+ if (typeof this.glyphs[index] === 'function') {
+ this.glyphs[index] = this.glyphs[index]();
+ }
+
+ return this.glyphs[index];
+ };
+
+ /**
+ * @param {number} index
+ * @param {Object}
+ */
+ GlyphSet.prototype.push = function(index, loader) {
+ this.glyphs[index] = loader;
+ this.length++;
+ };
+
+ /**
+ * @alias opentype.glyphLoader
+ * @param {opentype.Font} font
+ * @param {number} index
+ * @return {opentype.Glyph}
+ */
+ function glyphLoader(font, index) {
+ return new Glyph({ index: index, font: font });
+ }
+
+ /**
+ * Generate a stub glyph that can be filled with all metadata *except*
+ * the "points" and "path" properties, which must be loaded only once
+ * the glyph's path is actually requested for text shaping.
+ * @alias opentype.ttfGlyphLoader
+ * @param {opentype.Font} font
+ * @param {number} index
+ * @param {Function} parseGlyph
+ * @param {Object} data
+ * @param {number} position
+ * @param {Function} buildPath
+ * @return {opentype.Glyph}
+ */
+ function ttfGlyphLoader(font, index, parseGlyph, data, position, buildPath) {
+ return function() {
+ var glyph = new Glyph({ index: index, font: font });
+
+ glyph.path = function() {
+ parseGlyph(glyph, data, position);
+ var path = buildPath(font.glyphs, glyph);
+ path.unitsPerEm = font.unitsPerEm;
+ return path;
+ };
+
+ defineDependentProperty(glyph, 'xMin', '_xMin');
+ defineDependentProperty(glyph, 'xMax', '_xMax');
+ defineDependentProperty(glyph, 'yMin', '_yMin');
+ defineDependentProperty(glyph, 'yMax', '_yMax');
+
+ return glyph;
+ };
+ }
+ /**
+ * @alias opentype.cffGlyphLoader
+ * @param {opentype.Font} font
+ * @param {number} index
+ * @param {Function} parseCFFCharstring
+ * @param {string} charstring
+ * @return {opentype.Glyph}
+ */
+ function cffGlyphLoader(font, index, parseCFFCharstring, charstring) {
+ return function() {
+ var glyph = new Glyph({ index: index, font: font });
+
+ glyph.path = function() {
+ var path = parseCFFCharstring(font, glyph, charstring);
+ path.unitsPerEm = font.unitsPerEm;
+ return path;
+ };
+
+ return glyph;
+ };
+ }
+
+ var glyphset = {
+ GlyphSet: GlyphSet,
+ glyphLoader: glyphLoader,
+ ttfGlyphLoader: ttfGlyphLoader,
+ cffGlyphLoader: cffGlyphLoader
+ };
+
+ // The `CFF` table contains the glyph outlines in PostScript format.
+
+ // Custom equals function that can also check lists.
+ function equals(a, b) {
+ if (a === b) {
+ return true;
+ } else if (Array.isArray(a) && Array.isArray(b)) {
+ if (a.length !== b.length) {
+ return false;
+ }
+
+ for (var i = 0; i < a.length; i += 1) {
+ if (!equals(a[i], b[i])) {
+ return false;
+ }
+ }
+
+ return true;
+ } else {
+ return false;
+ }
+ }
+
+ // Subroutines are encoded using the negative half of the number space.
+ // See type 2 chapter 4.7 "Subroutine operators".
+ function calcCFFSubroutineBias(subrs) {
+ var bias;
+ if (subrs.length < 1240) {
+ bias = 107;
+ } else if (subrs.length < 33900) {
+ bias = 1131;
+ } else {
+ bias = 32768;
+ }
+
+ return bias;
+ }
+
+ // Parse a `CFF` INDEX array.
+ // An index array consists of a list of offsets, then a list of objects at those offsets.
+ function parseCFFIndex(data, start, conversionFn) {
+ var offsets = [];
+ var objects = [];
+ var count = parse.getCard16(data, start);
+ var objectOffset;
+ var endOffset;
+ if (count !== 0) {
+ var offsetSize = parse.getByte(data, start + 2);
+ objectOffset = start + (count + 1) * offsetSize + 2;
+ var pos = start + 3;
+ for (var i = 0; i < count + 1; i += 1) {
+ offsets.push(parse.getOffset(data, pos, offsetSize));
+ pos += offsetSize;
+ }
+
+ // The total size of the index array is 4 header bytes + the value of the last offset.
+ endOffset = objectOffset + offsets[count];
+ } else {
+ endOffset = start + 2;
+ }
+
+ for (var i$1 = 0; i$1 < offsets.length - 1; i$1 += 1) {
+ var value = parse.getBytes(
+ data,
+ objectOffset + offsets[i$1],
+ objectOffset + offsets[i$1 + 1]
+ );
+ if (conversionFn) {
+ value = conversionFn(value);
+ }
+
+ objects.push(value);
+ }
+
+ return { objects: objects, startOffset: start, endOffset: endOffset };
+ }
+
+ // Parse a `CFF` DICT real value.
+ function parseFloatOperand(parser) {
+ var s = '';
+ var eof = 15;
+ var lookup = [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '.',
+ 'E',
+ 'E-',
+ null,
+ '-'
+ ];
+ while (true) {
+ var b = parser.parseByte();
+ var n1 = b >> 4;
+ var n2 = b & 15;
+
+ if (n1 === eof) {
+ break;
+ }
+
+ s += lookup[n1];
+
+ if (n2 === eof) {
+ break;
+ }
+
+ s += lookup[n2];
+ }
+
+ return parseFloat(s);
+ }
+
+ // Parse a `CFF` DICT operand.
+ function parseOperand(parser, b0) {
+ var b1;
+ var b2;
+ var b3;
+ var b4;
+ if (b0 === 28) {
+ b1 = parser.parseByte();
+ b2 = parser.parseByte();
+ return (b1 << 8) | b2;
+ }
+
+ if (b0 === 29) {
+ b1 = parser.parseByte();
+ b2 = parser.parseByte();
+ b3 = parser.parseByte();
+ b4 = parser.parseByte();
+ return (b1 << 24) | (b2 << 16) | (b3 << 8) | b4;
+ }
+
+ if (b0 === 30) {
+ return parseFloatOperand(parser);
+ }
+
+ if (b0 >= 32 && b0 <= 246) {
+ return b0 - 139;
+ }
+
+ if (b0 >= 247 && b0 <= 250) {
+ b1 = parser.parseByte();
+ return (b0 - 247) * 256 + b1 + 108;
+ }
+
+ if (b0 >= 251 && b0 <= 254) {
+ b1 = parser.parseByte();
+ return -(b0 - 251) * 256 - b1 - 108;
+ }
+
+ throw new Error('Invalid b0 ' + b0);
+ }
+
+ // Convert the entries returned by `parseDict` to a proper dictionary.
+ // If a value is a list of one, it is unpacked.
+ function entriesToObject(entries) {
+ var o = {};
+ for (var i = 0; i < entries.length; i += 1) {
+ var key = entries[i][0];
+ var values = entries[i][1];
+ var value = void 0;
+ if (values.length === 1) {
+ value = values[0];
+ } else {
+ value = values;
+ }
+
+ if (o.hasOwnProperty(key) && !isNaN(o[key])) {
+ throw new Error('Object ' + o + ' already has key ' + key);
+ }
+
+ o[key] = value;
+ }
+
+ return o;
+ }
+
+ // Parse a `CFF` DICT object.
+ // A dictionary contains key-value pairs in a compact tokenized format.
+ function parseCFFDict(data, start, size) {
+ start = start !== undefined ? start : 0;
+ var parser = new parse.Parser(data, start);
+ var entries = [];
+ var operands = [];
+ size = size !== undefined ? size : data.length;
+
+ while (parser.relativeOffset < size) {
+ var op = parser.parseByte();
+
+ // The first byte for each dict item distinguishes between operator (key) and operand (value).
+ // Values <= 21 are operators.
+ if (op <= 21) {
+ // Two-byte operators have an initial escape byte of 12.
+ if (op === 12) {
+ op = 1200 + parser.parseByte();
+ }
+
+ entries.push([op, operands]);
+ operands = [];
+ } else {
+ // Since the operands (values) come before the operators (keys), we store all operands in a list
+ // until we encounter an operator.
+ operands.push(parseOperand(parser, op));
+ }
+ }
+
+ return entriesToObject(entries);
+ }
+
+ // Given a String Index (SID), return the value of the string.
+ // Strings below index 392 are standard CFF strings and are not encoded in the font.
+ function getCFFString(strings, index) {
+ if (index <= 390) {
+ index = cffStandardStrings[index];
+ } else {
+ index = strings[index - 391];
+ }
+
+ return index;
+ }
+
+ // Interpret a dictionary and return a new dictionary with readable keys and values for missing entries.
+ // This function takes `meta` which is a list of objects containing `operand`, `name` and `default`.
+ function interpretDict(dict, meta, strings) {
+ var newDict = {};
+ var value;
+
+ // Because we also want to include missing values, we start out from the meta list
+ // and lookup values in the dict.
+ for (var i = 0; i < meta.length; i += 1) {
+ var m = meta[i];
+
+ if (Array.isArray(m.type)) {
+ var values = [];
+ values.length = m.type.length;
+ for (var j = 0; j < m.type.length; j++) {
+ value = dict[m.op] !== undefined ? dict[m.op][j] : undefined;
+ if (value === undefined) {
+ value =
+ m.value !== undefined && m.value[j] !== undefined
+ ? m.value[j]
+ : null;
+ }
+ if (m.type[j] === 'SID') {
+ value = getCFFString(strings, value);
+ }
+ values[j] = value;
+ }
+ newDict[m.name] = values;
+ } else {
+ value = dict[m.op];
+ if (value === undefined) {
+ value = m.value !== undefined ? m.value : null;
+ }
+
+ if (m.type === 'SID') {
+ value = getCFFString(strings, value);
+ }
+ newDict[m.name] = value;
+ }
+ }
+
+ return newDict;
+ }
+
+ // Parse the CFF header.
+ function parseCFFHeader(data, start) {
+ var header = {};
+ header.formatMajor = parse.getCard8(data, start);
+ header.formatMinor = parse.getCard8(data, start + 1);
+ header.size = parse.getCard8(data, start + 2);
+ header.offsetSize = parse.getCard8(data, start + 3);
+ header.startOffset = start;
+ header.endOffset = start + 4;
+ return header;
+ }
+
+ var TOP_DICT_META = [
+ { name: 'version', op: 0, type: 'SID' },
+ { name: 'notice', op: 1, type: 'SID' },
+ { name: 'copyright', op: 1200, type: 'SID' },
+ { name: 'fullName', op: 2, type: 'SID' },
+ { name: 'familyName', op: 3, type: 'SID' },
+ { name: 'weight', op: 4, type: 'SID' },
+ { name: 'isFixedPitch', op: 1201, type: 'number', value: 0 },
+ { name: 'italicAngle', op: 1202, type: 'number', value: 0 },
+ { name: 'underlinePosition', op: 1203, type: 'number', value: -100 },
+ { name: 'underlineThickness', op: 1204, type: 'number', value: 50 },
+ { name: 'paintType', op: 1205, type: 'number', value: 0 },
+ { name: 'charstringType', op: 1206, type: 'number', value: 2 },
+ {
+ name: 'fontMatrix',
+ op: 1207,
+ type: ['real', 'real', 'real', 'real', 'real', 'real'],
+ value: [0.001, 0, 0, 0.001, 0, 0]
+ },
+ { name: 'uniqueId', op: 13, type: 'number' },
+ {
+ name: 'fontBBox',
+ op: 5,
+ type: ['number', 'number', 'number', 'number'],
+ value: [0, 0, 0, 0]
+ },
+ { name: 'strokeWidth', op: 1208, type: 'number', value: 0 },
+ { name: 'xuid', op: 14, type: [], value: null },
+ { name: 'charset', op: 15, type: 'offset', value: 0 },
+ { name: 'encoding', op: 16, type: 'offset', value: 0 },
+ { name: 'charStrings', op: 17, type: 'offset', value: 0 },
+ { name: 'private', op: 18, type: ['number', 'offset'], value: [0, 0] },
+ { name: 'ros', op: 1230, type: ['SID', 'SID', 'number'] },
+ { name: 'cidFontVersion', op: 1231, type: 'number', value: 0 },
+ { name: 'cidFontRevision', op: 1232, type: 'number', value: 0 },
+ { name: 'cidFontType', op: 1233, type: 'number', value: 0 },
+ { name: 'cidCount', op: 1234, type: 'number', value: 8720 },
+ { name: 'uidBase', op: 1235, type: 'number' },
+ { name: 'fdArray', op: 1236, type: 'offset' },
+ { name: 'fdSelect', op: 1237, type: 'offset' },
+ { name: 'fontName', op: 1238, type: 'SID' }
+ ];
+
+ var PRIVATE_DICT_META = [
+ { name: 'subrs', op: 19, type: 'offset', value: 0 },
+ { name: 'defaultWidthX', op: 20, type: 'number', value: 0 },
+ { name: 'nominalWidthX', op: 21, type: 'number', value: 0 }
+ ];
+
+ // Parse the CFF top dictionary. A CFF table can contain multiple fonts, each with their own top dictionary.
+ // The top dictionary contains the essential metadata for the font, together with the private dictionary.
+ function parseCFFTopDict(data, strings) {
+ var dict = parseCFFDict(data, 0, data.byteLength);
+ return interpretDict(dict, TOP_DICT_META, strings);
+ }
+
+ // Parse the CFF private dictionary. We don't fully parse out all the values, only the ones we need.
+ function parseCFFPrivateDict(data, start, size, strings) {
+ var dict = parseCFFDict(data, start, size);
+ return interpretDict(dict, PRIVATE_DICT_META, strings);
+ }
+
+ // Returns a list of "Top DICT"s found using an INDEX list.
+ // Used to read both the usual high-level Top DICTs and also the FDArray
+ // discovered inside CID-keyed fonts. When a Top DICT has a reference to
+ // a Private DICT that is read and saved into the Top DICT.
+ //
+ // In addition to the expected/optional values as outlined in TOP_DICT_META
+ // the following values might be saved into the Top DICT.
+ //
+ // _subrs [] array of local CFF subroutines from Private DICT
+ // _subrsBias bias value computed from number of subroutines
+ // (see calcCFFSubroutineBias() and parseCFFCharstring())
+ // _defaultWidthX default widths for CFF characters
+ // _nominalWidthX bias added to width embedded within glyph description
+ //
+ // _privateDict saved copy of parsed Private DICT from Top DICT
+ function gatherCFFTopDicts(data, start, cffIndex, strings) {
+ var topDictArray = [];
+ for (var iTopDict = 0; iTopDict < cffIndex.length; iTopDict += 1) {
+ var topDictData = new DataView(new Uint8Array(cffIndex[iTopDict]).buffer);
+ var topDict = parseCFFTopDict(topDictData, strings);
+ topDict._subrs = [];
+ topDict._subrsBias = 0;
+ var privateSize = topDict.private[0];
+ var privateOffset = topDict.private[1];
+ if (privateSize !== 0 && privateOffset !== 0) {
+ var privateDict = parseCFFPrivateDict(
+ data,
+ privateOffset + start,
+ privateSize,
+ strings
+ );
+ topDict._defaultWidthX = privateDict.defaultWidthX;
+ topDict._nominalWidthX = privateDict.nominalWidthX;
+ if (privateDict.subrs !== 0) {
+ var subrOffset = privateOffset + privateDict.subrs;
+ var subrIndex = parseCFFIndex(data, subrOffset + start);
+ topDict._subrs = subrIndex.objects;
+ topDict._subrsBias = calcCFFSubroutineBias(topDict._subrs);
+ }
+ topDict._privateDict = privateDict;
+ }
+ topDictArray.push(topDict);
+ }
+ return topDictArray;
+ }
+
+ // Parse the CFF charset table, which contains internal names for all the glyphs.
+ // This function will return a list of glyph names.
+ // See Adobe TN #5176 chapter 13, "Charsets".
+ function parseCFFCharset(data, start, nGlyphs, strings) {
+ var sid;
+ var count;
+ var parser = new parse.Parser(data, start);
+
+ // The .notdef glyph is not included, so subtract 1.
+ nGlyphs -= 1;
+ var charset = ['.notdef'];
+
+ var format = parser.parseCard8();
+ if (format === 0) {
+ for (var i = 0; i < nGlyphs; i += 1) {
+ sid = parser.parseSID();
+ charset.push(getCFFString(strings, sid));
+ }
+ } else if (format === 1) {
+ while (charset.length <= nGlyphs) {
+ sid = parser.parseSID();
+ count = parser.parseCard8();
+ for (var i$1 = 0; i$1 <= count; i$1 += 1) {
+ charset.push(getCFFString(strings, sid));
+ sid += 1;
+ }
+ }
+ } else if (format === 2) {
+ while (charset.length <= nGlyphs) {
+ sid = parser.parseSID();
+ count = parser.parseCard16();
+ for (var i$2 = 0; i$2 <= count; i$2 += 1) {
+ charset.push(getCFFString(strings, sid));
+ sid += 1;
+ }
+ }
+ } else {
+ throw new Error('Unknown charset format ' + format);
+ }
+
+ return charset;
+ }
+
+ // Parse the CFF encoding data. Only one encoding can be specified per font.
+ // See Adobe TN #5176 chapter 12, "Encodings".
+ function parseCFFEncoding(data, start, charset) {
+ var code;
+ var enc = {};
+ var parser = new parse.Parser(data, start);
+ var format = parser.parseCard8();
+ if (format === 0) {
+ var nCodes = parser.parseCard8();
+ for (var i = 0; i < nCodes; i += 1) {
+ code = parser.parseCard8();
+ enc[code] = i;
+ }
+ } else if (format === 1) {
+ var nRanges = parser.parseCard8();
+ code = 1;
+ for (var i$1 = 0; i$1 < nRanges; i$1 += 1) {
+ var first = parser.parseCard8();
+ var nLeft = parser.parseCard8();
+ for (var j = first; j <= first + nLeft; j += 1) {
+ enc[j] = code;
+ code += 1;
+ }
+ }
+ } else {
+ throw new Error('Unknown encoding format ' + format);
+ }
+
+ return new CffEncoding(enc, charset);
+ }
+
+ // Take in charstring code and return a Glyph object.
+ // The encoding is described in the Type 2 Charstring Format
+ // https://www.microsoft.com/typography/OTSPEC/charstr2.htm
+ function parseCFFCharstring(font, glyph, code) {
+ var c1x;
+ var c1y;
+ var c2x;
+ var c2y;
+ var p = new Path();
+ var stack = [];
+ var nStems = 0;
+ var haveWidth = false;
+ var open = false;
+ var x = 0;
+ var y = 0;
+ var subrs;
+ var subrsBias;
+ var defaultWidthX;
+ var nominalWidthX;
+ if (font.isCIDFont) {
+ var fdIndex = font.tables.cff.topDict._fdSelect[glyph.index];
+ var fdDict = font.tables.cff.topDict._fdArray[fdIndex];
+ subrs = fdDict._subrs;
+ subrsBias = fdDict._subrsBias;
+ defaultWidthX = fdDict._defaultWidthX;
+ nominalWidthX = fdDict._nominalWidthX;
+ } else {
+ subrs = font.tables.cff.topDict._subrs;
+ subrsBias = font.tables.cff.topDict._subrsBias;
+ defaultWidthX = font.tables.cff.topDict._defaultWidthX;
+ nominalWidthX = font.tables.cff.topDict._nominalWidthX;
+ }
+ var width = defaultWidthX;
+
+ function newContour(x, y) {
+ if (open) {
+ p.closePath();
+ }
+
+ p.moveTo(x, y);
+ open = true;
+ }
+
+ function parseStems() {
+ var hasWidthArg;
+
+ // The number of stem operators on the stack is always even.
+ // If the value is uneven, that means a width is specified.
+ hasWidthArg = stack.length % 2 !== 0;
+ if (hasWidthArg && !haveWidth) {
+ width = stack.shift() + nominalWidthX;
+ }
+
+ nStems += stack.length >> 1;
+ stack.length = 0;
+ haveWidth = true;
+ }
+
+ function parse$$1(code) {
+ var b1;
+ var b2;
+ var b3;
+ var b4;
+ var codeIndex;
+ var subrCode;
+ var jpx;
+ var jpy;
+ var c3x;
+ var c3y;
+ var c4x;
+ var c4y;
+
+ var i = 0;
+ while (i < code.length) {
+ var v = code[i];
+ i += 1;
+ switch (v) {
+ case 1: // hstem
+ parseStems();
+ break;
+ case 3: // vstem
+ parseStems();
+ break;
+ case 4: // vmoveto
+ if (stack.length > 1 && !haveWidth) {
+ width = stack.shift() + nominalWidthX;
+ haveWidth = true;
+ }
+
+ y += stack.pop();
+ newContour(x, y);
+ break;
+ case 5: // rlineto
+ while (stack.length > 0) {
+ x += stack.shift();
+ y += stack.shift();
+ p.lineTo(x, y);
+ }
+
+ break;
+ case 6: // hlineto
+ while (stack.length > 0) {
+ x += stack.shift();
+ p.lineTo(x, y);
+ if (stack.length === 0) {
+ break;
+ }
+
+ y += stack.shift();
+ p.lineTo(x, y);
+ }
+
+ break;
+ case 7: // vlineto
+ while (stack.length > 0) {
+ y += stack.shift();
+ p.lineTo(x, y);
+ if (stack.length === 0) {
+ break;
+ }
+
+ x += stack.shift();
+ p.lineTo(x, y);
+ }
+
+ break;
+ case 8: // rrcurveto
+ while (stack.length > 0) {
+ c1x = x + stack.shift();
+ c1y = y + stack.shift();
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ x = c2x + stack.shift();
+ y = c2y + stack.shift();
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ }
+
+ break;
+ case 10: // callsubr
+ codeIndex = stack.pop() + subrsBias;
+ subrCode = subrs[codeIndex];
+ if (subrCode) {
+ parse$$1(subrCode);
+ }
+
+ break;
+ case 11: // return
+ return;
+ case 12: // flex operators
+ v = code[i];
+ i += 1;
+ switch (v) {
+ case 35: // flex
+ // |- dx1 dy1 dx2 dy2 dx3 dy3 dx4 dy4 dx5 dy5 dx6 dy6 fd flex (12 35) |-
+ c1x = x + stack.shift(); // dx1
+ c1y = y + stack.shift(); // dy1
+ c2x = c1x + stack.shift(); // dx2
+ c2y = c1y + stack.shift(); // dy2
+ jpx = c2x + stack.shift(); // dx3
+ jpy = c2y + stack.shift(); // dy3
+ c3x = jpx + stack.shift(); // dx4
+ c3y = jpy + stack.shift(); // dy4
+ c4x = c3x + stack.shift(); // dx5
+ c4y = c3y + stack.shift(); // dy5
+ x = c4x + stack.shift(); // dx6
+ y = c4y + stack.shift(); // dy6
+ stack.shift(); // flex depth
+ p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
+ p.curveTo(c3x, c3y, c4x, c4y, x, y);
+ break;
+ case 34: // hflex
+ // |- dx1 dx2 dy2 dx3 dx4 dx5 dx6 hflex (12 34) |-
+ c1x = x + stack.shift(); // dx1
+ c1y = y; // dy1
+ c2x = c1x + stack.shift(); // dx2
+ c2y = c1y + stack.shift(); // dy2
+ jpx = c2x + stack.shift(); // dx3
+ jpy = c2y; // dy3
+ c3x = jpx + stack.shift(); // dx4
+ c3y = c2y; // dy4
+ c4x = c3x + stack.shift(); // dx5
+ c4y = y; // dy5
+ x = c4x + stack.shift(); // dx6
+ p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
+ p.curveTo(c3x, c3y, c4x, c4y, x, y);
+ break;
+ case 36: // hflex1
+ // |- dx1 dy1 dx2 dy2 dx3 dx4 dx5 dy5 dx6 hflex1 (12 36) |-
+ c1x = x + stack.shift(); // dx1
+ c1y = y + stack.shift(); // dy1
+ c2x = c1x + stack.shift(); // dx2
+ c2y = c1y + stack.shift(); // dy2
+ jpx = c2x + stack.shift(); // dx3
+ jpy = c2y; // dy3
+ c3x = jpx + stack.shift(); // dx4
+ c3y = c2y; // dy4
+ c4x = c3x + stack.shift(); // dx5
+ c4y = c3y + stack.shift(); // dy5
+ x = c4x + stack.shift(); // dx6
+ p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
+ p.curveTo(c3x, c3y, c4x, c4y, x, y);
+ break;
+ case 37: // flex1
+ // |- dx1 dy1 dx2 dy2 dx3 dy3 dx4 dy4 dx5 dy5 d6 flex1 (12 37) |-
+ c1x = x + stack.shift(); // dx1
+ c1y = y + stack.shift(); // dy1
+ c2x = c1x + stack.shift(); // dx2
+ c2y = c1y + stack.shift(); // dy2
+ jpx = c2x + stack.shift(); // dx3
+ jpy = c2y + stack.shift(); // dy3
+ c3x = jpx + stack.shift(); // dx4
+ c3y = jpy + stack.shift(); // dy4
+ c4x = c3x + stack.shift(); // dx5
+ c4y = c3y + stack.shift(); // dy5
+ if (Math.abs(c4x - x) > Math.abs(c4y - y)) {
+ x = c4x + stack.shift();
+ } else {
+ y = c4y + stack.shift();
+ }
+
+ p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
+ p.curveTo(c3x, c3y, c4x, c4y, x, y);
+ break;
+ default:
+ console.log(
+ 'Glyph ' + glyph.index + ': unknown operator ' + 1200 + v
+ );
+ stack.length = 0;
+ }
+ break;
+ case 14: // endchar
+ if (stack.length > 0 && !haveWidth) {
+ width = stack.shift() + nominalWidthX;
+ haveWidth = true;
+ }
+
+ if (open) {
+ p.closePath();
+ open = false;
+ }
+
+ break;
+ case 18: // hstemhm
+ parseStems();
+ break;
+ case 19: // hintmask
+ case 20: // cntrmask
+ parseStems();
+ i += (nStems + 7) >> 3;
+ break;
+ case 21: // rmoveto
+ if (stack.length > 2 && !haveWidth) {
+ width = stack.shift() + nominalWidthX;
+ haveWidth = true;
+ }
+
+ y += stack.pop();
+ x += stack.pop();
+ newContour(x, y);
+ break;
+ case 22: // hmoveto
+ if (stack.length > 1 && !haveWidth) {
+ width = stack.shift() + nominalWidthX;
+ haveWidth = true;
+ }
+
+ x += stack.pop();
+ newContour(x, y);
+ break;
+ case 23: // vstemhm
+ parseStems();
+ break;
+ case 24: // rcurveline
+ while (stack.length > 2) {
+ c1x = x + stack.shift();
+ c1y = y + stack.shift();
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ x = c2x + stack.shift();
+ y = c2y + stack.shift();
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ }
+
+ x += stack.shift();
+ y += stack.shift();
+ p.lineTo(x, y);
+ break;
+ case 25: // rlinecurve
+ while (stack.length > 6) {
+ x += stack.shift();
+ y += stack.shift();
+ p.lineTo(x, y);
+ }
+
+ c1x = x + stack.shift();
+ c1y = y + stack.shift();
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ x = c2x + stack.shift();
+ y = c2y + stack.shift();
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ break;
+ case 26: // vvcurveto
+ if (stack.length % 2) {
+ x += stack.shift();
+ }
+
+ while (stack.length > 0) {
+ c1x = x;
+ c1y = y + stack.shift();
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ x = c2x;
+ y = c2y + stack.shift();
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ }
+
+ break;
+ case 27: // hhcurveto
+ if (stack.length % 2) {
+ y += stack.shift();
+ }
+
+ while (stack.length > 0) {
+ c1x = x + stack.shift();
+ c1y = y;
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ x = c2x + stack.shift();
+ y = c2y;
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ }
+
+ break;
+ case 28: // shortint
+ b1 = code[i];
+ b2 = code[i + 1];
+ stack.push(((b1 << 24) | (b2 << 16)) >> 16);
+ i += 2;
+ break;
+ case 29: // callgsubr
+ codeIndex = stack.pop() + font.gsubrsBias;
+ subrCode = font.gsubrs[codeIndex];
+ if (subrCode) {
+ parse$$1(subrCode);
+ }
+
+ break;
+ case 30: // vhcurveto
+ while (stack.length > 0) {
+ c1x = x;
+ c1y = y + stack.shift();
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ x = c2x + stack.shift();
+ y = c2y + (stack.length === 1 ? stack.shift() : 0);
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ if (stack.length === 0) {
+ break;
+ }
+
+ c1x = x + stack.shift();
+ c1y = y;
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ y = c2y + stack.shift();
+ x = c2x + (stack.length === 1 ? stack.shift() : 0);
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ }
+
+ break;
+ case 31: // hvcurveto
+ while (stack.length > 0) {
+ c1x = x + stack.shift();
+ c1y = y;
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ y = c2y + stack.shift();
+ x = c2x + (stack.length === 1 ? stack.shift() : 0);
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ if (stack.length === 0) {
+ break;
+ }
+
+ c1x = x;
+ c1y = y + stack.shift();
+ c2x = c1x + stack.shift();
+ c2y = c1y + stack.shift();
+ x = c2x + stack.shift();
+ y = c2y + (stack.length === 1 ? stack.shift() : 0);
+ p.curveTo(c1x, c1y, c2x, c2y, x, y);
+ }
+
+ break;
+ default:
+ if (v < 32) {
+ console.log('Glyph ' + glyph.index + ': unknown operator ' + v);
+ } else if (v < 247) {
+ stack.push(v - 139);
+ } else if (v < 251) {
+ b1 = code[i];
+ i += 1;
+ stack.push((v - 247) * 256 + b1 + 108);
+ } else if (v < 255) {
+ b1 = code[i];
+ i += 1;
+ stack.push(-(v - 251) * 256 - b1 - 108);
+ } else {
+ b1 = code[i];
+ b2 = code[i + 1];
+ b3 = code[i + 2];
+ b4 = code[i + 3];
+ i += 4;
+ stack.push(((b1 << 24) | (b2 << 16) | (b3 << 8) | b4) / 65536);
+ }
+ }
+ }
+ }
+
+ parse$$1(code);
+
+ glyph.advanceWidth = width;
+ return p;
+ }
+
+ function parseCFFFDSelect(data, start, nGlyphs, fdArrayCount) {
+ var fdSelect = [];
+ var fdIndex;
+ var parser = new parse.Parser(data, start);
+ var format = parser.parseCard8();
+ if (format === 0) {
+ // Simple list of nGlyphs elements
+ for (var iGid = 0; iGid < nGlyphs; iGid++) {
+ fdIndex = parser.parseCard8();
+ if (fdIndex >= fdArrayCount) {
+ throw new Error(
+ 'CFF table CID Font FDSelect has bad FD index value ' +
+ fdIndex +
+ ' (FD count ' +
+ fdArrayCount +
+ ')'
+ );
+ }
+ fdSelect.push(fdIndex);
+ }
+ } else if (format === 3) {
+ // Ranges
+ var nRanges = parser.parseCard16();
+ var first = parser.parseCard16();
+ if (first !== 0) {
+ throw new Error(
+ 'CFF Table CID Font FDSelect format 3 range has bad initial GID ' +
+ first
+ );
+ }
+ var next;
+ for (var iRange = 0; iRange < nRanges; iRange++) {
+ fdIndex = parser.parseCard8();
+ next = parser.parseCard16();
+ if (fdIndex >= fdArrayCount) {
+ throw new Error(
+ 'CFF table CID Font FDSelect has bad FD index value ' +
+ fdIndex +
+ ' (FD count ' +
+ fdArrayCount +
+ ')'
+ );
+ }
+ if (next > nGlyphs) {
+ throw new Error(
+ 'CFF Table CID Font FDSelect format 3 range has bad GID ' + next
+ );
+ }
+ for (; first < next; first++) {
+ fdSelect.push(fdIndex);
+ }
+ first = next;
+ }
+ if (next !== nGlyphs) {
+ throw new Error(
+ 'CFF Table CID Font FDSelect format 3 range has bad final GID ' + next
+ );
+ }
+ } else {
+ throw new Error(
+ 'CFF Table CID Font FDSelect table has unsupported format ' + format
+ );
+ }
+ return fdSelect;
+ }
+
+ // Parse the `CFF` table, which contains the glyph outlines in PostScript format.
+ function parseCFFTable(data, start, font) {
+ font.tables.cff = {};
+ var header = parseCFFHeader(data, start);
+ var nameIndex = parseCFFIndex(data, header.endOffset, parse.bytesToString);
+ var topDictIndex = parseCFFIndex(data, nameIndex.endOffset);
+ var stringIndex = parseCFFIndex(
+ data,
+ topDictIndex.endOffset,
+ parse.bytesToString
+ );
+ var globalSubrIndex = parseCFFIndex(data, stringIndex.endOffset);
+ font.gsubrs = globalSubrIndex.objects;
+ font.gsubrsBias = calcCFFSubroutineBias(font.gsubrs);
+
+ var topDictArray = gatherCFFTopDicts(
+ data,
+ start,
+ topDictIndex.objects,
+ stringIndex.objects
+ );
+ if (topDictArray.length !== 1) {
+ throw new Error(
+ "CFF table has too many fonts in 'FontSet' - count of fonts NameIndex.length = " +
+ topDictArray.length
+ );
+ }
+
+ var topDict = topDictArray[0];
+ font.tables.cff.topDict = topDict;
+
+ if (topDict._privateDict) {
+ font.defaultWidthX = topDict._privateDict.defaultWidthX;
+ font.nominalWidthX = topDict._privateDict.nominalWidthX;
+ }
+
+ if (topDict.ros[0] !== undefined && topDict.ros[1] !== undefined) {
+ font.isCIDFont = true;
+ }
+
+ if (font.isCIDFont) {
+ var fdArrayOffset = topDict.fdArray;
+ var fdSelectOffset = topDict.fdSelect;
+ if (fdArrayOffset === 0 || fdSelectOffset === 0) {
+ throw new Error(
+ 'Font is marked as a CID font, but FDArray and/or FDSelect information is missing'
+ );
+ }
+ fdArrayOffset += start;
+ var fdArrayIndex = parseCFFIndex(data, fdArrayOffset);
+ var fdArray = gatherCFFTopDicts(
+ data,
+ start,
+ fdArrayIndex.objects,
+ stringIndex.objects
+ );
+ topDict._fdArray = fdArray;
+ fdSelectOffset += start;
+ topDict._fdSelect = parseCFFFDSelect(
+ data,
+ fdSelectOffset,
+ font.numGlyphs,
+ fdArray.length
+ );
+ }
+
+ var privateDictOffset = start + topDict.private[1];
+ var privateDict = parseCFFPrivateDict(
+ data,
+ privateDictOffset,
+ topDict.private[0],
+ stringIndex.objects
+ );
+ font.defaultWidthX = privateDict.defaultWidthX;
+ font.nominalWidthX = privateDict.nominalWidthX;
+
+ if (privateDict.subrs !== 0) {
+ var subrOffset = privateDictOffset + privateDict.subrs;
+ var subrIndex = parseCFFIndex(data, subrOffset);
+ font.subrs = subrIndex.objects;
+ font.subrsBias = calcCFFSubroutineBias(font.subrs);
+ } else {
+ font.subrs = [];
+ font.subrsBias = 0;
+ }
+
+ // Offsets in the top dict are relative to the beginning of the CFF data, so add the CFF start offset.
+ var charStringsIndex = parseCFFIndex(data, start + topDict.charStrings);
+ font.nGlyphs = charStringsIndex.objects.length;
+
+ var charset = parseCFFCharset(
+ data,
+ start + topDict.charset,
+ font.nGlyphs,
+ stringIndex.objects
+ );
+ if (topDict.encoding === 0) {
+ // Standard encoding
+ font.cffEncoding = new CffEncoding(cffStandardEncoding, charset);
+ } else if (topDict.encoding === 1) {
+ // Expert encoding
+ font.cffEncoding = new CffEncoding(cffExpertEncoding, charset);
+ } else {
+ font.cffEncoding = parseCFFEncoding(
+ data,
+ start + topDict.encoding,
+ charset
+ );
+ }
+
+ // Prefer the CMAP encoding to the CFF encoding.
+ font.encoding = font.encoding || font.cffEncoding;
+
+ font.glyphs = new glyphset.GlyphSet(font);
+ for (var i = 0; i < font.nGlyphs; i += 1) {
+ var charString = charStringsIndex.objects[i];
+ font.glyphs.push(
+ i,
+ glyphset.cffGlyphLoader(font, i, parseCFFCharstring, charString)
+ );
+ }
+ }
+
+ // Convert a string to a String ID (SID).
+ // The list of strings is modified in place.
+ function encodeString(s, strings) {
+ var sid;
+
+ // Is the string in the CFF standard strings?
+ var i = cffStandardStrings.indexOf(s);
+ if (i >= 0) {
+ sid = i;
+ }
+
+ // Is the string already in the string index?
+ i = strings.indexOf(s);
+ if (i >= 0) {
+ sid = i + cffStandardStrings.length;
+ } else {
+ sid = cffStandardStrings.length + strings.length;
+ strings.push(s);
+ }
+
+ return sid;
+ }
+
+ function makeHeader() {
+ return new table.Record('Header', [
+ { name: 'major', type: 'Card8', value: 1 },
+ { name: 'minor', type: 'Card8', value: 0 },
+ { name: 'hdrSize', type: 'Card8', value: 4 },
+ { name: 'major', type: 'Card8', value: 1 }
+ ]);
+ }
+
+ function makeNameIndex(fontNames) {
+ var t = new table.Record('Name INDEX', [
+ { name: 'names', type: 'INDEX', value: [] }
+ ]);
+ t.names = [];
+ for (var i = 0; i < fontNames.length; i += 1) {
+ t.names.push({ name: 'name_' + i, type: 'NAME', value: fontNames[i] });
+ }
+
+ return t;
+ }
+
+ // Given a dictionary's metadata, create a DICT structure.
+ function makeDict(meta, attrs, strings) {
+ var m = {};
+ for (var i = 0; i < meta.length; i += 1) {
+ var entry = meta[i];
+ var value = attrs[entry.name];
+ if (value !== undefined && !equals(value, entry.value)) {
+ if (entry.type === 'SID') {
+ value = encodeString(value, strings);
+ }
+
+ m[entry.op] = { name: entry.name, type: entry.type, value: value };
+ }
+ }
+
+ return m;
+ }
+
+ // The Top DICT houses the global font attributes.
+ function makeTopDict(attrs, strings) {
+ var t = new table.Record('Top DICT', [
+ { name: 'dict', type: 'DICT', value: {} }
+ ]);
+ t.dict = makeDict(TOP_DICT_META, attrs, strings);
+ return t;
+ }
+
+ function makeTopDictIndex(topDict) {
+ var t = new table.Record('Top DICT INDEX', [
+ { name: 'topDicts', type: 'INDEX', value: [] }
+ ]);
+ t.topDicts = [{ name: 'topDict_0', type: 'TABLE', value: topDict }];
+ return t;
+ }
+
+ function makeStringIndex(strings) {
+ var t = new table.Record('String INDEX', [
+ { name: 'strings', type: 'INDEX', value: [] }
+ ]);
+ t.strings = [];
+ for (var i = 0; i < strings.length; i += 1) {
+ t.strings.push({
+ name: 'string_' + i,
+ type: 'STRING',
+ value: strings[i]
+ });
+ }
+
+ return t;
+ }
+
+ function makeGlobalSubrIndex() {
+ // Currently we don't use subroutines.
+ return new table.Record('Global Subr INDEX', [
+ { name: 'subrs', type: 'INDEX', value: [] }
+ ]);
+ }
+
+ function makeCharsets(glyphNames, strings) {
+ var t = new table.Record('Charsets', [
+ { name: 'format', type: 'Card8', value: 0 }
+ ]);
+ for (var i = 0; i < glyphNames.length; i += 1) {
+ var glyphName = glyphNames[i];
+ var glyphSID = encodeString(glyphName, strings);
+ t.fields.push({ name: 'glyph_' + i, type: 'SID', value: glyphSID });
+ }
+
+ return t;
+ }
+
+ function glyphToOps(glyph) {
+ var ops = [];
+ var path = glyph.path;
+ ops.push({ name: 'width', type: 'NUMBER', value: glyph.advanceWidth });
+ var x = 0;
+ var y = 0;
+ for (var i = 0; i < path.commands.length; i += 1) {
+ var dx = void 0;
+ var dy = void 0;
+ var cmd = path.commands[i];
+ if (cmd.type === 'Q') {
+ // CFF only supports bézier curves, so convert the quad to a bézier.
+ var _13 = 1 / 3;
+ var _23 = 2 / 3;
+
+ // We're going to create a new command so we don't change the original path.
+ cmd = {
+ type: 'C',
+ x: cmd.x,
+ y: cmd.y,
+ x1: _13 * x + _23 * cmd.x1,
+ y1: _13 * y + _23 * cmd.y1,
+ x2: _13 * cmd.x + _23 * cmd.x1,
+ y2: _13 * cmd.y + _23 * cmd.y1
+ };
+ }
+
+ if (cmd.type === 'M') {
+ dx = Math.round(cmd.x - x);
+ dy = Math.round(cmd.y - y);
+ ops.push({ name: 'dx', type: 'NUMBER', value: dx });
+ ops.push({ name: 'dy', type: 'NUMBER', value: dy });
+ ops.push({ name: 'rmoveto', type: 'OP', value: 21 });
+ x = Math.round(cmd.x);
+ y = Math.round(cmd.y);
+ } else if (cmd.type === 'L') {
+ dx = Math.round(cmd.x - x);
+ dy = Math.round(cmd.y - y);
+ ops.push({ name: 'dx', type: 'NUMBER', value: dx });
+ ops.push({ name: 'dy', type: 'NUMBER', value: dy });
+ ops.push({ name: 'rlineto', type: 'OP', value: 5 });
+ x = Math.round(cmd.x);
+ y = Math.round(cmd.y);
+ } else if (cmd.type === 'C') {
+ var dx1 = Math.round(cmd.x1 - x);
+ var dy1 = Math.round(cmd.y1 - y);
+ var dx2 = Math.round(cmd.x2 - cmd.x1);
+ var dy2 = Math.round(cmd.y2 - cmd.y1);
+ dx = Math.round(cmd.x - cmd.x2);
+ dy = Math.round(cmd.y - cmd.y2);
+ ops.push({ name: 'dx1', type: 'NUMBER', value: dx1 });
+ ops.push({ name: 'dy1', type: 'NUMBER', value: dy1 });
+ ops.push({ name: 'dx2', type: 'NUMBER', value: dx2 });
+ ops.push({ name: 'dy2', type: 'NUMBER', value: dy2 });
+ ops.push({ name: 'dx', type: 'NUMBER', value: dx });
+ ops.push({ name: 'dy', type: 'NUMBER', value: dy });
+ ops.push({ name: 'rrcurveto', type: 'OP', value: 8 });
+ x = Math.round(cmd.x);
+ y = Math.round(cmd.y);
+ }
+
+ // Contours are closed automatically.
+ }
+
+ ops.push({ name: 'endchar', type: 'OP', value: 14 });
+ return ops;
+ }
+
+ function makeCharStringsIndex(glyphs) {
+ var t = new table.Record('CharStrings INDEX', [
+ { name: 'charStrings', type: 'INDEX', value: [] }
+ ]);
+
+ for (var i = 0; i < glyphs.length; i += 1) {
+ var glyph = glyphs.get(i);
+ var ops = glyphToOps(glyph);
+ t.charStrings.push({ name: glyph.name, type: 'CHARSTRING', value: ops });
+ }
+
+ return t;
+ }
+
+ function makePrivateDict(attrs, strings) {
+ var t = new table.Record('Private DICT', [
+ { name: 'dict', type: 'DICT', value: {} }
+ ]);
+ t.dict = makeDict(PRIVATE_DICT_META, attrs, strings);
+ return t;
+ }
+
+ function makeCFFTable(glyphs, options) {
+ var t = new table.Table('CFF ', [
+ { name: 'header', type: 'RECORD' },
+ { name: 'nameIndex', type: 'RECORD' },
+ { name: 'topDictIndex', type: 'RECORD' },
+ { name: 'stringIndex', type: 'RECORD' },
+ { name: 'globalSubrIndex', type: 'RECORD' },
+ { name: 'charsets', type: 'RECORD' },
+ { name: 'charStringsIndex', type: 'RECORD' },
+ { name: 'privateDict', type: 'RECORD' }
+ ]);
+
+ var fontScale = 1 / options.unitsPerEm;
+ // We use non-zero values for the offsets so that the DICT encodes them.
+ // This is important because the size of the Top DICT plays a role in offset calculation,
+ // and the size shouldn't change after we've written correct offsets.
+ var attrs = {
+ version: options.version,
+ fullName: options.fullName,
+ familyName: options.familyName,
+ weight: options.weightName,
+ fontBBox: options.fontBBox || [0, 0, 0, 0],
+ fontMatrix: [fontScale, 0, 0, fontScale, 0, 0],
+ charset: 999,
+ encoding: 0,
+ charStrings: 999,
+ private: [0, 999]
+ };
+
+ var privateAttrs = {};
+
+ var glyphNames = [];
+ var glyph;
+
+ // Skip first glyph (.notdef)
+ for (var i = 1; i < glyphs.length; i += 1) {
+ glyph = glyphs.get(i);
+ glyphNames.push(glyph.name);
+ }
+
+ var strings = [];
+
+ t.header = makeHeader();
+ t.nameIndex = makeNameIndex([options.postScriptName]);
+ var topDict = makeTopDict(attrs, strings);
+ t.topDictIndex = makeTopDictIndex(topDict);
+ t.globalSubrIndex = makeGlobalSubrIndex();
+ t.charsets = makeCharsets(glyphNames, strings);
+ t.charStringsIndex = makeCharStringsIndex(glyphs);
+ t.privateDict = makePrivateDict(privateAttrs, strings);
+
+ // Needs to come at the end, to encode all custom strings used in the font.
+ t.stringIndex = makeStringIndex(strings);
+
+ var startOffset =
+ t.header.sizeOf() +
+ t.nameIndex.sizeOf() +
+ t.topDictIndex.sizeOf() +
+ t.stringIndex.sizeOf() +
+ t.globalSubrIndex.sizeOf();
+ attrs.charset = startOffset;
+
+ // We use the CFF standard encoding; proper encoding will be handled in cmap.
+ attrs.encoding = 0;
+ attrs.charStrings = attrs.charset + t.charsets.sizeOf();
+ attrs.private[1] = attrs.charStrings + t.charStringsIndex.sizeOf();
+
+ // Recreate the Top DICT INDEX with the correct offsets.
+ topDict = makeTopDict(attrs, strings);
+ t.topDictIndex = makeTopDictIndex(topDict);
+
+ return t;
+ }
+
+ var cff = { parse: parseCFFTable, make: makeCFFTable };
+
+ // The `head` table contains global information about the font.
+
+ // Parse the header `head` table
+ function parseHeadTable(data, start) {
+ var head = {};
+ var p = new parse.Parser(data, start);
+ head.version = p.parseVersion();
+ head.fontRevision = Math.round(p.parseFixed() * 1000) / 1000;
+ head.checkSumAdjustment = p.parseULong();
+ head.magicNumber = p.parseULong();
+ check.argument(
+ head.magicNumber === 0x5f0f3cf5,
+ 'Font header has wrong magic number.'
+ );
+ head.flags = p.parseUShort();
+ head.unitsPerEm = p.parseUShort();
+ head.created = p.parseLongDateTime();
+ head.modified = p.parseLongDateTime();
+ head.xMin = p.parseShort();
+ head.yMin = p.parseShort();
+ head.xMax = p.parseShort();
+ head.yMax = p.parseShort();
+ head.macStyle = p.parseUShort();
+ head.lowestRecPPEM = p.parseUShort();
+ head.fontDirectionHint = p.parseShort();
+ head.indexToLocFormat = p.parseShort();
+ head.glyphDataFormat = p.parseShort();
+ return head;
+ }
+
+ function makeHeadTable(options) {
+ // Apple Mac timestamp epoch is 01/01/1904 not 01/01/1970
+ var timestamp = Math.round(new Date().getTime() / 1000) + 2082844800;
+ var createdTimestamp = timestamp;
+
+ if (options.createdTimestamp) {
+ createdTimestamp = options.createdTimestamp + 2082844800;
+ }
+
+ return new table.Table(
+ 'head',
+ [
+ { name: 'version', type: 'FIXED', value: 0x00010000 },
+ { name: 'fontRevision', type: 'FIXED', value: 0x00010000 },
+ { name: 'checkSumAdjustment', type: 'ULONG', value: 0 },
+ { name: 'magicNumber', type: 'ULONG', value: 0x5f0f3cf5 },
+ { name: 'flags', type: 'USHORT', value: 0 },
+ { name: 'unitsPerEm', type: 'USHORT', value: 1000 },
+ { name: 'created', type: 'LONGDATETIME', value: createdTimestamp },
+ { name: 'modified', type: 'LONGDATETIME', value: timestamp },
+ { name: 'xMin', type: 'SHORT', value: 0 },
+ { name: 'yMin', type: 'SHORT', value: 0 },
+ { name: 'xMax', type: 'SHORT', value: 0 },
+ { name: 'yMax', type: 'SHORT', value: 0 },
+ { name: 'macStyle', type: 'USHORT', value: 0 },
+ { name: 'lowestRecPPEM', type: 'USHORT', value: 0 },
+ { name: 'fontDirectionHint', type: 'SHORT', value: 2 },
+ { name: 'indexToLocFormat', type: 'SHORT', value: 0 },
+ { name: 'glyphDataFormat', type: 'SHORT', value: 0 }
+ ],
+ options
+ );
+ }
+
+ var head = { parse: parseHeadTable, make: makeHeadTable };
+
+ // The `hhea` table contains information for horizontal layout.
+
+ // Parse the horizontal header `hhea` table
+ function parseHheaTable(data, start) {
+ var hhea = {};
+ var p = new parse.Parser(data, start);
+ hhea.version = p.parseVersion();
+ hhea.ascender = p.parseShort();
+ hhea.descender = p.parseShort();
+ hhea.lineGap = p.parseShort();
+ hhea.advanceWidthMax = p.parseUShort();
+ hhea.minLeftSideBearing = p.parseShort();
+ hhea.minRightSideBearing = p.parseShort();
+ hhea.xMaxExtent = p.parseShort();
+ hhea.caretSlopeRise = p.parseShort();
+ hhea.caretSlopeRun = p.parseShort();
+ hhea.caretOffset = p.parseShort();
+ p.relativeOffset += 8;
+ hhea.metricDataFormat = p.parseShort();
+ hhea.numberOfHMetrics = p.parseUShort();
+ return hhea;
+ }
+
+ function makeHheaTable(options) {
+ return new table.Table(
+ 'hhea',
+ [
+ { name: 'version', type: 'FIXED', value: 0x00010000 },
+ { name: 'ascender', type: 'FWORD', value: 0 },
+ { name: 'descender', type: 'FWORD', value: 0 },
+ { name: 'lineGap', type: 'FWORD', value: 0 },
+ { name: 'advanceWidthMax', type: 'UFWORD', value: 0 },
+ { name: 'minLeftSideBearing', type: 'FWORD', value: 0 },
+ { name: 'minRightSideBearing', type: 'FWORD', value: 0 },
+ { name: 'xMaxExtent', type: 'FWORD', value: 0 },
+ { name: 'caretSlopeRise', type: 'SHORT', value: 1 },
+ { name: 'caretSlopeRun', type: 'SHORT', value: 0 },
+ { name: 'caretOffset', type: 'SHORT', value: 0 },
+ { name: 'reserved1', type: 'SHORT', value: 0 },
+ { name: 'reserved2', type: 'SHORT', value: 0 },
+ { name: 'reserved3', type: 'SHORT', value: 0 },
+ { name: 'reserved4', type: 'SHORT', value: 0 },
+ { name: 'metricDataFormat', type: 'SHORT', value: 0 },
+ { name: 'numberOfHMetrics', type: 'USHORT', value: 0 }
+ ],
+ options
+ );
+ }
+
+ var hhea = { parse: parseHheaTable, make: makeHheaTable };
+
+ // The `hmtx` table contains the horizontal metrics for all glyphs.
+
+ // Parse the `hmtx` table, which contains the horizontal metrics for all glyphs.
+ // This function augments the glyph array, adding the advanceWidth and leftSideBearing to each glyph.
+ function parseHmtxTable(data, start, numMetrics, numGlyphs, glyphs) {
+ var advanceWidth;
+ var leftSideBearing;
+ var p = new parse.Parser(data, start);
+ for (var i = 0; i < numGlyphs; i += 1) {
+ // If the font is monospaced, only one entry is needed. This last entry applies to all subsequent glyphs.
+ if (i < numMetrics) {
+ advanceWidth = p.parseUShort();
+ leftSideBearing = p.parseShort();
+ }
+
+ var glyph = glyphs.get(i);
+ glyph.advanceWidth = advanceWidth;
+ glyph.leftSideBearing = leftSideBearing;
+ }
+ }
+
+ function makeHmtxTable(glyphs) {
+ var t = new table.Table('hmtx', []);
+ for (var i = 0; i < glyphs.length; i += 1) {
+ var glyph = glyphs.get(i);
+ var advanceWidth = glyph.advanceWidth || 0;
+ var leftSideBearing = glyph.leftSideBearing || 0;
+ t.fields.push({
+ name: 'advanceWidth_' + i,
+ type: 'USHORT',
+ value: advanceWidth
+ });
+ t.fields.push({
+ name: 'leftSideBearing_' + i,
+ type: 'SHORT',
+ value: leftSideBearing
+ });
+ }
+
+ return t;
+ }
+
+ var hmtx = { parse: parseHmtxTable, make: makeHmtxTable };
+
+ // The `ltag` table stores IETF BCP-47 language tags. It allows supporting
+
+ function makeLtagTable(tags) {
+ var result = new table.Table('ltag', [
+ { name: 'version', type: 'ULONG', value: 1 },
+ { name: 'flags', type: 'ULONG', value: 0 },
+ { name: 'numTags', type: 'ULONG', value: tags.length }
+ ]);
+
+ var stringPool = '';
+ var stringPoolOffset = 12 + tags.length * 4;
+ for (var i = 0; i < tags.length; ++i) {
+ var pos = stringPool.indexOf(tags[i]);
+ if (pos < 0) {
+ pos = stringPool.length;
+ stringPool += tags[i];
+ }
+
+ result.fields.push({
+ name: 'offset ' + i,
+ type: 'USHORT',
+ value: stringPoolOffset + pos
+ });
+ result.fields.push({
+ name: 'length ' + i,
+ type: 'USHORT',
+ value: tags[i].length
+ });
+ }
+
+ result.fields.push({
+ name: 'stringPool',
+ type: 'CHARARRAY',
+ value: stringPool
+ });
+ return result;
+ }
+
+ function parseLtagTable(data, start) {
+ var p = new parse.Parser(data, start);
+ var tableVersion = p.parseULong();
+ check.argument(tableVersion === 1, 'Unsupported ltag table version.');
+ // The 'ltag' specification does not define any flags; skip the field.
+ p.skip('uLong', 1);
+ var numTags = p.parseULong();
+
+ var tags = [];
+ for (var i = 0; i < numTags; i++) {
+ var tag = '';
+ var offset = start + p.parseUShort();
+ var length = p.parseUShort();
+ for (var j = offset; j < offset + length; ++j) {
+ tag += String.fromCharCode(data.getInt8(j));
+ }
+
+ tags.push(tag);
+ }
+
+ return tags;
+ }
+
+ var ltag = { make: makeLtagTable, parse: parseLtagTable };
+
+ // The `maxp` table establishes the memory requirements for the font.
+
+ // Parse the maximum profile `maxp` table.
+ function parseMaxpTable(data, start) {
+ var maxp = {};
+ var p = new parse.Parser(data, start);
+ maxp.version = p.parseVersion();
+ maxp.numGlyphs = p.parseUShort();
+ if (maxp.version === 1.0) {
+ maxp.maxPoints = p.parseUShort();
+ maxp.maxContours = p.parseUShort();
+ maxp.maxCompositePoints = p.parseUShort();
+ maxp.maxCompositeContours = p.parseUShort();
+ maxp.maxZones = p.parseUShort();
+ maxp.maxTwilightPoints = p.parseUShort();
+ maxp.maxStorage = p.parseUShort();
+ maxp.maxFunctionDefs = p.parseUShort();
+ maxp.maxInstructionDefs = p.parseUShort();
+ maxp.maxStackElements = p.parseUShort();
+ maxp.maxSizeOfInstructions = p.parseUShort();
+ maxp.maxComponentElements = p.parseUShort();
+ maxp.maxComponentDepth = p.parseUShort();
+ }
+
+ return maxp;
+ }
+
+ function makeMaxpTable(numGlyphs) {
+ return new table.Table('maxp', [
+ { name: 'version', type: 'FIXED', value: 0x00005000 },
+ { name: 'numGlyphs', type: 'USHORT', value: numGlyphs }
+ ]);
+ }
+
+ var maxp = { parse: parseMaxpTable, make: makeMaxpTable };
+
+ // The `name` naming table.
+
+ // NameIDs for the name table.
+ var nameTableNames = [
+ 'copyright', // 0
+ 'fontFamily', // 1
+ 'fontSubfamily', // 2
+ 'uniqueID', // 3
+ 'fullName', // 4
+ 'version', // 5
+ 'postScriptName', // 6
+ 'trademark', // 7
+ 'manufacturer', // 8
+ 'designer', // 9
+ 'description', // 10
+ 'manufacturerURL', // 11
+ 'designerURL', // 12
+ 'license', // 13
+ 'licenseURL', // 14
+ 'reserved', // 15
+ 'preferredFamily', // 16
+ 'preferredSubfamily', // 17
+ 'compatibleFullName', // 18
+ 'sampleText', // 19
+ 'postScriptFindFontName', // 20
+ 'wwsFamily', // 21
+ 'wwsSubfamily' // 22
+ ];
+
+ var macLanguages = {
+ 0: 'en',
+ 1: 'fr',
+ 2: 'de',
+ 3: 'it',
+ 4: 'nl',
+ 5: 'sv',
+ 6: 'es',
+ 7: 'da',
+ 8: 'pt',
+ 9: 'no',
+ 10: 'he',
+ 11: 'ja',
+ 12: 'ar',
+ 13: 'fi',
+ 14: 'el',
+ 15: 'is',
+ 16: 'mt',
+ 17: 'tr',
+ 18: 'hr',
+ 19: 'zh-Hant',
+ 20: 'ur',
+ 21: 'hi',
+ 22: 'th',
+ 23: 'ko',
+ 24: 'lt',
+ 25: 'pl',
+ 26: 'hu',
+ 27: 'es',
+ 28: 'lv',
+ 29: 'se',
+ 30: 'fo',
+ 31: 'fa',
+ 32: 'ru',
+ 33: 'zh',
+ 34: 'nl-BE',
+ 35: 'ga',
+ 36: 'sq',
+ 37: 'ro',
+ 38: 'cz',
+ 39: 'sk',
+ 40: 'si',
+ 41: 'yi',
+ 42: 'sr',
+ 43: 'mk',
+ 44: 'bg',
+ 45: 'uk',
+ 46: 'be',
+ 47: 'uz',
+ 48: 'kk',
+ 49: 'az-Cyrl',
+ 50: 'az-Arab',
+ 51: 'hy',
+ 52: 'ka',
+ 53: 'mo',
+ 54: 'ky',
+ 55: 'tg',
+ 56: 'tk',
+ 57: 'mn-CN',
+ 58: 'mn',
+ 59: 'ps',
+ 60: 'ks',
+ 61: 'ku',
+ 62: 'sd',
+ 63: 'bo',
+ 64: 'ne',
+ 65: 'sa',
+ 66: 'mr',
+ 67: 'bn',
+ 68: 'as',
+ 69: 'gu',
+ 70: 'pa',
+ 71: 'or',
+ 72: 'ml',
+ 73: 'kn',
+ 74: 'ta',
+ 75: 'te',
+ 76: 'si',
+ 77: 'my',
+ 78: 'km',
+ 79: 'lo',
+ 80: 'vi',
+ 81: 'id',
+ 82: 'tl',
+ 83: 'ms',
+ 84: 'ms-Arab',
+ 85: 'am',
+ 86: 'ti',
+ 87: 'om',
+ 88: 'so',
+ 89: 'sw',
+ 90: 'rw',
+ 91: 'rn',
+ 92: 'ny',
+ 93: 'mg',
+ 94: 'eo',
+ 128: 'cy',
+ 129: 'eu',
+ 130: 'ca',
+ 131: 'la',
+ 132: 'qu',
+ 133: 'gn',
+ 134: 'ay',
+ 135: 'tt',
+ 136: 'ug',
+ 137: 'dz',
+ 138: 'jv',
+ 139: 'su',
+ 140: 'gl',
+ 141: 'af',
+ 142: 'br',
+ 143: 'iu',
+ 144: 'gd',
+ 145: 'gv',
+ 146: 'ga',
+ 147: 'to',
+ 148: 'el-polyton',
+ 149: 'kl',
+ 150: 'az',
+ 151: 'nn'
+ };
+
+ // MacOS language ID → MacOS script ID
+ //
+ // Note that the script ID is not sufficient to determine what encoding
+ // to use in TrueType files. For some languages, MacOS used a modification
+ // of a mainstream script. For example, an Icelandic name would be stored
+ // with smRoman in the TrueType naming table, but the actual encoding
+ // is a special Icelandic version of the normal Macintosh Roman encoding.
+ // As another example, Inuktitut uses an 8-bit encoding for Canadian Aboriginal
+ // Syllables but MacOS had run out of available script codes, so this was
+ // done as a (pretty radical) "modification" of Ethiopic.
+ //
+ // http://unicode.org/Public/MAPPINGS/VENDORS/APPLE/Readme.txt
+ var macLanguageToScript = {
+ 0: 0, // langEnglish → smRoman
+ 1: 0, // langFrench → smRoman
+ 2: 0, // langGerman → smRoman
+ 3: 0, // langItalian → smRoman
+ 4: 0, // langDutch → smRoman
+ 5: 0, // langSwedish → smRoman
+ 6: 0, // langSpanish → smRoman
+ 7: 0, // langDanish → smRoman
+ 8: 0, // langPortuguese → smRoman
+ 9: 0, // langNorwegian → smRoman
+ 10: 5, // langHebrew → smHebrew
+ 11: 1, // langJapanese → smJapanese
+ 12: 4, // langArabic → smArabic
+ 13: 0, // langFinnish → smRoman
+ 14: 6, // langGreek → smGreek
+ 15: 0, // langIcelandic → smRoman (modified)
+ 16: 0, // langMaltese → smRoman
+ 17: 0, // langTurkish → smRoman (modified)
+ 18: 0, // langCroatian → smRoman (modified)
+ 19: 2, // langTradChinese → smTradChinese
+ 20: 4, // langUrdu → smArabic
+ 21: 9, // langHindi → smDevanagari
+ 22: 21, // langThai → smThai
+ 23: 3, // langKorean → smKorean
+ 24: 29, // langLithuanian → smCentralEuroRoman
+ 25: 29, // langPolish → smCentralEuroRoman
+ 26: 29, // langHungarian → smCentralEuroRoman
+ 27: 29, // langEstonian → smCentralEuroRoman
+ 28: 29, // langLatvian → smCentralEuroRoman
+ 29: 0, // langSami → smRoman
+ 30: 0, // langFaroese → smRoman (modified)
+ 31: 4, // langFarsi → smArabic (modified)
+ 32: 7, // langRussian → smCyrillic
+ 33: 25, // langSimpChinese → smSimpChinese
+ 34: 0, // langFlemish → smRoman
+ 35: 0, // langIrishGaelic → smRoman (modified)
+ 36: 0, // langAlbanian → smRoman
+ 37: 0, // langRomanian → smRoman (modified)
+ 38: 29, // langCzech → smCentralEuroRoman
+ 39: 29, // langSlovak → smCentralEuroRoman
+ 40: 0, // langSlovenian → smRoman (modified)
+ 41: 5, // langYiddish → smHebrew
+ 42: 7, // langSerbian → smCyrillic
+ 43: 7, // langMacedonian → smCyrillic
+ 44: 7, // langBulgarian → smCyrillic
+ 45: 7, // langUkrainian → smCyrillic (modified)
+ 46: 7, // langByelorussian → smCyrillic
+ 47: 7, // langUzbek → smCyrillic
+ 48: 7, // langKazakh → smCyrillic
+ 49: 7, // langAzerbaijani → smCyrillic
+ 50: 4, // langAzerbaijanAr → smArabic
+ 51: 24, // langArmenian → smArmenian
+ 52: 23, // langGeorgian → smGeorgian
+ 53: 7, // langMoldavian → smCyrillic
+ 54: 7, // langKirghiz → smCyrillic
+ 55: 7, // langTajiki → smCyrillic
+ 56: 7, // langTurkmen → smCyrillic
+ 57: 27, // langMongolian → smMongolian
+ 58: 7, // langMongolianCyr → smCyrillic
+ 59: 4, // langPashto → smArabic
+ 60: 4, // langKurdish → smArabic
+ 61: 4, // langKashmiri → smArabic
+ 62: 4, // langSindhi → smArabic
+ 63: 26, // langTibetan → smTibetan
+ 64: 9, // langNepali → smDevanagari
+ 65: 9, // langSanskrit → smDevanagari
+ 66: 9, // langMarathi → smDevanagari
+ 67: 13, // langBengali → smBengali
+ 68: 13, // langAssamese → smBengali
+ 69: 11, // langGujarati → smGujarati
+ 70: 10, // langPunjabi → smGurmukhi
+ 71: 12, // langOriya → smOriya
+ 72: 17, // langMalayalam → smMalayalam
+ 73: 16, // langKannada → smKannada
+ 74: 14, // langTamil → smTamil
+ 75: 15, // langTelugu → smTelugu
+ 76: 18, // langSinhalese → smSinhalese
+ 77: 19, // langBurmese → smBurmese
+ 78: 20, // langKhmer → smKhmer
+ 79: 22, // langLao → smLao
+ 80: 30, // langVietnamese → smVietnamese
+ 81: 0, // langIndonesian → smRoman
+ 82: 0, // langTagalog → smRoman
+ 83: 0, // langMalayRoman → smRoman
+ 84: 4, // langMalayArabic → smArabic
+ 85: 28, // langAmharic → smEthiopic
+ 86: 28, // langTigrinya → smEthiopic
+ 87: 28, // langOromo → smEthiopic
+ 88: 0, // langSomali → smRoman
+ 89: 0, // langSwahili → smRoman
+ 90: 0, // langKinyarwanda → smRoman
+ 91: 0, // langRundi → smRoman
+ 92: 0, // langNyanja → smRoman
+ 93: 0, // langMalagasy → smRoman
+ 94: 0, // langEsperanto → smRoman
+ 128: 0, // langWelsh → smRoman (modified)
+ 129: 0, // langBasque → smRoman
+ 130: 0, // langCatalan → smRoman
+ 131: 0, // langLatin → smRoman
+ 132: 0, // langQuechua → smRoman
+ 133: 0, // langGuarani → smRoman
+ 134: 0, // langAymara → smRoman
+ 135: 7, // langTatar → smCyrillic
+ 136: 4, // langUighur → smArabic
+ 137: 26, // langDzongkha → smTibetan
+ 138: 0, // langJavaneseRom → smRoman
+ 139: 0, // langSundaneseRom → smRoman
+ 140: 0, // langGalician → smRoman
+ 141: 0, // langAfrikaans → smRoman
+ 142: 0, // langBreton → smRoman (modified)
+ 143: 28, // langInuktitut → smEthiopic (modified)
+ 144: 0, // langScottishGaelic → smRoman (modified)
+ 145: 0, // langManxGaelic → smRoman (modified)
+ 146: 0, // langIrishGaelicScript → smRoman (modified)
+ 147: 0, // langTongan → smRoman
+ 148: 6, // langGreekAncient → smRoman
+ 149: 0, // langGreenlandic → smRoman
+ 150: 0, // langAzerbaijanRoman → smRoman
+ 151: 0 // langNynorsk → smRoman
+ };
+
+ // While Microsoft indicates a region/country for all its language
+ // IDs, we omit the region code if it's equal to the "most likely
+ // region subtag" according to Unicode CLDR. For scripts, we omit
+ // the subtag if it is equal to the Suppress-Script entry in the
+ // IANA language subtag registry for IETF BCP 47.
+ //
+ // For example, Microsoft states that its language code 0x041A is
+ // Croatian in Croatia. We transform this to the BCP 47 language code 'hr'
+ // and not 'hr-HR' because Croatia is the default country for Croatian,
+ // according to Unicode CLDR. As another example, Microsoft states
+ // that 0x101A is Croatian (Latin) in Bosnia-Herzegovina. We transform
+ // this to 'hr-BA' and not 'hr-Latn-BA' because Latin is the default script
+ // for the Croatian language, according to IANA.
+ //
+ // http://www.unicode.org/cldr/charts/latest/supplemental/likely_subtags.html
+ // http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
+ var windowsLanguages = {
+ 0x0436: 'af',
+ 0x041c: 'sq',
+ 0x0484: 'gsw',
+ 0x045e: 'am',
+ 0x1401: 'ar-DZ',
+ 0x3c01: 'ar-BH',
+ 0x0c01: 'ar',
+ 0x0801: 'ar-IQ',
+ 0x2c01: 'ar-JO',
+ 0x3401: 'ar-KW',
+ 0x3001: 'ar-LB',
+ 0x1001: 'ar-LY',
+ 0x1801: 'ary',
+ 0x2001: 'ar-OM',
+ 0x4001: 'ar-QA',
+ 0x0401: 'ar-SA',
+ 0x2801: 'ar-SY',
+ 0x1c01: 'aeb',
+ 0x3801: 'ar-AE',
+ 0x2401: 'ar-YE',
+ 0x042b: 'hy',
+ 0x044d: 'as',
+ 0x082c: 'az-Cyrl',
+ 0x042c: 'az',
+ 0x046d: 'ba',
+ 0x042d: 'eu',
+ 0x0423: 'be',
+ 0x0845: 'bn',
+ 0x0445: 'bn-IN',
+ 0x201a: 'bs-Cyrl',
+ 0x141a: 'bs',
+ 0x047e: 'br',
+ 0x0402: 'bg',
+ 0x0403: 'ca',
+ 0x0c04: 'zh-HK',
+ 0x1404: 'zh-MO',
+ 0x0804: 'zh',
+ 0x1004: 'zh-SG',
+ 0x0404: 'zh-TW',
+ 0x0483: 'co',
+ 0x041a: 'hr',
+ 0x101a: 'hr-BA',
+ 0x0405: 'cs',
+ 0x0406: 'da',
+ 0x048c: 'prs',
+ 0x0465: 'dv',
+ 0x0813: 'nl-BE',
+ 0x0413: 'nl',
+ 0x0c09: 'en-AU',
+ 0x2809: 'en-BZ',
+ 0x1009: 'en-CA',
+ 0x2409: 'en-029',
+ 0x4009: 'en-IN',
+ 0x1809: 'en-IE',
+ 0x2009: 'en-JM',
+ 0x4409: 'en-MY',
+ 0x1409: 'en-NZ',
+ 0x3409: 'en-PH',
+ 0x4809: 'en-SG',
+ 0x1c09: 'en-ZA',
+ 0x2c09: 'en-TT',
+ 0x0809: 'en-GB',
+ 0x0409: 'en',
+ 0x3009: 'en-ZW',
+ 0x0425: 'et',
+ 0x0438: 'fo',
+ 0x0464: 'fil',
+ 0x040b: 'fi',
+ 0x080c: 'fr-BE',
+ 0x0c0c: 'fr-CA',
+ 0x040c: 'fr',
+ 0x140c: 'fr-LU',
+ 0x180c: 'fr-MC',
+ 0x100c: 'fr-CH',
+ 0x0462: 'fy',
+ 0x0456: 'gl',
+ 0x0437: 'ka',
+ 0x0c07: 'de-AT',
+ 0x0407: 'de',
+ 0x1407: 'de-LI',
+ 0x1007: 'de-LU',
+ 0x0807: 'de-CH',
+ 0x0408: 'el',
+ 0x046f: 'kl',
+ 0x0447: 'gu',
+ 0x0468: 'ha',
+ 0x040d: 'he',
+ 0x0439: 'hi',
+ 0x040e: 'hu',
+ 0x040f: 'is',
+ 0x0470: 'ig',
+ 0x0421: 'id',
+ 0x045d: 'iu',
+ 0x085d: 'iu-Latn',
+ 0x083c: 'ga',
+ 0x0434: 'xh',
+ 0x0435: 'zu',
+ 0x0410: 'it',
+ 0x0810: 'it-CH',
+ 0x0411: 'ja',
+ 0x044b: 'kn',
+ 0x043f: 'kk',
+ 0x0453: 'km',
+ 0x0486: 'quc',
+ 0x0487: 'rw',
+ 0x0441: 'sw',
+ 0x0457: 'kok',
+ 0x0412: 'ko',
+ 0x0440: 'ky',
+ 0x0454: 'lo',
+ 0x0426: 'lv',
+ 0x0427: 'lt',
+ 0x082e: 'dsb',
+ 0x046e: 'lb',
+ 0x042f: 'mk',
+ 0x083e: 'ms-BN',
+ 0x043e: 'ms',
+ 0x044c: 'ml',
+ 0x043a: 'mt',
+ 0x0481: 'mi',
+ 0x047a: 'arn',
+ 0x044e: 'mr',
+ 0x047c: 'moh',
+ 0x0450: 'mn',
+ 0x0850: 'mn-CN',
+ 0x0461: 'ne',
+ 0x0414: 'nb',
+ 0x0814: 'nn',
+ 0x0482: 'oc',
+ 0x0448: 'or',
+ 0x0463: 'ps',
+ 0x0415: 'pl',
+ 0x0416: 'pt',
+ 0x0816: 'pt-PT',
+ 0x0446: 'pa',
+ 0x046b: 'qu-BO',
+ 0x086b: 'qu-EC',
+ 0x0c6b: 'qu',
+ 0x0418: 'ro',
+ 0x0417: 'rm',
+ 0x0419: 'ru',
+ 0x243b: 'smn',
+ 0x103b: 'smj-NO',
+ 0x143b: 'smj',
+ 0x0c3b: 'se-FI',
+ 0x043b: 'se',
+ 0x083b: 'se-SE',
+ 0x203b: 'sms',
+ 0x183b: 'sma-NO',
+ 0x1c3b: 'sms',
+ 0x044f: 'sa',
+ 0x1c1a: 'sr-Cyrl-BA',
+ 0x0c1a: 'sr',
+ 0x181a: 'sr-Latn-BA',
+ 0x081a: 'sr-Latn',
+ 0x046c: 'nso',
+ 0x0432: 'tn',
+ 0x045b: 'si',
+ 0x041b: 'sk',
+ 0x0424: 'sl',
+ 0x2c0a: 'es-AR',
+ 0x400a: 'es-BO',
+ 0x340a: 'es-CL',
+ 0x240a: 'es-CO',
+ 0x140a: 'es-CR',
+ 0x1c0a: 'es-DO',
+ 0x300a: 'es-EC',
+ 0x440a: 'es-SV',
+ 0x100a: 'es-GT',
+ 0x480a: 'es-HN',
+ 0x080a: 'es-MX',
+ 0x4c0a: 'es-NI',
+ 0x180a: 'es-PA',
+ 0x3c0a: 'es-PY',
+ 0x280a: 'es-PE',
+ 0x500a: 'es-PR',
+
+ // Microsoft has defined two different language codes for
+ // “Spanish with modern sorting” and “Spanish with traditional
+ // sorting”. This makes sense for collation APIs, and it would be
+ // possible to express this in BCP 47 language tags via Unicode
+ // extensions (eg., es-u-co-trad is Spanish with traditional
+ // sorting). However, for storing names in fonts, the distinction
+ // does not make sense, so we give “es” in both cases.
+ 0x0c0a: 'es',
+ 0x040a: 'es',
+
+ 0x540a: 'es-US',
+ 0x380a: 'es-UY',
+ 0x200a: 'es-VE',
+ 0x081d: 'sv-FI',
+ 0x041d: 'sv',
+ 0x045a: 'syr',
+ 0x0428: 'tg',
+ 0x085f: 'tzm',
+ 0x0449: 'ta',
+ 0x0444: 'tt',
+ 0x044a: 'te',
+ 0x041e: 'th',
+ 0x0451: 'bo',
+ 0x041f: 'tr',
+ 0x0442: 'tk',
+ 0x0480: 'ug',
+ 0x0422: 'uk',
+ 0x042e: 'hsb',
+ 0x0420: 'ur',
+ 0x0843: 'uz-Cyrl',
+ 0x0443: 'uz',
+ 0x042a: 'vi',
+ 0x0452: 'cy',
+ 0x0488: 'wo',
+ 0x0485: 'sah',
+ 0x0478: 'ii',
+ 0x046a: 'yo'
+ };
+
+ // Returns a IETF BCP 47 language code, for example 'zh-Hant'
+ // for 'Chinese in the traditional script'.
+ function getLanguageCode(platformID, languageID, ltag) {
+ switch (platformID) {
+ case 0: // Unicode
+ if (languageID === 0xffff) {
+ return 'und';
+ } else if (ltag) {
+ return ltag[languageID];
+ }
+
+ break;
+
+ case 1: // Macintosh
+ return macLanguages[languageID];
+
+ case 3: // Windows
+ return windowsLanguages[languageID];
+ }
+
+ return undefined;
+ }
+
+ var utf16 = 'utf-16';
+
+ // MacOS script ID → encoding. This table stores the default case,
+ // which can be overridden by macLanguageEncodings.
+ var macScriptEncodings = {
+ 0: 'macintosh', // smRoman
+ 1: 'x-mac-japanese', // smJapanese
+ 2: 'x-mac-chinesetrad', // smTradChinese
+ 3: 'x-mac-korean', // smKorean
+ 6: 'x-mac-greek', // smGreek
+ 7: 'x-mac-cyrillic', // smCyrillic
+ 9: 'x-mac-devanagai', // smDevanagari
+ 10: 'x-mac-gurmukhi', // smGurmukhi
+ 11: 'x-mac-gujarati', // smGujarati
+ 12: 'x-mac-oriya', // smOriya
+ 13: 'x-mac-bengali', // smBengali
+ 14: 'x-mac-tamil', // smTamil
+ 15: 'x-mac-telugu', // smTelugu
+ 16: 'x-mac-kannada', // smKannada
+ 17: 'x-mac-malayalam', // smMalayalam
+ 18: 'x-mac-sinhalese', // smSinhalese
+ 19: 'x-mac-burmese', // smBurmese
+ 20: 'x-mac-khmer', // smKhmer
+ 21: 'x-mac-thai', // smThai
+ 22: 'x-mac-lao', // smLao
+ 23: 'x-mac-georgian', // smGeorgian
+ 24: 'x-mac-armenian', // smArmenian
+ 25: 'x-mac-chinesesimp', // smSimpChinese
+ 26: 'x-mac-tibetan', // smTibetan
+ 27: 'x-mac-mongolian', // smMongolian
+ 28: 'x-mac-ethiopic', // smEthiopic
+ 29: 'x-mac-ce', // smCentralEuroRoman
+ 30: 'x-mac-vietnamese', // smVietnamese
+ 31: 'x-mac-extarabic' // smExtArabic
+ };
+
+ // MacOS language ID → encoding. This table stores the exceptional
+ // cases, which override macScriptEncodings. For writing MacOS naming
+ // tables, we need to emit a MacOS script ID. Therefore, we cannot
+ // merge macScriptEncodings into macLanguageEncodings.
+ //
+ // http://unicode.org/Public/MAPPINGS/VENDORS/APPLE/Readme.txt
+ var macLanguageEncodings = {
+ 15: 'x-mac-icelandic', // langIcelandic
+ 17: 'x-mac-turkish', // langTurkish
+ 18: 'x-mac-croatian', // langCroatian
+ 24: 'x-mac-ce', // langLithuanian
+ 25: 'x-mac-ce', // langPolish
+ 26: 'x-mac-ce', // langHungarian
+ 27: 'x-mac-ce', // langEstonian
+ 28: 'x-mac-ce', // langLatvian
+ 30: 'x-mac-icelandic', // langFaroese
+ 37: 'x-mac-romanian', // langRomanian
+ 38: 'x-mac-ce', // langCzech
+ 39: 'x-mac-ce', // langSlovak
+ 40: 'x-mac-ce', // langSlovenian
+ 143: 'x-mac-inuit', // langInuktitut
+ 146: 'x-mac-gaelic' // langIrishGaelicScript
+ };
+
+ function getEncoding(platformID, encodingID, languageID) {
+ switch (platformID) {
+ case 0: // Unicode
+ return utf16;
+
+ case 1: // Apple Macintosh
+ return (
+ macLanguageEncodings[languageID] || macScriptEncodings[encodingID]
+ );
+
+ case 3: // Microsoft Windows
+ if (encodingID === 1 || encodingID === 10) {
+ return utf16;
+ }
+
+ break;
+ }
+
+ return undefined;
+ }
+
+ // Parse the naming `name` table.
+ // FIXME: Format 1 additional fields are not supported yet.
+ // ltag is the content of the `ltag' table, such as ['en', 'zh-Hans', 'de-CH-1904'].
+ function parseNameTable(data, start, ltag) {
+ var name = {};
+ var p = new parse.Parser(data, start);
+ var format = p.parseUShort();
+ var count = p.parseUShort();
+ var stringOffset = p.offset + p.parseUShort();
+ for (var i = 0; i < count; i++) {
+ var platformID = p.parseUShort();
+ var encodingID = p.parseUShort();
+ var languageID = p.parseUShort();
+ var nameID = p.parseUShort();
+ var property = nameTableNames[nameID] || nameID;
+ var byteLength = p.parseUShort();
+ var offset = p.parseUShort();
+ var language = getLanguageCode(platformID, languageID, ltag);
+ var encoding = getEncoding(platformID, encodingID, languageID);
+ if (encoding !== undefined && language !== undefined) {
+ var text = void 0;
+ if (encoding === utf16) {
+ text = decode.UTF16(data, stringOffset + offset, byteLength);
+ } else {
+ text = decode.MACSTRING(
+ data,
+ stringOffset + offset,
+ byteLength,
+ encoding
+ );
+ }
+
+ if (text) {
+ var translations = name[property];
+ if (translations === undefined) {
+ translations = name[property] = {};
+ }
+
+ translations[language] = text;
+ }
+ }
+ }
+
+ var langTagCount = 0;
+ if (format === 1) {
+ // FIXME: Also handle Microsoft's 'name' table 1.
+ langTagCount = p.parseUShort();
+ }
+
+ return name;
+ }
+
+ // {23: 'foo'} → {'foo': 23}
+ // ['bar', 'baz'] → {'bar': 0, 'baz': 1}
+ function reverseDict(dict) {
+ var result = {};
+ for (var key in dict) {
+ result[dict[key]] = parseInt(key);
+ }
+
+ return result;
+ }
+
+ function makeNameRecord(
+ platformID,
+ encodingID,
+ languageID,
+ nameID,
+ length,
+ offset
+ ) {
+ return new table.Record('NameRecord', [
+ { name: 'platformID', type: 'USHORT', value: platformID },
+ { name: 'encodingID', type: 'USHORT', value: encodingID },
+ { name: 'languageID', type: 'USHORT', value: languageID },
+ { name: 'nameID', type: 'USHORT', value: nameID },
+ { name: 'length', type: 'USHORT', value: length },
+ { name: 'offset', type: 'USHORT', value: offset }
+ ]);
+ }
+
+ // Finds the position of needle in haystack, or -1 if not there.
+ // Like String.indexOf(), but for arrays.
+ function findSubArray(needle, haystack) {
+ var needleLength = needle.length;
+ var limit = haystack.length - needleLength + 1;
+
+ loop: for (var pos = 0; pos < limit; pos++) {
+ for (; pos < limit; pos++) {
+ for (var k = 0; k < needleLength; k++) {
+ if (haystack[pos + k] !== needle[k]) {
+ continue loop;
+ }
+ }
+
+ return pos;
+ }
+ }
+
+ return -1;
+ }
+
+ function addStringToPool(s, pool) {
+ var offset = findSubArray(s, pool);
+ if (offset < 0) {
+ offset = pool.length;
+ var i = 0;
+ var len = s.length;
+ for (; i < len; ++i) {
+ pool.push(s[i]);
+ }
+ }
+
+ return offset;
+ }
+
+ function makeNameTable(names, ltag) {
+ var nameID;
+ var nameIDs = [];
+
+ var namesWithNumericKeys = {};
+ var nameTableIds = reverseDict(nameTableNames);
+ for (var key in names) {
+ var id = nameTableIds[key];
+ if (id === undefined) {
+ id = key;
+ }
+
+ nameID = parseInt(id);
+
+ if (isNaN(nameID)) {
+ throw new Error(
+ 'Name table entry "' +
+ key +
+ '" does not exist, see nameTableNames for complete list.'
+ );
+ }
+
+ namesWithNumericKeys[nameID] = names[key];
+ nameIDs.push(nameID);
+ }
+
+ var macLanguageIds = reverseDict(macLanguages);
+ var windowsLanguageIds = reverseDict(windowsLanguages);
+
+ var nameRecords = [];
+ var stringPool = [];
+
+ for (var i = 0; i < nameIDs.length; i++) {
+ nameID = nameIDs[i];
+ var translations = namesWithNumericKeys[nameID];
+ for (var lang in translations) {
+ var text = translations[lang];
+
+ // For MacOS, we try to emit the name in the form that was introduced
+ // in the initial version of the TrueType spec (in the late 1980s).
+ // However, this can fail for various reasons: the requested BCP 47
+ // language code might not have an old-style Mac equivalent;
+ // we might not have a codec for the needed character encoding;
+ // or the name might contain characters that cannot be expressed
+ // in the old-style Macintosh encoding. In case of failure, we emit
+ // the name in a more modern fashion (Unicode encoding with BCP 47
+ // language tags) that is recognized by MacOS 10.5, released in 2009.
+ // If fonts were only read by operating systems, we could simply
+ // emit all names in the modern form; this would be much easier.
+ // However, there are many applications and libraries that read
+ // 'name' tables directly, and these will usually only recognize
+ // the ancient form (silently skipping the unrecognized names).
+ var macPlatform = 1; // Macintosh
+ var macLanguage = macLanguageIds[lang];
+ var macScript = macLanguageToScript[macLanguage];
+ var macEncoding = getEncoding(macPlatform, macScript, macLanguage);
+ var macName = encode.MACSTRING(text, macEncoding);
+ if (macName === undefined) {
+ macPlatform = 0; // Unicode
+ macLanguage = ltag.indexOf(lang);
+ if (macLanguage < 0) {
+ macLanguage = ltag.length;
+ ltag.push(lang);
+ }
+
+ macScript = 4; // Unicode 2.0 and later
+ macName = encode.UTF16(text);
+ }
+
+ var macNameOffset = addStringToPool(macName, stringPool);
+ nameRecords.push(
+ makeNameRecord(
+ macPlatform,
+ macScript,
+ macLanguage,
+ nameID,
+ macName.length,
+ macNameOffset
+ )
+ );
+
+ var winLanguage = windowsLanguageIds[lang];
+ if (winLanguage !== undefined) {
+ var winName = encode.UTF16(text);
+ var winNameOffset = addStringToPool(winName, stringPool);
+ nameRecords.push(
+ makeNameRecord(
+ 3,
+ 1,
+ winLanguage,
+ nameID,
+ winName.length,
+ winNameOffset
+ )
+ );
+ }
+ }
+ }
+
+ nameRecords.sort(function(a, b) {
+ return (
+ a.platformID - b.platformID ||
+ a.encodingID - b.encodingID ||
+ a.languageID - b.languageID ||
+ a.nameID - b.nameID
+ );
+ });
+
+ var t = new table.Table('name', [
+ { name: 'format', type: 'USHORT', value: 0 },
+ { name: 'count', type: 'USHORT', value: nameRecords.length },
+ {
+ name: 'stringOffset',
+ type: 'USHORT',
+ value: 6 + nameRecords.length * 12
+ }
+ ]);
+
+ for (var r = 0; r < nameRecords.length; r++) {
+ t.fields.push({
+ name: 'record_' + r,
+ type: 'RECORD',
+ value: nameRecords[r]
+ });
+ }
+
+ t.fields.push({ name: 'strings', type: 'LITERAL', value: stringPool });
+ return t;
+ }
+
+ var _name = { parse: parseNameTable, make: makeNameTable };
+
+ // The `OS/2` table contains metrics required in OpenType fonts.
+
+ var unicodeRanges = [
+ { begin: 0x0000, end: 0x007f }, // Basic Latin
+ { begin: 0x0080, end: 0x00ff }, // Latin-1 Supplement
+ { begin: 0x0100, end: 0x017f }, // Latin Extended-A
+ { begin: 0x0180, end: 0x024f }, // Latin Extended-B
+ { begin: 0x0250, end: 0x02af }, // IPA Extensions
+ { begin: 0x02b0, end: 0x02ff }, // Spacing Modifier Letters
+ { begin: 0x0300, end: 0x036f }, // Combining Diacritical Marks
+ { begin: 0x0370, end: 0x03ff }, // Greek and Coptic
+ { begin: 0x2c80, end: 0x2cff }, // Coptic
+ { begin: 0x0400, end: 0x04ff }, // Cyrillic
+ { begin: 0x0530, end: 0x058f }, // Armenian
+ { begin: 0x0590, end: 0x05ff }, // Hebrew
+ { begin: 0xa500, end: 0xa63f }, // Vai
+ { begin: 0x0600, end: 0x06ff }, // Arabic
+ { begin: 0x07c0, end: 0x07ff }, // NKo
+ { begin: 0x0900, end: 0x097f }, // Devanagari
+ { begin: 0x0980, end: 0x09ff }, // Bengali
+ { begin: 0x0a00, end: 0x0a7f }, // Gurmukhi
+ { begin: 0x0a80, end: 0x0aff }, // Gujarati
+ { begin: 0x0b00, end: 0x0b7f }, // Oriya
+ { begin: 0x0b80, end: 0x0bff }, // Tamil
+ { begin: 0x0c00, end: 0x0c7f }, // Telugu
+ { begin: 0x0c80, end: 0x0cff }, // Kannada
+ { begin: 0x0d00, end: 0x0d7f }, // Malayalam
+ { begin: 0x0e00, end: 0x0e7f }, // Thai
+ { begin: 0x0e80, end: 0x0eff }, // Lao
+ { begin: 0x10a0, end: 0x10ff }, // Georgian
+ { begin: 0x1b00, end: 0x1b7f }, // Balinese
+ { begin: 0x1100, end: 0x11ff }, // Hangul Jamo
+ { begin: 0x1e00, end: 0x1eff }, // Latin Extended Additional
+ { begin: 0x1f00, end: 0x1fff }, // Greek Extended
+ { begin: 0x2000, end: 0x206f }, // General Punctuation
+ { begin: 0x2070, end: 0x209f }, // Superscripts And Subscripts
+ { begin: 0x20a0, end: 0x20cf }, // Currency Symbol
+ { begin: 0x20d0, end: 0x20ff }, // Combining Diacritical Marks For Symbols
+ { begin: 0x2100, end: 0x214f }, // Letterlike Symbols
+ { begin: 0x2150, end: 0x218f }, // Number Forms
+ { begin: 0x2190, end: 0x21ff }, // Arrows
+ { begin: 0x2200, end: 0x22ff }, // Mathematical Operators
+ { begin: 0x2300, end: 0x23ff }, // Miscellaneous Technical
+ { begin: 0x2400, end: 0x243f }, // Control Pictures
+ { begin: 0x2440, end: 0x245f }, // Optical Character Recognition
+ { begin: 0x2460, end: 0x24ff }, // Enclosed Alphanumerics
+ { begin: 0x2500, end: 0x257f }, // Box Drawing
+ { begin: 0x2580, end: 0x259f }, // Block Elements
+ { begin: 0x25a0, end: 0x25ff }, // Geometric Shapes
+ { begin: 0x2600, end: 0x26ff }, // Miscellaneous Symbols
+ { begin: 0x2700, end: 0x27bf }, // Dingbats
+ { begin: 0x3000, end: 0x303f }, // CJK Symbols And Punctuation
+ { begin: 0x3040, end: 0x309f }, // Hiragana
+ { begin: 0x30a0, end: 0x30ff }, // Katakana
+ { begin: 0x3100, end: 0x312f }, // Bopomofo
+ { begin: 0x3130, end: 0x318f }, // Hangul Compatibility Jamo
+ { begin: 0xa840, end: 0xa87f }, // Phags-pa
+ { begin: 0x3200, end: 0x32ff }, // Enclosed CJK Letters And Months
+ { begin: 0x3300, end: 0x33ff }, // CJK Compatibility
+ { begin: 0xac00, end: 0xd7af }, // Hangul Syllables
+ { begin: 0xd800, end: 0xdfff }, // Non-Plane 0 *
+ { begin: 0x10900, end: 0x1091f }, // Phoenicia
+ { begin: 0x4e00, end: 0x9fff }, // CJK Unified Ideographs
+ { begin: 0xe000, end: 0xf8ff }, // Private Use Area (plane 0)
+ { begin: 0x31c0, end: 0x31ef }, // CJK Strokes
+ { begin: 0xfb00, end: 0xfb4f }, // Alphabetic Presentation Forms
+ { begin: 0xfb50, end: 0xfdff }, // Arabic Presentation Forms-A
+ { begin: 0xfe20, end: 0xfe2f }, // Combining Half Marks
+ { begin: 0xfe10, end: 0xfe1f }, // Vertical Forms
+ { begin: 0xfe50, end: 0xfe6f }, // Small Form Variants
+ { begin: 0xfe70, end: 0xfeff }, // Arabic Presentation Forms-B
+ { begin: 0xff00, end: 0xffef }, // Halfwidth And Fullwidth Forms
+ { begin: 0xfff0, end: 0xffff }, // Specials
+ { begin: 0x0f00, end: 0x0fff }, // Tibetan
+ { begin: 0x0700, end: 0x074f }, // Syriac
+ { begin: 0x0780, end: 0x07bf }, // Thaana
+ { begin: 0x0d80, end: 0x0dff }, // Sinhala
+ { begin: 0x1000, end: 0x109f }, // Myanmar
+ { begin: 0x1200, end: 0x137f }, // Ethiopic
+ { begin: 0x13a0, end: 0x13ff }, // Cherokee
+ { begin: 0x1400, end: 0x167f }, // Unified Canadian Aboriginal Syllabics
+ { begin: 0x1680, end: 0x169f }, // Ogham
+ { begin: 0x16a0, end: 0x16ff }, // Runic
+ { begin: 0x1780, end: 0x17ff }, // Khmer
+ { begin: 0x1800, end: 0x18af }, // Mongolian
+ { begin: 0x2800, end: 0x28ff }, // Braille Patterns
+ { begin: 0xa000, end: 0xa48f }, // Yi Syllables
+ { begin: 0x1700, end: 0x171f }, // Tagalog
+ { begin: 0x10300, end: 0x1032f }, // Old Italic
+ { begin: 0x10330, end: 0x1034f }, // Gothic
+ { begin: 0x10400, end: 0x1044f }, // Deseret
+ { begin: 0x1d000, end: 0x1d0ff }, // Byzantine Musical Symbols
+ { begin: 0x1d400, end: 0x1d7ff }, // Mathematical Alphanumeric Symbols
+ { begin: 0xff000, end: 0xffffd }, // Private Use (plane 15)
+ { begin: 0xfe00, end: 0xfe0f }, // Variation Selectors
+ { begin: 0xe0000, end: 0xe007f }, // Tags
+ { begin: 0x1900, end: 0x194f }, // Limbu
+ { begin: 0x1950, end: 0x197f }, // Tai Le
+ { begin: 0x1980, end: 0x19df }, // New Tai Lue
+ { begin: 0x1a00, end: 0x1a1f }, // Buginese
+ { begin: 0x2c00, end: 0x2c5f }, // Glagolitic
+ { begin: 0x2d30, end: 0x2d7f }, // Tifinagh
+ { begin: 0x4dc0, end: 0x4dff }, // Yijing Hexagram Symbols
+ { begin: 0xa800, end: 0xa82f }, // Syloti Nagri
+ { begin: 0x10000, end: 0x1007f }, // Linear B Syllabary
+ { begin: 0x10140, end: 0x1018f }, // Ancient Greek Numbers
+ { begin: 0x10380, end: 0x1039f }, // Ugaritic
+ { begin: 0x103a0, end: 0x103df }, // Old Persian
+ { begin: 0x10450, end: 0x1047f }, // Shavian
+ { begin: 0x10480, end: 0x104af }, // Osmanya
+ { begin: 0x10800, end: 0x1083f }, // Cypriot Syllabary
+ { begin: 0x10a00, end: 0x10a5f }, // Kharoshthi
+ { begin: 0x1d300, end: 0x1d35f }, // Tai Xuan Jing Symbols
+ { begin: 0x12000, end: 0x123ff }, // Cuneiform
+ { begin: 0x1d360, end: 0x1d37f }, // Counting Rod Numerals
+ { begin: 0x1b80, end: 0x1bbf }, // Sundanese
+ { begin: 0x1c00, end: 0x1c4f }, // Lepcha
+ { begin: 0x1c50, end: 0x1c7f }, // Ol Chiki
+ { begin: 0xa880, end: 0xa8df }, // Saurashtra
+ { begin: 0xa900, end: 0xa92f }, // Kayah Li
+ { begin: 0xa930, end: 0xa95f }, // Rejang
+ { begin: 0xaa00, end: 0xaa5f }, // Cham
+ { begin: 0x10190, end: 0x101cf }, // Ancient Symbols
+ { begin: 0x101d0, end: 0x101ff }, // Phaistos Disc
+ { begin: 0x102a0, end: 0x102df }, // Carian
+ { begin: 0x1f030, end: 0x1f09f } // Domino Tiles
+ ];
+
+ function getUnicodeRange(unicode) {
+ for (var i = 0; i < unicodeRanges.length; i += 1) {
+ var range = unicodeRanges[i];
+ if (unicode >= range.begin && unicode < range.end) {
+ return i;
+ }
+ }
+
+ return -1;
+ }
+
+ // Parse the OS/2 and Windows metrics `OS/2` table
+ function parseOS2Table(data, start) {
+ var os2 = {};
+ var p = new parse.Parser(data, start);
+ os2.version = p.parseUShort();
+ os2.xAvgCharWidth = p.parseShort();
+ os2.usWeightClass = p.parseUShort();
+ os2.usWidthClass = p.parseUShort();
+ os2.fsType = p.parseUShort();
+ os2.ySubscriptXSize = p.parseShort();
+ os2.ySubscriptYSize = p.parseShort();
+ os2.ySubscriptXOffset = p.parseShort();
+ os2.ySubscriptYOffset = p.parseShort();
+ os2.ySuperscriptXSize = p.parseShort();
+ os2.ySuperscriptYSize = p.parseShort();
+ os2.ySuperscriptXOffset = p.parseShort();
+ os2.ySuperscriptYOffset = p.parseShort();
+ os2.yStrikeoutSize = p.parseShort();
+ os2.yStrikeoutPosition = p.parseShort();
+ os2.sFamilyClass = p.parseShort();
+ os2.panose = [];
+ for (var i = 0; i < 10; i++) {
+ os2.panose[i] = p.parseByte();
+ }
+
+ os2.ulUnicodeRange1 = p.parseULong();
+ os2.ulUnicodeRange2 = p.parseULong();
+ os2.ulUnicodeRange3 = p.parseULong();
+ os2.ulUnicodeRange4 = p.parseULong();
+ os2.achVendID = String.fromCharCode(
+ p.parseByte(),
+ p.parseByte(),
+ p.parseByte(),
+ p.parseByte()
+ );
+ os2.fsSelection = p.parseUShort();
+ os2.usFirstCharIndex = p.parseUShort();
+ os2.usLastCharIndex = p.parseUShort();
+ os2.sTypoAscender = p.parseShort();
+ os2.sTypoDescender = p.parseShort();
+ os2.sTypoLineGap = p.parseShort();
+ os2.usWinAscent = p.parseUShort();
+ os2.usWinDescent = p.parseUShort();
+ if (os2.version >= 1) {
+ os2.ulCodePageRange1 = p.parseULong();
+ os2.ulCodePageRange2 = p.parseULong();
+ }
+
+ if (os2.version >= 2) {
+ os2.sxHeight = p.parseShort();
+ os2.sCapHeight = p.parseShort();
+ os2.usDefaultChar = p.parseUShort();
+ os2.usBreakChar = p.parseUShort();
+ os2.usMaxContent = p.parseUShort();
+ }
+
+ return os2;
+ }
+
+ function makeOS2Table(options) {
+ return new table.Table(
+ 'OS/2',
+ [
+ { name: 'version', type: 'USHORT', value: 0x0003 },
+ { name: 'xAvgCharWidth', type: 'SHORT', value: 0 },
+ { name: 'usWeightClass', type: 'USHORT', value: 0 },
+ { name: 'usWidthClass', type: 'USHORT', value: 0 },
+ { name: 'fsType', type: 'USHORT', value: 0 },
+ { name: 'ySubscriptXSize', type: 'SHORT', value: 650 },
+ { name: 'ySubscriptYSize', type: 'SHORT', value: 699 },
+ { name: 'ySubscriptXOffset', type: 'SHORT', value: 0 },
+ { name: 'ySubscriptYOffset', type: 'SHORT', value: 140 },
+ { name: 'ySuperscriptXSize', type: 'SHORT', value: 650 },
+ { name: 'ySuperscriptYSize', type: 'SHORT', value: 699 },
+ { name: 'ySuperscriptXOffset', type: 'SHORT', value: 0 },
+ { name: 'ySuperscriptYOffset', type: 'SHORT', value: 479 },
+ { name: 'yStrikeoutSize', type: 'SHORT', value: 49 },
+ { name: 'yStrikeoutPosition', type: 'SHORT', value: 258 },
+ { name: 'sFamilyClass', type: 'SHORT', value: 0 },
+ { name: 'bFamilyType', type: 'BYTE', value: 0 },
+ { name: 'bSerifStyle', type: 'BYTE', value: 0 },
+ { name: 'bWeight', type: 'BYTE', value: 0 },
+ { name: 'bProportion', type: 'BYTE', value: 0 },
+ { name: 'bContrast', type: 'BYTE', value: 0 },
+ { name: 'bStrokeVariation', type: 'BYTE', value: 0 },
+ { name: 'bArmStyle', type: 'BYTE', value: 0 },
+ { name: 'bLetterform', type: 'BYTE', value: 0 },
+ { name: 'bMidline', type: 'BYTE', value: 0 },
+ { name: 'bXHeight', type: 'BYTE', value: 0 },
+ { name: 'ulUnicodeRange1', type: 'ULONG', value: 0 },
+ { name: 'ulUnicodeRange2', type: 'ULONG', value: 0 },
+ { name: 'ulUnicodeRange3', type: 'ULONG', value: 0 },
+ { name: 'ulUnicodeRange4', type: 'ULONG', value: 0 },
+ { name: 'achVendID', type: 'CHARARRAY', value: 'XXXX' },
+ { name: 'fsSelection', type: 'USHORT', value: 0 },
+ { name: 'usFirstCharIndex', type: 'USHORT', value: 0 },
+ { name: 'usLastCharIndex', type: 'USHORT', value: 0 },
+ { name: 'sTypoAscender', type: 'SHORT', value: 0 },
+ { name: 'sTypoDescender', type: 'SHORT', value: 0 },
+ { name: 'sTypoLineGap', type: 'SHORT', value: 0 },
+ { name: 'usWinAscent', type: 'USHORT', value: 0 },
+ { name: 'usWinDescent', type: 'USHORT', value: 0 },
+ { name: 'ulCodePageRange1', type: 'ULONG', value: 0 },
+ { name: 'ulCodePageRange2', type: 'ULONG', value: 0 },
+ { name: 'sxHeight', type: 'SHORT', value: 0 },
+ { name: 'sCapHeight', type: 'SHORT', value: 0 },
+ { name: 'usDefaultChar', type: 'USHORT', value: 0 },
+ { name: 'usBreakChar', type: 'USHORT', value: 0 },
+ { name: 'usMaxContext', type: 'USHORT', value: 0 }
+ ],
+ options
+ );
+ }
+
+ var os2 = {
+ parse: parseOS2Table,
+ make: makeOS2Table,
+ unicodeRanges: unicodeRanges,
+ getUnicodeRange: getUnicodeRange
+ };
+
+ // The `post` table stores additional PostScript information, such as glyph names.
+
+ // Parse the PostScript `post` table
+ function parsePostTable(data, start) {
+ var post = {};
+ var p = new parse.Parser(data, start);
+ post.version = p.parseVersion();
+ post.italicAngle = p.parseFixed();
+ post.underlinePosition = p.parseShort();
+ post.underlineThickness = p.parseShort();
+ post.isFixedPitch = p.parseULong();
+ post.minMemType42 = p.parseULong();
+ post.maxMemType42 = p.parseULong();
+ post.minMemType1 = p.parseULong();
+ post.maxMemType1 = p.parseULong();
+ switch (post.version) {
+ case 1:
+ post.names = standardNames.slice();
+ break;
+ case 2:
+ post.numberOfGlyphs = p.parseUShort();
+ post.glyphNameIndex = new Array(post.numberOfGlyphs);
+ for (var i = 0; i < post.numberOfGlyphs; i++) {
+ post.glyphNameIndex[i] = p.parseUShort();
+ }
+
+ post.names = [];
+ for (var i$1 = 0; i$1 < post.numberOfGlyphs; i$1++) {
+ if (post.glyphNameIndex[i$1] >= standardNames.length) {
+ var nameLength = p.parseChar();
+ post.names.push(p.parseString(nameLength));
+ }
+ }
+
+ break;
+ case 2.5:
+ post.numberOfGlyphs = p.parseUShort();
+ post.offset = new Array(post.numberOfGlyphs);
+ for (var i$2 = 0; i$2 < post.numberOfGlyphs; i$2++) {
+ post.offset[i$2] = p.parseChar();
+ }
+
+ break;
+ }
+ return post;
+ }
+
+ function makePostTable() {
+ return new table.Table('post', [
+ { name: 'version', type: 'FIXED', value: 0x00030000 },
+ { name: 'italicAngle', type: 'FIXED', value: 0 },
+ { name: 'underlinePosition', type: 'FWORD', value: 0 },
+ { name: 'underlineThickness', type: 'FWORD', value: 0 },
+ { name: 'isFixedPitch', type: 'ULONG', value: 0 },
+ { name: 'minMemType42', type: 'ULONG', value: 0 },
+ { name: 'maxMemType42', type: 'ULONG', value: 0 },
+ { name: 'minMemType1', type: 'ULONG', value: 0 },
+ { name: 'maxMemType1', type: 'ULONG', value: 0 }
+ ]);
+ }
+
+ var post = { parse: parsePostTable, make: makePostTable };
+
+ // The `GSUB` table contains ligatures, among other things.
+
+ var subtableParsers = new Array(9); // subtableParsers[0] is unused
+
+ // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#SS
+ subtableParsers[1] = function parseLookup1() {
+ var start = this.offset + this.relativeOffset;
+ var substFormat = this.parseUShort();
+ if (substFormat === 1) {
+ return {
+ substFormat: 1,
+ coverage: this.parsePointer(Parser.coverage),
+ deltaGlyphId: this.parseUShort()
+ };
+ } else if (substFormat === 2) {
+ return {
+ substFormat: 2,
+ coverage: this.parsePointer(Parser.coverage),
+ substitute: this.parseOffset16List()
+ };
+ }
+ check.assert(
+ false,
+ '0x' + start.toString(16) + ': lookup type 1 format must be 1 or 2.'
+ );
+ };
+
+ // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#MS
+ subtableParsers[2] = function parseLookup2() {
+ var substFormat = this.parseUShort();
+ check.argument(
+ substFormat === 1,
+ 'GSUB Multiple Substitution Subtable identifier-format must be 1'
+ );
+ return {
+ substFormat: substFormat,
+ coverage: this.parsePointer(Parser.coverage),
+ sequences: this.parseListOfLists()
+ };
+ };
+
+ // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#AS
+ subtableParsers[3] = function parseLookup3() {
+ var substFormat = this.parseUShort();
+ check.argument(
+ substFormat === 1,
+ 'GSUB Alternate Substitution Subtable identifier-format must be 1'
+ );
+ return {
+ substFormat: substFormat,
+ coverage: this.parsePointer(Parser.coverage),
+ alternateSets: this.parseListOfLists()
+ };
+ };
+
+ // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#LS
+ subtableParsers[4] = function parseLookup4() {
+ var substFormat = this.parseUShort();
+ check.argument(
+ substFormat === 1,
+ 'GSUB ligature table identifier-format must be 1'
+ );
+ return {
+ substFormat: substFormat,
+ coverage: this.parsePointer(Parser.coverage),
+ ligatureSets: this.parseListOfLists(function() {
+ return {
+ ligGlyph: this.parseUShort(),
+ components: this.parseUShortList(this.parseUShort() - 1)
+ };
+ })
+ };
+ };
+
+ var lookupRecordDesc = {
+ sequenceIndex: Parser.uShort,
+ lookupListIndex: Parser.uShort
+ };
+
+ // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#CSF
+ subtableParsers[5] = function parseLookup5() {
+ var start = this.offset + this.relativeOffset;
+ var substFormat = this.parseUShort();
+
+ if (substFormat === 1) {
+ return {
+ substFormat: substFormat,
+ coverage: this.parsePointer(Parser.coverage),
+ ruleSets: this.parseListOfLists(function() {
+ var glyphCount = this.parseUShort();
+ var substCount = this.parseUShort();
+ return {
+ input: this.parseUShortList(glyphCount - 1),
+ lookupRecords: this.parseRecordList(substCount, lookupRecordDesc)
+ };
+ })
+ };
+ } else if (substFormat === 2) {
+ return {
+ substFormat: substFormat,
+ coverage: this.parsePointer(Parser.coverage),
+ classDef: this.parsePointer(Parser.classDef),
+ classSets: this.parseListOfLists(function() {
+ var glyphCount = this.parseUShort();
+ var substCount = this.parseUShort();
+ return {
+ classes: this.parseUShortList(glyphCount - 1),
+ lookupRecords: this.parseRecordList(substCount, lookupRecordDesc)
+ };
+ })
+ };
+ } else if (substFormat === 3) {
+ var glyphCount = this.parseUShort();
+ var substCount = this.parseUShort();
+ return {
+ substFormat: substFormat,
+ coverages: this.parseList(glyphCount, Parser.pointer(Parser.coverage)),
+ lookupRecords: this.parseRecordList(substCount, lookupRecordDesc)
+ };
+ }
+ check.assert(
+ false,
+ '0x' + start.toString(16) + ': lookup type 5 format must be 1, 2 or 3.'
+ );
+ };
+
+ // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#CC
+ subtableParsers[6] = function parseLookup6() {
+ var start = this.offset + this.relativeOffset;
+ var substFormat = this.parseUShort();
+ if (substFormat === 1) {
+ return {
+ substFormat: 1,
+ coverage: this.parsePointer(Parser.coverage),
+ chainRuleSets: this.parseListOfLists(function() {
+ return {
+ backtrack: this.parseUShortList(),
+ input: this.parseUShortList(this.parseShort() - 1),
+ lookahead: this.parseUShortList(),
+ lookupRecords: this.parseRecordList(lookupRecordDesc)
+ };
+ })
+ };
+ } else if (substFormat === 2) {
+ return {
+ substFormat: 2,
+ coverage: this.parsePointer(Parser.coverage),
+ backtrackClassDef: this.parsePointer(Parser.classDef),
+ inputClassDef: this.parsePointer(Parser.classDef),
+ lookaheadClassDef: this.parsePointer(Parser.classDef),
+ chainClassSet: this.parseListOfLists(function() {
+ return {
+ backtrack: this.parseUShortList(),
+ input: this.parseUShortList(this.parseShort() - 1),
+ lookahead: this.parseUShortList(),
+ lookupRecords: this.parseRecordList(lookupRecordDesc)
+ };
+ })
+ };
+ } else if (substFormat === 3) {
+ return {
+ substFormat: 3,
+ backtrackCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+ inputCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+ lookaheadCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+ lookupRecords: this.parseRecordList(lookupRecordDesc)
+ };
+ }
+ check.assert(
+ false,
+ '0x' + start.toString(16) + ': lookup type 6 format must be 1, 2 or 3.'
+ );
+ };
+
+ // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#ES
+ subtableParsers[7] = function parseLookup7() {
+ // Extension Substitution subtable
+ var substFormat = this.parseUShort();
+ check.argument(
+ substFormat === 1,
+ 'GSUB Extension Substitution subtable identifier-format must be 1'
+ );
+ var extensionLookupType = this.parseUShort();
+ var extensionParser = new Parser(
+ this.data,
+ this.offset + this.parseULong()
+ );
+ return {
+ substFormat: 1,
+ lookupType: extensionLookupType,
+ extension: subtableParsers[extensionLookupType].call(extensionParser)
+ };
+ };
+
+ // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#RCCS
+ subtableParsers[8] = function parseLookup8() {
+ var substFormat = this.parseUShort();
+ check.argument(
+ substFormat === 1,
+ 'GSUB Reverse Chaining Contextual Single Substitution Subtable identifier-format must be 1'
+ );
+ return {
+ substFormat: substFormat,
+ coverage: this.parsePointer(Parser.coverage),
+ backtrackCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+ lookaheadCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+ substitutes: this.parseUShortList()
+ };
+ };
+
+ // https://www.microsoft.com/typography/OTSPEC/gsub.htm
+ function parseGsubTable(data, start) {
+ start = start || 0;
+ var p = new Parser(data, start);
+ var tableVersion = p.parseVersion(1);
+ check.argument(
+ tableVersion === 1 || tableVersion === 1.1,
+ 'Unsupported GSUB table version.'
+ );
+ if (tableVersion === 1) {
+ return {
+ version: tableVersion,
+ scripts: p.parseScriptList(),
+ features: p.parseFeatureList(),
+ lookups: p.parseLookupList(subtableParsers)
+ };
+ } else {
+ return {
+ version: tableVersion,
+ scripts: p.parseScriptList(),
+ features: p.parseFeatureList(),
+ lookups: p.parseLookupList(subtableParsers),
+ variations: p.parseFeatureVariationsList()
+ };
+ }
+ }
+
+ // GSUB Writing //////////////////////////////////////////////
+ var subtableMakers = new Array(9);
+
+ subtableMakers[1] = function makeLookup1(subtable) {
+ if (subtable.substFormat === 1) {
+ return new table.Table('substitutionTable', [
+ { name: 'substFormat', type: 'USHORT', value: 1 },
+ {
+ name: 'coverage',
+ type: 'TABLE',
+ value: new table.Coverage(subtable.coverage)
+ },
+ { name: 'deltaGlyphID', type: 'USHORT', value: subtable.deltaGlyphId }
+ ]);
+ } else {
+ return new table.Table(
+ 'substitutionTable',
+ [
+ { name: 'substFormat', type: 'USHORT', value: 2 },
+ {
+ name: 'coverage',
+ type: 'TABLE',
+ value: new table.Coverage(subtable.coverage)
+ }
+ ].concat(table.ushortList('substitute', subtable.substitute))
+ );
+ }
+ check.fail('Lookup type 1 substFormat must be 1 or 2.');
+ };
+
+ subtableMakers[3] = function makeLookup3(subtable) {
+ check.assert(
+ subtable.substFormat === 1,
+ 'Lookup type 3 substFormat must be 1.'
+ );
+ return new table.Table(
+ 'substitutionTable',
+ [
+ { name: 'substFormat', type: 'USHORT', value: 1 },
+ {
+ name: 'coverage',
+ type: 'TABLE',
+ value: new table.Coverage(subtable.coverage)
+ }
+ ].concat(
+ table.tableList('altSet', subtable.alternateSets, function(
+ alternateSet
+ ) {
+ return new table.Table(
+ 'alternateSetTable',
+ table.ushortList('alternate', alternateSet)
+ );
+ })
+ )
+ );
+ };
+
+ subtableMakers[4] = function makeLookup4(subtable) {
+ check.assert(
+ subtable.substFormat === 1,
+ 'Lookup type 4 substFormat must be 1.'
+ );
+ return new table.Table(
+ 'substitutionTable',
+ [
+ { name: 'substFormat', type: 'USHORT', value: 1 },
+ {
+ name: 'coverage',
+ type: 'TABLE',
+ value: new table.Coverage(subtable.coverage)
+ }
+ ].concat(
+ table.tableList('ligSet', subtable.ligatureSets, function(ligatureSet) {
+ return new table.Table(
+ 'ligatureSetTable',
+ table.tableList('ligature', ligatureSet, function(ligature) {
+ return new table.Table(
+ 'ligatureTable',
+ [
+ { name: 'ligGlyph', type: 'USHORT', value: ligature.ligGlyph }
+ ].concat(
+ table.ushortList(
+ 'component',
+ ligature.components,
+ ligature.components.length + 1
+ )
+ )
+ );
+ })
+ );
+ })
+ )
+ );
+ };
+
+ function makeGsubTable(gsub) {
+ return new table.Table('GSUB', [
+ { name: 'version', type: 'ULONG', value: 0x10000 },
+ {
+ name: 'scripts',
+ type: 'TABLE',
+ value: new table.ScriptList(gsub.scripts)
+ },
+ {
+ name: 'features',
+ type: 'TABLE',
+ value: new table.FeatureList(gsub.features)
+ },
+ {
+ name: 'lookups',
+ type: 'TABLE',
+ value: new table.LookupList(gsub.lookups, subtableMakers)
+ }
+ ]);
+ }
+
+ var gsub = { parse: parseGsubTable, make: makeGsubTable };
+
+ // The `GPOS` table contains kerning pairs, among other things.
+
+ // Parse the metadata `meta` table.
+ // https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6meta.html
+ function parseMetaTable(data, start) {
+ var p = new parse.Parser(data, start);
+ var tableVersion = p.parseULong();
+ check.argument(tableVersion === 1, 'Unsupported META table version.');
+ p.parseULong(); // flags - currently unused and set to 0
+ p.parseULong(); // tableOffset
+ var numDataMaps = p.parseULong();
+
+ var tags = {};
+ for (var i = 0; i < numDataMaps; i++) {
+ var tag = p.parseTag();
+ var dataOffset = p.parseULong();
+ var dataLength = p.parseULong();
+ var text = decode.UTF8(data, start + dataOffset, dataLength);
+
+ tags[tag] = text;
+ }
+ return tags;
+ }
+
+ function makeMetaTable(tags) {
+ var numTags = Object.keys(tags).length;
+ var stringPool = '';
+ var stringPoolOffset = 16 + numTags * 12;
+
+ var result = new table.Table('meta', [
+ { name: 'version', type: 'ULONG', value: 1 },
+ { name: 'flags', type: 'ULONG', value: 0 },
+ { name: 'offset', type: 'ULONG', value: stringPoolOffset },
+ { name: 'numTags', type: 'ULONG', value: numTags }
+ ]);
+
+ for (var tag in tags) {
+ var pos = stringPool.length;
+ stringPool += tags[tag];
+
+ result.fields.push({ name: 'tag ' + tag, type: 'TAG', value: tag });
+ result.fields.push({
+ name: 'offset ' + tag,
+ type: 'ULONG',
+ value: stringPoolOffset + pos
+ });
+ result.fields.push({
+ name: 'length ' + tag,
+ type: 'ULONG',
+ value: tags[tag].length
+ });
+ }
+
+ result.fields.push({
+ name: 'stringPool',
+ type: 'CHARARRAY',
+ value: stringPool
+ });
+
+ return result;
+ }
+
+ var meta = { parse: parseMetaTable, make: makeMetaTable };
+
+ // The `sfnt` wrapper provides organization for the tables in the font.
+
+ function log2(v) {
+ return (Math.log(v) / Math.log(2)) | 0;
+ }
+
+ function computeCheckSum(bytes) {
+ while (bytes.length % 4 !== 0) {
+ bytes.push(0);
+ }
+
+ var sum = 0;
+ for (var i = 0; i < bytes.length; i += 4) {
+ sum +=
+ (bytes[i] << 24) +
+ (bytes[i + 1] << 16) +
+ (bytes[i + 2] << 8) +
+ bytes[i + 3];
+ }
+
+ sum %= Math.pow(2, 32);
+ return sum;
+ }
+
+ function makeTableRecord(tag, checkSum, offset, length) {
+ return new table.Record('Table Record', [
+ { name: 'tag', type: 'TAG', value: tag !== undefined ? tag : '' },
+ {
+ name: 'checkSum',
+ type: 'ULONG',
+ value: checkSum !== undefined ? checkSum : 0
+ },
+ {
+ name: 'offset',
+ type: 'ULONG',
+ value: offset !== undefined ? offset : 0
+ },
+ {
+ name: 'length',
+ type: 'ULONG',
+ value: length !== undefined ? length : 0
+ }
+ ]);
+ }
+
+ function makeSfntTable(tables) {
+ var sfnt = new table.Table('sfnt', [
+ { name: 'version', type: 'TAG', value: 'OTTO' },
+ { name: 'numTables', type: 'USHORT', value: 0 },
+ { name: 'searchRange', type: 'USHORT', value: 0 },
+ { name: 'entrySelector', type: 'USHORT', value: 0 },
+ { name: 'rangeShift', type: 'USHORT', value: 0 }
+ ]);
+ sfnt.tables = tables;
+ sfnt.numTables = tables.length;
+ var highestPowerOf2 = Math.pow(2, log2(sfnt.numTables));
+ sfnt.searchRange = 16 * highestPowerOf2;
+ sfnt.entrySelector = log2(highestPowerOf2);
+ sfnt.rangeShift = sfnt.numTables * 16 - sfnt.searchRange;
+
+ var recordFields = [];
+ var tableFields = [];
+
+ var offset = sfnt.sizeOf() + makeTableRecord().sizeOf() * sfnt.numTables;
+ while (offset % 4 !== 0) {
+ offset += 1;
+ tableFields.push({ name: 'padding', type: 'BYTE', value: 0 });
+ }
+
+ for (var i = 0; i < tables.length; i += 1) {
+ var t = tables[i];
+ check.argument(
+ t.tableName.length === 4,
+ 'Table name' + t.tableName + ' is invalid.'
+ );
+ var tableLength = t.sizeOf();
+ var tableRecord = makeTableRecord(
+ t.tableName,
+ computeCheckSum(t.encode()),
+ offset,
+ tableLength
+ );
+ recordFields.push({
+ name: tableRecord.tag + ' Table Record',
+ type: 'RECORD',
+ value: tableRecord
+ });
+ tableFields.push({
+ name: t.tableName + ' table',
+ type: 'RECORD',
+ value: t
+ });
+ offset += tableLength;
+ check.argument(
+ !isNaN(offset),
+ 'Something went wrong calculating the offset.'
+ );
+ while (offset % 4 !== 0) {
+ offset += 1;
+ tableFields.push({ name: 'padding', type: 'BYTE', value: 0 });
+ }
+ }
+
+ // Table records need to be sorted alphabetically.
+ recordFields.sort(function(r1, r2) {
+ if (r1.value.tag > r2.value.tag) {
+ return 1;
+ } else {
+ return -1;
+ }
+ });
+
+ sfnt.fields = sfnt.fields.concat(recordFields);
+ sfnt.fields = sfnt.fields.concat(tableFields);
+ return sfnt;
+ }
+
+ // Get the metrics for a character. If the string has more than one character
+ // this function returns metrics for the first available character.
+ // You can provide optional fallback metrics if no characters are available.
+ function metricsForChar(font, chars, notFoundMetrics) {
+ for (var i = 0; i < chars.length; i += 1) {
+ var glyphIndex = font.charToGlyphIndex(chars[i]);
+ if (glyphIndex > 0) {
+ var glyph = font.glyphs.get(glyphIndex);
+ return glyph.getMetrics();
+ }
+ }
+
+ return notFoundMetrics;
+ }
+
+ function average(vs) {
+ var sum = 0;
+ for (var i = 0; i < vs.length; i += 1) {
+ sum += vs[i];
+ }
+
+ return sum / vs.length;
+ }
+
+ // Convert the font object to a SFNT data structure.
+ // This structure contains all the necessary tables and metadata to create a binary OTF file.
+ function fontToSfntTable(font) {
+ var xMins = [];
+ var yMins = [];
+ var xMaxs = [];
+ var yMaxs = [];
+ var advanceWidths = [];
+ var leftSideBearings = [];
+ var rightSideBearings = [];
+ var firstCharIndex;
+ var lastCharIndex = 0;
+ var ulUnicodeRange1 = 0;
+ var ulUnicodeRange2 = 0;
+ var ulUnicodeRange3 = 0;
+ var ulUnicodeRange4 = 0;
+
+ for (var i = 0; i < font.glyphs.length; i += 1) {
+ var glyph = font.glyphs.get(i);
+ var unicode = glyph.unicode | 0;
+
+ if (isNaN(glyph.advanceWidth)) {
+ throw new Error(
+ 'Glyph ' + glyph.name + ' (' + i + '): advanceWidth is not a number.'
+ );
+ }
+
+ if (firstCharIndex > unicode || firstCharIndex === undefined) {
+ // ignore .notdef char
+ if (unicode > 0) {
+ firstCharIndex = unicode;
+ }
+ }
+
+ if (lastCharIndex < unicode) {
+ lastCharIndex = unicode;
+ }
+
+ var position = os2.getUnicodeRange(unicode);
+ if (position < 32) {
+ ulUnicodeRange1 |= 1 << position;
+ } else if (position < 64) {
+ ulUnicodeRange2 |= 1 << (position - 32);
+ } else if (position < 96) {
+ ulUnicodeRange3 |= 1 << (position - 64);
+ } else if (position < 123) {
+ ulUnicodeRange4 |= 1 << (position - 96);
+ } else {
+ throw new Error(
+ 'Unicode ranges bits > 123 are reserved for internal usage'
+ );
+ }
+ // Skip non-important characters.
+ if (glyph.name === '.notdef') {
+ continue;
+ }
+ var metrics = glyph.getMetrics();
+ xMins.push(metrics.xMin);
+ yMins.push(metrics.yMin);
+ xMaxs.push(metrics.xMax);
+ yMaxs.push(metrics.yMax);
+ leftSideBearings.push(metrics.leftSideBearing);
+ rightSideBearings.push(metrics.rightSideBearing);
+ advanceWidths.push(glyph.advanceWidth);
+ }
+
+ var globals = {
+ xMin: Math.min.apply(null, xMins),
+ yMin: Math.min.apply(null, yMins),
+ xMax: Math.max.apply(null, xMaxs),
+ yMax: Math.max.apply(null, yMaxs),
+ advanceWidthMax: Math.max.apply(null, advanceWidths),
+ advanceWidthAvg: average(advanceWidths),
+ minLeftSideBearing: Math.min.apply(null, leftSideBearings),
+ maxLeftSideBearing: Math.max.apply(null, leftSideBearings),
+ minRightSideBearing: Math.min.apply(null, rightSideBearings)
+ };
+ globals.ascender = font.ascender;
+ globals.descender = font.descender;
+
+ var headTable = head.make({
+ flags: 3, // 00000011 (baseline for font at y=0; left sidebearing point at x=0)
+ unitsPerEm: font.unitsPerEm,
+ xMin: globals.xMin,
+ yMin: globals.yMin,
+ xMax: globals.xMax,
+ yMax: globals.yMax,
+ lowestRecPPEM: 3,
+ createdTimestamp: font.createdTimestamp
+ });
+
+ var hheaTable = hhea.make({
+ ascender: globals.ascender,
+ descender: globals.descender,
+ advanceWidthMax: globals.advanceWidthMax,
+ minLeftSideBearing: globals.minLeftSideBearing,
+ minRightSideBearing: globals.minRightSideBearing,
+ xMaxExtent: globals.maxLeftSideBearing + (globals.xMax - globals.xMin),
+ numberOfHMetrics: font.glyphs.length
+ });
+
+ var maxpTable = maxp.make(font.glyphs.length);
+
+ var os2Table = os2.make({
+ xAvgCharWidth: Math.round(globals.advanceWidthAvg),
+ usWeightClass: font.tables.os2.usWeightClass,
+ usWidthClass: font.tables.os2.usWidthClass,
+ usFirstCharIndex: firstCharIndex,
+ usLastCharIndex: lastCharIndex,
+ ulUnicodeRange1: ulUnicodeRange1,
+ ulUnicodeRange2: ulUnicodeRange2,
+ ulUnicodeRange3: ulUnicodeRange3,
+ ulUnicodeRange4: ulUnicodeRange4,
+ fsSelection: font.tables.os2.fsSelection, // REGULAR
+ // See http://typophile.com/node/13081 for more info on vertical metrics.
+ // We get metrics for typical characters (such as "x" for xHeight).
+ // We provide some fallback characters if characters are unavailable: their
+ // ordering was chosen experimentally.
+ sTypoAscender: globals.ascender,
+ sTypoDescender: globals.descender,
+ sTypoLineGap: 0,
+ usWinAscent: globals.yMax,
+ usWinDescent: Math.abs(globals.yMin),
+ ulCodePageRange1: 1, // FIXME: hard-code Latin 1 support for now
+ sxHeight: metricsForChar(font, 'xyvw', {
+ yMax: Math.round(globals.ascender / 2)
+ }).yMax,
+ sCapHeight: metricsForChar(font, 'HIKLEFJMNTZBDPRAGOQSUVWXY', globals)
+ .yMax,
+ usDefaultChar: font.hasChar(' ') ? 32 : 0, // Use space as the default character, if available.
+ usBreakChar: font.hasChar(' ') ? 32 : 0 // Use space as the break character, if available.
+ });
+
+ var hmtxTable = hmtx.make(font.glyphs);
+ var cmapTable = cmap.make(font.glyphs);
+
+ var englishFamilyName = font.getEnglishName('fontFamily');
+ var englishStyleName = font.getEnglishName('fontSubfamily');
+ var englishFullName = englishFamilyName + ' ' + englishStyleName;
+ var postScriptName = font.getEnglishName('postScriptName');
+ if (!postScriptName) {
+ postScriptName =
+ englishFamilyName.replace(/\s/g, '') + '-' + englishStyleName;
+ }
+
+ var names = {};
+ for (var n in font.names) {
+ names[n] = font.names[n];
+ }
+
+ if (!names.uniqueID) {
+ names.uniqueID = {
+ en: font.getEnglishName('manufacturer') + ':' + englishFullName
+ };
+ }
+
+ if (!names.postScriptName) {
+ names.postScriptName = { en: postScriptName };
+ }
+
+ if (!names.preferredFamily) {
+ names.preferredFamily = font.names.fontFamily;
+ }
+
+ if (!names.preferredSubfamily) {
+ names.preferredSubfamily = font.names.fontSubfamily;
+ }
+
+ var languageTags = [];
+ var nameTable = _name.make(names, languageTags);
+ var ltagTable =
+ languageTags.length > 0 ? ltag.make(languageTags) : undefined;
+
+ var postTable = post.make();
+ var cffTable = cff.make(font.glyphs, {
+ version: font.getEnglishName('version'),
+ fullName: englishFullName,
+ familyName: englishFamilyName,
+ weightName: englishStyleName,
+ postScriptName: postScriptName,
+ unitsPerEm: font.unitsPerEm,
+ fontBBox: [0, globals.yMin, globals.ascender, globals.advanceWidthMax]
+ });
+
+ var metaTable =
+ font.metas && Object.keys(font.metas).length > 0
+ ? meta.make(font.metas)
+ : undefined;
+
+ // The order does not matter because makeSfntTable() will sort them.
+ var tables = [
+ headTable,
+ hheaTable,
+ maxpTable,
+ os2Table,
+ nameTable,
+ cmapTable,
+ postTable,
+ cffTable,
+ hmtxTable
+ ];
+ if (ltagTable) {
+ tables.push(ltagTable);
+ }
+ // Optional tables
+ if (font.tables.gsub) {
+ tables.push(gsub.make(font.tables.gsub));
+ }
+ if (metaTable) {
+ tables.push(metaTable);
+ }
+
+ var sfntTable = makeSfntTable(tables);
+
+ // Compute the font's checkSum and store it in head.checkSumAdjustment.
+ var bytes = sfntTable.encode();
+ var checkSum = computeCheckSum(bytes);
+ var tableFields = sfntTable.fields;
+ var checkSumAdjusted = false;
+ for (var i$1 = 0; i$1 < tableFields.length; i$1 += 1) {
+ if (tableFields[i$1].name === 'head table') {
+ tableFields[i$1].value.checkSumAdjustment = 0xb1b0afba - checkSum;
+ checkSumAdjusted = true;
+ break;
+ }
+ }
+
+ if (!checkSumAdjusted) {
+ throw new Error('Could not find head table with checkSum to adjust.');
+ }
+
+ return sfntTable;
+ }
+
+ var sfnt = {
+ make: makeSfntTable,
+ fontToTable: fontToSfntTable,
+ computeCheckSum: computeCheckSum
+ };
+
+ // The Layout object is the prototype of Substitution objects, and provides
+
+ function searchTag(arr, tag) {
+ /* jshint bitwise: false */
+ var imin = 0;
+ var imax = arr.length - 1;
+ while (imin <= imax) {
+ var imid = (imin + imax) >>> 1;
+ var val = arr[imid].tag;
+ if (val === tag) {
+ return imid;
+ } else if (val < tag) {
+ imin = imid + 1;
+ } else {
+ imax = imid - 1;
+ }
+ }
+ // Not found: return -1-insertion point
+ return -imin - 1;
+ }
+
+ function binSearch(arr, value) {
+ /* jshint bitwise: false */
+ var imin = 0;
+ var imax = arr.length - 1;
+ while (imin <= imax) {
+ var imid = (imin + imax) >>> 1;
+ var val = arr[imid];
+ if (val === value) {
+ return imid;
+ } else if (val < value) {
+ imin = imid + 1;
+ } else {
+ imax = imid - 1;
+ }
+ }
+ // Not found: return -1-insertion point
+ return -imin - 1;
+ }
+
+ // binary search in a list of ranges (coverage, class definition)
+ function searchRange(ranges, value) {
+ // jshint bitwise: false
+ var range;
+ var imin = 0;
+ var imax = ranges.length - 1;
+ while (imin <= imax) {
+ var imid = (imin + imax) >>> 1;
+ range = ranges[imid];
+ var start = range.start;
+ if (start === value) {
+ return range;
+ } else if (start < value) {
+ imin = imid + 1;
+ } else {
+ imax = imid - 1;
+ }
+ }
+ if (imin > 0) {
+ range = ranges[imin - 1];
+ if (value > range.end) {
+ return 0;
+ }
+ return range;
+ }
+ }
+
+ /**
+ * @exports opentype.Layout
+ * @class
+ */
+ function Layout(font, tableName) {
+ this.font = font;
+ this.tableName = tableName;
+ }
+
+ Layout.prototype = {
+ /**
+ * Binary search an object by "tag" property
+ * @instance
+ * @function searchTag
+ * @memberof opentype.Layout
+ * @param {Array} arr
+ * @param {string} tag
+ * @return {number}
+ */
+ searchTag: searchTag,
+
+ /**
+ * Binary search in a list of numbers
+ * @instance
+ * @function binSearch
+ * @memberof opentype.Layout
+ * @param {Array} arr
+ * @param {number} value
+ * @return {number}
+ */
+ binSearch: binSearch,
+
+ /**
+ * Get or create the Layout table (GSUB, GPOS etc).
+ * @param {boolean} create - Whether to create a new one.
+ * @return {Object} The GSUB or GPOS table.
+ */
+ getTable: function(create) {
+ var layout = this.font.tables[this.tableName];
+ if (!layout && create) {
+ layout = this.font.tables[this.tableName] = this.createDefaultTable();
+ }
+ return layout;
+ },
+
+ /**
+ * Returns all scripts in the substitution table.
+ * @instance
+ * @return {Array}
+ */
+ getScriptNames: function() {
+ var layout = this.getTable();
+ if (!layout) {
+ return [];
+ }
+ return layout.scripts.map(function(script) {
+ return script.tag;
+ });
+ },
+
+ /**
+ * Returns the best bet for a script name.
+ * Returns 'DFLT' if it exists.
+ * If not, returns 'latn' if it exists.
+ * If neither exist, returns undefined.
+ */
+ getDefaultScriptName: function() {
+ var layout = this.getTable();
+ if (!layout) {
+ return;
+ }
+ var hasLatn = false;
+ for (var i = 0; i < layout.scripts.length; i++) {
+ var name = layout.scripts[i].tag;
+ if (name === 'DFLT') {
+ return name;
+ }
+ if (name === 'latn') {
+ hasLatn = true;
+ }
+ }
+ if (hasLatn) {
+ return 'latn';
+ }
+ },
+
+ /**
+ * Returns all LangSysRecords in the given script.
+ * @instance
+ * @param {string} [script='DFLT']
+ * @param {boolean} create - forces the creation of this script table if it doesn't exist.
+ * @return {Object} An object with tag and script properties.
+ */
+ getScriptTable: function(script, create) {
+ var layout = this.getTable(create);
+ if (layout) {
+ script = script || 'DFLT';
+ var scripts = layout.scripts;
+ var pos = searchTag(layout.scripts, script);
+ if (pos >= 0) {
+ return scripts[pos].script;
+ } else if (create) {
+ var scr = {
+ tag: script,
+ script: {
+ defaultLangSys: {
+ reserved: 0,
+ reqFeatureIndex: 0xffff,
+ featureIndexes: []
+ },
+ langSysRecords: []
+ }
+ };
+ scripts.splice(-1 - pos, 0, scr);
+ return scr.script;
+ }
+ }
+ },
+
+ /**
+ * Returns a language system table
+ * @instance
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dlft']
+ * @param {boolean} create - forces the creation of this langSysTable if it doesn't exist.
+ * @return {Object}
+ */
+ getLangSysTable: function(script, language, create) {
+ var scriptTable = this.getScriptTable(script, create);
+ if (scriptTable) {
+ if (!language || language === 'dflt' || language === 'DFLT') {
+ return scriptTable.defaultLangSys;
+ }
+ var pos = searchTag(scriptTable.langSysRecords, language);
+ if (pos >= 0) {
+ return scriptTable.langSysRecords[pos].langSys;
+ } else if (create) {
+ var langSysRecord = {
+ tag: language,
+ langSys: {
+ reserved: 0,
+ reqFeatureIndex: 0xffff,
+ featureIndexes: []
+ }
+ };
+ scriptTable.langSysRecords.splice(-1 - pos, 0, langSysRecord);
+ return langSysRecord.langSys;
+ }
+ }
+ },
+
+ /**
+ * Get a specific feature table.
+ * @instance
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dlft']
+ * @param {string} feature - One of the codes listed at https://www.microsoft.com/typography/OTSPEC/featurelist.htm
+ * @param {boolean} create - forces the creation of the feature table if it doesn't exist.
+ * @return {Object}
+ */
+ getFeatureTable: function(script, language, feature, create) {
+ var langSysTable = this.getLangSysTable(script, language, create);
+ if (langSysTable) {
+ var featureRecord;
+ var featIndexes = langSysTable.featureIndexes;
+ var allFeatures = this.font.tables[this.tableName].features;
+ // The FeatureIndex array of indices is in arbitrary order,
+ // even if allFeatures is sorted alphabetically by feature tag.
+ for (var i = 0; i < featIndexes.length; i++) {
+ featureRecord = allFeatures[featIndexes[i]];
+ if (featureRecord.tag === feature) {
+ return featureRecord.feature;
+ }
+ }
+ if (create) {
+ var index = allFeatures.length;
+ // Automatic ordering of features would require to shift feature indexes in the script list.
+ check.assert(
+ index === 0 || feature >= allFeatures[index - 1].tag,
+ 'Features must be added in alphabetical order.'
+ );
+ featureRecord = {
+ tag: feature,
+ feature: { params: 0, lookupListIndexes: [] }
+ };
+ allFeatures.push(featureRecord);
+ featIndexes.push(index);
+ return featureRecord.feature;
+ }
+ }
+ },
+
+ /**
+ * Get the lookup tables of a given type for a script/language/feature.
+ * @instance
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dlft']
+ * @param {string} feature - 4-letter feature code
+ * @param {number} lookupType - 1 to 9
+ * @param {boolean} create - forces the creation of the lookup table if it doesn't exist, with no subtables.
+ * @return {Object[]}
+ */
+ getLookupTables: function(script, language, feature, lookupType, create) {
+ var featureTable = this.getFeatureTable(
+ script,
+ language,
+ feature,
+ create
+ );
+ var tables = [];
+ if (featureTable) {
+ var lookupTable;
+ var lookupListIndexes = featureTable.lookupListIndexes;
+ var allLookups = this.font.tables[this.tableName].lookups;
+ // lookupListIndexes are in no particular order, so use naive search.
+ for (var i = 0; i < lookupListIndexes.length; i++) {
+ lookupTable = allLookups[lookupListIndexes[i]];
+ if (lookupTable.lookupType === lookupType) {
+ tables.push(lookupTable);
+ }
+ }
+ if (tables.length === 0 && create) {
+ lookupTable = {
+ lookupType: lookupType,
+ lookupFlag: 0,
+ subtables: [],
+ markFilteringSet: undefined
+ };
+ var index = allLookups.length;
+ allLookups.push(lookupTable);
+ lookupListIndexes.push(index);
+ return [lookupTable];
+ }
+ }
+ return tables;
+ },
+
+ /**
+ * Find a glyph in a class definition table
+ * https://docs.microsoft.com/en-us/typography/opentype/spec/chapter2#class-definition-table
+ * @param {object} classDefTable - an OpenType Layout class definition table
+ * @param {number} glyphIndex - the index of the glyph to find
+ * @returns {number} -1 if not found
+ */
+ getGlyphClass: function(classDefTable, glyphIndex) {
+ switch (classDefTable.format) {
+ case 1:
+ if (
+ classDefTable.startGlyph <= glyphIndex &&
+ glyphIndex < classDefTable.startGlyph + classDefTable.classes.length
+ ) {
+ return classDefTable.classes[glyphIndex - classDefTable.startGlyph];
+ }
+ return 0;
+ case 2:
+ var range = searchRange(classDefTable.ranges, glyphIndex);
+ return range ? range.classId : 0;
+ }
+ },
+
+ /**
+ * Find a glyph in a coverage table
+ * https://docs.microsoft.com/en-us/typography/opentype/spec/chapter2#coverage-table
+ * @param {object} coverageTable - an OpenType Layout coverage table
+ * @param {number} glyphIndex - the index of the glyph to find
+ * @returns {number} -1 if not found
+ */
+ getCoverageIndex: function(coverageTable, glyphIndex) {
+ switch (coverageTable.format) {
+ case 1:
+ var index = binSearch(coverageTable.glyphs, glyphIndex);
+ return index >= 0 ? index : -1;
+ case 2:
+ var range = searchRange(coverageTable.ranges, glyphIndex);
+ return range ? range.index + glyphIndex - range.start : -1;
+ }
+ },
+
+ /**
+ * Returns the list of glyph indexes of a coverage table.
+ * Format 1: the list is stored raw
+ * Format 2: compact list as range records.
+ * @instance
+ * @param {Object} coverageTable
+ * @return {Array}
+ */
+ expandCoverage: function(coverageTable) {
+ if (coverageTable.format === 1) {
+ return coverageTable.glyphs;
+ } else {
+ var glyphs = [];
+ var ranges = coverageTable.ranges;
+ for (var i = 0; i < ranges.length; i++) {
+ var range = ranges[i];
+ var start = range.start;
+ var end = range.end;
+ for (var j = start; j <= end; j++) {
+ glyphs.push(j);
+ }
+ }
+ return glyphs;
+ }
+ }
+ };
+
+ // The Position object provides utility methods to manipulate
+
+ /**
+ * @exports opentype.Position
+ * @class
+ * @extends opentype.Layout
+ * @param {opentype.Font}
+ * @constructor
+ */
+ function Position(font) {
+ Layout.call(this, font, 'gpos');
+ }
+
+ Position.prototype = Layout.prototype;
+
+ /**
+ * Init some data for faster and easier access later.
+ */
+ Position.prototype.init = function() {
+ var script = this.getDefaultScriptName();
+ this.defaultKerningTables = this.getKerningTables(script);
+ };
+
+ /**
+ * Find a glyph pair in a list of lookup tables of type 2 and retrieve the xAdvance kerning value.
+ *
+ * @param {integer} leftIndex - left glyph index
+ * @param {integer} rightIndex - right glyph index
+ * @returns {integer}
+ */
+ Position.prototype.getKerningValue = function(
+ kerningLookups,
+ leftIndex,
+ rightIndex
+ ) {
+ var this$1 = this;
+
+ for (var i = 0; i < kerningLookups.length; i++) {
+ var subtables = kerningLookups[i].subtables;
+ for (var j = 0; j < subtables.length; j++) {
+ var subtable = subtables[j];
+ var covIndex = this$1.getCoverageIndex(subtable.coverage, leftIndex);
+ if (covIndex < 0) {
+ continue;
+ }
+ switch (subtable.posFormat) {
+ case 1:
+ // Search Pair Adjustment Positioning Format 1
+ var pairSet = subtable.pairSets[covIndex];
+ for (var k = 0; k < pairSet.length; k++) {
+ var pair = pairSet[k];
+ if (pair.secondGlyph === rightIndex) {
+ return (pair.value1 && pair.value1.xAdvance) || 0;
+ }
+ }
+ break; // left glyph found, not right glyph - try next subtable
+ case 2:
+ // Search Pair Adjustment Positioning Format 2
+ var class1 = this$1.getGlyphClass(subtable.classDef1, leftIndex);
+ var class2 = this$1.getGlyphClass(subtable.classDef2, rightIndex);
+ var pair$1 = subtable.classRecords[class1][class2];
+ return (pair$1.value1 && pair$1.value1.xAdvance) || 0;
+ }
+ }
+ }
+ return 0;
+ };
+
+ /**
+ * List all kerning lookup tables.
+ *
+ * @param {string} [script='DFLT'] - use font.position.getDefaultScriptName() for a better default value
+ * @param {string} [language='dflt']
+ * @return {object[]} The list of kerning lookup tables (may be empty), or undefined if there is no GPOS table (and we should use the kern table)
+ */
+ Position.prototype.getKerningTables = function(script, language) {
+ if (this.font.tables.gpos) {
+ return this.getLookupTables(script, language, 'kern', 2);
+ }
+ };
+
+ // The Substitution object provides utility methods to manipulate
+
+ /**
+ * @exports opentype.Substitution
+ * @class
+ * @extends opentype.Layout
+ * @param {opentype.Font}
+ * @constructor
+ */
+ function Substitution(font) {
+ Layout.call(this, font, 'gsub');
+ }
+
+ // Check if 2 arrays of primitives are equal.
+ function arraysEqual(ar1, ar2) {
+ var n = ar1.length;
+ if (n !== ar2.length) {
+ return false;
+ }
+ for (var i = 0; i < n; i++) {
+ if (ar1[i] !== ar2[i]) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ // Find the first subtable of a lookup table in a particular format.
+ function getSubstFormat(lookupTable, format, defaultSubtable) {
+ var subtables = lookupTable.subtables;
+ for (var i = 0; i < subtables.length; i++) {
+ var subtable = subtables[i];
+ if (subtable.substFormat === format) {
+ return subtable;
+ }
+ }
+ if (defaultSubtable) {
+ subtables.push(defaultSubtable);
+ return defaultSubtable;
+ }
+ return undefined;
+ }
+
+ Substitution.prototype = Layout.prototype;
+
+ /**
+ * Create a default GSUB table.
+ * @return {Object} gsub - The GSUB table.
+ */
+ Substitution.prototype.createDefaultTable = function() {
+ // Generate a default empty GSUB table with just a DFLT script and dflt lang sys.
+ return {
+ version: 1,
+ scripts: [
+ {
+ tag: 'DFLT',
+ script: {
+ defaultLangSys: {
+ reserved: 0,
+ reqFeatureIndex: 0xffff,
+ featureIndexes: []
+ },
+ langSysRecords: []
+ }
+ }
+ ],
+ features: [],
+ lookups: []
+ };
+ };
+
+ /**
+ * List all single substitutions (lookup type 1) for a given script, language, and feature.
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dflt']
+ * @param {string} feature - 4-character feature name ('aalt', 'salt', 'ss01'...)
+ * @return {Array} substitutions - The list of substitutions.
+ */
+ Substitution.prototype.getSingle = function(feature, script, language) {
+ var this$1 = this;
+
+ var substitutions = [];
+ var lookupTables = this.getLookupTables(script, language, feature, 1);
+ for (var idx = 0; idx < lookupTables.length; idx++) {
+ var subtables = lookupTables[idx].subtables;
+ for (var i = 0; i < subtables.length; i++) {
+ var subtable = subtables[i];
+ var glyphs = this$1.expandCoverage(subtable.coverage);
+ var j = void 0;
+ if (subtable.substFormat === 1) {
+ var delta = subtable.deltaGlyphId;
+ for (j = 0; j < glyphs.length; j++) {
+ var glyph = glyphs[j];
+ substitutions.push({ sub: glyph, by: glyph + delta });
+ }
+ } else {
+ var substitute = subtable.substitute;
+ for (j = 0; j < glyphs.length; j++) {
+ substitutions.push({ sub: glyphs[j], by: substitute[j] });
+ }
+ }
+ }
+ }
+ return substitutions;
+ };
+
+ /**
+ * List all alternates (lookup type 3) for a given script, language, and feature.
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dflt']
+ * @param {string} feature - 4-character feature name ('aalt', 'salt'...)
+ * @return {Array} alternates - The list of alternates
+ */
+ Substitution.prototype.getAlternates = function(feature, script, language) {
+ var this$1 = this;
+
+ var alternates = [];
+ var lookupTables = this.getLookupTables(script, language, feature, 3);
+ for (var idx = 0; idx < lookupTables.length; idx++) {
+ var subtables = lookupTables[idx].subtables;
+ for (var i = 0; i < subtables.length; i++) {
+ var subtable = subtables[i];
+ var glyphs = this$1.expandCoverage(subtable.coverage);
+ var alternateSets = subtable.alternateSets;
+ for (var j = 0; j < glyphs.length; j++) {
+ alternates.push({ sub: glyphs[j], by: alternateSets[j] });
+ }
+ }
+ }
+ return alternates;
+ };
+
+ /**
+ * List all ligatures (lookup type 4) for a given script, language, and feature.
+ * The result is an array of ligature objects like { sub: [ids], by: id }
+ * @param {string} feature - 4-letter feature name ('liga', 'rlig', 'dlig'...)
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dflt']
+ * @return {Array} ligatures - The list of ligatures.
+ */
+ Substitution.prototype.getLigatures = function(feature, script, language) {
+ var this$1 = this;
+
+ var ligatures = [];
+ var lookupTables = this.getLookupTables(script, language, feature, 4);
+ for (var idx = 0; idx < lookupTables.length; idx++) {
+ var subtables = lookupTables[idx].subtables;
+ for (var i = 0; i < subtables.length; i++) {
+ var subtable = subtables[i];
+ var glyphs = this$1.expandCoverage(subtable.coverage);
+ var ligatureSets = subtable.ligatureSets;
+ for (var j = 0; j < glyphs.length; j++) {
+ var startGlyph = glyphs[j];
+ var ligSet = ligatureSets[j];
+ for (var k = 0; k < ligSet.length; k++) {
+ var lig = ligSet[k];
+ ligatures.push({
+ sub: [startGlyph].concat(lig.components),
+ by: lig.ligGlyph
+ });
+ }
+ }
+ }
+ }
+ return ligatures;
+ };
+
+ /**
+ * Add or modify a single substitution (lookup type 1)
+ * Format 2, more flexible, is always used.
+ * @param {string} feature - 4-letter feature name ('liga', 'rlig', 'dlig'...)
+ * @param {Object} substitution - { sub: id, delta: number } for format 1 or { sub: id, by: id } for format 2.
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dflt']
+ */
+ Substitution.prototype.addSingle = function(
+ feature,
+ substitution,
+ script,
+ language
+ ) {
+ var lookupTable = this.getLookupTables(
+ script,
+ language,
+ feature,
+ 1,
+ true
+ )[0];
+ var subtable = getSubstFormat(lookupTable, 2, {
+ // lookup type 1 subtable, format 2, coverage format 1
+ substFormat: 2,
+ coverage: { format: 1, glyphs: [] },
+ substitute: []
+ });
+ check.assert(
+ subtable.coverage.format === 1,
+ 'Ligature: unable to modify coverage table format ' +
+ subtable.coverage.format
+ );
+ var coverageGlyph = substitution.sub;
+ var pos = this.binSearch(subtable.coverage.glyphs, coverageGlyph);
+ if (pos < 0) {
+ pos = -1 - pos;
+ subtable.coverage.glyphs.splice(pos, 0, coverageGlyph);
+ subtable.substitute.splice(pos, 0, 0);
+ }
+ subtable.substitute[pos] = substitution.by;
+ };
+
+ /**
+ * Add or modify an alternate substitution (lookup type 1)
+ * @param {string} feature - 4-letter feature name ('liga', 'rlig', 'dlig'...)
+ * @param {Object} substitution - { sub: id, by: [ids] }
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dflt']
+ */
+ Substitution.prototype.addAlternate = function(
+ feature,
+ substitution,
+ script,
+ language
+ ) {
+ var lookupTable = this.getLookupTables(
+ script,
+ language,
+ feature,
+ 3,
+ true
+ )[0];
+ var subtable = getSubstFormat(lookupTable, 1, {
+ // lookup type 3 subtable, format 1, coverage format 1
+ substFormat: 1,
+ coverage: { format: 1, glyphs: [] },
+ alternateSets: []
+ });
+ check.assert(
+ subtable.coverage.format === 1,
+ 'Ligature: unable to modify coverage table format ' +
+ subtable.coverage.format
+ );
+ var coverageGlyph = substitution.sub;
+ var pos = this.binSearch(subtable.coverage.glyphs, coverageGlyph);
+ if (pos < 0) {
+ pos = -1 - pos;
+ subtable.coverage.glyphs.splice(pos, 0, coverageGlyph);
+ subtable.alternateSets.splice(pos, 0, 0);
+ }
+ subtable.alternateSets[pos] = substitution.by;
+ };
+
+ /**
+ * Add a ligature (lookup type 4)
+ * Ligatures with more components must be stored ahead of those with fewer components in order to be found
+ * @param {string} feature - 4-letter feature name ('liga', 'rlig', 'dlig'...)
+ * @param {Object} ligature - { sub: [ids], by: id }
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dflt']
+ */
+ Substitution.prototype.addLigature = function(
+ feature,
+ ligature,
+ script,
+ language
+ ) {
+ var lookupTable = this.getLookupTables(
+ script,
+ language,
+ feature,
+ 4,
+ true
+ )[0];
+ var subtable = lookupTable.subtables[0];
+ if (!subtable) {
+ subtable = {
+ // lookup type 4 subtable, format 1, coverage format 1
+ substFormat: 1,
+ coverage: { format: 1, glyphs: [] },
+ ligatureSets: []
+ };
+ lookupTable.subtables[0] = subtable;
+ }
+ check.assert(
+ subtable.coverage.format === 1,
+ 'Ligature: unable to modify coverage table format ' +
+ subtable.coverage.format
+ );
+ var coverageGlyph = ligature.sub[0];
+ var ligComponents = ligature.sub.slice(1);
+ var ligatureTable = {
+ ligGlyph: ligature.by,
+ components: ligComponents
+ };
+ var pos = this.binSearch(subtable.coverage.glyphs, coverageGlyph);
+ if (pos >= 0) {
+ // ligatureSet already exists
+ var ligatureSet = subtable.ligatureSets[pos];
+ for (var i = 0; i < ligatureSet.length; i++) {
+ // If ligature already exists, return.
+ if (arraysEqual(ligatureSet[i].components, ligComponents)) {
+ return;
+ }
+ }
+ // ligature does not exist: add it.
+ ligatureSet.push(ligatureTable);
+ } else {
+ // Create a new ligatureSet and add coverage for the first glyph.
+ pos = -1 - pos;
+ subtable.coverage.glyphs.splice(pos, 0, coverageGlyph);
+ subtable.ligatureSets.splice(pos, 0, [ligatureTable]);
+ }
+ };
+
+ /**
+ * List all feature data for a given script and language.
+ * @param {string} feature - 4-letter feature name
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dflt']
+ * @return {Array} substitutions - The list of substitutions.
+ */
+ Substitution.prototype.getFeature = function(feature, script, language) {
+ if (/ss\d\d/.test(feature)) {
+ // ss01 - ss20
+ return this.getSingle(feature, script, language);
+ }
+ switch (feature) {
+ case 'aalt':
+ case 'salt':
+ return this.getSingle(feature, script, language).concat(
+ this.getAlternates(feature, script, language)
+ );
+ case 'dlig':
+ case 'liga':
+ case 'rlig':
+ return this.getLigatures(feature, script, language);
+ }
+ return undefined;
+ };
+
+ /**
+ * Add a substitution to a feature for a given script and language.
+ * @param {string} feature - 4-letter feature name
+ * @param {Object} sub - the substitution to add (an object like { sub: id or [ids], by: id or [ids] })
+ * @param {string} [script='DFLT']
+ * @param {string} [language='dflt']
+ */
+ Substitution.prototype.add = function(feature, sub, script, language) {
+ if (/ss\d\d/.test(feature)) {
+ // ss01 - ss20
+ return this.addSingle(feature, sub, script, language);
+ }
+ switch (feature) {
+ case 'aalt':
+ case 'salt':
+ if (typeof sub.by === 'number') {
+ return this.addSingle(feature, sub, script, language);
+ }
+ return this.addAlternate(feature, sub, script, language);
+ case 'dlig':
+ case 'liga':
+ case 'rlig':
+ return this.addLigature(feature, sub, script, language);
+ }
+ return undefined;
+ };
+
+ function isBrowser() {
+ return typeof window !== 'undefined';
+ }
+
+ function nodeBufferToArrayBuffer(buffer) {
+ var ab = new ArrayBuffer(buffer.length);
+ var view = new Uint8Array(ab);
+ for (var i = 0; i < buffer.length; ++i) {
+ view[i] = buffer[i];
+ }
+
+ return ab;
+ }
+
+ function arrayBufferToNodeBuffer(ab) {
+ var buffer = new Buffer(ab.byteLength);
+ var view = new Uint8Array(ab);
+ for (var i = 0; i < buffer.length; ++i) {
+ buffer[i] = view[i];
+ }
+
+ return buffer;
+ }
+
+ function checkArgument(expression, message) {
+ if (!expression) {
+ throw message;
+ }
+ }
+
+ // The `glyf` table describes the glyphs in TrueType outline format.
+
+ // Parse the coordinate data for a glyph.
+ function parseGlyphCoordinate(
+ p,
+ flag,
+ previousValue,
+ shortVectorBitMask,
+ sameBitMask
+ ) {
+ var v;
+ if ((flag & shortVectorBitMask) > 0) {
+ // The coordinate is 1 byte long.
+ v = p.parseByte();
+ // The `same` bit is re-used for short values to signify the sign of the value.
+ if ((flag & sameBitMask) === 0) {
+ v = -v;
+ }
+
+ v = previousValue + v;
+ } else {
+ // The coordinate is 2 bytes long.
+ // If the `same` bit is set, the coordinate is the same as the previous coordinate.
+ if ((flag & sameBitMask) > 0) {
+ v = previousValue;
+ } else {
+ // Parse the coordinate as a signed 16-bit delta value.
+ v = previousValue + p.parseShort();
+ }
+ }
+
+ return v;
+ }
+
+ // Parse a TrueType glyph.
+ function parseGlyph(glyph, data, start) {
+ var p = new parse.Parser(data, start);
+ glyph.numberOfContours = p.parseShort();
+ glyph._xMin = p.parseShort();
+ glyph._yMin = p.parseShort();
+ glyph._xMax = p.parseShort();
+ glyph._yMax = p.parseShort();
+ var flags;
+ var flag;
+
+ if (glyph.numberOfContours > 0) {
+ // This glyph is not a composite.
+ var endPointIndices = (glyph.endPointIndices = []);
+ for (var i = 0; i < glyph.numberOfContours; i += 1) {
+ endPointIndices.push(p.parseUShort());
+ }
+
+ glyph.instructionLength = p.parseUShort();
+ glyph.instructions = [];
+ for (var i$1 = 0; i$1 < glyph.instructionLength; i$1 += 1) {
+ glyph.instructions.push(p.parseByte());
+ }
+
+ var numberOfCoordinates = endPointIndices[endPointIndices.length - 1] + 1;
+ flags = [];
+ for (var i$2 = 0; i$2 < numberOfCoordinates; i$2 += 1) {
+ flag = p.parseByte();
+ flags.push(flag);
+ // If bit 3 is set, we repeat this flag n times, where n is the next byte.
+ if ((flag & 8) > 0) {
+ var repeatCount = p.parseByte();
+ for (var j = 0; j < repeatCount; j += 1) {
+ flags.push(flag);
+ i$2 += 1;
+ }
+ }
+ }
+
+ check.argument(flags.length === numberOfCoordinates, 'Bad flags.');
+
+ if (endPointIndices.length > 0) {
+ var points = [];
+ var point;
+ // X/Y coordinates are relative to the previous point, except for the first point which is relative to 0,0.
+ if (numberOfCoordinates > 0) {
+ for (var i$3 = 0; i$3 < numberOfCoordinates; i$3 += 1) {
+ flag = flags[i$3];
+ point = {};
+ point.onCurve = !!(flag & 1);
+ point.lastPointOfContour = endPointIndices.indexOf(i$3) >= 0;
+ points.push(point);
+ }
+
+ var px = 0;
+ for (var i$4 = 0; i$4 < numberOfCoordinates; i$4 += 1) {
+ flag = flags[i$4];
+ point = points[i$4];
+ point.x = parseGlyphCoordinate(p, flag, px, 2, 16);
+ px = point.x;
+ }
+
+ var py = 0;
+ for (var i$5 = 0; i$5 < numberOfCoordinates; i$5 += 1) {
+ flag = flags[i$5];
+ point = points[i$5];
+ point.y = parseGlyphCoordinate(p, flag, py, 4, 32);
+ py = point.y;
+ }
+ }
+
+ glyph.points = points;
+ } else {
+ glyph.points = [];
+ }
+ } else if (glyph.numberOfContours === 0) {
+ glyph.points = [];
+ } else {
+ glyph.isComposite = true;
+ glyph.points = [];
+ glyph.components = [];
+ var moreComponents = true;
+ while (moreComponents) {
+ flags = p.parseUShort();
+ var component = {
+ glyphIndex: p.parseUShort(),
+ xScale: 1,
+ scale01: 0,
+ scale10: 0,
+ yScale: 1,
+ dx: 0,
+ dy: 0
+ };
+ if ((flags & 1) > 0) {
+ // The arguments are words
+ if ((flags & 2) > 0) {
+ // values are offset
+ component.dx = p.parseShort();
+ component.dy = p.parseShort();
+ } else {
+ // values are matched points
+ component.matchedPoints = [p.parseUShort(), p.parseUShort()];
+ }
+ } else {
+ // The arguments are bytes
+ if ((flags & 2) > 0) {
+ // values are offset
+ component.dx = p.parseChar();
+ component.dy = p.parseChar();
+ } else {
+ // values are matched points
+ component.matchedPoints = [p.parseByte(), p.parseByte()];
+ }
+ }
+
+ if ((flags & 8) > 0) {
+ // We have a scale
+ component.xScale = component.yScale = p.parseF2Dot14();
+ } else if ((flags & 64) > 0) {
+ // We have an X / Y scale
+ component.xScale = p.parseF2Dot14();
+ component.yScale = p.parseF2Dot14();
+ } else if ((flags & 128) > 0) {
+ // We have a 2x2 transformation
+ component.xScale = p.parseF2Dot14();
+ component.scale01 = p.parseF2Dot14();
+ component.scale10 = p.parseF2Dot14();
+ component.yScale = p.parseF2Dot14();
+ }
+
+ glyph.components.push(component);
+ moreComponents = !!(flags & 32);
+ }
+ if (flags & 0x100) {
+ // We have instructions
+ glyph.instructionLength = p.parseUShort();
+ glyph.instructions = [];
+ for (var i$6 = 0; i$6 < glyph.instructionLength; i$6 += 1) {
+ glyph.instructions.push(p.parseByte());
+ }
+ }
+ }
+ }
+
+ // Transform an array of points and return a new array.
+ function transformPoints(points, transform) {
+ var newPoints = [];
+ for (var i = 0; i < points.length; i += 1) {
+ var pt = points[i];
+ var newPt = {
+ x: transform.xScale * pt.x + transform.scale01 * pt.y + transform.dx,
+ y: transform.scale10 * pt.x + transform.yScale * pt.y + transform.dy,
+ onCurve: pt.onCurve,
+ lastPointOfContour: pt.lastPointOfContour
+ };
+ newPoints.push(newPt);
+ }
+
+ return newPoints;
+ }
+
+ function getContours(points) {
+ var contours = [];
+ var currentContour = [];
+ for (var i = 0; i < points.length; i += 1) {
+ var pt = points[i];
+ currentContour.push(pt);
+ if (pt.lastPointOfContour) {
+ contours.push(currentContour);
+ currentContour = [];
+ }
+ }
+
+ check.argument(
+ currentContour.length === 0,
+ 'There are still points left in the current contour.'
+ );
+ return contours;
+ }
+
+ // Convert the TrueType glyph outline to a Path.
+ function getPath(points) {
+ var p = new Path();
+ if (!points) {
+ return p;
+ }
+
+ var contours = getContours(points);
+
+ for (var contourIndex = 0; contourIndex < contours.length; ++contourIndex) {
+ var contour = contours[contourIndex];
+
+ var prev = null;
+ var curr = contour[contour.length - 1];
+ var next = contour[0];
+
+ if (curr.onCurve) {
+ p.moveTo(curr.x, curr.y);
+ } else {
+ if (next.onCurve) {
+ p.moveTo(next.x, next.y);
+ } else {
+ // If both first and last points are off-curve, start at their middle.
+ var start = {
+ x: (curr.x + next.x) * 0.5,
+ y: (curr.y + next.y) * 0.5
+ };
+ p.moveTo(start.x, start.y);
+ }
+ }
+
+ for (var i = 0; i < contour.length; ++i) {
+ prev = curr;
+ curr = next;
+ next = contour[(i + 1) % contour.length];
+
+ if (curr.onCurve) {
+ // This is a straight line.
+ p.lineTo(curr.x, curr.y);
+ } else {
+ var prev2 = prev;
+ var next2 = next;
+
+ if (!prev.onCurve) {
+ prev2 = { x: (curr.x + prev.x) * 0.5, y: (curr.y + prev.y) * 0.5 };
+ }
+
+ if (!next.onCurve) {
+ next2 = { x: (curr.x + next.x) * 0.5, y: (curr.y + next.y) * 0.5 };
+ }
+
+ p.quadraticCurveTo(curr.x, curr.y, next2.x, next2.y);
+ }
+ }
+
+ p.closePath();
+ }
+ return p;
+ }
+
+ function buildPath(glyphs, glyph) {
+ if (glyph.isComposite) {
+ for (var j = 0; j < glyph.components.length; j += 1) {
+ var component = glyph.components[j];
+ var componentGlyph = glyphs.get(component.glyphIndex);
+ // Force the ttfGlyphLoader to parse the glyph.
+ componentGlyph.getPath();
+ if (componentGlyph.points) {
+ var transformedPoints = void 0;
+ if (component.matchedPoints === undefined) {
+ // component positioned by offset
+ transformedPoints = transformPoints(
+ componentGlyph.points,
+ component
+ );
+ } else {
+ // component positioned by matched points
+ if (
+ component.matchedPoints[0] > glyph.points.length - 1 ||
+ component.matchedPoints[1] > componentGlyph.points.length - 1
+ ) {
+ throw Error('Matched points out of range in ' + glyph.name);
+ }
+ var firstPt = glyph.points[component.matchedPoints[0]];
+ var secondPt = componentGlyph.points[component.matchedPoints[1]];
+ var transform = {
+ xScale: component.xScale,
+ scale01: component.scale01,
+ scale10: component.scale10,
+ yScale: component.yScale,
+ dx: 0,
+ dy: 0
+ };
+ secondPt = transformPoints([secondPt], transform)[0];
+ transform.dx = firstPt.x - secondPt.x;
+ transform.dy = firstPt.y - secondPt.y;
+ transformedPoints = transformPoints(
+ componentGlyph.points,
+ transform
+ );
+ }
+ glyph.points = glyph.points.concat(transformedPoints);
+ }
+ }
+ }
+
+ return getPath(glyph.points);
+ }
+
+ // Parse all the glyphs according to the offsets from the `loca` table.
+ function parseGlyfTable(data, start, loca, font) {
+ var glyphs = new glyphset.GlyphSet(font);
+
+ // The last element of the loca table is invalid.
+ for (var i = 0; i < loca.length - 1; i += 1) {
+ var offset = loca[i];
+ var nextOffset = loca[i + 1];
+ if (offset !== nextOffset) {
+ glyphs.push(
+ i,
+ glyphset.ttfGlyphLoader(
+ font,
+ i,
+ parseGlyph,
+ data,
+ start + offset,
+ buildPath
+ )
+ );
+ } else {
+ glyphs.push(i, glyphset.glyphLoader(font, i));
+ }
+ }
+
+ return glyphs;
+ }
+
+ var glyf = { getPath: getPath, parse: parseGlyfTable };
+
+ /* A TrueType font hinting interpreter.
+ *
+ * (c) 2017 Axel Kittenberger
+ *
+ * This interpreter has been implemented according to this documentation:
+ * https://developer.apple.com/fonts/TrueType-Reference-Manual/RM05/Chap5.html
+ *
+ * According to the documentation F24DOT6 values are used for pixels.
+ * That means calculation is 1/64 pixel accurate and uses integer operations.
+ * However, Javascript has floating point operations by default and only
+ * those are available. One could make a case to simulate the 1/64 accuracy
+ * exactly by truncating after every division operation
+ * (for example with << 0) to get pixel exactly results as other TrueType
+ * implementations. It may make sense since some fonts are pixel optimized
+ * by hand using DELTAP instructions. The current implementation doesn't
+ * and rather uses full floating point precision.
+ *
+ * xScale, yScale and rotation is currently ignored.
+ *
+ * A few non-trivial instructions are missing as I didn't encounter yet
+ * a font that used them to test a possible implementation.
+ *
+ * Some fonts seem to use undocumented features regarding the twilight zone.
+ * Only some of them are implemented as they were encountered.
+ *
+ * The exports.DEBUG statements are removed on the minified distribution file.
+ */
+
+ var instructionTable;
+ var exec;
+ var execGlyph;
+ var execComponent;
+
+ /*
+ * Creates a hinting object.
+ *
+ * There ought to be exactly one
+ * for each truetype font that is used for hinting.
+ */
+ function Hinting(font) {
+ // the font this hinting object is for
+ this.font = font;
+
+ this.getCommands = function(hPoints) {
+ return glyf.getPath(hPoints).commands;
+ };
+
+ // cached states
+ this._fpgmState = this._prepState = undefined;
+
+ // errorState
+ // 0 ... all okay
+ // 1 ... had an error in a glyf,
+ // continue working but stop spamming
+ // the console
+ // 2 ... error at prep, stop hinting at this ppem
+ // 3 ... error at fpeg, stop hinting for this font at all
+ this._errorState = 0;
+ }
+
+ /*
+ * Not rounding.
+ */
+ function roundOff(v) {
+ return v;
+ }
+
+ /*
+ * Rounding to grid.
+ */
+ function roundToGrid(v) {
+ //Rounding in TT is supposed to "symmetrical around zero"
+ return Math.sign(v) * Math.round(Math.abs(v));
+ }
+
+ /*
+ * Rounding to double grid.
+ */
+ function roundToDoubleGrid(v) {
+ return Math.sign(v) * Math.round(Math.abs(v * 2)) / 2;
+ }
+
+ /*
+ * Rounding to half grid.
+ */
+ function roundToHalfGrid(v) {
+ return Math.sign(v) * (Math.round(Math.abs(v) + 0.5) - 0.5);
+ }
+
+ /*
+ * Rounding to up to grid.
+ */
+ function roundUpToGrid(v) {
+ return Math.sign(v) * Math.ceil(Math.abs(v));
+ }
+
+ /*
+ * Rounding to down to grid.
+ */
+ function roundDownToGrid(v) {
+ return Math.sign(v) * Math.floor(Math.abs(v));
+ }
+
+ /*
+ * Super rounding.
+ */
+ var roundSuper = function(v) {
+ var period = this.srPeriod;
+ var phase = this.srPhase;
+ var threshold = this.srThreshold;
+ var sign = 1;
+
+ if (v < 0) {
+ v = -v;
+ sign = -1;
+ }
+
+ v += threshold - phase;
+
+ v = Math.trunc(v / period) * period;
+
+ v += phase;
+
+ // according to http://xgridfit.sourceforge.net/round.html
+ if (v < 0) {
+ return phase * sign;
+ }
+
+ return v * sign;
+ };
+
+ /*
+ * Unit vector of x-axis.
+ */
+ var xUnitVector = {
+ x: 1,
+
+ y: 0,
+
+ axis: 'x',
+
+ // Gets the projected distance between two points.
+ // o1/o2 ... if true, respective original position is used.
+ distance: function(p1, p2, o1, o2) {
+ return (o1 ? p1.xo : p1.x) - (o2 ? p2.xo : p2.x);
+ },
+
+ // Moves point p so the moved position has the same relative
+ // position to the moved positions of rp1 and rp2 than the
+ // original positions had.
+ //
+ // See APPENDIX on INTERPOLATE at the bottom of this file.
+ interpolate: function(p, rp1, rp2, pv) {
+ var do1;
+ var do2;
+ var doa1;
+ var doa2;
+ var dm1;
+ var dm2;
+ var dt;
+
+ if (!pv || pv === this) {
+ do1 = p.xo - rp1.xo;
+ do2 = p.xo - rp2.xo;
+ dm1 = rp1.x - rp1.xo;
+ dm2 = rp2.x - rp2.xo;
+ doa1 = Math.abs(do1);
+ doa2 = Math.abs(do2);
+ dt = doa1 + doa2;
+
+ if (dt === 0) {
+ p.x = p.xo + (dm1 + dm2) / 2;
+ return;
+ }
+
+ p.x = p.xo + (dm1 * doa2 + dm2 * doa1) / dt;
+ return;
+ }
+
+ do1 = pv.distance(p, rp1, true, true);
+ do2 = pv.distance(p, rp2, true, true);
+ dm1 = pv.distance(rp1, rp1, false, true);
+ dm2 = pv.distance(rp2, rp2, false, true);
+ doa1 = Math.abs(do1);
+ doa2 = Math.abs(do2);
+ dt = doa1 + doa2;
+
+ if (dt === 0) {
+ xUnitVector.setRelative(p, p, (dm1 + dm2) / 2, pv, true);
+ return;
+ }
+
+ xUnitVector.setRelative(p, p, (dm1 * doa2 + dm2 * doa1) / dt, pv, true);
+ },
+
+ // Slope of line normal to this
+ normalSlope: Number.NEGATIVE_INFINITY,
+
+ // Sets the point 'p' relative to point 'rp'
+ // by the distance 'd'.
+ //
+ // See APPENDIX on SETRELATIVE at the bottom of this file.
+ //
+ // p ... point to set
+ // rp ... reference point
+ // d ... distance on projection vector
+ // pv ... projection vector (undefined = this)
+ // org ... if true, uses the original position of rp as reference.
+ setRelative: function(p, rp, d, pv, org) {
+ if (!pv || pv === this) {
+ p.x = (org ? rp.xo : rp.x) + d;
+ return;
+ }
+
+ var rpx = org ? rp.xo : rp.x;
+ var rpy = org ? rp.yo : rp.y;
+ var rpdx = rpx + d * pv.x;
+ var rpdy = rpy + d * pv.y;
+
+ p.x = rpdx + (p.y - rpdy) / pv.normalSlope;
+ },
+
+ // Slope of vector line.
+ slope: 0,
+
+ // Touches the point p.
+ touch: function(p) {
+ p.xTouched = true;
+ },
+
+ // Tests if a point p is touched.
+ touched: function(p) {
+ return p.xTouched;
+ },
+
+ // Untouches the point p.
+ untouch: function(p) {
+ p.xTouched = false;
+ }
+ };
+
+ /*
+ * Unit vector of y-axis.
+ */
+ var yUnitVector = {
+ x: 0,
+
+ y: 1,
+
+ axis: 'y',
+
+ // Gets the projected distance between two points.
+ // o1/o2 ... if true, respective original position is used.
+ distance: function(p1, p2, o1, o2) {
+ return (o1 ? p1.yo : p1.y) - (o2 ? p2.yo : p2.y);
+ },
+
+ // Moves point p so the moved position has the same relative
+ // position to the moved positions of rp1 and rp2 than the
+ // original positions had.
+ //
+ // See APPENDIX on INTERPOLATE at the bottom of this file.
+ interpolate: function(p, rp1, rp2, pv) {
+ var do1;
+ var do2;
+ var doa1;
+ var doa2;
+ var dm1;
+ var dm2;
+ var dt;
+
+ if (!pv || pv === this) {
+ do1 = p.yo - rp1.yo;
+ do2 = p.yo - rp2.yo;
+ dm1 = rp1.y - rp1.yo;
+ dm2 = rp2.y - rp2.yo;
+ doa1 = Math.abs(do1);
+ doa2 = Math.abs(do2);
+ dt = doa1 + doa2;
+
+ if (dt === 0) {
+ p.y = p.yo + (dm1 + dm2) / 2;
+ return;
+ }
+
+ p.y = p.yo + (dm1 * doa2 + dm2 * doa1) / dt;
+ return;
+ }
+
+ do1 = pv.distance(p, rp1, true, true);
+ do2 = pv.distance(p, rp2, true, true);
+ dm1 = pv.distance(rp1, rp1, false, true);
+ dm2 = pv.distance(rp2, rp2, false, true);
+ doa1 = Math.abs(do1);
+ doa2 = Math.abs(do2);
+ dt = doa1 + doa2;
+
+ if (dt === 0) {
+ yUnitVector.setRelative(p, p, (dm1 + dm2) / 2, pv, true);
+ return;
+ }
+
+ yUnitVector.setRelative(p, p, (dm1 * doa2 + dm2 * doa1) / dt, pv, true);
+ },
+
+ // Slope of line normal to this.
+ normalSlope: 0,
+
+ // Sets the point 'p' relative to point 'rp'
+ // by the distance 'd'
+ //
+ // See APPENDIX on SETRELATIVE at the bottom of this file.
+ //
+ // p ... point to set
+ // rp ... reference point
+ // d ... distance on projection vector
+ // pv ... projection vector (undefined = this)
+ // org ... if true, uses the original position of rp as reference.
+ setRelative: function(p, rp, d, pv, org) {
+ if (!pv || pv === this) {
+ p.y = (org ? rp.yo : rp.y) + d;
+ return;
+ }
+
+ var rpx = org ? rp.xo : rp.x;
+ var rpy = org ? rp.yo : rp.y;
+ var rpdx = rpx + d * pv.x;
+ var rpdy = rpy + d * pv.y;
+
+ p.y = rpdy + pv.normalSlope * (p.x - rpdx);
+ },
+
+ // Slope of vector line.
+ slope: Number.POSITIVE_INFINITY,
+
+ // Touches the point p.
+ touch: function(p) {
+ p.yTouched = true;
+ },
+
+ // Tests if a point p is touched.
+ touched: function(p) {
+ return p.yTouched;
+ },
+
+ // Untouches the point p.
+ untouch: function(p) {
+ p.yTouched = false;
+ }
+ };
+
+ Object.freeze(xUnitVector);
+ Object.freeze(yUnitVector);
+
+ /*
+ * Creates a unit vector that is not x- or y-axis.
+ */
+ function UnitVector(x, y) {
+ this.x = x;
+ this.y = y;
+ this.axis = undefined;
+ this.slope = y / x;
+ this.normalSlope = -x / y;
+ Object.freeze(this);
+ }
+
+ /*
+ * Gets the projected distance between two points.
+ * o1/o2 ... if true, respective original position is used.
+ */
+ UnitVector.prototype.distance = function(p1, p2, o1, o2) {
+ return (
+ this.x * xUnitVector.distance(p1, p2, o1, o2) +
+ this.y * yUnitVector.distance(p1, p2, o1, o2)
+ );
+ };
+
+ /*
+ * Moves point p so the moved position has the same relative
+ * position to the moved positions of rp1 and rp2 than the
+ * original positions had.
+ *
+ * See APPENDIX on INTERPOLATE at the bottom of this file.
+ */
+ UnitVector.prototype.interpolate = function(p, rp1, rp2, pv) {
+ var dm1;
+ var dm2;
+ var do1;
+ var do2;
+ var doa1;
+ var doa2;
+ var dt;
+
+ do1 = pv.distance(p, rp1, true, true);
+ do2 = pv.distance(p, rp2, true, true);
+ dm1 = pv.distance(rp1, rp1, false, true);
+ dm2 = pv.distance(rp2, rp2, false, true);
+ doa1 = Math.abs(do1);
+ doa2 = Math.abs(do2);
+ dt = doa1 + doa2;
+
+ if (dt === 0) {
+ this.setRelative(p, p, (dm1 + dm2) / 2, pv, true);
+ return;
+ }
+
+ this.setRelative(p, p, (dm1 * doa2 + dm2 * doa1) / dt, pv, true);
+ };
+
+ /*
+ * Sets the point 'p' relative to point 'rp'
+ * by the distance 'd'
+ *
+ * See APPENDIX on SETRELATIVE at the bottom of this file.
+ *
+ * p ... point to set
+ * rp ... reference point
+ * d ... distance on projection vector
+ * pv ... projection vector (undefined = this)
+ * org ... if true, uses the original position of rp as reference.
+ */
+ UnitVector.prototype.setRelative = function(p, rp, d, pv, org) {
+ pv = pv || this;
+
+ var rpx = org ? rp.xo : rp.x;
+ var rpy = org ? rp.yo : rp.y;
+ var rpdx = rpx + d * pv.x;
+ var rpdy = rpy + d * pv.y;
+
+ var pvns = pv.normalSlope;
+ var fvs = this.slope;
+
+ var px = p.x;
+ var py = p.y;
+
+ p.x = (fvs * px - pvns * rpdx + rpdy - py) / (fvs - pvns);
+ p.y = fvs * (p.x - px) + py;
+ };
+
+ /*
+ * Touches the point p.
+ */
+ UnitVector.prototype.touch = function(p) {
+ p.xTouched = true;
+ p.yTouched = true;
+ };
+
+ /*
+ * Returns a unit vector with x/y coordinates.
+ */
+ function getUnitVector(x, y) {
+ var d = Math.sqrt(x * x + y * y);
+
+ x /= d;
+ y /= d;
+
+ if (x === 1 && y === 0) {
+ return xUnitVector;
+ } else if (x === 0 && y === 1) {
+ return yUnitVector;
+ } else {
+ return new UnitVector(x, y);
+ }
+ }
+
+ /*
+ * Creates a point in the hinting engine.
+ */
+ function HPoint(x, y, lastPointOfContour, onCurve) {
+ this.x = this.xo = Math.round(x * 64) / 64; // hinted x value and original x-value
+ this.y = this.yo = Math.round(y * 64) / 64; // hinted y value and original y-value
+
+ this.lastPointOfContour = lastPointOfContour;
+ this.onCurve = onCurve;
+ this.prevPointOnContour = undefined;
+ this.nextPointOnContour = undefined;
+ this.xTouched = false;
+ this.yTouched = false;
+
+ Object.preventExtensions(this);
+ }
+
+ /*
+ * Returns the next touched point on the contour.
+ *
+ * v ... unit vector to test touch axis.
+ */
+ HPoint.prototype.nextTouched = function(v) {
+ var p = this.nextPointOnContour;
+
+ while (!v.touched(p) && p !== this) {
+ p = p.nextPointOnContour;
+ }
+
+ return p;
+ };
+
+ /*
+ * Returns the previous touched point on the contour
+ *
+ * v ... unit vector to test touch axis.
+ */
+ HPoint.prototype.prevTouched = function(v) {
+ var p = this.prevPointOnContour;
+
+ while (!v.touched(p) && p !== this) {
+ p = p.prevPointOnContour;
+ }
+
+ return p;
+ };
+
+ /*
+ * The zero point.
+ */
+ var HPZero = Object.freeze(new HPoint(0, 0));
+
+ /*
+ * The default state of the interpreter.
+ *
+ * Note: Freezing the defaultState and then deriving from it
+ * makes the V8 Javascript engine going awkward,
+ * so this is avoided, albeit the defaultState shouldn't
+ * ever change.
+ */
+ var defaultState = {
+ cvCutIn: 17 / 16, // control value cut in
+ deltaBase: 9,
+ deltaShift: 0.125,
+ loop: 1, // loops some instructions
+ minDis: 1, // minimum distance
+ autoFlip: true
+ };
+
+ /*
+ * The current state of the interpreter.
+ *
+ * env ... 'fpgm' or 'prep' or 'glyf'
+ * prog ... the program
+ */
+ function State(env, prog) {
+ this.env = env;
+ this.stack = [];
+ this.prog = prog;
+
+ switch (env) {
+ case 'glyf':
+ this.zp0 = this.zp1 = this.zp2 = 1;
+ this.rp0 = this.rp1 = this.rp2 = 0;
+ /* fall through */
+ case 'prep':
+ this.fv = this.pv = this.dpv = xUnitVector;
+ this.round = roundToGrid;
+ }
+ }
+
+ /*
+ * Executes a glyph program.
+ *
+ * This does the hinting for each glyph.
+ *
+ * Returns an array of moved points.
+ *
+ * glyph: the glyph to hint
+ * ppem: the size the glyph is rendered for
+ */
+ Hinting.prototype.exec = function(glyph, ppem) {
+ if (typeof ppem !== 'number') {
+ throw new Error('Point size is not a number!');
+ }
+
+ // Received a fatal error, don't do any hinting anymore.
+ if (this._errorState > 2) {
+ return;
+ }
+
+ var font = this.font;
+ var prepState = this._prepState;
+
+ if (!prepState || prepState.ppem !== ppem) {
+ var fpgmState = this._fpgmState;
+
+ if (!fpgmState) {
+ // Executes the fpgm state.
+ // This is used by fonts to define functions.
+ State.prototype = defaultState;
+
+ fpgmState = this._fpgmState = new State('fpgm', font.tables.fpgm);
+
+ fpgmState.funcs = [];
+ fpgmState.font = font;
+
+ if (exports.DEBUG) {
+ console.log('---EXEC FPGM---');
+ fpgmState.step = -1;
+ }
+
+ try {
+ exec(fpgmState);
+ } catch (e) {
+ console.log('Hinting error in FPGM:' + e);
+ this._errorState = 3;
+ return;
+ }
+ }
+
+ // Executes the prep program for this ppem setting.
+ // This is used by fonts to set cvt values
+ // depending on to be rendered font size.
+
+ State.prototype = fpgmState;
+ prepState = this._prepState = new State('prep', font.tables.prep);
+
+ prepState.ppem = ppem;
+
+ // Creates a copy of the cvt table
+ // and scales it to the current ppem setting.
+ var oCvt = font.tables.cvt;
+ if (oCvt) {
+ var cvt = (prepState.cvt = new Array(oCvt.length));
+ var scale = ppem / font.unitsPerEm;
+ for (var c = 0; c < oCvt.length; c++) {
+ cvt[c] = oCvt[c] * scale;
+ }
+ } else {
+ prepState.cvt = [];
+ }
+
+ if (exports.DEBUG) {
+ console.log('---EXEC PREP---');
+ prepState.step = -1;
+ }
+
+ try {
+ exec(prepState);
+ } catch (e) {
+ if (this._errorState < 2) {
+ console.log('Hinting error in PREP:' + e);
+ }
+ this._errorState = 2;
+ }
+ }
+
+ if (this._errorState > 1) {
+ return;
+ }
+
+ try {
+ return execGlyph(glyph, prepState);
+ } catch (e) {
+ if (this._errorState < 1) {
+ console.log('Hinting error:' + e);
+ console.log('Note: further hinting errors are silenced');
+ }
+ this._errorState = 1;
+ return undefined;
+ }
+ };
+
+ /*
+ * Executes the hinting program for a glyph.
+ */
+ execGlyph = function(glyph, prepState) {
+ // original point positions
+ var xScale = prepState.ppem / prepState.font.unitsPerEm;
+ var yScale = xScale;
+ var components = glyph.components;
+ var contours;
+ var gZone;
+ var state;
+
+ State.prototype = prepState;
+ if (!components) {
+ state = new State('glyf', glyph.instructions);
+ if (exports.DEBUG) {
+ console.log('---EXEC GLYPH---');
+ state.step = -1;
+ }
+ execComponent(glyph, state, xScale, yScale);
+ gZone = state.gZone;
+ } else {
+ var font = prepState.font;
+ gZone = [];
+ contours = [];
+ for (var i = 0; i < components.length; i++) {
+ var c = components[i];
+ var cg = font.glyphs.get(c.glyphIndex);
+
+ state = new State('glyf', cg.instructions);
+
+ if (exports.DEBUG) {
+ console.log('---EXEC COMP ' + i + '---');
+ state.step = -1;
+ }
+
+ execComponent(cg, state, xScale, yScale);
+ // appends the computed points to the result array
+ // post processes the component points
+ var dx = Math.round(c.dx * xScale);
+ var dy = Math.round(c.dy * yScale);
+ var gz = state.gZone;
+ var cc = state.contours;
+ for (var pi = 0; pi < gz.length; pi++) {
+ var p = gz[pi];
+ p.xTouched = p.yTouched = false;
+ p.xo = p.x = p.x + dx;
+ p.yo = p.y = p.y + dy;
+ }
+
+ var gLen = gZone.length;
+ gZone.push.apply(gZone, gz);
+ for (var j = 0; j < cc.length; j++) {
+ contours.push(cc[j] + gLen);
+ }
+ }
+
+ if (glyph.instructions && !state.inhibitGridFit) {
+ // the composite has instructions on its own
+ state = new State('glyf', glyph.instructions);
+
+ state.gZone = state.z0 = state.z1 = state.z2 = gZone;
+
+ state.contours = contours;
+
+ // note: HPZero cannot be used here, since
+ // the point might be modified
+ gZone.push(
+ new HPoint(0, 0),
+ new HPoint(Math.round(glyph.advanceWidth * xScale), 0)
+ );
+
+ if (exports.DEBUG) {
+ console.log('---EXEC COMPOSITE---');
+ state.step = -1;
+ }
+
+ exec(state);
+
+ gZone.length -= 2;
+ }
+ }
+
+ return gZone;
+ };
+
+ /*
+ * Executes the hinting program for a component of a multi-component glyph
+ * or of the glyph itself for a non-component glyph.
+ */
+ execComponent = function(glyph, state, xScale, yScale) {
+ var points = glyph.points || [];
+ var pLen = points.length;
+ var gZone = (state.gZone = state.z0 = state.z1 = state.z2 = []);
+ var contours = (state.contours = []);
+
+ // Scales the original points and
+ // makes copies for the hinted points.
+ var cp; // current point
+ for (var i = 0; i < pLen; i++) {
+ cp = points[i];
+
+ gZone[i] = new HPoint(
+ cp.x * xScale,
+ cp.y * yScale,
+ cp.lastPointOfContour,
+ cp.onCurve
+ );
+ }
+
+ // Chain links the contours.
+ var sp; // start point
+ var np; // next point
+
+ for (var i$1 = 0; i$1 < pLen; i$1++) {
+ cp = gZone[i$1];
+
+ if (!sp) {
+ sp = cp;
+ contours.push(i$1);
+ }
+
+ if (cp.lastPointOfContour) {
+ cp.nextPointOnContour = sp;
+ sp.prevPointOnContour = cp;
+ sp = undefined;
+ } else {
+ np = gZone[i$1 + 1];
+ cp.nextPointOnContour = np;
+ np.prevPointOnContour = cp;
+ }
+ }
+
+ if (state.inhibitGridFit) {
+ return;
+ }
+
+ if (exports.DEBUG) {
+ console.log('PROCESSING GLYPH', state.stack);
+ for (var i$2 = 0; i$2 < pLen; i$2++) {
+ console.log(i$2, gZone[i$2].x, gZone[i$2].y);
+ }
+ }
+
+ gZone.push(
+ new HPoint(0, 0),
+ new HPoint(Math.round(glyph.advanceWidth * xScale), 0)
+ );
+
+ exec(state);
+
+ // Removes the extra points.
+ gZone.length -= 2;
+
+ if (exports.DEBUG) {
+ console.log('FINISHED GLYPH', state.stack);
+ for (var i$3 = 0; i$3 < pLen; i$3++) {
+ console.log(i$3, gZone[i$3].x, gZone[i$3].y);
+ }
+ }
+ };
+
+ /*
+ * Executes the program loaded in state.
+ */
+ exec = function(state) {
+ var prog = state.prog;
+
+ if (!prog) {
+ return;
+ }
+
+ var pLen = prog.length;
+ var ins;
+
+ for (state.ip = 0; state.ip < pLen; state.ip++) {
+ if (exports.DEBUG) {
+ state.step++;
+ }
+ ins = instructionTable[prog[state.ip]];
+
+ if (!ins) {
+ throw new Error(
+ 'unknown instruction: 0x' + Number(prog[state.ip]).toString(16)
+ );
+ }
+
+ ins(state);
+
+ // very extensive debugging for each step
+ /*
+ if (exports.DEBUG) {
+ var da;
+ if (state.gZone) {
+ da = [];
+ for (let i = 0; i < state.gZone.length; i++)
+ {
+ da.push(i + ' ' +
+ state.gZone[i].x * 64 + ' ' +
+ state.gZone[i].y * 64 + ' ' +
+ (state.gZone[i].xTouched ? 'x' : '') +
+ (state.gZone[i].yTouched ? 'y' : '')
+ );
+ }
+ console.log('GZ', da);
+ }
+
+ if (state.tZone) {
+ da = [];
+ for (let i = 0; i < state.tZone.length; i++) {
+ da.push(i + ' ' +
+ state.tZone[i].x * 64 + ' ' +
+ state.tZone[i].y * 64 + ' ' +
+ (state.tZone[i].xTouched ? 'x' : '') +
+ (state.tZone[i].yTouched ? 'y' : '')
+ );
+ }
+ console.log('TZ', da);
+ }
+
+ if (state.stack.length > 10) {
+ console.log(
+ state.stack.length,
+ '...', state.stack.slice(state.stack.length - 10)
+ );
+ } else {
+ console.log(state.stack.length, state.stack);
+ }
+ }
+ */
+ }
+ };
+
+ /*
+ * Initializes the twilight zone.
+ *
+ * This is only done if a SZPx instruction
+ * refers to the twilight zone.
+ */
+ function initTZone(state) {
+ var tZone = (state.tZone = new Array(state.gZone.length));
+
+ // no idea if this is actually correct...
+ for (var i = 0; i < tZone.length; i++) {
+ tZone[i] = new HPoint(0, 0);
+ }
+ }
+
+ /*
+ * Skips the instruction pointer ahead over an IF/ELSE block.
+ * handleElse .. if true breaks on matching ELSE
+ */
+ function skip(state, handleElse) {
+ var prog = state.prog;
+ var ip = state.ip;
+ var nesting = 1;
+ var ins;
+
+ do {
+ ins = prog[++ip];
+ if (ins === 0x58) {
+ // IF
+ nesting++;
+ } else if (ins === 0x59) {
+ // EIF
+ nesting--;
+ } else if (ins === 0x40) {
+ // NPUSHB
+ ip += prog[ip + 1] + 1;
+ } else if (ins === 0x41) {
+ // NPUSHW
+ ip += 2 * prog[ip + 1] + 1;
+ } else if (ins >= 0xb0 && ins <= 0xb7) {
+ // PUSHB
+ ip += ins - 0xb0 + 1;
+ } else if (ins >= 0xb8 && ins <= 0xbf) {
+ // PUSHW
+ ip += (ins - 0xb8 + 1) * 2;
+ } else if (handleElse && nesting === 1 && ins === 0x1b) {
+ // ELSE
+ break;
+ }
+ } while (nesting > 0);
+
+ state.ip = ip;
+ }
+
+ /*----------------------------------------------------------*
+ * And then a lot of instructions... *
+ *----------------------------------------------------------*/
+
+ // SVTCA[a] Set freedom and projection Vectors To Coordinate Axis
+ // 0x00-0x01
+ function SVTCA(v, state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'SVTCA[' + v.axis + ']');
+ }
+
+ state.fv = state.pv = state.dpv = v;
+ }
+
+ // SPVTCA[a] Set Projection Vector to Coordinate Axis
+ // 0x02-0x03
+ function SPVTCA(v, state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'SPVTCA[' + v.axis + ']');
+ }
+
+ state.pv = state.dpv = v;
+ }
+
+ // SFVTCA[a] Set Freedom Vector to Coordinate Axis
+ // 0x04-0x05
+ function SFVTCA(v, state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'SFVTCA[' + v.axis + ']');
+ }
+
+ state.fv = v;
+ }
+
+ // SPVTL[a] Set Projection Vector To Line
+ // 0x06-0x07
+ function SPVTL(a, state) {
+ var stack = state.stack;
+ var p2i = stack.pop();
+ var p1i = stack.pop();
+ var p2 = state.z2[p2i];
+ var p1 = state.z1[p1i];
+
+ if (exports.DEBUG) {
+ console.log('SPVTL[' + a + ']', p2i, p1i);
+ }
+
+ var dx;
+ var dy;
+
+ if (!a) {
+ dx = p1.x - p2.x;
+ dy = p1.y - p2.y;
+ } else {
+ dx = p2.y - p1.y;
+ dy = p1.x - p2.x;
+ }
+
+ state.pv = state.dpv = getUnitVector(dx, dy);
+ }
+
+ // SFVTL[a] Set Freedom Vector To Line
+ // 0x08-0x09
+ function SFVTL(a, state) {
+ var stack = state.stack;
+ var p2i = stack.pop();
+ var p1i = stack.pop();
+ var p2 = state.z2[p2i];
+ var p1 = state.z1[p1i];
+
+ if (exports.DEBUG) {
+ console.log('SFVTL[' + a + ']', p2i, p1i);
+ }
+
+ var dx;
+ var dy;
+
+ if (!a) {
+ dx = p1.x - p2.x;
+ dy = p1.y - p2.y;
+ } else {
+ dx = p2.y - p1.y;
+ dy = p1.x - p2.x;
+ }
+
+ state.fv = getUnitVector(dx, dy);
+ }
+
+ // SPVFS[] Set Projection Vector From Stack
+ // 0x0A
+ function SPVFS(state) {
+ var stack = state.stack;
+ var y = stack.pop();
+ var x = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SPVFS[]', y, x);
+ }
+
+ state.pv = state.dpv = getUnitVector(x, y);
+ }
+
+ // SFVFS[] Set Freedom Vector From Stack
+ // 0x0B
+ function SFVFS(state) {
+ var stack = state.stack;
+ var y = stack.pop();
+ var x = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SPVFS[]', y, x);
+ }
+
+ state.fv = getUnitVector(x, y);
+ }
+
+ // GPV[] Get Projection Vector
+ // 0x0C
+ function GPV(state) {
+ var stack = state.stack;
+ var pv = state.pv;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'GPV[]');
+ }
+
+ stack.push(pv.x * 0x4000);
+ stack.push(pv.y * 0x4000);
+ }
+
+ // GFV[] Get Freedom Vector
+ // 0x0C
+ function GFV(state) {
+ var stack = state.stack;
+ var fv = state.fv;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'GFV[]');
+ }
+
+ stack.push(fv.x * 0x4000);
+ stack.push(fv.y * 0x4000);
+ }
+
+ // SFVTPV[] Set Freedom Vector To Projection Vector
+ // 0x0E
+ function SFVTPV(state) {
+ state.fv = state.pv;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SFVTPV[]');
+ }
+ }
+
+ // ISECT[] moves point p to the InterSECTion of two lines
+ // 0x0F
+ function ISECT(state) {
+ var stack = state.stack;
+ var pa0i = stack.pop();
+ var pa1i = stack.pop();
+ var pb0i = stack.pop();
+ var pb1i = stack.pop();
+ var pi = stack.pop();
+ var z0 = state.z0;
+ var z1 = state.z1;
+ var pa0 = z0[pa0i];
+ var pa1 = z0[pa1i];
+ var pb0 = z1[pb0i];
+ var pb1 = z1[pb1i];
+ var p = state.z2[pi];
+
+ if (exports.DEBUG) {
+ console.log('ISECT[], ', pa0i, pa1i, pb0i, pb1i, pi);
+ }
+
+ // math from
+ // en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line
+
+ var x1 = pa0.x;
+ var y1 = pa0.y;
+ var x2 = pa1.x;
+ var y2 = pa1.y;
+ var x3 = pb0.x;
+ var y3 = pb0.y;
+ var x4 = pb1.x;
+ var y4 = pb1.y;
+
+ var div = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+ var f1 = x1 * y2 - y1 * x2;
+ var f2 = x3 * y4 - y3 * x4;
+
+ p.x = (f1 * (x3 - x4) - f2 * (x1 - x2)) / div;
+ p.y = (f1 * (y3 - y4) - f2 * (y1 - y2)) / div;
+ }
+
+ // SRP0[] Set Reference Point 0
+ // 0x10
+ function SRP0(state) {
+ state.rp0 = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SRP0[]', state.rp0);
+ }
+ }
+
+ // SRP1[] Set Reference Point 1
+ // 0x11
+ function SRP1(state) {
+ state.rp1 = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SRP1[]', state.rp1);
+ }
+ }
+
+ // SRP1[] Set Reference Point 2
+ // 0x12
+ function SRP2(state) {
+ state.rp2 = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SRP2[]', state.rp2);
+ }
+ }
+
+ // SZP0[] Set Zone Pointer 0
+ // 0x13
+ function SZP0(state) {
+ var n = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SZP0[]', n);
+ }
+
+ state.zp0 = n;
+
+ switch (n) {
+ case 0:
+ if (!state.tZone) {
+ initTZone(state);
+ }
+ state.z0 = state.tZone;
+ break;
+ case 1:
+ state.z0 = state.gZone;
+ break;
+ default:
+ throw new Error('Invalid zone pointer');
+ }
+ }
+
+ // SZP1[] Set Zone Pointer 1
+ // 0x14
+ function SZP1(state) {
+ var n = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SZP1[]', n);
+ }
+
+ state.zp1 = n;
+
+ switch (n) {
+ case 0:
+ if (!state.tZone) {
+ initTZone(state);
+ }
+ state.z1 = state.tZone;
+ break;
+ case 1:
+ state.z1 = state.gZone;
+ break;
+ default:
+ throw new Error('Invalid zone pointer');
+ }
+ }
+
+ // SZP2[] Set Zone Pointer 2
+ // 0x15
+ function SZP2(state) {
+ var n = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SZP2[]', n);
+ }
+
+ state.zp2 = n;
+
+ switch (n) {
+ case 0:
+ if (!state.tZone) {
+ initTZone(state);
+ }
+ state.z2 = state.tZone;
+ break;
+ case 1:
+ state.z2 = state.gZone;
+ break;
+ default:
+ throw new Error('Invalid zone pointer');
+ }
+ }
+
+ // SZPS[] Set Zone PointerS
+ // 0x16
+ function SZPS(state) {
+ var n = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SZPS[]', n);
+ }
+
+ state.zp0 = state.zp1 = state.zp2 = n;
+
+ switch (n) {
+ case 0:
+ if (!state.tZone) {
+ initTZone(state);
+ }
+ state.z0 = state.z1 = state.z2 = state.tZone;
+ break;
+ case 1:
+ state.z0 = state.z1 = state.z2 = state.gZone;
+ break;
+ default:
+ throw new Error('Invalid zone pointer');
+ }
+ }
+
+ // SLOOP[] Set LOOP variable
+ // 0x17
+ function SLOOP(state) {
+ state.loop = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SLOOP[]', state.loop);
+ }
+ }
+
+ // RTG[] Round To Grid
+ // 0x18
+ function RTG(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'RTG[]');
+ }
+
+ state.round = roundToGrid;
+ }
+
+ // RTHG[] Round To Half Grid
+ // 0x19
+ function RTHG(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'RTHG[]');
+ }
+
+ state.round = roundToHalfGrid;
+ }
+
+ // SMD[] Set Minimum Distance
+ // 0x1A
+ function SMD(state) {
+ var d = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SMD[]', d);
+ }
+
+ state.minDis = d / 0x40;
+ }
+
+ // ELSE[] ELSE clause
+ // 0x1B
+ function ELSE(state) {
+ // This instruction has been reached by executing a then branch
+ // so it just skips ahead until matching EIF.
+ //
+ // In case the IF was negative the IF[] instruction already
+ // skipped forward over the ELSE[]
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'ELSE[]');
+ }
+
+ skip(state, false);
+ }
+
+ // JMPR[] JuMP Relative
+ // 0x1C
+ function JMPR(state) {
+ var o = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'JMPR[]', o);
+ }
+
+ // A jump by 1 would do nothing.
+ state.ip += o - 1;
+ }
+
+ // SCVTCI[] Set Control Value Table Cut-In
+ // 0x1D
+ function SCVTCI(state) {
+ var n = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SCVTCI[]', n);
+ }
+
+ state.cvCutIn = n / 0x40;
+ }
+
+ // DUP[] DUPlicate top stack element
+ // 0x20
+ function DUP(state) {
+ var stack = state.stack;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'DUP[]');
+ }
+
+ stack.push(stack[stack.length - 1]);
+ }
+
+ // POP[] POP top stack element
+ // 0x21
+ function POP(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'POP[]');
+ }
+
+ state.stack.pop();
+ }
+
+ // CLEAR[] CLEAR the stack
+ // 0x22
+ function CLEAR(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'CLEAR[]');
+ }
+
+ state.stack.length = 0;
+ }
+
+ // SWAP[] SWAP the top two elements on the stack
+ // 0x23
+ function SWAP(state) {
+ var stack = state.stack;
+
+ var a = stack.pop();
+ var b = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SWAP[]');
+ }
+
+ stack.push(a);
+ stack.push(b);
+ }
+
+ // DEPTH[] DEPTH of the stack
+ // 0x24
+ function DEPTH(state) {
+ var stack = state.stack;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'DEPTH[]');
+ }
+
+ stack.push(stack.length);
+ }
+
+ // LOOPCALL[] LOOPCALL function
+ // 0x2A
+ function LOOPCALL(state) {
+ var stack = state.stack;
+ var fn = stack.pop();
+ var c = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'LOOPCALL[]', fn, c);
+ }
+
+ // saves callers program
+ var cip = state.ip;
+ var cprog = state.prog;
+
+ state.prog = state.funcs[fn];
+
+ // executes the function
+ for (var i = 0; i < c; i++) {
+ exec(state);
+
+ if (exports.DEBUG) {
+ console.log(
+ ++state.step,
+ i + 1 < c ? 'next loopcall' : 'done loopcall',
+ i
+ );
+ }
+ }
+
+ // restores the callers program
+ state.ip = cip;
+ state.prog = cprog;
+ }
+
+ // CALL[] CALL function
+ // 0x2B
+ function CALL(state) {
+ var fn = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'CALL[]', fn);
+ }
+
+ // saves callers program
+ var cip = state.ip;
+ var cprog = state.prog;
+
+ state.prog = state.funcs[fn];
+
+ // executes the function
+ exec(state);
+
+ // restores the callers program
+ state.ip = cip;
+ state.prog = cprog;
+
+ if (exports.DEBUG) {
+ console.log(++state.step, 'returning from', fn);
+ }
+ }
+
+ // CINDEX[] Copy the INDEXed element to the top of the stack
+ // 0x25
+ function CINDEX(state) {
+ var stack = state.stack;
+ var k = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'CINDEX[]', k);
+ }
+
+ // In case of k == 1, it copies the last element after popping
+ // thus stack.length - k.
+ stack.push(stack[stack.length - k]);
+ }
+
+ // MINDEX[] Move the INDEXed element to the top of the stack
+ // 0x26
+ function MINDEX(state) {
+ var stack = state.stack;
+ var k = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'MINDEX[]', k);
+ }
+
+ stack.push(stack.splice(stack.length - k, 1)[0]);
+ }
+
+ // FDEF[] Function DEFinition
+ // 0x2C
+ function FDEF(state) {
+ if (state.env !== 'fpgm') {
+ throw new Error('FDEF not allowed here');
+ }
+ var stack = state.stack;
+ var prog = state.prog;
+ var ip = state.ip;
+
+ var fn = stack.pop();
+ var ipBegin = ip;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'FDEF[]', fn);
+ }
+
+ while (prog[++ip] !== 0x2d) {}
+
+ state.ip = ip;
+ state.funcs[fn] = prog.slice(ipBegin + 1, ip);
+ }
+
+ // MDAP[a] Move Direct Absolute Point
+ // 0x2E-0x2F
+ function MDAP(round, state) {
+ var pi = state.stack.pop();
+ var p = state.z0[pi];
+ var fv = state.fv;
+ var pv = state.pv;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'MDAP[' + round + ']', pi);
+ }
+
+ var d = pv.distance(p, HPZero);
+
+ if (round) {
+ d = state.round(d);
+ }
+
+ fv.setRelative(p, HPZero, d, pv);
+ fv.touch(p);
+
+ state.rp0 = state.rp1 = pi;
+ }
+
+ // IUP[a] Interpolate Untouched Points through the outline
+ // 0x30
+ function IUP(v, state) {
+ var z2 = state.z2;
+ var pLen = z2.length - 2;
+ var cp;
+ var pp;
+ var np;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'IUP[' + v.axis + ']');
+ }
+
+ for (var i = 0; i < pLen; i++) {
+ cp = z2[i]; // current point
+
+ // if this point has been touched go on
+ if (v.touched(cp)) {
+ continue;
+ }
+
+ pp = cp.prevTouched(v);
+
+ // no point on the contour has been touched?
+ if (pp === cp) {
+ continue;
+ }
+
+ np = cp.nextTouched(v);
+
+ if (pp === np) {
+ // only one point on the contour has been touched
+ // so simply moves the point like that
+
+ v.setRelative(cp, cp, v.distance(pp, pp, false, true), v, true);
+ }
+
+ v.interpolate(cp, pp, np, v);
+ }
+ }
+
+ // SHP[] SHift Point using reference point
+ // 0x32-0x33
+ function SHP(a, state) {
+ var stack = state.stack;
+ var rpi = a ? state.rp1 : state.rp2;
+ var rp = (a ? state.z0 : state.z1)[rpi];
+ var fv = state.fv;
+ var pv = state.pv;
+ var loop = state.loop;
+ var z2 = state.z2;
+
+ while (loop--) {
+ var pi = stack.pop();
+ var p = z2[pi];
+
+ var d = pv.distance(rp, rp, false, true);
+ fv.setRelative(p, p, d, pv);
+ fv.touch(p);
+
+ if (exports.DEBUG) {
+ console.log(
+ state.step,
+ (state.loop > 1 ? 'loop ' + (state.loop - loop) + ': ' : '') +
+ 'SHP[' +
+ (a ? 'rp1' : 'rp2') +
+ ']',
+ pi
+ );
+ }
+ }
+
+ state.loop = 1;
+ }
+
+ // SHC[] SHift Contour using reference point
+ // 0x36-0x37
+ function SHC(a, state) {
+ var stack = state.stack;
+ var rpi = a ? state.rp1 : state.rp2;
+ var rp = (a ? state.z0 : state.z1)[rpi];
+ var fv = state.fv;
+ var pv = state.pv;
+ var ci = stack.pop();
+ var sp = state.z2[state.contours[ci]];
+ var p = sp;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SHC[' + a + ']', ci);
+ }
+
+ var d = pv.distance(rp, rp, false, true);
+
+ do {
+ if (p !== rp) {
+ fv.setRelative(p, p, d, pv);
+ }
+ p = p.nextPointOnContour;
+ } while (p !== sp);
+ }
+
+ // SHZ[] SHift Zone using reference point
+ // 0x36-0x37
+ function SHZ(a, state) {
+ var stack = state.stack;
+ var rpi = a ? state.rp1 : state.rp2;
+ var rp = (a ? state.z0 : state.z1)[rpi];
+ var fv = state.fv;
+ var pv = state.pv;
+
+ var e = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SHZ[' + a + ']', e);
+ }
+
+ var z;
+ switch (e) {
+ case 0:
+ z = state.tZone;
+ break;
+ case 1:
+ z = state.gZone;
+ break;
+ default:
+ throw new Error('Invalid zone');
+ }
+
+ var p;
+ var d = pv.distance(rp, rp, false, true);
+ var pLen = z.length - 2;
+ for (var i = 0; i < pLen; i++) {
+ p = z[i];
+ fv.setRelative(p, p, d, pv);
+ //if (p !== rp) fv.setRelative(p, p, d, pv);
+ }
+ }
+
+ // SHPIX[] SHift point by a PIXel amount
+ // 0x38
+ function SHPIX(state) {
+ var stack = state.stack;
+ var loop = state.loop;
+ var fv = state.fv;
+ var d = stack.pop() / 0x40;
+ var z2 = state.z2;
+
+ while (loop--) {
+ var pi = stack.pop();
+ var p = z2[pi];
+
+ if (exports.DEBUG) {
+ console.log(
+ state.step,
+ (state.loop > 1 ? 'loop ' + (state.loop - loop) + ': ' : '') +
+ 'SHPIX[]',
+ pi,
+ d
+ );
+ }
+
+ fv.setRelative(p, p, d);
+ fv.touch(p);
+ }
+
+ state.loop = 1;
+ }
+
+ // IP[] Interpolate Point
+ // 0x39
+ function IP(state) {
+ var stack = state.stack;
+ var rp1i = state.rp1;
+ var rp2i = state.rp2;
+ var loop = state.loop;
+ var rp1 = state.z0[rp1i];
+ var rp2 = state.z1[rp2i];
+ var fv = state.fv;
+ var pv = state.dpv;
+ var z2 = state.z2;
+
+ while (loop--) {
+ var pi = stack.pop();
+ var p = z2[pi];
+
+ if (exports.DEBUG) {
+ console.log(
+ state.step,
+ (state.loop > 1 ? 'loop ' + (state.loop - loop) + ': ' : '') + 'IP[]',
+ pi,
+ rp1i,
+ '<->',
+ rp2i
+ );
+ }
+
+ fv.interpolate(p, rp1, rp2, pv);
+
+ fv.touch(p);
+ }
+
+ state.loop = 1;
+ }
+
+ // MSIRP[a] Move Stack Indirect Relative Point
+ // 0x3A-0x3B
+ function MSIRP(a, state) {
+ var stack = state.stack;
+ var d = stack.pop() / 64;
+ var pi = stack.pop();
+ var p = state.z1[pi];
+ var rp0 = state.z0[state.rp0];
+ var fv = state.fv;
+ var pv = state.pv;
+
+ fv.setRelative(p, rp0, d, pv);
+ fv.touch(p);
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'MSIRP[' + a + ']', d, pi);
+ }
+
+ state.rp1 = state.rp0;
+ state.rp2 = pi;
+ if (a) {
+ state.rp0 = pi;
+ }
+ }
+
+ // ALIGNRP[] Align to reference point.
+ // 0x3C
+ function ALIGNRP(state) {
+ var stack = state.stack;
+ var rp0i = state.rp0;
+ var rp0 = state.z0[rp0i];
+ var loop = state.loop;
+ var fv = state.fv;
+ var pv = state.pv;
+ var z1 = state.z1;
+
+ while (loop--) {
+ var pi = stack.pop();
+ var p = z1[pi];
+
+ if (exports.DEBUG) {
+ console.log(
+ state.step,
+ (state.loop > 1 ? 'loop ' + (state.loop - loop) + ': ' : '') +
+ 'ALIGNRP[]',
+ pi
+ );
+ }
+
+ fv.setRelative(p, rp0, 0, pv);
+ fv.touch(p);
+ }
+
+ state.loop = 1;
+ }
+
+ // RTG[] Round To Double Grid
+ // 0x3D
+ function RTDG(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'RTDG[]');
+ }
+
+ state.round = roundToDoubleGrid;
+ }
+
+ // MIAP[a] Move Indirect Absolute Point
+ // 0x3E-0x3F
+ function MIAP(round, state) {
+ var stack = state.stack;
+ var n = stack.pop();
+ var pi = stack.pop();
+ var p = state.z0[pi];
+ var fv = state.fv;
+ var pv = state.pv;
+ var cv = state.cvt[n];
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'MIAP[' + round + ']', n, '(', cv, ')', pi);
+ }
+
+ var d = pv.distance(p, HPZero);
+
+ if (round) {
+ if (Math.abs(d - cv) < state.cvCutIn) {
+ d = cv;
+ }
+
+ d = state.round(d);
+ }
+
+ fv.setRelative(p, HPZero, d, pv);
+
+ if (state.zp0 === 0) {
+ p.xo = p.x;
+ p.yo = p.y;
+ }
+
+ fv.touch(p);
+
+ state.rp0 = state.rp1 = pi;
+ }
+
+ // NPUSB[] PUSH N Bytes
+ // 0x40
+ function NPUSHB(state) {
+ var prog = state.prog;
+ var ip = state.ip;
+ var stack = state.stack;
+
+ var n = prog[++ip];
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'NPUSHB[]', n);
+ }
+
+ for (var i = 0; i < n; i++) {
+ stack.push(prog[++ip]);
+ }
+
+ state.ip = ip;
+ }
+
+ // NPUSHW[] PUSH N Words
+ // 0x41
+ function NPUSHW(state) {
+ var ip = state.ip;
+ var prog = state.prog;
+ var stack = state.stack;
+ var n = prog[++ip];
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'NPUSHW[]', n);
+ }
+
+ for (var i = 0; i < n; i++) {
+ var w = (prog[++ip] << 8) | prog[++ip];
+ if (w & 0x8000) {
+ w = -((w ^ 0xffff) + 1);
+ }
+ stack.push(w);
+ }
+
+ state.ip = ip;
+ }
+
+ // WS[] Write Store
+ // 0x42
+ function WS(state) {
+ var stack = state.stack;
+ var store = state.store;
+
+ if (!store) {
+ store = state.store = [];
+ }
+
+ var v = stack.pop();
+ var l = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'WS', v, l);
+ }
+
+ store[l] = v;
+ }
+
+ // RS[] Read Store
+ // 0x43
+ function RS(state) {
+ var stack = state.stack;
+ var store = state.store;
+
+ var l = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'RS', l);
+ }
+
+ var v = (store && store[l]) || 0;
+
+ stack.push(v);
+ }
+
+ // WCVTP[] Write Control Value Table in Pixel units
+ // 0x44
+ function WCVTP(state) {
+ var stack = state.stack;
+
+ var v = stack.pop();
+ var l = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'WCVTP', v, l);
+ }
+
+ state.cvt[l] = v / 0x40;
+ }
+
+ // RCVT[] Read Control Value Table entry
+ // 0x45
+ function RCVT(state) {
+ var stack = state.stack;
+ var cvte = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'RCVT', cvte);
+ }
+
+ stack.push(state.cvt[cvte] * 0x40);
+ }
+
+ // GC[] Get Coordinate projected onto the projection vector
+ // 0x46-0x47
+ function GC(a, state) {
+ var stack = state.stack;
+ var pi = stack.pop();
+ var p = state.z2[pi];
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'GC[' + a + ']', pi);
+ }
+
+ stack.push(state.dpv.distance(p, HPZero, a, false) * 0x40);
+ }
+
+ // MD[a] Measure Distance
+ // 0x49-0x4A
+ function MD(a, state) {
+ var stack = state.stack;
+ var pi2 = stack.pop();
+ var pi1 = stack.pop();
+ var p2 = state.z1[pi2];
+ var p1 = state.z0[pi1];
+ var d = state.dpv.distance(p1, p2, a, a);
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'MD[' + a + ']', pi2, pi1, '->', d);
+ }
+
+ state.stack.push(Math.round(d * 64));
+ }
+
+ // MPPEM[] Measure Pixels Per EM
+ // 0x4B
+ function MPPEM(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'MPPEM[]');
+ }
+ state.stack.push(state.ppem);
+ }
+
+ // FLIPON[] set the auto FLIP Boolean to ON
+ // 0x4D
+ function FLIPON(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'FLIPON[]');
+ }
+ state.autoFlip = true;
+ }
+
+ // LT[] Less Than
+ // 0x50
+ function LT(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'LT[]', e2, e1);
+ }
+
+ stack.push(e1 < e2 ? 1 : 0);
+ }
+
+ // LTEQ[] Less Than or EQual
+ // 0x53
+ function LTEQ(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'LTEQ[]', e2, e1);
+ }
+
+ stack.push(e1 <= e2 ? 1 : 0);
+ }
+
+ // GTEQ[] Greater Than
+ // 0x52
+ function GT(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'GT[]', e2, e1);
+ }
+
+ stack.push(e1 > e2 ? 1 : 0);
+ }
+
+ // GTEQ[] Greater Than or EQual
+ // 0x53
+ function GTEQ(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'GTEQ[]', e2, e1);
+ }
+
+ stack.push(e1 >= e2 ? 1 : 0);
+ }
+
+ // EQ[] EQual
+ // 0x54
+ function EQ(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'EQ[]', e2, e1);
+ }
+
+ stack.push(e2 === e1 ? 1 : 0);
+ }
+
+ // NEQ[] Not EQual
+ // 0x55
+ function NEQ(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'NEQ[]', e2, e1);
+ }
+
+ stack.push(e2 !== e1 ? 1 : 0);
+ }
+
+ // ODD[] ODD
+ // 0x56
+ function ODD(state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'ODD[]', n);
+ }
+
+ stack.push(Math.trunc(n) % 2 ? 1 : 0);
+ }
+
+ // EVEN[] EVEN
+ // 0x57
+ function EVEN(state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'EVEN[]', n);
+ }
+
+ stack.push(Math.trunc(n) % 2 ? 0 : 1);
+ }
+
+ // IF[] IF test
+ // 0x58
+ function IF(state) {
+ var test = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'IF[]', test);
+ }
+
+ // if test is true it just continues
+ // if not the ip is skipped until matching ELSE or EIF
+ if (!test) {
+ skip(state, true);
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'EIF[]');
+ }
+ }
+ }
+
+ // EIF[] End IF
+ // 0x59
+ function EIF(state) {
+ // this can be reached normally when
+ // executing an else branch.
+ // -> just ignore it
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'EIF[]');
+ }
+ }
+
+ // AND[] logical AND
+ // 0x5A
+ function AND(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'AND[]', e2, e1);
+ }
+
+ stack.push(e2 && e1 ? 1 : 0);
+ }
+
+ // OR[] logical OR
+ // 0x5B
+ function OR(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'OR[]', e2, e1);
+ }
+
+ stack.push(e2 || e1 ? 1 : 0);
+ }
+
+ // NOT[] logical NOT
+ // 0x5C
+ function NOT(state) {
+ var stack = state.stack;
+ var e = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'NOT[]', e);
+ }
+
+ stack.push(e ? 0 : 1);
+ }
+
+ // DELTAP1[] DELTA exception P1
+ // DELTAP2[] DELTA exception P2
+ // DELTAP3[] DELTA exception P3
+ // 0x5D, 0x71, 0x72
+ function DELTAP123(b, state) {
+ var stack = state.stack;
+ var n = stack.pop();
+ var fv = state.fv;
+ var pv = state.pv;
+ var ppem = state.ppem;
+ var base = state.deltaBase + (b - 1) * 16;
+ var ds = state.deltaShift;
+ var z0 = state.z0;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'DELTAP[' + b + ']', n, stack);
+ }
+
+ for (var i = 0; i < n; i++) {
+ var pi = stack.pop();
+ var arg = stack.pop();
+ var appem = base + ((arg & 0xf0) >> 4);
+ if (appem !== ppem) {
+ continue;
+ }
+
+ var mag = (arg & 0x0f) - 8;
+ if (mag >= 0) {
+ mag++;
+ }
+ if (exports.DEBUG) {
+ console.log(state.step, 'DELTAPFIX', pi, 'by', mag * ds);
+ }
+
+ var p = z0[pi];
+ fv.setRelative(p, p, mag * ds, pv);
+ }
+ }
+
+ // SDB[] Set Delta Base in the graphics state
+ // 0x5E
+ function SDB(state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SDB[]', n);
+ }
+
+ state.deltaBase = n;
+ }
+
+ // SDS[] Set Delta Shift in the graphics state
+ // 0x5F
+ function SDS(state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SDS[]', n);
+ }
+
+ state.deltaShift = Math.pow(0.5, n);
+ }
+
+ // ADD[] ADD
+ // 0x60
+ function ADD(state) {
+ var stack = state.stack;
+ var n2 = stack.pop();
+ var n1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'ADD[]', n2, n1);
+ }
+
+ stack.push(n1 + n2);
+ }
+
+ // SUB[] SUB
+ // 0x61
+ function SUB(state) {
+ var stack = state.stack;
+ var n2 = stack.pop();
+ var n1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SUB[]', n2, n1);
+ }
+
+ stack.push(n1 - n2);
+ }
+
+ // DIV[] DIV
+ // 0x62
+ function DIV(state) {
+ var stack = state.stack;
+ var n2 = stack.pop();
+ var n1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'DIV[]', n2, n1);
+ }
+
+ stack.push(n1 * 64 / n2);
+ }
+
+ // MUL[] MUL
+ // 0x63
+ function MUL(state) {
+ var stack = state.stack;
+ var n2 = stack.pop();
+ var n1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'MUL[]', n2, n1);
+ }
+
+ stack.push(n1 * n2 / 64);
+ }
+
+ // ABS[] ABSolute value
+ // 0x64
+ function ABS(state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'ABS[]', n);
+ }
+
+ stack.push(Math.abs(n));
+ }
+
+ // NEG[] NEGate
+ // 0x65
+ function NEG(state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'NEG[]', n);
+ }
+
+ stack.push(-n);
+ }
+
+ // FLOOR[] FLOOR
+ // 0x66
+ function FLOOR(state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'FLOOR[]', n);
+ }
+
+ stack.push(Math.floor(n / 0x40) * 0x40);
+ }
+
+ // CEILING[] CEILING
+ // 0x67
+ function CEILING(state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'CEILING[]', n);
+ }
+
+ stack.push(Math.ceil(n / 0x40) * 0x40);
+ }
+
+ // ROUND[ab] ROUND value
+ // 0x68-0x6B
+ function ROUND(dt, state) {
+ var stack = state.stack;
+ var n = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'ROUND[]');
+ }
+
+ stack.push(state.round(n / 0x40) * 0x40);
+ }
+
+ // WCVTF[] Write Control Value Table in Funits
+ // 0x70
+ function WCVTF(state) {
+ var stack = state.stack;
+ var v = stack.pop();
+ var l = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'WCVTF[]', v, l);
+ }
+
+ state.cvt[l] = v * state.ppem / state.font.unitsPerEm;
+ }
+
+ // DELTAC1[] DELTA exception C1
+ // DELTAC2[] DELTA exception C2
+ // DELTAC3[] DELTA exception C3
+ // 0x73, 0x74, 0x75
+ function DELTAC123(b, state) {
+ var stack = state.stack;
+ var n = stack.pop();
+ var ppem = state.ppem;
+ var base = state.deltaBase + (b - 1) * 16;
+ var ds = state.deltaShift;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'DELTAC[' + b + ']', n, stack);
+ }
+
+ for (var i = 0; i < n; i++) {
+ var c = stack.pop();
+ var arg = stack.pop();
+ var appem = base + ((arg & 0xf0) >> 4);
+ if (appem !== ppem) {
+ continue;
+ }
+
+ var mag = (arg & 0x0f) - 8;
+ if (mag >= 0) {
+ mag++;
+ }
+
+ var delta = mag * ds;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'DELTACFIX', c, 'by', delta);
+ }
+
+ state.cvt[c] += delta;
+ }
+ }
+
+ // SROUND[] Super ROUND
+ // 0x76
+ function SROUND(state) {
+ var n = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SROUND[]', n);
+ }
+
+ state.round = roundSuper;
+
+ var period;
+
+ switch (n & 0xc0) {
+ case 0x00:
+ period = 0.5;
+ break;
+ case 0x40:
+ period = 1;
+ break;
+ case 0x80:
+ period = 2;
+ break;
+ default:
+ throw new Error('invalid SROUND value');
+ }
+
+ state.srPeriod = period;
+
+ switch (n & 0x30) {
+ case 0x00:
+ state.srPhase = 0;
+ break;
+ case 0x10:
+ state.srPhase = 0.25 * period;
+ break;
+ case 0x20:
+ state.srPhase = 0.5 * period;
+ break;
+ case 0x30:
+ state.srPhase = 0.75 * period;
+ break;
+ default:
+ throw new Error('invalid SROUND value');
+ }
+
+ n &= 0x0f;
+
+ if (n === 0) {
+ state.srThreshold = 0;
+ } else {
+ state.srThreshold = (n / 8 - 0.5) * period;
+ }
+ }
+
+ // S45ROUND[] Super ROUND 45 degrees
+ // 0x77
+ function S45ROUND(state) {
+ var n = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'S45ROUND[]', n);
+ }
+
+ state.round = roundSuper;
+
+ var period;
+
+ switch (n & 0xc0) {
+ case 0x00:
+ period = Math.sqrt(2) / 2;
+ break;
+ case 0x40:
+ period = Math.sqrt(2);
+ break;
+ case 0x80:
+ period = 2 * Math.sqrt(2);
+ break;
+ default:
+ throw new Error('invalid S45ROUND value');
+ }
+
+ state.srPeriod = period;
+
+ switch (n & 0x30) {
+ case 0x00:
+ state.srPhase = 0;
+ break;
+ case 0x10:
+ state.srPhase = 0.25 * period;
+ break;
+ case 0x20:
+ state.srPhase = 0.5 * period;
+ break;
+ case 0x30:
+ state.srPhase = 0.75 * period;
+ break;
+ default:
+ throw new Error('invalid S45ROUND value');
+ }
+
+ n &= 0x0f;
+
+ if (n === 0) {
+ state.srThreshold = 0;
+ } else {
+ state.srThreshold = (n / 8 - 0.5) * period;
+ }
+ }
+
+ // ROFF[] Round Off
+ // 0x7A
+ function ROFF(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'ROFF[]');
+ }
+
+ state.round = roundOff;
+ }
+
+ // RUTG[] Round Up To Grid
+ // 0x7C
+ function RUTG(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'RUTG[]');
+ }
+
+ state.round = roundUpToGrid;
+ }
+
+ // RDTG[] Round Down To Grid
+ // 0x7D
+ function RDTG(state) {
+ if (exports.DEBUG) {
+ console.log(state.step, 'RDTG[]');
+ }
+
+ state.round = roundDownToGrid;
+ }
+
+ // SCANCTRL[] SCAN conversion ConTRoL
+ // 0x85
+ function SCANCTRL(state) {
+ var n = state.stack.pop();
+
+ // ignored by opentype.js
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SCANCTRL[]', n);
+ }
+ }
+
+ // SDPVTL[a] Set Dual Projection Vector To Line
+ // 0x86-0x87
+ function SDPVTL(a, state) {
+ var stack = state.stack;
+ var p2i = stack.pop();
+ var p1i = stack.pop();
+ var p2 = state.z2[p2i];
+ var p1 = state.z1[p1i];
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'SDPVTL[' + a + ']', p2i, p1i);
+ }
+
+ var dx;
+ var dy;
+
+ if (!a) {
+ dx = p1.x - p2.x;
+ dy = p1.y - p2.y;
+ } else {
+ dx = p2.y - p1.y;
+ dy = p1.x - p2.x;
+ }
+
+ state.dpv = getUnitVector(dx, dy);
+ }
+
+ // GETINFO[] GET INFOrmation
+ // 0x88
+ function GETINFO(state) {
+ var stack = state.stack;
+ var sel = stack.pop();
+ var r = 0;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'GETINFO[]', sel);
+ }
+
+ // v35 as in no subpixel hinting
+ if (sel & 0x01) {
+ r = 35;
+ }
+
+ // TODO rotation and stretch currently not supported
+ // and thus those GETINFO are always 0.
+
+ // opentype.js is always gray scaling
+ if (sel & 0x20) {
+ r |= 0x1000;
+ }
+
+ stack.push(r);
+ }
+
+ // ROLL[] ROLL the top three stack elements
+ // 0x8A
+ function ROLL(state) {
+ var stack = state.stack;
+ var a = stack.pop();
+ var b = stack.pop();
+ var c = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'ROLL[]');
+ }
+
+ stack.push(b);
+ stack.push(a);
+ stack.push(c);
+ }
+
+ // MAX[] MAXimum of top two stack elements
+ // 0x8B
+ function MAX(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'MAX[]', e2, e1);
+ }
+
+ stack.push(Math.max(e1, e2));
+ }
+
+ // MIN[] MINimum of top two stack elements
+ // 0x8C
+ function MIN(state) {
+ var stack = state.stack;
+ var e2 = stack.pop();
+ var e1 = stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'MIN[]', e2, e1);
+ }
+
+ stack.push(Math.min(e1, e2));
+ }
+
+ // SCANTYPE[] SCANTYPE
+ // 0x8D
+ function SCANTYPE(state) {
+ var n = state.stack.pop();
+ // ignored by opentype.js
+ if (exports.DEBUG) {
+ console.log(state.step, 'SCANTYPE[]', n);
+ }
+ }
+
+ // INSTCTRL[] INSTCTRL
+ // 0x8D
+ function INSTCTRL(state) {
+ var s = state.stack.pop();
+ var v = state.stack.pop();
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'INSTCTRL[]', s, v);
+ }
+
+ switch (s) {
+ case 1:
+ state.inhibitGridFit = !!v;
+ return;
+ case 2:
+ state.ignoreCvt = !!v;
+ return;
+ default:
+ throw new Error('invalid INSTCTRL[] selector');
+ }
+ }
+
+ // PUSHB[abc] PUSH Bytes
+ // 0xB0-0xB7
+ function PUSHB(n, state) {
+ var stack = state.stack;
+ var prog = state.prog;
+ var ip = state.ip;
+
+ if (exports.DEBUG) {
+ console.log(state.step, 'PUSHB[' + n + ']');
+ }
+
+ for (var i = 0; i < n; i++) {
+ stack.push(prog[++ip]);
+ }
+
+ state.ip = ip;
+ }
+
+ // PUSHW[abc] PUSH Words
+ // 0xB8-0xBF
+ function PUSHW(n, state) {
+ var ip = state.ip;
+ var prog = state.prog;
+ var stack = state.stack;
+
+ if (exports.DEBUG) {
+ console.log(state.ip, 'PUSHW[' + n + ']');
+ }
+
+ for (var i = 0; i < n; i++) {
+ var w = (prog[++ip] << 8) | prog[++ip];
+ if (w & 0x8000) {
+ w = -((w ^ 0xffff) + 1);
+ }
+ stack.push(w);
+ }
+
+ state.ip = ip;
+ }
+
+ // MDRP[abcde] Move Direct Relative Point
+ // 0xD0-0xEF
+ // (if indirect is 0)
+ //
+ // and
+ //
+ // MIRP[abcde] Move Indirect Relative Point
+ // 0xE0-0xFF
+ // (if indirect is 1)
+
+ function MDRP_MIRP(indirect, setRp0, keepD, ro, dt, state) {
+ var stack = state.stack;
+ var cvte = indirect && stack.pop();
+ var pi = stack.pop();
+ var rp0i = state.rp0;
+ var rp = state.z0[rp0i];
+ var p = state.z1[pi];
+
+ var md = state.minDis;
+ var fv = state.fv;
+ var pv = state.dpv;
+ var od; // original distance
+ var d; // moving distance
+ var sign; // sign of distance
+ var cv;
+
+ d = od = pv.distance(p, rp, true, true);
+ sign = d >= 0 ? 1 : -1; // Math.sign would be 0 in case of 0
+
+ // TODO consider autoFlip
+ d = Math.abs(d);
+
+ if (indirect) {
+ cv = state.cvt[cvte];
+
+ if (ro && Math.abs(d - cv) < state.cvCutIn) {
+ d = cv;
+ }
+ }
+
+ if (keepD && d < md) {
+ d = md;
+ }
+
+ if (ro) {
+ d = state.round(d);
+ }
+
+ fv.setRelative(p, rp, sign * d, pv);
+ fv.touch(p);
+
+ if (exports.DEBUG) {
+ console.log(
+ state.step,
+ (indirect ? 'MIRP[' : 'MDRP[') +
+ (setRp0 ? 'M' : 'm') +
+ (keepD ? '>' : '_') +
+ (ro ? 'R' : '_') +
+ (dt === 0 ? 'Gr' : dt === 1 ? 'Bl' : dt === 2 ? 'Wh' : '') +
+ ']',
+ indirect ? cvte + '(' + state.cvt[cvte] + ',' + cv + ')' : '',
+ pi,
+ '(d =',
+ od,
+ '->',
+ sign * d,
+ ')'
+ );
+ }
+
+ state.rp1 = state.rp0;
+ state.rp2 = pi;
+ if (setRp0) {
+ state.rp0 = pi;
+ }
+ }
+
+ /*
+ * The instruction table.
+ */
+ instructionTable = [
+ /* 0x00 */ SVTCA.bind(undefined, yUnitVector),
+ /* 0x01 */ SVTCA.bind(undefined, xUnitVector),
+ /* 0x02 */ SPVTCA.bind(undefined, yUnitVector),
+ /* 0x03 */ SPVTCA.bind(undefined, xUnitVector),
+ /* 0x04 */ SFVTCA.bind(undefined, yUnitVector),
+ /* 0x05 */ SFVTCA.bind(undefined, xUnitVector),
+ /* 0x06 */ SPVTL.bind(undefined, 0),
+ /* 0x07 */ SPVTL.bind(undefined, 1),
+ /* 0x08 */ SFVTL.bind(undefined, 0),
+ /* 0x09 */ SFVTL.bind(undefined, 1),
+ /* 0x0A */ SPVFS,
+ /* 0x0B */ SFVFS,
+ /* 0x0C */ GPV,
+ /* 0x0D */ GFV,
+ /* 0x0E */ SFVTPV,
+ /* 0x0F */ ISECT,
+ /* 0x10 */ SRP0,
+ /* 0x11 */ SRP1,
+ /* 0x12 */ SRP2,
+ /* 0x13 */ SZP0,
+ /* 0x14 */ SZP1,
+ /* 0x15 */ SZP2,
+ /* 0x16 */ SZPS,
+ /* 0x17 */ SLOOP,
+ /* 0x18 */ RTG,
+ /* 0x19 */ RTHG,
+ /* 0x1A */ SMD,
+ /* 0x1B */ ELSE,
+ /* 0x1C */ JMPR,
+ /* 0x1D */ SCVTCI,
+ /* 0x1E */ undefined, // TODO SSWCI
+ /* 0x1F */ undefined, // TODO SSW
+ /* 0x20 */ DUP,
+ /* 0x21 */ POP,
+ /* 0x22 */ CLEAR,
+ /* 0x23 */ SWAP,
+ /* 0x24 */ DEPTH,
+ /* 0x25 */ CINDEX,
+ /* 0x26 */ MINDEX,
+ /* 0x27 */ undefined, // TODO ALIGNPTS
+ /* 0x28 */ undefined,
+ /* 0x29 */ undefined, // TODO UTP
+ /* 0x2A */ LOOPCALL,
+ /* 0x2B */ CALL,
+ /* 0x2C */ FDEF,
+ /* 0x2D */ undefined, // ENDF (eaten by FDEF)
+ /* 0x2E */ MDAP.bind(undefined, 0),
+ /* 0x2F */ MDAP.bind(undefined, 1),
+ /* 0x30 */ IUP.bind(undefined, yUnitVector),
+ /* 0x31 */ IUP.bind(undefined, xUnitVector),
+ /* 0x32 */ SHP.bind(undefined, 0),
+ /* 0x33 */ SHP.bind(undefined, 1),
+ /* 0x34 */ SHC.bind(undefined, 0),
+ /* 0x35 */ SHC.bind(undefined, 1),
+ /* 0x36 */ SHZ.bind(undefined, 0),
+ /* 0x37 */ SHZ.bind(undefined, 1),
+ /* 0x38 */ SHPIX,
+ /* 0x39 */ IP,
+ /* 0x3A */ MSIRP.bind(undefined, 0),
+ /* 0x3B */ MSIRP.bind(undefined, 1),
+ /* 0x3C */ ALIGNRP,
+ /* 0x3D */ RTDG,
+ /* 0x3E */ MIAP.bind(undefined, 0),
+ /* 0x3F */ MIAP.bind(undefined, 1),
+ /* 0x40 */ NPUSHB,
+ /* 0x41 */ NPUSHW,
+ /* 0x42 */ WS,
+ /* 0x43 */ RS,
+ /* 0x44 */ WCVTP,
+ /* 0x45 */ RCVT,
+ /* 0x46 */ GC.bind(undefined, 0),
+ /* 0x47 */ GC.bind(undefined, 1),
+ /* 0x48 */ undefined, // TODO SCFS
+ /* 0x49 */ MD.bind(undefined, 0),
+ /* 0x4A */ MD.bind(undefined, 1),
+ /* 0x4B */ MPPEM,
+ /* 0x4C */ undefined, // TODO MPS
+ /* 0x4D */ FLIPON,
+ /* 0x4E */ undefined, // TODO FLIPOFF
+ /* 0x4F */ undefined, // TODO DEBUG
+ /* 0x50 */ LT,
+ /* 0x51 */ LTEQ,
+ /* 0x52 */ GT,
+ /* 0x53 */ GTEQ,
+ /* 0x54 */ EQ,
+ /* 0x55 */ NEQ,
+ /* 0x56 */ ODD,
+ /* 0x57 */ EVEN,
+ /* 0x58 */ IF,
+ /* 0x59 */ EIF,
+ /* 0x5A */ AND,
+ /* 0x5B */ OR,
+ /* 0x5C */ NOT,
+ /* 0x5D */ DELTAP123.bind(undefined, 1),
+ /* 0x5E */ SDB,
+ /* 0x5F */ SDS,
+ /* 0x60 */ ADD,
+ /* 0x61 */ SUB,
+ /* 0x62 */ DIV,
+ /* 0x63 */ MUL,
+ /* 0x64 */ ABS,
+ /* 0x65 */ NEG,
+ /* 0x66 */ FLOOR,
+ /* 0x67 */ CEILING,
+ /* 0x68 */ ROUND.bind(undefined, 0),
+ /* 0x69 */ ROUND.bind(undefined, 1),
+ /* 0x6A */ ROUND.bind(undefined, 2),
+ /* 0x6B */ ROUND.bind(undefined, 3),
+ /* 0x6C */ undefined, // TODO NROUND[ab]
+ /* 0x6D */ undefined, // TODO NROUND[ab]
+ /* 0x6E */ undefined, // TODO NROUND[ab]
+ /* 0x6F */ undefined, // TODO NROUND[ab]
+ /* 0x70 */ WCVTF,
+ /* 0x71 */ DELTAP123.bind(undefined, 2),
+ /* 0x72 */ DELTAP123.bind(undefined, 3),
+ /* 0x73 */ DELTAC123.bind(undefined, 1),
+ /* 0x74 */ DELTAC123.bind(undefined, 2),
+ /* 0x75 */ DELTAC123.bind(undefined, 3),
+ /* 0x76 */ SROUND,
+ /* 0x77 */ S45ROUND,
+ /* 0x78 */ undefined, // TODO JROT[]
+ /* 0x79 */ undefined, // TODO JROF[]
+ /* 0x7A */ ROFF,
+ /* 0x7B */ undefined,
+ /* 0x7C */ RUTG,
+ /* 0x7D */ RDTG,
+ /* 0x7E */ POP, // actually SANGW, supposed to do only a pop though
+ /* 0x7F */ POP, // actually AA, supposed to do only a pop though
+ /* 0x80 */ undefined, // TODO FLIPPT
+ /* 0x81 */ undefined, // TODO FLIPRGON
+ /* 0x82 */ undefined, // TODO FLIPRGOFF
+ /* 0x83 */ undefined,
+ /* 0x84 */ undefined,
+ /* 0x85 */ SCANCTRL,
+ /* 0x86 */ SDPVTL.bind(undefined, 0),
+ /* 0x87 */ SDPVTL.bind(undefined, 1),
+ /* 0x88 */ GETINFO,
+ /* 0x89 */ undefined, // TODO IDEF
+ /* 0x8A */ ROLL,
+ /* 0x8B */ MAX,
+ /* 0x8C */ MIN,
+ /* 0x8D */ SCANTYPE,
+ /* 0x8E */ INSTCTRL,
+ /* 0x8F */ undefined,
+ /* 0x90 */ undefined,
+ /* 0x91 */ undefined,
+ /* 0x92 */ undefined,
+ /* 0x93 */ undefined,
+ /* 0x94 */ undefined,
+ /* 0x95 */ undefined,
+ /* 0x96 */ undefined,
+ /* 0x97 */ undefined,
+ /* 0x98 */ undefined,
+ /* 0x99 */ undefined,
+ /* 0x9A */ undefined,
+ /* 0x9B */ undefined,
+ /* 0x9C */ undefined,
+ /* 0x9D */ undefined,
+ /* 0x9E */ undefined,
+ /* 0x9F */ undefined,
+ /* 0xA0 */ undefined,
+ /* 0xA1 */ undefined,
+ /* 0xA2 */ undefined,
+ /* 0xA3 */ undefined,
+ /* 0xA4 */ undefined,
+ /* 0xA5 */ undefined,
+ /* 0xA6 */ undefined,
+ /* 0xA7 */ undefined,
+ /* 0xA8 */ undefined,
+ /* 0xA9 */ undefined,
+ /* 0xAA */ undefined,
+ /* 0xAB */ undefined,
+ /* 0xAC */ undefined,
+ /* 0xAD */ undefined,
+ /* 0xAE */ undefined,
+ /* 0xAF */ undefined,
+ /* 0xB0 */ PUSHB.bind(undefined, 1),
+ /* 0xB1 */ PUSHB.bind(undefined, 2),
+ /* 0xB2 */ PUSHB.bind(undefined, 3),
+ /* 0xB3 */ PUSHB.bind(undefined, 4),
+ /* 0xB4 */ PUSHB.bind(undefined, 5),
+ /* 0xB5 */ PUSHB.bind(undefined, 6),
+ /* 0xB6 */ PUSHB.bind(undefined, 7),
+ /* 0xB7 */ PUSHB.bind(undefined, 8),
+ /* 0xB8 */ PUSHW.bind(undefined, 1),
+ /* 0xB9 */ PUSHW.bind(undefined, 2),
+ /* 0xBA */ PUSHW.bind(undefined, 3),
+ /* 0xBB */ PUSHW.bind(undefined, 4),
+ /* 0xBC */ PUSHW.bind(undefined, 5),
+ /* 0xBD */ PUSHW.bind(undefined, 6),
+ /* 0xBE */ PUSHW.bind(undefined, 7),
+ /* 0xBF */ PUSHW.bind(undefined, 8),
+ /* 0xC0 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 0, 0),
+ /* 0xC1 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 0, 1),
+ /* 0xC2 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 0, 2),
+ /* 0xC3 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 0, 3),
+ /* 0xC4 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 1, 0),
+ /* 0xC5 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 1, 1),
+ /* 0xC6 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 1, 2),
+ /* 0xC7 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 1, 3),
+ /* 0xC8 */ MDRP_MIRP.bind(undefined, 0, 0, 1, 0, 0),
+ /* 0xC9 */ MDRP_MIRP.bind(undefined, 0, 0, 1, 0, 1),
+ /* 0xCA */ MDRP_MIRP.bind(undefined, 0, 0, 1, 0, 2),
+ /* 0xCB */ MDRP_MIRP.bind(undefined, 0, 0, 1, 0, 3),
+ /* 0xCC */ MDRP_MIRP.bind(undefined, 0, 0, 1, 1, 0),
+ /* 0xCD */ MDRP_MIRP.bind(undefined, 0, 0, 1, 1, 1),
+ /* 0xCE */ MDRP_MIRP.bind(undefined, 0, 0, 1, 1, 2),
+ /* 0xCF */ MDRP_MIRP.bind(undefined, 0, 0, 1, 1, 3),
+ /* 0xD0 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 0, 0),
+ /* 0xD1 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 0, 1),
+ /* 0xD2 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 0, 2),
+ /* 0xD3 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 0, 3),
+ /* 0xD4 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 1, 0),
+ /* 0xD5 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 1, 1),
+ /* 0xD6 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 1, 2),
+ /* 0xD7 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 1, 3),
+ /* 0xD8 */ MDRP_MIRP.bind(undefined, 0, 1, 1, 0, 0),
+ /* 0xD9 */ MDRP_MIRP.bind(undefined, 0, 1, 1, 0, 1),
+ /* 0xDA */ MDRP_MIRP.bind(undefined, 0, 1, 1, 0, 2),
+ /* 0xDB */ MDRP_MIRP.bind(undefined, 0, 1, 1, 0, 3),
+ /* 0xDC */ MDRP_MIRP.bind(undefined, 0, 1, 1, 1, 0),
+ /* 0xDD */ MDRP_MIRP.bind(undefined, 0, 1, 1, 1, 1),
+ /* 0xDE */ MDRP_MIRP.bind(undefined, 0, 1, 1, 1, 2),
+ /* 0xDF */ MDRP_MIRP.bind(undefined, 0, 1, 1, 1, 3),
+ /* 0xE0 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 0, 0),
+ /* 0xE1 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 0, 1),
+ /* 0xE2 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 0, 2),
+ /* 0xE3 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 0, 3),
+ /* 0xE4 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 1, 0),
+ /* 0xE5 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 1, 1),
+ /* 0xE6 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 1, 2),
+ /* 0xE7 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 1, 3),
+ /* 0xE8 */ MDRP_MIRP.bind(undefined, 1, 0, 1, 0, 0),
+ /* 0xE9 */ MDRP_MIRP.bind(undefined, 1, 0, 1, 0, 1),
+ /* 0xEA */ MDRP_MIRP.bind(undefined, 1, 0, 1, 0, 2),
+ /* 0xEB */ MDRP_MIRP.bind(undefined, 1, 0, 1, 0, 3),
+ /* 0xEC */ MDRP_MIRP.bind(undefined, 1, 0, 1, 1, 0),
+ /* 0xED */ MDRP_MIRP.bind(undefined, 1, 0, 1, 1, 1),
+ /* 0xEE */ MDRP_MIRP.bind(undefined, 1, 0, 1, 1, 2),
+ /* 0xEF */ MDRP_MIRP.bind(undefined, 1, 0, 1, 1, 3),
+ /* 0xF0 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 0, 0),
+ /* 0xF1 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 0, 1),
+ /* 0xF2 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 0, 2),
+ /* 0xF3 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 0, 3),
+ /* 0xF4 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 1, 0),
+ /* 0xF5 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 1, 1),
+ /* 0xF6 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 1, 2),
+ /* 0xF7 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 1, 3),
+ /* 0xF8 */ MDRP_MIRP.bind(undefined, 1, 1, 1, 0, 0),
+ /* 0xF9 */ MDRP_MIRP.bind(undefined, 1, 1, 1, 0, 1),
+ /* 0xFA */ MDRP_MIRP.bind(undefined, 1, 1, 1, 0, 2),
+ /* 0xFB */ MDRP_MIRP.bind(undefined, 1, 1, 1, 0, 3),
+ /* 0xFC */ MDRP_MIRP.bind(undefined, 1, 1, 1, 1, 0),
+ /* 0xFD */ MDRP_MIRP.bind(undefined, 1, 1, 1, 1, 1),
+ /* 0xFE */ MDRP_MIRP.bind(undefined, 1, 1, 1, 1, 2),
+ /* 0xFF */ MDRP_MIRP.bind(undefined, 1, 1, 1, 1, 3)
+ ];
+
+ /*****************************
+ Mathematical Considerations
+ ******************************
+
+ fv ... refers to freedom vector
+ pv ... refers to projection vector
+ rp ... refers to reference point
+ p ... refers to to point being operated on
+ d ... refers to distance
+
+ SETRELATIVE:
+ ============
+
+ case freedom vector == x-axis:
+ ------------------------------
+
+ (pv)
+ .-'
+ rpd .-'
+ .-*
+ d .-'90°'
+ .-' '
+ .-' '
+ *-' ' b
+ rp '
+ '
+ '
+ p *----------*-------------- (fv)
+ pm
+
+ rpdx = rpx + d * pv.x
+ rpdy = rpy + d * pv.y
+
+ equation of line b
+
+ y - rpdy = pvns * (x- rpdx)
+
+ y = p.y
+
+ x = rpdx + ( p.y - rpdy ) / pvns
+
+
+ case freedom vector == y-axis:
+ ------------------------------
+
+ * pm
+ |\
+ | \
+ | \
+ | \
+ | \
+ | \
+ | \
+ | \
+ | \
+ | \ b
+ | \
+ | \
+ | \ .-' (pv)
+ | 90° \.-'
+ | .-'* rpd
+ | .-'
+ * *-' d
+ p rp
+
+ rpdx = rpx + d * pv.x
+ rpdy = rpy + d * pv.y
+
+ equation of line b:
+ pvns ... normal slope to pv
+
+ y - rpdy = pvns * (x - rpdx)
+
+ x = p.x
+
+ y = rpdy + pvns * (p.x - rpdx)
+
+
+
+ generic case:
+ -------------
+
+
+ .'(fv)
+ .'
+ .* pm
+ .' !
+ .' .
+ .' !
+ .' . b
+ .' !
+ * .
+ p !
+ 90° . ... (pv)
+ ...-*-'''
+ ...---''' rpd
+ ...---''' d
+ *--'''
+ rp
+
+ rpdx = rpx + d * pv.x
+ rpdy = rpy + d * pv.y
+
+ equation of line b:
+ pvns... normal slope to pv
+
+ y - rpdy = pvns * (x - rpdx)
+
+ equation of freedom vector line:
+ fvs ... slope of freedom vector (=fy/fx)
+
+ y - py = fvs * (x - px)
+
+
+ on pm both equations are true for same x/y
+
+ y - rpdy = pvns * (x - rpdx)
+
+ y - py = fvs * (x - px)
+
+ form to y and set equal:
+
+ pvns * (x - rpdx) + rpdy = fvs * (x - px) + py
+
+ expand:
+
+ pvns * x - pvns * rpdx + rpdy = fvs * x - fvs * px + py
+
+ switch:
+
+ fvs * x - fvs * px + py = pvns * x - pvns * rpdx + rpdy
+
+ solve for x:
+
+ fvs * x - pvns * x = fvs * px - pvns * rpdx - py + rpdy
+
+
+
+ fvs * px - pvns * rpdx + rpdy - py
+ x = -----------------------------------
+ fvs - pvns
+
+ and:
+
+ y = fvs * (x - px) + py
+
+
+
+ INTERPOLATE:
+ ============
+
+ Examples of point interpolation.
+
+ The weight of the movement of the reference point gets bigger
+ the further the other reference point is away, thus the safest
+ option (that is avoiding 0/0 divisions) is to weight the
+ original distance of the other point by the sum of both distances.
+
+ If the sum of both distances is 0, then move the point by the
+ arithmetic average of the movement of both reference points.
+
+
+
+
+ (+6)
+ rp1o *---->*rp1
+ . . (+12)
+ . . rp2o *---------->* rp2
+ . . . .
+ . . . .
+ . 10 20 . .
+ |.........|...................| .
+ . . .
+ . . (+8) .
+ po *------>*p .
+ . . .
+ . 12 . 24 .
+ |...........|.......................|
+ 36
+
+
+ -------
+
+
+
+ (+10)
+ rp1o *-------->*rp1
+ . . (-10)
+ . . rp2 *<---------* rpo2
+ . . . .
+ . . . .
+ . 10 . 30 . .
+ |.........|.............................|
+ . .
+ . (+5) .
+ po *--->* p .
+ . . .
+ . . 20 .
+ |....|..............|
+ 5 15
+
+
+ -------
+
+
+ (+10)
+ rp1o *-------->*rp1
+ . .
+ . .
+ rp2o *-------->*rp2
+
+
+ (+10)
+ po *-------->* p
+
+ -------
+
+
+ (+10)
+ rp1o *-------->*rp1
+ . .
+ . .(+30)
+ rp2o *---------------------------->*rp2
+
+
+ (+25)
+ po *----------------------->* p
+
+
+
+ vim: set ts=4 sw=4 expandtab:
+ *****/
+
+ // The Font object
+
+ // This code is based on Array.from implementation for strings in https://github.com/mathiasbynens/Array.from
+ var arrayFromString =
+ Array.from ||
+ function(s) {
+ return (
+ s.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]?|[^\uD800-\uDFFF]|./g) || []
+ );
+ };
+
+ /**
+ * @typedef FontOptions
+ * @type Object
+ * @property {Boolean} empty - whether to create a new empty font
+ * @property {string} familyName
+ * @property {string} styleName
+ * @property {string=} fullName
+ * @property {string=} postScriptName
+ * @property {string=} designer
+ * @property {string=} designerURL
+ * @property {string=} manufacturer
+ * @property {string=} manufacturerURL
+ * @property {string=} license
+ * @property {string=} licenseURL
+ * @property {string=} version
+ * @property {string=} description
+ * @property {string=} copyright
+ * @property {string=} trademark
+ * @property {Number} unitsPerEm
+ * @property {Number} ascender
+ * @property {Number} descender
+ * @property {Number} createdTimestamp
+ * @property {string=} weightClass
+ * @property {string=} widthClass
+ * @property {string=} fsSelection
+ */
+
+ /**
+ * A Font represents a loaded OpenType font file.
+ * It contains a set of glyphs and methods to draw text on a drawing context,
+ * or to get a path representing the text.
+ * @exports opentype.Font
+ * @class
+ * @param {FontOptions}
+ * @constructor
+ */
+ function Font(options) {
+ options = options || {};
+
+ if (!options.empty) {
+ // Check that we've provided the minimum set of names.
+ checkArgument(
+ options.familyName,
+ 'When creating a new Font object, familyName is required.'
+ );
+ checkArgument(
+ options.styleName,
+ 'When creating a new Font object, styleName is required.'
+ );
+ checkArgument(
+ options.unitsPerEm,
+ 'When creating a new Font object, unitsPerEm is required.'
+ );
+ checkArgument(
+ options.ascender,
+ 'When creating a new Font object, ascender is required.'
+ );
+ checkArgument(
+ options.descender,
+ 'When creating a new Font object, descender is required.'
+ );
+ checkArgument(
+ options.descender < 0,
+ 'Descender should be negative (e.g. -512).'
+ );
+
+ // OS X will complain if the names are empty, so we put a single space everywhere by default.
+ this.names = {
+ fontFamily: { en: options.familyName || ' ' },
+ fontSubfamily: { en: options.styleName || ' ' },
+ fullName: {
+ en: options.fullName || options.familyName + ' ' + options.styleName
+ },
+ // postScriptName may not contain any whitespace
+ postScriptName: {
+ en:
+ options.postScriptName ||
+ (options.familyName + options.styleName).replace(/\s/g, '')
+ },
+ designer: { en: options.designer || ' ' },
+ designerURL: { en: options.designerURL || ' ' },
+ manufacturer: { en: options.manufacturer || ' ' },
+ manufacturerURL: { en: options.manufacturerURL || ' ' },
+ license: { en: options.license || ' ' },
+ licenseURL: { en: options.licenseURL || ' ' },
+ version: { en: options.version || 'Version 0.1' },
+ description: { en: options.description || ' ' },
+ copyright: { en: options.copyright || ' ' },
+ trademark: { en: options.trademark || ' ' }
+ };
+ this.unitsPerEm = options.unitsPerEm || 1000;
+ this.ascender = options.ascender;
+ this.descender = options.descender;
+ this.createdTimestamp = options.createdTimestamp;
+ this.tables = {
+ os2: {
+ usWeightClass: options.weightClass || this.usWeightClasses.MEDIUM,
+ usWidthClass: options.widthClass || this.usWidthClasses.MEDIUM,
+ fsSelection: options.fsSelection || this.fsSelectionValues.REGULAR
+ }
+ };
+ }
+
+ this.supported = true; // Deprecated: parseBuffer will throw an error if font is not supported.
+ this.glyphs = new glyphset.GlyphSet(this, options.glyphs || []);
+ this.encoding = new DefaultEncoding(this);
+ this.position = new Position(this);
+ this.substitution = new Substitution(this);
+ this.tables = this.tables || {};
+
+ Object.defineProperty(this, 'hinting', {
+ get: function() {
+ if (this._hinting) {
+ return this._hinting;
+ }
+ if (this.outlinesFormat === 'truetype') {
+ return (this._hinting = new Hinting(this));
+ }
+ }
+ });
+ }
+
+ /**
+ * Check if the font has a glyph for the given character.
+ * @param {string}
+ * @return {Boolean}
+ */
+ Font.prototype.hasChar = function(c) {
+ return this.encoding.charToGlyphIndex(c) !== null;
+ };
+
+ /**
+ * Convert the given character to a single glyph index.
+ * Note that this function assumes that there is a one-to-one mapping between
+ * the given character and a glyph; for complex scripts this might not be the case.
+ * @param {string}
+ * @return {Number}
+ */
+ Font.prototype.charToGlyphIndex = function(s) {
+ return this.encoding.charToGlyphIndex(s);
+ };
+
+ /**
+ * Convert the given character to a single Glyph object.
+ * Note that this function assumes that there is a one-to-one mapping between
+ * the given character and a glyph; for complex scripts this might not be the case.
+ * @param {string}
+ * @return {opentype.Glyph}
+ */
+ Font.prototype.charToGlyph = function(c) {
+ var glyphIndex = this.charToGlyphIndex(c);
+ var glyph = this.glyphs.get(glyphIndex);
+ if (!glyph) {
+ // .notdef
+ glyph = this.glyphs.get(0);
+ }
+
+ return glyph;
+ };
+
+ /**
+ * Convert the given text to a list of Glyph objects.
+ * Note that there is no strict one-to-one mapping between characters and
+ * glyphs, so the list of returned glyphs can be larger or smaller than the
+ * length of the given string.
+ * @param {string}
+ * @param {GlyphRenderOptions} [options]
+ * @return {opentype.Glyph[]}
+ */
+ Font.prototype.stringToGlyphs = function(s, options) {
+ var this$1 = this;
+
+ options = options || this.defaultRenderOptions;
+ // Get glyph indexes
+ var chars = arrayFromString(s);
+ var indexes = [];
+ for (var i = 0; i < chars.length; i += 1) {
+ var c = chars[i];
+ indexes.push(this$1.charToGlyphIndex(c));
+ }
+ var length = indexes.length;
+
+ // Apply substitutions on glyph indexes
+ if (options.features) {
+ var script = options.script || this.substitution.getDefaultScriptName();
+ var manyToOne = [];
+ if (options.features.liga) {
+ manyToOne = manyToOne.concat(
+ this.substitution.getFeature('liga', script, options.language)
+ );
+ }
+ if (options.features.rlig) {
+ manyToOne = manyToOne.concat(
+ this.substitution.getFeature('rlig', script, options.language)
+ );
+ }
+ for (var i$1 = 0; i$1 < length; i$1 += 1) {
+ for (var j = 0; j < manyToOne.length; j++) {
+ var ligature = manyToOne[j];
+ var components = ligature.sub;
+ var compCount = components.length;
+ var k = 0;
+ while (k < compCount && components[k] === indexes[i$1 + k]) {
+ k++;
+ }
+ if (k === compCount) {
+ indexes.splice(i$1, compCount, ligature.by);
+ length = length - compCount + 1;
+ }
+ }
+ }
+ }
+
+ // convert glyph indexes to glyph objects
+ var glyphs = new Array(length);
+ var notdef = this.glyphs.get(0);
+ for (var i$2 = 0; i$2 < length; i$2 += 1) {
+ glyphs[i$2] = this$1.glyphs.get(indexes[i$2]) || notdef;
+ }
+ return glyphs;
+ };
+
+ /**
+ * @param {string}
+ * @return {Number}
+ */
+ Font.prototype.nameToGlyphIndex = function(name) {
+ return this.glyphNames.nameToGlyphIndex(name);
+ };
+
+ /**
+ * @param {string}
+ * @return {opentype.Glyph}
+ */
+ Font.prototype.nameToGlyph = function(name) {
+ var glyphIndex = this.nameToGlyphIndex(name);
+ var glyph = this.glyphs.get(glyphIndex);
+ if (!glyph) {
+ // .notdef
+ glyph = this.glyphs.get(0);
+ }
+
+ return glyph;
+ };
+
+ /**
+ * @param {Number}
+ * @return {String}
+ */
+ Font.prototype.glyphIndexToName = function(gid) {
+ if (!this.glyphNames.glyphIndexToName) {
+ return '';
+ }
+
+ return this.glyphNames.glyphIndexToName(gid);
+ };
+
+ /**
+ * Retrieve the value of the kerning pair between the left glyph (or its index)
+ * and the right glyph (or its index). If no kerning pair is found, return 0.
+ * The kerning value gets added to the advance width when calculating the spacing
+ * between glyphs.
+ * For GPOS kerning, this method uses the default script and language, which covers
+ * most use cases. To have greater control, use font.position.getKerningValue .
+ * @param {opentype.Glyph} leftGlyph
+ * @param {opentype.Glyph} rightGlyph
+ * @return {Number}
+ */
+ Font.prototype.getKerningValue = function(leftGlyph, rightGlyph) {
+ leftGlyph = leftGlyph.index || leftGlyph;
+ rightGlyph = rightGlyph.index || rightGlyph;
+ var gposKerning = this.position.defaultKerningTables;
+ if (gposKerning) {
+ return this.position.getKerningValue(gposKerning, leftGlyph, rightGlyph);
+ }
+ // "kern" table
+ return this.kerningPairs[leftGlyph + ',' + rightGlyph] || 0;
+ };
+
+ /**
+ * @typedef GlyphRenderOptions
+ * @type Object
+ * @property {string} [script] - script used to determine which features to apply. By default, 'DFLT' or 'latn' is used.
+ * See https://www.microsoft.com/typography/otspec/scripttags.htm
+ * @property {string} [language='dflt'] - language system used to determine which features to apply.
+ * See https://www.microsoft.com/typography/developers/opentype/languagetags.aspx
+ * @property {boolean} [kerning=true] - whether to include kerning values
+ * @property {object} [features] - OpenType Layout feature tags. Used to enable or disable the features of the given script/language system.
+ * See https://www.microsoft.com/typography/otspec/featuretags.htm
+ */
+ Font.prototype.defaultRenderOptions = {
+ kerning: true,
+ features: {
+ liga: true,
+ rlig: true
+ }
+ };
+
+ /**
+ * Helper function that invokes the given callback for each glyph in the given text.
+ * The callback gets `(glyph, x, y, fontSize, options)`.* @param {string} text
+ * @param {string} text - The text to apply.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {GlyphRenderOptions=} options
+ * @param {Function} callback
+ */
+ Font.prototype.forEachGlyph = function(
+ text,
+ x,
+ y,
+ fontSize,
+ options,
+ callback
+ ) {
+ var this$1 = this;
+
+ x = x !== undefined ? x : 0;
+ y = y !== undefined ? y : 0;
+ fontSize = fontSize !== undefined ? fontSize : 72;
+ options = options || this.defaultRenderOptions;
+ var fontScale = 1 / this.unitsPerEm * fontSize;
+ var glyphs = this.stringToGlyphs(text, options);
+ var kerningLookups;
+ if (options.kerning) {
+ var script = options.script || this.position.getDefaultScriptName();
+ kerningLookups = this.position.getKerningTables(script, options.language);
+ }
+ for (var i = 0; i < glyphs.length; i += 1) {
+ var glyph = glyphs[i];
+ callback.call(this$1, glyph, x, y, fontSize, options);
+ if (glyph.advanceWidth) {
+ x += glyph.advanceWidth * fontScale;
+ }
+
+ if (options.kerning && i < glyphs.length - 1) {
+ // We should apply position adjustment lookups in a more generic way.
+ // Here we only use the xAdvance value.
+ var kerningValue = kerningLookups
+ ? this$1.position.getKerningValue(
+ kerningLookups,
+ glyph.index,
+ glyphs[i + 1].index
+ )
+ : this$1.getKerningValue(glyph, glyphs[i + 1]);
+ x += kerningValue * fontScale;
+ }
+
+ if (options.letterSpacing) {
+ x += options.letterSpacing * fontSize;
+ } else if (options.tracking) {
+ x += options.tracking / 1000 * fontSize;
+ }
+ }
+ return x;
+ };
+
+ /**
+ * Create a Path object that represents the given text.
+ * @param {string} text - The text to create.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {GlyphRenderOptions=} options
+ * @return {opentype.Path}
+ */
+ Font.prototype.getPath = function(text, x, y, fontSize, options) {
+ var fullPath = new Path();
+ this.forEachGlyph(text, x, y, fontSize, options, function(
+ glyph,
+ gX,
+ gY,
+ gFontSize
+ ) {
+ var glyphPath = glyph.getPath(gX, gY, gFontSize, options, this);
+ fullPath.extend(glyphPath);
+ });
+ return fullPath;
+ };
+
+ /**
+ * Create an array of Path objects that represent the glyphs of a given text.
+ * @param {string} text - The text to create.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {GlyphRenderOptions=} options
+ * @return {opentype.Path[]}
+ */
+ Font.prototype.getPaths = function(text, x, y, fontSize, options) {
+ var glyphPaths = [];
+ this.forEachGlyph(text, x, y, fontSize, options, function(
+ glyph,
+ gX,
+ gY,
+ gFontSize
+ ) {
+ var glyphPath = glyph.getPath(gX, gY, gFontSize, options, this);
+ glyphPaths.push(glyphPath);
+ });
+
+ return glyphPaths;
+ };
+
+ /**
+ * Returns the advance width of a text.
+ *
+ * This is something different than Path.getBoundingBox() as for example a
+ * suffixed whitespace increases the advanceWidth but not the bounding box
+ * or an overhanging letter like a calligraphic 'f' might have a quite larger
+ * bounding box than its advance width.
+ *
+ * This corresponds to canvas2dContext.measureText(text).width
+ *
+ * @param {string} text - The text to create.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {GlyphRenderOptions=} options
+ * @return advance width
+ */
+ Font.prototype.getAdvanceWidth = function(text, fontSize, options) {
+ return this.forEachGlyph(text, 0, 0, fontSize, options, function() {});
+ };
+
+ /**
+ * Draw the text on the given drawing context.
+ * @param {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+ * @param {string} text - The text to create.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {GlyphRenderOptions=} options
+ */
+ Font.prototype.draw = function(ctx, text, x, y, fontSize, options) {
+ this.getPath(text, x, y, fontSize, options).draw(ctx);
+ };
+
+ /**
+ * Draw the points of all glyphs in the text.
+ * On-curve points will be drawn in blue, off-curve points will be drawn in red.
+ * @param {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+ * @param {string} text - The text to create.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {GlyphRenderOptions=} options
+ */
+ Font.prototype.drawPoints = function(ctx, text, x, y, fontSize, options) {
+ this.forEachGlyph(text, x, y, fontSize, options, function(
+ glyph,
+ gX,
+ gY,
+ gFontSize
+ ) {
+ glyph.drawPoints(ctx, gX, gY, gFontSize);
+ });
+ };
+
+ /**
+ * Draw lines indicating important font measurements for all glyphs in the text.
+ * Black lines indicate the origin of the coordinate system (point 0,0).
+ * Blue lines indicate the glyph bounding box.
+ * Green line indicates the advance width of the glyph.
+ * @param {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+ * @param {string} text - The text to create.
+ * @param {number} [x=0] - Horizontal position of the beginning of the text.
+ * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+ * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+ * @param {GlyphRenderOptions=} options
+ */
+ Font.prototype.drawMetrics = function(ctx, text, x, y, fontSize, options) {
+ this.forEachGlyph(text, x, y, fontSize, options, function(
+ glyph,
+ gX,
+ gY,
+ gFontSize
+ ) {
+ glyph.drawMetrics(ctx, gX, gY, gFontSize);
+ });
+ };
+
+ /**
+ * @param {string}
+ * @return {string}
+ */
+ Font.prototype.getEnglishName = function(name) {
+ var translations = this.names[name];
+ if (translations) {
+ return translations.en;
+ }
+ };
+
+ /**
+ * Validate
+ */
+ Font.prototype.validate = function() {
+ var _this = this;
+
+ function assert(predicate, message) {}
+
+ function assertNamePresent(name) {
+ var englishName = _this.getEnglishName(name);
+ assert(
+ englishName && englishName.trim().length > 0,
+ 'No English ' + name + ' specified.'
+ );
+ }
+
+ // Identification information
+ assertNamePresent('fontFamily');
+ assertNamePresent('weightName');
+ assertNamePresent('manufacturer');
+ assertNamePresent('copyright');
+ assertNamePresent('version');
+
+ // Dimension information
+ assert(this.unitsPerEm > 0, 'No unitsPerEm specified.');
+ };
+
+ /**
+ * Convert the font object to a SFNT data structure.
+ * This structure contains all the necessary tables and metadata to create a binary OTF file.
+ * @return {opentype.Table}
+ */
+ Font.prototype.toTables = function() {
+ return sfnt.fontToTable(this);
+ };
+ /**
+ * @deprecated Font.toBuffer is deprecated. Use Font.toArrayBuffer instead.
+ */
+ Font.prototype.toBuffer = function() {
+ console.warn(
+ 'Font.toBuffer is deprecated. Use Font.toArrayBuffer instead.'
+ );
+ return this.toArrayBuffer();
+ };
+ /**
+ * Converts a `opentype.Font` into an `ArrayBuffer`
+ * @return {ArrayBuffer}
+ */
+ Font.prototype.toArrayBuffer = function() {
+ var sfntTable = this.toTables();
+ var bytes = sfntTable.encode();
+ var buffer = new ArrayBuffer(bytes.length);
+ var intArray = new Uint8Array(buffer);
+ for (var i = 0; i < bytes.length; i++) {
+ intArray[i] = bytes[i];
+ }
+
+ return buffer;
+ };
+
+ /**
+ * Initiate a download of the OpenType font.
+ */
+ Font.prototype.download = function(fileName) {
+ var familyName = this.getEnglishName('fontFamily');
+ var styleName = this.getEnglishName('fontSubfamily');
+ fileName =
+ fileName || familyName.replace(/\s/g, '') + '-' + styleName + '.otf';
+ var arrayBuffer = this.toArrayBuffer();
+
+ if (isBrowser()) {
+ window.requestFileSystem =
+ window.requestFileSystem || window.webkitRequestFileSystem;
+ window.requestFileSystem(
+ window.TEMPORARY,
+ arrayBuffer.byteLength,
+ function(fs) {
+ fs.root.getFile(fileName, { create: true }, function(fileEntry) {
+ fileEntry.createWriter(function(writer) {
+ var dataView = new DataView(arrayBuffer);
+ var blob = new Blob([dataView], { type: 'font/opentype' });
+ writer.write(blob);
+
+ writer.addEventListener(
+ 'writeend',
+ function() {
+ // Navigating to the file will download it.
+ location.href = fileEntry.toURL();
+ },
+ false
+ );
+ });
+ });
+ },
+ function(err) {
+ throw new Error(err.name + ': ' + err.message);
+ }
+ );
+ } else {
+ var fs = _dereq_('fs');
+ var buffer = arrayBufferToNodeBuffer(arrayBuffer);
+ fs.writeFileSync(fileName, buffer);
+ }
+ };
+ /**
+ * @private
+ */
+ Font.prototype.fsSelectionValues = {
+ ITALIC: 0x001, //1
+ UNDERSCORE: 0x002, //2
+ NEGATIVE: 0x004, //4
+ OUTLINED: 0x008, //8
+ STRIKEOUT: 0x010, //16
+ BOLD: 0x020, //32
+ REGULAR: 0x040, //64
+ USER_TYPO_METRICS: 0x080, //128
+ WWS: 0x100, //256
+ OBLIQUE: 0x200 //512
+ };
+
+ /**
+ * @private
+ */
+ Font.prototype.usWidthClasses = {
+ ULTRA_CONDENSED: 1,
+ EXTRA_CONDENSED: 2,
+ CONDENSED: 3,
+ SEMI_CONDENSED: 4,
+ MEDIUM: 5,
+ SEMI_EXPANDED: 6,
+ EXPANDED: 7,
+ EXTRA_EXPANDED: 8,
+ ULTRA_EXPANDED: 9
+ };
+
+ /**
+ * @private
+ */
+ Font.prototype.usWeightClasses = {
+ THIN: 100,
+ EXTRA_LIGHT: 200,
+ LIGHT: 300,
+ NORMAL: 400,
+ MEDIUM: 500,
+ SEMI_BOLD: 600,
+ BOLD: 700,
+ EXTRA_BOLD: 800,
+ BLACK: 900
+ };
+
+ // The `fvar` table stores font variation axes and instances.
+
+ function addName(name, names) {
+ var nameString = JSON.stringify(name);
+ var nameID = 256;
+ for (var nameKey in names) {
+ var n = parseInt(nameKey);
+ if (!n || n < 256) {
+ continue;
+ }
+
+ if (JSON.stringify(names[nameKey]) === nameString) {
+ return n;
+ }
+
+ if (nameID <= n) {
+ nameID = n + 1;
+ }
+ }
+
+ names[nameID] = name;
+ return nameID;
+ }
+
+ function makeFvarAxis(n, axis, names) {
+ var nameID = addName(axis.name, names);
+ return [
+ { name: 'tag_' + n, type: 'TAG', value: axis.tag },
+ { name: 'minValue_' + n, type: 'FIXED', value: axis.minValue << 16 },
+ {
+ name: 'defaultValue_' + n,
+ type: 'FIXED',
+ value: axis.defaultValue << 16
+ },
+ { name: 'maxValue_' + n, type: 'FIXED', value: axis.maxValue << 16 },
+ { name: 'flags_' + n, type: 'USHORT', value: 0 },
+ { name: 'nameID_' + n, type: 'USHORT', value: nameID }
+ ];
+ }
+
+ function parseFvarAxis(data, start, names) {
+ var axis = {};
+ var p = new parse.Parser(data, start);
+ axis.tag = p.parseTag();
+ axis.minValue = p.parseFixed();
+ axis.defaultValue = p.parseFixed();
+ axis.maxValue = p.parseFixed();
+ p.skip('uShort', 1); // reserved for flags; no values defined
+ axis.name = names[p.parseUShort()] || {};
+ return axis;
+ }
+
+ function makeFvarInstance(n, inst, axes, names) {
+ var nameID = addName(inst.name, names);
+ var fields = [
+ { name: 'nameID_' + n, type: 'USHORT', value: nameID },
+ { name: 'flags_' + n, type: 'USHORT', value: 0 }
+ ];
+
+ for (var i = 0; i < axes.length; ++i) {
+ var axisTag = axes[i].tag;
+ fields.push({
+ name: 'axis_' + n + ' ' + axisTag,
+ type: 'FIXED',
+ value: inst.coordinates[axisTag] << 16
+ });
+ }
+
+ return fields;
+ }
+
+ function parseFvarInstance(data, start, axes, names) {
+ var inst = {};
+ var p = new parse.Parser(data, start);
+ inst.name = names[p.parseUShort()] || {};
+ p.skip('uShort', 1); // reserved for flags; no values defined
+
+ inst.coordinates = {};
+ for (var i = 0; i < axes.length; ++i) {
+ inst.coordinates[axes[i].tag] = p.parseFixed();
+ }
+
+ return inst;
+ }
+
+ function makeFvarTable(fvar, names) {
+ var result = new table.Table('fvar', [
+ { name: 'version', type: 'ULONG', value: 0x10000 },
+ { name: 'offsetToData', type: 'USHORT', value: 0 },
+ { name: 'countSizePairs', type: 'USHORT', value: 2 },
+ { name: 'axisCount', type: 'USHORT', value: fvar.axes.length },
+ { name: 'axisSize', type: 'USHORT', value: 20 },
+ { name: 'instanceCount', type: 'USHORT', value: fvar.instances.length },
+ { name: 'instanceSize', type: 'USHORT', value: 4 + fvar.axes.length * 4 }
+ ]);
+ result.offsetToData = result.sizeOf();
+
+ for (var i = 0; i < fvar.axes.length; i++) {
+ result.fields = result.fields.concat(
+ makeFvarAxis(i, fvar.axes[i], names)
+ );
+ }
+
+ for (var j = 0; j < fvar.instances.length; j++) {
+ result.fields = result.fields.concat(
+ makeFvarInstance(j, fvar.instances[j], fvar.axes, names)
+ );
+ }
+
+ return result;
+ }
+
+ function parseFvarTable(data, start, names) {
+ var p = new parse.Parser(data, start);
+ var tableVersion = p.parseULong();
+ check.argument(
+ tableVersion === 0x00010000,
+ 'Unsupported fvar table version.'
+ );
+ var offsetToData = p.parseOffset16();
+ // Skip countSizePairs.
+ p.skip('uShort', 1);
+ var axisCount = p.parseUShort();
+ var axisSize = p.parseUShort();
+ var instanceCount = p.parseUShort();
+ var instanceSize = p.parseUShort();
+
+ var axes = [];
+ for (var i = 0; i < axisCount; i++) {
+ axes.push(
+ parseFvarAxis(data, start + offsetToData + i * axisSize, names)
+ );
+ }
+
+ var instances = [];
+ var instanceStart = start + offsetToData + axisCount * axisSize;
+ for (var j = 0; j < instanceCount; j++) {
+ instances.push(
+ parseFvarInstance(data, instanceStart + j * instanceSize, axes, names)
+ );
+ }
+
+ return { axes: axes, instances: instances };
+ }
+
+ var fvar = { make: makeFvarTable, parse: parseFvarTable };
+
+ // The `GPOS` table contains kerning pairs, among other things.
+
+ var subtableParsers$1 = new Array(10); // subtableParsers[0] is unused
+
+ // https://docs.microsoft.com/en-us/typography/opentype/spec/gpos#lookup-type-1-single-adjustment-positioning-subtable
+ // this = Parser instance
+ subtableParsers$1[1] = function parseLookup1() {
+ var start = this.offset + this.relativeOffset;
+ var posformat = this.parseUShort();
+ if (posformat === 1) {
+ return {
+ posFormat: 1,
+ coverage: this.parsePointer(Parser.coverage),
+ value: this.parseValueRecord()
+ };
+ } else if (posformat === 2) {
+ return {
+ posFormat: 2,
+ coverage: this.parsePointer(Parser.coverage),
+ values: this.parseValueRecordList()
+ };
+ }
+ check.assert(
+ false,
+ '0x' + start.toString(16) + ': GPOS lookup type 1 format must be 1 or 2.'
+ );
+ };
+
+ // https://docs.microsoft.com/en-us/typography/opentype/spec/gpos#lookup-type-2-pair-adjustment-positioning-subtable
+ subtableParsers$1[2] = function parseLookup2() {
+ var start = this.offset + this.relativeOffset;
+ var posFormat = this.parseUShort();
+ check.assert(
+ posFormat === 1 || posFormat === 2,
+ '0x' + start.toString(16) + ': GPOS lookup type 2 format must be 1 or 2.'
+ );
+ var coverage = this.parsePointer(Parser.coverage);
+ var valueFormat1 = this.parseUShort();
+ var valueFormat2 = this.parseUShort();
+ if (posFormat === 1) {
+ // Adjustments for Glyph Pairs
+ return {
+ posFormat: posFormat,
+ coverage: coverage,
+ valueFormat1: valueFormat1,
+ valueFormat2: valueFormat2,
+ pairSets: this.parseList(
+ Parser.pointer(
+ Parser.list(function() {
+ return {
+ // pairValueRecord
+ secondGlyph: this.parseUShort(),
+ value1: this.parseValueRecord(valueFormat1),
+ value2: this.parseValueRecord(valueFormat2)
+ };
+ })
+ )
+ )
+ };
+ } else if (posFormat === 2) {
+ var classDef1 = this.parsePointer(Parser.classDef);
+ var classDef2 = this.parsePointer(Parser.classDef);
+ var class1Count = this.parseUShort();
+ var class2Count = this.parseUShort();
+ return {
+ // Class Pair Adjustment
+ posFormat: posFormat,
+ coverage: coverage,
+ valueFormat1: valueFormat1,
+ valueFormat2: valueFormat2,
+ classDef1: classDef1,
+ classDef2: classDef2,
+ class1Count: class1Count,
+ class2Count: class2Count,
+ classRecords: this.parseList(
+ class1Count,
+ Parser.list(class2Count, function() {
+ return {
+ value1: this.parseValueRecord(valueFormat1),
+ value2: this.parseValueRecord(valueFormat2)
+ };
+ })
+ )
+ };
+ }
+ };
+
+ subtableParsers$1[3] = function parseLookup3() {
+ return { error: 'GPOS Lookup 3 not supported' };
+ };
+ subtableParsers$1[4] = function parseLookup4() {
+ return { error: 'GPOS Lookup 4 not supported' };
+ };
+ subtableParsers$1[5] = function parseLookup5() {
+ return { error: 'GPOS Lookup 5 not supported' };
+ };
+ subtableParsers$1[6] = function parseLookup6() {
+ return { error: 'GPOS Lookup 6 not supported' };
+ };
+ subtableParsers$1[7] = function parseLookup7() {
+ return { error: 'GPOS Lookup 7 not supported' };
+ };
+ subtableParsers$1[8] = function parseLookup8() {
+ return { error: 'GPOS Lookup 8 not supported' };
+ };
+ subtableParsers$1[9] = function parseLookup9() {
+ return { error: 'GPOS Lookup 9 not supported' };
+ };
+
+ // https://docs.microsoft.com/en-us/typography/opentype/spec/gpos
+ function parseGposTable(data, start) {
+ start = start || 0;
+ var p = new Parser(data, start);
+ var tableVersion = p.parseVersion(1);
+ check.argument(
+ tableVersion === 1 || tableVersion === 1.1,
+ 'Unsupported GPOS table version ' + tableVersion
+ );
+
+ if (tableVersion === 1) {
+ return {
+ version: tableVersion,
+ scripts: p.parseScriptList(),
+ features: p.parseFeatureList(),
+ lookups: p.parseLookupList(subtableParsers$1)
+ };
+ } else {
+ return {
+ version: tableVersion,
+ scripts: p.parseScriptList(),
+ features: p.parseFeatureList(),
+ lookups: p.parseLookupList(subtableParsers$1),
+ variations: p.parseFeatureVariationsList()
+ };
+ }
+ }
+
+ // GPOS Writing //////////////////////////////////////////////
+ // NOT SUPPORTED
+ var subtableMakers$1 = new Array(10);
+
+ function makeGposTable(gpos) {
+ return new table.Table('GPOS', [
+ { name: 'version', type: 'ULONG', value: 0x10000 },
+ {
+ name: 'scripts',
+ type: 'TABLE',
+ value: new table.ScriptList(gpos.scripts)
+ },
+ {
+ name: 'features',
+ type: 'TABLE',
+ value: new table.FeatureList(gpos.features)
+ },
+ {
+ name: 'lookups',
+ type: 'TABLE',
+ value: new table.LookupList(gpos.lookups, subtableMakers$1)
+ }
+ ]);
+ }
+
+ var gpos = { parse: parseGposTable, make: makeGposTable };
+
+ // The `kern` table contains kerning pairs.
+
+ function parseWindowsKernTable(p) {
+ var pairs = {};
+ // Skip nTables.
+ p.skip('uShort');
+ var subtableVersion = p.parseUShort();
+ check.argument(
+ subtableVersion === 0,
+ 'Unsupported kern sub-table version.'
+ );
+ // Skip subtableLength, subtableCoverage
+ p.skip('uShort', 2);
+ var nPairs = p.parseUShort();
+ // Skip searchRange, entrySelector, rangeShift.
+ p.skip('uShort', 3);
+ for (var i = 0; i < nPairs; i += 1) {
+ var leftIndex = p.parseUShort();
+ var rightIndex = p.parseUShort();
+ var value = p.parseShort();
+ pairs[leftIndex + ',' + rightIndex] = value;
+ }
+ return pairs;
+ }
+
+ function parseMacKernTable(p) {
+ var pairs = {};
+ // The Mac kern table stores the version as a fixed (32 bits) but we only loaded the first 16 bits.
+ // Skip the rest.
+ p.skip('uShort');
+ var nTables = p.parseULong();
+ //check.argument(nTables === 1, 'Only 1 subtable is supported (got ' + nTables + ').');
+ if (nTables > 1) {
+ console.warn('Only the first kern subtable is supported.');
+ }
+ p.skip('uLong');
+ var coverage = p.parseUShort();
+ var subtableVersion = coverage & 0xff;
+ p.skip('uShort');
+ if (subtableVersion === 0) {
+ var nPairs = p.parseUShort();
+ // Skip searchRange, entrySelector, rangeShift.
+ p.skip('uShort', 3);
+ for (var i = 0; i < nPairs; i += 1) {
+ var leftIndex = p.parseUShort();
+ var rightIndex = p.parseUShort();
+ var value = p.parseShort();
+ pairs[leftIndex + ',' + rightIndex] = value;
+ }
+ }
+ return pairs;
+ }
+
+ // Parse the `kern` table which contains kerning pairs.
+ function parseKernTable(data, start) {
+ var p = new parse.Parser(data, start);
+ var tableVersion = p.parseUShort();
+ if (tableVersion === 0) {
+ return parseWindowsKernTable(p);
+ } else if (tableVersion === 1) {
+ return parseMacKernTable(p);
+ } else {
+ throw new Error('Unsupported kern table version (' + tableVersion + ').');
+ }
+ }
+
+ var kern = { parse: parseKernTable };
+
+ // The `loca` table stores the offsets to the locations of the glyphs in the font.
+
+ // Parse the `loca` table. This table stores the offsets to the locations of the glyphs in the font,
+ // relative to the beginning of the glyphData table.
+ // The number of glyphs stored in the `loca` table is specified in the `maxp` table (under numGlyphs)
+ // The loca table has two versions: a short version where offsets are stored as uShorts, and a long
+ // version where offsets are stored as uLongs. The `head` table specifies which version to use
+ // (under indexToLocFormat).
+ function parseLocaTable(data, start, numGlyphs, shortVersion) {
+ var p = new parse.Parser(data, start);
+ var parseFn = shortVersion ? p.parseUShort : p.parseULong;
+ // There is an extra entry after the last index element to compute the length of the last glyph.
+ // That's why we use numGlyphs + 1.
+ var glyphOffsets = [];
+ for (var i = 0; i < numGlyphs + 1; i += 1) {
+ var glyphOffset = parseFn.call(p);
+ if (shortVersion) {
+ // The short table version stores the actual offset divided by 2.
+ glyphOffset *= 2;
+ }
+
+ glyphOffsets.push(glyphOffset);
+ }
+
+ return glyphOffsets;
+ }
+
+ var loca = { parse: parseLocaTable };
+
+ // opentype.js
+
+ /**
+ * The opentype library.
+ * @namespace opentype
+ */
+
+ // File loaders /////////////////////////////////////////////////////////
+ /**
+ * Loads a font from a file. The callback throws an error message as the first parameter if it fails
+ * and the font as an ArrayBuffer in the second parameter if it succeeds.
+ * @param {string} path - The path of the file
+ * @param {Function} callback - The function to call when the font load completes
+ */
+ function loadFromFile(path, callback) {
+ var fs = _dereq_('fs');
+ fs.readFile(path, function(err, buffer) {
+ if (err) {
+ return callback(err.message);
+ }
+
+ callback(null, nodeBufferToArrayBuffer(buffer));
+ });
+ }
+ /**
+ * Loads a font from a URL. The callback throws an error message as the first parameter if it fails
+ * and the font as an ArrayBuffer in the second parameter if it succeeds.
+ * @param {string} url - The URL of the font file.
+ * @param {Function} callback - The function to call when the font load completes
+ */
+ function loadFromUrl(url, callback) {
+ var request = new XMLHttpRequest();
+ request.open('get', url, true);
+ request.responseType = 'arraybuffer';
+ request.onload = function() {
+ if (request.response) {
+ return callback(null, request.response);
+ } else {
+ return callback('Font could not be loaded: ' + request.statusText);
+ }
+ };
+
+ request.onerror = function() {
+ callback('Font could not be loaded');
+ };
+
+ request.send();
+ }
+
+ // Table Directory Entries //////////////////////////////////////////////
+ /**
+ * Parses OpenType table entries.
+ * @param {DataView}
+ * @param {Number}
+ * @return {Object[]}
+ */
+ function parseOpenTypeTableEntries(data, numTables) {
+ var tableEntries = [];
+ var p = 12;
+ for (var i = 0; i < numTables; i += 1) {
+ var tag = parse.getTag(data, p);
+ var checksum = parse.getULong(data, p + 4);
+ var offset = parse.getULong(data, p + 8);
+ var length = parse.getULong(data, p + 12);
+ tableEntries.push({
+ tag: tag,
+ checksum: checksum,
+ offset: offset,
+ length: length,
+ compression: false
+ });
+ p += 16;
+ }
+
+ return tableEntries;
+ }
+
+ /**
+ * Parses WOFF table entries.
+ * @param {DataView}
+ * @param {Number}
+ * @return {Object[]}
+ */
+ function parseWOFFTableEntries(data, numTables) {
+ var tableEntries = [];
+ var p = 44; // offset to the first table directory entry.
+ for (var i = 0; i < numTables; i += 1) {
+ var tag = parse.getTag(data, p);
+ var offset = parse.getULong(data, p + 4);
+ var compLength = parse.getULong(data, p + 8);
+ var origLength = parse.getULong(data, p + 12);
+ var compression = void 0;
+ if (compLength < origLength) {
+ compression = 'WOFF';
+ } else {
+ compression = false;
+ }
+
+ tableEntries.push({
+ tag: tag,
+ offset: offset,
+ compression: compression,
+ compressedLength: compLength,
+ length: origLength
+ });
+ p += 20;
+ }
+
+ return tableEntries;
+ }
+
+ /**
+ * @typedef TableData
+ * @type Object
+ * @property {DataView} data - The DataView
+ * @property {number} offset - The data offset.
+ */
+
+ /**
+ * @param {DataView}
+ * @param {Object}
+ * @return {TableData}
+ */
+ function uncompressTable(data, tableEntry) {
+ if (tableEntry.compression === 'WOFF') {
+ var inBuffer = new Uint8Array(
+ data.buffer,
+ tableEntry.offset + 2,
+ tableEntry.compressedLength - 2
+ );
+ var outBuffer = new Uint8Array(tableEntry.length);
+ tinyInflate(inBuffer, outBuffer);
+ if (outBuffer.byteLength !== tableEntry.length) {
+ throw new Error(
+ 'Decompression error: ' +
+ tableEntry.tag +
+ " decompressed length doesn't match recorded length"
+ );
+ }
+
+ var view = new DataView(outBuffer.buffer, 0);
+ return { data: view, offset: 0 };
+ } else {
+ return { data: data, offset: tableEntry.offset };
+ }
+ }
+
+ // Public API ///////////////////////////////////////////////////////////
+
+ /**
+ * Parse the OpenType file data (as an ArrayBuffer) and return a Font object.
+ * Throws an error if the font could not be parsed.
+ * @param {ArrayBuffer}
+ * @return {opentype.Font}
+ */
+ function parseBuffer(buffer) {
+ var indexToLocFormat;
+ var ltagTable;
+
+ // Since the constructor can also be called to create new fonts from scratch, we indicate this
+ // should be an empty font that we'll fill with our own data.
+ var font = new Font({ empty: true });
+
+ // OpenType fonts use big endian byte ordering.
+ // We can't rely on typed array view types, because they operate with the endianness of the host computer.
+ // Instead we use DataViews where we can specify endianness.
+ var data = new DataView(buffer, 0);
+ var numTables;
+ var tableEntries = [];
+ var signature = parse.getTag(data, 0);
+ if (
+ signature === String.fromCharCode(0, 1, 0, 0) ||
+ signature === 'true' ||
+ signature === 'typ1'
+ ) {
+ font.outlinesFormat = 'truetype';
+ numTables = parse.getUShort(data, 4);
+ tableEntries = parseOpenTypeTableEntries(data, numTables);
+ } else if (signature === 'OTTO') {
+ font.outlinesFormat = 'cff';
+ numTables = parse.getUShort(data, 4);
+ tableEntries = parseOpenTypeTableEntries(data, numTables);
+ } else if (signature === 'wOFF') {
+ var flavor = parse.getTag(data, 4);
+ if (flavor === String.fromCharCode(0, 1, 0, 0)) {
+ font.outlinesFormat = 'truetype';
+ } else if (flavor === 'OTTO') {
+ font.outlinesFormat = 'cff';
+ } else {
+ throw new Error('Unsupported OpenType flavor ' + signature);
+ }
+
+ numTables = parse.getUShort(data, 12);
+ tableEntries = parseWOFFTableEntries(data, numTables);
+ } else {
+ throw new Error('Unsupported OpenType signature ' + signature);
+ }
+
+ var cffTableEntry;
+ var fvarTableEntry;
+ var glyfTableEntry;
+ var gposTableEntry;
+ var gsubTableEntry;
+ var hmtxTableEntry;
+ var kernTableEntry;
+ var locaTableEntry;
+ var nameTableEntry;
+ var metaTableEntry;
+ var p;
+
+ for (var i = 0; i < numTables; i += 1) {
+ var tableEntry = tableEntries[i];
+ var table = void 0;
+ switch (tableEntry.tag) {
+ case 'cmap':
+ table = uncompressTable(data, tableEntry);
+ font.tables.cmap = cmap.parse(table.data, table.offset);
+ font.encoding = new CmapEncoding(font.tables.cmap);
+ break;
+ case 'cvt ':
+ table = uncompressTable(data, tableEntry);
+ p = new parse.Parser(table.data, table.offset);
+ font.tables.cvt = p.parseShortList(tableEntry.length / 2);
+ break;
+ case 'fvar':
+ fvarTableEntry = tableEntry;
+ break;
+ case 'fpgm':
+ table = uncompressTable(data, tableEntry);
+ p = new parse.Parser(table.data, table.offset);
+ font.tables.fpgm = p.parseByteList(tableEntry.length);
+ break;
+ case 'head':
+ table = uncompressTable(data, tableEntry);
+ font.tables.head = head.parse(table.data, table.offset);
+ font.unitsPerEm = font.tables.head.unitsPerEm;
+ indexToLocFormat = font.tables.head.indexToLocFormat;
+ break;
+ case 'hhea':
+ table = uncompressTable(data, tableEntry);
+ font.tables.hhea = hhea.parse(table.data, table.offset);
+ font.ascender = font.tables.hhea.ascender;
+ font.descender = font.tables.hhea.descender;
+ font.numberOfHMetrics = font.tables.hhea.numberOfHMetrics;
+ break;
+ case 'hmtx':
+ hmtxTableEntry = tableEntry;
+ break;
+ case 'ltag':
+ table = uncompressTable(data, tableEntry);
+ ltagTable = ltag.parse(table.data, table.offset);
+ break;
+ case 'maxp':
+ table = uncompressTable(data, tableEntry);
+ font.tables.maxp = maxp.parse(table.data, table.offset);
+ font.numGlyphs = font.tables.maxp.numGlyphs;
+ break;
+ case 'name':
+ nameTableEntry = tableEntry;
+ break;
+ case 'OS/2':
+ table = uncompressTable(data, tableEntry);
+ font.tables.os2 = os2.parse(table.data, table.offset);
+ break;
+ case 'post':
+ table = uncompressTable(data, tableEntry);
+ font.tables.post = post.parse(table.data, table.offset);
+ font.glyphNames = new GlyphNames(font.tables.post);
+ break;
+ case 'prep':
+ table = uncompressTable(data, tableEntry);
+ p = new parse.Parser(table.data, table.offset);
+ font.tables.prep = p.parseByteList(tableEntry.length);
+ break;
+ case 'glyf':
+ glyfTableEntry = tableEntry;
+ break;
+ case 'loca':
+ locaTableEntry = tableEntry;
+ break;
+ case 'CFF ':
+ cffTableEntry = tableEntry;
+ break;
+ case 'kern':
+ kernTableEntry = tableEntry;
+ break;
+ case 'GPOS':
+ gposTableEntry = tableEntry;
+ break;
+ case 'GSUB':
+ gsubTableEntry = tableEntry;
+ break;
+ case 'meta':
+ metaTableEntry = tableEntry;
+ break;
+ }
+ }
+
+ var nameTable = uncompressTable(data, nameTableEntry);
+ font.tables.name = _name.parse(nameTable.data, nameTable.offset, ltagTable);
+ font.names = font.tables.name;
+
+ if (glyfTableEntry && locaTableEntry) {
+ var shortVersion = indexToLocFormat === 0;
+ var locaTable = uncompressTable(data, locaTableEntry);
+ var locaOffsets = loca.parse(
+ locaTable.data,
+ locaTable.offset,
+ font.numGlyphs,
+ shortVersion
+ );
+ var glyfTable = uncompressTable(data, glyfTableEntry);
+ font.glyphs = glyf.parse(
+ glyfTable.data,
+ glyfTable.offset,
+ locaOffsets,
+ font
+ );
+ } else if (cffTableEntry) {
+ var cffTable = uncompressTable(data, cffTableEntry);
+ cff.parse(cffTable.data, cffTable.offset, font);
+ } else {
+ throw new Error("Font doesn't contain TrueType or CFF outlines.");
+ }
+
+ var hmtxTable = uncompressTable(data, hmtxTableEntry);
+ hmtx.parse(
+ hmtxTable.data,
+ hmtxTable.offset,
+ font.numberOfHMetrics,
+ font.numGlyphs,
+ font.glyphs
+ );
+ addGlyphNames(font);
+
+ if (kernTableEntry) {
+ var kernTable = uncompressTable(data, kernTableEntry);
+ font.kerningPairs = kern.parse(kernTable.data, kernTable.offset);
+ } else {
+ font.kerningPairs = {};
+ }
+
+ if (gposTableEntry) {
+ var gposTable = uncompressTable(data, gposTableEntry);
+ font.tables.gpos = gpos.parse(gposTable.data, gposTable.offset);
+ font.position.init();
+ }
+
+ if (gsubTableEntry) {
+ var gsubTable = uncompressTable(data, gsubTableEntry);
+ font.tables.gsub = gsub.parse(gsubTable.data, gsubTable.offset);
+ }
+
+ if (fvarTableEntry) {
+ var fvarTable = uncompressTable(data, fvarTableEntry);
+ font.tables.fvar = fvar.parse(
+ fvarTable.data,
+ fvarTable.offset,
+ font.names
+ );
+ }
+
+ if (metaTableEntry) {
+ var metaTable = uncompressTable(data, metaTableEntry);
+ font.tables.meta = meta.parse(metaTable.data, metaTable.offset);
+ font.metas = font.tables.meta;
+ }
+
+ return font;
+ }
+
+ /**
+ * Asynchronously load the font from a URL or a filesystem. When done, call the callback
+ * with two arguments `(err, font)`. The `err` will be null on success,
+ * the `font` is a Font object.
+ * We use the node.js callback convention so that
+ * opentype.js can integrate with frameworks like async.js.
+ * @alias opentype.load
+ * @param {string} url - The URL of the font to load.
+ * @param {Function} callback - The callback.
+ */
+ function load(url, callback) {
+ var isNode$$1 = typeof window === 'undefined';
+ var loadFn = isNode$$1 ? loadFromFile : loadFromUrl;
+ loadFn(url, function(err, arrayBuffer) {
+ if (err) {
+ return callback(err);
+ }
+ var font;
+ try {
+ font = parseBuffer(arrayBuffer);
+ } catch (e) {
+ return callback(e, null);
+ }
+ return callback(null, font);
+ });
+ }
+
+ /**
+ * Synchronously load the font from a URL or file.
+ * When done, returns the font object or throws an error.
+ * @alias opentype.loadSync
+ * @param {string} url - The URL of the font to load.
+ * @return {opentype.Font}
+ */
+ function loadSync(url) {
+ var fs = _dereq_('fs');
+ var buffer = fs.readFileSync(url);
+ return parseBuffer(nodeBufferToArrayBuffer(buffer));
+ }
+
+ exports.Font = Font;
+ exports.Glyph = Glyph;
+ exports.Path = Path;
+ exports.BoundingBox = BoundingBox;
+ exports._parse = parse;
+ exports.parse = parseBuffer;
+ exports.load = load;
+ exports.loadSync = loadSync;
+
+ Object.defineProperty(exports, '__esModule', { value: true });
+ });
+ }.call(this, _dereq_('buffer').Buffer));
+ },
+ { buffer: 4, fs: 3 }
+ ],
+ 13: [
+ function(_dereq_, module, exports) {
+ (function(process) {
+ // .dirname, .basename, and .extname methods are extracted from Node.js v8.11.1,
+ // backported and transplited with Babel, with backwards-compat fixes
+
+ // Copyright Joyent, Inc. and other Node contributors.
+ //
+ // Permission is hereby granted, free of charge, to any person obtaining a
+ // copy of this software and associated documentation files (the
+ // "Software"), to deal in the Software without restriction, including
+ // without limitation the rights to use, copy, modify, merge, publish,
+ // distribute, sublicense, and/or sell copies of the Software, and to permit
+ // persons to whom the Software is furnished to do so, subject to the
+ // following conditions:
+ //
+ // The above copyright notice and this permission notice shall be included
+ // in all copies or substantial portions of the Software.
+ //
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ // OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+ // NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+ // DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+ // OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+ // USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+ // resolves . and .. elements in a path array with directory names there
+ // must be no slashes, empty elements, or device names (c:\) in the array
+ // (so also no leading and trailing slashes - it does not distinguish
+ // relative and absolute paths)
+ function normalizeArray(parts, allowAboveRoot) {
+ // if the path tries to go above the root, `up` ends up > 0
+ var up = 0;
+ for (var i = parts.length - 1; i >= 0; i--) {
+ var last = parts[i];
+ if (last === '.') {
+ parts.splice(i, 1);
+ } else if (last === '..') {
+ parts.splice(i, 1);
+ up++;
+ } else if (up) {
+ parts.splice(i, 1);
+ up--;
+ }
+ }
+
+ // if the path is allowed to go above the root, restore leading ..s
+ if (allowAboveRoot) {
+ for (; up--; up) {
+ parts.unshift('..');
+ }
+ }
+
+ return parts;
+ }
+
+ // path.resolve([from ...], to)
+ // posix version
+ exports.resolve = function() {
+ var resolvedPath = '',
+ resolvedAbsolute = false;
+
+ for (var i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) {
+ var path = i >= 0 ? arguments[i] : process.cwd();
+
+ // Skip empty and invalid entries
+ if (typeof path !== 'string') {
+ throw new TypeError('Arguments to path.resolve must be strings');
+ } else if (!path) {
+ continue;
+ }
+
+ resolvedPath = path + '/' + resolvedPath;
+ resolvedAbsolute = path.charAt(0) === '/';
+ }
+
+ // At this point the path should be resolved to a full absolute path, but
+ // handle relative paths to be safe (might happen when process.cwd() fails)
+
+ // Normalize the path
+ resolvedPath = normalizeArray(
+ filter(resolvedPath.split('/'), function(p) {
+ return !!p;
+ }),
+ !resolvedAbsolute
+ ).join('/');
+
+ return (resolvedAbsolute ? '/' : '') + resolvedPath || '.';
+ };
+
+ // path.normalize(path)
+ // posix version
+ exports.normalize = function(path) {
+ var isAbsolute = exports.isAbsolute(path),
+ trailingSlash = substr(path, -1) === '/';
+
+ // Normalize the path
+ path = normalizeArray(
+ filter(path.split('/'), function(p) {
+ return !!p;
+ }),
+ !isAbsolute
+ ).join('/');
+
+ if (!path && !isAbsolute) {
+ path = '.';
+ }
+ if (path && trailingSlash) {
+ path += '/';
+ }
+
+ return (isAbsolute ? '/' : '') + path;
+ };
+
+ // posix version
+ exports.isAbsolute = function(path) {
+ return path.charAt(0) === '/';
+ };
+
+ // posix version
+ exports.join = function() {
+ var paths = Array.prototype.slice.call(arguments, 0);
+ return exports.normalize(
+ filter(paths, function(p, index) {
+ if (typeof p !== 'string') {
+ throw new TypeError('Arguments to path.join must be strings');
+ }
+ return p;
+ }).join('/')
+ );
+ };
+
+ // path.relative(from, to)
+ // posix version
+ exports.relative = function(from, to) {
+ from = exports.resolve(from).substr(1);
+ to = exports.resolve(to).substr(1);
+
+ function trim(arr) {
+ var start = 0;
+ for (; start < arr.length; start++) {
+ if (arr[start] !== '') break;
+ }
+
+ var end = arr.length - 1;
+ for (; end >= 0; end--) {
+ if (arr[end] !== '') break;
+ }
+
+ if (start > end) return [];
+ return arr.slice(start, end - start + 1);
+ }
+
+ var fromParts = trim(from.split('/'));
+ var toParts = trim(to.split('/'));
+
+ var length = Math.min(fromParts.length, toParts.length);
+ var samePartsLength = length;
+ for (var i = 0; i < length; i++) {
+ if (fromParts[i] !== toParts[i]) {
+ samePartsLength = i;
+ break;
+ }
+ }
+
+ var outputParts = [];
+ for (var i = samePartsLength; i < fromParts.length; i++) {
+ outputParts.push('..');
+ }
+
+ outputParts = outputParts.concat(toParts.slice(samePartsLength));
+
+ return outputParts.join('/');
+ };
+
+ exports.sep = '/';
+ exports.delimiter = ':';
+
+ exports.dirname = function(path) {
+ if (typeof path !== 'string') path = path + '';
+ if (path.length === 0) return '.';
+ var code = path.charCodeAt(0);
+ var hasRoot = code === 47 /*/*/;
+ var end = -1;
+ var matchedSlash = true;
+ for (var i = path.length - 1; i >= 1; --i) {
+ code = path.charCodeAt(i);
+ if (code === 47 /*/*/) {
+ if (!matchedSlash) {
+ end = i;
+ break;
+ }
+ } else {
+ // We saw the first non-path separator
+ matchedSlash = false;
+ }
+ }
+
+ if (end === -1) return hasRoot ? '/' : '.';
+ if (hasRoot && end === 1) {
+ // return '//';
+ // Backwards-compat fix:
+ return '/';
+ }
+ return path.slice(0, end);
+ };
+
+ function basename(path) {
+ if (typeof path !== 'string') path = path + '';
+
+ var start = 0;
+ var end = -1;
+ var matchedSlash = true;
+ var i;
+
+ for (i = path.length - 1; i >= 0; --i) {
+ if (path.charCodeAt(i) === 47 /*/*/) {
+ // If we reached a path separator that was not part of a set of path
+ // separators at the end of the string, stop now
+ if (!matchedSlash) {
+ start = i + 1;
+ break;
+ }
+ } else if (end === -1) {
+ // We saw the first non-path separator, mark this as the end of our
+ // path component
+ matchedSlash = false;
+ end = i + 1;
+ }
+ }
+
+ if (end === -1) return '';
+ return path.slice(start, end);
+ }
+
+ // Uses a mixed approach for backwards-compatibility, as ext behavior changed
+ // in new Node.js versions, so only basename() above is backported here
+ exports.basename = function(path, ext) {
+ var f = basename(path);
+ if (ext && f.substr(-1 * ext.length) === ext) {
+ f = f.substr(0, f.length - ext.length);
+ }
+ return f;
+ };
+
+ exports.extname = function(path) {
+ if (typeof path !== 'string') path = path + '';
+ var startDot = -1;
+ var startPart = 0;
+ var end = -1;
+ var matchedSlash = true;
+ // Track the state of characters (if any) we see before our first dot and
+ // after any path separator we find
+ var preDotState = 0;
+ for (var i = path.length - 1; i >= 0; --i) {
+ var code = path.charCodeAt(i);
+ if (code === 47 /*/*/) {
+ // If we reached a path separator that was not part of a set of path
+ // separators at the end of the string, stop now
+ if (!matchedSlash) {
+ startPart = i + 1;
+ break;
+ }
+ continue;
+ }
+ if (end === -1) {
+ // We saw the first non-path separator, mark this as the end of our
+ // extension
+ matchedSlash = false;
+ end = i + 1;
+ }
+ if (code === 46 /*.*/) {
+ // If this is our first dot, mark it as the start of our extension
+ if (startDot === -1) startDot = i;
+ else if (preDotState !== 1) preDotState = 1;
+ } else if (startDot !== -1) {
+ // We saw a non-dot and non-path separator before our dot, so we should
+ // have a good chance at having a non-empty extension
+ preDotState = -1;
+ }
+ }
+
+ if (
+ startDot === -1 ||
+ end === -1 ||
+ // We saw a non-dot character immediately before the dot
+ preDotState === 0 ||
+ // The (right-most) trimmed path component is exactly '..'
+ (preDotState === 1 && startDot === end - 1 && startDot === startPart + 1)
+ ) {
+ return '';
+ }
+ return path.slice(startDot, end);
+ };
+
+ function filter(xs, f) {
+ if (xs.filter) return xs.filter(f);
+ var res = [];
+ for (var i = 0; i < xs.length; i++) {
+ if (f(xs[i], i, xs)) res.push(xs[i]);
+ }
+ return res;
+ }
+
+ // String.prototype.substr - negative index don't work in IE8
+ var substr =
+ 'ab'.substr(-1) === 'b'
+ ? function(str, start, len) {
+ return str.substr(start, len);
+ }
+ : function(str, start, len) {
+ if (start < 0) start = str.length + start;
+ return str.substr(start, len);
+ };
+ }.call(this, _dereq_('_process')));
+ },
+ { _process: 14 }
+ ],
+ 14: [
+ function(_dereq_, module, exports) {
+ // shim for using process in browser
+ var process = (module.exports = {});
+
+ // cached from whatever global is present so that test runners that stub it
+ // don't break things. But we need to wrap it in a try catch in case it is
+ // wrapped in strict mode code which doesn't define any globals. It's inside a
+ // function because try/catches deoptimize in certain engines.
+
+ var cachedSetTimeout;
+ var cachedClearTimeout;
+
+ function defaultSetTimout() {
+ throw new Error('setTimeout has not been defined');
+ }
+ function defaultClearTimeout() {
+ throw new Error('clearTimeout has not been defined');
+ }
+ (function() {
+ try {
+ if (typeof setTimeout === 'function') {
+ cachedSetTimeout = setTimeout;
+ } else {
+ cachedSetTimeout = defaultSetTimout;
+ }
+ } catch (e) {
+ cachedSetTimeout = defaultSetTimout;
+ }
+ try {
+ if (typeof clearTimeout === 'function') {
+ cachedClearTimeout = clearTimeout;
+ } else {
+ cachedClearTimeout = defaultClearTimeout;
+ }
+ } catch (e) {
+ cachedClearTimeout = defaultClearTimeout;
+ }
+ })();
+ function runTimeout(fun) {
+ if (cachedSetTimeout === setTimeout) {
+ //normal enviroments in sane situations
+ return setTimeout(fun, 0);
+ }
+ // if setTimeout wasn't available but was latter defined
+ if (
+ (cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) &&
+ setTimeout
+ ) {
+ cachedSetTimeout = setTimeout;
+ return setTimeout(fun, 0);
+ }
+ try {
+ // when when somebody has screwed with setTimeout but no I.E. maddness
+ return cachedSetTimeout(fun, 0);
+ } catch (e) {
+ try {
+ // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+ return cachedSetTimeout.call(null, fun, 0);
+ } catch (e) {
+ // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
+ return cachedSetTimeout.call(this, fun, 0);
+ }
+ }
+ }
+ function runClearTimeout(marker) {
+ if (cachedClearTimeout === clearTimeout) {
+ //normal enviroments in sane situations
+ return clearTimeout(marker);
+ }
+ // if clearTimeout wasn't available but was latter defined
+ if (
+ (cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) &&
+ clearTimeout
+ ) {
+ cachedClearTimeout = clearTimeout;
+ return clearTimeout(marker);
+ }
+ try {
+ // when when somebody has screwed with setTimeout but no I.E. maddness
+ return cachedClearTimeout(marker);
+ } catch (e) {
+ try {
+ // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+ return cachedClearTimeout.call(null, marker);
+ } catch (e) {
+ // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
+ // Some versions of I.E. have different rules for clearTimeout vs setTimeout
+ return cachedClearTimeout.call(this, marker);
+ }
+ }
+ }
+ var queue = [];
+ var draining = false;
+ var currentQueue;
+ var queueIndex = -1;
+
+ function cleanUpNextTick() {
+ if (!draining || !currentQueue) {
+ return;
+ }
+ draining = false;
+ if (currentQueue.length) {
+ queue = currentQueue.concat(queue);
+ } else {
+ queueIndex = -1;
+ }
+ if (queue.length) {
+ drainQueue();
+ }
+ }
+
+ function drainQueue() {
+ if (draining) {
+ return;
+ }
+ var timeout = runTimeout(cleanUpNextTick);
+ draining = true;
+
+ var len = queue.length;
+ while (len) {
+ currentQueue = queue;
+ queue = [];
+ while (++queueIndex < len) {
+ if (currentQueue) {
+ currentQueue[queueIndex].run();
+ }
+ }
+ queueIndex = -1;
+ len = queue.length;
+ }
+ currentQueue = null;
+ draining = false;
+ runClearTimeout(timeout);
+ }
+
+ process.nextTick = function(fun) {
+ var args = new Array(arguments.length - 1);
+ if (arguments.length > 1) {
+ for (var i = 1; i < arguments.length; i++) {
+ args[i - 1] = arguments[i];
+ }
+ }
+ queue.push(new Item(fun, args));
+ if (queue.length === 1 && !draining) {
+ runTimeout(drainQueue);
+ }
+ };
+
+ // v8 likes predictible objects
+ function Item(fun, array) {
+ this.fun = fun;
+ this.array = array;
+ }
+ Item.prototype.run = function() {
+ this.fun.apply(null, this.array);
+ };
+ process.title = 'browser';
+ process.browser = true;
+ process.env = {};
+ process.argv = [];
+ process.version = ''; // empty string to avoid regexp issues
+ process.versions = {};
+
+ function noop() {}
+
+ process.on = noop;
+ process.addListener = noop;
+ process.once = noop;
+ process.off = noop;
+ process.removeListener = noop;
+ process.removeAllListeners = noop;
+ process.emit = noop;
+ process.prependListener = noop;
+ process.prependOnceListener = noop;
+
+ process.listeners = function(name) {
+ return [];
+ };
+
+ process.binding = function(name) {
+ throw new Error('process.binding is not supported');
+ };
+
+ process.cwd = function() {
+ return '/';
+ };
+ process.chdir = function(dir) {
+ throw new Error('process.chdir is not supported');
+ };
+ process.umask = function() {
+ return 0;
+ };
+ },
+ {}
+ ],
+ 15: [
+ function(_dereq_, module, exports) {
+ (function(self) {
+ 'use strict';
+
+ if (self.fetch) {
+ return;
+ }
+
+ var support = {
+ searchParams: 'URLSearchParams' in self,
+ iterable: 'Symbol' in self && 'iterator' in Symbol,
+ blob:
+ 'FileReader' in self &&
+ 'Blob' in self &&
+ (function() {
+ try {
+ new Blob();
+ return true;
+ } catch (e) {
+ return false;
+ }
+ })(),
+ formData: 'FormData' in self,
+ arrayBuffer: 'ArrayBuffer' in self
+ };
+
+ if (support.arrayBuffer) {
+ var viewClasses = [
+ '[object Int8Array]',
+ '[object Uint8Array]',
+ '[object Uint8ClampedArray]',
+ '[object Int16Array]',
+ '[object Uint16Array]',
+ '[object Int32Array]',
+ '[object Uint32Array]',
+ '[object Float32Array]',
+ '[object Float64Array]'
+ ];
+
+ var isDataView = function(obj) {
+ return obj && DataView.prototype.isPrototypeOf(obj);
+ };
+
+ var isArrayBufferView =
+ ArrayBuffer.isView ||
+ function(obj) {
+ return (
+ obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1
+ );
+ };
+ }
+
+ function normalizeName(name) {
+ if (typeof name !== 'string') {
+ name = String(name);
+ }
+ if (/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) {
+ throw new TypeError('Invalid character in header field name');
+ }
+ return name.toLowerCase();
+ }
+
+ function normalizeValue(value) {
+ if (typeof value !== 'string') {
+ value = String(value);
+ }
+ return value;
+ }
+
+ // Build a destructive iterator for the value list
+ function iteratorFor(items) {
+ var iterator = {
+ next: function() {
+ var value = items.shift();
+ return { done: value === undefined, value: value };
+ }
+ };
+
+ if (support.iterable) {
+ iterator[Symbol.iterator] = function() {
+ return iterator;
+ };
+ }
+
+ return iterator;
+ }
+
+ function Headers(headers) {
+ this.map = {};
+
+ if (headers instanceof Headers) {
+ headers.forEach(function(value, name) {
+ this.append(name, value);
+ }, this);
+ } else if (Array.isArray(headers)) {
+ headers.forEach(function(header) {
+ this.append(header[0], header[1]);
+ }, this);
+ } else if (headers) {
+ Object.getOwnPropertyNames(headers).forEach(function(name) {
+ this.append(name, headers[name]);
+ }, this);
+ }
+ }
+
+ Headers.prototype.append = function(name, value) {
+ name = normalizeName(name);
+ value = normalizeValue(value);
+ var oldValue = this.map[name];
+ this.map[name] = oldValue ? oldValue + ',' + value : value;
+ };
+
+ Headers.prototype['delete'] = function(name) {
+ delete this.map[normalizeName(name)];
+ };
+
+ Headers.prototype.get = function(name) {
+ name = normalizeName(name);
+ return this.has(name) ? this.map[name] : null;
+ };
+
+ Headers.prototype.has = function(name) {
+ return this.map.hasOwnProperty(normalizeName(name));
+ };
+
+ Headers.prototype.set = function(name, value) {
+ this.map[normalizeName(name)] = normalizeValue(value);
+ };
+
+ Headers.prototype.forEach = function(callback, thisArg) {
+ for (var name in this.map) {
+ if (this.map.hasOwnProperty(name)) {
+ callback.call(thisArg, this.map[name], name, this);
+ }
+ }
+ };
+
+ Headers.prototype.keys = function() {
+ var items = [];
+ this.forEach(function(value, name) {
+ items.push(name);
+ });
+ return iteratorFor(items);
+ };
+
+ Headers.prototype.values = function() {
+ var items = [];
+ this.forEach(function(value) {
+ items.push(value);
+ });
+ return iteratorFor(items);
+ };
+
+ Headers.prototype.entries = function() {
+ var items = [];
+ this.forEach(function(value, name) {
+ items.push([name, value]);
+ });
+ return iteratorFor(items);
+ };
+
+ if (support.iterable) {
+ Headers.prototype[Symbol.iterator] = Headers.prototype.entries;
+ }
+
+ function consumed(body) {
+ if (body.bodyUsed) {
+ return Promise.reject(new TypeError('Already read'));
+ }
+ body.bodyUsed = true;
+ }
+
+ function fileReaderReady(reader) {
+ return new Promise(function(resolve, reject) {
+ reader.onload = function() {
+ resolve(reader.result);
+ };
+ reader.onerror = function() {
+ reject(reader.error);
+ };
+ });
+ }
+
+ function readBlobAsArrayBuffer(blob) {
+ var reader = new FileReader();
+ var promise = fileReaderReady(reader);
+ reader.readAsArrayBuffer(blob);
+ return promise;
+ }
+
+ function readBlobAsText(blob) {
+ var reader = new FileReader();
+ var promise = fileReaderReady(reader);
+ reader.readAsText(blob);
+ return promise;
+ }
+
+ function readArrayBufferAsText(buf) {
+ var view = new Uint8Array(buf);
+ var chars = new Array(view.length);
+
+ for (var i = 0; i < view.length; i++) {
+ chars[i] = String.fromCharCode(view[i]);
+ }
+ return chars.join('');
+ }
+
+ function bufferClone(buf) {
+ if (buf.slice) {
+ return buf.slice(0);
+ } else {
+ var view = new Uint8Array(buf.byteLength);
+ view.set(new Uint8Array(buf));
+ return view.buffer;
+ }
+ }
+
+ function Body() {
+ this.bodyUsed = false;
+
+ this._initBody = function(body) {
+ this._bodyInit = body;
+ if (!body) {
+ this._bodyText = '';
+ } else if (typeof body === 'string') {
+ this._bodyText = body;
+ } else if (support.blob && Blob.prototype.isPrototypeOf(body)) {
+ this._bodyBlob = body;
+ } else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
+ this._bodyFormData = body;
+ } else if (
+ support.searchParams &&
+ URLSearchParams.prototype.isPrototypeOf(body)
+ ) {
+ this._bodyText = body.toString();
+ } else if (support.arrayBuffer && support.blob && isDataView(body)) {
+ this._bodyArrayBuffer = bufferClone(body.buffer);
+ // IE 10-11 can't handle a DataView body.
+ this._bodyInit = new Blob([this._bodyArrayBuffer]);
+ } else if (
+ support.arrayBuffer &&
+ (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body))
+ ) {
+ this._bodyArrayBuffer = bufferClone(body);
+ } else {
+ throw new Error('unsupported BodyInit type');
+ }
+
+ if (!this.headers.get('content-type')) {
+ if (typeof body === 'string') {
+ this.headers.set('content-type', 'text/plain;charset=UTF-8');
+ } else if (this._bodyBlob && this._bodyBlob.type) {
+ this.headers.set('content-type', this._bodyBlob.type);
+ } else if (
+ support.searchParams &&
+ URLSearchParams.prototype.isPrototypeOf(body)
+ ) {
+ this.headers.set(
+ 'content-type',
+ 'application/x-www-form-urlencoded;charset=UTF-8'
+ );
+ }
+ }
+ };
+
+ if (support.blob) {
+ this.blob = function() {
+ var rejected = consumed(this);
+ if (rejected) {
+ return rejected;
+ }
+
+ if (this._bodyBlob) {
+ return Promise.resolve(this._bodyBlob);
+ } else if (this._bodyArrayBuffer) {
+ return Promise.resolve(new Blob([this._bodyArrayBuffer]));
+ } else if (this._bodyFormData) {
+ throw new Error('could not read FormData body as blob');
+ } else {
+ return Promise.resolve(new Blob([this._bodyText]));
+ }
+ };
+
+ this.arrayBuffer = function() {
+ if (this._bodyArrayBuffer) {
+ return consumed(this) || Promise.resolve(this._bodyArrayBuffer);
+ } else {
+ return this.blob().then(readBlobAsArrayBuffer);
+ }
+ };
+ }
+
+ this.text = function() {
+ var rejected = consumed(this);
+ if (rejected) {
+ return rejected;
+ }
+
+ if (this._bodyBlob) {
+ return readBlobAsText(this._bodyBlob);
+ } else if (this._bodyArrayBuffer) {
+ return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer));
+ } else if (this._bodyFormData) {
+ throw new Error('could not read FormData body as text');
+ } else {
+ return Promise.resolve(this._bodyText);
+ }
+ };
+
+ if (support.formData) {
+ this.formData = function() {
+ return this.text().then(decode);
+ };
+ }
+
+ this.json = function() {
+ return this.text().then(JSON.parse);
+ };
+
+ return this;
+ }
+
+ // HTTP methods whose capitalization should be normalized
+ var methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PUT'];
+
+ function normalizeMethod(method) {
+ var upcased = method.toUpperCase();
+ return methods.indexOf(upcased) > -1 ? upcased : method;
+ }
+
+ function Request(input, options) {
+ options = options || {};
+ var body = options.body;
+
+ if (input instanceof Request) {
+ if (input.bodyUsed) {
+ throw new TypeError('Already read');
+ }
+ this.url = input.url;
+ this.credentials = input.credentials;
+ if (!options.headers) {
+ this.headers = new Headers(input.headers);
+ }
+ this.method = input.method;
+ this.mode = input.mode;
+ if (!body && input._bodyInit != null) {
+ body = input._bodyInit;
+ input.bodyUsed = true;
+ }
+ } else {
+ this.url = String(input);
+ }
+
+ this.credentials = options.credentials || this.credentials || 'omit';
+ if (options.headers || !this.headers) {
+ this.headers = new Headers(options.headers);
+ }
+ this.method = normalizeMethod(options.method || this.method || 'GET');
+ this.mode = options.mode || this.mode || null;
+ this.referrer = null;
+
+ if ((this.method === 'GET' || this.method === 'HEAD') && body) {
+ throw new TypeError('Body not allowed for GET or HEAD requests');
+ }
+ this._initBody(body);
+ }
+
+ Request.prototype.clone = function() {
+ return new Request(this, { body: this._bodyInit });
+ };
+
+ function decode(body) {
+ var form = new FormData();
+ body
+ .trim()
+ .split('&')
+ .forEach(function(bytes) {
+ if (bytes) {
+ var split = bytes.split('=');
+ var name = split.shift().replace(/\+/g, ' ');
+ var value = split.join('=').replace(/\+/g, ' ');
+ form.append(decodeURIComponent(name), decodeURIComponent(value));
+ }
+ });
+ return form;
+ }
+
+ function parseHeaders(rawHeaders) {
+ var headers = new Headers();
+ // Replace instances of \r\n and \n followed by at least one space or horizontal tab with a space
+ // https://tools.ietf.org/html/rfc7230#section-3.2
+ var preProcessedHeaders = rawHeaders.replace(/\r?\n[\t ]+/g, ' ');
+ preProcessedHeaders.split(/\r?\n/).forEach(function(line) {
+ var parts = line.split(':');
+ var key = parts.shift().trim();
+ if (key) {
+ var value = parts.join(':').trim();
+ headers.append(key, value);
+ }
+ });
+ return headers;
+ }
+
+ Body.call(Request.prototype);
+
+ function Response(bodyInit, options) {
+ if (!options) {
+ options = {};
+ }
+
+ this.type = 'default';
+ this.status = options.status === undefined ? 200 : options.status;
+ this.ok = this.status >= 200 && this.status < 300;
+ this.statusText = 'statusText' in options ? options.statusText : 'OK';
+ this.headers = new Headers(options.headers);
+ this.url = options.url || '';
+ this._initBody(bodyInit);
+ }
+
+ Body.call(Response.prototype);
+
+ Response.prototype.clone = function() {
+ return new Response(this._bodyInit, {
+ status: this.status,
+ statusText: this.statusText,
+ headers: new Headers(this.headers),
+ url: this.url
+ });
+ };
+
+ Response.error = function() {
+ var response = new Response(null, { status: 0, statusText: '' });
+ response.type = 'error';
+ return response;
+ };
+
+ var redirectStatuses = [301, 302, 303, 307, 308];
+
+ Response.redirect = function(url, status) {
+ if (redirectStatuses.indexOf(status) === -1) {
+ throw new RangeError('Invalid status code');
+ }
+
+ return new Response(null, { status: status, headers: { location: url } });
+ };
+
+ self.Headers = Headers;
+ self.Request = Request;
+ self.Response = Response;
+
+ self.fetch = function(input, init) {
+ return new Promise(function(resolve, reject) {
+ var request = new Request(input, init);
+ var xhr = new XMLHttpRequest();
+
+ xhr.onload = function() {
+ var options = {
+ status: xhr.status,
+ statusText: xhr.statusText,
+ headers: parseHeaders(xhr.getAllResponseHeaders() || '')
+ };
+ options.url =
+ 'responseURL' in xhr
+ ? xhr.responseURL
+ : options.headers.get('X-Request-URL');
+ var body = 'response' in xhr ? xhr.response : xhr.responseText;
+ resolve(new Response(body, options));
+ };
+
+ xhr.onerror = function() {
+ reject(new TypeError('Network request failed'));
+ };
+
+ xhr.ontimeout = function() {
+ reject(new TypeError('Network request failed'));
+ };
+
+ xhr.open(request.method, request.url, true);
+
+ if (request.credentials === 'include') {
+ xhr.withCredentials = true;
+ } else if (request.credentials === 'omit') {
+ xhr.withCredentials = false;
+ }
+
+ if ('responseType' in xhr && support.blob) {
+ xhr.responseType = 'blob';
+ }
+
+ request.headers.forEach(function(value, name) {
+ xhr.setRequestHeader(name, value);
+ });
+
+ xhr.send(
+ typeof request._bodyInit === 'undefined' ? null : request._bodyInit
+ );
+ });
+ };
+ self.fetch.polyfill = true;
+ })(typeof self !== 'undefined' ? self : this);
+ },
+ {}
+ ],
+ 16: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ var _main = _interopRequireDefault(_dereq_('./core/main'));
+ _dereq_('./core/constants');
+ _dereq_('./core/environment');
+ _dereq_('./core/error_helpers');
+ _dereq_('./core/helpers');
+ _dereq_('./core/legacy');
+ _dereq_('./core/preload');
+ _dereq_('./core/p5.Element');
+ _dereq_('./core/p5.Graphics');
+ _dereq_('./core/p5.Renderer');
+ _dereq_('./core/p5.Renderer2D');
+ _dereq_('./core/rendering');
+ _dereq_('./core/shim');
+ _dereq_('./core/structure');
+ _dereq_('./core/transform');
+ _dereq_('./core/shape/2d_primitives');
+ _dereq_('./core/shape/attributes');
+ _dereq_('./core/shape/curves');
+ _dereq_('./core/shape/vertex');
+
+ _dereq_('./color/color_conversion');
+ _dereq_('./color/creating_reading');
+ _dereq_('./color/p5.Color');
+ _dereq_('./color/setting');
+
+ _dereq_('./data/p5.TypedDict');
+ _dereq_('./data/local_storage.js');
+
+ _dereq_('./dom/dom');
+
+ _dereq_('./events/acceleration');
+ _dereq_('./events/keyboard');
+ _dereq_('./events/mouse');
+ _dereq_('./events/touch');
+
+ _dereq_('./image/filters');
+ _dereq_('./image/image');
+ _dereq_('./image/loading_displaying');
+ _dereq_('./image/p5.Image');
+ _dereq_('./image/pixels');
+
+ _dereq_('./io/files');
+ _dereq_('./io/p5.Table');
+ _dereq_('./io/p5.TableRow');
+ _dereq_('./io/p5.XML');
+
+ _dereq_('./math/calculation');
+ _dereq_('./math/math');
+ _dereq_('./math/noise');
+ _dereq_('./math/p5.Vector');
+ _dereq_('./math/random');
+ _dereq_('./math/trigonometry');
+
+ _dereq_('./typography/attributes');
+ _dereq_('./typography/loading_displaying');
+ _dereq_('./typography/p5.Font');
+
+ _dereq_('./utilities/array_functions');
+ _dereq_('./utilities/conversion');
+ _dereq_('./utilities/string_functions');
+ _dereq_('./utilities/time_date');
+
+ _dereq_('./webgl/3d_primitives');
+ _dereq_('./webgl/interaction');
+ _dereq_('./webgl/light');
+ _dereq_('./webgl/loading');
+ _dereq_('./webgl/material');
+ _dereq_('./webgl/p5.Camera');
+ _dereq_('./webgl/p5.Geometry');
+ _dereq_('./webgl/p5.Matrix');
+ _dereq_('./webgl/p5.RendererGL.Immediate');
+ _dereq_('./webgl/p5.RendererGL');
+ _dereq_('./webgl/p5.RendererGL.Retained');
+ _dereq_('./webgl/p5.Shader');
+ _dereq_('./webgl/p5.Texture');
+ _dereq_('./webgl/text');
+
+ _dereq_('./core/init');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } // core
+ // color
+ // data
+ // DOM
+ // events
+ // image
+ // io
+ // math
+ // typography
+ // utilities
+ // webgl
+ module.exports = _main.default;
+ },
+ {
+ './color/color_conversion': 17,
+ './color/creating_reading': 18,
+ './color/p5.Color': 19,
+ './color/setting': 20,
+ './core/constants': 21,
+ './core/environment': 22,
+ './core/error_helpers': 23,
+ './core/helpers': 24,
+ './core/init': 25,
+ './core/legacy': 26,
+ './core/main': 27,
+ './core/p5.Element': 28,
+ './core/p5.Graphics': 29,
+ './core/p5.Renderer': 30,
+ './core/p5.Renderer2D': 31,
+ './core/preload': 32,
+ './core/rendering': 33,
+ './core/shape/2d_primitives': 34,
+ './core/shape/attributes': 35,
+ './core/shape/curves': 36,
+ './core/shape/vertex': 37,
+ './core/shim': 38,
+ './core/structure': 39,
+ './core/transform': 40,
+ './data/local_storage.js': 41,
+ './data/p5.TypedDict': 42,
+ './dom/dom': 43,
+ './events/acceleration': 44,
+ './events/keyboard': 45,
+ './events/mouse': 46,
+ './events/touch': 47,
+ './image/filters': 48,
+ './image/image': 49,
+ './image/loading_displaying': 50,
+ './image/p5.Image': 51,
+ './image/pixels': 52,
+ './io/files': 53,
+ './io/p5.Table': 54,
+ './io/p5.TableRow': 55,
+ './io/p5.XML': 56,
+ './math/calculation': 57,
+ './math/math': 58,
+ './math/noise': 59,
+ './math/p5.Vector': 60,
+ './math/random': 61,
+ './math/trigonometry': 62,
+ './typography/attributes': 63,
+ './typography/loading_displaying': 64,
+ './typography/p5.Font': 65,
+ './utilities/array_functions': 66,
+ './utilities/conversion': 67,
+ './utilities/string_functions': 68,
+ './utilities/time_date': 69,
+ './webgl/3d_primitives': 70,
+ './webgl/interaction': 71,
+ './webgl/light': 72,
+ './webgl/loading': 73,
+ './webgl/material': 74,
+ './webgl/p5.Camera': 75,
+ './webgl/p5.Geometry': 76,
+ './webgl/p5.Matrix': 77,
+ './webgl/p5.RendererGL': 80,
+ './webgl/p5.RendererGL.Immediate': 78,
+ './webgl/p5.RendererGL.Retained': 79,
+ './webgl/p5.Shader': 81,
+ './webgl/p5.Texture': 82,
+ './webgl/text': 83
+ }
+ ],
+ 17: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Color
+ * @submodule Color Conversion
+ * @for p5
+ * @requires core
+ */ /**
+ * Conversions adapted from .
+ *
+ * In these functions, hue is always in the range [0, 1], just like all other
+ * components are in the range [0, 1]. 'Brightness' and 'value' are used
+ * interchangeably.
+ */ _main.default.ColorConversion = {};
+ /**
+ * Convert an HSBA array to HSLA.
+ */ _main.default.ColorConversion._hsbaToHSLA = function(hsba) {
+ var hue = hsba[0];
+ var sat = hsba[1];
+ var val = hsba[2]; // Calculate lightness.
+ var li = (2 - sat) * val / 2; // Convert saturation.
+ if (li !== 0) {
+ if (li === 1) {
+ sat = 0;
+ } else if (li < 0.5) {
+ sat = sat / (2 - sat);
+ } else {
+ sat = sat * val / (2 - li * 2);
+ }
+ }
+
+ // Hue and alpha stay the same.
+ return [hue, sat, li, hsba[3]];
+ };
+
+ /**
+ * Convert an HSBA array to RGBA.
+ */
+ _main.default.ColorConversion._hsbaToRGBA = function(hsba) {
+ var hue = hsba[0] * 6; // We will split hue into 6 sectors.
+ var sat = hsba[1];
+ var val = hsba[2];
+
+ var RGBA = [];
+
+ if (sat === 0) {
+ RGBA = [val, val, val, hsba[3]]; // Return early if grayscale.
+ } else {
+ var sector = Math.floor(hue);
+ var tint1 = val * (1 - sat);
+ var tint2 = val * (1 - sat * (hue - sector));
+ var tint3 = val * (1 - sat * (1 + sector - hue));
+ var red, green, blue;
+ if (sector === 1) {
+ // Yellow to green.
+ red = tint2;
+ green = val;
+ blue = tint1;
+ } else if (sector === 2) {
+ // Green to cyan.
+ red = tint1;
+ green = val;
+ blue = tint3;
+ } else if (sector === 3) {
+ // Cyan to blue.
+ red = tint1;
+ green = tint2;
+ blue = val;
+ } else if (sector === 4) {
+ // Blue to magenta.
+ red = tint3;
+ green = tint1;
+ blue = val;
+ } else if (sector === 5) {
+ // Magenta to red.
+ red = val;
+ green = tint1;
+ blue = tint2;
+ } else {
+ // Red to yellow (sector could be 0 or 6).
+ red = val;
+ green = tint3;
+ blue = tint1;
+ }
+ RGBA = [red, green, blue, hsba[3]];
+ }
+
+ return RGBA;
+ };
+
+ /**
+ * Convert an HSLA array to HSBA.
+ */
+ _main.default.ColorConversion._hslaToHSBA = function(hsla) {
+ var hue = hsla[0];
+ var sat = hsla[1];
+ var li = hsla[2];
+
+ // Calculate brightness.
+ var val;
+ if (li < 0.5) {
+ val = (1 + sat) * li;
+ } else {
+ val = li + sat - li * sat;
+ }
+
+ // Convert saturation.
+ sat = 2 * (val - li) / val;
+
+ // Hue and alpha stay the same.
+ return [hue, sat, val, hsla[3]];
+ };
+
+ /**
+ * Convert an HSLA array to RGBA.
+ *
+ * We need to change basis from HSLA to something that can be more easily be
+ * projected onto RGBA. We will choose hue and brightness as our first two
+ * components, and pick a convenient third one ('zest') so that we don't need
+ * to calculate formal HSBA saturation.
+ */
+ _main.default.ColorConversion._hslaToRGBA = function(hsla) {
+ var hue = hsla[0] * 6; // We will split hue into 6 sectors.
+ var sat = hsla[1];
+ var li = hsla[2];
+
+ var RGBA = [];
+
+ if (sat === 0) {
+ RGBA = [li, li, li, hsla[3]]; // Return early if grayscale.
+ } else {
+ // Calculate brightness.
+ var val;
+ if (li < 0.5) {
+ val = (1 + sat) * li;
+ } else {
+ val = li + sat - li * sat;
+ }
+
+ // Define zest.
+ var zest = 2 * li - val;
+
+ // Implement projection (project onto green by default).
+ var hzvToRGB = function hzvToRGB(hue, zest, val) {
+ if (hue < 0) {
+ // Hue must wrap to allow projection onto red and blue.
+ hue += 6;
+ } else if (hue >= 6) {
+ hue -= 6;
+ }
+ if (hue < 1) {
+ // Red to yellow (increasing green).
+ return zest + (val - zest) * hue;
+ } else if (hue < 3) {
+ // Yellow to cyan (greatest green).
+ return val;
+ } else if (hue < 4) {
+ // Cyan to blue (decreasing green).
+ return zest + (val - zest) * (4 - hue);
+ } else {
+ // Blue to red (least green).
+ return zest;
+ }
+ };
+
+ // Perform projections, offsetting hue as necessary.
+ RGBA = [
+ hzvToRGB(hue + 2, zest, val),
+ hzvToRGB(hue, zest, val),
+ hzvToRGB(hue - 2, zest, val),
+ hsla[3]
+ ];
+ }
+
+ return RGBA;
+ };
+
+ /**
+ * Convert an RGBA array to HSBA.
+ */
+ _main.default.ColorConversion._rgbaToHSBA = function(rgba) {
+ var red = rgba[0];
+ var green = rgba[1];
+ var blue = rgba[2];
+
+ var val = Math.max(red, green, blue);
+ var chroma = val - Math.min(red, green, blue);
+
+ var hue, sat;
+ if (chroma === 0) {
+ // Return early if grayscale.
+ hue = 0;
+ sat = 0;
+ } else {
+ sat = chroma / val;
+ if (red === val) {
+ // Magenta to yellow.
+ hue = (green - blue) / chroma;
+ } else if (green === val) {
+ // Yellow to cyan.
+ hue = 2 + (blue - red) / chroma;
+ } else if (blue === val) {
+ // Cyan to magenta.
+ hue = 4 + (red - green) / chroma;
+ }
+ if (hue < 0) {
+ // Confine hue to the interval [0, 1).
+ hue += 6;
+ } else if (hue >= 6) {
+ hue -= 6;
+ }
+ }
+
+ return [hue / 6, sat, val, rgba[3]];
+ };
+
+ /**
+ * Convert an RGBA array to HSLA.
+ */
+ _main.default.ColorConversion._rgbaToHSLA = function(rgba) {
+ var red = rgba[0];
+ var green = rgba[1];
+ var blue = rgba[2];
+
+ var val = Math.max(red, green, blue);
+ var min = Math.min(red, green, blue);
+ var li = val + min; // We will halve this later.
+ var chroma = val - min;
+
+ var hue, sat;
+ if (chroma === 0) {
+ // Return early if grayscale.
+ hue = 0;
+ sat = 0;
+ } else {
+ if (li < 1) {
+ sat = chroma / li;
+ } else {
+ sat = chroma / (2 - li);
+ }
+ if (red === val) {
+ // Magenta to yellow.
+ hue = (green - blue) / chroma;
+ } else if (green === val) {
+ // Yellow to cyan.
+ hue = 2 + (blue - red) / chroma;
+ } else if (blue === val) {
+ // Cyan to magenta.
+ hue = 4 + (red - green) / chroma;
+ }
+ if (hue < 0) {
+ // Confine hue to the interval [0, 1).
+ hue += 6;
+ } else if (hue >= 6) {
+ hue -= 6;
+ }
+ }
+
+ return [hue / 6, sat, li / 2, rgba[3]];
+ };
+ var _default = _main.default.ColorConversion;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 18: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Color');
+ _dereq_('../core/error_helpers');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ /**
+ * Extracts the alpha value from a color or pixel array.
+ *
+ * @method alpha
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the alpha value
+ * @example
+ *
+ *
+ * noStroke();
+ * let c = color(0, 126, 255, 102);
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ * let value = alpha(c); // Sets 'value' to 102
+ * fill(value);
+ * rect(50, 15, 35, 70);
+ *
+ *
+ *
+ * @alt
+ * Left half of canvas light blue and right half light charcoal grey.
+ * Left half of canvas light purple and right half a royal blue.
+ * Left half of canvas salmon pink and the right half white.
+ * Yellow rect in middle right of canvas, with 55 pixel width and height.
+ * Yellow ellipse in top left canvas, black ellipse in bottom right,both 80x80.
+ * Bright fuchsia rect in middle of canvas, 60 pixel width and height.
+ * Two bright green rects on opposite sides of the canvas, both 45x80.
+ * Four blue rects in each corner of the canvas, each are 35x35.
+ * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
+ * Dark green rect on left and light green rect on right of canvas, both 45x80.
+ * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
+ * blue rect on left and green on right, both with black outlines & 35x60.
+ * salmon pink rect on left and black on right, both 35x60.
+ * 4 rects, tan, brown, brownish purple and purple, with white outlines & 20x60.
+ * light pastel green rect on left and dark grey rect on right, both 35x60.
+ * yellow rect on left and red rect on right, both with black outlines & 35x60.
+ * grey canvas
+ * deep pink rect on left and grey rect on right, both 35x60.
+ */ _main.default.prototype.alpha = function(c) {
+ _main.default._validateParameters('alpha', arguments);
+ return this.color(c)._getAlpha();
+ };
+
+ /**
+ * Extracts the blue value from a color or pixel array.
+ *
+ * @method blue
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the blue value
+ * @example
+ *
+ *
+ * let c = color(175, 100, 220); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let blueValue = blue(c); // Get blue in 'c'
+ * print(blueValue); // Prints "220.0"
+ * fill(0, 0, blueValue); // Use 'blueValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ *
+ * @alt
+ * Left half of canvas light purple and right half a royal blue.
+ *
+ */
+ _main.default.prototype.blue = function(c) {
+ _main.default._validateParameters('blue', arguments);
+ return this.color(c)._getBlue();
+ };
+
+ /**
+ * Extracts the HSB brightness value from a color or pixel array.
+ *
+ * @method brightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the brightness value
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = brightness(c); // Sets 'value' to 255
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color('hsb(60, 100%, 50%)');
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = brightness(c); // A 'value' of 50% is 127.5
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ * @alt
+ * Left half of canvas salmon pink and the right half white.
+ * Left half of canvas yellow at half brightness and the right gray .
+ *
+ */
+ _main.default.prototype.brightness = function(c) {
+ _main.default._validateParameters('brightness', arguments);
+ return this.color(c)._getBrightness();
+ };
+
+ /**
+ * Creates colors for storing in variables of the color datatype. The
+ * parameters are interpreted as RGB or HSB values depending on the
+ * current colorMode(). The default mode is RGB values from 0 to 255
+ * and, therefore, the function call color(255, 204, 0) will return a
+ * bright yellow color.
+ *
+ * Note that if only one value is provided to color(), it will be interpreted
+ * as a grayscale value. Add a second value, and it will be used for alpha
+ * transparency. When three values are specified, they are interpreted as
+ * either RGB or HSB values. Adding a fourth value applies alpha
+ * transparency.
+ *
+ * If a single string argument is provided, RGB, RGBA and Hex CSS color
+ * strings and all named color strings are supported. In this case, an alpha
+ * number value as a second argument is not supported, the RGBA form should be
+ * used.
+ *
+ * @method color
+ * @param {Number} gray number specifying value between white
+ * and black.
+ * @param {Number} [alpha] alpha value relative to current color range
+ * (default is 0-255)
+ * @return {p5.Color} resulting color
+ *
+ * @example
+ *
+ *
+ * let c = color(255, 204, 0); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * noStroke(); // Don't draw a stroke around shapes
+ * rect(30, 20, 55, 55); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * let c = color(255, 204, 0); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * noStroke(); // Don't draw a stroke around shapes
+ * ellipse(25, 25, 80, 80); // Draw left circle
+ *
+ * // Using only one value with color()
+ * // generates a grayscale value.
+ * c = color(65); // Update 'c' with grayscale value
+ * fill(c); // Use updated 'c' as fill color
+ * ellipse(75, 75, 80, 80); // Draw right circle
+ *
+ *
+ *
+ *
+ *
+ * // Named SVG & CSS colors may be used,
+ * let c = color('magenta');
+ * fill(c); // Use 'c' as fill color
+ * noStroke(); // Don't draw a stroke around shapes
+ * rect(20, 20, 60, 60); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * // as can hex color codes:
+ * noStroke(); // Don't draw a stroke around shapes
+ * let c = color('#0f0');
+ * fill(c); // Use 'c' as fill color
+ * rect(0, 10, 45, 80); // Draw rectangle
+ *
+ * c = color('#00ff00');
+ * fill(c); // Use updated 'c' as fill color
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * // RGB and RGBA color strings are also supported:
+ * // these all set to the same color (solid blue)
+ * let c;
+ * noStroke(); // Don't draw a stroke around shapes
+ * c = color('rgb(0,0,255)');
+ * fill(c); // Use 'c' as fill color
+ * rect(10, 10, 35, 35); // Draw rectangle
+ *
+ * c = color('rgb(0%, 0%, 100%)');
+ * fill(c); // Use updated 'c' as fill color
+ * rect(55, 10, 35, 35); // Draw rectangle
+ *
+ * c = color('rgba(0, 0, 255, 1)');
+ * fill(c); // Use updated 'c' as fill color
+ * rect(10, 55, 35, 35); // Draw rectangle
+ *
+ * c = color('rgba(0%, 0%, 100%, 1)');
+ * fill(c); // Use updated 'c' as fill color
+ * rect(55, 55, 35, 35); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * // HSL color is also supported and can be specified
+ * // by value
+ * let c;
+ * noStroke(); // Don't draw a stroke around shapes
+ * c = color('hsl(160, 100%, 50%)');
+ * fill(c); // Use 'c' as fill color
+ * rect(0, 10, 45, 80); // Draw rectangle
+ *
+ * c = color('hsla(160, 100%, 50%, 0.5)');
+ * fill(c); // Use updated 'c' as fill color
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * // HSB color is also supported and can be specified
+ * // by value
+ * let c;
+ * noStroke(); // Don't draw a stroke around shapes
+ * c = color('hsb(160, 100%, 50%)');
+ * fill(c); // Use 'c' as fill color
+ * rect(0, 10, 45, 80); // Draw rectangle
+ *
+ * c = color('hsba(160, 100%, 50%, 0.5)');
+ * fill(c); // Use updated 'c' as fill color
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * let c; // Declare color 'c'
+ * noStroke(); // Don't draw a stroke around shapes
+ *
+ * // If no colorMode is specified, then the
+ * // default of RGB with scale of 0-255 is used.
+ * c = color(50, 55, 100); // Create a color for 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(0, 10, 45, 80); // Draw left rect
+ *
+ * colorMode(HSB, 100); // Use HSB with scale of 0-100
+ * c = color(50, 55, 100); // Update 'c' with new color
+ * fill(c); // Use updated 'c' as fill color
+ * rect(55, 10, 45, 80); // Draw right rect
+ *
+ *
+ *
+ * @alt
+ * Yellow rect in middle right of canvas, with 55 pixel width and height.
+ * Yellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.
+ * Bright fuchsia rect in middle of canvas, 60 pixel width and height.
+ * Two bright green rects on opposite sides of the canvas, both 45x80.
+ * Four blue rects in each corner of the canvas, each are 35x35.
+ * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
+ * Dark green rect on left and lighter green rect on right of canvas, both 45x80.
+ * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
+ *
+ */
+ /**
+ * @method color
+ * @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]
+ * @return {p5.Color}
+ */
+
+ /**
+ * @method color
+ * @param {String} value a color string
+ * @return {p5.Color}
+ */
+ /**
+ * @method color
+ * @param {Number[]} values an array containing the red,green,blue &
+ * and alpha components of the color
+ * @return {p5.Color}
+ */
+ /**
+ * @method color
+ * @param {p5.Color} color
+ * @return {p5.Color}
+ */
+
+ _main.default.prototype.color = function() {
+ _main.default._validateParameters('color', arguments);
+ if (arguments[0] instanceof _main.default.Color) {
+ return arguments[0]; // Do nothing if argument is already a color object.
+ }
+
+ var args = arguments[0] instanceof Array ? arguments[0] : arguments;
+ return new _main.default.Color(this, args);
+ };
+
+ /**
+ * Extracts the green value from a color or pixel array.
+ *
+ * @method green
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the green value
+ * @example
+ *
+ *
+ * let c = color(20, 75, 200); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let greenValue = green(c); // Get green in 'c'
+ * print(greenValue); // Print "75.0"
+ * fill(0, greenValue, 0); // Use 'greenValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ *
+ * @alt
+ * blue rect on left and green on right, both with black outlines & 35x60.
+ *
+ */
+
+ _main.default.prototype.green = function(c) {
+ _main.default._validateParameters('green', arguments);
+ return this.color(c)._getGreen();
+ };
+
+ /**
+ * Extracts the hue value from a color or pixel array.
+ *
+ * Hue exists in both HSB and HSL. This function will return the
+ * HSB-normalized hue when supplied with an HSB color object (or when supplied
+ * with a pixel array while the color mode is HSB), but will default to the
+ * HSL-normalized hue otherwise. (The values will only be different if the
+ * maximum hue setting for each system is different.)
+ *
+ * @method hue
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the hue
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = hue(c); // Sets 'value' to "0"
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ * @alt
+ * salmon pink rect on left and black on right, both 35x60.
+ *
+ */
+
+ _main.default.prototype.hue = function(c) {
+ _main.default._validateParameters('hue', arguments);
+ return this.color(c)._getHue();
+ };
+
+ /**
+ * Blends two colors to find a third color somewhere between them. The amt
+ * parameter is the amount to interpolate between the two values where 0.0
+ * equal to the first color, 0.1 is very near the first color, 0.5 is halfway
+ * in between, etc. An amount below 0 will be treated as 0. Likewise, amounts
+ * above 1 will be capped at 1. This is different from the behavior of lerp(),
+ * but necessary because otherwise numbers outside the range will produce
+ * strange and unexpected colors.
+ *
+ * The way that colours are interpolated depends on the current color mode.
+ *
+ * @method lerpColor
+ * @param {p5.Color} c1 interpolate from this color
+ * @param {p5.Color} c2 interpolate to this color
+ * @param {Number} amt number between 0 and 1
+ * @return {p5.Color} interpolated color
+ * @example
+ *
+ *
+ * colorMode(RGB);
+ * stroke(255);
+ * background(51);
+ * let from = color(218, 165, 32);
+ * let to = color(72, 61, 139);
+ * colorMode(RGB); // Try changing to HSB.
+ * let interA = lerpColor(from, to, 0.33);
+ * let interB = lerpColor(from, to, 0.66);
+ * fill(from);
+ * rect(10, 20, 20, 60);
+ * fill(interA);
+ * rect(30, 20, 20, 60);
+ * fill(interB);
+ * rect(50, 20, 20, 60);
+ * fill(to);
+ * rect(70, 20, 20, 60);
+ *
+ *
+ *
+ * @alt
+ * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60
+ *
+ */
+
+ _main.default.prototype.lerpColor = function(c1, c2, amt) {
+ _main.default._validateParameters('lerpColor', arguments);
+ var mode = this._colorMode;
+ var maxes = this._colorMaxes;
+ var l0, l1, l2, l3;
+ var fromArray, toArray;
+
+ if (mode === constants.RGB) {
+ fromArray = c1.levels.map(function(level) {
+ return level / 255;
+ });
+ toArray = c2.levels.map(function(level) {
+ return level / 255;
+ });
+ } else if (mode === constants.HSB) {
+ c1._getBrightness(); // Cache hsba so it definitely exists.
+ c2._getBrightness();
+ fromArray = c1.hsba;
+ toArray = c2.hsba;
+ } else if (mode === constants.HSL) {
+ c1._getLightness(); // Cache hsla so it definitely exists.
+ c2._getLightness();
+ fromArray = c1.hsla;
+ toArray = c2.hsla;
+ } else {
+ throw new Error(''.concat(mode, 'cannot be used for interpolation.'));
+ }
+
+ // Prevent extrapolation.
+ amt = Math.max(Math.min(amt, 1), 0);
+
+ // Define lerp here itself if user isn't using math module.
+ // Maintains the definition as found in math/calculation.js
+ if (typeof this.lerp === 'undefined') {
+ this.lerp = function(start, stop, amt) {
+ return amt * (stop - start) + start;
+ };
+ }
+
+ // Perform interpolation.
+ l0 = this.lerp(fromArray[0], toArray[0], amt);
+ l1 = this.lerp(fromArray[1], toArray[1], amt);
+ l2 = this.lerp(fromArray[2], toArray[2], amt);
+ l3 = this.lerp(fromArray[3], toArray[3], amt);
+
+ // Scale components.
+ l0 *= maxes[mode][0];
+ l1 *= maxes[mode][1];
+ l2 *= maxes[mode][2];
+ l3 *= maxes[mode][3];
+
+ return this.color(l0, l1, l2, l3);
+ };
+
+ /**
+ * Extracts the HSL lightness value from a color or pixel array.
+ *
+ * @method lightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the lightness
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(HSL);
+ * let c = color(156, 100, 50, 1);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = lightness(c); // Sets 'value' to 50
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ * @alt
+ * light pastel green rect on left and dark grey rect on right, both 35x60.
+ *
+ */
+ _main.default.prototype.lightness = function(c) {
+ _main.default._validateParameters('lightness', arguments);
+ return this.color(c)._getLightness();
+ };
+
+ /**
+ * Extracts the red value from a color or pixel array.
+ *
+ * @method red
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the red value
+ * @example
+ *
+ *
+ * let c = color(255, 204, 0); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let redValue = red(c); // Get red in 'c'
+ * print(redValue); // Print "255.0"
+ * fill(redValue, 0, 0); // Use 'redValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ *
+ *
+ *
+ * colorMode(RGB, 255); // Sets the range for red, green, and blue to 255
+ * let c = color(127, 255, 0);
+ * colorMode(RGB, 1); // Sets the range for red, green, and blue to 1
+ * let myColor = red(c);
+ * print(myColor); // 0.4980392156862745
+ *
+ *
+ *
+ * @alt
+ * yellow rect on left and red rect on right, both with black outlines and 35x60.
+ * grey canvas
+ */
+ _main.default.prototype.red = function(c) {
+ _main.default._validateParameters('red', arguments);
+ return this.color(c)._getRed();
+ };
+
+ /**
+ * Extracts the saturation value from a color or pixel array.
+ *
+ * Saturation is scaled differently in HSB and HSL. This function will return
+ * the HSB saturation when supplied with an HSB color object (or when supplied
+ * with a pixel array while the color mode is HSB), but will default to the
+ * HSL saturation otherwise.
+ *
+ * @method saturation
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the saturation value
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = saturation(c); // Sets 'value' to 126
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ * @alt
+ *deep pink rect on left and grey rect on right, both 35x60.
+ *
+ */
+
+ _main.default.prototype.saturation = function(c) {
+ _main.default._validateParameters('saturation', arguments);
+ return this.color(c)._getSaturation();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 21,
+ '../core/error_helpers': 23,
+ '../core/main': 27,
+ './p5.Color': 19
+ }
+ ],
+ 19: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _color_conversion = _interopRequireDefault(_dereq_('./color_conversion'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ * @requires color_conversion
+ */ /**
+ * Each color stores the color mode and level maxes that applied at the
+ * time of its construction. These are used to interpret the input arguments
+ * (at construction and later for that instance of color) and to format the
+ * output e.g. when saturation() is requested.
+ *
+ * Internally we store an array representing the ideal RGBA values in floating
+ * point form, normalized from 0 to 1. From this we calculate the closest
+ * screen color (RGBA levels from 0 to 255) and expose this to the renderer.
+ *
+ * We also cache normalized, floating point components of the color in various
+ * representations as they are calculated. This is done to prevent repeating a
+ * conversion that has already been performed.
+ *
+ * @class p5.Color
+ */ _main.default.Color = function(pInst, vals) {
+ // Record color mode and maxes at time of construction.
+ this._storeModeAndMaxes(pInst._colorMode, pInst._colorMaxes); // Calculate normalized RGBA values.
+ if (
+ this.mode !== constants.RGB &&
+ this.mode !== constants.HSL &&
+ this.mode !== constants.HSB
+ ) {
+ throw new Error(''.concat(this.mode, ' is an invalid colorMode.'));
+ } else {
+ this._array = _main.default.Color._parseInputs.apply(this, vals);
+ }
+
+ // Expose closest screen color.
+ this._calculateLevels();
+ return this;
+ };
+
+ /**
+ * This function returns the color formatted as a string. This can be useful
+ * for debugging, or for using p5.js with other libraries.
+ * @method toString
+ * @param {String} [format] How the color string will be formatted.
+ * Leaving this empty formats the string as rgba(r, g, b, a).
+ * '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.
+ * 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.
+ * 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.
+ * 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
+ * @return {String} the formatted string
+ * @example
+ *
+ *
+ * let myColor;
+ * function setup() {
+ * createCanvas(200, 200);
+ * stroke(255);
+ * myColor = color(100, 100, 250);
+ * fill(myColor);
+ * }
+ *
+ * function draw() {
+ * rotate(HALF_PI);
+ * text(myColor.toString(), 0, -5);
+ * text(myColor.toString('#rrggbb'), 0, -30);
+ * text(myColor.toString('rgba%'), 0, -55);
+ * }
+ *
+ *
+ *
+ * @alt
+ * canvas with text representation of color
+ */
+ _main.default.Color.prototype.toString = function(format) {
+ var a = this.levels;
+ var f = this._array;
+ var alpha = f[3]; // String representation uses normalized alpha
+
+ switch (format) {
+ case '#rrggbb':
+ return '#'.concat(
+ a[0] < 16 ? '0'.concat(a[0].toString(16)) : a[0].toString(16),
+ a[1] < 16 ? '0'.concat(a[1].toString(16)) : a[1].toString(16),
+ a[2] < 16 ? '0'.concat(a[2].toString(16)) : a[2].toString(16)
+ );
+
+ case '#rrggbbaa':
+ return '#'.concat(
+ a[0] < 16 ? '0'.concat(a[0].toString(16)) : a[0].toString(16),
+ a[1] < 16 ? '0'.concat(a[1].toString(16)) : a[1].toString(16),
+ a[2] < 16 ? '0'.concat(a[2].toString(16)) : a[2].toString(16),
+ a[3] < 16 ? '0'.concat(a[2].toString(16)) : a[3].toString(16)
+ );
+
+ case '#rgb':
+ return '#'.concat(
+ Math.round(f[0] * 15).toString(16),
+ Math.round(f[1] * 15).toString(16),
+ Math.round(f[2] * 15).toString(16)
+ );
+
+ case '#rgba':
+ return '#'.concat(
+ Math.round(f[0] * 15).toString(16),
+ Math.round(f[1] * 15).toString(16),
+ Math.round(f[2] * 15).toString(16),
+ Math.round(f[3] * 15).toString(16)
+ );
+
+ case 'rgb':
+ return 'rgb('.concat(a[0], ', ', a[1], ', ', a[2], ')');
+
+ case 'rgb%':
+ return 'rgb('.concat(
+ (100 * f[0]).toPrecision(3),
+ '%, ',
+ (100 * f[1]).toPrecision(3),
+ '%, ',
+ (100 * f[2]).toPrecision(3),
+ '%)'
+ );
+
+ case 'rgba%':
+ return 'rgba('.concat(
+ (100 * f[0]).toPrecision(3),
+ '%, ',
+ (100 * f[1]).toPrecision(3),
+ '%, ',
+ (100 * f[2]).toPrecision(3),
+ '%, ',
+ (100 * f[3]).toPrecision(3),
+ '%)'
+ );
+
+ case 'hsb':
+ case 'hsv':
+ if (!this.hsba)
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsb('.concat(
+ this.hsba[0] * this.maxes[constants.HSB][0],
+ ', ',
+ this.hsba[1] * this.maxes[constants.HSB][1],
+ ', ',
+ this.hsba[2] * this.maxes[constants.HSB][2],
+ ')'
+ );
+
+ case 'hsb%':
+ case 'hsv%':
+ if (!this.hsba)
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsb('.concat(
+ (100 * this.hsba[0]).toPrecision(3),
+ '%, ',
+ (100 * this.hsba[1]).toPrecision(3),
+ '%, ',
+ (100 * this.hsba[2]).toPrecision(3),
+ '%)'
+ );
+
+ case 'hsba':
+ case 'hsva':
+ if (!this.hsba)
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsba('.concat(
+ this.hsba[0] * this.maxes[constants.HSB][0],
+ ', ',
+ this.hsba[1] * this.maxes[constants.HSB][1],
+ ', ',
+ this.hsba[2] * this.maxes[constants.HSB][2],
+ ', ',
+ alpha,
+ ')'
+ );
+
+ case 'hsba%':
+ case 'hsva%':
+ if (!this.hsba)
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsba('.concat(
+ (100 * this.hsba[0]).toPrecision(3),
+ '%, ',
+ (100 * this.hsba[1]).toPrecision(3),
+ '%, ',
+ (100 * this.hsba[2]).toPrecision(3),
+ '%, ',
+ (100 * alpha).toPrecision(3),
+ '%)'
+ );
+
+ case 'hsl':
+ if (!this.hsla)
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat(
+ this.hsla[0] * this.maxes[constants.HSL][0],
+ ', ',
+ this.hsla[1] * this.maxes[constants.HSL][1],
+ ', ',
+ this.hsla[2] * this.maxes[constants.HSL][2],
+ ')'
+ );
+
+ case 'hsl%':
+ if (!this.hsla)
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat(
+ (100 * this.hsla[0]).toPrecision(3),
+ '%, ',
+ (100 * this.hsla[1]).toPrecision(3),
+ '%, ',
+ (100 * this.hsla[2]).toPrecision(3),
+ '%)'
+ );
+
+ case 'hsla':
+ if (!this.hsla)
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsla('.concat(
+ this.hsla[0] * this.maxes[constants.HSL][0],
+ ', ',
+ this.hsla[1] * this.maxes[constants.HSL][1],
+ ', ',
+ this.hsla[2] * this.maxes[constants.HSL][2],
+ ', ',
+ alpha,
+ ')'
+ );
+
+ case 'hsla%':
+ if (!this.hsla)
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat(
+ (100 * this.hsla[0]).toPrecision(3),
+ '%, ',
+ (100 * this.hsla[1]).toPrecision(3),
+ '%, ',
+ (100 * this.hsla[2]).toPrecision(3),
+ '%, ',
+ (100 * alpha).toPrecision(3),
+ '%)'
+ );
+
+ case 'rgba':
+ default:
+ return 'rgba('.concat(a[0], ',', a[1], ',', a[2], ',', alpha, ')');
+ }
+ };
+
+ /**
+ * The setRed function sets the red component of a color.
+ * The range depends on your color mode, in the default RGB mode it's between 0 and 255.
+ * @method setRed
+ * @param {Number} red the new red value
+ * @example
+ *
+ *
+ * let backgroundColor;
+ *
+ * function setup() {
+ * backgroundColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ *
+ * @alt
+ * canvas with gradually changing background color
+ */
+ _main.default.Color.prototype.setRed = function(new_red) {
+ this._array[0] = new_red / this.maxes[constants.RGB][0];
+ this._calculateLevels();
+ };
+
+ /**
+ * The setGreen function sets the green component of a color.
+ * The range depends on your color mode, in the default RGB mode it's between 0 and 255.
+ * @method setGreen
+ * @param {Number} green the new green value
+ * @example
+ *
+ *
+ * let backgroundColor;
+ *
+ * function setup() {
+ * backgroundColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ *
+ * @alt
+ * canvas with gradually changing background color
+ **/
+ _main.default.Color.prototype.setGreen = function(new_green) {
+ this._array[1] = new_green / this.maxes[constants.RGB][1];
+ this._calculateLevels();
+ };
+
+ /**
+ * The setBlue function sets the blue component of a color.
+ * The range depends on your color mode, in the default RGB mode it's between 0 and 255.
+ * @method setBlue
+ * @param {Number} blue the new blue value
+ * @example
+ *
+ *
+ * let backgroundColor;
+ *
+ * function setup() {
+ * backgroundColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ *
+ * @alt
+ * canvas with gradually changing background color
+ **/
+ _main.default.Color.prototype.setBlue = function(new_blue) {
+ this._array[2] = new_blue / this.maxes[constants.RGB][2];
+ this._calculateLevels();
+ };
+
+ /**
+ * The setAlpha function sets the transparency (alpha) value of a color.
+ * The range depends on your color mode, in the default RGB mode it's between 0 and 255.
+ * @method setAlpha
+ * @param {Number} alpha the new alpha value
+ * @example
+ *
+ *
+ * let squareColor;
+ *
+ * function setup() {
+ * ellipseMode(CORNERS);
+ * strokeWeight(4);
+ * squareColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ *
+ * noFill();
+ * stroke(0);
+ * ellipse(10, 10, width - 10, height - 10);
+ *
+ * squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
+ * fill(squareColor);
+ * noStroke();
+ * rect(13, 13, width - 26, height - 26);
+ * }
+ *
+ *
+ *
+ * @alt
+ * circle behind a square with gradually changing opacity
+ **/
+ _main.default.Color.prototype.setAlpha = function(new_alpha) {
+ this._array[3] = new_alpha / this.maxes[this.mode][3];
+ this._calculateLevels();
+ };
+
+ // calculates and stores the closest screen levels
+ _main.default.Color.prototype._calculateLevels = function() {
+ var array = this._array;
+ // (loop backwards for performance)
+ var levels = (this.levels = new Array(array.length));
+ for (var i = array.length - 1; i >= 0; --i) {
+ levels[i] = Math.round(array[i] * 255);
+ }
+ };
+
+ _main.default.Color.prototype._getAlpha = function() {
+ return this._array[3] * this.maxes[this.mode][3];
+ };
+
+ // stores the color mode and maxes in this instance of Color
+ // for later use (by _parseInputs())
+ _main.default.Color.prototype._storeModeAndMaxes = function(new_mode, new_maxes) {
+ this.mode = new_mode;
+ this.maxes = new_maxes;
+ };
+
+ _main.default.Color.prototype._getMode = function() {
+ return this.mode;
+ };
+
+ _main.default.Color.prototype._getMaxes = function() {
+ return this.maxes;
+ };
+
+ _main.default.Color.prototype._getBlue = function() {
+ return this._array[2] * this.maxes[constants.RGB][2];
+ };
+
+ _main.default.Color.prototype._getBrightness = function() {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[2] * this.maxes[constants.HSB][2];
+ };
+
+ _main.default.Color.prototype._getGreen = function() {
+ return this._array[1] * this.maxes[constants.RGB][1];
+ };
+
+ /**
+ * Hue is the same in HSB and HSL, but the maximum value may be different.
+ * This function will return the HSB-normalized saturation when supplied with
+ * an HSB color object, but will default to the HSL-normalized saturation
+ * otherwise.
+ */
+ _main.default.Color.prototype._getHue = function() {
+ if (this.mode === constants.HSB) {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[0] * this.maxes[constants.HSB][0];
+ } else {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[0] * this.maxes[constants.HSL][0];
+ }
+ };
+
+ _main.default.Color.prototype._getLightness = function() {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[2] * this.maxes[constants.HSL][2];
+ };
+
+ _main.default.Color.prototype._getRed = function() {
+ return this._array[0] * this.maxes[constants.RGB][0];
+ };
+
+ /**
+ * Saturation is scaled differently in HSB and HSL. This function will return
+ * the HSB saturation when supplied with an HSB color object, but will default
+ * to the HSL saturation otherwise.
+ */
+ _main.default.Color.prototype._getSaturation = function() {
+ if (this.mode === constants.HSB) {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[1] * this.maxes[constants.HSB][1];
+ } else {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[1] * this.maxes[constants.HSL][1];
+ }
+ };
+
+ /**
+ * CSS named colors.
+ */
+ var namedColors = {
+ aliceblue: '#f0f8ff',
+ antiquewhite: '#faebd7',
+ aqua: '#00ffff',
+ aquamarine: '#7fffd4',
+ azure: '#f0ffff',
+ beige: '#f5f5dc',
+ bisque: '#ffe4c4',
+ black: '#000000',
+ blanchedalmond: '#ffebcd',
+ blue: '#0000ff',
+ blueviolet: '#8a2be2',
+ brown: '#a52a2a',
+ burlywood: '#deb887',
+ cadetblue: '#5f9ea0',
+ chartreuse: '#7fff00',
+ chocolate: '#d2691e',
+ coral: '#ff7f50',
+ cornflowerblue: '#6495ed',
+ cornsilk: '#fff8dc',
+ crimson: '#dc143c',
+ cyan: '#00ffff',
+ darkblue: '#00008b',
+ darkcyan: '#008b8b',
+ darkgoldenrod: '#b8860b',
+ darkgray: '#a9a9a9',
+ darkgreen: '#006400',
+ darkgrey: '#a9a9a9',
+ darkkhaki: '#bdb76b',
+ darkmagenta: '#8b008b',
+ darkolivegreen: '#556b2f',
+ darkorange: '#ff8c00',
+ darkorchid: '#9932cc',
+ darkred: '#8b0000',
+ darksalmon: '#e9967a',
+ darkseagreen: '#8fbc8f',
+ darkslateblue: '#483d8b',
+ darkslategray: '#2f4f4f',
+ darkslategrey: '#2f4f4f',
+ darkturquoise: '#00ced1',
+ darkviolet: '#9400d3',
+ deeppink: '#ff1493',
+ deepskyblue: '#00bfff',
+ dimgray: '#696969',
+ dimgrey: '#696969',
+ dodgerblue: '#1e90ff',
+ firebrick: '#b22222',
+ floralwhite: '#fffaf0',
+ forestgreen: '#228b22',
+ fuchsia: '#ff00ff',
+ gainsboro: '#dcdcdc',
+ ghostwhite: '#f8f8ff',
+ gold: '#ffd700',
+ goldenrod: '#daa520',
+ gray: '#808080',
+ green: '#008000',
+ greenyellow: '#adff2f',
+ grey: '#808080',
+ honeydew: '#f0fff0',
+ hotpink: '#ff69b4',
+ indianred: '#cd5c5c',
+ indigo: '#4b0082',
+ ivory: '#fffff0',
+ khaki: '#f0e68c',
+ lavender: '#e6e6fa',
+ lavenderblush: '#fff0f5',
+ lawngreen: '#7cfc00',
+ lemonchiffon: '#fffacd',
+ lightblue: '#add8e6',
+ lightcoral: '#f08080',
+ lightcyan: '#e0ffff',
+ lightgoldenrodyellow: '#fafad2',
+ lightgray: '#d3d3d3',
+ lightgreen: '#90ee90',
+ lightgrey: '#d3d3d3',
+ lightpink: '#ffb6c1',
+ lightsalmon: '#ffa07a',
+ lightseagreen: '#20b2aa',
+ lightskyblue: '#87cefa',
+ lightslategray: '#778899',
+ lightslategrey: '#778899',
+ lightsteelblue: '#b0c4de',
+ lightyellow: '#ffffe0',
+ lime: '#00ff00',
+ limegreen: '#32cd32',
+ linen: '#faf0e6',
+ magenta: '#ff00ff',
+ maroon: '#800000',
+ mediumaquamarine: '#66cdaa',
+ mediumblue: '#0000cd',
+ mediumorchid: '#ba55d3',
+ mediumpurple: '#9370db',
+ mediumseagreen: '#3cb371',
+ mediumslateblue: '#7b68ee',
+ mediumspringgreen: '#00fa9a',
+ mediumturquoise: '#48d1cc',
+ mediumvioletred: '#c71585',
+ midnightblue: '#191970',
+ mintcream: '#f5fffa',
+ mistyrose: '#ffe4e1',
+ moccasin: '#ffe4b5',
+ navajowhite: '#ffdead',
+ navy: '#000080',
+ oldlace: '#fdf5e6',
+ olive: '#808000',
+ olivedrab: '#6b8e23',
+ orange: '#ffa500',
+ orangered: '#ff4500',
+ orchid: '#da70d6',
+ palegoldenrod: '#eee8aa',
+ palegreen: '#98fb98',
+ paleturquoise: '#afeeee',
+ palevioletred: '#db7093',
+ papayawhip: '#ffefd5',
+ peachpuff: '#ffdab9',
+ peru: '#cd853f',
+ pink: '#ffc0cb',
+ plum: '#dda0dd',
+ powderblue: '#b0e0e6',
+ purple: '#800080',
+ rebeccapurple: '#663399',
+ red: '#ff0000',
+ rosybrown: '#bc8f8f',
+ royalblue: '#4169e1',
+ saddlebrown: '#8b4513',
+ salmon: '#fa8072',
+ sandybrown: '#f4a460',
+ seagreen: '#2e8b57',
+ seashell: '#fff5ee',
+ sienna: '#a0522d',
+ silver: '#c0c0c0',
+ skyblue: '#87ceeb',
+ slateblue: '#6a5acd',
+ slategray: '#708090',
+ slategrey: '#708090',
+ snow: '#fffafa',
+ springgreen: '#00ff7f',
+ steelblue: '#4682b4',
+ tan: '#d2b48c',
+ teal: '#008080',
+ thistle: '#d8bfd8',
+ tomato: '#ff6347',
+ turquoise: '#40e0d0',
+ violet: '#ee82ee',
+ wheat: '#f5deb3',
+ white: '#ffffff',
+ whitesmoke: '#f5f5f5',
+ yellow: '#ffff00',
+ yellowgreen: '#9acd32'
+ };
+
+ /**
+ * These regular expressions are used to build up the patterns for matching
+ * viable CSS color strings: fragmenting the regexes in this way increases the
+ * legibility and comprehensibility of the code.
+ *
+ * Note that RGB values of .9 are not parsed by IE, but are supported here for
+ * color string consistency.
+ */
+ var WHITESPACE = /\s*/; // Match zero or more whitespace characters.
+ var INTEGER = /(\d{1,3})/; // Match integers: 79, 255, etc.
+ var DECIMAL = /((?:\d+(?:\.\d+)?)|(?:\.\d+))/; // Match 129.6, 79, .9, etc.
+ var PERCENT = new RegExp(''.concat(DECIMAL.source, '%')); // Match 12.9%, 79%, .9%, etc.
+
+ /**
+ * Full color string patterns. The capture groups are necessary.
+ */
+ var colorPatterns = {
+ // Match colors in format #XXX, e.g. #416.
+ HEX3: /^#([a-f0-9])([a-f0-9])([a-f0-9])$/i,
+
+ // Match colors in format #XXXX, e.g. #5123.
+ HEX4: /^#([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])$/i,
+
+ // Match colors in format #XXXXXX, e.g. #b4d455.
+ HEX6: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
+
+ // Match colors in format #XXXXXXXX, e.g. #b4d45535.
+ HEX8: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
+
+ // Match colors in format rgb(R, G, B), e.g. rgb(255, 0, 128).
+ RGB: new RegExp(
+ [
+ '^rgb\\(',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ '\\)$'
+ ].join(WHITESPACE.source),
+ 'i'
+ ),
+
+ // Match colors in format rgb(R%, G%, B%), e.g. rgb(100%, 0%, 28.9%).
+ RGB_PERCENT: new RegExp(
+ [
+ '^rgb\\(',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'
+ ].join(WHITESPACE.source),
+ 'i'
+ ),
+
+ // Match colors in format rgb(R, G, B, A), e.g. rgb(255, 0, 128, 0.25).
+ RGBA: new RegExp(
+ [
+ '^rgba\\(',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'
+ ].join(WHITESPACE.source),
+ 'i'
+ ),
+
+ // Match colors in format rgb(R%, G%, B%, A), e.g. rgb(100%, 0%, 28.9%, 0.5).
+ RGBA_PERCENT: new RegExp(
+ [
+ '^rgba\\(',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'
+ ].join(WHITESPACE.source),
+ 'i'
+ ),
+
+ // Match colors in format hsla(H, S%, L%), e.g. hsl(100, 40%, 28.9%).
+ HSL: new RegExp(
+ [
+ '^hsl\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'
+ ].join(WHITESPACE.source),
+ 'i'
+ ),
+
+ // Match colors in format hsla(H, S%, L%, A), e.g. hsla(100, 40%, 28.9%, 0.5).
+ HSLA: new RegExp(
+ [
+ '^hsla\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'
+ ].join(WHITESPACE.source),
+ 'i'
+ ),
+
+ // Match colors in format hsb(H, S%, B%), e.g. hsb(100, 40%, 28.9%).
+ HSB: new RegExp(
+ [
+ '^hsb\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'
+ ].join(WHITESPACE.source),
+ 'i'
+ ),
+
+ // Match colors in format hsba(H, S%, B%, A), e.g. hsba(100, 40%, 28.9%, 0.5).
+ HSBA: new RegExp(
+ [
+ '^hsba\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'
+ ].join(WHITESPACE.source),
+ 'i'
+ )
+ };
+
+ /**
+ * For a number of different inputs, returns a color formatted as [r, g, b, a]
+ * arrays, with each component normalized between 0 and 1.
+ *
+ * @private
+ * @param {Array} [...args] An 'array-like' object that represents a list of
+ * arguments
+ * @return {Number[]} a color formatted as [r, g, b, a]
+ * Example:
+ * input ==> output
+ * g ==> [g, g, g, 255]
+ * g,a ==> [g, g, g, a]
+ * r, g, b ==> [r, g, b, 255]
+ * r, g, b, a ==> [r, g, b, a]
+ * [g] ==> [g, g, g, 255]
+ * [g, a] ==> [g, g, g, a]
+ * [r, g, b] ==> [r, g, b, 255]
+ * [r, g, b, a] ==> [r, g, b, a]
+ * @example
+ *
+ *
+ * // todo
+ *
+ *
+ *
+ * @alt
+ * //todo
+ *
+ */
+ _main.default.Color._parseInputs = function(r, g, b, a) {
+ var numArgs = arguments.length;
+ var mode = this.mode;
+ var maxes = this.maxes[mode];
+ var results = [];
+ var i;
+
+ if (numArgs >= 3) {
+ // Argument is a list of component values.
+
+ results[0] = r / maxes[0];
+ results[1] = g / maxes[1];
+ results[2] = b / maxes[2];
+
+ // Alpha may be undefined, so default it to 100%.
+ if (typeof a === 'number') {
+ results[3] = a / maxes[3];
+ } else {
+ results[3] = 1;
+ }
+
+ // Constrain components to the range [0,1].
+ // (loop backwards for performance)
+ for (i = results.length - 1; i >= 0; --i) {
+ var result = results[i];
+ if (result < 0) {
+ results[i] = 0;
+ } else if (result > 1) {
+ results[i] = 1;
+ }
+ }
+
+ // Convert to RGBA and return.
+ if (mode === constants.HSL) {
+ return _color_conversion.default._hslaToRGBA(results);
+ } else if (mode === constants.HSB) {
+ return _color_conversion.default._hsbaToRGBA(results);
+ } else {
+ return results;
+ }
+ } else if (numArgs === 1 && typeof r === 'string') {
+ var str = r.trim().toLowerCase();
+
+ // Return if string is a named colour.
+ if (namedColors[str]) {
+ return _main.default.Color._parseInputs.call(this, namedColors[str]);
+ }
+
+ // Try RGBA pattern matching.
+ if (colorPatterns.HEX3.test(str)) {
+ // #rgb
+ results = colorPatterns.HEX3.exec(str)
+ .slice(1)
+ .map(function(color) {
+ return parseInt(color + color, 16) / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.HEX6.test(str)) {
+ // #rrggbb
+ results = colorPatterns.HEX6.exec(str)
+ .slice(1)
+ .map(function(color) {
+ return parseInt(color, 16) / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.HEX4.test(str)) {
+ // #rgba
+ results = colorPatterns.HEX4.exec(str)
+ .slice(1)
+ .map(function(color) {
+ return parseInt(color + color, 16) / 255;
+ });
+ return results;
+ } else if (colorPatterns.HEX8.test(str)) {
+ // #rrggbbaa
+ results = colorPatterns.HEX8.exec(str)
+ .slice(1)
+ .map(function(color) {
+ return parseInt(color, 16) / 255;
+ });
+ return results;
+ } else if (colorPatterns.RGB.test(str)) {
+ // rgb(R,G,B)
+ results = colorPatterns.RGB.exec(str)
+ .slice(1)
+ .map(function(color) {
+ return color / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.RGB_PERCENT.test(str)) {
+ // rgb(R%,G%,B%)
+ results = colorPatterns.RGB_PERCENT.exec(str)
+ .slice(1)
+ .map(function(color) {
+ return parseFloat(color) / 100;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.RGBA.test(str)) {
+ // rgba(R,G,B,A)
+ results = colorPatterns.RGBA.exec(str)
+ .slice(1)
+ .map(function(color, idx) {
+ if (idx === 3) {
+ return parseFloat(color);
+ }
+ return color / 255;
+ });
+ return results;
+ } else if (colorPatterns.RGBA_PERCENT.test(str)) {
+ // rgba(R%,G%,B%,A%)
+ results = colorPatterns.RGBA_PERCENT.exec(str)
+ .slice(1)
+ .map(function(color, idx) {
+ if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseFloat(color) / 100;
+ });
+ return results;
+ }
+
+ // Try HSLA pattern matching.
+ if (colorPatterns.HSL.test(str)) {
+ // hsl(H,S,L)
+ results = colorPatterns.HSL.exec(str)
+ .slice(1)
+ .map(function(color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ }
+ return parseInt(color, 10) / 100;
+ });
+ results[3] = 1;
+ } else if (colorPatterns.HSLA.test(str)) {
+ // hsla(H,S,L,A)
+ results = colorPatterns.HSLA.exec(str)
+ .slice(1)
+ .map(function(color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ } else if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseInt(color, 10) / 100;
+ });
+ }
+ results = results.map(function(value) {
+ return Math.max(Math.min(value, 1), 0);
+ });
+ if (results.length) {
+ return _color_conversion.default._hslaToRGBA(results);
+ }
+
+ // Try HSBA pattern matching.
+ if (colorPatterns.HSB.test(str)) {
+ // hsb(H,S,B)
+ results = colorPatterns.HSB.exec(str)
+ .slice(1)
+ .map(function(color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ }
+ return parseInt(color, 10) / 100;
+ });
+ results[3] = 1;
+ } else if (colorPatterns.HSBA.test(str)) {
+ // hsba(H,S,B,A)
+ results = colorPatterns.HSBA.exec(str)
+ .slice(1)
+ .map(function(color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ } else if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseInt(color, 10) / 100;
+ });
+ }
+
+ if (results.length) {
+ // (loop backwards for performance)
+ for (i = results.length - 1; i >= 0; --i) {
+ results[i] = Math.max(Math.min(results[i], 1), 0);
+ }
+
+ return _color_conversion.default._hsbaToRGBA(results);
+ }
+
+ // Input did not match any CSS color pattern: default to white.
+ results = [1, 1, 1, 1];
+ } else if ((numArgs === 1 || numArgs === 2) && typeof r === 'number') {
+ // 'Grayscale' mode.
+
+ /**
+ * For HSB and HSL, interpret the gray level as a brightness/lightness
+ * value (they are equivalent when chroma is zero). For RGB, normalize the
+ * gray level according to the blue maximum.
+ */
+ results[0] = r / maxes[2];
+ results[1] = r / maxes[2];
+ results[2] = r / maxes[2];
+
+ // Alpha may be undefined, so default it to 100%.
+ if (typeof g === 'number') {
+ results[3] = g / maxes[3];
+ } else {
+ results[3] = 1;
+ }
+
+ // Constrain components to the range [0,1].
+ results = results.map(function(value) {
+ return Math.max(Math.min(value, 1), 0);
+ });
+ } else {
+ throw new Error(''.concat(arguments, 'is not a valid color representation.'));
+ }
+
+ return results;
+ };
+ var _default = _main.default.Color;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27, './color_conversion': 17 }
+ ],
+ 20: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Color');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /**
+ * @method background
+ * @param {Number} gray specifies a value between white and black
+ * @param {Number} [a]
+ * @chainable
+ */ /**
+ * @module Color
+ * @submodule Setting
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ /**
+ * The background() function sets the color used for the background of the
+ * p5.js canvas. The default background is transparent. This function is
+ * typically used within draw() to clear the display window at the beginning
+ * of each frame, but it can be used inside setup() to set the background on
+ * the first frame of animation or if the background need only be set once.
+ *
+ * The color is either specified in terms of the RGB, HSB, or HSL color
+ * depending on the current colorMode. (The default color space is RGB, with
+ * each value in the range from 0 to 255). The alpha range by default is also 0 to 255.
+ *
+ * If a single string argument is provided, RGB, RGBA and Hex CSS color strings
+ * and all named color strings are supported. In this case, an alpha number
+ * value as a second argument is not supported, the RGBA form should be used.
+ *
+ * A p5.Color object can also be provided to set the background color.
+ *
+ * A p5.Image can also be provided to set the background image.
+ *
+ * @method background
+ * @param {p5.Color} color any value created by the color() function
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * // Grayscale integer value
+ * background(51);
+ *
+ *
+ *
+ *
+ *
+ * // R, G & B integer values
+ * background(255, 204, 0);
+ *
+ *
+ *
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * background(255, 204, 100);
+ *
+ *
+ *
+ *
+ *
+ * // Named SVG/CSS color string
+ * background('red');
+ *
+ *
+ *
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * background('#fae');
+ *
+ *
+ *
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * background('#222222');
+ *
+ *
+ *
+ *
+ *
+ * // integer RGB notation
+ * background('rgb(0,255,0)');
+ *
+ *
+ *
+ *
+ *
+ * // integer RGBA notation
+ * background('rgba(0,255,0, 0.25)');
+ *
+ *
+ *
+ *
+ *
+ * // percentage RGB notation
+ * background('rgb(100%,0%,10%)');
+ *
+ *
+ *
+ *
+ *
+ * // percentage RGBA notation
+ * background('rgba(100%,0%,100%,0.5)');
+ *
+ *
+ *
+ *
+ *
+ * // p5 Color object
+ * background(color(0, 0, 255));
+ *
+ *
+ *
+ * @alt
+ * canvas with darkest charcoal grey background.
+ * canvas with yellow background.
+ * canvas with royal blue background.
+ * canvas with red background.
+ * canvas with pink background.
+ * canvas with black background.
+ * canvas with bright green background.
+ * canvas with soft green background.
+ * canvas with red background.
+ * canvas with light purple background.
+ * canvas with blue background.
+ */ /**
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ * rgb() or rgba(), percentage rgb() or rgba(),
+ * 3-digit hex, 6-digit hex
+ * @param {Number} [a] opacity of the background relative to current
+ * color range (default is 0-255)
+ * @chainable
+ */
+
+ /**
+ * @method background
+ * @param {Number} v1 red or hue value (depending on the current color
+ * mode)
+ * @param {Number} v2 green or saturation value (depending on the current
+ * color mode)
+ * @param {Number} v3 blue or brightness value (depending on the current
+ * color mode)
+ * @param {Number} [a]
+ * @chainable
+ */
+
+ /**
+ * @method background
+ * @param {Number[]} values an array containing the red, green, blue
+ * and alpha components of the color
+ * @chainable
+ */
+
+ /**
+ * @method background
+ * @param {p5.Image} image image created with loadImage() or createImage(),
+ * to set as background
+ * (must be same size as the sketch window)
+ * @param {Number} [a]
+ * @chainable
+ */
+
+ _main.default.prototype.background = function() {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).background.apply(_this$_renderer, arguments);
+ return this;
+ };
+
+ /**
+ * Clears the pixels within a buffer. This function only clears the canvas.
+ * It will not clear objects created by createX() methods such as
+ * createVideo() or createDiv().
+ * Unlike the main graphics context, pixels in additional graphics areas created
+ * with createGraphics() can be entirely
+ * or partially transparent. This function clears everything to make all of
+ * the pixels 100% transparent.
+ *
+ * @method clear
+ * @chainable
+ * @example
+ *
+ *
+ * // Clear the screen on mouse press.
+ * function setup() {
+ * createCanvas(100, 100);
+ * }
+ *
+ * function draw() {
+ * ellipse(mouseX, mouseY, 20, 20);
+ * }
+ *
+ * function mousePressed() {
+ * clear();
+ * }
+ *
+ *
+ *
+ * @alt
+ * 20x20 white ellipses are continually drawn at mouse x and y coordinates.
+ *
+ */
+
+ _main.default.prototype.clear = function() {
+ this._renderer.clear();
+ return this;
+ };
+
+ /**
+ * colorMode() changes the way p5.js interprets color data. By default, the
+ * parameters for fill(), stroke(), background(), and color() are defined by
+ * values between 0 and 255 using the RGB color model. This is equivalent to
+ * setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB
+ * system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You
+ * can also use HSL.
+ *
+ * Note: existing color objects remember the mode that they were created in,
+ * so you can change modes as you like without affecting their appearance.
+ *
+ *
+ * @method colorMode
+ * @param {Constant} mode either RGB, HSB or HSL, corresponding to
+ * Red/Green/Blue and Hue/Saturation/Brightness
+ * (or Lightness)
+ * @param {Number} [max] range for all values
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(RGB, 100);
+ * for (let i = 0; i < 100; i++) {
+ * for (let j = 0; j < 100; j++) {
+ * stroke(i, j, 0);
+ * point(i, j);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 100);
+ * for (let i = 0; i < 100; i++) {
+ * for (let j = 0; j < 100; j++) {
+ * stroke(i, j, 100);
+ * point(i, j);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * colorMode(RGB, 255);
+ * let c = color(127, 255, 0);
+ *
+ * colorMode(RGB, 1);
+ * let myColor = c._getRed();
+ * text(myColor, 10, 10, 80, 80);
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * colorMode(RGB, 255, 255, 255, 1);
+ * background(255);
+ *
+ * strokeWeight(4);
+ * stroke(255, 0, 10, 0.3);
+ * ellipse(40, 40, 50, 50);
+ * ellipse(50, 50, 40, 40);
+ *
+ *
+ *
+ * @alt
+ *Green to red gradient from bottom L to top R. shading originates from top left.
+ *Rainbow gradient from left to right. Brightness increasing to white at top.
+ *unknown image.
+ *50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.
+ *
+ */
+ /**
+ * @method colorMode
+ * @param {Constant} mode
+ * @param {Number} max1 range for the red or hue depending on the
+ * current color mode
+ * @param {Number} max2 range for the green or saturation depending
+ * on the current color mode
+ * @param {Number} max3 range for the blue or brightness/lightness
+ * depending on the current color mode
+ * @param {Number} [maxA] range for the alpha
+ * @chainable
+ */
+ _main.default.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
+ _main.default._validateParameters('colorMode', arguments);
+ if (
+ mode === constants.RGB ||
+ mode === constants.HSB ||
+ mode === constants.HSL
+ ) {
+ // Set color mode.
+ this._colorMode = mode;
+
+ // Set color maxes.
+ var maxes = this._colorMaxes[mode];
+ if (arguments.length === 2) {
+ maxes[0] = max1; // Red
+ maxes[1] = max1; // Green
+ maxes[2] = max1; // Blue
+ maxes[3] = max1; // Alpha
+ } else if (arguments.length === 4) {
+ maxes[0] = max1; // Red
+ maxes[1] = max2; // Green
+ maxes[2] = max3; // Blue
+ } else if (arguments.length === 5) {
+ maxes[0] = max1; // Red
+ maxes[1] = max2; // Green
+ maxes[2] = max3; // Blue
+ maxes[3] = maxA; // Alpha
+ }
+ }
+
+ return this;
+ };
+
+ /**
+ * Sets the color used to fill shapes. For example, if you run
+ * fill(204, 102, 0), all shapes drawn after the fill command will be filled with the color orange. This
+ * color is either specified in terms of the RGB or HSB color depending on
+ * the current colorMode(). (The default color space is RGB, with each value
+ * in the range from 0 to 255). The alpha range by default is also 0 to 255.
+ *
+ * If a single string argument is provided, RGB, RGBA and Hex CSS color strings
+ * and all named color strings are supported. In this case, an alpha number
+ * value as a second argument is not supported, the RGBA form should be used.
+ *
+ * A p5 Color object can also be provided to set the fill color.
+ *
+ * @method fill
+ * @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]
+ * @chainable
+ * @example
+ *
+ *
+ * // Grayscale integer value
+ * fill(51);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // R, G & B integer values
+ * fill(255, 204, 0);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * fill(255, 204, 100);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // Named SVG/CSS color string
+ * fill('red');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * fill('#fae');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * fill('#222222');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // integer RGB notation
+ * fill('rgb(0,255,0)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // integer RGBA notation
+ * fill('rgba(0,255,0, 0.25)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // percentage RGB notation
+ * fill('rgb(100%,0%,10%)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // percentage RGBA notation
+ * fill('rgba(100%,0%,100%,0.5)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // p5 Color object
+ * fill(color(0, 0, 255));
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * @alt
+ * 60x60 dark charcoal grey rect with black outline in center of canvas.
+ * 60x60 yellow rect with black outline in center of canvas.
+ * 60x60 royal blue rect with black outline in center of canvas.
+ * 60x60 red rect with black outline in center of canvas.
+ * 60x60 pink rect with black outline in center of canvas.
+ * 60x60 black rect with black outline in center of canvas.
+ * 60x60 light green rect with black outline in center of canvas.
+ * 60x60 soft green rect with black outline in center of canvas.
+ * 60x60 red rect with black outline in center of canvas.
+ * 60x60 dark fuchsia rect with black outline in center of canvas.
+ * 60x60 blue rect with black outline in center of canvas.
+ */
+
+ /**
+ * @method fill
+ * @param {String} value a color string
+ * @chainable
+ */
+
+ /**
+ * @method fill
+ * @param {Number} gray a gray value
+ * @param {Number} [alpha]
+ * @chainable
+ */
+
+ /**
+ * @method fill
+ * @param {Number[]} values an array containing the red,green,blue &
+ * and alpha components of the color
+ * @chainable
+ */
+
+ /**
+ * @method fill
+ * @param {p5.Color} color the fill color
+ * @chainable
+ */
+ _main.default.prototype.fill = function() {
+ var _this$_renderer2;
+ this._renderer._setProperty('_fillSet', true);
+ this._renderer._setProperty('_doFill', true);
+ (_this$_renderer2 = this._renderer).fill.apply(_this$_renderer2, arguments);
+ return this;
+ };
+
+ /**
+ * Disables filling geometry. If both noStroke() and noFill() are called,
+ * nothing will be drawn to the screen.
+ *
+ * @method noFill
+ * @chainable
+ * @example
+ *
+ *
+ * rect(15, 10, 55, 55);
+ * noFill();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noFill();
+ * stroke(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(45, 45, 45);
+ * }
+ *
+ *
+ *
+ * @alt
+ * white rect top middle and noFill rect center. Both 60x60 with black outlines.
+ * black canvas with purple cube wireframe spinning
+ */
+ _main.default.prototype.noFill = function() {
+ this._renderer._setProperty('_doFill', false);
+ return this;
+ };
+
+ /**
+ * Disables drawing the stroke (outline). If both noStroke() and noFill()
+ * are called, nothing will be drawn to the screen.
+ *
+ * @method noStroke
+ * @chainable
+ * @example
+ *
+ *
+ * noStroke();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * fill(240, 150, 150);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(45, 45, 45);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 60x60 white rect at center. no outline.
+ * black canvas with pink cube spinning
+ */
+ _main.default.prototype.noStroke = function() {
+ this._renderer._setProperty('_doStroke', false);
+ return this;
+ };
+
+ /**
+ * Sets the color used to draw lines and borders around shapes. This color
+ * is either specified in terms of the RGB or HSB color depending on the
+ * current colorMode() (the default color space is RGB, with each value in
+ * the range from 0 to 255). The alpha range by default is also 0 to 255.
+ *
+ * If a single string argument is provided, RGB, RGBA and Hex CSS color
+ * strings and all named color strings are supported. In this case, an alpha
+ * number value as a second argument is not supported, the RGBA form should be
+ * used.
+ *
+ * A p5 Color object can also be provided to set the stroke color.
+ *
+ *
+ * @method stroke
+ * @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]
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * // Grayscale integer value
+ * strokeWeight(4);
+ * stroke(51);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // R, G & B integer values
+ * stroke(255, 204, 0);
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * strokeWeight(4);
+ * stroke(255, 204, 100);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // Named SVG/CSS color string
+ * stroke('red');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * stroke('#fae');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * stroke('#222222');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // integer RGB notation
+ * stroke('rgb(0,255,0)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // integer RGBA notation
+ * stroke('rgba(0,255,0,0.25)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // percentage RGB notation
+ * stroke('rgb(100%,0%,10%)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // percentage RGBA notation
+ * stroke('rgba(100%,0%,100%,0.5)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // p5 Color object
+ * stroke(color(0, 0, 255));
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ * @alt
+ * 60x60 white rect at center. Dark charcoal grey outline.
+ * 60x60 white rect at center. Yellow outline.
+ * 60x60 white rect at center. Royal blue outline.
+ * 60x60 white rect at center. Red outline.
+ * 60x60 white rect at center. Pink outline.
+ * 60x60 white rect at center. Black outline.
+ * 60x60 white rect at center. Bright green outline.
+ * 60x60 white rect at center. Soft green outline.
+ * 60x60 white rect at center. Red outline.
+ * 60x60 white rect at center. Dark fuchsia outline.
+ * 60x60 white rect at center. Blue outline.
+ */
+
+ /**
+ * @method stroke
+ * @param {String} value a color string
+ * @chainable
+ */
+
+ /**
+ * @method stroke
+ * @param {Number} gray a gray value
+ * @param {Number} [alpha]
+ * @chainable
+ */
+
+ /**
+ * @method stroke
+ * @param {Number[]} values an array containing the red,green,blue &
+ * and alpha components of the color
+ * @chainable
+ */
+
+ /**
+ * @method stroke
+ * @param {p5.Color} color the stroke color
+ * @chainable
+ */
+
+ _main.default.prototype.stroke = function() {
+ var _this$_renderer3;
+ this._renderer._setProperty('_strokeSet', true);
+ this._renderer._setProperty('_doStroke', true);
+ (_this$_renderer3 = this._renderer).stroke.apply(_this$_renderer3, arguments);
+ return this;
+ };
+
+ /**
+ * All drawing that follows erase() will subtract from the canvas.
+ * Erased areas will reveal the web page underneath the canvas.
+ * Erasing can be canceled with noErase().
+ *
+ * Drawing done with image()
+ * and background() will not be affected by erase()
+ *
+ *
+ * @method erase
+ * @param {Number} [strengthFill] A number (0-255) for the strength of erasing for a shape's fill.
+ * This will default to 255 when no argument is given, which
+ * is full strength.
+ * @param {Number} [strengthStroke] A number (0-255) for the strength of erasing for a shape's stroke.
+ * This will default to 255 when no argument is given, which
+ * is full strength.
+ *
+ * @chainable
+ * @example
+ *
+ *
+ * background(100, 100, 250);
+ * fill(250, 100, 100);
+ * rect(20, 20, 60, 60);
+ * erase();
+ * ellipse(25, 30, 30);
+ * noErase();
+ *
+ *
+ *
+ *
+ *
+ * background(150, 250, 150);
+ * fill(100, 100, 250);
+ * rect(20, 20, 60, 60);
+ * strokeWeight(5);
+ * erase(150, 255);
+ * triangle(50, 10, 70, 50, 90, 10);
+ * noErase();
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * smooth();
+ * createCanvas(100, 100, WEBGL);
+ * // Make a <p> element and put it behind the canvas
+ * let p = createP('I am a dom element');
+ * p.center();
+ * p.style('font-size', '20px');
+ * p.style('text-align', 'center');
+ * p.style('z-index', '-9999');
+ * }
+ *
+ * function draw() {
+ * background(250, 250, 150);
+ * fill(15, 195, 185);
+ * noStroke();
+ * sphere(30);
+ * erase();
+ * rotateY(frameCount * 0.02);
+ * translate(0, 0, 40);
+ * torus(15, 5);
+ * noErase();
+ * }
+ *
+ *
+ *
+ * @alt
+ * 60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.
+ * 60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.
+ * 60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.
+ */
+ _main.default.prototype.erase = function() {
+ var opacityFill =
+ arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 255;
+ var opacityStroke =
+ arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 255;
+ this._renderer.erase(opacityFill, opacityStroke);
+
+ return this;
+ };
+
+ /**
+ * Ends erasing that was started with erase().
+ * The fill(), stroke(), and
+ * blendMode() settings will return to what they were
+ * prior to calling erase().
+ *
+ * @method noErase
+ * @chainable
+ * @example
+ *
+ *
+ * background(235, 145, 15);
+ * noStroke();
+ * fill(30, 45, 220);
+ * rect(30, 10, 10, 80);
+ * erase();
+ * ellipse(50, 50, 60);
+ * noErase();
+ * rect(70, 10, 10, 80);
+ *
+ *
+ *
+ * @alt
+ * Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.
+ */
+
+ _main.default.prototype.noErase = function() {
+ this._renderer.noErase();
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27, './p5.Color': 19 }
+ ],
+ 21: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.TEXTURE = exports.FILL = exports.STROKE = exports.CURVE = exports.BEZIER = exports.QUADRATIC = exports.LINEAR = exports._CTX_MIDDLE = exports._DEFAULT_LEADMULT = exports._DEFAULT_TEXT_FILL = exports.BOLDITALIC = exports.BOLD = exports.ITALIC = exports.NORMAL = exports.BLUR = exports.ERODE = exports.DILATE = exports.POSTERIZE = exports.INVERT = exports.OPAQUE = exports.GRAY = exports.THRESHOLD = exports.BURN = exports.DODGE = exports.SOFT_LIGHT = exports.HARD_LIGHT = exports.OVERLAY = exports.REPLACE = exports.SCREEN = exports.MULTIPLY = exports.EXCLUSION = exports.SUBTRACT = exports.DIFFERENCE = exports.LIGHTEST = exports.DARKEST = exports.ADD = exports.REMOVE = exports.BLEND = exports.UP_ARROW = exports.TAB = exports.SHIFT = exports.RIGHT_ARROW = exports.RETURN = exports.OPTION = exports.LEFT_ARROW = exports.ESCAPE = exports.ENTER = exports.DOWN_ARROW = exports.DELETE = exports.CONTROL = exports.BACKSPACE = exports.ALT = exports.AUTO = exports.HSL = exports.HSB = exports.RGB = exports.MITER = exports.BEVEL = exports.ROUND = exports.SQUARE = exports.PROJECT = exports.PIE = exports.CHORD = exports.OPEN = exports.CLOSE = exports.QUAD_STRIP = exports.QUADS = exports.TRIANGLE_STRIP = exports.TRIANGLE_FAN = exports.TRIANGLES = exports.LINE_LOOP = exports.LINE_STRIP = exports.LINES = exports.POINTS = exports.BASELINE = exports.BOTTOM = exports.TOP = exports.CENTER = exports.LEFT = exports.RIGHT = exports.RADIUS = exports.CORNERS = exports.CORNER = exports.RAD_TO_DEG = exports.DEG_TO_RAD = exports.RADIANS = exports.DEGREES = exports.TWO_PI = exports.TAU = exports.QUARTER_PI = exports.PI = exports.HALF_PI = exports.WAIT = exports.TEXT = exports.MOVE = exports.HAND = exports.CROSS = exports.ARROW = exports.WEBGL = exports.P2D = void 0;
+ exports.AXES = exports.GRID = exports._DEFAULT_FILL = exports._DEFAULT_STROKE = exports.PORTRAIT = exports.LANDSCAPE = exports.MIRROR = exports.CLAMP = exports.REPEAT = exports.NEAREST = exports.IMAGE = exports.IMMEDIATE = void 0; /**
+ * @module Constants
+ * @submodule Constants
+ * @for p5
+ */
+
+ var _PI = Math.PI;
+
+ // GRAPHICS RENDERER
+ /**
+ * The default, two-dimensional renderer.
+ * @property {String} P2D
+ * @final
+ */
+ var P2D = 'p2d';
+ /**
+ * One of the two render modes in p5.js: P2D (default renderer) and WEBGL
+ * Enables 3D render by introducing the third dimension: Z
+ * @property {String} WEBGL
+ * @final
+ */ exports.P2D = P2D;
+ var WEBGL = 'webgl';
+
+ // ENVIRONMENT
+ /**
+ * @property {String} ARROW
+ * @final
+ */ exports.WEBGL = WEBGL;
+ var ARROW = 'default';
+ /**
+ * @property {String} CROSS
+ * @final
+ */ exports.ARROW = ARROW;
+ var CROSS = 'crosshair';
+ /**
+ * @property {String} HAND
+ * @final
+ */ exports.CROSS = CROSS;
+ var HAND = 'pointer';
+ /**
+ * @property {String} MOVE
+ * @final
+ */ exports.HAND = HAND;
+ var MOVE = 'move';
+ /**
+ * @property {String} TEXT
+ * @final
+ */ exports.MOVE = MOVE;
+ var TEXT = 'text';
+ /**
+ * @property {String} WAIT
+ * @final
+ */ exports.TEXT = TEXT;
+ var WAIT = 'wait';
+
+ // TRIGONOMETRY
+
+ /**
+ * HALF_PI is a mathematical constant with the value
+ * 1.57079632679489661923. It is half the ratio of the
+ * circumference of a circle to its diameter. It is useful in
+ * combination with the trigonometric functions sin() and cos().
+ *
+ * @property {Number} HALF_PI
+ * @final
+ *
+ * @example
+ *
+ * arc(50, 50, 80, 80, 0, HALF_PI);
+ *
+ *
+ * @alt
+ * 80x80 white quarter-circle with curve toward bottom right of canvas.
+ *
+ */ exports.WAIT = WAIT;
+ var HALF_PI = _PI / 2;
+ /**
+ * PI is a mathematical constant with the value
+ * 3.14159265358979323846. It is the ratio of the circumference
+ * of a circle to its diameter. It is useful in combination with
+ * the trigonometric functions sin() and cos().
+ *
+ * @property {Number} PI
+ * @final
+ *
+ * @example
+ *
+ * arc(50, 50, 80, 80, 0, PI);
+ *
+ *
+ * @alt
+ * white half-circle with curve toward bottom of canvas.
+ *
+ */ exports.HALF_PI = HALF_PI;
+ var PI = _PI;
+ /**
+ * QUARTER_PI is a mathematical constant with the value 0.7853982.
+ * It is one quarter the ratio of the circumference of a circle to
+ * its diameter. It is useful in combination with the trigonometric
+ * functions sin() and cos().
+ *
+ * @property {Number} QUARTER_PI
+ * @final
+ *
+ * @example
+ *
+ * arc(50, 50, 80, 80, 0, QUARTER_PI);
+ *
+ *
+ * @alt
+ * white eighth-circle rotated about 40 degrees with curve bottom right canvas.
+ *
+ */ exports.PI = PI;
+ var QUARTER_PI = _PI / 4;
+ /**
+ * TAU is an alias for TWO_PI, a mathematical constant with the
+ * value 6.28318530717958647693. It is twice the ratio of the
+ * circumference of a circle to its diameter. It is useful in
+ * combination with the trigonometric functions sin() and cos().
+ *
+ * @property {Number} TAU
+ * @final
+ *
+ * @example
+ *
+ * arc(50, 50, 80, 80, 0, TAU);
+ *
+ *
+ * @alt
+ * 80x80 white ellipse shape in center of canvas.
+ *
+ */ exports.QUARTER_PI = QUARTER_PI;
+ var TAU = _PI * 2;
+ /**
+ * TWO_PI is a mathematical constant with the value
+ * 6.28318530717958647693. It is twice the ratio of the
+ * circumference of a circle to its diameter. It is useful in
+ * combination with the trigonometric functions sin() and cos().
+ *
+ * @property {Number} TWO_PI
+ * @final
+ *
+ * @example
+ *
+ * arc(50, 50, 80, 80, 0, TWO_PI);
+ *
+ *
+ * @alt
+ * 80x80 white ellipse shape in center of canvas.
+ *
+ */ exports.TAU = TAU;
+ var TWO_PI = _PI * 2;
+ /**
+ * Constant to be used with angleMode() function, to set the mode which
+ * p5.js interprates and calculates angles (either DEGREES or RADIANS).
+ * @property {String} DEGREES
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * angleMode(DEGREES);
+ * }
+ *
+ */ exports.TWO_PI = TWO_PI;
+ var DEGREES = 'degrees';
+ /**
+ * Constant to be used with angleMode() function, to set the mode which
+ * p5.js interprates and calculates angles (either RADIANS or DEGREES).
+ * @property {String} RADIANS
+ * @final
+ *
+ * @example
+ *
+ * function setup() {
+ * angleMode(RADIANS);
+ * }
+ *
+ */ exports.DEGREES = DEGREES;
+ var RADIANS = 'radians';
+ exports.RADIANS = RADIANS;
+ var DEG_TO_RAD = _PI / 180.0;
+ exports.DEG_TO_RAD = DEG_TO_RAD;
+ var RAD_TO_DEG = 180.0 / _PI;
+
+ // SHAPE
+ /**
+ * @property {String} CORNER
+ * @final
+ */ exports.RAD_TO_DEG = RAD_TO_DEG;
+ var CORNER = 'corner';
+ /**
+ * @property {String} CORNERS
+ * @final
+ */ exports.CORNER = CORNER;
+ var CORNERS = 'corners';
+ /**
+ * @property {String} RADIUS
+ * @final
+ */ exports.CORNERS = CORNERS;
+ var RADIUS = 'radius';
+ /**
+ * @property {String} RIGHT
+ * @final
+ */ exports.RADIUS = RADIUS;
+ var RIGHT = 'right';
+ /**
+ * @property {String} LEFT
+ * @final
+ */ exports.RIGHT = RIGHT;
+ var LEFT = 'left';
+ /**
+ * @property {String} CENTER
+ * @final
+ */ exports.LEFT = LEFT;
+ var CENTER = 'center';
+ /**
+ * @property {String} TOP
+ * @final
+ */ exports.CENTER = CENTER;
+ var TOP = 'top';
+ /**
+ * @property {String} BOTTOM
+ * @final
+ */ exports.TOP = TOP;
+ var BOTTOM = 'bottom';
+ /**
+ * @property {String} BASELINE
+ * @final
+ * @default alphabetic
+ */ exports.BOTTOM = BOTTOM;
+ var BASELINE = 'alphabetic';
+ /**
+ * @property {Number} POINTS
+ * @final
+ * @default 0x0000
+ */ exports.BASELINE = BASELINE;
+ var POINTS = 0x0000;
+ /**
+ * @property {Number} LINES
+ * @final
+ * @default 0x0001
+ */ exports.POINTS = POINTS;
+ var LINES = 0x0001;
+ /**
+ * @property {Number} LINE_STRIP
+ * @final
+ * @default 0x0003
+ */ exports.LINES = LINES;
+ var LINE_STRIP = 0x0003;
+ /**
+ * @property {Number} LINE_LOOP
+ * @final
+ * @default 0x0002
+ */ exports.LINE_STRIP = LINE_STRIP;
+ var LINE_LOOP = 0x0002;
+ /**
+ * @property {Number} TRIANGLES
+ * @final
+ * @default 0x0004
+ */ exports.LINE_LOOP = LINE_LOOP;
+ var TRIANGLES = 0x0004;
+ /**
+ * @property {Number} TRIANGLE_FAN
+ * @final
+ * @default 0x0006
+ */ exports.TRIANGLES = TRIANGLES;
+ var TRIANGLE_FAN = 0x0006;
+ /**
+ * @property {Number} TRIANGLE_STRIP
+ * @final
+ * @default 0x0005
+ */ exports.TRIANGLE_FAN = TRIANGLE_FAN;
+ var TRIANGLE_STRIP = 0x0005;
+ /**
+ * @property {String} QUADS
+ * @final
+ */ exports.TRIANGLE_STRIP = TRIANGLE_STRIP;
+ var QUADS = 'quads';
+ /**
+ * @property {String} QUAD_STRIP
+ * @final
+ * @default quad_strip
+ */ exports.QUADS = QUADS;
+ var QUAD_STRIP = 'quad_strip';
+ /**
+ * @property {String} CLOSE
+ * @final
+ */ exports.QUAD_STRIP = QUAD_STRIP;
+ var CLOSE = 'close';
+ /**
+ * @property {String} OPEN
+ * @final
+ */ exports.CLOSE = CLOSE;
+ var OPEN = 'open';
+ /**
+ * @property {String} CHORD
+ * @final
+ */ exports.OPEN = OPEN;
+ var CHORD = 'chord';
+ /**
+ * @property {String} PIE
+ * @final
+ */ exports.CHORD = CHORD;
+ var PIE = 'pie';
+ /**
+ * @property {String} PROJECT
+ * @final
+ * @default square
+ */ exports.PIE = PIE;
+ var PROJECT = 'square'; // PEND: careful this is counterintuitive
+ /**
+ * @property {String} SQUARE
+ * @final
+ * @default butt
+ */ exports.PROJECT = PROJECT;
+ var SQUARE = 'butt';
+ /**
+ * @property {String} ROUND
+ * @final
+ */ exports.SQUARE = SQUARE;
+ var ROUND = 'round';
+ /**
+ * @property {String} BEVEL
+ * @final
+ */ exports.ROUND = ROUND;
+ var BEVEL = 'bevel';
+ /**
+ * @property {String} MITER
+ * @final
+ */ exports.BEVEL = BEVEL;
+ var MITER = 'miter';
+
+ // COLOR
+ /**
+ * @property {String} RGB
+ * @final
+ */ exports.MITER = MITER;
+ var RGB = 'rgb';
+ /**
+ * @property {String} HSB
+ * @final
+ */ exports.RGB = RGB;
+ var HSB = 'hsb';
+ /**
+ * @property {String} HSL
+ * @final
+ */ exports.HSB = HSB;
+ var HSL = 'hsl';
+
+ // DOM EXTENSION
+ /**
+ * AUTO allows us to automatically set the width or height of an element (but not both),
+ * based on the current height and width of the element. Only one parameter can
+ * be passed to the size function as AUTO, at a time.
+ *
+ * @property {String} AUTO
+ * @final
+ */ exports.HSL = HSL;
+ var AUTO = 'auto';
+
+ /**
+ * @property {Number} ALT
+ * @final
+ */
+ // INPUT
+ exports.AUTO = AUTO;
+ var ALT = 18;
+ /**
+ * @property {Number} BACKSPACE
+ * @final
+ */ exports.ALT = ALT;
+ var BACKSPACE = 8;
+ /**
+ * @property {Number} CONTROL
+ * @final
+ */ exports.BACKSPACE = BACKSPACE;
+ var CONTROL = 17;
+ /**
+ * @property {Number} DELETE
+ * @final
+ */ exports.CONTROL = CONTROL;
+ var DELETE = 46;
+ /**
+ * @property {Number} DOWN_ARROW
+ * @final
+ */ exports.DELETE = DELETE;
+ var DOWN_ARROW = 40;
+ /**
+ * @property {Number} ENTER
+ * @final
+ */ exports.DOWN_ARROW = DOWN_ARROW;
+ var ENTER = 13;
+ /**
+ * @property {Number} ESCAPE
+ * @final
+ */ exports.ENTER = ENTER;
+ var ESCAPE = 27;
+ /**
+ * @property {Number} LEFT_ARROW
+ * @final
+ */ exports.ESCAPE = ESCAPE;
+ var LEFT_ARROW = 37;
+ /**
+ * @property {Number} OPTION
+ * @final
+ */ exports.LEFT_ARROW = LEFT_ARROW;
+ var OPTION = 18;
+ /**
+ * @property {Number} RETURN
+ * @final
+ */ exports.OPTION = OPTION;
+ var RETURN = 13;
+ /**
+ * @property {Number} RIGHT_ARROW
+ * @final
+ */ exports.RETURN = RETURN;
+ var RIGHT_ARROW = 39;
+ /**
+ * @property {Number} SHIFT
+ * @final
+ */ exports.RIGHT_ARROW = RIGHT_ARROW;
+ var SHIFT = 16;
+ /**
+ * @property {Number} TAB
+ * @final
+ */ exports.SHIFT = SHIFT;
+ var TAB = 9;
+ /**
+ * @property {Number} UP_ARROW
+ * @final
+ */ exports.TAB = TAB;
+ var UP_ARROW = 38;
+
+ // RENDERING
+ /**
+ * @property {String} BLEND
+ * @final
+ * @default source-over
+ */ exports.UP_ARROW = UP_ARROW;
+ var BLEND = 'source-over';
+ /**
+ * @property {String} REMOVE
+ * @final
+ * @default destination-out
+ */ exports.BLEND = BLEND;
+ var REMOVE = 'destination-out';
+ /**
+ * @property {String} ADD
+ * @final
+ * @default lighter
+ */ exports.REMOVE = REMOVE;
+ var ADD = 'lighter';
+ //ADD: 'add', //
+ //SUBTRACT: 'subtract', //
+ /**
+ * @property {String} DARKEST
+ * @final
+ */ exports.ADD = ADD;
+ var DARKEST = 'darken';
+ /**
+ * @property {String} LIGHTEST
+ * @final
+ * @default lighten
+ */ exports.DARKEST = DARKEST;
+ var LIGHTEST = 'lighten';
+ /**
+ * @property {String} DIFFERENCE
+ * @final
+ */ exports.LIGHTEST = LIGHTEST;
+ var DIFFERENCE = 'difference';
+ /**
+ * @property {String} SUBTRACT
+ * @final
+ */ exports.DIFFERENCE = DIFFERENCE;
+ var SUBTRACT = 'subtract';
+ /**
+ * @property {String} EXCLUSION
+ * @final
+ */ exports.SUBTRACT = SUBTRACT;
+ var EXCLUSION = 'exclusion';
+ /**
+ * @property {String} MULTIPLY
+ * @final
+ */ exports.EXCLUSION = EXCLUSION;
+ var MULTIPLY = 'multiply';
+ /**
+ * @property {String} SCREEN
+ * @final
+ */ exports.MULTIPLY = MULTIPLY;
+ var SCREEN = 'screen';
+ /**
+ * @property {String} REPLACE
+ * @final
+ * @default copy
+ */ exports.SCREEN = SCREEN;
+ var REPLACE = 'copy';
+ /**
+ * @property {String} OVERLAY
+ * @final
+ */ exports.REPLACE = REPLACE;
+ var OVERLAY = 'overlay';
+ /**
+ * @property {String} HARD_LIGHT
+ * @final
+ */ exports.OVERLAY = OVERLAY;
+ var HARD_LIGHT = 'hard-light';
+ /**
+ * @property {String} SOFT_LIGHT
+ * @final
+ */ exports.HARD_LIGHT = HARD_LIGHT;
+ var SOFT_LIGHT = 'soft-light';
+ /**
+ * @property {String} DODGE
+ * @final
+ * @default color-dodge
+ */ exports.SOFT_LIGHT = SOFT_LIGHT;
+ var DODGE = 'color-dodge';
+ /**
+ * @property {String} BURN
+ * @final
+ * @default color-burn
+ */ exports.DODGE = DODGE;
+ var BURN = 'color-burn';
+
+ // FILTERS
+ /**
+ * @property {String} THRESHOLD
+ * @final
+ */ exports.BURN = BURN;
+ var THRESHOLD = 'threshold';
+ /**
+ * @property {String} GRAY
+ * @final
+ */ exports.THRESHOLD = THRESHOLD;
+ var GRAY = 'gray';
+ /**
+ * @property {String} OPAQUE
+ * @final
+ */ exports.GRAY = GRAY;
+ var OPAQUE = 'opaque';
+ /**
+ * @property {String} INVERT
+ * @final
+ */ exports.OPAQUE = OPAQUE;
+ var INVERT = 'invert';
+ /**
+ * @property {String} POSTERIZE
+ * @final
+ */ exports.INVERT = INVERT;
+ var POSTERIZE = 'posterize';
+ /**
+ * @property {String} DILATE
+ * @final
+ */ exports.POSTERIZE = POSTERIZE;
+ var DILATE = 'dilate';
+ /**
+ * @property {String} ERODE
+ * @final
+ */ exports.DILATE = DILATE;
+ var ERODE = 'erode';
+ /**
+ * @property {String} BLUR
+ * @final
+ */ exports.ERODE = ERODE;
+ var BLUR = 'blur';
+
+ // TYPOGRAPHY
+ /**
+ * @property {String} NORMAL
+ * @final
+ */ exports.BLUR = BLUR;
+ var NORMAL = 'normal';
+ /**
+ * @property {String} ITALIC
+ * @final
+ */ exports.NORMAL = NORMAL;
+ var ITALIC = 'italic';
+ /**
+ * @property {String} BOLD
+ * @final
+ */ exports.ITALIC = ITALIC;
+ var BOLD = 'bold';
+ /**
+ * @property {String} BOLDITALIC
+ * @final
+ */ exports.BOLD = BOLD;
+ var BOLDITALIC = 'bold italic';
+
+ // TYPOGRAPHY-INTERNAL
+ exports.BOLDITALIC = BOLDITALIC;
+ var _DEFAULT_TEXT_FILL = '#000000';
+ exports._DEFAULT_TEXT_FILL = _DEFAULT_TEXT_FILL;
+ var _DEFAULT_LEADMULT = 1.25;
+ exports._DEFAULT_LEADMULT = _DEFAULT_LEADMULT;
+ var _CTX_MIDDLE = 'middle';
+
+ // VERTICES
+ /**
+ * @property {String} LINEAR
+ * @final
+ */ exports._CTX_MIDDLE = _CTX_MIDDLE;
+ var LINEAR = 'linear';
+ /**
+ * @property {String} QUADRATIC
+ * @final
+ */ exports.LINEAR = LINEAR;
+ var QUADRATIC = 'quadratic';
+ /**
+ * @property {String} BEZIER
+ * @final
+ */ exports.QUADRATIC = QUADRATIC;
+ var BEZIER = 'bezier';
+ /**
+ * @property {String} CURVE
+ * @final
+ */ exports.BEZIER = BEZIER;
+ var CURVE = 'curve';
+
+ // WEBGL DRAWMODES
+ /**
+ * @property {String} STROKE
+ * @final
+ */ exports.CURVE = CURVE;
+ var STROKE = 'stroke';
+ /**
+ * @property {String} FILL
+ * @final
+ */ exports.STROKE = STROKE;
+ var FILL = 'fill';
+ /**
+ * @property {String} TEXTURE
+ * @final
+ */ exports.FILL = FILL;
+ var TEXTURE = 'texture';
+ /**
+ * @property {String} IMMEDIATE
+ * @final
+ */ exports.TEXTURE = TEXTURE;
+ var IMMEDIATE = 'immediate';
+
+ // WEBGL TEXTURE MODE
+ // NORMAL already exists for typography
+ /**
+ * @property {String} IMAGE
+ * @final
+ */ exports.IMMEDIATE = IMMEDIATE;
+ var IMAGE = 'image';
+
+ // WEBGL TEXTURE WRAP AND FILTERING
+ // LINEAR already exists above
+ /**
+ * @property {String} NEAREST
+ * @final
+ */ exports.IMAGE = IMAGE;
+ var NEAREST = 'nearest';
+ /**
+ * @property {String} REPEAT
+ * @final
+ */ exports.NEAREST = NEAREST;
+ var REPEAT = 'repeat';
+ /**
+ * @property {String} CLAMP
+ * @final
+ */ exports.REPEAT = REPEAT;
+ var CLAMP = 'clamp';
+ /**
+ * @property {String} MIRROR
+ * @final
+ */ exports.CLAMP = CLAMP;
+ var MIRROR = 'mirror';
+
+ // DEVICE-ORIENTATION
+ /**
+ * @property {String} LANDSCAPE
+ * @final
+ */ exports.MIRROR = MIRROR;
+ var LANDSCAPE = 'landscape';
+ /**
+ * @property {String} PORTRAIT
+ * @final
+ */ exports.LANDSCAPE = LANDSCAPE;
+ var PORTRAIT = 'portrait';
+
+ // DEFAULTS
+ exports.PORTRAIT = PORTRAIT;
+ var _DEFAULT_STROKE = '#000000';
+ exports._DEFAULT_STROKE = _DEFAULT_STROKE;
+ var _DEFAULT_FILL = '#FFFFFF';
+
+ /**
+ * @property {String} GRID
+ * @final
+ */ exports._DEFAULT_FILL = _DEFAULT_FILL;
+ var GRID = 'grid';
+
+ /**
+ * @property {String} AXES
+ * @final
+ */ exports.GRID = GRID;
+ var AXES = 'axes';
+ exports.AXES = AXES;
+ },
+ {}
+ ],
+ 22: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var C = _interopRequireWildcard(_dereq_('./constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Environment
+ * @submodule Environment
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ var standardCursors = [C.ARROW, C.CROSS, C.HAND, C.MOVE, C.TEXT, C.WAIT];
+ _main.default.prototype._frameRate = 0;
+ _main.default.prototype._lastFrameTime = window.performance.now();
+ _main.default.prototype._targetFrameRate = 60;
+
+ var _windowPrint = window.print;
+
+ /**
+ * The print() function writes to the console area of your browser.
+ * This function is often helpful for looking at the data a program is
+ * producing. This function creates a new line of text for each call to
+ * the function. Individual elements can be
+ * separated with quotes ("") and joined with the addition operator (+).
+ *
+ * Note that calling print() without any arguments invokes the window.print()
+ * function which opens the browser's print dialog. To print a blank line
+ * to console you can write print('\n').
+ *
+ * @method print
+ * @param {Any} contents any combination of Number, String, Object, Boolean,
+ * Array to print
+ * @example
+ *
+ * let x = 10;
+ * print('The value of x is ' + x);
+ * // prints "The value of x is 10"
+ *
+ * @alt
+ * default grey canvas
+ */
+ _main.default.prototype.print = function() {
+ if (!arguments.length) {
+ _windowPrint();
+ } else {
+ var _console;
+ (_console = console).log.apply(_console, arguments);
+ }
+ };
+
+ /**
+ * The system variable frameCount contains the number of frames that have
+ * been displayed since the program started. Inside setup() the value is 0,
+ * after the first iteration of draw it is 1, etc.
+ *
+ * @property {Integer} frameCount
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * frameRate(30);
+ * textSize(30);
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(frameCount, width / 2, height / 2);
+ * }
+
+ *
+ * @alt
+ * numbers rapidly counting upward with frame count set to 30.
+ *
+ */
+ _main.default.prototype.frameCount = 0;
+
+ /**
+ * The system variable deltaTime contains the time
+ * difference between the beginning of the previous frame and the beginning
+ * of the current frame in milliseconds.
+ *
+ * This variable is useful for creating time sensitive animation or physics
+ * calculation that should stay constant regardless of frame rate.
+ *
+ * @property {Integer} deltaTime
+ * @readOnly
+ * @example
+ *
+ * let rectX = 0;
+ * let fr = 30; //starting FPS
+ * let clr;
+ *
+ * function setup() {
+ * background(200);
+ * frameRate(fr); // Attempt to refresh at starting FPS
+ * clr = color(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime
+ *
+ * if (rectX >= width) {
+ * // If you go off screen.
+ * if (fr === 30) {
+ * clr = color(0, 0, 255);
+ * fr = 10;
+ * frameRate(fr); // make frameRate 10 FPS
+ * } else {
+ * clr = color(255, 0, 0);
+ * fr = 30;
+ * frameRate(fr); // make frameRate 30 FPS
+ * }
+ * rectX = 0;
+ * }
+ * fill(clr);
+ * rect(rectX, 40, 20, 20);
+ * }
+ *
+ *
+ * @alt
+ * red rect moves left to right, followed by blue rect moving at the same speed
+ * with a lower frame rate. Loops.
+ *
+ */
+ _main.default.prototype.deltaTime = 0;
+
+ /**
+ * Confirms if the window a p5.js program is in is "focused," meaning that
+ * the sketch will accept mouse or keyboard input. This variable is
+ * "true" if the window is focused and "false" if not.
+ *
+ * @property {Boolean} focused
+ * @readOnly
+ * @example
+ *
+ * // To demonstrate, put two windows side by side.
+ * // Click on the window that the p5 sketch isn't in!
+ * function draw() {
+ * background(200);
+ * noStroke();
+ * fill(0, 200, 0);
+ * ellipse(25, 25, 50, 50);
+ *
+ * if (!focused) {
+ // or "if (focused === false)"
+ * stroke(200, 0, 0);
+ * line(0, 0, 100, 100);
+ * line(100, 0, 0, 100);
+ * }
+ * }
+ *
+ *
+ * @alt
+ * green 50x50 ellipse at top left. Red X covers canvas when page focus changes
+ *
+ */
+ _main.default.prototype.focused = document.hasFocus();
+
+ /**
+ * Sets the cursor to a predefined symbol or an image, or makes it visible
+ * if already hidden. If you are trying to set an image as the cursor, the
+ * recommended size is 16x16 or 32x32 pixels. The values for parameters x and y
+ * must be less than the dimensions of the image.
+ *
+ * @method cursor
+ * @param {String|Constant} type Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT
+ * Native CSS properties: 'grab', 'progress', 'cell' etc.
+ * External: path for cursor's images
+ * (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)
+ * For more information on Native CSS cursors and url visit:
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+ * @param {Number} [x] the horizontal active spot of the cursor (must be less than 32)
+ * @param {Number} [y] the vertical active spot of the cursor (must be less than 32)
+ * @example
+ *
+ * // Move the mouse across the quadrants
+ * // to see the cursor change
+ * function draw() {
+ * line(width / 2, 0, width / 2, height);
+ * line(0, height / 2, width, height / 2);
+ * if (mouseX < 50 && mouseY < 50) {
+ * cursor(CROSS);
+ * } else if (mouseX > 50 && mouseY < 50) {
+ * cursor('progress');
+ * } else if (mouseX > 50 && mouseY > 50) {
+ * cursor('https://s3.amazonaws.com/mupublicdata/cursor.cur');
+ * } else {
+ * cursor('grab');
+ * }
+ * }
+ *
+ *
+ * @alt
+ * canvas is divided into four quadrants. cursor on first is a cross, second is a progress,
+ * third is a custom cursor using path to the cursor and fourth is a grab.
+ *
+ */
+ _main.default.prototype.cursor = function(type, x, y) {
+ var cursor = 'auto';
+ var canvas = this._curElement.elt;
+ if (standardCursors.includes(type)) {
+ // Standard css cursor
+ cursor = type;
+ } else if (typeof type === 'string') {
+ var coords = '';
+ if (x && y && typeof x === 'number' && typeof y === 'number') {
+ // Note that x and y values must be unit-less positive integers < 32
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+ coords = ''.concat(x, ' ').concat(y);
+ }
+ if (
+ type.substring(0, 7) === 'http://' ||
+ type.substring(0, 8) === 'https://'
+ ) {
+ // Image (absolute url)
+ cursor = 'url('.concat(type, ') ').concat(coords, ', auto');
+ } else if (/\.(cur|jpg|jpeg|gif|png|CUR|JPG|JPEG|GIF|PNG)$/.test(type)) {
+ // Image file (relative path) - Separated for performance reasons
+ cursor = 'url('.concat(type, ') ').concat(coords, ', auto');
+ } else {
+ // Any valid string for the css cursor property
+ cursor = type;
+ }
+ }
+ canvas.style.cursor = cursor;
+ };
+
+ /**
+ * Specifies the number of frames to be displayed every second. For example,
+ * the function call frameRate(30) will attempt to refresh 30 times a second.
+ * If the processor is not fast enough to maintain the specified rate, the
+ * frame rate will not be achieved. Setting the frame rate within setup() is
+ * recommended. The default frame rate is based on the frame rate of the display
+ * (here also called "refresh rate"), which is set to 60 frames per second on most
+ * computers. A frame rate of 24 frames per second (usual for movies) or above
+ * will be enough for smooth animations
+ * This is the same as setFrameRate(val).
+ *
+ * Calling frameRate() with no arguments returns the current framerate. The
+ * draw function must run at least once before it will return a value. This
+ * is the same as getFrameRate().
+ *
+ * Calling frameRate() with arguments that are not of the type numbers
+ * or are non positive also returns current framerate.
+ *
+ * @method frameRate
+ * @param {Number} fps number of frames to be displayed every second
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * let rectX = 0;
+ * let fr = 30; //starting FPS
+ * let clr;
+ *
+ * function setup() {
+ * background(200);
+ * frameRate(fr); // Attempt to refresh at starting FPS
+ * clr = color(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rectX = rectX += 1; // Move Rectangle
+ *
+ * if (rectX >= width) {
+ // If you go off screen.
+ * if (fr === 30) {
+ * clr = color(0, 0, 255);
+ * fr = 10;
+ * frameRate(fr); // make frameRate 10 FPS
+ * } else {
+ * clr = color(255, 0, 0);
+ * fr = 30;
+ * frameRate(fr); // make frameRate 30 FPS
+ * }
+ * rectX = 0;
+ * }
+ * fill(clr);
+ * rect(rectX, 40, 20, 20);
+ * }
+ *
+ *
+ * @alt
+ * blue rect moves left to right, followed by red rect moving faster. Loops.
+ *
+ */
+ /**
+ * @method frameRate
+ * @return {Number} current frameRate
+ */
+ _main.default.prototype.frameRate = function(fps) {
+ _main.default._validateParameters('frameRate', arguments);
+ if (typeof fps !== 'number' || fps < 0) {
+ return this._frameRate;
+ } else {
+ this._setProperty('_targetFrameRate', fps);
+ if (fps === 0) {
+ this._setProperty('_frameRate', fps);
+ }
+ return this;
+ }
+ };
+ /**
+ * Returns the current framerate.
+ *
+ * @private
+ * @return {Number} current frameRate
+ */
+ _main.default.prototype.getFrameRate = function() {
+ return this.frameRate();
+ };
+
+ /**
+ * Specifies the number of frames to be displayed every second. For example,
+ * the function call frameRate(30) will attempt to refresh 30 times a second.
+ * If the processor is not fast enough to maintain the specified rate, the
+ * frame rate will not be achieved. Setting the frame rate within setup() is
+ * recommended. The default rate is 60 frames per second.
+ *
+ * Calling frameRate() with no arguments returns the current framerate.
+ *
+ * @private
+ * @param {Number} [fps] number of frames to be displayed every second
+ */
+ _main.default.prototype.setFrameRate = function(fps) {
+ return this.frameRate(fps);
+ };
+
+ /**
+ * Hides the cursor from view.
+ *
+ * @method noCursor
+ * @example
+ *
+ * function setup() {
+ * noCursor();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * ellipse(mouseX, mouseY, 10, 10);
+ * }
+ *
+ *
+ *
+ * @alt
+ * cursor becomes 10x 10 white ellipse the moves with mouse x and y.
+ *
+ */
+ _main.default.prototype.noCursor = function() {
+ this._curElement.elt.style.cursor = 'none';
+ };
+
+ /**
+ * System variable that stores the width of the screen display according to The
+ * default pixelDensity. This is used to run a
+ * full-screen program on any display size. To return actual screen size,
+ * multiply this by pixelDensity.
+ *
+ * @property {Number} displayWidth
+ * @readOnly
+ * @example
+ *
+ * createCanvas(displayWidth, displayHeight);
+ *
+ *
+ * @alt
+ * cursor becomes 10x 10 white ellipse the moves with mouse x and y.
+ *
+ */
+ _main.default.prototype.displayWidth = screen.width;
+
+ /**
+ * System variable that stores the height of the screen display according to The
+ * default pixelDensity. This is used to run a
+ * full-screen program on any display size. To return actual screen size,
+ * multiply this by pixelDensity.
+ *
+ * @property {Number} displayHeight
+ * @readOnly
+ * @example
+ *
+ * createCanvas(displayWidth, displayHeight);
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.prototype.displayHeight = screen.height;
+
+ /**
+ * System variable that stores the width of the inner window, it maps to
+ * window.innerWidth.
+ *
+ * @property {Number} windowWidth
+ * @readOnly
+ * @example
+ *
+ * createCanvas(windowWidth, windowHeight);
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.prototype.windowWidth = getWindowWidth();
+ /**
+ * System variable that stores the height of the inner window, it maps to
+ * window.innerHeight.
+ *
+ * @property {Number} windowHeight
+ * @readOnly
+ * @example
+ *
+ * createCanvas(windowWidth, windowHeight);
+ *
+ *@alt
+ * no display.
+ *
+ */
+ _main.default.prototype.windowHeight = getWindowHeight();
+
+ /**
+ * The windowResized() function is called once every time the browser window
+ * is resized. This is a good place to resize the canvas or do any other
+ * adjustments to accommodate the new window size.
+ *
+ * @method windowResized
+ * @example
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * function draw() {
+ * background(0, 100, 200);
+ * }
+ *
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * @alt
+ * no display.
+ */
+ _main.default.prototype._onresize = function(e) {
+ this._setProperty('windowWidth', getWindowWidth());
+ this._setProperty('windowHeight', getWindowHeight());
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ if (typeof context.windowResized === 'function') {
+ executeDefault = context.windowResized(e);
+ if (executeDefault !== undefined && !executeDefault) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ function getWindowWidth() {
+ return (
+ window.innerWidth ||
+ (document.documentElement && document.documentElement.clientWidth) ||
+ (document.body && document.body.clientWidth) ||
+ 0
+ );
+ }
+
+ function getWindowHeight() {
+ return (
+ window.innerHeight ||
+ (document.documentElement && document.documentElement.clientHeight) ||
+ (document.body && document.body.clientHeight) ||
+ 0
+ );
+ }
+
+ /**
+ * System variable that stores the width of the drawing canvas. This value
+ * is set by the first parameter of the createCanvas() function.
+ * For example, the function call createCanvas(320, 240) sets the width
+ * variable to the value 320. The value of width defaults to 100 if
+ * createCanvas() is not used in a program.
+ *
+ * @property {Number} width
+ * @readOnly
+ */
+ _main.default.prototype.width = 0;
+
+ /**
+ * System variable that stores the height of the drawing canvas. This value
+ * is set by the second parameter of the createCanvas() function. For
+ * example, the function call createCanvas(320, 240) sets the height
+ * variable to the value 240. The value of height defaults to 100 if
+ * createCanvas() is not used in a program.
+ *
+ * @property {Number} height
+ * @readOnly
+ */
+ _main.default.prototype.height = 0;
+
+ /**
+ * If argument is given, sets the sketch to fullscreen or not based on the
+ * value of the argument. If no argument is given, returns the current
+ * fullscreen state. Note that due to browser restrictions this can only
+ * be called on user input, for example, on mouse press like the example
+ * below.
+ *
+ * @method fullscreen
+ * @param {Boolean} [val] whether the sketch should be in fullscreen mode
+ * or not
+ * @return {Boolean} current fullscreen state
+ * @example
+ *
+ *
+ * // Clicking in the box toggles fullscreen on and off.
+ * function setup() {
+ * background(200);
+ * }
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * let fs = fullscreen();
+ * fullscreen(!fs);
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.prototype.fullscreen = function(val) {
+ _main.default._validateParameters('fullscreen', arguments);
+ // no arguments, return fullscreen or not
+ if (typeof val === 'undefined') {
+ return (
+ document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.mozFullScreenElement ||
+ document.msFullscreenElement
+ );
+ } else {
+ // otherwise set to fullscreen or not
+ if (val) {
+ launchFullscreen(document.documentElement);
+ } else {
+ exitFullscreen();
+ }
+ }
+ };
+
+ /**
+ * Sets the pixel scaling for high pixel density displays. By default
+ * pixel density is set to match display density, call pixelDensity(1)
+ * to turn this off. Calling pixelDensity() with no arguments returns
+ * the current pixel density of the sketch.
+ *
+ * @method pixelDensity
+ * @param {Number} val whether or how much the sketch should scale
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * pixelDensity(1);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * pixelDensity(3.0);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * fuzzy 50x50 white ellipse with black outline in center of canvas.
+ * sharp 50x50 white ellipse with black outline in center of canvas.
+ */
+ /**
+ * @method pixelDensity
+ * @returns {Number} current pixel density of the sketch
+ */
+ _main.default.prototype.pixelDensity = function(val) {
+ _main.default._validateParameters('pixelDensity', arguments);
+ var returnValue;
+ if (typeof val === 'number') {
+ if (val !== this._pixelDensity) {
+ this._pixelDensity = val;
+ }
+ returnValue = this;
+ this.resizeCanvas(this.width, this.height, true); // as a side effect, it will clear the canvas
+ } else {
+ returnValue = this._pixelDensity;
+ }
+ return returnValue;
+ };
+
+ /**
+ * Returns the pixel density of the current display the sketch is running on.
+ *
+ * @method displayDensity
+ * @returns {Number} current pixel density of the display
+ * @example
+ *
+ *
+ * function setup() {
+ * let density = displayDensity();
+ * pixelDensity(density);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 white ellipse with black outline in center of canvas.
+ */
+ _main.default.prototype.displayDensity = function() {
+ return window.devicePixelRatio;
+ };
+
+ function launchFullscreen(element) {
+ var enabled =
+ document.fullscreenEnabled ||
+ document.webkitFullscreenEnabled ||
+ document.mozFullScreenEnabled ||
+ document.msFullscreenEnabled;
+ if (!enabled) {
+ throw new Error('Fullscreen not enabled in this browser.');
+ }
+ if (element.requestFullscreen) {
+ element.requestFullscreen();
+ } else if (element.mozRequestFullScreen) {
+ element.mozRequestFullScreen();
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen();
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen();
+ }
+ }
+
+ function exitFullscreen() {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ }
+ }
+
+ /**
+ * Gets the current URL.
+ * @method getURL
+ * @return {String} url
+ * @example
+ *
+ *
+ * let url;
+ * let x = 100;
+ *
+ * function setup() {
+ * fill(0);
+ * noStroke();
+ * url = getURL();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(url, x, height / 2);
+ * x--;
+ * }
+ *
+ *
+ *
+ * @alt
+ * current url (http://p5js.org/reference/#/p5/getURL) moves right to left.
+ *
+ */
+ _main.default.prototype.getURL = function() {
+ return location.href;
+ };
+ /**
+ * Gets the current URL path as an array.
+ * @method getURLPath
+ * @return {String[]} path components
+ * @example
+ *
+ * function setup() {
+ * let urlPath = getURLPath();
+ * for (let i = 0; i < urlPath.length; i++) {
+ * text(urlPath[i], 10, i * 20 + 20);
+ * }
+ * }
+ *
+ *
+ * @alt
+ *no display
+ *
+ */
+ _main.default.prototype.getURLPath = function() {
+ return location.pathname.split('/').filter(function(v) {
+ return v !== '';
+ });
+ };
+ /**
+ * Gets the current URL params as an Object.
+ * @method getURLParams
+ * @return {Object} URL params
+ * @example
+ *
+ *
+ * // Example: http://p5js.org?year=2014&month=May&day=15
+ *
+ * function setup() {
+ * let params = getURLParams();
+ * text(params.day, 10, 20);
+ * text(params.month, 10, 40);
+ * text(params.year, 10, 60);
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.prototype.getURLParams = function() {
+ var re = /[?&]([^&=]+)(?:[&=])([^&=]+)/gim;
+ var m;
+ var v = {};
+ while ((m = re.exec(location.search)) != null) {
+ if (m.index === re.lastIndex) {
+ re.lastIndex++;
+ }
+ v[m[1]] = m[2];
+ }
+ return v;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { './constants': 21, './main': 27 }
+ ],
+ 23: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError(
+ "this hasn't been initialised - super() hasn't been called"
+ );
+ }
+ return self;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: { value: subClass, writable: true, configurable: true }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _wrapNativeSuper(Class) {
+ var _cache = typeof Map === 'function' ? new Map() : undefined;
+ _wrapNativeSuper = function _wrapNativeSuper(Class) {
+ if (Class === null || !_isNativeFunction(Class)) return Class;
+ if (typeof Class !== 'function') {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ if (typeof _cache !== 'undefined') {
+ if (_cache.has(Class)) return _cache.get(Class);
+ _cache.set(Class, Wrapper);
+ }
+ function Wrapper() {
+ return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+ }
+ Wrapper.prototype = Object.create(Class.prototype, {
+ constructor: {
+ value: Wrapper,
+ enumerable: false,
+ writable: true,
+ configurable: true
+ }
+ });
+ return _setPrototypeOf(Wrapper, Class);
+ };
+ return _wrapNativeSuper(Class);
+ }
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [], function() {}));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ function _construct(Parent, args, Class) {
+ if (isNativeReflectConstruct()) {
+ _construct = Reflect.construct;
+ } else {
+ _construct = function _construct(Parent, args, Class) {
+ var a = [null];
+ a.push.apply(a, args);
+ var Constructor = Function.bind.apply(Parent, a);
+ var instance = new Constructor();
+ if (Class) _setPrototypeOf(instance, Class.prototype);
+ return instance;
+ };
+ }
+ return _construct.apply(null, arguments);
+ }
+ function _isNativeFunction(fn) {
+ return Function.toString.call(fn).indexOf('[native code]') !== -1;
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf =
+ Object.setPrototypeOf ||
+ function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf
+ ? Object.getPrototypeOf
+ : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj &&
+ typeof Symbol === 'function' &&
+ obj.constructor === Symbol &&
+ obj !== Symbol.prototype
+ ? 'symbol'
+ : typeof obj;
+ };
+ }
+ return _typeof(obj);
+ }
+
+ // p5.js blue, p5.js orange, auto dark green; fallback p5.js darkened magenta
+ // See testColors below for all the color codes and names
+ var typeColors = ['#2D7BB6', '#EE9900', '#4DB200', '#C83C00'];
+
+ if (typeof IS_MINIFIED !== 'undefined') {
+ _main.default._validateParameters = _main.default._friendlyFileLoadError = _main.default._friendlyError = function() {};
+ } else {
+ var doFriendlyWelcome = false; // TEMP until we get it all working LM
+ // for parameter validation
+ var dataDoc = _dereq_('../../docs/reference/data.json');
+ var arrDoc = JSON.parse(JSON.stringify(dataDoc));
+
+ // -- Borrowed from jQuery 1.11.3 --
+ var class2type = {};
+ var _toString = class2type.toString;
+ var names = [
+ 'Boolean',
+ 'Number',
+ 'String',
+ 'Function',
+ 'Array',
+ 'Date',
+ 'RegExp',
+ 'Object',
+ 'Error'
+ ];
+
+ for (var n = 0; n < names.length; n++) {
+ class2type['[object '.concat(names[n], ']')] = names[n].toLowerCase();
+ }
+ var getType = function getType(obj) {
+ if (obj == null) {
+ return ''.concat(obj);
+ }
+ return _typeof(obj) === 'object' || typeof obj === 'function'
+ ? class2type[_toString.call(obj)] || 'object'
+ : _typeof(obj);
+ };
+
+ // -- End borrow --
+
+ var friendlyWelcome = function friendlyWelcome() {
+ // p5.js brand - magenta: #ED225D
+ //const astrixBgColor = 'transparent';
+ //const astrixTxtColor = '#ED225D';
+ //const welcomeBgColor = '#ED225D';
+ //const welcomeTextColor = 'white';
+ console.log(
+ ' _ \n' +
+ ' /\\| |/\\ \n' +
+ " \\ ` ' / \n" +
+ ' / , . \\ \n' +
+ ' \\/|_|\\/ ' +
+ '\n\n> p5.js says: Welcome! ' +
+ 'This is your friendly debugger. ' +
+ 'To turn me off switch to using “p5.min.js”.'
+ );
+ };
+
+ /**
+ * Prints out a fancy, colorful message to the console log
+ *
+ * @method report
+ * @private
+ * @param {String} message the words to be said
+ * @param {String} func the name of the function to link
+ * @param {Number|String} color CSS color string or error type
+ *
+ * @return console logs
+ */
+ var report = function report(message, func, color) {
+ if (doFriendlyWelcome) {
+ friendlyWelcome();
+ doFriendlyWelcome = false;
+ }
+ if ('undefined' === getType(color)) {
+ color = '#B40033'; // dark magenta
+ } else if (getType(color) === 'number') {
+ // Type to color
+ color = typeColors[color];
+ }
+ if (func === 'loadX') {
+ console.log('> p5.js says: '.concat(message));
+ } else if (func.substring(0, 4) === 'load') {
+ console.log(
+ '> p5.js says: '.concat(
+ message,
+ '[https://github.com/processing/p5.js/wiki/Local-server]'
+ )
+ );
+ } else {
+ console.log(
+ '> p5.js says: '
+ .concat(message, ' [http://p5js.org/reference/#p5/')
+ .concat(func, ']')
+ );
+ }
+ };
+
+ var errorCases = {
+ '0': {
+ fileType: 'image',
+ method: 'loadImage',
+ message: ' hosting the image online,'
+ },
+
+ '1': {
+ fileType: 'XML file',
+ method: 'loadXML'
+ },
+
+ '2': {
+ fileType: 'table file',
+ method: 'loadTable'
+ },
+
+ '3': {
+ fileType: 'text file',
+ method: 'loadStrings'
+ },
+
+ '4': {
+ fileType: 'font',
+ method: 'loadFont',
+ message: ' hosting the font online,'
+ },
+
+ '5': {
+ fileType: 'json',
+ method: 'loadJSON'
+ },
+
+ '6': {
+ fileType: 'file',
+ method: 'loadBytes'
+ },
+
+ '7': {
+ method: 'loadX',
+ message:
+ "In case your large file isn't fetched successfully," +
+ 'we recommend splitting the file into smaller segments and fetching those.'
+ },
+
+ '8': {
+ method: 'loadImage',
+ message:
+ 'There was some trouble loading your GIF. Make sure that your' +
+ ' GIF is using 87a or 89a encoding.'
+ }
+ };
+
+ /**
+ * This is called internally if there is a error during file loading.
+ *
+ * @method _friendlyFileLoadError
+ * @private
+ * @param {Number} errorType
+ * @param {String} filePath
+ */
+ _main.default._friendlyFileLoadError = function(errorType, filePath) {
+ var errorInfo = errorCases[errorType];
+ var message;
+ if (errorType === 7 || errorType === 8) {
+ message = errorInfo.message;
+ } else {
+ message = 'It looks like there was a problem loading your '
+ .concat(errorInfo.fileType, '. Try checking if the file path [')
+ .concat(filePath, '] is correct,')
+ .concat(errorInfo.message || '', ' or running a local server.');
+ }
+ report(message, errorInfo.method, 3);
+ };
+
+ /**
+ * This is a generic method that can be called from anywhere in the p5
+ * library to alert users to a common error.
+ *
+ * @method _friendlyError
+ * @private
+ * @param {Number} message message to be printed
+ * @param {String} method name of method
+ */
+ _main.default._friendlyError = function(message, method) {
+ report(message, method);
+ };
+
+ var docCache = {};
+ var builtinTypes = [
+ 'null',
+ 'number',
+ 'string',
+ 'boolean',
+ 'constant',
+ 'function',
+ 'any',
+ 'integer'
+ ];
+
+ // validateParameters() helper functions:
+ // lookupParamDoc() for querying data.json
+ var lookupParamDoc = function lookupParamDoc(func) {
+ // look for the docs in the `data.json` datastructure
+
+ var ichDot = func.lastIndexOf('.');
+ var funcName = func.substr(ichDot + 1);
+ var funcClass = func.substr(0, ichDot) || 'p5';
+
+ var queryResult;
+ var classitems = arrDoc.classitems;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = classitems[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var x = _step.value;
+ if (x.name === funcName && x.class === funcClass) {
+ queryResult = x;
+ break;
+ }
+ }
+
+ // different JSON structure for funct with multi-format
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ var overloads = [];
+ if (queryResult.hasOwnProperty('overloads')) {
+ // add all the overloads
+ for (var i = 0; i < queryResult.overloads.length; i++) {
+ overloads.push({ formats: queryResult.overloads[i].params });
+ }
+ } else {
+ // no overloads, just add the main method definition
+ overloads.push({ formats: queryResult.params || [] });
+ }
+
+ // parse the parameter types for each overload
+ var mapConstants = {};
+ var maxParams = 0;
+ overloads.forEach(function(overload) {
+ var formats = overload.formats;
+
+ // keep a record of the maximum number of arguments
+ // this method requires.
+ if (maxParams < formats.length) {
+ maxParams = formats.length;
+ }
+
+ // calculate the minimum number of arguments
+ // this overload requires.
+ var minParams = formats.length;
+ while (minParams > 0 && formats[minParams - 1].optional) {
+ minParams--;
+ }
+ overload.minParams = minParams;
+
+ // loop through each parameter position, and parse its types
+ formats.forEach(function(format) {
+ // split this parameter's types
+ format.types = format.type.split('|').map(function ct(type) {
+ // array
+ if (type.substr(type.length - 2, 2) === '[]') {
+ return {
+ name: type,
+ array: ct(type.substr(0, type.length - 2))
+ };
+ }
+
+ var lowerType = type.toLowerCase();
+
+ // contant
+ if (lowerType === 'constant') {
+ var constant;
+ if (mapConstants.hasOwnProperty(format.name)) {
+ constant = mapConstants[format.name];
+ } else {
+ // parse possible constant values from description
+ var myRe = /either\s+(?:[A-Z0-9_]+\s*,?\s*(?:or)?\s*)+/g;
+ var values = {};
+ var _names = [];
+
+ constant = mapConstants[format.name] = {
+ values: values,
+ names: _names
+ };
+
+ var myArray = myRe.exec(format.description);
+ if (func === 'endShape' && format.name === 'mode') {
+ values[constants.CLOSE] = true;
+ _names.push('CLOSE');
+ } else {
+ var match = myArray[0];
+ var reConst = /[A-Z0-9_]+/g;
+ var matchConst;
+ while ((matchConst = reConst.exec(match)) !== null) {
+ var name = matchConst[0];
+ if (constants.hasOwnProperty(name)) {
+ values[constants[name]] = true;
+ _names.push(name);
+ }
+ }
+ }
+ }
+ return {
+ name: type,
+ builtin: lowerType,
+ names: constant.names,
+ values: constant.values
+ };
+ }
+
+ // function
+ if (lowerType.substr(0, 'function'.length) === 'function') {
+ lowerType = 'function';
+ }
+ // builtin
+ if (builtinTypes.includes(lowerType)) {
+ return { name: type, builtin: lowerType };
+ }
+
+ // find type's prototype
+ var t = window;
+ var typeParts = type.split('.');
+
+ // special-case 'p5' since it may be non-global
+ if (typeParts[0] === 'p5') {
+ t = _main.default;
+ typeParts.shift();
+ }
+
+ typeParts.forEach(function(p) {
+ t = t && t[p];
+ });
+ if (t) {
+ return { name: type, prototype: t };
+ }
+
+ return { name: type, type: lowerType };
+ });
+ });
+ });
+ return {
+ overloads: overloads,
+ maxParams: maxParams
+ };
+ };
+
+ var isNumber = function isNumber(param) {
+ switch (_typeof(param)) {
+ case 'number':
+ return true;
+ case 'string':
+ return !isNaN(param);
+ default:
+ return false;
+ }
+ };
+
+ var testParamType = function testParamType(param, type) {
+ var isArray = param instanceof Array;
+ var matches = true;
+ if (type.array && isArray) {
+ for (var i = 0; i < param.length; i++) {
+ var error = testParamType(param[i], type.array);
+ if (error) return error / 2; // half error for elements
+ }
+ } else if (type.prototype) {
+ matches = param instanceof type.prototype;
+ } else if (type.builtin) {
+ switch (type.builtin) {
+ case 'number':
+ matches = isNumber(param);
+ break;
+ case 'integer':
+ matches = isNumber(param) && Number(param) === Math.floor(param);
+ break;
+ case 'boolean':
+ case 'any':
+ matches = true;
+ break;
+ case 'array':
+ matches = isArray;
+ break;
+ case 'string':
+ matches = /*typeof param === 'number' ||*/ typeof param === 'string';
+ break;
+ case 'constant':
+ matches = type.values.hasOwnProperty(param);
+ break;
+ case 'function':
+ matches = param instanceof Function;
+ break;
+ case 'null':
+ matches = param === null;
+ break;
+ }
+ } else {
+ matches = _typeof(param) === type.t;
+ }
+ return matches ? 0 : 1;
+ };
+
+ // testType() for non-object type parameter validation
+ var testParamTypes = function testParamTypes(param, types) {
+ var minScore = 9999;
+ for (var i = 0; minScore > 0 && i < types.length; i++) {
+ var score = testParamType(param, types[i]);
+ if (minScore > score) minScore = score;
+ }
+ return minScore;
+ };
+
+ // generate a score (higher is worse) for applying these args to
+ // this overload.
+ var scoreOverload = function scoreOverload(args, argCount, overload, minScore) {
+ var score = 0;
+ var formats = overload.formats;
+ var minParams = overload.minParams;
+
+ // check for too few/many args
+ // the score is double number of extra/missing args
+ if (argCount < minParams) {
+ score = (minParams - argCount) * 2;
+ } else if (argCount > formats.length) {
+ score = (argCount - formats.length) * 2;
+ }
+
+ // loop through the formats, adding up the error score for each arg.
+ // quit early if the score gets higher than the previous best overload.
+ for (var p = 0; score <= minScore && p < formats.length; p++) {
+ var arg = args[p];
+ var format = formats[p];
+ // '== null' checks for 'null' and typeof 'undefined'
+ if (arg == null) {
+ // handle non-optional and non-trailing undefined args
+ if (!format.optional || p < minParams || p < argCount) {
+ score += 1;
+ }
+ } else {
+ score += testParamTypes(arg, format.types);
+ }
+ }
+ return score;
+ };
+
+ // gets a list of errors for this overload
+ var getOverloadErrors = function getOverloadErrors(args, argCount, overload) {
+ var formats = overload.formats;
+ var minParams = overload.minParams;
+
+ // check for too few/many args
+ if (argCount < minParams) {
+ return [
+ {
+ type: 'TOO_FEW_ARGUMENTS',
+ argCount: argCount,
+ minParams: minParams
+ }
+ ];
+ } else if (argCount > formats.length) {
+ return [
+ {
+ type: 'TOO_MANY_ARGUMENTS',
+ argCount: argCount,
+ maxParams: formats.length
+ }
+ ];
+ }
+
+ var errorArray = [];
+ for (var p = 0; p < formats.length; p++) {
+ var arg = args[p];
+ var format = formats[p];
+ // '== null' checks for 'null' and typeof 'undefined'
+ if (arg == null) {
+ // handle non-optional and non-trailing undefined args
+ if (!format.optional || p < minParams || p < argCount) {
+ errorArray.push({
+ type: 'EMPTY_VAR',
+ position: p,
+ format: format
+ });
+ }
+ } else if (testParamTypes(arg, format.types) > 0) {
+ errorArray.push({
+ type: 'WRONG_TYPE',
+ position: p,
+ format: format,
+ arg: arg
+ });
+ }
+ }
+
+ return errorArray;
+ };
+
+ // a custom error type, used by the mocha
+ // tests when expecting validation errors
+ _main.default.ValidationError = (function(name) {
+ var err = /*#__PURE__*/ (function(_Error) {
+ _inherits(err, _Error);
+ function err(message, func) {
+ var _this;
+ _classCallCheck(this, err);
+ _this = _possibleConstructorReturn(this, _getPrototypeOf(err).call(this));
+ _this.message = message;
+ _this.func = func;
+ if ('captureStackTrace' in Error)
+ Error.captureStackTrace(_assertThisInitialized(_this), err);
+ else _this.stack = new Error().stack;
+ return _this;
+ }
+ return err;
+ })(_wrapNativeSuper(Error));
+
+ err.prototype.name = name;
+ return err;
+ })('ValidationError');
+
+ // function for generating console.log() msg
+ _main.default._friendlyParamError = function(errorObj, func) {
+ var message;
+
+ function formatType() {
+ var format = errorObj.format;
+ return format.types
+ .map(function(type) {
+ return type.names ? type.names.join('|') : type.name;
+ })
+ .join('|');
+ }
+
+ switch (errorObj.type) {
+ case 'EMPTY_VAR': {
+ message = ''
+ .concat(func, '() was expecting ')
+ .concat(formatType(), ' for parameter #')
+ .concat(
+ errorObj.position,
+ ' (zero-based index), received an empty variable instead. If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]'
+ );
+
+ break;
+ }
+ case 'WRONG_TYPE': {
+ var arg = errorObj.arg;
+ var argType =
+ arg instanceof Array
+ ? 'array'
+ : arg === null ? 'null' : arg.name || _typeof(arg);
+ message = ''
+ .concat(func, '() was expecting ')
+ .concat(formatType(), ' for parameter #')
+ .concat(errorObj.position, ' (zero-based index), received ')
+ .concat(argType, ' instead');
+ break;
+ }
+ case 'TOO_FEW_ARGUMENTS': {
+ message = ''
+ .concat(func, '() was expecting at least ')
+ .concat(errorObj.minParams, ' arguments, but received only ')
+ .concat(errorObj.argCount);
+ break;
+ }
+ case 'TOO_MANY_ARGUMENTS': {
+ message = ''
+ .concat(func, '() was expecting no more than ')
+ .concat(errorObj.maxParams, ' arguments, but received ')
+ .concat(errorObj.argCount);
+ break;
+ }
+ }
+
+ if (message) {
+ if (_main.default._throwValidationErrors) {
+ throw new _main.default.ValidationError(message);
+ }
+
+ try {
+ var re = /Function\.validateParameters.*[\r\n].*[\r\n].*\(([^)]*)/;
+ var location = re.exec(new Error().stack)[1];
+ if (location) {
+ message += ' at '.concat(location);
+ }
+ } catch (err) {}
+
+ report(''.concat(message, '.'), func, 3);
+ }
+ };
+
+ /**
+ * Validates parameters
+ * param {String} func the name of the function
+ * param {Array} args user input arguments
+ *
+ * example:
+ * const a;
+ * ellipse(10,10,a,5);
+ * console ouput:
+ * "It looks like ellipse received an empty variable in spot #2."
+ *
+ * example:
+ * ellipse(10,"foo",5,5);
+ * console output:
+ * "ellipse was expecting a number for parameter #1,
+ * received "foo" instead."
+ */
+ _main.default._validateParameters = function validateParameters(func, args) {
+ if (_main.default.disableFriendlyErrors) {
+ return; // skip FES
+ }
+
+ // lookup the docs in the 'data.json' file
+ var docs = docCache[func] || (docCache[func] = lookupParamDoc(func));
+ var overloads = docs.overloads;
+
+ // ignore any trailing `undefined` arguments
+ var argCount = args.length;
+ // '== null' checks for 'null' and typeof 'undefined'
+ while (argCount > 0 && args[argCount - 1] == null) {
+ argCount--;
+ }
+
+ // find the overload with the best score
+ var minScore = 99999;
+ var minOverload;
+ for (var i = 0; i < overloads.length; i++) {
+ var score = scoreOverload(args, argCount, overloads[i], minScore);
+ if (score === 0) {
+ return; // done!
+ } else if (minScore > score) {
+ // this score is better that what we have so far...
+ minScore = score;
+ minOverload = i;
+ }
+ }
+
+ // this should _always_ be true here...
+ if (minScore > 0) {
+ // get the errors for the best overload
+ var errorArray = getOverloadErrors(args, argCount, overloads[minOverload]);
+
+ // generate err msg
+ for (var _n = 0; _n < errorArray.length; _n++) {
+ _main.default._friendlyParamError(errorArray[_n], func);
+ }
+ }
+ };
+
+ /**
+ * Prints out all the colors in the color pallete with white text.
+ * For color blindness testing.
+ */
+ /* function testColors() {
+ const str = 'A box of biscuits, a box of mixed biscuits and a biscuit mixer';
+ report(str, 'print', '#ED225D'); // p5.js magenta
+ report(str, 'print', '#2D7BB6'); // p5.js blue
+ report(str, 'print', '#EE9900'); // p5.js orange
+ report(str, 'print', '#A67F59'); // p5.js light brown
+ report(str, 'print', '#704F21'); // p5.js gold
+ report(str, 'print', '#1CC581'); // auto cyan
+ report(str, 'print', '#FF6625'); // auto orange
+ report(str, 'print', '#79EB22'); // auto green
+ report(str, 'print', '#B40033'); // p5.js darkened magenta
+ report(str, 'print', '#084B7F'); // p5.js darkened blue
+ report(str, 'print', '#945F00'); // p5.js darkened orange
+ report(str, 'print', '#6B441D'); // p5.js darkened brown
+ report(str, 'print', '#2E1B00'); // p5.js darkened gold
+ report(str, 'print', '#008851'); // auto dark cyan
+ report(str, 'print', '#C83C00'); // auto dark orange
+ report(str, 'print', '#4DB200'); // auto dark green
+ } */
+
+ _main.default.prototype._validateParameters = _main.default.validateParameters;
+ }
+
+ // This is a lazily-defined list of p5 symbols that may be
+ // misused by beginners at top-level code, outside of setup/draw. We'd like
+ // to detect these errors and help the user by suggesting they move them
+ // into setup/draw.
+ //
+ // For more details, see https://github.com/processing/p5.js/issues/1121.
+ var misusedAtTopLevelCode = null;
+ var FAQ_URL =
+ 'https://github.com/processing/p5.js/wiki/p5.js-overview' +
+ '#why-cant-i-assign-variables-using-p5-functions-and-' +
+ 'variables-before-setup';
+
+ var defineMisusedAtTopLevelCode = function defineMisusedAtTopLevelCode() {
+ var uniqueNamesFound = {};
+
+ var getSymbols = function getSymbols(obj) {
+ return Object.getOwnPropertyNames(obj)
+ .filter(function(name) {
+ if (name[0] === '_') {
+ return false;
+ }
+ if (name in uniqueNamesFound) {
+ return false;
+ }
+
+ uniqueNamesFound[name] = true;
+
+ return true;
+ })
+ .map(function(name) {
+ var type;
+
+ if (typeof obj[name] === 'function') {
+ type = 'function';
+ } else if (name === name.toUpperCase()) {
+ type = 'constant';
+ } else {
+ type = 'variable';
+ }
+
+ return { name: name, type: type };
+ });
+ };
+
+ misusedAtTopLevelCode = [].concat(
+ getSymbols(_main.default.prototype),
+ // At present, p5 only adds its constants to p5.prototype during
+ // construction, which may not have happened at the time a
+ // ReferenceError is thrown, so we'll manually add them to our list.
+ getSymbols(_dereq_('./constants'))
+ );
+
+ // This will ultimately ensure that we report the most specific error
+ // possible to the user, e.g. advising them about HALF_PI instead of PI
+ // when their code misuses the former.
+ misusedAtTopLevelCode.sort(function(a, b) {
+ return b.name.length - a.name.length;
+ });
+ };
+
+ var helpForMisusedAtTopLevelCode = function helpForMisusedAtTopLevelCode(e, log) {
+ if (!log) {
+ log = console.log.bind(console);
+ }
+
+ if (!misusedAtTopLevelCode) {
+ defineMisusedAtTopLevelCode();
+ }
+
+ // If we find that we're logging lots of false positives, we can
+ // uncomment the following code to avoid displaying anything if the
+ // user's code isn't likely to be using p5's global mode. (Note that
+ // setup/draw are more likely to be defined due to JS function hoisting.)
+ //
+ //if (!('setup' in window || 'draw' in window)) {
+ // return;
+ //}
+
+ misusedAtTopLevelCode.some(function(symbol) {
+ // Note that while just checking for the occurrence of the
+ // symbol name in the error message could result in false positives,
+ // a more rigorous test is difficult because different browsers
+ // log different messages, and the format of those messages may
+ // change over time.
+ //
+ // For example, if the user uses 'PI' in their code, it may result
+ // in any one of the following messages:
+ //
+ // * 'PI' is undefined (Microsoft Edge)
+ // * ReferenceError: PI is undefined (Firefox)
+ // * Uncaught ReferenceError: PI is not defined (Chrome)
+
+ if (
+ e.message &&
+ e.message.match('\\W?'.concat(symbol.name, '\\W')) !== null
+ ) {
+ log(
+ "Did you just try to use p5.js's "
+ .concat(symbol.name)
+ .concat(symbol.type === 'function' ? '() ' : ' ')
+ .concat(
+ symbol.type,
+ "? If so, you may want to move it into your sketch's setup() function.\n\nFor more details, see: "
+ )
+ .concat(FAQ_URL)
+ );
+
+ return true;
+ }
+ });
+ };
+
+ // Exposing this primarily for unit testing.
+ _main.default.prototype._helpForMisusedAtTopLevelCode = helpForMisusedAtTopLevelCode;
+
+ if (document.readyState !== 'complete') {
+ window.addEventListener('error', helpForMisusedAtTopLevelCode, false);
+
+ // Our job is only to catch ReferenceErrors that are thrown when
+ // global (non-instance mode) p5 APIs are used at the top-level
+ // scope of a file, so we'll unbind our error listener now to make
+ // sure we don't log false positives later.
+ window.addEventListener('load', function() {
+ window.removeEventListener('error', helpForMisusedAtTopLevelCode, false);
+ });
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../../docs/reference/data.json': 1, './constants': 21, './main': 27 }
+ ],
+ 24: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ /**
+ * @requires constants
+ */ function modeAdjust(a, b, c, d, mode) {
+ if (mode === constants.CORNER) {
+ return { x: a, y: b, w: c, h: d };
+ } else if (mode === constants.CORNERS) {
+ return { x: a, y: b, w: c - a, h: d - b };
+ } else if (mode === constants.RADIUS) {
+ return { x: a - c, y: b - d, w: 2 * c, h: 2 * d };
+ } else if (mode === constants.CENTER) {
+ return { x: a - c * 0.5, y: b - d * 0.5, w: c, h: d };
+ }
+ }
+ var _default = { modeAdjust: modeAdjust };
+ exports.default = _default;
+ },
+ { './constants': 21 }
+ ],
+ 25: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+
+ /**
+ * _globalInit
+ *
+ * TODO: ???
+ * if sketch is on window
+ * assume "global" mode
+ * and instantiate p5 automatically
+ * otherwise do nothing
+ *
+ * @private
+ * @return {Undefined}
+ */
+ var _globalInit = function _globalInit() {
+ if (!window.mocha) {
+ // If there is a setup or draw function on the window
+ // then instantiate p5 in "global" mode
+ if (
+ ((window.setup && typeof window.setup === 'function') ||
+ (window.draw && typeof window.draw === 'function')) &&
+ !_main.default.instance
+ ) {
+ new _main.default();
+ }
+ }
+ };
+
+ // TODO: ???
+
+ // if the page is ready, initialize p5 immediately
+ if (document.readyState === 'complete') {
+ _globalInit();
+ // if the page is still loading, add an event listener
+ // and initialize p5 as soon as it finishes loading
+ } else {
+ window.addEventListener('load', _globalInit, false);
+ }
+ },
+ { '../core/main': 27 }
+ ],
+ 26: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @for p5
+ * @requires core
+ * These are functions that are part of the Processing API but are not part of
+ * the p5.js API. In some cases they have a new name, in others, they are
+ * removed completely. Not all unsupported Processing functions are listed here
+ * but we try to include ones that a user coming from Processing might likely
+ * call.
+ */ _main.default.prototype.pushStyle = function() {
+ throw new Error('pushStyle() not used, see push()');
+ };
+ _main.default.prototype.popStyle = function() {
+ throw new Error('popStyle() not used, see pop()');
+ };
+
+ _main.default.prototype.popMatrix = function() {
+ throw new Error('popMatrix() not used, see pop()');
+ };
+
+ _main.default.prototype.printMatrix = function() {
+ throw new Error(
+ 'printMatrix() is not implemented in p5.js, ' +
+ 'refer to [https://simonsarris.com/a-transformation-class-for-canvas-to-keep-track-of-the-transformation-matrix/] ' +
+ 'to add your own implementation.'
+ );
+ };
+
+ _main.default.prototype.pushMatrix = function() {
+ throw new Error('pushMatrix() not used, see push()');
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { './main': 27 }
+ ],
+ 27: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ _dereq_('./shim');
+
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+
+ /**
+ * This is the p5 instance constructor.
+ *
+ * A p5 instance holds all the properties and methods related to
+ * a p5 sketch. It expects an incoming sketch closure and it can also
+ * take an optional node parameter for attaching the generated p5 canvas
+ * to a node. The sketch closure takes the newly created p5 instance as
+ * its sole argument and may optionally set preload(), setup(), and/or
+ * draw() properties on it for running a sketch.
+ *
+ * A p5 sketch can run in "global" or "instance" mode:
+ * "global" - all properties and methods are attached to the window
+ * "instance" - all properties and methods are bound to this p5 object
+ *
+ * @class p5
+ * @constructor
+ * @param {function} sketch a closure that can set optional preload(),
+ * setup(), and/or draw() properties on the
+ * given p5 instance
+ * @param {HTMLElement} [node] element to attach canvas to
+ * @return {p5} a p5 instance
+ */ var p5 = /*#__PURE__*/ (function() {
+ function p5(sketch, node, sync) {
+ var _this = this;
+ _classCallCheck(this, p5);
+ //////////////////////////////////////////////
+ // PUBLIC p5 PROPERTIES AND METHODS
+ //////////////////////////////////////////////
+
+ /**
+ * Called directly before setup(), the preload() function is used to handle
+ * asynchronous loading of external files in a blocking way. If a preload
+ * function is defined, setup() will wait until any load calls within have
+ * finished. Nothing besides load calls (loadImage, loadJSON, loadFont,
+ * loadStrings, etc.) should be inside the preload function. If asynchronous
+ * loading is preferred, the load methods can instead be called in setup()
+ * or anywhere else with the use of a callback parameter.
+ *
+ * By default the text "loading..." will be displayed. To make your own
+ * loading page, include an HTML element with id "p5_loading" in your
+ * page. More information here.
+ *
+ * @method preload
+ * @example
+ *
+ * let img;
+ * let c;
+ * function preload() {
+ * // preload() runs once
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * // setup() waits until preload() is done
+ * img.loadPixels();
+ * // get color of middle pixel
+ * c = img.get(img.width / 2, img.height / 2);
+ * }
+ *
+ * function draw() {
+ * background(c);
+ * image(img, 25, 25, 50, 50);
+ * }
+ *
+ *
+ * @alt
+ * nothing displayed
+ *
+ */
+
+ /**
+ * The setup() function is called once when the program starts. It's used to
+ * define initial environment properties such as screen size and background
+ * color and to load media such as images and fonts as the program starts.
+ * There can only be one setup() function for each program and it shouldn't
+ * be called again after its initial execution.
+ *
+ * Note: Variables declared within setup() are not accessible within other
+ * functions, including draw().
+ *
+ * @method setup
+ * @example
+ *
+ * let a = 0;
+ *
+ * function setup() {
+ * background(0);
+ * noStroke();
+ * fill(102);
+ * }
+ *
+ * function draw() {
+ * rect(a++ % width, 10, 2, 80);
+ * }
+ *
+ *
+ * @alt
+ * nothing displayed
+ *
+ */
+
+ /**
+ * Called directly after setup(), the draw() function continuously executes
+ * the lines of code contained inside its block until the program is stopped
+ * or noLoop() is called. Note if noLoop() is called in setup(), draw() will
+ * still be executed once before stopping. draw() is called automatically and
+ * should never be called explicitly.
+ *
+ * It should always be controlled with noLoop(), redraw() and loop(). After
+ * noLoop() stops the code in draw() from executing, redraw() causes the
+ * code inside draw() to execute once, and loop() will cause the code
+ * inside draw() to resume executing continuously.
+ *
+ * The number of times draw() executes in each second may be controlled with
+ * the frameRate() function.
+ *
+ * There can only be one draw() function for each sketch, and draw() must
+ * exist if you want the code to run continuously, or to process events such
+ * as mousePressed(). Sometimes, you might have an empty call to draw() in
+ * your program, as shown in the above example.
+ *
+ * It is important to note that the drawing coordinate system will be reset
+ * at the beginning of each draw() call. If any transformations are performed
+ * within draw() (ex: scale, rotate, translate), their effects will be
+ * undone at the beginning of draw(), so transformations will not accumulate
+ * over time. On the other hand, styling applied (ex: fill, stroke, etc) will
+ * remain in effect.
+ *
+ * @method draw
+ * @example
+ *
+ * let yPos = 0;
+ * function setup() {
+ * // setup() runs once
+ * frameRate(30);
+ * }
+ * function draw() {
+ * // draw() loops forever, until stopped
+ * background(204);
+ * yPos = yPos - 1;
+ * if (yPos < 0) {
+ * yPos = height;
+ * }
+ * line(0, yPos, width, yPos);
+ * }
+ *
+ *
+ * @alt
+ * nothing displayed
+ *
+ */
+
+ //////////////////////////////////////////////
+ // PRIVATE p5 PROPERTIES AND METHODS
+ //////////////////////////////////////////////
+
+ this._setupDone = false;
+ // for handling hidpi
+ this._pixelDensity = Math.ceil(window.devicePixelRatio) || 1;
+ this._userNode = node;
+ this._curElement = null;
+ this._elements = [];
+ this._glAttributes = null;
+ this._requestAnimId = 0;
+ this._preloadCount = 0;
+ this._isGlobal = false;
+ this._loop = true;
+ this._initializeInstanceVariables();
+ this._defaultCanvasSize = {
+ width: 100,
+ height: 100
+ };
+
+ this._events = {
+ // keep track of user-events for unregistering later
+ mousemove: null,
+ mousedown: null,
+ mouseup: null,
+ dragend: null,
+ dragover: null,
+ click: null,
+ dblclick: null,
+ mouseover: null,
+ mouseout: null,
+ keydown: null,
+ keyup: null,
+ keypress: null,
+ touchstart: null,
+ touchmove: null,
+ touchend: null,
+ resize: null,
+ blur: null
+ };
+
+ // States used in the custom random generators
+ this._lcg_random_state = null;
+ this._gaussian_previous = false;
+
+ this._events.wheel = null;
+ this._loadingScreenId = 'p5_loading';
+
+ // Allows methods to be registered on an instance that
+ // are instance-specific.
+ this._registeredMethods = {};
+ var methods = Object.getOwnPropertyNames(p5.prototype._registeredMethods);
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = methods[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var prop = _step.value;
+ this._registeredMethods[prop] = p5.prototype._registeredMethods[
+ prop
+ ].slice();
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+
+ if (window.DeviceOrientationEvent) {
+ this._events.deviceorientation = null;
+ }
+ if (window.DeviceMotionEvent && !window._isNodeWebkit) {
+ this._events.devicemotion = null;
+ }
+
+ this._start = function() {
+ // Find node if id given
+ if (_this._userNode) {
+ if (typeof _this._userNode === 'string') {
+ _this._userNode = document.getElementById(_this._userNode);
+ }
+ }
+
+ var context = _this._isGlobal ? window : _this;
+ var userPreload = context.preload;
+ if (userPreload) {
+ // Setup loading screen
+ // Set loading screen into dom if not present
+ // Otherwise displays and removes user provided loading screen
+ var loadingScreen = document.getElementById(_this._loadingScreenId);
+ if (!loadingScreen) {
+ loadingScreen = document.createElement('div');
+ loadingScreen.innerHTML = 'Loading...';
+ loadingScreen.style.position = 'absolute';
+ loadingScreen.id = _this._loadingScreenId;
+ var _node = _this._userNode || document.body;
+ _node.appendChild(loadingScreen);
+ }
+ var _methods = _this._preloadMethods;
+ for (var method in _methods) {
+ // default to p5 if no object defined
+ _methods[method] = _methods[method] || p5;
+ var obj = _methods[method];
+ //it's p5, check if it's global or instance
+ if (obj === p5.prototype || obj === p5) {
+ if (_this._isGlobal) {
+ window[method] = _this._wrapPreload(_this, method);
+ }
+ obj = _this;
+ }
+ _this._registeredPreloadMethods[method] = obj[method];
+ obj[method] = _this._wrapPreload(obj, method);
+ }
+
+ userPreload();
+ _this._runIfPreloadsAreDone();
+ } else {
+ _this._setup();
+ _this._draw();
+ }
+ };
+
+ this._runIfPreloadsAreDone = function() {
+ var context = this._isGlobal ? window : this;
+ if (context._preloadCount === 0) {
+ var loadingScreen = document.getElementById(context._loadingScreenId);
+ if (loadingScreen) {
+ loadingScreen.parentNode.removeChild(loadingScreen);
+ }
+ this._lastFrameTime = window.performance.now();
+ context._setup();
+ context._draw();
+ }
+ };
+
+ this._decrementPreload = function() {
+ var context = this._isGlobal ? window : this;
+ if (typeof context.preload === 'function') {
+ context._setProperty('_preloadCount', context._preloadCount - 1);
+ context._runIfPreloadsAreDone();
+ }
+ };
+
+ this._wrapPreload = function(obj, fnName) {
+ var _this2 = this;
+ return function() {
+ //increment counter
+ _this2._incrementPreload();
+ //call original function
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ return _this2._registeredPreloadMethods[fnName].apply(obj, args);
+ };
+ };
+
+ this._incrementPreload = function() {
+ var context = this._isGlobal ? window : this;
+ context._setProperty('_preloadCount', context._preloadCount + 1);
+ };
+
+ this._setup = function() {
+ // Always create a default canvas.
+ // Later on if the user calls createCanvas, this default one
+ // will be replaced
+ _this.createCanvas(
+ _this._defaultCanvasSize.width,
+ _this._defaultCanvasSize.height,
+ 'p2d'
+ );
+
+ // return preload functions to their normal vals if switched by preload
+ var context = _this._isGlobal ? window : _this;
+ if (typeof context.preload === 'function') {
+ for (var f in _this._preloadMethods) {
+ context[f] = _this._preloadMethods[f][f];
+ if (context[f] && _this) {
+ context[f] = context[f].bind(_this);
+ }
+ }
+ }
+
+ // Short-circuit on this, in case someone used the library in "global"
+ // mode earlier
+ if (typeof context.setup === 'function') {
+ context.setup();
+ }
+
+ // unhide any hidden canvases that were created
+ var canvases = document.getElementsByTagName('canvas');
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (
+ var _iterator2 = canvases[Symbol.iterator](), _step2;
+ !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done);
+ _iteratorNormalCompletion2 = true
+ ) {
+ var k = _step2.value;
+ if (k.dataset.hidden === 'true') {
+ k.style.visibility = '';
+ delete k.dataset.hidden;
+ }
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+
+ _this._lastFrameTime = window.performance.now();
+ _this._setupDone = true;
+ };
+
+ this._draw = function() {
+ var now = window.performance.now();
+ var time_since_last = now - _this._lastFrameTime;
+ var target_time_between_frames = 1000 / _this._targetFrameRate;
+
+ // only draw if we really need to; don't overextend the browser.
+ // draw if we're within 5ms of when our next frame should paint
+ // (this will prevent us from giving up opportunities to draw
+ // again when it's really about time for us to do so). fixes an
+ // issue where the frameRate is too low if our refresh loop isn't
+ // in sync with the browser. note that we have to draw once even
+ // if looping is off, so we bypass the time delay if that
+ // is the case.
+ var epsilon = 5;
+ if (
+ !_this._loop ||
+ time_since_last >= target_time_between_frames - epsilon
+ ) {
+ //mandatory update values(matrixs and stack)
+ _this.redraw();
+ _this._frameRate = 1000.0 / (now - _this._lastFrameTime);
+ _this.deltaTime = now - _this._lastFrameTime;
+ _this._setProperty('deltaTime', _this.deltaTime);
+ _this._lastFrameTime = now;
+
+ // If the user is actually using mouse module, then update
+ // coordinates, otherwise skip. We can test this by simply
+ // checking if any of the mouse functions are available or not.
+ // NOTE : This reflects only in complete build or modular build.
+ if (typeof _this._updateMouseCoords !== 'undefined') {
+ _this._updateMouseCoords();
+
+ //reset delta values so they reset even if there is no mouse event to set them
+ // for example if the mouse is outside the screen
+ _this._setProperty('movedX', 0);
+ _this._setProperty('movedY', 0);
+ }
+ }
+
+ // get notified the next time the browser gives us
+ // an opportunity to draw.
+ if (_this._loop) {
+ _this._requestAnimId = window.requestAnimationFrame(_this._draw);
+ }
+ };
+
+ this._setProperty = function(prop, value) {
+ _this[prop] = value;
+ if (_this._isGlobal) {
+ window[prop] = value;
+ }
+ };
+
+ /**
+ * Removes the entire p5 sketch. This will remove the canvas and any
+ * elements created by p5.js. It will also stop the draw loop and unbind
+ * any properties or methods from the window global scope. It will
+ * leave a variable p5 in case you wanted to create a new p5 sketch.
+ * If you like, you can set p5 = null to erase it. While all functions and
+ * variables and objects created by the p5 library will be removed, any
+ * other global variables created by your code will remain.
+ *
+ * @method remove
+ * @example
+ *
+ * function draw() {
+ * ellipse(50, 50, 10, 10);
+ * }
+ *
+ * function mousePressed() {
+ * remove(); // remove whole sketch on mouse press
+ * }
+ *
+ *
+ * @alt
+ * nothing displayed
+ *
+ */
+ this.remove = function() {
+ var loadingScreen = document.getElementById(_this._loadingScreenId);
+ if (loadingScreen) {
+ loadingScreen.parentNode.removeChild(loadingScreen);
+ // Add 1 to preload counter to prevent the sketch ever executing setup()
+ _this._incrementPreload();
+ }
+ if (_this._curElement) {
+ // stop draw
+ _this._loop = false;
+ if (_this._requestAnimId) {
+ window.cancelAnimationFrame(_this._requestAnimId);
+ }
+
+ // unregister events sketch-wide
+ for (var ev in _this._events) {
+ window.removeEventListener(ev, _this._events[ev]);
+ }
+
+ // remove DOM elements created by p5, and listeners
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (
+ var _iterator3 = _this._elements[Symbol.iterator](), _step3;
+ !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done);
+ _iteratorNormalCompletion3 = true
+ ) {
+ var e = _step3.value;
+ if (e.elt && e.elt.parentNode) {
+ e.elt.parentNode.removeChild(e.elt);
+ }
+ for (var elt_ev in e._events) {
+ e.elt.removeEventListener(elt_ev, e._events[elt_ev]);
+ }
+ }
+
+ // call any registered remove functions
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ var self = _this;
+ _this._registeredMethods.remove.forEach(function(f) {
+ if (typeof f !== 'undefined') {
+ f.call(self);
+ }
+ });
+ }
+ // remove window bound properties and methods
+ if (_this._isGlobal) {
+ for (var p in p5.prototype) {
+ try {
+ delete window[p];
+ } catch (x) {
+ window[p] = undefined;
+ }
+ }
+ for (var p2 in _this) {
+ if (_this.hasOwnProperty(p2)) {
+ try {
+ delete window[p2];
+ } catch (x) {
+ window[p2] = undefined;
+ }
+ }
+ }
+ p5.instance = null;
+ }
+ };
+
+ // call any registered init functions
+ this._registeredMethods.init.forEach(function(f) {
+ if (typeof f !== 'undefined') {
+ f.call(this);
+ }
+ }, this);
+ // Set up promise preloads
+ this._setupPromisePreloads();
+
+ var friendlyBindGlobal = this._createFriendlyGlobalFunctionBinder();
+
+ // If the user has created a global setup or draw function,
+ // assume "global" mode and make everything global (i.e. on the window)
+ if (!sketch) {
+ this._isGlobal = true;
+ p5.instance = this;
+ // Loop through methods on the prototype and attach them to the window
+ for (var p in p5.prototype) {
+ if (typeof p5.prototype[p] === 'function') {
+ var ev = p.substring(2);
+ if (!this._events.hasOwnProperty(ev)) {
+ if (Math.hasOwnProperty(p) && Math[p] === p5.prototype[p]) {
+ // Multiple p5 methods are just native Math functions. These can be
+ // called without any binding.
+ friendlyBindGlobal(p, p5.prototype[p]);
+ } else {
+ friendlyBindGlobal(p, p5.prototype[p].bind(this));
+ }
+ }
+ } else {
+ friendlyBindGlobal(p, p5.prototype[p]);
+ }
+ }
+ // Attach its properties to the window
+ for (var p2 in this) {
+ if (this.hasOwnProperty(p2)) {
+ friendlyBindGlobal(p2, this[p2]);
+ }
+ }
+ } else {
+ // Else, the user has passed in a sketch closure that may set
+ // user-provided 'setup', 'draw', etc. properties on this instance of p5
+ sketch(this);
+ }
+
+ // Bind events to window (not using container div bc key events don't work)
+
+ for (var e in this._events) {
+ var f = this['_on'.concat(e)];
+ if (f) {
+ var m = f.bind(this);
+ window.addEventListener(e, m, { passive: false });
+ this._events[e] = m;
+ }
+ }
+
+ var focusHandler = function focusHandler() {
+ _this._setProperty('focused', true);
+ };
+ var blurHandler = function blurHandler() {
+ _this._setProperty('focused', false);
+ };
+ window.addEventListener('focus', focusHandler);
+ window.addEventListener('blur', blurHandler);
+ this.registerMethod('remove', function() {
+ window.removeEventListener('focus', focusHandler);
+ window.removeEventListener('blur', blurHandler);
+ });
+
+ if (document.readyState === 'complete') {
+ this._start();
+ } else {
+ window.addEventListener('load', this._start.bind(this), false);
+ }
+ }
+ _createClass(p5, [
+ {
+ key: '_initializeInstanceVariables',
+ value: function _initializeInstanceVariables() {
+ this._styles = [];
+
+ this._bezierDetail = 20;
+ this._curveDetail = 20;
+
+ this._colorMode = constants.RGB;
+ this._colorMaxes = {
+ rgb: [255, 255, 255, 255],
+ hsb: [360, 100, 100, 1],
+ hsl: [360, 100, 100, 1]
+ };
+
+ this._downKeys = {}; //Holds the key codes of currently pressed keys
+ }
+ },
+ {
+ key: 'registerPreloadMethod',
+ value: function registerPreloadMethod(fnString, obj) {
+ // obj = obj || p5.prototype;
+ if (!p5.prototype._preloadMethods.hasOwnProperty(fnString)) {
+ p5.prototype._preloadMethods[fnString] = obj;
+ }
+ }
+ },
+ {
+ key: 'registerMethod',
+ value: function registerMethod(name, m) {
+ var target = this || p5.prototype;
+ if (!target._registeredMethods.hasOwnProperty(name)) {
+ target._registeredMethods[name] = [];
+ }
+ target._registeredMethods[name].push(m);
+ }
+
+ // create a function which provides a standardized process for binding
+ // globals; this is implemented as a factory primarily so that there's a
+ // way to redefine what "global" means for the binding function so it
+ // can be used in scenarios like unit testing where the window object
+ // might not exist
+ },
+ {
+ key: '_createFriendlyGlobalFunctionBinder',
+ value: function _createFriendlyGlobalFunctionBinder() {
+ var options =
+ arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+ var globalObject = options.globalObject || window;
+ var log = options.log || console.log.bind(console);
+ var propsToForciblyOverwrite = {
+ // p5.print actually always overwrites an existing global function,
+ // albeit one that is very unlikely to be used:
+ //
+ // https://developer.mozilla.org/en-US/docs/Web/API/Window/print
+ print: true
+ };
+
+ return function(prop, value) {
+ if (
+ !p5.disableFriendlyErrors &&
+ typeof IS_MINIFIED === 'undefined' &&
+ typeof value === 'function' &&
+ !(prop in p5.prototype._preloadMethods)
+ ) {
+ try {
+ // Because p5 has so many common function names, it's likely
+ // that users may accidentally overwrite global p5 functions with
+ // their own variables. Let's allow this but log a warning to
+ // help users who may be doing this unintentionally.
+ //
+ // For more information, see:
+ //
+ // https://github.com/processing/p5.js/issues/1317
+
+ if (prop in globalObject && !(prop in propsToForciblyOverwrite)) {
+ throw new Error('global "'.concat(prop, '" already exists'));
+ }
+
+ // It's possible that this might throw an error because there
+ // are a lot of edge-cases in which `Object.defineProperty` might
+ // not succeed; since this functionality is only intended to
+ // help beginners anyways, we'll just catch such an exception
+ // if it occurs, and fall back to legacy behavior.
+ Object.defineProperty(globalObject, prop, {
+ configurable: true,
+ enumerable: true,
+ get: function get() {
+ return value;
+ },
+ set: function set(newValue) {
+ Object.defineProperty(globalObject, prop, {
+ configurable: true,
+ enumerable: true,
+ value: newValue,
+ writable: true
+ });
+
+ log(
+ 'You just changed the value of "'.concat(
+ prop,
+ '", which was a p5 function. This could cause problems later if you\'re not careful.'
+ )
+ );
+ }
+ });
+ } catch (e) {
+ log(
+ 'p5 had problems creating the global function "'.concat(
+ prop,
+ '", possibly because your code is already using that name as a variable. You may want to rename your variable to something else.'
+ )
+ );
+
+ globalObject[prop] = value;
+ }
+ } else {
+ globalObject[prop] = value;
+ }
+ };
+ }
+ }
+ ]);
+ return p5;
+ })();
+
+ // This is a pointer to our global mode p5 instance, if we're in
+ // global mode.
+ p5.instance = null;
+
+ /**
+ * Allows for the friendly error system (FES) to be turned off when creating a sketch,
+ * which can give a significant boost to performance when needed.
+ * See
+ * disabling the friendly error system.
+ *
+ * @property {Boolean} disableFriendlyErrors
+ * @example
+ *
+ * p5.disableFriendlyErrors = true;
+ *
+ * function setup() {
+ * createCanvas(100, 50);
+ * }
+ *
+ */
+ p5.disableFriendlyErrors = false;
+
+ // attach constants to p5 prototype
+ for (var k in constants) {
+ p5.prototype[k] = constants[k];
+ }
+
+ // functions that cause preload to wait
+ // more can be added by using registerPreloadMethod(func)
+ p5.prototype._preloadMethods = {
+ loadJSON: p5.prototype,
+ loadImage: p5.prototype,
+ loadStrings: p5.prototype,
+ loadXML: p5.prototype,
+ loadBytes: p5.prototype,
+ loadTable: p5.prototype,
+ loadFont: p5.prototype,
+ loadModel: p5.prototype,
+ loadShader: p5.prototype
+ };
+
+ p5.prototype._registeredMethods = { init: [], pre: [], post: [], remove: [] };
+
+ p5.prototype._registeredPreloadMethods = {};
+ var _default = p5;
+ exports.default = _default;
+ },
+ { './constants': 21, './shim': 38 }
+ ],
+ 28: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module DOM
+ * @submodule DOM
+ * @for p5.Element
+ */ /**
+ * Base class for all elements added to a sketch, including canvas,
+ * graphics buffers, and other HTML elements. It is not called directly, but p5.Element
+ * objects are created by calling createCanvas, createGraphics,
+ * createDiv, createImg, createInput, etc.
+ *
+ * @class p5.Element
+ * @param {String} elt DOM node that is wrapped
+ * @param {p5} [pInst] pointer to p5 instance
+ */ _main.default.Element = function(elt, pInst) {
+ /**
+ * Underlying HTML element. All normal HTML methods can be called on this.
+ * @example
+ *
+ *
+ * function setup() {
+ * let c = createCanvas(50, 50);
+ * c.elt.style.border = '5px solid red';
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * }
+ *
+ *
+ *
+ * @property elt
+ * @readOnly
+ */
+ this.elt = elt;
+ this._pInst = this._pixelsState = pInst;
+ this._events = {};
+ this.width = this.elt.offsetWidth;
+ this.height = this.elt.offsetHeight;
+ };
+
+ /**
+ *
+ * Attaches the element to the parent specified. A way of setting
+ * the container for the element. Accepts either a string ID, DOM
+ * node, or p5.Element. If no arguments given, parent node is returned.
+ * For more ways to position the canvas, see the
+ *
+ * positioning the canvas wiki page.
+ *
+ * @method parent
+ * @param {String|p5.Element|Object} parent the ID, DOM node, or p5.Element
+ * of desired parent element
+ * @chainable
+ *
+ * @example
+ *
+ * // in the html file:
+ * // <div id="myContainer"></div>
+ *
+ * // in the js file:
+ * let cnv = createCanvas(100, 100);
+ * cnv.parent('myContainer');
+ *
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div1.parent(div0); // use p5.Element
+ *
+ *
+ * let div0 = createDiv('this is the parent');
+ * div0.id('apples');
+ * let div1 = createDiv('this is the child');
+ * div1.parent('apples'); // use id
+ *
+ *
+ * let elt = document.getElementById('myParentDiv');
+ * let div1 = createDiv('this is the child');
+ * div1.parent(elt); // use element from page
+ *
+ *
+ * @alt
+ * no display.
+ */
+ /**
+ * @method parent
+ * @return {p5.Element}
+ *
+ */
+ _main.default.Element.prototype.parent = function(p) {
+ if (typeof p === 'undefined') {
+ return this.elt.parentNode;
+ }
+
+ if (typeof p === 'string') {
+ if (p[0] === '#') {
+ p = p.substring(1);
+ }
+ p = document.getElementById(p);
+ } else if (p instanceof _main.default.Element) {
+ p = p.elt;
+ }
+ p.appendChild(this.elt);
+ return this;
+ };
+
+ /**
+ *
+ * Sets the ID of the element. If no ID argument is passed in, it instead
+ * returns the current ID of the element.
+ * Note that only one element can have a particular id in a page.
+ * The .class() function can be used
+ * to identify multiple elements with the same class name.
+ *
+ * @method id
+ * @param {String} id ID of the element
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // Assigns a CSS selector ID to
+ * // the canvas element.
+ * cnv.id('mycanvas');
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ */
+ /**
+ * @method id
+ * @return {String} the id of the element
+ */
+ _main.default.Element.prototype.id = function(id) {
+ if (typeof id === 'undefined') {
+ return this.elt.id;
+ }
+
+ this.elt.id = id;
+ this.width = this.elt.offsetWidth;
+ this.height = this.elt.offsetHeight;
+ return this;
+ };
+
+ /**
+ *
+ * Adds given class to the element. If no class argument is passed in, it
+ * instead returns a string containing the current class(es) of the element.
+ *
+ * @method class
+ * @param {String} class class to add
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // Assigns a CSS selector class 'small'
+ * // to the canvas element.
+ * cnv.class('small');
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ */
+ /**
+ * @method class
+ * @return {String} the class of the element
+ */
+ _main.default.Element.prototype.class = function(c) {
+ if (typeof c === 'undefined') {
+ return this.elt.className;
+ }
+
+ this.elt.className = c;
+ return this;
+ };
+
+ /**
+ * The .mousePressed() function is called once after every time a
+ * mouse button is pressed over the element.
+ * Some mobile browsers may also trigger this event on a touch screen,
+ * if the user performs a quick tap.
+ * This can be used to attach element specific event listeners.
+ *
+ * @method mousePressed
+ * @param {Function|Boolean} fxn function to be fired when mouse is
+ * pressed over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mousePressed(changeGray); // attach listener for
+ * // canvas click only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with any click anywhere
+ * function mousePressed() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires only when cnv is clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.mousePressed = function(fxn) {
+ // Prepend the mouse property setters to the event-listener.
+ // This is required so that mouseButton is set correctly prior to calling the callback (fxn).
+ // For details, see https://github.com/processing/p5.js/issues/3087.
+ var eventPrependedFxn = function eventPrependedFxn(event) {
+ this._pInst._setProperty('mouseIsPressed', true);
+ this._pInst._setMouseButton(event);
+ // Pass along the return-value of the callback:
+ return fxn.call(this);
+ };
+ // Pass along the event-prepended form of the callback.
+ _main.default.Element._adjustListener('mousedown', eventPrependedFxn, this);
+ return this;
+ };
+
+ /**
+ * The .doubleClicked() function is called once after every time a
+ * mouse button is pressed twice over the element. This can be used to
+ * attach element and action specific event listeners.
+ *
+ * @method doubleClicked
+ * @param {Function|Boolean} fxn function to be fired when mouse is
+ * double clicked over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @return {p5.Element}
+ * @example
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.doubleClicked(changeGray); // attach listener for
+ * // canvas double click only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with any double click anywhere
+ * function doubleClicked() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires only when cnv is double clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.doubleClicked = function(fxn) {
+ _main.default.Element._adjustListener('dblclick', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .mouseWheel() function is called once after every time a
+ * mouse wheel is scrolled over the element. This can be used to
+ * attach element specific event listeners.
+ *
+ * The function accepts a callback function as argument which will be executed
+ * when the `wheel` event is triggered on the element, the callback function is
+ * passed one argument `event`. The `event.deltaY` property returns negative
+ * values if the mouse wheel is rotated up or away from the user and positive
+ * in the other direction. The `event.deltaX` does the same as `event.deltaY`
+ * except it reads the horizontal wheel scroll of the mouse wheel.
+ *
+ * On OS X with "natural" scrolling enabled, the `event.deltaY` values are
+ * reversed.
+ *
+ * @method mouseWheel
+ * @param {Function|Boolean} fxn function to be fired when mouse is
+ * scrolled over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseWheel(changeSize); // attach listener for
+ * // activity on canvas only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with mousewheel movement
+ * // anywhere on screen
+ * function mouseWheel() {
+ * g = g + 10;
+ * }
+ *
+ * // this function fires with mousewheel movement
+ * // over canvas only
+ * function changeSize(event) {
+ * if (event.deltaY > 0) {
+ * d = d + 10;
+ * } else {
+ * d = d - 10;
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.mouseWheel = function(fxn) {
+ _main.default.Element._adjustListener('wheel', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .mouseReleased() function is called once after every time a
+ * mouse button is released over the element.
+ * Some mobile browsers may also trigger this event on a touch screen,
+ * if the user performs a quick tap.
+ * This can be used to attach element specific event listeners.
+ *
+ * @method mouseReleased
+ * @param {Function|Boolean} fxn function to be fired when mouse is
+ * released over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseReleased(changeGray); // attach listener for
+ * // activity on canvas only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires after the mouse has been
+ * // released
+ * function mouseReleased() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires after the mouse has been
+ * // released while on canvas
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.mouseReleased = function(fxn) {
+ _main.default.Element._adjustListener('mouseup', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .mouseClicked() function is called once after a mouse button is
+ * pressed and released over the element.
+ * Some mobile browsers may also trigger this event on a touch screen,
+ * if the user performs a quick tap.
+ * This can be used to attach element specific event listeners.
+ *
+ * @method mouseClicked
+ * @param {Function|Boolean} fxn function to be fired when mouse is
+ * clicked over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ *
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseClicked(changeGray); // attach listener for
+ * // activity on canvas only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires after the mouse has been
+ * // clicked anywhere
+ * function mouseClicked() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires after the mouse has been
+ * // clicked on canvas
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.mouseClicked = function(fxn) {
+ _main.default.Element._adjustListener('click', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .mouseMoved() function is called once every time a
+ * mouse moves over the element. This can be used to attach an
+ * element specific event listener.
+ *
+ * @method mouseMoved
+ * @param {Function|Boolean} fxn function to be fired when a mouse moves
+ * over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let d = 30;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseMoved(changeSize); // attach listener for
+ * // activity on canvas only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * fill(200);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires when mouse moves anywhere on
+ * // page
+ * function mouseMoved() {
+ * g = g + 5;
+ * if (g > 255) {
+ * g = 0;
+ * }
+ * }
+ *
+ * // this function fires when mouse moves over canvas
+ * function changeSize() {
+ * d = d + 2;
+ * if (d > 100) {
+ * d = 0;
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.mouseMoved = function(fxn) {
+ _main.default.Element._adjustListener('mousemove', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .mouseOver() function is called once after every time a
+ * mouse moves onto the element. This can be used to attach an
+ * element specific event listener.
+ *
+ * @method mouseOver
+ * @param {Function|Boolean} fxn function to be fired when a mouse moves
+ * onto the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let d;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseOver(changeGray);
+ * d = 10;
+ * }
+ *
+ * function draw() {
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * function changeGray() {
+ * d = d + 10;
+ * if (d > 100) {
+ * d = 0;
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.mouseOver = function(fxn) {
+ _main.default.Element._adjustListener('mouseover', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .mouseOut() function is called once after every time a
+ * mouse moves off the element. This can be used to attach an
+ * element specific event listener.
+ *
+ * @method mouseOut
+ * @param {Function|Boolean} fxn function to be fired when a mouse
+ * moves off of an element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let d;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseOut(changeGray);
+ * d = 10;
+ * }
+ *
+ * function draw() {
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * function changeGray() {
+ * d = d + 10;
+ * if (d > 100) {
+ * d = 0;
+ * }
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.mouseOut = function(fxn) {
+ _main.default.Element._adjustListener('mouseout', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .touchStarted() function is called once after every time a touch is
+ * registered. This can be used to attach element specific event listeners.
+ *
+ * @method touchStarted
+ * @param {Function|Boolean} fxn function to be fired when a touch
+ * starts over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.touchStarted(changeGray); // attach listener for
+ * // canvas click only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with any touch anywhere
+ * function touchStarted() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires only when cnv is clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.touchStarted = function(fxn) {
+ _main.default.Element._adjustListener('touchstart', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .touchMoved() function is called once after every time a touch move is
+ * registered. This can be used to attach element specific event listeners.
+ *
+ * @method touchMoved
+ * @param {Function|Boolean} fxn function to be fired when a touch moves over
+ * the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.touchMoved(changeGray); // attach listener for
+ * // canvas click only
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * }
+ *
+ * // this function fires only when cnv is clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.touchMoved = function(fxn) {
+ _main.default.Element._adjustListener('touchmove', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .touchEnded() function is called once after every time a touch is
+ * registered. This can be used to attach element specific event listeners.
+ *
+ * @method touchEnded
+ * @param {Function|Boolean} fxn function to be fired when a touch ends
+ * over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.touchEnded(changeGray); // attach listener for
+ * // canvas click only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with any touch anywhere
+ * function touchEnded() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires only when cnv is clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.touchEnded = function(fxn) {
+ _main.default.Element._adjustListener('touchend', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .dragOver() function is called once after every time a
+ * file is dragged over the element. This can be used to attach an
+ * element specific event listener.
+ *
+ * @method dragOver
+ * @param {Function|Boolean} fxn function to be fired when a file is
+ * dragged over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * // To test this sketch, simply drag a
+ * // file over the canvas
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('Drag file', width / 2, height / 2);
+ * c.dragOver(dragOverCallback);
+ * }
+ *
+ * // This function will be called whenever
+ * // a file is dragged over the canvas
+ * function dragOverCallback() {
+ * background(240);
+ * text('Dragged over', width / 2, height / 2);
+ * }
+ *
+ * @alt
+ * nothing displayed
+ */
+ _main.default.Element.prototype.dragOver = function(fxn) {
+ _main.default.Element._adjustListener('dragover', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .dragLeave() function is called once after every time a
+ * dragged file leaves the element area. This can be used to attach an
+ * element specific event listener.
+ *
+ * @method dragLeave
+ * @param {Function|Boolean} fxn function to be fired when a file is
+ * dragged off the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * // To test this sketch, simply drag a file
+ * // over and then out of the canvas area
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('Drag file', width / 2, height / 2);
+ * c.dragLeave(dragLeaveCallback);
+ * }
+ *
+ * // This function will be called whenever
+ * // a file is dragged out of the canvas
+ * function dragLeaveCallback() {
+ * background(240);
+ * text('Dragged off', width / 2, height / 2);
+ * }
+ *
+ * @alt
+ * nothing displayed
+ */
+ _main.default.Element.prototype.dragLeave = function(fxn) {
+ _main.default.Element._adjustListener('dragleave', fxn, this);
+ return this;
+ };
+
+ // General handler for event attaching and detaching
+ _main.default.Element._adjustListener = function(ev, fxn, ctx) {
+ if (fxn === false) {
+ _main.default.Element._detachListener(ev, ctx);
+ } else {
+ _main.default.Element._attachListener(ev, fxn, ctx);
+ }
+ return this;
+ };
+
+ _main.default.Element._attachListener = function(ev, fxn, ctx) {
+ // detach the old listener if there was one
+ if (ctx._events[ev]) {
+ _main.default.Element._detachListener(ev, ctx);
+ }
+ var f = fxn.bind(ctx);
+ ctx.elt.addEventListener(ev, f, false);
+ ctx._events[ev] = f;
+ };
+
+ _main.default.Element._detachListener = function(ev, ctx) {
+ var f = ctx._events[ev];
+ ctx.elt.removeEventListener(ev, f, false);
+ ctx._events[ev] = null;
+ };
+
+ /**
+ * Helper fxn for sharing pixel methods
+ *
+ */
+ _main.default.Element.prototype._setProperty = function(prop, value) {
+ this[prop] = value;
+ };
+ var _default = _main.default.Element;
+ exports.default = _default;
+ },
+ { './main': 27 }
+ ],
+ 29: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Rendering
+ * @submodule Rendering
+ * @for p5
+ */ /**
+ * Thin wrapper around a renderer, to be used for creating a
+ * graphics buffer object. Use this class if you need
+ * to draw into an off-screen graphics buffer. The two parameters define the
+ * width and height in pixels. The fields and methods for this class are
+ * extensive, but mirror the normal drawing API for p5.
+ *
+ * @class p5.Graphics
+ * @extends p5.Element
+ * @param {Number} w width
+ * @param {Number} h height
+ * @param {Constant} renderer the renderer to use, either P2D or WEBGL
+ * @param {p5} [pInst] pointer to p5 instance
+ */ _main.default.Graphics = function(w, h, renderer, pInst) {
+ var r = renderer || constants.P2D;
+
+ this.canvas = document.createElement('canvas');
+ var node = pInst._userNode || document.body;
+ node.appendChild(this.canvas);
+
+ _main.default.Element.call(this, this.canvas, pInst);
+
+ // bind methods and props of p5 to the new object
+ for (var p in _main.default.prototype) {
+ if (!this[p]) {
+ if (typeof _main.default.prototype[p] === 'function') {
+ this[p] = _main.default.prototype[p].bind(this);
+ } else {
+ this[p] = _main.default.prototype[p];
+ }
+ }
+ }
+
+ _main.default.prototype._initializeInstanceVariables.apply(this);
+ this.width = w;
+ this.height = h;
+ this._pixelDensity = pInst._pixelDensity;
+
+ if (r === constants.WEBGL) {
+ this._renderer = new _main.default.RendererGL(this.canvas, this, false);
+ } else {
+ this._renderer = new _main.default.Renderer2D(this.canvas, this, false);
+ }
+ pInst._elements.push(this);
+
+ this._renderer.resize(w, h);
+ this._renderer._applyDefaults();
+ return this;
+ };
+
+ _main.default.Graphics.prototype = Object.create(_main.default.Element.prototype);
+
+ /**
+ * Resets certain values such as those modified by functions in the Transform category
+ * and in the Lights category that are not automatically reset
+ * with graphics buffer objects. Calling this in draw() will copy the behavior
+ * of the standard canvas.
+ *
+ * @method reset
+ * @example
+ *
+ *
+ * let pg;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(0);
+ * pg = createGraphics(50, 100);
+ * pg.fill(0);
+ * frameRate(5);
+ * }
+ * function draw() {
+ * image(pg, width / 2, 0);
+ * pg.background(255);
+ * // p5.Graphics object behave a bit differently in some cases
+ * // The normal canvas on the left resets the translate
+ * // with every loop through draw()
+ * // the graphics object on the right doesn't automatically reset
+ * // so translate() is additive and it moves down the screen
+ * rect(0, 0, width / 2, 5);
+ * pg.rect(0, 0, width / 2, 5);
+ * translate(0, 5, 0);
+ * pg.translate(0, 5, 0);
+ * }
+ * function mouseClicked() {
+ * // if you click you will see that
+ * // reset() resets the translate back to the initial state
+ * // of the Graphics object
+ * pg.reset();
+ * }
+ *
+ *
+ * @alt
+ * A white line on a black background stays still on the top-left half.
+ * A black line animates from top to bottom on a white background on the right half.
+ * When clicked, the black line starts back over at the top.
+ *
+ */
+ _main.default.Graphics.prototype.reset = function() {
+ this._renderer.resetMatrix();
+ if (this._renderer.isP3D) {
+ this._renderer._update();
+ }
+ };
+
+ /**
+ * Removes a Graphics object from the page and frees any resources
+ * associated with it.
+ *
+ * @method remove
+ *
+ * @example
+ *
+ * let bg;
+ * function setup() {
+ * bg = createCanvas(100, 100);
+ * bg.background(0);
+ * image(bg, 0, 0);
+ * bg.remove();
+ * }
+ *
+ *
+ *
+ * let bg;
+ * function setup() {
+ * pixelDensity(1);
+ * createCanvas(100, 100);
+ * stroke(255);
+ * fill(0);
+ *
+ * // create and draw the background image
+ * bg = createGraphics(100, 100);
+ * bg.background(200);
+ * bg.ellipse(50, 50, 80, 80);
+ * }
+ * function draw() {
+ * let t = millis() / 1000;
+ * // draw the background
+ * if (bg) {
+ * image(bg, frameCount % 100, 0);
+ * image(bg, frameCount % 100 - 100, 0);
+ * }
+ * // draw the foreground
+ * let p = p5.Vector.fromAngle(t, 35).add(50, 50);
+ * ellipse(p.x, p.y, 30);
+ * }
+ * function mouseClicked() {
+ * // remove the background
+ * if (bg) {
+ * bg.remove();
+ * bg = null;
+ * }
+ * }
+ *
+ *
+ * @alt
+ * no image
+ * a multi-colored circle moving back and forth over a scrolling background.
+ *
+ */
+ _main.default.Graphics.prototype.remove = function() {
+ if (this.elt.parentNode) {
+ this.elt.parentNode.removeChild(this.elt);
+ }
+ var idx = this._pInst._elements.indexOf(this);
+ if (idx !== -1) {
+ this._pInst._elements.splice(idx, 1);
+ }
+ for (var elt_ev in this._events) {
+ this.elt.removeEventListener(elt_ev, this._events[elt_ev]);
+ }
+ };
+ var _default = _main.default.Graphics;
+ exports.default = _default;
+ },
+ { './constants': 21, './main': 27 }
+ ],
+ 30: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj &&
+ typeof Symbol === 'function' &&
+ obj.constructor === Symbol &&
+ obj !== Symbol.prototype
+ ? 'symbol'
+ : typeof obj;
+ };
+ }
+ return _typeof(obj);
+ }
+
+ /**
+ * Main graphics and rendering context, as well as the base API
+ * implementation for p5.js "core". To be used as the superclass for
+ * Renderer2D and Renderer3D classes, respecitvely.
+ *
+ * @class p5.Renderer
+ * @constructor
+ * @extends p5.Element
+ * @param {String} elt DOM node that is wrapped
+ * @param {p5} [pInst] pointer to p5 instance
+ * @param {Boolean} [isMainCanvas] whether we're using it as main canvas
+ */
+ _main.default.Renderer = function(elt, pInst, isMainCanvas) {
+ _main.default.Element.call(this, elt, pInst);
+ this.canvas = elt;
+ this._pixelsState = pInst;
+ if (isMainCanvas) {
+ this._isMainCanvas = true;
+ // for pixel method sharing with pimage
+ this._pInst._setProperty('_curElement', this);
+ this._pInst._setProperty('canvas', this.canvas);
+ this._pInst._setProperty('width', this.width);
+ this._pInst._setProperty('height', this.height);
+ } else {
+ // hide if offscreen buffer by default
+ this.canvas.style.display = 'none';
+ this._styles = []; // non-main elt styles stored in p5.Renderer
+ }
+
+ this._textSize = 12;
+ this._textLeading = 15;
+ this._textFont = 'sans-serif';
+ this._textStyle = constants.NORMAL;
+ this._textAscent = null;
+ this._textDescent = null;
+ this._textAlign = constants.LEFT;
+ this._textBaseline = constants.BASELINE;
+
+ this._rectMode = constants.CORNER;
+ this._ellipseMode = constants.CENTER;
+ this._curveTightness = 0;
+ this._imageMode = constants.CORNER;
+
+ this._tint = null;
+ this._doStroke = true;
+ this._doFill = true;
+ this._strokeSet = false;
+ this._fillSet = false;
+ };
+
+ _main.default.Renderer.prototype = Object.create(_main.default.Element.prototype);
+
+ // the renderer should return a 'style' object that it wishes to
+ // store on the push stack.
+ _main.default.Renderer.prototype.push = function() {
+ return {
+ properties: {
+ _doStroke: this._doStroke,
+ _strokeSet: this._strokeSet,
+ _doFill: this._doFill,
+ _fillSet: this._fillSet,
+ _tint: this._tint,
+ _imageMode: this._imageMode,
+ _rectMode: this._rectMode,
+ _ellipseMode: this._ellipseMode,
+ _textFont: this._textFont,
+ _textLeading: this._textLeading,
+ _textSize: this._textSize,
+ _textAlign: this._textAlign,
+ _textBaseline: this._textBaseline,
+ _textStyle: this._textStyle
+ }
+ };
+ };
+
+ // a pop() operation is in progress
+ // the renderer is passed the 'style' object that it returned
+ // from its push() method.
+ _main.default.Renderer.prototype.pop = function(style) {
+ if (style.properties) {
+ // copy the style properties back into the renderer
+ Object.assign(this, style.properties);
+ }
+ };
+
+ /**
+ * Resize our canvas element.
+ */
+ _main.default.Renderer.prototype.resize = function(w, h) {
+ this.width = w;
+ this.height = h;
+ this.elt.width = w * this._pInst._pixelDensity;
+ this.elt.height = h * this._pInst._pixelDensity;
+ this.elt.style.width = ''.concat(w, 'px');
+ this.elt.style.height = ''.concat(h, 'px');
+ if (this._isMainCanvas) {
+ this._pInst._setProperty('width', this.width);
+ this._pInst._setProperty('height', this.height);
+ }
+ };
+
+ _main.default.Renderer.prototype.get = function(x, y, w, h) {
+ var pixelsState = this._pixelsState;
+ var pd = pixelsState._pixelDensity;
+ var canvas = this.canvas;
+
+ if (typeof x === 'undefined' && typeof y === 'undefined') {
+ // get()
+ x = y = 0;
+ w = pixelsState.width;
+ h = pixelsState.height;
+ } else {
+ x *= pd;
+ y *= pd;
+
+ if (typeof w === 'undefined' && typeof h === 'undefined') {
+ // get(x,y)
+ if (x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) {
+ return [0, 0, 0, 0];
+ }
+
+ return this._getPixel(x, y);
+ }
+ // get(x,y,w,h)
+ }
+
+ var region = new _main.default.Image(w, h);
+ region.canvas
+ .getContext('2d')
+ .drawImage(canvas, x, y, w * pd, h * pd, 0, 0, w, h);
+
+ return region;
+ };
+
+ _main.default.Renderer.prototype.textLeading = function(l) {
+ if (typeof l === 'number') {
+ this._setProperty('_textLeading', l);
+ return this._pInst;
+ }
+
+ return this._textLeading;
+ };
+
+ _main.default.Renderer.prototype.textSize = function(s) {
+ if (typeof s === 'number') {
+ this._setProperty('_textSize', s);
+ this._setProperty('_textLeading', s * constants._DEFAULT_LEADMULT);
+ return this._applyTextProperties();
+ }
+
+ return this._textSize;
+ };
+
+ _main.default.Renderer.prototype.textStyle = function(s) {
+ if (s) {
+ if (
+ s === constants.NORMAL ||
+ s === constants.ITALIC ||
+ s === constants.BOLD ||
+ s === constants.BOLDITALIC
+ ) {
+ this._setProperty('_textStyle', s);
+ }
+
+ return this._applyTextProperties();
+ }
+
+ return this._textStyle;
+ };
+
+ _main.default.Renderer.prototype.textAscent = function() {
+ if (this._textAscent === null) {
+ this._updateTextMetrics();
+ }
+ return this._textAscent;
+ };
+
+ _main.default.Renderer.prototype.textDescent = function() {
+ if (this._textDescent === null) {
+ this._updateTextMetrics();
+ }
+ return this._textDescent;
+ };
+
+ _main.default.Renderer.prototype.textAlign = function(h, v) {
+ if (typeof h !== 'undefined') {
+ this._setProperty('_textAlign', h);
+
+ if (typeof v !== 'undefined') {
+ this._setProperty('_textBaseline', v);
+ }
+
+ return this._applyTextProperties();
+ } else {
+ return {
+ horizontal: this._textAlign,
+ vertical: this._textBaseline
+ };
+ }
+ };
+
+ _main.default.Renderer.prototype.text = function(str, x, y, maxWidth, maxHeight) {
+ var p = this._pInst;
+ var cars;
+ var n;
+ var ii;
+ var jj;
+ var line;
+ var testLine;
+ var testWidth;
+ var words;
+ var totalHeight;
+ var finalMaxHeight = Number.MAX_VALUE;
+
+ if (!(this._doFill || this._doStroke)) {
+ return;
+ }
+
+ if (typeof str === 'undefined') {
+ return;
+ } else if (typeof str !== 'string') {
+ str = str.toString();
+ }
+
+ str = str.replace(/(\t)/g, ' ');
+ cars = str.split('\n');
+
+ if (typeof maxWidth !== 'undefined') {
+ totalHeight = 0;
+ for (ii = 0; ii < cars.length; ii++) {
+ line = '';
+ words = cars[ii].split(' ');
+ for (n = 0; n < words.length; n++) {
+ testLine = ''.concat(line + words[n], ' ');
+ testWidth = this.textWidth(testLine);
+ if (testWidth > maxWidth) {
+ line = ''.concat(words[n], ' ');
+ totalHeight += p.textLeading();
+ } else {
+ line = testLine;
+ }
+ }
+ }
+
+ if (this._rectMode === constants.CENTER) {
+ x -= maxWidth / 2;
+ y -= maxHeight / 2;
+ }
+
+ switch (this._textAlign) {
+ case constants.CENTER:
+ x += maxWidth / 2;
+ break;
+ case constants.RIGHT:
+ x += maxWidth;
+ break;
+ }
+
+ var baselineHacked = false;
+ if (typeof maxHeight !== 'undefined') {
+ switch (this._textBaseline) {
+ case constants.BOTTOM:
+ y += maxHeight - totalHeight;
+ break;
+ case constants.CENTER:
+ y += (maxHeight - totalHeight) / 2;
+ break;
+ case constants.BASELINE:
+ baselineHacked = true;
+ this._textBaseline = constants.TOP;
+ break;
+ }
+
+ // remember the max-allowed y-position for any line (fix to #928)
+ finalMaxHeight = y + maxHeight - p.textAscent();
+ }
+
+ for (ii = 0; ii < cars.length; ii++) {
+ line = '';
+ words = cars[ii].split(' ');
+ for (n = 0; n < words.length; n++) {
+ testLine = ''.concat(line + words[n], ' ');
+ testWidth = this.textWidth(testLine);
+ if (testWidth > maxWidth && line.length > 0) {
+ this._renderText(p, line, x, y, finalMaxHeight);
+ line = ''.concat(words[n], ' ');
+ y += p.textLeading();
+ } else {
+ line = testLine;
+ }
+ }
+
+ this._renderText(p, line, x, y, finalMaxHeight);
+ y += p.textLeading();
+
+ if (baselineHacked) {
+ this._textBaseline = constants.BASELINE;
+ }
+ }
+ } else {
+ // Offset to account for vertically centering multiple lines of text - no
+ // need to adjust anything for vertical align top or baseline
+ var offset = 0;
+
+ var vAlign = p.textAlign().vertical;
+ if (vAlign === constants.CENTER) {
+ offset = (cars.length - 1) * p.textLeading() / 2;
+ } else if (vAlign === constants.BOTTOM) {
+ offset = (cars.length - 1) * p.textLeading();
+ }
+
+ for (jj = 0; jj < cars.length; jj++) {
+ this._renderText(p, cars[jj], x, y - offset, finalMaxHeight);
+ y += p.textLeading();
+ }
+ }
+
+ return p;
+ };
+
+ _main.default.Renderer.prototype._applyDefaults = function() {
+ return this;
+ };
+
+ /**
+ * Helper fxn to check font type (system or otf)
+ */
+ _main.default.Renderer.prototype._isOpenType = function() {
+ var f =
+ arguments.length > 0 && arguments[0] !== undefined
+ ? arguments[0]
+ : this._textFont;
+ return _typeof(f) === 'object' && f.font && f.font.supported;
+ };
+
+ _main.default.Renderer.prototype._updateTextMetrics = function() {
+ if (this._isOpenType()) {
+ this._setProperty('_textAscent', this._textFont._textAscent());
+ this._setProperty('_textDescent', this._textFont._textDescent());
+ return this;
+ }
+
+ // Adapted from http://stackoverflow.com/a/25355178
+ var text = document.createElement('span');
+ text.style.fontFamily = this._textFont;
+ text.style.fontSize = ''.concat(this._textSize, 'px');
+ text.innerHTML = 'ABCjgq|';
+
+ var block = document.createElement('div');
+ block.style.display = 'inline-block';
+ block.style.width = '1px';
+ block.style.height = '0px';
+
+ var container = document.createElement('div');
+ container.appendChild(text);
+ container.appendChild(block);
+
+ container.style.height = '0px';
+ container.style.overflow = 'hidden';
+ document.body.appendChild(container);
+
+ block.style.verticalAlign = 'baseline';
+ var blockOffset = calculateOffset(block);
+ var textOffset = calculateOffset(text);
+ var ascent = blockOffset[1] - textOffset[1];
+
+ block.style.verticalAlign = 'bottom';
+ blockOffset = calculateOffset(block);
+ textOffset = calculateOffset(text);
+ var height = blockOffset[1] - textOffset[1];
+ var descent = height - ascent;
+
+ document.body.removeChild(container);
+
+ this._setProperty('_textAscent', ascent);
+ this._setProperty('_textDescent', descent);
+
+ return this;
+ };
+
+ /**
+ * Helper fxn to measure ascent and descent.
+ * Adapted from http://stackoverflow.com/a/25355178
+ */
+ function calculateOffset(object) {
+ var currentLeft = 0,
+ currentTop = 0;
+ if (object.offsetParent) {
+ do {
+ currentLeft += object.offsetLeft;
+ currentTop += object.offsetTop;
+ } while ((object = object.offsetParent));
+ } else {
+ currentLeft += object.offsetLeft;
+ currentTop += object.offsetTop;
+ }
+ return [currentLeft, currentTop];
+ }
+ var _default = _main.default.Renderer;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, './main': 27 }
+ ],
+ 31: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ var _filters = _interopRequireDefault(_dereq_('../image/filters'));
+
+ _dereq_('./p5.Renderer');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+
+ /**
+ * p5.Renderer2D
+ * The 2D graphics canvas renderer class.
+ * extends p5.Renderer
+ */
+ var styleEmpty = 'rgba(0,0,0,0)';
+ // const alphaThreshold = 0.00125; // minimum visible
+
+ _main.default.Renderer2D = function(elt, pInst, isMainCanvas) {
+ _main.default.Renderer.call(this, elt, pInst, isMainCanvas);
+ this.drawingContext = this.canvas.getContext('2d');
+ this._pInst._setProperty('drawingContext', this.drawingContext);
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype = Object.create(
+ _main.default.Renderer.prototype
+ );
+
+ _main.default.Renderer2D.prototype._applyDefaults = function() {
+ this._cachedFillStyle = this._cachedStrokeStyle = undefined;
+ this._cachedBlendMode = constants.BLEND;
+ this._setFill(constants._DEFAULT_FILL);
+ this._setStroke(constants._DEFAULT_STROKE);
+ this.drawingContext.lineCap = constants.ROUND;
+ this.drawingContext.font = 'normal 12px sans-serif';
+ };
+
+ _main.default.Renderer2D.prototype.resize = function(w, h) {
+ _main.default.Renderer.prototype.resize.call(this, w, h);
+ this.drawingContext.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
+ };
+
+ //////////////////////////////////////////////
+ // COLOR | Setting
+ //////////////////////////////////////////////
+
+ _main.default.Renderer2D.prototype.background = function() {
+ this.drawingContext.save();
+ this.resetMatrix();
+
+ if (
+ (arguments.length <= 0 ? undefined : arguments[0]) instanceof
+ _main.default.Image
+ ) {
+ this._pInst.image(
+ arguments.length <= 0 ? undefined : arguments[0],
+ 0,
+ 0,
+ this.width,
+ this.height
+ );
+ } else {
+ var _this$_pInst;
+ var curFill = this._getFill();
+ // create background rect
+ var color = (_this$_pInst = this._pInst).color.apply(_this$_pInst, arguments);
+ var newFill = color.toString();
+ this._setFill(newFill);
+
+ if (this._isErasing) {
+ this.blendMode(this._cachedBlendMode);
+ }
+
+ this.drawingContext.fillRect(0, 0, this.width, this.height);
+ // reset fill
+ this._setFill(curFill);
+
+ if (this._isErasing) {
+ this._pInst.erase();
+ }
+ }
+ this.drawingContext.restore();
+ };
+
+ _main.default.Renderer2D.prototype.clear = function() {
+ this.drawingContext.save();
+ this.resetMatrix();
+ this.drawingContext.clearRect(0, 0, this.width, this.height);
+ this.drawingContext.restore();
+ };
+
+ _main.default.Renderer2D.prototype.fill = function() {
+ var _this$_pInst2;
+ var color = (_this$_pInst2 = this._pInst).color.apply(_this$_pInst2, arguments);
+ this._setFill(color.toString());
+ };
+
+ _main.default.Renderer2D.prototype.stroke = function() {
+ var _this$_pInst3;
+ var color = (_this$_pInst3 = this._pInst).color.apply(_this$_pInst3, arguments);
+ this._setStroke(color.toString());
+ };
+
+ _main.default.Renderer2D.prototype.erase = function(opacityFill, opacityStroke) {
+ if (!this._isErasing) {
+ // cache the fill style
+ this._cachedFillStyle = this.drawingContext.fillStyle;
+ var newFill = this._pInst.color(255, opacityFill).toString();
+ this.drawingContext.fillStyle = newFill;
+
+ //cache the stroke style
+ this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+ var newStroke = this._pInst.color(255, opacityStroke).toString();
+ this.drawingContext.strokeStyle = newStroke;
+
+ //cache blendMode
+ var tempBlendMode = this._cachedBlendMode;
+ this.blendMode(constants.REMOVE);
+ this._cachedBlendMode = tempBlendMode;
+
+ this._isErasing = true;
+ }
+ };
+
+ _main.default.Renderer2D.prototype.noErase = function() {
+ if (this._isErasing) {
+ this.drawingContext.fillStyle = this._cachedFillStyle;
+ this.drawingContext.strokeStyle = this._cachedStrokeStyle;
+
+ this.blendMode(this._cachedBlendMode);
+ this._isErasing = false;
+ }
+ };
+
+ //////////////////////////////////////////////
+ // IMAGE | Loading & Displaying
+ //////////////////////////////////////////////
+
+ _main.default.Renderer2D.prototype.image = function(
+ img,
+ sx,
+ sy,
+ sWidth,
+ sHeight,
+ dx,
+ dy,
+ dWidth,
+ dHeight
+ ) {
+ var cnv;
+ if (img.gifProperties) {
+ img._animateGif(this._pInst);
+ }
+
+ try {
+ if (this._tint) {
+ if (
+ _main.default.MediaElement &&
+ img instanceof _main.default.MediaElement
+ ) {
+ img.loadPixels();
+ }
+ if (img.canvas) {
+ cnv = this._getTintedImageCanvas(img);
+ }
+ }
+ if (!cnv) {
+ cnv = img.canvas || img.elt;
+ }
+ var s = 1;
+ if (img.width && img.width > 0) {
+ s = cnv.width / img.width;
+ }
+ if (this._isErasing) {
+ this.blendMode(this._cachedBlendMode);
+ }
+ this.drawingContext.drawImage(
+ cnv,
+ s * sx,
+ s * sy,
+ s * sWidth,
+ s * sHeight,
+ dx,
+ dy,
+ dWidth,
+ dHeight
+ );
+
+ if (this._isErasing) {
+ this._pInst.erase();
+ }
+ } catch (e) {
+ if (e.name !== 'NS_ERROR_NOT_AVAILABLE') {
+ throw e;
+ }
+ }
+ };
+
+ _main.default.Renderer2D.prototype._getTintedImageCanvas = function(img) {
+ if (!img.canvas) {
+ return img;
+ }
+ var pixels = _filters.default._toPixels(img.canvas);
+ var tmpCanvas = document.createElement('canvas');
+ tmpCanvas.width = img.canvas.width;
+ tmpCanvas.height = img.canvas.height;
+ var tmpCtx = tmpCanvas.getContext('2d');
+ var id = tmpCtx.createImageData(img.canvas.width, img.canvas.height);
+ var newPixels = id.data;
+ for (var i = 0; i < pixels.length; i += 4) {
+ var r = pixels[i];
+ var g = pixels[i + 1];
+ var b = pixels[i + 2];
+ var a = pixels[i + 3];
+ newPixels[i] = r * this._tint[0] / 255;
+ newPixels[i + 1] = g * this._tint[1] / 255;
+ newPixels[i + 2] = b * this._tint[2] / 255;
+ newPixels[i + 3] = a * this._tint[3] / 255;
+ }
+ tmpCtx.putImageData(id, 0, 0);
+ return tmpCanvas;
+ };
+
+ //////////////////////////////////////////////
+ // IMAGE | Pixels
+ //////////////////////////////////////////////
+
+ _main.default.Renderer2D.prototype.blendMode = function(mode) {
+ if (mode === constants.SUBTRACT) {
+ console.warn('blendMode(SUBTRACT) only works in WEBGL mode.');
+ } else if (
+ mode === constants.BLEND ||
+ mode === constants.REMOVE ||
+ mode === constants.DARKEST ||
+ mode === constants.LIGHTEST ||
+ mode === constants.DIFFERENCE ||
+ mode === constants.MULTIPLY ||
+ mode === constants.EXCLUSION ||
+ mode === constants.SCREEN ||
+ mode === constants.REPLACE ||
+ mode === constants.OVERLAY ||
+ mode === constants.HARD_LIGHT ||
+ mode === constants.SOFT_LIGHT ||
+ mode === constants.DODGE ||
+ mode === constants.BURN ||
+ mode === constants.ADD
+ ) {
+ this._cachedBlendMode = mode;
+ this.drawingContext.globalCompositeOperation = mode;
+ } else {
+ throw new Error('Mode '.concat(mode, ' not recognized.'));
+ }
+ };
+
+ _main.default.Renderer2D.prototype.blend = function() {
+ var currBlend = this.drawingContext.globalCompositeOperation;
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ var blendMode = args[args.length - 1];
+
+ var copyArgs = Array.prototype.slice.call(args, 0, args.length - 1);
+
+ this.drawingContext.globalCompositeOperation = blendMode;
+
+ _main.default.prototype.copy.apply(this, copyArgs);
+
+ this.drawingContext.globalCompositeOperation = currBlend;
+ };
+
+ // p5.Renderer2D.prototype.get = p5.Renderer.prototype.get;
+ // .get() is not overridden
+
+ // x,y are canvas-relative (pre-scaled by _pixelDensity)
+ _main.default.Renderer2D.prototype._getPixel = function(x, y) {
+ var imageData, index;
+ imageData = this.drawingContext.getImageData(x, y, 1, 1).data;
+ index = 0;
+ return [
+ imageData[index + 0],
+ imageData[index + 1],
+ imageData[index + 2],
+ imageData[index + 3]
+ ];
+ };
+
+ _main.default.Renderer2D.prototype.loadPixels = function() {
+ var pixelsState = this._pixelsState; // if called by p5.Image
+
+ var pd = pixelsState._pixelDensity;
+ var w = this.width * pd;
+ var h = this.height * pd;
+ var imageData = this.drawingContext.getImageData(0, 0, w, h);
+ // @todo this should actually set pixels per object, so diff buffers can
+ // have diff pixel arrays.
+ pixelsState._setProperty('imageData', imageData);
+ pixelsState._setProperty('pixels', imageData.data);
+ };
+
+ _main.default.Renderer2D.prototype.set = function(x, y, imgOrCol) {
+ // round down to get integer numbers
+ x = Math.floor(x);
+ y = Math.floor(y);
+ var pixelsState = this._pixelsState;
+ if (imgOrCol instanceof _main.default.Image) {
+ this.drawingContext.save();
+ this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
+ this.drawingContext.scale(
+ pixelsState._pixelDensity,
+ pixelsState._pixelDensity
+ );
+
+ this.drawingContext.drawImage(imgOrCol.canvas, x, y);
+ this.drawingContext.restore();
+ } else {
+ var r = 0,
+ g = 0,
+ b = 0,
+ a = 0;
+ var idx =
+ 4 *
+ (y * pixelsState._pixelDensity * (this.width * pixelsState._pixelDensity) +
+ x * pixelsState._pixelDensity);
+ if (!pixelsState.imageData) {
+ pixelsState.loadPixels.call(pixelsState);
+ }
+ if (typeof imgOrCol === 'number') {
+ if (idx < pixelsState.pixels.length) {
+ r = imgOrCol;
+ g = imgOrCol;
+ b = imgOrCol;
+ a = 255;
+ //this.updatePixels.call(this);
+ }
+ } else if (imgOrCol instanceof Array) {
+ if (imgOrCol.length < 4) {
+ throw new Error('pixel array must be of the form [R, G, B, A]');
+ }
+ if (idx < pixelsState.pixels.length) {
+ r = imgOrCol[0];
+ g = imgOrCol[1];
+ b = imgOrCol[2];
+ a = imgOrCol[3];
+ //this.updatePixels.call(this);
+ }
+ } else if (imgOrCol instanceof _main.default.Color) {
+ if (idx < pixelsState.pixels.length) {
+ r = imgOrCol.levels[0];
+ g = imgOrCol.levels[1];
+ b = imgOrCol.levels[2];
+ a = imgOrCol.levels[3];
+ //this.updatePixels.call(this);
+ }
+ }
+ // loop over pixelDensity * pixelDensity
+ for (var i = 0; i < pixelsState._pixelDensity; i++) {
+ for (var j = 0; j < pixelsState._pixelDensity; j++) {
+ // loop over
+ idx =
+ 4 *
+ ((y * pixelsState._pixelDensity + j) *
+ this.width *
+ pixelsState._pixelDensity +
+ (x * pixelsState._pixelDensity + i));
+ pixelsState.pixels[idx] = r;
+ pixelsState.pixels[idx + 1] = g;
+ pixelsState.pixels[idx + 2] = b;
+ pixelsState.pixels[idx + 3] = a;
+ }
+ }
+ }
+ };
+
+ _main.default.Renderer2D.prototype.updatePixels = function(x, y, w, h) {
+ var pixelsState = this._pixelsState;
+ var pd = pixelsState._pixelDensity;
+ if (x === undefined && y === undefined && w === undefined && h === undefined) {
+ x = 0;
+ y = 0;
+ w = this.width;
+ h = this.height;
+ }
+ x *= pd;
+ y *= pd;
+ w *= pd;
+ h *= pd;
+
+ if (this.gifProperties) {
+ this.gifProperties.frames[this.gifProperties.displayIndex] =
+ pixelsState.imageData;
+ }
+
+ this.drawingContext.putImageData(pixelsState.imageData, x, y, 0, 0, w, h);
+ };
+
+ //////////////////////////////////////////////
+ // SHAPE | 2D Primitives
+ //////////////////////////////////////////////
+
+ /**
+ * Generate a cubic Bezier representing an arc on the unit circle of total
+ * angle `size` radians, beginning `start` radians above the x-axis. Up to
+ * four of these curves are combined to make a full arc.
+ *
+ * See www.joecridge.me/bezier.pdf for an explanation of the method.
+ */
+ _main.default.Renderer2D.prototype._acuteArcToBezier = function _acuteArcToBezier(
+ start,
+ size
+ ) {
+ // Evaluate constants.
+ var alpha = size / 2.0,
+ cos_alpha = Math.cos(alpha),
+ sin_alpha = Math.sin(alpha),
+ cot_alpha = 1.0 / Math.tan(alpha),
+ // This is how far the arc needs to be rotated.
+ phi = start + alpha,
+ cos_phi = Math.cos(phi),
+ sin_phi = Math.sin(phi),
+ lambda = (4.0 - cos_alpha) / 3.0,
+ mu = sin_alpha + (cos_alpha - lambda) * cot_alpha;
+
+ // Return rotated waypoints.
+ return {
+ ax: Math.cos(start).toFixed(7),
+ ay: Math.sin(start).toFixed(7),
+ bx: (lambda * cos_phi + mu * sin_phi).toFixed(7),
+ by: (lambda * sin_phi - mu * cos_phi).toFixed(7),
+ cx: (lambda * cos_phi - mu * sin_phi).toFixed(7),
+ cy: (lambda * sin_phi + mu * cos_phi).toFixed(7),
+ dx: Math.cos(start + size).toFixed(7),
+ dy: Math.sin(start + size).toFixed(7)
+ };
+ };
+
+ /*
+ * This function requires that:
+ *
+ * 0 <= start < TWO_PI
+ *
+ * start <= stop < start + TWO_PI
+ */
+ _main.default.Renderer2D.prototype.arc = function(x, y, w, h, start, stop, mode) {
+ var ctx = this.drawingContext;
+ var rx = w / 2.0;
+ var ry = h / 2.0;
+ var epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
+ var arcToDraw = 0;
+ var curves = [];
+
+ x += rx;
+ y += ry;
+
+ // Create curves
+ while (stop - start >= epsilon) {
+ arcToDraw = Math.min(stop - start, constants.HALF_PI);
+ curves.push(this._acuteArcToBezier(start, arcToDraw));
+ start += arcToDraw;
+ }
+
+ // Fill curves
+ if (this._doFill) {
+ ctx.beginPath();
+ curves.forEach(function(curve, index) {
+ if (index === 0) {
+ ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry);
+ }
+ // prettier-ignore
+ ctx.bezierCurveTo(x + curve.bx * rx, y + curve.by * ry,
+ x + curve.cx * rx, y + curve.cy * ry,
+ x + curve.dx * rx, y + curve.dy * ry);
+ });
+ if (mode === constants.PIE || mode == null) {
+ ctx.lineTo(x, y);
+ }
+ ctx.closePath();
+ ctx.fill();
+ }
+
+ // Stroke curves
+ if (this._doStroke) {
+ ctx.beginPath();
+ curves.forEach(function(curve, index) {
+ if (index === 0) {
+ ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry);
+ }
+ // prettier-ignore
+ ctx.bezierCurveTo(x + curve.bx * rx, y + curve.by * ry,
+ x + curve.cx * rx, y + curve.cy * ry,
+ x + curve.dx * rx, y + curve.dy * ry);
+ });
+ if (mode === constants.PIE) {
+ ctx.lineTo(x, y);
+ ctx.closePath();
+ } else if (mode === constants.CHORD) {
+ ctx.closePath();
+ }
+ ctx.stroke();
+ }
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.ellipse = function(args) {
+ var ctx = this.drawingContext;
+ var doFill = this._doFill,
+ doStroke = this._doStroke;
+ var x = parseFloat(args[0]),
+ y = parseFloat(args[1]),
+ w = parseFloat(args[2]),
+ h = parseFloat(args[3]);
+ if (doFill && !doStroke) {
+ if (this._getFill() === styleEmpty) {
+ return this;
+ }
+ } else if (!doFill && doStroke) {
+ if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ }
+ var kappa = 0.5522847498,
+ // control point offset horizontal
+ ox = w / 2 * kappa,
+ // control point offset vertical
+ oy = h / 2 * kappa,
+ // x-end
+ xe = x + w,
+ // y-end
+ ye = y + h,
+ // x-middle
+ xm = x + w / 2,
+ ym = y + h / 2; // y-middle
+ ctx.beginPath();
+ ctx.moveTo(x, ym);
+ ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+ ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ ctx.closePath();
+ if (doFill) {
+ ctx.fill();
+ }
+ if (doStroke) {
+ ctx.stroke();
+ }
+ };
+
+ _main.default.Renderer2D.prototype.line = function(x1, y1, x2, y2) {
+ var ctx = this.drawingContext;
+ if (!this._doStroke) {
+ return this;
+ } else if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.point = function(x, y) {
+ var ctx = this.drawingContext;
+ if (!this._doStroke) {
+ return this;
+ } else if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ var s = this._getStroke();
+ var f = this._getFill();
+ x = Math.round(x);
+ y = Math.round(y);
+ // swapping fill color to stroke and back after for correct point rendering
+ this._setFill(s);
+ if (ctx.lineWidth > 1) {
+ ctx.beginPath();
+ ctx.arc(x, y, ctx.lineWidth / 2, 0, constants.TWO_PI, false);
+ ctx.fill();
+ } else {
+ ctx.fillRect(x, y, 1, 1);
+ }
+ this._setFill(f);
+ };
+
+ _main.default.Renderer2D.prototype.quad = function(
+ x1,
+ y1,
+ x2,
+ y2,
+ x3,
+ y3,
+ x4,
+ y4
+ ) {
+ var ctx = this.drawingContext;
+ var doFill = this._doFill,
+ doStroke = this._doStroke;
+ if (doFill && !doStroke) {
+ if (this._getFill() === styleEmpty) {
+ return this;
+ }
+ } else if (!doFill && doStroke) {
+ if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ }
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.lineTo(x3, y3);
+ ctx.lineTo(x4, y4);
+ ctx.closePath();
+ if (doFill) {
+ ctx.fill();
+ }
+ if (doStroke) {
+ ctx.stroke();
+ }
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.rect = function(args) {
+ var x = args[0];
+ var y = args[1];
+ var w = args[2];
+ var h = args[3];
+ var tl = args[4];
+ var tr = args[5];
+ var br = args[6];
+ var bl = args[7];
+ var ctx = this.drawingContext;
+ var doFill = this._doFill,
+ doStroke = this._doStroke;
+ if (doFill && !doStroke) {
+ if (this._getFill() === styleEmpty) {
+ return this;
+ }
+ } else if (!doFill && doStroke) {
+ if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ }
+ ctx.beginPath();
+
+ if (typeof tl === 'undefined') {
+ // No rounded corners
+ ctx.rect(x, y, w, h);
+ } else {
+ // At least one rounded corner
+ // Set defaults when not specified
+ if (typeof tr === 'undefined') {
+ tr = tl;
+ }
+ if (typeof br === 'undefined') {
+ br = tr;
+ }
+ if (typeof bl === 'undefined') {
+ bl = br;
+ }
+
+ // corner rounding must always be positive
+ var absW = Math.abs(w);
+ var absH = Math.abs(h);
+ var hw = absW / 2;
+ var hh = absH / 2;
+
+ // Clip radii
+ if (absW < 2 * tl) {
+ tl = hw;
+ }
+ if (absH < 2 * tl) {
+ tl = hh;
+ }
+ if (absW < 2 * tr) {
+ tr = hw;
+ }
+ if (absH < 2 * tr) {
+ tr = hh;
+ }
+ if (absW < 2 * br) {
+ br = hw;
+ }
+ if (absH < 2 * br) {
+ br = hh;
+ }
+ if (absW < 2 * bl) {
+ bl = hw;
+ }
+ if (absH < 2 * bl) {
+ bl = hh;
+ }
+
+ // Draw shape
+ ctx.beginPath();
+ ctx.moveTo(x + tl, y);
+ ctx.arcTo(x + w, y, x + w, y + h, tr);
+ ctx.arcTo(x + w, y + h, x, y + h, br);
+ ctx.arcTo(x, y + h, x, y, bl);
+ ctx.arcTo(x, y, x + w, y, tl);
+ ctx.closePath();
+ }
+ if (this._doFill) {
+ ctx.fill();
+ }
+ if (this._doStroke) {
+ ctx.stroke();
+ }
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.triangle = function(args) {
+ var ctx = this.drawingContext;
+ var doFill = this._doFill,
+ doStroke = this._doStroke;
+ var x1 = args[0],
+ y1 = args[1];
+ var x2 = args[2],
+ y2 = args[3];
+ var x3 = args[4],
+ y3 = args[5];
+ if (doFill && !doStroke) {
+ if (this._getFill() === styleEmpty) {
+ return this;
+ }
+ } else if (!doFill && doStroke) {
+ if (this._getStroke() === styleEmpty) {
+ return this;
+ }
+ }
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.lineTo(x3, y3);
+ ctx.closePath();
+ if (doFill) {
+ ctx.fill();
+ }
+ if (doStroke) {
+ ctx.stroke();
+ }
+ };
+
+ _main.default.Renderer2D.prototype.endShape = function(
+ mode,
+ vertices,
+ isCurve,
+ isBezier,
+ isQuadratic,
+ isContour,
+ shapeKind
+ ) {
+ if (vertices.length === 0) {
+ return this;
+ }
+ if (!this._doStroke && !this._doFill) {
+ return this;
+ }
+ var closeShape = mode === constants.CLOSE;
+ var v;
+ if (closeShape && !isContour) {
+ vertices.push(vertices[0]);
+ }
+ var i, j;
+ var numVerts = vertices.length;
+ if (isCurve && (shapeKind === constants.POLYGON || shapeKind === null)) {
+ if (numVerts > 3) {
+ var b = [],
+ s = 1 - this._curveTightness;
+ this.drawingContext.beginPath();
+ this.drawingContext.moveTo(vertices[1][0], vertices[1][1]);
+ for (i = 1; i + 2 < numVerts; i++) {
+ v = vertices[i];
+ b[0] = [v[0], v[1]];
+ b[1] = [
+ v[0] + (s * vertices[i + 1][0] - s * vertices[i - 1][0]) / 6,
+ v[1] + (s * vertices[i + 1][1] - s * vertices[i - 1][1]) / 6
+ ];
+
+ b[2] = [
+ vertices[i + 1][0] + (s * vertices[i][0] - s * vertices[i + 2][0]) / 6,
+ vertices[i + 1][1] + (s * vertices[i][1] - s * vertices[i + 2][1]) / 6
+ ];
+
+ b[3] = [vertices[i + 1][0], vertices[i + 1][1]];
+ this.drawingContext.bezierCurveTo(
+ b[1][0],
+ b[1][1],
+ b[2][0],
+ b[2][1],
+ b[3][0],
+ b[3][1]
+ );
+ }
+ if (closeShape) {
+ this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ } else if (
+ isBezier &&
+ (shapeKind === constants.POLYGON || shapeKind === null)
+ ) {
+ this.drawingContext.beginPath();
+ for (i = 0; i < numVerts; i++) {
+ if (vertices[i].isVert) {
+ if (vertices[i].moveTo) {
+ this.drawingContext.moveTo(vertices[i][0], vertices[i][1]);
+ } else {
+ this.drawingContext.lineTo(vertices[i][0], vertices[i][1]);
+ }
+ } else {
+ this.drawingContext.bezierCurveTo(
+ vertices[i][0],
+ vertices[i][1],
+ vertices[i][2],
+ vertices[i][3],
+ vertices[i][4],
+ vertices[i][5]
+ );
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ } else if (
+ isQuadratic &&
+ (shapeKind === constants.POLYGON || shapeKind === null)
+ ) {
+ this.drawingContext.beginPath();
+ for (i = 0; i < numVerts; i++) {
+ if (vertices[i].isVert) {
+ if (vertices[i].moveTo) {
+ this.drawingContext.moveTo(vertices[i][0], vertices[i][1]);
+ } else {
+ this.drawingContext.lineTo(vertices[i][0], vertices[i][1]);
+ }
+ } else {
+ this.drawingContext.quadraticCurveTo(
+ vertices[i][0],
+ vertices[i][1],
+ vertices[i][2],
+ vertices[i][3]
+ );
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ } else {
+ if (shapeKind === constants.POINTS) {
+ for (i = 0; i < numVerts; i++) {
+ v = vertices[i];
+ if (this._doStroke) {
+ this._pInst.stroke(v[6]);
+ }
+ this._pInst.point(v[0], v[1]);
+ }
+ } else if (shapeKind === constants.LINES) {
+ for (i = 0; i + 1 < numVerts; i += 2) {
+ v = vertices[i];
+ if (this._doStroke) {
+ this._pInst.stroke(vertices[i + 1][6]);
+ }
+ this._pInst.line(v[0], v[1], vertices[i + 1][0], vertices[i + 1][1]);
+ }
+ } else if (shapeKind === constants.TRIANGLES) {
+ for (i = 0; i + 2 < numVerts; i += 3) {
+ v = vertices[i];
+ this.drawingContext.beginPath();
+ this.drawingContext.moveTo(v[0], v[1]);
+ this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+ this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]);
+ this.drawingContext.closePath();
+ if (this._doFill) {
+ this._pInst.fill(vertices[i + 2][5]);
+ this.drawingContext.fill();
+ }
+ if (this._doStroke) {
+ this._pInst.stroke(vertices[i + 2][6]);
+ this.drawingContext.stroke();
+ }
+ }
+ } else if (shapeKind === constants.TRIANGLE_STRIP) {
+ for (i = 0; i + 1 < numVerts; i++) {
+ v = vertices[i];
+ this.drawingContext.beginPath();
+ this.drawingContext.moveTo(vertices[i + 1][0], vertices[i + 1][1]);
+ this.drawingContext.lineTo(v[0], v[1]);
+ if (this._doStroke) {
+ this._pInst.stroke(vertices[i + 1][6]);
+ }
+ if (this._doFill) {
+ this._pInst.fill(vertices[i + 1][5]);
+ }
+ if (i + 2 < numVerts) {
+ this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]);
+ if (this._doStroke) {
+ this._pInst.stroke(vertices[i + 2][6]);
+ }
+ if (this._doFill) {
+ this._pInst.fill(vertices[i + 2][5]);
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ } else if (shapeKind === constants.TRIANGLE_FAN) {
+ if (numVerts > 2) {
+ // For performance reasons, try to batch as many of the
+ // fill and stroke calls as possible.
+ this.drawingContext.beginPath();
+ for (i = 2; i < numVerts; i++) {
+ v = vertices[i];
+ this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
+ this.drawingContext.lineTo(vertices[i - 1][0], vertices[i - 1][1]);
+ this.drawingContext.lineTo(v[0], v[1]);
+ this.drawingContext.lineTo(vertices[0][0], vertices[0][1]);
+ // If the next colour is going to be different, stroke / fill now
+ if (i < numVerts - 1) {
+ if (
+ (this._doFill && v[5] !== vertices[i + 1][5]) ||
+ (this._doStroke && v[6] !== vertices[i + 1][6])
+ ) {
+ if (this._doFill) {
+ this._pInst.fill(v[5]);
+ this.drawingContext.fill();
+ this._pInst.fill(vertices[i + 1][5]);
+ }
+ if (this._doStroke) {
+ this._pInst.stroke(v[6]);
+ this.drawingContext.stroke();
+ this._pInst.stroke(vertices[i + 1][6]);
+ }
+ this.drawingContext.closePath();
+ this.drawingContext.beginPath(); // Begin the next one
+ }
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ } else if (shapeKind === constants.QUADS) {
+ for (i = 0; i + 3 < numVerts; i += 4) {
+ v = vertices[i];
+ this.drawingContext.beginPath();
+ this.drawingContext.moveTo(v[0], v[1]);
+ for (j = 1; j < 4; j++) {
+ this.drawingContext.lineTo(vertices[i + j][0], vertices[i + j][1]);
+ }
+ this.drawingContext.lineTo(v[0], v[1]);
+ if (this._doFill) {
+ this._pInst.fill(vertices[i + 3][5]);
+ }
+ if (this._doStroke) {
+ this._pInst.stroke(vertices[i + 3][6]);
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ } else if (shapeKind === constants.QUAD_STRIP) {
+ if (numVerts > 3) {
+ for (i = 0; i + 1 < numVerts; i += 2) {
+ v = vertices[i];
+ this.drawingContext.beginPath();
+ if (i + 3 < numVerts) {
+ this.drawingContext.moveTo(vertices[i + 2][0], vertices[i + 2][1]);
+ this.drawingContext.lineTo(v[0], v[1]);
+ this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+ this.drawingContext.lineTo(vertices[i + 3][0], vertices[i + 3][1]);
+ if (this._doFill) {
+ this._pInst.fill(vertices[i + 3][5]);
+ }
+ if (this._doStroke) {
+ this._pInst.stroke(vertices[i + 3][6]);
+ }
+ } else {
+ this.drawingContext.moveTo(v[0], v[1]);
+ this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ }
+ } else {
+ this.drawingContext.beginPath();
+ this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
+ for (i = 1; i < numVerts; i++) {
+ v = vertices[i];
+ if (v.isVert) {
+ if (v.moveTo) {
+ this.drawingContext.moveTo(v[0], v[1]);
+ } else {
+ this.drawingContext.lineTo(v[0], v[1]);
+ }
+ }
+ }
+ this._doFillStrokeClose(closeShape);
+ }
+ }
+ isCurve = false;
+ isBezier = false;
+ isQuadratic = false;
+ isContour = false;
+ if (closeShape) {
+ vertices.pop();
+ }
+
+ return this;
+ };
+ //////////////////////////////////////////////
+ // SHAPE | Attributes
+ //////////////////////////////////////////////
+
+ _main.default.Renderer2D.prototype.strokeCap = function(cap) {
+ if (
+ cap === constants.ROUND ||
+ cap === constants.SQUARE ||
+ cap === constants.PROJECT
+ ) {
+ this.drawingContext.lineCap = cap;
+ }
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.strokeJoin = function(join) {
+ if (
+ join === constants.ROUND ||
+ join === constants.BEVEL ||
+ join === constants.MITER
+ ) {
+ this.drawingContext.lineJoin = join;
+ }
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.strokeWeight = function(w) {
+ if (typeof w === 'undefined' || w === 0) {
+ // hack because lineWidth 0 doesn't work
+ this.drawingContext.lineWidth = 0.0001;
+ } else {
+ this.drawingContext.lineWidth = w;
+ }
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype._getFill = function() {
+ if (!this._cachedFillStyle) {
+ this._cachedFillStyle = this.drawingContext.fillStyle;
+ }
+ return this._cachedFillStyle;
+ };
+
+ _main.default.Renderer2D.prototype._setFill = function(fillStyle) {
+ if (fillStyle !== this._cachedFillStyle) {
+ this.drawingContext.fillStyle = fillStyle;
+ this._cachedFillStyle = fillStyle;
+ }
+ };
+
+ _main.default.Renderer2D.prototype._getStroke = function() {
+ if (!this._cachedStrokeStyle) {
+ this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+ }
+ return this._cachedStrokeStyle;
+ };
+
+ _main.default.Renderer2D.prototype._setStroke = function(strokeStyle) {
+ if (strokeStyle !== this._cachedStrokeStyle) {
+ this.drawingContext.strokeStyle = strokeStyle;
+ this._cachedStrokeStyle = strokeStyle;
+ }
+ };
+
+ //////////////////////////////////////////////
+ // SHAPE | Curves
+ //////////////////////////////////////////////
+ _main.default.Renderer2D.prototype.bezier = function(
+ x1,
+ y1,
+ x2,
+ y2,
+ x3,
+ y3,
+ x4,
+ y4
+ ) {
+ this._pInst.beginShape();
+ this._pInst.vertex(x1, y1);
+ this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4);
+ this._pInst.endShape();
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.curve = function(
+ x1,
+ y1,
+ x2,
+ y2,
+ x3,
+ y3,
+ x4,
+ y4
+ ) {
+ this._pInst.beginShape();
+ this._pInst.curveVertex(x1, y1);
+ this._pInst.curveVertex(x2, y2);
+ this._pInst.curveVertex(x3, y3);
+ this._pInst.curveVertex(x4, y4);
+ this._pInst.endShape();
+ return this;
+ };
+
+ //////////////////////////////////////////////
+ // SHAPE | Vertex
+ //////////////////////////////////////////////
+
+ _main.default.Renderer2D.prototype._doFillStrokeClose = function(closeShape) {
+ if (closeShape) {
+ this.drawingContext.closePath();
+ }
+ if (this._doFill) {
+ this.drawingContext.fill();
+ }
+ if (this._doStroke) {
+ this.drawingContext.stroke();
+ }
+ };
+
+ //////////////////////////////////////////////
+ // TRANSFORM
+ //////////////////////////////////////////////
+
+ _main.default.Renderer2D.prototype.applyMatrix = function(a, b, c, d, e, f) {
+ this.drawingContext.transform(a, b, c, d, e, f);
+ };
+
+ _main.default.Renderer2D.prototype.resetMatrix = function() {
+ this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
+ this.drawingContext.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
+
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.rotate = function(rad) {
+ this.drawingContext.rotate(rad);
+ };
+
+ _main.default.Renderer2D.prototype.scale = function(x, y) {
+ this.drawingContext.scale(x, y);
+ return this;
+ };
+
+ _main.default.Renderer2D.prototype.translate = function(x, y) {
+ // support passing a vector as the 1st parameter
+ if (x instanceof _main.default.Vector) {
+ y = x.y;
+ x = x.x;
+ }
+ this.drawingContext.translate(x, y);
+ return this;
+ };
+
+ //////////////////////////////////////////////
+ // TYPOGRAPHY
+ //
+ //////////////////////////////////////////////
+
+ _main.default.Renderer2D.prototype.text = function(
+ str,
+ x,
+ y,
+ maxWidth,
+ maxHeight
+ ) {
+ var baselineHacked;
+
+ // baselineHacked: (HACK)
+ // A temporary fix to conform to Processing's implementation
+ // of BASELINE vertical alignment in a bounding box
+
+ if (typeof maxWidth !== 'undefined') {
+ if (this.drawingContext.textBaseline === constants.BASELINE) {
+ baselineHacked = true;
+ this.drawingContext.textBaseline = constants.TOP;
+ }
+ }
+
+ var p = _main.default.Renderer.prototype.text.apply(this, arguments);
+
+ if (baselineHacked) {
+ this.drawingContext.textBaseline = constants.BASELINE;
+ }
+
+ return p;
+ };
+
+ _main.default.Renderer2D.prototype._renderText = function(p, line, x, y, maxY) {
+ if (y >= maxY) {
+ return; // don't render lines beyond our maxY position
+ }
+
+ p.push(); // fix to #803
+
+ if (!this._isOpenType()) {
+ // a system/browser font
+
+ // no stroke unless specified by user
+ if (this._doStroke && this._strokeSet) {
+ this.drawingContext.strokeText(line, x, y);
+ }
+
+ if (this._doFill) {
+ // if fill hasn't been set by user, use default text fill
+ if (!this._fillSet) {
+ this._setFill(constants._DEFAULT_TEXT_FILL);
+ }
+
+ this.drawingContext.fillText(line, x, y);
+ }
+ } else {
+ // an opentype font, let it handle the rendering
+
+ this._textFont._renderPath(line, x, y, { renderer: this });
+ }
+
+ p.pop();
+ return p;
+ };
+
+ _main.default.Renderer2D.prototype.textWidth = function(s) {
+ if (this._isOpenType()) {
+ return this._textFont._textWidth(s, this._textSize);
+ }
+
+ return this.drawingContext.measureText(s).width;
+ };
+
+ _main.default.Renderer2D.prototype._applyTextProperties = function() {
+ var font;
+ var p = this._pInst;
+
+ this._setProperty('_textAscent', null);
+ this._setProperty('_textDescent', null);
+
+ font = this._textFont;
+
+ if (this._isOpenType()) {
+ font = this._textFont.font.familyName;
+ this._setProperty('_textStyle', this._textFont.font.styleName);
+ }
+
+ this.drawingContext.font = ''
+ .concat(this._textStyle || 'normal', ' ')
+ .concat(this._textSize || 12, 'px ')
+ .concat(font || 'sans-serif');
+
+ this.drawingContext.textAlign = this._textAlign;
+ if (this._textBaseline === constants.CENTER) {
+ this.drawingContext.textBaseline = constants._CTX_MIDDLE;
+ } else {
+ this.drawingContext.textBaseline = this._textBaseline;
+ }
+
+ return p;
+ };
+
+ //////////////////////////////////////////////
+ // STRUCTURE
+ //////////////////////////////////////////////
+
+ // a push() operation is in progress.
+ // the renderer should return a 'style' object that it wishes to
+ // store on the push stack.
+ // derived renderers should call the base class' push() method
+ // to fetch the base style object.
+ _main.default.Renderer2D.prototype.push = function() {
+ this.drawingContext.save();
+
+ // get the base renderer style
+ return _main.default.Renderer.prototype.push.apply(this);
+ };
+
+ // a pop() operation is in progress
+ // the renderer is passed the 'style' object that it returned
+ // from its push() method.
+ // derived renderers should pass this object to their base
+ // class' pop method
+ _main.default.Renderer2D.prototype.pop = function(style) {
+ this.drawingContext.restore();
+ // Re-cache the fill / stroke state
+ this._cachedFillStyle = this.drawingContext.fillStyle;
+ this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+
+ _main.default.Renderer.prototype.pop.call(this, style);
+ };
+ var _default = _main.default.Renderer2D;
+ exports.default = _default;
+ },
+ { '../image/filters': 48, './constants': 21, './main': 27, './p5.Renderer': 30 }
+ ],
+ 32: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+
+ _main.default.prototype._promisePreloads = [
+ /* Example object
+ {
+ target: p5.prototype, // The target object to have the method modified
+ method: 'loadXAsync', // The name of the preload function to wrap
+ addCallbacks: true, // Whether to automatically handle the p5 callbacks
+ legacyPreloadSetup: { // Optional object to generate a legacy-style preload
+ method: 'loadX', // The name of the legacy preload function to generate
+ createBaseObject: function() {
+ return {};
+ } // An optional function to create the base object for the legacy preload.
+ }
+ }
+ */
+ ];
+
+ _main.default.prototype.registerPromisePreload = function(setup) {
+ _main.default.prototype._promisePreloads.push(setup);
+ };
+
+ var initialSetupRan = false;
+
+ _main.default.prototype._setupPromisePreloads = function() {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = this._promisePreloads[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var preloadSetup = _step.value;
+ var thisValue = this;
+ var method = preloadSetup.method,
+ addCallbacks = preloadSetup.addCallbacks,
+ legacyPreloadSetup = preloadSetup.legacyPreloadSetup;
+ // Get the target object that the preload gets assigned to by default,
+ // that is the current object.
+ var target = preloadSetup.target || this;
+ var sourceFunction = target[method].bind(target);
+ // If the target is the p5 prototype, then only set it up on the first run per page
+ if (target === _main.default.prototype) {
+ if (initialSetupRan) {
+ continue;
+ }
+ thisValue = null;
+ sourceFunction = target[method];
+ }
+
+ // Replace the original method with a wrapped version
+ target[method] = this._wrapPromisePreload(
+ thisValue,
+ sourceFunction,
+ addCallbacks
+ );
+
+ // If a legacy preload is required
+ if (legacyPreloadSetup) {
+ // What is the name for this legacy preload
+ var legacyMethod = legacyPreloadSetup.method;
+ // Wrap the already wrapped Promise-returning method with the legacy setup
+ target[legacyMethod] = this._legacyPreloadGenerator(
+ thisValue,
+ legacyPreloadSetup,
+ target[method]
+ );
+ }
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ initialSetupRan = true;
+ };
+
+ _main.default.prototype._wrapPromisePreload = function(
+ thisValue,
+ fn,
+ addCallbacks
+ ) {
+ var replacementFunction = function replacementFunction() {
+ var _this = this;
+ // Uses the current preload counting mechanism for now.
+ this._incrementPreload();
+ // A variable for the callback function if specified
+ var callback = null;
+ // A variable for the errorCallback function if specified
+ var errorCallback = null;
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ if (addCallbacks) {
+ // Loop from the end of the args array, pulling up to two functions off of
+ // the end and putting them in fns
+ for (var i = args.length - 1; i >= 0 && !errorCallback; i--) {
+ if (typeof args[i] !== 'function') {
+ break;
+ }
+ errorCallback = callback;
+ callback = args.pop();
+ }
+ }
+ // Call the underlying funciton and pass it to Promise.resolve,
+ // so that even if it didn't return a promise we can still
+ // act on the result as if it did.
+ var promise = Promise.resolve(fn.apply(this, args));
+ // Add the optional callbacks
+ if (callback) {
+ promise.then(callback);
+ }
+ if (errorCallback) {
+ promise.catch(errorCallback);
+ }
+ // Decrement the preload counter only if the promise resolved
+ promise.then(function() {
+ return _this._decrementPreload();
+ });
+ // Return the original promise so that neither callback changes the result.
+ return promise;
+ };
+ if (thisValue) {
+ replacementFunction = replacementFunction.bind(thisValue);
+ }
+ return replacementFunction;
+ };
+
+ var objectCreator = function objectCreator() {
+ return {};
+ };
+
+ _main.default.prototype._legacyPreloadGenerator = function(
+ thisValue,
+ legacyPreloadSetup,
+ fn
+ ) {
+ // Create a function that will generate an object before the preload is
+ // launched. For example, if the object should be an array or be an instance
+ // of a specific class.
+ var baseValueGenerator = legacyPreloadSetup.createBaseObject || objectCreator;
+ var returnedFunction = function returnedFunction() {
+ var _this2 = this;
+ // Our then clause needs to run before setup, so we also increment the preload counter
+ this._incrementPreload();
+ // Generate the return value based on the generator.
+ var returnValue = baseValueGenerator.apply(this, arguments);
+ // Run the original wrapper
+ fn.apply(this, arguments).then(function(data) {
+ // Copy each key from the resolved value into returnValue
+ Object.assign(returnValue, data);
+ // Decrement the preload counter, to allow setup to continue.
+ _this2._decrementPreload();
+ });
+ return returnValue;
+ };
+ if (thisValue) {
+ returnedFunction = returnedFunction.bind(thisValue);
+ }
+ return returnedFunction;
+ };
+ },
+ { './main': 27 }
+ ],
+ 33: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ var constants = _interopRequireWildcard(_dereq_('./constants'));
+ _dereq_('./p5.Graphics');
+ _dereq_('./p5.Renderer2D');
+ _dereq_('../webgl/p5.RendererGL');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj &&
+ typeof Symbol === 'function' &&
+ obj.constructor === Symbol &&
+ obj !== Symbol.prototype
+ ? 'symbol'
+ : typeof obj;
+ };
+ }
+ return _typeof(obj);
+ }
+ var defaultId = 'defaultCanvas0'; // this gets set again in createCanvas
+ var defaultClass = 'p5Canvas';
+
+ /**
+ * Creates a canvas element in the document, and sets the dimensions of it
+ * in pixels. This method should be called only once at the start of setup.
+ * Calling createCanvas more than once in a sketch will result in very
+ * unpredictable behavior. If you want more than one drawing canvas
+ * you could use createGraphics (hidden by default but it can be shown).
+ *
+ * The system variables width and height are set by the parameters passed
+ * to this function. If createCanvas() is not used, the window will be
+ * given a default size of 100x100 pixels.
+ *
+ * For more ways to position the canvas, see the
+ *
+ * positioning the canvas wiki page.
+ *
+ * @method createCanvas
+ * @param {Number} w width of the canvas
+ * @param {Number} h height of the canvas
+ * @param {Constant} [renderer] either P2D or WEBGL
+ * @return {p5.Renderer}
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 50);
+ * background(153);
+ * line(0, 0, width, height);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Black line extending from top-left of canvas to bottom right.
+ *
+ */
+
+ _main.default.prototype.createCanvas = function(w, h, renderer) {
+ _main.default._validateParameters('createCanvas', arguments);
+ //optional: renderer, otherwise defaults to p2d
+ var r = renderer || constants.P2D;
+ var c;
+
+ if (r === constants.WEBGL) {
+ c = document.getElementById(defaultId);
+ if (c) {
+ //if defaultCanvas already exists
+ c.parentNode.removeChild(c); //replace the existing defaultCanvas
+ var thisRenderer = this._renderer;
+ this._elements = this._elements.filter(function(e) {
+ return e !== thisRenderer;
+ });
+ }
+ c = document.createElement('canvas');
+ c.id = defaultId;
+ c.classList.add(defaultClass);
+ } else {
+ if (!this._defaultGraphicsCreated) {
+ c = document.createElement('canvas');
+ var i = 0;
+ while (document.getElementById('defaultCanvas'.concat(i))) {
+ i++;
+ }
+ defaultId = 'defaultCanvas'.concat(i);
+ c.id = defaultId;
+ c.classList.add(defaultClass);
+ } else {
+ // resize the default canvas if new one is created
+ c = this.canvas;
+ }
+ }
+
+ // set to invisible if still in setup (to prevent flashing with manipulate)
+ if (!this._setupDone) {
+ c.dataset.hidden = true; // tag to show later
+ c.style.visibility = 'hidden';
+ }
+
+ if (this._userNode) {
+ // user input node case
+ this._userNode.appendChild(c);
+ } else {
+ document.body.appendChild(c);
+ }
+
+ // Init our graphics renderer
+ //webgl mode
+ if (r === constants.WEBGL) {
+ this._setProperty('_renderer', new _main.default.RendererGL(c, this, true));
+ this._elements.push(this._renderer);
+ } else {
+ //P2D mode
+ if (!this._defaultGraphicsCreated) {
+ this._setProperty('_renderer', new _main.default.Renderer2D(c, this, true));
+ this._defaultGraphicsCreated = true;
+ this._elements.push(this._renderer);
+ }
+ }
+ this._renderer.resize(w, h);
+ this._renderer._applyDefaults();
+ return this._renderer;
+ };
+
+ /**
+ * Resizes the canvas to given width and height. The canvas will be cleared
+ * and draw will be called immediately, allowing the sketch to re-render itself
+ * in the resized canvas.
+ * @method resizeCanvas
+ * @param {Number} w width of the canvas
+ * @param {Number} h height of the canvas
+ * @param {Boolean} [noRedraw] don't redraw the canvas immediately
+ * @example
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * function draw() {
+ * background(0, 100, 200);
+ * }
+ *
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ *
+ *
+ * @alt
+ * No image displayed.
+ *
+ */
+ _main.default.prototype.resizeCanvas = function(w, h, noRedraw) {
+ _main.default._validateParameters('resizeCanvas', arguments);
+ if (this._renderer) {
+ // save canvas properties
+ var props = {};
+ for (var key in this.drawingContext) {
+ var val = this.drawingContext[key];
+ if (_typeof(val) !== 'object' && typeof val !== 'function') {
+ props[key] = val;
+ }
+ }
+ this._renderer.resize(w, h);
+ this.width = w;
+ this.height = h;
+ // reset canvas properties
+ for (var savedKey in props) {
+ try {
+ this.drawingContext[savedKey] = props[savedKey];
+ } catch (err) {
+ // ignore read-only property errors
+ }
+ }
+ if (!noRedraw) {
+ this.redraw();
+ }
+ }
+ };
+
+ /**
+ * Removes the default canvas for a p5 sketch that doesn't
+ * require a canvas
+ * @method noCanvas
+ * @example
+ *
+ *
+ * function setup() {
+ * noCanvas();
+ * }
+ *
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.prototype.noCanvas = function() {
+ if (this.canvas) {
+ this.canvas.parentNode.removeChild(this.canvas);
+ }
+ };
+
+ /**
+ * Creates and returns a new p5.Renderer object. Use this class if you need
+ * to draw into an off-screen graphics buffer. The two parameters define the
+ * width and height in pixels.
+ *
+ * @method createGraphics
+ * @param {Number} w width of the offscreen graphics buffer
+ * @param {Number} h height of the offscreen graphics buffer
+ * @param {Constant} [renderer] either P2D or WEBGL
+ * undefined defaults to p2d
+ * @return {p5.Graphics} offscreen graphics buffer
+ * @example
+ *
+ *
+ * let pg;
+ * function setup() {
+ * createCanvas(100, 100);
+ * pg = createGraphics(100, 100);
+ * }
+ * function draw() {
+ * background(200);
+ * pg.background(100);
+ * pg.noStroke();
+ * pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
+ * image(pg, 50, 50);
+ * image(pg, 0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 4 grey squares alternating light and dark grey. White quarter circle mid-left.
+ *
+ */
+ _main.default.prototype.createGraphics = function(w, h, renderer) {
+ _main.default._validateParameters('createGraphics', arguments);
+ return new _main.default.Graphics(w, h, renderer, this);
+ };
+
+ /**
+ * Blends the pixels in the display window according to the defined mode.
+ * There is a choice of the following modes to blend the source pixels (A)
+ * with the ones of pixels already in the display window (B):
+ *
+ * BLEND - linear interpolation of colours: C =
+ * A\*factor + B. This is the default blending mode.ADD - sum of A and BDARKEST - only the darkest colour succeeds: C =
+ * min(A\*factor, B).LIGHTEST - only the lightest colour succeeds: C =
+ * max(A\*factor, B).DIFFERENCE - subtract colors from underlying image.EXCLUSION - similar to DIFFERENCE, but less
+ * extreme.MULTIPLY - multiply the colors, result will always be
+ * darker.SCREEN - opposite multiply, uses inverse values of the
+ * colors.REPLACE - the pixels entirely replace the others and
+ * don't utilize alpha (transparency) values.REMOVE - removes pixels from B with the alpha strength of A.OVERLAY - mix of MULTIPLY and SCREEN
+ * . Multiplies dark values, and screens light values. (2D)HARD_LIGHT - SCREEN when greater than 50%
+ * gray, MULTIPLY when lower. (2D)SOFT_LIGHT - mix of DARKEST and
+ * LIGHTEST. Works like OVERLAY, but not as harsh. (2D)
+ * DODGE - lightens light tones and increases contrast,
+ * ignores darks. (2D)BURN - darker areas are applied, increasing contrast,
+ * ignores lights. (2D)SUBTRACT - remainder of A and B (3D)
+ *
+ * (2D) indicates that this blend mode only works in the 2D renderer.
+ * (3D) indicates that this blend mode only works in the WEBGL renderer.
+ *
+ *
+ * @method blendMode
+ * @param {Constant} mode blend mode to set for canvas.
+ * either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
+ * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
+ * @example
+ *
+ *
+ * blendMode(LIGHTEST);
+ * strokeWeight(30);
+ * stroke(80, 150, 255);
+ * line(25, 25, 75, 75);
+ * stroke(255, 50, 50);
+ * line(75, 25, 25, 75);
+ *
+ *
+ *
+ *
+ * blendMode(MULTIPLY);
+ * strokeWeight(30);
+ * stroke(80, 150, 255);
+ * line(25, 25, 75, 75);
+ * stroke(255, 50, 50);
+ * line(75, 25, 25, 75);
+ *
+ *
+ * @alt
+ * translucent image thick red & blue diagonal rounded lines intersecting center
+ * Thick red & blue diagonal rounded lines intersecting center. dark at overlap
+ *
+ */
+ _main.default.prototype.blendMode = function(mode) {
+ _main.default._validateParameters('blendMode', arguments);
+ if (mode === constants.NORMAL) {
+ // Warning added 3/26/19, can be deleted in future (1.0 release?)
+ console.warn(
+ 'NORMAL has been deprecated for use in blendMode. defaulting to BLEND instead.'
+ );
+
+ mode = constants.BLEND;
+ }
+ this._renderer.blendMode(mode);
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../webgl/p5.RendererGL': 80,
+ './constants': 21,
+ './main': 27,
+ './p5.Graphics': 29,
+ './p5.Renderer2D': 31
+ }
+ ],
+ 34: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ var _helpers = _interopRequireDefault(_dereq_('../helpers'));
+ _dereq_('../error_helpers');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (
+ Symbol.iterator in Object(iter) ||
+ Object.prototype.toString.call(iter) === '[object Arguments]'
+ )
+ return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+
+ /**
+ * This function does 3 things:
+ *
+ * 1. Bounds the desired start/stop angles for an arc (in radians) so that:
+ *
+ * 0 <= start < TWO_PI ; start <= stop < start + TWO_PI
+ *
+ * This means that the arc rendering functions don't have to be concerned
+ * with what happens if stop is smaller than start, or if the arc 'goes
+ * round more than once', etc.: they can just start at start and increase
+ * until stop and the correct arc will be drawn.
+ *
+ * 2. Optionally adjusts the angles within each quadrant to counter the naive
+ * scaling of the underlying ellipse up from the unit circle. Without
+ * this, the angles become arbitrary when width != height: 45 degrees
+ * might be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on
+ * a 'tall' ellipse.
+ *
+ * 3. Flags up when start and stop correspond to the same place on the
+ * underlying ellipse. This is useful if you want to do something special
+ * there (like rendering a whole ellipse instead).
+ */
+ _main.default.prototype._normalizeArcAngles = function(
+ start,
+ stop,
+ width,
+ height,
+ correctForScaling
+ ) {
+ var epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
+ var separation;
+
+ // The order of the steps is important here: each one builds upon the
+ // adjustments made in the steps that precede it.
+
+ // Constrain both start and stop to [0,TWO_PI).
+ start = start - constants.TWO_PI * Math.floor(start / constants.TWO_PI);
+ stop = stop - constants.TWO_PI * Math.floor(stop / constants.TWO_PI);
+
+ // Get the angular separation between the requested start and stop points.
+ //
+ // Technically this separation only matches what gets drawn if
+ // correctForScaling is enabled. We could add a more complicated calculation
+ // for when the scaling is uncorrected (in which case the drawn points could
+ // end up pushed together or pulled apart quite dramatically relative to what
+ // was requested), but it would make things more opaque for little practical
+ // benefit.
+ //
+ // (If you do disable correctForScaling and find that correspondToSamePoint
+ // is set too aggressively, the easiest thing to do is probably to just make
+ // epsilon smaller...)
+ separation = Math.min(
+ Math.abs(start - stop),
+ constants.TWO_PI - Math.abs(start - stop)
+ );
+
+ // Optionally adjust the angles to counter linear scaling.
+ if (correctForScaling) {
+ if (start <= constants.HALF_PI) {
+ start = Math.atan(width / height * Math.tan(start));
+ } else if (start > constants.HALF_PI && start <= 3 * constants.HALF_PI) {
+ start = Math.atan(width / height * Math.tan(start)) + constants.PI;
+ } else {
+ start = Math.atan(width / height * Math.tan(start)) + constants.TWO_PI;
+ }
+ if (stop <= constants.HALF_PI) {
+ stop = Math.atan(width / height * Math.tan(stop));
+ } else if (stop > constants.HALF_PI && stop <= 3 * constants.HALF_PI) {
+ stop = Math.atan(width / height * Math.tan(stop)) + constants.PI;
+ } else {
+ stop = Math.atan(width / height * Math.tan(stop)) + constants.TWO_PI;
+ }
+ }
+
+ // Ensure that start <= stop < start + TWO_PI.
+ if (start > stop) {
+ stop += constants.TWO_PI;
+ }
+
+ return {
+ start: start,
+ stop: stop,
+ correspondToSamePoint: separation < epsilon
+ };
+ };
+
+ /**
+ * Draw an arc to the screen. If called with only x, y, w, h, start, and
+ * stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc
+ * will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The
+ * origin may be changed with the ellipseMode() function.
+ * The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse.
+ * Adding or subtracting TWO_PI to either angle does not change where they fall.
+ * If both start and stop fall at the same place, a full ellipse will be drawn. Be aware that the the
+ * y-axis increases in the downward direction, therefore angles are measured clockwise from the positive
+ * x-direction ("3 o'clock").
+
+
+ * @method arc
+ * @param {Number} x x-coordinate of the arc's ellipse
+ * @param {Number} y y-coordinate of the arc's ellipse
+ * @param {Number} w width of the arc's ellipse by default
+ * @param {Number} h height of the arc's ellipse by default
+ * @param {Number} start angle to start the arc, specified in radians
+ * @param {Number} stop angle to stop the arc, specified in radians
+ * @param {Constant} [mode] optional parameter to determine the way of drawing
+ * the arc. either CHORD, PIE or OPEN
+ * @param {Number} [detail] optional parameter for WebGL mode only. This is to
+ * specify the number of vertices that makes up the
+ * perimeter of the arc. Default value is 25.
+ *
+ * @chainable
+ * @example
+ *
+ *
+ * arc(50, 55, 50, 50, 0, HALF_PI);
+ * noFill();
+ * arc(50, 55, 60, 60, HALF_PI, PI);
+ * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+ * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+ *
+ *
+ *
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+ *
+ *
+ *
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+ *
+ *
+ *
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+ *
+ *
+ *
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+ *
+ *
+ *
+ * @alt
+ *shattered outline of an ellipse with a quarter of a white circle bottom-right.
+ *white ellipse with top right quarter missing.
+ *white ellipse with black outline with top right missing.
+ *white ellipse with top right missing with black outline around shape.
+ *white ellipse with top right quarter missing with black outline around the shape.
+ *
+ */
+ _main.default.prototype.arc = function(x, y, w, h, start, stop, mode, detail) {
+ _main.default._validateParameters('arc', arguments);
+
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }
+
+ start = this._toRadians(start);
+ stop = this._toRadians(stop);
+
+ // p5 supports negative width and heights for ellipses
+ w = Math.abs(w);
+ h = Math.abs(h);
+
+ var vals = _helpers.default.modeAdjust(x, y, w, h, this._renderer._ellipseMode);
+ var angles = this._normalizeArcAngles(start, stop, vals.w, vals.h, true);
+
+ if (angles.correspondToSamePoint) {
+ // If the arc starts and ends at (near enough) the same place, we choose to
+ // draw an ellipse instead. This is preferable to faking an ellipse (by
+ // making stop ever-so-slightly less than start + TWO_PI) because the ends
+ // join up to each other rather than at a vertex at the centre (leaving
+ // an unwanted spike in the stroke/fill).
+ this._renderer.ellipse([vals.x, vals.y, vals.w, vals.h, detail]);
+ } else {
+ this._renderer.arc(
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h,
+ angles.start, // [0, TWO_PI)
+ angles.stop, // [start, start + TWO_PI)
+ mode,
+ detail
+ );
+ }
+
+ return this;
+ };
+
+ /**
+ * Draws an ellipse (oval) to the screen. An ellipse with equal width and
+ * height is a circle. By default, the first two parameters set the location,
+ * and the third and fourth parameters set the shape's width and height. If
+ * no height is specified, the value of width is used for both the width and
+ * height. If a negative height or width is specified, the absolute value is taken.
+ * The origin may be changed with the ellipseMode() function.
+ *
+ * @method ellipse
+ * @param {Number} x x-coordinate of the ellipse.
+ * @param {Number} y y-coordinate of the ellipse.
+ * @param {Number} w width of the ellipse.
+ * @param {Number} [h] height of the ellipse.
+ * @chainable
+ * @example
+ *
+ *
+ * ellipse(56, 46, 55, 55);
+ *
+ *
+ *
+ * @alt
+ *white ellipse with black outline in middle-right of canvas that is 55x55.
+ *
+ */
+ /**
+ * @method ellipse
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Integer} detail number of radial sectors to draw (for WebGL mode)
+ */
+ _main.default.prototype.ellipse = function(x, y, w, h, detailX) {
+ _main.default._validateParameters('ellipse', arguments);
+
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }
+
+ // p5 supports negative width and heights for rects
+ if (w < 0) {
+ w = Math.abs(w);
+ }
+
+ if (typeof h === 'undefined') {
+ // Duplicate 3rd argument if only 3 given.
+ h = w;
+ } else if (h < 0) {
+ h = Math.abs(h);
+ }
+
+ var vals = _helpers.default.modeAdjust(x, y, w, h, this._renderer._ellipseMode);
+ this._renderer.ellipse([vals.x, vals.y, vals.w, vals.h, detailX]);
+
+ return this;
+ };
+
+ /**
+ * 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.
+ *
+ * @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} d diameter of the circle.
+ * @chainable
+ * @example
+ *
+ *
+ * // Draw a circle at location (30, 30) with a diameter of 20.
+ * circle(30, 30, 20);
+ *
+ *
+ *
+ * @alt
+ * white circle with black outline in mid of canvas that is 55x55.
+ */
+ _main.default.prototype.circle = function() {
+ var args = Array.prototype.slice.call(arguments, 0, 2);
+ args.push(arguments[2]);
+ args.push(arguments[2]);
+ return this.ellipse.apply(this, _toConsumableArray(args));
+ };
+
+ /**
+ * Draws a line (a direct path between two points) to the screen. The version
+ * of line() with four parameters draws the line in 2D. To color a line, use
+ * the stroke() function. A line cannot be filled, therefore the fill()
+ * function will not affect the color of a line. 2D lines are drawn with a
+ * width of one pixel by default, but this can be changed with the
+ * strokeWeight() function.
+ *
+ * @method line
+ * @param {Number} x1 the x-coordinate of the first point
+ * @param {Number} y1 the y-coordinate of the first point
+ * @param {Number} x2 the x-coordinate of the second point
+ * @param {Number} y2 the y-coordinate of the second point
+ * @chainable
+ * @example
+ *
+ *
+ * line(30, 20, 85, 75);
+ *
+ *
+ *
+ *
+ *
+ * line(30, 20, 85, 20);
+ * stroke(126);
+ * line(85, 20, 85, 75);
+ * stroke(255);
+ * line(85, 75, 30, 75);
+ *
+ *
+ *
+ * @alt
+ *line 78 pixels long running from mid-top to bottom-right of canvas.
+ *3 lines of various stroke sizes. Form top, bottom and right sides of a square.
+ *
+ */
+ /**
+ * @method line
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 the z-coordinate of the first point
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 the z-coordinate of the second point
+ * @chainable
+ */
+ _main.default.prototype.line = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('line', args);
+
+ if (this._renderer._doStroke) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).line.apply(_this$_renderer, args);
+ }
+
+ return this;
+ };
+
+ /**
+ * Draws a point, a coordinate in space at the dimension of one pixel.
+ * The first parameter is the horizontal value for the point, the second
+ * value is the vertical value for the point. The color of the point is
+ * changed with the stroke() function. The size of the point
+ * is changed with the strokeWeight() function.
+ *
+ * @method point
+ * @param {Number} x the x-coordinate
+ * @param {Number} y the y-coordinate
+ * @param {Number} [z] the z-coordinate (for WebGL mode)
+ * @chainable
+ * @example
+ *
+ *
+ * point(30, 20);
+ * point(85, 20);
+ * point(85, 75);
+ * point(30, 75);
+ *
+ *
+ *
+ *
+ *
+ * stroke('purple'); // Change the color
+ * strokeWeight(10); // Make the points 10 pixels in size
+ * point(30, 20);
+ * point(85, 20);
+ * point(85, 75);
+ * point(30, 75);
+ *
+ *
+ *
+ *
+ *
+ * let a = createVector(10, 10);
+ * point(a);
+ * let b = createVector(10, 20);
+ * point(b);
+ * point(createVector(20, 10));
+ * point(createVector(20, 20));
+ *
+ *
+ *
+ * @alt
+ * 4 points centered in the middle-right of the canvas.
+ * 4 large purple points centered in the middle-right of the canvas.
+ * Vertices of a square of length 10 pixels towards the top-left of the canvas.
+ *
+ */
+ /**
+ * @method point
+ * @param {p5.Vector} coordinate_vector the coordinate vector
+ * @chainable
+ *
+ */
+ _main.default.prototype.point = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('point', args);
+
+ if (this._renderer._doStroke) {
+ if (args.length === 1 && args[0] instanceof _main.default.Vector) {
+ this._renderer.point.call(this._renderer, args[0].x, args[0].y, args[0].z);
+ } else {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).point.apply(_this$_renderer2, args);
+ }
+ }
+
+ return this;
+ };
+
+ /**
+ * Draw a quad. 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
+ * clockwise or counter-clockwise around the defined shape.
+ * z-arguments only work when quad() is used in WEBGL mode.
+ *
+ *
+ * @method quad
+ * @param {Number} x1 the x-coordinate of the first point
+ * @param {Number} y1 the y-coordinate of the first point
+ * @param {Number} x2 the x-coordinate of the second point
+ * @param {Number} y2 the y-coordinate of the second point
+ * @param {Number} x3 the x-coordinate of the third point
+ * @param {Number} y3 the y-coordinate of the third point
+ * @param {Number} x4 the x-coordinate of the fourth point
+ * @param {Number} y4 the y-coordinate of the fourth point
+ * @chainable
+ * @example
+ *
+ *
+ * quad(38, 31, 86, 20, 69, 63, 30, 76);
+ *
+ *
+ *
+ * @alt
+ *irregular white quadrilateral shape with black outline mid-right of canvas.
+ *
+ */
+ /**
+ * @method quad
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 the z-coordinate of the first point
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 the z-coordinate of the second point
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 the z-coordinate of the third point
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 the z-coordinate of the fourth point
+ * @chainable
+ */
+ _main.default.prototype.quad = function() {
+ for (
+ var _len3 = arguments.length, args = new Array(_len3), _key3 = 0;
+ _key3 < _len3;
+ _key3++
+ ) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('quad', args);
+
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ if (this._renderer.isP3D && args.length !== 12) {
+ // if 3D and we weren't passed 12 args, assume Z is 0
+ // prettier-ignore
+ this._renderer.quad.call(
+ this._renderer,
+ args[0], args[1], 0,
+ args[2], args[3], 0,
+ args[4], args[5], 0,
+ args[6], args[7], 0);
+ } else {
+ var _this$_renderer3;
+ (_this$_renderer3 = this._renderer).quad.apply(_this$_renderer3, args);
+ }
+ }
+
+ return this;
+ };
+
+ /**
+ * Draws a rectangle to the screen. A rectangle is a four-sided 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, however,
+ * may be changed with the rectMode() function.
+ *
+ * The fifth, sixth, seventh and eighth parameters, if specified,
+ * determine corner radius for the top-left, top-right, lower-right and
+ * lower-left corners, respectively. An omitted corner radius parameter is set
+ * to the value of the previously specified radius value in the parameter list.
+ *
+ * @method rect
+ * @param {Number} x x-coordinate of the rectangle.
+ * @param {Number} y y-coordinate of the rectangle.
+ * @param {Number} w width of the rectangle.
+ * @param {Number} h height of the rectangle.
+ * @param {Number} [tl] optional radius of top-left corner.
+ * @param {Number} [tr] optional radius of top-right corner.
+ * @param {Number} [br] optional radius of bottom-right corner.
+ * @param {Number} [bl] optional radius of bottom-left corner.
+ * @chainable
+ * @example
+ *
+ *
+ * // Draw a rectangle at location (30, 20) with a width and height of 55.
+ * rect(30, 20, 55, 55);
+ *
+ *
+ *
+ *
+ *
+ * // Draw a rectangle with rounded corners, each having a radius of 20.
+ * rect(30, 20, 55, 55, 20);
+ *
+ *
+ *
+ *
+ *
+ * // Draw a rectangle with rounded corners having the following radii:
+ * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
+ * rect(30, 20, 55, 55, 20, 15, 10, 5);
+ *
+ *
+ *
+ * @alt
+ * 55x55 white rect with black outline in mid-right of canvas.
+ * 55x55 white rect with black outline and rounded edges in mid-right of canvas.
+ * 55x55 white rect with black outline and rounded edges of different radii.
+ */
+ /**
+ * @method rect
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Integer} [detailX] number of segments in the x-direction (for WebGL mode)
+ * @param {Integer} [detailY] number of segments in the y-direction (for WebGL mode)
+ * @chainable
+ */
+ _main.default.prototype.rect = function() {
+ _main.default._validateParameters('rect', arguments);
+
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ var vals = _helpers.default.modeAdjust(
+ arguments[0],
+ arguments[1],
+ arguments[2],
+ arguments[3],
+ this._renderer._rectMode
+ );
+
+ var args = [vals.x, vals.y, vals.w, vals.h];
+ // append the additional arguments (either cornder radii, or
+ // segment details) to the argument list
+ for (var i = 4; i < arguments.length; i++) {
+ args[i] = arguments[i];
+ }
+ this._renderer.rect(args);
+ }
+
+ return this;
+ };
+
+ /**
+ * Draws a square to the screen. A square is a four-sided shape with
+ * every angle at ninety degrees, and equal side size.
+ * This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size.
+ * By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square.
+ * The way these parameters are interpreted, however,
+ * may be changed with the rectMode() function.
+ *
+ * The fourth, fifth, sixth and seventh parameters, if specified,
+ * determine corner radius for the top-left, top-right, lower-right and
+ * lower-left corners, respectively. An omitted corner radius parameter is set
+ * to the value of the previously specified radius value in the parameter list.
+ *
+ * @method square
+ * @param {Number} x x-coordinate of the square.
+ * @param {Number} y y-coordinate of the square.
+ * @param {Number} s side size of the square.
+ * @param {Number} [tl] optional radius of top-left corner.
+ * @param {Number} [tr] optional radius of top-right corner.
+ * @param {Number} [br] optional radius of bottom-right corner.
+ * @param {Number} [bl] optional radius of bottom-left corner.
+ * @chainable
+ * @example
+ *
+ *
+ * // Draw a square at location (30, 20) with a side size of 55.
+ * square(30, 20, 55);
+ *
+ *
+ *
+ *
+ *
+ * // Draw a square with rounded corners, each having a radius of 20.
+ * square(30, 20, 55, 20);
+ *
+ *
+ *
+ *
+ *
+ * // Draw a square with rounded corners having the following radii:
+ * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
+ * square(30, 20, 55, 20, 15, 10, 5);
+ *
+ *
+ *
+ * @alt
+ * 55x55 white square with black outline in mid-right of canvas.
+ * 55x55 white square with black outline and rounded edges in mid-right of canvas.
+ * 55x55 white square with black outline and rounded edges of different radii.
+ */
+ _main.default.prototype.square = function(x, y, s, tl, tr, br, bl) {
+ return this.rect(x, y, s, s, tl, tr, br, bl);
+ };
+
+ /**
+ * A triangle is a plane created by connecting three points. The first two
+ * arguments specify the first point, the middle two arguments specify the
+ * second point, and the last two arguments specify the third point.
+ *
+ * @method triangle
+ * @param {Number} x1 x-coordinate of the first point
+ * @param {Number} y1 y-coordinate of the first point
+ * @param {Number} x2 x-coordinate of the second point
+ * @param {Number} y2 y-coordinate of the second point
+ * @param {Number} x3 x-coordinate of the third point
+ * @param {Number} y3 y-coordinate of the third point
+ * @chainable
+ * @example
+ *
+ *
+ * triangle(30, 75, 58, 20, 86, 75);
+ *
+ *
+ *
+ *@alt
+ * white triangle with black outline in mid-right of canvas.
+ *
+ */
+ _main.default.prototype.triangle = function() {
+ for (
+ var _len4 = arguments.length, args = new Array(_len4), _key4 = 0;
+ _key4 < _len4;
+ _key4++
+ ) {
+ args[_key4] = arguments[_key4];
+ }
+ _main.default._validateParameters('triangle', args);
+
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ this._renderer.triangle(args);
+ }
+
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../constants': 21, '../error_helpers': 23, '../helpers': 24, '../main': 27 }
+ ],
+ 35: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Shape
+ * @submodule Attributes
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ /**
+ * Modifies the location from which ellipses are drawn by changing the way
+ * in which parameters given to ellipse(),
+ * circle() and arc() are interpreted.
+ *
+ * The default mode is ellipseMode(CENTER), which interprets the first two
+ * parameters of ellipse() as the shape's center point, while the third and
+ * fourth parameters are its width and height.
+ *
+ * ellipseMode(RADIUS) also uses the first two parameters of ellipse() as
+ * the shape's center point, but uses the third and fourth parameters to
+ * specify half of the shapes's width and height.
+ *
+ * ellipseMode(CORNER) interprets the first two parameters of ellipse() as
+ * the upper-left corner of the shape, while the third and fourth parameters
+ * are its width and height.
+ *
+ * ellipseMode(CORNERS) interprets the first two parameters of ellipse() as
+ * the location of one corner of the ellipse's bounding box, and the third
+ * and fourth parameters as the location of the opposite corner.
+ *
+ * The parameter must be written in ALL CAPS because Javascript is a
+ * case-sensitive language.
+ *
+ * @method ellipseMode
+ * @param {Constant} mode either CENTER, RADIUS, CORNER, or CORNERS
+ * @chainable
+ * @example
+ *
+ *
+ * ellipseMode(RADIUS); // Set ellipseMode to RADIUS
+ * fill(255); // Set fill to white
+ * ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode
+ *
+ * ellipseMode(CENTER); // Set ellipseMode to CENTER
+ * fill(100); // Set fill to gray
+ * ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode
+ *
+ *
+ *
+ *
+ *
+ * ellipseMode(CORNER); // Set ellipseMode is CORNER
+ * fill(255); // Set fill to white
+ * ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode
+ *
+ * ellipseMode(CORNERS); // Set ellipseMode to CORNERS
+ * fill(100); // Set fill to gray
+ * ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
+ *
+ *
+ *
+ * @alt
+ * 60x60 white ellipse and 30x30 grey ellipse with black outlines at center.
+ * 60x60 white ellipse @center and 30x30 grey ellipse top-right, black outlines.
+ *
+ */ _main.default.prototype.ellipseMode = function(m) {
+ _main.default._validateParameters('ellipseMode', arguments);
+ if (
+ m === constants.CORNER ||
+ m === constants.CORNERS ||
+ m === constants.RADIUS ||
+ m === constants.CENTER
+ ) {
+ this._renderer._ellipseMode = m;
+ }
+ return this;
+ };
+
+ /**
+ * Draws all geometry with jagged (aliased) edges. Note that smooth() is
+ * active by default in 2D mode, so it is necessary to call noSmooth() to disable
+ * smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled
+ * by default, so it is necessary to call smooth() if you would like
+ * smooth (antialiased) edges on your geometry.
+ *
+ * @method noSmooth
+ * @chainable
+ * @example
+ *
+ *
+ * background(0);
+ * noStroke();
+ * smooth();
+ * ellipse(30, 48, 36, 36);
+ * noSmooth();
+ * ellipse(70, 48, 36, 36);
+ *
+ *
+ *
+ * @alt
+ * 2 pixelated 36x36 white ellipses to left & right of center, black background
+ *
+ */
+ _main.default.prototype.noSmooth = function() {
+ this.setAttributes('antialias', false);
+ if (!this._renderer.isP3D) {
+ if ('imageSmoothingEnabled' in this.drawingContext) {
+ this.drawingContext.imageSmoothingEnabled = false;
+ }
+ }
+ return this;
+ };
+
+ /**
+ * Modifies the location from which rectangles are drawn by changing the way
+ * in which parameters given to rect() are interpreted.
+ *
+ * The default mode is rectMode(CORNER), which interprets the first two
+ * parameters of rect() as the upper-left corner of the shape, while the
+ * third and fourth parameters are its width and height.
+ *
+ * rectMode(CORNERS) interprets the first two parameters of rect() as the
+ * location of one corner, and the third and fourth parameters as the
+ * location of the opposite corner.
+ *
+ * rectMode(CENTER) interprets the first two parameters of rect() as the
+ * shape's center point, while the third and fourth parameters are its
+ * width and height.
+ *
+ * rectMode(RADIUS) also uses the first two parameters of rect() as the
+ * shape's center point, but uses the third and fourth parameters to specify
+ * half of the shapes's width and height.
+ *
+ * The parameter must be written in ALL CAPS because Javascript is a
+ * case-sensitive language.
+ *
+ * @method rectMode
+ * @param {Constant} mode either CORNER, CORNERS, CENTER, or RADIUS
+ * @chainable
+ * @example
+ *
+ *
+ * rectMode(CORNER); // Default rectMode is CORNER
+ * fill(255); // Set fill to white
+ * rect(25, 25, 50, 50); // Draw white rect using CORNER mode
+ *
+ * rectMode(CORNERS); // Set rectMode to CORNERS
+ * fill(100); // Set fill to gray
+ * rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode
+ *
+ *
+ *
+ *
+ *
+ * rectMode(RADIUS); // Set rectMode to RADIUS
+ * fill(255); // Set fill to white
+ * rect(50, 50, 30, 30); // Draw white rect using RADIUS mode
+ *
+ * rectMode(CENTER); // Set rectMode to CENTER
+ * fill(100); // Set fill to gray
+ * rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
+ *
+ *
+ *
+ * @alt
+ * 50x50 white rect at center and 25x25 grey rect in the top left of the other.
+ * 50x50 white rect at center and 25x25 grey rect in the center of the other.
+ *
+ */
+ _main.default.prototype.rectMode = function(m) {
+ _main.default._validateParameters('rectMode', arguments);
+ if (
+ m === constants.CORNER ||
+ m === constants.CORNERS ||
+ m === constants.RADIUS ||
+ m === constants.CENTER
+ ) {
+ this._renderer._rectMode = m;
+ }
+ return this;
+ };
+
+ /**
+ * Draws all geometry with smooth (anti-aliased) edges. smooth() will also
+ * improve image quality of resized images. Note that smooth() is active by
+ * default in 2D mode; noSmooth() can be used to disable smoothing of geometry,
+ * images, and fonts. In 3D mode, noSmooth() is enabled
+ * by default, so it is necessary to call smooth() if you would like
+ * smooth (antialiased) edges on your geometry.
+ *
+ * @method smooth
+ * @chainable
+ * @example
+ *
+ *
+ * background(0);
+ * noStroke();
+ * smooth();
+ * ellipse(30, 48, 36, 36);
+ * noSmooth();
+ * ellipse(70, 48, 36, 36);
+ *
+ *
+ *
+ * @alt
+ * 2 pixelated 36x36 white ellipses one left one right of center. On black.
+ *
+ */
+ _main.default.prototype.smooth = function() {
+ this.setAttributes('antialias', true);
+ if (!this._renderer.isP3D) {
+ if ('imageSmoothingEnabled' in this.drawingContext) {
+ this.drawingContext.imageSmoothingEnabled = true;
+ }
+ }
+ return this;
+ };
+
+ /**
+ * Sets the style for rendering line endings. These ends are either squared,
+ * extended, or rounded, each of which specified with the corresponding
+ * parameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.
+ *
+ * @method strokeCap
+ * @param {Constant} cap either SQUARE, PROJECT, or ROUND
+ * @chainable
+ * @example
+ *
+ *
+ * strokeWeight(12.0);
+ * strokeCap(ROUND);
+ * line(20, 30, 80, 30);
+ * strokeCap(SQUARE);
+ * line(20, 50, 80, 50);
+ * strokeCap(PROJECT);
+ * line(20, 70, 80, 70);
+ *
+ *
+ *
+ * @alt
+ * 3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.
+ *
+ */
+ _main.default.prototype.strokeCap = function(cap) {
+ _main.default._validateParameters('strokeCap', arguments);
+ if (
+ cap === constants.ROUND ||
+ cap === constants.SQUARE ||
+ cap === constants.PROJECT
+ ) {
+ this._renderer.strokeCap(cap);
+ }
+ return this;
+ };
+
+ /**
+ * Sets the style of the joints which connect line segments. These joints
+ * are either mitered, beveled, or rounded and specified with the
+ * corresponding parameters MITER, BEVEL, and ROUND. The default joint is
+ * MITER.
+ *
+ * @method strokeJoin
+ * @param {Constant} join either MITER, BEVEL, ROUND
+ * @chainable
+ * @example
+ *
+ *
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(MITER);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(BEVEL);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(ROUND);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ *
+ * @alt
+ * Right-facing arrowhead shape with pointed tip in center of canvas.
+ * Right-facing arrowhead shape with flat tip in center of canvas.
+ * Right-facing arrowhead shape with rounded tip in center of canvas.
+ *
+ */
+ _main.default.prototype.strokeJoin = function(join) {
+ _main.default._validateParameters('strokeJoin', arguments);
+ if (
+ join === constants.ROUND ||
+ join === constants.BEVEL ||
+ join === constants.MITER
+ ) {
+ this._renderer.strokeJoin(join);
+ }
+ return this;
+ };
+
+ /**
+ * Sets the width of the stroke used for lines, points, and the border
+ * around shapes. All widths are set in units of pixels.
+ *
+ * @method strokeWeight
+ * @param {Number} weight the weight (in pixels) of the stroke
+ * @chainable
+ * @example
+ *
+ *
+ * strokeWeight(1); // Default
+ * line(20, 20, 80, 20);
+ * strokeWeight(4); // Thicker
+ * line(20, 40, 80, 40);
+ * strokeWeight(10); // Beastly
+ * line(20, 70, 80, 70);
+ *
+ *
+ *
+ * @alt
+ * 3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.
+ *
+ */
+ _main.default.prototype.strokeWeight = function(w) {
+ _main.default._validateParameters('strokeWeight', arguments);
+ this._renderer.strokeWeight(w);
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../constants': 21, '../main': 27 }
+ ],
+ 36: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ _dereq_('../error_helpers');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Shape
+ * @submodule Curves
+ * @for p5
+ * @requires core
+ */ /**
+ * Draws a cubic Bezier curve on the screen. These curves are defined by a
+ * series of anchor and control points. The first two parameters specify
+ * the first anchor point and the last two parameters specify the other
+ * anchor point, which become the first and last points on the curve. The
+ * middle parameters specify the two control points which define the shape
+ * of the curve. Approximately speaking, control points "pull" the curve
+ * towards them.
Bezier curves were developed by French
+ * automotive engineer Pierre Bezier, and are commonly used in computer
+ * graphics to define gently sloping curves. See also curve().
+ *
+ * @method bezier
+ * @param {Number} x1 x-coordinate for the first anchor point
+ * @param {Number} y1 y-coordinate for the first anchor point
+ * @param {Number} x2 x-coordinate for the first control point
+ * @param {Number} y2 y-coordinate for the first control point
+ * @param {Number} x3 x-coordinate for the second control point
+ * @param {Number} y3 y-coordinate for the second control point
+ * @param {Number} x4 x-coordinate for the second anchor point
+ * @param {Number} y4 y-coordinate for the second anchor point
+ * @chainable
+ * @example
+ *
+ *
+ * noFill();
+ * stroke(255, 102, 0);
+ * line(85, 20, 10, 10);
+ * line(90, 90, 15, 80);
+ * stroke(0, 0, 0);
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ *
+ *
+ *
+ *
+ *
+ * background(0, 0, 0);
+ * noFill();
+ * stroke(255);
+ * bezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);
+ *
+ *
+ *
+ * @alt
+ * stretched black s-shape in center with orange lines extending from end points.
+ * stretched black s-shape with 10 5x5 white ellipses along the shape.
+ * stretched black s-shape with 7 5x5 ellipses and orange lines along the shape.
+ * stretched black s-shape with 17 small orange lines extending from under shape.
+ * horseshoe shape with orange ends facing left and black curved center.
+ * horseshoe shape with orange ends facing left and black curved center.
+ * Line shaped like right-facing arrow,points move with mouse-x and warp shape.
+ * horizontal line that hooks downward on the right and 13 5x5 ellipses along it.
+ * right curving line mid-right of canvas with 7 short lines radiating from it.
+ */ /**
+ * @method bezier
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate for the first anchor point
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate for the first control point
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate for the second control point
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate for the second anchor point
+ * @chainable
+ */ _main.default.prototype.bezier = function() {
+ var _this$_renderer;
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('bezier', args);
+
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }
+
+ (_this$_renderer = this._renderer).bezier.apply(_this$_renderer, args);
+
+ return this;
+ };
+
+ /**
+ * Sets the resolution at which Beziers display.
+ *
+ * The default value is 20.
+ *
+ * This function is only useful when using the WEBGL renderer
+ * as the default canvas renderer does not use this information.
+ *
+ * @method bezierDetail
+ * @param {Number} detail resolution of the curves
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noFill();
+ *
+ * bezierDetail(5);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // prettier-ignore
+ * bezier(-40, -40, 0,
+ * 90, -40, 0,
+ * -90, 40, 0,
+ * 40, 40, 0);
+ * }
+ *
+ *
+ *
+ * @alt
+ * stretched black s-shape with a low level of bezier detail
+ *
+ */
+ _main.default.prototype.bezierDetail = function(d) {
+ _main.default._validateParameters('bezierDetail', arguments);
+ this._bezierDetail = d;
+ return this;
+ };
+
+ /**
+ * Evaluates the Bezier at position t for points a, b, c, d.
+ * The parameters a and d are the first and last points
+ * on the curve, and b and c are the control points.
+ * The final parameter t varies between 0 and 1.
+ * This can be done once with the x coordinates and a second time
+ * with the y coordinates to get the location of a bezier curve at t.
+ *
+ * @method bezierPoint
+ * @param {Number} a coordinate of first point on the curve
+ * @param {Number} b coordinate of first control point
+ * @param {Number} c coordinate of second control point
+ * @param {Number} d coordinate of second point on the curve
+ * @param {Number} t value between 0 and 1
+ * @return {Number} the value of the Bezier at position t
+ * @example
+ *
+ *
+ * noFill();
+ * let x1 = 85,
+ x2 = 10,
+ x3 = 90,
+ x4 = 15;
+ * let y1 = 20,
+ y2 = 10,
+ y3 = 90,
+ y4 = 80;
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+ * fill(255);
+ * let steps = 10;
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * let x = bezierPoint(x1, x2, x3, x4, t);
+ * let y = bezierPoint(y1, y2, y3, y4, t);
+ * ellipse(x, y, 5, 5);
+ * }
+ *
+ *
+ *
+ * @alt
+ * stretched black s-shape with 17 small orange lines extending from under shape.
+ *
+ */
+ _main.default.prototype.bezierPoint = function(a, b, c, d, t) {
+ _main.default._validateParameters('bezierPoint', arguments);
+
+ var adjustedT = 1 - t;
+ return (
+ Math.pow(adjustedT, 3) * a +
+ 3 * Math.pow(adjustedT, 2) * t * b +
+ 3 * adjustedT * Math.pow(t, 2) * c +
+ Math.pow(t, 3) * d
+ );
+ };
+
+ /**
+ * Evaluates the tangent to the Bezier at position t for points a, b, c, d.
+ * The parameters a and d are the first and last points
+ * on the curve, and b and c are the control points.
+ * The final parameter t varies between 0 and 1.
+ *
+ * @method bezierTangent
+ * @param {Number} a coordinate of first point on the curve
+ * @param {Number} b coordinate of first control point
+ * @param {Number} c coordinate of second control point
+ * @param {Number} d coordinate of second point on the curve
+ * @param {Number} t value between 0 and 1
+ * @return {Number} the tangent at position t
+ * @example
+ *
+ *
+ * noFill();
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ * let steps = 6;
+ * fill(255);
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * // Get the location of the point
+ * let x = bezierPoint(85, 10, 90, 15, t);
+ * let y = bezierPoint(20, 10, 90, 80, t);
+ * // Get the tangent points
+ * let tx = bezierTangent(85, 10, 90, 15, t);
+ * let ty = bezierTangent(20, 10, 90, 80, t);
+ * // Calculate an angle from the tangent points
+ * let a = atan2(ty, tx);
+ * a += PI;
+ * stroke(255, 102, 0);
+ * line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);
+ * // The following line of code makes a line
+ * // inverse of the above line
+ * //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);
+ * stroke(0);
+ * ellipse(x, y, 5, 5);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ * stroke(255, 102, 0);
+ * let steps = 16;
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * let x = bezierPoint(85, 10, 90, 15, t);
+ * let y = bezierPoint(20, 10, 90, 80, t);
+ * let tx = bezierTangent(85, 10, 90, 15, t);
+ * let ty = bezierTangent(20, 10, 90, 80, t);
+ * let a = atan2(ty, tx);
+ * a -= HALF_PI;
+ * line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
+ * }
+ *
+ *
+ *
+ * @alt
+ * s-shaped line with 17 short orange lines extending from underside of shape
+ *
+ */
+ _main.default.prototype.bezierTangent = function(a, b, c, d, t) {
+ _main.default._validateParameters('bezierTangent', arguments);
+
+ var adjustedT = 1 - t;
+ return (
+ 3 * d * Math.pow(t, 2) -
+ 3 * c * Math.pow(t, 2) +
+ 6 * c * adjustedT * t -
+ 6 * b * adjustedT * t +
+ 3 * b * Math.pow(adjustedT, 2) -
+ 3 * a * Math.pow(adjustedT, 2)
+ );
+ };
+
+ /**
+ * Draws a curved line on the screen between two points, given as the
+ * middle four parameters. The first two parameters are a control point, as
+ * if the curve came from this point even though it's not drawn. The last
+ * two parameters similarly describe the other control point.
+ * Longer curves can be created by putting a series of curve() functions
+ * together or using curveVertex(). An additional function called
+ * curveTightness() provides control for the visual quality of the curve.
+ * The curve() function is an implementation of Catmull-Rom splines.
+ *
+ * @method curve
+ * @param {Number} x1 x-coordinate for the beginning control point
+ * @param {Number} y1 y-coordinate for the beginning control point
+ * @param {Number} x2 x-coordinate for the first point
+ * @param {Number} y2 y-coordinate for the first point
+ * @param {Number} x3 x-coordinate for the second point
+ * @param {Number} y3 y-coordinate for the second point
+ * @param {Number} x4 x-coordinate for the ending control point
+ * @param {Number} y4 y-coordinate for the ending control point
+ * @chainable
+ * @example
+ *
+ *
+ * noFill();
+ * stroke(255, 102, 0);
+ * curve(5, 26, 5, 26, 73, 24, 73, 61);
+ * stroke(0);
+ * curve(5, 26, 73, 24, 73, 61, 15, 65);
+ * stroke(255, 102, 0);
+ * curve(73, 24, 73, 61, 15, 65, 15, 65);
+ *
+ *
+ *
+ *
+ * // Define the curve points as JavaScript objects
+ * let p1 = { x: 5, y: 26 },
+ p2 = { x: 73, y: 24 };
+ * let p3 = { x: 73, y: 61 },
+ p4 = { x: 15, y: 65 };
+ * noFill();
+ * stroke(255, 102, 0);
+ * curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+ * stroke(0);
+ * curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
+ * stroke(255, 102, 0);
+ * curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);
+ *
+ *
+ *
+ *
+ * noFill();
+ * stroke(255, 102, 0);
+ * curve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);
+ * stroke(0);
+ * curve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);
+ * stroke(255, 102, 0);
+ * curve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);
+ *
+ *
+ *
+ * @alt
+ * horseshoe shape with orange ends facing left and black curved center.
+ * horseshoe shape with orange ends facing left and black curved center.
+ * curving black and orange lines.
+ */
+ /**
+ * @method curve
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate for the beginning control point
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate for the first point
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate for the second point
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate for the ending control point
+ * @chainable
+ */
+ _main.default.prototype.curve = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('curve', args);
+
+ if (this._renderer._doStroke) {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).curve.apply(_this$_renderer2, args);
+ }
+
+ return this;
+ };
+
+ /**
+ * Sets the resolution at which curves display.
+ *
+ * The default value is 20 while the minimum value is 3.
+ *
+ * This function is only useful when using the WEBGL renderer
+ * as the default canvas renderer does not use this
+ * information.
+ *
+ * @method curveDetail
+ * @param {Number} resolution resolution of the curves
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * curveDetail(5);
+ * }
+ * function draw() {
+ * background(200);
+ *
+ * curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);
+ * }
+ *
+ *
+ *
+ * @alt
+ * white arch shape with a low level of curve detail.
+ *
+ */
+ _main.default.prototype.curveDetail = function(d) {
+ _main.default._validateParameters('curveDetail', arguments);
+ if (d < 3) {
+ this._curveDetail = 3;
+ } else {
+ this._curveDetail = d;
+ }
+ return this;
+ };
+
+ /**
+ * Modifies the quality of forms created with curve() and curveVertex().
+ * The parameter tightness determines how the curve fits to the vertex
+ * points. The value 0.0 is the default value for tightness (this value
+ * defines the curves to be Catmull-Rom splines) and the value 1.0 connects
+ * all the points with straight lines. Values within the range -5.0 and 5.0
+ * will deform the curves but will leave them recognizable and as values
+ * increase in magnitude, they will continue to deform.
+ *
+ * @method curveTightness
+ * @param {Number} amount amount of deformation from the original vertices
+ * @chainable
+ * @example
+ *
+ *
+ * // Move the mouse left and right to see the curve change
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * let t = map(mouseX, 0, width, -5, 5);
+ * curveTightness(t);
+ * beginShape();
+ * curveVertex(10, 26);
+ * curveVertex(10, 26);
+ * curveVertex(83, 24);
+ * curveVertex(83, 61);
+ * curveVertex(25, 65);
+ * curveVertex(25, 65);
+ * endShape();
+ * }
+ *
+ *
+ *
+ * @alt
+ * Line shaped like right-facing arrow,points move with mouse-x and warp shape.
+ */
+ _main.default.prototype.curveTightness = function(t) {
+ _main.default._validateParameters('curveTightness', arguments);
+ this._renderer._curveTightness = t;
+ return this;
+ };
+
+ /**
+ * Evaluates the curve at position t for points a, b, c, d.
+ * The parameter t varies between 0 and 1, a and d are control points
+ * of the curve, and b and c are the start and end points of the curve.
+ * This can be done once with the x coordinates and a second time
+ * with the y coordinates to get the location of a curve at t.
+ *
+ * @method curvePoint
+ * @param {Number} a coordinate of first control point of the curve
+ * @param {Number} b coordinate of first point
+ * @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
+ * @example
+ *
+ *
+ * noFill();
+ * curve(5, 26, 5, 26, 73, 24, 73, 61);
+ * curve(5, 26, 73, 24, 73, 61, 15, 65);
+ * fill(255);
+ * ellipseMode(CENTER);
+ * let steps = 6;
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * let x = curvePoint(5, 5, 73, 73, t);
+ * let y = curvePoint(26, 26, 24, 61, t);
+ * ellipse(x, y, 5, 5);
+ * x = curvePoint(5, 73, 73, 15, t);
+ * y = curvePoint(26, 24, 61, 65, t);
+ * ellipse(x, y, 5, 5);
+ * }
+ *
+ *
+ *
+ *line hooking down to right-bottom with 13 5x5 white ellipse points
+ */
+ _main.default.prototype.curvePoint = function(a, b, c, d, t) {
+ _main.default._validateParameters('curvePoint', arguments);
+
+ var t3 = t * t * t,
+ t2 = t * t,
+ f1 = -0.5 * t3 + t2 - 0.5 * t,
+ f2 = 1.5 * t3 - 2.5 * t2 + 1.0,
+ f3 = -1.5 * t3 + 2.0 * t2 + 0.5 * t,
+ f4 = 0.5 * t3 - 0.5 * t2;
+ return a * f1 + b * f2 + c * f3 + d * f4;
+ };
+
+ /**
+ * Evaluates the tangent to the curve at position t for points a, b, c, d.
+ * The parameter t varies between 0 and 1, a and d are points on the curve,
+ * and b and c are the control points.
+ *
+ * @method curveTangent
+ * @param {Number} a coordinate of first point on the curve
+ * @param {Number} b coordinate of first control point
+ * @param {Number} c coordinate of second control point
+ * @param {Number} d coordinate of second point on the curve
+ * @param {Number} t value between 0 and 1
+ * @return {Number} the tangent at position t
+ * @example
+ *
+ *
+ * noFill();
+ * curve(5, 26, 73, 24, 73, 61, 15, 65);
+ * let steps = 6;
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * let x = curvePoint(5, 73, 73, 15, t);
+ * let y = curvePoint(26, 24, 61, 65, t);
+ * //ellipse(x, y, 5, 5);
+ * let tx = curveTangent(5, 73, 73, 15, t);
+ * let ty = curveTangent(26, 24, 61, 65, t);
+ * let a = atan2(ty, tx);
+ * a -= PI / 2.0;
+ * line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
+ * }
+ *
+ *
+ *
+ * @alt
+ *right curving line mid-right of canvas with 7 short lines radiating from it.
+ */
+ _main.default.prototype.curveTangent = function(a, b, c, d, t) {
+ _main.default._validateParameters('curveTangent', arguments);
+
+ var t2 = t * t,
+ f1 = -3 * t2 / 2 + 2 * t - 0.5,
+ f2 = 9 * t2 / 2 - 5 * t,
+ f3 = -9 * t2 / 2 + 4 * t + 0.5,
+ f4 = 3 * t2 / 2 - t;
+ return a * f1 + b * f2 + c * f3 + d * f4;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../error_helpers': 23, '../main': 27 }
+ ],
+ 37: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Shape
+ * @submodule Vertex
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ var shapeKind = null;
+ var vertices = [];
+ var contourVertices = [];
+ var isBezier = false;
+ var isCurve = false;
+ var isQuadratic = false;
+ var isContour = false;
+ var isFirstContour = true;
+
+ /**
+ * Use the beginContour() and endContour() functions to create negative
+ * shapes within shapes such as the center of the letter 'O'. beginContour()
+ * begins recording vertices for the shape and endContour() stops recording.
+ * The vertices that define a negative shape must "wind" in the opposite
+ * direction from the exterior shape. First draw vertices for the exterior
+ * clockwise order, then for internal shapes, draw vertices
+ * shape in counter-clockwise.
+ *
+ * These functions can only be used within a beginShape()/endShape() pair and
+ * transformations such as translate(), rotate(), and scale() do not work
+ * within a beginContour()/endContour() pair. It is also not possible to use
+ * other shapes, such as ellipse() or rect() within.
+ *
+ * @method beginContour
+ * @chainable
+ * @example
+ *
+ *
+ * translate(50, 50);
+ * stroke(255, 0, 0);
+ * beginShape();
+ * // Exterior part of shape, clockwise winding
+ * vertex(-40, -40);
+ * vertex(40, -40);
+ * vertex(40, 40);
+ * vertex(-40, 40);
+ * // Interior part of shape, counter-clockwise winding
+ * beginContour();
+ * vertex(-20, -20);
+ * vertex(-20, 20);
+ * vertex(20, 20);
+ * vertex(20, -20);
+ * endContour();
+ * endShape(CLOSE);
+ *
+ *
+ *
+ * @alt
+ * white rect and smaller grey rect with red outlines in center of canvas.
+ *
+ */
+ _main.default.prototype.beginContour = function() {
+ contourVertices = [];
+ isContour = true;
+ return this;
+ };
+
+ /**
+ * Using the beginShape() and endShape() functions allow creating more
+ * complex forms. beginShape() begins recording vertices for a shape and
+ * endShape() stops recording. The value of the kind parameter tells it which
+ * types of shapes to create from the provided vertices. With no mode
+ * specified, the shape can be any irregular polygon.
+ *
+ * The parameters available for beginShape() are POINTS, LINES, TRIANGLES,
+ * TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the
+ * beginShape() function, a series of vertex() commands must follow. To stop
+ * drawing the shape, call endShape(). Each shape will be outlined with the
+ * current stroke color and filled with the fill color.
+ *
+ * Transformations such as translate(), rotate(), and scale() do not work
+ * within beginShape(). It is also not possible to use other shapes, such as
+ * ellipse() or rect() within beginShape().
+ *
+ * @method beginShape
+ * @param {Constant} [kind] either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
+ * TRIANGLE_STRIP, QUADS, or QUAD_STRIP
+ * @chainable
+ * @example
+ *
+ *
+ * beginShape();
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape(CLOSE);
+ *
+ *
+ *
+ *
+ *
+ * beginShape(POINTS);
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(LINES);
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * beginShape();
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * beginShape();
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape(CLOSE);
+ *
+ *
+ *
+ *
+ *
+ * beginShape(TRIANGLES);
+ * vertex(30, 75);
+ * vertex(40, 20);
+ * vertex(50, 75);
+ * vertex(60, 20);
+ * vertex(70, 75);
+ * vertex(80, 20);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(TRIANGLE_STRIP);
+ * vertex(30, 75);
+ * vertex(40, 20);
+ * vertex(50, 75);
+ * vertex(60, 20);
+ * vertex(70, 75);
+ * vertex(80, 20);
+ * vertex(90, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(TRIANGLE_FAN);
+ * vertex(57.5, 50);
+ * vertex(57.5, 15);
+ * vertex(92, 50);
+ * vertex(57.5, 85);
+ * vertex(22, 50);
+ * vertex(57.5, 15);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(QUADS);
+ * vertex(30, 20);
+ * vertex(30, 75);
+ * vertex(50, 75);
+ * vertex(50, 20);
+ * vertex(65, 20);
+ * vertex(65, 75);
+ * vertex(85, 75);
+ * vertex(85, 20);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(QUAD_STRIP);
+ * vertex(30, 20);
+ * vertex(30, 75);
+ * vertex(50, 20);
+ * vertex(50, 75);
+ * vertex(65, 20);
+ * vertex(65, 75);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape();
+ * vertex(20, 20);
+ * vertex(40, 20);
+ * vertex(40, 40);
+ * vertex(60, 40);
+ * vertex(60, 60);
+ * vertex(20, 60);
+ * endShape(CLOSE);
+ *
+ *
+ * @alt
+ * white square-shape with black outline in middle-right of canvas.
+ * 4 black points in a square shape in middle-right of canvas.
+ * 2 horizontal black lines. In the top-right and bottom-right of canvas.
+ * 3 line shape with horizontal on top, vertical in middle and horizontal bottom.
+ * square line shape in middle-right of canvas.
+ * 2 white triangle shapes mid-right canvas. left one pointing up and right down.
+ * 5 horizontal interlocking and alternating white triangles in mid-right canvas.
+ * 4 interlocking white triangles in 45 degree rotated square-shape.
+ * 2 white rectangle shapes in mid-right canvas. Both 20x55.
+ * 3 side-by-side white rectangles center rect is smaller in mid-right canvas.
+ * Thick white l-shape with black outline mid-top-left of canvas.
+ *
+ */
+ _main.default.prototype.beginShape = function(kind) {
+ _main.default._validateParameters('beginShape', arguments);
+ if (this._renderer.isP3D) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).beginShape.apply(
+ _this$_renderer,
+ arguments
+ );
+ } else {
+ if (
+ kind === constants.POINTS ||
+ kind === constants.LINES ||
+ kind === constants.TRIANGLES ||
+ kind === constants.TRIANGLE_FAN ||
+ kind === constants.TRIANGLE_STRIP ||
+ kind === constants.QUADS ||
+ kind === constants.QUAD_STRIP
+ ) {
+ shapeKind = kind;
+ } else {
+ shapeKind = null;
+ }
+
+ vertices = [];
+ contourVertices = [];
+ }
+ return this;
+ };
+
+ /**
+ * Specifies vertex coordinates for Bezier curves. Each call to
+ * bezierVertex() defines the position of two control points and
+ * one anchor point of a Bezier curve, adding a new segment to a
+ * line or shape. For WebGL mode bezierVertex() can be used in 2D
+ * as well as 3D mode. 2D mode expects 6 parameters, while 3D mode
+ * expects 9 parameters (including z coordinates).
+ *
+ * The first time bezierVertex() is used within a beginShape()
+ * call, it must be prefaced with a call to vertex() to set the first anchor
+ * point. This function must be used between beginShape() and endShape()
+ * and only when there is no MODE or POINTS parameter specified to
+ * beginShape().
+ *
+ * @method bezierVertex
+ * @param {Number} x2 x-coordinate for the first control point
+ * @param {Number} y2 y-coordinate for the first control point
+ * @param {Number} x3 x-coordinate for the second control point
+ * @param {Number} y3 y-coordinate for the second control point
+ * @param {Number} x4 x-coordinate for the anchor point
+ * @param {Number} y4 y-coordinate for the anchor point
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * noFill();
+ * beginShape();
+ * vertex(30, 20);
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * endShape();
+ *
+ *
+ *
+ * @alt
+ * crescent-shaped line in middle of canvas. Points facing left.
+ *
+ * @example
+ *
+ *
+ * beginShape();
+ * vertex(30, 20);
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * bezierVertex(50, 80, 60, 25, 30, 20);
+ * endShape();
+ *
+ *
+ *
+ * @alt
+ * white crescent shape in middle of canvas. Points facing left.
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ * function draw() {
+ * orbitControl();
+ * background(50);
+ * strokeWeight(4);
+ * stroke(255);
+ * point(-25, 30);
+ * point(25, 30);
+ * point(25, -30);
+ * point(-25, -30);
+ *
+ * strokeWeight(1);
+ * noFill();
+ *
+ * beginShape();
+ * vertex(-25, 30);
+ * bezierVertex(25, 30, 25, -30, -25, -30);
+ * endShape();
+ *
+ * beginShape();
+ * vertex(-25, 30, 20);
+ * bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);
+ * endShape();
+ * }
+ *
+ *
+ *
+ * @alt
+ * crescent shape in middle of canvas with another crescent shape on positive z-axis.
+ */
+
+ /**
+ * @method bezierVertex
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate for the first control point (for WebGL mode)
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate for the second control point (for WebGL mode)
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate for the anchor point (for WebGL mode)
+ * @chainable
+ */
+ _main.default.prototype.bezierVertex = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('bezierVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).bezierVertex.apply(
+ _this$_renderer2,
+ args
+ );
+ } else {
+ if (vertices.length === 0) {
+ _main.default._friendlyError(
+ 'vertex() must be used once before calling bezierVertex()',
+ 'bezierVertex'
+ );
+ } else {
+ isBezier = true;
+ var vert = [];
+ for (var i = 0; i < args.length; i++) {
+ vert[i] = args[i];
+ }
+ vert.isVert = false;
+ if (isContour) {
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ }
+ }
+ return this;
+ };
+
+ /**
+ * Specifies vertex coordinates for curves. This function may only
+ * be used between beginShape() and endShape() and only when there
+ * is no MODE parameter specified to beginShape().
+ * For WebGL mode curveVertex() can be used in 2D as well as 3D mode.
+ * 2D mode expects 2 parameters, while 3D mode expects 3 parameters.
+ *
+ * The first and last points in a series of curveVertex() lines will be used to
+ * guide the beginning and end of a the curve. A minimum of four
+ * points is required to draw a tiny curve between the second and
+ * third points. Adding a fifth point with curveVertex() will draw
+ * the curve between the second, third, and fourth points. The
+ * curveVertex() function is an implementation of Catmull-Rom
+ * splines.
+ *
+ * @method curveVertex
+ * @param {Number} x x-coordinate of the vertex
+ * @param {Number} y y-coordinate of the vertex
+ * @chainable
+ * @example
+ *
+ *
+ * strokeWeight(5);
+ * point(84, 91);
+ * point(68, 19);
+ * point(21, 17);
+ * point(32, 91);
+ * strokeWeight(1);
+ *
+ * noFill();
+ * beginShape();
+ * curveVertex(84, 91);
+ * curveVertex(84, 91);
+ * curveVertex(68, 19);
+ * curveVertex(21, 17);
+ * curveVertex(32, 91);
+ * curveVertex(32, 91);
+ * endShape();
+ *
+ *
+ *
+ *
+ * @alt
+ * Upside-down u-shape line, mid canvas. left point extends beyond canvas view.
+ */
+ /**
+ * @method curveVertex
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z] z-coordinate of the vertex (for WebGL mode)
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ * function draw() {
+ * orbitControl();
+ * background(50);
+ * strokeWeight(4);
+ * stroke(255);
+ *
+ * point(-25, 25);
+ * point(-25, 25);
+ * point(-25, -25);
+ * point(25, -25);
+ * point(25, 25);
+ * point(25, 25);
+ *
+ * strokeWeight(1);
+ * noFill();
+ *
+ * beginShape();
+ * curveVertex(-25, 25);
+ * curveVertex(-25, 25);
+ * curveVertex(-25, -25);
+ * curveVertex(25, -25);
+ * curveVertex(25, 25);
+ * curveVertex(25, 25);
+ * endShape();
+ *
+ * beginShape();
+ * curveVertex(-25, 25, 20);
+ * curveVertex(-25, 25, 20);
+ * curveVertex(-25, -25, 20);
+ * curveVertex(25, -25, 20);
+ * curveVertex(25, 25, 20);
+ * curveVertex(25, 25, 20);
+ * endShape();
+ * }
+ *
+ *
+ *
+ * @alt
+ * Upside-down u-shape line, mid canvas with the same shape in positive z-axis.
+ *
+ */
+ _main.default.prototype.curveVertex = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('curveVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer3;
+ (_this$_renderer3 = this._renderer).curveVertex.apply(_this$_renderer3, args);
+ } else {
+ isCurve = true;
+ this.vertex(args[0], args[1]);
+ }
+ return this;
+ };
+
+ /**
+ * Use the beginContour() and endContour() functions to create negative
+ * shapes within shapes such as the center of the letter 'O'. beginContour()
+ * begins recording vertices for the shape and endContour() stops recording.
+ * The vertices that define a negative shape must "wind" in the opposite
+ * direction from the exterior shape. First draw vertices for the exterior
+ * clockwise order, then for internal shapes, draw vertices
+ * shape in counter-clockwise.
+ *
+ * These functions can only be used within a beginShape()/endShape() pair and
+ * transformations such as translate(), rotate(), and scale() do not work
+ * within a beginContour()/endContour() pair. It is also not possible to use
+ * other shapes, such as ellipse() or rect() within.
+ *
+ * @method endContour
+ * @chainable
+ * @example
+ *
+ *
+ * translate(50, 50);
+ * stroke(255, 0, 0);
+ * beginShape();
+ * // Exterior part of shape, clockwise winding
+ * vertex(-40, -40);
+ * vertex(40, -40);
+ * vertex(40, 40);
+ * vertex(-40, 40);
+ * // Interior part of shape, counter-clockwise winding
+ * beginContour();
+ * vertex(-20, -20);
+ * vertex(-20, 20);
+ * vertex(20, 20);
+ * vertex(20, -20);
+ * endContour();
+ * endShape(CLOSE);
+ *
+ *
+ *
+ * @alt
+ * white rect and smaller grey rect with red outlines in center of canvas.
+ *
+ */
+ _main.default.prototype.endContour = function() {
+ var vert = contourVertices[0].slice(); // copy all data
+ vert.isVert = contourVertices[0].isVert;
+ vert.moveTo = false;
+ contourVertices.push(vert);
+
+ // prevent stray lines with multiple contours
+ if (isFirstContour) {
+ vertices.push(vertices[0]);
+ isFirstContour = false;
+ }
+
+ for (var i = 0; i < contourVertices.length; i++) {
+ vertices.push(contourVertices[i]);
+ }
+ return this;
+ };
+
+ /**
+ * 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
+ * the shape (to connect the beginning and the end).
+ *
+ * @method endShape
+ * @param {Constant} [mode] use CLOSE to close the shape
+ * @chainable
+ * @example
+ *
+ *
+ * noFill();
+ *
+ * beginShape();
+ * vertex(20, 20);
+ * vertex(45, 20);
+ * vertex(45, 80);
+ * endShape(CLOSE);
+ *
+ * beginShape();
+ * vertex(50, 20);
+ * vertex(75, 20);
+ * vertex(75, 80);
+ * endShape();
+ *
+ *
+ *
+ * @alt
+ * Triangle line shape with smallest interior angle on bottom and upside-down L.
+ *
+ */
+ _main.default.prototype.endShape = function(mode) {
+ _main.default._validateParameters('endShape', arguments);
+ if (this._renderer.isP3D) {
+ this._renderer.endShape(
+ mode,
+ isCurve,
+ isBezier,
+ isQuadratic,
+ isContour,
+ shapeKind
+ );
+ } else {
+ if (vertices.length === 0) {
+ return this;
+ }
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }
+
+ var closeShape = mode === constants.CLOSE;
+
+ // if the shape is closed, the first element is also the last element
+ if (closeShape && !isContour) {
+ vertices.push(vertices[0]);
+ }
+
+ this._renderer.endShape(
+ mode,
+ vertices,
+ isCurve,
+ isBezier,
+ isQuadratic,
+ isContour,
+ shapeKind
+ );
+
+ // Reset some settings
+ isCurve = false;
+ isBezier = false;
+ isQuadratic = false;
+ isContour = false;
+ isFirstContour = true;
+
+ // If the shape is closed, the first element was added as last element.
+ // We must remove it again to prevent the list of vertices from growing
+ // over successive calls to endShape(CLOSE)
+ if (closeShape) {
+ vertices.pop();
+ }
+ }
+ return this;
+ };
+
+ /**
+ * Specifies vertex coordinates for quadratic Bezier curves. Each call to
+ * quadraticVertex() defines the position of one control points and one
+ * anchor point of a Bezier curve, adding a new segment to a line or shape.
+ * The first time quadraticVertex() is used within a beginShape() call, it
+ * must be prefaced with a call to vertex() to set the first anchor point.
+ * For WebGL mode quadraticVertex() can be used in 2D as well as 3D mode.
+ * 2D mode expects 4 parameters, while 3D mode expects 6 parameters
+ * (including z coordinates).
+ *
+ * This function must be used between beginShape() and endShape()
+ * and only when there is no MODE or POINTS parameter specified to
+ * beginShape().
+ *
+ * @method quadraticVertex
+ * @param {Number} cx x-coordinate for the control point
+ * @param {Number} cy y-coordinate for the control point
+ * @param {Number} x3 x-coordinate for the anchor point
+ * @param {Number} y3 y-coordinate for the anchor point
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * strokeWeight(5);
+ * point(20, 20);
+ * point(80, 20);
+ * point(50, 50);
+ *
+ * noFill();
+ * strokeWeight(1);
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ * point(20, 20);
+ * point(80, 20);
+ * point(50, 50);
+ *
+ * point(20, 80);
+ * point(80, 80);
+ * point(80, 60);
+ *
+ * noFill();
+ * strokeWeight(1);
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * quadraticVertex(20, 80, 80, 80);
+ * vertex(80, 60);
+ * endShape();
+ *
+ *
+ *
+ * @alt
+ * arched-shaped black line with 4 pixel thick stroke weight.
+ * backwards s-shaped black line with 4 pixel thick stroke weight.
+ *
+ */
+
+ /**
+ * @method quadraticVertex
+ * @param {Number} cx
+ * @param {Number} cy
+ * @param {Number} cz z-coordinate for the control point (for WebGL mode)
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate for the anchor point (for WebGL mode)
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ * function draw() {
+ * orbitControl();
+ * background(50);
+ * strokeWeight(4);
+ * stroke(255);
+ *
+ * point(-35, -35);
+ * point(35, -35);
+ * point(0, 0);
+ * point(-35, 35);
+ * point(35, 35);
+ * point(35, 10);
+ *
+ * strokeWeight(1);
+ * noFill();
+ *
+ * beginShape();
+ * vertex(-35, -35);
+ * quadraticVertex(35, -35, 0, 0);
+ * quadraticVertex(-35, 35, 35, 35);
+ * vertex(35, 10);
+ * endShape();
+ *
+ * beginShape();
+ * vertex(-35, -35, 20);
+ * quadraticVertex(35, -35, 20, 0, 0, 20);
+ * quadraticVertex(-35, 35, 20, 35, 35, 20);
+ * vertex(35, 10, 20);
+ * endShape();
+ * }
+ *
+ *
+ *
+ * @alt
+ * backwards s-shaped black line with the same s-shaped line in postive z-axis.
+ */
+ _main.default.prototype.quadraticVertex = function() {
+ for (
+ var _len3 = arguments.length, args = new Array(_len3), _key3 = 0;
+ _key3 < _len3;
+ _key3++
+ ) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('quadraticVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer4;
+ (_this$_renderer4 = this._renderer).quadraticVertex.apply(
+ _this$_renderer4,
+ args
+ );
+ } else {
+ //if we're drawing a contour, put the points into an
+ // array for inside drawing
+ if (this._contourInited) {
+ var pt = {};
+ pt.x = args[0];
+ pt.y = args[1];
+ pt.x3 = args[2];
+ pt.y3 = args[3];
+ pt.type = constants.QUADRATIC;
+ this._contourVertices.push(pt);
+
+ return this;
+ }
+ if (vertices.length > 0) {
+ isQuadratic = true;
+ var vert = [];
+ for (var i = 0; i < args.length; i++) {
+ vert[i] = args[i];
+ }
+ vert.isVert = false;
+ if (isContour) {
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ } else {
+ _main.default._friendlyError(
+ 'vertex() must be used once before calling quadraticVertex()',
+ 'quadraticVertex'
+ );
+ }
+ }
+ return this;
+ };
+
+ /**
+ * All shapes are constructed by connecting a series of vertices. vertex()
+ * is used to specify the vertex coordinates for points, lines, triangles,
+ * quads, and polygons. It is used exclusively within the beginShape() and
+ * endShape() functions.
+ *
+ * @method vertex
+ * @param {Number} x x-coordinate of the vertex
+ * @param {Number} y y-coordinate of the vertex
+ * @chainable
+ * @example
+ *
+ *
+ * strokeWeight(3);
+ * beginShape(POINTS);
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * createCanvas(100, 100, WEBGL);
+ * background(240, 240, 240);
+ * fill(237, 34, 93);
+ * noStroke();
+ * beginShape();
+ * vertex(0, 35);
+ * vertex(35, 0);
+ * vertex(0, -35);
+ * vertex(-35, 0);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * createCanvas(100, 100, WEBGL);
+ * background(240, 240, 240);
+ * fill(237, 34, 93);
+ * noStroke();
+ * beginShape();
+ * vertex(-10, 10);
+ * vertex(0, 35);
+ * vertex(10, 10);
+ * vertex(35, 0);
+ * vertex(10, -8);
+ * vertex(0, -35);
+ * vertex(-10, -8);
+ * vertex(-35, 0);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(3);
+ * stroke(237, 34, 93);
+ * beginShape(LINES);
+ * vertex(10, 35);
+ * vertex(90, 35);
+ * vertex(10, 65);
+ * vertex(90, 65);
+ * vertex(35, 10);
+ * vertex(35, 90);
+ * vertex(65, 10);
+ * vertex(65, 90);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * // Click to change the number of sides.
+ * // In WebGL mode, custom shapes will only
+ * // display hollow fill sections when
+ * // all calls to vertex() use the same z-value.
+ *
+ * let sides = 3;
+ * let angle, px, py;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * fill(237, 34, 93);
+ * strokeWeight(3);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * ngon(sides, 0, 0, 80);
+ * }
+ *
+ * function mouseClicked() {
+ * if (sides > 6) {
+ * sides = 3;
+ * } else {
+ * sides++;
+ * }
+ * }
+ *
+ * function ngon(n, x, y, d) {
+ * beginShape();
+ * for (let i = 0; i < n + 1; i++) {
+ * angle = TWO_PI / n * i;
+ * px = x + sin(angle) * d / 2;
+ * py = y - cos(angle) * d / 2;
+ * vertex(px, py, 0);
+ * }
+ * for (let i = 0; i < n + 1; i++) {
+ * angle = TWO_PI / n * i;
+ * px = x + sin(angle) * d / 4;
+ * py = y - cos(angle) * d / 4;
+ * vertex(px, py, 0);
+ * }
+ * endShape();
+ * }
+ *
+ *
+ * @alt
+ * 4 black points in a square shape in middle-right of canvas.
+ * 4 points making a diamond shape.
+ * 8 points making a star.
+ * 8 points making 4 lines.
+ * A rotating 3D shape with a hollow section in the middle.
+ *
+ */
+ /**
+ * @method vertex
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z z-coordinate of the vertex
+ * @param {Number} [u] the vertex's texture u-coordinate
+ * @param {Number} [v] the vertex's texture v-coordinate
+ * @chainable
+ */
+ _main.default.prototype.vertex = function(x, y, moveTo, u, v) {
+ if (this._renderer.isP3D) {
+ var _this$_renderer5;
+ (_this$_renderer5 = this._renderer).vertex.apply(_this$_renderer5, arguments);
+ } else {
+ var vert = [];
+ vert.isVert = true;
+ vert[0] = x;
+ vert[1] = y;
+ vert[2] = 0;
+ vert[3] = 0;
+ vert[4] = 0;
+ vert[5] = this._renderer._getFill();
+ vert[6] = this._renderer._getStroke();
+
+ if (moveTo) {
+ vert.moveTo = moveTo;
+ }
+ if (isContour) {
+ if (contourVertices.length === 0) {
+ vert.moveTo = true;
+ }
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ }
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../constants': 21, '../main': 27 }
+ ],
+ 38: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj &&
+ typeof Symbol === 'function' &&
+ obj.constructor === Symbol &&
+ obj !== Symbol.prototype
+ ? 'symbol'
+ : typeof obj;
+ };
+ }
+ return _typeof(obj);
+ } // requestAnim shim layer by Paul Irish
+ // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ // http://my.opera.com/emoller/blog/2011/12/20/
+ // requestanimationframe-for-smart-er-animating
+ // requestAnimationFrame polyfill by Erik Möller
+ // fixes from Paul Irish and Tino Zijdel
+ window.requestAnimationFrame = (function() {
+ return (
+ window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(callback, element) {
+ // should '60' here be framerate?
+ window.setTimeout(callback, 1000 / 60);
+ }
+ );
+ })();
+
+ /**
+ * shim for Uint8ClampedArray.slice
+ * (allows arrayCopy to work with pixels[])
+ * with thanks to http://halfpapstudios.com/blog/tag/html5-canvas/
+ * Enumerable set to false to protect for...in from
+ * Uint8ClampedArray.prototype pollution.
+ */
+ (function() {
+ if (
+ typeof Uint8ClampedArray !== 'undefined' &&
+ !Uint8ClampedArray.prototype.slice
+ ) {
+ Object.defineProperty(Uint8ClampedArray.prototype, 'slice', {
+ value: Array.prototype.slice,
+ writable: true,
+ configurable: true,
+ enumerable: false
+ });
+ }
+ })();
+
+ /**
+ * this is implementation of Object.assign() which is unavailable in
+ * IE11 and (non-Chrome) Android browsers.
+ * The assign() method is used to copy the values of all enumerable
+ * own properties from one or more source objects to a target object.
+ * It will return the target object.
+ * Modified from https://github.com/ljharb/object.assign
+ */
+ (function() {
+ if (!Object.assign) {
+ var keys = Object.keys;
+ var defineProperty = Object.defineProperty;
+ var canBeObject = function canBeObject(obj) {
+ return typeof obj !== 'undefined' && obj !== null;
+ };
+ var hasSymbols =
+ typeof Symbol === 'function' && _typeof(Symbol()) === 'symbol';
+ var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+ var isEnumerableOn = function isEnumerableOn(obj) {
+ return function isEnumerable(prop) {
+ return propIsEnumerable.call(obj, prop);
+ };
+ };
+
+ // per ES6 spec, this function has to have a length of 2
+ var assignShim = function assign(target, source1) {
+ if (!canBeObject(target)) {
+ throw new TypeError('target must be an object');
+ }
+ var objTarget = Object(target);
+ var s, source, i, props;
+ for (s = 1; s < arguments.length; ++s) {
+ source = Object(arguments[s]);
+ props = keys(source);
+ if (hasSymbols && Object.getOwnPropertySymbols) {
+ props.push.apply(
+ props,
+ Object.getOwnPropertySymbols(source).filter(isEnumerableOn(source))
+ );
+ }
+ for (i = 0; i < props.length; ++i) {
+ objTarget[props[i]] = source[props[i]];
+ }
+ }
+ return objTarget;
+ };
+
+ defineProperty(Object, 'assign', {
+ value: assignShim,
+ configurable: true,
+ enumerable: false,
+ writable: true
+ });
+ }
+ })();
+ },
+ {}
+ ],
+ 39: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Structure
+ * @submodule Structure
+ * @for p5
+ * @requires core
+ */ /**
+ * Stops p5.js from continuously executing the code within draw().
+ * If loop() is called, the code in draw() begins to run continuously again.
+ * If using noLoop() in setup(), it should be the last line inside the block.
+ *
+ * When noLoop() is used, it's not possible to manipulate or access the
+ * screen inside event handling functions such as mousePressed() or
+ * keyPressed(). Instead, use those functions to call redraw() or loop(),
+ * which will run draw(), which can update the screen properly. This means
+ * that when noLoop() has been called, no drawing can happen, and functions
+ * like saveFrame() or loadPixels() may not be used.
+ *
+ * Note that if the sketch is resized, redraw() will be called to update
+ * the sketch, even after noLoop() has been specified. Otherwise, the sketch
+ * would enter an odd state until loop() was called.
+ *
+ * @method noLoop
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * noLoop();
+ * }
+
+ * function draw() {
+ * line(10, 10, 90, 90);
+ * }
+ *
+ *
+ *
+ * let x = 0;
+ * function setup() {
+ * createCanvas(100, 100);
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * x = x + 0.1;
+ * if (x > width) {
+ * x = 0;
+ * }
+ * line(x, 0, x, height);
+ * }
+ *
+ * function mousePressed() {
+ * noLoop();
+ * }
+ *
+ * function mouseReleased() {
+ * loop();
+ * }
+ *
+ *
+ * @alt
+ * 113 pixel long line extending from top-left to bottom right of canvas.
+ * horizontal line moves slowly from left. Loops but stops on mouse press.
+ *
+ */ _main.default.prototype.noLoop = function() {
+ this._loop = false;
+ };
+ /**
+ * By default, p5.js loops through draw() continuously, executing the code
+ * within it. However, the draw() loop may be stopped by calling noLoop().
+ * In that case, the draw() loop can be resumed with loop().
+ *
+ * Avoid calling loop() from inside setup().
+ *
+ * @method loop
+ * @example
+ *
+ * let x = 0;
+ * function setup() {
+ * createCanvas(100, 100);
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * x = x + 0.1;
+ * if (x > width) {
+ * x = 0;
+ * }
+ * line(x, 0, x, height);
+ * }
+ *
+ * function mousePressed() {
+ * loop();
+ * }
+ *
+ * function mouseReleased() {
+ * noLoop();
+ * }
+ *
+ *
+ * @alt
+ * horizontal line moves slowly from left. Loops but stops on mouse press.
+ *
+ */
+
+ _main.default.prototype.loop = function() {
+ if (!this._loop) {
+ this._loop = true;
+ if (this._setupDone) {
+ this._draw();
+ }
+ }
+ };
+
+ /**
+ * The push() function saves the current drawing style settings and
+ * transformations, while pop() restores these settings. Note that these
+ * functions are always used together. They allow you to change the style
+ * and transformation settings and later return to what you had. When a new
+ * state is started with push(), it builds on the current style and transform
+ * information. The push() and pop() functions can be embedded to provide
+ * more control. (See the second example for a demonstration.)
+ *
+ * push() stores information related to the current transformation state
+ * and style settings controlled by the following functions:
+ * fill(),
+ * noFill(),
+ * noStroke(),
+ * stroke(),
+ * tint(),
+ * noTint(),
+ * strokeWeight(),
+ * strokeCap(),
+ * strokeJoin(),
+ * imageMode(),
+ * rectMode(),
+ * ellipseMode(),
+ * colorMode(),
+ * textAlign(),
+ * textFont(),
+ * textSize(),
+ * textLeading(),
+ * applyMatrix(),
+ * resetMatrix(),
+ * rotate(),
+ * scale(),
+ * shearX(),
+ * shearY(),
+ * translate(),
+ * noiseSeed().
+ *
+ * In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(),
+ * pointLight(), texture(), specularMaterial(), shininess(), normalMaterial()
+ * and shader().
+ *
+ * @method push
+ * @example
+ *
+ *
+ * ellipse(0, 50, 33, 33); // Left circle
+ *
+ * push(); // Start a new drawing state
+ * strokeWeight(10);
+ * fill(204, 153, 0);
+ * translate(50, 0);
+ * ellipse(0, 50, 33, 33); // Middle circle
+ * pop(); // Restore original state
+ *
+ * ellipse(100, 50, 33, 33); // Right circle
+ *
+ *
+ *
+ *
+ * ellipse(0, 50, 33, 33); // Left circle
+ *
+ * push(); // Start a new drawing state
+ * strokeWeight(10);
+ * fill(204, 153, 0);
+ * ellipse(33, 50, 33, 33); // Left-middle circle
+ *
+ * push(); // Start another new drawing state
+ * stroke(0, 102, 153);
+ * ellipse(66, 50, 33, 33); // Right-middle circle
+ * pop(); // Restore previous state
+ *
+ * pop(); // Restore original state
+ *
+ * ellipse(100, 50, 33, 33); // Right circle
+ *
+ *
+ *
+ * @alt
+ * Gold ellipse + thick black outline @center 2 white ellipses on left and right.
+ * 2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
+ *
+ */
+ _main.default.prototype.push = function() {
+ this._styles.push({
+ props: {
+ _colorMode: this._colorMode
+ },
+
+ renderer: this._renderer.push()
+ });
+ };
+
+ /**
+ * The push() function saves the current drawing style settings and
+ * transformations, while pop() restores these settings. Note that these
+ * functions are always used together. They allow you to change the style
+ * and transformation settings and later return to what you had. When a new
+ * state is started with push(), it builds on the current style and transform
+ * information. The push() and pop() functions can be embedded to provide
+ * more control. (See the second example for a demonstration.)
+ *
+ * push() stores information related to the current transformation state
+ * and style settings controlled by the following functions:
+ * fill(),
+ * noFill(),
+ * noStroke(),
+ * stroke(),
+ * tint(),
+ * noTint(),
+ * strokeWeight(),
+ * strokeCap(),
+ * strokeJoin(),
+ * imageMode(),
+ * rectMode(),
+ * ellipseMode(),
+ * colorMode(),
+ * textAlign(),
+ * textFont(),
+ * textSize(),
+ * textLeading(),
+ * applyMatrix(),
+ * resetMatrix(),
+ * rotate(),
+ * scale(),
+ * shearX(),
+ * shearY(),
+ * translate(),
+ * noiseSeed().
+ *
+ * In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(),
+ * pointLight(), texture(), specularMaterial(), shininess(), normalMaterial()
+ * and shader().
+ *
+ * @method pop
+ * @example
+ *
+ *
+ * ellipse(0, 50, 33, 33); // Left circle
+ *
+ * push(); // Start a new drawing state
+ * translate(50, 0);
+ * strokeWeight(10);
+ * fill(204, 153, 0);
+ * ellipse(0, 50, 33, 33); // Middle circle
+ * pop(); // Restore original state
+ *
+ * ellipse(100, 50, 33, 33); // Right circle
+ *
+ *
+ *
+ *
+ * ellipse(0, 50, 33, 33); // Left circle
+ *
+ * push(); // Start a new drawing state
+ * strokeWeight(10);
+ * fill(204, 153, 0);
+ * ellipse(33, 50, 33, 33); // Left-middle circle
+ *
+ * push(); // Start another new drawing state
+ * stroke(0, 102, 153);
+ * ellipse(66, 50, 33, 33); // Right-middle circle
+ * pop(); // Restore previous state
+ *
+ * pop(); // Restore original state
+ *
+ * ellipse(100, 50, 33, 33); // Right circle
+ *
+ *
+ *
+ * @alt
+ * Gold ellipse + thick black outline @center 2 white ellipses on left and right.
+ * 2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
+ *
+ */
+ _main.default.prototype.pop = function() {
+ var style = this._styles.pop();
+ if (style) {
+ this._renderer.pop(style.renderer);
+ Object.assign(this, style.props);
+ } else {
+ console.warn('pop() was called without matching push()');
+ }
+ };
+
+ /**
+ *
+ * Executes the code within draw() one time. This functions allows the
+ * program to update the display window only when necessary, for example
+ * when an event registered by mousePressed() or keyPressed() occurs.
+ *
+ * In structuring a program, it only makes sense to call redraw() within
+ * events such as mousePressed(). This is because redraw() does not run
+ * draw() immediately (it only sets a flag that indicates an update is
+ * needed).
+ *
+ * The redraw() function does not work properly when called inside draw().
+ * To enable/disable animations, use loop() and noLoop().
+ *
+ * In addition you can set the number of redraws per method call. Just
+ * add an integer as single parameter for the number of redraws.
+ *
+ * @method redraw
+ * @param {Integer} [n] Redraw for n-times. The default value is 1.
+ * @example
+ *
+ * let x = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * line(x, 0, x, height);
+ * }
+ *
+ * function mousePressed() {
+ * x += 1;
+ * redraw();
+ * }
+ *
+ *
+ *
+ * let x = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * x += 1;
+ * line(x, 0, x, height);
+ * }
+ *
+ * function mousePressed() {
+ * redraw(5);
+ * }
+ *
+ *
+ * @alt
+ * black line on far left of canvas
+ * black line on far left of canvas
+ *
+ */
+ _main.default.prototype.redraw = function(n) {
+ if (this._inUserDraw || !this._setupDone) {
+ return;
+ }
+
+ var numberOfRedraws = parseInt(n);
+ if (isNaN(numberOfRedraws) || numberOfRedraws < 1) {
+ numberOfRedraws = 1;
+ }
+
+ var context = this._isGlobal ? window : this;
+ var userSetup = context.setup;
+ var userDraw = context.draw;
+ if (typeof userDraw === 'function') {
+ if (typeof userSetup === 'undefined') {
+ context.scale(context._pixelDensity, context._pixelDensity);
+ }
+ var callMethod = function callMethod(f) {
+ f.call(context);
+ };
+ for (var idxRedraw = 0; idxRedraw < numberOfRedraws; idxRedraw++) {
+ context.resetMatrix();
+ if (context._renderer.isP3D) {
+ context._renderer._update();
+ }
+ context._setProperty('frameCount', context.frameCount + 1);
+ context._registeredMethods.pre.forEach(callMethod);
+ this._inUserDraw = true;
+ try {
+ userDraw();
+ } finally {
+ this._inUserDraw = false;
+ }
+ context._registeredMethods.post.forEach(callMethod);
+ }
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { './main': 27 }
+ ],
+ 40: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Transform
+ * @submodule Transform
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ /**
+ * Multiplies the current matrix by the one specified through the parameters.
+ * This is a powerful operation that can perform the equivalent of translate,
+ * scale, shear and rotate all at once. You can learn more about transformation
+ * matrices on
+ * Wikipedia.
+ *
+ * The naming of the arguments here follows the naming of the
+ * WHATWG specification and corresponds to a
+ * transformation matrix of the
+ * form:
+ *
+ * >
+ *
+ * @method applyMatrix
+ * @param {Number} a numbers which define the 2x3 matrix to be multiplied
+ * @param {Number} b numbers which define the 2x3 matrix to be multiplied
+ * @param {Number} c numbers which define the 2x3 matrix to be multiplied
+ * @param {Number} d numbers which define the 2x3 matrix to be multiplied
+ * @param {Number} e numbers which define the 2x3 matrix to be multiplied
+ * @param {Number} f numbers which define the 2x3 matrix to be multiplied
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * background(200);
+ * // Equivalent to translate(x, y);
+ * applyMatrix(1, 0, 0, 1, 40 + step, 50);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * background(200);
+ * translate(50, 50);
+ * // Equivalent to scale(x, y);
+ * applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * let angle = map(step, 0, 20, 0, TWO_PI);
+ * let cos_a = cos(angle);
+ * let sin_a = sin(angle);
+ * background(200);
+ * translate(50, 50);
+ * // Equivalent to rotate(angle);
+ * applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * let angle = map(step, 0, 20, -PI / 4, PI / 4);
+ * background(200);
+ * translate(50, 50);
+ * // equivalent to shearX(angle);
+ * let shear_factor = 1 / tan(PI / 2 - angle);
+ * applyMatrix(1, 0, shear_factor, 1, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateY(PI / 6);
+ * stroke(153);
+ * box(35);
+ * let rad = millis() / 1000;
+ * // Set rotation angles
+ * let ct = cos(rad);
+ * let st = sin(rad);
+ * // Matrix for rotation around the Y axis
+ * // prettier-ignore
+ * applyMatrix( ct, 0.0, st, 0.0,
+ * 0.0, 1.0, 0.0, 0.0,
+ * -st, 0.0, ct, 0.0,
+ * 0.0, 0.0, 0.0, 1.0);
+ * stroke(255);
+ * box(50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * A rectangle translating to the right
+ * A rectangle shrinking to the center
+ * A rectangle rotating clockwise about the center
+ * A rectangle shearing
+ *
+ */ _main.default.prototype.applyMatrix = function(a, b, c, d, e, f) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).applyMatrix.apply(
+ _this$_renderer,
+ arguments
+ );
+ return this;
+ };
+
+ /**
+ * Replaces the current matrix with the identity matrix.
+ *
+ * @method resetMatrix
+ * @chainable
+ * @example
+ *
+ *
+ * translate(50, 50);
+ * applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+ * rect(0, 0, 20, 20);
+ * // Note that the translate is also reset.
+ * resetMatrix();
+ * rect(0, 0, 20, 20);
+ *
+ *
+ *
+ * @alt
+ * A rotated retangle in the center with another at the top left corner
+ *
+ */
+ _main.default.prototype.resetMatrix = function() {
+ this._renderer.resetMatrix();
+ return this;
+ };
+
+ /**
+ * Rotates a shape the amount specified by the angle parameter. This
+ * function accounts for angleMode, so angles can be entered in either
+ * RADIANS or DEGREES.
+ *
+ * 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
+ * rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).
+ * All tranformations 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().
+ *
+ * @method rotate
+ * @param {Number} angle the angle of rotation, specified in radians
+ * or degrees, depending on current angleMode
+ * @param {p5.Vector|Number[]} [axis] (in 3d) the axis to rotate around
+ * @chainable
+ * @example
+ *
+ *
+ * translate(width / 2, height / 2);
+ * rotate(PI / 3.0);
+ * rect(-26, -26, 52, 52);
+ *
+ *
+ *
+ * @alt
+ * white 52x52 rect with black outline at center rotated counter 45 degrees
+ *
+ */
+ _main.default.prototype.rotate = function(angle, axis) {
+ _main.default._validateParameters('rotate', arguments);
+ this._renderer.rotate(this._toRadians(angle), axis);
+ return this;
+ };
+
+ /**
+ * Rotates around X axis.
+ * @method rotateX
+ * @param {Number} angle the angle of rotation, specified in radians
+ * or degrees, depending on current angleMode
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateX(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ *
+ * @alt
+ * 3d box rotating around the x axis.
+ */
+ _main.default.prototype.rotateX = function(angle) {
+ this._assert3d('rotateX');
+ _main.default._validateParameters('rotateX', arguments);
+ this._renderer.rotateX(this._toRadians(angle));
+ return this;
+ };
+
+ /**
+ * Rotates around Y axis.
+ * @method rotateY
+ * @param {Number} angle the angle of rotation, specified in radians
+ * or degrees, depending on current angleMode
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateY(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ *
+ * @alt
+ * 3d box rotating around the y axis.
+ */
+ _main.default.prototype.rotateY = function(angle) {
+ this._assert3d('rotateY');
+ _main.default._validateParameters('rotateY', arguments);
+ this._renderer.rotateY(this._toRadians(angle));
+ return this;
+ };
+
+ /**
+ * Rotates around Z axis. Webgl mode only.
+ * @method rotateZ
+ * @param {Number} angle the angle of rotation, specified in radians
+ * or degrees, depending on current angleMode
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateZ(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ *
+ * @alt
+ * 3d box rotating around the z axis.
+ */
+ _main.default.prototype.rotateZ = function(angle) {
+ this._assert3d('rotateZ');
+ _main.default._validateParameters('rotateZ', arguments);
+ this._renderer.rotateZ(this._toRadians(angle));
+ return this;
+ };
+
+ /**
+ * Increases or decreases the size of a shape by expanding and contracting
+ * vertices. Objects always scale from their relative origin to the
+ * coordinate system. Scale values are specified as decimal percentages.
+ * For example, the function call scale(2.0) increases the dimension of a
+ * shape by 200%.
+ *
+ * Transformations apply to everything that happens after and subsequent
+ * calls to the function multiply the effect. For example, calling scale(2.0)
+ * and then scale(1.5) is the same as scale(3.0). If scale() is called
+ * within draw(), the transformation is reset when the loop begins again.
+ *
+ * Using this function with the z parameter is only available in WEBGL mode.
+ * This function can be further controlled with push() and pop().
+ *
+ * @method scale
+ * @param {Number|p5.Vector|Number[]} s
+ * percent to scale the object, or percentage to
+ * scale the object in the x-axis if multiple arguments
+ * are given
+ * @param {Number} [y] percent to scale the object in the y-axis
+ * @param {Number} [z] percent to scale the object in the z-axis (webgl only)
+ * @chainable
+ * @example
+ *
+ *
+ * rect(30, 20, 50, 50);
+ * scale(0.5);
+ * rect(30, 20, 50, 50);
+ *
+ *
+ *
+ *
+ *
+ * rect(30, 20, 50, 50);
+ * scale(0.5, 1.3);
+ * rect(30, 20, 50, 50);
+ *
+ *
+ *
+ * @alt
+ * white 52x52 rect with black outline at center rotated counter 45 degrees
+ * 2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left
+ *
+ */
+ /**
+ * @method scale
+ * @param {p5.Vector|Number[]} scales per-axis percents to scale the object
+ * @chainable
+ */
+ _main.default.prototype.scale = function(x, y, z) {
+ _main.default._validateParameters('scale', arguments);
+ // Only check for Vector argument type if Vector is available
+ if (x instanceof _main.default.Vector) {
+ var v = x;
+ x = v.x;
+ y = v.y;
+ z = v.z;
+ } else if (x instanceof Array) {
+ var rg = x;
+ x = rg[0];
+ y = rg[1];
+ z = rg[2] || 1;
+ }
+ if (isNaN(y)) {
+ y = z = x;
+ } else if (isNaN(z)) {
+ z = 1;
+ }
+
+ this._renderer.scale.call(this._renderer, x, y, z);
+
+ return this;
+ };
+
+ /**
+ * Shears a shape around the x-axis the amount specified by the angle
+ * parameter. Angles should be specified in the current angleMode.
+ * Objects are always sheared around their relative position to the origin
+ * and positive numbers shear objects in a clockwise direction.
+ *
+ * Transformations apply to everything that happens after and subsequent
+ * calls to the function accumulates the effect. For example, calling
+ * shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).
+ * If shearX() is called within the draw(), the transformation is reset when
+ * the loop begins again.
+ *
+ * Technically, shearX() multiplies the current transformation matrix by a
+ * rotation matrix. This function can be further controlled by the
+ * push() and pop() functions.
+ *
+ * @method shearX
+ * @param {Number} angle angle of shear specified in radians or degrees,
+ * depending on current angleMode
+ * @chainable
+ * @example
+ *
+ *
+ * translate(width / 4, height / 4);
+ * shearX(PI / 4.0);
+ * rect(0, 0, 30, 30);
+ *
+ *
+ *
+ * @alt
+ * white irregular quadrilateral with black outline at top middle.
+ *
+ */
+ _main.default.prototype.shearX = function(angle) {
+ _main.default._validateParameters('shearX', arguments);
+ var rad = this._toRadians(angle);
+ this._renderer.applyMatrix(1, 0, Math.tan(rad), 1, 0, 0);
+ return this;
+ };
+
+ /**
+ * Shears a shape around the y-axis the amount specified by the angle
+ * parameter. Angles should be specified in the current angleMode. Objects
+ * are always sheared around their relative position to the origin and
+ * positive numbers shear objects in a clockwise direction.
+ *
+ * Transformations apply to everything that happens after and subsequent
+ * calls to the function accumulates the effect. For example, calling
+ * shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If
+ * shearY() is called within the draw(), the transformation is reset when
+ * the loop begins again.
+ *
+ * Technically, shearY() multiplies the current transformation matrix by a
+ * rotation matrix. This function can be further controlled by the
+ * push() and pop() functions.
+ *
+ * @method shearY
+ * @param {Number} angle angle of shear specified in radians or degrees,
+ * depending on current angleMode
+ * @chainable
+ * @example
+ *
+ *
+ * translate(width / 4, height / 4);
+ * shearY(PI / 4.0);
+ * rect(0, 0, 30, 30);
+ *
+ *
+ *
+ * @alt
+ * white irregular quadrilateral with black outline at middle bottom.
+ *
+ */
+ _main.default.prototype.shearY = function(angle) {
+ _main.default._validateParameters('shearY', arguments);
+ var rad = this._toRadians(angle);
+ this._renderer.applyMatrix(1, Math.tan(rad), 0, 1, 0, 0);
+ return this;
+ };
+
+ /**
+ * Specifies an amount to displace objects within the display window.
+ * The x parameter specifies left/right translation, the y parameter
+ * specifies up/down translation.
+ *
+ * Transformations are cumulative and apply to everything that happens after
+ * and subsequent calls to the function accumulates the effect. For example,
+ * calling translate(50, 0) and then translate(20, 0) is the same as
+ * translate(70, 0). If translate() is called within draw(), the
+ * transformation is reset when the loop begins again. This function can be
+ * further controlled by using push() and pop().
+ *
+ * @method translate
+ * @param {Number} x left/right translation
+ * @param {Number} y up/down translation
+ * @param {Number} [z] forward/backward translation (webgl only)
+ * @chainable
+ * @example
+ *
+ *
+ * translate(30, 20);
+ * rect(0, 0, 55, 55);
+ *
+ *
+ *
+ *
+ *
+ * rect(0, 0, 55, 55); // Draw rect at original 0,0
+ * translate(30, 20);
+ * rect(0, 0, 55, 55); // Draw rect at new 0,0
+ * translate(14, 14);
+ * rect(0, 0, 55, 55); // Draw rect at new 0,0
+ *
+ *
+ *
+
+ *
+ *
+ * function draw() {
+ * background(200);
+ * rectMode(CENTER);
+ * translate(width / 2, height / 2);
+ * translate(p5.Vector.fromAngle(millis() / 1000, 40));
+ * rect(0, 0, 20, 20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * white 55x55 rect with black outline at center right.
+ * 3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.
+ * a 20x20 white rect moving in a circle around the canvas
+ *
+ */
+ /**
+ * @method translate
+ * @param {p5.Vector} vector the vector to translate by
+ * @chainable
+ */
+ _main.default.prototype.translate = function(x, y, z) {
+ _main.default._validateParameters('translate', arguments);
+ if (this._renderer.isP3D) {
+ this._renderer.translate(x, y, z);
+ } else {
+ this._renderer.translate(x, y);
+ }
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { './main': 27 }
+ ],
+ 41: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (
+ Symbol.iterator in Object(iter) ||
+ Object.prototype.toString.call(iter) === '[object Arguments]'
+ )
+ return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj &&
+ typeof Symbol === 'function' &&
+ obj.constructor === Symbol &&
+ obj !== Symbol.prototype
+ ? 'symbol'
+ : typeof obj;
+ };
+ }
+ return _typeof(obj);
+ }
+ /**
+ *
+ * Stores a value in local storage under the key name.
+ * Local storage is saved in the browser and persists
+ * between browsing sessions and page reloads.
+ * The key can be the name of the variable but doesn't
+ * have to be. To retrieve stored items
+ * see getItem.
+ *
+ * Sensitive data such as passwords or personal information
+ * should not be stored in local storage.
+ *
+ * @method storeItem
+ * @for p5
+ * @param {String} key
+ * @param {String|Number|Object|Boolean|p5.Color|p5.Vector} value
+ *
+ * @example
+ *
+ * // Type to change the letter in the
+ * // center of the canvas.
+ * // If you reload the page, it will
+ * // still display the last key you entered
+ *
+ * let myText;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * myText = getItem('myText');
+ * if (myText === null) {
+ * myText = '';
+ * }
+ * }
+ *
+ * function draw() {
+ * textSize(40);
+ * background(255);
+ * text(myText, width / 2, height / 2);
+ * }
+ *
+ * function keyPressed() {
+ * myText = key;
+ * 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.
+ *
+ */
+ _main.default.prototype.storeItem = function(key, value) {
+ if (typeof value === 'undefined') {
+ console.log('You cannot store undefined variables using storeItem()');
+ }
+ var type = _typeof(value);
+ switch (type) {
+ case 'number':
+ case 'boolean':
+ value = value.toString();
+ break;
+ case 'object':
+ if (value instanceof _main.default.Color) {
+ type = 'p5.Color';
+ } else if (value instanceof _main.default.Vector) {
+ type = 'p5.Vector';
+ var coord = [value.x, value.y, value.z];
+ value = coord;
+ }
+ value = JSON.stringify(value);
+ break;
+ case 'string':
+ default:
+ break;
+ }
+
+ localStorage.setItem(key, value);
+ var typeKey = ''.concat(key, 'p5TypeID');
+ localStorage.setItem(typeKey, type);
+ };
+
+ /**
+ *
+ * Returns the value of an item that was stored in local storage
+ * using storeItem()
+ *
+ * @method getItem
+ * @for p5
+ * @param {String} key name that you wish to use to store in local storage
+ * @return {Number|Object|String|Boolean|p5.Color|p5.Vector} Value of stored item
+ *
+ * @example
+ *
+ * // Click the mouse to change
+ * // the color of the background
+ * // Once you have changed the color
+ * // it will stay changed even when you
+ * // reload the page.
+ *
+ * let myColor;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * myColor = getItem('myColor');
+ * }
+ *
+ * function draw() {
+ * if (myColor !== null) {
+ * background(myColor);
+ * }
+ * }
+ *
+ * function mousePressed() {
+ * myColor = color(random(255), random(255), random(255));
+ * 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.
+ *
+ */
+ _main.default.prototype.getItem = function(key) {
+ var value = localStorage.getItem(key);
+ var type = localStorage.getItem(''.concat(key, 'p5TypeID'));
+ if (typeof type === 'undefined') {
+ console.log(
+ 'Unable to determine type of item stored under '.concat(
+ key,
+ 'in local storage. Did you save the item with something other than setItem()?'
+ )
+ );
+ } else if (value !== null) {
+ switch (type) {
+ case 'number':
+ value = parseInt(value);
+ break;
+ case 'boolean':
+ value = value === 'true';
+ break;
+ case 'object':
+ value = JSON.parse(value);
+ break;
+ case 'p5.Color':
+ value = JSON.parse(value);
+ value = this.color.apply(this, _toConsumableArray(value.levels));
+ break;
+ case 'p5.Vector':
+ value = JSON.parse(value);
+ value = this.createVector.apply(this, _toConsumableArray(value));
+ break;
+ case 'string':
+ default:
+ break;
+ }
+ }
+ return value;
+ };
+
+ /**
+ *
+ * Clears all local storage items set with storeItem()
+ * for the current domain.
+ *
+ * @method clearStorage
+ * @for p5
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myNum = 10;
+ * let myBool = false;
+ * storeItem('myNum', myNum);
+ * storeItem('myBool', myBool);
+ * print(getItem('myNum')); // logs 10 to the console
+ * print(getItem('myBool')); // logs false to the console
+ * clearStorage();
+ * print(getItem('myNum')); // logs null to the console
+ * print(getItem('myBool')); // logs null to the console
+ * }
+ *
+ */
+ _main.default.prototype.clearStorage = function() {
+ localStorage.clear();
+ };
+
+ /**
+ *
+ * Removes an item that was stored with storeItem()
+ *
+ * @method removeItem
+ * @param {String} key
+ * @for p5
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myVar = 10;
+ * storeItem('myVar', myVar);
+ * print(getItem('myVar')); // logs 10 to the console
+ * removeItem('myVar');
+ * print(getItem('myVar')); // logs null to the console
+ * }
+ *
+ */
+ _main.default.prototype.removeItem = function(key) {
+ if (typeof key !== 'string') {
+ console.log(
+ 'The argument that you passed to removeItem() - '.concat(
+ key,
+ ' is not a string.'
+ )
+ );
+ }
+ localStorage.removeItem(key);
+ localStorage.removeItem(''.concat(key, 'p5TypeID'));
+ };
+ },
+ { '../core/main': 27 }
+ ],
+ 42: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Data
+ * @submodule Dictionary
+ * @for p5.TypedDict
+ * @requires core
+ *
+ * This module defines the p5 methods for the p5 Dictionary classes.
+ * The classes StringDict and NumberDict are for storing and working
+ * with key-value pairs.
+ */ /**
+ *
+ * Creates a new instance of p5.StringDict using the key-value pair
+ * or the object you provide.
+ *
+ * @method createStringDict
+ * @for p5
+ * @param {String} key
+ * @param {String} value
+ * @return {p5.StringDict}
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // logs true to console
+ *
+ * let anotherDictionary = createStringDict({ happy: 'coding' });
+ * print(anotherDictionary.hasKey('happy')); // logs true to console
+ * }
+ *
+ */ /**
+ * @method createStringDict
+ * @param {Object} object object
+ * @return {p5.StringDict}
+ */ _main.default.prototype.createStringDict = function(key, value) {
+ _main.default._validateParameters('createStringDict', arguments);
+ return new _main.default.StringDict(key, value);
+ };
+ /**
+ *
+ * Creates a new instance of p5.NumberDict using the key-value pair
+ * or object you provide.
+ *
+ * @method createNumberDict
+ * @for p5
+ * @param {Number} key
+ * @param {Number} value
+ * @return {p5.NumberDict}
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(100, 42);
+ * print(myDictionary.hasKey(100)); // logs true to console
+ *
+ * let anotherDictionary = createNumberDict({ 200: 84 });
+ * print(anotherDictionary.hasKey(200)); // logs true to console
+ * }
+ *
+ */
+ /**
+ * @method createNumberDict
+ * @param {Object} object object
+ * @return {p5.NumberDict}
+ */
+
+ _main.default.prototype.createNumberDict = function(key, value) {
+ _main.default._validateParameters('createNumberDict', arguments);
+ return new _main.default.NumberDict(key, value);
+ };
+
+ /**
+ *
+ * Base class for all p5.Dictionary types. Specifically
+ * typed Dictionary classes inherit from this class.
+ *
+ * @class p5.TypedDict
+ *
+ */
+
+ _main.default.TypedDict = function(key, value) {
+ if (key instanceof Object) {
+ this.data = key;
+ } else {
+ this.data = {};
+ this.data[key] = value;
+ }
+ return this;
+ };
+
+ /**
+ * Returns the number of key-value pairs currently stored in the Dictionary.
+ *
+ * @method size
+ * @return {Integer} the number of key-value pairs in the Dictionary
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(1, 10);
+ * myDictionary.create(2, 20);
+ * myDictionary.create(3, 30);
+ * print(myDictionary.size()); // logs 3 to the console
+ * }
+ *
+ *
+ */
+ _main.default.TypedDict.prototype.size = function() {
+ return Object.keys(this.data).length;
+ };
+
+ /**
+ * Returns true if the given key exists in the Dictionary,
+ * otherwise returns false.
+ *
+ * @method hasKey
+ * @param {Number|String} key that you want to look up
+ * @return {Boolean} whether that key exists in Dictionary
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // logs true to console
+ * }
+ *
+ *
+ */
+
+ _main.default.TypedDict.prototype.hasKey = function(key) {
+ return this.data.hasOwnProperty(key);
+ };
+
+ /**
+ * Returns the value stored at the given key.
+ *
+ * @method get
+ * @param {Number|String} the key you want to access
+ * @return {Number|String} the value stored at that key
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * let myValue = myDictionary.get('p5');
+ * print(myValue === 'js'); // logs true to console
+ * }
+ *
+ *
+ */
+
+ _main.default.TypedDict.prototype.get = function(key) {
+ if (this.data.hasOwnProperty(key)) {
+ return this.data[key];
+ } else {
+ console.log(''.concat(key, ' does not exist in this Dictionary'));
+ }
+ };
+
+ /**
+ * Updates the value associated with the given key in case it already exists
+ * in the Dictionary. Otherwise a new key-value pair is added.
+ *
+ * @method set
+ * @param {Number|String} key
+ * @param {Number|String} value
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.set('p5', 'JS');
+ * myDictionary.print(); // logs "key: p5 - value: JS" to console
+ * }
+ *
+ *
+ */
+
+ _main.default.TypedDict.prototype.set = function(key, value) {
+ if (this._validate(value)) {
+ this.data[key] = value;
+ } else {
+ console.log('Those values dont work for this dictionary type.');
+ }
+ };
+
+ /**
+ * private helper function to handle the user passing in objects
+ * during construction or calls to create()
+ */
+
+ _main.default.TypedDict.prototype._addObj = function(obj) {
+ for (var key in obj) {
+ this.set(key, obj[key]);
+ }
+ };
+
+ /**
+ * Creates a new key-value pair in the Dictionary.
+ *
+ * @method create
+ * @param {Number|String} key
+ * @param {Number|String} value
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * }
+ *
+ */
+ /**
+ * @method create
+ * @param {Object} obj key/value pair
+ */
+
+ _main.default.TypedDict.prototype.create = function(key, value) {
+ if (key instanceof Object && typeof value === 'undefined') {
+ this._addObj(key);
+ } else if (typeof key !== 'undefined') {
+ this.set(key, value);
+ } else {
+ console.log(
+ 'In order to create a new Dictionary entry you must pass ' +
+ 'an object or a key, value pair'
+ );
+ }
+ };
+
+ /**
+ * Removes all previously stored key-value pairs from the Dictionary.
+ *
+ * @method clear
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // prints 'true'
+ * myDictionary.clear();
+ * print(myDictionary.hasKey('p5')); // prints 'false'
+ * }
+ *
+ *
+ */
+
+ _main.default.TypedDict.prototype.clear = function() {
+ this.data = {};
+ };
+
+ /**
+ * Removes the key-value pair stored at the given key from the Dictionary.
+ *
+ * @method remove
+ * @param {Number|String} key for the pair to remove
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * myDictionary.remove('p5');
+ * myDictionary.print();
+ * // above logs "key: happy value: coding" to console
+ * }
+ *
+ *
+ */
+
+ _main.default.TypedDict.prototype.remove = function(key) {
+ if (this.data.hasOwnProperty(key)) {
+ delete this.data[key];
+ } else {
+ throw new Error(''.concat(key, ' does not exist in this Dictionary'));
+ }
+ };
+
+ /**
+ * Logs the set of items currently stored in the Dictionary to the console.
+ *
+ * @method print
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * }
+ *
+ *
+ */
+
+ _main.default.TypedDict.prototype.print = function() {
+ for (var item in this.data) {
+ console.log('key:'.concat(item, ' value:').concat(this.data[item]));
+ }
+ };
+
+ /**
+ * Converts the Dictionary into a CSV file for local download.
+ *
+ * @method saveTable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * createStringDict({
+ * john: 1940,
+ * paul: 1942,
+ * george: 1943,
+ * ringo: 1940
+ * }).saveTable('beatles');
+ * }
+ * }
+ *
+ *
+ */
+
+ _main.default.TypedDict.prototype.saveTable = function(filename) {
+ var output = '';
+
+ for (var key in this.data) {
+ output += ''.concat(key, ',').concat(this.data[key], '\n');
+ }
+
+ var blob = new Blob([output], { type: 'text/csv' });
+ _main.default.prototype.downloadFile(blob, filename || 'mycsv', 'csv');
+ };
+
+ /**
+ * Converts the Dictionary into a JSON file for local download.
+ *
+ * @method saveJSON
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * createStringDict({
+ * john: 1940,
+ * paul: 1942,
+ * george: 1943,
+ * ringo: 1940
+ * }).saveJSON('beatles');
+ * }
+ * }
+ *
+ *
+ */
+
+ _main.default.TypedDict.prototype.saveJSON = function(filename, opt) {
+ _main.default.prototype.saveJSON(this.data, filename, opt);
+ };
+
+ /**
+ * private helper function to ensure that the user passed in valid
+ * values for the Dictionary type
+ */
+
+ _main.default.TypedDict.prototype._validate = function(value) {
+ return true;
+ };
+
+ /**
+ *
+ * A simple Dictionary class for Strings.
+ *
+ * @class p5.StringDict
+ * @extends p5.TypedDict
+ *
+ */
+
+ _main.default.StringDict = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default.TypedDict.apply(this, args);
+ };
+
+ _main.default.StringDict.prototype = Object.create(
+ _main.default.TypedDict.prototype
+ );
+
+ _main.default.StringDict.prototype._validate = function(value) {
+ return typeof value === 'string';
+ };
+
+ /**
+ *
+ * A simple Dictionary class for Numbers.
+ *
+ * @class p5.NumberDict
+ * @extends p5.TypedDict
+ *
+ */
+
+ _main.default.NumberDict = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default.TypedDict.apply(this, args);
+ };
+
+ _main.default.NumberDict.prototype = Object.create(
+ _main.default.TypedDict.prototype
+ );
+
+ /**
+ * private helper function to ensure that the user passed in valid
+ * values for the Dictionary type
+ */
+
+ _main.default.NumberDict.prototype._validate = function(value) {
+ return typeof value === 'number';
+ };
+
+ /**
+ * Add the given number to the value currently stored at the given key.
+ * The sum then replaces the value previously stored in the Dictionary.
+ *
+ * @method add
+ * @param {Number} Key for the value you wish to add to
+ * @param {Number} Number to add to the value
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.add(2, 2);
+ * print(myDictionary.get(2)); // logs 7 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.NumberDict.prototype.add = function(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] += amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ };
+
+ /**
+ * Subtract the given number from the value currently stored at the given key.
+ * The difference then replaces the value previously stored in the Dictionary.
+ *
+ * @method sub
+ * @param {Number} Key for the value you wish to subtract from
+ * @param {Number} Number to subtract from the value
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.sub(2, 2);
+ * print(myDictionary.get(2)); // logs 3 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.NumberDict.prototype.sub = function(key, amount) {
+ this.add(key, -amount);
+ };
+
+ /**
+ * Multiply the given number with the value currently stored at the given key.
+ * The product then replaces the value previously stored in the Dictionary.
+ *
+ * @method mult
+ * @param {Number} Key for value you wish to multiply
+ * @param {Number} Amount to multiply the value by
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 4);
+ * myDictionary.mult(2, 2);
+ * print(myDictionary.get(2)); // logs 8 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.NumberDict.prototype.mult = function(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] *= amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ };
+
+ /**
+ * Divide the given number with the value currently stored at the given key.
+ * The quotient then replaces the value previously stored in the Dictionary.
+ *
+ * @method div
+ * @param {Number} Key for value you wish to divide
+ * @param {Number} Amount to divide the value by
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 8);
+ * myDictionary.div(2, 2);
+ * print(myDictionary.get(2)); // logs 4 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.NumberDict.prototype.div = function(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] /= amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ };
+
+ /**
+ * private helper function for finding lowest or highest value
+ * the argument 'flip' is used to flip the comparison arrow
+ * from 'less than' to 'greater than'
+ *
+ */
+
+ _main.default.NumberDict.prototype._valueTest = function(flip) {
+ if (Object.keys(this.data).length === 0) {
+ throw new Error(
+ 'Unable to search for a minimum or maximum value on an empty NumberDict'
+ );
+ } else if (Object.keys(this.data).length === 1) {
+ return this.data[Object.keys(this.data)[0]];
+ } else {
+ var result = this.data[Object.keys(this.data)[0]];
+ for (var key in this.data) {
+ if (this.data[key] * flip < result * flip) {
+ result = this.data[key];
+ }
+ }
+ return result;
+ }
+ };
+
+ /**
+ * Return the lowest number currently stored in the Dictionary.
+ *
+ * @method minValue
+ * @return {Number}
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let lowestValue = myDictionary.minValue(); // value is -10
+ * print(lowestValue);
+ * }
+ *
+ *
+ */
+
+ _main.default.NumberDict.prototype.minValue = function() {
+ return this._valueTest(1);
+ };
+
+ /**
+ * Return the highest number currently stored in the Dictionary.
+ *
+ * @method maxValue
+ * @return {Number}
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let highestValue = myDictionary.maxValue(); // value is 3
+ * print(highestValue);
+ * }
+ *
+ *
+ */
+
+ _main.default.NumberDict.prototype.maxValue = function() {
+ return this._valueTest(-1);
+ };
+
+ /**
+ * private helper function for finding lowest or highest key
+ * the argument 'flip' is used to flip the comparison arrow
+ * from 'less than' to 'greater than'
+ *
+ */
+
+ _main.default.NumberDict.prototype._keyTest = function(flip) {
+ if (Object.keys(this.data).length === 0) {
+ throw new Error('Unable to use minValue on an empty NumberDict');
+ } else if (Object.keys(this.data).length === 1) {
+ return Object.keys(this.data)[0];
+ } else {
+ var result = Object.keys(this.data)[0];
+ for (var i = 1; i < Object.keys(this.data).length; i++) {
+ if (Object.keys(this.data)[i] * flip < result * flip) {
+ result = Object.keys(this.data)[i];
+ }
+ }
+ return result;
+ }
+ };
+
+ /**
+ * Return the lowest key currently used in the Dictionary.
+ *
+ * @method minKey
+ * @return {Number}
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let lowestKey = myDictionary.minKey(); // value is 1.2
+ * print(lowestKey);
+ * }
+ *
+ *
+ */
+
+ _main.default.NumberDict.prototype.minKey = function() {
+ return this._keyTest(1);
+ };
+
+ /**
+ * Return the highest key currently used in the Dictionary.
+ *
+ * @method maxKey
+ * @return {Number}
+ * @example
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let highestKey = myDictionary.maxKey(); // value is 4
+ * print(highestKey);
+ * }
+ *
+ *
+ */
+
+ _main.default.NumberDict.prototype.maxKey = function() {
+ return this._keyTest(-1);
+ };
+ var _default = _main.default.TypedDict;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 43: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj &&
+ typeof Symbol === 'function' &&
+ obj.constructor === Symbol &&
+ obj !== Symbol.prototype
+ ? 'symbol'
+ : typeof obj;
+ };
+ }
+ return _typeof(obj);
+ }
+
+ /**
+ * Searches the page for an element with the given ID, class, or tag name (using the '#' or '.'
+ * prefixes to specify an ID or class respectively, and none for a tag) and returns it as
+ * a p5.Element. If a class or tag name is given with more than 1 element,
+ * only the first element will be returned.
+ * The DOM node itself can be accessed with .elt.
+ * Returns null if none found. You can also specify a container to search within.
+ *
+ * @method select
+ * @param {String} name id, class, or tag name of element to search for
+ * @param {String|p5.Element|HTMLElement} [container] id, p5.Element, or
+ * HTML element to search within
+ * @return {p5.Element|null} p5.Element containing node found
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * //translates canvas 50px down
+ * select('canvas').position(100, 100);
+ * }
+ *
+ *
+ * // these are all valid calls to select()
+ * let a = select('#moo');
+ * let b = select('#blah', '#myContainer');
+ * let c, e;
+ * if (b) {
+ * c = select('#foo', b);
+ * }
+ * let d = document.getElementById('beep');
+ * if (d) {
+ * e = select('p', d);
+ * }
+ * [a, b, c, d, e]; // unused
+ *
+ *
+ */
+ _main.default.prototype.select = function(e, p) {
+ _main.default._validateParameters('select', arguments);
+ var res = null;
+ var container = getContainer(p);
+ if (e[0] === '.') {
+ e = e.slice(1);
+ res = container.getElementsByClassName(e);
+ if (res.length) {
+ res = res[0];
+ } else {
+ res = null;
+ }
+ } else if (e[0] === '#') {
+ e = e.slice(1);
+ res = container.getElementById(e);
+ } else {
+ res = container.getElementsByTagName(e);
+ if (res.length) {
+ res = res[0];
+ } else {
+ res = null;
+ }
+ }
+ if (res) {
+ return this._wrapElement(res);
+ } else {
+ return null;
+ }
+ };
+
+ /**
+ * Searches the page for elements with the given class or tag name (using the '.' prefix
+ * to specify a class and no prefix for a tag) and returns them as p5.Elements
+ * in an array.
+ * The DOM node itself can be accessed with .elt.
+ * Returns an empty array if none found.
+ * You can also specify a container to search within.
+ *
+ * @method selectAll
+ * @param {String} name class or tag name of elements to search for
+ * @param {String} [container] id, p5.Element, or HTML element to search within
+ * @return {p5.Element[]} Array of p5.Elements containing nodes found
+ * @example
+ *
+ * function setup() {
+ * createButton('btn');
+ * createButton('2nd btn');
+ * createButton('3rd btn');
+ * let buttons = selectAll('button');
+ *
+ * for (let i = 0; i < buttons.length; i++) {
+ * buttons[i].size(100, 100);
+ * }
+ * }
+ *
+ *
+ * // these are all valid calls to selectAll()
+ * let a = selectAll('.moo');
+ * a = selectAll('div');
+ * a = selectAll('button', '#myContainer');
+ *
+ * let d = select('#container');
+ * a = selectAll('p', d);
+ *
+ * let f = document.getElementById('beep');
+ * a = select('.blah', f);
+ *
+ * a; // unused
+ *
+ *
+ */
+ _main.default.prototype.selectAll = function(e, p) {
+ _main.default._validateParameters('selectAll', arguments);
+ var arr = [];
+ var res;
+ var container = getContainer(p);
+ if (e[0] === '.') {
+ e = e.slice(1);
+ res = container.getElementsByClassName(e);
+ } else {
+ res = container.getElementsByTagName(e);
+ }
+ if (res) {
+ for (var j = 0; j < res.length; j++) {
+ var obj = this._wrapElement(res[j]);
+ arr.push(obj);
+ }
+ }
+ return arr;
+ };
+
+ /**
+ * Helper function for select and selectAll
+ */
+ function getContainer(p) {
+ var container = document;
+ if (typeof p === 'string' && p[0] === '#') {
+ p = p.slice(1);
+ container = document.getElementById(p) || document;
+ } else if (p instanceof _main.default.Element) {
+ container = p.elt;
+ } else if (p instanceof HTMLElement) {
+ container = p;
+ }
+ return container;
+ }
+
+ /**
+ * Helper function for getElement and getElements.
+ */
+ _main.default.prototype._wrapElement = function(elt) {
+ var children = Array.prototype.slice.call(elt.children);
+ if (elt.tagName === 'INPUT' && elt.type === 'checkbox') {
+ var converted = new _main.default.Element(elt, this);
+ converted.checked = function() {
+ if (arguments.length === 0) {
+ return this.elt.checked;
+ } else if (arguments[0]) {
+ this.elt.checked = true;
+ } else {
+ this.elt.checked = false;
+ }
+ return this;
+ };
+ return converted;
+ } else if (elt.tagName === 'VIDEO' || elt.tagName === 'AUDIO') {
+ return new _main.default.MediaElement(elt, this);
+ } else if (elt.tagName === 'SELECT') {
+ return this.createSelect(new _main.default.Element(elt, this));
+ } else if (
+ children.length > 0 &&
+ children.every(function(c) {
+ return c.tagName === 'INPUT' || c.tagName === 'LABEL';
+ })
+ ) {
+ return this.createRadio(new _main.default.Element(elt, this));
+ } else {
+ return new _main.default.Element(elt, this);
+ }
+ };
+
+ /**
+ * Removes all elements created by p5, except any canvas / graphics
+ * elements created by createCanvas or createGraphics.
+ * Event handlers are removed, and element is removed from the DOM.
+ * @method removeElements
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * createDiv('this is some text');
+ * createP('this is a paragraph');
+ * }
+ * function mousePressed() {
+ * removeElements(); // this will remove the div and p, not canvas
+ * }
+ *
+ *
+ */
+ _main.default.prototype.removeElements = function(e) {
+ _main.default._validateParameters('removeElements', arguments);
+ for (var i = 0; i < this._elements.length; i++) {
+ if (!(this._elements[i].elt instanceof HTMLCanvasElement)) {
+ this._elements[i].remove();
+ }
+ }
+ };
+
+ /**
+ * The .changed() function is called when the value of an
+ * element changes.
+ * This can be used to attach an element specific event listener.
+ *
+ * @method changed
+ * @param {Function|Boolean} fxn function to be fired when the value of
+ * an element changes.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('pear');
+ * sel.option('kiwi');
+ * sel.option('grape');
+ * sel.changed(mySelectEvent);
+ * }
+ *
+ * function mySelectEvent() {
+ * let item = sel.value();
+ * background(200);
+ * text("it's a " + item + '!', 50, 50);
+ * }
+ *
+ *
+ *
+ * let checkbox;
+ * let cnv;
+ *
+ * function setup() {
+ * checkbox = createCheckbox(' fill');
+ * checkbox.changed(changeFill);
+ * cnv = createCanvas(100, 100);
+ * cnv.position(0, 30);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * ellipse(50, 50, 50, 50);
+ * }
+ *
+ * function changeFill() {
+ * if (checkbox.checked()) {
+ * fill(0);
+ * } else {
+ * noFill();
+ * }
+ * }
+ *
+ *
+ * @alt
+ * dropdown: pear, kiwi, grape. When selected text "its a" + selection shown.
+ *
+ */
+ _main.default.Element.prototype.changed = function(fxn) {
+ _main.default.Element._adjustListener('change', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .input() function is called when any user input is
+ * detected with an element. The input event is often used
+ * to detect keystrokes in a input element, or changes on a
+ * slider element. This can be used to attach an element specific
+ * event listener.
+ *
+ * @method input
+ * @param {Function|Boolean} fxn function to be fired when any user input is
+ * detected within the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * // Open your console to see the output
+ * function setup() {
+ * let inp = createInput('');
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent() {
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ *
+ * @alt
+ * no display.
+ *
+ */
+ _main.default.Element.prototype.input = function(fxn) {
+ _main.default.Element._adjustListener('input', fxn, this);
+ return this;
+ };
+
+ /**
+ * Helpers for create methods.
+ */
+ function addElement(elt, pInst, media) {
+ var node = pInst._userNode ? pInst._userNode : document.body;
+ node.appendChild(elt);
+ var c = media
+ ? new _main.default.MediaElement(elt, pInst)
+ : new _main.default.Element(elt, pInst);
+ pInst._elements.push(c);
+ return c;
+ }
+
+ /**
+ * Creates a <div></div> element in the DOM with given inner HTML.
+ *
+ * @method createDiv
+ * @param {String} [html] inner HTML for element created
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * createDiv('this is some text');
+ *
+ */
+
+ /**
+ * Creates a <p></p> element in the DOM with given inner HTML. Used
+ * for paragraph length text.
+ *
+ * @method createP
+ * @param {String} [html] inner HTML for element created
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * createP('this is some text');
+ *
+ */
+
+ /**
+ * Creates a <span></span> element in the DOM with given inner HTML.
+ *
+ * @method createSpan
+ * @param {String} [html] inner HTML for element created
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * createSpan('this is some text');
+ *
+ */
+ var tags = ['div', 'p', 'span'];
+ tags.forEach(function(tag) {
+ var method = 'create' + tag.charAt(0).toUpperCase() + tag.slice(1);
+ _main.default.prototype[method] = function(html) {
+ var elt = document.createElement(tag);
+ elt.innerHTML = typeof html === 'undefined' ? '' : html;
+ return addElement(elt, this);
+ };
+ });
+
+ /**
+ * Creates an <img> element in the DOM with given src and
+ * alternate text.
+ *
+ * @method createImg
+ * @param {String} src src path or url for image
+ * @param {String} alt alternate text to be used if image does not load. You can use also an empty string (`""`) if that an image is not intended to be viewed.
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * createImg(
+ * 'https://p5js.org/assets/img/asterisk-01.png',
+ * 'the p5 magenta asterisk'
+ * );
+ *
+ */
+ /**
+ * @method createImg
+ * @param {String} src
+ * @param {String} alt
+ * @param {String} crossOrigin crossOrigin property of the `img` element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with `canvas`. if an empty string(`""`) is passed, CORS is not used
+ * @param {Function} [successCallback] callback to be called once image data is loaded
+ * @return {p5.Element} pointer to p5.Element holding created node
+ */
+ _main.default.prototype.createImg = function() {
+ _main.default._validateParameters('createImg', arguments);
+ var elt = document.createElement('img');
+ var args = arguments;
+ var self;
+ elt.alt = args[1];
+ if (args.length > 2 && typeof args[2] === 'string') {
+ elt.crossOrigin = args[2];
+ }
+ elt.addEventListener('load', function() {
+ self.width = elt.offsetWidth || elt.width;
+ self.height = elt.offsetHeight || elt.height;
+ var last = args[args.length - 1];
+ if (typeof last === 'function') last();
+ });
+ elt.src = args[0];
+ return (self = addElement(elt, this));
+ };
+
+ /**
+ * Creates an <a></a> element in the DOM for including a hyperlink.
+ *
+ * @method createA
+ * @param {String} href url of page to link to
+ * @param {String} html inner html of link element to display
+ * @param {String} [target] target where new link should open,
+ * could be _blank, _self, _parent, _top.
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * createA('http://p5js.org/', 'this is a link');
+ *
+ */
+ _main.default.prototype.createA = function(href, html, target) {
+ _main.default._validateParameters('createA', arguments);
+ var elt = document.createElement('a');
+ elt.href = href;
+ elt.innerHTML = html;
+ if (target) elt.target = target;
+ return addElement(elt, this);
+ };
+
+ /** INPUT **/
+
+ /**
+ * Creates a slider <input></input> element in the DOM.
+ * Use .size() to set the display length of the slider.
+ *
+ * @method createSlider
+ * @param {Number} min minimum value of the slider
+ * @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
+ * @example
+ *
+ * let slider;
+ * function setup() {
+ * slider = createSlider(0, 255, 100);
+ * slider.position(10, 10);
+ * slider.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * let val = slider.value();
+ * background(val);
+ * }
+ *
+ *
+ *
+ * let slider;
+ * function setup() {
+ * colorMode(HSB);
+ * slider = createSlider(0, 360, 60, 40);
+ * slider.position(10, 10);
+ * slider.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * let val = slider.value();
+ * background(val, 100, 100, 1);
+ * }
+ *
+ */
+ _main.default.prototype.createSlider = function(min, max, value, step) {
+ _main.default._validateParameters('createSlider', arguments);
+ var elt = document.createElement('input');
+ elt.type = 'range';
+ elt.min = min;
+ elt.max = max;
+ if (step === 0) {
+ elt.step = 0.000000000000000001; // smallest valid step
+ } else if (step) {
+ elt.step = step;
+ }
+ if (typeof value === 'number') elt.value = value;
+ return addElement(elt, this);
+ };
+
+ /**
+ * Creates a <button></button> element in the DOM.
+ * Use .size() to set the display size of the button.
+ * Use .mousePressed() to specify behavior on press.
+ *
+ * @method createButton
+ * @param {String} label label displayed on the button
+ * @param {String} [value] value of the button
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * let button;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(0);
+ * button = createButton('click me');
+ * button.position(19, 19);
+ * button.mousePressed(changeBG);
+ * }
+ *
+ * function changeBG() {
+ * let val = random(255);
+ * background(val);
+ * }
+ *
+ */
+ _main.default.prototype.createButton = function(label, value) {
+ _main.default._validateParameters('createButton', arguments);
+ var elt = document.createElement('button');
+ elt.innerHTML = label;
+ if (value) elt.value = value;
+ return addElement(elt, this);
+ };
+
+ /**
+ * Creates a checkbox <input></input> element in the DOM.
+ * Calling .checked() on a checkbox returns if it is checked or not
+ *
+ * @method createCheckbox
+ * @param {String} [label] label displayed after checkbox
+ * @param {boolean} [value] value of the checkbox; checked is true, unchecked is false
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * let checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('label', false);
+ * checkbox.changed(myCheckedEvent);
+ * }
+ *
+ * function myCheckedEvent() {
+ * if (this.checked()) {
+ * console.log('Checking!');
+ * } else {
+ * console.log('Unchecking!');
+ * }
+ * }
+ *
+ */
+ _main.default.prototype.createCheckbox = function() {
+ _main.default._validateParameters('createCheckbox', arguments);
+ var elt = document.createElement('div');
+ var checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ elt.appendChild(checkbox);
+ //checkbox must be wrapped in p5.Element before label so that label appears after
+ var self = addElement(elt, this);
+ self.checked = function() {
+ var cb = self.elt.getElementsByTagName('input')[0];
+ if (cb) {
+ if (arguments.length === 0) {
+ return cb.checked;
+ } else if (arguments[0]) {
+ cb.checked = true;
+ } else {
+ cb.checked = false;
+ }
+ }
+ return self;
+ };
+ this.value = function(val) {
+ self.value = val;
+ return this;
+ };
+ if (arguments[0]) {
+ var ran = Math.random()
+ .toString(36)
+ .slice(2);
+ var label = document.createElement('label');
+ checkbox.setAttribute('id', ran);
+ label.htmlFor = ran;
+ self.value(arguments[0]);
+ label.appendChild(document.createTextNode(arguments[0]));
+ elt.appendChild(label);
+ }
+ if (arguments[1]) {
+ checkbox.checked = true;
+ }
+ return self;
+ };
+
+ /**
+ * Creates a dropdown menu <select></select> element in the DOM.
+ * It also helps to assign select-box methods to p5.Element when selecting existing select box
+ * @method createSelect
+ * @param {boolean} [multiple] true if dropdown should support multiple selections
+ * @return {p5.Element}
+ * @example
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('pear');
+ * sel.option('kiwi');
+ * sel.option('grape');
+ * sel.changed(mySelectEvent);
+ * }
+ *
+ * function mySelectEvent() {
+ * let item = sel.value();
+ * background(200);
+ * text('It is a ' + item + '!', 50, 50);
+ * }
+ *
+ */
+ /**
+ * @method createSelect
+ * @param {Object} existing DOM select element
+ * @return {p5.Element}
+ */
+
+ _main.default.prototype.createSelect = function() {
+ _main.default._validateParameters('createSelect', arguments);
+ var elt, self;
+ var arg = arguments[0];
+ if (_typeof(arg) === 'object' && arg.elt.nodeName === 'SELECT') {
+ self = arg;
+ elt = this.elt = arg.elt;
+ } else {
+ elt = document.createElement('select');
+ if (arg && typeof arg === 'boolean') {
+ elt.setAttribute('multiple', 'true');
+ }
+ self = addElement(elt, this);
+ }
+ self.option = function(name, value) {
+ var index;
+ //see if there is already an option with this name
+ for (var i = 0; i < this.elt.length; i++) {
+ if (this.elt[i].innerHTML === name) {
+ index = i;
+ break;
+ }
+ }
+ //if there is an option with this name we will modify it
+ if (index !== undefined) {
+ //if the user passed in false then delete that option
+ if (value === false) {
+ this.elt.remove(index);
+ } else {
+ //otherwise if the name and value are the same then change both
+ if (this.elt[index].innerHTML === this.elt[index].value) {
+ this.elt[index].innerHTML = this.elt[index].value = value;
+ //otherwise just change the value
+ } else {
+ this.elt[index].value = value;
+ }
+ }
+ } else {
+ //if it doesn't exist make it
+ var opt = document.createElement('option');
+ opt.innerHTML = name;
+ if (arguments.length > 1) opt.value = value;
+ else opt.value = name;
+ elt.appendChild(opt);
+ this._pInst._elements.push(opt);
+ }
+ };
+ self.selected = function(value) {
+ var arr = [],
+ i;
+ if (arguments.length > 0) {
+ for (i = 0; i < this.elt.length; i++) {
+ if (value.toString() === this.elt[i].value) {
+ this.elt.selectedIndex = i;
+ }
+ }
+ return this;
+ } else {
+ if (this.elt.getAttribute('multiple')) {
+ for (i = 0; i < this.elt.selectedOptions.length; i++) {
+ arr.push(this.elt.selectedOptions[i].value);
+ }
+ return arr;
+ } else {
+ return this.elt.value;
+ }
+ }
+ };
+ return self;
+ };
+
+ /**
+ * Creates a radio button <input></input> element in the DOM.
+ * The .option() method can be used to set options for the radio after it is
+ * created. The .value() method will return the currently selected option.
+ *
+ * @method createRadio
+ * @param {String} [divId] the id and name of the created div and input field respectively
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * let radio;
+ *
+ * function setup() {
+ * radio = createRadio();
+ * radio.option('black');
+ * radio.option('white');
+ * radio.option('gray');
+ * radio.style('width', '60px');
+ * textAlign(CENTER);
+ * fill(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * let val = radio.value();
+ * background(val);
+ * text(val, width / 2, height / 2);
+ * }
+ *
+ *
+ * let radio;
+ *
+ * function setup() {
+ * radio = createRadio();
+ * radio.option('apple', 1);
+ * radio.option('bread', 2);
+ * radio.option('juice', 3);
+ * radio.style('width', '60px');
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let val = radio.value();
+ * if (val) {
+ * text('item cost is $' + val, width / 2, height / 2);
+ * }
+ * }
+ *
+ */
+ _main.default.prototype.createRadio = function(existing_radios) {
+ _main.default._validateParameters('createRadio', arguments);
+ // do some prep by counting number of radios on page
+ var radios = document.querySelectorAll('input[type=radio]');
+ var count = 0;
+ if (radios.length > 1) {
+ var length = radios.length;
+ var prev = radios[0].name;
+ var current = radios[1].name;
+ count = 1;
+ for (var i = 1; i < length; i++) {
+ current = radios[i].name;
+ if (prev !== current) {
+ count++;
+ }
+ prev = current;
+ }
+ } else if (radios.length === 1) {
+ count = 1;
+ }
+ // see if we got an existing set of radios from callee
+ var elt, self;
+ if (_typeof(existing_radios) === 'object') {
+ // use existing elements
+ self = existing_radios;
+ elt = this.elt = existing_radios.elt;
+ } else {
+ // create a set of radio buttons
+ elt = document.createElement('div');
+ self = addElement(elt, this);
+ }
+ // setup member functions
+ self._getInputChildrenArray = function() {
+ return Array.prototype.slice.call(this.elt.children).filter(function(c) {
+ return c.tagName === 'INPUT';
+ });
+ };
+
+ var times = -1;
+ self.option = function(name, value) {
+ var opt = document.createElement('input');
+ opt.type = 'radio';
+ opt.innerHTML = name;
+ if (value) opt.value = value;
+ else opt.value = name;
+ opt.setAttribute('name', 'defaultradio' + count);
+ elt.appendChild(opt);
+ if (name) {
+ times++;
+ var label = document.createElement('label');
+ opt.setAttribute('id', 'defaultradio' + count + '-' + times);
+ label.htmlFor = 'defaultradio' + count + '-' + times;
+ label.appendChild(document.createTextNode(name));
+ elt.appendChild(label);
+ }
+ return opt;
+ };
+ self.selected = function(value) {
+ var i;
+ var inputChildren = self._getInputChildrenArray();
+ if (value) {
+ for (i = 0; i < inputChildren.length; i++) {
+ if (inputChildren[i].value === value) inputChildren[i].checked = true;
+ }
+ return this;
+ } else {
+ for (i = 0; i < inputChildren.length; i++) {
+ if (inputChildren[i].checked === true) return inputChildren[i].value;
+ }
+ }
+ };
+ self.value = function(value) {
+ var i;
+ var inputChildren = self._getInputChildrenArray();
+ if (value) {
+ for (i = 0; i < inputChildren.length; i++) {
+ if (inputChildren[i].value === value) inputChildren[i].checked = true;
+ }
+ return this;
+ } else {
+ for (i = 0; i < inputChildren.length; i++) {
+ if (inputChildren[i].checked === true) return inputChildren[i].value;
+ }
+ return '';
+ }
+ };
+ return self;
+ };
+
+ /**
+ * 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.
+ *
+ * @method createColorPicker
+ * @param {String|p5.Color} [value] default color of element
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ *
+ * let inp1, inp2;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background('grey');
+ * inp1 = createColorPicker('#ff0000');
+ * inp2 = createColorPicker(color('yellow'));
+ * inp1.input(setShade1);
+ * inp2.input(setShade2);
+ * setMidShade();
+ * }
+ *
+ * function setMidShade() {
+ * // Finding a shade between the two
+ * let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);
+ * fill(commonShade);
+ * rect(20, 20, 60, 60);
+ * }
+ *
+ * function setShade1() {
+ * setMidShade();
+ * console.log('You are choosing shade 1 to be : ', this.value());
+ * }
+ * function setShade2() {
+ * setMidShade();
+ * console.log('You are choosing shade 2 to be : ', this.value());
+ * }
+ *
+ *
+ */
+ _main.default.prototype.createColorPicker = function(value) {
+ _main.default._validateParameters('createColorPicker', arguments);
+ var elt = document.createElement('input');
+ var self;
+ elt.type = 'color';
+ if (value) {
+ if (value instanceof _main.default.Color) {
+ elt.value = value.toString('#rrggbb');
+ } else {
+ _main.default.prototype._colorMode = 'rgb';
+ _main.default.prototype._colorMaxes = {
+ rgb: [255, 255, 255, 255],
+ hsb: [360, 100, 100, 1],
+ hsl: [360, 100, 100, 1]
+ };
+
+ elt.value = _main.default.prototype.color(value).toString('#rrggbb');
+ }
+ } else {
+ elt.value = '#000000';
+ }
+ self = addElement(elt, this);
+ // Method to return a p5.Color object for the given color.
+ self.color = function() {
+ if (value.mode) {
+ _main.default.prototype._colorMode = value.mode;
+ }
+ if (value.maxes) {
+ _main.default.prototype._colorMaxes = value.maxes;
+ }
+ return _main.default.prototype.color(this.elt.value);
+ };
+ return self;
+ };
+
+ /**
+ * Creates an <input></input> element in the DOM for text input.
+ * Use .size() to set the display length of the box.
+ *
+ * @method createInput
+ * @param {String} [value] default value of the input box
+ * @param {String} [type] type of text, ie text, password etc. Defaults to text
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * function setup() {
+ * let inp = createInput('');
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent() {
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ */
+ _main.default.prototype.createInput = function(value, type) {
+ _main.default._validateParameters('createInput', arguments);
+ var elt = document.createElement('input');
+ elt.type = type ? type : 'text';
+ if (value) elt.value = value;
+ return addElement(elt, this);
+ };
+
+ /**
+ * Creates an <input></input> element in the DOM of type 'file'.
+ * This allows users to select local files for use in a sketch.
+ *
+ * @method createFileInput
+ * @param {Function} [callback] callback function for when a file loaded
+ * @param {String} [multiple] optional to allow multiple files selected
+ * @return {p5.Element} pointer to p5.Element holding created DOM element
+ * @example
+ *
+ * let input;
+ * let img;
+ *
+ * function setup() {
+ * input = createFileInput(handleFile);
+ * input.position(0, 0);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * function handleFile(file) {
+ * print(file);
+ * if (file.type === 'image') {
+ * img = createImg(file.data, '');
+ * img.hide();
+ * } else {
+ * img = null;
+ * }
+ * }
+ *
+ */
+ _main.default.prototype.createFileInput = function(callback, multiple) {
+ _main.default._validateParameters('createFileInput', arguments);
+ // Function to handle when a file is selected
+ // We're simplifying life and assuming that we always
+ // want to load every selected file
+ function handleFileSelect(evt) {
+ // These are the files
+ var files = evt.target.files;
+ // Load each one and trigger a callback
+ for (var i = 0; i < files.length; i++) {
+ var f = files[i];
+ _main.default.File._load(f, callback);
+ }
+ }
+ // Is the file stuff supported?
+ if (window.File && window.FileReader && window.FileList && window.Blob) {
+ // Yup, we're ok and make an input file selector
+ var elt = document.createElement('input');
+ elt.type = 'file';
+
+ // If we get a second argument that evaluates to true
+ // then we are looking for multiple files
+ if (multiple) {
+ // Anything gets the job done
+ elt.multiple = 'multiple';
+ }
+
+ // Now let's handle when a file was selected
+ elt.addEventListener('change', handleFileSelect, false);
+ return addElement(elt, this);
+ } else {
+ console.log(
+ 'The File APIs are not fully supported in this browser. Cannot create element.'
+ );
+ }
+ };
+
+ /** VIDEO STUFF **/
+
+ function createMedia(pInst, type, src, callback) {
+ var elt = document.createElement(type);
+
+ // allow src to be empty
+ src = src || '';
+ if (typeof src === 'string') {
+ src = [src];
+ }
+ for (var i = 0; i < src.length; i++) {
+ var source = document.createElement('source');
+ source.src = src[i];
+ elt.appendChild(source);
+ }
+ if (typeof callback !== 'undefined') {
+ var callbackHandler = function callbackHandler() {
+ callback();
+ elt.removeEventListener('canplaythrough', callbackHandler);
+ };
+ elt.addEventListener('canplaythrough', callbackHandler);
+ }
+
+ var c = addElement(elt, pInst, true);
+ c.loadedmetadata = false;
+ // set width and height onload metadata
+ elt.addEventListener('loadedmetadata', function() {
+ c.width = elt.videoWidth;
+ c.height = elt.videoHeight;
+ //c.elt.playbackRate = s;
+ // set elt width and height if not set
+ if (c.elt.width === 0) c.elt.width = elt.videoWidth;
+ if (c.elt.height === 0) c.elt.height = elt.videoHeight;
+ if (c.presetPlaybackRate) {
+ c.elt.playbackRate = c.presetPlaybackRate;
+ delete c.presetPlaybackRate;
+ }
+ c.loadedmetadata = true;
+ });
+
+ return c;
+ }
+ /**
+ * Creates an HTML5 <video> element in the DOM for simple playback
+ * of audio/video. Shown by default, can be hidden with .hide()
+ * and drawn into canvas using video(). The first parameter
+ * can be either a single string path to a video file, or an array of string
+ * paths to different formats of the same video. This is useful for ensuring
+ * that your video can play across different browsers, as each supports
+ * different formats. See this
+ * page for further information about supported formats.
+ *
+ * @method createVideo
+ * @param {String|String[]} src path to a video file, or array of paths for
+ * supporting different browsers
+ * @param {Function} [callback] callback function to be called upon
+ * 'canplaythrough' event fire, that is, when the
+ * browser can play the media, and estimates that
+ * enough data has been loaded to play the media
+ * up to its end without having to stop for
+ * further buffering of content
+ * @return {p5.MediaElement} pointer to video p5.Element
+ * @example
+ *
+ * let vid;
+ * function setup() {
+ * noCanvas();
+ *
+ * vid = createVideo(
+ * ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
+ * vidLoad
+ * );
+ *
+ * vid.size(100, 100);
+ * }
+ *
+ * // This function is called when the video loads
+ * function vidLoad() {
+ * vid.loop();
+ * vid.volume(0);
+ * }
+ *
+ */
+ _main.default.prototype.createVideo = function(src, callback) {
+ _main.default._validateParameters('createVideo', arguments);
+ return createMedia(this, 'video', src, callback);
+ };
+
+ /** AUDIO STUFF **/
+
+ /**
+ * Creates a hidden HTML5 <audio> element in the DOM for simple audio
+ * playback. The first parameter can be either a single string path to a
+ * audio file, or an array of string paths to different formats of the same
+ * audio. This is useful for ensuring that your audio can play across
+ * different browsers, as each supports different formats.
+ * See this
+ * page for further information about supported formats.
+ *
+ * @method createAudio
+ * @param {String|String[]} [src] path to an audio file, or array of paths
+ * for supporting different browsers
+ * @param {Function} [callback] callback function to be called upon
+ * 'canplaythrough' event fire, that is, when the
+ * browser can play the media, and estimates that
+ * enough data has been loaded to play the media
+ * up to its end without having to stop for
+ * further buffering of content
+ * @return {p5.MediaElement} pointer to audio p5.Element
+ * @example
+ *
+ * let ele;
+ * function setup() {
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * // here we set the element to autoplay
+ * // The element will play as soon
+ * // as it is able to do so.
+ * ele.autoplay(true);
+ * }
+ *
+ */
+ _main.default.prototype.createAudio = function(src, callback) {
+ _main.default._validateParameters('createAudio', arguments);
+ return createMedia(this, 'audio', src, callback);
+ };
+
+ /** CAMERA STUFF **/
+
+ /**
+ * @property {String} VIDEO
+ * @final
+ * @category Constants
+ */
+ _main.default.prototype.VIDEO = 'video';
+ /**
+ * @property {String} AUDIO
+ * @final
+ * @category Constants
+ */
+ _main.default.prototype.AUDIO = 'audio';
+
+ // from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+ // Older browsers might not implement mediaDevices at all, so we set an empty object first
+ if (navigator.mediaDevices === undefined) {
+ navigator.mediaDevices = {};
+ }
+
+ // Some browsers partially implement mediaDevices. We can't just assign an object
+ // with getUserMedia as it would overwrite existing properties.
+ // Here, we will just add the getUserMedia property if it's missing.
+ if (navigator.mediaDevices.getUserMedia === undefined) {
+ navigator.mediaDevices.getUserMedia = function(constraints) {
+ // First get ahold of the legacy getUserMedia, if present
+ var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+ // Some browsers just don't implement it - return a rejected promise with an error
+ // to keep a consistent interface
+ if (!getUserMedia) {
+ return Promise.reject(
+ new Error('getUserMedia is not implemented in this browser')
+ );
+ }
+
+ // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+ return new Promise(function(resolve, reject) {
+ getUserMedia.call(navigator, constraints, resolve, reject);
+ });
+ };
+ }
+
+ /**
+ * Creates a new HTML5 <video> element that contains the audio/video
+ * feed from a webcam. The element is separate from the canvas and is
+ * displayed by default. The element can be hidden using .hide(). The feed
+ * can be drawn onto the canvas using image(). The loadedmetadata property can
+ * be used to detect when the element has fully loaded (see second example).
+ * More specific properties of the feed can be passing in a Constraints object.
+ * See the
+ * W3C
+ * spec for possible properties. Note that not all of these are supported
+ * by all browsers.
+ * Security note: A new browser security specification requires that getUserMedia,
+ * which is behind createCapture(), only works when you're running the code locally,
+ * or on HTTPS. Learn more here
+ * and here.
+ *
+ * @method createCapture
+ * @param {String|Constant|Object} type type of capture, either VIDEO or
+ * AUDIO if none specified, default both,
+ * or a Constraints object
+ * @param {Function} [callback] function to be called once
+ * stream has loaded
+ * @return {p5.Element} capture video p5.Element
+ * @example
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(480, 480);
+ * capture = createCapture(VIDEO);
+ * capture.hide();
+ * }
+ *
+ * function draw() {
+ * image(capture, 0, 0, width, width * capture.height / capture.width);
+ * filter(INVERT);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(480, 120);
+ * let constraints = {
+ * video: {
+ * mandatory: {
+ * minWidth: 1280,
+ * minHeight: 720
+ * },
+ * optional: [{ maxFrameRate: 10 }]
+ * },
+ * audio: true
+ * };
+ * createCapture(constraints, function(stream) {
+ * console.log(stream);
+ * });
+ * }
+ *
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(640, 480);
+ * capture = createCapture(VIDEO);
+ * }
+ * function draw() {
+ * background(0);
+ * if (capture.loadedmetadata) {
+ * let c = capture.get(0, 0, 100, 100);
+ * image(c, 0, 0);
+ * }
+ * }
+ *
+ */
+ _main.default.prototype.createCapture = function() {
+ _main.default._validateParameters('createCapture', arguments);
+ var useVideo = true;
+ var useAudio = true;
+ var constraints;
+ var cb;
+ for (var i = 0; i < arguments.length; i++) {
+ if (arguments[i] === _main.default.prototype.VIDEO) {
+ useAudio = false;
+ } else if (arguments[i] === _main.default.prototype.AUDIO) {
+ useVideo = false;
+ } else if (_typeof(arguments[i]) === 'object') {
+ constraints = arguments[i];
+ } else if (typeof arguments[i] === 'function') {
+ cb = arguments[i];
+ }
+ }
+ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+ var elt = document.createElement('video');
+ // required to work in iOS 11 & up:
+ elt.setAttribute('playsinline', '');
+
+ if (!constraints) {
+ constraints = { video: useVideo, audio: useAudio };
+ }
+
+ navigator.mediaDevices.getUserMedia(constraints).then(
+ function(stream) {
+ try {
+ if ('srcObject' in elt) {
+ elt.srcObject = stream;
+ } else {
+ elt.src = window.URL.createObjectURL(stream);
+ }
+ } catch (err) {
+ elt.src = stream;
+ }
+ },
+ function(e) {
+ console.log(e);
+ }
+ );
+ } else {
+ throw 'getUserMedia not supported in this browser';
+ }
+ var c = addElement(elt, this, true);
+ c.loadedmetadata = false;
+ // set width and height onload metadata
+ elt.addEventListener('loadedmetadata', function() {
+ elt.play();
+ if (elt.width) {
+ c.width = elt.videoWidth = elt.width;
+ c.height = elt.videoHeight = elt.height;
+ } else {
+ c.width = c.elt.width = elt.videoWidth;
+ c.height = c.elt.height = elt.videoHeight;
+ }
+ c.loadedmetadata = true;
+ if (cb) {
+ cb(elt.srcObject);
+ }
+ });
+ return c;
+ };
+
+ /**
+ * Creates element with given tag in the DOM with given content.
+ *
+ * @method createElement
+ * @param {String} tag tag for the new element
+ * @param {String} [content] html content to be inserted into the element
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * createElement('h2', 'im an h2 p5.element!');
+ *
+ */
+ _main.default.prototype.createElement = function(tag, content) {
+ _main.default._validateParameters('createElement', arguments);
+ var elt = document.createElement(tag);
+ if (typeof content !== 'undefined') {
+ elt.innerHTML = content;
+ }
+ return addElement(elt, this);
+ };
+
+ // =============================================================================
+ // p5.Element additions
+ // =============================================================================
+ /**
+ *
+ * Adds specified class to the element.
+ *
+ * @for p5.Element
+ * @method addClass
+ * @param {String} class name of class to add
+ * @chainable
+ * @example
+ *
+ * let div = createDiv('div');
+ * div.addClass('myClass');
+ *
+ */
+ _main.default.Element.prototype.addClass = function(c) {
+ if (this.elt.className) {
+ if (!this.hasClass(c)) {
+ this.elt.className = this.elt.className + ' ' + c;
+ }
+ } else {
+ this.elt.className = c;
+ }
+ return this;
+ };
+
+ /**
+ *
+ * Removes specified class from the element.
+ *
+ * @method removeClass
+ * @param {String} class name of class to remove
+ * @chainable
+ * @example
+ *
+ * // In this example, a class is set when the div is created
+ * // and removed when mouse is pressed. This could link up
+ * // with a CSS style rule to toggle style properties.
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('myClass');
+ * }
+ *
+ * function mousePressed() {
+ * div.removeClass('myClass');
+ * }
+ *
+ */
+ _main.default.Element.prototype.removeClass = function(c) {
+ // Note: Removing a class that does not exist does NOT throw an error in classList.remove method
+ this.elt.classList.remove(c);
+ return this;
+ };
+
+ /**
+ *
+ * Checks if specified class already set to element
+ *
+ * @method hasClass
+ * @returns {boolean} a boolean value if element has specified class
+ * @param c {String} class name of class to check
+ * @example
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('show');
+ * }
+ *
+ * function mousePressed() {
+ * if (div.hasClass('show')) {
+ * div.addClass('show');
+ * } else {
+ * div.removeClass('show');
+ * }
+ * }
+ *
+ */
+ _main.default.Element.prototype.hasClass = function(c) {
+ return this.elt.classList.contains(c);
+ };
+
+ /**
+ *
+ * Toggles element class
+ *
+ * @method toggleClass
+ * @param c {String} class name to toggle
+ * @chainable
+ * @example
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('show');
+ * }
+ *
+ * function mousePressed() {
+ * div.toggleClass('show');
+ * }
+ *
+ */
+ _main.default.Element.prototype.toggleClass = function(c) {
+ // classList also has a toggle() method, but we cannot use that yet as support is unclear.
+ // See https://github.com/processing/p5.js/issues/3631
+ // this.elt.classList.toggle(c);
+ if (this.elt.classList.contains(c)) {
+ this.elt.classList.remove(c);
+ } else {
+ this.elt.classList.add(c);
+ }
+ return this;
+ };
+
+ /**
+ *
+ * Attaches the element as a child to the parent specified.
+ * Accepts either a string ID, DOM node, or p5.Element.
+ * If no argument is specified, an array of children DOM nodes is returned.
+ *
+ * @method child
+ * @returns {Node[]} an array of child nodes
+ * @example
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div0.child(div1); // use p5.Element
+ *
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div1.id('apples');
+ * div0.child('apples'); // use id
+ *
+ *
+ * // this example assumes there is a div already on the page
+ * // with id "myChildDiv"
+ * let div0 = createDiv('this is the parent');
+ * let elt = document.getElementById('myChildDiv');
+ * div0.child(elt); // use element from page
+ *
+ */
+ /**
+ * @method child
+ * @param {String|p5.Element} [child] the ID, DOM node, or p5.Element
+ * to add to the current element
+ * @chainable
+ */
+ _main.default.Element.prototype.child = function(c) {
+ if (typeof c === 'undefined') {
+ return this.elt.childNodes;
+ }
+ if (typeof c === 'string') {
+ if (c[0] === '#') {
+ c = c.substring(1);
+ }
+ c = document.getElementById(c);
+ } else if (c instanceof _main.default.Element) {
+ c = c.elt;
+ }
+ this.elt.appendChild(c);
+ return this;
+ };
+
+ /**
+ * 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.
+ *
+ * @method center
+ * @param {String} [align] passing 'vertical', 'horizontal' aligns element accordingly
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * let div = createDiv('').size(10, 10);
+ * div.style('background-color', 'orange');
+ * div.center();
+ * }
+ *
+ */
+ _main.default.Element.prototype.center = function(align) {
+ var style = this.elt.style.display;
+ var hidden = this.elt.style.display === 'none';
+ var parentHidden = this.parent().style.display === 'none';
+ var pos = { x: this.elt.offsetLeft, y: this.elt.offsetTop };
+
+ if (hidden) this.show();
+
+ this.elt.style.display = 'block';
+ this.position(0, 0);
+
+ if (parentHidden) this.parent().style.display = 'block';
+
+ var wOffset = Math.abs(this.parent().offsetWidth - this.elt.offsetWidth);
+ var hOffset = Math.abs(this.parent().offsetHeight - this.elt.offsetHeight);
+ var y = pos.y;
+ var x = pos.x;
+
+ if (align === 'both' || align === undefined) {
+ this.position(wOffset / 2, hOffset / 2);
+ } else if (align === 'horizontal') {
+ this.position(wOffset / 2, y);
+ } else if (align === 'vertical') {
+ this.position(x, hOffset / 2);
+ }
+
+ this.style('display', style);
+
+ if (hidden) this.hide();
+
+ if (parentHidden) this.parent().style.display = 'none';
+
+ return this;
+ };
+
+ /**
+ *
+ * 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.
+ * If no arguments are given, returns
+ * the inner HTML of the element.
+ *
+ * @for p5.Element
+ * @method html
+ * @returns {String} the inner HTML of the element
+ * @example
+ *
+ * let div = createDiv('').size(100, 100);
+ * div.html('hi');
+ *
+ *
+ * let div = createDiv('Hello ').size(100, 100);
+ * div.html('World', true);
+ *
+ */
+ /**
+ * @method html
+ * @param {String} [html] the HTML to be placed inside the element
+ * @param {boolean} [append] whether to append HTML to existing
+ * @chainable
+ */
+ _main.default.Element.prototype.html = function() {
+ if (arguments.length === 0) {
+ return this.elt.innerHTML;
+ } else if (arguments[1]) {
+ this.elt.innerHTML += arguments[0];
+ return this;
+ } else {
+ this.elt.innerHTML = arguments[0];
+ return this;
+ }
+ };
+
+ /**
+ *
+ * Sets the position of the element relative to (0, 0) of the
+ * window. Essentially, sets position:absolute and left and top
+ * properties of style. If no arguments given returns the x and y position
+ * of the element in an object.
+ *
+ * @method position
+ * @returns {Object} the x and y position of the element in an object
+ * @example
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // positions canvas 50px to the right and 100px
+ * // below upper left corner of the window
+ * cnv.position(50, 100);
+ * }
+ *
+ */
+ /**
+ * @method position
+ * @param {Number} [x] x-position relative to upper left of window
+ * @param {Number} [y] y-position relative to upper left of window
+ * @chainable
+ */
+ _main.default.Element.prototype.position = function() {
+ if (arguments.length === 0) {
+ return { x: this.elt.offsetLeft, y: this.elt.offsetTop };
+ } else {
+ this.elt.style.position = 'absolute';
+ this.elt.style.left = arguments[0] + 'px';
+ this.elt.style.top = arguments[1] + 'px';
+ this.x = arguments[0];
+ this.y = arguments[1];
+ return this;
+ }
+ };
+
+ /* Helper method called by p5.Element.style() */
+ _main.default.Element.prototype._translate = function() {
+ this.elt.style.position = 'absolute';
+ // save out initial non-translate transform styling
+ var transform = '';
+ if (this.elt.style.transform) {
+ transform = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
+ transform = transform.replace(/translate[X-Z]?\(.*\)/g, '');
+ }
+ if (arguments.length === 2) {
+ this.elt.style.transform =
+ 'translate(' + arguments[0] + 'px, ' + arguments[1] + 'px)';
+ } else if (arguments.length > 2) {
+ this.elt.style.transform =
+ 'translate3d(' +
+ arguments[0] +
+ 'px,' +
+ arguments[1] +
+ 'px,' +
+ arguments[2] +
+ 'px)';
+ if (arguments.length === 3) {
+ this.elt.parentElement.style.perspective = '1000px';
+ } else {
+ this.elt.parentElement.style.perspective = arguments[3] + 'px';
+ }
+ }
+ // add any extra transform styling back on end
+ this.elt.style.transform += transform;
+ return this;
+ };
+
+ /* Helper method called by p5.Element.style() */
+ _main.default.Element.prototype._rotate = function() {
+ // save out initial non-rotate transform styling
+ var transform = '';
+ if (this.elt.style.transform) {
+ transform = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+ transform = transform.replace(/rotate[X-Z]?\(.*\)/g, '');
+ }
+
+ if (arguments.length === 1) {
+ this.elt.style.transform = 'rotate(' + arguments[0] + 'deg)';
+ } else if (arguments.length === 2) {
+ this.elt.style.transform =
+ 'rotate(' + arguments[0] + 'deg, ' + arguments[1] + 'deg)';
+ } else if (arguments.length === 3) {
+ this.elt.style.transform = 'rotateX(' + arguments[0] + 'deg)';
+ this.elt.style.transform += 'rotateY(' + arguments[1] + 'deg)';
+ this.elt.style.transform += 'rotateZ(' + arguments[2] + 'deg)';
+ }
+ // add remaining transform back on
+ this.elt.style.transform += transform;
+ return this;
+ };
+
+ /**
+ * 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
+ * appropriately.
+ *
+ * @method style
+ * @param {String} property property to be set
+ * @returns {String} value of property
+ * @example
+ *
+ * let myDiv = createDiv('I like pandas.');
+ * myDiv.style('font-size', '18px');
+ * myDiv.style('color', '#ff0000');
+ *
+ *
+ * let col = color(25, 23, 200, 50);
+ * let button = createButton('button');
+ * button.style('background-color', col);
+ * button.position(10, 10);
+ *
+ *
+ * let myDiv;
+ * function setup() {
+ * background(200);
+ * myDiv = createDiv('I like gray.');
+ * myDiv.position(20, 20);
+ * }
+ *
+ * function draw() {
+ * myDiv.style('font-size', mouseX + 'px');
+ * }
+ *
+ */
+ /**
+ * @method style
+ * @param {String} property
+ * @param {String|Number|p5.Color} value value to assign to property
+ * @return {String} current value of property, if no value is given as second argument
+ * @chainable
+ */
+ _main.default.Element.prototype.style = function(prop, val) {
+ var self = this;
+
+ if (val instanceof _main.default.Color) {
+ val =
+ 'rgba(' +
+ val.levels[0] +
+ ',' +
+ val.levels[1] +
+ ',' +
+ val.levels[2] +
+ ',' +
+ val.levels[3] / 255 +
+ ')';
+ }
+
+ if (typeof val === 'undefined') {
+ // input provided as single line string
+ if (prop.indexOf(':') === -1) {
+ var styles = window.getComputedStyle(self.elt);
+ var style = styles.getPropertyValue(prop);
+ return style;
+ } else {
+ var attrs = prop.split(';');
+ for (var i = 0; i < attrs.length; i++) {
+ var parts = attrs[i].split(':');
+ if (parts[0] && parts[1]) {
+ this.elt.style[parts[0].trim()] = parts[1].trim();
+ }
+ }
+ }
+ } else {
+ // input provided as key,val pair
+ this.elt.style[prop] = val;
+ if (
+ prop === 'width' ||
+ prop === 'height' ||
+ prop === 'left' ||
+ prop === 'top'
+ ) {
+ var numVal = val.replace(/\D+/g, '');
+ this[prop] = parseInt(numVal, 10);
+ }
+ }
+ return this;
+ };
+
+ /**
+ *
+ * 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.
+ *
+ * @method attribute
+ * @return {String} value of attribute
+ *
+ * @example
+ *
+ * let myDiv = createDiv('I like pandas.');
+ * myDiv.attribute('align', 'center');
+ *
+ */
+ /**
+ * @method attribute
+ * @param {String} attr attribute to set
+ * @param {String} value value to assign to attribute
+ * @chainable
+ */
+ _main.default.Element.prototype.attribute = function(attr, value) {
+ //handling for checkboxes and radios to ensure options get
+ //attributes not divs
+ if (
+ this.elt.firstChild != null &&
+ (this.elt.firstChild.type === 'checkbox' ||
+ this.elt.firstChild.type === 'radio')
+ ) {
+ if (typeof value === 'undefined') {
+ return this.elt.firstChild.getAttribute(attr);
+ } else {
+ for (var i = 0; i < this.elt.childNodes.length; i++) {
+ this.elt.childNodes[i].setAttribute(attr, value);
+ }
+ }
+ } else if (typeof value === 'undefined') {
+ return this.elt.getAttribute(attr);
+ } else {
+ this.elt.setAttribute(attr, value);
+ return this;
+ }
+ };
+
+ /**
+ *
+ * Removes an attribute on the specified element.
+ *
+ * @method removeAttribute
+ * @param {String} attr attribute to remove
+ * @chainable
+ *
+ * @example
+ *
+ * let button;
+ * let checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('enable', true);
+ * checkbox.changed(enableButton);
+ * button = createButton('button');
+ * button.position(10, 10);
+ * }
+ *
+ * function enableButton() {
+ * if (this.checked()) {
+ * // Re-enable the button
+ * button.removeAttribute('disabled');
+ * } else {
+ * // Disable the button
+ * button.attribute('disabled', '');
+ * }
+ * }
+ *
+ */
+ _main.default.Element.prototype.removeAttribute = function(attr) {
+ if (
+ this.elt.firstChild != null &&
+ (this.elt.firstChild.type === 'checkbox' ||
+ this.elt.firstChild.type === 'radio')
+ ) {
+ for (var i = 0; i < this.elt.childNodes.length; i++) {
+ this.elt.childNodes[i].removeAttribute(attr);
+ }
+ }
+ this.elt.removeAttribute(attr);
+ return this;
+ };
+
+ /**
+ * Either returns the value of the element if no arguments
+ * given, or sets the value of the element.
+ *
+ * @method value
+ * @return {String|Number} value of the element
+ * @example
+ *
+ * // gets the value
+ * let inp;
+ * function setup() {
+ * inp = createInput('');
+ * }
+ *
+ * function mousePressed() {
+ * print(inp.value());
+ * }
+ *
+ *
+ * // sets the value
+ * let inp;
+ * function setup() {
+ * inp = createInput('myValue');
+ * }
+ *
+ * function mousePressed() {
+ * inp.value('myValue');
+ * }
+ *
+ */
+ /**
+ * @method value
+ * @param {String|Number} value
+ * @chainable
+ */
+ _main.default.Element.prototype.value = function() {
+ if (arguments.length > 0) {
+ this.elt.value = arguments[0];
+ return this;
+ } else {
+ if (this.elt.type === 'range') {
+ return parseFloat(this.elt.value);
+ } else return this.elt.value;
+ }
+ };
+
+ /**
+ *
+ * Shows the current element. Essentially, setting display:block for the style.
+ *
+ * @method show
+ * @chainable
+ * @example
+ *
+ * let div = createDiv('div');
+ * div.style('display', 'none');
+ * div.show(); // turns display to block
+ *
+ */
+ _main.default.Element.prototype.show = function() {
+ this.elt.style.display = 'block';
+ return this;
+ };
+
+ /**
+ * Hides the current element. Essentially, setting display:none for the style.
+ *
+ * @method hide
+ * @chainable
+ * @example
+ *
+ * let div = createDiv('this is a div');
+ * div.hide();
+ *
+ */
+ _main.default.Element.prototype.hide = function() {
+ this.elt.style.display = 'none';
+ return this;
+ };
+
+ /**
+ *
+ * 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
+ * to call the function after the element has finished loading.
+ *
+ * @method size
+ * @return {Object} the width and height of the element in an object
+ * @example
+ *
+ * let div = createDiv('this is a div');
+ * div.size(100, 100);
+ * let img = createImg(
+ * 'assets/rockies.jpg',
+ * 'A tall mountain with a small forest and field in front of it on a sunny day',
+ * '',
+ * () => {
+ * img.size(10, AUTO);
+ * }
+ * );
+ *
+ */
+ /**
+ * @method size
+ * @param {Number|Constant} w width of the element, either AUTO, or a number
+ * @param {Number|Constant} [h] height of the element, either AUTO, or a number
+ * @chainable
+ */
+ _main.default.Element.prototype.size = function(w, h) {
+ if (arguments.length === 0) {
+ return { width: this.elt.offsetWidth, height: this.elt.offsetHeight };
+ } else {
+ var aW = w;
+ var aH = h;
+ var AUTO = _main.default.prototype.AUTO;
+ if (aW !== AUTO || aH !== AUTO) {
+ if (aW === AUTO) {
+ aW = h * this.width / this.height;
+ } else if (aH === AUTO) {
+ aH = w * this.height / this.width;
+ }
+ // set diff for cnv vs normal div
+ if (this.elt instanceof HTMLCanvasElement) {
+ var j = {};
+ var k = this.elt.getContext('2d');
+ var prop;
+ for (prop in k) {
+ j[prop] = k[prop];
+ }
+ this.elt.setAttribute('width', aW * this._pInst._pixelDensity);
+ this.elt.setAttribute('height', aH * this._pInst._pixelDensity);
+ this.elt.style.width = aW + 'px';
+ this.elt.style.height = aH + 'px';
+ this._pInst.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
+ for (prop in j) {
+ this.elt.getContext('2d')[prop] = j[prop];
+ }
+ } else {
+ this.elt.style.width = aW + 'px';
+ this.elt.style.height = aH + 'px';
+ this.elt.width = aW;
+ this.elt.height = aH;
+ }
+
+ this.width = this.elt.offsetWidth;
+ this.height = this.elt.offsetHeight;
+
+ if (this._pInst && this._pInst._curElement) {
+ // main canvas associated with p5 instance
+ if (this._pInst._curElement.elt === this.elt) {
+ this._pInst._setProperty('width', this.elt.offsetWidth);
+ this._pInst._setProperty('height', this.elt.offsetHeight);
+ }
+ }
+ }
+ return this;
+ }
+ };
+
+ /**
+ * Removes the element and deregisters all listeners.
+ * @method remove
+ * @example
+ *
+ * let myDiv = createDiv('this is some text');
+ * myDiv.remove();
+ *
+ */
+ _main.default.Element.prototype.remove = function() {
+ // deregister events
+ for (var ev in this._events) {
+ this.elt.removeEventListener(ev, this._events[ev]);
+ }
+ if (this.elt && this.elt.parentNode) {
+ this.elt.parentNode.removeChild(this.elt);
+ }
+ delete this;
+ };
+
+ /**
+ * Registers a callback that gets called every time a file that is
+ * dropped on the element has been loaded.
+ * p5 will load every dropped file into memory and pass it as a p5.File object to the callback.
+ * Multiple files dropped at the same time will result in multiple calls to the callback.
+ *
+ * You can optionally pass a second callback which will be registered to the raw
+ * drop event.
+ * The callback will thus be provided the original
+ * DragEvent.
+ * Dropping multiple files at the same time will trigger the second callback once per drop,
+ * whereas the first callback will trigger for each loaded file.
+ *
+ * @method drop
+ * @param {Function} callback callback to receive loaded file, called for each file dropped.
+ * @param {Function} [fxn] callback triggered once when files are dropped with the drop event.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('drop file', width / 2, height / 2);
+ * c.drop(gotFile);
+ * }
+ *
+ * function gotFile(file) {
+ * background(200);
+ * text('received file:', width / 2, height / 2);
+ * text(file.name, width / 2, height / 2 + 50);
+ * }
+ *
+ *
+ *
+ * let img;
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('drop image', width / 2, height / 2);
+ * c.drop(gotFile);
+ * }
+ *
+ * function draw() {
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * function gotFile(file) {
+ * img = createImg(file.data, '').hide();
+ * }
+ *
+ *
+ * @alt
+ * Canvas turns into whatever image is dragged/dropped onto it.
+ */
+ _main.default.Element.prototype.drop = function(callback, fxn) {
+ // Is the file stuff supported?
+ if (window.File && window.FileReader && window.FileList && window.Blob) {
+ if (!this._dragDisabled) {
+ this._dragDisabled = true;
+
+ var preventDefault = function preventDefault(evt) {
+ evt.preventDefault();
+ };
+
+ // If you want to be able to drop you've got to turn off
+ // a lot of default behavior.
+ // avoid `attachListener` here, since it overrides other handlers.
+ this.elt.addEventListener('dragover', preventDefault);
+
+ // If this is a drag area we need to turn off the default behavior
+ this.elt.addEventListener('dragleave', preventDefault);
+ }
+
+ // Deal with the files
+ _main.default.Element._attachListener(
+ 'drop',
+ function(evt) {
+ evt.preventDefault();
+ // Call the second argument as a callback that receives the raw drop event
+ if (typeof fxn === 'function') {
+ fxn.call(this, evt);
+ }
+ // A FileList
+ var files = evt.dataTransfer.files;
+
+ // Load each one and trigger the callback
+ for (var i = 0; i < files.length; i++) {
+ var f = files[i];
+ _main.default.File._load(f, callback);
+ }
+ },
+ this
+ );
+ } else {
+ console.log('The File APIs are not fully supported in this browser.');
+ }
+
+ return this;
+ };
+
+ // =============================================================================
+ // p5.MediaElement additions
+ // =============================================================================
+
+ /**
+ * Extends p5.Element to handle audio and video. In addition to the methods
+ * of p5.Element, it also contains methods for controlling media. It is not
+ * called directly, but p5.MediaElements are created by calling createVideo,
+ * createAudio, and createCapture.
+ *
+ * @class p5.MediaElement
+ * @constructor
+ * @param {String} elt DOM node that is wrapped
+ */
+ _main.default.MediaElement = function(elt, pInst) {
+ _main.default.Element.call(this, elt, pInst);
+
+ var self = this;
+ this.elt.crossOrigin = 'anonymous';
+
+ this._prevTime = 0;
+ this._cueIDCounter = 0;
+ this._cues = [];
+ this._pixelsState = this;
+ this._pixelDensity = 1;
+ this._modified = false;
+
+ /**
+ * Path to the media element source.
+ *
+ * @property src
+ * @return {String} src
+ * @example
+ *
+ * let ele;
+ *
+ * function setup() {
+ * background(250);
+ *
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * //We'll set up our example so that
+ * //when you click on the text,
+ * //an alert box displays the MediaElement's
+ * //src field.
+ * textAlign(CENTER);
+ * text('Click Me!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * //Show our p5.MediaElement's src field
+ * alert(ele.src);
+ * }
+ * }
+ *
+ */
+ Object.defineProperty(self, 'src', {
+ get: function get() {
+ var firstChildSrc = self.elt.children[0].src;
+ var srcVal = self.elt.src === window.location.href ? '' : self.elt.src;
+ var ret = firstChildSrc === window.location.href ? srcVal : firstChildSrc;
+ return ret;
+ },
+ set: function set(newValue) {
+ for (var i = 0; i < self.elt.children.length; i++) {
+ self.elt.removeChild(self.elt.children[i]);
+ }
+ var source = document.createElement('source');
+ source.src = newValue;
+ elt.appendChild(source);
+ self.elt.src = newValue;
+ self.modified = true;
+ }
+ });
+
+ // private _onended callback, set by the method: onended(callback)
+ self._onended = function() {};
+ self.elt.onended = function() {
+ self._onended(self);
+ };
+ };
+ _main.default.MediaElement.prototype = Object.create(
+ _main.default.Element.prototype
+ );
+
+ /**
+ * Play an HTML5 media element.
+ *
+ * @method play
+ * @chainable
+ * @example
+ *
+ * let ele;
+ *
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to Play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * //Here we call the play() function on
+ * //the p5.MediaElement we created above.
+ * //This will start the audio sample.
+ * ele.play();
+ *
+ * background(200);
+ * text('You clicked Play!', width / 2, height / 2);
+ * }
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.play = function() {
+ if (this.elt.currentTime === this.elt.duration) {
+ this.elt.currentTime = 0;
+ }
+ var promise;
+ if (this.elt.readyState > 1) {
+ promise = this.elt.play();
+ } else {
+ // in Chrome, playback cannot resume after being stopped and must reload
+ this.elt.load();
+ promise = this.elt.play();
+ }
+ if (promise && promise.catch) {
+ promise.catch(function(e) {
+ console.log('WARN: Element play method raised an error asynchronously', e);
+ });
+ }
+ return this;
+ };
+
+ /**
+ * Stops an HTML5 media element (sets current time to zero).
+ *
+ * @method stop
+ * @chainable
+ * @example
+ *
+ * //This example both starts
+ * //and stops a sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * //if the sample is currently playing
+ * //calling the stop() function on
+ * //our p5.MediaElement will stop
+ * //it and reset its current
+ * //time to 0 (i.e. it will start
+ * //at the beginning the next time
+ * //you play it)
+ * ele.stop();
+ *
+ * sampleIsPlaying = false;
+ * text('Click to play!', width / 2, height / 2);
+ * } else {
+ * //loop our sound element until we
+ * //call ele.stop() on it.
+ * ele.loop();
+ *
+ * sampleIsPlaying = true;
+ * text('Click to stop!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.stop = function() {
+ this.elt.pause();
+ this.elt.currentTime = 0;
+ return this;
+ };
+
+ /**
+ * Pauses an HTML5 media element.
+ *
+ * @method pause
+ * @chainable
+ * @example
+ *
+ * //This example both starts
+ * //and pauses a sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * //Calling pause() on our
+ * //p5.MediaElement will stop it
+ * //playing, but when we call the
+ * //loop() or play() functions
+ * //the sample will start from
+ * //where we paused it.
+ * ele.pause();
+ *
+ * sampleIsPlaying = false;
+ * text('Click to resume!', width / 2, height / 2);
+ * } else {
+ * //loop our sound element until we
+ * //call ele.pause() on it.
+ * ele.loop();
+ *
+ * sampleIsPlaying = true;
+ * text('Click to pause!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.pause = function() {
+ this.elt.pause();
+ return this;
+ };
+
+ /**
+ * Set 'loop' to true for an HTML5 media element, and starts playing.
+ *
+ * @method loop
+ * @chainable
+ * @example
+ *
+ * //Clicking the canvas will loop
+ * //the audio sample until the user
+ * //clicks again to stop it
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsLooping = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to loop!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (!sampleIsLooping) {
+ * //loop our sound element until we
+ * //call ele.stop() on it.
+ * ele.loop();
+ *
+ * sampleIsLooping = true;
+ * text('Click to stop!', width / 2, height / 2);
+ * } else {
+ * ele.stop();
+ *
+ * sampleIsLooping = false;
+ * text('Click to loop!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.loop = function() {
+ this.elt.setAttribute('loop', true);
+ this.play();
+ return this;
+ };
+ /**
+ * Set 'loop' to false for an HTML5 media element. Element will stop
+ * when it reaches the end.
+ *
+ * @method noLoop
+ * @chainable
+ * @example
+ *
+ * //This example both starts
+ * //and stops loop of sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * ele.noLoop();
+ * text('No more Loops!', width / 2, height / 2);
+ * } else {
+ * ele.loop();
+ * sampleIsPlaying = true;
+ * text('Click to stop looping!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ *
+ */
+ _main.default.MediaElement.prototype.noLoop = function() {
+ this.elt.setAttribute('loop', false);
+ return this;
+ };
+
+ /**
+ * Set HTML5 media element to autoplay or not.
+ *
+ * @method autoplay
+ * @param {Boolean} autoplay whether the element should autoplay
+ * @chainable
+ */
+ _main.default.MediaElement.prototype.autoplay = function(val) {
+ this.elt.setAttribute('autoplay', val);
+ return this;
+ };
+
+ /**
+ * Sets volume for this HTML5 media element. If no argument is given,
+ * returns the current volume.
+ *
+ * @method volume
+ * @return {Number} current volume
+ *
+ * @example
+ *
+ * let ele;
+ * function setup() {
+ * // p5.MediaElement objects are usually created
+ * // by calling the createAudio(), createVideo(),
+ * // and createCapture() functions.
+ * // In this example we create
+ * // a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to Play!', width / 2, height / 2);
+ * }
+ * function mouseClicked() {
+ * // Here we call the volume() function
+ * // on the sound element to set its volume
+ * // Volume must be between 0.0 and 1.0
+ * ele.volume(0.2);
+ * ele.play();
+ * background(200);
+ * text('You clicked Play!', width / 2, height / 2);
+ * }
+ *
+ *
+ * let audio;
+ * let counter = 0;
+ *
+ * function loaded() {
+ * audio.play();
+ * }
+ *
+ * function setup() {
+ * audio = createAudio('assets/lucky_dragons.mp3', loaded);
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (counter === 0) {
+ * background(0, 255, 0);
+ * text('volume(0.9)', width / 2, height / 2);
+ * } else if (counter === 1) {
+ * background(255, 255, 0);
+ * text('volume(0.5)', width / 2, height / 2);
+ * } else if (counter === 2) {
+ * background(255, 0, 0);
+ * text('volume(0.1)', width / 2, height / 2);
+ * }
+ * }
+ *
+ * function mousePressed() {
+ * counter++;
+ * if (counter === 0) {
+ * audio.volume(0.9);
+ * } else if (counter === 1) {
+ * audio.volume(0.5);
+ * } else if (counter === 2) {
+ * audio.volume(0.1);
+ * } else {
+ * counter = 0;
+ * audio.volume(0.9);
+ * }
+ * }
+ *
+ *
+ */
+ /**
+ * @method volume
+ * @param {Number} val volume between 0.0 and 1.0
+ * @chainable
+ */
+ _main.default.MediaElement.prototype.volume = function(val) {
+ if (typeof val === 'undefined') {
+ return this.elt.volume;
+ } else {
+ this.elt.volume = val;
+ }
+ };
+
+ /**
+ * If no arguments are given, returns the current playback speed of the
+ * element. The speed parameter sets the speed where 2.0 will play the
+ * element twice as fast, 0.5 will play at half the speed, and -1 will play
+ * the element in normal speed in reverse.(Note that not all browsers support
+ * backward playback and even if they do, playback might not be smooth.)
+ *
+ * @method speed
+ * @return {Number} current playback speed of the element
+ *
+ * @example
+ *
+ * //Clicking the canvas will loop
+ * //the audio sample until the user
+ * //clicks again to stop it
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ * let button;
+ *
+ * function setup() {
+ * createCanvas(710, 400);
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * ele.loop();
+ * background(200);
+ *
+ * button = createButton('2x speed');
+ * button.position(100, 68);
+ * button.mousePressed(twice_speed);
+ *
+ * button = createButton('half speed');
+ * button.position(200, 68);
+ * button.mousePressed(half_speed);
+ *
+ * button = createButton('reverse play');
+ * button.position(300, 68);
+ * button.mousePressed(reverse_speed);
+ *
+ * button = createButton('STOP');
+ * button.position(400, 68);
+ * button.mousePressed(stop_song);
+ *
+ * button = createButton('PLAY!');
+ * button.position(500, 68);
+ * button.mousePressed(play_speed);
+ * }
+ *
+ * function twice_speed() {
+ * ele.speed(2);
+ * }
+ *
+ * function half_speed() {
+ * ele.speed(0.5);
+ * }
+ *
+ * function reverse_speed() {
+ * ele.speed(-1);
+ * }
+ *
+ * function stop_song() {
+ * ele.stop();
+ * }
+ *
+ * function play_speed() {
+ * ele.play();
+ * }
+ *
+ */
+ /**
+ * @method speed
+ * @param {Number} speed speed multiplier for element playback
+ * @chainable
+ */
+ _main.default.MediaElement.prototype.speed = function(val) {
+ if (typeof val === 'undefined') {
+ return this.presetPlaybackRate || this.elt.playbackRate;
+ } else {
+ if (this.loadedmetadata) {
+ this.elt.playbackRate = val;
+ } else {
+ this.presetPlaybackRate = val;
+ }
+ }
+ };
+
+ /**
+ * If no arguments are given, returns the current time of the element.
+ * If an argument is given the current time of the element is set to it.
+ *
+ * @method time
+ * @return {Number} current time (in seconds)
+ *
+ * @example
+ *
+ * let ele;
+ * let beginning = true;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('start at beginning', width / 2, height / 2);
+ * }
+ *
+ * // this function fires with click anywhere
+ * function mousePressed() {
+ * if (beginning === true) {
+ * // here we start the sound at the beginning
+ * // time(0) is not necessary here
+ * // as this produces the same result as
+ * // play()
+ * ele.play().time(0);
+ * background(200);
+ * text('jump 2 sec in', width / 2, height / 2);
+ * beginning = false;
+ * } else {
+ * // here we jump 2 seconds into the sound
+ * ele.play().time(2);
+ * background(250);
+ * text('start at beginning', width / 2, height / 2);
+ * beginning = true;
+ * }
+ * }
+ *
+ */
+ /**
+ * @method time
+ * @param {Number} time time to jump to (in seconds)
+ * @chainable
+ */
+ _main.default.MediaElement.prototype.time = function(val) {
+ if (typeof val === 'undefined') {
+ return this.elt.currentTime;
+ } else {
+ this.elt.currentTime = val;
+ return this;
+ }
+ };
+
+ /**
+ * Returns the duration of the HTML5 media element.
+ *
+ * @method duration
+ * @return {Number} duration
+ *
+ * @example
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/doorbell.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to know the duration!', 10, 25, 70, 80);
+ * }
+ * function mouseClicked() {
+ * ele.play();
+ * background(200);
+ * //ele.duration dislpays the duration
+ * text(ele.duration() + ' seconds', width / 2, height / 2);
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.duration = function() {
+ return this.elt.duration;
+ };
+ _main.default.MediaElement.prototype.pixels = [];
+ _main.default.MediaElement.prototype._ensureCanvas = function() {
+ if (!this.canvas) {
+ this.canvas = document.createElement('canvas');
+ this.drawingContext = this.canvas.getContext('2d');
+ this.setModified(true);
+ }
+ if (this.loadedmetadata) {
+ // wait for metadata for w/h
+ if (this.canvas.width !== this.elt.width) {
+ this.canvas.width = this.elt.width;
+ this.canvas.height = this.elt.height;
+ this.width = this.canvas.width;
+ this.height = this.canvas.height;
+ }
+
+ this.drawingContext.drawImage(
+ this.elt,
+ 0,
+ 0,
+ this.canvas.width,
+ this.canvas.height
+ );
+
+ this.setModified(true);
+ }
+ };
+ _main.default.MediaElement.prototype.loadPixels = function() {
+ this._ensureCanvas();
+ return _main.default.Renderer2D.prototype.loadPixels.apply(this, arguments);
+ };
+ _main.default.MediaElement.prototype.updatePixels = function(x, y, w, h) {
+ if (this.loadedmetadata) {
+ // wait for metadata
+ this._ensureCanvas();
+ _main.default.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
+ }
+ this.setModified(true);
+ return this;
+ };
+ _main.default.MediaElement.prototype.get = function() {
+ this._ensureCanvas();
+ return _main.default.Renderer2D.prototype.get.apply(this, arguments);
+ };
+ _main.default.MediaElement.prototype._getPixel = function() {
+ this.loadPixels();
+ return _main.default.Renderer2D.prototype._getPixel.apply(this, arguments);
+ };
+
+ _main.default.MediaElement.prototype.set = function(x, y, imgOrCol) {
+ if (this.loadedmetadata) {
+ // wait for metadata
+ this._ensureCanvas();
+ _main.default.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
+ this.setModified(true);
+ }
+ };
+ _main.default.MediaElement.prototype.copy = function() {
+ this._ensureCanvas();
+ _main.default.prototype.copy.apply(this, arguments);
+ };
+ _main.default.MediaElement.prototype.mask = function() {
+ this.loadPixels();
+ this.setModified(true);
+ _main.default.Image.prototype.mask.apply(this, arguments);
+ };
+ /**
+ * helper method for web GL mode to figure out if the element
+ * has been modified and might need to be re-uploaded to texture
+ * memory between frames.
+ * @method isModified
+ * @private
+ * @return {boolean} a boolean indicating whether or not the
+ * image has been updated or modified since last texture upload.
+ */
+ _main.default.MediaElement.prototype.isModified = function() {
+ return this._modified;
+ };
+ /**
+ * helper method for web GL mode to indicate that an element has been
+ * changed or unchanged since last upload. gl texture upload will
+ * set this value to false after uploading the texture; or might set
+ * it to true if metadata has become available but there is no actual
+ * texture data available yet..
+ * @method setModified
+ * @param {boolean} val sets whether or not the element has been
+ * modified.
+ * @private
+ */
+ _main.default.MediaElement.prototype.setModified = function(value) {
+ this._modified = value;
+ };
+ /**
+ * Schedule an event to be called when the audio or video
+ * element reaches the end. If the element is looping,
+ * this will not be called. The element is passed in
+ * as the argument to the onended callback.
+ *
+ * @method onended
+ * @param {Function} callback function to call when the
+ * soundfile has ended. The
+ * media element will be passed
+ * in as the argument to the
+ * callback.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * let audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ * audioEl.onended(sayDone);
+ * }
+ *
+ * function sayDone(elt) {
+ * alert('done playing ' + elt.src);
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.onended = function(callback) {
+ this._onended = callback;
+ return this;
+ };
+
+ /*** CONNECT TO WEB AUDIO API / p5.sound.js ***/
+
+ /**
+ * Send the audio output of this element to a specified audioNode or
+ * p5.sound object. If no element is provided, connects to p5's master
+ * output. That connection is established when this method is first called.
+ * All connections are removed by the .disconnect() method.
+ *
+ * This method is meant to be used with the p5.sound.js addon library.
+ *
+ * @method connect
+ * @param {AudioNode|Object} audioNode AudioNode from the Web Audio API,
+ * or an object from the p5.sound library
+ */
+ _main.default.MediaElement.prototype.connect = function(obj) {
+ var audioContext, masterOutput;
+
+ // if p5.sound exists, same audio context
+ if (typeof _main.default.prototype.getAudioContext === 'function') {
+ audioContext = _main.default.prototype.getAudioContext();
+ masterOutput = _main.default.soundOut.input;
+ } else {
+ try {
+ audioContext = obj.context;
+ masterOutput = audioContext.destination;
+ } catch (e) {
+ throw 'connect() is meant to be used with Web Audio API or p5.sound.js';
+ }
+ }
+
+ // create a Web Audio MediaElementAudioSourceNode if none already exists
+ if (!this.audioSourceNode) {
+ this.audioSourceNode = audioContext.createMediaElementSource(this.elt);
+
+ // connect to master output when this method is first called
+ this.audioSourceNode.connect(masterOutput);
+ }
+
+ // connect to object if provided
+ if (obj) {
+ if (obj.input) {
+ this.audioSourceNode.connect(obj.input);
+ } else {
+ this.audioSourceNode.connect(obj);
+ }
+ } else {
+ // otherwise connect to master output of p5.sound / AudioContext
+ this.audioSourceNode.connect(masterOutput);
+ }
+ };
+
+ /**
+ * Disconnect all Web Audio routing, including to master output.
+ * This is useful if you want to re-route the output through
+ * audio effects, for example.
+ *
+ * @method disconnect
+ */
+ _main.default.MediaElement.prototype.disconnect = function() {
+ if (this.audioSourceNode) {
+ this.audioSourceNode.disconnect();
+ } else {
+ throw 'nothing to disconnect';
+ }
+ };
+
+ /*** SHOW / HIDE CONTROLS ***/
+
+ /**
+ * Show the default MediaElement controls, as determined by the web browser.
+ *
+ * @method showControls
+ * @example
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio()
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to Show Controls!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * ele.showControls();
+ * background(200);
+ * text('Controls Shown', width / 2, height / 2);
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.showControls = function() {
+ // must set style for the element to show on the page
+ this.elt.style['text-align'] = 'inherit';
+ this.elt.controls = true;
+ };
+
+ /**
+ * Hide the default mediaElement controls.
+ * @method hideControls
+ * @example
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio()
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * ele.showControls();
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to hide Controls!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * ele.hideControls();
+ * background(200);
+ * text('Controls hidden', width / 2, height / 2);
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.hideControls = function() {
+ this.elt.controls = false;
+ };
+
+ /*** SCHEDULE EVENTS ***/
+
+ // Cue inspired by JavaScript setTimeout, and the
+ // Tone.js Transport Timeline Event, MIT License Yotam Mann 2015 tonejs.org
+ var Cue = function Cue(callback, time, id, val) {
+ this.callback = callback;
+ this.time = time;
+ this.id = id;
+ this.val = val;
+ };
+
+ /**
+ * Schedule events to trigger every time a MediaElement
+ * (audio/video) reaches a playback cue point.
+ *
+ * Accepts a callback function, a time (in seconds) at which to trigger
+ * the callback, and an optional parameter for the callback.
+ *
+ * Time will be passed as the first parameter to the callback function,
+ * and param will be the second parameter.
+ *
+ *
+ * @method addCue
+ * @param {Number} time Time in seconds, relative to this media
+ * element's playback. For example, to trigger
+ * an event every time playback reaches two
+ * seconds, pass in the number 2. This will be
+ * passed as the first parameter to
+ * the callback function.
+ * @param {Function} callback Name of a function that will be
+ * called at the given time. The callback will
+ * receive time and (optionally) param as its
+ * two parameters.
+ * @param {Object} [value] An object to be passed as the
+ * second parameter to the
+ * callback function.
+ * @return {Number} id ID of this cue,
+ * useful for removeCue(id)
+ * @example
+ *
+ * //
+ * //
+ * function setup() {
+ * noCanvas();
+ *
+ * let audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ *
+ * // schedule three calls to changeBackground
+ * audioEl.addCue(0.5, changeBackground, color(255, 0, 0));
+ * audioEl.addCue(1.0, changeBackground, color(0, 255, 0));
+ * audioEl.addCue(2.5, changeBackground, color(0, 0, 255));
+ * audioEl.addCue(3.0, changeBackground, color(0, 255, 255));
+ * audioEl.addCue(4.2, changeBackground, color(255, 255, 0));
+ * audioEl.addCue(5.0, changeBackground, color(255, 255, 0));
+ * }
+ *
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.addCue = function(time, callback, val) {
+ var id = this._cueIDCounter++;
+
+ var cue = new Cue(callback, time, id, val);
+ this._cues.push(cue);
+
+ if (!this.elt.ontimeupdate) {
+ this.elt.ontimeupdate = this._onTimeUpdate.bind(this);
+ }
+
+ return id;
+ };
+
+ /**
+ * Remove a callback based on its ID. The ID is returned by the
+ * addCue method.
+ * @method removeCue
+ * @param {Number} id ID of the cue, as returned by addCue
+ * @example
+ *
+ * let audioEl, id1, id2;
+ * function setup() {
+ * background(255, 255, 255);
+ * audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ * // schedule five calls to changeBackground
+ * id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));
+ * audioEl.addCue(1.0, changeBackground, color(0, 255, 0));
+ * audioEl.addCue(2.5, changeBackground, color(0, 0, 255));
+ * audioEl.addCue(3.0, changeBackground, color(0, 255, 255));
+ * id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));
+ * text('Click to remove first and last Cue!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * audioEl.removeCue(id1);
+ * audioEl.removeCue(id2);
+ * }
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.removeCue = function(id) {
+ for (var i = 0; i < this._cues.length; i++) {
+ if (this._cues[i].id === id) {
+ console.log(id);
+ this._cues.splice(i, 1);
+ }
+ }
+
+ if (this._cues.length === 0) {
+ this.elt.ontimeupdate = null;
+ }
+ };
+
+ /**
+ * Remove all of the callbacks that had originally been scheduled
+ * via the addCue method.
+ * @method clearCues
+ * @param {Number} id ID of the cue, as returned by addCue
+ * @example
+ *
+ * let audioEl;
+ * function setup() {
+ * background(255, 255, 255);
+ * audioEl = createAudio('assets/beat.mp3');
+ * //Show the default MediaElement controls, as determined by the web browser
+ * audioEl.showControls();
+ * // schedule calls to changeBackground
+ * background(200);
+ * text('Click to change Cue!', 10, 25, 70, 80);
+ * audioEl.addCue(0.5, changeBackground, color(255, 0, 0));
+ * audioEl.addCue(1.0, changeBackground, color(0, 255, 0));
+ * audioEl.addCue(2.5, changeBackground, color(0, 0, 255));
+ * audioEl.addCue(3.0, changeBackground, color(0, 255, 255));
+ * audioEl.addCue(4.2, changeBackground, color(255, 255, 0));
+ * }
+ * function mousePressed() {
+ * // here we clear the scheduled callbacks
+ * audioEl.clearCues();
+ * // then we add some more callbacks
+ * audioEl.addCue(1, changeBackground, color(2, 2, 2));
+ * audioEl.addCue(3, changeBackground, color(255, 255, 0));
+ * }
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *
+ */
+ _main.default.MediaElement.prototype.clearCues = function() {
+ this._cues = [];
+ this.elt.ontimeupdate = null;
+ };
+
+ // private method that checks for cues to be fired if events
+ // have been scheduled using addCue(callback, time).
+ _main.default.MediaElement.prototype._onTimeUpdate = function() {
+ var playbackTime = this.time();
+
+ for (var i = 0; i < this._cues.length; i++) {
+ var callbackTime = this._cues[i].time;
+ var val = this._cues[i].val;
+
+ if (this._prevTime < callbackTime && callbackTime <= playbackTime) {
+ // pass the scheduled callbackTime as parameter to the callback
+ this._cues[i].callback(val);
+ }
+ }
+
+ this._prevTime = playbackTime;
+ };
+
+ /**
+ * Base class for a file.
+ * Used for Element.drop and createFileInput.
+ *
+ * @class p5.File
+ * @constructor
+ * @param {File} file File that is wrapped
+ */
+ _main.default.File = function(file, pInst) {
+ /**
+ * Underlying File object. All normal File methods can be called on this.
+ *
+ * @property file
+ */
+ this.file = file;
+
+ this._pInst = pInst;
+
+ // Splitting out the file type into two components
+ // This makes determining if image or text etc simpler
+ var typeList = file.type.split('/');
+ /**
+ * File type (image, text, etc.)
+ *
+ * @property type
+ */
+ this.type = typeList[0];
+ /**
+ * File subtype (usually the file extension jpg, png, xml, etc.)
+ *
+ * @property subtype
+ */
+ this.subtype = typeList[1];
+ /**
+ * File name
+ *
+ * @property name
+ */
+ this.name = file.name;
+ /**
+ * File size
+ *
+ * @property size
+ */
+ this.size = file.size;
+
+ /**
+ * URL string containing image data.
+ *
+ * @property data
+ */
+ this.data = undefined;
+ };
+
+ _main.default.File._createLoader = function(theFile, callback) {
+ var reader = new FileReader();
+ reader.onload = function(e) {
+ var p5file = new _main.default.File(theFile);
+ p5file.data = e.target.result;
+ callback(p5file);
+ };
+ return reader;
+ };
+
+ _main.default.File._load = function(f, callback) {
+ // Text or data?
+ // This should likely be improved
+ if (/^text\//.test(f.type)) {
+ _main.default.File._createLoader(f, callback).readAsText(f);
+ } else if (!/^(video|audio)\//.test(f.type)) {
+ _main.default.File._createLoader(f, callback).readAsDataURL(f);
+ } else {
+ var file = new _main.default.File(f);
+ file.data = URL.createObjectURL(f);
+ callback(file);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 44: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Events
+ * @submodule Acceleration
+ * @for p5
+ * @requires core
+ */ /**
+ * The system variable deviceOrientation always contains the orientation of
+ * the device. The value of this variable will either be set 'landscape'
+ * or 'portrait'. If no data is available it will be set to 'undefined'.
+ * either LANDSCAPE or PORTRAIT.
+ *
+ * @property {Constant} deviceOrientation
+ * @readOnly
+ */ _main.default.prototype.deviceOrientation = undefined; /**
+ * The system variable accelerationX always contains the acceleration of the
+ * device along the x axis. Value is represented as meters per second squared.
+ *
+ * @property {Number} accelerationX
+ * @readOnly
+ * @example
+ *
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationX);
+ * }
+ *
+ *
+ * @alt
+ * Magnitude of device acceleration is displayed as ellipse size
+ */
+ _main.default.prototype.accelerationX = 0;
+
+ /**
+ * The system variable accelerationY always contains the acceleration of the
+ * device along the y axis. Value is represented as meters per second squared.
+ *
+ * @property {Number} accelerationY
+ * @readOnly
+ * @example
+ *
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationY);
+ * }
+ *
+ *
+ * @alt
+ * Magnitude of device acceleration is displayed as ellipse size
+ */
+ _main.default.prototype.accelerationY = 0;
+
+ /**
+ * The system variable accelerationZ always contains the acceleration of the
+ * device along the z axis. Value is represented as meters per second squared.
+ *
+ * @property {Number} accelerationZ
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationZ);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Magnitude of device acceleration is displayed as ellipse size
+ */
+ _main.default.prototype.accelerationZ = 0;
+
+ /**
+ * The system variable pAccelerationX always contains the acceleration of the
+ * device along the x axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationX
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationX = 0;
+
+ /**
+ * The system variable pAccelerationY always contains the acceleration of the
+ * device along the y axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationY
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationY = 0;
+
+ /**
+ * The system variable pAccelerationZ always contains the acceleration of the
+ * device along the z axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationZ
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationZ = 0;
+
+ /**
+ * _updatePAccelerations updates the pAcceleration values
+ *
+ * @private
+ */
+ _main.default.prototype._updatePAccelerations = function() {
+ this._setProperty('pAccelerationX', this.accelerationX);
+ this._setProperty('pAccelerationY', this.accelerationY);
+ this._setProperty('pAccelerationZ', this.accelerationZ);
+ };
+
+ /**
+ * The system variable rotationX always contains the rotation of the
+ * device along the x axis. Value is represented as 0 to +/-180 degrees.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @property {Number} rotationX
+ * @readOnly
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * @alt
+ * red horizontal line right, green vertical line bottom. black background.
+ */
+ _main.default.prototype.rotationX = 0;
+
+ /**
+ * The system variable rotationY always contains the rotation of the
+ * device along the y axis. Value is represented as 0 to +/-90 degrees.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @property {Number} rotationY
+ * @readOnly
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * @alt
+ * red horizontal line right, green vertical line bottom. black background.
+ */
+ _main.default.prototype.rotationY = 0;
+
+ /**
+ * The system variable rotationZ always contains the rotation of the
+ * device along the z axis. Value is represented as 0 to 359 degrees.
+ *
+ * Unlike rotationX and rotationY, this variable is available for devices
+ * with a built-in compass only.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ *
+ * @property {Number} rotationZ
+ * @readOnly
+ *
+ * @alt
+ * red horizontal line right, green vertical line bottom. black background.
+ */
+ _main.default.prototype.rotationZ = 0;
+
+ /**
+ * The system variable pRotationX always contains the rotation of the
+ * device along the x axis in the frame previous to the current frame. Value
+ * is represented as 0 to +/-180 degrees.
+ *
+ * pRotationX can also be used with rotationX to determine the rotate
+ * direction of the device along the X-axis.
+ * @example
+ *
+ *
+ * // A simple if statement looking at whether
+ * // rotationX - pRotationX < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * // Simple range conversion to make things simpler.
+ * // This is not absolutely necessary but the logic
+ * // will be different in that case.
+ *
+ * let rX = rotationX + 180;
+ * let pRX = pRotationX + 180;
+ *
+ * if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
+ * rotateDirection = 'clockwise';
+ * } else if (rX - pRX < 0 || rX - pRX > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ *
+ * print(rotateDirection);
+ *
+ *
+ *
+ * @alt
+ * no image to display.
+ *
+ *
+ * @property {Number} pRotationX
+ * @readOnly
+ */
+ _main.default.prototype.pRotationX = 0;
+
+ /**
+ * The system variable pRotationY always contains the rotation of the
+ * device along the y axis in the frame previous to the current frame. Value
+ * is represented as 0 to +/-90 degrees.
+ *
+ * pRotationY can also be used with rotationY to determine the rotate
+ * direction of the device along the Y-axis.
+ * @example
+ *
+ *
+ * // A simple if statement looking at whether
+ * // rotationY - pRotationY < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * // Simple range conversion to make things simpler.
+ * // This is not absolutely necessary but the logic
+ * // will be different in that case.
+ *
+ * let rY = rotationY + 180;
+ * let pRY = pRotationY + 180;
+ *
+ * if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
+ * rotateDirection = 'clockwise';
+ * } else if (rY - pRY < 0 || rY - pRY > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ * print(rotateDirection);
+ *
+ *
+ *
+ * @alt
+ * no image to display.
+ *
+ *
+ * @property {Number} pRotationY
+ * @readOnly
+ */
+ _main.default.prototype.pRotationY = 0;
+
+ /**
+ * The system variable pRotationZ always contains the rotation of the
+ * device along the z axis in the frame previous to the current frame. Value
+ * is represented as 0 to 359 degrees.
+ *
+ * pRotationZ can also be used with rotationZ to determine the rotate
+ * direction of the device along the Z-axis.
+ * @example
+ *
+ *
+ * // A simple if statement looking at whether
+ * // rotationZ - pRotationZ < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * if (
+ * (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
+ * rotationZ - pRotationZ < -270
+ * ) {
+ * rotateDirection = 'clockwise';
+ * } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ * print(rotateDirection);
+ *
+ *
+ *
+ * @alt
+ * no image to display.
+ *
+ *
+ * @property {Number} pRotationZ
+ * @readOnly
+ */
+ _main.default.prototype.pRotationZ = 0;
+
+ var startAngleX = 0;
+ var startAngleY = 0;
+ var startAngleZ = 0;
+
+ var rotateDirectionX = 'clockwise';
+ var rotateDirectionY = 'clockwise';
+ var rotateDirectionZ = 'clockwise';
+
+ _main.default.prototype.pRotateDirectionX = undefined;
+ _main.default.prototype.pRotateDirectionY = undefined;
+ _main.default.prototype.pRotateDirectionZ = undefined;
+
+ _main.default.prototype._updatePRotations = function() {
+ this._setProperty('pRotationX', this.rotationX);
+ this._setProperty('pRotationY', this.rotationY);
+ this._setProperty('pRotationZ', this.rotationZ);
+ };
+
+ /**
+ * When a device is rotated, the axis that triggers the deviceTurned()
+ * method is stored in the turnAxis variable. The turnAxis variable is only defined within
+ * the scope of deviceTurned().
+ * @property {String} turnAxis
+ * @readOnly
+ * @example
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect in center of canvas. turns white on mobile when device turns
+ * 50x50 black rect in center of canvas. turns white on mobile when x-axis turns
+ */
+ _main.default.prototype.turnAxis = undefined;
+
+ var move_threshold = 0.5;
+ var shake_threshold = 30;
+
+ /**
+ * The setMoveThreshold() function is used to set the movement threshold for
+ * the deviceMoved() function. The default threshold is set to 0.5.
+ *
+ * @method setMoveThreshold
+ * @param {number} value The threshold value
+ * @example
+ *
+ *
+ * // Run this example on a mobile device
+ * // You will need to move the device incrementally further
+ * // the closer the square's color gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 0.5;
+ * function setup() {
+ * setMoveThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 0.1;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setMoveThreshold(threshold);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect in center of canvas. turns white on mobile when device moves
+ */
+
+ _main.default.prototype.setMoveThreshold = function(val) {
+ _main.default._validateParameters('setMoveThreshold', arguments);
+ move_threshold = val;
+ };
+
+ /**
+ * The setShakeThreshold() function is used to set the movement threshold for
+ * the deviceShaken() function. The default threshold is set to 30.
+ *
+ * @method setShakeThreshold
+ * @param {number} value The threshold value
+ * @example
+ *
+ *
+ * // Run this example on a mobile device
+ * // You will need to shake the device more firmly
+ * // the closer the box's fill gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 30;
+ * function setup() {
+ * setShakeThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 5;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setShakeThreshold(threshold);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect in center of canvas. turns white on mobile when device
+ * is being shaked
+ */
+
+ _main.default.prototype.setShakeThreshold = function(val) {
+ _main.default._validateParameters('setShakeThreshold', arguments);
+ shake_threshold = val;
+ };
+
+ /**
+ * The deviceMoved() function is called when the device is moved by more than
+ * the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
+ * The threshold value can be changed using setMoveThreshold().
+ *
+ * @method deviceMoved
+ * @example
+ *
+ *
+ * // Run this example on a mobile device
+ * // Move the device around
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect in center of canvas. turns white on mobile when device moves
+ *
+ */
+
+ /**
+ * The deviceTurned() function is called when the device rotates by
+ * more than 90 degrees continuously.
+ *
+ * The axis that triggers the deviceTurned() method is stored in the turnAxis
+ * variable. The deviceTurned() method can be locked to trigger on any axis:
+ * X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
+ *
+ * @method deviceTurned
+ * @example
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect in center of canvas. turns white on mobile when device turns
+ * 50x50 black rect in center of canvas. turns white on mobile when x-axis turns
+ *
+ */
+
+ /**
+ * The deviceShaken() function is called when the device total acceleration
+ * changes of accelerationX and accelerationY values is more than
+ * the threshold value. The default threshold is set to 30.
+ * The threshold value can be changed using setShakeThreshold().
+ *
+ * @method deviceShaken
+ * @example
+ *
+ *
+ * // Run this example on a mobile device
+ * // Shake the device to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceShaken() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect in center of canvas. turns white on mobile when device shakes
+ *
+ */
+
+ _main.default.prototype._ondeviceorientation = function(e) {
+ this._updatePRotations();
+ this._setProperty('rotationX', e.beta);
+ this._setProperty('rotationY', e.gamma);
+ this._setProperty('rotationZ', e.alpha);
+ this._handleMotion();
+ };
+ _main.default.prototype._ondevicemotion = function(e) {
+ this._updatePAccelerations();
+ this._setProperty('accelerationX', e.acceleration.x * 2);
+ this._setProperty('accelerationY', e.acceleration.y * 2);
+ this._setProperty('accelerationZ', e.acceleration.z * 2);
+ this._handleMotion();
+ };
+ _main.default.prototype._handleMotion = function() {
+ if (window.orientation === 90 || window.orientation === -90) {
+ this._setProperty('deviceOrientation', 'landscape');
+ } else if (window.orientation === 0) {
+ this._setProperty('deviceOrientation', 'portrait');
+ } else if (window.orientation === undefined) {
+ this._setProperty('deviceOrientation', 'undefined');
+ }
+ var deviceMoved = this.deviceMoved || window.deviceMoved;
+ if (typeof deviceMoved === 'function') {
+ if (
+ Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold ||
+ Math.abs(this.accelerationY - this.pAccelerationY) > move_threshold ||
+ Math.abs(this.accelerationZ - this.pAccelerationZ) > move_threshold
+ ) {
+ deviceMoved();
+ }
+ }
+ var deviceTurned = this.deviceTurned || window.deviceTurned;
+ if (typeof deviceTurned === 'function') {
+ // The angles given by rotationX etc is from range -180 to 180.
+ // The following will convert them to 0 to 360 for ease of calculation
+ // of cases when the angles wrapped around.
+ // _startAngleX will be converted back at the end and updated.
+ var wRX = this.rotationX + 180;
+ var wPRX = this.pRotationX + 180;
+ var wSAX = startAngleX + 180;
+ if ((wRX - wPRX > 0 && wRX - wPRX < 270) || wRX - wPRX < -270) {
+ rotateDirectionX = 'clockwise';
+ } else if (wRX - wPRX < 0 || wRX - wPRX > 270) {
+ rotateDirectionX = 'counter-clockwise';
+ }
+ if (rotateDirectionX !== this.pRotateDirectionX) {
+ wSAX = wRX;
+ }
+ if (Math.abs(wRX - wSAX) > 90 && Math.abs(wRX - wSAX) < 270) {
+ wSAX = wRX;
+ this._setProperty('turnAxis', 'X');
+ deviceTurned();
+ }
+ this.pRotateDirectionX = rotateDirectionX;
+ startAngleX = wSAX - 180;
+
+ // Y-axis is identical to X-axis except for changing some names.
+ var wRY = this.rotationY + 180;
+ var wPRY = this.pRotationY + 180;
+ var wSAY = startAngleY + 180;
+ if ((wRY - wPRY > 0 && wRY - wPRY < 270) || wRY - wPRY < -270) {
+ rotateDirectionY = 'clockwise';
+ } else if (wRY - wPRY < 0 || wRY - this.pRotationY > 270) {
+ rotateDirectionY = 'counter-clockwise';
+ }
+ if (rotateDirectionY !== this.pRotateDirectionY) {
+ wSAY = wRY;
+ }
+ if (Math.abs(wRY - wSAY) > 90 && Math.abs(wRY - wSAY) < 270) {
+ wSAY = wRY;
+ this._setProperty('turnAxis', 'Y');
+ deviceTurned();
+ }
+ this.pRotateDirectionY = rotateDirectionY;
+ startAngleY = wSAY - 180;
+
+ // Z-axis is already in the range 0 to 360
+ // so no conversion is needed.
+ if (
+ (this.rotationZ - this.pRotationZ > 0 &&
+ this.rotationZ - this.pRotationZ < 270) ||
+ this.rotationZ - this.pRotationZ < -270
+ ) {
+ rotateDirectionZ = 'clockwise';
+ } else if (
+ this.rotationZ - this.pRotationZ < 0 ||
+ this.rotationZ - this.pRotationZ > 270
+ ) {
+ rotateDirectionZ = 'counter-clockwise';
+ }
+ if (rotateDirectionZ !== this.pRotateDirectionZ) {
+ startAngleZ = this.rotationZ;
+ }
+ if (
+ Math.abs(this.rotationZ - startAngleZ) > 90 &&
+ Math.abs(this.rotationZ - startAngleZ) < 270
+ ) {
+ startAngleZ = this.rotationZ;
+ this._setProperty('turnAxis', 'Z');
+ deviceTurned();
+ }
+ this.pRotateDirectionZ = rotateDirectionZ;
+ this._setProperty('turnAxis', undefined);
+ }
+ var deviceShaken = this.deviceShaken || window.deviceShaken;
+ if (typeof deviceShaken === 'function') {
+ var accelerationChangeX;
+ var accelerationChangeY;
+ // Add accelerationChangeZ if acceleration change on Z is needed
+ if (this.pAccelerationX !== null) {
+ accelerationChangeX = Math.abs(this.accelerationX - this.pAccelerationX);
+ accelerationChangeY = Math.abs(this.accelerationY - this.pAccelerationY);
+ }
+ if (accelerationChangeX + accelerationChangeY > shake_threshold) {
+ deviceShaken();
+ }
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 45: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Events
+ * @submodule Keyboard
+ * @for p5
+ * @requires core
+ */ /**
+ * The boolean system variable keyIsPressed is true if any key is pressed
+ * and false if no keys are pressed.
+ *
+ * @property {Boolean} keyIsPressed
+ * @readOnly
+ * @example
+ *
+ *
+ * function draw() {
+ * if (keyIsPressed === true) {
+ * fill(0);
+ * } else {
+ * fill(255);
+ * }
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 white rect that turns black on keypress.
+ *
+ */ _main.default.prototype.isKeyPressed = false;
+ _main.default.prototype.keyIsPressed = false; // khan
+ /**
+ * The system variable key always contains the value of the most recent
+ * key on the keyboard that was typed. To get the proper capitalization, it
+ * is best to use it within keyTyped(). For non-ASCII keys, use the keyCode
+ * variable.
+ *
+ * @property {String} key
+ * @readOnly
+ * @example
+ *
+ * // Click any key to display it!
+ * // (Not Guaranteed to be Case Sensitive)
+ * function setup() {
+ * fill(245, 123, 158);
+ * textSize(50);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(key, 33, 65); // Display last key pressed.
+ * }
+ *
+ *
+ * @alt
+ * canvas displays any key value that is pressed in pink font.
+ *
+ */
+ _main.default.prototype.key = '';
+
+ /**
+ * The variable keyCode is used to detect special keys such as BACKSPACE,
+ * DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,
+ * DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
+ * You can also check for custom keys by looking up the keyCode of any key
+ * on a site like this: keycode.info.
+ *
+ * @property {Integer} keyCode
+ * @readOnly
+ * @example
+ *
+ * let fillVal = 126;
+ * function draw() {
+ * fill(fillVal);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function keyPressed() {
+ * if (keyCode === UP_ARROW) {
+ * fillVal = 255;
+ * } else if (keyCode === DOWN_ARROW) {
+ * fillVal = 0;
+ * }
+ * return false; // prevent default
+ * }
+ *
+ *
+ * function draw() {}
+ * function keyPressed() {
+ * background('yellow');
+ * text(`${key} ${keyCode}`, 10, 40);
+ * print(key, ' ', keyCode);
+ * return false; // prevent default
+ * }
+ *
+ * @alt
+ * Grey rect center. turns white when up arrow pressed and black when down
+ * Display key pressed and its keyCode in a yellow box
+ */
+ _main.default.prototype.keyCode = 0;
+
+ /**
+ * The keyPressed() function is called once every time a key is pressed. The
+ * keyCode for the key that was pressed is stored in the keyCode variable.
+ *
+ * For non-ASCII keys, use the keyCode variable. You can check if the keyCode
+ * equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL,
+ * OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
+ *
+ * For ASCII keys, the key that was pressed is stored in the key variable. However, it
+ * does not distinguish between uppercase and lowercase. For this reason, it
+ * is recommended to use keyTyped() to read the key variable, in which the
+ * case of the variable will be distinguished.
+ *
+ * Because of how operating systems handle key repeats, holding down a key
+ * may cause multiple calls to keyTyped() (and keyReleased() as well). The
+ * rate of repeat is set by the operating system and how each computer is
+ * configured.
+ * Browsers may have different default
+ * behaviors attached to various key events. To prevent any default
+ * behavior for this event, add "return false" to the end of the method.
+ *
+ * @method keyPressed
+ * @example
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyPressed() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyPressed() {
+ * if (keyCode === LEFT_ARROW) {
+ * value = 255;
+ * } else if (keyCode === RIGHT_ARROW) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * function keyPressed() {
+ * // Do something
+ * return false; // prevent any default behaviour
+ * }
+ *
+ *
+ *
+ * @alt
+ * black rect center. turns white when key pressed and black when released
+ * black rect center. turns white when left arrow pressed and black when right.
+ *
+ */
+ _main.default.prototype._onkeydown = function(e) {
+ if (this._downKeys[e.which]) {
+ // prevent multiple firings
+ return;
+ }
+ this._setProperty('isKeyPressed', true);
+ this._setProperty('keyIsPressed', true);
+ this._setProperty('keyCode', e.which);
+ this._downKeys[e.which] = true;
+ this._setProperty('key', e.key || String.fromCharCode(e.which) || e.which);
+ var keyPressed = this.keyPressed || window.keyPressed;
+ if (typeof keyPressed === 'function' && !e.charCode) {
+ var executeDefault = keyPressed(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The keyReleased() function is called once every time a key is released.
+ * See key and keyCode for more information.
+ * Browsers may have different default
+ * behaviors attached to various key events. To prevent any default
+ * behavior for this event, add "return false" to the end of the method.
+ *
+ * @method keyReleased
+ * @example
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * return false; // prevent any default behavior
+ * }
+ *
+ *
+ *
+ * @alt
+ * black rect center. turns white when key pressed and black when pressed again
+ *
+ */
+ _main.default.prototype._onkeyup = function(e) {
+ var keyReleased = this.keyReleased || window.keyReleased;
+ this._downKeys[e.which] = false;
+
+ if (!this._areDownKeys()) {
+ this._setProperty('isKeyPressed', false);
+ this._setProperty('keyIsPressed', false);
+ }
+
+ this._setProperty('_lastKeyCodeTyped', null);
+
+ this._setProperty('key', e.key || String.fromCharCode(e.which) || e.which);
+ this._setProperty('keyCode', e.which);
+ if (typeof keyReleased === 'function') {
+ var executeDefault = keyReleased(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * The keyTyped() function is called once every time a key is pressed, but
+ * action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect
+ * a keyCode for one of these keys, use the keyPressed() function instead.
+ * The most recent key typed will be stored in the key variable.
+ *
+ * Because of how operating systems handle key repeats, holding down a key
+ * will cause multiple calls to keyTyped() (and keyReleased() as well). The
+ * rate of repeat is set by the operating system and how each computer is
+ * configured.
+ * Browsers may have different default behaviors attached to various key
+ * events. To prevent any default behavior for this event, add "return false"
+ * to the end of the method.
+ *
+ * @method keyTyped
+ * @example
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyTyped() {
+ * if (key === 'a') {
+ * value = 255;
+ * } else if (key === 'b') {
+ * value = 0;
+ * }
+ * // uncomment to prevent any default behavior
+ * // return false;
+ * }
+ *
+ *
+ *
+ * @alt
+ * black rect center. turns white when 'a' key typed and black when 'b' pressed
+ *
+ */
+ _main.default.prototype._onkeypress = function(e) {
+ if (e.which === this._lastKeyCodeTyped) {
+ // prevent multiple firings
+ return;
+ }
+ this._setProperty('_lastKeyCodeTyped', e.which); // track last keyCode
+ this._setProperty('key', String.fromCharCode(e.which));
+ var keyTyped = this.keyTyped || window.keyTyped;
+ if (typeof keyTyped === 'function') {
+ var executeDefault = keyTyped(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The onblur function is called when the user is no longer focused
+ * on the p5 element. Because the keyup events will not fire if the user is
+ * not focused on the element we must assume all keys currently down have
+ * been released.
+ */
+ _main.default.prototype._onblur = function(e) {
+ this._downKeys = {};
+ };
+
+ /**
+ * The keyIsDown() function checks if the key is currently down, i.e. pressed.
+ * It can be used if you have an object that moves, and you want several keys
+ * to be able to affect its behaviour simultaneously, such as moving a
+ * sprite diagonally. You can put in any number representing the keyCode of
+ * the key, or use any of the variable keyCode names listed
+ * here.
+ *
+ * @method keyIsDown
+ * @param {Number} code The key to check for.
+ * @return {Boolean} whether key is down or not
+ * @example
+ *
+ * let x = 100;
+ * let y = 100;
+ *
+ * function setup() {
+ * createCanvas(512, 512);
+ * fill(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * if (keyIsDown(LEFT_ARROW)) {
+ * x -= 5;
+ * }
+ *
+ * if (keyIsDown(RIGHT_ARROW)) {
+ * x += 5;
+ * }
+ *
+ * if (keyIsDown(UP_ARROW)) {
+ * y -= 5;
+ * }
+ *
+ * if (keyIsDown(DOWN_ARROW)) {
+ * y += 5;
+ * }
+ *
+ * clear();
+ * ellipse(x, y, 50, 50);
+ * }
+ *
+ *
+ *
+ * let diameter = 50;
+ *
+ * function setup() {
+ * createCanvas(512, 512);
+ * }
+ *
+ * function draw() {
+ * // 107 and 187 are keyCodes for "+"
+ * if (keyIsDown(107) || keyIsDown(187)) {
+ * diameter += 1;
+ * }
+ *
+ * // 109 and 189 are keyCodes for "-"
+ * if (keyIsDown(109) || keyIsDown(189)) {
+ * diameter -= 1;
+ * }
+ *
+ * clear();
+ * fill(255, 0, 0);
+ * ellipse(50, 50, diameter, diameter);
+ * }
+ *
+ *
+ * @alt
+ * 50x50 red ellipse moves left, right, up and down with arrow presses.
+ * 50x50 red ellipse gets bigger or smaller when + or - are pressed.
+ *
+ */
+ _main.default.prototype.keyIsDown = function(code) {
+ _main.default._validateParameters('keyIsDown', arguments);
+ return this._downKeys[code] || false;
+ };
+
+ /**
+ * The _areDownKeys function returns a boolean true if any keys pressed
+ * and a false if no keys are currently pressed.
+
+ * Helps avoid instances where multiple keys are pressed simultaneously and
+ * releasing a single key will then switch the
+ * keyIsPressed property to true.
+ * @private
+ **/
+ _main.default.prototype._areDownKeys = function() {
+ for (var key in this._downKeys) {
+ if (this._downKeys.hasOwnProperty(key) && this._downKeys[key] === true) {
+ return true;
+ }
+ }
+ return false;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 46: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Events
+ * @submodule Mouse
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ /**
+ *
+ * The variable movedX contains the horizontal movement of the mouse since the last frame
+ * @property {Number} movedX
+ * @readOnly
+ * @example
+ *
+ *
+ * let x = 50;
+ * function setup() {
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (x > 48) {
+ * x -= 2;
+ * } else if (x < 48) {
+ * x += 2;
+ * }
+ * x += floor(movedX / 5);
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(x, 50, 50, 50);
+ * }
+ *
+ *
+ * @alt
+ * box moves left and right according to mouse movement then slowly back towards the center
+ *
+ */ _main.default.prototype.movedX = 0;
+ /**
+ * The variable movedY contains the vertical movement of the mouse since the last frame
+ * @property {Number} movedY
+ * @readOnly
+ * @example
+ *
+ *
+ * let y = 50;
+ * function setup() {
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (y > 48) {
+ * y -= 2;
+ * } else if (y < 48) {
+ * y += 2;
+ * }
+ * y += floor(movedY / 5);
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(y, 50, 50, 50);
+ * }
+ *
+ *
+ * @alt
+ * box moves up and down according to mouse movement then slowly back towards the center
+ *
+ */ _main.default.prototype.movedY = 0;
+ /*
+ * This is a flag which is false until the first time
+ * we receive a mouse event. The pmouseX and pmouseY
+ * values will match the mouseX and mouseY values until
+ * this interaction takes place.
+ */
+ _main.default.prototype._hasMouseInteracted = false;
+
+ /**
+ * The system variable mouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseX will hold the x value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, 0, mouseX, 100);
+ * }
+ *
+ *
+ *
+ * @alt
+ * horizontal black line moves left and right with mouse x-position
+ *
+ */
+ _main.default.prototype.mouseX = 0;
+
+ /**
+ * The system variable mouseY always contains the current vertical
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseY will hold the y value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseY
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(0, mouseY, 100, mouseY);
+ * }
+ *
+ *
+ *
+ * @alt
+ * vertical black line moves up and down with mouse y-position
+ *
+ */
+ _main.default.prototype.mouseY = 0;
+
+ /**
+ * The system variable pmouseX always contains the horizontal position of
+ * the mouse or finger in the frame previous to the current frame, relative to
+ * (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and
+ * (-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX
+ * value at the start of each touch event.
+ *
+ * @property {Number} pmouseX
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * // Move the mouse across the canvas to leave a trail
+ * function setup() {
+ * //slow down the frameRate to make it more visible
+ * frameRate(10);
+ * }
+ *
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, mouseY, pmouseX, pmouseY);
+ * print(pmouseX + ' -> ' + mouseX);
+ * }
+ *
+ *
+ *
+ * @alt
+ * line trail is created from cursor movements. faster movement make longer line.
+ *
+ */
+ _main.default.prototype.pmouseX = 0;
+
+ /**
+ * The system variable pmouseY always contains the vertical position of
+ * the mouse or finger in the frame previous to the current frame, relative to
+ * (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and
+ * (-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY
+ * value at the start of each touch event.
+ *
+ * @property {Number} pmouseY
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ * //draw a square only if the mouse is not moving
+ * if (mouseY === pmouseY && mouseX === pmouseX) {
+ * rect(20, 20, 60, 60);
+ * }
+ *
+ * print(pmouseY + ' -> ' + mouseY);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 60x60 black rect center, fuchsia background. rect flickers on mouse movement
+ *
+ */
+ _main.default.prototype.pmouseY = 0;
+
+ /**
+ * The system variable winMouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the window.
+ *
+ * @property {Number} winMouseX
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * let myCanvas;
+ *
+ * function setup() {
+ * //use a variable to store a pointer to the canvas
+ * myCanvas = createCanvas(100, 100);
+ * let body = document.getElementsByTagName('body')[0];
+ * myCanvas.parent(body);
+ * }
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * //move the canvas to the horizontal mouse position
+ * //relative to the window
+ * myCanvas.position(winMouseX + 1, windowHeight / 2);
+ *
+ * //the y of the square is relative to the canvas
+ * rect(20, mouseY, 60, 60);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 60x60 black rect y moves with mouse y and fuchsia canvas moves with mouse x
+ *
+ */
+ _main.default.prototype.winMouseX = 0;
+
+ /**
+ * The system variable winMouseY always contains the current vertical
+ * position of the mouse, relative to (0, 0) of the window.
+ *
+ * @property {Number} winMouseY
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * let myCanvas;
+ *
+ * function setup() {
+ * //use a variable to store a pointer to the canvas
+ * myCanvas = createCanvas(100, 100);
+ * let body = document.getElementsByTagName('body')[0];
+ * myCanvas.parent(body);
+ * }
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * //move the canvas to the vertical mouse position
+ * //relative to the window
+ * myCanvas.position(windowWidth / 2, winMouseY + 1);
+ *
+ * //the x of the square is relative to the canvas
+ * rect(mouseX, 20, 60, 60);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 60x60 black rect x moves with mouse x and fuchsia canvas y moves with mouse y
+ *
+ */
+ _main.default.prototype.winMouseY = 0;
+
+ /**
+ * The system variable pwinMouseX always contains the horizontal position
+ * of the mouse in the frame previous to the current frame, relative to
+ * (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX
+ * value at the start of each touch event.
+ *
+ * @property {Number} pwinMouseX
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * let myCanvas;
+ *
+ * function setup() {
+ * //use a variable to store a pointer to the canvas
+ * myCanvas = createCanvas(100, 100);
+ * noStroke();
+ * fill(237, 34, 93);
+ * }
+ *
+ * function draw() {
+ * clear();
+ * //the difference between previous and
+ * //current x position is the horizontal mouse speed
+ * let speed = abs(winMouseX - pwinMouseX);
+ * //change the size of the circle
+ * //according to the horizontal speed
+ * ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
+ * //move the canvas to the mouse position
+ * myCanvas.position(winMouseX + 1, winMouseY + 1);
+ * }
+ *
+ *
+ *
+ * @alt
+ * fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed
+ *
+ */
+ _main.default.prototype.pwinMouseX = 0;
+
+ /**
+ * The system variable pwinMouseY always contains the vertical position of
+ * the mouse in the frame previous to the current frame, relative to (0, 0)
+ * of the window. Note: pwinMouseY will be reset to the current winMouseY
+ * value at the start of each touch event.
+ *
+ * @property {Number} pwinMouseY
+ * @readOnly
+ *
+ *
+ * @example
+ *
+ *
+ * let myCanvas;
+ *
+ * function setup() {
+ * //use a variable to store a pointer to the canvas
+ * myCanvas = createCanvas(100, 100);
+ * noStroke();
+ * fill(237, 34, 93);
+ * }
+ *
+ * function draw() {
+ * clear();
+ * //the difference between previous and
+ * //current y position is the vertical mouse speed
+ * let speed = abs(winMouseY - pwinMouseY);
+ * //change the size of the circle
+ * //according to the vertical speed
+ * ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
+ * //move the canvas to the mouse position
+ * myCanvas.position(winMouseX + 1, winMouseY + 1);
+ * }
+ *
+ *
+ *
+ * @alt
+ * fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed
+ *
+ */
+ _main.default.prototype.pwinMouseY = 0;
+
+ /**
+ * Processing automatically tracks if the mouse button is pressed and which
+ * button is pressed. The value of the system variable mouseButton is either
+ * LEFT, RIGHT, or CENTER depending on which button was pressed last.
+ * Warning: different browsers may track mouseButton differently.
+ *
+ * @property {Constant} mouseButton
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * if (mouseIsPressed) {
+ * if (mouseButton === LEFT) {
+ * ellipse(50, 50, 50, 50);
+ * }
+ * if (mouseButton === RIGHT) {
+ * rect(25, 25, 50, 50);
+ * }
+ * if (mouseButton === CENTER) {
+ * triangle(23, 75, 50, 20, 78, 75);
+ * }
+ * }
+ *
+ * print(mouseButton);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black ellipse appears on center of fuchsia canvas on mouse click/press.
+ *
+ */
+ _main.default.prototype.mouseButton = 0;
+
+ /**
+ * The boolean system variable mouseIsPressed is true if the mouse is pressed
+ * and false if not.
+ *
+ * @property {Boolean} mouseIsPressed
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * if (mouseIsPressed) {
+ * ellipse(50, 50, 50, 50);
+ * } else {
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * print(mouseIsPressed);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black 50x50 rect becomes ellipse with mouse click/press. fuchsia background.
+ *
+ */
+ _main.default.prototype.mouseIsPressed = false;
+
+ _main.default.prototype._updateNextMouseCoords = function(e) {
+ if (this._curElement !== null && (!e.touches || e.touches.length > 0)) {
+ var mousePos = getMousePos(this._curElement.elt, this.width, this.height, e);
+
+ this._setProperty('movedX', e.movementX);
+ this._setProperty('movedY', e.movementY);
+ this._setProperty('mouseX', mousePos.x);
+ this._setProperty('mouseY', mousePos.y);
+ this._setProperty('winMouseX', mousePos.winX);
+ this._setProperty('winMouseY', mousePos.winY);
+ }
+ if (!this._hasMouseInteracted) {
+ // For first draw, make previous and next equal
+ this._updateMouseCoords();
+ this._setProperty('_hasMouseInteracted', true);
+ }
+ };
+
+ _main.default.prototype._updateMouseCoords = function() {
+ this._setProperty('pmouseX', this.mouseX);
+ this._setProperty('pmouseY', this.mouseY);
+ this._setProperty('pwinMouseX', this.winMouseX);
+ this._setProperty('pwinMouseY', this.winMouseY);
+
+ this._setProperty('_pmouseWheelDeltaY', this._mouseWheelDeltaY);
+ };
+
+ function getMousePos(canvas, w, h, evt) {
+ if (evt && !evt.clientX) {
+ // use touches if touch and not mouse
+ if (evt.touches) {
+ evt = evt.touches[0];
+ } else if (evt.changedTouches) {
+ evt = evt.changedTouches[0];
+ }
+ }
+ var rect = canvas.getBoundingClientRect();
+ var sx = canvas.scrollWidth / w || 1;
+ var sy = canvas.scrollHeight / h || 1;
+ return {
+ x: (evt.clientX - rect.left) / sx,
+ y: (evt.clientY - rect.top) / sy,
+ winX: evt.clientX,
+ winY: evt.clientY,
+ id: evt.identifier
+ };
+ }
+
+ _main.default.prototype._setMouseButton = function(e) {
+ if (e.button === 1) {
+ this._setProperty('mouseButton', constants.CENTER);
+ } else if (e.button === 2) {
+ this._setProperty('mouseButton', constants.RIGHT);
+ } else {
+ this._setProperty('mouseButton', constants.LEFT);
+ }
+ };
+
+ /**
+ * The mouseMoved() function is called every time the mouse moves and a mouse
+ * button is not pressed.
+ * Browsers may have different default
+ * behaviors attached to various mouse events. To prevent any default
+ * behavior for this event, add "return false" to the end of the method.
+ *
+ * @method mouseMoved
+ * @param {Object} [event] optional MouseEvent callback argument.
+ * @example
+ *
+ *
+ * // Move the mouse across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mouseMoved() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseMoved(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black 50x50 rect becomes lighter with mouse movements until white then resets
+ * no image displayed
+ *
+ */
+
+ /**
+ * The mouseDragged() function is called once every time the mouse moves and
+ * a mouse button is pressed. If no mouseDragged() function is defined, the
+ * touchMoved() function will be called instead if it is defined.
+ * Browsers may have different default
+ * behaviors attached to various mouse events. To prevent any default
+ * behavior for this event, add "return false" to the end of the method.
+ *
+ * @method mouseDragged
+ * @param {Object} [event] optional MouseEvent callback argument.
+ * @example
+ *
+ *
+ * // Drag the mouse across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseDragged() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mouseDragged() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseDragged(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black 50x50 rect turns lighter with mouse click and drag until white, resets
+ * no image displayed
+ *
+ */
+ _main.default.prototype._onmousemove = function(e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._updateNextMouseCoords(e);
+ if (!this.mouseIsPressed) {
+ if (typeof context.mouseMoved === 'function') {
+ executeDefault = context.mouseMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ } else {
+ if (typeof context.mouseDragged === 'function') {
+ executeDefault = context.mouseDragged(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.touchMoved === 'function') {
+ executeDefault = context.touchMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ }
+ };
+
+ /**
+ * The mousePressed() function is called once after every time a mouse button
+ * is pressed. The mouseButton variable (see the related reference entry)
+ * can be used to determine which button has been pressed. If no
+ * mousePressed() function is defined, the touchStarted() function will be
+ * called instead if it is defined.
+ * Browsers may have different default
+ * behaviors attached to various mouse events. To prevent any default
+ * behavior for this event, add "return false" to the end of the method.
+ *
+ * @method mousePressed
+ * @param {Object} [event] optional MouseEvent callback argument.
+ * @example
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mousePressed() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mousePressed() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mousePressed(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black 50x50 rect turns white with mouse click/press.
+ * no image displayed
+ *
+ */
+ _main.default.prototype._onmousedown = function(e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', true);
+ this._setMouseButton(e);
+ this._updateNextMouseCoords(e);
+
+ if (typeof context.mousePressed === 'function') {
+ executeDefault = context.mousePressed(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ // only safari needs this manual fallback for consistency
+ } else if (
+ navigator.userAgent.toLowerCase().includes('safari') &&
+ typeof context.touchStarted === 'function'
+ ) {
+ executeDefault = context.touchStarted(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * The mouseReleased() function is called every time a mouse button is
+ * released. If no mouseReleased() function is defined, the touchEnded()
+ * function will be called instead if it is defined.
+ * Browsers may have different default
+ * behaviors attached to various mouse events. To prevent any default
+ * behavior for this event, add "return false" to the end of the method.
+ *
+ *
+ * @method mouseReleased
+ * @param {Object} [event] optional MouseEvent callback argument.
+ * @example
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mouseReleased() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseReleased(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black 50x50 rect turns white with mouse click/press.
+ * no image displayed
+ *
+ */
+ _main.default.prototype._onmouseup = function(e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', false);
+ if (typeof context.mouseReleased === 'function') {
+ executeDefault = context.mouseReleased(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.touchEnded === 'function') {
+ executeDefault = context.touchEnded(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ _main.default.prototype._ondragend = _main.default.prototype._onmouseup;
+ _main.default.prototype._ondragover = _main.default.prototype._onmousemove;
+
+ /**
+ * The mouseClicked() function is called once after a mouse button has been
+ * pressed and then released.
+ * Browsers handle clicks differently, so this function is only guaranteed to be
+ * run when the left mouse button is clicked. To handle other mouse buttons
+ * being pressed or released, see mousePressed() or mouseReleased().
+ * Browsers may have different default
+ * behaviors attached to various mouse events. To prevent any default
+ * behavior for this event, add "return false" to the end of the method.
+ *
+ * @method mouseClicked
+ * @param {Object} [event] optional MouseEvent callback argument.
+ * @example
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function mouseClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mouseClicked() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseClicked(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black 50x50 rect turns white with mouse click/press.
+ * no image displayed
+ *
+ */
+ _main.default.prototype._onclick = function(e) {
+ var context = this._isGlobal ? window : this;
+ if (typeof context.mouseClicked === 'function') {
+ var executeDefault = context.mouseClicked(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * The doubleClicked() function is executed every time a event
+ * listener has detected a dblclick event which is a part of the
+ * DOM L3 specification. The doubleClicked event is fired when a
+ * pointing device button (usually a mouse's primary button)
+ * is clicked twice on a single element. For more info on the
+ * dblclick event refer to mozilla's documentation here:
+ * https://developer.mozilla.org/en-US/docs/Web/Events/dblclick
+ *
+ * @method doubleClicked
+ * @param {Object} [event] optional MouseEvent callback argument.
+ * @example
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been double clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function doubleClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function doubleClicked() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function doubleClicked(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black 50x50 rect turns white with mouse doubleClick/press.
+ * no image displayed
+ */
+
+ _main.default.prototype._ondblclick = function(e) {
+ var context = this._isGlobal ? window : this;
+ if (typeof context.doubleClicked === 'function') {
+ var executeDefault = context.doubleClicked(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * For use with WebGL orbitControl.
+ * @property {Number} _mouseWheelDeltaY
+ * @readOnly
+ * @private
+ */
+ _main.default.prototype._mouseWheelDeltaY = 0;
+
+ /**
+ * For use with WebGL orbitControl.
+ * @property {Number} _pmouseWheelDeltaY
+ * @readOnly
+ * @private
+ */
+ _main.default.prototype._pmouseWheelDeltaY = 0;
+
+ /**
+ * The function mouseWheel() is executed every time a vertical mouse wheel
+ * event is detected either triggered by an actual mouse wheel or by a
+ * touchpad.
+ * The event.delta property returns the amount the mouse wheel
+ * have scrolled. The values can be positive or negative depending on the
+ * scroll direction (on OS X with "natural" scrolling enabled, the signs
+ * are inverted).
+ * Browsers may have different default behaviors attached to various
+ * mouse events. To prevent any default behavior for this event, add
+ * "return false" to the end of the method.
+ * Due to the current support of the "wheel" event on Safari, the function
+ * may only work as expected if "return false" is included while using Safari.
+ *
+ * @method mouseWheel
+ * @param {Object} [event] optional WheelEvent callback argument.
+ *
+ * @example
+ *
+ *
+ * let pos = 25;
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(25, pos, 50, 50);
+ * }
+ *
+ * function mouseWheel(event) {
+ * print(event.delta);
+ * //move the square according to the vertical scroll amount
+ * pos += event.delta;
+ * //uncomment to block page scrolling
+ * //return false;
+ * }
+ *
+ *
+ *
+ * @alt
+ * black 50x50 rect moves up and down with vertical scroll. fuchsia background
+ *
+ */
+ _main.default.prototype._onwheel = function(e) {
+ var context = this._isGlobal ? window : this;
+ this._setProperty('_mouseWheelDeltaY', e.deltaY);
+ if (typeof context.mouseWheel === 'function') {
+ e.delta = e.deltaY;
+ var executeDefault = context.mouseWheel(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * The function requestPointerLock()
+ * locks the pointer to its current position and makes it invisible.
+ * Use movedX and movedY to get the difference the mouse was moved since
+ * the last call of draw
+ * Note that not all browsers support this feature
+ * This enables you to create experiences that aren't limited by the mouse moving out of the screen
+ * even if it is repeatedly moved into one direction.
+ * For example a first person perspective experience
+ *
+ * @method requestPointerLock
+ * @example
+ *
+ *
+ * let cam;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * requestPointerLock();
+ * cam = createCamera();
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * cam.pan(-movedX * 0.001);
+ * cam.tilt(movedY * 0.001);
+ * sphere(25);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 3D scene moves according to mouse mouse movement in a first person perspective
+ *
+ */
+ _main.default.prototype.requestPointerLock = function() {
+ // pointer lock object forking for cross browser
+ var canvas = this._curElement.elt;
+ canvas.requestPointerLock =
+ canvas.requestPointerLock || canvas.mozRequestPointerLock;
+ if (!canvas.requestPointerLock) {
+ console.log('requestPointerLock is not implemented in this browser');
+ return false;
+ }
+ canvas.requestPointerLock();
+ return true;
+ };
+
+ /**
+ * The function exitPointerLock()
+ * exits a previously triggered pointer Lock
+ * for example to make ui elements usable etc
+ *
+ * @method exitPointerLock
+ * @example
+ *
+ *
+ * //click the canvas to lock the pointer
+ * //click again to exit (otherwise escape)
+ * let locked = false;
+ * function draw() {
+ * background(237, 34, 93);
+ * }
+ * function mouseClicked() {
+ * if (!locked) {
+ * locked = true;
+ * requestPointerLock();
+ * } else {
+ * exitPointerLock();
+ * locked = false;
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * cursor gets locked / unlocked on mouse-click
+ *
+ */
+ _main.default.prototype.exitPointerLock = function() {
+ document.exitPointerLock();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27 }
+ ],
+ 47: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Events
+ * @submodule Touch
+ * @for p5
+ * @requires core
+ */ /**
+ * The system variable touches[] contains an array of the positions of all
+ * current touch points, relative to (0, 0) of the canvas, and IDs identifying a
+ * unique touch as it moves. Each element in the array is an object with x, y,
+ * and id properties.
+ *
+ * The touches[] array is not supported on Safari and IE on touch-based
+ * desktops (laptops).
+ *
+ * @property {Object[]} touches
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * // On a touchscreen device, touch
+ * // the canvas using one or more fingers
+ * // at the same time
+ * function draw() {
+ * clear();
+ * let display = touches.length + ' touches';
+ * text(display, 5, 10);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Number of touches currently registered are displayed on the canvas
+ */ _main.default.prototype.touches = [];
+ _main.default.prototype._updateTouchCoords = function(e) {
+ if (this._curElement !== null) {
+ var touches = [];
+ for (var i = 0; i < e.touches.length; i++) {
+ touches[i] = getTouchInfo(
+ this._curElement.elt,
+ this.width,
+ this.height,
+ e,
+ i
+ );
+ }
+ this._setProperty('touches', touches);
+ }
+ };
+
+ function getTouchInfo(canvas, w, h, e) {
+ var i = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+ var rect = canvas.getBoundingClientRect();
+ var sx = canvas.scrollWidth / w || 1;
+ var sy = canvas.scrollHeight / h || 1;
+ var touch = e.touches[i] || e.changedTouches[i];
+ return {
+ x: (touch.clientX - rect.left) / sx,
+ y: (touch.clientY - rect.top) / sy,
+ winX: touch.clientX,
+ winY: touch.clientY,
+ id: touch.identifier
+ };
+ }
+
+ /**
+ * The touchStarted() function is called once after every time a touch is
+ * registered. If no touchStarted() function is defined, the mousePressed()
+ * function will be called instead if it is defined.
+ * Browsers may have different default behaviors attached to various touch
+ * events. To prevent any default behavior for this event, add "return false"
+ * to the end of the method.
+ *
+ * @method touchStarted
+ * @param {Object} [event] optional TouchEvent callback argument.
+ * @example
+ *
+ *
+ * // Touch within the image to change
+ * // the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchStarted() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function touchStarted() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchStarted(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect turns white with touch event.
+ * no image displayed
+ */
+ _main.default.prototype._ontouchstart = function(e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', true);
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ this._updateMouseCoords(); // reset pmouseXY at the start of each touch event
+
+ if (typeof context.touchStarted === 'function') {
+ executeDefault = context.touchStarted(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ // only safari needs this manual fallback for consistency
+ } else if (
+ navigator.userAgent.toLowerCase().includes('safari') &&
+ typeof context.touchStarted === 'function'
+ ) {
+ executeDefault = context.mousePressed(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * The touchMoved() function is called every time a touch move is registered.
+ * If no touchMoved() function is defined, the mouseDragged() function will
+ * be called instead if it is defined.
+ * Browsers may have different default behaviors attached to various touch
+ * events. To prevent any default behavior for this event, add "return false"
+ * to the end of the method.
+ *
+ * @method touchMoved
+ * @param {Object} [event] optional TouchEvent callback argument.
+ * @example
+ *
+ *
+ * // Move your finger across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function touchMoved() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchMoved(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect turns lighter with touch until white. resets
+ * no image displayed
+ *
+ */
+ _main.default.prototype._ontouchmove = function(e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ if (typeof context.touchMoved === 'function') {
+ executeDefault = context.touchMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.mouseDragged === 'function') {
+ executeDefault = context.mouseDragged(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * The touchEnded() function is called every time a touch ends. If no
+ * touchEnded() function is defined, the mouseReleased() function will be
+ * called instead if it is defined.
+ * Browsers may have different default behaviors attached to various touch
+ * events. To prevent any default behavior for this event, add "return false"
+ * to the end of the method.
+ *
+ * @method touchEnded
+ * @param {Object} [event] optional TouchEvent callback argument.
+ * @example
+ *
+ *
+ * // Release touch within the image to
+ * // change the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchEnded() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function touchEnded() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchEnded(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 50x50 black rect turns white with touch.
+ * no image displayed
+ *
+ */
+ _main.default.prototype._ontouchend = function(e) {
+ this._setProperty('mouseIsPressed', false);
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ if (typeof context.touchEnded === 'function') {
+ executeDefault = context.touchEnded(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.mouseReleased === 'function') {
+ executeDefault = context.mouseReleased(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 48: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0; /*global ImageData:false */
+
+ /**
+ * This module defines the filters for use with image buffers.
+ *
+ * This module is basically a collection of functions stored in an object
+ * as opposed to modules. The functions are destructive, modifying
+ * the passed in canvas rather than creating a copy.
+ *
+ * Generally speaking users of this module will use the Filters.apply method
+ * on a canvas to create an effect.
+ *
+ * A number of functions are borrowed/adapted from
+ * http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ * or the java processing implementation.
+ */
+
+ var Filters = {};
+
+ /*
+ * Helper functions
+ */
+
+ /**
+ * Returns the pixel buffer for a canvas
+ *
+ * @private
+ *
+ * @param {Canvas|ImageData} canvas the canvas to get pixels from
+ * @return {Uint8ClampedArray} a one-dimensional array containing
+ * the data in thc RGBA order, with integer
+ * values between 0 and 255
+ */
+ Filters._toPixels = function(canvas) {
+ if (canvas instanceof ImageData) {
+ return canvas.data;
+ } else {
+ return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height)
+ .data;
+ }
+ };
+
+ /**
+ * Returns a 32 bit number containing ARGB data at ith pixel in the
+ * 1D array containing pixels data.
+ *
+ * @private
+ *
+ * @param {Uint8ClampedArray} data array returned by _toPixels()
+ * @param {Integer} i index of a 1D Image Array
+ * @return {Integer} 32 bit integer value representing
+ * ARGB value.
+ */
+ Filters._getARGB = function(data, i) {
+ var offset = i * 4;
+ return (
+ ((data[offset + 3] << 24) & 0xff000000) |
+ ((data[offset] << 16) & 0x00ff0000) |
+ ((data[offset + 1] << 8) & 0x0000ff00) |
+ (data[offset + 2] & 0x000000ff)
+ );
+ };
+
+ /**
+ * Modifies pixels RGBA values to values contained in the data object.
+ *
+ * @private
+ *
+ * @param {Uint8ClampedArray} pixels array returned by _toPixels()
+ * @param {Int32Array} data source 1D array where each value
+ * represents ARGB values
+ */
+ Filters._setPixels = function(pixels, data) {
+ var offset = 0;
+ for (var i = 0, al = pixels.length; i < al; i++) {
+ offset = i * 4;
+ pixels[offset + 0] = (data[i] & 0x00ff0000) >>> 16;
+ pixels[offset + 1] = (data[i] & 0x0000ff00) >>> 8;
+ pixels[offset + 2] = data[i] & 0x000000ff;
+ pixels[offset + 3] = (data[i] & 0xff000000) >>> 24;
+ }
+ };
+
+ /**
+ * Returns the ImageData object for a canvas
+ * https://developer.mozilla.org/en-US/docs/Web/API/ImageData
+ *
+ * @private
+ *
+ * @param {Canvas|ImageData} canvas canvas to get image data from
+ * @return {ImageData} Holder of pixel data (and width and
+ * height) for a canvas
+ */
+ Filters._toImageData = function(canvas) {
+ if (canvas instanceof ImageData) {
+ return canvas;
+ } else {
+ return canvas
+ .getContext('2d')
+ .getImageData(0, 0, canvas.width, canvas.height);
+ }
+ };
+
+ /**
+ * Returns a blank ImageData object.
+ *
+ * @private
+ *
+ * @param {Integer} width
+ * @param {Integer} height
+ * @return {ImageData}
+ */
+ Filters._createImageData = function(width, height) {
+ Filters._tmpCanvas = document.createElement('canvas');
+ Filters._tmpCtx = Filters._tmpCanvas.getContext('2d');
+ return this._tmpCtx.createImageData(width, height);
+ };
+
+ /**
+ * Applys a filter function to a canvas.
+ *
+ * The difference between this and the actual filter functions defined below
+ * is that the filter functions generally modify the pixel buffer but do
+ * not actually put that data back to the canvas (where it would actually
+ * update what is visible). By contrast this method does make the changes
+ * actually visible in the canvas.
+ *
+ * The apply method is the method that callers of this module would generally
+ * use. It has been separated from the actual filters to support an advanced
+ * use case of creating a filter chain that executes without actually updating
+ * the canvas in between everystep.
+ *
+ * @private
+ * @param {HTMLCanvasElement} canvas [description]
+ * @param {function(ImageData,Object)} func [description]
+ * @param {Object} filterParam [description]
+ */
+ Filters.apply = function(canvas, func, filterParam) {
+ var pixelsState = canvas.getContext('2d');
+ var imageData = pixelsState.getImageData(0, 0, canvas.width, canvas.height);
+
+ //Filters can either return a new ImageData object, or just modify
+ //the one they received.
+ var newImageData = func(imageData, filterParam);
+ if (newImageData instanceof ImageData) {
+ pixelsState.putImageData(
+ newImageData,
+ 0,
+ 0,
+ 0,
+ 0,
+ canvas.width,
+ canvas.height
+ );
+ } else {
+ pixelsState.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
+ }
+ };
+
+ /*
+ * Filters
+ */
+
+ /**
+ * Converts the image to black and white pixels depending if they are above or
+ * below the threshold defined by the level parameter. The parameter must be
+ * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
+ *
+ * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ *
+ * @private
+ * @param {Canvas} canvas
+ * @param {Float} level
+ */
+ Filters.threshold = function(canvas, level) {
+ var pixels = Filters._toPixels(canvas);
+
+ if (level === undefined) {
+ level = 0.5;
+ }
+ var thresh = Math.floor(level * 255);
+
+ for (var i = 0; i < pixels.length; i += 4) {
+ var r = pixels[i];
+ var g = pixels[i + 1];
+ var b = pixels[i + 2];
+ var gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ var val = void 0;
+ if (gray >= thresh) {
+ val = 255;
+ } else {
+ val = 0;
+ }
+ pixels[i] = pixels[i + 1] = pixels[i + 2] = val;
+ }
+ };
+
+ /**
+ * Converts any colors in the image to grayscale equivalents.
+ * No parameter is used.
+ *
+ * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ *
+ * @private
+ * @param {Canvas} canvas
+ */
+ Filters.gray = function(canvas) {
+ var pixels = Filters._toPixels(canvas);
+
+ for (var i = 0; i < pixels.length; i += 4) {
+ var r = pixels[i];
+ var g = pixels[i + 1];
+ var b = pixels[i + 2];
+
+ // CIE luminance for RGB
+ var gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ pixels[i] = pixels[i + 1] = pixels[i + 2] = gray;
+ }
+ };
+
+ /**
+ * Sets the alpha channel to entirely opaque. No parameter is used.
+ *
+ * @private
+ * @param {Canvas} canvas
+ */
+ Filters.opaque = function(canvas) {
+ var pixels = Filters._toPixels(canvas);
+
+ for (var i = 0; i < pixels.length; i += 4) {
+ pixels[i + 3] = 255;
+ }
+
+ return pixels;
+ };
+
+ /**
+ * Sets each pixel to its inverse value. No parameter is used.
+ * @private
+ * @param {Canvas} canvas
+ */
+ Filters.invert = function(canvas) {
+ var pixels = Filters._toPixels(canvas);
+
+ for (var i = 0; i < pixels.length; i += 4) {
+ pixels[i] = 255 - pixels[i];
+ pixels[i + 1] = 255 - pixels[i + 1];
+ pixels[i + 2] = 255 - pixels[i + 2];
+ }
+ };
+
+ /**
+ * Limits each channel of the image to the number of colors specified as
+ * the parameter. The parameter can be set to values between 2 and 255, but
+ * results are most noticeable in the lower ranges.
+ *
+ * Adapted from java based processing implementation
+ *
+ * @private
+ * @param {Canvas} canvas
+ * @param {Integer} level
+ */
+ Filters.posterize = function(canvas, level) {
+ var pixels = Filters._toPixels(canvas);
+
+ if (level < 2 || level > 255) {
+ throw new Error(
+ 'Level must be greater than 2 and less than 255 for posterize'
+ );
+ }
+
+ var levels1 = level - 1;
+ for (var i = 0; i < pixels.length; i += 4) {
+ var rlevel = pixels[i];
+ var glevel = pixels[i + 1];
+ var blevel = pixels[i + 2];
+
+ pixels[i] = ((rlevel * level) >> 8) * 255 / levels1;
+ pixels[i + 1] = ((glevel * level) >> 8) * 255 / levels1;
+ pixels[i + 2] = ((blevel * level) >> 8) * 255 / levels1;
+ }
+ };
+
+ /**
+ * reduces the bright areas in an image
+ * @private
+ * @param {Canvas} canvas
+ *
+ */
+ Filters.dilate = function(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ var currIdx = 0;
+ var maxIdx = pixels.length ? pixels.length / 4 : 0;
+ var out = new Int32Array(maxIdx);
+ var currRowIdx, maxRowIdx, colOrig, colOut, currLum;
+
+ var idxRight, idxLeft, idxUp, idxDown;
+ var colRight, colLeft, colUp, colDown;
+ var lumRight, lumLeft, lumUp, lumDown;
+
+ while (currIdx < maxIdx) {
+ currRowIdx = currIdx;
+ maxRowIdx = currIdx + canvas.width;
+ while (currIdx < maxRowIdx) {
+ colOrig = colOut = Filters._getARGB(pixels, currIdx);
+ idxLeft = currIdx - 1;
+ idxRight = currIdx + 1;
+ idxUp = currIdx - canvas.width;
+ idxDown = currIdx + canvas.width;
+
+ if (idxLeft < currRowIdx) {
+ idxLeft = currIdx;
+ }
+ if (idxRight >= maxRowIdx) {
+ idxRight = currIdx;
+ }
+ if (idxUp < 0) {
+ idxUp = 0;
+ }
+ if (idxDown >= maxIdx) {
+ idxDown = currIdx;
+ }
+ colUp = Filters._getARGB(pixels, idxUp);
+ colLeft = Filters._getARGB(pixels, idxLeft);
+ colDown = Filters._getARGB(pixels, idxDown);
+ colRight = Filters._getARGB(pixels, idxRight);
+
+ //compute luminance
+ currLum =
+ 77 * ((colOrig >> 16) & 0xff) +
+ 151 * ((colOrig >> 8) & 0xff) +
+ 28 * (colOrig & 0xff);
+ lumLeft =
+ 77 * ((colLeft >> 16) & 0xff) +
+ 151 * ((colLeft >> 8) & 0xff) +
+ 28 * (colLeft & 0xff);
+ lumRight =
+ 77 * ((colRight >> 16) & 0xff) +
+ 151 * ((colRight >> 8) & 0xff) +
+ 28 * (colRight & 0xff);
+ lumUp =
+ 77 * ((colUp >> 16) & 0xff) +
+ 151 * ((colUp >> 8) & 0xff) +
+ 28 * (colUp & 0xff);
+ lumDown =
+ 77 * ((colDown >> 16) & 0xff) +
+ 151 * ((colDown >> 8) & 0xff) +
+ 28 * (colDown & 0xff);
+
+ if (lumLeft > currLum) {
+ colOut = colLeft;
+ currLum = lumLeft;
+ }
+ if (lumRight > currLum) {
+ colOut = colRight;
+ currLum = lumRight;
+ }
+ if (lumUp > currLum) {
+ colOut = colUp;
+ currLum = lumUp;
+ }
+ if (lumDown > currLum) {
+ colOut = colDown;
+ currLum = lumDown;
+ }
+ out[currIdx++] = colOut;
+ }
+ }
+ Filters._setPixels(pixels, out);
+ };
+
+ /**
+ * increases the bright areas in an image
+ * @private
+ * @param {Canvas} canvas
+ *
+ */
+ Filters.erode = function(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ var currIdx = 0;
+ var maxIdx = pixels.length ? pixels.length / 4 : 0;
+ var out = new Int32Array(maxIdx);
+ var currRowIdx, maxRowIdx, colOrig, colOut, currLum;
+ var idxRight, idxLeft, idxUp, idxDown;
+ var colRight, colLeft, colUp, colDown;
+ var lumRight, lumLeft, lumUp, lumDown;
+
+ while (currIdx < maxIdx) {
+ currRowIdx = currIdx;
+ maxRowIdx = currIdx + canvas.width;
+ while (currIdx < maxRowIdx) {
+ colOrig = colOut = Filters._getARGB(pixels, currIdx);
+ idxLeft = currIdx - 1;
+ idxRight = currIdx + 1;
+ idxUp = currIdx - canvas.width;
+ idxDown = currIdx + canvas.width;
+
+ if (idxLeft < currRowIdx) {
+ idxLeft = currIdx;
+ }
+ if (idxRight >= maxRowIdx) {
+ idxRight = currIdx;
+ }
+ if (idxUp < 0) {
+ idxUp = 0;
+ }
+ if (idxDown >= maxIdx) {
+ idxDown = currIdx;
+ }
+ colUp = Filters._getARGB(pixels, idxUp);
+ colLeft = Filters._getARGB(pixels, idxLeft);
+ colDown = Filters._getARGB(pixels, idxDown);
+ colRight = Filters._getARGB(pixels, idxRight);
+
+ //compute luminance
+ currLum =
+ 77 * ((colOrig >> 16) & 0xff) +
+ 151 * ((colOrig >> 8) & 0xff) +
+ 28 * (colOrig & 0xff);
+ lumLeft =
+ 77 * ((colLeft >> 16) & 0xff) +
+ 151 * ((colLeft >> 8) & 0xff) +
+ 28 * (colLeft & 0xff);
+ lumRight =
+ 77 * ((colRight >> 16) & 0xff) +
+ 151 * ((colRight >> 8) & 0xff) +
+ 28 * (colRight & 0xff);
+ lumUp =
+ 77 * ((colUp >> 16) & 0xff) +
+ 151 * ((colUp >> 8) & 0xff) +
+ 28 * (colUp & 0xff);
+ lumDown =
+ 77 * ((colDown >> 16) & 0xff) +
+ 151 * ((colDown >> 8) & 0xff) +
+ 28 * (colDown & 0xff);
+
+ if (lumLeft < currLum) {
+ colOut = colLeft;
+ currLum = lumLeft;
+ }
+ if (lumRight < currLum) {
+ colOut = colRight;
+ currLum = lumRight;
+ }
+ if (lumUp < currLum) {
+ colOut = colUp;
+ currLum = lumUp;
+ }
+ if (lumDown < currLum) {
+ colOut = colDown;
+ currLum = lumDown;
+ }
+
+ out[currIdx++] = colOut;
+ }
+ }
+ Filters._setPixels(pixels, out);
+ };
+
+ // BLUR
+
+ // internal kernel stuff for the gaussian blur filter
+ var blurRadius;
+ var blurKernelSize;
+ var blurKernel;
+ var blurMult;
+
+ /*
+ * Port of https://github.com/processing/processing/blob/
+ * master/core/src/processing/core/PImage.java#L1250
+ *
+ * Optimized code for building the blur kernel.
+ * further optimized blur code (approx. 15% for radius=20)
+ * bigger speed gains for larger radii (~30%)
+ * added support for various image types (ALPHA, RGB, ARGB)
+ * [toxi 050728]
+ */
+ function buildBlurKernel(r) {
+ var radius = (r * 3.5) | 0;
+ radius = radius < 1 ? 1 : radius < 248 ? radius : 248;
+
+ if (blurRadius !== radius) {
+ blurRadius = radius;
+ blurKernelSize = (1 + blurRadius) << 1;
+ blurKernel = new Int32Array(blurKernelSize);
+ blurMult = new Array(blurKernelSize);
+ for (var l = 0; l < blurKernelSize; l++) {
+ blurMult[l] = new Int32Array(256);
+ }
+
+ var bk, bki;
+ var bm, bmi;
+
+ for (var i = 1, radiusi = radius - 1; i < radius; i++) {
+ blurKernel[radius + i] = blurKernel[radiusi] = bki = radiusi * radiusi;
+ bm = blurMult[radius + i];
+ bmi = blurMult[radiusi--];
+ for (var j = 0; j < 256; j++) {
+ bm[j] = bmi[j] = bki * j;
+ }
+ }
+ bk = blurKernel[radius] = radius * radius;
+ bm = blurMult[radius];
+
+ for (var k = 0; k < 256; k++) {
+ bm[k] = bk * k;
+ }
+ }
+ }
+
+ // Port of https://github.com/processing/processing/blob/
+ // master/core/src/processing/core/PImage.java#L1433
+ function blurARGB(canvas, radius) {
+ var pixels = Filters._toPixels(canvas);
+ var width = canvas.width;
+ var height = canvas.height;
+ var numPackedPixels = width * height;
+ var argb = new Int32Array(numPackedPixels);
+ for (var j = 0; j < numPackedPixels; j++) {
+ argb[j] = Filters._getARGB(pixels, j);
+ }
+ var sum, cr, cg, cb, ca;
+ var read, ri, ym, ymi, bk0;
+ var a2 = new Int32Array(numPackedPixels);
+ var r2 = new Int32Array(numPackedPixels);
+ var g2 = new Int32Array(numPackedPixels);
+ var b2 = new Int32Array(numPackedPixels);
+ var yi = 0;
+ buildBlurKernel(radius);
+ var x, y, i;
+ var bm;
+ for (y = 0; y < height; y++) {
+ for (x = 0; x < width; x++) {
+ cb = cg = cr = ca = sum = 0;
+ read = x - blurRadius;
+ if (read < 0) {
+ bk0 = -read;
+ read = 0;
+ } else {
+ if (read >= width) {
+ break;
+ }
+ bk0 = 0;
+ }
+ for (i = bk0; i < blurKernelSize; i++) {
+ if (read >= width) {
+ break;
+ }
+ var c = argb[read + yi];
+ bm = blurMult[i];
+ ca += bm[(c & -16777216) >>> 24];
+ cr += bm[(c & 16711680) >> 16];
+ cg += bm[(c & 65280) >> 8];
+ cb += bm[c & 255];
+ sum += blurKernel[i];
+ read++;
+ }
+ ri = yi + x;
+ a2[ri] = ca / sum;
+ r2[ri] = cr / sum;
+ g2[ri] = cg / sum;
+ b2[ri] = cb / sum;
+ }
+ yi += width;
+ }
+ yi = 0;
+ ym = -blurRadius;
+ ymi = ym * width;
+ for (y = 0; y < height; y++) {
+ for (x = 0; x < width; x++) {
+ cb = cg = cr = ca = sum = 0;
+ if (ym < 0) {
+ bk0 = ri = -ym;
+ read = x;
+ } else {
+ if (ym >= height) {
+ break;
+ }
+ bk0 = 0;
+ ri = ym;
+ read = x + ymi;
+ }
+ for (i = bk0; i < blurKernelSize; i++) {
+ if (ri >= height) {
+ break;
+ }
+ bm = blurMult[i];
+ ca += bm[a2[read]];
+ cr += bm[r2[read]];
+ cg += bm[g2[read]];
+ cb += bm[b2[read]];
+ sum += blurKernel[i];
+ ri++;
+ read += width;
+ }
+ argb[x + yi] =
+ ((ca / sum) << 24) | ((cr / sum) << 16) | ((cg / sum) << 8) | (cb / sum);
+ }
+ yi += width;
+ ymi += width;
+ ym++;
+ }
+ Filters._setPixels(pixels, argb);
+ }
+
+ Filters.blur = function(canvas, radius) {
+ blurARGB(canvas, radius);
+ };
+ var _default = Filters;
+ exports.default = _default;
+ },
+ {}
+ ],
+ 49: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _omggif = _interopRequireDefault(_dereq_('omggif'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /** // This is not global, but ESLint is not aware that
+ * @module Image
+ * @submodule Image
+ * @for p5
+ * @requires core
+ */ /**
+ * This module defines the p5 methods for the p5.Image class
+ * for drawing images to the main display canvas.
+ */
+ // this module is implicitly enclosed with Browserify: this overrides the
+ // redefined-global error and permits using the name "frames" for the array
+ // of saved animation frames.
+ /* global frames:true */ var frames = []; // eslint-disable-line no-unused-vars
+ /**
+ * Creates a new p5.Image (the datatype for storing images). This provides a
+ * fresh buffer of pixels to play with. Set the size of the buffer with the
+ * width and height parameters.
+ *
+ * .pixels gives access to an array containing the values for all the pixels
+ * in the display window.
+ * These values are numbers. This array is the size (including an appropriate
+ * factor for the pixelDensity) of the display window x4,
+ * representing the R, G, B, A values in order for each pixel, moving from
+ * left to right across each row, then down each column. See .pixels for
+ * more info. It may also be simpler to use set() or get().
+ *
+ * Before accessing the pixels of an image, the data must loaded with the
+ * loadPixels() function. After the array data has been modified, the
+ * updatePixels() function must be run to update the changes.
+ *
+ * @method createImage
+ * @param {Integer} width width in pixels
+ * @param {Integer} height height in pixels
+ * @return {p5.Image} the p5.Image object
+ * @example
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ * image(img, 34, 34);
+ *
+ *
+ *
+ *
+ *
+ * let pink = color(255, 102, 204);
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (img.width * d) * (img.height / 2 * d);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * img.pixels[i] = red(pink);
+ * img.pixels[i + 1] = green(pink);
+ * img.pixels[i + 2] = blue(pink);
+ * img.pixels[i + 3] = alpha(pink);
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ *
+ * @alt
+ * 66x66 dark turquoise rect in center of canvas.
+ * 2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas
+ * no image displayed
+ *
+ */ _main.default.prototype.createImage = function(width, height) {
+ _main.default._validateParameters('createImage', arguments);
+ return new _main.default.Image(width, height);
+ };
+
+ /**
+ * Save the current canvas as an image. The browser will either save the
+ * file immediately, or prompt the user with a dialogue window.
+ *
+ * @method saveCanvas
+ * @param {p5.Element|HTMLCanvasElement} selectedCanvas a variable
+ * representing a specific html5 canvas (optional)
+ * @param {String} [filename]
+ * @param {String} [extension] 'jpg' or 'png'
+ *
+ * @example
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(255, 0, 0);
+ * saveCanvas(c, 'myCanvas', 'jpg');
+ * }
+ *
+ *
+ * // note that this example has the same result as above
+ * // if no canvas is specified, defaults to main canvas
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(255, 0, 0);
+ * saveCanvas('myCanvas', 'jpg');
+ *
+ * // all of the following are valid
+ * saveCanvas(c, 'myCanvas', 'jpg');
+ * saveCanvas(c, 'myCanvas.jpg');
+ * saveCanvas(c, 'myCanvas');
+ * saveCanvas(c);
+ * saveCanvas('myCanvas', 'png');
+ * saveCanvas('myCanvas');
+ * saveCanvas();
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ * no image displayed
+ * no image displayed
+ */
+ /**
+ * @method saveCanvas
+ * @param {String} [filename]
+ * @param {String} [extension]
+ */
+ _main.default.prototype.saveCanvas = function() {
+ _main.default._validateParameters('saveCanvas', arguments);
+
+ // copy arguments to array
+ var args = [].slice.call(arguments);
+ var htmlCanvas, filename, extension;
+
+ if (arguments[0] instanceof HTMLCanvasElement) {
+ htmlCanvas = arguments[0];
+ args.shift();
+ } else if (arguments[0] instanceof _main.default.Element) {
+ htmlCanvas = arguments[0].elt;
+ args.shift();
+ } else {
+ htmlCanvas = this._curElement && this._curElement.elt;
+ }
+
+ if (args.length >= 1) {
+ filename = args[0];
+ }
+ if (args.length >= 2) {
+ extension = args[1];
+ }
+
+ extension =
+ extension ||
+ _main.default.prototype._checkFileExtension(filename, extension)[1] ||
+ 'png';
+
+ var mimeType;
+ switch (extension) {
+ default:
+ //case 'png':
+ mimeType = 'image/png';
+ break;
+ case 'jpeg':
+ case 'jpg':
+ mimeType = 'image/jpeg';
+ break;
+ }
+
+ htmlCanvas.toBlob(function(blob) {
+ _main.default.prototype.downloadFile(blob, filename, extension);
+ }, mimeType);
+ };
+
+ _main.default.prototype.saveGif = function(pImg, filename) {
+ var props = pImg.gifProperties;
+
+ //convert loopLimit back into Netscape Block formatting
+ var loopLimit = props.loopLimit;
+ if (loopLimit === 1) {
+ loopLimit = null;
+ } else if (loopLimit === null) {
+ loopLimit = 0;
+ }
+ var gifFormatDelay = props.delay / 10;
+ var opts = {
+ loop: loopLimit,
+ delay: gifFormatDelay
+ };
+
+ var buffer = new Uint8Array(
+ pImg.width * pImg.height * props.numFrames * gifFormatDelay
+ );
+
+ var gifWriter = new _omggif.default.GifWriter(
+ buffer,
+ pImg.width,
+ pImg.height,
+ opts
+ );
+ var palette = [];
+ //loop over frames and build pixel -> palette index for each
+ for (var i = 0; i < props.numFrames; i++) {
+ var pixelPaletteIndex = new Uint8Array(pImg.width * pImg.height);
+ var data = props.frames[i].data;
+ var dataLength = data.length;
+ for (var j = 0, k = 0; j < dataLength; j += 4, k++) {
+ var r = data[j + 0];
+ var g = data[j + 1];
+ var b = data[j + 2];
+ var color = (r << 16) | (g << 8) | (b << 0);
+ var index = palette.indexOf(color);
+ if (index === -1) {
+ pixelPaletteIndex[k] = palette.length;
+ palette.push(color);
+ } else {
+ pixelPaletteIndex[k] = index;
+ }
+ }
+ // force palette to be power of 2
+ var powof2 = 1;
+ while (powof2 < palette.length) {
+ powof2 <<= 1;
+ }
+ palette.length = powof2;
+ opts.palette = new Uint32Array(palette);
+ gifWriter.addFrame(0, 0, pImg.width, pImg.height, pixelPaletteIndex, opts);
+ }
+ gifWriter.end();
+ var extension = 'gif';
+ var blob = new Blob([buffer], { type: 'image/gif' });
+ _main.default.prototype.downloadFile(blob, filename, extension);
+ };
+
+ /**
+ * Capture a sequence of frames that can be used to create a movie.
+ * Accepts a callback. For example, you may wish to send the frames
+ * to a server where they can be stored or converted into a movie.
+ * If no callback is provided, the browser will pop up save dialogues in an
+ * attempt to download all of the images that have just been created. With the
+ * callback provided the image data isn't saved by default but instead passed
+ * as an argument to the callback function as an array of objects, with the
+ * size of array equal to the total number of frames.
+ *
+ * Note that saveFrames() will only save the first 15 frames of an animation.
+ * To export longer animations, you might look into a library like
+ * ccapture.js.
+ *
+ * @method saveFrames
+ * @param {String} filename
+ * @param {String} extension 'jpg' or 'png'
+ * @param {Number} duration Duration in seconds to save the frames for.
+ * @param {Number} framerate Framerate to save the frames in.
+ * @param {function(Array)} [callback] A callback function that will be executed
+ to handle the image data. This function
+ should accept an array as argument. The
+ array will contain the specified number of
+ frames of objects. Each object has three
+ properties: imageData - an
+ image/octet-stream, filename and extension.
+ * @example
+ *
+ * function draw() {
+ * background(mouseX);
+ * }
+ *
+ * function mousePressed() {
+ * saveFrames('out', 'png', 1, 25, data => {
+ * print(data);
+ * });
+ * }
+
+ *
+ * @alt
+ * canvas background goes from light to dark with mouse x.
+ *
+ */
+ _main.default.prototype.saveFrames = function(
+ fName,
+ ext,
+ _duration,
+ _fps,
+ callback
+ ) {
+ _main.default._validateParameters('saveFrames', arguments);
+ var duration = _duration || 3;
+ duration = _main.default.prototype.constrain(duration, 0, 15);
+ duration = duration * 1000;
+ var fps = _fps || 15;
+ fps = _main.default.prototype.constrain(fps, 0, 22);
+ var count = 0;
+
+ var makeFrame = _main.default.prototype._makeFrame;
+ var cnv = this._curElement.elt;
+ var frameFactory = setInterval(function() {
+ makeFrame(fName + count, ext, cnv);
+ count++;
+ }, 1000 / fps);
+
+ setTimeout(function() {
+ clearInterval(frameFactory);
+ if (callback) {
+ callback(frames);
+ } else {
+ var _arr = frames;
+ for (var _i = 0; _i < _arr.length; _i++) {
+ var f = _arr[_i];
+ _main.default.prototype.downloadFile(f.imageData, f.filename, f.ext);
+ }
+ }
+ frames = []; // clear frames
+ }, duration + 0.01);
+ };
+
+ _main.default.prototype._makeFrame = function(filename, extension, _cnv) {
+ var cnv;
+ if (this) {
+ cnv = this._curElement.elt;
+ } else {
+ cnv = _cnv;
+ }
+ var mimeType;
+ if (!extension) {
+ extension = 'png';
+ mimeType = 'image/png';
+ } else {
+ switch (extension.toLowerCase()) {
+ case 'png':
+ mimeType = 'image/png';
+ break;
+ case 'jpeg':
+ mimeType = 'image/jpeg';
+ break;
+ case 'jpg':
+ mimeType = 'image/jpeg';
+ break;
+ default:
+ mimeType = 'image/png';
+ break;
+ }
+ }
+ var downloadMime = 'image/octet-stream';
+ var imageData = cnv.toDataURL(mimeType);
+ imageData = imageData.replace(mimeType, downloadMime);
+
+ var thisFrame = {};
+ thisFrame.imageData = imageData;
+ thisFrame.filename = filename;
+ thisFrame.ext = extension;
+ frames.push(thisFrame);
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27, omggif: 11 }
+ ],
+ 50: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _filters = _interopRequireDefault(_dereq_('./filters'));
+ var _helpers = _interopRequireDefault(_dereq_('../core/helpers'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _omggif = _interopRequireDefault(_dereq_('omggif'));
+
+ _dereq_('../core/error_helpers');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Image
+ * @submodule Loading & Displaying
+ * @for p5
+ * @requires core
+ */ /**
+ * Loads an image from a path and creates a p5.Image from it.
+ *
+ * The image may not be immediately available for rendering
+ * If you want to ensure that the image is ready before doing
+ * anything with it, place the loadImage() call in preload().
+ * You may also supply a callback function to handle the image when it's ready.
+ *
+ * The path to the image should be relative to the HTML file
+ * that links in your sketch. Loading an image from a URL or other
+ * remote location may be blocked due to your browser's built-in
+ * security.
+ *
+ * @method loadImage
+ * @param {String} path Path of the image to be loaded
+ * @param {function(p5.Image)} [successCallback] Function to be called once
+ * the image is loaded. Will be passed the
+ * p5.Image.
+ * @param {function(Event)} [failureCallback] called with event error if
+ * the image fails to load.
+ * @return {p5.Image} the p5.Image object
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // here we use a callback to display the image after loading
+ * loadImage('assets/laDefense.jpg', img => {
+ * image(img, 0, 0);
+ * });
+ * }
+ *
+ *
+ *
+ * @alt
+ * image of the underside of a white umbrella and grided ceililng above
+ * image of the underside of a white umbrella and grided ceililng above
+ *
+ */ _main.default.prototype.loadImage = function(
+ path,
+ successCallback,
+ failureCallback
+ ) {
+ _main.default._validateParameters('loadImage', arguments);
+ var pImg = new _main.default.Image(1, 1, this);
+ var self = this;
+
+ var req = new Request(path, {
+ method: 'GET',
+ mode: 'cors'
+ });
+
+ fetch(path, req).then(function(response) {
+ // GIF section
+ if (response.headers.get('content-type').includes('image/gif')) {
+ response.arrayBuffer().then(
+ function(arrayBuffer) {
+ if (arrayBuffer) {
+ var byteArray = new Uint8Array(arrayBuffer);
+ _createGif(
+ byteArray,
+ pImg,
+ successCallback,
+ failureCallback,
+ function(pImg) {
+ self._decrementPreload();
+ }.bind(self)
+ );
+ }
+ },
+ function(e) {
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ } else {
+ console.error(e);
+ }
+ }
+ );
+ } else {
+ // Non-GIF Section
+ var img = new Image();
+
+ img.onload = function() {
+ pImg.width = pImg.canvas.width = img.width;
+ pImg.height = pImg.canvas.height = img.height;
+
+ // Draw the image into the backing canvas of the p5.Image
+ pImg.drawingContext.drawImage(img, 0, 0);
+ pImg.modified = true;
+ if (typeof successCallback === 'function') {
+ successCallback(pImg);
+ }
+ self._decrementPreload();
+ };
+
+ img.onerror = function(e) {
+ _main.default._friendlyFileLoadError(0, img.src);
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ } else {
+ console.error(e);
+ }
+ };
+
+ // Set crossOrigin in case image is served with CORS headers.
+ // This will let us draw to the canvas without tainting it.
+ // See https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
+ // When using data-uris the file will be loaded locally
+ // so we don't need to worry about crossOrigin with base64 file types.
+ if (path.indexOf('data:image/') !== 0) {
+ img.crossOrigin = 'Anonymous';
+ }
+ // start loading the image
+ img.src = path;
+ }
+ pImg.modified = true;
+ });
+ return pImg;
+ };
+
+ /**
+ * Helper function for loading GIF-based images
+ *
+ */
+ function _createGif(
+ arrayBuffer,
+ pImg,
+ successCallback,
+ failureCallback,
+ finishCallback
+ ) {
+ var gifReader = new _omggif.default.GifReader(arrayBuffer);
+ pImg.width = pImg.canvas.width = gifReader.width;
+ pImg.height = pImg.canvas.height = gifReader.height;
+ var frames = [];
+ var numFrames = gifReader.numFrames();
+ var framePixels = new Uint8ClampedArray(pImg.width * pImg.height * 4);
+ // I didn't realize this at first but some GIFs encode with frame
+ // Reworking delay to be frame level will make it less powerful
+ // to modify for users. For now this works with 99% of GIFs that
+ // I can find and for those that it doesn't there is just a retiming
+ // of the frames, which would be minor for all but the strangest GIFs
+ var averageDelay = 0;
+ if (numFrames > 1) {
+ var loadGIFFrameIntoImage = function loadGIFFrameIntoImage(
+ frameNum,
+ gifReader
+ ) {
+ try {
+ gifReader.decodeAndBlitFrameRGBA(frameNum, framePixels);
+ } catch (e) {
+ _main.default._friendlyFileLoadError(8, pImg.src);
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ } else {
+ console.error(e);
+ }
+ }
+ };
+ for (var j = 0; j < numFrames; j++) {
+ var frameInfo = gifReader.frameInfo(j);
+ averageDelay += frameInfo.delay;
+ // Some GIFs are encoded so that they expect the previous frame
+ // to be under the current frame. This can occur at a sub-frame level
+ // There are possible disposal codes but I didn't encounter any
+ if (gifReader.frameInfo(j).disposal === 1 && j > 0) {
+ pImg.drawingContext.putImageData(frames[j - 1], 0, 0);
+ } else {
+ pImg.drawingContext.clearRect(0, 0, pImg.width, pImg.height);
+ framePixels = new Uint8ClampedArray(pImg.width * pImg.height * 4);
+ }
+ loadGIFFrameIntoImage(j, gifReader);
+ var imageData = new ImageData(framePixels, pImg.width, pImg.height);
+ pImg.drawingContext.putImageData(imageData, 0, 0);
+ frames.push(
+ pImg.drawingContext.getImageData(0, 0, pImg.width, pImg.height)
+ );
+ }
+
+ //Uses Netscape block encoding
+ //to repeat forever, this will be 0
+ //to repeat just once, this will be null
+ //to repeat N times (1 0 && sVal < iVal) {
+ return sVal;
+ } else {
+ return iVal;
+ }
+ }
+
+ /**
+ * Draw an image to the p5.js canvas.
+ *
+ * This function can be used with different numbers of parameters. The
+ * simplest use requires only three parameters: img, x, and y—where (x, y) is
+ * the position of the image. Two more parameters can optionally be added to
+ * specify the width and height of the image.
+ *
+ * This function can also be used with all eight Number parameters. To
+ * differentiate between all these parameters, p5.js uses the language of
+ * "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source
+ * image" (which corresponds to "sx", "sy", etc.) below. Specifying the
+ * "source image" dimensions can be useful when you want to display a
+ * subsection of the source image instead of the whole thing. Here's a diagram
+ * to explain further:
+ *
+ *
+ * @method image
+ * @param {p5.Image|p5.Element} img the image to display
+ * @param {Number} x the x-coordinate of the top-left corner of the image
+ * @param {Number} y the y-coordinate of the top-left corner of the image
+ * @param {Number} [width] the width to draw the image
+ * @param {Number} [height] the height to draw the image
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * // Top-left corner of the img is at (0, 0)
+ * // Width and height are the img's original width and height
+ * image(img, 0, 0);
+ * }
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * background(50);
+ * // Top-left corner of the img is at (10, 10)
+ * // Width and height are 50 x 50
+ * image(img, 10, 10, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * // Here, we use a callback to display the image after loading
+ * loadImage('assets/laDefense.jpg', img => {
+ * image(img, 0, 0);
+ * });
+ * }
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/gradient.png');
+ * }
+ * function setup() {
+ * // 1. Background image
+ * // Top-left corner of the img is at (0, 0)
+ * // Width and height are the img's original width and height, 100 x 100
+ * image(img, 0, 0);
+ * // 2. Top right image
+ * // Top-left corner of destination rectangle is at (50, 0)
+ * // Destination rectangle width and height are 40 x 20
+ * // The next parameters are relative to the source image:
+ * // - Starting at position (50, 50) on the source image, capture a 50 x 50
+ * // subsection
+ * // - Draw this subsection to fill the dimensions of the destination rectangle
+ * image(img, 50, 0, 40, 20, 50, 50, 50, 50);
+ * }
+ *
+ *
+ * @alt
+ * image of the underside of a white umbrella and gridded ceiling above
+ * image of the underside of a white umbrella and gridded ceiling above
+ *
+ */
+ /**
+ * @method image
+ * @param {p5.Image|p5.Element} img
+ * @param {Number} dx the x-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param {Number} dy the y-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param {Number} dWidth the width of the destination rectangle
+ * @param {Number} dHeight the height of the destination rectangle
+ * @param {Number} sx the x-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param {Number} sy the y-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param {Number} [sWidth] the width of the subsection of the
+ * source image to draw into the destination
+ * rectangle
+ * @param {Number} [sHeight] the height of the subsection of the
+ * source image to draw into the destination rectangle
+ */
+ _main.default.prototype.image = function(
+ img,
+ dx,
+ dy,
+ dWidth,
+ dHeight,
+ sx,
+ sy,
+ sWidth,
+ sHeight
+ ) {
+ // set defaults per spec: https://goo.gl/3ykfOq
+
+ _main.default._validateParameters('image', arguments);
+
+ var defW = img.width;
+ var defH = img.height;
+
+ if (img.elt && img.elt.videoWidth && !img.canvas) {
+ // video no canvas
+ defW = img.elt.videoWidth;
+ defH = img.elt.videoHeight;
+ }
+
+ var _dx = dx;
+ var _dy = dy;
+ var _dw = dWidth || defW;
+ var _dh = dHeight || defH;
+ var _sx = sx || 0;
+ var _sy = sy || 0;
+ var _sw = sWidth || defW;
+ var _sh = sHeight || defH;
+
+ _sw = _sAssign(_sw, defW);
+ _sh = _sAssign(_sh, defH);
+
+ // This part needs cleanup and unit tests
+ // see issues https://github.com/processing/p5.js/issues/1741
+ // and https://github.com/processing/p5.js/issues/1673
+ var pd = 1;
+
+ if (img.elt && !img.canvas && img.elt.style.width) {
+ //if img is video and img.elt.size() has been used and
+ //no width passed to image()
+ if (img.elt.videoWidth && !dWidth) {
+ pd = img.elt.videoWidth;
+ } else {
+ //all other cases
+ pd = img.elt.width;
+ }
+ pd /= parseInt(img.elt.style.width, 10);
+ }
+
+ _sx *= pd;
+ _sy *= pd;
+ _sh *= pd;
+ _sw *= pd;
+
+ var vals = _helpers.default.modeAdjust(
+ _dx,
+ _dy,
+ _dw,
+ _dh,
+ this._renderer._imageMode
+ );
+
+ // tint the image if there is a tint
+ this._renderer.image(img, _sx, _sy, _sw, _sh, vals.x, vals.y, vals.w, vals.h);
+ };
+
+ /**
+ * Sets the fill value for displaying images. Images can be tinted to
+ * specified colors or made transparent by including an alpha value.
+ *
+ * To apply transparency to an image without affecting its color, use
+ * white as the tint color and specify an alpha value. For instance,
+ * tint(255, 128) will make an image 50% transparent (assuming the default
+ * alpha range of 0-255, which can be changed with colorMode()).
+ *
+ * The value for the gray parameter must be less than or equal to the current
+ * maximum value as specified by colorMode(). The default maximum value is
+ * 255.
+ *
+ *
+ * @method tint
+ * @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]
+ *
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(0, 153, 204); // Tint blue
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(0, 153, 204, 126); // Tint blue and set transparency
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(255, 126); // Apply transparency without changing color
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 2 side by side images of umbrella and ceiling, one image with blue tint
+ * Images of umbrella and ceiling, one half of image with blue tint
+ * 2 side by side images of umbrella and ceiling, one image translucent
+ *
+ */
+
+ /**
+ * @method tint
+ * @param {String} value a color string
+ */
+
+ /**
+ * @method tint
+ * @param {Number} gray a gray value
+ * @param {Number} [alpha]
+ */
+
+ /**
+ * @method tint
+ * @param {Number[]} values an array containing the red,green,blue &
+ * and alpha components of the color
+ */
+
+ /**
+ * @method tint
+ * @param {p5.Color} color the tint color
+ */
+ _main.default.prototype.tint = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('tint', args);
+ var c = this.color.apply(this, args);
+ this._renderer._tint = c.levels;
+ };
+
+ /**
+ * Removes the current fill value for displaying images and reverts to
+ * displaying images with their original hues.
+ *
+ * @method noTint
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * tint(0, 153, 204); // Tint blue
+ * image(img, 0, 0);
+ * noTint(); // Disable tint
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 2 side by side images of bricks, left image with blue tint
+ *
+ */
+ _main.default.prototype.noTint = function() {
+ this._renderer._tint = null;
+ };
+
+ /**
+ * Apply the current tint color to the input image, return the resulting
+ * canvas.
+ *
+ * @private
+ * @param {p5.Image} The image to be tinted
+ * @return {canvas} The resulting tinted canvas
+ *
+ */
+ _main.default.prototype._getTintedImageCanvas = function(img) {
+ if (!img.canvas) {
+ return img;
+ }
+ var pixels = _filters.default._toPixels(img.canvas);
+ var tmpCanvas = document.createElement('canvas');
+ tmpCanvas.width = img.canvas.width;
+ tmpCanvas.height = img.canvas.height;
+ var tmpCtx = tmpCanvas.getContext('2d');
+ var id = tmpCtx.createImageData(img.canvas.width, img.canvas.height);
+ var newPixels = id.data;
+
+ for (var i = 0; i < pixels.length; i += 4) {
+ var r = pixels[i];
+ var g = pixels[i + 1];
+ var b = pixels[i + 2];
+ var a = pixels[i + 3];
+
+ newPixels[i] = r * this._renderer._tint[0] / 255;
+ newPixels[i + 1] = g * this._renderer._tint[1] / 255;
+ newPixels[i + 2] = b * this._renderer._tint[2] / 255;
+ newPixels[i + 3] = a * this._renderer._tint[3] / 255;
+ }
+
+ tmpCtx.putImageData(id, 0, 0);
+ return tmpCanvas;
+ };
+
+ /**
+ * Set image mode. Modifies the location from which images are drawn by
+ * changing the way in which parameters given to image() are interpreted.
+ * The default mode is imageMode(CORNER), which interprets the second and
+ * third parameters of image() as the upper-left corner of the image. If
+ * two additional parameters are specified, they are used to set the image's
+ * width and height.
+ *
+ * imageMode(CORNERS) interprets the second and third parameters of image()
+ * as the location of one corner, and the fourth and fifth parameters as the
+ * opposite corner.
+ *
+ * imageMode(CENTER) interprets the second and third parameters of image()
+ * as the image's center point. If two additional parameters are specified,
+ * they are used to set the image's width and height.
+ *
+ * @method imageMode
+ * @param {Constant} mode either CORNER, CORNERS, or CENTER
+ * @example
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CORNER);
+ * image(img, 10, 10, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CORNERS);
+ * image(img, 10, 10, 90, 40);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CENTER);
+ * image(img, 50, 50, 80, 80);
+ * }
+ *
+ *
+ *
+ * @alt
+ * small square image of bricks
+ * horizontal rectangle image of bricks
+ * large square image of bricks
+ *
+ */
+ _main.default.prototype.imageMode = function(m) {
+ _main.default._validateParameters('imageMode', arguments);
+ if (
+ m === constants.CORNER ||
+ m === constants.CORNERS ||
+ m === constants.CENTER
+ ) {
+ this._renderer._imageMode = m;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 21,
+ '../core/error_helpers': 23,
+ '../core/helpers': 24,
+ '../core/main': 27,
+ './filters': 48,
+ omggif: 11
+ }
+ ],
+ 51: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _filters = _interopRequireDefault(_dereq_('./filters'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Image
+ * @submodule Image
+ * @requires core
+ * @requires constants
+ * @requires filters
+ */ /**
+ * This module defines the p5.Image class and P5 methods for
+ * drawing images to the main display canvas.
+ */ /*
+ * Class methods
+ */ /**
+ * Creates a new p5.Image. A p5.Image is a canvas backed representation of an
+ * image.
+ *
+ * p5 can display .gif, .jpg and .png images. Images may be displayed
+ * in 2D and 3D space. Before an image is used, it must be loaded with the
+ * loadImage() function. The p5.Image class contains fields for the width and
+ * height of the image, as well as an array called pixels[] that contains the
+ * values for every pixel in the image.
+ *
+ * The methods described below allow easy access to the image's pixels and
+ * alpha channel and simplify the process of compositing.
+ *
+ * Before using the pixels[] array, be sure to use the loadPixels() method on
+ * the image to make sure that the pixel data is properly loaded.
+ * @example
+ *
+ * function setup() {
+ * let img = createImage(100, 100); // same as new p5.Image(100, 100);
+ * img.loadPixels();
+ * createCanvas(100, 100);
+ * background(0);
+ *
+ * // helper for writing color to array
+ * function writeColor(image, x, y, red, green, blue, alpha) {
+ * let index = (x + y * width) * 4;
+ * image.pixels[index] = red;
+ * image.pixels[index + 1] = green;
+ * image.pixels[index + 2] = blue;
+ * image.pixels[index + 3] = alpha;
+ * }
+ *
+ * let x, y;
+ * // fill with random colors
+ * for (y = 0; y < img.height; y++) {
+ * for (x = 0; x < img.width; x++) {
+ * let red = random(255);
+ * let green = random(255);
+ * let blue = random(255);
+ * let alpha = 255;
+ * writeColor(img, x, y, red, green, blue, alpha);
+ * }
+ * }
+ *
+ * // draw a red line
+ * y = 0;
+ * for (x = 0; x < img.width; x++) {
+ * writeColor(img, x, y, 255, 0, 0, 255);
+ * }
+ *
+ * // draw a green line
+ * y = img.height - 1;
+ * for (x = 0; x < img.width; x++) {
+ * writeColor(img, x, y, 0, 255, 0, 255);
+ * }
+ *
+ * img.updatePixels();
+ * image(img, 0, 0);
+ * }
+ *
+ *
+ *
+ * @class p5.Image
+ * @param {Number} width
+ * @param {Number} height
+ */ _main.default.Image = function(width, height) {
+ /**
+ * Image width.
+ * @property {Number} width
+ * @readOnly
+ * @example
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * image(img, 0, 0);
+ * for (let i = 0; i < img.width; i++) {
+ * let c = img.get(i, img.height / 2);
+ * stroke(c);
+ * line(i, height / 2, i, height);
+ * }
+ * }
+ *
+ *
+ * @alt
+ * rocky mountains in top and horizontal lines in corresponding colors in bottom.
+ *
+ */ this.width = width;
+ /**
+ * Image height.
+ * @property {Number} height
+ * @readOnly
+ * @example
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * image(img, 0, 0);
+ * for (let i = 0; i < img.height; i++) {
+ * let c = img.get(img.width / 2, i);
+ * stroke(c);
+ * line(0, i, width / 2, i);
+ * }
+ * }
+ *
+ *
+ * @alt
+ * rocky mountains on right and vertical lines in corresponding colors on left.
+ *
+ */ this.height = height;
+ this.canvas = document.createElement('canvas');
+ this.canvas.width = this.width;
+ this.canvas.height = this.height;
+ this.drawingContext = this.canvas.getContext('2d');
+ this._pixelsState = this;
+ this._pixelDensity = 1;
+ //Object for working with GIFs, defaults to null
+ this.gifProperties = null;
+ //For WebGL Texturing only: used to determine whether to reupload texture to GPU
+ this._modified = false;
+ /**
+ * Array containing the values for all the pixels in the display window.
+ * These values are numbers. This array is the size (include an appropriate
+ * factor for pixelDensity) of the display window x4,
+ * representing the R, G, B, A values in order for each pixel, moving from
+ * left to right across each row, then down each column. Retina and other
+ * high denisty displays may have more pixels (by a factor of
+ * pixelDensity^2).
+ * For example, if the image is 100x100 pixels, there will be 40,000. With
+ * pixelDensity = 2, there will be 160,000. The first four values
+ * (indices 0-3) in the array will be the R, G, B, A values of the pixel at
+ * (0, 0). The second four values (indices 4-7) will contain the R, G, B, A
+ * values of the pixel at (1, 0). More generally, to set values for a pixel
+ * at (x, y):
+ * ```javascript
+ * let d = pixelDensity();
+ * for (let i = 0; i < d; i++) {
+ * for (let j = 0; j < d; j++) {
+ * // loop over
+ * index = 4 * ((y * d + j) * width * d + (x * d + i));
+ * pixels[index] = r;
+ * pixels[index+1] = g;
+ * pixels[index+2] = b;
+ * pixels[index+3] = a;
+ * }
+ * }
+ * ```
+ *
+ * Before accessing this array, the data must loaded with the loadPixels()
+ * function. After the array data has been modified, the updatePixels()
+ * function must be run to update the changes.
+ * @property {Number[]} pixels
+ * @example
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ *
+ *
+ * let pink = color(255, 102, 204);
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < 4 * (width * height / 2); i += 4) {
+ * img.pixels[i] = red(pink);
+ * img.pixels[i + 1] = green(pink);
+ * img.pixels[i + 2] = blue(pink);
+ * img.pixels[i + 3] = alpha(pink);
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ *
+ * @alt
+ * 66x66 turquoise rect in center of canvas
+ * 66x66 pink rect in center of canvas
+ *
+ */
+ this.pixels = [];
+ };
+
+ /**
+ * Helper function for animating GIF-based images with time
+ *
+ */
+ _main.default.Image.prototype._animateGif = function(pInst) {
+ var props = this.gifProperties;
+ if (props.playing) {
+ props.timeDisplayed += pInst.deltaTime;
+ }
+
+ if (props.timeDisplayed >= props.delay) {
+ //GIF is bound to 'realtime' so can skip frames
+ var skips = Math.floor(props.timeDisplayed / props.delay);
+ props.timeDisplayed = 0;
+ props.displayIndex += skips;
+ props.loopCount = Math.floor(props.displayIndex / props.numFrames);
+ if (props.loopLimit !== null && props.loopCount >= props.loopLimit) {
+ props.playing = false;
+ } else {
+ var ind = props.displayIndex % props.numFrames;
+ this.drawingContext.putImageData(props.frames[ind], 0, 0);
+ props.displayIndex = ind;
+ this.setModified(true);
+ }
+ }
+ };
+
+ /**
+ * Helper fxn for sharing pixel methods
+ *
+ */
+ _main.default.Image.prototype._setProperty = function(prop, value) {
+ this[prop] = value;
+ this.setModified(true);
+ };
+
+ /**
+ * Loads the pixels data for this image into the [pixels] attribute.
+ *
+ * @method loadPixels
+ * @example
+ *
+ * let myImage;
+ * let halfImage;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * myImage.loadPixels();
+ * halfImage = 4 * myImage.width * myImage.height / 2;
+ * for (let i = 0; i < halfImage; i++) {
+ * myImage.pixels[i + halfImage] = myImage.pixels[i];
+ * }
+ * myImage.updatePixels();
+ * }
+ *
+ * function draw() {
+ * image(myImage, 0, 0, width, height);
+ * }
+ *
+ *
+ * @alt
+ * 2 images of rocky mountains vertically stacked
+ *
+ */
+ _main.default.Image.prototype.loadPixels = function() {
+ _main.default.Renderer2D.prototype.loadPixels.call(this);
+ this.setModified(true);
+ };
+
+ /**
+ * Updates the backing canvas for this image with the contents of
+ * the [pixels] array.
+ *
+ * If this image is an animated GIF then the pixels will be updated
+ * in the frame that is currently displayed.
+ *
+ * @method updatePixels
+ * @param {Integer} x x-offset of the target update area for the
+ * underlying canvas
+ * @param {Integer} y y-offset of the target update area for the
+ * underlying canvas
+ * @param {Integer} w height of the target update area for the
+ * underlying canvas
+ * @param {Integer} h height of the target update area for the
+ * underlying canvas
+ * @example
+ *
+ * let myImage;
+ * let halfImage;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * myImage.loadPixels();
+ * halfImage = 4 * myImage.width * myImage.height / 2;
+ * for (let i = 0; i < halfImage; i++) {
+ * myImage.pixels[i + halfImage] = myImage.pixels[i];
+ * }
+ * myImage.updatePixels();
+ * }
+ *
+ * function draw() {
+ * image(myImage, 0, 0, width, height);
+ * }
+ *
+ *
+ * @alt
+ * 2 images of rocky mountains vertically stacked
+ *
+ */
+ /**
+ * @method updatePixels
+ */
+ _main.default.Image.prototype.updatePixels = function(x, y, w, h) {
+ _main.default.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
+ this.setModified(true);
+ };
+
+ /**
+ * Get a region of pixels from an image.
+ *
+ * If no params are passed, the whole image is returned.
+ * If x and y are the only params passed a single pixel is extracted.
+ * If all params are passed a rectangle region is extracted and a p5.Image
+ * is returned.
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel
+ * @param {Number} y y-coordinate of the pixel
+ * @param {Number} w width
+ * @param {Number} h height
+ * @return {p5.Image} the rectangle p5.Image
+ * @example
+ *
+ * let myImage;
+ * let c;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * background(myImage);
+ * noStroke();
+ * c = myImage.get(60, 90);
+ * fill(c);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * //get() returns color here
+ *
+ *
+ * @alt
+ * image of rocky mountains with 50x50 green rect in front
+ *
+ */
+ /**
+ * @method get
+ * @return {p5.Image} the whole p5.Image
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of pixel at x,y in array format [R, G, B, A]
+ */
+ _main.default.Image.prototype.get = function(x, y, w, h) {
+ _main.default._validateParameters('p5.Image.get', arguments);
+ return _main.default.Renderer2D.prototype.get.apply(this, arguments);
+ };
+
+ _main.default.Image.prototype._getPixel =
+ _main.default.Renderer2D.prototype._getPixel;
+
+ /**
+ * Set the color of a single pixel or write an image into
+ * this p5.Image.
+ *
+ * Note that for a large number of pixels this will
+ * be slower than directly manipulating the pixels array
+ * and then calling updatePixels().
+ *
+ * @method set
+ * @param {Number} x x-coordinate of the pixel
+ * @param {Number} y y-coordinate of the pixel
+ * @param {Number|Number[]|Object} a grayscale value | pixel array |
+ * a p5.Color | image to copy
+ * @example
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ * image(img, 34, 34);
+ *
+ *
+ *
+ * @alt
+ * 2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas
+ *
+ */
+ _main.default.Image.prototype.set = function(x, y, imgOrCol) {
+ _main.default.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
+ this.setModified(true);
+ };
+
+ /**
+ * Resize the image to a new width and height. To make the image scale
+ * proportionally, use 0 as the value for the wide or high parameter.
+ * For instance, to make the width of an image 150 pixels, and change
+ * the height using the same proportion, use resize(150, 0).
+ *
+ * @method resize
+ * @param {Number} width the resized image width
+ * @param {Number} height the resized image height
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+
+ * function draw() {
+ * image(img, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * img.resize(50, 100);
+ * }
+ *
+ *
+ * @alt
+ * image of rocky mountains. zoomed in
+ *
+ */
+ _main.default.Image.prototype.resize = function(width, height) {
+ // Copy contents to a temporary canvas, resize the original
+ // and then copy back.
+ //
+ // There is a faster approach that involves just one copy and swapping the
+ // this.canvas reference. We could switch to that approach if (as i think
+ // is the case) there an expectation that the user would not hold a
+ // reference to the backing canvas of a p5.Image. But since we do not
+ // enforce that at the moment, I am leaving in the slower, but safer
+ // implementation.
+
+ // auto-resize
+ if (width === 0 && height === 0) {
+ width = this.canvas.width;
+ height = this.canvas.height;
+ } else if (width === 0) {
+ width = this.canvas.width * height / this.canvas.height;
+ } else if (height === 0) {
+ height = this.canvas.height * width / this.canvas.width;
+ }
+
+ width = Math.floor(width);
+ height = Math.floor(height);
+
+ var tempCanvas = document.createElement('canvas');
+ tempCanvas.width = width;
+ tempCanvas.height = height;
+
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ //adapted from github.com/LinusU/resize-image-data
+ var nearestNeighbor = function nearestNeighbor(src, dst) {
+ var pos = 0;
+ for (var y = 0; y < dst.height; y++) {
+ for (var x = 0; x < dst.width; x++) {
+ var srcX = Math.floor(x * src.width / dst.width);
+ var srcY = Math.floor(y * src.height / dst.height);
+ var srcPos = (srcY * src.width + srcX) * 4;
+ dst.data[pos++] = src.data[srcPos++]; // R
+ dst.data[pos++] = src.data[srcPos++]; // G
+ dst.data[pos++] = src.data[srcPos++]; // B
+ dst.data[pos++] = src.data[srcPos++]; // A
+ }
+ }
+ };
+ for (var i = 0; i < props.numFrames; i++) {
+ var resizedImageData = this.drawingContext.createImageData(width, height);
+
+ nearestNeighbor(props.frames[i], resizedImageData);
+ props.frames[i] = resizedImageData;
+ }
+ }
+
+ // prettier-ignore
+ tempCanvas.getContext('2d').drawImage(
+ this.canvas,
+ 0, 0, this.canvas.width, this.canvas.height,
+ 0, 0, tempCanvas.width, tempCanvas.height);
+
+ // Resize the original canvas, which will clear its contents
+ this.canvas.width = this.width = width;
+ this.canvas.height = this.height = height;
+
+ //Copy the image back
+
+ // prettier-ignore
+ this.drawingContext.drawImage(
+ tempCanvas,
+ 0, 0, width, height,
+ 0, 0, width, height);
+
+ if (this.pixels.length > 0) {
+ this.loadPixels();
+ }
+
+ this.setModified(true);
+ };
+
+ /**
+ * Copies a region of pixels from one image to another. If no
+ * srcImage is specified this is used as the source. If the source
+ * and destination regions aren't the same size, it will
+ * automatically resize source pixels to fit the specified
+ * target region.
+ *
+ * @method copy
+ * @param {p5.Image|p5.Element} srcImage source image
+ * @param {Integer} sx X coordinate of the source's upper left corner
+ * @param {Integer} sy Y coordinate of the source's upper left corner
+ * @param {Integer} sw source image width
+ * @param {Integer} sh source image height
+ * @param {Integer} dx X coordinate of the destination's upper left corner
+ * @param {Integer} dy Y coordinate of the destination's upper left corner
+ * @param {Integer} dw destination image width
+ * @param {Integer} dh destination image height
+ * @example
+ *
+ * let photo;
+ * let bricks;
+ * let x;
+ * let y;
+ *
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * x = bricks.width / 2;
+ * y = bricks.height / 2;
+ * photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+ * image(photo, 0, 0);
+ * }
+ *
+ *
+ * @alt
+ * image of rocky mountains and smaller image on top of bricks at top left
+ *
+ */
+ /**
+ * @method copy
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ */
+ _main.default.Image.prototype.copy = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default.prototype.copy.apply(this, args);
+ };
+
+ /**
+ * Masks part of an image from displaying by loading another
+ * image and using it's alpha channel as an alpha channel for
+ * this image.
+ *
+ * @method mask
+ * @param {p5.Image} srcImage source image
+ * @example
+ *
+ * let photo, maskImage;
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * maskImage = loadImage('assets/mask2.png');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * photo.mask(maskImage);
+ * image(photo, 0, 0);
+ * }
+ *
+ *
+ * @alt
+ * image of rocky mountains with white at right
+ *
+ *
+ * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
+ *
+ */
+ // TODO: - Accept an array of alpha values.
+ // - Use other channels of an image. p5 uses the
+ // blue channel (which feels kind of arbitrary). Note: at the
+ // moment this method does not match native processings original
+ // functionality exactly.
+ _main.default.Image.prototype.mask = function(p5Image) {
+ if (p5Image === undefined) {
+ p5Image = this;
+ }
+ var currBlend = this.drawingContext.globalCompositeOperation;
+
+ var scaleFactor = 1;
+ if (p5Image instanceof _main.default.Renderer) {
+ scaleFactor = p5Image._pInst._pixelDensity;
+ }
+
+ var copyArgs = [
+ p5Image,
+ 0,
+ 0,
+ scaleFactor * p5Image.width,
+ scaleFactor * p5Image.height,
+ 0,
+ 0,
+ this.width,
+ this.height
+ ];
+
+ this.drawingContext.globalCompositeOperation = 'destination-in';
+ _main.default.Image.prototype.copy.apply(this, copyArgs);
+ this.drawingContext.globalCompositeOperation = currBlend;
+ this.setModified(true);
+ };
+
+ /**
+ * Applies an image filter to a p5.Image
+ *
+ * @method filter
+ * @param {Constant} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
+ * POSTERIZE, BLUR, ERODE, DILATE or BLUR.
+ * See Filters.js for docs on
+ * each available filter
+ * @param {Number} [filterParam] an optional parameter unique
+ * to each filter, see above
+ * @example
+ *
+ * let photo1;
+ * let photo2;
+ *
+ * function preload() {
+ * photo1 = loadImage('assets/rockies.jpg');
+ * photo2 = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * photo2.filter(GRAY);
+ * image(photo1, 0, 0);
+ * image(photo2, width / 2, 0);
+ * }
+ *
+ *
+ * @alt
+ * 2 images of rocky mountains left one in color, right in black and white
+ *
+ */
+ _main.default.Image.prototype.filter = function(operation, value) {
+ _filters.default.apply(this.canvas, _filters.default[operation], value);
+ this.setModified(true);
+ };
+
+ /**
+ * Copies a region of pixels from one image to another, using a specified
+ * blend mode to do the operation.
+ *
+ * @method blend
+ * @param {p5.Image} srcImage source image
+ * @param {Integer} sx X coordinate of the source's upper left corner
+ * @param {Integer} sy Y coordinate of the source's upper left corner
+ * @param {Integer} sw source image width
+ * @param {Integer} sh source image height
+ * @param {Integer} dx X coordinate of the destination's upper left corner
+ * @param {Integer} dy Y coordinate of the destination's upper left corner
+ * @param {Integer} dw destination image width
+ * @param {Integer} dh destination image height
+ * @param {Constant} blendMode the blend mode. either
+ * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ *
+ * Available blend modes are: normal | multiply | screen | overlay |
+ * darken | lighten | color-dodge | color-burn | hard-light |
+ * soft-light | difference | exclusion | hue | saturation |
+ * color | luminosity
+ *
+ *
+ * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
+ * @example
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ *
+ * @alt
+ * image of rocky mountains. Brick images on left and right. Right overexposed
+ * image of rockies. Brickwall images on left and right. Right mortar transparent
+ * image of rockies. Brickwall images on left and right. Right translucent
+ *
+ */
+ /**
+ * @method blend
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ * @param {Constant} blendMode
+ */
+ _main.default.Image.prototype.blend = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default.prototype.blend.apply(this, args);
+ this.setModified(true);
+ };
+
+ /**
+ * helper method for web GL mode to indicate that an image has been
+ * changed or unchanged since last upload. gl texture upload will
+ * set this value to false after uploading the texture.
+ * @method setModified
+ * @param {boolean} val sets whether or not the image has been
+ * modified.
+ * @private
+ */
+ _main.default.Image.prototype.setModified = function(val) {
+ this._modified = val; //enforce boolean?
+ };
+
+ /**
+ * helper method for web GL mode to figure out if the image
+ * has been modified and might need to be re-uploaded to texture
+ * memory between frames.
+ * @method isModified
+ * @private
+ * @return {boolean} a boolean indicating whether or not the
+ * image has been updated or modified since last texture upload.
+ */
+ _main.default.Image.prototype.isModified = function() {
+ return this._modified;
+ };
+
+ /**
+ * Saves the image to a file and force the browser to download it.
+ * Accepts two strings for filename and file extension
+ * Supports png (default), jpg, and gif
+ *
+ * Note that the file will only be downloaded as an animated GIF
+ * if the p5.Image was loaded from a GIF file.
+ * @method save
+ * @param {String} filename give your file a name
+ * @param {String} extension 'png' or 'jpg'
+ * @example
+ *
+ * let photo;
+ *
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function draw() {
+ * image(photo, 0, 0);
+ * }
+ *
+ * function keyTyped() {
+ * if (key === 's') {
+ * photo.save('photo', 'png');
+ * }
+ * }
+ *
+ *
+ * @alt
+ * image of rocky mountains.
+ *
+ */
+ _main.default.Image.prototype.save = function(filename, extension) {
+ if (this.gifProperties) {
+ _main.default.prototype.saveGif(this, filename);
+ } else {
+ _main.default.prototype.saveCanvas(this.canvas, filename, extension);
+ }
+ };
+
+ // GIF Section
+ /**
+ * Starts an animated GIF over at the beginning state.
+ *
+ * @method reset
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * // The GIF file that we loaded only loops once
+ * // so it freezes on the last frame after playing through
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * // Click to reset the GIF and begin playback from start
+ * gif.reset();
+ * }
+ *
+ * @alt
+ * Animated image of a cartoon face that winks once and then freezes
+ * When you click it animates again, winks once and freezes
+ *
+ */
+ _main.default.Image.prototype.reset = function() {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ props.playing = true;
+ props.timeSinceStart = 0;
+ props.timeDisplayed = 0;
+ props.loopCount = 0;
+ props.displayIndex = 0;
+ this.drawingContext.putImageData(props.frames[0], 0, 0);
+ }
+ };
+
+ /**
+ * Gets the index for the frame that is currently visible in an animated GIF.
+ *
+ * @method getCurrentFrame
+ * @return {Number} The index for the currently displaying frame in animated GIF
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * let frame = gif.getCurrentFrame();
+ * image(gif, 0, 0);
+ * text(frame, 10, 90);
+ * }
+ *
+ * @alt
+ * Animated image of a cartoon eye looking around and then
+ * looking outwards, in the lower-left hand corner a number counts
+ * up quickly to 124 and then starts back over at 0
+ *
+ */
+ _main.default.Image.prototype.getCurrentFrame = function() {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ return props.displayIndex % props.numFrames;
+ }
+ };
+
+ /**
+ * Sets the index of the frame that is currently visible in an animated GIF
+ *
+ * @method setFrame
+ * @param {Number} index the index for the frame that should be displayed
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * // Move your mouse up and down over canvas to see the GIF
+ * // frames animate
+ * function draw() {
+ * gif.pause();
+ * image(gif, 0, 0);
+ * // Get the highest frame number which is the number of frames - 1
+ * let maxFrame = gif.numFrames() - 1;
+ * // Set the current frame that is mapped to be relative to mouse position
+ * let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));
+ * gif.setFrame(frameNumber);
+ * }
+ *
+ * @alt
+ * A still image of a cartoon eye that looks around when you move your mouse
+ * up and down over the canvas
+ *
+ */
+ _main.default.Image.prototype.setFrame = function(index) {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ if (index < props.numFrames && index >= 0) {
+ props.timeDisplayed = 0;
+ props.displayIndex = index;
+ this.drawingContext.putImageData(props.frames[index], 0, 0);
+ } else {
+ console.log(
+ 'Cannot set GIF to a frame number that is higher than total number of frames or below zero.'
+ );
+ }
+ }
+ };
+
+ /**
+ * Returns the number of frames in an animated GIF
+ *
+ * @method numFrames
+ * @return {Number}
+ * @example The number of frames in the animated GIF
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * // Move your mouse up and down over canvas to see the GIF
+ * // frames animate
+ * function draw() {
+ * gif.pause();
+ * image(gif, 0, 0);
+ * // Get the highest frame number which is the number of frames - 1
+ * let maxFrame = gif.numFrames() - 1;
+ * // Set the current frame that is mapped to be relative to mouse position
+ * let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));
+ * gif.setFrame(frameNumber);
+ * }
+ *
+ * @alt
+ * A still image of a cartoon eye that looks around when you move your mouse
+ * up and down over the canvas
+ *
+ */
+ _main.default.Image.prototype.numFrames = function() {
+ if (this.gifProperties) {
+ return this.gifProperties.numFrames;
+ }
+ };
+
+ /**
+ * Plays an animated GIF that was paused with
+ * pause()
+ *
+ * @method play
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ * @alt
+ * An animated GIF of a drawing of small child with
+ * hair blowing in the wind, when you click the image
+ * freezes when you release it animates again
+ *
+ */
+ _main.default.Image.prototype.play = function() {
+ if (this.gifProperties) {
+ this.gifProperties.playing = true;
+ }
+ };
+
+ /**
+ * Pauses an animated GIF.
+ *
+ * @method pause
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ * @alt
+ * An animated GIF of a drawing of small child with
+ * hair blowing in the wind, when you click the image
+ * freezes when you release it animates again
+ *
+ */
+ _main.default.Image.prototype.pause = function() {
+ if (this.gifProperties) {
+ this.gifProperties.playing = false;
+ }
+ };
+
+ /**
+ * Changes the delay between frames in an animated GIF
+ *
+ * @method delay
+ * @param {Number} d the amount in milliseconds to delay between switching frames
+ * @example
+ *
+ * let gifFast, gifSlow;
+ *
+ * function preload() {
+ * gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * gifFast.resize(width / 2, height / 2);
+ * gifSlow.resize(width / 2, height / 2);
+ *
+ * //Change the delay here
+ * gifFast.delay(10);
+ * gifSlow.delay(100);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gifFast, 0, 0);
+ * image(gifSlow, width / 2, 0);
+ * }
+ *
+ * @alt
+ * Two animated gifs of cartoon eyes looking around
+ * The gif on the left animates quickly, on the right
+ * the animation is much slower
+ *
+ */
+ _main.default.Image.prototype.delay = function(d) {
+ if (this.gifProperties) {
+ this.gifProperties.delay = d;
+ }
+ };
+ var _default = _main.default.Image;
+ exports.default = _default;
+ },
+ { '../core/main': 27, './filters': 48 }
+ ],
+ 52: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _filters = _interopRequireDefault(_dereq_('./filters'));
+ _dereq_('../color/p5.Color');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Image
+ * @submodule Pixels
+ * @for p5
+ * @requires core
+ */ /**
+ * Uint8ClampedArray
+ * containing the values for all the pixels in the display window.
+ * These values are numbers. This array is the size (include an appropriate
+ * factor for pixelDensity) of the display window x4,
+ * representing the R, G, B, A values in order for each pixel, moving from
+ * left to right across each row, then down each column. Retina and other
+ * high density displays will have more pixels[] (by a factor of
+ * pixelDensity^2).
+ * For example, if the image is 100x100 pixels, there will be 40,000. On a
+ * retina display, there will be 160,000.
+ *
+ * The first four values (indices 0-3) in the array will be the R, G, B, A
+ * values of the pixel at (0, 0). The second four values (indices 4-7) will
+ * contain the R, G, B, A values of the pixel at (1, 0). More generally, to
+ * set values for a pixel at (x, y):
+ * ```javascript
+ * let d = pixelDensity();
+ * for (let i = 0; i < d; i++) {
+ * for (let j = 0; j < d; j++) {
+ * // loop over
+ * index = 4 * ((y * d + j) * width * d + (x * d + i));
+ * pixels[index] = r;
+ * pixels[index+1] = g;
+ * pixels[index+2] = b;
+ * pixels[index+3] = a;
+ * }
+ * }
+ * ```
+ * While the above method is complex, it is flexible enough to work with
+ * any pixelDensity. Note that set() will automatically take care of
+ * setting all the appropriate values in pixels[] for a given (x, y) at
+ * any pixelDensity, but the performance may not be as fast when lots of
+ * modifications are made to the pixel array.
+ *
+ * Before accessing this array, the data must loaded with the loadPixels()
+ * function. After the array data has been modified, the updatePixels()
+ * function must be run to update the changes.
+ *
+ * Note that this is not a standard javascript array. This means that
+ * standard javascript functions such as slice() or
+ * arrayCopy() do not
+ * work.
+ *
+ * @property {Number[]} pixels
+ * @example
+ *
+ *
+ * let pink = color(255, 102, 204);
+ * loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height / 2 * d);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * pixels[i] = red(pink);
+ * pixels[i + 1] = green(pink);
+ * pixels[i + 2] = blue(pink);
+ * pixels[i + 3] = alpha(pink);
+ * }
+ * updatePixels();
+ *
+ *
+ *
+ * @alt
+ * top half of canvas pink, bottom grey
+ *
+ */ _main.default.prototype.pixels = []; /**
+ * Copies a region of pixels from one image to another, using a specified
+ * blend mode to do the operation.
+ *
+ * @method blend
+ * @param {p5.Image} srcImage source image
+ * @param {Integer} sx X coordinate of the source's upper left corner
+ * @param {Integer} sy Y coordinate of the source's upper left corner
+ * @param {Integer} sw source image width
+ * @param {Integer} sh source image height
+ * @param {Integer} dx X coordinate of the destination's upper left corner
+ * @param {Integer} dy Y coordinate of the destination's upper left corner
+ * @param {Integer} dw destination image width
+ * @param {Integer} dh destination image height
+ * @param {Constant} blendMode the blend mode. either
+ * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ *
+ * @example
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ * }
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ * }
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ * }
+ *
+ *
+ * @alt
+ * image of rocky mountains. Brick images on left and right. Right overexposed
+ * image of rockies. Brickwall images on left and right. Right mortar transparent
+ * image of rockies. Brickwall images on left and right. Right translucent
+ *
+ *
+ */
+ /**
+ * @method blend
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ * @param {Constant} blendMode
+ */
+ _main.default.prototype.blend = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('blend', args);
+ if (this._renderer) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).blend.apply(_this$_renderer, args);
+ } else {
+ _main.default.Renderer2D.prototype.blend.apply(this, args);
+ }
+ };
+
+ /**
+ * Copies a region of the canvas to another region of the canvas
+ * and copies a region of pixels from an image used as the srcImg parameter
+ * into the canvas srcImage is specified this is used as the source. If
+ * the source and destination regions aren't the same size, it will
+ * automatically resize source pixels to fit the specified
+ * target region.
+ *
+ * @method copy
+ * @param {p5.Image|p5.Element} srcImage source image
+ * @param {Integer} sx X coordinate of the source's upper left corner
+ * @param {Integer} sy Y coordinate of the source's upper left corner
+ * @param {Integer} sw source image width
+ * @param {Integer} sh source image height
+ * @param {Integer} dx X coordinate of the destination's upper left corner
+ * @param {Integer} dy Y coordinate of the destination's upper left corner
+ * @param {Integer} dw destination image width
+ * @param {Integer} dh destination image height
+ *
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img);
+ * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+ * stroke(255);
+ * noFill();
+ * // Rectangle shows area being copied
+ * rect(7, 22, 10, 10);
+ * }
+ *
+ *
+ * @alt
+ * image of rocky mountains. Brick images on left and right. Right overexposed
+ * image of rockies. Brickwall images on left and right. Right mortar transparent
+ * image of rockies. Brickwall images on left and right. Right translucent
+ *
+ */
+ /**
+ * @method copy
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ */
+ _main.default.prototype.copy = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('copy', args);
+
+ var srcImage, sx, sy, sw, sh, dx, dy, dw, dh;
+ if (args.length === 9) {
+ srcImage = args[0];
+ sx = args[1];
+ sy = args[2];
+ sw = args[3];
+ sh = args[4];
+ dx = args[5];
+ dy = args[6];
+ dw = args[7];
+ dh = args[8];
+ } else if (args.length === 8) {
+ srcImage = this;
+ sx = args[0];
+ sy = args[1];
+ sw = args[2];
+ sh = args[3];
+ dx = args[4];
+ dy = args[5];
+ dw = args[6];
+ dh = args[7];
+ } else {
+ throw new Error('Signature not supported');
+ }
+
+ _main.default.prototype._copyHelper(
+ this,
+ srcImage,
+ sx,
+ sy,
+ sw,
+ sh,
+ dx,
+ dy,
+ dw,
+ dh
+ );
+ };
+
+ _main.default.prototype._copyHelper = function(
+ dstImage,
+ srcImage,
+ sx,
+ sy,
+ sw,
+ sh,
+ dx,
+ dy,
+ dw,
+ dh
+ ) {
+ srcImage.loadPixels();
+ var s = srcImage.canvas.width / srcImage.width;
+ // adjust coord system for 3D when renderer
+ // ie top-left = -width/2, -height/2
+ var sxMod = 0;
+ var syMod = 0;
+ if (srcImage._renderer && srcImage._renderer.isP3D) {
+ sxMod = srcImage.width / 2;
+ syMod = srcImage.height / 2;
+ }
+ if (dstImage._renderer && dstImage._renderer.isP3D) {
+ _main.default.RendererGL.prototype.image.call(
+ dstImage._renderer,
+ srcImage,
+ sx + sxMod,
+ sy + syMod,
+ sw,
+ sh,
+ dx,
+ dy,
+ dw,
+ dh
+ );
+ } else {
+ dstImage.drawingContext.drawImage(
+ srcImage.canvas,
+ s * (sx + sxMod),
+ s * (sy + syMod),
+ s * sw,
+ s * sh,
+ dx,
+ dy,
+ dw,
+ dh
+ );
+ }
+ };
+
+ /**
+ * Applies a filter to the canvas.
+ *
+ *
+ * The presets options are:
+ *
+ *
+ * THRESHOLD
+ * Converts the image to black and white pixels depending if they are above or
+ * below the threshold defined by the level parameter. The parameter must be
+ * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
+ *
+ *
+ * GRAY
+ * Converts any colors in the image to grayscale equivalents. No parameter
+ * is used.
+ *
+ *
+ * OPAQUE
+ * Sets the alpha channel to entirely opaque. No parameter is used.
+ *
+ *
+ * INVERT
+ * Sets each pixel to its inverse value. No parameter is used.
+ *
+ *
+ * POSTERIZE
+ * Limits each channel of the image to the number of colors specified as the
+ * parameter. The parameter can be set to values between 2 and 255, but
+ * results are most noticeable in the lower ranges.
+ *
+ *
+ * BLUR
+ * Executes a Gaussian blur with the level parameter specifying the extent
+ * of the blurring. If no parameter is used, the blur is equivalent to
+ * Gaussian blur of radius 1. Larger values increase the blur.
+ *
+ *
+ * ERODE
+ * Reduces the light areas. No parameter is used.
+ *
+ *
+ * DILATE
+ * Increases the light areas. No parameter is used.
+ *
+ * @method filter
+ * @param {Constant} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
+ * POSTERIZE, BLUR, ERODE, DILATE or BLUR.
+ * See Filters.js for docs on
+ * each available filter
+ * @param {Number} [filterParam] an optional parameter unique
+ * to each filter, see above
+ *
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(THRESHOLD);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(GRAY);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(OPAQUE);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(INVERT);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(POSTERIZE, 3);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(DILATE);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(BLUR, 3);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(ERODE);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black and white image of a brick wall.
+ * greyscale image of a brickwall
+ * image of a brickwall
+ * jade colored image of a brickwall
+ * red and pink image of a brickwall
+ * image of a brickwall
+ * blurry image of a brickwall
+ * image of a brickwall
+ * image of a brickwall with less detail
+ *
+ */
+ _main.default.prototype.filter = function(operation, value) {
+ _main.default._validateParameters('filter', arguments);
+ if (this.canvas !== undefined) {
+ _filters.default.apply(this.canvas, _filters.default[operation], value);
+ } else {
+ _filters.default.apply(this.elt, _filters.default[operation], value);
+ }
+ };
+
+ /**
+ * Get a region of pixels, or a single pixel, from the canvas.
+ *
+ * Returns an array of [R,G,B,A] values for any pixel or grabs a section of
+ * an image. If no parameters are specified, the entire image is returned.
+ * Use the x and y parameters to get the value of one pixel. Get a section of
+ * the display window by specifying additional w and h parameters. When
+ * getting an image, the x and y parameters define the coordinates for the
+ * upper-left corner of the image, regardless of the current imageMode().
+ *
+ * Getting the color of a single pixel with get(x, y) is easy, but not as fast
+ * as grabbing the data directly from pixels[]. The equivalent statement to
+ * get(x, y) using pixels[] with pixel density d is
+ * ```javascript
+ * let x, y, d; // set these to the coordinates
+ * let off = (y * width + x) * d * 4;
+ * let components = [
+ * pixels[off],
+ * pixels[off + 1],
+ * pixels[off + 2],
+ * pixels[off + 3]
+ * ];
+ * print(components);
+ * ```
+ *
+ *
+ * See the reference for pixels[] for more information.
+ *
+ * If you want to extract an array of colors or a subimage from an p5.Image object,
+ * take a look at p5.Image.get()
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel
+ * @param {Number} y y-coordinate of the pixel
+ * @param {Number} w width
+ * @param {Number} h height
+ * @return {p5.Image} the rectangle p5.Image
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get();
+ * image(c, width / 2, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get(50, 90);
+ * fill(c);
+ * noStroke();
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 2 images of the rocky mountains, side-by-side
+ * Image of the rocky mountains with 50x50 green rect in center of canvas
+ *
+ */
+ /**
+ * @method get
+ * @return {p5.Image} the whole p5.Image
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of pixel at x,y in array format [R, G, B, A]
+ */
+ _main.default.prototype.get = function(x, y, w, h) {
+ var _this$_renderer2;
+ _main.default._validateParameters('get', arguments);
+ return (_this$_renderer2 = this._renderer).get.apply(
+ _this$_renderer2,
+ arguments
+ );
+ };
+
+ /**
+ * Loads the pixel data for the display window into the pixels[] array. This
+ * function must always be called before reading from or writing to pixels[].
+ * Note that only changes made with set() or direct manipulation of pixels[]
+ * will occur.
+ *
+ * @method loadPixels
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0, width, height);
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height * d / 2);
+ * loadPixels();
+ * for (let i = 0; i < halfImage; i++) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ * updatePixels();
+ * }
+ *
+ *
+ *
+ * @alt
+ * two images of the rocky mountains. one on top, one on bottom of canvas.
+ *
+ */
+ _main.default.prototype.loadPixels = function() {
+ for (
+ var _len3 = arguments.length, args = new Array(_len3), _key3 = 0;
+ _key3 < _len3;
+ _key3++
+ ) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('loadPixels', args);
+ this._renderer.loadPixels();
+ };
+
+ /**
+ * Changes the color of any pixel, or writes an image directly to the
+ * display window.
+ * The x and y parameters specify the pixel to change and the c parameter
+ * specifies the color value. This can be a p5.Color object, or [R, G, B, A]
+ * pixel array. It can also be a single grayscale value.
+ * When setting an image, the x and y parameters define the coordinates for
+ * the upper-left corner of the image, regardless of the current imageMode().
+ *
+ *
+ * After using set(), you must call updatePixels() for your changes to appear.
+ * This should be called once all pixels have been set, and must be called before
+ * calling .get() or drawing the image.
+ *
+ * Setting the color of a single pixel with set(x, y) is easy, but not as
+ * fast as putting the data directly into pixels[]. Setting the pixels[]
+ * values directly may be complicated when working with a retina display,
+ * but will perform better when lots of pixels need to be set directly on
+ * every loop.
+ * See the reference for pixels[] for more information.
+ *
+ * @method set
+ * @param {Number} x x-coordinate of the pixel
+ * @param {Number} y y-coordinate of the pixel
+ * @param {Number|Number[]|Object} c insert a grayscale value | a pixel array |
+ * a p5.Color object | a p5.Image to copy
+ * @example
+ *
+ *
+ * let black = color(0);
+ * set(30, 20, black);
+ * set(85, 20, black);
+ * set(85, 75, black);
+ * set(30, 75, black);
+ * updatePixels();
+ *
+ *
+ *
+ *
+ *
+ * for (let i = 30; i < width - 15; i++) {
+ * for (let j = 20; j < height - 25; j++) {
+ * let c = color(204 - j, 153 - i, 0);
+ * set(i, j, c);
+ * }
+ * }
+ * updatePixels();
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * set(0, 0, img);
+ * updatePixels();
+ * line(0, 0, width, height);
+ * line(0, height, width, 0);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 4 black points in the shape of a square middle-right of canvas.
+ * square with orangey-brown gradient lightening at bottom right.
+ * image of the rocky mountains. with lines like an 'x' through the center.
+ */
+ _main.default.prototype.set = function(x, y, imgOrCol) {
+ this._renderer.set(x, y, imgOrCol);
+ };
+ /**
+ * Updates the display window with the data in the pixels[] array.
+ * Use in conjunction with loadPixels(). If you're only reading pixels from
+ * the array, there's no need to call updatePixels() — updating is only
+ * necessary to apply changes. updatePixels() should be called anytime the
+ * pixels array is manipulated or set() is called, and only changes made with
+ * set() or direct changes to pixels[] will occur.
+ *
+ * @method updatePixels
+ * @param {Number} [x] x-coordinate of the upper-left corner of region
+ * to update
+ * @param {Number} [y] y-coordinate of the upper-left corner of region
+ * to update
+ * @param {Number} [w] width of region to update
+ * @param {Number} [h] height of region to update
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0, width, height);
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height * d / 2);
+ * loadPixels();
+ * for (let i = 0; i < halfImage; i++) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ * updatePixels();
+ * }
+ *
+ *
+ * @alt
+ * two images of the rocky mountains. one on top, one on bottom of canvas.
+ */
+ _main.default.prototype.updatePixels = function(x, y, w, h) {
+ _main.default._validateParameters('updatePixels', arguments);
+ // graceful fail - if loadPixels() or set() has not been called, pixel
+ // array will be empty, ignore call to updatePixels()
+ if (this.pixels.length === 0) {
+ return;
+ }
+ this._renderer.updatePixels(x, y, w, h);
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../color/p5.Color': 19, '../core/main': 27, './filters': 48 }
+ ],
+ 53: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('whatwg-fetch');
+ _dereq_('es6-promise/auto');
+ var _fetchJsonp = _interopRequireDefault(_dereq_('fetch-jsonp'));
+ var _fileSaver = _interopRequireDefault(_dereq_('file-saver'));
+ _dereq_('../core/error_helpers');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj &&
+ typeof Symbol === 'function' &&
+ obj.constructor === Symbol &&
+ obj !== Symbol.prototype
+ ? 'symbol'
+ : typeof obj;
+ };
+ }
+ return _typeof(obj);
+ }
+
+ /**
+ * Loads a JSON file from a file or a URL, and returns an Object.
+ * Note that even if the JSON file contains an Array, an Object will be
+ * returned with index numbers as keys.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed. JSONP is supported via a polyfill and you
+ * can pass in as the second argument an object with definitions of the json
+ * callback following the syntax specified here.
+ *
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadJSON
+ * @param {String} path name of the file or url to load
+ * @param {Object} [jsonpOptions] options object for jsonp related settings
+ * @param {String} [datatype] "json" or "jsonp"
+ * @param {function} [callback] function to be executed after
+ * loadJSON() completes, data is passed
+ * in as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Object|Array} JSON data
+ * @example
+ *
+ * Calling loadJSON() inside preload() guarantees to complete the
+ * operation before setup() and draw() are called.
+ *
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+ * 'summary/all_day.geojson';
+ * earthquakes = loadJSON(url);
+ * }
+ *
+ * function setup() {
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * }
+ *
+ *
+ *
+ * Outside of preload(), you may supply a callback function to handle the
+ * object:
+ *
+ * function setup() {
+ * noLoop();
+ * let url =
+ 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+ * 'summary/all_day.geojson';
+ * loadJSON(url, drawEarthquake);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * }
+ *
+ * function drawEarthquake(earthquakes) {
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * }
+ *
+ *
+ * @alt
+ * 50x50 ellipse that changes from black to white depending on the current humidity
+ * 50x50 ellipse that changes from black to white depending on the current humidity
+ *
+ */
+ /**
+ * @method loadJSON
+ * @param {String} path
+ * @param {String} datatype
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Object|Array}
+ */
+ /**
+ * @method loadJSON
+ * @param {String} path
+ * @param {function} callback
+ * @param {function} [errorCallback]
+ * @return {Object|Array}
+ */
+ _main.default.prototype.loadJSON = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('loadJSON', args);
+ var path = args[0];
+ var callback;
+ var errorCallback;
+ var options;
+
+ var ret = {}; // object needed for preload
+ var t = 'json';
+
+ // check for explicit data type argument
+ for (var i = 1; i < args.length; i++) {
+ var arg = args[i];
+ if (typeof arg === 'string') {
+ if (arg === 'jsonp' || arg === 'json') {
+ t = arg;
+ }
+ } else if (typeof arg === 'function') {
+ if (!callback) {
+ callback = arg;
+ } else {
+ errorCallback = arg;
+ }
+ } else if (
+ _typeof(arg) === 'object' &&
+ (arg.hasOwnProperty('jsonpCallback') ||
+ arg.hasOwnProperty('jsonpCallbackFunction'))
+ ) {
+ t = 'jsonp';
+ options = arg;
+ }
+ }
+
+ var self = this;
+ this.httpDo(
+ path,
+ 'GET',
+ options,
+ t,
+ function(resp) {
+ for (var k in resp) {
+ ret[k] = resp[k];
+ }
+ if (typeof callback !== 'undefined') {
+ callback(resp);
+ }
+
+ self._decrementPreload();
+ },
+ function(err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(5, path);
+
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
+ }
+ );
+
+ return ret;
+ };
+
+ /**
+ * Reads the contents of a file and creates a String array of its individual
+ * lines. If the name of the file is used as the parameter, as in the above
+ * example, the file must be located in the sketch directory/folder.
+ *
+ * Alternatively, the file maybe be loaded from anywhere on the local
+ * computer using an absolute path (something that starts with / on Unix and
+ * Linux, or a drive letter on Windows), or the filename parameter can be a
+ * URL for a file found on a network.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed.
+ *
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadStrings
+ * @param {String} filename name of the file or url to load
+ * @param {function} [callback] function to be executed after loadStrings()
+ * completes, Array is passed in as first
+ * argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {String[]} Array of Strings
+ * @example
+ *
+ * Calling loadStrings() inside preload() guarantees to complete the
+ * operation before setup() and draw() are called.
+ *
+ *
+ * let result;
+ * function preload() {
+ * result = loadStrings('assets/test.txt');
+ * }
+
+ * function setup() {
+ * background(200);
+ * text(random(result), 10, 10, 80, 80);
+ * }
+ *
+ *
+ * Outside of preload(), you may supply a callback function to handle the
+ * object:
+ *
+ *
+ * function setup() {
+ * loadStrings('assets/test.txt', pickString);
+ * }
+ *
+ * function pickString(result) {
+ * background(200);
+ * text(random(result), 10, 10, 80, 80);
+ * }
+ *
+ *
+ * @alt
+ * randomly generated text from a file, for example "i smell like butter"
+ * randomly generated text from a file, for example "i have three feet"
+ *
+ */
+ _main.default.prototype.loadStrings = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('loadStrings', args);
+
+ var ret = [];
+ var callback, errorCallback;
+
+ for (var i = 1; i < args.length; i++) {
+ var arg = args[i];
+ if (typeof arg === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arg;
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arg;
+ }
+ }
+ }
+
+ var self = this;
+ _main.default.prototype.httpDo.call(
+ this,
+ args[0],
+ 'GET',
+ 'text',
+ function(data) {
+ // split lines handling mac/windows/linux endings
+ var lines = data
+ .replace(/\r\n/g, '\r')
+ .replace(/\n/g, '\r')
+ .split(/\r/);
+ Array.prototype.push.apply(ret, lines);
+
+ if (typeof callback !== 'undefined') {
+ callback(ret);
+ }
+
+ self._decrementPreload();
+ },
+ function(err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(3, arguments[0]);
+
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
+ }
+ );
+
+ return ret;
+ };
+
+ /**
+ * Reads the contents of a file or URL and creates a p5.Table object with
+ * its values. If a file is specified, it must be located in the sketch's
+ * "data" folder. The filename parameter can also be a URL to a file found
+ * online. By default, the file is assumed to be comma-separated (in CSV
+ * format). Table only looks for a header row if the 'header' option is
+ * included.
+ *
+ * Possible options include:
+ *
+ * - csv - parse the table as comma-separated values
+ * - tsv - parse the table as tab-separated values
+ * - header - this table has a header (title) row
+ *
+ *
+ *
+ * When passing in multiple options, pass them in as separate parameters,
+ * seperated by commas. For example:
+ *
+ *
+ * loadTable('my_csv_file.csv', 'csv', 'header');
+ *
+ *
+ *
+ * All files loaded and saved use UTF-8 encoding.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed. Calling loadTable() inside preload()
+ * guarantees to complete the operation before setup() and draw() are called.
+ *
Outside of preload(), you may supply a callback function to handle the
+ * object:
+ *
+ *
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadTable
+ * @param {String} filename name of the file or URL to load
+ * @param {String} options "header" "csv" "tsv"
+ * @param {function} [callback] function to be executed after
+ * loadTable() completes. On success, the
+ * Table object is passed in as the
+ * first argument.
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Object} Table object containing data
+ *
+ * @example
+ *
+ *
+ * // Given the following CSV file called "mammals.csv"
+ * // located in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * //the file can be remote
+ * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+ * // "csv", "header");
+ * }
+ *
+ * function setup() {
+ * //count the columns
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ *
+ * print(table.getColumn('name'));
+ * //["Goat", "Leopard", "Zebra"]
+ *
+ * //cycle through the table
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(table.getString(r, c));
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * randomly generated text from a file, for example "i smell like butter"
+ * randomly generated text from a file, for example "i have three feet"
+ *
+ */
+ /**
+ * @method loadTable
+ * @param {String} filename
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Object}
+ */
+ _main.default.prototype.loadTable = function(path) {
+ var callback;
+ var errorCallback;
+ var options = [];
+ var header = false;
+ var ext = path.substring(path.lastIndexOf('.') + 1, path.length);
+ var sep = ',';
+ var separatorSet = false;
+
+ if (ext === 'tsv') {
+ //Only need to check extension is tsv because csv is default
+ sep = '\t';
+ }
+
+ for (var i = 1; i < arguments.length; i++) {
+ if (typeof arguments[i] === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arguments[i];
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arguments[i];
+ }
+ } else if (typeof arguments[i] === 'string') {
+ options.push(arguments[i]);
+ if (arguments[i] === 'header') {
+ header = true;
+ }
+ if (arguments[i] === 'csv') {
+ if (separatorSet) {
+ throw new Error('Cannot set multiple separator types.');
+ } else {
+ sep = ',';
+ separatorSet = true;
+ }
+ } else if (arguments[i] === 'tsv') {
+ if (separatorSet) {
+ throw new Error('Cannot set multiple separator types.');
+ } else {
+ sep = '\t';
+ separatorSet = true;
+ }
+ }
+ }
+ }
+
+ var t = new _main.default.Table();
+
+ var self = this;
+ this.httpDo(
+ path,
+ 'GET',
+ 'table',
+ function(resp) {
+ var state = {};
+
+ // define constants
+ var PRE_TOKEN = 0,
+ MID_TOKEN = 1,
+ POST_TOKEN = 2,
+ POST_RECORD = 4;
+
+ var QUOTE = '"',
+ CR = '\r',
+ LF = '\n';
+
+ var records = [];
+ var offset = 0;
+ var currentRecord = null;
+ var currentChar;
+
+ var tokenBegin = function tokenBegin() {
+ state.currentState = PRE_TOKEN;
+ state.token = '';
+ };
+
+ var tokenEnd = function tokenEnd() {
+ currentRecord.push(state.token);
+ tokenBegin();
+ };
+
+ var recordBegin = function recordBegin() {
+ state.escaped = false;
+ currentRecord = [];
+ tokenBegin();
+ };
+
+ var recordEnd = function recordEnd() {
+ state.currentState = POST_RECORD;
+ records.push(currentRecord);
+ currentRecord = null;
+ };
+
+ for (;;) {
+ currentChar = resp[offset++];
+
+ // EOF
+ if (currentChar == null) {
+ if (state.escaped) {
+ throw new Error('Unclosed quote in file.');
+ }
+ if (currentRecord) {
+ tokenEnd();
+ recordEnd();
+ break;
+ }
+ }
+ if (currentRecord === null) {
+ recordBegin();
+ }
+
+ // Handle opening quote
+ if (state.currentState === PRE_TOKEN) {
+ if (currentChar === QUOTE) {
+ state.escaped = true;
+ state.currentState = MID_TOKEN;
+ continue;
+ }
+ state.currentState = MID_TOKEN;
+ }
+
+ // mid-token and escaped, look for sequences and end quote
+ if (state.currentState === MID_TOKEN && state.escaped) {
+ if (currentChar === QUOTE) {
+ if (resp[offset] === QUOTE) {
+ state.token += QUOTE;
+ offset++;
+ } else {
+ state.escaped = false;
+ state.currentState = POST_TOKEN;
+ }
+ } else if (currentChar === CR) {
+ continue;
+ } else {
+ state.token += currentChar;
+ }
+ continue;
+ }
+
+ // fall-through: mid-token or post-token, not escaped
+ if (currentChar === CR) {
+ if (resp[offset] === LF) {
+ offset++;
+ }
+ tokenEnd();
+ recordEnd();
+ } else if (currentChar === LF) {
+ tokenEnd();
+ recordEnd();
+ } else if (currentChar === sep) {
+ tokenEnd();
+ } else if (state.currentState === MID_TOKEN) {
+ state.token += currentChar;
+ }
+ }
+
+ // set up column names
+ if (header) {
+ t.columns = records.shift();
+ } else {
+ for (var _i = 0; _i < records[0].length; _i++) {
+ t.columns[_i] = 'null';
+ }
+ }
+ var row;
+ for (var _i2 = 0; _i2 < records.length; _i2++) {
+ //Handles row of 'undefined' at end of some CSVs
+ if (records[_i2].length === 1) {
+ if (records[_i2][0] === 'undefined' || records[_i2][0] === '') {
+ continue;
+ }
+ }
+ row = new _main.default.TableRow();
+ row.arr = records[_i2];
+ row.obj = makeObject(records[_i2], t.columns);
+ t.addRow(row);
+ }
+ if (typeof callback === 'function') {
+ callback(t);
+ }
+
+ self._decrementPreload();
+ },
+ function(err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(2, path);
+
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ console.error(err);
+ }
+ }
+ );
+
+ return t;
+ };
+
+ // helper function to turn a row into a JSON object
+ function makeObject(row, headers) {
+ var ret = {};
+ headers = headers || [];
+ if (typeof headers === 'undefined') {
+ for (var j = 0; j < row.length; j++) {
+ headers[j.toString()] = j;
+ }
+ }
+ for (var i = 0; i < headers.length; i++) {
+ var key = headers[i];
+ var val = row[i];
+ ret[key] = val;
+ }
+ return ret;
+ }
+
+ /**
+ * Reads the contents of a file and creates an XML object with its values.
+ * If the name of the file is used as the parameter, as in the above example,
+ * the file must be located in the sketch directory/folder.
+ *
+ * Alternatively, the file maybe be loaded from anywhere on the local
+ * computer using an absolute path (something that starts with / on Unix and
+ * Linux, or a drive letter on Windows), or the filename parameter can be a
+ * URL for a file found on a network.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed. Calling loadXML() inside preload()
+ * guarantees to complete the operation before setup() and draw() are called.
+ *
+ * Outside of preload(), you may supply a callback function to handle the
+ * object.
+ *
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadXML
+ * @param {String} filename name of the file or URL to load
+ * @param {function} [callback] function to be executed after loadXML()
+ * completes, XML object is passed in as
+ * first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Object} XML object containing data
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < children.length; i++) {
+ * let id = children[i].getNum('id');
+ * let coloring = children[i].getString('species');
+ * let name = children[i].getContent();
+ * print(id + ', ' + coloring + ', ' + name);
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // 0, Capra hircus, Goat
+ * // 1, Panthera pardus, Leopard
+ * // 2, Equus zebra, Zebra
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.prototype.loadXML = function() {
+ for (
+ var _len3 = arguments.length, args = new Array(_len3), _key3 = 0;
+ _key3 < _len3;
+ _key3++
+ ) {
+ args[_key3] = arguments[_key3];
+ }
+ var ret = new _main.default.XML();
+ var callback, errorCallback;
+
+ for (var i = 1; i < args.length; i++) {
+ var arg = args[i];
+ if (typeof arg === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arg;
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arg;
+ }
+ }
+ }
+
+ var self = this;
+ this.httpDo(
+ args[0],
+ 'GET',
+ 'xml',
+ function(xml) {
+ for (var key in xml) {
+ ret[key] = xml[key];
+ }
+ if (typeof callback !== 'undefined') {
+ callback(ret);
+ }
+
+ self._decrementPreload();
+ },
+ function(err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(1, arguments[0]);
+
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
+ }
+ );
+
+ return ret;
+ };
+
+ /**
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadBytes
+ * @param {string} file name of the file or URL to load
+ * @param {function} [callback] function to be executed after loadBytes()
+ * completes
+ * @param {function} [errorCallback] function to be executed if there
+ * is an error
+ * @returns {Object} an object whose 'bytes' property will be the loaded buffer
+ *
+ * @example
+ *
+ * let data;
+ *
+ * function preload() {
+ * data = loadBytes('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * for (let i = 0; i < 5; i++) {
+ * console.log(data.bytes[i].toString(16));
+ * }
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.prototype.loadBytes = function(file, callback, errorCallback) {
+ var ret = {};
+
+ var self = this;
+ this.httpDo(
+ file,
+ 'GET',
+ 'arrayBuffer',
+ function(arrayBuffer) {
+ ret.bytes = new Uint8Array(arrayBuffer);
+
+ if (typeof callback === 'function') {
+ callback(ret);
+ }
+
+ self._decrementPreload();
+ },
+ function(err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(6, file);
+
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
+ }
+ );
+
+ return ret;
+ };
+
+ /**
+ * Method for executing an HTTP GET request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
+ * calling httpDo(path, 'GET'). The 'binary' datatype will return
+ * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+ * which can be used to initialize typed arrays (such as Uint8Array).
+ *
+ * @method httpGet
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "binary", "arrayBuffer",
+ * "xml", or "text"
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpGet() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ * @example
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+ * 'format=geojson&limit=1&orderby=time';
+ * httpGet(url, 'jsonp', false, function(response) {
+ * // when the HTTP request completes, populate the variable that holds the
+ * // earthquake data used in the visualization.
+ * earthquakes = response;
+ * });
+ * }
+ *
+ * function draw() {
+ * if (!earthquakes) {
+ * // Wait until the earthquake data has loaded before drawing.
+ * return;
+ * }
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * noLoop();
+ * }
+ *
+ */
+ /**
+ * @method httpGet
+ * @param {String} path
+ * @param {Object|Boolean} data
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ /**
+ * @method httpGet
+ * @param {String} path
+ * @param {function} callback
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ _main.default.prototype.httpGet = function() {
+ _main.default._validateParameters('httpGet', arguments);
+
+ var args = Array.prototype.slice.call(arguments);
+ args.splice(1, 0, 'GET');
+ return _main.default.prototype.httpDo.apply(this, args);
+ };
+
+ /**
+ * Method for executing an HTTP POST request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
+ * calling httpDo(path, 'POST').
+ *
+ * @method httpPost
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "xml", or "text".
+ * If omitted, httpPost() will guess.
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpPost() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ *
+ * @example
+ *
+ *
+ * // Examples use jsonplaceholder.typicode.com for a Mock Data API
+ *
+ * let url = 'https://jsonplaceholder.typicode.com/posts';
+ * let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is way cool.' };
+ *
+ * function setup() {
+ * createCanvas(800, 800);
+ * }
+ *
+ * function mousePressed() {
+ * // Pick new random color values
+ * let r = random(255);
+ * let g = random(255);
+ * let b = random(255);
+ *
+ * httpPost(url, 'json', postData, function(result) {
+ * strokeWeight(2);
+ * stroke(r, g, b);
+ * fill(r, g, b, 127);
+ * ellipse(mouseX, mouseY, 200, 200);
+ * text(result.body, mouseX, mouseY);
+ * });
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let url = 'https://invalidURL'; // A bad URL that will cause errors
+ * let postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };
+ *
+ * function setup() {
+ * createCanvas(800, 800);
+ * }
+ *
+ * function mousePressed() {
+ * // Pick new random color values
+ * let r = random(255);
+ * let g = random(255);
+ * let b = random(255);
+ *
+ * httpPost(
+ * url,
+ * 'json',
+ * postData,
+ * function(result) {
+ * // ... won't be called
+ * },
+ * function(error) {
+ * strokeWeight(2);
+ * stroke(r, g, b);
+ * fill(r, g, b, 127);
+ * text(error.toString(), mouseX, mouseY);
+ * }
+ * );
+ * }
+ *
+ *
+ */
+ /**
+ * @method httpPost
+ * @param {String} path
+ * @param {Object|Boolean} data
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ /**
+ * @method httpPost
+ * @param {String} path
+ * @param {function} callback
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ _main.default.prototype.httpPost = function() {
+ _main.default._validateParameters('httpPost', arguments);
+
+ var args = Array.prototype.slice.call(arguments);
+ args.splice(1, 0, 'POST');
+ return _main.default.prototype.httpDo.apply(this, args);
+ };
+
+ /**
+ * Method for executing an HTTP request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text.
+ * For more advanced use, you may also pass in the path as the first argument
+ * and a object as the second argument, the signature follows the one specified
+ * in the Fetch API specification.
+ * This method is suitable for fetching files up to size of 64MB when "GET" is used.
+ *
+ * @method httpDo
+ * @param {String} path name of the file or url to load
+ * @param {String} [method] either "GET", "POST", or "PUT",
+ * defaults to "GET"
+ * @param {String} [datatype] "json", "jsonp", "xml", or "text"
+ * @param {Object} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpGet() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ *
+ * @example
+ *
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ *
+ * // displays an animation of all USGS earthquakes
+ * let earthquakes;
+ * let eqFeatureIndex = 0;
+ *
+ * function preload() {
+ * let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+ * httpDo(
+ * url,
+ * {
+ * method: 'GET',
+ * // Other Request options, like special headers for apis
+ * headers: { authorization: 'Bearer secretKey' }
+ * },
+ * function(res) {
+ * earthquakes = res;
+ * }
+ * );
+ * }
+ *
+ * function draw() {
+ * // wait until the data is loaded
+ * if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+ * return;
+ * }
+ * clear();
+ *
+ * let feature = earthquakes.features[eqFeatureIndex];
+ * let mag = feature.properties.mag;
+ * let rad = mag / 11 * ((width + height) / 2);
+ * fill(255, 0, 0, 100);
+ * ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+ *
+ * if (eqFeatureIndex >= earthquakes.features.length) {
+ * eqFeatureIndex = 0;
+ * } else {
+ * eqFeatureIndex += 1;
+ * }
+ * }
+ *
+ *
+ */
+ /**
+ * @method httpDo
+ * @param {String} path
+ * @param {Object} options Request object options as documented in the
+ * "fetch" API
+ * reference
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ _main.default.prototype.httpDo = function() {
+ var type;
+ var callback;
+ var errorCallback;
+ var request;
+ var promise;
+ var jsonpOptions = {};
+ var cbCount = 0;
+ var contentType = 'text/plain';
+ // Trim the callbacks off the end to get an idea of how many arguments are passed
+ for (var i = arguments.length - 1; i > 0; i--) {
+ if (
+ typeof (i < 0 || arguments.length <= i ? undefined : arguments[i]) ===
+ 'function'
+ ) {
+ cbCount++;
+ } else {
+ break;
+ }
+ }
+ // The number of arguments minus callbacks
+ var argsCount = arguments.length - cbCount;
+ var path = arguments.length <= 0 ? undefined : arguments[0];
+ if (
+ argsCount === 2 &&
+ typeof path === 'string' &&
+ _typeof(arguments.length <= 1 ? undefined : arguments[1]) === 'object'
+ ) {
+ // Intended for more advanced use, pass in Request parameters directly
+ request = new Request(path, arguments.length <= 1 ? undefined : arguments[1]);
+ callback = arguments.length <= 2 ? undefined : arguments[2];
+ errorCallback = arguments.length <= 3 ? undefined : arguments[3];
+ } else {
+ // Provided with arguments
+ var method = 'GET';
+ var data;
+
+ for (var j = 1; j < arguments.length; j++) {
+ var a = j < 0 || arguments.length <= j ? undefined : arguments[j];
+ if (typeof a === 'string') {
+ if (a === 'GET' || a === 'POST' || a === 'PUT' || a === 'DELETE') {
+ method = a;
+ } else if (
+ a === 'json' ||
+ a === 'jsonp' ||
+ a === 'binary' ||
+ a === 'arrayBuffer' ||
+ a === 'xml' ||
+ a === 'text' ||
+ a === 'table'
+ ) {
+ type = a;
+ } else {
+ data = a;
+ }
+ } else if (typeof a === 'number') {
+ data = a.toString();
+ } else if (_typeof(a) === 'object') {
+ if (
+ a.hasOwnProperty('jsonpCallback') ||
+ a.hasOwnProperty('jsonpCallbackFunction')
+ ) {
+ for (var attr in a) {
+ jsonpOptions[attr] = a[attr];
+ }
+ } else if (a instanceof _main.default.XML) {
+ data = a.serialize();
+ contentType = 'application/xml';
+ } else {
+ data = JSON.stringify(a);
+ contentType = 'application/json';
+ }
+ } else if (typeof a === 'function') {
+ if (!callback) {
+ callback = a;
+ } else {
+ errorCallback = a;
+ }
+ }
+ }
+
+ request = new Request(path, {
+ method: method,
+ mode: 'cors',
+ body: data,
+ headers: new Headers({
+ 'Content-Type': contentType
+ })
+ });
+ }
+ // do some sort of smart type checking
+ if (!type) {
+ if (path.includes('json')) {
+ type = 'json';
+ } else if (path.includes('xml')) {
+ type = 'xml';
+ } else {
+ type = 'text';
+ }
+ }
+
+ if (type === 'jsonp') {
+ promise = (0, _fetchJsonp.default)(path, jsonpOptions);
+ } else {
+ promise = fetch(request);
+ }
+ promise = promise.then(function(res) {
+ if (!res.ok) {
+ var err = new Error(res.body);
+ err.status = res.status;
+ err.ok = false;
+ throw err;
+ } else {
+ var fileSize = 0;
+ if (type !== 'jsonp') {
+ fileSize = res.headers.get('content-length');
+ }
+ if (fileSize && fileSize > 64000000) {
+ _main.default._friendlyFileLoadError(7, path);
+ }
+ switch (type) {
+ case 'json':
+ case 'jsonp':
+ return res.json();
+ case 'binary':
+ return res.blob();
+ case 'arrayBuffer':
+ return res.arrayBuffer();
+ case 'xml':
+ return res.text().then(function(text) {
+ var parser = new DOMParser();
+ var xml = parser.parseFromString(text, 'text/xml');
+ return new _main.default.XML(xml.documentElement);
+ });
+ default:
+ return res.text();
+ }
+ }
+ });
+ promise.then(callback || function() {});
+ promise.catch(errorCallback || console.error);
+ return promise;
+ };
+
+ /**
+ * @module IO
+ * @submodule Output
+ * @for p5
+ */
+
+ window.URL = window.URL || window.webkitURL;
+
+ // private array of p5.PrintWriter objects
+ _main.default.prototype._pWriters = [];
+
+ /**
+ * @method createWriter
+ * @param {String} name name of the file to be created
+ * @param {String} [extension]
+ * @return {p5.PrintWriter}
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * const writer = createWriter('squares.txt');
+ * for (let i = 0; i < 10; i++) {
+ * writer.print(i * i);
+ * }
+ * writer.close();
+ * writer.clear();
+ * }
+ * }
+ *
+ *
+ */
+ _main.default.prototype.createWriter = function(name, extension) {
+ var newPW;
+ // check that it doesn't already exist
+ for (var i in _main.default.prototype._pWriters) {
+ if (_main.default.prototype._pWriters[i].name === name) {
+ // if a p5.PrintWriter w/ this name already exists...
+ // return p5.prototype._pWriters[i]; // return it w/ contents intact.
+ // or, could return a new, empty one with a unique name:
+ newPW = new _main.default.PrintWriter(name + this.millis(), extension);
+ _main.default.prototype._pWriters.push(newPW);
+ return newPW;
+ }
+ }
+ newPW = new _main.default.PrintWriter(name, extension);
+ _main.default.prototype._pWriters.push(newPW);
+ return newPW;
+ };
+
+ /**
+ * @class p5.PrintWriter
+ * @param {String} filename
+ * @param {String} [extension]
+ */
+ _main.default.PrintWriter = function(filename, extension) {
+ var self = this;
+ this.name = filename;
+ this.content = '';
+ //Changed to write because it was being overloaded by function below.
+ /**
+ * Writes data to the PrintWriter stream
+ * @method write
+ * @param {Array} data all data to be written by the PrintWriter
+ * @example
+ *
+ *
+ * // creates a file called 'newFile.txt'
+ * let writer = createWriter('newFile.txt');
+ * // write 'Hello world!'' to the file
+ * writer.write(['Hello world!']);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ *
+ * // creates a file called 'newFile2.txt'
+ * let writer = createWriter('newFile2.txt');
+ * // write 'apples,bananas,123' to the file
+ * writer.write(['apples', 'bananas', 123]);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ *
+ * // creates a file called 'newFile3.txt'
+ * let writer = createWriter('newFile3.txt');
+ * // write 'My name is: Teddy' to the file
+ * writer.write('My name is:');
+ * writer.write(' Teddy');
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ */
+ this.write = function(data) {
+ this.content += data;
+ };
+ /**
+ * Writes data to the PrintWriter stream, and adds a new line at the end
+ * @method print
+ * @param {Array} data all data to be printed by the PrintWriter
+ * @example
+ *
+ *
+ * // creates a file called 'newFile.txt'
+ * let writer = createWriter('newFile.txt');
+ * // creates a file containing
+ * // My name is:
+ * // Teddy
+ * writer.print('My name is:');
+ * writer.print('Teddy');
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ *
+ * let writer;
+ *
+ * function setup() {
+ * createCanvas(400, 400);
+ * // create a PrintWriter
+ * writer = createWriter('newFile.txt');
+ * }
+ *
+ * function draw() {
+ * // print all mouseX and mouseY coordinates to the stream
+ * writer.print([mouseX, mouseY]);
+ * }
+ *
+ * function mouseClicked() {
+ * // close the PrintWriter and save the file
+ * writer.close();
+ * }
+ *
+ *
+ */
+ this.print = function(data) {
+ this.content += ''.concat(data, '\n');
+ };
+ /**
+ * Clears the data already written to the PrintWriter object
+ * @method clear
+ * @example
+ *
+ * // create writer object
+ * let writer = createWriter('newFile.txt');
+ * writer.write(['clear me']);
+ * // clear writer object here
+ * writer.clear();
+ * // close writer
+ * writer.close();
+ *
+ *
+ */
+ this.clear = function() {
+ this.content = '';
+ };
+ /**
+ * Closes the PrintWriter
+ * @method close
+ * @example
+ *
+ *
+ * // create a file called 'newFile.txt'
+ * let writer = createWriter('newFile.txt');
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ *
+ * // create a file called 'newFile2.txt'
+ * let writer = createWriter('newFile2.txt');
+ * // write some data to the file
+ * writer.write([100, 101, 102]);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ */
+ this.close = function() {
+ // convert String to Array for the writeFile Blob
+ var arr = [];
+ arr.push(this.content);
+ _main.default.prototype.writeFile(arr, filename, extension);
+ // remove from _pWriters array and delete self
+ for (var i in _main.default.prototype._pWriters) {
+ if (_main.default.prototype._pWriters[i].name === this.name) {
+ // remove from _pWriters array
+ _main.default.prototype._pWriters.splice(i, 1);
+ }
+ }
+ self.clear();
+ self = {};
+ };
+ };
+
+ /**
+ * @module IO
+ * @submodule Output
+ * @for p5
+ */
+
+ // object, filename, options --> saveJSON, saveStrings,
+ // filename, [extension] [canvas] --> saveImage
+
+ /**
+ * Save an image, text, json, csv, wav, or html. Prompts download to
+ * the client's computer. Note that it is not recommended to call save()
+ * within draw if it's looping, as the save() function will open a new save
+ * dialog every frame.
+ * The default behavior is to save the canvas as an image. You can
+ * optionally specify a filename.
+ * For example:
+ *
+ * save();
+ * save('myCanvas.jpg'); // save a specific canvas with a filename
+ *
+ *
+ * Alternately, the first parameter can be a pointer to a canvas
+ * p5.Element, an Array of Strings,
+ * an Array of JSON, a JSON object, a p5.Table, a p5.Image, or a
+ * p5.SoundFile (requires p5.sound). The second parameter is a filename
+ * (including extension). The third parameter is for options specific
+ * to this type of object. This method will save a file that fits the
+ * given parameters. For example:
+ *
+ *
+ * // Saves canvas as an image
+ * save('myCanvas.jpg');
+ *
+ * // Saves pImage as a png image
+ * let img = createImage(10, 10);
+ * save(img, 'my.png');
+ *
+ * // Saves canvas as an image
+ * let cnv = createCanvas(100, 100);
+ * save(cnv, 'myCanvas.jpg');
+ *
+ * // Saves p5.Renderer object as an image
+ * let gb = createGraphics(100, 100);
+ * save(gb, 'myGraphics.jpg');
+ *
+ * let myTable = new p5.Table();
+ *
+ * // Saves table as html file
+ * save(myTable, 'myTable.html');
+ *
+ * // Comma Separated Values
+ * save(myTable, 'myTable.csv');
+ *
+ * // Tab Separated Values
+ * save(myTable, 'myTable.tsv');
+ *
+ * let myJSON = { a: 1, b: true };
+ *
+ * // Saves pretty JSON
+ * save(myJSON, 'my.json');
+ *
+ * // Optimizes JSON filesize
+ * save(myJSON, 'my.json', true);
+ *
+ * // Saves array of strings to a text file with line breaks after each item
+ * let arrayOfStrings = ['a', 'b'];
+ * save(arrayOfStrings, 'my.txt');
+ *
+ *
+ * @method save
+ * @param {Object|String} [objectOrFilename] If filename is provided, will
+ * save canvas as an image with
+ * either png or jpg extension
+ * depending on the filename.
+ * If object is provided, will
+ * save depending on the object
+ * and filename (see examples
+ * above).
+ * @param {String} [filename] If an object is provided as the first
+ * parameter, then the second parameter
+ * indicates the filename,
+ * and should include an appropriate
+ * file extension (see examples above).
+ * @param {Boolean|String} [options] Additional options depend on
+ * filetype. For example, when saving JSON,
+ * true indicates that the
+ * output will be optimized for filesize,
+ * rather than readability.
+ */
+ _main.default.prototype.save = function(object, _filename, _options) {
+ // parse the arguments and figure out which things we are saving
+ var args = arguments;
+ // =================================================
+ // OPTION 1: saveCanvas...
+
+ // if no arguments are provided, save canvas
+ var cnv = this._curElement ? this._curElement.elt : this.elt;
+ if (args.length === 0) {
+ _main.default.prototype.saveCanvas(cnv);
+ return;
+ } else if (
+ args[0] instanceof _main.default.Renderer ||
+ args[0] instanceof _main.default.Graphics
+ ) {
+ // otherwise, parse the arguments
+
+ // if first param is a p5Graphics, then saveCanvas
+ _main.default.prototype.saveCanvas(args[0].elt, args[1], args[2]);
+ return;
+ } else if (args.length === 1 && typeof args[0] === 'string') {
+ // if 1st param is String and only one arg, assume it is canvas filename
+ _main.default.prototype.saveCanvas(cnv, args[0]);
+ } else {
+ // =================================================
+ // OPTION 2: extension clarifies saveStrings vs. saveJSON
+ var extension = _checkFileExtension(args[1], args[2])[1];
+ switch (extension) {
+ case 'json':
+ _main.default.prototype.saveJSON(args[0], args[1], args[2]);
+ return;
+ case 'txt':
+ _main.default.prototype.saveStrings(args[0], args[1], args[2]);
+ return;
+ // =================================================
+ // OPTION 3: decide based on object...
+ default:
+ if (args[0] instanceof Array) {
+ _main.default.prototype.saveStrings(args[0], args[1], args[2]);
+ } else if (args[0] instanceof _main.default.Table) {
+ _main.default.prototype.saveTable(args[0], args[1], args[2]);
+ } else if (args[0] instanceof _main.default.Image) {
+ _main.default.prototype.saveCanvas(args[0].canvas, args[1]);
+ } else if (args[0] instanceof _main.default.SoundFile) {
+ _main.default.prototype.saveSound(args[0], args[1], args[2], args[3]);
+ }
+ }
+ }
+ };
+
+ /**
+ * Writes the contents of an Array or a JSON object to a .json file.
+ * The file saving process and location of the saved file will
+ * vary between web browsers.
+ *
+ * @method saveJSON
+ * @param {Array|Object} json
+ * @param {String} filename
+ * @param {Boolean} [optimize] If true, removes line breaks
+ * and spaces from the output
+ * file to optimize filesize
+ * (but not readability).
+ * @example
+ *
+ * let json = {}; // new JSON Object
+ *
+ * json.id = 0;
+ * json.species = 'Panthera leo';
+ * json.name = 'Lion';
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * saveJSON(json, 'lion.json');
+ * }
+ * }
+ *
+ * // saves the following to a file called "lion.json":
+ * // {
+ * // "id": 0,
+ * // "species": "Panthera leo",
+ * // "name": "Lion"
+ * // }
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.prototype.saveJSON = function(json, filename, opt) {
+ _main.default._validateParameters('saveJSON', arguments);
+ var stringify;
+ if (opt) {
+ stringify = JSON.stringify(json);
+ } else {
+ stringify = JSON.stringify(json, undefined, 2);
+ }
+ this.saveStrings(stringify.split('\n'), filename, 'json');
+ };
+
+ _main.default.prototype.saveJSONObject = _main.default.prototype.saveJSON;
+ _main.default.prototype.saveJSONArray = _main.default.prototype.saveJSON;
+
+ /**
+ * Writes an array of Strings to a text file, one line per String.
+ * The file saving process and location of the saved file will
+ * vary between web browsers.
+ *
+ * @method saveStrings
+ * @param {String[]} list string array to be written
+ * @param {String} filename filename for output
+ * @param {String} [extension] the filename's extension
+ * @example
+ *
+ * let words = 'apple bear cat dog';
+ *
+ * // .split() outputs an Array
+ * let list = split(words, ' ');
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * saveStrings(list, 'nouns.txt');
+ * }
+ * }
+ *
+ * // Saves the following to a file called 'nouns.txt':
+ * //
+ * // apple
+ * // bear
+ * // cat
+ * // dog
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.prototype.saveStrings = function(list, filename, extension) {
+ _main.default._validateParameters('saveStrings', arguments);
+ var ext = extension || 'txt';
+ var pWriter = this.createWriter(filename, ext);
+ for (var i = 0; i < list.length; i++) {
+ if (i < list.length - 1) {
+ pWriter.print(list[i]);
+ } else {
+ pWriter.print(list[i]);
+ }
+ }
+ pWriter.close();
+ pWriter.clear();
+ };
+
+ // =======
+ // HELPERS
+ // =======
+
+ function escapeHelper(content) {
+ return content
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ }
+
+ /**
+ * Writes the contents of a Table object to a file. Defaults to a
+ * text file with comma-separated-values ('csv') but can also
+ * use tab separation ('tsv'), or generate an HTML table ('html').
+ * The file saving process and location of the saved file will
+ * vary between web browsers.
+ *
+ * @method saveTable
+ * @param {p5.Table} Table the Table object to save to a file
+ * @param {String} filename the filename to which the Table should be saved
+ * @param {String} [options] can be one of "tsv", "csv", or "html"
+ * @example
+ *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('id');
+ * table.addColumn('species');
+ * table.addColumn('name');
+ *
+ * let newRow = table.addRow();
+ * newRow.setNum('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Panthera leo');
+ * newRow.setString('name', 'Lion');
+ *
+ * // To save, un-comment next line then click 'run'
+ * // saveTable(table, 'new.csv');
+ * }
+ *
+ * // Saves the following to a file called 'new.csv':
+ * // id,species,name
+ * // 0,Panthera leo,Lion
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.prototype.saveTable = function(table, filename, options) {
+ _main.default._validateParameters('saveTable', arguments);
+ var ext;
+ if (options === undefined) {
+ ext = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
+ } else {
+ ext = options;
+ }
+ var pWriter = this.createWriter(filename, ext);
+
+ var header = table.columns;
+
+ var sep = ','; // default to CSV
+ if (ext === 'tsv') {
+ sep = '\t';
+ }
+ if (ext !== 'html') {
+ // make header if it has values
+ if (header[0] !== '0') {
+ for (var h = 0; h < header.length; h++) {
+ if (h < header.length - 1) {
+ pWriter.write(header[h] + sep);
+ } else {
+ pWriter.write(header[h]);
+ }
+ }
+ pWriter.write('\n');
+ }
+
+ // make rows
+ for (var i = 0; i < table.rows.length; i++) {
+ var j = void 0;
+ for (j = 0; j < table.rows[i].arr.length; j++) {
+ if (j < table.rows[i].arr.length - 1) {
+ pWriter.write(table.rows[i].arr[j] + sep);
+ } else if (i < table.rows.length - 1) {
+ pWriter.write(table.rows[i].arr[j]);
+ } else {
+ pWriter.write(table.rows[i].arr[j]);
+ }
+ }
+ pWriter.write('\n');
+ }
+ } else {
+ // otherwise, make HTML
+ pWriter.print('');
+ pWriter.print('');
+ var str = ' ');
+
+ pWriter.print('');
+ pWriter.print(' ');
+
+ // make header if it has values
+ if (header[0] !== '0') {
+ pWriter.print(' ');
+ for (var k = 0; k < header.length; k++) {
+ var e = escapeHelper(header[k]);
+ pWriter.print(' '.concat(e));
+ pWriter.print(' ');
+ }
+ pWriter.print(' ');
+ }
+
+ // make rows
+ for (var row = 0; row < table.rows.length; row++) {
+ pWriter.print(' ');
+ for (var col = 0; col < table.columns.length; col++) {
+ var entry = table.rows[row].getString(col);
+ var htmlEntry = escapeHelper(entry);
+ pWriter.print(' '.concat(htmlEntry));
+ pWriter.print(' ');
+ }
+ pWriter.print(' ');
+ }
+ pWriter.print('
');
+ pWriter.print('');
+ pWriter.print('');
+ }
+ // close and clear the pWriter
+ pWriter.close();
+ pWriter.clear();
+ }; // end saveTable()
+
+ /**
+ * Generate a blob of file data as a url to prepare for download.
+ * Accepts an array of data, a filename, and an extension (optional).
+ * This is a private function because it does not do any formatting,
+ * but it is used by saveStrings, saveJSON, saveTable etc.
+ *
+ * @param {Array} dataToDownload
+ * @param {String} filename
+ * @param {String} [extension]
+ * @private
+ */
+ _main.default.prototype.writeFile = function(
+ dataToDownload,
+ filename,
+ extension
+ ) {
+ var type = 'application/octet-stream';
+ if (_main.default.prototype._isSafari()) {
+ type = 'text/plain';
+ }
+ var blob = new Blob(dataToDownload, {
+ type: type
+ });
+
+ _main.default.prototype.downloadFile(blob, filename, extension);
+ };
+
+ /**
+ * Forces download. Accepts a url to filedata/blob, a filename,
+ * and an extension (optional).
+ * This is a private function because it does not do any formatting,
+ * but it is used by saveStrings, saveJSON, saveTable etc.
+ *
+ * @method downloadFile
+ * @private
+ * @param {String|Blob} data either an href generated by createObjectURL,
+ * or a Blob object containing the data
+ * @param {String} [filename]
+ * @param {String} [extension]
+ */
+ _main.default.prototype.downloadFile = function(data, fName, extension) {
+ var fx = _checkFileExtension(fName, extension);
+ var filename = fx[0];
+
+ if (data instanceof Blob) {
+ _fileSaver.default.saveAs(data, filename);
+ return;
+ }
+
+ var a = document.createElement('a');
+ a.href = data;
+ a.download = filename;
+
+ // Firefox requires the link to be added to the DOM before click()
+ a.onclick = function(e) {
+ destroyClickedElement(e);
+ e.stopPropagation();
+ };
+
+ a.style.display = 'none';
+ document.body.appendChild(a);
+
+ // Safari will open this file in the same page as a confusing Blob.
+ if (_main.default.prototype._isSafari()) {
+ var aText = 'Hello, Safari user! To download this file...\n';
+ aText += '1. Go to File --> Save As.\n';
+ aText += '2. Choose "Page Source" as the Format.\n';
+ aText += '3. Name it with this extension: ."'.concat(fx[1], '"');
+ alert(aText);
+ }
+ a.click();
+ };
+
+ /**
+ * Returns a file extension, or another string
+ * if the provided parameter has no extension.
+ *
+ * @param {String} filename
+ * @param {String} [extension]
+ * @return {String[]} [fileName, fileExtension]
+ *
+ * @private
+ */
+ function _checkFileExtension(filename, extension) {
+ if (!extension || extension === true || extension === 'true') {
+ extension = '';
+ }
+ if (!filename) {
+ filename = 'untitled';
+ }
+ var ext = '';
+ // make sure the file will have a name, see if filename needs extension
+ if (filename && filename.includes('.')) {
+ ext = filename.split('.').pop();
+ }
+ // append extension if it doesn't exist
+ if (extension) {
+ if (ext !== extension) {
+ ext = extension;
+ filename = ''.concat(filename, '.').concat(ext);
+ }
+ }
+ return [filename, ext];
+ }
+ _main.default.prototype._checkFileExtension = _checkFileExtension;
+
+ /**
+ * Returns true if the browser is Safari, false if not.
+ * Safari makes trouble for downloading files.
+ *
+ * @return {Boolean} [description]
+ * @private
+ */
+ _main.default.prototype._isSafari = function() {
+ var x = Object.prototype.toString.call(window.HTMLElement);
+ return x.indexOf('Constructor') > 0;
+ };
+
+ /**
+ * Helper function, a callback for download that deletes
+ * an invisible anchor element from the DOM once the file
+ * has been automatically downloaded.
+ *
+ * @private
+ */
+ function destroyClickedElement(event) {
+ document.body.removeChild(event.target);
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/error_helpers': 23,
+ '../core/main': 27,
+ 'es6-promise/auto': 5,
+ 'fetch-jsonp': 7,
+ 'file-saver': 8,
+ 'whatwg-fetch': 15
+ }
+ ],
+ 54: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /**
+ * Table objects store data with multiple rows and columns, much
+ * like in a traditional spreadsheet. Tables can be generated from
+ * scratch, dynamically, or using data from an existing file.
+ *
+ * @class p5.Table
+ * @constructor
+ * @param {p5.TableRow[]} [rows] An array of p5.TableRow objects
+ */ /**
+ * @module IO
+ * @submodule Table
+ * @requires core
+ */ /**
+ * Table Options
+ * Generic class for handling tabular data, typically from a
+ * CSV, TSV, or other sort of spreadsheet file.
+ * CSV files are
+ *
+ * comma separated values, often with the data in quotes. TSV
+ * files use tabs as separators, and usually don't bother with the
+ * quotes.
+ * File names should end with .csv if they're comma separated.
+ * A rough "spec" for CSV can be found
+ * here.
+ * To load files, use the loadTable method.
+ * To save tables to your computer, use the save method
+ * or the saveTable method.
+ *
+ * Possible options include:
+ *
+ * - csv - parse the table as comma-separated values
+ *
- tsv - parse the table as tab-separated values
+ *
- header - this table has a header (title) row
+ *
+ */
+ _main.default.Table = function(rows) {
+ /**
+ * An array containing the names of the columns in the table, if the "header" the table is
+ * loaded with the "header" parameter.
+ * @property columns {String[]}
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //print the column names
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print('column ' + c + ' is named ' + table.columns[c]);
+ * }
+ * }
+ *
+ *
+ */
+ this.columns = [];
+
+ /**
+ * An array containing the p5.TableRow objects that make up the
+ * rows of the table. The same result as calling getRows()
+ * @property rows {p5.TableRow[]}
+ */
+ this.rows = [];
+ };
+
+ /**
+ * Use addRow() to add a new row of data to a p5.Table object. By default,
+ * an empty row is created. Typically, you would store a reference to
+ * the new row in a TableRow object (see newRow in the example above),
+ * and then set individual values using set().
+ *
+ * If a p5.TableRow object is included as a parameter, then that row is
+ * duplicated and added to the table.
+ *
+ * @method addRow
+ * @param {p5.TableRow} [row] row to be added to the table
+ * @return {p5.TableRow} the row that was added
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ * }
+ *
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.addRow = function(row) {
+ // make sure it is a valid TableRow
+ var r = row || new _main.default.TableRow();
+
+ if (typeof r.arr === 'undefined' || typeof r.obj === 'undefined') {
+ //r = new p5.prototype.TableRow(r);
+ throw new Error('invalid TableRow: '.concat(r));
+ }
+ r.table = this;
+ this.rows.push(r);
+ return r;
+ };
+
+ /**
+ * Removes a row from the table object.
+ *
+ * @method removeRow
+ * @param {Integer} id ID number of the row to remove
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //remove the first row
+ * table.removeRow(0);
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ * }
+ *
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.removeRow = function(id) {
+ this.rows[id].table = null; // remove reference to table
+ var chunk = this.rows.splice(id + 1, this.rows.length);
+ this.rows.pop();
+ this.rows = this.rows.concat(chunk);
+ };
+
+ /**
+ * Returns a reference to the specified p5.TableRow. The reference
+ * can then be used to get and set values of the selected row.
+ *
+ * @method getRow
+ * @param {Integer} rowID ID number of the row to get
+ * @return {p5.TableRow} p5.TableRow object
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let row = table.getRow(1);
+ * //print it column by column
+ * //note: a row is an object, not an array
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(row.getString(c));
+ * }
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.getRow = function(r) {
+ return this.rows[r];
+ };
+
+ /**
+ * Gets all rows from the table. Returns an array of p5.TableRows.
+ *
+ * @method getRows
+ * @return {p5.TableRow[]} Array of p5.TableRows
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ *
+ * //warning: rows is an array of objects
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ * }
+ *
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.getRows = function() {
+ return this.rows;
+ };
+
+ /**
+ * Finds the first row in the Table that contains the value
+ * provided, and returns a reference to that row. Even if
+ * multiple rows are possible matches, only the first matching
+ * row is returned. The column to search may be specified by
+ * either its ID or title.
+ *
+ * @method findRow
+ * @param {String} value The value to match
+ * @param {Integer|String} column ID number or title of the
+ * column to search
+ * @return {p5.TableRow}
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //find the animal named zebra
+ * let row = table.findRow('Zebra', 'name');
+ * //find the corresponding species
+ * print(row.getString('species'));
+ * }
+ *
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.findRow = function(value, column) {
+ // try the Object
+ if (typeof column === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column] === value) {
+ return this.rows[i];
+ }
+ }
+ } else {
+ // try the Array
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column] === value) {
+ return this.rows[j];
+ }
+ }
+ }
+ // otherwise...
+ return null;
+ };
+
+ /**
+ * Finds the rows in the Table that contain the value
+ * provided, and returns references to those rows. Returns an
+ * Array, so for must be used to iterate through all the rows,
+ * as shown in the example above. The column to search may be
+ * specified by either its ID or title.
+ *
+ * @method findRows
+ * @param {String} value The value to match
+ * @param {Integer|String} column ID number or title of the
+ * column to search
+ * @return {p5.TableRow[]} An Array of TableRow objects
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add another goat
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Scape Goat');
+ * newRow.setString('name', 'Goat');
+ *
+ * //find the rows containing animals named Goat
+ * let rows = table.findRows('Goat', 'name');
+ * print(rows.length + ' Goats found');
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.findRows = function(value, column) {
+ var ret = [];
+ if (typeof column === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column] === value) {
+ ret.push(this.rows[i]);
+ }
+ }
+ } else {
+ // try the Array
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column] === value) {
+ ret.push(this.rows[j]);
+ }
+ }
+ }
+ return ret;
+ };
+
+ /**
+ * Finds the first row in the Table that matches the regular
+ * expression provided, and returns a reference to that row.
+ * Even if multiple rows are possible matches, only the first
+ * matching row is returned. The column to search may be
+ * specified by either its ID or title.
+ *
+ * @method matchRow
+ * @param {String|RegExp} regexp The regular expression to match
+ * @param {String|Integer} column The column ID (number) or
+ * title (string)
+ * @return {p5.TableRow} TableRow object
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //Search using specified regex on a given column, return TableRow object
+ * let mammal = table.matchRow(new RegExp('ant'), 1);
+ * print(mammal.getString(1));
+ * //Output "Panthera pardus"
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Table.prototype.matchRow = function(regexp, column) {
+ if (typeof column === 'number') {
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column].match(regexp)) {
+ return this.rows[j];
+ }
+ }
+ } else {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column].match(regexp)) {
+ return this.rows[i];
+ }
+ }
+ }
+ return null;
+ };
+
+ /**
+ * Finds the rows in the Table that match the regular expression provided,
+ * and returns references to those rows. Returns an array, so for must be
+ * used to iterate through all the rows, as shown in the example. The
+ * column to search may be specified by either its ID or title.
+ *
+ * @method matchRows
+ * @param {String} regexp The regular expression to match
+ * @param {String|Integer} [column] The column ID (number) or
+ * title (string)
+ * @return {p5.TableRow[]} An Array of TableRow objects
+ * @example
+ *
+ *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', 'Lion');
+ * newRow.setString('type', 'Mammal');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Snake');
+ * newRow.setString('type', 'Reptile');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Mosquito');
+ * newRow.setString('type', 'Insect');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Lizard');
+ * newRow.setString('type', 'Reptile');
+ *
+ * let rows = table.matchRows('R.*', 'type');
+ * for (let i = 0; i < rows.length; i++) {
+ * print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
+ * }
+ * }
+ * // Sketch prints:
+ * // Snake: Reptile
+ * // Lizard: Reptile
+ *
+ *
+ */
+ _main.default.Table.prototype.matchRows = function(regexp, column) {
+ var ret = [];
+ if (typeof column === 'number') {
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column].match(regexp)) {
+ ret.push(this.rows[j]);
+ }
+ }
+ } else {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column].match(regexp)) {
+ ret.push(this.rows[i]);
+ }
+ }
+ }
+ return ret;
+ };
+
+ /**
+ * Retrieves all values in the specified column, and returns them
+ * as an array. The column may be specified by either its ID or title.
+ *
+ * @method getColumn
+ * @param {String|Number} column String or Number of the column to return
+ * @return {Array} Array of column values
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //getColumn returns an array that can be printed directly
+ * print(table.getColumn('species'));
+ * //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.getColumn = function(value) {
+ var ret = [];
+ if (typeof value === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ ret.push(this.rows[i].obj[value]);
+ }
+ } else {
+ for (var j = 0; j < this.rows.length; j++) {
+ ret.push(this.rows[j].arr[value]);
+ }
+ }
+ return ret;
+ };
+
+ /**
+ * Removes all rows from a Table. While all rows are removed,
+ * columns and column titles are maintained.
+ *
+ * @method clearRows
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.clearRows();
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.clearRows = function() {
+ delete this.rows;
+ this.rows = [];
+ };
+
+ /**
+ * Use addColumn() to add a new column to a Table object.
+ * Typically, you will want to specify a title, so the column
+ * may be easily referenced later by name. (If no title is
+ * specified, the new column's title will be null.)
+ *
+ * @method addColumn
+ * @param {String} [title] title of the given column
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.addColumn('carnivore');
+ * table.set(0, 'carnivore', 'no');
+ * table.set(1, 'carnivore', 'yes');
+ * table.set(2, 'carnivore', 'no');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.addColumn = function(title) {
+ var t = title || null;
+ this.columns.push(t);
+ };
+
+ /**
+ * Returns the total number of columns in a Table.
+ *
+ * @method getColumnCount
+ * @return {Integer} Number of columns in this table
+ * @example
+ *
+ *
+ * // given the cvs file "blobs.csv" in /assets directory
+ * // ID, Name, Flavor, Shape, Color
+ * // Blob1, Blobby, Sweet, Blob, Pink
+ * // Blob2, Saddy, Savory, Blob, Blue
+ *
+ * let table;
+ *
+ * function preload() {
+ * table = loadTable('assets/blobs.csv');
+ * }
+ *
+ * function setup() {
+ * createCanvas(200, 100);
+ * textAlign(CENTER);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * let numOfColumn = table.getColumnCount();
+ * text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
+ * }
+ *
+ *
+ */
+ _main.default.Table.prototype.getColumnCount = function() {
+ return this.columns.length;
+ };
+
+ /**
+ * Returns the total number of rows in a Table.
+ *
+ * @method getRowCount
+ * @return {Integer} Number of rows in this table
+ * @example
+ *
+ *
+ * // given the cvs file "blobs.csv" in /assets directory
+ * //
+ * // ID, Name, Flavor, Shape, Color
+ * // Blob1, Blobby, Sweet, Blob, Pink
+ * // Blob2, Saddy, Savory, Blob, Blue
+ *
+ * let table;
+ *
+ * function preload() {
+ * table = loadTable('assets/blobs.csv');
+ * }
+ *
+ * function setup() {
+ * createCanvas(200, 100);
+ * textAlign(CENTER);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
+ * }
+ *
+ *
+ */
+ _main.default.Table.prototype.getRowCount = function() {
+ return this.rows.length;
+ };
+
+ /**
+ * Removes any of the specified characters (or "tokens").
+ *
+ * If no column is specified, then the values in all columns and
+ * rows are processed. A specific column may be referenced by
+ * either its ID or title.
+ *
+ * @method removeTokens
+ * @param {String} chars String listing characters to be removed
+ * @param {String|Integer} [column] Column ID (number)
+ * or name (string)
+ *
+ * @example
+ *
+ * function setup() {
+ * let table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', ' $Lion ,');
+ * newRow.setString('type', ',,,Mammal');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', '$Snake ');
+ * newRow.setString('type', ',,,Reptile');
+ *
+ * table.removeTokens(',$ ');
+ * print(table.getArray());
+ * }
+ *
+ * // prints:
+ * // 0 "Lion" "Mamal"
+ * // 1 "Snake" "Reptile"
+ *
+ */
+ _main.default.Table.prototype.removeTokens = function(chars, column) {
+ var escape = function escape(s) {
+ return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+ };
+ var charArray = [];
+ for (var i = 0; i < chars.length; i++) {
+ charArray.push(escape(chars.charAt(i)));
+ }
+ var regex = new RegExp(charArray.join('|'), 'g');
+
+ if (typeof column === 'undefined') {
+ for (var c = 0; c < this.columns.length; c++) {
+ for (var d = 0; d < this.rows.length; d++) {
+ var s = this.rows[d].arr[c];
+ s = s.replace(regex, '');
+ this.rows[d].arr[c] = s;
+ this.rows[d].obj[this.columns[c]] = s;
+ }
+ }
+ } else if (typeof column === 'string') {
+ for (var j = 0; j < this.rows.length; j++) {
+ var val = this.rows[j].obj[column];
+ val = val.replace(regex, '');
+ this.rows[j].obj[column] = val;
+ var pos = this.columns.indexOf(column);
+ this.rows[j].arr[pos] = val;
+ }
+ } else {
+ for (var k = 0; k < this.rows.length; k++) {
+ var str = this.rows[k].arr[column];
+ str = str.replace(regex, '');
+ this.rows[k].arr[column] = str;
+ this.rows[k].obj[this.columns[column]] = str;
+ }
+ }
+ };
+
+ /**
+ * Trims leading and trailing whitespace, such as spaces and tabs,
+ * from String table values. If no column is specified, then the
+ * values in all columns and rows are trimmed. A specific column
+ * may be referenced by either its ID or title.
+ *
+ * @method trim
+ * @param {String|Integer} [column] Column ID (number)
+ * or name (string)
+ * @example
+ *
+ * function setup() {
+ * let table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', ' Lion ,');
+ * newRow.setString('type', ' Mammal ');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', ' Snake ');
+ * newRow.setString('type', ' Reptile ');
+ *
+ * table.trim();
+ * print(table.getArray());
+ * }
+ *
+ * // prints:
+ * // 0 "Lion" "Mamal"
+ * // 1 "Snake" "Reptile"
+ *
+ */
+ _main.default.Table.prototype.trim = function(column) {
+ var regex = new RegExp(' ', 'g');
+
+ if (typeof column === 'undefined') {
+ for (var c = 0; c < this.columns.length; c++) {
+ for (var d = 0; d < this.rows.length; d++) {
+ var s = this.rows[d].arr[c];
+ s = s.replace(regex, '');
+ this.rows[d].arr[c] = s;
+ this.rows[d].obj[this.columns[c]] = s;
+ }
+ }
+ } else if (typeof column === 'string') {
+ for (var j = 0; j < this.rows.length; j++) {
+ var val = this.rows[j].obj[column];
+ val = val.replace(regex, '');
+ this.rows[j].obj[column] = val;
+ var pos = this.columns.indexOf(column);
+ this.rows[j].arr[pos] = val;
+ }
+ } else {
+ for (var k = 0; k < this.rows.length; k++) {
+ var str = this.rows[k].arr[column];
+ str = str.replace(regex, '');
+ this.rows[k].arr[column] = str;
+ this.rows[k].obj[this.columns[column]] = str;
+ }
+ }
+ };
+
+ /**
+ * Use removeColumn() to remove an existing column from a Table
+ * object. The column to be removed may be identified by either
+ * its title (a String) or its index value (an int).
+ * removeColumn(0) would remove the first column, removeColumn(1)
+ * would remove the second column, and so on.
+ *
+ * @method removeColumn
+ * @param {String|Integer} column columnName (string) or ID (number)
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.removeColumn('id');
+ * print(table.getColumnCount());
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.removeColumn = function(c) {
+ var cString;
+ var cNumber;
+ if (typeof c === 'string') {
+ // find the position of c in the columns
+ cString = c;
+ cNumber = this.columns.indexOf(c);
+ } else {
+ cNumber = c;
+ cString = this.columns[c];
+ }
+
+ var chunk = this.columns.splice(cNumber + 1, this.columns.length);
+ this.columns.pop();
+ this.columns = this.columns.concat(chunk);
+
+ for (var i = 0; i < this.rows.length; i++) {
+ var tempR = this.rows[i].arr;
+ var chip = tempR.splice(cNumber + 1, tempR.length);
+ tempR.pop();
+ this.rows[i].arr = tempR.concat(chip);
+ delete this.rows[i].obj[cString];
+ }
+ };
+
+ /**
+ * Stores a value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method set
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {String|Number} value value to assign
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.set(0, 'species', 'Canis Lupus');
+ * table.set(0, 'name', 'Wolf');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.set = function(row, column, value) {
+ this.rows[row].set(column, value);
+ };
+
+ /**
+ * Stores a Float value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method setNum
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {Number} value value to assign
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.setNum(1, 'id', 1);
+ *
+ * print(table.getColumn(0));
+ * //["0", 1, "2"]
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ */
+ _main.default.Table.prototype.setNum = function(row, column, value) {
+ this.rows[row].setNum(column, value);
+ };
+
+ /**
+ * Stores a String value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method setString
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {String} value value to assign
+ * @example
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * print(table.getArray());
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ */
+ _main.default.Table.prototype.setString = function(row, column, value) {
+ this.rows[row].setString(column, value);
+ };
+
+ /**
+ * Retrieves a value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @method get
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String|Number}
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.get(0, 1));
+ * //Capra hircus
+ * print(table.get(0, 'species'));
+ * //Capra hircus
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.get = function(row, column) {
+ return this.rows[row].get(column);
+ };
+
+ /**
+ * Retrieves a Float value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @method getNum
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {Number}
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.getNum(1, 0) + 100);
+ * //id 1 + 100 = 101
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.getNum = function(row, column) {
+ return this.rows[row].getNum(column);
+ };
+
+ /**
+ * Retrieves a String value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @method getString
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String}
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.getString(0, 0)); // 0
+ * print(table.getString(0, 1)); // Capra hircus
+ * print(table.getString(0, 2)); // Goat
+ * print(table.getString(1, 0)); // 1
+ * print(table.getString(1, 1)); // Panthera pardus
+ * print(table.getString(1, 2)); // Leopard
+ * print(table.getString(2, 0)); // 2
+ * print(table.getString(2, 1)); // Equus zebra
+ * print(table.getString(2, 2)); // Zebra
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+
+ _main.default.Table.prototype.getString = function(row, column) {
+ return this.rows[row].getString(column);
+ };
+
+ /**
+ * Retrieves all table data and returns as an object. If a column name is
+ * passed in, each row object will be stored with that attribute as its
+ * title.
+ *
+ * @method getObject
+ * @param {String} [headerColumn] Name of the column which should be used to
+ * title each row object (optional)
+ * @return {Object}
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableObject = table.getObject();
+ *
+ * print(tableObject);
+ * //outputs an object
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.getObject = function(headerColumn) {
+ var tableObject = {};
+ var obj, cPos, index;
+
+ for (var i = 0; i < this.rows.length; i++) {
+ obj = this.rows[i].obj;
+
+ if (typeof headerColumn === 'string') {
+ cPos = this.columns.indexOf(headerColumn); // index of columnID
+ if (cPos >= 0) {
+ index = obj[headerColumn];
+ tableObject[index] = obj;
+ } else {
+ throw new Error(
+ 'This table has no column named "'.concat(headerColumn, '"')
+ );
+ }
+ } else {
+ tableObject[i] = this.rows[i].obj;
+ }
+ }
+ return tableObject;
+ };
+
+ /**
+ * Retrieves all table data and returns it as a multidimensional array.
+ *
+ * @method getArray
+ * @return {Array}
+ *
+ * @example
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leoperd
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableArray = table.getArray();
+ * for (let i = 0; i < tableArray.length; i++) {
+ * print(tableArray[i]);
+ * }
+ * }
+ *
+ *
+ *
+ *@alt
+ * no image displayed
+ *
+ */
+ _main.default.Table.prototype.getArray = function() {
+ var tableArray = [];
+ for (var i = 0; i < this.rows.length; i++) {
+ tableArray.push(this.rows[i].arr);
+ }
+ return tableArray;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 55: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module IO
+ * @submodule Table
+ * @requires core
+ */ /**
+ * A TableRow object represents a single row of data values,
+ * stored in columns, from a table.
+ *
+ * A Table Row contains both an ordered array, and an unordered
+ * JSON object.
+ *
+ * @class p5.TableRow
+ * @constructor
+ * @param {String} [str] optional: populate the row with a
+ * string of values, separated by the
+ * separator
+ * @param {String} [separator] comma separated values (csv) by default
+ */ _main.default.TableRow = function(str, separator) {
+ var arr = [];
+ var obj = {};
+ if (str) {
+ separator = separator || ',';
+ arr = str.split(separator);
+ }
+ for (var i = 0; i < arr.length; i++) {
+ var key = i;
+ var val = arr[i];
+ obj[key] = val;
+ }
+ this.arr = arr;
+ this.obj = obj;
+ this.table = null;
+ };
+
+ /**
+ * Stores a value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method set
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {String|Number} value The value to be stored
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * print(table.getArray());
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ */
+ _main.default.TableRow.prototype.set = function(column, value) {
+ // if typeof column is string, use .obj
+ if (typeof column === 'string') {
+ var cPos = this.table.columns.indexOf(column); // index of columnID
+ if (cPos >= 0) {
+ this.obj[column] = value;
+ this.arr[cPos] = value;
+ } else {
+ throw new Error('This table has no column named "'.concat(column, '"'));
+ }
+ } else {
+ // if typeof column is number, use .arr
+ if (column < this.table.columns.length) {
+ this.arr[column] = value;
+ var cTitle = this.table.columns[column];
+ this.obj[cTitle] = value;
+ } else {
+ throw new Error(
+ 'Column #'.concat(column, ' is out of the range of this table')
+ );
+ }
+ }
+ };
+
+ /**
+ * Stores a Float value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method setNum
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {Number|String} value The value to be stored
+ * as a Float
+ * @example
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].setNum('id', r + 10);
+ * }
+ *
+ * print(table.getArray());
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ */
+ _main.default.TableRow.prototype.setNum = function(column, value) {
+ var floatVal = parseFloat(value);
+ this.set(column, floatVal);
+ };
+
+ /**
+ * Stores a String value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method setString
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {String|Number|Boolean|Object} value The value to be stored
+ * as a String
+ * @example
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * let name = rows[r].getString('name');
+ * rows[r].setString('name', 'A ' + name + ' named George');
+ * }
+ *
+ * print(table.getArray());
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ */
+ _main.default.TableRow.prototype.setString = function(column, value) {
+ var stringVal = value.toString();
+ this.set(column, stringVal);
+ };
+
+ /**
+ * Retrieves a value from the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method get
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String|Number}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let names = [];
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * names.push(rows[r].get('name'));
+ * }
+ *
+ * print(names);
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ */
+ _main.default.TableRow.prototype.get = function(column) {
+ if (typeof column === 'string') {
+ return this.obj[column];
+ } else {
+ return this.arr[column];
+ }
+ };
+
+ /**
+ * Retrieves a Float value from the TableRow's specified
+ * column. The column may be specified by either its ID or
+ * title.
+ *
+ * @method getNum
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {Number} Float Floating point number
+ * @example
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let minId = Infinity;
+ * let maxId = -Infinity;
+ * for (let r = 0; r < rows.length; r++) {
+ * let id = rows[r].getNum('id');
+ * minId = min(minId, id);
+ * maxId = min(maxId, id);
+ * }
+ * print('minimum id = ' + minId + ', maximum id = ' + maxId);
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ */
+ _main.default.TableRow.prototype.getNum = function(column) {
+ var ret;
+ if (typeof column === 'string') {
+ ret = parseFloat(this.obj[column]);
+ } else {
+ ret = parseFloat(this.arr[column]);
+ }
+
+ if (ret.toString() === 'NaN') {
+ throw 'Error: '.concat(this.obj[column], ' is NaN (Not a Number)');
+ }
+ return ret;
+ };
+
+ /**
+ * Retrieves an String value from the TableRow's specified
+ * column. The column may be specified by either its ID or
+ * title.
+ *
+ * @method getString
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String} String
+ * @example
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let longest = '';
+ * for (let r = 0; r < rows.length; r++) {
+ * let species = rows[r].getString('species');
+ * if (longest.length < species.length) {
+ * longest = species;
+ * }
+ * }
+ *
+ * print('longest: ' + longest);
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ */
+ _main.default.TableRow.prototype.getString = function(column) {
+ if (typeof column === 'string') {
+ return this.obj[column].toString();
+ } else {
+ return this.arr[column].toString();
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 56: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module IO
+ * @submodule Input
+ * @requires core
+ */ /**
+ * XML is a representation of an XML object, able to parse XML code. Use
+ * loadXML() to load external XML files and create XML objects.
+ *
+ * @class p5.XML
+ * @constructor
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < children.length; i++) {
+ * let id = children[i].getNum('id');
+ * let coloring = children[i].getString('species');
+ * let name = children[i].getContent();
+ * print(id + ', ' + coloring + ', ' + name);
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // 0, Capra hircus, Goat
+ * // 1, Panthera pardus, Leopard
+ * // 2, Equus zebra, Zebra
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */ _main.default.XML = function(DOM) {
+ if (!DOM) {
+ var xmlDoc = document.implementation.createDocument(null, 'doc');
+ this.DOM = xmlDoc.createElement('root');
+ } else {
+ this.DOM = DOM;
+ }
+ };
+
+ /**
+ * Gets a copy of the element's parent. Returns the parent as another
+ * p5.XML object.
+ *
+ * @method getParent
+ * @return {p5.XML} element parent
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ * let parent = children[1].getParent();
+ * print(parent.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ *
+ */
+ _main.default.XML.prototype.getParent = function() {
+ return new _main.default.XML(this.DOM.parentElement);
+ };
+
+ /**
+ * Gets the element's full name, which is returned as a String.
+ *
+ * @method getName
+ * @return {String} the name of the node
+ * @example<animal
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ *
+ */
+ _main.default.XML.prototype.getName = function() {
+ return this.DOM.tagName;
+ };
+
+ /**
+ * Sets the element's name, which is specified as a String.
+ *
+ * @method setName
+ * @param {String} the new name of the node
+ * @example<animal
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.getName());
+ * xml.setName('fish');
+ * print(xml.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ * // fish
+ *
+ */
+ _main.default.XML.prototype.setName = function(name) {
+ var content = this.DOM.innerHTML;
+ var attributes = this.DOM.attributes;
+ var xmlDoc = document.implementation.createDocument(null, 'default');
+ var newDOM = xmlDoc.createElement(name);
+ newDOM.innerHTML = content;
+ for (var i = 0; i < attributes.length; i++) {
+ newDOM.setAttribute(attributes[i].nodeName, attributes.nodeValue);
+ }
+ this.DOM = newDOM;
+ };
+
+ /**
+ * Checks whether or not the element has any children, and returns the result
+ * as a boolean.
+ *
+ * @method hasChildren
+ * @return {boolean}
+ * @example<animal
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.hasChildren());
+ * }
+ *
+ * // Sketch prints:
+ * // true
+ *
+ */
+ _main.default.XML.prototype.hasChildren = function() {
+ return this.DOM.children.length > 0;
+ };
+
+ /**
+ * Get the names of all of the element's children, and returns the names as an
+ * array of Strings. This is the same as looping through and calling getName()
+ * on each child element individually.
+ *
+ * @method listChildren
+ * @return {String[]} names of the children of the element
+ * @example<animal
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.listChildren());
+ * }
+ *
+ * // Sketch prints:
+ * // ["animal", "animal", "animal"]
+ *
+ */
+ _main.default.XML.prototype.listChildren = function() {
+ var arr = [];
+ for (var i = 0; i < this.DOM.childNodes.length; i++) {
+ arr.push(this.DOM.childNodes[i].nodeName);
+ }
+ return arr;
+ };
+
+ /**
+ * Returns all of the element's children as an array of p5.XML objects. When
+ * the name parameter is specified, then it will return all children that match
+ * that name.
+ *
+ * @method getChildren
+ * @param {String} [name] element name
+ * @return {p5.XML[]} children of the element
+ * @example<animal
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let animals = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < animals.length; i++) {
+ * print(animals[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Leopard"
+ * // "Zebra"
+ *
+ */
+ _main.default.XML.prototype.getChildren = function(param) {
+ if (param) {
+ return elementsToP5XML(this.DOM.getElementsByTagName(param));
+ } else {
+ return elementsToP5XML(this.DOM.children);
+ }
+ };
+
+ function elementsToP5XML(elements) {
+ var arr = [];
+ for (var i = 0; i < elements.length; i++) {
+ arr.push(new _main.default.XML(elements[i]));
+ }
+ return arr;
+ }
+
+ /**
+ * Returns the first of the element's children that matches the name parameter
+ * or the child of the given index.It returns undefined if no matching
+ * child is found.
+ *
+ * @method getChild
+ * @param {String|Integer} name element name or index
+ * @return {p5.XML}
+ * @example<animal
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ *
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let secondChild = xml.getChild(1);
+ * print(secondChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Leopard"
+ *
+ */
+ _main.default.XML.prototype.getChild = function(param) {
+ if (typeof param === 'string') {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = this.DOM.children[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var child = _step.value;
+ if (child.tagName === param) return new _main.default.XML(child);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ } else {
+ return new _main.default.XML(this.DOM.children[param]);
+ }
+ };
+
+ /**
+ * Appends a new child to the element. The child can be specified with
+ * either a String, which will be used as the new tag's name, or as a
+ * reference to an existing p5.XML object.
+ * A reference to the newly created child is returned as an p5.XML object.
+ *
+ * @method addChild
+ * @param {p5.XML} node a p5.XML Object which will be the child to be added
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let child = new p5.XML();
+ * child.setName('animal');
+ * child.setAttribute('id', '3');
+ * child.setAttribute('species', 'Ornithorhynchus anatinus');
+ * child.setContent('Platypus');
+ * xml.addChild(child);
+ *
+ * let animals = xml.getChildren('animal');
+ * print(animals[animals.length - 1].getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Leopard"
+ * // "Zebra"
+ *
+ */
+ _main.default.XML.prototype.addChild = function(node) {
+ if (node instanceof _main.default.XML) {
+ this.DOM.appendChild(node.DOM);
+ } else {
+ // PEND
+ }
+ };
+
+ /**
+ * Removes the element specified by name or index.
+ *
+ * @method removeChild
+ * @param {String|Integer} name element name or index
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * xml.removeChild('animal');
+ * let children = xml.getChildren();
+ * for (let i = 0; i < children.length; i++) {
+ * print(children[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Leopard"
+ * // "Zebra"
+ *
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * xml.removeChild(1);
+ * let children = xml.getChildren();
+ * for (let i = 0; i < children.length; i++) {
+ * print(children[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Zebra"
+ *
+ */
+ _main.default.XML.prototype.removeChild = function(param) {
+ var ind = -1;
+ if (typeof param === 'string') {
+ for (var i = 0; i < this.DOM.children.length; i++) {
+ if (this.DOM.children[i].tagName === param) {
+ ind = i;
+ break;
+ }
+ }
+ } else {
+ ind = param;
+ }
+ if (ind !== -1) {
+ this.DOM.removeChild(this.DOM.children[ind]);
+ }
+ };
+
+ /**
+ * Counts the specified element's number of attributes, returned as an Number.
+ *
+ * @method getAttributeCount
+ * @return {Integer}
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getAttributeCount());
+ * }
+ *
+ * // Sketch prints:
+ * // 2
+ *
+ */
+ _main.default.XML.prototype.getAttributeCount = function() {
+ return this.DOM.attributes.length;
+ };
+
+ /**
+ * Gets all of the specified element's attributes, and returns them as an
+ * array of Strings.
+ *
+ * @method listAttributes
+ * @return {String[]} an array of strings containing the names of attributes
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.listAttributes());
+ * }
+ *
+ * // Sketch prints:
+ * // ["id", "species"]
+ *
+ */
+ _main.default.XML.prototype.listAttributes = function() {
+ var arr = [];
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (
+ var _iterator2 = this.DOM.attributes[Symbol.iterator](), _step2;
+ !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done);
+ _iteratorNormalCompletion2 = true
+ ) {
+ var attribute = _step2.value;
+ arr.push(attribute.nodeName);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+
+ return arr;
+ };
+
+ /**
+ * Checks whether or not an element has the specified attribute.
+ *
+ * @method hasAttribute
+ * @param {String} the attribute to be checked
+ * @return {boolean} true if attribute found else false
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.hasAttribute('species'));
+ * print(firstChild.hasAttribute('color'));
+ * }
+ *
+ * // Sketch prints:
+ * // true
+ * // false
+ *
+ */
+ _main.default.XML.prototype.hasAttribute = function(name) {
+ var obj = {};
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (
+ var _iterator3 = this.DOM.attributes[Symbol.iterator](), _step3;
+ !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done);
+ _iteratorNormalCompletion3 = true
+ ) {
+ var attribute = _step3.value;
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+
+ return obj[name] ? true : false;
+ };
+
+ /**
+ * Returns an attribute value of the element as an Number. If the defaultValue
+ * parameter is specified and the attribute doesn't exist, then defaultValue
+ * is returned. If no defaultValue is specified and the attribute doesn't
+ * exist, the value 0 is returned.
+ *
+ * @method getNum
+ * @param {String} name the non-null full name of the attribute
+ * @param {Number} [defaultValue] the default value of the attribute
+ * @return {Number}
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getNum('id'));
+ * }
+ *
+ * // Sketch prints:
+ * // 0
+ *
+ */
+ _main.default.XML.prototype.getNum = function(name, defaultValue) {
+ var obj = {};
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ for (
+ var _iterator4 = this.DOM.attributes[Symbol.iterator](), _step4;
+ !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done);
+ _iteratorNormalCompletion4 = true
+ ) {
+ var attribute = _step4.value;
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+
+ return Number(obj[name]) || defaultValue || 0;
+ };
+
+ /**
+ * Returns an attribute value of the element as an String. If the defaultValue
+ * parameter is specified and the attribute doesn't exist, then defaultValue
+ * is returned. If no defaultValue is specified and the attribute doesn't
+ * exist, null is returned.
+ *
+ * @method getString
+ * @param {String} name the non-null full name of the attribute
+ * @param {Number} [defaultValue] the default value of the attribute
+ * @return {String}
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getString('species'));
+ * }
+ *
+ * // Sketch prints:
+ * // "Capra hircus"
+ *
+ */
+ _main.default.XML.prototype.getString = function(name, defaultValue) {
+ var obj = {};
+ var _iteratorNormalCompletion5 = true;
+ var _didIteratorError5 = false;
+ var _iteratorError5 = undefined;
+ try {
+ for (
+ var _iterator5 = this.DOM.attributes[Symbol.iterator](), _step5;
+ !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done);
+ _iteratorNormalCompletion5 = true
+ ) {
+ var attribute = _step5.value;
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
+ } catch (err) {
+ _didIteratorError5 = true;
+ _iteratorError5 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion5 && _iterator5.return != null) {
+ _iterator5.return();
+ }
+ } finally {
+ if (_didIteratorError5) {
+ throw _iteratorError5;
+ }
+ }
+ }
+
+ return obj[name] ? String(obj[name]) : defaultValue || null;
+ };
+
+ /**
+ * Sets the content of an element's attribute. The first parameter specifies
+ * the attribute name, while the second specifies the new content.
+ *
+ * @method setAttribute
+ * @param {String} name the full name of the attribute
+ * @param {Number|String|Boolean} value the value of the attribute
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getString('species'));
+ * firstChild.setAttribute('species', 'Jamides zebra');
+ * print(firstChild.getString('species'));
+ * }
+ *
+ * // Sketch prints:
+ * // "Capra hircus"
+ * // "Jamides zebra"
+ *
+ */
+ _main.default.XML.prototype.setAttribute = function(name, value) {
+ this.DOM.setAttribute(name, value);
+ };
+
+ /**
+ * Returns the content of an element. If there is no such content,
+ * defaultValue is returned if specified, otherwise null is returned.
+ *
+ * @method getContent
+ * @param {String} [defaultValue] value returned if no content is found
+ * @return {String}
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ *
+ */
+ _main.default.XML.prototype.getContent = function(defaultValue) {
+ var str;
+ str = this.DOM.textContent;
+ str = str.replace(/\s\s+/g, ',');
+ return str || defaultValue || null;
+ };
+
+ /**
+ * Sets the element's content.
+ *
+ * @method setContent
+ * @param {String} text the new content
+ * @example
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * firstChild.setContent('Mountain Goat');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Mountain Goat"
+ *
+ */
+ _main.default.XML.prototype.setContent = function(content) {
+ if (!this.DOM.children.length) {
+ this.DOM.textContent = content;
+ }
+ };
+
+ /**
+ * Serializes the element into a string. This function is useful for preparing
+ * the content to be sent over a http request or saved to file.
+ *
+ * @method serialize
+ * @return {String} Serialized string of the element
+ * @example
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.serialize());
+ * }
+ *
+ * // Sketch prints:
+ * //
+ * // Goat
+ * // Leopard
+ * // Zebra
+ * //
+ *
+ */
+ _main.default.XML.prototype.serialize = function() {
+ var xmlSerializer = new XMLSerializer();
+ return xmlSerializer.serializeToString(this.DOM);
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 57: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Math
+ * @submodule Calculation
+ * @for p5
+ * @requires core
+ */ /**
+ * Calculates the absolute value (magnitude) of a number. Maps to Math.abs().
+ * The absolute value of a number is always positive.
+ *
+ * @method abs
+ * @param {Number} n number to compute
+ * @return {Number} absolute value of given number
+ * @example
+ *
+ * function setup() {
+ * let x = -3;
+ * let y = abs(x);
+ *
+ * print(x); // -3
+ * print(y); // 3
+ * }
+ *
+ *
+ * @alt
+ * no image displayed
+ *
+ */ _main.default.prototype.abs = Math.abs; /**
+ * Calculates the closest int value that is greater than or equal to the
+ * value of the parameter. Maps to Math.ceil(). For example, ceil(9.03)
+ * returns the value 10.
+ *
+ * @method ceil
+ * @param {Number} n number to round up
+ * @return {Integer} rounded up number
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * // map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * //Get the ceiling of the mapped number.
+ * let bx = ceil(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ *
+ * @alt
+ * 2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals
+ *
+ */
+ _main.default.prototype.ceil = Math.ceil;
+
+ /**
+ * Constrains a value between a minimum and maximum value.
+ *
+ * @method constrain
+ * @param {Number} n number to constrain
+ * @param {Number} low minimum limit
+ * @param {Number} high maximum limit
+ * @return {Number} constrained number
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let leftWall = 25;
+ * let rightWall = 75;
+ *
+ * // xm is just the mouseX, while
+ * // xc is the mouseX, but constrained
+ * // between the leftWall and rightWall!
+ * let xm = mouseX;
+ * let xc = constrain(mouseX, leftWall, rightWall);
+ *
+ * // Draw the walls.
+ * stroke(150);
+ * line(leftWall, 0, leftWall, height);
+ * line(rightWall, 0, rightWall, height);
+ *
+ * // Draw xm and xc as circles.
+ * noStroke();
+ * fill(150);
+ * ellipse(xm, 33, 9, 9); // Not Constrained
+ * fill(0);
+ * ellipse(xc, 66, 9, 9); // Constrained
+ * }
+ *
+ *
+ * @alt
+ * 2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines
+ *
+ */
+ _main.default.prototype.constrain = function(n, low, high) {
+ _main.default._validateParameters('constrain', arguments);
+ return Math.max(Math.min(n, high), low);
+ };
+
+ /**
+ * Calculates the distance between two points, in either two or three dimensions.
+ *
+ * @method dist
+ * @param {Number} x1 x-coordinate of the first point
+ * @param {Number} y1 y-coordinate of the first point
+ * @param {Number} x2 x-coordinate of the second point
+ * @param {Number} y2 y-coordinate of the second point
+ * @return {Number} distance between the two points
+ *
+ * @example
+ *
+ * // Move your mouse inside the canvas to see the
+ * // change in distance between two points!
+ * function draw() {
+ * background(200);
+ * fill(0);
+ *
+ * let x1 = 10;
+ * let y1 = 90;
+ * let x2 = mouseX;
+ * let y2 = mouseY;
+ *
+ * line(x1, y1, x2, y2);
+ * ellipse(x1, y1, 7, 7);
+ * ellipse(x2, y2, 7, 7);
+ *
+ * // d is the length of the line
+ * // the distance from point 1 to point 2.
+ * let d = int(dist(x1, y1, x2, y2));
+ *
+ * // Let's write d along the line we are drawing!
+ * push();
+ * translate((x1 + x2) / 2, (y1 + y2) / 2);
+ * rotate(atan2(y2 - y1, x2 - x1));
+ * text(nfc(d, 1), 0, -5);
+ * pop();
+ * // Fancy!
+ * }
+ *
+ *
+ * @alt
+ * 2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.
+ */
+ /**
+ * @method dist
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate of the first point
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate of the second point
+ * @return {Number} distance between the two points
+ */
+ _main.default.prototype.dist = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('dist', args);
+ if (args.length === 4) {
+ //2D
+ return hypot(args[2] - args[0], args[3] - args[1]);
+ } else if (args.length === 6) {
+ //3D
+ return hypot(args[3] - args[0], args[4] - args[1], args[5] - args[2]);
+ }
+ };
+
+ /**
+ * Returns Euler's number e (2.71828...) raised to the power of the n
+ * parameter. Maps to Math.exp().
+ *
+ * @method exp
+ * @param {Number} n exponent to raise
+ * @return {Number} e^n
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Compute the exp() function with a value between 0 and 2
+ * let xValue = map(mouseX, 0, width, 0, 2);
+ * let yValue = exp(xValue);
+ *
+ * let y = map(yValue, 0, 8, height, 0);
+ *
+ * let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
+ * stroke(150);
+ * line(mouseX, y, mouseX, height);
+ * fill(0);
+ * text(legend, 5, 15);
+ * noStroke();
+ * ellipse(mouseX, y, 7, 7);
+ *
+ * // Draw the exp(x) curve,
+ * // over the domain of x from 0 to 2
+ * noFill();
+ * stroke(0);
+ * beginShape();
+ * for (let x = 0; x < width; x++) {
+ * xValue = map(x, 0, width, 0, 2);
+ * yValue = exp(xValue);
+ * y = map(yValue, 0, 8, height, 0);
+ * vertex(x, y);
+ * }
+ *
+ * endShape();
+ * line(0, 0, 0, height);
+ * line(0, height - 1, width, height - 1);
+ * }
+ *
+ *
+ * @alt
+ * ellipse moves along a curve with mouse x. e^n displayed.
+ *
+ */
+ _main.default.prototype.exp = Math.exp;
+
+ /**
+ * Calculates the closest int value that is less than or equal to the
+ * value of the parameter. Maps to Math.floor().
+ *
+ * @method floor
+ * @param {Number} n number to round down
+ * @return {Integer} rounded down number
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * //map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * //Get the floor of the mapped number.
+ * let bx = floor(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ *
+ * @alt
+ * 2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals
+ *
+ */
+ _main.default.prototype.floor = Math.floor;
+
+ /**
+ * Calculates a number between two numbers at a specific increment. The amt
+ * parameter is the amount to interpolate between the two values where 0.0
+ * equal to the first point, 0.1 is very near the first point, 0.5 is
+ * half-way in between, and 1.0 is equal to the second point. If the
+ * value of amt is more than 1.0 or less than 0.0, the number will be
+ * calculated accordingly in the ratio of the two given numbers. The lerp
+ * function is convenient for creating motion along a straight
+ * path and for drawing dotted lines.
+ *
+ * @method lerp
+ * @param {Number} start first value
+ * @param {Number} stop second value
+ * @param {Number} amt number
+ * @return {Number} lerped value
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ * let a = 20;
+ * let b = 80;
+ * let c = lerp(a, b, 0.2);
+ * let d = lerp(a, b, 0.5);
+ * let e = lerp(a, b, 0.8);
+ *
+ * let y = 50;
+ *
+ * strokeWeight(5);
+ * stroke(0); // Draw the original points in black
+ * point(a, y);
+ * point(b, y);
+ *
+ * stroke(100); // Draw the lerp points in gray
+ * point(c, y);
+ * point(d, y);
+ * point(e, y);
+ * }
+ *
+ *
+ * @alt
+ * 5 points horizontally staggered mid-canvas. mid 3 are grey, outer black
+ *
+ */
+ _main.default.prototype.lerp = function(start, stop, amt) {
+ _main.default._validateParameters('lerp', arguments);
+ return amt * (stop - start) + start;
+ };
+
+ /**
+ * Calculates the natural logarithm (the base-e logarithm) of a number. This
+ * function expects the n parameter to be a value greater than 0.0. Maps to
+ * Math.log().
+ *
+ * @method log
+ * @param {Number} n number greater than 0
+ * @return {Number} natural logarithm of n
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * let maxX = 2.8;
+ * let maxY = 1.5;
+ *
+ * // Compute the natural log of a value between 0 and maxX
+ * let xValue = map(mouseX, 0, width, 0, maxX);
+ * let yValue, y;
+ * if (xValue > 0) {
+ // Cannot take the log of a negative number.
+ * yValue = log(xValue);
+ * y = map(yValue, -maxY, maxY, height, 0);
+ *
+ * // Display the calculation occurring.
+ * let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
+ * stroke(150);
+ * line(mouseX, y, mouseX, height);
+ * fill(0);
+ * text(legend, 5, 15);
+ * noStroke();
+ * ellipse(mouseX, y, 7, 7);
+ * }
+ *
+ * // Draw the log(x) curve,
+ * // over the domain of x from 0 to maxX
+ * noFill();
+ * stroke(0);
+ * beginShape();
+ * for (let x = 0; x < width; x++) {
+ * xValue = map(x, 0, width, 0, maxX);
+ * yValue = log(xValue);
+ * y = map(yValue, -maxY, maxY, height, 0);
+ * vertex(x, y);
+ * }
+ * endShape();
+ * line(0, 0, 0, height);
+ * line(0, height / 2, width, height / 2);
+ * }
+ *
+ *
+ * @alt
+ * ellipse moves along a curve with mouse x. natural logarithm of n displayed.
+ *
+ */
+ _main.default.prototype.log = Math.log;
+
+ /**
+ * Calculates the magnitude (or length) of a vector. A vector is a direction
+ * in space commonly used in computer graphics and linear algebra. Because it
+ * has no "start" position, the magnitude of a vector can be thought of as
+ * the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is
+ * a shortcut for writing dist(0, 0, x, y).
+ *
+ * @method mag
+ * @param {Number} a first value
+ * @param {Number} b second value
+ * @return {Number} magnitude of vector from (0,0) to (a,b)
+ * @example
+ *
+ * function setup() {
+ * let x1 = 20;
+ * let x2 = 80;
+ * let y1 = 30;
+ * let y2 = 70;
+ *
+ * line(0, 0, x1, y1);
+ * print(mag(x1, y1)); // Prints "36.05551275463989"
+ * line(0, 0, x2, y1);
+ * print(mag(x2, y1)); // Prints "85.44003745317531"
+ * line(0, 0, x1, y2);
+ * print(mag(x1, y2)); // Prints "72.80109889280519"
+ * line(0, 0, x2, y2);
+ * print(mag(x2, y2)); // Prints "106.3014581273465"
+ * }
+ *
+ *
+ * @alt
+ * 4 lines of different length radiate from top left of canvas.
+ *
+ */
+ _main.default.prototype.mag = function(x, y) {
+ _main.default._validateParameters('mag', arguments);
+ return hypot(x, y);
+ };
+
+ /**
+ * Re-maps a number from one range to another.
+ *
+ * In the first example above, the number 25 is converted from a value in the
+ * range of 0 to 100 into a value that ranges from the left edge of the
+ * window (0) to the right edge (width).
+ *
+ * @method map
+ * @param {Number} value the incoming value to be converted
+ * @param {Number} start1 lower bound of the value's current range
+ * @param {Number} stop1 upper bound of the value's current range
+ * @param {Number} start2 lower bound of the value's target range
+ * @param {Number} stop2 upper bound of the value's target range
+ * @param {Boolean} [withinBounds] constrain the value to the newly mapped range
+ * @return {Number} remapped number
+ * @example
+ *
+ * let value = 25;
+ * let m = map(value, 0, 100, 0, width);
+ * ellipse(m, 50, 10, 10);
+
+ *
+ *
+ * function setup() {
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * let x1 = map(mouseX, 0, width, 25, 75);
+ * ellipse(x1, 25, 25, 25);
+ * //This ellipse is constrained to the 0-100 range
+ * //after setting withinBounds to true
+ * let x2 = map(mouseX, 0, width, 0, 100, true);
+ * ellipse(x2, 75, 25, 25);
+ * }
+
+ *
+ * @alt
+ * 10 by 10 white ellipse with in mid left canvas
+ * 2 25 by 25 white ellipses move with mouse x. Bottom has more range from X
+ *
+ */
+ _main.default.prototype.map = function(
+ n,
+ start1,
+ stop1,
+ start2,
+ stop2,
+ withinBounds
+ ) {
+ _main.default._validateParameters('map', arguments);
+ var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+ if (!withinBounds) {
+ return newval;
+ }
+ if (start2 < stop2) {
+ return this.constrain(newval, start2, stop2);
+ } else {
+ return this.constrain(newval, stop2, start2);
+ }
+ };
+
+ /**
+ * Determines the largest value in a sequence of numbers, and then returns
+ * that value. max() accepts any number of Number parameters, or an Array
+ * of any length.
+ *
+ * @method max
+ * @param {Number} n0 Number to compare
+ * @param {Number} n1 Number to compare
+ * @return {Number} maximum Number
+ * @example
+ *
+ * function setup() {
+ * // Change the elements in the array and run the sketch
+ * // to show how max() works!
+ * let numArray = [2, 1, 5, 4, 8, 9];
+ * fill(0);
+ * noStroke();
+ * text('Array Elements', 0, 10);
+ * // Draw all numbers in the array
+ * let spacing = 15;
+ * let elemsY = 25;
+ * for (let i = 0; i < numArray.length; i++) {
+ * text(numArray[i], i * spacing, elemsY);
+ * }
+ * let maxX = 33;
+ * let maxY = 80;
+ * // Draw the Maximum value in the array.
+ * textSize(32);
+ * text(max(numArray), maxX, maxY);
+ * }
+ *
+ *
+ * @alt
+ * Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9
+ *
+ */
+ /**
+ * @method max
+ * @param {Number[]} nums Numbers to compare
+ * @return {Number}
+ */
+ _main.default.prototype.max = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('max', args);
+ if (args[0] instanceof Array) {
+ return Math.max.apply(null, args[0]);
+ } else {
+ return Math.max.apply(null, args);
+ }
+ };
+
+ /**
+ * Determines the smallest value in a sequence of numbers, and then returns
+ * that value. min() accepts any number of Number parameters, or an Array
+ * of any length.
+ *
+ * @method min
+ * @param {Number} n0 Number to compare
+ * @param {Number} n1 Number to compare
+ * @return {Number} minimum Number
+ * @example
+ *
+ * function setup() {
+ * // Change the elements in the array and run the sketch
+ * // to show how min() works!
+ * let numArray = [2, 1, 5, 4, 8, 9];
+ * fill(0);
+ * noStroke();
+ * text('Array Elements', 0, 10);
+ * // Draw all numbers in the array
+ * let spacing = 15;
+ * let elemsY = 25;
+ * for (let i = 0; i < numArray.length; i++) {
+ * text(numArray[i], i * spacing, elemsY);
+ * }
+ * let maxX = 33;
+ * let maxY = 80;
+ * // Draw the Minimum value in the array.
+ * textSize(32);
+ * text(min(numArray), maxX, maxY);
+ * }
+ *
+ *
+ * @alt
+ * Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1
+ *
+ */
+ /**
+ * @method min
+ * @param {Number[]} nums Numbers to compare
+ * @return {Number}
+ */
+ _main.default.prototype.min = function() {
+ for (
+ var _len3 = arguments.length, args = new Array(_len3), _key3 = 0;
+ _key3 < _len3;
+ _key3++
+ ) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('min', args);
+ if (args[0] instanceof Array) {
+ return Math.min.apply(null, args[0]);
+ } else {
+ return Math.min.apply(null, args);
+ }
+ };
+
+ /**
+ * Normalizes a number from another range into a value between 0 and 1.
+ * Identical to map(value, low, high, 0, 1).
+ * Numbers outside of the range are not clamped to 0 and 1, because
+ * out-of-range values are often intentional and useful. (See the example above.)
+ *
+ * @method norm
+ * @param {Number} value incoming value to be normalized
+ * @param {Number} start lower bound of the value's current range
+ * @param {Number} stop upper bound of the value's current range
+ * @return {Number} normalized number
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * let currentNum = mouseX;
+ * let lowerBound = 0;
+ * let upperBound = width; //100;
+ * let normalized = norm(currentNum, lowerBound, upperBound);
+ * let lineY = 70;
+ * stroke(3);
+ * line(0, lineY, width, lineY);
+ * //Draw an ellipse mapped to the non-normalized value.
+ * noStroke();
+ * fill(50);
+ * let s = 7; // ellipse size
+ * ellipse(currentNum, lineY, s, s);
+ *
+ * // Draw the guide
+ * let guideY = lineY + 15;
+ * text('0', 0, guideY);
+ * textAlign(RIGHT);
+ * text('100', width, guideY);
+ *
+ * // Draw the normalized value
+ * textAlign(LEFT);
+ * fill(0);
+ * textSize(32);
+ * let normalY = 40;
+ * let normalX = 20;
+ * text(normalized, normalX, normalY);
+ * }
+ *
+ *
+ * @alt
+ * ellipse moves with mouse. 0 shown left & 100 right and updating values center
+ *
+ */
+ _main.default.prototype.norm = function(n, start, stop) {
+ _main.default._validateParameters('norm', arguments);
+ return this.map(n, start, stop, 0, 1);
+ };
+
+ /**
+ * Facilitates exponential expressions. The pow() function is an efficient
+ * way of multiplying numbers by themselves (or their reciprocals) in large
+ * quantities. For example, pow(3, 5) is equivalent to the expression
+ * 3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 /
+ * 3 × 3 × 3 × 3 × 3. Maps to
+ * Math.pow().
+ *
+ * @method pow
+ * @param {Number} n base of the exponential expression
+ * @param {Number} e power by which to raise the base
+ * @return {Number} n^e
+ * @example
+ *
+ * function setup() {
+ * //Exponentially increase the size of an ellipse.
+ * let eSize = 3; // Original Size
+ * let eLoc = 10; // Original Location
+ *
+ * ellipse(eLoc, eLoc, eSize, eSize);
+ *
+ * ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));
+ *
+ * ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));
+ *
+ * ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
+ * }
+ *
+ *
+ * @alt
+ * small to large ellipses radiating from top left of canvas
+ *
+ */
+ _main.default.prototype.pow = Math.pow;
+
+ /**
+ * Calculates the integer closest to the n parameter. For example,
+ * round(133.8) returns the value 134. Maps to Math.round().
+ *
+ * @method round
+ * @param {Number} n number to round
+ * @return {Integer} rounded number
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * //map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * // Round the mapped number.
+ * let bx = round(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ *
+ * @alt
+ * horizontal center line squared values displayed on top and regular on bottom.
+ *
+ */
+ _main.default.prototype.round = Math.round;
+
+ /**
+ * Squares a number (multiplies a number by itself). The result is always a
+ * positive number, as multiplying two negative numbers always yields a
+ * positive result. For example, -1 * -1 = 1.
+ *
+ * @method sq
+ * @param {Number} n number to square
+ * @return {Number} squared number
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * let eSize = 7;
+ * let x1 = map(mouseX, 0, width, 0, 10);
+ * let y1 = 80;
+ * let x2 = sq(x1);
+ * let y2 = 20;
+ *
+ * // Draw the non-squared.
+ * line(0, y1, width, y1);
+ * ellipse(x1, y1, eSize, eSize);
+ *
+ * // Draw the squared.
+ * line(0, y2, width, y2);
+ * ellipse(x2, y2, eSize, eSize);
+ *
+ * // Draw dividing line.
+ * stroke(100);
+ * line(0, height / 2, width, height / 2);
+ *
+ * // Draw text.
+ * let spacing = 15;
+ * noStroke();
+ * fill(0);
+ * text('x = ' + x1, 0, y1 + spacing);
+ * text('sq(x) = ' + x2, 0, y2 + spacing);
+ * }
+ *
+ *
+ * @alt
+ * horizontal center line squared values displayed on top and regular on bottom.
+ *
+ */
+ _main.default.prototype.sq = function(n) {
+ return n * n;
+ };
+
+ /**
+ * Calculates the square root of a number. The square root of a number is
+ * always positive, even though there may be a valid negative root. The
+ * square root s of number a is such that s*s = a. It is the opposite of
+ * squaring. Maps to Math.sqrt().
+ *
+ * @method sqrt
+ * @param {Number} n non-negative number to square root
+ * @return {Number} square root of number
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * let eSize = 7;
+ * let x1 = mouseX;
+ * let y1 = 80;
+ * let x2 = sqrt(x1);
+ * let y2 = 20;
+ *
+ * // Draw the non-squared.
+ * line(0, y1, width, y1);
+ * ellipse(x1, y1, eSize, eSize);
+ *
+ * // Draw the squared.
+ * line(0, y2, width, y2);
+ * ellipse(x2, y2, eSize, eSize);
+ *
+ * // Draw dividing line.
+ * stroke(100);
+ * line(0, height / 2, width, height / 2);
+ *
+ * // Draw text.
+ * noStroke();
+ * fill(0);
+ * let spacing = 15;
+ * text('x = ' + x1, 0, y1 + spacing);
+ * text('sqrt(x) = ' + x2, 0, y2 + spacing);
+ * }
+ *
+ *
+ * @alt
+ * horizontal center line squareroot values displayed on top and regular on bottom.
+ *
+ */
+ _main.default.prototype.sqrt = Math.sqrt;
+
+ // Calculate the length of the hypotenuse of a right triangle
+ // This won't under- or overflow in intermediate steps
+ // https://en.wikipedia.org/wiki/Hypot
+ function hypot(x, y, z) {
+ // Use the native implementation if it's available
+ if (typeof Math.hypot === 'function') {
+ return Math.hypot.apply(null, arguments);
+ }
+
+ // Otherwise use the V8 implementation
+ // https://github.com/v8/v8/blob/8cd3cf297287e581a49e487067f5cbd991b27123/src/js/math.js#L217
+ var length = arguments.length;
+ var args = [];
+ var max = 0;
+ for (var i = 0; i < length; i++) {
+ var n = arguments[i];
+ n = +n;
+ if (n === Infinity || n === -Infinity) {
+ return Infinity;
+ }
+ n = Math.abs(n);
+ if (n > max) {
+ max = n;
+ }
+ args[i] = n;
+ }
+
+ if (max === 0) {
+ max = 1;
+ }
+ var sum = 0;
+ var compensation = 0;
+ for (var j = 0; j < length; j++) {
+ var m = args[j] / max;
+ var summand = m * m - compensation;
+ var preliminary = sum + summand;
+ compensation = preliminary - sum - summand;
+ sum = preliminary;
+ }
+ return Math.sqrt(sum) * max;
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 58: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Math
+ * @submodule Vector
+ * @for p5
+ * @requires core
+ */ /**
+ * Creates a new p5.Vector (the datatype for storing vectors). This provides a
+ * two or three dimensional vector, specifically a Euclidean (also known as
+ * geometric) vector. A vector is an entity that has both magnitude and
+ * direction.
+ *
+ * @method createVector
+ * @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 {p5.Vector}
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * fill(255, 102, 204);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
+ * scale(0.75);
+ * sphere();
+ * }
+ *
+ *
+ * @alt
+ * a purple sphere lit by a point light oscillating horizontally
+ */ _main.default.prototype.createVector = function(x, y, z) {
+ if (this instanceof _main.default) {
+ return new _main.default.Vector(this, arguments);
+ } else {
+ return new _main.default.Vector(x, y, z);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 59: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } //////////////////////////////////////////////////////////////
+ // http://mrl.nyu.edu/~perlin/noise/
+ // Adapting from PApplet.java
+ // which was adapted from toxi
+ // which was adapted from the german demo group farbrausch
+ // as used in their demo "art": http://www.farb-rausch.de/fr010src.zip
+ // someday we might consider using "improved noise"
+ // http://mrl.nyu.edu/~perlin/paper445.pdf
+ // See: https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/
+ // blob/master/introduction/Noise1D/noise.js
+ /**
+ * @module Math
+ * @submodule Noise
+ * @for p5
+ * @requires core
+ */ var PERLIN_YWRAPB = 4;
+ var PERLIN_YWRAP = 1 << PERLIN_YWRAPB;
+ var PERLIN_ZWRAPB = 8;
+ var PERLIN_ZWRAP = 1 << PERLIN_ZWRAPB;
+ var PERLIN_SIZE = 4095;
+ var perlin_octaves = 4; // default to medium smooth
+ var perlin_amp_falloff = 0.5; // 50% reduction/octave
+ var scaled_cosine = function scaled_cosine(i) {
+ return 0.5 * (1.0 - Math.cos(i * Math.PI));
+ };
+ var perlin; // will be initialized lazily by noise() or noiseSeed()
+ /**
+ * Returns the Perlin noise value at specified coordinates. Perlin noise is
+ * a random sequence generator producing a more natural ordered, harmonic
+ * succession of numbers compared to the standard random() function.
+ * It was invented by Ken Perlin in the 1980s and been used since in
+ * graphical applications to produce procedural textures, natural motion,
+ * shapes, terrains etc.
The main difference to the
+ * random() function is that Perlin noise is defined in an infinite
+ * n-dimensional space where each pair of coordinates corresponds to a
+ * fixed semi-random value (fixed only for the lifespan of the program; see
+ * the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,
+ * depending on the number of coordinates given. The resulting value will
+ * always be between 0.0 and 1.0. The noise value can be animated by moving
+ * through the noise space as demonstrated in the example above. The 2nd
+ * and 3rd dimension can also be interpreted as time.
The actual
+ * noise is structured similar to an audio signal, in respect to the
+ * function's use of frequencies. Similar to the concept of harmonics in
+ * physics, perlin noise is computed over several octaves which are added
+ * together for the final result.
Another way to adjust the
+ * character of the resulting sequence is the scale of the input
+ * coordinates. As the function works within an infinite space the value of
+ * the coordinates doesn't matter as such, only the distance between
+ * successive coordinates does (eg. when using noise() within a
+ * loop). As a general rule the smaller the difference between coordinates,
+ * the smoother the resulting noise sequence will be. Steps of 0.005-0.03
+ * work best for most applications, but this will differ depending on use.
+ *
+ *
+ * @method noise
+ * @param {Number} x x-coordinate in noise space
+ * @param {Number} [y] y-coordinate in noise space
+ * @param {Number} [z] z-coordinate in noise space
+ * @return {Number} Perlin noise value (between 0 and 1) at specified
+ * coordinates
+ * @example
+ *
+ *
+ * let xoff = 0.0;
+ *
+ * function draw() {
+ * background(204);
+ * xoff = xoff + 0.01;
+ * let n = noise(xoff) * width;
+ * line(n, 0, n, height);
+ * }
+ *
+ *
+ *
+ * let noiseScale=0.02;
+ *
+ * function draw() {
+ * background(0);
+ * for (let x=0; x < width; x++) {
+ * let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
+ * stroke(noiseVal*255);
+ * line(x, mouseY+noiseVal*80, x, height);
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * vertical line moves left to right with updating noise values.
+ * horizontal wave pattern effected by mouse x-position & updating noise values.
+ *
+ */ _main.default.prototype.noise = function(x) {
+ var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+ var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+ if (perlin == null) {
+ perlin = new Array(PERLIN_SIZE + 1);
+ for (var i = 0; i < PERLIN_SIZE + 1; i++) {
+ perlin[i] = Math.random();
+ }
+ }
+
+ if (x < 0) {
+ x = -x;
+ }
+ if (y < 0) {
+ y = -y;
+ }
+ if (z < 0) {
+ z = -z;
+ }
+
+ var xi = Math.floor(x),
+ yi = Math.floor(y),
+ zi = Math.floor(z);
+ var xf = x - xi;
+ var yf = y - yi;
+ var zf = z - zi;
+ var rxf, ryf;
+
+ var r = 0;
+ var ampl = 0.5;
+
+ var n1, n2, n3;
+
+ for (var o = 0; o < perlin_octaves; o++) {
+ var of = xi + (yi << PERLIN_YWRAPB) + (zi << PERLIN_ZWRAPB);
+
+ rxf = scaled_cosine(xf);
+ ryf = scaled_cosine(yf);
+
+ n1 = perlin[of & PERLIN_SIZE];
+ n1 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n1);
+ n2 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
+ n2 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n2);
+ n1 += ryf * (n2 - n1);
+
+ of += PERLIN_ZWRAP;
+ n2 = perlin[of & PERLIN_SIZE];
+ n2 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n2);
+ n3 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
+ n3 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n3);
+ n2 += ryf * (n3 - n2);
+
+ n1 += scaled_cosine(zf) * (n2 - n1);
+
+ r += n1 * ampl;
+ ampl *= perlin_amp_falloff;
+ xi <<= 1;
+ xf *= 2;
+ yi <<= 1;
+ yf *= 2;
+ zi <<= 1;
+ zf *= 2;
+
+ if (xf >= 1.0) {
+ xi++;
+ xf--;
+ }
+ if (yf >= 1.0) {
+ yi++;
+ yf--;
+ }
+ if (zf >= 1.0) {
+ zi++;
+ zf--;
+ }
+ }
+ return r;
+ };
+
+ /**
+ *
+ * Adjusts the character and level of detail produced by the Perlin noise
+ * function. Similar to harmonics in physics, noise is computed over
+ * several octaves. Lower octaves contribute more to the output signal and
+ * as such define the overall intensity of the noise, whereas higher octaves
+ * create finer grained details in the noise sequence.
+ *
+ * By default, noise is computed over 4 octaves with each octave contributing
+ * exactly half than its predecessor, starting at 50% strength for the 1st
+ * octave. This falloff amount can be changed by adding an additional function
+ * parameter. Eg. a falloff factor of 0.75 means each octave will now have
+ * 75% impact (25% less) of the previous lower octave. Any value between
+ * 0.0 and 1.0 is valid, however note that values greater than 0.5 might
+ * result in greater than 1.0 values returned by noise().
+ *
+ * By changing these parameters, the signal created by the noise()
+ * function can be adapted to fit very specific needs and characteristics.
+ *
+ * @method noiseDetail
+ * @param {Number} lod number of octaves to be used by the noise
+ * @param {Number} falloff falloff factor for each octave
+ * @example
+ *
+ *
+ * let noiseVal;
+ * let noiseScale = 0.02;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * for (let y = 0; y < height; y++) {
+ * for (let x = 0; x < width / 2; x++) {
+ * noiseDetail(2, 0.2);
+ * noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
+ * stroke(noiseVal * 255);
+ * point(x, y);
+ * noiseDetail(8, 0.65);
+ * noiseVal = noise(
+ * (mouseX + x + width / 2) * noiseScale,
+ * (mouseY + y) * noiseScale
+ * );
+ * stroke(noiseVal * 255);
+ * point(x + width / 2, y);
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * 2 vertical grey smokey patterns affected my mouse x-position and noise.
+ *
+ */
+ _main.default.prototype.noiseDetail = function(lod, falloff) {
+ if (lod > 0) {
+ perlin_octaves = lod;
+ }
+ if (falloff > 0) {
+ perlin_amp_falloff = falloff;
+ }
+ };
+
+ /**
+ * Sets the seed value for noise(). By default, noise()
+ * produces different results each time the program is run. Set the
+ * value parameter to a constant to return the same pseudo-random
+ * numbers each time the software is run.
+ *
+ * @method noiseSeed
+ * @param {Number} seed the seed value
+ * @example
+ *
+ * let xoff = 0.0;
+ *
+ * function setup() {
+ * noiseSeed(99);
+ * stroke(0, 10);
+ * }
+ *
+ * function draw() {
+ * xoff = xoff + .01;
+ * let n = noise(xoff) * width;
+ * line(n, 0, n, height);
+ * }
+ *
+ *
+ *
+ * @alt
+ * vertical grey lines drawing in pattern affected by noise.
+ *
+ */
+ _main.default.prototype.noiseSeed = function(seed) {
+ // Linear Congruential Generator
+ // Variant of a Lehman Generator
+ var lcg = (function() {
+ // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
+ // m is basically chosen to be large (as it is the max period)
+ // and for its relationships to a and c
+ var m = 4294967296;
+ // a - 1 should be divisible by m's prime factors
+ var a = 1664525;
+ // c and m should be co-prime
+ var c = 1013904223;
+ var seed, z;
+ return {
+ setSeed: function setSeed(val) {
+ // pick a random seed if val is undefined or null
+ // the >>> 0 casts the seed to an unsigned 32-bit integer
+ z = seed = (val == null ? Math.random() * m : val) >>> 0;
+ },
+ getSeed: function getSeed() {
+ return seed;
+ },
+ rand: function rand() {
+ // define the recurrence relationship
+ z = (a * z + c) % m;
+ // return a float in [0, 1)
+ // if z = m then z / m = 0 therefore (z % m) / m < 1 always
+ return z / m;
+ }
+ };
+ })();
+
+ lcg.setSeed(seed);
+ perlin = new Array(PERLIN_SIZE + 1);
+ for (var i = 0; i < PERLIN_SIZE + 1; i++) {
+ perlin[i] = lcg.rand();
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 60: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Math
+ * @submodule Vector
+ * @requires constants
+ */ /**
+ * A class to describe a two or three dimensional vector, specifically
+ * a Euclidean (also known as geometric) vector. A vector is an entity
+ * that has both magnitude and direction. The datatype, however, stores
+ * the components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude
+ * and direction can be accessed via the methods mag() and heading().
+ *
+ * In many of the p5.js examples, you will see p5.Vector used to describe a
+ * position, velocity, or acceleration. For example, if you consider a rectangle
+ * moving across the screen, at any given instant it has a position (a vector
+ * that points from the origin to its location), a velocity (the rate at which
+ * the object's position changes per time unit, expressed as a vector), and
+ * acceleration (the rate at which the object's velocity changes per time
+ * unit, expressed as a vector).
+ *
+ * Since vectors represent groupings of values, we cannot simply use
+ * traditional addition/multiplication/etc. Instead, we'll need to do some
+ * "vector" math, which is made easy by the methods inside the p5.Vector class.
+ *
+ * @class p5.Vector
+ * @param {Number} [x] x component of the vector
+ * @param {Number} [y] y component of the vector
+ * @param {Number} [z] z component of the vector
+ * @example
+ *
+ *
+ * let v1 = createVector(40, 50);
+ * let v2 = createVector(40, 50);
+ *
+ * ellipse(v1.x, v1.y, 50, 50);
+ * ellipse(v2.x, v2.y, 50, 50);
+ * v1.add(v2);
+ * ellipse(v1.x, v1.y, 50, 50);
+ *
+ *
+ *
+ * @alt
+ * 2 white ellipses. One center-left the other bottom right and off canvas
+ *
+ */ _main.default.Vector = function Vector() {
+ var x, y, z;
+ // This is how it comes in with createVector()
+ if (arguments[0] instanceof _main.default) {
+ // save reference to p5 if passed in
+ this.p5 = arguments[0];
+ x = arguments[1][0] || 0;
+ y = arguments[1][1] || 0;
+ z = arguments[1][2] || 0;
+ // This is what we'll get with new p5.Vector()
+ } else {
+ x = arguments[0] || 0;
+ y = arguments[1] || 0;
+ z = arguments[2] || 0;
+ }
+ /**
+ * The x component of the vector
+ * @property x {Number}
+ */
+ this.x = x;
+ /**
+ * The y component of the vector
+ * @property y {Number}
+ */
+ this.y = y;
+ /**
+ * The z component of the vector
+ * @property z {Number}
+ */
+ this.z = z;
+ };
+
+ /**
+ * Returns a string representation of a vector v by calling String(v)
+ * or v.toString(). This method is useful for logging vectors in the
+ * console.
+ * @method toString
+ * @return {String}
+ * @example
+ *
+ *
+ * function setup() {
+ * let v = createVector(20, 30);
+ * print(String(v)); // prints "p5.Vector Object : [20, 30, 0]"
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text(v1.toString(), 10, 25, 90, 75);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.toString = function p5VectorToString() {
+ return 'p5.Vector Object : ['
+ .concat(this.x, ', ')
+ .concat(this.y, ', ')
+ .concat(this.z, ']');
+ };
+
+ /**
+ * Sets the x, y, and z component of the vector using two or three separate
+ * variables, the data from a p5.Vector, or the values from a float array.
+ * @method set
+ * @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
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * let v = createVector(1, 2, 3);
+ * v.set(4, 5, 6); // Sets vector to [4, 5, 6]
+ *
+ * let v1 = createVector(0, 0, 0);
+ * let arr = [1, 2, 3];
+ * v1.set(arr); // Sets vector to [1, 2, 3]
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v0, v1;
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * v0 = createVector(0, 0);
+ * v1 = createVector(50, 50);
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * drawArrow(v0, v1, 'black');
+ * v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));
+ *
+ * noStroke();
+ * text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ /**
+ * @method set
+ * @param {p5.Vector|Number[]} value the vector to set
+ * @chainable
+ */
+ _main.default.Vector.prototype.set = function set(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x = x.x || 0;
+ this.y = x.y || 0;
+ this.z = x.z || 0;
+ return this;
+ }
+ if (x instanceof Array) {
+ this.x = x[0] || 0;
+ this.y = x[1] || 0;
+ this.z = x[2] || 0;
+ return this;
+ }
+ this.x = x || 0;
+ this.y = y || 0;
+ this.z = z || 0;
+ return this;
+ };
+
+ /**
+ * Gets a copy of the vector, returns a p5.Vector object.
+ *
+ * @method copy
+ * @return {p5.Vector} the copy of the p5.Vector object
+ * @example
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = v1.copy();
+ * print(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);
+ * // Prints "true"
+ *
+ *
+ */
+ _main.default.Vector.prototype.copy = function copy() {
+ if (this.p5) {
+ return new _main.default.Vector(this.p5, [this.x, this.y, this.z]);
+ } else {
+ return new _main.default.Vector(this.x, this.y, this.z);
+ }
+ };
+
+ /**
+ * 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. 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
+ * @chainable
+ * @example
+ *
+ *
+ * let v = createVector(1, 2, 3);
+ * v.add(4, 5, 6);
+ * // v's components are set to [5, 7, 9]
+ *
+ *
+ *
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * let v3 = p5.Vector.add(v1, v2);
+ * // v3 has components [3, 5, 7]
+ * print(v3);
+ *
+ *
+ *
+ *
+ *
+ * // red vector + blue vector = purple vector
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(-30, 20);
+ * drawArrow(v1, v2, 'blue');
+ *
+ * let v3 = p5.Vector.add(v1, v2);
+ * drawArrow(v0, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ /**
+ * @method add
+ * @param {p5.Vector|Number[]} value the vector to add
+ * @chainable
+ */
+ _main.default.Vector.prototype.add = function add(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x += x.x || 0;
+ this.y += x.y || 0;
+ this.z += x.z || 0;
+ return this;
+ }
+ if (x instanceof Array) {
+ this.x += x[0] || 0;
+ this.y += x[1] || 0;
+ this.z += x[2] || 0;
+ return this;
+ }
+ this.x += x || 0;
+ this.y += y || 0;
+ this.z += z || 0;
+ return this;
+ };
+
+ /**
+ * 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. 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
+ * @chainable
+ * @example
+ *
+ *
+ * let v = createVector(4, 5, 6);
+ * v.sub(1, 1, 1);
+ * // v's components are set to [3, 4, 5]
+ *
+ *
+ *
+ *
+ *
+ * // Static method
+ * let v1 = createVector(2, 3, 4);
+ * let v2 = createVector(1, 2, 3);
+ *
+ * let v3 = p5.Vector.sub(v1, v2);
+ * // v3 has components [1, 1, 1]
+ * print(v3);
+ *
+ *
+ *
+ *
+ *
+ * // red vector - blue vector = purple vector
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(70, 50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * let v3 = p5.Vector.sub(v1, v2);
+ * drawArrow(v2, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ /**
+ * @method sub
+ * @param {p5.Vector|Number[]} value the vector to subtract
+ * @chainable
+ */
+ _main.default.Vector.prototype.sub = function sub(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x -= x.x || 0;
+ this.y -= x.y || 0;
+ this.z -= x.z || 0;
+ return this;
+ }
+ if (x instanceof Array) {
+ this.x -= x[0] || 0;
+ this.y -= x[1] || 0;
+ this.z -= x[2] || 0;
+ return this;
+ }
+ this.x -= x || 0;
+ this.y -= y || 0;
+ this.z -= z || 0;
+ return this;
+ };
+
+ /**
+ * Multiply the vector by a scalar. The static version of this method
+ * creates a new p5.Vector while the non static version acts on the vector
+ * directly. See the examples for more context.
+ *
+ * @method mult
+ * @param {Number} n the number to multiply with the vector
+ * @chainable
+ * @example
+ *
+ *
+ * let v = createVector(1, 2, 3);
+ * v.mult(2);
+ * // v's components are set to [2, 4, 6]
+ *
+ *
+ *
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = p5.Vector.mult(v1, 2);
+ * // v2 has components [2, 4, 6]
+ * print(v2);
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(25, -25);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let num = map(mouseX, 0, width, -2, 2, true);
+ * let v2 = p5.Vector.mult(v1, num);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('multiplied by ' + num.toFixed(2), 5, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.mult = function mult(n) {
+ if (!(typeof n === 'number' && isFinite(n))) {
+ console.warn(
+ 'p5.Vector.prototype.mult:',
+ 'n is undefined or not a finite number'
+ );
+
+ return this;
+ }
+ this.x *= n;
+ this.y *= n;
+ this.z *= n;
+ return this;
+ };
+
+ /**
+ * Divide the vector by a scalar. The static version of this method creates a
+ * new p5.Vector while the non static version acts on the vector directly.
+ * See the examples for more context.
+ *
+ * @method div
+ * @param {number} n the number to divide the vector by
+ * @chainable
+ * @example
+ *
+ *
+ * let v = createVector(6, 4, 2);
+ * v.div(2); //v's components are set to [3, 2, 1]
+ *
+ *
+ *
+ *
+ *
+ * // Static method
+ * let v1 = createVector(6, 4, 2);
+ * let v2 = p5.Vector.div(v1, 2);
+ * // v2 has components [3, 2, 1]
+ * print(v2);
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 100);
+ * let v1 = createVector(50, -50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let num = map(mouseX, 0, width, 10, 0.5, true);
+ * let v2 = p5.Vector.div(v1, num);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('divided by ' + num.toFixed(2), 10, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.div = function div(n) {
+ if (!(typeof n === 'number' && isFinite(n))) {
+ console.warn(
+ 'p5.Vector.prototype.div:',
+ 'n is undefined or not a finite number'
+ );
+
+ return this;
+ }
+ if (n === 0) {
+ console.warn('p5.Vector.prototype.div:', 'divide by 0');
+ return this;
+ }
+ this.x /= n;
+ this.y /= n;
+ this.z /= n;
+ return this;
+ };
+
+ /**
+ * 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).)
+ *
+ * @method mag
+ * @return {Number} magnitude of the vector
+ * @example
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ * let v = createVector(20.0, 30.0, 40.0);
+ * let m = v.mag();
+ * print(m); // Prints "53.85164807134504"
+ *
+ *
+ */
+ _main.default.Vector.prototype.mag = function mag() {
+ return Math.sqrt(this.magSq());
+ };
+
+ /**
+ * 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).)
+ * Faster if the real length is not required in the
+ * case of comparing vectors, etc.
+ *
+ * @method magSq
+ * @return {number} squared magnitude of the vector
+ * @example
+ *
+ *
+ * // Static method
+ * let v1 = createVector(6, 4, 2);
+ * print(v1.magSq()); // Prints "56"
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.magSq = function magSq() {
+ var x = this.x;
+ var y = this.y;
+ var z = this.z;
+ return x * x + y * y + z * z;
+ };
+
+ /**
+ * Calculates the dot product of two vectors. The version of the method
+ * that computes the dot product of two independent vectors is a static
+ * 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
+ *
+ * @example
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * print(v1.dot(v2)); // Prints "20"
+ *
+ *
+ *
+ *
+ *
+ * //Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(3, 2, 1);
+ * print(p5.Vector.dot(v1, v2)); // Prints "10"
+ *
+ *
+ */
+ /**
+ * @method dot
+ * @param {p5.Vector} value value component of the vector or a p5.Vector
+ * @return {Number}
+ */
+ _main.default.Vector.prototype.dot = function dot(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ return this.dot(x.x, x.y, x.z);
+ }
+ return this.x * (x || 0) + this.y * (y || 0) + this.z * (z || 0);
+ };
+
+ /**
+ * 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.
+ * See the examples for more context.
+ *
+ * @method cross
+ * @param {p5.Vector} v p5.Vector to be crossed
+ * @return {p5.Vector} p5.Vector composed of cross product
+ * @example
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(1, 2, 3);
+ *
+ * v1.cross(v2); // v's components are [0, 0, 0]
+ *
+ *
+ *
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let crossProduct = p5.Vector.cross(v1, v2);
+ * // crossProduct has components [0, 0, 1]
+ * print(crossProduct);
+ *
+ *
+ */
+ _main.default.Vector.prototype.cross = function cross(v) {
+ var x = this.y * v.z - this.z * v.y;
+ var y = this.z * v.x - this.x * v.z;
+ var z = this.x * v.y - this.y * v.x;
+ if (this.p5) {
+ return new _main.default.Vector(this.p5, [x, y, z]);
+ } else {
+ return new _main.default.Vector(x, y, z);
+ }
+ };
+
+ /**
+ * Calculates the Euclidean distance between two points (considering a
+ * point as a vector object).
+ *
+ * @method dist
+ * @param {p5.Vector} v the x, y, and z coordinates of a p5.Vector
+ * @return {Number} the distance
+ * @example
+ *
+ *
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let distance = v1.dist(v2); // distance is 1.4142...
+ * print(distance);
+ *
+ *
+ *
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let distance = p5.Vector.dist(v1, v2);
+ * // distance is 1.4142...
+ * print(distance);
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ *
+ * let v1 = createVector(70, 50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.dist = function dist(v) {
+ return v
+ .copy()
+ .sub(this)
+ .mag();
+ };
+
+ /**
+ * Normalize the vector to length 1 (make it a unit vector).
+ *
+ * @method normalize
+ * @return {p5.Vector} normalized p5.Vector
+ * @example
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.normalize();
+ * // v's components are set to
+ * // [0.4454354, 0.8908708, 0.089087084]
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ * v1.normalize();
+ * drawArrow(v0, v1.mult(35), 'blue');
+ *
+ * noFill();
+ * ellipse(50, 50, 35 * 2);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.normalize = function normalize() {
+ var len = this.mag();
+ // here we multiply by the reciprocal instead of calling 'div()'
+ // since div duplicates this zero check.
+ if (len !== 0) this.mult(1 / len);
+ return this;
+ };
+
+ /**
+ * 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
+ * @chainable
+ * @example
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.limit(5);
+ * // v's components are set to
+ * // [2.2271771, 4.4543543, 0.4454354]
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ * drawArrow(v0, v1.limit(35), 'blue');
+ *
+ * noFill();
+ * ellipse(50, 50, 35 * 2);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.limit = function limit(max) {
+ var mSq = this.magSq();
+ if (mSq > max * max) {
+ this.div(Math.sqrt(mSq)) //normalize it
+ .mult(max);
+ }
+ return this;
+ };
+
+ /**
+ * 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
+ * @chainable
+ * @example
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.setMag(10);
+ * // v's components are set to [6.0, 8.0, 0.0]
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(50, 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ *
+ * let length = map(mouseX, 0, width, 0, 141, true);
+ * v1.setMag(length);
+ * drawArrow(v0, v1, 'blue');
+ *
+ * noStroke();
+ * text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.setMag = function setMag(n) {
+ return this.normalize().mult(n);
+ };
+
+ /**
+ * Calculate the angle of rotation for this vector (only 2D vectors)
+ *
+ * @method heading
+ * @return {Number} the angle of rotation
+ * @example
+ *
+ *
+ * function setup() {
+ * let v1 = createVector(30, 50);
+ * print(v1.heading()); // 1.0303768265243125
+ *
+ * v1 = createVector(40, 50);
+ * print(v1.heading()); // 0.8960553845713439
+ *
+ * v1 = createVector(30, 70);
+ * print(v1.heading()); // 1.1659045405098132
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'black');
+ *
+ * let myHeading = v1.heading();
+ * noStroke();
+ * text(
+ * 'vector heading: ' +
+ * myHeading.toFixed(2) +
+ * ' radians or ' +
+ * degrees(myHeading).toFixed(2) +
+ * ' degrees',
+ * 10,
+ * 50,
+ * 90,
+ * 50
+ * );
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.heading = function heading() {
+ var h = Math.atan2(this.y, this.x);
+ if (this.p5) return this.p5._fromRadians(h);
+ return h;
+ };
+
+ /**
+ * Rotate the vector by an angle (only 2D vectors), magnitude remains the
+ * same
+ *
+ * @method rotate
+ * @param {number} angle the angle of rotation
+ * @chainable
+ * @example
+ *
+ *
+ * let v = createVector(10.0, 20.0);
+ * // v has components [10.0, 20.0, 0.0]
+ * v.rotate(HALF_PI);
+ * // v's components are set to [-20.0, 9.999999, 0.0]
+ *
+ *
+ *
+ *
+ *
+ * let angle = 0;
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(50, 0);
+ *
+ * drawArrow(v0, v1.rotate(angle), 'black');
+ * angle += 0.01;
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.prototype.rotate = function rotate(a) {
+ var newHeading = this.heading() + a;
+ if (this.p5) newHeading = this.p5._toRadians(newHeading);
+ var mag = this.mag();
+ this.x = Math.cos(newHeading) * mag;
+ this.y = Math.sin(newHeading) * mag;
+ return this;
+ };
+
+ /**
+ * Calculates and returns the angle (in radians) between two vectors.
+ * @method angleBetween
+ * @param {p5.Vector} value the x, y, and z components of a p5.Vector
+ * @return {Number} the angle between (in radians)
+ * @example
+ *
+ *
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let angle = v1.angleBetween(v2);
+ * // angle is PI/2
+ * print(angle);
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(240);
+ * let v0 = createVector(50, 50);
+ *
+ * let v1 = createVector(50, 0);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX - 50, mouseY - 50);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * let angleBetween = v1.angleBetween(v2);
+ * noStroke();
+ * text(
+ * 'angle between: ' +
+ * angleBetween.toFixed(2) +
+ * ' radians or ' +
+ * degrees(angleBetween).toFixed(2) +
+ * ' degrees',
+ * 10,
+ * 50,
+ * 90,
+ * 50
+ * );
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+
+ _main.default.Vector.prototype.angleBetween = function angleBetween(v) {
+ var dotmagmag = this.dot(v) / (this.mag() * v.mag());
+ // Mathematically speaking: the dotmagmag variable will be between -1 and 1
+ // inclusive. Practically though it could be slightly outside this range due
+ // to floating-point rounding issues. This can make Math.acos return NaN.
+ //
+ // Solution: we'll clamp the value to the -1,1 range
+ var angle;
+ angle = Math.acos(Math.min(1, Math.max(-1, dotmagmag)));
+ angle = angle * Math.sign(this.cross(v).z || 1);
+ if (this.p5) {
+ angle = this.p5._fromRadians(angle);
+ }
+ return angle;
+ };
+ /**
+ * 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
+ * (old vector) and 1.0 (new vector). 0.9 is very near
+ * the new vector. 0.5 is halfway in between.
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * let v = createVector(1, 1, 0);
+ *
+ * v.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]
+ *
+ *
+ *
+ *
+ *
+ * let v1 = createVector(0, 0, 0);
+ * let v2 = createVector(100, 100, 0);
+ *
+ * let v3 = p5.Vector.lerp(v1, v2, 0.5);
+ * // v3 has components [50,50,0]
+ * print(v3);
+ *
+ *
+ *
+ *
+ *
+ * let step = 0.01;
+ * let amount = 0;
+ *
+ * function draw() {
+ * background(240);
+ * let v0 = createVector(0, 0);
+ *
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(90, 90);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * if (amount > 1 || amount < 0) {
+ * step *= -1;
+ * }
+ * amount += step;
+ * let v3 = p5.Vector.lerp(v1, v2, amount);
+ *
+ * drawArrow(v0, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ /**
+ * @method lerp
+ * @param {p5.Vector} v the p5.Vector to lerp to
+ * @param {Number} amt
+ * @chainable
+ */
+ _main.default.Vector.prototype.lerp = function lerp(x, y, z, amt) {
+ if (x instanceof _main.default.Vector) {
+ return this.lerp(x.x, x.y, x.z, y);
+ }
+ this.x += (x - this.x) * amt || 0;
+ this.y += (y - this.y) * amt || 0;
+ this.z += (z - this.z) * amt || 0;
+ return this;
+ };
+
+ /**
+ * Return a representation of this vector as a float array. This is only
+ * for temporary use. If used in any other fashion, the contents should be
+ * copied by using the p5.Vector.copy() method to copy into your own
+ * array.
+ *
+ * @method array
+ * @return {Number[]} an Array with the 3 values
+ * @example
+ *
+ *
+ * function setup() {
+ * let v = createVector(20, 30);
+ * print(v.array()); // Prints : Array [20, 30, 0]
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(10.0, 20.0, 30.0);
+ * let f = v.array();
+ * print(f[0]); // Prints "10.0"
+ * print(f[1]); // Prints "20.0"
+ * print(f[2]); // Prints "30.0"
+ *
+ *
+ */
+ _main.default.Vector.prototype.array = function array() {
+ return [this.x || 0, this.y || 0, this.z || 0];
+ };
+
+ /**
+ * 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
+ * @example
+ *
+ *
+ * let v1 = createVector(5, 10, 20);
+ * let v2 = createVector(5, 10, 20);
+ * let v3 = createVector(13, 10, 19);
+ *
+ * print(v1.equals(v2.x, v2.y, v2.z)); // true
+ * print(v1.equals(v3.x, v3.y, v3.z)); // false
+ *
+ *
+ *
+ *
+ *
+ * let v1 = createVector(10.0, 20.0, 30.0);
+ * let v2 = createVector(10.0, 20.0, 30.0);
+ * let v3 = createVector(0.0, 0.0, 0.0);
+ * print(v1.equals(v2)); // true
+ * print(v1.equals(v3)); // false
+ *
+ *
+ */
+ /**
+ * @method equals
+ * @param {p5.Vector|Array} value the vector to compare
+ * @return {Boolean}
+ */
+ _main.default.Vector.prototype.equals = function equals(x, y, z) {
+ var a, b, c;
+ if (x instanceof _main.default.Vector) {
+ a = x.x || 0;
+ b = x.y || 0;
+ c = x.z || 0;
+ } else if (x instanceof Array) {
+ a = x[0] || 0;
+ b = x[1] || 0;
+ c = x[2] || 0;
+ } else {
+ a = x || 0;
+ b = y || 0;
+ c = z || 0;
+ }
+ return this.x === a && this.y === b && this.z === c;
+ };
+
+ // Static Methods
+
+ /**
+ * 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
+ * @example
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a variable, proportional to the mouseX,
+ * // varying from 0-360, to represent an angle in degrees.
+ * let myDegrees = map(mouseX, 0, width, 0, 360);
+ *
+ * // Display that variable in an onscreen text.
+ * // (Note the nfc() function to truncate additional decimal places,
+ * // and the "\xB0" character for the degree symbol.)
+ * let readout = 'angle = ' + nfc(myDegrees, 1) + '\xB0';
+ * noStroke();
+ * fill(0);
+ * text(readout, 5, 15);
+ *
+ * // Create a p5.Vector using the fromAngle function,
+ * // and extract its x and y components.
+ * let v = p5.Vector.fromAngle(radians(myDegrees), 30);
+ * let vx = v.x;
+ * let vy = v.y;
+ *
+ * push();
+ * translate(width / 2, height / 2);
+ * noFill();
+ * stroke(150);
+ * line(0, 0, 30, 0);
+ * stroke(0);
+ * line(0, 0, vx, vy);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.fromAngle = function fromAngle(angle, length) {
+ if (typeof length === 'undefined') {
+ length = 1;
+ }
+ return new _main.default.Vector(
+ length * Math.cos(angle),
+ length * Math.sin(angle),
+ 0
+ );
+ };
+
+ /**
+ * 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
+ * (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
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * fill(255);
+ * noStroke();
+ * }
+ * function draw() {
+ * background(255);
+ *
+ * let t = millis() / 1000;
+ *
+ * // add three point lights
+ * pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));
+ * pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));
+ * pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));
+ *
+ * sphere(35);
+ * }
+ *
+ *
+ */
+ _main.default.Vector.fromAngles = function(theta, phi, length) {
+ if (typeof length === 'undefined') {
+ length = 1;
+ }
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+
+ return new _main.default.Vector(
+ length * sinTheta * sinPhi,
+ -length * cosTheta,
+ length * sinTheta * cosPhi
+ );
+ };
+
+ /**
+ * Make a new 2D unit vector from a random angle
+ *
+ * @method random2D
+ * @static
+ * @return {p5.Vector} the new p5.Vector object
+ * @example
+ *
+ *
+ * let v = p5.Vector.random2D();
+ * // May make v's attributes something like:
+ * // [0.61554617, -0.51195765, 0.0] or
+ * // [-0.4695841, -0.14366731, 0.0] or
+ * // [0.6091097, -0.22805278, 0.0]
+ * print(v);
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * frameRate(1);
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = p5.Vector.random2D();
+ * drawArrow(v0, v1.mult(50), 'black');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ */
+ _main.default.Vector.random2D = function random2D() {
+ return this.fromAngle(Math.random() * constants.TWO_PI);
+ };
+
+ /**
+ * Make a new random 3D unit vector.
+ *
+ * @method random3D
+ * @static
+ * @return {p5.Vector} the new p5.Vector object
+ * @example
+ *
+ *
+ * let v = p5.Vector.random3D();
+ * // May make v's attributes something like:
+ * // [0.61554617, -0.51195765, 0.599168] or
+ * // [-0.4695841, -0.14366731, -0.8711202] or
+ * // [0.6091097, -0.22805278, -0.7595902]
+ * print(v);
+ *
+ *
+ */
+ _main.default.Vector.random3D = function random3D() {
+ var angle = Math.random() * constants.TWO_PI;
+ var vz = Math.random() * 2 - 1;
+ var vzBase = Math.sqrt(1 - vz * vz);
+ var vx = vzBase * Math.cos(angle);
+ var vy = vzBase * Math.sin(angle);
+ return new _main.default.Vector(vx, vy, vz);
+ };
+
+ // Adds two vectors together and returns a new one.
+ /**
+ * @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
+ */
+ /**
+ * @method add
+ * @static
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} v2
+ * @return {p5.Vector} the resulting p5.Vector
+ *
+ */
+
+ _main.default.Vector.add = function add(v1, v2, target) {
+ if (!target) {
+ target = v1.copy();
+ } else {
+ target.set(v1);
+ }
+ target.add(v2);
+ return target;
+ };
+
+ /*
+ * 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.
+ */
+ /**
+ * @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 if undefined a new vector will be created
+ */
+ /**
+ * @method sub
+ * @static
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} v2
+ * @return {p5.Vector} the resulting p5.Vector
+ */
+
+ _main.default.Vector.sub = function sub(v1, v2, target) {
+ if (!target) {
+ target = v1.copy();
+ } else {
+ target.set(v1);
+ }
+ target.sub(v2);
+ return target;
+ };
+
+ /**
+ * Multiplies a vector by a scalar and returns a new vector.
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {p5.Vector} v the vector to multiply
+ * @param {Number} n
+ * @param {p5.Vector} target if undefined a new vector will be created
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {p5.Vector} v
+ * @param {Number} n
+ * @return {p5.Vector} the resulting new p5.Vector
+ */
+ _main.default.Vector.mult = function mult(v, n, target) {
+ if (!target) {
+ target = v.copy();
+ } else {
+ target.set(v);
+ }
+ target.mult(n);
+ return target;
+ };
+
+ /**
+ * Divides a vector by a scalar and returns a new vector.
+ */
+ /**
+ * @method div
+ * @static
+ * @param {p5.Vector} v the vector to divide
+ * @param {Number} n
+ * @param {p5.Vector} target if undefined a new vector will be created
+ */
+ /**
+ * @method div
+ * @static
+ * @param {p5.Vector} v
+ * @param {Number} n
+ * @return {p5.Vector} the resulting new p5.Vector
+ */
+ _main.default.Vector.div = function div(v, n, target) {
+ if (!target) {
+ target = v.copy();
+ } else {
+ target.set(v);
+ }
+ target.div(n);
+ return target;
+ };
+
+ /**
+ * Calculates the dot product of two vectors.
+ */
+ /**
+ * @method dot
+ * @static
+ * @param {p5.Vector} v1 the first p5.Vector
+ * @param {p5.Vector} v2 the second p5.Vector
+ * @return {Number} the dot product
+ */
+ _main.default.Vector.dot = function dot(v1, v2) {
+ return v1.dot(v2);
+ };
+
+ /**
+ * Calculates the cross product of two vectors.
+ */
+ /**
+ * @method cross
+ * @static
+ * @param {p5.Vector} v1 the first p5.Vector
+ * @param {p5.Vector} v2 the second p5.Vector
+ * @return {Number} the cross product
+ */
+ _main.default.Vector.cross = function cross(v1, v2) {
+ return v1.cross(v2);
+ };
+
+ /**
+ * Calculates the Euclidean distance between two points (considering a
+ * point as a vector object).
+ */
+ /**
+ * @method dist
+ * @static
+ * @param {p5.Vector} v1 the first p5.Vector
+ * @param {p5.Vector} v2 the second p5.Vector
+ * @return {Number} the distance
+ */
+ _main.default.Vector.dist = function dist(v1, v2) {
+ return v1.dist(v2);
+ };
+
+ /**
+ * Linear interpolate a vector to another vector and return the result as a
+ * new vector.
+ */
+ /**
+ * @method lerp
+ * @static
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} v2
+ * @param {Number} amt
+ * @param {p5.Vector} target if undefined a new vector will be created
+ */
+ /**
+ * @method lerp
+ * @static
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} v2
+ * @param {Number} amt
+ * @return {Number} the lerped value
+ */
+ _main.default.Vector.lerp = function lerp(v1, v2, amt, target) {
+ if (!target) {
+ target = v1.copy();
+ } else {
+ target.set(v1);
+ }
+ target.lerp(v2, amt);
+ return target;
+ };
+
+ /**
+ * @method mag
+ * @param {p5.Vector} vecT the vector to return the magnitude of
+ * @return {Number} the magnitude of vecT
+ * @static
+ */
+ _main.default.Vector.mag = function mag(vecT) {
+ var x = vecT.x,
+ y = vecT.y,
+ z = vecT.z;
+ var magSq = x * x + y * y + z * z;
+ return Math.sqrt(magSq);
+ };
+ var _default = _main.default.Vector;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27 }
+ ],
+ 61: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /** // variables used for random number generators
+ * @module Math
+ * @submodule Random
+ * @for p5
+ * @requires core
+ */
+ var randomStateProp = '_lcg_random_state'; // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
+ // m is basically chosen to be large (as it is the max period)
+ // and for its relationships to a and c
+ var m = 4294967296; // a - 1 should be divisible by m's prime factors
+ var a = 1664525; // c and m should be co-prime
+ var c = 1013904223;
+ var y2 = 0;
+
+ // Linear Congruential Generator that stores its state at instance[stateProperty]
+ _main.default.prototype._lcg = function(stateProperty) {
+ // define the recurrence relationship
+ this[stateProperty] = (a * this[stateProperty] + c) % m;
+ // return a float in [0, 1)
+ // we've just used % m, so / m is always < 1
+ return this[stateProperty] / m;
+ };
+
+ _main.default.prototype._lcgSetSeed = function(stateProperty, val) {
+ // pick a random seed if val is undefined or null
+ // the >>> 0 casts the seed to an unsigned 32-bit integer
+ this[stateProperty] = (val == null ? Math.random() * m : val) >>> 0;
+ };
+
+ /**
+ * Sets the seed value for random().
+ *
+ * By default, random() produces different results each time the program
+ * is run. Set the seed parameter to a constant to return the same
+ * pseudo-random numbers each time the software is run.
+ *
+ * @method randomSeed
+ * @param {Number} seed the seed value
+ * @example
+ *
+ *
+ * randomSeed(99);
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(0, 255);
+ * stroke(r);
+ * line(i, 0, i, 100);
+ * }
+ *
+ *
+ *
+ * @alt
+ * many vertical lines drawn in white, black or grey.
+ *
+ */
+ _main.default.prototype.randomSeed = function(seed) {
+ this._lcgSetSeed(randomStateProp, seed);
+ this._gaussian_previous = false;
+ };
+
+ /**
+ * Return a random floating-point number.
+ *
+ * Takes either 0, 1 or 2 arguments.
+ *
+ * If no argument is given, returns a random number from 0
+ * up to (but not including) 1.
+ *
+ * If one argument is given and it is a number, returns a random number from 0
+ * up to (but not including) the number.
+ *
+ * If one argument is given and it is an array, returns a random element from
+ * that array.
+ *
+ * If two arguments are given, returns a random number from the
+ * first argument up to (but not including) the second argument.
+ *
+ * @method random
+ * @param {Number} [min] the lower bound (inclusive)
+ * @param {Number} [max] the upper bound (exclusive)
+ * @return {Number} the random number
+ * @example
+ *
+ *
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(50);
+ * stroke(r * 5);
+ * line(50, i, 50 + r, i);
+ * }
+ *
+ *
+ *
+ *
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(-50, 50);
+ * line(50, i, 50 + r, i);
+ * }
+ *
+ *
+ *
+ *
+ * // Get a random element from an array using the random(Array) syntax
+ * let words = ['apple', 'bear', 'cat', 'dog'];
+ * let word = random(words); // select random word
+ * text(word, 10, 50); // draw the word
+ *
+ *
+ *
+ * @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
+ * @param {Array} choices the array to choose from
+ * @return {*} the random element from the array
+ * @example
+ */
+ _main.default.prototype.random = function(min, max) {
+ _main.default._validateParameters('random', arguments);
+ var rand;
+
+ if (this[randomStateProp] != null) {
+ rand = this._lcg(randomStateProp);
+ } else {
+ rand = Math.random();
+ }
+ if (typeof min === 'undefined') {
+ return rand;
+ } else if (typeof max === 'undefined') {
+ if (min instanceof Array) {
+ return min[Math.floor(rand * min.length)];
+ } else {
+ return rand * min;
+ }
+ } else {
+ if (min > max) {
+ var tmp = min;
+ min = max;
+ max = tmp;
+ }
+
+ return rand * (max - min) + min;
+ }
+ };
+
+ /**
+ *
+ * Returns a random number fitting a Gaussian, or
+ * normal, distribution. There is theoretically no minimum or maximum
+ * value that randomGaussian() might return. Rather, there is
+ * just a very low probability that values far from the mean will be
+ * returned; and a higher probability that numbers near the mean will
+ * 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.
+ *
+ * @method randomGaussian
+ * @param {Number} mean the mean
+ * @param {Number} sd the standard deviation
+ * @return {Number} the random number
+ * @example
+ *
+ *
+ * for (let y = 0; y < 100; y++) {
+ * let x = randomGaussian(50, 15);
+ * line(50, y, x, y);
+ * }
+ *
+ *
+ *
+ *
+ * let distribution = new Array(360);
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * for (let i = 0; i < distribution.length; i++) {
+ * distribution[i] = floor(randomGaussian(0, 15));
+ * }
+ * }
+ *
+ * function draw() {
+ * background(204);
+ *
+ * translate(width / 2, width / 2);
+ *
+ * for (let i = 0; i < distribution.length; i++) {
+ * rotate(TWO_PI / distribution.length);
+ * stroke(0);
+ * let dist = abs(distribution[i]);
+ * line(0, 0, dist, 0);
+ * }
+ * }
+ *
+ *
+ * @alt
+ * 100 horizontal lines from center of canvas. height & side change each render
+ * black lines radiate from center of canvas. size determined each render
+ */
+ _main.default.prototype.randomGaussian = function(mean, sd) {
+ var y1, x1, x2, w;
+ if (this._gaussian_previous) {
+ y1 = y2;
+ this._gaussian_previous = false;
+ } else {
+ do {
+ x1 = this.random(2) - 1;
+ x2 = this.random(2) - 1;
+ w = x1 * x1 + x2 * x2;
+ } while (w >= 1);
+ w = Math.sqrt(-2 * Math.log(w) / w);
+ y1 = x1 * w;
+ y2 = x2 * w;
+ this._gaussian_previous = true;
+ }
+
+ var m = mean || 0;
+ var s = sd || 1;
+ return y1 * s + m;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 62: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Math
+ * @submodule Trigonometry
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ /*
+ * all DEGREES/RADIANS conversion should be done in the p5 instance
+ * if possible, using the p5._toRadians(), p5._fromRadians() methods.
+ */ _main.default.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).
+ *
+ * @method acos
+ * @param {Number} value the value whose arc cosine is to be returned
+ * @return {Number} the arc cosine of the given value
+ *
+ * @example
+ *
+ *
+ * let a = PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ * // Prints: "3.1415927 : -1.0 : 3.1415927"
+ * print(a + ' : ' + c + ' : ' + ac);
+ *
+ *
+ *
+ *
+ *
+ * let a = PI + PI / 4.0;
+ * let c = cos(a);
+ * let ac = acos(c);
+ * // Prints: "3.926991 : -0.70710665 : 2.3561943"
+ * print(a + ' : ' + c + ' : ' + ac);
+ *
+ *
+ */ _main.default.prototype.acos = function(ratio) {
+ return this._fromRadians(Math.acos(ratio));
+ };
+
+ /**
+ * The inverse of sin(), returns the arc sine of a value. This function
+ * expects the values in the range of -1 to 1 and values are returned
+ * in the range -PI/2 to PI/2.
+ *
+ * @method asin
+ * @param {Number} value the value whose arc sine is to be returned
+ * @return {Number} the arc sine of the given value
+ *
+ * @example
+ *
+ *
+ * let a = PI + PI / 3;
+ * let s = sin(a);
+ * let as = asin(s);
+ * // Prints: "1.0471976 : 0.86602545 : 1.0471976"
+ * print(a + ' : ' + s + ' : ' + as);
+ *
+ *
+ *
+ *
+ *
+ * let a = PI + PI / 3.0;
+ * let s = sin(a);
+ * let as = asin(s);
+ * // Prints: "4.1887903 : -0.86602545 : -1.0471976"
+ * print(a + ' : ' + s + ' : ' + as);
+ *
+ *
+ *
+ */
+ _main.default.prototype.asin = function(ratio) {
+ return this._fromRadians(Math.asin(ratio));
+ };
+
+ /**
+ * The inverse of tan(), returns the arc tangent of a value. This function
+ * expects the values in the range of -Infinity to Infinity (exclusive) and
+ * values are returned in the range -PI/2 to PI/2.
+ *
+ * @method atan
+ * @param {Number} value the value whose arc tangent is to be returned
+ * @return {Number} the arc tangent of the given value
+ *
+ * @example
+ *
+ *
+ * let a = PI + PI / 3;
+ * let t = tan(a);
+ * let at = atan(t);
+ * // Prints: "1.0471976 : 1.7320509 : 1.0471976"
+ * print(a + ' : ' + t + ' : ' + at);
+ *
+ *
+ *
+ *
+ *
+ * let a = PI + PI / 3.0;
+ * let t = tan(a);
+ * let at = atan(t);
+ * // Prints: "4.1887903 : 1.7320513 : 1.0471977"
+ * print(a + ' : ' + t + ' : ' + at);
+ *
+ *
+ *
+ */
+ _main.default.prototype.atan = function(ratio) {
+ return this._fromRadians(Math.atan(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. 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
+ * the tangent.
+ *
+ * @method atan2
+ * @param {Number} y y-coordinate of the point
+ * @param {Number} x x-coordinate of the point
+ * @return {Number} the arc tangent of the given point
+ *
+ * @example
+ *
+ *
+ * function draw() {
+ * background(204);
+ * translate(width / 2, height / 2);
+ * let a = atan2(mouseY - height / 2, mouseX - width / 2);
+ * rotate(a);
+ * rect(-30, -5, 60, 10);
+ * }
+ *
+ *
+ *
+ * @alt
+ * 60 by 10 rect at center of canvas rotates with mouse movements
+ *
+ */
+ _main.default.prototype.atan2 = function(y, x) {
+ return this._fromRadians(Math.atan2(y, x));
+ };
+
+ /**
+ * Calculates the cosine of an angle. This function takes into account the
+ * current angleMode. Values are returned in the range -1 to 1.
+ *
+ * @method cos
+ * @param {Number} angle the angle
+ * @return {Number} the cosine of the angle
+ *
+ * @example
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 25.0;
+ * for (let i = 0; i < 25; i++) {
+ * line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ *
+ * @alt
+ * vertical black lines form wave patterns, extend-down on left and right side
+ *
+ */
+ _main.default.prototype.cos = function(angle) {
+ return Math.cos(this._toRadians(angle));
+ };
+
+ /**
+ * Calculates the sine of an angle. This function takes into account the
+ * current angleMode. Values are returned in the range -1 to 1.
+ *
+ * @method sin
+ * @param {Number} angle the angle
+ * @return {Number} the sine of the angle
+ *
+ * @example
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 25.0;
+ * for (let i = 0; i < 25; i++) {
+ * line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ *
+ * @alt
+ * vertical black lines extend down and up from center to form wave pattern
+ *
+ */
+ _main.default.prototype.sin = function(angle) {
+ return Math.sin(this._toRadians(angle));
+ };
+
+ /**
+ * Calculates the tangent of an angle. This function takes into account
+ * the current angleMode. Values are returned in the range of all real numbers.
+ *
+ * @method tan
+ * @param {Number} angle the angle
+ * @return {Number} the tangent of the angle
+ *
+ * @example
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 50.0;
+ * for (let i = 0; i < 100; i = i + 2) {
+ * line(i, 50, i, 50 + tan(a) * 2.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ *
+ * @alt
+ * vertical black lines end down and up from center to form spike pattern
+ *
+ */
+ _main.default.prototype.tan = function(angle) {
+ return Math.tan(this._toRadians(angle));
+ };
+
+ /**
+ * Converts a radian measurement to its corresponding value in degrees.
+ * 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.
+ *
+ * @method degrees
+ * @param {Number} radians the radians value to convert to degrees
+ * @return {Number} the converted angle
+ *
+ *
+ * @example
+ *
+ *
+ * let rad = PI / 4;
+ * let deg = degrees(rad);
+ * print(rad + ' radians is ' + deg + ' degrees');
+ * // Prints: 0.7853981633974483 radians is 45 degrees
+ *
+ *
+ *
+ */
+ _main.default.prototype.degrees = function(angle) {
+ return angle * constants.RAD_TO_DEG;
+ };
+
+ /**
+ * Converts a degree measurement to its corresponding value in radians.
+ * 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.
+ *
+ * @method radians
+ * @param {Number} degrees the degree value to convert to radians
+ * @return {Number} the converted angle
+ *
+ * @example
+ *
+ *
+ * let deg = 45.0;
+ * let rad = radians(deg);
+ * print(deg + ' degrees is ' + rad + ' radians');
+ * // Prints: 45 degrees is 0.7853981633974483 radians
+ *
+ *
+ */
+ _main.default.prototype.radians = function(angle) {
+ return angle * constants.DEG_TO_RAD;
+ };
+
+ /**
+ * Sets the current mode of p5 to given mode. Default mode is RADIANS.
+ *
+ * @method angleMode
+ * @param {Constant} mode either RADIANS or DEGREES
+ *
+ * @example
+ *
+ *
+ * function draw() {
+ * background(204);
+ * angleMode(DEGREES); // Change the mode to DEGREES
+ * let a = atan2(mouseY - height / 2, mouseX - width / 2);
+ * translate(width / 2, height / 2);
+ * push();
+ * rotate(a);
+ * rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
+ * pop();
+ * 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
+ * }
+ *
+ *
+ *
+ * @alt
+ * 40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.
+ *
+ *
+ */
+ _main.default.prototype.angleMode = function(mode) {
+ if (mode === constants.DEGREES || mode === constants.RADIANS) {
+ this._angleMode = mode;
+ }
+ };
+
+ /**
+ * converts angles from the current angleMode to RADIANS
+ *
+ * @method _toRadians
+ * @private
+ * @param {Number} angle
+ * @returns {Number}
+ */
+ _main.default.prototype._toRadians = function(angle) {
+ if (this._angleMode === constants.DEGREES) {
+ return angle * constants.DEG_TO_RAD;
+ }
+ return angle;
+ };
+
+ /**
+ * converts angles from the current angleMode to DEGREES
+ *
+ * @method _toDegrees
+ * @private
+ * @param {Number} angle
+ * @returns {Number}
+ */
+ _main.default.prototype._toDegrees = function(angle) {
+ if (this._angleMode === constants.RADIANS) {
+ return angle * constants.RAD_TO_DEG;
+ }
+ return angle;
+ };
+
+ /**
+ * converts angles from RADIANS into the current angleMode
+ *
+ * @method _fromRadians
+ * @private
+ * @param {Number} angle
+ * @returns {Number}
+ */
+ _main.default.prototype._fromRadians = function(angle) {
+ if (this._angleMode === constants.DEGREES) {
+ return angle * constants.RAD_TO_DEG;
+ }
+ return angle;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27 }
+ ],
+ 63: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Typography
+ * @submodule Attributes
+ * @for p5
+ * @requires core
+ * @requires constants
+ */ /**
+ * Sets the current alignment for drawing text. Accepts two
+ * arguments: horizAlign (LEFT, CENTER, or RIGHT) and
+ * vertAlign (TOP, BOTTOM, CENTER, or BASELINE).
+ *
+ * The horizAlign parameter is in reference to the x value
+ * of the text() function, while the vertAlign parameter is
+ * in reference to the y value.
+ *
+ * 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
+ * to the y value.
+ *
+ * @method textAlign
+ * @param {Constant} horizAlign horizontal alignment, either LEFT,
+ * CENTER, or RIGHT
+ * @param {Constant} [vertAlign] vertical alignment, either TOP,
+ * BOTTOM, CENTER, or BASELINE
+ * @chainable
+ * @example
+ *
+ *
+ * textSize(16);
+ * textAlign(RIGHT);
+ * text('ABCD', 50, 30);
+ * textAlign(CENTER);
+ * text('EFGH', 50, 50);
+ * textAlign(LEFT);
+ * text('IJKL', 50, 70);
+ *
+ *
+ *
+ *
+ *
+ * textSize(16);
+ * strokeWeight(0.5);
+ *
+ * line(0, 12, width, 12);
+ * textAlign(CENTER, TOP);
+ * text('TOP', 0, 12, width);
+ *
+ * line(0, 37, width, 37);
+ * textAlign(CENTER, CENTER);
+ * text('CENTER', 0, 37, width);
+ *
+ * line(0, 62, width, 62);
+ * textAlign(CENTER, BASELINE);
+ * text('BASELINE', 0, 62, width);
+ *
+ * line(0, 87, width, 87);
+ * textAlign(CENTER, BOTTOM);
+ * text('BOTTOM', 0, 87, width);
+ *
+ *
+ *
+ * @alt
+ *Letters ABCD displayed at top right, EFGH at center and IJKL at bottom left.
+ * The names of the four vertical alignments rendered each showing that alignment's placement relative to a horizontal line.
+ *
+ */ /**
+ * @method textAlign
+ * @return {Object}
+ */ _main.default.prototype.textAlign = function(horizAlign, vertAlign) {
+ var _this$_renderer;
+ _main.default._validateParameters('textAlign', arguments);
+ return (_this$_renderer = this._renderer).textAlign.apply(
+ _this$_renderer,
+ arguments
+ );
+ };
+
+ /**
+ * Sets/gets the spacing, in pixels, between lines of text. This
+ * setting will be used in all subsequent calls to the text() function.
+ *
+ * @method textLeading
+ * @param {Number} leading the size in pixels for spacing between lines
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * // Text to display. The "\n" is a "new line" character
+ * let lines = 'L1\nL2\nL3';
+ * textSize(12);
+ *
+ * textLeading(10); // Set leading to 10
+ * text(lines, 10, 25);
+ *
+ * textLeading(20); // Set leading to 20
+ * text(lines, 40, 25);
+ *
+ * textLeading(30); // Set leading to 30
+ * text(lines, 70, 25);
+ *
+ *
+ *
+ * @alt
+ *set L1 L2 & L3 displayed vertically 3 times. spacing increases for each set
+ */
+ /**
+ * @method textLeading
+ * @return {Number}
+ */
+ _main.default.prototype.textLeading = function(theLeading) {
+ var _this$_renderer2;
+ _main.default._validateParameters('textLeading', arguments);
+ return (_this$_renderer2 = this._renderer).textLeading.apply(
+ _this$_renderer2,
+ arguments
+ );
+ };
+
+ /**
+ * Sets/gets the current font size. This size will be used in all subsequent
+ * calls to the text() function. Font size is measured in pixels.
+ *
+ * @method textSize
+ * @param {Number} theSize the size of the letters in units of pixels
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * textSize(12);
+ * text('Font Size 12', 10, 30);
+ * textSize(14);
+ * text('Font Size 14', 10, 60);
+ * textSize(16);
+ * text('Font Size 16', 10, 90);
+ *
+ *
+ *
+ * @alt
+ *Font Size 12 displayed small, Font Size 14 medium & Font Size 16 large
+ */
+ /**
+ * @method textSize
+ * @return {Number}
+ */
+ _main.default.prototype.textSize = function(theSize) {
+ var _this$_renderer3;
+ _main.default._validateParameters('textSize', arguments);
+ return (_this$_renderer3 = this._renderer).textSize.apply(
+ _this$_renderer3,
+ arguments
+ );
+ };
+
+ /**
+ * Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.
+ * Note: this may be is overridden by CSS styling. For non-system fonts
+ * (opentype, truetype, etc.) please load styled fonts instead.
+ *
+ * @method textStyle
+ * @param {Constant} theStyle styling for text, either NORMAL,
+ * ITALIC, BOLD or BOLDITALIC
+ * @chainable
+ * @example
+ *
+ *
+ * strokeWeight(0);
+ * textSize(12);
+ * textStyle(NORMAL);
+ * text('Font Style Normal', 10, 15);
+ * textStyle(ITALIC);
+ * text('Font Style Italic', 10, 40);
+ * textStyle(BOLD);
+ * text('Font Style Bold', 10, 65);
+ * textStyle(BOLDITALIC);
+ * text('Font Style Bold Italic', 10, 90);
+ *
+ *
+ *
+ * @alt
+ *words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.
+ */
+ /**
+ * @method textStyle
+ * @return {String}
+ */
+ _main.default.prototype.textStyle = function(theStyle) {
+ var _this$_renderer4;
+ _main.default._validateParameters('textStyle', arguments);
+ return (_this$_renderer4 = this._renderer).textStyle.apply(
+ _this$_renderer4,
+ arguments
+ );
+ };
+
+ /**
+ * Calculates and returns the width of any character or text string.
+ *
+ * @method textWidth
+ * @param {String} theText the String of characters to measure
+ * @return {Number}
+ * @example
+ *
+ *
+ * textSize(28);
+ *
+ * let aChar = 'P';
+ * let cWidth = textWidth(aChar);
+ * text(aChar, 0, 40);
+ * line(cWidth, 0, cWidth, 50);
+ *
+ * let aString = 'p5.js';
+ * let sWidth = textWidth(aString);
+ * text(aString, 0, 85);
+ * line(sWidth, 50, sWidth, 100);
+ *
+ *
+ *
+ * @alt
+ *Letter P and p5.js are displayed with vertical lines at end. P is wide
+ *
+ */
+ _main.default.prototype.textWidth = function() {
+ var _this$_renderer5;
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ args[0] += '';
+ _main.default._validateParameters('textWidth', args);
+ if (args[0].length === 0) {
+ return 0;
+ }
+ return (_this$_renderer5 = this._renderer).textWidth.apply(
+ _this$_renderer5,
+ args
+ );
+ };
+
+ /**
+ * Returns the ascent of the current font at its current size. The ascent
+ * represents the distance, in pixels, of the tallest character above
+ * the baseline.
+ * @method textAscent
+ * @return {Number}
+ * @example
+ *
+ *
+ * let base = height * 0.75;
+ * let scalar = 0.8; // Different for each font
+ *
+ * textSize(32); // Set initial text size
+ * let asc = textAscent() * scalar; // Calc ascent
+ * line(0, base - asc, width, base - asc);
+ * text('dp', 0, base); // Draw text on baseline
+ *
+ * textSize(64); // Increase text size
+ * asc = textAscent() * scalar; // Recalc ascent
+ * line(40, base - asc, width, base - asc);
+ * text('dp', 40, base); // Draw text on baseline
+ *
+ *
+ */
+ _main.default.prototype.textAscent = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('textAscent', args);
+ return this._renderer.textAscent();
+ };
+
+ /**
+ * Returns the descent of the current font at its current size. The descent
+ * represents the distance, in pixels, of the character with the longest
+ * descender below the baseline.
+ * @method textDescent
+ * @return {Number}
+ * @example
+ *
+ *
+ * let base = height * 0.75;
+ * let scalar = 0.8; // Different for each font
+ *
+ * textSize(32); // Set initial text size
+ * let desc = textDescent() * scalar; // Calc ascent
+ * line(0, base + desc, width, base + desc);
+ * text('dp', 0, base); // Draw text on baseline
+ *
+ * textSize(64); // Increase text size
+ * desc = textDescent() * scalar; // Recalc ascent
+ * line(40, base + desc, width, base + desc);
+ * text('dp', 40, base); // Draw text on baseline
+ *
+ *
+ */
+ _main.default.prototype.textDescent = function() {
+ for (
+ var _len3 = arguments.length, args = new Array(_len3), _key3 = 0;
+ _key3 < _len3;
+ _key3++
+ ) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('textDescent', args);
+ return this._renderer.textDescent();
+ };
+
+ /**
+ * Helper function to measure ascent and descent.
+ */
+ _main.default.prototype._updateTextMetrics = function() {
+ return this._renderer._updateTextMetrics();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 64: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var opentype = _interopRequireWildcard(_dereq_('opentype.js'));
+
+ _dereq_('../core/error_helpers');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Typography
+ * @submodule Loading & Displaying
+ * @for p5
+ * @requires 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.
+ *
+ * The path to the font should be relative to the HTML file
+ * that links in your sketch. Loading fonts from a URL or other
+ * remote location may be blocked due to your browser's built-in
+ * security.
+ *
+ * @method loadFont
+ * @param {String} path name of the file or url to load
+ * @param {Function} [callback] function to be executed after
+ * loadFont() completes
+ * @param {Function} [onError] function to be executed if
+ * an error occurs
+ * @return {p5.Font} p5.Font object
+ * @example
+ *
+ * Calling loadFont() inside preload() guarantees that the load
+ * operation will have completed before setup() and draw() are called.
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * fill('#ED225D');
+ * textFont(myFont);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ * }
+ *
+ *
+ * Outside of preload(), you may supply a callback function to handle the
+ * object:
+ *
+ *
+ * function setup() {
+ * loadFont('assets/inconsolata.otf', drawText);
+ * }
+ *
+ * function drawText(font) {
+ * fill('#ED225D');
+ * textFont(font, 36);
+ * text('p5*js', 10, 50);
+ * }
+ *
+ *
+ * You can also use the font filename string (without the file extension) to style other HTML
+ * elements.
+ *
+ *
+ * function preload() {
+ * loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * let myDiv = createDiv('hello there');
+ * myDiv.style('font-family', 'Inconsolata');
+ * }
+ *
+ *
+ * @alt
+ * p5*js in p5's theme dark pink
+ * p5*js in p5's theme dark pink
+ *
+ */ _main.default.prototype.loadFont = function(path, onSuccess, onError) {
+ _main.default._validateParameters('loadFont', arguments);
+ var p5Font = new _main.default.Font(this);
+
+ var self = this;
+ opentype.load(path, function(err, font) {
+ if (err) {
+ _main.default._friendlyFileLoadError(4, path);
+ if (typeof onError !== 'undefined') {
+ return onError(err);
+ }
+ console.error(err, path);
+ return;
+ }
+
+ p5Font.font = font;
+
+ if (typeof onSuccess !== 'undefined') {
+ onSuccess(p5Font);
+ }
+
+ self._decrementPreload();
+
+ // check that we have an acceptable font type
+ var validFontTypes = ['ttf', 'otf', 'woff', 'woff2'];
+
+ var fileNoPath = path
+ .split('\\')
+ .pop()
+ .split('/')
+ .pop();
+
+ var lastDotIdx = fileNoPath.lastIndexOf('.');
+ var fontFamily;
+ var newStyle;
+ var fileExt = lastDotIdx < 1 ? null : fileNoPath.substr(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);
+ newStyle = document.createElement('style');
+ newStyle.appendChild(
+ document.createTextNode(
+ '\n@font-face {\nfont-family: '
+ .concat(fontFamily, ';\nsrc: url(')
+ .concat(path, ');\n}\n')
+ )
+ );
+
+ document.head.appendChild(newStyle);
+ }
+ });
+
+ return p5Font;
+ };
+
+ /**
+ * Draws text to the screen. Displays the information specified in the first
+ * parameter on the screen in the position specified by the additional
+ * parameters. A default font will be used unless a font is set with the
+ * textFont() function and a default size will be used unless a font is set
+ * with textSize(). Change the color of the text with the fill() function.
+ * Change the outline of the text with the stroke() and strokeWeight()
+ * functions.
+ *
+ * The text displays in relation to the textAlign() function, which gives the
+ * option to draw to the left, right, and center of the coordinates.
+ *
+ * The x2 and y2 parameters define a rectangular area to display within and
+ * may only be used with string data. When these parameters are specified,
+ * they are interpreted based on the current rectMode() setting. Text that
+ * does not fit completely within the rectangle specified will not be drawn
+ * to the screen. If x2 and y2 are not specified, the baseline alignment is the
+ * default, which means that the text will be drawn upwards from x and y.
+ *
+ * WEBGL: Only opentype/truetype fonts are supported. You must load a font using the
+ * loadFont() method (see the example above).
+ * stroke() currently has no effect in webgl mode.
+ *
+ * @method text
+ * @param {String|Object|Array|Number|Boolean} str the alphanumeric
+ * symbols to be displayed
+ * @param {Number} x x-coordinate of text
+ * @param {Number} y y-coordinate of text
+ * @param {Number} [x2] by default, the width of the text box,
+ * see rectMode() for more info
+ * @param {Number} [y2] by default, the height of the text box,
+ * see rectMode() for more info
+ * @chainable
+ * @example
+ *
+ *
+ * textSize(32);
+ * text('word', 10, 30);
+ * fill(0, 102, 153);
+ * text('word', 10, 60);
+ * fill(0, 102, 153, 51);
+ * text('word', 10, 90);
+ *
+ *
+ *
+ *
+ * let s = 'The quick brown fox jumped over the lazy dog.';
+ * fill(50);
+ * text(s, 10, 10, 70, 80); // Text wraps within text box
+ *
+ *
+ *
+ *
+ *
+ * let inconsolata;
+ * function preload() {
+ * inconsolata = loadFont('assets/inconsolata.otf');
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * textFont(inconsolata);
+ * textSize(width / 3);
+ * textAlign(CENTER, CENTER);
+ * }
+ * function draw() {
+ * background(0);
+ * let time = millis();
+ * rotateX(time / 1000);
+ * rotateZ(time / 1234);
+ * text('p5.js', 0, 0);
+ * }
+ *
+ *
+ *
+ * @alt
+ *'word' displayed 3 times going from black, blue to translucent blue
+ * The quick brown fox jumped over the lazy dog.
+ * the text 'p5.js' spinning in 3d
+ *
+ */
+ _main.default.prototype.text = function(str, x, y, maxWidth, maxHeight) {
+ var _this$_renderer;
+ _main.default._validateParameters('text', arguments);
+ return !(this._renderer._doFill || this._renderer._doStroke)
+ ? this
+ : (_this$_renderer = this._renderer).text.apply(_this$_renderer, arguments);
+ };
+
+ /**
+ * Sets the current font that will be drawn with the text() function.
+ *
+ * WEBGL: Only fonts loaded via loadFont() are supported.
+ *
+ * @method textFont
+ * @return {Object} the current font
+ *
+ * @example
+ *
+ *
+ * fill(0);
+ * textSize(12);
+ * textFont('Georgia');
+ * text('Georgia', 12, 30);
+ * textFont('Helvetica');
+ * text('Helvetica', 12, 60);
+ *
+ *
+ *
+ *
+ * let fontRegular, fontItalic, fontBold;
+ * function preload() {
+ * fontRegular = loadFont('assets/Regular.otf');
+ * fontItalic = loadFont('assets/Italic.ttf');
+ * fontBold = loadFont('assets/Bold.ttf');
+ * }
+ * function setup() {
+ * background(210);
+ * fill(0)
+ .strokeWeight(0)
+ .textSize(10);
+ * textFont(fontRegular);
+ * text('Font Style Normal', 10, 30);
+ * textFont(fontItalic);
+ * text('Font Style Italic', 10, 50);
+ * textFont(fontBold);
+ * text('Font Style Bold', 10, 70);
+ * }
+ *
+ *
+ *
+ * @alt
+ *words Font Style Normal displayed normally, Italic in italic and bold in bold
+ */
+ /**
+ * @method textFont
+ * @param {Object|String} font a font loaded via loadFont(), or a String
+ * representing a web safe font (a font
+ * that is generally available across all systems)
+ * @param {Number} [size] the font size to use
+ * @chainable
+ */
+ _main.default.prototype.textFont = function(theFont, theSize) {
+ _main.default._validateParameters('textFont', arguments);
+ if (arguments.length) {
+ if (!theFont) {
+ throw new Error('null font passed to textFont');
+ }
+
+ this._renderer._setProperty('_textFont', theFont);
+
+ if (theSize) {
+ this._renderer._setProperty('_textSize', theSize);
+ this._renderer._setProperty(
+ '_textLeading',
+ theSize * constants._DEFAULT_LEADMULT
+ );
+ }
+
+ return this._renderer._applyTextProperties();
+ }
+
+ return this._renderer._textFont;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 21,
+ '../core/error_helpers': 23,
+ '../core/main': 27,
+ 'opentype.js': 12
+ }
+ ],
+ 65: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj &&
+ typeof Symbol === 'function' &&
+ obj.constructor === Symbol &&
+ obj !== Symbol.prototype
+ ? 'symbol'
+ : typeof obj;
+ };
+ }
+ return _typeof(obj);
+ }
+
+ /**
+ * Base class for font handling
+ * @class p5.Font
+ * @param {p5} [pInst] pointer to p5 instance
+ */
+ _main.default.Font = function(p) {
+ this.parent = p;
+
+ this.cache = {};
+
+ /**
+ * Underlying opentype font implementation
+ * @property font
+ */
+ this.font = undefined;
+ };
+
+ /**
+ * Returns a tight bounding box for the given text string using this
+ * font (currently only supports single lines)
+ *
+ * @method textBounds
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Number} [fontSize] font size to use (optional) Default is 12.
+ * @param {Object} [options] opentype options (optional)
+ * opentype fonts contains alignment and baseline options.
+ * Default is 'LEFT' and 'alphabetic'
+ *
+ *
+ * @return {Object} a rectangle object with properties: x, y, w, h
+ *
+ * @example
+ *
+ *
+ * let font;
+ * let textString = 'Lorem ipsum dolor sit amet.';
+ * function preload() {
+ * font = loadFont('./assets/Regular.otf');
+ * }
+ * function setup() {
+ * background(210);
+ *
+ * let bbox = font.textBounds(textString, 10, 30, 12);
+ * fill(255);
+ * stroke(0);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ * fill(0);
+ * noStroke();
+ *
+ * textFont(font);
+ * textSize(12);
+ * text(textString, 10, 30);
+ * }
+ *
+ *
+ *
+ * @alt
+ *words Lorem ipsum dol go off canvas and contained by white bounding box
+ *
+ */
+ _main.default.Font.prototype.textBounds = function(str) {
+ var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+ var y = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+ var fontSize = arguments.length > 3 ? arguments[3] : undefined;
+ var opts = arguments.length > 4 ? arguments[4] : undefined;
+ // Check cache for existing bounds. Take into consideration the text alignment
+ // settings. Default alignment should match opentype's origin: left-aligned &
+ // alphabetic baseline.
+ var p = (opts && opts.renderer && opts.renderer._pInst) || this.parent;
+
+ var ctx = p._renderer.drawingContext;
+ var alignment = ctx.textAlign || constants.LEFT;
+ var baseline = ctx.textBaseline || constants.BASELINE;
+ var cacheResults = false;
+ var result;
+ var key;
+
+ fontSize = fontSize || p._renderer._textSize;
+
+ // NOTE: cache disabled for now pending further discussion of #3436
+ if (cacheResults) {
+ key = cacheKey('textBounds', str, x, y, fontSize, alignment, baseline);
+ result = this.cache[key];
+ }
+
+ if (!result) {
+ var minX;
+ var minY;
+ var maxX;
+ var maxY;
+ var pos;
+ var xCoords = [];
+ var yCoords = [];
+ var scale = this._scale(fontSize);
+
+ this.font.forEachGlyph(str, x, y, fontSize, opts, function(
+ glyph,
+ gX,
+ gY,
+ gFontSize
+ ) {
+ var gm = glyph.getMetrics();
+ xCoords.push(gX + gm.xMin * scale);
+ xCoords.push(gX + gm.xMax * scale);
+ yCoords.push(gY + -gm.yMin * scale);
+ yCoords.push(gY + -gm.yMax * scale);
+ });
+
+ minX = Math.min.apply(null, xCoords);
+ minY = Math.min.apply(null, yCoords);
+ maxX = Math.max.apply(null, xCoords);
+ maxY = Math.max.apply(null, yCoords);
+
+ result = {
+ x: minX,
+ y: minY,
+ h: maxY - minY,
+ w: maxX - minX,
+ advance: minX - x
+ };
+
+ // Bounds are now calculated, so shift the x & y to match alignment settings
+ pos = this._handleAlignment(
+ p._renderer,
+ str,
+ result.x,
+ result.y,
+ result.w + result.advance
+ );
+
+ result.x = pos.x;
+ result.y = pos.y;
+
+ if (cacheResults) {
+ this.cache[key] = result;
+ }
+ }
+
+ return result;
+ };
+
+ /**
+ * Computes an array of points following the path for specified text
+ *
+ * @method textToPoints
+ * @param {String} txt a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Number} fontSize font size to use (optional)
+ * @param {Object} [options] an (optional) object that can contain:
+ *
+ *
sampleFactor - the ratio of path-length to number of samples
+ * (default=.1); higher values yield more points and are therefore
+ * more precise
+ *
+ *
simplifyThreshold - if set to a non-zero value, collinear points will be
+ * be removed from the polygon; the value represents the threshold angle to use
+ * when determining whether two edges are collinear
+ *
+ * @return {Array} an array of points, each with x, y, alpha (the path angle)
+ * @example
+ *
+ *
+ * let font;
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * let points;
+ * let bounds;
+ * function setup() {
+ * createCanvas(100, 100);
+ * stroke(0);
+ * fill(255, 104, 204);
+ *
+ * points = font.textToPoints('p5', 0, 0, 10, {
+ * sampleFactor: 5,
+ * simplifyThreshold: 0
+ * });
+ * bounds = font.textBounds(' p5 ', 0, 0, 10);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * beginShape();
+ * translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);
+ * for (let i = 0; i < points.length; i++) {
+ * let p = points[i];
+ * vertex(
+ * p.x * width / bounds.w +
+ * sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,
+ * p.y * height / bounds.h
+ * );
+ * }
+ * endShape(CLOSE);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.Font.prototype.textToPoints = function(
+ txt,
+ x,
+ y,
+ fontSize,
+ options
+ ) {
+ var xoff = 0;
+ var result = [];
+ var glyphs = this._getGlyphs(txt);
+
+ function isSpace(i) {
+ return (
+ (glyphs[i].name && glyphs[i].name === 'space') ||
+ (txt.length === glyphs.length && txt[i] === ' ') ||
+ (glyphs[i].index && glyphs[i].index === 3)
+ );
+ }
+
+ fontSize = fontSize || this.parent._renderer._textSize;
+
+ for (var i = 0; i < glyphs.length; i++) {
+ if (!isSpace(i)) {
+ // fix to #1817, #2069
+
+ var gpath = glyphs[i].getPath(x, y, fontSize),
+ paths = splitPaths(gpath.commands);
+
+ for (var j = 0; j < paths.length; j++) {
+ var pts = pathToPoints(paths[j], options);
+
+ for (var k = 0; k < pts.length; k++) {
+ pts[k].x += xoff;
+ result.push(pts[k]);
+ }
+ }
+ }
+
+ xoff += glyphs[i].advanceWidth * this._scale(fontSize);
+ }
+
+ return result;
+ };
+
+ // ----------------------------- End API ------------------------------
+
+ /**
+ * Returns the set of opentype glyphs for the supplied string.
+ *
+ * Note that there is not a strict one-to-one mapping between characters
+ * and glyphs, so the list of returned glyphs can be larger or smaller
+ * than the length of the given string.
+ *
+ * @private
+ * @param {String} str the string to be converted
+ * @return {Array} the opentype glyphs
+ */
+ _main.default.Font.prototype._getGlyphs = function(str) {
+ return this.font.stringToGlyphs(str);
+ };
+
+ /**
+ * Returns an opentype path for the supplied string and position.
+ *
+ * @private
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional)
+ * @return {Object} the opentype path
+ */
+ _main.default.Font.prototype._getPath = function(line, x, y, options) {
+ var p = (options && options.renderer && options.renderer._pInst) || this.parent,
+ renderer = p._renderer,
+ pos = this._handleAlignment(renderer, line, x, y);
+
+ return this.font.getPath(line, pos.x, pos.y, renderer._textSize, options);
+ };
+
+ /*
+ * Creates an SVG-formatted path-data string
+ * (See http://www.w3.org/TR/SVG/paths.html#PathData)
+ * from the given opentype path or string/position
+ *
+ * @param {Object} path an opentype path, OR the following:
+ *
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional), set options.decimals
+ * to set the decimal precision of the path-data
+ *
+ * @return {Object} this p5.Font object
+ */
+ _main.default.Font.prototype._getPathData = function(line, x, y, options) {
+ var decimals = 3;
+
+ // create path from string/position
+ if (typeof line === 'string' && arguments.length > 2) {
+ line = this._getPath(line, x, y, options);
+ } else if (_typeof(x) === 'object') {
+ // handle options specified in 2nd arg
+ options = x;
+ }
+
+ // handle svg arguments
+ if (options && typeof options.decimals === 'number') {
+ decimals = options.decimals;
+ }
+
+ return line.toPathData(decimals);
+ };
+
+ /*
+ * Creates an SVG element, as a string,
+ * from the given opentype path or string/position
+ *
+ * @param {Object} path an opentype path, OR the following:
+ *
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional), set options.decimals
+ * to set the decimal precision of the path-data in the element,
+ * options.fill to set the fill color for the element,
+ * options.stroke to set the stroke color for the element,
+ * options.strokeWidth to set the strokeWidth for the element.
+ *
+ * @return {Object} this p5.Font object
+ */
+ _main.default.Font.prototype._getSVG = function(line, x, y, options) {
+ var decimals = 3;
+
+ // create path from string/position
+ if (typeof line === 'string' && arguments.length > 2) {
+ line = this._getPath(line, x, y, options);
+ } else if (_typeof(x) === 'object') {
+ // handle options specified in 2nd arg
+ options = x;
+ }
+
+ // handle svg arguments
+ if (options) {
+ if (typeof options.decimals === 'number') {
+ decimals = options.decimals;
+ }
+ if (typeof options.strokeWidth === 'number') {
+ line.strokeWidth = options.strokeWidth;
+ }
+ if (typeof options.fill !== 'undefined') {
+ line.fill = options.fill;
+ }
+ if (typeof options.stroke !== 'undefined') {
+ line.stroke = options.stroke;
+ }
+ }
+
+ return line.toSVG(decimals);
+ };
+
+ /*
+ * Renders an opentype path or string/position
+ * to the current graphics context
+ *
+ * @param {Object} path an opentype path, OR the following:
+ *
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional)
+ *
+ * @return {p5.Font} this p5.Font object
+ */
+ _main.default.Font.prototype._renderPath = function(line, x, y, options) {
+ var pdata;
+ var pg = (options && options.renderer) || this.parent._renderer;
+ var ctx = pg.drawingContext;
+
+ if (_typeof(line) === 'object' && line.commands) {
+ pdata = line.commands;
+ } else {
+ //pos = handleAlignment(p, ctx, line, x, y);
+ pdata = this._getPath(line, x, y, options).commands;
+ }
+
+ ctx.beginPath();
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = pdata[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var cmd = _step.value;
+ if (cmd.type === 'M') {
+ ctx.moveTo(cmd.x, cmd.y);
+ } else if (cmd.type === 'L') {
+ ctx.lineTo(cmd.x, cmd.y);
+ } else if (cmd.type === 'C') {
+ ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+ } else if (cmd.type === 'Q') {
+ ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+ } else if (cmd.type === 'Z') {
+ ctx.closePath();
+ }
+ }
+
+ // only draw stroke if manually set by user
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ if (pg._doStroke && pg._strokeSet) {
+ ctx.stroke();
+ }
+
+ if (pg._doFill) {
+ // if fill hasn't been set by user, use default-text-fill
+ if (!pg._fillSet) {
+ pg._setFill(constants._DEFAULT_TEXT_FILL);
+ }
+ ctx.fill();
+ }
+
+ return this;
+ };
+
+ _main.default.Font.prototype._textWidth = function(str, fontSize) {
+ return this.font.getAdvanceWidth(str, fontSize);
+ };
+
+ _main.default.Font.prototype._textAscent = function(fontSize) {
+ return this.font.ascender * this._scale(fontSize);
+ };
+
+ _main.default.Font.prototype._textDescent = function(fontSize) {
+ return -this.font.descender * this._scale(fontSize);
+ };
+
+ _main.default.Font.prototype._scale = function(fontSize) {
+ return 1 / this.font.unitsPerEm * (fontSize || this.parent._renderer._textSize);
+ };
+
+ _main.default.Font.prototype._handleAlignment = function(
+ renderer,
+ line,
+ x,
+ y,
+ textWidth
+ ) {
+ var fontSize = renderer._textSize;
+
+ if (typeof textWidth === 'undefined') {
+ textWidth = this._textWidth(line, fontSize);
+ }
+
+ switch (renderer._textAlign) {
+ case constants.CENTER:
+ x -= textWidth / 2;
+ break;
+ case constants.RIGHT:
+ x -= textWidth;
+ break;
+ }
+
+ switch (renderer._textBaseline) {
+ case constants.TOP:
+ y += this._textAscent(fontSize);
+ break;
+ case constants.CENTER:
+ y += this._textAscent(fontSize) / 2;
+ break;
+ case constants.BOTTOM:
+ y -= this._textDescent(fontSize);
+ break;
+ }
+
+ return { x: x, y: y };
+ };
+
+ // path-utils
+
+ function pathToPoints(cmds, options) {
+ var opts = parseOpts(options, {
+ sampleFactor: 0.1,
+ simplifyThreshold: 0
+ });
+
+ var // total-length
+ len = pointAtLength(cmds, 0, 1),
+ t = len / (len * opts.sampleFactor),
+ pts = [];
+
+ for (var i = 0; i < len; i += t) {
+ pts.push(pointAtLength(cmds, i));
+ }
+
+ if (opts.simplifyThreshold) {
+ simplify(pts, opts.simplifyThreshold);
+ }
+
+ return pts;
+ }
+
+ function simplify(pts) {
+ var angle =
+ arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+ var num = 0;
+ for (var i = pts.length - 1; pts.length > 3 && i >= 0; --i) {
+ if (collinear(at(pts, i - 1), at(pts, i), at(pts, i + 1), angle)) {
+ // Remove the middle point
+ pts.splice(i % pts.length, 1);
+ num++;
+ }
+ }
+ return num;
+ }
+
+ function splitPaths(cmds) {
+ var paths = [];
+ var current;
+ for (var i = 0; i < cmds.length; i++) {
+ if (cmds[i].type === 'M') {
+ if (current) {
+ paths.push(current);
+ }
+ current = [];
+ }
+ current.push(cmdToArr(cmds[i]));
+ }
+ paths.push(current);
+
+ return paths;
+ }
+
+ function cmdToArr(cmd) {
+ var arr = [cmd.type];
+ if (cmd.type === 'M' || cmd.type === 'L') {
+ // moveto or lineto
+ arr.push(cmd.x, cmd.y);
+ } else if (cmd.type === 'C') {
+ arr.push(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+ } else if (cmd.type === 'Q') {
+ arr.push(cmd.x1, cmd.y1, cmd.x, cmd.y);
+ }
+ // else if (cmd.type === 'Z') { /* no-op */ }
+ return arr;
+ }
+
+ function parseOpts(options, defaults) {
+ if (_typeof(options) !== 'object') {
+ options = defaults;
+ } else {
+ for (var key in defaults) {
+ if (typeof options[key] === 'undefined') {
+ options[key] = defaults[key];
+ }
+ }
+ }
+ return options;
+ }
+
+ //////////////////////// Helpers ////////////////////////////
+
+ function at(v, i) {
+ var s = v.length;
+ return v[i < 0 ? i % s + s : i % s];
+ }
+
+ function collinear(a, b, c, thresholdAngle) {
+ if (!thresholdAngle) {
+ return areaTriangle(a, b, c) === 0;
+ }
+
+ if (typeof collinear.tmpPoint1 === 'undefined') {
+ collinear.tmpPoint1 = [];
+ collinear.tmpPoint2 = [];
+ }
+
+ var ab = collinear.tmpPoint1,
+ bc = collinear.tmpPoint2;
+ ab.x = b.x - a.x;
+ ab.y = b.y - a.y;
+ bc.x = c.x - b.x;
+ bc.y = c.y - b.y;
+
+ var dot = ab.x * bc.x + ab.y * bc.y,
+ magA = Math.sqrt(ab.x * ab.x + ab.y * ab.y),
+ magB = Math.sqrt(bc.x * bc.x + bc.y * bc.y),
+ angle = Math.acos(dot / (magA * magB));
+
+ return angle < thresholdAngle;
+ }
+
+ function areaTriangle(a, b, c) {
+ return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
+ }
+
+ // Portions of below code copyright 2008 Dmitry Baranovskiy (via MIT license)
+
+ function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+ var t1 = 1 - t;
+ var t13 = Math.pow(t1, 3);
+ var t12 = Math.pow(t1, 2);
+ var t2 = t * t;
+ var t3 = t2 * t;
+ var x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x + t3 * p2x;
+ var y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y + t3 * p2y;
+ var mx = p1x + 2 * t * (c1x - p1x) + t2 * (c2x - 2 * c1x + p1x);
+ var my = p1y + 2 * t * (c1y - p1y) + t2 * (c2y - 2 * c1y + p1y);
+ var nx = c1x + 2 * t * (c2x - c1x) + t2 * (p2x - 2 * c2x + c1x);
+ var ny = c1y + 2 * t * (c2y - c1y) + t2 * (p2y - 2 * c2y + c1y);
+ var ax = t1 * p1x + t * c1x;
+ var ay = t1 * p1y + t * c1y;
+ var cx = t1 * c2x + t * p2x;
+ var cy = t1 * c2y + t * p2y;
+ var alpha = 90 - Math.atan2(mx - nx, my - ny) * 180 / Math.PI;
+
+ if (mx > nx || my < ny) {
+ alpha += 180;
+ }
+
+ return {
+ x: x,
+ y: y,
+ m: { x: mx, y: my },
+ n: { x: nx, y: ny },
+ start: { x: ax, y: ay },
+ end: { x: cx, y: cy },
+ alpha: alpha
+ };
+ }
+
+ function getPointAtSegmentLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length) {
+ return length == null
+ ? bezlen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y)
+ : findDotsAtSegment(
+ p1x,
+ p1y,
+ c1x,
+ c1y,
+ c2x,
+ c2y,
+ p2x,
+ p2y,
+ getTatLen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length)
+ );
+ }
+
+ function pointAtLength(path, length, istotal) {
+ path = path2curve(path);
+ var x;
+ var y;
+ var p;
+ var l;
+ var sp = '';
+ var subpaths = {};
+ var point;
+ var len = 0;
+ for (var i = 0, ii = path.length; i < ii; i++) {
+ p = path[i];
+ if (p[0] === 'M') {
+ x = +p[1];
+ y = +p[2];
+ } else {
+ l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
+ if (len + l > length) {
+ if (!istotal) {
+ point = getPointAtSegmentLength(
+ x,
+ y,
+ p[1],
+ p[2],
+ p[3],
+ p[4],
+ p[5],
+ p[6],
+ length - len
+ );
+
+ return { x: point.x, y: point.y, alpha: point.alpha };
+ }
+ }
+ len += l;
+ x = +p[5];
+ y = +p[6];
+ }
+ sp += p.shift() + p;
+ }
+ subpaths.end = sp;
+
+ point = istotal
+ ? len
+ : findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
+
+ if (point.alpha) {
+ point = { x: point.x, y: point.y, alpha: point.alpha };
+ }
+
+ return point;
+ }
+
+ function pathToAbsolute(pathArray) {
+ var res = [],
+ x = 0,
+ y = 0,
+ mx = 0,
+ my = 0,
+ start = 0;
+ if (!pathArray) {
+ // console.warn("Unexpected state: undefined pathArray"); // shouldn't happen
+ return res;
+ }
+ if (pathArray[0][0] === 'M') {
+ x = +pathArray[0][1];
+ y = +pathArray[0][2];
+ mx = x;
+ my = y;
+ start++;
+ res[0] = ['M', x, y];
+ }
+
+ var dots;
+
+ var crz =
+ pathArray.length === 3 &&
+ pathArray[0][0] === 'M' &&
+ pathArray[1][0].toUpperCase() === 'R' &&
+ pathArray[2][0].toUpperCase() === 'Z';
+
+ for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) {
+ res.push((r = []));
+ pa = pathArray[i];
+ if (pa[0] !== String.prototype.toUpperCase.call(pa[0])) {
+ r[0] = String.prototype.toUpperCase.call(pa[0]);
+ switch (r[0]) {
+ case 'A':
+ r[1] = pa[1];
+ r[2] = pa[2];
+ r[3] = pa[3];
+ r[4] = pa[4];
+ r[5] = pa[5];
+ r[6] = +(pa[6] + x);
+ r[7] = +(pa[7] + y);
+ break;
+ case 'V':
+ r[1] = +pa[1] + y;
+ break;
+ case 'H':
+ r[1] = +pa[1] + x;
+ break;
+ case 'R':
+ dots = [x, y].concat(pa.slice(1));
+ for (var j = 2, jj = dots.length; j < jj; j++) {
+ dots[j] = +dots[j] + x;
+ dots[++j] = +dots[j] + y;
+ }
+ res.pop();
+ res = res.concat(catmullRom2bezier(dots, crz));
+ break;
+ case 'M':
+ mx = +pa[1] + x;
+ my = +pa[2] + y;
+ break;
+ default:
+ for (var _j = 1, _jj = pa.length; _j < _jj; _j++) {
+ r[_j] = +pa[_j] + (_j % 2 ? x : y);
+ }
+ }
+ } else if (pa[0] === 'R') {
+ dots = [x, y].concat(pa.slice(1));
+ res.pop();
+ res = res.concat(catmullRom2bezier(dots, crz));
+ r = ['R'].concat(pa.slice(-2));
+ } else {
+ for (var k = 0, kk = pa.length; k < kk; k++) {
+ r[k] = pa[k];
+ }
+ }
+ switch (r[0]) {
+ case 'Z':
+ x = mx;
+ y = my;
+ break;
+ case 'H':
+ x = r[1];
+ break;
+ case 'V':
+ y = r[1];
+ break;
+ case 'M':
+ mx = r[r.length - 2];
+ my = r[r.length - 1];
+ break;
+ default:
+ x = r[r.length - 2];
+ y = r[r.length - 1];
+ }
+ }
+ return res;
+ }
+
+ function path2curve(path, path2) {
+ var p = pathToAbsolute(path),
+ p2 = path2 && pathToAbsolute(path2);
+ var attrs = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null };
+ var attrs2 = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null };
+ var pcoms1 = []; // path commands of original path p
+ var pcoms2 = []; // path commands of original path p2
+ var ii;
+
+ var processPath = function processPath(path, d, pcom) {
+ var nx;
+ var ny;
+ var tq = { T: 1, Q: 1 };
+ if (!path) {
+ return ['C', d.x, d.y, d.x, d.y, d.x, d.y];
+ }
+ if (!(path[0] in tq)) {
+ d.qx = d.qy = null;
+ }
+ switch (path[0]) {
+ case 'M':
+ d.X = path[1];
+ d.Y = path[2];
+ break;
+ case 'A':
+ path = ['C'].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1))));
+ break;
+ case 'S':
+ if (pcom === 'C' || pcom === 'S') {
+ nx = d.x * 2 - d.bx;
+ ny = d.y * 2 - d.by;
+ } else {
+ nx = d.x;
+ ny = d.y;
+ }
+ path = ['C', nx, ny].concat(path.slice(1));
+ break;
+ case 'T':
+ if (pcom === 'Q' || pcom === 'T') {
+ d.qx = d.x * 2 - d.qx;
+ d.qy = d.y * 2 - d.qy;
+ } else {
+ d.qx = d.x;
+ d.qy = d.y;
+ }
+ path = ['C'].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
+ break;
+ case 'Q':
+ d.qx = path[1];
+ d.qy = path[2];
+ path = ['C'].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
+
+ break;
+ case 'L':
+ path = ['C'].concat(l2c(d.x, d.y, path[1], path[2]));
+ break;
+ case 'H':
+ path = ['C'].concat(l2c(d.x, d.y, path[1], d.y));
+ break;
+ case 'V':
+ path = ['C'].concat(l2c(d.x, d.y, d.x, path[1]));
+ break;
+ case 'Z':
+ path = ['C'].concat(l2c(d.x, d.y, d.X, d.Y));
+ break;
+ }
+
+ return path;
+ },
+ fixArc = function fixArc(pp, i) {
+ if (pp[i].length > 7) {
+ pp[i].shift();
+ var pi = pp[i];
+ while (pi.length) {
+ pcoms1[i] = 'A';
+ if (p2) {
+ pcoms2[i] = 'A';
+ }
+ pp.splice(i++, 0, ['C'].concat(pi.splice(0, 6)));
+ }
+ pp.splice(i, 1);
+ ii = Math.max(p.length, (p2 && p2.length) || 0);
+ }
+ },
+ fixM = function fixM(path1, path2, a1, a2, i) {
+ if (path1 && path2 && path1[i][0] === 'M' && path2[i][0] !== 'M') {
+ path2.splice(i, 0, ['M', a2.x, a2.y]);
+ a1.bx = 0;
+ a1.by = 0;
+ a1.x = path1[i][1];
+ a1.y = path1[i][2];
+ ii = Math.max(p.length, (p2 && p2.length) || 0);
+ }
+ };
+
+ var pfirst = ''; // temporary holder for original path command
+ var pcom = ''; // holder for previous path command of original path
+
+ ii = Math.max(p.length, (p2 && p2.length) || 0);
+ for (var i = 0; i < ii; i++) {
+ if (p[i]) {
+ pfirst = p[i][0];
+ } // save current path command
+
+ if (pfirst !== 'C') {
+ pcoms1[i] = pfirst; // Save current path command
+ if (i) {
+ pcom = pcoms1[i - 1];
+ } // Get previous path command pcom
+ }
+ p[i] = processPath(p[i], attrs, pcom);
+
+ if (pcoms1[i] !== 'A' && pfirst === 'C') {
+ pcoms1[i] = 'C';
+ }
+
+ fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
+
+ if (p2) {
+ // the same procedures is done to p2
+ if (p2[i]) {
+ pfirst = p2[i][0];
+ }
+ if (pfirst !== 'C') {
+ pcoms2[i] = pfirst;
+ if (i) {
+ pcom = pcoms2[i - 1];
+ }
+ }
+ p2[i] = processPath(p2[i], attrs2, pcom);
+
+ if (pcoms2[i] !== 'A' && pfirst === 'C') {
+ pcoms2[i] = 'C';
+ }
+
+ fixArc(p2, i);
+ }
+ fixM(p, p2, attrs, attrs2, i);
+ fixM(p2, p, attrs2, attrs, i);
+ var seg = p[i],
+ seg2 = p2 && p2[i],
+ seglen = seg.length,
+ seg2len = p2 && seg2.length;
+ attrs.x = seg[seglen - 2];
+ attrs.y = seg[seglen - 1];
+ attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
+ attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
+ attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
+ attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
+ attrs2.x = p2 && seg2[seg2len - 2];
+ attrs2.y = p2 && seg2[seg2len - 1];
+ }
+
+ return p2 ? [p, p2] : p;
+ }
+
+ function a2c(x1, y1, rx, ry, angle, lac, sweep_flag, x2, y2, recursive) {
+ // for more information of where this Math came from visit:
+ // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
+ var PI = Math.PI;
+
+ var _120 = PI * 120 / 180;
+ var f1;
+ var f2;
+ var cx;
+ var cy;
+ var rad = PI / 180 * (+angle || 0);
+ var res = [];
+ var xy;
+
+ var rotate = function rotate(x, y, rad) {
+ var X = x * Math.cos(rad) - y * Math.sin(rad),
+ Y = x * Math.sin(rad) + y * Math.cos(rad);
+ return { x: X, y: Y };
+ };
+
+ if (!recursive) {
+ xy = rotate(x1, y1, -rad);
+ x1 = xy.x;
+ y1 = xy.y;
+ xy = rotate(x2, y2, -rad);
+ x2 = xy.x;
+ y2 = xy.y;
+ var x = (x1 - x2) / 2;
+ var y = (y1 - y2) / 2;
+ var h = x * x / (rx * rx) + y * y / (ry * ry);
+ if (h > 1) {
+ h = Math.sqrt(h);
+ rx = h * rx;
+ ry = h * ry;
+ }
+ var rx2 = rx * rx,
+ ry2 = ry * ry;
+ var k =
+ (lac === sweep_flag ? -1 : 1) *
+ Math.sqrt(
+ Math.abs(
+ (rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)
+ )
+ );
+
+ cx = k * rx * y / ry + (x1 + x2) / 2;
+ cy = k * -ry * x / rx + (y1 + y2) / 2;
+ f1 = Math.asin(((y1 - cy) / ry).toFixed(9));
+ f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
+
+ f1 = x1 < cx ? PI - f1 : f1;
+ f2 = x2 < cx ? PI - f2 : f2;
+
+ if (f1 < 0) {
+ f1 = PI * 2 + f1;
+ }
+ if (f2 < 0) {
+ f2 = PI * 2 + f2;
+ }
+
+ if (sweep_flag && f1 > f2) {
+ f1 = f1 - PI * 2;
+ }
+ if (!sweep_flag && f2 > f1) {
+ f2 = f2 - PI * 2;
+ }
+ } else {
+ f1 = recursive[0];
+ f2 = recursive[1];
+ cx = recursive[2];
+ cy = recursive[3];
+ }
+ var df = f2 - f1;
+ if (Math.abs(df) > _120) {
+ var f2old = f2,
+ x2old = x2,
+ y2old = y2;
+ f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
+ x2 = cx + rx * Math.cos(f2);
+ y2 = cy + ry * Math.sin(f2);
+ res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [
+ f2,
+ f2old,
+ cx,
+ cy
+ ]);
+ }
+ df = f2 - f1;
+ var c1 = Math.cos(f1),
+ s1 = Math.sin(f1),
+ c2 = Math.cos(f2),
+ s2 = Math.sin(f2),
+ t = Math.tan(df / 4),
+ hx = 4 / 3 * rx * t,
+ hy = 4 / 3 * ry * t,
+ m1 = [x1, y1],
+ m2 = [x1 + hx * s1, y1 - hy * c1],
+ m3 = [x2 + hx * s2, y2 - hy * c2],
+ m4 = [x2, y2];
+ m2[0] = 2 * m1[0] - m2[0];
+ m2[1] = 2 * m1[1] - m2[1];
+ if (recursive) {
+ return [m2, m3, m4].concat(res);
+ } else {
+ res = [m2, m3, m4]
+ .concat(res)
+ .join()
+ .split(',');
+ var newres = [];
+ for (var i = 0, ii = res.length; i < ii; i++) {
+ newres[i] =
+ i % 2
+ ? rotate(res[i - 1], res[i], rad).y
+ : rotate(res[i], res[i + 1], rad).x;
+ }
+ return newres;
+ }
+ }
+
+ // http://schepers.cc/getting-to-the-point
+ function catmullRom2bezier(crp, z) {
+ var d = [];
+ for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
+ var p = [
+ {
+ x: +crp[i - 2],
+ y: +crp[i - 1]
+ },
+
+ {
+ x: +crp[i],
+ y: +crp[i + 1]
+ },
+
+ {
+ x: +crp[i + 2],
+ y: +crp[i + 3]
+ },
+
+ {
+ x: +crp[i + 4],
+ y: +crp[i + 5]
+ }
+ ];
+
+ if (z) {
+ if (!i) {
+ p[0] = {
+ x: +crp[iLen - 2],
+ y: +crp[iLen - 1]
+ };
+ } else if (iLen - 4 === i) {
+ p[3] = {
+ x: +crp[0],
+ y: +crp[1]
+ };
+ } else if (iLen - 2 === i) {
+ p[2] = {
+ x: +crp[0],
+ y: +crp[1]
+ };
+
+ p[3] = {
+ x: +crp[2],
+ y: +crp[3]
+ };
+ }
+ } else {
+ if (iLen - 4 === i) {
+ p[3] = p[2];
+ } else if (!i) {
+ p[0] = {
+ x: +crp[i],
+ y: +crp[i + 1]
+ };
+ }
+ }
+ d.push([
+ 'C',
+ (-p[0].x + 6 * p[1].x + p[2].x) / 6,
+ (-p[0].y + 6 * p[1].y + p[2].y) / 6,
+ (p[1].x + 6 * p[2].x - p[3].x) / 6,
+ (p[1].y + 6 * p[2].y - p[3].y) / 6,
+ p[2].x,
+ p[2].y
+ ]);
+ }
+
+ return d;
+ }
+
+ function l2c(x1, y1, x2, y2) {
+ return [x1, y1, x2, y2, x2, y2];
+ }
+
+ function q2c(x1, y1, ax, ay, x2, y2) {
+ var _13 = 1 / 3,
+ _23 = 2 / 3;
+ return [
+ _13 * x1 + _23 * ax,
+ _13 * y1 + _23 * ay,
+ _13 * x2 + _23 * ax,
+ _13 * y2 + _23 * ay,
+ x2,
+ y2
+ ];
+ }
+
+ function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {
+ if (z == null) {
+ z = 1;
+ }
+ z = z > 1 ? 1 : z < 0 ? 0 : z;
+ var z2 = z / 2;
+ var n = 12;
+ var Tvalues = [
+ -0.1252,
+ 0.1252,
+ -0.3678,
+ 0.3678,
+ -0.5873,
+ 0.5873,
+ -0.7699,
+ 0.7699,
+ -0.9041,
+ 0.9041,
+ -0.9816,
+ 0.9816
+ ];
+
+ var sum = 0;
+ var Cvalues = [
+ 0.2491,
+ 0.2491,
+ 0.2335,
+ 0.2335,
+ 0.2032,
+ 0.2032,
+ 0.1601,
+ 0.1601,
+ 0.1069,
+ 0.1069,
+ 0.0472,
+ 0.0472
+ ];
+
+ for (var i = 0; i < n; i++) {
+ var ct = z2 * Tvalues[i] + z2,
+ xbase = base3(ct, x1, x2, x3, x4),
+ ybase = base3(ct, y1, y2, y3, y4),
+ comb = xbase * xbase + ybase * ybase;
+ sum += Cvalues[i] * Math.sqrt(comb);
+ }
+ return z2 * sum;
+ }
+
+ function getTatLen(x1, y1, x2, y2, x3, y3, x4, y4, ll) {
+ if (ll < 0 || bezlen(x1, y1, x2, y2, x3, y3, x4, y4) < ll) {
+ return;
+ }
+ var t = 1;
+ var step = t / 2;
+ var t2 = t - step;
+ var l;
+ var e = 0.01;
+ l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
+ while (Math.abs(l - ll) > e) {
+ step /= 2;
+ t2 += (l < ll ? 1 : -1) * step;
+ l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
+ }
+ return t2;
+ }
+
+ function base3(t, p1, p2, p3, p4) {
+ var t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
+ t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
+ return t * t2 - 3 * p1 + 3 * p2;
+ }
+
+ function cacheKey() {
+ var hash = '';
+ for (var i = arguments.length - 1; i >= 0; --i) {
+ hash += '\uFF1F'.concat(
+ i < 0 || arguments.length <= i ? undefined : arguments[i]
+ );
+ }
+ return hash;
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27 }
+ ],
+ 66: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Data
+ * @submodule Array Functions
+ * @for p5
+ * @requires core
+ */ /**
+ * Adds a value to the end of an array. Extends the length of
+ * the array by one. Maps to Array.push().
+ *
+ * @method append
+ * @deprecated Use array.push(value) instead.
+ * @param {Array} array Array to append
+ * @param {any} value to be added to the Array
+ * @return {Array} the array that was appended to
+ * @example
+ *
+ * function setup() {
+ * let myArray = ['Mango', 'Apple', 'Papaya'];
+ * print(myArray); // ['Mango', 'Apple', 'Papaya']
+ *
+ * append(myArray, 'Peach');
+ * print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+ * }
+ *
+ */ _main.default.prototype.append = function(array, value) {
+ array.push(value);
+ return array;
+ };
+
+ /**
+ * Copies an array (or part of an array) to another array. The src array is
+ * copied to the dst array, beginning at the position specified by
+ * srcPosition and into the position specified by dstPosition. The number of
+ * elements to copy is determined by length. Note that copying values
+ * overwrites existing values in the destination array. To append values
+ * instead of overwriting them, use concat().
+ *
+ * The simplified version with only two arguments, arrayCopy(src, dst),
+ * copies an entire array to another of the same size. It is equivalent to
+ * arrayCopy(src, 0, dst, 0, src.length).
+ *
+ * Using this function is far more efficient for copying array data than
+ * iterating through a for() loop and copying each element individually.
+ *
+ * @method arrayCopy
+ * @deprecated
+ * @param {Array} src the source Array
+ * @param {Integer} srcPosition starting position in the source Array
+ * @param {Array} dst the destination Array
+ * @param {Integer} dstPosition starting position in the destination Array
+ * @param {Integer} length number of Array elements to be copied
+ *
+ * @example
+ *
+ * let src = ['A', 'B', 'C'];
+ * let dst = [1, 2, 3];
+ * let srcPosition = 1;
+ * let dstPosition = 0;
+ * let length = 2;
+ *
+ * print(src); // ['A', 'B', 'C']
+ * print(dst); // [ 1 , 2 , 3 ]
+ *
+ * arrayCopy(src, srcPosition, dst, dstPosition, length);
+ * print(dst); // ['B', 'C', 3]
+ *
+ */
+ /**
+ * @method arrayCopy
+ * @deprecated Use arr1.copyWithin(arr2) instead.
+ * @param {Array} src
+ * @param {Array} dst
+ * @param {Integer} [length]
+ */
+ _main.default.prototype.arrayCopy = function(
+ src,
+ srcPosition,
+ dst,
+ dstPosition,
+ length
+ ) {
+ // the index to begin splicing from dst array
+ var start;
+ var end;
+
+ if (typeof length !== 'undefined') {
+ end = Math.min(length, src.length);
+ start = dstPosition;
+ src = src.slice(srcPosition, end + srcPosition);
+ } else {
+ if (typeof dst !== 'undefined') {
+ // src, dst, length
+ // rename so we don't get confused
+ end = dst;
+ end = Math.min(end, src.length);
+ } else {
+ // src, dst
+ end = src.length;
+ }
+
+ start = 0;
+ // rename so we don't get confused
+ dst = srcPosition;
+ src = src.slice(0, end);
+ }
+
+ // Since we are not returning the array and JavaScript is pass by reference
+ // we must modify the actual values of the array
+ // instead of reassigning arrays
+ Array.prototype.splice.apply(dst, [start, end].concat(src));
+ };
+
+ /**
+ * Concatenates two arrays, maps to Array.concat(). Does not modify the
+ * input arrays.
+ *
+ * @method concat
+ * @deprecated Use arr1.concat(arr2) instead.
+ * @param {Array} a first Array to concatenate
+ * @param {Array} b second Array to concatenate
+ * @return {Array} concatenated array
+ *
+ * @example
+ *
+ * function setup() {
+ * let arr1 = ['A', 'B', 'C'];
+ * let arr2 = [1, 2, 3];
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1,2,3]
+ *
+ * let arr3 = concat(arr1, arr2);
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1, 2, 3]
+ * print(arr3); // ['A','B','C', 1, 2, 3]
+ * }
+ *
+ */
+ _main.default.prototype.concat = function(list0, list1) {
+ return list0.concat(list1);
+ };
+
+ /**
+ * Reverses the order of an array, maps to Array.reverse()
+ *
+ * @method reverse
+ * @deprecated Use array.reverse() instead.
+ * @param {Array} list Array to reverse
+ * @return {Array} the reversed list
+ * @example
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A','B','C']
+ *
+ * reverse(myArray);
+ * print(myArray); // ['C','B','A']
+ * }
+ *
+ */
+ _main.default.prototype.reverse = function(list) {
+ return list.reverse();
+ };
+
+ /**
+ * Decreases an array by one element and returns the shortened array,
+ * maps to Array.pop().
+ *
+ * @method shorten
+ * @deprecated Use array.pop() instead.
+ * @param {Array} list Array to shorten
+ * @return {Array} shortened Array
+ * @example
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A', 'B', 'C']
+ * let newArray = shorten(myArray);
+ * print(myArray); // ['A','B','C']
+ * print(newArray); // ['A','B']
+ * }
+ *
+ */
+ _main.default.prototype.shorten = function(list) {
+ list.pop();
+ return list;
+ };
+
+ /**
+ * Randomizes the order of the elements of an array. Implements
+ *
+ * Fisher-Yates Shuffle Algorithm.
+ *
+ * @method shuffle
+ * @param {Array} array Array to shuffle
+ * @param {Boolean} [bool] modify passed array
+ * @return {Array} shuffled Array
+ * @example
+ *
+ * function setup() {
+ * let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
+ * print(regularArr);
+ * shuffle(regularArr, true); // force modifications to passed array
+ * print(regularArr);
+ *
+ * // By default shuffle() returns a shuffled cloned array:
+ * let newArr = shuffle(regularArr);
+ * print(regularArr);
+ * print(newArr);
+ * }
+ *
+ */
+ _main.default.prototype.shuffle = function(arr, bool) {
+ var isView = ArrayBuffer && ArrayBuffer.isView && ArrayBuffer.isView(arr);
+ arr = bool || isView ? arr : arr.slice();
+
+ var rnd,
+ tmp,
+ idx = arr.length;
+ while (idx > 1) {
+ rnd = (Math.random() * idx) | 0;
+
+ tmp = arr[--idx];
+ arr[idx] = arr[rnd];
+ arr[rnd] = tmp;
+ }
+
+ return arr;
+ };
+
+ /**
+ * Sorts an array of numbers from smallest to largest, or puts an array of
+ * words in alphabetical order. The original array is not modified; a
+ * re-ordered array is returned. The count parameter states the number of
+ * elements to sort. For example, if there are 12 elements in an array and
+ * count is set to 5, only the first 5 elements in the array will be sorted.
+ *
+ * @method sort
+ * @deprecated Use array.sort() instead.
+ * @param {Array} list Array to sort
+ * @param {Integer} [count] number of elements to sort, starting from 0
+ * @return {Array} the sorted list
+ *
+ * @example
+ *
+ * function setup() {
+ * let words = ['banana', 'apple', 'pear', 'lime'];
+ * print(words); // ['banana', 'apple', 'pear', 'lime']
+ * let count = 4; // length of array
+ *
+ * words = sort(words, count);
+ * print(words); // ['apple', 'banana', 'lime', 'pear']
+ * }
+ *
+ *
+ * function setup() {
+ * let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+ * print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+ * let count = 5; // Less than the length of the array
+ *
+ * numbers = sort(numbers, count);
+ * print(numbers); // [1,2,5,6,14,9,8,12]
+ * }
+ *
+ */
+ _main.default.prototype.sort = function(list, count) {
+ var arr = count ? list.slice(0, Math.min(count, list.length)) : list;
+ var rest = count ? list.slice(Math.min(count, list.length)) : [];
+ if (typeof arr[0] === 'string') {
+ arr = arr.sort();
+ } else {
+ arr = arr.sort(function(a, b) {
+ return a - b;
+ });
+ }
+ return arr.concat(rest);
+ };
+
+ /**
+ * Inserts a value or an array of values into an existing array. The first
+ * parameter specifies the initial array to be modified, and the second
+ * parameter defines the data to be inserted. The third parameter is an index
+ * value which specifies the array position from which to insert data.
+ * (Remember that array index numbering starts at zero, so the first position
+ * is 0, the second position is 1, and so on.)
+ *
+ * @method splice
+ * @deprecated Use array.splice() instead.
+ * @param {Array} list Array to splice into
+ * @param {any} value value to be spliced in
+ * @param {Integer} position in the array from which to insert data
+ * @return {Array} the list
+ *
+ * @example
+ *
+ * function setup() {
+ * let myArray = [0, 1, 2, 3, 4];
+ * let insArray = ['A', 'B', 'C'];
+ * print(myArray); // [0, 1, 2, 3, 4]
+ * print(insArray); // ['A','B','C']
+ *
+ * splice(myArray, insArray, 3);
+ * print(myArray); // [0,1,2,'A','B','C',3,4]
+ * }
+ *
+ */
+ _main.default.prototype.splice = function(list, value, index) {
+ // note that splice returns spliced elements and not an array
+ Array.prototype.splice.apply(list, [index, 0].concat(value));
+
+ return list;
+ };
+
+ /**
+ * Extracts an array of elements from an existing array. The list parameter
+ * defines the array from which the elements will be copied, and the start
+ * and count parameters specify which elements to extract. If no count is
+ * given, elements will be extracted from the start to the end of the array.
+ * When specifying the start, remember that the first array element is 0.
+ * This function does not change the source array.
+ *
+ * @method subset
+ * @deprecated Use array.slice() instead.
+ * @param {Array} list Array to extract from
+ * @param {Integer} start position to begin
+ * @param {Integer} [count] number of values to extract
+ * @return {Array} Array of extracted elements
+ *
+ * @example
+ *
+ * function setup() {
+ * let myArray = [1, 2, 3, 4, 5];
+ * print(myArray); // [1, 2, 3, 4, 5]
+ *
+ * let sub1 = subset(myArray, 0, 3);
+ * let sub2 = subset(myArray, 2, 2);
+ * print(sub1); // [1,2,3]
+ * print(sub2); // [3,4]
+ * }
+ *
+ */
+ _main.default.prototype.subset = function(list, start, count) {
+ if (typeof count !== 'undefined') {
+ return list.slice(start, start + count);
+ } else {
+ return list.slice(start, list.length);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 67: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Data
+ * @submodule Conversion
+ * @for p5
+ * @requires core
+ */ /**
+ * Converts a string to its floating point representation. The contents of a
+ * string must resemble a number, or NaN (not a number) will be returned.
+ * For example, float("1234.56") evaluates to 1234.56, but float("giraffe")
+ * will return NaN.
+ *
+ * When an array of values is passed in, then an array of floats of the same
+ * length is returned.
+ *
+ * @method float
+ * @param {String} str float string to parse
+ * @return {Number} floating point representation of string
+ * @example
+ *
+ * let str = '20';
+ * let diameter = float(str);
+ * ellipse(width / 2, height / 2, diameter, diameter);
+ *
+ *
+ * print(float('10.31')); // 10.31
+ * print(float('Infinity')); // Infinity
+ * print(float('-Infinity')); // -Infinity
+ *
+ *
+ * @alt
+ * 20 by 20 white ellipse in the center of the canvas
+ *
+ */ _main.default.prototype.float = function(str) {
+ if (str instanceof Array) {
+ return str.map(parseFloat);
+ }
+ return parseFloat(str);
+ };
+
+ /**
+ * Converts a boolean, string, or float to its integer representation.
+ * When an array of values is passed in, then an int array of the same length
+ * is returned.
+ *
+ * @method int
+ * @param {String|Boolean|Number} n value to parse
+ * @param {Integer} [radix] the radix to convert to (default: 10)
+ * @return {Number} integer representation of value
+ *
+ * @example
+ *
+ * print(int('10')); // 10
+ * print(int(10.31)); // 10
+ * print(int(-10)); // -10
+ * print(int(true)); // 1
+ * print(int(false)); // 0
+ * print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
+ * print(int(Infinity)); // Infinity
+ * print(int('-Infinity')); // -Infinity
+ *
+ */
+ /**
+ * @method int
+ * @param {Array} ns values to parse
+ * @return {Number[]} integer representation of values
+ */
+ _main.default.prototype.int = function(n) {
+ var radix =
+ arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+ if (n === Infinity || n === 'Infinity') {
+ return Infinity;
+ } else if (n === -Infinity || n === '-Infinity') {
+ return -Infinity;
+ } else if (typeof n === 'string') {
+ return parseInt(n, radix);
+ } else if (typeof n === 'number') {
+ return n | 0;
+ } else if (typeof n === 'boolean') {
+ return n ? 1 : 0;
+ } else if (n instanceof Array) {
+ return n.map(function(n) {
+ return _main.default.prototype.int(n, radix);
+ });
+ }
+ };
+
+ /**
+ * Converts a boolean, string or number to its string representation.
+ * When an array of values is passed in, then an array of strings of the same
+ * length is returned.
+ *
+ * @method str
+ * @param {String|Boolean|Number|Array} n value to parse
+ * @return {String} string representation of value
+ * @example
+ *
+ * print(str('10')); // "10"
+ * print(str(10.31)); // "10.31"
+ * print(str(-10)); // "-10"
+ * print(str(true)); // "true"
+ * print(str(false)); // "false"
+ * print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
+ *
+ */
+ _main.default.prototype.str = function(n) {
+ if (n instanceof Array) {
+ return n.map(_main.default.prototype.str);
+ } else {
+ return String(n);
+ }
+ };
+
+ /**
+ * Converts a number or string to its boolean representation.
+ * For a number, any non-zero value (positive or negative) evaluates to true,
+ * while zero evaluates to false. For a string, the value "true" evaluates to
+ * true, while any other value evaluates to false. When an array of number or
+ * string values is passed in, then a array of booleans of the same length is
+ * returned.
+ *
+ * @method boolean
+ * @param {String|Boolean|Number|Array} n value to parse
+ * @return {Boolean} boolean representation of value
+ * @example
+ *
+ * print(boolean(0)); // false
+ * print(boolean(1)); // true
+ * print(boolean('true')); // true
+ * print(boolean('abcd')); // false
+ * print(boolean([0, 12, 'true'])); // [false, true, true]
+ *
+ */
+ _main.default.prototype.boolean = function(n) {
+ if (typeof n === 'number') {
+ return n !== 0;
+ } else if (typeof n === 'string') {
+ return n.toLowerCase() === 'true';
+ } else if (typeof n === 'boolean') {
+ return n;
+ } else if (n instanceof Array) {
+ return n.map(_main.default.prototype.boolean);
+ }
+ };
+
+ /**
+ * Converts a number, string representation of a number, or boolean to its byte
+ * representation. A byte can be only a whole number between -128 and 127, so
+ * when a value outside of this range is converted, it wraps around to the
+ * corresponding byte representation. When an array of number, string or boolean
+ * values is passed in, then an array of bytes the same length is returned.
+ *
+ * @method byte
+ * @param {String|Boolean|Number} n value to parse
+ * @return {Number} byte representation of value
+ *
+ * @example
+ *
+ * print(byte(127)); // 127
+ * print(byte(128)); // -128
+ * print(byte(23.4)); // 23
+ * print(byte('23.4')); // 23
+ * print(byte('hello')); // NaN
+ * print(byte(true)); // 1
+ * print(byte([0, 255, '100'])); // [0, -1, 100]
+ *
+ */
+ /**
+ * @method byte
+ * @param {Array} ns values to parse
+ * @return {Number[]} array of byte representation of values
+ */
+ _main.default.prototype.byte = function(n) {
+ var nn = _main.default.prototype.int(n, 10);
+ if (typeof nn === 'number') {
+ return (nn + 128) % 256 - 128;
+ } else if (nn instanceof Array) {
+ return nn.map(_main.default.prototype.byte);
+ }
+ };
+
+ /**
+ * Converts a number or string to its corresponding single-character
+ * string representation. If a string parameter is provided, it is first
+ * parsed as an integer and then translated into a single-character string.
+ * When an array of number or string values is passed in, then an array of
+ * single-character strings of the same length is returned.
+ *
+ * @method char
+ * @param {String|Number} n value to parse
+ * @return {String} string representation of value
+ *
+ * @example
+ *
+ * print(char(65)); // "A"
+ * print(char('65')); // "A"
+ * print(char([65, 66, 67])); // [ "A", "B", "C" ]
+ * print(join(char([65, 66, 67]), '')); // "ABC"
+ *
+ */
+ /**
+ * @method char
+ * @param {Array} ns values to parse
+ * @return {String[]} array of string representation of values
+ */
+ _main.default.prototype.char = function(n) {
+ if (typeof n === 'number' && !isNaN(n)) {
+ return String.fromCharCode(n);
+ } else if (n instanceof Array) {
+ return n.map(_main.default.prototype.char);
+ } else if (typeof n === 'string') {
+ return _main.default.prototype.char(parseInt(n, 10));
+ }
+ };
+
+ /**
+ * Converts a single-character string to its corresponding integer
+ * representation. When an array of single-character string values is passed
+ * in, then an array of integers of the same length is returned.
+ *
+ * @method unchar
+ * @param {String} n value to parse
+ * @return {Number} integer representation of value
+ *
+ * @example
+ *
+ * print(unchar('A')); // 65
+ * print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
+ * print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
+ *
+ */
+ /**
+ * @method unchar
+ * @param {Array} ns values to parse
+ * @return {Number[]} integer representation of values
+ */
+ _main.default.prototype.unchar = function(n) {
+ if (typeof n === 'string' && n.length === 1) {
+ return n.charCodeAt(0);
+ } else if (n instanceof Array) {
+ return n.map(_main.default.prototype.unchar);
+ }
+ };
+
+ /**
+ * Converts a number to a string in its equivalent hexadecimal notation. If a
+ * second parameter is passed, it is used to set the number of characters to
+ * generate in the hexadecimal notation. When an array is passed in, an
+ * array of strings in hexadecimal notation of the same length is returned.
+ *
+ * @method hex
+ * @param {Number} n value to parse
+ * @param {Number} [digits]
+ * @return {String} hexadecimal string representation of value
+ *
+ * @example
+ *
+ * print(hex(255)); // "000000FF"
+ * print(hex(255, 6)); // "0000FF"
+ * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
+ * print(Infinity); // "FFFFFFFF"
+ * print(-Infinity); // "00000000"
+ *
+ */
+ /**
+ * @method hex
+ * @param {Number[]} ns array of values to parse
+ * @param {Number} [digits]
+ * @return {String[]} hexadecimal string representation of values
+ */
+ _main.default.prototype.hex = function(n, digits) {
+ digits = digits === undefined || digits === null ? (digits = 8) : digits;
+ if (n instanceof Array) {
+ return n.map(function(n) {
+ return _main.default.prototype.hex(n, digits);
+ });
+ } else if (n === Infinity || n === -Infinity) {
+ var c = n === Infinity ? 'F' : '0';
+ return c.repeat(digits);
+ } else if (typeof n === 'number') {
+ if (n < 0) {
+ n = 0xffffffff + n + 1;
+ }
+ var hex = Number(n)
+ .toString(16)
+ .toUpperCase();
+ while (hex.length < digits) {
+ hex = '0'.concat(hex);
+ }
+ if (hex.length >= digits) {
+ hex = hex.substring(hex.length - digits, hex.length);
+ }
+ return hex;
+ }
+ };
+
+ /**
+ * Converts a string representation of a hexadecimal number to its equivalent
+ * integer value. When an array of strings in hexadecimal notation is passed
+ * in, an array of integers of the same length is returned.
+ *
+ * @method unhex
+ * @param {String} n value to parse
+ * @return {Number} integer representation of hexadecimal value
+ *
+ * @example
+ *
+ * print(unhex('A')); // 10
+ * print(unhex('FF')); // 255
+ * print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
+ *
+ */
+ /**
+ * @method unhex
+ * @param {Array} ns values to parse
+ * @return {Number[]} integer representations of hexadecimal value
+ */
+ _main.default.prototype.unhex = function(n) {
+ if (n instanceof Array) {
+ return n.map(_main.default.prototype.unhex);
+ } else {
+ return parseInt('0x'.concat(n), 16);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 68: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('../core/error_helpers');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /** //return p5; //LM is this a mistake?
+ * @module Data
+ * @submodule String Functions
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Combines an array of Strings into one String, each separated by the
+ * character(s) used for the separator parameter. To join arrays of ints or
+ * floats, it's necessary to first convert them to Strings using nf() or
+ * nfs().
+ *
+ * @method join
+ * @param {Array} list array of Strings to be joined
+ * @param {String} separator String to be placed between each item
+ * @return {String} joined String
+ * @example
+ *
+ *
+ * let array = ['Hello', 'world!'];
+ * let separator = ' ';
+ * let message = join(array, separator);
+ * text(message, 5, 50);
+ *
+ *
+ *
+ * @alt
+ * "hello world!" displayed middle left of canvas.
+ *
+ */ _main.default.prototype.join = function(list, separator) {
+ _main.default._validateParameters('join', arguments);
+ return list.join(separator);
+ };
+
+ /**
+ * This function is used to apply a regular expression to a piece of text,
+ * and return matching groups (elements found inside parentheses) as a
+ * String array. If there are no matches, a null value will be returned.
+ * If no groups are specified in the regular expression, but the sequence
+ * matches, an array of length 1 (with the matched text as the first element
+ * of the array) will be returned.
+ *
+ * To use the function, first check to see if the result is null. If the
+ * result is null, then the sequence did not match at all. If the sequence
+ * did match, an array is returned.
+ *
+ * If there are groups (specified by sets of parentheses) in the regular
+ * expression, then the contents of each will be returned in the array.
+ * Element [0] of a regular expression match returns the entire matching
+ * string, and the match groups start at element [1] (the first group is [1],
+ * the second [2], and so on).
+ *
+ * @method match
+ * @param {String} str the String to be searched
+ * @param {String} regexp the regexp to be used for matching
+ * @return {String[]} Array of Strings found
+ * @example
+ *
+ *
+ * let string = 'Hello p5js*!';
+ * let regexp = 'p5js\\*';
+ * let m = match(string, regexp);
+ * text(m, 5, 50);
+ *
+ *
+ *
+ * @alt
+ * "p5js*" displayed middle left of canvas.
+ *
+ */
+ _main.default.prototype.match = function(str, reg) {
+ _main.default._validateParameters('match', arguments);
+ return str.match(reg);
+ };
+
+ /**
+ * This function is used to apply a regular expression to a piece of text,
+ * and return a list of matching groups (elements found inside parentheses)
+ * as a two-dimensional String array. If there are no matches, a null value
+ * will be returned. If no groups are specified in the regular expression,
+ * but the sequence matches, a two dimensional array is still returned, but
+ * the second dimension is only of length one.
+ *
+ * To use the function, first check to see if the result is null. If the
+ * result is null, then the sequence did not match at all. If the sequence
+ * did match, a 2D array is returned.
+ *
+ * If there are groups (specified by sets of parentheses) in the regular
+ * expression, then the contents of each will be returned in the array.
+ * Assuming a loop with counter variable i, element [i][0] of a regular
+ * expression match returns the entire matching string, and the match groups
+ * start at element [i][1] (the first group is [i][1], the second [i][2],
+ * and so on).
+ *
+ * @method matchAll
+ * @param {String} str the String to be searched
+ * @param {String} regexp the regexp to be used for matching
+ * @return {String[]} 2d Array of Strings found
+ * @example
+ *
+ *
+ * let string = 'Hello p5js*! Hello world!';
+ * let regexp = 'Hello';
+ * matchAll(string, regexp);
+ *
+ *
+ */
+ _main.default.prototype.matchAll = function(str, reg) {
+ _main.default._validateParameters('matchAll', arguments);
+ var re = new RegExp(reg, 'g');
+ var match = re.exec(str);
+ var matches = [];
+ while (match !== null) {
+ matches.push(match);
+ // matched text: match[0]
+ // match start: match.index
+ // capturing group n: match[n]
+ match = re.exec(str);
+ }
+ return matches;
+ };
+
+ /**
+ * Utility function for formatting numbers into strings. There are two
+ * versions: one for formatting floats, and one for formatting ints.
+ * The values for the digits, left, and right parameters should always
+ * be positive integers.
+ * (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter
+ * if greater than the current length of the number.
+ * For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123
+ * (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than
+ * the result will be 123.200.
+ *
+ * @method nf
+ * @param {Number|String} num the Number to format
+ * @param {Integer|String} [left] number of digits to the left of the
+ * decimal point
+ * @param {Integer|String} [right] number of digits to the right of the
+ * decimal point
+ * @return {String} formatted String
+ *
+ * @example
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/fonts/inconsolata.ttf');
+ * }
+ * function setup() {
+ * background(200);
+ * let num1 = 321;
+ * let num2 = -1321;
+ *
+ * noStroke();
+ * fill(0);
+ * textFont(myFont);
+ * textSize(22);
+ *
+ * text(nf(num1, 4, 2), 10, 30);
+ * text(nf(num2, 4, 2), 10, 80);
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * "0321.00" middle top, -1321.00" middle bottom canvas
+ */
+ /**
+ * @method nf
+ * @param {Array} nums the Numbers to format
+ * @param {Integer|String} [left]
+ * @param {Integer|String} [right]
+ * @return {String[]} formatted Strings
+ */
+ _main.default.prototype.nf = function(nums, left, right) {
+ _main.default._validateParameters('nf', arguments);
+ if (nums instanceof Array) {
+ return nums.map(function(x) {
+ return doNf(x, left, right);
+ });
+ } else {
+ var typeOfFirst = Object.prototype.toString.call(nums);
+ if (typeOfFirst === '[object Arguments]') {
+ if (nums.length === 3) {
+ return this.nf(nums[0], nums[1], nums[2]);
+ } else if (nums.length === 2) {
+ return this.nf(nums[0], nums[1]);
+ } else {
+ return this.nf(nums[0]);
+ }
+ } else {
+ return doNf(nums, left, right);
+ }
+ }
+ };
+
+ function doNf(num, left, right) {
+ var neg = num < 0;
+ var n = neg ? num.toString().substring(1) : num.toString();
+ var decimalInd = n.indexOf('.');
+ var intPart = decimalInd !== -1 ? n.substring(0, decimalInd) : n;
+ var decPart = decimalInd !== -1 ? n.substring(decimalInd + 1) : '';
+ var str = neg ? '-' : '';
+ if (typeof right !== 'undefined') {
+ var decimal = '';
+ if (decimalInd !== -1 || right - decPart.length > 0) {
+ decimal = '.';
+ }
+ if (decPart.length > right) {
+ decPart = decPart.substring(0, right);
+ }
+ for (var i = 0; i < left - intPart.length; i++) {
+ str += '0';
+ }
+ str += intPart;
+ str += decimal;
+ str += decPart;
+ for (var j = 0; j < right - decPart.length; j++) {
+ str += '0';
+ }
+ return str;
+ } else {
+ for (var k = 0; k < Math.max(left - intPart.length, 0); k++) {
+ str += '0';
+ }
+ str += n;
+ return str;
+ }
+ }
+
+ /**
+ * Utility function for formatting numbers into strings and placing
+ * appropriate commas to mark units of 1000. There are two versions: one
+ * for formatting ints, and one for formatting an array of ints. The value
+ * for the right parameter should always be a positive integer.
+ *
+ * @method nfc
+ * @param {Number|String} num the Number to format
+ * @param {Integer|String} [right] number of digits to the right of the
+ * decimal point
+ * @return {String} formatted String
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * background(200);
+ * let num = 11253106.115;
+ * let numArr = [1, 1, 2];
+ *
+ * noStroke();
+ * fill(0);
+ * textSize(12);
+ *
+ * // Draw formatted numbers
+ * text(nfc(num, 4), 10, 30);
+ * text(nfc(numArr, 2), 10, 80);
+ *
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * "11,253,106.115" top middle and "1.00,1.00,2.00" displayed bottom mid
+ */
+ /**
+ * @method nfc
+ * @param {Array} nums the Numbers to format
+ * @param {Integer|String} [right]
+ * @return {String[]} formatted Strings
+ */
+ _main.default.prototype.nfc = function(num, right) {
+ _main.default._validateParameters('nfc', arguments);
+ if (num instanceof Array) {
+ return num.map(function(x) {
+ return doNfc(x, right);
+ });
+ } else {
+ return doNfc(num, right);
+ }
+ };
+ function doNfc(num, right) {
+ num = num.toString();
+ var dec = num.indexOf('.');
+ var rem = dec !== -1 ? num.substring(dec) : '';
+ var n = dec !== -1 ? num.substring(0, dec) : num;
+ n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+ if (right === 0) {
+ rem = '';
+ } else if (typeof right !== 'undefined') {
+ if (right > rem.length) {
+ rem += dec === -1 ? '.' : '';
+ var len = right - rem.length + 1;
+ for (var i = 0; i < len; i++) {
+ rem += '0';
+ }
+ } else {
+ rem = rem.substring(0, right + 1);
+ }
+ }
+ return n + rem;
+ }
+
+ /**
+ * Utility function for formatting numbers into strings. Similar to nf() but
+ * puts a "+" in front of positive numbers and a "-" in front of negative
+ * numbers. There are two versions: one for formatting floats, and one for
+ * formatting ints. The values for left, and right parameters
+ * should always be positive integers.
+ *
+ * @method nfp
+ * @param {Number} num the Number to format
+ * @param {Integer} [left] number of digits to the left of the decimal
+ * point
+ * @param {Integer} [right] number of digits to the right of the
+ * decimal point
+ * @return {String} formatted String
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * background(200);
+ * let num1 = 11253106.115;
+ * let num2 = -11253106.115;
+ *
+ * noStroke();
+ * fill(0);
+ * textSize(12);
+ *
+ * // Draw formatted numbers
+ * text(nfp(num1, 4, 2), 10, 30);
+ * text(nfp(num2, 4, 2), 10, 80);
+ *
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * "+11253106.11" top middle and "-11253106.11" displayed bottom middle
+ */
+ /**
+ * @method nfp
+ * @param {Number[]} nums the Numbers to format
+ * @param {Integer} [left]
+ * @param {Integer} [right]
+ * @return {String[]} formatted Strings
+ */
+ _main.default.prototype.nfp = function() {
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('nfp', args);
+ var nfRes = _main.default.prototype.nf.apply(this, args);
+ if (nfRes instanceof Array) {
+ return nfRes.map(addNfp);
+ } else {
+ return addNfp(nfRes);
+ }
+ };
+
+ function addNfp(num) {
+ return parseFloat(num) > 0 ? '+'.concat(num.toString()) : num.toString();
+ }
+
+ /**
+ * Utility function for formatting numbers into strings. Similar to nf() but
+ * puts an additional "_" (space) in front of positive numbers just in case to align it with negative
+ * numbers which includes "-" (minus) sign.
+ * The main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative
+ * number with some negative number (See the example to get a clear picture).
+ * There are two versions: one for formatting float, and one for formatting int.
+ * The values for the digits, left, and right parameters should always be positive integers.
+ * (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using.
+ * (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter
+ * if greater than the current length of the number.
+ * For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123
+ * (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than
+ * the result will be 123.200.
+ *
+ * @method nfs
+ * @param {Number} num the Number to format
+ * @param {Integer} [left] number of digits to the left of the decimal
+ * point
+ * @param {Integer} [right] number of digits to the right of the
+ * decimal point
+ * @return {String} formatted String
+ *
+ * @example
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/fonts/inconsolata.ttf');
+ * }
+ * function setup() {
+ * background(200);
+ * let num1 = 321;
+ * let num2 = -1321;
+ *
+ * noStroke();
+ * fill(0);
+ * textFont(myFont);
+ * textSize(22);
+ *
+ * // nfs() aligns num1 (positive number) with num2 (negative number) by
+ * // adding a blank space in front of the num1 (positive number)
+ * // [left = 4] in num1 add one 0 in front, to align the digits with num2
+ * // [right = 2] in num1 and num2 adds two 0's after both numbers
+ * // To see the differences check the example of nf() too.
+ * text(nfs(num1, 4, 2), 10, 30);
+ * text(nfs(num2, 4, 2), 10, 80);
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * "0321.00" top middle and "-1321.00" displayed bottom middle
+ */
+ /**
+ * @method nfs
+ * @param {Array} nums the Numbers to format
+ * @param {Integer} [left]
+ * @param {Integer} [right]
+ * @return {String[]} formatted Strings
+ */
+ _main.default.prototype.nfs = function() {
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('nfs', args);
+ var nfRes = _main.default.prototype.nf.apply(this, args);
+ if (nfRes instanceof Array) {
+ return nfRes.map(addNfs);
+ } else {
+ return addNfs(nfRes);
+ }
+ };
+
+ function addNfs(num) {
+ return parseFloat(num) >= 0 ? ' '.concat(num.toString()) : num.toString();
+ }
+
+ /**
+ * The split() function maps to String.split(), it breaks a String into
+ * pieces using a character or string as the delimiter. The delim parameter
+ * specifies the character or characters that mark the boundaries between
+ * each piece. A String[] array is returned that contains each of the pieces.
+ *
+ * The splitTokens() function works in a similar fashion, except that it
+ * splits using a range of characters instead of a specific character or
+ * sequence.
+ *
+ * @method split
+ * @param {String} value the String to be split
+ * @param {String} delim the String used to separate the data
+ * @return {String[]} Array of Strings
+ * @example
+ *
+ *
+ * let names = 'Pat,Xio,Alex';
+ * let splitString = split(names, ',');
+ * text(splitString[0], 5, 30);
+ * text(splitString[1], 5, 50);
+ * text(splitString[2], 5, 70);
+ *
+ *
+ *
+ * @alt
+ * "pat" top left, "Xio" mid left and "Alex" displayed bottom left
+ *
+ */
+ _main.default.prototype.split = function(str, delim) {
+ _main.default._validateParameters('split', arguments);
+ return str.split(delim);
+ };
+
+ /**
+ * The splitTokens() function splits a String at one or many character
+ * delimiters or "tokens." The delim parameter specifies the character or
+ * characters to be used as a boundary.
+ *
+ * If no delim characters are specified, any whitespace character is used to
+ * split. Whitespace characters include tab (\t), line feed (\n), carriage
+ * return (\r), form feed (\f), and space.
+ *
+ * @method splitTokens
+ * @param {String} value the String to be split
+ * @param {String} [delim] list of individual Strings that will be used as
+ * separators
+ * @return {String[]} Array of Strings
+ * @example
+ *
+ *
+ * function setup() {
+ * let myStr = 'Mango, Banana, Lime';
+ * let myStrArr = splitTokens(myStr, ',');
+ *
+ * print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
+ * }
+ *
+ *
+ */
+ _main.default.prototype.splitTokens = function(value, delims) {
+ _main.default._validateParameters('splitTokens', arguments);
+ var d;
+ if (typeof delims !== 'undefined') {
+ var str = delims;
+ var sqc = /\]/g.exec(str);
+ var sqo = /\[/g.exec(str);
+ if (sqo && sqc) {
+ str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+ sqo = /\[/g.exec(str);
+ str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+ d = new RegExp('[\\['.concat(str, '\\]]'), 'g');
+ } else if (sqc) {
+ str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+ d = new RegExp('['.concat(str, '\\]]'), 'g');
+ } else if (sqo) {
+ str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+ d = new RegExp('['.concat(str, '\\[]'), 'g');
+ } else {
+ d = new RegExp('['.concat(str, ']'), 'g');
+ }
+ } else {
+ d = /\s/g;
+ }
+ return value.split(d).filter(function(n) {
+ return n;
+ });
+ };
+
+ /**
+ * Removes whitespace characters from the beginning and end of a String. In
+ * addition to standard whitespace characters such as space, carriage return,
+ * and tab, this function also removes the Unicode "nbsp" character.
+ *
+ * @method trim
+ * @param {String} str a String to be trimmed
+ * @return {String} a trimmed String
+ *
+ * @example
+ *
+ *
+ * let string = trim(' No new lines\n ');
+ * text(string + ' here', 2, 50);
+ *
+ *
+ *
+ * @alt
+ * "No new lines here" displayed center canvas
+ */
+ /**
+ * @method trim
+ * @param {Array} strs an Array of Strings to be trimmed
+ * @return {String[]} an Array of trimmed Strings
+ */
+ _main.default.prototype.trim = function(str) {
+ _main.default._validateParameters('trim', arguments);
+ if (str instanceof Array) {
+ return str.map(this.trim);
+ } else {
+ return str.trim();
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/error_helpers': 23, '../core/main': 27 }
+ ],
+ 69: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module IO
+ * @submodule Time & Date
+ * @for p5
+ * @requires core
+ */ /**
+ * p5.js communicates with the clock on your computer. The day() function
+ * returns the current day as a value from 1 - 31.
+ *
+ * @method day
+ * @return {Integer} the current day
+ * @example
+ *
+ *
+ * let d = day();
+ * text('Current day: \n' + d, 5, 50);
+ *
+ *
+ *
+ * @alt
+ * Current day is displayed
+ *
+ */ _main.default.prototype.day = function() {
+ return new Date().getDate();
+ }; /**
+ * p5.js communicates with the clock on your computer. The hour() function
+ * returns the current hour as a value from 0 - 23.
+ *
+ * @method hour
+ * @return {Integer} the current hour
+ * @example
+ *
+ *
+ * let h = hour();
+ * text('Current hour:\n' + h, 5, 50);
+ *
+ *
+ *
+ * @alt
+ * Current hour is displayed
+ *
+ */
+ _main.default.prototype.hour = function() {
+ return new Date().getHours();
+ };
+
+ /**
+ * p5.js communicates with the clock on your computer. The minute() function
+ * returns the current minute as a value from 0 - 59.
+ *
+ * @method minute
+ * @return {Integer} the current minute
+ * @example
+ *
+ *
+ * let m = minute();
+ * text('Current minute: \n' + m, 5, 50);
+ *
+ *
+ *
+ * @alt
+ * Current minute is displayed
+ *
+ */
+ _main.default.prototype.minute = function() {
+ return new Date().getMinutes();
+ };
+
+ /**
+ * Returns the number of milliseconds (thousandths of a second) since
+ * starting the program. This information is often used for timing events and
+ * animation sequences.
+ *
+ * @method millis
+ * @return {Number} the number of milliseconds since starting the program
+ * @example
+ *
+ *
+ * let millisecond = millis();
+ * text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
+ *
+ *
+ *
+ * @alt
+ * number of milliseconds since program has started displayed
+ *
+ */
+ _main.default.prototype.millis = function() {
+ return window.performance.now();
+ };
+
+ /**
+ * p5.js communicates with the clock on your computer. The month() function
+ * returns the current month as a value from 1 - 12.
+ *
+ * @method month
+ * @return {Integer} the current month
+ * @example
+ *
+ *
+ * let m = month();
+ * text('Current month: \n' + m, 5, 50);
+ *
+ *
+ *
+ * @alt
+ * Current month is displayed
+ *
+ */
+ _main.default.prototype.month = function() {
+ return (
+ //January is 0!
+ new Date().getMonth() + 1
+ );
+ };
+
+ /**
+ * p5.js communicates with the clock on your computer. The second() function
+ * returns the current second as a value from 0 - 59.
+ *
+ * @method second
+ * @return {Integer} the current second
+ * @example
+ *
+ *
+ * let s = second();
+ * text('Current second: \n' + s, 5, 50);
+ *
+ *
+ *
+ * @alt
+ * Current second is displayed
+ *
+ */
+ _main.default.prototype.second = function() {
+ return new Date().getSeconds();
+ };
+
+ /**
+ * p5.js communicates with the clock on your computer. The year() function
+ * returns the current year as an integer (2014, 2015, 2016, etc).
+ *
+ * @method year
+ * @return {Integer} the current year
+ * @example
+ *
+ *
+ * let y = year();
+ * text('Current year: \n' + y, 5, 50);
+ *
+ *
+ *
+ * @alt
+ * Current year is displayed
+ *
+ */
+ _main.default.prototype.year = function() {
+ return new Date().getFullYear();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 70: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('./p5.Geometry');
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Shape
+ * @submodule 3D Primitives
+ * @for p5
+ * @requires core
+ * @requires p5.Geometry
+ */ /**
+ * Draw a plane with given a width and height
+ * @method plane
+ * @param {Number} [width] width of the plane
+ * @param {Number} [height] height of the plane
+ * @param {Integer} [detailX] Optional number of triangle
+ * subdivisions in x-dimension
+ * @param {Integer} [detailY] Optional number of triangle
+ * subdivisions in y-dimension
+ * @chainable
+ * @example
+ *
+ *
+ * // draw a plane
+ * // with width 50 and height 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * plane(50, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Nothing displayed on canvas
+ * Rotating interior view of a box with sides that change color.
+ * 3d red and green gradient.
+ * Rotating interior view of a cylinder with sides that change color.
+ * Rotating view of a cylinder with sides that change color.
+ * 3d red and green gradient.
+ * rotating view of a multi-colored cylinder with concave sides.
+ */ _main.default.prototype.plane = function(width, height, detailX, detailY) {
+ this._assert3d('plane');
+ _main.default._validateParameters('plane', arguments);
+ if (typeof width === 'undefined') {
+ width = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = width;
+ }
+
+ if (typeof detailX === 'undefined') {
+ detailX = 1;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 1;
+ }
+
+ var gId = 'plane|'.concat(detailX, '|').concat(detailY);
+
+ if (!this._renderer.geometryInHash(gId)) {
+ var _plane = function _plane() {
+ var u, v, p;
+ for (var i = 0; i <= this.detailY; i++) {
+ v = i / this.detailY;
+ for (var j = 0; j <= this.detailX; j++) {
+ u = j / this.detailX;
+ p = new _main.default.Vector(u - 0.5, v - 0.5, 0);
+ this.vertices.push(p);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var planeGeom = new _main.default.Geometry(detailX, detailY, _plane);
+ planeGeom.computeFaces().computeNormals();
+ if (detailX <= 1 && detailY <= 1) {
+ planeGeom._makeTriangleEdges()._edgesToVertices();
+ } else {
+ console.log(
+ 'Cannot draw stroke on plane objects with more' +
+ ' than 1 detailX or 1 detailY'
+ );
+ }
+ this._renderer.createBuffers(gId, planeGeom);
+ }
+
+ this._renderer.drawBuffersScaled(gId, width, height, 1);
+ return this;
+ };
+
+ /**
+ * Draw a box with given width, height and depth
+ * @method box
+ * @param {Number} [width] width of the box
+ * @param {Number} [Height] height of the box
+ * @param {Number} [depth] depth of the box
+ * @param {Integer} [detailX] Optional number of triangle
+ * subdivisions in x-dimension
+ * @param {Integer} [detailY] Optional number of triangle
+ * subdivisions in y-dimension
+ * @chainable
+ * @example
+ *
+ *
+ * // draw a spinning box
+ * // with width, height and depth of 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(50);
+ * }
+ *
+ *
+ */
+ _main.default.prototype.box = function(width, height, depth, detailX, detailY) {
+ this._assert3d('box');
+ _main.default._validateParameters('box', arguments);
+ if (typeof width === 'undefined') {
+ width = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = width;
+ }
+ if (typeof depth === 'undefined') {
+ depth = height;
+ }
+
+ var perPixelLighting =
+ this._renderer.attributes && this._renderer.attributes.perPixelLighting;
+ if (typeof detailX === 'undefined') {
+ detailX = perPixelLighting ? 1 : 4;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = perPixelLighting ? 1 : 4;
+ }
+
+ var gId = 'box|'.concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _box = function _box() {
+ var cubeIndices = [
+ [0, 4, 2, 6], // -1, 0, 0],// -x
+ [1, 3, 5, 7], // +1, 0, 0],// +x
+ [0, 1, 4, 5], // 0, -1, 0],// -y
+ [2, 6, 3, 7], // 0, +1, 0],// +y
+ [0, 2, 1, 3], // 0, 0, -1],// -z
+ [4, 5, 6, 7] // 0, 0, +1] // +z
+ ];
+ //using strokeIndices instead of faces for strokes
+ //to avoid diagonal stroke lines across face of box
+ this.strokeIndices = [
+ [0, 1],
+ [1, 3],
+ [3, 2],
+ [6, 7],
+ [8, 9],
+ [9, 11],
+ [14, 15],
+ [16, 17],
+ [17, 19],
+ [18, 19],
+ [20, 21],
+ [22, 23]
+ ];
+
+ for (var i = 0; i < cubeIndices.length; i++) {
+ var cubeIndex = cubeIndices[i];
+ var v = i * 4;
+ for (var j = 0; j < 4; j++) {
+ var d = cubeIndex[j];
+ //inspired by lightgl:
+ //https://github.com/evanw/lightgl.js
+ //octants:https://en.wikipedia.org/wiki/Octant_(solid_geometry)
+ var octant = new _main.default.Vector(
+ ((d & 1) * 2 - 1) / 2,
+ ((d & 2) - 1) / 2,
+ ((d & 4) / 2 - 1) / 2
+ );
+
+ this.vertices.push(octant);
+ this.uvs.push(j & 1, (j & 2) / 2);
+ }
+ this.faces.push([v, v + 1, v + 2]);
+ this.faces.push([v + 2, v + 1, v + 3]);
+ }
+ };
+ var boxGeom = new _main.default.Geometry(detailX, detailY, _box);
+ boxGeom.computeNormals();
+ if (detailX <= 4 && detailY <= 4) {
+ boxGeom._makeTriangleEdges()._edgesToVertices();
+ } else {
+ console.log(
+ 'Cannot draw stroke on box objects with more' +
+ ' than 4 detailX or 4 detailY'
+ );
+ }
+ //initialize our geometry buffer with
+ //the key val pair:
+ //geometry Id, Geom object
+ this._renderer.createBuffers(gId, boxGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, width, height, depth);
+
+ return this;
+ };
+
+ /**
+ * Draw a sphere with given radius.
+ *
+ * DetailX and detailY determines the number of subdivisions in the x-dimension
+ * and the y-dimension of a sphere. More subdivisions make the sphere seem
+ * smoother. The recommended maximum values are both 24. Using a value greater
+ * than 24 may cause a warning or slow down the browser.
+ * @method sphere
+ * @param {Number} [radius] radius of circle
+ * @param {Integer} [detailX] optional number of subdivisions in x-dimension
+ * @param {Integer} [detailY] optional number of subdivisions in y-dimension
+ *
+ * @chainable
+ * @example
+ *
+ *
+ * // draw a sphere with radius 40
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * let detailX;
+ * // slide to see how detailX works
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * sphere(40, detailX.value(), 16);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * let detailY;
+ * // slide to see how detailY works
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * sphere(40, 16, detailY.value());
+ * }
+ *
+ *
+ */
+ _main.default.prototype.sphere = function(radius, detailX, detailY) {
+ this._assert3d('sphere');
+ _main.default._validateParameters('sphere', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 16;
+ }
+
+ this.ellipsoid(radius, radius, radius, detailX, detailY);
+
+ return this;
+ };
+
+ /**
+ * @private
+ * Helper function for creating both cones and cylinders
+ * Will only generate well-defined geometry when bottomRadius, height > 0
+ * and topRadius >= 0
+ * If topRadius == 0, topCap should be false
+ */
+ var _truncatedCone = function _truncatedCone(
+ bottomRadius,
+ topRadius,
+ height,
+ detailX,
+ detailY,
+ bottomCap,
+ topCap
+ ) {
+ bottomRadius = bottomRadius <= 0 ? 1 : bottomRadius;
+ topRadius = topRadius < 0 ? 0 : topRadius;
+ height = height <= 0 ? bottomRadius : height;
+ detailX = detailX < 3 ? 3 : detailX;
+ detailY = detailY < 1 ? 1 : detailY;
+ bottomCap = bottomCap === undefined ? true : bottomCap;
+ topCap = topCap === undefined ? topRadius !== 0 : topCap;
+ var start = bottomCap ? -2 : 0;
+ var end = detailY + (topCap ? 2 : 0);
+ //ensure constant slant for interior vertex normals
+ var slant = Math.atan2(bottomRadius - topRadius, height);
+ var sinSlant = Math.sin(slant);
+ var cosSlant = Math.cos(slant);
+ var yy, ii, jj;
+ for (yy = start; yy <= end; ++yy) {
+ var v = yy / detailY;
+ var y = height * v;
+ var ringRadius = void 0;
+ if (yy < 0) {
+ //for the bottomCap edge
+ y = 0;
+ v = 0;
+ ringRadius = bottomRadius;
+ } else if (yy > detailY) {
+ //for the topCap edge
+ y = height;
+ v = 1;
+ ringRadius = topRadius;
+ } else {
+ //for the middle
+ ringRadius = bottomRadius + (topRadius - bottomRadius) * v;
+ }
+ if (yy === -2 || yy === detailY + 2) {
+ //center of bottom or top caps
+ ringRadius = 0;
+ }
+
+ y -= height / 2; //shift coordiate origin to the center of object
+ for (ii = 0; ii < detailX; ++ii) {
+ var u = ii / detailX;
+ var ur = 2 * Math.PI * u;
+ var sur = Math.sin(ur);
+ var cur = Math.cos(ur);
+
+ //VERTICES
+ this.vertices.push(
+ new _main.default.Vector(sur * ringRadius, y, cur * ringRadius)
+ );
+
+ //VERTEX NORMALS
+ var vertexNormal = void 0;
+ if (yy < 0) {
+ vertexNormal = new _main.default.Vector(0, -1, 0);
+ } else if (yy > detailY && topRadius) {
+ vertexNormal = new _main.default.Vector(0, 1, 0);
+ } else {
+ vertexNormal = new _main.default.Vector(
+ sur * cosSlant,
+ sinSlant,
+ cur * cosSlant
+ );
+ }
+ this.vertexNormals.push(vertexNormal);
+ //UVs
+ this.uvs.push(u, v);
+ }
+ }
+
+ var startIndex = 0;
+ if (bottomCap) {
+ for (jj = 0; jj < detailX; ++jj) {
+ var nextjj = (jj + 1) % detailX;
+ this.faces.push([
+ startIndex + jj,
+ startIndex + detailX + nextjj,
+ startIndex + detailX + jj
+ ]);
+ }
+ startIndex += detailX * 2;
+ }
+ for (yy = 0; yy < detailY; ++yy) {
+ for (ii = 0; ii < detailX; ++ii) {
+ var nextii = (ii + 1) % detailX;
+ this.faces.push([
+ startIndex + ii,
+ startIndex + nextii,
+ startIndex + detailX + nextii
+ ]);
+
+ this.faces.push([
+ startIndex + ii,
+ startIndex + detailX + nextii,
+ startIndex + detailX + ii
+ ]);
+ }
+ startIndex += detailX;
+ }
+ if (topCap) {
+ startIndex += detailX;
+ for (ii = 0; ii < detailX; ++ii) {
+ this.faces.push([
+ startIndex + ii,
+ startIndex + (ii + 1) % detailX,
+ startIndex + detailX
+ ]);
+ }
+ }
+ };
+
+ /**
+ * Draw a cylinder with given radius and height
+ *
+ * DetailX and detailY determines the number of subdivisions in the x-dimension
+ * and the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother.
+ * The recommended maximum value for detailX is 24. Using a value greater than 24
+ * may cause a warning or slow down the browser.
+ *
+ * @method cylinder
+ * @param {Number} [radius] radius of the surface
+ * @param {Number} [height] height of the cylinder
+ * @param {Integer} [detailX] number of subdivisions in x-dimension;
+ * default is 24
+ * @param {Integer} [detailY] number of subdivisions in y-dimension;
+ * default is 1
+ * @param {Boolean} [bottomCap] whether to draw the bottom of the cylinder
+ * @param {Boolean} [topCap] whether to draw the top of the cylinder
+ * @chainable
+ * @example
+ *
+ *
+ * // draw a spinning cylinder
+ * // with radius 20 and height 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * cylinder(20, 50);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * cylinder(20, 75, detailX.value(), 1);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(1, 16, 1);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * cylinder(20, 75, 16, detailY.value());
+ * }
+ *
+ *
+ */
+ _main.default.prototype.cylinder = function(
+ radius,
+ height,
+ detailX,
+ detailY,
+ bottomCap,
+ topCap
+ ) {
+ this._assert3d('cylinder');
+ _main.default._validateParameters('cylinder', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = radius;
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 1;
+ }
+ if (typeof topCap === 'undefined') {
+ topCap = true;
+ }
+ if (typeof bottomCap === 'undefined') {
+ bottomCap = true;
+ }
+
+ var gId = 'cylinder|'
+ .concat(detailX, '|')
+ .concat(detailY, '|')
+ .concat(bottomCap, '|')
+ .concat(topCap);
+ if (!this._renderer.geometryInHash(gId)) {
+ var cylinderGeom = new _main.default.Geometry(detailX, detailY);
+ _truncatedCone.call(
+ cylinderGeom,
+ 1,
+ 1,
+ 1,
+ detailX,
+ detailY,
+ bottomCap,
+ topCap
+ );
+
+ // normals are computed in call to _truncatedCone
+ if (detailX <= 24 && detailY <= 16) {
+ cylinderGeom._makeTriangleEdges()._edgesToVertices();
+ } else {
+ console.log(
+ 'Cannot draw stroke on cylinder objects with more' +
+ ' than 24 detailX or 16 detailY'
+ );
+ }
+ this._renderer.createBuffers(gId, cylinderGeom);
+ }
+
+ this._renderer.drawBuffersScaled(gId, radius, height, radius);
+
+ return this;
+ };
+
+ /**
+ * Draw a cone with given radius and height
+ *
+ * DetailX and detailY determine the number of subdivisions in the x-dimension and
+ * the y-dimension of a cone. More subdivisions make the cone seem smoother. The
+ * recommended maximum value for detailX is 24. Using a value greater than 24
+ * may cause a warning or slow down the browser.
+ * @method cone
+ * @param {Number} [radius] radius of the bottom surface
+ * @param {Number} [height] height of the cone
+ * @param {Integer} [detailX] number of segments,
+ * the more segments the smoother geometry
+ * default is 24
+ * @param {Integer} [detailY] number of segments,
+ * the more segments the smoother geometry
+ * default is 1
+ * @param {Boolean} [cap] whether to draw the base of the cone
+ * @chainable
+ * @example
+ *
+ *
+ * // draw a spinning cone
+ * // with radius 40 and height 70
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * cone(40, 70);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * // slide to see how detailx works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 16, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * cone(30, 65, detailX.value(), 16);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * cone(30, 65, 16, detailY.value());
+ * }
+ *
+ *
+ */
+ _main.default.prototype.cone = function(radius, height, detailX, detailY, cap) {
+ this._assert3d('cone');
+ _main.default._validateParameters('cone', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = radius;
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 1;
+ }
+ if (typeof cap === 'undefined') {
+ cap = true;
+ }
+
+ var gId = 'cone|'
+ .concat(detailX, '|')
+ .concat(detailY, '|')
+ .concat(cap);
+ if (!this._renderer.geometryInHash(gId)) {
+ var coneGeom = new _main.default.Geometry(detailX, detailY);
+ _truncatedCone.call(coneGeom, 1, 0, 1, detailX, detailY, cap, false);
+ if (detailX <= 24 && detailY <= 16) {
+ coneGeom._makeTriangleEdges()._edgesToVertices();
+ } else {
+ console.log(
+ 'Cannot draw stroke on cone objects with more' +
+ ' than 24 detailX or 16 detailY'
+ );
+ }
+ this._renderer.createBuffers(gId, coneGeom);
+ }
+
+ this._renderer.drawBuffersScaled(gId, radius, height, radius);
+
+ return this;
+ };
+
+ /**
+ * Draw an ellipsoid with given radius
+ *
+ * DetailX and detailY determine the number of subdivisions in the x-dimension and
+ * the y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother.
+ * Avoid detail number above 150, it may crash the browser.
+ * @method ellipsoid
+ * @param {Number} [radiusx] x-radius of ellipsoid
+ * @param {Number} [radiusy] y-radius of ellipsoid
+ * @param {Number} [radiusz] z-radius of ellipsoid
+ * @param {Integer} [detailX] number of segments,
+ * the more segments the smoother geometry
+ * default is 24. Avoid detail number above
+ * 150, it may crash the browser.
+ * @param {Integer} [detailY] number of segments,
+ * the more segments the smoother geometry
+ * default is 16. Avoid detail number above
+ * 150, it may crash the browser.
+ * @chainable
+ * @example
+ *
+ *
+ * // draw an ellipsoid
+ * // with radius 30, 40 and 40.
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * ellipsoid(30, 40, 40);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(2, 24, 12);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * ellipsoid(30, 40, 40, detailX.value(), 8);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(2, 24, 6);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 9);
+ * rotateY(millis() / 1000);
+ * ellipsoid(30, 40, 40, 12, detailY.value());
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.ellipsoid = function(
+ radiusX,
+ radiusY,
+ radiusZ,
+ detailX,
+ detailY
+ ) {
+ this._assert3d('ellipsoid');
+ _main.default._validateParameters('ellipsoid', arguments);
+ if (typeof radiusX === 'undefined') {
+ radiusX = 50;
+ }
+ if (typeof radiusY === 'undefined') {
+ radiusY = radiusX;
+ }
+ if (typeof radiusZ === 'undefined') {
+ radiusZ = radiusX;
+ }
+
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 16;
+ }
+
+ var gId = 'ellipsoid|'.concat(detailX, '|').concat(detailY);
+
+ if (!this._renderer.geometryInHash(gId)) {
+ var _ellipsoid = function _ellipsoid() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ var phi = Math.PI * v - Math.PI / 2;
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var theta = 2 * Math.PI * u;
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+ var p = new _main.default.Vector(
+ cosPhi * sinTheta,
+ sinPhi,
+ cosPhi * cosTheta
+ );
+ this.vertices.push(p);
+ this.vertexNormals.push(p);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var ellipsoidGeom = new _main.default.Geometry(detailX, detailY, _ellipsoid);
+ ellipsoidGeom.computeFaces();
+ if (detailX <= 24 && detailY <= 24) {
+ ellipsoidGeom._makeTriangleEdges()._edgesToVertices();
+ } else {
+ console.log(
+ 'Cannot draw stroke on ellipsoids with more' +
+ ' than 24 detailX or 24 detailY'
+ );
+ }
+ this._renderer.createBuffers(gId, ellipsoidGeom);
+ }
+
+ this._renderer.drawBuffersScaled(gId, radiusX, radiusY, radiusZ);
+
+ return this;
+ };
+
+ /**
+ * Draw a torus with given radius and tube radius
+ *
+ * DetailX and detailY determine the number of subdivisions in the x-dimension and
+ * the y-dimension of a torus. More subdivisions make the torus appear to be smoother.
+ * The default and maximum values for detailX and detailY are 24 and 16, respectively.
+ * Setting them to relatively small values like 4 and 6 allows you to create new
+ * shapes other than a torus.
+ * @method torus
+ * @param {Number} [radius] radius of the whole ring
+ * @param {Number} [tubeRadius] radius of the tube
+ * @param {Integer} [detailX] number of segments in x-dimension,
+ * the more segments the smoother geometry
+ * default is 24
+ * @param {Integer} [detailY] number of segments in y-dimension,
+ * the more segments the smoother geometry
+ * default is 16
+ * @chainable
+ * @example
+ *
+ *
+ * // draw a spinning torus
+ * // with ring radius 30 and tube radius 15
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * torus(30, 15);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * torus(30, 15, detailX.value(), 12);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * torus(30, 15, 16, detailY.value());
+ * }
+ *
+ *
+ */
+ _main.default.prototype.torus = function(radius, tubeRadius, detailX, detailY) {
+ this._assert3d('torus');
+ _main.default._validateParameters('torus', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ } else if (!radius) {
+ return; // nothing to draw
+ }
+
+ if (typeof tubeRadius === 'undefined') {
+ tubeRadius = 10;
+ } else if (!tubeRadius) {
+ return; // nothing to draw
+ }
+
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 16;
+ }
+
+ var tubeRatio = (tubeRadius / radius).toPrecision(4);
+ var gId = 'torus|'
+ .concat(tubeRatio, '|')
+ .concat(detailX, '|')
+ .concat(detailY);
+
+ if (!this._renderer.geometryInHash(gId)) {
+ var _torus = function _torus() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ var phi = 2 * Math.PI * v;
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+ var r = 1 + tubeRatio * cosPhi;
+
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var theta = 2 * Math.PI * u;
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+
+ var p = new _main.default.Vector(
+ r * cosTheta,
+ r * sinTheta,
+ tubeRatio * sinPhi
+ );
+
+ var n = new _main.default.Vector(
+ cosPhi * cosTheta,
+ cosPhi * sinTheta,
+ sinPhi
+ );
+
+ this.vertices.push(p);
+ this.vertexNormals.push(n);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var torusGeom = new _main.default.Geometry(detailX, detailY, _torus);
+ torusGeom.computeFaces();
+ if (detailX <= 24 && detailY <= 16) {
+ torusGeom._makeTriangleEdges()._edgesToVertices();
+ } else {
+ console.log(
+ 'Cannot draw strokes on torus object with more' +
+ ' than 24 detailX or 16 detailY'
+ );
+ }
+ this._renderer.createBuffers(gId, torusGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radius, radius, radius);
+
+ return this;
+ };
+
+ ///////////////////////
+ /// 2D primitives
+ /////////////////////////
+
+ /**
+ * Draws a point, a coordinate in space at the dimension of one pixel,
+ * given x, y and z coordinates. The color of the point is determined
+ * by the current stroke, while the point size is determined by current
+ * stroke weight.
+ * @private
+ * @param {Number} x x-coordinate of point
+ * @param {Number} y y-coordinate of point
+ * @param {Number} z z-coordinate of point
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(50);
+ * stroke(255);
+ * strokeWeight(4);
+ * point(25, 0);
+ * strokeWeight(3);
+ * point(-25, 0);
+ * strokeWeight(2);
+ * point(0, 25);
+ * strokeWeight(1);
+ * point(0, -25);
+ * }
+ *
+ *
+ */
+ _main.default.RendererGL.prototype.point = function(x, y, z) {
+ if (typeof z === 'undefined') {
+ z = 0;
+ }
+
+ var _vertex = [];
+ _vertex.push(new _main.default.Vector(x, y, z));
+ this._drawPoints(_vertex, this._pointVertexBuffer);
+
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.triangle = function(args) {
+ var x1 = args[0],
+ y1 = args[1];
+ var x2 = args[2],
+ y2 = args[3];
+ var x3 = args[4],
+ y3 = args[5];
+
+ var gId = 'tri';
+ if (!this.geometryInHash(gId)) {
+ var _triangle = function _triangle() {
+ var vertices = [];
+ vertices.push(new _main.default.Vector(0, 0, 0));
+ vertices.push(new _main.default.Vector(0, 1, 0));
+ vertices.push(new _main.default.Vector(1, 0, 0));
+ this.strokeIndices = [[0, 1], [1, 2], [2, 0]];
+ this.vertices = vertices;
+ this.faces = [[0, 1, 2]];
+ this.uvs = [0, 0, 0, 1, 1, 1];
+ };
+ var triGeom = new _main.default.Geometry(1, 1, _triangle);
+ triGeom._makeTriangleEdges()._edgesToVertices();
+ triGeom.computeNormals();
+ this.createBuffers(gId, triGeom);
+ }
+
+ // only one triangle is cached, one point is at the origin, and the
+ // two adjacent sides are tne unit vectors along the X & Y axes.
+ //
+ // this matrix multiplication transforms those two unit vectors
+ // onto the required vector prior to rendering, and moves the
+ // origin appropriately.
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ // prettier-ignore
+ var mult = new _main.default.Matrix([
+ x2 - x1, y2 - y1, 0, 0, // the resulting unit X-axis
+ x3 - x1, y3 - y1, 0, 0, // the resulting unit Y-axis
+ 0, 0, 1, 0, // the resulting unit Z-axis (unchanged)
+ x1, y1, 0, 1 // the resulting origin
+ ]).mult(this.uMVMatrix);
+
+ this.uMVMatrix = mult;
+
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.ellipse = function(args) {
+ this.arc(
+ args[0],
+ args[1],
+ args[2],
+ args[3],
+ 0,
+ constants.TWO_PI,
+ constants.OPEN,
+ args[4]
+ );
+ };
+
+ _main.default.RendererGL.prototype.arc = function(args) {
+ var x = arguments[0];
+ var y = arguments[1];
+ var width = arguments[2];
+ var height = arguments[3];
+ var start = arguments[4];
+ var stop = arguments[5];
+ var mode = arguments[6];
+ var detail = arguments[7] || 25;
+
+ var shape;
+ var gId;
+
+ // check if it is an ellipse or an arc
+ if (Math.abs(stop - start) >= constants.TWO_PI) {
+ shape = 'ellipse';
+ gId = ''.concat(shape, '|').concat(detail, '|');
+ } else {
+ shape = 'arc';
+ gId = ''
+ .concat(shape, '|')
+ .concat(start, '|')
+ .concat(stop, '|')
+ .concat(mode, '|')
+ .concat(detail, '|');
+ }
+
+ if (!this.geometryInHash(gId)) {
+ var _arc = function _arc() {
+ this.strokeIndices = [];
+
+ // if the start and stop angles are not the same, push vertices to the array
+ if (start.toFixed(10) !== stop.toFixed(10)) {
+ // if the mode specified is PIE or null, push the mid point of the arc in vertices
+ if (mode === constants.PIE || typeof mode === 'undefined') {
+ this.vertices.push(new _main.default.Vector(0.5, 0.5, 0));
+ this.uvs.push([0.5, 0.5]);
+ }
+
+ // vertices for the perimeter of the circle
+ for (var i = 0; i <= detail; i++) {
+ var u = i / detail;
+ var theta = (stop - start) * u + start;
+
+ var _x = 0.5 + Math.cos(theta) / 2;
+ var _y = 0.5 + Math.sin(theta) / 2;
+
+ this.vertices.push(new _main.default.Vector(_x, _y, 0));
+ this.uvs.push([_x, _y]);
+
+ if (i < detail - 1) {
+ this.faces.push([0, i + 1, i + 2]);
+ this.strokeIndices.push([i + 1, i + 2]);
+ }
+ }
+
+ // check the mode specified in order to push vertices and faces, different for each mode
+ switch (mode) {
+ case constants.PIE:
+ this.faces.push([
+ 0,
+ this.vertices.length - 2,
+ this.vertices.length - 1
+ ]);
+
+ this.strokeIndices.push([0, 1]);
+ this.strokeIndices.push([
+ this.vertices.length - 2,
+ this.vertices.length - 1
+ ]);
+
+ this.strokeIndices.push([0, this.vertices.length - 1]);
+ break;
+
+ case constants.CHORD:
+ this.strokeIndices.push([0, 1]);
+ this.strokeIndices.push([0, this.vertices.length - 1]);
+ break;
+
+ case constants.OPEN:
+ this.strokeIndices.push([0, 1]);
+ break;
+
+ default:
+ this.faces.push([
+ 0,
+ this.vertices.length - 2,
+ this.vertices.length - 1
+ ]);
+
+ this.strokeIndices.push([
+ this.vertices.length - 2,
+ this.vertices.length - 1
+ ]);
+ }
+ }
+ };
+
+ var arcGeom = new _main.default.Geometry(detail, 1, _arc);
+ arcGeom.computeNormals();
+
+ if (detail <= 50) {
+ arcGeom._makeTriangleEdges()._edgesToVertices(arcGeom);
+ } else {
+ console.log('Cannot stroke '.concat(shape, ' with more than 50 detail'));
+ }
+
+ this.createBuffers(gId, arcGeom);
+ }
+
+ var uMVMatrix = this.uMVMatrix.copy();
+
+ try {
+ this.uMVMatrix.translate([x, y, 0]);
+ this.uMVMatrix.scale(width, height, 1);
+
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.rect = function(args) {
+ var perPixelLighting = this._pInst._glAttributes.perPixelLighting;
+ var x = args[0];
+ var y = args[1];
+ var width = args[2];
+ var height = args[3];
+ var detailX = args[4] || (perPixelLighting ? 1 : 24);
+ var detailY = args[5] || (perPixelLighting ? 1 : 16);
+ var gId = 'rect|'.concat(detailX, '|').concat(detailY);
+ if (!this.geometryInHash(gId)) {
+ var _rect = function _rect() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var p = new _main.default.Vector(u, v, 0);
+ this.vertices.push(p);
+ this.uvs.push(u, v);
+ }
+ }
+ // using stroke indices to avoid stroke over face(s) of rectangle
+ if (detailX > 0 && detailY > 0) {
+ this.strokeIndices = [
+ [0, detailX],
+ [detailX, (detailX + 1) * (detailY + 1) - 1],
+ [(detailX + 1) * (detailY + 1) - 1, (detailX + 1) * detailY],
+ [(detailX + 1) * detailY, 0]
+ ];
+ }
+ };
+ var rectGeom = new _main.default.Geometry(detailX, detailY, _rect);
+ rectGeom
+ .computeFaces()
+ .computeNormals()
+ ._makeTriangleEdges()
+ ._edgesToVertices();
+ this.createBuffers(gId, rectGeom);
+ }
+
+ // only a single rectangle (of a given detail) is cached: a square with
+ // opposite corners at (0,0) & (1,1).
+ //
+ // before rendering, this square is scaled & moved to the required location.
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ this.uMVMatrix.translate([x, y, 0]);
+ this.uMVMatrix.scale(width, height, 1);
+
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ return this;
+ };
+
+ // prettier-ignore
+ _main.default.RendererGL.prototype.quad = function (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) {
+ var gId = "quad|".concat(
+ x1, "|").concat(y1, "|").concat(z1, "|").concat(x2, "|").concat(y2, "|").concat(z2, "|").concat(x3, "|").concat(y3, "|").concat(z3, "|").concat(x4, "|").concat(y4, "|").concat(z4);
+ if (!this.geometryInHash(gId)) {
+ var _quad = function _quad() {
+ this.vertices.push(new _main.default.Vector(x1, y1, z1));
+ this.vertices.push(new _main.default.Vector(x2, y2, z2));
+ this.vertices.push(new _main.default.Vector(x3, y3, z3));
+ this.vertices.push(new _main.default.Vector(x4, y4, z4));
+ this.uvs.push(0, 0, 1, 0, 1, 1, 0, 1);
+ this.strokeIndices = [[0, 1], [1, 2], [2, 3], [3, 0]];
+ };
+ var quadGeom = new _main.default.Geometry(2, 2, _quad);
+ quadGeom.
+ computeNormals().
+ _makeTriangleEdges().
+ _edgesToVertices();
+ quadGeom.faces = [[0, 1, 2], [2, 3, 0]];
+ this.createBuffers(gId, quadGeom);
+ }
+ this.drawBuffers(gId);
+ return this;
+};
+
+ //this implementation of bezier curve
+ //is based on Bernstein polynomial
+ // pretier-ignore
+ _main.default.RendererGL.prototype.bezier = function(
+ x1,
+ y1,
+ z1, // x2
+ x2, // y2
+ y2, // x3
+ z2, // y3
+ x3, // x4
+ y3, // y4
+ z3,
+ x4,
+ y4,
+ z4
+ ) {
+ if (arguments.length === 8) {
+ y4 = y3;
+ x4 = x3;
+ y3 = z2;
+ x3 = y2;
+ y2 = x2;
+ x2 = z1;
+ z1 = z2 = z3 = z4 = 0;
+ }
+ var bezierDetail = this._pInst._bezierDetail || 20; //value of Bezier detail
+ this.beginShape();
+ for (var i = 0; i <= bezierDetail; i++) {
+ var c1 = Math.pow(1 - i / bezierDetail, 3);
+ var c2 = 3 * (i / bezierDetail) * Math.pow(1 - i / bezierDetail, 2);
+ var c3 = 3 * Math.pow(i / bezierDetail, 2) * (1 - i / bezierDetail);
+ var c4 = Math.pow(i / bezierDetail, 3);
+ this.vertex(
+ x1 * c1 + x2 * c2 + x3 * c3 + x4 * c4,
+ y1 * c1 + y2 * c2 + y3 * c3 + y4 * c4,
+ z1 * c1 + z2 * c2 + z3 * c3 + z4 * c4
+ );
+ }
+ this.endShape();
+ return this;
+ };
+
+ // pretier-ignore
+ _main.default.RendererGL.prototype.curve = function(
+ x1,
+ y1,
+ z1, // x2
+ x2, // y2
+ y2, // x3
+ z2, // y3
+ x3, // x4
+ y3, // y4
+ z3,
+ x4,
+ y4,
+ z4
+ ) {
+ if (arguments.length === 8) {
+ x4 = x3;
+ y4 = y3;
+ x3 = y2;
+ y3 = x2;
+ x2 = z1;
+ y2 = x2;
+ z1 = z2 = z3 = z4 = 0;
+ }
+ var curveDetail = this._pInst._curveDetail;
+ this.beginShape();
+ for (var i = 0; i <= curveDetail; i++) {
+ var c1 = Math.pow(i / curveDetail, 3) * 0.5;
+ var c2 = Math.pow(i / curveDetail, 2) * 0.5;
+ var c3 = i / curveDetail * 0.5;
+ var c4 = 0.5;
+ var vx =
+ c1 * (-x1 + 3 * x2 - 3 * x3 + x4) +
+ c2 * (2 * x1 - 5 * x2 + 4 * x3 - x4) +
+ c3 * (-x1 + x3) +
+ c4 * (2 * x2);
+ var vy =
+ c1 * (-y1 + 3 * y2 - 3 * y3 + y4) +
+ c2 * (2 * y1 - 5 * y2 + 4 * y3 - y4) +
+ c3 * (-y1 + y3) +
+ c4 * (2 * y2);
+ var vz =
+ c1 * (-z1 + 3 * z2 - 3 * z3 + z4) +
+ c2 * (2 * z1 - 5 * z2 + 4 * z3 - z4) +
+ c3 * (-z1 + z3) +
+ c4 * (2 * z2);
+ this.vertex(vx, vy, vz);
+ }
+ this.endShape();
+ return this;
+ };
+
+ /**
+ * Draw a line given two points
+ * @private
+ * @param {Number} x0 x-coordinate of first vertex
+ * @param {Number} y0 y-coordinate of first vertex
+ * @param {Number} z0 z-coordinate of first vertex
+ * @param {Number} x1 x-coordinate of second vertex
+ * @param {Number} y1 y-coordinate of second vertex
+ * @param {Number} z1 z-coordinate of second vertex
+ * @chainable
+ * @example
+ *
+ *
+ * //draw a line
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * // Use fill instead of stroke to change the color of shape.
+ * fill(255, 0, 0);
+ * line(10, 10, 0, 60, 60, 20);
+ * }
+ *
+ *
+ */
+ _main.default.RendererGL.prototype.line = function() {
+ if (arguments.length === 6) {
+ this.beginShape();
+ this.vertex(
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 2 ? undefined : arguments[2]
+ );
+ this.vertex(
+ arguments.length <= 3 ? undefined : arguments[3],
+ arguments.length <= 4 ? undefined : arguments[4],
+ arguments.length <= 5 ? undefined : arguments[5]
+ );
+ this.endShape();
+ } else if (arguments.length === 4) {
+ this.beginShape();
+ this.vertex(
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 1 ? undefined : arguments[1],
+ 0
+ );
+ this.vertex(
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 3 ? undefined : arguments[3],
+ 0
+ );
+ this.endShape();
+ }
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.bezierVertex = function() {
+ if (this.immediateMode._bezierVertex.length === 0) {
+ throw Error('vertex() must be used once before calling bezierVertex()');
+ } else {
+ var w_x = [];
+ var w_y = [];
+ var w_z = [];
+ var t, _x, _y, _z, i;
+ var argLength = arguments.length;
+
+ t = 0;
+
+ if (
+ this._lookUpTableBezier.length === 0 ||
+ this._lutBezierDetail !== this._pInst._curveDetail
+ ) {
+ this._lookUpTableBezier = [];
+ this._lutBezierDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutBezierDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+
+ var LUTLength = this._lookUpTableBezier.length;
+
+ if (argLength === 6) {
+ this.isBezier = true;
+
+ w_x = [
+ this.immediateMode._bezierVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 4 ? undefined : arguments[4]
+ ];
+ w_y = [
+ this.immediateMode._bezierVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 3 ? undefined : arguments[3],
+ arguments.length <= 5 ? undefined : arguments[5]
+ ];
+
+ for (i = 0; i < LUTLength; i++) {
+ _x =
+ w_x[0] * this._lookUpTableBezier[i][0] +
+ w_x[1] * this._lookUpTableBezier[i][1] +
+ w_x[2] * this._lookUpTableBezier[i][2] +
+ w_x[3] * this._lookUpTableBezier[i][3];
+ _y =
+ w_y[0] * this._lookUpTableBezier[i][0] +
+ w_y[1] * this._lookUpTableBezier[i][1] +
+ w_y[2] * this._lookUpTableBezier[i][2] +
+ w_y[3] * this._lookUpTableBezier[i][3];
+ this.vertex(_x, _y);
+ }
+ this.immediateMode._bezierVertex[0] =
+ arguments.length <= 4 ? undefined : arguments[4];
+ this.immediateMode._bezierVertex[1] =
+ arguments.length <= 5 ? undefined : arguments[5];
+ } else if (argLength === 9) {
+ this.isBezier = true;
+
+ w_x = [
+ this.immediateMode._bezierVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 3 ? undefined : arguments[3],
+ arguments.length <= 6 ? undefined : arguments[6]
+ ];
+ w_y = [
+ this.immediateMode._bezierVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 4 ? undefined : arguments[4],
+ arguments.length <= 7 ? undefined : arguments[7]
+ ];
+ w_z = [
+ this.immediateMode._bezierVertex[2],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 5 ? undefined : arguments[5],
+ arguments.length <= 8 ? undefined : arguments[8]
+ ];
+ for (i = 0; i < LUTLength; i++) {
+ _x =
+ w_x[0] * this._lookUpTableBezier[i][0] +
+ w_x[1] * this._lookUpTableBezier[i][1] +
+ w_x[2] * this._lookUpTableBezier[i][2] +
+ w_x[3] * this._lookUpTableBezier[i][3];
+ _y =
+ w_y[0] * this._lookUpTableBezier[i][0] +
+ w_y[1] * this._lookUpTableBezier[i][1] +
+ w_y[2] * this._lookUpTableBezier[i][2] +
+ w_y[3] * this._lookUpTableBezier[i][3];
+ _z =
+ w_z[0] * this._lookUpTableBezier[i][0] +
+ w_z[1] * this._lookUpTableBezier[i][1] +
+ w_z[2] * this._lookUpTableBezier[i][2] +
+ w_z[3] * this._lookUpTableBezier[i][3];
+ this.vertex(_x, _y, _z);
+ }
+ this.immediateMode._bezierVertex[0] =
+ arguments.length <= 6 ? undefined : arguments[6];
+ this.immediateMode._bezierVertex[1] =
+ arguments.length <= 7 ? undefined : arguments[7];
+ this.immediateMode._bezierVertex[2] =
+ arguments.length <= 8 ? undefined : arguments[8];
+ }
+ }
+ };
+
+ _main.default.RendererGL.prototype.quadraticVertex = function() {
+ if (this.immediateMode._quadraticVertex.length === 0) {
+ throw Error('vertex() must be used once before calling quadraticVertex()');
+ } else {
+ var w_x = [];
+ var w_y = [];
+ var w_z = [];
+ var t, _x, _y, _z, i;
+ var argLength = arguments.length;
+
+ t = 0;
+
+ if (
+ this._lookUpTableQuadratic.length === 0 ||
+ this._lutQuadraticDetail !== this._pInst._curveDetail
+ ) {
+ this._lookUpTableQuadratic = [];
+ this._lutQuadraticDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutQuadraticDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableQuadratic[j] = this._quadraticCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableQuadratic[j] = this._quadraticCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+
+ var LUTLength = this._lookUpTableQuadratic.length;
+
+ if (argLength === 4) {
+ this.isQuadratic = true;
+
+ w_x = [
+ this.immediateMode._quadraticVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 2 ? undefined : arguments[2]
+ ];
+ w_y = [
+ this.immediateMode._quadraticVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 3 ? undefined : arguments[3]
+ ];
+
+ for (i = 0; i < LUTLength; i++) {
+ _x =
+ w_x[0] * this._lookUpTableQuadratic[i][0] +
+ w_x[1] * this._lookUpTableQuadratic[i][1] +
+ w_x[2] * this._lookUpTableQuadratic[i][2];
+ _y =
+ w_y[0] * this._lookUpTableQuadratic[i][0] +
+ w_y[1] * this._lookUpTableQuadratic[i][1] +
+ w_y[2] * this._lookUpTableQuadratic[i][2];
+ this.vertex(_x, _y);
+ }
+
+ this.immediateMode._quadraticVertex[0] =
+ arguments.length <= 2 ? undefined : arguments[2];
+ this.immediateMode._quadraticVertex[1] =
+ arguments.length <= 3 ? undefined : arguments[3];
+ } else if (argLength === 6) {
+ this.isQuadratic = true;
+
+ w_x = [
+ this.immediateMode._quadraticVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 3 ? undefined : arguments[3]
+ ];
+ w_y = [
+ this.immediateMode._quadraticVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 4 ? undefined : arguments[4]
+ ];
+ w_z = [
+ this.immediateMode._quadraticVertex[2],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 5 ? undefined : arguments[5]
+ ];
+
+ for (i = 0; i < LUTLength; i++) {
+ _x =
+ w_x[0] * this._lookUpTableQuadratic[i][0] +
+ w_x[1] * this._lookUpTableQuadratic[i][1] +
+ w_x[2] * this._lookUpTableQuadratic[i][2];
+ _y =
+ w_y[0] * this._lookUpTableQuadratic[i][0] +
+ w_y[1] * this._lookUpTableQuadratic[i][1] +
+ w_y[2] * this._lookUpTableQuadratic[i][2];
+ _z =
+ w_z[0] * this._lookUpTableQuadratic[i][0] +
+ w_z[1] * this._lookUpTableQuadratic[i][1] +
+ w_z[2] * this._lookUpTableQuadratic[i][2];
+ this.vertex(_x, _y, _z);
+ }
+
+ this.immediateMode._quadraticVertex[0] =
+ arguments.length <= 3 ? undefined : arguments[3];
+ this.immediateMode._quadraticVertex[1] =
+ arguments.length <= 4 ? undefined : arguments[4];
+ this.immediateMode._quadraticVertex[2] =
+ arguments.length <= 5 ? undefined : arguments[5];
+ }
+ }
+ };
+
+ _main.default.RendererGL.prototype.curveVertex = function() {
+ var w_x = [];
+ var w_y = [];
+ var w_z = [];
+ var t, _x, _y, _z, i;
+ t = 0;
+ var argLength = arguments.length;
+
+ if (
+ this._lookUpTableBezier.length === 0 ||
+ this._lutBezierDetail !== this._pInst._curveDetail
+ ) {
+ this._lookUpTableBezier = [];
+ this._lutBezierDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutBezierDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+
+ var LUTLength = this._lookUpTableBezier.length;
+
+ if (argLength === 2) {
+ this.immediateMode._curveVertex.push(
+ arguments.length <= 0 ? undefined : arguments[0]
+ );
+ this.immediateMode._curveVertex.push(
+ arguments.length <= 1 ? undefined : arguments[1]
+ );
+ if (this.immediateMode._curveVertex.length === 8) {
+ this.isCurve = true;
+ w_x = this._bezierToCatmull([
+ this.immediateMode._curveVertex[0],
+ this.immediateMode._curveVertex[2],
+ this.immediateMode._curveVertex[4],
+ this.immediateMode._curveVertex[6]
+ ]);
+
+ w_y = this._bezierToCatmull([
+ this.immediateMode._curveVertex[1],
+ this.immediateMode._curveVertex[3],
+ this.immediateMode._curveVertex[5],
+ this.immediateMode._curveVertex[7]
+ ]);
+
+ for (i = 0; i < LUTLength; i++) {
+ _x =
+ w_x[0] * this._lookUpTableBezier[i][0] +
+ w_x[1] * this._lookUpTableBezier[i][1] +
+ w_x[2] * this._lookUpTableBezier[i][2] +
+ w_x[3] * this._lookUpTableBezier[i][3];
+ _y =
+ w_y[0] * this._lookUpTableBezier[i][0] +
+ w_y[1] * this._lookUpTableBezier[i][1] +
+ w_y[2] * this._lookUpTableBezier[i][2] +
+ w_y[3] * this._lookUpTableBezier[i][3];
+ this.vertex(_x, _y);
+ }
+ for (i = 0; i < argLength; i++) {
+ this.immediateMode._curveVertex.shift();
+ }
+ }
+ } else if (argLength === 3) {
+ this.immediateMode._curveVertex.push(
+ arguments.length <= 0 ? undefined : arguments[0]
+ );
+ this.immediateMode._curveVertex.push(
+ arguments.length <= 1 ? undefined : arguments[1]
+ );
+ this.immediateMode._curveVertex.push(
+ arguments.length <= 2 ? undefined : arguments[2]
+ );
+ if (this.immediateMode._curveVertex.length === 12) {
+ this.isCurve = true;
+ w_x = this._bezierToCatmull([
+ this.immediateMode._curveVertex[0],
+ this.immediateMode._curveVertex[3],
+ this.immediateMode._curveVertex[6],
+ this.immediateMode._curveVertex[9]
+ ]);
+
+ w_y = this._bezierToCatmull([
+ this.immediateMode._curveVertex[1],
+ this.immediateMode._curveVertex[4],
+ this.immediateMode._curveVertex[7],
+ this.immediateMode._curveVertex[10]
+ ]);
+
+ w_z = this._bezierToCatmull([
+ this.immediateMode._curveVertex[2],
+ this.immediateMode._curveVertex[5],
+ this.immediateMode._curveVertex[8],
+ this.immediateMode._curveVertex[11]
+ ]);
+
+ for (i = 0; i < LUTLength; i++) {
+ _x =
+ w_x[0] * this._lookUpTableBezier[i][0] +
+ w_x[1] * this._lookUpTableBezier[i][1] +
+ w_x[2] * this._lookUpTableBezier[i][2] +
+ w_x[3] * this._lookUpTableBezier[i][3];
+ _y =
+ w_y[0] * this._lookUpTableBezier[i][0] +
+ w_y[1] * this._lookUpTableBezier[i][1] +
+ w_y[2] * this._lookUpTableBezier[i][2] +
+ w_y[3] * this._lookUpTableBezier[i][3];
+ _z =
+ w_z[0] * this._lookUpTableBezier[i][0] +
+ w_z[1] * this._lookUpTableBezier[i][1] +
+ w_z[2] * this._lookUpTableBezier[i][2] +
+ w_z[3] * this._lookUpTableBezier[i][3];
+ this.vertex(_x, _y, _z);
+ }
+ for (i = 0; i < argLength; i++) {
+ this.immediateMode._curveVertex.shift();
+ }
+ }
+ }
+ };
+
+ _main.default.RendererGL.prototype.image = function(
+ img,
+ sx,
+ sy,
+ sWidth,
+ sHeight,
+ dx,
+ dy,
+ dWidth,
+ dHeight
+ ) {
+ if (this._isErasing) {
+ this.blendMode(this._cachedBlendMode);
+ }
+
+ this._pInst.push();
+
+ this._pInst.texture(img);
+ this._pInst.textureMode(constants.NORMAL);
+
+ var u0 = 0;
+ if (sx <= img.width) {
+ u0 = sx / img.width;
+ }
+
+ var u1 = 1;
+ if (sx + sWidth <= img.width) {
+ u1 = (sx + sWidth) / img.width;
+ }
+
+ var v0 = 0;
+ if (sy <= img.height) {
+ v0 = sy / img.height;
+ }
+
+ var v1 = 1;
+ if (sy + sHeight <= img.height) {
+ v1 = (sy + sHeight) / img.height;
+ }
+
+ this.beginShape();
+ this.vertex(dx, dy, 0, u0, v0);
+ this.vertex(dx + dWidth, dy, 0, u1, v0);
+ this.vertex(dx + dWidth, dy + dHeight, 0, u1, v1);
+ this.vertex(dx, dy + dHeight, 0, u0, v1);
+ this.endShape(constants.CLOSE);
+
+ this._pInst.pop();
+
+ if (this._isErasing) {
+ this.blendMode(constants.REMOVE);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27, './p5.Geometry': 76 }
+ ],
+ 71: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /** // implementation based on three.js 'orbitControls':
+ * @module Lights, Camera
+ * @submodule Interaction
+ * @for p5
+ * @requires core
+ */ /**
+ * Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking
+ * and dragging will rotate the camera position about the center of the sketch,
+ * right-clicking and dragging will pan the camera position without rotation,
+ * and using the mouse wheel (scrolling) will move the camera closer or further
+ * from the center of the sketch. This function can be called with parameters
+ * dictating sensitivity to mouse movement along the X and Y axes. Calling
+ * this function without parameters is equivalent to calling orbitControl(1,1).
+ * To reverse direction of movement in either axis, enter a negative number
+ * for sensitivity.
+ * @method orbitControl
+ * @for p5
+ * @param {Number} [sensitivityX] sensitivity to mouse movement along X axis
+ * @param {Number} [sensitivityY] sensitivity to mouse movement along Y axis
+ * @param {Number} [sensitivityZ] sensitivity to scroll movement along Z axis
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * rotateY(0.5);
+ * box(30, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Camera orbits around a box when mouse is hold-clicked & then moved.
+ */
+ // https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js
+ _main.default.prototype.orbitControl = function(
+ sensitivityX,
+ sensitivityY,
+ sensitivityZ
+ ) {
+ this._assert3d('orbitControl');
+ _main.default._validateParameters('orbitControl', arguments);
+
+ // If the mouse is not in bounds of the canvas, disable all behaviors:
+ var mouseInCanvas =
+ this.mouseX < this.width &&
+ this.mouseX > 0 &&
+ this.mouseY < this.height &&
+ this.mouseY > 0;
+ if (!mouseInCanvas) return;
+
+ var cam = this._renderer._curCamera;
+
+ if (typeof sensitivityX === 'undefined') {
+ sensitivityX = 1;
+ }
+ if (typeof sensitivityY === 'undefined') {
+ sensitivityY = sensitivityX;
+ }
+ if (typeof sensitivityZ === 'undefined') {
+ sensitivityZ = 0.5;
+ }
+
+ // default right-mouse and mouse-wheel behaviors (context menu and scrolling,
+ // respectively) are disabled here to allow use of those events for panning and
+ // zooming
+
+ // disable context menu for canvas element and add 'contextMenuDisabled'
+ // flag to p5 instance
+ if (this.contextMenuDisabled !== true) {
+ this.canvas.oncontextmenu = function() {
+ return false;
+ };
+ this._setProperty('contextMenuDisabled', true);
+ }
+
+ // disable default scrolling behavior on the canvas element and add
+ // 'wheelDefaultDisabled' flag to p5 instance
+ if (this.wheelDefaultDisabled !== true) {
+ this.canvas.onwheel = function() {
+ return false;
+ };
+ this._setProperty('wheelDefaultDisabled', true);
+ }
+
+ var scaleFactor = this.height < this.width ? this.height : this.width;
+
+ // ZOOM if there is a change in mouseWheelDelta
+ if (this._mouseWheelDeltaY !== this._pmouseWheelDeltaY) {
+ // zoom according to direction of mouseWheelDeltaY rather than value
+ if (this._mouseWheelDeltaY > 0) {
+ this._renderer._curCamera._orbit(0, 0, sensitivityZ * scaleFactor);
+ } else {
+ this._renderer._curCamera._orbit(0, 0, -sensitivityZ * scaleFactor);
+ }
+ }
+
+ if (this.mouseIsPressed) {
+ // ORBIT BEHAVIOR
+ if (this.mouseButton === this.LEFT) {
+ var deltaTheta = -sensitivityX * (this.mouseX - this.pmouseX) / scaleFactor;
+ var deltaPhi = sensitivityY * (this.mouseY - this.pmouseY) / scaleFactor;
+ this._renderer._curCamera._orbit(deltaTheta, deltaPhi, 0);
+ } else if (this.mouseButton === this.RIGHT) {
+ // PANNING BEHAVIOR along X/Z camera axes and restricted to X/Z plane
+ // in world space
+ var local = cam._getLocalAxes();
+
+ // normalize portions along X/Z axes
+ var xmag = Math.sqrt(local.x[0] * local.x[0] + local.x[2] * local.x[2]);
+ if (xmag !== 0) {
+ local.x[0] /= xmag;
+ local.x[2] /= xmag;
+ }
+
+ // normalize portions along X/Z axes
+ var ymag = Math.sqrt(local.y[0] * local.y[0] + local.y[2] * local.y[2]);
+ if (ymag !== 0) {
+ local.y[0] /= ymag;
+ local.y[2] /= ymag;
+ }
+
+ // move along those vectors by amount controlled by mouseX, pmouseY
+ var dx = -1 * sensitivityX * (this.mouseX - this.pmouseX);
+ var dz = -1 * sensitivityY * (this.mouseY - this.pmouseY);
+
+ // restrict movement to XZ plane in world space
+ cam.setPosition(
+ cam.eyeX + dx * local.x[0] + dz * local.z[0],
+ cam.eyeY,
+ cam.eyeZ + dx * local.x[2] + dz * local.z[2]
+ );
+ }
+ }
+ return this;
+ };
+
+ /**
+ * debugMode() helps visualize 3D space by adding a grid to indicate where the
+ * ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z
+ * directions. This function can be called without parameters to create a
+ * default grid and axes icon, or it can be called according to the examples
+ * above to customize the size and position of the grid and/or axes icon. The
+ * grid is drawn using the most recently set stroke color and weight. To
+ * specify these parameters, add a call to stroke() and strokeWeight()
+ * just before the end of the draw() loop.
+ *
+ * By default, the grid will run through the origin (0,0,0) of the sketch
+ * along the XZ plane
+ * and the axes icon will be offset from the origin. Both the grid and axes
+ * icon will be sized according to the current canvas size. Note that because the
+ * grid runs parallel to the default camera view, it is often helpful to use
+ * debugMode along with orbitControl to allow full view of the grid.
+ * @method debugMode
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // Press the spacebar to turn debugMode off!
+ * if (keyIsDown(32)) {
+ * noDebugMode();
+ * }
+ * }
+ *
+ *
+ * @alt
+ * 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.
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(GRID);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * @alt
+ * a 3D box is centered on a grid in a 3D sketch.
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(AXES);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * @alt
+ * 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.
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(GRID, 100, 10, 0, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * @alt
+ * a 3D box is centered on a grid in a 3D sketch
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
+ * }
+ *
+ * function draw() {
+ * noStroke();
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // set the stroke color and weight for the grid!
+ * stroke(255, 0, 150);
+ * strokeWeight(0.8);
+ * }
+ *
+ *
+ * @alt
+ * 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.
+ */
+
+ /**
+ * @method debugMode
+ * @param {Constant} mode either GRID or AXES
+ */
+
+ /**
+ * @method debugMode
+ * @param {Constant} mode
+ * @param {Number} [gridSize] size of one side of the grid
+ * @param {Number} [gridDivisions] number of divisions in the grid
+ * @param {Number} [xOff] X axis offset from origin (0,0,0)
+ * @param {Number} [yOff] Y axis offset from origin (0,0,0)
+ * @param {Number} [zOff] Z axis offset from origin (0,0,0)
+ */
+
+ /**
+ * @method debugMode
+ * @param {Constant} mode
+ * @param {Number} [axesSize] size of axes icon
+ * @param {Number} [xOff]
+ * @param {Number} [yOff]
+ * @param {Number} [zOff]
+ */
+
+ /**
+ * @method debugMode
+ * @param {Number} [gridSize]
+ * @param {Number} [gridDivisions]
+ * @param {Number} [gridXOff]
+ * @param {Number} [gridYOff]
+ * @param {Number} [gridZOff]
+ * @param {Number} [axesSize]
+ * @param {Number} [axesXOff]
+ * @param {Number} [axesYOff]
+ * @param {Number} [axesZOff]
+ */
+
+ _main.default.prototype.debugMode = function() {
+ this._assert3d('debugMode');
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('debugMode', args);
+
+ // start by removing existing 'post' registered debug methods
+ for (var i = this._registeredMethods.post.length - 1; i >= 0; i--) {
+ // test for equality...
+ if (
+ this._registeredMethods.post[i].toString() === this._grid().toString() ||
+ this._registeredMethods.post[i].toString() === this._axesIcon().toString()
+ ) {
+ this._registeredMethods.post.splice(i, 1);
+ }
+ }
+
+ // then add new debugMode functions according to the argument list
+ if (args[0] === constants.GRID) {
+ this.registerMethod(
+ 'post',
+ this._grid.call(this, args[1], args[2], args[3], args[4], args[5])
+ );
+ } else if (args[0] === constants.AXES) {
+ this.registerMethod(
+ 'post',
+ this._axesIcon.call(this, args[1], args[2], args[3], args[4])
+ );
+ } else {
+ this.registerMethod(
+ 'post',
+ this._grid.call(this, args[0], args[1], args[2], args[3], args[4])
+ );
+
+ this.registerMethod(
+ 'post',
+ this._axesIcon.call(this, args[5], args[6], args[7], args[8])
+ );
+ }
+ };
+
+ /**
+ * Turns off debugMode() in a 3D sketch.
+ * @method noDebugMode
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // Press the spacebar to turn debugMode off!
+ * if (keyIsDown(32)) {
+ * noDebugMode();
+ * }
+ * }
+ *
+ *
+ * @alt
+ * 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.
+ */
+ _main.default.prototype.noDebugMode = function() {
+ this._assert3d('noDebugMode');
+
+ // start by removing existing 'post' registered debug methods
+ for (var i = this._registeredMethods.post.length - 1; i >= 0; i--) {
+ // test for equality...
+ if (
+ this._registeredMethods.post[i].toString() === this._grid().toString() ||
+ this._registeredMethods.post[i].toString() === this._axesIcon().toString()
+ ) {
+ this._registeredMethods.post.splice(i, 1);
+ }
+ }
+ };
+
+ /**
+ * For use with debugMode
+ * @private
+ * @method _grid
+ * @param {Number} [size] size of grid sides
+ * @param {Number} [div] number of grid divisions
+ * @param {Number} [xOff] offset of grid center from origin in X axis
+ * @param {Number} [yOff] offset of grid center from origin in Y axis
+ * @param {Number} [zOff] offset of grid center from origin in Z axis
+ */
+ _main.default.prototype._grid = function(size, numDivs, xOff, yOff, zOff) {
+ if (typeof size === 'undefined') {
+ size = this.width / 2;
+ }
+ if (typeof numDivs === 'undefined') {
+ // ensure at least 2 divisions
+ numDivs = Math.round(size / 30) < 4 ? 4 : Math.round(size / 30);
+ }
+ if (typeof xOff === 'undefined') {
+ xOff = 0;
+ }
+ if (typeof yOff === 'undefined') {
+ yOff = 0;
+ }
+ if (typeof zOff === 'undefined') {
+ zOff = 0;
+ }
+
+ var spacing = size / numDivs;
+ var halfSize = size / 2;
+
+ return function() {
+ this.push();
+ this.stroke(
+ this._renderer.curStrokeColor[0] * 255,
+ this._renderer.curStrokeColor[1] * 255,
+ this._renderer.curStrokeColor[2] * 255
+ );
+
+ this._renderer.uMVMatrix.set(
+ this._renderer._curCamera.cameraMatrix.mat4[0],
+ this._renderer._curCamera.cameraMatrix.mat4[1],
+ this._renderer._curCamera.cameraMatrix.mat4[2],
+ this._renderer._curCamera.cameraMatrix.mat4[3],
+ this._renderer._curCamera.cameraMatrix.mat4[4],
+ this._renderer._curCamera.cameraMatrix.mat4[5],
+ this._renderer._curCamera.cameraMatrix.mat4[6],
+ this._renderer._curCamera.cameraMatrix.mat4[7],
+ this._renderer._curCamera.cameraMatrix.mat4[8],
+ this._renderer._curCamera.cameraMatrix.mat4[9],
+ this._renderer._curCamera.cameraMatrix.mat4[10],
+ this._renderer._curCamera.cameraMatrix.mat4[11],
+ this._renderer._curCamera.cameraMatrix.mat4[12],
+ this._renderer._curCamera.cameraMatrix.mat4[13],
+ this._renderer._curCamera.cameraMatrix.mat4[14],
+ this._renderer._curCamera.cameraMatrix.mat4[15]
+ );
+
+ // Lines along X axis
+ for (var q = 0; q <= numDivs; q++) {
+ this.beginShape(this.LINES);
+ this.vertex(-halfSize + xOff, yOff, q * spacing - halfSize + zOff);
+ this.vertex(+halfSize + xOff, yOff, q * spacing - halfSize + zOff);
+ this.endShape();
+ }
+
+ // Lines along Z axis
+ for (var i = 0; i <= numDivs; i++) {
+ this.beginShape(this.LINES);
+ this.vertex(i * spacing - halfSize + xOff, yOff, -halfSize + zOff);
+ this.vertex(i * spacing - halfSize + xOff, yOff, +halfSize + zOff);
+ this.endShape();
+ }
+
+ this.pop();
+ };
+ };
+
+ /**
+ * For use with debugMode
+ * @private
+ * @method _axesIcon
+ * @param {Number} [size] size of axes icon lines
+ * @param {Number} [xOff] offset of icon from origin in X axis
+ * @param {Number} [yOff] offset of icon from origin in Y axis
+ * @param {Number} [zOff] offset of icon from origin in Z axis
+ */
+ _main.default.prototype._axesIcon = function(size, xOff, yOff, zOff) {
+ if (typeof size === 'undefined') {
+ size = this.width / 20 > 40 ? this.width / 20 : 40;
+ }
+ if (typeof xOff === 'undefined') {
+ xOff = -this.width / 4;
+ }
+ if (typeof yOff === 'undefined') {
+ yOff = xOff;
+ }
+ if (typeof zOff === 'undefined') {
+ zOff = xOff;
+ }
+
+ return function() {
+ this.push();
+ this._renderer.uMVMatrix.set(
+ this._renderer._curCamera.cameraMatrix.mat4[0],
+ this._renderer._curCamera.cameraMatrix.mat4[1],
+ this._renderer._curCamera.cameraMatrix.mat4[2],
+ this._renderer._curCamera.cameraMatrix.mat4[3],
+ this._renderer._curCamera.cameraMatrix.mat4[4],
+ this._renderer._curCamera.cameraMatrix.mat4[5],
+ this._renderer._curCamera.cameraMatrix.mat4[6],
+ this._renderer._curCamera.cameraMatrix.mat4[7],
+ this._renderer._curCamera.cameraMatrix.mat4[8],
+ this._renderer._curCamera.cameraMatrix.mat4[9],
+ this._renderer._curCamera.cameraMatrix.mat4[10],
+ this._renderer._curCamera.cameraMatrix.mat4[11],
+ this._renderer._curCamera.cameraMatrix.mat4[12],
+ this._renderer._curCamera.cameraMatrix.mat4[13],
+ this._renderer._curCamera.cameraMatrix.mat4[14],
+ this._renderer._curCamera.cameraMatrix.mat4[15]
+ );
+
+ // X axis
+ this.strokeWeight(2);
+ this.stroke(255, 0, 0);
+ this.beginShape(this.LINES);
+ this.vertex(xOff, yOff, zOff);
+ this.vertex(xOff + size, yOff, zOff);
+ this.endShape();
+ // Y axis
+ this.stroke(0, 255, 0);
+ this.beginShape(this.LINES);
+ this.vertex(xOff, yOff, zOff);
+ this.vertex(xOff, yOff + size, zOff);
+ this.endShape();
+ // Z axis
+ this.stroke(0, 0, 255);
+ this.beginShape(this.LINES);
+ this.vertex(xOff, yOff, zOff);
+ this.vertex(xOff, yOff, zOff + size);
+ this.endShape();
+ this.pop();
+ };
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27 }
+ ],
+ 72: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /**
+ * @method ambientLight
+ * @param {String} value a color string
+ * @chainable
+ */ /**
+ * @module Lights, Camera
+ * @submodule Lights
+ * @for p5
+ * @requires core
+ */ /**
+ * Creates an ambient light with a color
+ *
+ * @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
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * ambientLight(150);
+ * ambientMaterial(250);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * evenly distributed light across a sphere
+ *
+ */
+ /**
+ * @method ambientLight
+ * @param {Number} gray a gray value
+ * @param {Number} [alpha]
+ * @chainable
+ */
+
+ /**
+ * @method ambientLight
+ * @param {Number[]} values an array containing the red,green,blue &
+ * and alpha components of the color
+ * @chainable
+ */
+
+ /**
+ * @method ambientLight
+ * @param {p5.Color} color the ambient light color
+ * @chainable
+ */
+ _main.default.prototype.ambientLight = function(v1, v2, v3, a) {
+ this._assert3d('ambientLight');
+ _main.default._validateParameters('ambientLight', arguments);
+ var color = this.color.apply(this, arguments);
+
+ this._renderer.ambientLightColors.push(
+ color._array[0],
+ color._array[1],
+ color._array[2]
+ );
+
+ this._renderer._enableLighting = true;
+
+ return this;
+ };
+
+ /**
+ * Set's the color of the specular highlight when using a specular material and
+ * specular light.
+ *
+ * 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.
+ *
+ * Note: specularColor is equivalent to the processing function
+ * lightSpecular.
+ *
+ * @method specularColor
+ * @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);
+ * noStroke();
+ * }
+ *
+ * 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);
+ * }
+ *
+ *
+ *
+ * @alt
+ * different specular light sources from top and bottom of canvas
+ */
+
+ /**
+ * @method specularColor
+ * @param {String} value a color string
+ * @chainable
+ */
+
+ /**
+ * @method specularColor
+ * @param {Number} gray a gray value
+ * @chainable
+ */
+
+ /**
+ * @method specularColor
+ * @param {Number[]} values an array containing the red,green,blue &
+ * and alpha components of the color
+ * @chainable
+ */
+
+ /**
+ * @method specularColor
+ * @param {p5.Color} color the ambient light color
+ * @chainable
+ */
+ _main.default.prototype.specularColor = function(v1, v2, v3) {
+ this._assert3d('specularColor');
+ _main.default._validateParameters('specularColor', arguments);
+ var color = this.color.apply(this, arguments);
+
+ this._renderer.specularColors = [
+ color._array[0],
+ color._array[1],
+ color._array[2]
+ ];
+
+ return this;
+ };
+
+ /**
+ * Creates a directional light with a color and a direction
+ * @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
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * //move your mouse to change light direction
+ * let dirX = (mouseX / width - 0.5) * 2;
+ * let dirY = (mouseY / height - 0.5) * 2;
+ * directionalLight(250, 250, 250, -dirX, -dirY, -1);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * light source on canvas changeable with 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
+ * @chainable
+ */
+
+ /**
+ * @method directionalLight
+ * @param {Number[]|String|p5.Color} color
+ * @param {p5.Vector} position
+ * @chainable
+ */
+
+ /**
+ * @method directionalLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @chainable
+ */
+ _main.default.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
+ this._assert3d('directionalLight');
+ _main.default._validateParameters('directionalLight', arguments);
+
+ //@TODO: check parameters number
+ var color;
+ if (v1 instanceof _main.default.Color) {
+ color = v1;
+ } else {
+ color = this.color(v1, v2, v3);
+ }
+
+ var _x, _y, _z;
+ var v = arguments[arguments.length - 1];
+ if (typeof v === 'number') {
+ _x = arguments[arguments.length - 3];
+ _y = arguments[arguments.length - 2];
+ _z = arguments[arguments.length - 1];
+ } else {
+ _x = v.x;
+ _y = v.y;
+ _z = v.z;
+ }
+
+ // normalize direction
+ var l = Math.sqrt(_x * _x + _y * _y + _z * _z);
+ this._renderer.directionalLightDirections.push(_x / l, _y / l, _z / l);
+
+ this._renderer.directionalLightDiffuseColors.push(
+ color._array[0],
+ color._array[1],
+ color._array[2]
+ );
+
+ Array.prototype.push.apply(
+ this._renderer.directionalLightSpecularColors,
+ this._renderer.specularColors
+ );
+
+ this._renderer._enableLighting = true;
+
+ return this;
+ };
+
+ /**
+ * Creates a point light with a color and a light position
+ * @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
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * //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
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * spot light on canvas changes position with mouse
+ *
+ */
+
+ /**
+ * @method pointLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} position the position of the light
+ * @chainable
+ */
+
+ /**
+ * @method pointLight
+ * @param {Number[]|String|p5.Color} color color Array, CSS color string,
+ * or p5.Color value
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @chainable
+ */
+
+ /**
+ * @method pointLight
+ * @param {Number[]|String|p5.Color} color
+ * @param {p5.Vector} position
+ * @chainable
+ */
+ _main.default.prototype.pointLight = function(v1, v2, v3, x, y, z) {
+ this._assert3d('pointLight');
+ _main.default._validateParameters('pointLight', arguments);
+
+ //@TODO: check parameters number
+ var color;
+ if (v1 instanceof _main.default.Color) {
+ color = v1;
+ } else {
+ color = this.color(v1, v2, v3);
+ }
+
+ var _x, _y, _z;
+ var v = arguments[arguments.length - 1];
+ if (typeof v === 'number') {
+ _x = arguments[arguments.length - 3];
+ _y = arguments[arguments.length - 2];
+ _z = arguments[arguments.length - 1];
+ } else {
+ _x = v.x;
+ _y = v.y;
+ _z = v.z;
+ }
+
+ this._renderer.pointLightPositions.push(_x, _y, _z);
+ this._renderer.pointLightDiffuseColors.push(
+ color._array[0],
+ color._array[1],
+ color._array[2]
+ );
+
+ Array.prototype.push.apply(
+ this._renderer.pointLightSpecularColors,
+ this._renderer.specularColors
+ );
+
+ this._renderer._enableLighting = true;
+
+ return this;
+ };
+
+ /**
+ * 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.
+ * @method lights
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * lights();
+ * rotateX(millis() / 1000);
+ * rotateY(millis() / 1000);
+ * rotateZ(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ *
+ * @alt
+ * the light is partially ambient and partially directional
+ */
+ _main.default.prototype.lights = function() {
+ this._assert3d('lights');
+ this.ambientLight(128, 128, 128);
+ this.directionalLight(128, 128, 128, 0, 0, -1);
+ return this;
+ };
+
+ /**
+ * 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:
+ *
+ * d = distance from light position to vertex position
+ *
+ * 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
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * }
+ * function draw() {
+ * background(0);
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * translate(-25, 0, 0);
+ * lightFalloff(1, 0, 0);
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * sphere(20);
+ * translate(50, 0, 0);
+ * lightFalloff(0.9, 0.01, 0);
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * sphere(20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Two spheres with different falloff values show different intensity of light
+ *
+ */
+ _main.default.prototype.lightFalloff = function(
+ constantAttenuation,
+ linearAttenuation,
+ quadraticAttenuation
+ ) {
+ this._assert3d('lightFalloff');
+ _main.default._validateParameters('lightFalloff', arguments);
+
+ if (constantAttenuation < 0) {
+ constantAttenuation = 0;
+ console.warn(
+ 'Value of constant argument in lightFalloff() should be never be negative. Set to 0.'
+ );
+ }
+
+ if (linearAttenuation < 0) {
+ linearAttenuation = 0;
+ console.warn(
+ 'Value of linear argument in lightFalloff() should be never be negative. Set to 0.'
+ );
+ }
+
+ if (quadraticAttenuation < 0) {
+ quadraticAttenuation = 0;
+ console.warn(
+ 'Value of quadratic argument in lightFalloff() should be never be negative. Set to 0.'
+ );
+ }
+
+ if (
+ constantAttenuation === 0 &&
+ linearAttenuation === 0 &&
+ quadraticAttenuation === 0
+ ) {
+ constantAttenuation = 1;
+ console.warn(
+ 'Either one of the three arguments in lightFalloff() should be greater than zero. Set constant argument to 1.'
+ );
+ }
+
+ this._renderer.constantAttenuation = constantAttenuation;
+ this._renderer.linearAttenuation = linearAttenuation;
+ this._renderer.quadraticAttenuation = quadraticAttenuation;
+
+ return this;
+ };
+
+ /**
+ * 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.
+ *
+ * @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
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('perPixelLighting', true);
+ * }
+ * function draw() {
+ * background(0);
+ * //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
+ * ambientLight(50);
+ * spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Spot light on a sphere which changes position with mouse
+ */
+ /**
+ * @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 {Number} [angle]
+ * @param {Number} [conc]
+ */
+ /**
+ * @method spotLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} position
+ * @param {p5.Vector} direction
+ * @param {Number} [angle]
+ * @param {Number} [conc]
+ */
+ /**
+ * @method spotLight
+ * @param {Number[]|String|p5.Color} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @param {p5.Vector} direction
+ * @param {Number} [angle]
+ * @param {Number} [conc]
+ */
+ /**
+ * @method spotLight
+ * @param {Number[]|String|p5.Color} color
+ * @param {p5.Vector} position
+ * @param {Number} rx
+ * @param {Number} ry
+ * @param {Number} rz
+ * @param {Number} [angle]
+ * @param {Number} [conc]
+ */
+ /**
+ * @method spotLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @param {p5.Vector} direction
+ * @param {Number} [angle]
+ * @param {Number} [conc]
+ */
+ /**
+ * @method spotLight
+ * @param {Number} v1
+ * @param {Number} v2
+ * @param {Number} v3
+ * @param {p5.Vector} position
+ * @param {Number} rx
+ * @param {Number} ry
+ * @param {Number} rz
+ * @param {Number} [angle]
+ * @param {Number} [conc]
+ */
+ /**
+ * @method spotLight
+ * @param {Number[]|String|p5.Color} color
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ * @param {Number} rx
+ * @param {Number} ry
+ * @param {Number} rz
+ * @param {Number} [angle]
+ * @param {Number} [conc]
+ */
+ _main.default.prototype.spotLight = function(
+ v1,
+ v2,
+ v3,
+ x,
+ y,
+ z,
+ nx,
+ ny,
+ nz,
+ angle,
+ concentration
+ ) {
+ this._assert3d('spotLight');
+ _main.default._validateParameters('spotLight', arguments);
+
+ var color, position, direction;
+ var length = arguments.length;
+
+ switch (length) {
+ case 11:
+ case 10:
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = new _main.default.Vector(nx, ny, nz);
+ break;
+
+ case 9:
+ if (v1 instanceof _main.default.Color) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = new _main.default.Vector(y, z, nx);
+ angle = ny;
+ concentration = nz;
+ } else if (x instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = new _main.default.Vector(y, z, nx);
+ angle = ny;
+ concentration = nz;
+ } else if (nx instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = nx;
+ angle = ny;
+ concentration = nz;
+ } else {
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = new _main.default.Vector(nx, ny, nz);
+ }
+ break;
+
+ case 8:
+ if (v1 instanceof _main.default.Color) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = new _main.default.Vector(y, z, nx);
+ angle = ny;
+ } else if (x instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = new _main.default.Vector(y, z, nx);
+ angle = ny;
+ } else {
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = nx;
+ angle = ny;
+ }
+ break;
+
+ case 7:
+ if (
+ v1 instanceof _main.default.Color &&
+ v2 instanceof _main.default.Vector
+ ) {
+ color = v1;
+ position = v2;
+ direction = new _main.default.Vector(v3, x, y);
+ angle = z;
+ concentration = nx;
+ } else if (
+ v1 instanceof _main.default.Color &&
+ y instanceof _main.default.Vector
+ ) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = y;
+ angle = z;
+ concentration = nx;
+ } else if (
+ x instanceof _main.default.Vector &&
+ y instanceof _main.default.Vector
+ ) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = y;
+ angle = z;
+ concentration = nx;
+ } else if (v1 instanceof _main.default.Color) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = new _main.default.Vector(y, z, nx);
+ } else if (x instanceof _main.default.Vector) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = new _main.default.Vector(y, z, nx);
+ } else {
+ color = this.color(v1, v2, v3);
+ position = new _main.default.Vector(x, y, z);
+ direction = nx;
+ }
+ break;
+
+ case 6:
+ if (
+ x instanceof _main.default.Vector &&
+ y instanceof _main.default.Vector
+ ) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = y;
+ angle = z;
+ } else if (
+ v1 instanceof _main.default.Color &&
+ y instanceof _main.default.Vector
+ ) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = y;
+ angle = z;
+ } else if (
+ v1 instanceof _main.default.Color &&
+ v2 instanceof _main.default.Vector
+ ) {
+ color = v1;
+ position = v2;
+ direction = new _main.default.Vector(v3, x, y);
+ angle = z;
+ }
+ break;
+
+ case 5:
+ if (
+ v1 instanceof _main.default.Color &&
+ v2 instanceof _main.default.Vector &&
+ v3 instanceof _main.default.Vector
+ ) {
+ color = v1;
+ position = v2;
+ direction = v3;
+ angle = x;
+ concentration = y;
+ } else if (
+ x instanceof _main.default.Vector &&
+ y instanceof _main.default.Vector
+ ) {
+ color = this.color(v1, v2, v3);
+ position = x;
+ direction = y;
+ } else if (
+ v1 instanceof _main.default.Color &&
+ y instanceof _main.default.Vector
+ ) {
+ color = v1;
+ position = new _main.default.Vector(v2, v3, x);
+ direction = y;
+ } else if (
+ v1 instanceof _main.default.Color &&
+ v2 instanceof _main.default.Vector
+ ) {
+ color = v1;
+ position = v2;
+ direction = new _main.default.Vector(v3, x, y);
+ }
+ break;
+
+ case 4:
+ color = v1;
+ position = v2;
+ direction = v3;
+ angle = x;
+ break;
+
+ case 3:
+ color = v1;
+ position = v2;
+ direction = v3;
+ break;
+
+ default:
+ console.warn(
+ 'Sorry, input for spotlight() is not in prescribed format. Too '.concat(
+ length < 3 ? 'few' : 'many',
+ ' arguments were provided'
+ )
+ );
+
+ return this;
+ }
+
+ this._renderer.spotLightDiffuseColors.push(
+ color._array[0],
+ color._array[1],
+ color._array[2]
+ );
+
+ Array.prototype.push.apply(
+ this._renderer.spotLightSpecularColors,
+ this._renderer.specularColors
+ );
+
+ this._renderer.spotLightPositions.push(position.x, position.y, position.z);
+ direction.normalize();
+ this._renderer.spotLightDirections.push(direction.x, direction.y, direction.z);
+
+ if (angle === undefined) {
+ angle = Math.PI / 3;
+ }
+
+ if (concentration !== undefined && concentration < 1) {
+ concentration = 1;
+ console.warn(
+ 'Value of concentration needs to be greater than 1. Setting it to 1'
+ );
+ } else if (concentration === undefined) {
+ concentration = 100;
+ }
+
+ angle = this._renderer._pInst._toRadians(angle);
+ this._renderer.spotLightAngle.push(Math.cos(angle));
+ this._renderer.spotLightConc.push(concentration);
+
+ this._renderer._enableLighting = true;
+
+ return this;
+ };
+
+ /**
+ * 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.
+ * @method noLights
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ *
+ * ambientLight(150, 0, 0);
+ * translate(-25, 0, 0);
+ * ambientMaterial(250);
+ * sphere(20);
+ *
+ * noLights();
+ * ambientLight(0, 150, 0);
+ * translate(50, 0, 0);
+ * ambientMaterial(250);
+ * sphere(20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Two spheres showing different colors
+ */
+ _main.default.prototype.noLights = function() {
+ this._assert3d('noLights');
+ _main.default._validateParameters('noLights', arguments);
+
+ this._renderer.ambientLightColors.length = 0;
+ this._renderer.specularColors = [1, 1, 1];
+
+ this._renderer.directionalLightDirections.length = 0;
+ this._renderer.directionalLightDiffuseColors.length = 0;
+ this._renderer.directionalLightSpecularColors.length = 0;
+
+ this._renderer.pointLightPositions.length = 0;
+ this._renderer.pointLightDiffuseColors.length = 0;
+ this._renderer.pointLightSpecularColors.length = 0;
+
+ this._renderer.spotLightPositions.length = 0;
+ this._renderer.spotLightDirections.length = 0;
+ this._renderer.spotLightDiffuseColors.length = 0;
+ this._renderer.spotLightSpecularColors.length = 0;
+ this._renderer.spotLightAngle.length = 0;
+ this._renderer.spotLightConc.length = 0;
+
+ this._renderer.constantAttenuation = 1;
+ this._renderer.linearAttenuation = 0;
+ this._renderer.quadraticAttenuation = 0;
+ this._renderer._useShininess = 1;
+
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 73: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('./p5.Geometry');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Shape
+ * @submodule 3D Models
+ * @for p5
+ * @requires core
+ * @requires p5.Geometry
+ */ /**
+ * Load a 3d model from an OBJ or STL file.
+ *
+ * loadModel() should be placed inside of preload().
+ * This allows the model to load fully before the rest of your code is run.
+ *
+ * One of the limitations of the OBJ and STL format is that it doesn't have a built-in
+ * sense of scale. This means that models exported from different programs might
+ * be very different sizes. If your model isn't displaying, try calling
+ * loadModel() with the normalized parameter set to true. This will resize the
+ * model to a scale appropriate for p5. You can also make additional changes to
+ * the final size of your model with the scale() function.
+ *
+ * Also, the support for colored STL files is not present. STL files with color will be
+ * rendered without color properties.
+ *
+ * @method loadModel
+ * @param {String} path Path of the model to be loaded
+ * @param {Boolean} normalize If true, scale the model to a
+ * standardized size when loading
+ * @param {function(p5.Geometry)} [successCallback] Function to be called
+ * once the model is loaded. Will be passed
+ * the 3D model object.
+ * @param {function(Event)} [failureCallback] called with event error if
+ * the model fails to load.
+ * @return {p5.Geometry} the p5.Geometry object
+ *
+ * @example
+ *
+ *
+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ * octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * model(octahedron);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Vertically rotating 3-d octahedron.
+ *
+ * @example
+ *
+ *
+ * //draw a spinning teapot
+ * let teapot;
+ *
+ * function preload() {
+ * // Load model with normalise parameter set to true
+ * teapot = loadModel('assets/teapot.obj', true);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * scale(0.4); // Scaled to make model fit into canvas
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * normalMaterial(); // For effect
+ * model(teapot);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Vertically rotating 3-d teapot with red, green and blue gradient.
+ */ /**
+ * @method loadModel
+ * @param {String} path
+ * @param {function(p5.Geometry)} [successCallback]
+ * @param {function(Event)} [failureCallback]
+ * @return {p5.Geometry} the p5.Geometry object
+ */ _main.default.prototype.loadModel = function(path) {
+ _main.default._validateParameters('loadModel', arguments);
+ var normalize;
+ var successCallback;
+ var failureCallback;
+ if (typeof arguments[1] === 'boolean') {
+ normalize = arguments[1];
+ successCallback = arguments[2];
+ failureCallback = arguments[3];
+ } else {
+ normalize = false;
+ successCallback = arguments[1];
+ failureCallback = arguments[2];
+ }
+
+ var fileType = path.slice(-4);
+ var model = new _main.default.Geometry();
+ model.gid = ''.concat(path, '|').concat(normalize);
+ var self = this;
+
+ if (fileType === '.stl') {
+ this.httpDo(
+ path,
+ 'GET',
+ 'arrayBuffer',
+ function(arrayBuffer) {
+ parseSTL(model, arrayBuffer);
+
+ if (normalize) {
+ model.normalize();
+ }
+ self._decrementPreload();
+ if (typeof successCallback === 'function') {
+ successCallback(model);
+ }
+ },
+ failureCallback
+ );
+ } else if (fileType === '.obj') {
+ this.loadStrings(
+ path,
+ function(strings) {
+ parseObj(model, strings);
+
+ if (normalize) {
+ model.normalize();
+ }
+
+ self._decrementPreload();
+ if (typeof successCallback === 'function') {
+ successCallback(model);
+ }
+ },
+ failureCallback
+ );
+ } else {
+ _main.default._friendlyFileLoadError(3, path);
+
+ if (failureCallback) {
+ failureCallback();
+ } else {
+ console.error(
+ 'Sorry, the file type is invalid. Only OBJ and STL files are supported.'
+ );
+ }
+ }
+ return model;
+ };
+
+ /**
+ * Parse OBJ lines into model. For reference, this is what a simple model of a
+ * square might look like:
+ *
+ * v -0.5 -0.5 0.5
+ * v -0.5 -0.5 -0.5
+ * v -0.5 0.5 -0.5
+ * v -0.5 0.5 0.5
+ *
+ * f 4 3 2 1
+ */
+ function parseObj(model, lines) {
+ // OBJ allows a face to specify an index for a vertex (in the above example),
+ // but it also allows you to specify a custom combination of vertex, UV
+ // coordinate, and vertex normal. So, "3/4/3" would mean, "use vertex 3 with
+ // UV coordinate 4 and vertex normal 3". In WebGL, every vertex with different
+ // parameters must be a different vertex, so loadedVerts is used to
+ // temporarily store the parsed vertices, normals, etc., and indexedVerts is
+ // used to map a specific combination (keyed on, for example, the string
+ // "3/4/3"), to the actual index of the newly created vertex in the final
+ // object.
+ var loadedVerts = {
+ v: [],
+ vt: [],
+ vn: []
+ };
+
+ var indexedVerts = {};
+
+ for (var line = 0; line < lines.length; ++line) {
+ // Each line is a separate object (vertex, face, vertex normal, etc)
+ // For each line, split it into tokens on whitespace. The first token
+ // describes the type.
+ var tokens = lines[line].trim().split(/\b\s+/);
+
+ if (tokens.length > 0) {
+ if (tokens[0] === 'v' || tokens[0] === 'vn') {
+ // Check if this line describes a vertex or vertex normal.
+ // It will have three numeric parameters.
+ var vertex = new _main.default.Vector(
+ parseFloat(tokens[1]),
+ parseFloat(tokens[2]),
+ parseFloat(tokens[3])
+ );
+
+ loadedVerts[tokens[0]].push(vertex);
+ } else if (tokens[0] === 'vt') {
+ // Check if this line describes a texture coordinate.
+ // It will have two numeric parameters.
+ var texVertex = [parseFloat(tokens[1]), parseFloat(tokens[2])];
+ loadedVerts[tokens[0]].push(texVertex);
+ } else if (tokens[0] === 'f') {
+ // Check if this line describes a face.
+ // OBJ faces can have more than three points. Triangulate points.
+ for (var tri = 3; tri < tokens.length; ++tri) {
+ var face = [];
+
+ var vertexTokens = [1, tri - 1, tri];
+
+ for (var tokenInd = 0; tokenInd < vertexTokens.length; ++tokenInd) {
+ // Now, convert the given token into an index
+ var vertString = tokens[vertexTokens[tokenInd]];
+ var vertIndex = 0;
+
+ // TODO: Faces can technically use negative numbers to refer to the
+ // previous nth vertex. I haven't seen this used in practice, but
+ // it might be good to implement this in the future.
+
+ if (indexedVerts[vertString] !== undefined) {
+ vertIndex = indexedVerts[vertString];
+ } else {
+ var vertParts = vertString.split('/');
+ for (var i = 0; i < vertParts.length; i++) {
+ vertParts[i] = parseInt(vertParts[i]) - 1;
+ }
+
+ vertIndex = indexedVerts[vertString] = model.vertices.length;
+ model.vertices.push(loadedVerts.v[vertParts[0]].copy());
+ if (loadedVerts.vt[vertParts[1]]) {
+ model.uvs.push(loadedVerts.vt[vertParts[1]].slice());
+ } else {
+ model.uvs.push([0, 0]);
+ }
+
+ if (loadedVerts.vn[vertParts[2]]) {
+ model.vertexNormals.push(loadedVerts.vn[vertParts[2]].copy());
+ }
+ }
+
+ face.push(vertIndex);
+ }
+
+ if (face[0] !== face[1] && face[0] !== face[2] && face[1] !== face[2]) {
+ model.faces.push(face);
+ }
+ }
+ }
+ }
+ }
+ // If the model doesn't have normals, compute the normals
+ if (model.vertexNormals.length === 0) {
+ model.computeNormals();
+ }
+
+ return model;
+ }
+
+ /**
+ * STL files can be of two types, ASCII and Binary,
+ *
+ * We need to convert the arrayBuffer to an array of strings,
+ * to parse it as an ASCII file.
+ */
+ function parseSTL(model, buffer) {
+ if (isBinary(buffer)) {
+ parseBinarySTL(model, buffer);
+ } else {
+ var reader = new DataView(buffer);
+
+ if (!('TextDecoder' in window)) {
+ console.warn(
+ 'Sorry, ASCII STL loading only works in browsers that support TextDecoder (https://caniuse.com/#feat=textencoder)'
+ );
+
+ return model;
+ }
+
+ var decoder = new TextDecoder('utf-8');
+ var lines = decoder.decode(reader);
+ var lineArray = lines.split('\n');
+ parseASCIISTL(model, lineArray);
+ }
+ return model;
+ }
+
+ /**
+ * This function checks if the file is in ASCII format or in Binary format
+ *
+ * It is done by searching keyword `solid` at the start of the file.
+ *
+ * An ASCII STL data must begin with `solid` as the first six bytes.
+ * However, ASCII STLs lacking the SPACE after the `d` are known to be
+ * plentiful. So, check the first 5 bytes for `solid`.
+ *
+ * Several encodings, such as UTF-8, precede the text with up to 5 bytes:
+ * https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding
+ * Search for `solid` to start anywhere after those prefixes.
+ */
+ function isBinary(data) {
+ var reader = new DataView(data);
+
+ // US-ASCII ordinal values for `s`, `o`, `l`, `i`, `d`
+ var solid = [115, 111, 108, 105, 100];
+ for (var off = 0; off < 5; off++) {
+ // If "solid" text is matched to the current offset, declare it to be an ASCII STL.
+ if (matchDataViewAt(solid, reader, off)) return false;
+ }
+
+ // Couldn't find "solid" text at the beginning; it is binary STL.
+ return true;
+ }
+
+ /**
+ * This function matches the `query` at the provided `offset`
+ */
+ function matchDataViewAt(query, reader, offset) {
+ // Check if each byte in query matches the corresponding byte from the current offset
+ for (var i = 0, il = query.length; i < il; i++) {
+ if (query[i] !== reader.getUint8(offset + i, false)) return false;
+ }
+
+ return true;
+ }
+
+ /**
+ * This function parses the Binary STL files.
+ * https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL
+ *
+ * Currently there is no support for the colors provided in STL files.
+ */
+ function parseBinarySTL(model, buffer) {
+ var reader = new DataView(buffer);
+
+ // Number of faces is present following the header
+ var faces = reader.getUint32(80, true);
+ var r,
+ g,
+ b,
+ hasColors = false,
+ colors;
+ var defaultR, defaultG, defaultB;
+
+ // Binary files contain 80-byte header, which is generally ignored.
+ for (var index = 0; index < 80 - 10; index++) {
+ // Check for `COLOR=`
+ if (
+ reader.getUint32(index, false) === 0x434f4c4f /*COLO*/ &&
+ reader.getUint8(index + 4) === 0x52 /*'R'*/ &&
+ reader.getUint8(index + 5) === 0x3d /*'='*/
+ ) {
+ hasColors = true;
+ colors = [];
+
+ defaultR = reader.getUint8(index + 6) / 255;
+ defaultG = reader.getUint8(index + 7) / 255;
+ defaultB = reader.getUint8(index + 8) / 255;
+ // To be used when color support is added
+ // alpha = reader.getUint8(index + 9) / 255;
+ }
+ }
+ var dataOffset = 84;
+ var faceLength = 12 * 4 + 2;
+
+ // Iterate the faces
+ for (var face = 0; face < faces; face++) {
+ var start = dataOffset + face * faceLength;
+ var normalX = reader.getFloat32(start, true);
+ var normalY = reader.getFloat32(start + 4, true);
+ var normalZ = reader.getFloat32(start + 8, true);
+
+ if (hasColors) {
+ var packedColor = reader.getUint16(start + 48, true);
+
+ if ((packedColor & 0x8000) === 0) {
+ // facet has its own unique color
+ r = (packedColor & 0x1f) / 31;
+ g = ((packedColor >> 5) & 0x1f) / 31;
+ b = ((packedColor >> 10) & 0x1f) / 31;
+ } else {
+ r = defaultR;
+ g = defaultG;
+ b = defaultB;
+ }
+ }
+
+ for (var i = 1; i <= 3; i++) {
+ var vertexstart = start + i * 12;
+
+ var newVertex = new _main.default.Vector(
+ reader.getFloat32(vertexstart, true),
+ reader.getFloat32(vertexstart + 8, true),
+ reader.getFloat32(vertexstart + 4, true)
+ );
+
+ model.vertices.push(newVertex);
+
+ if (hasColors) {
+ colors.push(r, g, b);
+ }
+ }
+
+ var newNormal = new _main.default.Vector(normalX, normalY, normalZ);
+
+ model.vertexNormals.push(newNormal, newNormal, newNormal);
+
+ model.faces.push([3 * face, 3 * face + 1, 3 * face + 2]);
+ model.uvs.push([0, 0], [0, 0], [0, 0]);
+ }
+ if (hasColors) {
+ // add support for colors here.
+ }
+ return model;
+ }
+
+ /**
+ * ASCII STL file starts with `solid 'nameOfFile'`
+ * Then contain the normal of the face, starting with `facet normal`
+ * Next contain a keyword indicating the start of face vertex, `outer loop`
+ * Next comes the three vertex, starting with `vertex x y z`
+ * Vertices ends with `endloop`
+ * Face ends with `endfacet`
+ * Next face starts with `facet normal`
+ * The end of the file is indicated by `endsolid`
+ */
+ function parseASCIISTL(model, lines) {
+ var state = '';
+ var curVertexIndex = [];
+ var newNormal, newVertex;
+
+ for (var iterator = 0; iterator < lines.length; ++iterator) {
+ var line = lines[iterator].trim();
+ var parts = line.split(' ');
+
+ for (var partsiterator = 0; partsiterator < parts.length; ++partsiterator) {
+ if (parts[partsiterator] === '') {
+ // Ignoring multiple whitespaces
+ parts.splice(partsiterator, 1);
+ }
+ }
+
+ if (parts.length === 0) {
+ // Remove newline
+ continue;
+ }
+
+ switch (state) {
+ case '': // First run
+ if (parts[0] !== 'solid') {
+ // Invalid state
+ console.error(line);
+ console.error(
+ 'Invalid state "'.concat(parts[0], '", should be "solid"')
+ );
+ return;
+ } else {
+ state = 'solid';
+ }
+ break;
+
+ case 'solid': // First face
+ if (parts[0] !== 'facet' || parts[1] !== 'normal') {
+ // Invalid state
+ console.error(line);
+ console.error(
+ 'Invalid state "'.concat(parts[0], '", should be "facet normal"')
+ );
+
+ return;
+ } else {
+ // Push normal for first face
+ newNormal = new _main.default.Vector(
+ parseFloat(parts[2]),
+ parseFloat(parts[3]),
+ parseFloat(parts[4])
+ );
+
+ model.vertexNormals.push(newNormal, newNormal, newNormal);
+ state = 'facet normal';
+ }
+ break;
+
+ case 'facet normal': // After normal is defined
+ if (parts[0] !== 'outer' || parts[1] !== 'loop') {
+ // Invalid State
+ console.error(line);
+ console.error(
+ 'Invalid state "'.concat(parts[0], '", should be "outer loop"')
+ );
+ return;
+ } else {
+ // Next should be vertices
+ state = 'vertex';
+ }
+ break;
+
+ case 'vertex':
+ if (parts[0] === 'vertex') {
+ //Vertex of triangle
+ newVertex = new _main.default.Vector(
+ parseFloat(parts[1]),
+ parseFloat(parts[2]),
+ parseFloat(parts[3])
+ );
+
+ model.vertices.push(newVertex);
+ model.uvs.push([0, 0]);
+ curVertexIndex.push(model.vertices.indexOf(newVertex));
+ } else if (parts[0] === 'endloop') {
+ // End of vertices
+ model.faces.push(curVertexIndex);
+ curVertexIndex = [];
+ state = 'endloop';
+ } else {
+ // Invalid State
+ console.error(line);
+ console.error(
+ 'Invalid state "'.concat(
+ parts[0],
+ '", should be "vertex" or "endloop"'
+ )
+ );
+
+ return;
+ }
+ break;
+
+ case 'endloop':
+ if (parts[0] !== 'endfacet') {
+ // End of face
+ console.error(line);
+ console.error(
+ 'Invalid state "'.concat(parts[0], '", should be "endfacet"')
+ );
+ return;
+ } else {
+ state = 'endfacet';
+ }
+ break;
+
+ case 'endfacet':
+ if (parts[0] === 'endsolid') {
+ // End of solid
+ } else if (parts[0] === 'facet' && parts[1] === 'normal') {
+ // Next face
+ newNormal = new _main.default.Vector(
+ parseFloat(parts[2]),
+ parseFloat(parts[3]),
+ parseFloat(parts[4])
+ );
+
+ model.vertexNormals.push(newNormal, newNormal, newNormal);
+ state = 'facet normal';
+ } else {
+ // Invalid State
+ console.error(line);
+ console.error(
+ 'Invalid state "'.concat(
+ parts[0],
+ '", should be "endsolid" or "facet normal"'
+ )
+ );
+
+ return;
+ }
+ break;
+
+ default:
+ console.error('Invalid state "'.concat(state, '"'));
+ break;
+ }
+ }
+ return model;
+ }
+
+ /**
+ * Render a 3d model to the screen.
+ *
+ * @method model
+ * @param {p5.Geometry} model Loaded 3d model to be rendered
+ * @example
+ *
+ *
+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ * octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * model(octahedron);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Vertically rotating 3-d octahedron.
+ *
+ */
+ _main.default.prototype.model = function(model) {
+ this._assert3d('model');
+ _main.default._validateParameters('model', arguments);
+ if (model.vertices.length > 0) {
+ if (!this._renderer.geometryInHash(model.gid)) {
+ model._makeTriangleEdges()._edgesToVertices();
+ this._renderer.createBuffers(model.gid, model);
+ }
+
+ this._renderer.drawBuffers(model.gid);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/main': 27, './p5.Geometry': 76 }
+ ],
+ 74: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Texture');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @module Lights, Camera
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */ /**
+ * Loads a custom shader from the provided vertex and fragment
+ * shader paths. The shader files are loaded asynchronously in the
+ * background, so this method should be used in preload().
+ *
+ * For now, there are three main types of shaders. p5 will automatically
+ * supply appropriate vertices, normals, colors, and lighting attributes
+ * if the parameters defined in the shader match the names.
+ *
+ * @method loadShader
+ * @param {String} vertFilename path to file containing vertex shader
+ * source code
+ * @param {String} fragFilename path to file containing fragment shader
+ * source code
+ * @param {function} [callback] callback to be executed after loadShader
+ * completes. On success, the Shader object is passed as the first argument.
+ * @param {function} [errorCallback] callback to be executed when an error
+ * occurs inside loadShader. On error, the error is passed as the first
+ * argument.
+ * @return {p5.Shader} a shader object created from the provided
+ * vertex and fragment shader files.
+ *
+ * @example
+ *
+ *
+ * let mandel;
+ * function preload() {
+ * // load the shader definitions from files
+ * mandel = loadShader('assets/shader.vert', 'assets/shader.frag');
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * // use the shader
+ * shader(mandel);
+ * noStroke();
+ * mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * }
+ *
+ * function draw() {
+ * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ *
+ * @alt
+ * zooming Mandelbrot set. a colorful, infinitely detailed fractal.
+ */ _main.default.prototype.loadShader = function(
+ vertFilename,
+ fragFilename,
+ callback,
+ errorCallback
+ ) {
+ _main.default._validateParameters('loadShader', arguments);
+ if (!errorCallback) {
+ errorCallback = console.error;
+ }
+
+ var loadedShader = new _main.default.Shader();
+
+ var self = this;
+ var loadedFrag = false;
+ var loadedVert = false;
+
+ var onLoad = function onLoad() {
+ self._decrementPreload();
+ if (callback) {
+ callback(loadedShader);
+ }
+ };
+
+ this.loadStrings(
+ vertFilename,
+ function(result) {
+ loadedShader._vertSrc = result.join('\n');
+ loadedVert = true;
+ if (loadedFrag) {
+ onLoad();
+ }
+ },
+ errorCallback
+ );
+
+ this.loadStrings(
+ fragFilename,
+ function(result) {
+ loadedShader._fragSrc = result.join('\n');
+ loadedFrag = true;
+ if (loadedVert) {
+ onLoad();
+ }
+ },
+ errorCallback
+ );
+
+ return loadedShader;
+ };
+
+ /**
+ * @method createShader
+ * @param {String} vertSrc source code for the vertex shader
+ * @param {String} fragSrc source code for the fragment shader
+ * @returns {p5.Shader} a shader object created from the provided
+ * vertex and fragment shaders.
+ *
+ * @example
+ *
+ *
+ * // the 'varying's are shared between both vertex & fragment shaders
+ * let varying = 'precision highp float; varying vec2 vPos;';
+ *
+ * // the vertex shader is called for each vertex
+ * let vs =
+ * varying +
+ * 'attribute vec3 aPosition;' +
+ * 'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';
+ *
+ * // the fragment shader is called for each pixel
+ * let fs =
+ * varying +
+ * 'uniform vec2 p;' +
+ * 'uniform float r;' +
+ * 'const int I = 500;' +
+ * 'void main() {' +
+ * ' vec2 c = p + vPos * r, z = c;' +
+ * ' float n = 0.0;' +
+ * ' for (int i = I; i > 0; i --) {' +
+ * ' if(z.x*z.x+z.y*z.y > 4.0) {' +
+ * ' n = float(i)/float(I);' +
+ * ' break;' +
+ * ' }' +
+ * ' z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +
+ * ' }' +
+ * ' gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +
+ * '}';
+ *
+ * let mandel;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // create and initialize the shader
+ * mandel = createShader(vs, fs);
+ * shader(mandel);
+ * noStroke();
+ *
+ * // 'p' is the center point of the Mandelbrot image
+ * mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * }
+ *
+ * function draw() {
+ * // 'r' is the size of the image in Mandelbrot-space
+ * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ *
+ * @alt
+ * zooming Mandelbrot set. a colorful, infinitely detailed fractal.
+ */
+ _main.default.prototype.createShader = function(vertSrc, fragSrc) {
+ this._assert3d('createShader');
+ _main.default._validateParameters('createShader', arguments);
+ return new _main.default.Shader(this._renderer, vertSrc, fragSrc);
+ };
+
+ /**
+ * The shader() function lets the user provide a custom shader
+ * to fill in shapes in WEBGL mode. Users can create their
+ * own shaders by loading vertex and fragment shaders with
+ * loadShader().
+ *
+ * @method shader
+ * @chainable
+ * @param {p5.Shader} [s] the desired p5.Shader to use for rendering
+ * shapes.
+ *
+ * @example
+ *
+ *
+ * // Click within the image to toggle
+ * // the shader used by the quad shape
+ * // Note: for an alternative approach to the same example,
+ * // involving changing uniforms please refer to:
+ * // https://p5js.org/reference/#/p5.Shader/setUniform
+ *
+ * let redGreen;
+ * let orangeBlue;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // initialize the colors for redGreen shader
+ * shader(redGreen);
+ * redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+ * redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+ *
+ * // initialize the colors for orangeBlue shader
+ * shader(orangeBlue);
+ * orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+ * orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+ *
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // update the offset values for each shader,
+ * // moving orangeBlue in vertical and redGreen
+ * // in horizontal direction
+ * orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ * redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
+ *
+ * if (showRedGreen === true) {
+ * shader(redGreen);
+ * } else {
+ * shader(orangeBlue);
+ * }
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ *
+ *
+ * @alt
+ * 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.
+ */
+ _main.default.prototype.shader = function(s) {
+ this._assert3d('shader');
+ _main.default._validateParameters('shader', arguments);
+
+ if (s._renderer === undefined) {
+ s._renderer = this._renderer;
+ }
+
+ if (s.isStrokeShader()) {
+ this._renderer.userStrokeShader = s;
+ } else {
+ this._renderer.userFillShader = s;
+ this._renderer._useNormalMaterial = false;
+ }
+
+ s.init();
+
+ return this;
+ };
+
+ /**
+ * This function restores the default shaders in WEBGL mode. Code that runs
+ * after resetShader() will not be affected by previously defined
+ * shaders. Should be run after shader().
+ *
+ * @method resetShader
+ * @chainable
+ */
+ _main.default.prototype.resetShader = function() {
+ this._renderer.userFillShader = this._renderer.userStrokeShader = null;
+ return this;
+ };
+
+ /**
+ * Normal material for geometry. You can view all
+ * possible materials in this
+ * example.
+ * @method normalMaterial
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * normalMaterial();
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Red, green and blue gradient.
+ *
+ */
+ _main.default.prototype.normalMaterial = function() {
+ this._assert3d('normalMaterial');
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('normalMaterial', args);
+ this._renderer.drawMode = constants.FILL;
+ this._renderer._useSpecularMaterial = false;
+ this._renderer._useEmissiveMaterial = false;
+ this._renderer._useNormalMaterial = true;
+ this._renderer.curFillColor = [1, 1, 1, 1];
+ this._renderer._setProperty('_doFill', true);
+ this.noStroke();
+ return this;
+ };
+
+ /**
+ * Texture for geometry. You can view other possible materials in this
+ * example.
+ * @method texture
+ * @param {p5.Image|p5.MediaElement|p5.Graphics} tex 2-dimensional graphics
+ * to render as texture
+ * @chainable
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * rotateZ(frameCount * 0.01);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * //pass image as texture
+ * texture(img);
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * pg = createGraphics(200, 200);
+ * pg.textSize(75);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * pg.background(255);
+ * pg.text('hello!', 0, 100);
+ * //pass image as texture
+ * texture(pg);
+ * rotateX(0.5);
+ * noStroke();
+ * plane(50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let vid;
+ * function preload() {
+ * vid = createVideo('assets/fingers.mov');
+ * vid.hide();
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * //pass video frame as texture
+ * texture(vid);
+ * rect(-40, -40, 80, 80);
+ * }
+ *
+ * function mousePressed() {
+ * vid.loop();
+ * }
+ *
+ *
+ *
+ * @alt
+ * Rotating view of many images umbrella and grid roof on a 3d plane
+ * black canvas
+ * black canvas
+ *
+ */
+ _main.default.prototype.texture = function(tex) {
+ this._assert3d('texture');
+ _main.default._validateParameters('texture', arguments);
+ if (tex.gifProperties) {
+ tex._animateGif(this);
+ }
+
+ this._renderer.drawMode = constants.TEXTURE;
+ this._renderer._useSpecularMaterial = false;
+ this._renderer._useEmissiveMaterial = false;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._tex = tex;
+ this._renderer._setProperty('_doFill', true);
+
+ return this;
+ };
+
+ /**
+ * Sets the coordinate space for texture mapping. The default mode is IMAGE
+ * which refers to the actual coordinates of the image.
+ * NORMAL refers to a normalized space of values ranging from 0 to 1.
+ * This function only works in WEBGL mode.
+ *
+ * With IMAGE, if an image is 100 x 200 pixels, mapping the image onto the entire
+ * size of a quad would require the points (0,0) (100, 0) (100,200) (0,200).
+ * The same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1).
+ * @method textureMode
+ * @param {Constant} mode either IMAGE or NORMAL
+ * @example
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * texture(img);
+ * textureMode(NORMAL);
+ * beginShape();
+ * vertex(-50, -50, 0, 0);
+ * vertex(50, -50, 1, 0);
+ * vertex(50, 50, 1, 1);
+ * vertex(-50, 50, 0, 1);
+ * endShape();
+ * }
+ *
+ *
+ *
+ * @alt
+ * the underside of a white umbrella and gridded ceiling above
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * texture(img);
+ * textureMode(NORMAL);
+ * beginShape();
+ * vertex(-50, -50, 0, 0);
+ * vertex(50, -50, img.width, 0);
+ * vertex(50, 50, img.width, img.height);
+ * vertex(-50, 50, 0, img.height);
+ * endShape();
+ * }
+ *
+ *
+ *
+ * @alt
+ * the underside of a white umbrella and gridded ceiling above
+ *
+ */
+ _main.default.prototype.textureMode = function(mode) {
+ if (mode !== constants.IMAGE && mode !== constants.NORMAL) {
+ console.warn(
+ 'You tried to set '.concat(
+ mode,
+ ' textureMode only supports IMAGE & NORMAL '
+ )
+ );
+ } else {
+ this._renderer.textureMode = mode;
+ }
+ };
+
+ /**
+ * Sets the global texture wrapping mode. This controls how textures behave
+ * when their uv's go outside of the 0 - 1 range. There are three options:
+ * CLAMP, REPEAT, and MIRROR.
+ *
+ * CLAMP causes the pixels at the edge of the texture to extend to the bounds
+ * REPEAT causes the texture to tile repeatedly until reaching the bounds
+ * MIRROR works similarly to REPEAT but it flips the texture with every new tile
+ *
+ * REPEAT & MIRROR are only available if the texture
+ * is a power of two size (128, 256, 512, 1024, etc.).
+ *
+ * This method will affect all textures in your sketch until a subsequent
+ * textureWrap call is made.
+ *
+ * If only one argument is provided, it will be applied to both the
+ * horizontal and vertical axes.
+ * @method textureWrap
+ * @param {Constant} wrapX either CLAMP, REPEAT, or MIRROR
+ * @param {Constant} [wrapY] either CLAMP, REPEAT, or MIRROR
+ * @example
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies128.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * textureWrap(MIRROR);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * let dX = mouseX;
+ * let dY = mouseY;
+ *
+ * let u = lerp(1.0, 2.0, dX);
+ * let v = lerp(1.0, 2.0, dY);
+ *
+ * scale(width / 2);
+ *
+ * texture(img);
+ *
+ * beginShape(TRIANGLES);
+ * vertex(-1, -1, 0, 0, 0);
+ * vertex(1, -1, 0, u, 0);
+ * vertex(1, 1, 0, u, v);
+ *
+ * vertex(1, 1, 0, u, v);
+ * vertex(-1, 1, 0, 0, v);
+ * vertex(-1, -1, 0, 0, 0);
+ * endShape();
+ * }
+ *
+ *
+ *
+ * @alt
+ * an image of the rocky mountains repeated in mirrored tiles
+ *
+ */
+ _main.default.prototype.textureWrap = function(wrapX) {
+ var wrapY =
+ arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : wrapX;
+ this._renderer.textureWrapX = wrapX;
+ this._renderer.textureWrapY = wrapY;
+
+ var textures = this._renderer.textures;
+ for (var i = 0; i < textures.length; i++) {
+ textures[i].setWrapMode(wrapX, wrapY);
+ }
+ };
+
+ /**
+ * Ambient material for geometry with a given color. You can view all
+ * possible materials in this
+ * example.
+ * @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
+ * @param {Number} [a] opacity
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * ambientLight(200);
+ * ambientMaterial(70, 130, 230);
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * radiating light source from top right of canvas
+ *
+ */
+ /**
+ * @method ambientMaterial
+ * @param {Number[]|String|p5.Color} color color, color Array, or CSS color string
+ * @chainable
+ */
+ _main.default.prototype.ambientMaterial = function(v1, v2, v3, a) {
+ this._assert3d('ambientMaterial');
+ _main.default._validateParameters('ambientMaterial', arguments);
+
+ var color = _main.default.prototype.color.apply(this, arguments);
+ this._renderer.curFillColor = color._array;
+ this._renderer._useSpecularMaterial = false;
+ this._renderer._useEmissiveMaterial = false;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._enableLighting = true;
+ this._renderer._tex = null;
+
+ return this;
+ };
+
+ /**
+ * 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.
+ * @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
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * ambientLight(0);
+ * emissiveMaterial(130, 230, 0);
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * radiating light source from top right of canvas
+ */
+ /**
+ * @method emissiveMaterial
+ * @param {Number[]|String|p5.Color} color color, color Array, or CSS color string
+ * @chainable
+ */
+ _main.default.prototype.emissiveMaterial = function(v1, v2, v3, a) {
+ this._assert3d('emissiveMaterial');
+ _main.default._validateParameters('emissiveMaterial', arguments);
+
+ var color = _main.default.prototype.color.apply(this, arguments);
+ this._renderer.curFillColor = color._array;
+ this._renderer._useSpecularMaterial = false;
+ this._renderer._useEmissiveMaterial = true;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._enableLighting = true;
+ this._renderer._tex = null;
+
+ return this;
+ };
+
+ /**
+ * Specular material for geometry with a given color. You can view all
+ * possible materials in this
+ * example.
+ * @method specularMaterial
+ * @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
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * ambientLight(50);
+ * pointLight(250, 250, 250, 100, 100, 30);
+ * specularMaterial(250);
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * diffused radiating light source from top right of canvas
+ *
+ */
+ /**
+ * @method specularMaterial
+ * @param {Number[]|String|p5.Color} color color Array, or CSS color string
+ * @chainable
+ */
+ _main.default.prototype.specularMaterial = function(v1, v2, v3, a) {
+ this._assert3d('specularMaterial');
+ _main.default._validateParameters('specularMaterial', arguments);
+
+ var color = _main.default.prototype.color.apply(this, arguments);
+ this._renderer.curFillColor = color._array;
+ this._renderer._useSpecularMaterial = true;
+ this._renderer._useEmissiveMaterial = false;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._enableLighting = true;
+ this._renderer._tex = null;
+
+ return this;
+ };
+
+ /**
+ * 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.
+ * @method shininess
+ * @param {Number} shine Degree of Shininess.
+ * Defaults to 1.
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * ambientLight(60, 60, 60);
+ * pointLight(255, 255, 255, locX, locY, 50);
+ * specularMaterial(250);
+ * translate(-25, 0, 0);
+ * shininess(1);
+ * sphere(20);
+ * translate(50, 0, 0);
+ * shininess(20);
+ * sphere(20);
+ * }
+ *
+ *
+ * @alt
+ * Shininess on Camera changes position with mouse
+ */
+ _main.default.prototype.shininess = function(shine) {
+ this._assert3d('shininess');
+ _main.default._validateParameters('shininess', arguments);
+
+ if (shine < 1) {
+ shine = 1;
+ }
+ this._renderer._useShininess = shine;
+ return this;
+ };
+
+ /**
+ * @private blends colors according to color components.
+ * If alpha value is less than 1, we need to enable blending
+ * on our gl context. Otherwise opaque objects need to a depthMask.
+ * @param {Number[]} color [description]
+ * @return {Number[]]} Normalized numbers array
+ */
+ _main.default.RendererGL.prototype._applyColorBlend = function(colors) {
+ var gl = this.GL;
+
+ var isTexture = this.drawMode === constants.TEXTURE;
+ if (isTexture || colors[colors.length - 1] < 1.0 || this._isErasing) {
+ gl.depthMask(isTexture);
+ gl.enable(gl.BLEND);
+ this._applyBlendMode();
+ } else {
+ gl.depthMask(true);
+ gl.disable(gl.BLEND);
+ }
+ return colors;
+ };
+
+ /**
+ * @private sets blending in gl context to curBlendMode
+ * @param {Number[]} color [description]
+ * @return {Number[]]} Normalized numbers array
+ */
+ _main.default.RendererGL.prototype._applyBlendMode = function() {
+ var gl = this.GL;
+ switch (this.curBlendMode) {
+ case constants.BLEND:
+ case constants.ADD:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.REMOVE:
+ gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);
+ gl.blendFunc(gl.SRC_ALPHA, gl.DST_ALPHA);
+ break;
+ case constants.MULTIPLY:
+ gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ZERO, gl.SRC_COLOR, gl.ONE, gl.ONE);
+ break;
+ case constants.SCREEN:
+ gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE_MINUS_DST_COLOR, gl.ONE, gl.ONE, gl.ONE);
+ break;
+ case constants.EXCLUSION:
+ gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+ gl.blendFuncSeparate(
+ gl.ONE_MINUS_DST_COLOR,
+ gl.ONE_MINUS_SRC_COLOR,
+ gl.ONE,
+ gl.ONE
+ );
+
+ break;
+ case constants.REPLACE:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ZERO);
+ break;
+ case constants.SUBTRACT:
+ gl.blendEquationSeparate(gl.FUNC_REVERSE_SUBTRACT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ONE, gl.ONE);
+ break;
+ case constants.DARKEST:
+ if (this.blendExt) {
+ gl.blendEquationSeparate(this.blendExt.MIN_EXT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+ } else {
+ console.warn(
+ 'blendMode(DARKEST) does not work in your browser in WEBGL mode.'
+ );
+ }
+ break;
+ case constants.LIGHTEST:
+ if (this.blendExt) {
+ gl.blendEquationSeparate(this.blendExt.MAX_EXT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+ } else {
+ console.warn(
+ 'blendMode(LIGHTEST) does not work in your browser in WEBGL mode.'
+ );
+ }
+ break;
+ default:
+ console.error(
+ 'Oops! Somehow RendererGL set curBlendMode to an unsupported mode.'
+ );
+
+ break;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27, './p5.Texture': 82 }
+ ],
+ 75: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /** ////////////////////////////////////////////////////////////////////////////////
+ * @module Lights, Camera
+ * @submodule Camera
+ * @requires core
+ */
+ // p5.Prototype Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Sets the camera position for a 3D sketch. Parameters for this function define
+ * the position for the camera, the center of the sketch (where the camera is
+ * pointing), and an up direction (the orientation of the camera).
+ *
+ * This function simulates the movements of the camera, allowing objects to be
+ * viewed from various angles. Remember, it does not move the objects themselves
+ * but the camera instead. For example when centerX value is positive, the camera
+ * is rotating to the right side of the sketch, so the object would seem like
+ * moving to the left.
+ *
+ * See this example to view the position of your camera.
+ *
+ * When called with no arguments, this function creates a default camera
+ * equivalent to
+ * camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
+ * @method camera
+ * @for p5
+ * @param {Number} [x] camera position value on x axis
+ * @param {Number} [y] camera position value on y axis
+ * @param {Number} [z] camera position value on z axis
+ * @param {Number} [centerX] x coordinate representing center of the sketch
+ * @param {Number} [centerY] y coordinate representing center of the sketch
+ * @param {Number} [centerZ] z coordinate representing center of the sketch
+ * @param {Number} [upX] x component of direction 'up' from camera
+ * @param {Number} [upY] y component of direction 'up' from camera
+ * @param {Number} [upZ] z component of direction 'up' from camera
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(204);
+ * //move the camera away from the plane by a sin wave
+ * camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
+ * plane(10, 10);
+ * }
+ *
+ *
+ *
+ * @example
+ *
+ *
+ * //move slider to see changes!
+ * //sliders control the first 6 parameters of camera()
+ * let sliderGroup = [];
+ * let X;
+ * let Y;
+ * let Z;
+ * let centerX;
+ * let centerY;
+ * let centerZ;
+ * let h = 20;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * //create sliders
+ * for (var i = 0; i < 6; i++) {
+ * if (i === 2) {
+ * sliderGroup[i] = createSlider(10, 400, 200);
+ * } else {
+ * sliderGroup[i] = createSlider(-400, 400, 0);
+ * }
+ * h = map(i, 0, 6, 5, 85);
+ * sliderGroup[i].position(10, height + h);
+ * sliderGroup[i].style('width', '80px');
+ * }
+ * }
+ *
+ * function draw() {
+ * background(60);
+ * // assigning sliders' value to each parameters
+ * X = sliderGroup[0].value();
+ * Y = sliderGroup[1].value();
+ * Z = sliderGroup[2].value();
+ * centerX = sliderGroup[3].value();
+ * centerY = sliderGroup[4].value();
+ * centerZ = sliderGroup[5].value();
+ * camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);
+ * stroke(255);
+ * fill(255, 102, 94);
+ * box(85);
+ * }
+ *
+ *
+ * @alt
+ * White square repeatedly grows to fill canvas and then shrinks.
+ *
+ */ _main.default.prototype.camera = function() {
+ var _this$_renderer$_curC;
+ this._assert3d('camera');
+ for (
+ var _len = arguments.length, args = new Array(_len), _key = 0;
+ _key < _len;
+ _key++
+ ) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('camera', args);
+ (_this$_renderer$_curC = this._renderer._curCamera).camera.apply(
+ _this$_renderer$_curC,
+ args
+ );
+ return this;
+ };
+
+ /**
+ * Sets a perspective projection for the camera in a 3D sketch. This projection
+ * represents depth through foreshortening: objects that are close to the camera
+ * appear their actual size while those that are further away from the camera
+ * appear smaller. The parameters to this function define the viewing frustum
+ * (the truncated pyramid within which objects are seen by the camera) through
+ * vertical field of view, aspect ratio (usually width/height), and near and far
+ * clipping planes.
+ *
+ * When called with no arguments, the defaults
+ * provided are equivalent to
+ * perspective(PI/3.0, width/height, eyeZ/10.0, eyeZ*10.0), where eyeZ
+ * is equal to ((height/2.0) / tan(PI*60.0/360.0));
+ * @method perspective
+ * @for p5
+ * @param {Number} [fovy] camera frustum vertical field of view,
+ * from bottom to top of view, in angleMode units
+ * @param {Number} [aspect] camera frustum aspect ratio
+ * @param {Number} [near] frustum near plane length
+ * @param {Number} [far] frustum far plane length
+ * @chainable
+ * @example
+ *
+ *
+ * //drag the mouse to look around!
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * perspective(PI / 3.0, width / height, 0.1, 500);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * normalMaterial();
+ *
+ * rotateX(-0.3);
+ * rotateY(-0.2);
+ * translate(0, 0, -50);
+ *
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 95);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 95);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ *
+ * @alt
+ * two colored 3D boxes move back and forth, rotating as mouse is dragged.
+ *
+ */
+ _main.default.prototype.perspective = function() {
+ var _this$_renderer$_curC2;
+ this._assert3d('perspective');
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('perspective', args);
+ (_this$_renderer$_curC2 = this._renderer._curCamera).perspective.apply(
+ _this$_renderer$_curC2,
+ args
+ );
+ return this;
+ };
+
+ /**
+ * Sets an orthographic projection for the camera in a 3D sketch and defines a
+ * box-shaped viewing frustum within which objects are seen. In this projection,
+ * all objects with the same dimension appear the same size, regardless of
+ * whether they are near or far from the camera. The parameters to this
+ * function specify the viewing frustum where left and right are the minimum and
+ * maximum x values, top and bottom are the minimum and maximum y values, and near
+ * and far are the minimum and maximum z values. If no parameters are given, the
+ * default is used: ortho(-width/2, width/2, -height/2, height/2).
+ * @method ortho
+ * @for p5
+ * @param {Number} [left] camera frustum left plane
+ * @param {Number} [right] camera frustum right plane
+ * @param {Number} [bottom] camera frustum bottom plane
+ * @param {Number} [top] camera frustum top plane
+ * @param {Number} [near] camera frustum near plane
+ * @param {Number} [far] camera frustum far plane
+ * @chainable
+ * @example
+ *
+ *
+ * //drag the mouse to look around!
+ * //there's no vanishing point
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * normalMaterial();
+ *
+ * rotateX(0.2);
+ * rotateY(-0.2);
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 65);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 65);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ *
+ * @alt
+ * two 3D boxes move back and forth along same plane, rotating as mouse is dragged.
+ *
+ */
+ _main.default.prototype.ortho = function() {
+ var _this$_renderer$_curC3;
+ this._assert3d('ortho');
+ for (
+ var _len3 = arguments.length, args = new Array(_len3), _key3 = 0;
+ _key3 < _len3;
+ _key3++
+ ) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('ortho', args);
+ (_this$_renderer$_curC3 = this._renderer._curCamera).ortho.apply(
+ _this$_renderer$_curC3,
+ args
+ );
+ return this;
+ };
+
+ /**
+ * Sets a perspective matrix as defined by the parameters.
+ *
+ * A frustum is a geometric form: a pyramid with its top
+ * cut off. With the viewer's eye at the imaginary top of
+ * the pyramid, the six planes of the frustum act as clipping
+ * planes when rendering a 3D view. Thus, any form inside the
+ * clipping planes is visible; anything outside
+ * those planes is not visible.
+ *
+ * Setting the frustum changes the perspective of the scene being rendered.
+ * This can be achieved more simply in many cases by using
+ * perspective().
+ *
+ * @method frustum
+ * @for p5
+ * @param {Number} [left] camera frustum left plane
+ * @param {Number} [right] camera frustum right plane
+ * @param {Number} [bottom] camera frustum bottom plane
+ * @param {Number} [top] camera frustum top plane
+ * @param {Number} [near] camera frustum near plane
+ * @param {Number} [far] camera frustum far plane
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * strokeWeight(10);
+ * stroke(0, 0, 255);
+ * noFill();
+ *
+ * rotateY(-0.2);
+ * rotateX(-0.3);
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 25);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 25);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ *
+ * @alt
+ * two 3D boxes move back and forth along same plane, rotating as mouse is dragged.
+ *
+ */
+ _main.default.prototype.frustum = function() {
+ var _this$_renderer$_curC4;
+ this._assert3d('frustum');
+ for (
+ var _len4 = arguments.length, args = new Array(_len4), _key4 = 0;
+ _key4 < _len4;
+ _key4++
+ ) {
+ args[_key4] = arguments[_key4];
+ }
+ _main.default._validateParameters('frustum', args);
+ (_this$_renderer$_curC4 = this._renderer._curCamera).frustum.apply(
+ _this$_renderer$_curC4,
+ args
+ );
+ return this;
+ };
+
+ ////////////////////////////////////////////////////////////////////////////////
+ // p5.Camera
+ ////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Creates a new p5.Camera object and tells the
+ * renderer to use that camera.
+ * Returns the p5.Camera object.
+ * @method createCamera
+ * @return {p5.Camera} The newly created camera object.
+ * @for p5
+ */
+ _main.default.prototype.createCamera = function() {
+ this._assert3d('createCamera');
+ var _cam = new _main.default.Camera(this._renderer);
+
+ // compute default camera settings, then set a default camera
+ _cam._computeCameraDefaultSettings();
+ _cam._setDefaultCamera();
+
+ // set renderer current camera to the new camera
+ this._renderer._curCamera = _cam;
+
+ return _cam;
+ };
+
+ /**
+ * This class describes a camera for use in p5's
+ *
+ * WebGL mode. It contains camera position, orientation, and projection
+ * information necessary for rendering a 3D scene.
+ *
+ * New p5.Camera objects can be made through the
+ * createCamera() function and controlled through
+ * the methods described below. A camera created in this way will use a default
+ * position in the scene and a default perspective projection until these
+ * properties are changed through the various methods available. It is possible
+ * to create multiple cameras, in which case the current camera
+ * can be set through the setCamera() method.
+ *
+ *
+ * Note:
+ * The methods below operate in two coordinate systems: the 'world' coordinate
+ * system describe positions in terms of their relationship to the origin along
+ * the X, Y and Z axes whereas the camera's 'local' coordinate system
+ * describes positions from the camera's point of view: left-right, up-down,
+ * and forward-backward. The move() method,
+ * for instance, moves the camera along its own axes, whereas the
+ * setPosition()
+ * method sets the camera's position in world-space.
+ *
+ *
+ * @class p5.Camera
+ * @param {rendererGL} rendererGL instance of WebGL renderer
+ * @example
+ *
+ *
+ * let cam;
+ * let delta = 0.01;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * // set initial pan angle
+ * cam.pan(-0.8);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // pan camera according to angle 'delta'
+ * cam.pan(delta);
+ *
+ * // every 160 frames, switch direction
+ * if (frameCount % 160 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * rotateX(frameCount * 0.01);
+ * translate(-100, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * camera view pans left and right across a series of rotating 3D boxes.
+ *
+ */
+ _main.default.Camera = function(renderer) {
+ this._renderer = renderer;
+
+ this.cameraType = 'default';
+
+ this.cameraMatrix = new _main.default.Matrix();
+ this.projMatrix = new _main.default.Matrix();
+ };
+
+ ////////////////////////////////////////////////////////////////////////////////
+ // Camera Projection Methods
+ ////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Sets a perspective projection for a p5.Camera object and sets parameters
+ * for that projection according to perspective()
+ * syntax.
+ * @method perspective
+ * @for p5.Camera
+ */
+ _main.default.Camera.prototype.perspective = function(fovy, aspect, near, far) {
+ this.cameraType = arguments.length > 0 ? 'custom' : 'default';
+ if (typeof fovy === 'undefined') {
+ fovy = this.defaultCameraFOV;
+ // this avoids issue where setting angleMode(DEGREES) before calling
+ // perspective leads to a smaller than expected FOV (because
+ // _computeCameraDefaultSettings computes in radians)
+ this.cameraFOV = fovy;
+ } else {
+ this.cameraFOV = this._renderer._pInst._toRadians(fovy);
+ }
+ if (typeof aspect === 'undefined') {
+ aspect = this.defaultAspectRatio;
+ }
+ if (typeof near === 'undefined') {
+ near = this.defaultCameraNear;
+ }
+ if (typeof far === 'undefined') {
+ far = this.defaultCameraFar;
+ }
+
+ if (near <= 0.0001) {
+ near = 0.01;
+ console.log(
+ 'Avoid perspective near plane values close to or below 0. ' +
+ 'Setting value to 0.01.'
+ );
+ }
+
+ if (far < near) {
+ console.log(
+ 'Perspective far plane value is less than near plane value. ' +
+ 'Nothing will be shown.'
+ );
+ }
+
+ this.aspectRatio = aspect;
+ this.cameraNear = near;
+ this.cameraFar = far;
+
+ this.projMatrix = _main.default.Matrix.identity();
+
+ var f = 1.0 / Math.tan(this.cameraFOV / 2);
+ var nf = 1.0 / (this.cameraNear - this.cameraFar);
+
+ // prettier-ignore
+ this.projMatrix.set(f / aspect, 0, 0, 0,
+ 0, -f, 0, 0,
+ 0, 0, (far + near) * nf, -1,
+ 0, 0, 2 * far * near * nf, 0);
+
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(
+ this.projMatrix.mat4[0],
+ this.projMatrix.mat4[1],
+ this.projMatrix.mat4[2],
+ this.projMatrix.mat4[3],
+ this.projMatrix.mat4[4],
+ this.projMatrix.mat4[5],
+ this.projMatrix.mat4[6],
+ this.projMatrix.mat4[7],
+ this.projMatrix.mat4[8],
+ this.projMatrix.mat4[9],
+ this.projMatrix.mat4[10],
+ this.projMatrix.mat4[11],
+ this.projMatrix.mat4[12],
+ this.projMatrix.mat4[13],
+ this.projMatrix.mat4[14],
+ this.projMatrix.mat4[15]
+ );
+ }
+ };
+
+ /**
+ * Sets an orthographic projection for a p5.Camera object and sets parameters
+ * for that projection according to ortho() syntax.
+ * @method ortho
+ * @for p5.Camera
+ */
+ _main.default.Camera.prototype.ortho = function(
+ left,
+ right,
+ bottom,
+ top,
+ near,
+ far
+ ) {
+ if (left === undefined) left = -this._renderer.width / 2;
+ if (right === undefined) right = +this._renderer.width / 2;
+ if (bottom === undefined) bottom = -this._renderer.height / 2;
+ if (top === undefined) top = +this._renderer.height / 2;
+ if (near === undefined) near = 0;
+ if (far === undefined)
+ far = Math.max(this._renderer.width, this._renderer.height);
+
+ var w = right - left;
+ var h = top - bottom;
+ var d = far - near;
+
+ var x = +2.0 / w;
+ var y = +2.0 / h;
+ var z = -2.0 / d;
+
+ var tx = -(right + left) / w;
+ var ty = -(top + bottom) / h;
+ var tz = -(far + near) / d;
+
+ this.projMatrix = _main.default.Matrix.identity();
+
+ // prettier-ignore
+ this.projMatrix.set(x, 0, 0, 0,
+ 0, -y, 0, 0,
+ 0, 0, z, 0,
+ tx, ty, tz, 1);
+
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(
+ this.projMatrix.mat4[0],
+ this.projMatrix.mat4[1],
+ this.projMatrix.mat4[2],
+ this.projMatrix.mat4[3],
+ this.projMatrix.mat4[4],
+ this.projMatrix.mat4[5],
+ this.projMatrix.mat4[6],
+ this.projMatrix.mat4[7],
+ this.projMatrix.mat4[8],
+ this.projMatrix.mat4[9],
+ this.projMatrix.mat4[10],
+ this.projMatrix.mat4[11],
+ this.projMatrix.mat4[12],
+ this.projMatrix.mat4[13],
+ this.projMatrix.mat4[14],
+ this.projMatrix.mat4[15]
+ );
+ }
+
+ this.cameraType = 'custom';
+ };
+
+ /**
+ * @method frustum
+ * @for p5.Camera
+ */
+ _main.default.Camera.prototype.frustum = function(
+ left,
+ right,
+ bottom,
+ top,
+ near,
+ far
+ ) {
+ if (left === undefined) left = -this._renderer.width / 2;
+ if (right === undefined) right = +this._renderer.width / 2;
+ if (bottom === undefined) bottom = -this._renderer.height / 2;
+ if (top === undefined) top = +this._renderer.height / 2;
+ if (near === undefined) near = 0;
+ if (far === undefined)
+ far = Math.max(this._renderer.width, this._renderer.height);
+
+ var w = right - left;
+ var h = top - bottom;
+ var d = far - near;
+
+ var x = +(2.0 * near) / w;
+ var y = +(2.0 * near) / h;
+ var z = -(2.0 * far * near) / d;
+
+ var tx = (right + left) / w;
+ var ty = (top + bottom) / h;
+ var tz = -(far + near) / d;
+
+ this.projMatrix = _main.default.Matrix.identity();
+
+ // prettier-ignore
+ this.projMatrix.set(x, 0, 0, 0,
+ 0, y, 0, 0,
+ tx, ty, tz, -1,
+ 0, 0, z, 0);
+
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(
+ this.projMatrix.mat4[0],
+ this.projMatrix.mat4[1],
+ this.projMatrix.mat4[2],
+ this.projMatrix.mat4[3],
+ this.projMatrix.mat4[4],
+ this.projMatrix.mat4[5],
+ this.projMatrix.mat4[6],
+ this.projMatrix.mat4[7],
+ this.projMatrix.mat4[8],
+ this.projMatrix.mat4[9],
+ this.projMatrix.mat4[10],
+ this.projMatrix.mat4[11],
+ this.projMatrix.mat4[12],
+ this.projMatrix.mat4[13],
+ this.projMatrix.mat4[14],
+ this.projMatrix.mat4[15]
+ );
+ }
+
+ this.cameraType = 'custom';
+ };
+
+ ////////////////////////////////////////////////////////////////////////////////
+ // Camera Orientation Methods
+ ////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Rotate camera view about arbitrary axis defined by x,y,z
+ * based on http://learnwebgl.brown37.net/07_cameras/camera_rotating_motion.html
+ * @method _rotateView
+ * @private
+ */
+ _main.default.Camera.prototype._rotateView = function(a, x, y, z) {
+ var centerX = this.centerX;
+ var centerY = this.centerY;
+ var centerZ = this.centerZ;
+
+ // move center by eye position such that rotation happens around eye position
+ centerX -= this.eyeX;
+ centerY -= this.eyeY;
+ centerZ -= this.eyeZ;
+
+ var rotation = _main.default.Matrix.identity(this._renderer._pInst);
+ rotation.rotate(this._renderer._pInst._toRadians(a), x, y, z);
+
+ // prettier-ignore
+ var rotatedCenter = [
+ centerX * rotation.mat4[0] + centerY * rotation.mat4[4] + centerZ * rotation.mat4[8],
+ centerX * rotation.mat4[1] + centerY * rotation.mat4[5] + centerZ * rotation.mat4[9],
+ centerX * rotation.mat4[2] + centerY * rotation.mat4[6] + centerZ * rotation.mat4[10]];
+
+ // add eye position back into center
+ rotatedCenter[0] += this.eyeX;
+ rotatedCenter[1] += this.eyeY;
+ rotatedCenter[2] += this.eyeZ;
+
+ this.camera(
+ this.eyeX,
+ this.eyeY,
+ this.eyeZ,
+ rotatedCenter[0],
+ rotatedCenter[1],
+ rotatedCenter[2],
+ this.upX,
+ this.upY,
+ this.upZ
+ );
+ };
+
+ /**
+ * Panning rotates the camera view to the left and right.
+ * @method pan
+ * @param {Number} angle amount to rotate camera in current
+ * angleMode units.
+ * Greater than 0 values rotate counterclockwise (to the left).
+ * @example
+ *
+ *
+ * let cam;
+ * let delta = 0.01;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * // set initial pan angle
+ * cam.pan(-0.8);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // pan camera according to angle 'delta'
+ * cam.pan(delta);
+ *
+ * // every 160 frames, switch direction
+ * if (frameCount % 160 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * rotateX(frameCount * 0.01);
+ * translate(-100, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * camera view pans left and right across a series of rotating 3D boxes.
+ *
+ */
+ _main.default.Camera.prototype.pan = function(amount) {
+ var local = this._getLocalAxes();
+ this._rotateView(amount, local.y[0], local.y[1], local.y[2]);
+ };
+
+ /**
+ * Tilting rotates the camera view up and down.
+ * @method tilt
+ * @param {Number} angle amount to rotate camera in current
+ * angleMode units.
+ * Greater than 0 values rotate counterclockwise (to the left).
+ * @example
+ *
+ *
+ * let cam;
+ * let delta = 0.01;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * // set initial tilt
+ * cam.tilt(-0.8);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // pan camera according to angle 'delta'
+ * cam.tilt(delta);
+ *
+ * // every 160 frames, switch direction
+ * if (frameCount % 160 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * rotateY(frameCount * 0.01);
+ * translate(0, -100, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * camera view tilts up and down across a series of rotating 3D boxes.
+ */
+ _main.default.Camera.prototype.tilt = function(amount) {
+ var local = this._getLocalAxes();
+ this._rotateView(amount, local.x[0], local.x[1], local.x[2]);
+ };
+
+ /**
+ * Reorients the camera to look at a position in world space.
+ * @method lookAt
+ * @for p5.Camera
+ * @param {Number} x x position of a point in world space
+ * @param {Number} y y position of a point in world space
+ * @param {Number} z z position of a point in world space
+ * @example
+ *
+ *
+ * let cam;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // look at a new random point every 60 frames
+ * if (frameCount % 60 === 0) {
+ * cam.lookAt(random(-100, 100), random(-50, 50), 0);
+ * }
+ *
+ * rotateX(frameCount * 0.01);
+ * translate(-100, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * camera view of rotating 3D cubes changes to look at a new random
+ * point every second .
+ */
+ _main.default.Camera.prototype.lookAt = function(x, y, z) {
+ this.camera(
+ this.eyeX,
+ this.eyeY,
+ this.eyeZ,
+ x,
+ y,
+ z,
+ this.upX,
+ this.upY,
+ this.upZ
+ );
+ };
+
+ ////////////////////////////////////////////////////////////////////////////////
+ // Camera Position Methods
+ ////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Sets a camera's position and orientation. This is equivalent to calling
+ * camera() on a p5.Camera object.
+ * @method camera
+ * @for p5.Camera
+ */
+ _main.default.Camera.prototype.camera = function(
+ eyeX,
+ eyeY,
+ eyeZ,
+ centerX,
+ centerY,
+ centerZ,
+ upX,
+ upY,
+ upZ
+ ) {
+ if (typeof eyeX === 'undefined') {
+ eyeX = this.defaultEyeX;
+ eyeY = this.defaultEyeY;
+ eyeZ = this.defaultEyeZ;
+ centerX = eyeX;
+ centerY = eyeY;
+ centerZ = 0;
+ upX = 0;
+ upY = 1;
+ upZ = 0;
+ }
+
+ this.eyeX = eyeX;
+ this.eyeY = eyeY;
+ this.eyeZ = eyeZ;
+
+ this.centerX = centerX;
+ this.centerY = centerY;
+ this.centerZ = centerZ;
+
+ this.upX = upX;
+ this.upY = upY;
+ this.upZ = upZ;
+
+ var local = this._getLocalAxes();
+
+ // the camera affects the model view matrix, insofar as it
+ // inverse translates the world to the eye position of the camera
+ // and rotates it.
+ // prettier-ignore
+ this.cameraMatrix.set(local.x[0], local.y[0], local.z[0], 0,
+ local.x[1], local.y[1], local.z[1], 0,
+ local.x[2], local.y[2], local.z[2], 0,
+ 0, 0, 0, 1);
+
+ var tx = -eyeX;
+ var ty = -eyeY;
+ var tz = -eyeZ;
+
+ this.cameraMatrix.translate([tx, ty, tz]);
+
+ if (this._isActive()) {
+ this._renderer.uMVMatrix.set(
+ this.cameraMatrix.mat4[0],
+ this.cameraMatrix.mat4[1],
+ this.cameraMatrix.mat4[2],
+ this.cameraMatrix.mat4[3],
+ this.cameraMatrix.mat4[4],
+ this.cameraMatrix.mat4[5],
+ this.cameraMatrix.mat4[6],
+ this.cameraMatrix.mat4[7],
+ this.cameraMatrix.mat4[8],
+ this.cameraMatrix.mat4[9],
+ this.cameraMatrix.mat4[10],
+ this.cameraMatrix.mat4[11],
+ this.cameraMatrix.mat4[12],
+ this.cameraMatrix.mat4[13],
+ this.cameraMatrix.mat4[14],
+ this.cameraMatrix.mat4[15]
+ );
+ }
+ return this;
+ };
+
+ /**
+ * Move camera along its local axes while maintaining current camera orientation.
+ * @method move
+ * @param {Number} x amount to move along camera's left-right axis
+ * @param {Number} y amount to move along camera's up-down axis
+ * @param {Number} z amount to move along camera's forward-backward axis
+ * @example
+ *
+ *
+ * // see the camera move along its own axes while maintaining its orientation
+ * let cam;
+ * let delta = 0.5;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // move the camera along its local axes
+ * cam.move(delta, delta, 0);
+ *
+ * // every 100 frames, switch direction
+ * if (frameCount % 150 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * translate(-10, -10, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * camera view moves along a series of 3D boxes, maintaining the same
+ * orientation throughout the move
+ */
+ _main.default.Camera.prototype.move = function(x, y, z) {
+ var local = this._getLocalAxes();
+
+ // scale local axes by movement amounts
+ // based on http://learnwebgl.brown37.net/07_cameras/camera_linear_motion.html
+ var dx = [local.x[0] * x, local.x[1] * x, local.x[2] * x];
+ var dy = [local.y[0] * y, local.y[1] * y, local.y[2] * y];
+ var dz = [local.z[0] * z, local.z[1] * z, local.z[2] * z];
+
+ this.camera(
+ this.eyeX + dx[0] + dy[0] + dz[0],
+ this.eyeY + dx[1] + dy[1] + dz[1],
+ this.eyeZ + dx[2] + dy[2] + dz[2],
+ this.centerX + dx[0] + dy[0] + dz[0],
+ this.centerY + dx[1] + dy[1] + dz[1],
+ this.centerZ + dx[2] + dy[2] + dz[2],
+ 0,
+ 1,
+ 0
+ );
+ };
+
+ /**
+ * Set camera position in world-space while maintaining current camera
+ * orientation.
+ * @method setPosition
+ * @param {Number} x x position of a point in world space
+ * @param {Number} y y position of a point in world space
+ * @param {Number} z z position of a point in world space
+ * @example
+ *
+ *
+ * // press '1' '2' or '3' keys to set camera position
+ *
+ * let cam;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // '1' key
+ * if (keyIsDown(49)) {
+ * cam.setPosition(30, 0, 80);
+ * }
+ * // '2' key
+ * if (keyIsDown(50)) {
+ * cam.setPosition(0, 0, 80);
+ * }
+ * // '3' key
+ * if (keyIsDown(51)) {
+ * cam.setPosition(-30, 0, 80);
+ * }
+ *
+ * box(20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * camera position changes as the user presses keys, altering view of a 3D box
+ */
+ _main.default.Camera.prototype.setPosition = function(x, y, z) {
+ var diffX = x - this.eyeX;
+ var diffY = y - this.eyeY;
+ var diffZ = z - this.eyeZ;
+
+ this.camera(
+ x,
+ y,
+ z,
+ this.centerX + diffX,
+ this.centerY + diffY,
+ this.centerZ + diffZ,
+ 0,
+ 1,
+ 0
+ );
+ };
+
+ ////////////////////////////////////////////////////////////////////////////////
+ // Camera Helper Methods
+ ////////////////////////////////////////////////////////////////////////////////
+
+ // @TODO: combine this function with _setDefaultCamera to compute these values
+ // as-needed
+ _main.default.Camera.prototype._computeCameraDefaultSettings = function() {
+ this.defaultCameraFOV = 60 / 180 * Math.PI;
+ this.defaultAspectRatio = this._renderer.width / this._renderer.height;
+ this.defaultEyeX = 0;
+ this.defaultEyeY = 0;
+ this.defaultEyeZ =
+ this._renderer.height / 2.0 / Math.tan(this.defaultCameraFOV / 2.0);
+ this.defaultCenterX = 0;
+ this.defaultCenterY = 0;
+ this.defaultCenterZ = 0;
+ this.defaultCameraNear = this.defaultEyeZ * 0.1;
+ this.defaultCameraFar = this.defaultEyeZ * 10;
+ };
+
+ //detect if user didn't set the camera
+ //then call this function below
+ _main.default.Camera.prototype._setDefaultCamera = function() {
+ this.cameraFOV = this.defaultCameraFOV;
+ this.aspectRatio = this.defaultAspectRatio;
+ this.eyeX = this.defaultEyeX;
+ this.eyeY = this.defaultEyeY;
+ this.eyeZ = this.defaultEyeZ;
+ this.centerX = this.defaultCenterX;
+ this.centerY = this.defaultCenterY;
+ this.centerZ = this.defaultCenterZ;
+ this.upX = 0;
+ this.upY = 1;
+ this.upZ = 0;
+ this.cameraNear = this.defaultCameraNear;
+ this.cameraFar = this.defaultCameraFar;
+
+ this.perspective();
+ this.camera();
+
+ this.cameraType = 'default';
+ };
+
+ _main.default.Camera.prototype._resize = function() {
+ // If we're using the default camera, update the aspect ratio
+ if (this.cameraType === 'default') {
+ this._computeCameraDefaultSettings();
+ this._setDefaultCamera();
+ } else {
+ this.perspective(
+ this.cameraFOV,
+ this._renderer.width / this._renderer.height
+ );
+ }
+ };
+
+ /**
+ * Returns a copy of a camera.
+ * @method copy
+ * @private
+ */
+ _main.default.Camera.prototype.copy = function() {
+ var _cam = new _main.default.Camera(this._renderer);
+ _cam.cameraFOV = this.cameraFOV;
+ _cam.aspectRatio = this.aspectRatio;
+ _cam.eyeX = this.eyeX;
+ _cam.eyeY = this.eyeY;
+ _cam.eyeZ = this.eyeZ;
+ _cam.centerX = this.centerX;
+ _cam.centerY = this.centerY;
+ _cam.centerZ = this.centerZ;
+ _cam.cameraNear = this.cameraNear;
+ _cam.cameraFar = this.cameraFar;
+
+ _cam.cameraType = this.cameraType;
+
+ _cam.cameraMatrix = this.cameraMatrix.copy();
+ _cam.projMatrix = this.projMatrix.copy();
+
+ return _cam;
+ };
+
+ /**
+ * Returns a camera's local axes: left-right, up-down, and forward-backward,
+ * as defined by vectors in world-space.
+ * @method _getLocalAxes
+ * @private
+ */
+ _main.default.Camera.prototype._getLocalAxes = function() {
+ // calculate camera local Z vector
+ var z0 = this.eyeX - this.centerX;
+ var z1 = this.eyeY - this.centerY;
+ var z2 = this.eyeZ - this.centerZ;
+
+ // normalize camera local Z vector
+ var eyeDist = Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
+ if (eyeDist !== 0) {
+ z0 /= eyeDist;
+ z1 /= eyeDist;
+ z2 /= eyeDist;
+ }
+
+ // calculate camera Y vector
+ var y0 = this.upX;
+ var y1 = this.upY;
+ var y2 = this.upZ;
+
+ // compute camera local X vector as up vector (local Y) cross local Z
+ var x0 = y1 * z2 - y2 * z1;
+ var x1 = -y0 * z2 + y2 * z0;
+ var x2 = y0 * z1 - y1 * z0;
+
+ // recompute y = z cross x
+ y0 = z1 * x2 - z2 * x1;
+ y1 = -z0 * x2 + z2 * x0;
+ y2 = z0 * x1 - z1 * x0;
+
+ // cross product gives area of parallelogram, which is < 1.0 for
+ // non-perpendicular unit-length vectors; so normalize x, y here:
+ var xmag = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
+ if (xmag !== 0) {
+ x0 /= xmag;
+ x1 /= xmag;
+ x2 /= xmag;
+ }
+
+ var ymag = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
+ if (ymag !== 0) {
+ y0 /= ymag;
+ y1 /= ymag;
+ y2 /= ymag;
+ }
+
+ return {
+ x: [x0, x1, x2],
+ y: [y0, y1, y2],
+ z: [z0, z1, z2]
+ };
+ };
+
+ /**
+ * Orbits the camera about center point. For use with orbitControl().
+ * @method _orbit
+ * @private
+ * @param {Number} dTheta change in spherical coordinate theta
+ * @param {Number} dPhi change in spherical coordinate phi
+ * @param {Number} dRadius change in radius
+ */
+ _main.default.Camera.prototype._orbit = function(dTheta, dPhi, dRadius) {
+ var diffX = this.eyeX - this.centerX;
+ var diffY = this.eyeY - this.centerY;
+ var diffZ = this.eyeZ - this.centerZ;
+
+ // get spherical coorinates for current camera position about origin
+ var camRadius = Math.sqrt(diffX * diffX + diffY * diffY + diffZ * diffZ);
+ // from https://github.com/mrdoob/three.js/blob/dev/src/math/Spherical.js#L72-L73
+ var camTheta = Math.atan2(diffX, diffZ); // equatorial angle
+ var camPhi = Math.acos(Math.max(-1, Math.min(1, diffY / camRadius))); // polar angle
+
+ // add change
+ camTheta += dTheta;
+ camPhi += dPhi;
+ camRadius += dRadius;
+
+ // prevent zooming through the center:
+ if (camRadius < 0) {
+ camRadius = 0.1;
+ }
+
+ // prevent rotation over the zenith / under bottom
+ if (camPhi > Math.PI) {
+ camPhi = Math.PI;
+ } else if (camPhi <= 0) {
+ camPhi = 0.001;
+ }
+
+ // from https://github.com/mrdoob/three.js/blob/dev/src/math/Vector3.js#L628-L632
+ var _x = Math.sin(camPhi) * camRadius * Math.sin(camTheta);
+ var _y = Math.cos(camPhi) * camRadius;
+ var _z = Math.sin(camPhi) * camRadius * Math.cos(camTheta);
+
+ this.camera(
+ _x + this.centerX,
+ _y + this.centerY,
+ _z + this.centerZ,
+ this.centerX,
+ this.centerY,
+ this.centerZ,
+ 0,
+ 1,
+ 0
+ );
+ };
+
+ /**
+ * Returns true if camera is currently attached to renderer.
+ * @method _isActive
+ * @private
+ */
+ _main.default.Camera.prototype._isActive = function() {
+ return this === this._renderer._curCamera;
+ };
+
+ /**
+ * Sets rendererGL's current camera to a p5.Camera object. Allows switching
+ * between multiple cameras.
+ * @method setCamera
+ * @param {p5.Camera} cam p5.Camera object
+ * @for p5
+ * @example
+ *
+ *
+ * let cam1, cam2;
+ * let currentCamera;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ *
+ * cam1 = createCamera();
+ * cam2 = createCamera();
+ * cam2.setPosition(30, 0, 50);
+ * cam2.lookAt(0, 0, 0);
+ * cam2.ortho();
+ *
+ * // set variable for previously active camera:
+ * currentCamera = 1;
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // camera 1:
+ * cam1.lookAt(0, 0, 0);
+ * cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ *
+ * // every 100 frames, switch between the two cameras
+ * if (frameCount % 100 === 0) {
+ * if (currentCamera === 1) {
+ * setCamera(cam1);
+ * currentCamera = 0;
+ * } else {
+ * setCamera(cam2);
+ * currentCamera = 1;
+ * }
+ * }
+ *
+ * drawBoxes();
+ * }
+ *
+ * function drawBoxes() {
+ * rotateX(frameCount * 0.01);
+ * translate(-100, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Canvas switches between two camera views, each showing a series of spinning
+ * 3D boxes.
+ */
+ _main.default.prototype.setCamera = function(cam) {
+ this._renderer._curCamera = cam;
+
+ // set the projection matrix (which is not normally updated each frame)
+ this._renderer.uPMatrix.set(
+ cam.projMatrix.mat4[0],
+ cam.projMatrix.mat4[1],
+ cam.projMatrix.mat4[2],
+ cam.projMatrix.mat4[3],
+ cam.projMatrix.mat4[4],
+ cam.projMatrix.mat4[5],
+ cam.projMatrix.mat4[6],
+ cam.projMatrix.mat4[7],
+ cam.projMatrix.mat4[8],
+ cam.projMatrix.mat4[9],
+ cam.projMatrix.mat4[10],
+ cam.projMatrix.mat4[11],
+ cam.projMatrix.mat4[12],
+ cam.projMatrix.mat4[13],
+ cam.projMatrix.mat4[14],
+ cam.projMatrix.mat4[15]
+ );
+ };
+ var _default = _main.default.Camera;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 76: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } /** //some of the functions are adjusted from Three.js(http://threejs.org)
+ * @module Lights, Camera
+ * @submodule Material
+ * @for p5
+ * @requires core
+ * @requires p5.Geometry
+ */
+ /**
+ * p5 Geometry class
+ * @class p5.Geometry
+ * @constructor
+ * @param {Integer} [detailX] number of vertices on horizontal surface
+ * @param {Integer} [detailY] number of vertices on horizontal surface
+ * @param {function} [callback] function to call upon object instantiation.
+ *
+ */ _main.default.Geometry = function(detailX, detailY, callback) {
+ //an array containing every vertex
+ //@type [p5.Vector]
+ this.vertices = []; //an array containing every vertex for stroke drawing
+ this.lineVertices = []; //an array 1 normal per lineVertex with
+ //final position representing which direction to
+ //displace for strokeWeight
+ //[[0,0,-1,1], [0,1,0,-1] ...];
+ this.lineNormals = [];
+
+ //an array containing 1 normal per vertex
+ //@type [p5.Vector]
+ //[p5.Vector, p5.Vector, p5.Vector,p5.Vector, p5.Vector, p5.Vector,...]
+ this.vertexNormals = [];
+ //an array containing each three vertex indices that form a face
+ //[[0, 1, 2], [2, 1, 3], ...]
+ this.faces = [];
+ //a 2D array containing uvs for every vertex
+ //[[0.0,0.0],[1.0,0.0], ...]
+ this.uvs = [];
+ // a 2D array containing edge connectivity pattern for create line vertices
+ //based on faces for most objects;
+ this.edges = [];
+ this.detailX = detailX !== undefined ? detailX : 1;
+ this.detailY = detailY !== undefined ? detailY : 1;
+
+ this.dirtyFlags = {};
+
+ if (callback instanceof Function) {
+ callback.call(this);
+ }
+ return this; // TODO: is this a constructor?
+ };
+
+ _main.default.Geometry.prototype.reset = function() {
+ this.lineVertices.length = 0;
+ this.lineNormals.length = 0;
+
+ this.vertices.length = 0;
+ this.edges.length = 0;
+ this.vertexColors.length = 0;
+ this.vertexNormals.length = 0;
+ this.uvs.length = 0;
+
+ this.dirtyFlags = {};
+ };
+
+ /**
+ * @method computeFaces
+ * @chainable
+ */
+ _main.default.Geometry.prototype.computeFaces = function() {
+ this.faces.length = 0;
+ var sliceCount = this.detailX + 1;
+ var a, b, c, d;
+ for (var i = 0; i < this.detailY; i++) {
+ for (var j = 0; j < this.detailX; j++) {
+ a = i * sliceCount + j; // + offset;
+ b = i * sliceCount + j + 1; // + offset;
+ c = (i + 1) * sliceCount + j + 1; // + offset;
+ d = (i + 1) * sliceCount + j; // + offset;
+ this.faces.push([a, b, d]);
+ this.faces.push([d, b, c]);
+ }
+ }
+ return this;
+ };
+
+ _main.default.Geometry.prototype._getFaceNormal = function(faceId) {
+ //This assumes that vA->vB->vC is a counter-clockwise ordering
+ var face = this.faces[faceId];
+ var vA = this.vertices[face[0]];
+ var vB = this.vertices[face[1]];
+ var vC = this.vertices[face[2]];
+ var ab = _main.default.Vector.sub(vB, vA);
+ var ac = _main.default.Vector.sub(vC, vA);
+ var n = _main.default.Vector.cross(ab, ac);
+ var ln = _main.default.Vector.mag(n);
+ var sinAlpha =
+ ln / (_main.default.Vector.mag(ab) * _main.default.Vector.mag(ac));
+ if (sinAlpha === 0 || isNaN(sinAlpha)) {
+ console.warn(
+ 'p5.Geometry.prototype._getFaceNormal:',
+ 'face has colinear sides or a repeated vertex'
+ );
+
+ return n;
+ }
+ if (sinAlpha > 1) sinAlpha = 1; // handle float rounding error
+ return n.mult(Math.asin(sinAlpha) / ln);
+ };
+ /**
+ * computes smooth normals per vertex as an average of each
+ * face.
+ * @method computeNormals
+ * @chainable
+ */
+ _main.default.Geometry.prototype.computeNormals = function() {
+ var vertexNormals = this.vertexNormals;
+ var vertices = this.vertices;
+ var faces = this.faces;
+ var iv;
+
+ // initialize the vertexNormals array with empty vectors
+ vertexNormals.length = 0;
+ for (iv = 0; iv < vertices.length; ++iv) {
+ vertexNormals.push(new _main.default.Vector());
+ }
+
+ // loop through all the faces adding its normal to the normal
+ // of each of its vertices
+ for (var f = 0; f < faces.length; ++f) {
+ var face = faces[f];
+ var faceNormal = this._getFaceNormal(f);
+
+ // all three vertices get the normal added
+ for (var fv = 0; fv < 3; ++fv) {
+ var vertexIndex = face[fv];
+ vertexNormals[vertexIndex].add(faceNormal);
+ }
+ }
+
+ // normalize the normals
+ for (iv = 0; iv < vertices.length; ++iv) {
+ vertexNormals[iv].normalize();
+ }
+
+ return this;
+ };
+
+ /**
+ * Averages the vertex normals. Used in curved
+ * surfaces
+ * @method averageNormals
+ * @chainable
+ */
+ _main.default.Geometry.prototype.averageNormals = function() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var offset = this.detailX + 1;
+ var temp = _main.default.Vector.add(
+ this.vertexNormals[i * offset],
+ this.vertexNormals[i * offset + this.detailX]
+ );
+
+ temp = _main.default.Vector.div(temp, 2);
+ this.vertexNormals[i * offset] = temp;
+ this.vertexNormals[i * offset + this.detailX] = temp;
+ }
+ return this;
+ };
+
+ /**
+ * Averages pole normals. Used in spherical primitives
+ * @method averagePoleNormals
+ * @chainable
+ */
+ _main.default.Geometry.prototype.averagePoleNormals = function() {
+ //average the north pole
+ var sum = new _main.default.Vector(0, 0, 0);
+ for (var i = 0; i < this.detailX; i++) {
+ sum.add(this.vertexNormals[i]);
+ }
+ sum = _main.default.Vector.div(sum, this.detailX);
+
+ for (var _i = 0; _i < this.detailX; _i++) {
+ this.vertexNormals[_i] = sum;
+ }
+
+ //average the south pole
+ sum = new _main.default.Vector(0, 0, 0);
+ for (
+ var _i2 = this.vertices.length - 1;
+ _i2 > this.vertices.length - 1 - this.detailX;
+ _i2--
+ ) {
+ sum.add(this.vertexNormals[_i2]);
+ }
+ sum = _main.default.Vector.div(sum, this.detailX);
+
+ for (
+ var _i3 = this.vertices.length - 1;
+ _i3 > this.vertices.length - 1 - this.detailX;
+ _i3--
+ ) {
+ this.vertexNormals[_i3] = sum;
+ }
+ return this;
+ };
+
+ /**
+ * Create a 2D array for establishing stroke connections
+ * @private
+ * @chainable
+ */
+ _main.default.Geometry.prototype._makeTriangleEdges = function() {
+ this.edges.length = 0;
+ if (Array.isArray(this.strokeIndices)) {
+ for (var i = 0, max = this.strokeIndices.length; i < max; i++) {
+ this.edges.push(this.strokeIndices[i]);
+ }
+ } else {
+ for (var j = 0; j < this.faces.length; j++) {
+ this.edges.push([this.faces[j][0], this.faces[j][1]]);
+ this.edges.push([this.faces[j][1], this.faces[j][2]]);
+ this.edges.push([this.faces[j][2], this.faces[j][0]]);
+ }
+ }
+ return this;
+ };
+
+ /**
+ * Create 4 vertices for each stroke line, two at the beginning position
+ * and two at the end position. These vertices are displaced relative to
+ * that line's normal on the GPU
+ * @private
+ * @chainable
+ */
+ _main.default.Geometry.prototype._edgesToVertices = function() {
+ this.lineVertices.length = 0;
+ this.lineNormals.length = 0;
+
+ for (var i = 0; i < this.edges.length; i++) {
+ var begin = this.vertices[this.edges[i][0]];
+ var end = this.vertices[this.edges[i][1]];
+ var dir = end
+ .copy()
+ .sub(begin)
+ .normalize();
+ var a = begin.array();
+ var b = begin.array();
+ var c = end.array();
+ var d = end.array();
+ var dirAdd = dir.array();
+ var dirSub = dir.array();
+ // below is used to displace the pair of vertices at beginning and end
+ // in opposite directions
+ dirAdd.push(1);
+ dirSub.push(-1);
+ this.lineNormals.push(dirAdd, dirSub, dirAdd, dirAdd, dirSub, dirSub);
+ this.lineVertices.push(a, b, c, c, b, d);
+ }
+ return this;
+ };
+
+ /**
+ * Modifies all vertices to be centered within the range -100 to 100.
+ * @method normalize
+ * @chainable
+ */
+ _main.default.Geometry.prototype.normalize = function() {
+ if (this.vertices.length > 0) {
+ // Find the corners of our bounding box
+ var maxPosition = this.vertices[0].copy();
+ var minPosition = this.vertices[0].copy();
+
+ for (var i = 0; i < this.vertices.length; i++) {
+ maxPosition.x = Math.max(maxPosition.x, this.vertices[i].x);
+ minPosition.x = Math.min(minPosition.x, this.vertices[i].x);
+ maxPosition.y = Math.max(maxPosition.y, this.vertices[i].y);
+ minPosition.y = Math.min(minPosition.y, this.vertices[i].y);
+ maxPosition.z = Math.max(maxPosition.z, this.vertices[i].z);
+ minPosition.z = Math.min(minPosition.z, this.vertices[i].z);
+ }
+
+ var center = _main.default.Vector.lerp(maxPosition, minPosition, 0.5);
+ var dist = _main.default.Vector.sub(maxPosition, minPosition);
+ var longestDist = Math.max(Math.max(dist.x, dist.y), dist.z);
+ var scale = 200 / longestDist;
+
+ for (var _i4 = 0; _i4 < this.vertices.length; _i4++) {
+ this.vertices[_i4].sub(center);
+ this.vertices[_i4].mult(scale);
+ }
+ }
+ return this;
+ };
+ var _default = _main.default.Geometry;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 77: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * @requires constants
+ * @todo see methods below needing further implementation.
+ * future consideration: implement SIMD optimizations
+ * when browser compatibility becomes available
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/
+ * Reference/Global_Objects/SIMD
+ */ var GLMAT_ARRAY_TYPE = Array;
+ var isMatrixArray = function isMatrixArray(x) {
+ return x instanceof Array;
+ };
+ if (typeof Float32Array !== 'undefined') {
+ GLMAT_ARRAY_TYPE = Float32Array;
+ isMatrixArray = function isMatrixArray(x) {
+ return x instanceof Array || x instanceof Float32Array;
+ };
+ }
+
+ /**
+ * A class to describe a 4x4 matrix
+ * for model and view matrix manipulation in the p5js webgl renderer.
+ * @class p5.Matrix
+ * @private
+ * @constructor
+ * @param {Array} [mat4] array literal of our 4x4 matrix
+ */
+ _main.default.Matrix = function() {
+ var args = new Array(arguments.length);
+ for (var i = 0; i < args.length; ++i) {
+ args[i] = arguments[i];
+ }
+
+ // This is default behavior when object
+ // instantiated using createMatrix()
+ // @todo implement createMatrix() in core/math.js
+ if (args.length && args[args.length - 1] instanceof _main.default) {
+ this.p5 = args[args.length - 1];
+ }
+
+ if (args[0] === 'mat3') {
+ this.mat3 = Array.isArray(args[1])
+ ? args[1]
+ : new GLMAT_ARRAY_TYPE([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+ } else {
+ this.mat4 = Array.isArray(args[0])
+ ? args[0]
+ : new GLMAT_ARRAY_TYPE([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+ }
+ return this;
+ };
+
+ /**
+ * Sets the x, y, and z component of the vector using two or three separate
+ * variables, the data from a p5.Matrix, or the values from a float array.
+ *
+ * @method set
+ * @param {p5.Matrix|Float32Array|Number[]} [inMatrix] the input p5.Matrix or
+ * an Array of length 16
+ * @chainable
+ */
+ /**
+ * @method set
+ * @param {Number[]} elements 16 numbers passed by value to avoid
+ * array copying.
+ * @chainable
+ */
+ _main.default.Matrix.prototype.set = function(inMatrix) {
+ if (inMatrix instanceof _main.default.Matrix) {
+ this.mat4 = inMatrix.mat4;
+ return this;
+ } else if (isMatrixArray(inMatrix)) {
+ this.mat4 = inMatrix;
+ return this;
+ } else if (arguments.length === 16) {
+ this.mat4[0] = arguments[0];
+ this.mat4[1] = arguments[1];
+ this.mat4[2] = arguments[2];
+ this.mat4[3] = arguments[3];
+ this.mat4[4] = arguments[4];
+ this.mat4[5] = arguments[5];
+ this.mat4[6] = arguments[6];
+ this.mat4[7] = arguments[7];
+ this.mat4[8] = arguments[8];
+ this.mat4[9] = arguments[9];
+ this.mat4[10] = arguments[10];
+ this.mat4[11] = arguments[11];
+ this.mat4[12] = arguments[12];
+ this.mat4[13] = arguments[13];
+ this.mat4[14] = arguments[14];
+ this.mat4[15] = arguments[15];
+ }
+ return this;
+ };
+
+ /**
+ * Gets a copy of the vector, returns a p5.Matrix object.
+ *
+ * @method get
+ * @return {p5.Matrix} the copy of the p5.Matrix object
+ */
+ _main.default.Matrix.prototype.get = function() {
+ return new _main.default.Matrix(this.mat4, this.p5);
+ };
+
+ /**
+ * return a copy of a matrix
+ * @method copy
+ * @return {p5.Matrix} the result matrix
+ */
+ _main.default.Matrix.prototype.copy = function() {
+ var copied = new _main.default.Matrix(this.p5);
+ copied.mat4[0] = this.mat4[0];
+ copied.mat4[1] = this.mat4[1];
+ copied.mat4[2] = this.mat4[2];
+ copied.mat4[3] = this.mat4[3];
+ copied.mat4[4] = this.mat4[4];
+ copied.mat4[5] = this.mat4[5];
+ copied.mat4[6] = this.mat4[6];
+ copied.mat4[7] = this.mat4[7];
+ copied.mat4[8] = this.mat4[8];
+ copied.mat4[9] = this.mat4[9];
+ copied.mat4[10] = this.mat4[10];
+ copied.mat4[11] = this.mat4[11];
+ copied.mat4[12] = this.mat4[12];
+ copied.mat4[13] = this.mat4[13];
+ copied.mat4[14] = this.mat4[14];
+ copied.mat4[15] = this.mat4[15];
+ return copied;
+ };
+
+ /**
+ * return an identity matrix
+ * @method identity
+ * @return {p5.Matrix} the result matrix
+ */
+ _main.default.Matrix.identity = function(pInst) {
+ return new _main.default.Matrix(pInst);
+ };
+
+ /**
+ * transpose according to a given matrix
+ * @method transpose
+ * @param {p5.Matrix|Float32Array|Number[]} a the matrix to be
+ * based on to transpose
+ * @chainable
+ */
+ _main.default.Matrix.prototype.transpose = function(a) {
+ var a01, a02, a03, a12, a13, a23;
+ if (a instanceof _main.default.Matrix) {
+ a01 = a.mat4[1];
+ a02 = a.mat4[2];
+ a03 = a.mat4[3];
+ a12 = a.mat4[6];
+ a13 = a.mat4[7];
+ a23 = a.mat4[11];
+
+ this.mat4[0] = a.mat4[0];
+ this.mat4[1] = a.mat4[4];
+ this.mat4[2] = a.mat4[8];
+ this.mat4[3] = a.mat4[12];
+ this.mat4[4] = a01;
+ this.mat4[5] = a.mat4[5];
+ this.mat4[6] = a.mat4[9];
+ this.mat4[7] = a.mat4[13];
+ this.mat4[8] = a02;
+ this.mat4[9] = a12;
+ this.mat4[10] = a.mat4[10];
+ this.mat4[11] = a.mat4[14];
+ this.mat4[12] = a03;
+ this.mat4[13] = a13;
+ this.mat4[14] = a23;
+ this.mat4[15] = a.mat4[15];
+ } else if (isMatrixArray(a)) {
+ a01 = a[1];
+ a02 = a[2];
+ a03 = a[3];
+ a12 = a[6];
+ a13 = a[7];
+ a23 = a[11];
+
+ this.mat4[0] = a[0];
+ this.mat4[1] = a[4];
+ this.mat4[2] = a[8];
+ this.mat4[3] = a[12];
+ this.mat4[4] = a01;
+ this.mat4[5] = a[5];
+ this.mat4[6] = a[9];
+ this.mat4[7] = a[13];
+ this.mat4[8] = a02;
+ this.mat4[9] = a12;
+ this.mat4[10] = a[10];
+ this.mat4[11] = a[14];
+ this.mat4[12] = a03;
+ this.mat4[13] = a13;
+ this.mat4[14] = a23;
+ this.mat4[15] = a[15];
+ }
+ return this;
+ };
+
+ /**
+ * invert matrix according to a give matrix
+ * @method invert
+ * @param {p5.Matrix|Float32Array|Number[]} a the matrix to be
+ * based on to invert
+ * @chainable
+ */
+ _main.default.Matrix.prototype.invert = function(a) {
+ var a00, a01, a02, a03, a10, a11, a12, a13;
+ var a20, a21, a22, a23, a30, a31, a32, a33;
+ if (a instanceof _main.default.Matrix) {
+ a00 = a.mat4[0];
+ a01 = a.mat4[1];
+ a02 = a.mat4[2];
+ a03 = a.mat4[3];
+ a10 = a.mat4[4];
+ a11 = a.mat4[5];
+ a12 = a.mat4[6];
+ a13 = a.mat4[7];
+ a20 = a.mat4[8];
+ a21 = a.mat4[9];
+ a22 = a.mat4[10];
+ a23 = a.mat4[11];
+ a30 = a.mat4[12];
+ a31 = a.mat4[13];
+ a32 = a.mat4[14];
+ a33 = a.mat4[15];
+ } else if (isMatrixArray(a)) {
+ a00 = a[0];
+ a01 = a[1];
+ a02 = a[2];
+ a03 = a[3];
+ a10 = a[4];
+ a11 = a[5];
+ a12 = a[6];
+ a13 = a[7];
+ a20 = a[8];
+ a21 = a[9];
+ a22 = a[10];
+ a23 = a[11];
+ a30 = a[12];
+ a31 = a[13];
+ a32 = a[14];
+ a33 = a[15];
+ }
+ var b00 = a00 * a11 - a01 * a10;
+ var b01 = a00 * a12 - a02 * a10;
+ var b02 = a00 * a13 - a03 * a10;
+ var b03 = a01 * a12 - a02 * a11;
+ var b04 = a01 * a13 - a03 * a11;
+ var b05 = a02 * a13 - a03 * a12;
+ var b06 = a20 * a31 - a21 * a30;
+ var b07 = a20 * a32 - a22 * a30;
+ var b08 = a20 * a33 - a23 * a30;
+ var b09 = a21 * a32 - a22 * a31;
+ var b10 = a21 * a33 - a23 * a31;
+ var b11 = a22 * a33 - a23 * a32;
+
+ // Calculate the determinant
+ var det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
+
+ if (!det) {
+ return null;
+ }
+ det = 1.0 / det;
+
+ this.mat4[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
+ this.mat4[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
+ this.mat4[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
+ this.mat4[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
+ this.mat4[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
+ this.mat4[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
+ this.mat4[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
+ this.mat4[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
+ this.mat4[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
+ this.mat4[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
+ this.mat4[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
+ this.mat4[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
+ this.mat4[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
+ this.mat4[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
+ this.mat4[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
+ this.mat4[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
+
+ return this;
+ };
+
+ /**
+ * Inverts a 3x3 matrix
+ * @method invert3x3
+ * @chainable
+ */
+ _main.default.Matrix.prototype.invert3x3 = function() {
+ var a00 = this.mat3[0];
+ var a01 = this.mat3[1];
+ var a02 = this.mat3[2];
+ var a10 = this.mat3[3];
+ var a11 = this.mat3[4];
+ var a12 = this.mat3[5];
+ var a20 = this.mat3[6];
+ var a21 = this.mat3[7];
+ var a22 = this.mat3[8];
+ var b01 = a22 * a11 - a12 * a21;
+ var b11 = -a22 * a10 + a12 * a20;
+ var b21 = a21 * a10 - a11 * a20;
+
+ // Calculate the determinant
+ var det = a00 * b01 + a01 * b11 + a02 * b21;
+ if (!det) {
+ return null;
+ }
+ det = 1.0 / det;
+ this.mat3[0] = b01 * det;
+ this.mat3[1] = (-a22 * a01 + a02 * a21) * det;
+ this.mat3[2] = (a12 * a01 - a02 * a11) * det;
+ this.mat3[3] = b11 * det;
+ this.mat3[4] = (a22 * a00 - a02 * a20) * det;
+ this.mat3[5] = (-a12 * a00 + a02 * a10) * det;
+ this.mat3[6] = b21 * det;
+ this.mat3[7] = (-a21 * a00 + a01 * a20) * det;
+ this.mat3[8] = (a11 * a00 - a01 * a10) * det;
+ return this;
+ };
+
+ /**
+ * transposes a 3x3 p5.Matrix by a mat3
+ * @method transpose3x3
+ * @param {Number[]} mat3 1-dimensional array
+ * @chainable
+ */
+ _main.default.Matrix.prototype.transpose3x3 = function(mat3) {
+ var a01 = mat3[1],
+ a02 = mat3[2],
+ a12 = mat3[5];
+ this.mat3[1] = mat3[3];
+ this.mat3[2] = mat3[6];
+ this.mat3[3] = a01;
+ this.mat3[5] = mat3[7];
+ this.mat3[6] = a02;
+ this.mat3[7] = a12;
+ return this;
+ };
+
+ /**
+ * converts a 4x4 matrix to its 3x3 inverse transform
+ * commonly used in MVMatrix to NMatrix conversions.
+ * @method invertTranspose
+ * @param {p5.Matrix} mat4 the matrix to be based on to invert
+ * @chainable
+ * @todo finish implementation
+ */
+ _main.default.Matrix.prototype.inverseTranspose = function(matrix) {
+ if (this.mat3 === undefined) {
+ console.error('sorry, this function only works with mat3');
+ } else {
+ //convert mat4 -> mat3
+ this.mat3[0] = matrix.mat4[0];
+ this.mat3[1] = matrix.mat4[1];
+ this.mat3[2] = matrix.mat4[2];
+ this.mat3[3] = matrix.mat4[4];
+ this.mat3[4] = matrix.mat4[5];
+ this.mat3[5] = matrix.mat4[6];
+ this.mat3[6] = matrix.mat4[8];
+ this.mat3[7] = matrix.mat4[9];
+ this.mat3[8] = matrix.mat4[10];
+ }
+
+ var inverse = this.invert3x3();
+ // check inverse succeeded
+ if (inverse) {
+ inverse.transpose3x3(this.mat3);
+ } else {
+ // in case of singularity, just zero the matrix
+ for (var i = 0; i < 9; i++) {
+ this.mat3[i] = 0;
+ }
+ }
+ return this;
+ };
+
+ /**
+ * inspired by Toji's mat4 determinant
+ * @method determinant
+ * @return {Number} Determinant of our 4x4 matrix
+ */
+ _main.default.Matrix.prototype.determinant = function() {
+ var d00 = this.mat4[0] * this.mat4[5] - this.mat4[1] * this.mat4[4],
+ d01 = this.mat4[0] * this.mat4[6] - this.mat4[2] * this.mat4[4],
+ d02 = this.mat4[0] * this.mat4[7] - this.mat4[3] * this.mat4[4],
+ d03 = this.mat4[1] * this.mat4[6] - this.mat4[2] * this.mat4[5],
+ d04 = this.mat4[1] * this.mat4[7] - this.mat4[3] * this.mat4[5],
+ d05 = this.mat4[2] * this.mat4[7] - this.mat4[3] * this.mat4[6],
+ d06 = this.mat4[8] * this.mat4[13] - this.mat4[9] * this.mat4[12],
+ d07 = this.mat4[8] * this.mat4[14] - this.mat4[10] * this.mat4[12],
+ d08 = this.mat4[8] * this.mat4[15] - this.mat4[11] * this.mat4[12],
+ d09 = this.mat4[9] * this.mat4[14] - this.mat4[10] * this.mat4[13],
+ d10 = this.mat4[9] * this.mat4[15] - this.mat4[11] * this.mat4[13],
+ d11 = this.mat4[10] * this.mat4[15] - this.mat4[11] * this.mat4[14];
+
+ // Calculate the determinant
+ return d00 * d11 - d01 * d10 + d02 * d09 + d03 * d08 - d04 * d07 + d05 * d06;
+ };
+
+ /**
+ * multiply two mat4s
+ * @method mult
+ * @param {p5.Matrix|Float32Array|Number[]} multMatrix The matrix
+ * we want to multiply by
+ * @chainable
+ */
+ _main.default.Matrix.prototype.mult = function(multMatrix) {
+ var _src;
+
+ if (multMatrix === this || multMatrix === this.mat4) {
+ _src = this.copy().mat4; // only need to allocate in this rare case
+ } else if (multMatrix instanceof _main.default.Matrix) {
+ _src = multMatrix.mat4;
+ } else if (isMatrixArray(multMatrix)) {
+ _src = multMatrix;
+ } else if (arguments.length === 16) {
+ _src = arguments;
+ } else {
+ return; // nothing to do.
+ }
+
+ // each row is used for the multiplier
+ var b0 = this.mat4[0],
+ b1 = this.mat4[1],
+ b2 = this.mat4[2],
+ b3 = this.mat4[3];
+ this.mat4[0] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[1] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[2] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[3] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+
+ b0 = this.mat4[4];
+ b1 = this.mat4[5];
+ b2 = this.mat4[6];
+ b3 = this.mat4[7];
+ this.mat4[4] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[5] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[6] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[7] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+
+ b0 = this.mat4[8];
+ b1 = this.mat4[9];
+ b2 = this.mat4[10];
+ b3 = this.mat4[11];
+ this.mat4[8] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[9] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[10] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[11] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+
+ b0 = this.mat4[12];
+ b1 = this.mat4[13];
+ b2 = this.mat4[14];
+ b3 = this.mat4[15];
+ this.mat4[12] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[13] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[14] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[15] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+
+ return this;
+ };
+
+ _main.default.Matrix.prototype.apply = function(multMatrix) {
+ var _src;
+
+ if (multMatrix === this || multMatrix === this.mat4) {
+ _src = this.copy().mat4; // only need to allocate in this rare case
+ } else if (multMatrix instanceof _main.default.Matrix) {
+ _src = multMatrix.mat4;
+ } else if (isMatrixArray(multMatrix)) {
+ _src = multMatrix;
+ } else if (arguments.length === 16) {
+ _src = arguments;
+ } else {
+ return; // nothing to do.
+ }
+
+ var mat4 = this.mat4;
+
+ // each row is used for the multiplier
+ var m0 = mat4[0];
+ var m4 = mat4[4];
+ var m8 = mat4[8];
+ var m12 = mat4[12];
+ mat4[0] = _src[0] * m0 + _src[1] * m4 + _src[2] * m8 + _src[3] * m12;
+ mat4[4] = _src[4] * m0 + _src[5] * m4 + _src[6] * m8 + _src[7] * m12;
+ mat4[8] = _src[8] * m0 + _src[9] * m4 + _src[10] * m8 + _src[11] * m12;
+ mat4[12] = _src[12] * m0 + _src[13] * m4 + _src[14] * m8 + _src[15] * m12;
+
+ var m1 = mat4[1];
+ var m5 = mat4[5];
+ var m9 = mat4[9];
+ var m13 = mat4[13];
+ mat4[1] = _src[0] * m1 + _src[1] * m5 + _src[2] * m9 + _src[3] * m13;
+ mat4[5] = _src[4] * m1 + _src[5] * m5 + _src[6] * m9 + _src[7] * m13;
+ mat4[9] = _src[8] * m1 + _src[9] * m5 + _src[10] * m9 + _src[11] * m13;
+ mat4[13] = _src[12] * m1 + _src[13] * m5 + _src[14] * m9 + _src[15] * m13;
+
+ var m2 = mat4[2];
+ var m6 = mat4[6];
+ var m10 = mat4[10];
+ var m14 = mat4[14];
+ mat4[2] = _src[0] * m2 + _src[1] * m6 + _src[2] * m10 + _src[3] * m14;
+ mat4[6] = _src[4] * m2 + _src[5] * m6 + _src[6] * m10 + _src[7] * m14;
+ mat4[10] = _src[8] * m2 + _src[9] * m6 + _src[10] * m10 + _src[11] * m14;
+ mat4[14] = _src[12] * m2 + _src[13] * m6 + _src[14] * m10 + _src[15] * m14;
+
+ var m3 = mat4[3];
+ var m7 = mat4[7];
+ var m11 = mat4[11];
+ var m15 = mat4[15];
+ mat4[3] = _src[0] * m3 + _src[1] * m7 + _src[2] * m11 + _src[3] * m15;
+ mat4[7] = _src[4] * m3 + _src[5] * m7 + _src[6] * m11 + _src[7] * m15;
+ mat4[11] = _src[8] * m3 + _src[9] * m7 + _src[10] * m11 + _src[11] * m15;
+ mat4[15] = _src[12] * m3 + _src[13] * m7 + _src[14] * m11 + _src[15] * m15;
+
+ return this;
+ };
+
+ /**
+ * scales a p5.Matrix by scalars or a vector
+ * @method scale
+ * @param {p5.Vector|Float32Array|Number[]} s vector to scale by
+ * @chainable
+ */
+ _main.default.Matrix.prototype.scale = function(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ // x is a vector, extract the components from it.
+ y = x.y;
+ z = x.z;
+ x = x.x; // must be last
+ } else if (x instanceof Array) {
+ // x is an array, extract the components from it.
+ y = x[1];
+ z = x[2];
+ x = x[0]; // must be last
+ }
+
+ this.mat4[0] *= x;
+ this.mat4[1] *= x;
+ this.mat4[2] *= x;
+ this.mat4[3] *= x;
+ this.mat4[4] *= y;
+ this.mat4[5] *= y;
+ this.mat4[6] *= y;
+ this.mat4[7] *= y;
+ this.mat4[8] *= z;
+ this.mat4[9] *= z;
+ this.mat4[10] *= z;
+ this.mat4[11] *= z;
+
+ return this;
+ };
+
+ /**
+ * rotate our Matrix around an axis by the given angle.
+ * @method rotate
+ * @param {Number} a The angle of rotation in radians
+ * @param {p5.Vector|Number[]} axis the axis(es) to rotate around
+ * @chainable
+ * inspired by Toji's gl-matrix lib, mat4 rotation
+ */
+ _main.default.Matrix.prototype.rotate = function(a, x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ // x is a vector, extract the components from it.
+ y = x.y;
+ z = x.z;
+ x = x.x; //must be last
+ } else if (x instanceof Array) {
+ // x is an array, extract the components from it.
+ y = x[1];
+ z = x[2];
+ x = x[0]; //must be last
+ }
+
+ var len = Math.sqrt(x * x + y * y + z * z);
+ x *= 1 / len;
+ y *= 1 / len;
+ z *= 1 / len;
+
+ var a00 = this.mat4[0];
+ var a01 = this.mat4[1];
+ var a02 = this.mat4[2];
+ var a03 = this.mat4[3];
+ var a10 = this.mat4[4];
+ var a11 = this.mat4[5];
+ var a12 = this.mat4[6];
+ var a13 = this.mat4[7];
+ var a20 = this.mat4[8];
+ var a21 = this.mat4[9];
+ var a22 = this.mat4[10];
+ var a23 = this.mat4[11];
+
+ //sin,cos, and tan of respective angle
+ var sA = Math.sin(a);
+ var cA = Math.cos(a);
+ var tA = 1 - cA;
+ // Construct the elements of the rotation matrix
+ var b00 = x * x * tA + cA;
+ var b01 = y * x * tA + z * sA;
+ var b02 = z * x * tA - y * sA;
+ var b10 = x * y * tA - z * sA;
+ var b11 = y * y * tA + cA;
+ var b12 = z * y * tA + x * sA;
+ var b20 = x * z * tA + y * sA;
+ var b21 = y * z * tA - x * sA;
+ var b22 = z * z * tA + cA;
+
+ // rotation-specific matrix multiplication
+ this.mat4[0] = a00 * b00 + a10 * b01 + a20 * b02;
+ this.mat4[1] = a01 * b00 + a11 * b01 + a21 * b02;
+ this.mat4[2] = a02 * b00 + a12 * b01 + a22 * b02;
+ this.mat4[3] = a03 * b00 + a13 * b01 + a23 * b02;
+ this.mat4[4] = a00 * b10 + a10 * b11 + a20 * b12;
+ this.mat4[5] = a01 * b10 + a11 * b11 + a21 * b12;
+ this.mat4[6] = a02 * b10 + a12 * b11 + a22 * b12;
+ this.mat4[7] = a03 * b10 + a13 * b11 + a23 * b12;
+ this.mat4[8] = a00 * b20 + a10 * b21 + a20 * b22;
+ this.mat4[9] = a01 * b20 + a11 * b21 + a21 * b22;
+ this.mat4[10] = a02 * b20 + a12 * b21 + a22 * b22;
+ this.mat4[11] = a03 * b20 + a13 * b21 + a23 * b22;
+
+ return this;
+ };
+
+ /**
+ * @todo finish implementing this method!
+ * translates
+ * @method translate
+ * @param {Number[]} v vector to translate by
+ * @chainable
+ */
+ _main.default.Matrix.prototype.translate = function(v) {
+ var x = v[0],
+ y = v[1],
+ z = v[2] || 0;
+ this.mat4[12] += this.mat4[0] * x + this.mat4[4] * y + this.mat4[8] * z;
+ this.mat4[13] += this.mat4[1] * x + this.mat4[5] * y + this.mat4[9] * z;
+ this.mat4[14] += this.mat4[2] * x + this.mat4[6] * y + this.mat4[10] * z;
+ this.mat4[15] += this.mat4[3] * x + this.mat4[7] * y + this.mat4[11] * z;
+ };
+
+ _main.default.Matrix.prototype.rotateX = function(a) {
+ this.rotate(a, 1, 0, 0);
+ };
+ _main.default.Matrix.prototype.rotateY = function(a) {
+ this.rotate(a, 0, 1, 0);
+ };
+ _main.default.Matrix.prototype.rotateZ = function(a) {
+ this.rotate(a, 0, 0, 1);
+ };
+
+ /**
+ * sets the perspective matrix
+ * @method perspective
+ * @param {Number} fovy [description]
+ * @param {Number} aspect [description]
+ * @param {Number} near near clipping plane
+ * @param {Number} far far clipping plane
+ * @chainable
+ */
+ _main.default.Matrix.prototype.perspective = function(fovy, aspect, near, far) {
+ var f = 1.0 / Math.tan(fovy / 2),
+ nf = 1 / (near - far);
+
+ this.mat4[0] = f / aspect;
+ this.mat4[1] = 0;
+ this.mat4[2] = 0;
+ this.mat4[3] = 0;
+ this.mat4[4] = 0;
+ this.mat4[5] = f;
+ this.mat4[6] = 0;
+ this.mat4[7] = 0;
+ this.mat4[8] = 0;
+ this.mat4[9] = 0;
+ this.mat4[10] = (far + near) * nf;
+ this.mat4[11] = -1;
+ this.mat4[12] = 0;
+ this.mat4[13] = 0;
+ this.mat4[14] = 2 * far * near * nf;
+ this.mat4[15] = 0;
+
+ return this;
+ };
+
+ /**
+ * sets the ortho matrix
+ * @method ortho
+ * @param {Number} left [description]
+ * @param {Number} right [description]
+ * @param {Number} bottom [description]
+ * @param {Number} top [description]
+ * @param {Number} near near clipping plane
+ * @param {Number} far far clipping plane
+ * @chainable
+ */
+ _main.default.Matrix.prototype.ortho = function(
+ left,
+ right,
+ bottom,
+ top,
+ near,
+ far
+ ) {
+ var lr = 1 / (left - right),
+ bt = 1 / (bottom - top),
+ nf = 1 / (near - far);
+ this.mat4[0] = -2 * lr;
+ this.mat4[1] = 0;
+ this.mat4[2] = 0;
+ this.mat4[3] = 0;
+ this.mat4[4] = 0;
+ this.mat4[5] = -2 * bt;
+ this.mat4[6] = 0;
+ this.mat4[7] = 0;
+ this.mat4[8] = 0;
+ this.mat4[9] = 0;
+ this.mat4[10] = 2 * nf;
+ this.mat4[11] = 0;
+ this.mat4[12] = (left + right) * lr;
+ this.mat4[13] = (top + bottom) * bt;
+ this.mat4[14] = (far + near) * nf;
+ this.mat4[15] = 1;
+
+ return this;
+ };
+
+ /**
+ * PRIVATE
+ */
+ // matrix methods adapted from:
+ // https://developer.mozilla.org/en-US/docs/Web/WebGL/
+ // gluPerspective
+ //
+ // function _makePerspective(fovy, aspect, znear, zfar){
+ // const ymax = znear * Math.tan(fovy * Math.PI / 360.0);
+ // const ymin = -ymax;
+ // const xmin = ymin * aspect;
+ // const xmax = ymax * aspect;
+ // return _makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
+ // }
+
+ ////
+ //// glFrustum
+ ////
+ //function _makeFrustum(left, right, bottom, top, znear, zfar){
+ // const X = 2*znear/(right-left);
+ // const Y = 2*znear/(top-bottom);
+ // const A = (right+left)/(right-left);
+ // const B = (top+bottom)/(top-bottom);
+ // const C = -(zfar+znear)/(zfar-znear);
+ // const D = -2*zfar*znear/(zfar-znear);
+ // const frustrumMatrix =[
+ // X, 0, A, 0,
+ // 0, Y, B, 0,
+ // 0, 0, C, D,
+ // 0, 0, -1, 0
+ //];
+ //return frustrumMatrix;
+ // }
+
+ // function _setMVPMatrices(){
+ ////an identity matrix
+ ////@TODO use the p5.Matrix class to abstract away our MV matrices and
+ ///other math
+ //const _mvMatrix =
+ //[
+ // 1.0,0.0,0.0,0.0,
+ // 0.0,1.0,0.0,0.0,
+ // 0.0,0.0,1.0,0.0,
+ // 0.0,0.0,0.0,1.0
+ //];
+ var _default = _main.default.Matrix;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 78: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * Welcome to RendererGL Immediate Mode.
+ * Immediate mode is used for drawing custom shapes
+ * from a set of vertices. Immediate Mode is activated
+ * when you call beginShape() & de-activated when you call endShape().
+ * Immediate mode is a style of programming borrowed
+ * from OpenGL's (now-deprecated) immediate mode.
+ * It differs from p5.js' default, Retained Mode, which caches
+ * geometries and buffers on the CPU to reduce the number of webgl
+ * draw calls. Retained mode is more efficient & performative,
+ * however, Immediate Mode is useful for sketching quick
+ * geometric ideas.
+ */ /**
+ * Begin shape drawing. This is a helpful way of generating
+ * custom shapes quickly. However in WEBGL mode, application
+ * performance will likely drop as a result of too many calls to
+ * beginShape() / endShape(). As a high performance alternative,
+ * please use p5.js geometry primitives.
+ * @private
+ * @method beginShape
+ * @param {Number} mode webgl primitives mode. beginShape supports the
+ * following modes:
+ * POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,
+ * TRIANGLE_STRIP,and TRIANGLE_FAN.
+ * @chainable
+ */ _main.default.RendererGL.prototype.beginShape = function(mode) {
+ //default shape mode is line_strip
+ this.immediateMode.shapeMode = mode !== undefined ? mode : constants.LINE_STRIP; //if we haven't yet initialized our
+ //immediateMode vertices & buffers, create them now!
+ if (this.immediateMode.vertices === undefined) {
+ this.immediateMode.vertices = [];
+ this.immediateMode.edges = [];
+ this.immediateMode.lineVertices = [];
+ this.immediateMode.vertexColors = [];
+ this.immediateMode.lineNormals = [];
+ this.immediateMode.uvCoords = [];
+ this.immediateMode.vertexBuffer = this.GL.createBuffer();
+ this.immediateMode.colorBuffer = this.GL.createBuffer();
+ this.immediateMode.uvBuffer = this.GL.createBuffer();
+ this.immediateMode.lineVertexBuffer = this.GL.createBuffer();
+ this.immediateMode.lineNormalBuffer = this.GL.createBuffer();
+ this.immediateMode.pointVertexBuffer = this.GL.createBuffer();
+ this.immediateMode._bezierVertex = [];
+ this.immediateMode._quadraticVertex = [];
+ this.immediateMode._curveVertex = [];
+ this.immediateMode._isCoplanar = true;
+ this.immediateMode._testIfCoplanar = null;
+ } else {
+ this.immediateMode.vertices.length = 0;
+ this.immediateMode.edges.length = 0;
+ this.immediateMode.lineVertices.length = 0;
+ this.immediateMode.lineNormals.length = 0;
+ this.immediateMode.vertexColors.length = 0;
+ this.immediateMode.uvCoords.length = 0;
+ }
+ this.isImmediateDrawing = true;
+ return this;
+ };
+ /**
+ * adds a vertex to be drawn in a custom Shape.
+ * @private
+ * @method vertex
+ * @param {Number} x x-coordinate of vertex
+ * @param {Number} y y-coordinate of vertex
+ * @param {Number} z z-coordinate of vertex
+ * @chainable
+ * @TODO implement handling of p5.Vector args
+ */
+ _main.default.RendererGL.prototype.vertex = function(x, y) {
+ var z, u, v;
+
+ // default to (x, y) mode: all other arugments assumed to be 0.
+ z = u = v = 0;
+
+ if (arguments.length === 3) {
+ // (x, y, z) mode: (u, v) assumed to be 0.
+ z = arguments[2];
+ } else if (arguments.length === 4) {
+ // (x, y, u, v) mode: z assumed to be 0.
+ u = arguments[2];
+ v = arguments[3];
+ } else if (arguments.length === 5) {
+ // (x, y, z, u, v) mode
+ z = arguments[2];
+ u = arguments[3];
+ v = arguments[4];
+ }
+ if (this.immediateMode._testIfCoplanar == null) {
+ this.immediateMode._testIfCoplanar = z;
+ } else if (this.immediateMode._testIfCoplanar !== z) {
+ this.immediateMode._isCoplanar = false;
+ }
+ var vert = new _main.default.Vector(x, y, z);
+ this.immediateMode.vertices.push(vert);
+ var vertexColor = this.curFillColor || [0.5, 0.5, 0.5, 1.0];
+ this.immediateMode.vertexColors.push(
+ vertexColor[0],
+ vertexColor[1],
+ vertexColor[2],
+ vertexColor[3]
+ );
+
+ if (this.textureMode === constants.IMAGE) {
+ if (this._tex !== null) {
+ if (this._tex.width > 0 && this._tex.height > 0) {
+ u /= this._tex.width;
+ v /= this._tex.height;
+ }
+ } else if (this._tex === null && arguments.length >= 4) {
+ // Only throw this warning if custom uv's have been provided
+ console.warn(
+ 'You must first call texture() before using' +
+ ' vertex() with image based u and v coordinates'
+ );
+ }
+ }
+
+ this.immediateMode.uvCoords.push(u, v);
+
+ this.immediateMode._bezierVertex[0] = x;
+ this.immediateMode._bezierVertex[1] = y;
+ this.immediateMode._bezierVertex[2] = z;
+
+ this.immediateMode._quadraticVertex[0] = x;
+ this.immediateMode._quadraticVertex[1] = y;
+ this.immediateMode._quadraticVertex[2] = z;
+
+ return this;
+ };
+
+ /**
+ * End shape drawing and render vertices to screen.
+ * @chainable
+ */
+ _main.default.RendererGL.prototype.endShape = function(
+ mode,
+ isCurve,
+ isBezier,
+ isQuadratic,
+ isContour,
+ shapeKind
+ ) {
+ if (this.immediateMode.shapeMode === constants.POINTS) {
+ this._drawPoints(
+ this.immediateMode.vertices,
+ this.immediateMode.pointVertexBuffer
+ );
+ } else if (this.immediateMode.vertices.length > 1) {
+ if (this._doStroke && this.drawMode !== constants.TEXTURE) {
+ if (this.immediateMode.shapeMode === constants.TRIANGLE_STRIP) {
+ var i;
+ for (i = 0; i < this.immediateMode.vertices.length - 2; i++) {
+ this.immediateMode.edges.push([i, i + 1]);
+ this.immediateMode.edges.push([i, i + 2]);
+ }
+ this.immediateMode.edges.push([i, i + 1]);
+ } else if (this.immediateMode.shapeMode === constants.TRIANGLES) {
+ for (
+ var _i = 0;
+ _i < this.immediateMode.vertices.length - 2;
+ _i = _i + 3
+ ) {
+ this.immediateMode.edges.push([_i, _i + 1]);
+ this.immediateMode.edges.push([_i + 1, _i + 2]);
+ this.immediateMode.edges.push([_i + 2, _i]);
+ }
+ } else if (this.immediateMode.shapeMode === constants.LINES) {
+ for (
+ var _i2 = 0;
+ _i2 < this.immediateMode.vertices.length - 1;
+ _i2 = _i2 + 2
+ ) {
+ this.immediateMode.edges.push([_i2, _i2 + 1]);
+ }
+ } else {
+ for (var _i3 = 0; _i3 < this.immediateMode.vertices.length - 1; _i3++) {
+ this.immediateMode.edges.push([_i3, _i3 + 1]);
+ }
+ }
+ if (mode === constants.CLOSE) {
+ this.immediateMode.edges.push([
+ this.immediateMode.vertices.length - 1,
+ 0
+ ]);
+ }
+
+ _main.default.Geometry.prototype._edgesToVertices.call(this.immediateMode);
+ this._drawStrokeImmediateMode();
+ }
+
+ if (this._doFill && this.immediateMode.shapeMode !== constants.LINES) {
+ if (
+ this.isBezier ||
+ this.isQuadratic ||
+ this.isCurve ||
+ (this.immediateMode.shapeMode === constants.LINE_STRIP &&
+ this.drawMode === constants.FILL &&
+ this.immediateMode._isCoplanar === true)
+ ) {
+ this.immediateMode.shapeMode = constants.TRIANGLES;
+ var contours = [
+ new Float32Array(this._vToNArray(this.immediateMode.vertices))
+ ];
+
+ var polyTriangles = this._triangulate(contours);
+ this.immediateMode.vertices = [];
+ for (
+ var j = 0, polyTriLength = polyTriangles.length;
+ j < polyTriLength;
+ j = j + 3
+ ) {
+ this.vertex(
+ polyTriangles[j],
+ polyTriangles[j + 1],
+ polyTriangles[j + 2]
+ );
+ }
+ }
+ if (this.immediateMode.vertices.length > 0) {
+ this._drawFillImmediateMode(
+ mode,
+ isCurve,
+ isBezier,
+ isQuadratic,
+ isContour,
+ shapeKind
+ );
+ }
+ }
+ }
+ //clear out our vertexPositions & colors arrays
+ //after rendering
+ this.immediateMode.vertices.length = 0;
+ this.immediateMode.vertexColors.length = 0;
+ this.immediateMode.uvCoords.length = 0;
+ this.isImmediateDrawing = false;
+ this.isBezier = false;
+ this.isQuadratic = false;
+ this.isCurve = false;
+ this.immediateMode._bezierVertex.length = 0;
+ this.immediateMode._quadraticVertex.length = 0;
+ this.immediateMode._curveVertex.length = 0;
+ this.immediateMode._isCoplanar = true;
+ this.immediateMode._testIfCoplanar = null;
+
+ return this;
+ };
+
+ _main.default.RendererGL.prototype._drawFillImmediateMode = function(
+ mode,
+ isCurve,
+ isBezier,
+ isQuadratic,
+ isContour,
+ shapeKind
+ ) {
+ var gl = this.GL;
+ var shader = this._getImmediateFillShader();
+ this._setFillUniforms(shader);
+
+ // initialize the fill shader's 'aPosition' buffer
+ if (shader.attributes.aPosition) {
+ //vertex position Attribute
+ this._bindBuffer(
+ this.immediateMode.vertexBuffer,
+ gl.ARRAY_BUFFER,
+ this._vToNArray(this.immediateMode.vertices),
+ Float32Array,
+ gl.DYNAMIC_DRAW
+ );
+
+ shader.enableAttrib(shader.attributes.aPosition, 3);
+ }
+
+ // initialize the fill shader's 'aVertexColor' buffer
+ if (this.drawMode === constants.FILL && shader.attributes.aVertexColor) {
+ this._bindBuffer(
+ this.immediateMode.colorBuffer,
+ gl.ARRAY_BUFFER,
+ this.immediateMode.vertexColors,
+ Float32Array,
+ gl.DYNAMIC_DRAW
+ );
+
+ shader.enableAttrib(shader.attributes.aVertexColor, 4);
+ }
+
+ // initialize the fill shader's 'aTexCoord' buffer
+ if (this.drawMode === constants.TEXTURE && shader.attributes.aTexCoord) {
+ //texture coordinate Attribute
+ this._bindBuffer(
+ this.immediateMode.uvBuffer,
+ gl.ARRAY_BUFFER,
+ this.immediateMode.uvCoords,
+ Float32Array,
+ gl.DYNAMIC_DRAW
+ );
+
+ shader.enableAttrib(shader.attributes.aTexCoord, 2);
+ }
+
+ //if (true || mode) {
+ if (this.drawMode === constants.FILL || this.drawMode === constants.TEXTURE) {
+ switch (this.immediateMode.shapeMode) {
+ case constants.LINE_STRIP:
+ case constants.LINES:
+ this.immediateMode.shapeMode = constants.TRIANGLE_FAN;
+ break;
+ }
+ } else {
+ switch (this.immediateMode.shapeMode) {
+ case constants.LINE_STRIP:
+ case constants.LINES:
+ this.immediateMode.shapeMode = constants.LINE_LOOP;
+ break;
+ }
+ }
+ //}
+ //QUADS & QUAD_STRIP are not supported primitives modes
+ //in webgl.
+ if (
+ this.immediateMode.shapeMode === constants.QUADS ||
+ this.immediateMode.shapeMode === constants.QUAD_STRIP
+ ) {
+ throw new Error(
+ 'sorry, '.concat(
+ this.immediateMode.shapeMode,
+ ' not yet implemented in webgl mode.'
+ )
+ );
+ } else {
+ this._applyColorBlend(this.curFillColor);
+ gl.enable(gl.BLEND);
+ gl.drawArrays(
+ this.immediateMode.shapeMode,
+ 0,
+ this.immediateMode.vertices.length
+ );
+ }
+ // todo / optimizations? leave bound until another shader is set?
+ shader.unbindShader();
+ };
+
+ _main.default.RendererGL.prototype._drawStrokeImmediateMode = function() {
+ var gl = this.GL;
+ var shader = this._getImmediateStrokeShader();
+ this._setStrokeUniforms(shader);
+
+ // initialize the stroke shader's 'aPosition' buffer
+ if (shader.attributes.aPosition) {
+ this._bindBuffer(
+ this.immediateMode.lineVertexBuffer,
+ gl.ARRAY_BUFFER,
+ this._flatten(this.immediateMode.lineVertices),
+ Float32Array,
+ gl.STATIC_DRAW
+ );
+
+ shader.enableAttrib(shader.attributes.aPosition, 3);
+ }
+
+ // initialize the stroke shader's 'aDirection' buffer
+ if (shader.attributes.aDirection) {
+ this._bindBuffer(
+ this.immediateMode.lineNormalBuffer,
+ gl.ARRAY_BUFFER,
+ this._flatten(this.immediateMode.lineNormals),
+ Float32Array,
+ gl.STATIC_DRAW
+ );
+
+ shader.enableAttrib(shader.attributes.aDirection, 4);
+ }
+
+ this._applyColorBlend(this.curStrokeColor);
+ gl.drawArrays(gl.TRIANGLES, 0, this.immediateMode.lineVertices.length);
+
+ shader.unbindShader();
+ };
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27 }
+ ],
+ 79: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('./p5.RendererGL');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ } //Retained Mode. The default mode for rendering 3D primitives
+ //in WEBGL.
+ // a render buffer definition
+ function BufferDef(size, src, dst, attr, map) {
+ this.size = size; // the number of FLOATs in each vertex
+ this.src = src; // the name of the model's source array
+ this.dst = dst; // the name of the geometry's buffer
+ this.attr = attr; // the name of the vertex attribute
+ this.map = map; // optional, a transformation function to apply to src
+ }
+
+ var _flatten = _main.default.RendererGL.prototype._flatten;
+ var _vToNArray = _main.default.RendererGL.prototype._vToNArray;
+
+ var strokeBuffers = [
+ new BufferDef(3, 'lineVertices', 'lineVertexBuffer', 'aPosition', _flatten),
+ new BufferDef(4, 'lineNormals', 'lineNormalBuffer', 'aDirection', _flatten)
+ ];
+
+ var fillBuffers = [
+ new BufferDef(3, 'vertices', 'vertexBuffer', 'aPosition', _vToNArray),
+ new BufferDef(3, 'vertexNormals', 'normalBuffer', 'aNormal', _vToNArray),
+ new BufferDef(4, 'vertexColors', 'colorBuffer', 'aMaterialColor'),
+ new BufferDef(3, 'vertexAmbients', 'ambientBuffer', 'aAmbientColor'),
+ //new BufferDef(3, 'vertexSpeculars', 'specularBuffer', 'aSpecularColor'),
+ new BufferDef(2, 'uvs', 'uvBuffer', 'aTexCoord', _flatten)
+ ];
+
+ _main.default.RendererGL._textBuffers = [
+ new BufferDef(3, 'vertices', 'vertexBuffer', 'aPosition', _vToNArray),
+ new BufferDef(2, 'uvs', 'uvBuffer', 'aTexCoord', _flatten)
+ ];
+
+ var hashCount = 0;
+ /**
+ * _initBufferDefaults
+ * @private
+ * @description initializes buffer defaults. runs each time a new geometry is
+ * registered
+ * @param {String} gId key of the geometry object
+ * @returns {Object} a new buffer object
+ */
+ _main.default.RendererGL.prototype._initBufferDefaults = function(gId) {
+ this._freeBuffers(gId);
+
+ //@TODO remove this limit on hashes in gHash
+ hashCount++;
+ if (hashCount > 1000) {
+ var key = Object.keys(this.gHash)[0];
+ delete this.gHash[key];
+ hashCount--;
+ }
+
+ //create a new entry in our gHash
+ return (this.gHash[gId] = {});
+ };
+
+ _main.default.RendererGL.prototype._freeBuffers = function(gId) {
+ var buffers = this.gHash[gId];
+ if (!buffers) {
+ return;
+ }
+
+ delete this.gHash[gId];
+ hashCount--;
+
+ var gl = this.GL;
+ if (buffers.indexBuffer) {
+ gl.deleteBuffer(buffers.indexBuffer);
+ }
+
+ function freeBuffers(defs) {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = defs[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var def = _step.value;
+ if (buffers[def.dst]) {
+ gl.deleteBuffer(buffers[def.dst]);
+ buffers[def.dst] = null;
+ }
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ }
+
+ // free all the buffers
+ freeBuffers(strokeBuffers);
+ freeBuffers(fillBuffers);
+ };
+
+ _main.default.RendererGL.prototype._prepareBuffers = function(
+ buffers,
+ shader,
+ defs
+ ) {
+ var model = buffers.model;
+ var attributes = shader.attributes;
+ var gl = this.GL;
+
+ // loop through each of the buffer definitions
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (
+ var _iterator2 = defs[Symbol.iterator](), _step2;
+ !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done);
+ _iteratorNormalCompletion2 = true
+ ) {
+ var def = _step2.value;
+ var attr = attributes[def.attr];
+ if (!attr) continue;
+
+ var buffer = buffers[def.dst];
+
+ // check if the model has the appropriate source array
+ var src = model[def.src];
+ if (src) {
+ // check if we need to create the GL buffer
+ var createBuffer = !buffer;
+ if (createBuffer) {
+ // create and remember the buffer
+ buffers[def.dst] = buffer = gl.createBuffer();
+ }
+ // bind the buffer
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+ // check if we need to fill the buffer with data
+ if (createBuffer || model.dirtyFlags[def.src] !== false) {
+ var map = def.map;
+ // get the values from the model, possibly transformed
+ var values = map ? map(src) : src;
+
+ // fill the buffer with the values
+ this._bindBuffer(buffer, gl.ARRAY_BUFFER, values);
+
+ // mark the model's source array as clean
+ model.dirtyFlags[def.src] = false;
+ }
+ // enable the attribute
+ shader.enableAttrib(attr, def.size);
+ } else {
+ if (buffer) {
+ // remove the unused buffer
+ gl.deleteBuffer(buffer);
+ buffers[def.dst] = null;
+ }
+ // disable the vertex
+ gl.disableVertexAttribArray(attr.index);
+ }
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ };
+
+ /**
+ * creates a buffers object that holds the WebGL render buffers
+ * for a geometry.
+ * @private
+ * @param {String} gId key of the geometry object
+ * @param {p5.Geometry} model contains geometry data
+ */
+ _main.default.RendererGL.prototype.createBuffers = function(gId, model) {
+ var gl = this.GL;
+ //initialize the gl buffers for our geom groups
+ var buffers = this._initBufferDefaults(gId);
+ buffers.model = model;
+
+ var indexBuffer = buffers.indexBuffer;
+
+ if (model.faces.length) {
+ // allocate space for faces
+ if (!indexBuffer) indexBuffer = buffers.indexBuffer = gl.createBuffer();
+ var vals = _main.default.RendererGL.prototype._flatten(model.faces);
+ this._bindBuffer(indexBuffer, gl.ELEMENT_ARRAY_BUFFER, vals, Uint16Array);
+
+ // the vertex count is based on the number of faces
+ buffers.vertexCount = model.faces.length * 3;
+ } else {
+ // the index buffer is unused, remove it
+ if (indexBuffer) {
+ gl.deleteBuffer(indexBuffer);
+ buffers.indexBuffer = null;
+ }
+ // the vertex count comes directly from the model
+ buffers.vertexCount = model.vertices ? model.vertices.length : 0;
+ }
+
+ buffers.lineVertexCount = model.lineVertices ? model.lineVertices.length : 0;
+
+ return buffers;
+ };
+
+ /**
+ * Draws buffers given a geometry key ID
+ * @private
+ * @param {String} gId ID in our geom hash
+ * @chainable
+ */
+ _main.default.RendererGL.prototype.drawBuffers = function(gId) {
+ var gl = this.GL;
+ var buffers = this.gHash[gId];
+
+ if (this._doStroke && buffers.lineVertexCount > 0) {
+ var strokeShader = this._getRetainedStrokeShader();
+ this._setStrokeUniforms(strokeShader);
+ this._prepareBuffers(buffers, strokeShader, strokeBuffers);
+ this._applyColorBlend(this.curStrokeColor);
+ this._drawArrays(gl.TRIANGLES, gId);
+ strokeShader.unbindShader();
+ }
+
+ if (this._doFill) {
+ var fillShader = this._getRetainedFillShader();
+ this._setFillUniforms(fillShader);
+ this._prepareBuffers(buffers, fillShader, fillBuffers);
+ if (buffers.indexBuffer) {
+ //vertex index buffer
+ this._bindBuffer(buffers.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
+ }
+ this._applyColorBlend(this.curFillColor);
+ this._drawElements(gl.TRIANGLES, gId);
+ fillShader.unbindShader();
+ }
+ return this;
+ };
+
+ /**
+ * Calls drawBuffers() with a scaled model/view matrix.
+ *
+ * This is used by various 3d primitive methods (in primitives.js, eg. plane,
+ * box, torus, etc...) to allow caching of un-scaled geometries. Those
+ * geometries are generally created with unit-length dimensions, cached as
+ * such, and then scaled appropriately in this method prior to rendering.
+ *
+ * @private
+ * @method drawBuffersScaled
+ * @param {String} gId ID in our geom hash
+ * @param {Number} scaleX the amount to scale in the X direction
+ * @param {Number} scaleY the amount to scale in the Y direction
+ * @param {Number} scaleZ the amount to scale in the Z direction
+ */
+ _main.default.RendererGL.prototype.drawBuffersScaled = function(
+ gId,
+ scaleX,
+ scaleY,
+ scaleZ
+ ) {
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ this.uMVMatrix.scale(scaleX, scaleY, scaleZ);
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ };
+
+ _main.default.RendererGL.prototype._drawArrays = function(drawMode, gId) {
+ this.GL.drawArrays(drawMode, 0, this.gHash[gId].lineVertexCount);
+ return this;
+ };
+
+ _main.default.RendererGL.prototype._drawElements = function(drawMode, gId) {
+ var buffers = this.gHash[gId];
+ var gl = this.GL;
+ // render the fill
+ if (buffers.indexBuffer) {
+ // we're drawing faces
+ gl.drawElements(gl.TRIANGLES, buffers.vertexCount, gl.UNSIGNED_SHORT, 0);
+ } else {
+ // drawing vertices
+ gl.drawArrays(drawMode || gl.TRIANGLES, 0, buffers.vertexCount);
+ }
+ };
+
+ _main.default.RendererGL.prototype._drawPoints = function(
+ vertices,
+ vertexBuffer
+ ) {
+ var gl = this.GL;
+ var pointShader = this._getImmediatePointShader();
+ this._setPointUniforms(pointShader);
+
+ this._bindBuffer(
+ vertexBuffer,
+ gl.ARRAY_BUFFER,
+ this._vToNArray(vertices),
+ Float32Array,
+ gl.STATIC_DRAW
+ );
+
+ pointShader.enableAttrib(pointShader.attributes.aPosition, 3);
+
+ gl.drawArrays(gl.Points, 0, vertices.length);
+
+ pointShader.unbindShader();
+ };
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ { '../core/main': 27, './p5.RendererGL': 80 }
+ ],
+ 80: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _libtess = _interopRequireDefault(_dereq_('libtess'));
+ _dereq_('./p5.Shader');
+ _dereq_('./p5.Camera');
+ _dereq_('../core/p5.Renderer');
+ _dereq_('./p5.Matrix');
+
+ var _path = _dereq_('path');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (
+ Symbol.iterator in Object(iter) ||
+ Object.prototype.toString.call(iter) === '[object Arguments]'
+ )
+ return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+
+ var lightingShader =
+ 'precision mediump float;\n\nuniform mat4 uViewMatrix;\n\nuniform bool uUseLighting;\n\nuniform int uAmbientLightCount;\nuniform vec3 uAmbientColor[8];\n\nuniform int uDirectionalLightCount;\nuniform vec3 uLightingDirection[8];\nuniform vec3 uDirectionalDiffuseColors[8];\nuniform vec3 uDirectionalSpecularColors[8];\n\nuniform int uPointLightCount;\nuniform vec3 uPointLightLocation[8];\nuniform vec3 uPointLightDiffuseColors[8];\t\nuniform vec3 uPointLightSpecularColors[8];\n\nuniform int uSpotLightCount;\nuniform float uSpotLightAngle[8];\nuniform float uSpotLightConc[8];\nuniform vec3 uSpotLightDiffuseColors[8];\nuniform vec3 uSpotLightSpecularColors[8];\nuniform vec3 uSpotLightLocation[8];\nuniform vec3 uSpotLightDirection[8];\n\nuniform bool uSpecular;\nuniform float uShininess;\n\nuniform float uConstantAttenuation;\nuniform float uLinearAttenuation;\nuniform float uQuadraticAttenuation;\n\nconst float specularFactor = 2.0;\nconst float diffuseFactor = 0.73;\n\nstruct LightResult {\n float specular;\n float diffuse;\n};\n\nfloat _phongSpecular(\n vec3 lightDirection,\n vec3 viewDirection,\n vec3 surfaceNormal,\n float shininess) {\n\n vec3 R = reflect(lightDirection, surfaceNormal);\n return pow(max(0.0, dot(R, viewDirection)), shininess);\n}\n\nfloat _lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal) {\n return max(0.0, dot(-lightDirection, surfaceNormal));\n}\n\nLightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector) {\n\n vec3 lightDir = normalize(lightVector);\n\n //compute our diffuse & specular terms\n LightResult lr;\n if (uSpecular)\n lr.specular = _phongSpecular(lightDir, viewDirection, normal, uShininess);\n lr.diffuse = _lambertDiffuse(lightDir, normal);\n return lr;\n}\n\nvoid totalLight(\n vec3 modelPosition,\n vec3 normal,\n out vec3 totalDiffuse,\n out vec3 totalSpecular\n) {\n\n totalSpecular = vec3(0.0);\n\n if (!uUseLighting) {\n totalDiffuse = vec3(1.0);\n return;\n }\n\n totalDiffuse = vec3(0.0);\n\n vec3 viewDirection = normalize(-modelPosition);\n\n for (int j = 0; j < 8; j++) {\n if (j < uDirectionalLightCount) {\n vec3 lightVector = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;\n vec3 lightColor = uDirectionalDiffuseColors[j];\n vec3 specularColor = uDirectionalSpecularColors[j];\n LightResult result = _light(viewDirection, normal, lightVector);\n totalDiffuse += result.diffuse * lightColor;\n totalSpecular += result.specular * lightColor * specularColor;\n }\n\n if (j < uPointLightCount) {\n vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation[j], 1.0)).xyz;\n vec3 lightVector = modelPosition - lightPosition;\n \n //calculate attenuation\n float lightDistance = length(lightVector);\n float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n vec3 lightColor = lightFalloff * uPointLightDiffuseColors[j];\n vec3 specularColor = lightFalloff * uPointLightSpecularColors[j];\n\n LightResult result = _light(viewDirection, normal, lightVector);\n totalDiffuse += result.diffuse * lightColor;\n totalSpecular += result.specular * lightColor * specularColor;\n }\n\n if(j < uSpotLightCount) {\n vec3 lightPosition = (uViewMatrix * vec4(uSpotLightLocation[j], 1.0)).xyz;\n vec3 lightVector = modelPosition - lightPosition;\n \n float lightDistance = length(lightVector);\n float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n\n vec3 lightDirection = (uViewMatrix * vec4(uSpotLightDirection[j], 0.0)).xyz;\n float spotDot = dot(normalize(lightVector), normalize(lightDirection));\n float spotFalloff;\n if(spotDot < uSpotLightAngle[j]) {\n spotFalloff = 0.0;\n }\n else {\n spotFalloff = pow(spotDot, uSpotLightConc[j]);\n }\n lightFalloff *= spotFalloff;\n\n vec3 lightColor = uSpotLightDiffuseColors[j];\n vec3 specularColor = uSpotLightSpecularColors[j];\n \n LightResult result = _light(viewDirection, normal, lightVector);\n \n totalDiffuse += result.diffuse * lightColor * lightFalloff;\n totalSpecular += result.specular * lightColor * specularColor * lightFalloff;\n }\n }\n\n totalDiffuse *= diffuseFactor;\n totalSpecular *= specularFactor;\n}\n';
+
+ var defaultShaders = {
+ immediateVert:
+ 'attribute vec3 aPosition;\nattribute vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uResolution;\nuniform float uPointSize;\n\nvarying vec4 vColor;\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vColor = aVertexColor;\n gl_PointSize = uPointSize;\n}\n',
+
+ vertexColorVert:
+ 'attribute vec3 aPosition;\nattribute vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvarying vec4 vColor;\n\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vColor = aVertexColor;\n}\n',
+
+ vertexColorFrag:
+ 'precision mediump float;\nvarying vec4 vColor;\nvoid main(void) {\n gl_FragColor = vColor;\n}',
+
+ normalVert:
+ 'attribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvarying vec3 vVertexNormal;\nvarying highp vec2 vVertTexCoord;\n\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vVertexNormal = normalize(vec3( uNormalMatrix * aNormal ));\n vVertTexCoord = aTexCoord;\n}\n',
+ normalFrag:
+ 'precision mediump float;\nvarying vec3 vVertexNormal;\nvoid main(void) {\n gl_FragColor = vec4(vVertexNormal, 1.0);\n}',
+ basicFrag:
+ 'precision mediump float;\nuniform vec4 uMaterialColor;\nvoid main(void) {\n gl_FragColor = uMaterialColor;\n}',
+ lightVert:
+ lightingShader +
+ '// include lighting.glgl\n\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvarying highp vec2 vVertTexCoord;\nvarying vec3 vDiffuseColor;\nvarying vec3 vSpecularColor;\n\nvoid main(void) {\n\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n\n vec3 vertexNormal = normalize(uNormalMatrix * aNormal);\n vVertTexCoord = aTexCoord;\n\n totalLight(viewModelPosition.xyz, vertexNormal, vDiffuseColor, vSpecularColor);\n\n for (int i = 0; i < 8; i++) {\n if (i < uAmbientLightCount) {\n vDiffuseColor += uAmbientColor[i];\n }\n }\n}\n',
+
+ lightTextureFrag:
+ 'precision mediump float;\n\nuniform vec4 uMaterialColor;\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\nuniform bool uEmissive;\n\nvarying highp vec2 vVertTexCoord;\nvarying vec3 vDiffuseColor;\nvarying vec3 vSpecularColor;\n\nvoid main(void) {\n if(uEmissive && !isTexture) {\n gl_FragColor = uMaterialColor;\n }\n else {\n gl_FragColor = isTexture ? texture2D(uSampler, vVertTexCoord) * (uTint / vec4(255, 255, 255, 255)) : uMaterialColor;\n gl_FragColor.rgb = gl_FragColor.rgb * vDiffuseColor + vSpecularColor;\n }\n}',
+
+ phongVert:
+ 'precision mediump float;\nprecision mediump int;\n\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform vec3 uAmbientColor[8];\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\nuniform int uAmbientLightCount;\n\nvarying vec3 vNormal;\nvarying vec2 vTexCoord;\nvarying vec3 vViewPosition;\nvarying vec3 vAmbientColor;\n\nvoid main(void) {\n\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n\n // Pass varyings to fragment shader\n vViewPosition = viewModelPosition.xyz;\n gl_Position = uProjectionMatrix * viewModelPosition; \n\n vNormal = uNormalMatrix * aNormal;\n vTexCoord = aTexCoord;\n\n // TODO: this should be a uniform\n vAmbientColor = vec3(0.0);\n for (int i = 0; i < 8; i++) {\n if (i < uAmbientLightCount) {\n vAmbientColor += uAmbientColor[i];\n }\n }\n}\n',
+ phongFrag:
+ lightingShader +
+ '// include lighting.glsl\nprecision highp float;\n\nuniform vec4 uMaterialColor;\nuniform sampler2D uSampler;\nuniform bool isTexture;\nuniform bool uEmissive;\n\nvarying vec3 vNormal;\nvarying vec2 vTexCoord;\nvarying vec3 vViewPosition;\nvarying vec3 vAmbientColor;\n\nvoid main(void) {\n\n vec3 diffuse;\n vec3 specular;\n totalLight(vViewPosition, normalize(vNormal), diffuse, specular);\n\n if(uEmissive && !isTexture) {\n gl_FragColor = uMaterialColor;\n }\n else {\n gl_FragColor = isTexture ? texture2D(uSampler, vTexCoord) : uMaterialColor;\n gl_FragColor.rgb = gl_FragColor.rgb * (diffuse + vAmbientColor) + specular;\n }\n}',
+
+ fontVert:
+ "precision mediump float;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uGlyphRect;\nuniform float uGlyphOffset;\n\nvarying vec2 vTexCoord;\nvarying float w;\n\nvoid main() {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // scale by the size of the glyph's rectangle\n positionVec4.xy *= uGlyphRect.zw - uGlyphRect.xy;\n\n // move to the corner of the glyph\n positionVec4.xy += uGlyphRect.xy;\n\n // move to the letter's line offset\n positionVec4.x += uGlyphOffset;\n \n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vTexCoord = aTexCoord;\n w = gl_Position.w;\n}\n",
+ fontFrag:
+ "#extension GL_OES_standard_derivatives : enable\nprecision mediump float;\n\n#if 0\n // simulate integer math using floats\n\t#define int float\n\t#define ivec2 vec2\n\t#define INT(x) float(x)\n\n\tint ifloor(float v) { return floor(v); }\n\tivec2 ifloor(vec2 v) { return floor(v); }\n\n#else\n // use native integer math\n\tprecision highp int;\n\t#define INT(x) x\n\n\tint ifloor(float v) { return int(v); }\n\tint ifloor(int v) { return v; }\n\tivec2 ifloor(vec2 v) { return ivec2(v); }\n\n#endif\n\nuniform sampler2D uSamplerStrokes;\nuniform sampler2D uSamplerRowStrokes;\nuniform sampler2D uSamplerRows;\nuniform sampler2D uSamplerColStrokes;\nuniform sampler2D uSamplerCols;\n\nuniform ivec2 uStrokeImageSize;\nuniform ivec2 uCellsImageSize;\nuniform ivec2 uGridImageSize;\n\nuniform ivec2 uGridOffset;\nuniform ivec2 uGridSize;\nuniform vec4 uMaterialColor;\n\nvarying vec2 vTexCoord;\n\n// some helper functions\nint round(float v) { return ifloor(v + 0.5); }\nivec2 round(vec2 v) { return ifloor(v + 0.5); }\nfloat saturate(float v) { return clamp(v, 0.0, 1.0); }\nvec2 saturate(vec2 v) { return clamp(v, 0.0, 1.0); }\n\nint mul(float v1, int v2) {\n return ifloor(v1 * float(v2));\n}\n\nivec2 mul(vec2 v1, ivec2 v2) {\n return ifloor(v1 * vec2(v2) + 0.5);\n}\n\n// unpack a 16-bit integer from a float vec2\nint getInt16(vec2 v) {\n ivec2 iv = round(v * 255.0);\n return iv.x * INT(128) + iv.y;\n}\n\nvec2 pixelScale;\nvec2 coverage = vec2(0.0);\nvec2 weight = vec2(0.5);\nconst float minDistance = 1.0/8192.0;\nconst float hardness = 1.05; // amount of antialias\n\n// the maximum number of curves in a glyph\nconst int N = INT(250);\n\n// retrieves an indexed pixel from a sampler\nvec4 getTexel(sampler2D sampler, int pos, ivec2 size) {\n int width = size.x;\n int y = ifloor(pos / width);\n int x = pos - y * width; // pos % width\n\n return texture2D(sampler, (vec2(x, y) + 0.5) / vec2(size));\n}\n\nvoid calulateCrossings(vec2 p0, vec2 p1, vec2 p2, out vec2 C1, out vec2 C2) {\n\n // get the coefficients of the quadratic in t\n vec2 a = p0 - p1 * 2.0 + p2;\n vec2 b = p0 - p1;\n vec2 c = p0 - vTexCoord;\n\n // found out which values of 't' it crosses the axes\n vec2 surd = sqrt(max(vec2(0.0), b * b - a * c));\n vec2 t1 = ((b - surd) / a).yx;\n vec2 t2 = ((b + surd) / a).yx;\n\n // approximate straight lines to avoid rounding errors\n if (abs(a.y) < 0.001)\n t1.x = t2.x = c.y / (2.0 * b.y);\n\n if (abs(a.x) < 0.001)\n t1.y = t2.y = c.x / (2.0 * b.x);\n\n // plug into quadratic formula to find the corrdinates of the crossings\n C1 = ((a * t1 - b * 2.0) * t1 + c) * pixelScale;\n C2 = ((a * t2 - b * 2.0) * t2 + c) * pixelScale;\n}\n\nvoid coverageX(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n // determine on which side of the x-axis the points lie\n bool y0 = p0.y > vTexCoord.y;\n bool y1 = p1.y > vTexCoord.y;\n bool y2 = p2.y > vTexCoord.y;\n\n // could web be under the curve (after t1)?\n if (y1 ? !y2 : y0) {\n // add the coverage for t1\n coverage.x += saturate(C1.x + 0.5);\n // calculate the anti-aliasing for t1\n weight.x = min(weight.x, abs(C1.x));\n }\n\n // are we outside the curve (after t2)?\n if (y1 ? !y0 : y2) {\n // subtract the coverage for t2\n coverage.x -= saturate(C2.x + 0.5);\n // calculate the anti-aliasing for t2\n weight.x = min(weight.x, abs(C2.x));\n }\n}\n\n// this is essentially the same as coverageX, but with the axes swapped\nvoid coverageY(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n bool x0 = p0.x > vTexCoord.x;\n bool x1 = p1.x > vTexCoord.x;\n bool x2 = p2.x > vTexCoord.x;\n\n if (x1 ? !x2 : x0) {\n coverage.y -= saturate(C1.y + 0.5);\n weight.y = min(weight.y, abs(C1.y));\n }\n\n if (x1 ? !x0 : x2) {\n coverage.y += saturate(C2.y + 0.5);\n weight.y = min(weight.y, abs(C2.y));\n }\n}\n\nvoid main() {\n\n // calculate the pixel scale based on screen-coordinates\n pixelScale = hardness / fwidth(vTexCoord);\n\n // which grid cell is this pixel in?\n ivec2 gridCoord = ifloor(vTexCoord * vec2(uGridSize));\n\n // intersect curves in this row\n {\n // the index into the row info bitmap\n int rowIndex = gridCoord.y + uGridOffset.y;\n // fetch the info texel\n vec4 rowInfo = getTexel(uSamplerRows, rowIndex, uGridImageSize);\n // unpack the rowInfo\n int rowStrokeIndex = getInt16(rowInfo.xy);\n int rowStrokeCount = getInt16(rowInfo.zw);\n\n for (int iRowStroke = INT(0); iRowStroke < N; iRowStroke++) {\n if (iRowStroke >= rowStrokeCount)\n break;\n\n // each stroke is made up of 3 points: the start and control point\n // and the start of the next curve.\n // fetch the indices of this pair of strokes:\n vec4 strokeIndices = getTexel(uSamplerRowStrokes, rowStrokeIndex++, uCellsImageSize);\n\n // unpack the stroke index\n int strokePos = getInt16(strokeIndices.xy);\n\n // fetch the two strokes\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n\n // calculate the coverage\n coverageX(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n // intersect curves in this column\n {\n int colIndex = gridCoord.x + uGridOffset.x;\n vec4 colInfo = getTexel(uSamplerCols, colIndex, uGridImageSize);\n int colStrokeIndex = getInt16(colInfo.xy);\n int colStrokeCount = getInt16(colInfo.zw);\n \n for (int iColStroke = INT(0); iColStroke < N; iColStroke++) {\n if (iColStroke >= colStrokeCount)\n break;\n\n vec4 strokeIndices = getTexel(uSamplerColStrokes, colStrokeIndex++, uCellsImageSize);\n\n int strokePos = getInt16(strokeIndices.xy);\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n coverageY(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n weight = saturate(1.0 - weight * 2.0);\n float distance = max(weight.x + weight.y, minDistance); // manhattan approx.\n float antialias = abs(dot(coverage, weight) / distance);\n float cover = min(abs(coverage.x), abs(coverage.y));\n gl_FragColor = uMaterialColor;\n gl_FragColor.a *= saturate(max(antialias, cover));\n}",
+ lineVert:
+ "/*\n Part of the Processing project - http://processing.org\n Copyright (c) 2012-15 The Processing Foundation\n Copyright (c) 2004-12 Ben Fry and Casey Reas\n Copyright (c) 2001-04 Massachusetts Institute of Technology\n This library is free software; you can redistribute it and/or\n modify it under the terms of the GNU Lesser General Public\n License as published by the Free Software Foundation, version 2.1.\n This library is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\n Lesser General Public License for more details.\n You should have received a copy of the GNU Lesser General\n Public License along with this library; if not, write to the\n Free Software Foundation, Inc., 59 Temple Place, Suite 330,\n Boston, MA 02111-1307 USA\n*/\n\n#define PROCESSING_LINE_SHADER\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform vec4 uViewport;\nuniform int uPerspective;\n\nattribute vec4 aPosition;\nattribute vec4 aDirection;\n \nvoid main() {\n // using a scale <1 moves the lines towards the camera\n // in order to prevent popping effects due to half of\n // the line disappearing behind the geometry faces.\n vec3 scale = vec3(0.9995);\n\n vec4 posp = uModelViewMatrix * aPosition;\n vec4 posq = uModelViewMatrix * (aPosition + vec4(aDirection.xyz, 0));\n\n // Moving vertices slightly toward the camera\n // to avoid depth-fighting with the fill triangles.\n // Discussed here:\n // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848 \n posp.xyz = posp.xyz * scale;\n posq.xyz = posq.xyz * scale;\n\n vec4 p = uProjectionMatrix * posp;\n vec4 q = uProjectionMatrix * posq;\n\n // formula to convert from clip space (range -1..1) to screen space (range 0..[width or height])\n // screen_p = (p.xy/p.w + <1,1>) * 0.5 * uViewport.zw\n\n // prevent division by W by transforming the tangent formula (div by 0 causes\n // the line to disappear, see https://github.com/processing/processing/issues/5183)\n // t = screen_q - screen_p\n //\n // tangent is normalized and we don't care which aDirection it points to (+-)\n // t = +- normalize( screen_q - screen_p )\n // t = +- normalize( (q.xy/q.w+<1,1>)*0.5*uViewport.zw - (p.xy/p.w+<1,1>)*0.5*uViewport.zw )\n //\n // extract common factor, <1,1> - <1,1> cancels out\n // t = +- normalize( (q.xy/q.w - p.xy/p.w) * 0.5 * uViewport.zw )\n //\n // convert to common divisor\n // t = +- normalize( ((q.xy*p.w - p.xy*q.w) / (p.w*q.w)) * 0.5 * uViewport.zw )\n //\n // remove the common scalar divisor/factor, not needed due to normalize and +-\n // (keep uViewport - can't remove because it has different components for x and y\n // and corrects for aspect ratio, see https://github.com/processing/processing/issues/5181)\n // t = +- normalize( (q.xy*p.w - p.xy*q.w) * uViewport.zw )\n\n vec2 tangent = normalize((q.xy*p.w - p.xy*q.w) * uViewport.zw);\n\n // flip tangent to normal (it's already normalized)\n vec2 normal = vec2(-tangent.y, tangent.x);\n\n float thickness = aDirection.w * uStrokeWeight;\n vec2 offset = normal * thickness / 2.0;\n\n vec2 curPerspScale;\n\n if(uPerspective == 1) {\n // Perspective ---\n // convert from world to clip by multiplying with projection scaling factor\n // to get the right thickness (see https://github.com/processing/processing/issues/5182)\n // invert Y, projections in Processing invert Y\n curPerspScale = (uProjectionMatrix * vec4(1, -1, 0, 0)).xy;\n } else {\n // No Perspective ---\n // multiply by W (to cancel out division by W later in the pipeline) and\n // convert from screen to clip (derived from clip to screen above)\n curPerspScale = p.w / (0.5 * uViewport.zw);\n }\n\n gl_Position.xy = p.xy + offset.xy * curPerspScale;\n gl_Position.zw = p.zw;\n}\n",
+ lineFrag:
+ 'precision mediump float;\nprecision mediump int;\n\nuniform vec4 uMaterialColor;\n\nvoid main() {\n gl_FragColor = uMaterialColor;\n}',
+ pointVert:
+ 'attribute vec3 aPosition;\nuniform float uPointSize;\nvarying float vStrokeWeight;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvoid main() {\n\tvec4 positionVec4 = vec4(aPosition, 1.0);\n\tgl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n\tgl_PointSize = uPointSize;\n\tvStrokeWeight = uPointSize;\n}',
+ pointFrag:
+ 'precision mediump float;\nprecision mediump int;\nuniform vec4 uMaterialColor;\nvarying float vStrokeWeight;\n\nvoid main(){\n\tfloat mask = 0.0;\n\n\t// make a circular mask using the gl_PointCoord (goes from 0 - 1 on a point)\n // might be able to get a nicer edge on big strokeweights with smoothstep but slightly less performant\n\n\tmask = step(0.98, length(gl_PointCoord * 2.0 - 1.0));\n\n\t// if strokeWeight is 1 or less lets just draw a square\n\t// this prevents weird artifacting from carving circles when our points are really small\n\t// if strokeWeight is larger than 1, we just use it as is\n\n\tmask = mix(0.0, mask, clamp(floor(vStrokeWeight - 0.5),0.0,1.0));\n\n\t// throw away the borders of the mask\n // otherwise we get weird alpha blending issues\n\n\tif(mask > 0.98){\n discard;\n \t}\n\n \tgl_FragColor = vec4(uMaterialColor.rgb * (1.0 - mask), uMaterialColor.a) ;\n}'
+ };
+
+ /**
+ * 3D graphics class
+ * @private
+ * @class p5.RendererGL
+ * @constructor
+ * @extends p5.Renderer
+ * @todo extend class to include public method for offscreen
+ * rendering (FBO).
+ *
+ */
+ _main.default.RendererGL = function(elt, pInst, isMainCanvas, attr) {
+ _main.default.Renderer.call(this, elt, pInst, isMainCanvas);
+ this._setAttributeDefaults(pInst);
+ this._initContext();
+ this.isP3D = true; //lets us know we're in 3d mode
+ this.GL = this.drawingContext;
+
+ // erasing
+ this._isErasing = false;
+
+ // lights
+ this._enableLighting = false;
+
+ this.ambientLightColors = [];
+ this.specularColors = [1, 1, 1];
+
+ this.directionalLightDirections = [];
+ this.directionalLightDiffuseColors = [];
+ this.directionalLightSpecularColors = [];
+
+ this.pointLightPositions = [];
+ this.pointLightDiffuseColors = [];
+ this.pointLightSpecularColors = [];
+
+ this.spotLightPositions = [];
+ this.spotLightDirections = [];
+ this.spotLightDiffuseColors = [];
+ this.spotLightSpecularColors = [];
+ this.spotLightAngle = [];
+ this.spotLightConc = [];
+
+ this.drawMode = constants.FILL;
+
+ this.curFillColor = this._cachedFillStyle = [1, 1, 1, 1];
+ this.curStrokeColor = this._cachedStrokeStyle = [0, 0, 0, 1];
+
+ this.curBlendMode = this._cachedBlendMode = constants.BLEND;
+ this.blendExt = this.GL.getExtension('EXT_blend_minmax');
+
+ this._useSpecularMaterial = false;
+ this._useEmissiveMaterial = false;
+ this._useNormalMaterial = false;
+ this._useShininess = 1;
+
+ this._tint = [255, 255, 255, 255];
+
+ // lightFalloff variables
+ this.constantAttenuation = 1;
+ this.linearAttenuation = 0;
+ this.quadraticAttenuation = 0;
+
+ /**
+ * model view, projection, & normal
+ * matrices
+ */
+ this.uMVMatrix = new _main.default.Matrix();
+ this.uPMatrix = new _main.default.Matrix();
+ this.uNMatrix = new _main.default.Matrix('mat3');
+
+ // Camera
+ this._curCamera = new _main.default.Camera(this);
+ this._curCamera._computeCameraDefaultSettings();
+ this._curCamera._setDefaultCamera();
+
+ //Geometry & Material hashes
+ this.gHash = {};
+
+ this._defaultLightShader = undefined;
+ this._defaultImmediateModeShader = undefined;
+ this._defaultNormalShader = undefined;
+ this._defaultColorShader = undefined;
+ this._defaultPointShader = undefined;
+
+ this._pointVertexBuffer = this.GL.createBuffer();
+
+ this.userFillShader = undefined;
+ this.userStrokeShader = undefined;
+ this.userPointShader = undefined;
+
+ //Imediate Mode
+ //default drawing is done in Retained Mode
+ this.isImmediateDrawing = false;
+ this.immediateMode = {};
+
+ this.pointSize = 5.0; //default point size
+ this.curStrokeWeight = 1;
+
+ // array of textures created in this gl context via this.getTexture(src)
+ this.textures = [];
+
+ this.textureMode = constants.IMAGE;
+ // default wrap settings
+ this.textureWrapX = constants.CLAMP;
+ this.textureWrapY = constants.CLAMP;
+ this._tex = null;
+ this._curveTightness = 6;
+
+ // lookUpTable for coefficients needed to be calculated for bezierVertex, same are used for curveVertex
+ this._lookUpTableBezier = [];
+ // lookUpTable for coefficients needed to be calculated for quadraticVertex
+ this._lookUpTableQuadratic = [];
+
+ // current curveDetail in the Bezier lookUpTable
+ this._lutBezierDetail = 0;
+ // current curveDetail in the Quadratic lookUpTable
+ this._lutQuadraticDetail = 0;
+
+ this._tessy = this._initTessy();
+
+ this.fontInfos = {};
+
+ return this;
+ };
+
+ _main.default.RendererGL.prototype = Object.create(
+ _main.default.Renderer.prototype
+ );
+
+ //////////////////////////////////////////////
+ // Setting
+ //////////////////////////////////////////////
+
+ _main.default.RendererGL.prototype._setAttributeDefaults = function(pInst) {
+ var defaults = {
+ alpha: true,
+ depth: true,
+ stencil: true,
+ antialias: false,
+ premultipliedAlpha: false,
+ preserveDrawingBuffer: true,
+ perPixelLighting: false
+ };
+
+ if (pInst._glAttributes === null) {
+ pInst._glAttributes = defaults;
+ } else {
+ pInst._glAttributes = Object.assign(defaults, pInst._glAttributes);
+ }
+ return;
+ };
+
+ _main.default.RendererGL.prototype._initContext = function() {
+ try {
+ this.drawingContext =
+ this.canvas.getContext('webgl', this._pInst._glAttributes) ||
+ this.canvas.getContext('experimental-webgl', this._pInst._glAttributes);
+ if (this.drawingContext === null) {
+ throw new Error('Error creating webgl context');
+ } else {
+ var gl = this.drawingContext;
+ gl.enable(gl.DEPTH_TEST);
+ gl.depthFunc(gl.LEQUAL);
+ gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+ this._viewport = this.drawingContext.getParameter(
+ this.drawingContext.VIEWPORT
+ );
+ }
+ } catch (er) {
+ throw er;
+ }
+ };
+
+ //This is helper function to reset the context anytime the attributes
+ //are changed with setAttributes()
+
+ _main.default.RendererGL.prototype._resetContext = function(options, callback) {
+ var w = this.width;
+ var h = this.height;
+ var defaultId = this.canvas.id;
+ var isPGraphics = this._pInst instanceof _main.default.Graphics;
+
+ if (isPGraphics) {
+ var pg = this._pInst;
+ pg.canvas.parentNode.removeChild(pg.canvas);
+ pg.canvas = document.createElement('canvas');
+ var node = pg._pInst._userNode || document.body;
+ node.appendChild(pg.canvas);
+ _main.default.Element.call(pg, pg.canvas, pg._pInst);
+ pg.width = w;
+ pg.height = h;
+ } else {
+ var c = this.canvas;
+ if (c) {
+ c.parentNode.removeChild(c);
+ }
+ c = document.createElement('canvas');
+ c.id = defaultId;
+ if (this._pInst._userNode) {
+ this._pInst._userNode.appendChild(c);
+ } else {
+ document.body.appendChild(c);
+ }
+ this._pInst.canvas = c;
+ }
+
+ var renderer = new _main.default.RendererGL(
+ this._pInst.canvas,
+ this._pInst,
+ !isPGraphics
+ );
+
+ this._pInst._setProperty('_renderer', renderer);
+ renderer.resize(w, h);
+ renderer._applyDefaults();
+
+ if (!isPGraphics) {
+ this._pInst._elements.push(renderer);
+ }
+
+ if (typeof callback === 'function') {
+ //setTimeout with 0 forces the task to the back of the queue, this ensures that
+ //we finish switching out the renderer
+ setTimeout(function() {
+ callback.apply(window._renderer, options);
+ }, 0);
+ }
+ };
+ /**
+ * @module Rendering
+ * @submodule Rendering
+ * @for p5
+ */
+ /**
+ * Set attributes for the WebGL Drawing context.
+ * This is a way of adjusting how the WebGL
+ * renderer works to fine-tune the display and performance.
+ *
+ * Note that this will reinitialize the drawing context
+ * if called after the WebGL canvas is made.
+ *
+ * If an object is passed as the parameter, all attributes
+ * not declared in the object will be set to defaults.
+ *
+ * The available attributes are:
+ *
+ * alpha - indicates if the canvas contains an alpha buffer
+ * default is true
+ *
+ * depth - indicates whether the drawing buffer has a depth buffer
+ * of at least 16 bits - default is true
+ *
+ * stencil - indicates whether the drawing buffer has a stencil buffer
+ * of at least 8 bits
+ *
+ * antialias - indicates whether or not to perform anti-aliasing
+ * default is false
+ *
+ * premultipliedAlpha - indicates that the page compositor will assume
+ * the drawing buffer contains colors with pre-multiplied alpha
+ * default is false
+ *
+ * preserveDrawingBuffer - if true the buffers will not be cleared and
+ * and will preserve their values until cleared or overwritten by author
+ * (note that p5 clears automatically on draw loop)
+ * default is true
+ *
+ * perPixelLighting - if true, per-pixel lighting will be used in the
+ * lighting shader.
+ * default is false
+ *
+ * @method setAttributes
+ * @for p5
+ * @param {String} key Name of attribute
+ * @param {Boolean} value New value of named attribute
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * push();
+ * rotateZ(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * rotateY(frameCount * 0.02);
+ * fill(0, 0, 0);
+ * box(50);
+ * pop();
+ * }
+ *
+ *
+ *
+ * Now with the antialias attribute set to true.
+ *
+ *
+ *
+ * function setup() {
+ * setAttributes('antialias', true);
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * push();
+ * rotateZ(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * rotateY(frameCount * 0.02);
+ * fill(0, 0, 0);
+ * box(50);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // press the mouse button to enable perPixelLighting
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ * let lights = [
+ * { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+ * { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+ * { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+ * { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+ * { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+ * { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+ * ];
+ *
+ * function draw() {
+ * let t = millis() / 1000 + 1000;
+ * background(0);
+ * directionalLight(color('#222'), 1, 1, 1);
+ *
+ * for (let i = 0; i < lights.length; i++) {
+ * let light = lights[i];
+ * pointLight(
+ * color(light.c),
+ * p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+ * );
+ * }
+ *
+ * specularMaterial(255);
+ * sphere(width * 0.1);
+ *
+ * rotateX(t * 0.77);
+ * rotateY(t * 0.83);
+ * rotateZ(t * 0.91);
+ * torus(width * 0.3, width * 0.07, 24, 10);
+ * }
+ *
+ * function mousePressed() {
+ * setAttributes('perPixelLighting', true);
+ * noStroke();
+ * fill(255);
+ * }
+ * function mouseReleased() {
+ * setAttributes('perPixelLighting', false);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ *
+ *
+ * @alt a rotating cube with smoother edges
+ */
+ /**
+ * @method setAttributes
+ * @for p5
+ * @param {Object} obj object with key-value pairs
+ */
+
+ _main.default.prototype.setAttributes = function(key, value) {
+ if (typeof this._glAttributes === 'undefined') {
+ console.log(
+ 'You are trying to use setAttributes on a p5.Graphics object ' +
+ 'that does not use a WEBGL renderer.'
+ );
+
+ return;
+ }
+ var unchanged = true;
+ if (typeof value !== 'undefined') {
+ //first time modifying the attributes
+ if (this._glAttributes === null) {
+ this._glAttributes = {};
+ }
+ if (this._glAttributes[key] !== value) {
+ //changing value of previously altered attribute
+ this._glAttributes[key] = value;
+ unchanged = false;
+ }
+ //setting all attributes with some change
+ } else if (key instanceof Object) {
+ if (this._glAttributes !== key) {
+ this._glAttributes = key;
+ unchanged = false;
+ }
+ }
+ //@todo_FES
+ if (!this._renderer.isP3D || unchanged) {
+ return;
+ }
+
+ if (!this._setupDone) {
+ for (var x in this._renderer.gHash) {
+ if (this._renderer.gHash.hasOwnProperty(x)) {
+ console.error(
+ 'Sorry, Could not set the attributes, you need to call setAttributes() ' +
+ 'before calling the other drawing methods in setup()'
+ );
+
+ return;
+ }
+ }
+ }
+
+ this.push();
+ this._renderer._resetContext();
+ this.pop();
+
+ if (this._renderer._curCamera) {
+ this._renderer._curCamera._renderer = this._renderer;
+ }
+ };
+
+ /**
+ * @class p5.RendererGL
+ */
+
+ _main.default.RendererGL.prototype._update = function() {
+ // reset model view and apply initial camera transform
+ // (containing only look at info; no projection).
+ this.uMVMatrix.set(
+ this._curCamera.cameraMatrix.mat4[0],
+ this._curCamera.cameraMatrix.mat4[1],
+ this._curCamera.cameraMatrix.mat4[2],
+ this._curCamera.cameraMatrix.mat4[3],
+ this._curCamera.cameraMatrix.mat4[4],
+ this._curCamera.cameraMatrix.mat4[5],
+ this._curCamera.cameraMatrix.mat4[6],
+ this._curCamera.cameraMatrix.mat4[7],
+ this._curCamera.cameraMatrix.mat4[8],
+ this._curCamera.cameraMatrix.mat4[9],
+ this._curCamera.cameraMatrix.mat4[10],
+ this._curCamera.cameraMatrix.mat4[11],
+ this._curCamera.cameraMatrix.mat4[12],
+ this._curCamera.cameraMatrix.mat4[13],
+ this._curCamera.cameraMatrix.mat4[14],
+ this._curCamera.cameraMatrix.mat4[15]
+ );
+
+ // reset light data for new frame.
+
+ this.ambientLightColors.length = 0;
+ this.specularColors = [1, 1, 1];
+
+ this.directionalLightDirections.length = 0;
+ this.directionalLightDiffuseColors.length = 0;
+ this.directionalLightSpecularColors.length = 0;
+
+ this.pointLightPositions.length = 0;
+ this.pointLightDiffuseColors.length = 0;
+ this.pointLightSpecularColors.length = 0;
+
+ this.spotLightPositions.length = 0;
+ this.spotLightDirections.length = 0;
+ this.spotLightDiffuseColors.length = 0;
+ this.spotLightSpecularColors.length = 0;
+ this.spotLightAngle.length = 0;
+ this.spotLightConc.length = 0;
+
+ this._enableLighting = false;
+
+ //reset tint value for new frame
+ this._tint = [255, 255, 255, 255];
+
+ //Clear depth every frame
+ this.GL.clear(this.GL.DEPTH_BUFFER_BIT);
+ };
+
+ /**
+ * [background description]
+ */
+ _main.default.RendererGL.prototype.background = function() {
+ var _this$_pInst;
+ var _col = (_this$_pInst = this._pInst).color.apply(_this$_pInst, arguments);
+ var _r = _col.levels[0] / 255;
+ var _g = _col.levels[1] / 255;
+ var _b = _col.levels[2] / 255;
+ var _a = _col.levels[3] / 255;
+ this.GL.clearColor(_r, _g, _b, _a);
+ this.GL.depthMask(true);
+ this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
+ };
+
+ //////////////////////////////////////////////
+ // COLOR
+ //////////////////////////////////////////////
+ /**
+ * Basic fill material for geometry with a given color
+ * @method fill
+ * @class p5.RendererGL
+ * @param {Number|Number[]|String|p5.Color} v1 gray value,
+ * red or hue value (depending on the current color mode),
+ * or color Array, or CSS color string
+ * @param {Number} [v2] green or saturation value
+ * @param {Number} [v3] blue or brightness value
+ * @param {Number} [a] opacity
+ * @chainable
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * fill(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(75, 75, 75);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black canvas with purple cube spinning
+ *
+ */
+ _main.default.RendererGL.prototype.fill = function(v1, v2, v3, a) {
+ //see material.js for more info on color blending in webgl
+ var color = _main.default.prototype.color.apply(this._pInst, arguments);
+ this.curFillColor = color._array;
+ this.drawMode = constants.FILL;
+ this._useNormalMaterial = false;
+ this._tex = null;
+ };
+
+ /**
+ * Basic stroke material for geometry with a given color
+ * @method stroke
+ * @param {Number|Number[]|String|p5.Color} v1 gray value,
+ * red or hue value (depending on the current color mode),
+ * or color Array, or CSS color string
+ * @param {Number} [v2] green or saturation value
+ * @param {Number} [v3] blue or brightness value
+ * @param {Number} [a] opacity
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * stroke(240, 150, 150);
+ * fill(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(75, 75, 75);
+ * }
+ *
+ *
+ *
+ * @alt
+ * black canvas with purple cube with pink outline spinning
+ *
+ */
+ _main.default.RendererGL.prototype.stroke = function(r, g, b, a) {
+ //@todo allow transparency in stroking currently doesn't have
+ //any impact and causes problems with specularMaterial
+ arguments[3] = 255;
+ var color = _main.default.prototype.color.apply(this._pInst, arguments);
+ this.curStrokeColor = color._array;
+ };
+
+ _main.default.RendererGL.prototype.strokeCap = function(cap) {
+ // @TODO : to be implemented
+ console.error('Sorry, strokeCap() is not yet implemented in WEBGL mode');
+ };
+
+ _main.default.RendererGL.prototype.strokeJoin = function(join) {
+ // @TODO : to be implemented
+ // https://processing.org/reference/strokeJoin_.html
+ console.error('Sorry, strokeJoin() is not yet implemented in WEBGL mode');
+ };
+
+ _main.default.RendererGL.prototype.blendMode = function(mode) {
+ if (
+ mode === constants.DARKEST ||
+ mode === constants.LIGHTEST ||
+ mode === constants.ADD ||
+ mode === constants.BLEND ||
+ mode === constants.SUBTRACT ||
+ mode === constants.SCREEN ||
+ mode === constants.EXCLUSION ||
+ mode === constants.REPLACE ||
+ mode === constants.MULTIPLY ||
+ mode === constants.REMOVE
+ )
+ this.curBlendMode = mode;
+ else if (
+ mode === constants.BURN ||
+ mode === constants.OVERLAY ||
+ mode === constants.HARD_LIGHT ||
+ mode === constants.SOFT_LIGHT ||
+ mode === constants.DODGE
+ ) {
+ console.warn(
+ 'BURN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, and DODGE only work for blendMode in 2D mode.'
+ );
+ }
+ };
+
+ _main.default.RendererGL.prototype.erase = function(opacityFill, opacityStroke) {
+ if (!this._isErasing) {
+ this._cachedBlendMode = this.curBlendMode;
+ this.blendMode(constants.REMOVE);
+
+ this._cachedFillStyle = this.curFillColor.slice();
+ this.curFillColor = [1, 1, 1, opacityFill / 255];
+
+ this._cachedStrokeStyle = this.curStrokeColor.slice();
+ this.curStrokeColor = [1, 1, 1, opacityStroke / 255];
+
+ this._isErasing = true;
+ }
+ };
+
+ _main.default.RendererGL.prototype.noErase = function() {
+ if (this._isErasing) {
+ this.curFillColor = this._cachedFillStyle.slice();
+ this.curStrokeColor = this._cachedStrokeStyle.slice();
+
+ this.blendMode(this._cachedBlendMode);
+ this._isErasing = false;
+ }
+ };
+
+ /**
+ * Change weight of stroke
+ * @method strokeWeight
+ * @param {Number} stroke weight to be used for drawing
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(200, 400, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * translate(0, -100, 0);
+ * stroke(240, 150, 150);
+ * fill(100, 100, 240);
+ * push();
+ * strokeWeight(8);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * sphere(75);
+ * pop();
+ * push();
+ * translate(0, 200, 0);
+ * strokeWeight(1);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * sphere(75);
+ * pop();
+ * }
+ *
+ *
+ *
+ * @alt
+ * black canvas with two purple rotating spheres with pink
+ * outlines the sphere on top has much heavier outlines,
+ *
+ */
+ _main.default.RendererGL.prototype.strokeWeight = function(w) {
+ if (this.curStrokeWeight !== w) {
+ this.pointSize = w;
+ this.curStrokeWeight = w;
+ }
+ };
+
+ // x,y are canvas-relative (pre-scaled by _pixelDensity)
+ _main.default.RendererGL.prototype._getPixel = function(x, y) {
+ var imageData, index;
+ imageData = new Uint8Array(4);
+ // prettier-ignore
+ this.drawingContext.readPixels(
+ x, y, 1, 1,
+ this.drawingContext.RGBA, this.drawingContext.UNSIGNED_BYTE,
+ imageData);
+
+ index = 0;
+ return [
+ imageData[index + 0],
+ imageData[index + 1],
+ imageData[index + 2],
+ imageData[index + 3]
+ ];
+ };
+
+ /**
+ * Loads the pixels data for this canvas into the pixels[] attribute.
+ * Note that updatePixels() and set() do not work.
+ * Any pixel manipulation must be done directly to the pixels[] array.
+ *
+ * @private
+ * @method loadPixels
+ *
+ */
+
+ _main.default.RendererGL.prototype.loadPixels = function() {
+ var pixelsState = this._pixelsState;
+
+ //@todo_FES
+ if (this._pInst._glAttributes.preserveDrawingBuffer !== true) {
+ console.log(
+ 'loadPixels only works in WebGL when preserveDrawingBuffer ' + 'is true.'
+ );
+
+ return;
+ }
+
+ //if there isn't a renderer-level temporary pixels buffer
+ //make a new one
+ var pixels = pixelsState.pixels;
+ var len = this.GL.drawingBufferWidth * this.GL.drawingBufferHeight * 4;
+ if (!(pixels instanceof Uint8Array) || pixels.length !== len) {
+ pixels = new Uint8Array(len);
+ this._pixelsState._setProperty('pixels', pixels);
+ }
+
+ var pd = this._pInst._pixelDensity;
+ // prettier-ignore
+ this.GL.readPixels(
+ 0, 0, this.width * pd, this.height * pd,
+ this.GL.RGBA, this.GL.UNSIGNED_BYTE,
+ pixels);
+ };
+
+ //////////////////////////////////////////////
+ // HASH | for geometry
+ //////////////////////////////////////////////
+
+ _main.default.RendererGL.prototype.geometryInHash = function(gId) {
+ return this.gHash[gId] !== undefined;
+ };
+
+ /**
+ * [resize description]
+ * @private
+ * @param {Number} w [description]
+ * @param {Number} h [description]
+ */
+ _main.default.RendererGL.prototype.resize = function(w, h) {
+ _main.default.Renderer.prototype.resize.call(this, w, h);
+ this.GL.viewport(0, 0, this.GL.drawingBufferWidth, this.GL.drawingBufferHeight);
+
+ this._viewport = this.GL.getParameter(this.GL.VIEWPORT);
+
+ this._curCamera._resize();
+
+ //resize pixels buffer
+ var pixelsState = this._pixelsState;
+ if (typeof pixelsState.pixels !== 'undefined') {
+ pixelsState._setProperty(
+ 'pixels',
+ new Uint8Array(this.GL.drawingBufferWidth * this.GL.drawingBufferHeight * 4)
+ );
+ }
+ };
+
+ /**
+ * clears color and depth buffers
+ * with r,g,b,a
+ * @private
+ * @param {Number} r normalized red val.
+ * @param {Number} g normalized green val.
+ * @param {Number} b normalized blue val.
+ * @param {Number} a normalized alpha val.
+ */
+ _main.default.RendererGL.prototype.clear = function() {
+ var _r = (arguments.length <= 0 ? undefined : arguments[0]) || 0;
+ var _g = (arguments.length <= 1 ? undefined : arguments[1]) || 0;
+ var _b = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ var _a = (arguments.length <= 3 ? undefined : arguments[3]) || 0;
+ this.GL.clearColor(_r, _g, _b, _a);
+ this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
+ };
+
+ _main.default.RendererGL.prototype.applyMatrix = function(a, b, c, d, e, f) {
+ if (arguments.length === 16) {
+ _main.default.Matrix.prototype.apply.apply(this.uMVMatrix, arguments);
+ } else {
+ // prettier-ignore
+ this.uMVMatrix.apply([
+ a, b, 0, 0,
+ c, d, 0, 0,
+ 0, 0, 1, 0,
+ e, f, 0, 1]);
+ }
+ };
+
+ /**
+ * [translate description]
+ * @private
+ * @param {Number} x [description]
+ * @param {Number} y [description]
+ * @param {Number} z [description]
+ * @chainable
+ * @todo implement handle for components or vector as args
+ */
+ _main.default.RendererGL.prototype.translate = function(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ z = x.z;
+ y = x.y;
+ x = x.x;
+ }
+ this.uMVMatrix.translate([x, y, z]);
+ return this;
+ };
+
+ /**
+ * Scales the Model View Matrix by a vector
+ * @private
+ * @param {Number | p5.Vector | Array} x [description]
+ * @param {Number} [y] y-axis scalar
+ * @param {Number} [z] z-axis scalar
+ * @chainable
+ */
+ _main.default.RendererGL.prototype.scale = function(x, y, z) {
+ this.uMVMatrix.scale(x, y, z);
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.rotate = function(rad, axis) {
+ if (typeof axis === 'undefined') {
+ return this.rotateZ(rad);
+ }
+ _main.default.Matrix.prototype.rotate.apply(this.uMVMatrix, arguments);
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.rotateX = function(rad) {
+ this.rotate(rad, 1, 0, 0);
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.rotateY = function(rad) {
+ this.rotate(rad, 0, 1, 0);
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.rotateZ = function(rad) {
+ this.rotate(rad, 0, 0, 1);
+ return this;
+ };
+
+ _main.default.RendererGL.prototype.push = function() {
+ // get the base renderer style
+ var style = _main.default.Renderer.prototype.push.apply(this);
+
+ // add webgl-specific style properties
+ var properties = style.properties;
+
+ properties.uMVMatrix = this.uMVMatrix.copy();
+ properties.uPMatrix = this.uPMatrix.copy();
+ properties._curCamera = this._curCamera;
+
+ // make a copy of the current camera for the push state
+ // this preserves any references stored using 'createCamera'
+ this._curCamera = this._curCamera.copy();
+
+ properties.ambientLightColors = this.ambientLightColors.slice();
+ properties.specularColors = this.specularColors.slice();
+
+ properties.directionalLightDirections = this.directionalLightDirections.slice();
+ properties.directionalLightDiffuseColors = this.directionalLightDiffuseColors.slice();
+ properties.directionalLightSpecularColors = this.directionalLightSpecularColors.slice();
+
+ properties.pointLightPositions = this.pointLightPositions.slice();
+ properties.pointLightDiffuseColors = this.pointLightDiffuseColors.slice();
+ properties.pointLightSpecularColors = this.pointLightSpecularColors.slice();
+
+ properties.spotLightPositions = this.spotLightPositions.slice();
+ properties.spotLightDirections = this.spotLightDirections.slice();
+ properties.spotLightDiffuseColors = this.spotLightDiffuseColors.slice();
+ properties.spotLightSpecularColors = this.spotLightSpecularColors.slice();
+ properties.spotLightAngle = this.spotLightAngle.slice();
+ properties.spotLightConc = this.spotLightConc.slice();
+
+ properties.userFillShader = this.userFillShader;
+ properties.userStrokeShader = this.userStrokeShader;
+ properties.userPointShader = this.userPointShader;
+
+ properties.pointSize = this.pointSize;
+ properties.curStrokeWeight = this.curStrokeWeight;
+ properties.curStrokeColor = this.curStrokeColor;
+ properties.curFillColor = this.curFillColor;
+
+ properties._useSpecularMaterial = this._useSpecularMaterial;
+ properties._useEmissiveMaterial = this._useEmissiveMaterial;
+ properties._useShininess = this._useShininess;
+
+ properties.constantAttenuation = this.constantAttenuation;
+ properties.linearAttenuation = this.linearAttenuation;
+ properties.quadraticAttenuation = this.quadraticAttenuation;
+
+ properties._enableLighting = this._enableLighting;
+ properties._useNormalMaterial = this._useNormalMaterial;
+ properties._tex = this._tex;
+ properties.drawMode = this.drawMode;
+
+ return style;
+ };
+
+ _main.default.RendererGL.prototype.resetMatrix = function() {
+ this.uMVMatrix = _main.default.Matrix.identity(this._pInst);
+ return this;
+ };
+
+ //////////////////////////////////////////////
+ // SHADER
+ //////////////////////////////////////////////
+
+ /*
+ * shaders are created and cached on a per-renderer basis,
+ * on the grounds that each renderer will have its own gl context
+ * and the shader must be valid in that context.
+ */
+
+ _main.default.RendererGL.prototype._getImmediateStrokeShader = function() {
+ // select the stroke shader to use
+ var stroke = this.userStrokeShader;
+ if (!stroke || !stroke.isStrokeShader()) {
+ return this._getLineShader();
+ }
+ return stroke;
+ };
+
+ _main.default.RendererGL.prototype._getRetainedStrokeShader =
+ _main.default.RendererGL.prototype._getImmediateStrokeShader;
+
+ /*
+ * selects which fill shader should be used based on renderer state,
+ * for use with begin/endShape and immediate vertex mode.
+ */
+ _main.default.RendererGL.prototype._getImmediateFillShader = function() {
+ if (this._useNormalMaterial) {
+ console.log(
+ 'Sorry, normalMaterial() does not currently work with custom WebGL geometry' +
+ ' created with beginShape(). Falling back to standard fill material.'
+ );
+
+ return this._getImmediateModeShader();
+ }
+
+ var fill = this.userFillShader;
+ if (this._enableLighting) {
+ if (!fill || !fill.isLightShader()) {
+ return this._getLightShader();
+ }
+ } else if (this._tex) {
+ if (!fill || !fill.isTextureShader()) {
+ return this._getLightShader();
+ }
+ } else if (!fill /*|| !fill.isColorShader()*/) {
+ return this._getImmediateModeShader();
+ }
+ return fill;
+ };
+
+ /*
+ * selects which fill shader should be used based on renderer state
+ * for retained mode.
+ */
+ _main.default.RendererGL.prototype._getRetainedFillShader = function() {
+ if (this._useNormalMaterial) {
+ return this._getNormalShader();
+ }
+
+ var fill = this.userFillShader;
+ if (this._enableLighting) {
+ if (!fill || !fill.isLightShader()) {
+ return this._getLightShader();
+ }
+ } else if (this._tex) {
+ if (!fill || !fill.isTextureShader()) {
+ return this._getLightShader();
+ }
+ } else if (!fill /* || !fill.isColorShader()*/) {
+ return this._getColorShader();
+ }
+ return fill;
+ };
+
+ _main.default.RendererGL.prototype._getImmediatePointShader = function() {
+ // select the point shader to use
+ var point = this.userPointShader;
+ if (!point || !point.isPointShader()) {
+ return this._getPointShader();
+ }
+ return point;
+ };
+
+ _main.default.RendererGL.prototype._getRetainedLineShader =
+ _main.default.RendererGL.prototype._getImmediateLineShader;
+
+ _main.default.RendererGL.prototype._getLightShader = function() {
+ if (!this._defaultLightShader) {
+ if (this._pInst._glAttributes.perPixelLighting) {
+ this._defaultLightShader = new _main.default.Shader(
+ this,
+ defaultShaders.phongVert,
+ defaultShaders.phongFrag
+ );
+ } else {
+ this._defaultLightShader = new _main.default.Shader(
+ this,
+ defaultShaders.lightVert,
+ defaultShaders.lightTextureFrag
+ );
+ }
+ }
+
+ return this._defaultLightShader;
+ };
+
+ _main.default.RendererGL.prototype._getImmediateModeShader = function() {
+ if (!this._defaultImmediateModeShader) {
+ this._defaultImmediateModeShader = new _main.default.Shader(
+ this,
+ defaultShaders.immediateVert,
+ defaultShaders.vertexColorFrag
+ );
+ }
+
+ return this._defaultImmediateModeShader;
+ };
+
+ _main.default.RendererGL.prototype._getNormalShader = function() {
+ if (!this._defaultNormalShader) {
+ this._defaultNormalShader = new _main.default.Shader(
+ this,
+ defaultShaders.normalVert,
+ defaultShaders.normalFrag
+ );
+ }
+
+ return this._defaultNormalShader;
+ };
+
+ _main.default.RendererGL.prototype._getColorShader = function() {
+ if (!this._defaultColorShader) {
+ this._defaultColorShader = new _main.default.Shader(
+ this,
+ defaultShaders.normalVert,
+ defaultShaders.basicFrag
+ );
+ }
+
+ return this._defaultColorShader;
+ };
+
+ _main.default.RendererGL.prototype._getPointShader = function() {
+ if (!this._defaultPointShader) {
+ this._defaultPointShader = new _main.default.Shader(
+ this,
+ defaultShaders.pointVert,
+ defaultShaders.pointFrag
+ );
+ }
+ return this._defaultPointShader;
+ };
+
+ _main.default.RendererGL.prototype._getLineShader = function() {
+ if (!this._defaultLineShader) {
+ this._defaultLineShader = new _main.default.Shader(
+ this,
+ defaultShaders.lineVert,
+ defaultShaders.lineFrag
+ );
+ }
+
+ return this._defaultLineShader;
+ };
+
+ _main.default.RendererGL.prototype._getFontShader = function() {
+ if (!this._defaultFontShader) {
+ this.GL.getExtension('OES_standard_derivatives');
+ this._defaultFontShader = new _main.default.Shader(
+ this,
+ defaultShaders.fontVert,
+ defaultShaders.fontFrag
+ );
+ }
+ return this._defaultFontShader;
+ };
+
+ _main.default.RendererGL.prototype._getEmptyTexture = function() {
+ if (!this._emptyTexture) {
+ // a plain white texture RGBA, full alpha, single pixel.
+ var im = new _main.default.Image(1, 1);
+ im.set(0, 0, 255);
+ this._emptyTexture = new _main.default.Texture(this, im);
+ }
+ return this._emptyTexture;
+ };
+
+ _main.default.RendererGL.prototype.getTexture = function(img) {
+ var textures = this.textures;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = textures[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var texture = _step.value;
+ if (texture.src === img) return texture;
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+
+ var tex = new _main.default.Texture(this, img);
+ textures.push(tex);
+ return tex;
+ };
+
+ _main.default.RendererGL.prototype._setStrokeUniforms = function(strokeShader) {
+ strokeShader.bindShader();
+
+ // set the uniform values
+ strokeShader.setUniform('uMaterialColor', this.curStrokeColor);
+ strokeShader.setUniform('uStrokeWeight', this.curStrokeWeight);
+ };
+
+ _main.default.RendererGL.prototype._setFillUniforms = function(fillShader) {
+ fillShader.bindShader();
+
+ // TODO: optimize
+ fillShader.setUniform('uMaterialColor', this.curFillColor);
+ fillShader.setUniform('isTexture', !!this._tex);
+ if (this._tex) {
+ fillShader.setUniform('uSampler', this._tex);
+ }
+ fillShader.setUniform('uTint', this._tint);
+
+ fillShader.setUniform('uSpecular', this._useSpecularMaterial);
+ fillShader.setUniform('uEmissive', this._useEmissiveMaterial);
+ fillShader.setUniform('uShininess', this._useShininess);
+
+ fillShader.setUniform('uUseLighting', this._enableLighting);
+
+ var pointLightCount = this.pointLightDiffuseColors.length / 3;
+ fillShader.setUniform('uPointLightCount', pointLightCount);
+ fillShader.setUniform('uPointLightLocation', this.pointLightPositions);
+ fillShader.setUniform('uPointLightDiffuseColors', this.pointLightDiffuseColors);
+
+ fillShader.setUniform(
+ 'uPointLightSpecularColors',
+ this.pointLightSpecularColors
+ );
+
+ var directionalLightCount = this.directionalLightDiffuseColors.length / 3;
+ fillShader.setUniform('uDirectionalLightCount', directionalLightCount);
+ fillShader.setUniform('uLightingDirection', this.directionalLightDirections);
+ fillShader.setUniform(
+ 'uDirectionalDiffuseColors',
+ this.directionalLightDiffuseColors
+ );
+
+ fillShader.setUniform(
+ 'uDirectionalSpecularColors',
+ this.directionalLightSpecularColors
+ );
+
+ // TODO: sum these here...
+ var ambientLightCount = this.ambientLightColors.length / 3;
+ fillShader.setUniform('uAmbientLightCount', ambientLightCount);
+ fillShader.setUniform('uAmbientColor', this.ambientLightColors);
+
+ var spotLightCount = this.spotLightDiffuseColors.length / 3;
+ fillShader.setUniform('uSpotLightCount', spotLightCount);
+ fillShader.setUniform('uSpotLightAngle', this.spotLightAngle);
+ fillShader.setUniform('uSpotLightConc', this.spotLightConc);
+ fillShader.setUniform('uSpotLightDiffuseColors', this.spotLightDiffuseColors);
+ fillShader.setUniform('uSpotLightSpecularColors', this.spotLightSpecularColors);
+
+ fillShader.setUniform('uSpotLightLocation', this.spotLightPositions);
+ fillShader.setUniform('uSpotLightDirection', this.spotLightDirections);
+
+ fillShader.setUniform('uConstantAttenuation', this.constantAttenuation);
+ fillShader.setUniform('uLinearAttenuation', this.linearAttenuation);
+ fillShader.setUniform('uQuadraticAttenuation', this.quadraticAttenuation);
+
+ fillShader.bindTextures();
+ };
+
+ _main.default.RendererGL.prototype._setPointUniforms = function(pointShader) {
+ pointShader.bindShader();
+
+ // set the uniform values
+ pointShader.setUniform('uMaterialColor', this.curStrokeColor);
+ // @todo is there an instance where this isn't stroke weight?
+ // should be they be same var?
+ pointShader.setUniform('uPointSize', this.pointSize);
+ };
+
+ /* Binds a buffer to the drawing context
+ * when passed more than two arguments it also updates or initializes
+ * the data associated with the buffer
+ */
+ _main.default.RendererGL.prototype._bindBuffer = function(
+ buffer,
+ target,
+ values,
+ type,
+ usage
+ ) {
+ if (!target) target = this.GL.ARRAY_BUFFER;
+ this.GL.bindBuffer(target, buffer);
+ if (values !== undefined) {
+ var data = new (type || Float32Array)(values);
+ this.GL.bufferData(target, data, usage || this.GL.STATIC_DRAW);
+ }
+ };
+
+ ///////////////////////////////
+ //// UTILITY FUNCTIONS
+ //////////////////////////////
+ /**
+ * turn a two dimensional array into one dimensional array
+ * @private
+ * @param {Array} arr 2-dimensional array
+ * @return {Array} 1-dimensional array
+ * [[1, 2, 3],[4, 5, 6]] -> [1, 2, 3, 4, 5, 6]
+ */
+ _main.default.RendererGL.prototype._flatten = function(arr) {
+ //when empty, return empty
+ if (arr.length === 0) {
+ return [];
+ } else if (arr.length > 20000) {
+ //big models , load slower to avoid stack overflow
+ //faster non-recursive flatten via axelduch
+ //stackoverflow.com/questions/27266550/how-to-flatten-nested-array-in-javascript
+ var _toString = Object.prototype.toString;
+ var arrayTypeStr = '[object Array]';
+ var result = [];
+ var nodes = arr.slice();
+ var node;
+ node = nodes.pop();
+ do {
+ if (_toString.call(node) === arrayTypeStr) {
+ nodes.push.apply(nodes, _toConsumableArray(node));
+ } else {
+ result.push(node);
+ }
+ } while (nodes.length && (node = nodes.pop()) !== undefined);
+ result.reverse(); // we reverse result to restore the original order
+ return result;
+ } else {
+ var _ref;
+ //otherwise if model within limits for browser
+ //use faster recursive loading
+ return (_ref = []).concat.apply(_ref, _toConsumableArray(arr));
+ }
+ };
+
+ /**
+ * turn a p5.Vector Array into a one dimensional number array
+ * @private
+ * @param {p5.Vector[]} arr an array of p5.Vector
+ * @return {Number[]} a one dimensional array of numbers
+ * [p5.Vector(1, 2, 3), p5.Vector(4, 5, 6)] ->
+ * [1, 2, 3, 4, 5, 6]
+ */
+ _main.default.RendererGL.prototype._vToNArray = function(arr) {
+ var ret = [];
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (
+ var _iterator2 = arr[Symbol.iterator](), _step2;
+ !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done);
+ _iteratorNormalCompletion2 = true
+ ) {
+ var item = _step2.value;
+ ret.push(item.x, item.y, item.z);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+
+ return ret;
+ };
+
+ /**
+ * ensures that p5 is using a 3d renderer. throws an error if not.
+ */
+ _main.default.prototype._assert3d = function(name) {
+ if (!this._renderer.isP3D)
+ throw new Error(
+ ''.concat(
+ name,
+ "() is only supported in WEBGL mode. If you'd like to use 3D graphics and WebGL, see https://p5js.org/examples/form-3d-primitives.html for more information."
+ )
+ );
+ };
+
+ // function to initialize GLU Tesselator
+
+ _main.default.RendererGL.prototype._initTessy = function initTesselator() {
+ // function called for each vertex of tesselator output
+ function vertexCallback(data, polyVertArray) {
+ polyVertArray[polyVertArray.length] = data[0];
+ polyVertArray[polyVertArray.length] = data[1];
+ polyVertArray[polyVertArray.length] = data[2];
+ }
+
+ function begincallback(type) {
+ if (type !== _libtess.default.primitiveType.GL_TRIANGLES) {
+ console.log('expected TRIANGLES but got type: '.concat(type));
+ }
+ }
+
+ function errorcallback(errno) {
+ console.log('error callback');
+ console.log('error number: '.concat(errno));
+ }
+ // callback for when segments intersect and must be split
+ function combinecallback(coords, data, weight) {
+ return [coords[0], coords[1], coords[2]];
+ }
+
+ function edgeCallback(flag) {
+ // don't really care about the flag, but need no-strip/no-fan behavior
+ }
+
+ var tessy = new _libtess.default.GluTesselator();
+ tessy.gluTessCallback(
+ _libtess.default.gluEnum.GLU_TESS_VERTEX_DATA,
+ vertexCallback
+ );
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_BEGIN, begincallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_ERROR, errorcallback);
+ tessy.gluTessCallback(
+ _libtess.default.gluEnum.GLU_TESS_COMBINE,
+ combinecallback
+ );
+ tessy.gluTessCallback(
+ _libtess.default.gluEnum.GLU_TESS_EDGE_FLAG,
+ edgeCallback
+ );
+
+ return tessy;
+ };
+
+ _main.default.RendererGL.prototype._triangulate = function(contours) {
+ // libtess will take 3d verts and flatten to a plane for tesselation
+ // since only doing 2d tesselation here, provide z=1 normal to skip
+ // iterating over verts only to get the same answer.
+ // comment out to test normal-generation code
+ this._tessy.gluTessNormal(0, 0, 1);
+
+ var triangleVerts = [];
+ this._tessy.gluTessBeginPolygon(triangleVerts);
+
+ for (var i = 0; i < contours.length; i++) {
+ this._tessy.gluTessBeginContour();
+ var contour = contours[i];
+ for (var j = 0; j < contour.length; j += 3) {
+ var coords = [contour[j], contour[j + 1], contour[j + 2]];
+ this._tessy.gluTessVertex(coords, coords);
+ }
+ this._tessy.gluTessEndContour();
+ }
+
+ // finish polygon
+ this._tessy.gluTessEndPolygon();
+
+ return triangleVerts;
+ };
+
+ // function to calculate BezierVertex Coefficients
+ _main.default.RendererGL.prototype._bezierCoefficients = function(t) {
+ var t2 = t * t;
+ var t3 = t2 * t;
+ var mt = 1 - t;
+ var mt2 = mt * mt;
+ var mt3 = mt2 * mt;
+ return [mt3, 3 * mt2 * t, 3 * mt * t2, t3];
+ };
+
+ // function to calculate QuadraticVertex Coefficients
+ _main.default.RendererGL.prototype._quadraticCoefficients = function(t) {
+ var t2 = t * t;
+ var mt = 1 - t;
+ var mt2 = mt * mt;
+ return [mt2, 2 * mt * t, t2];
+ };
+
+ // function to convert Bezier coordinates to Catmull Rom Splines
+ _main.default.RendererGL.prototype._bezierToCatmull = function(w) {
+ var p1 = w[1];
+ var p2 = w[1] + (w[2] - w[0]) / this._curveTightness;
+ var p3 = w[2] - (w[3] - w[1]) / this._curveTightness;
+ var p4 = w[2];
+ var p = [p1, p2, p3, p4];
+ return p;
+ };
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 21,
+ '../core/main': 27,
+ '../core/p5.Renderer': 30,
+ './p5.Camera': 75,
+ './p5.Matrix': 77,
+ './p5.Shader': 81,
+ libtess: 10,
+ path: 13
+ }
+ ],
+ 81: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * This module defines the p5.Shader class
+ * @module Lights, Camera
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */ /**
+ * Shader class for WEBGL Mode
+ * @class p5.Shader
+ * @param {p5.RendererGL} renderer an instance of p5.RendererGL that
+ * will provide the GL context for this new p5.Shader
+ * @param {String} vertSrc source code for the vertex shader (as a string)
+ * @param {String} fragSrc source code for the fragment shader (as a string)
+ */ _main.default.Shader = function(renderer, vertSrc, fragSrc) {
+ // TODO: adapt this to not take ids, but rather,
+ // to take the source for a vertex and fragment shader
+ // to enable custom shaders at some later date
+ this._renderer = renderer;
+ this._vertSrc = vertSrc;
+ this._fragSrc = fragSrc;
+ this._vertShader = -1;
+ this._fragShader = -1;
+ this._glProgram = 0;
+ this._loadedAttributes = false;
+ this.attributes = {};
+ this._loadedUniforms = false;
+ this.uniforms = {};
+ this._bound = false;
+ this.samplers = [];
+ };
+
+ /**
+ * Creates, compiles, and links the shader based on its
+ * sources for the vertex and fragment shaders (provided
+ * to the constructor). Populates known attributes and
+ * uniforms from the shader.
+ * @method init
+ * @chainable
+ * @private
+ */
+ _main.default.Shader.prototype.init = function() {
+ if (this._glProgram === 0 /* or context is stale? */) {
+ var gl = this._renderer.GL;
+
+ // @todo: once custom shading is allowed,
+ // friendly error messages should be used here to share
+ // compiler and linker errors.
+
+ //set up the shader by
+ // 1. creating and getting a gl id for the shader program,
+ // 2. compliling its vertex & fragment sources,
+ // 3. linking the vertex and fragment shaders
+ this._vertShader = gl.createShader(gl.VERTEX_SHADER);
+ //load in our default vertex shader
+ gl.shaderSource(this._vertShader, this._vertSrc);
+ gl.compileShader(this._vertShader);
+ // if our vertex shader failed compilation?
+ if (!gl.getShaderParameter(this._vertShader, gl.COMPILE_STATUS)) {
+ console.error(
+ 'Yikes! An error occurred compiling the vertex shader:'.concat(
+ gl.getShaderInfoLog(this._vertShader)
+ )
+ );
+
+ return null;
+ }
+
+ this._fragShader = gl.createShader(gl.FRAGMENT_SHADER);
+ //load in our material frag shader
+ gl.shaderSource(this._fragShader, this._fragSrc);
+ gl.compileShader(this._fragShader);
+ // if our frag shader failed compilation?
+ if (!gl.getShaderParameter(this._fragShader, gl.COMPILE_STATUS)) {
+ console.error(
+ 'Darn! An error occurred compiling the fragment shader:'.concat(
+ gl.getShaderInfoLog(this._fragShader)
+ )
+ );
+
+ return null;
+ }
+
+ this._glProgram = gl.createProgram();
+ gl.attachShader(this._glProgram, this._vertShader);
+ gl.attachShader(this._glProgram, this._fragShader);
+ gl.linkProgram(this._glProgram);
+ if (!gl.getProgramParameter(this._glProgram, gl.LINK_STATUS)) {
+ console.error(
+ 'Snap! Error linking shader program: '.concat(
+ gl.getProgramInfoLog(this._glProgram)
+ )
+ );
+ }
+
+ this._loadAttributes();
+ this._loadUniforms();
+ }
+ return this;
+ };
+
+ /**
+ * Queries the active attributes for this shader and loads
+ * their names and locations into the attributes array.
+ * @method _loadAttributes
+ * @private
+ */
+ _main.default.Shader.prototype._loadAttributes = function() {
+ if (this._loadedAttributes) {
+ return;
+ }
+
+ this.attributes = {};
+
+ var gl = this._renderer.GL;
+
+ var numAttributes = gl.getProgramParameter(
+ this._glProgram,
+ gl.ACTIVE_ATTRIBUTES
+ );
+
+ for (var i = 0; i < numAttributes; ++i) {
+ var attributeInfo = gl.getActiveAttrib(this._glProgram, i);
+ var name = attributeInfo.name;
+ var location = gl.getAttribLocation(this._glProgram, name);
+ var attribute = {};
+ attribute.name = name;
+ attribute.location = location;
+ attribute.index = i;
+ attribute.type = attributeInfo.type;
+ attribute.size = attributeInfo.size;
+ this.attributes[name] = attribute;
+ }
+
+ this._loadedAttributes = true;
+ };
+
+ /**
+ * Queries the active uniforms for this shader and loads
+ * their names and locations into the uniforms array.
+ * @method _loadUniforms
+ * @private
+ */
+ _main.default.Shader.prototype._loadUniforms = function() {
+ if (this._loadedUniforms) {
+ return;
+ }
+
+ var gl = this._renderer.GL;
+
+ // Inspect shader and cache uniform info
+ var numUniforms = gl.getProgramParameter(this._glProgram, gl.ACTIVE_UNIFORMS);
+
+ var samplerIndex = 0;
+ for (var i = 0; i < numUniforms; ++i) {
+ var uniformInfo = gl.getActiveUniform(this._glProgram, i);
+ var uniform = {};
+ uniform.location = gl.getUniformLocation(this._glProgram, uniformInfo.name);
+ uniform.size = uniformInfo.size;
+ var uniformName = uniformInfo.name;
+ //uniforms thats are arrays have their name returned as
+ //someUniform[0] which is a bit silly so we trim it
+ //off here. The size property tells us that its an array
+ //so we dont lose any information by doing this
+ if (uniformInfo.size > 1) {
+ uniformName = uniformName.substring(0, uniformName.indexOf('[0]'));
+ }
+ uniform.name = uniformName;
+ uniform.type = uniformInfo.type;
+ if (uniform.type === gl.SAMPLER_2D) {
+ uniform.samplerIndex = samplerIndex;
+ samplerIndex++;
+ this.samplers.push(uniform);
+ }
+ this.uniforms[uniformName] = uniform;
+ }
+ this._loadedUniforms = true;
+ };
+
+ _main.default.Shader.prototype.compile = function() {
+ // TODO
+ };
+
+ /**
+ * initializes (if needed) and binds the shader program.
+ * @method bindShader
+ * @private
+ */
+ _main.default.Shader.prototype.bindShader = function() {
+ this.init();
+ if (!this._bound) {
+ this.useProgram();
+ this._bound = true;
+
+ this._setMatrixUniforms();
+
+ this.setUniform('uViewport', this._renderer._viewport);
+ }
+ };
+
+ /**
+ * @method unbindShader
+ * @chainable
+ * @private
+ */
+ _main.default.Shader.prototype.unbindShader = function() {
+ if (this._bound) {
+ this.unbindTextures();
+ //this._renderer.GL.useProgram(0); ??
+ this._bound = false;
+ }
+ return this;
+ };
+
+ _main.default.Shader.prototype.bindTextures = function() {
+ var gl = this._renderer.GL;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = this.samplers[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var uniform = _step.value;
+ var tex = uniform.texture;
+ if (tex === undefined) {
+ // user hasn't yet supplied a texture for this slot.
+ // (or there may not be one--maybe just lighting),
+ // so we supply a default texture instead.
+ tex = this._renderer._getEmptyTexture();
+ }
+ gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+ tex.bindTexture();
+ tex.update();
+ gl.uniform1i(uniform.location, uniform.samplerIndex);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ };
+
+ _main.default.Shader.prototype.updateTextures = function() {
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (
+ var _iterator2 = this.samplers[Symbol.iterator](), _step2;
+ !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done);
+ _iteratorNormalCompletion2 = true
+ ) {
+ var uniform = _step2.value;
+ var tex = uniform.texture;
+ if (tex) {
+ tex.update();
+ }
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ };
+
+ _main.default.Shader.prototype.unbindTextures = function() {
+ // TODO: migrate stuff from material.js here
+ // - OR - have material.js define this function
+ };
+
+ _main.default.Shader.prototype._setMatrixUniforms = function() {
+ this.setUniform('uProjectionMatrix', this._renderer.uPMatrix.mat4);
+ if (this.isStrokeShader()) {
+ if (this._renderer._curCamera.cameraType === 'default') {
+ // strokes scale up as they approach camera, default
+ this.setUniform('uPerspective', 1);
+ } else {
+ // strokes have uniform scale regardless of distance from camera
+ this.setUniform('uPerspective', 0);
+ }
+ }
+ this.setUniform('uModelViewMatrix', this._renderer.uMVMatrix.mat4);
+ this.setUniform('uViewMatrix', this._renderer._curCamera.cameraMatrix.mat4);
+ if (this.uniforms.uNormalMatrix) {
+ this._renderer.uNMatrix.inverseTranspose(this._renderer.uMVMatrix);
+ this.setUniform('uNormalMatrix', this._renderer.uNMatrix.mat3);
+ }
+ };
+
+ /**
+ * @method useProgram
+ * @chainable
+ * @private
+ */
+ _main.default.Shader.prototype.useProgram = function() {
+ var gl = this._renderer.GL;
+ gl.useProgram(this._glProgram);
+ return this;
+ };
+
+ /**
+ * Wrapper around gl.uniform functions.
+ * As we store uniform info in the shader we can use that
+ * to do type checking on the supplied data and call
+ * the appropriate function.
+ * @method setUniform
+ * @chainable
+ * @param {String} uniformName the name of the uniform in the
+ * shader program
+ * @param {Object|Number|Boolean|Number[]} data the data to be associated
+ * with that uniform; type varies (could be a single numerical value, array,
+ * matrix, or texture / sampler reference)
+ *
+ * @example
+ *
+ *
+ * // Click within the image to toggle the value of uniforms
+ * // Note: for an alternative approach to the same example,
+ * // involving toggling between shaders please refer to:
+ * // https://p5js.org/reference/#/p5/shader
+ *
+ * let grad;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * shader(grad);
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // update the offset values for each scenario,
+ * // moving the "grad" shader in either vertical or
+ * // horizontal direction each with differing colors
+ *
+ * if (showRedGreen === true) {
+ * grad.setUniform('colorCenter', [1, 0, 0]);
+ * grad.setUniform('colorBackground', [0, 1, 0]);
+ * grad.setUniform('offset', [sin(millis() / 2000), 1]);
+ * } else {
+ * grad.setUniform('colorCenter', [1, 0.5, 0]);
+ * grad.setUniform('colorBackground', [0.226, 0, 0.615]);
+ * grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ * }
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ *
+ *
+ * @alt
+ * 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.
+ */
+ _main.default.Shader.prototype.setUniform = function(uniformName, data) {
+ //@todo update all current gl.uniformXX calls
+
+ var uniform = this.uniforms[uniformName];
+ if (!uniform) {
+ return;
+ }
+
+ var location = uniform.location;
+
+ var gl = this._renderer.GL;
+ this.useProgram();
+
+ switch (uniform.type) {
+ case gl.BOOL:
+ if (data === true) {
+ gl.uniform1i(location, 1);
+ } else {
+ gl.uniform1i(location, 0);
+ }
+ break;
+ case gl.INT:
+ if (uniform.size > 1) {
+ data.length && gl.uniform1iv(location, data);
+ } else {
+ gl.uniform1i(location, data);
+ }
+ break;
+ case gl.FLOAT:
+ if (uniform.size > 1) {
+ data.length && gl.uniform1fv(location, data);
+ } else {
+ gl.uniform1f(location, data);
+ }
+ break;
+ case gl.FLOAT_MAT3:
+ gl.uniformMatrix3fv(location, false, data);
+ break;
+ case gl.FLOAT_MAT4:
+ gl.uniformMatrix4fv(location, false, data);
+ break;
+ case gl.FLOAT_VEC2:
+ if (uniform.size > 1) {
+ data.length && gl.uniform2fv(location, data);
+ } else {
+ gl.uniform2f(location, data[0], data[1]);
+ }
+ break;
+ case gl.FLOAT_VEC3:
+ if (uniform.size > 1) {
+ data.length && gl.uniform3fv(location, data);
+ } else {
+ gl.uniform3f(location, data[0], data[1], data[2]);
+ }
+ break;
+ case gl.FLOAT_VEC4:
+ if (uniform.size > 1) {
+ data.length && gl.uniform4fv(location, data);
+ } else {
+ gl.uniform4f(location, data[0], data[1], data[2], data[3]);
+ }
+ break;
+ case gl.INT_VEC2:
+ if (uniform.size > 1) {
+ data.length && gl.uniform2iv(location, data);
+ } else {
+ gl.uniform2i(location, data[0], data[1]);
+ }
+ break;
+ case gl.INT_VEC3:
+ if (uniform.size > 1) {
+ data.length && gl.uniform3iv(location, data);
+ } else {
+ gl.uniform3i(location, data[0], data[1], data[2]);
+ }
+ break;
+ case gl.INT_VEC4:
+ if (uniform.size > 1) {
+ data.length && gl.uniform4iv(location, data);
+ } else {
+ gl.uniform4i(location, data[0], data[1], data[2], data[3]);
+ }
+ break;
+ case gl.SAMPLER_2D:
+ gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+ uniform.texture = this._renderer.getTexture(data);
+ gl.uniform1i(uniform.location, uniform.samplerIndex);
+ break;
+ //@todo complete all types
+ }
+ return this;
+ };
+
+ /* NONE OF THIS IS FAST OR EFFICIENT BUT BEAR WITH ME
+ *
+ * these shader "type" query methods are used by various
+ * facilities of the renderer to determine if changing
+ * the shader type for the required action (for example,
+ * do we need to load the default lighting shader if the
+ * current shader cannot handle lighting?)
+ *
+ **/
+
+ _main.default.Shader.prototype.isLightShader = function() {
+ return (
+ this.attributes.aNormal !== undefined ||
+ this.uniforms.uUseLighting !== undefined ||
+ this.uniforms.uAmbientLightCount !== undefined ||
+ this.uniforms.uDirectionalLightCount !== undefined ||
+ this.uniforms.uPointLightCount !== undefined ||
+ this.uniforms.uAmbientColor !== undefined ||
+ this.uniforms.uDirectionalDiffuseColors !== undefined ||
+ this.uniforms.uDirectionalSpecularColors !== undefined ||
+ this.uniforms.uPointLightLocation !== undefined ||
+ this.uniforms.uPointLightDiffuseColors !== undefined ||
+ this.uniforms.uPointLightSpecularColors !== undefined ||
+ this.uniforms.uLightingDirection !== undefined ||
+ this.uniforms.uSpecular !== undefined
+ );
+ };
+
+ _main.default.Shader.prototype.isTextureShader = function() {
+ return this.samplerIndex > 0;
+ };
+
+ _main.default.Shader.prototype.isColorShader = function() {
+ return (
+ this.attributes.aVertexColor !== undefined ||
+ this.uniforms.uMaterialColor !== undefined
+ );
+ };
+
+ _main.default.Shader.prototype.isTexLightShader = function() {
+ return this.isLightShader() && this.isTextureShader();
+ };
+
+ _main.default.Shader.prototype.isStrokeShader = function() {
+ return this.uniforms.uStrokeWeight !== undefined;
+ };
+
+ /**
+ * @method enableAttrib
+ * @chainable
+ * @private
+ */
+ _main.default.Shader.prototype.enableAttrib = function(
+ attr,
+ size,
+ type,
+ normalized,
+ stride,
+ offset
+ ) {
+ if (attr) {
+ if (
+ typeof IS_MINIFIED === 'undefined' &&
+ this.attributes[attr.name] !== attr
+ ) {
+ console.warn(
+ 'The attribute "'.concat(
+ attr.name,
+ '"passed to enableAttrib does not belong to this shader.'
+ )
+ );
+ }
+ var loc = attr.location;
+ if (loc !== -1) {
+ var gl = this._renderer.GL;
+ gl.enableVertexAttribArray(loc);
+ gl.vertexAttribPointer(
+ loc,
+ size,
+ type || gl.FLOAT,
+ normalized || false,
+ stride || 0,
+ offset || 0
+ );
+ }
+ }
+ return this;
+ };
+ var _default = _main.default.Shader;
+ exports.default = _default;
+ },
+ { '../core/main': 27 }
+ ],
+ 82: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', { value: true });
+ exports.default = void 0;
+
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ /**
+ * This module defines the p5.Texture class
+ * @module Lights, Camera
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */ /**
+ * Texture class for WEBGL Mode
+ * @private
+ * @class p5.Texture
+ * @param {p5.RendererGL} renderer an instance of p5.RendererGL that
+ * will provide the GL context for this new p5.Texture
+ * @param {p5.Image|p5.Graphics|p5.Element|p5.MediaElement|ImageData} [obj] the
+ * object containing the image data to store in the texture.
+ */ _main.default.Texture = function(renderer, obj) {
+ this._renderer = renderer;
+ var gl = this._renderer.GL;
+
+ this.src = obj;
+ this.glTex = undefined;
+ this.glTarget = gl.TEXTURE_2D;
+ this.glFormat = gl.RGBA;
+ this.mipmaps = false;
+ this.glMinFilter = gl.LINEAR;
+ this.glMagFilter = gl.LINEAR;
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+
+ // used to determine if this texture might need constant updating
+ // because it is a video or gif.
+ this.isSrcMediaElement =
+ typeof _main.default.MediaElement !== 'undefined' &&
+ obj instanceof _main.default.MediaElement;
+ this._videoPrevUpdateTime = 0;
+ this.isSrcHTMLElement =
+ typeof _main.default.Element !== 'undefined' &&
+ obj instanceof _main.default.Element &&
+ !(obj instanceof _main.default.Graphics);
+ this.isSrcP5Image = obj instanceof _main.default.Image;
+ this.isSrcP5Graphics = obj instanceof _main.default.Graphics;
+ this.isImageData = typeof ImageData !== 'undefined' && obj instanceof ImageData;
+
+ var textureData = this._getTextureDataFromSource();
+ this.width = textureData.width;
+ this.height = textureData.height;
+
+ this.init(textureData);
+ return this;
+ };
+
+ _main.default.Texture.prototype._getTextureDataFromSource = function() {
+ var textureData;
+ if (this.isSrcP5Image) {
+ // param is a p5.Image
+ textureData = this.src.canvas;
+ } else if (
+ this.isSrcMediaElement ||
+ this.isSrcP5Graphics ||
+ this.isSrcHTMLElement
+ ) {
+ // if param is a video HTML element
+ textureData = this.src.elt;
+ } else if (this.isImageData) {
+ textureData = this.src;
+ }
+ return textureData;
+ };
+
+ /**
+ * Initializes common texture parameters, creates a gl texture,
+ * tries to upload the texture for the first time if data is
+ * already available.
+ * @private
+ * @method init
+ */
+ _main.default.Texture.prototype.init = function(data) {
+ var gl = this._renderer.GL;
+ this.glTex = gl.createTexture();
+
+ this.glWrapS = this._renderer.textureWrapX;
+ this.glWrapT = this._renderer.textureWrapY;
+
+ this.setWrapMode(this.glWrapS, this.glWrapT);
+ this.bindTexture();
+
+ //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.glMagFilter);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.glMinFilter);
+
+ if (
+ this.width === 0 ||
+ this.height === 0 ||
+ (this.isSrcMediaElement && !this.src.loadedmetadata)
+ ) {
+ // assign a 1x1 empty texture initially, because data is not yet ready,
+ // so that no errors occur in gl console!
+ var tmpdata = new Uint8Array([1, 1, 1, 1]);
+ gl.texImage2D(
+ this.glTarget,
+ 0,
+ gl.RGBA,
+ 1,
+ 1,
+ 0,
+ this.glFormat,
+ gl.UNSIGNED_BYTE,
+ tmpdata
+ );
+ } else {
+ // data is ready: just push the texture!
+ gl.texImage2D(
+ this.glTarget,
+ 0,
+ this.glFormat,
+ this.glFormat,
+ gl.UNSIGNED_BYTE,
+ data
+ );
+ }
+ };
+
+ /**
+ * Checks if the source data for this texture has changed (if it's
+ * easy to do so) and reuploads the texture if necessary. If it's not
+ * possible or to expensive to do a calculation to determine wheter or
+ * not the data has occurred, this method simply re-uploads the texture.
+ * @method update
+ */
+ _main.default.Texture.prototype.update = function() {
+ var data = this.src;
+ if (data.width === 0 || data.height === 0) {
+ return false; // nothing to do!
+ }
+
+ var textureData = this._getTextureDataFromSource();
+ var updated = false;
+
+ var gl = this._renderer.GL;
+ // pull texture from data, make sure width & height are appropriate
+ if (textureData.width !== this.width || textureData.height !== this.height) {
+ updated = true;
+
+ // make sure that if the width and height of this.src have changed
+ // for some reason, we update our metadata and upload the texture again
+ this.width = textureData.width;
+ this.height = textureData.height;
+
+ if (this.isSrcP5Image) {
+ data.setModified(false);
+ } else if (this.isSrcMediaElement || this.isSrcHTMLElement) {
+ // on the first frame the metadata comes in, the size will be changed
+ // from 0 to actual size, but pixels may not be available.
+ // flag for update in a future frame.
+ // if we don't do this, a paused video, for example, may not
+ // send the first frame to texture memory.
+ data.setModified(true);
+ }
+ } else if (this.isSrcP5Image) {
+ // for an image, we only update if the modified field has been set,
+ // for example, by a call to p5.Image.set
+ if (data.isModified()) {
+ updated = true;
+ data.setModified(false);
+ }
+ } else if (this.isSrcMediaElement) {
+ // for a media element (video), we'll check if the current time in
+ // the video frame matches the last time. if it doesn't match, the
+ // video has advanced or otherwise been taken to a new frame,
+ // and we need to upload it.
+ if (data.isModified()) {
+ // p5.MediaElement may have also had set/updatePixels, etc. called
+ // on it and should be updated, or may have been set for the first
+ // time!
+ updated = true;
+ data.setModified(false);
+ } else if (data.loadedmetadata) {
+ // if the meta data has been loaded, we can ask the video
+ // what it's current position (in time) is.
+ if (this._videoPrevUpdateTime !== data.time()) {
+ // update the texture in gpu mem only if the current
+ // video timestamp does not match the timestamp of the last
+ // time we uploaded this texture (and update the time we
+ // last uploaded, too)
+ this._videoPrevUpdateTime = data.time();
+ updated = true;
+ }
+ }
+ } else if (this.isImageData) {
+ if (data._dirty) {
+ data._dirty = false;
+ updated = true;
+ }
+ } else {
+ /* data instanceof p5.Graphics, probably */
+ // there is not enough information to tell if the texture can be
+ // conditionally updated; so to be safe, we just go ahead and upload it.
+ updated = true;
+ }
+
+ if (updated) {
+ this.bindTexture();
+ gl.texImage2D(
+ this.glTarget,
+ 0,
+ this.glFormat,
+ this.glFormat,
+ gl.UNSIGNED_BYTE,
+ textureData
+ );
+ }
+
+ return updated;
+ };
+
+ /**
+ * Binds the texture to the appropriate GL target.
+ * @method bindTexture
+ */
+ _main.default.Texture.prototype.bindTexture = function() {
+ // bind texture using gl context + glTarget and
+ // generated gl texture object
+ var gl = this._renderer.GL;
+ gl.bindTexture(this.glTarget, this.glTex);
+
+ return this;
+ };
+
+ /**
+ * Unbinds the texture from the appropriate GL target.
+ * @method unbindTexture
+ */
+ _main.default.Texture.prototype.unbindTexture = function() {
+ // unbind per above, disable texturing on glTarget
+ var gl = this._renderer.GL;
+ gl.bindTexture(this.glTarget, null);
+ };
+
+ /**
+ * Sets how a texture is be interpolated when upscaled or downscaled.
+ * Nearest filtering uses nearest neighbor scaling when interpolating
+ * Linear filtering uses WebGL's linear scaling when interpolating
+ * @method setInterpolation
+ * @param {String} downScale Specifies the texture filtering when
+ * textures are shrunk. Options are LINEAR or NEAREST
+ * @param {String} upScale Specifies the texture filtering when
+ * textures are magnified. Options are LINEAR or NEAREST
+ * @todo implement mipmapping filters
+ */
+ _main.default.Texture.prototype.setInterpolation = function(downScale, upScale) {
+ var gl = this._renderer.GL;
+
+ if (downScale === constants.NEAREST) {
+ this.glMinFilter = gl.NEAREST;
+ } else {
+ this.glMinFilter = gl.LINEAR;
+ }
+
+ if (upScale === constants.NEAREST) {
+ this.glMagFilter = gl.NEAREST;
+ } else {
+ this.glMagFilter = gl.LINEAR;
+ }
+
+ this.bindTexture();
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.glMinFilter);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.glMagFilter);
+ this.unbindTexture();
+ };
+
+ /**
+ * Sets the texture wrapping mode. This controls how textures behave
+ * when their uv's go outside of the 0 - 1 range. There are three options:
+ * CLAMP, REPEAT, and MIRROR. REPEAT & MIRROR are only available if the texture
+ * is a power of two size (128, 256, 512, 1024, etc.).
+ * @method setWrapMode
+ * @param {String} wrapX Controls the horizontal texture wrapping behavior
+ * @param {String} wrapY Controls the vertical texture wrapping behavior
+ */
+ _main.default.Texture.prototype.setWrapMode = function(wrapX, wrapY) {
+ var gl = this._renderer.GL;
+
+ // for webgl 1 we need to check if the texture is power of two
+ // if it isn't we will set the wrap mode to CLAMP
+ // webgl2 will support npot REPEAT and MIRROR but we don't check for it yet
+ var isPowerOfTwo = function isPowerOfTwo(x) {
+ return (x & (x - 1)) === 0;
+ };
+
+ var widthPowerOfTwo = isPowerOfTwo(this.width);
+ var heightPowerOfTwo = isPowerOfTwo(this.height);
+
+ if (wrapX === constants.REPEAT) {
+ if (widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapS = gl.REPEAT;
+ } else {
+ console.warn(
+ 'You tried to set the wrap mode to REPEAT but the texture size is not a power of two. Setting to CLAMP instead'
+ );
+
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+ } else if (wrapX === constants.MIRROR) {
+ if (widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapS = gl.MIRRORED_REPEAT;
+ } else {
+ console.warn(
+ 'You tried to set the wrap mode to MIRROR but the texture size is not a power of two. Setting to CLAMP instead'
+ );
+
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+ } else {
+ // falling back to default if didn't get a proper mode
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+
+ if (wrapY === constants.REPEAT) {
+ if (widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapT = gl.REPEAT;
+ } else {
+ console.warn(
+ 'You tried to set the wrap mode to REPEAT but the texture size is not a power of two. Setting to CLAMP instead'
+ );
+
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+ } else if (wrapY === constants.MIRROR) {
+ if (widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapT = gl.MIRRORED_REPEAT;
+ } else {
+ console.warn(
+ 'You tried to set the wrap mode to MIRROR but the texture size is not a power of two. Setting to CLAMP instead'
+ );
+
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+ } else {
+ // falling back to default if didn't get a proper mode
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+
+ this.bindTexture();
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.glWrapS);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.glWrapT);
+ this.unbindTexture();
+ };
+ var _default = _main.default.Texture;
+ exports.default = _default;
+ },
+ { '../core/constants': 21, '../core/main': 27 }
+ ],
+ 83: [
+ function(_dereq_, module, exports) {
+ 'use strict';
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Shader');
+ _dereq_('./p5.RendererGL.Retained');
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc =
+ Object.defineProperty && Object.getOwnPropertyDescriptor
+ ? Object.getOwnPropertyDescriptor(obj, key)
+ : {};
+ if (desc.get || desc.set) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+
+ // Text/Typography
+ // @TODO:
+ _main.default.RendererGL.prototype._applyTextProperties = function() {
+ //@TODO finish implementation
+ //console.error('text commands not yet implemented in webgl');
+ };
+
+ _main.default.RendererGL.prototype.textWidth = function(s) {
+ if (this._isOpenType()) {
+ return this._textFont._textWidth(s, this._textSize);
+ }
+
+ return 0; // TODO: error
+ };
+
+ // rendering constants
+
+ // the number of rows/columns dividing each glyph
+ var charGridWidth = 9;
+ var charGridHeight = charGridWidth;
+
+ // size of the image holding the bezier stroke info
+ var strokeImageWidth = 64;
+ var strokeImageHeight = 64;
+
+ // size of the image holding the stroke indices for each row/col
+ var gridImageWidth = 64;
+ var gridImageHeight = 64;
+
+ // size of the image holding the offset/length of each row/col stripe
+ var cellImageWidth = 64;
+ var cellImageHeight = 64;
+
+ /**
+ * @private
+ * @class ImageInfos
+ * @param {Integer} width
+ * @param {Integer} height
+ *
+ * the ImageInfos class holds a list of ImageDatas of a given size.
+ */
+ function ImageInfos(width, height) {
+ this.width = width;
+ this.height = height;
+ this.infos = []; // the list of images
+
+ /**
+ *
+ * @method findImage
+ * @param {Integer} space
+ * @return {Object} contains the ImageData, and pixel index into that
+ * ImageData where the free space was allocated.
+ *
+ * finds free space of a given size in the ImageData list
+ */
+ this.findImage = function(space) {
+ var imageSize = this.width * this.height;
+ if (space > imageSize) throw new Error('font is too complex to render in 3D');
+
+ // search through the list of images, looking for one with
+ // anough unused space.
+ var imageInfo, imageData;
+ for (var ii = this.infos.length - 1; ii >= 0; --ii) {
+ var imageInfoTest = this.infos[ii];
+ if (imageInfoTest.index + space < imageSize) {
+ // found one
+ imageInfo = imageInfoTest;
+ imageData = imageInfoTest.imageData;
+ break;
+ }
+ }
+
+ if (!imageInfo) {
+ try {
+ // create a new image
+ imageData = new ImageData(this.width, this.height);
+ } catch (err) {
+ // for browsers that don't support ImageData constructors (ie IE11)
+ // create an ImageData using the old method
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var created = !canvas;
+ if (!canvas) {
+ // create a temporary canvas
+ canvas = document.createElement('canvas');
+ canvas.style.display = 'none';
+ document.body.appendChild(canvas);
+ }
+ var ctx = canvas.getContext('2d');
+ if (ctx) {
+ imageData = ctx.createImageData(this.width, this.height);
+ }
+ if (created) {
+ // distroy the temporary canvas, if necessary
+ document.body.removeChild(canvas);
+ }
+ }
+ // construct & dd the new image info
+ imageInfo = { index: 0, imageData: imageData };
+ this.infos.push(imageInfo);
+ }
+
+ var index = imageInfo.index;
+ imageInfo.index += space; // move to the start of the next image
+ imageData._dirty = true;
+ return { imageData: imageData, index: index };
+ };
+ }
+
+ /**
+ * @function setPixel
+ * @param {Object} imageInfo
+ * @param {Number} r
+ * @param {Number} g
+ * @param {Number} b
+ * @param {Number} a
+ *
+ * writes the next pixel into an indexed ImageData
+ */
+ function setPixel(imageInfo, r, g, b, a) {
+ var imageData = imageInfo.imageData;
+ var pixels = imageData.data;
+ var index = imageInfo.index++ * 4;
+ pixels[index++] = r;
+ pixels[index++] = g;
+ pixels[index++] = b;
+ pixels[index++] = a;
+ }
+
+ var SQRT3 = Math.sqrt(3);
+
+ /**
+ * @private
+ * @class FontInfo
+ * @param {Object} font an opentype.js font object
+ *
+ * contains cached images and glyph information for an opentype font
+ */
+ var FontInfo = function FontInfo(font) {
+ this.font = font;
+ // the bezier curve coordinates
+ this.strokeImageInfos = new ImageInfos(strokeImageWidth, strokeImageHeight);
+ // lists of curve indices for each row/column slice
+ this.colDimImageInfos = new ImageInfos(gridImageWidth, gridImageHeight);
+ this.rowDimImageInfos = new ImageInfos(gridImageWidth, gridImageHeight);
+ // the offset & length of each row/col slice in the glyph
+ this.colCellImageInfos = new ImageInfos(cellImageWidth, cellImageHeight);
+ this.rowCellImageInfos = new ImageInfos(cellImageWidth, cellImageHeight);
+
+ // the cached information for each glyph
+ this.glyphInfos = {};
+
+ /**
+ * @method getGlyphInfo
+ * @param {Glyph} glyph the x positions of points in the curve
+ * @returns {Object} the glyphInfo for that glyph
+ *
+ * calculates rendering info for a glyph, including the curve information,
+ * row & column stripes compiled into textures.
+ */
+
+ this.getGlyphInfo = function(glyph) {
+ // check the cache
+ var gi = this.glyphInfos[glyph.index];
+ if (gi) return gi;
+
+ // get the bounding box of the glyph from opentype.js
+ var bb = glyph.getBoundingBox();
+ var xMin = bb.x1;
+ var yMin = bb.y1;
+ var gWidth = bb.x2 - xMin;
+ var gHeight = bb.y2 - yMin;
+ var cmds = glyph.path.commands;
+ // don't bother rendering invisible glyphs
+ if (gWidth === 0 || gHeight === 0 || !cmds.length) {
+ return (this.glyphInfos[glyph.index] = {});
+ }
+
+ var i;
+ var strokes = []; // the strokes in this glyph
+ var rows = []; // the indices of strokes in each row
+ var cols = []; // the indices of strokes in each column
+ for (i = charGridWidth - 1; i >= 0; --i) {
+ cols.push([]);
+ }
+ for (i = charGridHeight - 1; i >= 0; --i) {
+ rows.push([]);
+ }
+
+ /**
+ * @function push
+ * @param {Number[]} xs the x positions of points in the curve
+ * @param {Number[]} ys the y positions of points in the curve
+ * @param {Object} v the curve information
+ *
+ * adds a curve to the rows & columns that it intersects with
+ */
+ function push(xs, ys, v) {
+ var index = strokes.length; // the index of this stroke
+ strokes.push(v); // add this stroke to the list
+
+ /**
+ * @function minMax
+ * @param {Number[]} rg the list of values to compare
+ * @param {Number} min the initial minimum value
+ * @param {Number} max the initial maximum value
+ *
+ * find the minimum & maximum value in a list of values
+ */
+ function minMax(rg, min, max) {
+ for (var _i = rg.length; _i-- > 0; ) {
+ var _v = rg[_i];
+ if (min > _v) min = _v;
+ if (max < _v) max = _v;
+ }
+ return { min: min, max: max };
+ }
+
+ // loop through the rows & columns that the curve intersects
+ // adding the curve to those slices
+ var mmX = minMax(xs, 1, 0);
+ var ixMin = Math.max(Math.floor(mmX.min * charGridWidth), 0);
+ var ixMax = Math.min(Math.ceil(mmX.max * charGridWidth), charGridWidth);
+ for (var iCol = ixMin; iCol < ixMax; ++iCol) {
+ cols[iCol].push(index);
+ }
+
+ var mmY = minMax(ys, 1, 0);
+ var iyMin = Math.max(Math.floor(mmY.min * charGridHeight), 0);
+ var iyMax = Math.min(Math.ceil(mmY.max * charGridHeight), charGridHeight);
+
+ for (var iRow = iyMin; iRow < iyMax; ++iRow) {
+ rows[iRow].push(index);
+ }
+ }
+
+ /**
+ * @function clamp
+ * @param {Number} v the value to clamp
+ * @param {Number} min the minimum value
+ * @param {Number} max the maxmimum value
+ *
+ * clamps a value between a minimum & maximum value
+ */
+ function clamp(v, min, max) {
+ if (v < min) return min;
+ if (v > max) return max;
+ return v;
+ }
+
+ /**
+ * @function byte
+ * @param {Number} v the value to scale
+ *
+ * converts a floating-point number in the range 0-1 to a byte 0-255
+ */
+ function byte(v) {
+ return clamp(255 * v, 0, 255);
+ }
+
+ /**
+ * @private
+ * @class Cubic
+ * @param {Number} p0 the start point of the curve
+ * @param {Number} c0 the first control point
+ * @param {Number} c1 the second control point
+ * @param {Number} p1 the end point
+ *
+ * a cubic curve
+ */
+ function Cubic(p0, c0, c1, p1) {
+ this.p0 = p0;
+ this.c0 = c0;
+ this.c1 = c1;
+ this.p1 = p1;
+
+ /**
+ * @method toQuadratic
+ * @return {Object} the quadratic approximation
+ *
+ * converts the cubic to a quadtratic approximation by
+ * picking an appropriate quadratic control point
+ */
+ this.toQuadratic = function() {
+ return {
+ x: this.p0.x,
+ y: this.p0.y,
+ x1: this.p1.x,
+ y1: this.p1.y,
+ cx: ((this.c0.x + this.c1.x) * 3 - (this.p0.x + this.p1.x)) / 4,
+ cy: ((this.c0.y + this.c1.y) * 3 - (this.p0.y + this.p1.y)) / 4
+ };
+ };
+
+ /**
+ * @method quadError
+ * @return {Number} the error
+ *
+ * calculates the magnitude of error of this curve's
+ * quadratic approximation.
+ */
+ this.quadError = function() {
+ return (
+ _main.default.Vector.sub(
+ _main.default.Vector.sub(this.p1, this.p0),
+ _main.default.Vector.mult(
+ _main.default.Vector.sub(this.c1, this.c0),
+ 3
+ )
+ ).mag() / 2
+ );
+ };
+
+ /**
+ * @method split
+ * @param {Number} t the value (0-1) at which to split
+ * @return {Cubic} the second part of the curve
+ *
+ * splits the cubic into two parts at a point 't' along the curve.
+ * this cubic keeps its start point and its end point becomes the
+ * point at 't'. the 'end half is returned.
+ */
+ this.split = function(t) {
+ var m1 = _main.default.Vector.lerp(this.p0, this.c0, t);
+ var m2 = _main.default.Vector.lerp(this.c0, this.c1, t);
+ var mm1 = _main.default.Vector.lerp(m1, m2, t);
+
+ this.c1 = _main.default.Vector.lerp(this.c1, this.p1, t);
+ this.c0 = _main.default.Vector.lerp(m2, this.c1, t);
+ var pt = _main.default.Vector.lerp(mm1, this.c0, t);
+ var part1 = new Cubic(this.p0, m1, mm1, pt);
+ this.p0 = pt;
+ return part1;
+ };
+
+ /**
+ * @method splitInflections
+ * @return {Cubic[]} the non-inflecting pieces of this cubic
+ *
+ * returns an array containing 0, 1 or 2 cubics split resulting
+ * from splitting this cubic at its inflection points.
+ * this cubic is (potentially) altered and returned in the list.
+ */
+ this.splitInflections = function() {
+ var a = _main.default.Vector.sub(this.c0, this.p0);
+ var b = _main.default.Vector.sub(
+ _main.default.Vector.sub(this.c1, this.c0),
+ a
+ );
+ var c = _main.default.Vector.sub(
+ _main.default.Vector.sub(_main.default.Vector.sub(this.p1, this.c1), a),
+ _main.default.Vector.mult(b, 2)
+ );
+
+ var cubics = [];
+
+ // find the derivative coefficients
+ var A = b.x * c.y - b.y * c.x;
+ if (A !== 0) {
+ var B = a.x * c.y - a.y * c.x;
+ var C = a.x * b.y - a.y * b.x;
+ var disc = B * B - 4 * A * C;
+ if (disc >= 0) {
+ if (A < 0) {
+ A = -A;
+ B = -B;
+ C = -C;
+ }
+
+ var Q = Math.sqrt(disc);
+ var t0 = (-B - Q) / (2 * A); // the first inflection point
+ var t1 = (-B + Q) / (2 * A); // the second inflection point
+
+ // test if the first inflection point lies on the curve
+ if (t0 > 0 && t0 < 1) {
+ // split at the first inflection point
+ cubics.push(this.split(t0));
+ // scale t2 into the second part
+ t1 = 1 - (1 - t1) / (1 - t0);
+ }
+
+ // test if the second inflection point lies on the curve
+ if (t1 > 0 && t1 < 1) {
+ // split at the second inflection point
+ cubics.push(this.split(t1));
+ }
+ }
+ }
+
+ cubics.push(this);
+ return cubics;
+ };
+ }
+
+ /**
+ * @function cubicToQuadratics
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} cx0
+ * @param {Number} cy0
+ * @param {Number} cx1
+ * @param {Number} cy1
+ * @param {Number} x1
+ * @param {Number} y1
+ * @returns {Cubic[]} an array of cubics whose quadratic approximations
+ * closely match the civen cubic.
+ *
+ * converts a cubic curve to a list of quadratics.
+ */
+ function cubicToQuadratics(x0, y0, cx0, cy0, cx1, cy1, x1, y1) {
+ // create the Cubic object and split it at its inflections
+ var cubics = new Cubic(
+ new _main.default.Vector(x0, y0),
+ new _main.default.Vector(cx0, cy0),
+ new _main.default.Vector(cx1, cy1),
+ new _main.default.Vector(x1, y1)
+ ).splitInflections();
+
+ var qs = []; // the final list of quadratics
+ var precision = 30 / SQRT3;
+
+ // for each of the non-inflected pieces of the original cubic
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (
+ var _iterator = cubics[Symbol.iterator](), _step;
+ !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+ _iteratorNormalCompletion = true
+ ) {
+ var cubic = _step.value;
+ // the cubic is iteratively split in 3 pieces:
+ // the first piece is accumulated in 'qs', the result.
+ // the last piece is accumulated in 'tail', temporarily.
+ // the middle piece is repeatedly split again, while necessary.
+ var tail = [];
+
+ var t3 = void 0;
+ for (;;) {
+ // calculate this cubic's precision
+ t3 = precision / cubic.quadError();
+ if (t3 >= 0.5 * 0.5 * 0.5) {
+ break; // not too bad, we're done
+ }
+
+ // find a split point based on the error
+ var t = Math.pow(t3, 1.0 / 3.0);
+ // split the cubic in 3
+ var start = cubic.split(t);
+ var middle = cubic.split(1 - t / (1 - t));
+
+ qs.push(start); // the first part
+ tail.push(cubic); // the last part
+ cubic = middle; // iterate on the middle piece
+ }
+
+ if (t3 < 1) {
+ // a little excess error, split the middle in two
+ qs.push(cubic.split(0.5));
+ }
+ // add the middle piece to the result
+ qs.push(cubic);
+
+ // finally add the tail, reversed, onto the result
+ Array.prototype.push.apply(qs, tail.reverse());
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+
+ return qs;
+ }
+
+ /**
+ * @function pushLine
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} x1
+ * @param {Number} y1
+ *
+ * add a straight line to the row/col grid of a glyph
+ */
+ function pushLine(x0, y0, x1, y1) {
+ var mx = (x0 + x1) / 2;
+ var my = (y0 + y1) / 2;
+ push([x0, x1], [y0, y1], { x: x0, y: y0, cx: mx, cy: my });
+ }
+
+ /**
+ * @function samePoint
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} x1
+ * @param {Number} y1
+ * @return {Boolean} true if the two points are sufficiently close
+ *
+ * tests if two points are close enough to be considered the same
+ */
+ function samePoint(x0, y0, x1, y1) {
+ return Math.abs(x1 - x0) < 0.00001 && Math.abs(y1 - y0) < 0.00001;
+ }
+
+ var x0, y0, xs, ys;
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (
+ var _iterator2 = cmds[Symbol.iterator](), _step2;
+ !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done);
+ _iteratorNormalCompletion2 = true
+ ) {
+ var cmd = _step2.value;
+ // scale the coordinates to the range 0-1
+ var x1 = (cmd.x - xMin) / gWidth;
+ var y1 = (cmd.y - yMin) / gHeight;
+
+ // don't bother if this point is the same as the last
+ if (samePoint(x0, y0, x1, y1)) continue;
+
+ switch (cmd.type) {
+ case 'M': {
+ // move
+ xs = x1;
+ ys = y1;
+ break;
+ }
+ case 'L': {
+ // line
+ pushLine(x0, y0, x1, y1);
+ break;
+ }
+ case 'Q': {
+ // quadratic
+ var cx = (cmd.x1 - xMin) / gWidth;
+ var cy = (cmd.y1 - yMin) / gHeight;
+ push([x0, x1, cx], [y0, y1, cy], { x: x0, y: y0, cx: cx, cy: cy });
+ break;
+ }
+ case 'Z': {
+ // end
+ if (!samePoint(x0, y0, xs, ys)) {
+ // add an extra line closing the loop, if necessary
+ pushLine(x0, y0, xs, ys);
+ strokes.push({ x: xs, y: ys });
+ } else {
+ strokes.push({ x: x0, y: y0 });
+ }
+ break;
+ }
+ case 'C': {
+ // cubic
+ var cx1 = (cmd.x1 - xMin) / gWidth;
+ var cy1 = (cmd.y1 - yMin) / gHeight;
+ var cx2 = (cmd.x2 - xMin) / gWidth;
+ var cy2 = (cmd.y2 - yMin) / gHeight;
+ var qs = cubicToQuadratics(x0, y0, cx1, cy1, cx2, cy2, x1, y1);
+ for (var iq = 0; iq < qs.length; iq++) {
+ var q = qs[iq].toQuadratic();
+ push([q.x, q.x1, q.cx], [q.y, q.y1, q.cy], q);
+ }
+ break;
+ }
+ default:
+ throw new Error('unknown command type: '.concat(cmd.type));
+ }
+
+ x0 = x1;
+ y0 = y1;
+ }
+
+ // allocate space for the strokes
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ var strokeCount = strokes.length;
+ var strokeImageInfo = this.strokeImageInfos.findImage(strokeCount);
+ var strokeOffset = strokeImageInfo.index;
+
+ // fill the stroke image
+ for (var il = 0; il < strokeCount; ++il) {
+ var s = strokes[il];
+ setPixel(strokeImageInfo, byte(s.x), byte(s.y), byte(s.cx), byte(s.cy));
+ }
+
+ /**
+ * @function layout
+ * @param {Number[][]} dim
+ * @param {ImageInfo[]} dimImageInfos
+ * @param {ImageInfo[]} cellImageInfos
+ * @return {Object}
+ *
+ * lays out the curves in a dimension (row or col) into two
+ * images, one for the indices of the curves themselves, and
+ * one containing the offset and length of those index spans.
+ */
+ function layout(dim, dimImageInfos, cellImageInfos) {
+ var dimLength = dim.length; // the number of slices in this dimension
+ var dimImageInfo = dimImageInfos.findImage(dimLength);
+ var dimOffset = dimImageInfo.index;
+ // calculate the total number of stroke indices in this dimension
+ var totalStrokes = 0;
+ for (var id = 0; id < dimLength; ++id) {
+ totalStrokes += dim[id].length;
+ }
+
+ // allocate space for the stroke indices
+ var cellImageInfo = cellImageInfos.findImage(totalStrokes);
+
+ // for each slice in the glyph
+ for (var _i2 = 0; _i2 < dimLength; ++_i2) {
+ var strokeIndices = dim[_i2];
+ var _strokeCount = strokeIndices.length;
+ var cellLineIndex = cellImageInfo.index;
+
+ // write the offset and count into the glyph slice image
+ setPixel(
+ dimImageInfo,
+ cellLineIndex >> 7,
+ cellLineIndex & 0x7f,
+ _strokeCount >> 7,
+ _strokeCount & 0x7f
+ );
+
+ // for each stroke index in that slice
+ for (var iil = 0; iil < _strokeCount; ++iil) {
+ // write the stroke index into the slice's image
+ var strokeIndex = strokeIndices[iil] + strokeOffset;
+ setPixel(cellImageInfo, strokeIndex >> 7, strokeIndex & 0x7f, 0, 0);
+ }
+ }
+
+ return {
+ cellImageInfo: cellImageInfo,
+ dimOffset: dimOffset,
+ dimImageInfo: dimImageInfo
+ };
+ }
+
+ // initialize the info for this glyph
+ gi = this.glyphInfos[glyph.index] = {
+ glyph: glyph,
+ uGlyphRect: [bb.x1, -bb.y1, bb.x2, -bb.y2],
+ strokeImageInfo: strokeImageInfo,
+ strokes: strokes,
+ colInfo: layout(cols, this.colDimImageInfos, this.colCellImageInfos),
+ rowInfo: layout(rows, this.rowDimImageInfos, this.rowCellImageInfos)
+ };
+
+ gi.uGridOffset = [gi.colInfo.dimOffset, gi.rowInfo.dimOffset];
+ return gi;
+ };
+ };
+
+ _main.default.RendererGL.prototype._renderText = function(p, line, x, y, maxY) {
+ if (!this._textFont || typeof this._textFont === 'string') {
+ console.log(
+ 'WEBGL: you must load and set a font before drawing text. See `loadFont` and `textFont` for more details.'
+ );
+
+ return;
+ }
+ if (y >= maxY || !this._doFill) {
+ return; // don't render lines beyond our maxY position
+ }
+
+ if (!this._isOpenType()) {
+ console.log(
+ 'WEBGL: only Opentype (.otf) and Truetype (.ttf) fonts are supported'
+ );
+
+ return p;
+ }
+
+ p.push(); // fix to #803
+
+ // remember this state, so it can be restored later
+ var doStroke = this._doStroke;
+ var drawMode = this.drawMode;
+
+ this._doStroke = false;
+ this.drawMode = constants.TEXTURE;
+
+ // get the cached FontInfo object
+ var font = this._textFont.font;
+ var fontInfo = this._textFont._fontInfo;
+ if (!fontInfo) {
+ fontInfo = this._textFont._fontInfo = new FontInfo(font);
+ }
+
+ // calculate the alignment and move/scale the view accordingly
+ var pos = this._textFont._handleAlignment(this, line, x, y);
+ var fontSize = this._textSize;
+ var scale = fontSize / font.unitsPerEm;
+ this.translate(pos.x, pos.y, 0);
+ this.scale(scale, scale, 1);
+
+ // initialize the font shader
+ var gl = this.GL;
+ var initializeShader = !this._defaultFontShader;
+ var sh = this._getFontShader();
+ sh.init();
+ sh.bindShader(); // first time around, bind the shader fully
+
+ if (initializeShader) {
+ // these are constants, really. just initialize them one-time.
+ sh.setUniform('uGridImageSize', [gridImageWidth, gridImageHeight]);
+ sh.setUniform('uCellsImageSize', [cellImageWidth, cellImageHeight]);
+ sh.setUniform('uStrokeImageSize', [strokeImageWidth, strokeImageHeight]);
+ sh.setUniform('uGridSize', [charGridWidth, charGridHeight]);
+ }
+ this._applyColorBlend(this.curFillColor);
+
+ var g = this.gHash['glyph'];
+ if (!g) {
+ // create the geometry for rendering a quad
+ var geom = (this._textGeom = new _main.default.Geometry(1, 1, function() {
+ for (var i = 0; i <= 1; i++) {
+ for (var j = 0; j <= 1; j++) {
+ this.vertices.push(new _main.default.Vector(j, i, 0));
+ this.uvs.push(j, i);
+ }
+ }
+ }));
+ geom.computeFaces().computeNormals();
+ g = this.createBuffers('glyph', geom);
+ }
+
+ // bind the shader buffers
+ this._prepareBuffers(g, sh, _main.default.RendererGL._textBuffers);
+ this._bindBuffer(g.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
+
+ // this will have to do for now...
+ sh.setUniform('uMaterialColor', this.curFillColor);
+
+ try {
+ var dx = 0; // the x position in the line
+ var glyphPrev = null; // the previous glyph, used for kerning
+ // fetch the glyphs in the line of text
+ var glyphs = font.stringToGlyphs(line);
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (
+ var _iterator3 = glyphs[Symbol.iterator](), _step3;
+ !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done);
+ _iteratorNormalCompletion3 = true
+ ) {
+ var glyph = _step3.value;
+ // kern
+ if (glyphPrev) dx += font.getKerningValue(glyphPrev, glyph);
+
+ var gi = fontInfo.getGlyphInfo(glyph);
+ if (gi.uGlyphRect) {
+ var rowInfo = gi.rowInfo;
+ var colInfo = gi.colInfo;
+ sh.setUniform('uSamplerStrokes', gi.strokeImageInfo.imageData);
+ sh.setUniform('uSamplerRowStrokes', rowInfo.cellImageInfo.imageData);
+ sh.setUniform('uSamplerRows', rowInfo.dimImageInfo.imageData);
+ sh.setUniform('uSamplerColStrokes', colInfo.cellImageInfo.imageData);
+ sh.setUniform('uSamplerCols', colInfo.dimImageInfo.imageData);
+ sh.setUniform('uGridOffset', gi.uGridOffset);
+ sh.setUniform('uGlyphRect', gi.uGlyphRect);
+ sh.setUniform('uGlyphOffset', dx);
+
+ sh.bindTextures(); // afterwards, only textures need updating
+
+ // draw it
+ gl.drawElements(gl.TRIANGLES, 6, this.GL.UNSIGNED_SHORT, 0);
+ }
+ dx += glyph.advanceWidth;
+ glyphPrev = glyph;
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ } finally {
+ // clean up
+ sh.unbindShader();
+
+ this._doStroke = doStroke;
+ this.drawMode = drawMode;
+
+ p.pop();
+ }
+
+ return p;
+ };
+ },
+ {
+ '../core/constants': 21,
+ '../core/main': 27,
+ './p5.RendererGL.Retained': 79,
+ './p5.Shader': 81
+ }
+ ]
+ },
+ {},
+ [16]
+ )(16);
+});
diff --git a/estudiantes/01-SofiaAbarca/clase-15/p5.sound.min.js b/estudiantes/01-SofiaAbarca/clase-15/p5.sound.min.js
new file mode 100644
index 00000000..899f4473
--- /dev/null
+++ b/estudiantes/01-SofiaAbarca/clase-15/p5.sound.min.js
@@ -0,0 +1,28 @@
+/*! p5.sound.min.js v0.3.11 2019-03-14 */
+
+/**
+ * p5.sound
+ * https://p5js.org/reference/#/libraries/p5.sound
+ *
+ * From the Processing Foundation and contributors
+ * https://github.com/processing/p5.js-sound/graphs/contributors
+ *
+ * MIT License (MIT)
+ * https://github.com/processing/p5.js-sound/blob/master/LICENSE
+ *
+ * Some of the many audio libraries & resources that inspire p5.sound:
+ * - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js
+ * - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/
+ * - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0
+ * - wavesurfer.js https://github.com/katspaugh/wavesurfer.js
+ * - Web Audio Components by Jordan Santell https://github.com/web-audio-components
+ * - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound
+ *
+ * Web Audio API: http://w3.org/TR/webaudio/
+ */
+
+!function(t,e){"function"==typeof define&&define.amd?define("p5.sound",["p5"],function(t){e(t)}):e("object"==typeof exports?require("../p5"):t.p5)}(this,function(t){var e;e=function(){!function(){function t(t){t&&(t.setTargetAtTime||(t.setTargetAtTime=t.setTargetValueAtTime))}window.hasOwnProperty("webkitAudioContext")&&!window.hasOwnProperty("AudioContext")&&(window.AudioContext=window.webkitAudioContext,"function"!=typeof AudioContext.prototype.createGain&&(AudioContext.prototype.createGain=AudioContext.prototype.createGainNode),"function"!=typeof AudioContext.prototype.createDelay&&(AudioContext.prototype.createDelay=AudioContext.prototype.createDelayNode),"function"!=typeof AudioContext.prototype.createScriptProcessor&&(AudioContext.prototype.createScriptProcessor=AudioContext.prototype.createJavaScriptNode),"function"!=typeof AudioContext.prototype.createPeriodicWave&&(AudioContext.prototype.createPeriodicWave=AudioContext.prototype.createWaveTable),AudioContext.prototype.internal_createGain=AudioContext.prototype.createGain,AudioContext.prototype.createGain=function(){var e=this.internal_createGain();return t(e.gain),e},AudioContext.prototype.internal_createDelay=AudioContext.prototype.createDelay,AudioContext.prototype.createDelay=function(e){var i=e?this.internal_createDelay(e):this.internal_createDelay();return t(i.delayTime),i},AudioContext.prototype.internal_createBufferSource=AudioContext.prototype.createBufferSource,AudioContext.prototype.createBufferSource=function(){var e=this.internal_createBufferSource();return e.start?(e.internal_start=e.start,e.start=function(t,i,n){"undefined"!=typeof n?e.internal_start(t||0,i,n):e.internal_start(t||0,i||0)}):e.start=function(t,e,i){e||i?this.noteGrainOn(t||0,e,i):this.noteOn(t||0)},e.stop?(e.internal_stop=e.stop,e.stop=function(t){e.internal_stop(t||0)}):e.stop=function(t){this.noteOff(t||0)},t(e.playbackRate),e},AudioContext.prototype.internal_createDynamicsCompressor=AudioContext.prototype.createDynamicsCompressor,AudioContext.prototype.createDynamicsCompressor=function(){var e=this.internal_createDynamicsCompressor();return t(e.threshold),t(e.knee),t(e.ratio),t(e.reduction),t(e.attack),t(e.release),e},AudioContext.prototype.internal_createBiquadFilter=AudioContext.prototype.createBiquadFilter,AudioContext.prototype.createBiquadFilter=function(){var e=this.internal_createBiquadFilter();return t(e.frequency),t(e.detune),t(e.Q),t(e.gain),e},"function"!=typeof AudioContext.prototype.createOscillator&&(AudioContext.prototype.internal_createOscillator=AudioContext.prototype.createOscillator,AudioContext.prototype.createOscillator=function(){var e=this.internal_createOscillator();return e.start?(e.internal_start=e.start,e.start=function(t){e.internal_start(t||0)}):e.start=function(t){this.noteOn(t||0)},e.stop?(e.internal_stop=e.stop,e.stop=function(t){e.internal_stop(t||0)}):e.stop=function(t){this.noteOff(t||0)},e.setPeriodicWave||(e.setPeriodicWave=e.setWaveTable),t(e.frequency),t(e.detune),e})),window.hasOwnProperty("webkitOfflineAudioContext")&&!window.hasOwnProperty("OfflineAudioContext")&&(window.OfflineAudioContext=window.webkitOfflineAudioContext)}(window),navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var e=document.createElement("audio");t.prototype.isSupported=function(){return!!e.canPlayType};var i=function(){return!!e.canPlayType&&e.canPlayType('audio/ogg; codecs="vorbis"')},n=function(){return!!e.canPlayType&&e.canPlayType("audio/mpeg;")},o=function(){return!!e.canPlayType&&e.canPlayType('audio/wav; codecs="1"')},r=function(){return!!e.canPlayType&&(e.canPlayType("audio/x-m4a;")||e.canPlayType("audio/aac;"))},s=function(){return!!e.canPlayType&&e.canPlayType("audio/x-aiff;")};t.prototype.isFileSupported=function(t){switch(t.toLowerCase()){case"mp3":return n();case"wav":return o();case"ogg":return i();case"aac":case"m4a":case"mp4":return r();case"aif":case"aiff":return s();default:return!1}}}();var i;!function(t,e){i=function(){return e()}()}(this,function(){function t(t){var e=t.createBuffer(1,1,t.sampleRate),i=t.createBufferSource();i.buffer=e,i.connect(t.destination),i.start(0),t.resume&&t.resume()}function e(t){return"running"===t.state}function i(t,i){function n(){e(t)?i():(requestAnimationFrame(n),t.resume&&t.resume())}e(t)?i():n()}function n(t,e,i){if(Array.isArray(t)||NodeList&&t instanceof NodeList)for(var o=0;o1&&(this.input=new Array(t)),this.isUndef(e)||1===e?this.output=this.context.createGain():e>1&&(this.output=new Array(t))};t.prototype.set=function(e,i,n){if(this.isObject(e))n=i;else if(this.isString(e)){var o={};o[e]=i,e=o}t:for(var r in e){i=e[r];var s=this;if(-1!==r.indexOf(".")){for(var a=r.split("."),u=0;u1)for(var t=arguments[0],e=1;e0)for(var t=this,e=0;e0)for(var t=0;tn;n++)i[n].apply(this,e)}return this},t.Emitter.mixin=function(e){var i=["on","off","emit"];e._events={};for(var n=0;n1?t.getChannelData(1):e;var s=i(e,r),a=new window.ArrayBuffer(44+2*s.length),u=new window.DataView(a);n(u,0,"RIFF"),u.setUint32(4,36+2*s.length,!0),n(u,8,"WAVE"),n(u,12,"fmt "),u.setUint32(16,16,!0),u.setUint16(20,1,!0),u.setUint16(22,2,!0),u.setUint32(24,o.audiocontext.sampleRate,!0),u.setUint32(28,4*o.audiocontext.sampleRate,!0),u.setUint16(32,4,!0),u.setUint16(34,16,!0),n(u,36,"data"),u.setUint32(40,2*s.length,!0);for(var c=s.length,p=44,h=1,l=0;c>l;l++)u.setInt16(p,s[l]*(32767*h),!0),p+=2;return u}function i(t,e){for(var i=t.length+e.length,n=new Float32Array(i),o=0,r=0;i>r;)n[r++]=t[o],n[r++]=e[o],o++;return n}function n(t,e,i){for(var n=i.length,o=0;n>o;o++)t.setUint8(e+o,i.charCodeAt(o))}var o=a;t.prototype.sampleRate=function(){return o.audiocontext.sampleRate},t.prototype.freqToMidi=function(t){var e=Math.log(t/440)/Math.log(2),i=Math.round(12*e)+69;return i};var r=t.prototype.midiToFreq=function(t){return 440*Math.pow(2,(t-69)/12)},s=function(t){if("string"!=typeof t)return t;var e={A:21,B:23,C:24,D:26,E:28,F:29,G:31},i=e[t[0].toUpperCase()],n=~~t.slice(-1);switch(i+=12*(n-1),t[1]){case"#":i+=1;break;case"b":i-=1}return r(i)};return t.prototype.soundFormats=function(){o.extensions=[];for(var t=0;t-1))throw arguments[t]+" is not a valid sound format!";o.extensions.push(arguments[t])}},t.prototype.disposeSound=function(){for(var t=0;t-1)if(t.prototype.isFileSupported(n))i=i;else for(var r=i.split("."),s=r[r.length-1],a=0;a1?(this.splitter=i.createChannelSplitter(2),this.input.connect(this.splitter),this.splitter.connect(this.left,1),this.splitter.connect(this.right,0)):(this.input.connect(this.left),this.input.connect(this.right)),this.output=i.createChannelMerger(2),this.left.connect(this.output,0,1),this.right.connect(this.output,0,0),this.output.connect(e)},t.Panner.prototype.pan=function(t,e){var n=e||0,o=i.currentTime+n,r=(t+1)/2,s=Math.cos(r*Math.PI/2),a=Math.sin(r*Math.PI/2);this.left.gain.linearRampToValueAtTime(a,o),this.right.gain.linearRampToValueAtTime(s,o)},t.Panner.prototype.inputChannels=function(t){1===t?(this.input.disconnect(),this.input.connect(this.left),this.input.connect(this.right)):2===t&&(this.splitter=i.createChannelSplitter(2),this.input.disconnect(),this.input.connect(this.splitter),this.splitter.connect(this.left,1),this.splitter.connect(this.right,0))},t.Panner.prototype.connect=function(t){this.output.connect(t)},t.Panner.prototype.disconnect=function(){this.output&&this.output.disconnect()})}(a);var h;h=function(){function e(t,e){for(var i={},n=t.length,o=0;n>o;o++){if(t[o]>e){var r=t[o],s=new v(r,o);i[o]=s,o+=6e3}o++}return i}function i(t){for(var e=[],i=Object.keys(t).sort(),n=0;no;o++){var r=t[i[n]],s=t[i[n+o]];if(r&&s){var a=r.sampleIndex,u=s.sampleIndex,c=u-a;c>0&&r.intervals.push(c);var p=e.some(function(t){return t.interval===c?(t.count++,t):void 0});p||e.push({interval:c,count:1})}}return e}function n(t,e){var i=[];return t.forEach(function(t){try{var n=Math.abs(60/(t.interval/e));n=r(n);var o=i.some(function(e){return e.tempo===n?e.count+=t.count:void 0});if(!o){if(isNaN(n))return;i.push({tempo:Math.round(n),count:t.count})}}catch(s){throw s}}),i}function o(t,e,i,n){for(var o=[],s=Object.keys(t).sort(),a=0;a.01?!0:void 0})}function r(t){if(isFinite(t)&&0!==t){for(;90>t;)t*=2;for(;t>180&&t>90;)t/=2;return t}}function s(t){var e=t.inputBuffer.getChannelData(0);this._lastPos=e[e.length-1]||0,this._onTimeUpdate(self._lastPos)}function p(t){const e=t.target,i=this;e._playing=!1,e.removeEventListener("ended",i._clearOnEnd),i._onended(i),i.bufferSourceNodes.forEach(function(t,e){t._playing===!1&&i.bufferSourceNodes.splice(e)}),0===i.bufferSourceNodes.length&&(i._playing=!1)}var h=c,l=a,f=l.audiocontext,d=u.midiToFreq,m=u.convertToWav;t.SoundFile=function(e,i,n,o){if("undefined"!=typeof e){if("string"==typeof e||"string"==typeof e[0]){var r=t.prototype._checkFileFormats(e);this.url=r}else if("object"==typeof e&&!(window.File&&window.FileReader&&window.FileList&&window.Blob))throw"Unable to load file because the File API is not supported";e.file&&(e=e.file),this.file=e}this._onended=function(){},this._looping=!1,this._playing=!1,this._paused=!1,this._pauseTime=0,this._cues=[],this._cueIDCounter=0,this._lastPos=0,this._counterNode=null,this._scopeNode=null,this.bufferSourceNodes=[],this.bufferSourceNode=null,this.buffer=null,this.playbackRate=1,this.input=l.audiocontext.createGain(),this.output=l.audiocontext.createGain(),this.reversed=!1,this.startTime=0,this.endTime=null,this.pauseTime=0,this.mode="sustain",this.startMillis=null,this.panPosition=0,this.panner=new t.Panner(this.output,l.input,2),(this.url||this.file)&&this.load(i,n),l.soundArray.push(this),"function"==typeof o?this._whileLoading=o:this._whileLoading=function(){},this._onAudioProcess=s.bind(this),this._clearOnEnd=p.bind(this)},t.prototype.registerPreloadMethod("loadSound",t.prototype),t.prototype.loadSound=function(e,i,n,o){window.location.origin.indexOf("file://")>-1&&"undefined"===window.cordova&&window.alert("This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS");var r=this,s=new t.SoundFile(e,function(){"function"==typeof i&&i.apply(r,arguments),"function"==typeof r._decrementPreload&&r._decrementPreload()},n,o);return s},t.SoundFile.prototype.load=function(t,e){var i=this,n=(new Error).stack;if(void 0!==this.url&&""!==this.url){var o=new XMLHttpRequest;o.addEventListener("progress",function(t){i._updateProgress(t)},!1),o.open("GET",this.url,!0),o.responseType="arraybuffer",o.onload=function(){if(200===o.status){if(!i.panner)return;f.decodeAudioData(o.response,function(e){i.panner&&(i.buffer=e,i.panner.inputChannels(e.numberOfChannels),t&&t(i))},function(){if(i.panner){var t=new h("decodeAudioData",n,i.url),o="AudioContext error at decodeAudioData for "+i.url;e?(t.msg=o,e(t)):console.error(o+"\n The error stack trace includes: \n"+t.stack)}})}else{if(!i.panner)return;var r=new h("loadSound",n,i.url),s="Unable to load "+i.url+". The request status was: "+o.status+" ("+o.statusText+")";e?(r.message=s,e(r)):console.error(s+"\n The error stack trace includes: \n"+r.stack)}},o.onerror=function(){var t=new h("loadSound",n,i.url),o="There was no response from the server at "+i.url+". Check the url and internet connectivity.";e?(t.message=o,e(t)):console.error(o+"\n The error stack trace includes: \n"+t.stack)},o.send()}else if(void 0!==this.file){var r=new FileReader;r.onload=function(){i.panner&&f.decodeAudioData(r.result,function(e){i.panner&&(i.buffer=e,i.panner.inputChannels(e.numberOfChannels),t&&t(i))})},r.onerror=function(t){i.panner&&onerror&&onerror(t)},r.readAsArrayBuffer(this.file)}},t.SoundFile.prototype._updateProgress=function(t){if(t.lengthComputable){var e=t.loaded/t.total*.99;this._whileLoading(e,t)}else this._whileLoading("size unknown")},t.SoundFile.prototype.isLoaded=function(){return this.buffer?!0:!1},t.SoundFile.prototype.play=function(t,e,i,n,o){if(!this.output)return void console.warn("SoundFile.play() called after dispose");var r,s,a=l.audiocontext.currentTime,u=t||0;if(0>u&&(u=0),u+=a,"undefined"!=typeof e&&this.rate(e),"undefined"!=typeof i&&this.setVolume(i),!this.buffer)throw"not ready to play file, buffer has yet to load. Try preload()";if(this._pauseTime=0,"restart"===this.mode&&this.buffer&&this.bufferSourceNode&&(this.bufferSourceNode.stop(u),this._counterNode.stop(u)),"untildone"!==this.mode||!this.isPlaying()){if(this.bufferSourceNode=this._initSourceNode(),delete this._counterNode,this._counterNode=this._initCounterNode(),n){if(!(n>=0&&nt&&!this.reversed?(t=Math.abs(t),e=!0):t>0&&this.reversed&&(e=!0),this.bufferSourceNode){var i=l.audiocontext.currentTime;this.bufferSourceNode.playbackRate.cancelScheduledValues(i),this.bufferSourceNode.playbackRate.linearRampToValueAtTime(Math.abs(t),i),this._counterNode.playbackRate.cancelScheduledValues(i),this._counterNode.playbackRate.linearRampToValueAtTime(Math.abs(t),i)}return e&&this.reverseBuffer(),this.playbackRate},t.SoundFile.prototype.setPitch=function(t){var e=d(t)/d(60);this.rate(e)},t.SoundFile.prototype.getPlaybackRate=function(){return this.playbackRate},t.SoundFile.prototype.duration=function(){return this.buffer?this.buffer.duration:0},t.SoundFile.prototype.currentTime=function(){return this.reversed?Math.abs(this._lastPos-this.buffer.length)/f.sampleRate:this._lastPos/f.sampleRate},t.SoundFile.prototype.jump=function(t,e){if(0>t||t>this.buffer.duration)throw"jump time out of range";if(e>this.buffer.duration-t)throw"end time out of range";var i=t||0,n=e||void 0;this.isPlaying()&&this.stop(0),this.play(0,this.playbackRate,this.output.gain.value,i,n);
+},t.SoundFile.prototype.channels=function(){return this.buffer.numberOfChannels},t.SoundFile.prototype.sampleRate=function(){return this.buffer.sampleRate},t.SoundFile.prototype.frames=function(){return this.buffer.length},t.SoundFile.prototype.getPeaks=function(t){if(!this.buffer)throw"Cannot load peaks yet, buffer is not loaded";if(t||(t=5*window.width),this.buffer){for(var e=this.buffer,i=e.length/t,n=~~(i/10)||1,o=e.numberOfChannels,r=new Float32Array(Math.round(t)),s=0;o>s;s++)for(var a=e.getChannelData(s),u=0;t>u;u++){for(var c=~~(u*i),p=~~(c+i),h=0,l=c;p>l;l+=n){var f=a[l];f>h?h=f:-f>h&&(h=f)}(0===s||Math.abs(h)>r[u])&&(r[u]=h)}return r}},t.SoundFile.prototype.reverseBuffer=function(){if(!this.buffer)throw"SoundFile is not done loading";var t=this._lastPos/f.sampleRate,e=this.getVolume();this.setVolume(0,.001);const i=this.buffer.numberOfChannels;for(var n=0;i>n;n++)this.buffer.getChannelData(n).reverse();this.reversed=!this.reversed,t&&this.jump(this.duration()-t),this.setVolume(e,.001)},t.SoundFile.prototype.onended=function(t){return this._onended=t,this},t.SoundFile.prototype.add=function(){},t.SoundFile.prototype.dispose=function(){var t=l.audiocontext.currentTime,e=l.soundArray.indexOf(this);if(l.soundArray.splice(e,1),this.stop(t),this.buffer&&this.bufferSourceNode){for(var i=0;io;o++){var r=n.getChannelData(o);r.set(t[o])}this.buffer=n,this.panner.inputChannels(e)};var y=function(t){const e=t.length,i=f.createBuffer(1,t.length,f.sampleRate),n=i.getChannelData(0);for(var o=0;e>o;o++)n[o]=o;return i};t.SoundFile.prototype._initCounterNode=function(){var e=this,i=f.currentTime,n=f.createBufferSource();return e._scopeNode&&(e._scopeNode.disconnect(),e._scopeNode.removeEventListener("audioprocess",e._onAudioProcess),delete e._scopeNode),e._scopeNode=f.createScriptProcessor(256,1,1),n.buffer=y(e.buffer),n.playbackRate.setValueAtTime(e.playbackRate,i),n.connect(e._scopeNode),e._scopeNode.connect(t.soundOut._silentNode),e._scopeNode.addEventListener("audioprocess",e._onAudioProcess),n},t.SoundFile.prototype._initSourceNode=function(){var t=f.createBufferSource();return t.buffer=this.buffer,t.playbackRate.value=this.playbackRate,t.connect(this.output),t},t.SoundFile.prototype.processPeaks=function(t,r,s,a){var u=this.buffer.length,c=this.buffer.sampleRate,p=this.buffer,h=[],l=r||.9,f=l,d=s||.22,m=a||200,y=new window.OfflineAudioContext(1,u,c),v=y.createBufferSource();v.buffer=p;var g=y.createBiquadFilter();g.type="lowpass",v.connect(g),g.connect(y.destination),v.start(0),y.startRendering(),y.oncomplete=function(r){if(self.panner){var s=r.renderedBuffer,a=s.getChannelData(0);do h=e(a,f),f-=.005;while(Object.keys(h).length=d);var u=i(h),c=n(u,s.sampleRate),p=c.sort(function(t,e){return e.count-t.count}).splice(0,5);this.tempo=p[0].tempo;var l=5,y=o(h,p[0].tempo,s.sampleRate,l);t(y)}}};var v=function(t,e){this.sampleIndex=e,this.amplitude=t,this.tempos=[],this.intervals=[]},g=function(t,e,i,n){this.callback=t,this.time=e,this.id=i,this.val=n};t.SoundFile.prototype.addCue=function(t,e,i){var n=this._cueIDCounter++,o=new g(e,t,n,i);return this._cues.push(o),n},t.SoundFile.prototype.removeCue=function(t){for(var e=this._cues.length,i=0;e>i;i++){var n=this._cues[i];if(n.id===t){this._cues.splice(i,1);break}}0===this._cues.length},t.SoundFile.prototype.clearCues=function(){this._cues=[]},t.SoundFile.prototype._onTimeUpdate=function(t){for(var e=t/this.buffer.sampleRate,i=this._cues.length,n=0;i>n;n++){var o=this._cues[n],r=o.time,s=o.val;this._prevTime=r&&o.callback(s)}this._prevTime=e},t.SoundFile.prototype.save=function(e){const i=m(this.buffer);t.prototype.saveSound([i],e,"wav")},t.SoundFile.prototype.getBlob=function(){const t=m(this.buffer);return new Blob([t],{type:"audio/wav"})}}(c,a,u,u);var l;l=function(){var e=a;t.Amplitude=function(t){this.bufferSize=2048,this.audiocontext=e.audiocontext,this.processor=this.audiocontext.createScriptProcessor(this.bufferSize,2,1),this.input=this.processor,this.output=this.audiocontext.createGain(),this.smoothing=t||0,this.volume=0,this.average=0,this.stereoVol=[0,0],this.stereoAvg=[0,0],this.stereoVolNorm=[0,0],this.volMax=.001,this.normalize=!1,this.processor.onaudioprocess=this._audioProcess.bind(this),this.processor.connect(this.output),this.output.gain.value=0,this.output.connect(this.audiocontext.destination),e.meter.connect(this.processor),e.soundArray.push(this)},t.Amplitude.prototype.setInput=function(i,n){e.meter.disconnect(),n&&(this.smoothing=n),null==i?(console.log("Amplitude input source is not ready! Connecting to master output instead"),e.meter.connect(this.processor)):i instanceof t.Signal?i.output.connect(this.processor):i?(i.connect(this.processor),this.processor.disconnect(),this.processor.connect(this.output)):e.meter.connect(this.processor)},t.Amplitude.prototype.connect=function(t){t?t.hasOwnProperty("input")?this.output.connect(t.input):this.output.connect(t):this.output.connect(this.panner.connect(e.input))},t.Amplitude.prototype.disconnect=function(){this.output&&this.output.disconnect()},t.Amplitude.prototype._audioProcess=function(t){for(var e=0;ea;a++)i=n[a],this.normalize?(r+=Math.max(Math.min(i/this.volMax,1),-1),s+=Math.max(Math.min(i/this.volMax,1),-1)*Math.max(Math.min(i/this.volMax,1),-1)):(r+=i,s+=i*i);var u=r/o,c=Math.sqrt(s/o);this.stereoVol[e]=Math.max(c,this.stereoVol[e]*this.smoothing),this.stereoAvg[e]=Math.max(u,this.stereoVol[e]*this.smoothing),this.volMax=Math.max(this.stereoVol[e],this.volMax)}var p=this,h=this.stereoVol.reduce(function(t,e,i){return p.stereoVolNorm[i-1]=Math.max(Math.min(p.stereoVol[i-1]/p.volMax,1),0),p.stereoVolNorm[i]=Math.max(Math.min(p.stereoVol[i]/p.volMax,1),0),t+e});this.volume=h/this.stereoVol.length,this.volNorm=Math.max(Math.min(this.volume/this.volMax,1),0)},t.Amplitude.prototype.getLevel=function(t){return"undefined"!=typeof t?this.normalize?this.stereoVolNorm[t]:this.stereoVol[t]:this.normalize?this.volNorm:this.volume},t.Amplitude.prototype.toggleNormalize=function(t){"boolean"==typeof t?this.normalize=t:this.normalize=!this.normalize},t.Amplitude.prototype.smooth=function(t){t>=0&&1>t?this.smoothing=t:console.log("Error: smoothing must be between 0 and 1")},t.Amplitude.prototype.dispose=function(){var t=e.soundArray.indexOf(this);e.soundArray.splice(t,1),this.input&&(this.input.disconnect(),delete this.input),this.output&&(this.output.disconnect(),delete this.output),delete this.processor}}(a);var f;f=function(){var e=a;t.FFT=function(t,i){this.input=this.analyser=e.audiocontext.createAnalyser(),Object.defineProperties(this,{bins:{get:function(){return this.analyser.fftSize/2},set:function(t){this.analyser.fftSize=2*t},configurable:!0,enumerable:!0},smoothing:{get:function(){return this.analyser.smoothingTimeConstant},set:function(t){this.analyser.smoothingTimeConstant=t},configurable:!0,enumerable:!0}}),this.smooth(t),this.bins=i||1024,e.fftMeter.connect(this.analyser),this.freqDomain=new Uint8Array(this.analyser.frequencyBinCount),this.timeDomain=new Uint8Array(this.analyser.frequencyBinCount),this.bass=[20,140],this.lowMid=[140,400],this.mid=[400,2600],this.highMid=[2600,5200],this.treble=[5200,14e3],e.soundArray.push(this)},t.FFT.prototype.setInput=function(t){t?(t.output?t.output.connect(this.analyser):t.connect&&t.connect(this.analyser),e.fftMeter.disconnect()):e.fftMeter.connect(this.analyser)},t.FFT.prototype.waveform=function(){for(var e,i,n,s=0;si){var o=i;i=t,t=o}for(var r=Math.round(t/n*this.freqDomain.length),s=Math.round(i/n*this.freqDomain.length),a=0,u=0,c=r;s>=c;c++)a+=this.freqDomain[c],u+=1;var p=a/u;return p}throw"invalid input for getEnergy()"}var h=Math.round(t/n*this.freqDomain.length);return this.freqDomain[h]},t.FFT.prototype.getFreq=function(t,e){console.log("getFreq() is deprecated. Please use getEnergy() instead.");var i=this.getEnergy(t,e);return i},t.FFT.prototype.getCentroid=function(){for(var t=e.audiocontext.sampleRate/2,i=0,n=0,o=0;os;s++)o[r]=void 0!==o[r]?(o[r]+e[s])/2:e[s],s%n===n-1&&r++;return o},t.FFT.prototype.logAverages=function(t){for(var i=e.audiocontext.sampleRate/2,n=this.freqDomain,o=n.length,r=new Array(t.length),s=0,a=0;o>a;a++){var u=Math.round(a*i/this.freqDomain.length);u>t[s].hi&&s++,r[s]=void 0!==r[s]?(r[s]+n[a])/2:n[a]}return r},t.FFT.prototype.getOctaveBands=function(t,i){var t=t||3,i=i||15.625,n=[],o={lo:i/Math.pow(2,1/(2*t)),ctr:i,hi:i*Math.pow(2,1/(2*t))};n.push(o);for(var r=e.audiocontext.sampleRate/2;o.hie;e++){var n=e/(i-1)*2-1;this._curve[e]=t(n,e)}return this._shaper.curve=this._curve,this},Object.defineProperty(t.WaveShaper.prototype,"curve",{get:function(){return this._shaper.curve},set:function(t){this._curve=new Float32Array(t),this._shaper.curve=this._curve}}),Object.defineProperty(t.WaveShaper.prototype,"oversample",{get:function(){return this._shaper.oversample},set:function(t){if(-1===["none","2x","4x"].indexOf(t))throw new RangeError("Tone.WaveShaper: oversampling must be either 'none', '2x', or '4x'");this._shaper.oversample=t}}),t.WaveShaper.prototype.dispose=function(){return t.prototype.dispose.call(this),this._shaper.disconnect(),this._shaper=null,this._curve=null,this},t.WaveShaper}(n);var y;y=function(t){return t.TimeBase=function(e,i){if(!(this instanceof t.TimeBase))return new t.TimeBase(e,i);if(this._expr=this._noOp,e instanceof t.TimeBase)this.copy(e);else if(!this.isUndef(i)||this.isNumber(e)){i=this.defaultArg(i,this._defaultUnits);var n=this._primaryExpressions[i].method;this._expr=n.bind(this,e)}else this.isString(e)?this.set(e):this.isUndef(e)&&(this._expr=this._defaultExpr())},t.extend(t.TimeBase),t.TimeBase.prototype.set=function(t){return this._expr=this._parseExprString(t),this},t.TimeBase.prototype.clone=function(){var t=new this.constructor;return t.copy(this),t},t.TimeBase.prototype.copy=function(t){var e=t._expr();return this.set(e)},t.TimeBase.prototype._primaryExpressions={n:{regexp:/^(\d+)n/i,method:function(t){return t=parseInt(t),1===t?this._beatsToUnits(this._timeSignature()):this._beatsToUnits(4/t)}},t:{regexp:/^(\d+)t/i,method:function(t){return t=parseInt(t),this._beatsToUnits(8/(3*parseInt(t)))}},m:{regexp:/^(\d+)m/i,method:function(t){return this._beatsToUnits(parseInt(t)*this._timeSignature())}},i:{regexp:/^(\d+)i/i,method:function(t){return this._ticksToUnits(parseInt(t))}},hz:{regexp:/^(\d+(?:\.\d+)?)hz/i,method:function(t){return this._frequencyToUnits(parseFloat(t))}},tr:{regexp:/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?):?(\d+(?:\.\d+)?)?/,method:function(t,e,i){var n=0;return t&&"0"!==t&&(n+=this._beatsToUnits(this._timeSignature()*parseFloat(t))),e&&"0"!==e&&(n+=this._beatsToUnits(parseFloat(e))),i&&"0"!==i&&(n+=this._beatsToUnits(parseFloat(i)/4)),n}},s:{regexp:/^(\d+(?:\.\d+)?s)/,method:function(t){return this._secondsToUnits(parseFloat(t))}},samples:{regexp:/^(\d+)samples/,method:function(t){return parseInt(t)/this.context.sampleRate}},"default":{regexp:/^(\d+(?:\.\d+)?)/,method:function(t){return this._primaryExpressions[this._defaultUnits].method.call(this,t)}}},t.TimeBase.prototype._binaryExpressions={"+":{regexp:/^\+/,precedence:2,method:function(t,e){return t()+e()}},"-":{regexp:/^\-/,precedence:2,method:function(t,e){return t()-e()}},"*":{regexp:/^\*/,precedence:1,method:function(t,e){return t()*e()}},"/":{regexp:/^\//,precedence:1,method:function(t,e){return t()/e()}}},t.TimeBase.prototype._unaryExpressions={neg:{regexp:/^\-/,method:function(t){return-t()}}},t.TimeBase.prototype._syntaxGlue={"(":{regexp:/^\(/},")":{regexp:/^\)/}},t.TimeBase.prototype._tokenize=function(t){function e(t,e){for(var i=["_binaryExpressions","_unaryExpressions","_primaryExpressions","_syntaxGlue"],n=0;n0;){t=t.trim();var o=e(t,this);n.push(o),t=t.substr(o.value.length)}return{next:function(){return n[++i]},peek:function(){return n[i+1]}}},t.TimeBase.prototype._matchGroup=function(t,e,i){var n=!1;if(!this.isUndef(t))for(var o in e){var r=e[o];if(r.regexp.test(t.value)){if(this.isUndef(i))return r;if(r.precedence===i)return r}}return n},t.TimeBase.prototype._parseBinary=function(t,e){this.isUndef(e)&&(e=2);var i;i=0>e?this._parseUnary(t):this._parseBinary(t,e-1);for(var n=t.peek();n&&this._matchGroup(n,this._binaryExpressions,e);)n=t.next(),i=n.method.bind(this,i,this._parseBinary(t,e-1)),n=t.peek();return i},t.TimeBase.prototype._parseUnary=function(t){var e,i;e=t.peek();var n=this._matchGroup(e,this._unaryExpressions);return n?(e=t.next(),i=this._parseUnary(t),n.method.bind(this,i)):this._parsePrimary(t)},t.TimeBase.prototype._parsePrimary=function(t){var e,i;if(e=t.peek(),this.isUndef(e))throw new SyntaxError("Tone.TimeBase: Unexpected end of expression");if(this._matchGroup(e,this._primaryExpressions)){e=t.next();var n=e.value.match(e.regexp);return e.method.bind(this,n[1],n[2],n[3])}if(e&&"("===e.value){if(t.next(),i=this._parseBinary(t),e=t.next(),!e||")"!==e.value)throw new SyntaxError("Expected )");return i}throw new SyntaxError("Tone.TimeBase: Cannot process token "+e.value)},t.TimeBase.prototype._parseExprString=function(t){this.isString(t)||(t=t.toString());var e=this._tokenize(t),i=this._parseBinary(e);return i},t.TimeBase.prototype._noOp=function(){return 0},t.TimeBase.prototype._defaultExpr=function(){return this._noOp},t.TimeBase.prototype._defaultUnits="s",t.TimeBase.prototype._frequencyToUnits=function(t){return 1/t},t.TimeBase.prototype._beatsToUnits=function(e){return 60/t.Transport.bpm.value*e},t.TimeBase.prototype._secondsToUnits=function(t){return t},t.TimeBase.prototype._ticksToUnits=function(e){return e*(this._beatsToUnits(1)/t.Transport.PPQ)},t.TimeBase.prototype._timeSignature=function(){return t.Transport.timeSignature},t.TimeBase.prototype._pushExpr=function(e,i,n){return e instanceof t.TimeBase||(e=new this.constructor(e,n)),this._expr=this._binaryExpressions[i].method.bind(this,this._expr,e._expr),this},t.TimeBase.prototype.add=function(t,e){return this._pushExpr(t,"+",e)},t.TimeBase.prototype.sub=function(t,e){return this._pushExpr(t,"-",e)},t.TimeBase.prototype.mult=function(t,e){return this._pushExpr(t,"*",e)},t.TimeBase.prototype.div=function(t,e){return this._pushExpr(t,"/",e)},t.TimeBase.prototype.valueOf=function(){return this._expr()},t.TimeBase.prototype.dispose=function(){this._expr=null},t.TimeBase}(n);var v;v=function(t){return t.Time=function(e,i){return this instanceof t.Time?(this._plusNow=!1,void t.TimeBase.call(this,e,i)):new t.Time(e,i)},t.extend(t.Time,t.TimeBase),t.Time.prototype._unaryExpressions=Object.create(t.TimeBase.prototype._unaryExpressions),t.Time.prototype._unaryExpressions.quantize={regexp:/^@/,method:function(e){return t.Transport.nextSubdivision(e())}},t.Time.prototype._unaryExpressions.now={regexp:/^\+/,method:function(t){return this._plusNow=!0,t()}},t.Time.prototype.quantize=function(t,e){return e=this.defaultArg(e,1),this._expr=function(t,e,i){t=t(),e=e.toSeconds();var n=Math.round(t/e),o=n*e,r=o-t;return t+r*i}.bind(this,this._expr,new this.constructor(t),e),this},t.Time.prototype.addNow=function(){return this._plusNow=!0,this},t.Time.prototype._defaultExpr=function(){return this._plusNow=!0,this._noOp},t.Time.prototype.copy=function(e){return t.TimeBase.prototype.copy.call(this,e),this._plusNow=e._plusNow,this},t.Time.prototype.toNotation=function(){var t=this.toSeconds(),e=["1m","2n","4n","8n","16n","32n","64n","128n"],i=this._toNotationHelper(t,e),n=["1m","2n","2t","4n","4t","8n","8t","16n","16t","32n","32t","64n","64t","128n"],o=this._toNotationHelper(t,n);return o.split("+").length1-s%1&&(s+=a),s=Math.floor(s),s>0){if(n+=1===s?e[o]:s.toString()+"*"+e[o],t-=s*r,i>t)break;n+=" + "}}return""===n&&(n="0"),n},t.Time.prototype._notationToUnits=function(t){for(var e=this._primaryExpressions,i=[e.n,e.t,e.m],n=0;n3&&(n=parseFloat(n).toFixed(3));var o=[i,e,n];return o.join(":")},t.Time.prototype.toTicks=function(){var e=this._beatsToUnits(1),i=this.valueOf()/e;return Math.floor(i*t.Transport.PPQ)},t.Time.prototype.toSamples=function(){return this.toSeconds()*this.context.sampleRate},t.Time.prototype.toFrequency=function(){return 1/this.toSeconds()},t.Time.prototype.toSeconds=function(){return this.valueOf()},t.Time.prototype.toMilliseconds=function(){return 1e3*this.toSeconds()},t.Time.prototype.valueOf=function(){var t=this._expr();return t+(this._plusNow?this.now():0)},t.Time}(n);var g;g=function(t){t.Frequency=function(e,i){return this instanceof t.Frequency?void t.TimeBase.call(this,e,i):new t.Frequency(e,i)},t.extend(t.Frequency,t.TimeBase),t.Frequency.prototype._primaryExpressions=Object.create(t.TimeBase.prototype._primaryExpressions),t.Frequency.prototype._primaryExpressions.midi={regexp:/^(\d+(?:\.\d+)?midi)/,method:function(t){return this.midiToFrequency(t)}},t.Frequency.prototype._primaryExpressions.note={regexp:/^([a-g]{1}(?:b|#|x|bb)?)(-?[0-9]+)/i,method:function(t,i){var n=e[t.toLowerCase()],o=n+12*(parseInt(i)+1);return this.midiToFrequency(o)}},t.Frequency.prototype._primaryExpressions.tr={regexp:/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?):?(\d+(?:\.\d+)?)?/,method:function(t,e,i){var n=1;return t&&"0"!==t&&(n*=this._beatsToUnits(this._timeSignature()*parseFloat(t))),e&&"0"!==e&&(n*=this._beatsToUnits(parseFloat(e))),i&&"0"!==i&&(n*=this._beatsToUnits(parseFloat(i)/4)),n}},t.Frequency.prototype.transpose=function(t){return this._expr=function(t,e){var i=t();return i*this.intervalToFrequencyRatio(e)}.bind(this,this._expr,t),this},t.Frequency.prototype.harmonize=function(t){return this._expr=function(t,e){for(var i=t(),n=[],o=0;or&&(o+=-12*r);var s=i[o%12];return s+r.toString()},t.Frequency.prototype.toSeconds=function(){return 1/this.valueOf()},t.Frequency.prototype.toFrequency=function(){return this.valueOf()},t.Frequency.prototype.toTicks=function(){var e=this._beatsToUnits(1),i=this.valueOf()/e;return Math.floor(i*t.Transport.PPQ)},t.Frequency.prototype._frequencyToUnits=function(t){return t},t.Frequency.prototype._ticksToUnits=function(e){return 1/(60*e/(t.Transport.bpm.value*t.Transport.PPQ))},t.Frequency.prototype._beatsToUnits=function(e){return 1/t.TimeBase.prototype._beatsToUnits.call(this,e)},t.Frequency.prototype._secondsToUnits=function(t){return 1/t},t.Frequency.prototype._defaultUnits="hz";var e={cbb:-2,cb:-1,c:0,"c#":1,cx:2,dbb:0,db:1,d:2,"d#":3,dx:4,ebb:2,eb:3,e:4,"e#":5,ex:6,fbb:3,fb:4,f:5,"f#":6,fx:7,gbb:5,gb:6,g:7,"g#":8,gx:9,abb:7,ab:8,a:9,"a#":10,ax:11,bbb:9,bb:10,b:11,"b#":12,bx:13},i=["C","C#","D","D#","E","F","F#","G","G#","A","A#","B"];return t.Frequency.A4=440,t.Frequency.prototype.midiToFrequency=function(e){return t.Frequency.A4*Math.pow(2,(e-69)/12)},t.Frequency.prototype.frequencyToMidi=function(e){return 69+12*Math.log(e/t.Frequency.A4)/Math.LN2},t.Frequency}(n);var _;_=function(t){return t.TransportTime=function(e,i){return this instanceof t.TransportTime?void t.Time.call(this,e,i):new t.TransportTime(e,i)},t.extend(t.TransportTime,t.Time),t.TransportTime.prototype._unaryExpressions=Object.create(t.Time.prototype._unaryExpressions),t.TransportTime.prototype._unaryExpressions.quantize={regexp:/^@/,method:function(e){var i=this._secondsToTicks(e()),n=Math.ceil(t.Transport.ticks/i);return this._ticksToUnits(n*i)}},t.TransportTime.prototype._secondsToTicks=function(e){var i=this._beatsToUnits(1),n=e/i;return Math.round(n*t.Transport.PPQ)},t.TransportTime.prototype.valueOf=function(){var e=this._secondsToTicks(this._expr());return e+(this._plusNow?t.Transport.ticks:0)},t.TransportTime.prototype.toTicks=function(){return this.valueOf()},t.TransportTime.prototype.toSeconds=function(){var e=this._expr();return e+(this._plusNow?t.Transport.seconds:0)},t.TransportTime.prototype.toFrequency=function(){return 1/this.toSeconds()},t.TransportTime}(n);var T;T=function(t){return t.Type={Default:"number",Time:"time",Frequency:"frequency",TransportTime:"transportTime",Ticks:"ticks",NormalRange:"normalRange",AudioRange:"audioRange",Decibels:"db",Interval:"interval",BPM:"bpm",Positive:"positive",Cents:"cents",Degrees:"degrees",MIDI:"midi",BarsBeatsSixteenths:"barsBeatsSixteenths",Samples:"samples",Hertz:"hertz",Note:"note",Milliseconds:"milliseconds",Seconds:"seconds",Notation:"notation"},t.prototype.toSeconds=function(e){return this.isNumber(e)?e:this.isUndef(e)?this.now():this.isString(e)?new t.Time(e).toSeconds():e instanceof t.TimeBase?e.toSeconds():void 0},t.prototype.toFrequency=function(e){return this.isNumber(e)?e:this.isString(e)||this.isUndef(e)?new t.Frequency(e).valueOf():e instanceof t.TimeBase?e.toFrequency():void 0},t.prototype.toTicks=function(e){return this.isNumber(e)||this.isString(e)?new t.TransportTime(e).toTicks():this.isUndef(e)?t.Transport.ticks:e instanceof t.TimeBase?e.toTicks():void 0},t}(n,v,g,_);var b;b=function(t){"use strict";return t.Param=function(){var e=this.optionsObject(arguments,["param","units","convert"],t.Param.defaults);this._param=this.input=e.param,this.units=e.units,this.convert=e.convert,this.overridden=!1,this._lfo=null,this.isObject(e.lfo)?this.value=e.lfo:this.isUndef(e.value)||(this.value=e.value)},t.extend(t.Param),t.Param.defaults={units:t.Type.Default,convert:!0,param:void 0},Object.defineProperty(t.Param.prototype,"value",{get:function(){return this._toUnits(this._param.value)},set:function(e){if(this.isObject(e)){if(this.isUndef(t.LFO))throw new Error("Include 'Tone.LFO' to use an LFO as a Param value.");this._lfo&&this._lfo.dispose(),this._lfo=new t.LFO(e).start(),this._lfo.connect(this.input)}else{var i=this._fromUnits(e);this._param.cancelScheduledValues(0),this._param.value=i}}}),t.Param.prototype._fromUnits=function(e){if(!this.convert&&!this.isUndef(this.convert))return e;switch(this.units){case t.Type.Time:return this.toSeconds(e);case t.Type.Frequency:return this.toFrequency(e);case t.Type.Decibels:return this.dbToGain(e);case t.Type.NormalRange:return Math.min(Math.max(e,0),1);case t.Type.AudioRange:return Math.min(Math.max(e,-1),1);case t.Type.Positive:return Math.max(e,0);default:return e}},t.Param.prototype._toUnits=function(e){if(!this.convert&&!this.isUndef(this.convert))return e;switch(this.units){case t.Type.Decibels:return this.gainToDb(e);default:return e}},t.Param.prototype._minOutput=1e-5,t.Param.prototype.setValueAtTime=function(t,e){return t=this._fromUnits(t),e=this.toSeconds(e),e<=this.now()+this.blockTime?this._param.value=t:this._param.setValueAtTime(t,e),this},t.Param.prototype.setRampPoint=function(t){t=this.defaultArg(t,this.now());var e=this._param.value;return 0===e&&(e=this._minOutput),this._param.setValueAtTime(e,t),this},t.Param.prototype.linearRampToValueAtTime=function(t,e){return t=this._fromUnits(t),this._param.linearRampToValueAtTime(t,this.toSeconds(e)),this},t.Param.prototype.exponentialRampToValueAtTime=function(t,e){return t=this._fromUnits(t),t=Math.max(this._minOutput,t),this._param.exponentialRampToValueAtTime(t,this.toSeconds(e)),this},t.Param.prototype.exponentialRampToValue=function(t,e,i){return i=this.toSeconds(i),this.setRampPoint(i),this.exponentialRampToValueAtTime(t,i+this.toSeconds(e)),this},t.Param.prototype.linearRampToValue=function(t,e,i){return i=this.toSeconds(i),this.setRampPoint(i),this.linearRampToValueAtTime(t,i+this.toSeconds(e)),this},t.Param.prototype.setTargetAtTime=function(t,e,i){return t=this._fromUnits(t),t=Math.max(this._minOutput,t),i=Math.max(this._minOutput,i),this._param.setTargetAtTime(t,this.toSeconds(e),i),this},t.Param.prototype.setValueCurveAtTime=function(t,e,i){for(var n=0;n1&&(this.input=new Array(e)),1===i?this.output=new t.Gain:i>1&&(this.output=new Array(e))},t.Gain}(n,b);var S;S=function(t){"use strict";return t.Signal=function(){var e=this.optionsObject(arguments,["value","units"],t.Signal.defaults);this.output=this._gain=this.context.createGain(),e.param=this._gain.gain,t.Param.call(this,e),this.input=this._param=this._gain.gain,this.context.getConstant(1).chain(this._gain)},t.extend(t.Signal,t.Param),t.Signal.defaults={value:0,units:t.Type.Default,convert:!0},t.Signal.prototype.connect=t.SignalBase.prototype.connect,t.Signal.prototype.dispose=function(){return t.Param.prototype.dispose.call(this),this._param=null,this._gain.disconnect(),this._gain=null,this},t.Signal}(n,m,T,b);var w;w=function(t){"use strict";return t.Add=function(e){this.createInsOuts(2,0),this._sum=this.input[0]=this.input[1]=this.output=new t.Gain,this._param=this.input[1]=new t.Signal(e),this._param.connect(this._sum)},t.extend(t.Add,t.Signal),t.Add.prototype.dispose=function(){return t.prototype.dispose.call(this),this._sum.dispose(),this._sum=null,this._param.dispose(),this._param=null,this},t.Add}(n,S);var A;A=function(t){"use strict";return t.Multiply=function(e){this.createInsOuts(2,0),this._mult=this.input[0]=this.output=new t.Gain,this._param=this.input[1]=this.output.gain,this._param.value=this.defaultArg(e,0)},t.extend(t.Multiply,t.Signal),t.Multiply.prototype.dispose=function(){return t.prototype.dispose.call(this),this._mult.dispose(),this._mult=null,
+this._param=null,this},t.Multiply}(n,S);var P;P=function(t){"use strict";return t.Scale=function(e,i){this._outputMin=this.defaultArg(e,0),this._outputMax=this.defaultArg(i,1),this._scale=this.input=new t.Multiply(1),this._add=this.output=new t.Add(0),this._scale.connect(this._add),this._setRange()},t.extend(t.Scale,t.SignalBase),Object.defineProperty(t.Scale.prototype,"min",{get:function(){return this._outputMin},set:function(t){this._outputMin=t,this._setRange()}}),Object.defineProperty(t.Scale.prototype,"max",{get:function(){return this._outputMax},set:function(t){this._outputMax=t,this._setRange()}}),t.Scale.prototype._setRange=function(){this._add.value=this._outputMin,this._scale.value=this._outputMax-this._outputMin},t.Scale.prototype.dispose=function(){return t.prototype.dispose.call(this),this._add.dispose(),this._add=null,this._scale.dispose(),this._scale=null,this},t.Scale}(n,w,A);var k;k=function(){var e=S,i=w,n=A,o=P;t.Signal=function(t){var i=new e(t);return i},e.prototype.fade=e.prototype.linearRampToValueAtTime,n.prototype.fade=e.prototype.fade,i.prototype.fade=e.prototype.fade,o.prototype.fade=e.prototype.fade,e.prototype.setInput=function(t){t.connect(this)},n.prototype.setInput=e.prototype.setInput,i.prototype.setInput=e.prototype.setInput,o.prototype.setInput=e.prototype.setInput,e.prototype.add=function(t){var e=new i(t);return this.connect(e),e},n.prototype.add=e.prototype.add,i.prototype.add=e.prototype.add,o.prototype.add=e.prototype.add,e.prototype.mult=function(t){var e=new n(t);return this.connect(e),e},n.prototype.mult=e.prototype.mult,i.prototype.mult=e.prototype.mult,o.prototype.mult=e.prototype.mult,e.prototype.scale=function(e,i,n,r){var s,a;4===arguments.length?(s=t.prototype.map(n,e,i,0,1)-.5,a=t.prototype.map(r,e,i,0,1)-.5):(s=arguments[0],a=arguments[1]);var u=new o(s,a);return this.connect(u),u},n.prototype.scale=e.prototype.scale,i.prototype.scale=e.prototype.scale,o.prototype.scale=e.prototype.scale}(S,w,A,P);var O;O=function(){var e=a,i=w,n=A,o=P;t.Oscillator=function(i,n){if("string"==typeof i){var o=n;n=i,i=o}if("number"==typeof n){var o=n;n=i,i=o}this.started=!1,this.phaseAmount=void 0,this.oscillator=e.audiocontext.createOscillator(),this.f=i||440,this.oscillator.type=n||"sine",this.oscillator.frequency.setValueAtTime(this.f,e.audiocontext.currentTime),this.output=e.audiocontext.createGain(),this._freqMods=[],this.output.gain.value=.5,this.output.gain.setValueAtTime(.5,e.audiocontext.currentTime),this.oscillator.connect(this.output),this.panPosition=0,this.connection=e.input,this.panner=new t.Panner(this.output,this.connection,1),this.mathOps=[this.output],e.soundArray.push(this)},t.Oscillator.prototype.start=function(t,i){if(this.started){var n=e.audiocontext.currentTime;this.stop(n)}if(!this.started){var o=i||this.f,r=this.oscillator.type;this.oscillator&&(this.oscillator.disconnect(),delete this.oscillator),this.oscillator=e.audiocontext.createOscillator(),this.oscillator.frequency.value=Math.abs(o),this.oscillator.type=r,this.oscillator.connect(this.output),t=t||0,this.oscillator.start(t+e.audiocontext.currentTime),this.freqNode=this.oscillator.frequency;for(var s in this._freqMods)"undefined"!=typeof this._freqMods[s].connect&&this._freqMods[s].connect(this.oscillator.frequency);this.started=!0}},t.Oscillator.prototype.stop=function(t){if(this.started){var i=t||0,n=e.audiocontext.currentTime;this.oscillator.stop(i+n),this.started=!1}},t.Oscillator.prototype.amp=function(t,i,n){var o=this;if("number"==typeof t){var i=i||0,n=n||0,r=e.audiocontext.currentTime;this.output.gain.linearRampToValueAtTime(t,r+n+i)}else{if(!t)return this.output.gain;t.connect(o.output.gain)}},t.Oscillator.prototype.fade=t.Oscillator.prototype.amp,t.Oscillator.prototype.getAmp=function(){return this.output.gain.value},t.Oscillator.prototype.freq=function(t,i,n){if("number"!=typeof t||isNaN(t)){if(!t)return this.oscillator.frequency;t.output&&(t=t.output),t.connect(this.oscillator.frequency),this._freqMods.push(t)}else{this.f=t;var o=e.audiocontext.currentTime,i=i||0,n=n||0;0===i?this.oscillator.frequency.setValueAtTime(t,n+o):t>0?this.oscillator.frequency.exponentialRampToValueAtTime(t,n+i+o):this.oscillator.frequency.linearRampToValueAtTime(t,n+i+o),this.phaseAmount&&this.phase(this.phaseAmount)}},t.Oscillator.prototype.getFreq=function(){return this.oscillator.frequency.value},t.Oscillator.prototype.setType=function(t){this.oscillator.type=t},t.Oscillator.prototype.getType=function(){return this.oscillator.type},t.Oscillator.prototype.connect=function(t){t?t.hasOwnProperty("input")?(this.panner.connect(t.input),this.connection=t.input):(this.panner.connect(t),this.connection=t):this.panner.connect(e.input)},t.Oscillator.prototype.disconnect=function(){this.output&&this.output.disconnect(),this.panner&&(this.panner.disconnect(),this.output&&this.output.connect(this.panner)),this.oscMods=[]},t.Oscillator.prototype.pan=function(t,e){this.panPosition=t,this.panner.pan(t,e)},t.Oscillator.prototype.getPan=function(){return this.panPosition},t.Oscillator.prototype.dispose=function(){var t=e.soundArray.indexOf(this);if(e.soundArray.splice(t,1),this.oscillator){var i=e.audiocontext.currentTime;this.stop(i),this.disconnect(),this.panner=null,this.oscillator=null}this.osc2&&this.osc2.dispose()},t.Oscillator.prototype.phase=function(i){var n=t.prototype.map(i,0,1,0,1/this.f),o=e.audiocontext.currentTime;this.phaseAmount=i,this.dNode||(this.dNode=e.audiocontext.createDelay(),this.oscillator.disconnect(),this.oscillator.connect(this.dNode),this.dNode.connect(this.output)),this.dNode.delayTime.setValueAtTime(n,o)};var r=function(t,e,i,n,o){var r=t.oscillator;for(var s in t.mathOps)t.mathOps[s]instanceof o&&(r.disconnect(),t.mathOps[s].dispose(),i=s,i0&&(r=t.mathOps[s-1]),r.disconnect(),r.connect(e),e.connect(n),t.mathOps[i]=e,t};t.Oscillator.prototype.add=function(t){var e=new i(t),n=this.mathOps.length-1,o=this.output;return r(this,e,n,o,i)},t.Oscillator.prototype.mult=function(t){var e=new n(t),i=this.mathOps.length-1,o=this.output;return r(this,e,i,o,n)},t.Oscillator.prototype.scale=function(e,i,n,s){var a,u;4===arguments.length?(a=t.prototype.map(n,e,i,0,1)-.5,u=t.prototype.map(s,e,i,0,1)-.5):(a=arguments[0],u=arguments[1]);var c=new o(a,u),p=this.mathOps.length-1,h=this.output;return r(this,c,p,h,o)},t.SinOsc=function(e){t.Oscillator.call(this,e,"sine")},t.SinOsc.prototype=Object.create(t.Oscillator.prototype),t.TriOsc=function(e){t.Oscillator.call(this,e,"triangle")},t.TriOsc.prototype=Object.create(t.Oscillator.prototype),t.SawOsc=function(e){t.Oscillator.call(this,e,"sawtooth")},t.SawOsc.prototype=Object.create(t.Oscillator.prototype),t.SqrOsc=function(e){t.Oscillator.call(this,e,"square")},t.SqrOsc.prototype=Object.create(t.Oscillator.prototype)}(a,w,A,P);var F;F=function(t){"use strict";return t.Timeline=function(){var e=this.optionsObject(arguments,["memory"],t.Timeline.defaults);this._timeline=[],this._toRemove=[],this._iterating=!1,this.memory=e.memory},t.extend(t.Timeline),t.Timeline.defaults={memory:1/0},Object.defineProperty(t.Timeline.prototype,"length",{get:function(){return this._timeline.length}}),t.Timeline.prototype.add=function(t){if(this.isUndef(t.time))throw new Error("Tone.Timeline: events must have a time attribute");if(this._timeline.length){var e=this._search(t.time);this._timeline.splice(e+1,0,t)}else this._timeline.push(t);if(this.length>this.memory){var i=this.length-this.memory;this._timeline.splice(0,i)}return this},t.Timeline.prototype.remove=function(t){if(this._iterating)this._toRemove.push(t);else{var e=this._timeline.indexOf(t);-1!==e&&this._timeline.splice(e,1)}return this},t.Timeline.prototype.get=function(t){var e=this._search(t);return-1!==e?this._timeline[e]:null},t.Timeline.prototype.peek=function(){return this._timeline[0]},t.Timeline.prototype.shift=function(){return this._timeline.shift()},t.Timeline.prototype.getAfter=function(t){var e=this._search(t);return e+10&&this._timeline[e-1].time=0?this._timeline[i-1]:null},t.Timeline.prototype.cancel=function(t){if(this._timeline.length>1){var e=this._search(t);if(e>=0)if(this._timeline[e].time===t){for(var i=e;i>=0&&this._timeline[i].time===t;i--)e=i;this._timeline=this._timeline.slice(0,e)}else this._timeline=this._timeline.slice(0,e+1);else this._timeline=[]}else 1===this._timeline.length&&this._timeline[0].time>=t&&(this._timeline=[]);return this},t.Timeline.prototype.cancelBefore=function(t){if(this._timeline.length){var e=this._search(t);e>=0&&(this._timeline=this._timeline.slice(e+1))}return this},t.Timeline.prototype._search=function(t){var e=0,i=this._timeline.length,n=i;if(i>0&&this._timeline[i-1].time<=t)return i-1;for(;n>e;){var o=Math.floor(e+(n-e)/2),r=this._timeline[o],s=this._timeline[o+1];if(r.time===t){for(var a=o;at)return o;r.time>t?n=o:r.time=n;n++)t(this._timeline[n]);if(this._iterating=!1,this._toRemove.length>0){for(var o=0;o=0&&this._timeline[i].time>=t;)i--;return this._iterate(e,i+1),this},t.Timeline.prototype.forEachAtTime=function(t,e){var i=this._search(t);return-1!==i&&this._iterate(function(i){i.time===t&&e(i)},0,i),this},t.Timeline.prototype.dispose=function(){t.prototype.dispose.call(this),this._timeline=null,this._toRemove=null},t.Timeline}(n);var q;q=function(t){"use strict";return t.TimelineSignal=function(){var e=this.optionsObject(arguments,["value","units"],t.Signal.defaults);this._events=new t.Timeline(10),t.Signal.apply(this,e),e.param=this._param,t.Param.call(this,e),this._initial=this._fromUnits(this._param.value)},t.extend(t.TimelineSignal,t.Param),t.TimelineSignal.Type={Linear:"linear",Exponential:"exponential",Target:"target",Curve:"curve",Set:"set"},Object.defineProperty(t.TimelineSignal.prototype,"value",{get:function(){var t=this.now(),e=this.getValueAtTime(t);return this._toUnits(e)},set:function(t){var e=this._fromUnits(t);this._initial=e,this.cancelScheduledValues(),this._param.value=e}}),t.TimelineSignal.prototype.setValueAtTime=function(e,i){return e=this._fromUnits(e),i=this.toSeconds(i),this._events.add({type:t.TimelineSignal.Type.Set,value:e,time:i}),this._param.setValueAtTime(e,i),this},t.TimelineSignal.prototype.linearRampToValueAtTime=function(e,i){return e=this._fromUnits(e),i=this.toSeconds(i),this._events.add({type:t.TimelineSignal.Type.Linear,value:e,time:i}),this._param.linearRampToValueAtTime(e,i),this},t.TimelineSignal.prototype.exponentialRampToValueAtTime=function(e,i){i=this.toSeconds(i);var n=this._searchBefore(i);n&&0===n.value&&this.setValueAtTime(this._minOutput,n.time),e=this._fromUnits(e);var o=Math.max(e,this._minOutput);return this._events.add({type:t.TimelineSignal.Type.Exponential,value:o,time:i}),ee)this.cancelScheduledValues(e),this.linearRampToValueAtTime(i,e);else{var o=this._searchAfter(e);o&&(this.cancelScheduledValues(e),o.type===t.TimelineSignal.Type.Linear?this.linearRampToValueAtTime(i,e):o.type===t.TimelineSignal.Type.Exponential&&this.exponentialRampToValueAtTime(i,e)),this.setValueAtTime(i,e)}return this},t.TimelineSignal.prototype.linearRampToValueBetween=function(t,e,i){return this.setRampPoint(e),this.linearRampToValueAtTime(t,i),this},t.TimelineSignal.prototype.exponentialRampToValueBetween=function(t,e,i){return this.setRampPoint(e),this.exponentialRampToValueAtTime(t,i),this},t.TimelineSignal.prototype._searchBefore=function(t){return this._events.get(t)},t.TimelineSignal.prototype._searchAfter=function(t){return this._events.getAfter(t)},t.TimelineSignal.prototype.getValueAtTime=function(e){e=this.toSeconds(e);var i=this._searchAfter(e),n=this._searchBefore(e),o=this._initial;if(null===n)o=this._initial;else if(n.type===t.TimelineSignal.Type.Target){var r,s=this._events.getBefore(n.time);r=null===s?this._initial:s.value,o=this._exponentialApproach(n.time,r,n.value,n.constant,e)}else o=n.type===t.TimelineSignal.Type.Curve?this._curveInterpolate(n.time,n.value,n.duration,e):null===i?n.value:i.type===t.TimelineSignal.Type.Linear?this._linearInterpolate(n.time,n.value,i.time,i.value,e):i.type===t.TimelineSignal.Type.Exponential?this._exponentialInterpolate(n.time,n.value,i.time,i.value,e):n.value;return o},t.TimelineSignal.prototype.connect=t.SignalBase.prototype.connect,t.TimelineSignal.prototype._exponentialApproach=function(t,e,i,n,o){return i+(e-i)*Math.exp(-(o-t)/n)},t.TimelineSignal.prototype._linearInterpolate=function(t,e,i,n,o){return e+(n-e)*((o-t)/(i-t))},t.TimelineSignal.prototype._exponentialInterpolate=function(t,e,i,n,o){return e=Math.max(this._minOutput,e),e*Math.pow(n/e,(o-t)/(i-t))},t.TimelineSignal.prototype._curveInterpolate=function(t,e,i,n){var o=e.length;if(n>=t+i)return e[o-1];if(t>=n)return e[0];var r=(n-t)/i,s=Math.floor((o-1)*r),a=Math.ceil((o-1)*r),u=e[s],c=e[a];return a===s?u:this._linearInterpolate(s,u,a,c,r*(o-1))},t.TimelineSignal.prototype.dispose=function(){t.Signal.prototype.dispose.call(this),t.Param.prototype.dispose.call(this),this._events.dispose(),this._events=null},t.TimelineSignal}(n,S);var M;M=function(){var e=a,i=w,n=A,o=P,r=q;t.Envelope=function(t,i,n,o,s,a){this.aTime=t||.1,this.aLevel=i||1,this.dTime=n||.5,this.dLevel=o||0,this.rTime=s||0,this.rLevel=a||0,this._rampHighPercentage=.98,this._rampLowPercentage=.02,this.output=e.audiocontext.createGain(),this.control=new r,this._init(),this.control.connect(this.output),this.connection=null,this.mathOps=[this.control],this.isExponential=!1,this.sourceToClear=null,this.wasTriggered=!1,e.soundArray.push(this)},t.Envelope.prototype._init=function(){var t=e.audiocontext.currentTime,i=t;this.control.setTargetAtTime(1e-5,i,.001),this._setRampAD(this.aTime,this.dTime)},t.Envelope.prototype.set=function(t,e,i,n,o,r){this.aTime=t,this.aLevel=e,this.dTime=i||0,this.dLevel=n||0,this.rTime=o||0,this.rLevel=r||0,this._setRampAD(t,i)},t.Envelope.prototype.setADSR=function(t,e,i,n){this.aTime=t,this.dTime=e||0,this.sPercent=i||0,this.dLevel="undefined"!=typeof i?i*(this.aLevel-this.rLevel)+this.rLevel:0,this.rTime=n||0,this._setRampAD(t,e)},t.Envelope.prototype.setRange=function(t,e){this.aLevel=t||1,this.rLevel=e||0},t.Envelope.prototype._setRampAD=function(t,e){this._rampAttackTime=this.checkExpInput(t),this._rampDecayTime=this.checkExpInput(e);var i=1;i=Math.log(1/this.checkExpInput(1-this._rampHighPercentage)),this._rampAttackTC=t/this.checkExpInput(i),i=Math.log(1/this._rampLowPercentage),this._rampDecayTC=e/this.checkExpInput(i)},t.Envelope.prototype.setRampPercentages=function(t,e){this._rampHighPercentage=this.checkExpInput(t),this._rampLowPercentage=this.checkExpInput(e);var i=1;i=Math.log(1/this.checkExpInput(1-this._rampHighPercentage)),this._rampAttackTC=this._rampAttackTime/this.checkExpInput(i),i=Math.log(1/this._rampLowPercentage),this._rampDecayTC=this._rampDecayTime/this.checkExpInput(i)},t.Envelope.prototype.setInput=function(){for(var t=0;t=t&&(t=1e-8),t},t.Envelope.prototype.play=function(t,e,i){var n=e||0,i=i||0;t&&this.connection!==t&&this.connect(t),this.triggerAttack(t,n),this.triggerRelease(t,n+this.aTime+this.dTime+i)},t.Envelope.prototype.triggerAttack=function(t,i){var n=e.audiocontext.currentTime,o=i||0,r=n+o;this.lastAttack=r,this.wasTriggered=!0,t&&this.connection!==t&&this.connect(t);var s=this.control.getValueAtTime(r);this.isExponential===!0?this.control.exponentialRampToValueAtTime(this.checkExpInput(s),r):this.control.linearRampToValueAtTime(s,r),r+=this.aTime,this.isExponential===!0?(this.control.exponentialRampToValueAtTime(this.checkExpInput(this.aLevel),r),s=this.checkExpInput(this.control.getValueAtTime(r)),this.control.cancelScheduledValues(r),this.control.exponentialRampToValueAtTime(s,r)):(this.control.linearRampToValueAtTime(this.aLevel,r),s=this.control.getValueAtTime(r),this.control.cancelScheduledValues(r),this.control.linearRampToValueAtTime(s,r)),r+=this.dTime,this.isExponential===!0?(this.control.exponentialRampToValueAtTime(this.checkExpInput(this.dLevel),r),s=this.checkExpInput(this.control.getValueAtTime(r)),this.control.cancelScheduledValues(r),this.control.exponentialRampToValueAtTime(s,r)):(this.control.linearRampToValueAtTime(this.dLevel,r),s=this.control.getValueAtTime(r),this.control.cancelScheduledValues(r),this.control.linearRampToValueAtTime(s,r))},t.Envelope.prototype.triggerRelease=function(t,i){if(this.wasTriggered){var n=e.audiocontext.currentTime,o=i||0,r=n+o;t&&this.connection!==t&&this.connect(t);var s=this.control.getValueAtTime(r);this.isExponential===!0?this.control.exponentialRampToValueAtTime(this.checkExpInput(s),r):this.control.linearRampToValueAtTime(s,r),r+=this.rTime,this.isExponential===!0?(this.control.exponentialRampToValueAtTime(this.checkExpInput(this.rLevel),r),s=this.checkExpInput(this.control.getValueAtTime(r)),this.control.cancelScheduledValues(r),this.control.exponentialRampToValueAtTime(s,r)):(this.control.linearRampToValueAtTime(this.rLevel,r),s=this.control.getValueAtTime(r),this.control.cancelScheduledValues(r),this.control.linearRampToValueAtTime(s,r)),this.wasTriggered=!1}},t.Envelope.prototype.ramp=function(t,i,n,o){var r=e.audiocontext.currentTime,s=i||0,a=r+s,u=this.checkExpInput(n),c="undefined"!=typeof o?this.checkExpInput(o):void 0;t&&this.connection!==t&&this.connect(t);var p=this.checkExpInput(this.control.getValueAtTime(a));u>p?(this.control.setTargetAtTime(u,a,this._rampAttackTC),a+=this._rampAttackTime):p>u&&(this.control.setTargetAtTime(u,a,this._rampDecayTC),a+=this._rampDecayTime),void 0!==c&&(c>u?this.control.setTargetAtTime(c,a,this._rampAttackTC):u>c&&this.control.setTargetAtTime(c,a,this._rampDecayTC))},t.Envelope.prototype.connect=function(i){this.connection=i,(i instanceof t.Oscillator||i instanceof t.SoundFile||i instanceof t.AudioIn||i instanceof t.Reverb||i instanceof t.Noise||i instanceof t.Filter||i instanceof t.Delay)&&(i=i.output.gain),i instanceof AudioParam&&i.setValueAtTime(0,e.audiocontext.currentTime),i instanceof t.Signal&&i.setValue(0),this.output.connect(i)},t.Envelope.prototype.disconnect=function(){this.output&&this.output.disconnect()},t.Envelope.prototype.add=function(e){var n=new i(e),o=this.mathOps.length,r=this.output;return t.prototype._mathChain(this,n,o,r,i)},t.Envelope.prototype.mult=function(e){var i=new n(e),o=this.mathOps.length,r=this.output;return t.prototype._mathChain(this,i,o,r,n)},t.Envelope.prototype.scale=function(e,i,n,r){var s=new o(e,i,n,r),a=this.mathOps.length,u=this.output;return t.prototype._mathChain(this,s,a,u,o)},t.Envelope.prototype.dispose=function(){var t=e.soundArray.indexOf(this);e.soundArray.splice(t,1),this.disconnect(),this.control&&(this.control.dispose(),this.control=null);for(var i=1;io;o++)n[o]=1;var r=t.createBufferSource();return r.buffer=e,r.loop=!0,r}var i=a;t.Pulse=function(n,o){t.Oscillator.call(this,n,"sawtooth"),this.w=o||0,this.osc2=new t.SawOsc(n),this.dNode=i.audiocontext.createDelay(),this.dcOffset=e(),this.dcGain=i.audiocontext.createGain(),this.dcOffset.connect(this.dcGain),this.dcGain.connect(this.output),this.f=n||440;var r=this.w/this.oscillator.frequency.value;this.dNode.delayTime.value=r,this.dcGain.gain.value=1.7*(.5-this.w),this.osc2.disconnect(),this.osc2.panner.disconnect(),this.osc2.amp(-1),this.osc2.output.connect(this.dNode),this.dNode.connect(this.output),this.output.gain.value=1,this.output.connect(this.panner)},t.Pulse.prototype=Object.create(t.Oscillator.prototype),t.Pulse.prototype.width=function(e){if("number"==typeof e){if(1>=e&&e>=0){this.w=e;var i=this.w/this.oscillator.frequency.value;this.dNode.delayTime.value=i}this.dcGain.gain.value=1.7*(.5-this.w)}else{e.connect(this.dNode.delayTime);var n=new t.SignalAdd(-.5);n.setInput(e),n=n.mult(-1),n=n.mult(1.7),n.connect(this.dcGain.gain)}},t.Pulse.prototype.start=function(t,n){var o=i.audiocontext.currentTime,r=n||0;if(!this.started){var s=t||this.f,a=this.oscillator.type;this.oscillator=i.audiocontext.createOscillator(),this.oscillator.frequency.setValueAtTime(s,o),this.oscillator.type=a,this.oscillator.connect(this.output),this.oscillator.start(r+o),this.osc2.oscillator=i.audiocontext.createOscillator(),this.osc2.oscillator.frequency.setValueAtTime(s,r+o),this.osc2.oscillator.type=a,this.osc2.oscillator.connect(this.osc2.output),this.osc2.start(r+o),this.freqNode=[this.oscillator.frequency,this.osc2.oscillator.frequency],this.dcOffset=e(),this.dcOffset.connect(this.dcGain),this.dcOffset.start(r+o),void 0!==this.mods&&void 0!==this.mods.frequency&&(this.mods.frequency.connect(this.freqNode[0]),this.mods.frequency.connect(this.freqNode[1])),this.started=!0,this.osc2.started=!0}},t.Pulse.prototype.stop=function(t){if(this.started){var e=t||0,n=i.audiocontext.currentTime;this.oscillator.stop(e+n),this.osc2.oscillator&&this.osc2.oscillator.stop(e+n),this.dcOffset.stop(e+n),this.started=!1,this.osc2.started=!1}},t.Pulse.prototype.freq=function(t,e,n){if("number"==typeof t){this.f=t;var o=i.audiocontext.currentTime,e=e||0,n=n||0,r=this.oscillator.frequency.value;this.oscillator.frequency.cancelScheduledValues(o),this.oscillator.frequency.setValueAtTime(r,o+n),this.oscillator.frequency.exponentialRampToValueAtTime(t,n+e+o),this.osc2.oscillator.frequency.cancelScheduledValues(o),this.osc2.oscillator.frequency.setValueAtTime(r,o+n),this.osc2.oscillator.frequency.exponentialRampToValueAtTime(t,n+e+o),this.freqMod&&(this.freqMod.output.disconnect(),this.freqMod=null)}else t.output&&(t.output.disconnect(),t.output.connect(this.oscillator.frequency),t.output.connect(this.osc2.oscillator.frequency),this.freqMod=t)}}(a,O);var V;V=function(){var e=a;t.Noise=function(e){var r;t.Oscillator.call(this),delete this.f,delete this.freq,delete this.oscillator,r="brown"===e?o:"pink"===e?n:i,this.buffer=r},t.Noise.prototype=Object.create(t.Oscillator.prototype);var i=function(){for(var t=2*e.audiocontext.sampleRate,i=e.audiocontext.createBuffer(1,t,e.audiocontext.sampleRate),n=i.getChannelData(0),o=0;t>o;o++)n[o]=2*Math.random()-1;return i.type="white",i}(),n=function(){var t,i,n,o,r,s,a,u=2*e.audiocontext.sampleRate,c=e.audiocontext.createBuffer(1,u,e.audiocontext.sampleRate),p=c.getChannelData(0);t=i=n=o=r=s=a=0;for(var h=0;u>h;h++){var l=2*Math.random()-1;t=.99886*t+.0555179*l,i=.99332*i+.0750759*l,n=.969*n+.153852*l,o=.8665*o+.3104856*l,r=.55*r+.5329522*l,s=-.7616*s-.016898*l,p[h]=t+i+n+o+r+s+a+.5362*l,p[h]*=.11,a=.115926*l}return c.type="pink",c}(),o=function(){for(var t=2*e.audiocontext.sampleRate,i=e.audiocontext.createBuffer(1,t,e.audiocontext.sampleRate),n=i.getChannelData(0),o=0,r=0;t>r;r++){var s=2*Math.random()-1;n[r]=(o+.02*s)/1.02,o=n[r],n[r]*=3.5}return i.type="brown",i}();t.Noise.prototype.setType=function(t){switch(t){case"white":this.buffer=i;break;case"pink":this.buffer=n;break;case"brown":this.buffer=o;break;default:this.buffer=i}if(this.started){var r=e.audiocontext.currentTime;this.stop(r),this.start(r+.01)}},t.Noise.prototype.getType=function(){return this.buffer.type},t.Noise.prototype.start=function(){this.started&&this.stop(),this.noise=e.audiocontext.createBufferSource(),this.noise.buffer=this.buffer,this.noise.loop=!0,this.noise.connect(this.output);var t=e.audiocontext.currentTime;this.noise.start(t),this.started=!0},t.Noise.prototype.stop=function(){var t=e.audiocontext.currentTime;this.noise&&(this.noise.stop(t),this.started=!1)},t.Noise.prototype.dispose=function(){var t=e.audiocontext.currentTime,i=e.soundArray.indexOf(this);e.soundArray.splice(i,1),this.noise&&(this.noise.disconnect(),this.stop(t)),this.output&&this.output.disconnect(),this.panner&&this.panner.disconnect(),this.output=null,this.panner=null,this.buffer=null,this.noise=null}}(a);var R;R=function(){var e=a;e.inputSources=[],t.AudioIn=function(i){this.input=e.audiocontext.createGain(),this.output=e.audiocontext.createGain(),this.stream=null,this.mediaStream=null,this.currentSource=null,this.enabled=!1,this.amplitude=new t.Amplitude,this.output.connect(this.amplitude.input),window.MediaStreamTrack&&window.navigator.mediaDevices&&window.navigator.mediaDevices.getUserMedia||(i?i():window.alert("This browser does not support MediaStreamTrack and mediaDevices")),e.soundArray.push(this)},t.AudioIn.prototype.start=function(t,i){var n=this;this.stream&&this.stop();var o=e.inputSources[n.currentSource],r={audio:{sampleRate:e.audiocontext.sampleRate,echoCancellation:!1}};e.inputSources[this.currentSource]&&(r.audio.deviceId=o.deviceId),window.navigator.mediaDevices.getUserMedia(r).then(function(i){n.stream=i,n.enabled=!0,n.mediaStream=e.audiocontext.createMediaStreamSource(i),n.mediaStream.connect(n.output),n.amplitude.setInput(n.output),t&&t()})["catch"](function(t){i?i(t):console.error(t)})},t.AudioIn.prototype.stop=function(){this.stream&&(this.stream.getTracks().forEach(function(t){t.stop()}),this.mediaStream.disconnect(),delete this.mediaStream,delete this.stream)},t.AudioIn.prototype.connect=function(t){t?t.hasOwnProperty("input")?this.output.connect(t.input):t.hasOwnProperty("analyser")?this.output.connect(t.analyser):this.output.connect(t):this.output.connect(e.input)},t.AudioIn.prototype.disconnect=function(){this.output&&(this.output.disconnect(),this.output.connect(this.amplitude.input))},t.AudioIn.prototype.getLevel=function(t){return t&&(this.amplitude.smoothing=t),this.amplitude.getLevel()},t.AudioIn.prototype.amp=function(t,i){if(i){var n=i||0,o=this.output.gain.value;this.output.gain.cancelScheduledValues(e.audiocontext.currentTime),this.output.gain.setValueAtTime(o,e.audiocontext.currentTime),this.output.gain.linearRampToValueAtTime(t,n+e.audiocontext.currentTime)}else this.output.gain.cancelScheduledValues(e.audiocontext.currentTime),this.output.gain.setValueAtTime(t,e.audiocontext.currentTime)},t.AudioIn.prototype.getSources=function(t,i){return new Promise(function(n,o){window.navigator.mediaDevices.enumerateDevices().then(function(i){e.inputSources=i.filter(function(t){return"audioinput"===t.kind}),n(e.inputSources),t&&t(e.inputSources)})["catch"](function(t){o(t),i?i(t):console.error("This browser does not support MediaStreamTrack.getSources()")})})},t.AudioIn.prototype.setSource=function(t){e.inputSources.length>0&&t=t?0:1},127),this._scale=this.input=new t.Multiply(1e4),this._scale.connect(this._thresh)},t.extend(t.GreaterThanZero,t.SignalBase),t.GreaterThanZero.prototype.dispose=function(){return t.prototype.dispose.call(this),this._scale.dispose(),this._scale=null,this._thresh.dispose(),this._thresh=null,this},t.GreaterThanZero}(n,S,A);var B;B=function(t){"use strict";return t.GreaterThan=function(e){this.createInsOuts(2,0),this._param=this.input[0]=new t.Subtract(e),this.input[1]=this._param.input[1],this._gtz=this.output=new t.GreaterThanZero,this._param.connect(this._gtz)},t.extend(t.GreaterThan,t.Signal),t.GreaterThan.prototype.dispose=function(){return t.prototype.dispose.call(this),this._param.dispose(),this._param=null,this._gtz.dispose(),this._gtz=null,this},t.GreaterThan}(n,N,D);var U;U=function(t){"use strict";return t.Abs=function(){this._abs=this.input=this.output=new t.WaveShaper(function(t){return 0===t?0:Math.abs(t)},127)},t.extend(t.Abs,t.SignalBase),t.Abs.prototype.dispose=function(){return t.prototype.dispose.call(this),this._abs.dispose(),this._abs=null,this},t.Abs}(n,m);var I;I=function(t){"use strict";return t.Modulo=function(e){this.createInsOuts(1,0),this._shaper=new t.WaveShaper(Math.pow(2,16)),this._multiply=new t.Multiply,this._subtract=this.output=new t.Subtract,this._modSignal=new t.Signal(e),this.input.fan(this._shaper,this._subtract),this._modSignal.connect(this._multiply,0,0),this._shaper.connect(this._multiply,0,1),this._multiply.connect(this._subtract,0,1),this._setWaveShaper(e)},t.extend(t.Modulo,t.SignalBase),t.Modulo.prototype._setWaveShaper=function(t){this._shaper.setMap(function(e){var i=Math.floor((e+1e-4)/t);return i;
+})},Object.defineProperty(t.Modulo.prototype,"value",{get:function(){return this._modSignal.value},set:function(t){this._modSignal.value=t,this._setWaveShaper(t)}}),t.Modulo.prototype.dispose=function(){return t.prototype.dispose.call(this),this._shaper.dispose(),this._shaper=null,this._multiply.dispose(),this._multiply=null,this._subtract.dispose(),this._subtract=null,this._modSignal.dispose(),this._modSignal=null,this},t.Modulo}(n,m,A);var G;G=function(t){"use strict";return t.Pow=function(e){this._exp=this.defaultArg(e,1),this._expScaler=this.input=this.output=new t.WaveShaper(this._expFunc(this._exp),8192)},t.extend(t.Pow,t.SignalBase),Object.defineProperty(t.Pow.prototype,"value",{get:function(){return this._exp},set:function(t){this._exp=t,this._expScaler.setMap(this._expFunc(this._exp))}}),t.Pow.prototype._expFunc=function(t){return function(e){return Math.pow(Math.abs(e),t)}},t.Pow.prototype.dispose=function(){return t.prototype.dispose.call(this),this._expScaler.dispose(),this._expScaler=null,this},t.Pow}(n);var L;L=function(t){"use strict";return t.AudioToGain=function(){this._norm=this.input=this.output=new t.WaveShaper(function(t){return(t+1)/2})},t.extend(t.AudioToGain,t.SignalBase),t.AudioToGain.prototype.dispose=function(){return t.prototype.dispose.call(this),this._norm.dispose(),this._norm=null,this},t.AudioToGain}(n,m);var j;j=function(t){"use strict";function e(t,e,i){var n=new t;return i._eval(e[0]).connect(n,0,0),i._eval(e[1]).connect(n,0,1),n}function i(t,e,i){var n=new t;return i._eval(e[0]).connect(n,0,0),n}function n(t){return t?parseFloat(t):void 0}function o(t){return t&&t.args?parseFloat(t.args):void 0}return t.Expr=function(){var t=this._replacements(Array.prototype.slice.call(arguments)),e=this._parseInputs(t);this._nodes=[],this.input=new Array(e);for(var i=0;e>i;i++)this.input[i]=this.context.createGain();var n,o=this._parseTree(t);try{n=this._eval(o)}catch(r){throw this._disposeNodes(),new Error("Tone.Expr: Could evaluate expression: "+t)}this.output=n},t.extend(t.Expr,t.SignalBase),t.Expr._Expressions={value:{signal:{regexp:/^\d+\.\d+|^\d+/,method:function(e){var i=new t.Signal(n(e));return i}},input:{regexp:/^\$\d/,method:function(t,e){return e.input[n(t.substr(1))]}}},glue:{"(":{regexp:/^\(/},")":{regexp:/^\)/},",":{regexp:/^,/}},func:{abs:{regexp:/^abs/,method:i.bind(this,t.Abs)},mod:{regexp:/^mod/,method:function(e,i){var n=o(e[1]),r=new t.Modulo(n);return i._eval(e[0]).connect(r),r}},pow:{regexp:/^pow/,method:function(e,i){var n=o(e[1]),r=new t.Pow(n);return i._eval(e[0]).connect(r),r}},a2g:{regexp:/^a2g/,method:function(e,i){var n=new t.AudioToGain;return i._eval(e[0]).connect(n),n}}},binary:{"+":{regexp:/^\+/,precedence:1,method:e.bind(this,t.Add)},"-":{regexp:/^\-/,precedence:1,method:function(n,o){return 1===n.length?i(t.Negate,n,o):e(t.Subtract,n,o)}},"*":{regexp:/^\*/,precedence:0,method:e.bind(this,t.Multiply)}},unary:{"-":{regexp:/^\-/,method:i.bind(this,t.Negate)},"!":{regexp:/^\!/,method:i.bind(this,t.NOT)}}},t.Expr.prototype._parseInputs=function(t){var e=t.match(/\$\d/g),i=0;if(null!==e)for(var n=0;n0;){e=e.trim();var r=i(e);o.push(r),e=e.substr(r.value.length)}return{next:function(){return o[++n]},peek:function(){return o[n+1]}}},t.Expr.prototype._parseTree=function(e){function i(t,e){return!p(t)&&"glue"===t.type&&t.value===e}function n(e,i,n){var o=!1,r=t.Expr._Expressions[i];if(!p(e))for(var s in r){var a=r[s];if(a.regexp.test(e.value)){if(p(n))return!0;if(a.precedence===n)return!0}}return o}function o(t){p(t)&&(t=5);var e;e=0>t?r():o(t-1);for(var i=c.peek();n(i,"binary",t);)i=c.next(),e={operator:i.value,method:i.method,args:[e,o(t-1)]},i=c.peek();return e}function r(){var t,e;return t=c.peek(),n(t,"unary")?(t=c.next(),e=r(),{operator:t.value,method:t.method,args:[e]}):s()}function s(){var t,e;if(t=c.peek(),p(t))throw new SyntaxError("Tone.Expr: Unexpected termination of expression");if("func"===t.type)return t=c.next(),a(t);if("value"===t.type)return t=c.next(),{method:t.method,args:t.value};if(i(t,"(")){if(c.next(),e=o(),t=c.next(),!i(t,")"))throw new SyntaxError("Expected )");return e}throw new SyntaxError("Tone.Expr: Parse error, cannot process token "+t.value)}function a(t){var e,n=[];if(e=c.next(),!i(e,"("))throw new SyntaxError('Tone.Expr: Expected ( in a function call "'+t.value+'"');if(e=c.peek(),i(e,")")||(n=u()),e=c.next(),!i(e,")"))throw new SyntaxError('Tone.Expr: Expected ) in a function call "'+t.value+'"');return{method:t.method,args:n,name:name}}function u(){for(var t,e,n=[];;){if(e=o(),p(e))break;if(n.push(e),t=c.peek(),!i(t,","))break;c.next()}return n}var c=this._tokenize(e),p=this.isUndef.bind(this);return o()},t.Expr.prototype._eval=function(t){if(!this.isUndef(t)){var e=t.method(t.args,this);return this._nodes.push(e),e}},t.Expr.prototype._disposeNodes=function(){for(var t=0;t0){this.connect(arguments[0]);for(var t=1;t=t&&(t=1),"number"==typeof t?(this.biquad.frequency.cancelScheduledValues(this.ac.currentTime+.01+i),this.biquad.frequency.exponentialRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.biquad.frequency),this.biquad.frequency.value},t.Filter.prototype.res=function(t,e){var i=e||0;return"number"==typeof t?(this.biquad.Q.value=t,this.biquad.Q.cancelScheduledValues(this.ac.currentTime+.01+i),this.biquad.Q.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.biquad.Q),this.biquad.Q.value},t.Filter.prototype.gain=function(t,e){var i=e||0;return"number"==typeof t?(this.biquad.gain.value=t,this.biquad.gain.cancelScheduledValues(this.ac.currentTime+.01+i),this.biquad.gain.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.biquad.gain),this.biquad.gain.value},t.Filter.prototype.toggle=function(){return this._on=!this._on,this._on===!0?this.biquad.type=this._untoggledType:this._on===!1&&(this.biquad.type="allpass"),this._on},t.Filter.prototype.setType=function(t){this.biquad.type=t,this._untoggledType=this.biquad.type},t.Filter.prototype.dispose=function(){e.prototype.dispose.apply(this),this.biquad&&(this.biquad.disconnect(),delete this.biquad)},t.LowPass=function(){t.Filter.call(this,"lowpass")},t.LowPass.prototype=Object.create(t.Filter.prototype),t.HighPass=function(){t.Filter.call(this,"highpass")},t.HighPass.prototype=Object.create(t.Filter.prototype),t.BandPass=function(){t.Filter.call(this,"bandpass")},t.BandPass.prototype=Object.create(t.Filter.prototype),t.Filter}(a,Y);var W;W=function(){var e=z,i=a,n=function(t,i){e.call(this,"peaking"),this.disconnect(),this.set(t,i),this.biquad.gain.value=0,delete this.input,delete this.output,delete this._drywet,delete this.wet};return n.prototype=Object.create(e.prototype),n.prototype.amp=function(){console.warn("`amp()` is not available for p5.EQ bands. Use `.gain()`")},n.prototype.drywet=function(){console.warn("`drywet()` is not available for p5.EQ bands.")},n.prototype.connect=function(e){var i=e||t.soundOut.input;this.biquad?this.biquad.connect(i.input?i.input:i):this.output.connect(i.input?i.input:i)},n.prototype.disconnect=function(){this.biquad&&this.biquad.disconnect()},n.prototype.dispose=function(){var t=i.soundArray.indexOf(this);i.soundArray.splice(t,1),this.disconnect(),delete this.biquad},n}(z,a);var Q;Q=function(){var e=Y,i=W;return t.EQ=function(t){e.call(this),t=3===t||8===t?t:3;var i;i=3===t?Math.pow(2,3):2,this.bands=[];for(var n,o,r=0;t>r;r++)r===t-1?(n=21e3,o=.01):0===r?(n=100,o=.1):1===r?(n=3===t?360*i:360,o=1):(n=this.bands[r-1].freq()*i,o=1),this.bands[r]=this._newBand(n,o),r>0?this.bands[r-1].connect(this.bands[r].biquad):this.input.connect(this.bands[r].biquad);this.bands[t-1].connect(this.output)},t.EQ.prototype=Object.create(e.prototype),t.EQ.prototype.process=function(t){t.connect(this.input)},t.EQ.prototype.set=function(){if(arguments.length===2*this.bands.length)for(var t=0;t0;)delete this.bands.pop().dispose();delete this.bands}},t.EQ}(Y,W);var H;H=function(){var e=Y;return t.Panner3D=function(){e.call(this),this.panner=this.ac.createPanner(),this.panner.panningModel="HRTF",this.panner.distanceModel="linear",this.panner.connect(this.output),this.input.connect(this.panner)},t.Panner3D.prototype=Object.create(e.prototype),t.Panner3D.prototype.process=function(t){t.connect(this.input)},t.Panner3D.prototype.set=function(t,e,i,n){return this.positionX(t,n),this.positionY(e,n),this.positionZ(i,n),[this.panner.positionX.value,this.panner.positionY.value,this.panner.positionZ.value]},t.Panner3D.prototype.positionX=function(t,e){var i=e||0;return"number"==typeof t?(this.panner.positionX.value=t,this.panner.positionX.cancelScheduledValues(this.ac.currentTime+.01+i),this.panner.positionX.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.panner.positionX),this.panner.positionX.value},t.Panner3D.prototype.positionY=function(t,e){var i=e||0;return"number"==typeof t?(this.panner.positionY.value=t,this.panner.positionY.cancelScheduledValues(this.ac.currentTime+.01+i),this.panner.positionY.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.panner.positionY),this.panner.positionY.value},t.Panner3D.prototype.positionZ=function(t,e){var i=e||0;return"number"==typeof t?(this.panner.positionZ.value=t,this.panner.positionZ.cancelScheduledValues(this.ac.currentTime+.01+i),this.panner.positionZ.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.panner.positionZ),this.panner.positionZ.value},t.Panner3D.prototype.orient=function(t,e,i,n){return this.orientX(t,n),this.orientY(e,n),this.orientZ(i,n),[this.panner.orientationX.value,this.panner.orientationY.value,this.panner.orientationZ.value]},t.Panner3D.prototype.orientX=function(t,e){var i=e||0;return"number"==typeof t?(this.panner.orientationX.value=t,this.panner.orientationX.cancelScheduledValues(this.ac.currentTime+.01+i),this.panner.orientationX.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.panner.orientationX),this.panner.orientationX.value},t.Panner3D.prototype.orientY=function(t,e){var i=e||0;return"number"==typeof t?(this.panner.orientationY.value=t,this.panner.orientationY.cancelScheduledValues(this.ac.currentTime+.01+i),this.panner.orientationY.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.panner.orientationY),this.panner.orientationY.value},t.Panner3D.prototype.orientZ=function(t,e){var i=e||0;return"number"==typeof t?(this.panner.orientationZ.value=t,this.panner.orientationZ.cancelScheduledValues(this.ac.currentTime+.01+i),this.panner.orientationZ.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.panner.orientationZ),this.panner.orientationZ.value},t.Panner3D.prototype.setFalloff=function(t,e){this.maxDist(t),this.rolloff(e)},t.Panner3D.prototype.maxDist=function(t){return"number"==typeof t&&(this.panner.maxDistance=t),this.panner.maxDistance},t.Panner3D.prototype.rolloff=function(t){return"number"==typeof t&&(this.panner.rolloffFactor=t),this.panner.rolloffFactor},t.Panner3D.dispose=function(){e.prototype.dispose.apply(this),this.panner&&(this.panner.disconnect(),delete this.panner)},t.Panner3D}(a,Y);var $;$=function(){var e=a;return t.Listener3D=function(t){this.ac=e.audiocontext,this.listener=this.ac.listener},t.Listener3D.prototype.process=function(t){t.connect(this.input)},t.Listener3D.prototype.position=function(t,e,i,n){return this.positionX(t,n),this.positionY(e,n),this.positionZ(i,n),[this.listener.positionX.value,this.listener.positionY.value,this.listener.positionZ.value]},t.Listener3D.prototype.positionX=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.positionX.value=t,this.listener.positionX.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.positionX.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.positionX),this.listener.positionX.value},t.Listener3D.prototype.positionY=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.positionY.value=t,this.listener.positionY.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.positionY.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.positionY),this.listener.positionY.value},t.Listener3D.prototype.positionZ=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.positionZ.value=t,this.listener.positionZ.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.positionZ.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.positionZ),this.listener.positionZ.value},t.Listener3D.prototype.orient=function(t,e,i,n,o,r,s){return 3===arguments.length||4===arguments.length?(s=arguments[3],this.orientForward(t,e,i,s)):(6===arguments.length||7===arguments)&&(this.orientForward(t,e,i),this.orientUp(n,o,r,s)),[this.listener.forwardX.value,this.listener.forwardY.value,this.listener.forwardZ.value,this.listener.upX.value,this.listener.upY.value,this.listener.upZ.value]},t.Listener3D.prototype.orientForward=function(t,e,i,n){return this.forwardX(t,n),this.forwardY(e,n),this.forwardZ(i,n),[this.listener.forwardX,this.listener.forwardY,this.listener.forwardZ]},t.Listener3D.prototype.orientUp=function(t,e,i,n){return this.upX(t,n),this.upY(e,n),this.upZ(i,n),[this.listener.upX,this.listener.upY,this.listener.upZ]},t.Listener3D.prototype.forwardX=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.forwardX.value=t,this.listener.forwardX.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.forwardX.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.forwardX),this.listener.forwardX.value},t.Listener3D.prototype.forwardY=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.forwardY.value=t,this.listener.forwardY.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.forwardY.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.forwardY),this.listener.forwardY.value},t.Listener3D.prototype.forwardZ=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.forwardZ.value=t,this.listener.forwardZ.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.forwardZ.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.forwardZ),this.listener.forwardZ.value},t.Listener3D.prototype.upX=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.upX.value=t,this.listener.upX.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.upX.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.upX),this.listener.upX.value},t.Listener3D.prototype.upY=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.upY.value=t,this.listener.upY.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.upY.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.upY),this.listener.upY.value},t.Listener3D.prototype.upZ=function(t,e){var i=e||0;return"number"==typeof t?(this.listener.upZ.value=t,this.listener.upZ.cancelScheduledValues(this.ac.currentTime+.01+i),this.listener.upZ.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):t&&t.connect(this.listener.upZ),this.listener.upZ.value},t.Listener3D}(a,Y);var J;J=function(){var e=z,i=Y;t.Delay=function(){i.call(this),this._split=this.ac.createChannelSplitter(2),this._merge=this.ac.createChannelMerger(2),this._leftGain=this.ac.createGain(),this._rightGain=this.ac.createGain(),this.leftDelay=this.ac.createDelay(),this.rightDelay=this.ac.createDelay(),this._leftFilter=new e,this._rightFilter=new e,this._leftFilter.disconnect(),this._rightFilter.disconnect(),this._leftFilter.biquad.frequency.setValueAtTime(1200,this.ac.currentTime),this._rightFilter.biquad.frequency.setValueAtTime(1200,this.ac.currentTime),this._leftFilter.biquad.Q.setValueAtTime(.3,this.ac.currentTime),this._rightFilter.biquad.Q.setValueAtTime(.3,this.ac.currentTime),this.input.connect(this._split),this.leftDelay.connect(this._leftGain),this.rightDelay.connect(this._rightGain),this._leftGain.connect(this._leftFilter.input),this._rightGain.connect(this._rightFilter.input),this._merge.connect(this.wet),this._leftFilter.biquad.gain.setValueAtTime(1,this.ac.currentTime),this._rightFilter.biquad.gain.setValueAtTime(1,this.ac.currentTime),this.setType(0),this._maxDelay=this.leftDelay.delayTime.maxValue,this.feedback(.5)},t.Delay.prototype=Object.create(i.prototype),t.Delay.prototype.process=function(t,e,i,n){var o=i||0,r=e||0;if(o>=1)throw new Error("Feedback value will force a positive feedback loop.");if(r>=this._maxDelay)throw new Error("Delay Time exceeds maximum delay time of "+this._maxDelay+" second.");t.connect(this.input),this.leftDelay.delayTime.setValueAtTime(r,this.ac.currentTime),this.rightDelay.delayTime.setValueAtTime(r,this.ac.currentTime),this._leftGain.gain.value=o,this._rightGain.gain.value=o,n&&(this._leftFilter.freq(n),this._rightFilter.freq(n))},t.Delay.prototype.delayTime=function(t){"number"!=typeof t?(t.connect(this.leftDelay.delayTime),t.connect(this.rightDelay.delayTime)):(this.leftDelay.delayTime.cancelScheduledValues(this.ac.currentTime),this.rightDelay.delayTime.cancelScheduledValues(this.ac.currentTime),this.leftDelay.delayTime.linearRampToValueAtTime(t,this.ac.currentTime),this.rightDelay.delayTime.linearRampToValueAtTime(t,this.ac.currentTime))},t.Delay.prototype.feedback=function(t){if(t&&"number"!=typeof t)t.connect(this._leftGain.gain),t.connect(this._rightGain.gain);else{if(t>=1)throw new Error("Feedback value will force a positive feedback loop.");"number"==typeof t&&(this._leftGain.gain.value=t,this._rightGain.gain.value=t)}return this._leftGain.gain.value},t.Delay.prototype.filter=function(t,e){this._leftFilter.set(t,e),this._rightFilter.set(t,e)},t.Delay.prototype.setType=function(t){switch(1===t&&(t="pingPong"),this._split.disconnect(),this._leftFilter.disconnect(),this._rightFilter.disconnect(),this._split.connect(this.leftDelay,0),this._split.connect(this.rightDelay,1),t){case"pingPong":this._rightFilter.setType(this._leftFilter.biquad.type),this._leftFilter.output.connect(this._merge,0,0),this._rightFilter.output.connect(this._merge,0,1),this._leftFilter.output.connect(this.rightDelay),this._rightFilter.output.connect(this.leftDelay);break;default:this._leftFilter.output.connect(this._merge,0,0),this._rightFilter.output.connect(this._merge,0,1),this._leftFilter.output.connect(this.leftDelay),this._rightFilter.output.connect(this.rightDelay)}},t.Delay.prototype.dispose=function(){i.prototype.dispose.apply(this),this._split.disconnect(),this._leftFilter.dispose(),this._rightFilter.dispose(),this._merge.disconnect(),this._leftGain.disconnect(),this._rightGain.disconnect(),this.leftDelay.disconnect(),this.rightDelay.disconnect(),this._split=void 0,this._leftFilter=void 0,this._rightFilter=void 0,this._merge=void 0,this._leftGain=void 0,this._rightGain=void 0,this.leftDelay=void 0,this.rightDelay=void 0}}(z,Y);var K;K=function(){var e=c,i=Y;t.Reverb=function(){i.call(this),this._initConvolverNode(),this.input.gain.value=.5,this._seconds=3,this._decay=2,this._reverse=!1,this._buildImpulse()},t.Reverb.prototype=Object.create(i.prototype),t.Reverb.prototype._initConvolverNode=function(){this.convolverNode=this.ac.createConvolver(),this.input.connect(this.convolverNode),this.convolverNode.connect(this.wet)},t.Reverb.prototype._teardownConvolverNode=function(){this.convolverNode&&(this.convolverNode.disconnect(),delete this.convolverNode)},t.Reverb.prototype._setBuffer=function(t){this._teardownConvolverNode(),this._initConvolverNode(),this.convolverNode.buffer=t},t.Reverb.prototype.process=function(t,e,i,n){t.connect(this.input);var o=!1;e&&(this._seconds=e,o=!0),i&&(this._decay=i),n&&(this._reverse=n),o&&this._buildImpulse()},t.Reverb.prototype.set=function(t,e,i){var n=!1;t&&(this._seconds=t,n=!0),e&&(this._decay=e),i&&(this._reverse=i),n&&this._buildImpulse()},t.Reverb.prototype._buildImpulse=function(){var t,e,i=this.ac.sampleRate,n=i*this._seconds,o=this._decay,r=this.ac.createBuffer(2,n,i),s=r.getChannelData(0),a=r.getChannelData(1);for(e=0;n>e;e++)t=this._reverse?n-e:e,s[e]=(2*Math.random()-1)*Math.pow(1-t/n,o),a[e]=(2*Math.random()-1)*Math.pow(1-t/n,o);this._setBuffer(r)},t.Reverb.prototype.dispose=function(){i.prototype.dispose.apply(this),this._teardownConvolverNode()},t.Convolver=function(e,i,n){t.Reverb.call(this),this._initConvolverNode(),this.input.gain.value=.5,e?(this.impulses=[],this._loadBuffer(e,i,n)):(this._seconds=3,this._decay=2,this._reverse=!1,this._buildImpulse())},t.Convolver.prototype=Object.create(t.Reverb.prototype),t.prototype.registerPreloadMethod("createConvolver",t.prototype),t.prototype.createConvolver=function(e,i,n){window.location.origin.indexOf("file://")>-1&&"undefined"===window.cordova&&alert("This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS");var o=this,r=new t.Convolver(e,function(t){"function"==typeof i&&i(t),"function"==typeof o._decrementPreload&&o._decrementPreload()},n);return r.impulses=[],r},t.Convolver.prototype._loadBuffer=function(i,n,o){var i=t.prototype._checkFileFormats(i),r=this,s=(new Error).stack,a=t.prototype.getAudioContext(),u=new XMLHttpRequest;u.open("GET",i,!0),u.responseType="arraybuffer",u.onload=function(){if(200===u.status)a.decodeAudioData(u.response,function(t){var e={},o=i.split("/");e.name=o[o.length-1],e.audioBuffer=t,r.impulses.push(e),r._setBuffer(e.audioBuffer),n&&n(e)},function(){var t=new e("decodeAudioData",s,r.url),i="AudioContext error at decodeAudioData for "+r.url;o?(t.msg=i,o(t)):console.error(i+"\n The error stack trace includes: \n"+t.stack)});else{var t=new e("loadConvolver",s,r.url),c="Unable to load "+r.url+". The request status was: "+u.status+" ("+u.statusText+")";o?(t.message=c,o(t)):console.error(c+"\n The error stack trace includes: \n"+t.stack)}},u.onerror=function(){var t=new e("loadConvolver",s,r.url),i="There was no response from the server at "+r.url+". Check the url and internet connectivity.";o?(t.message=i,o(t)):console.error(i+"\n The error stack trace includes: \n"+t.stack)},u.send()},t.Convolver.prototype.set=null,t.Convolver.prototype.process=function(t){t.connect(this.input)},t.Convolver.prototype.impulses=[],t.Convolver.prototype.addImpulse=function(t,e,i){window.location.origin.indexOf("file://")>-1&&"undefined"===window.cordova&&alert("This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS"),this._loadBuffer(t,e,i)},t.Convolver.prototype.resetImpulse=function(t,e,i){window.location.origin.indexOf("file://")>-1&&"undefined"===window.cordova&&alert("This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS"),this.impulses=[],this._loadBuffer(t,e,i)},t.Convolver.prototype.toggleImpulse=function(t){if("number"==typeof t&&tthis._nextTick&&this._state;){var s=this._state.getValueAtTime(this._nextTick);if(s!==this._lastState){this._lastState=s;var a=this._state.get(this._nextTick);s===t.State.Started?(this._nextTick=a.time,this.isUndef(a.offset)||(this.ticks=a.offset),this.emit("start",a.time,this.ticks)):s===t.State.Stopped?(this.ticks=0,this.emit("stop",a.time)):s===t.State.Paused&&this.emit("pause",a.time)}var u=this._nextTick;this.frequency&&(this._nextTick+=1/this.frequency.getValueAtTime(this._nextTick),s===t.State.Started&&(this.callback(u),this.ticks++))}},t.Clock.prototype.getStateAtTime=function(t){return t=this.toSeconds(t),this._state.getValueAtTime(t)},t.Clock.prototype.dispose=function(){t.Emitter.prototype.dispose.call(this),this.context.off("tick",this._boundLoop),this._writable("frequency"),this.frequency.dispose(),this.frequency=null,this._boundLoop=null,this._nextTick=1/0,this.callback=null,this._state.dispose(),this._state=null},t.Clock}(n,q,tt,o);var it;it=function(){var e=a,i=et;t.Metro=function(){this.clock=new i({callback:this.ontick.bind(this)}),this.syncedParts=[],this.bpm=120,this._init(),this.prevTick=0,this.tatumTime=0,this.tickCallback=function(){}},t.Metro.prototype.ontick=function(t){var i=t-this.prevTick,n=t-e.audiocontext.currentTime;if(!(i-this.tatumTime<=-.02)){this.prevTick=t;var o=this;this.syncedParts.forEach(function(t){t.isPlaying&&(t.incrementStep(n),t.phrases.forEach(function(t){var e=t.sequence,i=o.metroTicks%e.length;0!==e[i]&&(o.metroTicks=t.parts.length?(t.scoreStep=0,t.onended()):(t.scoreStep=0,t.parts[t.currentPart-1].stop(),t.parts[t.currentPart].start())}var i=a,n=120;t.prototype.setBPM=function(t,e){n=t;for(var o in i.parts)i.parts[o]&&i.parts[o].setBPM(t,e)},t.Phrase=function(t,e,i){this.phraseStep=0,this.name=t,this.callback=e,this.sequence=i},t.Part=function(e,o){this.length=e||0,this.partStep=0,
+this.phrases=[],this.isPlaying=!1,this.noLoop(),this.tatums=o||.0625,this.metro=new t.Metro,this.metro._init(),this.metro.beatLength(this.tatums),this.metro.setBPM(n),i.parts.push(this),this.callback=function(){}},t.Part.prototype.setBPM=function(t,e){this.metro.setBPM(t,e)},t.Part.prototype.getBPM=function(){return this.metro.getBPM()},t.Part.prototype.start=function(t){if(!this.isPlaying){this.isPlaying=!0,this.metro.resetSync(this);var e=t||0;this.metro.start(e)}},t.Part.prototype.loop=function(t){this.looping=!0,this.onended=function(){this.partStep=0};var e=t||0;this.start(e)},t.Part.prototype.noLoop=function(){this.looping=!1,this.onended=function(){this.stop()}},t.Part.prototype.stop=function(t){this.partStep=0,this.pause(t)},t.Part.prototype.pause=function(t){this.isPlaying=!1;var e=t||0;this.metro.stop(e)},t.Part.prototype.addPhrase=function(e,i,n){var o;if(3===arguments.length)o=new t.Phrase(e,i,n);else{if(!(arguments[0]instanceof t.Phrase))throw"invalid input. addPhrase accepts name, callback, array or a p5.Phrase";o=arguments[0]}this.phrases.push(o),o.sequence.length>this.length&&(this.length=o.sequence.length)},t.Part.prototype.removePhrase=function(t){for(var e in this.phrases)this.phrases[e].name===t&&this.phrases.splice(e,1)},t.Part.prototype.getPhrase=function(t){for(var e in this.phrases)if(this.phrases[e].name===t)return this.phrases[e]},t.Part.prototype.replaceSequence=function(t,e){for(var i in this.phrases)this.phrases[i].name===t&&(this.phrases[i].sequence=e)},t.Part.prototype.incrementStep=function(t){this.partStep0&&o.iterations<=o.maxIterations&&o.callback(i)},frequency:this._calcFreq()})},t.SoundLoop.prototype.start=function(t){var i=t||0,n=e.audiocontext.currentTime;this.isPlaying||(this.clock.start(n+i),this.isPlaying=!0)},t.SoundLoop.prototype.stop=function(t){var i=t||0,n=e.audiocontext.currentTime;this.isPlaying&&(this.clock.stop(n+i),this.isPlaying=!1)},t.SoundLoop.prototype.pause=function(t){var i=t||0,n=e.audiocontext.currentTime;this.isPlaying&&(this.clock.pause(n+i),this.isPlaying=!1)},t.SoundLoop.prototype.syncedStart=function(t,i){var n=i||0,o=e.audiocontext.currentTime;if(t.isPlaying){if(t.isPlaying){var r=t.clock._nextTick-e.audiocontext.currentTime;this.clock.start(o+r),this.isPlaying=!0}}else t.clock.start(o+n),t.isPlaying=!0,this.clock.start(o+n),this.isPlaying=!0},t.SoundLoop.prototype._update=function(){this.clock.frequency.value=this._calcFreq()},t.SoundLoop.prototype._calcFreq=function(){return"number"==typeof this._interval?(this.musicalTimeMode=!1,1/this._interval):"string"==typeof this._interval?(this.musicalTimeMode=!0,this._bpm/60/this._convertNotation(this._interval)*(this._timeSignature/4)):void 0},t.SoundLoop.prototype._convertNotation=function(t){var e=t.slice(-1);switch(t=Number(t.slice(0,-1)),e){case"m":return this._measure(t);case"n":return this._note(t);default:console.warn("Specified interval is not formatted correctly. See Tone.js timing reference for more info: https://github.com/Tonejs/Tone.js/wiki/Time")}},t.SoundLoop.prototype._measure=function(t){return t*this._timeSignature},t.SoundLoop.prototype._note=function(t){return this._timeSignature/t},Object.defineProperty(t.SoundLoop.prototype,"bpm",{get:function(){return this._bpm},set:function(t){this.musicalTimeMode||console.warn('Changing the BPM in "seconds" mode has no effect. BPM is only relevant in musicalTimeMode when the interval is specified as a string ("2n", "4n", "1m"...etc)'),this._bpm=t,this._update()}}),Object.defineProperty(t.SoundLoop.prototype,"timeSignature",{get:function(){return this._timeSignature},set:function(t){this.musicalTimeMode||console.warn('Changing the timeSignature in "seconds" mode has no effect. BPM is only relevant in musicalTimeMode when the interval is specified as a string ("2n", "4n", "1m"...etc)'),this._timeSignature=t,this._update()}}),Object.defineProperty(t.SoundLoop.prototype,"interval",{get:function(){return this._interval},set:function(t){this.musicalTimeMode="Number"==typeof t?!1:!0,this._interval=t,this._update()}}),Object.defineProperty(t.SoundLoop.prototype,"iterations",{get:function(){return this.clock.ticks}}),t.SoundLoop}(a,et);var rt;rt=function(){"use strict";var e=Y;return t.Compressor=function(){e.call(this),this.compressor=this.ac.createDynamicsCompressor(),this.input.connect(this.compressor),this.compressor.connect(this.wet)},t.Compressor.prototype=Object.create(e.prototype),t.Compressor.prototype.process=function(t,e,i,n,o,r){t.connect(this.input),this.set(e,i,n,o,r)},t.Compressor.prototype.set=function(t,e,i,n,o){"undefined"!=typeof t&&this.attack(t),"undefined"!=typeof e&&this.knee(e),"undefined"!=typeof i&&this.ratio(i),"undefined"!=typeof n&&this.threshold(n),"undefined"!=typeof o&&this.release(o)},t.Compressor.prototype.attack=function(t,e){var i=e||0;return"number"==typeof t?(this.compressor.attack.value=t,this.compressor.attack.cancelScheduledValues(this.ac.currentTime+.01+i),this.compressor.attack.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):"undefined"!=typeof t&&t.connect(this.compressor.attack),this.compressor.attack.value},t.Compressor.prototype.knee=function(t,e){var i=e||0;return"number"==typeof t?(this.compressor.knee.value=t,this.compressor.knee.cancelScheduledValues(this.ac.currentTime+.01+i),this.compressor.knee.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):"undefined"!=typeof t&&t.connect(this.compressor.knee),this.compressor.knee.value},t.Compressor.prototype.ratio=function(t,e){var i=e||0;return"number"==typeof t?(this.compressor.ratio.value=t,this.compressor.ratio.cancelScheduledValues(this.ac.currentTime+.01+i),this.compressor.ratio.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):"undefined"!=typeof t&&t.connect(this.compressor.ratio),this.compressor.ratio.value},t.Compressor.prototype.threshold=function(t,e){var i=e||0;return"number"==typeof t?(this.compressor.threshold.value=t,this.compressor.threshold.cancelScheduledValues(this.ac.currentTime+.01+i),this.compressor.threshold.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):"undefined"!=typeof t&&t.connect(this.compressor.threshold),this.compressor.threshold.value},t.Compressor.prototype.release=function(t,e){var i=e||0;return"number"==typeof t?(this.compressor.release.value=t,this.compressor.release.cancelScheduledValues(this.ac.currentTime+.01+i),this.compressor.release.linearRampToValueAtTime(t,this.ac.currentTime+.02+i)):"undefined"!=typeof number&&t.connect(this.compressor.release),this.compressor.release.value},t.Compressor.prototype.reduction=function(){return this.compressor.reduction.value},t.Compressor.prototype.dispose=function(){e.prototype.dispose.apply(this),this.compressor&&(this.compressor.disconnect(),delete this.compressor)},t.Compressor}(a,Y,c);var st;st=function(){var e=a,i=u.convertToWav,n=e.audiocontext;t.SoundRecorder=function(){this.input=n.createGain(),this.output=n.createGain(),this.recording=!1,this.bufferSize=1024,this._channels=2,this._clear(),this._jsNode=n.createScriptProcessor(this.bufferSize,this._channels,2),this._jsNode.onaudioprocess=this._audioprocess.bind(this),this._callback=function(){},this._jsNode.connect(t.soundOut._silentNode),this.setInput(),e.soundArray.push(this)},t.SoundRecorder.prototype.setInput=function(e){this.input.disconnect(),this.input=null,this.input=n.createGain(),this.input.connect(this._jsNode),this.input.connect(this.output),e?e.connect(this.input):t.soundOut.output.connect(this.input)},t.SoundRecorder.prototype.record=function(t,e,i){this.recording=!0,e&&(this.sampleLimit=Math.round(e*n.sampleRate)),t&&i?this._callback=function(){this.buffer=this._getBuffer(),t.setBuffer(this.buffer),i()}:t&&(this._callback=function(){this.buffer=this._getBuffer(),t.setBuffer(this.buffer)})},t.SoundRecorder.prototype.stop=function(){this.recording=!1,this._callback(),this._clear()},t.SoundRecorder.prototype._clear=function(){this._leftBuffers=[],this._rightBuffers=[],this.recordedSamples=0,this.sampleLimit=null},t.SoundRecorder.prototype._audioprocess=function(t){if(this.recording!==!1&&this.recording===!0)if(this.sampleLimit&&this.recordedSamples>=this.sampleLimit)this.stop();else{var e=t.inputBuffer.getChannelData(0),i=t.inputBuffer.getChannelData(1);this._leftBuffers.push(new Float32Array(e)),this._rightBuffers.push(new Float32Array(i)),this.recordedSamples+=this.bufferSize}},t.SoundRecorder.prototype._getBuffer=function(){var t=[];return t.push(this._mergeBuffers(this._leftBuffers)),t.push(this._mergeBuffers(this._rightBuffers)),t},t.SoundRecorder.prototype._mergeBuffers=function(t){for(var e=new Float32Array(this.recordedSamples),i=0,n=t.length,o=0;n>o;o++){var r=t[o];e.set(r,i),i+=r.length}return e},t.SoundRecorder.prototype.dispose=function(){this._clear();var t=e.soundArray.indexOf(this);e.soundArray.splice(t,1),this._callback=function(){},this.input&&this.input.disconnect(),this.input=null,this._jsNode=null},t.prototype.saveSound=function(e,n){const o=i(e.buffer);t.prototype.writeFile([o],n,"wav")}}(a,u);var at;at=function(){t.PeakDetect=function(t,e,i,n){this.framesPerPeak=n||20,this.framesSinceLastPeak=0,this.decayRate=.95,this.threshold=i||.35,this.cutoff=0,this.cutoffMult=1.5,this.energy=0,this.penergy=0,this.currentValue=0,this.isDetected=!1,this.f1=t||40,this.f2=e||2e4,this._onPeak=function(){}},t.PeakDetect.prototype.update=function(t){var e=this.energy=t.getEnergy(this.f1,this.f2)/255;e>this.cutoff&&e>this.threshold&&e-this.penergy>0?(this._onPeak(),this.isDetected=!0,this.cutoff=e*this.cutoffMult,this.framesSinceLastPeak=0):(this.isDetected=!1,this.framesSinceLastPeak<=this.framesPerPeak?this.framesSinceLastPeak++:(this.cutoff*=this.decayRate,this.cutoff=Math.max(this.cutoff,this.threshold))),this.currentValue=e,this.penergy=e},t.PeakDetect.prototype.onPeak=function(t,e){var i=this;i._onPeak=function(){t(i.energy,e)}}}();var ut;ut=function(){var e=a;t.Gain=function(){this.ac=e.audiocontext,this.input=this.ac.createGain(),this.output=this.ac.createGain(),this.input.gain.value=.5,this.input.connect(this.output),e.soundArray.push(this)},t.Gain.prototype.setInput=function(t){t.connect(this.input)},t.Gain.prototype.connect=function(e){var i=e||t.soundOut.input;this.output.connect(i.input?i.input:i)},t.Gain.prototype.disconnect=function(){this.output&&this.output.disconnect()},t.Gain.prototype.amp=function(t,i,n){var i=i||0,n=n||0,o=e.audiocontext.currentTime,r=this.output.gain.value;this.output.gain.cancelScheduledValues(o),this.output.gain.linearRampToValueAtTime(r,o+n),this.output.gain.linearRampToValueAtTime(t,o+n+i)},t.Gain.prototype.dispose=function(){var t=e.soundArray.indexOf(this);e.soundArray.splice(t,1),this.output&&(this.output.disconnect(),delete this.output),this.input&&(this.input.disconnect(),delete this.input)}}(a);var ct;ct=function(){var e=a;return t.AudioVoice=function(){this.ac=e.audiocontext,this.output=this.ac.createGain(),this.connect(),e.soundArray.push(this)},t.AudioVoice.prototype.play=function(t,e,i,n){},t.AudioVoice.prototype.triggerAttack=function(t,e,i){},t.AudioVoice.prototype.triggerRelease=function(t){},t.AudioVoice.prototype.amp=function(t,e){},t.AudioVoice.prototype.connect=function(t){var i=t||e.input;this.output.connect(i.input?i.input:i)},t.AudioVoice.prototype.disconnect=function(){this.output.disconnect()},t.AudioVoice.prototype.dispose=function(){this.output&&(this.output.disconnect(),delete this.output)},t.AudioVoice}(a);var pt;pt=function(){var e=a,i=ct,n=u.noteToFreq,o=.15;t.MonoSynth=function(){i.call(this),this.oscillator=new t.Oscillator,this.env=new t.Envelope,this.env.setRange(1,0),this.env.setExp(!0),this.setADSR(.02,.25,.05,.35),this.oscillator.disconnect(),this.oscillator.connect(this.output),this.env.disconnect(),this.env.setInput(this.output.gain),this.oscillator.output.gain.value=1,this.oscillator.start(),this.connect(),e.soundArray.push(this)},t.MonoSynth.prototype=Object.create(t.AudioVoice.prototype),t.MonoSynth.prototype.play=function(t,e,i,n){this.triggerAttack(t,e,~~i),this.triggerRelease(~~i+(n||o))},t.MonoSynth.prototype.triggerAttack=function(t,e,i){var i=~~i,o=n(t),r=e||.1;this.oscillator.freq(o,0,i),this.env.ramp(this.output.gain,i,r)},t.MonoSynth.prototype.triggerRelease=function(t){var t=t||0;this.env.ramp(this.output.gain,t,0)},t.MonoSynth.prototype.setADSR=function(t,e,i,n){this.env.setADSR(t,e,i,n)},Object.defineProperties(t.MonoSynth.prototype,{attack:{get:function(){return this.env.aTime},set:function(t){this.env.setADSR(t,this.env.dTime,this.env.sPercent,this.env.rTime)}},decay:{get:function(){return this.env.dTime},set:function(t){this.env.setADSR(this.env.aTime,t,this.env.sPercent,this.env.rTime)}},sustain:{get:function(){return this.env.sPercent},set:function(t){this.env.setADSR(this.env.aTime,this.env.dTime,t,this.env.rTime)}},release:{get:function(){return this.env.rTime},set:function(t){this.env.setADSR(this.env.aTime,this.env.dTime,this.env.sPercent,t)}}}),t.MonoSynth.prototype.amp=function(t,e){var i=e||0;return"undefined"!=typeof t&&this.oscillator.amp(t,i),this.oscillator.amp().value},t.MonoSynth.prototype.connect=function(t){var i=t||e.input;this.output.connect(i.input?i.input:i)},t.MonoSynth.prototype.disconnect=function(){this.output&&this.output.disconnect()},t.MonoSynth.prototype.dispose=function(){i.prototype.dispose.apply(this),this.env&&this.env.dispose(),this.oscillator&&this.oscillator.dispose()}}(a,ct,u);var ht;ht=function(){var e=a,i=q,n=u.noteToFreq;t.PolySynth=function(n,o){this.audiovoices=[],this.notes={},this._newest=0,this._oldest=0,this.maxVoices=o||8,this.AudioVoice=void 0===n?t.MonoSynth:n,this._voicesInUse=new i(0),this.output=e.audiocontext.createGain(),this.connect(),this._allocateVoices(),e.soundArray.push(this)},t.PolySynth.prototype._allocateVoices=function(){for(var t=0;tf?f:p}this.audiovoices[a].triggerAttack(c,p,s)},t.PolySynth.prototype._updateAfter=function(t,e){if(null!==this._voicesInUse._searchAfter(t)){this._voicesInUse._searchAfter(t).value+=e;var i=this._voicesInUse._searchAfter(t).time;this._updateAfter(i,e)}},t.PolySynth.prototype.noteRelease=function(t,i){var o=e.audiocontext.currentTime,r=i||0,s=o+r;if(t){var a=n(t);if(this.notes[a]&&null!==this.notes[a].getValueAtTime(s)){var u=Math.max(~~this._voicesInUse.getValueAtTime(s).value,1);this._voicesInUse.setValueAtTime(u-1,s),u>0&&this._updateAfter(s,-1),this.audiovoices[this.notes[a].getValueAtTime(s)].triggerRelease(r),this.notes[a].dispose(),delete this.notes[a],this._newest=0===this._newest?0:(this._newest-1)%(this.maxVoices-1)}else console.warn("Cannot release a note that is not already playing")}else{this.audiovoices.forEach(function(t){t.triggerRelease(r)}),this._voicesInUse.setValueAtTime(0,s);for(var c in this.notes)this.notes[c].dispose(),delete this.notes[c]}},t.PolySynth.prototype.connect=function(t){var i=t||e.input;this.output.connect(i.input?i.input:i)},t.PolySynth.prototype.disconnect=function(){this.output&&this.output.disconnect()},t.PolySynth.prototype.dispose=function(){this.audiovoices.forEach(function(t){t.dispose()}),this.output&&(this.output.disconnect(),delete this.output)}}(a,q,u);var lt;lt=function(){function e(t){for(var e,i="number"==typeof t?t:50,n=44100,o=new Float32Array(n),r=Math.PI/180,s=0;n>s;++s)e=2*s/n-1,o[s]=(3+i)*e*20*r/(Math.PI+i*Math.abs(e));return o}var i=Y;t.Distortion=function(n,o){if(i.call(this),"undefined"==typeof n&&(n=.25),"number"!=typeof n)throw new Error("amount must be a number");if("undefined"==typeof o&&(o="2x"),"string"!=typeof o)throw new Error("oversample must be a String");var r=t.prototype.map(n,0,1,0,2e3);this.waveShaperNode=this.ac.createWaveShaper(),this.amount=r,this.waveShaperNode.curve=e(r),this.waveShaperNode.oversample=o,this.input.connect(this.waveShaperNode),this.waveShaperNode.connect(this.wet)},t.Distortion.prototype=Object.create(i.prototype),t.Distortion.prototype.process=function(t,e,i){t.connect(this.input),this.set(e,i)},t.Distortion.prototype.set=function(i,n){if(i){var o=t.prototype.map(i,0,1,0,2e3);this.amount=o,this.waveShaperNode.curve=e(o)}n&&(this.waveShaperNode.oversample=n)},t.Distortion.prototype.getAmount=function(){return this.amount},t.Distortion.prototype.getOversample=function(){return this.waveShaperNode.oversample},t.Distortion.prototype.dispose=function(){i.prototype.dispose.apply(this),this.waveShaperNode&&(this.waveShaperNode.disconnect(),this.waveShaperNode=null)}}(Y);var ft;ft=function(){var t=a;return t}(e,s,a,u,c,p,h,l,f,k,O,M,E,V,R,z,Q,H,$,J,K,it,nt,ot,rt,st,at,ut,pt,ht,lt,ct,pt,ht)});
\ No newline at end of file
diff --git a/estudiantes/01-SofiaAbarca/clase-15/sketch.js b/estudiantes/01-SofiaAbarca/clase-15/sketch.js
new file mode 100644
index 00000000..ea6a9a7d
--- /dev/null
+++ b/estudiantes/01-SofiaAbarca/clase-15/sketch.js
@@ -0,0 +1,88 @@
+// Examen para el ramo de programación creativa multimedia
+// Usar el concepto de prueba y error para crear texturas a partir
+// de una imagen "corrompida"
+// Se puede mantener el click pulsado para modificar pixeles
+
+// crear 4 variables de posición que usaremos mas adelante
+let x = 200;
+let y = 200;
+let a = 400;
+let b = 400;
+let c = 30;
+let d = 30;
+
+// precargar las imágenes: la faad y tres módulos distintos
+// https://p5js.org/es/reference/#/p5/preload
+function preload() {
+ faad = loadImage("faad.jpg");
+ grafico = loadImage("./grafico.jpg");
+ industrial = loadImage("./industrial.jpg");
+ moda = loadImage("./moda.jpg");
+}
+
+function setup() {
+ // crear el lienzo de 600x600 pixeles
+ createCanvas(600, 600);
+
+ // Decide cuantos fotogramas vemos en un segundo
+ // https://p5js.org/es/reference/#/p5/frameRate
+ frameRate(10);
+
+ // Dibuja la foto como el fondo del lienzo, del mismo tamaño de este
+ // https://p5js.org/es/reference/#/p5/background
+ background(faad, 0, 0, width, height);
+}
+
+function draw() {
+ // Push y Pop permiten hacer "grupos" de estilo, donde puedo hacer tranformaciones y luego volver a lo que tenía
+ // https://p5js.org/es/reference/#/p5/push
+ push();
+
+ // blendMode combina los pixeles de la imagen según el modo que se elige, en este caso, EXCLUSION resta la diferencia entre capas por cada canal, invirtiendo los valores positivos y negativos resultantes.
+ // https://p5js.org/es/reference/#/p5/blendMode
+ // https://helpx.adobe.com/cl/photoshop/using/blending-modes.html
+ blendMode(EXCLUSION);
+ // la posición x de la foto cambia de manera aleatoria entre -30 y 30 pixeles
+ // https://p5js.org/es/reference/#/p5/random
+ x += random(-30, 30);
+
+ // la posición y de la foto cambia de manera aleatoria entre -30 y 30 pixeles
+ // https://p5js.org/es/reference/#/p5/random
+ y += random(-30, 30);
+
+ // se dibuja la imagen en lugares aleatorios con tamaño 50x50 pixeles
+ image(grafico, x, y, 50, 50);
+ pop();
+
+ push();
+ // el modo de fusión SOFT LIGHT
+ blendMode(SOFT_LIGHT);
+ a += random(-30, 30);
+ b += random(-30, 30);
+ image(industrial, a, b, 80, 80);
+ pop();
+
+ push();
+ // el modo overlay
+ blendMode(OVERLAY);
+ c += random(-30, 30);
+ d += random(-30, 30);
+ image(moda, c, d, 40, 40);
+ pop();
+
+ // si se mantiene el click pulsado ocurre una acción
+ // https://p5js.org/es/reference/#/p5/mouseIsPressed
+ if (mouseIsPressed) {
+ // define el ancho aleatorio entre 40 y 50 pixeles que selecciona el mouse
+ const randWidth = int(random(40, 50));
+
+ // define la altura aleatoria entre 30 y 80 pixeles que selecciona el mouse
+ const randHeight = int(random(30, 80));
+
+ // copia los pixeles debajo del mouse usando las primeras coordenadas, y luego los dibuja siguiendo las segundas coordenadas
+ // https://p5js.org/es/reference/#/p5.Image/copy
+ // https://p5js.org/es/reference/#/p5/mouseX
+ // https://p5js.org/es/reference/#/p5/mouseY
+ copy(faad, mouseX, mouseY, 1, randHeight, mouseX, mouseY, randWidth, randHeight);
+ }
+}
diff --git a/estudiantes/01-SofiaAbarca/clase-15/style.css b/estudiantes/01-SofiaAbarca/clase-15/style.css
new file mode 100644
index 00000000..9386f1c2
--- /dev/null
+++ b/estudiantes/01-SofiaAbarca/clase-15/style.css
@@ -0,0 +1,7 @@
+html, body {
+ margin: 0;
+ padding: 0;
+}
+canvas {
+ display: block;
+}
