+ *


+ * 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;
+ * }
+ * describe(`vertical black lines end down and up from center to
+ *   form spike pattern.`);
+ *

+ */ + _main.default.prototype.tan = function (angle) { + return Math.tan(this._toRadians(angle)); + }; + /** + * Converts a radian measurement to its corresponding value in degrees. + * Radians and degrees are two ways of measuring the same thing. There are + * 360 degrees in a circle and 2*PI radians in a circle. For example, + * 90° = PI/2 = 1.5707964. This function does not take into account the + * current angleMode(). + * + * @method degrees + * @param {Number} radians the radians value to convert to degrees + * @return {Number} the converted angle + * + * @example + *

+ *


+ * let rad = PI / 4;
+ * let deg = degrees(rad);
+ * print(rad + ' radians is ' + deg + ' degrees');
+ * // Prints: 0.7853981633974483 radians is 45 degrees
+ *

+ *

+ */ + _main.default.prototype.degrees = function (angle) { + return angle * constants.RAD_TO_DEG; + }; + /** + * Converts a degree measurement to its corresponding value in radians. + * Radians and degrees are two ways of measuring the same thing. There are + * 360 degrees in a circle and 2*PI radians in a circle. For example, + * 90° = PI/2 = 1.5707964. This function does not take into account the + * current angleMode. + * + * @method radians + * @param {Number} degrees the degree value to convert to radians + * @return {Number} the converted angle + * + * @example + *

+ *


+ * let deg = 45.0;
+ * let rad = radians(deg);
+ * print(deg + ' degrees is ' + rad + ' radians');
+ * // Prints: 45 degrees is 0.7853981633974483 radians
+ *

+ *

+ */ + _main.default.prototype.radians = function (angle) { + return angle * constants.DEG_TO_RAD; + }; + /** + * Sets the current mode of p5 to the given mode. Default mode is RADIANS. + * + * Calling angleMode() with no arguments returns current anglemode. + * @method angleMode + * @param {Constant} mode either RADIANS or DEGREES + * @example + *

+ *


+ * 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
+ *   describe(`40×10 rect in center rotates with mouse moves.
+ *     20×10 rect moves faster.`);
+ * }
+ *

+ *

+ * + */ + /** + * @method angleMode + * @return {Constant} mode either RADIANS or DEGREES + */ + _main.default.prototype.angleMode = function (mode) { + _main.default._validateParameters('angleMode', arguments); + if (typeof mode === 'undefined') { + return this._angleMode; + } else if (mode === constants.DEGREES || mode === constants.RADIANS) { + 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': 278, + '../core/main': 290, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 326: [ + 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 edge of the text + * to the y value. + * + * @method textAlign + * @param {Constant} horizAlign horizontal alignment, either LEFT, + * CENTER, or RIGHT + * @param {Constant} [vertAlign] vertical alignment, either TOP, + * BOTTOM, CENTER, or BASELINE + * @chainable + * @example + *

+ *


+ * textSize(16);
+ * textAlign(RIGHT);
+ * text('ABCD', 50, 30);
+ * textAlign(CENTER);
+ * text('EFGH', 50, 50);
+ * textAlign(LEFT);
+ * text('IJKL', 50, 70);
+ * describe(`Letters ABCD displayed at top left, EFGH at center, and
+ *   IJKL at bottom right.`);
+ *

+ *

+ * + *

+ *


+ * 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);
+ *
+ * describe(`The names of the four vertical alignments (TOP, CENTER, BASELINE,
+ *   and BOTTOM) rendered each showing that alignment's placement relative to a
+ *   horizontal line.`);
+ *

+ *

+ */ + /** + * @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 + *

+ *


+ * 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);
+ *
+ * describe(`A set of L1, L2, and L3, displayed vertically 3 times.
+ *   Spacing increases for each set.`);
+ *

+ *

+ */ + /** + * @method textLeading + * @return {Number} + */ + _main.default.prototype.textLeading = function (theLeading) { + var _this$_renderer2; + _main.default._validateParameters('textLeading', arguments); + return (_this$_renderer2 = this._renderer).textLeading.apply(_this$_renderer2, arguments); + }; + /** + * Sets/gets the current font size. This size will be used in all subsequent + * calls to the text() function. Font size is measured in pixels. + * + * @method textSize + * @param {Number} theSize the size of the letters in units of pixels + * @chainable + * + * @example + *

+ *


+ * textSize(12);
+ * text('Font Size 12', 10, 30);
+ * textSize(14);
+ * text('Font Size 14', 10, 60);
+ * textSize(16);
+ * text('Font Size 16', 10, 90);
+ *
+ * describe(`'Font Size 12' displayed small,
+ *   'Font Size 14' medium, and
+ *   'Font Size 16' large`);
+ *

+ *

+ */ + /** + * @method textSize + * @return {Number} + */ + _main.default.prototype.textSize = function (theSize) { + var _this$_renderer3; + _main.default._validateParameters('textSize', arguments); + return (_this$_renderer3 = this._renderer).textSize.apply(_this$_renderer3, arguments); + }; + /** + * Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC. + * Note: this may be is overridden by CSS styling. For non-system fonts + * (opentype, truetype, etc.) please load styled fonts instead. + * + * @method textStyle + * @param {Constant} theStyle styling for text, either NORMAL, + * ITALIC, BOLD or BOLDITALIC + * @chainable + * @example + *

+ *


+ * strokeWeight(0);
+ * textSize(12);
+ * textStyle(NORMAL);
+ * text('Font Style Normal', 10, 15);
+ * textStyle(ITALIC);
+ * text('Font Style Italic', 10, 40);
+ * textStyle(BOLD);
+ * text('Font Style Bold', 10, 65);
+ * textStyle(BOLDITALIC);
+ * text('Font Style Bold Italic', 10, 90);
+ * describe(`The words “Font Style Normal” displayed normally,
+ *   “Font Style Italic” in italic,
+ *   “Font Style Bold” in bold, and
+ *   “Font Style Bold Italic” in bold italics.`);
+ *

+ *

+ */ + /** + * @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 + *

+ *


+ * 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);
+ *
+ * describe('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 + *

+ *


+ * let base = height * 0.75;
+ * let scalar = 0.8; // Different for each font
+ *
+ * textSize(32); // Set initial text size
+ * let asc = textAscent() * scalar; // Calc ascent
+ * line(0, base - asc, width, base - asc);
+ * text('dp', 0, base); // Draw text on baseline
+ *
+ * textSize(64); // Increase text size
+ * asc = textAscent() * scalar; // Recalc ascent
+ * line(40, base - asc, width, base - asc);
+ * text('dp', 40, base); // Draw text on baseline
+ *

+ *

+ */ + _main.default.prototype.textAscent = function () { + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + _main.default._validateParameters('textAscent', args); + return this._renderer.textAscent(); + }; + /** + * Returns the descent of the current font at its current size. The descent + * represents the distance, in pixels, of the character with the longest + * descender below the baseline. + * @method textDescent + * @return {Number} + * @example + *

+ *


+ * let base = height * 0.75;
+ * let scalar = 0.8; // Different for each font
+ *
+ * textSize(32); // Set initial text size
+ * let desc = textDescent() * scalar; // Calc descent
+ * line(0, base + desc, width, base + desc);
+ * text('dp', 0, base); // Draw text on baseline
+ *
+ * textSize(64); // Increase text size
+ * desc = textDescent() * scalar; // Recalc descent
+ * line(40, base + desc, width, base + desc);
+ * text('dp', 40, base); // Draw text on baseline
+ *

+ *

+ */ + _main.default.prototype.textDescent = function () { + for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { + args[_key3] = arguments[_key3]; + } + _main.default._validateParameters('textDescent', args); + return this._renderer.textDescent(); + }; + /** + * Helper function to measure ascent and descent. + */ + _main.default.prototype._updateTextMetrics = function () { + return this._renderer._updateTextMetrics(); + }; + /** + * Specifies how lines of text are wrapped within a text box. This requires a max-width set on the text area, specified in text() as parameter `x2`. + * + * WORD wrap style only breaks lines at spaces. A single string without spaces that exceeds the boundaries of the canvas or text area is not truncated, and will overflow the desired area, disappearing at the canvas edge. + * + * CHAR wrap style breaks lines wherever needed to stay within the text box. + * + * WORD is the default wrap style, and both styles will still break lines at any line breaks (`\n`) specified in the original text. The text area max-height parameter (`y2`) also still applies to wrapped text in both styles, lines of text that do not fit within the text area will not be drawn to the screen. + * + * @method textWrap + * @param {Constant} wrapStyle text wrapping style, either WORD or CHAR + * @return {String} wrapStyle + * @example + *

+ *


+ * textSize(20);
+ * textWrap(WORD);
+ * text('Have a wonderful day', 0, 10, 100);
+ *

+ *


+ * textSize(20);
+ * textWrap(CHAR);
+ * text('Have a wonderful day', 0, 10, 100);
+ *

+ *


+ * textSize(20);
+ * textWrap(CHAR);
+ * text('祝你有美好的一天', 0, 10, 100);
+ *

+ *


+ * const scream = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+ * textSize(20);
+ * textWrap(WORD);
+ * text(scream, 0, 0, 100);
+ * fill(0, 0, 0, 75);
+ * text(scream, 0, 20, 100);
+ * fill(0, 0, 0, 50);
+ * text(scream, 0, 40, 100);
+ * fill(0, 0, 0, 25);
+ * text(scream, 0, 60, 100);
+ * strokeWeight(2);
+ * ellipseMode(CENTER);
+ * fill(255);
+ * ellipse(15, 50, 15, 15);
+ * fill(0);
+ * ellipse(11, 47, 1, 1);
+ * ellipse(19, 47, 1, 1);
+ * ellipse(15, 52, 5, 5);
+ * line(15, 60, 15, 70);
+ * line(15, 65, 5, 55);
+ * line(15, 65, 25, 55);
+ * line(15, 70, 10, 80);
+ * line(15, 70, 20, 80);
+ *

+ *

+ */ + _main.default.prototype.textWrap = function (wrapStyle) { + if (wrapStyle !== 'WORD' && wrapStyle !== 'CHAR') { + throw 'Error: textWrap accepts only WORD or CHAR'; + } + return this._renderer.textWrap(wrapStyle); + }; + var _default = _main.default; + exports.default = _default; + }, + { + '../core/main': 290 + } + ], + 327: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.includes'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.last-index-of'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.includes'); + _dereq_('core-js/modules/es.array.last-index-of'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.string.split'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + var constants = _interopRequireWildcard(_dereq_('../core/constants')); + var opentype = _interopRequireWildcard(_dereq_('opentype.js')); + _dereq_('../core/friendly_errors/validate_params'); + _dereq_('../core/friendly_errors/file_errors'); + _dereq_('../core/friendly_errors/fes_core'); + function _getRequireWildcardCache() { + if (typeof WeakMap !== 'function') return null; + var cache = new WeakMap(); + _getRequireWildcardCache = function _getRequireWildcardCache() { + return cache; + }; + return cache; + } + function _interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } + if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') { + return { + default: + obj + }; + } + var cache = _getRequireWildcardCache(); + if (cache && cache.has(obj)) { + return cache.get(obj); + } + var newObj = { + }; + var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; + if (desc && (desc.get || desc.set)) { + Object.defineProperty(newObj, key, desc); + } else { + newObj[key] = obj[key]; + } + } + } + newObj.default = obj; + if (cache) { + cache.set(obj, newObj); + } + return newObj; + } + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module Typography + * @submodule Loading & Displaying + * @for p5 + * @requires core + */ + /** + * Loads an opentype font file (.otf, .ttf) from a file or a URL, + * and returns a p5.Font object. This function + * is asynchronous, meaning it may not finish before the next line in + * your sketch is executed. + * + * The path to the font should be relative to the HTML file + * that links in your sketch. Loading fonts from a URL or other + * remote location may be blocked due to your browser's built-in + * security. + * + * @method loadFont + * @param {String} path name of the file or url to load + * @param {Function} [callback] function to be executed after + * loadFont() completes + * @param {Function} [onError] function to be executed if + * an error occurs + * @return {p5.Font} p5.Font object + * @example + * + * Calling loadFont() inside preload() guarantees + * that the load operation will have completed before setup() + * and draw() are called. + * + *


+ * let myFont;
+ * function preload() {
+ *   myFont = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ *   fill('#ED225D');
+ *   textFont(myFont);
+ *   textSize(36);
+ *   text('p5*js', 10, 50);
+ * }
+ *

+ * + * Outside of preload(), you may supply a + * callback function to handle the object: + * + *


+ * function setup() {
+ *   loadFont('assets/inconsolata.otf', drawText);
+ * }
+ *
+ * function drawText(font) {
+ *   fill('#ED225D');
+ *   textFont(font, 36);
+ *   text('p5*js', 10, 50);
+ * }
+ *

+ * + * You can also use the font filename string (without the file extension) to + * style other HTML elements. + * + *


+ * function preload() {
+ *   loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ *   let myDiv = createDiv('hello there');
+ *   myDiv.style('font-family', 'Inconsolata');
+ * }
+ *

+ * + * @alt + * p5*js in p5's theme dark pink + * p5*js in p5's theme dark pink + */ + + _main.default.prototype.loadFont = function (path, onSuccess, onError) { + _main.default._validateParameters('loadFont', arguments); + var p5Font = new _main.default.Font(this); + var self = this; + opentype.load(path, function (err, font) { + if (err) { + _main.default._friendlyFileLoadError(4, path); + if (typeof onError !== 'undefined') { + return onError(err); + } + console.error(err, path); + return; + } + p5Font.font = font; + if (typeof onSuccess !== 'undefined') { + onSuccess(p5Font); + } + self._decrementPreload(); // check that we have an acceptable font type + var validFontTypes = [ + 'ttf', + 'otf', + 'woff', + 'woff2' + ]; + var fileNoPath = path.split('\\').pop().split('/').pop(); + var lastDotIdx = fileNoPath.lastIndexOf('.'); + var fontFamily; + var newStyle; + var fileExt = lastDotIdx < 1 ? null : fileNoPath.slice(lastDotIdx + 1); // if so, add it to the DOM (name-only) for use with DOM module + if (validFontTypes.includes(fileExt)) { + fontFamily = fileNoPath.slice(0, lastDotIdx !== - 1 ? lastDotIdx : 0); + newStyle = document.createElement('style'); + newStyle.appendChild(document.createTextNode('\n@font-face {\nfont-family: '.concat(fontFamily, ';\nsrc: url(').concat(path, ');\n}\n'))); + document.head.appendChild(newStyle); + } + }); + return p5Font; + }; + /** + * Draws text to the 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. + * Learn more about working with text in webgl mode on the + * wiki. + * + * @method text + * @param {String|Object|Array|Number|Boolean} str the alphanumeric + * symbols to be displayed + * @param {Number} x x-coordinate of text + * @param {Number} y y-coordinate of text + * @param {Number} [x2] by default, the width of the text box, + * see rectMode() for more info + * @param {Number} [y2] by default, the height of the text box, + * see rectMode() for more info + * @chainable + * @example + *

+ *


+ * textSize(32);
+ * text('word', 10, 30);
+ * fill(0, 102, 153);
+ * text('word', 10, 60);
+ * fill(0, 102, 153, 51);
+ * text('word', 10, 90);
+ *

+ *


+ * let s = 'The quick brown fox jumped over the lazy dog.';
+ * fill(50);
+ * text(s, 10, 10, 70, 80); // Text wraps within text box
+ *

+ *

+ * + *

+ *


+ * let inconsolata;
+ * function preload() {
+ *   inconsolata = loadFont('assets/inconsolata.otf');
+ * }
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   textFont(inconsolata);
+ *   textSize(width / 3);
+ *   textAlign(CENTER, CENTER);
+ * }
+ * function draw() {
+ *   background(0);
+ *   let time = millis();
+ *   rotateX(time / 1000);
+ *   rotateZ(time / 1234);
+ *   text('p5.js', 0, 0);
+ * }
+ *

+ *

+ * + * @alt + * 'word' displayed 3 times going from black, blue to translucent blue + * The 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. + * If textFont() is called without any argument, it will return the current font if one has + * been set already. If not, it will return the name of the default font as a string. + * If textFont() is called with a font to use, it will return the p5 object. + * + * WEBGL: Only fonts loaded via loadFont() are supported. + * + * @method textFont + * @return {Object} the current font / p5 Object + * + * @example + *

+ *


+ * fill(0);
+ * textSize(12);
+ * textFont('Georgia');
+ * text('Georgia', 12, 30);
+ * textFont('Helvetica');
+ * text('Helvetica', 12, 60);
+ *

+ *


+ * let fontRegular, fontItalic, fontBold;
+ * function preload() {
+ *   fontRegular = loadFont('assets/Regular.otf');
+ *   fontItalic = loadFont('assets/Italic.ttf');
+ *   fontBold = loadFont('assets/Bold.ttf');
+ * }
+ * function setup() {
+ *   background(210);
+ *   fill(0)
+    .strokeWeight(0)
+    .textSize(10);
+ *   textFont(fontRegular);
+ *   text('Font Style Normal', 10, 30);
+ *   textFont(fontItalic);
+ *   text('Font Style Italic', 10, 50);
+ *   textFont(fontBold);
+ *   text('Font Style Bold', 10, 70);
+ * }
+ *

+ *

+ * + * @alt + * 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); + if (!this._renderer._leadingSet) { + // only use a default value if not previously set (#5181) + this._renderer._setProperty('_textLeading', theSize * constants._DEFAULT_LEADMULT); + } + } + return this._renderer._applyTextProperties(); + } + return this._renderer._textFont; + }; + var _default = _main.default; + exports.default = _default; + }, + { + '../core/constants': 278, + '../core/friendly_errors/fes_core': 281, + '../core/friendly_errors/file_errors': 282, + '../core/friendly_errors/validate_params': 285, + '../core/main': 290, + 'core-js/modules/es.array.concat': 167, + 'core-js/modules/es.array.includes': 174, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.array.last-index-of': 178, + 'core-js/modules/es.array.slice': 180, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.exec': 199, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.string.split': 209, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248, + 'opentype.js': 263 + } + ], + 328: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.fill'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.join'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.array.splice'); + _dereq_('core-js/modules/es.function.name'); + _dereq_('core-js/modules/es.number.to-fixed'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.fill'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.join'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.array.splice'); + _dereq_('core-js/modules/es.function.name'); + _dereq_('core-js/modules/es.number.to-fixed'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + var constants = _interopRequireWildcard(_dereq_('../core/constants')); + function _getRequireWildcardCache() { + if (typeof WeakMap !== 'function') return null; + var cache = new WeakMap(); + _getRequireWildcardCache = function _getRequireWildcardCache() { + return cache; + }; + return cache; + } + function _interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } + if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') { + return { + default: + obj + }; + } + var cache = _getRequireWildcardCache(); + if (cache && cache.has(obj)) { + return cache.get(obj); + } + var newObj = { + }; + var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; + if (desc && (desc.get || desc.set)) { + Object.defineProperty(newObj, key, desc); + } else { + newObj[key] = obj[key]; + } + } + } + newObj.default = obj; + if (cache) { + cache.set(obj, newObj); + } + return newObj; + } + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } /** + * 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 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);
+ *
+ *   describe(`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: + * + *
sampleFactor - the ratio of path-length to number of samples + * (default=.1); higher values yield more points and are therefore + * more precise + * + *
simplifyThreshold - if set to a non-zero value, collinear points will be + * be removed from the polygon; the value represents the threshold angle to use + * when determining whether two edges are collinear + * + * @return {Array} an array of points, each with x, y, alpha (the path angle) + * @example + *

+ *


+ * let font;
+ * function preload() {
+ *   font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * let points;
+ * let bounds;
+ * function setup() {
+ *   createCanvas(100, 100);
+ *   stroke(0);
+ *   fill(255, 104, 204);
+ *
+ *   points = font.textToPoints('p5', 0, 0, 10, {
+ *     sampleFactor: 5,
+ *     simplifyThreshold: 0
+ *   });
+ *   bounds = font.textBounds(' p5 ', 0, 0, 10);
+ * }
+ *
+ * function draw() {
+ *   background(255);
+ *   beginShape();
+ *   translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);
+ *   for (let i = 0; i < points.length; i++) {
+ *     let p = points[i];
+ *     vertex(
+ *       p.x * width / bounds.w +
+ *         sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,
+ *       p.y * height / bounds.h
+ *     );
+ *   }
+ *   endShape(CLOSE);
+ * }
+ *

+ *

+ */ + _main.default.Font.prototype.textToPoints = function (txt, x, y, fontSize, options) { + var xoff = 0; + var result = [ + ]; + var glyphs = this._getGlyphs(txt); + function isSpace(i) { + return glyphs[i].name && glyphs[i].name === 'space' || txt.length === glyphs.length && txt[i] === ' ' //|| + //(glyphs[i].index && glyphs[i].index === 3) + ; + } + fontSize = fontSize || this.parent._renderer._textSize; + for (var i = 0; i < glyphs.length; i++) { + if (!isSpace(i)) { + // fix to #1817, #2069 + var gpath = glyphs[i].getPath(x, y, fontSize), + paths = splitPaths(gpath.commands); + for (var j = 0; j < paths.length; j++) { + var pts = pathToPoints(paths[j], options); + for (var k = 0; k < pts.length; k++) { + pts[k].x += xoff; + result.push(pts[k]); + } + } + } + xoff += glyphs[i].advanceWidth * this._scale(fontSize); + } + return result; + }; // ----------------------------- End API ------------------------------ + /** + * Returns the set of opentype glyphs for the supplied string. + * + * Note that there is not a strict one-to-one mapping between characters + * and glyphs, so the list of returned glyphs can be larger or smaller + * than the length of the given string. + * + * @private + * @param {String} str the string to be converted + * @return {Array} the opentype glyphs + */ + _main.default.Font.prototype._getGlyphs = function (str) { + return this.font.stringToGlyphs(str); + }; + /** + * Returns an opentype path for the supplied string and position. + * + * @private + * @param {String} line a line of text + * @param {Number} x x-position + * @param {Number} y y-position + * @param {Object} options opentype options (optional) + * @return {Object} the opentype path + */ + _main.default.Font.prototype._getPath = function (line, x, y, options) { + var p = options && options.renderer && options.renderer._pInst || this.parent, + renderer = p._renderer, + pos = this._handleAlignment(renderer, line, x, y); + return this.font.getPath(line, pos.x, pos.y, renderer._textSize, options); + }; + /* + * Creates an SVG-formatted path-data string + * (See http://www.w3.org/TR/SVG/paths.html#PathData) + * from the given opentype path or string/position + * + * @param {Object} path an opentype path, OR the following: + * + * @param {String} line a line of text + * @param {Number} x x-position + * @param {Number} y y-position + * @param {Object} options opentype options (optional), set options.decimals + * to set the decimal precision of the path-data + * + * @return {Object} this p5.Font object + */ + _main.default.Font.prototype._getPathData = function (line, x, y, options) { + var decimals = 3; // create path from string/position + if (typeof line === 'string' && arguments.length > 2) { + line = this._getPath(line, x, y, options); + } else if (_typeof(x) === 'object') { + // handle options specified in 2nd arg + options = x; + } // handle svg arguments + + if (options && typeof options.decimals === 'number') { + decimals = options.decimals; + } + return line.toPathData(decimals); + }; + /* + * Creates an SVG element, as a string, + * from the given opentype path or string/position + * + * @param {Object} path an opentype path, OR the following: + * + * @param {String} line a line of text + * @param {Number} x x-position + * @param {Number} y y-position + * @param {Object} options opentype options (optional), set options.decimals + * to set the decimal precision of the path-data in the element, + * options.fill to set the fill color for the element, + * options.stroke to set the stroke color for the element, + * options.strokeWidth to set the strokeWidth for the element. + * + * @return {Object} this p5.Font object + */ + _main.default.Font.prototype._getSVG = function (line, x, y, options) { + var decimals = 3; // create path from string/position + if (typeof line === 'string' && arguments.length > 2) { + line = this._getPath(line, x, y, options); + } else if (_typeof(x) === 'object') { + // handle options specified in 2nd arg + options = x; + } // handle svg arguments + + if (options) { + if (typeof options.decimals === 'number') { + decimals = options.decimals; + } + if (typeof options.strokeWidth === 'number') { + line.strokeWidth = options.strokeWidth; + } + if (typeof options.fill !== 'undefined') { + line.fill = options.fill; + } + if (typeof options.stroke !== 'undefined') { + line.stroke = options.stroke; + } + } + return line.toSVG(decimals); + }; + /* + * Renders an opentype path or string/position + * to the current graphics context + * + * @param {Object} path an opentype path, OR the following: + * + * @param {String} line a line of text + * @param {Number} x x-position + * @param {Number} y y-position + * @param {Object} options opentype options (optional) + * + * @return {p5.Font} this p5.Font object + */ + _main.default.Font.prototype._renderPath = function (line, x, y, options) { + var pdata; + var pg = options && options.renderer || this.parent._renderer; + var ctx = pg.drawingContext; + if (_typeof(line) === 'object' && line.commands) { + pdata = line.commands; + } else { + //pos = handleAlignment(p, ctx, line, x, y); + pdata = this._getPath(line, x, y, options).commands; + } + ctx.beginPath(); + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + try { + for (var _iterator = pdata[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var cmd = _step.value; + if (cmd.type === 'M') { + ctx.moveTo(cmd.x, cmd.y); + } else if (cmd.type === 'L') { + ctx.lineTo(cmd.x, cmd.y); + } else if (cmd.type === 'C') { + ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y); + } else if (cmd.type === 'Q') { + ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y); + } else if (cmd.type === 'Z') { + ctx.closePath(); + } + } // only draw stroke if manually set by user + + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return != null) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + if (pg._doStroke && pg._strokeSet) { + ctx.stroke(); + } + if (pg._doFill) { + // if fill hasn't been set by user, use default-text-fill + if (!pg._fillSet) { + pg._setFill(constants._DEFAULT_TEXT_FILL); + } + ctx.fill(); + } + return this; + }; + _main.default.Font.prototype._textWidth = function (str, fontSize) { + return this.font.getAdvanceWidth(str, fontSize); + }; + _main.default.Font.prototype._textAscent = function (fontSize) { + return this.font.ascender * this._scale(fontSize); + }; + _main.default.Font.prototype._textDescent = function (fontSize) { + return - this.font.descender * this._scale(fontSize); + }; + _main.default.Font.prototype._scale = function (fontSize) { + return 1 / this.font.unitsPerEm * (fontSize || this.parent._renderer._textSize); + }; + _main.default.Font.prototype._handleAlignment = function (renderer, line, x, y, textWidth) { + var fontSize = renderer._textSize; + if (typeof textWidth === 'undefined') { + textWidth = this._textWidth(line, fontSize); + } + switch (renderer._textAlign) { + case constants.CENTER: + x -= textWidth / 2; + break; + case constants.RIGHT: + x -= textWidth; + break; + } + switch (renderer._textBaseline) { + case constants.TOP: + y += this._textAscent(fontSize); + break; + case constants.CENTER: + y += this._textAscent(fontSize) / 2; + break; + case constants.BOTTOM: + y -= this._textDescent(fontSize); + break; + } + return { + x: x, + y: y + }; + }; // path-utils + function pathToPoints(cmds, options) { + var opts = parseOpts(options, { + sampleFactor: 0.1, + simplifyThreshold: 0 + }); + var // total-length + len = pointAtLength(cmds, 0, 1), + t = len / (len * opts.sampleFactor), + pts = [ + ]; + for (var i = 0; i < len; i += t) { + pts.push(pointAtLength(cmds, i)); + } + if (opts.simplifyThreshold) { + simplify(pts, opts.simplifyThreshold); + } + return pts; + } + function simplify(pts) { + var angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var num = 0; + for (var i = pts.length - 1; pts.length > 3 && i >= 0; --i) { + if (collinear(at(pts, i - 1), at(pts, i), at(pts, i + 1), angle)) { + // Remove the middle point + pts.splice(i % pts.length, 1); + num++; + } + } + return num; + } + function splitPaths(cmds) { + var paths = [ + ]; + var current; + for (var i = 0; i < cmds.length; i++) { + if (cmds[i].type === 'M') { + if (current) { + paths.push(current); + } + current = [ + ]; + } + current.push(cmdToArr(cmds[i])); + } + paths.push(current); + return paths; + } + function cmdToArr(cmd) { + var arr = [ + cmd.type + ]; + if (cmd.type === 'M' || cmd.type === 'L') { + // moveto or lineto + arr.push(cmd.x, cmd.y); + } else if (cmd.type === 'C') { + arr.push(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y); + } else if (cmd.type === 'Q') { + arr.push(cmd.x1, cmd.y1, cmd.x, cmd.y); + } // else if (cmd.type === 'Z') { /* no-op */ } + + return arr; + } + function parseOpts(options, defaults) { + if (_typeof(options) !== 'object') { + options = defaults; + } else { + for (var key in defaults) { + if (typeof options[key] === 'undefined') { + options[key] = defaults[key]; + } + } + } + return options; + } //////////////////////// Helpers //////////////////////////// + + function at(v, i) { + var s = v.length; + return v[i < 0 ? i % s + s : i % s]; + } + function collinear(a, b, c, thresholdAngle) { + if (!thresholdAngle) { + return areaTriangle(a, b, c) === 0; + } + if (typeof collinear.tmpPoint1 === 'undefined') { + collinear.tmpPoint1 = [ + ]; + collinear.tmpPoint2 = [ + ]; + } + var ab = collinear.tmpPoint1, + bc = collinear.tmpPoint2; + ab.x = b.x - a.x; + ab.y = b.y - a.y; + bc.x = c.x - b.x; + bc.y = c.y - b.y; + var dot = ab.x * bc.x + ab.y * bc.y, + magA = Math.sqrt(ab.x * ab.x + ab.y * ab.y), + magB = Math.sqrt(bc.x * bc.x + bc.y * bc.y), + angle = Math.acos(dot / (magA * magB)); + return angle < thresholdAngle; + } + function areaTriangle(a, b, c) { + return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]); + } // Portions of below code copyright 2008 Dmitry Baranovskiy (via MIT license) + + function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) { + var t1 = 1 - t; + var t13 = Math.pow(t1, 3); + var t12 = Math.pow(t1, 2); + var t2 = t * t; + var t3 = t2 * t; + var x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x + t3 * p2x; + var y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y + t3 * p2y; + var mx = p1x + 2 * t * (c1x - p1x) + t2 * (c2x - 2 * c1x + p1x); + var my = p1y + 2 * t * (c1y - p1y) + t2 * (c2y - 2 * c1y + p1y); + var nx = c1x + 2 * t * (c2x - c1x) + t2 * (p2x - 2 * c2x + c1x); + var ny = c1y + 2 * t * (c2y - c1y) + t2 * (p2y - 2 * c2y + c1y); + var ax = t1 * p1x + t * c1x; + var ay = t1 * p1y + t * c1y; + var cx = t1 * c2x + t * p2x; + var cy = t1 * c2y + t * p2y; + var alpha = 90 - Math.atan2(mx - nx, my - ny) * 180 / Math.PI; + if (mx > nx || my < ny) { + alpha += 180; + } + return { + x: x, + y: y, + m: { + x: mx, + y: my + }, + n: { + x: nx, + y: ny + }, + start: { + x: ax, + y: ay + }, + end: { + x: cx, + y: cy + }, + alpha: alpha + }; + } + function getPointAtSegmentLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length) { + return length == null ? bezlen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) : findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, getTatLen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length)); + } + function pointAtLength(path, length, istotal) { + path = path2curve(path); + var x; + var y; + var p; + var l; + var sp = ''; + var subpaths = { + }; + var point; + var len = 0; + for (var i = 0, ii = path.length; i < ii; i++) { + p = path[i]; + if (p[0] === 'M') { + x = + p[1]; + y = + p[2]; + } else { + l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]); + if (len + l > length) { + if (!istotal) { + point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len); + return { + x: point.x, + y: point.y, + alpha: point.alpha + }; + } + } + len += l; + x = + p[5]; + y = + p[6]; + } + sp += p.shift() + p; + } + subpaths.end = sp; + point = istotal ? len : findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1); + if (point.alpha) { + point = { + x: point.x, + y: point.y, + alpha: point.alpha + }; + } + return point; + } + function pathToAbsolute(pathArray) { + var res = [ + ], + x = 0, + y = 0, + mx = 0, + my = 0, + start = 0; + if (!pathArray) { + // console.warn("Unexpected state: undefined pathArray"); // shouldn't happen + return res; + } + if (pathArray[0][0] === 'M') { + x = + pathArray[0][1]; + y = + pathArray[0][2]; + mx = x; + my = y; + start++; + res[0] = [ + 'M', + x, + y + ]; + } + var dots; + var crz = pathArray.length === 3 && pathArray[0][0] === 'M' && pathArray[1][0].toUpperCase() === 'R' && pathArray[2][0].toUpperCase() === 'Z'; + for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) { + res.push(r = [ + ]); + pa = pathArray[i]; + if (pa[0] !== String.prototype.toUpperCase.call(pa[0])) { + r[0] = String.prototype.toUpperCase.call(pa[0]); + switch (r[0]) { + case 'A': + r[1] = pa[1]; + r[2] = pa[2]; + r[3] = pa[3]; + r[4] = pa[4]; + r[5] = pa[5]; + r[6] = + (pa[6] + x); + r[7] = + (pa[7] + y); + break; + case 'V': + r[1] = + pa[1] + y; + break; + case 'H': + r[1] = + pa[1] + x; + break; + case 'R': + dots = [ + x, + y + ].concat(pa.slice(1)); + for (var j = 2, jj = dots.length; j < jj; j++) { + dots[j] = + dots[j] + x; + dots[++j] = + dots[j] + y; + } + res.pop(); + res = res.concat(catmullRom2bezier(dots, crz)); + break; + case 'M': + mx = + pa[1] + x; + my = + pa[2] + y; + break; + default: + for (var _j = 1, _jj = pa.length; _j < _jj; _j++) { + r[_j] = + pa[_j] + (_j % 2 ? x : y); + } + } + } else if (pa[0] === 'R') { + dots = [ + x, + y + ].concat(pa.slice(1)); + res.pop(); + res = res.concat(catmullRom2bezier(dots, crz)); + r = [ + 'R' + ].concat(pa.slice( - 2)); + } else { + for (var k = 0, kk = pa.length; k < kk; k++) { + r[k] = pa[k]; + } + } + switch (r[0]) { + case 'Z': + x = mx; + y = my; + break; + case 'H': + x = r[1]; + break; + case 'V': + y = r[1]; + break; + case 'M': + mx = r[r.length - 2]; + my = r[r.length - 1]; + break; + default: + x = r[r.length - 2]; + y = r[r.length - 1]; + } + } + return res; + } + function path2curve(path, path2) { + var p = pathToAbsolute(path), + p2 = path2 && pathToAbsolute(path2); + var attrs = { + x: 0, + y: 0, + bx: 0, + by: 0, + X: 0, + Y: 0, + qx: null, + qy: null + }; + var attrs2 = { + x: 0, + y: 0, + bx: 0, + by: 0, + X: 0, + Y: 0, + qx: null, + qy: null + }; + var pcoms1 = [ + ]; // path commands of original path p + var pcoms2 = [ + ]; // path commands of original path p2 + var ii; + var processPath = function processPath(path, d, pcom) { + var nx; + var ny; + var tq = { + T: 1, + Q: 1 + }; + if (!path) { + return ['C', + d.x, + d.y, + d.x, + d.y, + d.x, + d.y]; + } + if (!(path[0] in tq)) { + d.qx = d.qy = null; + } + switch (path[0]) { + case 'M': + d.X = path[1]; + d.Y = path[2]; + break; + case 'A': + path = [ + 'C' + ].concat(a2c.apply(0, [ + d.x, + d.y + ].concat(path.slice(1)))); + break; + case 'S': + if (pcom === 'C' || pcom === 'S') { + nx = d.x * 2 - d.bx; + ny = d.y * 2 - d.by; + } else { + nx = d.x; + ny = d.y; + } + path = [ + 'C', + nx, + ny + ].concat(path.slice(1)); + break; + case 'T': + if (pcom === 'Q' || pcom === 'T') { + d.qx = d.x * 2 - d.qx; + d.qy = d.y * 2 - d.qy; + } else { + d.qx = d.x; + d.qy = d.y; + } + path = [ + 'C' + ].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2])); + break; + case 'Q': + d.qx = path[1]; + d.qy = path[2]; + path = [ + 'C' + ].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4])); + break; + case 'L': + path = [ + 'C' + ].concat(l2c(d.x, d.y, path[1], path[2])); + break; + case 'H': + path = [ + 'C' + ].concat(l2c(d.x, d.y, path[1], d.y)); + break; + case 'V': + path = [ + 'C' + ].concat(l2c(d.x, d.y, d.x, path[1])); + break; + case 'Z': + path = [ + 'C' + ].concat(l2c(d.x, d.y, d.X, d.Y)); + break; + } + return path; + }, + fixArc = function fixArc(pp, i) { + if (pp[i].length > 7) { + pp[i].shift(); + var pi = pp[i]; + while (pi.length) { + pcoms1[i] = 'A'; + if (p2) { + pcoms2[i] = 'A'; + } + pp.splice(i++, 0, [ + 'C' + ].concat(pi.splice(0, 6))); + } + pp.splice(i, 1); + ii = Math.max(p.length, p2 && p2.length || 0); + } + }, + fixM = function fixM(path1, path2, a1, a2, i) { + if (path1 && path2 && path1[i][0] === 'M' && path2[i][0] !== 'M') { + path2.splice(i, 0, [ + 'M', + a2.x, + a2.y + ]); + a1.bx = 0; + a1.by = 0; + a1.x = path1[i][1]; + a1.y = path1[i][2]; + ii = Math.max(p.length, p2 && p2.length || 0); + } + }; + var pfirst = ''; // temporary holder for original path command + var pcom = ''; // holder for previous path command of original path + ii = Math.max(p.length, p2 && p2.length || 0); + for (var i = 0; i < ii; i++) { + if (p[i]) { + pfirst = p[i][0]; + } // save current path command + + if (pfirst !== 'C') { + pcoms1[i] = pfirst; // Save current path command + if (i) { + pcom = pcoms1[i - 1]; + } // Get previous path command pcom + + } + p[i] = processPath(p[i], attrs, pcom); + if (pcoms1[i] !== 'A' && pfirst === 'C') { + pcoms1[i] = 'C'; + } + fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1 + if (p2) { + // the same procedures is done to p2 + if (p2[i]) { + pfirst = p2[i][0]; + } + if (pfirst !== 'C') { + pcoms2[i] = pfirst; + if (i) { + pcom = pcoms2[i - 1]; + } + } + p2[i] = processPath(p2[i], attrs2, pcom); + if (pcoms2[i] !== 'A' && pfirst === 'C') { + pcoms2[i] = 'C'; + } + fixArc(p2, i); + } + fixM(p, p2, attrs, attrs2, i); + fixM(p2, p, attrs2, attrs, i); + var seg = p[i], + seg2 = p2 && p2[i], + seglen = seg.length, + seg2len = p2 && seg2.length; + attrs.x = seg[seglen - 2]; + attrs.y = seg[seglen - 1]; + attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x; + attrs.by = parseFloat(seg[seglen - 3]) || attrs.y; + attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x); + attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y); + attrs2.x = p2 && seg2[seg2len - 2]; + attrs2.y = p2 && seg2[seg2len - 1]; + } + return p2 ? [ + p, + p2 + ] : p; + } + function a2c(x1, y1, rx, ry, angle, lac, sweep_flag, x2, y2, recursive) { + // for more information of where this Math came from visit: + // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes + var PI = Math.PI; + var _120 = PI * 120 / 180; + var f1; + var f2; + var cx; + var cy; + var rad = PI / 180 * ( + angle || 0); + var res = [ + ]; + var xy; + var rotate = function rotate(x, y, rad) { + var X = x * Math.cos(rad) - y * Math.sin(rad), + Y = x * Math.sin(rad) + y * Math.cos(rad); + return { + x: X, + y: Y + }; + }; + if (!recursive) { + xy = rotate(x1, y1, - rad); + x1 = xy.x; + y1 = xy.y; + xy = rotate(x2, y2, - rad); + x2 = xy.x; + y2 = xy.y; + var x = (x1 - x2) / 2; + var y = (y1 - y2) / 2; + var h = x * x / (rx * rx) + y * y / (ry * ry); + if (h > 1) { + h = Math.sqrt(h); + rx = h * rx; + ry = h * ry; + } + var rx2 = rx * rx, + ry2 = ry * ry; + var k = (lac === sweep_flag ? - 1 : 1) * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x))); + cx = k * rx * y / ry + (x1 + x2) / 2; + cy = k * - ry * x / rx + (y1 + y2) / 2; + f1 = Math.asin(((y1 - cy) / ry).toFixed(9)); + f2 = Math.asin(((y2 - cy) / ry).toFixed(9)); + f1 = x1 < cx ? PI - f1 : f1; + f2 = x2 < cx ? PI - f2 : f2; + if (f1 < 0) { + f1 = PI * 2 + f1; + } + if (f2 < 0) { + f2 = PI * 2 + f2; + } + if (sweep_flag && f1 > f2) { + f1 = f1 - PI * 2; + } + if (!sweep_flag && f2 > f1) { + f2 = f2 - PI * 2; + } + } else { + f1 = recursive[0]; + f2 = recursive[1]; + cx = recursive[2]; + cy = recursive[3]; + } + var df = f2 - f1; + if (Math.abs(df) > _120) { + var f2old = f2, + x2old = x2, + y2old = y2; + f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : - 1); + x2 = cx + rx * Math.cos(f2); + y2 = cy + ry * Math.sin(f2); + res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [ + f2, + f2old, + cx, + cy + ]); + } + df = f2 - f1; + var c1 = Math.cos(f1), + s1 = Math.sin(f1), + c2 = Math.cos(f2), + s2 = Math.sin(f2), + t = Math.tan(df / 4), + hx = 4 / 3 * rx * t, + hy = 4 / 3 * ry * t, + m1 = [ + x1, + y1 + ], + m2 = [ + x1 + hx * s1, + y1 - hy * c1 + ], + m3 = [ + x2 + hx * s2, + y2 - hy * c2 + ], + m4 = [ + x2, + y2 + ]; + m2[0] = 2 * m1[0] - m2[0]; + m2[1] = 2 * m1[1] - m2[1]; + if (recursive) { + return [m2, + m3, + m4].concat(res); + } else { + res = [ + m2, + m3, + m4 + ].concat(res).join().split(','); + var newres = [ + ]; + for (var i = 0, ii = res.length; i < ii; i++) { + newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x; + } + return newres; + } + } // http://schepers.cc/getting-to-the-point + + function catmullRom2bezier(crp, z) { + var d = [ + ]; + for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) { + var p = [ + { + x: + crp[i - 2], + y: + crp[i - 1] + }, + { + x: + crp[i], + y: + crp[i + 1] + }, + { + x: + crp[i + 2], + y: + crp[i + 3] + }, + { + x: + crp[i + 4], + y: + crp[i + 5] + } + ]; + if (z) { + if (!i) { + p[0] = { + x: + crp[iLen - 2], + y: + crp[iLen - 1] + }; + } else if (iLen - 4 === i) { + p[3] = { + x: + crp[0], + y: + crp[1] + }; + } else if (iLen - 2 === i) { + p[2] = { + x: + crp[0], + y: + crp[1] + }; + p[3] = { + x: + crp[2], + y: + crp[3] + }; + } + } else { + if (iLen - 4 === i) { + p[3] = p[2]; + } else if (!i) { + p[0] = { + x: + crp[i], + y: + crp[i + 1] + }; + } + } + d.push(['C', + ( - p[0].x + 6 * p[1].x + p[2].x) / 6, + ( - p[0].y + 6 * p[1].y + p[2].y) / 6, + (p[1].x + 6 * p[2].x - p[3].x) / 6, + (p[1].y + 6 * p[2].y - p[3].y) / 6, + p[2].x, + p[2].y]); + } + return d; + } + function l2c(x1, y1, x2, y2) { + return [x1, + y1, + x2, + y2, + x2, + y2]; + } + function q2c(x1, y1, ax, ay, x2, y2) { + var _13 = 1 / 3, + _23 = 2 / 3; + return [_13 * x1 + _23 * ax, + _13 * y1 + _23 * ay, + _13 * x2 + _23 * ax, + _13 * y2 + _23 * ay, + x2, + y2]; + } + function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) { + if (z == null) { + z = 1; + } + z = z > 1 ? 1 : z < 0 ? 0 : z; + var z2 = z / 2; + var n = 12; + var Tvalues = [ + - 0.1252, + 0.1252, + - 0.3678, + 0.3678, + - 0.5873, + 0.5873, + - 0.7699, + 0.7699, + - 0.9041, + 0.9041, + - 0.9816, + 0.9816 + ]; + var sum = 0; + var Cvalues = [ + 0.2491, + 0.2491, + 0.2335, + 0.2335, + 0.2032, + 0.2032, + 0.1601, + 0.1601, + 0.1069, + 0.1069, + 0.0472, + 0.0472 + ]; + for (var i = 0; i < n; i++) { + var ct = z2 * Tvalues[i] + z2, + xbase = base3(ct, x1, x2, x3, x4), + ybase = base3(ct, y1, y2, y3, y4), + comb = xbase * xbase + ybase * ybase; + sum += Cvalues[i] * Math.sqrt(comb); + } + return z2 * sum; + } + function getTatLen(x1, y1, x2, y2, x3, y3, x4, y4, ll) { + if (ll < 0 || bezlen(x1, y1, x2, y2, x3, y3, x4, y4) < ll) { + return; + } + var t = 1; + var step = t / 2; + var t2 = t - step; + var l; + var e = 0.01; + l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2); + while (Math.abs(l - ll) > e) { + step /= 2; + t2 += (l < ll ? 1 : - 1) * step; + l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2); + } + return t2; + } + function base3(t, p1, p2, p3, p4) { + var t1 = - 3 * p1 + 9 * p2 - 9 * p3 + 3 * p4, + t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3; + return t * t2 - 3 * p1 + 3 * p2; + } + function cacheKey() { + var hash = ''; + for (var i = arguments.length - 1; i >= 0; --i) { + hash += '？'.concat(i < 0 || arguments.length <= i ? undefined : arguments[i]); + } + return hash; + } + var _default = _main.default; + exports.default = _default; + }, + { + '../core/constants': 278, + '../core/main': 290, + 'core-js/modules/es.array.concat': 167, + 'core-js/modules/es.array.fill': 170, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.array.join': 177, + 'core-js/modules/es.array.slice': 180, + 'core-js/modules/es.array.splice': 182, + 'core-js/modules/es.function.name': 183, + 'core-js/modules/es.number.to-fixed': 189, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.exec': 199, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.string.split': 209, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 329: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.array.splice'); + _dereq_('core-js/modules/es.array-buffer.constructor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.array.splice'); + _dereq_('core-js/modules/es.array-buffer.constructor'); + _dereq_('core-js/modules/es.object.to-string'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module Data + * @submodule Array Functions + * @for p5 + * @requires core + */ + /** + * Adds a value to the end of an array. Extends the length of + * the array by one. Maps to Array.push(). + * + * @method append + * @deprecated Use array.push(value) instead. + * @param {Array} array Array to append + * @param {any} value to be added to the Array + * @return {Array} the array that was appended to + * @example + *


+ * function setup() {
+ *   let myArray = ['Mango', 'Apple', 'Papaya'];
+ *   print(myArray); // ['Mango', 'Apple', 'Papaya']
+ *
+ *   append(myArray, 'Peach');
+ *   print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+ * }
+ *

+ */ + + _main.default.prototype.append = function (array, value) { + array.push(value); + return array; + }; + /** + * Copies an array (or part of an array) to another array. The src array is + * copied to the dst array, beginning at the position specified by + * srcPosition and into the position specified by dstPosition. The number of + * elements to copy is determined by length. Note that copying values + * overwrites existing values in the destination array. To append values + * instead of overwriting them, use concat(). + * + * The simplified version with only two arguments, arrayCopy(src, dst), + * copies an entire array to another of the same size. It is equivalent to + * arrayCopy(src, 0, dst, 0, src.length). + * + * Using this function is far more efficient for copying array data than + * iterating through a for() loop and copying each element individually. + * + * @method arrayCopy + * @deprecated 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 + *


+ * let src = ['A', 'B', 'C'];
+ * let dst = [1, 2, 3];
+ * let srcPosition = 1;
+ * let dstPosition = 0;
+ * let length = 2;
+ *
+ * print(src); // ['A', 'B', 'C']
+ * print(dst); // [ 1 ,  2 ,  3 ]
+ *
+ * arrayCopy(src, srcPosition, dst, dstPosition, length);
+ * print(dst); // ['B', 'C', 3]
+ *

+ */ + /** + * @method arrayCopy + * @deprecated Use arr1.copyWithin(arr2) instead. + * @param {Array} src + * @param {Array} dst + * @param {Integer} [length] + */ + _main.default.prototype.arrayCopy = function (src, srcPosition, dst, dstPosition, length) { + // the index to begin splicing from dst array + var start; + var end; + if (typeof length !== 'undefined') { + end = Math.min(length, src.length); + start = dstPosition; + src = src.slice(srcPosition, end + srcPosition); + } else { + if (typeof dst !== 'undefined') { + // src, dst, length + // rename so we don't get confused + end = dst; + end = Math.min(end, src.length); + } else { + // src, dst + end = src.length; + } + start = 0; // rename so we don't get confused + dst = srcPosition; + src = src.slice(0, end); + } // Since we are not returning the array and JavaScript is pass by reference + // we must modify the actual values of the array + // instead of reassigning arrays + + Array.prototype.splice.apply(dst, [ + start, + end + ].concat(src)); + }; + /** + * Concatenates two arrays, maps to Array.concat(). Does not modify the + * input arrays. + * + * @method concat + * @deprecated Use arr1.concat(arr2) instead. + * @param {Array} a first Array to concatenate + * @param {Array} b second Array to concatenate + * @return {Array} concatenated array + * + * @example + *


+ * function setup() {
+ *   let arr1 = ['A', 'B', 'C'];
+ *   let arr2 = [1, 2, 3];
+ *
+ *   print(arr1); // ['A','B','C']
+ *   print(arr2); // [1,2,3]
+ *
+ *   let arr3 = concat(arr1, arr2);
+ *
+ *   print(arr1); // ['A','B','C']
+ *   print(arr2); // [1, 2, 3]
+ *   print(arr3); // ['A','B','C', 1, 2, 3]
+ * }
+ *

+ */ + _main.default.prototype.concat = function (list0, list1) { + return list0.concat(list1); + }; + /** + * Reverses the order of an array, maps to Array.reverse() + * + * @method reverse + * @deprecated Use array.reverse() instead. + * @param {Array} list Array to reverse + * @return {Array} the reversed list + * @example + *


+ * function setup() {
+ *   let myArray = ['A', 'B', 'C'];
+ *   print(myArray); // ['A','B','C']
+ *
+ *   reverse(myArray);
+ *   print(myArray); // ['C','B','A']
+ * }
+ *

+ */ + _main.default.prototype.reverse = function (list) { + return list.reverse(); + }; + /** + * Decreases an array by one element and returns the shortened array, + * maps to Array.pop(). + * + * @method shorten + * @deprecated Use array.pop() instead. + * @param {Array} list Array to shorten + * @return {Array} shortened Array + * @example + *


+ * function setup() {
+ *   let myArray = ['A', 'B', 'C'];
+ *   print(myArray); // ['A', 'B', 'C']
+ *   let newArray = shorten(myArray);
+ *   print(myArray); // ['A','B','C']
+ *   print(newArray); // ['A','B']
+ * }
+ *

+ */ + _main.default.prototype.shorten = function (list) { + list.pop(); + return list; + }; + /** + * Randomizes the order of the elements of an array. Implements + * + * Fisher-Yates Shuffle Algorithm. + * + * @method shuffle + * @param {Array} array Array to shuffle + * @param {Boolean} [bool] modify passed array + * @return {Array} shuffled Array + * @example + *


+ * function setup() {
+ *   let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
+ *   print(regularArr);
+ *   shuffle(regularArr, true); // force modifications to passed array
+ *   print(regularArr);
+ *
+ *   // By default shuffle() returns a shuffled cloned array:
+ *   let newArr = shuffle(regularArr);
+ *   print(regularArr);
+ *   print(newArr);
+ * }
+ *

+ */ + _main.default.prototype.shuffle = function (arr, bool) { + var isView = ArrayBuffer && ArrayBuffer.isView && ArrayBuffer.isView(arr); + arr = bool || isView ? arr : arr.slice(); + var rnd, + tmp, + idx = arr.length; + while (idx > 1) { + rnd = this.random(0, 1) * idx | 0; + tmp = arr[--idx]; + arr[idx] = arr[rnd]; + arr[rnd] = tmp; + } + return arr; + }; + /** + * Sorts an array of numbers from smallest to largest, or puts an array of + * words in alphabetical order. The original array is not modified; a + * re-ordered array is returned. The count parameter states the number of + * elements to sort. For example, if there are 12 elements in an array and + * count is set to 5, only the first 5 elements in the array will be sorted. + * + * @method sort + * @deprecated Use array.sort() instead. + * @param {Array} list Array to sort + * @param {Integer} [count] number of elements to sort, starting from 0 + * @return {Array} the sorted list + * + * @example + *


+ * function setup() {
+ *   let words = ['banana', 'apple', 'pear', 'lime'];
+ *   print(words); // ['banana', 'apple', 'pear', 'lime']
+ *   let count = 4; // length of array
+ *
+ *   words = sort(words, count);
+ *   print(words); // ['apple', 'banana', 'lime', 'pear']
+ * }
+ *

+ *


+ * function setup() {
+ *   let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+ *   print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+ *   let count = 5; // Less than the length of the array
+ *
+ *   numbers = sort(numbers, count);
+ *   print(numbers); // [1,2,5,6,14,9,8,12]
+ * }
+ *

+ */ + _main.default.prototype.sort = function (list, count) { + var arr = count ? list.slice(0, Math.min(count, list.length)) : list; + var rest = count ? list.slice(Math.min(count, list.length)) : [ + ]; + if (typeof arr[0] === 'string') { + arr = arr.sort(); + } else { + arr = arr.sort(function (a, b) { + return a - b; + }); + } + return arr.concat(rest); + }; + /** + * Inserts a value or an array of values into an existing array. The first + * parameter specifies the initial array to be modified, and the second + * parameter defines the data to be inserted. The third parameter is an index + * value which specifies the array position from which to insert data. + * (Remember that array index numbering starts at zero, so the first position + * is 0, the second position is 1, and so on.) + * + * @method splice + * @deprecated Use array.splice() instead. + * @param {Array} list Array to splice into + * @param {any} value value to be spliced in + * @param {Integer} position in the array from which to insert data + * @return {Array} the list + * + * @example + *


+ * function setup() {
+ *   let myArray = [0, 1, 2, 3, 4];
+ *   let insArray = ['A', 'B', 'C'];
+ *   print(myArray); // [0, 1, 2, 3, 4]
+ *   print(insArray); // ['A','B','C']
+ *
+ *   splice(myArray, insArray, 3);
+ *   print(myArray); // [0,1,2,'A','B','C',3,4]
+ * }
+ *

+ */ + _main.default.prototype.splice = function (list, value, index) { + // note that splice returns spliced elements and not an array + Array.prototype.splice.apply(list, [ + index, + 0 + ].concat(value)); + return list; + }; + /** + * Extracts an array of elements from an existing array. The list parameter + * defines the array from which the elements will be copied, and the start + * and count parameters specify which elements to extract. If no count is + * given, elements will be extracted from the start to the end of the array. + * When specifying the start, remember that the first array element is 0. + * This function does not change the source array. + * + * @method subset + * @deprecated Use array.slice() instead. + * @param {Array} list Array to extract from + * @param {Integer} start position to begin + * @param {Integer} [count] number of values to extract + * @return {Array} Array of extracted elements + * + * @example + *


+ * function setup() {
+ *   let myArray = [1, 2, 3, 4, 5];
+ *   print(myArray); // [1, 2, 3, 4, 5]
+ *
+ *   let sub1 = subset(myArray, 0, 3);
+ *   let sub2 = subset(myArray, 2, 2);
+ *   print(sub1); // [1,2,3]
+ *   print(sub2); // [3,4]
+ * }
+ *

+ */ + _main.default.prototype.subset = function (list, start, count) { + if (typeof count !== 'undefined') { + return list.slice(start, start + count); + } else { + return list.slice(start, list.length); + } + }; + var _default = _main.default; + exports.default = _default; + }, + { + '../core/main': 290, + 'core-js/modules/es.array-buffer.constructor': 166, + 'core-js/modules/es.array.concat': 167, + 'core-js/modules/es.array.slice': 180, + 'core-js/modules/es.array.splice': 182, + 'core-js/modules/es.object.to-string': 195 + } + ], + 330: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.array.map'); + _dereq_('core-js/modules/es.number.constructor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.repeat'); + _dereq_('core-js/modules/es.array.map'); + _dereq_('core-js/modules/es.number.constructor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.repeat'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module Data + * @submodule Conversion + * @for p5 + * @requires core + */ + /** + * Converts a string to its floating point representation. The contents of a + * string must resemble a number, or NaN (not a number) will be returned. + * For example, float("1234.56") evaluates to 1234.56, but float("giraffe") + * will return NaN. + * + * When an array of values is passed in, then an array of floats of the same + * length is returned. + * + * @method float + * @param {String} str float string to parse + * @return {Number} floating point representation of string + * @example + *


+ * let str = '20';
+ * let diameter = float(str);
+ * ellipse(width / 2, height / 2, diameter, diameter);
+ *

+ *


+ * print(float('10.31')); // 10.31
+ * print(float('Infinity')); // Infinity
+ * print(float('-Infinity')); // -Infinity
+ *

+ * + * @alt + * 20 by 20 white ellipse in the center of the canvas + */ + + _main.default.prototype.float = function (str) { + if (str instanceof Array) { + return str.map(parseFloat); + } + return parseFloat(str); + }; + /** + * Converts a boolean, string, or float to its integer representation. + * When an array of values is passed in, then an int array of the same length + * is returned. + * + * @method int + * @param {String|Boolean|Number} n value to parse + * @param {Integer} [radix] the radix to convert to (default: 10) + * @return {Number} integer representation of value + * + * @example + *


+ * print(int('10')); // 10
+ * print(int(10.31)); // 10
+ * print(int(-10)); // -10
+ * print(int(true)); // 1
+ * print(int(false)); // 0
+ * print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
+ * print(int(Infinity)); // Infinity
+ * print(int('-Infinity')); // -Infinity
+ *

+ */ + /** + * @method int + * @param {Array} ns values to parse + * @param {Integer} [radix] + * @return {Number[]} integer representation of values + */ + _main.default.prototype.int = function (n) { + var radix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10; + if (n === Infinity || n === 'Infinity') { + return Infinity; + } else if (n === - Infinity || n === '-Infinity') { + return - Infinity; + } else if (typeof n === 'string') { + return parseInt(n, radix); + } else if (typeof n === 'number') { + return n | 0; + } else if (typeof n === 'boolean') { + return n ? 1 : 0; + } else if (n instanceof Array) { + return n.map(function (n) { + return _main.default.prototype.int(n, radix); + }); + } + }; + /** + * Converts a boolean, string or number to its string representation. + * When an array of values is passed in, then an array of strings of the same + * length is returned. + * + * @method str + * @param {String|Boolean|Number|Array} n value to parse + * @return {String} string representation of value + * @example + *


+ * print(str('10')); // "10"
+ * print(str(10.31)); // "10.31"
+ * print(str(-10)); // "-10"
+ * print(str(true)); // "true"
+ * print(str(false)); // "false"
+ * print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
+ *

+ */ + _main.default.prototype.str = function (n) { + if (n instanceof Array) { + return n.map(_main.default.prototype.str); + } else { + return String(n); + } + }; + /** + * Converts a number or string to its boolean representation. + * For a number, any non-zero value (positive or negative) evaluates to true, + * while zero evaluates to false. For a string, the value "true" evaluates to + * true, while any other value evaluates to false. When an array of number or + * string values is passed in, then a array of booleans of the same length is + * returned. + * + * @method boolean + * @param {String|Boolean|Number|Array} n value to parse + * @return {Boolean} boolean representation of value + * @example + *


+ * print(boolean(0)); // false
+ * print(boolean(1)); // true
+ * print(boolean('true')); // true
+ * print(boolean('abcd')); // false
+ * print(boolean([0, 12, 'true'])); // [false, true, true]
+ *

+ */ + _main.default.prototype.boolean = function (n) { + if (typeof n === 'number') { + return n !== 0; + } else if (typeof n === 'string') { + return n.toLowerCase() === 'true'; + } else if (typeof n === 'boolean') { + return n; + } else if (n instanceof Array) { + return n.map(_main.default.prototype.boolean); + } + }; + /** + * Converts a number, string representation of a number, or boolean to its byte + * representation. A byte can be only a whole number between -128 and 127, so + * when a value outside of this range is converted, it wraps around to the + * corresponding byte representation. When an array of number, string or boolean + * values is passed in, then an array of bytes the same length is returned. + * + * @method byte + * @param {String|Boolean|Number} n value to parse + * @return {Number} byte representation of value + * + * @example + *


+ * print(byte(127)); // 127
+ * print(byte(128)); // -128
+ * print(byte(23.4)); // 23
+ * print(byte('23.4')); // 23
+ * print(byte('hello')); // NaN
+ * print(byte(true)); // 1
+ * print(byte([0, 255, '100'])); // [0, -1, 100]
+ *

+ */ + /** + * @method byte + * @param {Array} ns values to parse + * @return {Number[]} array of byte representation of values + */ + _main.default.prototype.byte = function (n) { + var nn = _main.default.prototype.int(n, 10); + if (typeof nn === 'number') { + return (nn + 128) % 256 - 128; + } else if (nn instanceof Array) { + return nn.map(_main.default.prototype.byte); + } + }; + /** + * Converts a number or string to its corresponding single-character + * string representation. If a string parameter is provided, it is first + * parsed as an integer and then translated into a single-character string. + * When an array of number or string values is passed in, then an array of + * single-character strings of the same length is returned. + * + * @method char + * @param {String|Number} n value to parse + * @return {String} string representation of value + * + * @example + *


+ * print(char(65)); // "A"
+ * print(char('65')); // "A"
+ * print(char([65, 66, 67])); // [ "A", "B", "C" ]
+ * print(join(char([65, 66, 67]), '')); // "ABC"
+ *

+ */ + /** + * @method char + * @param {Array} ns values to parse + * @return {String[]} array of string representation of values + */ + _main.default.prototype.char = function (n) { + if (typeof n === 'number' && !isNaN(n)) { + return String.fromCharCode(n); + } else if (n instanceof Array) { + return n.map(_main.default.prototype.char); + } else if (typeof n === 'string') { + return _main.default.prototype.char(parseInt(n, 10)); + } + }; + /** + * Converts a single-character string to its corresponding integer + * representation. When an array of single-character string values is passed + * in, then an array of integers of the same length is returned. + * + * @method unchar + * @param {String} n value to parse + * @return {Number} integer representation of value + * + * @example + *


+ * print(unchar('A')); // 65
+ * print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
+ * print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
+ *

+ */ + /** + * @method unchar + * @param {Array} ns values to parse + * @return {Number[]} integer representation of values + */ + _main.default.prototype.unchar = function (n) { + if (typeof n === 'string' && n.length === 1) { + return n.charCodeAt(0); + } else if (n instanceof Array) { + return n.map(_main.default.prototype.unchar); + } + }; + /** + * Converts a number to a string in its equivalent hexadecimal notation. If a + * second parameter is passed, it is used to set the number of characters to + * generate in the hexadecimal notation. When an array is passed in, an + * array of strings in hexadecimal notation of the same length is returned. + * + * @method hex + * @param {Number} n value to parse + * @param {Number} [digits] + * @return {String} hexadecimal string representation of value + * + * @example + *


+ * print(hex(255)); // "000000FF"
+ * print(hex(255, 6)); // "0000FF"
+ * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
+ * print(Infinity); // "FFFFFFFF"
+ * print(-Infinity); // "00000000"
+ *

+ */ + /** + * @method hex + * @param {Number[]} ns array of values to parse + * @param {Number} [digits] + * @return {String[]} hexadecimal string representation of values + */ + _main.default.prototype.hex = function (n, digits) { + digits = digits === undefined || digits === null ? digits = 8 : digits; + if (n instanceof Array) { + return n.map(function (n) { + return _main.default.prototype.hex(n, digits); + }); + } else if (n === Infinity || n === - Infinity) { + var c = n === Infinity ? 'F' : '0'; + return c.repeat(digits); + } else if (typeof n === 'number') { + if (n < 0) { + n = 4294967295 + n + 1; + } + var hex = Number(n).toString(16).toUpperCase(); + while (hex.length < digits) { + hex = '0'.concat(hex); + } + if (hex.length >= digits) { + hex = hex.substring(hex.length - digits, hex.length); + } + return hex; + } + }; + /** + * Converts a string representation of a hexadecimal number to its equivalent + * integer value. When an array of strings in hexadecimal notation is passed + * in, an array of integers of the same length is returned. + * + * @method unhex + * @param {String} n value to parse + * @return {Number} integer representation of hexadecimal value + * + * @example + *


+ * print(unhex('A')); // 10
+ * print(unhex('FF')); // 255
+ * print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
+ *

+ */ + /** + * @method unhex + * @param {Array} ns values to parse + * @return {Number[]} integer representations of hexadecimal value + */ + _main.default.prototype.unhex = function (n) { + if (n instanceof Array) { + return n.map(_main.default.prototype.unhex); + } else { + return parseInt('0x'.concat(n), 16); + } + }; + var _default = _main.default; + exports.default = _default; + }, + { + '../core/main': 290, + 'core-js/modules/es.array.map': 179, + 'core-js/modules/es.number.constructor': 187, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.to-string': 200, + 'core-js/modules/es.string.repeat': 206 + } + ], + 331: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.array.filter'); + _dereq_('core-js/modules/es.array.index-of'); + _dereq_('core-js/modules/es.array.join'); + _dereq_('core-js/modules/es.array.map'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.constructor'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.match'); + _dereq_('core-js/modules/es.string.replace'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/es.string.trim'); + _dereq_('core-js/modules/es.array.filter'); + _dereq_('core-js/modules/es.array.index-of'); + _dereq_('core-js/modules/es.array.join'); + _dereq_('core-js/modules/es.array.map'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.constructor'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.match'); + _dereq_('core-js/modules/es.string.replace'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/es.string.trim'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + _dereq_('../core/friendly_errors/validate_params'); + _dereq_('../core/friendly_errors/file_errors'); + _dereq_('../core/friendly_errors/fes_core'); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module Data + * @submodule String Functions + * @for p5 + * @requires core + */ + //return p5; //LM is this a mistake? + /** + * Combines an array of Strings into one String, each separated by the + * character(s) used for the separator parameter. To join arrays of ints or + * floats, it's necessary to first convert them to Strings using nf() or + * nfs(). + * + * @method join + * @param {Array} list array of Strings to be joined + * @param {String} separator String to be placed between each item + * @return {String} joined String + * @example + *

+ *


+ * let array = ['Hello', 'world!'];
+ * let separator = ' ';
+ * let message = join(array, separator);
+ * text(message, 5, 50);
+ *

+ *

+ * + * @alt + * "hello world!" displayed middle left of canvas. + */ + + _main.default.prototype.join = function (list, separator) { + _main.default._validateParameters('join', arguments); + return list.join(separator); + }; + /** + * This function is used to apply a regular expression to a piece of text, + * and return matching groups (elements found inside parentheses) as a + * String array. If there are no matches, a null value will be returned. + * If no groups are specified in the regular expression, but the sequence + * matches, an array of length 1 (with the matched text as the first element + * of the array) will be returned. + * + * To use the function, first check to see if the result is null. If the + * result is null, then the sequence did not match at all. If the sequence + * did match, an array is returned. + * + * If there are groups (specified by sets of parentheses) in the regular + * expression, then the contents of each will be returned in the array. + * Element [0] of a regular expression match returns the entire matching + * string, and the match groups start at element [1] (the first group is [1], + * the second [2], and so on). + * + * @method match + * @param {String} str the String to be searched + * @param {String} regexp the regexp to be used for matching + * @return {String[]} Array of Strings found + * @example + *

+ *


+ * let string = 'Hello p5js*!';
+ * let regexp = 'p5js\\*';
+ * let m = match(string, regexp);
+ * text(m, 5, 50);
+ *

+ *

+ * + * @alt + * "p5js*" displayed middle left of canvas. + */ + _main.default.prototype.match = function (str, reg) { + _main.default._validateParameters('match', arguments); + return str.match(reg); + }; + /** + * This function is used to apply a regular expression to a piece of text, + * and return a list of matching groups (elements found inside parentheses) + * as a two-dimensional String array. If there are no matches, a null value + * will be returned. If no groups are specified in the regular expression, + * but the sequence matches, a two dimensional array is still returned, but + * the second dimension is only of length one. + * + * To use the function, first check to see if the result is null. If the + * result is null, then the sequence did not match at all. If the sequence + * did match, a 2D array is returned. + * + * If there are groups (specified by sets of parentheses) in the regular + * expression, then the contents of each will be returned in the array. + * Assuming a loop with counter variable i, element [i][0] of a regular + * expression match returns the entire matching string, and the match groups + * start at element [i][1] (the first group is [i][1], the second [i][2], + * and so on). + * + * @method matchAll + * @param {String} str the String to be searched + * @param {String} regexp the regexp to be used for matching + * @return {String[]} 2d Array of Strings found + * @example + *

+ *


+ * let string = 'Hello p5js*! Hello world!';
+ * let regexp = 'Hello';
+ * matchAll(string, regexp);
+ *

+ *

+ */ + _main.default.prototype.matchAll = function (str, reg) { + _main.default._validateParameters('matchAll', arguments); + var re = new RegExp(reg, 'g'); + var match = re.exec(str); + var matches = [ + ]; + while (match !== null) { + matches.push(match); // matched text: match[0] + // match start: match.index + // capturing group n: match[n] + match = re.exec(str); + } + return matches; + }; + /** + * Utility function for formatting numbers into strings. There are two + * versions: one for formatting floats, and one for formatting ints. + * + * The values for the digits, left, and right parameters should always + * be positive integers. + * + * (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter + * if greater than the current length of the number. + * + * For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 + * (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than + * the result will be 123.200. + * + * @method nf + * @param {Number|String} num the Number to format + * @param {Integer|String} [left] number of digits to the left of the + * decimal point + * @param {Integer|String} [right] number of digits to the right of the + * decimal point + * @return {String} formatted String + * + * @example + *

+ *


+ * function setup() {
+ *   background(200);
+ *   let num1 = 321;
+ *   let num2 = -1321;
+ *
+ *   noStroke();
+ *   fill(0);
+ *   textSize(16);
+ *
+ *   text(nf(num1, 4, 2), 10, 30);
+ *   text(nf(num2, 4, 2), 10, 80);
+ *   // Draw dividing line
+ *   stroke(120);
+ *   line(0, 50, width, 50);
+ * }
+ *

+ *

+ * + * @alt + * "0321.00" middle top, -1321.00" middle bottom canvas + */ + /** + * @method nf + * @param {Array} nums the Numbers to format + * @param {Integer|String} [left] + * @param {Integer|String} [right] + * @return {String[]} formatted Strings + */ + _main.default.prototype.nf = function (nums, left, right) { + _main.default._validateParameters('nf', arguments); + if (nums instanceof Array) { + return nums.map(function (x) { + return doNf(x, left, right); + }); + } else { + var typeOfFirst = Object.prototype.toString.call(nums); + if (typeOfFirst === '[object Arguments]') { + if (nums.length === 3) { + return this.nf(nums[0], nums[1], nums[2]); + } else if (nums.length === 2) { + return this.nf(nums[0], nums[1]); + } else { + return this.nf(nums[0]); + } + } else { + return doNf(nums, left, right); + } + } + }; + function doNf(num, left, right) { + var neg = num < 0; + var n = neg ? num.toString().substring(1) : num.toString(); + var decimalInd = n.indexOf('.'); + var intPart = decimalInd !== - 1 ? n.substring(0, decimalInd) : n; + var decPart = decimalInd !== - 1 ? n.substring(decimalInd + 1) : ''; + var str = neg ? '-' : ''; + if (typeof right !== 'undefined') { + var decimal = ''; + if (decimalInd !== - 1 || right - decPart.length > 0) { + decimal = '.'; + } + if (decPart.length > right) { + decPart = decPart.substring(0, right); + } + for (var i = 0; i < left - intPart.length; i++) { + str += '0'; + } + str += intPart; + str += decimal; + str += decPart; + for (var j = 0; j < right - decPart.length; j++) { + str += '0'; + } + return str; + } else { + for (var k = 0; k < Math.max(left - intPart.length, 0); k++) { + str += '0'; + } + str += n; + return str; + } + } /** + * Utility function for formatting numbers into strings and placing + * appropriate commas to mark units of 1000. There are two versions: one + * for formatting ints, and one for formatting an array of ints. The value + * for the right parameter should always be a positive integer. + * + * @method nfc + * @param {Number|String} num the Number to format + * @param {Integer|String} [right] number of digits to the right of the + * decimal point + * @return {String} formatted String + * + * @example + *

+ *


+ * function setup() {
+ *   background(200);
+ *   let num = 11253106.115;
+ *   let numArr = [1, 1, 2];
+ *
+ *   noStroke();
+ *   fill(0);
+ *   textSize(12);
+ *
+ *   // Draw formatted numbers
+ *   text(nfc(num, 4), 10, 30);
+ *   text(nfc(numArr, 2), 10, 80);
+ *
+ *   // Draw dividing line
+ *   stroke(120);
+ *   line(0, 50, width, 50);
+ * }
+ *

+ *

+ * + * @alt + * "11,253,106.115" top middle and "1.00,1.00,2.00" displayed bottom mid + */ + /** + * @method nfc + * @param {Array} nums the Numbers to format + * @param {Integer|String} [right] + * @return {String[]} formatted Strings + */ + + _main.default.prototype.nfc = function (num, right) { + _main.default._validateParameters('nfc', arguments); + if (num instanceof Array) { + return num.map(function (x) { + return doNfc(x, right); + }); + } else { + return doNfc(num, right); + } + }; + function doNfc(num, right) { + num = num.toString(); + var dec = num.indexOf('.'); + var rem = dec !== - 1 ? num.substring(dec) : ''; + var n = dec !== - 1 ? num.substring(0, dec) : num; + n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); + if (right === 0) { + rem = ''; + } else if (typeof right !== 'undefined') { + if (right > rem.length) { + rem += dec === - 1 ? '.' : ''; + var len = right - rem.length + 1; + for (var i = 0; i < len; i++) { + rem += '0'; + } + } else { + rem = rem.substring(0, right + 1); + } + } + return n + rem; + } /** + * Utility function for formatting numbers into strings. Similar to nf() but + * puts a "+" in front of positive numbers and a "-" in front of negative + * numbers. There are two versions: one for formatting floats, and one for + * formatting ints. The values for left, and right parameters + * should always be positive integers. + * + * @method nfp + * @param {Number} num the Number to format + * @param {Integer} [left] number of digits to the left of the decimal + * point + * @param {Integer} [right] number of digits to the right of the + * decimal point + * @return {String} formatted String + * + * @example + *

+ *


+ * function setup() {
+ *   background(200);
+ *   let num1 = 11253106.115;
+ *   let num2 = -11253106.115;
+ *
+ *   noStroke();
+ *   fill(0);
+ *   textSize(12);
+ *
+ *   // Draw formatted numbers
+ *   text(nfp(num1, 4, 2), 10, 30);
+ *   text(nfp(num2, 4, 2), 10, 80);
+ *
+ *   // Draw dividing line
+ *   stroke(120);
+ *   line(0, 50, width, 50);
+ * }
+ *

+ *

+ * + * @alt + * "+11253106.11" top middle and "-11253106.11" displayed bottom middle + */ + /** + * @method nfp + * @param {Number[]} nums the Numbers to format + * @param {Integer} [left] + * @param {Integer} [right] + * @return {String[]} formatted Strings + */ + + _main.default.prototype.nfp = function () { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + _main.default._validateParameters('nfp', args); + var nfRes = _main.default.prototype.nf.apply(this, args); + if (nfRes instanceof Array) { + return nfRes.map(addNfp); + } else { + return addNfp(nfRes); + } + }; + function addNfp(num) { + return parseFloat(num) > 0 ? '+'.concat(num.toString()) : num.toString(); + } /** + * Utility function for formatting numbers into strings. Similar to nf() but + * puts an additional "_" (space) in front of positive numbers just in case to align it with negative + * numbers which includes "-" (minus) sign. + * + * The main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative + * number with some negative number (See the example to get a clear picture). + * There are two versions: one for formatting float, and one for formatting int. + * + * The values for the digits, left, and right parameters should always be positive integers. + * + * (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. + * + * (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter + * if greater than the current length of the number. + * + * For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 + * (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than + * the result will be 123.200. + * + * @method nfs + * @param {Number} num the Number to format + * @param {Integer} [left] number of digits to the left of the decimal + * point + * @param {Integer} [right] number of digits to the right of the + * decimal point + * @return {String} formatted String + * + * @example + *

+ *


+ * function setup() {
+ *   background(200);
+ *   let num1 = 321;
+ *   let num2 = -1321;
+ *
+ *   noStroke();
+ *   fill(0);
+ *   textSize(16);
+ *
+ *   // nfs() aligns num1 (positive number) with num2 (negative number) by
+ *   // adding a blank space in front of the num1 (positive number)
+ *   // [left = 4] in num1 add one 0 in front, to align the digits with num2
+ *   // [right = 2] in num1 and num2 adds two 0's after both numbers
+ *   // To see the differences check the example of nf() too.
+ *   text(nfs(num1, 4, 2), 10, 30);
+ *   text(nfs(num2, 4, 2), 10, 80);
+ *   // Draw dividing line
+ *   stroke(120);
+ *   line(0, 50, width, 50);
+ * }
+ *

+ *

+ * + * @alt + * "0321.00" top middle and "-1321.00" displayed bottom middle + */ + /** + * @method nfs + * @param {Array} nums the Numbers to format + * @param {Integer} [left] + * @param {Integer} [right] + * @return {String[]} formatted Strings + */ + + _main.default.prototype.nfs = function () { + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + _main.default._validateParameters('nfs', args); + var nfRes = _main.default.prototype.nf.apply(this, args); + if (nfRes instanceof Array) { + return nfRes.map(addNfs); + } else { + return addNfs(nfRes); + } + }; + function addNfs(num) { + return parseFloat(num) >= 0 ? ' '.concat(num.toString()) : num.toString(); + } /** + * The split() function maps to String.split(), it breaks a String into + * pieces using a character or string as the delimiter. The delim parameter + * specifies the character or characters that mark the boundaries between + * each piece. A String[] array is returned that contains each of the pieces. + * + * The splitTokens() function works in a similar fashion, except that it + * splits using a range of characters instead of a specific character or + * sequence. + * + * @method split + * @param {String} value the String to be split + * @param {String} delim the String used to separate the data + * @return {String[]} Array of Strings + * @example + *

+ *


+ * let names = 'Pat,Xio,Alex';
+ * let splitString = split(names, ',');
+ * text(splitString[0], 5, 30);
+ * text(splitString[1], 5, 50);
+ * text(splitString[2], 5, 70);
+ *

+ *

+ * + * @alt + * "pat" top left, "Xio" mid left and "Alex" displayed bottom left + */ + + _main.default.prototype.split = function (str, delim) { + _main.default._validateParameters('split', arguments); + return str.split(delim); + }; + /** + * The splitTokens() function splits a String at one or many character + * delimiters or "tokens." The delim parameter specifies the character or + * characters to be used as a boundary. + * + * If no delim characters are specified, any whitespace character is used to + * split. Whitespace characters include tab (\t), line feed (\n), carriage + * return (\r), form feed (\f), and space. + * + * @method splitTokens + * @param {String} value the String to be split + * @param {String} [delim] list of individual Strings that will be used as + * separators + * @return {String[]} Array of Strings + * @example + *

+ *


+ * function setup() {
+ *   let myStr = 'Mango, Banana, Lime';
+ *   let myStrArr = splitTokens(myStr, ',');
+ *
+ *   print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
+ * }
+ *

+ *

+ */ + _main.default.prototype.splitTokens = function (value, delims) { + _main.default._validateParameters('splitTokens', arguments); + var d; + if (typeof delims !== 'undefined') { + var str = delims; + var sqc = /\]/g.exec(str); + var sqo = /\[/g.exec(str); + if (sqo && sqc) { + str = str.slice(0, sqc.index) + str.slice(sqc.index + 1); + sqo = /\[/g.exec(str); + str = str.slice(0, sqo.index) + str.slice(sqo.index + 1); + d = new RegExp('[\\['.concat(str, '\\]]'), 'g'); + } else if (sqc) { + str = str.slice(0, sqc.index) + str.slice(sqc.index + 1); + d = new RegExp('['.concat(str, '\\]]'), 'g'); + } else if (sqo) { + str = str.slice(0, sqo.index) + str.slice(sqo.index + 1); + d = new RegExp('['.concat(str, '\\[]'), 'g'); + } else { + d = new RegExp('['.concat(str, ']'), 'g'); + } + } else { + d = /\s/g; + } + return value.split(d).filter(function (n) { + return n; + }); + }; + /** + * Removes whitespace characters from the beginning and end of a String. In + * addition to standard whitespace characters such as space, carriage return, + * and tab, this function also removes the Unicode "nbsp" character. + * + * @method trim + * @param {String} str a String to be trimmed + * @return {String} a trimmed String + * + * @example + *

+ *


+ * let string = trim('  No new lines\n   ');
+ * text(string + ' here', 2, 50);
+ *

+ *

+ * + * @alt + * "No new lines here" displayed center canvas + */ + /** + * @method trim + * @param {Array} strs an Array of Strings to be trimmed + * @return {String[]} an Array of trimmed Strings + */ + _main.default.prototype.trim = function (str) { + _main.default._validateParameters('trim', arguments); + if (str instanceof Array) { + return str.map(this.trim); + } else { + return str.trim(); + } + }; + var _default = _main.default; + exports.default = _default; + }, + { + '../core/friendly_errors/fes_core': 281, + '../core/friendly_errors/file_errors': 282, + '../core/friendly_errors/validate_params': 285, + '../core/main': 290, + 'core-js/modules/es.array.filter': 171, + 'core-js/modules/es.array.index-of': 175, + 'core-js/modules/es.array.join': 177, + 'core-js/modules/es.array.map': 179, + 'core-js/modules/es.array.slice': 180, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.constructor': 198, + 'core-js/modules/es.regexp.exec': 199, + 'core-js/modules/es.regexp.to-string': 200, + 'core-js/modules/es.string.match': 205, + 'core-js/modules/es.string.replace': 207, + 'core-js/modules/es.string.split': 209, + 'core-js/modules/es.string.trim': 211 + } + ], + 332: [ + function (_dereq_, module, exports) { + 'use strict'; + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module IO + * @submodule Time & Date + * @for p5 + * @requires core + */ + /** + * p5.js communicates with the clock on your computer. The day() function + * returns the current day as a value from 1 - 31. + * + * @method day + * @return {Integer} the current day + * @example + *

+ *


+ * let d = day();
+ * text('Current day: \n' + d, 5, 50);
+ *

+ *

+ * + * @alt + * Current day is displayed + */ + + _main.default.prototype.day = function () { + return new Date().getDate(); + }; + /** + * p5.js communicates with the clock on your computer. The hour() function + * returns the current hour as a value from 0 - 23. + * + * @method hour + * @return {Integer} the current hour + * @example + *

+ *


+ * let h = hour();
+ * text('Current hour:\n' + h, 5, 50);
+ *

+ *

+ * + * @alt + * Current hour is displayed + */ + _main.default.prototype.hour = function () { + return new Date().getHours(); + }; + /** + * p5.js communicates with the clock on your computer. The minute() function + * returns the current minute as a value from 0 - 59. + * + * @method minute + * @return {Integer} the current minute + * @example + *

+ *


+ * let m = minute();
+ * text('Current minute: \n' + m, 5, 50);
+ *

+ *

+ * + * @alt + * Current minute is displayed + */ + _main.default.prototype.minute = function () { + return new Date().getMinutes(); + }; + /** + * Returns the number of milliseconds (thousandths of a second) since + * starting the 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 millisecond = millis();
+ * text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
+ *

+ *

+ * + * @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 m = month();
+ * text('Current month: \n' + m, 5, 50);
+ *

+ *

+ * + * @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 s = second();
+ * text('Current second: \n' + s, 5, 50);
+ *

+ *

+ * + * @alt + * Current second is displayed + */ + _main.default.prototype.second = function () { + return new Date().getSeconds(); + }; + /** + * p5.js communicates with the clock on your computer. The year() function + * returns the current year as an integer (2014, 2015, 2016, etc). + * + * @method year + * @return {Integer} the current year + * @example + *

+ *


+ * let y = year();
+ * text('Current year: \n' + y, 5, 50);
+ *

+ *

+ * + * @alt + * Current year is displayed + */ + _main.default.prototype.year = function () { + return new Date().getFullYear(); + }; + var _default = _main.default; + exports.default = _default; + }, + { + '../core/main': 290 + } + ], + 333: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.number.to-fixed'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.number.to-fixed'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + _dereq_('./p5.Geometry'); + var constants = _interopRequireWildcard(_dereq_('../core/constants')); + function _getRequireWildcardCache() { + if (typeof WeakMap !== 'function') return null; + var cache = new WeakMap(); + _getRequireWildcardCache = function _getRequireWildcardCache() { + return cache; + }; + return cache; + } + function _interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } + if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') { + return { + default: + obj + }; + } + var cache = _getRequireWildcardCache(); + if (cache && cache.has(obj)) { + return cache.get(obj); + } + var newObj = { + }; + var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; + if (desc && (desc.get || desc.set)) { + Object.defineProperty(newObj, key, desc); + } else { + newObj[key] = obj[key]; + } + } + } + newObj.default = obj; + if (cache) { + cache.set(obj, newObj); + } + return newObj; + } + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module Shape + * @submodule 3D Primitives + * @for p5 + * @requires core + * @requires p5.Geometry + */ + /** + * Draw a plane with given a width and height + * @method plane + * @param {Number} [width] width of the plane + * @param {Number} [height] height of the plane + * @param {Integer} [detailX] Optional number of triangle + * subdivisions in x-dimension + * @param {Integer} [detailY] Optional number of triangle + * subdivisions in y-dimension + * @chainable + * @example + *

+ *


+ * // draw a plane
+ * // with width 50 and height 50
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('a white plane with black wireframe lines');
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   plane(50, 50);
+ * }
+ *

+ *

+ * + * @alt + * Nothing displayed on canvas + * Rotating interior view of a box with sides that change color. + * 3d red and green gradient. + * Rotating interior view of a cylinder with sides that change color. + * Rotating view of a cylinder with sides that change color. + * 3d red and green gradient. + * rotating view of a multi-colored cylinder with concave sides. + */ + + _main.default.prototype.plane = function (width, height, detailX, detailY) { + this._assert3d('plane'); + _main.default._validateParameters('plane', arguments); + if (typeof width === 'undefined') { + width = 50; + } + if (typeof height === 'undefined') { + height = width; + } + if (typeof detailX === 'undefined') { + detailX = 1; + } + if (typeof detailY === 'undefined') { + detailY = 1; + } + var gId = 'plane|'.concat(detailX, '|').concat(detailY); + if (!this._renderer.geometryInHash(gId)) { + var _plane = function _plane() { + var u, + v, + p; + for (var i = 0; i <= this.detailY; i++) { + v = i / this.detailY; + for (var j = 0; j <= this.detailX; j++) { + u = j / this.detailX; + p = new _main.default.Vector(u - 0.5, v - 0.5, 0); + this.vertices.push(p); + this.uvs.push(u, v); + } + } + }; + var planeGeom = new _main.default.Geometry(detailX, detailY, _plane); + planeGeom.computeFaces().computeNormals(); + if (detailX <= 1 && detailY <= 1) { + planeGeom._makeTriangleEdges()._edgesToVertices(); + } else 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 spinning box
+ * // with width, height and depth of 50
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('a white box rotating in 3D space');
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   box(50);
+ * }
+ *

+ *

+ */ + _main.default.prototype.box = function (width, height, depth, detailX, detailY) { + this._assert3d('box'); + _main.default._validateParameters('box', arguments); + if (typeof width === 'undefined') { + width = 50; + } + if (typeof height === 'undefined') { + height = width; + } + if (typeof depth === 'undefined') { + depth = height; + } + var perPixelLighting = this._renderer.attributes && this._renderer.attributes.perPixelLighting; + if (typeof detailX === 'undefined') { + detailX = perPixelLighting ? 1 : 4; + } + if (typeof detailY === 'undefined') { + detailY = perPixelLighting ? 1 : 4; + } + var gId = 'box|'.concat(detailX, '|').concat(detailY); + if (!this._renderer.geometryInHash(gId)) { + var _box = function _box() { + var cubeIndices = [ + [0, + 4, + 2, + 6], // -1, 0, 0],// -x + [ + 1, + 3, + 5, + 7 + ], // +1, 0, 0],// +x + [ + 0, + 1, + 4, + 5 + ], // 0, -1, 0],// -y + [ + 2, + 6, + 3, + 7 + ], // 0, +1, 0],// +y + [ + 0, + 2, + 1, + 3 + ], // 0, 0, -1],// -z + [ + 4, + 5, + 6, + 7 + ] // 0, 0, +1] // +z + ]; //using strokeIndices instead of faces for strokes + //to avoid diagonal stroke lines across face of box + this.strokeIndices = [ + [0, + 1], + [ + 1, + 3 + ], + [ + 3, + 2 + ], + [ + 6, + 7 + ], + [ + 8, + 9 + ], + [ + 9, + 11 + ], + [ + 14, + 15 + ], + [ + 16, + 17 + ], + [ + 17, + 19 + ], + [ + 18, + 19 + ], + [ + 20, + 21 + ], + [ + 22, + 23 + ] + ]; + for (var i = 0; i < cubeIndices.length; i++) { + var cubeIndex = cubeIndices[i]; + var v = i * 4; + for (var j = 0; j < 4; j++) { + var d = cubeIndex[j]; //inspired by lightgl: + //https://github.com/evanw/lightgl.js + //octants:https://en.wikipedia.org/wiki/Octant_(solid_geometry) + var octant = new _main.default.Vector(((d & 1) * 2 - 1) / 2, ((d & 2) - 1) / 2, ((d & 4) / 2 - 1) / 2); + this.vertices.push(octant); + this.uvs.push(j & 1, (j & 2) / 2); + } + this.faces.push([v, + v + 1, + v + 2]); + this.faces.push([v + 2, + v + 1, + v + 3]); + } + }; + var boxGeom = new _main.default.Geometry(detailX, detailY, _box); + boxGeom.computeNormals(); + if (detailX <= 4 && detailY <= 4) { + boxGeom._makeTriangleEdges()._edgesToVertices(); + } else 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 sphere with radius 40
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('a white sphere with black wireframe lines');
+ * }
+ *
+ * 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');
+ *   describe(
+ *     'a white sphere with low detail on the x-axis, including a slider to adjust detailX'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 105, 94);
+ *   rotateY(millis() / 1000);
+ *   sphere(40, detailX.value(), 16);
+ * }
+ *

+ *

+ * + * @example + *

+ *


+ * let detailY;
+ * // slide to see how detailY works
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   detailY = createSlider(3, 16, 3);
+ *   detailY.position(10, height + 5);
+ *   detailY.style('width', '80px');
+ *   describe(
+ *     'a white sphere with low detail on the y-axis, including a slider to adjust detailY'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 105, 94);
+ *   rotateY(millis() / 1000);
+ *   sphere(40, 16, detailY.value());
+ * }
+ *

+ *

+ */ + _main.default.prototype.sphere = function (radius, detailX, detailY) { + this._assert3d('sphere'); + _main.default._validateParameters('sphere', arguments); + if (typeof radius === 'undefined') { + radius = 50; + } + if (typeof detailX === 'undefined') { + detailX = 24; + } + if (typeof detailY === 'undefined') { + detailY = 16; + } + this.ellipsoid(radius, radius, radius, detailX, detailY); + return this; + }; + /** + * @private + * Helper function for creating both cones and cylinders + * Will only generate well-defined geometry when bottomRadius, height > 0 + * and topRadius >= 0 + * If topRadius == 0, topCap should be false + */ + var _truncatedCone = function _truncatedCone(bottomRadius, topRadius, height, detailX, detailY, bottomCap, topCap) { + bottomRadius = bottomRadius <= 0 ? 1 : bottomRadius; + topRadius = topRadius < 0 ? 0 : topRadius; + height = height <= 0 ? bottomRadius : height; + detailX = detailX < 3 ? 3 : detailX; + detailY = detailY < 1 ? 1 : detailY; + bottomCap = bottomCap === undefined ? true : bottomCap; + topCap = topCap === undefined ? topRadius !== 0 : topCap; + var start = bottomCap ? - 2 : 0; + var end = detailY + (topCap ? 2 : 0); //ensure constant slant for interior vertex normals + var slant = Math.atan2(bottomRadius - topRadius, height); + var sinSlant = Math.sin(slant); + var cosSlant = Math.cos(slant); + var yy, + ii, + jj; + for (yy = start; yy <= end; ++yy) { + var v = yy / detailY; + var y = height * v; + var ringRadius = void 0; + if (yy < 0) { + //for the bottomCap edge + y = 0; + v = 0; + ringRadius = bottomRadius; + } else if (yy > detailY) { + //for the topCap edge + y = height; + v = 1; + ringRadius = topRadius; + } else { + //for the middle + ringRadius = bottomRadius + (topRadius - bottomRadius) * v; + } + if (yy === - 2 || yy === detailY + 2) { + //center of bottom or top caps + ringRadius = 0; + } + y -= height / 2; //shift coordiate origin to the center of object + for (ii = 0; ii < detailX; ++ii) { + var u = ii / (detailX - 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 + *

+ *


+ * // draw a spinning cylinder
+ * // with radius 20 and height 50
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('a rotating white cylinder');
+ * }
+ *
+ * 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');
+ *   describe(
+ *     'a rotating white cylinder with limited X detail, with a slider that adjusts detailX'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 105, 94);
+ *   rotateY(millis() / 1000);
+ *   cylinder(20, 75, detailX.value(), 1);
+ * }
+ *

+ *

+ * + * @example + *

+ *


+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   detailY = createSlider(1, 16, 1);
+ *   detailY.position(10, height + 5);
+ *   detailY.style('width', '80px');
+ *   describe(
+ *     'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 105, 94);
+ *   rotateY(millis() / 1000);
+ *   cylinder(20, 75, 16, detailY.value());
+ * }
+ *

+ *

+ */ + _main.default.prototype.cylinder = function (radius, height, detailX, detailY, bottomCap, topCap) { + this._assert3d('cylinder'); + _main.default._validateParameters('cylinder', arguments); + if (typeof radius === 'undefined') { + radius = 50; + } + if (typeof height === 'undefined') { + height = radius; + } + if (typeof detailX === 'undefined') { + detailX = 24; + } + if (typeof detailY === 'undefined') { + detailY = 1; + } + if (typeof topCap === 'undefined') { + topCap = true; + } + if (typeof bottomCap === 'undefined') { + bottomCap = true; + } + var gId = 'cylinder|'.concat(detailX, '|').concat(detailY, '|').concat(bottomCap, '|').concat(topCap); + if (!this._renderer.geometryInHash(gId)) { + var cylinderGeom = new _main.default.Geometry(detailX, detailY); + _truncatedCone.call(cylinderGeom, 1, 1, 1, detailX, detailY, bottomCap, topCap); // normals are computed in call to _truncatedCone + if (detailX <= 24 && detailY <= 16) { + cylinderGeom._makeTriangleEdges()._edgesToVertices(); + } else 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 + *

+ *


+ * // draw a spinning cone
+ * // with radius 40 and height 70
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('a rotating white cone');
+ * }
+ *
+ * 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');
+ *   describe(
+ *     'a rotating white cone with limited X detail, with a slider that adjusts detailX'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 102, 94);
+ *   rotateY(millis() / 1000);
+ *   cone(30, 65, detailX.value(), 16);
+ * }
+ *

+ *

+ * + * @example + *

+ *


+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   detailY = createSlider(3, 16, 3);
+ *   detailY.position(10, height + 5);
+ *   detailY.style('width', '80px');
+ *   describe(
+ *     'a rotating white cone with limited Y detail, with a slider that adjusts detailY'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 102, 94);
+ *   rotateY(millis() / 1000);
+ *   cone(30, 65, 16, detailY.value());
+ * }
+ *

+ *

+ */ + _main.default.prototype.cone = function (radius, height, detailX, detailY, cap) { + this._assert3d('cone'); + _main.default._validateParameters('cone', arguments); + if (typeof radius === 'undefined') { + radius = 50; + } + if (typeof height === 'undefined') { + height = radius; + } + if (typeof detailX === 'undefined') { + detailX = 24; + } + if (typeof detailY === 'undefined') { + detailY = 1; + } + if (typeof cap === 'undefined') { + cap = true; + } + var gId = 'cone|'.concat(detailX, '|').concat(detailY, '|').concat(cap); + if (!this._renderer.geometryInHash(gId)) { + var coneGeom = new _main.default.Geometry(detailX, detailY); + _truncatedCone.call(coneGeom, 1, 0, 1, detailX, detailY, cap, false); + if (detailX <= 24 && detailY <= 16) { + coneGeom._makeTriangleEdges()._edgesToVertices(); + } else 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 + *

+ *


+ * // draw an ellipsoid
+ * // with radius 30, 40 and 40.
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('a white 3d ellipsoid');
+ * }
+ *
+ * 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');
+ *   describe(
+ *     'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 105, 94);
+ *   rotateY(millis() / 1000);
+ *   ellipsoid(30, 40, 40, detailX.value(), 8);
+ * }
+ *

+ *

+ * + * @example + *

+ *


+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   detailY = createSlider(2, 24, 6);
+ *   detailY.position(10, height + 5);
+ *   detailY.style('width', '80px');
+ *   describe(
+ *     'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 105, 9);
+ *   rotateY(millis() / 1000);
+ *   ellipsoid(30, 40, 40, 12, detailY.value());
+ * }
+ *

+ *

+ */ + _main.default.prototype.ellipsoid = function (radiusX, radiusY, radiusZ, detailX, detailY) { + this._assert3d('ellipsoid'); + _main.default._validateParameters('ellipsoid', arguments); + if (typeof radiusX === 'undefined') { + radiusX = 50; + } + if (typeof radiusY === 'undefined') { + radiusY = radiusX; + } + if (typeof radiusZ === 'undefined') { + radiusZ = radiusX; + } + if (typeof detailX === 'undefined') { + detailX = 24; + } + if (typeof detailY === 'undefined') { + detailY = 16; + } + var gId = 'ellipsoid|'.concat(detailX, '|').concat(detailY); + if (!this._renderer.geometryInHash(gId)) { + var _ellipsoid = function _ellipsoid() { + for (var i = 0; i <= this.detailY; i++) { + var v = i / this.detailY; + var phi = Math.PI * v - Math.PI / 2; + var cosPhi = Math.cos(phi); + var sinPhi = Math.sin(phi); + for (var j = 0; j <= this.detailX; j++) { + var u = j / this.detailX; + var theta = 2 * Math.PI * u; + var cosTheta = Math.cos(theta); + var sinTheta = Math.sin(theta); + var p = new _main.default.Vector(cosPhi * sinTheta, sinPhi, cosPhi * cosTheta); + this.vertices.push(p); + this.vertexNormals.push(p); + this.uvs.push(u, v); + } + } + }; + var ellipsoidGeom = new _main.default.Geometry(detailX, detailY, _ellipsoid); + ellipsoidGeom.computeFaces(); + if (detailX <= 24 && detailY <= 24) { + ellipsoidGeom._makeTriangleEdges()._edgesToVertices(); + } else 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 + *

+ *


+ * // draw a spinning torus
+ * // with ring radius 30 and tube radius 15
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('a rotating white torus');
+ * }
+ *
+ * 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');
+ *   describe(
+ *     'a rotating white torus with limited X detail, with a slider that adjusts detailX'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 102, 94);
+ *   rotateY(millis() / 1000);
+ *   torus(30, 15, detailX.value(), 12);
+ * }
+ *

+ *

+ * + * @example + *

+ *


+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   detailY = createSlider(3, 16, 3);
+ *   detailY.position(10, height + 5);
+ *   detailY.style('width', '80px');
+ *   describe(
+ *     'a rotating white torus with limited Y detail, with a slider that adjusts detailY'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(205, 102, 94);
+ *   rotateY(millis() / 1000);
+ *   torus(30, 15, 16, detailY.value());
+ * }
+ *

+ *

+ */ + _main.default.prototype.torus = function (radius, tubeRadius, detailX, detailY) { + this._assert3d('torus'); + _main.default._validateParameters('torus', arguments); + if (typeof radius === 'undefined') { + radius = 50; + } else if (!radius) { + return; // nothing to draw + } + if (typeof tubeRadius === 'undefined') { + tubeRadius = 10; + } else if (!tubeRadius) { + return; // nothing to draw + } + if (typeof detailX === 'undefined') { + detailX = 24; + } + if (typeof detailY === 'undefined') { + detailY = 16; + } + var tubeRatio = (tubeRadius / radius).toPrecision(4); + var gId = 'torus|'.concat(tubeRatio, '|').concat(detailX, '|').concat(detailY); + if (!this._renderer.geometryInHash(gId)) { + var _torus = function _torus() { + for (var i = 0; i <= this.detailY; i++) { + var v = i / this.detailY; + var phi = 2 * Math.PI * v; + var cosPhi = Math.cos(phi); + var sinPhi = Math.sin(phi); + var r = 1 + tubeRatio * cosPhi; + for (var j = 0; j <= this.detailX; j++) { + var u = j / this.detailX; + var theta = 2 * Math.PI * u; + var cosTheta = Math.cos(theta); + var sinTheta = Math.sin(theta); + var p = new _main.default.Vector(r * cosTheta, r * sinTheta, tubeRatio * sinPhi); + var n = new _main.default.Vector(cosPhi * cosTheta, cosPhi * sinTheta, sinPhi); + this.vertices.push(p); + this.vertexNormals.push(n); + this.uvs.push(u, v); + } + } + }; + var torusGeom = new _main.default.Geometry(detailX, detailY, _torus); + torusGeom.computeFaces(); + if (detailX <= 24 && detailY <= 16) { + torusGeom._makeTriangleEdges()._edgesToVertices(); + } else 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 + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ *   background(50);
+ *   stroke(255);
+ *   strokeWeight(4);
+ *   point(25, 0);
+ *   strokeWeight(3);
+ *   point(-25, 0);
+ *   strokeWeight(2);
+ *   point(0, 25);
+ *   strokeWeight(1);
+ *   point(0, -25);
+ * }
+ *

+ *

+ */ + _main.default.RendererGL.prototype.point = function (x, y, z) { + if (typeof z === 'undefined') { + z = 0; + } + var _vertex = [ + ]; + _vertex.push(new _main.default.Vector(x, y, z)); + this._drawPoints(_vertex, this.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 { + 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._doStroke) { + console.log('Cannot apply a stroke to an '.concat(shape, ' with more than 50 detail')); + } + this.createBuffers(gId, arcGeom); + } + var uMVMatrix = this.uMVMatrix.copy(); + try { + this.uMVMatrix.translate([x, + y, + 0]); + this.uMVMatrix.scale(width, height, 1); + this.drawBuffers(gId); + } finally { + this.uMVMatrix = uMVMatrix; + } + return this; + }; + _main.default.RendererGL.prototype.rect = function (args) { + var x = args[0]; + var y = args[1]; + var width = args[2]; + var height = args[3]; + if (typeof args[4] === 'undefined') { + // Use the retained mode for drawing rectangle, + // if args for rounding rectangle is not provided by user. + var perPixelLighting = this._pInst._glAttributes.perPixelLighting; + var detailX = args[4] || (perPixelLighting ? 1 : 24); + var detailY = args[5] || (perPixelLighting ? 1 : 16); + var gId = 'rect|'.concat(detailX, '|').concat(detailY); + if (!this.geometryInHash(gId)) { + var _rect = function _rect() { + for (var i = 0; i <= this.detailY; i++) { + var v = i / this.detailY; + for (var j = 0; j <= this.detailX; j++) { + var u = j / this.detailX; + var p = new _main.default.Vector(u, v, 0); + this.vertices.push(p); + this.uvs.push(u, v); + } + } // using stroke indices to avoid stroke over face(s) of rectangle + + if (detailX > 0 && detailY > 0) { + this.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; + } + } else { + // Use Immediate mode to round the rectangle corner, + // if args for rounding corners is provided by user + var tl = args[4]; + var tr = typeof args[5] === 'undefined' ? tl : args[5]; + var br = typeof args[6] === 'undefined' ? tr : args[6]; + var bl = typeof args[7] === 'undefined' ? br : args[7]; + var a = x; + var b = y; + var c = width; + var d = height; + c += a; + d += b; + if (a > c) { + var temp = a; + a = c; + c = temp; + } + if (b > d) { + var _temp = b; + b = d; + d = _temp; + } + var maxRounding = Math.min((c - a) / 2, (d - b) / 2); + if (tl > maxRounding) tl = maxRounding; + if (tr > maxRounding) tr = maxRounding; + if (br > maxRounding) br = maxRounding; + if (bl > maxRounding) bl = maxRounding; + var x1 = a; + var y1 = b; + var x2 = c; + var y2 = d; + this.beginShape(); + if (tr !== 0) { + this.vertex(x2 - tr, y1); + this.quadraticVertex(x2, y1, x2, y1 + tr); + } else { + this.vertex(x2, y1); + } + if (br !== 0) { + this.vertex(x2, y2 - br); + this.quadraticVertex(x2, y2, x2 - br, y2); + } else { + this.vertex(x2, y2); + } + if (bl !== 0) { + this.vertex(x1 + bl, y2); + this.quadraticVertex(x1, y2, x1, y2 - bl); + } else { + this.vertex(x1, y2); + } + if (tl !== 0) { + this.vertex(x1, y1 + tl); + this.quadraticVertex(x1, y1, x1 + tl, y1); + } else { + this.vertex(x1, y1); + } + this.immediateMode.geometry.uvs.length = 0; + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + try { + for (var _iterator = this.immediateMode.geometry.vertices[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var vert = _step.value; + var u = (vert.x - x1) / width; + var v = (vert.y - y1) / height; + this.immediateMode.geometry.uvs.push(u, v); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return != null) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + this.endShape(constants.CLOSE); + } + return this; + }; + /* eslint-disable max-len */ + _main.default.RendererGL.prototype.quad = function (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, detailX, detailY) { + /* eslint-enable max-len */ + if (typeof detailX === 'undefined') { + detailX = 2; + } + if (typeof detailY === 'undefined') { + detailY = 2; + } + var gId = 'quad|'.concat(x1, '|').concat(y1, '|').concat(z1, '|').concat(x2, '|').concat(y2, '|').concat(z2, '|').concat(x3, '|').concat(y3, '|').concat(z3, '|').concat(x4, '|').concat(y4, '|').concat(z4, '|').concat(detailX, '|').concat(detailY); + if (!this.geometryInHash(gId)) { + var quadGeom = new _main.default.Geometry(detailX, detailY, function () { + //algorithm adapted from c++ to js + //https://stackoverflow.com/questions/16989181/whats-the-correct-way-to-draw-a-distorted-plane-in-opengl/16993202#16993202 + var xRes = 1 / (this.detailX - 1); + var yRes = 1 / (this.detailY - 1); + for (var y = 0; y < this.detailY; y++) { + for (var x = 0; x < this.detailX; x++) { + var pctx = x * xRes; + var pcty = y * yRes; + var linePt0x = (1 - pcty) * x1 + pcty * x4; + var linePt0y = (1 - pcty) * y1 + pcty * y4; + var linePt0z = (1 - pcty) * z1 + pcty * z4; + var linePt1x = (1 - pcty) * x2 + pcty * x3; + var linePt1y = (1 - pcty) * y2 + pcty * y3; + var linePt1z = (1 - pcty) * z2 + pcty * z3; + var ptx = (1 - pctx) * linePt0x + pctx * linePt1x; + var pty = (1 - pctx) * linePt0y + pctx * linePt1y; + var ptz = (1 - pctx) * linePt0z + pctx * linePt1z; + this.vertices.push(new _main.default.Vector(ptx, pty, ptz)); + this.uvs.push([pctx, + pcty]); + } + } + }); + quadGeom.faces = [ + ]; + for (var y = 0; y < detailY - 1; y++) { + for (var x = 0; x < detailX - 1; x++) { + var pt0 = x + y * detailX; + var pt1 = x + 1 + y * detailX; + var pt2 = x + 1 + (y + 1) * detailX; + var pt3 = x + (y + 1) * detailX; + quadGeom.faces.push([pt0, + pt1, + pt2]); + quadGeom.faces.push([pt0, + pt2, + pt3]); + } + } + quadGeom.computeNormals()._makeTriangleEdges()._edgesToVertices(); + this.createBuffers(gId, quadGeom); + } + this.drawBuffers(gId); + return this; + }; //this implementation of bezier curve + //is based on Bernstein polynomial + // pretier-ignore + _main.default.RendererGL.prototype.bezier = function (x1, y1, z1, // x2 + x2, // y2 + y2, // x3 + z2, // y3 + x3, // x4 + y3, // y4 + z3, x4, y4, z4) { + if (arguments.length === 8) { + y4 = y3; + x4 = x3; + y3 = z2; + x3 = y2; + y2 = x2; + x2 = z1; + z1 = z2 = z3 = z4 = 0; + } + var bezierDetail = this._pInst._bezierDetail || 20; //value of Bezier detail + this.beginShape(); + for (var i = 0; i <= bezierDetail; i++) { + var c1 = Math.pow(1 - i / bezierDetail, 3); + var c2 = 3 * (i / bezierDetail) * Math.pow(1 - i / bezierDetail, 2); + var c3 = 3 * Math.pow(i / bezierDetail, 2) * (1 - i / bezierDetail); + var c4 = Math.pow(i / bezierDetail, 3); + this.vertex(x1 * c1 + x2 * c2 + x3 * c3 + x4 * c4, y1 * c1 + y2 * c2 + y3 * c3 + y4 * c4, z1 * c1 + z2 * c2 + z3 * c3 + z4 * c4); + } + this.endShape(); + return this; + }; // pretier-ignore + _main.default.RendererGL.prototype.curve = function (x1, y1, z1, // x2 + x2, // y2 + y2, // x3 + z2, // y3 + x3, // x4 + y3, // y4 + z3, x4, y4, z4) { + if (arguments.length === 8) { + x4 = x3; + y4 = y3; + x3 = y2; + y3 = x2; + x2 = z1; + y2 = x2; + z1 = z2 = z3 = z4 = 0; + } + var curveDetail = this._pInst._curveDetail; + this.beginShape(); + for (var i = 0; i <= curveDetail; i++) { + var c1 = Math.pow(i / curveDetail, 3) * 0.5; + var c2 = Math.pow(i / curveDetail, 2) * 0.5; + var c3 = i / curveDetail * 0.5; + var c4 = 0.5; + var vx = c1 * ( - x1 + 3 * x2 - 3 * x3 + x4) + c2 * (2 * x1 - 5 * x2 + 4 * x3 - x4) + c3 * ( - x1 + x3) + c4 * (2 * x2); + var vy = c1 * ( - y1 + 3 * y2 - 3 * y3 + y4) + c2 * (2 * y1 - 5 * y2 + 4 * y3 - y4) + c3 * ( - y1 + y3) + c4 * (2 * y2); + var vz = c1 * ( - z1 + 3 * z2 - 3 * z3 + z4) + c2 * (2 * z1 - 5 * z2 + 4 * z3 - z4) + c3 * ( - z1 + z3) + c4 * (2 * z2); + this.vertex(vx, vy, vz); + } + this.endShape(); + return this; + }; + /** + * Draw a line given two points + * @private + * @param {Number} x0 x-coordinate of first vertex + * @param {Number} y0 y-coordinate of first vertex + * @param {Number} z0 z-coordinate of first vertex + * @param {Number} x1 x-coordinate of second vertex + * @param {Number} y1 y-coordinate of second vertex + * @param {Number} z1 z-coordinate of second vertex + * @chainable + * @example + *

+ *


+ * //draw a line
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   // Use fill instead of stroke to change the color of shape.
+ *   fill(255, 0, 0);
+ *   line(10, 10, 0, 60, 60, 20);
+ * }
+ *

+ *

+ */ + _main.default.RendererGL.prototype.line = function () { + if (arguments.length === 6) { + this.beginShape(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': 278, + '../core/main': 290, + './p5.Geometry': 339, + 'core-js/modules/es.array.concat': 167, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.number.to-fixed': 189, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 334: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.splice'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + _dereq_('core-js/modules/es.array.splice'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.to-string'); + 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 3D + * @submodule Interaction + * @for p5 + * @requires core + */ + /** + * Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking + * and dragging will rotate the camera position about the center of the sketch, + * right-clicking and dragging will pan the camera position without rotation, + * and using the mouse wheel (scrolling) will move the camera closer or further + * from the center of the sketch. This function can be called with parameters + * dictating sensitivity to mouse movement along the X and Y axes. Calling + * this function without parameters is equivalent to calling orbitControl(1,1). + * To reverse direction of movement in either axis, enter a negative number + * for sensitivity. + * @method orbitControl + * @for p5 + * @param {Number} [sensitivityX] sensitivity to mouse movement along X axis + * @param {Number} [sensitivityY] sensitivity to mouse movement along Y axis + * @param {Number} [sensitivityZ] sensitivity to scroll movement along Z axis + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   normalMaterial();
+ *   describe(
+ *     'Camera orbits around a box when mouse is hold-clicked & then moved.'
+ *   );
+ * }
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   rotateY(0.5);
+ *   box(30, 50);
+ * }
+ *

+ *

+ * + * @alt + * Camera orbits around a box when mouse is hold-clicked & then moved. + */ + // implementation based on three.js 'orbitControls': + // https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js + + _main.default.prototype.orbitControl = function (sensitivityX, sensitivityY, sensitivityZ) { + this._assert3d('orbitControl'); + _main.default._validateParameters('orbitControl', arguments); // If the mouse is not in bounds of the canvas, disable all behaviors: + var mouseInCanvas = this.mouseX < this.width && this.mouseX > 0 && this.mouseY < this.height && this.mouseY > 0; + if (!mouseInCanvas) return; + var cam = this._renderer._curCamera; + if (typeof sensitivityX === 'undefined') { + sensitivityX = 1; + } + if (typeof sensitivityY === 'undefined') { + sensitivityY = sensitivityX; + } + if (typeof sensitivityZ === 'undefined') { + sensitivityZ = 0.5; + } // default right-mouse and mouse-wheel behaviors (context menu and scrolling, + // respectively) are disabled here to allow use of those events for panning and + // zooming + // disable context menu for canvas element and add 'contextMenuDisabled' + // flag to p5 instance + + if (this.contextMenuDisabled !== true) { + this.canvas.oncontextmenu = function () { + return false; + }; + this._setProperty('contextMenuDisabled', true); + } // disable default scrolling behavior on the canvas element and add + // 'wheelDefaultDisabled' flag to p5 instance + + if (this.wheelDefaultDisabled !== true) { + this.canvas.onwheel = function () { + return false; + }; + this._setProperty('wheelDefaultDisabled', true); + } + var scaleFactor = this.height < this.width ? this.height : this.width; // ZOOM if there is a change in mouseWheelDelta + if (this._mouseWheelDeltaY !== this._pmouseWheelDeltaY) { + // zoom according to direction of mouseWheelDeltaY rather than value + if (this._mouseWheelDeltaY > 0) { + this._renderer._curCamera._orbit(0, 0, sensitivityZ * scaleFactor); + } else { + this._renderer._curCamera._orbit(0, 0, - sensitivityZ * scaleFactor); + } + } + if (this.mouseIsPressed) { + // ORBIT BEHAVIOR + if (this.mouseButton === this.LEFT) { + var deltaTheta = - sensitivityX * (this.mouseX - this.pmouseX) / scaleFactor; + var deltaPhi = sensitivityY * (this.mouseY - this.pmouseY) / scaleFactor; + this._renderer._curCamera._orbit(deltaTheta, deltaPhi, 0); + } else if (this.mouseButton === this.RIGHT) { + // PANNING BEHAVIOR along X/Z camera axes and restricted to X/Z plane + // in world space + var local = cam._getLocalAxes(); // normalize portions along X/Z axes + var xmag = Math.sqrt(local.x[0] * local.x[0] + local.x[2] * local.x[2]); + if (xmag !== 0) { + local.x[0] /= xmag; + local.x[2] /= xmag; + } // normalize portions along X/Z axes + + var ymag = Math.sqrt(local.y[0] * local.y[0] + local.y[2] * local.y[2]); + if (ymag !== 0) { + local.y[0] /= ymag; + local.y[2] /= ymag; + } // move along those vectors by amount controlled by mouseX, pmouseY + + var dx = - 1 * sensitivityX * (this.mouseX - this.pmouseX); + var dz = - 1 * sensitivityY * (this.mouseY - this.pmouseY); // restrict movement to XZ plane in world space + cam.setPosition(cam.eyeX + dx * local.x[0] + dz * local.z[0], cam.eyeY, cam.eyeZ + dx * local.x[2] + dz * local.z[2]); + } + } + return this; + }; + /** + * debugMode() helps visualize 3D space by adding a grid to indicate where the + * ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z + * directions. This function can be called without parameters to create a + * default grid and axes icon, or it can be called according to the examples + * above to customize the size and position of the grid and/or axes icon. The + * grid is drawn using the most recently set stroke color and weight. To + * specify these parameters, add a call to stroke() and strokeWeight() + * just before the end of the draw() loop. + * + * By default, the grid will run through the origin (0,0,0) of the sketch + * along the XZ plane + * and the axes icon will be offset from the origin. Both the grid and axes + * icon will be sized according to the current canvas size. Note that because the + * grid runs parallel to the default camera view, it is often helpful to use + * debugMode along with orbitControl to allow full view of the grid. + * @method debugMode + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   normalMaterial();
+ *   debugMode();
+ *   describe(
+ *     'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   box(15, 30);
+ *   // Press the spacebar to turn debugMode off!
+ *   if (keyIsDown(32)) {
+ *     noDebugMode();
+ *   }
+ * }
+ *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   normalMaterial();
+ *   debugMode(GRID);
+ *   describe('a 3D box is centered on a grid in a 3D sketch.');
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   box(15, 30);
+ * }
+ *

+ *

+ * @alt + * a 3D box is centered on a grid in a 3D sketch. + * + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   normalMaterial();
+ *   debugMode(AXES);
+ *   describe(
+ *     'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   box(15, 30);
+ * }
+ *

+ *

+ * @alt + * a 3D box is centered in a 3D sketch. an icon + * indicates the direction of each axis: a red line points +X, + * a green line +Y, and a blue line +Z. + * + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   normalMaterial();
+ *   debugMode(GRID, 100, 10, 0, 0, 0);
+ *   describe('a 3D box is centered on a grid in a 3D sketch');
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   box(15, 30);
+ * }
+ *

+ *

+ * @alt + * a 3D box is centered on a grid in a 3D sketch + * + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   normalMaterial();
+ *   debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
+ *   describe(
+ *     'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   noStroke();
+ *   background(200);
+ *   orbitControl();
+ *   box(15, 30);
+ *   // set the stroke color and weight for the grid!
+ *   stroke(255, 0, 150);
+ *   strokeWeight(0.8);
+ * }
+ *

+ *

+ * @alt + * a 3D box is centered on a grid in a 3D sketch. an icon + * indicates the direction of each axis: a red line points +X, + * a green line +Y, and a blue line +Z. + */ + /** + * @method debugMode + * @param {Constant} mode either GRID or AXES + */ + /** + * @method debugMode + * @param {Constant} mode + * @param {Number} [gridSize] size of one side of the grid + * @param {Number} [gridDivisions] number of divisions in the grid + * @param {Number} [xOff] X axis offset from origin (0,0,0) + * @param {Number} [yOff] Y axis offset from origin (0,0,0) + * @param {Number} [zOff] Z axis offset from origin (0,0,0) + */ + /** + * @method debugMode + * @param {Constant} mode + * @param {Number} [axesSize] size of axes icon + * @param {Number} [xOff] + * @param {Number} [yOff] + * @param {Number} [zOff] + */ + /** + * @method debugMode + * @param {Number} [gridSize] + * @param {Number} [gridDivisions] + * @param {Number} [gridXOff] + * @param {Number} [gridYOff] + * @param {Number} [gridZOff] + * @param {Number} [axesSize] + * @param {Number} [axesXOff] + * @param {Number} [axesYOff] + * @param {Number} [axesZOff] + */ + _main.default.prototype.debugMode = function () { + this._assert3d('debugMode'); + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + _main.default._validateParameters('debugMode', args); // start by removing existing 'post' registered debug methods + for (var i = this._registeredMethods.post.length - 1; i >= 0; i--) { + // test for equality... + if (this._registeredMethods.post[i].toString() === this._grid().toString() || this._registeredMethods.post[i].toString() === this._axesIcon().toString()) { + this._registeredMethods.post.splice(i, 1); + } + } // then add new debugMode functions according to the argument list + + if (args[0] === constants.GRID) { + this.registerMethod('post', this._grid.call(this, args[1], args[2], args[3], args[4], args[5])); + } else if (args[0] === constants.AXES) { + this.registerMethod('post', this._axesIcon.call(this, args[1], args[2], args[3], args[4])); + } else { + this.registerMethod('post', this._grid.call(this, args[0], args[1], args[2], args[3], args[4])); + this.registerMethod('post', this._axesIcon.call(this, args[5], args[6], args[7], args[8])); + } + }; + /** + * Turns off debugMode() in a 3D sketch. + * @method noDebugMode + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   normalMaterial();
+ *   debugMode();
+ *   describe(
+ *     'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   box(15, 30);
+ *   // Press the spacebar to turn debugMode off!
+ *   if (keyIsDown(32)) {
+ *     noDebugMode();
+ *   }
+ * }
+ *

+ *

+ * @alt + * a 3D box is centered on a grid in a 3D sketch. an icon + * indicates the direction of each axis: a red line points +X, + * a green line +Y, and a blue line +Z. the grid and icon disappear when the + * spacebar is pressed. + */ + _main.default.prototype.noDebugMode = function () { + this._assert3d('noDebugMode'); // start by removing existing 'post' registered debug methods + for (var i = this._registeredMethods.post.length - 1; i >= 0; i--) { + // test for equality... + if (this._registeredMethods.post[i].toString() === this._grid().toString() || this._registeredMethods.post[i].toString() === this._axesIcon().toString()) { + this._registeredMethods.post.splice(i, 1); + } + } + }; + /** + * For use with debugMode + * @private + * @method _grid + * @param {Number} [size] size of grid sides + * @param {Number} [div] number of grid divisions + * @param {Number} [xOff] offset of grid center from origin in X axis + * @param {Number} [yOff] offset of grid center from origin in Y axis + * @param {Number} [zOff] offset of grid center from origin in Z axis + */ + _main.default.prototype._grid = function (size, numDivs, xOff, yOff, zOff) { + if (typeof size === 'undefined') { + size = this.width / 2; + } + if (typeof numDivs === 'undefined') { + // ensure at least 2 divisions + numDivs = Math.round(size / 30) < 4 ? 4 : Math.round(size / 30); + } + if (typeof xOff === 'undefined') { + xOff = 0; + } + if (typeof yOff === 'undefined') { + yOff = 0; + } + if (typeof zOff === 'undefined') { + zOff = 0; + } + var spacing = size / numDivs; + var halfSize = size / 2; + return function () { + this.push(); + this.stroke(this._renderer.curStrokeColor[0] * 255, this._renderer.curStrokeColor[1] * 255, this._renderer.curStrokeColor[2] * 255); + this._renderer.uMVMatrix.set(this._renderer._curCamera.cameraMatrix.mat4[0], this._renderer._curCamera.cameraMatrix.mat4[1], this._renderer._curCamera.cameraMatrix.mat4[2], this._renderer._curCamera.cameraMatrix.mat4[3], this._renderer._curCamera.cameraMatrix.mat4[4], this._renderer._curCamera.cameraMatrix.mat4[5], this._renderer._curCamera.cameraMatrix.mat4[6], this._renderer._curCamera.cameraMatrix.mat4[7], this._renderer._curCamera.cameraMatrix.mat4[8], this._renderer._curCamera.cameraMatrix.mat4[9], this._renderer._curCamera.cameraMatrix.mat4[10], this._renderer._curCamera.cameraMatrix.mat4[11], this._renderer._curCamera.cameraMatrix.mat4[12], this._renderer._curCamera.cameraMatrix.mat4[13], this._renderer._curCamera.cameraMatrix.mat4[14], this._renderer._curCamera.cameraMatrix.mat4[15]); // Lines along X axis + for (var q = 0; q <= numDivs; q++) { + this.beginShape(this.LINES); + this.vertex( - halfSize + xOff, yOff, q * spacing - halfSize + zOff); + this.vertex( + halfSize + xOff, yOff, q * spacing - halfSize + zOff); + this.endShape(); + } // Lines along Z axis + + for (var i = 0; i <= numDivs; i++) { + this.beginShape(this.LINES); + this.vertex(i * spacing - halfSize + xOff, yOff, - halfSize + zOff); + this.vertex(i * spacing - halfSize + xOff, yOff, + halfSize + zOff); + this.endShape(); + } + this.pop(); + }; + }; + /** + * For use with debugMode + * @private + * @method _axesIcon + * @param {Number} [size] size of axes icon lines + * @param {Number} [xOff] offset of icon from origin in X axis + * @param {Number} [yOff] offset of icon from origin in Y axis + * @param {Number} [zOff] offset of icon from origin in Z axis + */ + _main.default.prototype._axesIcon = function (size, xOff, yOff, zOff) { + if (typeof size === 'undefined') { + size = this.width / 20 > 40 ? this.width / 20 : 40; + } + if (typeof xOff === 'undefined') { + xOff = - this.width / 4; + } + if (typeof yOff === 'undefined') { + yOff = xOff; + } + if (typeof zOff === 'undefined') { + zOff = xOff; + } + return function () { + this.push(); + this._renderer.uMVMatrix.set(this._renderer._curCamera.cameraMatrix.mat4[0], this._renderer._curCamera.cameraMatrix.mat4[1], this._renderer._curCamera.cameraMatrix.mat4[2], this._renderer._curCamera.cameraMatrix.mat4[3], this._renderer._curCamera.cameraMatrix.mat4[4], this._renderer._curCamera.cameraMatrix.mat4[5], this._renderer._curCamera.cameraMatrix.mat4[6], this._renderer._curCamera.cameraMatrix.mat4[7], this._renderer._curCamera.cameraMatrix.mat4[8], this._renderer._curCamera.cameraMatrix.mat4[9], this._renderer._curCamera.cameraMatrix.mat4[10], this._renderer._curCamera.cameraMatrix.mat4[11], this._renderer._curCamera.cameraMatrix.mat4[12], this._renderer._curCamera.cameraMatrix.mat4[13], this._renderer._curCamera.cameraMatrix.mat4[14], this._renderer._curCamera.cameraMatrix.mat4[15]); // X axis + this.strokeWeight(2); + this.stroke(255, 0, 0); + this.beginShape(this.LINES); + this.vertex(xOff, yOff, zOff); + this.vertex(xOff + size, yOff, zOff); + this.endShape(); // Y axis + this.stroke(0, 255, 0); + this.beginShape(this.LINES); + this.vertex(xOff, yOff, zOff); + this.vertex(xOff, yOff + size, zOff); + this.endShape(); // Z axis + this.stroke(0, 0, 255); + this.beginShape(this.LINES); + this.vertex(xOff, yOff, zOff); + this.vertex(xOff, yOff, zOff + size); + this.endShape(); + this.pop(); + }; + }; + var _default = _main.default; + exports.default = _default; + }, + { + '../core/constants': 278, + '../core/main': 290, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.array.splice': 182, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.to-string': 200, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 335: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + var constants = _interopRequireWildcard(_dereq_('../core/constants')); + function _getRequireWildcardCache() { + if (typeof WeakMap !== 'function') return null; + var cache = new WeakMap(); + _getRequireWildcardCache = function _getRequireWildcardCache() { + return cache; + }; + return cache; + } + function _interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } + if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') { + return { + default: + obj + }; + } + var cache = _getRequireWildcardCache(); + if (cache && cache.has(obj)) { + return cache.get(obj); + } + var newObj = { + }; + var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; + if (desc && (desc.get || desc.set)) { + Object.defineProperty(newObj, key, desc); + } else { + newObj[key] = obj[key]; + } + } + } + newObj.default = obj; + if (cache) { + cache.set(obj, newObj); + } + return newObj; + } + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module 3D + * @submodule Lights + * @for p5 + * @requires core + */ + /** + * Creates an ambient light with the given color. + * + * Ambient light does not come from a specific direction. + * Objects are evenly lit from all sides. Ambient lights are + * almost always used in combination with other types of lights. + * + * Note: lights need to be called (whether directly or indirectly) + * within draw() to remain persistent in a looping program. + * Placing them in setup() will cause them to only have an effect + * the first time through the loop. + * + * @method ambientLight + * @param {Number} v1 red or hue value relative to + * the current color range + * @param {Number} v2 green or saturation value + * relative to the current color range + * @param {Number} v3 blue or brightness value + * relative to the current color range + * @param {Number} [alpha] alpha value relative to current + * color range (default is 0-255) + * @chainable + * + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   noStroke();
+ *   describe('sphere with coral color under black light');
+ * }
+ * function draw() {
+ *   background(100);
+ *   ambientLight(0); // black light (no light)
+ *   ambientMaterial(255, 127, 80); // coral material
+ *   sphere(40);
+ * }
+ *

+ *

+ * @alt + * sphere with coral color under black light + * + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   noStroke();
+ *   describe('sphere with coral color under white light');
+ * }
+ * function draw() {
+ *   background(100);
+ *   ambientLight(255); // white light
+ *   ambientMaterial(255, 127, 80); // coral material
+ *   sphere(40);
+ * }
+ *

+ *

+ * @alt + * sphere with coral color under white light + */ + /** + * @method ambientLight + * @param {Number} gray number specifying value between + * white and black + * @param {Number} [alpha] + * @chainable + */ + /** + * @method ambientLight + * @param {String} value a color string + * @chainable + */ + /** + * @method ambientLight + * @param {Number[]} values an array containing the red,green,blue & + * and alpha components of the color + * @chainable + */ + /** + * @method ambientLight + * @param {p5.Color} color color as a p5.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; + }; + /** + * Sets the color of the specular highlight of a non-ambient light + * (i.e. all lights except ambientLight()). + * + * specularColor() affects only the lights which are created after + * it in the code. + * + * This function is used in combination with + * specularMaterial(). + * If a geometry does not use specularMaterial(), this function + * will have no effect. + * + * The default color is white (255, 255, 255), which is used if + * specularColor() is not explicitly called. + * + * Note: specularColor is equivalent to the Processing function + * lightSpecular. + * + * @method specularColor + * @param {Number} v1 red or hue value relative to + * the current color range + * @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 + *

+ *


+ * let setRedSpecularColor = true;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   noStroke();
+ *   describe(
+ *     'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *
+ *   ambientLight(60);
+ *
+ *   // add a point light to showcase specular color
+ *   // -- use mouse location to position the light
+ *   let lightPosX = mouseX - width / 2;
+ *   let lightPosY = mouseY - height / 2;
+ *   // -- set the light's specular color
+ *   if (setRedSpecularColor) {
+ *     specularColor(255, 0, 0); // red specular highlight
+ *   }
+ *   // -- create the light
+ *   pointLight(200, 200, 200, lightPosX, lightPosY, 50); // white light
+ *
+ *   // use specular material with high shininess
+ *   specularMaterial(150);
+ *   shininess(50);
+ *
+ *   sphere(30, 64, 64);
+ * }
+ *
+ * function mouseClicked() {
+ *   setRedSpecularColor = !setRedSpecularColor;
+ * }
+ *

+ *

+ * + * @alt + * Sphere with specular highlight. Clicking the mouse toggles the + * specular highlight color between red and the default white. + */ + /** + * @method specularColor + * @param {Number} gray number specifying value between + * white and black + * @chainable + */ + /** + * @method specularColor + * @param {String} value color as a CSS string + * @chainable + */ + /** + * @method specularColor + * @param {Number[]} values color as an array containing the + * red, green, and blue components + * @chainable + */ + /** + * @method specularColor + * @param {p5.Color} color color as a p5.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 the given color and direction. + * + * Directional light comes from one direction. + * The direction is specified as numbers inclusively between -1 and 1. + * For example, setting the direction as (0, -1, 0) will cause the + * geometry to be lit from below (since the light will be facing + * directly upwards). Similarly, setting the direction as (1, 0, 0) + * will cause the geometry to be lit from the left (since the light + * will be facing directly rightwards). + * + * Directional lights do not have a specific point of origin, and + * therefore cannot be positioned closer or farther away from a geometry. + * + * A maximum of **5** directional lights can be active at once. + * + * Note: lights need to be called (whether directly or indirectly) + * within draw() to remain persistent in a looping program. + * Placing them in setup() will cause them to only have an effect + * the first time through the loop. + * + * @method directionalLight + * @param {Number} v1 red or hue value relative to the current + * color range + * @param {Number} v2 green or saturation value relative to the + * current color range + * @param {Number} v3 blue or brightness value relative to the + * current color range + * @param {Number} x x component of direction (inclusive range of -1 to 1) + * @param {Number} y y component of direction (inclusive range of -1 to 1) + * @param {Number} z z component of direction (inclusive range of -1 to 1) + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe(
+ *     'scene with sphere and directional light. The direction of the light is controlled with the mouse position.'
+ *   );
+ * }
+ * function draw() {
+ *   background(0);
+ *   //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 + * scene with sphere and directional light. The direction of + * the light is controlled with the mouse position. + */ + /** + * @method directionalLight + * @param {Number} v1 + * @param {Number} v2 + * @param {Number} v3 + * @param {p5.Vector} direction direction of light as a + * p5.Vector + * @chainable + */ + /** + * @method directionalLight + * @param {p5.Color|Number[]|String} color color as a p5.Color, + * as an array, or as a CSS string + * @param {Number} x + * @param {Number} y + * @param {Number} z + * @chainable + */ + /** + * @method directionalLight + * @param {p5.Color|Number[]|String} color + * @param {p5.Vector} direction + * @chainable + */ + _main.default.prototype.directionalLight = function (v1, v2, v3, x, y, z) { + this._assert3d('directionalLight'); + _main.default._validateParameters('directionalLight', arguments); //@TODO: check parameters number + var color; + if (v1 instanceof _main.default.Color) { + color = v1; + } else { + color = this.color(v1, v2, v3); + } + var _x, + _y, + _z; + var v = arguments[arguments.length - 1]; + if (typeof v === 'number') { + _x = arguments[arguments.length - 3]; + _y = arguments[arguments.length - 2]; + _z = arguments[arguments.length - 1]; + } else { + _x = v.x; + _y = v.y; + _z = v.z; + } // normalize direction + + var l = Math.sqrt(_x * _x + _y * _y + _z * _z); + this._renderer.directionalLightDirections.push(_x / l, _y / l, _z / l); + this._renderer.directionalLightDiffuseColors.push(color._array[0], color._array[1], color._array[2]); + Array.prototype.push.apply(this._renderer.directionalLightSpecularColors, this._renderer.specularColors); + this._renderer._enableLighting = true; + return this; + }; + /** + * Creates a point light with the given color and position. + * + * A point light emits light from a single point in all directions. + * Because the light is emitted from a specific point (position), + * it has a different effect when it is positioned farther vs. nearer + * an object. + * + * A maximum of **5** point lights can be active at once. + * + * Note: lights need to be called (whether directly or indirectly) + * within draw() to remain persistent in a looping program. + * Placing them in setup() will cause them to only have an effect + * the first time through the loop. + * + * @method pointLight + * @param {Number} v1 red or hue value relative to the current + * color range + * @param {Number} v2 green or saturation value relative to the + * current color range + * @param {Number} v3 blue or brightness value relative to the + * current color range + * @param {Number} x x component of position + * @param {Number} y y component of position + * @param {Number} z z component of position + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe(
+ *     'scene with sphere and point light. The position of the light is controlled with the mouse position.'
+ *   );
+ * }
+ * function draw() {
+ *   background(0);
+ *   // move your mouse to change light position
+ *   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 + * scene with sphere and point light. The position of + * the light is controlled with the mouse position. + */ + /** + * @method pointLight + * @param {Number} v1 + * @param {Number} v2 + * @param {Number} v3 + * @param {p5.Vector} position of light as a p5.Vector + * @chainable + */ + /** + * @method pointLight + * @param {p5.Color|Number[]|String} color color as a p5.Color, + * as an array, or as a CSS string + * @param {Number} x + * @param {Number} y + * @param {Number} z + * @chainable + */ + /** + * @method pointLight + * @param {p5.Color|Number[]|String} color + * @param {p5.Vector} position + * @chainable + */ + _main.default.prototype.pointLight = function (v1, v2, v3, x, y, z) { + this._assert3d('pointLight'); + _main.default._validateParameters('pointLight', arguments); //@TODO: check parameters number + var color; + if (v1 instanceof _main.default.Color) { + color = v1; + } else { + color = this.color(v1, v2, v3); + } + var _x, + _y, + _z; + var v = arguments[arguments.length - 1]; + if (typeof v === 'number') { + _x = arguments[arguments.length - 3]; + _y = arguments[arguments.length - 2]; + _z = arguments[arguments.length - 1]; + } else { + _x = v.x; + _y = v.y; + _z = v.z; + } + this._renderer.pointLightPositions.push(_x, _y, _z); + this._renderer.pointLightDiffuseColors.push(color._array[0], color._array[1], color._array[2]); + Array.prototype.push.apply(this._renderer.pointLightSpecularColors, this._renderer.specularColors); + this._renderer._enableLighting = true; + return this; + }; + /** + * Places an ambient and directional light in the scene. + * The lights are set to ambientLight(128, 128, 128) and + * directionalLight(128, 128, 128, 0, 0, -1). + * + * Note: lights need to be called (whether directly or indirectly) + * within draw() to remain persistent in a looping program. + * Placing them in setup() will cause them to only have an effect + * the first time through the loop. + * + * @method lights + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('the light is partially ambient and partially directional');
+ * }
+ * function draw() {
+ *   background(0);
+ *   lights();
+ *   rotateX(millis() / 1000);
+ *   rotateY(millis() / 1000);
+ *   rotateZ(millis() / 1000);
+ *   box();
+ * }
+ *

+ *

+ * + * @alt + * the light is partially ambient and partially directional + */ + _main.default.prototype.lights = function () { + this._assert3d('lights'); // only restore the colorMode to default if it is not in default already + if (this._colorMode === constants.RGB) { + this.ambientLight(128, 128, 128); + this.directionalLight(128, 128, 128, 0, 0, - 1); + } else { + var maxBright = this._colorMaxes[this._colorMode][2]; + this.ambientLight(0, 0, maxBright); + this.directionalLight(0, 0, maxBright, 0, 0, - 1); + } + return this; + }; + /** + * Sets the falloff rate for pointLight() + * and spotLight(). + * + * lightFalloff() affects only the lights which are created after it + * in the code. + * + * The `constant`, `linear`, an `quadratic` parameters are used to calculate falloff as follows: + * + * d = distance from light position to vertex position + * + * falloff = 1 / (CONSTANT + d \* LINEAR + (d \* d) \* QUADRATIC) + * + * @method lightFalloff + * @param {Number} constant CONSTANT value for determining falloff + * @param {Number} linear LINEAR value for determining falloff + * @param {Number} quadratic QUADRATIC value for determining falloff + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   noStroke();
+ *   describe(
+ *     'Two spheres with different falloff values show different intensity of light'
+ *   );
+ * }
+ * function draw() {
+ *   ortho();
+ *   background(0);
+ *
+ *   let locX = mouseX - width / 2;
+ *   let locY = mouseY - height / 2;
+ *   locX /= 2; // half scale
+ *
+ *   lightFalloff(1, 0, 0);
+ *   push();
+ *   translate(-25, 0, 0);
+ *   pointLight(250, 250, 250, locX - 25, locY, 50);
+ *   sphere(20);
+ *   pop();
+ *
+ *   lightFalloff(0.97, 0.03, 0);
+ *   push();
+ *   translate(25, 0, 0);
+ *   pointLight(250, 250, 250, locX + 25, locY, 50);
+ *   sphere(20);
+ *   pop();
+ * }
+ *

+ *

+ * + * @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 spot light with the given color, position, + * light direction, angle, and concentration. + * + * Like a pointLight(), a spotLight() + * emits light from a specific point (position). It has a different effect + * when it is positioned farther vs. nearer an object. + * + * However, unlike a pointLight(), the light is emitted in **one direction** + * along a conical shape. The shape of the cone can be controlled using + * the `angle` and `concentration` parameters. + * + * The `angle` parameter is used to + * determine the radius of the cone. And the `concentration` + * parameter is used to focus the light towards the center of + * the cone. Both parameters are optional, however if you want + * to specify `concentration`, you must also specify `angle`. + * The minimum concentration value is 1. + * + * A maximum of **5** spot lights can be active at once. + * + * Note: lights need to be called (whether directly or indirectly) + * within draw() to remain persistent in a looping program. + * Placing them in setup() will cause them to only have an effect + * the first time through the loop. + * + * @method spotLight + * @param {Number} v1 red or hue value relative to the current color range + * @param {Number} v2 green or saturation value relative to the current color range + * @param {Number} v3 blue or brightness value relative to the current color range + * @param {Number} x x component of position + * @param {Number} y y component of position + * @param {Number} z z component of position + * @param {Number} rx x component of light direction (inclusive range of -1 to 1) + * @param {Number} ry y component of light direction (inclusive range of -1 to 1) + * @param {Number} rz z component of light direction (inclusive range of -1 to 1) + * @param {Number} [angle] angle of cone. Defaults to PI/3 + * @param {Number} [concentration] concentration of cone. Defaults to 100 + * @chainable + * + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe(
+ *     'scene with sphere and spot light. The position of the light is controlled with the mouse position.'
+ *   );
+ * }
+ * function draw() {
+ *   background(0);
+ *   // move your mouse to change light position
+ *   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 + * scene with sphere and spot light. The position of + * the light is controlled with the mouse position. + */ + /** + * @method spotLight + * @param {p5.Color|Number[]|String} color color as a p5.Color, + * as an array, or as a CSS string + * @param {p5.Vector} position position of light as a p5.Vector + * @param {p5.Vector} direction direction of light as a p5.Vector + * @param {Number} [angle] + * @param {Number} [concentration] + */ + /** + * @method spotLight + * @param {Number} v1 + * @param {Number} v2 + * @param {Number} v3 + * @param {p5.Vector} position + * @param {p5.Vector} direction + * @param {Number} [angle] + * @param {Number} [concentration] + */ + /** + * @method spotLight + * @param {p5.Color|Number[]|String} color + * @param {Number} x + * @param {Number} y + * @param {Number} z + * @param {p5.Vector} direction + * @param {Number} [angle] + * @param {Number} [concentration] + */ + /** + * @method spotLight + * @param {p5.Color|Number[]|String} color + * @param {p5.Vector} position + * @param {Number} rx + * @param {Number} ry + * @param {Number} rz + * @param {Number} [angle] + * @param {Number} [concentration] + */ + /** + * @method spotLight + * @param {Number} v1 + * @param {Number} v2 + * @param {Number} v3 + * @param {Number} x + * @param {Number} y + * @param {Number} z + * @param {p5.Vector} direction + * @param {Number} [angle] + * @param {Number} [concentration] + */ + /** + * @method spotLight + * @param {Number} v1 + * @param {Number} v2 + * @param {Number} v3 + * @param {p5.Vector} position + * @param {Number} rx + * @param {Number} ry + * @param {Number} rz + * @param {Number} [angle] + * @param {Number} [concentration] + */ + /** + * @method spotLight + * @param {p5.Color|Number[]|String} color + * @param {Number} x + * @param {Number} y + * @param {Number} z + * @param {Number} rx + * @param {Number} ry + * @param {Number} rz + * @param {Number} [angle] + * @param {Number} [concentration] + */ + _main.default.prototype.spotLight = function (v1, v2, v3, x, y, z, nx, ny, nz, angle, concentration) { + this._assert3d('spotLight'); + _main.default._validateParameters('spotLight', arguments); + var color, + position, + direction; + var length = arguments.length; + switch (length) { + case 11: + case 10: + color = this.color(v1, v2, v3); + position = new _main.default.Vector(x, y, z); + direction = new _main.default.Vector(nx, ny, nz); + break; + case 9: + if (v1 instanceof _main.default.Color) { + color = v1; + position = new _main.default.Vector(v2, v3, x); + direction = new _main.default.Vector(y, z, nx); + angle = ny; + concentration = nz; + } else if (x instanceof _main.default.Vector) { + color = this.color(v1, v2, v3); + position = x; + direction = new _main.default.Vector(y, z, nx); + angle = ny; + concentration = nz; + } else if (nx instanceof _main.default.Vector) { + color = this.color(v1, v2, v3); + position = new _main.default.Vector(x, y, z); + direction = nx; + angle = ny; + concentration = nz; + } else { + color = this.color(v1, v2, v3); + position = new _main.default.Vector(x, y, z); + direction = new _main.default.Vector(nx, ny, nz); + } + break; + case 8: + if (v1 instanceof _main.default.Color) { + color = v1; + position = new _main.default.Vector(v2, v3, x); + direction = new _main.default.Vector(y, z, nx); + angle = ny; + } else if (x instanceof _main.default.Vector) { + color = this.color(v1, v2, v3); + position = x; + direction = new _main.default.Vector(y, z, nx); + angle = ny; + } else { + color = this.color(v1, v2, v3); + position = new _main.default.Vector(x, y, z); + direction = nx; + angle = ny; + } + break; + case 7: + if (v1 instanceof _main.default.Color && v2 instanceof _main.default.Vector) { + color = v1; + position = v2; + direction = new _main.default.Vector(v3, x, y); + angle = z; + concentration = nx; + } else if (v1 instanceof _main.default.Color && y instanceof _main.default.Vector) { + color = v1; + position = new _main.default.Vector(v2, v3, x); + direction = y; + angle = z; + concentration = nx; + } else if (x instanceof _main.default.Vector && y instanceof _main.default.Vector) { + color = this.color(v1, v2, v3); + position = x; + direction = y; + angle = z; + concentration = nx; + } else if (v1 instanceof _main.default.Color) { + color = v1; + position = new _main.default.Vector(v2, v3, x); + direction = new _main.default.Vector(y, z, nx); + } else if (x instanceof _main.default.Vector) { + color = this.color(v1, v2, v3); + position = x; + direction = new _main.default.Vector(y, z, nx); + } else { + color = this.color(v1, v2, v3); + position = new _main.default.Vector(x, y, z); + direction = nx; + } + break; + case 6: + if (x instanceof _main.default.Vector && y instanceof _main.default.Vector) { + color = this.color(v1, v2, v3); + position = x; + direction = y; + angle = z; + } else if (v1 instanceof _main.default.Color && y instanceof _main.default.Vector) { + color = v1; + position = new _main.default.Vector(v2, v3, x); + direction = y; + angle = z; + } else if (v1 instanceof _main.default.Color && v2 instanceof _main.default.Vector) { + color = v1; + position = v2; + direction = new _main.default.Vector(v3, x, y); + angle = z; + } + break; + case 5: + if (v1 instanceof _main.default.Color && v2 instanceof _main.default.Vector && v3 instanceof _main.default.Vector) { + color = v1; + position = v2; + direction = v3; + angle = x; + concentration = y; + } else if (x instanceof _main.default.Vector && y instanceof _main.default.Vector) { + color = this.color(v1, v2, v3); + position = x; + direction = y; + } else if (v1 instanceof _main.default.Color && y instanceof _main.default.Vector) { + color = v1; + position = new _main.default.Vector(v2, v3, x); + direction = y; + } else if (v1 instanceof _main.default.Color && v2 instanceof _main.default.Vector) { + color = v1; + position = v2; + direction = new _main.default.Vector(v3, x, y); + } + break; + case 4: + color = v1; + position = v2; + direction = v3; + angle = x; + break; + case 3: + color = v1; + position = v2; + direction = v3; + break; + default: + console.warn('Sorry, input for spotlight() is not in prescribed format. Too '.concat(length < 3 ? 'few' : 'many', ' arguments were provided')); + return this; + } + this._renderer.spotLightDiffuseColors.push(color._array[0], color._array[1], color._array[2]); + Array.prototype.push.apply(this._renderer.spotLightSpecularColors, this._renderer.specularColors); + this._renderer.spotLightPositions.push(position.x, position.y, position.z); + direction.normalize(); + this._renderer.spotLightDirections.push(direction.x, direction.y, direction.z); + if (angle === undefined) { + angle = Math.PI / 3; + } + if (concentration !== undefined && concentration < 1) { + concentration = 1; + console.warn('Value of concentration needs to be greater than 1. Setting it to 1'); + } else if (concentration === undefined) { + concentration = 100; + } + angle = this._renderer._pInst._toRadians(angle); + this._renderer.spotLightAngle.push(Math.cos(angle)); + this._renderer.spotLightConc.push(concentration); + this._renderer._enableLighting = true; + return this; + }; + /** + * Removes all lights present in a sketch. + * + * All subsequent geometry is rendered without lighting (until a new + * light is created with a call to one of the lighting functions + * (lights(), + * ambientLight(), + * directionalLight(), + * pointLight(), + * spotLight()). + * + * @method noLights + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe(
+ *     'Three white spheres. Each appears as a different color due to lighting.'
+ *   );
+ * }
+ * function draw() {
+ *   background(200);
+ *   noStroke();
+ *
+ *   ambientLight(255, 0, 0);
+ *   translate(-30, 0, 0);
+ *   ambientMaterial(255);
+ *   sphere(13);
+ *
+ *   noLights();
+ *   translate(30, 0, 0);
+ *   ambientMaterial(255);
+ *   sphere(13);
+ *
+ *   ambientLight(0, 255, 0);
+ *   translate(30, 0, 0);
+ *   ambientMaterial(255);
+ *   sphere(13);
+ * }
+ *

+ *

+ * + * @alt + * Three white spheres. Each appears as a different + * color due to lighting. + */ + _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/constants': 278, + '../core/main': 290, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 336: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.index-of'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.array.splice'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.string.match'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/es.string.trim'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.index-of'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.array.splice'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.string.match'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/es.string.trim'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + _dereq_('./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 + * (.stl, .obj). + * @return {p5.Geometry} the p5.Geometry object + * + * @example + *

+ *


+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ *   octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('Vertically rotating 3-d octahedron.');
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   model(octahedron);
+ * }
+ *

+ *

+ * + * @alt + * Vertically rotating 3-d octahedron. + * + * @example + *

+ *


+ * //draw a spinning teapot
+ * let teapot;
+ *
+ * function preload() {
+ *   // Load model with normalise parameter set to true
+ *   teapot = loadModel('assets/teapot.obj', true);
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('Vertically rotating 3-d teapot with red, green and blue gradient.');
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   scale(0.4); // Scaled to make model fit into canvas
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   normalMaterial(); // For effect
+ *   model(teapot);
+ * }
+ *

+ *

+ * + * @alt + * Vertically rotating 3-d teapot with red, green and blue gradient. + */ + /** + * @method loadModel + * @param {String} path + * @param {function(p5.Geometry)} [successCallback] + * @param {function(Event)} [failureCallback] + * @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 U and V (W is omitted). + // Because of WebGL texture coordinates rendering behaviour, the V + // coordinate is inversed. + var texVertex = [ + parseFloat(tokens[1]), + 1 - parseFloat(tokens[2]) + ]; + loadedVerts[tokens[0]].push(texVertex); + } else if (tokens[0] === 'f') { + // Check if this line describes a face. + // OBJ faces can have more than three points. Triangulate points. + for (var tri = 3; tri < tokens.length; ++tri) { + var face = [ + ]; + var vertexTokens = [ + 1, + tri - 1, + tri + ]; + for (var tokenInd = 0; tokenInd < vertexTokens.length; ++tokenInd) { + // Now, convert the given token into an index + var vertString = tokens[vertexTokens[tokenInd]]; + var 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) === 1129270351 /*COLO*/ + && reader.getUint8(index + 4) === 82 /*'R'*/ + && reader.getUint8(index + 5) === 61 /*'='*/ + ) { + hasColors = true; + colors = [ + ]; + defaultR = reader.getUint8(index + 6) / 255; + defaultG = reader.getUint8(index + 7) / 255; + defaultB = reader.getUint8(index + 8) / 255; // To be used when color support is added + // alpha = reader.getUint8(index + 9) / 255; + } + } + var dataOffset = 84; + var faceLength = 12 * 4 + 2; // Iterate the faces + for (var face = 0; face < faces; face++) { + var start = dataOffset + face * faceLength; + var normalX = reader.getFloat32(start, true); + var normalY = reader.getFloat32(start + 4, true); + var normalZ = reader.getFloat32(start + 8, true); + if (hasColors) { + var packedColor = reader.getUint16(start + 48, true); + if ((packedColor & 32768) === 0) { + // facet has its own unique color + r = (packedColor & 31) / 31; + g = (packedColor >> 5 & 31) / 31; + b = (packedColor >> 10 & 31) / 31; + } else { + r = defaultR; + g = defaultG; + b = defaultB; + } + } + var newNormal = new _main.default.Vector(normalX, normalY, normalZ); + for (var i = 1; i <= 3; i++) { + var vertexstart = start + i * 12; + var newVertex = new _main.default.Vector(reader.getFloat32(vertexstart, true), reader.getFloat32(vertexstart + 4, true), reader.getFloat32(vertexstart + 8, true)); + model.vertices.push(newVertex); + model.vertexNormals.push(newNormal); + if (hasColors) { + colors.push(r, g, b); + } + } + model.faces.push([3 * face, + 3 * face + 1, + 3 * face + 2]); + model.uvs.push([0, + 0], [ + 0, + 0 + ], [ + 0, + 0 + ]); + } + if (hasColors) { // add support for colors here. + } + return model; + } /** + * ASCII STL file starts with `solid 'nameOfFile'` + * Then contain the normal of the face, starting with `facet normal` + * Next contain a keyword indicating the start of face vertex, `outer loop` + * Next comes the three vertex, starting with `vertex x y z` + * Vertices ends with `endloop` + * Face ends with `endfacet` + * Next face starts with `facet normal` + * The end of the file is indicated by `endsolid` + */ + + function parseASCIISTL(model, lines) { + var state = ''; + var curVertexIndex = [ + ]; + var newNormal, + newVertex; + for (var iterator = 0; iterator < lines.length; ++iterator) { + var line = lines[iterator].trim(); + var parts = line.split(' '); + for (var partsiterator = 0; partsiterator < parts.length; ++partsiterator) { + if (parts[partsiterator] === '') { + // Ignoring multiple whitespaces + parts.splice(partsiterator, 1); + } + } + if (parts.length === 0) { + // Remove newline + continue; + } + switch (state) { + case '': + // First run + if (parts[0] !== 'solid') { + // Invalid state + console.error(line); + console.error('Invalid state "'.concat(parts[0], '", should be "solid"')); + return; + } else { + state = 'solid'; + } + break; + case 'solid': + // First face + if (parts[0] !== 'facet' || parts[1] !== 'normal') { + // Invalid state + console.error(line); + console.error('Invalid state "'.concat(parts[0], '", should be "facet normal"')); + return; + } else { + // Push normal for first face + newNormal = new _main.default.Vector(parseFloat(parts[2]), parseFloat(parts[3]), parseFloat(parts[4])); + model.vertexNormals.push(newNormal, newNormal, newNormal); + state = 'facet normal'; + } + break; + case 'facet normal': + // After normal is defined + if (parts[0] !== 'outer' || parts[1] !== 'loop') { + // Invalid State + console.error(line); + console.error('Invalid state "'.concat(parts[0], '", should be "outer loop"')); + return; + } else { + // Next should be vertices + state = 'vertex'; + } + break; + case 'vertex': + if (parts[0] === 'vertex') { + //Vertex of triangle + newVertex = new _main.default.Vector(parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3])); + model.vertices.push(newVertex); + model.uvs.push([0, + 0]); + curVertexIndex.push(model.vertices.indexOf(newVertex)); + } else if (parts[0] === 'endloop') { + // End of vertices + model.faces.push(curVertexIndex); + curVertexIndex = [ + ]; + state = 'endloop'; + } else { + // Invalid State + console.error(line); + console.error('Invalid state "'.concat(parts[0], '", should be "vertex" or "endloop"')); + return; + } + break; + case 'endloop': + if (parts[0] !== 'endfacet') { + // End of face + console.error(line); + console.error('Invalid state "'.concat(parts[0], '", should be "endfacet"')); + return; + } else { + state = 'endfacet'; + } + break; + case 'endfacet': + if (parts[0] === 'endsolid') { // End of solid + } else if (parts[0] === 'facet' && parts[1] === 'normal') { + // Next face + newNormal = new _main.default.Vector(parseFloat(parts[2]), parseFloat(parts[3]), parseFloat(parts[4])); + model.vertexNormals.push(newNormal, newNormal, newNormal); + state = 'facet normal'; + } else { + // Invalid State + console.error(line); + console.error('Invalid state "'.concat(parts[0], '", should be "endsolid" or "facet normal"')); + return; + } + break; + default: + console.error('Invalid state "'.concat(state, '"')); + break; + } + } + return model; + } /** + * Render a 3d model to the screen. + * + * @method model + * @param {p5.Geometry} model Loaded 3d model to be rendered + * @example + *

+ *


+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ *   octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('Vertically rotating 3-d octahedron.');
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   model(octahedron);
+ * }
+ *

+ *

+ * + * @alt + * Vertically rotating 3-d octahedron. + */ + + _main.default.prototype.model = function (model) { + this._assert3d('model'); + _main.default._validateParameters('model', arguments); + if (model.vertices.length > 0) { + if (!this._renderer.geometryInHash(model.gid)) { + model._makeTriangleEdges()._edgesToVertices(); + this._renderer.createBuffers(model.gid, model); + } + this._renderer.drawBuffers(model.gid); + } + }; + var _default = _main.default; + exports.default = _default; + }, + { + '../core/main': 290, + './p5.Geometry': 339, + 'core-js/modules/es.array.concat': 167, + 'core-js/modules/es.array.index-of': 175, + 'core-js/modules/es.array.slice': 180, + 'core-js/modules/es.array.splice': 182, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.exec': 199, + 'core-js/modules/es.string.match': 205, + 'core-js/modules/es.string.split': 209, + 'core-js/modules/es.string.trim': 211 + } + ], + 337: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.join'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + _dereq_('core-js/modules/es.array.join'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + var constants = _interopRequireWildcard(_dereq_('../core/constants')); + _dereq_('./p5.Texture'); + function _getRequireWildcardCache() { + if (typeof WeakMap !== 'function') return null; + var cache = new WeakMap(); + _getRequireWildcardCache = function _getRequireWildcardCache() { + return cache; + }; + return cache; + } + function _interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } + if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') { + return { + default: + obj + }; + } + var cache = _getRequireWildcardCache(); + if (cache && cache.has(obj)) { + return cache.get(obj); + } + var newObj = { + }; + var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; + if (desc && (desc.get || desc.set)) { + Object.defineProperty(newObj, key, desc); + } else { + newObj[key] = obj[key]; + } + } + } + newObj.default = obj; + if (cache) { + cache.set(obj, newObj); + } + return newObj; + } + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module 3D + * @submodule Material + * @for p5 + * @requires core + */ + /** + * Creates a new p5.Shader object + * from the provided vertex and fragment shader files. + * + * The shader files are loaded asynchronously in the + * background, so this method should be used in preload(). + * + * Note, shaders can only be used in WEBGL mode. + * + * @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 p5.Shader object is passed as the first argument. + * @param {function} [errorCallback] callback to be executed when an error + * occurs inside loadShader. On error, the error is passed as the first + * argument. + * @return {p5.Shader} a shader object created from the provided + * vertex and fragment shader files. + * + * @example + *

+ *


+ * let mandel;
+ * function preload() {
+ *   // load the shader definitions from files
+ *   mandel = loadShader('assets/shader.vert', 'assets/shader.frag');
+ * }
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   // use the shader
+ *   shader(mandel);
+ *   noStroke();
+ *   mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *   describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');
+ * }
+ *
+ * function draw() {
+ *   mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+ *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *

+ *

+ * + * @alt + * zooming Mandelbrot set. a colorful, infinitely detailed fractal. + */ + + _main.default.prototype.loadShader = function (vertFilename, fragFilename, callback, errorCallback) { + _main.default._validateParameters('loadShader', arguments); + if (!errorCallback) { + errorCallback = console.error; + } + var loadedShader = new _main.default.Shader(); + var self = this; + var loadedFrag = false; + var loadedVert = false; + var onLoad = function onLoad() { + self._decrementPreload(); + if (callback) { + callback(loadedShader); + } + }; + this.loadStrings(vertFilename, function (result) { + loadedShader._vertSrc = result.join('\n'); + loadedVert = true; + if (loadedFrag) { + onLoad(); + } + }, errorCallback); + this.loadStrings(fragFilename, function (result) { + loadedShader._fragSrc = result.join('\n'); + loadedFrag = true; + if (loadedVert) { + onLoad(); + } + }, errorCallback); + return loadedShader; + }; + /** + * Creates a new p5.Shader object + * from the provided vertex and fragment shader code. + * + * Note, shaders can only be used in WEBGL mode. + * + * @method createShader + * @param {String} vertSrc source code for the vertex shader + * @param {String} fragSrc source code for the fragment shader + * @returns {p5.Shader} a shader object created from the provided + * vertex and fragment shaders. + * + * @example + *

+ *


+ * // the 'varying's are shared between both vertex & fragment shaders
+ * let varying = 'precision highp float; varying vec2 vPos;';
+ *
+ * // the vertex shader is called for each vertex
+ * let vs =
+ *   varying +
+ *   'attribute vec3 aPosition;' +
+ *   'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';
+ *
+ * // the fragment shader is called for each pixel
+ * let fs =
+ *   varying +
+ *   'uniform vec2 p;' +
+ *   'uniform float r;' +
+ *   'const int I = 500;' +
+ *   'void main() {' +
+ *   '  vec2 c = p + vPos * r, z = c;' +
+ *   '  float n = 0.0;' +
+ *   '  for (int i = I; i > 0; i --) {' +
+ *   '    if(z.x*z.x+z.y*z.y > 4.0) {' +
+ *   '      n = float(i)/float(I);' +
+ *   '      break;' +
+ *   '    }' +
+ *   '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +
+ *   '  }' +
+ *   '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +
+ *   '}';
+ *
+ * let mandel;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *
+ *   // create and initialize the shader
+ *   mandel = createShader(vs, fs);
+ *   shader(mandel);
+ *   noStroke();
+ *
+ *   // 'p' is the center point of the Mandelbrot image
+ *   mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ *   describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');
+ * }
+ *
+ * function draw() {
+ *   // 'r' is the size of the image in Mandelbrot-space
+ *   mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+ *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *

+ *

+ * + * @alt + * zooming Mandelbrot set. a colorful, infinitely detailed fractal. + */ + _main.default.prototype.createShader = function (vertSrc, fragSrc) { + this._assert3d('createShader'); + _main.default._validateParameters('createShader', arguments); + return new _main.default.Shader(this._renderer, vertSrc, fragSrc); + }; + /** + * Sets the p5.Shader object to + * be used to render subsequent shapes. + * + * Custom shaders can be created using the + * createShader() and + * loadShader() functions. + * + * Use resetShader() to + * restore the default shaders. + * + * Note, shaders can only be used in WEBGL mode. + * + * @method shader + * @chainable + * @param {p5.Shader} s the p5.Shader object + * to use for rendering shapes. + * + * @example + *

+ *


+ * // Click within the image to toggle
+ * // the shader used by the quad shape
+ * // Note: for an alternative approach to the same example,
+ * // involving changing uniforms please refer to:
+ * // https://p5js.org/reference/#/p5.Shader/setUniform
+ *
+ * let redGreen;
+ * let orangeBlue;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ *   // note that we are using two instances
+ *   // of the same vertex and fragment shaders
+ *   redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ *   orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *
+ *   // initialize the colors for redGreen shader
+ *   shader(redGreen);
+ *   redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+ *   redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+ *
+ *   // initialize the colors for orangeBlue shader
+ *   shader(orangeBlue);
+ *   orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+ *   orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+ *
+ *   noStroke();
+ *
+ *   describe(
+ *     'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   // update the offset values for each shader,
+ *   // moving orangeBlue in vertical and redGreen
+ *   // in horizontal direction
+ *   orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ *   redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
+ *
+ *   if (showRedGreen === true) {
+ *     shader(redGreen);
+ *   } else {
+ *     shader(orangeBlue);
+ *   }
+ *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ *   showRedGreen = !showRedGreen;
+ * }
+ *

+ *

+ * + * @alt + * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed. + */ + _main.default.prototype.shader = function (s) { + this._assert3d('shader'); + _main.default._validateParameters('shader', arguments); + if (s._renderer === undefined) { + s._renderer = this._renderer; + } + s.init(); + if (s.isStrokeShader()) { + this._renderer.userStrokeShader = s; + } else { + this._renderer.userFillShader = s; + this._renderer._useNormalMaterial = false; + } + return this; + }; + /** + * Restores the default shaders. Code that runs after resetShader() + * will not be affected by the shader previously set by + * shader() + * + * @method resetShader + * @chainable + * @example + *

+ *


+ * // This variable will hold our shader object
+ * let shaderProgram;
+ *
+ * // This variable will hold our vertex shader source code
+ * let vertSrc = `
+ *    attribute vec3 aPosition;
+ *    attribute vec2 aTexCoord;
+ *    uniform mat4 uProjectionMatrix;
+ *    uniform mat4 uModelViewMatrix;
+ *    varying vec2 vTexCoord;
+ *
+ *    void main() {
+ *      vTexCoord = aTexCoord;
+ *      vec4 position = vec4(aPosition, 1.0);
+ *      gl_Position = uProjectionMatrix * uModelViewMatrix * position;
+ *    }
+ * `;
+ *
+ * // This variable will hold our fragment shader source code
+ * let fragSrc = `
+ *    precision mediump float;
+ *
+ *    varying vec2 vTexCoord;
+ *
+ *    void main() {
+ *      vec2 uv = vTexCoord;
+ *      vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
+ *      gl_FragColor = vec4(color, 1.0);
+ *    }
+ * `;
+ *
+ * function setup() {
+ *   // Shaders require WEBGL mode to work
+ *   createCanvas(100, 100, WEBGL);
+ *
+ *   // Create our shader
+ *   shaderProgram = createShader(vertSrc, fragSrc);
+ *
+ *   describe(
+ *     'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   // Clear the scene
+ *   background(200);
+ *
+ *   // Draw a box using our shader
+ *   // shader() sets the active shader with our shader
+ *   shader(shaderProgram);
+ *   push();
+ *   translate(-width / 4, 0, 0);
+ *   rotateX(millis() * 0.00025);
+ *   rotateY(millis() * 0.0005);
+ *   box(width / 4);
+ *   pop();
+ *
+ *   // Draw a box using the default fill shader
+ *   // resetShader() restores the default fill shader
+ *   resetShader();
+ *   fill(255, 0, 0);
+ *   push();
+ *   translate(width / 4, 0, 0);
+ *   rotateX(millis() * 0.00025);
+ *   rotateY(millis() * 0.0005);
+ *   box(width / 4);
+ *   pop();
+ * }
+ *

+ *

+ * @alt + * Two rotating cubes. The left one is painted using a custom (user-defined) shader, + * while the right one is painted using the default fill shader. + */ + _main.default.prototype.resetShader = function () { + this._renderer.userFillShader = this._renderer.userStrokeShader = null; + return this; + }; + /** + * Sets the texture that will be used to render subsequent shapes. + * + * A texture is like a "skin" that wraps around a 3D geometry. Currently + * supported textures are images, video, and offscreen renders. + * + * To texture a geometry created with beginShape(), + * you will need to specify uv coordinates in vertex(). + * + * Note, texture() can only be used in WEBGL mode. + * + * You can view more materials in this + * example. + * + * @method texture + * @param {p5.Image|p5.MediaElement|p5.Graphics|p5.Texture} tex image to use as texture + * @chainable + * @example + *

+ *


+ * let img;
+ * function preload() {
+ *   img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('spinning cube with a texture from an image');
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   rotateZ(frameCount * 0.01);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   //pass image as texture
+ *   texture(img);
+ *   box(width / 2);
+ * }
+ *

+ *

+ * @alt + * spinning cube with a texture from an image + * + * @example + *

+ *


+ * let pg;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   pg = createGraphics(200, 200);
+ *   pg.textSize(75);
+ *   describe('plane with a texture from an image created by createGraphics()');
+ * }
+ *
+ * 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 + * plane with a texture from an image created by createGraphics() + * + * @example + *

+ *


+ * let vid;
+ * function preload() {
+ *   vid = createVideo('assets/fingers.mov');
+ *   vid.hide();
+ * }
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('rectangle with video as texture');
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   //pass video frame as texture
+ *   texture(vid);
+ *   rect(-40, -40, 80, 80);
+ * }
+ *
+ * function mousePressed() {
+ *   vid.loop();
+ * }
+ *

+ *

+ * + * @alt + * rectangle with video as texture + * + * @example + *

+ *


+ * let img;
+ *
+ * function preload() {
+ *   img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('quad with a texture, mapped using normalized coordinates');
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   texture(img);
+ *   textureMode(NORMAL);
+ *   beginShape();
+ *   vertex(-40, -40, 0, 0);
+ *   vertex(40, -40, 1, 0);
+ *   vertex(40, 40, 1, 1);
+ *   vertex(-40, 40, 0, 1);
+ *   endShape();
+ * }
+ *

+ *

+ * @alt + * quad with a texture, mapped using normalized coordinates + */ + _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. + * + * With IMAGE, if an image is 100×200 pixels, mapping the image onto the entire + * size of a quad would require the points (0,0) (100, 0) (100,200) (0,200). + * The same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1). + * @method textureMode + * @param {Constant} mode either IMAGE or NORMAL + * @example + *

+ *


+ * let img;
+ *
+ * function preload() {
+ *   img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('quad with a texture, mapped using normalized coordinates');
+ * }
+ *
+ * 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 + * quad with a texture, mapped using normalized coordinates + * + * @example + *

+ *


+ * let img;
+ *
+ * function preload() {
+ *   img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('quad with a texture, mapped using image coordinates');
+ * }
+ *
+ * function draw() {
+ *   texture(img);
+ *   textureMode(IMAGE);
+ *   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 + * quad with a texture, mapped using image coordinates + */ + _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 to 1 range. There are three options: + * CLAMP, REPEAT, and MIRROR. + * + * CLAMP causes the pixels at the edge of the texture to extend to the bounds. + * REPEAT causes the texture to tile repeatedly until reaching the bounds. + * MIRROR works similarly to REPEAT but it flips the texture with every new tile. + * + * REPEAT & MIRROR are only available if the texture + * is a power of two size (128, 256, 512, 1024, etc.). + * + * This method will affect all textures in your sketch until a subsequent + * textureWrap() call is made. + * + * If only one argument is provided, it will be applied to both the + * horizontal and vertical axes. + * @method textureWrap + * @param {Constant} wrapX either CLAMP, REPEAT, or MIRROR + * @param {Constant} [wrapY] either CLAMP, REPEAT, or MIRROR + * @example + *

+ *


+ * let img;
+ * function preload() {
+ *   img = loadImage('assets/rockies128.jpg');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   textureWrap(MIRROR);
+ *   describe('an image of the rocky mountains repeated in mirrored tiles');
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *
+ *   let dX = mouseX;
+ *   let dY = mouseY;
+ *
+ *   let u = lerp(1.0, 2.0, dX);
+ *   let v = lerp(1.0, 2.0, dY);
+ *
+ *   scale(width / 2);
+ *
+ *   texture(img);
+ *
+ *   beginShape(TRIANGLES);
+ *   vertex(-1, -1, 0, 0, 0);
+ *   vertex(1, -1, 0, u, 0);
+ *   vertex(1, 1, 0, u, v);
+ *
+ *   vertex(1, 1, 0, u, v);
+ *   vertex(-1, 1, 0, 0, v);
+ *   vertex(-1, -1, 0, 0, 0);
+ *   endShape();
+ * }
+ *

+ *

+ * + * @alt + * an image of the rocky mountains repeated in mirrored tiles + */ + _main.default.prototype.textureWrap = function (wrapX) { + var wrapY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : wrapX; + this._renderer.textureWrapX = wrapX; + this._renderer.textureWrapY = wrapY; + var textures = this._renderer.textures; + for (var i = 0; i < textures.length; i++) { + textures[i].setWrapMode(wrapX, wrapY); + } + }; + /** + * Sets the current material as a normal material. + * + * A normal material is not affected by light. It is often used as + * a placeholder material when debugging. + * + * Surfaces facing the X-axis become red, those facing the Y-axis + * become green, and those facing the Z-axis become blue. + * + * You can view more materials in this + * example. + * + * @method normalMaterial + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('Sphere with normal material');
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   normalMaterial();
+ *   sphere(40);
+ * }
+ *

+ *

+ * @alt + * Sphere with normal material + */ + _main.default.prototype.normalMaterial = function () { + this._assert3d('normalMaterial'); + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + _main.default._validateParameters('normalMaterial', args); + this._renderer.drawMode = constants.FILL; + this._renderer._useSpecularMaterial = false; + this._renderer._useEmissiveMaterial = false; + this._renderer._useNormalMaterial = true; + this._renderer.curFillColor = [ + 1, + 1, + 1, + 1 + ]; + this._renderer._setProperty('_doFill', true); + this.noStroke(); + return this; + }; + /** + * Sets the ambient color of the material. + * + * The ambientMaterial() color is the color the object will reflect + * under **any** lighting. + * + * Consider an ambientMaterial() with the color yellow (255, 255, 0). + * If the light emits the color white (255, 255, 255), then the object + * will appear yellow as it will reflect the red and green components + * of the light. If the light emits the color red (255, 0, 0), then + * the object will appear red as it will reflect the red component + * of the light. If the light emits the color blue (0, 0, 255), + * then the object will appear black, as there is no component of + * the light that it can reflect. + * + * You can view more materials in this + * example. + * + * @method ambientMaterial + * @param {Number} v1 red or hue value relative to the current + * color range + * @param {Number} v2 green or saturation value relative to the + * current color range + * @param {Number} v3 blue or brightness value relative to the + * current color range + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('sphere reflecting red, blue, and green light');
+ * }
+ * function draw() {
+ *   background(0);
+ *   noStroke();
+ *   ambientLight(255);
+ *   ambientMaterial(70, 130, 230);
+ *   sphere(40);
+ * }
+ *

+ *

+ * @alt + * sphere reflecting red, blue, and green light + * + * @example + *

+ *


+ * // ambientLight is both red and blue (magenta),
+ * // so object only reflects it's red and blue components
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('box reflecting only red and blue light');
+ * }
+ * function draw() {
+ *   background(70);
+ *   ambientLight(255, 0, 255); // magenta light
+ *   ambientMaterial(255); // white material
+ *   box(30);
+ * }
+ *

+ *

+ * @alt + * box reflecting only red and blue light + * + * @example + *

+ *


+ * // ambientLight is green. Since object does not contain
+ * // green, it does not reflect any light
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('box reflecting no light');
+ * }
+ * function draw() {
+ *   background(70);
+ *   ambientLight(0, 255, 0); // green light
+ *   ambientMaterial(255, 0, 255); // magenta material
+ *   box(30);
+ * }
+ *

+ *

+ * @alt + * box reflecting no light + */ + /** + * @method ambientMaterial + * @param {Number} gray number specifying value between + * white and black + * @chainable + */ + /** + * @method ambientMaterial + * @param {p5.Color|Number[]|String} color + * color as a p5.Color, + * as an array, or as a CSS string + * @chainable + */ + _main.default.prototype.ambientMaterial = function (v1, v2, v3) { + this._assert3d('ambientMaterial'); + _main.default._validateParameters('ambientMaterial', arguments); + var color = _main.default.prototype.color.apply(this, arguments); + this._renderer.curAmbientColor = color._array; + this._renderer._useNormalMaterial = false; + this._renderer._enableLighting = true; + this._renderer._tex = null; + this._renderer._setProperty('_doFill', true); + return this; + }; + /** + * Sets the emissive color of the material. + * + * An emissive material will display the emissive color at + * full strength regardless of lighting. This can give the + * appearance that the object is glowing. + * + * Note, "emissive" is a misnomer in the sense that the material + * does not actually emit light that will affect surrounding objects. + * + * You can view more materials in this + * example. + * + * @method emissiveMaterial + * @param {Number} v1 red or hue value relative to the current + * color range + * @param {Number} v2 green or saturation value relative to the + * current color range + * @param {Number} v3 blue or brightness value relative to the + * current color range + * @param {Number} [alpha] alpha value relative to current color + * range (default is 0-255) + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('sphere with green emissive material');
+ * }
+ * function draw() {
+ *   background(0);
+ *   noStroke();
+ *   ambientLight(0);
+ *   emissiveMaterial(130, 230, 0);
+ *   sphere(40);
+ * }
+ *

+ *

+ * + * @alt + * sphere with green emissive material + */ + /** + * @method emissiveMaterial + * @param {Number} gray number specifying value between + * white and black + * @chainable + */ + /** + * @method emissiveMaterial + * @param {p5.Color|Number[]|String} color + * color as a p5.Color, + * as an array, or as a CSS string + * @chainable + */ + _main.default.prototype.emissiveMaterial = function (v1, v2, v3, a) { + this._assert3d('emissiveMaterial'); + _main.default._validateParameters('emissiveMaterial', arguments); + var color = _main.default.prototype.color.apply(this, arguments); + this._renderer.curEmissiveColor = color._array; + this._renderer._useEmissiveMaterial = true; + this._renderer._useNormalMaterial = false; + this._renderer._enableLighting = true; + this._renderer._tex = null; + return this; + }; + /** + * Sets the specular color of the material. + * + * A specular material is reflective (shiny). The shininess can be + * controlled by the shininess() function. + * + * Like ambientMaterial(), + * the specularMaterial() color is the color the object will reflect + * under ambientLight(). + * However unlike ambientMaterial(), for all other types of lights + * (directionalLight(), + * pointLight(), + * spotLight()), + * a specular material will reflect the **color of the light source**. + * This is what gives it its "shiny" appearance. + * + * You can view more materials in this + * example. + * + * @method specularMaterial + * @param {Number} gray number specifying value between white and black. + * @param {Number} [alpha] alpha value relative to current color range + * (default is 0-255) + * @chainable + * + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   noStroke();
+ *   describe('torus with specular material');
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *
+ *   ambientLight(60);
+ *
+ *   // add point light to showcase specular material
+ *   let locX = mouseX - width / 2;
+ *   let locY = mouseY - height / 2;
+ *   pointLight(255, 255, 255, locX, locY, 50);
+ *
+ *   specularMaterial(250);
+ *   shininess(50);
+ *   torus(30, 10, 64, 64);
+ * }
+ *

+ *

+ * @alt + * torus with specular material + */ + /** + * @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 + */ + /** + * @method specularMaterial + * @param {p5.Color|Number[]|String} color + * color as a p5.Color, + * as an array, or as a CSS string + * @chainable + */ + _main.default.prototype.specularMaterial = function (v1, v2, v3, alpha) { + this._assert3d('specularMaterial'); + _main.default._validateParameters('specularMaterial', arguments); + var color = _main.default.prototype.color.apply(this, arguments); + this._renderer.curSpecularColor = color._array; + this._renderer._useSpecularMaterial = true; + this._renderer._useNormalMaterial = false; + this._renderer._enableLighting = true; + this._renderer._tex = null; + return this; + }; + /** + * Sets the amount of gloss ("shininess") of a + * specularMaterial(). + * + * The default and minimum value is 1. + * + * @method shininess + * @param {Number} shine degree of shininess + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   describe('two spheres, one more shiny than the other');
+ * }
+ * function draw() {
+ *   background(0);
+ *   noStroke();
+ *   let locX = mouseX - width / 2;
+ *   let locY = mouseY - height / 2;
+ *   ambientLight(60, 60, 60);
+ *   pointLight(255, 255, 255, locX, locY, 50);
+ *   specularMaterial(250);
+ *   translate(-25, 0, 0);
+ *   shininess(1);
+ *   sphere(20);
+ *   translate(50, 0, 0);
+ *   shininess(20);
+ *   sphere(20);
+ * }
+ *

+ *

+ * @alt + * two spheres, one more shiny than the other + */ + _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 || this.curBlendMode !== constants.BLEND || colors[colors.length - 1] < 1 || this._isErasing; + if (doBlend !== this._isBlending) { + if (doBlend || this.curBlendMode !== constants.BLEND && this.curBlendMode !== constants.ADD) { + gl.enable(gl.BLEND); + } else { + gl.disable(gl.BLEND); + } + gl.depthMask(true); + this._isBlending = doBlend; + } + this._applyBlendMode(); + return colors; + }; + /** + * @private sets blending in gl context to curBlendMode + * @param {Number[]} color [description] + * @return {Number[]]} Normalized numbers array + */ + _main.default.RendererGL.prototype._applyBlendMode = function () { + if (this._cachedBlendMode === this.curBlendMode) { + return; + } + var gl = this.GL; + switch (this.curBlendMode) { + case constants.BLEND: + gl.blendEquation(gl.FUNC_ADD); + gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); + break; + case constants.ADD: + gl.blendEquation(gl.FUNC_ADD); + gl.blendFunc(gl.SRC_ALPHA, gl.ONE); + 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': 278, + '../core/main': 290, + './p5.Texture': 346, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.array.join': 177, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 338: [ + 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 3D + * @submodule Camera + * @requires core + */ + //////////////////////////////////////////////////////////////////////////////// + // p5.Prototype Methods + //////////////////////////////////////////////////////////////////////////////// + /** + * Sets the position of the current camera in a 3D sketch. + * Parameters for this function define the camera's position, + * 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 the centerX value is positive, + * and the camera is rotating to the right side of the sketch, + * the object will seem like it's moving to the left. + * + * See this example + * to view the position of your camera. + * + * If no parameters are given, the following default is used: + * camera(0, 0, (height/2) / tan(PI/6), 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);
+ *   describe('a square moving closer and then away from the camera.');
+ * }
+ * function draw() {
+ *   background(204);
+ *   //move the camera away from the plane by a sin wave
+ *   camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
+ *   plane(10, 10);
+ * }
+ *

+ *

+ * + * @example + *

+ *


+ * //move slider to see changes!
+ * //sliders control the first 6 parameters of camera()
+ * let sliderGroup = [];
+ * let X;
+ * let Y;
+ * let Z;
+ * let centerX;
+ * let centerY;
+ * let centerZ;
+ * let h = 20;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   //create sliders
+ *   for (var i = 0; i < 6; i++) {
+ *     if (i === 2) {
+ *       sliderGroup[i] = createSlider(10, 400, 200);
+ *     } else {
+ *       sliderGroup[i] = createSlider(-400, 400, 0);
+ *     }
+ *     h = map(i, 0, 6, 5, 85);
+ *     sliderGroup[i].position(10, height + h);
+ *     sliderGroup[i].style('width', '80px');
+ *   }
+ *   describe(
+ *     'White square repeatedly grows to fill canvas and then shrinks. An interactive example of a red cube with 3 sliders for moving it across x, y, z axis and 3 sliders for shifting its center.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(60);
+ *   // assigning sliders' value to each parameters
+ *   X = sliderGroup[0].value();
+ *   Y = sliderGroup[1].value();
+ *   Z = sliderGroup[2].value();
+ *   centerX = sliderGroup[3].value();
+ *   centerY = sliderGroup[4].value();
+ *   centerZ = sliderGroup[5].value();
+ *   camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);
+ *   stroke(255);
+ *   fill(255, 102, 94);
+ *   box(85);
+ * }
+ *

+ *

+ * @alt + * White square repeatedly grows to fill canvas and then shrinks. + * An interactive example of a red cube with 3 sliders for moving it across x, y, + * z axis and 3 sliders for shifting its center. + */ + + _main.default.prototype.camera = function () { + var _this$_renderer$_curC; + this._assert3d('camera'); + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + _main.default._validateParameters('camera', args); + (_this$_renderer$_curC = this._renderer._curCamera).camera.apply(_this$_renderer$_curC, args); + return this; + }; + /** + * Sets a perspective projection for the current camera in a 3D sketch. + * 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. + * + * If no parameters are given, the following default is used: + * perspective(PI/3, width/height, eyeZ/10, eyeZ*10), + * where eyeZ is equal to ((height/2) / tan(PI/6)). + * @method perspective + * @for p5 + * @param {Number} [fovy] camera frustum vertical field of view, + * from bottom to top of view, in angleMode units + * @param {Number} [aspect] camera frustum aspect ratio + * @param {Number} [near] frustum near plane length + * @param {Number} [far] frustum far plane length + * @chainable + * @example + *

+ *


+ * //drag the mouse to look around!
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   perspective(PI / 3.0, width / height, 0.1, 500);
+ *   describe(
+ *     'two colored 3D boxes move back and forth, rotating as mouse is dragged.'
+ *   );
+ * }
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   normalMaterial();
+ *
+ *   rotateX(-0.3);
+ *   rotateY(-0.2);
+ *   translate(0, 0, -50);
+ *
+ *   push();
+ *   translate(-15, 0, sin(frameCount / 30) * 95);
+ *   box(30);
+ *   pop();
+ *   push();
+ *   translate(15, 0, sin(frameCount / 30 + PI) * 95);
+ *   box(30);
+ *   pop();
+ * }
+ *

+ *

+ * + * @alt + * two colored 3D boxes move back and forth, rotating as mouse is dragged. + */ + _main.default.prototype.perspective = function () { + var _this$_renderer$_curC2; + this._assert3d('perspective'); + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + _main.default._validateParameters('perspective', args); + (_this$_renderer$_curC2 = this._renderer._curCamera).perspective.apply(_this$_renderer$_curC2, args); + return this; + }; + /** + * Sets an orthographic projection for the current 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 following default is used: + * ortho(-width/2, width/2, -height/2, height/2). + * @method ortho + * @for p5 + * @param {Number} [left] camera frustum left plane + * @param {Number} [right] camera frustum right plane + * @param {Number} [bottom] camera frustum bottom plane + * @param {Number} [top] camera frustum top plane + * @param {Number} [near] camera frustum near plane + * @param {Number} [far] camera frustum far plane + * @chainable + * @example + *

+ *


+ * //drag the mouse to look around!
+ * //there's no vanishing point
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
+ *   describe(
+ *     'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
+ *   );
+ * }
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   normalMaterial();
+ *
+ *   rotateX(0.2);
+ *   rotateY(-0.2);
+ *   push();
+ *   translate(-15, 0, sin(frameCount / 30) * 65);
+ *   box(30);
+ *   pop();
+ *   push();
+ *   translate(15, 0, sin(frameCount / 30 + PI) * 65);
+ *   box(30);
+ *   pop();
+ * }
+ *

+ *

+ * + * @alt + * two 3D boxes move back and forth along same plane, rotating as mouse is dragged. + */ + _main.default.prototype.ortho = function () { + var _this$_renderer$_curC3; + this._assert3d('ortho'); + for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { + args[_key3] = arguments[_key3]; + } + _main.default._validateParameters('ortho', args); + (_this$_renderer$_curC3 = this._renderer._curCamera).ortho.apply(_this$_renderer$_curC3, args); + return this; + }; + /** + * Sets the frustum of the current camera 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(). + * + * If no parameters are given, the following default is used: + * frustum(-width/2, width/2, -height/2, height/2, 0, max(width, height)). + * @method frustum + * @for p5 + * @param {Number} [left] camera frustum left plane + * @param {Number} [right] camera frustum right plane + * @param {Number} [bottom] camera frustum bottom plane + * @param {Number} [top] camera frustum top plane + * @param {Number} [near] camera frustum near plane + * @param {Number} [far] camera frustum far plane + * @chainable + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   setAttributes('antialias', true);
+ *   frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
+ *   describe(
+ *     'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
+ *   );
+ * }
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   normalMaterial();
+ *
+ *   rotateY(-0.2);
+ *   rotateX(-0.3);
+ *   push();
+ *   translate(-15, 0, sin(frameCount / 30) * 25);
+ *   box(30);
+ *   pop();
+ *   push();
+ *   translate(15, 0, sin(frameCount / 30 + PI) * 25);
+ *   box(30);
+ *   pop();
+ * }
+ *

+ *

+ * + * @alt + * two 3D boxes move back and forth along same plane, rotating as mouse is dragged. + */ + _main.default.prototype.frustum = function () { + var _this$_renderer$_curC4; + this._assert3d('frustum'); + for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { + args[_key4] = arguments[_key4]; + } + _main.default._validateParameters('frustum', args); + (_this$_renderer$_curC4 = this._renderer._curCamera).frustum.apply(_this$_renderer$_curC4, args); + return this; + }; //////////////////////////////////////////////////////////////////////////////// + // p5.Camera + //////////////////////////////////////////////////////////////////////////////// + /** + * Creates a new p5.Camera object and sets it + * as the current (active) camera. + * + * The new camera is initialized with a default position + * (see camera()) + * and a default perspective projection + * (see perspective()). + * Its properties can be controlled with the p5.Camera + * methods. + * + * Note: Every 3D sketch starts with a default camera initialized. + * This camera can be controlled with the global methods + * camera(), + * perspective(), ortho(), + * and frustum() if it is the only camera + * in the scene. + * @method createCamera + * @return {p5.Camera} The newly created camera object. + * @for p5 + * @example + *


+ * // Creates a camera object and animates it around a box.
+ * let camera;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(0);
+ *   camera = createCamera();
+ *   describe('An example that creates a camera and moves it around the box.');
+ * }
+ *
+ * function draw() {
+ *   camera.lookAt(0, 0, 0);
+ *   camera.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ *   box(20);
+ * }
+ *

+ * + * @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. + * + * The camera object propreties + * eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ + * which describes camera position, orientation, and projection + * are also accessible via the camera object generated using + * createCamera() + * + * @class p5.Camera + * @param {rendererGL} rendererGL instance of WebGL renderer + * @example + *

+ *


+ * let cam;
+ * let delta = 0.01;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   normalMaterial();
+ *   cam = createCamera();
+ *   // set initial pan angle
+ *   cam.pan(-0.8);
+ *   describe(
+ *     'camera view pans left and right across a series of rotating 3D boxes.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *
+ *   // pan camera according to angle 'delta'
+ *   cam.pan(delta);
+ *
+ *   // every 160 frames, switch direction
+ *   if (frameCount % 160 === 0) {
+ *     delta *= -1;
+ *   }
+ *
+ *   rotateX(frameCount * 0.01);
+ *   translate(-100, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ * }
+ *

+ *

+ * + * @alt + * camera view pans left and right across a series of rotating 3D boxes. + */ + _main.default.Camera = function (renderer) { + this._renderer = renderer; + this.cameraType = 'default'; + this.cameraMatrix = new _main.default.Matrix(); + this.projMatrix = new _main.default.Matrix(); + }; + /** + * camera position value on x axis + * @property {Number} eyeX + * @readonly + * @example + * + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(0);
+ *   cam = createCamera();
+ *   div = createDiv();
+ *   div.position(0, 0);
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *
+ * function draw() {
+ *   orbitControl();
+ *   box(10);
+ *   div.html('eyeX = ' + cam.eyeX);
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + /** + * camera position value on y axis + * @property {Number} eyeY + * @readonly + * @example + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(0);
+ *   cam = createCamera();
+ *   div = createDiv();
+ *   div.position(0, 0);
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *
+ * function draw() {
+ *   orbitControl();
+ *   box(10);
+ *   div.html('eyeY = ' + cam.eyeY);
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + /** + * camera position value on z axis + * @property {Number} eyeZ + * @readonly + * @example + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(0);
+ *   cam = createCamera();
+ *   div = createDiv();
+ *   div.position(0, 0);
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *
+ * function draw() {
+ *   orbitControl();
+ *   box(10);
+ *   div.html('eyeZ = ' + cam.eyeZ);
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + /** + * x coordinate representing center of the sketch + * @property {Number} centerX + * @readonly + * @example + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(255);
+ *   cam = createCamera();
+ *   cam.lookAt(1, 0, 0);
+ *   div = createDiv('centerX = ' + cam.centerX);
+ *   div.position(0, 0);
+ *   div.style('color', 'white');
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *
+ * function draw() {
+ *   orbitControl();
+ *   box(10);
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + /** + * y coordinate representing center of the sketch + * @property {Number} centerY + * @readonly + * @example + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(255);
+ *   cam = createCamera();
+ *   cam.lookAt(0, 1, 0);
+ *   div = createDiv('centerY = ' + cam.centerY);
+ *   div.position(0, 0);
+ *   div.style('color', 'white');
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *
+ * function draw() {
+ *   orbitControl();
+ *   box(10);
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + /** + * z coordinate representing center of the sketch + * @property {Number} centerZ + * @readonly + * @example + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(255);
+ *   cam = createCamera();
+ *   cam.lookAt(0, 0, 1);
+ *   div = createDiv('centerZ = ' + cam.centerZ);
+ *   div.position(0, 0);
+ *   div.style('color', 'white');
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *
+ * function draw() {
+ *   orbitControl();
+ *   box(10);
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + /** + * x component of direction 'up' from camera + * @property {Number} upX + * @readonly + * @example + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(255);
+ *   cam = createCamera();
+ *   div = createDiv('upX = ' + cam.upX);
+ *   div.position(0, 0);
+ *   div.style('color', 'blue');
+ *   div.style('font-size', '18px');
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + /** + * y component of direction 'up' from camera + * @property {Number} upY + * @readonly + * @example + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(255);
+ *   cam = createCamera();
+ *   div = createDiv('upY = ' + cam.upY);
+ *   div.position(0, 0);
+ *   div.style('color', 'blue');
+ *   div.style('font-size', '18px');
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + /** + * z component of direction 'up' from camera + * @property {Number} upZ + * @readonly + * @example + *


+ * let cam, div;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   background(255);
+ *   cam = createCamera();
+ *   div = createDiv('upZ = ' + cam.upZ);
+ *   div.position(0, 0);
+ *   div.style('color', 'blue');
+ *   div.style('font-size', '18px');
+ *   describe('An example showing the use of camera object properties');
+ * }
+ *

+ * + * @alt + * An example showing the use of camera object properties + * + */ + //////////////////////////////////////////////////////////////////////////////// + // Camera Projection Methods + //////////////////////////////////////////////////////////////////////////////// + /** + * Sets a perspective projection. + * Accepts the same parameters as the global + * perspective(). + * More information on this function can be found there. + * @method perspective + * @for p5.Camera + * @example + *

+ *


+ * // drag the mouse to look around!
+ *
+ * let cam;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   // create a camera
+ *   cam = createCamera();
+ *   // give it a perspective projection
+ *   cam.perspective(PI / 3.0, width / height, 0.1, 500);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   normalMaterial();
+ *
+ *   rotateX(-0.3);
+ *   rotateY(-0.2);
+ *   translate(0, 0, -50);
+ *
+ *   push();
+ *   translate(-15, 0, sin(frameCount / 30) * 95);
+ *   box(30);
+ *   pop();
+ *   push();
+ *   translate(15, 0, sin(frameCount / 30 + PI) * 95);
+ *   box(30);
+ *   pop();
+ * }
+ *

+ *

+ * @alt + * two colored 3D boxes move back and forth, rotating as mouse is dragged. + */ + _main.default.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 / Math.tan(this.cameraFOV / 2); + var nf = 1 / (this.cameraNear - this.cameraFar); + /* eslint-disable indent */ + this.projMatrix.set(f / aspect, 0, 0, 0, 0, - f, 0, 0, 0, 0, (far + near) * nf, - 1, 0, 0, 2 * far * near * nf, 0); + /* eslint-enable indent */ + if (this._isActive()) { + this._renderer.uPMatrix.set(this.projMatrix.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. + * Accepts the same parameters as the global + * ortho(). + * More information on this function can be found there. + * @method ortho + * @for p5.Camera + * @example + *

+ *


+ * // drag the mouse to look around!
+ * // there's no vanishing point
+ *
+ * let cam;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   // create a camera
+ *   cam = createCamera();
+ *   // give it an orthographic projection
+ *   cam.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.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 / w; + var y = + 2 / h; + var z = - 2 / d; + var tx = - (right + left) / w; + var ty = - (top + bottom) / h; + var tz = - (far + near) / d; + this.projMatrix = _main.default.Matrix.identity(); + /* eslint-disable indent */ + this.projMatrix.set(x, 0, 0, 0, 0, - y, 0, 0, 0, 0, z, 0, tx, ty, tz, 1); + /* eslint-enable indent */ + if (this._isActive()) { + this._renderer.uPMatrix.set(this.projMatrix.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'; + }; + /** + * Sets the camera's frustum. + * Accepts the same parameters as the global + * frustum(). + * More information on this function can be found there. + * @method frustum + * @for p5.Camera + * @example + *

+ *


+ * let cam;
+ *
+ * function setup() {
+ *   x = createCanvas(100, 100, WEBGL);
+ *   setAttributes('antialias', true);
+ *   // create a camera
+ *   cam = createCamera();
+ *   // set its frustum
+ *   cam.frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   orbitControl();
+ *   normalMaterial();
+ *
+ *   rotateY(-0.2);
+ *   rotateX(-0.3);
+ *   push();
+ *   translate(-15, 0, sin(frameCount / 30) * 25);
+ *   box(30);
+ *   pop();
+ *   push();
+ *   translate(15, 0, sin(frameCount / 30 + PI) * 25);
+ *   box(30);
+ *   pop();
+ * }
+ *

+ *

+ * @alt + * two 3D boxes move back and forth along same plane, rotating as mouse is dragged. + */ + _main.default.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 * near) / w; + var y = + (2 * near) / h; + var z = - (2 * far * near) / d; + var tx = (right + left) / w; + var ty = (top + bottom) / h; + var tz = - (far + near) / d; + this.projMatrix = _main.default.Matrix.identity(); + /* eslint-disable indent */ + this.projMatrix.set(x, 0, 0, 0, 0, y, 0, 0, tx, ty, tz, - 1, 0, 0, z, 0); + /* eslint-enable indent */ + if (this._isActive()) { + this._renderer.uPMatrix.set(this.projMatrix.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); + /* eslint-disable max-len */ + var rotatedCenter = [ + centerX * rotation.mat4[0] + centerY * rotation.mat4[4] + centerZ * rotation.mat4[8], + centerX * rotation.mat4[1] + centerY * rotation.mat4[5] + centerZ * rotation.mat4[9], + centerX * rotation.mat4[2] + centerY * rotation.mat4[6] + centerZ * rotation.mat4[10] + ]; + /* eslint-enable max-len */ + // add eye position back into center + rotatedCenter[0] += this.eyeX; + rotatedCenter[1] += this.eyeY; + rotatedCenter[2] += this.eyeZ; + this.camera(this.eyeX, this.eyeY, this.eyeZ, rotatedCenter[0], rotatedCenter[1], rotatedCenter[2], this.upX, this.upY, this.upZ); + }; + /** + * Panning rotates the camera view to the left and right. + * @method pan + * @param {Number} angle amount to rotate camera in current + * angleMode units. + * Greater than 0 values rotate counterclockwise (to the left). + * @example + *

+ *


+ * let cam;
+ * let delta = 0.01;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   normalMaterial();
+ *   cam = createCamera();
+ *   // set initial pan angle
+ *   cam.pan(-0.8);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *
+ *   // pan camera according to angle 'delta'
+ *   cam.pan(delta);
+ *
+ *   // every 160 frames, switch direction
+ *   if (frameCount % 160 === 0) {
+ *     delta *= -1;
+ *   }
+ *
+ *   rotateX(frameCount * 0.01);
+ *   translate(-100, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ * }
+ *

+ *

+ * + * @alt + * camera view pans left and right across a series of rotating 3D boxes. + */ + _main.default.Camera.prototype.pan = function (amount) { + var local = this._getLocalAxes(); + this._rotateView(amount, local.y[0], local.y[1], local.y[2]); + }; + /** + * Tilting rotates the camera view up and down. + * @method tilt + * @param {Number} angle amount to rotate camera in current + * angleMode units. + * Greater than 0 values rotate counterclockwise (to the left). + * @example + *

+ *


+ * let cam;
+ * let delta = 0.01;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   normalMaterial();
+ *   cam = createCamera();
+ *   // set initial tilt
+ *   cam.tilt(-0.8);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *
+ *   // pan camera according to angle 'delta'
+ *   cam.tilt(delta);
+ *
+ *   // every 160 frames, switch direction
+ *   if (frameCount % 160 === 0) {
+ *     delta *= -1;
+ *   }
+ *
+ *   rotateY(frameCount * 0.01);
+ *   translate(0, -100, 0);
+ *   box(20);
+ *   translate(0, 35, 0);
+ *   box(20);
+ *   translate(0, 35, 0);
+ *   box(20);
+ *   translate(0, 35, 0);
+ *   box(20);
+ *   translate(0, 35, 0);
+ *   box(20);
+ *   translate(0, 35, 0);
+ *   box(20);
+ *   translate(0, 35, 0);
+ *   box(20);
+ * }
+ *

+ *

+ * + * @alt + * camera view tilts up and down across a series of rotating 3D boxes. + */ + _main.default.Camera.prototype.tilt = function (amount) { + var local = this._getLocalAxes(); + this._rotateView(amount, local.x[0], local.x[1], local.x[2]); + }; + /** + * Reorients the camera to look at a position in world space. + * @method lookAt + * @for p5.Camera + * @param {Number} x x position of a point in world space + * @param {Number} y y position of a point in world space + * @param {Number} z z position of a point in world space + * @example + *

+ *


+ * let cam;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   normalMaterial();
+ *   cam = createCamera();
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *
+ *   // look at a new random point every 60 frames
+ *   if (frameCount % 60 === 0) {
+ *     cam.lookAt(random(-100, 100), random(-50, 50), 0);
+ *   }
+ *
+ *   rotateX(frameCount * 0.01);
+ *   translate(-100, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ * }
+ *

+ *

+ * + * @alt + * camera view of rotating 3D cubes changes to look at a new random + * point every second . + */ + _main.default.Camera.prototype.lookAt = function (x, y, z) { + this.camera(this.eyeX, this.eyeY, this.eyeZ, x, y, z, this.upX, this.upY, this.upZ); + }; //////////////////////////////////////////////////////////////////////////////// + // Camera Position Methods + //////////////////////////////////////////////////////////////////////////////// + /** + * Sets the camera's position and orientation. + * Accepts the same parameters as the global + * camera(). + * More information on this function can be found there. + * @method camera + * @for p5.Camera + * @example + *

+ *


+ * let cam;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   // Create a camera.
+ *   // createCamera() sets the newly created camera as
+ *   // the current (active) camera.
+ *   cam = createCamera();
+ * }
+ *
+ * function draw() {
+ *   background(204);
+ *   // Move the camera away from the plane by a sin wave
+ *   cam.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. + * + * @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;
+ * let cam;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   // create a camera
+ *   cam = createCamera();
+ *   // 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();
+ *   cam.camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);
+ *   stroke(255);
+ *   fill(255, 102, 94);
+ *   box(85);
+ * }
+ *

+ *

+ * @alt + * An interactive example of a red cube with 3 sliders for moving it across x, y, + * z axis and 3 sliders for shifting its center. + */ + _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. + /* eslint-disable indent */ + this.cameraMatrix.set(local.x[0], local.y[0], local.z[0], 0, local.x[1], local.y[1], local.z[1], 0, local.x[2], local.y[2], local.z[2], 0, 0, 0, 0, 1); + /* eslint-enable indent */ + var tx = - eyeX; + var ty = - eyeY; + var tz = - eyeZ; + this.cameraMatrix.translate([tx, + ty, + tz]); + if (this._isActive()) { + this._renderer.uMVMatrix.set(this.cameraMatrix.mat4[0], this.cameraMatrix.mat4[1], this.cameraMatrix.mat4[2], this.cameraMatrix.mat4[3], this.cameraMatrix.mat4[4], this.cameraMatrix.mat4[5], this.cameraMatrix.mat4[6], this.cameraMatrix.mat4[7], this.cameraMatrix.mat4[8], this.cameraMatrix.mat4[9], this.cameraMatrix.mat4[10], this.cameraMatrix.mat4[11], this.cameraMatrix.mat4[12], this.cameraMatrix.mat4[13], this.cameraMatrix.mat4[14], this.cameraMatrix.mat4[15]); + } + return this; + }; + /** + * Move camera along its local axes while maintaining current camera orientation. + * @method move + * @param {Number} x amount to move along camera's left-right axis + * @param {Number} y amount to move along camera's up-down axis + * @param {Number} z amount to move along camera's forward-backward axis + * @example + *

+ *


+ * // see the camera move along its own axes while maintaining its orientation
+ * let cam;
+ * let delta = 0.5;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   normalMaterial();
+ *   cam = createCamera();
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *
+ *   // move the camera along its local axes
+ *   cam.move(delta, delta, 0);
+ *
+ *   // every 100 frames, switch direction
+ *   if (frameCount % 150 === 0) {
+ *     delta *= -1;
+ *   }
+ *
+ *   translate(-10, -10, 0);
+ *   box(50, 8, 50);
+ *   translate(15, 15, 0);
+ *   box(50, 8, 50);
+ *   translate(15, 15, 0);
+ *   box(50, 8, 50);
+ *   translate(15, 15, 0);
+ *   box(50, 8, 50);
+ *   translate(15, 15, 0);
+ *   box(50, 8, 50);
+ *   translate(15, 15, 0);
+ *   box(50, 8, 50);
+ * }
+ *

+ *

+ * + * @alt + * camera view moves along a series of 3D boxes, maintaining the same + * orientation throughout the move + */ + _main.default.Camera.prototype.move = function (x, y, z) { + var local = this._getLocalAxes(); // scale local axes by movement amounts + // based on http://learnwebgl.brown37.net/07_cameras/camera_linear_motion.html + var dx = [ + local.x[0] * x, + local.x[1] * x, + local.x[2] * x + ]; + var dy = [ + local.y[0] * y, + local.y[1] * y, + local.y[2] * y + ]; + var dz = [ + local.z[0] * z, + local.z[1] * z, + local.z[2] * z + ]; + this.camera(this.eyeX + dx[0] + dy[0] + dz[0], this.eyeY + dx[1] + dy[1] + dz[1], this.eyeZ + dx[2] + dy[2] + dz[2], this.centerX + dx[0] + dy[0] + dz[0], this.centerY + dx[1] + dy[1] + dz[1], this.centerZ + dx[2] + dy[2] + dz[2], 0, 1, 0); + }; + /** + * Set camera position in world-space while maintaining current camera + * orientation. + * @method setPosition + * @param {Number} x x position of a point in world space + * @param {Number} y y position of a point in world space + * @param {Number} z z position of a point in world space + * @example + *

+ *


+ * // press '1' '2' or '3' keys to set camera position
+ *
+ * let cam;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   normalMaterial();
+ *   cam = createCamera();
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *
+ *   // '1' key
+ *   if (keyIsDown(49)) {
+ *     cam.setPosition(30, 0, 80);
+ *   }
+ *   // '2' key
+ *   if (keyIsDown(50)) {
+ *     cam.setPosition(0, 0, 80);
+ *   }
+ *   // '3' key
+ *   if (keyIsDown(51)) {
+ *     cam.setPosition(-30, 0, 80);
+ *   }
+ *
+ *   box(20);
+ * }
+ *

+ *

+ * + * @alt + * camera position changes as the user presses keys, altering view of a 3D box + */ + _main.default.Camera.prototype.setPosition = function (x, y, z) { + var diffX = x - this.eyeX; + var diffY = y - this.eyeY; + var diffZ = z - this.eyeZ; + this.camera(x, y, z, this.centerX + diffX, this.centerY + diffY, this.centerZ + diffZ, 0, 1, 0); + }; //////////////////////////////////////////////////////////////////////////////// + // Camera Helper Methods + //////////////////////////////////////////////////////////////////////////////// + // @TODO: combine this function with _setDefaultCamera to compute these values + // as-needed + _main.default.Camera.prototype._computeCameraDefaultSettings = function () { + this.defaultCameraFOV = 60 / 180 * Math.PI; + this.defaultAspectRatio = this._renderer.width / this._renderer.height; + this.defaultEyeX = 0; + this.defaultEyeY = 0; + this.defaultEyeZ = this._renderer.height / 2 / Math.tan(this.defaultCameraFOV / 2); + 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 the current (active) camera of a 3D sketch. + * Allows for switching between multiple cameras. + * @method setCamera + * @param {p5.Camera} cam p5.Camera object + * @for p5 + * @example + *

+ *


+ * let cam1, cam2;
+ * let currentCamera;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   normalMaterial();
+ *
+ *   cam1 = createCamera();
+ *   cam2 = createCamera();
+ *   cam2.setPosition(30, 0, 50);
+ *   cam2.lookAt(0, 0, 0);
+ *   cam2.ortho();
+ *
+ *   // set variable for previously active camera:
+ *   currentCamera = 1;
+ *
+ *   describe(
+ *     'Canvas switches between two camera views, each showing a series of spinning 3D boxes.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *
+ *   // camera 1:
+ *   cam1.lookAt(0, 0, 0);
+ *   cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ *
+ *   // every 100 frames, switch between the two cameras
+ *   if (frameCount % 100 === 0) {
+ *     if (currentCamera === 1) {
+ *       setCamera(cam1);
+ *       currentCamera = 0;
+ *     } else {
+ *       setCamera(cam2);
+ *       currentCamera = 1;
+ *     }
+ *   }
+ *
+ *   drawBoxes();
+ * }
+ *
+ * function drawBoxes() {
+ *   rotateX(frameCount * 0.01);
+ *   translate(-100, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ *   translate(35, 0, 0);
+ *   box(20);
+ * }
+ *

+ *

+ * + * @alt + * Canvas switches between two camera views, each showing a series of spinning + * 3D boxes. + */ + _main.default.prototype.setCamera = function (cam) { + this._renderer._curCamera = cam; // set the projection matrix (which is not normally updated each frame) + this._renderer.uPMatrix.set(cam.projMatrix.mat4[0], cam.projMatrix.mat4[1], cam.projMatrix.mat4[2], cam.projMatrix.mat4[3], cam.projMatrix.mat4[4], cam.projMatrix.mat4[5], cam.projMatrix.mat4[6], cam.projMatrix.mat4[7], cam.projMatrix.mat4[8], cam.projMatrix.mat4[9], cam.projMatrix.mat4[10], cam.projMatrix.mat4[11], cam.projMatrix.mat4[12], cam.projMatrix.mat4[13], cam.projMatrix.mat4[14], cam.projMatrix.mat4[15]); + }; + var _default = _main.default.Camera; + exports.default = _default; + }, + { + '../core/main': 290 + } + ], + 339: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.string.sub'); + _dereq_('core-js/modules/es.string.sub'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @module Shape + * @submodule 3D Primitives + * @for p5 + * @requires core + * @requires p5.Geometry + */ + //some of the functions are adjusted from Three.js(http://threejs.org) + /** + * p5 Geometry class + * @class p5.Geometry + * @constructor + * @param {Integer} [detailX] number of vertices along the x-axis. + * @param {Integer} [detailY] number of vertices along the y-axis. + * @param {function} [callback] function to call 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': 290, + 'core-js/modules/es.string.sub': 210 + } + ], + 340: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.typed-array.float32-array'); + _dereq_('core-js/modules/es.typed-array.copy-within'); + _dereq_('core-js/modules/es.typed-array.every'); + _dereq_('core-js/modules/es.typed-array.fill'); + _dereq_('core-js/modules/es.typed-array.filter'); + _dereq_('core-js/modules/es.typed-array.find'); + _dereq_('core-js/modules/es.typed-array.find-index'); + _dereq_('core-js/modules/es.typed-array.for-each'); + _dereq_('core-js/modules/es.typed-array.includes'); + _dereq_('core-js/modules/es.typed-array.index-of'); + _dereq_('core-js/modules/es.typed-array.iterator'); + _dereq_('core-js/modules/es.typed-array.join'); + _dereq_('core-js/modules/es.typed-array.last-index-of'); + _dereq_('core-js/modules/es.typed-array.map'); + _dereq_('core-js/modules/es.typed-array.reduce'); + _dereq_('core-js/modules/es.typed-array.reduce-right'); + _dereq_('core-js/modules/es.typed-array.reverse'); + _dereq_('core-js/modules/es.typed-array.set'); + _dereq_('core-js/modules/es.typed-array.slice'); + _dereq_('core-js/modules/es.typed-array.some'); + _dereq_('core-js/modules/es.typed-array.sort'); + _dereq_('core-js/modules/es.typed-array.subarray'); + _dereq_('core-js/modules/es.typed-array.to-locale-string'); + _dereq_('core-js/modules/es.typed-array.to-string'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.typed-array.float32-array'); + _dereq_('core-js/modules/es.typed-array.copy-within'); + _dereq_('core-js/modules/es.typed-array.every'); + _dereq_('core-js/modules/es.typed-array.fill'); + _dereq_('core-js/modules/es.typed-array.filter'); + _dereq_('core-js/modules/es.typed-array.find'); + _dereq_('core-js/modules/es.typed-array.find-index'); + _dereq_('core-js/modules/es.typed-array.for-each'); + _dereq_('core-js/modules/es.typed-array.includes'); + _dereq_('core-js/modules/es.typed-array.index-of'); + _dereq_('core-js/modules/es.typed-array.iterator'); + _dereq_('core-js/modules/es.typed-array.join'); + _dereq_('core-js/modules/es.typed-array.last-index-of'); + _dereq_('core-js/modules/es.typed-array.map'); + _dereq_('core-js/modules/es.typed-array.reduce'); + _dereq_('core-js/modules/es.typed-array.reduce-right'); + _dereq_('core-js/modules/es.typed-array.reverse'); + _dereq_('core-js/modules/es.typed-array.set'); + _dereq_('core-js/modules/es.typed-array.slice'); + _dereq_('core-js/modules/es.typed-array.some'); + _dereq_('core-js/modules/es.typed-array.sort'); + _dereq_('core-js/modules/es.typed-array.subarray'); + _dereq_('core-js/modules/es.typed-array.to-locale-string'); + _dereq_('core-js/modules/es.typed-array.to-string'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * @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 4×4 matrix + * for model and view matrix manipulation in the p5js webgl renderer. + * @class p5.Matrix + * @private + * @constructor + * @param {Array} [mat4] array literal of our 4×4 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 / det; + this.mat4[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det; + this.mat4[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det; + this.mat4[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det; + this.mat4[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det; + this.mat4[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det; + this.mat4[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det; + this.mat4[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det; + this.mat4[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det; + this.mat4[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det; + this.mat4[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det; + this.mat4[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det; + this.mat4[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det; + this.mat4[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det; + this.mat4[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det; + this.mat4[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det; + this.mat4[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det; + return this; + }; + /** + * Inverts a 3×3 matrix + * @method invert3x3 + * @chainable + */ + _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 / 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 3×3 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 4×4 matrix to its 3×3 inverse transform + * commonly used in MVMatrix to NMatrix conversions. + * @method invertTranspose + * @param {p5.Matrix} mat4 the matrix to be based on to invert + * @chainable + * @todo finish implementation + */ + _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 4×4 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 / 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': 290, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.typed-array.copy-within': 215, + 'core-js/modules/es.typed-array.every': 216, + 'core-js/modules/es.typed-array.fill': 217, + 'core-js/modules/es.typed-array.filter': 218, + 'core-js/modules/es.typed-array.find': 220, + 'core-js/modules/es.typed-array.find-index': 219, + 'core-js/modules/es.typed-array.float32-array': 221, + 'core-js/modules/es.typed-array.for-each': 223, + 'core-js/modules/es.typed-array.includes': 224, + 'core-js/modules/es.typed-array.index-of': 225, + 'core-js/modules/es.typed-array.iterator': 228, + 'core-js/modules/es.typed-array.join': 229, + 'core-js/modules/es.typed-array.last-index-of': 230, + 'core-js/modules/es.typed-array.map': 231, + 'core-js/modules/es.typed-array.reduce': 233, + 'core-js/modules/es.typed-array.reduce-right': 232, + 'core-js/modules/es.typed-array.reverse': 234, + 'core-js/modules/es.typed-array.set': 235, + 'core-js/modules/es.typed-array.slice': 236, + 'core-js/modules/es.typed-array.some': 237, + 'core-js/modules/es.typed-array.sort': 238, + 'core-js/modules/es.typed-array.subarray': 239, + 'core-js/modules/es.typed-array.to-locale-string': 240, + 'core-js/modules/es.typed-array.to-string': 241 + } + ], + 341: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.array.map'); + _dereq_('core-js/modules/es.array.map'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } + _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': 290, + 'core-js/modules/es.array.map': 179 + } + ], + 342: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.fill'); + _dereq_('core-js/modules/es.array.from'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.map'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.fill'); + _dereq_('core-js/modules/es.array.from'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.map'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + var constants = _interopRequireWildcard(_dereq_('../core/constants')); + _dereq_('./p5.RenderBuffer'); + function _getRequireWildcardCache() { + if (typeof WeakMap !== 'function') return null; + var cache = new WeakMap(); + _getRequireWildcardCache = function _getRequireWildcardCache() { + return cache; + }; + return cache; + } + function _interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } + if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') { + return { + default: + obj + }; + } + var cache = _getRequireWildcardCache(); + if (cache && cache.has(obj)) { + return cache.get(obj); + } + var newObj = { + }; + var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; + if (desc && (desc.get || desc.set)) { + Object.defineProperty(newObj, key, desc); + } else { + newObj[key] = obj[key]; + } + } + } + newObj.default = obj; + if (cache) { + cache.set(obj, newObj); + } + return newObj; + } + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } + function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); + } + function _nonIterableSpread() { + throw new TypeError('Invalid attempt to spread non-iterable instance'); + } + function _iterableToArray(iter) { + if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter); + } + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { + arr2[i] = arr[i]; + } + return arr2; + } + } /** + * Begin shape drawing. This is a helpful way of generating + * custom shapes quickly. However in WEBGL mode, application + * performance will likely drop as a result of too many calls to + * beginShape() / endShape(). As a high performance alternative, + * please use p5.js geometry primitives. + * @private + * @method beginShape + * @param {Number} mode webgl primitives mode. beginShape supports the + * following modes: + * POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES, + * TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP, + * and TESS(WEBGL only) + * @chainable + */ + + _main.default.RendererGL.prototype.beginShape = function (mode) { + this.immediateMode.shapeMode = mode !== undefined ? mode : constants.TRIANGLE_FAN; + this.immediateMode.geometry.reset(); + return this; + }; + var immediateBufferStrides = { + vertices: 1, + vertexNormals: 1, + vertexColors: 4, + uvs: 2 + }; + /** + * adds a vertex to be drawn in a custom Shape. + * @private + * @method vertex + * @param {Number} x x-coordinate of vertex + * @param {Number} y y-coordinate of vertex + * @param {Number} z z-coordinate of vertex + * @chainable + * @TODO implement handling of p5.Vector args + */ + _main.default.RendererGL.prototype.vertex = function (x, y) { + // WebGL 1 doesn't support QUADS or QUAD_STRIP, so we duplicate data to turn + // QUADS into TRIANGLES and QUAD_STRIP into TRIANGLE_STRIP. (There is no extra + // work to convert QUAD_STRIP here, since the only difference is in how edges + // are rendered.) + if (this.immediateMode.shapeMode === constants.QUADS) { + // A finished quad turned into triangles should leave 6 vertices in the + // buffer: + // 0--3 0 3--5 + // | | --> | \ \ | + // 1--2 1--2 4 + // When vertex index 3 is being added, add the necessary duplicates. + if (this.immediateMode.geometry.vertices.length % 6 === 3) { + for (var key in immediateBufferStrides) { + var stride = immediateBufferStrides[key]; + var buffer = this.immediateMode.geometry[key]; + buffer.push.apply(buffer, _toConsumableArray(buffer.slice(buffer.length - 3 * stride, buffer.length - 2 * stride)).concat(_toConsumableArray(buffer.slice(buffer.length - stride, buffer.length)))); + } + } + } + var z, + u, + v; // default to (x, y) mode: all other arguments assumed to be 0. + z = u = v = 0; + if (arguments.length === 3) { + // (x, y, z) mode: (u, v) assumed to be 0. + z = arguments[2]; + } else if (arguments.length === 4) { + // (x, y, u, v) mode: z assumed to be 0. + u = arguments[2]; + v = arguments[3]; + } else if (arguments.length === 5) { + // (x, y, z, u, v) mode + z = arguments[2]; + u = arguments[3]; + v = arguments[4]; + } + var vert = new _main.default.Vector(x, y, z); + this.immediateMode.geometry.vertices.push(vert); + this.immediateMode.geometry.vertexNormals.push(this._currentNormal); + var vertexColor = this.curFillColor || [ + 0.5, + 0.5, + 0.5, + 1 + ]; + this.immediateMode.geometry.vertexColors.push(vertexColor[0], vertexColor[1], vertexColor[2], vertexColor[3]); + 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; + }; + /** + * Sets the normal to use for subsequent vertices. + * @method vertexNormal + * @param {Number} x + * @param {Number} y + * @param {Number} z + * @chainable + * + * @method vertexNormal + * @param {Vector} v + * @chainable + */ + _main.default.RendererGL.prototype.normal = function (xorv, y, z) { + if (xorv instanceof _main.default.Vector) { + this._currentNormal = xorv; + } else { + this._currentNormal = new _main.default.Vector(xorv, y, z); + } + return this; + }; + /** + * End shape drawing and render vertices to screen. + * @chainable + */ + _main.default.RendererGL.prototype.endShape = function (mode, isCurve, isBezier, isQuadratic, isContour, shapeKind) { + 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; + case constants.QUADS: + // Quads have been broken up into two triangles by `vertex()`: + // 0 3--5 + // | \ \ | + // 1--2 4 + for (i = 0; i < verts.length - 5; i += 6) { + res.push([i, + i + 1]); + res.push([i + 1, + i + 2]); + res.push([i + 3, + i + 5]); + res.push([i + 4, + i + 5]); + } + break; + case constants.QUAD_STRIP: + // 0---2---4 + // | | | + // 1---3---5 + for (i = 0; i < verts.length - 2; i += 2) { + res.push([i, + i + 1]); + res.push([i, + i + 2]); + res.push([i + 1, + i + 3]); + } + res.push([i, + i + 1]); + break; + default: + 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 () { + var _this = this; + this.immediateMode.shapeMode = constants.TRIANGLES; + var contours = [ + this._flatten(this.immediateMode.geometry.vertices.map(function (vert, i) { + return [vert.x, + vert.y, + vert.z, + _this.immediateMode.geometry.uvs[i * 2], + _this.immediateMode.geometry.uvs[i * 2 + 1], + _this.immediateMode.geometry.vertexColors[i * 4], + _this.immediateMode.geometry.vertexColors[i * 4 + 1], + _this.immediateMode.geometry.vertexColors[i * 4 + 2], + _this.immediateMode.geometry.vertexColors[i * 4 + 3], + _this.immediateMode.geometry.vertexNormals[i].x, + _this.immediateMode.geometry.vertexNormals[i].y, + _this.immediateMode.geometry.vertexNormals[i].z]; + })) + ]; + var polyTriangles = this._triangulate(contours); + this.immediateMode.geometry.vertices = [ + ]; + this.immediateMode.geometry.vertexNormals = [ + ]; + this.immediateMode.geometry.uvs = [ + ]; + var colors = [ + ]; + for (var j = 0, polyTriLength = polyTriangles.length; j < polyTriLength; j = j + 12) { + colors.push.apply(colors, _toConsumableArray(polyTriangles.slice(j + 5, j + 9))); + this.normal.apply(this, _toConsumableArray(polyTriangles.slice(j + 9, j + 12))); + this.vertex.apply(this, _toConsumableArray(polyTriangles.slice(j, j + 5))); + } + this.immediateMode.geometry.vertexColors = colors; + }; + /** + * Called from endShape(). Responsible for calculating normals, setting shader uniforms, + * enabling all appropriate buffers, applying color blend, and drawing the fill geometry. + * @private + */ + _main.default.RendererGL.prototype._drawImmediateFill = function () { + var gl = this.GL; + var shader = this._getImmediateFillShader(); + this._setFillUniforms(shader); + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + try { + for (var _iterator = this.immediateMode.buffers.fill[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var buff = _step.value; + buff._prepareBuffer(this.immediateMode.geometry, shader); + } // 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; + } // WebGL 1 doesn't support the QUADS and QUAD_STRIP modes, so we + // need to convert them to a supported format. In `vertex()`, we reformat + // the input data into the formats specified below. + + if (this.immediateMode.shapeMode === constants.QUADS) { + this.immediateMode.shapeMode = constants.TRIANGLES; + } else if (this.immediateMode.shapeMode === constants.QUAD_STRIP) { + this.immediateMode.shapeMode = constants.TRIANGLE_STRIP; + } + 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(); + }; + var _default = _main.default.RendererGL; + exports.default = _default; + }, + { + '../core/constants': 278, + '../core/main': 290, + './p5.RenderBuffer': 341, + 'core-js/modules/es.array.concat': 167, + 'core-js/modules/es.array.fill': 170, + 'core-js/modules/es.array.from': 173, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.array.map': 179, + 'core-js/modules/es.array.slice': 180, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.to-string': 200, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 343: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.fill'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.some'); + _dereq_('core-js/modules/es.object.keys'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.typed-array.float32-array'); + _dereq_('core-js/modules/es.typed-array.uint16-array'); + _dereq_('core-js/modules/es.typed-array.uint32-array'); + _dereq_('core-js/modules/es.typed-array.copy-within'); + _dereq_('core-js/modules/es.typed-array.every'); + _dereq_('core-js/modules/es.typed-array.fill'); + _dereq_('core-js/modules/es.typed-array.filter'); + _dereq_('core-js/modules/es.typed-array.find'); + _dereq_('core-js/modules/es.typed-array.find-index'); + _dereq_('core-js/modules/es.typed-array.for-each'); + _dereq_('core-js/modules/es.typed-array.includes'); + _dereq_('core-js/modules/es.typed-array.index-of'); + _dereq_('core-js/modules/es.typed-array.iterator'); + _dereq_('core-js/modules/es.typed-array.join'); + _dereq_('core-js/modules/es.typed-array.last-index-of'); + _dereq_('core-js/modules/es.typed-array.map'); + _dereq_('core-js/modules/es.typed-array.reduce'); + _dereq_('core-js/modules/es.typed-array.reduce-right'); + _dereq_('core-js/modules/es.typed-array.reverse'); + _dereq_('core-js/modules/es.typed-array.set'); + _dereq_('core-js/modules/es.typed-array.slice'); + _dereq_('core-js/modules/es.typed-array.some'); + _dereq_('core-js/modules/es.typed-array.sort'); + _dereq_('core-js/modules/es.typed-array.subarray'); + _dereq_('core-js/modules/es.typed-array.to-locale-string'); + _dereq_('core-js/modules/es.typed-array.to-string'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.fill'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.some'); + _dereq_('core-js/modules/es.object.keys'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.typed-array.float32-array'); + _dereq_('core-js/modules/es.typed-array.uint16-array'); + _dereq_('core-js/modules/es.typed-array.uint32-array'); + _dereq_('core-js/modules/es.typed-array.copy-within'); + _dereq_('core-js/modules/es.typed-array.every'); + _dereq_('core-js/modules/es.typed-array.fill'); + _dereq_('core-js/modules/es.typed-array.filter'); + _dereq_('core-js/modules/es.typed-array.find'); + _dereq_('core-js/modules/es.typed-array.find-index'); + _dereq_('core-js/modules/es.typed-array.for-each'); + _dereq_('core-js/modules/es.typed-array.includes'); + _dereq_('core-js/modules/es.typed-array.index-of'); + _dereq_('core-js/modules/es.typed-array.iterator'); + _dereq_('core-js/modules/es.typed-array.join'); + _dereq_('core-js/modules/es.typed-array.last-index-of'); + _dereq_('core-js/modules/es.typed-array.map'); + _dereq_('core-js/modules/es.typed-array.reduce'); + _dereq_('core-js/modules/es.typed-array.reduce-right'); + _dereq_('core-js/modules/es.typed-array.reverse'); + _dereq_('core-js/modules/es.typed-array.set'); + _dereq_('core-js/modules/es.typed-array.slice'); + _dereq_('core-js/modules/es.typed-array.some'); + _dereq_('core-js/modules/es.typed-array.sort'); + _dereq_('core-js/modules/es.typed-array.subarray'); + _dereq_('core-js/modules/es.typed-array.to-locale-string'); + _dereq_('core-js/modules/es.typed-array.to-string'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + _dereq_('./p5.RendererGL'); + _dereq_('./p5.RenderBuffer'); + 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); // If any face references a vertex with an index greater than the maximum + // un-singed 16 bit integer, then we need to use a Uint32Array instead of a + // Uint16Array + var hasVertexIndicesOverMaxUInt16 = vals.some(function (v) { + return v > 65535; + }); + var type = hasVertexIndicesOverMaxUInt16 ? Uint32Array : Uint16Array; + this._bindBuffer(indexBuffer, gl.ELEMENT_ARRAY_BUFFER, vals, type); // If we're using a Uint32Array for our indexBuffer we will need to pass a + // different enum value to WebGL draw triangles. This happens in + // the _drawElements function. + buffers.indexBufferType = hasVertexIndicesOverMaxUInt16 ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT; // the vertex count is based on the number of faces + buffers.vertexCount = model.faces.length * 3; + } else { + // the index buffer is unused, remove it + if (indexBuffer) { + gl.deleteBuffer(indexBuffer); + buffers.indexBuffer = null; + } // the vertex count comes directly from the model + + buffers.vertexCount = model.vertices ? model.vertices.length : 0; + } + buffers.lineVertexCount = model.lineVertices ? model.lineVertices.length : 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) { + // If this model is using a Uint32Array we need to ensure the + // OES_element_index_uint WebGL extension is enabled. + if (buffers.indexBufferType === gl.UNSIGNED_INT) { + if (!gl.getExtension('OES_element_index_uint')) { + throw new Error('Unable to render a 3d model with > 65535 triangles. Your web browser does not support the WebGL Extension OES_element_index_uint.'); + } + } // we're drawing faces + + gl.drawElements(gl.TRIANGLES, buffers.vertexCount, buffers.indexBufferType, 0); + } else { + // drawing vertices + gl.drawArrays(drawMode || gl.TRIANGLES, 0, buffers.vertexCount); + } + }; + _main.default.RendererGL.prototype._drawPoints = function (vertices, vertexBuffer) { + var gl = this.GL; + var pointShader = this._getImmediatePointShader(); + this._setPointUniforms(pointShader); + this._bindBuffer(vertexBuffer, gl.ARRAY_BUFFER, this._vToNArray(vertices), Float32Array, gl.STATIC_DRAW); + pointShader.enableAttrib(pointShader.attributes.aPosition, 3); + gl.drawArrays(gl.Points, 0, vertices.length); + pointShader.unbindShader(); + }; + var _default = _main.default.RendererGL; + exports.default = _default; + }, + { + '../core/main': 290, + './p5.RenderBuffer': 341, + './p5.RendererGL': 344, + 'core-js/modules/es.array.fill': 170, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.array.some': 181, + 'core-js/modules/es.object.keys': 194, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.typed-array.copy-within': 215, + 'core-js/modules/es.typed-array.every': 216, + 'core-js/modules/es.typed-array.fill': 217, + 'core-js/modules/es.typed-array.filter': 218, + 'core-js/modules/es.typed-array.find': 220, + 'core-js/modules/es.typed-array.find-index': 219, + 'core-js/modules/es.typed-array.float32-array': 221, + 'core-js/modules/es.typed-array.for-each': 223, + 'core-js/modules/es.typed-array.includes': 224, + 'core-js/modules/es.typed-array.index-of': 225, + 'core-js/modules/es.typed-array.iterator': 228, + 'core-js/modules/es.typed-array.join': 229, + 'core-js/modules/es.typed-array.last-index-of': 230, + 'core-js/modules/es.typed-array.map': 231, + 'core-js/modules/es.typed-array.reduce': 233, + 'core-js/modules/es.typed-array.reduce-right': 232, + 'core-js/modules/es.typed-array.reverse': 234, + 'core-js/modules/es.typed-array.set': 235, + 'core-js/modules/es.typed-array.slice': 236, + 'core-js/modules/es.typed-array.some': 237, + 'core-js/modules/es.typed-array.sort': 238, + 'core-js/modules/es.typed-array.subarray': 239, + 'core-js/modules/es.typed-array.to-locale-string': 240, + 'core-js/modules/es.typed-array.to-string': 241, + 'core-js/modules/es.typed-array.uint16-array': 242, + 'core-js/modules/es.typed-array.uint32-array': 243, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 344: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.fill'); + _dereq_('core-js/modules/es.array.filter'); + _dereq_('core-js/modules/es.array.from'); + _dereq_('core-js/modules/es.array.includes'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.object.assign'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.includes'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.typed-array.float32-array'); + _dereq_('core-js/modules/es.typed-array.float64-array'); + _dereq_('core-js/modules/es.typed-array.int16-array'); + _dereq_('core-js/modules/es.typed-array.uint8-array'); + _dereq_('core-js/modules/es.typed-array.uint16-array'); + _dereq_('core-js/modules/es.typed-array.uint32-array'); + _dereq_('core-js/modules/es.typed-array.copy-within'); + _dereq_('core-js/modules/es.typed-array.every'); + _dereq_('core-js/modules/es.typed-array.fill'); + _dereq_('core-js/modules/es.typed-array.filter'); + _dereq_('core-js/modules/es.typed-array.find'); + _dereq_('core-js/modules/es.typed-array.find-index'); + _dereq_('core-js/modules/es.typed-array.for-each'); + _dereq_('core-js/modules/es.typed-array.includes'); + _dereq_('core-js/modules/es.typed-array.index-of'); + _dereq_('core-js/modules/es.typed-array.iterator'); + _dereq_('core-js/modules/es.typed-array.join'); + _dereq_('core-js/modules/es.typed-array.last-index-of'); + _dereq_('core-js/modules/es.typed-array.map'); + _dereq_('core-js/modules/es.typed-array.reduce'); + _dereq_('core-js/modules/es.typed-array.reduce-right'); + _dereq_('core-js/modules/es.typed-array.reverse'); + _dereq_('core-js/modules/es.typed-array.set'); + _dereq_('core-js/modules/es.typed-array.slice'); + _dereq_('core-js/modules/es.typed-array.some'); + _dereq_('core-js/modules/es.typed-array.sort'); + _dereq_('core-js/modules/es.typed-array.subarray'); + _dereq_('core-js/modules/es.typed-array.to-locale-string'); + _dereq_('core-js/modules/es.typed-array.to-string'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.concat'); + _dereq_('core-js/modules/es.array.fill'); + _dereq_('core-js/modules/es.array.filter'); + _dereq_('core-js/modules/es.array.from'); + _dereq_('core-js/modules/es.array.includes'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.object.assign'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.to-string'); + _dereq_('core-js/modules/es.string.includes'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.typed-array.float32-array'); + _dereq_('core-js/modules/es.typed-array.float64-array'); + _dereq_('core-js/modules/es.typed-array.int16-array'); + _dereq_('core-js/modules/es.typed-array.uint8-array'); + _dereq_('core-js/modules/es.typed-array.uint16-array'); + _dereq_('core-js/modules/es.typed-array.uint32-array'); + _dereq_('core-js/modules/es.typed-array.copy-within'); + _dereq_('core-js/modules/es.typed-array.every'); + _dereq_('core-js/modules/es.typed-array.fill'); + _dereq_('core-js/modules/es.typed-array.filter'); + _dereq_('core-js/modules/es.typed-array.find'); + _dereq_('core-js/modules/es.typed-array.find-index'); + _dereq_('core-js/modules/es.typed-array.for-each'); + _dereq_('core-js/modules/es.typed-array.includes'); + _dereq_('core-js/modules/es.typed-array.index-of'); + _dereq_('core-js/modules/es.typed-array.iterator'); + _dereq_('core-js/modules/es.typed-array.join'); + _dereq_('core-js/modules/es.typed-array.last-index-of'); + _dereq_('core-js/modules/es.typed-array.map'); + _dereq_('core-js/modules/es.typed-array.reduce'); + _dereq_('core-js/modules/es.typed-array.reduce-right'); + _dereq_('core-js/modules/es.typed-array.reverse'); + _dereq_('core-js/modules/es.typed-array.set'); + _dereq_('core-js/modules/es.typed-array.slice'); + _dereq_('core-js/modules/es.typed-array.some'); + _dereq_('core-js/modules/es.typed-array.sort'); + _dereq_('core-js/modules/es.typed-array.subarray'); + _dereq_('core-js/modules/es.typed-array.to-locale-string'); + _dereq_('core-js/modules/es.typed-array.to-string'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.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 uSpecularMatColor;\nuniform vec4 uAmbientMatColor;\nuniform vec4 uEmissiveMatColor;\n\nuniform vec4 uMaterialColor;\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\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 // Calculating final color as result of all lights (plus emissive term).\n\n gl_FragColor = isTexture ? texture2D(uSampler, vTexCoord) * (uTint / vec4(255, 255, 255, 255)) : uMaterialColor;\n gl_FragColor.rgb = diffuse * gl_FragColor.rgb + \n vAmbientColor * uAmbientMatColor.rgb + \n specular * uSpecularMatColor.rgb + \n uEmissiveMatColor.rgb;\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.curAmbientColor = this._cachedFillStyle = [ + 0, + 0, + 0, + 0 + ]; + this.curSpecularColor = this._cachedFillStyle = [ + 0, + 0, + 0, + 0 + ]; + this.curEmissiveColor = this._cachedFillStyle = [ + 0, + 0, + 0, + 0 + ]; + this.curStrokeColor = this._cachedStrokeStyle = [ + 0, + 0, + 0, + 1 + ]; + this.curBlendMode = constants.BLEND; + this._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'); // Current vertex normal + this._currentNormal = new _main.default.Vector(0, 0, 1); // 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: { + stroke: [ + new _main.default.RenderBuffer(3, 'lineVertices', 'lineVertexBuffer', 'aPosition', this, this._flatten), + new _main.default.RenderBuffer(4, 'lineNormals', 'lineNormalBuffer', 'aDirection', this, this._flatten) + ], + 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 BufferDef(3, 'vertexSpeculars', 'specularBuffer', 'aSpecularColor'), + new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', this, this._flatten) + ], + 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: { + 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) + ], + 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; //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: false, + 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 () { + 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); + } + }; //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; + this.canvas = c; + } + var renderer = new _main.default.RendererGL(this._pInst.canvas, this._pInst, !isPGraphics); + this._pInst._setProperty('_renderer', renderer); + renderer.resize(w, h); + renderer._applyDefaults(); + if (!isPGraphics) { + this._pInst._elements.push(renderer); + } + if (typeof callback === 'function') { + //setTimeout with 0 forces the task to the back of the queue, this ensures that + //we finish switching out the renderer + setTimeout(function () { + callback.apply(window._renderer, options); + }, 0); + } + }; + /** + * @module Rendering + * @submodule Rendering + * @for p5 + */ + /** + * Set attributes for the WebGL Drawing context. + * This is a way of adjusting how the WebGL + * renderer works to fine-tune the display and performance. + * + * Note that this will reinitialize the drawing context + * if called after the WebGL canvas is made. + * + * If an object is passed as the parameter, all attributes + * not declared in the object will be set to defaults. + * + * The available attributes are: + *
+ * alpha - indicates if the canvas contains an alpha buffer + * default is false + * + * 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();
+ * }
+ *

+ *

+ * + *

+ *


+ * // press the mouse button to disable perPixelLighting
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   noStroke();
+ *   fill(255);
+ * }
+ *
+ * let lights = [
+ *   { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+ *   { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+ *   { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+ *   { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+ *   { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+ *   { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+ * ];
+ *
+ * function draw() {
+ *   let t = millis() / 1000 + 1000;
+ *   background(0);
+ *   directionalLight(color('#222'), 1, 1, 1);
+ *
+ *   for (let i = 0; i < lights.length; i++) {
+ *     let light = lights[i];
+ *     pointLight(
+ *       color(light.c),
+ *       p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+ *     );
+ *   }
+ *
+ *   specularMaterial(255);
+ *   sphere(width * 0.1);
+ *
+ *   rotateX(t * 0.77);
+ *   rotateY(t * 0.83);
+ *   rotateZ(t * 0.91);
+ *   torus(width * 0.3, width * 0.07, 24, 10);
+ * }
+ *
+ * function mousePressed() {
+ *   setAttributes('perPixelLighting', false);
+ *   noStroke();
+ *   fill(255);
+ * }
+ * function mouseReleased() {
+ *   setAttributes('perPixelLighting', true);
+ *   noStroke();
+ *   fill(255);
+ * }
+ *

+ *

+ * + * @alt a rotating cube with smoother edges + */ + /** + * @method setAttributes + * @for p5 + * @param {Object} obj object with key-value pairs + */ + _main.default.prototype.setAttributes = function (key, value) { + if (typeof this._glAttributes === 'undefined') { + console.log('You are trying to use setAttributes on a p5.Graphics object ' + 'that does not use a WEBGL renderer.'); + return; + } + var unchanged = true; + if (typeof value !== 'undefined') { + //first time modifying the attributes + if (this._glAttributes === null) { + this._glAttributes = { + }; + } + if (this._glAttributes[key] !== value) { + //changing value of previously altered attribute + this._glAttributes[key] = value; + unchanged = false; + } //setting all attributes with some change + + } else if (key instanceof Object) { + if (this._glAttributes !== key) { + this._glAttributes = key; + unchanged = false; + } + } //@todo_FES + + if (!this._renderer.isP3D || unchanged) { + return; + } + if (!this._setupDone) { + for (var x in this._renderer.retainedMode.geometry) { + if (this._renderer.retainedMode.geometry.hasOwnProperty(x)) { + 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 + *

+ *


+ * function setup() {
+ *   createCanvas(200, 200, WEBGL);
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   noStroke();
+ *   fill(100, 100, 240);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   box(75, 75, 75);
+ * }
+ *

+ *

+ * + * @alt + * black canvas with purple cube spinning + */ + _main.default.RendererGL.prototype.fill = function (v1, v2, v3, a) { + //see material.js for more info on color blending in webgl + var color = _main.default.prototype.color.apply(this._pInst, arguments); + this.curFillColor = color._array; + this.drawMode = constants.FILL; + this._useNormalMaterial = false; + this._tex = null; + }; + /** + * Basic stroke material for geometry with a given color + * @method stroke + * @param {Number|Number[]|String|p5.Color} v1 gray value, + * red or hue value (depending on the current color mode), + * or color Array, or CSS color string + * @param {Number} [v2] green or saturation value + * @param {Number} [v3] blue or brightness value + * @param {Number} [a] opacity + * @example + *

+ *


+ * function setup() {
+ *   createCanvas(200, 200, WEBGL);
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   stroke(240, 150, 150);
+ *   fill(100, 100, 240);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   box(75, 75, 75);
+ * }
+ *

+ *

+ * + * @alt + * black canvas with purple cube with pink outline spinning + */ + _main.default.RendererGL.prototype.stroke = function (r, g, b, a) { + //@todo allow transparency in stroking currently doesn't have + //any impact and causes problems with specularMaterial + arguments[3] = 255; + var color = _main.default.prototype.color.apply(this._pInst, arguments); + this.curStrokeColor = color._array; + }; + _main.default.RendererGL.prototype.strokeCap = function (cap) { + // @TODO : to be implemented + console.error('Sorry, strokeCap() is not yet implemented in WEBGL mode'); + }; + _main.default.RendererGL.prototype.strokeJoin = function (join) { + // @TODO : to be implemented + // https://processing.org/reference/strokeJoin_.html + console.error('Sorry, strokeJoin() is not yet implemented in WEBGL mode'); + }; + _main.default.RendererGL.prototype.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, 400, WEBGL);
+ *   setAttributes('antialias', true);
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   noStroke();
+ *   translate(0, -100, 0);
+ *   stroke(240, 150, 150);
+ *   fill(100, 100, 240);
+ *   push();
+ *   strokeWeight(8);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   sphere(75);
+ *   pop();
+ *   push();
+ *   translate(0, 200, 0);
+ *   strokeWeight(1);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   sphere(75);
+ *   pop();
+ * }
+ *

+ *

+ * + * @alt + * black canvas with two purple rotating spheres with pink + * outlines the sphere on top has much heavier outlines, + */ + _main.default.RendererGL.prototype.strokeWeight = function (w) { + if (this.curStrokeWeight !== w) { + this.pointSize = w; + this.curStrokeWeight = w; + } + }; // x,y are canvas-relative (pre-scaled by _pixelDensity) + _main.default.RendererGL.prototype._getPixel = function (x, y) { + var imageData, + index; + imageData = new Uint8Array(4); + 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; + 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.clearDepth(1); + 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 { + 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.curAmbientColor = this.curAmbientColor; + properties.curSpecularColor = this.curSpecularColor; + properties.curEmissiveColor = this.curEmissiveColor; + 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; + properties._currentNormal = this._currentNormal; + properties.curBlendMode = this.curBlendMode; + 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('uAmbientMatColor', this.curAmbientColor); + fillShader.setUniform('uSpecularMatColor', this.curSpecularColor); + fillShader.setUniform('uEmissiveMatColor', this.curEmissiveColor); + 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) { + for (var i = 0; i < data.length; i++) { + polyVertArray[polyVertArray.length] = data[i]; + } + } + function begincallback(type) { + if (type !== _libtess.default.primitiveType.GL_TRIANGLES) { + console.log('expected TRIANGLES but got type: '.concat(type)); + } + } + function errorcallback(errno) { + console.log('error callback'); + console.log('error number: '.concat(errno)); + } // callback for when segments intersect and must be split + + function combinecallback(coords, data, weight) { + var result = [ + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0 + ]; + for (var i = 0; i < weight.length; i++) { + for (var j = 0; j < result.length; j++) { + if (weight[i] === 0 || !data[i]) continue; + result[j] += data[i][j] * weight[i]; + } + } + return result; + } + function edgeCallback(flag) { // don't really care about the flag, but need no-strip/no-fan behavior + } + var tessy = new _libtess.default.GluTesselator(); + tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_VERTEX_DATA, vertexCallback); + tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_BEGIN, begincallback); + tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_ERROR, errorcallback); + tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_COMBINE, combinecallback); + tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_EDGE_FLAG, edgeCallback); + 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 += 12) { + var coords = contour.slice(j, j + 12); + 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': 278, + '../core/main': 290, + '../core/p5.Renderer': 293, + './p5.Camera': 338, + './p5.Matrix': 340, + './p5.Shader': 345, + 'core-js/modules/es.array.concat': 167, + 'core-js/modules/es.array.fill': 170, + 'core-js/modules/es.array.filter': 171, + 'core-js/modules/es.array.from': 173, + 'core-js/modules/es.array.includes': 174, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.array.slice': 180, + 'core-js/modules/es.object.assign': 190, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.to-string': 200, + 'core-js/modules/es.string.includes': 203, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.typed-array.copy-within': 215, + 'core-js/modules/es.typed-array.every': 216, + 'core-js/modules/es.typed-array.fill': 217, + 'core-js/modules/es.typed-array.filter': 218, + 'core-js/modules/es.typed-array.find': 220, + 'core-js/modules/es.typed-array.find-index': 219, + 'core-js/modules/es.typed-array.float32-array': 221, + 'core-js/modules/es.typed-array.float64-array': 222, + 'core-js/modules/es.typed-array.for-each': 223, + 'core-js/modules/es.typed-array.includes': 224, + 'core-js/modules/es.typed-array.index-of': 225, + 'core-js/modules/es.typed-array.int16-array': 226, + 'core-js/modules/es.typed-array.iterator': 228, + 'core-js/modules/es.typed-array.join': 229, + 'core-js/modules/es.typed-array.last-index-of': 230, + 'core-js/modules/es.typed-array.map': 231, + 'core-js/modules/es.typed-array.reduce': 233, + 'core-js/modules/es.typed-array.reduce-right': 232, + 'core-js/modules/es.typed-array.reverse': 234, + 'core-js/modules/es.typed-array.set': 235, + 'core-js/modules/es.typed-array.slice': 236, + 'core-js/modules/es.typed-array.some': 237, + 'core-js/modules/es.typed-array.sort': 238, + 'core-js/modules/es.typed-array.subarray': 239, + 'core-js/modules/es.typed-array.to-locale-string': 240, + 'core-js/modules/es.typed-array.to-string': 241, + 'core-js/modules/es.typed-array.uint16-array': 242, + 'core-js/modules/es.typed-array.uint32-array': 243, + 'core-js/modules/es.typed-array.uint8-array': 244, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248, + 'libtess': 261, + 'path': 264 + } + ], + 345: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.index-of'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.function.name'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.index-of'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.array.slice'); + _dereq_('core-js/modules/es.function.name'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.default = void 0; + var _main = _interopRequireDefault(_dereq_('../core/main')); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } /** + * This module defines the p5.Shader class + * @module 3D + * @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 = uniformInfo.size > 1 || uniform.type === gl.FLOAT_MAT3 || uniform.type === gl.FLOAT_MAT4 || uniform.type === gl.FLOAT_VEC2 || uniform.type === gl.FLOAT_VEC3 || uniform.type === gl.FLOAT_VEC4 || uniform.type === gl.INT_VEC2 || uniform.type === gl.INT_VEC4 || uniform.type === gl.INT_VEC3; + this.uniforms[uniformName] = uniform; + } + this._loadedUniforms = true; + }; + _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 () { + var viewMatrix = this._renderer._curCamera.cameraMatrix; + var projectionMatrix = this._renderer.uPMatrix; + var modelViewMatrix = this._renderer.uMVMatrix; + var modelViewProjectionMatrix = modelViewMatrix.copy(); + modelViewProjectionMatrix.mult(projectionMatrix); + if (this.isStrokeShader()) { + 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('uViewMatrix', viewMatrix.mat4); + this.setUniform('uProjectionMatrix', projectionMatrix.mat4); + this.setUniform('uModelViewMatrix', modelViewMatrix.mat4); + this.setUniform('uModelViewProjectionMatrix', modelViewProjectionMatrix.mat4); + if (this.uniforms.uNormalMatrix) { + this._renderer.uNMatrix.inverseTranspose(this._renderer.uMVMatrix); + this.setUniform('uNormalMatrix', this._renderer.uNMatrix.mat3); + } + }; + /** + * @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; + }; + /** + * Used to set the uniforms of a + * p5.Shader object. + * + * Uniforms are used as a way to provide shader programs + * (which run on the GPU) with values from a sketch + * (which runs on the CPU). + * + * @method setUniform + * @chainable + * @param {String} uniformName the name of the uniform. + * Must correspond to the name used in the vertex and fragment shaders + * @param {Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture} + * data the data to associate with the uniform. The type can be + * a boolean (true/false), a number, an array of numbers, or + * an image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture) + * + * @example + *

+ *


+ * // Click within the image to toggle the value of uniforms
+ * // Note: for an alternative approach to the same example,
+ * // involving toggling between shaders please refer to:
+ * // https://p5js.org/reference/#/p5/shader
+ *
+ * let grad;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ *   // note that we are using two instances
+ *   // of the same vertex and fragment shaders
+ *   grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   shader(grad);
+ *   noStroke();
+ *
+ *   describe(
+ *     'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   // update the offset values for each scenario,
+ *   // moving the "grad" shader in either vertical or
+ *   // horizontal direction each with differing colors
+ *
+ *   if (showRedGreen === true) {
+ *     grad.setUniform('colorCenter', [1, 0, 0]);
+ *     grad.setUniform('colorBackground', [0, 1, 0]);
+ *     grad.setUniform('offset', [sin(millis() / 2000), 1]);
+ *   } else {
+ *     grad.setUniform('colorCenter', [1, 0.5, 0]);
+ *     grad.setUniform('colorBackground', [0.226, 0, 0.615]);
+ *     grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ *   }
+ *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ *   showRedGreen = !showRedGreen;
+ * }
+ *

+ *

+ * + * @alt + * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed. + */ + _main.default.Shader.prototype.setUniform = function (uniformName, data) { + var uniform = this.uniforms[uniformName]; + if (!uniform) { + return; + } + var gl = this._renderer.GL; + if (uniform.isArray) { + if (uniform._cachedData && this._renderer._arraysEqual(uniform._cachedData, data)) { + return; + } else { + uniform._cachedData = data.slice(0); + } + } else if (uniform._cachedData && uniform._cachedData === data) { + return; + } else { + if (Array.isArray(data)) { + uniform._cachedData = data.slice(0); + } else { + uniform._cachedData = data; + } + } + var location = uniform.location; + this.useProgram(); + switch (uniform.type) { + case gl.BOOL: + if (data === true) { + gl.uniform1i(location, 1); + } else { + gl.uniform1i(location, 0); + } + break; + case gl.INT: + if (uniform.size > 1) { + data.length && gl.uniform1iv(location, data); + } else { + gl.uniform1i(location, data); + } + break; + case gl.FLOAT: + if (uniform.size > 1) { + data.length && gl.uniform1fv(location, data); + } else { + gl.uniform1f(location, data); + } + break; + case gl.FLOAT_MAT3: + gl.uniformMatrix3fv(location, false, data); + break; + case gl.FLOAT_MAT4: + gl.uniformMatrix4fv(location, false, data); + break; + case gl.FLOAT_VEC2: + if (uniform.size > 1) { + data.length && gl.uniform2fv(location, data); + } else { + gl.uniform2f(location, data[0], data[1]); + } + break; + case gl.FLOAT_VEC3: + if (uniform.size > 1) { + data.length && gl.uniform3fv(location, data); + } else { + gl.uniform3f(location, data[0], data[1], data[2]); + } + break; + case gl.FLOAT_VEC4: + if (uniform.size > 1) { + data.length && gl.uniform4fv(location, data); + } else { + gl.uniform4f(location, data[0], data[1], data[2], data[3]); + } + break; + case gl.INT_VEC2: + if (uniform.size > 1) { + data.length && gl.uniform2iv(location, data); + } else { + gl.uniform2i(location, data[0], data[1]); + } + break; + case gl.INT_VEC3: + if (uniform.size > 1) { + data.length && gl.uniform3iv(location, data); + } else { + gl.uniform3i(location, data[0], data[1], data[2]); + } + break; + case gl.INT_VEC4: + if (uniform.size > 1) { + data.length && gl.uniform4iv(location, data); + } else { + gl.uniform4i(location, data[0], data[1], data[2], data[3]); + } + break; + case gl.SAMPLER_2D: + gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex); + uniform.texture = data instanceof _main.default.Texture ? data : this._renderer.getTexture(data); + gl.uniform1i(location, uniform.samplerIndex); + 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.samplers.length > 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': 290, + 'core-js/modules/es.array.index-of': 175, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.array.slice': 180, + 'core-js/modules/es.function.name': 183, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 346: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.typed-array.uint8-array'); + _dereq_('core-js/modules/es.typed-array.copy-within'); + _dereq_('core-js/modules/es.typed-array.every'); + _dereq_('core-js/modules/es.typed-array.fill'); + _dereq_('core-js/modules/es.typed-array.filter'); + _dereq_('core-js/modules/es.typed-array.find'); + _dereq_('core-js/modules/es.typed-array.find-index'); + _dereq_('core-js/modules/es.typed-array.for-each'); + _dereq_('core-js/modules/es.typed-array.includes'); + _dereq_('core-js/modules/es.typed-array.index-of'); + _dereq_('core-js/modules/es.typed-array.iterator'); + _dereq_('core-js/modules/es.typed-array.join'); + _dereq_('core-js/modules/es.typed-array.last-index-of'); + _dereq_('core-js/modules/es.typed-array.map'); + _dereq_('core-js/modules/es.typed-array.reduce'); + _dereq_('core-js/modules/es.typed-array.reduce-right'); + _dereq_('core-js/modules/es.typed-array.reverse'); + _dereq_('core-js/modules/es.typed-array.set'); + _dereq_('core-js/modules/es.typed-array.slice'); + _dereq_('core-js/modules/es.typed-array.some'); + _dereq_('core-js/modules/es.typed-array.sort'); + _dereq_('core-js/modules/es.typed-array.subarray'); + _dereq_('core-js/modules/es.typed-array.to-locale-string'); + _dereq_('core-js/modules/es.typed-array.to-string'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.typed-array.uint8-array'); + _dereq_('core-js/modules/es.typed-array.copy-within'); + _dereq_('core-js/modules/es.typed-array.every'); + _dereq_('core-js/modules/es.typed-array.fill'); + _dereq_('core-js/modules/es.typed-array.filter'); + _dereq_('core-js/modules/es.typed-array.find'); + _dereq_('core-js/modules/es.typed-array.find-index'); + _dereq_('core-js/modules/es.typed-array.for-each'); + _dereq_('core-js/modules/es.typed-array.includes'); + _dereq_('core-js/modules/es.typed-array.index-of'); + _dereq_('core-js/modules/es.typed-array.iterator'); + _dereq_('core-js/modules/es.typed-array.join'); + _dereq_('core-js/modules/es.typed-array.last-index-of'); + _dereq_('core-js/modules/es.typed-array.map'); + _dereq_('core-js/modules/es.typed-array.reduce'); + _dereq_('core-js/modules/es.typed-array.reduce-right'); + _dereq_('core-js/modules/es.typed-array.reverse'); + _dereq_('core-js/modules/es.typed-array.set'); + _dereq_('core-js/modules/es.typed-array.slice'); + _dereq_('core-js/modules/es.typed-array.some'); + _dereq_('core-js/modules/es.typed-array.sort'); + _dereq_('core-js/modules/es.typed-array.subarray'); + _dereq_('core-js/modules/es.typed-array.to-locale-string'); + _dereq_('core-js/modules/es.typed-array.to-string'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.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 3D + * @submodule Material + * @for p5 + * @requires core + */ + /** + * Texture class for WEBGL Mode + * @private + * @class p5.Texture + * @param {p5.RendererGL} renderer an instance of p5.RendererGL that + * will provide the GL context for this new p5.Texture + * @param {p5.Image|p5.Graphics|p5.Element|p5.MediaElement|ImageData} [obj] the + * object containing the image data to store in the texture. + * @param {Object} [settings] optional A javascript object containing texture + * settings. + * @param {Number} [settings.format] optional The internal color component + * format for the texture. Possible values for format include gl.RGBA, + * gl.RGB, gl.ALPHA, gl.LUMINANCE, gl.LUMINANCE_ALPHA. Defaults to gl.RBGA + * @param {Number} [settings.minFilter] optional The texture minification + * filter setting. Possible values are gl.NEAREST or gl.LINEAR. Defaults + * to gl.LINEAR. Note, Mipmaps are not implemented in p5. + * @param {Number} [settings.magFilter] optional The texture magnification + * filter setting. Possible values are gl.NEAREST or gl.LINEAR. Defaults + * to gl.LINEAR. Note, Mipmaps are not implemented in p5. + * @param {Number} [settings.wrapS] optional The texture wrap settings for + * the s coordinate, or x axis. Possible values are gl.CLAMP_TO_EDGE, + * gl.REPEAT, and gl.MIRRORED_REPEAT. The mirror settings are only available + * when using a power of two sized texture. Defaults to gl.CLAMP_TO_EDGE + * @param {Number} [settings.wrapT] optional The texture wrap settings for + * the t coordinate, or y axis. Possible values are gl.CLAMP_TO_EDGE, + * gl.REPEAT, and gl.MIRRORED_REPEAT. The mirror settings are only available + * when using a power of two sized texture. Defaults to gl.CLAMP_TO_EDGE + * @param {Number} [settings.dataType] optional The data type of the texel + * data. Possible values are gl.UNSIGNED_BYTE or gl.FLOAT. There are more + * formats that are not implemented in p5. Defaults to gl.UNSIGNED_BYTE. + */ + + _main.default.Texture = function (renderer, obj, settings) { + this._renderer = renderer; + var gl = this._renderer.GL; + settings = settings || { + }; + if (settings.dataType === gl.FLOAT) { + var ext = gl.getExtension('OES_texture_float'); + if (!ext) { + console.log('Oh no, your device doesn\'t support floating point textures!'); + } + var linear = gl.getExtension('OES_texture_float_linear'); + if (!linear) { + console.log('Ack! Your device doesn\'t support linear filtering for floating point textures'); + } + } + this.src = obj; + this.glTex = undefined; + this.glTarget = gl.TEXTURE_2D; + this.glFormat = settings.format || gl.RGBA; + this.mipmaps = false; + this.glMinFilter = settings.minFilter || gl.LINEAR; + this.glMagFilter = settings.magFilter || gl.LINEAR; + this.glWrapS = settings.wrapS || gl.CLAMP_TO_EDGE; + this.glWrapT = settings.wrapT || gl.CLAMP_TO_EDGE; + this.glDataType = settings.dataType || gl.UNSIGNED_BYTE; // used to determine if this texture might need constant updating + // because it is a video or gif. + this.isSrcMediaElement = typeof _main.default.MediaElement !== 'undefined' && obj instanceof _main.default.MediaElement; + this._videoPrevUpdateTime = 0; + this.isSrcHTMLElement = typeof _main.default.Element !== 'undefined' && obj instanceof _main.default.Element && !(obj instanceof _main.default.Graphics) && !(obj instanceof _main.default.Renderer); + this.isSrcP5Image = obj instanceof _main.default.Image; + this.isSrcP5Graphics = obj instanceof _main.default.Graphics; + this.isSrcP5Renderer = obj instanceof _main.default.Renderer; + this.isImageData = typeof ImageData !== 'undefined' && obj instanceof ImageData; + 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.isSrcP5Renderer || this.isSrcHTMLElement) { + // if param is a video HTML element + textureData = this.src.elt; + } else if (this.isImageData) { + textureData = this.src; + } + return textureData; + }; + /** + * Initializes common texture parameters, creates a gl texture, + * tries to upload the texture for the first time if data is + * already available. + * @private + * @method init + */ + _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 1×1 empty texture initially, because data is not yet ready, + // so that no errors occur in gl console! + var tmpdata = new Uint8Array([1, + 1, + 1, + 1]); + gl.texImage2D(this.glTarget, 0, gl.RGBA, 1, 1, 0, this.glFormat, this.glDataType, tmpdata); + } else { + // data is ready: just push the texture! + gl.texImage2D(this.glTarget, 0, this.glFormat, this.glFormat, this.glDataType, data); + } + }; + /** + * Checks if the source data for this texture has changed (if it's + * easy to do so) and reuploads the texture if necessary. If it's not + * possible or to expensive to do a calculation to determine wheter or + * not the data has occurred, this method simply re-uploads the texture. + * @method update + */ + _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, this.glDataType, 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': 278, + '../core/main': 290, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.typed-array.copy-within': 215, + 'core-js/modules/es.typed-array.every': 216, + 'core-js/modules/es.typed-array.fill': 217, + 'core-js/modules/es.typed-array.filter': 218, + 'core-js/modules/es.typed-array.find': 220, + 'core-js/modules/es.typed-array.find-index': 219, + 'core-js/modules/es.typed-array.for-each': 223, + 'core-js/modules/es.typed-array.includes': 224, + 'core-js/modules/es.typed-array.index-of': 225, + 'core-js/modules/es.typed-array.iterator': 228, + 'core-js/modules/es.typed-array.join': 229, + 'core-js/modules/es.typed-array.last-index-of': 230, + 'core-js/modules/es.typed-array.map': 231, + 'core-js/modules/es.typed-array.reduce': 233, + 'core-js/modules/es.typed-array.reduce-right': 232, + 'core-js/modules/es.typed-array.reverse': 234, + 'core-js/modules/es.typed-array.set': 235, + 'core-js/modules/es.typed-array.slice': 236, + 'core-js/modules/es.typed-array.some': 237, + 'core-js/modules/es.typed-array.sort': 238, + 'core-js/modules/es.typed-array.subarray': 239, + 'core-js/modules/es.typed-array.to-locale-string': 240, + 'core-js/modules/es.typed-array.to-string': 241, + 'core-js/modules/es.typed-array.uint8-array': 244, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 347: [ + function (_dereq_, module, exports) { + 'use strict'; + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.object.get-own-property-descriptor'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/es.string.sub'); + _dereq_('core-js/modules/es.weak-map'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; + }; + } + return _typeof2(obj); + } + function _typeof(obj) { + if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { + _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + _dereq_('core-js/modules/es.symbol'); + _dereq_('core-js/modules/es.symbol.description'); + _dereq_('core-js/modules/es.symbol.iterator'); + _dereq_('core-js/modules/es.array.iterator'); + _dereq_('core-js/modules/es.object.to-string'); + _dereq_('core-js/modules/es.regexp.exec'); + _dereq_('core-js/modules/es.string.iterator'); + _dereq_('core-js/modules/es.string.split'); + _dereq_('core-js/modules/es.string.sub'); + _dereq_('core-js/modules/web.dom-collections.iterator'); + var _main = _interopRequireDefault(_dereq_('../core/main')); + var constants = _interopRequireWildcard(_dereq_('../core/constants')); + _dereq_('./p5.Shader'); + _dereq_('./p5.RendererGL.Retained'); + function _getRequireWildcardCache() { + if (typeof WeakMap !== 'function') return null; + var cache = new WeakMap(); + _getRequireWildcardCache = function _getRequireWildcardCache() { + return cache; + }; + return cache; + } + function _interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } + if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') { + return { + default: + obj + }; + } + var cache = _getRequireWildcardCache(); + if (cache && cache.has(obj)) { + return cache.get(obj); + } + var newObj = { + }; + var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; + if (desc && (desc.get || desc.set)) { + Object.defineProperty(newObj, key, desc); + } else { + newObj[key] = obj[key]; + } + } + } + newObj.default = obj; + if (cache) { + cache.set(obj, newObj); + } + return newObj; + } + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } // 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 / 3); // split the cubic in 3 + var start = cubic.split(t); + var middle = cubic.split(1 - t / (1 - t)); + qs.push(start); // the first part + tail.push(cubic); // the last part + cubic = middle; // iterate on the middle piece + } + if (t3 < 1) { + // a little excess error, split the middle in two + qs.push(cubic.split(0.5)); + } // add the middle piece to the result + + qs.push(cubic); // finally add the tail, reversed, onto the result + Array.prototype.push.apply(qs, tail.reverse()); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return != null) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + return qs; + } /** + * @function pushLine + * @param {Number} x0 + * @param {Number} y0 + * @param {Number} x1 + * @param {Number} y1 + * + * add a straight line to the row/col grid of a glyph + */ + + function pushLine(x0, y0, x1, y1) { + var mx = (x0 + x1) / 2; + var my = (y0 + y1) / 2; + push([x0, + x1], [ + y0, + y1 + ], { + x: x0, + y: y0, + cx: mx, + cy: my + }); + } /** + * @function samePoint + * @param {Number} x0 + * @param {Number} y0 + * @param {Number} x1 + * @param {Number} y1 + * @return {Boolean} true if the two points are sufficiently close + * + * tests if two points are close enough to be considered the same + */ + + function samePoint(x0, y0, x1, y1) { + return Math.abs(x1 - x0) < 0.00001 && Math.abs(y1 - y0) < 0.00001; + } + var x0, + y0, + xs, + ys; + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; + try { + for (var _iterator2 = cmds[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var cmd = _step2.value; // scale the coordinates to the range 0-1 + var x1 = (cmd.x - xMin) / gWidth; + var y1 = (cmd.y - yMin) / gHeight; // don't bother if this point is the same as the last + if (samePoint(x0, y0, x1, y1)) continue; + switch (cmd.type) { + case 'M': + { + // move + xs = x1; + ys = y1; + break; + } + case 'L': + { + // line + pushLine(x0, y0, x1, y1); + break; + } + case 'Q': + { + // quadratic + var cx = (cmd.x1 - xMin) / gWidth; + var cy = (cmd.y1 - yMin) / gHeight; + push([x0, + x1, + cx], [ + y0, + y1, + cy + ], { + x: x0, + y: y0, + cx: cx, + cy: cy + }); + break; + } + case 'Z': + { + // end + if (!samePoint(x0, y0, xs, ys)) { + // add an extra line closing the loop, if necessary + pushLine(x0, y0, xs, ys); + strokes.push({ + x: xs, + y: ys + }); + } else { + strokes.push({ + x: x0, + y: y0 + }); + } + break; + } + case 'C': + { + // cubic + var cx1 = (cmd.x1 - xMin) / gWidth; + var cy1 = (cmd.y1 - yMin) / gHeight; + var cx2 = (cmd.x2 - xMin) / gWidth; + var cy2 = (cmd.y2 - yMin) / gHeight; + var qs = cubicToQuadratics(x0, y0, cx1, cy1, cx2, cy2, x1, y1); + for (var iq = 0; iq < qs.length; iq++) { + var q = qs[iq].toQuadratic(); + push([q.x, + q.x1, + q.cx], [ + q.y, + q.y1, + q.cy + ], q); + } + break; + } + default: + throw new Error('unknown command type: '.concat(cmd.type)); + } + x0 = x1; + y0 = y1; + } // allocate space for the strokes + + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return != null) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; + } + } + } + var strokeCount = strokes.length; + var strokeImageInfo = this.strokeImageInfos.findImage(strokeCount); + var strokeOffset = strokeImageInfo.index; // fill the stroke image + for (var il = 0; il < strokeCount; ++il) { + var s = strokes[il]; + setPixel(strokeImageInfo, byte(s.x), byte(s.y), byte(s.cx), byte(s.cy)); + } /** + * @function layout + * @param {Number[][]} dim + * @param {ImageInfo[]} dimImageInfos + * @param {ImageInfo[]} cellImageInfos + * @return {Object} + * + * lays out the curves in a dimension (row or col) into two + * images, one for the indices of the curves themselves, and + * one containing the offset and length of those index spans. + */ + + function layout(dim, dimImageInfos, cellImageInfos) { + var dimLength = dim.length; // the number of slices in this dimension + var dimImageInfo = dimImageInfos.findImage(dimLength); + var dimOffset = dimImageInfo.index; // calculate the total number of stroke indices in this dimension + var totalStrokes = 0; + for (var id = 0; id < dimLength; ++id) { + totalStrokes += dim[id].length; + } // allocate space for the stroke indices + + var cellImageInfo = cellImageInfos.findImage(totalStrokes); // for each slice in the glyph + for (var _i2 = 0; _i2 < dimLength; ++_i2) { + var strokeIndices = dim[_i2]; + var _strokeCount = strokeIndices.length; + var cellLineIndex = cellImageInfo.index; // write the offset and count into the glyph slice image + setPixel(dimImageInfo, cellLineIndex >> 7, cellLineIndex & 127, _strokeCount >> 7, _strokeCount & 127); // for each stroke index in that slice + for (var iil = 0; iil < _strokeCount; ++iil) { + // write the stroke index into the slice's image + var strokeIndex = strokeIndices[iil] + strokeOffset; + setPixel(cellImageInfo, strokeIndex >> 7, strokeIndex & 127, 0, 0); + } + } + return { + cellImageInfo: cellImageInfo, + dimOffset: dimOffset, + dimImageInfo: dimImageInfo + }; + } // initialize the info for this glyph + + gi = this.glyphInfos[glyph.index] = { + glyph: glyph, + uGlyphRect: [ + bb.x1, + - bb.y1, + bb.x2, + - bb.y2 + ], + strokeImageInfo: strokeImageInfo, + strokes: strokes, + colInfo: layout(cols, this.colDimImageInfos, this.colCellImageInfos), + rowInfo: layout(rows, this.rowDimImageInfos, this.rowCellImageInfos) + }; + gi.uGridOffset = [ + gi.colInfo.dimOffset, + gi.rowInfo.dimOffset + ]; + return gi; + }; + }; + _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': 278, + '../core/main': 290, + './p5.RendererGL.Retained': 343, + './p5.Shader': 345, + 'core-js/modules/es.array.iterator': 176, + 'core-js/modules/es.object.get-own-property-descriptor': 191, + 'core-js/modules/es.object.to-string': 195, + 'core-js/modules/es.regexp.exec': 199, + 'core-js/modules/es.string.iterator': 204, + 'core-js/modules/es.string.split': 209, + 'core-js/modules/es.string.sub': 210, + 'core-js/modules/es.symbol': 214, + 'core-js/modules/es.symbol.description': 212, + 'core-js/modules/es.symbol.iterator': 213, + 'core-js/modules/es.weak-map': 246, + 'core-js/modules/web.dom-collections.iterator': 248 + } + ], + 348: [ + function (_dereq_, module, exports) { + module.exports = { + 'fes': { + 'autoplay': 'The media that tried to play (with \'{{src}}\') wasn\'t allowed to by this browser, most likely due to the browser\'s autoplay policy.\n\n+ More info: {{url}}', + 'checkUserDefinedFns': 'It seems that you may have accidentally written {{name}} instead of {{actualName}}. Please correct it if it\'s not intentional.', + 'fileLoadError': { + 'bytes': 'It looks like there was a problem loading your file. {{suggestion}}', + 'font': 'It looks like there was a problem loading your font. {{suggestion}}', + 'gif': 'There was some trouble loading your GIF. Make sure that your GIF is using 87a or 89a encoding.', + 'image': 'It looks like there was a problem loading your image. {{suggestion}}', + 'json': 'It looks like there was a problem loading your JSON file. {{suggestion}}', + 'large': 'If your large file isn\'t fetched successfully, we recommend splitting the file into smaller segments and fetching those.', + 'strings': 'It looks like there was a problem loading your text file. {{suggestion}}', + 'suggestion': 'Try checking if the file path ({{filePath}}) is correct, hosting the file online, or running a local server.\n\n+ More info: {{url}}', + 'table': 'It looks like there was a problem loading your table file. {{suggestion}}', + 'xml': 'It looks like there was a problem loading your XML file. {{suggestion}}' + }, + 'friendlyParamError': { + 'type_EMPTY_VAR': '{{location}} {{func}}() was expecting {{formatType}} for the {{position}} parameter, received an empty variable instead. If not intentional, this is often a problem with scope.\n\n+ More info: {{url}}', + 'type_TOO_FEW_ARGUMENTS': '{{location}} {{func}}() was expecting at least {{minParams}} arguments, but received only {{argCount}}.', + 'type_TOO_MANY_ARGUMENTS': '{{location}} {{func}}() was expecting no more than {{maxParams}} arguments, but received {{argCount}}.', + 'type_WRONG_TYPE': '{{location}} {{func}}() was expecting {{formatType}} for the {{position}} parameter, received {{argType}} instead.' + }, + 'globalErrors': { + 'reference': { + 'cannotAccess': '\n{{location}} "{{symbol}}" is used before declaration. Make sure you have declared the variable before using it.\n\n+ More info: {{url}}', + 'notDefined': '\n{{location}} "{{symbol}}" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).\n\n+ More info: {{url}}' + }, + 'stackSubseq': '└[{{location}}] \n\t Called from line {{line}} in {{func}}()\n', + 'stackTop': '┌[{{location}}] \n\t Error at line {{line}} in {{func}}()\n', + 'syntax': { + 'badReturnOrYield': '\nSyntax Error - return lies outside of a function. Make sure you’re not missing any brackets, so that return lies inside a function.\n\n+ More info: {{url}}', + 'invalidToken': '\nSyntax Error - Found a symbol that JavaScript doesn\'t recognize or didn\'t expect at it\'s place.\n\n+ More info: {{url}}', + 'missingInitializer': '\nSyntax Error - A const variable is declared but not initialized. In JavaScript, an initializer for a const is required. A value must be specified in the same statement in which the variable is declared. Check the line number in the error and assign the const variable a value.\n\n+ More info: {{url}}', + 'redeclaredVariable': '\nSyntax Error - "{{symbol}}" is being redeclared. JavaScript doesn\'t allow declaring a variable more than once. Check the line number in error for redeclaration of the variable.\n\n+ More info: {{url}}', + 'unexpectedToken': '\nSyntax Error - Symbol present at a place that wasn\'t expected.\nUsually this is due to a typo. Check the line number in the error for anything missing/extra.\n\n+ More info: {{url}}' + }, + 'type': { + 'constAssign': '\n{{location}} A const variable is being re-assigned. In javascript, re-assigning a value to a constant is not allowed. If you want to re-assign new values to a variable, make sure it is declared as var or let.\n\n+ More info: {{url}}', + 'notfunc': '\n{{location}} "{{symbol}}" could not be called as a function.\nCheck the spelling, letter-casing (JavaScript is case-sensitive) and its type.\n\n+ More info: {{url}}', + 'notfuncObj': '\n{{location}} "{{symbol}}" could not be called as a function.\nVerify whether "{{obj}}" has "{{symbol}}" in it and check the spelling, letter-casing (JavaScript is case-sensitive) and its type.\n\n+ More info: {{url}}', + 'readFromNull': '\n{{location}} The property of null can\'t be read. In javascript the value null indicates that an object has no value.\n\n+ More info: {{url}}', + 'readFromUndefined': '\n{{location}} Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.\n\n + More info: {{url}}' + } + }, + 'libraryError': '{{location}} An error with message "{{error}}" occurred inside the p5js library when {{func}} was called. If not stated otherwise, it might be an issue with the arguments passed to {{func}}.', + 'location': '[{{file}}, line {{line}}]', + 'misspelling': '{{location}} It seems that you may have accidentally written "{{name}}" instead of "{{actualName}}". Please correct it to {{actualName}} if you wish to use the {{type}} from p5.js.', + 'misspelling_plural': '{{location}} It seems that you may have accidentally written "{{name}}".\nYou may have meant one of the following: \n{{suggestions}}', + 'misusedTopLevel': 'Did you just try to use p5.js\'s {{symbolName}} {{symbolType}}? If so, you may want to move it into your sketch\'s setup() function.\n\n+ More info: {{url}}', + 'positions': { + 'p_1': 'first', + 'p_10': 'tenth', + 'p_11': 'eleventh', + 'p_12': 'twelfth', + 'p_2': 'second', + 'p_3': 'third', + 'p_4': 'fourth', + 'p_5': 'fifth', + 'p_6': 'sixth', + 'p_7': 'seventh', + 'p_8': 'eighth', + 'p_9': 'ninth' + }, + 'pre': '\n🌸 p5.js says: {{message}}', + 'sketchReaderErrors': { + 'reservedConst': 'you have used a p5.js reserved variable "{{symbol}}" make sure you change the variable name to something else.\n\n+ More info: {{url}}', + 'reservedFunc': 'you have used a p5.js reserved function "{{symbol}}" make sure you change the function name to something else.\n\n+ More info: {{url}}' + }, + 'welcome': 'Welcome! This is your friendly debugger. To turn me off, switch to using p5.min.js.', + 'wrongPreload': '{{location}} An error with message "{{error}}" occurred inside the p5js library when "{{func}}" was called. If not stated otherwise, it might be due to "{{func}}" being called from preload. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function.' + } + } + }, + { + } + ], + 349: [ + function (_dereq_, module, exports) { + 'use strict'; + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports.languages = exports.default = void 0; + var _translation = _interopRequireDefault(_dereq_('./en/translation')); + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: + obj + }; + } // Only one language is imported above. This is intentional as other languages + // will be hosted online and then downloaded whenever needed + /** + * Here, we define a default/fallback language which we can use without internet. + * You won't have to change this when adding a new language. + * + * `translation` is the namespace we are using for our initial set of strings + */ + + var _default = { + en: { + translation: _translation.default + } + }; + /** + * This is a list of languages that we have added so far. + * If you have just added a new language (yay!), add its key to the list below + * (`en` is english, `es` es español). Also add its export to + * dev.js, which is another file in this folder. + */ + exports.default = _default; + var languages = [ + 'en', + 'es', + 'ko' + ]; + exports.languages = languages; + }, + { + './en/translation': 348 + } + ] + }, { + }, [ + 273 + ]) (273) +}); -- cgit v1.2.3-70-g09d2