describe(text, LABEL) displays
* the description to all users as a
* tombstone or exhibit label/caption in a
* <div class="p5Label"></div>
* adjacent to the canvas. You can style it as you wish in your CSS.
*
* describe(text, FALLBACK) makes the
* description accessible to screen-reader users only, in
*
* a sub DOM inside the canvas element. If a second parameter is not
* specified, by default, the description will only be available to
* screen-reader users.
*
* @method describe
* @param {String} text description of the canvas
* @param {Constant} [display] either LABEL or FALLBACK (Optional)
*
* @example
*
*
*
*
* describe('pink square with red heart in the bottom right corner', LABEL);
* background('pink');
* fill('red');
* noStroke();
* ellipse(67, 67, 20, 20);
* ellipse(83, 67, 20, 20);
* triangle(91, 73, 75, 95, 59, 73);
*
*
*
*
*/ _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);
}
}
};
/**
* This function creates a screen-reader accessible
* description for elements —shapes or groups of shapes that create
* meaning together— in the canvas. The first paramater should
* be the name of the element. The second parameter should be a string
* with a description of the element. The third parameter is optional.
* If specified, it determines how the element description is displayed.
*
*
* let x = 0;
* function draw() {
* if (x > 100) {
* x = 0;
* }
* background(220);
* fill(0, 255, 0);
* ellipse(x, 50, 40, 40);
* x = x + 0.1;
* describe('green circle at x pos ' + round(x) + ' moving to the right');
* }
*
* describeElement(name, text, LABEL)
* displays the element description to all users as a
*
* tombstone or exhibit label/caption in a
* <div class="p5Label"></div>
* adjacent to the canvas. You can style it as you wish in your CSS.
*
* describeElement(name, text, FALLBACK)
* makes the element description accessible to screen-reader users
* only, in
* a sub DOM inside the canvas element. If a second parameter is not
* specified, by default, the element description will only be available
* to screen-reader users.
*
* @method describeElement
* @param {String} name name of the element
* @param {String} text description of the element
* @param {Constant} [display] either LABEL or FALLBACK (Optional)
*
* @example
*
*
*/
_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 = '
* describe('Heart and yellow circle over pink background', LABEL);
* noStroke();
* background('pink');
* describeElement('Circle', 'Yellow circle in the top left corner', LABEL);
* fill('yellow');
* ellipse(25, 25, 40, 40);
* describeElement('Heart', 'red heart in the bottom right corner', LABEL);
* fill('red');
* ellipse(66.6, 66.6, 20, 20);
* ellipse(83.2, 66.6, 20, 20);
* triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
*
* ');
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 = 'textOutput() creates a screenreader
* accessible output that describes the shapes present on the canvas.
* The general description of the canvas includes canvas size,
* canvas color, and number of elements in the canvas
* (example: 'Your output is a, 400 by 400 pixels, lavender blue
* canvas containing the following 4 shapes:'). This description
* is followed by a list of shapes where the color, position, and area
* of each shape are described (example: "orange ellipse at top left
* covering 1% of the canvas"). Each element can be selected to get
* more details. A table of elements is also provided. In this table,
* shape, color, location, coordinates and area are described
* (example: "orange ellipse location=top left area=2").
*
* textOutput() and texOutput(FALLBACK)
* make the output available in
* a sub DOM inside the canvas element which is accessible to screen readers.
* textOutput(LABEL) creates an
* additional div with the output adjacent to the canvas, this is useful
* for non-screen reader users that might want to display the output outside
* of the canvas' sub DOM as they code. However, using LABEL will create
* unnecessary redundancy for screen reader users. We recommend using LABEL
* only as part of the development process of a sketch and removing it before
* publishing or sharing with screen reader users.
*
* @method textOutput
* @param {Constant} [display] either FALLBACK or LABEL (Optional)
*
* @example
*
*
*
*
*
* textOutput();
* background(148, 196, 0);
* fill(255, 0, 0);
* ellipse(20, 20, 20, 20);
* fill(0, 0, 255);
* rect(50, 50, 50, 50);
*
*
*
*
*/ _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');
}
}
};
/**
*
* let x = 0;
* function draw() {
* textOutput();
* background(148, 196, 0);
* fill(255, 0, 0);
* ellipse(x, 20, 20, 20);
* fill(0, 0, 255);
* rect(50, 50, 50, 50);
* ellipse(20, 20, 20, 20);
* x += 0.1;
* }
*
* gridOutput() lays out the
* content of the canvas in the form of a grid (html table) based
* on the spatial location of each shape. A brief
* description of the canvas is available before the table output.
* This description includes: color of the background, size of the canvas,
* number of objects, and object types (example: "lavender blue canvas is
* 200 by 200 and contains 4 objects - 3 ellipses 1 rectangle"). The grid
* describes the content spatially, each element is placed on a cell of the
* table depending on its position. Within each cell an element the color
* and type of shape of that element are available (example: "orange ellipse").
* These descriptions can be selected individually to get more details.
* A list of elements where shape, color, location, and area are described
* (example: "orange ellipse location=top left area=1%") is also available.
*
* gridOutput() and gridOutput(FALLBACK)
* make the output available in
* a sub DOM inside the canvas element which is accessible to screen readers.
* gridOutput(LABEL) creates an
* additional div with the output adjacent to the canvas, this is useful
* for non-screen reader users that might want to display the output outside
* of the canvas' sub DOM as they code. However, using LABEL will create
* unnecessary redundancy for screen reader users. We recommend using LABEL
* only as part of the development process of a sketch and removing it before
* publishing or sharing with screen reader users.
*
* @method gridOutput
* @param {Constant} [display] either FALLBACK or LABEL (Optional)
*
* @example
*
*
*
*
*
* gridOutput();
* background(148, 196, 0);
* fill(255, 0, 0);
* ellipse(20, 20, 20, 20);
* fill(0, 0, 255);
* rect(50, 50, 50, 50);
*
*
*
*
*/
_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: ''
};
}
//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 = '
* let x = 0;
* function draw() {
* gridOutput();
* background(148, 196, 0);
* fill(255, 0, 0);
* ellipse(x, 20, 20, 20);
* fill(0, 0, 255);
* rect(50, 50, 50, 50);
* ellipse(20, 20, 20, 20);
* x += 0.1;
* }
*
* 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) {
//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);
//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 = _getPos([args[0], [1]], this.width, this.height);
var p2 = _getPos([args[2], [3]], this.width, this.height);
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 = _getArea(f, args, this.width, this.height);
}
//get middle of shapes
//calculate position using middle of shape
include.pos = _getPos(middle, this.width, this.height);
//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
function _getPos(args, canvasWidth, canvasHeight) {
if (args[0] < 0.4 * canvasWidth) {
if (args[1] < 0.4 * canvasHeight) {
return 'top left';
} else if (args[1] > 0.6 * canvasHeight) {
return 'bottom left';
} else {
return 'mid left';
}
} else if (args[0] > 0.6 * canvasWidth) {
if (args[1] < 0.4 * canvasHeight) {
return 'top right';
} else if (args[1] > 0.6 * canvasHeight) {
return 'bottom right';
} else {
return 'mid right';
}
} else {
if (args[1] < 0.4 * canvasHeight) {
return 'top middle';
} else if (args[1] > 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
function _getArea(objectType, shapeArgs, canvasWidth, canvasHeight) {
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
}
return Math.round(objectArea * 100 / (canvasWidth * canvasHeight));
}
var _default = _main.default;
exports.default = _default;
},
{ '../core/main': 59 }
],
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 };
} /** //the functions in this file support updating the text output
* @module Environment
* @submodule Environment
* @for p5
* @requires core
*/
//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 = '
*
*
* @alt
* Left half of canvas light blue and right half light charcoal grey.
*/ _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
*
* 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 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
*
* let c = color(175, 100, 220);
* fill(c);
* rect(15, 20, 35, 60); // Draw left rectangle
* let blueValue = blue(c);
* fill(0, 0, blueValue);
* rect(50, 20, 35, 60); // Draw right rectangle
*
*
*
*
*
* 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);
*
*
*
*
* @alt
* Left half of canvas salmon pink and the right half with it's brightness colored white.
* Left half of canvas olive colored and the right half with it's brightness color 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
*
* 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);
*
*
*
*
*
* let c = color(255, 204, 0);
* fill(c);
* noStroke();
* rect(30, 20, 55, 55);
*
*
*
*
*
* let c = color(255, 204, 0);
* fill(c);
* noStroke();
* ellipse(25, 25, 80, 80); // Draw left circle
* // Using only one value generates a grayscale value.
* c = color(65);
* fill(c);
* ellipse(75, 75, 80, 80);
*
*
*
*
*
* // You can use named SVG & CSS colors
* let c = color('magenta');
* fill(c);
* noStroke();
* rect(20, 20, 60, 60);
*
*
*
*
*
* // Example of hex color codes
* noStroke();
* let c = color('#0f0');
* fill(c);
* rect(0, 10, 45, 80);
* c = color('#00ff00');
* fill(c);
* rect(55, 10, 45, 80);
*
*
*
*
*
* // RGB and RGBA color strings are also supported
* // these all set to the same color (solid blue)
* let c;
* noStroke();
* c = color('rgb(0,0,255)');
* fill(c);
* rect(10, 10, 35, 35); // Draw rectangle
* c = color('rgb(0%, 0%, 100%)');
* fill(c);
* rect(55, 10, 35, 35); // Draw rectangle
* c = color('rgba(0, 0, 255, 1)');
* fill(c);
* rect(10, 55, 35, 35); // Draw rectangle
* c = color('rgba(0%, 0%, 100%, 1)');
* fill(c);
* rect(55, 55, 35, 35); // Draw rectangle
*
*
*
*
*
* // HSL color can also be specified by value
* let c = color('hsl(160, 100%, 50%)');
* noStroke();
* fill(c);
* rect(0, 10, 45, 80); // Draw rectangle
* c = color('hsla(160, 100%, 50%, 0.5)');
* fill(c);
* rect(55, 10, 45, 80); // Draw rectangle
*
*
*
*
*
* // HSB color can also be specified
* let c = color('hsb(160, 100%, 50%)');
* noStroke();
* fill(c);
* rect(0, 10, 45, 80); // Draw rectangle
* c = color('hsba(160, 100%, 50%, 0.5)');
* fill(c);
* rect(55, 10, 45, 80); // Draw rectangle
*
*
*
*
* @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
*
* noStroke();
* let c = color(50, 55, 100);
* fill(c);
* rect(0, 10, 45, 80); // Draw left rect
* colorMode(HSB, 100);
* c = color(50, 55, 100);
* fill(c);
* rect(55, 10, 45, 80);
*
*
*
*
* @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
*
* 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
* 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 colors 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
*
* 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
* 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
*
* 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
* 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
*
* 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);
*
*
*
*
*
* 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
*
*
*
*
* @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
*
* 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
*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': 48,
'../core/friendly_errors/fes_core': 51,
'../core/friendly_errors/file_errors': 52,
'../core/friendly_errors/validate_params': 54,
'../core/main': 59,
'./p5.Color': 46
}
],
46: [
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);
}
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 };
}
/**
* @module Color
* @submodule Creating & Reading
* @for p5
* @requires core
* @requires constants
* @requires color_conversion
*/ /**
* Each color stores the color mode and level maxes that was 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
* @constructor
*/ _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
*
* 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);
*
*
*
*
*
* createCanvas(200, 100);
* let myColor;
* stroke(255);
* myColor = color(100, 100, 250);
* fill(myColor);
* rotate(HALF_PI);
* text(myColor.toString(), 0, -5);
* text(myColor.toString('#rrggbb'), 0, -30);
* text(myColor.toString('rgba%'), 0, -55);
*
*
*
*
* @alt
* A canvas with 3 text representation of their 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 myColor = color(100, 130, 250);
* text(myColor.toString('#rrggbb'), 25, 25);
*
*
*
*
* @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.setRed(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 = 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.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 backgroundColor = color(100, 50, 150);
* function draw() {
* backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
* background(backgroundColor);
* }
*
*
*
*
* @alt
* a square with gradually changing opacity on a gray background
**/
_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
*
* function draw() {
* clear();
* background(200);
* squareColor = color(100, 50, 100);
* squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
* fill(squareColor);
* rect(13, 13, width - 26, height - 26);
* }
*
*
*
*
* @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': 48, '../core/main': 59, './color_conversion': 44 }
],
47: [
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);
}
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 };
} /**
* @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.
* // todo
*
* * * 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)');
*
*
*
*
* @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
*
* // p5 Color object
* background(color(0, 0, 255));
*
*
*
*
* @alt
* small white ellipses are continually drawn at mouse's 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
*
* // Clear the screen on mouse press.
* function draw() {
* ellipse(mouseX, mouseY, 20, 20);
* }
* function mousePressed() {
* clear();
* background(128);
* }
*
*
*
*
*
* 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);
*
*
*
*
* @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
*
* 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);
*
*
*
*
*
* // 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);
*
*
*
*
* @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
*
* // p5 Color object
* fill(color(0, 0, 255));
* rect(20, 20, 60, 60);
*
*
*
*
*
* rect(15, 10, 55, 55);
* noFill();
* rect(20, 20, 60, 60);
*
*
*
*
* @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
*
* 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);
* }
*
*
*
*
*
* noStroke();
* rect(20, 20, 60, 60);
*
*
*
*
* @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
*
* 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);
* }
*
*
*
*
*
* // 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);
*
*
*
*
* @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() in between erase() and
* noErase() will not erase the canvas but works as usual.
*
* @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
*
* // p5 Color object
* stroke(color(0, 0, 255));
* strokeWeight(4);
* rect(20, 20, 60, 60);
*
*
*
*
*
* 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();
*
*
*
*
* @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
*
* 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
* 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': 48, '../core/main': 59, './p5.Color': 46 }
],
48: [
function(_dereq_, module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
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.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.WEBGL = exports.P2D = void 0;
exports.FALLBACK = exports.LABEL = 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 = exports.TEXTURE = 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
*
* 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);
*
*
* arc(50, 50, 80, 80, 0, HALF_PI);
*
* arc(50, 50, 80, 80, 0, PI);
*
* arc(50, 50, 80, 80, 0, QUARTER_PI);
*
* arc(50, 50, 80, 80, 0, TAU);
*
* arc(50, 50, 80, 80, 0, TWO_PI);
*
* function setup() {
* angleMode(DEGREES);
* }
*
* function setup() {
* angleMode(RADIANS);
* }
*
* let x = 10;
* print('The value of x is ' + x);
* // prints "The value of x is 10"
*
* function setup() {
* frameRate(30);
* textSize(30);
* textAlign(CENTER);
* }
*
* function draw() {
* background(200);
* text(frameCount, width / 2, height / 2);
* }
*
* 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);
* }
*
* // 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);
* }
* }
*
* // 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://avatars0.githubusercontent.com/u/1617169?s=16');
* } else {
* cursor('grab');
* }
* }
*
* 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);
* }
*
* function setup() {
* noCursor();
* }
*
* function draw() {
* background(200);
* ellipse(mouseX, mouseY, 10, 10);
* }
*
* createCanvas(displayWidth, displayHeight);
*
* createCanvas(displayWidth, displayHeight);
*
* createCanvas(windowWidth, windowHeight);
*
* createCanvas(windowWidth, windowHeight);
*
* function setup() {
* createCanvas(windowWidth, windowHeight);
* }
*
* function draw() {
* background(0, 100, 200);
* }
*
* function windowResized() {
* resizeCanvas(windowWidth, windowHeight);
* }
*
*
*
* @alt
* This example does not render anything.
*/
_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
*
* // 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);
* }
* }
*
*
*
*
*
* function setup() {
* pixelDensity(1);
* 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() {
* pixelDensity(3.0);
* 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
*
* function setup() {
* let density = displayDensity();
* pixelDensity(density);
* createCanvas(100, 100);
* background(200);
* ellipse(width / 2, height / 2, 50, 50);
* }
*
*
*
*
* @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
*
* let url;
* let x = 100;
*
* function setup() {
* fill(0);
* noStroke();
* url = getURL();
* }
*
* function draw() {
* background(200);
* text(url, x, height / 2);
* x--;
* }
*
*
* function setup() {
* let urlPath = getURLPath();
* for (let i = 0; i < urlPath.length; i++) {
* text(urlPath[i], 10, i * 20 + 20);
* }
* }
*
*
*
* @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': 48, './main': 59 }
],
50: [
function(_dereq_, module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.default = void 0; // Different browsers may use different error strings for the same error.
// Extracting info from them is much easier and cleaner if we have a predefined
// lookup against which we try and match the errors obtained from the browser,
// classify them into types and extract the required information. The contents
// of this file serve as that lookup. The FES can use this to give a simplified
// explanation for all kinds of errors.
var strings = {
ReferenceError: [
{
msg: '{{}} is not defined',
type: 'NOTDEFINED',
browser: 'all'
},
{
msg: "Can't find variable: {{}}",
type: 'NOTDEFINED',
browser: 'Safari'
}
],
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'
}
],
TypeError: [
{
msg: '{{.}} is not a function',
type: 'NOTFUNC',
browser: 'all'
}
]
};
var _default = strings;
exports.default = _default;
},
{}
],
51: [
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 };
}
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' && 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'];
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 the function to link
*
* @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('/');
msgWithReference = ''
.concat(message, ' (http://p5js.org/reference/#/')
.concat(referenceSection, '/')
.concat(funcName, ')');
}
return msgWithReference;
};
/**
* 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 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 {Number} message message to be printed
* @param {String} [method] name of method
* @param {Number|String} [color] CSS color string or error type (Optional)
*/
_main.default._friendlyError = function(message, method, color) {
report(message, method, color);
};
/**
* This is called internally if there is a error with autoplay.
*
* @method _friendlyAutoplayError
* @private
*/
_main.default._friendlyAutoplayError = function(src) {
var message = (0, _internationalization.translator)('fes.autoplay', {
src: src,
link: 'https://developer.mozilla.org/docs/Web/Media/Autoplay_guide'
});
console.log(
(0, _internationalization.translator)('fes.pre', { message: message })
);
};
/**
* An implementation of
* https://en.wikipedia.org/wiki/Wagner%E2%80%93Fischer_algorithm to
* compute the Levenshtein distance. It gives a measure of how dissimilar
* two strings are. If the "distance" between them is small enough, it is
* reasonable to think that one is the misspelled version of the other.
* @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 if the various functions such as setup, draw, preload have been
* defined with capitalization mistakes
* @method checkForUserDefinedFunctions
* @private
* @param {*} context The current default context. It's 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]
}
);
report(msg, fxns[lowercase]);
}
}
};
/**
* compares the the symbol caught in the ReferenceErrror to everything
* in misusedAtTopLevel ( all public p5 properties ). The use of
* misusedAtTopLevel here is for convenience as it was an array that was
* already defined when spelling check was implemented. For this particular
* use-case, it's a misnomer.
*
* @method handleMisspelling
* @private
* @param {String} errSym the symbol to whose spelling to check
* @param {Error} error the ReferenceError object
*
* @returns {Boolean} a boolean value indicating if this error was likely due
* to a mis-spelling
*/
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.
report(
msg,
matchedSymbols.length === 1 ? matchedSymbols[0].name : undefined
);
return true;
}
return false;
};
/**
* prints a friendly stacktrace which only includes user-written functions
* and is easier for newcomers to understand
* @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. It also uses this processed stack to figure out if the error
* 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 error exact location of the error (the
* top of the stack) is a piece of code write 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 indicating if the error happened internally
* friendlyStack: the simplified stacktrace, with internal details filtered
*/
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;
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];
for (var j = 0; j < i; j++) {
// Due to the current build process, all p5 functions have
// _main.default in their names in the final build. This is the
// easiest way to check if a function is inside the p5 library
if (stacktrace[j].functionName.search('_main.default') !== -1) {
isInternal = true;
p5FileName = stacktrace[j].fileName;
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
) {
report(
(0, _internationalization.translator)('fes.wrongPreload', {
func: func,
location: locationObj
? (0, _internationalization.translator)('fes.location', locationObj)
: '',
error: error.message
}),
'preload'
);
} else {
// Library error
report(
(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];
};
/**
* The main function for handling global errors. Called when an error
* happens and is responsible for detecting the type of error that
* has happened and showing the appropriate message
*
* @method fesErrorMonitor
* @private
* @param {*} e The 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': {
var url =
'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Illegal_character#What_went_wrong';
report(
(0, _internationalization.translator)(
'fes.globalErrors.syntax.invalidToken',
{
url: url
}
)
);
break;
}
case 'UNEXPECTEDTOKEN': {
var _url =
'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong';
report(
(0, _internationalization.translator)(
'fes.globalErrors.syntax.unexpectedToken',
{
url: _url
}
)
);
break;
}
}
break;
}
case 'ReferenceError': {
switch (matchedError.type) {
case 'NOTDEFINED': {
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 url1 = 'https://p5js.org/examples/data-variable-scope.html';
var url2 =
'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_Defined#What_went_wrong';
report(
(0, _internationalization.translator)(
'fes.globalErrors.reference.notDefined',
{
url1: url1,
url2: url2,
symbol: errSym,
location: locationObj
? (0, _internationalization.translator)(
'fes.location',
locationObj
)
: ''
}
)
);
if (friendlyStack) printFriendlyStack(friendlyStack);
break;
}
}
break;
}
case 'TypeError': {
switch (matchedError.type) {
case 'NOTFUNC': {
var _errSym = matchedError.match[1];
var splitSym = _errSym.split('.');
var _url2 =
'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: _url2,
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) {
report(
(0, _internationalization.translator)(
'fes.globalErrors.type.notfuncObj',
translationObj
)
);
} else {
report(
(0, _internationalization.translator)(
'fes.globalErrors.type.notfunc',
translationObj
)
);
}
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';
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
} */
}
// 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';
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
) {
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,
link: 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': 48,
'../internationalization': 57,
'../main': 59,
'./browser_errors': 50
}
],
52: [
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
*
* This file contains the part of the FES responsible for dealing with
* file load errors
*/ 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,
link: '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'
};
}
};
/**
* 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 _fileLoadErrorCases = fileLoadErrorCases(errorType, filePath),
message = _fileLoadErrorCases.message,
method = _fileLoadErrorCases.method;
_main.default._friendlyError(message, method, 3);
};
}
var _default = _main.default;
exports.default = _default;
},
{ '../internationalization': 57, '../main': 59 }
],
53: [
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 };
} /** // Borrow from stacktracejs https://github.com/stacktracejs/stacktrace.js with
* @for p5
* @requires core
*/
// 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() {
'use strict';
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', '
* // 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);
* }
*
*
* 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);
* }
*
* let a = 0;
*
* function setup() {
* background(0);
* noStroke();
* fill(102);
* }
*
* function draw() {
* rect(a++ % width, 10, 2, 80);
* }
*
* 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);
* }
*
* function draw() {
* ellipse(50, 50, 10, 10);
* }
*
* function mousePressed() {
* remove(); // remove whole sketch on mouse press
* }
*
* p5.disableFriendlyErrors = true;
*
* function setup() {
* createCanvas(100, 50);
* }
*
*
*
* @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
*
* function setup() {
* let c = createCanvas(50, 50);
* c.elt.style.border = '5px solid red';
* }
*
* function draw() {
* background(220);
* }
*
*
* // Add the following comment to html file.
* // <div id="myContainer"></div>
*
* // The js code
* 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
*
* function setup() {
* let cnv = createCanvas(100, 100);
* // Assigns a CSS selector ID to
* // the canvas element.
* cnv.id('mycanvas');
* }
*
* function setup() {
* let cnv = createCanvas(100, 100);
* // Assigns a CSS selector class 'small'
* // to the canvas element.
* cnv.class('small');
* }
*
* let cnv, d, 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);
* }
*
* let cnv, d, 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);
* }
*
* let cnv, d, 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;
* }
* }
*
* let cnv, d, 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.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, d, 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);
* }
*
*
* 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;
* }
* }
*
* 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;
* }
* }
*
* 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;
* }
* }
*
* 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);
* }
*
* 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);
* }
*
* 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);
* }
*
* // 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);
* }
*
* // 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);
* }
*
* 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();
* }
*
* 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
* 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 {
//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);
} 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(100, 50);
* background(153);
* line(0, 0, width, height);
* }
*
*
* function setup() {
* createCanvas(windowWidth, windowHeight);
* }
*
* function draw() {
* background(0, 100, 200);
* }
*
* function windowResized() {
* resizeCanvas(windowWidth, windowHeight);
* }
*
*
*
* @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
*
* function setup() {
* noCanvas();
* }
*
*
*
*
* @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):
*
* 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);
* }
*
* -
*
BLEND- linear interpolation of colours: C = * A\*factor + B. This is the default blending mode.
* ADD- sum of A and B
* DARKEST- 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 toDIFFERENCE, 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 ofMULTIPLYandSCREEN *. Multiplies dark values, and screens light values. (2D)
* HARD_LIGHT-SCREENwhen greater than 50% * gray,MULTIPLYwhen lower. (2D)
* SOFT_LIGHT- mix ofDARKESTand *LIGHTEST. Works likeOVERLAY, 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)
*
* (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);
*
*
*
*
* @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);
};
/**
* The p5.js API provides a lot of functionality for creating graphics, but there is
* some native HTML5 Canvas functionality that is not exposed by p5. You can still call
* it directly using the variable `drawingContext`, as in the example shown. This is
* the equivalent of calling `canvas.getContext('2d');` or `canvas.getContext('webgl');`.
* See this
*
* reference for the native canvas API for possible drawing functions you can call.
*
* @property drawingContext
* @example
*
* blendMode(MULTIPLY);
* strokeWeight(30);
* stroke(80, 150, 255);
* line(25, 25, 75, 75);
* stroke(255, 50, 50);
* line(75, 25, 25, 75);
*
*
*
*
* @alt
* white ellipse with shadow blur effect around edges
*/ var _default = _main.default;
exports.default = _default;
},
{
'../webgl/p5.RendererGL': 113,
'./constants': 48,
'./main': 59,
'./p5.Graphics': 61,
'./p5.Renderer2D': 63
}
],
66: [
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);
}
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 };
}
/**
* @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
};
};
/**
* 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 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
*
* function setup() {
* drawingContext.shadowOffsetX = 5;
* drawingContext.shadowOffsetY = -5;
* drawingContext.shadowBlur = 10;
* drawingContext.shadowColor = 'black';
* background(200);
* ellipse(width / 2, height / 2, 50, 50);
* }
*
*
*
*
*
* 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);
*
*
*
*
* @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;
}
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) to the screen. By default, the first two parameters
* set the location of the center of the ellipse, 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.
*
* An ellipse with equal width and height is a circle.The origin may be changed
* with the ellipseMode() function.
*
* @method ellipse
* @param {Number} x x-coordinate of the center of ellipse.
* @param {Number} y y-coordinate of the center of ellipse.
* @param {Number} w width of the ellipse.
* @param {Number} [h] height of the ellipse.
* @chainable
* @example
*
* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
*
*
*
*
* @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);
return this._renderEllipse.apply(this, arguments);
};
/**
* 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
*
* ellipse(56, 46, 55, 55);
*
*
*
*
* @alt
* white circle with black outline in mid of canvas that is 55x55.
*/
_main.default.prototype.circle = function() {
_main.default._validateParameters('circle', arguments);
var args = Array.prototype.slice.call(arguments, 0, 2);
args.push(arguments[2]);
args.push(arguments[2]);
return this._renderEllipse.apply(this, args);
};
// 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 line (a direct path between two points) to the screen. If called with
* only 4 parameters, it will draw a line in 2D with a default width of 1 pixel.
* This width can be modified by using the
* strokeWeight() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. So to
* color a line, use the stroke() 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
*
* // Draw a circle at location (30, 30) with a diameter of 20.
* circle(30, 30, 20);
*
*
*
*
*
* line(30, 20, 85, 75);
*
*
*
*
* @alt
* An example showing a line 78 pixels long running from mid-top to bottom-right of canvas.
* An example showing 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);
}
//accessible Outputs
if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
this._accsOutput('line', 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
* param is the vertical value for the point. The color of the point is
* changed with the stroke() function. The size of the point
* can be 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
*
* line(30, 20, 85, 20);
* stroke(126);
* line(85, 20, 85, 75);
* stroke(255);
* line(85, 75, 30, 75);
*
*
*
*
*
* point(30, 20);
* point(85, 20);
* point(85, 75);
* point(30, 75);
*
*
*
*
*
* point(30, 20);
* point(85, 20);
* stroke('purple'); // Change the color
* strokeWeight(10); // Make the points 10 pixels in size
* point(85, 75);
* point(30, 75);
*
*
*
*
* @alt
* 4 points centered in the middle-right of the canvas.
* 2 large points and 2 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);
//accessible Outputs
if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
this._accsOutput('point', args);
}
}
}
return this;
};
/**
* Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is
* similar to a rectangle, but the angles between its edges are not
* constrained to ninety degrees. The first pair of parameters (x1,y1)
* sets the first vertex and the subsequent pairs should proceed
* 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
*
* let a = createVector(10, 10);
* point(a);
* let b = createVector(10, 20);
* point(b);
* point(createVector(20, 10));
* point(createVector(20, 20));
*
*
*
*
* @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);
//accessibile outputs
if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
this._accsOutput('quadrilateral', args);
}
}
}
return this;
};
/**
* Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with
* every angle at ninety degrees. By default, the first two parameters set
* the location of the upper-left corner, the third sets the width, and the
* fourth sets the height. The way these parameters are interpreted, may be
* 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
*
* quad(38, 31, 86, 20, 69, 63, 30, 76);
*
*
*
*
*
* // 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);
*
*
*
*
* @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);
return this._renderRect.apply(this, arguments);
};
/**
* 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, 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 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);
*
*
*
*
*
* // 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);
*
*
*
*
* @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) {
_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 to the canvas. 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
*
* // 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
* 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);
}
//accessible outputs
if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
this._accsOutput('triangle', args);
}
return this;
};
var _default = _main.default;
exports.default = _default;
},
{
'../constants': 48,
'../friendly_errors/fes_core': 51,
'../friendly_errors/file_errors': 52,
'../friendly_errors/validate_params': 54,
'../helpers': 55,
'../main': 59
}
],
67: [
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);
}
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
*/ /**
* 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 CENTER, in which the first two parameters are interpreted
* as the shape's center point's x and y coordinates respectively, while the third
* and fourth parameters are its width and height.
*
* ellipseMode(RADIUS) also uses the first two parameters as the shape's center
* point's x and y coordinates, but uses the third and fourth parameters to
* specify half of the shapes's width and height.
*
* ellipseMode(CORNER) interprets the first two parameters 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 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 to this method must be written in ALL CAPS because they are
* predefined as constants in ALL CAPS and Javascript is a case-sensitive language.
*
* @method ellipseMode
* @param {Constant} mode either CENTER, RADIUS, CORNER, or CORNERS
* @chainable
* @example
*
* triangle(30, 75, 58, 20, 86, 75);
*
*
*
*
*
* // Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses
* ellipseMode(RADIUS);
* fill(255);
* ellipse(50, 50, 30, 30); // Outer white ellipse
* ellipseMode(CENTER);
* fill(100);
* ellipse(50, 50, 30, 30); // Inner gray ellipse
*
*
*
*
* @alt
* 60x60 white ellipse and 30x30 grey ellipse with black outlines at center.
* 60x60 white ellipse and 30x30 grey ellipse top-right with 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
*
* // Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses
* ellipseMode(CORNER);
* fill(255);
* ellipse(25, 25, 50, 50); // Outer white ellipse
* ellipseMode(CORNERS);
* fill(100);
* ellipse(25, 25, 50, 50); // Inner gray ellipse
*
*
*
*
* @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 CORNER, which interprets the first two parameters 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 as the location of
* one of the corners, and the third and fourth parameters as the location of
* the diagonally opposite corner. Note, the rectangle is drawn between the
* coordinates, so it is not neccesary that the first corner be the upper left
* corner.
*
* rectMode(CENTER) interprets the first two parameters 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 as the shape's center
* point, but uses the third and fourth parameters to specify half of the shape's
* width and height respectively.
*
* The parameter to this method must be written in ALL CAPS because they are
* predefined as constants in ALL CAPS and Javascript is a case-sensitive language.
*
* @method rectMode
* @param {Constant} mode either CORNER, CORNERS, CENTER, or RADIUS
* @chainable
* @example
*
* background(0);
* noStroke();
* smooth();
* ellipse(30, 48, 36, 36);
* noSmooth();
* ellipse(70, 48, 36, 36);
*
*
*
*
*
* rectMode(CORNER);
* fill(255);
* rect(25, 25, 50, 50); // Draw white rectangle using CORNER mode
*
* rectMode(CORNERS);
* fill(100);
* rect(25, 25, 50, 50); // Draw gray rectangle using CORNERS 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
*
* rectMode(RADIUS);
* fill(255);
* rect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode
*
* rectMode(CENTER);
* fill(100);
* rect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode
*
*
*
*
* @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 rounded,
* squared or extended, each of which specified with the corresponding
* parameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.
*
* The parameter to this method must be written in ALL CAPS because they are
* predefined as constants in ALL CAPS and Javascript is a case-sensitive language.
*
* @method strokeCap
* @param {Constant} cap either ROUND, SQUARE or PROJECT
* @chainable
* @example
*
* background(0);
* noStroke();
* smooth();
* ellipse(30, 48, 36, 36);
* noSmooth();
* ellipse(70, 48, 36, 36);
*
*
*
*
* @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.
*
* The parameter to this method must be written in ALL CAPS because they are
* predefined as constants in ALL CAPS and Javascript is a case-sensitive language.
*
* @method strokeJoin
* @param {Constant} join either MITER, BEVEL, ROUND
* @chainable
* @example
*
* // Example of different strokeCaps
* strokeWeight(12.0);
* strokeCap(ROUND);
* line(20, 30, 80, 30);
* strokeCap(SQUARE);
* line(20, 50, 80, 50);
* strokeCap(PROJECT);
* line(20, 70, 80, 70);
*
*
*
*
*
* // Example of MITER type of joints
* noFill();
* strokeWeight(10.0);
* strokeJoin(MITER);
* beginShape();
* vertex(35, 20);
* vertex(65, 50);
* vertex(35, 80);
* endShape();
*
*
*
*
*
* // Example of BEVEL type of joints
* noFill();
* strokeWeight(10.0);
* strokeJoin(BEVEL);
* 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 of the stroke (in pixels)
* @chainable
* @example
*
* // Example of ROUND type of joints
* noFill();
* strokeWeight(10.0);
* strokeJoin(ROUND);
* beginShape();
* vertex(35, 20);
* vertex(65, 50);
* vertex(35, 80);
* endShape();
*
*
*
*
* @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': 48, '../main': 59 }
],
68: [
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 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
*
* // Example of different stroke weights
* strokeWeight(1); // Default
* line(20, 20, 80, 20);
* strokeWeight(4); // Thicker
* line(20, 40, 80, 40);
* strokeWeight(10); // Beastly
* line(20, 70, 80, 70);
*
*
*
*
*
* 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);
*
*
*
*
* @alt
* stretched black s-shape in center with orange lines extending from end points.
* a white colored curve on black background from the upper-right corner to the lower right corner.
*/ /**
* @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 Bezier's curve is displayed. The default value is 20.
*
* Note, 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
*
* 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 with a low level of bezier detail
*/
_main.default.prototype.bezierDetail = function(d) {
_main.default._validateParameters('bezierDetail', arguments);
this._bezierDetail = d;
return this;
};
/**
* Given the x or y co-ordinate values of control and anchor points of a bezier
* curve, it evaluates the x or y coordinate of the bezier at position t. The
* parameters a and d are the x or y coordinates of first and last points on the
* curve while b and c are of the control points.The final parameter t is the
* position of the resultant point which is given 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
*
* 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
* 10 points plotted on a given bezier at equal distances.
*/
_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();
* 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);
* circle(x, y, 5);
* }
*
*
*
*
*
* 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);
* }
*
*
*
*
* @alt
* s-shaped line with 6 short orange lines showing the tangents at those points.
* s-shaped line with 6 short orange lines showing lines coming out the underside of the bezier.
*/
_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.
* 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);
* }
*
* * 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 };
* let p2 = { x: 73, y: 24 };
* let p3 = { x: 73, y: 61 };
* let 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);
*
*
*
*
* @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
*
* 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
* 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
*
* 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
* 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
*
* // 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();
* }
*
*
*
*
*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 control point
* @param {Number} b coordinate of first point on the curve
* @param {Number} c coordinate of second point on the curve
* @param {Number} d coordinate of second conrol point
* @param {Number} t value between 0 and 1
* @return {Number} the tangent 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);
* }
*
*
*
*
* @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;
},
{
'../friendly_errors/fes_core': 51,
'../friendly_errors/file_errors': 52,
'../friendly_errors/validate_params': 54,
'../main': 59
}
],
69: [
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);
}
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;
/**
* 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
*
* 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
* 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, QUAD_STRIP, and TESS (WebGL only). 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, QUAD_STRIP or TESS
* @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);
*
*
*
*
*
* 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();
*
*
*
*
* @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
*
* beginShape();
* vertex(20, 20);
* vertex(40, 20);
* vertex(40, 40);
* vertex(60, 40);
* vertex(60, 60);
* vertex(20, 60);
* endShape(CLOSE);
*
*
*
*
*
* noFill();
* beginShape();
* vertex(30, 20);
* bezierVertex(80, 0, 80, 75, 30, 75);
* endShape();
*
*
*
*
*
* beginShape();
* vertex(30, 20);
* bezierVertex(80, 0, 80, 75, 30, 75);
* bezierVertex(50, 80, 60, 25, 30, 20);
* endShape();
*
*
*
*
* @alt
* crescent-shaped line in middle of canvas. Points facing left.
* white crescent shape in middle of canvas. Points facing left.
* 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
*
* 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
* 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
*
* 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 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
*
* 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
* 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
*
* 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
* 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
*
* noFill();
*
* beginShape();
* vertex(20, 20);
* vertex(45, 20);
* vertex(45, 80);
* endShape(CLOSE);
*
* beginShape();
* vertex(50, 20);
* vertex(75, 20);
* vertex(75, 80);
* endShape();
*
*
*
*
*
* strokeWeight(5);
* point(20, 20);
* point(80, 20);
* point(50, 50);
*
* noFill();
* strokeWeight(1);
* beginShape();
* vertex(20, 20);
* quadraticVertex(80, 20, 50, 50);
* 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
*
* 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
* 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
*
* 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();
* }
*
*
*
*
*
* 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();
*
*
*
* @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': 48, '../main': 59 }
],
70: [
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
});
}
})();
},
{}
],
71: [
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.
*
* Use isLooping() to check current state of loop().
*
* @method noLoop
* @example
*
* // 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(TESS);
* 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();
* }
*
*
*
*
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* noLoop();
* }
* function draw() {
* line(10, 10, 90, 90);
* }
*
*
*
*
* @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().
*
* Use isLooping() to check current state of loop().
*
* @method loop
* @example
*
* 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
* 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();
}
}
};
/**
* By default, p5.js loops through draw() continuously,
* executing the code within it. If the sketch is stopped with
* noLoop() or resumed with loop(),
* isLooping() returns the current state for use within custom event handlers.
*
* @method isLooping
* @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
* Ellipse moves slowly from left. Checkbox toggles loop()/noLoop().
* Button colorizes sketch if isLooping().
*
*/
_main.default.prototype.isLooping = function() {
return this._loop;
};
/**
* 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
*
* let checkbox, button, colBG, colFill;
*
* function setup() {
* createCanvas(100, 100);
*
* button = createButton('Colorize if loop()');
* button.position(0, 120);
* button.mousePressed(changeBG);
*
* checkbox = createCheckbox('loop()', true);
* checkbox.changed(checkLoop);
*
* colBG = color(0);
* colFill = color(255);
* }
*
* function changeBG() {
* if (isLooping()) {
* colBG = color(random(255), random(255), random(255));
* colFill = color(random(255), random(255), random(255));
* }
* }
*
* function checkLoop() {
* if (this.checked()) {
* loop();
* } else {
* noLoop();
* }
* }
*
* function draw() {
* background(colBG);
* fill(colFill);
* ellipse(frameCount % width, height / 2, 50);
* }
*
*
*
*
*
* 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
*
*
*
*
* @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
* 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
*
*
*
*
*
* 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
*
*
*
*
* @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
* function 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
*
* 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
*
*
* let x = 0;
*
* function setup() {
* createCanvas(100, 100);
* noLoop();
* }
*
* function draw() {
* background(204);
* line(x, 0, x, height);
* }
*
* function mousePressed() {
* x += 1;
* redraw();
* }
*
*
*
*
* @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;
if (typeof context.draw === 'function') {
if (typeof context.setup === '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 (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
this._updateAccsOutput();
}
if (context._renderer.isP3D) {
context._renderer._update();
}
context._setProperty('frameCount', context.frameCount + 1);
context._registeredMethods.pre.forEach(callMethod);
this._inUserDraw = true;
try {
context.draw();
} finally {
this._inUserDraw = false;
}
context._registeredMethods.post.forEach(callMethod);
}
}
};
/**
* The `p5()` constructor enables you to activate "instance mode" instead of normal
* "global mode". This is an advanced topic. A short description and example is
* included below. Please see
*
* Dan Shiffman's Coding Train video tutorial or this
* tutorial page
* for more info.
*
* By default, all p5.js functions are in the global namespace (i.e. bound to the window
* object), meaning you can call them simply `ellipse()`, `fill()`, etc. However, this
* might be inconvenient if you are mixing with other JS libraries (synchronously or
* asynchronously) or writing long programs of your own. p5.js currently supports a
* way around this problem called "instance mode". In instance mode, all p5 functions
* are bound up in a single variable instead of polluting your global namespace.
*
* Optionally, you can specify a default container for the canvas and any other elements
* to append to with a second argument. You can give the ID of an element in your html,
* or an html node itself.
*
* Note that creating instances like this also allows you to have more than one p5 sketch on
* a single web page, as they will each be wrapped up with their own set up variables. Of
* course, you could also use iframes to have multiple sketches in global mode.
*
* @method p5
* @param {Object} sketch a function containing a p5.js sketch
* @param {String|Object} node ID or pointer to HTML DOM node to contain sketch in
* @example
*
* let x = 0;
*
* function setup() {
* createCanvas(100, 100);
* noLoop();
* }
*
* function draw() {
* background(204);
* x += 1;
* line(x, 0, x, height);
* }
*
* function mousePressed() {
* redraw(5);
* }
*
*
* const s = p => {
* let x = 100;
* let y = 100;
*
* p.setup = function() {
* p.createCanvas(700, 410);
* };
*
* p.draw = function() {
* p.background(0);
* p.fill(255);
* p.rect(x, y, 50, 50);
* };
* };
*
* new p5(s); // invoke p5
* 
*
* @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);
* }
*
*
*
*
* @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
*
* 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 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 by 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(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
* 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 a shape around X axis by the amount specified in angle parameter.
* The 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.
* All tranformations are reset when draw() begins again.
*
* @method rotateX
* @param {Number} angle the angle of rotation, specified in radians
* or degrees, depending on current angleMode
* @chainable
* @example
*
* translate(width / 2, height / 2);
* rotate(PI / 3.0);
* rect(-26, -26, 52, 52);
*
*
*
*
* @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 a shape around Y axis by the amount specified in angle parameter.
* The 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.
* All tranformations are reset when draw() begins again.
*
* @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);
* rotateX(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 a shape around Z axis by the amount specified in angle parameter.
* The angles can be entered in either RADIANS or DEGREES.
*
* This method works in WEBGL mode only.
*
* Objects are always rotated around their relative position to the
* origin and positive numbers rotate objects in a clockwise direction.
* All tranformations are reset when draw() begins again.
*
* @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);
* rotateY(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 or 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
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
* function draw() {
* background(255);
* rotateZ(millis() / 1000);
* box();
* }
*
*
*
*
*
* rect(30, 20, 50, 50);
* scale(0.5);
* 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 by 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
*
* rect(30, 20, 50, 50);
* scale(0.5, 1.3);
* rect(30, 20, 50, 50);
*
*
*
*
* @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);
* shearX(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(width / 4, height / 4);
* shearY(PI / 4.0);
* rect(0, 0, 30, 30);
*
*
*
*
*
* 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
*
*
*
*
* @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': 59 }
],
73: [
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
*
* function draw() {
* background(200);
* rectMode(CENTER);
* translate(width / 2, height / 2);
* translate(p5.Vector.fromAngle(millis() / 1000, 40));
* rect(0, 0, 20, 20);
* }
*
*
* // 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);
* }
*
* // 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);
* }
*
*
*/
_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 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.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': 59 }
],
74: [
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 myVar = 10;
* storeItem('myVar', myVar);
* print(getItem('myVar')); // logs 10 to the console
* removeItem('myVar');
* print(getItem('myVar')); // logs null to the 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 = 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 = 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(100, 42);
* print(myDictionary.hasKey(100)); // logs true to console
*
* let anotherDictionary = createNumberDict({ 200: 84 });
* print(anotherDictionary.hasKey(200)); // logs true to 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 = createNumberDict(1, 10);
* myDictionary.create(2, 20);
* myDictionary.create(3, 30);
* print(myDictionary.size()); // logs 3 to the 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');
* print(myDictionary.hasKey('p5')); // 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');
* let myValue = myDictionary.get('p5');
* print(myValue === 'js'); // logs true 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.set('p5', 'JS');
* myDictionary.print(); // logs "key: p5 - value: JS" 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');
* myDictionary.create('happy', 'coding');
* myDictionary.print();
* // above logs "key: p5 - value: js, key: happy - value: coding" to console
* }
*
*
*/
_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');
* print(myDictionary.hasKey('p5')); // prints 'true'
* myDictionary.clear();
* print(myDictionary.hasKey('p5')); // prints 'false'
* }
*
*
*
*/
_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
* myDictionary.remove('p5');
* myDictionary.print();
* // above logs "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() {
* 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.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
* }).saveTable('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
* @constructor
* @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() {
* 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.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.add(2, 2);
* print(myDictionary.get(2)); // logs 7 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, 5);
* myDictionary.sub(2, 2);
* print(myDictionary.get(2)); // logs 3 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, 4);
* myDictionary.mult(2, 2);
* print(myDictionary.get(2)); // logs 8 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, 8);
* myDictionary.div(2, 2);
* print(myDictionary.get(2)); // logs 4 to console.
* }
*
*
*/
_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 lowestValue = myDictionary.minValue(); // value is -10
* print(lowestValue);
* }
*
*
*/
_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: -10, 4: 0.65, 1.2: 3 });
* let highestValue = myDictionary.maxValue(); // value is 3
* print(highestValue);
* }
*
*
*/
_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 lowestKey = myDictionary.minKey(); // value is 1.2
* print(lowestKey);
* }
*
*
*/
_main.default.NumberDict.prototype.maxKey = function() {
return this._keyTest(-1);
};
var _default = _main.default.TypedDict;
exports.default = _default;
},
{ '../core/main': 59 }
],
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 };
}
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 the first element that matches the given CSS selector string (can be an
* ID, class, tag name or a combination) and returns it as a p5.Element.
* 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} selectors CSS selector string of element to search for
* @param {String|p5.Element|HTMLElement} [container] CSS selector string, p5.Element, or
* HTML element to search within
* @return {p5.Element|null} p5.Element containing node found
* @example
*
* function setup() {
* let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
* let highestKey = myDictionary.maxKey(); // value is 4
* print(highestKey);
* }
*
* function setup() {
* createCanvas(50, 50);
* background(30);
* // move canvas down and right
* select('canvas').position(10, 30);
* }
*
* // select using ID
* let a = select('#container');
* let b = select('#beep', '#container');
* let c;
* if (a) {
* // select using class
* c = select('.boop', a);
* }
* // select using CSS selector string
* let d = select('#container #bleep');
* let e = select('#container p');
* [a, b, c, d, e]; // unused
*
* 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('.beep');
* a = selectAll('div');
* a = selectAll('button', '#container');
*
* let b = createDiv();
* b.id('container');
* let c = select('#container');
* a = selectAll('p', c);
* a = selectAll('#container p');
*
* let d = document.getElementById('container');
* a = selectAll('.boop', d);
* a = selectAll('#container .boop');
* console.log(a);
*
* 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
* }
*
* 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();
* }
* }
*
* // Open your console to see the output
* function setup() {
* let inp = createInput('');
* inp.input(myInputEvent);
* }
*
* function myInputEvent() {
* console.log('you are typing: ', this.value());
* }
*
* createDiv('this is some text');
*
* createP('this is some text');
*
* createSpan('this is some text');
*
* createImg(
* 'https://p5js.org/assets/img/asterisk-01.png',
* 'the p5 magenta asterisk'
* );
*
* createA('http://p5js.org/', 'this is a link');
*
* 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);
* }
*
* 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);
* }
*
* let checkbox;
*
* function setup() {
* checkbox = createCheckbox('label', false);
* checkbox.changed(myCheckedEvent);
* }
*
* function myCheckedEvent() {
* if (this.checked()) {
* console.log('Checking!');
* } else {
* console.log('Unchecking!');
* }
* }
*
* let sel;
*
* function setup() {
* textAlign(CENTER);
* background(200);
* sel = createSelect();
* sel.position(10, 10);
* sel.option('pear');
* sel.option('kiwi');
* sel.option('grape');
* sel.selected('kiwi');
* sel.changed(mySelectEvent);
* }
*
* function mySelectEvent() {
* let item = sel.value();
* background(200);
* text('It is a ' + item + '!', 50, 50);
* }
*
* let sel;
*
* function setup() {
* textAlign(CENTER);
* background(200);
* sel = createSelect();
* sel.position(10, 10);
* sel.option('oil');
* sel.option('milk');
* sel.option('bread');
* sel.disable('milk');
* }
*
* 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(1, 'apple');
* radio.option(2, 'bread');
* radio.option(3, 'juice');
* radio.style('width', '30px');
* textAlign(CENTER);
* }
*
* function draw() {
* background(200);
* let val = radio.value();
* if (val) {
* text('item cost is $' + val, width / 2, height / 2);
* }
* }
*
* let colorPicker;
* function setup() {
* createCanvas(100, 100);
* colorPicker = createColorPicker('#ed225d');
* colorPicker.position(0, height + 5);
* }
*
* function draw() {
* background(colorPicker.color());
* }
*
* let inp1, inp2;
* function setup() {
* createCanvas(100, 100);
* background('grey');
* inp1 = createColorPicker('#ff0000');
* inp1.position(0, height + 5);
* inp1.input(setShade1);
* inp2 = createColorPicker(color('yellow'));
* inp2.position(0, height + 30);
* 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());
* }
*
* function setup() {
* let inp = createInput('');
* inp.input(myInputEvent);
* }
*
* function myInputEvent() {
* console.log('you are typing: ', this.value());
* }
*
* 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;
* }
* }
*
* 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);
* }
*
* 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);
* }
*
*
*
*
* 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);
* });
* }
*
*
*
*/
_main.default.prototype.createCapture = function() {
_main.default._validateParameters('createCapture', arguments);
// return if getUserMedia is not supported by 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 _iteratorNormalCompletion10 = true;
var _didIteratorError10 = false;
var _iteratorError10 = undefined;
try {
for (
var _iterator10 = arguments[Symbol.iterator](), _step10;
!(_iteratorNormalCompletion10 = (_step10 = _iterator10.next()).done);
_iteratorNormalCompletion10 = true
) {
var arg = _step10.value;
if (arg === _main.default.prototype.VIDEO) useAudio = false;
else if (arg === _main.default.prototype.AUDIO) useVideo = false;
else if (_typeof(arg) === 'object') constraints = arg;
else if (typeof arg === 'function') callback = arg;
}
} catch (err) {
_didIteratorError10 = true;
_iteratorError10 = err;
} finally {
try {
if (!_iteratorNormalCompletion10 && _iterator10.return != null) {
_iterator10.return();
}
} finally {
if (_didIteratorError10) {
throw _iteratorError10;
}
}
}
if (!constraints) constraints = { video: useVideo, audio: useAudio };
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;
}
}, console.log);
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;
} else {
videoEl.width = videoEl.elt.width = domElement.videoWidth;
videoEl.height = videoEl.elt.height = domElement.videoHeight;
}
videoEl.loadedmetadata = true;
if (callback) callback(domElement.srcObject);
});
return videoEl;
};
/**
* 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
*
* 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);
* }
* }
*
*
* createElement('h2', 'im an h2 p5.element!');
*
* let div = createDiv('div');
* div.addClass('myClass');
*
* // 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');
* }
*
* let div;
*
* function setup() {
* div = createDiv('div');
* div.addClass('show');
* }
*
* function mousePressed() {
* if (div.hasClass('show')) {
* div.addClass('show');
* } else {
* div.removeClass('show');
* }
* }
*
* let div;
*
* function setup() {
* div = createDiv('div');
* div.addClass('show');
* }
*
* function mousePressed() {
* div.toggleClass('show');
* }
*
* 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
*
* function setup() {
* let div = createDiv('').size(10, 10);
* div.style('background-color', 'orange');
* div.center();
* }
*
* let div = createDiv('').size(100, 100);
* div.html('hi');
*
* let div = createDiv('Hello ').size(100, 100);
* div.html('World', true);
*
* 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);
* }
*
* function setup() {
* let cnv = createCanvas(100, 100);
* // positions canvas 50px to the right and 100px
* // below upper left corner of the window
* cnv.position(0, 0, 'fixed');
* }
*
* 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');
* }
*
* let myDiv = createDiv('I like pandas.');
* myDiv.attribute('align', 'center');
*
* 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', '');
* }
* }
*
* // 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');
* }
*
* let div = createDiv('div');
* div.style('display', 'none');
* div.show(); // turns display to block
*
* let div = createDiv('this is a div');
* div.hide();
*
* 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);
* }
* );
*
* let myDiv = createDiv('this is some text');
* myDiv.remove();
*
* 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();
* }
*
* 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);
* }
* }
*
* 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);
* }
* }
*
* //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);
* }
* }
* }
*
* //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);
* }
* }
* }
*
* //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);
* }
* }
* }
*
* //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();
* sampleIsPlaying = false;
* text('No more Loops!', width / 2, height / 2);
* } else {
* ele.loop();
* sampleIsPlaying = true;
* text('Click to stop looping!', width / 2, height / 2);
* }
* }
* }
*
* let videoElement;
* function setup() {
* noCanvas();
* videoElement = createVideo(['assets/small.mp4'], onVideoLoad);
* }
* function onVideoLoad() {
* // The media will play as soon as it is loaded.
* videoElement.autoplay();
* videoElement.volume(0);
* videoElement.size(100, 100);
* }
*
* let videoElement;
* function setup() {
* noCanvas();
* videoElement = createVideo(['assets/small.mp4'], onVideoLoad);
* }
* function onVideoLoad() {
* // The media will not play untill some explicitly triggered.
* videoElement.autoplay(false);
* videoElement.volume(0);
* videoElement.size(100, 100);
* }
*
* function mouseClicked() {
* videoElement.play();
* }
*
* 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);
* }
* }
*
*
* //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();
* }
*
* 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;
* }
* }
*
* 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);
* }
*
* function setup() {
* let audioEl = createAudio('assets/beat.mp3');
* audioEl.showControls();
* audioEl.onended(sayDone);
* }
*
* function sayDone(elt) {
* alert('done playing ' + elt.src);
* }
*
* 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);
* }
*
* 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);
* }
*
* //
* //
* function setup() {
* createCanvas(200, 200);
*
* 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);
* }
*
* 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);
* }
*
* 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);
* }
*
*
* @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, accelerationX);
* }
*
*
*
* @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, accelerationY);
* }
*
*
*
*
* @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. 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);
* }
*
*
*
* @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. 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);
* }
*
*
*
* @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. 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);
* }
*
*
*
*
* @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.
* 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);
* }
*
*
*
*
* @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.
* 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);
*
*
*
*
* @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.
* 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);
*
*
*
*
* @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
*
* // 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
* 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
* // 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 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 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
* 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
* // 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 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
* // 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;
* }
* }
*
*
*
*
* // 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;
* }
* }
*
*
*
*
* @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
* // 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 shakes
*/
_main.default.prototype._ondeviceorientation = function(e) {
this._updatePRotations();
if (this._angleMode === constants.radians) {
e.beta = e.beta * (_PI / 180.0);
e.gamma = e.gamma * (_PI / 180.0);
e.alpha = e.alpha * (_PI / 180.0);
}
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 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.
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');
context.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');
context.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');
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/constants': 48, '../core/main': 59 }
],
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 };
}
/**
* @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
*
* // 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 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
*
* function draw() {
* if (keyIsPressed === true) {
* fill(0);
* } else {
* fill(255);
* }
* rect(25, 25, 50, 50);
* }
*
*
* // 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.
* }
*
* 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;
* }
* }
*
* function draw() {}
* function keyPressed() {
* background('yellow');
* text(`${key} ${keyCode}`, 10, 40);
* print(key, ' ', keyCode);
* }
* * 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;
* }
* }
*
*
*
*
* @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 context = this._isGlobal ? window : this;
if (typeof context.keyPressed === 'function' && !e.charCode) {
var executeDefault = context.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.
* function keyPressed() {
* // Do something
* return false; // prevent any default behaviour
* }
*
* * 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 *
*
*
* @alt
* black rect center. turns white when key pressed and black when pressed again
*/
_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();
}
}
};
/**
* 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.
* 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
* }
*
* * 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 *
*
*
* @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', 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 = {};
};
/**
* 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 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;
* }
*
*
* 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
* 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 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 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
*
* 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
* 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(mouseX, 0, mouseX, 100);
* }
*
*
*
*
* @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
* function draw() {
* background(244, 248, 252);
* line(0, mouseY, 100, mouseY);
* }
*
*
*
*
* @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
*
* // 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
* 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
*
* 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 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 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 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);
* 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
* 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 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.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
*
* 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
* 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) {
* 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
* 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.
* function draw() {
* background(237, 34, 93);
* fill(0);
*
* if (mouseIsPressed) {
* ellipse(50, 50, 50, 50);
* } else {
* rect(25, 25, 50, 50);
* }
*
* print(mouseIsPressed);
* }
*
* * 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;
* }
*
*
*
*
* @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.
* // returns a MouseEvent object
* // as a callback argument
* function mouseMoved(event) {
* console.log(event);
* }
*
* * 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;
* }
*
*
*
*
* @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.
* // returns a MouseEvent object
* // as a callback argument
* function mouseDragged(event) {
* console.log(event);
* }
*
* * 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;
* }
*
*
*
*
* @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.
* // returns a MouseEvent object
* // as a callback argument
* function mousePressed(event) {
* console.log(event);
* }
*
* * 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;
* }
*
*
*
*
* @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.
* // returns a MouseEvent object
* // as a callback argument
* function mouseReleased(event) {
* console.log(event);
* }
*
* * 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;
* }
*
*
*
*
* @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
*
* // returns a MouseEvent object
* // as a callback argument
* function mouseClicked(event) {
* console.log(event);
* }
*
*
*
*
*
* // 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;
* }
*
*
*
*
* @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.
* // returns a MouseEvent object
* // as a callback argument
* function doubleClicked(event) {
* console.log(event);
* }
*
* * 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 *
*
*
* @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 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
* 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
*
* 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
* cursor gets locked / unlocked on mouse-click
*/
_main.default.prototype.exitPointerLock = function() {
document.exitPointerLock();
};
var _default = _main.default;
exports.default = _default;
},
{ '../core/constants': 48, '../core/main': 59 }
],
79: [
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
*
* //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
* 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.
* // 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);
* }
*
* * 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;
* }
*
*
*
*
* @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.mousePressed === '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.
* // returns a TouchEvent object
* // as a callback argument
* function touchStarted(event) {
* console.log(event);
* }
*
* * 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;
* }
*
*
*
*
* @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.
* // returns a TouchEvent object
* // as a callback argument
* function touchMoved(event) {
* console.log(event);
* }
*
* * 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;
* }
*
*
*
*
* @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': 59 }
],
80: [
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/
* 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;
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/
// main/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;
},
{}
],
81: [
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 };
}
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;
}
}
/**
* 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
*
* // returns a TouchEvent object
* // as a callback argument
* function touchEnded(event) {
* console.log(event);
* }
*
*
*
*
*
* 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);
*
*
*
*
* @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
*
* 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);
*
*
* 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();
* }
*
* function draw() {
* background(mouseX);
* }
*
* function mousePressed() {
* saveFrames('out', 'png', 1, 25, data => {
* print(data);
* });
* }
*
*
* let img;
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
* function setup() {
* 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
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);
} 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);
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);
// 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].image, 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({
image: pImg.drawingContext.getImageData(0, 0, pImg.width, pImg.height),
delay: frameInfo.delay * 10 //GIF stores delay in one-hundredth of a second, shift to ms
});
}
//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() {
* // here we use a callback to display the image after loading
* loadImage('assets/laDefense.jpg', img => {
* image(img, 0, 0);
* });
* }
*
* 
*
* @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);
* });
* }
*
*
*
* @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/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);
* }
*
*
*
*
*
* 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);
* }
*
*
*
*
* @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/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 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() {
* tint(0, 153, 204); // Tint blue
* image(img, 0, 0);
* noTint(); // Disable tint
* image(img, 50, 0);
* }
*
*
*
*
*
* 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);
* }
*
*
*
*
* @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': 48,
'../core/friendly_errors/fes_core': 51,
'../core/friendly_errors/file_errors': 52,
'../core/friendly_errors/validate_params': 54,
'../core/helpers': 55,
'../core/main': 59,
'./filters': 80,
omggif: 33
}
],
83: [
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
*
* let img;
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
* function setup() {
* imageMode(CENTER);
* image(img, 50, 50, 80, 80);
* }
*
*
* 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);
* }
*
* 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);
* }
* }
*
* 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);
* }
* }
*
*
*
* 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);
*
*
*
*
* @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;
var curTime = pInst._lastFrameTime + pInst.deltaTime;
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
*/
_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 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);
*
*
* 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);
* }
*
* 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);
* }
*
* 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
* 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 = 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 img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
* function draw() {
* image(img, 0, 0);
* }
*
* function mousePressed() {
* img.resize(50, 100);
* }
*
* 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);
* }
*
* 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);
* }
*
* 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);
* }
*
* 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);
* }
* * 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');
* }
* }
*
* 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();
* }
*
* 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);
* }
*
* 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);
* }
*
* 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);
* }
*
* 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();
* }
*
* 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();
* }
*
* 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
* 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 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();
*
*
* 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);
* }
*
* 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);
* }
*
*
*
*
* 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);
* }
*
*
*
*
* @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/bricks.jpg');
* }
* function setup() {
* image(img, 0, 0);
* filter(ERODE);
* }
*
*
*
*
*
* let img;
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
* function setup() {
* image(img, 0, 0);
* let c = get();
* image(c, width / 2, 0);
* }
*
*
*
*
* @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);
* let c = get(50, 90);
* fill(c);
* noStroke();
* rect(25, 25, 50, 50);
* }
*
*
*
*
* @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 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();
* }
*
*
*
*
*
* 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();
*
*
*
*
* @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() {
* set(0, 0, img);
* updatePixels();
* line(0, 0, width, height);
* line(0, height, width, 0);
* }
*
*
*
* @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': 46, '../core/main': 59, './filters': 80 }
],
85: [
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/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' && 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.
*
*
* 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();
* }
*
*
* // 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);
* }
*
* 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);
* }
*
* let result;
* function preload() {
* result = loadStrings('assets/test.txt');
* }
* function setup() {
* background(200);
* text(random(result), 10, 10, 80, 80);
* }
*
* 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.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) {
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
*
* // 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));
* }
* }
*
*
* // 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
*
* 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));
* }
* }
* 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 = [];
/**
* @method createWriter
* @param {String} name name of the file to be created
* @param {String} [extension]
* @return {p5.PrintWriter}
* @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;
* }
* }
*
*
*
*/
_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
*
* 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();
* }
* }
*
*
*
*
* // 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
*
* function setup() {
* createCanvas(100, 100);
* button = createButton('SAVE FILE');
* button.position(21, 40);
* button.mousePressed(createFile);
* }
*
* function createFile() {
* // 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 '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();
*
*
*
*/
this.print = function(data) {
this.content += ''.concat(data, '\n');
};
/**
* Clears the data already written to the PrintWriter object
* @method clear
* @example
*
* let writer;
*
* function setup() {
* createCanvas(400, 400);
* // create a PrintWriter
* writer = createWriter('newFile.txt');
* }
*
* function draw() {
* writer.print([mouseX, mouseY]);
* }
*
* function mouseClicked() {
* writer.close();
* }
*
*
* // 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
*
* function setup() {
* button = createButton('CLEAR ME');
* button.position(21, 40);
* button.mousePressed(createFile);
* }
*
* function createFile() {
* let writer = createWriter('newFile.txt');
* writer.write(['clear me']);
* writer.clear();
* writer.close();
* }
*
*
*
*
* // create a file called 'newFile.txt'
* let writer = createWriter('newFile.txt');
* // 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
/**
* 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,
*
* // 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();
*
* 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');
*
* // Saves p5.Image as an image
* img = createImage(10, 10);
* save(img, 'myImage.png');
*
* // Saves p5.Renderer object as an image
* obj = createGraphics(100, 100);
* save(obj, 'myObject.png');
*
* 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 text file with line breaks after each item
* let arrayOfStrings = ['a', 'b'];
* save(arrayOfStrings, 'my.txt');
*
* 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"
* // }
*
* 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
*
* 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
* | '.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 *
*
*/
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() {
* //print the column names
* for (let c = 0; c < table.getColumnCount(); c++) {
* print('column ' + c + ' is named ' + table.columns[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() {
* //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.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() {
* //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.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 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.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() {
* 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.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() {
* //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.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() {
* //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');
* }
*
*
*
*/
_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
*
* // 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.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
*
* 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
*
*
*
*
*@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() {
* //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.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.clearRows();
* print(table.getRowCount() + ' total rows in table');
* print(table.getColumnCount() + ' total columns in table');
* }
*
*
*
*
*@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 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));
* }
*
*
*
*/
_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() {
* let numOfColumn = table.getColumnCount();
* text('There are ' + numOfColumn + ' columns 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
*
* // 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"
*
*
*
*@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.removeColumn('id');
* print(table.getColumnCount());
* }
*
*
*
*
*@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.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.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() {
* table.setNum(1, 'id', 1);
*
* print(table.getColumn(0));
* //["0", 1, "2"]
* }
*
*
* // 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.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.get(0, 1));
* //Capra hircus
* print(table.get(0, 'species'));
* //Capra hircus
* }
*
*
*
*
*@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() {
* //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.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() {
* // 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.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,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.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': 59 }
],
87: [
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,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]);
* }
* }
*
*
* // 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());
* }
*
* // 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());
* }
*
* // 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());
* }
*
* // 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);
* }
*
* // 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);
* }
*
* // 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);
* }
*
* // 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
*
* // 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
*
* // 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
*
* // 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
*
* // 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
*
* // 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"]
*
* // 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"
*
* // 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"
*
* // 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"
*
* // 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"
*
* // 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
*
* // 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"]
*
* // 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
*
* // 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
*
* // 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"
*
* // 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"
*
* // 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"
*
* // 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"
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* print(xml.serialize());
* }
*
* // Sketch prints:
* //
* // Goat
* // Leopard
* // Zebra
* //
*
* function setup() {
* let x = -3;
* let y = abs(x);
*
* print(x); // -3
* print(y); // 3
* }
*
* 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);
* }
*
* 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
* }
*
* // 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 = 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!
* }
*
* 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);
* }
*
* 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);
* }
*
* 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);
* }
*
* 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);
* }
*
* 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"
* }
*
* 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);
* }
* 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);
* }
*
* 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);
* }
*
* 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);
* }
*
* 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));
* }
*
* let x = round(3.7);
* text(x, width / 2, height / 2);
*
* let x = round(12.782383, 2);
* text(x, width / 2, height / 2);
*
* 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);
* }
*
* 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);
* }
*
* 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
* 2 rows of numbers, the first row having 8 numbers and the second having the fractional parts of those numbers.
*/
_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': 59 }
],
90: [
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(windowWidth, windowHeight);
* fill(0);
* text(7345.73472742, 0, 50);
* text(fract(7345.73472742), 0, 100);
* text(1.4215e-15, 150, 50);
* text(fract(1.4215e-15), 150, 100);
* }
*
*
* let v1;
* function setup() {
* createCanvas(100, 100);
* stroke(255, 0, 255);
* v1 = createVector(width / 2, height / 2);
* }
*
* function draw() {
* background(255);
* line(v1.x, v1.y, mouseX, mouseY);
* }
* 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);
* }
*
*
*
*
* @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 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
* 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 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
* 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': 59 }
],
92: [
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);
}
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 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
* @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
* 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
* 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
*
* 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);
*
*
*
*
*
* function setup() {
* let v = createVector(20, 30);
* print(String(v)); // prints "p5.Vector Object : [20, 30, 0]"
* }
*
*
*
*/
_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 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();
* }
*
*
*
*
*
* 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]
* }
*
*
*
*/
/**
* @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 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();
* }
*
*
*
*/
_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. Additionally, you may provide arguments to this function as an array.
* See the examples for more context.
*
* @method add
* @param {Number} x the x component of the vector to be added
* @param {Number} [y] the y component of the vector to be added
* @param {Number} [z] the z component of the vector to be added
* @chainable
* @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"
*
*
*
*
*
* let v = createVector(1, 2, 3);
* v.add(4, 5, 6);
* // v's components are set to [5, 7, 9]
*
*
*
*
*
* let v = createVector(1, 2, 3);
* // Provide arguments as an array
* let arr = [4, 5, 6];
* v.add(arr);
* // 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);
*
*
*
*/
/**
* @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;
};
/// HELPERS FOR REMAINDER METHOD
var calculateRemainder2D = function calculateRemainder2D(xComponent, yComponent) {
if (xComponent !== 0) {
this.x = this.x % xComponent;
}
if (yComponent !== 0) {
this.y = this.y % yComponent;
}
return this;
};
var calculateRemainder3D = 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;
};
/**
* Gives remainder of a vector when it is divided by another vector.
* See examples for more context.
*
* @method rem
* @param {Number} x the x component of divisor vector
* @param {Number} y the y component of divisor vector
* @param {Number} z the z component of divisor vector
* @chainable
* @example
*
* // 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();
* }
*
*
*
*
* let v = createVector(3, 4, 5);
* v.rem(2, 3, 4);
* // v's components are set to [1, 1, 1]
*
*
*
*/
/**
* @method rem
* @param {p5.Vector | Number[]} value divisor vector
* @chainable
*/
_main.default.Vector.prototype.rem = function rem(x, y, z) {
if (x instanceof _main.default.Vector) {
if (Number.isFinite(x.x) && Number.isFinite(x.y) && Number.isFinite(x.z)) {
var xComponent = parseFloat(x.x);
var yComponent = parseFloat(x.y);
var zComponent = parseFloat(x.z);
calculateRemainder3D.call(this, xComponent, yComponent, zComponent);
}
} else if (x instanceof Array) {
if (
x.every(function(element) {
return Number.isFinite(element);
})
) {
if (x.length === 2) {
calculateRemainder2D.call(this, x[0], x[1]);
}
if (x.length === 3) {
calculateRemainder3D.call(this, x[0], x[1], x[2]);
}
}
} else if (arguments.length === 1) {
if (Number.isFinite(arguments[0]) && arguments[0] !== 0) {
this.x = this.x % arguments[0];
this.y = this.y % arguments[0];
this.z = this.z % arguments[0];
return this;
}
} else if (arguments.length === 2) {
var vectorComponents = Array.prototype.slice.call(arguments);
if (
vectorComponents.every(function(element) {
return Number.isFinite(element);
})
) {
if (vectorComponents.length === 2) {
calculateRemainder2D.call(this, vectorComponents[0], vectorComponents[1]);
}
}
} else if (arguments.length === 3) {
var _vectorComponents = Array.prototype.slice.call(arguments);
if (
_vectorComponents.every(function(element) {
return Number.isFinite(element);
})
) {
if (_vectorComponents.length === 3) {
calculateRemainder3D.call(
this,
_vectorComponents[0],
_vectorComponents[1],
_vectorComponents[2]
);
}
}
}
};
/**
* Subtracts x, y, and z components from a vector, subtracts one vector from
* another, or subtracts two independent vectors. The version of the method
* that subtracts two vectors is a static method and returns a p5.Vector, the
* other acts directly on the vector. Additionally, you may provide arguments to this function as an array.
* 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
*
* // Static method
* let v1 = createVector(3, 4, 5);
* let v2 = createVector(2, 3, 4);
*
* let v3 = p5.Vector.rem(v1, v2);
* // v3 has components [1, 1, 1]
* print(v3);
*
*
*
*
*
* let v = createVector(4, 5, 6);
* v.sub(1, 1, 1);
* // v's components are set to [3, 4, 5]
*
*
*
*
*
* let v = createVector(4, 5, 6);
* // Provide arguments as an array
* let arr = [1, 1, 1];
* v.sub(arr);
* // 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);
*
*
*
*/
/**
* @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;
};
/**
* Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies
* the x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y,
* and z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,
* the x, y, z components of both vectors are multiplied by each other
* (for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method
* creates a new p5.Vector while the non static version acts on the vector
* directly. Additionally, you may provide arguments to this function as an array.
* See the examples for more context.
*
* @method mult
* @param {Number} n The number to multiply with the vector
* @chainable
* @example
*
* // 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();
* }
*
*
*
*
*
* let v = createVector(1, 2, 3);
* v.mult(2);
* // v's components are set to [2, 4, 6]
*
*
*
*
*
* let v0 = createVector(1, 2, 3);
* let v1 = createVector(2, 3, 4);
* v0.mult(v1); // v0's components are set to [2, 6, 12]
*
*
*
*
*
* let v0 = createVector(1, 2, 3);
* // Provide arguments as an array
* let arr = [2, 3, 4];
* v0.mult(arr); // v0's components are set to [2, 6, 12]
*
*
*
*
*
* let v0 = createVector(1, 2, 3);
* let v1 = createVector(2, 3, 4);
* const result = p5.Vector.mult(v0, v1);
* print(result); // result's components are set to [2, 6, 12]
*
*
*
*
*
* // Static method
* let v1 = createVector(1, 2, 3);
* let v2 = p5.Vector.mult(v1, 2);
* // v2 has components [2, 4, 6]
* print(v2);
*
*
*
*/
/**
* @method mult
* @param {Number} x The number to multiply with the x component of the vector
* @param {Number} y The number to multiply with the y component of the vector
* @param {Number} [z] The number to multiply with the z component of the vector
* @chainable
*/
/**
* @method mult
* @param {Number[]} arr The array to multiply with the components of the vector
* @chainable
*/
/**
* @method mult
* @param {p5.Vector} v The vector to multiply with the components of the original vector
* @chainable
*/
_main.default.Vector.prototype.mult = function mult(x, y, z) {
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 (x instanceof Array) {
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 = Array.prototype.slice.call(arguments);
if (
vectorComponents.every(function(element) {
return Number.isFinite(element);
}) &&
vectorComponents.every(function(element) {
return typeof element === 'number';
})
) {
if (arguments.length === 1) {
this.x *= x;
this.y *= x;
this.z *= x;
}
if (arguments.length === 2) {
this.x *= x;
this.y *= y;
}
if (arguments.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 the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and
* z components of two vectors against each other. When dividing a vector by a scalar, the x, y,
* and z components of the vector are all divided by the scalar. When dividing a vector by a vector,
* the x, y, z components of the source vector are treated as the dividend, and the x, y, z components
* of the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z).
* The static version of this method creates a
* new p5.Vector while the non static version acts on the vector directly.
* Additionally, you may provide arguments to this function as an array.
* See the examples for more context.
*
* @method div
* @param {number} n The number to divide the vector by
* @chainable
* @example
*
* 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();
* }
*
*
*
*
*
* let v = createVector(6, 4, 2);
* v.div(2); //v's components are set to [3, 2, 1]
*
*
*
*
*
* let v0 = createVector(9, 4, 2);
* let v1 = createVector(3, 2, 4);
* v0.div(v1); // v0's components are set to [3, 2, 0.5]
*
*
*
*
*
* let v0 = createVector(9, 4, 2);
* // Provide arguments as an array
* let arr = [3, 2, 4];
* v0.div(arr); // v0's components are set to [3, 2, 0.5]
*
*
*
*
*
* let v0 = createVector(9, 4, 2);
* let v1 = createVector(3, 2, 4);
* let result = p5.Vector.div(v0, v1);
* print(result); // result's components are set to [3, 2, 0.5]
*
*
*
*
*
* // Static method
* let v1 = createVector(6, 4, 2);
* let v2 = p5.Vector.div(v1, 2);
* // v2 has components [3, 2, 1]
* print(v2);
*
*
*
*/
/**
* @method div
* @param {Number} x The number to divide with the x component of the vector
* @param {Number} y The number to divide with the y component of the vector
* @param {Number} [z] The number to divide with the z component of the vector
* @chainable
*/
/**
* @method div
* @param {Number[]} arr The array to divide the components of the vector by
* @chainable
*/
/**
* @method div
* @param {p5.Vector} v The vector to divide the components of the original vector by
* @chainable
*/
_main.default.Vector.prototype.div = function div(x, y, z) {
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'
) {
if (x.x === 0 || x.y === 0 || x.z === 0) {
console.warn('p5.Vector.prototype.div:', 'divide by 0');
return this;
}
this.x /= x.x;
this.y /= x.y;
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 (x instanceof Array) {
if (
x.every(function(element) {
return Number.isFinite(element);
}) &&
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;
}
var vectorComponents = Array.prototype.slice.call(arguments);
if (
vectorComponents.every(function(element) {
return Number.isFinite(element);
}) &&
vectorComponents.every(function(element) {
return typeof element === 'number';
})
) {
if (
vectorComponents.some(function(element) {
return element === 0;
})
) {
console.warn('p5.Vector.prototype.div:', 'divide by 0');
return this;
}
if (arguments.length === 1) {
this.x /= x;
this.y /= x;
this.z /= x;
}
if (arguments.length === 2) {
this.x /= x;
this.y /= y;
}
if (arguments.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 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, 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();
* }
*
*
*
*
* 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();
* }
*
*
*
*/
_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
*
* let v = createVector(20.0, 30.0, 40.0);
* let m = v.mag();
* print(m); // Prints "53.85164807134504"
*
*
*
*
*
* // Static method
* let v1 = createVector(6, 4, 2);
* print(v1.magSq()); // Prints "56"
*
*
*
*/
_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
*
* 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();
* }
*
*
*
*
*
* let v1 = createVector(1, 2, 3);
* let v2 = createVector(2, 3, 4);
*
* print(v1.dot(v2)); // Prints "20"
*
*
*
*/
/**
* @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
*
* //Static method
* let v1 = createVector(1, 2, 3);
* let v2 = createVector(3, 2, 1);
* print(p5.Vector.dot(v1, v2)); // Prints "10"
*
*
*
*
*
* let v1 = createVector(1, 2, 3);
* let v2 = createVector(1, 2, 3);
*
* let v = v1.cross(v2); // v's components are [0, 0, 0]
* print(v);
*
*
*
*/
_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
*
* // 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);
*
*
*
*
*
* 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);
*
*
*
*/
_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
*
* 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();
* }
*
*
*
*
* 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]
*
*
*
*/
_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
*
* 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();
* }
*
*
*
*
* 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]
*
*
*
*/
_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
*
* 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();
* }
*
*
*
*
*
* 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]
*
*
*
*/
_main.default.Vector.prototype.setMag = function setMag(n) {
return this.normalize().mult(n);
};
/**
* 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 degree accordingly.
*
* @method heading
* @return {Number} the angle of rotation
* @example
*
* 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();
* }
*
*
*
*
*
* 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
* }
*
*
*
*/
_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 to a specific angle (only 2D vectors), magnitude remains the
* same
*
* @method setHeading
* @param {number} angle the angle of rotation
* @chainable
* @example
*
* 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.setHeading = function setHeading(a) {
var m = this.mag();
this.x = m * Math.cos(a);
this.y = m * Math.sin(a);
return this;
};
/**
* 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);
* // result of v.heading() is 1.1071487177940904
* v.setHeading(Math.PI);
* // result of v.heading() is now 3.141592653589793
*
*
*
*
*
* 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]
*
*
*
*/
_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 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();
* }
*
*
*
*
*
* let v1 = createVector(1, 0, 0);
* let v2 = createVector(0, 1, 0);
*
* let angle = v1.angleBetween(v2);
* // angle is PI/2
* print(angle);
*
*
*
*/
_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
*
* 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();
* }
*
*
*
*
*
* 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);
*
*
*
*/
/**
* @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;
};
/**
* Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D
* This method acts on the vector directly
*
* @method reflect
* @param {p5.Vector} surfaceNormal the p5.Vector to reflect about, will be normalized by this method
* @chainable
* @example
*
* 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();
* }
*
*
*
*
*
* let v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward
* let n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)
* v.reflect(n); // v is reflected about the surface normal n. v's components are now set to [4, -6]
*
*
*
*/
_main.default.Vector.prototype.reflect = function reflect(surfaceNormal) {
surfaceNormal.normalize();
return this.sub(surfaceNormal.mult(2 * this.dot(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
* array.
*
* @method array
* @return {Number[]} an Array with the 3 values
* @example
*
* function draw() {
* background(240);
*
* let v0 = createVector(0, 0);
* let v1 = createVector(mouseX, mouseY);
* drawArrow(v0, v1, 'red');
*
* let n = createVector(0, -30);
* drawArrow(v1, n, 'blue');
*
* let r = v1.copy();
* r.reflect(n);
* drawArrow(v1, r, '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();
* }
*
*
*
*
*
* function setup() {
* let v = createVector(20, 30);
* print(v.array()); // Prints : Array [20, 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 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"
*
*
*
*
*
* 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
*
*
*
*/
/**
* @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
*
* 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
*
*
*
*/
_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 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.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
*
* 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);
* }
*
*
*
*
*
* 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);
*
*
*
*/
_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
*
* 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.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 (Optional)
* @return {p5.Vector} the resulting p5.Vector
*/
_main.default.Vector.add = function add(v1, v2, target) {
if (!target) {
target = v1.copy();
if (arguments.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 dividend p5.Vector
* @param {p5.Vector} v2 divisor p5.Vector
*/
/**
* @method rem
* @static
* @param {p5.Vector} v1
* @param {p5.Vector} v2
* @return {p5.Vector} the resulting p5.Vector
*/
_main.default.Vector.rem = 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] the vector to receive the result (Optional)
* @return {p5.Vector} the resulting p5.Vector
*/
_main.default.Vector.sub = function sub(v1, v2, target) {
if (!target) {
target = v1.copy();
if (arguments.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} The resulting new p5.Vector
*/
/**
* @method mult
* @static
* @param {p5.Vector} v
* @param {Number} n
* @param {p5.Vector} [target] the vector to receive the result (Optional)
*/
/**
* @method mult
* @static
* @param {p5.Vector} v0
* @param {p5.Vector} v1
* @param {p5.Vector} [target]
*/
/**
* @method mult
* @static
* @param {p5.Vector} v0
* @param {Number[]} arr
* @param {p5.Vector} [target]
*/
_main.default.Vector.mult = function mult(v, n, target) {
if (!target) {
target = v.copy();
if (arguments.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;
};
/**
* 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 (Optional)
*/
/**
* @method div
* @static
* @param {p5.Vector} v0
* @param {p5.Vector} v1
* @param {p5.Vector} [target]
*/
/**
* @method div
* @static
* @param {p5.Vector} v0
* @param {Number[]} arr
* @param {p5.Vector} [target]
*/
_main.default.Vector.div = function div(v, n, target) {
if (!target) {
target = v.copy();
if (arguments.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 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] the vector to receive the result (Optional)
* @return {p5.Vector} the lerped value
*/
_main.default.Vector.lerp = function lerp(v1, v2, amt, target) {
if (!target) {
target = v1.copy();
if (arguments.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;
};
/**
* @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': 48, '../core/main': 59 }
],
93: [
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
*
* 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);
*
*
*
*
* @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
*
* randomSeed(99);
* for (let i = 0; i < 100; i++) {
* let r = random(0, 255);
* stroke(r);
* line(i, 0, i, 100);
* }
*
*
*
*
* 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);
* }
*
*
*
*
* @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.
* // 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
*
* * 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);
* }
*
*
*
* @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) {
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': 59 }
],
94: [
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);
}
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;
/**
* The inverse of cos(), returns the arc cosine of a value.
* This function expects the values in the range of -1 to 1 and values are returned in
* the range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the
* angle mode is DEGREES.
*
* @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 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);
* }
* }
*
*
*
*
*
* let a = PI;
* let c = cos(a);
* let ac = acos(c);
* // Prints: "3.1415927 : -1.0 : 3.1415927"
* 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 if the angleMode is RADIANS or -90 to 90 if the angle
* mode is DEGREES.
*
* @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 / 4.0;
* let c = cos(a);
* let ac = acos(c);
* // Prints: "3.926991 : -0.70710665 : 2.3561943"
* print(a + ' : ' + c + ' : ' + ac);
*
*
*
*
*
* let a = PI / 3.0;
* let s = sin(a);
* let as = asin(s);
* // Prints: "1.0471975 : 0.86602540 : 1.0471975"
* 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 if the angleMode is RADIANS or
* -90 to 90 if the angle mode is DEGREES.
*
* @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.0;
* let s = sin(a);
* let as = asin(s);
* // Prints: "4.1887902 : -0.86602540 : -1.0471975"
* print(a + ' : ' + s + ' : ' + as);
*
*
*
*
*
* let a = PI / 3.0;
* let t = tan(a);
* let at = atan(t);
* // Prints: "1.0471975 : 1.7320508 : 1.0471975"
* 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 if the angleMode is RADIANS or 180 to
* -180 if the angleMode is DEGREES. The atan2() function is
* most often used for orienting geometry to the position of the cursor.
*
* Note: The y-coordinate of the point is the first parameter, and the
* x-coordinate is the second parameter, due the the structure of calculating
* 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
*
* let a = PI + PI / 3.0;
* let t = tan(a);
* let at = atan(t);
* // Prints: "4.1887902 : 1.7320508 : 1.0471975"
* print(a + ' : ' + t + ' : ' + at);
*
*
*
*
* @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
*
* 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
* 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 + cos(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 / 25.0;
* for (let i = 0; i < 25; i++) {
* line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
* a = a + inc;
* }
*
*
*
*
* Outside of preload(), you may supply a
* callback function to handle the object:
*
*
*
* You can also use the font filename string (without the file extension) to
* style other HTML elements.
*
*
*
* @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
*
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 * 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': 48, '../core/main': 59 }
],
98: [
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
*
*/ _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;
};
/**
* 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
*
*/
_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
*
*
*/
_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': 59 }
],
99: [
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
*
*
*
* @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
*
*/
/**
* @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
*
*/
_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
*
*/
_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
*
*/
/**
* @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
*
*/
/**
* @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
*
*/
/**
* @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
*
*/
/**
* @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
*
*/
/**
* @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': 59 }
],
100: [
function(_dereq_, module, exports) {
'use strict';
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 };
} /** //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
*
*
* @alt
* An example that creates a camera and moves it around the box.
*/
_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
*
* 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 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 otherwise per-vertex lighting is used. * default is true. * * @method setAttributes * @for p5 * @param {String} key Name of attribute * @param {Boolean} value New value of named attribute * @example *
* Now with the antialias attribute set to true. *
*
* 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
*
*
*/
_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 rad = PI / 4;
* let deg = degrees(rad);
* print(rad + ' radians is ' + deg + ' degrees');
* // Prints: 0.7853981633974483 radians is 45 degrees
*
*
*
*/
_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
*
* let deg = 45.0;
* let rad = radians(deg);
* print(deg + ' degrees is ' + rad + ' radians');
* // Prints: 45 degrees is 0.7853981633974483 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': 48, '../core/main': 59 }
],
95: [
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
*
* 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
* }
*
*
*
*
*
* textSize(16);
* textAlign(RIGHT);
* text('ABCD', 50, 30);
* textAlign(CENTER);
* text('EFGH', 50, 50);
* textAlign(LEFT);
* text('IJKL', 50, 70);
*
*
*
*
* @alt
* Letters ABCD displayed at top left, EFGH at center and IJKL at bottom right.
* The names of the four vertical alignments (TOP, CENTER, BASELINE & BOTTOM) rendered each showing that alignment's placement relative to a horizontal line.
*/ /**
* @method textAlign
* @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
*
* 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
* A set of 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
*
* let lines = 'L1\nL2\nL3'; // "\n" is a "new line" character
* textSize(12);
*
* textLeading(10);
* text(lines, 10, 25);
*
* textLeading(20);
* text(lines, 40, 25);
*
* textLeading(30);
* text(lines, 70, 25);
*
*
*
*
* @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
*
* 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
* 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} the calculated width
* @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
* Letter P and p5.js are displayed with vertical lines at end.
*/
_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
*
* 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);
*
*
*
*/
_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 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.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': 59 }
],
96: [
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);
}
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 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 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
*
*
* let myFont;
* function preload() {
* myFont = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* fill('#ED225D');
* textFont(myFont);
* textSize(36);
* text('p5*js', 10, 50);
* }
*
* function setup() {
* loadFont('assets/inconsolata.otf', drawText);
* }
*
* function drawText(font) {
* fill('#ED225D');
* textFont(font, 36);
* text('p5*js', 10, 50);
* }
*
* function preload() {
* loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* let myDiv = createDiv('hello there');
* myDiv.style('font-family', 'Inconsolata');
* }
*
*
*
* 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
*
*
*
*
* @alt
* 'word' displayed 3 times going from black, blue to translucent blue
* The text 'The quick brown fox jumped over the lazy dog' displayed.
* 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
*
* 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);
* }
*
*
*
*
* fill(0);
* textSize(12);
* textFont('Georgia');
* text('Georgia', 12, 30);
* textFont('Helvetica');
* text('Helvetica', 12, 60);
*
*
*
*
* @alt
* word 'Georgia' displayed in font Georgia and 'Helvetica' in font Helvetica
* 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': 48,
'../core/friendly_errors/fes_core': 51,
'../core/friendly_errors/file_errors': 52,
'../core/friendly_errors/validate_params': 54,
'../core/main': 59,
'opentype.js': 34
}
],
97: [
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 _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' && 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
* @constructor
* @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
*
* @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 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 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 = [];
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 || glyph.index === 10) {
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;
};
/**
* 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:
*
*
* 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);
* }
*
* 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 *
*
*/
_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
* 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);
* }
*
*
* 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() {
* 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);
* }
*
* 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]
* }
*
* 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
*
* 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
*
* 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" ]
*
* print(boolean(0)); // false
* print(boolean(1)); // true
* print(boolean('true')); // true
* print(boolean('abcd')); // false
* print(boolean([0, 12, 'true'])); // [false, true, true]
*
* 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]
*
* print(char(65)); // "A"
* print(char('65')); // "A"
* print(char([65, 66, 67])); // [ "A", "B", "C" ]
* print(join(char([65, 66, 67]), '')); // "ABC"
*
* print(unchar('A')); // 65
* print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
* print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
*
* print(hex(255)); // "000000FF"
* print(hex(255, 6)); // "0000FF"
* print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
* print(Infinity); // "FFFFFFFF"
* print(-Infinity); // "00000000"
*
* print(unhex('A')); // 10
* print(unhex('FF')); // 255
* print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
*
*
*
* @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 array = ['Hello', 'world!'];
* let separator = ' ';
* let message = join(array, separator);
* text(message, 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*!';
* let regexp = 'p5js\\*';
* let m = match(string, regexp);
* text(m, 5, 50);
*
*
*
*/
_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 string = 'Hello p5js*! Hello world!';
* let regexp = 'Hello';
* matchAll(string, regexp);
*
*
*
*
* @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
*
* 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
* "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 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
* "+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
*
* 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
* "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 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
* "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
*
* let names = 'Pat,Xio,Alex';
* let splitString = split(names, ',');
* text(splitString[0], 5, 30);
* text(splitString[1], 5, 50);
* text(splitString[2], 5, 70);
*
*
*
*/
_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
*
* function setup() {
* let myStr = 'Mango, Banana, Lime';
* let myStrArr = splitTokens(myStr, ',');
*
* print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
* }
*
*
*
*
* @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/friendly_errors/fes_core': 51,
'../core/friendly_errors/file_errors': 52,
'../core/friendly_errors/validate_params': 54,
'../core/main': 59
}
],
101: [
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 string = trim(' No new lines\n ');
* text(string + ' here', 2, 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 d = day();
* text('Current day: \n' + d, 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 h = hour();
* text('Current hour:\n' + h, 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 sketch (when `setup()` is called). This information is often
* used for timing events and animation sequences.
*
* @method millis
* @return {Number} the number of milliseconds since starting the sketch
* @example
*
* let m = minute();
* text('Current minute: \n' + m, 5, 50);
*
*
*
*
* @alt
* number of milliseconds since sketch has started displayed
*/
_main.default.prototype.millis = function() {
if (this._millisStart === -1) {
// Sketch has not started
return 0;
} else {
return window.performance.now() - this._millisStart;
}
};
/**
* 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 millisecond = millis();
* text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
*
*
*
*
* @alt
* Current month is displayed
*/
_main.default.prototype.month = function() {
//January is 0!
return 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 m = month();
* text('Current month: \n' + m, 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 s = second();
* text('Current second: \n' + s, 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': 59 }
],
102: [
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);
}
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
*/ /**
* 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
*
* let y = year();
* text('Current year: \n' + y, 5, 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 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;
};
/**
* 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 plane
* // with width 50 and height 50
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(200);
* plane(50, 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 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;
};
/**
* 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 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);
* }
*
*
*
*
* @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);
* }
*
*
*
*/
_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 - 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
]);
}
}
};
/**
* 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
*
* 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());
* }
*
*
*
*
* @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);
* }
*
*
*
*/
_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 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;
};
/**
* 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
*
* // 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());
* }
*
*
*
*
* @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);
* }
*
*
*
*/
_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 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;
};
/**
* 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
*
* // 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());
* }
*
*
*
*
* @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);
* }
*
*
*
*/
_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 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;
};
/**
* 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
*
* // 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());
* }
*
*
*
*
* @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);
* }
*
*
*
*/
_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
/////////////////////////
/**
* 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
*
* // 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.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.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(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 if (this._renderer._doStroke) {
console.log('Cannot stroke ${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
*
* 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;
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.noLights();
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': 48, '../core/main': 59, './p5.Geometry': 108 }
],
103: [
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);
}
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 };
} /** // 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
*
* //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);
* }
*
*
*
*
* @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);
* normalMaterial();
* }
* function draw() {
* background(200);
* orbitControl();
* rotateY(0.5);
* box(30, 50);
* }
*
*
*
* @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();
* }
*
* 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.
*
* @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 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(AXES);
* }
*
* 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(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. 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(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. 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': 48, '../core/main': 59 }
],
104: [
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. Ambient light is light that comes from everywhere on the canvas.
* It has no particular source.
* @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);
* 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();
* }
* }
*
*
*
*
* createCanvas(100, 100, WEBGL);
* ambientLight(0);
* ambientMaterial(250);
* sphere(40);
*
*
*
* @alt
* evenly distributed light across a sphere
* evenly distributed light across a rotating 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);
* }
* function draw() {
* background(51);
* ambientLight(100); // white light
* ambientMaterial(255, 102, 94); // magenta material
* box(30);
* }
*
*
*
*
* @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
*
* A maximum of 5 directionalLight can be active at one time
* @method directionalLight
* @param {Number} v1 red or hue value (depending on the current
* color mode),
* @param {Number} v2 green or saturation value
* @param {Number} v3 blue or brightness value
* @param {p5.Vector} position the direction of the light
* @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
* 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
*
* A maximum of 5 pointLight can be active at one time
* @method pointLight
* @param {Number} v1 red or hue value (depending on the current
* color mode),
* @param {Number} v2 green or saturation value
* @param {Number} v3 blue or brightness value
* @param {Number} x x axis position
* @param {Number} y y axis position
* @param {Number} z z axis position
* @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
* 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);
* //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
* 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);
* }
* function draw() {
* background(0);
* lights();
* rotateX(millis() / 1000);
* rotateY(millis() / 1000);
* rotateZ(millis() / 1000);
* box();
* }
*
*
*
*
* @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.
*
* A maximum of 5 spotLight can be active at one time
* @method spotLight
* @param {Number} v1 red or hue value (depending on the current
* color mode),
* @param {Number} v2 green or saturation value
* @param {Number} v3 blue or brightness value
* @param {Number} x x axis position
* @param {Number} y y axis position
* @param {Number} z z axis position
* @param {Number} rx x axis direction of light
* @param {Number} ry y axis direction of light
* @param {Number} rz z axis direction of light
* @param {Number} [angle] optional parameter for angle. Defaults to PI/3
* @param {Number} [conc] optional parameter for concentration. Defaults to 100
* @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
* 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);
* //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
* Two spheres showing different colors
*/
_main.default.prototype.noLights = function() {
this._assert3d('noLights');
_main.default._validateParameters('noLights', arguments);
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;
return this;
};
var _default = _main.default;
exports.default = _default;
},
{ '../core/main': 59 }
],
105: [
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.
* @param {String} [fileType] The file extension of the model
* (
* 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);
* }
*
* .stl, .obj).
* @return {p5.Geometry} the p5.Geometry object
*
* @example
*
*
*
* @alt
* Vertically rotating 3-d octahedron.
*
* @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 teapot with red, green and blue gradient.
*/ /**
* @method loadModel
* @param {String} path
* @param {function(p5.Geometry)} [successCallback]
* @param {function(Event)} [failureCallback]
* @param {String} [fileType]
* @return {p5.Geometry} the p5.Geometry object
*/ _main.default.prototype.loadModel = function(path) {
_main.default._validateParameters('loadModel', arguments);
var normalize;
var successCallback;
var failureCallback;
var fileType = path.slice(-4);
if (typeof arguments[1] === 'boolean') {
normalize = arguments[1];
successCallback = arguments[2];
failureCallback = arguments[3];
if (typeof arguments[4] !== 'undefined') {
fileType = arguments[4];
}
} else {
normalize = false;
successCallback = arguments[1];
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;
if (fileType.match(/\.stl$/i)) {
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.match(/\.obj$/i)) {
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;
}
}
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;
}
/**
* Render a 3d model to the screen.
*
* @method model
* @param {p5.Geometry} model Loaded 3d model to be rendered
* @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 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': 59, './p5.Geometry': 108 }
],
106: [
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);
}
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 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
*
* //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
* 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
*
* 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.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
*
* // 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
* 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 is a material that is not affected by light.
* It is not reflective and is a placeholder material often used for debugging.
* Surfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue.
* You can view all possible materials in this
* example.
* @method normalMaterial
* @chainable
* @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
* 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
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(200);
* normalMaterial();
* sphere(40);
* }
*
*
*
*
*
* 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);
* }
*
*
*
*
* @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 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
* 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, 1, 0);
* vertex(50, 50, 1, 1);
* vertex(-50, 50, 0, 1);
* 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/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
* 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. Ambient material defines the color the object reflects under any lighting.
* For example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.
* Here's an example containing all possible materials.
* @method ambientMaterial
* @param {Number} v1 gray value, red or hue value
* (depending on the current color mode),
* @param {Number} [v2] green or saturation value
* @param {Number} [v3] blue or brightness value
* @chainable
* @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();
* }
*
*
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
* function draw() {
* background(0);
* noStroke();
* ambientLight(200);
* ambientMaterial(70, 130, 230);
* sphere(40);
* }
*
*
*
*
* // ambientLight is both red and blue (magenta),
* // so object only reflects it's red and blue components
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
* function draw() {
* background(70);
* ambientLight(100); // white light
* ambientMaterial(255, 0, 255); // pink material
* box(30);
* }
*
*
*
* @alt
* radiating light source from top right of canvas
* box reflecting only red and blue light
* box reflecting no light
*/
/**
* @method ambientMaterial
* @param {Number[]|String|p5.Color} color color, color Array, or CSS color 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.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
*
* // ambientLight is green. Since object does not contain
* // green, it does not reflect any light
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
* function draw() {
* background(70);
* ambientLight(0, 255, 0); // green light
* ambientMaterial(255, 0, 255); // pink material
* box(30);
* }
*
*
*
*
* @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. Specular material is a shiny reflective material.
* Like ambient material it also defines the color the object reflects under ambient lighting.
* For example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.
* For all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer.
* Here's an example containing all possible materials.
*
* @method specularMaterial
* @param {Number} gray number specifying value between white and black.
* @param {Number} [alpha] alpha value relative to current color range
* (default is 0-255)
* @chainable
*/
/**
* @method specularMaterial
* @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
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
* function draw() {
* background(0);
* noStroke();
* ambientLight(0);
* emissiveMaterial(130, 230, 0);
* 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, alpha) {
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);
* ambientLight(50);
* pointLight(250, 250, 250, 100, 100, 30);
* specularMaterial(250);
* sphere(40);
* }
*
*
*
* @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, or non-standard blendMode
* we need to enable blending on our gl context.
* @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;
var doBlend = isTexture || colors[colors.length - 1] < 1.0 || 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:
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;
}
if (!this._isErasing) {
this._cachedBlendMode = this.curBlendMode;
}
};
var _default = _main.default;
exports.default = _default;
},
{ '../core/constants': 48, '../core/main': 59, './p5.Texture': 115 }
],
107: [
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
* @constructor
* @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(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);
* }
*
*
*
*
* @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);
* }
*
*
*
* @alt
* White square repeatedly grows to fill canvas and then shrinks.
* An interactive example of a red cube with 3 sliders for moving it across x, y,
* z axis and 3 sliders for shifting it's center.
*/ _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
*
* //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
* 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!
* 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 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
*
* //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.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
* @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();
* }
*
*
* // Creates a camera object and animates it around a box.
* let camera;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(0);
* camera = createCamera();
* setCamera(camera);
* }
*
* function draw() {
* camera.lookAt(0, 0, 0);
* camera.setPosition(sin(frameCount / 60) * 200, 0, 100);
* 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 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 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;
* 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 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;
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.
// 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
*
* 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 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
*
* // 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 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
*
* // 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
* 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': 59 }
],
108: [
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.vertexColors = [];
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 = {};
};
/**
* computes faces for geometry objects based on the vertices.
* @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': 59 }
],
109: [
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': 59 }
],
110: [
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 };
}
_main.default.RenderBuffer = function(size, src, dst, attr, renderer, 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._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
*/
_main.default.RenderBuffer.prototype._prepareBuffer = function(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);
}
};
var _default = _main.default.RenderBuffer;
exports.default = _default;
},
{ '../core/main': 59 }
],
111: [
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);
}
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 };
}
/**
* 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 and TESS(WEBGL only)
* @chainable
*/ _main.default.RendererGL.prototype.beginShape = function(mode) {
this.immediateMode.shapeMode =
mode !== undefined ? mode : constants.TRIANGLE_FAN;
this.immediateMode.geometry.reset();
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];
}
var vert = new _main.default.Vector(x, y, z);
this.immediateMode.geometry.vertices.push(vert);
var vertexColor = this.curFillColor || [0.5, 0.5, 0.5, 1.0];
this.immediateMode.geometry.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.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;
};
/**
* 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.geometry.vertices,
this.immediateMode.buffers.point
);
return this;
}
this._processVertices.apply(this, arguments);
if (this._doFill) {
if (this.immediateMode.geometry.vertices.length > 1) {
this._drawImmediateFill();
}
}
if (this._doStroke) {
if (this.immediateMode.geometry.lineVertices.length > 1) {
this._drawImmediateStroke();
}
}
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 && this.drawMode !== constants.TEXTURE;
var shouldClose = mode === constants.CLOSE;
if (calculateStroke) {
this.immediateMode.geometry.edges = this._calculateEdges(
this.immediateMode.shapeMode,
this.immediateMode.geometry.vertices,
shouldClose
);
this.immediateMode.geometry._edgesToVertices();
}
// For hollow shapes, user must set mode to TESS
var convexShape = this.immediateMode.shapeMode === constants.TESS;
// We tesselate when drawing curves or convex shapes
var shouldTess =
(this.isBezier || this.isQuadratic || this.isCurve || convexShape) &&
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;
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.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;
default:
for (i = 0; i < verts.length - 1; i++) {
res.push([i, i + 1]);
}
break;
}
if (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() {
this.immediateMode.shapeMode = constants.TRIANGLES;
var contours = [
new Float32Array(this._vToNArray(this.immediateMode.geometry.vertices))
];
var polyTriangles = this._triangulate(contours);
this.immediateMode.geometry.vertices = [];
for (
var j = 0, polyTriLength = polyTriangles.length;
j < polyTriLength;
j = j + 3
) {
this.vertex(polyTriangles[j], polyTriangles[j + 1], polyTriangles[j + 2]);
}
};
/**
* 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 gl = this.GL;
var shader = this._getImmediateFillShader();
this._calculateNormals(this.immediateMode.geometry);
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);
}
// LINE_STRIP and LINES are not used for rendering, instead
// they only indicate a way to modify vertices during the _processVertices() step
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
if (
this.immediateMode.shapeMode === constants.LINE_STRIP ||
this.immediateMode.shapeMode === constants.LINES
) {
this.immediateMode.shapeMode = constants.TRIANGLE_FAN;
}
this._applyColorBlend(this.curFillColor);
gl.drawArrays(
this.immediateMode.shapeMode,
0,
this.immediateMode.geometry.vertices.length
);
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;
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;
}
}
}
this._applyColorBlend(this.curStrokeColor);
gl.drawArrays(gl.TRIANGLES, 0, this.immediateMode.geometry.lineVertices.length);
shader.unbindShader();
};
/**
* Called from _drawImmediateFill(). Currently adds default normals which
* only work for flat shapes.
* @parem
* @private
*/
_main.default.RendererGL.prototype._calculateNormals = function(geometry) {
geometry.vertices.forEach(function() {
geometry.vertexNormals.push(new _main.default.Vector(0, 0, 1));
});
};
var _default = _main.default.RendererGL;
exports.default = _default;
},
{ '../core/constants': 48, '../core/main': 59, './p5.RenderBuffer': 110 }
],
112: [
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');
_dereq_('./p5.RenderBuffer');
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
} //Retained Mode. The default mode for rendering 3D primitives
//in WEBGL.
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 retainedMode.geometry
hashCount++;
if (hashCount > 1000) {
var key = Object.keys(this.retainedMode.geometry)[0];
delete this.retainedMode.geometry[key];
hashCount--;
}
//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];
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(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);
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 geometry = this.retainedMode.geometry[gId];
if (this._doStroke && geometry.lineVertexCount > 0) {
var strokeShader = this._getRetainedStrokeShader();
this._setStrokeUniforms(strokeShader);
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (
var _iterator2 = this.retainedMode.buffers.stroke[Symbol.iterator](),
_step2;
!(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done);
_iteratorNormalCompletion2 = true
) {
var buff = _step2.value;
buff._prepareBuffer(geometry, strokeShader);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
this._applyColorBlend(this.curStrokeColor);
this._drawArrays(gl.TRIANGLES, gId);
strokeShader.unbindShader();
}
if (this._doFill) {
var fillShader = this._getRetainedFillShader();
this._setFillUniforms(fillShader);
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (
var _iterator3 = this.retainedMode.buffers.fill[Symbol.iterator](),
_step3;
!(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done);
_iteratorNormalCompletion3 = true
) {
var _buff = _step3.value;
_buff._prepareBuffer(geometry, fillShader);
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
if (geometry.indexBuffer) {
//vertex index buffer
this._bindBuffer(geometry.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.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) {
// 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': 59, './p5.RenderBuffer': 110, './p5.RendererGL': 113 }
],
113: [
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);
}
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 _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;
}
}
var lightingShader =
'precision highp float;\nprecision highp int;\n\nuniform mat4 uViewMatrix;\n\nuniform bool uUseLighting;\n\nuniform int uAmbientLightCount;\nuniform vec3 uAmbientColor[5];\n\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;\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 < 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 \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 highp 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 highp float;\nprecision highp int;\n\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform vec3 uAmbientColor[5];\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 < 5; i++) {\n if (i < uAmbientLightCount) {\n vAmbientColor += uAmbientColor[i];\n }\n }\n}\n',
phongFrag:
lightingShader +
'// include lighting.glsl\nprecision highp float;\nprecision highp int;\n\nuniform vec4 uMaterialColor;\nuniform vec4 uTint;\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) * (uTint / vec4(255, 255, 255, 255)) : 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 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;
// 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 = constants.BLEND;
this._cachedBlendMode = undefined;
this.blendExt = this.GL.getExtension('EXT_blend_minmax');
this._isBlending = false;
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();
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: {
// prettier-ignore
stroke: [
new _main.default.RenderBuffer(3, 'lineVertices', 'lineVertexBuffer', 'aPosition', this, this._flatten),
new _main.default.RenderBuffer(4, 'lineNormals', 'lineNormalBuffer', 'aDirection', this, this._flatten)],
// prettier-ignore
fill: [
new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', this, this._vToNArray),
new _main.default.RenderBuffer(3, 'vertexNormals', 'normalBuffer', 'aNormal', this, this._vToNArray),
new _main.default.RenderBuffer(4, 'vertexColors', 'colorBuffer', 'aMaterialColor', this),
new _main.default.RenderBuffer(3, 'vertexAmbients', 'ambientBuffer', 'aAmbientColor', this),
//new BufferDef(3, 'vertexSpeculars', 'specularBuffer', 'aSpecularColor'),
new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', this, this._flatten)],
// prettier-ignore
text: [
new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', this, this._vToNArray),
new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', this, this._flatten)]
}
};
// Immediate Mode
// Geometry and Material hashes stored here
this.immediateMode = {
geometry: new _main.default.Geometry(),
shapeMode: constants.TRIANGLE_FAN,
_bezierVertex: [],
_quadraticVertex: [],
_curveVertex: [],
buffers: {
// prettier-ignore
fill: [
new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', this, this._vToNArray),
new _main.default.RenderBuffer(3, 'vertexNormals', 'normalBuffer', 'aNormal', this, this._vToNArray),
new _main.default.RenderBuffer(4, 'vertexColors', 'colorBuffer', 'aVertexColor', this),
new _main.default.RenderBuffer(3, 'vertexAmbients', 'ambientBuffer', 'aAmbientColor', this),
new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', this, this._flatten)],
// prettier-ignore
stroke: [
new _main.default.RenderBuffer(3, 'lineVertices', 'lineVertexBuffer', 'aPosition', this, this._flatten),
new _main.default.RenderBuffer(4, 'lineNormals', 'lineNormalBuffer', 'aDirection', this, this._flatten)],
point: this.GL.createBuffer()
}
};
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 = {};
this._curShader = undefined;
return this;
};
_main.default.RendererGL.prototype = Object.create(
_main.default.Renderer.prototype
);
//////////////////////////////////////////////
// Setting
//////////////////////////////////////////////
_main.default.RendererGL.prototype._setAttributeDefaults = function(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: false,
preserveDrawingBuffer: true,
perPixelLighting: true
};
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:
*
* 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);
* }
*
* * 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 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 otherwise per-vertex lighting is used. * default is true. * * @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();
* }
*
*
*
*
* @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)) {
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.clear(this.GL.COLOR_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
*
* // 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
* 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);
* noStroke();
* 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.filter = function(filterType) {
// filter can be achieved using custom shaders.
// https://github.com/aferriss/p5jsShaderExamples
// https://itp-xstory.github.io/p5js-shaders/#/
console.error('filter() does not work 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._applyBlendMode(constants.REMOVE);
this._isErasing = true;
this._cachedFillStyle = this.curFillColor.slice();
this.curFillColor = [1, 1, 1, opacityFill / 255];
this._cachedStrokeStyle = this.curStrokeColor.slice();
this.curStrokeColor = [1, 1, 1, opacityStroke / 255];
}
};
_main.default.RendererGL.prototype.noErase = function() {
if (this._isErasing) {
this._isErasing = false;
this.curFillColor = this._cachedFillStyle.slice();
this.curStrokeColor = this._cachedStrokeStyle.slice();
this.blendMode(this._cachedBlendMode);
}
};
/**
* Change weight of stroke
* @method strokeWeight
* @param {Number} stroke weight to be used for drawing
* @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 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.retainedMode.geometry[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() {
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.
*/
_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 * 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
*/
_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
//////////////////////////////
_main.default.RendererGL.prototype._arraysEqual = function(a, b) {
var aLength = a.length;
if (aLength !== b.length) return false;
for (var i = 0; i < aLength; i++) {
if (a[i] !== b[i]) return false;
}
return true;
};
_main.default.RendererGL.prototype._isTypedArray = function(arr) {
var res = false;
res = arr instanceof Float32Array;
res = arr instanceof Float64Array;
res = arr instanceof Int16Array;
res = arr instanceof Uint16Array;
res = arr instanceof Uint32Array;
return res;
};
/**
* 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': 48,
'../core/main': 59,
'../core/p5.Renderer': 62,
'./p5.Camera': 107,
'./p5.Matrix': 109,
'./p5.Shader': 114,
libtess: 32,
path: 35
}
],
114: [
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
* @constructor
* @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;
uniform._cachedData = undefined;
if (uniform.type === gl.SAMPLER_2D) {
uniform.samplerIndex = samplerIndex;
samplerIndex++;
this.samplers.push(uniform);
}
uniform.isArray =
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_VEC3 ||
uniform.type === gl.INT_VEC4;
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;
if (this._renderer._curShader !== this) {
gl.useProgram(this._glProgram);
this._renderer._curShader = this;
}
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
*
* 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
* 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) {
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 {
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 = 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.isNormalShader = function() {
return this.attributes.aNormal !== 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;
if (!attr.enabled) {
gl.enableVertexAttribArray(loc);
attr.enabled = true;
}
this._renderer.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': 59 }
],
115: [
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);
}
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 };
}
/**
* 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': 48, '../core/main': 59 }
],
116: [
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);
}
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 };
}
// 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.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);
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;
p.pop();
}
return p;
};
},
{
'../core/constants': 48,
'../core/main': 59,
'./p5.RendererGL.Retained': 112,
'./p5.Shader': 114
}
],
117: [
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. Check out {{link}} for more information about why.",
checkUserDefinedFns:
"It seems that you may have accidentally written {{name}} instead of {{actualName}}.\n\nPlease 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. (More info at {{link}})',
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:
'{{func}}() was expecting {{formatType}} for the {{position}} parameter, received an empty variable instead. {{location}}\n\nIf not intentional, this is often a problem with scope: {{link}}',
type_TOO_FEW_ARGUMENTS:
'{{func}}() was expecting at least {{minParams}} arguments, but received only {{argCount}}. {{location}}',
type_TOO_MANY_ARGUMENTS:
'{{func}}() was expecting no more than {{maxParams}} arguments, but received {{argCount}}. {{location}}',
type_WRONG_TYPE:
'{{func}}() was expecting {{formatType}} for the {{position}} parameter, received {{argType}} instead. {{location}}'
},
globalErrors: {
reference: {
notDefined:
'There\'s an error due to "{{symbol}}" not being defined in the current scope {{location}}.\n\nIf you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive). For more:\n{{url1}}\n{{url2}}'
},
stackSubseq:
'▶️ Called from line {{line}} in "{{func}}" in {{file}} ({{location}})\n\n',
stackTop:
'▶️ Error at line {{line}} in "{{func}}" in {{file}} ({{location}})\n\n',
syntax: {
invalidToken:
"There's a syntax error due to a symbol that JavaScript doesn't recognize or didn't expect at it's place.\nFor more: {{url}}",
unexpectedToken:
"There's a syntax error due to a symbol that wasn't expected at it's place.\nUsually this is due to a typo. Check the line number in the error below for anything missing/extra.\nFor more: {{url}}"
},
type: {
notfunc:
'There\'s an error as "{{symbol}}" could not be called as a function {{location}}.\nCheck the spelling, letter-casing (Javacript is case-sensitive) and its type.\nFor more: {{url}}',
notfuncObj:
'There\'s an error as "{{symbol}}" could not be called as a function {{location}}.\nVerify whether "{{obj}}" has "{{symbol}}" in it and check the spelling, letter-casing (Javacript is case-sensitive) and its type.\nFor more: {{url}}'
}
},
libraryError:
'An error with message "{{error}}" occured inside the p5js library when {{func}} was called {{location}}\n\nIf not stated otherwise, it might be an issue with the arguments passed to {{func}}.',
location: '(on line {{line}} in {{file}} [{{location}}])',
misspelling:
'It seems that you may have accidentally written "{{name}}" instead of "{{actualName}}" {{location}}.\n\nPlease correct it to {{actualName}} if you wish to use the {{type}} from p5.js',
misspelling_plural:
'It seems that you may have accidentally written "{{name}}" {{location}}.\n\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\nFor more details, see: {{link}}",
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}}',
welcome:
'Welcome! This is your friendly debugger. To turn me off, switch to using p5.min.js.',
wrongPreload:
'An error with message "{{error}}" occured inside the p5js library when "{{func}}" was called {{location}}.\n\nIf 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.'
}
};
},
{}
],
118: [
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'];
exports.languages = languages;
},
{ './en/translation': 117 }
]
},
{},
[43]
)(43);
});
* // 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;
* }
*
*