p5.sound is on GitHub. + * Download the latest version + * here.
+ * + * @module p5.sound + * @submodule p5.sound + * @for p5.sound + * @main + */ + +/** + * p5.sound + * https://p5js.org/reference/#/libraries/p5.sound + * + * From the Processing Foundation and contributors + * https://github.com/processing/p5.js-sound/graphs/contributors + * + * MIT License (MIT) + * https://github.com/processing/p5.js-sound/blob/master/LICENSE + * + * Some of the many audio libraries & resources that inspire p5.sound: + * - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js + * - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/ + * - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0 + * - wavesurfer.js https://github.com/katspaugh/wavesurfer.js + * - Web Audio Components by Jordan Santell https://github.com/web-audio-components + * - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound + * + * Web Audio API: http://w3.org/TR/webaudio/ + */ + + (function(modules) { + var installedModules = {}; + function __webpack_require__(moduleId) { + if(installedModules[moduleId]) { + return installedModules[moduleId].exports; + } + var module = installedModules[moduleId] = { + i: moduleId, + l: false, + exports: {} + }; + modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + module.l = true; + return module.exports; + } + __webpack_require__.m = modules; + __webpack_require__.c = installedModules; + __webpack_require__.d = function(exports, name, getter) { + if(!__webpack_require__.o(exports, name)) { + Object.defineProperty(exports, name, { enumerable: true, get: getter }); + } + }; + __webpack_require__.r = function(exports) { + if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { + Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); + } + Object.defineProperty(exports, '__esModule', { value: true }); + }; + __webpack_require__.t = function(value, mode) { + if(mode & 1) value = __webpack_require__(value); + if(mode & 8) return value; + if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; + var ns = Object.create(null); + __webpack_require__.r(ns); + Object.defineProperty(ns, 'default', { enumerable: true, value: value }); + if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); + return ns; + }; + __webpack_require__.n = function(module) { + var getter = module && module.__esModule ? + function getDefault() { return module['default']; } : + function getModuleExports() { return module; }; + __webpack_require__.d(getter, 'a', getter); + return getter; + }; + __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; + __webpack_require__.p = ""; + return __webpack_require__(__webpack_require__.s = 40); + }) + ([ + (function(module, exports, __webpack_require__) { + +var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = (function(){"use strict";function a(t,e){this.isUndef(t)||1===t?this.input=this.context.createGain():1Some browsers require users to startAudioContext + * with a user gesture, such as touchStarted in the example below.
+ * + * @for p5 + * @method getAudioContext + * @return {Object} AudioContext for this sketch + * @example + *
+ * function draw() {
+ * background(255);
+ * textAlign(CENTER);
+ *
+ * if (getAudioContext().state !== 'running') {
+ * text('click to start audio', width/2, height/2);
+ * } else {
+ * text('audio is enabled', width/2, height/2);
+ * }
+ * }
+ *
+ * function touchStarted() {
+ * if (getAudioContext().state !== 'running') {
+ * getAudioContext().resume();
+ * }
+ * var synth = new p5.MonoSynth();
+ * synth.play('A4', 0.5, 0, 0.2);
+ * }
+ *
+ * It is not only a good practice to give users control over starting + * audio. This policy is enforced by many web browsers, including iOS and + * Google Chrome, which create the Web Audio API's + * Audio Context + * in a suspended state.
+ * + *In these browser-specific policies, sound will not play until a user
+ * interaction event (i.e. mousePressed()) explicitly resumes
+ * the AudioContext, or starts an audio node. This can be accomplished by
+ * calling start() on a p5.Oscillator,
+ * play() on a p5.SoundFile, or simply
+ * userStartAudio().
userStartAudio() starts the AudioContext on a user
+ * gesture. The default behavior will enable audio on any
+ * mouseUp or touchEnd event. It can also be placed in a specific
+ * interaction function, such as mousePressed() as in the
+ * example below. This method utilizes
+ * StartAudioContext
+ * , a library by Yotam Mann (MIT Licence, 2016).
+ * function setup() {
+ * // mimics the autoplay policy
+ * getAudioContext().suspend();
+ *
+ * let mySynth = new p5.MonoSynth();
+ *
+ * // This won't play until the context has resumed
+ * mySynth.play('A6');
+ * }
+ * function draw() {
+ * background(220);
+ * textAlign(CENTER, CENTER);
+ * text(getAudioContext().state, width/2, height/2);
+ * }
+ * function mousePressed() {
+ * userStartAudio();
+ * }
+ * rampTime parameter. For more
+ * complex fades, see the Envelope class.
+ *
+ * Alternately, you can pass in a signal source such as an
+ * oscillator to modulate the amplitude with an audio signal.
+ *
+ * How This Works: When you load the p5.sound module, it + * creates a single instance of p5sound. All sound objects in this + * module output to p5sound before reaching your computer's output. + * So if you change the amplitude of p5sound, it impacts all of the + * sound in this module.
+ * + *If no value is provided, returns a Web Audio API Gain Node
+ * + * @method outputVolume + * @param {Number|Object} volume Volume (amplitude) between 0.0 + * and 1.0 or modulating signal/oscillator + * @param {Number} [rampTime] Fade for t seconds + * @param {Number} [timeFromNow] Schedule this event to happen at + * t seconds in the future + */ + + +p5.prototype.outputVolume = function (vol) { + var rampTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var tFromNow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; + + if (typeof vol === 'number') { + var now = p5sound.audiocontext.currentTime; + var currentVol = p5sound.output.gain.value; + p5sound.output.gain.cancelScheduledValues(now + tFromNow); + p5sound.output.gain.linearRampToValueAtTime(currentVol, now + tFromNow); + p5sound.output.gain.linearRampToValueAtTime(vol, now + tFromNow + rampTime); + } else if (vol) { + vol.connect(p5sound.output.gain); + } else { + return p5sound.output.gain; + } +}; +/** + * `p5.soundOut` is the p5.sound final output bus. It sends output to + * the destination of this window's web audio context. It contains + * Web Audio API nodes including a dyanmicsCompressor (.limiter),
+ * and Gain Nodes for .input and .output.
+ *
+ * @property {Object} soundOut
+ */
+
+
+p5.prototype.soundOut = p5.soundOut = p5sound;
+
+p5.soundOut._silentNode = p5sound.audiocontext.createGain();
+p5.soundOut._silentNode.gain.value = 0;
+
+p5.soundOut._silentNode.connect(p5sound.audiocontext.destination);
+
+ var main = (p5sound);
+var processorNames = __webpack_require__(5);
+var processorNames_default = __webpack_require__.n(processorNames);
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+
+
+/**
+ * @for p5
+ */
+
+/**
+ * Returns a number representing the sample rate, in samples per second,
+ * of all sound objects in this audio context. It is determined by the
+ * sampling rate of your operating system's sound card, and it is not
+ * currently possile to change.
+ * It is often 44100, or twice the range of human hearing.
+ *
+ * @method sampleRate
+ * @return {Number} samplerate samples per second
+ */
+
+function sampleRate() {
+ return main.audiocontext.sampleRate;
+}
+/**
+ * Returns the closest MIDI note value for
+ * a given frequency.
+ *
+ * @method freqToMidi
+ * @param {Number} frequency A freqeuncy, for example, the "A"
+ * above Middle C is 440Hz
+ * @return {Number} MIDI note value
+ */
+
+
+function freqToMidi(f) {
+ var mathlog2 = Math.log(f / 440) / Math.log(2);
+ var m = Math.round(12 * mathlog2) + 69;
+ return m;
+}
+/**
+ * Returns the frequency value of a MIDI note value.
+ * General MIDI treats notes as integers where middle C
+ * is 60, C# is 61, D is 62 etc. Useful for generating
+ * musical frequencies with oscillators.
+ *
+ * @method midiToFreq
+ * @param {Number} midiNote The number of a MIDI note
+ * @return {Number} Frequency value of the given MIDI note
+ * @example
+ *
+ * let midiNotes = [60, 64, 67, 72];
+ * let noteIndex = 0;
+ * let midiVal, freq;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(startSound);
+ * osc = new p5.TriOsc();
+ * env = new p5.Envelope();
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * text('tap to play', 10, 20);
+ * if (midiVal) {
+ * text('MIDI: ' + midiVal, 10, 40);
+ * text('Freq: ' + freq, 10, 60);
+ * }
+ * }
+ *
+ * function startSound() {
+ * // see also: userStartAudio();
+ * osc.start();
+ *
+ * midiVal = midiNotes[noteIndex % midiNotes.length];
+ * freq = midiToFreq(midiVal);
+ * osc.freq(freq);
+ * env.ramp(osc, 0, 1.0, 0);
+ *
+ * noteIndex++;
+ * }
+ *
+ * function preload() {
+ * // set the global sound formats
+ * soundFormats('mp3', 'ogg');
+ *
+ * // load either beatbox.mp3, or .ogg, depending on browser
+ * mySound = loadSound('assets/beatbox.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * background(220);
+ * text('sound loaded! tap to play', 10, 20, width - 20);
+ * cnv.mousePressed(function() {
+ * mySound.play();
+ * });
+ * }
+ * SoundFile object with a path to a file.
+ * + *The p5.SoundFile may not be available immediately because + * it loads the file information asynchronously.
+ * + *To do something with the sound as soon as it loads + * pass the name of a function as the second parameter.
+ * + *Only one file path is required. However, audio file formats + * (i.e. mp3, ogg, wav and m4a/aac) are not supported by all + * web browsers. If you want to ensure compatability, instead of a single + * file path, you may include an Array of filepaths, and the browser will + * choose a format that works.
+ * + * @class p5.SoundFile + * @constructor + * @param {String|Array} path path to a sound file (String). Optionally, + * you may include multiple file formats in + * an array. Alternately, accepts an object + * from the HTML5 File API, or a p5.File. + * @param {Function} [successCallback] Name of a function to call once file loads + * @param {Function} [errorCallback] Name of a function to call if file fails to + * load. This function will receive an error or + * XMLHttpRequest object with information + * about what went wrong. + * @param {Function} [whileLoadingCallback] Name of a function to call while file + * is loading. That function will + * receive progress of the request to + * load the sound file + * (between 0 and 1) as its first + * parameter. This progress + * does not account for the additional + * time needed to decode the audio data. + * + * @example + *
+ * let mySound;
+ * function preload() {
+ * soundFormats('mp3', 'ogg');
+ * mySound = loadSound('assets/doorbell');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * text('tap here to play', 10, 20);
+ * }
+ *
+ * function canvasPressed() {
+ * // playing a sound file on a user gesture
+ * // is equivalent to `userStartAudio()`
+ * mySound.play();
+ * }
+ * restart and
+ * sustain. Play Mode determines what happens to a
+ * p5.SoundFile if it is triggered while in the middle of playback.
+ * In sustain mode, playback will continue simultaneous to the
+ * new playback. In restart mode, play() will stop playback
+ * and start over. With untilDone, a sound will play only if it's
+ * not already playing. Sustain is the default mode.
+ *
+ * @method playMode
+ * @for p5.SoundFile
+ * @param {String} str 'restart' or 'sustain' or 'untilDone'
+ * @example
+ *
+ * let mySound;
+ * function preload(){
+ * mySound = loadSound('assets/Damscray_DancingTiger.mp3');
+ * }
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * noFill();
+ * rect(0, height/2, width - 1, height/2 - 1);
+ * rect(0, 0, width - 1, height/2);
+ * textAlign(CENTER, CENTER);
+ * fill(20);
+ * text('restart', width/2, 1 * height/4);
+ * text('sustain', width/2, 3 * height/4);
+ * }
+ * function canvasPressed() {
+ * if (mouseX < height/2) {
+ * mySound.playMode('restart');
+ * } else {
+ * mySound.playMode('sustain');
+ * }
+ * mySound.play();
+ * }
+ *
+ *
+ * let soundFile;
+ * function preload() {
+ * soundFormats('ogg', 'mp3');
+ * soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');
+ * }
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * text('tap to play, release to pause', 10, 20, width - 20);
+ * }
+ * function canvasPressed() {
+ * soundFile.loop();
+ * background(0, 200, 50);
+ * }
+ * function mouseReleased() {
+ * soundFile.pause();
+ * background(220);
+ * }
+ *
+ *
+ * let soundFile;
+ * let loopStart = 0.5;
+ * let loopDuration = 0.2;
+ * function preload() {
+ * soundFormats('ogg', 'mp3');
+ * soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');
+ * }
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * text('tap to play, release to pause', 10, 20, width - 20);
+ * }
+ * function canvasPressed() {
+ * soundFile.loop();
+ * background(0, 200, 50);
+ * }
+ * function mouseReleased() {
+ * soundFile.pause();
+ * background(220);
+ * }
+ *
+ *
+ * let ballX = 0;
+ * let soundFile;
+ *
+ * function preload() {
+ * soundFormats('ogg', 'mp3');
+ * soundFile = loadSound('assets/beatbox.mp3');
+ * }
+ *
+ * function draw() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * ballX = constrain(mouseX, 0, width);
+ * ellipse(ballX, height/2, 20, 20);
+ * }
+ *
+ * function canvasPressed(){
+ * // map the ball's x location to a panning degree
+ * // between -1.0 (left) and 1.0 (right)
+ * let panning = map(ballX, 0., width,-1.0, 1.0);
+ * soundFile.pan(panning);
+ * soundFile.play();
+ * }
+ *
+ * let mySound;
+ *
+ * function preload() {
+ * mySound = loadSound('assets/Damscray_DancingTiger.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * }
+ * function canvasPressed() {
+ * mySound.loop();
+ * }
+ * function mouseReleased() {
+ * mySound.pause();
+ * }
+ * function draw() {
+ * background(220);
+ *
+ * // Set the rate to a range between 0.1 and 4
+ * // Changing the rate also alters the pitch
+ * let playbackRate = map(mouseY, 0.1, height, 2, 0);
+ * playbackRate = constrain(playbackRate, 0.01, 4);
+ * mySound.rate(playbackRate);
+ *
+ * line(0, mouseY, width, mouseY);
+ * text('rate: ' + round(playbackRate * 100) + '%', 10, 20);
+ * }
+ *
+ *
+ * rampTime parameter. For more
+ * complex fades, see the Envelope class.
+ *
+ * Alternately, you can pass in a signal source such as an
+ * oscillator to modulate the amplitude with an audio signal.
+ *
+ * @method setVolume
+ * @for p5.SoundFile
+ * @param {Number|Object} volume Volume (amplitude) between 0.0
+ * and 1.0 or modulating signal/oscillator
+ * @param {Number} [rampTime] Fade for t seconds
+ * @param {Number} [timeFromNow] Schedule this event to happen at
+ * t seconds in the future
+ */
+
+ }, {
+ key: "setVolume",
+ value: function setVolume(vol, _rampTime, _tFromNow) {
+ if (typeof vol === 'number') {
+ var rampTime = _rampTime || 0;
+ var tFromNow = _tFromNow || 0;
+ var now = main.audiocontext.currentTime;
+ var currentVol = this.output.gain.value;
+ this.output.gain.cancelScheduledValues(now + tFromNow);
+ this.output.gain.linearRampToValueAtTime(currentVol, now + tFromNow);
+ this.output.gain.linearRampToValueAtTime(vol, now + tFromNow + rampTime);
+ } else if (vol) {
+ vol.connect(this.output.gain);
+ } else {
+ return this.output.gain;
+ }
+ }
+ /**
+ * Returns the duration of a sound file in seconds.
+ *
+ * @method duration
+ * @for p5.SoundFile
+ * @return {Number} The duration of the soundFile in seconds.
+ */
+
+ }, {
+ key: "duration",
+ value: function duration() {
+ if (this.buffer) {
+ return this.buffer.duration;
+ } else {
+ return 0;
+ }
+ }
+ /**
+ * Return the current position of the p5.SoundFile playhead, in seconds.
+ * Time is relative to the normal buffer direction, so if `reverseBuffer`
+ * has been called, currentTime will count backwards.
+ *
+ * @method currentTime
+ * @for p5.SoundFile
+ * @return {Number} currentTime of the soundFile in seconds.
+ */
+
+ }, {
+ key: "currentTime",
+ value: function currentTime() {
+ return this.reversed ? Math.abs(this._lastPos - this.buffer.length) / soundfile_ac.sampleRate : this._lastPos / soundfile_ac.sampleRate;
+ }
+ /**
+ * Move the playhead of a soundfile that is currently playing to a
+ * new position and a new duration, in seconds.
+ * If none are given, will reset the file to play entire duration
+ * from start to finish. To set the position of a soundfile that is
+ * not currently playing, use the `play` or `loop` methods.
+ *
+ * @method jump
+ * @for p5.SoundFile
+ * @param {Number} cueTime cueTime of the soundFile in seconds.
+ * @param {Number} duration duration in seconds.
+ */
+
+ }, {
+ key: "jump",
+ value: function jump(cueTime, duration) {
+ if (cueTime < 0 || cueTime > this.buffer.duration) {
+ throw 'jump time out of range';
+ }
+
+ if (duration > this.buffer.duration - cueTime) {
+ throw 'end time out of range';
+ }
+
+ var cTime = cueTime || 0;
+ var dur = duration || undefined;
+
+ if (this.isPlaying()) {
+ this.stop(0);
+ this.play(0, this.playbackRate, this.output.gain.value, cTime, dur);
+ }
+ }
+ /**
+ * Return the number of channels in a sound file.
+ * For example, Mono = 1, Stereo = 2.
+ *
+ * @method channels
+ * @for p5.SoundFile
+ * @return {Number} [channels]
+ */
+
+ }, {
+ key: "channels",
+ value: function channels() {
+ return this.buffer.numberOfChannels;
+ }
+ /**
+ * Return the sample rate of the sound file.
+ *
+ * @method sampleRate
+ * @for p5.SoundFile
+ * @return {Number} [sampleRate]
+ */
+
+ }, {
+ key: "sampleRate",
+ value: function sampleRate() {
+ return this.buffer.sampleRate;
+ }
+ /**
+ * Return the number of samples in a sound file.
+ * Equal to sampleRate * duration.
+ *
+ * @method frames
+ * @for p5.SoundFile
+ * @return {Number} [sampleCount]
+ */
+
+ }, {
+ key: "frames",
+ value: function frames() {
+ return this.buffer.length;
+ }
+ /**
+ * Returns an array of amplitude peaks in a p5.SoundFile that can be
+ * used to draw a static waveform. Scans through the p5.SoundFile's
+ * audio buffer to find the greatest amplitudes. Accepts one
+ * parameter, 'length', which determines size of the array.
+ * Larger arrays result in more precise waveform visualizations.
+ *
+ * Inspired by Wavesurfer.js.
+ *
+ * @method getPeaks
+ * @for p5.SoundFile
+ * @params {Number} [length] length is the size of the returned array.
+ * Larger length results in more precision.
+ * Defaults to 5*width of the browser window.
+ * @returns {Float32Array} Array of peaks.
+ */
+
+ }, {
+ key: "getPeaks",
+ value: function getPeaks(length) {
+ if (this.buffer) {
+ if (!length) {
+ length = window.width * 5;
+ }
+
+ if (this.buffer) {
+ var buffer = this.buffer;
+ var sampleSize = buffer.length / length;
+ var sampleStep = ~~(sampleSize / 10) || 1;
+ var channels = buffer.numberOfChannels;
+ var peaks = new Float32Array(Math.round(length));
+
+ for (var c = 0; c < channels; c++) {
+ var chan = buffer.getChannelData(c);
+
+ for (var i = 0; i < length; i++) {
+ var start = ~~(i * sampleSize);
+ var end = ~~(start + sampleSize);
+ var max = 0;
+
+ for (var j = start; j < end; j += sampleStep) {
+ var value = chan[j];
+
+ if (value > max) {
+ max = value;
+ } else if (-value > max) {
+ max = value;
+ }
+ }
+
+ if (c === 0 || Math.abs(max) > peaks[i]) {
+ peaks[i] = max;
+ }
+ }
+ }
+
+ return peaks;
+ }
+ } else {
+ throw 'Cannot load peaks yet, buffer is not loaded';
+ }
+ }
+ /**
+ * Reverses the p5.SoundFile's buffer source.
+ * Playback must be handled separately (see example).
+ *
+ * @method reverseBuffer
+ * @for p5.SoundFile
+ * @example
+ *
+ * let drum;
+ * function preload() {
+ * drum = loadSound('assets/drum.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * text('tap to play', 20, 20);
+ * }
+ *
+ * function canvasPressed() {
+ * drum.stop();
+ * drum.reverseBuffer();
+ * drum.play();
+ * }
+ *
+ *
+ * let mySound;
+ * function preload() {
+ * mySound = loadSound('assets/Damscray_DancingTiger.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * text('tap to play', 10, 20);
+ *
+ * // schedule calls to changeText
+ * mySound.addCue(0, changeText, "hello" );
+ * mySound.addCue(0.5, changeText, "hello," );
+ * mySound.addCue(1, changeText, "hello, p5!");
+ * mySound.addCue(1.5, changeText, "hello, p5!!");
+ * mySound.addCue(2, changeText, "hello, p5!!!!!");
+ * }
+ *
+ * function changeText(val) {
+ * background(220);
+ * text(val, 10, 20);
+ * }
+ *
+ * function canvasPressed() {
+ * mySound.play();
+ * }
+ *
+ * let mySound;
+ * function preload() {
+ * mySound = loadSound('assets/doorbell.mp3');
+ * }
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * text('tap to download', 10, 20);
+ * }
+ *
+ * function canvasPressed() {
+ * mySound.save('my cool filename');
+ * }
+ *
+ * function preload() {
+ * mySound = loadSound('assets/doorbell.mp3');
+ * }
+ *
+ * function setup() {
+ * noCanvas();
+ * let soundBlob = mySound.getBlob();
+ *
+ * // Now we can send the blob to a server...
+ * let serverUrl = 'https://jsonplaceholder.typicode.com/posts';
+ * let httpRequestOptions = {
+ * method: 'POST',
+ * body: new FormData().append('soundBlob', soundBlob),
+ * headers: new Headers({
+ * 'Content-Type': 'multipart/form-data'
+ * })
+ * };
+ * httpDo(serverUrl, httpRequestOptions);
+ *
+ * // We can also create an `ObjectURL` pointing to the Blob
+ * let blobUrl = URL.createObjectURL(soundBlob);
+ *
+ * // The `
+ * let mySound;
+ * function preload() {
+ * soundFormats('mp3', 'ogg');
+ * mySound = loadSound('assets/doorbell');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * text('tap here to play', 10, 20);
+ * }
+ *
+ * function canvasPressed() {
+ * // playing a sound file on a user gesture
+ * // is equivalent to `userStartAudio()`
+ * mySound.play();
+ * }
+ *
+ * let sound, amplitude;
+ *
+ * function preload(){
+ * sound = loadSound('assets/beat.mp3');
+ * }
+ * function setup() {
+ * let cnv = createCanvas(100,100);
+ * cnv.mouseClicked(togglePlay);
+ * amplitude = new p5.Amplitude();
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * text('tap to play', 20, 20);
+ *
+ * let level = amplitude.getLevel();
+ * let size = map(level, 0, 1, 0, 200);
+ * ellipse(width/2, height/2, size, size);
+ * }
+ *
+ * function togglePlay() {
+ * if (sound.isPlaying() ){
+ * sound.pause();
+ * } else {
+ * sound.loop();
+ * amplitude = new p5.Amplitude();
+ * amplitude.setInput(sound);
+ * }
+ * }
+ *
+ *
+ * function preload(){
+ * sound1 = loadSound('assets/beat.mp3');
+ * sound2 = loadSound('assets/drum.mp3');
+ * }
+ * function setup(){
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseClicked(toggleSound);
+ *
+ * amplitude = new p5.Amplitude();
+ * amplitude.setInput(sound2);
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * text('tap to play', 20, 20);
+ *
+ * let level = amplitude.getLevel();
+ * let size = map(level, 0, 1, 0, 200);
+ * ellipse(width/2, height/2, size, size);
+ * }
+ *
+ * function toggleSound(){
+ * if (sound1.isPlaying() && sound2.isPlaying()) {
+ * sound1.stop();
+ * sound2.stop();
+ * } else {
+ * sound1.play();
+ * sound2.play();
+ * }
+ * }
+ *
+ * function preload(){
+ * sound = loadSound('assets/beat.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mouseClicked(toggleSound);
+ * amplitude = new p5.Amplitude();
+ * }
+ *
+ * function draw() {
+ * background(220, 150);
+ * textAlign(CENTER);
+ * text('tap to play', width/2, 20);
+ *
+ * let level = amplitude.getLevel();
+ * let size = map(level, 0, 1, 0, 200);
+ * ellipse(width/2, height/2, size, size);
+ * }
+ *
+ * function toggleSound(){
+ * if (sound.isPlaying()) {
+ * sound.stop();
+ * } else {
+ * sound.play();
+ * }
+ * }
+ * FFT (Fast Fourier Transform) is an analysis algorithm that + * isolates individual + * + * audio frequencies within a waveform.
+ * + *Once instantiated, a p5.FFT object can return an array based on
+ * two types of analyses:
• FFT.waveform() computes
+ * amplitude values along the time domain. The array indices correspond
+ * to samples across a brief moment in time. Each value represents
+ * amplitude of the waveform at that sample of time.
+ * • FFT.analyze() computes amplitude values along the
+ * frequency domain. The array indices correspond to frequencies (i.e.
+ * pitches), from the lowest to the highest that humans can hear. Each
+ * value represents amplitude at that slice of the frequency spectrum.
+ * Use with getEnergy() to measure amplitude at specific
+ * frequencies, or within a range of frequencies.
FFT analyzes a very short snapshot of sound called a sample
+ * buffer. It returns an array of amplitude measurements, referred
+ * to as bins. The array is 1024 bins long by default.
+ * You can change the bin array length, but it must be a power of 2
+ * between 16 and 1024 in order for the FFT algorithm to function
+ * correctly. The actual size of the FFT buffer is twice the
+ * number of bins, so given a standard sample rate, the buffer is
+ * 2048/44100 seconds long.
+ * function preload(){
+ * sound = loadSound('assets/Damscray_DancingTiger.mp3');
+ * }
+ *
+ * function setup(){
+ * let cnv = createCanvas(100,100);
+ * cnv.mouseClicked(togglePlay);
+ * fft = new p5.FFT();
+ * sound.amp(0.2);
+ * }
+ *
+ * function draw(){
+ * background(220);
+ *
+ * let spectrum = fft.analyze();
+ * noStroke();
+ * fill(255, 0, 255);
+ * for (let i = 0; i< spectrum.length; i++){
+ * let x = map(i, 0, spectrum.length, 0, width);
+ * let h = -height + map(spectrum[i], 0, 255, height, 0);
+ * rect(x, height, width / spectrum.length, h )
+ * }
+ *
+ * let waveform = fft.waveform();
+ * noFill();
+ * beginShape();
+ * stroke(20);
+ * for (let i = 0; i < waveform.length; i++){
+ * let x = map(i, 0, waveform.length, 0, width);
+ * let y = map( waveform[i], -1, 1, 0, height);
+ * vertex(x,y);
+ * }
+ * endShape();
+ *
+ * text('tap to play', 20, 20);
+ * }
+ *
+ * function togglePlay() {
+ * if (sound.isPlaying()) {
+ * sound.pause();
+ * } else {
+ * sound.loop();
+ * }
+ * }
+ * getEnergy().
+ *
+ * @method analyze
+ * @for p5.FFT
+ * @param {Number} [bins] Must be a power of two between
+ * 16 and 1024. Defaults to 1024.
+ * @param {Number} [scale] If "dB," returns decibel
+ * float measurements between
+ * -140 and 0 (max).
+ * Otherwise returns integers from 0-255.
+ * @return {Array} spectrum Array of energy (amplitude/volume)
+ * values across the frequency spectrum.
+ * Lowest energy (silence) = 0, highest
+ * possible is 255.
+ * @example
+ *
+ * let osc, fft;
+ *
+ * function setup(){
+ * let cnv = createCanvas(100,100);
+ * cnv.mousePressed(startSound);
+ * osc = new p5.Oscillator();
+ * osc.amp(0);
+ * fft = new p5.FFT();
+ * }
+ *
+ * function draw(){
+ * background(220);
+ *
+ * let freq = map(mouseX, 0, windowWidth, 20, 10000);
+ * freq = constrain(freq, 1, 20000);
+ * osc.freq(freq);
+ *
+ * let spectrum = fft.analyze();
+ * noStroke();
+ * fill(255, 0, 255);
+ * for (let i = 0; i< spectrum.length; i++){
+ * let x = map(i, 0, spectrum.length, 0, width);
+ * let h = -height + map(spectrum[i], 0, 255, height, 0);
+ * rect(x, height, width / spectrum.length, h );
+ * }
+ *
+ * stroke(255);
+ * if (!osc.started) {
+ * text('tap here and drag to change frequency', 10, 20, width - 20);
+ * } else {
+ * text(round(freq)+'Hz', 10, 20);
+ * }
+ * }
+ *
+ * function startSound() {
+ * osc.start();
+ * osc.amp(0.5, 0.2);
+ * }
+ *
+ * function mouseReleased() {
+ * osc.amp(0, 0.2);
+ * }
+ *
+ * function setup(){
+ * cnv = createCanvas(100,100);
+ * cnv.mousePressed(userStartAudio);
+ * sound = new p5.AudioIn();
+ * sound.start();
+ * fft = new p5.FFT();
+ * sound.connect(fft);
+ *}
+ *
+ *function draw() {
+ * if (getAudioContext().state !== 'running') {
+ * background(220);
+ * text('tap here and enable mic to begin', 10, 20, width - 20);
+ * return;
+ * }
+ * let centroidplot = 0.0;
+ * let spectralCentroid = 0;
+ *
+ * background(0);
+ * stroke(0,255,0);
+ * let spectrum = fft.analyze();
+ * fill(0,255,0); // spectrum is green
+ *
+ * //draw the spectrum
+ * for (let i = 0; i < spectrum.length; i++){
+ * let x = map(log(i), 0, log(spectrum.length), 0, width);
+ * let h = map(spectrum[i], 0, 255, 0, height);
+ * let rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));
+ * rect(x, height, rectangle_width, -h )
+ * }
+ * let nyquist = 22050;
+ *
+ * // get the centroid
+ * spectralCentroid = fft.getCentroid();
+ *
+ * // the mean_freq_index calculation is for the display.
+ * let mean_freq_index = spectralCentroid/(nyquist/spectrum.length);
+ *
+ * centroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);
+ *
+ * stroke(255,0,0); // the line showing where the centroid is will be red
+ *
+ * rect(centroidplot, 0, width / spectrum.length, height)
+ * noStroke();
+ * fill(255,255,255); // text is white
+ * text('centroid: ', 10, 20);
+ * text(round(spectralCentroid)+' Hz', 10, 40);
+ *}
+ * Creates a signal that oscillates between -1.0 and 1.0. + * By default, the oscillation takes the form of a sinusoidal + * shape ('sine'). Additional types include 'triangle', + * 'sawtooth' and 'square'. The frequency defaults to + * 440 oscillations per second (440Hz, equal to the pitch of an + * 'A' note).
+ * + *Set the type of oscillation with setType(), or by instantiating a + * specific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc. + *
+ * + * @class p5.Oscillator + * @constructor + * @param {Number} [freq] frequency defaults to 440Hz + * @param {String} [type] type of oscillator. Options: + * 'sine' (default), 'triangle', + * 'sawtooth', 'square' + * @example + *
+ * let osc, playing, freq, amp;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playOscillator);
+ * osc = new p5.Oscillator('sine');
+ * }
+ *
+ * function draw() {
+ * background(220)
+ * freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500);
+ * amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);
+ *
+ * text('tap to play', 20, 20);
+ * text('freq: ' + freq, 20, 40);
+ * text('amp: ' + amp, 20, 60);
+ *
+ * if (playing) {
+ * // smooth the transitions by 0.1 seconds
+ * osc.freq(freq, 0.1);
+ * osc.amp(amp, 0.1);
+ * }
+ * }
+ *
+ * function playOscillator() {
+ * // starting an oscillator on a user gesture will enable audio
+ * // in browsers that have a strict autoplay policy.
+ * // See also: userStartAudio();
+ * osc.start();
+ * playing = true;
+ * }
+ *
+ * function mouseReleased() {
+ * // ramp amplitude to 0 over 0.5 seconds
+ * osc.amp(0, 0.5);
+ * playing = false;
+ * }
+ *
+ * let osc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playOscillator);
+ * osc = new p5.Oscillator(300);
+ * background(220);
+ * text('tap to play', 20, 20);
+ * }
+ *
+ * function playOscillator() {
+ * osc.start();
+ * osc.amp(0.5);
+ * // start at 700Hz
+ * osc.freq(700);
+ * // ramp to 60Hz over 0.7 seconds
+ * osc.freq(60, 0.7);
+ * osc.amp(0, 0.1, 0.7);
+ * }
+ * new p5.SinOsc().
+ * This creates a Sine Wave Oscillator and is
+ * equivalent to new p5.Oscillator('sine')
+ * or creating a p5.Oscillator and then calling
+ * its method setType('sine').
+ * See p5.Oscillator for methods.
+ *
+ * @class p5.SinOsc
+ * @constructor
+ * @extends p5.Oscillator
+ * @param {Number} [freq] Set the frequency
+ */
+
+
+var SinOsc =
+function (_Oscillator) {
+ _inherits(SinOsc, _Oscillator);
+
+ function SinOsc(freq) {
+ oscillator_classCallCheck(this, SinOsc);
+
+ return _possibleConstructorReturn(this, _getPrototypeOf(SinOsc).call(this, freq, 'sine'));
+ }
+
+ return SinOsc;
+}(oscillator_Oscillator);
+/**
+ * Constructor: new p5.TriOsc().
+ * This creates a Triangle Wave Oscillator and is
+ * equivalent to new p5.Oscillator('triangle')
+ * or creating a p5.Oscillator and then calling
+ * its method setType('triangle').
+ * See p5.Oscillator for methods.
+ *
+ * @class p5.TriOsc
+ * @constructor
+ * @extends p5.Oscillator
+ * @param {Number} [freq] Set the frequency
+ */
+
+
+var TriOsc =
+function (_Oscillator2) {
+ _inherits(TriOsc, _Oscillator2);
+
+ function TriOsc(freq) {
+ oscillator_classCallCheck(this, TriOsc);
+
+ return _possibleConstructorReturn(this, _getPrototypeOf(TriOsc).call(this, freq, 'triangle'));
+ }
+
+ return TriOsc;
+}(oscillator_Oscillator);
+/**
+ * Constructor: new p5.SawOsc().
+ * This creates a SawTooth Wave Oscillator and is
+ * equivalent to new p5.Oscillator('sawtooth')
+ * or creating a p5.Oscillator and then calling
+ * its method setType('sawtooth').
+ * See p5.Oscillator for methods.
+ *
+ * @class p5.SawOsc
+ * @constructor
+ * @extends p5.Oscillator
+ * @param {Number} [freq] Set the frequency
+ */
+
+
+var SawOsc =
+function (_Oscillator3) {
+ _inherits(SawOsc, _Oscillator3);
+
+ function SawOsc(freq) {
+ oscillator_classCallCheck(this, SawOsc);
+
+ return _possibleConstructorReturn(this, _getPrototypeOf(SawOsc).call(this, freq, 'sawtooth'));
+ }
+
+ return SawOsc;
+}(oscillator_Oscillator);
+/**
+ * Constructor: new p5.SqrOsc().
+ * This creates a Square Wave Oscillator and is
+ * equivalent to new p5.Oscillator('square')
+ * or creating a p5.Oscillator and then calling
+ * its method setType('square').
+ * See p5.Oscillator for methods.
+ *
+ * @class p5.SqrOsc
+ * @constructor
+ * @extends p5.Oscillator
+ * @param {Number} [freq] Set the frequency
+ */
+
+
+var SqrOsc =
+function (_Oscillator4) {
+ _inherits(SqrOsc, _Oscillator4);
+
+ function SqrOsc(freq) {
+ oscillator_classCallCheck(this, SqrOsc);
+
+ return _possibleConstructorReturn(this, _getPrototypeOf(SqrOsc).call(this, freq, 'square'));
+ }
+
+ return SqrOsc;
+}(oscillator_Oscillator);
+
+ var oscillator = (oscillator_Oscillator);
+
+var TimelineSignal = __webpack_require__(7);
+var TimelineSignal_default = __webpack_require__.n(TimelineSignal);
+
+
+
+
+
+
+/**
+ * Envelopes are pre-defined amplitude distribution over time.
+ * Typically, envelopes are used to control the output volume
+ * of an object, a series of fades referred to as Attack, Decay,
+ * Sustain and Release (
+ * ADSR
+ * ). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can
+ * control an Oscillator's frequency like this: osc.freq(env).
Use setRange to change the attack/release level.
+ * Use setADSR to change attackTime, decayTime, sustainPercent and releaseTime.
Use the play method to play the entire envelope,
+ * the ramp method for a pingable trigger,
+ * or triggerAttack/
+ * triggerRelease to trigger noteOn/noteOff.
+ * let t1 = 0.1; // attack time in seconds
+ * let l1 = 0.7; // attack level 0.0 to 1.0
+ * let t2 = 0.3; // decay time in seconds
+ * let l2 = 0.1; // decay level 0.0 to 1.0
+ *
+ * let env;
+ * let triOsc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * background(220);
+ * text('tap to play', 20, 20);
+ * cnv.mousePressed(playSound);
+ *
+ * env = new p5.Envelope(t1, l1, t2, l2);
+ * triOsc = new p5.Oscillator('triangle');
+ * }
+ *
+ * function playSound() {
+ * // starting the oscillator ensures that audio is enabled.
+ * triOsc.start();
+ * env.play(triOsc);
+ * }
+ *
+ * let attackTime;
+ * let l1 = 0.7; // attack level 0.0 to 1.0
+ * let t2 = 0.3; // decay time in seconds
+ * let l2 = 0.1; // decay level 0.0 to 1.0
+ * let l3 = 0.2; // release time in seconds
+ *
+ * let env, triOsc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSound);
+ *
+ * env = new p5.Envelope();
+ * triOsc = new p5.Oscillator('triangle');
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * text('tap here to play', 5, 20);
+ *
+ * attackTime = map(mouseX, 0, width, 0.0, 1.0);
+ * text('attack time: ' + attackTime, 5, height - 20);
+ * }
+ *
+ * // mouseClick triggers envelope if over canvas
+ * function playSound() {
+ * env.set(attackTime, l1, t2, l2, l3);
+ *
+ * triOsc.start();
+ * env.play(triOsc);
+ * }
+ * 
setRange),
+ * then decayLevel would increase proportionally, to become 0.5.
+ * @param {Number} [releaseTime] Time in seconds from now (defaults to 0)
+ * @example
+ *
+ * let attackLevel = 1.0;
+ * let releaseLevel = 0;
+ *
+ * let attackTime = 0.001;
+ * let decayTime = 0.2;
+ * let susPercent = 0.2;
+ * let releaseTime = 0.5;
+ *
+ * let env, triOsc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playEnv);
+ *
+ * env = new p5.Envelope();
+ * triOsc = new p5.Oscillator('triangle');
+ * triOsc.amp(env);
+ * triOsc.freq(220);
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * text('tap here to play', 5, 20);
+ * attackTime = map(mouseX, 0, width, 0, 1.0);
+ * text('attack time: ' + attackTime, 5, height - 40);
+ * }
+ *
+ * function playEnv() {
+ * triOsc.start();
+ * env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+ * env.play();
+ * }
+ *
+ * let attackLevel = 1.0;
+ * let releaseLevel = 0;
+ *
+ * let attackTime = 0.001;
+ * let decayTime = 0.2;
+ * let susPercent = 0.2;
+ * let releaseTime = 0.5;
+ *
+ * let env, triOsc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playEnv);
+ *
+ * env = new p5.Envelope();
+ * triOsc = new p5.Oscillator('triangle');
+ * triOsc.amp(env);
+ * triOsc.freq(220);
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * text('tap here to play', 5, 20);
+ * attackLevel = map(mouseY, height, 0, 0, 1.0);
+ * text('attack level: ' + attackLevel, 5, height - 20);
+ * }
+ *
+ * function playEnv() {
+ * triOsc.start();
+ * env.setRange(attackLevel, releaseLevel);
+ * env.play();
+ * }
+ * Play tells the envelope to start acting on a given input. + * If the input is a p5.sound object (i.e. AudioIn, Oscillator, + * SoundFile), then Envelope will control its output volume. + * Envelopes can also be used to control any + * Web Audio Audio Param.
+ * + * @method play + * @for p5.Envelope + * @param {Object} unit A p5.sound object or + * Web Audio Param. + * @param {Number} [startTime] time from now (in seconds) at which to play + * @param {Number} [sustainTime] time to sustain before releasing the envelope + * @example + *
+ * let attackLevel = 1.0;
+ * let releaseLevel = 0;
+ *
+ * let attackTime = 0.001;
+ * let decayTime = 0.2;
+ * let susPercent = 0.2;
+ * let releaseTime = 0.5;
+ *
+ * let env, triOsc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playEnv);
+ *
+ * env = new p5.Envelope();
+ * triOsc = new p5.Oscillator('triangle');
+ * triOsc.amp(env);
+ * triOsc.freq(220);
+ * triOsc.start();
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * text('tap here to play', 5, 20);
+ * attackTime = map(mouseX, 0, width, 0, 1.0);
+ * attackLevel = map(mouseY, height, 0, 0, 1.0);
+ * text('attack time: ' + attackTime, 5, height - 40);
+ * text('attack level: ' + attackLevel, 5, height - 20);
+ * }
+ *
+ * function playEnv() {
+ * // ensure that audio is enabled
+ * userStartAudio();
+ *
+ * env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+ * env.setRange(attackLevel, releaseLevel);
+ * env.play();
+ * }
+ *
+ * let attackTime = 0.001;
+ * let decayTime = 0.2;
+ * let susPercent = 0.3;
+ * let releaseTime = 0.4;
+ * let env, triOsc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * background(220);
+ * textAlign(CENTER);
+ * textSize(10);
+ * text('tap to triggerAttack', width/2, height/2);
+ *
+ * env = new p5.Envelope();
+ * env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+ * env.setRange(1.0, 0.0);
+ * triOsc = new p5.Oscillator('triangle');
+ * triOsc.freq(220);
+ *
+ * cnv.mousePressed(envAttack);
+ * }
+ *
+ * function envAttack() {
+ * background(0, 255, 255);
+ * text('release to release', width/2, height/2);
+ *
+ * // ensures audio is enabled. See also: `userStartAudio`
+ * triOsc.start();
+ *
+ * env.triggerAttack(triOsc);
+ * }
+ *
+ * function mouseReleased() {
+ * background(220);
+ * text('tap to triggerAttack', width/2, height/2);
+ *
+ * env.triggerRelease(triOsc);
+ * }
+ *
+ * let attackTime = 0.001;
+ * let decayTime = 0.2;
+ * let susPercent = 0.3;
+ * let releaseTime = 0.4;
+ * let env, triOsc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * background(220);
+ * textAlign(CENTER);
+ * textSize(10);
+ * text('tap to triggerAttack', width/2, height/2);
+ *
+ * env = new p5.Envelope();
+ * env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+ * env.setRange(1.0, 0.0);
+ * triOsc = new p5.Oscillator('triangle');
+ * triOsc.freq(220);
+ *
+ * cnv.mousePressed(envAttack);
+ * }
+ *
+ * function envAttack() {
+ * background(0, 255, 255);
+ * text('release to release', width/2, height/2);
+ *
+ * // ensures audio is enabled. See also: `userStartAudio`
+ * triOsc.start();
+ *
+ * env.triggerAttack(triOsc);
+ * }
+ *
+ * function mouseReleased() {
+ * background(220);
+ * text('tap to triggerAttack', width/2, height/2);
+ *
+ * env.triggerRelease(triOsc);
+ * }
+ * setADSR(attackTime, decayTime)
+ * as
+ * time constants for simple exponential ramps.
+ * If the value is higher than current value, it uses attackTime,
+ * while a decrease uses decayTime.
+ *
+ * @method ramp
+ * @for p5.Envelope
+ * @param {Object} unit p5.sound Object or Web Audio Param
+ * @param {Number} secondsFromNow When to trigger the ramp
+ * @param {Number} v Target value
+ * @param {Number} [v2] Second target value
+ * @example
+ *
+ * let env, osc, amp;
+ *
+ * let attackTime = 0.001;
+ * let decayTime = 0.2;
+ * let attackLevel = 1;
+ * let decayLevel = 0;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * fill(0,255,0);
+ * noStroke();
+ *
+ * env = new p5.Envelope();
+ * env.setADSR(attackTime, decayTime);
+ * osc = new p5.Oscillator();
+ * osc.amp(env);
+ * amp = new p5.Amplitude();
+ *
+ * cnv.mousePressed(triggerRamp);
+ * }
+ *
+ * function triggerRamp() {
+ * // ensures audio is enabled. See also: `userStartAudio`
+ * osc.start();
+ *
+ * env.ramp(osc, 0, attackLevel, decayLevel);
+ * }
+ *
+ * function draw() {
+ * background(20);
+ * text('tap to play', 10, 20);
+ * let h = map(amp.getLevel(), 0, 0.4, 0, height);;
+ * rect(0, height, width, -h);
+ * }
+ * p5.Oscillator for a full list of methods.
+ *
+ * @class p5.Pulse
+ * @extends p5.Oscillator
+ * @constructor
+ * @param {Number} [freq] Frequency in oscillations per second (Hz)
+ * @param {Number} [w] Width between the pulses (0 to 1.0,
+ * defaults to 0)
+ * @example
+ *
+ * let pulse;
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(startPulse);
+ * background(220);
+ *
+ * pulse = new p5.Pulse();
+ * pulse.amp(0.5);
+ * pulse.freq(220);
+ * }
+ * function startPulse() {
+ * pulse.start();
+ * pulse.amp(0.5, 0.02);
+ * }
+ * function mouseReleased() {
+ * pulse.amp(0, 0.2);
+ * }
+ * function draw() {
+ * background(220);
+ * text('tap to play', 5, 20, width - 20);
+ * let w = map(mouseX, 0, width, 0, 1);
+ * w = constrain(w, 0, 1);
+ * pulse.width(w);
+ * text('pulse width: ' + w, 5, height - 20);
+ * }
+ * Get audio from an input, i.e. your computer's microphone.
+ * + *Turn the mic on/off with the start() and stop() methods. When the mic + * is on, its volume can be measured with getLevel or by connecting an + * FFT object.
+ * + *If you want to hear the AudioIn, use the .connect() method. + * AudioIn does not connect to p5.sound output by default to prevent + * feedback.
+ * + *Note: This uses the getUserMedia/ + * Stream API, which is not supported by certain browsers. Access in Chrome browser + * is limited to localhost and https, but access over http may be limited.
+ * + * @class p5.AudioIn + * @constructor + * @param {Function} [errorCallback] A function to call if there is an error + * accessing the AudioIn. For example, + * Safari and iOS devices do not + * currently allow microphone access. + * @example + *
+ * let mic;
+ *
+ * function setup(){
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(userStartAudio);
+ * textAlign(CENTER);
+ * mic = new p5.AudioIn();
+ * mic.start();
+ * }
+ *
+ * function draw(){
+ * background(0);
+ * fill(255);
+ * text('tap to start', width/2, 20);
+ *
+ * micLevel = mic.getLevel();
+ * let y = height - micLevel * height;
+ * ellipse(width/2, y, 10, 10);
+ * }
+ * + * + * Certain browsers limit access to the user's microphone. For example, + * Chrome only allows access from localhost and over https. For this reason, + * you may want to include an errorCallback—a function that is called in case + * the browser won't provide mic access. + * + * @method start + * @for p5.AudioIn + * @param {Function} [successCallback] Name of a function to call on + * success. + * @param {Function} [errorCallback] Name of a function to call if + * there was an error. For example, + * some browsers do not support + * getUserMedia. + */ + + + audioin_createClass(AudioIn, [{ + key: "start", + value: function start(successCallback, errorCallback) { + var self = this; + + if (this.stream) { + this.stop(); + } + + + var audioSource = main.inputSources[self.currentSource]; + var constraints = { + audio: { + sampleRate: main.audiocontext.sampleRate, + echoCancellation: false + } + }; + + if (main.inputSources[this.currentSource]) { + constraints.audio.deviceId = audioSource.deviceId; + } + + window.navigator.mediaDevices.getUserMedia(constraints).then(function (stream) { + self.stream = stream; + self.enabled = true; + + self.mediaStream = main.audiocontext.createMediaStreamSource(stream); + self.mediaStream.connect(self.output); + + self.amplitude.setInput(self.output); + if (successCallback) successCallback(); + })["catch"](function (err) { + if (errorCallback) errorCallback(err);else console.error(err); + }); + } + /** + * Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel(). + * If re-starting, the user may be prompted for permission access. + * + * @method stop + * @for p5.AudioIn + */ + + }, { + key: "stop", + value: function stop() { + if (this.stream) { + this.stream.getTracks().forEach(function (track) { + track.stop(); + }); + this.mediaStream.disconnect(); + delete this.mediaStream; + delete this.stream; + } + } + /** + * Connect to an audio unit. If no parameter is provided, will + * connect to the main output (i.e. your speakers).
+ * + * @method connect + * @for p5.AudioIn + * @param {Object} [unit] An object that accepts audio input, + * such as an FFT + */ + + }, { + key: "connect", + value: function connect(unit) { + if (unit) { + if (unit.hasOwnProperty('input')) { + this.output.connect(unit.input); + } else if (unit.hasOwnProperty('analyser')) { + this.output.connect(unit.analyser); + } else { + this.output.connect(unit); + } + } else { + this.output.connect(main.input); + } + } + /** + * Disconnect the AudioIn from all audio units. For example, if + * connect() had been called, disconnect() will stop sending + * signal to your speakers.
+ * + * @method disconnect + * @for p5.AudioIn + */ + + }, { + key: "disconnect", + value: function disconnect() { + if (this.output) { + this.output.disconnect(); + + this.output.connect(this.amplitude.input); + } + } + /** + * Read the Amplitude (volume level) of an AudioIn. The AudioIn + * class contains its own instance of the Amplitude class to help + * make it easy to get a microphone's volume level. Accepts an + * optional smoothing value (0.0 < 1.0). NOTE: AudioIn must + * .start() before using .getLevel().
+ * + * @method getLevel + * @for p5.AudioIn + * @param {Number} [smoothing] Smoothing is 0.0 by default. + * Smooths values based on previous values. + * @return {Number} Volume level (between 0.0 and 1.0) + */ + + }, { + key: "getLevel", + value: function getLevel(smoothing) { + if (smoothing) { + this.amplitude.smoothing = smoothing; + } + + return this.amplitude.getLevel(); + } + /** + * Set amplitude (volume) of a mic input between 0 and 1.0.
+ * + * @method amp + * @for p5.AudioIn + * @param {Number} vol between 0 and 1.0 + * @param {Number} [time] ramp time (optional) + */ + + }, { + key: "amp", + value: function amp(vol, t) { + if (t) { + var rampTime = t || 0; + var currentVol = this.output.gain.value; + this.output.gain.cancelScheduledValues(main.audiocontext.currentTime); + this.output.gain.setValueAtTime(currentVol, main.audiocontext.currentTime); + this.output.gain.linearRampToValueAtTime(vol, rampTime + main.audiocontext.currentTime); + } else { + this.output.gain.cancelScheduledValues(main.audiocontext.currentTime); + this.output.gain.setValueAtTime(vol, main.audiocontext.currentTime); + } + } + /** + * Returns a list of available input sources. This is a wrapper + * for + * MediaDevices.enumerateDevices() - Web APIs | MDN + * and it returns a Promise. + * @method getSources + * @for p5.AudioIn + * @param {Function} [successCallback] This callback function handles the sources when they + * have been enumerated. The callback function + * receives the deviceList array as its only argument + * @param {Function} [errorCallback] This optional callback receives the error + * message as its argument. + * @returns {Promise} Returns a Promise that can be used in place of the callbacks, similar + * to the enumerateDevices() method + * @example + *
+ * let audioIn;
+ *
+ * function setup(){
+ * text('getting sources...', 0, 20);
+ * audioIn = new p5.AudioIn();
+ * audioIn.getSources(gotSources);
+ * }
+ *
+ * function gotSources(deviceList) {
+ * if (deviceList.length > 0) {
+ * //set the source to the first item in the deviceList array
+ * audioIn.setSource(0);
+ * let currentSource = deviceList[audioIn.currentSource];
+ * text('set source to: ' + currentSource.deviceId, 5, 20, width);
+ * }
+ * }
+ *
+ * let audioIn;
+ *
+ * function setup(){
+ * text('getting sources...', 0, 20);
+ * audioIn = new p5.AudioIn();
+ * audioIn.getSources(gotSources);
+ * }
+ *
+ * function gotSources(deviceList) {
+ * if (deviceList.length > 0) {
+ * //set the source to the first item in the deviceList array
+ * audioIn.setSource(0);
+ * let currentSource = deviceList[audioIn.currentSource];
+ * text('set source to: ' + currentSource.deviceId, 5, 20, width);
+ * }
+ * }
+ * + * This module handles the nodes and methods that are + * common and useful for current and future effects. + * + * + * This class is extended by p5.Distortion, + * p5.Compressor, + * p5.Delay, + * p5.Filter, + * p5.Reverb. + * + * @class p5.Effect + * @constructor + * + * @param {Object} [ac] Reference to the audio context of the p5 object + * @param {AudioNode} [input] Gain Node effect wrapper + * @param {AudioNode} [output] Gain Node effect wrapper + * @param {Object} [_drywet] Tone.JS CrossFade node (defaults to value: 1) + * @param {AudioNode} [wet] Effects that extend this class should connect + * to the wet signal to this gain node, so that dry and wet + * signals are mixed properly. + */ + +var effect_Effect = +function () { + function Effect() { + effect_classCallCheck(this, Effect); + + this.ac = main.audiocontext; + this.input = this.ac.createGain(); + this.output = this.ac.createGain(); + /** + * The p5.Effect class is built + * using Tone.js CrossFade + * @private + */ + + this._drywet = new CrossFade_default.a(1); + /** + * In classes that extend + * p5.Effect, connect effect nodes + * to the wet parameter + */ + + this.wet = this.ac.createGain(); + this.input.connect(this._drywet.a); + this.wet.connect(this._drywet.b); + + this._drywet.connect(this.output); + + this.connect(); + + main.soundArray.push(this); + } + /** + * Set the output volume of the filter. + * + * @method amp + * @for p5.Effect + * @param {Number} [vol] amplitude between 0 and 1.0 + * @param {Number} [rampTime] create a fade that lasts until rampTime + * @param {Number} [tFromNow] schedule this event to happen in tFromNow seconds + */ + + + effect_createClass(Effect, [{ + key: "amp", + value: function amp(vol) { + var rampTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var tFromNow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; + var now = main.audiocontext.currentTime; + var startTime = now + tFromNow; + var endTime = startTime + rampTime + 0.001; + var currentVol = this.output.gain.value; + this.output.gain.cancelScheduledValues(now); + this.output.gain.linearRampToValueAtTime(currentVol, startTime + 0.001); + this.output.gain.linearRampToValueAtTime(vol, endTime); + } + /** + * Link effects together in a chain + * Example usage: filter.chain(reverb, delay, panner); + * May be used with an open-ended number of arguments + * + * @method chain + * @for p5.Effect + * @param {Object} [arguments] Chain together multiple sound objects + */ + + }, { + key: "chain", + value: function chain() { + if (arguments.length > 0) { + this.connect(arguments[0]); + + for (var i = 1; i < arguments.length; i += 1) { + arguments[i - 1].connect(arguments[i]); + } + } + + return this; + } + /** + * Adjust the dry/wet value. + * + * @method drywet + * @for p5.Effect + * @param {Number} [fade] The desired drywet value (0 - 1.0) + */ + + }, { + key: "drywet", + value: function drywet(fade) { + if (typeof fade !== 'undefined') { + this._drywet.fade.value = fade; + } + + return this._drywet.fade.value; + } + /** + * Send output to a p5.js-sound, Web Audio Node, or use signal to + * control an AudioParam + * + * @method connect + * @for p5.Effect + * @param {Object} unit + */ + + }, { + key: "connect", + value: function connect(unit) { + var u = unit || p5.soundOut.input; + this.output.connect(u.input ? u.input : u); + } + /** + * Disconnect all output. + * @method disconnect + * @for p5.Effect + */ + + }, { + key: "disconnect", + value: function disconnect() { + if (this.output) { + this.output.disconnect(); + } + } + }, { + key: "dispose", + value: function dispose() { + var index = main.soundArray.indexOf(this); + main.soundArray.splice(index, 1); + + if (this.input) { + this.input.disconnect(); + delete this.input; + } + + if (this.output) { + this.output.disconnect(); + delete this.output; + } + + if (this._drywet) { + this._drywet.disconnect(); + + delete this._drywet; + } + + if (this.wet) { + this.wet.disconnect(); + delete this.wet; + } + + this.ac = undefined; + } + }]); + + return Effect; +}(); + + var effect = (effect_Effect); +function filter_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { filter_typeof = function _typeof(obj) { return typeof obj; }; } else { filter_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return filter_typeof(obj); } + +function filter_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function filter_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function filter_createClass(Constructor, protoProps, staticProps) { if (protoProps) filter_defineProperties(Constructor.prototype, protoProps); if (staticProps) filter_defineProperties(Constructor, staticProps); return Constructor; } + +function filter_possibleConstructorReturn(self, call) { if (call && (filter_typeof(call) === "object" || typeof call === "function")) { return call; } return filter_assertThisInitialized(self); } + +function filter_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); } + +function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = filter_getPrototypeOf(object); if (object === null) break; } return object; } + +function filter_getPrototypeOf(o) { filter_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return filter_getPrototypeOf(o); } + +function filter_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) filter_setPrototypeOf(subClass, superClass); } + +function filter_setPrototypeOf(o, p) { filter_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return filter_setPrototypeOf(o, p); } + + +/** + *
A p5.Filter uses a Web Audio Biquad Filter to filter + * the frequency response of an input source. Subclasses + * include:
+ *p5.LowPass:
+ * Allows frequencies below the cutoff frequency to pass through,
+ * and attenuates frequencies above the cutoff.+ *
p5.HighPass:
+ * The opposite of a lowpass filter. + *
p5.BandPass:
+ * Allows a range of frequencies to pass through and attenuates
+ * the frequencies below and above this frequency range.+ * + * The
.res() method controls either width of the
+ * bandpass, or resonance of the low/highpass cutoff frequency.
+ *
+ * This class extends p5.Effect.
+ * Methods amp(), chain(),
+ * drywet(), connect(), and
+ * disconnect() are available.
+ *
+ * @class p5.Filter
+ * @extends p5.Effect
+ * @constructor
+ * @param {String} [type] 'lowpass' (default), 'highpass', 'bandpass'
+ * @example
+ *
+ * let fft, noise, filter;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100,100);
+ * cnv.mousePressed(makeNoise);
+ * fill(255, 0, 255);
+ *
+ * filter = new p5.BandPass();
+ * noise = new p5.Noise();
+ * noise.disconnect();
+ * noise.connect(filter);
+ *
+ * fft = new p5.FFT();
+ * }
+ *
+ * function draw() {
+ * background(220);
+ *
+ * // set the BandPass frequency based on mouseX
+ * let freq = map(mouseX, 0, width, 20, 10000);
+ * freq = constrain(freq, 0, 22050);
+ * filter.freq(freq);
+ * // give the filter a narrow band (lower res = wider bandpass)
+ * filter.res(50);
+ *
+ * // draw filtered spectrum
+ * let spectrum = fft.analyze();
+ * noStroke();
+ * for (let i = 0; i < spectrum.length; i++) {
+ * let x = map(i, 0, spectrum.length, 0, width);
+ * let h = -height + map(spectrum[i], 0, 255, height, 0);
+ * rect(x, height, width/spectrum.length, h);
+ * }
+ * if (!noise.started) {
+ * text('tap here and drag to change frequency', 10, 20, width - 20);
+ * } else {
+ * text('Frequency: ' + round(freq)+'Hz', 20, 20, width - 20);
+ * }
+ * }
+ *
+ * function makeNoise() {
+ * // see also: `userStartAudio()`
+ * noise.start();
+ * noise.amp(0.5, 0.2);
+ * }
+ *
+ * function mouseReleased() {
+ * noise.amp(0, 0.2);
+ * }
+ *
+ * new p5.LowPass() Filter.
+ * This is the same as creating a p5.Filter and then calling
+ * its method setType('lowpass').
+ * See p5.Filter for methods.
+ *
+ * @class p5.LowPass
+ * @constructor
+ * @extends p5.Filter
+ */
+
+
+var LowPass =
+function (_Filter) {
+ filter_inherits(LowPass, _Filter);
+
+ function LowPass() {
+ filter_classCallCheck(this, LowPass);
+
+ return filter_possibleConstructorReturn(this, filter_getPrototypeOf(LowPass).call(this, 'lowpass'));
+ }
+
+ return LowPass;
+}(Filter);
+/**
+ * Constructor: new p5.HighPass() Filter.
+ * This is the same as creating a p5.Filter and then calling
+ * its method setType('highpass').
+ * See p5.Filter for methods.
+ *
+ * @class p5.HighPass
+ * @constructor
+ * @extends p5.Filter
+ */
+
+
+var HighPass =
+function (_Filter2) {
+ filter_inherits(HighPass, _Filter2);
+
+ function HighPass() {
+ filter_classCallCheck(this, HighPass);
+
+ return filter_possibleConstructorReturn(this, filter_getPrototypeOf(HighPass).call(this, 'highpass'));
+ }
+
+ return HighPass;
+}(Filter);
+/**
+ * Constructor: new p5.BandPass() Filter.
+ * This is the same as creating a p5.Filter and then calling
+ * its method setType('bandpass').
+ * See p5.Filter for methods.
+ *
+ * @class p5.BandPass
+ * @constructor
+ * @extends p5.Filter
+ */
+
+
+var BandPass =
+function (_Filter3) {
+ filter_inherits(BandPass, _Filter3);
+
+ function BandPass() {
+ filter_classCallCheck(this, BandPass);
+
+ return filter_possibleConstructorReturn(this, filter_getPrototypeOf(BandPass).call(this, 'bandpass'));
+ }
+
+ return BandPass;
+}(Filter);
+
+ var filter = (Filter);
+
+function eqFilter_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { eqFilter_typeof = function _typeof(obj) { return typeof obj; }; } else { eqFilter_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return eqFilter_typeof(obj); }
+
+function eqFilter_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function eqFilter_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function eqFilter_createClass(Constructor, protoProps, staticProps) { if (protoProps) eqFilter_defineProperties(Constructor.prototype, protoProps); if (staticProps) eqFilter_defineProperties(Constructor, staticProps); return Constructor; }
+
+function eqFilter_possibleConstructorReturn(self, call) { if (call && (eqFilter_typeof(call) === "object" || typeof call === "function")) { return call; } return eqFilter_assertThisInitialized(self); }
+
+function eqFilter_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function eqFilter_getPrototypeOf(o) { eqFilter_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return eqFilter_getPrototypeOf(o); }
+
+function eqFilter_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) eqFilter_setPrototypeOf(subClass, superClass); }
+
+function eqFilter_setPrototypeOf(o, p) { eqFilter_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return eqFilter_setPrototypeOf(o, p); }
+
+
+
+/**
+ * EQFilter extends p5.Filter with constraints
+ * necessary for the p5.EQ
+ *
+ * @private
+ */
+
+var eqFilter_EQFilter =
+function (_Filter) {
+ eqFilter_inherits(EQFilter, _Filter);
+
+ function EQFilter(freq, res) {
+ var _this;
+
+ eqFilter_classCallCheck(this, EQFilter);
+
+ _this = eqFilter_possibleConstructorReturn(this, eqFilter_getPrototypeOf(EQFilter).call(this, 'peaking'));
+
+ _this.disconnect();
+
+ _this.set(freq, res);
+
+ _this.biquad.gain.value = 0;
+ delete _this.input;
+ delete _this.output;
+ delete _this._drywet;
+ delete _this.wet;
+ return _this;
+ }
+
+ eqFilter_createClass(EQFilter, [{
+ key: "amp",
+ value: function amp() {
+ console.warn('`amp()` is not available for p5.EQ bands. Use `.gain()`');
+ }
+ }, {
+ key: "drywet",
+ value: function drywet() {
+ console.warn('`drywet()` is not available for p5.EQ bands.');
+ }
+ }, {
+ key: "connect",
+ value: function connect(unit) {
+ var u = unit || p5.soundOut.input;
+
+ if (this.biquad) {
+ this.biquad.connect(u.input ? u.input : u);
+ } else {
+ this.output.connect(u.input ? u.input : u);
+ }
+ }
+ }, {
+ key: "disconnect",
+ value: function disconnect() {
+ if (this.biquad) {
+ this.biquad.disconnect();
+ }
+ }
+ }, {
+ key: "dispose",
+ value: function dispose() {
+ var index = main.soundArray.indexOf(this);
+ main.soundArray.splice(index, 1);
+ this.disconnect();
+ delete this.biquad;
+ }
+ }]);
+
+ return EQFilter;
+}(filter);
+
+ var eqFilter = (eqFilter_EQFilter);
+function eq_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { eq_typeof = function _typeof(obj) { return typeof obj; }; } else { eq_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return eq_typeof(obj); }
+
+function eq_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function eq_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function eq_createClass(Constructor, protoProps, staticProps) { if (protoProps) eq_defineProperties(Constructor.prototype, protoProps); if (staticProps) eq_defineProperties(Constructor, staticProps); return Constructor; }
+
+function eq_possibleConstructorReturn(self, call) { if (call && (eq_typeof(call) === "object" || typeof call === "function")) { return call; } return eq_assertThisInitialized(self); }
+
+function eq_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function eq_get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { eq_get = Reflect.get; } else { eq_get = function _get(target, property, receiver) { var base = eq_superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return eq_get(target, property, receiver || target); }
+
+function eq_superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = eq_getPrototypeOf(object); if (object === null) break; } return object; }
+
+function eq_getPrototypeOf(o) { eq_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return eq_getPrototypeOf(o); }
+
+function eq_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) eq_setPrototypeOf(subClass, superClass); }
+
+function eq_setPrototypeOf(o, p) { eq_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return eq_setPrototypeOf(o, p); }
+
+
+
+/**
+ * p5.EQ is an audio effect that performs the function of a multiband
+ * audio equalizer. Equalization is used to adjust the balance of
+ * frequency compoenents of an audio signal. This process is commonly used
+ * in sound production and recording to change the waveform before it reaches
+ * a sound output device. EQ can also be used as an audio effect to create
+ * interesting distortions by filtering out parts of the spectrum. p5.EQ is
+ * built using a chain of Web Audio Biquad Filter Nodes and can be
+ * instantiated with 3 or 8 bands. Bands can be added or removed from
+ * the EQ by directly modifying p5.EQ.bands (the array that stores filters).
+ *
+ * This class extends p5.Effect.
+ * Methods amp(), chain(),
+ * drywet(), connect(), and
+ * disconnect() are available.
+ *
+ * @class p5.EQ
+ * @constructor
+ * @extends p5.Effect
+ * @param {Number} [_eqsize] Constructor will accept 3 or 8, defaults to 3
+ * @return {Object} p5.EQ object
+ *
+ * @example
+ *
+ * let eq, soundFile
+ * let eqBandIndex = 0;
+ * let eqBandNames = ['lows', 'mids', 'highs'];
+ *
+ * function preload() {
+ * soundFormats('mp3', 'ogg');
+ * soundFile = loadSound('assets/beat');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(toggleSound);
+ *
+ * eq = new p5.EQ(eqBandNames.length);
+ * soundFile.disconnect();
+ * eq.process(soundFile);
+ * }
+ *
+ * function draw() {
+ * background(30);
+ * noStroke();
+ * fill(255);
+ * textAlign(CENTER);
+ * text('filtering ', 50, 25);
+ *
+ * fill(255, 40, 255);
+ * textSize(26);
+ * text(eqBandNames[eqBandIndex], 50, 55);
+ *
+ * fill(255);
+ * textSize(9);
+ *
+ * if (!soundFile.isPlaying()) {
+ * text('tap to play', 50, 80);
+ * } else {
+ * text('tap to filter next band', 50, 80)
+ * }
+ * }
+ *
+ * function toggleSound() {
+ * if (!soundFile.isPlaying()) {
+ * soundFile.play();
+ * } else {
+ * eqBandIndex = (eqBandIndex + 1) % eq.bands.length;
+ * }
+ *
+ * for (let i = 0; i < eq.bands.length; i++) {
+ * eq.bands[i].gain(0);
+ * }
+ * // filter the band we want to filter
+ * eq.bands[eqBandIndex].gain(-40);
+ * }
+ * p5.Panner3D - Constructs a Spatial Panner+// *
p5.Listener3D - Constructs a Spatial Listener+// * +// * @class listener +// * @constructor +// * @return {Object} p5.Listener3D Object +// * +// * @param {Web Audio Node} listener Web Audio Spatial Panning Node +// * @param {AudioParam} listener.panningModel "equal power" or "HRTF" +// * @param {AudioParam} listener.distanceModel "linear", "inverse", or "exponential" +// * @param {String} [type] [Specify construction of a spatial panner or listener] +// */ + +var listener3d_Listener3D = +function () { + function Listener3D(type) { + listener3d_classCallCheck(this, Listener3D); + + this.ac = main.audiocontext; + this.listener = this.ac.listener; + } + // * Connect an audio sorce + // * @param {Object} src Input source + // */ + + + listener3d_createClass(Listener3D, [{ + key: "process", + value: function process(src) { + src.connect(this.input); + } + // * Set the X,Y,Z position of the Panner + // * @param {[Number]} xVal + // * @param {[Number]} yVal + // * @param {[Number]} zVal + // * @param {[Number]} time + // * @return {[Array]} [Updated x, y, z values as an array] + // */ + + }, { + key: "position", + value: function position(xVal, yVal, zVal, time) { + this.positionX(xVal, time); + this.positionY(yVal, time); + this.positionZ(zVal, time); + return [this.listener.positionX.value, this.listener.positionY.value, this.listener.positionZ.value]; + } + // * Getter and setter methods for position coordinates + // * @return {Number} [updated coordinate value] + // */ + + }, { + key: "positionX", + value: function positionX(xVal, time) { + var t = time || 0; + + if (typeof xVal === 'number') { + this.listener.positionX.value = xVal; + this.listener.positionX.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.positionX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t); + } else if (xVal) { + xVal.connect(this.listener.positionX); + } + + return this.listener.positionX.value; + } + }, { + key: "positionY", + value: function positionY(yVal, time) { + var t = time || 0; + + if (typeof yVal === 'number') { + this.listener.positionY.value = yVal; + this.listener.positionY.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.positionY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t); + } else if (yVal) { + yVal.connect(this.listener.positionY); + } + + return this.listener.positionY.value; + } + }, { + key: "positionZ", + value: function positionZ(zVal, time) { + var t = time || 0; + + if (typeof zVal === 'number') { + this.listener.positionZ.value = zVal; + this.listener.positionZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.positionZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t); + } else if (zVal) { + zVal.connect(this.listener.positionZ); + } + + return this.listener.positionZ.value; + } + // * Overrides the listener orient() method because Listener has slightly + // * different params. In human terms, Forward vectors are the direction the + // * nose is pointing. Up vectors are the direction of the top of the head. + // * + // * @method orient + // * @param {Number} xValF Forward vector X direction + // * @param {Number} yValF Forward vector Y direction + // * @param {Number} zValF Forward vector Z direction + // * @param {Number} xValU Up vector X direction + // * @param {Number} yValU Up vector Y direction + // * @param {Number} zValU Up vector Z direction + // * @param {Number} time + // * @return {Array} All orienation params + // */ + + }, { + key: "orient", + value: function orient(xValF, yValF, zValF, xValU, yValU, zValU, time) { + if (arguments.length === 3 || arguments.length === 4) { + time = arguments[3]; + this.orientForward(xValF, yValF, zValF, time); + } else if (arguments.length === 6 || arguments === 7) { + this.orientForward(xValF, yValF, zValF); + this.orientUp(xValU, yValU, zValU, time); + } + + return [this.listener.forwardX.value, this.listener.forwardY.value, this.listener.forwardZ.value, this.listener.upX.value, this.listener.upY.value, this.listener.upZ.value]; + } + }, { + key: "orientForward", + value: function orientForward(xValF, yValF, zValF, time) { + this.forwardX(xValF, time); + this.forwardY(yValF, time); + this.forwardZ(zValF, time); + return [this.listener.forwardX, this.listener.forwardY, this.listener.forwardZ]; + } + }, { + key: "orientUp", + value: function orientUp(xValU, yValU, zValU, time) { + this.upX(xValU, time); + this.upY(yValU, time); + this.upZ(zValU, time); + return [this.listener.upX, this.listener.upY, this.listener.upZ]; + } + // * Getter and setter methods for orient coordinates + // * @return {Number} [updated coordinate value] + // */ + + }, { + key: "forwardX", + value: function forwardX(xVal, time) { + var t = time || 0; + + if (typeof xVal === 'number') { + this.listener.forwardX.value = xVal; + this.listener.forwardX.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.forwardX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t); + } else if (xVal) { + xVal.connect(this.listener.forwardX); + } + + return this.listener.forwardX.value; + } + }, { + key: "forwardY", + value: function forwardY(yVal, time) { + var t = time || 0; + + if (typeof yVal === 'number') { + this.listener.forwardY.value = yVal; + this.listener.forwardY.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.forwardY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t); + } else if (yVal) { + yVal.connect(this.listener.forwardY); + } + + return this.listener.forwardY.value; + } + }, { + key: "forwardZ", + value: function forwardZ(zVal, time) { + var t = time || 0; + + if (typeof zVal === 'number') { + this.listener.forwardZ.value = zVal; + this.listener.forwardZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.forwardZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t); + } else if (zVal) { + zVal.connect(this.listener.forwardZ); + } + + return this.listener.forwardZ.value; + } + }, { + key: "upX", + value: function upX(xVal, time) { + var t = time || 0; + + if (typeof xVal === 'number') { + this.listener.upX.value = xVal; + this.listener.upX.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.upX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t); + } else if (xVal) { + xVal.connect(this.listener.upX); + } + + return this.listener.upX.value; + } + }, { + key: "upY", + value: function upY(yVal, time) { + var t = time || 0; + + if (typeof yVal === 'number') { + this.listener.upY.value = yVal; + this.listener.upY.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.upY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t); + } else if (yVal) { + yVal.connect(this.listener.upY); + } + + return this.listener.upY.value; + } + }, { + key: "upZ", + value: function upZ(zVal, time) { + var t = time || 0; + + if (typeof zVal === 'number') { + this.listener.upZ.value = zVal; + this.listener.upZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.listener.upZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t); + } else if (zVal) { + zVal.connect(this.listener.upZ); + } + + return this.listener.upZ.value; + } + }]); + + return Listener3D; +}(); + + var listener3d = (listener3d_Listener3D); +function panner3d_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { panner3d_typeof = function _typeof(obj) { return typeof obj; }; } else { panner3d_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return panner3d_typeof(obj); } + +function panner3d_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function panner3d_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function panner3d_createClass(Constructor, protoProps, staticProps) { if (protoProps) panner3d_defineProperties(Constructor.prototype, protoProps); if (staticProps) panner3d_defineProperties(Constructor, staticProps); return Constructor; } + +function panner3d_possibleConstructorReturn(self, call) { if (call && (panner3d_typeof(call) === "object" || typeof call === "function")) { return call; } return panner3d_assertThisInitialized(self); } + +function panner3d_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function panner3d_get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { panner3d_get = Reflect.get; } else { panner3d_get = function _get(target, property, receiver) { var base = panner3d_superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return panner3d_get(target, property, receiver || target); } + +function panner3d_superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = panner3d_getPrototypeOf(object); if (object === null) break; } return object; } + +function panner3d_getPrototypeOf(o) { panner3d_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return panner3d_getPrototypeOf(o); } + +function panner3d_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) panner3d_setPrototypeOf(subClass, superClass); } + +function panner3d_setPrototypeOf(o, p) { panner3d_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return panner3d_setPrototypeOf(o, p); } + + +/** + * Panner3D is based on the + * Web Audio Spatial Panner Node. + * This panner is a spatial processing node that allows audio to be positioned + * and oriented in 3D space. + * + * The position is relative to an + * Audio Context Listener, which can be accessed + * by
p5.soundOut.audiocontext.listener
+ *
+ *
+ * @class p5.Panner3D
+ * @constructor
+ */
+
+var Panner3D =
+function (_Effect) {
+ panner3d_inherits(Panner3D, _Effect);
+
+ function Panner3D() {
+ var _this;
+
+ panner3d_classCallCheck(this, Panner3D);
+
+ _this = panner3d_possibleConstructorReturn(this, panner3d_getPrototypeOf(Panner3D).call(this));
+ /**
+ *
+ * Web Audio Spatial Panner Node
+ *
+ * Properties include+ * [Panning Model](https://www.w3.org/TR/webaudio/#idl-def-PanningModelType) + * : "equal power" or "HRTF"
+ * [DistanceModel](https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType) + * : "linear", "inverse", or "exponential" + * + * @property {AudioNode} panner + * + */ + + _this.panner = _this.ac.createPanner(); + _this.panner.panningModel = 'HRTF'; + _this.panner.distanceModel = 'linear'; + + _this.panner.connect(_this.output); + + _this.input.connect(_this.panner); + + return _this; + } + /** + * Connect an audio sorce + * + * @method process + * @for p5.Panner3D + * @param {Object} src Input source + */ + + + panner3d_createClass(Panner3D, [{ + key: "process", + value: function process(src) { + src.connect(this.input); + } + /** + * Set the X,Y,Z position of the Panner + * @method set + * @for p5.Panner3D + * @param {Number} xVal + * @param {Number} yVal + * @param {Number} zVal + * @param {Number} time + * @return {Array} Updated x, y, z values as an array + */ + + }, { + key: "set", + value: function set(xVal, yVal, zVal, time) { + this.positionX(xVal, time); + this.positionY(yVal, time); + this.positionZ(zVal, time); + return [this.panner.positionX.value, this.panner.positionY.value, this.panner.positionZ.value]; + } + /** + * Getter and setter methods for position coordinates + * @method positionX + * @for p5.Panner3D + * @return {Number} updated coordinate value + */ + + /** + * Getter and setter methods for position coordinates + * @method positionY + * @for p5.Panner3D + * @return {Number} updated coordinate value + */ + + /** + * Getter and setter methods for position coordinates + * @method positionZ + * @for p5.Panner3D + * @return {Number} updated coordinate value + */ + + }, { + key: "positionX", + value: function positionX(xVal, time) { + var t = time || 0; + + if (typeof xVal === 'number') { + this.panner.positionX.value = xVal; + this.panner.positionX.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.panner.positionX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t); + } else if (xVal) { + xVal.connect(this.panner.positionX); + } + + return this.panner.positionX.value; + } + }, { + key: "positionY", + value: function positionY(yVal, time) { + var t = time || 0; + + if (typeof yVal === 'number') { + this.panner.positionY.value = yVal; + this.panner.positionY.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.panner.positionY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t); + } else if (yVal) { + yVal.connect(this.panner.positionY); + } + + return this.panner.positionY.value; + } + }, { + key: "positionZ", + value: function positionZ(zVal, time) { + var t = time || 0; + + if (typeof zVal === 'number') { + this.panner.positionZ.value = zVal; + this.panner.positionZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.panner.positionZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t); + } else if (zVal) { + zVal.connect(this.panner.positionZ); + } + + return this.panner.positionZ.value; + } + /** + * Set the X,Y,Z position of the Panner + * @method orient + * @for p5.Panner3D + * @param {Number} xVal + * @param {Number} yVal + * @param {Number} zVal + * @param {Number} time + * @return {Array} Updated x, y, z values as an array + */ + + }, { + key: "orient", + value: function orient(xVal, yVal, zVal, time) { + this.orientX(xVal, time); + this.orientY(yVal, time); + this.orientZ(zVal, time); + return [this.panner.orientationX.value, this.panner.orientationY.value, this.panner.orientationZ.value]; + } + /** + * Getter and setter methods for orient coordinates + * @method orientX + * @for p5.Panner3D + * @return {Number} updated coordinate value + */ + + /** + * Getter and setter methods for orient coordinates + * @method orientY + * @for p5.Panner3D + * @return {Number} updated coordinate value + */ + + /** + * Getter and setter methods for orient coordinates + * @method orientZ + * @for p5.Panner3D + * @return {Number} updated coordinate value + */ + + }, { + key: "orientX", + value: function orientX(xVal, time) { + var t = time || 0; + + if (typeof xVal === 'number') { + this.panner.orientationX.value = xVal; + this.panner.orientationX.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.panner.orientationX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t); + } else if (xVal) { + xVal.connect(this.panner.orientationX); + } + + return this.panner.orientationX.value; + } + }, { + key: "orientY", + value: function orientY(yVal, time) { + var t = time || 0; + + if (typeof yVal === 'number') { + this.panner.orientationY.value = yVal; + this.panner.orientationY.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.panner.orientationY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t); + } else if (yVal) { + yVal.connect(this.panner.orientationY); + } + + return this.panner.orientationY.value; + } + }, { + key: "orientZ", + value: function orientZ(zVal, time) { + var t = time || 0; + + if (typeof zVal === 'number') { + this.panner.orientationZ.value = zVal; + this.panner.orientationZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t); + this.panner.orientationZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t); + } else if (zVal) { + zVal.connect(this.panner.orientationZ); + } + + return this.panner.orientationZ.value; + } + /** + * Set the rolloff factor and max distance + * @method setFalloff + * @for p5.Panner3D + * @param {Number} [maxDistance] + * @param {Number} [rolloffFactor] + */ + + }, { + key: "setFalloff", + value: function setFalloff(maxDistance, rolloffFactor) { + this.maxDist(maxDistance); + this.rolloff(rolloffFactor); + } + /** + * Maxium distance between the source and the listener + * @method maxDist + * @for p5.Panner3D + * @param {Number} maxDistance + * @return {Number} updated value + */ + + }, { + key: "maxDist", + value: function maxDist(maxDistance) { + if (typeof maxDistance === 'number') { + this.panner.maxDistance = maxDistance; + } + + return this.panner.maxDistance; + } + /** + * How quickly the volume is reduced as the source moves away from the listener + * @method rollof + * @for p5.Panner3D + * @param {Number} rolloffFactor + * @return {Number} updated value + */ + + }, { + key: "rolloff", + value: function rolloff(rolloffFactor) { + if (typeof rolloffFactor === 'number') { + this.panner.rolloffFactor = rolloffFactor; + } + + return this.panner.rolloffFactor; + } + }, { + key: "dispose", + value: function dispose() { + panner3d_get(panner3d_getPrototypeOf(Panner3D.prototype), "dispose", this).call(this); + + if (this.panner) { + this.panner.disconnect(); + delete this.panner; + } + } + }]); + + return Panner3D; +}(effect); + + var panner3d = (Panner3D); +function delay_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { delay_typeof = function _typeof(obj) { return typeof obj; }; } else { delay_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return delay_typeof(obj); } + +function delay_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function delay_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function delay_createClass(Constructor, protoProps, staticProps) { if (protoProps) delay_defineProperties(Constructor.prototype, protoProps); if (staticProps) delay_defineProperties(Constructor, staticProps); return Constructor; } + +function delay_possibleConstructorReturn(self, call) { if (call && (delay_typeof(call) === "object" || typeof call === "function")) { return call; } return delay_assertThisInitialized(self); } + +function delay_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function delay_get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { delay_get = Reflect.get; } else { delay_get = function _get(target, property, receiver) { var base = delay_superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return delay_get(target, property, receiver || target); } + +function delay_superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = delay_getPrototypeOf(object); if (object === null) break; } return object; } + +function delay_getPrototypeOf(o) { delay_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return delay_getPrototypeOf(o); } + +function delay_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) delay_setPrototypeOf(subClass, superClass); } + +function delay_setPrototypeOf(o, p) { delay_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return delay_setPrototypeOf(o, p); } + + + +/** + * Delay is an echo effect. It processes an existing sound source, + * and outputs a delayed version of that sound. The p5.Delay can + * produce different effects depending on the delayTime, feedback, + * filter, and type. In the example below, a feedback of 0.5 (the + * default value) will produce a looping delay that decreases in + * volume by 50% each repeat. A filter will cut out the high + * frequencies so that the delay does not sound as piercing as the + * original source. + * + * + * This class extends p5.Effect. + * Methods amp(), chain(), + * drywet(), connect(), and + * disconnect() are available. + * @class p5.Delay + * @extends p5.Effect + * @constructor + * @example + *
+ * let osc;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * background(220);
+ * textAlign(CENTER);
+ * text('tap to play', width/2, height/2);
+ *
+ * osc = new p5.Oscillator('square');
+ * osc.amp(0.5);
+ * delay = new p5.Delay();
+ *
+ * // delay.process() accepts 4 parameters:
+ * // source, delayTime (in seconds), feedback, filter frequency
+ * delay.process(osc, 0.12, .7, 2300);
+ *
+ * cnv.mousePressed(oscStart);
+ * }
+ *
+ * function oscStart() {
+ * osc.start();
+ * }
+ *
+ * function mouseReleased() {
+ * osc.stop();
+ * }
+ *
+ * let soundFile, reverb;
+ * function preload() {
+ * soundFile = loadSound('assets/Damscray_DancingTiger.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSound);
+ *
+ * reverb = new p5.Reverb();
+ * soundFile.disconnect(); // so we'll only hear reverb...
+ *
+ * // connect soundFile to reverb, process w/
+ * // 3 second reverbTime, decayRate of 2%
+ * reverb.process(soundFile, 3, 2);
+ * }
+ *
+ * function draw() {
+ * let dryWet = constrain(map(mouseX, 0, width, 0, 1), 0, 1);
+ * // 1 = all reverb, 0 = no reverb
+ * reverb.drywet(dryWet);
+ *
+ * background(220);
+ * text('tap to play', 10, 20);
+ * text('dry/wet: ' + round(dryWet * 100) + '%', 10, height - 20);
+ * }
+ *
+ * function playSound() {
+ * soundFile.play();
+ * }
+ * p5.Convolver extends p5.Reverb. It can emulate the sound of real + * physical spaces through a process called + * convolution.
+ * + *Convolution multiplies any audio input by an "impulse response" + * to simulate the dispersion of sound over time. The impulse response is + * generated from an audio file that you provide. One way to + * generate an impulse response is to pop a balloon in a reverberant space + * and record the echo. Convolution can also be used to experiment with + * sound.
+ * + *Use the method createConvolution(path) to instantiate a
+ * p5.Convolver with a path to your impulse response audio file.
+ * let cVerb, sound;
+ * function preload() {
+ * // We have both MP3 and OGG versions of all sound assets
+ * soundFormats('ogg', 'mp3');
+ *
+ * // Try replacing 'bx-spring' with other soundfiles like
+ * // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+ * cVerb = createConvolver('assets/bx-spring.mp3');
+ *
+ * // Try replacing 'Damscray_DancingTiger' with
+ * // 'beat', 'doorbell', lucky_dragons_-_power_melody'
+ * sound = loadSound('assets/Damscray_DancingTiger.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSound);
+ * background(220);
+ * text('tap to play', 20, 20);
+ *
+ * // disconnect from main output...
+ * sound.disconnect();
+ *
+ * // ...and process with cVerb
+ * // so that we only hear the convolution
+ * cVerb.process(sound);
+ * }
+ *
+ * function playSound() {
+ * sound.play();
+ * }
+ * toggleImpulse(id) method.
+ *
+ * @property {Array} impulses
+ * @for p5.Convolver
+ */
+
+
+ _this2.impulses = [];
+ _this2.set = null;
+ return _this2;
+ }
+ /**
+ * Private method to load a buffer as an Impulse Response,
+ * assign it to the convolverNode, and add to the Array of .impulses.
+ *
+ * @param {String} path
+ * @param {Function} callback
+ * @param {Function} errorCallback
+ * @private
+ */
+
+
+ reverb_createClass(Convolver, [{
+ key: "_loadBuffer",
+ value: function _loadBuffer(_path, callback, errorCallback) {
+ var path = p5.prototype._checkFileFormats(_path);
+
+ var self = this;
+ var errorTrace = new Error().stack;
+ var ac = Object(audiocontext["b" ])();
+ var request = new XMLHttpRequest();
+ request.open('GET', path, true);
+ request.responseType = 'arraybuffer';
+
+ request.onload = function () {
+ if (request.status === 200) {
+ ac.decodeAudioData(request.response, function (buff) {
+ var buffer = {};
+ var chunks = path.split('/');
+ buffer.name = chunks[chunks.length - 1];
+ buffer.audioBuffer = buff;
+ self.impulses.push(buffer);
+
+ self._setBuffer(buffer.audioBuffer);
+
+ if (callback) {
+ callback(buffer);
+ }
+ },
+ function () {
+ var err = new errorHandler('decodeAudioData', errorTrace, self.url);
+ var msg = 'AudioContext error at decodeAudioData for ' + self.url;
+
+ if (errorCallback) {
+ err.msg = msg;
+ errorCallback(err);
+ } else {
+ console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+ }
+ });
+ }
+ else {
+ var err = new errorHandler('loadConvolver', errorTrace, self.url);
+ var msg = 'Unable to load ' + self.url + '. The request status was: ' + request.status + ' (' + request.statusText + ')';
+
+ if (errorCallback) {
+ err.message = msg;
+ errorCallback(err);
+ } else {
+ console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+ }
+ }
+ };
+
+
+ request.onerror = function () {
+ var err = new errorHandler('loadConvolver', errorTrace, self.url);
+ var msg = 'There was no response from the server at ' + self.url + '. Check the url and internet connectivity.';
+
+ if (errorCallback) {
+ err.message = msg;
+ errorCallback(err);
+ } else {
+ console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+ }
+ };
+
+ request.send();
+ }
+ /**
+ * Connect a source to the convolver.
+ *
+ * @method process
+ * @for p5.Convolver
+ * @param {Object} src p5.sound / Web Audio object with a sound
+ * output.
+ * @example
+ *
+ * let cVerb, sound;
+ * function preload() {
+ * // We have both MP3 and OGG versions of all sound assets
+ * soundFormats('ogg', 'mp3');
+ *
+ * // Try replacing 'bx-spring' with other soundfiles like
+ * // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+ * cVerb = createConvolver('assets/bx-spring.mp3');
+ *
+ * // Try replacing 'Damscray_DancingTiger' with
+ * // 'beat', 'doorbell', lucky_dragons_-_power_melody'
+ * sound = loadSound('assets/Damscray_DancingTiger.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSound);
+ * background(220);
+ * text('tap to play', 20, 20);
+ *
+ * // disconnect from main output...
+ * sound.disconnect();
+ *
+ * // ...and process with cVerb
+ * // so that we only hear the convolution
+ * cVerb.process(sound);
+ * }
+ *
+ * function playSound() {
+ * sound.play();
+ * }
+ *
+ * .impulses array. Previous
+ * impulses can be accessed with the .toggleImpulse(id)
+ * method.
+ *
+ * @method addImpulse
+ * @for p5.Convolver
+ * @param {String} path path to a sound file
+ * @param {Function} callback function (optional)
+ * @param {Function} errorCallback function (optional)
+ */
+
+ }, {
+ key: "addImpulse",
+ value: function addImpulse(path, callback, errorCallback) {
+ if (window.location.origin.indexOf('file://') > -1 && window.cordova === 'undefined') {
+ alert('This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS');
+ }
+
+ this._loadBuffer(path, callback, errorCallback);
+ }
+ /**
+ * Similar to .addImpulse, except that the .impulses
+ * Array is reset to save memory. A new .impulses
+ * array is created with this impulse as the only item.
+ *
+ * @method resetImpulse
+ * @for p5.Convolver
+ * @param {String} path path to a sound file
+ * @param {Function} callback function (optional)
+ * @param {Function} errorCallback function (optional)
+ */
+
+ }, {
+ key: "resetImpulse",
+ value: function resetImpulse(path, callback, errorCallback) {
+ if (window.location.origin.indexOf('file://') > -1 && window.cordova === 'undefined') {
+ alert('This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS');
+ }
+
+ this.impulses = [];
+
+ this._loadBuffer(path, callback, errorCallback);
+ }
+ /**
+ * If you have used .addImpulse() to add multiple impulses
+ * to a p5.Convolver, then you can use this method to toggle between
+ * the items in the .impulses Array. Accepts a parameter
+ * to identify which impulse you wish to use, identified either by its
+ * original filename (String) or by its position in the .impulses
+ * Array (Number).+ * You can access the objects in the .impulses Array directly. Each + * Object has two attributes: an
.audioBuffer (type:
+ * Web Audio
+ * AudioBuffer) and a .name, a String that corresponds
+ * with the original filename.
+ *
+ * @method toggleImpulse
+ * @for p5.Convolver
+ * @param {String|Number} id Identify the impulse by its original filename
+ * (String), or by its position in the
+ * .impulses Array (Number).
+ */
+
+ }, {
+ key: "toggleImpulse",
+ value: function toggleImpulse(id) {
+ if (typeof id === 'number' && id < this.impulses.length) {
+ this._setBuffer(this.impulses[id].audioBuffer);
+ }
+
+ if (typeof id === 'string') {
+ for (var i = 0; i < this.impulses.length; i++) {
+ if (this.impulses[i].name === id) {
+ this._setBuffer(this.impulses[i].audioBuffer);
+
+ break;
+ }
+ }
+ }
+ }
+ }, {
+ key: "dispose",
+ value: function dispose() {
+ reverb_get(reverb_getPrototypeOf(Convolver.prototype), "dispose", this).call(this);
+
+
+ for (var i in this.impulses) {
+ if (this.impulses[i]) {
+ this.impulses[i] = null;
+ }
+ }
+ }
+ }]);
+
+ return Convolver;
+}(Reverb);
+/**
+ * Create a p5.Convolver. Accepts a path to a soundfile
+ * that will be used to generate an impulse response.
+ *
+ * @method createConvolver
+ * @for p5
+ * @param {String} path path to a sound file
+ * @param {Function} [callback] function to call if loading is successful.
+ * The object will be passed in as the argument
+ * to the callback function.
+ * @param {Function} [errorCallback] function to call if loading is not successful.
+ * A custom error will be passed in as the argument
+ * to the callback function.
+ * @return {p5.Convolver}
+ * @example
+ *
+ * let cVerb, sound;
+ * function preload() {
+ * // We have both MP3 and OGG versions of all sound assets
+ * soundFormats('ogg', 'mp3');
+ *
+ * // Try replacing 'bx-spring' with other soundfiles like
+ * // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+ * cVerb = createConvolver('assets/bx-spring.mp3');
+ *
+ * // Try replacing 'Damscray_DancingTiger' with
+ * // 'beat', 'doorbell', lucky_dragons_-_power_melody'
+ * sound = loadSound('assets/Damscray_DancingTiger.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSound);
+ * background(220);
+ * text('tap to play', 20, 20);
+ *
+ * // disconnect from main output...
+ * sound.disconnect();
+ *
+ * // ...and process with cVerb
+ * // so that we only hear the convolution
+ * cVerb.process(sound);
+ * }
+ *
+ * function playSound() {
+ * sound.play();
+ * }
+ * A phrase is a pattern of musical events over time, i.e. + * a series of notes and rests.
+ * + *Phrases must be added to a p5.Part for playback, and + * each part can play multiple phrases at the same time. + * For example, one Phrase might be a kick drum, another + * could be a snare, and another could be the bassline.
+ * + *The first parameter is a name so that the phrase can be
+ * modified or deleted later. The callback is a a function that
+ * this phrase will call at every step—for example it might be
+ * called playNote(value){}. The array determines
+ * which value is passed into the callback at each step of the
+ * phrase. It can be numbers, an object with multiple numbers,
+ * or a zero (0) indicates a rest so the callback won't be called).
+ * let mySound, myPhrase, myPart;
+ * let pattern = [1,0,0,2,0,2,0,0];
+ *
+ * function preload() {
+ * mySound = loadSound('assets/beatbox.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playMyPart);
+ * background(220);
+ * text('tap to play', width/2, height/2);
+ * textAlign(CENTER, CENTER);
+ *
+ * myPhrase = new p5.Phrase('bbox', onEachStep, pattern);
+ * myPart = new p5.Part();
+ * myPart.addPhrase(myPhrase);
+ * myPart.setBPM(60);
+ * }
+ *
+ * function onEachStep(time, playbackRate) {
+ * mySound.rate(playbackRate);
+ * mySound.play(time);
+ * }
+ *
+ * function playMyPart() {
+ * userStartAudio();
+ * myPart.start();
+ * }
+ * A p5.Part plays back one or more p5.Phrases. Instantiate a part + * with steps and tatums. By default, each step represents a 1/16th note.
+ * + *See p5.Phrase for more about musical timing.
+ * + * @class p5.Part + * @constructor + * @param {Number} [steps] Steps in the part + * @param {Number} [tatums] Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note) + * @example + *
+ * let box, drum, myPart;
+ * let boxPat = [1,0,0,2,0,2,0,0];
+ * let drumPat = [0,1,1,0,2,0,1,0];
+ *
+ * function preload() {
+ * box = loadSound('assets/beatbox.mp3');
+ * drum = loadSound('assets/drum.mp3');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playMyPart);
+ * background(220);
+ * textAlign(CENTER, CENTER);
+ * text('tap to play', width/2, height/2);
+ *
+ * let boxPhrase = new p5.Phrase('box', playBox, boxPat);
+ * let drumPhrase = new p5.Phrase('drum', playDrum, drumPat);
+ * myPart = new p5.Part();
+ * myPart.addPhrase(boxPhrase);
+ * myPart.addPhrase(drumPhrase);
+ * myPart.setBPM(60);
+ * }
+ *
+ * function playBox(time, playbackRate) {
+ * box.rate(playbackRate);
+ * box.play(time);
+ * }
+ *
+ * function playDrum(time, playbackRate) {
+ * drum.rate(playbackRate);
+ * drum.play(time);
+ * }
+ *
+ * function playMyPart() {
+ * userStartAudio();
+ *
+ * myPart.start();
+ * }
+ * new p5.Score(a, a, b, a, c)
+ *
+ * @class p5.Score
+ * @constructor
+ * @param {p5.Part} [...parts] One or multiple parts, to be played in sequence.
+ */
+
+
+var Score =
+function () {
+ function Score() {
+ looper_classCallCheck(this, Score);
+
+ this.parts = [];
+ this.currentPart = new Array(arguments.length);
+ ;
+ var thisScore = this;
+
+ for (var i in arguments) {
+ this.parts[i] = arguments[i];
+ this.parts[i].nextPart = this.parts[i + 1];
+
+ this.parts[i].onended = function () {
+ thisScore.resetPart(i);
+ playNextPart(thisScore);
+ };
+ }
+
+ this.looping = false;
+ }
+
+ looper_createClass(Score, [{
+ key: "onended",
+ value: function onended() {
+ if (this.looping) {
+ this.parts[0].start();
+ } else {
+ this.parts[this.parts.length - 1].onended = function () {
+ this.stop();
+ this.resetParts();
+ };
+ }
+
+ this.currentPart = 0;
+ }
+ /**
+ * Start playback of the score.
+ *
+ * @method start
+ * @for p5.Score
+ */
+
+ }, {
+ key: "start",
+ value: function start() {
+ this.parts[this.currentPart].start();
+ this.scoreStep = 0;
+ }
+ /**
+ * Stop playback of the score.
+ *
+ * @method stop
+ * @for p5.Score
+ */
+
+ }, {
+ key: "stop",
+ value: function stop() {
+ this.parts[this.currentPart].stop();
+ this.currentPart = 0;
+ this.scoreStep = 0;
+ }
+ /**
+ * Pause playback of the score.
+ *
+ * @method pause
+ * @for p5.Score
+ */
+
+ }, {
+ key: "pause",
+ value: function pause() {
+ this.parts[this.currentPart].stop();
+ }
+ /**
+ * Loop playback of the score.
+ *
+ * @method loop
+ * @for p5.Score
+ */
+
+ }, {
+ key: "loop",
+ value: function loop() {
+ this.looping = true;
+ this.start();
+ }
+ /**
+ * Stop looping playback of the score. If it
+ * is currently playing, this will go into effect
+ * after the current round of playback completes.
+ *
+ * @method noLoop
+ * @for p5.Score
+ */
+
+ }, {
+ key: "noLoop",
+ value: function noLoop() {
+ this.looping = false;
+ }
+ }, {
+ key: "resetParts",
+ value: function resetParts() {
+ var self = this;
+ this.parts.forEach(function (part) {
+ self.resetParts[part];
+ });
+ }
+ }, {
+ key: "resetPart",
+ value: function resetPart(i) {
+ this.parts[i].stop();
+ this.parts[i].partStep = 0;
+
+ for (var p in this.parts[i].phrases) {
+ if (this.parts[i]) {
+ this.parts[i].phrases[p].phraseStep = 0;
+ }
+ }
+ }
+ /**
+ * Set the tempo for all parts in the score
+ *
+ * @method setBPM
+ * @for p5.Score
+ * @param {Number} BPM Beats Per Minute
+ * @param {Number} rampTime Seconds from now
+ */
+
+ }, {
+ key: "setBPM",
+ value: function setBPM(bpm, rampTime) {
+ for (var i in this.parts) {
+ if (this.parts[i]) {
+ this.parts[i].setBPM(bpm, rampTime);
+ }
+ }
+ }
+ }]);
+
+ return Score;
+}();
+
+function playNextPart(aScore) {
+ aScore.currentPart++;
+
+ if (aScore.currentPart >= aScore.parts.length) {
+ aScore.scoreStep = 0;
+ aScore.onended();
+ } else {
+ aScore.scoreStep = 0;
+ aScore.parts[aScore.currentPart - 1].stop();
+ aScore.parts[aScore.currentPart].start();
+ }
+}
+
+
+function soundLoop_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function soundLoop_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function soundLoop_createClass(Constructor, protoProps, staticProps) { if (protoProps) soundLoop_defineProperties(Constructor.prototype, protoProps); if (staticProps) soundLoop_defineProperties(Constructor, staticProps); return Constructor; }
+
+
+
+/**
+ * SoundLoop
+ *
+ * @class p5.SoundLoop
+ * @constructor
+ *
+ * @param {Function} callback this function will be called on each iteration of theloop
+ * @param {Number|String} [interval] amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second.
+ *
+ * @example
+ *
+ * let synth, soundLoop;
+ * let notePattern = [60, 62, 64, 67, 69, 72];
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * colorMode(HSB);
+ * background(0, 0, 86);
+ * text('tap to start/stop', 10, 20);
+ *
+ * //the looper's callback is passed the timeFromNow
+ * //this value should be used as a reference point from
+ * //which to schedule sounds
+ * let intervalInSeconds = 0.2;
+ * soundLoop = new p5.SoundLoop(onSoundLoop, intervalInSeconds);
+ *
+ * synth = new p5.MonoSynth();
+ * }
+ *
+ * function canvasPressed() {
+ * // ensure audio is enabled
+ * userStartAudio();
+ *
+ * if (soundLoop.isPlaying) {
+ * soundLoop.stop();
+ * } else {
+ * // start the loop
+ * soundLoop.start();
+ * }
+ * }
+ *
+ * function onSoundLoop(timeFromNow) {
+ * let noteIndex = (soundLoop.iterations - 1) % notePattern.length;
+ * let note = midiToFreq(notePattern[noteIndex]);
+ * synth.play(note, 0.5, timeFromNow);
+ * background(noteIndex * 360 / notePattern.length, 50, 100);
+ * }
+ * PeakDetect works in conjunction with p5.FFT to + * look for onsets in some or all of the frequency spectrum. + *
+ *
+ * To use p5.PeakDetect, call update in the draw loop
+ * and pass in a p5.FFT object.
+ *
+ * You can listen for a specific part of the frequency spectrum by
+ * setting the range between freq1 and freq2.
+ *
threshold is the threshold for detecting a peak,
+ * scaled between 0 and 1. It is logarithmic, so 0.1 is half as loud
+ * as 1.0.
+ * The update method is meant to be run in the draw loop, and
+ * frames determines how many loops must pass before
+ * another peak can be detected.
+ * For example, if the frameRate() = 60, you could detect the beat of a
+ * 120 beat-per-minute song with this equation:
+ * framesPerPeak = 60 / (estimatedBPM / 60 );
+ *
+ * Based on example contribtued by @b2renger, and a simple beat detection + * explanation by Felix Turner. + *
+ * + * @class p5.PeakDetect + * @constructor + * @param {Number} [freq1] lowFrequency - defaults to 20Hz + * @param {Number} [freq2] highFrequency - defaults to 20000 Hz + * @param {Number} [threshold] Threshold for detecting a beat between 0 and 1 + * scaled logarithmically where 0.1 is 1/2 the loudness + * of 1.0. Defaults to 0.35. + * @param {Number} [framesPerPeak] Defaults to 20. + * @example + *
+ *
+ * var cnv, soundFile, fft, peakDetect;
+ * var ellipseWidth = 10;
+ *
+ * function preload() {
+ * soundFile = loadSound('assets/beat.mp3');
+ * }
+ *
+ * function setup() {
+ * background(0);
+ * noStroke();
+ * fill(255);
+ * textAlign(CENTER);
+ *
+ * // p5.PeakDetect requires a p5.FFT
+ * fft = new p5.FFT();
+ * peakDetect = new p5.PeakDetect();
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * text('click to play/pause', width/2, height/2);
+ *
+ * // peakDetect accepts an fft post-analysis
+ * fft.analyze();
+ * peakDetect.update(fft);
+ *
+ * if ( peakDetect.isDetected ) {
+ * ellipseWidth = 50;
+ * } else {
+ * ellipseWidth *= 0.95;
+ * }
+ *
+ * ellipse(width/2, height/2, ellipseWidth, ellipseWidth);
+ * }
+ *
+ * // toggle play/stop when canvas is clicked
+ * function mouseClicked() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * if (soundFile.isPlaying() ) {
+ * soundFile.stop();
+ * } else {
+ * soundFile.play();
+ * }
+ * }
+ * }
+ *
+ * var cnv, soundFile, fft, peakDetect;
+ * var ellipseWidth = 0;
+ *
+ * function preload() {
+ * soundFile = loadSound('assets/beat.mp3');
+ * }
+ *
+ * function setup() {
+ * cnv = createCanvas(100,100);
+ * textAlign(CENTER);
+ *
+ * fft = new p5.FFT();
+ * peakDetect = new p5.PeakDetect();
+ *
+ * setupSound();
+ *
+ * // when a beat is detected, call triggerBeat()
+ * peakDetect.onPeak(triggerBeat);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * fill(255);
+ * text('click to play', width/2, height/2);
+ *
+ * fft.analyze();
+ * peakDetect.update(fft);
+ *
+ * ellipseWidth *= 0.95;
+ * ellipse(width/2, height/2, ellipseWidth, ellipseWidth);
+ * }
+ *
+ * // this function is called by peakDetect.onPeak
+ * function triggerBeat() {
+ * ellipseWidth = 50;
+ * }
+ *
+ * // mouseclick starts/stops sound
+ * function setupSound() {
+ * cnv.mouseClicked( function() {
+ * if (soundFile.isPlaying() ) {
+ * soundFile.stop();
+ * } else {
+ * soundFile.play();
+ * }
+ * });
+ * }
+ * Record sounds for playback and/or to save as a .wav file. + * The p5.SoundRecorder records all sound output from your sketch, + * or can be assigned a specific source with setInput().
+ *The record() method accepts a p5.SoundFile as a parameter. + * When playback is stopped (either after the given amount of time, + * or with the stop() method), the p5.SoundRecorder will send its + * recording to that p5.SoundFile for playback.
+ * + * @class p5.SoundRecorder + * @constructor + * @example + *
+ * let mic, recorder, soundFile;
+ * let state = 0;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * textAlign(CENTER, CENTER);
+ *
+ * // create an audio in
+ * mic = new p5.AudioIn();
+ *
+ * // prompts user to enable their browser mic
+ * mic.start();
+ *
+ * // create a sound recorder
+ * recorder = new p5.SoundRecorder();
+ *
+ * // connect the mic to the recorder
+ * recorder.setInput(mic);
+ *
+ * // this sound file will be used to
+ * // playback & save the recording
+ * soundFile = new p5.SoundFile();
+ *
+ * text('tap to record', width/2, height/2);
+ * }
+ *
+ * function canvasPressed() {
+ * // ensure audio is enabled
+ * userStartAudio();
+ *
+ * // make sure user enabled the mic
+ * if (state === 0 && mic.enabled) {
+ *
+ * // record to our p5.SoundFile
+ * recorder.record(soundFile);
+ *
+ * background(255,0,0);
+ * text('Recording!', width/2, height/2);
+ * state++;
+ * }
+ * else if (state === 1) {
+ * background(0,255,0);
+ *
+ * // stop recorder and
+ * // send result to soundFile
+ * recorder.stop();
+ *
+ * text('Done! Tap to play and download', width/2, height/2, width - 20);
+ * state++;
+ * }
+ *
+ * else if (state === 2) {
+ * soundFile.play(); // play the result!
+ * save(soundFile, 'mySound.wav');
+ * state++;
+ * }
+ * }
+ *
+ *
+ * // load two soundfile and crossfade beetween them
+ * let sound1,sound2;
+ * let sound1Gain, sound2Gain, mixGain;
+ * function preload(){
+ * soundFormats('ogg', 'mp3');
+ * sound1 = loadSound('assets/Damscray_-_Dancing_Tiger_01');
+ * sound2 = loadSound('assets/beat');
+ * }
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(startSound);
+ * // create a 'mix' gain bus to which we will connect both soundfiles
+ * mixGain = new p5.Gain();
+ * mixGain.connect();
+ * sound1.disconnect(); // diconnect from p5 output
+ * sound1Gain = new p5.Gain(); // setup a gain node
+ * sound1Gain.setInput(sound1); // connect the first sound to its input
+ * sound1Gain.connect(mixGain); // connect its output to the final mix bus
+ * sound2.disconnect();
+ * sound2Gain = new p5.Gain();
+ * sound2Gain.setInput(sound2);
+ * sound2Gain.connect(mixGain);
+ * }
+ * function startSound() {
+ * sound1.loop();
+ * sound2.loop();
+ * loop();
+ * }
+ * function mouseReleased() {
+ * sound1.stop();
+ * sound2.stop();
+ * }
+ * function draw(){
+ * background(220);
+ * textAlign(CENTER);
+ * textSize(11);
+ * fill(0);
+ * if (!sound1.isPlaying()) {
+ * text('tap and drag to play', width/2, height/2);
+ * return;
+ * }
+ * // map the horizontal position of the mouse to values useable for volume * control of sound1
+ * var sound1Volume = constrain(map(mouseX,width,0,0,1), 0, 1);
+ * var sound2Volume = 1-sound1Volume;
+ * sound1Gain.amp(sound1Volume);
+ * sound2Gain.amp(sound2Volume);
+ * // map the vertical position of the mouse to values useable for 'output * volume control'
+ * var outputVolume = constrain(map(mouseY,height,0,0,1), 0, 1);
+ * mixGain.amp(outputVolume);
+ * text('output', width/2, height - outputVolume * height * 0.9)
+ * fill(255, 0, 255);
+ * textAlign(LEFT);
+ * text('sound1', 5, height - sound1Volume * height * 0.9);
+ * textAlign(RIGHT);
+ * text('sound2', width - 5, height - sound2Volume * height * 0.9);
+ * }
+ *
+ * let monoSynth;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSynth);
+ * background(220);
+ * textAlign(CENTER);
+ * text('tap to play', width/2, height/2);
+ *
+ * monoSynth = new p5.MonoSynth();
+ * }
+ *
+ * function playSynth() {
+ * userStartAudio();
+ *
+ * let note = random(['Fb4', 'G4']);
+ * // note velocity (volume, from 0 to 1)
+ * let velocity = random();
+ * // time from now (in seconds)
+ * let time = 0;
+ * // note duration (in seconds)
+ * let dur = 1/6;
+ *
+ * monoSynth.play(note, velocity, time, dur);
+ * }
+ *
+ * let monoSynth;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSynth);
+ * background(220);
+ * textAlign(CENTER);
+ * text('tap to play', width/2, height/2);
+ *
+ * monoSynth = new p5.MonoSynth();
+ * }
+ *
+ * function playSynth() {
+ * userStartAudio();
+ *
+ * let note = random(['Fb4', 'G4']);
+ * // note velocity (volume, from 0 to 1)
+ * let velocity = random();
+ * // time from now (in seconds)
+ * let time = 0;
+ * // note duration (in seconds)
+ * let dur = 1/6;
+ *
+ * monoSynth.play(note, velocity, time, dur);
+ * }
+ *
+ * let monoSynth;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(triggerAttack);
+ * background(220);
+ * text('tap here for attack, let go to release', 5, 20, width - 20);
+ * monoSynth = new p5.MonoSynth();
+ * }
+ *
+ * function triggerAttack() {
+ * userStartAudio();
+ *
+ * monoSynth.triggerAttack("E3");
+ * }
+ *
+ * function mouseReleased() {
+ * monoSynth.triggerRelease();
+ * }
+ *
+ * let monoSynth;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(triggerAttack);
+ * background(220);
+ * text('tap here for attack, let go to release', 5, 20, width - 20);
+ * monoSynth = new p5.MonoSynth();
+ * }
+ *
+ * function triggerAttack() {
+ * userStartAudio();
+ *
+ * monoSynth.triggerAttack("E3");
+ * }
+ *
+ * function mouseReleased() {
+ * monoSynth.triggerRelease();
+ * }
+ * setRange),
+ * then decayLevel would increase proportionally, to become 0.5.
+ * @param {Number} [releaseTime] Time in seconds from now (defaults to 0)
+ */
+
+ }, {
+ key: "setADSR",
+ value: function setADSR(attack, decay, sustain, release) {
+ this.env.setADSR(attack, decay, sustain, release);
+ }
+ /**
+ * MonoSynth amp
+ * @method amp
+ * @for p5.MonoSynth
+ * @param {Number} vol desired volume
+ * @param {Number} [rampTime] Time to reach new volume
+ * @return {Number} new volume value
+ */
+
+ }, {
+ key: "amp",
+ value: function amp(vol, rampTime) {
+ var t = rampTime || 0;
+
+ if (typeof vol !== 'undefined') {
+ this.oscillator.amp(vol, t);
+ }
+
+ return this.oscillator.amp().value;
+ }
+ /**
+ * Connect to a p5.sound / Web Audio object.
+ *
+ * @method connect
+ * @for p5.MonoSynth
+ * @param {Object} unit A p5.sound or Web Audio object
+ */
+
+ }, {
+ key: "connect",
+ value: function connect(unit) {
+ var u = unit || main.input;
+ this.output.connect(u.input ? u.input : u);
+ }
+ /**
+ * Disconnect all outputs
+ *
+ * @method disconnect
+ * @for p5.MonoSynth
+ */
+
+ }, {
+ key: "disconnect",
+ value: function disconnect() {
+ if (this.output) {
+ this.output.disconnect();
+ }
+ }
+ /**
+ * Get rid of the MonoSynth and free up its resources / memory.
+ *
+ * @method dispose
+ * @for p5.MonoSynth
+ */
+
+ }, {
+ key: "dispose",
+ value: function dispose() {
+ monosynth_get(monosynth_getPrototypeOf(MonoSynth.prototype), "dispose", this).call(this);
+
+ if (this.env) {
+ this.env.dispose();
+ }
+
+ if (this.oscillator) {
+ this.oscillator.dispose();
+ }
+ }
+ }]);
+
+ return MonoSynth;
+}(audioVoice_0);
+
+ var monosynth = (monosynth_MonoSynth);
+function onsetDetect_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function onsetDetect_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function onsetDetect_createClass(Constructor, protoProps, staticProps) { if (protoProps) onsetDetect_defineProperties(Constructor.prototype, protoProps); if (staticProps) onsetDetect_defineProperties(Constructor, staticProps); return Constructor; }
+
+/**
+ * Listen for onsets (a sharp increase in volume) within a given
+ * frequency range.
+ *
+ * @class p5.OnsetDetect
+ * @constructor
+ * @param {Number} freqLow Low frequency
+ * @param {Number} freqHigh High frequency
+ * @param {Number} threshold Amplitude threshold between 0 (no energy) and 1 (maximum)
+ * @param {Function} callback Function to call when an onset is detected
+ */
+var OnsetDetect =
+function () {
+ function OnsetDetect(freqLow, freqHigh, threshold, callback) {
+ onsetDetect_classCallCheck(this, OnsetDetect);
+
+ this.isDetected = false;
+ this.freqLow = freqLow;
+ this.freqHigh = freqHigh;
+ this.treshold = threshold;
+ this.energy = 0;
+ this.penergy = 0;
+
+ this.sensitivity = 500;
+ this.callback = callback;
+ }
+
+
+ onsetDetect_createClass(OnsetDetect, [{
+ key: "update",
+ value: function update(fftObject, callback) {
+ this.energy = fftObject.getEnergy(this.freqLow, this.freqHigh) / 255;
+
+ if (this.isDetected === false) {
+ if (this.energy - this.penergy > this.treshold) {
+ this.isDetected = true;
+
+ if (this.callback) {
+ this.callback(this.energy);
+ } else if (callback) {
+ callback(this.energy);
+ }
+
+ var self = this;
+ setTimeout(function () {
+ self.isDetected = false;
+ }, this.sensitivity);
+ }
+ }
+
+ this.penergy = this.energy;
+ }
+ }]);
+
+ return OnsetDetect;
+}();
+
+ var onsetDetect = (OnsetDetect);
+function polysynth_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function polysynth_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function polysynth_createClass(Constructor, protoProps, staticProps) { if (protoProps) polysynth_defineProperties(Constructor.prototype, protoProps); if (staticProps) polysynth_defineProperties(Constructor, staticProps); return Constructor; }
+
+
+
+
+/**
+ * An AudioVoice is used as a single voice for sound synthesis.
+ * The PolySynth class holds an array of AudioVoice, and deals
+ * with voices allocations, with setting notes to be played, and
+ * parameters to be set.
+ *
+ * @class p5.PolySynth
+ * @constructor
+ *
+ * @param {Number} [synthVoice] A monophonic synth voice inheriting
+ * the AudioVoice class. Defaults to p5.MonoSynth
+ * @param {Number} [maxVoices] Number of voices, defaults to 8;
+ * @example
+ *
+ * let polySynth;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSynth);
+ * background(220);
+ * text('click to play', 20, 20);
+ *
+ * polySynth = new p5.PolySynth();
+ * }
+ *
+ * function playSynth() {
+ * userStartAudio();
+ *
+ * // note duration (in seconds)
+ * let dur = 1.5;
+ *
+ * // time from now (in seconds)
+ * let time = 0;
+ *
+ * // velocity (volume, from 0 to 1)
+ * let vel = 0.1;
+ *
+ * // notes can overlap with each other
+ * polySynth.play('G2', vel, 0, dur);
+ * polySynth.play('C3', vel, time += 1/3, dur);
+ * polySynth.play('G3', vel, time += 1/3, dur);
+ * }
+ *
+ * let polySynth;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playSynth);
+ * background(220);
+ * text('click to play', 20, 20);
+ *
+ * polySynth = new p5.PolySynth();
+ * }
+ *
+ * function playSynth() {
+ * userStartAudio();
+ *
+ * // note duration (in seconds)
+ * let dur = 1.5;
+ *
+ * // time from now (in seconds)
+ * let time = 0;
+ *
+ * // velocity (volume, from 0 to 1)
+ * let vel = 0.1;
+ *
+ * // notes can overlap with each other
+ * polySynth.play('G2', vel, 0, dur);
+ * polySynth.play('C3', vel, time += 1/3, dur);
+ * polySynth.play('G3', vel, time += 1/3, dur);
+ * }
+ * setRange),
+ * then decayLevel would increase proportionally, to become 0.5.
+ * @param {Number} [releaseTime] Time in seconds from now (defaults to 0)
+ **/
+
+ }, {
+ key: "noteADSR",
+ value: function noteADSR(note, a, d, s, r) {
+ var timeFromNow = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+ var now = main.audiocontext.currentTime;
+ var t = now + timeFromNow;
+ this.audiovoices[this.notes[note].getValueAtTime(t)].setADSR(a, d, s, r);
+ }
+ /**
+ * Set the PolySynths global envelope. This method modifies the envelopes of each
+ * monosynth so that all notes are played with this envelope.
+ *
+ * @method setADSR
+ * @for p5.PolySynth
+ * @param {Number} [attackTime] Time (in seconds before envelope
+ * reaches Attack Level
+ * @param {Number} [decayTime] Time (in seconds) before envelope
+ * reaches Decay/Sustain Level
+ * @param {Number} [susRatio] Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+ * where 1.0 = attackLevel, 0.0 = releaseLevel.
+ * The susRatio determines the decayLevel and the level at which the
+ * sustain portion of the envelope will sustain.
+ * For example, if attackLevel is 0.4, releaseLevel is 0,
+ * and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+ * increased to 1.0 (using setRange),
+ * then decayLevel would increase proportionally, to become 0.5.
+ * @param {Number} [releaseTime] Time in seconds from now (defaults to 0)
+ **/
+
+ }, {
+ key: "setADSR",
+ value: function setADSR(a, d, s, r) {
+ this.audiovoices.forEach(function (voice) {
+ voice.setADSR(a, d, s, r);
+ });
+ }
+ /**
+ * Trigger the Attack, and Decay portion of a MonoSynth.
+ * Similar to holding down a key on a piano, but it will
+ * hold the sustain level until you let go.
+ *
+ * @method noteAttack
+ * @for p5.PolySynth
+ * @param {Number} [note] midi note on which attack should be triggered.
+ * @param {Number} [velocity] velocity of the note to play (ranging from 0 to 1)/
+ * @param {Number} [secondsFromNow] time from now (in seconds)
+ * @example
+ *
+ * let polySynth = new p5.PolySynth();
+ * let pitches = ['G', 'D', 'G', 'C'];
+ * let octaves = [2, 3, 4];
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playChord);
+ * background(220);
+ * text('tap to play', 20, 20);
+ * }
+ *
+ * function playChord() {
+ * userStartAudio();
+ *
+ * // play a chord: multiple notes at the same time
+ * for (let i = 0; i < 4; i++) {
+ * let note = random(pitches) + random(octaves);
+ * polySynth.noteAttack(note, 0.1);
+ * }
+ * }
+ *
+ * function mouseReleased() {
+ * // release all voices
+ * polySynth.noteRelease();
+ * }
+ *
+ * let polySynth = new p5.PolySynth();
+ * let pitches = ['G', 'D', 'G', 'C'];
+ * let octaves = [2, 3, 4];
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(playChord);
+ * background(220);
+ * text('tap to play', 20, 20);
+ * }
+ *
+ * function playChord() {
+ * userStartAudio();
+ *
+ * // play a chord: multiple notes at the same time
+ * for (let i = 0; i < 4; i++) {
+ * let note = random(pitches) + random(octaves);
+ * polySynth.noteAttack(note, 0.1);
+ * }
+ * }
+ *
+ * function mouseReleased() {
+ * // release all voices
+ * polySynth.noteRelease();
+ * }
+ * either LABEL or FALLBACK
\n', + 'type': 'Constant', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Environment' + }, + 'describeElement': { + 'name': 'describeElement', + 'params': [ + { + 'name': 'name', + 'description': 'name of the element
\n', + 'type': 'String' + }, + { + 'name': 'text', + 'description': 'description of the element
\n', + 'type': 'String' + }, + { + 'name': 'display', + 'description': 'either LABEL or FALLBACK
\n', + 'type': 'Constant', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Environment' + }, + 'textOutput': { + 'name': 'textOutput', + 'params': [ + { + 'name': 'display', + 'description': 'either FALLBACK or LABEL
\n', + 'type': 'Constant', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Environment' + }, + 'gridOutput': { + 'name': 'gridOutput', + 'params': [ + { + 'name': 'display', + 'description': 'either FALLBACK or LABEL
\n', + 'type': 'Constant', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Environment' + }, + 'alpha': { + 'name': 'alpha', + 'params': [ + { + 'name': 'color', + 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'blue': { + 'name': 'blue', + 'params': [ + { + 'name': 'color', + 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'brightness': { + 'name': 'brightness', + 'params': [ + { + 'name': 'color', + 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'color': { + 'name': 'color', + 'class': 'p5', + 'module': 'Color', + 'overloads': [ + { + 'params': [ + { + 'name': 'gray', + 'description': 'number specifying value between white and black.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': 'alpha value relative to current color range\n (default is 0-255).
\n', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to\n the current color range.
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value\n relative to the current color range.
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value\n relative to the current color range.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'a color string.
\n', + 'type': 'String' + } + ] + }, + { + 'params': [ + { + 'name': 'values', + 'description': 'an array containing the red, green, blue,\n and alpha components of the color.
\n', + 'type': 'Number[]' + } + ] + }, + { + 'params': [ + { + 'name': 'color', + 'description': '', + 'type': 'p5.Color' + } + ] + } + ] + }, + 'green': { + 'name': 'green', + 'params': [ + { + 'name': 'color', + 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'hue': { + 'name': 'hue', + 'params': [ + { + 'name': 'color', + 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'lerpColor': { + 'name': 'lerpColor', + 'params': [ + { + 'name': 'c1', + 'description': 'interpolate from this color.
\n', + 'type': 'p5.Color' + }, + { + 'name': 'c2', + 'description': 'interpolate to this color.
\n', + 'type': 'p5.Color' + }, + { + 'name': 'amt', + 'description': 'number between 0 and 1.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'lightness': { + 'name': 'lightness', + 'params': [ + { + 'name': 'color', + 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'red': { + 'name': 'red', + 'params': [ + { + 'name': 'color', + 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'saturation': { + 'name': 'saturation', + 'params': [ + { + 'name': 'color', + 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'beginClip': { + 'name': 'beginClip', + 'params': [ + { + 'name': 'options', + 'description': 'An object containing clip settings.
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'endClip': { + 'name': 'endClip', + 'class': 'p5', + 'module': 'Color' + }, + 'clip': { + 'name': 'clip', + 'params': [ + { + 'name': 'callback', + 'description': 'A function that draws the mask shape.
\n', + 'type': 'Function' + }, + { + 'name': 'options', + 'description': 'An object containing clip settings.
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'background': { + 'name': 'background', + 'class': 'p5', + 'module': 'Color', + 'overloads': [ + { + 'params': [ + { + 'name': 'color', + 'description': 'any value created by the color() function
\n', + 'type': 'p5.Color' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'colorstring', + 'description': 'color string, possible formats include: integer\n rgb() or rgba(), percentage rgb() or rgba(),\n 3-digit hex, 6-digit hex.
\n', + 'type': 'String' + }, + { + 'name': 'a', + 'description': 'opacity of the background relative to current\n color range (default is 0-255).
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'gray', + 'description': 'specifies a value between white and black.
\n', + 'type': 'Number' + }, + { + 'name': 'a', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'red value if color mode is RGB, or hue value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green value if color mode is RGB, or saturation value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue value if color mode is RGB, or brightness value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'a', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'values', + 'description': 'an array containing the red, green, blue\n and alpha components of the color.
\n', + 'type': 'Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'image', + 'description': 'image created with loadImage()\n or createImage(),\n to set as background.\n (must be same size as the sketch window).
\n', + 'type': 'p5.Image' + }, + { + 'name': 'a', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'clear': { + 'name': 'clear', + 'params': [ + { + 'name': 'r', + 'description': 'normalized red value.
\n', + 'type': 'Number' + }, + { + 'name': 'g', + 'description': 'normalized green value.
\n', + 'type': 'Number' + }, + { + 'name': 'b', + 'description': 'normalized blue value.
\n', + 'type': 'Number' + }, + { + 'name': 'a', + 'description': 'normalized alpha value.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'colorMode': { + 'name': 'colorMode', + 'class': 'p5', + 'module': 'Color', + 'overloads': [ + { + 'params': [ + { + 'name': 'mode', + 'description': 'either RGB, HSB or HSL, corresponding to\n Red/Green/Blue and Hue/Saturation/Brightness\n (or Lightness).
\n', + 'type': 'Constant' + }, + { + 'name': 'max', + 'description': 'range for all values.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'mode', + 'description': '', + 'type': 'Constant' + }, + { + 'name': 'max1', + 'description': 'range for the red or hue depending on the\n current color mode.
\n', + 'type': 'Number' + }, + { + 'name': 'max2', + 'description': 'range for the green or saturation depending\n on the current color mode.
\n', + 'type': 'Number' + }, + { + 'name': 'max3', + 'description': 'range for the blue or brightness/lightness\n depending on the current color mode.
\n', + 'type': 'Number' + }, + { + 'name': 'maxA', + 'description': 'range for the alpha.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'fill': { + 'name': 'fill', + 'class': 'p5', + 'module': 'Color', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red value if color mode is RGB or hue value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green value if color mode is RGB or saturation value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue value if color mode is RGB or brightness value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'a color string.
\n', + 'type': 'String' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'gray', + 'description': 'a grayscale value.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'values', + 'description': 'an array containing the red, green, blue &\n and alpha components of the color.
\n', + 'type': 'Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'the fill color.
\n', + 'type': 'p5.Color' + } + ], + 'chainable': 1 + } + ] + }, + 'noFill': { + 'name': 'noFill', + 'class': 'p5', + 'module': 'Color' + }, + 'noStroke': { + 'name': 'noStroke', + 'class': 'p5', + 'module': 'Color' + }, + 'stroke': { + 'name': 'stroke', + 'class': 'p5', + 'module': 'Color', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red value if color mode is RGB or hue value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green value if color mode is RGB or saturation value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue value if color mode is RGB or brightness value if color mode is HSB.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'a color string.
\n', + 'type': 'String' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'gray', + 'description': 'a grayscale value.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'values', + 'description': 'an array containing the red, green, blue,\n and alpha components of the color.
\n', + 'type': 'Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'the stroke color.
\n', + 'type': 'p5.Color' + } + ], + 'chainable': 1 + } + ] + }, + 'erase': { + 'name': 'erase', + 'params': [ + { + 'name': 'strengthFill', + 'description': 'a number (0-255) for the strength of erasing under a shape\'s interior.\n Defaults to 255, which is full strength.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'strengthStroke', + 'description': 'a number (0-255) for the strength of erasing under a shape\'s edge.\n Defaults to 255, which is full strength.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Color' + }, + 'noErase': { + 'name': 'noErase', + 'class': 'p5', + 'module': 'Color' + }, + 'arc': { + 'name': 'arc', + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the arc\'s ellipse.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the arc\'s ellipse.
\n', + 'type': 'Number' + }, + { + 'name': 'w', + 'description': 'width of the arc\'s ellipse by default.
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the arc\'s ellipse by default.
\n', + 'type': 'Number' + }, + { + 'name': 'start', + 'description': 'angle to start the arc, specified in radians.
\n', + 'type': 'Number' + }, + { + 'name': 'stop', + 'description': 'angle to stop the arc, specified in radians.
\n', + 'type': 'Number' + }, + { + 'name': 'mode', + 'description': 'optional parameter to determine the way of drawing\n the arc. either CHORD, PIE, or OPEN.
\n', + 'type': 'Constant', + 'optional': true + }, + { + 'name': 'detail', + 'description': 'optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the arc. Default value is 25. Won\'t\n draw a stroke for a detail of more than 50.
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'ellipse': { + 'name': 'ellipse', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the center of the ellipse.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the center of the ellipse.
\n', + 'type': 'Number' + }, + { + 'name': 'w', + 'description': 'width of the ellipse.
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the ellipse.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'w', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'detail', + 'description': 'optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the ellipse. Default value is 25. Won\'t\n draw a stroke for a detail of more than 50.
\n', + 'type': 'Integer', + 'optional': true + } + ] + } + ] + }, + 'circle': { + 'name': 'circle', + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the center of the circle.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the center of the circle.
\n', + 'type': 'Number' + }, + { + 'name': 'd', + 'description': 'diameter of the circle.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'line': { + 'name': 'line', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x1', + 'description': 'the x-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': 'the y-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': 'the x-coordinate of the second point.
\n', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': 'the y-coordinate of the second point.
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z1', + 'description': 'the z-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z2', + 'description': 'the z-coordinate of the second point.
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'point': { + 'name': 'point', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'the x-coordinate.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'the y-coordinate.
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'the z-coordinate (for WebGL mode).
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'coordinateVector', + 'description': 'the coordinate vector.
\n', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + } + ] + }, + 'quad': { + 'name': 'quad', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x1', + 'description': 'the x-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': 'the y-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': 'the x-coordinate of the second point.
\n', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': 'the y-coordinate of the second point.
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': 'the x-coordinate of the third point.
\n', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': 'the y-coordinate of the third point.
\n', + 'type': 'Number' + }, + { + 'name': 'x4', + 'description': 'the x-coordinate of the fourth point.
\n', + 'type': 'Number' + }, + { + 'name': 'y4', + 'description': 'the y-coordinate of the fourth point.
\n', + 'type': 'Number' + }, + { + 'name': 'detailX', + 'description': 'number of segments in the x-direction.
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'number of segments in the y-direction.
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z1', + 'description': 'the z-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z2', + 'description': 'the z-coordinate of the second point.
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z3', + 'description': 'the z-coordinate of the third point.
\n', + 'type': 'Number' + }, + { + 'name': 'x4', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y4', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z4', + 'description': 'the z-coordinate of the fourth point.
\n', + 'type': 'Number' + }, + { + 'name': 'detailX', + 'description': '', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': '', + 'type': 'Integer', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'rect': { + 'name': 'rect', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the rectangle.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the rectangle.
\n', + 'type': 'Number' + }, + { + 'name': 'w', + 'description': 'width of the rectangle.
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the rectangle.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'tl', + 'description': 'optional radius of top-left corner.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'tr', + 'description': 'optional radius of top-right corner.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'br', + 'description': 'optional radius of bottom-right corner.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'bl', + 'description': 'optional radius of bottom-left corner.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'w', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'detailX', + 'description': 'number of segments in the x-direction (for WebGL mode).
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'number of segments in the y-direction (for WebGL mode).
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'square': { + 'name': 'square', + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the square.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the square.
\n', + 'type': 'Number' + }, + { + 'name': 's', + 'description': 'side size of the square.
\n', + 'type': 'Number' + }, + { + 'name': 'tl', + 'description': 'optional radius of top-left corner.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'tr', + 'description': 'optional radius of top-right corner.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'br', + 'description': 'optional radius of bottom-right corner.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'bl', + 'description': 'optional radius of bottom-left corner.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'triangle': { + 'name': 'triangle', + 'params': [ + { + 'name': 'x1', + 'description': 'x-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': 'y-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': 'x-coordinate of the second point.
\n', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': 'y-coordinate of the second point.
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': 'x-coordinate of the third point.
\n', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': 'y-coordinate of the third point.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'ellipseMode': { + 'name': 'ellipseMode', + 'params': [ + { + 'name': 'mode', + 'description': 'either CENTER, RADIUS, CORNER, or CORNERS
\n', + 'type': 'Constant' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'noSmooth': { + 'name': 'noSmooth', + 'class': 'p5', + 'module': 'Shape' + }, + 'rectMode': { + 'name': 'rectMode', + 'params': [ + { + 'name': 'mode', + 'description': 'either CORNER, CORNERS, CENTER, or RADIUS
\n', + 'type': 'Constant' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'smooth': { + 'name': 'smooth', + 'class': 'p5', + 'module': 'Shape' + }, + 'strokeCap': { + 'name': 'strokeCap', + 'params': [ + { + 'name': 'cap', + 'description': 'either ROUND, SQUARE, or PROJECT
\n', + 'type': 'Constant' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'strokeJoin': { + 'name': 'strokeJoin', + 'params': [ + { + 'name': 'join', + 'description': 'either MITER, BEVEL, or ROUND
\n', + 'type': 'Constant' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'strokeWeight': { + 'name': 'strokeWeight', + 'params': [ + { + 'name': 'weight', + 'description': 'the weight of the stroke (in pixels).
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'bezier': { + 'name': 'bezier', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x1', + 'description': 'x-coordinate for the first anchor point
\n', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': 'y-coordinate for the first anchor point
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': 'x-coordinate for the first control point
\n', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': 'y-coordinate for the first control point
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': 'x-coordinate for the second control point
\n', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': 'y-coordinate for the second control point
\n', + 'type': 'Number' + }, + { + 'name': 'x4', + 'description': 'x-coordinate for the second anchor point
\n', + 'type': 'Number' + }, + { + 'name': 'y4', + 'description': 'y-coordinate for the second anchor point
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z1', + 'description': 'z-coordinate for the first anchor point
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z2', + 'description': 'z-coordinate for the first control point
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z3', + 'description': 'z-coordinate for the second control point
\n', + 'type': 'Number' + }, + { + 'name': 'x4', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y4', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z4', + 'description': 'z-coordinate for the second anchor point
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'bezierDetail': { + 'name': 'bezierDetail', + 'params': [ + { + 'name': 'detail', + 'description': 'resolution of the curves
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'bezierPoint': { + 'name': 'bezierPoint', + 'params': [ + { + 'name': 'a', + 'description': 'coordinate of first point on the curve
\n', + 'type': 'Number' + }, + { + 'name': 'b', + 'description': 'coordinate of first control point
\n', + 'type': 'Number' + }, + { + 'name': 'c', + 'description': 'coordinate of second control point
\n', + 'type': 'Number' + }, + { + 'name': 'd', + 'description': 'coordinate of second point on the curve
\n', + 'type': 'Number' + }, + { + 'name': 't', + 'description': 'value between 0 and 1
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'bezierTangent': { + 'name': 'bezierTangent', + 'params': [ + { + 'name': 'a', + 'description': 'coordinate of first point on the curve
\n', + 'type': 'Number' + }, + { + 'name': 'b', + 'description': 'coordinate of first control point
\n', + 'type': 'Number' + }, + { + 'name': 'c', + 'description': 'coordinate of second control point
\n', + 'type': 'Number' + }, + { + 'name': 'd', + 'description': 'coordinate of second point on the curve
\n', + 'type': 'Number' + }, + { + 'name': 't', + 'description': 'value between 0 and 1
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'curve': { + 'name': 'curve', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x1', + 'description': 'x-coordinate for the beginning control point
\n', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': 'y-coordinate for the beginning control point
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': 'x-coordinate for the first point
\n', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': 'y-coordinate for the first point
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': 'x-coordinate for the second point
\n', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': 'y-coordinate for the second point
\n', + 'type': 'Number' + }, + { + 'name': 'x4', + 'description': 'x-coordinate for the ending control point
\n', + 'type': 'Number' + }, + { + 'name': 'y4', + 'description': 'y-coordinate for the ending control point
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z1', + 'description': 'z-coordinate for the beginning control point
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z2', + 'description': 'z-coordinate for the first point
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z3', + 'description': 'z-coordinate for the second point
\n', + 'type': 'Number' + }, + { + 'name': 'x4', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y4', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z4', + 'description': 'z-coordinate for the ending control point
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'curveDetail': { + 'name': 'curveDetail', + 'params': [ + { + 'name': 'resolution', + 'description': 'resolution of the curves
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'curveTightness': { + 'name': 'curveTightness', + 'params': [ + { + 'name': 'amount', + 'description': 'amount of deformation from the original vertices
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'curvePoint': { + 'name': 'curvePoint', + 'params': [ + { + 'name': 'a', + 'description': 'coordinate of first control point of the curve
\n', + 'type': 'Number' + }, + { + 'name': 'b', + 'description': 'coordinate of first point
\n', + 'type': 'Number' + }, + { + 'name': 'c', + 'description': 'coordinate of second point
\n', + 'type': 'Number' + }, + { + 'name': 'd', + 'description': 'coordinate of second control point
\n', + 'type': 'Number' + }, + { + 'name': 't', + 'description': 'value between 0 and 1
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'curveTangent': { + 'name': 'curveTangent', + 'params': [ + { + 'name': 'a', + 'description': 'coordinate of first control point
\n', + 'type': 'Number' + }, + { + 'name': 'b', + 'description': 'coordinate of first point on the curve
\n', + 'type': 'Number' + }, + { + 'name': 'c', + 'description': 'coordinate of second point on the curve
\n', + 'type': 'Number' + }, + { + 'name': 'd', + 'description': 'coordinate of second conrol point
\n', + 'type': 'Number' + }, + { + 'name': 't', + 'description': 'value between 0 and 1
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'beginContour': { + 'name': 'beginContour', + 'class': 'p5', + 'module': 'Shape' + }, + 'beginShape': { + 'name': 'beginShape', + 'params': [ + { + 'name': 'kind', + 'description': 'either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS
\n', + 'type': 'Constant', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'bezierVertex': { + 'name': 'bezierVertex', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x2', + 'description': 'x-coordinate for the first control point
\n', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': 'y-coordinate for the first control point
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': 'x-coordinate for the second control point
\n', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': 'y-coordinate for the second control point
\n', + 'type': 'Number' + }, + { + 'name': 'x4', + 'description': 'x-coordinate for the anchor point
\n', + 'type': 'Number' + }, + { + 'name': 'y4', + 'description': 'y-coordinate for the anchor point
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z2', + 'description': 'z-coordinate for the first control point (for WebGL mode)
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z3', + 'description': 'z-coordinate for the second control point (for WebGL mode)
\n', + 'type': 'Number' + }, + { + 'name': 'x4', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y4', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z4', + 'description': 'z-coordinate for the anchor point (for WebGL mode)
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'curveVertex': { + 'name': 'curveVertex', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the vertex
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the vertex
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z-coordinate of the vertex (for WebGL mode)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'endContour': { + 'name': 'endContour', + 'class': 'p5', + 'module': 'Shape' + }, + 'endShape': { + 'name': 'endShape', + 'params': [ + { + 'name': 'mode', + 'description': 'use CLOSE to close the shape
\n', + 'type': 'Constant', + 'optional': true + }, + { + 'name': 'count', + 'description': 'number of times you want to draw/instance the shape (for WebGL mode).
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'quadraticVertex': { + 'name': 'quadraticVertex', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'cx', + 'description': 'x-coordinate for the control point
\n', + 'type': 'Number' + }, + { + 'name': 'cy', + 'description': 'y-coordinate for the control point
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': 'x-coordinate for the anchor point
\n', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': 'y-coordinate for the anchor point
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'cx', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'cy', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'cz', + 'description': 'z-coordinate for the control point (for WebGL mode)
\n', + 'type': 'Number' + }, + { + 'name': 'x3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z3', + 'description': 'z-coordinate for the anchor point (for WebGL mode)
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'vertex': { + 'name': 'vertex', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the vertex
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the vertex
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z-coordinate of the vertex.\n Defaults to 0 if not specified.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'u', + 'description': 'the vertex\'s texture u-coordinate
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'v', + 'description': 'the vertex\'s texture v-coordinate
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'normal': { + 'name': 'normal', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'vector', + 'description': 'A p5.Vector representing the vertex normal.
\n', + 'type': 'Vector' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': 'The x component of the vertex normal.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'The y component of the vertex normal.
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'The z component of the vertex normal.
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'VERSION': { + 'name': 'VERSION', + 'class': 'p5', + 'module': 'Constants' + }, + 'P2D': { + 'name': 'P2D', + 'class': 'p5', + 'module': 'Constants' + }, + 'WEBGL': { + 'name': 'WEBGL', + 'class': 'p5', + 'module': 'Constants' + }, + 'WEBGL2': { + 'name': 'WEBGL2', + 'class': 'p5', + 'module': 'Constants' + }, + 'ARROW': { + 'name': 'ARROW', + 'class': 'p5', + 'module': 'Constants' + }, + 'CROSS': { + 'name': 'CROSS', + 'class': 'p5', + 'module': 'Constants' + }, + 'HAND': { + 'name': 'HAND', + 'class': 'p5', + 'module': 'Constants' + }, + 'MOVE': { + 'name': 'MOVE', + 'class': 'p5', + 'module': 'Constants' + }, + 'TEXT': { + 'name': 'TEXT', + 'class': 'p5', + 'module': 'Constants' + }, + 'WAIT': { + 'name': 'WAIT', + 'class': 'p5', + 'module': 'Constants' + }, + 'HALF_PI': { + 'name': 'HALF_PI', + 'class': 'p5', + 'module': 'Constants' + }, + 'PI': { + 'name': 'PI', + 'class': 'p5', + 'module': 'Constants' + }, + 'QUARTER_PI': { + 'name': 'QUARTER_PI', + 'class': 'p5', + 'module': 'Constants' + }, + 'TAU': { + 'name': 'TAU', + 'class': 'p5', + 'module': 'Constants' + }, + 'TWO_PI': { + 'name': 'TWO_PI', + 'class': 'p5', + 'module': 'Constants' + }, + 'DEGREES': { + 'name': 'DEGREES', + 'class': 'p5', + 'module': 'Constants' + }, + 'RADIANS': { + 'name': 'RADIANS', + 'class': 'p5', + 'module': 'Constants' + }, + 'CORNER': { + 'name': 'CORNER', + 'class': 'p5', + 'module': 'Constants' + }, + 'CORNERS': { + 'name': 'CORNERS', + 'class': 'p5', + 'module': 'Constants' + }, + 'RADIUS': { + 'name': 'RADIUS', + 'class': 'p5', + 'module': 'Constants' + }, + 'RIGHT': { + 'name': 'RIGHT', + 'class': 'p5', + 'module': 'Constants' + }, + 'LEFT': { + 'name': 'LEFT', + 'class': 'p5', + 'module': 'Constants' + }, + 'CENTER': { + 'name': 'CENTER', + 'class': 'p5', + 'module': 'Constants' + }, + 'TOP': { + 'name': 'TOP', + 'class': 'p5', + 'module': 'Constants' + }, + 'BOTTOM': { + 'name': 'BOTTOM', + 'class': 'p5', + 'module': 'Constants' + }, + 'BASELINE': { + 'name': 'BASELINE', + 'class': 'p5', + 'module': 'Constants' + }, + 'POINTS': { + 'name': 'POINTS', + 'class': 'p5', + 'module': 'Constants' + }, + 'LINES': { + 'name': 'LINES', + 'class': 'p5', + 'module': 'Constants' + }, + 'LINE_STRIP': { + 'name': 'LINE_STRIP', + 'class': 'p5', + 'module': 'Constants' + }, + 'LINE_LOOP': { + 'name': 'LINE_LOOP', + 'class': 'p5', + 'module': 'Constants' + }, + 'TRIANGLES': { + 'name': 'TRIANGLES', + 'class': 'p5', + 'module': 'Constants' + }, + 'TRIANGLE_FAN': { + 'name': 'TRIANGLE_FAN', + 'class': 'p5', + 'module': 'Constants' + }, + 'TRIANGLE_STRIP': { + 'name': 'TRIANGLE_STRIP', + 'class': 'p5', + 'module': 'Constants' + }, + 'QUADS': { + 'name': 'QUADS', + 'class': 'p5', + 'module': 'Constants' + }, + 'QUAD_STRIP': { + 'name': 'QUAD_STRIP', + 'class': 'p5', + 'module': 'Constants' + }, + 'TESS': { + 'name': 'TESS', + 'class': 'p5', + 'module': 'Constants' + }, + 'CLOSE': { + 'name': 'CLOSE', + 'class': 'p5', + 'module': 'Constants' + }, + 'OPEN': { + 'name': 'OPEN', + 'class': 'p5', + 'module': 'Constants' + }, + 'CHORD': { + 'name': 'CHORD', + 'class': 'p5', + 'module': 'Constants' + }, + 'PIE': { + 'name': 'PIE', + 'class': 'p5', + 'module': 'Constants' + }, + 'PROJECT': { + 'name': 'PROJECT', + 'class': 'p5', + 'module': 'Constants' + }, + 'SQUARE': { + 'name': 'SQUARE', + 'class': 'p5', + 'module': 'Constants' + }, + 'ROUND': { + 'name': 'ROUND', + 'class': 'p5', + 'module': 'Constants' + }, + 'BEVEL': { + 'name': 'BEVEL', + 'class': 'p5', + 'module': 'Constants' + }, + 'MITER': { + 'name': 'MITER', + 'class': 'p5', + 'module': 'Constants' + }, + 'RGB': { + 'name': 'RGB', + 'class': 'p5', + 'module': 'Constants' + }, + 'HSB': { + 'name': 'HSB', + 'class': 'p5', + 'module': 'Constants' + }, + 'HSL': { + 'name': 'HSL', + 'class': 'p5', + 'module': 'Constants' + }, + 'AUTO': { + 'name': 'AUTO', + 'class': 'p5', + 'module': 'Constants' + }, + 'ALT': { + 'name': 'ALT', + 'class': 'p5', + 'module': 'Constants' + }, + 'BACKSPACE': { + 'name': 'BACKSPACE', + 'class': 'p5', + 'module': 'Constants' + }, + 'CONTROL': { + 'name': 'CONTROL', + 'class': 'p5', + 'module': 'Constants' + }, + 'DELETE': { + 'name': 'DELETE', + 'class': 'p5', + 'module': 'Constants' + }, + 'DOWN_ARROW': { + 'name': 'DOWN_ARROW', + 'class': 'p5', + 'module': 'Constants' + }, + 'ENTER': { + 'name': 'ENTER', + 'class': 'p5', + 'module': 'Constants' + }, + 'ESCAPE': { + 'name': 'ESCAPE', + 'class': 'p5', + 'module': 'Constants' + }, + 'LEFT_ARROW': { + 'name': 'LEFT_ARROW', + 'class': 'p5', + 'module': 'Constants' + }, + 'OPTION': { + 'name': 'OPTION', + 'class': 'p5', + 'module': 'Constants' + }, + 'RETURN': { + 'name': 'RETURN', + 'class': 'p5', + 'module': 'Constants' + }, + 'RIGHT_ARROW': { + 'name': 'RIGHT_ARROW', + 'class': 'p5', + 'module': 'Constants' + }, + 'SHIFT': { + 'name': 'SHIFT', + 'class': 'p5', + 'module': 'Constants' + }, + 'TAB': { + 'name': 'TAB', + 'class': 'p5', + 'module': 'Constants' + }, + 'UP_ARROW': { + 'name': 'UP_ARROW', + 'class': 'p5', + 'module': 'Constants' + }, + 'BLEND': { + 'name': 'BLEND', + 'class': 'p5', + 'module': 'Constants' + }, + 'REMOVE': { + 'name': 'REMOVE', + 'class': 'p5', + 'module': 'Constants' + }, + 'ADD': { + 'name': 'ADD', + 'class': 'p5', + 'module': 'Constants' + }, + 'DARKEST': { + 'name': 'DARKEST', + 'class': 'p5', + 'module': 'Constants' + }, + 'LIGHTEST': { + 'name': 'LIGHTEST', + 'class': 'p5', + 'module': 'Constants' + }, + 'DIFFERENCE': { + 'name': 'DIFFERENCE', + 'class': 'p5', + 'module': 'Constants' + }, + 'SUBTRACT': { + 'name': 'SUBTRACT', + 'class': 'p5', + 'module': 'Constants' + }, + 'EXCLUSION': { + 'name': 'EXCLUSION', + 'class': 'p5', + 'module': 'Constants' + }, + 'MULTIPLY': { + 'name': 'MULTIPLY', + 'class': 'p5', + 'module': 'Constants' + }, + 'SCREEN': { + 'name': 'SCREEN', + 'class': 'p5', + 'module': 'Constants' + }, + 'REPLACE': { + 'name': 'REPLACE', + 'class': 'p5', + 'module': 'Constants' + }, + 'OVERLAY': { + 'name': 'OVERLAY', + 'class': 'p5', + 'module': 'Constants' + }, + 'HARD_LIGHT': { + 'name': 'HARD_LIGHT', + 'class': 'p5', + 'module': 'Constants' + }, + 'SOFT_LIGHT': { + 'name': 'SOFT_LIGHT', + 'class': 'p5', + 'module': 'Constants' + }, + 'DODGE': { + 'name': 'DODGE', + 'class': 'p5', + 'module': 'Constants' + }, + 'BURN': { + 'name': 'BURN', + 'class': 'p5', + 'module': 'Constants' + }, + 'THRESHOLD': { + 'name': 'THRESHOLD', + 'class': 'p5', + 'module': 'Constants' + }, + 'GRAY': { + 'name': 'GRAY', + 'class': 'p5', + 'module': 'Constants' + }, + 'OPAQUE': { + 'name': 'OPAQUE', + 'class': 'p5', + 'module': 'Constants' + }, + 'INVERT': { + 'name': 'INVERT', + 'class': 'p5', + 'module': 'Constants' + }, + 'POSTERIZE': { + 'name': 'POSTERIZE', + 'class': 'p5', + 'module': 'Constants' + }, + 'DILATE': { + 'name': 'DILATE', + 'class': 'p5', + 'module': 'Constants' + }, + 'ERODE': { + 'name': 'ERODE', + 'class': 'p5', + 'module': 'Constants' + }, + 'BLUR': { + 'name': 'BLUR', + 'class': 'p5', + 'module': 'Constants' + }, + 'NORMAL': { + 'name': 'NORMAL', + 'class': 'p5', + 'module': 'Constants' + }, + 'ITALIC': { + 'name': 'ITALIC', + 'class': 'p5', + 'module': 'Constants' + }, + 'BOLD': { + 'name': 'BOLD', + 'class': 'p5', + 'module': 'Constants' + }, + 'BOLDITALIC': { + 'name': 'BOLDITALIC', + 'class': 'p5', + 'module': 'Constants' + }, + 'CHAR': { + 'name': 'CHAR', + 'class': 'p5', + 'module': 'Constants' + }, + 'WORD': { + 'name': 'WORD', + 'class': 'p5', + 'module': 'Constants' + }, + 'LINEAR': { + 'name': 'LINEAR', + 'class': 'p5', + 'module': 'Constants' + }, + 'QUADRATIC': { + 'name': 'QUADRATIC', + 'class': 'p5', + 'module': 'Constants' + }, + 'BEZIER': { + 'name': 'BEZIER', + 'class': 'p5', + 'module': 'Constants' + }, + 'CURVE': { + 'name': 'CURVE', + 'class': 'p5', + 'module': 'Constants' + }, + 'STROKE': { + 'name': 'STROKE', + 'class': 'p5', + 'module': 'Constants' + }, + 'FILL': { + 'name': 'FILL', + 'class': 'p5', + 'module': 'Constants' + }, + 'TEXTURE': { + 'name': 'TEXTURE', + 'class': 'p5', + 'module': 'Constants' + }, + 'IMMEDIATE': { + 'name': 'IMMEDIATE', + 'class': 'p5', + 'module': 'Constants' + }, + 'IMAGE': { + 'name': 'IMAGE', + 'class': 'p5', + 'module': 'Constants' + }, + 'NEAREST': { + 'name': 'NEAREST', + 'class': 'p5', + 'module': 'Constants' + }, + 'REPEAT': { + 'name': 'REPEAT', + 'class': 'p5', + 'module': 'Constants' + }, + 'CLAMP': { + 'name': 'CLAMP', + 'class': 'p5', + 'module': 'Constants' + }, + 'MIRROR': { + 'name': 'MIRROR', + 'class': 'p5', + 'module': 'Constants' + }, + 'LANDSCAPE': { + 'name': 'LANDSCAPE', + 'class': 'p5', + 'module': 'Constants' + }, + 'PORTRAIT': { + 'name': 'PORTRAIT', + 'class': 'p5', + 'module': 'Constants' + }, + 'GRID': { + 'name': 'GRID', + 'class': 'p5', + 'module': 'Constants' + }, + 'AXES': { + 'name': 'AXES', + 'class': 'p5', + 'module': 'Constants' + }, + 'LABEL': { + 'name': 'LABEL', + 'class': 'p5', + 'module': 'Constants' + }, + 'FALLBACK': { + 'name': 'FALLBACK', + 'class': 'p5', + 'module': 'Constants' + }, + 'CONTAIN': { + 'name': 'CONTAIN', + 'class': 'p5', + 'module': 'Constants' + }, + 'COVER': { + 'name': 'COVER', + 'class': 'p5', + 'module': 'Constants' + }, + 'UNSIGNED_BYTE': { + 'name': 'UNSIGNED_BYTE', + 'class': 'p5', + 'module': 'Constants' + }, + 'UNSIGNED_INT': { + 'name': 'UNSIGNED_INT', + 'class': 'p5', + 'module': 'Constants' + }, + 'FLOAT': { + 'name': 'FLOAT', + 'class': 'p5', + 'module': 'Constants' + }, + 'HALF_FLOAT': { + 'name': 'HALF_FLOAT', + 'class': 'p5', + 'module': 'Constants' + }, + 'RGBA': { + 'name': 'RGBA', + 'class': 'p5', + 'module': 'Constants' + }, + 'print': { + 'name': 'print', + 'params': [ + { + 'name': 'contents', + 'description': 'any combination of Number, String, Object, Boolean,\n Array to print
\n', + 'type': 'Any' + } + ], + 'class': 'p5', + 'module': 'Environment' + }, + 'frameCount': { + 'name': 'frameCount', + 'class': 'p5', + 'module': 'Environment' + }, + 'deltaTime': { + 'name': 'deltaTime', + 'class': 'p5', + 'module': 'Environment' + }, + 'focused': { + 'name': 'focused', + 'class': 'p5', + 'module': 'Environment' + }, + 'cursor': { + 'name': 'cursor', + 'params': [ + { + 'name': 'type', + 'description': 'Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n Native CSS properties: \'grab\', \'progress\', \'cell\' etc.\n External: path for cursor\'s images\n (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n For more information on Native CSS cursors and url visit:\n https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
\n', + 'type': 'String|Constant' + }, + { + 'name': 'x', + 'description': 'the horizontal active spot of the cursor (must be less than 32)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'y', + 'description': 'the vertical active spot of the cursor (must be less than 32)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Environment' + }, + 'frameRate': { + 'name': 'frameRate', + 'class': 'p5', + 'module': 'Environment', + 'overloads': [ + { + 'params': [ + { + 'name': 'fps', + 'description': 'number of frames to be displayed every second
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'getTargetFrameRate': { + 'name': 'getTargetFrameRate', + 'class': 'p5', + 'module': 'Environment' + }, + 'noCursor': { + 'name': 'noCursor', + 'class': 'p5', + 'module': 'Environment' + }, + 'webglVersion': { + 'name': 'webglVersion', + 'class': 'p5', + 'module': 'Environment' + }, + 'displayWidth': { + 'name': 'displayWidth', + 'class': 'p5', + 'module': 'Environment' + }, + 'displayHeight': { + 'name': 'displayHeight', + 'class': 'p5', + 'module': 'Environment' + }, + 'windowWidth': { + 'name': 'windowWidth', + 'class': 'p5', + 'module': 'Environment' + }, + 'windowHeight': { + 'name': 'windowHeight', + 'class': 'p5', + 'module': 'Environment' + }, + 'windowResized': { + 'name': 'windowResized', + 'params': [ + { + 'name': 'event', + 'description': 'optional Event callback argument.
\n', + 'type': 'UIEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Environment' + }, + 'width': { + 'name': 'width', + 'class': 'p5', + 'module': 'Environment' + }, + 'height': { + 'name': 'height', + 'class': 'p5', + 'module': 'Environment' + }, + 'fullscreen': { + 'name': 'fullscreen', + 'params': [ + { + 'name': 'val', + 'description': 'whether the sketch should be in fullscreen mode\nor not
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Environment' + }, + 'pixelDensity': { + 'name': 'pixelDensity', + 'class': 'p5', + 'module': 'Environment', + 'overloads': [ + { + 'params': [ + { + 'name': 'val', + 'description': 'whether or how much the sketch should scale
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'displayDensity': { + 'name': 'displayDensity', + 'class': 'p5', + 'module': 'Environment' + }, + 'getURL': { + 'name': 'getURL', + 'class': 'p5', + 'module': 'Environment' + }, + 'getURLPath': { + 'name': 'getURLPath', + 'class': 'p5', + 'module': 'Environment' + }, + 'getURLParams': { + 'name': 'getURLParams', + 'class': 'p5', + 'module': 'Environment' + }, + 'preload': { + 'name': 'preload', + 'class': 'p5', + 'module': 'Structure' + }, + 'setup': { + 'name': 'setup', + 'class': 'p5', + 'module': 'Structure' + }, + 'draw': { + 'name': 'draw', + 'class': 'p5', + 'module': 'Structure' + }, + 'remove': { + 'name': 'remove', + 'class': 'p5', + 'module': 'Structure' + }, + 'disableFriendlyErrors': { + 'name': 'disableFriendlyErrors', + 'class': 'p5', + 'module': 'Structure' + }, + 'let': { + 'name': 'let', + 'class': 'p5', + 'module': 'Foundation' + }, + 'const': { + 'name': 'const', + 'class': 'p5', + 'module': 'Foundation' + }, + '===': { + 'name': '===', + 'class': 'p5', + 'module': 'Foundation' + }, + '>': { + 'name': '>', + 'class': 'p5', + 'module': 'Foundation' + }, + '>=': { + 'name': '>=', + 'class': 'p5', + 'module': 'Foundation' + }, + '<': { + 'name': '<', + 'class': 'p5', + 'module': 'Foundation' + }, + '<=': { + 'name': '<=', + 'class': 'p5', + 'module': 'Foundation' + }, + 'if-else': { + 'name': 'if-else', + 'class': 'p5', + 'module': 'Foundation' + }, + 'function': { + 'name': 'function', + 'class': 'p5', + 'module': 'Foundation' + }, + 'return': { + 'name': 'return', + 'class': 'p5', + 'module': 'Foundation' + }, + 'boolean': { + 'name': 'boolean', + 'params': [ + { + 'name': 'n', + 'description': 'value to parse
\n', + 'type': 'String|Boolean|Number|Array' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'string': { + 'name': 'string', + 'class': 'p5', + 'module': 'Foundation' + }, + 'number': { + 'name': 'number', + 'class': 'p5', + 'module': 'Foundation' + }, + 'object': { + 'name': 'object', + 'class': 'p5', + 'module': 'Foundation' + }, + 'class': { + 'name': 'class', + 'class': 'p5', + 'module': 'Foundation' + }, + 'for': { + 'name': 'for', + 'class': 'p5', + 'module': 'Foundation' + }, + 'while': { + 'name': 'while', + 'class': 'p5', + 'module': 'Foundation' + }, + 'createCanvas': { + 'name': 'createCanvas', + 'class': 'p5', + 'module': 'Rendering', + 'overloads': [ + { + 'params': [ + { + 'name': 'w', + 'description': 'width of the canvas
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the canvas
\n', + 'type': 'Number' + }, + { + 'name': 'renderer', + 'description': 'either P2D or WEBGL
\n', + 'type': 'Constant', + 'optional': true + }, + { + 'name': 'canvas', + 'description': 'existing html canvas element
\n', + 'type': 'HTMLCanvasElement', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'w', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'canvas', + 'description': '', + 'type': 'HTMLCanvasElement', + 'optional': true + } + ] + } + ] + }, + 'resizeCanvas': { + 'name': 'resizeCanvas', + 'params': [ + { + 'name': 'w', + 'description': 'width of the canvas
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the canvas
\n', + 'type': 'Number' + }, + { + 'name': 'noRedraw', + 'description': 'don\'t redraw the canvas immediately
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Rendering' + }, + 'noCanvas': { + 'name': 'noCanvas', + 'class': 'p5', + 'module': 'Rendering' + }, + 'createGraphics': { + 'name': 'createGraphics', + 'class': 'p5', + 'module': 'Rendering', + 'overloads': [ + { + 'params': [ + { + 'name': 'w', + 'description': 'width of the offscreen graphics buffer
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the offscreen graphics buffer
\n', + 'type': 'Number' + }, + { + 'name': 'renderer', + 'description': 'either P2D or WEBGL\n undefined defaults to p2d
\n', + 'type': 'Constant', + 'optional': true + }, + { + 'name': 'canvas', + 'description': 'existing html canvas element
\n', + 'type': 'HTMLCanvasElement', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'w', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'canvas', + 'description': '', + 'type': 'HTMLCanvasElement', + 'optional': true + } + ] + } + ] + }, + 'createFramebuffer': { + 'name': 'createFramebuffer', + 'params': [ + { + 'name': 'options', + 'description': 'An optional object with configuration
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Rendering' + }, + 'blendMode': { + 'name': 'blendMode', + 'params': [ + { + 'name': 'mode', + 'description': 'blend mode to set for canvas.\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
\n', + 'type': 'Constant' + } + ], + 'class': 'p5', + 'module': 'Rendering' + }, + 'drawingContext': { + 'name': 'drawingContext', + 'class': 'p5', + 'module': 'Rendering' + }, + 'noLoop': { + 'name': 'noLoop', + 'class': 'p5', + 'module': 'Structure' + }, + 'loop': { + 'name': 'loop', + 'class': 'p5', + 'module': 'Structure' + }, + 'isLooping': { + 'name': 'isLooping', + 'class': 'p5', + 'module': 'Structure' + }, + 'push': { + 'name': 'push', + 'class': 'p5', + 'module': 'Structure' + }, + 'pop': { + 'name': 'pop', + 'class': 'p5', + 'module': 'Structure' + }, + 'redraw': { + 'name': 'redraw', + 'params': [ + { + 'name': 'n', + 'description': 'Redraw for n-times. The default value is 1.
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Structure' + }, + 'p5': { + 'name': 'p5', + 'params': [ + { + 'name': 'sketch', + 'description': 'a function containing a p5.js sketch
\n', + 'type': 'Object' + }, + { + 'name': 'node', + 'description': 'ID or pointer to HTML DOM node to contain sketch in
\n', + 'type': 'String|Object' + } + ], + 'class': 'p5', + 'module': 'Structure' + }, + 'applyMatrix': { + 'name': 'applyMatrix', + 'class': 'p5', + 'module': 'Transform', + 'overloads': [ + { + 'params': [ + { + 'name': 'arr', + 'description': 'an array of numbers - should be 6 or 16 length (2×3 or 4×4 matrix values)
\n', + 'type': 'Array' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'a', + 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'b', + 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'c', + 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'd', + 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'e', + 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'f', + 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'a', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'b', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'c', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'd', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'e', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'f', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'g', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'i', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'j', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'k', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'l', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'm', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'n', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'o', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + }, + { + 'name': 'p', + 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'resetMatrix': { + 'name': 'resetMatrix', + 'class': 'p5', + 'module': 'Transform' + }, + 'rotate': { + 'name': 'rotate', + 'params': [ + { + 'name': 'angle', + 'description': 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', + 'type': 'Number' + }, + { + 'name': 'axis', + 'description': '(in 3d) the axis to rotate around
\n', + 'type': 'p5.Vector|Number[]', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Transform' + }, + 'rotateX': { + 'name': 'rotateX', + 'params': [ + { + 'name': 'angle', + 'description': 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Transform' + }, + 'rotateY': { + 'name': 'rotateY', + 'params': [ + { + 'name': 'angle', + 'description': 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Transform' + }, + 'rotateZ': { + 'name': 'rotateZ', + 'params': [ + { + 'name': 'angle', + 'description': 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Transform' + }, + 'scale': { + 'name': 'scale', + 'class': 'p5', + 'module': 'Transform', + 'overloads': [ + { + 'params': [ + { + 'name': 's', + 'description': 'percent to scale the object, or percentage to\n scale the object in the x-axis if multiple arguments\n are given
\n', + 'type': 'Number|p5.Vector|Number[]' + }, + { + 'name': 'y', + 'description': 'percent to scale the object in the y-axis
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'percent to scale the object in the z-axis (webgl only)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'scales', + 'description': 'per-axis percents to scale the object
\n', + 'type': 'p5.Vector|Number[]' + } + ], + 'chainable': 1 + } + ] + }, + 'shearX': { + 'name': 'shearX', + 'params': [ + { + 'name': 'angle', + 'description': 'angle of shear specified in radians or degrees,\n depending on current angleMode
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Transform' + }, + 'shearY': { + 'name': 'shearY', + 'params': [ + { + 'name': 'angle', + 'description': 'angle of shear specified in radians or degrees,\n depending on current angleMode
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Transform' + }, + 'translate': { + 'name': 'translate', + 'class': 'p5', + 'module': 'Transform', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'left/right translation
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'up/down translation
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'forward/backward translation (WEBGL only)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'vector', + 'description': 'the vector to translate by
\n', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + } + ] + }, + 'storeItem': { + 'name': 'storeItem', + 'params': [ + { + 'name': 'key', + 'description': '', + 'type': 'String' + }, + { + 'name': 'value', + 'description': '', + 'type': 'String|Number|Object|Boolean|p5.Color|p5.Vector' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'getItem': { + 'name': 'getItem', + 'params': [ + { + 'name': 'key', + 'description': 'name that you wish to use to store in local storage
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'clearStorage': { + 'name': 'clearStorage', + 'class': 'p5', + 'module': 'Data' + }, + 'removeItem': { + 'name': 'removeItem', + 'params': [ + { + 'name': 'key', + 'description': '', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'createStringDict': { + 'name': 'createStringDict', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'key', + 'description': '', + 'type': 'String' + }, + { + 'name': 'value', + 'description': '', + 'type': 'String' + } + ] + }, + { + 'params': [ + { + 'name': 'object', + 'description': 'object
\n', + 'type': 'Object' + } + ] + } + ] + }, + 'createNumberDict': { + 'name': 'createNumberDict', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'key', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'value', + 'description': '', + 'type': 'Number' + } + ] + }, + { + 'params': [ + { + 'name': 'object', + 'description': 'object
\n', + 'type': 'Object' + } + ] + } + ] + }, + 'select': { + 'name': 'select', + 'params': [ + { + 'name': 'selectors', + 'description': 'CSS selector string of element to search for
\n', + 'type': 'String' + }, + { + 'name': 'container', + 'description': 'CSS selector string, p5.Element, or\n HTML element to search within
\n', + 'type': 'String|p5.Element|HTMLElement', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'selectAll': { + 'name': 'selectAll', + 'params': [ + { + 'name': 'selectors', + 'description': 'CSS selector string of elements to search for
\n', + 'type': 'String' + }, + { + 'name': 'container', + 'description': 'CSS selector string, p5.Element\n , or HTML element to search within
\n', + 'type': 'String|p5.Element|HTMLElement', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'removeElements': { + 'name': 'removeElements', + 'class': 'p5', + 'module': 'DOM' + }, + 'changed': { + 'name': 'changed', + 'params': [ + { + 'name': 'fxn', + 'description': 'function to be fired when the value of\n an element changes.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when any user input is\n detected within the element.\n if false is passed instead, the previously\n firing function will no longer fire.
inner HTML for element created
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createP': { + 'name': 'createP', + 'params': [ + { + 'name': 'html', + 'description': 'inner HTML for element created
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createSpan': { + 'name': 'createSpan', + 'params': [ + { + 'name': 'html', + 'description': 'inner HTML for element created
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createImg': { + 'name': 'createImg', + 'class': 'p5', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + { + 'name': 'src', + 'description': 'src path or url for image
\n', + 'type': 'String' + }, + { + 'name': 'alt', + 'description': 'alternate text to be used if image does not load. You can use also an empty string ("") if that an image is not intended to be viewed.
crossOrigin property of the img element; use either \'anonymous\' or \'use-credentials\' to retrieve the image with cross-origin access (for later use with canvas. if an empty string("") is passed, CORS is not used
callback to be called once image data is loaded with the p5.Element as argument
\n', + 'type': 'Function', + 'optional': true + } + ] + } + ] + }, + 'createA': { + 'name': 'createA', + 'params': [ + { + 'name': 'href', + 'description': 'url of page to link to
\n', + 'type': 'String' + }, + { + 'name': 'html', + 'description': 'inner html of link element to display
\n', + 'type': 'String' + }, + { + 'name': 'target', + 'description': 'target where new link should open,\n could be _blank, _self, _parent, _top.
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createSlider': { + 'name': 'createSlider', + 'params': [ + { + 'name': 'min', + 'description': 'minimum value of the slider
\n', + 'type': 'Number' + }, + { + 'name': 'max', + 'description': 'maximum value of the slider
\n', + 'type': 'Number' + }, + { + 'name': 'value', + 'description': 'default value of the slider
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'step', + 'description': 'step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createButton': { + 'name': 'createButton', + 'params': [ + { + 'name': 'label', + 'description': 'label displayed on the button
\n', + 'type': 'String' + }, + { + 'name': 'value', + 'description': 'value of the button
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createCheckbox': { + 'name': 'createCheckbox', + 'params': [ + { + 'name': 'label', + 'description': 'label displayed after checkbox
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'value', + 'description': 'value of the checkbox; checked is true, unchecked is false
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createSelect': { + 'name': 'createSelect', + 'class': 'p5', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + { + 'name': 'multiple', + 'description': 'true if dropdown should support multiple selections
\n', + 'type': 'Boolean', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'existing', + 'description': 'DOM select element
\n', + 'type': 'Object' + } + ] + } + ] + }, + 'createRadio': { + 'name': 'createRadio', + 'class': 'p5', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + { + 'name': 'containerElement', + 'description': 'A container HTML Element, either a div\nor span, inside which all existing radio inputs will be considered as options.
\n', + 'type': 'Object' + }, + { + 'name': 'name', + 'description': 'A name parameter for each Input Element.
\n', + 'type': 'String', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'name', + 'description': '', + 'type': 'String' + } + ] + }, + { + 'params': [ + ] + } + ] + }, + 'createColorPicker': { + 'name': 'createColorPicker', + 'params': [ + { + 'name': 'value', + 'description': 'default color of element
\n', + 'type': 'String|p5.Color', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createInput': { + 'name': 'createInput', + 'class': 'p5', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + { + 'name': 'value', + 'description': 'default value of the input box
\n', + 'type': 'String' + }, + { + 'name': 'type', + 'description': 'type of text, ie text, password etc. Defaults to text.\n Needs a value to be specified first.
\n', + 'type': 'String', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'value', + 'description': '', + 'type': 'String', + 'optional': true + } + ] + } + ] + }, + 'createFileInput': { + 'name': 'createFileInput', + 'params': [ + { + 'name': 'callback', + 'description': 'callback function for when a file is loaded
\n', + 'type': 'Function' + }, + { + 'name': 'multiple', + 'description': 'optional, to allow multiple files to be selected
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createVideo': { + 'name': 'createVideo', + 'params': [ + { + 'name': 'src', + 'description': 'path to a video file, or array of paths for\n supporting different browsers
\n', + 'type': 'String|String[]' + }, + { + 'name': 'callback', + 'description': 'callback function to be called upon\n \'canplaythrough\' event fire, that is, when the\n browser can play the media, and estimates that\n enough data has been loaded to play the media\n up to its end without having to stop for\n further buffering of content
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createAudio': { + 'name': 'createAudio', + 'params': [ + { + 'name': 'src', + 'description': 'path to an audio file, or array of paths\n for supporting different browsers
\n', + 'type': 'String|String[]', + 'optional': true + }, + { + 'name': 'callback', + 'description': 'callback function to be called upon\n \'canplaythrough\' event fire, that is, when the\n browser can play the media, and estimates that\n enough data has been loaded to play the media\n up to its end without having to stop for\n further buffering of content
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createCapture': { + 'name': 'createCapture', + 'params': [ + { + 'name': 'type', + 'description': 'type of capture, either VIDEO or\n AUDIO if none specified, default both,\n or a Constraints object
\n', + 'type': 'String|Constant|Object' + }, + { + 'name': 'callback', + 'description': 'function to be called once\n stream has loaded
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'createElement': { + 'name': 'createElement', + 'params': [ + { + 'name': 'tag', + 'description': 'tag for the new element
\n', + 'type': 'String' + }, + { + 'name': 'content', + 'description': 'html content to be inserted into the element
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'DOM' + }, + 'deviceOrientation': { + 'name': 'deviceOrientation', + 'class': 'p5', + 'module': 'Events' + }, + 'accelerationX': { + 'name': 'accelerationX', + 'class': 'p5', + 'module': 'Events' + }, + 'accelerationY': { + 'name': 'accelerationY', + 'class': 'p5', + 'module': 'Events' + }, + 'accelerationZ': { + 'name': 'accelerationZ', + 'class': 'p5', + 'module': 'Events' + }, + 'pAccelerationX': { + 'name': 'pAccelerationX', + 'class': 'p5', + 'module': 'Events' + }, + 'pAccelerationY': { + 'name': 'pAccelerationY', + 'class': 'p5', + 'module': 'Events' + }, + 'pAccelerationZ': { + 'name': 'pAccelerationZ', + 'class': 'p5', + 'module': 'Events' + }, + 'rotationX': { + 'name': 'rotationX', + 'class': 'p5', + 'module': 'Events' + }, + 'rotationY': { + 'name': 'rotationY', + 'class': 'p5', + 'module': 'Events' + }, + 'rotationZ': { + 'name': 'rotationZ', + 'class': 'p5', + 'module': 'Events' + }, + 'pRotationX': { + 'name': 'pRotationX', + 'class': 'p5', + 'module': 'Events' + }, + 'pRotationY': { + 'name': 'pRotationY', + 'class': 'p5', + 'module': 'Events' + }, + 'pRotationZ': { + 'name': 'pRotationZ', + 'class': 'p5', + 'module': 'Events' + }, + 'turnAxis': { + 'name': 'turnAxis', + 'class': 'p5', + 'module': 'Events' + }, + 'setMoveThreshold': { + 'name': 'setMoveThreshold', + 'params': [ + { + 'name': 'value', + 'description': 'The threshold value
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'setShakeThreshold': { + 'name': 'setShakeThreshold', + 'params': [ + { + 'name': 'value', + 'description': 'The threshold value
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'deviceMoved': { + 'name': 'deviceMoved', + 'class': 'p5', + 'module': 'Events' + }, + 'deviceTurned': { + 'name': 'deviceTurned', + 'class': 'p5', + 'module': 'Events' + }, + 'deviceShaken': { + 'name': 'deviceShaken', + 'class': 'p5', + 'module': 'Events' + }, + 'keyIsPressed': { + 'name': 'keyIsPressed', + 'class': 'p5', + 'module': 'Events' + }, + 'key': { + 'name': 'key', + 'class': 'p5', + 'module': 'Events' + }, + 'keyCode': { + 'name': 'keyCode', + 'class': 'p5', + 'module': 'Events' + }, + 'keyPressed': { + 'name': 'keyPressed', + 'params': [ + { + 'name': 'event', + 'description': 'optional KeyboardEvent callback argument.
\n', + 'type': 'KeyboardEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'keyReleased': { + 'name': 'keyReleased', + 'params': [ + { + 'name': 'event', + 'description': 'optional KeyboardEvent callback argument.
\n', + 'type': 'KeyboardEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'keyTyped': { + 'name': 'keyTyped', + 'params': [ + { + 'name': 'event', + 'description': 'optional KeyboardEvent callback argument.
\n', + 'type': 'KeyboardEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'keyIsDown': { + 'name': 'keyIsDown', + 'params': [ + { + 'name': 'code', + 'description': 'The key to check for.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'movedX': { + 'name': 'movedX', + 'class': 'p5', + 'module': 'Events' + }, + 'movedY': { + 'name': 'movedY', + 'class': 'p5', + 'module': 'Events' + }, + 'mouseX': { + 'name': 'mouseX', + 'class': 'p5', + 'module': 'Events' + }, + 'mouseY': { + 'name': 'mouseY', + 'class': 'p5', + 'module': 'Events' + }, + 'pmouseX': { + 'name': 'pmouseX', + 'class': 'p5', + 'module': 'Events' + }, + 'pmouseY': { + 'name': 'pmouseY', + 'class': 'p5', + 'module': 'Events' + }, + 'winMouseX': { + 'name': 'winMouseX', + 'class': 'p5', + 'module': 'Events' + }, + 'winMouseY': { + 'name': 'winMouseY', + 'class': 'p5', + 'module': 'Events' + }, + 'pwinMouseX': { + 'name': 'pwinMouseX', + 'class': 'p5', + 'module': 'Events' + }, + 'pwinMouseY': { + 'name': 'pwinMouseY', + 'class': 'p5', + 'module': 'Events' + }, + 'mouseButton': { + 'name': 'mouseButton', + 'class': 'p5', + 'module': 'Events' + }, + 'mouseIsPressed': { + 'name': 'mouseIsPressed', + 'class': 'p5', + 'module': 'Events' + }, + 'mouseMoved': { + 'name': 'mouseMoved', + 'params': [ + { + 'name': 'event', + 'description': 'optional MouseEvent callback argument.
\n', + 'type': 'MouseEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'mouseDragged': { + 'name': 'mouseDragged', + 'params': [ + { + 'name': 'event', + 'description': 'optional MouseEvent callback argument.
\n', + 'type': 'MouseEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'mousePressed': { + 'name': 'mousePressed', + 'params': [ + { + 'name': 'event', + 'description': 'optional MouseEvent callback argument.
\n', + 'type': 'MouseEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'mouseReleased': { + 'name': 'mouseReleased', + 'params': [ + { + 'name': 'event', + 'description': 'optional MouseEvent callback argument.
\n', + 'type': 'MouseEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'mouseClicked': { + 'name': 'mouseClicked', + 'params': [ + { + 'name': 'event', + 'description': 'optional MouseEvent callback argument.
\n', + 'type': 'MouseEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'doubleClicked': { + 'name': 'doubleClicked', + 'params': [ + { + 'name': 'event', + 'description': 'optional MouseEvent callback argument.
\n', + 'type': 'MouseEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'mouseWheel': { + 'name': 'mouseWheel', + 'params': [ + { + 'name': 'event', + 'description': 'optional WheelEvent callback argument.
\n', + 'type': 'WheelEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'requestPointerLock': { + 'name': 'requestPointerLock', + 'class': 'p5', + 'module': 'Events' + }, + 'exitPointerLock': { + 'name': 'exitPointerLock', + 'class': 'p5', + 'module': 'Events' + }, + 'touches': { + 'name': 'touches', + 'class': 'p5', + 'module': 'Events' + }, + 'touchStarted': { + 'name': 'touchStarted', + 'params': [ + { + 'name': 'event', + 'description': 'optional TouchEvent callback argument.
\n', + 'type': 'TouchEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'touchMoved': { + 'name': 'touchMoved', + 'params': [ + { + 'name': 'event', + 'description': 'optional TouchEvent callback argument.
\n', + 'type': 'TouchEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'touchEnded': { + 'name': 'touchEnded', + 'params': [ + { + 'name': 'event', + 'description': 'optional TouchEvent callback argument.
\n', + 'type': 'TouchEvent', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Events' + }, + 'createImage': { + 'name': 'createImage', + 'params': [ + { + 'name': 'width', + 'description': 'width in pixels.
\n', + 'type': 'Integer' + }, + { + 'name': 'height', + 'description': 'height in pixels.
\n', + 'type': 'Integer' + } + ], + 'class': 'p5', + 'module': 'Image' + }, + 'saveCanvas': { + 'name': 'saveCanvas', + 'class': 'p5', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'selectedCanvas', + 'description': 'reference to a\n specific HTML5 canvas element.
\n', + 'type': 'p5.Element|HTMLCanvasElement' + }, + { + 'name': 'filename', + 'description': 'file name. Defaults to \'untitled\'.
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'extension', + 'description': 'file extension, either \'jpg\' or \'png\'. Defaults to \'png\'.
\n', + 'type': 'String', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'filename', + 'description': '', + 'type': 'String', + 'optional': true + }, + { + 'name': 'extension', + 'description': '', + 'type': 'String', + 'optional': true + } + ] + } + ] + }, + 'saveFrames': { + 'name': 'saveFrames', + 'params': [ + { + 'name': 'filename', + 'description': 'prefix of file name.
\n', + 'type': 'String' + }, + { + 'name': 'extension', + 'description': 'file extension, either \'jpg\' or \'png\'.
\n', + 'type': 'String' + }, + { + 'name': 'duration', + 'description': 'duration in seconds to record. This parameter will be constrained to be less or equal to 15.
\n', + 'type': 'Number' + }, + { + 'name': 'framerate', + 'description': 'number of frames to save per second. This parameter will be constrained to be less or equal to 22.
\n', + 'type': 'Number' + }, + { + 'name': 'callback', + 'description': 'callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData, filename, and extension.
path of the image to be loaded or base64 encoded image.
\n', + 'type': 'String' + }, + { + 'name': 'successCallback', + 'description': 'function called with\n p5.Image once it\n loads.
\n', + 'type': 'function(p5.Image)', + 'optional': true + }, + { + 'name': 'failureCallback', + 'description': 'function called with event\n error if the image fails to load.
\n', + 'type': 'Function(Event)', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Image' + }, + 'saveGif': { + 'name': 'saveGif', + 'params': [ + { + 'name': 'filename', + 'description': 'file name of gif.
\n', + 'type': 'String' + }, + { + 'name': 'duration', + 'description': 'duration in seconds to capture from the sketch.
\n', + 'type': 'Number' + }, + { + 'name': 'options', + 'description': 'an object that can contain five more properties:\n delay, a Number specifying how much time to wait before recording;\n units, a String that can be either \'seconds\' or \'frames\'. By default it\'s \'seconds’;\n silent, a Boolean that defines presence of progress notifications. By default it’s false;\n notificationDuration, a Number that defines how long in seconds the final notification\n will live. By default it\'s 0, meaning the notification will never be removed;\n notificationID, a String that specifies the id of the notification\'s DOM element. By default it’s \'progressBar’.
image to display.
\n', + 'type': 'p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture' + }, + { + 'name': 'x', + 'description': 'x-coordinate of the top-left corner of the image.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the top-left corner of the image.
\n', + 'type': 'Number' + }, + { + 'name': 'width', + 'description': 'width to draw the image.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'height', + 'description': 'height to draw the image.
\n', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'img', + 'description': '', + 'type': 'p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture' + }, + { + 'name': 'dx', + 'description': 'the x-coordinate of the destination\n rectangle in which to draw the source image
\n', + 'type': 'Number' + }, + { + 'name': 'dy', + 'description': 'the y-coordinate of the destination\n rectangle in which to draw the source image
\n', + 'type': 'Number' + }, + { + 'name': 'dWidth', + 'description': 'the width of the destination rectangle
\n', + 'type': 'Number' + }, + { + 'name': 'dHeight', + 'description': 'the height of the destination rectangle
\n', + 'type': 'Number' + }, + { + 'name': 'sx', + 'description': 'the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n', + 'type': 'Number' + }, + { + 'name': 'sy', + 'description': 'the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n', + 'type': 'Number' + }, + { + 'name': 'sWidth', + 'description': 'the width of the subsection of the\n source image to draw into the destination\n rectangle
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'sHeight', + 'description': 'the height of the subsection of the\n source image to draw into the destination rectangle
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'fit', + 'description': 'either CONTAIN or COVER
\n', + 'type': 'Constant', + 'optional': true + }, + { + 'name': 'xAlign', + 'description': 'either LEFT, RIGHT or CENTER default is CENTER
\n', + 'type': 'Constant', + 'optional': true + }, + { + 'name': 'yAlign', + 'description': 'either TOP, BOTTOM or CENTER default is CENTER
\n', + 'type': 'Constant', + 'optional': true + } + ] + } + ] + }, + 'tint': { + 'name': 'tint', + 'class': 'p5', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value.
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value.
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'CSS color string.
\n', + 'type': 'String' + } + ] + }, + { + 'params': [ + { + 'name': 'gray', + 'description': 'grayscale value.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'values', + 'description': 'array containing the red, green, blue &\n alpha components of the color.
\n', + 'type': 'Number[]' + } + ] + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'the tint color
\n', + 'type': 'p5.Color' + } + ] + } + ] + }, + 'noTint': { + 'name': 'noTint', + 'class': 'p5', + 'module': 'Image' + }, + 'imageMode': { + 'name': 'imageMode', + 'params': [ + { + 'name': 'mode', + 'description': 'either CORNER, CORNERS, or CENTER.
\n', + 'type': 'Constant' + } + ], + 'class': 'p5', + 'module': 'Image' + }, + 'pixels': { + 'name': 'pixels', + 'class': 'p5', + 'module': 'Image' + }, + 'blend': { + 'name': 'blend', + 'class': 'p5', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'srcImage', + 'description': 'source image.
\n', + 'type': 'p5.Image' + }, + { + 'name': 'sx', + 'description': 'x-coordinate of the source\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'sy', + 'description': 'y-coordinate of the source\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'sw', + 'description': 'source image width.
\n', + 'type': 'Integer' + }, + { + 'name': 'sh', + 'description': 'source image height.
\n', + 'type': 'Integer' + }, + { + 'name': 'dx', + 'description': 'x-coordinate of the destination\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'dy', + 'description': 'y-coordinate of the destination\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'dw', + 'description': 'destination image width.
\n', + 'type': 'Integer' + }, + { + 'name': 'dh', + 'description': 'destination image height.
\n', + 'type': 'Integer' + }, + { + 'name': 'blendMode', + 'description': 'the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\n', + 'type': 'Constant' + } + ] + }, + { + 'params': [ + { + 'name': 'sx', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sy', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sw', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sh', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dx', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dy', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dw', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dh', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'blendMode', + 'description': '', + 'type': 'Constant' + } + ] + } + ] + }, + 'copy': { + 'name': 'copy', + 'class': 'p5', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'srcImage', + 'description': 'source image.
\n', + 'type': 'p5.Image|p5.Element' + }, + { + 'name': 'sx', + 'description': 'x-coordinate of the source\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'sy', + 'description': 'y-coordinate of the source\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'sw', + 'description': 'source image width.
\n', + 'type': 'Integer' + }, + { + 'name': 'sh', + 'description': 'source image height.
\n', + 'type': 'Integer' + }, + { + 'name': 'dx', + 'description': 'x-coordinate of the destination\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'dy', + 'description': 'y-coordinate of the destination\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'dw', + 'description': 'destination image width.
\n', + 'type': 'Integer' + }, + { + 'name': 'dh', + 'description': 'destination image height.
\n', + 'type': 'Integer' + } + ] + }, + { + 'params': [ + { + 'name': 'sx', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sy', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sw', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sh', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dx', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dy', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dw', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dh', + 'description': '', + 'type': 'Integer' + } + ] + } + ] + }, + 'filter': { + 'name': 'filter', + 'class': 'p5', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'filterType', + 'description': 'either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.
\n', + 'type': 'Constant' + }, + { + 'name': 'filterParam', + 'description': 'parameter unique to each filter.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'useWebGL', + 'description': 'flag to control whether to use fast\n WebGL filters (GPU) or original image\n filters (CPU); defaults to true.
shader that\'s been loaded, with the\n frag shader using a tex0 uniform.
x-coordinate of the pixel.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the pixel.
\n', + 'type': 'Number' + }, + { + 'name': 'w', + 'description': 'width of the subsection to be returned.
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the subsection to be returned.
\n', + 'type': 'Number' + } + ] + }, + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + } + ] + } + ] + }, + 'loadPixels': { + 'name': 'loadPixels', + 'class': 'p5', + 'module': 'Image' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the pixel.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the pixel.
\n', + 'type': 'Number' + }, + { + 'name': 'c', + 'description': 'grayscale value | pixel array |\n p5.Color object | p5.Image to copy.
\n', + 'type': 'Number|Number[]|Object' + } + ], + 'class': 'p5', + 'module': 'Image' + }, + 'updatePixels': { + 'name': 'updatePixels', + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the upper-left corner of region\n to update.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'y', + 'description': 'y-coordinate of the upper-left corner of region\n to update.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'w', + 'description': 'width of region to update.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'h', + 'description': 'height of region to update.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Image' + }, + 'loadJSON': { + 'name': 'loadJSON', + 'class': 'p5', + 'module': 'IO', + 'overloads': [ + { + 'params': [ + { + 'name': 'path', + 'description': 'name of the file or url to load
\n', + 'type': 'String' + }, + { + 'name': 'jsonpOptions', + 'description': 'options object for jsonp related settings
\n', + 'type': 'Object', + 'optional': true + }, + { + 'name': 'datatype', + 'description': '"json" or "jsonp"
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'callback', + 'description': 'function to be executed after\n loadJSON() completes, data is passed\n in as first argument
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', + 'type': 'Function', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'path', + 'description': '', + 'type': 'String' + }, + { + 'name': 'datatype', + 'description': '', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': '', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': '', + 'type': 'Function', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'path', + 'description': '', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': '', + 'type': 'Function' + }, + { + 'name': 'errorCallback', + 'description': '', + 'type': 'Function', + 'optional': true + } + ] + } + ] + }, + 'loadStrings': { + 'name': 'loadStrings', + 'params': [ + { + 'name': 'filename', + 'description': 'name of the file or url to load
\n', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': 'function to be executed after loadStrings()\n completes, Array is passed in as first\n argument
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'IO' + }, + 'loadTable': { + 'name': 'loadTable', + 'params': [ + { + 'name': 'filename', + 'description': 'name of the file or URL to load
\n', + 'type': 'String' + }, + { + 'name': 'extension', + 'description': 'parse the table by comma-separated values "csv", semicolon-separated\n values "ssv", or tab-separated values "tsv"
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'header', + 'description': '"header" to indicate table has header row
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'callback', + 'description': 'function to be executed after\n loadTable() completes. On success, the\n Table object is passed in as the\n first argument.
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'IO' + }, + 'loadXML': { + 'name': 'loadXML', + 'params': [ + { + 'name': 'filename', + 'description': 'name of the file or URL to load
\n', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': 'function to be executed after loadXML()\n completes, XML object is passed in as\n first argument
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'IO' + }, + 'loadBytes': { + 'name': 'loadBytes', + 'params': [ + { + 'name': 'file', + 'description': 'name of the file or URL to load
\n', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': 'function to be executed after loadBytes()\n completes
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to be executed if there\n is an error
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'IO' + }, + 'httpGet': { + 'name': 'httpGet', + 'class': 'p5', + 'module': 'IO', + 'overloads': [ + { + 'params': [ + { + 'name': 'path', + 'description': 'name of the file or url to load
\n', + 'type': 'String' + }, + { + 'name': 'datatype', + 'description': '"json", "jsonp", "binary", "arrayBuffer",\n "xml", or "text"
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'data', + 'description': 'param data passed sent with request
\n', + 'type': 'Object|Boolean', + 'optional': true + }, + { + 'name': 'callback', + 'description': 'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', + 'type': 'Function', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'path', + 'description': '', + 'type': 'String' + }, + { + 'name': 'data', + 'description': '', + 'type': 'Object|Boolean' + }, + { + 'name': 'callback', + 'description': '', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': '', + 'type': 'Function', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'path', + 'description': '', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': '', + 'type': 'Function' + }, + { + 'name': 'errorCallback', + 'description': '', + 'type': 'Function', + 'optional': true + } + ] + } + ] + }, + 'httpPost': { + 'name': 'httpPost', + 'class': 'p5', + 'module': 'IO', + 'overloads': [ + { + 'params': [ + { + 'name': 'path', + 'description': 'name of the file or url to load
\n', + 'type': 'String' + }, + { + 'name': 'datatype', + 'description': '"json", "jsonp", "xml", or "text".\n If omitted, httpPost() will guess.
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'data', + 'description': 'param data passed sent with request
\n', + 'type': 'Object|Boolean', + 'optional': true + }, + { + 'name': 'callback', + 'description': 'function to be executed after\n httpPost() completes, data is passed in\n as first argument
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', + 'type': 'Function', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'path', + 'description': '', + 'type': 'String' + }, + { + 'name': 'data', + 'description': '', + 'type': 'Object|Boolean' + }, + { + 'name': 'callback', + 'description': '', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': '', + 'type': 'Function', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'path', + 'description': '', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': '', + 'type': 'Function' + }, + { + 'name': 'errorCallback', + 'description': '', + 'type': 'Function', + 'optional': true + } + ] + } + ] + }, + 'httpDo': { + 'name': 'httpDo', + 'class': 'p5', + 'module': 'IO', + 'overloads': [ + { + 'params': [ + { + 'name': 'path', + 'description': 'name of the file or url to load
\n', + 'type': 'String' + }, + { + 'name': 'method', + 'description': 'either "GET", "POST", or "PUT",\n defaults to "GET"
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'datatype', + 'description': '"json", "jsonp", "xml", or "text"
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'data', + 'description': 'param data passed sent with request
\n', + 'type': 'Object', + 'optional': true + }, + { + 'name': 'callback', + 'description': 'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', + 'type': 'Function', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'path', + 'description': '', + 'type': 'String' + }, + { + 'name': 'options', + 'description': 'Request object options as documented in the\n "fetch" API\nreference
\n', + 'type': 'Object' + }, + { + 'name': 'callback', + 'description': '', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': '', + 'type': 'Function', + 'optional': true + } + ] + } + ] + }, + 'createWriter': { + 'name': 'createWriter', + 'params': [ + { + 'name': 'name', + 'description': 'name of the file to be created
\n', + 'type': 'String' + }, + { + 'name': 'extension', + 'description': '', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'IO' + }, + 'save': { + 'name': 'save', + 'params': [ + { + 'name': 'objectOrFilename', + 'description': 'If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).
\n', + 'type': 'Object|String', + 'optional': true + }, + { + 'name': 'filename', + 'description': 'If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'options', + 'description': 'Additional options depend on\n filetype. For example, when saving JSON,\n true indicates that the\n output will be optimized for filesize,\n rather than readability.
If true, removes line breaks\n and spaces from the output\n file to optimize filesize\n (but not readability).
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'IO' + }, + 'saveStrings': { + 'name': 'saveStrings', + 'params': [ + { + 'name': 'list', + 'description': 'string array to be written
\n', + 'type': 'String[]' + }, + { + 'name': 'filename', + 'description': 'filename for output
\n', + 'type': 'String' + }, + { + 'name': 'extension', + 'description': 'the filename\'s extension
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'isCRLF', + 'description': 'if true, change line-break to CRLF
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'IO' + }, + 'saveTable': { + 'name': 'saveTable', + 'params': [ + { + 'name': 'Table', + 'description': 'the Table object to save to a file
\n', + 'type': 'p5.Table' + }, + { + 'name': 'filename', + 'description': 'the filename to which the Table should be saved
\n', + 'type': 'String' + }, + { + 'name': 'options', + 'description': 'can be one of "tsv", "csv", or "html"
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'IO' + }, + 'abs': { + 'name': 'abs', + 'params': [ + { + 'name': 'n', + 'description': 'number to compute.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'ceil': { + 'name': 'ceil', + 'params': [ + { + 'name': 'n', + 'description': 'number to round up.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'constrain': { + 'name': 'constrain', + 'params': [ + { + 'name': 'n', + 'description': 'number to constrain.
\n', + 'type': 'Number' + }, + { + 'name': 'low', + 'description': 'minimum limit.
\n', + 'type': 'Number' + }, + { + 'name': 'high', + 'description': 'maximum limit.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'dist': { + 'name': 'dist', + 'class': 'p5', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'x1', + 'description': 'x-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': 'y-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': 'x-coordinate of the second point.
\n', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': 'y-coordinate of the second point.
\n', + 'type': 'Number' + } + ] + }, + { + 'params': [ + { + 'name': 'x1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z1', + 'description': 'z-coordinate of the first point.
\n', + 'type': 'Number' + }, + { + 'name': 'x2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z2', + 'description': 'z-coordinate of the second point.
\n', + 'type': 'Number' + } + ] + } + ] + }, + 'exp': { + 'name': 'exp', + 'params': [ + { + 'name': 'n', + 'description': 'exponent to raise.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'floor': { + 'name': 'floor', + 'params': [ + { + 'name': 'n', + 'description': 'number to round down.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'lerp': { + 'name': 'lerp', + 'params': [ + { + 'name': 'start', + 'description': 'first value.
\n', + 'type': 'Number' + }, + { + 'name': 'stop', + 'description': 'second value.
\n', + 'type': 'Number' + }, + { + 'name': 'amt', + 'description': 'number.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'log': { + 'name': 'log', + 'params': [ + { + 'name': 'n', + 'description': 'number greater than 0.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'mag': { + 'name': 'mag', + 'params': [ + { + 'name': 'x', + 'description': 'first component.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'second component.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'map': { + 'name': 'map', + 'params': [ + { + 'name': 'value', + 'description': 'the incoming value to be converted.
\n', + 'type': 'Number' + }, + { + 'name': 'start1', + 'description': 'lower bound of the value\'s current range.
\n', + 'type': 'Number' + }, + { + 'name': 'stop1', + 'description': 'upper bound of the value\'s current range.
\n', + 'type': 'Number' + }, + { + 'name': 'start2', + 'description': 'lower bound of the value\'s target range.
\n', + 'type': 'Number' + }, + { + 'name': 'stop2', + 'description': 'upper bound of the value\'s target range.
\n', + 'type': 'Number' + }, + { + 'name': 'withinBounds', + 'description': 'constrain the value to the newly mapped range.
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'max': { + 'name': 'max', + 'class': 'p5', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'n0', + 'description': 'first number to compare.
\n', + 'type': 'Number' + }, + { + 'name': 'n1', + 'description': 'second number to compare.
\n', + 'type': 'Number' + } + ] + }, + { + 'params': [ + { + 'name': 'nums', + 'description': 'numbers to compare.
\n', + 'type': 'Number[]' + } + ] + } + ] + }, + 'min': { + 'name': 'min', + 'class': 'p5', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'n0', + 'description': 'first number to compare.
\n', + 'type': 'Number' + }, + { + 'name': 'n1', + 'description': 'second number to compare.
\n', + 'type': 'Number' + } + ] + }, + { + 'params': [ + { + 'name': 'nums', + 'description': 'numbers to compare.
\n', + 'type': 'Number[]' + } + ] + } + ] + }, + 'norm': { + 'name': 'norm', + 'params': [ + { + 'name': 'value', + 'description': 'incoming value to be normalized.
\n', + 'type': 'Number' + }, + { + 'name': 'start', + 'description': 'lower bound of the value\'s current range.
\n', + 'type': 'Number' + }, + { + 'name': 'stop', + 'description': 'upper bound of the value\'s current range.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'pow': { + 'name': 'pow', + 'params': [ + { + 'name': 'n', + 'description': 'base of the exponential expression.
\n', + 'type': 'Number' + }, + { + 'name': 'e', + 'description': 'power by which to raise the base.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'round': { + 'name': 'round', + 'params': [ + { + 'name': 'n', + 'description': 'number to round.
\n', + 'type': 'Number' + }, + { + 'name': 'decimals', + 'description': 'number of decimal places to round to, default is 0.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'sq': { + 'name': 'sq', + 'params': [ + { + 'name': 'n', + 'description': 'number to square.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'sqrt': { + 'name': 'sqrt', + 'params': [ + { + 'name': 'n', + 'description': 'non-negative number to square root.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'fract': { + 'name': 'fract', + 'params': [ + { + 'name': 'n', + 'description': 'number whose fractional part will be found.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'createVector': { + 'name': 'createVector', + 'params': [ + { + 'name': 'x', + 'description': 'x component of the vector.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'y', + 'description': 'y component of the vector.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'z component of the vector.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'noise': { + 'name': 'noise', + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate in noise space.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate in noise space.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'z-coordinate in noise space.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'noiseDetail': { + 'name': 'noiseDetail', + 'params': [ + { + 'name': 'lod', + 'description': 'number of octaves to be used by the noise.
\n', + 'type': 'Number' + }, + { + 'name': 'falloff', + 'description': 'falloff factor for each octave.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'noiseSeed': { + 'name': 'noiseSeed', + 'params': [ + { + 'name': 'seed', + 'description': 'seed value.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'randomSeed': { + 'name': 'randomSeed', + 'params': [ + { + 'name': 'seed', + 'description': 'seed value.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'random': { + 'name': 'random', + 'class': 'p5', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'min', + 'description': 'lower bound (inclusive).
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'max', + 'description': 'upper bound (exclusive).
\n', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'choices', + 'description': 'array to choose from.
\n', + 'type': 'Array' + } + ] + } + ] + }, + 'randomGaussian': { + 'name': 'randomGaussian', + 'params': [ + { + 'name': 'mean', + 'description': 'mean.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'sd', + 'description': 'standard deviation.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'acos': { + 'name': 'acos', + 'params': [ + { + 'name': 'value', + 'description': 'value whose arc cosine is to be returned.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'asin': { + 'name': 'asin', + 'params': [ + { + 'name': 'value', + 'description': 'value whose arc sine is to be returned.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'atan': { + 'name': 'atan', + 'params': [ + { + 'name': 'value', + 'description': 'value whose arc tangent is to be returned.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'atan2': { + 'name': 'atan2', + 'params': [ + { + 'name': 'y', + 'description': 'y-coordinate of the point.
\n', + 'type': 'Number' + }, + { + 'name': 'x', + 'description': 'x-coordinate of the point.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'cos': { + 'name': 'cos', + 'params': [ + { + 'name': 'angle', + 'description': 'the angle.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'sin': { + 'name': 'sin', + 'params': [ + { + 'name': 'angle', + 'description': 'the angle.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'tan': { + 'name': 'tan', + 'params': [ + { + 'name': 'angle', + 'description': 'the angle.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'degrees': { + 'name': 'degrees', + 'params': [ + { + 'name': 'radians', + 'description': 'radians value to convert to degrees.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'radians': { + 'name': 'radians', + 'params': [ + { + 'name': 'degrees', + 'description': 'degree value to convert to radians.
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'Math' + }, + 'angleMode': { + 'name': 'angleMode', + 'class': 'p5', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'mode', + 'description': 'either RADIANS or DEGREES.
\n', + 'type': 'Constant' + } + ] + }, + { + 'params': [ + ] + } + ] + }, + 'textAlign': { + 'name': 'textAlign', + 'class': 'p5', + 'module': 'Typography', + 'overloads': [ + { + 'params': [ + { + 'name': 'horizAlign', + 'description': 'horizontal alignment, either LEFT,\n CENTER, or RIGHT
\n', + 'type': 'Constant' + }, + { + 'name': 'vertAlign', + 'description': 'vertical alignment, either TOP,\n BOTTOM, CENTER, or BASELINE
\n', + 'type': 'Constant', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'textLeading': { + 'name': 'textLeading', + 'class': 'p5', + 'module': 'Typography', + 'overloads': [ + { + 'params': [ + { + 'name': 'leading', + 'description': 'the size in pixels for spacing between lines
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'textSize': { + 'name': 'textSize', + 'class': 'p5', + 'module': 'Typography', + 'overloads': [ + { + 'params': [ + { + 'name': 'theSize', + 'description': 'the size of the letters in units of pixels
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'textStyle': { + 'name': 'textStyle', + 'class': 'p5', + 'module': 'Typography', + 'overloads': [ + { + 'params': [ + { + 'name': 'theStyle', + 'description': 'styling for text, either NORMAL,\n ITALIC, BOLD or BOLDITALIC
\n', + 'type': 'Constant' + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'textWidth': { + 'name': 'textWidth', + 'params': [ + { + 'name': 'theText', + 'description': 'the String of characters to measure
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'Typography' + }, + 'textAscent': { + 'name': 'textAscent', + 'class': 'p5', + 'module': 'Typography' + }, + 'textDescent': { + 'name': 'textDescent', + 'class': 'p5', + 'module': 'Typography' + }, + 'textWrap': { + 'name': 'textWrap', + 'params': [ + { + 'name': 'wrapStyle', + 'description': 'text wrapping style, either WORD or CHAR
\n', + 'type': 'Constant' + } + ], + 'class': 'p5', + 'module': 'Typography' + }, + 'loadFont': { + 'name': 'loadFont', + 'params': [ + { + 'name': 'path', + 'description': 'path of the font to be loaded.
\n', + 'type': 'String' + }, + { + 'name': 'successCallback', + 'description': 'function called with the\n p5.Font object after it\n loads.
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'failureCallback', + 'description': 'function called with the error\n Event\n object if the font fails to load.
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Typography' + }, + 'text': { + 'name': 'text', + 'params': [ + { + 'name': 'str', + 'description': 'text to be displayed.
\n', + 'type': 'String|Object|Array|Number|Boolean' + }, + { + 'name': 'x', + 'description': 'x-coordinate of the text box.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the text box.
\n', + 'type': 'Number' + }, + { + 'name': 'maxWidth', + 'description': 'maximum width of the text box. See\n rectMode() for\n other options.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'maxHeight', + 'description': 'maximum height of the text box. See\n rectMode() for\n other options.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Typography' + }, + 'textFont': { + 'name': 'textFont', + 'class': 'p5', + 'module': 'Typography', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'font', + 'description': 'font as a p5.Font object or a string.
\n', + 'type': 'Object|String' + }, + { + 'name': 'size', + 'description': 'font size in pixels.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'append': { + 'name': 'append', + 'params': [ + { + 'name': 'array', + 'description': 'Array to append
\n', + 'type': 'Array' + }, + { + 'name': 'value', + 'description': 'to be added to the Array
\n', + 'type': 'Any' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'arrayCopy': { + 'name': 'arrayCopy', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'src', + 'description': 'the source Array
\n', + 'type': 'Array' + }, + { + 'name': 'srcPosition', + 'description': 'starting position in the source Array
\n', + 'type': 'Integer' + }, + { + 'name': 'dst', + 'description': 'the destination Array
\n', + 'type': 'Array' + }, + { + 'name': 'dstPosition', + 'description': 'starting position in the destination Array
\n', + 'type': 'Integer' + }, + { + 'name': 'length', + 'description': 'number of Array elements to be copied
\n', + 'type': 'Integer' + } + ] + }, + { + 'params': [ + { + 'name': 'src', + 'description': '', + 'type': 'Array' + }, + { + 'name': 'dst', + 'description': '', + 'type': 'Array' + }, + { + 'name': 'length', + 'description': '', + 'type': 'Integer', + 'optional': true + } + ] + } + ] + }, + 'concat': { + 'name': 'concat', + 'params': [ + { + 'name': 'a', + 'description': 'first Array to concatenate
\n', + 'type': 'Array' + }, + { + 'name': 'b', + 'description': 'second Array to concatenate
\n', + 'type': 'Array' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'reverse': { + 'name': 'reverse', + 'params': [ + { + 'name': 'list', + 'description': 'Array to reverse
\n', + 'type': 'Array' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'shorten': { + 'name': 'shorten', + 'params': [ + { + 'name': 'list', + 'description': 'Array to shorten
\n', + 'type': 'Array' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'shuffle': { + 'name': 'shuffle', + 'params': [ + { + 'name': 'array', + 'description': 'Array to shuffle
\n', + 'type': 'Array' + }, + { + 'name': 'bool', + 'description': 'modify passed array
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'sort': { + 'name': 'sort', + 'params': [ + { + 'name': 'list', + 'description': 'Array to sort
\n', + 'type': 'Array' + }, + { + 'name': 'count', + 'description': 'number of elements to sort, starting from 0
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'splice': { + 'name': 'splice', + 'params': [ + { + 'name': 'list', + 'description': 'Array to splice into
\n', + 'type': 'Array' + }, + { + 'name': 'value', + 'description': 'value to be spliced in
\n', + 'type': 'Any' + }, + { + 'name': 'position', + 'description': 'in the array from which to insert data
\n', + 'type': 'Integer' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'subset': { + 'name': 'subset', + 'params': [ + { + 'name': 'list', + 'description': 'Array to extract from
\n', + 'type': 'Array' + }, + { + 'name': 'start', + 'description': 'position to begin
\n', + 'type': 'Integer' + }, + { + 'name': 'count', + 'description': 'number of values to extract
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'float': { + 'name': 'float', + 'params': [ + { + 'name': 'str', + 'description': 'float string to parse
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'int': { + 'name': 'int', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'n', + 'description': 'value to parse
\n', + 'type': 'String|Boolean|Number' + }, + { + 'name': 'radix', + 'description': 'the radix to convert to (default: 10)
\n', + 'type': 'Integer', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'ns', + 'description': 'values to parse
\n', + 'type': 'Array' + }, + { + 'name': 'radix', + 'description': '', + 'type': 'Integer', + 'optional': true + } + ] + } + ] + }, + 'str': { + 'name': 'str', + 'params': [ + { + 'name': 'n', + 'description': 'value to parse
\n', + 'type': 'String|Boolean|Number|Array' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'byte': { + 'name': 'byte', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'n', + 'description': 'value to parse
\n', + 'type': 'String|Boolean|Number' + } + ] + }, + { + 'params': [ + { + 'name': 'ns', + 'description': 'values to parse
\n', + 'type': 'Array' + } + ] + } + ] + }, + 'char': { + 'name': 'char', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'n', + 'description': 'value to parse
\n', + 'type': 'String|Number' + } + ] + }, + { + 'params': [ + { + 'name': 'ns', + 'description': 'values to parse
\n', + 'type': 'Array' + } + ] + } + ] + }, + 'unchar': { + 'name': 'unchar', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'n', + 'description': 'value to parse
\n', + 'type': 'String' + } + ] + }, + { + 'params': [ + { + 'name': 'ns', + 'description': 'values to parse
\n', + 'type': 'Array' + } + ] + } + ] + }, + 'hex': { + 'name': 'hex', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'n', + 'description': 'value to parse
\n', + 'type': 'Number' + }, + { + 'name': 'digits', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'ns', + 'description': 'array of values to parse
\n', + 'type': 'Number[]' + }, + { + 'name': 'digits', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + } + ] + }, + 'unhex': { + 'name': 'unhex', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'n', + 'description': 'value to parse
\n', + 'type': 'String' + } + ] + }, + { + 'params': [ + { + 'name': 'ns', + 'description': 'values to parse
\n', + 'type': 'Array' + } + ] + } + ] + }, + 'join': { + 'name': 'join', + 'params': [ + { + 'name': 'list', + 'description': 'array of Strings to be joined
\n', + 'type': 'Array' + }, + { + 'name': 'separator', + 'description': 'String to be placed between each item
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'match': { + 'name': 'match', + 'params': [ + { + 'name': 'str', + 'description': 'the String to be searched
\n', + 'type': 'String' + }, + { + 'name': 'regexp', + 'description': 'the regexp to be used for matching
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'matchAll': { + 'name': 'matchAll', + 'params': [ + { + 'name': 'str', + 'description': 'the String to be searched
\n', + 'type': 'String' + }, + { + 'name': 'regexp', + 'description': 'the regexp to be used for matching
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'nf': { + 'name': 'nf', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'num', + 'description': 'the Number to format
\n', + 'type': 'Number|String' + }, + { + 'name': 'left', + 'description': 'number of digits to the left of the\n decimal point
\n', + 'type': 'Integer|String', + 'optional': true + }, + { + 'name': 'right', + 'description': 'number of digits to the right of the\n decimal point
\n', + 'type': 'Integer|String', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'nums', + 'description': 'the Numbers to format
\n', + 'type': 'Array' + }, + { + 'name': 'left', + 'description': '', + 'type': 'Integer|String', + 'optional': true + }, + { + 'name': 'right', + 'description': '', + 'type': 'Integer|String', + 'optional': true + } + ] + } + ] + }, + 'nfc': { + 'name': 'nfc', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'num', + 'description': 'the Number to format
\n', + 'type': 'Number|String' + }, + { + 'name': 'right', + 'description': 'number of digits to the right of the\n decimal point
\n', + 'type': 'Integer|String', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'nums', + 'description': 'the Numbers to format
\n', + 'type': 'Array' + }, + { + 'name': 'right', + 'description': '', + 'type': 'Integer|String', + 'optional': true + } + ] + } + ] + }, + 'nfp': { + 'name': 'nfp', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'num', + 'description': 'the Number to format
\n', + 'type': 'Number' + }, + { + 'name': 'left', + 'description': 'number of digits to the left of the decimal\n point
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'right', + 'description': 'number of digits to the right of the\n decimal point
\n', + 'type': 'Integer', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'nums', + 'description': 'the Numbers to format
\n', + 'type': 'Number[]' + }, + { + 'name': 'left', + 'description': '', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'right', + 'description': '', + 'type': 'Integer', + 'optional': true + } + ] + } + ] + }, + 'nfs': { + 'name': 'nfs', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'num', + 'description': 'the Number to format
\n', + 'type': 'Number' + }, + { + 'name': 'left', + 'description': 'number of digits to the left of the decimal\n point
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'right', + 'description': 'number of digits to the right of the\n decimal point
\n', + 'type': 'Integer', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'nums', + 'description': 'the Numbers to format
\n', + 'type': 'Array' + }, + { + 'name': 'left', + 'description': '', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'right', + 'description': '', + 'type': 'Integer', + 'optional': true + } + ] + } + ] + }, + 'split': { + 'name': 'split', + 'params': [ + { + 'name': 'value', + 'description': 'the String to be split
\n', + 'type': 'String' + }, + { + 'name': 'delim', + 'description': 'the String used to separate the data
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'splitTokens': { + 'name': 'splitTokens', + 'params': [ + { + 'name': 'value', + 'description': 'the String to be split
\n', + 'type': 'String' + }, + { + 'name': 'delim', + 'description': 'list of individual Strings that will be used as\n separators
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Data' + }, + 'trim': { + 'name': 'trim', + 'class': 'p5', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'str', + 'description': 'a String to be trimmed
\n', + 'type': 'String' + } + ] + }, + { + 'params': [ + { + 'name': 'strs', + 'description': 'an Array of Strings to be trimmed
\n', + 'type': 'Array' + } + ] + } + ] + }, + 'day': { + 'name': 'day', + 'class': 'p5', + 'module': 'IO' + }, + 'hour': { + 'name': 'hour', + 'class': 'p5', + 'module': 'IO' + }, + 'minute': { + 'name': 'minute', + 'class': 'p5', + 'module': 'IO' + }, + 'millis': { + 'name': 'millis', + 'class': 'p5', + 'module': 'IO' + }, + 'month': { + 'name': 'month', + 'class': 'p5', + 'module': 'IO' + }, + 'second': { + 'name': 'second', + 'class': 'p5', + 'module': 'IO' + }, + 'year': { + 'name': 'year', + 'class': 'p5', + 'module': 'IO' + }, + 'beginGeometry': { + 'name': 'beginGeometry', + 'class': 'p5', + 'module': 'Shape' + }, + 'endGeometry': { + 'name': 'endGeometry', + 'class': 'p5', + 'module': 'Shape' + }, + 'buildGeometry': { + 'name': 'buildGeometry', + 'params': [ + { + 'name': 'callback', + 'description': 'A function that draws shapes.
\n', + 'type': 'Function' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'freeGeometry': { + 'name': 'freeGeometry', + 'params': [ + { + 'name': 'The', + 'description': 'geometry whose resources should be freed
\n', + 'type': 'p5.Geometry' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'plane': { + 'name': 'plane', + 'params': [ + { + 'name': 'width', + 'description': 'width of the plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'height', + 'description': 'height of the plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'detailX', + 'description': 'Optional number of triangle\n subdivisions in x-dimension
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'Optional number of triangle\n subdivisions in y-dimension
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'box': { + 'name': 'box', + 'params': [ + { + 'name': 'width', + 'description': 'width of the box
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'height', + 'description': 'height of the box
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'depth', + 'description': 'depth of the box
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'detailX', + 'description': 'Optional number of triangle\n subdivisions in x-dimension
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'Optional number of triangle\n subdivisions in y-dimension
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'sphere': { + 'name': 'sphere', + 'params': [ + { + 'name': 'radius', + 'description': 'radius of circle
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'detailX', + 'description': 'optional number of subdivisions in x-dimension
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'optional number of subdivisions in y-dimension
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'cylinder': { + 'name': 'cylinder', + 'params': [ + { + 'name': 'radius', + 'description': 'radius of the surface
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'height', + 'description': 'height of the cylinder
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'detailX', + 'description': 'number of subdivisions in x-dimension;\n default is 24
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'number of subdivisions in y-dimension;\n default is 1
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'bottomCap', + 'description': 'whether to draw the bottom of the cylinder
\n', + 'type': 'Boolean', + 'optional': true + }, + { + 'name': 'topCap', + 'description': 'whether to draw the top of the cylinder
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'cone': { + 'name': 'cone', + 'params': [ + { + 'name': 'radius', + 'description': 'radius of the bottom surface
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'height', + 'description': 'height of the cone
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'detailX', + 'description': 'number of segments,\n the more segments the smoother geometry\n default is 24
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'number of segments,\n the more segments the smoother geometry\n default is 1
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'cap', + 'description': 'whether to draw the base of the cone
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'ellipsoid': { + 'name': 'ellipsoid', + 'params': [ + { + 'name': 'radiusx', + 'description': 'x-radius of ellipsoid
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'radiusy', + 'description': 'y-radius of ellipsoid
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'radiusz', + 'description': 'z-radius of ellipsoid
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'detailX', + 'description': 'number of segments,\n the more segments the smoother geometry\n default is 24. Avoid detail number above\n 150, it may crash the browser.
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'number of segments,\n the more segments the smoother geometry\n default is 16. Avoid detail number above\n 150, it may crash the browser.
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'torus': { + 'name': 'torus', + 'params': [ + { + 'name': 'radius', + 'description': 'radius of the whole ring
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'tubeRadius', + 'description': 'radius of the tube
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'detailX', + 'description': 'number of segments in x-dimension,\n the more segments the smoother geometry\n default is 24
\n', + 'type': 'Integer', + 'optional': true + }, + { + 'name': 'detailY', + 'description': 'number of segments in y-dimension,\n the more segments the smoother geometry\n default is 16
\n', + 'type': 'Integer', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'orbitControl': { + 'name': 'orbitControl', + 'params': [ + { + 'name': 'sensitivityX', + 'description': 'sensitivity to mouse movement along X axis
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'sensitivityY', + 'description': 'sensitivity to mouse movement along Y axis
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'sensitivityZ', + 'description': 'sensitivity to scroll movement along Z axis
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'options', + 'description': 'An optional object that can contain additional settings,\ndisableTouchActions - Boolean, default value is true.\nSetting this to true makes mobile interactions smoother by preventing\naccidental interactions with the page while orbiting. But if you\'re already\ndoing it via css or want the default touch actions, consider setting it to false.\nfreeRotation - Boolean, default value is false.\nBy default, horizontal movement of the mouse or touch pointer rotates the camera\naround the y-axis, and vertical movement rotates the camera around the x-axis.\nBut if setting this option to true, the camera always rotates in the direction\nthe pointer is moving. For zoom and move, the behavior is the same regardless of\ntrue/false.
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'debugMode': { + 'name': 'debugMode', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'mode', + 'description': 'either GRID or AXES
\n', + 'type': 'Constant' + } + ] + }, + { + 'params': [ + { + 'name': 'mode', + 'description': '', + 'type': 'Constant' + }, + { + 'name': 'gridSize', + 'description': 'size of one side of the grid
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'gridDivisions', + 'description': 'number of divisions in the grid
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'xOff', + 'description': 'X axis offset from origin (0,0,0)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'yOff', + 'description': 'Y axis offset from origin (0,0,0)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'zOff', + 'description': 'Z axis offset from origin (0,0,0)
\n', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'mode', + 'description': '', + 'type': 'Constant' + }, + { + 'name': 'axesSize', + 'description': 'size of axes icon
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'xOff', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'yOff', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'zOff', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'gridSize', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'gridDivisions', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'gridXOff', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'gridYOff', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'gridZOff', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'axesSize', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'axesXOff', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'axesYOff', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'axesZOff', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + } + ] + }, + 'noDebugMode': { + 'name': 'noDebugMode', + 'class': 'p5', + 'module': '3D' + }, + 'ambientLight': { + 'name': 'ambientLight', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to\n the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value\n relative to the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value\n relative to the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': 'alpha value relative to current\n color range (default is 0-255)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'gray', + 'description': 'number specifying value between\n white and black
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'a color string
\n', + 'type': 'String' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'values', + 'description': 'an array containing the red,green,blue &\n and alpha components of the color
\n', + 'type': 'Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'color as a p5.Color
\n', + 'type': 'p5.Color' + } + ], + 'chainable': 1 + } + ] + }, + 'specularColor': { + 'name': 'specularColor', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to\n the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value\n relative to the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value\n relative to the current color range
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'gray', + 'description': 'number specifying value between\n white and black
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'color as a CSS string
\n', + 'type': 'String' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'values', + 'description': 'color as an array containing the\n red, green, and blue components
\n', + 'type': 'Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'color as a p5.Color
\n', + 'type': 'p5.Color' + } + ], + 'chainable': 1 + } + ] + }, + 'directionalLight': { + 'name': 'directionalLight', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to the current\n color range
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value relative to the\n current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value relative to the\n current color range
\n', + 'type': 'Number' + }, + { + 'name': 'x', + 'description': 'x component of direction (inclusive range of -1 to 1)
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y component of direction (inclusive range of -1 to 1)
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z component of direction (inclusive range of -1 to 1)
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'direction', + 'description': 'direction of light as a\n p5.Vector
\n', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', + 'type': 'p5.Color|Number[]|String' + }, + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': '', + 'type': 'p5.Color|Number[]|String' + }, + { + 'name': 'direction', + 'description': '', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + } + ] + }, + 'pointLight': { + 'name': 'pointLight', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to the current\n color range
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value relative to the\n current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value relative to the\n current color range
\n', + 'type': 'Number' + }, + { + 'name': 'x', + 'description': 'x component of position
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y component of position
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z component of position
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'position', + 'description': 'of light as a p5.Vector
\n', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', + 'type': 'p5.Color|Number[]|String' + }, + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': '', + 'type': 'p5.Color|Number[]|String' + }, + { + 'name': 'position', + 'description': '', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + } + ] + }, + 'lights': { + 'name': 'lights', + 'class': 'p5', + 'module': '3D' + }, + 'lightFalloff': { + 'name': 'lightFalloff', + 'params': [ + { + 'name': 'constant', + 'description': 'CONSTANT value for determining falloff
\n', + 'type': 'Number' + }, + { + 'name': 'linear', + 'description': 'LINEAR value for determining falloff
\n', + 'type': 'Number' + }, + { + 'name': 'quadratic', + 'description': 'QUADRATIC value for determining falloff
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'spotLight': { + 'name': 'spotLight', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value relative to the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value relative to the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'x', + 'description': 'x component of position
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y component of position
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z component of position
\n', + 'type': 'Number' + }, + { + 'name': 'rx', + 'description': 'x component of light direction (inclusive range of -1 to 1)
\n', + 'type': 'Number' + }, + { + 'name': 'ry', + 'description': 'y component of light direction (inclusive range of -1 to 1)
\n', + 'type': 'Number' + }, + { + 'name': 'rz', + 'description': 'z component of light direction (inclusive range of -1 to 1)
\n', + 'type': 'Number' + }, + { + 'name': 'angle', + 'description': 'angle of cone. Defaults to PI/3
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'concentration', + 'description': 'concentration of cone. Defaults to 100
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', + 'type': 'p5.Color|Number[]|String' + }, + { + 'name': 'position', + 'description': 'position of light as a p5.Vector
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'direction', + 'description': 'direction of light as a p5.Vector
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'angle', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'concentration', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'position', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'direction', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'angle', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'concentration', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'color', + 'description': '', + 'type': 'p5.Color|Number[]|String' + }, + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'direction', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'angle', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'concentration', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'color', + 'description': '', + 'type': 'p5.Color|Number[]|String' + }, + { + 'name': 'position', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'rx', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'ry', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'rz', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'angle', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'concentration', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'direction', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'angle', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'concentration', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'position', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'rx', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'ry', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'rz', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'angle', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'concentration', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'color', + 'description': '', + 'type': 'p5.Color|Number[]|String' + }, + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'rx', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'ry', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'rz', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'angle', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'concentration', + 'description': '', + 'type': 'Number', + 'optional': true + } + ] + } + ] + }, + 'noLights': { + 'name': 'noLights', + 'class': 'p5', + 'module': '3D' + }, + 'loadModel': { + 'name': 'loadModel', + 'class': 'p5', + 'module': 'Shape', + 'overloads': [ + { + 'params': [ + { + 'name': 'path', + 'description': 'Path of the model to be loaded
\n', + 'type': 'String' + }, + { + 'name': 'normalize', + 'description': 'If true, scale the model to a\n standardized size when loading
\n', + 'type': 'Boolean' + }, + { + 'name': 'successCallback', + 'description': 'Function to be called\n once the model is loaded. Will be passed\n the 3D model object.
\n', + 'type': 'function(p5.Geometry)', + 'optional': true + }, + { + 'name': 'failureCallback', + 'description': 'called with event error if\n the model fails to load.
\n', + 'type': 'Function(Event)', + 'optional': true + }, + { + 'name': 'fileType', + 'description': 'The file extension of the model\n (.stl, .obj).
Loaded 3d model to be rendered
\n', + 'type': 'p5.Geometry' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'loadShader': { + 'name': 'loadShader', + 'params': [ + { + 'name': 'vertFilename', + 'description': 'path to file containing vertex shader\nsource code
\n', + 'type': 'String' + }, + { + 'name': 'fragFilename', + 'description': 'path to file containing fragment shader\nsource code
\n', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': 'callback to be executed after loadShader\ncompletes. On success, the p5.Shader object is passed as the first argument.
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'createShader': { + 'name': 'createShader', + 'params': [ + { + 'name': 'vertSrc', + 'description': 'source code for the vertex shader
\n', + 'type': 'String' + }, + { + 'name': 'fragSrc', + 'description': 'source code for the fragment shader
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'createFilterShader': { + 'name': 'createFilterShader', + 'params': [ + { + 'name': 'fragSrc', + 'description': 'source code for the fragment shader
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'shader': { + 'name': 'shader', + 'params': [ + { + 'name': 's', + 'description': 'the p5.Shader object\nto use for rendering shapes.
\n', + 'type': 'p5.Shader' + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'resetShader': { + 'name': 'resetShader', + 'class': 'p5', + 'module': '3D' + }, + 'texture': { + 'name': 'texture', + 'params': [ + { + 'name': 'tex', + 'description': 'image to use as texture
\n', + 'type': 'p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture' + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'textureMode': { + 'name': 'textureMode', + 'params': [ + { + 'name': 'mode', + 'description': 'either IMAGE or NORMAL
\n', + 'type': 'Constant' + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'textureWrap': { + 'name': 'textureWrap', + 'params': [ + { + 'name': 'wrapX', + 'description': 'either CLAMP, REPEAT, or MIRROR
\n', + 'type': 'Constant' + }, + { + 'name': 'wrapY', + 'description': 'either CLAMP, REPEAT, or MIRROR
\n', + 'type': 'Constant', + 'optional': true + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'normalMaterial': { + 'name': 'normalMaterial', + 'class': 'p5', + 'module': '3D' + }, + 'ambientMaterial': { + 'name': 'ambientMaterial', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to the current\n color range
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value relative to the\n current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value relative to the\n current color range
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'gray', + 'description': 'number specifying value between\n white and black
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'chainable': 1 + } + ] + }, + 'emissiveMaterial': { + 'name': 'emissiveMaterial', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to the current\n color range
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value relative to the\n current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value relative to the\n current color range
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': 'alpha value relative to current color\n range (default is 0-255)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'gray', + 'description': 'number specifying value between\n white and black
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'chainable': 1 + } + ] + }, + 'specularMaterial': { + 'name': 'specularMaterial', + 'class': 'p5', + 'module': '3D', + 'overloads': [ + { + 'params': [ + { + 'name': 'gray', + 'description': 'number specifying value between white and black.
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': 'alpha value relative to current color range\n (default is 0-255)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'red or hue value relative to\n the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'green or saturation value\n relative to the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'v3', + 'description': 'blue or brightness value\n relative to the current color range
\n', + 'type': 'Number' + }, + { + 'name': 'alpha', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'color', + 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', + 'type': 'p5.Color|Number[]|String' + } + ], + 'chainable': 1 + } + ] + }, + 'shininess': { + 'name': 'shininess', + 'params': [ + { + 'name': 'shine', + 'description': 'degree of shininess
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'camera': { + 'name': 'camera', + 'params': [ + { + 'name': 'x', + 'description': 'camera position value on x axis
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'y', + 'description': 'camera position value on y axis
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'camera position value on z axis
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'centerX', + 'description': 'x coordinate representing center of the sketch
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'centerY', + 'description': 'y coordinate representing center of the sketch
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'centerZ', + 'description': 'z coordinate representing center of the sketch
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'upX', + 'description': 'x component of direction \'up\' from camera
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'upY', + 'description': 'y component of direction \'up\' from camera
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'upZ', + 'description': 'z component of direction \'up\' from camera
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'perspective': { + 'name': 'perspective', + 'params': [ + { + 'name': 'fovy', + 'description': 'camera frustum vertical field of view,\n from bottom to top of view, in angleMode units
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'aspect', + 'description': 'camera frustum aspect ratio
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'near', + 'description': 'frustum near plane length
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'far', + 'description': 'frustum far plane length
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'ortho': { + 'name': 'ortho', + 'params': [ + { + 'name': 'left', + 'description': 'camera frustum left plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'right', + 'description': 'camera frustum right plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'bottom', + 'description': 'camera frustum bottom plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'top', + 'description': 'camera frustum top plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'near', + 'description': 'camera frustum near plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'far', + 'description': 'camera frustum far plane
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'frustum': { + 'name': 'frustum', + 'params': [ + { + 'name': 'left', + 'description': 'camera frustum left plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'right', + 'description': 'camera frustum right plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'bottom', + 'description': 'camera frustum bottom plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'top', + 'description': 'camera frustum top plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'near', + 'description': 'camera frustum near plane
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'far', + 'description': 'camera frustum far plane
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'createCamera': { + 'name': 'createCamera', + 'class': 'p5', + 'module': '3D' + }, + 'setCamera': { + 'name': 'setCamera', + 'params': [ + { + 'name': 'cam', + 'description': 'p5.Camera object
\n', + 'type': 'p5.Camera' + } + ], + 'class': 'p5', + 'module': '3D' + }, + 'vertexNormal': { + 'name': 'vertexNormal', + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'v', + 'description': '', + 'type': 'Vector' + } + ], + 'class': 'p5', + 'module': 'Shape' + }, + 'setAttributes': { + 'name': 'setAttributes', + 'class': 'p5', + 'module': 'Rendering', + 'overloads': [ + { + 'params': [ + { + 'name': 'key', + 'description': 'Name of attribute
\n', + 'type': 'String' + }, + { + 'name': 'value', + 'description': 'New value of named attribute
\n', + 'type': 'Boolean' + } + ] + }, + { + 'params': [ + { + 'name': 'obj', + 'description': 'object with key-value pairs
\n', + 'type': 'Object' + } + ] + } + ] + }, + 'getAudioContext': { + 'name': 'getAudioContext', + 'class': 'p5', + 'module': 'p5.sound' + }, + 'userStartAudio': { + 'params': [ + { + 'name': 'elements', + 'description': 'This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.
\n', + 'type': 'Element|Array', + 'optional': true + }, + { + 'name': 'callback', + 'description': 'Callback to invoke when the AudioContext\n has started
\n', + 'type': 'Function', + 'optional': true + } + ], + 'name': 'userStartAudio', + 'class': 'p5', + 'module': 'p5.sound' + }, + 'getOutputVolume': { + 'name': 'getOutputVolume', + 'class': 'p5', + 'module': 'p5.sound' + }, + 'outputVolume': { + 'name': 'outputVolume', + 'params': [ + { + 'name': 'volume', + 'description': 'Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n', + 'type': 'Number|Object' + }, + { + 'name': 'rampTime', + 'description': 'Fade for t seconds
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'Schedule this event to happen at\n t seconds in the future
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'p5.sound' + }, + 'soundOut': { + 'name': 'soundOut', + 'class': 'p5', + 'module': 'p5.sound' + }, + 'sampleRate': { + 'name': 'sampleRate', + 'class': 'p5', + 'module': 'p5.sound' + }, + 'freqToMidi': { + 'name': 'freqToMidi', + 'params': [ + { + 'name': 'frequency', + 'description': 'A freqeuncy, for example, the "A"\n above Middle C is 440Hz
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'p5.sound' + }, + 'midiToFreq': { + 'name': 'midiToFreq', + 'params': [ + { + 'name': 'midiNote', + 'description': 'The number of a MIDI note
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'p5.sound' + }, + 'soundFormats': { + 'name': 'soundFormats', + 'params': [ + { + 'name': 'formats', + 'description': 'i.e. \'mp3\', \'wav\', \'ogg\'
\n', + 'type': 'String', + 'optional': true, + 'multiple': true + } + ], + 'class': 'p5', + 'module': 'p5.sound' + }, + 'saveSound': { + 'name': 'saveSound', + 'params': [ + { + 'name': 'soundFile', + 'description': 'p5.SoundFile that you wish to save
\n', + 'type': 'p5.SoundFile' + }, + { + 'name': 'fileName', + 'description': 'name of the resulting .wav file.
\n', + 'type': 'String' + } + ], + 'class': 'p5', + 'module': 'p5.sound' + }, + 'loadSound': { + 'name': 'loadSound', + 'params': [ + { + 'name': 'path', + 'description': 'Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. [\'sound.ogg\', \'sound.mp3\'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.
\n', + 'type': 'String|Array' + }, + { + 'name': 'successCallback', + 'description': 'Name of a function to call once file loads
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'Name of a function to call if there is\n an error loading the file.
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'whileLoading', + 'description': 'Name of a function to call while file is loading.\n This function will receive the percentage loaded\n so far, from 0.0 to 1.0.
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'p5.sound' + }, + 'createConvolver': { + 'name': 'createConvolver', + 'params': [ + { + 'name': 'path', + 'description': 'path to a sound file
\n', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': 'function to call if loading is successful.\n The object will be passed in as the argument\n to the callback function.
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'function to call if loading is not successful.\n A custom error will be passed in as the argument\n to the callback function.
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5', + 'module': 'p5.sound' + }, + 'setBPM': { + 'name': 'setBPM', + 'params': [ + { + 'name': 'BPM', + 'description': 'Beats Per Minute
\n', + 'type': 'Number' + }, + { + 'name': 'rampTime', + 'description': 'Seconds from now
\n', + 'type': 'Number' + } + ], + 'class': 'p5', + 'module': 'p5.sound' + } + }, + 'p5.Color': { + 'toString': { + 'name': 'toString', + 'params': [ + { + 'name': 'format', + 'description': 'how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n\'#rgb\' \'#rgba\' \'#rrggbb\' and \'#rrggbbaa\' format as hexadecimal color codes.\n\'rgb\' \'hsb\' and \'hsl\' return the color formatted in the specified color mode.\n\'rgba\' \'hsba\' and \'hsla\' are the same as above but with alpha channels.\n\'rgb%\' \'hsb%\' \'hsl%\' \'rgba%\' \'hsba%\' and \'hsla%\' format as percentages.
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.Color', + 'module': 'Color' + }, + 'setRed': { + 'name': 'setRed', + 'params': [ + { + 'name': 'red', + 'description': 'the new red value.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Color', + 'module': 'Color' + }, + 'setGreen': { + 'name': 'setGreen', + 'params': [ + { + 'name': 'green', + 'description': 'the new green value.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Color', + 'module': 'Color' + }, + 'setBlue': { + 'name': 'setBlue', + 'params': [ + { + 'name': 'blue', + 'description': 'the new blue value.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Color', + 'module': 'Color' + }, + 'setAlpha': { + 'name': 'setAlpha', + 'params': [ + { + 'name': 'alpha', + 'description': 'the new alpha value.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Color', + 'module': 'Color' + } + }, + 'p5.Element': { + 'elt': { + 'name': 'elt', + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'width': { + 'name': 'width', + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'height': { + 'name': 'height', + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'parent': { + 'name': 'parent', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + { + 'name': 'parent', + 'description': 'the ID, DOM node, or p5.Element\n of desired parent element
\n', + 'type': 'String|p5.Element|Object' + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'id': { + 'name': 'id', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + { + 'name': 'id', + 'description': 'ID of the element
\n', + 'type': 'String' + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'class': { + 'name': 'class', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + { + 'name': 'class', + 'description': 'class to add
\n', + 'type': 'String' + } + ], + 'chainable': 1 + }, + { + 'params': [ + ] + } + ] + }, + 'mousePressed': { + 'name': 'mousePressed', + 'params': [ + { + 'name': 'fxn', + 'description': 'function to be fired when mouse is\n pressed over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when mouse is\n double clicked over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when mouse is\n scrolled over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when mouse is\n released over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when mouse is\n clicked over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a mouse moves\n over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a mouse moves\n onto the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a mouse\n moves off of an element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a touch\n starts over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a touch moves over\n the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a touch ends\n over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a file is\n dragged over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a file is\n dragged off the element.\n if false is passed instead, the previously\n firing function will no longer fire.
name of class to add
\n', + 'type': 'String' + } + ], + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'removeClass': { + 'name': 'removeClass', + 'params': [ + { + 'name': 'class', + 'description': 'name of class to remove
\n', + 'type': 'String' + } + ], + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'hasClass': { + 'name': 'hasClass', + 'params': [ + { + 'name': 'c', + 'description': 'class name of class to check
\n', + 'type': 'String' + } + ], + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'toggleClass': { + 'name': 'toggleClass', + 'params': [ + { + 'name': 'c', + 'description': 'class name to toggle
\n', + 'type': 'String' + } + ], + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'child': { + 'name': 'child', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'child', + 'description': 'the ID, DOM node, or p5.Element\n to add to the current element
\n', + 'type': 'String|p5.Element', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'center': { + 'name': 'center', + 'params': [ + { + 'name': 'align', + 'description': 'passing \'vertical\', \'horizontal\' aligns element accordingly
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'html': { + 'name': 'html', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'html', + 'description': 'the HTML to be placed inside the element
\n', + 'type': 'String', + 'optional': true + }, + { + 'name': 'append', + 'description': 'whether to append HTML to existing
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'position': { + 'name': 'position', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'x', + 'description': 'x-position relative to upper left of window (optional)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'y', + 'description': 'y-position relative to upper left of window (optional)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'positionType', + 'description': 'it can be static, fixed, relative, sticky, initial or inherit (optional)
\n', + 'type': 'String', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'style': { + 'name': 'style', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + { + 'name': 'property', + 'description': 'property to be set
\n', + 'type': 'String' + } + ] + }, + { + 'params': [ + { + 'name': 'property', + 'description': '', + 'type': 'String' + }, + { + 'name': 'value', + 'description': 'value to assign to property
\n', + 'type': 'String|p5.Color' + } + ], + 'chainable': 1 + } + ] + }, + 'attribute': { + 'name': 'attribute', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'attr', + 'description': 'attribute to set
\n', + 'type': 'String' + }, + { + 'name': 'value', + 'description': 'value to assign to attribute
\n', + 'type': 'String' + } + ], + 'chainable': 1 + } + ] + }, + 'removeAttribute': { + 'name': 'removeAttribute', + 'params': [ + { + 'name': 'attr', + 'description': 'attribute to remove
\n', + 'type': 'String' + } + ], + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'value': { + 'name': 'value', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'value', + 'description': '', + 'type': 'String|Number' + } + ], + 'chainable': 1 + } + ] + }, + 'show': { + 'name': 'show', + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'hide': { + 'name': 'hide', + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'size': { + 'name': 'size', + 'class': 'p5.Element', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'w', + 'description': 'width of the element, either AUTO, or a number
\n', + 'type': 'Number|Constant' + }, + { + 'name': 'h', + 'description': 'height of the element, either AUTO, or a number
\n', + 'type': 'Number|Constant', + 'optional': true + } + ], + 'chainable': 1 + } + ] + }, + 'remove': { + 'name': 'remove', + 'class': 'p5.Element', + 'module': 'DOM' + }, + 'drop': { + 'name': 'drop', + 'params': [ + { + 'name': 'callback', + 'description': 'callback to receive loaded file, called for each file dropped.
\n', + 'type': 'Function' + }, + { + 'name': 'fxn', + 'description': 'callback triggered once when files are dropped with the drop event.
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5.Element', + 'module': 'DOM' + } + }, + 'p5.Graphics': { + 'reset': { + 'name': 'reset', + 'class': 'p5.Graphics', + 'module': 'Rendering' + }, + 'remove': { + 'name': 'remove', + 'class': 'p5.Graphics', + 'module': 'Rendering' + }, + 'createFramebuffer': { + 'name': 'createFramebuffer', + 'class': 'p5.Graphics', + 'module': 'Rendering' + } + }, + 'JSON': { + 'stringify': { + 'name': 'stringify', + 'params': [ + { + 'name': 'object', + 'description': ':Javascript object that you would like to convert to JSON
\n', + 'type': 'Object' + } + ], + 'class': 'JSON', + 'module': 'Foundation' + } + }, + 'console': { + 'log': { + 'name': 'log', + 'params': [ + { + 'name': 'message', + 'description': ':Message that you would like to print to the console
\n', + 'type': 'String|Expression|Object' + } + ], + 'class': 'console', + 'module': 'Foundation' + } + }, + 'p5.TypedDict': { + 'size': { + 'name': 'size', + 'class': 'p5.TypedDict', + 'module': 'Data' + }, + 'hasKey': { + 'name': 'hasKey', + 'params': [ + { + 'name': 'key', + 'description': 'that you want to look up
\n', + 'type': 'Number|String' + } + ], + 'class': 'p5.TypedDict', + 'module': 'Data' + }, + 'get': { + 'name': 'get', + 'params': [ + { + 'name': 'the', + 'description': 'key you want to access
\n', + 'type': 'Number|String' + } + ], + 'class': 'p5.TypedDict', + 'module': 'Data' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'key', + 'description': '', + 'type': 'Number|String' + }, + { + 'name': 'value', + 'description': '', + 'type': 'Number|String' + } + ], + 'class': 'p5.TypedDict', + 'module': 'Data' + }, + 'create': { + 'name': 'create', + 'class': 'p5.TypedDict', + 'module': 'Data', + 'overloads': [ + { + 'params': [ + { + 'name': 'key', + 'description': '', + 'type': 'Number|String' + }, + { + 'name': 'value', + 'description': '', + 'type': 'Number|String' + } + ] + }, + { + 'params': [ + { + 'name': 'obj', + 'description': 'key/value pair
\n', + 'type': 'Object' + } + ] + } + ] + }, + 'clear': { + 'name': 'clear', + 'class': 'p5.TypedDict', + 'module': 'Data' + }, + 'remove': { + 'name': 'remove', + 'params': [ + { + 'name': 'key', + 'description': 'for the pair to remove
\n', + 'type': 'Number|String' + } + ], + 'class': 'p5.TypedDict', + 'module': 'Data' + }, + 'print': { + 'name': 'print', + 'class': 'p5.TypedDict', + 'module': 'Data' + }, + 'saveTable': { + 'name': 'saveTable', + 'class': 'p5.TypedDict', + 'module': 'Data' + }, + 'saveJSON': { + 'name': 'saveJSON', + 'class': 'p5.TypedDict', + 'module': 'Data' + } + }, + 'p5.NumberDict': { + 'add': { + 'name': 'add', + 'params': [ + { + 'name': 'Key', + 'description': 'for the value you wish to add to
\n', + 'type': 'Number' + }, + { + 'name': 'Number', + 'description': 'to add to the value
\n', + 'type': 'Number' + } + ], + 'class': 'p5.NumberDict', + 'module': 'Data' + }, + 'sub': { + 'name': 'sub', + 'params': [ + { + 'name': 'Key', + 'description': 'for the value you wish to subtract from
\n', + 'type': 'Number' + }, + { + 'name': 'Number', + 'description': 'to subtract from the value
\n', + 'type': 'Number' + } + ], + 'class': 'p5.NumberDict', + 'module': 'Data' + }, + 'mult': { + 'name': 'mult', + 'params': [ + { + 'name': 'Key', + 'description': 'for value you wish to multiply
\n', + 'type': 'Number' + }, + { + 'name': 'Amount', + 'description': 'to multiply the value by
\n', + 'type': 'Number' + } + ], + 'class': 'p5.NumberDict', + 'module': 'Data' + }, + 'div': { + 'name': 'div', + 'params': [ + { + 'name': 'Key', + 'description': 'for value you wish to divide
\n', + 'type': 'Number' + }, + { + 'name': 'Amount', + 'description': 'to divide the value by
\n', + 'type': 'Number' + } + ], + 'class': 'p5.NumberDict', + 'module': 'Data' + }, + 'minValue': { + 'name': 'minValue', + 'class': 'p5.NumberDict', + 'module': 'Data' + }, + 'maxValue': { + 'name': 'maxValue', + 'class': 'p5.NumberDict', + 'module': 'Data' + }, + 'minKey': { + 'name': 'minKey', + 'class': 'p5.NumberDict', + 'module': 'Data' + }, + 'maxKey': { + 'name': 'maxKey', + 'class': 'p5.NumberDict', + 'module': 'Data' + } + }, + 'p5.MediaElement': { + 'src': { + 'name': 'src', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'play': { + 'name': 'play', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'stop': { + 'name': 'stop', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'pause': { + 'name': 'pause', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'loop': { + 'name': 'loop', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'noLoop': { + 'name': 'noLoop', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'autoplay': { + 'name': 'autoplay', + 'params': [ + { + 'name': 'shouldAutoplay', + 'description': 'whether the element should autoplay
\n', + 'type': 'Boolean' + } + ], + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'volume': { + 'name': 'volume', + 'class': 'p5.MediaElement', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'val', + 'description': 'volume between 0.0 and 1.0
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'speed': { + 'name': 'speed', + 'class': 'p5.MediaElement', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'speed', + 'description': 'speed multiplier for element playback
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'time': { + 'name': 'time', + 'class': 'p5.MediaElement', + 'module': 'DOM', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'time', + 'description': 'time to jump to (in seconds)
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + } + ] + }, + 'duration': { + 'name': 'duration', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'onended': { + 'name': 'onended', + 'params': [ + { + 'name': 'callback', + 'description': 'function to call when the\n soundfile has ended. The\n media element will be passed\n in as the argument to the\n callback.
\n', + 'type': 'Function' + } + ], + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'audioNode', + 'description': 'AudioNode from the Web Audio API,\nor an object from the p5.sound library
\n', + 'type': 'AudioNode|Object' + } + ], + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'showControls': { + 'name': 'showControls', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'hideControls': { + 'name': 'hideControls', + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'addCue': { + 'name': 'addCue', + 'params': [ + { + 'name': 'time', + 'description': 'Time in seconds, relative to this media\n element\'s playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.
\n', + 'type': 'Number' + }, + { + 'name': 'callback', + 'description': 'Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.
\n', + 'type': 'Function' + }, + { + 'name': 'value', + 'description': 'An object to be passed as the\n second parameter to the\n callback function.
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'removeCue': { + 'name': 'removeCue', + 'params': [ + { + 'name': 'id', + 'description': 'ID of the cue, as returned by addCue
\n', + 'type': 'Number' + } + ], + 'class': 'p5.MediaElement', + 'module': 'DOM' + }, + 'clearCues': { + 'name': 'clearCues', + 'params': [ + { + 'name': 'id', + 'description': 'ID of the cue, as returned by addCue
\n', + 'type': 'Number' + } + ], + 'class': 'p5.MediaElement', + 'module': 'DOM' + } + }, + 'p5.File': { + 'file': { + 'name': 'file', + 'class': 'p5.File', + 'module': 'DOM' + }, + 'type': { + 'name': 'type', + 'class': 'p5.File', + 'module': 'DOM' + }, + 'subtype': { + 'name': 'subtype', + 'class': 'p5.File', + 'module': 'DOM' + }, + 'name': { + 'name': 'name', + 'class': 'p5.File', + 'module': 'DOM' + }, + 'size': { + 'name': 'size', + 'class': 'p5.File', + 'module': 'DOM' + }, + 'data': { + 'name': 'data', + 'class': 'p5.File', + 'module': 'DOM' + } + }, + 'p5.Image': { + 'width': { + 'name': 'width', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'height': { + 'name': 'height', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'pixels': { + 'name': 'pixels', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'pixelDensity': { + 'name': 'pixelDensity', + 'params': [ + { + 'name': 'density', + 'description': 'A scaling factor for the number of pixels per\nside
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Image', + 'module': 'Image' + }, + 'loadPixels': { + 'name': 'loadPixels', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'updatePixels': { + 'name': 'updatePixels', + 'class': 'p5.Image', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the upper-left corner\n of the subsection to update.
\n', + 'type': 'Integer' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the upper-left corner\n of the subsection to update.
\n', + 'type': 'Integer' + }, + { + 'name': 'w', + 'description': 'width of the subsection to update.
\n', + 'type': 'Integer' + }, + { + 'name': 'h', + 'description': 'height of the subsection to update.
\n', + 'type': 'Integer' + } + ] + }, + { + 'params': [ + ] + } + ] + }, + 'get': { + 'name': 'get', + 'class': 'p5.Image', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the pixel.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the pixel.
\n', + 'type': 'Number' + }, + { + 'name': 'w', + 'description': 'width of the subsection to be returned.
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the subsection to be returned.
\n', + 'type': 'Number' + } + ] + }, + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + } + ] + } + ] + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the pixel.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the pixel.
\n', + 'type': 'Number' + }, + { + 'name': 'a', + 'description': 'grayscale value | pixel array |\n p5.Color object |\n p5.Image to copy.
\n', + 'type': 'Number|Number[]|Object' + } + ], + 'class': 'p5.Image', + 'module': 'Image' + }, + 'resize': { + 'name': 'resize', + 'params': [ + { + 'name': 'width', + 'description': 'resized image width.
\n', + 'type': 'Number' + }, + { + 'name': 'height', + 'description': 'resized image height.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Image', + 'module': 'Image' + }, + 'copy': { + 'name': 'copy', + 'class': 'p5.Image', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'srcImage', + 'description': 'source image.
\n', + 'type': 'p5.Image|p5.Element' + }, + { + 'name': 'sx', + 'description': 'x-coordinate of the source\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'sy', + 'description': 'y-coordinate of the source\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'sw', + 'description': 'source image width.
\n', + 'type': 'Integer' + }, + { + 'name': 'sh', + 'description': 'source image height.
\n', + 'type': 'Integer' + }, + { + 'name': 'dx', + 'description': 'x-coordinate of the destination\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'dy', + 'description': 'y-coordinate of the destination\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'dw', + 'description': 'destination image width.
\n', + 'type': 'Integer' + }, + { + 'name': 'dh', + 'description': 'destination image height.
\n', + 'type': 'Integer' + } + ] + }, + { + 'params': [ + { + 'name': 'sx', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sy', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sw', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sh', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dx', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dy', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dw', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dh', + 'description': '', + 'type': 'Integer' + } + ] + } + ] + }, + 'mask': { + 'name': 'mask', + 'params': [ + { + 'name': 'srcImage', + 'description': 'source image.
\n', + 'type': 'p5.Image' + } + ], + 'class': 'p5.Image', + 'module': 'Image' + }, + 'filter': { + 'name': 'filter', + 'params': [ + { + 'name': 'filterType', + 'description': 'either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, ERODE, DILATE or BLUR.
\n', + 'type': 'Constant' + }, + { + 'name': 'filterParam', + 'description': 'parameter unique to each filter.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Image', + 'module': 'Image' + }, + 'blend': { + 'name': 'blend', + 'class': 'p5.Image', + 'module': 'Image', + 'overloads': [ + { + 'params': [ + { + 'name': 'srcImage', + 'description': 'source image
\n', + 'type': 'p5.Image' + }, + { + 'name': 'sx', + 'description': 'x-coordinate of the source\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'sy', + 'description': 'y-coordinate of the source\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'sw', + 'description': 'source image width.
\n', + 'type': 'Integer' + }, + { + 'name': 'sh', + 'description': 'source image height.
\n', + 'type': 'Integer' + }, + { + 'name': 'dx', + 'description': 'x-coordinate of the destination\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'dy', + 'description': 'y-coordinate of the destination\'s upper-left corner.
\n', + 'type': 'Integer' + }, + { + 'name': 'dw', + 'description': 'destination image width.
\n', + 'type': 'Integer' + }, + { + 'name': 'dh', + 'description': 'destination image height.
\n', + 'type': 'Integer' + }, + { + 'name': 'blendMode', + 'description': 'the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\nAvailable blend modes are: normal | multiply | screen | overlay |\n darken | lighten | color-dodge | color-burn | hard-light |\n soft-light | difference | exclusion | hue | saturation |\n color | luminosity
\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
\n', + 'type': 'Constant' + } + ] + }, + { + 'params': [ + { + 'name': 'sx', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sy', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sw', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'sh', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dx', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dy', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dw', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'dh', + 'description': '', + 'type': 'Integer' + }, + { + 'name': 'blendMode', + 'description': '', + 'type': 'Constant' + } + ] + } + ] + }, + 'save': { + 'name': 'save', + 'params': [ + { + 'name': 'filename', + 'description': 'filename. Defaults to \'untitled\'.
\n', + 'type': 'String' + }, + { + 'name': 'extension', + 'description': 'file extension, either \'png\' or \'jpg\'.\n Defaults to \'png\'.
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.Image', + 'module': 'Image' + }, + 'reset': { + 'name': 'reset', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'getCurrentFrame': { + 'name': 'getCurrentFrame', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'setFrame': { + 'name': 'setFrame', + 'params': [ + { + 'name': 'index', + 'description': 'index of the frame to display.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Image', + 'module': 'Image' + }, + 'numFrames': { + 'name': 'numFrames', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'play': { + 'name': 'play', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'pause': { + 'name': 'pause', + 'class': 'p5.Image', + 'module': 'Image' + }, + 'delay': { + 'name': 'delay', + 'params': [ + { + 'name': 'd', + 'description': 'delay in milliseconds between switching frames.
\n', + 'type': 'Number' + }, + { + 'name': 'index', + 'description': 'index of the frame that will have its delay modified.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Image', + 'module': 'Image' + } + }, + 'p5.PrintWriter': { + 'write': { + 'name': 'write', + 'params': [ + { + 'name': 'data', + 'description': 'all data to be written by the PrintWriter
\n', + 'type': 'Array' + } + ], + 'class': 'p5.PrintWriter', + 'module': 'IO' + }, + 'print': { + 'name': 'print', + 'params': [ + { + 'name': 'data', + 'description': 'all data to be printed by the PrintWriter
\n', + 'type': 'Array' + } + ], + 'class': 'p5.PrintWriter', + 'module': 'IO' + }, + 'clear': { + 'name': 'clear', + 'class': 'p5.PrintWriter', + 'module': 'IO' + }, + 'close': { + 'name': 'close', + 'class': 'p5.PrintWriter', + 'module': 'IO' + } + }, + 'p5.Table': { + 'columns': { + 'name': 'columns', + 'class': 'p5.Table', + 'module': 'IO' + }, + 'rows': { + 'name': 'rows', + 'class': 'p5.Table', + 'module': 'IO' + }, + 'addRow': { + 'name': 'addRow', + 'params': [ + { + 'name': 'row', + 'description': 'row to be added to the table
\n', + 'type': 'p5.TableRow', + 'optional': true + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'removeRow': { + 'name': 'removeRow', + 'params': [ + { + 'name': 'id', + 'description': 'ID number of the row to remove
\n', + 'type': 'Integer' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getRow': { + 'name': 'getRow', + 'params': [ + { + 'name': 'rowID', + 'description': 'ID number of the row to get
\n', + 'type': 'Integer' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getRows': { + 'name': 'getRows', + 'class': 'p5.Table', + 'module': 'IO' + }, + 'findRow': { + 'name': 'findRow', + 'params': [ + { + 'name': 'value', + 'description': 'The value to match
\n', + 'type': 'String' + }, + { + 'name': 'column', + 'description': 'ID number or title of the\n column to search
\n', + 'type': 'Integer|String' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'findRows': { + 'name': 'findRows', + 'params': [ + { + 'name': 'value', + 'description': 'The value to match
\n', + 'type': 'String' + }, + { + 'name': 'column', + 'description': 'ID number or title of the\n column to search
\n', + 'type': 'Integer|String' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'matchRow': { + 'name': 'matchRow', + 'params': [ + { + 'name': 'regexp', + 'description': 'The regular expression to match
\n', + 'type': 'String|RegExp' + }, + { + 'name': 'column', + 'description': 'The column ID (number) or\n title (string)
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'matchRows': { + 'name': 'matchRows', + 'params': [ + { + 'name': 'regexp', + 'description': 'The regular expression to match
\n', + 'type': 'String' + }, + { + 'name': 'column', + 'description': 'The column ID (number) or\n title (string)
\n', + 'type': 'String|Integer', + 'optional': true + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getColumn': { + 'name': 'getColumn', + 'params': [ + { + 'name': 'column', + 'description': 'String or Number of the column to return
\n', + 'type': 'String|Number' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'clearRows': { + 'name': 'clearRows', + 'class': 'p5.Table', + 'module': 'IO' + }, + 'addColumn': { + 'name': 'addColumn', + 'params': [ + { + 'name': 'title', + 'description': 'title of the given column
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getColumnCount': { + 'name': 'getColumnCount', + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getRowCount': { + 'name': 'getRowCount', + 'class': 'p5.Table', + 'module': 'IO' + }, + 'removeTokens': { + 'name': 'removeTokens', + 'params': [ + { + 'name': 'chars', + 'description': 'String listing characters to be removed
\n', + 'type': 'String' + }, + { + 'name': 'column', + 'description': 'Column ID (number)\n or name (string)
\n', + 'type': 'String|Integer', + 'optional': true + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'trim': { + 'name': 'trim', + 'params': [ + { + 'name': 'column', + 'description': 'Column ID (number)\n or name (string)
\n', + 'type': 'String|Integer', + 'optional': true + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'removeColumn': { + 'name': 'removeColumn', + 'params': [ + { + 'name': 'column', + 'description': 'columnName (string) or ID (number)
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'row', + 'description': 'row ID
\n', + 'type': 'Integer' + }, + { + 'name': 'column', + 'description': 'column ID (Number)\n or title (String)
\n', + 'type': 'String|Integer' + }, + { + 'name': 'value', + 'description': 'value to assign
\n', + 'type': 'String|Number' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'setNum': { + 'name': 'setNum', + 'params': [ + { + 'name': 'row', + 'description': 'row ID
\n', + 'type': 'Integer' + }, + { + 'name': 'column', + 'description': 'column ID (Number)\n or title (String)
\n', + 'type': 'String|Integer' + }, + { + 'name': 'value', + 'description': 'value to assign
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'setString': { + 'name': 'setString', + 'params': [ + { + 'name': 'row', + 'description': 'row ID
\n', + 'type': 'Integer' + }, + { + 'name': 'column', + 'description': 'column ID (Number)\n or title (String)
\n', + 'type': 'String|Integer' + }, + { + 'name': 'value', + 'description': 'value to assign
\n', + 'type': 'String' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'get': { + 'name': 'get', + 'params': [ + { + 'name': 'row', + 'description': 'row ID
\n', + 'type': 'Integer' + }, + { + 'name': 'column', + 'description': 'columnName (string) or\n ID (number)
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getNum': { + 'name': 'getNum', + 'params': [ + { + 'name': 'row', + 'description': 'row ID
\n', + 'type': 'Integer' + }, + { + 'name': 'column', + 'description': 'columnName (string) or\n ID (number)
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getString': { + 'name': 'getString', + 'params': [ + { + 'name': 'row', + 'description': 'row ID
\n', + 'type': 'Integer' + }, + { + 'name': 'column', + 'description': 'columnName (string) or\n ID (number)
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getObject': { + 'name': 'getObject', + 'params': [ + { + 'name': 'headerColumn', + 'description': 'Name of the column which should be used to\n title each row object (optional)
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.Table', + 'module': 'IO' + }, + 'getArray': { + 'name': 'getArray', + 'class': 'p5.Table', + 'module': 'IO' + } + }, + 'p5.TableRow': { + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'column', + 'description': 'Column ID (Number)\n or Title (String)
\n', + 'type': 'String|Integer' + }, + { + 'name': 'value', + 'description': 'The value to be stored
\n', + 'type': 'String|Number' + } + ], + 'class': 'p5.TableRow', + 'module': 'IO' + }, + 'setNum': { + 'name': 'setNum', + 'params': [ + { + 'name': 'column', + 'description': 'Column ID (Number)\n or Title (String)
\n', + 'type': 'String|Integer' + }, + { + 'name': 'value', + 'description': 'The value to be stored\n as a Float
\n', + 'type': 'Number|String' + } + ], + 'class': 'p5.TableRow', + 'module': 'IO' + }, + 'setString': { + 'name': 'setString', + 'params': [ + { + 'name': 'column', + 'description': 'Column ID (Number)\n or Title (String)
\n', + 'type': 'String|Integer' + }, + { + 'name': 'value', + 'description': 'The value to be stored\n as a String
\n', + 'type': 'String|Number|Boolean|Object' + } + ], + 'class': 'p5.TableRow', + 'module': 'IO' + }, + 'get': { + 'name': 'get', + 'params': [ + { + 'name': 'column', + 'description': 'columnName (string) or\n ID (number)
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.TableRow', + 'module': 'IO' + }, + 'getNum': { + 'name': 'getNum', + 'params': [ + { + 'name': 'column', + 'description': 'columnName (string) or\n ID (number)
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.TableRow', + 'module': 'IO' + }, + 'getString': { + 'name': 'getString', + 'params': [ + { + 'name': 'column', + 'description': 'columnName (string) or\n ID (number)
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.TableRow', + 'module': 'IO' + } + }, + 'p5.XML': { + 'getParent': { + 'name': 'getParent', + 'class': 'p5.XML', + 'module': 'IO' + }, + 'getName': { + 'name': 'getName', + 'class': 'p5.XML', + 'module': 'IO' + }, + 'setName': { + 'name': 'setName', + 'params': [ + { + 'name': 'the', + 'description': 'new name of the node
\n', + 'type': 'String' + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'hasChildren': { + 'name': 'hasChildren', + 'class': 'p5.XML', + 'module': 'IO' + }, + 'listChildren': { + 'name': 'listChildren', + 'class': 'p5.XML', + 'module': 'IO' + }, + 'getChildren': { + 'name': 'getChildren', + 'params': [ + { + 'name': 'name', + 'description': 'element name
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'getChild': { + 'name': 'getChild', + 'params': [ + { + 'name': 'name', + 'description': 'element name or index
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'addChild': { + 'name': 'addChild', + 'params': [ + { + 'name': 'node', + 'description': 'a p5.XML Object which will be the child to be added
\n', + 'type': 'p5.XML' + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'removeChild': { + 'name': 'removeChild', + 'params': [ + { + 'name': 'name', + 'description': 'element name or index
\n', + 'type': 'String|Integer' + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'getAttributeCount': { + 'name': 'getAttributeCount', + 'class': 'p5.XML', + 'module': 'IO' + }, + 'listAttributes': { + 'name': 'listAttributes', + 'class': 'p5.XML', + 'module': 'IO' + }, + 'hasAttribute': { + 'name': 'hasAttribute', + 'params': [ + { + 'name': 'the', + 'description': 'attribute to be checked
\n', + 'type': 'String' + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'getNum': { + 'name': 'getNum', + 'params': [ + { + 'name': 'name', + 'description': 'the non-null full name of the attribute
\n', + 'type': 'String' + }, + { + 'name': 'defaultValue', + 'description': 'the default value of the attribute
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'getString': { + 'name': 'getString', + 'params': [ + { + 'name': 'name', + 'description': 'the non-null full name of the attribute
\n', + 'type': 'String' + }, + { + 'name': 'defaultValue', + 'description': 'the default value of the attribute
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'setAttribute': { + 'name': 'setAttribute', + 'params': [ + { + 'name': 'name', + 'description': 'the full name of the attribute
\n', + 'type': 'String' + }, + { + 'name': 'value', + 'description': 'the value of the attribute
\n', + 'type': 'Number|String|Boolean' + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'getContent': { + 'name': 'getContent', + 'params': [ + { + 'name': 'defaultValue', + 'description': 'value returned if no content is found
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'setContent': { + 'name': 'setContent', + 'params': [ + { + 'name': 'text', + 'description': 'the new content
\n', + 'type': 'String' + } + ], + 'class': 'p5.XML', + 'module': 'IO' + }, + 'serialize': { + 'name': 'serialize', + 'class': 'p5.XML', + 'module': 'IO' + } + }, + 'p5.Vector': { + 'x': { + 'name': 'x', + 'class': 'p5.Vector', + 'module': 'Math' + }, + 'y': { + 'name': 'y', + 'class': 'p5.Vector', + 'module': 'Math' + }, + 'z': { + 'name': 'z', + 'class': 'p5.Vector', + 'module': 'Math' + }, + 'toString': { + 'name': 'toString', + 'class': 'p5.Vector', + 'module': 'Math' + }, + 'set': { + 'name': 'set', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x component of the vector.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'y', + 'description': 'y component of the vector.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'z component of the vector.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'vector to set.
\n', + 'type': 'p5.Vector|Number[]' + } + ], + 'chainable': 1 + } + ] + }, + 'copy': { + 'name': 'copy', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'the p5.Vector to create a copy of
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'add': { + 'name': 'add', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x component of the vector to be added.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y component of the vector to be added.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'z component of the vector to be added.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'The vector to add
\n', + 'type': 'p5.Vector|Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'A p5.Vector to add
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': 'A p5.Vector to add
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'target', + 'description': 'vector to receive the result.
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'rem': { + 'name': 'rem', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x component of divisor vector.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y component of divisor vector.
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z component of divisor vector.
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'divisor vector.
\n', + 'type': 'p5.Vector | Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'The dividend p5.Vector
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': 'The divisor p5.Vector
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': '', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'sub': { + 'name': 'sub', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x component of the vector to subtract.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y component of the vector to subtract.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'z component of the vector to subtract.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'the vector to subtract
\n', + 'type': 'p5.Vector|Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'A p5.Vector to subtract from
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': 'A p5.Vector to subtract
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'target', + 'description': 'vector to receive the result.
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'mult': { + 'name': 'mult', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'n', + 'description': 'The number to multiply with the vector
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': 'number to multiply with the x component of the vector.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'number to multiply with the y component of the vector.
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'number to multiply with the z component of the vector.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'arr', + 'description': 'array to multiply with the components of the vector.
\n', + 'type': 'Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'vector to multiply with the components of the original vector.
\n', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'static': 1 + }, + { + 'params': [ + { + 'name': 'v', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'n', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'target', + 'description': 'vector to receive the result.
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + }, + { + 'params': [ + { + 'name': 'v0', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'v1', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'target', + 'description': '', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + }, + { + 'params': [ + { + 'name': 'v0', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'arr', + 'description': '', + 'type': 'Number[]' + }, + { + 'name': 'target', + 'description': '', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'div': { + 'name': 'div', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'n', + 'description': 'The number to divide the vector by
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': 'number to divide with the x component of the vector.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'number to divide with the y component of the vector.
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'number to divide with the z component of the vector.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'arr', + 'description': 'array to divide the components of the vector by.
\n', + 'type': 'Number[]' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'vector to divide the components of the original vector by.
\n', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'static': 1 + }, + { + 'params': [ + { + 'name': 'v', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'n', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'target', + 'description': 'The vector to receive the result
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + }, + { + 'params': [ + { + 'name': 'v0', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'v1', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'target', + 'description': '', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + }, + { + 'params': [ + { + 'name': 'v0', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'arr', + 'description': '', + 'type': 'Number[]' + }, + { + 'name': 'target', + 'description': '', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'mag': { + 'name': 'mag', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'vecT', + 'description': 'The vector to return the magnitude of
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'magSq': { + 'name': 'magSq', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'vecT', + 'description': 'the vector to return the squared magnitude of
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'dot': { + 'name': 'dot', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x component of the vector.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y component of the vector.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'z component of the vector.
\n', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'p5.Vector to be dotted.
\n', + 'type': 'p5.Vector' + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'first p5.Vector.
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': 'second p5.Vector.
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'cross': { + 'name': 'cross', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'v', + 'description': 'p5.Vector to be crossed.
\n', + 'type': 'p5.Vector' + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'first p5.Vector.
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': 'second p5.Vector.
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'dist': { + 'name': 'dist', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'v', + 'description': 'x, y, and z coordinates of a p5.Vector.
\n', + 'type': 'p5.Vector' + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'The first p5.Vector
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': 'The second p5.Vector
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'normalize': { + 'name': 'normalize', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'The vector to normalize
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'target', + 'description': 'The vector to receive the result
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'limit': { + 'name': 'limit', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'max', + 'description': 'maximum magnitude for the vector.
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'the vector to limit
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'max', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'target', + 'description': 'the vector to receive the result (Optional)
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'setMag': { + 'name': 'setMag', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'len', + 'description': 'new length for this vector.
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'the vector to set the magnitude of
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'len', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'target', + 'description': 'the vector to receive the result (Optional)
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'heading': { + 'name': 'heading', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'the vector to find the angle of
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'setHeading': { + 'name': 'setHeading', + 'params': [ + { + 'name': 'angle', + 'description': 'angle of rotation.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Vector', + 'module': 'Math' + }, + 'rotate': { + 'name': 'rotate', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'angle', + 'description': 'angle of rotation.
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'angle', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'target', + 'description': 'The vector to receive the result
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'angleBetween': { + 'name': 'angleBetween', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'value', + 'description': 'x, y, and z components of a p5.Vector.
\n', + 'type': 'p5.Vector' + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'the first vector.
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': 'the second vector.
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'lerp': { + 'name': 'lerp', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x component.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y component.
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z component.
\n', + 'type': 'Number' + }, + { + 'name': 'amt', + 'description': 'amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.
\n', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'p5.Vector to lerp toward.
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'amt', + 'description': '', + 'type': 'Number' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'v1', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'amt', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'target', + 'description': 'The vector to receive the result
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'slerp': { + 'name': 'slerp', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'v', + 'description': 'p5.Vector to slerp toward.
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'amt', + 'description': 'amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.
\n', + 'type': 'Number' + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'old vector.
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'v2', + 'description': 'new vector.
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'amt', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'target', + 'description': 'vector to receive the result.
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'reflect': { + 'name': 'reflect', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'surfaceNormal', + 'description': 'p5.Vector\n to reflect about.
\n', + 'type': 'p5.Vector' + } + ], + 'chainable': 1 + }, + { + 'params': [ + { + 'name': 'incidentVector', + 'description': 'vector to be reflected.
\n', + 'type': 'p5.Vector' + }, + { + 'name': 'surfaceNormal', + 'description': '', + 'type': 'p5.Vector' + }, + { + 'name': 'target', + 'description': 'vector to receive the result.
\n', + 'type': 'p5.Vector', + 'optional': true + } + ], + 'static': 1 + } + ] + }, + 'array': { + 'name': 'array', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'v', + 'description': 'the vector to convert to an array
\n', + 'type': 'p5.Vector' + } + ], + 'static': 1 + } + ] + }, + 'equals': { + 'name': 'equals', + 'class': 'p5.Vector', + 'module': 'Math', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x component of the vector.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'y', + 'description': 'y component of the vector.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'z', + 'description': 'z component of the vector.
\n', + 'type': 'Number', + 'optional': true + } + ] + }, + { + 'params': [ + { + 'name': 'value', + 'description': 'vector to compare.
\n', + 'type': 'p5.Vector|Array' + } + ] + }, + { + 'params': [ + { + 'name': 'v1', + 'description': 'the first vector to compare
\n', + 'type': 'p5.Vector|Array' + }, + { + 'name': 'v2', + 'description': 'the second vector to compare
\n', + 'type': 'p5.Vector|Array' + } + ], + 'static': 1 + } + ] + }, + 'fromAngle': { + 'name': 'fromAngle', + 'params': [ + { + 'name': 'angle', + 'description': 'desired angle, in radians. Unaffected by angleMode().
\n', + 'type': 'Number' + }, + { + 'name': 'length', + 'description': 'length of the new vector (defaults to 1).
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Vector', + 'module': 'Math' + }, + 'fromAngles': { + 'name': 'fromAngles', + 'params': [ + { + 'name': 'theta', + 'description': 'polar angle in radians (zero is up).
\n', + 'type': 'Number' + }, + { + 'name': 'phi', + 'description': 'azimuthal angle in radians\n (zero is out of the screen).
\n', + 'type': 'Number' + }, + { + 'name': 'length', + 'description': 'length of the new vector (defaults to 1).
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Vector', + 'module': 'Math' + }, + 'random2D': { + 'name': 'random2D', + 'class': 'p5.Vector', + 'module': 'Math' + }, + 'random3D': { + 'name': 'random3D', + 'class': 'p5.Vector', + 'module': 'Math' + } + }, + 'p5.Font': { + 'font': { + 'name': 'font', + 'class': 'p5.Font', + 'module': 'Typography' + }, + 'textBounds': { + 'name': 'textBounds', + 'params': [ + { + 'name': 'str', + 'description': 'string of text.
\n', + 'type': 'String' + }, + { + 'name': 'x', + 'description': 'x-coordinate of the text.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the text.
\n', + 'type': 'Number' + }, + { + 'name': 'fontSize', + 'description': 'font size. Defaults to the current\n textSize().
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Font', + 'module': 'Typography' + }, + 'textToPoints': { + 'name': 'textToPoints', + 'params': [ + { + 'name': 'str', + 'description': 'string of text.
\n', + 'type': 'String' + }, + { + 'name': 'x', + 'description': 'x-coordinate of the text.
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the text.
\n', + 'type': 'Number' + }, + { + 'name': 'fontSize', + 'description': 'font size. Defaults to the current\n textSize().
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'options', + 'description': 'object with sampleFactor and simplifyThreshold\n properties.
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.Font', + 'module': 'Typography' + } + }, + 'p5.Camera': { + 'eyeX': { + 'name': 'eyeX', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'eyeY': { + 'name': 'eyeY', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'eyeZ': { + 'name': 'eyeZ', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'centerX': { + 'name': 'centerX', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'centerY': { + 'name': 'centerY', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'centerZ': { + 'name': 'centerZ', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'upX': { + 'name': 'upX', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'upY': { + 'name': 'upY', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'upZ': { + 'name': 'upZ', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'perspective': { + 'name': 'perspective', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'ortho': { + 'name': 'ortho', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'frustum': { + 'name': 'frustum', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'pan': { + 'name': 'pan', + 'params': [ + { + 'name': 'angle', + 'description': 'amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Camera', + 'module': '3D' + }, + 'tilt': { + 'name': 'tilt', + 'params': [ + { + 'name': 'angle', + 'description': 'amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Camera', + 'module': '3D' + }, + 'lookAt': { + 'name': 'lookAt', + 'params': [ + { + 'name': 'x', + 'description': 'x position of a point in world space
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y position of a point in world space
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z position of a point in world space
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Camera', + 'module': '3D' + }, + 'camera': { + 'name': 'camera', + 'class': 'p5.Camera', + 'module': '3D' + }, + 'move': { + 'name': 'move', + 'params': [ + { + 'name': 'x', + 'description': 'amount to move along camera\'s left-right axis
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'amount to move along camera\'s up-down axis
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'amount to move along camera\'s forward-backward axis
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Camera', + 'module': '3D' + }, + 'setPosition': { + 'name': 'setPosition', + 'params': [ + { + 'name': 'x', + 'description': 'x position of a point in world space
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y position of a point in world space
\n', + 'type': 'Number' + }, + { + 'name': 'z', + 'description': 'z position of a point in world space
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Camera', + 'module': '3D' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'cam', + 'description': 'source camera
\n', + 'type': 'p5.Camera' + } + ], + 'class': 'p5.Camera', + 'module': '3D' + }, + 'slerp': { + 'name': 'slerp', + 'params': [ + { + 'name': 'cam0', + 'description': 'first p5.Camera
\n', + 'type': 'p5.Camera' + }, + { + 'name': 'cam1', + 'description': 'second p5.Camera
\n', + 'type': 'p5.Camera' + }, + { + 'name': 'amt', + 'description': 'amount to use for interpolation during slerp
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Camera', + 'module': '3D' + } + }, + 'p5.Framebuffer': { + 'pixels': { + 'name': 'pixels', + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'resize': { + 'name': 'resize', + 'params': [ + { + 'name': 'width', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'height', + 'description': '', + 'type': 'Number' + } + ], + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'pixelDensity': { + 'name': 'pixelDensity', + 'params': [ + { + 'name': 'density', + 'description': 'A scaling factor for the number of pixels per\nside of the framebuffer
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'autoSized': { + 'name': 'autoSized', + 'params': [ + { + 'name': 'autoSized', + 'description': 'Whether or not the framebuffer should resize\nalong with the canvas it\'s attached to
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'createCamera': { + 'name': 'createCamera', + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'remove': { + 'name': 'remove', + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'begin': { + 'name': 'begin', + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'end': { + 'name': 'end', + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'draw': { + 'name': 'draw', + 'params': [ + { + 'name': 'callback', + 'description': 'A function to run that draws to the canvas. The\nfunction will immediately be run, but it will draw to the framebuffer\ninstead of the canvas.
\n', + 'type': 'Function' + } + ], + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'get': { + 'name': 'get', + 'class': 'p5.Framebuffer', + 'module': 'Rendering', + 'overloads': [ + { + 'params': [ + { + 'name': 'x', + 'description': 'x-coordinate of the pixel
\n', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': 'y-coordinate of the pixel
\n', + 'type': 'Number' + }, + { + 'name': 'w', + 'description': 'width of the section to be returned
\n', + 'type': 'Number' + }, + { + 'name': 'h', + 'description': 'height of the section to be returned
\n', + 'type': 'Number' + } + ] + }, + { + 'params': [ + ] + }, + { + 'params': [ + { + 'name': 'x', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'y', + 'description': '', + 'type': 'Number' + } + ] + } + ] + }, + 'color': { + 'name': 'color', + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + }, + 'depth': { + 'name': 'depth', + 'class': 'p5.Framebuffer', + 'module': 'Rendering' + } + }, + 'p5.Geometry': { + 'computeFaces': { + 'name': 'computeFaces', + 'class': 'p5.Geometry', + 'module': 'Shape' + }, + 'computeNormals': { + 'name': 'computeNormals', + 'class': 'p5.Geometry', + 'module': 'Shape' + }, + 'averageNormals': { + 'name': 'averageNormals', + 'class': 'p5.Geometry', + 'module': 'Shape' + }, + 'averagePoleNormals': { + 'name': 'averagePoleNormals', + 'class': 'p5.Geometry', + 'module': 'Shape' + }, + 'normalize': { + 'name': 'normalize', + 'class': 'p5.Geometry', + 'module': 'Shape' + } + }, + 'p5.Shader': { + 'copyToContext': { + 'name': 'copyToContext', + 'params': [ + { + 'name': 'context', + 'description': 'The graphic or instance to copy this shader to.\nPass window if you need to copy to the main canvas.
the name of the uniform.\nMust correspond to the name used in the vertex and fragment shaders
\n', + 'type': 'String' + }, + { + 'name': 'data', + 'description': 'the data to associate with the uniform. The type can be\na boolean (true/false), a number, an array of numbers, or\nan image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture)
\n', + 'type': 'Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture' + } + ], + 'class': 'p5.Shader', + 'module': '3D' + } + }, + 'p5.SoundFile': { + 'isLoaded': { + 'name': 'isLoaded', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'play': { + 'name': 'play', + 'params': [ + { + 'name': 'startTime', + 'description': '(optional) schedule playback to start (in seconds from now).
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'rate', + 'description': '(optional) playback rate
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'amp', + 'description': '(optional) amplitude (volume)\n of playback
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'cueStart', + 'description': '(optional) cue start time in seconds
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'duration', + 'description': '(optional) duration of playback in seconds
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'playMode': { + 'name': 'playMode', + 'params': [ + { + 'name': 'str', + 'description': '\'restart\' or \'sustain\' or \'untilDone\'
\n', + 'type': 'String' + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'pause': { + 'name': 'pause', + 'params': [ + { + 'name': 'startTime', + 'description': '(optional) schedule event to occur\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'loop': { + 'name': 'loop', + 'params': [ + { + 'name': 'startTime', + 'description': '(optional) schedule event to occur\n seconds from now
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'rate', + 'description': '(optional) playback rate
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'amp', + 'description': '(optional) playback volume
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'cueLoopStart', + 'description': '(optional) startTime in seconds
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'duration', + 'description': '(optional) loop duration in seconds
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'setLoop': { + 'name': 'setLoop', + 'params': [ + { + 'name': 'Boolean', + 'description': 'set looping to true or false
\n', + 'type': 'Boolean' + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'isLooping': { + 'name': 'isLooping', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'isPlaying': { + 'name': 'isPlaying', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'isPaused': { + 'name': 'isPaused', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'stop': { + 'name': 'stop', + 'params': [ + { + 'name': 'startTime', + 'description': '(optional) schedule event to occur\n in seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'pan': { + 'name': 'pan', + 'params': [ + { + 'name': 'panValue', + 'description': 'Set the stereo panner
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'getPan': { + 'name': 'getPan', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'rate': { + 'name': 'rate', + 'params': [ + { + 'name': 'playbackRate', + 'description': 'Set the playback rate. 1.0 is normal,\n .5 is half-speed, 2.0 is twice as fast.\n Values less than zero play backwards.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'setVolume': { + 'name': 'setVolume', + 'params': [ + { + 'name': 'volume', + 'description': 'Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n', + 'type': 'Number|Object' + }, + { + 'name': 'rampTime', + 'description': 'Fade for t seconds
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'Schedule this event to happen at\n t seconds in the future
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'duration': { + 'name': 'duration', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'currentTime': { + 'name': 'currentTime', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'jump': { + 'name': 'jump', + 'params': [ + { + 'name': 'cueTime', + 'description': 'cueTime of the soundFile in seconds.
\n', + 'type': 'Number' + }, + { + 'name': 'duration', + 'description': 'duration in seconds.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'channels': { + 'name': 'channels', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'sampleRate': { + 'name': 'sampleRate', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'frames': { + 'name': 'frames', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'getPeaks': { + 'name': 'getPeaks', + 'params': [ + { + 'name': 'length', + 'description': 'length is the size of the returned array.\n Larger length results in more precision.\n Defaults to 5*width of the browser window.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'reverseBuffer': { + 'name': 'reverseBuffer', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'onended': { + 'name': 'onended', + 'params': [ + { + 'name': 'callback', + 'description': 'function to call when the\n soundfile has ended.
\n', + 'type': 'Function' + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'object', + 'description': 'Audio object that accepts an input
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'setPath': { + 'name': 'setPath', + 'params': [ + { + 'name': 'path', + 'description': 'path to audio file
\n', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': 'Callback
\n', + 'type': 'Function' + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'setBuffer': { + 'name': 'setBuffer', + 'params': [ + { + 'name': 'buf', + 'description': 'Array of Float32 Array(s). 2 Float32 Arrays\n will create a stereo source. 1 will create\n a mono source.
\n', + 'type': 'Array' + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'addCue': { + 'name': 'addCue', + 'params': [ + { + 'name': 'time', + 'description': 'Time in seconds, relative to this media\n element\'s playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.
\n', + 'type': 'Number' + }, + { + 'name': 'callback', + 'description': 'Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.
\n', + 'type': 'Function' + }, + { + 'name': 'value', + 'description': 'An object to be passed as the\n second parameter to the\n callback function.
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'removeCue': { + 'name': 'removeCue', + 'params': [ + { + 'name': 'id', + 'description': 'ID of the cue, as returned by addCue
\n', + 'type': 'Number' + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'clearCues': { + 'name': 'clearCues', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'save': { + 'name': 'save', + 'params': [ + { + 'name': 'fileName', + 'description': 'name of the resulting .wav file.
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + }, + 'getBlob': { + 'name': 'getBlob', + 'class': 'p5.SoundFile', + 'module': 'p5.sound' + } + }, + 'p5.Amplitude': { + 'setInput': { + 'name': 'setInput', + 'params': [ + { + 'name': 'snd', + 'description': 'set the sound source\n (optional, defaults to\n main output)
\n', + 'type': 'SoundObject|undefined', + 'optional': true + }, + { + 'name': 'smoothing', + 'description': 'a range between 0.0 and 1.0\n to smooth amplitude readings
\n', + 'type': 'Number|undefined', + 'optional': true + } + ], + 'class': 'p5.Amplitude', + 'module': 'p5.sound' + }, + 'getLevel': { + 'name': 'getLevel', + 'params': [ + { + 'name': 'channel', + 'description': 'Optionally return only channel 0 (left) or 1 (right)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Amplitude', + 'module': 'p5.sound' + }, + 'toggleNormalize': { + 'name': 'toggleNormalize', + 'params': [ + { + 'name': 'boolean', + 'description': 'set normalize to true (1) or false (0)
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5.Amplitude', + 'module': 'p5.sound' + }, + 'smooth': { + 'name': 'smooth', + 'params': [ + { + 'name': 'set', + 'description': 'smoothing from 0.0 <= 1
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Amplitude', + 'module': 'p5.sound' + } + }, + 'p5.FFT': { + 'setInput': { + 'name': 'setInput', + 'params': [ + { + 'name': 'source', + 'description': 'p5.sound object (or web audio API source node)
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.FFT', + 'module': 'p5.sound' + }, + 'waveform': { + 'name': 'waveform', + 'params': [ + { + 'name': 'bins', + 'description': 'Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'precision', + 'description': 'If any value is provided, will return results\n in a Float32 Array which is more precise\n than a regular array.
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.FFT', + 'module': 'p5.sound' + }, + 'analyze': { + 'name': 'analyze', + 'params': [ + { + 'name': 'bins', + 'description': 'Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'scale', + 'description': 'If "dB," returns decibel\n float measurements between\n -140 and 0 (max).\n Otherwise returns integers from 0-255.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.FFT', + 'module': 'p5.sound' + }, + 'getEnergy': { + 'name': 'getEnergy', + 'params': [ + { + 'name': 'frequency1', + 'description': 'Will return a value representing\n energy at this frequency. Alternately,\n the strings "bass", "lowMid" "mid",\n "highMid", and "treble" will return\n predefined frequency ranges.
\n', + 'type': 'Number|String' + }, + { + 'name': 'frequency2', + 'description': 'If a second frequency is given,\n will return average amount of\n energy that exists between the\n two frequencies.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.FFT', + 'module': 'p5.sound' + }, + 'getCentroid': { + 'name': 'getCentroid', + 'class': 'p5.FFT', + 'module': 'p5.sound' + }, + 'smooth': { + 'name': 'smooth', + 'params': [ + { + 'name': 'smoothing', + 'description': '0.0 < smoothing < 1.0.\n Defaults to 0.8.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.FFT', + 'module': 'p5.sound' + }, + 'linAverages': { + 'name': 'linAverages', + 'params': [ + { + 'name': 'N', + 'description': 'Number of returned frequency groups
\n', + 'type': 'Number' + } + ], + 'class': 'p5.FFT', + 'module': 'p5.sound' + }, + 'logAverages': { + 'name': 'logAverages', + 'params': [ + { + 'name': 'octaveBands', + 'description': 'Array of Octave Bands objects for grouping
\n', + 'type': 'Array' + } + ], + 'class': 'p5.FFT', + 'module': 'p5.sound' + }, + 'getOctaveBands': { + 'name': 'getOctaveBands', + 'params': [ + { + 'name': 'N', + 'description': 'Specifies the 1/N type of generated octave bands
\n', + 'type': 'Number' + }, + { + 'name': 'fCtr0', + 'description': 'Minimum central frequency for the lowest band
\n', + 'type': 'Number' + } + ], + 'class': 'p5.FFT', + 'module': 'p5.sound' + } + }, + 'p5.Oscillator': { + 'start': { + 'name': 'start', + 'params': [ + { + 'name': 'time', + 'description': 'startTime in seconds from now.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'frequency', + 'description': 'frequency in Hz.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'stop': { + 'name': 'stop', + 'params': [ + { + 'name': 'secondsFromNow', + 'description': 'Time, in seconds from now.
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'amp': { + 'name': 'amp', + 'params': [ + { + 'name': 'vol', + 'description': 'between 0 and 1.0\n or a modulating signal/oscillator
\n', + 'type': 'Number|Object' + }, + { + 'name': 'rampTime', + 'description': 'create a fade that lasts rampTime
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'getAmp': { + 'name': 'getAmp', + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'freq': { + 'name': 'freq', + 'params': [ + { + 'name': 'Frequency', + 'description': 'Frequency in Hz\n or modulating signal/oscillator
\n', + 'type': 'Number|Object' + }, + { + 'name': 'rampTime', + 'description': 'Ramp time (in seconds)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'Schedule this event to happen\n at x seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'getFreq': { + 'name': 'getFreq', + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'setType': { + 'name': 'setType', + 'params': [ + { + 'name': 'type', + 'description': '\'sine\', \'triangle\', \'sawtooth\' or \'square\'.
\n', + 'type': 'String' + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'getType': { + 'name': 'getType', + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': 'A p5.sound or Web Audio object
\n', + 'type': 'Object' + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'pan': { + 'name': 'pan', + 'params': [ + { + 'name': 'panning', + 'description': 'Number between -1 and 1
\n', + 'type': 'Number' + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'getPan': { + 'name': 'getPan', + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'phase': { + 'name': 'phase', + 'params': [ + { + 'name': 'phase', + 'description': 'float between 0.0 and 1.0
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'add': { + 'name': 'add', + 'params': [ + { + 'name': 'number', + 'description': 'Constant number to add
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'mult': { + 'name': 'mult', + 'params': [ + { + 'name': 'number', + 'description': 'Constant number to multiply
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + }, + 'scale': { + 'name': 'scale', + 'params': [ + { + 'name': 'inMin', + 'description': 'input range minumum
\n', + 'type': 'Number' + }, + { + 'name': 'inMax', + 'description': 'input range maximum
\n', + 'type': 'Number' + }, + { + 'name': 'outMin', + 'description': 'input range minumum
\n', + 'type': 'Number' + }, + { + 'name': 'outMax', + 'description': 'input range maximum
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Oscillator', + 'module': 'p5.sound' + } + }, + 'p5.Envelope': { + 'attackTime': { + 'name': 'attackTime', + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'attackLevel': { + 'name': 'attackLevel', + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'decayTime': { + 'name': 'decayTime', + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'decayLevel': { + 'name': 'decayLevel', + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'releaseTime': { + 'name': 'releaseTime', + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'releaseLevel': { + 'name': 'releaseLevel', + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'attackTime', + 'description': 'Time (in seconds) before level\n reaches attackLevel
\n', + 'type': 'Number' + }, + { + 'name': 'attackLevel', + 'description': 'Typically an amplitude between\n 0.0 and 1.0
\n', + 'type': 'Number' + }, + { + 'name': 'decayTime', + 'description': 'Time
\n', + 'type': 'Number' + }, + { + 'name': 'decayLevel', + 'description': 'Amplitude (In a standard ADSR envelope,\n decayLevel = sustainLevel)
\n', + 'type': 'Number' + }, + { + 'name': 'releaseTime', + 'description': 'Release Time (in seconds)
\n', + 'type': 'Number' + }, + { + 'name': 'releaseLevel', + 'description': 'Amplitude
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'setADSR': { + 'name': 'setADSR', + 'params': [ + { + 'name': 'attackTime', + 'description': 'Time (in seconds before envelope\n reaches Attack Level
\n', + 'type': 'Number' + }, + { + 'name': 'decayTime', + 'description': 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'susRatio', + 'description': 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'setRange': { + 'name': 'setRange', + 'params': [ + { + 'name': 'aLevel', + 'description': 'attack level (defaults to 1)
\n', + 'type': 'Number' + }, + { + 'name': 'rLevel', + 'description': 'release level (defaults to 0)
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'setInput': { + 'name': 'setInput', + 'params': [ + { + 'name': 'inputs', + 'description': 'A p5.sound object or\n Web Audio Param.
\n', + 'type': 'Object', + 'optional': true, + 'multiple': true + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'setExp': { + 'name': 'setExp', + 'params': [ + { + 'name': 'isExp', + 'description': 'true is exponential, false is linear
\n', + 'type': 'Boolean' + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'play': { + 'name': 'play', + 'params': [ + { + 'name': 'unit', + 'description': 'A p5.sound object or\n Web Audio Param.
\n', + 'type': 'Object' + }, + { + 'name': 'startTime', + 'description': 'time from now (in seconds) at which to play
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'sustainTime', + 'description': 'time to sustain before releasing the envelope
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'triggerAttack': { + 'name': 'triggerAttack', + 'params': [ + { + 'name': 'unit', + 'description': 'p5.sound Object or Web Audio Param
\n', + 'type': 'Object' + }, + { + 'name': 'secondsFromNow', + 'description': 'time from now (in seconds)
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'triggerRelease': { + 'name': 'triggerRelease', + 'params': [ + { + 'name': 'unit', + 'description': 'p5.sound Object or Web Audio Param
\n', + 'type': 'Object' + }, + { + 'name': 'secondsFromNow', + 'description': 'time to trigger the release
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'ramp': { + 'name': 'ramp', + 'params': [ + { + 'name': 'unit', + 'description': 'p5.sound Object or Web Audio Param
\n', + 'type': 'Object' + }, + { + 'name': 'secondsFromNow', + 'description': 'When to trigger the ramp
\n', + 'type': 'Number' + }, + { + 'name': 'v', + 'description': 'Target value
\n', + 'type': 'Number' + }, + { + 'name': 'v2', + 'description': 'Second target value
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'add': { + 'name': 'add', + 'params': [ + { + 'name': 'number', + 'description': 'Constant number to add
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'mult': { + 'name': 'mult', + 'params': [ + { + 'name': 'number', + 'description': 'Constant number to multiply
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + }, + 'scale': { + 'name': 'scale', + 'params': [ + { + 'name': 'inMin', + 'description': 'input range minumum
\n', + 'type': 'Number' + }, + { + 'name': 'inMax', + 'description': 'input range maximum
\n', + 'type': 'Number' + }, + { + 'name': 'outMin', + 'description': 'input range minumum
\n', + 'type': 'Number' + }, + { + 'name': 'outMax', + 'description': 'input range maximum
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Envelope', + 'module': 'p5.sound' + } + }, + 'p5.Noise': { + 'setType': { + 'name': 'setType', + 'params': [ + { + 'name': 'type', + 'description': '\'white\', \'pink\' or \'brown\'
\n', + 'type': 'String', + 'optional': true + } + ], + 'class': 'p5.Noise', + 'module': 'p5.sound' + } + }, + 'p5.Pulse': { + 'width': { + 'name': 'width', + 'params': [ + { + 'name': 'width', + 'description': 'Width between the pulses (0 to 1.0,\n defaults to 0)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Pulse', + 'module': 'p5.sound' + } + }, + 'p5.AudioIn': { + 'input': { + 'name': 'input', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'output': { + 'name': 'output', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'stream': { + 'name': 'stream', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'mediaStream': { + 'name': 'mediaStream', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'currentSource': { + 'name': 'currentSource', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'enabled': { + 'name': 'enabled', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'amplitude': { + 'name': 'amplitude', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'start': { + 'name': 'start', + 'params': [ + { + 'name': 'successCallback', + 'description': 'Name of a function to call on\n success.
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'Name of a function to call if\n there was an error. For example,\n some browsers do not support\n getUserMedia.
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'stop': { + 'name': 'stop', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': 'An object that accepts audio input,\n such as an FFT
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'getLevel': { + 'name': 'getLevel', + 'params': [ + { + 'name': 'smoothing', + 'description': 'Smoothing is 0.0 by default.\n Smooths values based on previous values.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'amp': { + 'name': 'amp', + 'params': [ + { + 'name': 'vol', + 'description': 'between 0 and 1.0
\n', + 'type': 'Number' + }, + { + 'name': 'time', + 'description': 'ramp time (optional)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'getSources': { + 'name': 'getSources', + 'params': [ + { + 'name': 'successCallback', + 'description': 'This callback function handles the sources when they\n have been enumerated. The callback function\n receives the deviceList array as its only argument
\n', + 'type': 'Function', + 'optional': true + }, + { + 'name': 'errorCallback', + 'description': 'This optional callback receives the error\n message as its argument.
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + }, + 'setSource': { + 'name': 'setSource', + 'params': [ + { + 'name': 'num', + 'description': 'position of input source in the array
\n', + 'type': 'Number' + } + ], + 'class': 'p5.AudioIn', + 'module': 'p5.sound' + } + }, + 'p5.Effect': { + 'amp': { + 'name': 'amp', + 'params': [ + { + 'name': 'vol', + 'description': 'amplitude between 0 and 1.0
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'rampTime', + 'description': 'create a fade that lasts until rampTime
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'tFromNow', + 'description': 'schedule this event to happen in tFromNow seconds
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Effect', + 'module': 'p5.sound' + }, + 'chain': { + 'name': 'chain', + 'params': [ + { + 'name': 'arguments', + 'description': 'Chain together multiple sound objects
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.Effect', + 'module': 'p5.sound' + }, + 'drywet': { + 'name': 'drywet', + 'params': [ + { + 'name': 'fade', + 'description': 'The desired drywet value (0 - 1.0)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Effect', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': '', + 'type': 'Object' + } + ], + 'class': 'p5.Effect', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.Effect', + 'module': 'p5.sound' + } + }, + 'p5.Filter': { + 'biquadFilter': { + 'name': 'biquadFilter', + 'class': 'p5.Filter', + 'module': 'p5.sound' + }, + 'process': { + 'name': 'process', + 'params': [ + { + 'name': 'Signal', + 'description': 'An object that outputs audio
\n', + 'type': 'Object' + }, + { + 'name': 'freq', + 'description': 'Frequency in Hz, from 10 to 22050
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'res', + 'description': 'Resonance/Width of the filter frequency\n from 0.001 to 1000
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Filter', + 'module': 'p5.sound' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'freq', + 'description': 'Frequency in Hz, from 10 to 22050
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'res', + 'description': 'Resonance (Q) from 0.001 to 1000
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Filter', + 'module': 'p5.sound' + }, + 'freq': { + 'name': 'freq', + 'params': [ + { + 'name': 'freq', + 'description': 'Filter Frequency
\n', + 'type': 'Number' + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Filter', + 'module': 'p5.sound' + }, + 'res': { + 'name': 'res', + 'params': [ + { + 'name': 'res', + 'description': 'Resonance/Width of filter freq\n from 0.001 to 1000
\n', + 'type': 'Number' + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Filter', + 'module': 'p5.sound' + }, + 'gain': { + 'name': 'gain', + 'params': [ + { + 'name': 'gain', + 'description': '', + 'type': 'Number' + } + ], + 'class': 'p5.Filter', + 'module': 'p5.sound' + }, + 'toggle': { + 'name': 'toggle', + 'class': 'p5.Filter', + 'module': 'p5.sound' + }, + 'setType': { + 'name': 'setType', + 'params': [ + { + 'name': 't', + 'description': '', + 'type': 'String' + } + ], + 'class': 'p5.Filter', + 'module': 'p5.sound' + } + }, + 'p5.EQ': { + 'bands': { + 'name': 'bands', + 'class': 'p5.EQ', + 'module': 'p5.sound' + }, + 'process': { + 'name': 'process', + 'params': [ + { + 'name': 'src', + 'description': 'Audio source
\n', + 'type': 'Object' + } + ], + 'class': 'p5.EQ', + 'module': 'p5.sound' + } + }, + 'p5.Panner3D': { + 'panner': { + 'name': 'panner', + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'process': { + 'name': 'process', + 'params': [ + { + 'name': 'src', + 'description': 'Input source
\n', + 'type': 'Object' + } + ], + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'xVal', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'yVal', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'zVal', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'time', + 'description': '', + 'type': 'Number' + } + ], + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'positionX': { + 'name': 'positionX', + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'positionY': { + 'name': 'positionY', + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'positionZ': { + 'name': 'positionZ', + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'orient': { + 'name': 'orient', + 'params': [ + { + 'name': 'xVal', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'yVal', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'zVal', + 'description': '', + 'type': 'Number' + }, + { + 'name': 'time', + 'description': '', + 'type': 'Number' + } + ], + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'orientX': { + 'name': 'orientX', + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'orientY': { + 'name': 'orientY', + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'orientZ': { + 'name': 'orientZ', + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'setFalloff': { + 'name': 'setFalloff', + 'params': [ + { + 'name': 'maxDistance', + 'description': '', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'rolloffFactor', + 'description': '', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'maxDist': { + 'name': 'maxDist', + 'params': [ + { + 'name': 'maxDistance', + 'description': '', + 'type': 'Number' + } + ], + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + }, + 'rollof': { + 'name': 'rollof', + 'params': [ + { + 'name': 'rolloffFactor', + 'description': '', + 'type': 'Number' + } + ], + 'class': 'p5.Panner3D', + 'module': 'p5.sound' + } + }, + 'p5.Delay': { + 'leftDelay': { + 'name': 'leftDelay', + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'rightDelay': { + 'name': 'rightDelay', + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'process': { + 'name': 'process', + 'params': [ + { + 'name': 'Signal', + 'description': 'An object that outputs audio
\n', + 'type': 'Object' + }, + { + 'name': 'delayTime', + 'description': 'Time (in seconds) of the delay/echo.\n Some browsers limit delayTime to\n 1 second.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'feedback', + 'description': 'sends the delay back through itself\n in a loop that decreases in volume\n each time.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'lowPass', + 'description': 'Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'delayTime': { + 'name': 'delayTime', + 'params': [ + { + 'name': 'delayTime', + 'description': 'Time (in seconds) of the delay
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'feedback': { + 'name': 'feedback', + 'params': [ + { + 'name': 'feedback', + 'description': '0.0 to 1.0, or an object such as an\n Oscillator that can be used to\n modulate this param
\n', + 'type': 'Number|Object' + } + ], + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'filter': { + 'name': 'filter', + 'params': [ + { + 'name': 'cutoffFreq', + 'description': 'A lowpass filter will cut off any\n frequencies higher than the filter frequency.
\n', + 'type': 'Number|Object' + }, + { + 'name': 'res', + 'description': 'Resonance of the filter frequency\n cutoff, or an object (i.e. a p5.Oscillator)\n that can be used to modulate this parameter.\n High numbers (i.e. 15) will produce a resonance,\n low numbers (i.e. .2) will produce a slope.
\n', + 'type': 'Number|Object' + } + ], + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'setType': { + 'name': 'setType', + 'params': [ + { + 'name': 'type', + 'description': '\'pingPong\' (1) or \'default\' (0)
\n', + 'type': 'String|Number' + } + ], + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'amp': { + 'name': 'amp', + 'params': [ + { + 'name': 'volume', + 'description': 'amplitude between 0 and 1.0
\n', + 'type': 'Number' + }, + { + 'name': 'rampTime', + 'description': 'create a fade that lasts rampTime
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': '', + 'type': 'Object' + } + ], + 'class': 'p5.Delay', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.Delay', + 'module': 'p5.sound' + } + }, + 'p5.Reverb': { + 'process': { + 'name': 'process', + 'params': [ + { + 'name': 'src', + 'description': 'p5.sound / Web Audio object with a sound\n output.
\n', + 'type': 'Object' + }, + { + 'name': 'seconds', + 'description': 'Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'decayRate', + 'description': 'Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'reverse', + 'description': 'Play the reverb backwards or forwards.
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5.Reverb', + 'module': 'p5.sound' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'seconds', + 'description': 'Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'decayRate', + 'description': 'Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'reverse', + 'description': 'Play the reverb backwards or forwards.
\n', + 'type': 'Boolean', + 'optional': true + } + ], + 'class': 'p5.Reverb', + 'module': 'p5.sound' + }, + 'amp': { + 'name': 'amp', + 'params': [ + { + 'name': 'volume', + 'description': 'amplitude between 0 and 1.0
\n', + 'type': 'Number' + }, + { + 'name': 'rampTime', + 'description': 'create a fade that lasts rampTime
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Reverb', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': '', + 'type': 'Object' + } + ], + 'class': 'p5.Reverb', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.Reverb', + 'module': 'p5.sound' + } + }, + 'p5.Convolver': { + 'convolverNode': { + 'name': 'convolverNode', + 'class': 'p5.Convolver', + 'module': 'p5.sound' + }, + 'impulses': { + 'name': 'impulses', + 'class': 'p5.Convolver', + 'module': 'p5.sound' + }, + 'process': { + 'name': 'process', + 'params': [ + { + 'name': 'src', + 'description': 'p5.sound / Web Audio object with a sound\n output.
\n', + 'type': 'Object' + } + ], + 'class': 'p5.Convolver', + 'module': 'p5.sound' + }, + 'addImpulse': { + 'name': 'addImpulse', + 'params': [ + { + 'name': 'path', + 'description': 'path to a sound file
\n', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': 'function (optional)
\n', + 'type': 'Function' + }, + { + 'name': 'errorCallback', + 'description': 'function (optional)
\n', + 'type': 'Function' + } + ], + 'class': 'p5.Convolver', + 'module': 'p5.sound' + }, + 'resetImpulse': { + 'name': 'resetImpulse', + 'params': [ + { + 'name': 'path', + 'description': 'path to a sound file
\n', + 'type': 'String' + }, + { + 'name': 'callback', + 'description': 'function (optional)
\n', + 'type': 'Function' + }, + { + 'name': 'errorCallback', + 'description': 'function (optional)
\n', + 'type': 'Function' + } + ], + 'class': 'p5.Convolver', + 'module': 'p5.sound' + }, + 'toggleImpulse': { + 'name': 'toggleImpulse', + 'params': [ + { + 'name': 'id', + 'description': 'Identify the impulse by its original filename\n (String), or by its position in the\n .impulses Array (Number).
Beats Per Minute
\n', + 'type': 'Number' + }, + { + 'name': 'rampTime', + 'description': 'Seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'getBPM': { + 'name': 'getBPM', + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'start': { + 'name': 'start', + 'params': [ + { + 'name': 'time', + 'description': 'seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'loop': { + 'name': 'loop', + 'params': [ + { + 'name': 'time', + 'description': 'seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'noLoop': { + 'name': 'noLoop', + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'stop': { + 'name': 'stop', + 'params': [ + { + 'name': 'time', + 'description': 'seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'pause': { + 'name': 'pause', + 'params': [ + { + 'name': 'time', + 'description': 'seconds from now
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'addPhrase': { + 'name': 'addPhrase', + 'params': [ + { + 'name': 'phrase', + 'description': 'reference to a p5.Phrase
\n', + 'type': 'p5.Phrase' + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'removePhrase': { + 'name': 'removePhrase', + 'params': [ + { + 'name': 'phraseName', + 'description': '', + 'type': 'String' + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'getPhrase': { + 'name': 'getPhrase', + 'params': [ + { + 'name': 'phraseName', + 'description': '', + 'type': 'String' + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'replaceSequence': { + 'name': 'replaceSequence', + 'params': [ + { + 'name': 'phraseName', + 'description': '', + 'type': 'String' + }, + { + 'name': 'sequence', + 'description': 'Array of values to pass into the callback\n at each step of the phrase.
\n', + 'type': 'Array' + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + }, + 'onStep': { + 'name': 'onStep', + 'params': [ + { + 'name': 'callback', + 'description': 'The name of the callback\n you want to fire\n on every beat/tatum.
\n', + 'type': 'Function' + } + ], + 'class': 'p5.Part', + 'module': 'p5.sound' + } + }, + 'p5.Score': { + 'start': { + 'name': 'start', + 'class': 'p5.Score', + 'module': 'p5.sound' + }, + 'stop': { + 'name': 'stop', + 'class': 'p5.Score', + 'module': 'p5.sound' + }, + 'pause': { + 'name': 'pause', + 'class': 'p5.Score', + 'module': 'p5.sound' + }, + 'loop': { + 'name': 'loop', + 'class': 'p5.Score', + 'module': 'p5.sound' + }, + 'noLoop': { + 'name': 'noLoop', + 'class': 'p5.Score', + 'module': 'p5.sound' + }, + 'setBPM': { + 'name': 'setBPM', + 'params': [ + { + 'name': 'BPM', + 'description': 'Beats Per Minute
\n', + 'type': 'Number' + }, + { + 'name': 'rampTime', + 'description': 'Seconds from now
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Score', + 'module': 'p5.sound' + } + }, + 'p5.SoundLoop': { + 'bpm': { + 'name': 'bpm', + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'timeSignature': { + 'name': 'timeSignature', + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'interval': { + 'name': 'interval', + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'iterations': { + 'name': 'iterations', + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'musicalTimeMode': { + 'name': 'musicalTimeMode', + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'maxIterations': { + 'name': 'maxIterations', + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'start': { + 'name': 'start', + 'params': [ + { + 'name': 'timeFromNow', + 'description': 'schedule a starting time
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'stop': { + 'name': 'stop', + 'params': [ + { + 'name': 'timeFromNow', + 'description': 'schedule a stopping time
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'pause': { + 'name': 'pause', + 'params': [ + { + 'name': 'timeFromNow', + 'description': 'schedule a pausing time
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + }, + 'syncedStart': { + 'name': 'syncedStart', + 'params': [ + { + 'name': 'otherLoop', + 'description': 'a p5.SoundLoop to sync with
\n', + 'type': 'Object' + }, + { + 'name': 'timeFromNow', + 'description': 'Start the loops in sync after timeFromNow seconds
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.SoundLoop', + 'module': 'p5.sound' + } + }, + 'p5.Compressor': { + 'compressor': { + 'name': 'compressor', + 'class': 'p5.Compressor', + 'module': 'p5.sound' + }, + 'process': { + 'name': 'process', + 'params': [ + { + 'name': 'src', + 'description': 'Sound source to be connected
\n', + 'type': 'Object' + }, + { + 'name': 'attack', + 'description': 'The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'knee', + 'description': 'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'ratio', + 'description': 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'threshold', + 'description': 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'release', + 'description': 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Compressor', + 'module': 'p5.sound' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'attack', + 'description': 'The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n', + 'type': 'Number' + }, + { + 'name': 'knee', + 'description': 'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n', + 'type': 'Number' + }, + { + 'name': 'ratio', + 'description': 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n', + 'type': 'Number' + }, + { + 'name': 'threshold', + 'description': 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n', + 'type': 'Number' + }, + { + 'name': 'release', + 'description': 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n', + 'type': 'Number' + } + ], + 'class': 'p5.Compressor', + 'module': 'p5.sound' + }, + 'attack': { + 'name': 'attack', + 'params': [ + { + 'name': 'attack', + 'description': 'Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'time', + 'description': 'Assign time value to schedule the change in value
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Compressor', + 'module': 'p5.sound' + }, + 'knee': { + 'name': 'knee', + 'params': [ + { + 'name': 'knee', + 'description': 'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'time', + 'description': 'Assign time value to schedule the change in value
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Compressor', + 'module': 'p5.sound' + }, + 'ratio': { + 'name': 'ratio', + 'params': [ + { + 'name': 'ratio', + 'description': 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'time', + 'description': 'Assign time value to schedule the change in value
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Compressor', + 'module': 'p5.sound' + }, + 'threshold': { + 'name': 'threshold', + 'params': [ + { + 'name': 'threshold', + 'description': 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n', + 'type': 'Number' + }, + { + 'name': 'time', + 'description': 'Assign time value to schedule the change in value
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Compressor', + 'module': 'p5.sound' + }, + 'release': { + 'name': 'release', + 'params': [ + { + 'name': 'release', + 'description': 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n', + 'type': 'Number' + }, + { + 'name': 'time', + 'description': 'Assign time value to schedule the change in value
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Compressor', + 'module': 'p5.sound' + }, + 'reduction': { + 'name': 'reduction', + 'class': 'p5.Compressor', + 'module': 'p5.sound' + } + }, + 'p5.PeakDetect': { + 'isDetected': { + 'name': 'isDetected', + 'class': 'p5.PeakDetect', + 'module': 'p5.sound' + }, + 'update': { + 'name': 'update', + 'params': [ + { + 'name': 'fftObject', + 'description': 'A p5.FFT object
\n', + 'type': 'p5.FFT' + } + ], + 'class': 'p5.PeakDetect', + 'module': 'p5.sound' + }, + 'onPeak': { + 'name': 'onPeak', + 'params': [ + { + 'name': 'callback', + 'description': 'Name of a function that will\n be called when a peak is\n detected.
\n', + 'type': 'Function' + }, + { + 'name': 'val', + 'description': 'Optional value to pass\n into the function when\n a peak is detected.
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.PeakDetect', + 'module': 'p5.sound' + } + }, + 'p5.SoundRecorder': { + 'setInput': { + 'name': 'setInput', + 'params': [ + { + 'name': 'unit', + 'description': 'p5.sound object or a web audio unit\n that outputs sound
\n', + 'type': 'Object', + 'optional': true + } + ], + 'class': 'p5.SoundRecorder', + 'module': 'p5.sound' + }, + 'record': { + 'name': 'record', + 'params': [ + { + 'name': 'soundFile', + 'description': 'p5.SoundFile
\n', + 'type': 'p5.SoundFile' + }, + { + 'name': 'duration', + 'description': 'Time (in seconds)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'callback', + 'description': 'The name of a function that will be\n called once the recording completes
\n', + 'type': 'Function', + 'optional': true + } + ], + 'class': 'p5.SoundRecorder', + 'module': 'p5.sound' + }, + 'stop': { + 'name': 'stop', + 'class': 'p5.SoundRecorder', + 'module': 'p5.sound' + } + }, + 'p5.Distortion': { + 'WaveShaperNode': { + 'name': 'WaveShaperNode', + 'class': 'p5.Distortion', + 'module': 'p5.sound' + }, + 'process': { + 'name': 'process', + 'params': [ + { + 'name': 'amount', + 'description': 'Unbounded distortion amount.\n Normal values range from 0-1.
\n', + 'type': 'Number', + 'optional': true, + 'optdefault': '0.25' + }, + { + 'name': 'oversample', + 'description': '\'none\', \'2x\', or \'4x\'.
\n', + 'type': 'String', + 'optional': true, + 'optdefault': '\'none\'' + } + ], + 'class': 'p5.Distortion', + 'module': 'p5.sound' + }, + 'set': { + 'name': 'set', + 'params': [ + { + 'name': 'amount', + 'description': 'Unbounded distortion amount.\n Normal values range from 0-1.
\n', + 'type': 'Number', + 'optional': true, + 'optdefault': '0.25' + }, + { + 'name': 'oversample', + 'description': '\'none\', \'2x\', or \'4x\'.
\n', + 'type': 'String', + 'optional': true, + 'optdefault': '\'none\'' + } + ], + 'class': 'p5.Distortion', + 'module': 'p5.sound' + }, + 'getAmount': { + 'name': 'getAmount', + 'class': 'p5.Distortion', + 'module': 'p5.sound' + }, + 'getOversample': { + 'name': 'getOversample', + 'class': 'p5.Distortion', + 'module': 'p5.sound' + } + }, + 'p5.Gain': { + 'setInput': { + 'name': 'setInput', + 'params': [ + { + 'name': 'src', + 'description': 'p5.sound / Web Audio object with a sound\n output.
\n', + 'type': 'Object' + } + ], + 'class': 'p5.Gain', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': '', + 'type': 'Object' + } + ], + 'class': 'p5.Gain', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.Gain', + 'module': 'p5.sound' + }, + 'amp': { + 'name': 'amp', + 'params': [ + { + 'name': 'volume', + 'description': 'amplitude between 0 and 1.0
\n', + 'type': 'Number' + }, + { + 'name': 'rampTime', + 'description': 'create a fade that lasts rampTime
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'timeFromNow', + 'description': 'schedule this event to happen\n seconds from now
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.Gain', + 'module': 'p5.sound' + } + }, + 'p5.AudioVoice': { + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': '', + 'type': 'Object' + } + ], + 'class': 'p5.AudioVoice', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.AudioVoice', + 'module': 'p5.sound' + } + }, + 'p5.MonoSynth': { + 'attack': { + 'name': 'attack', + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'decay': { + 'name': 'decay', + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'sustain': { + 'name': 'sustain', + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'release': { + 'name': 'release', + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'play': { + 'name': 'play', + 'params': [ + { + 'name': 'note', + 'description': 'the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format ("C4", "Eb3"...etc")\n See \n Tone. Defaults to 440 hz.
\n', + 'type': 'String | Number' + }, + { + 'name': 'velocity', + 'description': 'velocity of the note to play (ranging from 0 to 1)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'secondsFromNow', + 'description': 'time from now (in seconds) at which to play
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'sustainTime', + 'description': 'time to sustain before releasing the envelope. Defaults to 0.15 seconds.
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'triggerAttack': { + 'params': [ + { + 'name': 'note', + 'description': 'the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format ("C4", "Eb3"...etc")\n See \n Tone. Defaults to 440 hz
\n', + 'type': 'String | Number' + }, + { + 'name': 'velocity', + 'description': 'velocity of the note to play (ranging from 0 to 1)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'secondsFromNow', + 'description': 'time from now (in seconds) at which to play
\n', + 'type': 'Number', + 'optional': true + } + ], + 'name': 'triggerAttack', + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'triggerRelease': { + 'params': [ + { + 'name': 'secondsFromNow', + 'description': 'time to trigger the release
\n', + 'type': 'Number' + } + ], + 'name': 'triggerRelease', + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'setADSR': { + 'name': 'setADSR', + 'params': [ + { + 'name': 'attackTime', + 'description': 'Time (in seconds before envelope\n reaches Attack Level
\n', + 'type': 'Number' + }, + { + 'name': 'decayTime', + 'description': 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'susRatio', + 'description': 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'amp': { + 'name': 'amp', + 'params': [ + { + 'name': 'vol', + 'description': 'desired volume
\n', + 'type': 'Number' + }, + { + 'name': 'rampTime', + 'description': 'Time to reach new volume
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': 'A p5.sound or Web Audio object
\n', + 'type': 'Object' + } + ], + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + }, + 'dispose': { + 'name': 'dispose', + 'class': 'p5.MonoSynth', + 'module': 'p5.sound' + } + }, + 'p5.PolySynth': { + 'notes': { + 'name': 'notes', + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'polyvalue': { + 'name': 'polyvalue', + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'AudioVoice': { + 'name': 'AudioVoice', + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'play': { + 'name': 'play', + 'params': [ + { + 'name': 'note', + 'description': 'midi note to play (ranging from 0 to 127 - 60 being a middle C)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'velocity', + 'description': 'velocity of the note to play (ranging from 0 to 1)
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'secondsFromNow', + 'description': 'time from now (in seconds) at which to play
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'sustainTime', + 'description': 'time to sustain before releasing the envelope
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'noteADSR': { + 'name': 'noteADSR', + 'params': [ + { + 'name': 'note', + 'description': 'Midi note on which ADSR should be set.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'attackTime', + 'description': 'Time (in seconds before envelope\n reaches Attack Level
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'decayTime', + 'description': 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'susRatio', + 'description': 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'setADSR': { + 'name': 'setADSR', + 'params': [ + { + 'name': 'attackTime', + 'description': 'Time (in seconds before envelope\n reaches Attack Level
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'decayTime', + 'description': 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'susRatio', + 'description': 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'noteAttack': { + 'name': 'noteAttack', + 'params': [ + { + 'name': 'note', + 'description': 'midi note on which attack should be triggered.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'velocity', + 'description': 'velocity of the note to play (ranging from 0 to 1)/
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'secondsFromNow', + 'description': 'time from now (in seconds)
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'noteRelease': { + 'name': 'noteRelease', + 'params': [ + { + 'name': 'note', + 'description': 'midi note on which attack should be triggered.\n If no value is provided, all notes will be released.
\n', + 'type': 'Number', + 'optional': true + }, + { + 'name': 'secondsFromNow', + 'description': 'time to trigger the release
\n', + 'type': 'Number', + 'optional': true + } + ], + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'connect': { + 'name': 'connect', + 'params': [ + { + 'name': 'unit', + 'description': 'A p5.sound or Web Audio object
\n', + 'type': 'Object' + } + ], + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'disconnect': { + 'name': 'disconnect', + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + }, + 'dispose': { + 'name': 'dispose', + 'class': 'p5.PolySynth', + 'module': 'p5.sound' + } + } + } + }, + { + } + ], + 2: [ + function (_dereq_, module, exports) { + function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; + } + module.exports = _arrayWithHoles; + }, + { + } + ], + 3: [ + function (_dereq_, module, exports) { + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { + arr2[i] = arr[i]; + } + return arr2; + } + } + module.exports = _arrayWithoutHoles; + }, + { + } + ], + 4: [ + function (_dereq_, module, exports) { + function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called'); + } + return self; + } + module.exports = _assertThisInitialized; + }, + { + } + ], + 5: [ + function (_dereq_, module, exports) { + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError('Cannot call a class as a function'); + } + } + module.exports = _classCallCheck; + }, + { + } + ], + 6: [ + function (_dereq_, module, exports) { + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ('value' in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + module.exports = _createClass; + }, + { + } + ], + 7: [ + function (_dereq_, module, exports) { + function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + return obj; + } + module.exports = _defineProperty; + }, + { + } + ], + 8: [ + function (_dereq_, module, exports) { + function _getPrototypeOf(o) { + module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf(o); + } + module.exports = _getPrototypeOf; + }, + { + } + ], + 9: [ + function (_dereq_, module, exports) { + var setPrototypeOf = _dereq_('./setPrototypeOf'); + function _inherits(subClass, superClass) { + if (typeof superClass !== 'function' && superClass !== null) { + throw new TypeError('Super expression must either be null or a function'); + } + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + if (superClass) setPrototypeOf(subClass, superClass); + } + module.exports = _inherits; + }, + { + './setPrototypeOf': 16 + } + ], + 10: [ + function (_dereq_, module, exports) { + function _iterableToArray(iter) { + if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter); + } + module.exports = _iterableToArray; + }, + { + } + ], + 11: [ + function (_dereq_, module, exports) { + function _iterableToArrayLimit(arr, i) { + var _arr = [ + ]; + var _n = true; + var _d = false; + var _e = undefined; + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i['return'] != null) _i['return'](); + } finally { + if (_d) throw _e; + } + } + return _arr; + } + module.exports = _iterableToArrayLimit; + }, + { + } + ], + 12: [ + function (_dereq_, module, exports) { + function _nonIterableRest() { + throw new TypeError('Invalid attempt to destructure non-iterable instance'); + } + module.exports = _nonIterableRest; + }, + { + } + ], + 13: [ + function (_dereq_, module, exports) { + function _nonIterableSpread() { + throw new TypeError('Invalid attempt to spread non-iterable instance'); + } + module.exports = _nonIterableSpread; + }, + { + } + ], + 14: [ + function (_dereq_, module, exports) { + var defineProperty = _dereq_('./defineProperty'); + function _objectSpread(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : { + }; + var ownKeys = Object.keys(source); + if (typeof Object.getOwnPropertySymbols === 'function') { + ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { + return Object.getOwnPropertyDescriptor(source, sym).enumerable; + })); + } + ownKeys.forEach(function (key) { + defineProperty(target, key, source[key]); + }); + } + return target; + } + module.exports = _objectSpread; + }, + { + './defineProperty': 7 + } + ], + 15: [ + function (_dereq_, module, exports) { + var _typeof = _dereq_('../helpers/typeof'); + var assertThisInitialized = _dereq_('./assertThisInitialized'); + function _possibleConstructorReturn(self, call) { + if (call && (_typeof(call) === 'object' || typeof call === 'function')) { + return call; + } + return assertThisInitialized(self); + } + module.exports = _possibleConstructorReturn; + }, + { + '../helpers/typeof': 19, + './assertThisInitialized': 4 + } + ], + 16: [ + function (_dereq_, module, exports) { + function _setPrototypeOf(o, p) { + module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + return _setPrototypeOf(o, p); + } + module.exports = _setPrototypeOf; + }, + { + } + ], + 17: [ + function (_dereq_, module, exports) { + var arrayWithHoles = _dereq_('./arrayWithHoles'); + var iterableToArrayLimit = _dereq_('./iterableToArrayLimit'); + var nonIterableRest = _dereq_('./nonIterableRest'); + function _slicedToArray(arr, i) { + return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest(); + } + module.exports = _slicedToArray; + }, + { + './arrayWithHoles': 2, + './iterableToArrayLimit': 11, + './nonIterableRest': 12 + } + ], + 18: [ + function (_dereq_, module, exports) { + var arrayWithoutHoles = _dereq_('./arrayWithoutHoles'); + var iterableToArray = _dereq_('./iterableToArray'); + var nonIterableSpread = _dereq_('./nonIterableSpread'); + function _toConsumableArray(arr) { + return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread(); + } + module.exports = _toConsumableArray; + }, + { + './arrayWithoutHoles': 3, + './iterableToArray': 10, + './nonIterableSpread': 13 + } + ], + 19: [ + function (_dereq_, module, exports) { + 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') { + module.exports = _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + module.exports = _typeof = function _typeof(obj) { + return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); + }; + } + return _typeof(obj); + } + module.exports = _typeof; + }, + { + } + ], + 20: [ + function (_dereq_, module, exports) { + 'use strict'; + exports.byteLength = byteLength; + exports.toByteArray = toByteArray; + exports.fromByteArray = fromByteArray; + var lookup = [ + ]; + var revLookup = [ + ]; + var Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array; + var code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; + for (var i = 0, len = code.length; i < len; ++i) { + lookup[i] = code[i]; + revLookup[code.charCodeAt(i)] = i; + } // Support decoding URL-safe base64 strings, as Node.js does. + // See: https://en.wikipedia.org/wiki/Base64#URL_applications + + revLookup['-'.charCodeAt(0)] = 62; + revLookup['_'.charCodeAt(0)] = 63; + function getLens(b64) { + var len = b64.length; + if (len % 4 > 0) { + throw new Error('Invalid string. Length must be a multiple of 4'); + } // Trim off extra bytes after placeholder bytes are found + // See: https://github.com/beatgammit/base64-js/issues/42 + + var validLen = b64.indexOf('='); + if (validLen === - 1) validLen = len; + var placeHoldersLen = validLen === len ? 0 : 4 - validLen % 4; + return [validLen, + placeHoldersLen]; + } // base64 is 4/3 + up to two characters of the original data + + function byteLength(b64) { + var lens = getLens(b64); + var validLen = lens[0]; + var placeHoldersLen = lens[1]; + return (validLen + placeHoldersLen) * 3 / 4 - placeHoldersLen; + } + function _byteLength(b64, validLen, placeHoldersLen) { + return (validLen + placeHoldersLen) * 3 / 4 - placeHoldersLen; + } + function toByteArray(b64) { + var tmp; + var lens = getLens(b64); + var validLen = lens[0]; + var placeHoldersLen = lens[1]; + var arr = new Arr(_byteLength(b64, validLen, placeHoldersLen)); + var curByte = 0; + // if there are placeholders, only get up to the last complete 4 chars + var len = placeHoldersLen > 0 ? validLen - 4 : validLen; + var i; + for (i = 0; i < len; i += 4) { + tmp = revLookup[b64.charCodeAt(i)] << 18 | revLookup[b64.charCodeAt(i + 1)] << 12 | revLookup[b64.charCodeAt(i + 2)] << 6 | revLookup[b64.charCodeAt(i + 3)]; + arr[curByte++] = tmp >> 16 & 255; + arr[curByte++] = tmp >> 8 & 255; + arr[curByte++] = tmp & 255; + } + if (placeHoldersLen === 2) { + tmp = revLookup[b64.charCodeAt(i)] << 2 | revLookup[b64.charCodeAt(i + 1)] >> 4; + arr[curByte++] = tmp & 255; + } + if (placeHoldersLen === 1) { + tmp = revLookup[b64.charCodeAt(i)] << 10 | revLookup[b64.charCodeAt(i + 1)] << 4 | revLookup[b64.charCodeAt(i + 2)] >> 2; + arr[curByte++] = tmp >> 8 & 255; + arr[curByte++] = tmp & 255; + } + return arr; + } + function tripletToBase64(num) { + return lookup[num >> 18 & 63] + lookup[num >> 12 & 63] + lookup[num >> 6 & 63] + lookup[num & 63]; + } + function encodeChunk(uint8, start, end) { + var tmp; + var output = [ + ]; + for (var i = start; i < end; i += 3) { + tmp = (uint8[i] << 16 & 16711680) + (uint8[i + 1] << 8 & 65280) + (uint8[i + 2] & 255); + output.push(tripletToBase64(tmp)); + } + return output.join(''); + } + function fromByteArray(uint8) { + var tmp; + var len = uint8.length; + var extraBytes = len % 3; // if we have 1 byte left, pad 2 bytes + var parts = [ + ]; + var maxChunkLength = 16383; // must be multiple of 3 + // go through the array every three bytes, we'll deal with trailing stuff later + for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) { + parts.push(encodeChunk(uint8, i, i + maxChunkLength > len2 ? len2 : i + maxChunkLength)); + } // pad the end with zeros, but make sure to not forget the extra bytes + + if (extraBytes === 1) { + tmp = uint8[len - 1]; + parts.push(lookup[tmp >> 2] + lookup[tmp << 4 & 63] + '=='); + } else if (extraBytes === 2) { + tmp = (uint8[len - 2] << 8) + uint8[len - 1]; + parts.push(lookup[tmp >> 10] + lookup[tmp >> 4 & 63] + lookup[tmp << 2 & 63] + '='); + } + return parts.join(''); + } + }, + { + } + ], + 21: [ + function (_dereq_, module, exports) { + }, + { + } + ], + 22: [ + function (_dereq_, module, exports) { + (function (Buffer) { + /*! + * The buffer module from node.js, for the browser. + * + * @author Feross Aboukhadijehdescribe(text, LABEL) displays
+ * the description to all users as a
+ * tombstone or exhibit label/caption in a div
+ * adjacent to the canvas. You can style it as you wish in your CSS.
+ *
+ * describe(text, FALLBACK) makes the
+ * description accessible to screen-reader users only, in
+ *
+ * a sub DOM inside the canvas element. If a second parameter is not
+ * specified, by default, the description will only be available to
+ * screen-reader users.
+ *
+ * @method describe
+ * @param {String} text description of the canvas
+ * @param {Constant} [display] either LABEL or FALLBACK
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * describe('pink square with red heart in the bottom right corner');
+ * background('pink');
+ * fill('red');
+ * noStroke();
+ * ellipse(67, 67, 20, 20);
+ * ellipse(83, 67, 20, 20);
+ * triangle(91, 73, 75, 95, 59, 73);
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.describe = function (text, display) {
+ _main.default._validateParameters('describe', arguments);
+ if (typeof text !== 'string') {
+ return;
+ }
+ var cnvId = this.canvas.id;
+ //calls function that adds punctuation for better screen reading
+ text = _descriptionText(text);
+ //if there is no dummyDOM
+ if (!this.dummyDOM) {
+ this.dummyDOM = document.getElementById(cnvId).parentNode;
+ }
+ if (!this.descriptions) {
+ this.descriptions = {
+ };
+ } //check if html structure for description is ready
+
+ if (this.descriptions.fallback) {
+ //check if text is different from current description
+ if (this.descriptions.fallback.innerHTML !== text) {
+ //update description
+ this.descriptions.fallback.innerHTML = text;
+ }
+ } else {
+ //create fallback html structure
+ this._describeHTML('fallback', text);
+ } //if display is LABEL
+
+ if (display === this.LABEL) {
+ //check if html structure for label is ready
+ if (this.descriptions.label) {
+ //check if text is different from current label
+ if (this.descriptions.label.innerHTML !== text) {
+ //update label description
+ this.descriptions.label.innerHTML = text;
+ }
+ } else {
+ //create label html structure
+ this._describeHTML('label', text);
+ }
+ }
+ };
+ /**
+ * This function creates a screen-reader accessible
+ * description for elements —shapes or groups of shapes that create
+ * meaning together— in the canvas. The first paramater should
+ * be the name of the element. The second parameter should be a string
+ * with a description of the element. The third parameter is optional.
+ * If specified, it determines how the element description is displayed.
+ *
+ *
+ * let x = 0;
+ * function draw() {
+ * if (x > 100) {
+ * x = 0;
+ * }
+ * background(220);
+ * fill(0, 255, 0);
+ * ellipse(x, 50, 40, 40);
+ * x = x + 0.1;
+ * describe('green circle at x pos ' + round(x) + ' moving to the right');
+ * }
+ *
+ * describeElement(name, text, LABEL)
+ * displays the element description to all users as a
+ *
+ * tombstone or exhibit label/caption in a div
+ * adjacent to the canvas. You can style it as you wish in your CSS.
+ *
+ * describeElement(name, text, FALLBACK)
+ * makes the element description accessible to screen-reader users
+ * only, in
+ * a sub DOM inside the canvas element. If a second parameter is not
+ * specified, by default, the element description will only be available
+ * to screen-reader users.
+ *
+ * @method describeElement
+ * @param {String} name name of the element
+ * @param {String} text description of the element
+ * @param {Constant} [display] either LABEL or FALLBACK
+ *
+ * @example
+ *
+ *
+ */
+ _main.default.prototype.describeElement = function (name, text, display) {
+ _main.default._validateParameters('describeElement', arguments);
+ if (typeof text !== 'string' || typeof name !== 'string') {
+ return;
+ }
+ var cnvId = this.canvas.id;
+ //calls function that adds punctuation for better screen reading
+ text = _descriptionText(text);
+ //calls function that adds punctuation for better screen reading
+ var elementName = _elementName(name);
+ //remove any special characters from name to use it as html id
+ name = name.replace(/[^a-zA-Z0-9]/g, '');
+ //store element description
+ var inner = '
+ * describe('Heart and yellow circle over pink background');
+ * noStroke();
+ * background('pink');
+ * describeElement('Circle', 'Yellow circle in the top left corner');
+ * fill('yellow');
+ * ellipse(25, 25, 40, 40);
+ * describeElement('Heart', 'red heart in the bottom right corner');
+ * fill('red');
+ * ellipse(66.6, 66.6, 20, 20);
+ * ellipse(83.2, 66.6, 20, 20);
+ * triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+ *
+ * ');
+ if (!this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutput'))) {
+ //create description container +
for fallback description + this.dummyDOM.querySelector('#'.concat(cnvId)).innerHTML = html; + } else { + //create description container +
for fallback description before outputs + this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutput')).insertAdjacentHTML('beforebegin', html); + } + } else { + //if describeElement() has already created the container and added a table of elements + //create fallback description
before the table + this.dummyDOM.querySelector('#' + cnvId + fallbackTableId).insertAdjacentHTML('beforebegin', '
')); + } //if the container for the description exists + + this.descriptions.fallback = this.dummyDOM.querySelector('#'.concat(cnvId).concat(fallbackDescId)); + this.descriptions.fallback.innerHTML = text; + return; + } else if (type === 'label') { + //if there is no label container + if (!this.dummyDOM.querySelector('#'.concat(cnvId + labelContainer))) { + var _html = '');
+ //if there are no accessible outputs (see textOutput() and gridOutput())
+ if (!this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutputLabel'))) {
+ //create label container +
for label description + this.dummyDOM.querySelector('#' + cnvId).insertAdjacentHTML('afterend', _html); + } else { + //create label container +
for label description before outputs + this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutputLabel')).insertAdjacentHTML('beforebegin', _html); + } + } else if (this.dummyDOM.querySelector('#'.concat(cnvId + labelTableId))) { + //if describeElement() has already created the container and added a table of elements + //create label description
before the table + this.dummyDOM.querySelector('#'.concat(cnvId + labelTableId)).insertAdjacentHTML('beforebegin', '
')); + } + this.descriptions.label = this.dummyDOM.querySelector('#' + cnvId + labelDescId); + this.descriptions.label.innerHTML = text; + return; + } + }; + /* + * Helper functions for describeElement(). + */ + //check that name is not LABEL or FALLBACK and ensure text ends with colon + function _elementName(name) { + if (name === 'label' || name === 'fallback') { + throw new Error('element name should not be LABEL or FALLBACK'); + } //check if last character of string n is '.', ';', or ',' + + if (name.endsWith('.') || name.endsWith(';') || name.endsWith(',')) { + //replace last character with ':' + name = name.replace(/.$/, ':'); + } else if (!name.endsWith(':')) { + //if string n does not end with ':' + //add ':'' at the end of string + name = name + ':'; + } + return name; + } //creates HTML structure for element descriptions + + _main.default.prototype._describeElementHTML = function (type, name, text) { + var cnvId = this.canvas.id; + if (type === 'fallback') { + //if there is no description container + if (!this.dummyDOM.querySelector('#'.concat(cnvId + descContainer))) { + //if there are no accessible outputs (see textOutput() and gridOutput()) + var html = 'textOutput() creates a screenreader
+ * accessible output that describes the shapes present on the canvas.
+ * The general description of the canvas includes canvas size,
+ * canvas color, and number of elements in the canvas
+ * (example: 'Your output is a, 400 by 400 pixels, lavender blue
+ * canvas containing the following 4 shapes:'). This description
+ * is followed by a list of shapes where the color, position, and area
+ * of each shape are described (example: "orange ellipse at top left
+ * covering 1% of the canvas"). Each element can be selected to get
+ * more details. A table of elements is also provided. In this table,
+ * shape, color, location, coordinates and area are described
+ * (example: "orange ellipse location=top left area=2").
+ *
+ * textOutput() and textOutput(FALLBACK)
+ * make the output available in
+ * a sub DOM inside the canvas element which is accessible to screen readers.
+ * textOutput(LABEL) creates an
+ * additional div with the output adjacent to the canvas, this is useful
+ * for non-screen reader users that might want to display the output outside
+ * of the canvas' sub DOM as they code. However, using LABEL will create
+ * unnecessary redundancy for screen reader users. We recommend using LABEL
+ * only as part of the development process of a sketch and removing it before
+ * publishing or sharing with screen reader users.
+ *
+ * @method textOutput
+ * @param {Constant} [display] either FALLBACK or LABEL
+ *
+ * @example
+ *
+ *
+ *
+ *
+ *
+ * textOutput();
+ * background(148, 196, 0);
+ * fill(255, 0, 0);
+ * ellipse(20, 20, 20, 20);
+ * fill(0, 0, 255);
+ * rect(50, 50, 50, 50);
+ *
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.textOutput = function (display) {
+ _main.default._validateParameters('textOutput', arguments);
+ //if textOutput is already true
+ if (this._accessibleOutputs.text) {
+ return;
+ } else {
+ //make textOutput true
+ this._accessibleOutputs.text = true;
+ //create output for fallback
+ this._createOutput('textOutput', 'Fallback');
+ if (display === this.LABEL) {
+ //make textOutput label true
+ this._accessibleOutputs.textLabel = true;
+ //create output for label
+ this._createOutput('textOutput', 'Label');
+ }
+ }
+ };
+ /**
+ *
+ * let x = 0;
+ * function draw() {
+ * textOutput();
+ * background(148, 196, 0);
+ * fill(255, 0, 0);
+ * ellipse(x, 20, 20, 20);
+ * fill(0, 0, 255);
+ * rect(50, 50, 50, 50);
+ * ellipse(20, 20, 20, 20);
+ * x += 0.1;
+ * }
+ *
+ * gridOutput() lays out the
+ * content of the canvas in the form of a grid (html table) based
+ * on the spatial location of each shape. A brief
+ * description of the canvas is available before the table output.
+ * This description includes: color of the background, size of the canvas,
+ * number of objects, and object types (example: "lavender blue canvas is
+ * 200 by 200 and contains 4 objects - 3 ellipses 1 rectangle"). The grid
+ * describes the content spatially, each element is placed on a cell of the
+ * table depending on its position. Within each cell an element the color
+ * and type of shape of that element are available (example: "orange ellipse").
+ * These descriptions can be selected individually to get more details.
+ * A list of elements where shape, color, location, and area are described
+ * (example: "orange ellipse location=top left area=1%") is also available.
+ *
+ * gridOutput() and gridOutput(FALLBACK)
+ * make the output available in
+ * a sub DOM inside the canvas element which is accessible to screen readers.
+ * gridOutput(LABEL) creates an
+ * additional div with the output adjacent to the canvas, this is useful
+ * for non-screen reader users that might want to display the output outside
+ * of the canvas' sub DOM as they code. However, using LABEL will create
+ * unnecessary redundancy for screen reader users. We recommend using LABEL
+ * only as part of the development process of a sketch and removing it before
+ * publishing or sharing with screen reader users.
+ *
+ * @method gridOutput
+ * @param {Constant} [display] either FALLBACK or LABEL
+ *
+ * @example
+ *
+ *
+ *
+ *
+ *
+ * gridOutput();
+ * background(148, 196, 0);
+ * fill(255, 0, 0);
+ * ellipse(20, 20, 20, 20);
+ * fill(0, 0, 255);
+ * rect(50, 50, 50, 50);
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.gridOutput = function (display) {
+ _main.default._validateParameters('gridOutput', arguments);
+ //if gridOutput is already true
+ if (this._accessibleOutputs.grid) {
+ return;
+ } else {
+ //make gridOutput true
+ this._accessibleOutputs.grid = true;
+ //create output for fallback
+ this._createOutput('gridOutput', 'Fallback');
+ if (display === this.LABEL) {
+ //make gridOutput label true
+ this._accessibleOutputs.gridLabel = true;
+ //create output for label
+ this._createOutput('gridOutput', 'Label');
+ }
+ }
+ };
+ //helper function returns true when accessible outputs are true
+ _main.default.prototype._addAccsOutput = function () {
+ //if there are no accessible outputs create object with all false
+ if (!this._accessibleOutputs) {
+ this._accessibleOutputs = {
+ text: false,
+ grid: false,
+ textLabel: false,
+ gridLabel: false
+ };
+ }
+ return this._accessibleOutputs.grid || this._accessibleOutputs.text;
+ };
+ //helper function that creates html structure for accessible outputs
+ _main.default.prototype._createOutput = function (type, display) {
+ var cnvId = this.canvas.id;
+ //if there are no ingredients create object. this object stores data for the outputs
+ if (!this.ingredients) {
+ this.ingredients = {
+ shapes: {
+ },
+ colors: {
+ background: 'white',
+ fill: 'white',
+ stroke: 'black'
+ },
+ pShapes: ''
+ };
+ } //if there is no dummyDOM create it
+
+ if (!this.dummyDOM) {
+ this.dummyDOM = document.getElementById(cnvId).parentNode;
+ }
+ var cIdT,
+ container,
+ inner;
+ var query = '';
+ if (display === 'Fallback') {
+ cIdT = cnvId + type;
+ container = cnvId + 'accessibleOutput';
+ if (!this.dummyDOM.querySelector('#'.concat(container))) {
+ //if there is no canvas description (see describe() and describeElement())
+ if (!this.dummyDOM.querySelector('#'.concat(cnvId, '_Description'))) {
+ //create html structure inside of canvas
+ this.dummyDOM.querySelector('#'.concat(cnvId)).innerHTML = '');
+ } else {
+ //create html structure after canvas description container
+ this.dummyDOM.querySelector('#'.concat(cnvId, '_Description')).insertAdjacentHTML('afterend', ''));
+ }
+ }
+ } else if (display === 'Label') {
+ query = display;
+ cIdT = cnvId + type + display;
+ container = cnvId + 'accessibleOutput' + display;
+ if (!this.dummyDOM.querySelector('#'.concat(container))) {
+ //if there is no canvas description label (see describe() and describeElement())
+ if (!this.dummyDOM.querySelector('#'.concat(cnvId, '_Label'))) {
+ //create html structure adjacent to canvas
+ this.dummyDOM.querySelector('#'.concat(cnvId)).insertAdjacentHTML('afterend', ''));
+ } else {
+ //create html structure after canvas label
+ this.dummyDOM.querySelector('#'.concat(cnvId, '_Label')).insertAdjacentHTML('afterend', ''));
+ }
+ }
+ } //create an object to store the latest output. this object is used in _updateTextOutput() and _updateGridOutput()
+
+ this._accessibleOutputs[cIdT] = {
+ };
+ if (type === 'textOutput') {
+ query = '#'.concat(cnvId, 'gridOutput').concat(query); //query is used to check if gridOutput already exists
+ inner = '
+ * let x = 0;
+ * function draw() {
+ * gridOutput();
+ * background(148, 196, 0);
+ * fill(255, 0, 0);
+ * ellipse(x, 20, 20, 20);
+ * fill(0, 0, 255);
+ * rect(50, 50, 50, 50);
+ * ellipse(20, 20, 20, 20);
+ * x += 0.1;
+ * }
+ *
+ * Text Output
');
+ //if gridOutput already exists
+ if (this.dummyDOM.querySelector(query)) {
+ //create textOutput before gridOutput
+ this.dummyDOM.querySelector(query).insertAdjacentHTML('beforebegin', inner);
+ } else {
+ //create output inside of container
+ this.dummyDOM.querySelector('#'.concat(container)).innerHTML = inner;
+ } //store output html elements
+
+ this._accessibleOutputs[cIdT].list = this.dummyDOM.querySelector('#'.concat(cIdT, '_list'));
+ } else if (type === 'gridOutput') {
+ query = '#'.concat(cnvId, 'textOutput').concat(query); //query is used to check if textOutput already exists
+ inner = 'Grid Output
');
+ //if textOutput already exists
+ if (this.dummyDOM.querySelector(query)) {
+ //create gridOutput after textOutput
+ this.dummyDOM.querySelector(query).insertAdjacentHTML('afterend', inner);
+ } else {
+ //create output inside of container
+ this.dummyDOM.querySelector('#'.concat(container)).innerHTML = inner;
+ } //store output html elements
+
+ this._accessibleOutputs[cIdT].map = this.dummyDOM.querySelector('#'.concat(cIdT, '_map'));
+ }
+ this._accessibleOutputs[cIdT].shapeDetails = this.dummyDOM.querySelector('#'.concat(cIdT, '_shapeDetails'));
+ this._accessibleOutputs[cIdT].summary = this.dummyDOM.querySelector('#'.concat(cIdT, '_summary'));
+ };
+ //this function is called at the end of setup and draw if using
+ //accessibleOutputs and calls update functions of outputs
+ _main.default.prototype._updateAccsOutput = function () {
+ var cnvId = this.canvas.id;
+ //if the shapes are not the same as before
+ if (JSON.stringify(this.ingredients.shapes) !== this.ingredients.pShapes) {
+ //save current shapes as string in pShapes
+ this.ingredients.pShapes = JSON.stringify(this.ingredients.shapes);
+ if (this._accessibleOutputs.text) {
+ this._updateTextOutput(cnvId + 'textOutput');
+ }
+ if (this._accessibleOutputs.grid) {
+ this._updateGridOutput(cnvId + 'gridOutput');
+ }
+ if (this._accessibleOutputs.textLabel) {
+ this._updateTextOutput(cnvId + 'textOutputLabel');
+ }
+ if (this._accessibleOutputs.gridLabel) {
+ this._updateGridOutput(cnvId + 'gridOutputLabel');
+ }
+ }
+ };
+ //helper function that resets all ingredients when background is called
+ //and saves background color name
+ _main.default.prototype._accsBackground = function (args) {
+ //save current shapes as string in pShapes
+ this.ingredients.pShapes = JSON.stringify(this.ingredients.shapes);
+ //empty shapes JSON
+ this.ingredients.shapes = {
+ };
+ //update background different
+ if (this.ingredients.colors.backgroundRGBA !== args) {
+ this.ingredients.colors.backgroundRGBA = args;
+ this.ingredients.colors.background = this._rgbColorName(args);
+ }
+ };
+ //helper function that gets fill and stroke of shapes
+ _main.default.prototype._accsCanvasColors = function (f, args) {
+ if (f === 'fill') {
+ //update fill different
+ if (this.ingredients.colors.fillRGBA !== args) {
+ this.ingredients.colors.fillRGBA = args;
+ this.ingredients.colors.fill = this._rgbColorName(args);
+ }
+ } else if (f === 'stroke') {
+ //update stroke if different
+ if (this.ingredients.colors.strokeRGBA !== args) {
+ this.ingredients.colors.strokeRGBA = args;
+ this.ingredients.colors.stroke = this._rgbColorName(args);
+ }
+ }
+ };
+ //builds ingredients.shapes used for building outputs
+ _main.default.prototype._accsOutput = function (f, args) {
+ if (f === 'ellipse' && args[2] === args[3]) {
+ f = 'circle';
+ } else if (f === 'rectangle' && args[2] === args[3]) {
+ f = 'square';
+ }
+ var include = {
+ };
+ var add = true;
+ var middle = _getMiddle(f, args);
+ if (f === 'line') {
+ //make color stroke
+ include.color = this.ingredients.colors.stroke;
+ //get lenght
+ include.length = Math.round(this.dist(args[0], args[1], args[2], args[3]));
+ //get position of end points
+ var p1 = this._getPos(args[0], [
+ 1
+ ]);
+ var p2 = this._getPos(args[2], [
+ 3
+ ]);
+ include.loc = _canvasLocator(middle, this.width, this.height);
+ if (p1 === p2) {
+ include.pos = 'at '.concat(p1);
+ } else {
+ include.pos = 'from '.concat(p1, ' to ').concat(p2);
+ }
+ } else {
+ if (f === 'point') {
+ //make color stroke
+ include.color = this.ingredients.colors.stroke;
+ } else {
+ //make color fill
+ include.color = this.ingredients.colors.fill;
+ //get area of shape
+ include.area = this._getArea(f, args);
+ } //get middle of shapes
+ //calculate position using middle of shape
+
+ include.pos = this._getPos.apply(this, _toConsumableArray(middle));
+ //calculate location using middle of shape
+ include.loc = _canvasLocator(middle, this.width, this.height);
+ } //if it is the first time this shape is created
+
+ if (!this.ingredients.shapes[f]) {
+ this.ingredients.shapes[f] = [
+ include
+ ];
+ //if other shapes of this type have been created
+ } else if (this.ingredients.shapes[f] !== [include]) {
+ //for every shape of this type
+ for (var y in this.ingredients.shapes[f]) {
+ //compare it with current shape and if it already exists make add false
+ if (JSON.stringify(this.ingredients.shapes[f][y]) === JSON.stringify(include)) {
+ add = false;
+ }
+ } //add shape by pushing it to the end
+
+ if (add === true) {
+ this.ingredients.shapes[f].push(include);
+ }
+ }
+ };
+ //gets middle point / centroid of shape
+ function _getMiddle(f, args) {
+ var x,
+ y;
+ if (f === 'rectangle' || f === 'ellipse' || f === 'arc' || f === 'circle' || f === 'square') {
+ x = Math.round(args[0] + args[2] / 2);
+ y = Math.round(args[1] + args[3] / 2);
+ } else if (f === 'triangle') {
+ x = (args[0] + args[2] + args[4]) / 3;
+ y = (args[1] + args[3] + args[5]) / 3;
+ } else if (f === 'quadrilateral') {
+ x = (args[0] + args[2] + args[4] + args[6]) / 4;
+ y = (args[1] + args[3] + args[5] + args[7]) / 4;
+ } else if (f === 'line') {
+ x = (args[0] + args[2]) / 2;
+ y = (args[1] + args[3]) / 2;
+ } else {
+ x = args[0];
+ y = args[1];
+ }
+ return [x,
+ y];
+ } //gets position of shape in the canvas
+
+ _main.default.prototype._getPos = function (x, y) {
+ var untransformedPosition = new DOMPointReadOnly(x, y);
+ var currentTransform = this._renderer.isP3D ? new DOMMatrix(this._renderer.uMVMatrix.mat4) : this.drawingContext.getTransform();
+ var _untransformedPositio = untransformedPosition.matrixTransform(currentTransform),
+ transformedX = _untransformedPositio.x,
+ transformedY = _untransformedPositio.y;
+ var canvasWidth = this.width,
+ canvasHeight = this.height;
+ if (transformedX < 0.4 * canvasWidth) {
+ if (transformedY < 0.4 * canvasHeight) {
+ return 'top left';
+ } else if (transformedY > 0.6 * canvasHeight) {
+ return 'bottom left';
+ } else {
+ return 'mid left';
+ }
+ } else if (transformedX > 0.6 * canvasWidth) {
+ if (transformedY < 0.4 * canvasHeight) {
+ return 'top right';
+ } else if (transformedY > 0.6 * canvasHeight) {
+ return 'bottom right';
+ } else {
+ return 'mid right';
+ }
+ } else {
+ if (transformedY < 0.4 * canvasHeight) {
+ return 'top middle';
+ } else if (transformedY > 0.6 * canvasHeight) {
+ return 'bottom middle';
+ } else {
+ return 'middle';
+ }
+ }
+ };
+ //locates shape in a 10*10 grid
+ function _canvasLocator(args, canvasWidth, canvasHeight) {
+ var noRows = 10;
+ var noCols = 10;
+ var locX = Math.floor(args[0] / canvasWidth * noRows);
+ var locY = Math.floor(args[1] / canvasHeight * noCols);
+ if (locX === noRows) {
+ locX = locX - 1;
+ }
+ if (locY === noCols) {
+ locY = locY - 1;
+ }
+ return {
+ locX: locX,
+ locY: locY
+ };
+ } //calculates area of shape
+
+ _main.default.prototype._getArea = function (objectType, shapeArgs) {
+ var objectArea = 0;
+ if (objectType === 'arc') {
+ // area of full ellipse = PI * horizontal radius * vertical radius.
+ // therefore, area of arc = difference bet. arc's start and end radians * horizontal radius * vertical radius.
+ // the below expression is adjusted for negative values and differences in arc's start and end radians over PI*2
+ var arcSizeInRadians = ((shapeArgs[5] - shapeArgs[4]) % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
+ objectArea = arcSizeInRadians * shapeArgs[2] * shapeArgs[3] / 8;
+ if (shapeArgs[6] === 'open' || shapeArgs[6] === 'chord') {
+ // when the arc's mode is OPEN or CHORD, we need to account for the area of the triangle that is formed to close the arc
+ // (Ax( By − Cy) + Bx(Cy − Ay) + Cx(Ay − By ) )/2
+ var Ax = shapeArgs[0];
+ var Ay = shapeArgs[1];
+ var Bx = shapeArgs[0] + shapeArgs[2] / 2 * Math.cos(shapeArgs[4]).toFixed(2);
+ var By = shapeArgs[1] + shapeArgs[3] / 2 * Math.sin(shapeArgs[4]).toFixed(2);
+ var Cx = shapeArgs[0] + shapeArgs[2] / 2 * Math.cos(shapeArgs[5]).toFixed(2);
+ var Cy = shapeArgs[1] + shapeArgs[3] / 2 * Math.sin(shapeArgs[5]).toFixed(2);
+ var areaOfExtraTriangle = Math.abs(Ax * (By - Cy) + Bx * (Cy - Ay) + Cx * (Ay - By)) / 2;
+ if (arcSizeInRadians > Math.PI) {
+ objectArea = objectArea + areaOfExtraTriangle;
+ } else {
+ objectArea = objectArea - areaOfExtraTriangle;
+ }
+ }
+ } else if (objectType === 'ellipse' || objectType === 'circle') {
+ objectArea = 3.14 * shapeArgs[2] / 2 * shapeArgs[3] / 2;
+ } else if (objectType === 'line') {
+ objectArea = 0;
+ } else if (objectType === 'point') {
+ objectArea = 0;
+ } else if (objectType === 'quadrilateral') {
+ // ((x4+x1)*(y4-y1)+(x1+x2)*(y1-y2)+(x2+x3)*(y2-y3)+(x3+x4)*(y3-y4))/2
+ objectArea = Math.abs((shapeArgs[6] + shapeArgs[0]) * (shapeArgs[7] - shapeArgs[1]) + (shapeArgs[0] + shapeArgs[2]) * (shapeArgs[1] - shapeArgs[3]) + (shapeArgs[2] + shapeArgs[4]) * (shapeArgs[3] - shapeArgs[5]) + (shapeArgs[4] + shapeArgs[6]) * (shapeArgs[5] - shapeArgs[7])) / 2;
+ } else if (objectType === 'rectangle' || objectType === 'square') {
+ objectArea = shapeArgs[2] * shapeArgs[3];
+ } else if (objectType === 'triangle') {
+ objectArea = Math.abs(shapeArgs[0] * (shapeArgs[3] - shapeArgs[5]) + shapeArgs[2] * (shapeArgs[5] - shapeArgs[1]) + shapeArgs[4] * (shapeArgs[1] - shapeArgs[3])) / 2;
+ // (Ax( By − Cy) + Bx(Cy − Ay) + Cx(Ay − By ))/2
+ } // Store the positions of the canvas corners
+
+ var canvasWidth = this.width * this._pixelDensity;
+ var canvasHeight = this.height * this._pixelDensity;
+ var canvasCorners = [
+ new DOMPoint(0, 0),
+ new DOMPoint(canvasWidth, 0),
+ new DOMPoint(canvasWidth, canvasHeight),
+ new DOMPoint(0, canvasHeight)
+ ];
+ // Apply the inverse of the current transformations to the canvas corners
+ var currentTransform = this._renderer.isP3D ? new DOMMatrix(this._renderer.uMVMatrix.mat4) : this.drawingContext.getTransform();
+ var invertedTransform = currentTransform.inverse();
+ var tc = canvasCorners.map(function (corner) {
+ return corner.matrixTransform(invertedTransform);
+ });
+ /* Use same shoelace formula used for quad area (above) to calculate
+ the area of the canvas with inverted transformation applied */
+ var transformedCanvasArea = Math.abs((tc[3].x + tc[0].x) * (tc[3].y - tc[0].y) + (tc[0].x + tc[1].x) * (tc[0].y - tc[1].y) + (tc[1].x + tc[2].x) * (tc[1].y - tc[2].y) + (tc[2].x + tc[3].x) * (tc[2].y - tc[3].y)) / 2;
+ /* Compare area of shape (minus transformations) to area of canvas
+ with inverted transformation applied.
+ Return percentage */
+ var untransformedArea = Math.round(objectArea * 100 / transformedCanvasArea);
+ return untransformedArea;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.fill': 172,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.number.to-fixed': 193,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 280: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.concat');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Environment
+ * @submodule Environment
+ * @for p5
+ * @requires core
+ */
+ //the functions in this file support updating the text output
+ //updates textOutput
+
+ _main.default.prototype._updateTextOutput = function (idT) {
+ //if html structure is not there yet
+ if (!this.dummyDOM.querySelector('#'.concat(idT, '_summary'))) {
+ return;
+ }
+ var current = this._accessibleOutputs[idT];
+ //create shape list
+ var innerList = _shapeList(idT, this.ingredients.shapes);
+ //create output summary
+ var innerSummary = _textSummary(innerList.numShapes, this.ingredients.colors.background, this.width, this.height);
+ //create shape details
+ var innerShapeDetails = _shapeDetails(idT, this.ingredients.shapes);
+ //if it is different from current summary
+ if (innerSummary !== current.summary.innerHTML) {
+ //update
+ current.summary.innerHTML = innerSummary;
+ } //if it is different from current shape list
+
+ if (innerList.listShapes !== current.list.innerHTML) {
+ //update
+ current.list.innerHTML = innerList.listShapes;
+ } //if it is different from current shape details
+
+ if (innerShapeDetails !== current.shapeDetails.innerHTML) {
+ //update
+ current.shapeDetails.innerHTML = innerShapeDetails;
+ }
+ this._accessibleOutputs[idT] = current;
+ };
+ //Builds textOutput summary
+ function _textSummary(numShapes, background, width, height) {
+ var text = 'Your output is a, '.concat(width, ' by ').concat(height, ' pixels, ').concat(background, ' canvas containing the following');
+ if (numShapes === 1) {
+ text = ''.concat(text, ' shape:');
+ } else {
+ text = ''.concat(text, ' ').concat(numShapes, ' shapes:');
+ }
+ return text;
+ } //Builds textOutput table with shape details
+
+ function _shapeDetails(idT, ingredients) {
+ var shapeDetails = '';
+ var shapeNumber = 0;
+ //goes trhough every shape type in ingredients
+ for (var x in ingredients) {
+ //and for every shape
+ for (var y in ingredients[x]) {
+ //it creates a table row
+ var row = '
+ *
+ */
+
+ _main.default.prototype.alpha = function (c) {
+ _main.default._validateParameters('alpha', arguments);
+ return this.color(c)._getAlpha();
+ };
+ /**
+ * Extracts the blue value from a p5.Color object,
+ * array of color components, or CSS color string.
+ *
+ * @method blue
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the blue value.
+ * @example
+ *
+ * noStroke();
+ * const c = color(0, 126, 255, 102);
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ * // Sets 'alphaValue' to 102.
+ * const alphaValue = alpha(c);
+ * fill(alphaValue);
+ * rect(50, 15, 35, 70);
+ * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.blue = function (c) {
+ _main.default._validateParameters('blue', arguments);
+ return this.color(c)._getBlue();
+ };
+ /**
+ * Extracts the HSB brightness value from a
+ * p5.Color object, array of color components, or
+ * CSS color string.
+ *
+ * @method brightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the brightness value.
+ *
+ * @example
+ *
+ * const c = color(175, 100, 220);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'blueValue' to 220.
+ * const blueValue = blue(c);
+ * fill(0, 0, blueValue);
+ * rect(50, 20, 35, 60);
+ * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+ *
+ *
+ *
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * const c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'brightValue' to 255.
+ * const brightValue = brightness(c);
+ * fill(brightValue);
+ * rect(50, 20, 35, 60);
+ * describe('Two rectangles. The left one is salmon pink and the right one is white.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.brightness = function (c) {
+ _main.default._validateParameters('brightness', arguments);
+ return this.color(c)._getBrightness();
+ };
+ /**
+ * Creates a p5.Color object. By default, the
+ * parameters are interpreted as RGB values. Calling `color(255, 204, 0)` will
+ * return a bright yellow color. The way these parameters are interpreted may
+ * be changed with the colorMode() function.
+ *
+ * The version of `color()` with one parameter interprets the value one of two
+ * ways. If the parameter is a number, it's interpreted as a grayscale value.
+ * If the parameter is a string, it's interpreted as a CSS color string.
+ *
+ * The version of `color()` with two parameters interprets the first one as a
+ * grayscale value. The second parameter sets the alpha (transparency) value.
+ *
+ * The version of `color()` with three parameters interprets them as RGB, HSB,
+ * or HSL colors, depending on the current `colorMode()`.
+ *
+ * The version of `color()` with four parameters interprets them as RGBA, HSBA,
+ * or HSLA colors, depending on the current `colorMode()`. The last parameter
+ * sets the alpha (transparency) value.
+ *
+ * @method color
+ * @param {Number} gray number specifying value between white and black.
+ * @param {Number} [alpha] alpha value relative to current color range
+ * (default is 0-255).
+ * @return {p5.Color} resulting color.
+ *
+ * @example
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * const c = color('hsb(60, 100%, 50%)');
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'brightValue' to 127.5 (50% of 255)
+ * const brightValue = brightness(c);
+ * fill(brightValue);
+ * rect(50, 20, 35, 60);
+ * describe('Two rectangles. The left one is olive and the right one is gray.');
+ *
+ *
+ *
+ *
+ *
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * noStroke();
+ * rect(30, 20, 55, 55);
+ * describe('A yellow rectangle on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * // RGB values.
+ * let c = color(255, 204, 0);
+ * fill(c);
+ * noStroke();
+ * circle(25, 25, 80);
+ * // A grayscale value.
+ * c = color(65);
+ * fill(c);
+ * circle(75, 75, 80);
+ * describe(
+ * 'Two ellipses. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
+ * );
+ *
+ *
+ *
+ *
+ *
+ * // A CSS named color.
+ * const c = color('magenta');
+ * fill(c);
+ * noStroke();
+ * square(20, 20, 60);
+ * describe('A magenta square on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * // CSS hex color codes.
+ * noStroke();
+ * let c = color('#0f0');
+ * fill(c);
+ * rect(0, 10, 45, 80);
+ * c = color('#00ff00');
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ * describe('Two bright green rectangles on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * // RGB and RGBA color strings.
+ * noStroke();
+ * let c = color('rgb(0,0,255)');
+ * fill(c);
+ * square(10, 10, 35);
+ * c = color('rgb(0%, 0%, 100%)');
+ * fill(c);
+ * square(55, 10, 35);
+ * c = color('rgba(0, 0, 255, 1)');
+ * fill(c);
+ * square(10, 55, 35);
+ * c = color('rgba(0%, 0%, 100%, 1)');
+ * fill(c);
+ * square(55, 55, 35);
+ * describe('Four blue squares in corners of a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * // HSL and HSLA color strings.
+ * let c = color('hsl(160, 100%, 50%)');
+ * noStroke();
+ * fill(c);
+ * rect(0, 10, 45, 80);
+ * c = color('hsla(160, 100%, 50%, 0.5)');
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ * describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
+ *
+ *
+ *
+ *
+ *
+ * // HSB and HSBA color strings.
+ * let c = color('hsb(160, 100%, 50%)');
+ * noStroke();
+ * fill(c);
+ * rect(0, 10, 45, 80);
+ * c = color('hsba(160, 100%, 50%, 0.5)');
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ * describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
+ *
+ *
+ *
+ */
+ /**
+ * @method color
+ * @param {Number} v1 red or hue value relative to
+ * the current color range.
+ * @param {Number} v2 green or saturation value
+ * relative to the current color range.
+ * @param {Number} v3 blue or brightness value
+ * relative to the current color range.
+ * @param {Number} [alpha]
+ * @return {p5.Color}
+ */
+ /**
+ * @method color
+ * @param {String} value a color string.
+ * @return {p5.Color}
+ */
+ /**
+ * @method color
+ * @param {Number[]} values an array containing the red, green, blue,
+ * and alpha components of the color.
+ * @return {p5.Color}
+ */
+ /**
+ * @method color
+ * @param {p5.Color} color
+ * @return {p5.Color}
+ */
+ _main.default.prototype.color = function () {
+ _main.default._validateParameters('color', arguments);
+ if (arguments[0] instanceof _main.default.Color) {
+ return arguments[0]; // Do nothing if argument is already a color object.
+ }
+ var args = arguments[0] instanceof Array ? arguments[0] : arguments;
+ return new _main.default.Color(this, args);
+ };
+ /**
+ * Extracts the green value from a p5.Color object,
+ * array of color components, or CSS color string.
+ *
+ * @method green
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the green value.
+ * @example
+ *
+ * // Changing color modes.
+ * noStroke();
+ * let c = color(50, 55, 100);
+ * fill(c);
+ * rect(0, 10, 45, 80);
+ * colorMode(HSB, 100);
+ * c = color(50, 55, 100);
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ * describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.green = function (c) {
+ _main.default._validateParameters('green', arguments);
+ return this.color(c)._getGreen();
+ };
+ /**
+ * Extracts the hue value from a
+ * p5.Color object, array of color components, or
+ * CSS color string.
+ *
+ * Hue exists in both HSB and HSL. It describes a color's position on the
+ * color wheel. By default, this function returns the HSL-normalized hue. If
+ * the colorMode() is set to HSB, it returns the
+ * HSB-normalized hue.
+ *
+ * @method hue
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the hue
+ * @example
+ *
+ * const c = color(20, 75, 200);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'greenValue' to 75.
+ * const greenValue = green(c);
+ * fill(0, greenValue, 0);
+ * rect(50, 20, 35, 60);
+ * describe('Two rectangles. The rectangle on the left is blue and the one on the right is green.');
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.hue = function (c) {
+ _main.default._validateParameters('hue', arguments);
+ return this.color(c)._getHue();
+ };
+ /**
+ * Blends two colors to find a third color between them. The `amt` parameter
+ * specifies the amount to interpolate between the two values. 0 is equal to
+ * the first color, 0.1 is very near the first color, 0.5 is halfway between
+ * the two colors, and so on. Negative numbers are set to 0. Numbers greater
+ * than 1 are set to 1. This differs from the behavior of
+ * lerp. It's necessary because numbers outside of the
+ * interval [0, 1] will produce strange and unexpected colors.
+ *
+ * The way that colors are interpolated depends on the current
+ * colorMode().
+ *
+ * @method lerpColor
+ * @param {p5.Color} c1 interpolate from this color.
+ * @param {p5.Color} c2 interpolate to this color.
+ * @param {Number} amt number between 0 and 1.
+ * @return {p5.Color} interpolated color.
+ *
+ * @example
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * const c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'hueValue' to 0.
+ * const hueValue = hue(c);
+ * fill(hueValue);
+ * rect(50, 20, 35, 60);
+ * describe(
+ * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+ * );
+ *
+ *
+ *
+ */
+ _main.default.prototype.lerpColor = function (c1, c2, amt) {
+ _main.default._validateParameters('lerpColor', arguments);
+ var mode = this._colorMode;
+ var maxes = this._colorMaxes;
+ var l0,
+ l1,
+ l2,
+ l3;
+ var fromArray,
+ toArray;
+ if (mode === constants.RGB) {
+ fromArray = c1.levels.map(function (level) {
+ return level / 255;
+ });
+ toArray = c2.levels.map(function (level) {
+ return level / 255;
+ });
+ } else if (mode === constants.HSB) {
+ c1._getBrightness(); // Cache hsba so it definitely exists.
+ c2._getBrightness();
+ fromArray = c1.hsba;
+ toArray = c2.hsba;
+ } else if (mode === constants.HSL) {
+ c1._getLightness(); // Cache hsla so it definitely exists.
+ c2._getLightness();
+ fromArray = c1.hsla;
+ toArray = c2.hsla;
+ } else {
+ throw new Error(''.concat(mode, 'cannot be used for interpolation.'));
+ } // Prevent extrapolation.
+
+ amt = Math.max(Math.min(amt, 1), 0);
+ // Define lerp here itself if user isn't using math module.
+ // Maintains the definition as found in math/calculation.js
+ if (typeof this.lerp === 'undefined') {
+ this.lerp = function (start, stop, amt) {
+ return amt * (stop - start) + start;
+ };
+ } // Perform interpolation.
+
+ l0 = this.lerp(fromArray[0], toArray[0], amt);
+ l1 = this.lerp(fromArray[1], toArray[1], amt);
+ l2 = this.lerp(fromArray[2], toArray[2], amt);
+ l3 = this.lerp(fromArray[3], toArray[3], amt);
+ // Scale components.
+ l0 *= maxes[mode][0];
+ l1 *= maxes[mode][1];
+ l2 *= maxes[mode][2];
+ l3 *= maxes[mode][3];
+ return this.color(l0, l1, l2, l3);
+ };
+ /**
+ * Extracts the HSL lightness value from a
+ * p5.Color object, array of color components, or
+ * CSS color string.
+ *
+ * @method lightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the lightness
+ *
+ * @example
+ *
+ * colorMode(RGB);
+ * stroke(255);
+ * background(51);
+ * const from = color(218, 165, 32);
+ * const to = color(72, 61, 139);
+ * colorMode(RGB);
+ * const interA = lerpColor(from, to, 0.33);
+ * const interB = lerpColor(from, to, 0.66);
+ * fill(from);
+ * rect(10, 20, 20, 60);
+ * fill(interA);
+ * rect(30, 20, 20, 60);
+ * fill(interB);
+ * rect(50, 20, 20, 60);
+ * fill(to);
+ * rect(70, 20, 20, 60);
+ * describe(
+ * 'Four rectangles with white edges. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
+ * );
+ *
+ *
+ *
+ */
+ _main.default.prototype.lightness = function (c) {
+ _main.default._validateParameters('lightness', arguments);
+ return this.color(c)._getLightness();
+ };
+ /**
+ * Extracts the red value from a
+ * p5.Color object, array of color components, or
+ * CSS color string.
+ *
+ * @method red
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the red value.
+ * @example
+ *
+ * noStroke();
+ * colorMode(HSL);
+ * const c = color(156, 100, 50, 1);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'lightValue' to 50.
+ * const lightValue = lightness(c);
+ * fill(lightValue);
+ * rect(50, 20, 35, 60);
+ * describe('Two rectangles. The rectangle on the left is light green and the one on the right is gray.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.red = function (c) {
+ _main.default._validateParameters('red', arguments);
+ return this.color(c)._getRed();
+ };
+ /**
+ * Extracts the saturation value from a
+ * p5.Color object, array of color components, or
+ * CSS color string.
+ *
+ * Saturation is scaled differently in HSB and HSL. By default, this function
+ * returns the HSL saturation. If the colorMode()
+ * is set to HSB, it returns the HSB saturation.
+ *
+ * @method saturation
+ * @param {p5.Color|Number[]|String} color p5.Color object, array of
+ * color components, or CSS color string.
+ * @return {Number} the saturation value
+ * @example
+ *
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'redValue' to 255.
+ * const redValue = red(c);
+ * fill(redValue, 0, 0);
+ * rect(50, 20, 35, 60);
+ * describe(
+ * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+ * );
+ *
+ *
+ *
+ */
+ _main.default.prototype.saturation = function (c) {
+ _main.default._validateParameters('saturation', arguments);
+ return this.color(c)._getSaturation();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/friendly_errors/fes_core': 289,
+ '../core/friendly_errors/file_errors': 290,
+ '../core/friendly_errors/validate_params': 293,
+ '../core/main': 298,
+ './p5.Color': 284,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 284: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.trim');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _color_conversion = _interopRequireDefault(_dereq_('./color_conversion'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ * @requires color_conversion
+ */
+ /**
+ * CSS named colors.
+ */
+
+ var namedColors = {
+ aliceblue: '#f0f8ff',
+ antiquewhite: '#faebd7',
+ aqua: '#00ffff',
+ aquamarine: '#7fffd4',
+ azure: '#f0ffff',
+ beige: '#f5f5dc',
+ bisque: '#ffe4c4',
+ black: '#000000',
+ blanchedalmond: '#ffebcd',
+ blue: '#0000ff',
+ blueviolet: '#8a2be2',
+ brown: '#a52a2a',
+ burlywood: '#deb887',
+ cadetblue: '#5f9ea0',
+ chartreuse: '#7fff00',
+ chocolate: '#d2691e',
+ coral: '#ff7f50',
+ cornflowerblue: '#6495ed',
+ cornsilk: '#fff8dc',
+ crimson: '#dc143c',
+ cyan: '#00ffff',
+ darkblue: '#00008b',
+ darkcyan: '#008b8b',
+ darkgoldenrod: '#b8860b',
+ darkgray: '#a9a9a9',
+ darkgreen: '#006400',
+ darkgrey: '#a9a9a9',
+ darkkhaki: '#bdb76b',
+ darkmagenta: '#8b008b',
+ darkolivegreen: '#556b2f',
+ darkorange: '#ff8c00',
+ darkorchid: '#9932cc',
+ darkred: '#8b0000',
+ darksalmon: '#e9967a',
+ darkseagreen: '#8fbc8f',
+ darkslateblue: '#483d8b',
+ darkslategray: '#2f4f4f',
+ darkslategrey: '#2f4f4f',
+ darkturquoise: '#00ced1',
+ darkviolet: '#9400d3',
+ deeppink: '#ff1493',
+ deepskyblue: '#00bfff',
+ dimgray: '#696969',
+ dimgrey: '#696969',
+ dodgerblue: '#1e90ff',
+ firebrick: '#b22222',
+ floralwhite: '#fffaf0',
+ forestgreen: '#228b22',
+ fuchsia: '#ff00ff',
+ gainsboro: '#dcdcdc',
+ ghostwhite: '#f8f8ff',
+ gold: '#ffd700',
+ goldenrod: '#daa520',
+ gray: '#808080',
+ green: '#008000',
+ greenyellow: '#adff2f',
+ grey: '#808080',
+ honeydew: '#f0fff0',
+ hotpink: '#ff69b4',
+ indianred: '#cd5c5c',
+ indigo: '#4b0082',
+ ivory: '#fffff0',
+ khaki: '#f0e68c',
+ lavender: '#e6e6fa',
+ lavenderblush: '#fff0f5',
+ lawngreen: '#7cfc00',
+ lemonchiffon: '#fffacd',
+ lightblue: '#add8e6',
+ lightcoral: '#f08080',
+ lightcyan: '#e0ffff',
+ lightgoldenrodyellow: '#fafad2',
+ lightgray: '#d3d3d3',
+ lightgreen: '#90ee90',
+ lightgrey: '#d3d3d3',
+ lightpink: '#ffb6c1',
+ lightsalmon: '#ffa07a',
+ lightseagreen: '#20b2aa',
+ lightskyblue: '#87cefa',
+ lightslategray: '#778899',
+ lightslategrey: '#778899',
+ lightsteelblue: '#b0c4de',
+ lightyellow: '#ffffe0',
+ lime: '#00ff00',
+ limegreen: '#32cd32',
+ linen: '#faf0e6',
+ magenta: '#ff00ff',
+ maroon: '#800000',
+ mediumaquamarine: '#66cdaa',
+ mediumblue: '#0000cd',
+ mediumorchid: '#ba55d3',
+ mediumpurple: '#9370db',
+ mediumseagreen: '#3cb371',
+ mediumslateblue: '#7b68ee',
+ mediumspringgreen: '#00fa9a',
+ mediumturquoise: '#48d1cc',
+ mediumvioletred: '#c71585',
+ midnightblue: '#191970',
+ mintcream: '#f5fffa',
+ mistyrose: '#ffe4e1',
+ moccasin: '#ffe4b5',
+ navajowhite: '#ffdead',
+ navy: '#000080',
+ oldlace: '#fdf5e6',
+ olive: '#808000',
+ olivedrab: '#6b8e23',
+ orange: '#ffa500',
+ orangered: '#ff4500',
+ orchid: '#da70d6',
+ palegoldenrod: '#eee8aa',
+ palegreen: '#98fb98',
+ paleturquoise: '#afeeee',
+ palevioletred: '#db7093',
+ papayawhip: '#ffefd5',
+ peachpuff: '#ffdab9',
+ peru: '#cd853f',
+ pink: '#ffc0cb',
+ plum: '#dda0dd',
+ powderblue: '#b0e0e6',
+ purple: '#800080',
+ rebeccapurple: '#663399',
+ red: '#ff0000',
+ rosybrown: '#bc8f8f',
+ royalblue: '#4169e1',
+ saddlebrown: '#8b4513',
+ salmon: '#fa8072',
+ sandybrown: '#f4a460',
+ seagreen: '#2e8b57',
+ seashell: '#fff5ee',
+ sienna: '#a0522d',
+ silver: '#c0c0c0',
+ skyblue: '#87ceeb',
+ slateblue: '#6a5acd',
+ slategray: '#708090',
+ slategrey: '#708090',
+ snow: '#fffafa',
+ springgreen: '#00ff7f',
+ steelblue: '#4682b4',
+ tan: '#d2b48c',
+ teal: '#008080',
+ thistle: '#d8bfd8',
+ tomato: '#ff6347',
+ turquoise: '#40e0d0',
+ violet: '#ee82ee',
+ wheat: '#f5deb3',
+ white: '#ffffff',
+ whitesmoke: '#f5f5f5',
+ yellow: '#ffff00',
+ yellowgreen: '#9acd32'
+ };
+ /**
+ * These regular expressions are used to build up the patterns for matching
+ * viable CSS color strings: fragmenting the regexes in this way increases the
+ * legibility and comprehensibility of the code.
+ *
+ * Note that RGB values of .9 are not parsed by IE, but are supported here for
+ * color string consistency.
+ */
+ var WHITESPACE = /\s*/; // Match zero or more whitespace characters.
+ var INTEGER = /(\d{1,3})/; // Match integers: 79, 255, etc.
+ var DECIMAL = /((?:\d+(?:\.\d+)?)|(?:\.\d+))/; // Match 129.6, 79, .9, etc.
+ var PERCENT = new RegExp(''.concat(DECIMAL.source, '%')); // Match 12.9%, 79%, .9%, etc.
+ /**
+ * Full color string patterns. The capture groups are necessary.
+ */
+ var colorPatterns = {
+ // Match colors in format #XXX, e.g. #416.
+ HEX3: /^#([a-f0-9])([a-f0-9])([a-f0-9])$/i,
+ // Match colors in format #XXXX, e.g. #5123.
+ HEX4: /^#([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])$/i,
+ // Match colors in format #XXXXXX, e.g. #b4d455.
+ HEX6: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
+ // Match colors in format #XXXXXXXX, e.g. #b4d45535.
+ HEX8: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
+ // Match colors in format rgb(R, G, B), e.g. rgb(255, 0, 128).
+ RGB: new RegExp(['^rgb\\(',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format rgb(R%, G%, B%), e.g. rgb(100%, 0%, 28.9%).
+ RGB_PERCENT: new RegExp(['^rgb\\(',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format rgb(R, G, B, A), e.g. rgb(255, 0, 128, 0.25).
+ RGBA: new RegExp(['^rgba\\(',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ INTEGER.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format rgb(R%, G%, B%, A), e.g. rgb(100%, 0%, 28.9%, 0.5).
+ RGBA_PERCENT: new RegExp(['^rgba\\(',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format hsla(H, S%, L%), e.g. hsl(100, 40%, 28.9%).
+ HSL: new RegExp(['^hsl\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format hsla(H, S%, L%, A), e.g. hsla(100, 40%, 28.9%, 0.5).
+ HSLA: new RegExp(['^hsla\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format hsb(H, S%, B%), e.g. hsb(100, 40%, 28.9%).
+ HSB: new RegExp(['^hsb\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ '\\)$'].join(WHITESPACE.source), 'i'),
+ // Match colors in format hsba(H, S%, B%, A), e.g. hsba(100, 40%, 28.9%, 0.5).
+ HSBA: new RegExp(['^hsba\\(',
+ INTEGER.source,
+ ',',
+ PERCENT.source,
+ ',',
+ PERCENT.source,
+ ',',
+ DECIMAL.source,
+ '\\)$'].join(WHITESPACE.source), 'i')
+ };
+ /**
+ * A class to describe a color. Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * saturation() is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * color() is the recommended way to create an instance
+ * of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst] pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals an array containing the color values
+ * for red, green, blue and alpha channel
+ * or CSS color.
+ */
+ _main.default.Color = /*#__PURE__*/ function () {
+ function Color(pInst, vals) {
+ _classCallCheck(this, Color);
+ // Record color mode and maxes at time of construction.
+ this._storeModeAndMaxes(pInst._colorMode, pInst._colorMaxes);
+ // Calculate normalized RGBA values.
+ if (![constants.RGB,
+ constants.HSL,
+ constants.HSB].includes(this.mode)) {
+ throw new Error(''.concat(this.mode, ' is an invalid colorMode.'));
+ } else {
+ this._array = Color._parseInputs.apply(this, vals);
+ } // Expose closest screen color.
+
+ this._calculateLevels();
+ } /**
+ * Returns the color formatted as a string. Doing so can be useful for
+ * debugging, or for using p5.js with other libraries.
+ *
+ * @method toString
+ * @param {String} [format] how the color string will be formatted.
+ * Leaving this empty formats the string as rgba(r, g, b, a).
+ * '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.
+ * 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.
+ * 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.
+ * 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
+ * @return {String} the formatted string.
+ *
+ * @example
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * const c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'satValue' to 126.
+ * const satValue = saturation(c);
+ * fill(satValue);
+ * rect(50, 20, 35, 60);
+ * describe(
+ * 'Two rectangles. The rectangle on the left is deep pink and the one on the right is gray.'
+ * );
+ *
+ *
+ *
+ *
+ *
+ * createCanvas(200, 100);
+ * stroke(255);
+ * const myColor = color(100, 100, 250);
+ * fill(myColor);
+ * rotate(HALF_PI);
+ * text(myColor.toString(), 0, -5);
+ * text(myColor.toString('#rrggbb'), 0, -30);
+ * text(myColor.toString('rgba%'), 0, -55);
+ * describe('Three text representation of a color written sideways.');
+ *
+ *
+ *
+ */
+
+ _createClass(Color, [
+ {
+ key: 'toString',
+ value: function toString(format) {
+ var a = this.levels;
+ var f = this._array;
+ var alpha = f[3]; // String representation uses normalized alpha
+ switch (format) {
+ case '#rrggbb':
+ return '#'.concat(a[0] < 16 ? '0'.concat(a[0].toString(16)) : a[0].toString(16), a[1] < 16 ? '0'.concat(a[1].toString(16)) : a[1].toString(16), a[2] < 16 ? '0'.concat(a[2].toString(16)) : a[2].toString(16));
+ case '#rrggbbaa':
+ return '#'.concat(a[0] < 16 ? '0'.concat(a[0].toString(16)) : a[0].toString(16), a[1] < 16 ? '0'.concat(a[1].toString(16)) : a[1].toString(16), a[2] < 16 ? '0'.concat(a[2].toString(16)) : a[2].toString(16), a[3] < 16 ? '0'.concat(a[3].toString(16)) : a[3].toString(16));
+ case '#rgb':
+ return '#'.concat(Math.round(f[0] * 15).toString(16), Math.round(f[1] * 15).toString(16), Math.round(f[2] * 15).toString(16));
+ case '#rgba':
+ return '#'.concat(Math.round(f[0] * 15).toString(16), Math.round(f[1] * 15).toString(16), Math.round(f[2] * 15).toString(16), Math.round(f[3] * 15).toString(16));
+ case 'rgb':
+ return 'rgb('.concat(a[0], ', ', a[1], ', ', a[2], ')');
+ case 'rgb%':
+ return 'rgb('.concat((100 * f[0]).toPrecision(3), '%, ', (100 * f[1]).toPrecision(3), '%, ', (100 * f[2]).toPrecision(3), '%)');
+ case 'rgba%':
+ return 'rgba('.concat((100 * f[0]).toPrecision(3), '%, ', (100 * f[1]).toPrecision(3), '%, ', (100 * f[2]).toPrecision(3), '%, ', (100 * f[3]).toPrecision(3), '%)');
+ case 'hsb':
+ case 'hsv':
+ if (!this.hsba) this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsb('.concat(this.hsba[0] * this.maxes[constants.HSB][0], ', ', this.hsba[1] * this.maxes[constants.HSB][1], ', ', this.hsba[2] * this.maxes[constants.HSB][2], ')');
+ case 'hsb%':
+ case 'hsv%':
+ if (!this.hsba) this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsb('.concat((100 * this.hsba[0]).toPrecision(3), '%, ', (100 * this.hsba[1]).toPrecision(3), '%, ', (100 * this.hsba[2]).toPrecision(3), '%)');
+ case 'hsba':
+ case 'hsva':
+ if (!this.hsba) this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsba('.concat(this.hsba[0] * this.maxes[constants.HSB][0], ', ', this.hsba[1] * this.maxes[constants.HSB][1], ', ', this.hsba[2] * this.maxes[constants.HSB][2], ', ', alpha, ')');
+ case 'hsba%':
+ case 'hsva%':
+ if (!this.hsba) this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ return 'hsba('.concat((100 * this.hsba[0]).toPrecision(3), '%, ', (100 * this.hsba[1]).toPrecision(3), '%, ', (100 * this.hsba[2]).toPrecision(3), '%, ', (100 * alpha).toPrecision(3), '%)');
+ case 'hsl':
+ if (!this.hsla) this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat(this.hsla[0] * this.maxes[constants.HSL][0], ', ', this.hsla[1] * this.maxes[constants.HSL][1], ', ', this.hsla[2] * this.maxes[constants.HSL][2], ')');
+ case 'hsl%':
+ if (!this.hsla) this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat((100 * this.hsla[0]).toPrecision(3), '%, ', (100 * this.hsla[1]).toPrecision(3), '%, ', (100 * this.hsla[2]).toPrecision(3), '%)');
+ case 'hsla':
+ if (!this.hsla) this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsla('.concat(this.hsla[0] * this.maxes[constants.HSL][0], ', ', this.hsla[1] * this.maxes[constants.HSL][1], ', ', this.hsla[2] * this.maxes[constants.HSL][2], ', ', alpha, ')');
+ case 'hsla%':
+ if (!this.hsla) this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ return 'hsl('.concat((100 * this.hsla[0]).toPrecision(3), '%, ', (100 * this.hsla[1]).toPrecision(3), '%, ', (100 * this.hsla[2]).toPrecision(3), '%, ', (100 * alpha).toPrecision(3), '%)');
+ case 'rgba':
+ default:
+ return 'rgba('.concat(a[0], ',', a[1], ',', a[2], ',', alpha, ')');
+ }
+ } /**
+ * Sets the red component of a color. The range depends on the
+ * colorMode(). In the default RGB mode it's
+ * between 0 and 255.
+ *
+ * @method setRed
+ * @param {Number} red the new red value.
+ *
+ * @example
+ *
+ * const myColor = color(100, 130, 250);
+ * text(myColor.toString('#rrggbb'), 25, 25);
+ * describe('A hexadecimal representation of a color.');
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setRed',
+ value: function setRed(new_red) {
+ this._array[0] = new_red / this.maxes[constants.RGB][0];
+ this._calculateLevels();
+ } /**
+ * Sets the green component of a color. The range depends on the
+ * colorMode(). In the default RGB mode it's
+ * between 0 and 255.
+ *
+ * @method setGreen
+ * @param {Number} green the new green value.
+ *
+ * @example
+ *
+ * let backgroundColor;
+ *
+ * function setup() {
+ * backgroundColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * describe('A canvas with a gradually changing background color.');
+ * }
+ *
+ *
+ *
+ **/
+
+ },
+ {
+ key: 'setGreen',
+ value: function setGreen(new_green) {
+ this._array[1] = new_green / this.maxes[constants.RGB][1];
+ this._calculateLevels();
+ } /**
+ * Sets the blue component of a color. The range depends on the
+ * colorMode(). In the default RGB mode it's
+ * between 0 and 255.
+ *
+ * @method setBlue
+ * @param {Number} blue the new blue value.
+ *
+ * @example
+ *
+ * let backgroundColor;
+ *
+ * function setup() {
+ * backgroundColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * describe('A canvas with a gradually changing background color.');
+ * }
+ *
+ *
+ *
+ **/
+
+ },
+ {
+ key: 'setBlue',
+ value: function setBlue(new_blue) {
+ this._array[2] = new_blue / this.maxes[constants.RGB][2];
+ this._calculateLevels();
+ } /**
+ * Sets the alpha (transparency) value of a color. The range depends on the
+ * colorMode(). In the default RGB mode it's
+ * between 0 and 255.
+ *
+ * @method setAlpha
+ * @param {Number} alpha the new alpha value.
+ *
+ * @example
+ *
+ * let backgroundColor;
+ *
+ * function setup() {
+ * backgroundColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * describe('A canvas with a gradually changing background color.');
+ * }
+ *
+ *
+ *
+ **/
+
+ },
+ {
+ key: 'setAlpha',
+ value: function setAlpha(new_alpha) {
+ this._array[3] = new_alpha / this.maxes[this.mode][3];
+ this._calculateLevels();
+ } // calculates and stores the closest screen levels
+
+ },
+ {
+ key: '_calculateLevels',
+ value: function _calculateLevels() {
+ var array = this._array;
+ // (loop backwards for performance)
+ var levels = this.levels = new Array(array.length);
+ for (var i = array.length - 1; i >= 0; --i) {
+ levels[i] = Math.round(array[i] * 255);
+ } // Clear cached HSL/HSB values
+
+ this.hsla = null;
+ this.hsba = null;
+ }
+ },
+ {
+ key: '_getAlpha',
+ value: function _getAlpha() {
+ return this._array[3] * this.maxes[this.mode][3];
+ } // stores the color mode and maxes in this instance of Color
+ // for later use (by _parseInputs())
+
+ },
+ {
+ key: '_storeModeAndMaxes',
+ value: function _storeModeAndMaxes(new_mode, new_maxes) {
+ this.mode = new_mode;
+ this.maxes = new_maxes;
+ }
+ },
+ {
+ key: '_getMode',
+ value: function _getMode() {
+ return this.mode;
+ }
+ },
+ {
+ key: '_getMaxes',
+ value: function _getMaxes() {
+ return this.maxes;
+ }
+ },
+ {
+ key: '_getBlue',
+ value: function _getBlue() {
+ return this._array[2] * this.maxes[constants.RGB][2];
+ }
+ },
+ {
+ key: '_getBrightness',
+ value: function _getBrightness() {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[2] * this.maxes[constants.HSB][2];
+ }
+ },
+ {
+ key: '_getGreen',
+ value: function _getGreen() {
+ return this._array[1] * this.maxes[constants.RGB][1];
+ } /**
+ * Hue is the same in HSB and HSL, but the maximum value may be different.
+ * This function will return the HSB-normalized saturation when supplied with
+ * an HSB color object, but will default to the HSL-normalized saturation
+ * otherwise.
+ */
+
+ },
+ {
+ key: '_getHue',
+ value: function _getHue() {
+ if (this.mode === constants.HSB) {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[0] * this.maxes[constants.HSB][0];
+ } else {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[0] * this.maxes[constants.HSL][0];
+ }
+ }
+ },
+ {
+ key: '_getLightness',
+ value: function _getLightness() {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[2] * this.maxes[constants.HSL][2];
+ }
+ },
+ {
+ key: '_getRed',
+ value: function _getRed() {
+ return this._array[0] * this.maxes[constants.RGB][0];
+ } /**
+ * Saturation is scaled differently in HSB and HSL. This function will return
+ * the HSB saturation when supplied with an HSB color object, but will default
+ * to the HSL saturation otherwise.
+ */
+
+ },
+ {
+ key: '_getSaturation',
+ value: function _getSaturation() {
+ if (this.mode === constants.HSB) {
+ if (!this.hsba) {
+ this.hsba = _color_conversion.default._rgbaToHSBA(this._array);
+ }
+ return this.hsba[1] * this.maxes[constants.HSB][1];
+ } else {
+ if (!this.hsla) {
+ this.hsla = _color_conversion.default._rgbaToHSLA(this._array);
+ }
+ return this.hsla[1] * this.maxes[constants.HSL][1];
+ }
+ } /**
+ * For a number of different inputs, returns a color formatted as [r, g, b, a]
+ * arrays, with each component normalized between 0 and 1.
+ *
+ * @private
+ * @param {Array} [...args] An 'array-like' object that represents a list of
+ * arguments
+ * @return {Number[]} a color formatted as [r, g, b, a]
+ * Example:
+ * input ==> output
+ * g ==> [g, g, g, 255]
+ * g,a ==> [g, g, g, a]
+ * r, g, b ==> [r, g, b, 255]
+ * r, g, b, a ==> [r, g, b, a]
+ * [g] ==> [g, g, g, 255]
+ * [g, a] ==> [g, g, g, a]
+ * [r, g, b] ==> [r, g, b, 255]
+ * [r, g, b, a] ==> [r, g, b, a]
+ * @example
+ *
+ * function draw() {
+ * clear();
+ * background(200);
+ * const squareColor = color(100, 50, 100);
+ * squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
+ * fill(squareColor);
+ * rect(13, 13, width - 26, height - 26);
+ * describe(
+ * 'A purple square with gradually changing opacity drawn on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+
+ }
+ ], [
+ {
+ key: '_parseInputs',
+ value: function _parseInputs(r, g, b, a) {
+ var numArgs = arguments.length;
+ var mode = this.mode;
+ var maxes = this.maxes[mode];
+ var results = [
+ ];
+ var i;
+ if (numArgs >= 3) {
+ // Argument is a list of component values.
+ results[0] = r / maxes[0];
+ results[1] = g / maxes[1];
+ results[2] = b / maxes[2];
+ // Alpha may be undefined, so default it to 100%.
+ if (typeof a === 'number') {
+ results[3] = a / maxes[3];
+ } else {
+ results[3] = 1;
+ } // Constrain components to the range [0,1].
+ // (loop backwards for performance)
+
+ for (i = results.length - 1; i >= 0; --i) {
+ var result = results[i];
+ if (result < 0) {
+ results[i] = 0;
+ } else if (result > 1) {
+ results[i] = 1;
+ }
+ } // Convert to RGBA and return.
+
+ if (mode === constants.HSL) {
+ return _color_conversion.default._hslaToRGBA(results);
+ } else if (mode === constants.HSB) {
+ return _color_conversion.default._hsbaToRGBA(results);
+ } else {
+ return results;
+ }
+ } else if (numArgs === 1 && typeof r === 'string') {
+ var str = r.trim().toLowerCase();
+ // Return if string is a named colour.
+ if (namedColors[str]) {
+ return Color._parseInputs.call(this, namedColors[str]);
+ } // Try RGBA pattern matching.
+
+ if (colorPatterns.HEX3.test(str)) {
+ // #rgb
+ results = colorPatterns.HEX3.exec(str).slice(1).map(function (color) {
+ return parseInt(color + color, 16) / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.HEX6.test(str)) {
+ // #rrggbb
+ results = colorPatterns.HEX6.exec(str).slice(1).map(function (color) {
+ return parseInt(color, 16) / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.HEX4.test(str)) {
+ // #rgba
+ results = colorPatterns.HEX4.exec(str).slice(1).map(function (color) {
+ return parseInt(color + color, 16) / 255;
+ });
+ return results;
+ } else if (colorPatterns.HEX8.test(str)) {
+ // #rrggbbaa
+ results = colorPatterns.HEX8.exec(str).slice(1).map(function (color) {
+ return parseInt(color, 16) / 255;
+ });
+ return results;
+ } else if (colorPatterns.RGB.test(str)) {
+ // rgb(R,G,B)
+ results = colorPatterns.RGB.exec(str).slice(1).map(function (color) {
+ return color / 255;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.RGB_PERCENT.test(str)) {
+ // rgb(R%,G%,B%)
+ results = colorPatterns.RGB_PERCENT.exec(str).slice(1).map(function (color) {
+ return parseFloat(color) / 100;
+ });
+ results[3] = 1;
+ return results;
+ } else if (colorPatterns.RGBA.test(str)) {
+ // rgba(R,G,B,A)
+ results = colorPatterns.RGBA.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 3) {
+ return parseFloat(color);
+ }
+ return color / 255;
+ });
+ return results;
+ } else if (colorPatterns.RGBA_PERCENT.test(str)) {
+ // rgba(R%,G%,B%,A%)
+ results = colorPatterns.RGBA_PERCENT.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseFloat(color) / 100;
+ });
+ return results;
+ } // Try HSLA pattern matching.
+
+ if (colorPatterns.HSL.test(str)) {
+ // hsl(H,S,L)
+ results = colorPatterns.HSL.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ }
+ return parseInt(color, 10) / 100;
+ });
+ results[3] = 1;
+ } else if (colorPatterns.HSLA.test(str)) {
+ // hsla(H,S,L,A)
+ results = colorPatterns.HSLA.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ } else if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseInt(color, 10) / 100;
+ });
+ }
+ results = results.map(function (value) {
+ return Math.max(Math.min(value, 1), 0);
+ });
+ if (results.length) {
+ return _color_conversion.default._hslaToRGBA(results);
+ } // Try HSBA pattern matching.
+
+ if (colorPatterns.HSB.test(str)) {
+ // hsb(H,S,B)
+ results = colorPatterns.HSB.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ }
+ return parseInt(color, 10) / 100;
+ });
+ results[3] = 1;
+ } else if (colorPatterns.HSBA.test(str)) {
+ // hsba(H,S,B,A)
+ results = colorPatterns.HSBA.exec(str).slice(1).map(function (color, idx) {
+ if (idx === 0) {
+ return parseInt(color, 10) / 360;
+ } else if (idx === 3) {
+ return parseFloat(color);
+ }
+ return parseInt(color, 10) / 100;
+ });
+ }
+ if (results.length) {
+ // (loop backwards for performance)
+ for (i = results.length - 1; i >= 0; --i) {
+ results[i] = Math.max(Math.min(results[i], 1), 0);
+ }
+ return _color_conversion.default._hsbaToRGBA(results);
+ } // Input did not match any CSS color pattern: default to white.
+
+ results = [
+ 1,
+ 1,
+ 1,
+ 1
+ ];
+ } else if ((numArgs === 1 || numArgs === 2) && typeof r === 'number') {
+ // 'Grayscale' mode.
+ /**
+ * For HSB and HSL, interpret the gray level as a brightness/lightness
+ * value (they are equivalent when chroma is zero). For RGB, normalize the
+ * gray level according to the blue maximum.
+ */
+ results[0] = r / maxes[2];
+ results[1] = r / maxes[2];
+ results[2] = r / maxes[2];
+ // Alpha may be undefined, so default it to 100%.
+ if (typeof g === 'number') {
+ results[3] = g / maxes[3];
+ } else {
+ results[3] = 1;
+ } // Constrain components to the range [0,1].
+
+ results = results.map(function (value) {
+ return Math.max(Math.min(value, 1), 0);
+ });
+ } else {
+ throw new Error(''.concat(arguments, 'is not a valid color representation.'));
+ }
+ return results;
+ }
+ }
+ ]);
+ return Color;
+ }();
+ var _default = _main.default.Color;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ './color_conversion': 282,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.join': 180,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.constructor': 204,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.trim': 219,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 285: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.fill');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Color');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Color
+ * @submodule Setting
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * Start defining a shape that will mask subsequent things drawn to the canvas.
+ * Only opaque regions of the mask shape will allow content to be drawn.
+ * Any shapes drawn between this and endClip() will
+ * contribute to the mask shape.
+ *
+ * The mask will apply to anything drawn after this call. To draw without a mask, contain
+ * the code to apply the mask and to draw the masked content between
+ * push() and pop().
+ *
+ * Alternatively, rather than drawing the mask between this and
+ * endClip(), draw the mask in a callback function
+ * passed to clip().
+ *
+ * Options can include:
+ * - `invert`: A boolean specifying whether or not to mask the areas *not* filled by the mask shape. Defaults to false.
+ *
+ * @method beginClip
+ * @param {Object} [options] An object containing clip settings.
+ *
+ * @example
+ *
+ * // todo
+ * //
+ * // describe('');
+ *
+ *
+ *
+ *
+ * @alt
+ * In the top left, a red triangle and circle. In the bottom right, a red
+ * square with a triangle and circle cut out of it.
+ *
+ * @example
+ *
+ * noStroke();
+ *
+ * // Mask in some shapes
+ * push();
+ * beginClip();
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * endClip();
+ *
+ * fill('red');
+ * rect(5, 5, 45, 45);
+ * pop();
+ *
+ * translate(50, 50);
+ *
+ * // Mask out the same shapes
+ * push();
+ * beginClip({ invert: true });
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * endClip();
+ *
+ * fill('red');
+ * rect(5, 5, 45, 45);
+ * pop();
+ *
+ *
+ *
+ *
+ * @alt
+ * A silhouette of a rotating torus colored with a gradient from
+ * cyan to purple
+ */
+
+ _main.default.prototype.beginClip = function () {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+ };
+ this._renderer.beginClip(options);
+ };
+ /**
+ * Finishes defining a shape that will mask subsequent things drawn to the canvas.
+ * Only opaque regions of the mask shape will allow content to be drawn.
+ * Any shapes drawn between beginClip() and this
+ * will contribute to the mask shape.
+ *
+ * @method endClip
+ */
+ _main.default.prototype.endClip = function () {
+ this._renderer.endClip();
+ };
+ /**
+ * Use the shape drawn by a callback function to mask subsequent things drawn to the canvas.
+ * Only opaque regions of the mask shape will allow content to be drawn.
+ *
+ * The mask will apply to anything drawn after this call. To draw without a mask, contain
+ * the code to apply the mask and to draw the masked content between
+ * push() and pop().
+ *
+ * Alternatively, rather than drawing the mask shape in a function, draw the
+ * shape between beginClip() and endClip().
+ *
+ * Options can include:
+ * - `invert`: A boolean specifying whether or not to mask the areas *not* filled by the mask shape. Defaults to false.
+ *
+ * @method clip
+ * @param {Function} callback A function that draws the mask shape.
+ * @param {Object} [options] An object containing clip settings.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * noStroke();
+ *
+ * beginClip();
+ * push();
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * scale(0.5);
+ * torus(30, 15);
+ * pop();
+ * endClip();
+ *
+ * beginShape(QUAD_STRIP);
+ * fill(0, 255, 255);
+ * vertex(-width/2, -height/2);
+ * vertex(width/2, -height/2);
+ * fill(100, 0, 100);
+ * vertex(-width/2, height/2);
+ * vertex(width/2, height/2);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * In the top left, a red triangle and circle. In the bottom right, a red
+ * square with a triangle and circle cut out of it.
+ *
+ * @example
+ *
+ * noStroke();
+ *
+ * // Mask in some shapes
+ * push();
+ * clip(() => {
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * });
+ *
+ * fill('red');
+ * rect(5, 5, 45, 45);
+ * pop();
+ *
+ * translate(50, 50);
+ *
+ * // Mask out the same shapes
+ * push();
+ * clip(() => {
+ * triangle(15, 37, 30, 13, 43, 37);
+ * circle(45, 45, 7);
+ * }, { invert: true });
+ *
+ * fill('red');
+ * rect(5, 5, 45, 45);
+ * pop();
+ *
+ *
+ *
+ *
+ * @alt
+ * A silhouette of a rotating torus colored with a gradient from
+ * cyan to purple
+ */
+ _main.default.prototype.clip = function (callback, options) {
+ this._renderer.beginClip(options);
+ callback();
+ this._renderer.endClip(options);
+ };
+ /**
+ * Sets the color used for the background of the canvas. By default, the
+ * background is transparent. This function is typically used within
+ * draw() to clear the display window at the beginning
+ * of each frame. It can also be used inside setup() to
+ * set the background on the first frame of animation.
+ *
+ * The version of `background()` with one parameter interprets the value one of four
+ * ways. If the parameter is a number, it's interpreted as a grayscale value.
+ * If the parameter is a string, it's interpreted as a CSS color string. RGB, RGBA,
+ * HSL, HSLA, hex, and named color strings are supported. If the parameter is a
+ * p5.Color object, it will be used as the background color.
+ * If the parameter is a p5.Image object, it will be used as
+ * the background image.
+ *
+ * The version of `background()` with two parameters interprets the first one as a
+ * grayscale value. The second parameter sets the alpha (transparency) value.
+ *
+ * The version of `background()` with three parameters interprets them as RGB, HSB,
+ * or HSL colors, depending on the current colorMode().
+ * By default, colors are specified in RGB values. Calling background(255, 204, 0)
+ * sets the background a bright yellow color.
+ *
+ * @method background
+ * @param {p5.Color} color any value created by the color() function
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * noStroke();
+ *
+ * clip(() => {
+ * push();
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * scale(0.5);
+ * torus(30, 15);
+ * pop();
+ * });
+ *
+ * beginShape(QUAD_STRIP);
+ * fill(0, 255, 255);
+ * vertex(-width/2, -height/2);
+ * vertex(width/2, -height/2);
+ * fill(100, 0, 100);
+ * vertex(-width/2, height/2);
+ * vertex(width/2, height/2);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // A grayscale integer value.
+ * background(51);
+ * describe('A canvas with a dark charcoal gray background.');
+ *
+ *
+ *
+ *
+ *
+ * // A grayscale integer value and an alpha value.
+ * background(51, 0.4);
+ * describe('A canvas with a transparent gray background.');
+ *
+ *
+ *
+ *
+ *
+ * // R, G & B integer values.
+ * background(255, 204, 0);
+ * describe('A canvas with a yellow background.');
+ *
+ *
+ *
+ *
+ *
+ * // H, S & B integer values.
+ * colorMode(HSB);
+ * background(255, 204, 100);
+ * describe('A canvas with a royal blue background.');
+ *
+ *
+ *
+ *
+ *
+ * // A CSS named color.
+ * background('red');
+ * describe('A canvas with a red background.');
+ *
+ *
+ *
+ *
+ *
+ * // Three-digit hex RGB notation.
+ * background('#fae');
+ * describe('A canvas with a pink background.');
+ *
+ *
+ *
+ *
+ *
+ * // Six-digit hex RGB notation.
+ * background('#222222');
+ * describe('A canvas with a black background.');
+ *
+ *
+ *
+ *
+ *
+ * // Integer RGB notation.
+ * background('rgb(0,255,0)');
+ * describe('A canvas with a bright green background.');
+ *
+ *
+ *
+ *
+ *
+ * // Integer RGBA notation.
+ * background('rgba(0,255,0, 0.25)');
+ * describe('A canvas with a transparent green background.');
+ *
+ *
+ *
+ *
+ *
+ * // Percentage RGB notation.
+ * background('rgb(100%,0%,10%)');
+ * describe('A canvas with a red background.');
+ *
+ *
+ *
+ *
+ *
+ * // Percentage RGBA notation.
+ * background('rgba(100%,0%,100%,0.5)');
+ * describe('A canvas with a transparent purple background.');
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ * rgb() or rgba(), percentage rgb() or rgba(),
+ * 3-digit hex, 6-digit hex.
+ * @param {Number} [a] opacity of the background relative to current
+ * color range (default is 0-255).
+ * @chainable
+ */
+ /**
+ * @method background
+ * @param {Number} gray specifies a value between white and black.
+ * @param {Number} [a]
+ * @chainable
+ */
+ /**
+ * @method background
+ * @param {Number} v1 red value if color mode is RGB, or hue value if color mode is HSB.
+ * @param {Number} v2 green value if color mode is RGB, or saturation value if color mode is HSB.
+ * @param {Number} v3 blue value if color mode is RGB, or brightness value if color mode is HSB.
+ * @param {Number} [a]
+ * @chainable
+ */
+ /**
+ * @method background
+ * @param {Number[]} values an array containing the red, green, blue
+ * and alpha components of the color.
+ * @chainable
+ */
+ /**
+ * @method background
+ * @param {p5.Image} image image created with loadImage()
+ * or createImage(),
+ * to set as background.
+ * (must be same size as the sketch window).
+ * @param {Number} [a]
+ * @chainable
+ */
+ _main.default.prototype.background = function () {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).background.apply(_this$_renderer, arguments);
+ return this;
+ };
+ /**
+ * Clears the pixels on the canvas. This function makes every pixel 100%
+ * transparent. Calling `clear()` doesn't clear objects created by `createX()`
+ * functions such as createGraphics(),
+ * createVideo(), and
+ * createImg(). These objects will remain
+ * unchanged after calling clear() and can be redrawn.
+ *
+ * In WebGL mode, this function can clear the screen to a specific color. It
+ * interprets four numeric parameters as normalized RGBA color values. It also
+ * clears the depth buffer. If you are not using the WebGL renderer, these
+ * parameters will have no effect.
+ *
+ * @method clear
+ * @chainable
+ * @example
+ *
+ * // A p5.Color object.
+ * let c = color(0, 0, 255);
+ * background(c);
+ * describe('A canvas with a blue background.');
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * circle(mouseX, mouseY, 20);
+ * describe('A white circle is drawn at the mouse x- and y-coordinates.');
+ * }
+ *
+ * function mousePressed() {
+ * clear();
+ * background(128);
+ * describe('The canvas is cleared when the mouse is clicked.');
+ * }
+ *
+ *
+ *
+ *
+ * @param {Number} r normalized red value.
+ * @param {Number} g normalized green value.
+ * @param {Number} b normalized blue value.
+ * @param {Number} a normalized alpha value.
+ */
+ _main.default.prototype.clear = function () {
+ var _r = (arguments.length <= 0 ? undefined : arguments[0]) || 0;
+ var _g = (arguments.length <= 1 ? undefined : arguments[1]) || 0;
+ var _b = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ var _a = (arguments.length <= 3 ? undefined : arguments[3]) || 0;
+ this._renderer.clear(_r, _g, _b, _a);
+ return this;
+ };
+ /**
+ * Changes the way p5.js interprets color data. By default, the numeric
+ * parameters for fill(),
+ * stroke(),
+ * background(), and
+ * color() are defined by values between 0 and 255
+ * using the RGB color model. This is equivalent to calling
+ * `colorMode(RGB, 255)`. Pure red is `color(255, 0, 0)` in this model.
+ *
+ * Calling `colorMode(RGB, 100)` sets colors to be interpreted as RGB color
+ * values between 0 and 100. Pure red is `color(100, 0, 0)` in this model.
+ *
+ * Calling `colorMode(HSB)` or `colorMode(HSL)` changes to HSB or HSL system
+ * instead of RGB.
+ *
+ * p5.Color objects remember the mode that they were
+ * created in. Changing modes doesn't affect their appearance.
+ *
+ * @method colorMode
+ * @param {Constant} mode either RGB, HSB or HSL, corresponding to
+ * Red/Green/Blue and Hue/Saturation/Brightness
+ * (or Lightness).
+ * @param {Number} [max] range for all values.
+ * @chainable
+ *
+ * @example
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ *
+ * pg = createGraphics(60, 60);
+ * pg.background(200);
+ * pg.noStroke();
+ * pg.circle(pg.width / 2, pg.height / 2, 15);
+ * image(pg, 20, 20);
+ * describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');
+ * }
+ *
+ * function mousePressed() {
+ * clear();
+ * image(pg, 20, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * noStroke();
+ * colorMode(RGB, 100);
+ * for (let i = 0; i < 100; i += 1) {
+ * for (let j = 0; j < 100; j += 1) {
+ * stroke(i, j, 0);
+ * point(i, j);
+ * }
+ * }
+ * describe(
+ * 'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
+ * );
+ *
+ *
+ *
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 100);
+ * for (let i = 0; i < 100; i++) {
+ * for (let j = 0; j < 100; j++) {
+ * stroke(i, j, 100);
+ * point(i, j);
+ * }
+ * }
+ * describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');
+ *
+ *
+ *
+ *
+ *
+ * colorMode(RGB, 255);
+ * let myColor = color(180, 175, 230);
+ * background(myColor);
+ * colorMode(RGB, 1);
+ * let redValue = red(myColor);
+ * let greenValue = green(myColor);
+ * let blueValue = blue(myColor);
+ * text(`Red: ${redValue}`, 10, 10, 80, 80);
+ * text(`Green: ${greenValue}`, 10, 40, 80, 80);
+ * text(`Blue: ${blueValue}`, 10, 70, 80, 80);
+ * describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @method colorMode
+ * @param {Constant} mode
+ * @param {Number} max1 range for the red or hue depending on the
+ * current color mode.
+ * @param {Number} max2 range for the green or saturation depending
+ * on the current color mode.
+ * @param {Number} max3 range for the blue or brightness/lightness
+ * depending on the current color mode.
+ * @param {Number} [maxA] range for the alpha.
+ * @chainable
+ */
+ _main.default.prototype.colorMode = function (mode, max1, max2, max3, maxA) {
+ _main.default._validateParameters('colorMode', arguments);
+ if (mode === constants.RGB || mode === constants.HSB || mode === constants.HSL) {
+ // Set color mode.
+ this._colorMode = mode;
+ // Set color maxes.
+ var maxes = this._colorMaxes[mode];
+ if (arguments.length === 2) {
+ maxes[0] = max1; // Red
+ maxes[1] = max1; // Green
+ maxes[2] = max1; // Blue
+ maxes[3] = max1; // Alpha
+ } else if (arguments.length === 4) {
+ maxes[0] = max1; // Red
+ maxes[1] = max2; // Green
+ maxes[2] = max3; // Blue
+ } else if (arguments.length === 5) {
+ maxes[0] = max1; // Red
+ maxes[1] = max2; // Green
+ maxes[2] = max3; // Blue
+ maxes[3] = maxA; // Alpha
+ }
+ }
+ return this;
+ };
+ /**
+ * Sets the color used to fill shapes. Calling `fill(255, 165, 0)` or
+ * `fill('orange')` means all shapes drawn after the fill command will be
+ * filled with the color orange.
+ *
+ * The version of `fill()` with one parameter interprets the value one of
+ * three ways. If the parameter is a number, it's interpreted as a grayscale
+ * value. If the parameter is a string, it's interpreted as a CSS color
+ * string. A p5.Color object can also be provided to
+ * set the fill color.
+ *
+ * The version of `fill()` with three parameters interprets them as RGB, HSB,
+ * or HSL colors, depending on the current
+ * colorMode(). The default color space is RGB,
+ * with each value in the range from 0 to 255.
+ *
+ * @method fill
+ * @param {Number} v1 red value if color mode is RGB or hue value if color mode is HSB.
+ * @param {Number} v2 green value if color mode is RGB or saturation value if color mode is HSB.
+ * @param {Number} v3 blue value if color mode is RGB or brightness value if color mode is HSB.
+ * @param {Number} [alpha]
+ * @chainable
+ * @example
+ *
+ * noFill();
+ * colorMode(RGB, 255, 255, 255, 1);
+ * background(255);
+ * strokeWeight(4);
+ * stroke(255, 0, 10, 0.3);
+ * circle(40, 40, 50);
+ * circle(50, 60, 50);
+ * describe('Two overlapping translucent pink circle outlines.');
+ *
+ *
+ *
+ *
+ *
+ * // Grayscale integer value.
+ * fill(51);
+ * square(20, 20, 60);
+ * describe('A dark charcoal gray square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // R, G & B integer values.
+ * fill(255, 204, 0);
+ * square(20, 20, 60);
+ * describe('A yellow square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // H, S & B integer values.
+ * colorMode(HSB);
+ * fill(255, 204, 100);
+ * square(20, 20, 60);
+ * describe('A royal blue square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // A CSS named color.
+ * fill('red');
+ * square(20, 20, 60);
+ * describe('A red square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Three-digit hex RGB notation.
+ * fill('#fae');
+ * square(20, 20, 60);
+ * describe('A pink square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Six-digit hex RGB notation.
+ * fill('#A251FA');
+ * square(20, 20, 60);
+ * describe('A purple square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Integer RGB notation.
+ * fill('rgb(0,255,0)');
+ * square(20, 20, 60);
+ * describe('A bright green square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Integer RGBA notation.
+ * fill('rgba(0,255,0, 0.25)');
+ * square(20, 20, 60);
+ * describe('A soft green rectange with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Percentage RGB notation.
+ * fill('rgb(100%,0%,10%)');
+ * square(20, 20, 60);
+ * describe('A red square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Percentage RGBA notation.
+ * fill('rgba(100%,0%,100%,0.5)');
+ * square(20, 20, 60);
+ * describe('A dark fuchsia square with a black outline.');
+ *
+ *
+ *
+ */
+ /**
+ * @method fill
+ * @param {String} value a color string.
+ * @chainable
+ */
+ /**
+ * @method fill
+ * @param {Number} gray a grayscale value.
+ * @param {Number} [alpha]
+ * @chainable
+ */
+ /**
+ * @method fill
+ * @param {Number[]} values an array containing the red, green, blue &
+ * and alpha components of the color.
+ * @chainable
+ */
+ /**
+ * @method fill
+ * @param {p5.Color} color the fill color.
+ * @chainable
+ */
+ _main.default.prototype.fill = function () {
+ var _this$_renderer2;
+ this._renderer._setProperty('_fillSet', true);
+ this._renderer._setProperty('_doFill', true);
+ (_this$_renderer2 = this._renderer).fill.apply(_this$_renderer2, arguments);
+ return this;
+ };
+ /**
+ * Disables setting the interior color of shapes. This is the same as making
+ * the fill completely transparent. If both
+ * noStroke() and
+ * noFill() are called, nothing will be drawn to the
+ * screen.
+ *
+ * @method noFill
+ * @chainable
+ * @example
+ *
+ * // p5.Color object.
+ * let c = color(0, 0, 255);
+ * fill(c);
+ * square(20, 20, 60);
+ * describe('A blue square with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * square(32, 10, 35);
+ * noFill();
+ * square(32, 55, 35);
+ * describe('A white square on top of an empty square. Both squares have black outlines.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.noFill = function () {
+ this._renderer._setProperty('_doFill', false);
+ return this;
+ };
+ /**
+ * Disables drawing the stroke (outline). If both
+ * noStroke() and
+ * noFill() are called, nothing will be drawn to the
+ * screen.
+ *
+ * @method noStroke
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noFill();
+ * stroke(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(45, 45, 45);
+ * describe('A purple cube wireframe spinning on a black canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * noStroke();
+ * square(20, 20, 60);
+ * describe('A white square with no outline.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.noStroke = function () {
+ this._renderer._setProperty('_doStroke', false);
+ return this;
+ };
+ /**
+ * Sets the color used to draw lines and borders around shapes. Calling
+ * `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn after
+ * the `stroke()` command will be filled with the color orange. The way these
+ * parameters are interpreted may be changed with the
+ * colorMode() function.
+ *
+ * The version of `stroke()` with one parameter interprets the value one of
+ * three ways. If the parameter is a number, it's interpreted as a grayscale
+ * value. If the parameter is a string, it's interpreted as a CSS color
+ * string. A p5.Color object can also be provided to
+ * set the stroke color.
+ *
+ * The version of `stroke()` with two parameters interprets the first one as a
+ * grayscale value. The second parameter sets the alpha (transparency) value.
+ *
+ * The version of `stroke()` with three parameters interprets them as RGB, HSB,
+ * or HSL colors, depending on the current `colorMode()`.
+ *
+ * The version of `stroke()` with four parameters interprets them as RGBA, HSBA,
+ * or HSLA colors, depending on the current `colorMode()`. The last parameter
+ * sets the alpha (transparency) value.
+ *
+ * @method stroke
+ * @param {Number} v1 red value if color mode is RGB or hue value if color mode is HSB.
+ * @param {Number} v2 green value if color mode is RGB or saturation value if color mode is HSB.
+ * @param {Number} v3 blue value if color mode is RGB or brightness value if color mode is HSB.
+ * @param {Number} [alpha]
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * fill(240, 150, 150);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(45, 45, 45);
+ * describe('A pink cube with no edge outlines spinning on a black canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Grayscale integer value.
+ * strokeWeight(4);
+ * stroke(51);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a dark charcoal gray outline.');
+ *
+ *
+ *
+ *
+ *
+ * // R, G & B integer values.
+ * stroke(255, 204, 0);
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a yellow outline.');
+ *
+ *
+ *
+ *
+ *
+ * // H, S & B integer values.
+ * colorMode(HSB);
+ * strokeWeight(4);
+ * stroke(255, 204, 100);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a royal blue outline.');
+ *
+ *
+ *
+ *
+ *
+ * // A CSS named color.
+ * stroke('red');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a red outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Three-digit hex RGB notation.
+ * stroke('#fae');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a pink outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Six-digit hex RGB notation.
+ * stroke('#222222');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a black outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Integer RGB notation.
+ * stroke('rgb(0,255,0)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A whiite rectangle with a bright green outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Integer RGBA notation.
+ * stroke('rgba(0,255,0,0.25)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a soft green outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Percentage RGB notation.
+ * stroke('rgb(100%,0%,10%)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a red outline.');
+ *
+ *
+ *
+ *
+ *
+ * // Percentage RGBA notation.
+ * stroke('rgba(100%,0%,100%,0.5)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a dark fuchsia outline.');
+ *
+ *
+ *
+ */
+ /**
+ * @method stroke
+ * @param {String} value a color string.
+ * @chainable
+ */
+ /**
+ * @method stroke
+ * @param {Number} gray a grayscale value.
+ * @param {Number} [alpha]
+ * @chainable
+ */
+ /**
+ * @method stroke
+ * @param {Number[]} values an array containing the red, green, blue,
+ * and alpha components of the color.
+ * @chainable
+ */
+ /**
+ * @method stroke
+ * @param {p5.Color} color the stroke color.
+ * @chainable
+ */
+ _main.default.prototype.stroke = function () {
+ var _this$_renderer3;
+ this._renderer._setProperty('_strokeSet', true);
+ this._renderer._setProperty('_doStroke', true);
+ (_this$_renderer3 = this._renderer).stroke.apply(_this$_renderer3, arguments);
+ return this;
+ };
+ /**
+ * All drawing that follows erase() will subtract
+ * from the canvas, revealing the web page underneath. The erased areas will
+ * become transparent, allowing the content behind the canvas to show through.
+ * The fill(), stroke(), and
+ * blendMode() have no effect once `erase()` is
+ * called.
+ *
+ * The `erase()` function has two optional parameters. The first parameter
+ * sets the strength of erasing by the shape's interior. A value of 0 means
+ * that no erasing will occur. A value of 255 means that the shape's interior
+ * will fully erase the content underneath. The default value is 255
+ * (full strength).
+ *
+ * The second parameter sets the strength of erasing by the shape's edge. A
+ * value of 0 means that no erasing will occur. A value of 255 means that the
+ * shape's edge will fully erase the content underneath. The default value is
+ * 255 (full strength).
+ *
+ * To cancel the erasing effect, use the noErase()
+ * function.
+ *
+ * `erase()` has no effect on drawing done with the
+ * image() and
+ * background() functions.
+ *
+ * @method erase
+ * @param {Number} [strengthFill] a number (0-255) for the strength of erasing under a shape's interior.
+ * Defaults to 255, which is full strength.
+ * @param {Number} [strengthStroke] a number (0-255) for the strength of erasing under a shape's edge.
+ * Defaults to 255, which is full strength.
+ *
+ * @chainable
+ * @example
+ *
+ * // p5.Color object.
+ * stroke(color(0, 0, 255));
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ * describe('A white rectangle with a blue outline.');
+ *
+ *
+ *
+ *
+ *
+ * background(100, 100, 250);
+ * fill(250, 100, 100);
+ * square(20, 20, 60);
+ * erase();
+ * circle(25, 30, 30);
+ * noErase();
+ * describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a white hole.');
+ *
+ *
+ *
+ *
+ *
+ * let p = createP('I am a DOM element');
+ * p.style('font-size', '12px');
+ * p.style('width', '65px');
+ * p.style('text-align', 'center');
+ * p.position(18, 26);
+ *
+ * background(100, 170, 210);
+ * erase(200, 100);
+ * circle(50, 50, 77);
+ * noErase();
+ * describe('A blue canvas with a circular hole in the center that reveals the message "I am a DOM element".');
+ *
+ *
+ *
+ */
+ _main.default.prototype.erase = function () {
+ var opacityFill = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 255;
+ var opacityStroke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 255;
+ this._renderer.erase(opacityFill, opacityStroke);
+ return this;
+ };
+ /**
+ * Ends erasing that was started with erase().
+ * The fill(), stroke(), and
+ * blendMode() settings will return to what they
+ * were prior to calling erase().
+ *
+ * @method noErase
+ * @chainable
+ * @example
+ *
+ * background(150, 250, 150);
+ * fill(100, 100, 250);
+ * square(20, 20, 60);
+ * strokeWeight(5);
+ * erase(150, 255);
+ * triangle(50, 10, 70, 50, 90, 10);
+ * noErase();
+ * describe('A mint green canvas with a purple square in the center. A triangle in the top-right corner partially erases its interior and a fully erases its outline.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.noErase = function () {
+ this._renderer.noErase();
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ './p5.Color': 284,
+ 'core-js/modules/es.array.fill': 172,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 286: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.QUADRATIC = exports.LINEAR = exports._CTX_MIDDLE = exports._DEFAULT_LEADMULT = exports._DEFAULT_TEXT_FILL = exports.WORD = exports.CHAR = exports.BOLDITALIC = exports.BOLD = exports.ITALIC = exports.NORMAL = exports.BLUR = exports.ERODE = exports.DILATE = exports.POSTERIZE = exports.INVERT = exports.OPAQUE = exports.GRAY = exports.THRESHOLD = exports.BURN = exports.DODGE = exports.SOFT_LIGHT = exports.HARD_LIGHT = exports.OVERLAY = exports.REPLACE = exports.SCREEN = exports.MULTIPLY = exports.EXCLUSION = exports.SUBTRACT = exports.DIFFERENCE = exports.LIGHTEST = exports.DARKEST = exports.ADD = exports.REMOVE = exports.BLEND = exports.UP_ARROW = exports.TAB = exports.SHIFT = exports.RIGHT_ARROW = exports.RETURN = exports.OPTION = exports.LEFT_ARROW = exports.ESCAPE = exports.ENTER = exports.DOWN_ARROW = exports.DELETE = exports.CONTROL = exports.BACKSPACE = exports.ALT = exports.AUTO = exports.HSL = exports.HSB = exports.RGB = exports.MITER = exports.BEVEL = exports.ROUND = exports.SQUARE = exports.PROJECT = exports.PIE = exports.CHORD = exports.OPEN = exports.CLOSE = exports.TESS = exports.QUAD_STRIP = exports.QUADS = exports.TRIANGLE_STRIP = exports.TRIANGLE_FAN = exports.TRIANGLES = exports.LINE_LOOP = exports.LINE_STRIP = exports.LINES = exports.POINTS = exports.BASELINE = exports.BOTTOM = exports.TOP = exports.CENTER = exports.LEFT = exports.RIGHT = exports.RADIUS = exports.CORNERS = exports.CORNER = exports.RAD_TO_DEG = exports.DEG_TO_RAD = exports.RADIANS = exports.DEGREES = exports.TWO_PI = exports.TAU = exports.QUARTER_PI = exports.PI = exports.HALF_PI = exports.WAIT = exports.TEXT = exports.MOVE = exports.HAND = exports.CROSS = exports.ARROW = exports.WEBGL2 = exports.WEBGL = exports.P2D = exports.VERSION = void 0;
+ exports.RGBA = exports.HALF_FLOAT = exports.FLOAT = exports.UNSIGNED_INT = exports.UNSIGNED_BYTE = exports.COVER = exports.CONTAIN = exports.FALLBACK = exports.LABEL = exports.AXES = exports.GRID = exports._DEFAULT_FILL = exports._DEFAULT_STROKE = exports.PORTRAIT = exports.LANDSCAPE = exports.MIRROR = exports.CLAMP = exports.REPEAT = exports.NEAREST = exports.IMAGE = exports.IMMEDIATE = exports.TEXTURE = exports.FILL = exports.STROKE = exports.CURVE = exports.BEZIER = void 0;
+ /**
+ * @module Constants
+ * @submodule Constants
+ * @for p5
+ */
+ var _PI = Math.PI;
+ /**
+ * Version of this p5.js.
+ * @property {String} VERSION
+ * @final
+ */
+ var VERSION = '1.8.0';
+ // GRAPHICS RENDERER
+ /**
+ * The default, two-dimensional renderer.
+ * @property {String} P2D
+ * @final
+ */
+ exports.VERSION = VERSION;
+ var P2D = 'p2d';
+ /**
+ * One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.
+ *
+ * `WEBGL` differs from the default `P2D` renderer in the following ways:
+ *
+ * - **Coordinate System** - When drawing in `WEBGL` mode, the origin point (0,0,0) is located at the center of the screen, not the top-left corner. See the learn page about coordinates and transformations.
+ * - **3D Shapes** - `WEBGL` mode can be used to draw 3-dimensional shapes like box(), sphere(), cone(), and more. See the learn page about custom geometry to make more complex objects.
+ * - **Shape Detail** - When drawing in `WEBGL` mode, you can specify how smooth curves should be drawn by using a `detail` parameter. See the wiki section about shapes for a more information and an example.
+ * - **Textures** - A texture is like a skin that wraps onto a shape. See the wiki section about textures for examples of mapping images onto surfaces with textures.
+ * - **Materials and Lighting** - `WEBGL` offers different types of lights like ambientLight() to place around a scene. Materials like specularMaterial() reflect the lighting to convey shape and depth. See the learn page for styling and appearance to experiment with different combinations.
+ * - **Camera** - The viewport of a `WEBGL` sketch can be adjusted by changing camera attributes. See the learn page section about cameras for an explanation of camera controls.
+ * - **Text** - `WEBGL` requires opentype/truetype font files to be preloaded using loadFont(). See the wiki section about text for details, along with a workaround.
+ * - **Shaders** - Shaders are hardware accelerated programs that can be used for a variety of effects and graphics. See the introduction to shaders to get started with shaders in p5.js.
+ * - **Graphics Acceleration** - `WEBGL` mode uses the graphics card instead of the CPU, so it may help boost the performance of your sketch (example: drawing more shapes on the screen at once).
+ *
+ * To learn more about WEBGL mode, check out all the interactive WEBGL tutorials in the "Learn" section of this website, or read the wiki article "Getting started with WebGL in p5".
+ *
+ * @property {String} WEBGL
+ * @final
+ */
+ exports.P2D = P2D;
+ var WEBGL = 'webgl';
+ /**
+ * One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
+ * which can be used to determine what capabilities the rendering environment
+ * has.
+ * @property {String} WEBGL2
+ * @final
+ */
+ exports.WEBGL = WEBGL;
+ var WEBGL2 = 'webgl2';
+ // ENVIRONMENT
+ /**
+ * @property {String} ARROW
+ * @final
+ */
+ exports.WEBGL2 = WEBGL2;
+ var ARROW = 'default';
+ /**
+ * @property {String} CROSS
+ * @final
+ */
+ exports.ARROW = ARROW;
+ var CROSS = 'crosshair';
+ /**
+ * @property {String} HAND
+ * @final
+ */
+ exports.CROSS = CROSS;
+ var HAND = 'pointer';
+ /**
+ * @property {String} MOVE
+ * @final
+ */
+ exports.HAND = HAND;
+ var MOVE = 'move';
+ /**
+ * @property {String} TEXT
+ * @final
+ */
+ exports.MOVE = MOVE;
+ var TEXT = 'text';
+ /**
+ * @property {String} WAIT
+ * @final
+ */
+ exports.TEXT = TEXT;
+ var WAIT = 'wait';
+ // TRIGONOMETRY
+ /**
+ * HALF_PI is a mathematical constant with the value
+ * 1.57079632679489661923. It is half the ratio of the
+ * circumference of a circle to its diameter. It is useful in
+ * combination with the trigonometric functions sin() and cos().
+ *
+ * @property {Number} HALF_PI
+ * @final
+ *
+ * @example
+ *
+ * background(235, 145, 15);
+ * noStroke();
+ * fill(30, 45, 220);
+ * rect(30, 10, 10, 80);
+ * erase();
+ * circle(50, 50, 60);
+ * noErase();
+ * rect(70, 10, 10, 80);
+ * describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');
+ *
+ *
+ * arc(50, 50, 80, 80, 0, HALF_PI);
+ *
+ * arc(50, 50, 80, 80, 0, PI);
+ *
+ * arc(50, 50, 80, 80, 0, QUARTER_PI);
+ *
+ * arc(50, 50, 80, 80, 0, TAU);
+ *
+ * arc(50, 50, 80, 80, 0, TWO_PI);
+ *
+ * function setup() {
+ * angleMode(DEGREES);
+ * }
+ *
+ * function setup() {
+ * angleMode(RADIANS);
+ * }
+ *
+ * let x = 10;
+ * print('The value of x is ' + x);
+ * // prints "The value of x is 10"
+ *
+ * function setup() {
+ * frameRate(30);
+ * textSize(30);
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(frameCount, width / 2, height / 2);
+ * }
+ *
+ * let rectX = 0;
+ * let fr = 30; //starting FPS
+ * let clr;
+ *
+ * function setup() {
+ * background(200);
+ * frameRate(fr); // Attempt to refresh at starting FPS
+ * clr = color(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime
+ *
+ * if (rectX >= width) {
+ * // If you go off screen.
+ * if (fr === 30) {
+ * clr = color(0, 0, 255);
+ * fr = 10;
+ * frameRate(fr); // make frameRate 10 FPS
+ * } else {
+ * clr = color(255, 0, 0);
+ * fr = 30;
+ * frameRate(fr); // make frameRate 30 FPS
+ * }
+ * rectX = 0;
+ * }
+ * fill(clr);
+ * rect(rectX, 40, 20, 20);
+ * }
+ *
+ * // To demonstrate, put two windows side by side.
+ * // Click on the window that the p5 sketch isn't in!
+ * function draw() {
+ * background(200);
+ * noStroke();
+ * fill(0, 200, 0);
+ * ellipse(25, 25, 50, 50);
+ *
+ * if (!focused) {
+ // or "if (focused === false)"
+ * stroke(200, 0, 0);
+ * line(0, 0, 100, 100);
+ * line(100, 0, 0, 100);
+ * }
+ * }
+ *
+ * // Move the mouse across the quadrants
+ * // to see the cursor change
+ * function draw() {
+ * line(width / 2, 0, width / 2, height);
+ * line(0, height / 2, width, height / 2);
+ * if (mouseX < 50 && mouseY < 50) {
+ * cursor(CROSS);
+ * } else if (mouseX > 50 && mouseY < 50) {
+ * cursor('progress');
+ * } else if (mouseX > 50 && mouseY > 50) {
+ * cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+ * } else {
+ * cursor('grab');
+ * }
+ * }
+ *
+ * let rectX = 0;
+ * let fr = 30; //starting FPS
+ * let clr;
+ *
+ * function setup() {
+ * background(200);
+ * frameRate(fr); // Attempt to refresh at starting FPS
+ * clr = color(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rectX += 1; // Move Rectangle
+ *
+ * if (rectX >= width) {
+ * // If you go off screen.
+ * if (fr === 30) {
+ * clr = color(0, 0, 255);
+ * fr = 10;
+ * frameRate(fr); // make frameRate 10 FPS
+ * } else {
+ * clr = color(255, 0, 0);
+ * fr = 30;
+ * frameRate(fr); // make frameRate 30 FPS
+ * }
+ * rectX = 0;
+ * }
+ * fill(clr);
+ * rect(rectX, 40, 20, 20);
+ * }
+ *
+ * function draw() {
+ * frameRate(20);
+ * text(getTargetFrameRate(), width / 2, height / 2);
+ * }
+ *
+ * function setup() {
+ * noCursor();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * ellipse(mouseX, mouseY, 10, 10);
+ * }
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/inconsolata.otf');
+ * }
+ * function setup() {
+ * createCanvas(100, 50, WEBGL);
+ * // Uncomment the following line to see the behavior change in WebGL 1:
+ * // setAttributes({ version: 1 })
+ *
+ * const graphic = createGraphics(30, 30);
+ * graphic.background(255);
+ * graphic.noStroke();
+ * graphic.fill(200);
+ * graphic.rect(0, 0, graphic.width/2, graphic.height/2);
+ * graphic.rect(
+ * graphic.width/2, graphic.height/2,
+ * graphic.width/2, graphic.height/2
+ * );
+ *
+ * noStroke();
+ * translate(-width/2, -height/2);
+ * textureWrap(REPEAT);
+ * texture(graphic);
+ * beginShape(QUADS);
+ * vertex(0, 0, 0, 0, 0);
+ * vertex(width, 0, 0, width, 0);
+ * vertex(width, height, 0, width, height);
+ * vertex(0, height, 0, 0, height);
+ * endShape();
+ *
+ * textFont(myFont);
+ * textAlign(CENTER, CENTER);
+ * textSize(30);
+ * fill(0);
+ * text('WebGL' + (webglVersion === WEBGL2 ? 2 : 1), 0, 0, width, height);
+ * }
+ *
+ * createCanvas(displayWidth, displayHeight);
+ *
+ * createCanvas(displayWidth, displayHeight);
+ *
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * function draw() {
+ * background(0, 100, 200);
+ * }
+ *
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ */
+ _main.default.prototype.fullscreen = function (val) {
+ _main.default._validateParameters('fullscreen', arguments);
+ // no arguments, return fullscreen or not
+ if (typeof val === 'undefined') {
+ return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+ } else {
+ // otherwise set to fullscreen or not
+ if (val) {
+ launchFullscreen(document.documentElement);
+ } else {
+ exitFullscreen();
+ }
+ }
+ };
+ /**
+ * Sets the pixel scaling for high pixel density displays. By default
+ * pixel density is set to match display density, call pixelDensity(1)
+ * to turn this off. Calling pixelDensity() with no arguments returns
+ * the current pixel density of the sketch.
+ *
+ * @method pixelDensity
+ * @param {Number} val whether or how much the sketch should scale
+ * @chainable
+ * @example
+ *
+ * // Clicking in the box toggles fullscreen on and off.
+ * function setup() {
+ * background(200);
+ * }
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * let fs = fullscreen();
+ * fullscreen(!fs);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * pixelDensity(1);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * fuzzy 50×50 white ellipse with black outline in center of canvas.
+ * sharp 50×50 white ellipse with black outline in center of canvas.
+ */
+ /**
+ * @method pixelDensity
+ * @returns {Number} current pixel density of the sketch
+ */
+ _main.default.prototype.pixelDensity = function (val) {
+ _main.default._validateParameters('pixelDensity', arguments);
+ var returnValue;
+ if (typeof val === 'number') {
+ if (val !== this._pixelDensity) {
+ this._pixelDensity = val;
+ }
+ returnValue = this;
+ this.resizeCanvas(this.width, this.height, true); // as a side effect, it will clear the canvas
+ } else {
+ returnValue = this._pixelDensity;
+ }
+ return returnValue;
+ };
+ /**
+ * Returns the pixel density of the current display the sketch is running on.
+ *
+ * @method displayDensity
+ * @returns {Number} current pixel density of the display
+ * @example
+ *
+ * function setup() {
+ * pixelDensity(3.0);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * 50×50 white ellipse with black outline in center of canvas.
+ */
+ _main.default.prototype.displayDensity = function () {
+ return window.devicePixelRatio;
+ };
+ function launchFullscreen(element) {
+ var enabled = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
+ if (!enabled) {
+ throw new Error('Fullscreen not enabled in this browser.');
+ }
+ if (element.requestFullscreen) {
+ element.requestFullscreen();
+ } else if (element.mozRequestFullScreen) {
+ element.mozRequestFullScreen();
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen();
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen();
+ }
+ }
+ function exitFullscreen() {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ }
+ } /**
+ * Gets the current URL. Note: when using the
+ * p5 Editor, this will return an empty object because the sketch
+ * is embedded in an iframe. It will work correctly if you view the
+ * sketch using the editor's present or share URLs.
+ * @method getURL
+ * @return {String} url
+ * @example
+ *
+ * function setup() {
+ * let density = displayDensity();
+ * pixelDensity(density);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * current url (http://p5js.org/reference/#/p5/getURL) moves right to left.
+ */
+
+ _main.default.prototype.getURL = function () {
+ return location.href;
+ };
+ /**
+ * Gets the current URL path as an array. Note: when using the
+ * p5 Editor, this will return an empty object because the sketch
+ * is embedded in an iframe. It will work correctly if you view the
+ * sketch using the editor's present or share URLs.
+ * @method getURLPath
+ * @return {String[]} path components
+ * @example
+ *
+ * let url;
+ * let x = 100;
+ *
+ * function setup() {
+ * fill(0);
+ * noStroke();
+ * url = getURL();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(url, x, height / 2);
+ * x--;
+ * }
+ *
+ *
+ * function setup() {
+ * let urlPath = getURLPath();
+ * for (let i = 0; i < urlPath.length; i++) {
+ * text(urlPath[i], 10, i * 20 + 20);
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * This example does not render anything.
+ */
+ _main.default.prototype.getURLParams = function () {
+ var re = /[?&]([^&=]+)(?:[&=])([^&=]+)/gim;
+ var m;
+ var v = {
+ };
+ while ((m = re.exec(location.search)) != null) {
+ if (m.index === re.lastIndex) {
+ re.lastIndex++;
+ }
+ v[m[1]] = m[2];
+ }
+ return v;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ './constants': 286,
+ './main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.filter': 173,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.search': 215,
+ 'core-js/modules/es.string.split': 216,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 288: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ // This contains a data table used by ./fes_core.js/fesErrorMonitor().
+ //
+ // Note: Different browsers use different error strings for the same error.
+ // Extracting info from the browser error messages is easier and cleaner
+ // if we have a predefined lookup. This file serves as that lookup.
+ // Using this lookup we match the errors obtained from the browser, classify
+ // them into types and extract the required information.
+ // The FES can use the extracted info to generate a friendly error message
+ // for the matching error.
+ var strings = {
+ ReferenceError: [
+ {
+ msg: '{{}} is not defined',
+ type: 'NOTDEFINED',
+ browser: 'all'
+ },
+ {
+ msg: 'Can\'t find variable: {{}}',
+ type: 'NOTDEFINED',
+ browser: 'Safari'
+ },
+ {
+ msg: 'Cannot access \'{{.}}\' before initialization',
+ type: 'CANNOTACCESS',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'can\'t access lexical declaration \'{{.}}\' before initialization',
+ type: 'CANNOTACCESS',
+ browser: 'Firefox'
+ }
+ ],
+ SyntaxError: [
+ {
+ msg: 'illegal character',
+ type: 'INVALIDTOKEN',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Invalid character',
+ type: 'INVALIDTOKEN',
+ browser: 'Safari'
+ },
+ {
+ msg: 'Invalid or unexpected token',
+ type: 'INVALIDTOKEN',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'Unexpected token \'{{.}}\'',
+ type: 'UNEXPECTEDTOKEN',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'expected {{.}}, got \'{{.}}\'',
+ type: 'UNEXPECTEDTOKEN',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'Identifier \'{{.}}\' has already been declared',
+ type: 'REDECLAREDVARIABLE',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'redeclaration of {} {{.}}',
+ type: 'REDECLAREDVARIABLE',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Missing initializer in const declaration',
+ type: 'MISSINGINITIALIZER',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'missing = in const declaration',
+ type: 'MISSINGINITIALIZER',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Illegal return statement',
+ type: 'BADRETURNORYIELD',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'return not in function',
+ type: 'BADRETURNORYIELD',
+ browser: 'Firefox'
+ }
+ ],
+ TypeError: [
+ {
+ msg: '{{.}} is not a function',
+ type: 'NOTFUNC',
+ browser: 'all'
+ },
+ {
+ msg: 'Cannot read {{.}} null',
+ type: 'READNULL',
+ browser: 'Chrome'
+ },
+ {
+ msg: '{{.}} is null',
+ type: 'READNULL',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Cannot read {{.}} undefined',
+ type: 'READUDEFINED',
+ browser: 'Chrome'
+ },
+ {
+ msg: '{{.}} is undefined',
+ type: 'READUDEFINED',
+ browser: 'Firefox'
+ },
+ {
+ msg: 'Assignment to constant variable',
+ type: 'CONSTASSIGN',
+ browser: 'Chrome'
+ },
+ {
+ msg: 'invalid assignment to const \'{{.}}\'',
+ type: 'CONSTASSIGN',
+ browser: 'Firefox'
+ }
+ ]
+ };
+ var _default = strings;
+ exports.default = _default;
+ },
+ {
+ }
+ ],
+ 289: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-names');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.starts-with');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-names');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.starts-with');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var _internationalization = _dereq_('../internationalization');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _slicedToArray(arr, i) {
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+ }
+ function _nonIterableRest() {
+ throw new TypeError('Invalid attempt to destructure non-iterable instance');
+ }
+ function _iterableToArrayLimit(arr, i) {
+ if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === '[object Arguments]')) {
+ return;
+ }
+ var _arr = [
+ ];
+ var _n = true;
+ var _d = false;
+ var _e = undefined;
+ try {
+ for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+ _arr.push(_s.value);
+ if (i && _arr.length === i) break;
+ }
+ } catch (err) {
+ _d = true;
+ _e = err;
+ } finally {
+ try {
+ if (!_n && _i['return'] != null) _i['return']();
+ } finally {
+ if (_d) throw _e;
+ }
+ }
+ return _arr;
+ }
+ function _arrayWithHoles(arr) {
+ if (Array.isArray(arr)) return arr;
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @for p5
+ * @requires core
+ *
+ * This is the main file for the Friendly Error System (FES), containing
+ * the core as well as miscellaneous functionality of the FES. Here is a
+ * brief outline of the functions called in this system.
+ *
+ * The FES may be invoked by a call to either
+ * (1) _validateParameters, (2) _friendlyFileLoadError, (3) _friendlyError,
+ * (4) helpForMisusedAtTopLevelCode, or (5) _fesErrorMonitor.
+ *
+ * _validateParameters is located in validate_params.js along with other code
+ * used for parameter validation.
+ * _friendlyFileLoadError is located in file_errors.js along with other code
+ * used for dealing with file load errors.
+ * Apart from this, there's also a file stacktrace.js, which contains the code
+ * to parse the error stack, borrowed from:
+ * https://github.com/stacktracejs/stacktrace.js
+ *
+ * For more detailed information on the FES functions, including the call
+ * sequence of each function, please look at the FES Reference + Dev Notes:
+ * https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md
+ */
+ // p5.js blue, p5.js orange, auto dark green; fallback p5.js darkened magenta
+ // See testColors below for all the color codes and names
+
+ var typeColors = [
+ '#2D7BB6',
+ '#EE9900',
+ '#4DB200',
+ '#C83C00'
+ ];
+ var misusedAtTopLevelCode = null;
+ var defineMisusedAtTopLevelCode = null;
+ // the threshold for the maximum allowed levenshtein distance
+ // used in misspelling detection
+ var EDIT_DIST_THRESHOLD = 2;
+ // to enable or disable styling (color, font-size, etc. ) for fes messages
+ var ENABLE_FES_STYLING = false;
+ if (typeof IS_MINIFIED !== 'undefined') {
+ _main.default._friendlyError = _main.default._checkForUserDefinedFunctions = _main.default._fesErrorMonitor = function () {
+ };
+ } else {
+ var doFriendlyWelcome = false; // TEMP until we get it all working LM
+ var errorTable = _dereq_('./browser_errors').default;
+ // -- Borrowed from jQuery 1.11.3 --
+ var class2type = {
+ };
+ var _toString = class2type.toString;
+ var names = [
+ 'Boolean',
+ 'Number',
+ 'String',
+ 'Function',
+ 'Array',
+ 'Date',
+ 'RegExp',
+ 'Object',
+ 'Error'
+ ];
+ for (var n = 0; n < names.length; n++) {
+ class2type['[object '.concat(names[n], ']')] = names[n].toLowerCase();
+ }
+ var getType = function getType(obj) {
+ if (obj == null) {
+ return ''.concat(obj);
+ }
+ return _typeof(obj) === 'object' || typeof obj === 'function' ? class2type[_toString.call(obj)] || 'object' : _typeof(obj);
+ };
+ // -- End borrow --
+ // entry points into user-defined code
+ var entryPoints = [
+ 'setup',
+ 'draw',
+ 'preload',
+ 'deviceMoved',
+ 'deviceTurned',
+ 'deviceShaken',
+ 'doubleClicked',
+ 'mousePressed',
+ 'mouseReleased',
+ 'mouseMoved',
+ 'mouseDragged',
+ 'mouseClicked',
+ 'mouseWheel',
+ 'touchStarted',
+ 'touchMoved',
+ 'touchEnded',
+ 'keyPressed',
+ 'keyReleased',
+ 'keyTyped',
+ 'windowResized'
+ ];
+ var friendlyWelcome = function friendlyWelcome() {
+ // p5.js brand - magenta: #ED225D
+ //const astrixBgColor = 'transparent';
+ //const astrixTxtColor = '#ED225D';
+ //const welcomeBgColor = '#ED225D';
+ //const welcomeTextColor = 'white';
+ var welcomeMessage = (0, _internationalization.translator) ('fes.pre', {
+ message: (0, _internationalization.translator) ('fes.welcome')
+ });
+ console.log(' _ \n' + ' /\\| |/\\ \n' + ' \\ ` \' / \n' + ' / , . \\ \n' + ' \\/|_|\\/ ' + '\n\n' + welcomeMessage);
+ };
+ /**
+ * Takes a message and a p5 function func, and adds a link pointing to
+ * the reference documentation of func at the end of the message
+ *
+ * @method mapToReference
+ * @private
+ * @param {String} message the words to be said
+ * @param {String} [func] the name of function
+ *
+ * @returns {String}
+ */
+ var mapToReference = function mapToReference(message, func) {
+ var msgWithReference = '';
+ if (func == null || func.substring(0, 4) === 'load') {
+ msgWithReference = message;
+ } else {
+ var methodParts = func.split('.');
+ var referenceSection = methodParts.length > 1 ? ''.concat(methodParts[0], '.').concat(methodParts[1]) : 'p5';
+ var funcName = methodParts.length === 1 ? func : methodParts.slice(2).join('/');
+ //Whenever func having p5.[Class] is encountered, we need to have the error link as mentioned below else different link
+ funcName.startsWith('p5.') ? msgWithReference = ''.concat(message, ' (http://p5js.org/reference/#/').concat(referenceSection, '.').concat(funcName, ')') : msgWithReference = ''.concat(message, ' (http://p5js.org/reference/#/').concat(referenceSection, '/').concat(funcName, ')');
+ }
+ return msgWithReference;
+ };
+ /**
+ * Prints out a fancy, colorful message to the console log
+ * Attaches Friendly Errors prefix [fes.pre] to the message.
+ *
+ * @method _report
+ * @private
+ * @param {String} message Message to be printed
+ * @param {String} [func] Name of function
+ * @param {Number|String} [color] CSS color code
+ *
+ * @return console logs
+ */
+ _main.default._report = function (message, func, color) {
+ // if p5._fesLogger is set ( i.e we are running tests ), use that
+ // instead of console.log
+ var log = _main.default._fesLogger == null ? console.log.bind(console) : _main.default._fesLogger;
+ if (doFriendlyWelcome) {
+ friendlyWelcome();
+ doFriendlyWelcome = false;
+ }
+ if ('undefined' === getType(color)) {
+ color = '#B40033'; // dark magenta
+ } else if (getType(color) === 'number') {
+ // Type to color
+ color = typeColors[color];
+ } // Add a link to the reference docs of func at the end of the message
+
+ message = mapToReference(message, func);
+ var style = [
+ 'color: '.concat(color),
+ 'font-family: Arial',
+ 'font-size: larger'
+ ];
+ var prefixedMsg = (0, _internationalization.translator) ('fes.pre', {
+ message: message
+ });
+ if (ENABLE_FES_STYLING) {
+ log('%c' + prefixedMsg, style.join(';'));
+ } else {
+ log(prefixedMsg);
+ }
+ };
+ /**
+ * This is a generic method that can be called from anywhere in the p5
+ * library to alert users to a common error.
+ *
+ * @method _friendlyError
+ * @private
+ * @param {String} message Message to be printed
+ * @param {String} [func] Name of the function linked to error
+ * @param {Number|String} [color] CSS color code
+ */
+ _main.default._friendlyError = function (message, func, color) {
+ _main.default._report(message, func, color);
+ };
+ /**
+ * This is called internally if there is an error with autoplay. Generates
+ * and prints a friendly error message [fes.autoplay].
+ *
+ * @method _friendlyAutoplayError
+ * @private
+ */
+ _main.default._friendlyAutoplayError = function (src) {
+ var message = (0, _internationalization.translator) ('fes.autoplay', {
+ src: src,
+ url: 'https://developer.mozilla.org/docs/Web/Media/Autoplay_guide'
+ });
+ console.log((0, _internationalization.translator) ('fes.pre', {
+ message: message
+ }));
+ };
+ /**
+ * Measures dissimilarity between two strings by calculating
+ * the Levenshtein distance.
+ *
+ * If the "distance" between them is small enough, it is
+ * reasonable to think that one is the misspelled version of the other.
+ *
+ * Specifically, this uses the Wagner–Fischer algorithm.
+ * @method computeEditDistance
+ * @private
+ * @param {String} w1 the first word
+ * @param {String} w2 the second word
+ *
+ * @returns {Number} the "distance" between the two words, a smaller value
+ * indicates that the words are similar
+ */
+ var computeEditDistance = function computeEditDistance(w1, w2) {
+ var l1 = w1.length,
+ l2 = w2.length;
+ if (l1 === 0) return w2;
+ if (l2 === 0) return w1;
+ var prev = [
+ ];
+ var cur = [
+ ];
+ for (var j = 0; j < l2 + 1; j++) {
+ cur[j] = j;
+ }
+ prev = cur;
+ for (var i = 1; i < l1 + 1; i++) {
+ cur = [
+ ];
+ for (var _j = 0; _j < l2 + 1; _j++) {
+ if (_j === 0) {
+ cur[_j] = i;
+ } else {
+ var a1 = w1[i - 1],
+ a2 = w2[_j - 1];
+ var temp = 999999;
+ var cost = a1.toLowerCase() === a2.toLowerCase() ? 0 : 1;
+ temp = temp > cost + prev[_j - 1] ? cost + prev[_j - 1] : temp;
+ temp = temp > 1 + cur[_j - 1] ? 1 + cur[_j - 1] : temp;
+ temp = temp > 1 + prev[_j] ? 1 + prev[_j] : temp;
+ cur[_j] = temp;
+ }
+ }
+ prev = cur;
+ }
+ return cur[l2];
+ };
+ /**
+ * Checks capitalization for user defined functions.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.checkUserDefinedFns".
+ *
+ * @method checkForUserDefinedFunctions
+ * @private
+ * @param {*} context Current default context. Set to window in
+ * "global mode" and to a p5 instance in "instance mode"
+ */
+ var checkForUserDefinedFunctions = function checkForUserDefinedFunctions(context) {
+ if (_main.default.disableFriendlyErrors) return;
+ // if using instance mode, this function would be called with the current
+ // instance as context
+ var instanceMode = context instanceof _main.default;
+ context = instanceMode ? context : window;
+ var fnNames = entryPoints;
+ var fxns = {
+ };
+ // lowercasename -> actualName mapping
+ fnNames.forEach(function (symbol) {
+ fxns[symbol.toLowerCase()] = symbol;
+ });
+ for (var _i = 0, _Object$keys = Object.keys(context); _i < _Object$keys.length; _i++) {
+ var prop = _Object$keys[_i];
+ var lowercase = prop.toLowerCase();
+ // check if the lowercase property name has an entry in fxns, if the
+ // actual name with correct capitalization doesnt exist in context,
+ // and if the user-defined symbol is of the type function
+ if (fxns[lowercase] && !context[fxns[lowercase]] && typeof context[prop] === 'function') {
+ var msg = (0, _internationalization.translator) ('fes.checkUserDefinedFns', {
+ name: prop,
+ actualName: fxns[lowercase]
+ });
+ _main.default._friendlyError(msg, fxns[lowercase]);
+ }
+ }
+ };
+ /**
+ * Compares the symbol caught in the ReferenceError to everything in
+ * misusedAtTopLevel ( all public p5 properties ).
+ *
+ * Generates and prints a friendly error message using key: "fes.misspelling".
+ *
+ * @method handleMisspelling
+ * @private
+ * @param {String} errSym Symbol to whose spelling to check
+ * @param {Error} error ReferenceError object
+ *
+ * @returns {Boolean} tell whether error was likely due to typo
+ */
+ var handleMisspelling = function handleMisspelling(errSym, error) {
+ if (!misusedAtTopLevelCode) {
+ defineMisusedAtTopLevelCode();
+ }
+ var distanceMap = {
+ };
+ var min = 999999;
+ // compute the levenshtein distance for the symbol against all known
+ // public p5 properties. Find the property with the minimum distance
+ misusedAtTopLevelCode.forEach(function (symbol) {
+ var dist = computeEditDistance(errSym, symbol.name);
+ if (distanceMap[dist]) distanceMap[dist].push(symbol);
+ else distanceMap[dist] = [
+ symbol
+ ];
+ if (dist < min) min = dist;
+ });
+ // if the closest match has more "distance" than the max allowed threshold
+ if (min > Math.min(EDIT_DIST_THRESHOLD, errSym.length)) return false;
+ // Show a message only if the caught symbol and the matched property name
+ // differ in their name ( either letter difference or difference of case )
+ var matchedSymbols = distanceMap[min].filter(function (symbol) {
+ return symbol.name !== errSym;
+ });
+ if (matchedSymbols.length !== 0) {
+ var parsed = _main.default._getErrorStackParser().parse(error);
+ var locationObj;
+ if (parsed && parsed[0] && parsed[0].fileName && parsed[0].lineNumber && parsed[0].columnNumber) {
+ locationObj = {
+ location: ''.concat(parsed[0].fileName, ':').concat(parsed[0].lineNumber, ':').concat(parsed[0].columnNumber),
+ file: parsed[0].fileName.split('/').slice( - 1),
+ line: parsed[0].lineNumber
+ };
+ }
+ var msg;
+ if (matchedSymbols.length === 1) {
+ // To be used when there is only one closest match. The count parameter
+ // allows i18n to pick between the keys "fes.misspelling" and
+ // "fes.misspelling_plural"
+ msg = (0, _internationalization.translator) ('fes.misspelling', {
+ name: errSym,
+ actualName: matchedSymbols[0].name,
+ type: matchedSymbols[0].type,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : '',
+ count: matchedSymbols.length
+ });
+ } else {
+ // To be used when there are multiple closest matches. Gives each
+ // suggestion on its own line, the function name followed by a link to
+ // reference documentation
+ var suggestions = matchedSymbols.map(function (symbol) {
+ var message = '▶️ ' + symbol.name + (symbol.type === 'function' ? '()' : '');
+ return mapToReference(message, symbol.name);
+ }).join('\n');
+ msg = (0, _internationalization.translator) ('fes.misspelling', {
+ name: errSym,
+ suggestions: suggestions,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : '',
+ count: matchedSymbols.length
+ });
+ } // If there is only one closest match, tell _friendlyError to also add
+ // a link to the reference documentation. In case of multiple matches,
+ // this is already done in the suggestions variable, one link for each
+ // suggestion.
+
+ _main.default._friendlyError(msg, matchedSymbols.length === 1 ? matchedSymbols[0].name : undefined);
+ return true;
+ }
+ return false;
+ };
+ /**
+ * Prints a friendly stacktrace for user-written functions for "global" errors
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.globalErrors.stackTop", "fes.globalErrors.stackSubseq".
+ *
+ * @method printFriendlyStack
+ * @private
+ * @param {Array} friendlyStack
+ */
+ var printFriendlyStack = function printFriendlyStack(friendlyStack) {
+ var log = _main.default._fesLogger && typeof _main.default._fesLogger === 'function' ? _main.default._fesLogger : console.log.bind(console);
+ if (friendlyStack.length > 1) {
+ var stacktraceMsg = '';
+ friendlyStack.forEach(function (frame, idx) {
+ var location = ''.concat(frame.fileName, ':').concat(frame.lineNumber, ':').concat(frame.columnNumber);
+ var frameMsg,
+ translationObj = {
+ func: frame.functionName,
+ line: frame.lineNumber,
+ location: location,
+ file: frame.fileName.split('/').slice( - 1)
+ };
+ if (idx === 0) {
+ frameMsg = (0, _internationalization.translator) ('fes.globalErrors.stackTop', translationObj);
+ } else {
+ frameMsg = (0, _internationalization.translator) ('fes.globalErrors.stackSubseq', translationObj);
+ }
+ stacktraceMsg += frameMsg;
+ });
+ log(stacktraceMsg);
+ }
+ };
+ /**
+ * Takes a stacktrace array and filters out all frames that show internal p5
+ * details.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.wrongPreload", "fes.libraryError".
+ *
+ * The processed stack is used to find whether the error happened internally
+ * within the library, and if the error was due to a non-loadX() method
+ * being used in preload.
+ *
+ * "Internally" here means that the exact location of the error (the top of
+ * the stack) is a piece of code written in the p5.js library (which may or
+ * may not have been called from the user's sketch).
+ *
+ * @method processStack
+ * @private
+ * @param {Error} error
+ * @param {Array} stacktrace
+ *
+ * @returns {Array} An array with two elements, [isInternal, friendlyStack]
+ * isInternal: a boolean value indicating whether the error
+ * happened internally
+ * friendlyStack: the filtered (simplified) stacktrace
+ */
+ var processStack = function processStack(error, stacktrace) {
+ // cannot process a stacktrace that doesn't exist
+ if (!stacktrace) return [false,
+ null];
+ stacktrace.forEach(function (frame) {
+ frame.functionName = frame.functionName || '';
+ });
+ // isInternal - Did this error happen inside the library
+ var isInternal = false;
+ var p5FileName,
+ friendlyStack,
+ currentEntryPoint;
+ // Intentionally throw an error that we catch so that we can check the name
+ // of the current file. Any errors we see from this file, we treat as
+ // internal errors.
+ try {
+ throw new Error();
+ } catch (testError) {
+ var testStacktrace = _main.default._getErrorStackParser().parse(testError);
+ p5FileName = testStacktrace[0].fileName;
+ }
+ for (var i = stacktrace.length - 1; i >= 0; i--) {
+ var splitted = stacktrace[i].functionName.split('.');
+ if (entryPoints.includes(splitted[splitted.length - 1])) {
+ // remove everything below an entry point function (setup, draw, etc).
+ // (it's usually the internal initialization calls)
+ friendlyStack = stacktrace.slice(0, i + 1);
+ currentEntryPoint = splitted[splitted.length - 1];
+ // We call the error "internal" if the source of the error was a
+ // function from within the p5.js library file, but called from the
+ // user's code directly. We only need to check the topmost frame in
+ // the stack trace since any function internal to p5 should pass this
+ // check, not just public p5 functions.
+ if (stacktrace[0].fileName === p5FileName) {
+ isInternal = true;
+ break;
+ }
+ break;
+ }
+ } // in some cases ( errors in promises, callbacks, etc), no entry-point
+ // function may be found in the stacktrace. In that case just use the
+ // entire stacktrace for friendlyStack
+
+ if (!friendlyStack) friendlyStack = stacktrace;
+ if (isInternal) {
+ // the frameIndex property is added before the filter, so frameIndex
+ // corresponds to the index of a frame in the original stacktrace.
+ // Then we filter out all frames which belong to the file that contains
+ // the p5 library
+ friendlyStack = friendlyStack.map(function (frame, index) {
+ frame.frameIndex = index;
+ return frame;
+ }).filter(function (frame) {
+ return frame.fileName !== p5FileName;
+ });
+ // a weird case, if for some reason we can't identify the function called
+ // from user's code
+ if (friendlyStack.length === 0) return [true,
+ null];
+ // get the function just above the topmost frame in the friendlyStack.
+ // i.e the name of the library function called from user's code
+ var func = stacktrace[friendlyStack[0].frameIndex - 1].functionName.split('.').slice( - 1) [0];
+ // Try and get the location (line no.) from the top element of the stack
+ var locationObj;
+ if (friendlyStack[0].fileName && friendlyStack[0].lineNumber && friendlyStack[0].columnNumber) {
+ locationObj = {
+ location: ''.concat(friendlyStack[0].fileName, ':').concat(friendlyStack[0].lineNumber, ':').concat(friendlyStack[0].columnNumber),
+ file: friendlyStack[0].fileName.split('/').slice( - 1),
+ line: friendlyStack[0].lineNumber
+ };
+ // if already handled by another part of the FES, don't handle again
+ if (_main.default._fesLogCache[locationObj.location]) return [true,
+ null];
+ } // Check if the error is due to a non loadX method being used incorrectly
+ // in preload
+
+ if (currentEntryPoint === 'preload' && _main.default.prototype._preloadMethods[func] == null) {
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.wrongPreload', {
+ func: func,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : '',
+ error: error.message
+ }), 'preload');
+ } else {
+ // Library error
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.libraryError', {
+ func: func,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : '',
+ error: error.message
+ }), func);
+ } // Finally, if it's an internal error, print the friendlyStack
+ // ( fesErrorMonitor won't handle this error )
+
+ if (friendlyStack && friendlyStack.length) {
+ printFriendlyStack(friendlyStack);
+ }
+ }
+ return [isInternal,
+ friendlyStack];
+ };
+ /**
+ * Handles "global" errors that the browser catches.
+ *
+ * Called when an error event happens and detects the type of error.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.globalErrors.syntax.[*]", "fes.globalErrors.reference.[*]",
+ * "fes.globalErrors.type.[*]".
+ *
+ * @method fesErrorMonitor
+ * @private
+ * @param {*} e Event object to extract error details from
+ */
+ var fesErrorMonitor = function fesErrorMonitor(e) {
+ if (_main.default.disableFriendlyErrors) return;
+ // Try to get the error object from e
+ var error;
+ if (e instanceof Error) {
+ error = e;
+ } else if (e instanceof ErrorEvent) {
+ error = e.error;
+ } else if (e instanceof PromiseRejectionEvent) {
+ error = e.reason;
+ if (!(error instanceof Error)) return;
+ }
+ if (!error) return;
+ var stacktrace = _main.default._getErrorStackParser().parse(error);
+ // process the stacktrace from the browser and simplify it to give
+ // friendlyStack.
+ var _processStack = processStack(error, stacktrace),
+ _processStack2 = _slicedToArray(_processStack, 2),
+ isInternal = _processStack2[0],
+ friendlyStack = _processStack2[1]; // if this is an internal library error, the type of the error is not relevant,
+ // only the user code that lead to it is.
+ if (isInternal) {
+ return;
+ }
+ var errList = errorTable[error.name];
+ if (!errList) return; // this type of error can't be handled yet
+ var matchedError;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = errList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var obj = _step.value;
+ var string = obj.msg;
+ // capture the primary symbol mentioned in the error
+ string = string.replace(new RegExp('{{}}', 'g'), '([a-zA-Z0-9_]+)');
+ string = string.replace(new RegExp('{{.}}', 'g'), '(.+)');
+ string = string.replace(new RegExp('{}', 'g'), '(?:[a-zA-Z0-9_]+)');
+ var matched = error.message.match(string);
+ if (matched) {
+ matchedError = Object.assign({
+ }, obj);
+ matchedError.match = matched;
+ break;
+ }
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ if (!matchedError) return;
+ // Try and get the location from the top element of the stack
+ var locationObj;
+ if (stacktrace && stacktrace[0].fileName && stacktrace[0].lineNumber && stacktrace[0].columnNumber) {
+ locationObj = {
+ location: ''.concat(stacktrace[0].fileName, ':').concat(stacktrace[0].lineNumber, ':').concat(stacktrace[0].columnNumber),
+ file: stacktrace[0].fileName.split('/').slice( - 1),
+ line: friendlyStack[0].lineNumber
+ };
+ }
+ switch (error.name) {
+ case 'SyntaxError':
+ {
+ // We can't really do much with syntax errors other than try to use
+ // a simpler framing of the error message. The stack isn't available
+ // for syntax errors
+ switch (matchedError.type) {
+ case 'INVALIDTOKEN':
+ {
+ //Error if there is an invalid or unexpected token that doesn't belong at this position in the code
+ //let x = “not a string”; -> string not in proper quotes
+ var url = 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Illegal_character#What_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.invalidToken', {
+ url: url
+ }));
+ break;
+ }
+ case 'UNEXPECTEDTOKEN':
+ {
+ //Error if a specific language construct(, { ; etc) was expected, but something else was provided
+ //for (let i = 0; i < 5,; ++i) -> a comma after i<5 instead of a semicolon
+ var _url = 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.unexpectedToken', {
+ url: _url
+ }));
+ break;
+ }
+ case 'REDECLAREDVARIABLE':
+ {
+ //Error if a variable is redeclared by the user. Example=>
+ //let a = 10;
+ //let a = 100;
+ var errSym = matchedError.match[1];
+ var _url2 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.redeclaredVariable', {
+ symbol: errSym,
+ url: _url2
+ }));
+ break;
+ }
+ case 'MISSINGINITIALIZER':
+ {
+ //Error if a const variable is not initialized during declaration
+ //Example => const a;
+ var _url3 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.missingInitializer', {
+ url: _url3
+ }));
+ break;
+ }
+ case 'BADRETURNORYIELD':
+ {
+ //Error when a return statement is misplaced(usually outside of a function)
+ // const a = function(){
+ // .....
+ // }
+ // return; -> misplaced return statement
+ var _url4 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.syntax.badReturnOrYield', {
+ url: _url4
+ }));
+ break;
+ }
+ }
+ break;
+ }
+ case 'ReferenceError':
+ {
+ switch (matchedError.type) {
+ case 'NOTDEFINED':
+ {
+ //Error if there is a non-existent variable referenced somewhere
+ //let a = 10;
+ //console.log(x);
+ var _errSym = matchedError.match[1];
+ if (_errSym && handleMisspelling(_errSym, error)) {
+ break;
+ } // if the flow gets this far, this is likely not a misspelling
+ // of a p5 property/function
+
+ var _url5 = 'https://p5js.org/examples/data-variable-scope.html';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.reference.notDefined', {
+ url: _url5,
+ symbol: _errSym,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ case 'CANNOTACCESS':
+ {
+ //Error if a lexical variable was accessed before it was initialized
+ //console.log(a); -> variable accessed before it was initialized
+ //let a=100;
+ var _errSym2 = matchedError.match[1];
+ var _url6 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.reference.cannotAccess', {
+ url: _url6,
+ symbol: _errSym2,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ }
+ break;
+ }
+ case 'TypeError':
+ {
+ switch (matchedError.type) {
+ case 'NOTFUNC':
+ {
+ //Error when some code expects you to provide a function, but that didn't happen
+ //let a = document.getElementByID('foo'); -> getElementById instead of getElementByID
+ var _errSym3 = matchedError.match[1];
+ var splitSym = _errSym3.split('.');
+ var _url7 = 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_a_function#What_went_wrong';
+ // if errSym is aa.bb.cc , symbol would be cc and obj would aa.bb
+ var translationObj = {
+ url: _url7,
+ symbol: splitSym[splitSym.length - 1],
+ obj: splitSym.slice(0, splitSym.length - 1).join('.'),
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ };
+ // There are two cases to handle here. When the function is called
+ // as a property of an object and when it's called independently.
+ // Both have different explanations.
+ if (splitSym.length > 1) {
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.notfuncObj', translationObj));
+ } else {
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.notfunc', translationObj));
+ }
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ case 'READNULL':
+ {
+ //Error if a property of null is accessed
+ //let a = null;
+ //console.log(a.property); -> a is null
+ var _errSym4 = matchedError.match[1];
+ var _url8 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong';
+ /*let url2 =
+ 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null';*/
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.readFromNull', {
+ url: _url8,
+ symbol: _errSym4,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ case 'READUDEFINED':
+ {
+ //Error if a property of undefined is accessed
+ //let a; -> default value of a is undefined
+ //console.log(a.property); -> a is undefined
+ var _errSym5 = matchedError.match[1];
+ var _url9 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong';
+ /*let url2 =
+ 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined#description';*/
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.readFromUndefined', {
+ url: _url9,
+ symbol: _errSym5,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ case 'CONSTASSIGN':
+ {
+ //Error when a const variable is reassigned a value
+ //const a = 100;
+ //a=10;
+ var _url10 = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment#what_went_wrong';
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.globalErrors.type.constAssign', {
+ url: _url10,
+ location: locationObj ? (0, _internationalization.translator) ('fes.location', locationObj) : ''
+ }));
+ if (friendlyStack) printFriendlyStack(friendlyStack);
+ break;
+ }
+ }
+ }
+ }
+ };
+ _main.default._fesErrorMonitor = fesErrorMonitor;
+ _main.default._checkForUserDefinedFunctions = checkForUserDefinedFunctions;
+ // logger for testing purposes.
+ _main.default._fesLogger = null;
+ _main.default._fesLogCache = {
+ };
+ window.addEventListener('load', checkForUserDefinedFunctions, false);
+ window.addEventListener('error', _main.default._fesErrorMonitor, false);
+ window.addEventListener('unhandledrejection', _main.default._fesErrorMonitor, false);
+ /**
+ * Prints out all the colors in the color pallete with white text.
+ * For color blindness testing.
+ */
+ /* function testColors() {
+ const str = 'A box of biscuits, a box of mixed biscuits and a biscuit mixer';
+ p5._friendlyError(str, 'print', '#ED225D'); // p5.js magenta
+ p5._friendlyError(str, 'print', '#2D7BB6'); // p5.js blue
+ p5._friendlyError(str, 'print', '#EE9900'); // p5.js orange
+ p5._friendlyError(str, 'print', '#A67F59'); // p5.js light brown
+ p5._friendlyError(str, 'print', '#704F21'); // p5.js gold
+ p5._friendlyError(str, 'print', '#1CC581'); // auto cyan
+ p5._friendlyError(str, 'print', '#FF6625'); // auto orange
+ p5._friendlyError(str, 'print', '#79EB22'); // auto green
+ p5._friendlyError(str, 'print', '#B40033'); // p5.js darkened magenta
+ p5._friendlyError(str, 'print', '#084B7F'); // p5.js darkened blue
+ p5._friendlyError(str, 'print', '#945F00'); // p5.js darkened orange
+ p5._friendlyError(str, 'print', '#6B441D'); // p5.js darkened brown
+ p5._friendlyError(str, 'print', '#2E1B00'); // p5.js darkened gold
+ p5._friendlyError(str, 'print', '#008851'); // auto dark cyan
+ p5._friendlyError(str, 'print', '#C83C00'); // auto dark orange
+ p5._friendlyError(str, 'print', '#4DB200'); // auto dark green
+ } */
+ } // This is a lazily-defined list of p5 symbols that may be
+ // misused by beginners at top-level code, outside of setup/draw. We'd like
+ // to detect these errors and help the user by suggesting they move them
+ // into setup/draw.
+ //
+ // For more details, see https://github.com/processing/p5.js/issues/1121.
+
+ misusedAtTopLevelCode = null;
+ var FAQ_URL = 'https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup';
+ /**
+ * A helper function for populating misusedAtTopLevel list.
+ *
+ * @method defineMisusedAtTopLevelCode
+ * @private
+ */
+ defineMisusedAtTopLevelCode = function defineMisusedAtTopLevelCode() {
+ var uniqueNamesFound = {
+ };
+ var getSymbols = function getSymbols(obj) {
+ return Object.getOwnPropertyNames(obj).filter(function (name) {
+ if (name[0] === '_') {
+ return false;
+ }
+ if (name in uniqueNamesFound) {
+ return false;
+ }
+ uniqueNamesFound[name] = true;
+ return true;
+ }).map(function (name) {
+ var type;
+ if (typeof obj[name] === 'function') {
+ type = 'function';
+ } else if (name === name.toUpperCase()) {
+ type = 'constant';
+ } else {
+ type = 'variable';
+ }
+ return {
+ name: name,
+ type: type
+ };
+ });
+ };
+ misusedAtTopLevelCode = [
+ ].concat(getSymbols(_main.default.prototype), // At present, p5 only adds its constants to p5.prototype during
+ // construction, which may not have happened at the time a
+ // ReferenceError is thrown, so we'll manually add them to our list.
+ getSymbols(_dereq_('../constants')));
+ // This will ultimately ensure that we report the most specific error
+ // possible to the user, e.g. advising them about HALF_PI instead of PI
+ // when their code misuses the former.
+ misusedAtTopLevelCode.sort(function (a, b) {
+ return b.name.length - a.name.length;
+ });
+ };
+ /**
+ * Detects browser level error event for p5 constants/functions used outside
+ * of setup() and draw().
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.misusedTopLevel".
+ *
+ * @method helpForMisusedAtTopLevelCode
+ * @private
+ * @param {Event} e Error event
+ * @param {Boolean} log false
+ *
+ * @returns {Boolean} true
+ */
+ var helpForMisusedAtTopLevelCode = function helpForMisusedAtTopLevelCode(e, log) {
+ if (!log) {
+ log = console.log.bind(console);
+ }
+ if (!misusedAtTopLevelCode) {
+ defineMisusedAtTopLevelCode();
+ } // If we find that we're logging lots of false positives, we can
+ // uncomment the following code to avoid displaying anything if the
+ // user's code isn't likely to be using p5's global mode. (Note that
+ // setup/draw are more likely to be defined due to JS function hoisting.)
+ //
+ //if (!('setup' in window || 'draw' in window)) {
+ // return;
+ //}
+
+ misusedAtTopLevelCode.some(function (symbol) {
+ // Note that while just checking for the occurrence of the
+ // symbol name in the error message could result in false positives,
+ // a more rigorous test is difficult because different browsers
+ // log different messages, and the format of those messages may
+ // change over time.
+ //
+ // For example, if the user uses 'PI' in their code, it may result
+ // in any one of the following messages:
+ //
+ // * 'PI' is undefined (Microsoft Edge)
+ // * ReferenceError: PI is undefined (Firefox)
+ // * Uncaught ReferenceError: PI is not defined (Chrome)
+ if (e.message && e.message.match('\\W?'.concat(symbol.name, '\\W')) !== null) {
+ var symbolName = symbol.type === 'function' ? ''.concat(symbol.name, '()') : symbol.name;
+ if (typeof IS_MINIFIED !== 'undefined') {
+ log('Did you just try to use p5.js\'s '.concat(symbolName, ' ').concat(symbol.type, '? If so, you may want to move it into your sketch\'s setup() function.\n\nFor more details, see: ').concat(FAQ_URL));
+ } else {
+ log((0, _internationalization.translator) ('fes.misusedTopLevel', {
+ symbolName: symbolName,
+ symbolType: symbol.type,
+ url: FAQ_URL
+ }));
+ }
+ return true;
+ }
+ });
+ };
+ // Exposing this primarily for unit testing.
+ _main.default.prototype._helpForMisusedAtTopLevelCode = helpForMisusedAtTopLevelCode;
+ if (document.readyState !== 'complete') {
+ window.addEventListener('error', helpForMisusedAtTopLevelCode, false);
+ // Our job is only to catch ReferenceErrors that are thrown when
+ // global (non-instance mode) p5 APIs are used at the top-level
+ // scope of a file, so we'll unbind our error listener now to make
+ // sure we don't log false positives later.
+ window.addEventListener('load', function () {
+ window.removeEventListener('error', helpForMisusedAtTopLevelCode, false);
+ });
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 286,
+ '../internationalization': 296,
+ '../main': 298,
+ './browser_errors': 288,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.filter': 173,
+ 'core-js/modules/es.array.for-each': 175,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.join': 180,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.array.some': 184,
+ 'core-js/modules/es.function.name': 186,
+ 'core-js/modules/es.object.assign': 194,
+ 'core-js/modules/es.object.get-own-property-names': 197,
+ 'core-js/modules/es.object.keys': 199,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.constructor': 204,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.match': 211,
+ 'core-js/modules/es.string.replace': 214,
+ 'core-js/modules/es.string.split': 216,
+ 'core-js/modules/es.string.starts-with': 217,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.for-each': 255,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 290: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var _internationalization = _dereq_('../internationalization');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @for p5
+ * @requires core
+ */
+
+ if (typeof IS_MINIFIED !== 'undefined') {
+ _main.default._friendlyFileLoadError = function () {
+ };
+ } else {
+ // mapping used by `_friendlyFileLoadError`
+ var fileLoadErrorCases = function fileLoadErrorCases(num, filePath) {
+ var suggestion = (0, _internationalization.translator) ('fes.fileLoadError.suggestion', {
+ filePath: filePath,
+ url: 'https://github.com/processing/p5.js/wiki/Local-server'
+ });
+ switch (num) {
+ case 0:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.image', {
+ suggestion: suggestion
+ }),
+ method: 'loadImage'
+ };
+ case 1:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.xml', {
+ suggestion: suggestion
+ }),
+ method: 'loadXML'
+ };
+ case 2:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.table', {
+ suggestion: suggestion
+ }),
+ method: 'loadTable'
+ };
+ case 3:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.strings', {
+ suggestion: suggestion
+ }),
+ method: 'loadStrings'
+ };
+ case 4:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.font', {
+ suggestion: suggestion
+ }),
+ method: 'loadFont'
+ };
+ case 5:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.json', {
+ suggestion: suggestion
+ }),
+ method: 'loadJSON'
+ };
+ case 6:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.bytes', {
+ suggestion: suggestion
+ }),
+ method: 'loadBytes'
+ };
+ case 7:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.large'),
+ method: 'loadX'
+ };
+ case 8:
+ return {
+ message: (0, _internationalization.translator) ('fes.fileLoadError.gif'),
+ method: 'loadImage'
+ };
+ }
+ };
+ /**
+ * Called internally if there is an error during file loading.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.fileLoadError.[*]".
+ *
+ * @method _friendlyFileLoadError
+ * @private
+ * @param {Number} errorType Number of file load error type
+ * @param {String} filePath Path to file caused the error
+ */
+ _main.default._friendlyFileLoadError = function (errorType, filePath) {
+ var _fileLoadErrorCases = fileLoadErrorCases(errorType, filePath),
+ message = _fileLoadErrorCases.message,
+ method = _fileLoadErrorCases.method;
+ _main.default._friendlyError(message, method, 3);
+ };
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../internationalization': 296,
+ '../main': 298
+ }
+ ],
+ 291: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.regexp.constructor');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var _internationalization = _dereq_('../internationalization');
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Checks if any p5.js constant/function is declared outside of setup()
+ * and draw() function. Also checks any reserved constant/function is
+ * redeclared.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.sketchReaderErrors.reservedConst",
+ * "fes.sketchReaderErrors.reservedFunc".
+ *
+ * @method _fesCodeReader
+ * @private
+ */
+
+ if (typeof IS_MINIFIED !== 'undefined') {
+ _main.default._fesCodeReader = function () {
+ };
+ } else {
+ //list of functions to ignore as they either
+ //are ment to be defined or generate false positive
+ //outputs
+ var ignoreFunction = [
+ 'setup',
+ 'draw',
+ 'preload',
+ 'deviceMoved',
+ 'deviceTurned',
+ 'deviceShaken',
+ 'doubleClicked',
+ 'mousePressed',
+ 'mouseReleased',
+ 'mouseMoved',
+ 'mouseDragged',
+ 'mouseClicked',
+ 'mouseWheel',
+ 'touchStarted',
+ 'touchMoved',
+ 'touchEnded',
+ 'keyPressed',
+ 'keyReleased',
+ 'keyTyped',
+ 'windowResized',
+ 'name',
+ 'parent',
+ 'toString',
+ 'print',
+ 'stop',
+ 'onended'
+ ];
+ /**
+ * Takes a list of variables defined by the user in the code
+ * as an array and checks if the list contains p5.js constants and functions.
+ *
+ * @method checkForConstsAndFuncs
+ * @private
+ * @param {Array} variableArray
+ */
+ var checkForConstsAndFuncs = function checkForConstsAndFuncs(variableArray) {
+ for (var i = 0; i < variableArray.length; i++) {
+ //if the element in variableArray is a p5.js constant then the below condidion
+ //will be true, hence a match is found
+ if (constants[variableArray[i]] !== undefined) {
+ var url = 'https://p5js.org/reference/#/p5/'.concat(variableArray[i]);
+ //display the FES message if a match is found
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.sketchReaderErrors.reservedConst', {
+ url: url,
+ symbol: variableArray[i]
+ }));
+ return;
+ //if match found then end search
+ }
+ }
+ var p5Constructors = {
+ };
+ for (var _i = 0, _Object$keys = Object.keys(_main.default); _i < _Object$keys.length; _i++) {
+ var key = _Object$keys[_i];
+ // Get a list of all constructors in p5. They are functions whose names
+ // start with a capital letter
+ if (typeof _main.default[key] === 'function' && key[0] !== key[0].toLowerCase()) {
+ p5Constructors[key] = _main.default[key];
+ }
+ }
+ for (var _i2 = 0; _i2 < variableArray.length; _i2++) {
+ //ignoreFunction contains the list of functions to be ignored
+ if (!ignoreFunction.includes(variableArray[_i2])) {
+ var keyArray = Object.keys(p5Constructors);
+ var j = 0;
+ //for every function name obtained check if it matches any p5.js function name
+ for (; j < keyArray.length; j++) {
+ if (p5Constructors[keyArray[j]].prototype[variableArray[_i2]] !== undefined) {
+ //if a p5.js function is used ie it is in the funcs array
+ var _url = 'https://p5js.org/reference/#/p5/'.concat(variableArray[_i2]);
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.sketchReaderErrors.reservedFunc', {
+ url: _url,
+ symbol: variableArray[_i2]
+ }));
+ return;
+ }
+ }
+ }
+ }
+ };
+ //these regex are used to perform variable extraction
+ //visit https://regexr.com/ for the detailed view
+ var optionalVarKeyword = /(?:(?:let|const|var)\s+)?/;
+ // Bracketed expressions start with an opening bracket, some amount of non
+ // bracket characters, then a closing bracket. Note that this won't properly
+ // parse nested brackets: `constrain(millis(), 0, 1000)` will match
+ // `constrain(millis()` only, but will still fail gracefully and not try to
+ // mistakenly read any subsequent code as assignment expressions.
+ var roundBracketedExpr = /(?:\([^)]*\))/;
+ var squareBracketedExpr = /(?:\[[^\]]*\])/;
+ var curlyBracketedExpr = /(?:\{[^}]*\})/;
+ var bracketedExpr = new RegExp([roundBracketedExpr,
+ squareBracketedExpr,
+ curlyBracketedExpr].map(function (regex) {
+ return regex.source;
+ }).join('|'));
+ // In an a = b expression, `b` can be any character up to a newline or comma,
+ // unless the comma is inside of a bracketed expression of some kind (to make
+ // sure we parse function calls with multiple arguments properly.)
+ var rightHandSide = new RegExp('(?:' + bracketedExpr.source + '|[^\\n,])+');
+ var leftHandSide = /([\w$]+)/;
+ var assignmentOperator = /\s*=\s*/;
+ var singleAssignment = new RegExp(leftHandSide.source + assignmentOperator.source + rightHandSide.source);
+ var listSeparator = /,\s*/;
+ var oneOrMoreAssignments = new RegExp('(?:' + singleAssignment.source + listSeparator.source + ')*' + singleAssignment.source);
+ var assignmentStatement = new RegExp('^' + optionalVarKeyword.source + oneOrMoreAssignments.source);
+ var letConstName = /(?:(?:let|const)\s+)([\w$]+)/;
+ /**
+ * Takes an array in which each element is a line of code
+ * containing a variable definition(Eg: arr=['let x = 100', 'const y = 200'])
+ * and extracts the variables defined.
+ *
+ * @method extractVariables
+ * @private
+ * @param {Array} linesArray array of lines of code
+ */
+ var extractVariables = function extractVariables(linesArray) {
+ //extract variable names from the user's code
+ var matches = [
+ ];
+ linesArray.forEach(function (ele) {
+ // Match 0 is the part of the line of code that the regex looked at.
+ // Matches 1 and onward will be only the variable names on the left hand
+ // side of assignment expressions.
+ var match = ele.match(assignmentStatement);
+ if (!match) return;
+ matches.push.apply(matches, _toConsumableArray(match.slice(1).filter(function (group) {
+ return group !== undefined;
+ })));
+ });
+ //check if the obtained variables are a part of p5.js or not
+ checkForConstsAndFuncs(matches);
+ };
+ /**
+ * Takes an array in which each element is a line of code
+ * containing a function definition(array=['let x = () => {...}'])
+ * and extracts the functions defined.
+ *
+ * @method extractFuncVariables
+ * @private
+ * @param {Array} linesArray array of lines of code
+ */
+ var extractFuncVariables = function extractFuncVariables(linesArray) {
+ var matches = [
+ ];
+ //RegExp to extract function names from let/const x = function()...
+ //visit https://regexr.com/ for the detailed view.
+ linesArray.forEach(function (ele) {
+ var m = ele.match(letConstName);
+ if (m !== null) matches.push(ele.match(letConstName) [1]);
+ });
+ //matches array contains the names of the functions
+ checkForConstsAndFuncs(matches);
+ };
+ /**
+ * Converts code written by the user to an array
+ * every element of which is a seperate line of code.
+ *
+ * @method codeToLines
+ * @private
+ * @param {String} code code written by the user
+ */
+ var codeToLines = function codeToLines(code) {
+ //convert code to array of code and filter out
+ //unnecessary lines
+ var arrayVariables = code.split('\n').map(function (line) {
+ return line.trim();
+ }).filter(function (line) {
+ return line !== '' && !line.includes('//') && (line.includes('let') || line.includes('const')) && !line.includes('=>') && !line.includes('function');
+ } //filter out lines containing variable names
+ );
+ //filter out lines containing function names
+ var arrayFunctions = code.split('\n').map(function (line) {
+ return line.trim();
+ }).filter(function (line) {
+ return line !== '' && !line.includes('//') && (line.includes('let') || line.includes('const')) && (line.includes('=>') || line.includes('function'));
+ });
+ //pass the relevant array to a function which will extract all the variables/functions names
+ extractVariables(arrayVariables);
+ extractFuncVariables(arrayFunctions);
+ };
+ /**
+ * Remove multiline comments and the content inside it.
+ *
+ * @method removeMultilineComments
+ * @private
+ * @param {String} code code written by the user
+ * @returns {String}
+ */
+ var removeMultilineComments = function removeMultilineComments(code) {
+ var start = code.indexOf('/*');
+ var end = code.indexOf('*/');
+ //create a new string which don't have multiline comments
+ while (start !== - 1 && end !== - 1) {
+ if (start === 0) {
+ code = code.slice(end + 2);
+ } else code = code.slice(0, start) + code.slice(end + 2);
+ start = code.indexOf('/*');
+ end = code.indexOf('*/');
+ }
+ return code;
+ };
+ /**
+ * Checks if any p5.js constant or function is declared outside a function
+ * and reports it if found.
+ *
+ * @method globalConstFuncCheck
+ * @private
+ * @returns {Boolean}
+ */
+ var globalConstFuncCheck = function globalConstFuncCheck() {
+ // generate all the const key data as an array
+ var tempArray = Object.keys(constants);
+ var element;
+ for (var i = 0; i < tempArray.length; i++) {
+ try {
+ //if the user has not declared p5.js constant anywhere outside the
+ //setup or draw function then this will throw an
+ //error.
+ element = eval(tempArray[i]);
+ } catch (e) {
+ //We are catching the error due to the above mentioned
+ //reason. Since there is no declaration of constant everything
+ //is OK so we will skip the current iteration and check for the
+ //next element.
+ continue;
+ } //if we are not getting an error this means
+ //user have changed the value. We will check
+ //if the value is changed and if it is changed
+ //then report.
+
+ if (constants[tempArray[i]] !== element) {
+ var url = 'https://p5js.org/reference/#/p5/'.concat(tempArray[i]);
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.sketchReaderErrors.reservedConst', {
+ url: url,
+ symbol: tempArray[i]
+ }));
+ //if a p5.js constant is already reported then no need to check
+ //for p5.js functions.
+ return true;
+ }
+ } //the below code gets a list of p5.js functions
+
+ var p5Constructors = {
+ };
+ for (var _i3 = 0, _Object$keys2 = Object.keys(_main.default); _i3 < _Object$keys2.length; _i3++) {
+ var key = _Object$keys2[_i3];
+ // Get a list of all constructors in p5. They are functions whose names
+ // start with a capital letter
+ if (typeof _main.default[key] === 'function' && key[0] !== key[0].toLowerCase()) {
+ p5Constructors[key] = _main.default[key];
+ }
+ }
+ var keyArray = Object.keys(p5Constructors);
+ var classesWithGlobalFns = [
+ 'Renderer',
+ 'Renderer2D',
+ 'RendererGL'
+ ];
+ var functionArray = [
+ ];
+ //get the names of all p5.js functions which are available globally
+ for (var _i4 = 0; _i4 < classesWithGlobalFns.length; _i4++) {
+ functionArray.push.apply(functionArray, _toConsumableArray(Object.keys(p5Constructors[classesWithGlobalFns[_i4]].prototype)));
+ } //we have p5.js function names with us so we will check
+ //if they have been declared or not.
+
+ for (var _i5 = 0; _i5 < functionArray.length; _i5++) {
+ //ignoreFunction contains the list of functions to be ignored
+ if (!ignoreFunction.includes(functionArray[_i5])) {
+ try {
+ //if we get an error that means the function is not declared
+ element = eval(functionArray[_i5]);
+ } catch (e) {
+ //we will skip the iteration
+ continue;
+ } //if we are not getting an error this means
+ //user have used p5.js function. Check if it is
+ //changed and if so then report it.
+
+ for (var k = 0; k < keyArray.length; k++) {
+ if (p5Constructors[keyArray[k]].prototype[functionArray[_i5]] === undefined);
+ else {
+ if (p5Constructors[keyArray[k]].prototype[functionArray[_i5]] !== element) {
+ var _url2 = 'https://p5js.org/reference/#/p5/'.concat(functionArray[_i5]);
+ _main.default._friendlyError((0, _internationalization.translator) ('fes.sketchReaderErrors.reservedFunc', {
+ url: _url2,
+ symbol: functionArray[_i5]
+ }));
+ return true;
+ }
+ }
+ }
+ }
+ }
+ };
+ /**
+ * Initiates the sketch_reader's processes.
+ * Obtains the code in setup and draw function
+ * and forwards it for further processing and evaluation.
+ *
+ * @method fesCodeReader
+ * @private
+ */
+ var fesCodeReader = function fesCodeReader() {
+ //moveAhead will determine if a match is found outside
+ //the setup and draw function. If a match is found then
+ //to prevent further potential reporting we will exit immidiately
+ var moveAhead = globalConstFuncCheck();
+ if (moveAhead) return;
+ var code = '';
+ try {
+ //get code from setup
+ code += '' + setup;
+ } catch (e) {
+ code += '';
+ }
+ try {
+ //get code from draw
+ code += '\n' + draw;
+ } catch (e) {
+ code += '';
+ }
+ if (code === '') return;
+ code = removeMultilineComments(code);
+ codeToLines(code);
+ };
+ _main.default._fesCodeReader = fesCodeReader;
+ window.addEventListener('load', _main.default._fesCodeReader);
+ }
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 286,
+ '../internationalization': 296,
+ '../main': 298,
+ 'core-js/modules/es.array.filter': 173,
+ 'core-js/modules/es.array.for-each': 175,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.index-of': 178,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.join': 180,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.keys': 199,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.constructor': 204,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.match': 211,
+ 'core-js/modules/es.string.split': 216,
+ 'core-js/modules/es.string.trim': 219,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.for-each': 255,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 292: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.match');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @for p5
+ * @requires core
+ */
+ // Borrow from stacktracejs https://github.com/stacktracejs/stacktrace.js with
+ // minor modifications. The license for the same and the code is included below
+ // Copyright (c) 2017 Eric Wendelin and other contributors
+ // Permission is hereby granted, free of charge, to any person obtaining a copy of
+ // this software and associated documentation files (the "Software"), to deal in
+ // the Software without restriction, including without limitation the rights to
+ // use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ // of the Software, and to permit persons to whom the Software is furnished to do
+ // so, subject to the following conditions:
+ // The above copyright notice and this permission notice shall be included in all
+ // copies or substantial portions of the Software.
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ // SOFTWARE.
+
+ function ErrorStackParser() {
+ var FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
+ var CHROME_IE_STACK_REGEXP = /^\s*at .*(\S+:\d+|\(native\))/m;
+ var SAFARI_NATIVE_CODE_REGEXP = /^(eval@)?(\[native code])?$/;
+ return {
+ /**
+ * Given an Error object, extract the most information from it.
+ * @private
+ * @param {Error} error object
+ * @return {Array} of stack frames
+ */
+ parse: function ErrorStackParser$$parse(error) {
+ if (typeof error.stacktrace !== 'undefined' || typeof error['opera#sourceloc'] !== 'undefined') {
+ return this.parseOpera(error);
+ } else if (error.stack && error.stack.match(CHROME_IE_STACK_REGEXP)) {
+ return this.parseV8OrIE(error);
+ } else if (error.stack) {
+ return this.parseFFOrSafari(error);
+ } else {
+ // throw new Error('Cannot parse given Error object');
+ }
+ },
+ // Separate line and column numbers from a string of the form: (URI:Line:Column)
+ extractLocation: function ErrorStackParser$$extractLocation(urlLike) {
+ // Fail-fast but return locations like "(native)"
+ if (urlLike.indexOf(':') === - 1) {
+ return [urlLike];
+ }
+ var regExp = /(.+?)(?::(\d+))?(?::(\d+))?$/;
+ var parts = regExp.exec(urlLike.replace(/[()]/g, ''));
+ return [parts[1],
+ parts[2] || undefined,
+ parts[3] || undefined];
+ },
+ parseV8OrIE: function ErrorStackParser$$parseV8OrIE(error) {
+ var filtered = error.stack.split('\n').filter(function (line) {
+ return !!line.match(CHROME_IE_STACK_REGEXP);
+ }, this);
+ return filtered.map(function (line) {
+ if (line.indexOf('(eval ') > - 1) {
+ // Throw away eval information until we implement stacktrace.js/stackframe#8
+ line = line.replace(/eval code/g, 'eval').replace(/(\(eval at [^()]*)|(\),.*$)/g, '');
+ }
+ var sanitizedLine = line.replace(/^\s+/, '').replace(/\(eval code/g, '(');
+ // capture and preseve the parenthesized location "(/foo/my bar.js:12:87)" in
+ // case it has spaces in it, as the string is split on \s+ later on
+ var location = sanitizedLine.match(/ (\((.+):(\d+):(\d+)\)$)/);
+ // remove the parenthesized location from the line, if it was matched
+ sanitizedLine = location ? sanitizedLine.replace(location[0], '') : sanitizedLine;
+ var tokens = sanitizedLine.split(/\s+/).slice(1);
+ // if a location was matched, pass it to extractLocation() otherwise pop the last token
+ var locationParts = this.extractLocation(location ? location[1] : tokens.pop());
+ var functionName = tokens.join(' ') || undefined;
+ var fileName = [
+ 'eval',
+ '
+ * // Example: http://p5js.org?year=2014&month=May&day=15
+ *
+ * function setup() {
+ * let params = getURLParams();
+ * text(params.day, 10, 20);
+ * text(params.month, 10, 40);
+ * text(params.year, 10, 60);
+ * }
+ *
+ *
+ * let img;
+ * let c;
+ * function preload() {
+ * // preload() runs once
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * // setup() waits until preload() is done
+ * img.loadPixels();
+ * // get color of middle pixel
+ * c = img.get(img.width / 2, img.height / 2);
+ * }
+ *
+ * function draw() {
+ * background(c);
+ * image(img, 25, 25, 50, 50);
+ * }
+ *
+ * let a = 0;
+ *
+ * function setup() {
+ * background(0);
+ * noStroke();
+ * fill(102);
+ * }
+ *
+ * function draw() {
+ * rect(a++ % width, 10, 2, 80);
+ * }
+ *
+ * let yPos = 0;
+ * function setup() {
+ * // setup() runs once
+ * frameRate(30);
+ * }
+ * function draw() {
+ * // draw() loops forever, until stopped
+ * background(204);
+ * yPos = yPos - 1;
+ * if (yPos < 0) {
+ * yPos = height;
+ * }
+ * line(0, yPos, width, yPos);
+ * }
+ *
+ * function draw() {
+ * ellipse(50, 50, 10, 10);
+ * }
+ *
+ * function mousePressed() {
+ * remove(); // remove whole sketch on mouse press
+ * }
+ *
+ * p5.disableFriendlyErrors = true;
+ *
+ * function setup() {
+ * createCanvas(100, 50);
+ * }
+ *
+ *
+ *
+ * @property elt
+ * @readOnly
+ */
+ this.elt = elt;
+ /**
+ * @private
+ * @type {p5.Element}
+ */
+ this._pInst = this._pixelsState = pInst;
+ this._events = {
+ };
+ /**
+ * @type {Number}
+ * @property width
+ */
+ this.width = this.elt.offsetWidth;
+ /**
+ * @type {Number}
+ * @property height
+ */
+ this.height = this.elt.offsetHeight;
+ } /**
+ *
+ * Attaches the element to the parent specified. A way of setting
+ * the container for the element. Accepts either a string ID, DOM
+ * node, or p5.Element. If no arguments are given, parent node is returned.
+ * For more ways to position the canvas, see the
+ *
+ * positioning the canvas wiki page.
+ *
+ * @method parent
+ * @param {String|p5.Element|Object} parent the ID, DOM node, or p5.Element
+ * of desired parent element
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * let c = createCanvas(50, 50);
+ * c.elt.style.border = '5px solid red';
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * }
+ *
+ *
+ * // Add the following comment to html file.
+ * // <div id="myContainer"></div>
+ *
+ * // The js code
+ * let cnv = createCanvas(100, 100);
+ * cnv.parent('myContainer');
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div1.parent(div0); // use p5.Element
+ *
+ * let div0 = createDiv('this is the parent');
+ * div0.id('apples');
+ * let div1 = createDiv('this is the child');
+ * div1.parent('apples'); // use id
+ *
+ * let elt = document.getElementById('myParentDiv');
+ * let div1 = createDiv('this is the child');
+ * div1.parent(elt); // use element from page
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // Assigns a CSS selector ID to
+ * // the canvas element.
+ * cnv.id('mycanvas');
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // Assigns a CSS selector class 'small'
+ * // to the canvas element.
+ * cnv.class('small');
+ * }
+ *
+ * let cnv, d, g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mousePressed(changeGray); // attach listener for
+ * // canvas click only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with any click anywhere
+ * function mousePressed() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires only when cnv is clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ * let cnv, d, g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.doubleClicked(changeGray); // attach listener for
+ * // canvas double click only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with any double click anywhere
+ * function doubleClicked() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires only when cnv is double clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ * let cnv, d, g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseWheel(changeSize); // attach listener for
+ * // activity on canvas only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with mousewheel movement
+ * // anywhere on screen
+ * function mouseWheel() {
+ * g = g + 10;
+ * }
+ *
+ * // this function fires with mousewheel movement
+ * // over canvas only
+ * function changeSize(event) {
+ * if (event.deltaY > 0) {
+ * d = d + 10;
+ * } else {
+ * d = d - 10;
+ * }
+ * }
+ *
+ * let cnv, d, g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseReleased(changeGray); // attach listener for
+ * // activity on canvas only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires after the mouse has been
+ * // released
+ * function mouseReleased() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires after the mouse has been
+ * // released while on canvas
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ *
+ * @alt
+ * no display.
+ */
+
+ },
+ {
+ key: 'mouseClicked',
+ value: function mouseClicked(fxn) {
+ _main.default.Element._adjustListener('click', fxn, this);
+ return this;
+ } /**
+ * The mouseMoved() method is called once every time a
+ * mouse moves over the element. This can be used to attach an
+ * element-specific event listener.
+ *
+ * @method mouseMoved
+ * @param {Function|Boolean} fxn function to be fired when a mouse moves
+ * over the element.
+ * if `false` is passed instead, the previously
+ * firing function will no longer fire.
+ * @chainable
+ * @example
+ *
+ * let cnv, d, g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseClicked(changeGray); // attach listener for
+ * // activity on canvas only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires after the mouse has been
+ * // clicked anywhere
+ * function mouseClicked() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires after the mouse has been
+ * // clicked on canvas
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ *
+ * let cnv;
+ * let d = 30;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseMoved(changeSize); // attach listener for
+ * // activity on canvas only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * fill(200);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires when mouse moves anywhere on
+ * // page
+ * function mouseMoved() {
+ * g = g + 5;
+ * if (g > 255) {
+ * g = 0;
+ * }
+ * }
+ *
+ * // this function fires when mouse moves over canvas
+ * function changeSize() {
+ * d = d + 2;
+ * if (d > 100) {
+ * d = 0;
+ * }
+ * }
+ *
+ * let cnv;
+ * let d;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseOver(changeGray);
+ * d = 10;
+ * }
+ *
+ * function draw() {
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * function changeGray() {
+ * d = d + 10;
+ * if (d > 100) {
+ * d = 0;
+ * }
+ * }
+ *
+ * let cnv;
+ * let d;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.mouseOut(changeGray);
+ * d = 10;
+ * }
+ *
+ * function draw() {
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * function changeGray() {
+ * d = d + 10;
+ * if (d > 100) {
+ * d = 0;
+ * }
+ * }
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.touchStarted(changeGray); // attach listener for
+ * // canvas click only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with any touch anywhere
+ * function touchStarted() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires only when cnv is clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ * let cnv;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.touchMoved(changeGray); // attach listener for
+ * // canvas click only
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * }
+ *
+ * // this function fires only when cnv is clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ * let cnv;
+ * let d;
+ * let g;
+ * function setup() {
+ * cnv = createCanvas(100, 100);
+ * cnv.touchEnded(changeGray); // attach listener for
+ * // canvas click only
+ * d = 10;
+ * g = 100;
+ * }
+ *
+ * function draw() {
+ * background(g);
+ * ellipse(width / 2, height / 2, d, d);
+ * }
+ *
+ * // this function fires with any touch anywhere
+ * function touchEnded() {
+ * d = d + 10;
+ * }
+ *
+ * // this function fires only when cnv is clicked
+ * function changeGray() {
+ * g = random(0, 255);
+ * }
+ *
+ * // To test this sketch, simply drag a
+ * // file over the canvas
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('Drag file', width / 2, height / 2);
+ * c.dragOver(dragOverCallback);
+ * }
+ *
+ * // This function will be called whenever
+ * // a file is dragged over the canvas
+ * function dragOverCallback() {
+ * background(240);
+ * text('Dragged over', width / 2, height / 2);
+ * }
+ *
+ * // To test this sketch, simply drag a file
+ * // over and then out of the canvas area
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('Drag file', width / 2, height / 2);
+ * c.dragLeave(dragLeaveCallback);
+ * }
+ *
+ * // This function will be called whenever
+ * // a file is dragged out of the canvas
+ * function dragLeaveCallback() {
+ * background(240);
+ * text('Dragged off', width / 2, height / 2);
+ * }
+ *
+ * let pg;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(0);
+ * pg = createGraphics(50, 100);
+ * pg.fill(0);
+ * frameRate(5);
+ * }
+ *
+ * function draw() {
+ * image(pg, width / 2, 0);
+ * pg.background(255);
+ * // p5.Graphics object behave a bit differently in some cases
+ * // The normal canvas on the left resets the translate
+ * // with every loop through draw()
+ * // the graphics object on the right doesn't automatically reset
+ * // so translate() is additive and it moves down the screen
+ * rect(0, 0, width / 2, 5);
+ * pg.rect(0, 0, width / 2, 5);
+ * translate(0, 5, 0);
+ * pg.translate(0, 5, 0);
+ * }
+ * function mouseClicked() {
+ * // if you click you will see that
+ * // reset() resets the translate back to the initial state
+ * // of the Graphics object
+ * pg.reset();
+ * }
+ *
+ * let bg;
+ * function setup() {
+ * bg = createCanvas(100, 100);
+ * bg.background(0);
+ * image(bg, 0, 0);
+ * bg.remove();
+ * }
+ *
+ * let bg;
+ * function setup() {
+ * pixelDensity(1);
+ * createCanvas(100, 100);
+ * stroke(255);
+ * fill(0);
+ *
+ * // create and draw the background image
+ * bg = createGraphics(100, 100);
+ * bg.background(200);
+ * bg.ellipse(50, 50, 80, 80);
+ * }
+ * function draw() {
+ * let t = millis() / 1000;
+ * // draw the background
+ * if (bg) {
+ * image(bg, frameCount % 100, 0);
+ * image(bg, frameCount % 100 - 100, 0);
+ * }
+ * // draw the foreground
+ * let p = p5.Vector.fromAngle(t, 35).add(50, 50);
+ * ellipse(p.x, p.y, 30);
+ * }
+ * function mouseClicked() {
+ * // remove the background
+ * if (bg) {
+ * bg.remove();
+ * bg = null;
+ * }
+ * }
+ *
+ *
+ *
+ * @alt
+ * Black line extending from top-left of canvas to bottom right.
+ */
+ /**
+ * @method createCanvas
+ * @param {Number} w
+ * @param {Number} h
+ * @param {HTMLCanvasElement} [canvas]
+ * @return {p5.Renderer} pointer to p5.Renderer holding canvas
+ */
+ _main.default.prototype.createCanvas = function (w, h, renderer, canvas) {
+ _main.default._validateParameters('createCanvas', arguments);
+ //optional: renderer, otherwise defaults to p2d
+ var r;
+ if (arguments[2] instanceof HTMLCanvasElement) {
+ renderer = constants.P2D;
+ canvas = arguments[2];
+ } else {
+ r = renderer || constants.P2D;
+ }
+ var c;
+ if (canvas) {
+ c = document.getElementById(defaultId);
+ if (c) {
+ c.parentNode.removeChild(c); //replace the existing defaultCanvas
+ }
+ c = canvas;
+ this._defaultGraphicsCreated = false;
+ } else {
+ if (r === constants.WEBGL) {
+ c = document.getElementById(defaultId);
+ if (c) {
+ //if defaultCanvas already exists
+ c.parentNode.removeChild(c); //replace the existing defaultCanvas
+ var thisRenderer = this._renderer;
+ this._elements = this._elements.filter(function (e) {
+ return e !== thisRenderer;
+ });
+ }
+ c = document.createElement('canvas');
+ c.id = defaultId;
+ c.classList.add(defaultClass);
+ } else {
+ if (!this._defaultGraphicsCreated) {
+ if (canvas) {
+ c = canvas;
+ } else {
+ c = document.createElement('canvas');
+ }
+ var i = 0;
+ while (document.getElementById('defaultCanvas'.concat(i))) {
+ i++;
+ }
+ defaultId = 'defaultCanvas'.concat(i);
+ c.id = defaultId;
+ c.classList.add(defaultClass);
+ } else {
+ // resize the default canvas if new one is created
+ c = this.canvas;
+ }
+ } // set to invisible if still in setup (to prevent flashing with manipulate)
+
+ if (!this._setupDone) {
+ c.dataset.hidden = true; // tag to show later
+ c.style.visibility = 'hidden';
+ }
+ if (this._userNode) {
+ // user input node case
+ this._userNode.appendChild(c);
+ } else {
+ //create main element
+ if (document.getElementsByTagName('main').length === 0) {
+ var m = document.createElement('main');
+ document.body.appendChild(m);
+ } //append canvas to main
+
+ document.getElementsByTagName('main') [0].appendChild(c);
+ }
+ } // Init our graphics renderer
+ //webgl mode
+
+ if (r === constants.WEBGL) {
+ this._setProperty('_renderer', new _main.default.RendererGL(c, this, true));
+ this._elements.push(this._renderer);
+ } else {
+ //P2D mode
+ if (!this._defaultGraphicsCreated) {
+ this._setProperty('_renderer', new _main.default.Renderer2D(c, this, true));
+ this._defaultGraphicsCreated = true;
+ this._elements.push(this._renderer);
+ }
+ }
+ this._renderer.resize(w, h);
+ this._renderer._applyDefaults();
+ return this._renderer;
+ };
+ /**
+ * Resizes the canvas to given width and height. The canvas will be cleared
+ * and draw will be called immediately, allowing the sketch to re-render itself
+ * in the resized canvas.
+ * @method resizeCanvas
+ * @param {Number} w width of the canvas
+ * @param {Number} h height of the canvas
+ * @param {Boolean} [noRedraw] don't redraw the canvas immediately
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 50);
+ * background(153);
+ * line(0, 0, width, height);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * function draw() {
+ * background(0, 100, 200);
+ * }
+ *
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ *
+ *
+ *
+ * @alt
+ * no image displayed
+ */
+ _main.default.prototype.noCanvas = function () {
+ if (this.canvas) {
+ this.canvas.parentNode.removeChild(this.canvas);
+ }
+ };
+ /**
+ * Creates and returns a new p5.Graphics object. Use this class if you need
+ * to draw into an off-screen graphics buffer. The two parameters define the
+ * width and height in pixels.
+ *
+ * A WebGL p5.Graphics will use a WebGL2 context if it is supported by the browser.
+ * Check the pg.webglVersion property of the renderer
+ * to check what version is being used, or call pg.setAttributes({ version: 1 })
+ * to create a WebGL1 context.
+ *
+ * Optionally, an existing canvas can be passed using a selector, ie. document.getElementById('').
+ * By default this canvas will be hidden (offscreen buffer), to make visible, set element's style to display:block;
+ *
+ * @method createGraphics
+ * @param {Number} w width of the offscreen graphics buffer
+ * @param {Number} h height of the offscreen graphics buffer
+ * @param {Constant} [renderer] either P2D or WEBGL
+ * undefined defaults to p2d
+ * @param {HTMLCanvasElement} [canvas] existing html canvas element
+ * @return {p5.Graphics} offscreen graphics buffer
+ * @example
+ *
+ * function setup() {
+ * noCanvas();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * 4 grey squares alternating light and dark grey. White quarter circle mid-left.
+ */
+ /**
+ * @method createGraphics
+ * @param {Number} w
+ * @param {Number} h
+ * @param {HTMLCanvasElement} [canvas]
+ * @return {p5.Graphics} offscreen graphics buffer
+ */
+ _main.default.prototype.createGraphics = function (w, h, renderer, canvas) {
+ if (arguments[2] instanceof HTMLCanvasElement) {
+ renderer = constants.P2D;
+ canvas = arguments[2];
+ }
+ _main.default._validateParameters('createGraphics', arguments);
+ return new _main.default.Graphics(w, h, renderer, this, canvas);
+ };
+ /**
+ * Creates and returns a new p5.Framebuffer, a
+ * high-performance WebGL object that you can draw to and then use as a texture.
+ *
+ * Options can include:
+ * - `format`: The data format of the texture, either `UNSIGNED_BYTE`, `FLOAT`, or `HALF_FLOAT`. The default is `UNSIGNED_BYTE`.
+ * - `channels`: What color channels to store, either `RGB` or `RGBA`. The default is to match the channels in the main canvas (with alpha unless disabled with `setAttributes`.)
+ * - `depth`: A boolean, whether or not to include a depth buffer. Defaults to true.
+ * - `depthFormat`: The data format for depth information, either `UNSIGNED_INT` or `FLOAT`. The default is `FLOAT` if available, or `UNSIGNED_INT` otherwise.
+ * - `stencil`: A boolean, whether or not to include a stencil buffer, which can be used for masking. This may only be used if also using a depth buffer. Defaults to the value of `depth`, which is true if not provided.
+ * - `antialias`: Boolean or Number, whether or not to render with antialiased edges, and if so, optionally the number of samples to use. Defaults to whether or not the main canvas is antialiased, using a default of 2 samples if so. Antialiasing is only supported when WebGL 2 is available.
+ * - `width`: The width of the texture. Defaults to matching the main canvas.
+ * - `height`: The height of the texture. Defaults to matching the main canvas.
+ * - `density`: The pixel density of the texture. Defaults to the pixel density of the main canvas.
+ * - `textureFiltering`: Either `LINEAR` (nearby pixels will be interpolated when reading values from the color texture) or `NEAREST` (no interpolation.) Generally, use `LINEAR` when using the texture as an image, and use `NEAREST` if reading the texture as data. Defaults to `LINEAR`.
+ *
+ * If `width`, `height`, or `density` are specified, then the framebuffer will
+ * keep that size until manually changed. Otherwise, it will be autosized, and
+ * it will update to match the main canvas's size and density when the main
+ * canvas changes.
+ *
+ * @method createFramebuffer
+ * @param {Object} [options] An optional object with configuration
+ *
+ * @example
+ *
+ * let pg;
+ * function setup() {
+ * createCanvas(100, 100);
+ * pg = createGraphics(100, 100);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * pg.background(100);
+ * pg.noStroke();
+ * pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
+ * image(pg, 50, 50);
+ * image(pg, 0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A red, green, and blue box (using normalMaterial) moves and rotates around
+ * the canvas, leaving a trail behind it that slowly grows and fades away.
+ */
+ _main.default.prototype.createFramebuffer = function (options) {
+ return new _main.default.Framebuffer(this, options);
+ };
+ /**
+ * Blends the pixels in the display window according to the defined mode.
+ * There is a choice of the following modes to blend the source pixels (A)
+ * with the ones of pixels already in the display window (B):
+ *
+ * let prev, next, cam;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * prev = createFramebuffer({ format: FLOAT });
+ * next = createFramebuffer({ format: FLOAT });
+ * cam = createCamera();
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // Swap prev and next so that we can use the previous
+ * // frame as a texture when drawing the current frame
+ * [prev, next] = [next, prev];
+ *
+ * // Draw to the framebuffer
+ * next.begin();
+ * background(255);
+ *
+ * push();
+ * // Draw the previous texture farther away, but scaled
+ * // up to fill the screen, plus a bit extra scale so it grows
+ * translate(0, 0, -200);
+ * scale(1.001 * (200 + cam.eyeZ) / cam.eyeZ);
+ * tint(255, 253);
+ * image(prev, -width/2, -height/2);
+ * pop();
+ *
+ * push();
+ * normalMaterial();
+ * translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(12);
+ * pop();
+ * next.end();
+ *
+ * image(next, -width/2, -height/2);
+ * }
+ *
+ * -
+ *
BLEND- linear interpolation of colours: C = + * A*factor + B. This is the default blending mode.
+ * ADD- sum of A and B
+ * DARKEST- only the darkest colour succeeds: C = + * min(A*factor, B).
+ * LIGHTEST- only the lightest colour succeeds: C = + * max(A*factor, B).
+ * DIFFERENCE- subtract colors from underlying image. + * (2D)
+ * EXCLUSION- similar toDIFFERENCE, but less + * extreme.
+ * MULTIPLY- multiply the colors, result will always be + * darker.
+ * SCREEN- opposite multiply, uses inverse values of the + * colors.
+ * REPLACE- the pixels entirely replace the others and + * don't utilize alpha (transparency) values.
+ * REMOVE- removes pixels from B with the alpha strength of A.
+ * OVERLAY- mix ofMULTIPLYandSCREEN + *. Multiplies dark values, and screens light values. (2D)
+ * HARD_LIGHT-SCREENwhen greater than 50% + * gray,MULTIPLYwhen lower. (2D)
+ * SOFT_LIGHT- mix ofDARKESTand + *LIGHTEST. Works likeOVERLAY, but not as harsh. (2D) + *
+ * DODGE- lightens light tones and increases contrast, + * ignores darks. (2D)
+ * BURN- darker areas are applied, increasing contrast, + * ignores lights. (2D)
+ * SUBTRACT- remainder of A and B (3D)
+ *
+ * (3D) indicates that this blend mode only works in the WEBGL renderer. + * + * @method blendMode + * @param {Constant} mode blend mode to set for canvas. + * either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, + * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, + * SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT + * @example + *
+ *
+ *
+ *
+ * blendMode(LIGHTEST);
+ * strokeWeight(30);
+ * stroke(80, 150, 255);
+ * line(25, 25, 75, 75);
+ * stroke(255, 50, 50);
+ * line(75, 25, 25, 75);
+ *
+ *
+ *
+ *
+ * @alt
+ * translucent image thick red & blue diagonal rounded lines intersecting center
+ * Thick red & blue diagonal rounded lines intersecting center. dark at overlap
+ */
+ _main.default.prototype.blendMode = function (mode) {
+ _main.default._validateParameters('blendMode', arguments);
+ if (mode === constants.NORMAL) {
+ // Warning added 3/26/19, can be deleted in future (1.0 release?)
+ console.warn('NORMAL has been deprecated for use in blendMode. defaulting to BLEND instead.');
+ mode = constants.BLEND;
+ }
+ this._renderer.blendMode(mode);
+ };
+ /**
+ * The p5.js API provides a lot of functionality for creating graphics, but there is
+ * some native HTML5 Canvas functionality that is not exposed by p5. You can still call
+ * it directly using the variable `drawingContext`, as in the example shown. This is
+ * the equivalent of calling `canvas.getContext('2d');` or `canvas.getContext('webgl');`.
+ * See this
+ *
+ * reference for the native canvas API for possible drawing functions you can call.
+ *
+ * @property drawingContext
+ * @example
+ *
+ * blendMode(MULTIPLY);
+ * strokeWeight(30);
+ * stroke(80, 150, 255);
+ * line(25, 25, 75, 75);
+ * stroke(255, 50, 50);
+ * line(75, 25, 25, 75);
+ *
+ *
+ *
+ *
+ * @alt
+ * white ellipse with shadow blur effect around edges
+ */
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../webgl/p5.RendererGL': 355,
+ './constants': 286,
+ './main': 298,
+ './p5.Graphics': 300,
+ './p5.Renderer2D': 302,
+ 'core-js/modules/es.array.filter': 173,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 305: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.slice');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ var _helpers = _interopRequireDefault(_dereq_('../helpers'));
+ _dereq_('../friendly_errors/fes_core');
+ _dereq_('../friendly_errors/file_errors');
+ _dereq_('../friendly_errors/validate_params');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * @module Shape
+ * @submodule 2D Primitives
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * This function does 3 things:
+ *
+ * 1. Bounds the desired start/stop angles for an arc (in radians) so that:
+ *
+ * 0 <= start < TWO_PI ; start <= stop < start + TWO_PI
+ *
+ * This means that the arc rendering functions don't have to be concerned
+ * with what happens if stop is smaller than start, or if the arc 'goes
+ * round more than once', etc.: they can just start at start and increase
+ * until stop and the correct arc will be drawn.
+ *
+ * 2. Optionally adjusts the angles within each quadrant to counter the naive
+ * scaling of the underlying ellipse up from the unit circle. Without
+ * this, the angles become arbitrary when width != height: 45 degrees
+ * might be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on
+ * a 'tall' ellipse.
+ *
+ * 3. Flags up when start and stop correspond to the same place on the
+ * underlying ellipse. This is useful if you want to do something special
+ * there (like rendering a whole ellipse instead).
+ */
+
+ _main.default.prototype._normalizeArcAngles = function (start, stop, width, height, correctForScaling) {
+ var epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
+ var separation;
+ // The order of the steps is important here: each one builds upon the
+ // adjustments made in the steps that precede it.
+ // Constrain both start and stop to [0,TWO_PI).
+ start = start - constants.TWO_PI * Math.floor(start / constants.TWO_PI);
+ stop = stop - constants.TWO_PI * Math.floor(stop / constants.TWO_PI);
+ // Get the angular separation between the requested start and stop points.
+ //
+ // Technically this separation only matches what gets drawn if
+ // correctForScaling is enabled. We could add a more complicated calculation
+ // for when the scaling is uncorrected (in which case the drawn points could
+ // end up pushed together or pulled apart quite dramatically relative to what
+ // was requested), but it would make things more opaque for little practical
+ // benefit.
+ //
+ // (If you do disable correctForScaling and find that correspondToSamePoint
+ // is set too aggressively, the easiest thing to do is probably to just make
+ // epsilon smaller...)
+ separation = Math.min(Math.abs(start - stop), constants.TWO_PI - Math.abs(start - stop));
+ // Optionally adjust the angles to counter linear scaling.
+ if (correctForScaling) {
+ if (start <= constants.HALF_PI) {
+ start = Math.atan(width / height * Math.tan(start));
+ } else if (start > constants.HALF_PI && start <= 3 * constants.HALF_PI) {
+ start = Math.atan(width / height * Math.tan(start)) + constants.PI;
+ } else {
+ start = Math.atan(width / height * Math.tan(start)) + constants.TWO_PI;
+ }
+ if (stop <= constants.HALF_PI) {
+ stop = Math.atan(width / height * Math.tan(stop));
+ } else if (stop > constants.HALF_PI && stop <= 3 * constants.HALF_PI) {
+ stop = Math.atan(width / height * Math.tan(stop)) + constants.PI;
+ } else {
+ stop = Math.atan(width / height * Math.tan(stop)) + constants.TWO_PI;
+ }
+ } // Ensure that start <= stop < start + TWO_PI.
+
+ if (start > stop) {
+ stop += constants.TWO_PI;
+ }
+ return {
+ start: start,
+ stop: stop,
+ correspondToSamePoint: separation < epsilon
+ };
+ };
+ /**
+ * Draws an arc to the canvas. Arcs are drawn along the outer edge of an ellipse
+ * (oval) defined by the `x`, `y`, `w`, and `h` parameters. Use the `start` and `stop`
+ * parameters to specify the angles (in radians) at which to draw the arc. Arcs are
+ * always drawn clockwise from `start` to `stop`. The origin of the arc's ellipse may
+ * be changed with the ellipseMode() function.
+ *
+ * The optional `mode` parameter determines the arc's fill style. The fill modes are
+ * a semi-circle (`OPEN`), a closed semi-circle (`CHORD`), or a closed pie segment (`PIE`).
+ *
+ * @method arc
+ * @param {Number} x x-coordinate of the arc's ellipse.
+ * @param {Number} y y-coordinate of the arc's ellipse.
+ * @param {Number} w width of the arc's ellipse by default.
+ * @param {Number} h height of the arc's ellipse by default.
+ * @param {Number} start angle to start the arc, specified in radians.
+ * @param {Number} stop angle to stop the arc, specified in radians.
+ * @param {Constant} [mode] optional parameter to determine the way of drawing
+ * the arc. either CHORD, PIE, or OPEN.
+ * @param {Integer} [detail] optional parameter for WebGL mode only. This is to
+ * specify the number of vertices that makes up the
+ * perimeter of the arc. Default value is 25. Won't
+ * draw a stroke for a detail of more than 50.
+ * @chainable
+ *
+ * @example
+ *
+ * function setup() {
+ * drawingContext.shadowOffsetX = 5;
+ * drawingContext.shadowOffsetY = -5;
+ * drawingContext.shadowBlur = 10;
+ * drawingContext.shadowColor = 'black';
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * arc(50, 55, 50, 50, 0, HALF_PI);
+ * noFill();
+ * arc(50, 55, 60, 60, HALF_PI, PI);
+ * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+ * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+ * describe(
+ * 'A shattered outline of an ellipse with a quarter of a white circle at the bottom-right.'
+ * );
+ *
+ *
+ *
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+ * describe('A white ellipse with the top-right third missing. The bottom is outlined in black.');
+ *
+ *
+ *
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+ * describe(
+ * 'A white ellipse missing a section from the top-right. The bottom is outlined in black.'
+ * );
+ *
+ *
+ *
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+ * describe('A white ellipse with a black outline missing a section from the top-right.');
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.arc = function (x, y, w, h, start, stop, mode, detail) {
+ _main.default._validateParameters('arc', arguments);
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }
+ if (start === stop) {
+ return this;
+ }
+ start = this._toRadians(start);
+ stop = this._toRadians(stop);
+ // p5 supports negative width and heights for ellipses
+ w = Math.abs(w);
+ h = Math.abs(h);
+ var vals = _helpers.default.modeAdjust(x, y, w, h, this._renderer._ellipseMode);
+ var angles = this._normalizeArcAngles(start, stop, vals.w, vals.h, true);
+ if (angles.correspondToSamePoint) {
+ // If the arc starts and ends at (near enough) the same place, we choose to
+ // draw an ellipse instead. This is preferable to faking an ellipse (by
+ // making stop ever-so-slightly less than start + TWO_PI) because the ends
+ // join up to each other rather than at a vertex at the centre (leaving
+ // an unwanted spike in the stroke/fill).
+ this._renderer.ellipse([vals.x,
+ vals.y,
+ vals.w,
+ vals.h,
+ detail]);
+ } else {
+ this._renderer.arc(vals.x, vals.y, vals.w, vals.h, angles.start, // [0, TWO_PI)
+ angles.stop, // [start, start + TWO_PI)
+ mode, detail);
+ //accessible Outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('arc', [
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h,
+ angles.start,
+ angles.stop,
+ mode
+ ]);
+ }
+ }
+ return this;
+ };
+ /**
+ * Draws an ellipse (oval) to the canvas. An ellipse with equal width and height
+ * is a circle. By default, the first two parameters set the location of the
+ * center of the ellipse. The third and fourth parameters set the shape's width
+ * and height, respectively. The origin may be changed with the
+ * ellipseMode() function.
+ *
+ * If no height is specified, the value of width is used for both the width and
+ * height. If a negative height or width is specified, the absolute value is
+ * taken.
+ *
+ * @method ellipse
+ * @param {Number} x x-coordinate of the center of the ellipse.
+ * @param {Number} y y-coordinate of the center of the ellipse.
+ * @param {Number} w width of the ellipse.
+ * @param {Number} [h] height of the ellipse.
+ * @chainable
+ * @example
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+ * describe('A white ellipse with a black outline. The top-right third is missing.');
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @method ellipse
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Integer} [detail] optional parameter for WebGL mode only. This is to
+ * specify the number of vertices that makes up the
+ * perimeter of the ellipse. Default value is 25. Won't
+ * draw a stroke for a detail of more than 50.
+ */
+ _main.default.prototype.ellipse = function (x, y, w, h, detailX) {
+ _main.default._validateParameters('ellipse', arguments);
+ return this._renderEllipse.apply(this, arguments);
+ };
+ /**
+ * Draws a circle to the canvas. A circle is a round shape. Every point on the
+ * edge of a circle is the same distance from its center. By default, the first
+ * two parameters set the location of the center of the circle. The third
+ * parameter sets the shape's width and height (diameter). The origin may be
+ * changed with the ellipseMode() function.
+ *
+ * @method circle
+ * @param {Number} x x-coordinate of the center of the circle.
+ * @param {Number} y y-coordinate of the center of the circle.
+ * @param {Number} d diameter of the circle.
+ * @chainable
+ * @example
+ *
+ * ellipse(56, 46, 55, 55);
+ * describe('A white ellipse with black outline in middle of a gray canvas.');
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.circle = function () {
+ _main.default._validateParameters('circle', arguments);
+ var args = Array.prototype.slice.call(arguments, 0, 2);
+ args.push(arguments[2]);
+ args.push(arguments[2]);
+ return this._renderEllipse.apply(this, _toConsumableArray(args));
+ };
+ // internal method for drawing ellipses (without parameter validation)
+ _main.default.prototype._renderEllipse = function (x, y, w, h, detailX) {
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ } // p5 supports negative width and heights for rects
+
+ if (w < 0) {
+ w = Math.abs(w);
+ }
+ if (typeof h === 'undefined') {
+ // Duplicate 3rd argument if only 3 given.
+ h = w;
+ } else if (h < 0) {
+ h = Math.abs(h);
+ }
+ var vals = _helpers.default.modeAdjust(x, y, w, h, this._renderer._ellipseMode);
+ this._renderer.ellipse([vals.x,
+ vals.y,
+ vals.w,
+ vals.h,
+ detailX]);
+ //accessible Outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('ellipse', [
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h
+ ]);
+ }
+ return this;
+ };
+ /**
+ * Draws a line, a straight path between two points. Its default width is one pixel.
+ * The version of `line()` with four parameters draws the line in 2D. To color a line,
+ * use the stroke() function. To change its width, use the
+ * strokeWeight() function. A line
+ * can't be filled, so the fill() function won't affect
+ * the color of a line.
+ *
+ * The version of `line()` with six parameters allows the line to be drawn in 3D
+ * space. Doing so requires adding the `WEBGL` argument to
+ * createCanvas().
+ *
+ * @method line
+ * @param {Number} x1 the x-coordinate of the first point.
+ * @param {Number} y1 the y-coordinate of the first point.
+ * @param {Number} x2 the x-coordinate of the second point.
+ * @param {Number} y2 the y-coordinate of the second point.
+ * @chainable
+ * @example
+ *
+ * circle(30, 30, 20);
+ * describe('A white circle with black outline in the middle of a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * line(30, 20, 85, 75);
+ * describe(
+ * 'A black line on a gray canvas running from top-center to bottom-right.'
+ * );
+ *
+ *
+ *
+ *
+ *
+ * line(30, 20, 85, 20);
+ * stroke(126);
+ * line(85, 20, 85, 75);
+ * stroke(255);
+ * line(85, 75, 30, 75);
+ * describe(
+ * 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
+ * );
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @method line
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 the z-coordinate of the first point.
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 the z-coordinate of the second point.
+ * @chainable
+ */
+ _main.default.prototype.line = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('line', args);
+ if (this._renderer._doStroke) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).line.apply(_this$_renderer, args);
+ } //accessible Outputs
+
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('line', args);
+ }
+ return this;
+ };
+ /**
+ * Draws a point, a single coordinate in space. Its default size is one pixel. The first two
+ * parameters are the point's x- and y-coordinates, respectively. To color a point, use
+ * the stroke() function. To change its size, use the
+ * strokeWeight() function.
+ *
+ * The version of `point()` with three parameters allows the point to be drawn in 3D
+ * space. Doing so requires adding the `WEBGL` argument to
+ * createCanvas().
+ *
+ * The version of point() with one parameter allows the point's location to be set with
+ * a p5.Vector object.
+ *
+ * @method point
+ * @param {Number} x the x-coordinate.
+ * @param {Number} y the y-coordinate.
+ * @param {Number} [z] the z-coordinate (for WebGL mode).
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * describe('A black line drawn on a gray canvas.');
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * line(0, 0, 0, 10, 10, 0);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * point(30, 20);
+ * point(85, 20);
+ * point(85, 75);
+ * point(30, 75);
+ * describe(
+ * 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+ * );
+ *
+ *
+ *
+ *
+ *
+ * point(30, 20);
+ * point(85, 20);
+ * stroke('purple');
+ * strokeWeight(10);
+ * point(85, 75);
+ * point(30, 75);
+ * describe(
+ * 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
+ * );
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @method point
+ * @param {p5.Vector} coordinateVector the coordinate vector.
+ * @chainable
+ */
+ _main.default.prototype.point = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('point', args);
+ if (this._renderer._doStroke) {
+ if (args.length === 1 && args[0] instanceof _main.default.Vector) {
+ this._renderer.point.call(this._renderer, args[0].x, args[0].y, args[0].z);
+ } else {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).point.apply(_this$_renderer2, args);
+ //accessible Outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('point', args);
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * Draws a quad to the canvas. A quad is a quadrilateral, a four-sided
+ * polygon. Some examples of quads include rectangles, squares, rhombuses,
+ * and trapezoids. The first pair of parameters (`x1`,`y1`) sets the quad's
+ * first point. The following pairs of parameters set the coordinates for
+ * its next three points. Parameters should proceed clockwise or
+ * counter-clockwise around the shape.
+ *
+ * The version of `quad()` with twelve parameters allows the quad to be drawn
+ * in 3D space. Doing so requires adding the `WEBGL` argument to
+ * createCanvas().
+ *
+ * @method quad
+ * @param {Number} x1 the x-coordinate of the first point.
+ * @param {Number} y1 the y-coordinate of the first point.
+ * @param {Number} x2 the x-coordinate of the second point.
+ * @param {Number} y2 the y-coordinate of the second point.
+ * @param {Number} x3 the x-coordinate of the third point.
+ * @param {Number} y3 the y-coordinate of the third point.
+ * @param {Number} x4 the x-coordinate of the fourth point.
+ * @param {Number} y4 the y-coordinate of the fourth point.
+ * @param {Integer} [detailX] number of segments in the x-direction.
+ * @param {Integer} [detailY] number of segments in the y-direction.
+ * @chainable
+ * @example
+ *
+ * let a = createVector(10, 10);
+ * point(a);
+ * let b = createVector(10, 20);
+ * point(b);
+ * let c = createVector(20, 10);
+ * point(c);
+ * let d = createVector(20, 20);
+ * point(d);
+ * describe(
+ * 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+ * );
+ *
+ *
+ *
+ *
+ *
+ * quad(20, 20, 80, 20, 80, 80, 20, 80);
+ * describe('A white square with a black outline drawn on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * quad(20, 30, 80, 30, 80, 70, 20, 70);
+ * describe('A white rectangle with a black outline drawn on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * quad(50, 62, 86, 50, 50, 38, 14, 50);
+ * describe('A white rhombus with a black outline drawn on a gray canvas.');
+ *
+ *
+ *
+ */
+ /**
+ * @method quad
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 the z-coordinate of the first point.
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 the z-coordinate of the second point.
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 the z-coordinate of the third point.
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 the z-coordinate of the fourth point.
+ * @param {Integer} [detailX]
+ * @param {Integer} [detailY]
+ * @chainable
+ */
+ _main.default.prototype.quad = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('quad', args);
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ if (this._renderer.isP3D && args.length < 12) {
+ // if 3D and we weren't passed 12 args, assume Z is 0
+ this._renderer.quad.call(this._renderer, args[0], args[1], 0, args[2], args[3], 0, args[4], args[5], 0, args[6], args[7], 0, args[8], args[9]);
+ } else {
+ var _this$_renderer3;
+ (_this$_renderer3 = this._renderer).quad.apply(_this$_renderer3, args);
+ //accessibile outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('quadrilateral', args);
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * Draws a rectangle to the canvas. A rectangle is a four-sided polygon with
+ * every angle at ninety degrees. By default, the first two parameters set the
+ * location of the rectangle's upper-left corner. The third and fourth set the
+ * shape's the width and height, respectively. The way these parameters are
+ * interpreted may be changed with the rectMode()
+ * function.
+ *
+ * The version of `rect()` with five parameters creates a rounded rectangle. The
+ * fifth parameter is used as the radius value for all four corners.
+ *
+ * The version of `rect()` with eight parameters also creates a rounded rectangle.
+ * When using eight parameters, the latter four set the radius of the arc at
+ * each corner separately. The radii start with the top-left corner and move
+ * clockwise around the rectangle. If any of these parameters are omitted, they
+ * are set to the value of the last specified corner radius.
+ *
+ * @method rect
+ * @param {Number} x x-coordinate of the rectangle.
+ * @param {Number} y y-coordinate of the rectangle.
+ * @param {Number} w width of the rectangle.
+ * @param {Number} [h] height of the rectangle.
+ * @param {Number} [tl] optional radius of top-left corner.
+ * @param {Number} [tr] optional radius of top-right corner.
+ * @param {Number} [br] optional radius of bottom-right corner.
+ * @param {Number} [bl] optional radius of bottom-left corner.
+ * @chainable
+ * @example
+ *
+ * quad(20, 50, 80, 30, 80, 70, 20, 70);
+ * describe('A white trapezoid with a black outline drawn on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * rect(30, 20, 55, 55);
+ * describe('A white rectangle with a black outline on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * rect(30, 20, 55, 55, 20);
+ * describe(
+ * 'A white rectangle with a black outline and round edges on a gray canvas.'
+ * );
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @method rect
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} w
+ * @param {Number} h
+ * @param {Integer} [detailX] number of segments in the x-direction (for WebGL mode).
+ * @param {Integer} [detailY] number of segments in the y-direction (for WebGL mode).
+ * @chainable
+ */
+ _main.default.prototype.rect = function () {
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+ _main.default._validateParameters('rect', args);
+ return this._renderRect.apply(this, args);
+ };
+ /**
+ * Draws a square to the canvas. A square is a four-sided polygon with every
+ * angle at ninety degrees and equal side lengths. By default, the first two
+ * parameters set the location of the square's upper-left corner. The third
+ * parameter sets its side size. The way these parameters are interpreted may
+ * be changed with the rectMode() function.
+ *
+ * The version of `square()` with four parameters creates a rounded square. The
+ * fourth parameter is used as the radius value for all four corners.
+ *
+ * The version of `square()` with seven parameters also creates a rounded square.
+ * When using seven parameters, the latter four set the radius of the arc at
+ * each corner separately. The radii start with the top-left corner and move
+ * clockwise around the square. If any of these parameters are omitted, they
+ * are set to the value of the last specified corner radius.
+ *
+ * @method square
+ * @param {Number} x x-coordinate of the square.
+ * @param {Number} y y-coordinate of the square.
+ * @param {Number} s side size of the square.
+ * @param {Number} [tl] optional radius of top-left corner.
+ * @param {Number} [tr] optional radius of top-right corner.
+ * @param {Number} [br] optional radius of bottom-right corner.
+ * @param {Number} [bl] optional radius of bottom-left corner.
+ * @chainable
+ * @example
+ *
+ * rect(30, 20, 55, 55, 20, 15, 10, 5);
+ * describe('A white rectangle with a black outline and round edges of different radii.');
+ *
+ *
+ *
+ *
+ *
+ * square(30, 20, 55);
+ * describe('A white square with a black outline in on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * square(30, 20, 55, 20);
+ * describe(
+ * 'A white square with a black outline and round edges on a gray canvas.'
+ * );
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.square = function (x, y, s, tl, tr, br, bl) {
+ _main.default._validateParameters('square', arguments);
+ // duplicate width for height in case of square
+ return this._renderRect.call(this, x, y, s, s, tl, tr, br, bl);
+ };
+ // internal method to have renderer draw a rectangle
+ _main.default.prototype._renderRect = function () {
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ // duplicate width for height in case only 3 arguments is provided
+ if (arguments.length === 3) {
+ arguments[3] = arguments[2];
+ }
+ var vals = _helpers.default.modeAdjust(arguments[0], arguments[1], arguments[2], arguments[3], this._renderer._rectMode);
+ var args = [
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h
+ ];
+ // append the additional arguments (either cornder radii, or
+ // segment details) to the argument list
+ for (var i = 4; i < arguments.length; i++) {
+ args[i] = arguments[i];
+ }
+ this._renderer.rect(args);
+ //accessible outputs
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('rectangle', [
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h
+ ]);
+ }
+ }
+ return this;
+ };
+ /**
+ * Draws a triangle to the canvas. A triangle is a three-sided polygon. The
+ * first two parameters specify the triangle's first point `(x1,y1)`. The middle
+ * two parameters specify its second point `(x2,y2)`. And the last two parameters
+ * specify its third point `(x3, y3)`.
+ *
+ * @method triangle
+ * @param {Number} x1 x-coordinate of the first point.
+ * @param {Number} y1 y-coordinate of the first point.
+ * @param {Number} x2 x-coordinate of the second point.
+ * @param {Number} y2 y-coordinate of the second point.
+ * @param {Number} x3 x-coordinate of the third point.
+ * @param {Number} y3 y-coordinate of the third point.
+ * @chainable
+ * @example
+ *
+ * square(30, 20, 55, 20, 15, 10, 5);
+ * describe('A white square with a black outline and round edges of different radii.');
+ *
+ *
+ *
+ *
+ */
+ _main.default.prototype.triangle = function () {
+ for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+ args[_key5] = arguments[_key5];
+ }
+ _main.default._validateParameters('triangle', args);
+ if (this._renderer._doStroke || this._renderer._doFill) {
+ this._renderer.triangle(args);
+ } //accessible outputs
+
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._accsOutput('triangle', args);
+ }
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 286,
+ '../friendly_errors/fes_core': 289,
+ '../friendly_errors/file_errors': 290,
+ '../friendly_errors/validate_params': 293,
+ '../helpers': 294,
+ '../main': 298,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 306: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Shape
+ * @submodule Attributes
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * Modifies the location from which ellipses, circles, and arcs are drawn. By default, the
+ * first two parameters are the x- and y-coordinates of the shape's center. The next
+ * parameters are its width and height. This is equivalent to calling `ellipseMode(CENTER)`.
+ *
+ * `ellipseMode(RADIUS)` also uses the first two parameters to set the x- and y-coordinates
+ * of the shape's center. The next parameters are half of the shapes's width and height.
+ * Calling `ellipse(0, 0, 10, 15)` draws a shape with a width of 20 and height of 30.
+ *
+ * `ellipseMode(CORNER)` uses the first two parameters as the upper-left corner of the
+ * shape. The next parameters are its width and height.
+ *
+ * `ellipseMode(CORNERS)` uses the first two parameters as the location of one corner
+ * of the ellipse's bounding box. The third and fourth parameters are the location of the
+ * opposite corner.
+ *
+ * The argument passed to `ellipseMode()` must be written in ALL CAPS because the constants
+ * `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this way. JavaScript is a
+ * case-sensitive language.
+ *
+ * @method ellipseMode
+ * @param {Constant} mode either CENTER, RADIUS, CORNER, or CORNERS
+ * @chainable
+ * @example
+ *
+ * triangle(30, 75, 58, 20, 86, 75);
+ * describe('A white triangle with a black outline on a gray canvas.');
+ *
+ *
+ *
+ *
+ *
+ * ellipseMode(RADIUS);
+ * fill(255);
+ * ellipse(50, 50, 30, 30);
+ * ellipseMode(CENTER);
+ * fill(100);
+ * ellipse(50, 50, 30, 30);
+ * describe('A white circle with a gray circle at its center. Both circles have black outlines.');
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.ellipseMode = function (m) {
+ _main.default._validateParameters('ellipseMode', arguments);
+ if (m === constants.CORNER || m === constants.CORNERS || m === constants.RADIUS || m === constants.CENTER) {
+ this._renderer._ellipseMode = m;
+ }
+ return this;
+ };
+ /**
+ * Draws all geometry with jagged (aliased) edges.
+ *
+ * smooth() is active by default in 2D mode. It's necessary to call
+ * noSmooth() to disable smoothing of geometry, images, and fonts.
+ *
+ * In WebGL mode, noSmooth() is active by default. It's necessary
+ * to call smooth() to draw smooth (antialiased) edges.
+ *
+ * @method noSmooth
+ * @chainable
+ * @example
+ *
+ * ellipseMode(CORNER);
+ * fill(255);
+ * ellipse(25, 25, 50, 50);
+ * ellipseMode(CORNERS);
+ * fill(100);
+ * ellipse(25, 25, 50, 50);
+ * describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.noSmooth = function () {
+ if (!this._renderer.isP3D) {
+ if ('imageSmoothingEnabled' in this.drawingContext) {
+ this.drawingContext.imageSmoothingEnabled = false;
+ }
+ } else {
+ this.setAttributes('antialias', false);
+ }
+ return this;
+ };
+ /**
+ * Modifies the location from which rectangles and squares are drawn. By default,
+ * the first two parameters are the x- and y-coordinates of the shape's upper-left
+ * corner. The next parameters are its width and height. This is equivalent to
+ * calling `rectMode(CORNER)`.
+ *
+ * `rectMode(CORNERS)` also uses the first two parameters as the location of one of
+ * the corners. The third and fourth parameters are the location of the opposite
+ * corner.
+ *
+ * `rectMode(CENTER)` uses the first two parameters as the x- and y-coordinates of
+ * the shape's center. The next parameters are its width and height.
+ *
+ * `rectMode(RADIUS)` also uses the first two parameters as the x- and y-coordinates
+ * of the shape's center. The next parameters are half of the shape's width and
+ * height.
+ *
+ * The argument passed to `rectMode()` must be written in ALL CAPS because the
+ * constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this way.
+ * JavaScript is a case-sensitive language.
+ *
+ * @method rectMode
+ * @param {Constant} mode either CORNER, CORNERS, CENTER, or RADIUS
+ * @chainable
+ * @example
+ *
+ * background(0);
+ * noStroke();
+ * smooth();
+ * ellipse(30, 48, 36, 36);
+ * noSmooth();
+ * ellipse(70, 48, 36, 36);
+ * describe('Two pixelated white circles on a black background.');
+ *
+ *
+ *
+ *
+ *
+ * rectMode(CORNER);
+ * fill(255);
+ * rect(25, 25, 50, 50);
+ *
+ * rectMode(CORNERS);
+ * fill(100);
+ * rect(25, 25, 50, 50);
+ *
+ * describe('A small gray square drawn at the top-left corner of a white square.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.rectMode = function (m) {
+ _main.default._validateParameters('rectMode', arguments);
+ if (m === constants.CORNER || m === constants.CORNERS || m === constants.RADIUS || m === constants.CENTER) {
+ this._renderer._rectMode = m;
+ }
+ return this;
+ };
+ /**
+ * Draws all geometry with smooth (anti-aliased) edges. smooth() will also
+ * improve image quality of resized images.
+ *
+ * smooth() is active by default in 2D mode. It's necessary to call
+ * noSmooth() to disable smoothing of geometry, images, and fonts.
+ *
+ * In WebGL mode, noSmooth() is active by default. It's necessary
+ * to call smooth() to draw smooth (antialiased) edges.
+ *
+ * @method smooth
+ * @chainable
+ * @example
+ *
+ * rectMode(RADIUS);
+ * fill(255);
+ * rect(50, 50, 30, 30);
+ *
+ * rectMode(CENTER);
+ * fill(100);
+ * rect(50, 50, 30, 30);
+ *
+ * describe('A small gray square drawn at the center of a white square.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.smooth = function () {
+ this.setAttributes('antialias', true);
+ if (!this._renderer.isP3D) {
+ if ('imageSmoothingEnabled' in this.drawingContext) {
+ this.drawingContext.imageSmoothingEnabled = true;
+ }
+ }
+ return this;
+ };
+ /**
+ * Sets the style for rendering line endings. These ends are either rounded
+ * (`ROUND`), squared (`SQUARE`), or extended (`PROJECT`). The default cap is
+ * `ROUND`.
+ *
+ * The argument passed to `strokeCap()` must be written in ALL CAPS because
+ * the constants `ROUND`, `SQUARE`, and `PROJECT` are defined this way.
+ * JavaScript is a case-sensitive language.
+ *
+ * @method strokeCap
+ * @param {Constant} cap either ROUND, SQUARE, or PROJECT
+ * @chainable
+ * @example
+ *
+ * background(0);
+ * noStroke();
+ * smooth();
+ * ellipse(30, 48, 36, 36);
+ * noSmooth();
+ * ellipse(70, 48, 36, 36);
+ * describe('Two pixelated white circles on a black background.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.strokeCap = function (cap) {
+ _main.default._validateParameters('strokeCap', arguments);
+ if (cap === constants.ROUND || cap === constants.SQUARE || cap === constants.PROJECT) {
+ this._renderer.strokeCap(cap);
+ }
+ return this;
+ };
+ /**
+ * Sets the style of the joints which connect line segments. These joints are
+ * either mitered (`MITER`), beveled (`BEVEL`), or rounded (`ROUND`). The default
+ * joint is `MITER` in 2D mode and `ROUND` in WebGL mode.
+ *
+ * The argument passed to `strokeJoin()` must be written in ALL CAPS because
+ * the constants `MITER`, `BEVEL`, and `ROUND` are defined this way.
+ * JavaScript is a case-sensitive language.
+ *
+ * @method strokeJoin
+ * @param {Constant} join either MITER, BEVEL, or ROUND
+ * @chainable
+ * @example
+ *
+ * strokeWeight(12.0);
+ * strokeCap(ROUND);
+ * line(20, 30, 80, 30);
+ * strokeCap(SQUARE);
+ * line(20, 50, 80, 50);
+ * strokeCap(PROJECT);
+ * line(20, 70, 80, 70);
+ * describe('Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.');
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(MITER);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ * describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(BEVEL);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ * describe('A right-facing arrowhead shape with a flat tip in center of canvas.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.strokeJoin = function (join) {
+ _main.default._validateParameters('strokeJoin', arguments);
+ if (join === constants.ROUND || join === constants.BEVEL || join === constants.MITER) {
+ this._renderer.strokeJoin(join);
+ }
+ return this;
+ };
+ /**
+ * Sets the width of the stroke used for lines, points, and the border around
+ * shapes. All widths are set in units of pixels.
+ *
+ * Note that `strokeWeight()` is affected by any transformation or scaling that
+ * has been applied previously.
+ *
+ * @method strokeWeight
+ * @param {Number} weight the weight of the stroke (in pixels).
+ * @chainable
+ * @example
+ *
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(ROUND);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ * describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
+ *
+ *
+ *
+ *
+ *
+ * // Default.
+ * line(20, 20, 80, 20);
+ * // Thicker.
+ * strokeWeight(4);
+ * line(20, 40, 80, 40);
+ * // Beastly.
+ * strokeWeight(10);
+ * line(20, 70, 80, 70);
+ * describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.strokeWeight = function (w) {
+ _main.default._validateParameters('strokeWeight', arguments);
+ this._renderer.strokeWeight(w);
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 286,
+ '../main': 298,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 307: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ _dereq_('../friendly_errors/fes_core');
+ _dereq_('../friendly_errors/file_errors');
+ _dereq_('../friendly_errors/validate_params');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Shape
+ * @submodule Curves
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Draws a cubic Bezier curve on the screen. These curves are defined by a
+ * series of anchor and control points. The first two parameters specify
+ * the first anchor point and the last two parameters specify the other
+ * anchor point, which become the first and last points on the curve. The
+ * middle parameters specify the two control points which define the shape
+ * of the curve. Approximately speaking, control points "pull" the curve
+ * towards them.
+ *
+ * Bezier curves were developed by French automotive engineer Pierre Bezier,
+ * and are commonly used in computer graphics to define gently sloping curves.
+ * See also curve().
+ *
+ * @method bezier
+ * @param {Number} x1 x-coordinate for the first anchor point
+ * @param {Number} y1 y-coordinate for the first anchor point
+ * @param {Number} x2 x-coordinate for the first control point
+ * @param {Number} y2 y-coordinate for the first control point
+ * @param {Number} x3 x-coordinate for the second control point
+ * @param {Number} y3 y-coordinate for the second control point
+ * @param {Number} x4 x-coordinate for the second anchor point
+ * @param {Number} y4 y-coordinate for the second anchor point
+ * @chainable
+ * @example
+ *
+ * // Default.
+ * line(20, 20, 80, 20);
+ * // Adding scale transformation.
+ * scale(5);
+ * // Coordinates adjusted for scaling.
+ * line(4, 8, 16, 8);
+ * describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * stroke(255, 102, 0);
+ * line(85, 20, 10, 10);
+ * line(90, 90, 15, 80);
+ * stroke(0, 0, 0);
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ *
+ *
+ *
+ *
+ * @alt
+ * stretched black s-shape in center with orange lines extending from end points.
+ * a white colored curve on black background from the upper-right corner to the lower right corner.
+ */
+ /**
+ * @method bezier
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate for the first anchor point
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate for the first control point
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate for the second control point
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate for the second anchor point
+ * @chainable
+ */
+
+ _main.default.prototype.bezier = function () {
+ var _this$_renderer;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('bezier', args);
+ // if the current stroke and fill settings wouldn't result in something
+ // visible, exit immediately
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }(_this$_renderer = this._renderer).bezier.apply(_this$_renderer, args);
+ return this;
+ };
+ /**
+ * Sets the resolution at which Bezier's curve is displayed. The default value is 20.
+ *
+ * Note, This function is only useful when using the WEBGL renderer
+ * as the default canvas renderer does not use this information.
+ *
+ * @method bezierDetail
+ * @param {Number} detail resolution of the curves
+ * @chainable
+ * @example
+ *
+ * background(0, 0, 0);
+ * noFill();
+ * stroke(255);
+ * bezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);
+ *
+ *
+ *
+ *
+ * @alt
+ * stretched black s-shape with a low level of bezier detail
+ */
+ _main.default.prototype.bezierDetail = function (d) {
+ _main.default._validateParameters('bezierDetail', arguments);
+ this._bezierDetail = d;
+ return this;
+ };
+ /**
+ * Given the x or y co-ordinate values of control and anchor points of a bezier
+ * curve, it evaluates the x or y coordinate of the bezier at position t. The
+ * parameters a and d are the x or y coordinates of first and last points on the
+ * curve while b and c are of the control points.The final parameter t is the
+ * position of the resultant point which is given between 0 and 1.
+ * This can be done once with the x coordinates and a second time
+ * with the y coordinates to get the location of a bezier curve at t.
+ *
+ * @method bezierPoint
+ * @param {Number} a coordinate of first point on the curve
+ * @param {Number} b coordinate of first control point
+ * @param {Number} c coordinate of second control point
+ * @param {Number} d coordinate of second point on the curve
+ * @param {Number} t value between 0 and 1
+ * @return {Number} the value of the Bezier at position t
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noFill();
+ * bezierDetail(5);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * bezier(
+ * -40, -40, 0,
+ * 90, -40, 0,
+ * -90, 40, 0,
+ * 40, 40, 0
+ * );
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * 10 points plotted on a given bezier at equal distances.
+ */
+ _main.default.prototype.bezierPoint = function (a, b, c, d, t) {
+ _main.default._validateParameters('bezierPoint', arguments);
+ var adjustedT = 1 - t;
+ return Math.pow(adjustedT, 3) * a + 3 * Math.pow(adjustedT, 2) * t * b + 3 * adjustedT * Math.pow(t, 2) * c + Math.pow(t, 3) * d;
+ };
+ /**
+ * Evaluates the tangent to the Bezier at position t for points a, b, c, d.
+ * The parameters a and d are the first and last points
+ * on the curve, and b and c are the control points.
+ * The final parameter t varies between 0 and 1.
+ *
+ * @method bezierTangent
+ * @param {Number} a coordinate of first point on the curve
+ * @param {Number} b coordinate of first control point
+ * @param {Number} c coordinate of second control point
+ * @param {Number} d coordinate of second point on the curve
+ * @param {Number} t value between 0 and 1
+ * @return {Number} the tangent at position t
+ * @example
+ *
+ * noFill();
+ * let x1 = 85,
+ x2 = 10,
+ x3 = 90,
+ x4 = 15;
+ * let y1 = 20,
+ y2 = 10,
+ y3 = 90,
+ y4 = 80;
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+ * fill(255);
+ * let steps = 10;
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * let x = bezierPoint(x1, x2, x3, x4, t);
+ * let y = bezierPoint(y1, y2, y3, y4, t);
+ * circle(x, y, 5);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ * let steps = 6;
+ * fill(255);
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * // Get the location of the point
+ * let x = bezierPoint(85, 10, 90, 15, t);
+ * let y = bezierPoint(20, 10, 90, 80, t);
+ * // Get the tangent points
+ * let tx = bezierTangent(85, 10, 90, 15, t);
+ * let ty = bezierTangent(20, 10, 90, 80, t);
+ * // Calculate an angle from the tangent points
+ * let a = atan2(ty, tx);
+ * a += PI;
+ * stroke(255, 102, 0);
+ * line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);
+ * // The following line of code makes a line
+ * // inverse of the above line
+ * //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);
+ * stroke(0);
+ * ellipse(x, y, 5, 5);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * s-shaped line with 6 short orange lines showing the tangents at those points.
+ * s-shaped line with 6 short orange lines showing lines coming out the underside of the bezier.
+ */
+ _main.default.prototype.bezierTangent = function (a, b, c, d, t) {
+ _main.default._validateParameters('bezierTangent', arguments);
+ var adjustedT = 1 - t;
+ return 3 * d * Math.pow(t, 2) - 3 * c * Math.pow(t, 2) + 6 * c * adjustedT * t - 6 * b * adjustedT * t + 3 * b * Math.pow(adjustedT, 2) - 3 * a * Math.pow(adjustedT, 2);
+ };
+ /**
+ * Draws a curved line on the screen between two points, given as the
+ * middle four parameters. The first two parameters are a control point, as
+ * if the curve came from this point even though it's not drawn. The last
+ * two parameters similarly describe the other control point.
+ * noFill();
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ * stroke(255, 102, 0);
+ * let steps = 16;
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * let x = bezierPoint(85, 10, 90, 15, t);
+ * let y = bezierPoint(20, 10, 90, 80, t);
+ * let tx = bezierTangent(85, 10, 90, 15, t);
+ * let ty = bezierTangent(20, 10, 90, 80, t);
+ * let a = atan2(ty, tx);
+ * a -= HALF_PI;
+ * line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
+ * }
+ *
+ * + * Longer curves can be created by putting a series of curve() functions + * together or using curveVertex(). An additional function called + * curveTightness() provides control for the visual quality of the curve. + * The curve() function is an implementation of Catmull-Rom splines. + * + * @method curve + * @param {Number} x1 x-coordinate for the beginning control point + * @param {Number} y1 y-coordinate for the beginning control point + * @param {Number} x2 x-coordinate for the first point + * @param {Number} y2 y-coordinate for the first point + * @param {Number} x3 x-coordinate for the second point + * @param {Number} y3 y-coordinate for the second point + * @param {Number} x4 x-coordinate for the ending control point + * @param {Number} y4 y-coordinate for the ending control point + * @chainable + * @example + *
+ *
+ *
+ *
+ * noFill();
+ * stroke(255, 102, 0);
+ * curve(5, 26, 5, 26, 73, 24, 73, 61);
+ * stroke(0);
+ * curve(5, 26, 73, 24, 73, 61, 15, 65);
+ * stroke(255, 102, 0);
+ * curve(73, 24, 73, 61, 15, 65, 15, 65);
+ *
+ *
+ *
+ *
+ *
+ * // Define the curve points as JavaScript objects
+ * let p1 = { x: 5, y: 26 };
+ * let p2 = { x: 73, y: 24 };
+ * let p3 = { x: 73, y: 61 };
+ * let p4 = { x: 15, y: 65 };
+ * noFill();
+ * stroke(255, 102, 0);
+ * curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+ * stroke(0);
+ * curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
+ * stroke(255, 102, 0);
+ * curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);
+ *
+ *
+ *
+ *
+ * @alt
+ * horseshoe shape with orange ends facing left and black curved center.
+ * horseshoe shape with orange ends facing left and black curved center.
+ * curving black and orange lines.
+ */
+ /**
+ * @method curve
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate for the beginning control point
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate for the first point
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate for the second point
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate for the ending control point
+ * @chainable
+ */
+ _main.default.prototype.curve = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('curve', args);
+ if (this._renderer._doStroke) {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).curve.apply(_this$_renderer2, args);
+ }
+ return this;
+ };
+ /**
+ * Sets the resolution at which curves display. The default value is 20 while
+ * the minimum value is 3.
+ *
+ * This function is only useful when using the WEBGL renderer
+ * as the default canvas renderer does not use this
+ * information.
+ *
+ * @method curveDetail
+ * @param {Number} resolution resolution of the curves
+ * @chainable
+ * @example
+ *
+ * noFill();
+ * stroke(255, 102, 0);
+ * curve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);
+ * stroke(0);
+ * curve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);
+ * stroke(255, 102, 0);
+ * curve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);
+ *
+ *
+ *
+ *
+ * @alt
+ * white arch shape with a low level of curve detail.
+ */
+ _main.default.prototype.curveDetail = function (d) {
+ _main.default._validateParameters('curveDetail', arguments);
+ if (d < 3) {
+ this._curveDetail = 3;
+ } else {
+ this._curveDetail = d;
+ }
+ return this;
+ };
+ /**
+ * Modifies the quality of forms created with curve()
+ * and curveVertex().The parameter tightness
+ * determines how the curve fits to the vertex points. The value 0.0 is the
+ * default value for tightness (this value defines the curves to be Catmull-Rom
+ * splines) and the value 1.0 connects all the points with straight lines.
+ * Values within the range -5.0 and 5.0 will deform the curves but will leave
+ * them recognizable and as values increase in magnitude, they will continue to deform.
+ *
+ * @method curveTightness
+ * @param {Number} amount amount of deformation from the original vertices
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * curveDetail(5);
+ * }
+ * function draw() {
+ * background(200);
+ *
+ * curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * Line shaped like right-facing arrow,points move with mouse-x and warp shape.
+ */
+ _main.default.prototype.curveTightness = function (t) {
+ _main.default._validateParameters('curveTightness', arguments);
+ this._renderer._curveTightness = t;
+ return this;
+ };
+ /**
+ * Evaluates the curve at position t for points a, b, c, d.
+ * The parameter t varies between 0 and 1, a and d are control points
+ * of the curve, and b and c are the start and end points of the curve.
+ * This can be done once with the x coordinates and a second time
+ * with the y coordinates to get the location of a curve at t.
+ *
+ * @method curvePoint
+ * @param {Number} a coordinate of first control point of the curve
+ * @param {Number} b coordinate of first point
+ * @param {Number} c coordinate of second point
+ * @param {Number} d coordinate of second control point
+ * @param {Number} t value between 0 and 1
+ * @return {Number} Curve value at position t
+ * @example
+ *
+ * // Move the mouse left and right to see the curve change
+ * function setup() {
+ * createCanvas(100, 100);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * let t = map(mouseX, 0, width, -5, 5);
+ * curveTightness(t);
+ * beginShape();
+ * curveVertex(10, 26);
+ * curveVertex(10, 26);
+ * curveVertex(83, 24);
+ * curveVertex(83, 61);
+ * curveVertex(25, 65);
+ * curveVertex(25, 65);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *line hooking down to right-bottom with 13 5×5 white ellipse points
+ */
+ _main.default.prototype.curvePoint = function (a, b, c, d, t) {
+ _main.default._validateParameters('curvePoint', arguments);
+ var s = this._renderer._curveTightness,
+ t3 = t * t * t,
+ t2 = t * t,
+ f1 = (s - 1) / 2 * t3 + (1 - s) * t2 + (s - 1) / 2 * t,
+ f2 = (s + 3) / 2 * t3 + ( - 5 - s) / 2 * t2 + 1,
+ f3 = ( - 3 - s) / 2 * t3 + (s + 2) * t2 + (1 - s) / 2 * t,
+ f4 = (1 - s) / 2 * t3 + (s - 1) / 2 * t2;
+ return a * f1 + b * f2 + c * f3 + d * f4;
+ };
+ /**
+ * Evaluates the tangent to the curve at position t for points a, b, c, d.
+ * The parameter t varies between 0 and 1, a and d are points on the curve,
+ * and b and c are the control points.
+ *
+ * @method curveTangent
+ * @param {Number} a coordinate of first control point
+ * @param {Number} b coordinate of first point on the curve
+ * @param {Number} c coordinate of second point on the curve
+ * @param {Number} d coordinate of second conrol point
+ * @param {Number} t value between 0 and 1
+ * @return {Number} the tangent at position t
+ * @example
+ *
+ * noFill();
+ * curve(5, 26, 5, 26, 73, 24, 73, 61);
+ * curve(5, 26, 73, 24, 73, 61, 15, 65);
+ * fill(255);
+ * ellipseMode(CENTER);
+ * let steps = 6;
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * let x = curvePoint(5, 5, 73, 73, t);
+ * let y = curvePoint(26, 26, 24, 61, t);
+ * ellipse(x, y, 5, 5);
+ * x = curvePoint(5, 73, 73, 15, t);
+ * y = curvePoint(26, 24, 61, 65, t);
+ * ellipse(x, y, 5, 5);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * right curving line mid-right of canvas with 7 short lines radiating from it.
+ */
+ _main.default.prototype.curveTangent = function (a, b, c, d, t) {
+ _main.default._validateParameters('curveTangent', arguments);
+ var s = this._renderer._curveTightness,
+ tt3 = t * t * 3,
+ t2 = t * 2,
+ f1 = (s - 1) / 2 * tt3 + (1 - s) * t2 + (s - 1) / 2,
+ f2 = (s + 3) / 2 * tt3 + ( - 5 - s) / 2 * t2,
+ f3 = ( - 3 - s) / 2 * tt3 + (s + 2) * t2 + (1 - s) / 2,
+ f4 = (1 - s) / 2 * tt3 + (s - 1) / 2 * t2;
+ return a * f1 + b * f2 + c * f3 + d * f4;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../friendly_errors/fes_core': 289,
+ '../friendly_errors/file_errors': 290,
+ '../friendly_errors/validate_params': 293,
+ '../main': 298
+ }
+ ],
+ 308: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.slice');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../main'));
+ var constants = _interopRequireWildcard(_dereq_('../constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Shape
+ * @submodule Vertex
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+
+ var shapeKind = null;
+ var vertices = [
+ ];
+ var contourVertices = [
+ ];
+ var isBezier = false;
+ var isCurve = false;
+ var isQuadratic = false;
+ var isContour = false;
+ var isFirstContour = true;
+ /**
+ * Use the beginContour() and
+ * endContour() functions to create negative shapes
+ * within shapes such as the center of the letter 'O'. beginContour()
+ * begins recording vertices for the shape and endContour() stops recording.
+ * The vertices that define a negative shape must "wind" in the opposite direction
+ * from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices
+ * shape in counter-clockwise.
+ *
+ * These functions can only be used within a beginShape()/endShape() pair and
+ * transformations such as translate(), rotate(), and scale() do not work
+ * within a beginContour()/endContour() pair. It is also not possible to use
+ * other shapes, such as ellipse() or rect() within.
+ *
+ * @method beginContour
+ * @chainable
+ * @example
+ *
+ * noFill();
+ * curve(5, 26, 73, 24, 73, 61, 15, 65);
+ * let steps = 6;
+ * for (let i = 0; i <= steps; i++) {
+ * let t = i / steps;
+ * let x = curvePoint(5, 73, 73, 15, t);
+ * let y = curvePoint(26, 24, 61, 65, t);
+ * //ellipse(x, y, 5, 5);
+ * let tx = curveTangent(5, 73, 73, 15, t);
+ * let ty = curveTangent(26, 24, 61, 65, t);
+ * let a = atan2(ty, tx);
+ * a -= PI / 2.0;
+ * line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * white rect and smaller grey rect with red outlines in center of canvas.
+ */
+ _main.default.prototype.beginContour = function () {
+ if (this._renderer.isP3D) {
+ this._renderer.beginContour();
+ } else {
+ contourVertices = [
+ ];
+ isContour = true;
+ }
+ return this;
+ };
+ /**
+ * Using the beginShape() and endShape() functions allow creating more
+ * complex forms. beginShape() begins recording vertices for a shape and
+ * endShape() stops recording. The value of the kind parameter tells it which
+ * types of shapes to create from the provided vertices. With no mode
+ * specified, the shape can be any irregular polygon.
+ *
+ * The parameters available for beginShape() are:
+ *
+ * POINTS
+ * Draw a series of points
+ *
+ * LINES
+ * Draw a series of unconnected line segments (individual lines)
+ *
+ * TRIANGLES
+ * Draw a series of separate triangles
+ *
+ * TRIANGLE_FAN
+ * Draw a series of connected triangles sharing the first vertex in a fan-like fashion
+ *
+ * TRIANGLE_STRIP
+ * Draw a series of connected triangles in strip fashion
+ *
+ * QUADS
+ * Draw a series of separate quads
+ *
+ * QUAD_STRIP
+ * Draw quad strip using adjacent edges to form the next quad
+ *
+ * TESS (WEBGL only)
+ * Handle irregular polygon for filling curve by explicit tessellation
+ *
+ * After calling the beginShape() function, a series of vertex() commands must follow. To stop
+ * drawing the shape, call endShape(). Each shape will be outlined with the
+ * current stroke color and filled with the fill color.
+ *
+ * Transformations such as translate(), rotate(), and scale() do not work
+ * within beginShape(). It is also not possible to use other shapes, such as
+ * ellipse() or rect() within beginShape().
+ *
+ * @method beginShape
+ * @param {Constant} [kind] either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
+ * TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS
+ * @chainable
+ * @example
+ *
+ * translate(50, 50);
+ * stroke(255, 0, 0);
+ * beginShape();
+ * // Exterior part of shape, clockwise winding
+ * vertex(-40, -40);
+ * vertex(40, -40);
+ * vertex(40, 40);
+ * vertex(-40, 40);
+ * // Interior part of shape, counter-clockwise winding
+ * beginContour();
+ * vertex(-20, -20);
+ * vertex(-20, 20);
+ * vertex(20, 20);
+ * vertex(20, -20);
+ * endContour();
+ * endShape(CLOSE);
+ *
+ *
+ *
+ *
+ *
+ * beginShape();
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape(CLOSE);
+ *
+ *
+ *
+ *
+ *
+ * beginShape(POINTS);
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(LINES);
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * beginShape();
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * beginShape();
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape(CLOSE);
+ *
+ *
+ *
+ *
+ *
+ * beginShape(TRIANGLES);
+ * vertex(30, 75);
+ * vertex(40, 20);
+ * vertex(50, 75);
+ * vertex(60, 20);
+ * vertex(70, 75);
+ * vertex(80, 20);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(TRIANGLE_STRIP);
+ * vertex(30, 75);
+ * vertex(40, 20);
+ * vertex(50, 75);
+ * vertex(60, 20);
+ * vertex(70, 75);
+ * vertex(80, 20);
+ * vertex(90, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(TRIANGLE_FAN);
+ * vertex(57.5, 50);
+ * vertex(57.5, 15);
+ * vertex(92, 50);
+ * vertex(57.5, 85);
+ * vertex(22, 50);
+ * vertex(57.5, 15);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(QUADS);
+ * vertex(30, 20);
+ * vertex(30, 75);
+ * vertex(50, 75);
+ * vertex(50, 20);
+ * vertex(65, 20);
+ * vertex(65, 75);
+ * vertex(85, 75);
+ * vertex(85, 20);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape(QUAD_STRIP);
+ * vertex(30, 20);
+ * vertex(30, 75);
+ * vertex(50, 20);
+ * vertex(50, 75);
+ * vertex(65, 20);
+ * vertex(65, 75);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ * @alt
+ * white square-shape with black outline in middle-right of canvas.
+ * 4 black points in a square shape in middle-right of canvas.
+ * 2 horizontal black lines. In the top-right and bottom-right of canvas.
+ * 3 line shape with horizontal on top, vertical in middle and horizontal bottom.
+ * square line shape in middle-right of canvas.
+ * 2 white triangle shapes mid-right canvas. left one pointing up and right down.
+ * 5 horizontal interlocking and alternating white triangles in mid-right canvas.
+ * 4 interlocking white triangles in 45 degree rotated square-shape.
+ * 2 white rectangle shapes in mid-right canvas. Both 20×55.
+ * 3 side-by-side white rectangles center rect is smaller in mid-right canvas.
+ * Thick white l-shape with black outline mid-top-left of canvas.
+ */
+ _main.default.prototype.beginShape = function (kind) {
+ _main.default._validateParameters('beginShape', arguments);
+ if (this._renderer.isP3D) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).beginShape.apply(_this$_renderer, arguments);
+ } else {
+ if (kind === constants.POINTS || kind === constants.LINES || kind === constants.TRIANGLES || kind === constants.TRIANGLE_FAN || kind === constants.TRIANGLE_STRIP || kind === constants.QUADS || kind === constants.QUAD_STRIP) {
+ shapeKind = kind;
+ } else {
+ shapeKind = null;
+ }
+ vertices = [
+ ];
+ contourVertices = [
+ ];
+ }
+ return this;
+ };
+ /**
+ * Specifies vertex coordinates for Bezier curves. Each call to
+ * bezierVertex() defines the position of two control points and
+ * one anchor point of a Bezier curve, adding a new segment to a
+ * line or shape. For WebGL mode bezierVertex() can be used in 2D
+ * as well as 3D mode. 2D mode expects 6 parameters, while 3D mode
+ * expects 9 parameters (including z coordinates).
+ *
+ * The first time bezierVertex() is used within a beginShape()
+ * call, it must be prefaced with a call to vertex() to set the first anchor
+ * point. This function must be used between beginShape() and endShape()
+ * and only when there is no MODE or POINTS parameter specified to
+ * beginShape().
+ *
+ * @method bezierVertex
+ * @param {Number} x2 x-coordinate for the first control point
+ * @param {Number} y2 y-coordinate for the first control point
+ * @param {Number} x3 x-coordinate for the second control point
+ * @param {Number} y3 y-coordinate for the second control point
+ * @param {Number} x4 x-coordinate for the anchor point
+ * @param {Number} y4 y-coordinate for the anchor point
+ * @chainable
+ *
+ * @example
+ *
+ * beginShape(TESS);
+ * vertex(20, 20);
+ * vertex(80, 20);
+ * vertex(80, 40);
+ * vertex(40, 40);
+ * vertex(40, 60);
+ * vertex(80, 60);
+ * vertex(80, 80);
+ * vertex(20, 80);
+ * endShape(CLOSE);
+ *
+ *
+ *
+ *
+ *
+ * noFill();
+ * beginShape();
+ * vertex(30, 20);
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * beginShape();
+ * vertex(30, 20);
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * bezierVertex(50, 80, 60, 25, 30, 20);
+ * endShape();
+ *
+ *
+ *
+ *
+ * @alt
+ * crescent-shaped line in middle of canvas. Points facing left.
+ * white crescent shape in middle of canvas. Points facing left.
+ * crescent shape in middle of canvas with another crescent shape on positive z-axis.
+ */
+ /**
+ * @method bezierVertex
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate for the first control point (for WebGL mode)
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate for the second control point (for WebGL mode)
+ * @param {Number} x4
+ * @param {Number} y4
+ * @param {Number} z4 z-coordinate for the anchor point (for WebGL mode)
+ * @chainable
+ */
+ _main.default.prototype.bezierVertex = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('bezierVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).bezierVertex.apply(_this$_renderer2, args);
+ } else {
+ if (vertices.length === 0) {
+ _main.default._friendlyError('vertex() must be used once before calling bezierVertex()', 'bezierVertex');
+ } else {
+ isBezier = true;
+ var vert = [
+ ];
+ for (var i = 0; i < args.length; i++) {
+ vert[i] = args[i];
+ }
+ vert.isVert = false;
+ if (isContour) {
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * Specifies vertex coordinates for curves. This function may only
+ * be used between beginShape() and endShape() and only when there
+ * is no MODE parameter specified to beginShape().
+ * For WebGL mode curveVertex() can be used in 2D as well as 3D mode.
+ * 2D mode expects 2 parameters, while 3D mode expects 3 parameters.
+ *
+ * The first and last points in a series of curveVertex() lines will be used to
+ * guide the beginning and end of the curve. A minimum of four
+ * points is required to draw a tiny curve between the second and
+ * third points. Adding a fifth point with curveVertex() will draw
+ * the curve between the second, third, and fourth points. The
+ * curveVertex() function is an implementation of Catmull-Rom
+ * splines.
+ *
+ * @method curveVertex
+ * @param {Number} x x-coordinate of the vertex
+ * @param {Number} y y-coordinate of the vertex
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ * function draw() {
+ * orbitControl();
+ * background(50);
+ * strokeWeight(4);
+ * stroke(255);
+ * point(-25, 30);
+ * point(25, 30);
+ * point(25, -30);
+ * point(-25, -30);
+ *
+ * strokeWeight(1);
+ * noFill();
+ *
+ * beginShape();
+ * vertex(-25, 30);
+ * bezierVertex(25, 30, 25, -30, -25, -30);
+ * endShape();
+ *
+ * beginShape();
+ * vertex(-25, 30, 20);
+ * bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * Upside-down u-shape line, mid canvas. left point extends beyond canvas view.
+ */
+ /**
+ * @method curveVertex
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z] z-coordinate of the vertex (for WebGL mode)
+ * @chainable
+ * @example
+ *
+ * strokeWeight(5);
+ * point(84, 91);
+ * point(68, 19);
+ * point(21, 17);
+ * point(32, 91);
+ * strokeWeight(1);
+ *
+ * noFill();
+ * beginShape();
+ * curveVertex(84, 91);
+ * curveVertex(84, 91);
+ * curveVertex(68, 19);
+ * curveVertex(21, 17);
+ * curveVertex(32, 91);
+ * curveVertex(32, 91);
+ * endShape();
+ *
+ *
+ *
+ *
+ * @alt
+ * Upside-down u-shape line, mid canvas with the same shape in positive z-axis.
+ */
+ _main.default.prototype.curveVertex = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('curveVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer3;
+ (_this$_renderer3 = this._renderer).curveVertex.apply(_this$_renderer3, args);
+ } else {
+ isCurve = true;
+ this.vertex(args[0], args[1]);
+ }
+ return this;
+ };
+ /**
+ * Use the beginContour() and endContour() functions to create negative
+ * shapes within shapes such as the center of the letter 'O'. beginContour()
+ * begins recording vertices for the shape and endContour() stops recording.
+ * The vertices that define a negative shape must "wind" in the opposite
+ * direction from the exterior shape. First draw vertices for the exterior
+ * clockwise order, then for internal shapes, draw vertices
+ * shape in counter-clockwise.
+ *
+ * These functions can only be used within a beginShape()/endShape() pair and
+ * transformations such as translate(), rotate(), and scale() do not work
+ * within a beginContour()/endContour() pair. It is also not possible to use
+ * other shapes, such as ellipse() or rect() within.
+ *
+ * @method endContour
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ * function draw() {
+ * orbitControl();
+ * background(50);
+ * strokeWeight(4);
+ * stroke(255);
+ *
+ * point(-25, 25);
+ * point(-25, 25);
+ * point(-25, -25);
+ * point(25, -25);
+ * point(25, 25);
+ * point(25, 25);
+ *
+ * strokeWeight(1);
+ * noFill();
+ *
+ * beginShape();
+ * curveVertex(-25, 25);
+ * curveVertex(-25, 25);
+ * curveVertex(-25, -25);
+ * curveVertex(25, -25);
+ * curveVertex(25, 25);
+ * curveVertex(25, 25);
+ * endShape();
+ *
+ * beginShape();
+ * curveVertex(-25, 25, 20);
+ * curveVertex(-25, 25, 20);
+ * curveVertex(-25, -25, 20);
+ * curveVertex(25, -25, 20);
+ * curveVertex(25, 25, 20);
+ * curveVertex(25, 25, 20);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * white rect and smaller grey rect with red outlines in center of canvas.
+ */
+ _main.default.prototype.endContour = function () {
+ if (this._renderer.isP3D) {
+ return this;
+ }
+ var vert = contourVertices[0].slice(); // copy all data
+ vert.isVert = contourVertices[0].isVert;
+ vert.moveTo = false;
+ contourVertices.push(vert);
+ // prevent stray lines with multiple contours
+ if (isFirstContour) {
+ vertices.push(vertices[0]);
+ isFirstContour = false;
+ }
+ for (var i = 0; i < contourVertices.length; i++) {
+ vertices.push(contourVertices[i]);
+ }
+ return this;
+ };
+ /**
+ * The endShape() function is the companion to beginShape() and may only be
+ * called after beginShape(). When endShape() is called, all of the image
+ * data defined since the previous call to beginShape() is written into the image
+ * buffer. The constant CLOSE is the value for the `mode` parameter to close
+ * the shape (to connect the beginning and the end).
+ * When using instancing with endShape() the instancing will not apply to the strokes.
+ * When the count parameter is used with a value greater than 1, it enables instancing for shapes built when in WEBGL mode. Instancing
+ * is a feature that allows the GPU to efficiently draw multiples of the same shape. It's often used for particle effects or other
+ * times when you need a lot of repetition. In order to take advantage of instancing, you will also need to write your own custom
+ * shader using the gl_InstanceID keyword. You can read more about instancing
+ * here or by working from the example on this
+ * page.
+ *
+ * @method endShape
+ * @param {Constant} [mode] use CLOSE to close the shape
+ * @param {Integer} [count] number of times you want to draw/instance the shape (for WebGL mode).
+ * @chainable
+ * @example
+ *
+ * translate(50, 50);
+ * stroke(255, 0, 0);
+ * beginShape();
+ * // Exterior part of shape, clockwise winding
+ * vertex(-40, -40);
+ * vertex(40, -40);
+ * vertex(40, 40);
+ * vertex(-40, 40);
+ * // Interior part of shape, counter-clockwise winding
+ * beginContour();
+ * vertex(-20, -20);
+ * vertex(-20, 20);
+ * vertex(20, 20);
+ * vertex(20, -20);
+ * endContour();
+ * endShape(CLOSE);
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * noFill();
+ *
+ * beginShape();
+ * vertex(20, 20);
+ * vertex(45, 20);
+ * vertex(45, 80);
+ * endShape(CLOSE);
+ *
+ * beginShape();
+ * vertex(50, 20);
+ * vertex(75, 20);
+ * vertex(75, 80);
+ * endShape();
+ *
+ *
+ *
+ *
+ * @alt
+ * Triangle line shape with smallest interior angle on bottom and upside-down L.
+ */
+ _main.default.prototype.endShape = function (mode) {
+ var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+ _main.default._validateParameters('endShape', arguments);
+ if (count < 1) {
+ console.log('🌸 p5.js says: You can not have less than one instance');
+ count = 1;
+ }
+ if (this._renderer.isP3D) {
+ this._renderer.endShape(mode, isCurve, isBezier, isQuadratic, isContour, shapeKind, count);
+ } else {
+ if (count !== 1) {
+ console.log('🌸 p5.js says: Instancing is only supported in WebGL2 mode');
+ }
+ if (vertices.length === 0) {
+ return this;
+ }
+ if (!this._renderer._doStroke && !this._renderer._doFill) {
+ return this;
+ }
+ var closeShape = mode === constants.CLOSE;
+ // if the shape is closed, the first element is also the last element
+ if (closeShape && !isContour) {
+ vertices.push(vertices[0]);
+ }
+ this._renderer.endShape(mode, vertices, isCurve, isBezier, isQuadratic, isContour, shapeKind);
+ // Reset some settings
+ isCurve = false;
+ isBezier = false;
+ isQuadratic = false;
+ isContour = false;
+ isFirstContour = true;
+ // If the shape is closed, the first element was added as last element.
+ // We must remove it again to prevent the list of vertices from growing
+ // over successive calls to endShape(CLOSE)
+ if (closeShape) {
+ vertices.pop();
+ }
+ }
+ return this;
+ };
+ /**
+ * Specifies vertex coordinates for quadratic Bezier curves. Each call to
+ * quadraticVertex() defines the position of one control points and one
+ * anchor point of a Bezier curve, adding a new segment to a line or shape.
+ * The first time quadraticVertex() is used within a beginShape() call, it
+ * must be prefaced with a call to vertex() to set the first anchor point.
+ * For WebGL mode quadraticVertex() can be used in 2D as well as 3D mode.
+ * 2D mode expects 4 parameters, while 3D mode expects 6 parameters
+ * (including z coordinates).
+ *
+ * This function must be used between beginShape() and endShape()
+ * and only when there is no MODE or POINTS parameter specified to
+ * beginShape().
+ *
+ * @method quadraticVertex
+ * @param {Number} cx x-coordinate for the control point
+ * @param {Number} cy y-coordinate for the control point
+ * @param {Number} x3 x-coordinate for the anchor point
+ * @param {Number} y3 y-coordinate for the anchor point
+ * @chainable
+ *
+ * @example
+ *
+ * let fx;
+ * let vs = `#version 300 es
+ *
+ * precision mediump float;
+ *
+ * in vec3 aPosition;
+ * flat out int instanceID;
+ *
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * void main() {
+ *
+ * // copy the instance ID to the fragment shader
+ * instanceID = gl_InstanceID;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ *
+ * // gl_InstanceID represents a numeric value for each instance
+ * // using gl_InstanceID allows us to move each instance separately
+ * // here we move each instance horizontally by id * 100
+ * float xOffset = float(gl_InstanceID) * 100.0;
+ *
+ * // apply the offset to the final position
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4 -
+ * vec4(xOffset, 0.0, 0.0, 0.0);
+ * }
+ * `;
+ * let fs = `#version 300 es
+ *
+ * precision mediump float;
+ *
+ * out vec4 outColor;
+ * flat in int instanceID;
+ * uniform float numInstances;
+ *
+ * void main() {
+ * vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
+ * vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
+ *
+ * // Normalize the instance id
+ * float normId = float(instanceID) / numInstances;
+ *
+ * // Mix between two colors using the normalized instance id
+ * outColor = mix(red, blue, normId);
+ * }
+ * `;
+ *
+ * function setup() {
+ * createCanvas(400, 400, WEBGL);
+ * fx = createShader(vs, fs);
+ * }
+ *
+ * function draw() {
+ * background(220);
+ *
+ * // strokes aren't instanced, and are rather used for debug purposes
+ * shader(fx);
+ * fx.setUniform('numInstances', 4);
+ *
+ * beginShape();
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * vertex(30, 20);
+ * endShape(CLOSE, 4);
+ *
+ * resetShader();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ * point(20, 20);
+ * point(80, 20);
+ * point(50, 50);
+ *
+ * noFill();
+ * strokeWeight(1);
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * endShape();
+ *
+ *
+ *
+ *
+ * @alt
+ * arched-shaped black line with 4 pixel thick stroke weight.
+ * backwards s-shaped black line with 4 pixel thick stroke weight.
+ */
+ /**
+ * @method quadraticVertex
+ * @param {Number} cx
+ * @param {Number} cy
+ * @param {Number} cz z-coordinate for the control point (for WebGL mode)
+ * @param {Number} x3
+ * @param {Number} y3
+ * @param {Number} z3 z-coordinate for the anchor point (for WebGL mode)
+ * @chainable
+ *
+ * @example
+ *
+ * strokeWeight(5);
+ * point(20, 20);
+ * point(80, 20);
+ * point(50, 50);
+ *
+ * point(20, 80);
+ * point(80, 80);
+ * point(80, 60);
+ *
+ * noFill();
+ * strokeWeight(1);
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * quadraticVertex(20, 80, 80, 80);
+ * vertex(80, 60);
+ * endShape();
+ *
+ *
+ *
+ *
+ * @alt
+ * backwards s-shaped black line with the same s-shaped line in positive z-axis.
+ */
+ _main.default.prototype.quadraticVertex = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('quadraticVertex', args);
+ if (this._renderer.isP3D) {
+ var _this$_renderer4;
+ (_this$_renderer4 = this._renderer).quadraticVertex.apply(_this$_renderer4, args);
+ } else {
+ //if we're drawing a contour, put the points into an
+ // array for inside drawing
+ if (this._contourInited) {
+ var pt = {
+ };
+ pt.x = args[0];
+ pt.y = args[1];
+ pt.x3 = args[2];
+ pt.y3 = args[3];
+ pt.type = constants.QUADRATIC;
+ this._contourVertices.push(pt);
+ return this;
+ }
+ if (vertices.length > 0) {
+ isQuadratic = true;
+ var vert = [
+ ];
+ for (var i = 0; i < args.length; i++) {
+ vert[i] = args[i];
+ }
+ vert.isVert = false;
+ if (isContour) {
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ } else {
+ _main.default._friendlyError('vertex() must be used once before calling quadraticVertex()', 'quadraticVertex');
+ }
+ }
+ return this;
+ };
+ /**
+ * All shapes are constructed by connecting a series of vertices. vertex()
+ * is used to specify the vertex coordinates for points, lines, triangles,
+ * quads, and polygons. It is used exclusively within the beginShape() and
+ * endShape() functions.
+ *
+ * @method vertex
+ * @param {Number} x x-coordinate of the vertex
+ * @param {Number} y y-coordinate of the vertex
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ * function draw() {
+ * orbitControl();
+ * background(50);
+ * strokeWeight(4);
+ * stroke(255);
+ *
+ * point(-35, -35);
+ * point(35, -35);
+ * point(0, 0);
+ * point(-35, 35);
+ * point(35, 35);
+ * point(35, 10);
+ *
+ * strokeWeight(1);
+ * noFill();
+ *
+ * beginShape();
+ * vertex(-35, -35);
+ * quadraticVertex(35, -35, 0, 0);
+ * quadraticVertex(-35, 35, 35, 35);
+ * vertex(35, 10);
+ * endShape();
+ *
+ * beginShape();
+ * vertex(-35, -35, 20);
+ * quadraticVertex(35, -35, 20, 0, 0, 20);
+ * quadraticVertex(-35, 35, 20, 35, 35, 20);
+ * vertex(35, 10, 20);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(3);
+ * beginShape(POINTS);
+ * vertex(30, 20);
+ * vertex(85, 20);
+ * vertex(85, 75);
+ * vertex(30, 75);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * createCanvas(100, 100, WEBGL);
+ * background(240, 240, 240);
+ * fill(237, 34, 93);
+ * noStroke();
+ * beginShape();
+ * vertex(0, 35);
+ * vertex(35, 0);
+ * vertex(0, -35);
+ * vertex(-35, 0);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * createCanvas(100, 100, WEBGL);
+ * background(240, 240, 240);
+ * fill(237, 34, 93);
+ * noStroke();
+ * beginShape();
+ * vertex(-10, 10);
+ * vertex(0, 35);
+ * vertex(10, 10);
+ * vertex(35, 0);
+ * vertex(10, -8);
+ * vertex(0, -35);
+ * vertex(-10, -8);
+ * vertex(-35, 0);
+ * endShape();
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(3);
+ * stroke(237, 34, 93);
+ * beginShape(LINES);
+ * vertex(10, 35);
+ * vertex(90, 35);
+ * vertex(10, 65);
+ * vertex(90, 65);
+ * vertex(35, 10);
+ * vertex(35, 90);
+ * vertex(65, 10);
+ * vertex(65, 90);
+ * endShape();
+ *
+ *
+ *
+ * @alt
+ * 4 black points in a square shape in middle-right of canvas.
+ * 4 points making a diamond shape.
+ * 8 points making a star.
+ * 8 points making 4 lines.
+ * A rotating 3D shape with a hollow section in the middle.
+ */
+ /**
+ * @method vertex
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z] z-coordinate of the vertex.
+ * Defaults to 0 if not specified.
+ * @chainable
+ */
+ /**
+ * @method vertex
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z]
+ * @param {Number} [u] the vertex's texture u-coordinate
+ * @param {Number} [v] the vertex's texture v-coordinate
+ * @chainable
+ */
+ _main.default.prototype.vertex = function (x, y, moveTo, u, v) {
+ if (this._renderer.isP3D) {
+ var _this$_renderer5;
+ (_this$_renderer5 = this._renderer).vertex.apply(_this$_renderer5, arguments);
+ } else {
+ var vert = [
+ ];
+ vert.isVert = true;
+ vert[0] = x;
+ vert[1] = y;
+ vert[2] = 0;
+ vert[3] = 0;
+ vert[4] = 0;
+ vert[5] = this._renderer._getFill();
+ vert[6] = this._renderer._getStroke();
+ if (moveTo) {
+ vert.moveTo = moveTo;
+ }
+ if (isContour) {
+ if (contourVertices.length === 0) {
+ vert.moveTo = true;
+ }
+ contourVertices.push(vert);
+ } else {
+ vertices.push(vert);
+ }
+ }
+ return this;
+ };
+ /**
+ * Sets the 3d vertex normal to use for subsequent vertices drawn with
+ * vertex(). A normal is a vector that is generally
+ * nearly perpendicular to a shape's surface which controls how much light will
+ * be reflected from that part of the surface.
+ *
+ * @method normal
+ * @param {Vector} vector A p5.Vector representing the vertex normal.
+ * @chainable
+ * @example
+ *
+ * // Click to change the number of sides.
+ * // In WebGL mode, custom shapes will only
+ * // display hollow fill sections when
+ * // all calls to vertex() use the same z-value.
+ *
+ * let sides = 3;
+ * let angle, px, py;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * fill(237, 34, 93);
+ * strokeWeight(3);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * ngon(sides, 0, 0, 80);
+ * }
+ *
+ * function mouseClicked() {
+ * if (sides > 6) {
+ * sides = 3;
+ * } else {
+ * sides++;
+ * }
+ * }
+ *
+ * function ngon(n, x, y, d) {
+ * beginShape(TESS);
+ * for (let i = 0; i < n + 1; i++) {
+ * angle = TWO_PI / n * i;
+ * px = x + sin(angle) * d / 2;
+ * py = y - cos(angle) * d / 2;
+ * vertex(px, py, 0);
+ * }
+ * for (let i = 0; i < n + 1; i++) {
+ * angle = TWO_PI / n * i;
+ * px = x + sin(angle) * d / 4;
+ * py = y - cos(angle) * d / 4;
+ * vertex(px, py, 0);
+ * }
+ * endShape();
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method normal
+ * @param {Number} x The x component of the vertex normal.
+ * @param {Number} y The y component of the vertex normal.
+ * @param {Number} z The z component of the vertex normal.
+ * @chainable
+ */
+ _main.default.prototype.normal = function (x, y, z) {
+ var _this$_renderer6;
+ this._assert3d('normal');
+ _main.default._validateParameters('normal', arguments);
+ (_this$_renderer6 = this._renderer).normal.apply(_this$_renderer6, arguments);
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../constants': 286,
+ '../main': 298,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 309: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.from');
+ _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.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.assign');
+ _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.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } // requestAnim shim layer by Paul Irish
+ // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ // http://my.opera.com/emoller/blog/2011/12/20/
+ // requestanimationframe-for-smart-er-animating
+ // requestAnimationFrame polyfill by Erik Möller
+ // fixes from Paul Irish and Tino Zijdel
+
+ window.requestAnimationFrame = function () {
+ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
+ // should '60' here be framerate?
+ window.setTimeout(callback, 1000 / 60);
+ };
+ }();
+ /**
+ * shim for Uint8ClampedArray.slice
+ * (allows arrayCopy to work with pixels[])
+ * with thanks to http://halfpapstudios.com/blog/tag/html5-canvas/
+ * Enumerable set to false to protect for...in from
+ * Uint8ClampedArray.prototype pollution.
+ */
+ (function () {
+ if (typeof Uint8ClampedArray !== 'undefined' && !Uint8ClampedArray.prototype.slice) {
+ Object.defineProperty(Uint8ClampedArray.prototype, 'slice', {
+ value: Array.prototype.slice,
+ writable: true,
+ configurable: true,
+ enumerable: false
+ });
+ }
+ }) ();
+ /**
+ * this is implementation of Object.assign() which is unavailable in
+ * IE11 and (non-Chrome) Android browsers.
+ * The assign() method is used to copy the values of all enumerable
+ * own properties from one or more source objects to a target object.
+ * It will return the target object.
+ * Modified from https://github.com/ljharb/object.assign
+ */
+ (function () {
+ if (!Object.assign) {
+ var keys = Object.keys;
+ var defineProperty = Object.defineProperty;
+ var canBeObject = function canBeObject(obj) {
+ return typeof obj !== 'undefined' && obj !== null;
+ };
+ var hasSymbols = typeof Symbol === 'function' && _typeof(Symbol()) === 'symbol';
+ var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+ var isEnumerableOn = function isEnumerableOn(obj) {
+ return function isEnumerable(prop) {
+ return propIsEnumerable.call(obj, prop);
+ };
+ };
+ // per ES6 spec, this function has to have a length of 2
+ var assignShim = function assign(target, source1) {
+ if (!canBeObject(target)) {
+ throw new TypeError('target must be an object');
+ }
+ var objTarget = Object(target);
+ var s,
+ source,
+ i,
+ props;
+ for (s = 1; s < arguments.length; ++s) {
+ source = Object(arguments[s]);
+ props = keys(source);
+ if (hasSymbols && Object.getOwnPropertySymbols) {
+ var _props;
+ (_props = props).push.apply(_props, _toConsumableArray(Object.getOwnPropertySymbols(source).filter(isEnumerableOn(source))));
+ }
+ for (i = 0; i < props.length; ++i) {
+ objTarget[props[i]] = source[props[i]];
+ }
+ }
+ return objTarget;
+ };
+ defineProperty(Object, 'assign', {
+ value: assignShim,
+ configurable: true,
+ enumerable: false,
+ writable: true
+ });
+ }
+ }) ();
+ },
+ {
+ 'core-js/modules/es.array.filter': 173,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.assign': 194,
+ 'core-js/modules/es.object.keys': 199,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint8-clamped-array': 253,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 310: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.assign');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('./main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Structure
+ * @submodule Structure
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Stops p5.js from continuously executing the code within draw().
+ * If loop() is called, the code in draw()
+ * begins to run continuously again. If using noLoop()
+ * in setup(), it should be the last line inside the block.
+ *
+ * When noLoop() is used, it's not possible to manipulate
+ * or access the screen inside event handling functions such as
+ * mousePressed() or
+ * keyPressed(). Instead, use those functions to
+ * call redraw() or loop(),
+ * which will run draw(), which can update the screen
+ * properly. This means that when noLoop() has been
+ * called, no drawing can happen, and functions like saveFrames()
+ * or loadPixels() may not be used.
+ *
+ * Note that if the sketch is resized, redraw() will
+ * be called to update the sketch, even after noLoop()
+ * has been specified. Otherwise, the sketch would enter an odd state until
+ * loop() was called.
+ *
+ * Use isLooping() to check the current state of loop().
+ *
+ * @method noLoop
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * rotateY(frameCount / 100);
+ * normalMaterial();
+ * beginShape(TRIANGLE_STRIP);
+ * normal(-0.4, 0.4, 0.8);
+ * vertex(-30, 30, 0);
+ *
+ * normal(0, 0, 1);
+ * vertex(-30, -30, 30);
+ * vertex(30, 30, 30);
+ *
+ * normal(0.4, -0.4, 0.8);
+ * vertex(30, -30, 0);
+ * endShape();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * noLoop();
+ * }
+
+ * function draw() {
+ * line(10, 10, 90, 90);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * 113 pixel long line extending from top-left to bottom right of canvas.
+ * horizontal line moves slowly from left. Loops but stops on mouse press.
+ */
+
+ _main.default.prototype.noLoop = function () {
+ this._loop = false;
+ };
+ /**
+ * By default, p5.js loops through draw() continuously, executing the code within
+ * it. However, the draw() loop may be stopped by calling
+ * noLoop(). In that case, the draw()
+ * loop can be resumed with loop().
+ *
+ * Avoid calling loop() from inside setup().
+ *
+ * Use isLooping() to check the current state of loop().
+ *
+ * @method loop
+ * @example
+ *
+ * let x = 0;
+ * function setup() {
+ * createCanvas(100, 100);
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * x = x + 0.1;
+ * if (x > width) {
+ * x = 0;
+ * }
+ * line(x, 0, x, height);
+ * }
+ *
+ * function mousePressed() {
+ * noLoop();
+ * }
+ *
+ * function mouseReleased() {
+ * loop();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * horizontal line moves slowly from left. Loops but stops on mouse press.
+ */
+ _main.default.prototype.loop = function () {
+ if (!this._loop) {
+ this._loop = true;
+ if (this._setupDone) {
+ this._draw();
+ }
+ }
+ };
+ /**
+ * By default, p5.js loops through draw() continuously,
+ * executing the code within it. If the sketch is stopped with
+ * noLoop() or resumed with loop(),
+ * isLooping() returns the current state for use within custom event handlers.
+ *
+ * @method isLooping
+ * @returns {boolean}
+ * @example
+ *
+ * let x = 0;
+ * function setup() {
+ * createCanvas(100, 100);
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * x = x + 0.1;
+ * if (x > width) {
+ * x = 0;
+ * }
+ * line(x, 0, x, height);
+ * }
+ *
+ * function mousePressed() {
+ * loop();
+ * }
+ *
+ * function mouseReleased() {
+ * noLoop();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * Ellipse moves slowly from left. Checkbox toggles loop()/noLoop().
+ * Button colorizes sketch if isLooping().
+ *
+ */
+ _main.default.prototype.isLooping = function () {
+ return this._loop;
+ };
+ /**
+ * The push() function saves the current drawing style
+ * settings and transformations, while pop() restores these
+ * settings. Note that these functions are always used together. They allow you to
+ * change the style and transformation settings and later return to what you had.
+ * When a new state is started with push(), it builds on
+ * the current style and transform information. The push()
+ * and pop() functions can be embedded to provide more
+ * control. (See the second example for a demonstration.)
+ *
+ * push() stores information related to the current transformation state
+ * and style settings controlled by the following functions:
+ * fill(),
+ * noFill(),
+ * noStroke(),
+ * stroke(),
+ * tint(),
+ * noTint(),
+ * strokeWeight(),
+ * strokeCap(),
+ * strokeJoin(),
+ * imageMode(),
+ * rectMode(),
+ * ellipseMode(),
+ * colorMode(),
+ * textAlign(),
+ * textFont(),
+ * textSize(),
+ * textLeading(),
+ * applyMatrix(),
+ * resetMatrix(),
+ * rotate(),
+ * scale(),
+ * shearX(),
+ * shearY(),
+ * translate(),
+ * noiseSeed().
+ *
+ * In WEBGL mode additional style settings are stored. These are controlled by the
+ * following functions: setCamera(),
+ * ambientLight(),
+ * directionalLight(),
+ * pointLight(), texture(),
+ * specularMaterial(),
+ * shininess(),
+ * normalMaterial()
+ * and shader().
+ *
+ * @method push
+ * @example
+ *
+ * let checkbox, button, colBG, colFill;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * button = createButton('Colorize if loop()');
+ * button.position(0, 120);
+ * button.mousePressed(changeBG);
+ *
+ * checkbox = createCheckbox('loop()', true);
+ * checkbox.changed(checkLoop);
+ *
+ * colBG = color(0);
+ * colFill = color(255);
+ * }
+ *
+ * function changeBG() {
+ * if (isLooping()) {
+ * colBG = color(random(255), random(255), random(255));
+ * colFill = color(random(255), random(255), random(255));
+ * }
+ * }
+ *
+ * function checkLoop() {
+ * if (this.checked()) {
+ * loop();
+ * } else {
+ * noLoop();
+ * }
+ * }
+ *
+ * function draw() {
+ * background(colBG);
+ * fill(colFill);
+ * ellipse(frameCount % width, height / 2, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * ellipse(0, 50, 33, 33); // Left circle
+ *
+ * push(); // Start a new drawing state
+ * strokeWeight(10);
+ * fill(204, 153, 0);
+ * translate(50, 0);
+ * ellipse(0, 50, 33, 33); // Middle circle
+ * pop(); // Restore original state
+ *
+ * ellipse(100, 50, 33, 33); // Right circle
+ *
+ *
+ *
+ *
+ * @alt
+ * Gold ellipse + thick black outline @center 2 white ellipses on left and right.
+ * 2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
+ */
+ _main.default.prototype.push = function () {
+ this._styles.push({
+ props: {
+ _colorMode: this._colorMode
+ },
+ renderer: this._renderer.push()
+ });
+ };
+ /**
+ * The push() function saves the current drawing style
+ * settings and transformations, while pop() restores
+ * these settings. Note that these functions are always used together. They allow
+ * you to change the style and transformation settings and later return to what
+ * you had. When a new state is started with push(), it
+ * builds on the current style and transform information. The push()
+ * and pop() functions can be embedded to provide more
+ * control. (See the second example for a demonstration.)
+ *
+ * push() stores information related to the current transformation state
+ * and style settings controlled by the following functions:
+ * fill(),
+ * noFill(),
+ * noStroke(),
+ * stroke(),
+ * tint(),
+ * noTint(),
+ * strokeWeight(),
+ * strokeCap(),
+ * strokeJoin(),
+ * imageMode(),
+ * rectMode(),
+ * ellipseMode(),
+ * colorMode(),
+ * textAlign(),
+ * textFont(),
+ * textSize(),
+ * textLeading(),
+ * applyMatrix(),
+ * resetMatrix(),
+ * rotate(),
+ * scale(),
+ * shearX(),
+ * shearY(),
+ * translate(),
+ * noiseSeed().
+ *
+ * In WEBGL mode additional style settings are stored. These are controlled by
+ * the following functions:
+ * setCamera(),
+ * ambientLight(),
+ * directionalLight(),
+ * pointLight(),
+ * texture(),
+ * specularMaterial(),
+ * shininess(),
+ * normalMaterial() and
+ * shader().
+ *
+ * @method pop
+ * @example
+ *
+ * ellipse(0, 50, 33, 33); // Left circle
+ *
+ * push(); // Start a new drawing state
+ * strokeWeight(10);
+ * fill(204, 153, 0);
+ * ellipse(33, 50, 33, 33); // Left-middle circle
+ *
+ * push(); // Start another new drawing state
+ * stroke(0, 102, 153);
+ * ellipse(66, 50, 33, 33); // Right-middle circle
+ * pop(); // Restore previous state
+ *
+ * pop(); // Restore original state
+ *
+ * ellipse(100, 50, 33, 33); // Right circle
+ *
+ *
+ *
+ *
+ *
+ * ellipse(0, 50, 33, 33); // Left circle
+ *
+ * push(); // Start a new drawing state
+ * translate(50, 0);
+ * strokeWeight(10);
+ * fill(204, 153, 0);
+ * ellipse(0, 50, 33, 33); // Middle circle
+ * pop(); // Restore original state
+ *
+ * ellipse(100, 50, 33, 33); // Right circle
+ *
+ *
+ *
+ *
+ * @alt
+ * Gold ellipse + thick black outline @center 2 white ellipses on left and right.
+ * 2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
+ */
+ _main.default.prototype.pop = function () {
+ var style = this._styles.pop();
+ if (style) {
+ this._renderer.pop(style.renderer);
+ Object.assign(this, style.props);
+ } else {
+ console.warn('pop() was called without matching push()');
+ }
+ };
+ /**
+ * Executes the code within draw() one time. This
+ * function allows the program to update the display window only when necessary,
+ * for example when an event registered by mousePressed()
+ * or keyPressed() occurs.
+ *
+ * In structuring a program, it only makes sense to call redraw()
+ * within events such as mousePressed(). This
+ * is because redraw() does not run
+ * draw() immediately (it only sets a flag that indicates
+ * an update is needed).
+ *
+ * The redraw() function does not work properly when
+ * called inside draw().To enable/disable animations,
+ * use loop() and noLoop().
+ *
+ * In addition you can set the number of redraws per method call. Just
+ * add an integer as single parameter for the number of redraws.
+ *
+ * @method redraw
+ * @param {Integer} [n] Redraw for n-times. The default value is 1.
+ * @example
+ *
+ * ellipse(0, 50, 33, 33); // Left circle
+ *
+ * push(); // Start a new drawing state
+ * strokeWeight(10);
+ * fill(204, 153, 0);
+ * ellipse(33, 50, 33, 33); // Left-middle circle
+ *
+ * push(); // Start another new drawing state
+ * stroke(0, 102, 153);
+ * ellipse(66, 50, 33, 33); // Right-middle circle
+ * pop(); // Restore previous state
+ *
+ * pop(); // Restore original state
+ *
+ * ellipse(100, 50, 33, 33); // Right circle
+ *
+ *
+ * let x = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * line(x, 0, x, height);
+ * }
+ *
+ * function mousePressed() {
+ * x += 1;
+ * redraw();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * black line on far left of canvas
+ * black line on far left of canvas
+ */
+ _main.default.prototype.redraw = function (n) {
+ if (this._inUserDraw || !this._setupDone) {
+ return;
+ }
+ var numberOfRedraws = parseInt(n);
+ if (isNaN(numberOfRedraws) || numberOfRedraws < 1) {
+ numberOfRedraws = 1;
+ }
+ var context = this._isGlobal ? window : this;
+ if (typeof context.draw === 'function') {
+ if (typeof context.setup === 'undefined') {
+ context.scale(context._pixelDensity, context._pixelDensity);
+ }
+ for (var idxRedraw = 0; idxRedraw < numberOfRedraws; idxRedraw++) {
+ context.resetMatrix();
+ if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+ this._updateAccsOutput();
+ }
+ if (context._renderer.isP3D) {
+ context._renderer._update();
+ }
+ context._setProperty('frameCount', context.frameCount + 1);
+ this.callRegisteredHooksFor('pre');
+ this._inUserDraw = true;
+ try {
+ context.draw();
+ } finally {
+ this._inUserDraw = false;
+ }
+ this.callRegisteredHooksFor('post');
+ }
+ }
+ };
+ /**
+ * The `p5()` constructor enables you to activate "instance mode" instead of normal
+ * "global mode". This is an advanced topic. A short description and example is
+ * included below. Please see
+ *
+ * Dan Shiffman's Coding Train video tutorial or this
+ * tutorial page
+ * for more info.
+ *
+ * By default, all p5.js functions are in the global namespace (i.e. bound to the window
+ * object), meaning you can call them simply `ellipse()`, `fill()`, etc. However, this
+ * might be inconvenient if you are mixing with other JS libraries (synchronously or
+ * asynchronously) or writing long programs of your own. p5.js currently supports a
+ * way around this problem called "instance mode". In instance mode, all p5 functions
+ * are bound up in a single variable instead of polluting your global namespace.
+ *
+ * Optionally, you can specify a default container for the canvas and any other elements
+ * to append to with a second argument. You can give the ID of an element in your html,
+ * or an html node itself.
+ *
+ * Note that creating instances like this also allows you to have more than one p5 sketch on
+ * a single web page, as they will each be wrapped up with their own set up variables. Of
+ * course, you could also use iframes to have multiple sketches in global mode.
+ *
+ * @method p5
+ * @param {Object} sketch a function containing a p5.js sketch
+ * @param {String|Object} node ID or pointer to HTML DOM node to contain sketch in
+ * @example
+ *
+ * let x = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * x += 1;
+ * line(x, 0, x, height);
+ * }
+ *
+ * function mousePressed() {
+ * redraw(5);
+ * }
+ *
+ *
+ * const s = p => {
+ * let x = 100;
+ * let y = 100;
+ *
+ * p.setup = function() {
+ * p.createCanvas(700, 410);
+ * };
+ *
+ * p.draw = function() {
+ * p.background(0);
+ * p.fill(255);
+ * p.rect(x, y, 50, 50);
+ * };
+ * };
+ *
+ * new p5(s); // invoke p5
+ * 
+ *
+ * 
+ *
+ * @method applyMatrix
+ * @param {Array} arr an array of numbers - should be 6 or 16 length (2×3 or 4×4 matrix values)
+ * @chainable
+ * @example
+ *
+ *
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * background(200);
+ * // Equivalent to translate(x, y);
+ * applyMatrix(1, 0, 0, 1, 40 + step, 50);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * background(200);
+ * translate(50, 50);
+ * // Equivalent to scale(x, y);
+ * applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * let angle = map(step, 0, 20, 0, TWO_PI);
+ * let cos_a = cos(angle);
+ * let sin_a = sin(angle);
+ * background(200);
+ * translate(50, 50);
+ * // Equivalent to rotate(angle);
+ * applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * let angle = map(step, 0, 20, -PI / 4, PI / 4);
+ * background(200);
+ * translate(50, 50);
+ * // equivalent to shearX(angle);
+ * let shear_factor = 1 / tan(PI / 2 - angle);
+ * applyMatrix(1, 0, shear_factor, 1, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateY(PI / 6);
+ * stroke(153);
+ * box(35);
+ * let rad = millis() / 1000;
+ * // Set rotation angles
+ * let ct = cos(rad);
+ * let st = sin(rad);
+ * // Matrix for rotation around the Y axis
+ * applyMatrix(
+ * ct, 0.0, st, 0.0,
+ * 0.0, 1.0, 0.0, 0.0,
+ * -st, 0.0, ct, 0.0,
+ * 0.0, 0.0, 0.0, 1.0
+ * );
+ * stroke(255);
+ * box(50);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A rectangle translating to the right
+ * A rectangle shrinking to the center
+ * A rectangle rotating clockwise about the center
+ * A rectangle shearing
+ * A rectangle in the upper left corner
+ */
+ /**
+ * @method applyMatrix
+ * @param {Number} a numbers which define the 2×3 or 4×4 matrix to be multiplied
+ * @param {Number} b numbers which define the 2×3 or 4×4 matrix to be multiplied
+ * @param {Number} c numbers which define the 2×3 or 4×4 matrix to be multiplied
+ * @param {Number} d numbers which define the 2×3 or 4×4 matrix to be multiplied
+ * @param {Number} e numbers which define the 2×3 or 4×4 matrix to be multiplied
+ * @param {Number} f numbers which define the 2×3 or 4×4 matrix to be multiplied
+ * @chainable
+ */
+ /**
+ * @method applyMatrix
+ * @param {Number} a
+ * @param {Number} b
+ * @param {Number} c
+ * @param {Number} d
+ * @param {Number} e
+ * @param {Number} f
+ * @param {Number} g numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} h numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} i numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} j numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} k numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} l numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} m numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} n numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} o numbers which define the 4×4 matrix to be multiplied
+ * @param {Number} p numbers which define the 4×4 matrix to be multiplied
+ * @chainable
+ */
+
+ _main.default.prototype.applyMatrix = function () {
+ var isTypedArray = (arguments.length <= 0 ? undefined : arguments[0]) instanceof Object.getPrototypeOf(Uint8Array);
+ if (Array.isArray(arguments.length <= 0 ? undefined : arguments[0]) || isTypedArray) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).applyMatrix.apply(_this$_renderer, _toConsumableArray(arguments.length <= 0 ? undefined : arguments[0]));
+ } else {
+ var _this$_renderer2;
+ (_this$_renderer2 = this._renderer).applyMatrix.apply(_this$_renderer2, arguments);
+ }
+ return this;
+ };
+ /**
+ * Replaces the current matrix with the identity matrix.
+ *
+ * @method resetMatrix
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * let testMatrix = [1, 0, 0, 1, 0, 0];
+ * applyMatrix(testMatrix);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A rotated rectangle in the center with another at the top left corner
+ */
+ _main.default.prototype.resetMatrix = function () {
+ this._renderer.resetMatrix();
+ return this;
+ };
+ /**
+ * Rotates a shape by the amount specified by the angle parameter. This
+ * function accounts for angleMode, so angles
+ * can be entered in either RADIANS or DEGREES.
+ *
+ * Objects are always rotated around their relative position to the
+ * origin and positive numbers rotate objects in a clockwise direction.
+ * Transformations apply to everything that happens after and subsequent
+ * calls to the function accumulate the effect. For example, calling
+ * rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).
+ * All transformations are reset when draw() begins again.
+ *
+ * Technically, rotate() multiplies the current transformation matrix
+ * by a rotation matrix. This function can be further controlled by
+ * push() and pop().
+ *
+ * @method rotate
+ * @param {Number} angle the angle of rotation, specified in radians
+ * or degrees, depending on current angleMode
+ * @param {p5.Vector|Number[]} [axis] (in 3d) the axis to rotate around
+ * @chainable
+ * @example
+ *
+ * translate(50, 50);
+ * applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+ * rect(0, 0, 20, 20);
+ * // Note that the translate is also reset.
+ * resetMatrix();
+ * rect(0, 0, 20, 20);
+ *
+ *
+ *
+ *
+ * @alt
+ * white 52×52 rect with black outline at center rotated counter 45 degrees
+ */
+ _main.default.prototype.rotate = function (angle, axis) {
+ _main.default._validateParameters('rotate', arguments);
+ this._renderer.rotate(this._toRadians(angle), axis);
+ return this;
+ };
+ /**
+ * Rotates a shape around X axis by the amount specified in angle parameter.
+ * The angles can be entered in either RADIANS or DEGREES.
+ *
+ * Objects are always rotated around their relative position to the
+ * origin and positive numbers rotate objects in a clockwise direction.
+ * All transformations are reset when draw() begins again.
+ *
+ * @method rotateX
+ * @param {Number} angle the angle of rotation, specified in radians
+ * or degrees, depending on current angleMode
+ * @chainable
+ * @example
+ *
+ * translate(width / 2, height / 2);
+ * rotate(PI / 3.0);
+ * rect(-26, -26, 52, 52);
+ *
+ *
+ *
+ *
+ * @alt
+ * 3d box rotating around the x axis.
+ */
+ _main.default.prototype.rotateX = function (angle) {
+ this._assert3d('rotateX');
+ _main.default._validateParameters('rotateX', arguments);
+ this._renderer.rotateX(this._toRadians(angle));
+ return this;
+ };
+ /**
+ * Rotates a shape around Y axis by the amount specified in angle parameter.
+ * The angles can be entered in either RADIANS or DEGREES.
+ *
+ * Objects are always rotated around their relative position to the
+ * origin and positive numbers rotate objects in a clockwise direction.
+ * All transformations are reset when draw() begins again.
+ *
+ * @method rotateY
+ * @param {Number} angle the angle of rotation, specified in radians
+ * or degrees, depending on current angleMode
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateX(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * 3d box rotating around the y axis.
+ */
+ _main.default.prototype.rotateY = function (angle) {
+ this._assert3d('rotateY');
+ _main.default._validateParameters('rotateY', arguments);
+ this._renderer.rotateY(this._toRadians(angle));
+ return this;
+ };
+ /**
+ * Rotates a shape around Z axis by the amount specified in angle parameter.
+ * The angles can be entered in either RADIANS or DEGREES.
+ *
+ * This method works in WEBGL mode only.
+ *
+ * Objects are always rotated around their relative position to the
+ * origin and positive numbers rotate objects in a clockwise direction.
+ * All transformations are reset when draw() begins again.
+ *
+ * @method rotateZ
+ * @param {Number} angle the angle of rotation, specified in radians
+ * or degrees, depending on current angleMode
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateY(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * 3d box rotating around the z axis.
+ */
+ _main.default.prototype.rotateZ = function (angle) {
+ this._assert3d('rotateZ');
+ _main.default._validateParameters('rotateZ', arguments);
+ this._renderer.rotateZ(this._toRadians(angle));
+ return this;
+ };
+ /**
+ * Increases or decreases the size of a shape by expanding or contracting
+ * vertices. Objects always scale from their relative origin to the
+ * coordinate system. Scale values are specified as decimal percentages.
+ * For example, the function call scale(2.0) increases the dimension of a
+ * shape by 200%.
+ *
+ * Transformations apply to everything that happens after and subsequent
+ * calls to the function multiply the effect. For example, calling scale(2.0)
+ * and then scale(1.5) is the same as scale(3.0). If scale() is called
+ * within draw(), the transformation is reset when the loop begins again.
+ *
+ * Using this function with the z parameter is only available in WEBGL mode.
+ * This function can be further controlled with push() and pop().
+ *
+ * @method scale
+ * @param {Number|p5.Vector|Number[]} s
+ * percent to scale the object, or percentage to
+ * scale the object in the x-axis if multiple arguments
+ * are given
+ * @param {Number} [y] percent to scale the object in the y-axis
+ * @param {Number} [z] percent to scale the object in the z-axis (webgl only)
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateZ(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * rect(30, 20, 50, 50);
+ * scale(0.5);
+ * rect(30, 20, 50, 50);
+ *
+ *
+ *
+ *
+ * @alt
+ * white 52×52 rect with black outline at center rotated counter 45 degrees
+ * 2 white rects with black outline- 1 50×50 at center. other 25×65 bottom left
+ */
+ /**
+ * @method scale
+ * @param {p5.Vector|Number[]} scales per-axis percents to scale the object
+ * @chainable
+ */
+ _main.default.prototype.scale = function (x, y, z) {
+ _main.default._validateParameters('scale', arguments);
+ // Only check for Vector argument type if Vector is available
+ if (x instanceof _main.default.Vector) {
+ var v = x;
+ x = v.x;
+ y = v.y;
+ z = v.z;
+ } else if (x instanceof Array) {
+ var rg = x;
+ x = rg[0];
+ y = rg[1];
+ z = rg[2] || 1;
+ }
+ if (isNaN(y)) {
+ y = z = x;
+ } else if (isNaN(z)) {
+ z = 1;
+ }
+ this._renderer.scale.call(this._renderer, x, y, z);
+ return this;
+ };
+ /**
+ * Shears a shape around the x-axis by the amount specified by the angle
+ * parameter. Angles should be specified in the current angleMode.
+ * Objects are always sheared around their relative position to the origin
+ * and positive numbers shear objects in a clockwise direction.
+ *
+ * Transformations apply to everything that happens after and subsequent
+ * calls to the function accumulates the effect. For example, calling
+ * shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).
+ * If shearX() is called within the draw(),
+ * the transformation is reset when the loop begins again.
+ *
+ * Technically, shearX() multiplies the current
+ * transformation matrix by a rotation matrix. This function can be further
+ * controlled by the push() and pop() functions.
+ *
+ * @method shearX
+ * @param {Number} angle angle of shear specified in radians or degrees,
+ * depending on current angleMode
+ * @chainable
+ * @example
+ *
+ * rect(30, 20, 50, 50);
+ * scale(0.5, 1.3);
+ * rect(30, 20, 50, 50);
+ *
+ *
+ *
+ *
+ * @alt
+ * white irregular quadrilateral with black outline at top middle.
+ */
+ _main.default.prototype.shearX = function (angle) {
+ _main.default._validateParameters('shearX', arguments);
+ var rad = this._toRadians(angle);
+ this._renderer.applyMatrix(1, 0, Math.tan(rad), 1, 0, 0);
+ return this;
+ };
+ /**
+ * Shears a shape around the y-axis the amount specified by the angle
+ * parameter. Angles should be specified in the current angleMode. Objects
+ * are always sheared around their relative position to the origin and
+ * positive numbers shear objects in a clockwise direction.
+ *
+ * Transformations apply to everything that happens after and subsequent
+ * calls to the function accumulates the effect. For example, calling
+ * shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If
+ * shearY() is called within the draw(), the transformation is reset when
+ * the loop begins again.
+ *
+ * Technically, shearY() multiplies the current transformation matrix by a
+ * rotation matrix. This function can be further controlled by the
+ * push() and pop() functions.
+ *
+ * @method shearY
+ * @param {Number} angle angle of shear specified in radians or degrees,
+ * depending on current angleMode
+ * @chainable
+ * @example
+ *
+ * translate(width / 4, height / 4);
+ * shearX(PI / 4.0);
+ * rect(0, 0, 30, 30);
+ *
+ *
+ *
+ *
+ * @alt
+ * white irregular quadrilateral with black outline at middle bottom.
+ */
+ _main.default.prototype.shearY = function (angle) {
+ _main.default._validateParameters('shearY', arguments);
+ var rad = this._toRadians(angle);
+ this._renderer.applyMatrix(1, Math.tan(rad), 0, 1, 0, 0);
+ return this;
+ };
+ /**
+ * Specifies an amount to displace objects within the display window.
+ * The x parameter specifies left/right translation, the y parameter
+ * specifies up/down translation.
+ *
+ * Transformations are cumulative and apply to everything that happens after
+ * and subsequent calls to the function accumulates the effect. For example,
+ * calling translate(50, 0) and then translate(20, 0) is the same as
+ * translate(70, 0). If translate() is called within draw(), the
+ * transformation is reset when the loop begins again. This function can be
+ * further controlled by using push() and pop().
+ *
+ * @method translate
+ * @param {Number} x left/right translation
+ * @param {Number} y up/down translation
+ * @param {Number} [z] forward/backward translation (WEBGL only)
+ * @chainable
+ * @example
+ *
+ * translate(width / 4, height / 4);
+ * shearY(PI / 4.0);
+ * rect(0, 0, 30, 30);
+ *
+ *
+ *
+ *
+ *
+ * translate(30, 20);
+ * rect(0, 0, 55, 55);
+ *
+ *
+ *
+ *
+
+ *
+ * rect(0, 0, 55, 55); // Draw rect at original 0,0
+ * translate(30, 20);
+ * rect(0, 0, 55, 55); // Draw rect at new 0,0
+ * translate(14, 14);
+ * rect(0, 0, 55, 55); // Draw rect at new 0,0
+ *
+ *
+ *
+ *
+ * @alt
+ * white 55×55 rect with black outline at center right.
+ * 3 white 55×55 rects with black outlines at top-l, center-r and bottom-r.
+ * a 20×20 white rect moving in a circle around the canvas
+ */
+ /**
+ * @method translate
+ * @param {p5.Vector} vector the vector to translate by
+ * @chainable
+ */
+ _main.default.prototype.translate = function (x, y, z) {
+ _main.default._validateParameters('translate', arguments);
+ if (this._renderer.isP3D) {
+ this._renderer.translate(x, y, z);
+ } else {
+ this._renderer.translate(x, y);
+ }
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ './main': 298,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-prototype-of': 198,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint8-array': 252,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 312: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.ends-with');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/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.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.ends-with');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @module Data
+ * @submodule LocalStorage
+ * @requires core
+ *
+ * This module defines the p5 methods for working with local storage
+ */
+ /**
+ *
+ * Stores a value in local storage under the key name.
+ * Local storage is saved in the browser and persists
+ * between browsing sessions and page reloads.
+ * The key can be the name of the variable but doesn't
+ * have to be. To retrieve stored items
+ * see getItem.
+ *
+ * Sensitive data such as passwords or personal information
+ * should not be stored in local storage.
+ *
+ * @method storeItem
+ * @for p5
+ * @param {String} key
+ * @param {String|Number|Object|Boolean|p5.Color|p5.Vector} value
+ *
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * rectMode(CENTER);
+ * translate(width / 2, height / 2);
+ * translate(p5.Vector.fromAngle(millis() / 1000, 40));
+ * rect(0, 0, 20, 20);
+ * }
+ *
+ *
+ * // Type to change the letter in the
+ * // center of the canvas.
+ * // If you reload the page, it will
+ * // still display the last key you entered
+ *
+ * let myText;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * myText = getItem('myText');
+ * if (myText === null) {
+ * myText = '';
+ * }
+ * describe(`When you type the key name is displayed as black text on white background.
+ * If you reload the page, the last letter typed is still displaying.`);
+ * }
+ *
+ * function draw() {
+ * textSize(40);
+ * background(255);
+ * text(myText, width / 2, height / 2);
+ * }
+ *
+ * function keyPressed() {
+ * myText = key;
+ * storeItem('myText', myText);
+ * }
+ *
+ * // Click the mouse to change
+ * // the color of the background
+ * // Once you have changed the color
+ * // it will stay changed even when you
+ * // reload the page.
+ *
+ * let myColor;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * myColor = getItem('myColor');
+ * }
+ *
+ * function draw() {
+ * if (myColor !== null) {
+ * background(myColor);
+ * }
+ * describe(`If you click, the canvas changes to a random color.·
+ * If you reload the page, the canvas is still the color it was when the
+ * page was previously loaded.`);
+ * }
+ *
+ * function mousePressed() {
+ * myColor = color(random(255), random(255), random(255));
+ * storeItem('myColor', myColor);
+ * }
+ *
+ *
+ */
+ _main.default.prototype.clearStorage = function () {
+ localStorage.clear();
+ };
+ /**
+ *
+ * Removes an item that was stored with storeItem()
+ *
+ * @method removeItem
+ * @param {String} key
+ * @for p5
+ *
+ * @example
+ *
+ * function setup() {
+ * let myNum = 10;
+ * let myBool = false;
+ * storeItem('myNum', myNum);
+ * storeItem('myBool', myBool);
+ * print(getItem('myNum')); // logs 10 to the console
+ * print(getItem('myBool')); // logs false to the console
+ * clearStorage();
+ * print(getItem('myNum')); // logs null to the console
+ * print(getItem('myBool')); // logs null to the console
+ * }
+ *
+ *
+ */
+ _main.default.prototype.removeItem = function (key) {
+ if (typeof key !== 'string') {
+ console.log('The argument that you passed to removeItem() - '.concat(key, ' is not a string.'));
+ }
+ localStorage.removeItem(key);
+ localStorage.removeItem(''.concat(key, 'p5TypeID'));
+ };
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.ends-with': 208,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 313: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.object.keys');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Data
+ * @submodule Dictionary
+ * @for p5.TypedDict
+ * @requires core
+ *
+ * This module defines the p5 methods for the p5 Dictionary classes.
+ * The classes StringDict and NumberDict are for storing and working
+ * with key-value pairs.
+ */
+ /**
+ *
+ * Creates a new instance of p5.StringDict using the key-value pair
+ * or the object you provide.
+ *
+ * @method createStringDict
+ * @for p5
+ * @param {String} key
+ * @param {String} value
+ * @return {p5.StringDict}
+ *
+ * @example
+ *
+ * function setup() {
+ * let myVar = 10;
+ * storeItem('myVar', myVar);
+ * print(getItem('myVar')); // logs 10 to the console
+ * removeItem('myVar');
+ * print(getItem('myVar')); // logs null to the console
+ * }
+ *
+ *
+ */
+ /**
+ * @method createStringDict
+ * @param {Object} object object
+ * @return {p5.StringDict}
+ */
+
+ _main.default.prototype.createStringDict = function (key, value) {
+ _main.default._validateParameters('createStringDict', arguments);
+ return new _main.default.StringDict(key, value);
+ };
+ /**
+ *
+ * Creates a new instance of p5.NumberDict using the key-value pair
+ * or object you provide.
+ *
+ * @method createNumberDict
+ * @for p5
+ * @param {Number} key
+ * @param {Number} value
+ * @return {p5.NumberDict}
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // logs true to console
+ *
+ * let anotherDictionary = createStringDict({ happy: 'coding' });
+ * print(anotherDictionary.hasKey('happy')); // logs true to console
+ * }
+ *
+ *
+ */
+ /**
+ * @method createNumberDict
+ * @param {Object} object object
+ * @return {p5.NumberDict}
+ */
+ _main.default.prototype.createNumberDict = function (key, value) {
+ _main.default._validateParameters('createNumberDict', arguments);
+ return new _main.default.NumberDict(key, value);
+ };
+ /**
+ *
+ * Base class for all p5.Dictionary types. Specifically
+ * typed Dictionary classes inherit from this class.
+ *
+ * @class p5.TypedDict
+ * @constructor
+ */
+ _main.default.TypedDict = /*#__PURE__*/ function () {
+ function TypedDict(key, value) {
+ _classCallCheck(this, TypedDict);
+ if (key instanceof Object) {
+ this.data = key;
+ } else {
+ this.data = {
+ };
+ this.data[key] = value;
+ }
+ return this;
+ } /**
+ * Returns the number of key-value pairs currently stored in the Dictionary.
+ *
+ * @method size
+ * @return {Integer} the number of key-value pairs in the Dictionary
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(100, 42);
+ * print(myDictionary.hasKey(100)); // logs true to console
+ *
+ * let anotherDictionary = createNumberDict({ 200: 84 });
+ * print(anotherDictionary.hasKey(200)); // logs true to console
+ * }
+ *
+ *
+ */
+
+ _createClass(TypedDict, [
+ {
+ key: 'size',
+ value: function size() {
+ return Object.keys(this.data).length;
+ } /**
+ * Returns true if the given key exists in the Dictionary,
+ * otherwise returns false.
+ *
+ * @method hasKey
+ * @param {Number|String} key that you want to look up
+ * @return {Boolean} whether that key exists in Dictionary
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(1, 10);
+ * myDictionary.create(2, 20);
+ * myDictionary.create(3, 30);
+ * print(myDictionary.size()); // logs 3 to the console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'hasKey',
+ value: function hasKey(key) {
+ return this.data.hasOwnProperty(key);
+ } /**
+ * Returns the value stored at the given key.
+ *
+ * @method get
+ * @param {Number|String} the key you want to access
+ * @return {Number|String} the value stored at that key
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // logs true to console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(key) {
+ if (this.data.hasOwnProperty(key)) {
+ return this.data[key];
+ } else {
+ console.log(''.concat(key, ' does not exist in this Dictionary'));
+ }
+ } /**
+ * Updates the value associated with the given key in case it already exists
+ * in the Dictionary. Otherwise a new key-value pair is added.
+ *
+ * @method set
+ * @param {Number|String} key
+ * @param {Number|String} value
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * let myValue = myDictionary.get('p5');
+ * print(myValue === 'js'); // logs true to console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(key, value) {
+ if (this._validate(value)) {
+ this.data[key] = value;
+ } else {
+ console.log('Those values dont work for this dictionary type.');
+ }
+ } /**
+ * private helper function to handle the user passing in objects
+ * during construction or calls to create()
+ */
+
+ },
+ {
+ key: '_addObj',
+ value: function _addObj(obj) {
+ for (var key in obj) {
+ this.set(key, obj[key]);
+ }
+ } /**
+ * Creates a new key-value pair in the Dictionary.
+ *
+ * @method create
+ * @param {Number|String} key
+ * @param {Number|String} value
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.set('p5', 'JS');
+ * myDictionary.print(); // logs "key: p5 - value: JS" to console
+ * }
+ *
+ *
+ */
+ /**
+ * @method create
+ * @param {Object} obj key/value pair
+ */
+
+ },
+ {
+ key: 'create',
+ value: function create(key, value) {
+ if (key instanceof Object && typeof value === 'undefined') {
+ this._addObj(key);
+ } else if (typeof key !== 'undefined') {
+ this.set(key, value);
+ } else {
+ console.log('In order to create a new Dictionary entry you must pass ' + 'an object or a key, value pair');
+ }
+ } /**
+ * Removes all previously stored key-value pairs from the Dictionary.
+ *
+ * @method clear
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'clear',
+ value: function clear() {
+ this.data = {
+ };
+ } /**
+ * Removes the key-value pair stored at the given key from the Dictionary.
+ *
+ * @method remove
+ * @param {Number|String} key for the pair to remove
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // prints 'true'
+ * myDictionary.clear();
+ * print(myDictionary.hasKey('p5')); // prints 'false'
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'remove',
+ value: function remove(key) {
+ if (this.data.hasOwnProperty(key)) {
+ delete this.data[key];
+ } else {
+ throw new Error(''.concat(key, ' does not exist in this Dictionary'));
+ }
+ } /**
+ * Logs the set of items currently stored in the Dictionary to the console.
+ *
+ * @method print
+ *
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * myDictionary.remove('p5');
+ * myDictionary.print();
+ * // above logs "key: happy value: coding" to console
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'print',
+ value: function print() {
+ for (var item in this.data) {
+ console.log('key:'.concat(item, ' value:').concat(this.data[item]));
+ }
+ } /**
+ * Converts the Dictionary into a CSV file for local download.
+ *
+ * @method saveTable
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.create('happy', 'coding');
+ * myDictionary.print();
+ * // above logs "key: p5 - value: js, key: happy - value: coding" to console
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'saveTable',
+ value: function saveTable(filename) {
+ var output = '';
+ for (var key in this.data) {
+ output += ''.concat(key, ',').concat(this.data[key], '\n');
+ }
+ var blob = new Blob([output], {
+ type: 'text/csv'
+ });
+ _main.default.prototype.downloadFile(blob, filename || 'mycsv', 'csv');
+ } /**
+ * Converts the Dictionary into a JSON file for local download.
+ *
+ * @method saveJSON
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * createStringDict({
+ * john: 1940,
+ * paul: 1942,
+ * george: 1943,
+ * ringo: 1940
+ * }).saveTable('beatles');
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'saveJSON',
+ value: function saveJSON(filename, opt) {
+ _main.default.prototype.saveJSON(this.data, filename, opt);
+ } /**
+ * private helper function to ensure that the user passed in valid
+ * values for the Dictionary type
+ */
+
+ },
+ {
+ key: '_validate',
+ value: function _validate(value) {
+ return true;
+ }
+ }
+ ]);
+ return TypedDict;
+ }();
+ /**
+ *
+ * A simple Dictionary class for Strings.
+ *
+ * @class p5.StringDict
+ * @extends p5.TypedDict
+ */
+ _main.default.StringDict = /*#__PURE__*/ function (_p5$TypedDict) {
+ _inherits(StringDict, _p5$TypedDict);
+ var _super = _createSuper(StringDict);
+ function StringDict() {
+ _classCallCheck(this, StringDict);
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ return _super.call.apply(_super, [
+ this
+ ].concat(args));
+ }
+ _createClass(StringDict, [
+ {
+ key: '_validate',
+ value: function _validate(value) {
+ return typeof value === 'string';
+ }
+ }
+ ]);
+ return StringDict;
+ }(_main.default.TypedDict);
+ /**
+ *
+ * A simple Dictionary class for Numbers.
+ *
+ * @class p5.NumberDict
+ * @constructor
+ * @extends p5.TypedDict
+ */
+ _main.default.NumberDict = /*#__PURE__*/ function (_p5$TypedDict2) {
+ _inherits(NumberDict, _p5$TypedDict2);
+ var _super2 = _createSuper(NumberDict);
+ function NumberDict() {
+ _classCallCheck(this, NumberDict);
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ return _super2.call.apply(_super2, [
+ this
+ ].concat(args));
+ } /**
+ * private helper function to ensure that the user passed in valid
+ * values for the Dictionary type
+ */
+
+ _createClass(NumberDict, [
+ {
+ key: '_validate',
+ value: function _validate(value) {
+ return typeof value === 'number';
+ } /**
+ * Add the given number to the value currently stored at the given key.
+ * The sum then replaces the value previously stored in the Dictionary.
+ *
+ * @method add
+ * @param {Number} Key for the value you wish to add to
+ * @param {Number} Number to add to the value
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * createStringDict({
+ * john: 1940,
+ * paul: 1942,
+ * george: 1943,
+ * ringo: 1940
+ * }).saveJSON('beatles');
+ * }
+ * }
+ *
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'add',
+ value: function add(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] += amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ } /**
+ * Subtract the given number from the value currently stored at the given key.
+ * The difference then replaces the value previously stored in the Dictionary.
+ *
+ * @method sub
+ * @param {Number} Key for the value you wish to subtract from
+ * @param {Number} Number to subtract from the value
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.add(2, 2);
+ * print(myDictionary.get(2)); // logs 7 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'sub',
+ value: function sub(key, amount) {
+ this.add(key, - amount);
+ } /**
+ * Multiply the given number with the value currently stored at the given key.
+ * The product then replaces the value previously stored in the Dictionary.
+ *
+ * @method mult
+ * @param {Number} Key for value you wish to multiply
+ * @param {Number} Amount to multiply the value by
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.sub(2, 2);
+ * print(myDictionary.get(2)); // logs 3 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mult',
+ value: function mult(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] *= amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ } /**
+ * Divide the given number with the value currently stored at the given key.
+ * The quotient then replaces the value previously stored in the Dictionary.
+ *
+ * @method div
+ * @param {Number} Key for value you wish to divide
+ * @param {Number} Amount to divide the value by
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 4);
+ * myDictionary.mult(2, 2);
+ * print(myDictionary.get(2)); // logs 8 to console.
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'div',
+ value: function div(key, amount) {
+ if (this.data.hasOwnProperty(key)) {
+ this.data[key] /= amount;
+ } else {
+ console.log('The key - '.concat(key, ' does not exist in this dictionary.'));
+ }
+ } /**
+ * private helper function for finding lowest or highest value
+ * the argument 'flip' is used to flip the comparison arrow
+ * from 'less than' to 'greater than'
+ */
+
+ },
+ {
+ key: '_valueTest',
+ value: function _valueTest(flip) {
+ if (Object.keys(this.data).length === 0) {
+ throw new Error('Unable to search for a minimum or maximum value on an empty NumberDict');
+ } else if (Object.keys(this.data).length === 1) {
+ return this.data[Object.keys(this.data) [0]];
+ } else {
+ var result = this.data[Object.keys(this.data) [0]];
+ for (var key in this.data) {
+ if (this.data[key] * flip < result * flip) {
+ result = this.data[key];
+ }
+ }
+ return result;
+ }
+ } /**
+ * Return the lowest number currently stored in the Dictionary.
+ *
+ * @method minValue
+ * @return {Number}
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 8);
+ * myDictionary.div(2, 2);
+ * print(myDictionary.get(2)); // logs 4 to console.
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'minValue',
+ value: function minValue() {
+ return this._valueTest(1);
+ } /**
+ * Return the highest number currently stored in the Dictionary.
+ *
+ * @method maxValue
+ * @return {Number}
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let lowestValue = myDictionary.minValue(); // value is -10
+ * print(lowestValue);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'maxValue',
+ value: function maxValue() {
+ return this._valueTest( - 1);
+ } /**
+ * private helper function for finding lowest or highest key
+ * the argument 'flip' is used to flip the comparison arrow
+ * from 'less than' to 'greater than'
+ */
+
+ },
+ {
+ key: '_keyTest',
+ value: function _keyTest(flip) {
+ if (Object.keys(this.data).length === 0) {
+ throw new Error('Unable to use minValue on an empty NumberDict');
+ } else if (Object.keys(this.data).length === 1) {
+ return Object.keys(this.data) [0];
+ } else {
+ var result = Object.keys(this.data) [0];
+ for (var i = 1; i < Object.keys(this.data).length; i++) {
+ if (Object.keys(this.data) [i] * flip < result * flip) {
+ result = Object.keys(this.data) [i];
+ }
+ }
+ return result;
+ }
+ } /**
+ * Return the lowest key currently used in the Dictionary.
+ *
+ * @method minKey
+ * @return {Number}
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let highestValue = myDictionary.maxValue(); // value is 3
+ * print(highestValue);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'minKey',
+ value: function minKey() {
+ return this._keyTest(1);
+ } /**
+ * Return the highest key currently used in the Dictionary.
+ *
+ * @method maxKey
+ * @return {Number}
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let lowestKey = myDictionary.minKey(); // value is 1.2
+ * print(lowestKey);
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'maxKey',
+ value: function maxKey() {
+ return this._keyTest( - 1);
+ }
+ }
+ ]);
+ return NumberDict;
+ }(_main.default.TypedDict);
+ var _default = _main.default.TypedDict;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-prototype-of': 198,
+ 'core-js/modules/es.object.keys': 199,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.reflect.construct': 202,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 314: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/web.url');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.trim');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/web.url');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * The web is much more than just canvas and the DOM functionality makes it easy to interact
+ * with other HTML5 objects, including text, hyperlink, image, input, video,
+ * audio, and webcam.
+ * There is a set of creation methods, DOM manipulation methods, and
+ * an extended p5.Element that supports a range of HTML elements. See the
+ *
+ * beyond the canvas tutorial for a full overview of how this addon works.
+ *
+ * See tutorial: beyond the canvas
+ * for more info on how to use this library.
+ *
+ * @module DOM
+ * @submodule DOM
+ * @for p5
+ * @requires p5
+ */
+ /**
+ * Searches the page for the first element that matches the given CSS selector string (can be an
+ * ID, class, tag name or a combination) and returns it as a p5.Element.
+ * The DOM node itself can be accessed with .elt.
+ * Returns null if none found. You can also specify a container to search within.
+ *
+ * @method select
+ * @param {String} selectors CSS selector string of element to search for
+ * @param {String|p5.Element|HTMLElement} [container] CSS selector string, p5.Element, or
+ * HTML element to search within
+ * @return {p5.Element|null} p5.Element containing node found
+ * @example
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let highestKey = myDictionary.maxKey(); // value is 4
+ * print(highestKey);
+ * }
+ *
+ * function setup() {
+ * createCanvas(50, 50);
+ * background(30);
+ * // move canvas down and right
+ * select('canvas').position(10, 30);
+ * }
+ *
+ * // select using ID
+ * let a = select('#container');
+ * let b = select('#beep', '#container');
+ * let c;
+ * if (a) {
+ * // select using class
+ * c = select('.boop', a);
+ * }
+ * // select using CSS selector string
+ * let d = select('#container #bleep');
+ * let e = select('#container p');
+ * [a, b, c, d, e]; // unused
+ *
+ * function setup() {
+ * createButton('btn');
+ * createButton('2nd btn');
+ * createButton('3rd btn');
+ * let buttons = selectAll('button');
+ *
+ * for (let i = 0; i < 3; i++) {
+ * buttons[i].size(100);
+ * buttons[i].position(0, i * 30);
+ * }
+ * }
+ *
+ * // these are all valid calls to selectAll()
+ * let a = selectAll('.beep');
+ * a = selectAll('div');
+ * a = selectAll('button', '#container');
+ *
+ * let b = createDiv();
+ * b.id('container');
+ * let c = select('#container');
+ * a = selectAll('p', c);
+ * a = selectAll('#container p');
+ *
+ * let d = document.getElementById('container');
+ * a = selectAll('.boop', d);
+ * a = selectAll('#container .boop');
+ * console.log(a);
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background('grey');
+ * let div = createDiv('this is some text');
+ * let p = createP('this is a paragraph');
+ * div.style('font-size', '16px');
+ * p.style('font-size', '16px');
+ * }
+ * function mousePressed() {
+ * removeElements(); // this will remove the div and p, not canvas
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('pear');
+ * sel.option('kiwi');
+ * sel.option('grape');
+ * sel.changed(mySelectEvent);
+ * }
+ *
+ * function mySelectEvent() {
+ * let item = sel.value();
+ * background(200);
+ * text("it's a " + item + '!', 50, 50);
+ * }
+ *
+ * let checkbox;
+ * let cnv;
+ *
+ * function setup() {
+ * checkbox = createCheckbox(' fill');
+ * checkbox.changed(changeFill);
+ * cnv = createCanvas(100, 100);
+ * cnv.position(0, 30);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * ellipse(50, 50, 50, 50);
+ * }
+ *
+ * function changeFill() {
+ * if (checkbox.checked()) {
+ * fill(0);
+ * } else {
+ * noFill();
+ * }
+ * }
+ *
+ * // Open your console to see the output
+ * function setup() {
+ * createCanvas(100, 100);
+ * background('grey');
+ * let inp = createInput('');
+ * inp.position(0, 0);
+ * inp.size(100);
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent() {
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ * let div = createDiv('this is some text');
+ * div.style('font-size', '16px');
+ * div.position(10, 0);
+ *
+ * let p = createP('this is some text');
+ * p.style('font-size', '16px');
+ * p.position(10, 0);
+ *
+ * let span = createSpan('this is some text');
+ * span.position(0, 0);
+ *
+ * let img = createImg(
+ * 'https://p5js.org/assets/img/asterisk-01.png',
+ * 'the p5 magenta asterisk'
+ * );
+ * img.position(0, -10);
+ *
+ * let a = createA('http://p5js.org/', 'this is a link');
+ * a.position(0, 0);
+ *
+ * let slider;
+ * function setup() {
+ * slider = createSlider(0, 255, 100);
+ * slider.position(10, 10);
+ * slider.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * let val = slider.value();
+ * background(val);
+ * }
+ *
+ * let slider;
+ * function setup() {
+ * colorMode(HSB);
+ * slider = createSlider(0, 360, 60, 40);
+ * slider.position(10, 10);
+ * slider.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * let val = slider.value();
+ * background(val, 100, 100, 1);
+ * }
+ *
+ * let button;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(0);
+ * button = createButton('click me');
+ * button.position(0, 0);
+ * button.mousePressed(changeBG);
+ * }
+ *
+ * function changeBG() {
+ * let val = random(255);
+ * background(val);
+ * }
+ *
+ * let checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('label', false);
+ * checkbox.changed(myCheckedEvent);
+ * }
+ *
+ * function myCheckedEvent() {
+ * if (checkbox.checked()) {
+ * console.log('Checking!');
+ * } else {
+ * console.log('Unchecking!');
+ * }
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('pear');
+ * sel.option('kiwi');
+ * sel.option('grape');
+ * sel.selected('kiwi');
+ * sel.changed(mySelectEvent);
+ * }
+ *
+ * function mySelectEvent() {
+ * let item = sel.value();
+ * background(200);
+ * text('It is a ' + item + '!', 50, 50);
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('oil');
+ * sel.option('milk');
+ * sel.option('bread');
+ * sel.disable('milk');
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('oil');
+ * sel.option('milk');
+ * sel.option('bread');
+ * // disable milk and oil
+ * sel.disable('milk');
+ * sel.disable('oil');
+ * // enable milk again
+ * sel.enable('milk');
+ * }
+ *
+ * let radio;
+ *
+ * function setup() {
+ * radio = createRadio();
+ * radio.option('black');
+ * radio.option('white');
+ * radio.option('gray');
+ * radio.style('width', '60px');
+ * textAlign(CENTER);
+ * fill(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * let val = radio.value();
+ * background(val);
+ * text(val, width / 2, height / 2);
+ * }
+ *
+ * let radio;
+ *
+ * function setup() {
+ * radio = createRadio();
+ * radio.option('1', 'apple');
+ * radio.option('2', 'bread');
+ * radio.option('3', 'juice');
+ * radio.style('width', '30px');
+ * radio.selected('2');
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let val = radio.value();
+ * if (val) {
+ * text('item cost is $' + val, width / 2, height / 2);
+ * }
+ * }
+ *
+ * let colorPicker;
+ * function setup() {
+ * createCanvas(100, 100);
+ * colorPicker = createColorPicker('#ed225d');
+ * colorPicker.position(0, height + 5);
+ * }
+ *
+ * function draw() {
+ * background(colorPicker.color());
+ * }
+ *
+ * let inp1, inp2;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background('grey');
+ * inp1 = createColorPicker('#ff0000');
+ * inp1.position(0, height + 5);
+ * inp1.input(setShade1);
+ * inp2 = createColorPicker(color('yellow'));
+ * inp2.position(0, height + 30);
+ * inp2.input(setShade2);
+ * setMidShade();
+ * }
+ *
+ * function setMidShade() {
+ * // Finding a shade between the two
+ * let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);
+ * fill(commonShade);
+ * rect(20, 20, 60, 60);
+ * }
+ *
+ * function setShade1() {
+ * setMidShade();
+ * console.log('You are choosing shade 1 to be : ', this.value());
+ * }
+ * function setShade2() {
+ * setMidShade();
+ * console.log('You are choosing shade 2 to be : ', this.value());
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background('grey');
+ * let inp = createInput('');
+ * inp.position(0, 0);
+ * inp.size(100);
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent() {
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ * let input;
+ * let img;
+ *
+ * function setup() {
+ * input = createFileInput(handleFile);
+ * input.position(0, 0);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * function handleFile(file) {
+ * print(file);
+ * if (file.type === 'image') {
+ * img = createImg(file.data, '');
+ * img.hide();
+ * } else {
+ * img = null;
+ * }
+ * }
+ *
+ * let vid;
+ * function setup() {
+ * noCanvas();
+ *
+ * vid = createVideo(
+ * ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
+ * vidLoad
+ * );
+ *
+ * vid.size(100, 100);
+ * }
+ *
+ * // This function is called when the video loads
+ * function vidLoad() {
+ * vid.loop();
+ * vid.volume(0);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * // here we set the element to autoplay
+ * // The element will play as soon
+ * // as it is able to do so.
+ * ele.autoplay(true);
+ * }
+ *
+ *
+ *
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * capture = createCapture(VIDEO);
+ * capture.hide();
+ * }
+ *
+ * function draw() {
+ * image(capture, 0, 0, width, width * capture.height / capture.width);
+ * filter(INVERT);
+ * }
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(480, 120);
+ * let constraints = {
+ * video: {
+ * mandatory: {
+ * minWidth: 1280,
+ * minHeight: 720
+ * },
+ * optional: [{ maxFrameRate: 10 }]
+ * },
+ * audio: true
+ * };
+ * createCapture(constraints, function(stream) {
+ * console.log(stream);
+ * });
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.createCapture = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('createCapture', args);
+ // return if getUserMedia is not supported by browser
+ if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
+ throw new DOMException('getUserMedia not supported in this browser');
+ }
+ var useVideo = true;
+ var useAudio = true;
+ var constraints;
+ var callback;
+ for (var _i2 = 0, _args = args; _i2 < _args.length; _i2++) {
+ var arg = _args[_i2];
+ if (arg === _main.default.prototype.VIDEO) useAudio = false;
+ else if (arg === _main.default.prototype.AUDIO) useVideo = false;
+ else if (_typeof(arg) === 'object') constraints = arg;
+ else if (typeof arg === 'function') callback = arg;
+ }
+ if (!constraints) constraints = {
+ video: useVideo,
+ audio: useAudio
+ };
+ var domElement = document.createElement('video');
+ // required to work in iOS 11 & up:
+ domElement.setAttribute('playsinline', '');
+ navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
+ try {
+ if ('srcObject' in domElement) {
+ domElement.srcObject = stream;
+ } else {
+ domElement.src = window.URL.createObjectURL(stream);
+ }
+ } catch (err) {
+ domElement.src = stream;
+ }
+ }, console.log);
+ var videoEl = addElement(domElement, this, true);
+ videoEl.loadedmetadata = false;
+ // set width and height onload metadata
+ domElement.addEventListener('loadedmetadata', function () {
+ domElement.play();
+ if (domElement.width) {
+ videoEl.width = domElement.width;
+ videoEl.height = domElement.height;
+ } else {
+ videoEl.width = videoEl.elt.width = domElement.videoWidth;
+ videoEl.height = videoEl.elt.height = domElement.videoHeight;
+ }
+ videoEl.loadedmetadata = true;
+ if (callback) callback(domElement.srcObject);
+ });
+ return videoEl;
+ };
+ /**
+ * Creates element with given tag in the DOM with given content.
+ *
+ * @method createElement
+ * @param {String} tag tag for the new element
+ * @param {String} [content] html content to be inserted into the element
+ * @return {p5.Element} pointer to p5.Element holding created node
+ * @example
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(640, 480);
+ * capture = createCapture(VIDEO);
+ * }
+ * function draw() {
+ * background(0);
+ * if (capture.loadedmetadata) {
+ * let c = capture.get(0, 0, 100, 100);
+ * image(c, 0, 0);
+ * }
+ * }
+ *
+ *
+ * let h5 = createElement('h5', 'im an h5 p5.element!');
+ * h5.style('color', '#00a1d3');
+ * h5.position(0, 0);
+ *
+ * let div = createDiv('div');
+ * div.addClass('myClass');
+ *
+ * // In this example, a class is set when the div is created
+ * // and removed when mouse is pressed. This could link up
+ * // with a CSS style rule to toggle style properties.
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('myClass');
+ * }
+ *
+ * function mousePressed() {
+ * div.removeClass('myClass');
+ * }
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('show');
+ * }
+ *
+ * function mousePressed() {
+ * if (div.hasClass('show')) {
+ * div.addClass('show');
+ * } else {
+ * div.removeClass('show');
+ * }
+ * }
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('show');
+ * }
+ *
+ * function mousePressed() {
+ * div.toggleClass('show');
+ * }
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div0.child(div1); // use p5.Element
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div1.id('apples');
+ * div0.child('apples'); // use id
+ *
+ * // this example assumes there is a div already on the page
+ * // with id "myChildDiv"
+ * let div0 = createDiv('this is the parent');
+ * let elt = document.getElementById('myChildDiv');
+ * div0.child(elt); // use element from page
+ *
+ * function setup() {
+ * let div = createDiv('').size(10, 10);
+ * div.style('background-color', 'orange');
+ * div.center();
+ * }
+ *
+ * let div = createDiv('').size(100, 100);
+ * div.html('hi');
+ *
+ * let div = createDiv('Hello ').size(100, 100);
+ * div.html('World', true);
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // positions canvas 50px to the right and 100px
+ * // below upper left corner of the window
+ * cnv.position(50, 100);
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // positions canvas at upper left corner of the window
+ * // with a 'fixed' position type
+ * cnv.position(0, 0, 'fixed');
+ * }
+ *
+ * let myDiv = createDiv('I like pandas.');
+ * myDiv.style('font-size', '18px');
+ * myDiv.style('color', '#ff0000');
+ * myDiv.position(0, 0);
+ *
+ * let col = color(25, 23, 200, 50);
+ * let button = createButton('button');
+ * button.style('background-color', col);
+ * button.position(0, 0);
+ *
+ * let myDiv, fontSize;
+ * function setup() {
+ * background(200);
+ * myDiv = createDiv('I like gray.');
+ * myDiv.position(0, 0);
+ * myDiv.style('z-index', 10);
+ * }
+ *
+ * function draw() {
+ * fontSize = min(mouseX, 90);
+ * myDiv.style('font-size', fontSize + 'px');
+ * }
+ *
+ * let myDiv = createDiv('I like pandas.');
+ * myDiv.attribute('align', 'center');
+ *
+ * let button;
+ * let checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('enable', true);
+ * checkbox.changed(enableButton);
+ * button = createButton('button');
+ * button.position(10, 10);
+ * }
+ *
+ * function enableButton() {
+ * if (this.checked()) {
+ * // Re-enable the button
+ * button.removeAttribute('disabled');
+ * } else {
+ * // Disable the button
+ * button.attribute('disabled', '');
+ * }
+ * }
+ *
+ * // gets the value
+ * let inp;
+ * function setup() {
+ * inp = createInput('');
+ * }
+ *
+ * function mousePressed() {
+ * print(inp.value());
+ * }
+ *
+ * // sets the value
+ * let inp;
+ * function setup() {
+ * inp = createInput('myValue');
+ * }
+ *
+ * function mousePressed() {
+ * inp.value('myValue');
+ * }
+ *
+ * let div = createDiv('div');
+ * div.style('display', 'none');
+ * div.show(); // turns display to block
+ *
+ * let div = createDiv('this is a div');
+ * div.hide();
+ *
+ * let div = createDiv('this is a div');
+ * div.size(100, 100);
+ * let img = createImg(
+ * 'assets/rockies.jpg',
+ * 'A tall mountain with a small forest and field in front of it on a sunny day',
+ * '',
+ * () => {
+ * img.size(10, AUTO);
+ * }
+ * );
+ *
+ * let myDiv = createDiv('this is some text');
+ * myDiv.remove();
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('drop file', width / 2, height / 2);
+ * c.drop(gotFile);
+ * }
+ *
+ * function gotFile(file) {
+ * background(200);
+ * text('received file:', width / 2, height / 2);
+ * text(file.name, width / 2, height / 2 + 50);
+ * }
+ *
+ * let img;
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('drop image', width / 2, height / 2);
+ * c.drop(gotFile);
+ * }
+ *
+ * function draw() {
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * function gotFile(file) {
+ * img = createImg(file.data, '').hide();
+ * }
+ *
+ * let ele;
+ *
+ * function setup() {
+ * background(250);
+ *
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * //We'll set up our example so that
+ * //when you click on the text,
+ * //an alert box displays the MediaElement's
+ * //src field.
+ * textAlign(CENTER);
+ * text('Click Me!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * //Show our p5.MediaElement's src field
+ * alert(ele.src);
+ * }
+ * }
+ *
+ * let ele;
+ *
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to Play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * //Here we call the play() function on
+ * //the p5.MediaElement we created above.
+ * //This will start the audio sample.
+ * ele.play();
+ *
+ * background(200);
+ * text('You clicked Play!', width / 2, height / 2);
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and stops a sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * //if the sample is currently playing
+ * //calling the stop() function on
+ * //our p5.MediaElement will stop
+ * //it and reset its current
+ * //time to 0 (i.e. it will start
+ * //at the beginning the next time
+ * //you play it)
+ * ele.stop();
+ *
+ * sampleIsPlaying = false;
+ * text('Click to play!', width / 2, height / 2);
+ * } else {
+ * //loop our sound element until we
+ * //call ele.stop() on it.
+ * ele.loop();
+ *
+ * sampleIsPlaying = true;
+ * text('Click to stop!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and pauses a sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * //Calling pause() on our
+ * //p5.MediaElement will stop it
+ * //playing, but when we call the
+ * //loop() or play() functions
+ * //the sample will start from
+ * //where we paused it.
+ * ele.pause();
+ *
+ * sampleIsPlaying = false;
+ * text('Click to resume!', width / 2, height / 2);
+ * } else {
+ * //loop our sound element until we
+ * //call ele.pause() on it.
+ * ele.loop();
+ *
+ * sampleIsPlaying = true;
+ * text('Click to pause!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //Clicking the canvas will loop
+ * //the audio sample until the user
+ * //clicks again to stop it
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsLooping = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to loop!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (!sampleIsLooping) {
+ * //loop our sound element until we
+ * //call ele.stop() on it.
+ * ele.loop();
+ *
+ * sampleIsLooping = true;
+ * text('Click to stop!', width / 2, height / 2);
+ * } else {
+ * ele.stop();
+ *
+ * sampleIsLooping = false;
+ * text('Click to loop!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and stops loop of sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * ele.noLoop();
+ * sampleIsPlaying = false;
+ * text('No more Loops!', width / 2, height / 2);
+ * } else {
+ * ele.loop();
+ * sampleIsPlaying = true;
+ * text('Click to stop looping!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * let videoElement;
+ * function setup() {
+ * noCanvas();
+ * videoElement = createVideo(['assets/small.mp4'], onVideoLoad);
+ * }
+ * function onVideoLoad() {
+ * // The media will play as soon as it is loaded.
+ * videoElement.autoplay();
+ * videoElement.volume(0);
+ * videoElement.size(100, 100);
+ * }
+ *
+ * let videoElement;
+ * function setup() {
+ * noCanvas();
+ * videoElement = createVideo(['assets/small.mp4'], onVideoLoad);
+ * }
+ * function onVideoLoad() {
+ * // The media will not play until some explicitly triggered.
+ * videoElement.autoplay(false);
+ * videoElement.volume(0);
+ * videoElement.size(100, 100);
+ * }
+ *
+ * function mouseClicked() {
+ * videoElement.play();
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * // p5.MediaElement objects are usually created
+ * // by calling the createAudio(), createVideo(),
+ * // and createCapture() functions.
+ * // In this example we create
+ * // a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to Play!', width / 2, height / 2);
+ * }
+ * function mouseClicked() {
+ * // Here we call the volume() function
+ * // on the sound element to set its volume
+ * // Volume must be between 0.0 and 1.0
+ * ele.volume(0.2);
+ * ele.play();
+ * background(200);
+ * text('You clicked Play!', width / 2, height / 2);
+ * }
+ *
+ * let audio;
+ * let counter = 0;
+ *
+ * function loaded() {
+ * audio.play();
+ * }
+ *
+ * function setup() {
+ * audio = createAudio('assets/lucky_dragons.mp3', loaded);
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (counter === 0) {
+ * background(0, 255, 0);
+ * text('volume(0.9)', width / 2, height / 2);
+ * } else if (counter === 1) {
+ * background(255, 255, 0);
+ * text('volume(0.5)', width / 2, height / 2);
+ * } else if (counter === 2) {
+ * background(255, 0, 0);
+ * text('volume(0.1)', width / 2, height / 2);
+ * }
+ * }
+ *
+ * function mousePressed() {
+ * counter++;
+ * if (counter === 0) {
+ * audio.volume(0.9);
+ * } else if (counter === 1) {
+ * audio.volume(0.5);
+ * } else if (counter === 2) {
+ * audio.volume(0.1);
+ * } else {
+ * counter = 0;
+ * audio.volume(0.9);
+ * }
+ * }
+ *
+ *
+ * //Clicking the canvas will loop
+ * //the audio sample until the user
+ * //clicks again to stop it
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ * let button;
+ *
+ * function setup() {
+ * createCanvas(710, 400);
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * ele.loop();
+ * background(200);
+ *
+ * button = createButton('2x speed');
+ * button.position(100, 68);
+ * button.mousePressed(twice_speed);
+ *
+ * button = createButton('half speed');
+ * button.position(200, 68);
+ * button.mousePressed(half_speed);
+ *
+ * button = createButton('reverse play');
+ * button.position(300, 68);
+ * button.mousePressed(reverse_speed);
+ *
+ * button = createButton('STOP');
+ * button.position(400, 68);
+ * button.mousePressed(stop_song);
+ *
+ * button = createButton('PLAY!');
+ * button.position(500, 68);
+ * button.mousePressed(play_speed);
+ * }
+ *
+ * function twice_speed() {
+ * ele.speed(2);
+ * }
+ *
+ * function half_speed() {
+ * ele.speed(0.5);
+ * }
+ *
+ * function reverse_speed() {
+ * ele.speed(-1);
+ * }
+ *
+ * function stop_song() {
+ * ele.stop();
+ * }
+ *
+ * function play_speed() {
+ * ele.play();
+ * }
+ *
+ * let ele;
+ * let beginning = true;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('start at beginning', width / 2, height / 2);
+ * }
+ *
+ * // this function fires with click anywhere
+ * function mousePressed() {
+ * if (beginning === true) {
+ * // here we start the sound at the beginning
+ * // time(0) is not necessary here
+ * // as this produces the same result as
+ * // play()
+ * ele.play().time(0);
+ * background(200);
+ * text('jump 2 sec in', width / 2, height / 2);
+ * beginning = false;
+ * } else {
+ * // here we jump 2 seconds into the sound
+ * ele.play().time(2);
+ * background(250);
+ * text('start at beginning', width / 2, height / 2);
+ * beginning = true;
+ * }
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/doorbell.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to know the duration!', 10, 25, 70, 80);
+ * }
+ * function mouseClicked() {
+ * ele.play();
+ * background(200);
+ * //ele.duration dislpays the duration
+ * text(ele.duration() + ' seconds', width / 2, height / 2);
+ * }
+ *
+ * function setup() {
+ * let audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ * audioEl.onended(sayDone);
+ * }
+ *
+ * function sayDone(elt) {
+ * alert('done playing ' + elt.src);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio()
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to Show Controls!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * ele.showControls();
+ * background(200);
+ * text('Controls Shown', width / 2, height / 2);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio()
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * ele.showControls();
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to hide Controls!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * ele.hideControls();
+ * background(200);
+ * text('Controls hidden', width / 2, height / 2);
+ * }
+ *
+ * //
+ * //
+ * function setup() {
+ * createCanvas(200, 200);
+ *
+ * let audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ *
+ * // schedule three calls to changeBackground
+ * audioEl.addCue(0.5, changeBackground, color(255, 0, 0));
+ * audioEl.addCue(1.0, changeBackground, color(0, 255, 0));
+ * audioEl.addCue(2.5, changeBackground, color(0, 0, 255));
+ * audioEl.addCue(3.0, changeBackground, color(0, 255, 255));
+ * audioEl.addCue(4.2, changeBackground, color(255, 255, 0));
+ * audioEl.addCue(5.0, changeBackground, color(255, 255, 0));
+ * }
+ *
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *
+ * let audioEl, id1, id2;
+ * function setup() {
+ * background(255, 255, 255);
+ * audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ * // schedule five calls to changeBackground
+ * id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));
+ * audioEl.addCue(1.0, changeBackground, color(0, 255, 0));
+ * audioEl.addCue(2.5, changeBackground, color(0, 0, 255));
+ * audioEl.addCue(3.0, changeBackground, color(0, 255, 255));
+ * id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));
+ * text('Click to remove first and last Cue!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * audioEl.removeCue(id1);
+ * audioEl.removeCue(id2);
+ * }
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *
+ * let audioEl;
+ * function setup() {
+ * background(255, 255, 255);
+ * audioEl = createAudio('assets/beat.mp3');
+ * //Show the default MediaElement controls, as determined by the web browser
+ * audioEl.showControls();
+ * // schedule calls to changeBackground
+ * background(200);
+ * text('Click to change Cue!', 10, 25, 70, 80);
+ * audioEl.addCue(0.5, changeBackground, color(255, 0, 0));
+ * audioEl.addCue(1.0, changeBackground, color(0, 255, 0));
+ * audioEl.addCue(2.5, changeBackground, color(0, 0, 255));
+ * audioEl.addCue(3.0, changeBackground, color(0, 255, 255));
+ * audioEl.addCue(4.2, changeBackground, color(255, 255, 0));
+ * }
+ * function mousePressed() {
+ * // here we clear the scheduled callbacks
+ * audioEl.clearCues();
+ * // then we add some more callbacks
+ * audioEl.addCue(1, changeBackground, color(2, 2, 2));
+ * audioEl.addCue(3, changeBackground, color(255, 255, 0));
+ * }
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *
+ *
+ */
+ _main.default.prototype.accelerationX = 0;
+ /**
+ * The system variable accelerationY always contains the acceleration of the
+ * device along the y axis. Value is represented as meters per second squared.
+ *
+ * @property {Number} accelerationY
+ * @readOnly
+ * @example
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationX);
+ * describe('Magnitude of device acceleration is displayed as ellipse size.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.accelerationY = 0;
+ /**
+ * The system variable accelerationZ always contains the acceleration of the
+ * device along the z axis. Value is represented as meters per second squared.
+ *
+ * @property {Number} accelerationZ
+ * @readOnly
+ *
+ * @example
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationY);
+ * describe('Magnitude of device acceleration is displayed as ellipse size');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.accelerationZ = 0;
+ /**
+ * The system variable pAccelerationX always contains the acceleration of the
+ * device along the x axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationX
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationX = 0;
+ /**
+ * The system variable pAccelerationY always contains the acceleration of the
+ * device along the y axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationY
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationY = 0;
+ /**
+ * The system variable pAccelerationZ always contains the acceleration of the
+ * device along the z axis in the frame previous to the current frame. Value
+ * is represented as meters per second squared.
+ *
+ * @property {Number} pAccelerationZ
+ * @readOnly
+ */
+ _main.default.prototype.pAccelerationZ = 0;
+ /**
+ * _updatePAccelerations updates the pAcceleration values
+ *
+ * @private
+ */
+ _main.default.prototype._updatePAccelerations = function () {
+ this._setProperty('pAccelerationX', this.accelerationX);
+ this._setProperty('pAccelerationY', this.accelerationY);
+ this._setProperty('pAccelerationZ', this.accelerationZ);
+ };
+ /**
+ * The system variable rotationX always contains the rotation of the
+ * device along the x axis. If the sketch
+ * angleMode() is set to DEGREES, the value will be -180 to 180. If
+ * it is set to RADIANS, the value will be -PI to PI.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @property {Number} rotationX
+ * @readOnly
+ * @example
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationZ);
+ * describe('Magnitude of device acceleration is displayed as ellipse size');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rotationX = 0;
+ /**
+ * The system variable rotationY always contains the rotation of the
+ * device along the y axis. If the sketch
+ * angleMode() is set to DEGREES, the value will be -90 to 90. If
+ * it is set to RADIANS, the value will be -PI/2 to PI/2.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @property {Number} rotationY
+ * @readOnly
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * describe(`red horizontal line right, green vertical line bottom.
+ * black background.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.rotationY = 0;
+ /**
+ * The system variable rotationZ always contains the rotation of the
+ * device along the z axis. If the sketch
+ * angleMode() is set to DEGREES, the value will be 0 to 360. If
+ * it is set to RADIANS, the value will be 0 to 2*PI.
+ *
+ * Unlike rotationX and rotationY, this variable is available for devices
+ * with a built-in compass only.
+ *
+ * Note: The order the rotations are called is important, ie. if used
+ * together, it must be called in the order Z-X-Y or there might be
+ * unexpected behaviour.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * describe(`red horizontal line right, green vertical line bottom.
+ * black background.`);
+ * }
+ *
+ *
+ *
+ *
+ * @property {Number} rotationZ
+ * @readOnly
+ */
+ _main.default.prototype.rotationZ = 0;
+ /**
+ * The system variable pRotationX always contains the rotation of the
+ * device along the x axis in the frame previous to the current frame.
+ * If the sketch angleMode() is set to DEGREES,
+ * the value will be -180 to 180. If it is set to RADIANS, the value will
+ * be -PI to PI.
+ *
+ * pRotationX can also be used with rotationX to determine the rotate
+ * direction of the device along the X-axis.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * describe(`red horizontal line right, green vertical line bottom.
+ * black background.`);
+ * }
+ *
+ *
+ *
+ *
+ * @property {Number} pRotationX
+ * @readOnly
+ */
+ _main.default.prototype.pRotationX = 0;
+ /**
+ * The system variable pRotationY always contains the rotation of the
+ * device along the y axis in the frame previous to the current frame.
+ * If the sketch angleMode() is set to DEGREES,
+ * the value will be -90 to 90. If it is set to RADIANS, the value will
+ * be -PI/2 to PI/2.
+ *
+ * pRotationY can also be used with rotationY to determine the rotate
+ * direction of the device along the Y-axis.
+ * @example
+ *
+ * // A simple if statement looking at whether
+ * // rotationX - pRotationX < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * // Simple range conversion to make things simpler.
+ * // This is not absolutely necessary but the logic
+ * // will be different in that case.
+ *
+ * let rX = rotationX + 180;
+ * let pRX = pRotationX + 180;
+ *
+ * if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
+ * rotateDirection = 'clockwise';
+ * } else if (rX - pRX < 0 || rX - pRX > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ *
+ * print(rotateDirection);
+ * describe('no image to display.');
+ *
+ *
+ *
+ *
+ * @property {Number} pRotationY
+ * @readOnly
+ */
+ _main.default.prototype.pRotationY = 0;
+ /**
+ * The system variable pRotationZ always contains the rotation of the
+ * device along the z axis in the frame previous to the current frame.
+ * If the sketch angleMode() is set to DEGREES,
+ * the value will be 0 to 360. If it is set to RADIANS, the value will
+ * be 0 to 2*PI.
+ *
+ * pRotationZ can also be used with rotationZ to determine the rotate
+ * direction of the device along the Z-axis.
+ * @example
+ *
+ * // A simple if statement looking at whether
+ * // rotationY - pRotationY < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * // Simple range conversion to make things simpler.
+ * // This is not absolutely necessary but the logic
+ * // will be different in that case.
+ *
+ * let rY = rotationY + 180;
+ * let pRY = pRotationY + 180;
+ *
+ * if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
+ * rotateDirection = 'clockwise';
+ * } else if (rY - pRY < 0 || rY - pRY > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ * print(rotateDirection);
+ * describe('no image to display.');
+ *
+ *
+ *
+ *
+ * @property {Number} pRotationZ
+ * @readOnly
+ */
+ _main.default.prototype.pRotationZ = 0;
+ var startAngleX = 0;
+ var startAngleY = 0;
+ var startAngleZ = 0;
+ var rotateDirectionX = 'clockwise';
+ var rotateDirectionY = 'clockwise';
+ var rotateDirectionZ = 'clockwise';
+ _main.default.prototype.pRotateDirectionX = undefined;
+ _main.default.prototype.pRotateDirectionY = undefined;
+ _main.default.prototype.pRotateDirectionZ = undefined;
+ _main.default.prototype._updatePRotations = function () {
+ this._setProperty('pRotationX', this.rotationX);
+ this._setProperty('pRotationY', this.rotationY);
+ this._setProperty('pRotationZ', this.rotationZ);
+ };
+ /**
+ * When a device is rotated, the axis that triggers the deviceTurned()
+ * method is stored in the turnAxis variable. The turnAxis variable is only defined within
+ * the scope of deviceTurned().
+ * @property {String} turnAxis
+ * @readOnly
+ * @example
+ *
+ * // A simple if statement looking at whether
+ * // rotationZ - pRotationZ < 0 is true or not will be
+ * // sufficient for determining the rotate direction
+ * // in most cases.
+ *
+ * // Some extra logic is needed to account for cases where
+ * // the angles wrap around.
+ * let rotateDirection = 'clockwise';
+ *
+ * if (
+ * (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
+ * rotationZ - pRotationZ < -270
+ * ) {
+ * rotateDirection = 'clockwise';
+ * } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
+ * rotateDirection = 'counter-clockwise';
+ * }
+ * print(rotateDirection);
+ * describe('no image to display.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.turnAxis = undefined;
+ var move_threshold = 0.5;
+ var shake_threshold = 30;
+ /**
+ * The setMoveThreshold() function is used to set the movement threshold for
+ * the deviceMoved() function. The default threshold is set to 0.5.
+ *
+ * @method setMoveThreshold
+ * @param {number} value The threshold value
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device turns`);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when x-axis turns`);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.setMoveThreshold = function (val) {
+ _main.default._validateParameters('setMoveThreshold', arguments);
+ move_threshold = val;
+ };
+ /**
+ * The setShakeThreshold() function is used to set the movement threshold for
+ * the deviceShaken() function. The default threshold is set to 30.
+ *
+ * @method setShakeThreshold
+ * @param {number} value The threshold value
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // You will need to move the device incrementally further
+ * // the closer the square's color gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 0.5;
+ * function setup() {
+ * setMoveThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device moves`);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 0.1;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setMoveThreshold(threshold);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.setShakeThreshold = function (val) {
+ _main.default._validateParameters('setShakeThreshold', arguments);
+ shake_threshold = val;
+ };
+ /**
+ * The deviceMoved() function is called when the device is moved by more than
+ * the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
+ * The threshold value can be changed using setMoveThreshold().
+ *
+ * @method deviceMoved
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // You will need to shake the device more firmly
+ * // the closer the box's fill gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 30;
+ * function setup() {
+ * setShakeThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device is being shaked`);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 5;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setShakeThreshold(threshold);
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The deviceTurned() function is called when the device rotates by
+ * more than 90 degrees continuously.
+ *
+ * The axis that triggers the deviceTurned() method is stored in the turnAxis
+ * variable. The deviceTurned() method can be locked to trigger on any axis:
+ * X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
+ *
+ * @method deviceTurned
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // Move the device around
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device moves`);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device turns`);
+ * }
+ * function deviceTurned() {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The deviceShaken() function is called when the device total acceleration
+ * changes of accelerationX and accelerationY values is more than
+ * the threshold value. The default threshold is set to 30.
+ * The threshold value can be changed using setShakeThreshold().
+ *
+ * @method deviceShaken
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when x-axis turns`);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._ondeviceorientation = function (e) {
+ this._updatePRotations();
+ if (this._angleMode === constants.radians) {
+ e.beta = e.beta * (_PI / 180);
+ e.gamma = e.gamma * (_PI / 180);
+ e.alpha = e.alpha * (_PI / 180);
+ }
+ this._setProperty('rotationX', e.beta);
+ this._setProperty('rotationY', e.gamma);
+ this._setProperty('rotationZ', e.alpha);
+ this._handleMotion();
+ };
+ _main.default.prototype._ondevicemotion = function (e) {
+ this._updatePAccelerations();
+ this._setProperty('accelerationX', e.acceleration.x * 2);
+ this._setProperty('accelerationY', e.acceleration.y * 2);
+ this._setProperty('accelerationZ', e.acceleration.z * 2);
+ this._handleMotion();
+ };
+ _main.default.prototype._handleMotion = function () {
+ if (window.orientation === 90 || window.orientation === - 90) {
+ this._setProperty('deviceOrientation', 'landscape');
+ } else if (window.orientation === 0) {
+ this._setProperty('deviceOrientation', 'portrait');
+ } else if (window.orientation === undefined) {
+ this._setProperty('deviceOrientation', 'undefined');
+ }
+ var context = this._isGlobal ? window : this;
+ if (typeof context.deviceMoved === 'function') {
+ if (Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold || Math.abs(this.accelerationY - this.pAccelerationY) > move_threshold || Math.abs(this.accelerationZ - this.pAccelerationZ) > move_threshold) {
+ context.deviceMoved();
+ }
+ }
+ if (typeof context.deviceTurned === 'function') {
+ // The angles given by rotationX etc is from range -180 to 180.
+ // The following will convert them to 0 to 360 for ease of calculation
+ // of cases when the angles wrapped around.
+ // _startAngleX will be converted back at the end and updated.
+ var wRX = this.rotationX + 180;
+ var wPRX = this.pRotationX + 180;
+ var wSAX = startAngleX + 180;
+ if (wRX - wPRX > 0 && wRX - wPRX < 270 || wRX - wPRX < - 270) {
+ rotateDirectionX = 'clockwise';
+ } else if (wRX - wPRX < 0 || wRX - wPRX > 270) {
+ rotateDirectionX = 'counter-clockwise';
+ }
+ if (rotateDirectionX !== this.pRotateDirectionX) {
+ wSAX = wRX;
+ }
+ if (Math.abs(wRX - wSAX) > 90 && Math.abs(wRX - wSAX) < 270) {
+ wSAX = wRX;
+ this._setProperty('turnAxis', 'X');
+ context.deviceTurned();
+ }
+ this.pRotateDirectionX = rotateDirectionX;
+ startAngleX = wSAX - 180;
+ // Y-axis is identical to X-axis except for changing some names.
+ var wRY = this.rotationY + 180;
+ var wPRY = this.pRotationY + 180;
+ var wSAY = startAngleY + 180;
+ if (wRY - wPRY > 0 && wRY - wPRY < 270 || wRY - wPRY < - 270) {
+ rotateDirectionY = 'clockwise';
+ } else if (wRY - wPRY < 0 || wRY - this.pRotationY > 270) {
+ rotateDirectionY = 'counter-clockwise';
+ }
+ if (rotateDirectionY !== this.pRotateDirectionY) {
+ wSAY = wRY;
+ }
+ if (Math.abs(wRY - wSAY) > 90 && Math.abs(wRY - wSAY) < 270) {
+ wSAY = wRY;
+ this._setProperty('turnAxis', 'Y');
+ context.deviceTurned();
+ }
+ this.pRotateDirectionY = rotateDirectionY;
+ startAngleY = wSAY - 180;
+ // Z-axis is already in the range 0 to 360
+ // so no conversion is needed.
+ if (this.rotationZ - this.pRotationZ > 0 && this.rotationZ - this.pRotationZ < 270 || this.rotationZ - this.pRotationZ < - 270) {
+ rotateDirectionZ = 'clockwise';
+ } else if (this.rotationZ - this.pRotationZ < 0 || this.rotationZ - this.pRotationZ > 270) {
+ rotateDirectionZ = 'counter-clockwise';
+ }
+ if (rotateDirectionZ !== this.pRotateDirectionZ) {
+ startAngleZ = this.rotationZ;
+ }
+ if (Math.abs(this.rotationZ - startAngleZ) > 90 && Math.abs(this.rotationZ - startAngleZ) < 270) {
+ startAngleZ = this.rotationZ;
+ this._setProperty('turnAxis', 'Z');
+ context.deviceTurned();
+ }
+ this.pRotateDirectionZ = rotateDirectionZ;
+ this._setProperty('turnAxis', undefined);
+ }
+ if (typeof context.deviceShaken === 'function') {
+ var accelerationChangeX;
+ var accelerationChangeY;
+ // Add accelerationChangeZ if acceleration change on Z is needed
+ if (this.pAccelerationX !== null) {
+ accelerationChangeX = Math.abs(this.accelerationX - this.pAccelerationX);
+ accelerationChangeY = Math.abs(this.accelerationY - this.pAccelerationY);
+ }
+ if (accelerationChangeX + accelerationChangeY > shake_threshold) {
+ context.deviceShaken();
+ }
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 316: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Events
+ * @submodule Keyboard
+ * @for p5
+ * @requires core
+ */
+ /**
+ * The boolean system variable keyIsPressed is true if any key is pressed
+ * and false if no keys are pressed.
+ *
+ * @property {Boolean} keyIsPressed
+ * @readOnly
+ * @example
+ *
+ * // Run this example on a mobile device
+ * // Shake the device to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`50-by-50 black rect in center of canvas.
+ * turns white on mobile when device shakes`);
+ * }
+ * function deviceShaken() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.isKeyPressed = false;
+ _main.default.prototype.keyIsPressed = false; // khan
+ /**
+ * The system variable key always contains the value of the most recent
+ * key on the keyboard that was typed. To get the proper capitalization, it
+ * is best to use it within keyTyped(). For non-ASCII keys, use the keyCode
+ * variable.
+ *
+ * @property {String} key
+ * @readOnly
+ * @example
+ *
+ * function draw() {
+ * if (keyIsPressed === true) {
+ * fill(0);
+ * } else {
+ * fill(255);
+ * }
+ * rect(25, 25, 50, 50);
+ * describe('50-by-50 white rect that turns black on keypress.');
+ * }
+ *
+ *
+ * // Click any key to display it!
+ * // (Not Guaranteed to be Case Sensitive)
+ * function setup() {
+ * fill(245, 123, 158);
+ * textSize(50);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(key, 33, 65); // Display last key pressed.
+ * describe('canvas displays any key value that is pressed in pink font.');
+ * }
+ *
+ * let fillVal = 126;
+ * function draw() {
+ * fill(fillVal);
+ * rect(25, 25, 50, 50);
+ * describe(`Grey rect center. turns white when up arrow pressed and black when down.
+ * Display key pressed and its keyCode in a yellow box.`);
+ * }
+ *
+ * function keyPressed() {
+ * if (keyCode === UP_ARROW) {
+ * fillVal = 255;
+ * } else if (keyCode === DOWN_ARROW) {
+ * fillVal = 0;
+ * }
+ * }
+ *
+ * function draw() {}
+ * function keyPressed() {
+ * background('yellow');
+ * text(`${key} ${keyCode}`, 10, 40);
+ * print(key, ' ', keyCode);
+ * }
+ * + * Browsers may have different default + * behaviors attached to various key events. To prevent any default + * behavior for this event, add "return false" to the end of the method. + * + * @method keyPressed + * @param {KeyboardEvent} [event] optional KeyboardEvent callback argument. + * @example + *
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`black rect center. turns white when key pressed and black
+ * when released.`);
+ * }
+ * function keyPressed() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`black rect center. turns white when left arrow pressed and
+ * black when right.`);
+ * }
+ * function keyPressed() {
+ * if (keyCode === LEFT_ARROW) {
+ * value = 255;
+ * } else if (keyCode === RIGHT_ARROW) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onkeydown = function (e) {
+ if (this._downKeys[e.which]) {
+ // prevent multiple firings
+ return;
+ }
+ this._setProperty('isKeyPressed', true);
+ this._setProperty('keyIsPressed', true);
+ this._setProperty('keyCode', e.which);
+ this._downKeys[e.which] = true;
+ this._setProperty('key', e.key || String.fromCharCode(e.which) || e.which);
+ var context = this._isGlobal ? window : this;
+ if (typeof context.keyPressed === 'function' && !e.charCode) {
+ var executeDefault = context.keyPressed(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The keyReleased() function is called once every time a key is released.
+ * See key and keyCode for more information.
+ * function keyPressed() {
+ * // Do something
+ * return false; // prevent any default behaviour
+ * }
+ *
+ * + * Browsers may have different default + * behaviors attached to various key events. To prevent any default + * behavior for this event, add "return false" to the end of the function. + * + * @method keyReleased + * @param {KeyboardEvent} [event] optional KeyboardEvent callback argument. + * @example + *
+ *
+ */
+ _main.default.prototype._onkeyup = function (e) {
+ this._downKeys[e.which] = false;
+ if (!this._areDownKeys()) {
+ this._setProperty('isKeyPressed', false);
+ this._setProperty('keyIsPressed', false);
+ }
+ this._setProperty('_lastKeyCodeTyped', null);
+ this._setProperty('key', e.key || String.fromCharCode(e.which) || e.which);
+ this._setProperty('keyCode', e.which);
+ var context = this._isGlobal ? window : this;
+ if (typeof context.keyReleased === 'function') {
+ var executeDefault = context.keyReleased(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The keyTyped() function is called once every time a key is pressed, but
+ * action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect
+ * a keyCode for one of these keys, use the keyPressed() function instead.
+ * The most recent key typed will be stored in the key variable.
+ *
+ * Because of how operating systems handle key repeats, holding down a key
+ * will cause multiple calls to keyTyped() (and keyReleased() as well). The
+ * rate of repeat is set by the operating system and how each computer is
+ * configured.
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`black rect center. turns white when key pressed and black
+ * when pressed again`);
+ * }
+ * function keyReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * return false; // prevent any default behavior
+ * }
+ *
+ * + * Browsers may have different default behaviors attached to various key + * events. To prevent any default behavior for this event, add "return false" + * to the end of the function. + * + * @method keyTyped + * @param {KeyboardEvent} [event] optional KeyboardEvent callback argument. + * @example + *
+ *
+ */
+ _main.default.prototype._onkeypress = function (e) {
+ if (e.which === this._lastKeyCodeTyped) {
+ // prevent multiple firings
+ return;
+ }
+ this._setProperty('_lastKeyCodeTyped', e.which); // track last keyCode
+ this._setProperty('key', e.key || String.fromCharCode(e.which) || e.which);
+ var context = this._isGlobal ? window : this;
+ if (typeof context.keyTyped === 'function') {
+ var executeDefault = context.keyTyped(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The onblur function is called when the user is no longer focused
+ * on the p5 element. Because the keyup events will not fire if the user is
+ * not focused on the element we must assume all keys currently down have
+ * been released.
+ */
+ _main.default.prototype._onblur = function (e) {
+ this._downKeys = {
+ };
+ };
+ /**
+ * The keyIsDown() function checks if the key is currently down, i.e. pressed.
+ * It can be used if you have an object that moves, and you want several keys
+ * to be able to affect its behaviour simultaneously, such as moving a
+ * sprite diagonally. You can put in any number representing the keyCode of
+ * the key, or use any of the variable keyCode names listed
+ * here.
+ *
+ * @method keyIsDown
+ * @param {Number} code The key to check for.
+ * @return {Boolean} whether key is down or not
+ * @example
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`black rect center. turns white when 'a' key typed and
+ * black when 'b' pressed`);
+ * }
+ * function keyTyped() {
+ * if (key === 'a') {
+ * value = 255;
+ * } else if (key === 'b') {
+ * value = 0;
+ * }
+ * // uncomment to prevent any default behavior
+ * // return false;
+ * }
+ *
+ *
+ * let x = 100;
+ * let y = 100;
+ *
+ * function setup() {
+ * createCanvas(512, 512);
+ * fill(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * if (keyIsDown(LEFT_ARROW)) {
+ * x -= 5;
+ * }
+ *
+ * if (keyIsDown(RIGHT_ARROW)) {
+ * x += 5;
+ * }
+ *
+ * if (keyIsDown(UP_ARROW)) {
+ * y -= 5;
+ * }
+ *
+ * if (keyIsDown(DOWN_ARROW)) {
+ * y += 5;
+ * }
+ *
+ * clear();
+ * ellipse(x, y, 50, 50);
+ * describe(`50-by-50 red ellipse moves left, right, up, and
+ * down with arrow presses.`);
+ * }
+ *
+ * let diameter = 50;
+ *
+ * function setup() {
+ * createCanvas(512, 512);
+ * }
+ *
+ * function draw() {
+ * // 107 and 187 are keyCodes for "+"
+ * if (keyIsDown(107) || keyIsDown(187)) {
+ * diameter += 1;
+ * }
+ *
+ * // 109 and 189 are keyCodes for "-"
+ * if (keyIsDown(109) || keyIsDown(189)) {
+ * diameter -= 1;
+ * }
+ *
+ * clear();
+ * fill(255, 0, 0);
+ * ellipse(50, 50, diameter, diameter);
+ * describe(`50-by-50 red ellipse gets bigger or smaller when
+ * + or - are pressed.`);
+ * }
+ *
+ *
+ */
+
+ _main.default.prototype.movedX = 0;
+ /**
+ * The variable movedY contains the vertical movement of the mouse since the last frame
+ * @property {Number} movedY
+ * @readOnly
+ * @example
+ *
+ * let x = 50;
+ * function setup() {
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (x > 48) {
+ * x -= 2;
+ * } else if (x < 48) {
+ * x += 2;
+ * }
+ * x += floor(movedX / 5);
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(x, 50, 50, 50);
+ * describe(`box moves left and right according to mouse movement
+ * then slowly back towards the center`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.movedY = 0;
+ /*
+ * This is a flag which is false until the first time
+ * we receive a mouse event. The pmouseX and pmouseY
+ * values will match the mouseX and mouseY values until
+ * this interaction takes place.
+ */
+ _main.default.prototype._hasMouseInteracted = false;
+ /**
+ * The system variable mouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseX will hold the x value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ *
+ * let y = 50;
+ * function setup() {
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (y > 48) {
+ * y -= 2;
+ * } else if (y < 48) {
+ * y += 2;
+ * }
+ * y += floor(movedY / 5);
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(50, y, 50, 50);
+ * describe(`box moves up and down according to mouse movement then
+ * slowly back towards the center`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mouseX = 0;
+ /**
+ * The system variable mouseY always contains the current vertical
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseY will hold the y value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseY
+ * @readOnly
+ *
+ * @example
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, 0, mouseX, 100);
+ * describe('horizontal black line moves left and right with mouse x-position');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mouseY = 0;
+ /**
+ * The system variable pmouseX always contains the horizontal position of
+ * the mouse or finger in the frame previous to the current frame, relative to
+ * (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and
+ * (-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX
+ * value at the start of each touch event.
+ *
+ * @property {Number} pmouseX
+ * @readOnly
+ *
+ * @example
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(0, mouseY, 100, mouseY);
+ * describe('vertical black line moves up and down with mouse y-position');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pmouseX = 0;
+ /**
+ * The system variable pmouseY always contains the vertical position of
+ * the mouse or finger in the frame previous to the current frame, relative to
+ * (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and
+ * (-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY
+ * value at the start of each touch event.
+ *
+ * @property {Number} pmouseY
+ * @readOnly
+ *
+ * @example
+ *
+ * // Move the mouse across the canvas to leave a trail
+ * function setup() {
+ * //slow down the frameRate to make it more visible
+ * frameRate(10);
+ * }
+ *
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, mouseY, pmouseX, pmouseY);
+ * print(pmouseX + ' -> ' + mouseX);
+ * describe(`line trail is created from cursor movements.
+ * faster movement make longer line.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pmouseY = 0;
+ /**
+ * The system variable winMouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the window.
+ *
+ * @property {Number} winMouseX
+ * @readOnly
+ *
+ * @example
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ * //draw a square only if the mouse is not moving
+ * if (mouseY === pmouseY && mouseX === pmouseX) {
+ * rect(20, 20, 60, 60);
+ * }
+ *
+ * print(pmouseY + ' -> ' + mouseY);
+ * describe(`60-by-60 black rect center, fuchsia background.
+ * rect flickers on mouse movement`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.winMouseX = 0;
+ /**
+ * The system variable winMouseY always contains the current vertical
+ * position of the mouse, relative to (0, 0) of the window.
+ *
+ * @property {Number} winMouseY
+ * @readOnly
+ *
+ * @example
+ *
+ * let myCanvas;
+ *
+ * function setup() {
+ * //use a variable to store a pointer to the canvas
+ * myCanvas = createCanvas(100, 100);
+ * let body = document.getElementsByTagName('body')[0];
+ * myCanvas.parent(body);
+ * }
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * //move the canvas to the horizontal mouse position
+ * //relative to the window
+ * myCanvas.position(winMouseX + 1, windowHeight / 2);
+ *
+ * //the y of the square is relative to the canvas
+ * rect(20, mouseY, 60, 60);
+ * describe(`60-by-60 black rect y moves with mouse y and fuchsia
+ * canvas moves with mouse x`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.winMouseY = 0;
+ /**
+ * The system variable pwinMouseX always contains the horizontal position
+ * of the mouse in the frame previous to the current frame, relative to
+ * (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX
+ * value at the start of each touch event.
+ *
+ * @property {Number} pwinMouseX
+ * @readOnly
+ *
+ * @example
+ *
+ * let myCanvas;
+ *
+ * function setup() {
+ * //use a variable to store a pointer to the canvas
+ * myCanvas = createCanvas(100, 100);
+ * let body = document.getElementsByTagName('body')[0];
+ * myCanvas.parent(body);
+ * }
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * //move the canvas to the vertical mouse position
+ * //relative to the window
+ * myCanvas.position(windowWidth / 2, winMouseY + 1);
+ *
+ * //the x of the square is relative to the canvas
+ * rect(mouseX, 20, 60, 60);
+ * describe(`60-by-60 black rect x moves with mouse x and
+ * fuchsia canvas y moves with mouse y`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pwinMouseX = 0;
+ /**
+ * The system variable pwinMouseY always contains the vertical position of
+ * the mouse in the frame previous to the current frame, relative to (0, 0)
+ * of the window. Note: pwinMouseY will be reset to the current winMouseY
+ * value at the start of each touch event.
+ *
+ * @property {Number} pwinMouseY
+ * @readOnly
+ *
+ * @example
+ *
+ * let myCanvas;
+ *
+ * function setup() {
+ * //use a variable to store a pointer to the canvas
+ * myCanvas = createCanvas(100, 100);
+ * noStroke();
+ * fill(237, 34, 93);
+ * }
+ *
+ * function draw() {
+ * clear();
+ * //the difference between previous and
+ * //current x position is the horizontal mouse speed
+ * let speed = abs(winMouseX - pwinMouseX);
+ * //change the size of the circle
+ * //according to the horizontal speed
+ * ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
+ * //move the canvas to the mouse position
+ * myCanvas.position(winMouseX + 1, winMouseY + 1);
+ * describe(`fuchsia ellipse moves with mouse x and y.
+ * Grows and shrinks with mouse speed`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pwinMouseY = 0;
+ /**
+ * p5 automatically tracks if the mouse button is pressed and which
+ * button is pressed. The value of the system variable mouseButton is either
+ * LEFT, RIGHT, or CENTER depending on which button was pressed last.
+ * Warning: different browsers may track mouseButton differently.
+ *
+ * @property {Constant} mouseButton
+ * @readOnly
+ *
+ * @example
+ *
+ * let myCanvas;
+ *
+ * function setup() {
+ * //use a variable to store a pointer to the canvas
+ * myCanvas = createCanvas(100, 100);
+ * noStroke();
+ * fill(237, 34, 93);
+ * }
+ *
+ * function draw() {
+ * clear();
+ * //the difference between previous and
+ * //current y position is the vertical mouse speed
+ * let speed = abs(winMouseY - pwinMouseY);
+ * //change the size of the circle
+ * //according to the vertical speed
+ * ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
+ * //move the canvas to the mouse position
+ * myCanvas.position(winMouseX + 1, winMouseY + 1);
+ * describe(`fuchsia ellipse moves with mouse x and y.
+ * Grows and shrinks with mouse speed`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mouseButton = 0;
+ /**
+ * The boolean system variable mouseIsPressed is true if the mouse is pressed
+ * and false if not.
+ *
+ * @property {Boolean} mouseIsPressed
+ * @readOnly
+ *
+ * @example
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * if (mouseIsPressed === true) {
+ * if (mouseButton === LEFT) {
+ * ellipse(50, 50, 50, 50);
+ * }
+ * if (mouseButton === RIGHT) {
+ * rect(25, 25, 50, 50);
+ * }
+ * if (mouseButton === CENTER) {
+ * triangle(23, 75, 50, 20, 78, 75);
+ * }
+ * }
+ *
+ * print(mouseButton);
+ * describe(`50-by-50 black ellipse appears on center of fuchsia
+ * canvas on mouse click/press.`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mouseIsPressed = false;
+ _main.default.prototype._updateNextMouseCoords = function (e) {
+ if (this._curElement !== null && (!e.touches || e.touches.length > 0)) {
+ var mousePos = getMousePos(this._curElement.elt, this.width, this.height, e);
+ this._setProperty('movedX', e.movementX);
+ this._setProperty('movedY', e.movementY);
+ this._setProperty('mouseX', mousePos.x);
+ this._setProperty('mouseY', mousePos.y);
+ this._setProperty('winMouseX', mousePos.winX);
+ this._setProperty('winMouseY', mousePos.winY);
+ }
+ if (!this._hasMouseInteracted) {
+ // For first draw, make previous and next equal
+ this._updateMouseCoords();
+ this._setProperty('_hasMouseInteracted', true);
+ }
+ };
+ _main.default.prototype._updateMouseCoords = function () {
+ this._setProperty('pmouseX', this.mouseX);
+ this._setProperty('pmouseY', this.mouseY);
+ this._setProperty('pwinMouseX', this.winMouseX);
+ this._setProperty('pwinMouseY', this.winMouseY);
+ this._setProperty('_pmouseWheelDeltaY', this._mouseWheelDeltaY);
+ };
+ function getMousePos(canvas, w, h, evt) {
+ if (evt && !evt.clientX) {
+ // use touches if touch and not mouse
+ if (evt.touches) {
+ evt = evt.touches[0];
+ } else if (evt.changedTouches) {
+ evt = evt.changedTouches[0];
+ }
+ }
+ var rect = canvas.getBoundingClientRect();
+ var sx = canvas.scrollWidth / w || 1;
+ var sy = canvas.scrollHeight / h || 1;
+ return {
+ x: (evt.clientX - rect.left) / sx,
+ y: (evt.clientY - rect.top) / sy,
+ winX: evt.clientX,
+ winY: evt.clientY,
+ id: evt.identifier
+ };
+ }
+ _main.default.prototype._setMouseButton = function (e) {
+ if (e.button === 1) {
+ this._setProperty('mouseButton', constants.CENTER);
+ } else if (e.button === 2) {
+ this._setProperty('mouseButton', constants.RIGHT);
+ } else {
+ this._setProperty('mouseButton', constants.LEFT);
+ }
+ };
+ /**
+ * The mouseMoved() function is called every time the mouse moves and a mouse
+ * button is not pressed.
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * if (mouseIsPressed === true) {
+ * ellipse(50, 50, 50, 50);
+ * } else {
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * print(mouseIsPressed);
+ * describe(`black 50-by-50 rect becomes ellipse with mouse click/press.
+ * fuchsia background.`);
+ * }
+ *
+ * + * Browsers may have different default + * behaviors attached to various mouse events. To prevent any default + * behavior for this event, add "return false" to the end of the method. + * + * @method mouseMoved + * @param {MouseEvent} [event] optional MouseEvent callback argument. + * @example + *
+ *
+ *
+ *
+ * // Move the mouse across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`black 50-by-50 rect becomes lighter with mouse movements until
+ * white then resets no image displayed`);
+ * }
+ * function mouseMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mouseMoved() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * The mouseDragged() function is called once every time the mouse moves and
+ * a mouse button is pressed. If no mouseDragged() function is defined, the
+ * touchMoved() function will be called instead if it is defined.
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseMoved(event) {
+ * console.log(event);
+ * }
+ *
+ * + * Browsers may have different default + * behaviors attached to various mouse events. To prevent any default + * behavior for this event, add "return false" to the end of the function. + * + * @method mouseDragged + * @param {MouseEvent} [event] optional MouseEvent callback argument. + * @example + *
+ *
+ *
+ *
+ * // Drag the mouse across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe(`black 50-by-50 rect turns lighter with mouse click and
+ * drag until white, resets`);
+ * }
+ * function mouseDragged() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mouseDragged() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onmousemove = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._updateNextMouseCoords(e);
+ if (!this.mouseIsPressed) {
+ if (typeof context.mouseMoved === 'function') {
+ executeDefault = context.mouseMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ } else {
+ if (typeof context.mouseDragged === 'function') {
+ executeDefault = context.mouseDragged(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.touchMoved === 'function') {
+ executeDefault = context.touchMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ }
+ };
+ /**
+ * The mousePressed() function is called once after every time a mouse button
+ * is pressed. The mouseButton variable (see the related reference entry)
+ * can be used to determine which button has been pressed. If no
+ * mousePressed() function is defined, the touchStarted() function will be
+ * called instead if it is defined.
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseDragged(event) {
+ * console.log(event);
+ * }
+ *
+ * + * Browsers may have different default + * behaviors attached to various mouse events. To prevent any default + * behavior for this event, add "return false" to the end of the function. + * + * @method mousePressed + * @param {MouseEvent} [event] optional MouseEvent callback argument. + * @example + *
+ *
+ *
+ *
+ * // Click anywhere in the webpage to change
+ * // the color value of the rectangle
+ *
+ * let colorValue = 0;
+ * function draw() {
+ * fill(colorValue);
+ * rect(25, 25, 50, 50);
+ * describe('black 50-by-50 rect turns white with mouse click/press.');
+ * }
+ * function mousePressed() {
+ * if (colorValue === 0) {
+ * colorValue = 255;
+ * } else {
+ * colorValue = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mousePressed() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onmousedown = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', true);
+ this._setMouseButton(e);
+ this._updateNextMouseCoords(e);
+ if (typeof context.mousePressed === 'function') {
+ executeDefault = context.mousePressed(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ } // only safari needs this manual fallback for consistency
+
+ } else if (navigator.userAgent.toLowerCase().includes('safari') && typeof context.touchStarted === 'function') {
+ executeDefault = context.touchStarted(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The mouseReleased() function is called every time a mouse button is
+ * released. If no mouseReleased() function is defined, the touchEnded()
+ * function will be called instead if it is defined.
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mousePressed(event) {
+ * console.log(event);
+ * }
+ *
+ * + * Browsers may have different default + * behaviors attached to various mouse events. To prevent any default + * behavior for this event, add "return false" to the end of the function. + * + * @method mouseReleased + * @param {MouseEvent} [event] optional MouseEvent callback argument. + * @example + *
+ *
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe('black 50-by-50 rect turns white with mouse click/press.');
+ * }
+ * function mouseReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mouseReleased() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onmouseup = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', false);
+ if (typeof context.mouseReleased === 'function') {
+ executeDefault = context.mouseReleased(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.touchEnded === 'function') {
+ executeDefault = context.touchEnded(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ _main.default.prototype._ondragend = _main.default.prototype._onmouseup;
+ _main.default.prototype._ondragover = _main.default.prototype._onmousemove;
+ /**
+ * The mouseClicked() function is called once after a mouse button has been
+ * pressed and then released.
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseReleased(event) {
+ * console.log(event);
+ * }
+ *
+ * + * Browsers handle clicks differently, so this function is only guaranteed to be + * run when the left mouse button is clicked. To handle other mouse buttons + * being pressed or released, see mousePressed() or mouseReleased().
+ * Browsers may have different default + * behaviors attached to various mouse events. To prevent any default + * behavior for this event, add "return false" to the end of the function. + * + * @method mouseClicked + * @param {MouseEvent} [event] optional MouseEvent callback argument. + * @example + *
+ *
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe('black 50-by-50 rect turns white with mouse click/press.');
+ * }
+ *
+ * function mouseClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function mouseClicked() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._onclick = function (e) {
+ var context = this._isGlobal ? window : this;
+ if (typeof context.mouseClicked === 'function') {
+ var executeDefault = context.mouseClicked(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The doubleClicked() function is executed every time a event
+ * listener has detected a dblclick event which is a part of the
+ * DOM L3 specification. The doubleClicked event is fired when a
+ * pointing device button (usually a mouse's primary button)
+ * is clicked twice on a single element. For more info on the
+ * dblclick event refer to mozilla's documentation here:
+ * https://developer.mozilla.org/en-US/docs/Web/Events/dblclick
+ *
+ * @method doubleClicked
+ * @param {MouseEvent} [event] optional MouseEvent callback argument.
+ * @example
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseClicked(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been double clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe('black 50-by-50 rect turns white with mouse doubleClick/press.');
+ * }
+ *
+ * function doubleClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function doubleClicked() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype._ondblclick = function (e) {
+ var context = this._isGlobal ? window : this;
+ if (typeof context.doubleClicked === 'function') {
+ var executeDefault = context.doubleClicked(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * For use with WebGL orbitControl.
+ * @property {Number} _mouseWheelDeltaY
+ * @readOnly
+ * @private
+ */
+ _main.default.prototype._mouseWheelDeltaY = 0;
+ /**
+ * For use with WebGL orbitControl.
+ * @property {Number} _pmouseWheelDeltaY
+ * @readOnly
+ * @private
+ */
+ _main.default.prototype._pmouseWheelDeltaY = 0;
+ /**
+ * The function mouseWheel() is executed every time a vertical mouse wheel
+ * event is detected either triggered by an actual mouse wheel or by a
+ * touchpad.
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function doubleClicked(event) {
+ * console.log(event);
+ * }
+ *
+ * + * The event.delta property returns the amount the mouse wheel + * have scrolled. The values can be positive or negative depending on the + * scroll direction (on macOS with "natural" scrolling enabled, the signs + * are inverted).
+ * Browsers may have different default behaviors attached to various + * mouse events. To prevent any default behavior for this event, add + * "return false" to the end of the method.
+ * Due to the current support of the "wheel" event on Safari, the function + * may only work as expected if "return false" is included while using Safari. + * + * @method mouseWheel + * @param {WheelEvent} [event] optional WheelEvent callback argument. + * + * @example + *
+ *
+ */
+ _main.default.prototype._onwheel = function (e) {
+ var context = this._isGlobal ? window : this;
+ this._setProperty('_mouseWheelDeltaY', e.deltaY);
+ if (typeof context.mouseWheel === 'function') {
+ e.delta = e.deltaY;
+ var executeDefault = context.mouseWheel(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The function requestPointerLock()
+ * locks the pointer to its current position and makes it invisible.
+ * Use movedX and movedY to get the difference the mouse was moved since
+ * the last call of draw.
+ * Note that not all browsers support this feature.
+ * This enables you to create experiences that aren't limited by the mouse moving out of the screen
+ * even if it is repeatedly moved into one direction.
+ * For example, a first person perspective experience.
+ *
+ * @method requestPointerLock
+ * @example
+ *
+ * let pos = 25;
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(25, pos, 50, 50);
+ * describe(`black 50-by-50 rect moves up and down with vertical scroll.
+ * fuchsia background`);
+ * }
+ *
+ * function mouseWheel(event) {
+ * print(event.delta);
+ * //move the square according to the vertical scroll amount
+ * pos += event.delta;
+ * //uncomment to block page scrolling
+ * //return false;
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.requestPointerLock = function () {
+ // pointer lock object forking for cross browser
+ var canvas = this._curElement.elt;
+ canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
+ if (!canvas.requestPointerLock) {
+ console.log('requestPointerLock is not implemented in this browser');
+ return false;
+ }
+ canvas.requestPointerLock();
+ return true;
+ };
+ /**
+ * The function exitPointerLock()
+ * exits a previously triggered pointer Lock
+ * for example to make ui elements usable etc
+ *
+ * @method exitPointerLock
+ * @example
+ *
+ * let cam;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * requestPointerLock();
+ * cam = createCamera();
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * cam.pan(-movedX * 0.001);
+ * cam.tilt(movedY * 0.001);
+ * sphere(25);
+ * describe(`3D scene moves according to mouse mouse movement in a
+ * first person perspective`);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.exitPointerLock = function () {
+ document.exitPointerLock();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 318: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.string.includes');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Events
+ * @submodule Touch
+ * @for p5
+ * @requires core
+ */
+ /**
+ * The system variable touches[] contains an array of the positions of all
+ * current touch points, relative to (0, 0) of the canvas, and IDs identifying a
+ * unique touch as it moves. Each element in the array is an object with x, y,
+ * and id properties.
+ *
+ * The touches[] array is not supported on Safari and IE on touch-based
+ * desktops (laptops).
+ *
+ * @property {Object[]} touches
+ * @readOnly
+ *
+ * @example
+ *
+ * //click the canvas to lock the pointer
+ * //click again to exit (otherwise escape)
+ * let locked = false;
+ * function draw() {
+ * background(237, 34, 93);
+ * describe('cursor gets locked / unlocked on mouse-click');
+ * }
+ * function mouseClicked() {
+ * if (!locked) {
+ * locked = true;
+ * requestPointerLock();
+ * } else {
+ * exitPointerLock();
+ * locked = false;
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.touches = [
+ ];
+ _main.default.prototype._updateTouchCoords = function (e) {
+ if (this._curElement !== null) {
+ var touches = [
+ ];
+ for (var i = 0; i < e.touches.length; i++) {
+ touches[i] = getTouchInfo(this._curElement.elt, this.width, this.height, e, i);
+ }
+ this._setProperty('touches', touches);
+ }
+ };
+ function getTouchInfo(canvas, w, h, e) {
+ var i = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+ var rect = canvas.getBoundingClientRect();
+ var sx = canvas.scrollWidth / w || 1;
+ var sy = canvas.scrollHeight / h || 1;
+ var touch = e.touches[i] || e.changedTouches[i];
+ return {
+ x: (touch.clientX - rect.left) / sx,
+ y: (touch.clientY - rect.top) / sy,
+ winX: touch.clientX,
+ winY: touch.clientY,
+ id: touch.identifier
+ };
+ } /**
+ * The touchStarted() function is called once after every time a touch is
+ * registered. If no touchStarted() function is defined, the mousePressed()
+ * function will be called instead if it is defined.
+ * // On a touchscreen device, touch
+ * // the canvas using one or more fingers
+ * // at the same time
+ * function draw() {
+ * clear();
+ * let display = touches.length + ' touches';
+ * text(display, 5, 10);
+ * describe(`Number of touches currently registered are displayed
+ * on the canvas`);
+ * }
+ *
+ * + * Browsers may have different default behaviors attached to various touch + * events. To prevent any default behavior for this event, add "return false" + * to the end of the method. + * + * @method touchStarted + * @param {TouchEvent} [event] optional TouchEvent callback argument. + * @example + *
+ *
+ *
+ *
+ * // Touch within the image to change
+ * // the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe('50-by-50 black rect turns white with touch event.');
+ * }
+ * function touchStarted() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function touchStarted() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ * describe('no image displayed');
+ *
+ *
+ *
+ */
+
+ _main.default.prototype._ontouchstart = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._setProperty('mouseIsPressed', true);
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ this._updateMouseCoords(); // reset pmouseXY at the start of each touch event
+ if (typeof context.touchStarted === 'function') {
+ executeDefault = context.touchStarted(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ } // only safari needs this manual fallback for consistency
+
+ } else if (navigator.userAgent.toLowerCase().includes('safari') && typeof context.mousePressed === 'function') {
+ executeDefault = context.mousePressed(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The touchMoved() function is called every time a touch move is registered.
+ * If no touchMoved() function is defined, the mouseDragged() function will
+ * be called instead if it is defined.
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchStarted(event) {
+ * console.log(event);
+ * }
+ * describe('no image displayed');
+ *
+ * + * Browsers may have different default behaviors attached to various touch + * events. To prevent any default behavior for this event, add "return false" + * to the end of the method. + * + * @method touchMoved + * @param {TouchEvent} [event] optional TouchEvent callback argument. + * @example + *
+ *
+ *
+ *
+ * // Move your finger across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe('50-by-50 black rect turns lighter with touch until white. resets');
+ * }
+ * function touchMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function touchMoved() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ * describe('no image displayed');
+ *
+ *
+ *
+ */
+ _main.default.prototype._ontouchmove = function (e) {
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ if (typeof context.touchMoved === 'function') {
+ executeDefault = context.touchMoved(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.mouseDragged === 'function') {
+ executeDefault = context.mouseDragged(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ /**
+ * The touchEnded() function is called every time a touch ends. If no
+ * touchEnded() function is defined, the mouseReleased() function will be
+ * called instead if it is defined.
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchMoved(event) {
+ * console.log(event);
+ * }
+ * describe('no image displayed');
+ *
+ * + * Browsers may have different default behaviors attached to various touch + * events. To prevent any default behavior for this event, add "return false" + * to the end of the method. + * + * @method touchEnded + * @param {TouchEvent} [event] optional TouchEvent callback argument. + * @example + *
+ *
+ *
+ *
+ * // Release touch within the image to
+ * // change the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * describe('50-by-50 black rect turns white with touch.');
+ * }
+ * function touchEnded() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function touchEnded() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ * describe('no image displayed');
+ *
+ *
+ *
+ */
+ _main.default.prototype._ontouchend = function (e) {
+ this._setProperty('mouseIsPressed', false);
+ this._updateTouchCoords(e);
+ this._updateNextMouseCoords(e);
+ var context = this._isGlobal ? window : this;
+ var executeDefault;
+ if (typeof context.touchEnded === 'function') {
+ executeDefault = context.touchEnded(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ } else if (typeof context.mouseReleased === 'function') {
+ executeDefault = context.mouseReleased(e);
+ if (executeDefault === false) {
+ e.preventDefault();
+ }
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.string.includes': 209
+ }
+ ],
+ 319: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.int32-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.int32-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ /**
+ * This module defines the filters for use with image buffers.
+ *
+ * This module is basically a collection of functions stored in an object
+ * as opposed to modules. The functions are destructive, modifying
+ * the passed in canvas rather than creating a copy.
+ *
+ * Generally speaking users of this module will use the Filters.apply method
+ * on a canvas to create an effect.
+ *
+ * A number of functions are borrowed/adapted from
+ * http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ * or the java processing implementation.
+ */
+ var Filters = {
+ /*
+ * Helper functions
+ */
+ /**
+ * Returns the pixel buffer for a canvas
+ *
+ * @private
+ *
+ * @param {Canvas|ImageData} canvas the canvas to get pixels from
+ * @return {Uint8ClampedArray} a one-dimensional array containing
+ * the data in thc RGBA order, with integer
+ * values between 0 and 255
+ */
+ _toPixels: function _toPixels(canvas) {
+ if (canvas instanceof ImageData) {
+ return canvas.data;
+ } else {
+ if (canvas.getContext('2d')) {
+ return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data;
+ } else if (canvas.getContext('webgl')) {
+ var gl = canvas.getContext('webgl');
+ var len = gl.drawingBufferWidth * gl.drawingBufferHeight * 4;
+ var data = new Uint8Array(len);
+ gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
+ return data;
+ }
+ }
+ },
+ /**
+ * Returns a 32 bit number containing ARGB data at ith pixel in the
+ * 1D array containing pixels data.
+ *
+ * @private
+ *
+ * @param {Uint8ClampedArray} data array returned by _toPixels()
+ * @param {Integer} i index of a 1D Image Array
+ * @return {Integer} 32 bit integer value representing
+ * ARGB value.
+ */
+ _getARGB: function _getARGB(data, i) {
+ var offset = i * 4;
+ return data[offset + 3] << 24 & 4278190080 | data[offset] << 16 & 16711680 | data[offset + 1] << 8 & 65280 | data[offset + 2] & 255;
+ },
+ /**
+ * Modifies pixels RGBA values to values contained in the data object.
+ *
+ * @private
+ *
+ * @param {Uint8ClampedArray} pixels array returned by _toPixels()
+ * @param {Int32Array} data source 1D array where each value
+ * represents ARGB values
+ */
+ _setPixels: function _setPixels(pixels, data) {
+ var offset = 0;
+ for (var i = 0, al = pixels.length; i < al; i++) {
+ offset = i * 4;
+ pixels[offset + 0] = (data[i] & 16711680) >>> 16;
+ pixels[offset + 1] = (data[i] & 65280) >>> 8;
+ pixels[offset + 2] = data[i] & 255;
+ pixels[offset + 3] = (data[i] & 4278190080) >>> 24;
+ }
+ },
+ /**
+ * Returns the ImageData object for a canvas
+ * https://developer.mozilla.org/en-US/docs/Web/API/ImageData
+ *
+ * @private
+ *
+ * @param {Canvas|ImageData} canvas canvas to get image data from
+ * @return {ImageData} Holder of pixel data (and width and
+ * height) for a canvas
+ */
+ _toImageData: function _toImageData(canvas) {
+ if (canvas instanceof ImageData) {
+ return canvas;
+ } else {
+ return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
+ }
+ },
+ /**
+ * Returns a blank ImageData object.
+ *
+ * @private
+ *
+ * @param {Integer} width
+ * @param {Integer} height
+ * @return {ImageData}
+ */
+ _createImageData: function _createImageData(width, height) {
+ Filters._tmpCanvas = document.createElement('canvas');
+ Filters._tmpCtx = Filters._tmpCanvas.getContext('2d');
+ return this._tmpCtx.createImageData(width, height);
+ },
+ /**
+ * Applys a filter function to a canvas.
+ *
+ * The difference between this and the actual filter functions defined below
+ * is that the filter functions generally modify the pixel buffer but do
+ * not actually put that data back to the canvas (where it would actually
+ * update what is visible). By contrast this method does make the changes
+ * actually visible in the canvas.
+ *
+ * The apply method is the method that callers of this module would generally
+ * use. It has been separated from the actual filters to support an advanced
+ * use case of creating a filter chain that executes without actually updating
+ * the canvas in between everystep.
+ *
+ * @private
+ * @param {HTMLCanvasElement} canvas [description]
+ * @param {function(ImageData,Object)} func [description]
+ * @param {Object} filterParam [description]
+ */
+ apply: function apply(canvas, func, filterParam) {
+ var pixelsState = canvas.getContext('2d');
+ var imageData = pixelsState.getImageData(0, 0, canvas.width, canvas.height);
+ //Filters can either return a new ImageData object, or just modify
+ //the one they received.
+ var newImageData = func(imageData, filterParam);
+ if (newImageData instanceof ImageData) {
+ pixelsState.putImageData(newImageData, 0, 0, 0, 0, canvas.width, canvas.height);
+ } else {
+ pixelsState.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
+ }
+ },
+ /*
+ * Filters
+ */
+ /**
+ * Converts the image to black and white pixels depending if they are above or
+ * below the threshold defined by the level parameter. The parameter must be
+ * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
+ *
+ * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ *
+ * @private
+ * @param {Canvas} canvas
+ * @param {Float} level
+ */
+ threshold: function threshold(canvas, level) {
+ var pixels = Filters._toPixels(canvas);
+ if (level === undefined) {
+ level = 0.5;
+ }
+ var thresh = Math.floor(level * 255);
+ for (var i = 0; i < pixels.length; i += 4) {
+ var r = pixels[i];
+ var g = pixels[i + 1];
+ var b = pixels[i + 2];
+ var gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ var val = void 0;
+ if (gray >= thresh) {
+ val = 255;
+ } else {
+ val = 0;
+ }
+ pixels[i] = pixels[i + 1] = pixels[i + 2] = val;
+ }
+ },
+ /**
+ * Converts any colors in the image to grayscale equivalents.
+ * No parameter is used.
+ *
+ * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+ *
+ * @private
+ * @param {Canvas} canvas
+ */
+ gray: function gray(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ for (var i = 0; i < pixels.length; i += 4) {
+ var r = pixels[i];
+ var g = pixels[i + 1];
+ var b = pixels[i + 2];
+ // CIE luminance for RGB
+ var gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ pixels[i] = pixels[i + 1] = pixels[i + 2] = gray;
+ }
+ },
+ /**
+ * Sets the alpha channel to entirely opaque. No parameter is used.
+ *
+ * @private
+ * @param {Canvas} canvas
+ */
+ opaque: function opaque(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ for (var i = 0; i < pixels.length; i += 4) {
+ pixels[i + 3] = 255;
+ }
+ return pixels;
+ },
+ /**
+ * Sets each pixel to its inverse value. No parameter is used.
+ * @private
+ * @param {Canvas} canvas
+ */
+ invert: function invert(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ for (var i = 0; i < pixels.length; i += 4) {
+ pixels[i] = 255 - pixels[i];
+ pixels[i + 1] = 255 - pixels[i + 1];
+ pixels[i + 2] = 255 - pixels[i + 2];
+ }
+ },
+ /**
+ * Limits each channel of the image to the number of colors specified as
+ * the parameter. The parameter can be set to values between 2 and 255, but
+ * results are most noticeable in the lower ranges.
+ *
+ * Adapted from java based processing implementation
+ *
+ * @private
+ * @param {Canvas} canvas
+ * @param {Integer} level
+ */
+ posterize: function posterize(canvas, level) {
+ var pixels = Filters._toPixels(canvas);
+ if (level < 2 || level > 255) {
+ throw new Error('Level must be greater than 2 and less than 255 for posterize');
+ }
+ var levels1 = level - 1;
+ for (var i = 0; i < pixels.length; i += 4) {
+ var rlevel = pixels[i];
+ var glevel = pixels[i + 1];
+ var blevel = pixels[i + 2];
+ pixels[i] = (rlevel * level >> 8) * 255 / levels1;
+ pixels[i + 1] = (glevel * level >> 8) * 255 / levels1;
+ pixels[i + 2] = (blevel * level >> 8) * 255 / levels1;
+ }
+ },
+ /**
+ * increases the bright areas in an image
+ * @private
+ * @param {Canvas} canvas
+ */
+ dilate: function dilate(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ var currIdx = 0;
+ var maxIdx = pixels.length ? pixels.length / 4 : 0;
+ var out = new Int32Array(maxIdx);
+ var currRowIdx,
+ maxRowIdx,
+ colOrig,
+ colOut,
+ currLum;
+ var idxRight,
+ idxLeft,
+ idxUp,
+ idxDown;
+ var colRight,
+ colLeft,
+ colUp,
+ colDown;
+ var lumRight,
+ lumLeft,
+ lumUp,
+ lumDown;
+ while (currIdx < maxIdx) {
+ currRowIdx = currIdx;
+ maxRowIdx = currIdx + canvas.width;
+ while (currIdx < maxRowIdx) {
+ colOrig = colOut = Filters._getARGB(pixels, currIdx);
+ idxLeft = currIdx - 1;
+ idxRight = currIdx + 1;
+ idxUp = currIdx - canvas.width;
+ idxDown = currIdx + canvas.width;
+ if (idxLeft < currRowIdx) {
+ idxLeft = currIdx;
+ }
+ if (idxRight >= maxRowIdx) {
+ idxRight = currIdx;
+ }
+ if (idxUp < 0) {
+ idxUp = 0;
+ }
+ if (idxDown >= maxIdx) {
+ idxDown = currIdx;
+ }
+ colUp = Filters._getARGB(pixels, idxUp);
+ colLeft = Filters._getARGB(pixels, idxLeft);
+ colDown = Filters._getARGB(pixels, idxDown);
+ colRight = Filters._getARGB(pixels, idxRight);
+ //compute luminance
+ currLum = 77 * (colOrig >> 16 & 255) + 151 * (colOrig >> 8 & 255) + 28 * (colOrig & 255);
+ lumLeft = 77 * (colLeft >> 16 & 255) + 151 * (colLeft >> 8 & 255) + 28 * (colLeft & 255);
+ lumRight = 77 * (colRight >> 16 & 255) + 151 * (colRight >> 8 & 255) + 28 * (colRight & 255);
+ lumUp = 77 * (colUp >> 16 & 255) + 151 * (colUp >> 8 & 255) + 28 * (colUp & 255);
+ lumDown = 77 * (colDown >> 16 & 255) + 151 * (colDown >> 8 & 255) + 28 * (colDown & 255);
+ if (lumLeft > currLum) {
+ colOut = colLeft;
+ currLum = lumLeft;
+ }
+ if (lumRight > currLum) {
+ colOut = colRight;
+ currLum = lumRight;
+ }
+ if (lumUp > currLum) {
+ colOut = colUp;
+ currLum = lumUp;
+ }
+ if (lumDown > currLum) {
+ colOut = colDown;
+ currLum = lumDown;
+ }
+ out[currIdx++] = colOut;
+ }
+ }
+ Filters._setPixels(pixels, out);
+ },
+ /**
+ * reduces the bright areas in an image
+ * @private
+ * @param {Canvas} canvas
+ */
+ erode: function erode(canvas) {
+ var pixels = Filters._toPixels(canvas);
+ var currIdx = 0;
+ var maxIdx = pixels.length ? pixels.length / 4 : 0;
+ var out = new Int32Array(maxIdx);
+ var currRowIdx,
+ maxRowIdx,
+ colOrig,
+ colOut,
+ currLum;
+ var idxRight,
+ idxLeft,
+ idxUp,
+ idxDown;
+ var colRight,
+ colLeft,
+ colUp,
+ colDown;
+ var lumRight,
+ lumLeft,
+ lumUp,
+ lumDown;
+ while (currIdx < maxIdx) {
+ currRowIdx = currIdx;
+ maxRowIdx = currIdx + canvas.width;
+ while (currIdx < maxRowIdx) {
+ colOrig = colOut = Filters._getARGB(pixels, currIdx);
+ idxLeft = currIdx - 1;
+ idxRight = currIdx + 1;
+ idxUp = currIdx - canvas.width;
+ idxDown = currIdx + canvas.width;
+ if (idxLeft < currRowIdx) {
+ idxLeft = currIdx;
+ }
+ if (idxRight >= maxRowIdx) {
+ idxRight = currIdx;
+ }
+ if (idxUp < 0) {
+ idxUp = 0;
+ }
+ if (idxDown >= maxIdx) {
+ idxDown = currIdx;
+ }
+ colUp = Filters._getARGB(pixels, idxUp);
+ colLeft = Filters._getARGB(pixels, idxLeft);
+ colDown = Filters._getARGB(pixels, idxDown);
+ colRight = Filters._getARGB(pixels, idxRight);
+ //compute luminance
+ currLum = 77 * (colOrig >> 16 & 255) + 151 * (colOrig >> 8 & 255) + 28 * (colOrig & 255);
+ lumLeft = 77 * (colLeft >> 16 & 255) + 151 * (colLeft >> 8 & 255) + 28 * (colLeft & 255);
+ lumRight = 77 * (colRight >> 16 & 255) + 151 * (colRight >> 8 & 255) + 28 * (colRight & 255);
+ lumUp = 77 * (colUp >> 16 & 255) + 151 * (colUp >> 8 & 255) + 28 * (colUp & 255);
+ lumDown = 77 * (colDown >> 16 & 255) + 151 * (colDown >> 8 & 255) + 28 * (colDown & 255);
+ if (lumLeft < currLum) {
+ colOut = colLeft;
+ currLum = lumLeft;
+ }
+ if (lumRight < currLum) {
+ colOut = colRight;
+ currLum = lumRight;
+ }
+ if (lumUp < currLum) {
+ colOut = colUp;
+ currLum = lumUp;
+ }
+ if (lumDown < currLum) {
+ colOut = colDown;
+ currLum = lumDown;
+ }
+ out[currIdx++] = colOut;
+ }
+ }
+ Filters._setPixels(pixels, out);
+ },
+ blur: function blur(canvas, radius) {
+ blurARGB(canvas, radius);
+ }
+ };
+ // BLUR
+ // internal kernel stuff for the gaussian blur filter
+ var blurRadius;
+ var blurKernelSize;
+ var blurKernel;
+ var blurMult;
+ /*
+ * Port of https://github.com/processing/processing/blob/
+ * main/core/src/processing/core/PImage.java#L1250
+ *
+ * Optimized code for building the blur kernel.
+ * further optimized blur code (approx. 15% for radius=20)
+ * bigger speed gains for larger radii (~30%)
+ * added support for various image types (ALPHA, RGB, ARGB)
+ * [toxi 050728]
+ */
+ function buildBlurKernel(r) {
+ var radius = r * 3.5 | 0;
+ radius = radius < 1 ? 1 : radius < 248 ? radius : 248;
+ if (blurRadius !== radius) {
+ blurRadius = radius;
+ blurKernelSize = 1 + blurRadius << 1;
+ blurKernel = new Int32Array(blurKernelSize);
+ blurMult = new Array(blurKernelSize);
+ for (var l = 0; l < blurKernelSize; l++) {
+ blurMult[l] = new Int32Array(256);
+ }
+ var bk,
+ bki;
+ var bm,
+ bmi;
+ for (var i = 1, radiusi = radius - 1; i < radius; i++) {
+ blurKernel[radius + i] = blurKernel[radiusi] = bki = radiusi * radiusi;
+ bm = blurMult[radius + i];
+ bmi = blurMult[radiusi--];
+ for (var j = 0; j < 256; j++) {
+ bm[j] = bmi[j] = bki * j;
+ }
+ }
+ bk = blurKernel[radius] = radius * radius;
+ bm = blurMult[radius];
+ for (var k = 0; k < 256; k++) {
+ bm[k] = bk * k;
+ }
+ }
+ } // Port of https://github.com/processing/processing/blob/
+ // main/core/src/processing/core/PImage.java#L1433
+
+ function blurARGB(canvas, radius) {
+ var pixels = Filters._toPixels(canvas);
+ var width = canvas.width;
+ var height = canvas.height;
+ var numPackedPixels = width * height;
+ var argb = new Int32Array(numPackedPixels);
+ for (var j = 0; j < numPackedPixels; j++) {
+ argb[j] = Filters._getARGB(pixels, j);
+ }
+ var sum,
+ cr,
+ cg,
+ cb,
+ ca;
+ var read,
+ ri,
+ ym,
+ ymi,
+ bk0;
+ var a2 = new Int32Array(numPackedPixels);
+ var r2 = new Int32Array(numPackedPixels);
+ var g2 = new Int32Array(numPackedPixels);
+ var b2 = new Int32Array(numPackedPixels);
+ var yi = 0;
+ buildBlurKernel(radius);
+ var x,
+ y,
+ i;
+ var bm;
+ for (y = 0; y < height; y++) {
+ for (x = 0; x < width; x++) {
+ cb = cg = cr = ca = sum = 0;
+ read = x - blurRadius;
+ if (read < 0) {
+ bk0 = - read;
+ read = 0;
+ } else {
+ if (read >= width) {
+ break;
+ }
+ bk0 = 0;
+ }
+ for (i = bk0; i < blurKernelSize; i++) {
+ if (read >= width) {
+ break;
+ }
+ var c = argb[read + yi];
+ bm = blurMult[i];
+ ca += bm[(c & - 16777216) >>> 24];
+ cr += bm[(c & 16711680) >> 16];
+ cg += bm[(c & 65280) >> 8];
+ cb += bm[c & 255];
+ sum += blurKernel[i];
+ read++;
+ }
+ ri = yi + x;
+ a2[ri] = ca / sum;
+ r2[ri] = cr / sum;
+ g2[ri] = cg / sum;
+ b2[ri] = cb / sum;
+ }
+ yi += width;
+ }
+ yi = 0;
+ ym = - blurRadius;
+ ymi = ym * width;
+ for (y = 0; y < height; y++) {
+ for (x = 0; x < width; x++) {
+ cb = cg = cr = ca = sum = 0;
+ if (ym < 0) {
+ bk0 = ri = - ym;
+ read = x;
+ } else {
+ if (ym >= height) {
+ break;
+ }
+ bk0 = 0;
+ ri = ym;
+ read = x + ymi;
+ }
+ for (i = bk0; i < blurKernelSize; i++) {
+ if (ri >= height) {
+ break;
+ }
+ bm = blurMult[i];
+ ca += bm[a2[read]];
+ cr += bm[r2[read]];
+ cg += bm[g2[read]];
+ cb += bm[b2[read]];
+ sum += blurKernel[i];
+ ri++;
+ read += width;
+ }
+ argb[x + yi] = ca / sum << 24 | cr / sum << 16 | cg / sum << 8 | cb / sum;
+ }
+ yi += width;
+ ymi += width;
+ ym++;
+ }
+ Filters._setPixels(pixels, argb);
+ }
+ var _default = Filters;
+ exports.default = _default;
+ },
+ {
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.int32-array': 235,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint8-array': 252
+ }
+ ],
+ 320: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _omggif = _interopRequireDefault(_dereq_('omggif'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * @module Image
+ * @submodule Image
+ * @for p5
+ * @requires core
+ */
+ /**
+ * This module defines the p5 methods for the p5.Image class
+ * for drawing images to the main display canvas.
+ */
+ /**
+ * Creates a new p5.Image object. The new image is
+ * transparent by default.
+ *
+ * `createImage()` uses the `width` and `height` paremeters to set the new
+ * p5.Image object's dimensions in pixels. The new
+ * p5.Image can be modified by updating its
+ * pixels array or by calling its
+ * get() and
+ * set() methods. The
+ * loadPixels() method must be called
+ * before reading or modifying pixel values. The
+ * updatePixels() method must be called
+ * for updates to take effect.
+ *
+ * @method createImage
+ * @param {Integer} width width in pixels.
+ * @param {Integer} height height in pixels.
+ * @return {p5.Image} new p5.Image object.
+ * @example
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchEnded(event) {
+ * console.log(event);
+ * }
+ * describe('no image displayed');
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * let a = map(x, 0, img.width, 0, 255);
+ * let c = color(0, a);
+ * img.set(x, y, c);
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A square with a horizontal color gradient that transitions from gray to black.');
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.createImage = function (width, height) {
+ _main.default._validateParameters('createImage', arguments);
+ return new _main.default.Image(width, height);
+ };
+ /**
+ * Saves the current canvas as an image. The browser will either save the
+ * file immediately or prompt the user with a dialogue window.
+ *
+ * @method saveCanvas
+ * @param {p5.Element|HTMLCanvasElement} selectedCanvas reference to a
+ * specific HTML5 canvas element.
+ * @param {String} [filename] file name. Defaults to 'untitled'.
+ * @param {String} [extension] file extension, either 'jpg' or 'png'. Defaults to 'png'.
+ *
+ * @example
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (d * img.width) * (d * img.height / 2);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(255);
+ * saveCanvas();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(255);
+ * saveCanvas('myCanvas.jpg');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(255);
+ * saveCanvas('myCanvas', 'jpg');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * background(255);
+ * saveCanvas(cnv);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * background(255);
+ * saveCanvas(cnv, 'myCanvas.jpg');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method saveCanvas
+ * @param {String} [filename]
+ * @param {String} [extension]
+ */
+ _main.default.prototype.saveCanvas = function () {
+ _main.default._validateParameters('saveCanvas', arguments);
+ // copy arguments to array
+ var args = [
+ ].slice.call(arguments);
+ var htmlCanvas,
+ filename,
+ extension;
+ if (arguments[0] instanceof HTMLCanvasElement) {
+ htmlCanvas = arguments[0];
+ args.shift();
+ } else if (arguments[0] instanceof _main.default.Element) {
+ htmlCanvas = arguments[0].elt;
+ args.shift();
+ } else {
+ htmlCanvas = this._curElement && this._curElement.elt;
+ }
+ if (args.length >= 1) {
+ filename = args[0];
+ }
+ if (args.length >= 2) {
+ extension = args[1];
+ }
+ extension = extension || _main.default.prototype._checkFileExtension(filename, extension) [1] || 'png';
+ var mimeType;
+ switch (extension) {
+ default:
+ //case 'png':
+ mimeType = 'image/png';
+ break;
+ case 'jpeg':
+ case 'jpg':
+ mimeType = 'image/jpeg';
+ break;
+ }
+ htmlCanvas.toBlob(function (blob) {
+ _main.default.prototype.downloadFile(blob, filename, extension);
+ }, mimeType);
+ };
+ // this is the old saveGif, left here for compatibility purposes
+ // the only place I found it being used was on image/p5.Image.js, on the
+ // save function. that has been changed to use this function.
+ _main.default.prototype.encodeAndDownloadGif = function (pImg, filename) {
+ var props = pImg.gifProperties;
+ //convert loopLimit back into Netscape Block formatting
+ var loopLimit = props.loopLimit;
+ if (loopLimit === 1) {
+ loopLimit = null;
+ } else if (loopLimit === null) {
+ loopLimit = 0;
+ }
+ var buffer = new Uint8Array(pImg.width * pImg.height * props.numFrames);
+ var allFramesPixelColors = [
+ ];
+ // Used to determine the occurrence of unique palettes and the frames
+ // which use them
+ var paletteFreqsAndFrames = {
+ };
+ // Pass 1:
+ //loop over frames and get the frequency of each palette
+ for (var i = 0; i < props.numFrames; i++) {
+ var paletteSet = new Set();
+ var data = props.frames[i].image.data;
+ var dataLength = data.length;
+ // The color for each pixel in this frame ( for easier lookup later )
+ var pixelColors = new Uint32Array(pImg.width * pImg.height);
+ for (var j = 0, k = 0; j < dataLength; j += 4, k++) {
+ var r = data[j + 0];
+ var g = data[j + 1];
+ var b = data[j + 2];
+ var color = r << 16 | g << 8 | b << 0;
+ paletteSet.add(color);
+ // What color does this pixel have in this frame ?
+ pixelColors[k] = color;
+ } // A way to put use the entire palette as an object key
+
+ var paletteStr = _toConsumableArray(paletteSet).sort().toString();
+ if (paletteFreqsAndFrames[paletteStr] === undefined) {
+ paletteFreqsAndFrames[paletteStr] = {
+ freq: 1,
+ frames: [
+ i
+ ]
+ };
+ } else {
+ paletteFreqsAndFrames[paletteStr].freq += 1;
+ paletteFreqsAndFrames[paletteStr].frames.push(i);
+ }
+ allFramesPixelColors.push(pixelColors);
+ }
+ var framesUsingGlobalPalette = [
+ ];
+ // Now to build the global palette
+ // Sort all the unique palettes in descending order of their occurrence
+ var palettesSortedByFreq = Object.keys(paletteFreqsAndFrames).sort(function (a, b) {
+ return paletteFreqsAndFrames[b].freq - paletteFreqsAndFrames[a].freq;
+ });
+ // The initial global palette is the one with the most occurrence
+ var globalPalette = palettesSortedByFreq[0].split(',').map(function (a) {
+ return parseInt(a);
+ });
+ framesUsingGlobalPalette = framesUsingGlobalPalette.concat(paletteFreqsAndFrames[globalPalette].frames);
+ var globalPaletteSet = new Set(globalPalette);
+ // Build a more complete global palette
+ // Iterate over the remaining palettes in the order of
+ // their occurrence and see if the colors in this palette which are
+ // not in the global palette can be added there, while keeping the length
+ // of the global palette <= 256
+ for (var _i = 1; _i < palettesSortedByFreq.length; _i++) {
+ var palette = palettesSortedByFreq[_i].split(',').map(function (a) {
+ return parseInt(a);
+ });
+ var difference = palette.filter(function (x) {
+ return !globalPaletteSet.has(x);
+ });
+ if (globalPalette.length + difference.length <= 256) {
+ for (var _j = 0; _j < difference.length; _j++) {
+ globalPalette.push(difference[_j]);
+ globalPaletteSet.add(difference[_j]);
+ } // All frames using this palette now use the global palette
+
+ framesUsingGlobalPalette = framesUsingGlobalPalette.concat(paletteFreqsAndFrames[palettesSortedByFreq[_i]].frames);
+ }
+ }
+ framesUsingGlobalPalette = new Set(framesUsingGlobalPalette);
+ // Build a lookup table of the index of each color in the global palette
+ // Maps a color to its index
+ var globalIndicesLookup = {
+ };
+ for (var _i2 = 0; _i2 < globalPalette.length; _i2++) {
+ if (!globalIndicesLookup[globalPalette[_i2]]) {
+ globalIndicesLookup[globalPalette[_i2]] = _i2;
+ }
+ } // force palette to be power of 2
+
+ var powof2 = 1;
+ while (powof2 < globalPalette.length) {
+ powof2 <<= 1;
+ }
+ globalPalette.length = powof2;
+ // global opts
+ var opts = {
+ loop: loopLimit,
+ palette: new Uint32Array(globalPalette)
+ };
+ var gifWriter = new _omggif.default.GifWriter(buffer, pImg.width, pImg.height, opts);
+ var previousFrame = {
+ };
+ // Pass 2
+ // Determine if the frame needs a local palette
+ // Also apply transparency optimization. This function will often blow up
+ // the size of a GIF if not for transparency. If a pixel in one frame has
+ // the same color in the previous frame, that pixel can be marked as
+ // transparent. We decide one particular color as transparent and make all
+ // transparent pixels take this color. This helps in later in compression.
+ var _loop = function _loop(_i3) {
+ var localPaletteRequired = !framesUsingGlobalPalette.has(_i3);
+ var palette = localPaletteRequired ? [
+ ] : globalPalette;
+ var pixelPaletteIndex = new Uint8Array(pImg.width * pImg.height);
+ // Lookup table mapping color to its indices
+ var colorIndicesLookup = {
+ };
+ // All the colors that cannot be marked transparent in this frame
+ var cannotBeTransparent = new Set();
+ allFramesPixelColors[_i3].forEach(function (color, k) {
+ if (localPaletteRequired) {
+ if (colorIndicesLookup[color] === undefined) {
+ colorIndicesLookup[color] = palette.length;
+ palette.push(color);
+ }
+ pixelPaletteIndex[k] = colorIndicesLookup[color];
+ } else {
+ pixelPaletteIndex[k] = globalIndicesLookup[color];
+ }
+ if (_i3 > 0) {
+ // If even one pixel of this color has changed in this frame
+ // from the previous frame, we cannot mark it as transparent
+ if (allFramesPixelColors[_i3 - 1][k] !== color) {
+ cannotBeTransparent.add(color);
+ }
+ }
+ });
+ var frameOpts = {
+ };
+ // Transparency optimization
+ var canBeTransparent = palette.filter(function (a) {
+ return !cannotBeTransparent.has(a);
+ });
+ if (canBeTransparent.length > 0) {
+ // Select a color to mark as transparent
+ var transparent = canBeTransparent[0];
+ var transparentIndex = localPaletteRequired ? colorIndicesLookup[transparent] : globalIndicesLookup[transparent];
+ if (_i3 > 0) {
+ for (var _k = 0; _k < allFramesPixelColors[_i3].length; _k++) {
+ // If this pixel in this frame has the same color in previous frame
+ if (allFramesPixelColors[_i3 - 1][_k] === allFramesPixelColors[_i3][_k]) {
+ pixelPaletteIndex[_k] = transparentIndex;
+ }
+ }
+ frameOpts.transparent = transparentIndex;
+ // If this frame has any transparency, do not dispose the previous frame
+ previousFrame.frameOpts.disposal = 1;
+ }
+ }
+ frameOpts.delay = props.frames[_i3].delay / 10; // Move timing back into GIF formatting
+ if (localPaletteRequired) {
+ // force palette to be power of 2
+ var _powof = 1;
+ while (_powof < palette.length) {
+ _powof <<= 1;
+ }
+ palette.length = _powof;
+ frameOpts.palette = new Uint32Array(palette);
+ }
+ if (_i3 > 0) {
+ // add the frame that came before the current one
+ gifWriter.addFrame(0, 0, pImg.width, pImg.height, previousFrame.pixelPaletteIndex, previousFrame.frameOpts);
+ } // previous frame object should now have details of this frame
+
+ previousFrame = {
+ pixelPaletteIndex: pixelPaletteIndex,
+ frameOpts: frameOpts
+ };
+ };
+ for (var _i3 = 0; _i3 < props.numFrames; _i3++) {
+ _loop(_i3);
+ }
+ previousFrame.frameOpts.disposal = 1;
+ // add the last frame
+ gifWriter.addFrame(0, 0, pImg.width, pImg.height, previousFrame.pixelPaletteIndex, previousFrame.frameOpts);
+ var extension = 'gif';
+ var blob = new Blob([buffer.slice(0, gifWriter.end())], {
+ type: 'image/gif'
+ });
+ _main.default.prototype.downloadFile(blob, filename, extension);
+ };
+ /**
+ * Captures a sequence of frames from the canvas that can be used to create a
+ * movie. Frames are downloaded as individual image files by default.
+ *
+ * The first parameter, `filename`, sets the prefix for the file names. For
+ * example, setting the prefix to `'frame'` would generate the image files
+ * `frame0.png`, `frame1.png`, and so on. The second parameter, `extension`,
+ * sets the file type to either `'png'` or `'jpg'`.
+ *
+ * The third parameter, `duration`, sets the duration to record in seconds.
+ * The maximum duration is 15 seconds. The fourth parameter, `framerate`, sets
+ * the number of frames to record per second. The maximum frame rate value is
+ * 22. Limits are placed on `duration` and `framerate` to avoid using too much
+ * memory. Recording large canvases can easily crash sketches or even web
+ * browsers.
+ *
+ * The fifth parameter, `callback`, is optional. If a function is passed,
+ * image files won't be saved by default. The callback function can be used
+ * to process an array containing the data for each captured frame. The array
+ * of image data contains a sequence of objects with three properties for each
+ * frame: `imageData`, `filename`, and `extension`.
+ *
+ * @method saveFrames
+ * @param {String} filename prefix of file name.
+ * @param {String} extension file extension, either 'jpg' or 'png'.
+ * @param {Number} duration duration in seconds to record. This parameter will be constrained to be less or equal to 15.
+ * @param {Number} framerate number of frames to save per second. This parameter will be constrained to be less or equal to 22.
+ * @param {function(Array)} [callback] callback function that will be executed
+ to handle the image data. This function
+ should accept an array as argument. The
+ array will contain the specified number of
+ frames of objects. Each object has three
+ properties: `imageData`, `filename`, and `extension`.
+ * @example
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * background(255);
+ * saveCanvas(cnv, 'myCanvas', 'jpg');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * let r = frameCount % 255;
+ * let g = 50;
+ * let b = 100;
+ * background(r, g, b);
+ *
+ * describe('A square repeatedly changes color from blue to pink.');
+ * }
+ *
+ * function keyPressed() {
+ * if (key === 's') {
+ * saveFrames('frame', 'png', 1, 5);
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.saveFrames = function (fName, ext, _duration, _fps, callback) {
+ _main.default._validateParameters('saveFrames', arguments);
+ var duration = _duration || 3;
+ duration = _main.default.prototype.constrain(duration, 0, 15);
+ duration = duration * 1000;
+ var fps = _fps || 15;
+ fps = _main.default.prototype.constrain(fps, 0, 22);
+ var count = 0;
+ var makeFrame = _main.default.prototype._makeFrame;
+ var cnv = this._curElement.elt;
+ var frames = [
+ ];
+ var frameFactory = setInterval(function () {
+ frames.push(makeFrame(fName + count, ext, cnv));
+ count++;
+ }, 1000 / fps);
+ setTimeout(function () {
+ clearInterval(frameFactory);
+ if (callback) {
+ callback(frames);
+ } else {
+ for (var _i4 = 0, _frames = frames; _i4 < _frames.length; _i4++) {
+ var f = _frames[_i4];
+ _main.default.prototype.downloadFile(f.imageData, f.filename, f.ext);
+ }
+ }
+ frames = [
+ ]; // clear frames
+ }, duration + 0.01);
+ };
+ _main.default.prototype._makeFrame = function (filename, extension, _cnv) {
+ var cnv;
+ if (this) {
+ cnv = this._curElement.elt;
+ } else {
+ cnv = _cnv;
+ }
+ var mimeType;
+ if (!extension) {
+ extension = 'png';
+ mimeType = 'image/png';
+ } else {
+ switch (extension.toLowerCase()) {
+ case 'png':
+ mimeType = 'image/png';
+ break;
+ case 'jpeg':
+ mimeType = 'image/jpeg';
+ break;
+ case 'jpg':
+ mimeType = 'image/jpeg';
+ break;
+ default:
+ mimeType = 'image/png';
+ break;
+ }
+ }
+ var downloadMime = 'image/octet-stream';
+ var imageData = cnv.toDataURL(mimeType);
+ imageData = imageData.replace(mimeType, downloadMime);
+ var thisFrame = {
+ };
+ thisFrame.imageData = imageData;
+ thisFrame.filename = filename;
+ thisFrame.ext = extension;
+ return thisFrame;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.filter': 173,
+ 'core-js/modules/es.array.for-each': 175,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.keys': 199,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.set': 207,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.replace': 214,
+ 'core-js/modules/es.string.split': 216,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint32-array': 251,
+ 'core-js/modules/es.typed-array.uint8-array': 252,
+ 'core-js/modules/web.dom-collections.for-each': 255,
+ 'core-js/modules/web.dom-collections.iterator': 256,
+ 'omggif': 270
+ }
+ ],
+ 321: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.copy-within');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.copy-within');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ _dereq_('regenerator-runtime/runtime');
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _helpers = _interopRequireDefault(_dereq_('../core/helpers'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _omggif = _interopRequireDefault(_dereq_('omggif'));
+ var _gifenc = _dereq_('gifenc');
+ _dereq_('../core/friendly_errors/validate_params');
+ _dereq_('../core/friendly_errors/file_errors');
+ _dereq_('../core/friendly_errors/fes_core');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+ try {
+ var info = gen[key](arg);
+ var value = info.value;
+ } catch (error) {
+ reject(error);
+ return;
+ }
+ if (info.done) {
+ resolve(value);
+ } else {
+ Promise.resolve(value).then(_next, _throw);
+ }
+ }
+ function _asyncToGenerator(fn) {
+ return function () {
+ var self = this,
+ args = arguments;
+ return new Promise(function (resolve, reject) {
+ var gen = fn.apply(self, args);
+ function _next(value) {
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value);
+ }
+ function _throw(err) {
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err);
+ }
+ _next(undefined);
+ });
+ };
+ } /**
+ * @module Image
+ * @submodule Loading & Displaying
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Loads an image to create a p5.Image object.
+ *
+ * `loadImage()` interprets the first parameter one of three ways. If the path
+ * to an image file is provided, `loadImage()` will load it. Paths to local
+ * files should be relative, such as `'assets/thundercat.jpg'`. URLs such as
+ * `'https://example.com/thundercat.jpg'` may be blocked due to browser
+ * security. Raw image data can also be passed as a base64 encoded image in
+ * the form `'data:image/png;base64,arandomsequenceofcharacters'`.
+ *
+ * The second parameter is optional. If a function is passed, it will be
+ * called once the image has loaded. The callback function can optionally use
+ * the new p5.Image object.
+ *
+ * The third parameter is also optional. If a function is passed, it will be
+ * called if the image fails to load. The callback function can optionally use
+ * the event error.
+ *
+ * Images can take time to load. Calling `loadImage()` in
+ * preload() ensures images load before they're
+ * used in setup() or draw().
+ *
+ * @method loadImage
+ * @param {String} path path of the image to be loaded or base64 encoded image.
+ * @param {function(p5.Image)} [successCallback] function called with
+ * p5.Image once it
+ * loads.
+ * @param {function(Event)} [failureCallback] function called with event
+ * error if the image fails to load.
+ * @return {p5.Image} the p5.Image object.
+ * @example
+ *
+ * function draw() {
+ * let r = frameCount % 255;
+ * let g = 50;
+ * let b = 100;
+ * background(r, g, b);
+ *
+ * describe('A square repeatedly changes color from blue to pink.');
+ * }
+ *
+ * function mousePressed() {
+ * saveFrames('frame', 'png', 1, 5, data => {
+ * // Prints an array of objects containing raw image data,
+ * // filenames, and extensions.
+ * print(data);
+ * });
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * loadImage('assets/laDefense.jpg', img => {
+ * image(img, 0, 0);
+ * });
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.loadImage = function (path, successCallback, failureCallback) {
+ _main.default._validateParameters('loadImage', arguments);
+ var pImg = new _main.default.Image(1, 1, this);
+ var self = this;
+ var req = new Request(path, {
+ method: 'GET',
+ mode: 'cors'
+ });
+ fetch(path, req).then(function (response) {
+ // GIF section
+ var contentType = response.headers.get('content-type');
+ if (contentType === null) {
+ console.warn('The image you loaded does not have a Content-Type header. If you are using the online editor consider reuploading the asset.');
+ }
+ if (contentType && contentType.includes('image/gif')) {
+ response.arrayBuffer().then(function (arrayBuffer) {
+ if (arrayBuffer) {
+ var byteArray = new Uint8Array(arrayBuffer);
+ _createGif(byteArray, pImg, successCallback, failureCallback, function (pImg) {
+ self._decrementPreload();
+ }.bind(self));
+ }
+ }, function (e) {
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ self._decrementPreload();
+ } else {
+ console.error(e);
+ }
+ });
+ } else {
+ // Non-GIF Section
+ var img = new Image();
+ img.onload = function () {
+ pImg.width = pImg.canvas.width = img.width;
+ pImg.height = pImg.canvas.height = img.height;
+ // Draw the image into the backing canvas of the p5.Image
+ pImg.drawingContext.drawImage(img, 0, 0);
+ pImg.modified = true;
+ if (typeof successCallback === 'function') {
+ successCallback(pImg);
+ }
+ self._decrementPreload();
+ };
+ img.onerror = function (e) {
+ _main.default._friendlyFileLoadError(0, img.src);
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ self._decrementPreload();
+ } else {
+ console.error(e);
+ }
+ };
+ // Set crossOrigin in case image is served with CORS headers.
+ // This will let us draw to the canvas without tainting it.
+ // See https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
+ // When using data-uris the file will be loaded locally
+ // so we don't need to worry about crossOrigin with base64 file types.
+ if (path.indexOf('data:image/') !== 0) {
+ img.crossOrigin = 'Anonymous';
+ } // start loading the image
+
+ img.src = path;
+ }
+ pImg.modified = true;
+ }).catch(function (e) {
+ _main.default._friendlyFileLoadError(0, path);
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ self._decrementPreload();
+ } else {
+ console.error(e);
+ }
+ });
+ return pImg;
+ };
+ /**
+ * Generates a gif from a sketch and saves it to a file. `saveGif()` may be
+ * called in setup() or at any point while a sketch
+ * is running.
+ *
+ * The first parameter, `fileName`, sets the gif's file name. The second
+ * parameter, `duration`, sets the gif's duration in seconds.
+ *
+ * The third parameter, `options`, is optional. If an object is passed,
+ * `saveGif()` will use its properties to customize the gif. `saveGif()`
+ * recognizes the properties `delay`, `units`, `silent`,
+ * `notificationDuration`, and `notificationID`.
+ *
+ * @method saveGif
+ * @param {String} filename file name of gif.
+ * @param {Number} duration duration in seconds to capture from the sketch.
+ * @param {Object} [options] an object that can contain five more properties:
+ * `delay`, a Number specifying how much time to wait before recording;
+ * `units`, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;
+ * `silent`, a Boolean that defines presence of progress notifications. By default it’s `false`;
+ * `notificationDuration`, a Number that defines how long in seconds the final notification
+ * will live. By default it's `0`, meaning the notification will never be removed;
+ * `notificationID`, a String that specifies the id of the notification's DOM element. By default it’s `'progressBar’`.
+ *
+ * @example
+ *
+ * function setup() {
+ * loadImage('assets/laDefense.jpg', success, failure);
+ * }
+ *
+ * function success(img) {
+ * image(img, 0, 0);
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ *
+ * function failure(event) {
+ * console.error('Oops!', event);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.saveGif = /*#__PURE__*/ function () {
+ var _ref = _asyncToGenerator( /*#__PURE__*/ regeneratorRuntime.mark(function _callee(fileName, duration) {
+ var options,
+ delay,
+ units,
+ silent,
+ notificationDuration,
+ notificationID,
+ _frameRate,
+ gifFrameDelay,
+ nFrames,
+ nFramesDelay,
+ totalNumberOfFrames,
+ frameIterator,
+ lastPixelDensity,
+ frames,
+ p,
+ pixels,
+ gl,
+ data,
+ gif,
+ globalPalette,
+ paletteCache,
+ getIndexedFrame,
+ transparentIndex,
+ prevIndexedFrame,
+ i,
+ indexedFrame,
+ originalIndexedFrame,
+ _i,
+ buffer,
+ extension,
+ blob,
+ _args = arguments;
+ return regeneratorRuntime.wrap(function _callee$(_context) {
+ while (1) {
+ switch (_context.prev = _context.next) {
+ case 0:
+ options = _args.length > 2 && _args[2] !== undefined ? _args[2] : {
+ delay: 0,
+ units: 'seconds',
+ silent: false,
+ notificationDuration: 0,
+ notificationID: 'progressBar'
+ };
+ if (!(typeof fileName !== 'string')) {
+ _context.next = 3;
+ break;
+ }
+ throw TypeError('fileName parameter must be a string');
+ case 3:
+ if (!(typeof duration !== 'number')) {
+ _context.next = 5;
+ break;
+ }
+ throw TypeError('Duration parameter must be a number');
+ case 5:
+ // extract variables for more comfortable use
+ delay = options && options.delay || 0; // in seconds
+ units = options && options.units || 'seconds'; // either 'seconds' or 'frames'
+ silent = options && options.silent || false;
+ notificationDuration = options && options.notificationDuration || 0;
+ notificationID = options && options.notificationID || 'progressBar'; // if arguments in the options object are not correct, cancel operation
+ if (!(typeof delay !== 'number')) {
+ _context.next = 12;
+ break;
+ }
+ throw TypeError('Delay parameter must be a number');
+ case 12:
+ if (!(units !== 'seconds' && units !== 'frames')) {
+ _context.next = 14;
+ break;
+ }
+ throw TypeError('Units parameter must be either "frames" or "seconds"');
+ case 14:
+ if (!(typeof silent !== 'boolean')) {
+ _context.next = 16;
+ break;
+ }
+ throw TypeError('Silent parameter must be a boolean');
+ case 16:
+ if (!(typeof notificationDuration !== 'number')) {
+ _context.next = 18;
+ break;
+ }
+ throw TypeError('Notification duration parameter must be a number');
+ case 18:
+ if (!(typeof notificationID !== 'string')) {
+ _context.next = 20;
+ break;
+ }
+ throw TypeError('Notification ID parameter must be a string');
+ case 20:
+ this._recording = true;
+ // get the project's framerate
+ _frameRate = this._targetFrameRate; // if it is undefined or some non useful value, assume it's 60
+ if (_frameRate === Infinity || _frameRate === undefined || _frameRate === 0) {
+ _frameRate = 60;
+ } // calculate frame delay based on frameRate
+ // this delay has nothing to do with the
+ // delay in options, but rather is the delay
+ // we have to specify to the gif encoder between frames.
+
+ gifFrameDelay = 1 / _frameRate * 1000; // constrain it to be always greater than 20,
+ // otherwise it won't work in some browsers and systems
+ // reference: https://stackoverflow.com/questions/64473278/gif-frame-duration-seems-slower-than-expected
+ gifFrameDelay = gifFrameDelay < 20 ? 20 : gifFrameDelay;
+ // check the mode we are in and how many frames
+ // that duration translates to
+ nFrames = units === 'seconds' ? duration * _frameRate : duration;
+ nFramesDelay = units === 'seconds' ? delay * _frameRate : delay;
+ totalNumberOfFrames = nFrames + nFramesDelay; // initialize variables for the frames processing
+ frameIterator = nFramesDelay;
+ this.frameCount = frameIterator;
+ lastPixelDensity = this._pixelDensity;
+ this.pixelDensity(1);
+ // We first take every frame that we are going to use for the animation
+ frames = [
+ ];
+ if (document.getElementById(notificationID) !== null) document.getElementById(notificationID).remove();
+ if (!silent) {
+ p = this.createP('');
+ p.id(notificationID);
+ p.style('font-size', '16px');
+ p.style('font-family', 'Montserrat');
+ p.style('background-color', '#ffffffa0');
+ p.style('padding', '8px');
+ p.style('border-radius', '10px');
+ p.position(0, 0);
+ }
+ if (this._renderer instanceof _main.default.RendererGL) {
+ // if we have a WEBGL context, initialize the pixels array
+ // and the gl context to use them inside the loop
+ gl = this.drawingContext;
+ pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
+ } // stop the loop since we are going to manually redraw
+
+ this.noLoop();
+ // Defer execution until the rest of the call stack finishes, allowing the
+ // rest of `setup` to be called (and, importantly, canvases hidden in setup
+ // to be unhidden.)
+ //
+ // Waiting on this empty promise means we'll continue as soon as setup
+ // finishes without waiting for another frame.
+ _context.next = 39;
+ return Promise.resolve();
+ case 39:
+ if (!(frameIterator < totalNumberOfFrames)) {
+ _context.next = 50;
+ break;
+ } /*
+ we draw the next frame. this is important, since
+ busy sketches or low end devices might take longer
+ to render some frames. So we just wait for the frame
+ to be drawn and immediately save it to a buffer and continue
+ */
+
+ this.redraw();
+ // depending on the context we'll extract the pixels one way
+ // or another
+ data = undefined;
+ if (this._renderer instanceof _main.default.RendererGL) {
+ pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
+ gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+ data = _flipPixels(pixels);
+ } else {
+ data = this.drawingContext.getImageData(0, 0, this.width, this.height).data;
+ }
+ frames.push(data);
+ frameIterator++;
+ if (!silent) {
+ p.html('Saved frame ' + frames.length.toString() + ' out of ' + nFrames.toString());
+ }
+ _context.next = 48;
+ return new Promise(function (resolve) {
+ return setTimeout(resolve, 0);
+ });
+ case 48:
+ _context.next = 39;
+ break;
+ case 50:
+ if (!silent) p.html('Frames processed, generating color palette...');
+ this.loop();
+ this.pixelDensity(lastPixelDensity);
+ // create the gif encoder and the colorspace format
+ gif = (0, _gifenc.GIFEncoder) (); // calculate the global palette for this set of frames
+ globalPalette = _generateGlobalPalette(frames); // Rather than using applyPalette() from the gifenc library, we use our
+ // own function to map frame pixels to a palette color. This way, we can
+ // cache palette color mappings between frames for extra performance, and
+ // use our own caching mechanism to avoid flickering colors from cache
+ // key collisions.
+ paletteCache = {
+ };
+ getIndexedFrame = function getIndexedFrame(frame) {
+ var length = frame.length / 4;
+ var index = new Uint8Array(length);
+ for (var i = 0; i < length; i++) {
+ var key = frame[i * 4] << 24 | frame[i * 4 + 1] << 16 | frame[i * 4 + 2] << 8 | frame[i * 4 + 3];
+ if (paletteCache[key] === undefined) {
+ paletteCache[key] = (0, _gifenc.nearestColorIndex) (globalPalette, frame.slice(i * 4, (i + 1) * 4));
+ }
+ index[i] = paletteCache[key];
+ }
+ return index;
+ }; // the way we designed the palette means we always take the last index for transparency
+ transparentIndex = globalPalette.length - 1; // we are going to iterate the frames in pairs, n-1 and n
+ prevIndexedFrame = [
+ ];
+ i = 0;
+ case 60:
+ if (!(i < frames.length)) {
+ _context.next = 71;
+ break;
+ } //const indexedFrame = applyPalette(frames[i], globalPaletteWithoutAlpha, 'rgba565');
+
+ indexedFrame = getIndexedFrame(frames[i]); // Make a copy of the palette-applied frame before editing the original
+ // to use transparent pixels
+ originalIndexedFrame = indexedFrame.slice();
+ if (i === 0) {
+ gif.writeFrame(indexedFrame, this.width, this.height, {
+ palette: globalPalette,
+ delay: gifFrameDelay,
+ dispose: 1
+ });
+ } else {
+ // Matching pixels between frames can be set to full transparency,
+ // allowing the previous frame's pixels to show through. We only do
+ // this for pixels that get mapped to the same quantized color so that
+ // the resulting image would be the same.
+ for (_i = 0; _i < indexedFrame.length; _i++) {
+ if (indexedFrame[_i] === prevIndexedFrame[_i]) {
+ indexedFrame[_i] = transparentIndex;
+ }
+ } // Write frame into the encoder
+
+ gif.writeFrame(indexedFrame, this.width, this.height, {
+ delay: gifFrameDelay,
+ transparent: true,
+ transparentIndex: transparentIndex,
+ dispose: 1
+ });
+ }
+ prevIndexedFrame = originalIndexedFrame;
+ if (!silent) {
+ p.html('Rendered frame ' + i.toString() + ' out of ' + nFrames.toString());
+ } // this just makes the process asynchronous, preventing
+ // that the encoding locks up the browser
+
+ _context.next = 68;
+ return new Promise(function (resolve) {
+ return setTimeout(resolve, 0);
+ });
+ case 68:
+ i++;
+ _context.next = 60;
+ break;
+ case 71:
+ gif.finish();
+ // Get a direct typed array view into the buffer to avoid copying it
+ buffer = gif.bytesView();
+ extension = 'gif';
+ blob = new Blob([buffer], {
+ type: 'image/gif'
+ });
+ frames = [
+ ];
+ this._recording = false;
+ this.loop();
+ if (!silent) {
+ p.html('Done. Downloading your gif!🌸');
+ if (notificationDuration > 0) setTimeout(function () {
+ return p.remove();
+ }, notificationDuration * 1000);
+ }
+ _main.default.prototype.downloadFile(blob, fileName, extension);
+ case 80:
+ case 'end':
+ return _context.stop();
+ }
+ }
+ }, _callee, this);
+ }));
+ return function (_x, _x2) {
+ return _ref.apply(this, arguments);
+ };
+ }();
+ function _flipPixels(pixels) {
+ // extracting the pixels using readPixels returns
+ // an upside down image. we have to flip it back
+ // first. this solution is proposed by gman on
+ // this stack overflow answer:
+ // https://stackoverflow.com/questions/41969562/how-can-i-flip-the-result-of-webglrenderingcontext-readpixels
+ var halfHeight = parseInt(height / 2);
+ var bytesPerRow = width * 4;
+ // make a temp buffer to hold one row
+ var temp = new Uint8Array(width * 4);
+ for (var y = 0; y < halfHeight; ++y) {
+ var topOffset = y * bytesPerRow;
+ var bottomOffset = (height - y - 1) * bytesPerRow;
+ // make copy of a row on the top half
+ temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
+ // copy a row from the bottom half to the top
+ pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
+ // copy the copy of the top half row to the bottom half
+ pixels.set(temp, bottomOffset);
+ }
+ return pixels;
+ }
+ function _generateGlobalPalette(frames) {
+ // make an array the size of every possible color in every possible frame
+ // that is: width * height * frames.
+ var allColors = new Uint8Array(frames.length * frames[0].length);
+ // put every frame one after the other in sequence.
+ // this array will hold absolutely every pixel from the animation.
+ // the set function on the Uint8Array works super fast tho!
+ for (var f = 0; f < frames.length; f++) {
+ allColors.set(frames[f], f * frames[0].length);
+ } // quantize this massive array into 256 colors and return it!
+
+ var colorPalette = (0, _gifenc.quantize) (allColors, 256, {
+ format: 'rgba4444',
+ oneBitAlpha: true
+ });
+ // when generating the palette, we have to leave space for 1 of the
+ // indices to be a random color that does not appear anywhere in our
+ // animation to use for transparency purposes. So, if the palette is full
+ // (has 256 colors), we overwrite the last one with a random, fully transparent
+ // color. Otherwise, we just push a new color into the palette the same way.
+ // this guarantees that when using the transparency index, there are no matches
+ // between some colors of the animation and the "holes" we want to dig on them,
+ // which would cause pieces of some frames to be transparent and thus look glitchy.
+ if (colorPalette.length === 256) {
+ colorPalette[colorPalette.length - 1] = [
+ Math.random() * 255,
+ Math.random() * 255,
+ Math.random() * 255,
+ 0
+ ];
+ } else {
+ colorPalette.push([Math.random() * 255,
+ Math.random() * 255,
+ Math.random() * 255,
+ 0]);
+ }
+ return colorPalette;
+ } /**
+ * Helper function for loading GIF-based images
+ */
+
+ function _createGif(arrayBuffer, pImg, successCallback, failureCallback, finishCallback) {
+ var gifReader = new _omggif.default.GifReader(arrayBuffer);
+ pImg.width = pImg.canvas.width = gifReader.width;
+ pImg.height = pImg.canvas.height = gifReader.height;
+ var frames = [
+ ];
+ var numFrames = gifReader.numFrames();
+ var framePixels = new Uint8ClampedArray(pImg.width * pImg.height * 4);
+ var loadGIFFrameIntoImage = function loadGIFFrameIntoImage(frameNum, gifReader) {
+ try {
+ gifReader.decodeAndBlitFrameRGBA(frameNum, framePixels);
+ } catch (e) {
+ _main.default._friendlyFileLoadError(8, pImg.src);
+ if (typeof failureCallback === 'function') {
+ failureCallback(e);
+ } else {
+ console.error(e);
+ }
+ }
+ };
+ for (var j = 0; j < numFrames; j++) {
+ var frameInfo = gifReader.frameInfo(j);
+ var prevFrameData = pImg.drawingContext.getImageData(0, 0, pImg.width, pImg.height);
+ framePixels = prevFrameData.data.slice();
+ loadGIFFrameIntoImage(j, gifReader);
+ var imageData = new ImageData(framePixels, pImg.width, pImg.height);
+ pImg.drawingContext.putImageData(imageData, 0, 0);
+ var frameDelay = frameInfo.delay;
+ // To maintain the default of 10FPS when frameInfo.delay equals to 0
+ if (frameDelay === 0) {
+ frameDelay = 10;
+ }
+ frames.push({
+ image: pImg.drawingContext.getImageData(0, 0, pImg.width, pImg.height),
+ delay: frameDelay * 10 //GIF stores delay in one-hundredth of a second, shift to ms
+ });
+ // Some GIFs are encoded so that they expect the previous frame
+ // to be under the current frame. This can occur at a sub-frame level
+ //
+ // Values : 0 - No disposal specified. The decoder is
+ // not required to take any action.
+ // 1 - Do not dispose. The graphic is to be left
+ // in place.
+ // 2 - Restore to background color. The area used by the
+ // graphic must be restored to the background color.
+ // 3 - Restore to previous. The decoder is required to
+ // restore the area overwritten by the graphic with
+ // what was there prior to rendering the graphic.
+ // 4-7 - To be defined.
+ if (frameInfo.disposal === 2) {
+ // Restore background color
+ pImg.drawingContext.clearRect(frameInfo.x, frameInfo.y, frameInfo.width, frameInfo.height);
+ } else if (frameInfo.disposal === 3) {
+ // Restore previous
+ pImg.drawingContext.putImageData(prevFrameData, 0, 0, frameInfo.x, frameInfo.y, frameInfo.width, frameInfo.height);
+ }
+ } //Uses Netscape block encoding
+ //to repeat forever, this will be 0
+ //to repeat just once, this will be null
+ //to repeat N times (1
+ * function draw() {
+ * background(200);
+ * let c = frameCount % 255;
+ * fill(c);
+ * circle(50, 50, 25);
+ *
+ * describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+ * }
+ *
+ * function keyPressed() {
+ * if (key === 's') {
+ * saveGif('mySketch', 5);
+ * }
+ * }
+ *
+ * 
+ *
+ * The fourth and fifth parameters, `dw` and `dh`, are optional. They set the
+ * the width and height to draw the destination image. By default, `image()`
+ * draws the full source image at its original size.
+ *
+ * The sixth and seventh parameters, `sx` and `sy`, are also optional.
+ * These coordinates define the top left corner of a subsection to draw from
+ * the source image.
+ *
+ * The eighth and ninth parameters, `sw` and `sh`, are also optional.
+ * They define the width and height of a subsection to draw from the source
+ * image. By default, `image()` draws the full subsection that begins at
+ * (`sx`, `sy`) and extends to the edges of the source image.
+ *
+ * The ninth parameter, `fit`, is also optional. It enables a subsection of
+ * the source image to be drawn without affecting its aspect ratio. If
+ * `CONTAIN` is passed, the full subsection will appear within the destination
+ * rectangle. If `COVER` is passed, the subsection will completely cover the
+ * destination rectangle. This may have the effect of zooming into the
+ * subsection.
+ *
+ * The tenth and eleventh paremeters, `xAlign` and `yAlign`, are also
+ * optional. They determine how to align the fitted subsection. `xAlign` can
+ * be set to either `LEFT`, `RIGHT`, or `CENTER`. `yAlign` can be set to
+ * either `TOP`, `BOTTOM`, or `CENTER`. By default, both `xAlign` and `yAlign`
+ * are set to `CENTER`.
+ *
+ * @method image
+ * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img image to display.
+ * @param {Number} x x-coordinate of the top-left corner of the image.
+ * @param {Number} y y-coordinate of the top-left corner of the image.
+ * @param {Number} [width] width to draw the image.
+ * @param {Number} [height] height to draw the image.
+ * @example
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * background(50);
+ * image(img, 0, 0);
+ *
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * background(50);
+ * image(img, 10, 10);
+ *
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * background(50);
+ * image(img, 0, 0, 50, 50);
+ *
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * background(50);
+ * image(img, 25, 25, 50, 50, 25, 25, 50, 50);
+ *
+ * describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/moonwalk.jpg');
+ * }
+ *
+ * function setup() {
+ * background(50);
+ * image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
+ *
+ * describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method image
+ * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img
+ * @param {Number} dx the x-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param {Number} dy the y-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param {Number} dWidth the width of the destination rectangle
+ * @param {Number} dHeight the height of the destination rectangle
+ * @param {Number} sx the x-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param {Number} sy the y-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param {Number} [sWidth] the width of the subsection of the
+ * source image to draw into the destination
+ * rectangle
+ * @param {Number} [sHeight] the height of the subsection of the
+ * source image to draw into the destination rectangle
+ * @param {Constant} [fit] either CONTAIN or COVER
+ * @param {Constant} [xAlign] either LEFT, RIGHT or CENTER default is CENTER
+ * @param {Constant} [yAlign] either TOP, BOTTOM or CENTER default is CENTER
+ */
+
+ _main.default.prototype.image = function (img, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight, fit, xAlign, yAlign) {
+ // set defaults per spec: https://goo.gl/3ykfOq
+ _main.default._validateParameters('image', arguments);
+ var defW = img.width;
+ var defH = img.height;
+ yAlign = yAlign || constants.CENTER;
+ xAlign = xAlign || constants.CENTER;
+ if (img.elt) {
+ defW = defW !== undefined ? defW : img.elt.width;
+ defH = defH !== undefined ? defH : img.elt.height;
+ }
+ if (img.elt && img.elt.videoWidth && !img.canvas) {
+ // video no canvas
+ defW = defW !== undefined ? defW : img.elt.videoWidth;
+ defH = defH !== undefined ? defH : img.elt.videoHeight;
+ }
+ var _dx = dx;
+ var _dy = dy;
+ var _dw = dWidth || defW;
+ var _dh = dHeight || defH;
+ var _sx = sx || 0;
+ var _sy = sy || 0;
+ var _sw = sWidth !== undefined ? sWidth : defW;
+ var _sh = sHeight !== undefined ? sHeight : defH;
+ _sw = _sAssign(_sw, defW);
+ _sh = _sAssign(_sh, defH);
+ // This part needs cleanup and unit tests
+ // see issues https://github.com/processing/p5.js/issues/1741
+ // and https://github.com/processing/p5.js/issues/1673
+ var pd = 1;
+ if (img.elt && !img.canvas && img.elt.style.width) {
+ //if img is video and img.elt.size() has been used and
+ //no width passed to image()
+ if (img.elt.videoWidth && !dWidth) {
+ pd = img.elt.videoWidth;
+ } else {
+ //all other cases
+ pd = img.elt.width;
+ }
+ pd /= parseInt(img.elt.style.width, 10);
+ }
+ _sx *= pd;
+ _sy *= pd;
+ _sh *= pd;
+ _sw *= pd;
+ var vals = _helpers.default.modeAdjust(_dx, _dy, _dw, _dh, this._renderer._imageMode);
+ vals = _imageFit(fit, xAlign, yAlign, vals.x, vals.y, vals.w, vals.h, _sx, _sy, _sw, _sh);
+ // tint the image if there is a tint
+ this._renderer.image(img, vals.sx, vals.sy, vals.sw, vals.sh, vals.dx, vals.dy, vals.dw, vals.dh);
+ };
+ /**
+ * Tints images using a specified color.
+ *
+ * The version of `tint()` with one parameter interprets it one of four ways.
+ * If the parameter is a number, it's interpreted as a grayscale value. If the
+ * parameter is a string, it's interpreted as a CSS color string. An array of
+ * `[R, G, B, A]` values or a p5.Color object can
+ * also be used to set the tint color.
+ *
+ * The version of `tint()` with two parameters uses the first one as a
+ * grayscale value and the second as an alpha value. For example, calling
+ * `tint(255, 128)` will make an image 50% transparent.
+ *
+ * The version of `tint()` with three parameters interprets them as RGB or
+ * HSB values, depending on the current
+ * colorMode(). The optional fourth parameter
+ * sets the alpha value. For example, `tint(255, 0, 0, 100)` will give images
+ * a red tint and make them transparent.
+ *
+ * @method tint
+ * @param {Number} v1 red or hue value.
+ * @param {Number} v2 green or saturation value.
+ * @param {Number} v3 blue or brightness.
+ * @param {Number} [alpha]
+ *
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * // Image is 50 x 50 pixels.
+ * img = loadImage('assets/laDefense50.png');
+ * }
+ *
+ * function setup() {
+ * background(50);
+ * image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
+ *
+ * describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * tint('red');
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(255, 0, 0);
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(255, 0, 0, 100);
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method tint
+ * @param {String} value CSS color string.
+ */
+ /**
+ * @method tint
+ * @param {Number} gray grayscale value.
+ * @param {Number} [alpha]
+ */
+ /**
+ * @method tint
+ * @param {Number[]} values array containing the red, green, blue &
+ * alpha components of the color.
+ */
+ /**
+ * @method tint
+ * @param {p5.Color} color the tint color
+ */
+ _main.default.prototype.tint = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('tint', args);
+ var c = this.color.apply(this, args);
+ this._renderer._tint = c.levels;
+ };
+ /**
+ * Removes the current tint set by tint() and restores
+ * images to their original colors.
+ *
+ * @method noTint
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(255, 180);
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noTint = function () {
+ this._renderer._tint = null;
+ };
+ /**
+ * Apply the current tint color to the input image, return the resulting
+ * canvas.
+ *
+ * @private
+ * @param {p5.Image} The image to be tinted
+ * @return {canvas} The resulting tinted canvas
+ */
+ _main.default.prototype._getTintedImageCanvas = _main.default.Renderer2D.prototype._getTintedImageCanvas;
+ /**
+ * Changes the location from which images are drawn when
+ * image() is called.
+ *
+ * By default, the first
+ * two parameters of image() are the x- and
+ * y-coordinates of the image's upper-left corner. The next parameters are
+ * its width and height. This is the same as calling `imageMode(CORNER)`.
+ *
+ * `imageMode(CORNERS)` also uses the first two parameters of
+ * image() as the x- and y-coordinates of the image's
+ * top-left corner. The third and fourth parameters are the coordinates of its
+ * bottom-right corner.
+ *
+ * `imageMode(CENTER)` uses the first two parameters of
+ * image() as the x- and y-coordinates of the image's
+ * center. The next parameters are its width and height.
+ *
+ * @method imageMode
+ * @param {Constant} mode either CORNER, CORNERS, or CENTER.
+ * @example
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * tint('red');
+ * image(img, 0, 0);
+ * noTint();
+ * image(img, 50, 0);
+ *
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ * imageMode(CORNER);
+ * image(img, 10, 10, 50, 50);
+ *
+ * describe('A square image of a brick wall is drawn at the top left of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ * imageMode(CORNERS);
+ * image(img, 10, 10, 90, 40);
+ *
+ * describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.imageMode = function (m) {
+ _main.default._validateParameters('imageMode', arguments);
+ if (m === constants.CORNER || m === constants.CORNERS || m === constants.CENTER) {
+ this._renderer._imageMode = m;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/friendly_errors/fes_core': 289,
+ '../core/friendly_errors/file_errors': 290,
+ '../core/friendly_errors/validate_params': 293,
+ '../core/helpers': 294,
+ '../core/main': 298,
+ 'core-js/modules/es.array.copy-within': 170,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.index-of': 178,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.promise': 201,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint8-array': 252,
+ 'core-js/modules/es.typed-array.uint8-clamped-array': 253,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256,
+ 'gifenc': 263,
+ 'omggif': 270,
+ 'regenerator-runtime/runtime': 274
+ }
+ ],
+ 322: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _filters = _interopRequireDefault(_dereq_('./filters'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Image
+ * @submodule Image
+ * @requires core
+ * @requires constants
+ * @requires filters
+ */
+ /**
+ * This module defines the p5.Image class and P5 methods for
+ * drawing images to the main display canvas.
+ */
+ /*
+ * Class methods
+ */
+ /**
+ * A class to describe an image. Images are rectangular grids of pixels that
+ * can be displayed and modified.
+ *
+ * Existing images can be loaded by calling
+ * loadImage(). Blank images can be created by
+ * calling createImage(). `p5.Image` objects
+ * have methods for common tasks such as applying filters and modifying
+ * pixel values.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ * imageMode(CENTER);
+ * image(img, 50, 50, 80, 80);
+ *
+ * describe('A square image of a brick wall is drawn on a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ *
+ * describe('An image of a brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(GRAY);
+ * image(img, 0, 0);
+ *
+ * describe('A grayscale image of a brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ * @class p5.Image
+ * @constructor
+ * @param {Number} width
+ * @param {Number} height
+ */
+
+ _main.default.Image = /*#__PURE__*/ function () {
+ function _class(width, height) {
+ _classCallCheck(this, _class);
+ /**
+ * Image width.
+ * @property {Number} width
+ * @readOnly
+ * @example
+ *
+ * background(200);
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ */
+ this.width = width;
+ /**
+ * Image height.
+ * @property {Number} height
+ * @readOnly
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * let x = img.width / 2;
+ * let y = img.height / 2;
+ * let d = 20;
+ * circle(x, y, d);
+ *
+ * describe('An image of a mountain landscape with a white circle drawn in the middle.');
+ * }
+ *
+ *
+ *
+ */
+ this.height = height;
+ this.canvas = document.createElement('canvas');
+ this.canvas.width = this.width;
+ this.canvas.height = this.height;
+ this.drawingContext = this.canvas.getContext('2d');
+ this._pixelsState = this;
+ this._pixelDensity = 1;
+ //Object for working with GIFs, defaults to null
+ this.gifProperties = null;
+ //For WebGL Texturing only: used to determine whether to reupload texture to GPU
+ this._modified = false;
+ /**
+ * An array containing the color of each pixel in the
+ * p5.Image object. Colors are stored as numbers
+ * representing red, green, blue, and alpha (RGBA) values. `img.pixels` is a
+ * one-dimensional array for performance reasons.
+ *
+ * Each pixel occupies four elements in the pixels array, one for each
+ * RGBA value. For example, the pixel at coordinates (0, 0) stores its
+ * RGBA values at `img.pixels[0]`, `img.pixels[1]`, `img.pixels[2]`,
+ * and `img.pixels[3]`, respectively. The next pixel at coordinates (1, 0)
+ * stores its RGBA values at `img.pixels[4]`, `img.pixels[5]`,
+ * `img.pixels[6]`, and `img.pixels[7]`. And so on. The `img.pixels` array
+ * for a 100×100 p5.Image object has
+ * 100 × 100 × 4 = 40,000 elements.
+ *
+ * Accessing the RGBA values for a pixel in the
+ * p5.Image object requires a little math as
+ * shown below. The img.loadPixels()
+ * method must be called before accessing the `img.pixels` array. The
+ * img.updatePixels() method must be
+ * called after any changes are made.
+ *
+ * @property {Number[]} pixels
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * let x = img.width / 2;
+ * let y = img.height / 2;
+ * let d = 20;
+ * circle(x, y, d);
+ *
+ * describe('An image of a mountain landscape with a white circle drawn in the middle.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * let numPixels = 4 * img.width * img.height;
+ * for (let i = 0; i < numPixels; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ */
+ this.pixels = [
+ ];
+ } /**
+ * Gets or sets the pixel density for high pixel density displays. By default,
+ * the density will be set to 1.
+ *
+ * Call this method with no arguments to get the default density, or pass
+ * in a number to set the density. If a non-positive number is provided,
+ * it defaults to 1.
+ *
+ * @method pixelDensity
+ * @param {Number} [density] A scaling factor for the number of pixels per
+ * side
+ * @returns {Number} The current density if called without arguments, or the instance for chaining if setting density.
+ */
+
+ _createClass(_class, [
+ {
+ key: 'pixelDensity',
+ value: function pixelDensity(density) {
+ if (typeof density !== 'undefined') {
+ // Setter: set the density and handle resize
+ if (density <= 0) {
+ var errorObj = {
+ type: 'INVALID_VALUE',
+ format: {
+ types: [
+ 'Number'
+ ]
+ },
+ position: 1
+ };
+ _main.default._friendlyParamError(errorObj, 'pixelDensity');
+ // Default to 1 in case of an invalid value
+ density = 1;
+ }
+ this._pixelDensity = density;
+ // Adjust canvas dimensions based on pixel density
+ this.width /= density;
+ this.height /= density;
+ return this; // Return the image instance for chaining if needed
+ } else {
+ // Getter: return the default density
+ return this._pixelDensity;
+ }
+ } /**
+ * Helper function for animating GIF-based images with time
+ */
+
+ },
+ {
+ key: '_animateGif',
+ value: function _animateGif(pInst) {
+ var props = this.gifProperties;
+ var curTime = pInst._lastRealFrameTime;
+ if (props.lastChangeTime === 0) {
+ props.lastChangeTime = curTime;
+ }
+ if (props.playing) {
+ props.timeDisplayed = curTime - props.lastChangeTime;
+ var curDelay = props.frames[props.displayIndex].delay;
+ if (props.timeDisplayed >= curDelay) {
+ //GIF is bound to 'realtime' so can skip frames
+ var skips = Math.floor(props.timeDisplayed / curDelay);
+ props.timeDisplayed = 0;
+ props.lastChangeTime = curTime;
+ props.displayIndex += skips;
+ props.loopCount = Math.floor(props.displayIndex / props.numFrames);
+ if (props.loopLimit !== null && props.loopCount >= props.loopLimit) {
+ props.playing = false;
+ } else {
+ var ind = props.displayIndex % props.numFrames;
+ this.drawingContext.putImageData(props.frames[ind].image, 0, 0);
+ props.displayIndex = ind;
+ this.setModified(true);
+ }
+ }
+ }
+ } /**
+ * Helper fxn for sharing pixel methods
+ */
+
+ },
+ {
+ key: '_setProperty',
+ value: function _setProperty(prop, value) {
+ this[prop] = value;
+ this.setModified(true);
+ } /**
+ * Loads the current value of each pixel in the
+ * p5.Image object into the `img.pixels` array.
+ * This method must be called before reading or modifying pixel values.
+ *
+ * @method loadPixels
+ * @example
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * let numPixels = 4 * img.width * img.height;
+ * for (let i = 0; i < numPixels; i += 4) {
+ * // Red.
+ * img.pixels[i] = 255;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A red square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'loadPixels',
+ value: function loadPixels() {
+ _main.default.Renderer2D.prototype.loadPixels.call(this);
+ this.setModified(true);
+ } /**
+ * Updates the canvas with the RGBA values in the
+ * img.pixels array.
+ *
+ * `img.updatePixels()` only needs to be called after changing values in
+ * the img.pixels array. Such changes can be
+ * made directly after calling
+ * img.loadPixels() or by calling
+ * img.set().
+ *
+ * The optional parameters `x`, `y`, `width`, and `height` define a
+ * subsection of the p5.Image object to update.
+ * Doing so can improve performance in some cases.
+ *
+ * If the p5.Image object was loaded from a GIF,
+ * then calling `img.updatePixels()` will update the pixels in current
+ * frame.
+ *
+ * @method updatePixels
+ * @param {Integer} x x-coordinate of the upper-left corner
+ * of the subsection to update.
+ * @param {Integer} y y-coordinate of the upper-left corner
+ * of the subsection to update.
+ * @param {Integer} w width of the subsection to update.
+ * @param {Integer} h height of the subsection to update.
+ * @example
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * let numPixels = 4 * img.width * img.height;
+ * for (let i = 0; i < numPixels; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ */
+ /**
+ * @method updatePixels
+ */
+
+ },
+ {
+ key: 'updatePixels',
+ value: function updatePixels(x, y, w, h) {
+ _main.default.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
+ this.setModified(true);
+ } /**
+ * Gets a pixel or a region of pixels from a
+ * p5.Image object.
+ *
+ * `img.get()` is easy to use but it's not as fast as
+ * img.pixels. Use
+ * img.pixels to read many pixel values.
+ *
+ * The version of `img.get()` with no parameters returns the entire image.
+ *
+ * The version of `img.get()` with two parameters interprets them as
+ * coordinates. It returns an array with the `[R, G, B, A]` values of the
+ * pixel at the given point.
+ *
+ * The version of `img.get()` with four parameters interprets them as
+ * coordinates and dimensions. It returns a subsection of the canvas as a
+ * p5.Image object. The first two parameters are
+ * the coordinates for the upper-left corner of the subsection. The last two
+ * parameters are the width and height of the subsection.
+ *
+ * Use img.get() to work directly with
+ * p5.Image objects.
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number} w width of the subsection to be returned.
+ * @param {Number} h height of the subsection to be returned.
+ * @return {p5.Image} subsection as a p5.Image object.
+ * @example
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * let numPixels = 4 * img.width * img.height;
+ * for (let i = 0; i < numPixels; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * let img2 = get();
+ * image(img2, width / 2, 0);
+ *
+ * describe('Two identical mountain landscapes shown side-by-side.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = img.get(50, 90);
+ * fill(c);
+ * noStroke();
+ * square(25, 25, 50);
+ *
+ * describe('A mountain landscape with an olive green square in its center.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method get
+ * @return {p5.Image} whole p5.Image
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of the pixel at (x, y) in array format `[R, G, B, A]`.
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(x, y, w, h) {
+ _main.default._validateParameters('p5.Image.get', arguments);
+ return _main.default.Renderer2D.prototype.get.apply(this, arguments);
+ }
+ },
+ {
+ key: '_getPixel',
+ value: function _getPixel() {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ return _main.default.Renderer2D.prototype._getPixel.apply(this, args);
+ } /**
+ * Sets the color of one or more pixels within a
+ * p5.Image object.
+ *
+ * `img.set()` is easy to use but it's not as fast as
+ * img.pixels. Use
+ * img.pixels to set many pixel values.
+ *
+ * `img.set()` interprets the first two parameters as x- and y-coordinates. It
+ * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
+ * array, a p5.Color object, or another
+ * p5.Image object.
+ *
+ * img.updatePixels() must be called
+ * after using `img.set()` for changes to appear.
+ *
+ * @method set
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number|Number[]|Object} a grayscale value | pixel array |
+ * p5.Color object |
+ * p5.Image to copy.
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * let img2 = img.get(0, 0, img.width / 2, img.height / 2);
+ * image(img2, width / 2, height / 2);
+ *
+ * describe('A mountain landscape drawn on top of another mountain landscape.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(100, 100);
+ * img.set(30, 20, 0);
+ * img.set(85, 20, 0);
+ * img.set(85, 75, 0);
+ * img.set(30, 75, 0);
+ * img.updatePixels();
+ * image(img, 0, 0);
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(100, 100);
+ * let black = color(0);
+ * img.set(30, 20, black);
+ * img.set(85, 20, black);
+ * img.set(85, 75, black);
+ * img.set(30, 75, black);
+ * img.updatePixels();
+ * image(img, 0, 0);
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ *
+ *
+ *
+ *
+ *
+ * let img = createImage(66, 66);
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * let c = map(x, 0, img.width, 0, 255);
+ * img.set(x, y, c);
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ * describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(x, y, imgOrCol) {
+ _main.default.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
+ this.setModified(true);
+ } /**
+ * Resizes the p5.Image object to a given `width`
+ * and `height`. The image's original aspect ratio can be kept by passing 0
+ * for either `width` or `height`. For example, calling `img.resize(50, 0)`
+ * on an image that was 500 × 300 pixels will resize it to
+ * 50 × 30 pixels.
+ *
+ * @method resize
+ * @param {Number} width resized image width.
+ * @param {Number} height resized image height.
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * let img2 = createImage(100, 100);
+ * img2.set(0, 0, img);
+ * image(img2, 0, 0);
+ *
+ * describe('An image of a mountain landscape.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * img.resize(50, 100);
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * img.resize(0, 30);
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'resize',
+ value: function resize(width, height) {
+ // Copy contents to a temporary canvas, resize the original
+ // and then copy back.
+ //
+ // There is a faster approach that involves just one copy and swapping the
+ // this.canvas reference. We could switch to that approach if (as i think
+ // is the case) there an expectation that the user would not hold a
+ // reference to the backing canvas of a p5.Image. But since we do not
+ // enforce that at the moment, I am leaving in the slower, but safer
+ // implementation.
+ // auto-resize
+ if (width === 0 && height === 0) {
+ width = this.canvas.width;
+ height = this.canvas.height;
+ } else if (width === 0) {
+ width = this.canvas.width * height / this.canvas.height;
+ } else if (height === 0) {
+ height = this.canvas.height * width / this.canvas.width;
+ }
+ width = Math.floor(width);
+ height = Math.floor(height);
+ var tempCanvas = document.createElement('canvas');
+ tempCanvas.width = width;
+ tempCanvas.height = height;
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ //adapted from github.com/LinusU/resize-image-data
+ var nearestNeighbor = function nearestNeighbor(src, dst) {
+ var pos = 0;
+ for (var y = 0; y < dst.height; y++) {
+ for (var x = 0; x < dst.width; x++) {
+ var srcX = Math.floor(x * src.width / dst.width);
+ var srcY = Math.floor(y * src.height / dst.height);
+ var srcPos = (srcY * src.width + srcX) * 4;
+ dst.data[pos++] = src.data[srcPos++]; // R
+ dst.data[pos++] = src.data[srcPos++]; // G
+ dst.data[pos++] = src.data[srcPos++]; // B
+ dst.data[pos++] = src.data[srcPos++]; // A
+ }
+ }
+ };
+ for (var i = 0; i < props.numFrames; i++) {
+ var resizedImageData = this.drawingContext.createImageData(width, height);
+ nearestNeighbor(props.frames[i].image, resizedImageData);
+ props.frames[i].image = resizedImageData;
+ }
+ }
+ tempCanvas.getContext('2d').drawImage(this.canvas, 0, 0, this.canvas.width, this.canvas.height, 0, 0, tempCanvas.width, tempCanvas.height);
+ // Resize the original canvas, which will clear its contents
+ this.canvas.width = this.width = width;
+ this.canvas.height = this.height = height;
+ //Copy the image back
+ this.drawingContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, width, height);
+ if (this.pixels.length > 0) {
+ this.loadPixels();
+ }
+ this.setModified(true);
+ } /**
+ *
+ * Copies pixels from a source p5.Image
+ * to this one. Calling `img.copy()` will scale pixels from the source
+ * region if it isn't the same size as the destination region.
+ *
+ * @method copy
+ * @param {p5.Image|p5.Element} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * img.resize(60, 0);
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * img.copy(7, 22, 10, 10, 35, 25, 50, 50);
+ * image(img, 0, 0);
+ * // Outline copied region.
+ * stroke(255);
+ * noFill();
+ * square(7, 22, 10);
+ *
+ * describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method copy
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default.prototype.copy.apply(this, args);
+ } /**
+ * Masks part of an image from displaying by loading another
+ * image and using its alpha channel as an alpha channel for
+ * this image. Masks are cumulative, once applied to an image
+ * object, they cannot be removed.
+ *
+ * @method mask
+ * @param {p5.Image} srcImage source image.
+ *
+ * @example
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * let x = bricks.width / 2;
+ * let y = bricks.height / 2;
+ * mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+ * image(mountains, 0, 0);
+ *
+ * describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');
+ * }
+ *
+ *
+ *
+ */
+ // TODO: - Accept an array of alpha values.
+
+ },
+ {
+ key: 'mask',
+ value: function mask(p5Image) {
+ if (p5Image === undefined) {
+ p5Image = this;
+ }
+ var currBlend = this.drawingContext.globalCompositeOperation;
+ var scaleFactor = 1;
+ if (p5Image instanceof _main.default.Renderer) {
+ scaleFactor = p5Image._pInst._pixelDensity;
+ }
+ var copyArgs = [
+ p5Image,
+ 0,
+ 0,
+ scaleFactor * p5Image.width,
+ scaleFactor * p5Image.height,
+ 0,
+ 0,
+ this.width,
+ this.height
+ ];
+ this.drawingContext.globalCompositeOperation = 'destination-in';
+ if (this.gifProperties) {
+ for (var i = 0; i < this.gifProperties.frames.length; i++) {
+ this.drawingContext.putImageData(this.gifProperties.frames[i].image, 0, 0);
+ this.copy.apply(this, copyArgs);
+ this.gifProperties.frames[i].image = this.drawingContext.getImageData(0, 0, this.width, this.height);
+ }
+ this.drawingContext.putImageData(this.gifProperties.frames[this.gifProperties.displayIndex].image, 0, 0);
+ } else {
+ this.copy.apply(this, copyArgs);
+ }
+ this.drawingContext.globalCompositeOperation = currBlend;
+ this.setModified(true);
+ } /**
+ * Applies an image filter to the p5.Image object.
+ * The preset options are:
+ *
+ * `INVERT`
+ * Inverts the colors in the image. No parameter is used.
+ *
+ * `GRAY`
+ * Converts the image to grayscale. No parameter is used.
+ *
+ * `THRESHOLD`
+ * Converts the image to black and white. Pixels with a grayscale value
+ * above a given threshold are converted to white. The rest are converted to
+ * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+ * value is specified, 0.5 is used.
+ *
+ * `OPAQUE`
+ * Sets the alpha channel to be entirely opaque. No parameter is used.
+ *
+ * `POSTERIZE`
+ * Limits the number of colors in the image. Each color channel is limited to
+ * the number of colors specified. Values between 2 and 255 are valid, but
+ * results are most noticeable with lower values. The default value is 4.
+ *
+ * `BLUR`
+ * Blurs the image. The level of blurring is specified by a blur radius. Larger
+ * values increase the blur. The default value is 4. A gaussian blur is used
+ * in `P2D` mode. A box blur is used in `WEBGL` mode.
+ *
+ * `ERODE`
+ * Reduces the light areas. No parameter is used.
+ *
+ * `DILATE`
+ * Increases the light areas. No parameter is used.
+ *
+ * @method filter
+ * @param {Constant} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
+ * POSTERIZE, ERODE, DILATE or BLUR.
+ * @param {Number} [filterParam] parameter unique to each filter.
+ * @example
+ *
+ * let photo;
+ * let maskImage;
+ *
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * maskImage = loadImage('assets/mask2.png');
+ * }
+ *
+ * function setup() {
+ * photo.mask(maskImage);
+ * image(photo, 0, 0);
+ *
+ * describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(INVERT);
+ * image(img, 0, 0);
+ *
+ * describe('A blue brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(GRAY);
+ * image(img, 0, 0);
+ *
+ * describe('A brick wall drawn in grayscale.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(THRESHOLD);
+ * image(img, 0, 0);
+ *
+ * describe('A brick wall drawn in black and white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(OPAQUE);
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(POSTERIZE, 3);
+ * image(img, 0, 0);
+ *
+ * describe('An image of a red brick wall drawn with a limited color palette.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(BLUR, 3);
+ * image(img, 0, 0);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(DILATE);
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall with bright lines between each brick.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'filter',
+ value: function filter(operation, value) {
+ _filters.default.apply(this.canvas, _filters.default[operation], value);
+ this.setModified(true);
+ } /**
+ * Copies a region of pixels from another
+ * p5.Image object into this one. The `blendMode`
+ * parameter blends the images' colors to create different effects.
+ *
+ * @method blend
+ * @param {p5.Image} srcImage source image
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ * @param {Constant} blendMode the blend mode. either
+ * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ *
+ * Available blend modes are: normal | multiply | screen | overlay |
+ * darken | lighten | color-dodge | color-burn | hard-light |
+ * soft-light | difference | exclusion | hue | saturation |
+ * color | luminosity
+ *
+ * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * img.filter(ERODE);
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall with faint lines between each brick.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method blend
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ * @param {Constant} blendMode
+ */
+
+ },
+ {
+ key: 'blend',
+ value: function blend() {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('p5.Image.blend', arguments);
+ _main.default.prototype.blend.apply(this, args);
+ this.setModified(true);
+ } /**
+ * helper method for web GL mode to indicate that an image has been
+ * changed or unchanged since last upload. gl texture upload will
+ * set this value to false after uploading the texture.
+ * @method setModified
+ * @param {boolean} val sets whether or not the image has been
+ * modified.
+ * @private
+ */
+
+ },
+ {
+ key: 'setModified',
+ value: function setModified(val) {
+ this._modified = val; //enforce boolean?
+ } /**
+ * helper method for web GL mode to figure out if the image
+ * has been modified and might need to be re-uploaded to texture
+ * memory between frames.
+ * @method isModified
+ * @private
+ * @return {boolean} a boolean indicating whether or not the
+ * image has been updated or modified since last texture upload.
+ */
+
+ },
+ {
+ key: 'isModified',
+ value: function isModified() {
+ return this._modified;
+ } /**
+ * Saves the p5.Image object to a file.
+ * The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ *
+ * By default, calling `img.save()` will save the image as `untitled.png`.
+ *
+ * Calling `img.save()` with one argument, as in `img.save('photo.png')`,
+ * will set the image's filename and type together.
+ *
+ * Calling `img.save()` with two arguments, as in
+ * `image.save('photo', 'png')`, will set the image's filename and type
+ * separately.
+ *
+ * The image will only be downloaded as an animated GIF if the
+ * p5.Image object was loaded from a GIF file.
+ * See saveGif() to create new GIFs.
+ * @method save
+ * @param {String} filename filename. Defaults to 'untitled'.
+ * @param {String} [extension] file extension, either 'png' or 'jpg'.
+ * Defaults to 'png'.
+ * @example
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'save',
+ value: function save(filename, extension) {
+ if (this.gifProperties) {
+ _main.default.prototype.encodeAndDownloadGif(this, filename);
+ } else {
+ _main.default.prototype.saveCanvas(this.canvas, filename, extension);
+ }
+ } // GIF Section
+ /**
+ * Restarts an animated GIF at its first frame.
+ *
+ * @method reset
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function draw() {
+ * image(img, 0, 0);
+ *
+ * describe('An image of a mountain landscape.');
+ * }
+ *
+ * function keyPressed() {
+ * if (key === 's') {
+ * img.save();
+ * } else if (key === 'j') {
+ * img.save('rockies.jpg');
+ * } else if (key === 'p') {
+ * img.save('rockies', 'png');
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'reset',
+ value: function reset() {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ props.playing = true;
+ props.timeSinceStart = 0;
+ props.timeDisplayed = 0;
+ props.lastChangeTime = 0;
+ props.loopCount = 0;
+ props.displayIndex = 0;
+ this.drawingContext.putImageData(props.frames[0].image, 0, 0);
+ }
+ } /**
+ * Gets the index of the current frame in an animated GIF.
+ *
+ * @method getCurrentFrame
+ * @return {Number} index of the GIF's current frame.
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ *
+ * describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
+ * }
+ *
+ * function mousePressed() {
+ * gif.reset();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getCurrentFrame',
+ value: function getCurrentFrame() {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ return props.displayIndex % props.numFrames;
+ }
+ } /**
+ * Sets the current frame in an animated GIF.
+ *
+ * @method setFrame
+ * @param {Number} index index of the frame to display.
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * let index = gif.getCurrentFrame();
+ * image(gif, 0, 0);
+ * text(index, 10, 90);
+ *
+ * describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setFrame',
+ value: function setFrame(index) {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ if (index < props.numFrames && index >= 0) {
+ props.timeDisplayed = 0;
+ props.lastChangeTime = 0;
+ props.displayIndex = index;
+ this.drawingContext.putImageData(props.frames[index].image, 0, 0);
+ } else {
+ console.log('Cannot set GIF to a frame number that is higher than total number of frames or below zero.');
+ }
+ }
+ } /**
+ * Returns the number of frames in an animated GIF.
+ *
+ * @method numFrames
+ * @return {Number} number of frames in the GIF.
+ *
+ * @example
+ *
+ * let gif;
+ * let frameSlider;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * let maxFrame = gif.numFrames() - 1;
+ * frameSlider = createSlider(0, maxFrame);
+ * frameSlider.position(10, 80);
+ * frameSlider.size(80);
+ * }
+ *
+ * function draw() {
+ * let index = frameSlider.value();
+ * gif.setFrame(index);
+ * image(gif, 0, 0);
+ *
+ * describe('A cartoon eye looks around when a slider is moved.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'numFrames',
+ value: function numFrames() {
+ if (this.gifProperties) {
+ return this.gifProperties.numFrames;
+ }
+ } /**
+ * Plays an animated GIF that was paused with
+ * img.pause().
+ *
+ * @method play
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * image(gif, 0, 0);
+ * let total = gif.numFrames();
+ * let index = gif.getCurrentFrame();
+ * text(`${index} / ${total}`, 30, 90);
+ *
+ * describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'play',
+ value: function play() {
+ if (this.gifProperties) {
+ this.gifProperties.playing = true;
+ }
+ } /**
+ * Pauses an animated GIF. The GIF can be resumed by calling
+ * img.play().
+ *
+ * @method pause
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ *
+ * describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ * }
+ *
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'pause',
+ value: function pause() {
+ if (this.gifProperties) {
+ this.gifProperties.playing = false;
+ }
+ } /**
+ * Changes the delay between frames in an animated GIF.
+ *
+ * The second parameter, `index`, is optional. If provided, only the frame
+ * at `index` will have its delay modified. All other frames will keep
+ * their default delay.
+ *
+ * @method delay
+ * @param {Number} d delay in milliseconds between switching frames.
+ * @param {Number} [index] index of the frame that will have its delay modified.
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ *
+ * describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ * }
+ *
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let gifFast;
+ * let gifSlow;
+ *
+ * function preload() {
+ * gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * gifFast.resize(50, 50);
+ * gifSlow.resize(50, 50);
+ * gifFast.delay(10);
+ * gifSlow.delay(100);
+ * }
+ *
+ * function draw() {
+ * image(gifFast, 0, 0);
+ * image(gifSlow, 50, 0);
+ *
+ * describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'delay',
+ value: function delay(d, index) {
+ if (this.gifProperties) {
+ var props = this.gifProperties;
+ if (index < props.numFrames && index >= 0) {
+ props.frames[index].delay = d;
+ } else {
+ // change all frames
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = props.frames[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var frame = _step.value;
+ frame.delay = d;
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Image;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ './filters': 319,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 323: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.filter');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.filter');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var _filters = _interopRequireDefault(_dereq_('./filters'));
+ _dereq_('../color/p5.Color');
+ 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 Image
+ * @submodule Pixels
+ * @for p5
+ * @requires core
+ */
+ /**
+ * An array containing the color of each pixel on the canvas. Colors are
+ * stored as numbers representing red, green, blue, and alpha (RGBA) values.
+ * `pixels` is a one-dimensional array for performance reasons.
+ *
+ * Each pixel occupies four elements in the `pixels` array, one for each RGBA
+ * value. For example, the pixel at coordinates (0, 0) stores its RGBA values
+ * at `pixels[0]`, `pixels[1]`, `pixels[2]`, and `pixels[3]`, respectively.
+ * The next pixel at coordinates (1, 0) stores its RGBA values at `pixels[4]`,
+ * `pixels[5]`, `pixels[6]`, and `pixels[7]`. And so on. The `pixels` array
+ * for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.
+ *
+ * Some displays use several smaller pixels to set the color at a single
+ * point. The pixelDensity() function returns
+ * the pixel density of the canvas. High density displays often have a
+ * pixelDensity() of 2. On such a display, the
+ * `pixels` array for a 100×100 canvas has 200 × 200 × 4 =
+ * 160,000 elements.
+ *
+ * Accessing the RGBA values for a point on the canvas requires a little math
+ * as shown below. The loadPixels() function
+ * must be called before accessing the `pixels` array. The
+ * updatePixels() function must be called
+ * after any changes are made.
+ *
+ * @property {Number[]} pixels
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * gif.delay(3000, 67);
+ * }
+ *
+ * function draw() {
+ * image(gif, 0, 0);
+ *
+ * describe('An animated eye looking around. It pauses for three seconds while it looks down.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * loadPixels();
+ * let x = 50;
+ * let y = 50;
+ * let d = pixelDensity();
+ * for (let i = 0; i < d; i += 1) {
+ * for (let j = 0; j < d; j += 1) {
+ * let index = 4 * ((y * d + j) * width * d + (x * d + i));
+ * // Red.
+ * pixels[index] = 0;
+ * // Green.
+ * pixels[index + 1] = 0;
+ * // Blue.
+ * pixels[index + 2] = 0;
+ * // Alpha.
+ * pixels[index + 3] = 255;
+ * }
+ * }
+ * updatePixels();
+ *
+ * describe('A black dot in the middle of a gray rectangle.');
+ *
+ *
+ *
+ *
+ *
+ * loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * // Red.
+ * pixels[i] = 255;
+ * // Green.
+ * pixels[i + 1] = 0;
+ * // Blue.
+ * pixels[i + 2] = 0;
+ * // Alpha.
+ * pixels[i + 3] = 255;
+ * }
+ * updatePixels();
+ *
+ * describe('A red rectangle drawn above a gray rectangle.');
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.pixels = [
+ ];
+ /**
+ * Copies a region of pixels from one image to another. The `blendMode`
+ * parameter blends the images' colors to create different effects.
+ *
+ * @method blend
+ * @param {p5.Image} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ * @param {Constant} blendMode the blend mode. either
+ * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ *
+ * @example
+ *
+ * let pink = color(255, 102, 204);
+ * loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * pixels[i] = red(pink);
+ * pixels[i + 1] = green(pink);
+ * pixels[i + 2] = blue(pink);
+ * pixels[i + 3] = alpha(pink);
+ * }
+ * updatePixels();
+ *
+ * describe('A pink rectangle drawn above a gray rectangle.');
+ *
+ *
+ *
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method blend
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ * @param {Constant} blendMode
+ */
+ _main.default.prototype.blend = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('blend', args);
+ if (this._renderer) {
+ var _this$_renderer;
+ (_this$_renderer = this._renderer).blend.apply(_this$_renderer, args);
+ } else {
+ _main.default.Renderer2D.prototype.blend.apply(this, args);
+ }
+ };
+ /**
+ * Copies pixels from a source image to a region of the canvas. The source
+ * image can be the canvas itself or a p5.Image
+ * object. `copy()` will scale pixels from the source region if it isn't the
+ * same size as the destination region.
+ *
+ * @method copy
+ * @param {p5.Image|p5.Element} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ *
+ * @example
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method copy
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ */
+ _main.default.prototype.copy = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('copy', args);
+ var srcImage,
+ sx,
+ sy,
+ sw,
+ sh,
+ dx,
+ dy,
+ dw,
+ dh;
+ if (args.length === 9) {
+ srcImage = args[0];
+ sx = args[1];
+ sy = args[2];
+ sw = args[3];
+ sh = args[4];
+ dx = args[5];
+ dy = args[6];
+ dw = args[7];
+ dh = args[8];
+ } else if (args.length === 8) {
+ srcImage = this;
+ sx = args[0];
+ sy = args[1];
+ sw = args[2];
+ sh = args[3];
+ dx = args[4];
+ dy = args[5];
+ dw = args[6];
+ dh = args[7];
+ } else {
+ throw new Error('Signature not supported');
+ }
+ _main.default.prototype._copyHelper(this, srcImage, sx, sy, sw, sh, dx, dy, dw, dh);
+ };
+ _main.default.prototype._copyHelper = function (dstImage, srcImage, sx, sy, sw, sh, dx, dy, dw, dh) {
+ srcImage.loadPixels();
+ var s = srcImage.canvas.width / srcImage.width;
+ // adjust coord system for 3D when renderer
+ // ie top-left = -width/2, -height/2
+ var sxMod = 0;
+ var syMod = 0;
+ if (srcImage._renderer && srcImage._renderer.isP3D) {
+ sxMod = srcImage.width / 2;
+ syMod = srcImage.height / 2;
+ }
+ if (dstImage._renderer && dstImage._renderer.isP3D) {
+ _main.default.RendererGL.prototype.image.call(dstImage._renderer, srcImage, sx + sxMod, sy + syMod, sw, sh, dx, dy, dw, dh);
+ } else {
+ dstImage.drawingContext.drawImage(srcImage.canvas, s * (sx + sxMod), s * (sy + syMod), s * sw, s * sh, dx, dy, dw, dh);
+ }
+ };
+ /**
+ * Applies an image filter to the canvas. The preset options are:
+ *
+ * `INVERT`
+ * Inverts the colors in the image. No parameter is used.
+ *
+ * `GRAY`
+ * Converts the image to grayscale. No parameter is used.
+ *
+ * `THRESHOLD`
+ * Converts the image to black and white. Pixels with a grayscale value
+ * above a given threshold are converted to white. The rest are converted to
+ * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+ * value is specified, 0.5 is used.
+ *
+ * `OPAQUE`
+ * Sets the alpha channel to entirely opaque. No parameter is used.
+ *
+ * `POSTERIZE`
+ * Limits the number of colors in the image. Each color channel is limited to
+ * the number of colors specified. Values between 2 and 255 are valid, but
+ * results are most noticeable with lower values. The default value is 4.
+ *
+ * `BLUR`
+ * Blurs the image. The level of blurring is specified by a blur radius. Larger
+ * values increase the blur. The default value is 4. A gaussian blur is used
+ * in `P2D` mode. A box blur is used in `WEBGL` mode.
+ *
+ * `ERODE`
+ * Reduces the light areas. No parameter is used.
+ *
+ * `DILATE`
+ * Increases the light areas. No parameter is used.
+ *
+ * `filter()` uses WebGL in the background by default because it's faster.
+ * This can be disabled in `P2D` mode by adding a `false` argument, as in
+ * `filter(BLUR, false)`. This may be useful to keep computation off the GPU
+ * or to work around a lack of WebGL support.
+ *
+ * In `WEBGL` mode, `filter()` can also use custom shaders. See
+ * createFilterShader() for more
+ * information.
+ *
+ *
+ * @method filter
+ * @param {Constant} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
+ * POSTERIZE, BLUR, ERODE, DILATE or BLUR.
+ * @param {Number} [filterParam] parameter unique to each filter.
+ * @param {Boolean} [useWebGL] flag to control whether to use fast
+ * WebGL filters (GPU) or original image
+ * filters (CPU); defaults to `true`.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img);
+ * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+ * // Show copied region.
+ * stroke(255);
+ * noFill();
+ * square(7, 22, 10);
+ *
+ * describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(INVERT);
+ *
+ * describe('A blue brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(GRAY);
+ *
+ * describe('A brick wall drawn in grayscale.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(THRESHOLD);
+ *
+ * describe('A brick wall drawn in black and white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(OPAQUE);
+ *
+ * describe('A red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(POSTERIZE, 3);
+ *
+ * describe('An image of a red brick wall drawn with limited color palette.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(BLUR, 3);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(DILATE);
+ *
+ * describe('A red brick wall with bright lines between each brick.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(ERODE);
+ *
+ * describe('A red brick wall with faint lines between each brick.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method filter
+ * @param {Constant} filterType
+ * @param {Boolean} [useWebGL]
+ */
+ /**
+ * @method filter
+ * @param {p5.Shader} shaderFilter shader that's been loaded, with the
+ * frag shader using a `tex0` uniform.
+ */
+ _main.default.prototype.filter = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('filter', arguments);
+ var _parseFilterArgs = parseFilterArgs.apply(void 0, args),
+ shader = _parseFilterArgs.shader,
+ operation = _parseFilterArgs.operation,
+ value = _parseFilterArgs.value,
+ useWebGL = _parseFilterArgs.useWebGL; // when passed a shader, use it directly
+ if (shader) {
+ _main.default.RendererGL.prototype.filter.call(this._renderer, shader);
+ return;
+ } // when opting out of webgl, use old pixels method
+
+ if (!useWebGL && !this._renderer.isP3D) {
+ if (this.canvas !== undefined) {
+ _filters.default.apply(this.canvas, _filters.default[operation], value);
+ } else {
+ _filters.default.apply(this.elt, _filters.default[operation], value);
+ }
+ return;
+ }
+ if (!useWebGL && this._renderer.isP3D) {
+ console.warn('filter() with useWebGL=false is not supported in WEBGL');
+ } // when this is a webgl renderer, apply constant shader filter
+
+ if (this._renderer.isP3D) {
+ _main.default.RendererGL.prototype.filter.call(this._renderer, operation, value);
+ } // when this is P2D renderer, create/use hidden webgl renderer
+ else {
+ // create hidden webgl renderer if it doesn't exist
+ if (!this.filterGraphicsLayer) {
+ // the real _pInst is buried when this is a secondary p5.Graphics
+ var pInst = this._renderer._pInst instanceof _main.default.Graphics ? this._renderer._pInst._pInst : this._renderer._pInst;
+ // create secondary layer
+ this.filterGraphicsLayer = new _main.default.Graphics(this.width, this.height, constants.WEBGL, pInst);
+ } // copy p2d canvas contents to secondary webgl renderer
+ // dest
+
+ this.filterGraphicsLayer.copy( // src
+ this._renderer, // src coods
+ 0, 0, this.width, this.height, // dest coords
+ - this.width / 2, - this.height / 2, this.width, this.height);
+ // filter it with shaders
+ this.filterGraphicsLayer.filter(operation, value);
+ // copy secondary webgl renderer back to original p2d canvas
+ this._renderer._pInst.image(this.filterGraphicsLayer, 0, 0);
+ this.filterGraphicsLayer.clear(); // prevent feedback effects on p2d canvas
+ }
+ };
+ function parseFilterArgs() {
+ var _ref;
+ // args could be:
+ // - operation, value, [useWebGL]
+ // - operation, [useWebGL]
+ // - shader
+ var result = {
+ shader: undefined,
+ operation: undefined,
+ value: undefined,
+ useWebGL: true
+ };
+ if ((arguments.length <= 0 ? undefined : arguments[0]) instanceof _main.default.Shader) {
+ result.shader = arguments.length <= 0 ? undefined : arguments[0];
+ return result;
+ } else {
+ result.operation = arguments.length <= 0 ? undefined : arguments[0];
+ }
+ if (arguments.length > 1 && typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'number') {
+ result.value = arguments.length <= 1 ? undefined : arguments[1];
+ }
+ if ((_ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref]) === false) {
+ result.useWebGL = false;
+ }
+ return result;
+ } /**
+ * Gets a pixel or a region of pixels from the canvas.
+ *
+ * `get()` is easy to use but it's not as fast as
+ * pixels. Use pixels
+ * to read many pixel values.
+ *
+ * The version of `get()` with no parameters returns the entire canvas.
+ *
+ * The version of `get()` with two parameters interprets them as
+ * coordinates. It returns an array with the `[R, G, B, A]` values of the
+ * pixel at the given point.
+ *
+ * The version of `get()` with four parameters interprets them as coordinates
+ * and dimensions. It returns a subsection of the canvas as a
+ * p5.Image object. The first two parameters are the
+ * coordinates for the upper-left corner of the subsection. The last two
+ * parameters are the width and height of the subsection.
+ *
+ * Use p5.Image.get() to work directly with
+ * p5.Image objects.
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number} w width of the subsection to be returned.
+ * @param {Number} h height of the subsection to be returned.
+ * @return {p5.Image} subsection as a p5.Image object.
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * // Don't use WebGL.
+ * filter(BLUR, 3, false);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get();
+ * image(c, width / 2, 0);
+ *
+ * describe('Two identical mountain landscapes shown side-by-side.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get(50, 90);
+ * fill(c);
+ * noStroke();
+ * square(25, 25, 50);
+ *
+ * describe('A mountain landscape with an olive green square in its center.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method get
+ * @return {p5.Image} whole canvas as a p5.Image.
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of the pixel at (x, y) in array format `[R, G, B, A]`.
+ */
+
+ _main.default.prototype.get = function (x, y, w, h) {
+ var _this$_renderer2;
+ _main.default._validateParameters('get', arguments);
+ return (_this$_renderer2 = this._renderer).get.apply(_this$_renderer2, arguments);
+ };
+ /**
+ * Loads the current value of each pixel on the canvas into the
+ * pixels array. This
+ * function must be called before reading from or writing to
+ * pixels.
+ *
+ * @method loadPixels
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get(0, 0, width / 2, height / 2);
+ * image(c, width / 2, height / 2);
+ *
+ * describe('A mountain landscape drawn on top of another mountain landscape.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.loadPixels = function () {
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+ _main.default._validateParameters('loadPixels', args);
+ this._renderer.loadPixels();
+ };
+ /**
+ * Sets the color of a pixel or draws an image to the canvas.
+ *
+ * `set()` is easy to use but it's not as fast as
+ * pixels. Use pixels
+ * to set many pixel values.
+ *
+ * `set()` interprets the first two parameters as x- and y-coordinates. It
+ * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
+ * array, a p5.Color object, or a
+ * p5.Image object. If an image is passed, the first
+ * two parameters set the coordinates for the image's upper-left corner,
+ * regardless of the current imageMode().
+ *
+ * updatePixels() must be called after using
+ * `set()` for changes to appear.
+ *
+ * @method set
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number|Number[]|Object} c grayscale value | pixel array |
+ * p5.Color object | p5.Image to copy.
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0, width, height);
+ * let d = pixelDensity();
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ * loadPixels();
+ * for (let i = 0; i < halfImage; i += 1) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ * updatePixels();
+ *
+ * describe('Two identical images of mountain landscapes, one on top of the other.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * set(30, 20, 0);
+ * set(85, 20, 0);
+ * set(85, 75, 0);
+ * set(30, 75, 0);
+ * updatePixels();
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ *
+ *
+ *
+ *
+ *
+ * let black = color(0);
+ * set(30, 20, black);
+ * set(85, 20, black);
+ * set(85, 75, black);
+ * set(30, 75, black);
+ * updatePixels();
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ *
+ *
+ *
+ *
+ *
+ * for (let x = 0; x < width; x += 1) {
+ * for (let y = 0; y < height; y += 1) {
+ * let c = map(x, 0, width, 0, 255);
+ * set(x, y, c);
+ * }
+ * }
+ * updatePixels();
+ *
+ * describe('A horiztonal color gradient from black to white.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.set = function (x, y, imgOrCol) {
+ this._renderer.set(x, y, imgOrCol);
+ };
+ /**
+ * Updates the canvas with the RGBA values in the
+ * pixels array.
+ *
+ * `updatePixels()` only needs to be called after changing values in the
+ * pixels array. Such changes can be made directly
+ * after calling loadPixels() or by calling
+ * set().
+ *
+ * @method updatePixels
+ * @param {Number} [x] x-coordinate of the upper-left corner of region
+ * to update.
+ * @param {Number} [y] y-coordinate of the upper-left corner of region
+ * to update.
+ * @param {Number} [w] width of region to update.
+ * @param {Number} [h] height of region to update.
+ * @example
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * set(0, 0, img);
+ * updatePixels();
+ *
+ * describe('An image of a mountain landscape.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.updatePixels = function (x, y, w, h) {
+ _main.default._validateParameters('updatePixels', arguments);
+ // graceful fail - if loadPixels() or set() has not been called, pixel
+ // array will be empty, ignore call to updatePixels()
+ if (this.pixels.length === 0) {
+ return;
+ }
+ this._renderer.updatePixels(x, y, w, h);
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../color/p5.Color': 284,
+ '../core/constants': 286,
+ '../core/main': 298,
+ './filters': 319,
+ 'core-js/modules/es.array.filter': 173,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 324: [
+ 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.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.last-index-of');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.from-entries');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/web.url');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.last-index-of');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.from-entries');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.promise');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/web.url');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('whatwg-fetch');
+ _dereq_('es6-promise/auto');
+ var _fetchJsonp = _interopRequireDefault(_dereq_('fetch-jsonp'));
+ var _fileSaver = _interopRequireDefault(_dereq_('file-saver'));
+ _dereq_('../core/friendly_errors/validate_params');
+ _dereq_('../core/friendly_errors/file_errors');
+ _dereq_('../core/friendly_errors/fes_core');
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @module IO
+ * @submodule Input
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Loads a JSON file from a file or a URL, and returns an Object.
+ * Note that even if the JSON file contains an Array, an Object will be
+ * returned with index numbers as keys.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed. JSONP is supported via a polyfill and you
+ * can pass in as the second argument an object with definitions of the json
+ * callback following the syntax specified here.
+ *
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadJSON
+ * @param {String} path name of the file or url to load
+ * @param {Object} [jsonpOptions] options object for jsonp related settings
+ * @param {String} [datatype] "json" or "jsonp"
+ * @param {function} [callback] function to be executed after
+ * loadJSON() completes, data is passed
+ * in as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Object|Array} JSON data
+ * @example
+ *
+ * Calling loadJSON() inside preload() guarantees to complete the
+ * operation before setup() and draw() are called.
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0, width, height);
+ * let d = pixelDensity();
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ * loadPixels();
+ * for (let i = 0; i < halfImage; i += 1) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ * updatePixels();
+ *
+ * describe('Two identical images of mountain landscapes, one on top of the other.');
+ * }
+ *
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+ * 'summary/all_day.geojson';
+ * earthquakes = loadJSON(url);
+ * }
+ *
+ * function setup() {
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * describe(`50×50 ellipse that changes from black to white
+ * depending on the current humidity`);
+ * }
+ *
+ * function setup() {
+ * noLoop();
+ * let url =
+ 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+ * 'summary/all_day.geojson';
+ * loadJSON(url, drawEarthquake);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * describe(`50×50 ellipse that changes from black to white
+ * depending on the current humidity`);
+ * }
+ *
+ * function drawEarthquake(earthquakes) {
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * }
+ *
+ * let result;
+ * function preload() {
+ * result = loadStrings('assets/test.txt');
+ * }
+
+ * function setup() {
+ * background(200);
+ * text(random(result), 10, 10, 80, 80);
+ * describe(`randomly generated text from a file,
+ * for example "i smell like butter"`);
+ * }
+ *
+ * function setup() {
+ * loadStrings('assets/test.txt', pickString);
+ * describe(`randomly generated text from a file,
+ * for example "i have three feet"`);
+ * }
+ *
+ * function pickString(result) {
+ * background(200);
+ * text(random(result), 10, 10, 80, 80);
+ * }
+ *
+ *
+ */
+ _main.default.prototype.loadTable = function (path) {
+ // p5._validateParameters('loadTable', arguments);
+ var callback;
+ var errorCallback;
+ var options = [
+ ];
+ var header = false;
+ var ext = path.substring(path.lastIndexOf('.') + 1, path.length);
+ var sep;
+ if (ext === 'csv') {
+ sep = ',';
+ } else if (ext === 'ssv') {
+ sep = ';';
+ } else if (ext === 'tsv') {
+ sep = '\t';
+ }
+ for (var i = 1; i < arguments.length; i++) {
+ if (typeof arguments[i] === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arguments[i];
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arguments[i];
+ }
+ } else if (typeof arguments[i] === 'string') {
+ options.push(arguments[i]);
+ if (arguments[i] === 'header') {
+ header = true;
+ }
+ if (arguments[i] === 'csv') {
+ sep = ',';
+ } else if (arguments[i] === 'ssv') {
+ sep = ';';
+ } else if (arguments[i] === 'tsv') {
+ sep = '\t';
+ }
+ }
+ }
+ var t = new _main.default.Table();
+ var self = this;
+ this.httpDo(path, 'GET', 'table', function (resp) {
+ var state = {
+ };
+ // define constants
+ var PRE_TOKEN = 0,
+ MID_TOKEN = 1,
+ POST_TOKEN = 2,
+ POST_RECORD = 4;
+ var QUOTE = '"',
+ CR = '\r',
+ LF = '\n';
+ var records = [
+ ];
+ var offset = 0;
+ var currentRecord = null;
+ var currentChar;
+ var tokenBegin = function tokenBegin() {
+ state.currentState = PRE_TOKEN;
+ state.token = '';
+ };
+ var tokenEnd = function tokenEnd() {
+ currentRecord.push(state.token);
+ tokenBegin();
+ };
+ var recordBegin = function recordBegin() {
+ state.escaped = false;
+ currentRecord = [
+ ];
+ tokenBegin();
+ };
+ var recordEnd = function recordEnd() {
+ state.currentState = POST_RECORD;
+ records.push(currentRecord);
+ currentRecord = null;
+ };
+ for (; ; ) {
+ currentChar = resp[offset++];
+ // EOF
+ if (currentChar == null) {
+ if (state.escaped) {
+ throw new Error('Unclosed quote in file.');
+ }
+ if (currentRecord) {
+ tokenEnd();
+ recordEnd();
+ break;
+ }
+ }
+ if (currentRecord === null) {
+ recordBegin();
+ } // Handle opening quote
+
+ if (state.currentState === PRE_TOKEN) {
+ if (currentChar === QUOTE) {
+ state.escaped = true;
+ state.currentState = MID_TOKEN;
+ continue;
+ }
+ state.currentState = MID_TOKEN;
+ } // mid-token and escaped, look for sequences and end quote
+
+ if (state.currentState === MID_TOKEN && state.escaped) {
+ if (currentChar === QUOTE) {
+ if (resp[offset] === QUOTE) {
+ state.token += QUOTE;
+ offset++;
+ } else {
+ state.escaped = false;
+ state.currentState = POST_TOKEN;
+ }
+ } else if (currentChar === CR) {
+ continue;
+ } else {
+ state.token += currentChar;
+ }
+ continue;
+ } // fall-through: mid-token or post-token, not escaped
+
+ if (currentChar === CR) {
+ if (resp[offset] === LF) {
+ offset++;
+ }
+ tokenEnd();
+ recordEnd();
+ } else if (currentChar === LF) {
+ tokenEnd();
+ recordEnd();
+ } else if (currentChar === sep) {
+ tokenEnd();
+ } else if (state.currentState === MID_TOKEN) {
+ state.token += currentChar;
+ }
+ } // set up column names
+
+ if (header) {
+ t.columns = records.shift();
+ } else {
+ for (var _i2 = 0; _i2 < records[0].length; _i2++) {
+ t.columns[_i2] = 'null';
+ }
+ }
+ var row;
+ for (var _i3 = 0; _i3 < records.length; _i3++) {
+ //Handles row of 'undefined' at end of some CSVs
+ if (records[_i3].length === 1) {
+ if (records[_i3][0] === 'undefined' || records[_i3][0] === '') {
+ continue;
+ }
+ }
+ row = new _main.default.TableRow();
+ row.arr = records[_i3];
+ row.obj = makeObject(records[_i3], t.columns);
+ t.addRow(row);
+ }
+ if (typeof callback === 'function') {
+ callback(t);
+ }
+ self._decrementPreload();
+ }, function (err) {
+ // Error handling
+ _main.default._friendlyFileLoadError(2, path);
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ console.error(err);
+ }
+ });
+ return t;
+ };
+ // helper function to turn a row into a JSON object
+ function makeObject(row, headers) {
+ headers = headers || [
+ ];
+ if (typeof headers === 'undefined') {
+ for (var j = 0; j < row.length; j++) {
+ headers[j.toString()] = j;
+ }
+ }
+ return Object.fromEntries(headers.map(function (key, i) {
+ return [key,
+ row[i]];
+ }));
+ } /**
+ * Reads the contents of a file and creates an XML object with its values.
+ * If the name of the file is used as the parameter, as in the above example,
+ * the file must be located in the sketch directory/folder.
+ *
+ * Alternatively, the file maybe be loaded from anywhere on the local
+ * computer using an absolute path (something that starts with / on Unix and
+ * Linux, or a drive letter on Windows), or the filename parameter can be a
+ * URL for a file found on a network.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed. Calling loadXML() inside preload()
+ * guarantees to complete the operation before setup() and draw() are called.
+ *
+ * Outside of preload(), you may supply a callback function to handle the
+ * object.
+ *
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadXML
+ * @param {String} filename name of the file or URL to load
+ * @param {function} [callback] function to be executed after loadXML()
+ * completes, XML object is passed in as
+ * first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Object} XML object containing data
+ * @example
+ *
+ * // Given the following CSV file called "mammals.csv"
+ * // located in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * //the file can be remote
+ * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+ * // "csv", "header");
+ * }
+ *
+ * function setup() {
+ * //count the columns
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ *
+ * print(table.getColumn('name'));
+ * //["Goat", "Leopard", "Zebra"]
+ *
+ * //cycle through the table
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(table.getString(r, c));
+ * }
+ * describe(`randomly generated text from a file,
+ * for example "i smell like butter"`);
+ * }
+ *
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < children.length; i++) {
+ * let id = children[i].getNum('id');
+ * let coloring = children[i].getString('species');
+ * let name = children[i].getContent();
+ * print(id + ', ' + coloring + ', ' + name);
+ * }
+ * describe('no image displayed');
+ * }
+ *
+ * // Sketch prints:
+ * // 0, Capra hircus, Goat
+ * // 1, Panthera pardus, Leopard
+ * // 2, Equus zebra, Zebra
+ *
+ * let data;
+ *
+ * function preload() {
+ * data = loadBytes('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * for (let i = 0; i < 5; i++) {
+ * console.log(data.bytes[i].toString(16));
+ * }
+ * describe('no image displayed');
+ * }
+ * httpDo(path, 'GET'). The 'binary' datatype will return
+ * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+ * which can be used to initialize typed arrays (such as Uint8Array).
+ *
+ * @method httpGet
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "binary", "arrayBuffer",
+ * "xml", or "text"
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpGet() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ * @example
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+ * 'format=geojson&limit=1&orderby=time';
+ * httpGet(url, 'jsonp', false, function(response) {
+ * // when the HTTP request completes, populate the variable that holds the
+ * // earthquake data used in the visualization.
+ * earthquakes = response;
+ * });
+ * }
+ *
+ * function draw() {
+ * if (!earthquakes) {
+ * // Wait until the earthquake data has loaded before drawing.
+ * return;
+ * }
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * noLoop();
+ * }
+ * httpDo(path, 'POST').
+ *
+ * @method httpPost
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "xml", or "text".
+ * If omitted, httpPost() will guess.
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpPost() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Examples use jsonplaceholder.typicode.com for a Mock Data API
+ *
+ * let url = 'https://jsonplaceholder.typicode.com/posts';
+ * let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * }
+ *
+ * function mousePressed() {
+ * httpPost(url, 'json', postData, function(result) {
+ * strokeWeight(2);
+ * text(result.body, mouseX, mouseY);
+ * });
+ * }
+ *
+ *
+ * let url = 'ttps://invalidURL'; // A bad URL that will cause errors
+ * let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * }
+ *
+ * function mousePressed() {
+ * httpPost(
+ * url,
+ * 'json',
+ * postData,
+ * function(result) {
+ * // ... won't be called
+ * },
+ * function(error) {
+ * strokeWeight(2);
+ * text(error.toString(), mouseX, mouseY);
+ * }
+ * );
+ * }
+ * + * For more advanced use, you may also pass in the path as the first argument + * and a object as the second argument, the signature follows the one specified + * in the Fetch API specification. + * This method is suitable for fetching files up to size of 64MB when "GET" is used. + * + * @method httpDo + * @param {String} path name of the file or url to load + * @param {String} [method] either "GET", "POST", or "PUT", + * defaults to "GET" + * @param {String} [datatype] "json", "jsonp", "xml", or "text" + * @param {Object} [data] param data passed sent with request + * @param {function} [callback] function to be executed after + * httpGet() completes, data is passed in + * as first argument + * @param {function} [errorCallback] function to be executed if + * there is an error, response is passed + * in as first argument + * @return {Promise} A promise that resolves with the data when the operation + * completes successfully or rejects with the error after + * one occurs. + * + * @example + *
+ *
+ */
+ /**
+ * @method httpDo
+ * @param {String} path
+ * @param {Object} options Request object options as documented in the
+ * "fetch" API
+ * reference
+ * @param {function} [callback]
+ * @param {function} [errorCallback]
+ * @return {Promise}
+ */
+ _main.default.prototype.httpDo = function () {
+ var type;
+ var callback;
+ var errorCallback;
+ var request;
+ var promise;
+ var jsonpOptions = {
+ };
+ var cbCount = 0;
+ var contentType = 'text/plain';
+ // Trim the callbacks off the end to get an idea of how many arguments are passed
+ for (var i = arguments.length - 1; i > 0; i--) {
+ if (typeof (i < 0 || arguments.length <= i ? undefined : arguments[i]) === 'function') {
+ cbCount++;
+ } else {
+ break;
+ }
+ } // The number of arguments minus callbacks
+
+ var argsCount = arguments.length - cbCount;
+ var path = arguments.length <= 0 ? undefined : arguments[0];
+ if (argsCount === 2 && typeof path === 'string' && _typeof(arguments.length <= 1 ? undefined : arguments[1]) === 'object') {
+ // Intended for more advanced use, pass in Request parameters directly
+ request = new Request(path, arguments.length <= 1 ? undefined : arguments[1]);
+ callback = arguments.length <= 2 ? undefined : arguments[2];
+ errorCallback = arguments.length <= 3 ? undefined : arguments[3];
+ } else {
+ // Provided with arguments
+ var method = 'GET';
+ var data;
+ for (var j = 1; j < arguments.length; j++) {
+ var a = j < 0 || arguments.length <= j ? undefined : arguments[j];
+ if (typeof a === 'string') {
+ if (a === 'GET' || a === 'POST' || a === 'PUT' || a === 'DELETE') {
+ method = a;
+ } else if (a === 'json' || a === 'jsonp' || a === 'binary' || a === 'arrayBuffer' || a === 'xml' || a === 'text' || a === 'table') {
+ type = a;
+ } else {
+ data = a;
+ }
+ } else if (typeof a === 'number') {
+ data = a.toString();
+ } else if (_typeof(a) === 'object') {
+ if (a.hasOwnProperty('jsonpCallback') || a.hasOwnProperty('jsonpCallbackFunction')) {
+ for (var attr in a) {
+ jsonpOptions[attr] = a[attr];
+ }
+ } else if (a instanceof _main.default.XML) {
+ data = a.serialize();
+ contentType = 'application/xml';
+ } else {
+ data = JSON.stringify(a);
+ contentType = 'application/json';
+ }
+ } else if (typeof a === 'function') {
+ if (!callback) {
+ callback = a;
+ } else {
+ errorCallback = a;
+ }
+ }
+ }
+ var headers = method === 'GET' ? new Headers() : new Headers({
+ 'Content-Type': contentType
+ });
+ request = new Request(path, {
+ method: method,
+ mode: 'cors',
+ body: data,
+ headers: headers
+ });
+ } // do some sort of smart type checking
+
+ if (!type) {
+ if (path.includes('json')) {
+ type = 'json';
+ } else if (path.includes('xml')) {
+ type = 'xml';
+ } else {
+ type = 'text';
+ }
+ }
+ if (type === 'jsonp') {
+ promise = (0, _fetchJsonp.default) (path, jsonpOptions);
+ } else {
+ promise = fetch(request);
+ }
+ promise = promise.then(function (res) {
+ if (!res.ok) {
+ var err = new Error(res.body);
+ err.status = res.status;
+ err.ok = false;
+ throw err;
+ } else {
+ var fileSize = 0;
+ if (type !== 'jsonp') {
+ fileSize = res.headers.get('content-length');
+ }
+ if (fileSize && fileSize > 64000000) {
+ _main.default._friendlyFileLoadError(7, path);
+ }
+ switch (type) {
+ case 'json':
+ case 'jsonp':
+ return res.json();
+ case 'binary':
+ return res.blob();
+ case 'arrayBuffer':
+ return res.arrayBuffer();
+ case 'xml':
+ return res.text().then(function (text) {
+ var parser = new DOMParser();
+ var xml = parser.parseFromString(text, 'text/xml');
+ return new _main.default.XML(xml.documentElement);
+ });
+ default:
+ return res.text();
+ }
+ }
+ });
+ promise.then(callback || function () {
+ });
+ promise.catch(errorCallback || console.error);
+ return promise;
+ };
+ /**
+ * @module IO
+ * @submodule Output
+ * @for p5
+ */
+ window.URL = window.URL || window.webkitURL;
+ // private array of p5.PrintWriter objects
+ _main.default.prototype._pWriters = [
+ ];
+ /**
+ * @method createWriter
+ * @param {String} name name of the file to be created
+ * @param {String} [extension]
+ * @return {p5.PrintWriter}
+ * @example
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ *
+ * // displays an animation of all USGS earthquakes
+ * let earthquakes;
+ * let eqFeatureIndex = 0;
+ *
+ * function preload() {
+ * let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+ * httpDo(
+ * url,
+ * {
+ * method: 'GET',
+ * // Other Request options, like special headers for apis
+ * headers: { authorization: 'Bearer secretKey' }
+ * },
+ * function(res) {
+ * earthquakes = res;
+ * }
+ * );
+ * }
+ *
+ * function draw() {
+ * // wait until the data is loaded
+ * if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+ * return;
+ * }
+ * clear();
+ *
+ * let feature = earthquakes.features[eqFeatureIndex];
+ * let mag = feature.properties.mag;
+ * let rad = mag / 11 * ((width + height) / 2);
+ * fill(255, 0, 0, 100);
+ * ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+ *
+ * if (eqFeatureIndex >= earthquakes.features.length) {
+ * eqFeatureIndex = 0;
+ * } else {
+ * eqFeatureIndex += 1;
+ * }
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createWriter = function (name, extension) {
+ var newPW;
+ // check that it doesn't already exist
+ for (var i in _main.default.prototype._pWriters) {
+ if (_main.default.prototype._pWriters[i].name === name) {
+ // if a p5.PrintWriter w/ this name already exists...
+ // return p5.prototype._pWriters[i]; // return it w/ contents intact.
+ // or, could return a new, empty one with a unique name:
+ newPW = new _main.default.PrintWriter(name + this.millis(), extension);
+ _main.default.prototype._pWriters.push(newPW);
+ return newPW;
+ }
+ }
+ newPW = new _main.default.PrintWriter(name, extension);
+ _main.default.prototype._pWriters.push(newPW);
+ return newPW;
+ };
+ /**
+ * @class p5.PrintWriter
+ * @param {String} filename
+ * @param {String} [extension]
+ */
+ _main.default.PrintWriter = function (filename, extension) {
+ var self = this;
+ this.name = filename;
+ this.content = '';
+ //Changed to write because it was being overloaded by function below.
+ /**
+ * Writes data to the PrintWriter stream
+ * @method write
+ * @param {Array} data all data to be written by the PrintWriter
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * const writer = createWriter('squares.txt');
+ * for (let i = 0; i < 10; i++) {
+ * writer.print(i * i);
+ * }
+ * writer.close();
+ * writer.clear();
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * // creates a file called 'newFile.txt'
+ * let writer = createWriter('newFile.txt');
+ * // write 'Hello world!'' to the file
+ * writer.write(['Hello world!']);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ *
+ * // creates a file called 'newFile2.txt'
+ * let writer = createWriter('newFile2.txt');
+ * // write 'apples,bananas,123' to the file
+ * writer.write(['apples', 'bananas', 123]);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ *
+ * // creates a file called 'newFile3.txt'
+ * let writer = createWriter('newFile3.txt');
+ * // write 'My name is: Teddy' to the file
+ * writer.write('My name is:');
+ * writer.write(' Teddy');
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ */
+ this.write = function (data) {
+ this.content += data;
+ };
+ /**
+ * Writes data to the PrintWriter stream, and adds a new line at the end
+ * @method print
+ * @param {Array} data all data to be printed by the PrintWriter
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * button = createButton('SAVE FILE');
+ * button.position(21, 40);
+ * button.mousePressed(createFile);
+ * }
+ *
+ * function createFile() {
+ * // creates a file called 'newFile.txt'
+ * let writer = createWriter('newFile.txt');
+ * // write 'Hello world!'' to the file
+ * writer.write(['Hello world!']);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ * }
+ *
+ *
+ *
+ *
+ * // creates a file called 'newFile.txt'
+ * let writer = createWriter('newFile.txt');
+ * // creates a file containing
+ * // My name is:
+ * // Teddy
+ * writer.print('My name is:');
+ * writer.print('Teddy');
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ */
+ this.print = function (data) {
+ this.content += ''.concat(data, '\n');
+ };
+ /**
+ * Clears the data already written to the PrintWriter object
+ * @method clear
+ * @example
+ *
+ * let writer;
+ *
+ * function setup() {
+ * createCanvas(400, 400);
+ * // create a PrintWriter
+ * writer = createWriter('newFile.txt');
+ * }
+ *
+ * function draw() {
+ * writer.print([mouseX, mouseY]);
+ * }
+ *
+ * function mouseClicked() {
+ * writer.close();
+ * }
+ *
+ *
+ * // create writer object
+ * let writer = createWriter('newFile.txt');
+ * writer.write(['clear me']);
+ * // clear writer object here
+ * writer.clear();
+ * // close writer
+ * writer.close();
+ *
+ *
+ *
+ */
+ this.clear = function () {
+ this.content = '';
+ };
+ /**
+ * Closes the PrintWriter
+ * @method close
+ * @example
+ *
+ * function setup() {
+ * button = createButton('CLEAR ME');
+ * button.position(21, 40);
+ * button.mousePressed(createFile);
+ * }
+ *
+ * function createFile() {
+ * let writer = createWriter('newFile.txt');
+ * writer.write(['clear me']);
+ * writer.clear();
+ * writer.close();
+ * }
+ *
+ *
+ *
+ *
+ * // create a file called 'newFile.txt'
+ * let writer = createWriter('newFile.txt');
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ *
+ *
+ */
+ this.close = function () {
+ // convert String to Array for the writeFile Blob
+ var arr = [
+ ];
+ arr.push(this.content);
+ _main.default.prototype.writeFile(arr, filename, extension);
+ // remove from _pWriters array and delete self
+ for (var i in _main.default.prototype._pWriters) {
+ if (_main.default.prototype._pWriters[i].name === this.name) {
+ // remove from _pWriters array
+ _main.default.prototype._pWriters.splice(i, 1);
+ }
+ }
+ self.clear();
+ self = {
+ };
+ };
+ };
+ /**
+ * @module IO
+ * @submodule Output
+ * @for p5
+ */
+ // object, filename, options --> saveJSON, saveStrings,
+ // filename, [extension] [canvas] --> saveImage
+ /**
+ * Saves a given element(image, text, json, csv, wav, or html) to the client's
+ * computer. The first parameter can be a pointer to element we want to save.
+ * The element can be one of p5.Element,an Array of
+ * Strings, an Array of JSON, a JSON object, a p5.Table
+ * , a p5.Image, or a p5.SoundFile (requires
+ * p5.sound). The second parameter is a filename (including extension).The
+ * third parameter is for options specific to this type of object. This method
+ * will save a file that fits the given parameters.
+ * If it is called without specifying an element, by default it will save the
+ * whole canvas as an image file. You can optionally specify a filename as
+ * the first parameter in such a case.
+ * **Note that it is not recommended to
+ * call this method within draw, as it will open a new save dialog on every
+ * render.**
+ *
+ * @method save
+ * @param {Object|String} [objectOrFilename] If filename is provided, will
+ * save canvas as an image with
+ * either png or jpg extension
+ * depending on the filename.
+ * If object is provided, will
+ * save depending on the object
+ * and filename (see examples
+ * above).
+ * @param {String} [filename] If an object is provided as the first
+ * parameter, then the second parameter
+ * indicates the filename,
+ * and should include an appropriate
+ * file extension (see examples above).
+ * @param {Boolean|String} [options] Additional options depend on
+ * filetype. For example, when saving JSON,
+ *
+ * // create a file called 'newFile2.txt'
+ * let writer = createWriter('newFile2.txt');
+ * // write some data to the file
+ * writer.write([100, 101, 102]);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ * true indicates that the
+ * output will be optimized for filesize,
+ * rather than readability.
+ *
+ * @example
+ *
+ * // Saves the canvas as an image
+ * cnv = createCanvas(300, 300);
+ * save(cnv, 'myCanvas.jpg');
+ *
+ * // Saves the canvas as an image by default
+ * save('myCanvas.jpg');
+ * describe('An example for saving a canvas as an image.');
+ *
+ * // Saves p5.Image as an image
+ * img = createImage(10, 10);
+ * save(img, 'myImage.png');
+ * describe('An example for saving a p5.Image element as an image.');
+ *
+ * // Saves p5.Renderer object as an image
+ * obj = createGraphics(100, 100);
+ * save(obj, 'myObject.png');
+ * describe('An example for saving a p5.Renderer element.');
+ *
+ * let myTable = new p5.Table();
+ * // Saves table as html file
+ * save(myTable, 'myTable.html');
+ *
+ * // Comma Separated Values
+ * save(myTable, 'myTable.csv');
+ *
+ * // Tab Separated Values
+ * save(myTable, 'myTable.tsv');
+ *
+ * describe(`An example showing how to save a table in formats of
+ * HTML, CSV and TSV.`);
+ *
+ * let myJSON = { a: 1, b: true };
+ *
+ * // Saves pretty JSON
+ * save(myJSON, 'my.json');
+ *
+ * // Optimizes JSON filesize
+ * save(myJSON, 'my.json', true);
+ *
+ * describe('An example for saving JSON to a txt file with some extra arguments.');
+ *
+ * // Saves array of strings to text file with line breaks after each item
+ * let arrayOfStrings = ['a', 'b'];
+ * save(arrayOfStrings, 'my.txt');
+ * describe(`An example for saving an array of strings to text file
+ * with line breaks.`);
+ *
+ * let json = {}; // new JSON Object
+ *
+ * json.id = 0;
+ * json.species = 'Panthera leo';
+ * json.name = 'Lion';
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * describe('no image displayed');
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * saveJSON(json, 'lion.json');
+ * }
+ * }
+ *
+ * // saves the following to a file called "lion.json":
+ * // {
+ * // "id": 0,
+ * // "species": "Panthera leo",
+ * // "name": "Lion"
+ * // }
+ *
+ * let words = 'apple bear cat dog';
+ *
+ * // .split() outputs an Array
+ * let list = split(words, ' ');
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * describe('no image displayed');
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * saveStrings(list, 'nouns.txt');
+ * }
+ * }
+ *
+ * // Saves the following to a file called 'nouns.txt':
+ * //
+ * // apple
+ * // bear
+ * // cat
+ * // dog
+ *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('id');
+ * table.addColumn('species');
+ * table.addColumn('name');
+ *
+ * let newRow = table.addRow();
+ * newRow.setNum('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Panthera leo');
+ * newRow.setString('name', 'Lion');
+ *
+ * // To save, un-comment next line then click 'run'
+ * // saveTable(table, 'new.csv');
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Saves the following to a file called 'new.csv':
+ * // id,species,name
+ * // 0,Panthera leo,Lion
+ * | '.concat(e)); + pWriter.print(' | '); + } + pWriter.print('
| '.concat(htmlEntry)); + pWriter.print(' | '); + } + pWriter.print('
-
+ *
- csv - parse the table as comma-separated values + *
- tsv - parse the table as tab-separated values + *
- header - this table has a header (title) row + *
+ *
+ */
+ function _class(rows) {
+ _classCallCheck(this, _class);
+ this.columns = [
+ ];
+ /**
+ * An array containing the p5.TableRow objects that make up the
+ * rows of the table. The same result as calling getRows()
+ * @property rows {p5.TableRow[]}
+ */
+ this.rows = [
+ ];
+ } /**
+ * Use addRow() to add a new row of data to a p5.Table object. By default,
+ * an empty row is created. Typically, you would store a reference to
+ * the new row in a TableRow object (see newRow in the example above),
+ * and then set individual values using set().
+ *
+ * If a p5.TableRow object is included as a parameter, then that row is
+ * duplicated and added to the table.
+ *
+ * @method addRow
+ * @param {p5.TableRow} [row] row to be added to the table
+ * @return {p5.TableRow} the row that was added
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //print the column names
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print('column ' + c + ' is named ' + table.columns[c]);
+ * }
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'addRow',
+ value: function addRow(row) {
+ // make sure it is a valid TableRow
+ var r = row || new _main.default.TableRow();
+ if (typeof r.arr === 'undefined' || typeof r.obj === 'undefined') {
+ //r = new p5.prototype.TableRow(r);
+ throw new Error('invalid TableRow: '.concat(r));
+ }
+ r.table = this;
+ this.rows.push(r);
+ return r;
+ } /**
+ * Removes a row from the table object.
+ *
+ * @method removeRow
+ * @param {Integer} id ID number of the row to remove
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'removeRow',
+ value: function removeRow(id) {
+ this.rows[id].table = null; // remove reference to table
+ var chunk = this.rows.splice(id + 1, this.rows.length);
+ this.rows.pop();
+ this.rows = this.rows.concat(chunk);
+ } /**
+ * Returns a reference to the specified p5.TableRow. The reference
+ * can then be used to get and set values of the selected row.
+ *
+ * @method getRow
+ * @param {Integer} rowID ID number of the row to get
+ * @return {p5.TableRow} p5.TableRow object
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //remove the first row
+ * table.removeRow(0);
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getRow',
+ value: function getRow(r) {
+ return this.rows[r];
+ } /**
+ * Gets all rows from the table. Returns an array of p5.TableRows.
+ *
+ * @method getRows
+ * @return {p5.TableRow[]} Array of p5.TableRows
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let row = table.getRow(1);
+ * //print it column by column
+ * //note: a row is an object, not an array
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(row.getString(c));
+ * }
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getRows',
+ value: function getRows() {
+ return this.rows;
+ } /**
+ * Finds the first row in the Table that contains the value
+ * provided, and returns a reference to that row. Even if
+ * multiple rows are possible matches, only the first matching
+ * row is returned. The column to search may be specified by
+ * either its ID or title.
+ *
+ * @method findRow
+ * @param {String} value The value to match
+ * @param {Integer|String} column ID number or title of the
+ * column to search
+ * @return {p5.TableRow}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ *
+ * //warning: rows is an array of objects
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'findRow',
+ value: function findRow(value, column) {
+ // try the Object
+ if (typeof column === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column] === value) {
+ return this.rows[i];
+ }
+ }
+ } else {
+ // try the Array
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column] === value) {
+ return this.rows[j];
+ }
+ }
+ } // otherwise...
+
+ return null;
+ } /**
+ * Finds the rows in the Table that contain the value
+ * provided, and returns references to those rows. Returns an
+ * Array, so for must be used to iterate through all the rows,
+ * as shown in the example above. The column to search may be
+ * specified by either its ID or title.
+ *
+ * @method findRows
+ * @param {String} value The value to match
+ * @param {Integer|String} column ID number or title of the
+ * column to search
+ * @return {p5.TableRow[]} An Array of TableRow objects
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //find the animal named zebra
+ * let row = table.findRow('Zebra', 'name');
+ * //find the corresponding species
+ * print(row.getString('species'));
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'findRows',
+ value: function findRows(value, column) {
+ var ret = [
+ ];
+ if (typeof column === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column] === value) {
+ ret.push(this.rows[i]);
+ }
+ }
+ } else {
+ // try the Array
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column] === value) {
+ ret.push(this.rows[j]);
+ }
+ }
+ }
+ return ret;
+ } /**
+ * Finds the first row in the Table that matches the regular
+ * expression provided, and returns a reference to that row.
+ * Even if multiple rows are possible matches, only the first
+ * matching row is returned. The column to search may be
+ * specified by either its ID or title.
+ *
+ * @method matchRow
+ * @param {String|RegExp} regexp The regular expression to match
+ * @param {String|Integer} column The column ID (number) or
+ * title (string)
+ * @return {p5.TableRow} TableRow object
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add another goat
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Scape Goat');
+ * newRow.setString('name', 'Goat');
+ *
+ * //find the rows containing animals named Goat
+ * let rows = table.findRows('Goat', 'name');
+ * print(rows.length + ' Goats found');
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'matchRow',
+ value: function matchRow(regexp, column) {
+ if (typeof column === 'number') {
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column].match(regexp)) {
+ return this.rows[j];
+ }
+ }
+ } else {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column].match(regexp)) {
+ return this.rows[i];
+ }
+ }
+ }
+ return null;
+ } /**
+ * Finds the rows in the Table that match the regular expression provided,
+ * and returns references to those rows. Returns an array, so for must be
+ * used to iterate through all the rows, as shown in the example. The
+ * column to search may be specified by either its ID or title.
+ *
+ * @method matchRows
+ * @param {String} regexp The regular expression to match
+ * @param {String|Integer} [column] The column ID (number) or
+ * title (string)
+ * @return {p5.TableRow[]} An Array of TableRow objects
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //Search using specified regex on a given column, return TableRow object
+ * let mammal = table.matchRow(new RegExp('ant'), 1);
+ * print(mammal.getString(1));
+ * //Output "Panthera pardus"
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'matchRows',
+ value: function matchRows(regexp, column) {
+ var ret = [
+ ];
+ if (typeof column === 'number') {
+ for (var j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column].match(regexp)) {
+ ret.push(this.rows[j]);
+ }
+ }
+ } else {
+ for (var i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column].match(regexp)) {
+ ret.push(this.rows[i]);
+ }
+ }
+ }
+ return ret;
+ } /**
+ * Retrieves all values in the specified column, and returns them
+ * as an array. The column may be specified by either its ID or title.
+ *
+ * @method getColumn
+ * @param {String|Number} column String or Number of the column to return
+ * @return {Array} Array of column values
+ *
+ * @example
+ *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', 'Lion');
+ * newRow.setString('type', 'Mammal');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Snake');
+ * newRow.setString('type', 'Reptile');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Mosquito');
+ * newRow.setString('type', 'Insect');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Lizard');
+ * newRow.setString('type', 'Reptile');
+ *
+ * let rows = table.matchRows('R.*', 'type');
+ * for (let i = 0; i < rows.length; i++) {
+ * print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
+ * }
+ * }
+ * // Sketch prints:
+ * // Snake: Reptile
+ * // Lizard: Reptile
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getColumn',
+ value: function getColumn(value) {
+ var ret = [
+ ];
+ if (typeof value === 'string') {
+ for (var i = 0; i < this.rows.length; i++) {
+ ret.push(this.rows[i].obj[value]);
+ }
+ } else {
+ for (var j = 0; j < this.rows.length; j++) {
+ ret.push(this.rows[j].arr[value]);
+ }
+ }
+ return ret;
+ } /**
+ * Removes all rows from a Table. While all rows are removed,
+ * columns and column titles are maintained.
+ *
+ * @method clearRows
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //getColumn returns an array that can be printed directly
+ * print(table.getColumn('species'));
+ * //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'clearRows',
+ value: function clearRows() {
+ delete this.rows;
+ this.rows = [
+ ];
+ } /**
+ * Use addColumn() to add a new column to a Table object.
+ * Typically, you will want to specify a title, so the column
+ * may be easily referenced later by name. (If no title is
+ * specified, the new column's title will be null.)
+ *
+ * @method addColumn
+ * @param {String} [title] title of the given column
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.clearRows();
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'addColumn',
+ value: function addColumn(title) {
+ var t = title || null;
+ this.columns.push(t);
+ } /**
+ * Returns the total number of columns in a Table.
+ *
+ * @method getColumnCount
+ * @return {Integer} Number of columns in this table
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.addColumn('carnivore');
+ * table.set(0, 'carnivore', 'no');
+ * table.set(1, 'carnivore', 'yes');
+ * table.set(2, 'carnivore', 'no');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getColumnCount',
+ value: function getColumnCount() {
+ return this.columns.length;
+ } /**
+ * Returns the total number of rows in a Table.
+ *
+ * @method getRowCount
+ * @return {Integer} Number of rows in this table
+ * @example
+ *
+ * // given the cvs file "blobs.csv" in /assets directory
+ * // ID, Name, Flavor, Shape, Color
+ * // Blob1, Blobby, Sweet, Blob, Pink
+ * // Blob2, Saddy, Savory, Blob, Blue
+ *
+ * let table;
+ *
+ * function preload() {
+ * table = loadTable('assets/blobs.csv');
+ * }
+ *
+ * function setup() {
+ * createCanvas(200, 100);
+ * textAlign(CENTER);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * let numOfColumn = table.getColumnCount();
+ * text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getRowCount',
+ value: function getRowCount() {
+ return this.rows.length;
+ } /**
+ * Removes any of the specified characters (or "tokens").
+ *
+ * If no column is specified, then the values in all columns and
+ * rows are processed. A specific column may be referenced by
+ * either its ID or title.
+ *
+ * @method removeTokens
+ * @param {String} chars String listing characters to be removed
+ * @param {String|Integer} [column] Column ID (number)
+ * or name (string)
+ *
+ * @example
+ *
+ * // given the cvs file "blobs.csv" in /assets directory
+ * //
+ * // ID, Name, Flavor, Shape, Color
+ * // Blob1, Blobby, Sweet, Blob, Pink
+ * // Blob2, Saddy, Savory, Blob, Blue
+ *
+ * let table;
+ *
+ * function preload() {
+ * table = loadTable('assets/blobs.csv');
+ * }
+ *
+ * function setup() {
+ * createCanvas(200, 100);
+ * textAlign(CENTER);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * let table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', ' $Lion ,');
+ * newRow.setString('type', ',,,Mammal');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', '$Snake ');
+ * newRow.setString('type', ',,,Reptile');
+ *
+ * table.removeTokens(',$ ');
+ * print(table.getArray());
+ * }
+ *
+ * // prints:
+ * // 0 "Lion" "Mamal"
+ * // 1 "Snake" "Reptile"
+ *
+ * function setup() {
+ * let table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', ' Lion ,');
+ * newRow.setString('type', ' Mammal ');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', ' Snake ');
+ * newRow.setString('type', ' Reptile ');
+ *
+ * table.trim();
+ * print(table.getArray());
+ * }
+ *
+ * // prints:
+ * // 0 "Lion" "Mamal"
+ * // 1 "Snake" "Reptile"
+ *
+ *
+ */
+
+ },
+ {
+ key: 'removeColumn',
+ value: function removeColumn(c) {
+ var cString;
+ var cNumber;
+ if (typeof c === 'string') {
+ // find the position of c in the columns
+ cString = c;
+ cNumber = this.columns.indexOf(c);
+ } else {
+ cNumber = c;
+ cString = this.columns[c];
+ }
+ var chunk = this.columns.splice(cNumber + 1, this.columns.length);
+ this.columns.pop();
+ this.columns = this.columns.concat(chunk);
+ for (var i = 0; i < this.rows.length; i++) {
+ var tempR = this.rows[i].arr;
+ var chip = tempR.splice(cNumber + 1, tempR.length);
+ tempR.pop();
+ this.rows[i].arr = tempR.concat(chip);
+ delete this.rows[i].obj[cString];
+ }
+ } /**
+ * Stores a value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method set
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {String|Number} value value to assign
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.removeColumn('id');
+ * print(table.getColumnCount());
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(row, column, value) {
+ this.rows[row].set(column, value);
+ } /**
+ * Stores a Float value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method setNum
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {Number} value value to assign
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.set(0, 'species', 'Canis Lupus');
+ * table.set(0, 'name', 'Wolf');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setNum',
+ value: function setNum(row, column, value) {
+ this.rows[row].setNum(column, value);
+ } /**
+ * Stores a String value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @method setString
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {String} value value to assign
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.setNum(1, 'id', 1);
+ *
+ * print(table.getColumn(0));
+ * //["0", 1, "2"]
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(row, column) {
+ return this.rows[row].get(column);
+ } /**
+ * Retrieves a Float value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @method getNum
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {Number}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.get(0, 1));
+ * //Capra hircus
+ * print(table.get(0, 'species'));
+ * //Capra hircus
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getNum',
+ value: function getNum(row, column) {
+ return this.rows[row].getNum(column);
+ } /**
+ * Retrieves a String value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @method getString
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.getNum(1, 0) + 100);
+ * //id 1 + 100 = 101
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getString',
+ value: function getString(row, column) {
+ return this.rows[row].getString(column);
+ } /**
+ * Retrieves all table data and returns as an object. If a column name is
+ * passed in, each row object will be stored with that attribute as its
+ * title.
+ *
+ * @method getObject
+ * @param {String} [headerColumn] Name of the column which should be used to
+ * title each row object (optional)
+ * @return {Object}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.getString(0, 0)); // 0
+ * print(table.getString(0, 1)); // Capra hircus
+ * print(table.getString(0, 2)); // Goat
+ * print(table.getString(1, 0)); // 1
+ * print(table.getString(1, 1)); // Panthera pardus
+ * print(table.getString(1, 2)); // Leopard
+ * print(table.getString(2, 0)); // 2
+ * print(table.getString(2, 1)); // Equus zebra
+ * print(table.getString(2, 2)); // Zebra
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getObject',
+ value: function getObject(headerColumn) {
+ var tableObject = {
+ };
+ var obj,
+ cPos,
+ index;
+ for (var i = 0; i < this.rows.length; i++) {
+ obj = this.rows[i].obj;
+ if (typeof headerColumn === 'string') {
+ cPos = this.columns.indexOf(headerColumn); // index of columnID
+ if (cPos >= 0) {
+ index = obj[headerColumn];
+ tableObject[index] = obj;
+ } else {
+ throw new Error('This table has no column named "'.concat(headerColumn, '"'));
+ }
+ } else {
+ tableObject[i] = this.rows[i].obj;
+ }
+ }
+ return tableObject;
+ } /**
+ * Retrieves all table data and returns it as a multidimensional array.
+ *
+ * @method getArray
+ * @return {Array}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableObject = table.getObject();
+ *
+ * print(tableObject);
+ * //outputs an object
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'getArray',
+ value: function getArray() {
+ var tableArray = [
+ ];
+ for (var i = 0; i < this.rows.length; i++) {
+ tableArray.push(this.rows[i].arr);
+ }
+ return tableArray;
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.index-of': 178,
+ 'core-js/modules/es.array.join': 180,
+ 'core-js/modules/es.array.splice': 185,
+ 'core-js/modules/es.regexp.constructor': 204,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.match': 211,
+ 'core-js/modules/es.string.replace': 214
+ }
+ ],
+ 326: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.from-entries');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.from-entries');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module IO
+ * @submodule Table
+ * @requires core
+ */
+ /**
+ * A TableRow object represents a single row of data values,
+ * stored in columns, from a table.
+ *
+ * A Table Row contains both an ordered array, and an unordered
+ * JSON object.
+ *
+ * @class p5.TableRow
+ * @constructor
+ * @param {String} [str] optional: populate the row with a
+ * string of values, separated by the
+ * separator
+ * @param {String} [separator] comma separated values (csv) by default
+ */
+
+ _main.default.TableRow = /*#__PURE__*/ function () {
+ function _class(str, separator) {
+ _classCallCheck(this, _class);
+ var arr = [
+ ];
+ if (str) {
+ separator = separator || ',';
+ arr = str.split(separator);
+ }
+ this.arr = arr;
+ this.obj = Object.fromEntries(arr.entries());
+ this.table = null;
+ } /**
+ * Stores a value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method set
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {String|Number} value The value to be stored
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leoperd
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableArray = table.getArray();
+ * for (let i = 0; i < tableArray.length; i++) {
+ * print(tableArray[i]);
+ * }
+ * describe('no image displayed');
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].setNum('id', r + 10);
+ * }
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * let name = rows[r].getString('name');
+ * rows[r].setString('name', 'A ' + name + ' named George');
+ * }
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let names = [];
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * names.push(rows[r].get('name'));
+ * }
+ *
+ * print(names);
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let minId = Infinity;
+ * let maxId = -Infinity;
+ * for (let r = 0; r < rows.length; r++) {
+ * let id = rows[r].getNum('id');
+ * minId = min(minId, id);
+ * maxId = min(maxId, id);
+ * }
+ * print('minimum id = ' + minId + ', maximum id = ' + maxId);
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let longest = '';
+ * for (let r = 0; r < rows.length; r++) {
+ * let species = rows[r].getString('species');
+ * if (longest.length < species.length) {
+ * longest = species;
+ * }
+ * }
+ *
+ * print('longest: ' + longest);
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < children.length; i++) {
+ * let id = children[i].getNum('id');
+ * let coloring = children[i].getString('species');
+ * let name = children[i].getContent();
+ * print(id + ', ' + coloring + ', ' + name);
+ * }
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Sketch prints:
+ * // 0, Capra hircus, Goat
+ * // 1, Panthera pardus, Leopard
+ * // 2, Equus zebra, Zebra
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ * let parent = children[1].getParent();
+ * print(parent.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.getName());
+ * xml.setName('fish');
+ * print(xml.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ * // fish
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.hasChildren());
+ * }
+ *
+ * // Sketch prints:
+ * // true
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.listChildren());
+ * }
+ *
+ * // Sketch prints:
+ * // ["animal", "animal", "animal"]
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let animals = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < animals.length; i++) {
+ * print(animals[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let secondChild = xml.getChild(1);
+ * print(secondChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Leopard"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let child = new p5.XML();
+ * child.setName('animal');
+ * child.setAttribute('id', '3');
+ * child.setAttribute('species', 'Ornithorhynchus anatinus');
+ * child.setContent('Platypus');
+ * xml.addChild(child);
+ *
+ * let animals = xml.getChildren('animal');
+ * print(animals[animals.length - 1].getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * xml.removeChild('animal');
+ * let children = xml.getChildren();
+ * for (let i = 0; i < children.length; i++) {
+ * print(children[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * xml.removeChild(1);
+ * let children = xml.getChildren();
+ * for (let i = 0; i < children.length; i++) {
+ * print(children[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getAttributeCount());
+ * }
+ *
+ * // Sketch prints:
+ * // 2
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.listAttributes());
+ * }
+ *
+ * // Sketch prints:
+ * // ["id", "species"]
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.hasAttribute('species'));
+ * print(firstChild.hasAttribute('color'));
+ * }
+ *
+ * // Sketch prints:
+ * // true
+ * // false
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getNum('id'));
+ * }
+ *
+ * // Sketch prints:
+ * // 0
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getString('species'));
+ * }
+ *
+ * // Sketch prints:
+ * // "Capra hircus"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getString('species'));
+ * firstChild.setAttribute('species', 'Jamides zebra');
+ * print(firstChild.getString('species'));
+ * }
+ *
+ * // Sketch prints:
+ * // "Capra hircus"
+ * // "Jamides zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * firstChild.setContent('Mountain Goat');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Mountain Goat"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.serialize());
+ * }
+ *
+ * // Sketch prints:
+ * //
+ * // Goat
+ * // Leopard
+ * // Zebra
+ * //
+ *
+ *
+ */
+
+ _main.default.prototype.abs = Math.abs;
+ /**
+ * Calculates the closest integer value that is greater than or equal to the
+ * parameter's value. For example, calling `ceil(9.03)` returns the value
+ * 10.
+ *
+ * @method ceil
+ * @param {Number} n number to round up.
+ * @return {Integer} rounded up number.
+ * @example
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -height);
+ *
+ * let centerX = width / 2;
+ * let x = frameCount;
+ * let y = abs(x - centerX);
+ * point(x, y);
+ *
+ * describe('A series of black dots that form a "V" shape.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.ceil = Math.ceil;
+ /**
+ * Constrains a number between a minimum and maximum value.
+ *
+ * @method constrain
+ * @param {Number} n number to constrain.
+ * @param {Number} low minimum limit.
+ * @param {Number} high maximum limit.
+ * @return {Number} constrained number.
+ * @example
+ *
+ * // Set the range for RGB values from 0 to 1.
+ * colorMode(RGB, 1);
+ * noStroke();
+ *
+ * let r = 0.3;
+ * fill(r, 0, 0);
+ * rect(0, 0, width / 2, height);
+ *
+ * // Round r up to 1.
+ * r = ceil(r);
+ * fill(r, 0, 0);
+ * rect(width / 2, 0, width / 2, height);
+ *
+ * describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let x = constrain(mouseX, 33, 67);
+ * let y = 50;
+ *
+ * strokeWeight(5);
+ * point(x, y);
+ *
+ * describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.constrain = function (n, low, high) {
+ _main.default._validateParameters('constrain', arguments);
+ return Math.max(Math.min(n, high), low);
+ };
+ /**
+ * Calculates the distance between two points.
+ *
+ * The version of `dist()` with four parameters calculates distance in two
+ * dimensions.
+ *
+ * The version of `dist()` with six parameters calculates distance in three
+ * dimensions.
+ *
+ * Use p5.Vector.dist() to calculate the
+ * distance between two p5.Vector objects.
+ *
+ * @method dist
+ * @param {Number} x1 x-coordinate of the first point.
+ * @param {Number} y1 y-coordinate of the first point.
+ * @param {Number} x2 x-coordinate of the second point.
+ * @param {Number} y2 y-coordinate of the second point.
+ * @return {Number} distance between the two points.
+ *
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set boundaries and draw them.
+ * let leftWall = width * 0.25;
+ * let rightWall = width * 0.75;
+ * line(leftWall, 0, leftWall, height);
+ * line(rightWall, 0, rightWall, height);
+ *
+ * // Draw a circle that follows the mouse freely.
+ * fill(255);
+ * circle(mouseX, height / 3, 9);
+ *
+ * // Draw a circle that's constrained.
+ * let xc = constrain(mouseX, leftWall, rightWall);
+ * fill(0);
+ * circle(xc, 2 * height / 3, 9);
+ *
+ * describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method dist
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Number} z1 z-coordinate of the first point.
+ * @param {Number} x2
+ * @param {Number} y2
+ * @param {Number} z2 z-coordinate of the second point.
+ * @return {Number} distance between the two points.
+ */
+ _main.default.prototype.dist = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('dist', args);
+ if (args.length === 4) {
+ //2D
+ return hypot(args[2] - args[0], args[3] - args[1]);
+ } else if (args.length === 6) {
+ //3D
+ return hypot(args[3] - args[0], args[4] - args[1], args[5] - args[2]);
+ }
+ };
+ /**
+ * Returns Euler's number e (2.71828...) raised to the power of the `n`
+ * parameter.
+ *
+ * @method exp
+ * @param {Number} n exponent to raise.
+ * @return {Number} e^n
+ * @example
+ *
+ * let x1 = 10;
+ * let y1 = 50;
+ * let x2 = 90;
+ * let y2 = 50;
+ *
+ * line(x1, y1, x2, y2);
+ * strokeWeight(5);
+ * point(x1, y1);
+ * point(x2, y2);
+ *
+ * let d = dist(x1, y1, x2, y2);
+ * text(d, 43, 40);
+ *
+ * describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.exp = Math.exp;
+ /**
+ * Calculates the closest integer value that is less than or equal to the
+ * value of the `n` parameter.
+ *
+ * @method floor
+ * @param {Number} n number to round down.
+ * @return {Integer} rounded down number.
+ * @example
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -height);
+ *
+ * let x = frameCount;
+ * let y = 0.005 * exp(x * 0.1);
+ * point(x, y);
+ *
+ * describe('A series of black dots that grow exponentially from left to right.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.floor = Math.floor;
+ /**
+ * Calculates a number between two numbers at a specific increment. The `amt`
+ * parameter is the amount to interpolate between the two numbers. 0.0 is
+ * equal to the first number, 0.1 is very near the first number, 0.5 is
+ * half-way in between, and 1.0 is equal to the second number. The `lerp()`
+ * function is convenient for creating motion along a straight path and for
+ * drawing dotted lines.
+ *
+ * If the value of `amt` is less than 0 or more than 1, `lerp()` will return a
+ * number outside of the original interval. For example, calling
+ * `lerp(0, 10, 1.5)` will return 15.
+ *
+ * @method lerp
+ * @param {Number} start first value.
+ * @param {Number} stop second value.
+ * @param {Number} amt number.
+ * @return {Number} lerped value.
+ * @example
+ *
+ * // Set the range for RGB values from 0 to 1.
+ * colorMode(RGB, 1);
+ * noStroke();
+ *
+ * let r = 0.8;
+ * fill(r, 0, 0);
+ * rect(0, 0, width / 2, height);
+ *
+ * // Round r down to 0.
+ * r = floor(r);
+ * fill(r, 0, 0);
+ * rect(width / 2, 0, width / 2, height);
+ *
+ * describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.lerp = function (start, stop, amt) {
+ _main.default._validateParameters('lerp', arguments);
+ return amt * (stop - start) + start;
+ };
+ /**
+ * Calculates the natural logarithm (the base-e logarithm) of a number. This
+ * function expects the `n` parameter to be a value greater than 0.0.
+ *
+ * @method log
+ * @param {Number} n number greater than 0.
+ * @return {Number} natural logarithm of n.
+ * @example
+ *
+ * let a = 20;
+ * let b = 80;
+ * let c = lerp(a, b, 0.2);
+ * let d = lerp(a, b, 0.5);
+ * let e = lerp(a, b, 0.8);
+ *
+ * let y = 50;
+ *
+ * strokeWeight(5);
+ *
+ * // Draw the original points in black.
+ * stroke(0);
+ * point(a, y);
+ * point(b, y);
+ *
+ * // Draw the lerped points in gray.
+ * stroke(100);
+ * point(c, y);
+ * point(d, y);
+ * point(e, y);
+ *
+ * describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.log = Math.log;
+ /**
+ * Calculates the magnitude, or length, of a vector. A vector is like an arrow
+ * pointing in space. Vectors are commonly used for programming motion.
+ *
+ * Vectors don't have a "start" position because the same arrow can be drawn
+ * anywhere. A vector's magnitude can be thought of as the distance from the
+ * origin (0, 0) to its tip at (x, y). `mag(x, y)` is a shortcut for calling
+ * `dist(0, 0, x, y)`.
+ *
+ * @method mag
+ * @param {Number} x first component.
+ * @param {Number} y second component.
+ * @return {Number} magnitude of vector from (0,0) to (x,y).
+ * @example
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -height);
+ *
+ * let x = frameCount;
+ * let y = 15 * log(x);
+ * point(x, y);
+ *
+ * describe('A series of black dots that get higher slowly from left to right.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.mag = function (x, y) {
+ _main.default._validateParameters('mag', arguments);
+ return hypot(x, y);
+ };
+ /**
+ * Re-maps a number from one range to another.
+ *
+ * For example, calling `map(2, 0, 10, 0, 100)` returns 20. The first three
+ * arguments set the original value to 2 and the original range from 0 to 10.
+ * The last two arguments set the target range from 0 to 100. 20's position
+ * in the target range [0, 100] is proportional to 2's position in the
+ * original range [0, 10].
+ *
+ * @method map
+ * @param {Number} value the incoming value to be converted.
+ * @param {Number} start1 lower bound of the value's current range.
+ * @param {Number} stop1 upper bound of the value's current range.
+ * @param {Number} start2 lower bound of the value's target range.
+ * @param {Number} stop2 upper bound of the value's target range.
+ * @param {Boolean} [withinBounds] constrain the value to the newly mapped range.
+ * @return {Number} remapped number.
+ * @example
+ *
+ * let x = 30;
+ * let y = 40;
+ * let m = mag(x, y);
+ *
+ * line(0, 0, x, y);
+ * text(m, x, y);
+ *
+ * describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');
+ *
+ *
+ *
+ *
+ *
+ * let n = map(7, 0, 10, 0, 100);
+ * text(n, 50, 50);
+ *
+ * describe('The number 70 written in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * let x = map(2, 0, 10, 0, width);
+ * circle(x, 50, 10);
+ *
+ * describe('A white circle drawn on the left side of a gray square.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.map = function (n, start1, stop1, start2, stop2, withinBounds) {
+ _main.default._validateParameters('map', arguments);
+ var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+ if (!withinBounds) {
+ return newval;
+ }
+ if (start2 < stop2) {
+ return this.constrain(newval, start2, stop2);
+ } else {
+ return this.constrain(newval, stop2, start2);
+ }
+ };
+ /**
+ * Returns the largest value in a sequence of numbers.
+ *
+ * The version of `max()` with one parameter interprets it as an array of
+ * numbers and returns the largest number.
+ *
+ * The version of `max()` with two or more parameters interprets them as
+ * individual numbers and returns the largest number.
+ *
+ * @method max
+ * @param {Number} n0 first number to compare.
+ * @param {Number} n1 second number to compare.
+ * @return {Number} maximum number.
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let c = map(mouseX, 0, width, 0, 255);
+ * fill(c);
+ * circle(50, 50, 20);
+ *
+ * describe('A circle changes color from black to white as the mouse moves from left to right.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let m = max(10, 20);
+ * text(m, 50, 50);
+ *
+ * describe('The number 20 written in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * let m = max([10, 20]);
+ * text(m, 50, 50);
+ *
+ * describe('The number 20 written in the middle of a gray square.');
+ *
+ *
+ *
+ */
+ /**
+ * @method max
+ * @param {Number[]} nums numbers to compare.
+ * @return {Number}
+ */
+ _main.default.prototype.max = function () {
+ var findMax = function findMax(arr) {
+ var max = - Infinity;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = arr[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var x = _step.value;
+ max = x > max ? x : max;
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ return max;
+ };
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ if (args[0] instanceof Array) {
+ return findMax(args[0]);
+ } else {
+ return findMax(args);
+ }
+ };
+ /**
+ * Returns the smallest value in a sequence of numbers.
+ *
+ * The version of `min()` with one parameter interprets it as an array of
+ * numbers and returns the smallest number.
+ *
+ * The version of `min()` with two or more parameters interprets them as
+ * individual numbers and returns the smallest number.
+ *
+ * @method min
+ * @param {Number} n0 first number to compare.
+ * @param {Number} n1 second number to compare.
+ * @return {Number} minimum number.
+ * @example
+ *
+ * let numbers = [2, 1, 5, 4, 8, 9];
+ *
+ * // Draw all of the numbers in the array.
+ * noStroke();
+ * let spacing = 15;
+ * numbers.forEach((n, index) => {
+ * let x = index * spacing;
+ * let y = 25;
+ * text(n, x, y);
+ * });
+ *
+ * // Draw the maximum value in the array.
+ * let m = max(numbers);
+ * let maxX = 33;
+ * let maxY = 80;
+ *
+ * textSize(32);
+ * text(m, maxX, maxY);
+ *
+ * describe('The numbers 2 1 5 4 8 9 are written in small text at the top of a gray square. The number 9 is written in large text at the center of the square.');
+ *
+ *
+ *
+ *
+ *
+ * let m = min(10, 20);
+ * text(m, 50, 50);
+ *
+ * describe('The number 10 written in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * let m = min([10, 20]);
+ * text(m, 50, 50);
+ *
+ * describe('The number 10 written in the middle of a gray square.');
+ *
+ *
+ *
+ */
+ /**
+ * @method min
+ * @param {Number[]} nums numbers to compare.
+ * @return {Number}
+ */
+ _main.default.prototype.min = function () {
+ var findMin = function findMin(arr) {
+ var min = Infinity;
+ 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 x = _step2.value;
+ min = x < min ? x : min;
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ return min;
+ };
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ if (args[0] instanceof Array) {
+ return findMin(args[0]);
+ } else {
+ return findMin(args);
+ }
+ };
+ /**
+ * Maps a number from one range to a value between 0 and 1.
+ *
+ * For example, `norm(2, 0, 10)` returns 0.2. 2's position in the original
+ * range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
+ * is equivalent to calling `map(2, 0, 10, 0, 1)`.
+ *
+ * Numbers outside of the original range are not constrained between 0 and 1.
+ * Out-of-range values are often intentional and useful.
+ *
+ * @method norm
+ * @param {Number} value incoming value to be normalized.
+ * @param {Number} start lower bound of the value's current range.
+ * @param {Number} stop upper bound of the value's current range.
+ * @return {Number} normalized number.
+ * @example
+ *
+ * let numbers = [2, 1, 5, 4, 8, 9];
+ *
+ * // Draw all of the numbers in the array.
+ * noStroke();
+ * let spacing = 15;
+ * numbers.forEach((n, index) => {
+ * let x = index * spacing;
+ * let y = 25;
+ * text(n, x, y);
+ * });
+ *
+ * // Draw the minimum value in the array.
+ * let m = min(numbers);
+ * let minX = 33;
+ * let minY = 80;
+ *
+ * textSize(32);
+ * text(m, minX, minY);
+ *
+ * describe('The numbers 2 1 5 4 8 9 are written in small text at the top of a gray square. The number 1 is written in large text at the center of the square.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.norm = function (n, start, stop) {
+ _main.default._validateParameters('norm', arguments);
+ return this.map(n, start, stop, 0, 1);
+ };
+ /**
+ * Calculates exponential expressions such as 2^3.
+ *
+ * For example, `pow(2, 3)` is equivalent to the expression
+ * 2 × 2 × 2. `pow(2, -3)` is equivalent to 1 ÷
+ * (2 × 2 × 2).
+ *
+ * @method pow
+ * @param {Number} n base of the exponential expression.
+ * @param {Number} e power by which to raise the base.
+ * @return {Number} n^e.
+ * @example
+ *
+ * function draw() {
+ * // Set the range for RGB values from 0 to 1.
+ * colorMode(RGB, 1);
+ *
+ * let r = norm(mouseX, 0, width);
+ * background(r, 0, 0);
+ *
+ * describe('A square changes color from black to red as the mouse moves from left to right.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.pow = Math.pow;
+ /**
+ * Calculates the integer closest to the `n` parameter. For example,
+ * `round(133.8)` returns the value 134.
+ *
+ * @method round
+ * @param {Number} n number to round.
+ * @param {Number} [decimals] number of decimal places to round to, default is 0.
+ * @return {Integer} rounded number.
+ * @example
+ *
+ * let base = 3;
+ *
+ * let d = pow(base, 1);
+ * circle(10, 10, d);
+ *
+ * d = pow(base, 2);
+ * circle(20, 20, d);
+ *
+ * d = pow(base, 3);
+ * circle(40, 40, d);
+ *
+ * d = pow(base, 4);
+ * circle(80, 80, d);
+ *
+ * describe('A series of circles that grow exponentially from top left to bottom right.');
+ *
+ *
+ *
+ *
+ *
+ * let x = round(3.7);
+ * text(x, width / 2, height / 2);
+ *
+ * describe('The number 4 written in middle of canvas.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.round = function (n, decimals) {
+ if (!decimals) {
+ return Math.round(n);
+ }
+ var multiplier = Math.pow(10, decimals);
+ return Math.round(n * multiplier) / multiplier;
+ };
+ /**
+ * Squares a number, which means multiplying the number by itself. The value
+ * returned is always a positive number.
+ *
+ * For example, `sq(3)` evaluates 3 × 3 which is 9. `sq(-3)` evaluates
+ * -3 × -3 which is also 9. Multiplying two negative numbers produces
+ * a positive number.
+ *
+ * @method sq
+ * @param {Number} n number to square.
+ * @return {Number} squared number.
+ * @example
+ *
+ * let x = round(12.782383, 2);
+ * text(x, width / 2, height / 2);
+ *
+ * describe('The number 12.78 written in middle of canvas.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.sq = function (n) {
+ return n * n;
+ };
+ /**
+ * Calculates the square root of a number. A number's square root can be
+ * multiplied by itself to produce the original number.
+ *
+ * For example, `sqrt(9)` returns 3 because 3 × 3 = 9. `sqrt()` always
+ * returns a positive value. `sqrt()` doesn't work with negative arguments
+ * such as `sqrt(-9)`.
+ *
+ * @method sqrt
+ * @param {Number} n non-negative number to square root.
+ * @return {Number} square root of number.
+ * @example
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -height);
+ *
+ * let x = frameCount;
+ * let y = 0.01 * sq(x);
+ * point(x, y);
+ *
+ * describe('A series of black dots that get higher quickly from left to right.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.sqrt = Math.sqrt;
+ // Calculate the length of the hypotenuse of a right triangle
+ // This won't under- or overflow in intermediate steps
+ // https://en.wikipedia.org/wiki/Hypot
+ function hypot(x, y, z) {
+ // Use the native implementation if it's available
+ if (typeof Math.hypot === 'function') {
+ return Math.hypot.apply(null, arguments);
+ } // Otherwise use the V8 implementation
+ // https://github.com/v8/v8/blob/8cd3cf297287e581a49e487067f5cbd991b27123/src/js/math.js#L217
+
+ var length = arguments.length;
+ var args = [
+ ];
+ var max = 0;
+ for (var i = 0; i < length; i++) {
+ var n = arguments[i];
+ n = + n;
+ if (n === Infinity || n === - Infinity) {
+ return Infinity;
+ }
+ n = Math.abs(n);
+ if (n > max) {
+ max = n;
+ }
+ args[i] = n;
+ }
+ if (max === 0) {
+ max = 1;
+ }
+ var sum = 0;
+ var compensation = 0;
+ for (var j = 0; j < length; j++) {
+ var m = args[j] / max;
+ var summand = m * m - compensation;
+ var preliminary = sum + summand;
+ compensation = preliminary - sum - summand;
+ sum = preliminary;
+ }
+ return Math.sqrt(sum) * max;
+ } /**
+ * Calculates the fractional part of a number. For example,
+ * `fract(12.34)` returns 0.34.
+ *
+ * @method fract
+ * @param {Number} n number whose fractional part will be found.
+ * @returns {Number} fractional part of n.
+ * @example
+ *
+ * function draw() {
+ * // Invert the y-axis.
+ * scale(1, -1);
+ * translate(0, -height);
+ *
+ * let x = frameCount;
+ * let y = 5 * sqrt(x);
+ * point(x, y);
+ *
+ * describe('A series of black dots that get higher slowly from left to right.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.fract = function (toConvert) {
+ _main.default._validateParameters('fract', arguments);
+ var sign = 0;
+ var num = Number(toConvert);
+ if (isNaN(num) || Math.abs(num) === Infinity) {
+ return num;
+ } else if (num < 0) {
+ num = - num;
+ sign = 1;
+ }
+ if (String(num).includes('.') && !String(num).includes('e')) {
+ var toFract = String(num);
+ toFract = Number('0' + toFract.slice(toFract.indexOf('.')));
+ return Math.abs(sign - toFract);
+ } else if (num < 1) {
+ return Math.abs(sign - num);
+ } else {
+ return 0;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.index-of': 178,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.math.hypot': 188,
+ 'core-js/modules/es.number.constructor': 191,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 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.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.slice');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ function _construct(Parent, args, Class) {
+ if (isNativeReflectConstruct()) {
+ _construct = Reflect.construct;
+ } else {
+ _construct = function _construct(Parent, args, Class) {
+ var a = [
+ null
+ ];
+ a.push.apply(a, args);
+ var Constructor = Function.bind.apply(Parent, a);
+ var instance = new Constructor();
+ if (Class) _setPrototypeOf(instance, Class.prototype);
+ return instance;
+ };
+ }
+ return _construct.apply(null, arguments);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ } /**
+ * @module Math
+ * @submodule Vector
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Creates a new p5.Vector object. A vector is like
+ * an arrow pointing in space. Vectors have both magnitude (length)
+ * and direction. Calling `createVector()` without arguments sets the new
+ * vector's components to 0.
+ *
+ * p5.Vector objects are often used to program
+ * motion because they simplify the math. For example, a moving ball has a
+ * position and a velocity. Position describes where the ball is in space. The
+ * ball's position vector extends from the origin to the ball's center.
+ * Velocity describes the ball's speed and the direction it's moving. If the
+ * ball is moving straight up, its velocity vector points straight up. Adding
+ * the ball's velocity vector to its position vector moves it, as in
+ * `pos.add(vel)`. Vector math relies on methods inside the
+ * p5.Vector` class.
+ *
+ * @method createVector
+ * @param {Number} [x] x component of the vector.
+ * @param {Number} [y] y component of the vector.
+ * @param {Number} [z] z component of the vector.
+ * @return {p5.Vector} new p5.Vector object.
+ * @example
+ *
+ * let n = 56.78;
+ * text(n, 20, 33);
+ * let f = fract(n);
+ * text(f, 20, 66);
+ *
+ * describe('The number 56.78 written above the number 0.78.');
+ *
+ *
+ *
+ *
+ *
+ * let p1 = createVector(25, 25);
+ * let p2 = createVector(50, 50);
+ * let p3 = createVector(75, 75);
+ *
+ * strokeWeight(5);
+ * point(p1);
+ * point(p2);
+ * point(p3);
+ *
+ * describe('Three black dots form a diagonal line from top left to bottom right.');
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.createVector = function (x, y, z) {
+ if (this instanceof _main.default) {
+ return _construct(_main.default.Vector, [
+ this._fromRadians.bind(this),
+ this._toRadians.bind(this)
+ ].concat(Array.prototype.slice.call(arguments)));
+ } else {
+ return new _main.default.Vector(x, y, z);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.reflect.construct': 202,
+ 'core-js/modules/es.regexp.to-string': 206
+ }
+ ],
+ 330: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } //////////////////////////////////////////////////////////////
+ // http://mrl.nyu.edu/~perlin/noise/
+ // Adapting from PApplet.java
+ // which was adapted from toxi
+ // which was adapted from the german demo group farbrausch
+ // as used in their demo "art": http://www.farb-rausch.de/fr010src.zip
+ // someday we might consider using "improved noise"
+ // http://mrl.nyu.edu/~perlin/paper445.pdf
+ // See: https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/
+ // blob/main/introduction/Noise1D/noise.js
+ /**
+ * @module Math
+ * @submodule Noise
+ * @for p5
+ * @requires core
+ */
+
+ var PERLIN_YWRAPB = 4;
+ var PERLIN_YWRAP = 1 << PERLIN_YWRAPB;
+ var PERLIN_ZWRAPB = 8;
+ var PERLIN_ZWRAP = 1 << PERLIN_ZWRAPB;
+ var PERLIN_SIZE = 4095;
+ var perlin_octaves = 4; // default to medium smooth
+ var perlin_amp_falloff = 0.5; // 50% reduction/octave
+ var scaled_cosine = function scaled_cosine(i) {
+ return 0.5 * (1 - Math.cos(i * Math.PI));
+ };
+ var perlin; // will be initialized lazily by noise() or noiseSeed()
+ /**
+ * Returns random numbers that can be tuned to feel more organic. The values
+ * returned will always be between 0 and 1.
+ *
+ * Values returned by random() and
+ * randomGaussian() can change by large
+ * amounts between function calls. By contrast, values returned by `noise()`
+ * can be made "smooth". Calls to `noise()` with similar inputs will produce
+ * similar outputs. `noise()` is used to create textures, motion, shapes,
+ * terrains, and so on. Ken Perlin invented `noise()` while animating the
+ * original Tron film in the 1980s.
+ *
+ * `noise()` returns the same value for a given input while a sketch is
+ * running. It produces different results each time a sketch runs. The
+ * noiseSeed() function can be used to generate
+ * the same sequence of Perlin noise values each time a sketch runs.
+ *
+ * The character of the noise can be adjusted in two ways. The first way is to
+ * scale the inputs. `noise()` interprets inputs as coordinates. The sequence
+ * of noise values will be smoother when the input coordinates are closer. The
+ * second way is to use the noiseDetail()
+ * function.
+ *
+ * The version of `noise()` with one parameter computes noise values in one
+ * dimension. This dimension can be thought of as space, as in `noise(x)`, or
+ * time, as in `noise(t)`.
+ *
+ * The version of `noise()` with two parameters computes noise values in two
+ * dimensions. These dimensions can be thought of as space, as in
+ * `noise(x, y)`, or space and time, as in `noise(x, t)`.
+ *
+ * The version of `noise()` with three parameters computes noise values in
+ * three dimensions. These dimensions can be thought of as space, as in
+ * `noise(x, y, z)`, or space and time, as in `noise(x, y, t)`.
+ *
+ * @method noise
+ * @param {Number} x x-coordinate in noise space.
+ * @param {Number} [y] y-coordinate in noise space.
+ * @param {Number} [z] z-coordinate in noise space.
+ * @return {Number} Perlin noise value at specified coordinates.
+ * @example
+ *
+ * let pos;
+ * let vel;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * pos = createVector(width / 2, height);
+ * vel = createVector(0, -1);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * pos.add(vel);
+ *
+ * if (pos.y < 0) {
+ * pos.y = height;
+ * }
+ *
+ * strokeWeight(5);
+ * point(pos);
+ *
+ * describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let x = 100 * noise(0.005 * frameCount);
+ * let y = 100 * noise(0.005 * frameCount + 10000);
+ *
+ * strokeWeight(5);
+ * point(x, y);
+ *
+ * describe('A black dot moves randomly on a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let noiseLevel = 100;
+ * let noiseScale = 0.005;
+ * // Scale input coordinate.
+ * let nt = noiseScale * frameCount;
+ * // Compute noise value.
+ * let x = noiseLevel * noise(nt);
+ * let y = noiseLevel * noise(nt + 10000);
+ * // Render.
+ * strokeWeight(5);
+ * point(x, y);
+ *
+ * describe('A black dot moves randomly on a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * let noiseLevel = 100;
+ * let noiseScale = 0.02;
+ * // Scale input coordinate.
+ * let x = frameCount;
+ * let nx = noiseScale * x;
+ * // Compute noise value.
+ * let y = noiseLevel * noise(nx);
+ * // Render.
+ * line(x, 0, x, y);
+ *
+ * describe('A hilly terrain drawn in gray against a black sky.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let noiseLevel = 100;
+ * let noiseScale = 0.002;
+ * for (let x = 0; x < width; x += 1) {
+ * // Scale input coordinates.
+ * let nx = noiseScale * x;
+ * let nt = noiseScale * frameCount;
+ * // Compute noise value.
+ * let y = noiseLevel * noise(nx, nt);
+ * // Render.
+ * line(x, 0, x, y);
+ * }
+ *
+ * describe('A calm sea drawn in gray against a black sky.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let noiseLevel = 255;
+ * let noiseScale = 0.01;
+ * for (let y = 0; y < height; y += 1) {
+ * for (let x = 0; x < width; x += 1) {
+ * // Scale input coordinates.
+ * let nx = noiseScale * x;
+ * let ny = noiseScale * y;
+ * // Compute noise value.
+ * let c = noiseLevel * noise(nx, ny);
+ * // Render.
+ * stroke(c);
+ * point(x, y);
+ * }
+ * }
+ *
+ * describe('A gray cloudy pattern.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.noise = function (x) {
+ var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+ var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+ if (perlin == null) {
+ perlin = new Array(PERLIN_SIZE + 1);
+ for (var i = 0; i < PERLIN_SIZE + 1; i++) {
+ perlin[i] = Math.random();
+ }
+ }
+ if (x < 0) {
+ x = - x;
+ }
+ if (y < 0) {
+ y = - y;
+ }
+ if (z < 0) {
+ z = - z;
+ }
+ var xi = Math.floor(x),
+ yi = Math.floor(y),
+ zi = Math.floor(z);
+ var xf = x - xi;
+ var yf = y - yi;
+ var zf = z - zi;
+ var rxf,
+ ryf;
+ var r = 0;
+ var ampl = 0.5;
+ var n1,
+ n2,
+ n3;
+ for (var o = 0; o < perlin_octaves; o++) {
+ var of = xi + (yi << PERLIN_YWRAPB) + (zi << PERLIN_ZWRAPB);
+ rxf = scaled_cosine(xf);
+ ryf = scaled_cosine(yf);
+ n1 = perlin[of & PERLIN_SIZE];
+ n1 += rxf * (perlin[of + 1 & PERLIN_SIZE] - n1);
+ n2 = perlin[of + PERLIN_YWRAP & PERLIN_SIZE];
+ n2 += rxf * (perlin[of + PERLIN_YWRAP + 1 & PERLIN_SIZE] - n2);
+ n1 += ryf * (n2 - n1);
+ of += PERLIN_ZWRAP;
+ n2 = perlin[of & PERLIN_SIZE];
+ n2 += rxf * (perlin[of + 1 & PERLIN_SIZE] - n2);
+ n3 = perlin[of + PERLIN_YWRAP & PERLIN_SIZE];
+ n3 += rxf * (perlin[of + PERLIN_YWRAP + 1 & PERLIN_SIZE] - n3);
+ n2 += ryf * (n3 - n2);
+ n1 += scaled_cosine(zf) * (n2 - n1);
+ r += n1 * ampl;
+ ampl *= perlin_amp_falloff;
+ xi <<= 1;
+ xf *= 2;
+ yi <<= 1;
+ yf *= 2;
+ zi <<= 1;
+ zf *= 2;
+ if (xf >= 1) {
+ xi++;
+ xf--;
+ }
+ if (yf >= 1) {
+ yi++;
+ yf--;
+ }
+ if (zf >= 1) {
+ zi++;
+ zf--;
+ }
+ }
+ return r;
+ };
+ /**
+ * Adjusts the character of the noise produced by the
+ * noise() function.
+ *
+ * Perlin noise values are created by adding layers of noise together. The
+ * noise layers, called octaves, are similar to harmonics in music. Lower
+ * octaves contribute more to the output signal. They define the overall
+ * intensity of the noise. Higher octaves create finer-grained details.
+ *
+ * By default, noise values are created by combining four octaves. Each higher
+ * octave contributes half as much (50% less) compared to its predecessor.
+ * `noiseDetail()` changes the number of octaves and the falloff amount. For
+ * example, calling `noiseDetail(6, 0.25)` ensures that
+ * noise() will use six octaves. Each higher octave
+ * will contribute 25% as much (75% less) compared to its predecessor. Falloff
+ * values between 0 and 1 are valid. However, falloff values greater than 0.5
+ * might result in noise values greater than 1.
+ *
+ * @method noiseDetail
+ * @param {Number} lod number of octaves to be used by the noise.
+ * @param {Number} falloff falloff factor for each octave.
+ * @example
+ *
+ * function draw() {
+ * let noiseLevel = 255;
+ * let noiseScale = 0.009;
+ * for (let y = 0; y < height; y += 1) {
+ * for (let x = 0; x < width; x += 1) {
+ * // Scale input coordinates.
+ * let nx = noiseScale * x;
+ * let ny = noiseScale * y;
+ * let nt = noiseScale * frameCount;
+ * // Compute noise value.
+ * let c = noiseLevel * noise(nx, ny, nt);
+ * // Render.
+ * stroke(c);
+ * point(x, y);
+ * }
+ * }
+ *
+ * describe('A gray cloudy pattern that changes.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.noiseDetail = function (lod, falloff) {
+ if (lod > 0) {
+ perlin_octaves = lod;
+ }
+ if (falloff > 0) {
+ perlin_amp_falloff = falloff;
+ }
+ };
+ /**
+ * Sets the seed value for noise(). By default,
+ * noise() produces different results each time
+ * a sketch is run. Calling `noiseSeed()` with a constant
+ * argument, such as `noiseSeed(99)`, makes noise()
+ * produce the same results each time a sketch is run.
+ *
+ * @method noiseSeed
+ * @param {Number} seed seed value.
+ * @example
+ *
+ * let noiseLevel = 255;
+ * let noiseScale = 0.02;
+ * for (let y = 0; y < height; y += 1) {
+ * for (let x = 0; x < width / 2; x += 1) {
+ * // Scale input coordinates.
+ * let nx = noiseScale * x;
+ * let ny = noiseScale * y;
+ *
+ * // Compute noise value.
+ * noiseDetail(6, 0.25);
+ * let c = noiseLevel * noise(nx, ny);
+ * // Render left side.
+ * stroke(c);
+ * point(x, y);
+ *
+ * // Compute noise value.
+ * noiseDetail(4, 0.5);
+ * c = noiseLevel * noise(nx, ny);
+ * // Render right side.
+ * stroke(c);
+ * point(x + width / 2, y);
+ * }
+ * }
+ *
+ * describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.noiseSeed = function (seed) {
+ // Linear Congruential Generator
+ // Variant of a Lehman Generator
+ var lcg = function () {
+ // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
+ // m is basically chosen to be large (as it is the max period)
+ // and for its relationships to a and c
+ var m = 4294967296;
+ // a - 1 should be divisible by m's prime factors
+ var a = 1664525;
+ // c and m should be co-prime
+ var c = 1013904223;
+ var seed,
+ z;
+ return {
+ setSeed: function setSeed(val) {
+ // pick a random seed if val is undefined or null
+ // the >>> 0 casts the seed to an unsigned 32-bit integer
+ z = seed = (val == null ? Math.random() * m : val) >>> 0;
+ },
+ getSeed: function getSeed() {
+ return seed;
+ },
+ rand: function rand() {
+ // define the recurrence relationship
+ z = (a * z + c) % m;
+ // return a float in [0, 1)
+ // if z = m then z / m = 0 therefore (z % m) / m < 1 always
+ return z / m;
+ }
+ };
+ }();
+ lcg.setSeed(seed);
+ perlin = new Array(PERLIN_SIZE + 1);
+ for (var i = 0; i < PERLIN_SIZE + 1; i++) {
+ perlin[i] = lcg.rand();
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298
+ }
+ ],
+ 331: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.number.is-finite');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.number.constructor');
+ _dereq_('core-js/modules/es.number.is-finite');
+ _dereq_('core-js/modules/es.string.sub');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Math
+ * @submodule Vector
+ * @requires constants
+ */
+ /// HELPERS FOR REMAINDER METHOD
+
+ var calculateRemainder2D = function calculateRemainder2D(xComponent, yComponent) {
+ if (xComponent !== 0) {
+ this.x = this.x % xComponent;
+ }
+ if (yComponent !== 0) {
+ this.y = this.y % yComponent;
+ }
+ return this;
+ };
+ var calculateRemainder3D = function calculateRemainder3D(xComponent, yComponent, zComponent) {
+ if (xComponent !== 0) {
+ this.x = this.x % xComponent;
+ }
+ if (yComponent !== 0) {
+ this.y = this.y % yComponent;
+ }
+ if (zComponent !== 0) {
+ this.z = this.z % zComponent;
+ }
+ return this;
+ };
+ /**
+ * A class to describe a two or three-dimensional vector. A vector is like an
+ * arrow pointing in space. Vectors have both magnitude (length) and
+ * direction.
+ *
+ * `p5.Vector` objects are often used to program motion because they simplify
+ * the math. For example, a moving ball has a position and a velocity.
+ * Position describes where the ball is in space. The ball's position vector
+ * extends from the origin to the ball's center. Velocity describes the ball's
+ * speed and the direction it's moving. If the ball is moving straight up, its
+ * velocity vector points straight up. Adding the ball's velocity vector to
+ * its position vector moves it, as in `pos.add(vel)`. Vector math relies on
+ * methods inside the `p5.Vector` class.
+ *
+ * @class p5.Vector
+ * @constructor
+ * @param {Number} [x] x component of the vector.
+ * @param {Number} [y] y component of the vector.
+ * @param {Number} [z] z component of the vector.
+ * @example
+ *
+ * function setup() {
+ * noiseSeed(99);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * let noiseLevel = 100;
+ * let noiseScale = 0.005;
+ * // Scale input coordinate.
+ * let nt = noiseScale * frameCount;
+ * // Compute noise value.
+ * let x = noiseLevel * noise(nt);
+ * // Render.
+ * line(x, 0, x, height);
+ *
+ * describe('A black rectangle that grows randomly, first to the right and then to the left.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let p1 = createVector(25, 25);
+ * let p2 = createVector(75, 75);
+ *
+ * strokeWeight(5);
+ * point(p1);
+ * point(p2.x, p2.y);
+ *
+ * describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');
+ *
+ *
+ *
+ */
+ _main.default.Vector = /*#__PURE__*/ function () {
+ // This is how it comes in with createVector()
+ // This check if the first argument is a function
+ function _class() {
+ _classCallCheck(this, _class);
+ var x,
+ y,
+ z;
+ if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'function') {
+ this.isPInst = true;
+ this._fromRadians = arguments.length <= 0 ? undefined : arguments[0];
+ this._toRadians = arguments.length <= 1 ? undefined : arguments[1];
+ x = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ y = (arguments.length <= 3 ? undefined : arguments[3]) || 0;
+ z = (arguments.length <= 4 ? undefined : arguments[4]) || 0;
+ // This is what we'll get with new p5.Vector()
+ } else {
+ x = (arguments.length <= 0 ? undefined : arguments[0]) || 0;
+ y = (arguments.length <= 1 ? undefined : arguments[1]) || 0;
+ z = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ } /**
+ * The x component of the vector
+ * @property x {Number}
+ */
+
+ this.x = x;
+ /**
+ * The y component of the vector
+ * @property y {Number}
+ */
+ this.y = y;
+ /**
+ * The z component of the vector
+ * @property z {Number}
+ */
+ this.z = z;
+ } /**
+ * Returns a string representation of a vector. This method is useful for
+ * printing vectors to the console while debugging.
+ * @method toString
+ * @return {String} string representation of the vector.
+ * @example
+ *
+ * let pos;
+ * let vel;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * pos = createVector(width / 2, height);
+ * vel = createVector(0, -1);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * pos.add(vel);
+ *
+ * if (pos.y < 0) {
+ * pos.y = height;
+ * }
+ *
+ * strokeWeight(5);
+ * point(pos);
+ *
+ * describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'toString',
+ value: function toString() {
+ return 'p5.Vector Object : ['.concat(this.x, ', ').concat(this.y, ', ').concat(this.z, ']');
+ } /**
+ * Sets the `x`, `y`, and `z` components of the vector using separate numbers,
+ * a p5.Vector object, or an array of numbers.
+ * Calling `set()` with no arguments sets the vector's components to 0.
+ *
+ * @method set
+ * @param {Number} [x] x component of the vector.
+ * @param {Number} [y] y component of the vector.
+ * @param {Number} [z] z component of the vector.
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * let v = createVector(20, 30);
+ * // Prints 'p5.Vector Object : [20, 30, 0]'.
+ * print(v.toString());
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method set
+ * @param {p5.Vector|Number[]} value vector to set.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x = x.x || 0;
+ this.y = x.y || 0;
+ this.z = x.z || 0;
+ return this;
+ }
+ if (Array.isArray(x)) {
+ this.x = x[0] || 0;
+ this.y = x[1] || 0;
+ this.z = x[2] || 0;
+ return this;
+ }
+ this.x = x || 0;
+ this.y = y || 0;
+ this.z = z || 0;
+ return this;
+ } /**
+ * Returns a copy of the p5.Vector object.
+ *
+ * @method copy
+ * @return {p5.Vector} copy of the p5.Vector object.
+ * @example
+ *
+ * strokeWeight(5);
+ *
+ * // Top left.
+ * let pos = createVector(25, 25);
+ * point(pos);
+ *
+ * // Top right.
+ * pos.set(75, 25);
+ * point(pos);
+ *
+ * // Bottom right.
+ * let p2 = createVector(75, 75);
+ * pos.set(p2);
+ * point(pos);
+ *
+ * // Bottom left.
+ * let arr = [25, 75];
+ * pos.set(arr);
+ * point(pos);
+ *
+ * describe('Four black dots arranged in a square on a gray background.');
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ if (this.isPInst) {
+ return new _main.default.Vector(this._fromRadians, this._toRadians, this.x, this.y, this.z);
+ } else {
+ return new _main.default.Vector(this.x, this.y, this.z);
+ }
+ } /**
+ * Adds to a vector's `x`, `y`, and `z` components using separate numbers,
+ * another p5.Vector object, or an array of numbers.
+ * Calling `add()` with no arguments has no effect.
+ *
+ * The static version of `add()`, as in `p5.Vector.add(v2, v1)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method add
+ * @param {Number} x x component of the vector to be added.
+ * @param {Number} [y] y component of the vector to be added.
+ * @param {Number} [z] z component of the vector to be added.
+ * @chainable
+ * @example
+ *
+ * let pos = createVector(50, 50);
+ * let pc = pos.copy();
+ *
+ * strokeWeight(5);
+ * point(pc);
+ *
+ * describe('A black point drawn in the middle of a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * // Top left.
+ * let pos = createVector(25, 25);
+ * point(pos);
+ *
+ * // Top right.
+ * pos.add(50, 0);
+ * point(pos);
+ *
+ * // Bottom right.
+ * let p2 = createVector(0, 50);
+ * pos.add(p2);
+ * point(pos);
+ *
+ * // Bottom left.
+ * let arr = [-50, 0];
+ * pos.add(arr);
+ * point(pos);
+ *
+ * describe('Four black dots arranged in a square on a gray background.');
+ *
+ *
+ *
+ *
+ *
+ * // Top left.
+ * let p1 = createVector(25, 25);
+ *
+ * // Center.
+ * let p2 = createVector(50, 50);
+ *
+ * // Bottom right.
+ * let p3 = p5.Vector.add(p1, p2);
+ *
+ * strokeWeight(5);
+ * point(p1);
+ * point(p2);
+ * point(p3);
+ *
+ * describe('Three black dots in a diagonal line from top left to bottom right.');
+ *
+ *
+ *
+ */
+ /**
+ * @method add
+ * @param {p5.Vector|Number[]} value The vector to add
+ * @chainable
+ */
+
+ },
+ {
+ key: 'add',
+ value: function add(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x += x.x || 0;
+ this.y += x.y || 0;
+ this.z += x.z || 0;
+ return this;
+ }
+ if (Array.isArray(x)) {
+ this.x += x[0] || 0;
+ this.y += x[1] || 0;
+ this.z += x[2] || 0;
+ return this;
+ }
+ this.x += x || 0;
+ this.y += y || 0;
+ this.z += z || 0;
+ return this;
+ } /**
+ * Performs modulo (remainder) division with a vector's `x`, `y`, and `z`
+ * components using separate numbers, another
+ * p5.Vector object, or an array of numbers.
+ *
+ * The static version of `rem()` as in `p5.Vector.rem(v2, v1)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method rem
+ * @param {Number} x x component of divisor vector.
+ * @param {Number} y y component of divisor vector.
+ * @param {Number} z z component of divisor vector.
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ * let v1 = createVector(50, 50);
+ * drawArrow(origin, v1, 'red');
+ *
+ * let v2 = createVector(-30, 20);
+ * drawArrow(v1, v2, 'blue');
+ *
+ * let v3 = p5.Vector.add(v1, v2);
+ * drawArrow(origin, v3, 'purple');
+ *
+ * describe('Three arrows drawn on a gray square. A red arrow extends from the top left corner to the center. A blue arrow extends from the tip of the red arrow. A purple arrow extends from the origin to the tip of the blue arrow.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(3, 4, 5);
+ * v.rem(2, 3, 4);
+ * // Prints 'p5.Vector Object : [1, 1, 1]'.
+ * print(v.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v1 = createVector(3, 4, 5);
+ * let v2 = createVector(2, 3, 4);
+ * v1.rem(v2);
+ *
+ * // Prints 'p5.Vector Object : [1, 1, 1]'.
+ * print(v1.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(3, 4, 5);
+ * let arr = [2, 3, 4];
+ * v.rem(arr);
+ *
+ * // Prints 'p5.Vector Object : [1, 1, 1]'.
+ * print(v.toString());
+ *
+ *
+ *
+ */
+ /**
+ * @method rem
+ * @param {p5.Vector | Number[]} value divisor vector.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'rem',
+ value: function rem(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ if ([x.x,
+ x.y,
+ x.z].every(Number.isFinite)) {
+ var xComponent = parseFloat(x.x);
+ var yComponent = parseFloat(x.y);
+ var zComponent = parseFloat(x.z);
+ return calculateRemainder3D.call(this, xComponent, yComponent, zComponent);
+ }
+ } else if (Array.isArray(x)) {
+ if (x.every(function (element) {
+ return Number.isFinite(element);
+ })) {
+ if (x.length === 2) {
+ return calculateRemainder2D.call(this, x[0], x[1]);
+ }
+ if (x.length === 3) {
+ return calculateRemainder3D.call(this, x[0], x[1], x[2]);
+ }
+ }
+ } else if (arguments.length === 1) {
+ if (Number.isFinite(arguments[0]) && arguments[0] !== 0) {
+ this.x = this.x % arguments[0];
+ this.y = this.y % arguments[0];
+ this.z = this.z % arguments[0];
+ return this;
+ }
+ } else if (arguments.length === 2) {
+ var vectorComponents = Array.prototype.slice.call(arguments);
+ if (vectorComponents.every(function (element) {
+ return Number.isFinite(element);
+ })) {
+ if (vectorComponents.length === 2) {
+ return calculateRemainder2D.call(this, vectorComponents[0], vectorComponents[1]);
+ }
+ }
+ } else if (arguments.length === 3) {
+ var _vectorComponents = Array.prototype.slice.call(arguments);
+ if (_vectorComponents.every(function (element) {
+ return Number.isFinite(element);
+ })) {
+ if (_vectorComponents.length === 3) {
+ return calculateRemainder3D.call(this, _vectorComponents[0], _vectorComponents[1], _vectorComponents[2]);
+ }
+ }
+ }
+ } /**
+ * Subtracts from a vector's `x`, `y`, and `z` components using separate
+ * numbers, another p5.Vector object, or an array of
+ * numbers. Calling `sub()` with no arguments has no effect.
+ *
+ * The static version of `sub()`, as in `p5.Vector.sub(v2, v1)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method sub
+ * @param {Number} x x component of the vector to subtract.
+ * @param {Number} [y] y component of the vector to subtract.
+ * @param {Number} [z] z component of the vector to subtract.
+ * @chainable
+ * @example
+ *
+ * let v1 = createVector(3, 4, 5);
+ * let v2 = createVector(2, 3, 4);
+ * let v3 = p5.Vector.rem(v1, v2);
+ *
+ * // Prints 'p5.Vector Object : [1, 1, 1]'.
+ * print(v3.toString());
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * // Bottom right.
+ * let pos = createVector(75, 75);
+ * point(pos);
+ *
+ * // Top right.
+ * pos.sub(0, 50);
+ * point(pos);
+ *
+ * // Top left.
+ * let p2 = createVector(50, 0);
+ * pos.sub(p2);
+ * point(pos);
+ *
+ * // Bottom left.
+ * let arr = [0, -50];
+ * pos.sub(arr);
+ * point(pos);
+ *
+ * describe('Four black dots arranged in a square on a gray background.');
+ *
+ *
+ *
+ *
+ *
+ * // Bottom right.
+ * let p1 = createVector(75, 75);
+ *
+ * // Center.
+ * let p2 = createVector(50, 50);
+ *
+ * // Top left.
+ * let p3 = p5.Vector.sub(p1, p2);
+ *
+ * strokeWeight(5);
+ * point(p1);
+ * point(p2);
+ * point(p3);
+ *
+ * describe('Three black dots in a diagonal line from top left to bottom right.');
+ *
+ *
+ *
+ */
+ /**
+ * @method sub
+ * @param {p5.Vector|Number[]} value the vector to subtract
+ * @chainable
+ */
+
+ },
+ {
+ key: 'sub',
+ value: function sub(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ this.x -= x.x || 0;
+ this.y -= x.y || 0;
+ this.z -= x.z || 0;
+ return this;
+ }
+ if (Array.isArray(x)) {
+ this.x -= x[0] || 0;
+ this.y -= x[1] || 0;
+ this.z -= x[2] || 0;
+ return this;
+ }
+ this.x -= x || 0;
+ this.y -= y || 0;
+ this.z -= z || 0;
+ return this;
+ } /**
+ * Multiplies a vector's `x`, `y`, and `z` components by the same number,
+ * separate numbers, the components of another
+ * p5.Vector object, or an array of numbers. Calling
+ * `mult()` with no arguments has no effect.
+ *
+ * The static version of `mult()`, as in `p5.Vector.mult(v, 2)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method mult
+ * @param {Number} n The number to multiply with the vector
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ * let v1 = createVector(50, 50);
+ * drawArrow(origin, v1, 'red');
+ *
+ * let v2 = createVector(20, 70);
+ * drawArrow(origin, v2, 'blue');
+ *
+ * let v3 = p5.Vector.sub(v2, v1);
+ * drawArrow(v1, v3, 'purple');
+ *
+ * describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * p.mult(2);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * p.mult(2, 3);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * let arr = [2, 3];
+ * p.mult(arr);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * let p2 = createVector(2, 3);
+ * p.mult(p2);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(25, 25);
+ * point(p);
+ *
+ * let p2 = createVector(2, 3);
+ * let p3 = p5.Vector.mult(p, p2);
+ * point(p3);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ *
+ *
+ *
+ */
+ /**
+ * @method mult
+ * @param {Number} x number to multiply with the x component of the vector.
+ * @param {Number} y number to multiply with the y component of the vector.
+ * @param {Number} [z] number to multiply with the z component of the vector.
+ * @chainable
+ */
+ /**
+ * @method mult
+ * @param {Number[]} arr array to multiply with the components of the vector.
+ * @chainable
+ */
+ /**
+ * @method mult
+ * @param {p5.Vector} v vector to multiply with the components of the original vector.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'mult',
+ value: function mult(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ // new p5.Vector will check that values are valid upon construction but it's possible
+ // that someone could change the value of a component after creation, which is why we still
+ // perform this check
+ if (Number.isFinite(x.x) && Number.isFinite(x.y) && Number.isFinite(x.z) && typeof x.x === 'number' && typeof x.y === 'number' && typeof x.z === 'number') {
+ this.x *= x.x;
+ this.y *= x.y;
+ this.z *= x.z;
+ } else {
+ console.warn('p5.Vector.prototype.mult:', 'x contains components that are either undefined or not finite numbers');
+ }
+ return this;
+ }
+ if (Array.isArray(x)) {
+ if (x.every(function (element) {
+ return Number.isFinite(element);
+ }) && x.every(function (element) {
+ return typeof element === 'number';
+ })) {
+ if (x.length === 1) {
+ this.x *= x[0];
+ this.y *= x[0];
+ this.z *= x[0];
+ } else if (x.length === 2) {
+ this.x *= x[0];
+ this.y *= x[1];
+ } else if (x.length === 3) {
+ this.x *= x[0];
+ this.y *= x[1];
+ this.z *= x[2];
+ }
+ } else {
+ console.warn('p5.Vector.prototype.mult:', 'x contains elements that are either undefined or not finite numbers');
+ }
+ return this;
+ }
+ var vectorComponents = Array.prototype.slice.call(arguments);
+ if (vectorComponents.every(function (element) {
+ return Number.isFinite(element);
+ }) && vectorComponents.every(function (element) {
+ return typeof element === 'number';
+ })) {
+ if (arguments.length === 1) {
+ this.x *= x;
+ this.y *= x;
+ this.z *= x;
+ }
+ if (arguments.length === 2) {
+ this.x *= x;
+ this.y *= y;
+ }
+ if (arguments.length === 3) {
+ this.x *= x;
+ this.y *= y;
+ this.z *= z;
+ }
+ } else {
+ console.warn('p5.Vector.prototype.mult:', 'x, y, or z arguments are either undefined or not a finite number');
+ }
+ return this;
+ } /**
+ * Divides a vector's `x`, `y`, and `z` components by the same number,
+ * separate numbers, the components of another
+ * p5.Vector object, or an array of numbers. Calling
+ * `div()` with no arguments has no effect.
+ *
+ * The static version of `div()`, as in `p5.Vector.div(v, 2)`, returns a new
+ * p5.Vector object and doesn't change the
+ * originals.
+ *
+ * @method div
+ * @param {number} n The number to divide the vector by
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ * let v1 = createVector(25, 25);
+ * drawArrow(origin, v1, 'red');
+ *
+ * let v2 = p5.Vector.mult(v1, 2);
+ * drawArrow(origin, v2, 'blue');
+ *
+ * describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(50, 50);
+ * point(p);
+ *
+ * p.div(2);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(50, 75);
+ * point(p);
+ *
+ * p.div(2, 3);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(50, 75);
+ * point(p);
+ *
+ * let arr = [2, 3];
+ * p.div(arr);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(50, 75);
+ * point(p);
+ *
+ * let p2 = createVector(2, 3);
+ * p.div(p2);
+ * point(p);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ *
+ *
+ *
+ *
+ *
+ * strokeWeight(5);
+ *
+ * let p = createVector(50, 75);
+ * point(p);
+ *
+ * let p2 = createVector(2, 3);
+ * let p3 = p5.Vector.div(p, p2);
+ * point(p3);
+ *
+ * describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
+ *
+ *
+ *
+ */
+ /**
+ * @method div
+ * @param {Number} x number to divide with the x component of the vector.
+ * @param {Number} y number to divide with the y component of the vector.
+ * @param {Number} [z] number to divide with the z component of the vector.
+ * @chainable
+ */
+ /**
+ * @method div
+ * @param {Number[]} arr array to divide the components of the vector by.
+ * @chainable
+ */
+ /**
+ * @method div
+ * @param {p5.Vector} v vector to divide the components of the original vector by.
+ * @chainable
+ */
+
+ },
+ {
+ key: 'div',
+ value: function div(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ // new p5.Vector will check that values are valid upon construction but it's possible
+ // that someone could change the value of a component after creation, which is why we still
+ // perform this check
+ if (Number.isFinite(x.x) && Number.isFinite(x.y) && Number.isFinite(x.z) && typeof x.x === 'number' && typeof x.y === 'number' && typeof x.z === 'number') {
+ var isLikely2D = x.z === 0 && this.z === 0;
+ if (x.x === 0 || x.y === 0 || !isLikely2D && x.z === 0) {
+ console.warn('p5.Vector.prototype.div:', 'divide by 0');
+ return this;
+ }
+ this.x /= x.x;
+ this.y /= x.y;
+ if (!isLikely2D) {
+ this.z /= x.z;
+ }
+ } else {
+ console.warn('p5.Vector.prototype.div:', 'x contains components that are either undefined or not finite numbers');
+ }
+ return this;
+ }
+ if (Array.isArray(x)) {
+ if (x.every(function (element) {
+ return Number.isFinite(element);
+ }) && x.every(function (element) {
+ return typeof element === 'number';
+ })) {
+ if (x.some(function (element) {
+ return element === 0;
+ })) {
+ console.warn('p5.Vector.prototype.div:', 'divide by 0');
+ return this;
+ }
+ if (x.length === 1) {
+ this.x /= x[0];
+ this.y /= x[0];
+ this.z /= x[0];
+ } else if (x.length === 2) {
+ this.x /= x[0];
+ this.y /= x[1];
+ } else if (x.length === 3) {
+ this.x /= x[0];
+ this.y /= x[1];
+ this.z /= x[2];
+ }
+ } else {
+ console.warn('p5.Vector.prototype.div:', 'x contains components that are either undefined or not finite numbers');
+ }
+ return this;
+ }
+ var vectorComponents = Array.prototype.slice.call(arguments);
+ if (vectorComponents.every(function (element) {
+ return Number.isFinite(element);
+ }) && vectorComponents.every(function (element) {
+ return typeof element === 'number';
+ })) {
+ if (vectorComponents.some(function (element) {
+ return element === 0;
+ })) {
+ console.warn('p5.Vector.prototype.div:', 'divide by 0');
+ return this;
+ }
+ if (arguments.length === 1) {
+ this.x /= x;
+ this.y /= x;
+ this.z /= x;
+ }
+ if (arguments.length === 2) {
+ this.x /= x;
+ this.y /= y;
+ }
+ if (arguments.length === 3) {
+ this.x /= x;
+ this.y /= y;
+ this.z /= z;
+ }
+ } else {
+ console.warn('p5.Vector.prototype.div:', 'x, y, or z arguments are either undefined or not a finite number');
+ }
+ return this;
+ } /**
+ * Returns the magnitude (length) of the vector.
+ *
+ * @method mag
+ * @return {Number} magnitude of the vector.
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ * let v1 = createVector(50, 50);
+ * drawArrow(origin, v1, 'red');
+ *
+ * let v2 = p5.Vector.div(v1, 2);
+ * drawArrow(origin, v2, 'blue');
+ *
+ * describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'mag',
+ value: function mag() {
+ return Math.sqrt(this.magSq());
+ } /**
+ * Returns the magnitude (length) of the vector squared.
+ *
+ * @method magSq
+ * @return {number} squared magnitude of the vector.
+ * @example
+ *
+ * let p = createVector(30, 40);
+ * line(0, 0, p.x, p.y);
+ *
+ * let m = p.mag();
+ * text(m, p.x, p.y);
+ *
+ * describe('A diagonal black line extends from the top left corner of a gray square. The number 50 is written at the end of the line.');
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'magSq',
+ value: function magSq() {
+ var x = this.x;
+ var y = this.y;
+ var z = this.z;
+ return x * x + y * y + z * z;
+ } /**
+ * Returns the dot product of two vectors. The dot product is a number that
+ * describes the overlap between two vectors. Visually, the dot product can be
+ * thought of as the "shadow" one vector casts on another. The dot product's
+ * magnitude is largest when two vectors point in the same or opposite
+ * directions. Its magnitude is 0 when two vectors form a right angle.
+ *
+ * The version of `dot()` with one parameter interprets it as another
+ * p5.Vector object.
+ *
+ * The version of `dot()` with multiple parameters interprets them as the
+ * `x`, `y`, and `z` components of another vector.
+ *
+ * The static version of `dot()`, as in `p5.Vector.dot(v1, v2)`, is the same
+ * as calling `v1.dot(v2)`.
+ *
+ * @method dot
+ * @param {Number} x x component of the vector.
+ * @param {Number} [y] y component of the vector.
+ * @param {Number} [z] z component of the vector.
+ * @return {Number} dot product.
+ *
+ * @example
+ *
+ * let p = createVector(30, 40);
+ * line(0, 0, p.x, p.y);
+ *
+ * let m = p.magSq();
+ * text(m, p.x, p.y);
+ *
+ * describe('A diagonal black line extends from the top left corner of a gray square. The number 2500 is written at the end of the line.');
+ *
+ *
+ *
+ *
+ *
+ * let v1 = createVector(3, 4);
+ * let v2 = createVector(3, 0);
+ * let dp = v1.dot(v2);
+ * // Prints "9" to the console.
+ * print(dp);
+ *
+ *
+ *
+ *
+ *
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(0, 1);
+ * let dp = p5.Vector.dot(v1, v2);
+ * // Prints "0" to the console.
+ * print(dp);
+ *
+ *
+ *
+ */
+ /**
+ * @method dot
+ * @param {p5.Vector} v p5.Vector to be dotted.
+ * @return {Number}
+ */
+
+ },
+ {
+ key: 'dot',
+ value: function dot(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ return this.dot(x.x, x.y, x.z);
+ }
+ return this.x * (x || 0) + this.y * (y || 0) + this.z * (z || 0);
+ } /**
+ * Returns the cross product of two vectors. The cross product is a vector
+ * that points straight out of the plane created by two vectors. The cross
+ * product's magnitude is the area of the parallelogram formed by the original
+ * two vectors.
+ *
+ * The static version of `cross()`, as in `p5.Vector.cross(v1, v2)`, is the same
+ * as calling `v1.cross(v2)`.
+ *
+ * @method cross
+ * @param {p5.Vector} v p5.Vector to be crossed.
+ * @return {p5.Vector} cross product as a p5.Vector.
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let v0 = createVector(width / 2, height / 2);
+ * let v1 = createVector(30, 0);
+ * drawArrow(v0, v1, 'black');
+ *
+ * let v2 = createVector(mouseX - width / 2, mouseY - height / 2);
+ * drawArrow(v0, v2, 'red');
+ *
+ * let dp = v2.dot(v1);
+ * text(`v2 • v1 = ${dp}`, 15, 20);
+ *
+ * describe('Two arrows drawn on a gray square. A black arrow points to the right and a red arrow follows the mouse. The text "v1 • v2 = something" changes as the mouse moves.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(3, 4);
+ * let cp = v1.cross(v2);
+ * // Prints "p5.Vector Object : [0, 0, 4]" to the console.
+ * print(cp.toString());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'cross',
+ value: function cross(v) {
+ var x = this.y * v.z - this.z * v.y;
+ var y = this.z * v.x - this.x * v.z;
+ var z = this.x * v.y - this.y * v.x;
+ if (this.isPInst) {
+ return new _main.default.Vector(this._fromRadians, this._toRadians, x, y, z);
+ } else {
+ return new _main.default.Vector(x, y, z);
+ }
+ } /**
+ * Returns the distance between two points represented by vectors. A point's
+ * coordinates can be thought of as a vector's components.
+ *
+ * The static version of `dist()`, as in `p5.Vector.dist(v1, v2)`, is the same
+ * as calling `v1.dist(v2)`.
+ *
+ * Use dist() to calculate the distance between points
+ * using coordinates as in `dist(x1, y1, x2, y2)`.
+ *
+ * @method dist
+ * @param {p5.Vector} v x, y, and z coordinates of a p5.Vector.
+ * @return {Number} distance.
+ * @example
+ *
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(3, 4);
+ * let cp = p5.Vector.cross(v1, v2);
+ * // Prints "p5.Vector Object : [0, 0, 4]" to the console.
+ * print(cp.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(0, 1);
+ * let d = v1.dist(v2);
+ * // Prints "1.414..." to the console.
+ * print(d);
+ *
+ *
+ *
+ *
+ *
+ * let v1 = createVector(1, 0);
+ * let v2 = createVector(0, 1);
+ * let d = p5.Vector.dist(v1, v2);
+ * // Prints "1.414..." to the console.
+ * print(d);
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'dist',
+ value: function dist(v) {
+ return v.copy().sub(this).mag();
+ } /**
+ * Scales the components of a p5.Vector object so
+ * that its magnitude is 1.
+ *
+ * The static version of `normalize()`, as in `p5.Vector.normalize(v)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method normalize
+ * @return {p5.Vector} normalized p5.Vector.
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ * let v1 = createVector(50, 50);
+ * drawArrow(origin, v1, 'red');
+ *
+ * let v2 = createVector(20, 70);
+ * drawArrow(origin, v2, 'blue');
+ *
+ * let v3 = p5.Vector.sub(v2, v1);
+ * drawArrow(v1, v3, 'purple');
+ *
+ * let m = floor(v3.mag());
+ * text(m, 50, 75);
+ *
+ * describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow. The number 36 is written in black near the purple arrow.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * v.normalize();
+ * // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(10, 20, 2);
+ * let v1 = p5.Vector.normalize(v0);
+ * // Prints "p5.Vector Object : [10, 20, 2]" to the console.
+ * print(v0.toString());
+ * // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the console.
+ * print(v1.toString());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'normalize',
+ value: function normalize() {
+ var len = this.mag();
+ // here we multiply by the reciprocal instead of calling 'div()'
+ // since div duplicates this zero check.
+ if (len !== 0) this.mult(1 / len);
+ return this;
+ } /**
+ * Limits a vector's magnitude to a maximum value.
+ *
+ * The static version of `limit()`, as in `p5.Vector.limit(v, 5)`, returns a
+ * new p5.Vector object and doesn't change the
+ * original.
+ *
+ * @method limit
+ * @param {Number} max maximum magnitude for the vector.
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * let r = 25;
+ * drawArrow(v0, v1, 'red');
+ * v1.normalize();
+ * drawArrow(v0, v1.mult(r), 'blue');
+ *
+ * noFill();
+ * circle(50, 50, r * 2);
+ *
+ * describe("A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow's length is fixed to the circle's radius.");
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * v.limit(5);
+ * // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(10, 20, 2);
+ * let v1 = p5.Vector.limit(v0, 5);
+ * // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the console.
+ * print(v1.toString());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'limit',
+ value: function limit(max) {
+ var mSq = this.magSq();
+ if (mSq > max * max) {
+ this.div(Math.sqrt(mSq)) //normalize it
+ .mult(max);
+ }
+ return this;
+ } /**
+ * Sets a vector's magnitude to a given value.
+ *
+ * The static version of `setMag()`, as in `p5.Vector.setMag(v, 10)`, returns
+ * a new p5.Vector object and doesn't change the
+ * original.
+ *
+ * @method setMag
+ * @param {number} len new length for this vector.
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * let r = 25;
+ * drawArrow(v0, v1, 'red');
+ * drawArrow(v0, v1.limit(r), 'blue');
+ *
+ * noFill();
+ * circle(50, 50, r * 2);
+ *
+ * describe("A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow never crosses the circle's edge.");
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(3, 4, 0);
+ * // Prints "5" to the console.
+ * print(v.mag());
+ *
+ * v.setMag(10);
+ * // Prints "p5.Vector Object : [6, 8, 0]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(3, 4, 0);
+ * let v1 = p5.Vector.setMag(v0, 10);
+ * // Prints "5" to the console.
+ * print(v0.mag());
+ * // Prints "p5.Vector Object : [6, 8, 0]" to the console.
+ * print(v1.toString());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setMag',
+ value: function setMag(n) {
+ return this.normalize().mult(n);
+ } /**
+ * Calculates the angle a 2D vector makes with the positive x-axis. Angles
+ * increase in the clockwise direction.
+ *
+ * If the vector was created with
+ * createVector(), `heading()` returns angles
+ * in the units of the current angleMode().
+ *
+ * The static version of `heading()`, as in `p5.Vector.heading(v)`, works the
+ * same way.
+ *
+ * @method heading
+ * @return {Number} angle of rotation.
+ * @example
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let origin = createVector(0, 0);
+ * let v = createVector(50, 50);
+ *
+ * drawArrow(origin, v, 'red');
+ *
+ * v.setMag(30);
+ * drawArrow(origin, v, 'blue');
+ *
+ * describe('Two arrows extend from the top left corner of a square toward its center. The red arrow reaches the center and the blue arrow only extends part of the way.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(1, 1);
+ * // Prints "0.785..." to the console.
+ * print(v.heading());
+ *
+ * angleMode(DEGREES);
+ * // Prints "45" to the console.
+ * print(v.heading());
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(1, 1);
+ * // Prints "0.785..." to the console.
+ * print(p5.Vector.heading(v));
+ *
+ * angleMode(DEGREES);
+ * // Prints "45" to the console.
+ * print(p5.Vector.heading(v));
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'heading',
+ value: function heading() {
+ var h = Math.atan2(this.y, this.x);
+ if (this.isPInst) return this._fromRadians(h);
+ return h;
+ } /**
+ * Rotates a 2D vector to a specific angle without changing its magnitude.
+ * By convention, the positive x-axis has an angle of 0. Angles increase in
+ * the clockwise direction.
+ *
+ * If the vector was created with
+ * createVector(), `setHeading()` uses
+ * the units of the current angleMode().
+ *
+ * @method setHeading
+ * @param {number} angle angle of rotation.
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let origin = createVector(0, 0);
+ * let v = createVector(50, 50);
+ *
+ * drawArrow(origin, v, 'black');
+ *
+ * angleMode(RADIANS);
+ * let h = round(v.heading(), 2);
+ * text(`Radians: ${h}`, 20, 70);
+ * angleMode(DEGREES);
+ * h = v.heading();
+ * text(`Degrees: ${h}`, 20, 85);
+ *
+ * describe('A black arrow extends from the top left of a square to its center. The text "Radians: 0.79" and "Degrees: 45" is written near the tip of the arrow.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(0, 1);
+ * // Prints "1.570..." to the console.
+ * print(v.heading());
+ *
+ * v.setHeading(PI);
+ * // Prints "3.141..." to the console.
+ * print(v.heading());
+ *
+ *
+ *
+ *
+ *
+ * angleMode(DEGREES);
+ * let v = createVector(0, 1);
+ * // Prints "90" to the console.
+ * print(v.heading());
+ *
+ * v.setHeading(180);
+ * // Prints "180" to the console.
+ * print(v.heading());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'setHeading',
+ value: function setHeading(a) {
+ if (this.isPInst) a = this._toRadians(a);
+ var m = this.mag();
+ this.x = m * Math.cos(a);
+ this.y = m * Math.sin(a);
+ return this;
+ } /**
+ * Rotates a 2D vector by an angle without changing its magnitude.
+ * By convention, the positive x-axis has an angle of 0. Angles increase in
+ * the clockwise direction.
+ *
+ * If the vector was created with
+ * createVector(), `rotate()` uses
+ * the units of the current angleMode().
+ *
+ * The static version of `rotate()`, as in `p5.Vector.rotate(v, PI)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method rotate
+ * @param {number} angle angle of rotation.
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(30, 0);
+ *
+ * drawArrow(v0, v1, 'red');
+ *
+ * v1.setHeading(HALF_PI);
+ * drawArrow(v0, v1, 'blue');
+ *
+ * describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(1, 0);
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v.toString());
+ * v.rotate(HALF_PI);
+ * // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ *
+ *
+ * angleMode(DEGREES);
+ * let v = createVector(1, 0);
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v.toString());
+ * v.rotate(90);
+ * // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(1, 0);
+ * let v1 = p5.Vector.rotate(v0, HALF_PI);
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v0.toString());
+ * // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+ * print(v1.toString());
+ *
+ *
+ *
+ *
+ *
+ * angleMode(DEGREES);
+ * let v0 = createVector(1, 0);
+ * let v1 = p5.Vector.rotate(v0, 90);
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v0.toString());
+ * // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+ * print(v1.toString());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'rotate',
+ value: function rotate(a) {
+ var newHeading = this.heading() + a;
+ if (this.isPInst) newHeading = this._toRadians(newHeading);
+ var mag = this.mag();
+ this.x = Math.cos(newHeading) * mag;
+ this.y = Math.sin(newHeading) * mag;
+ return this;
+ } /**
+ * Returns the angle between two vectors. The angles returned are signed,
+ * which means that `v1.angleBetween(v2) === -v2.angleBetween(v1)`.
+ *
+ * If the vector was created with
+ * createVector(), `angleBetween()` returns
+ * angles in the units of the current
+ * angleMode().
+ *
+ * @method angleBetween
+ * @param {p5.Vector} value x, y, and z components of a p5.Vector.
+ * @return {Number} angle between the vectors.
+ * @example
+ *
+ * let v0;
+ * let v1;
+ *
+ * function setup() {
+ * v0 = createVector(50, 50);
+ * v1 = createVector(30, 0);
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * v1.rotate(0.01);
+ *
+ * drawArrow(v0, v1, 'black');
+ *
+ * describe('A black arrow extends from the center of a gray square. The arrow rotates counterclockwise.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(1, 0);
+ * let v1 = createVector(0, 1);
+ * // Prints "1.570..." to the console.
+ * print(v0.angleBetween(v1));
+ * // Prints "-1.570..." to the console.
+ * print(v1.angleBetween(v0));
+ *
+ *
+ *
+ *
+ *
+ * angleMode(DEGREES);
+ * let v0 = createVector(1, 0);
+ * let v1 = createVector(0, 1);
+ * // Prints "90" to the console.
+ * print(v0.angleBetween(v1));
+ * // Prints "-90" to the console.
+ * print(v1.angleBetween(v0));
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(1, 0);
+ * let v1 = createVector(0, 1);
+ * // Prints "1.570..." to the console.
+ * print(p5.Vector.angleBetween(v0, v1));
+ * // Prints "-1.570..." to the console.
+ * print(p5.Vector.angleBetween(v1, v0));
+ *
+ *
+ *
+ *
+ *
+ * angleMode(DEGREES);
+ * let v0 = createVector(1, 0);
+ * let v1 = createVector(0, 1);
+ * // Prints "90" to the console.
+ * print(p5.Vector.angleBetween(v0, v1));
+ * // Prints "-90" to the console.
+ * print(p5.Vector.angleBetween(v1, v0));
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'angleBetween',
+ value: function angleBetween(v) {
+ var magSqMult = this.magSq() * v.magSq();
+ // Returns NaN if either vector is the zero vector.
+ if (magSqMult === 0) {
+ return NaN;
+ }
+ var u = this.cross(v);
+ // The dot product computes the cos value, and the cross product computes
+ // the sin value. Find the angle based on them. In addition, in the case of
+ // 2D vectors, a sign is added according to the direction of the vector.
+ var angle = Math.atan2(u.mag(), this.dot(v)) * Math.sign(u.z || 1);
+ if (this.isPInst) {
+ angle = this._fromRadians(angle);
+ }
+ return angle;
+ } /**
+ * Calculates new `x`, `y`, and `z` components that are proportionally the
+ * same distance between two vectors. The `amt` parameter is the amount to
+ * interpolate between the old vector and the new vector. 0.0 keeps all
+ * components equal to the old vector's, 0.5 is halfway between, and 1.0 sets
+ * all components equal to the new vector's.
+ *
+ * The static version of `lerp()`, as in `p5.Vector.lerp(v0, v1, 0.5)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method lerp
+ * @param {Number} x x component.
+ * @param {Number} y y component.
+ * @param {Number} z z component.
+ * @param {Number} amt amount of interpolation between 0.0 (old vector)
+ * and 1.0 (new vector). 0.5 is halfway between.
+ * @chainable
+ *
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(30, 0);
+ * let v2 = createVector(0, 30);
+ *
+ * drawArrow(v0, v1, 'red');
+ * drawArrow(v0, v2, 'blue');
+ *
+ * angleMode(RADIANS);
+ * let angle = round(v1.angleBetween(v2), 2);
+ * text(`Radians: ${angle}`, 20, 20);
+ * angleMode(DEGREES);
+ * angle = round(v1.angleBetween(v2), 2);
+ * text(`Degrees: ${angle}`, 20, 35);
+ *
+ * describe('Two arrows extend from the center of a gray square. A red arrow points to the right and a blue arrow points down. The text "Radians: 1.57" and "Degrees: 90" is written above the arrows.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(1, 1, 1);
+ * let v1 = createVector(3, 3, 3);
+ * v0.lerp(v1, 0.5);
+ * // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+ * print(v0.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v = createVector(1, 1, 1);
+ * v.lerp(3, 3, 3, 0.5);
+ * // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(1, 1, 1);
+ * let v1 = createVector(3, 3, 3);
+ * let v2 = p5.Vector.lerp(v0, v1, 0.5);
+ * // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+ * print(v2.toString());
+ *
+ *
+ *
+ */
+ /**
+ * @method lerp
+ * @param {p5.Vector} v p5.Vector to lerp toward.
+ * @param {Number} amt
+ * @chainable
+ */
+
+ },
+ {
+ key: 'lerp',
+ value: function lerp(x, y, z, amt) {
+ if (x instanceof _main.default.Vector) {
+ return this.lerp(x.x, x.y, x.z, y);
+ }
+ this.x += (x - this.x) * amt || 0;
+ this.y += (y - this.y) * amt || 0;
+ this.z += (z - this.z) * amt || 0;
+ return this;
+ } /**
+ * Calculates a new heading and magnitude that are between two vectors. The
+ * `amt` parameter is the amount to interpolate between the old vector and
+ * the new vector. 0.0 keeps the heading and magnitude equal to the old
+ * vector's, 0.5 sets them halfway between, and 1.0 sets the heading and
+ * magnitude equal to the new vector's.
+ *
+ * `slerp()` differs from lerp() because
+ * it interpolates magnitude. Calling `v0.slerp(v1, 0.5)` sets `v0`'s
+ * magnitude to a value halfway between its original magnitude and `v1`'s.
+ * Calling `v0.lerp(v1, 0.5)` makes no such guarantee.
+ *
+ * The static version of `slerp()`, as in `p5.Vector.slerp(v0, v1, 0.5)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method slerp
+ * @param {p5.Vector} v p5.Vector to slerp toward.
+ * @param {Number} amt amount of interpolation between 0.0 (old vector)
+ * and 1.0 (new vector). 0.5 is halfway between.
+ * @return {p5.Vector}
+ *
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(30, 0);
+ * let v2 = createVector(0, 30);
+ * let v3 = p5.Vector.lerp(v1, v2, 0.5);
+ *
+ * drawArrow(v0, v1, 'red');
+ * drawArrow(v0, v2, 'blue');
+ * drawArrow(v0, v3, 'purple');
+ *
+ * describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points down, and a purple arrow points to the bottom right.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(3, 0);
+ * // Prints "3" to the console.
+ * print(v0.mag());
+ * // Prints "0" to the console.
+ * print(v0.heading());
+ *
+ * let v1 = createVector(0, 1);
+ * // Prints "1" to the console.
+ * print(v1.mag());
+ * // Prints "1.570..." to the console.
+ * print(v1.heading());
+ *
+ * v0.slerp(v1, 0.5);
+ * // Prints "2" to the console.
+ * print(v0.mag());
+ * // Prints "0.785..." to the console.
+ * print(v0.heading());
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(3, 0);
+ * // Prints "3" to the console.
+ * print(v0.mag());
+ * // Prints "0" to the console.
+ * print(v0.heading());
+ *
+ * let v1 = createVector(0, 1);
+ * // Prints "1" to the console.
+ * print(v1.mag());
+ * // Prints "1.570..." to the console.
+ * print(v1.heading());
+ *
+ * let v3 = p5.Vector.slerp(v0, v1, 0.5);
+ * // Prints "2" to the console.
+ * print(v3.mag());
+ * // Prints "0.785..." to the console.
+ * print(v3.heading());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'slerp',
+ value: function slerp(v, amt) {
+ // edge cases.
+ if (amt === 0) {
+ return this;
+ }
+ if (amt === 1) {
+ return this.set(v);
+ } // calculate magnitudes
+
+ var selfMag = this.mag();
+ var vMag = v.mag();
+ var magmag = selfMag * vMag;
+ // if either is a zero vector, linearly interpolate by these vectors
+ if (magmag === 0) {
+ this.mult(1 - amt).add(v.x * amt, v.y * amt, v.z * amt);
+ return this;
+ } // the cross product of 'this' and 'v' is the axis of rotation
+
+ var axis = this.cross(v);
+ var axisMag = axis.mag();
+ // Calculates the angle between 'this' and 'v'
+ var theta = Math.atan2(axisMag, this.dot(v));
+ // However, if the norm of axis is 0, normalization cannot be performed,
+ // so we will divide the cases
+ if (axisMag > 0) {
+ axis.x /= axisMag;
+ axis.y /= axisMag;
+ axis.z /= axisMag;
+ } else if (theta < Math.PI * 0.5) {
+ // if the norm is 0 and the angle is less than PI/2,
+ // the angle is very close to 0, so do linear interpolation.
+ this.mult(1 - amt).add(v.x * amt, v.y * amt, v.z * amt);
+ return this;
+ } else {
+ // If the norm is 0 and the angle is more than PI/2, the angle is
+ // very close to PI.
+ // In this case v can be regarded as '-this', so take any vector
+ // that is orthogonal to 'this' and use that as the axis.
+ if (this.z === 0 && v.z === 0) {
+ // if both this and v are 2D vectors, use (0,0,1)
+ // this makes the result also a 2D vector.
+ axis.set(0, 0, 1);
+ } else if (this.x !== 0) {
+ // if the x components is not 0, use (y, -x, 0)
+ axis.set(this.y, - this.x, 0).normalize();
+ } else {
+ // if the x components is 0, use (1,0,0)
+ axis.set(1, 0, 0);
+ }
+ } // Since 'axis' is a unit vector, ey is a vector of the same length as 'this'.
+
+ var ey = axis.cross(this);
+ // interpolate the length with 'this' and 'v'.
+ var lerpedMagFactor = 1 - amt + amt * vMag / selfMag;
+ // imagine a situation where 'axis', 'this', and 'ey' are pointing
+ // along the z, x, and y axes, respectively.
+ // rotates 'this' around 'axis' by amt * theta towards 'ey'.
+ var cosMultiplier = lerpedMagFactor * Math.cos(amt * theta);
+ var sinMultiplier = lerpedMagFactor * Math.sin(amt * theta);
+ // then, calculate 'result'.
+ this.x = this.x * cosMultiplier + ey.x * sinMultiplier;
+ this.y = this.y * cosMultiplier + ey.y * sinMultiplier;
+ this.z = this.z * cosMultiplier + ey.z * sinMultiplier;
+ return this;
+ } /**
+ * Reflects a vector about a line in 2D or a plane in 3D. The orientation of
+ * the line or plane is described by a normal vector that points away from the
+ * shape.
+ *
+ * The static version of `reflect()`, as in `p5.Vector.reflect(v, n)`,
+ * returns a new p5.Vector object and doesn't change
+ * the original.
+ *
+ * @method reflect
+ * @param {p5.Vector} surfaceNormal p5.Vector
+ * to reflect about.
+ * @chainable
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(20, 0);
+ * let v2 = createVector(-40, 0);
+ * let v3 = p5.Vector.slerp(v1, v2, 0.5);
+ *
+ * drawArrow(v0, v1, 'red');
+ * drawArrow(v0, v2, 'blue');
+ * drawArrow(v0, v3, 'purple');
+ *
+ * describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points to the left, and a purple arrow points down.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let n = createVector(0, 1);
+ * let v = createVector(4, 6);
+ * v.reflect(n);
+ * // Prints "p5.Vector Object : [4, -6, 0]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ *
+ *
+ * let n = createVector(0, 1);
+ * let v0 = createVector(4, 6);
+ * let v1 = p5.Vector.reflect(v0, n);
+ * // Prints "p5.Vector Object : [4, -6, 0]" to the console.
+ * print(v1.toString());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'reflect',
+ value: function reflect(surfaceNormal) {
+ surfaceNormal.normalize();
+ return this.sub(surfaceNormal.mult(2 * this.dot(surfaceNormal)));
+ } /**
+ * Returns the vector's components as an array of numbers.
+ *
+ * @method array
+ * @return {Number[]} array with the vector's components.
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * line(50, 0, 50, 100);
+ * let n = createVector(1, 0);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(30, 40);
+ * let v2 = p5.Vector.reflect(v1, n);
+ *
+ * n.setMag(30);
+ * drawArrow(v0, n, 'black');
+ * drawArrow(v0, v1, 'red');
+ * drawArrow(v0, v2, 'blue');
+ *
+ * describe('Three arrows extend from the center of a gray square with a vertical line down its middle. A black arrow points to the right, a blue arrow points to the bottom left, and a red arrow points to the bottom right.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'array',
+ value: function array() {
+ return [this.x || 0,
+ this.y || 0,
+ this.z || 0];
+ } /**
+ * Returns `true` if the vector's components are all the same as another
+ * vector's and `false` if not.
+ *
+ * The version of `equals()` with one parameter interprets it as another
+ * p5.Vector object.
+ *
+ * The version of `equals()` with multiple parameters interprets them as the
+ * components of another vector. Any missing parameters are assigned the value
+ * 0.
+ *
+ * The static version of `equals()`, as in `p5.Vector.equals(v0, v1)`,
+ * interprets both parameters as p5.Vector objects.
+ *
+ * @method equals
+ * @param {Number} [x] x component of the vector.
+ * @param {Number} [y] y component of the vector.
+ * @param {Number} [z] z component of the vector.
+ * @return {Boolean} whether the vectors are equal.
+ * @example
+ *
+ * let v = createVector(20, 30);
+ * // Prints "[20, 30, 0]" to the console.
+ * print(v.array());
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(10, 20, 30);
+ * let v1 = createVector(10, 20, 30);
+ * let v2 = createVector(0, 0, 0);
+ *
+ * // Prints "true" to the console.
+ * print(v0.equals(v1));
+ * // Prints "false" to the console.
+ * print(v0.equals(v2));
+ *
+ *
+ *
+ *
+ *
+ * let v0 = createVector(5, 10, 20);
+ * let v1 = createVector(5, 10, 20);
+ * let v2 = createVector(13, 10, 19);
+ *
+ * // Prints "true" to the console.
+ * print(v0.equals(v1.x, v1.y, v1.z));
+ * // Prints "false" to the console.
+ * print(v0.equals(v2.x, v2.y, v2.z));
+ *
+ *
+ *
+ */
+ /**
+ * @method equals
+ * @param {p5.Vector|Array} value vector to compare.
+ * @return {Boolean}
+ */
+
+ },
+ {
+ key: 'equals',
+ value: function equals(x, y, z) {
+ var a,
+ b,
+ c;
+ if (x instanceof _main.default.Vector) {
+ a = x.x || 0;
+ b = x.y || 0;
+ c = x.z || 0;
+ } else if (Array.isArray(x)) {
+ a = x[0] || 0;
+ b = x[1] || 0;
+ c = x[2] || 0;
+ } else {
+ a = x || 0;
+ b = y || 0;
+ c = z || 0;
+ }
+ return this.x === a && this.y === b && this.z === c;
+ } // Static Methods
+ /**
+ * Make a new 2D vector from an angle.
+ *
+ * @method fromAngle
+ * @static
+ * @param {Number} angle desired angle, in radians. Unaffected by angleMode().
+ * @param {Number} [length] length of the new vector (defaults to 1).
+ * @return {p5.Vector} new p5.Vector object.
+ * @example
+ *
+ * let v0 = createVector(10, 20, 30);
+ * let v1 = createVector(10, 20, 30);
+ * let v2 = createVector(0, 0, 0);
+ *
+ * // Prints "true" to the console.
+ * print(p5.Vector.equals(v0, v1));
+ * // Prints "false" to the console.
+ * print(p5.Vector.equals(v0, v2));
+ *
+ *
+ *
+ *
+ *
+ * let v = p5.Vector.fromAngle(0);
+ * // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ */
+
+ }
+ ], [
+ {
+ key: 'fromAngle',
+ value: function fromAngle(angle, length) {
+ if (typeof length === 'undefined') {
+ length = 1;
+ }
+ return new _main.default.Vector(length * Math.cos(angle), length * Math.sin(angle), 0);
+ } /**
+ * Make a new 3D vector from a pair of ISO spherical angles.
+ *
+ * @method fromAngles
+ * @static
+ * @param {Number} theta polar angle in radians (zero is up).
+ * @param {Number} phi azimuthal angle in radians
+ * (zero is out of the screen).
+ * @param {Number} [length] length of the new vector (defaults to 1).
+ * @return {p5.Vector} new p5.Vector object.
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = p5.Vector.fromAngle(0, 30);
+ *
+ * drawArrow(v0, v1, 'black');
+ *
+ * describe('A black arrow extends from the center of a gray square. It points to the right.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = p5.Vector.fromAngles(0, 0);
+ * // Prints "p5.Vector Object : [0, -1, 0]" to the console.
+ * print(v.toString());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'fromAngles',
+ value: function fromAngles(theta, phi, length) {
+ if (typeof length === 'undefined') {
+ length = 1;
+ }
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+ return new _main.default.Vector(length * sinTheta * sinPhi, - length * cosTheta, length * sinTheta * cosPhi);
+ } /**
+ * Make a new 2D unit vector with a random heading.
+ *
+ * @method random2D
+ * @static
+ * @return {p5.Vector} new p5.Vector object.
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * fill(255);
+ * noStroke();
+ *
+ * let theta = frameCount * 0.05;
+ * let phi = 0;
+ * let v = p5.Vector.fromAngles(theta, phi, 100);
+ * let c = color('deeppink');
+ * pointLight(c, v);
+ *
+ * sphere(35);
+ *
+ * describe('A light shines on a pink sphere as it orbits.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let v = p5.Vector.random2D();
+ * // Prints "p5.Vector Object : [x, y, 0]" to the console
+ * // where x and y are small random numbers.
+ * print(v.toString());
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'random2D',
+ value: function random2D() {
+ return this.fromAngle(Math.random() * constants.TWO_PI);
+ } /**
+ * Make a new 3D unit vector with a random heading.
+ *
+ * @method random3D
+ * @static
+ * @return {p5.Vector} new p5.Vector object.
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * frameRate(1);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = p5.Vector.random2D();
+ * v1.mult(30);
+ * drawArrow(v0, v1, 'black');
+ *
+ * describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');
+ * }
+ *
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'random3D',
+ value: function random3D() {
+ var angle = Math.random() * constants.TWO_PI;
+ var vz = Math.random() * 2 - 1;
+ var vzBase = Math.sqrt(1 - vz * vz);
+ var vx = vzBase * Math.cos(angle);
+ var vy = vzBase * Math.sin(angle);
+ return new _main.default.Vector(vx, vy, vz);
+ } // Returns a copy of a vector.
+ /**
+ * @method copy
+ * @static
+ * @param {p5.Vector} v the p5.Vector to create a copy of
+ * @return {p5.Vector} the copy of the p5.Vector object
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy(v) {
+ return v.copy(v);
+ } // Adds two vectors together and returns a new one.
+ /**
+ * @method add
+ * @static
+ * @param {p5.Vector} v1 A p5.Vector to add
+ * @param {p5.Vector} v2 A p5.Vector to add
+ * @param {p5.Vector} [target] vector to receive the result.
+ * @return {p5.Vector} resulting p5.Vector.
+ */
+
+ },
+ {
+ key: 'add',
+ value: function add(v1, v2, target) {
+ if (!target) {
+ target = v1.copy();
+ if (arguments.length === 3) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.add');
+ }
+ } else {
+ target.set(v1);
+ }
+ target.add(v2);
+ return target;
+ } // Returns a vector remainder when it is divided by another vector
+ /**
+ * @method rem
+ * @static
+ * @param {p5.Vector} v1 The dividend p5.Vector
+ * @param {p5.Vector} v2 The divisor p5.Vector
+ */
+ /**
+ * @method rem
+ * @static
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} v2
+ * @return {p5.Vector} The resulting p5.Vector
+ */
+
+ },
+ {
+ key: 'rem',
+ value: function rem(v1, v2) {
+ if (v1 instanceof _main.default.Vector && v2 instanceof _main.default.Vector) {
+ var target = v1.copy();
+ target.rem(v2);
+ return target;
+ }
+ } /*
+ * Subtracts one p5.Vector from another and returns a new one. The second
+ * vector (`v2`) is subtracted from the first (`v1`), resulting in `v1-v2`.
+ */
+ /**
+ * @method sub
+ * @static
+ * @param {p5.Vector} v1 A p5.Vector to subtract from
+ * @param {p5.Vector} v2 A p5.Vector to subtract
+ * @param {p5.Vector} [target] vector to receive the result.
+ * @return {p5.Vector} The resulting p5.Vector
+ */
+
+ },
+ {
+ key: 'sub',
+ value: function sub(v1, v2, target) {
+ if (!target) {
+ target = v1.copy();
+ if (arguments.length === 3) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.sub');
+ }
+ } else {
+ target.set(v1);
+ }
+ target.sub(v2);
+ return target;
+ } /**
+ * Multiplies a vector by a scalar and returns a new vector.
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z]
+ * @return {p5.Vector} resulting new p5.Vector.
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {p5.Vector} v
+ * @param {Number} n
+ * @param {p5.Vector} [target] vector to receive the result.
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {p5.Vector} v0
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} [target]
+ */
+ /**
+ * @method mult
+ * @static
+ * @param {p5.Vector} v0
+ * @param {Number[]} arr
+ * @param {p5.Vector} [target]
+ */
+
+ },
+ {
+ key: 'mult',
+ value: function mult(v, n, target) {
+ if (!target) {
+ target = v.copy();
+ if (arguments.length === 3) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.mult');
+ }
+ } else {
+ target.set(v);
+ }
+ target.mult(n);
+ return target;
+ } /**
+ * Rotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.
+ */
+ /**
+ * @method rotate
+ * @static
+ * @param {p5.Vector} v
+ * @param {Number} angle
+ * @param {p5.Vector} [target] The vector to receive the result
+ */
+
+ },
+ {
+ key: 'rotate',
+ value: function rotate(v, a, target) {
+ if (arguments.length === 2) {
+ target = v.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.rotate');
+ }
+ target.set(v);
+ }
+ target.rotate(a);
+ return target;
+ } /**
+ * Divides a vector by a scalar and returns a new vector.
+ */
+ /**
+ * @method div
+ * @static
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} [z]
+ * @return {p5.Vector} The resulting new p5.Vector
+ */
+ /**
+ * @method div
+ * @static
+ * @param {p5.Vector} v
+ * @param {Number} n
+ * @param {p5.Vector} [target] The vector to receive the result
+ */
+ /**
+ * @method div
+ * @static
+ * @param {p5.Vector} v0
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} [target]
+ */
+ /**
+ * @method div
+ * @static
+ * @param {p5.Vector} v0
+ * @param {Number[]} arr
+ * @param {p5.Vector} [target]
+ */
+
+ },
+ {
+ key: 'div',
+ value: function div(v, n, target) {
+ if (!target) {
+ target = v.copy();
+ if (arguments.length === 3) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.div');
+ }
+ } else {
+ target.set(v);
+ }
+ target.div(n);
+ return target;
+ } /**
+ * Calculates the dot product of two vectors.
+ */
+ /**
+ * @method dot
+ * @static
+ * @param {p5.Vector} v1 first p5.Vector.
+ * @param {p5.Vector} v2 second p5.Vector.
+ * @return {Number} dot product.
+ */
+
+ },
+ {
+ key: 'dot',
+ value: function dot(v1, v2) {
+ return v1.dot(v2);
+ } /**
+ * Calculates the cross product of two vectors.
+ */
+ /**
+ * @method cross
+ * @static
+ * @param {p5.Vector} v1 first p5.Vector.
+ * @param {p5.Vector} v2 second p5.Vector.
+ * @return {Number} cross product.
+ */
+
+ },
+ {
+ key: 'cross',
+ value: function cross(v1, v2) {
+ return v1.cross(v2);
+ } /**
+ * Calculates the Euclidean distance between two points (considering a
+ * point as a vector object).
+ */
+ /**
+ * @method dist
+ * @static
+ * @param {p5.Vector} v1 The first p5.Vector
+ * @param {p5.Vector} v2 The second p5.Vector
+ * @return {Number} The distance
+ */
+
+ },
+ {
+ key: 'dist',
+ value: function dist(v1, v2) {
+ return v1.dist(v2);
+ } /**
+ * Linear interpolate a vector to another vector and return the result as a
+ * new vector.
+ */
+ /**
+ * @method lerp
+ * @static
+ * @param {p5.Vector} v1
+ * @param {p5.Vector} v2
+ * @param {Number} amt
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector} The lerped value
+ */
+
+ },
+ {
+ key: 'lerp',
+ value: function lerp(v1, v2, amt, target) {
+ if (!target) {
+ target = v1.copy();
+ if (arguments.length === 4) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.lerp');
+ }
+ } else {
+ target.set(v1);
+ }
+ target.lerp(v2, amt);
+ return target;
+ } /**
+ * Performs spherical linear interpolation with the other vector
+ * and returns the resulting vector.
+ * This works in both 3D and 2D. As for 2D, the result of slerping
+ * between 2D vectors is always a 2D vector.
+ */
+ /**
+ * @method slerp
+ * @static
+ * @param {p5.Vector} v1 old vector.
+ * @param {p5.Vector} v2 new vector.
+ * @param {Number} amt
+ * @param {p5.Vector} [target] vector to receive the result.
+ * @return {p5.Vector} slerped vector between v1 and v2
+ */
+
+ },
+ {
+ key: 'slerp',
+ value: function slerp(v1, v2, amt, target) {
+ if (!target) {
+ target = v1.copy();
+ if (arguments.length === 4) {
+ _main.default._friendlyError('The target parameter is undefined, it should be of type p5.Vector', 'p5.Vector.slerp');
+ }
+ } else {
+ target.set(v1);
+ }
+ target.slerp(v2, amt);
+ return target;
+ } /**
+ * Calculates the magnitude (length) of the vector and returns the result as
+ * a float (this is simply the equation `sqrt(x*x + y*y + z*z)`.)
+ */
+ /**
+ * @method mag
+ * @static
+ * @param {p5.Vector} vecT The vector to return the magnitude of
+ * @return {Number} The magnitude of vecT
+ */
+
+ },
+ {
+ key: 'mag',
+ value: function mag(vecT) {
+ return vecT.mag();
+ } /**
+ * Calculates the squared magnitude of the vector and returns the result
+ * as a float (this is simply the equation (x\*x + y\*y + z\*z).)
+ * Faster if the real length is not required in the
+ * case of comparing vectors, etc.
+ */
+ /**
+ * @method magSq
+ * @static
+ * @param {p5.Vector} vecT the vector to return the squared magnitude of
+ * @return {Number} the squared magnitude of vecT
+ */
+
+ },
+ {
+ key: 'magSq',
+ value: function magSq(vecT) {
+ return vecT.magSq();
+ } /**
+ * Normalize the vector to length 1 (make it a unit vector).
+ */
+ /**
+ * @method normalize
+ * @static
+ * @param {p5.Vector} v The vector to normalize
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector} The vector v, normalized to a length of 1
+ */
+
+ },
+ {
+ key: 'normalize',
+ value: function normalize(v, target) {
+ if (arguments.length < 2) {
+ target = v.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.normalize');
+ }
+ target.set(v);
+ }
+ return target.normalize();
+ } /**
+ * Limit the magnitude of the vector to the value used for the max
+ * parameter.
+ */
+ /**
+ * @method limit
+ * @static
+ * @param {p5.Vector} v the vector to limit
+ * @param {Number} max
+ * @param {p5.Vector} [target] the vector to receive the result (Optional)
+ * @return {p5.Vector} v with a magnitude limited to max
+ */
+
+ },
+ {
+ key: 'limit',
+ value: function limit(v, max, target) {
+ if (arguments.length < 3) {
+ target = v.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.limit');
+ }
+ target.set(v);
+ }
+ return target.limit(max);
+ } /**
+ * Set the magnitude of the vector to the value used for the len
+ * parameter.
+ */
+ /**
+ * @method setMag
+ * @static
+ * @param {p5.Vector} v the vector to set the magnitude of
+ * @param {number} len
+ * @param {p5.Vector} [target] the vector to receive the result (Optional)
+ * @return {p5.Vector} v with a magnitude set to len
+ */
+
+ },
+ {
+ key: 'setMag',
+ value: function setMag(v, len, target) {
+ if (arguments.length < 3) {
+ target = v.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.setMag');
+ }
+ target.set(v);
+ }
+ return target.setMag(len);
+ } /**
+ * Calculate the angle of rotation for this vector (only 2D vectors).
+ * p5.Vectors created using createVector()
+ * will take the current angleMode into
+ * consideration, and give the angle in radians or degrees accordingly.
+ */
+ /**
+ * @method heading
+ * @static
+ * @param {p5.Vector} v the vector to find the angle of
+ * @return {Number} the angle of rotation
+ */
+
+ },
+ {
+ key: 'heading',
+ value: function heading(v) {
+ return v.heading();
+ } /**
+ * Calculates and returns the angle between two vectors. This function will take
+ * the angleMode on v1 into consideration, and
+ * give the angle in radians or degrees accordingly.
+ */
+ /**
+ * @method angleBetween
+ * @static
+ * @param {p5.Vector} v1 the first vector.
+ * @param {p5.Vector} v2 the second vector.
+ * @return {Number} angle between the two vectors.
+ */
+
+ },
+ {
+ key: 'angleBetween',
+ value: function angleBetween(v1, v2) {
+ return v1.angleBetween(v2);
+ } /**
+ * Reflect a vector about a normal to a line in 2D, or about a normal to a
+ * plane in 3D.
+ */
+ /**
+ * @method reflect
+ * @static
+ * @param {p5.Vector} incidentVector vector to be reflected.
+ * @param {p5.Vector} surfaceNormal
+ * @param {p5.Vector} [target] vector to receive the result.
+ * @return {p5.Vector} the reflected vector
+ */
+
+ },
+ {
+ key: 'reflect',
+ value: function reflect(incidentVector, surfaceNormal, target) {
+ if (arguments.length < 3) {
+ target = incidentVector.copy();
+ } else {
+ if (!(target instanceof _main.default.Vector)) {
+ _main.default._friendlyError('The target parameter should be of type p5.Vector', 'p5.Vector.reflect');
+ }
+ target.set(incidentVector);
+ }
+ return target.reflect(surfaceNormal);
+ } /**
+ * Return a representation of this vector as a float array. This is only
+ * for temporary use. If used in any other fashion, the contents should be
+ * copied by using the p5.Vector.copy()
+ * method to copy into your own vector.
+ */
+ /**
+ * @method array
+ * @static
+ * @param {p5.Vector} v the vector to convert to an array
+ * @return {Number[]} an Array with the 3 values
+ */
+
+ },
+ {
+ key: 'array',
+ value: function array(v) {
+ return v.array();
+ } /**
+ * Equality check against a p5.Vector
+ */
+ /**
+ * @method equals
+ * @static
+ * @param {p5.Vector|Array} v1 the first vector to compare
+ * @param {p5.Vector|Array} v2 the second vector to compare
+ * @return {Boolean}
+ */
+
+ },
+ {
+ key: 'equals',
+ value: function equals(v1, v2) {
+ var v;
+ if (v1 instanceof _main.default.Vector) {
+ v = v1;
+ } else if (v1 instanceof Array) {
+ v = new _main.default.Vector().set(v1);
+ } else {
+ _main.default._friendlyError('The v1 parameter should be of type Array or p5.Vector', 'p5.Vector.equals');
+ }
+ return v.equals(v2);
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Vector;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.every': 171,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.array.some': 184,
+ 'core-js/modules/es.math.sign': 190,
+ 'core-js/modules/es.number.constructor': 191,
+ 'core-js/modules/es.number.is-finite': 192,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.sub': 218,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 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 Math
+ * @submodule Random
+ * @for p5
+ * @requires core
+ */
+ // variables used for random number generators
+
+ var randomStateProp = '_lcg_random_state';
+ // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
+ // m is basically chosen to be large (as it is the max period)
+ // and for its relationships to a and c
+ var m = 4294967296;
+ // a - 1 should be divisible by m's prime factors
+ var a = 1664525;
+ // c and m should be co-prime
+ var c = 1013904223;
+ var y2 = 0;
+ // Linear Congruential Generator that stores its state at instance[stateProperty]
+ _main.default.prototype._lcg = function (stateProperty) {
+ // define the recurrence relationship
+ this[stateProperty] = (a * this[stateProperty] + c) % m;
+ // return a float in [0, 1)
+ // we've just used % m, so / m is always < 1
+ return this[stateProperty] / m;
+ };
+ _main.default.prototype._lcgSetSeed = function (stateProperty, val) {
+ // pick a random seed if val is undefined or null
+ // the >>> 0 casts the seed to an unsigned 32-bit integer
+ this[stateProperty] = (val == null ? Math.random() * m : val) >>> 0;
+ };
+ /**
+ * Sets the seed value for random() and
+ * randomGaussian(). By default,
+ * random() and
+ * randomGaussian() produce different
+ * results each time a sketch is run. Calling `randomSeed()` with a constant
+ * argument, such as `randomSeed(99)`, makes these functions produce the same
+ * results each time a sketch is run.
+ *
+ * @method randomSeed
+ * @param {Number} seed seed value.
+ * @example
+ *
+ * let v = p5.Vector.random3D();
+ * // Prints "p5.Vector Object : [x, y, z]" to the console
+ * // where x, y, and z are small random numbers.
+ * print(v.toString());
+ *
+ *
+ *
+ */
+ _main.default.prototype.randomSeed = function (seed) {
+ this._lcgSetSeed(randomStateProp, seed);
+ this._gaussian_previous = false;
+ };
+ /**
+ * Returns a random number or a random element from an array.
+ *
+ * `random()` follows uniform distribution, which means that all outcomes are
+ * equally likely. When `random()` is used to generate numbers, all
+ * numbers in the output range are equally likely to be returned. When
+ * `random()` is used to select elements from an array, all elements are
+ * equally likely to be chosen.
+ *
+ * By default, `random()` produces different results each time a sketch runs.
+ * The randomSeed() function can be used to
+ * generate the same sequence of numbers or choices each time a sketch runs.
+ *
+ * The version of `random()` with no parameters returns a random number from 0
+ * up to but not including 1.
+ *
+ * The version of `random()` with one parameter works one of two ways. If the
+ * argument passed is a number, `random()` returns a random number from 0 up
+ * to but not including the number. For example, calling `random(5)` returns
+ * values between 0 and 5. If the argument passed is an array, `random()`
+ * returns a random element from that array. For example, calling
+ * `random(['🦁', '🐯', '🐻'])` returns either a lion, tiger, or bear emoji.
+ *
+ * The version of `random()` with two parameters returns a random number from
+ * a given range. The arguments passed set the range's lower and upper bounds.
+ * For example, calling `random(-5, 10.2)` returns values from -5 up to but
+ * not including 10.2.
+ *
+ * @method random
+ * @param {Number} [min] lower bound (inclusive).
+ * @param {Number} [max] upper bound (exclusive).
+ * @return {Number} random number.
+ * @example
+ *
+ * let x = random(width);
+ * let y = random(height);
+ * circle(x, y, 10);
+ *
+ * randomSeed(99);
+ * x = random(width);
+ * y = random(height);
+ * fill(0);
+ * circle(x, y, 10);
+ *
+ * describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');
+ *
+ *
+ *
+ *
+ *
+ * let x = random(width);
+ * let y = random(height);
+ *
+ * strokeWeight(5);
+ * point(x, y);
+ *
+ * describe('A black dot appears in a random posiiton on a gray square.');
+ *
+ *
+ *
+ *
+ *
+ * let animals = ['🦁', '🐯', '🐻'];
+ * let animal = random(animals);
+ * text(animal, 50, 50);
+ *
+ * describe('An animal face is displayed at random. Either a lion, tiger, or bear.');
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * frameRate(5);
+ * let x = random(width);
+ * let y = random(height);
+ *
+ * strokeWeight(5);
+ * point(x, y);
+ *
+ * describe('A black dot moves around randomly on a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method random
+ * @param {Array} choices array to choose from.
+ * @return {*} random element from the array.
+ * @example
+ */
+ _main.default.prototype.random = function (min, max) {
+ _main.default._validateParameters('random', arguments);
+ var rand;
+ if (this[randomStateProp] != null) {
+ rand = this._lcg(randomStateProp);
+ } else {
+ rand = Math.random();
+ }
+ if (typeof min === 'undefined') {
+ return rand;
+ } else if (typeof max === 'undefined') {
+ if (min instanceof Array) {
+ return min[Math.floor(rand * min.length)];
+ } else {
+ return rand * min;
+ }
+ } else {
+ if (min > max) {
+ var tmp = min;
+ min = max;
+ max = tmp;
+ }
+ return rand * (max - min) + min;
+ }
+ };
+ /**
+ * Returns a random number fitting a Gaussian, or normal, distribution. Normal
+ * distributions look like bell curves when plotted. Values from a normal
+ * distribution cluster around a central value called the mean. The cluster's
+ * standard deviation describes its spread.
+ *
+ * By default, `randomGaussian()` produces different results each time a
+ * sketch runs. The randomSeed() function can be
+ * used to generate the same sequence of numbers each time a sketch runs.
+ *
+ * There's no minimum or maximum value that `randomGaussian()` might return.
+ * Values far from the mean are very unlikely and values near the mean are
+ * very likely.
+ *
+ * The version of `randomGaussian()` with no parameters returns values with a
+ * mean of 0 and standard deviation of 1.
+ *
+ * The version of `randomGaussian()` with one parameter interprets the
+ * argument passed as the mean. The standard deviation is 1.
+ *
+ * The version of `randomGaussian()` with two parameters interprets the first
+ * argument passed as the mean and the second as the standard deviation.
+ *
+ * @method randomGaussian
+ * @param {Number} [mean] mean.
+ * @param {Number} [sd] standard deviation.
+ * @return {Number} random number.
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ *
+ * frameRate(5);
+ * let x = random(45, 55);
+ * let y = random(45, 55);
+ *
+ * strokeWeight(5);
+ * point(x, y);
+ *
+ * describe('A black dot moves around randomly in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.randomGaussian = function (mean) {
+ var sd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+ var y1,
+ x1,
+ x2,
+ w;
+ if (this._gaussian_previous) {
+ y1 = y2;
+ this._gaussian_previous = false;
+ } else {
+ do {
+ x1 = this.random(2) - 1;
+ x2 = this.random(2) - 1;
+ w = x1 * x1 + x2 * x2;
+ } while (w >= 1);
+ w = Math.sqrt( - 2 * Math.log(w) / w);
+ y1 = x1 * w;
+ y2 = x2 * w;
+ this._gaussian_previous = true;
+ }
+ var m = mean || 0;
+ return y1 * sd + m;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298
+ }
+ ],
+ 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.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Math
+ * @submodule Trigonometry
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /*
+ * all DEGREES/RADIANS conversion should be done in the p5 instance
+ * if possible, using the p5._toRadians(), p5._fromRadians() methods.
+ */
+
+ _main.default.prototype._angleMode = constants.RADIANS;
+ /**
+ * The inverse of cos(), returns the arc cosine of a
+ * value. This function expects arguments in the range -1 to 1. By default,
+ * `acos()` returns values in the range 0 to π (about 3.14). If the
+ * angleMode() is `DEGREES`, then values are
+ * returned in the range 0 to 180.
+ *
+ * @method acos
+ * @param {Number} value value whose arc cosine is to be returned.
+ * @return {Number} arc cosine of the given value.
+ *
+ * @example
+ *
+ * function draw() {
+ * noStroke();
+ * fill(0, 10);
+ *
+ * // Uniform distribution.
+ * let x = random(width);
+ * let y = 25;
+ * circle(x, y, 5);
+ *
+ * // Gaussian distribution with sd = 1.
+ * x = randomGaussian(50);
+ * y = 50;
+ * circle(x, y, 5);
+ *
+ * // Gaussian distribution with sd = 10.
+ * x = randomGaussian(50, 10);
+ * y = 75;
+ * circle(x, y, 5);
+ *
+ * describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let a = PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(c, 3)}`, 35, 50);
+ * text(`${round(ac, 3)}`, 35, 75);
+ *
+ * describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.acos = function (ratio) {
+ return this._fromRadians(Math.acos(ratio));
+ };
+ /**
+ * The inverse of sin(), returns the arc sine of a
+ * value. This function expects input values in the range of -1 to 1. By
+ * default, `asin()` returns values in the range -π ÷ 2
+ * (about -1.57) to π ÷ 2 (about 1.57). If the
+ * angleMode() is `DEGREES` then values are
+ * returned in the range -90 to 90.
+ *
+ * @method asin
+ * @param {Number} value value whose arc sine is to be returned.
+ * @return {Number} arc sine of the given value.
+ *
+ * @example
+ *
+ * let a = PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(c, 3)}`, 35, 50);
+ * text(`${round(ac, 3)}`, 35, 75);
+ *
+ * describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
+ *
+ *
+ *
+ *
+ *
+ * let a = PI / 3;
+ * let s = sin(a);
+ * let as = asin(s);
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(s, 3)}`, 35, 50);
+ * text(`${round(as, 3)}`, 35, 75);
+ *
+ * describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.asin = function (ratio) {
+ return this._fromRadians(Math.asin(ratio));
+ };
+ /**
+ * The inverse of tan(), returns the arc tangent of a
+ * value. This function expects input values in the range of -Infinity to
+ * Infinity. By default, `atan()` returns values in the range -π ÷ 2
+ * (about -1.57) to π ÷ 2 (about 1.57). If the
+ * angleMode() is `DEGREES` then values are
+ * returned in the range -90 to 90.
+ *
+ * @method atan
+ * @param {Number} value value whose arc tangent is to be returned.
+ * @return {Number} arc tangent of the given value.
+ *
+ * @example
+ *
+ * let a = PI + PI / 3;
+ * let s = sin(a);
+ * let as = asin(s);
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(s, 3)}`, 35, 50);
+ * text(`${round(as, 3)}`, 35, 75);
+ *
+ * describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
+ *
+ *
+ *
+ *
+ *
+ * let a = PI / 3;
+ * let t = tan(a);
+ * let at = atan(t);
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(t, 3)}`, 35, 50);
+ * text(`${round(at, 3)}`, 35, 75);
+ *
+ * describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.atan = function (ratio) {
+ return this._fromRadians(Math.atan(ratio));
+ };
+ /**
+ * Calculates the angle formed by a specified point, the origin, and the
+ * positive x-axis. By default, `atan2()` returns values in the range
+ * -π (about -3.14) to π (3.14). If the
+ * angleMode() is `DEGREES`, then values are
+ * returned in the range -180 to 180. The `atan2()` function is most often
+ * used for orienting geometry to the mouse's position.
+ *
+ * Note: The y-coordinate of the point is the first parameter and the
+ * x-coordinate is the second parameter.
+ *
+ * @method atan2
+ * @param {Number} y y-coordinate of the point.
+ * @param {Number} x x-coordinate of the point.
+ * @return {Number} arc tangent of the given point.
+ *
+ * @example
+ *
+ * let a = PI + PI / 3;
+ * let t = tan(a);
+ * let at = atan(t);
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(t, 3)}`, 35, 50);
+ * text(`${round(at, 3)}`, 35, 75);
+ *
+ * describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.atan2 = function (y, x) {
+ return this._fromRadians(Math.atan2(y, x));
+ };
+ /**
+ * Calculates the cosine of an angle. `cos()` is useful for many geometric
+ * tasks in creative coding. The values returned oscillate between -1 and 1
+ * as the input angle increases. `cos()` takes into account the current
+ * angleMode.
+ *
+ * @method cos
+ * @param {Number} angle the angle.
+ * @return {Number} cosine of the angle.
+ *
+ * @example
+ *
+ * function draw() {
+ * background(200);
+ * translate(width / 2, height / 2);
+ * let x = mouseX - width / 2;
+ * let y = mouseY - height / 2;
+ * let a = atan2(y, x);
+ * rotate(a);
+ * rect(-30, -5, 60, 10);
+ *
+ * describe('A rectangle at the center of the canvas rotates with mouse movements.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let t = frameCount;
+ * let x = 30 * cos(t * 0.05) + 50;
+ * let y = 50;
+ * line(50, y, x, y);
+ * circle(x, y, 20);
+ *
+ * describe('A white ball on a string oscillates left and right.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * let x = frameCount;
+ * let y = 30 * cos(x * 0.1) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.cos = function (angle) {
+ return Math.cos(this._toRadians(angle));
+ };
+ /**
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * angleMode.
+ *
+ * @method sin
+ * @param {Number} angle the angle.
+ * @return {Number} sine of the angle.
+ *
+ * @example
+ *
+ * function draw() {
+ * let t = frameCount;
+ * let x = 30 * cos(t * 0.1) + 50;
+ * let y = 10 * sin(t * 0.2) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form an infinity symbol.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let t = frameCount;
+ * let x = 50;
+ * let y = 30 * sin(t * 0.05) + 50;
+ * line(x, 50, x, y);
+ * circle(x, y, 20);
+ *
+ * describe('A white ball on a string oscillates up and down.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * let x = frameCount;
+ * let y = 30 * sin(x * 0.1) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.sin = function (angle) {
+ return Math.sin(this._toRadians(angle));
+ };
+ /**
+ * Calculates the tangent of an angle. `tan()` is useful for many geometric
+ * tasks in creative coding. The values returned range from -Infinity
+ * to Infinity and repeat periodically as the input angle increases. `tan()`
+ * takes into account the current angleMode.
+ *
+ * @method tan
+ * @param {Number} angle the angle.
+ * @return {Number} tangent of the angle.
+ *
+ * @example
+ *
+ * function draw() {
+ * let t = frameCount;
+ * let x = 30 * cos(t * 0.1) + 50;
+ * let y = 10 * sin(t * 0.2) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form an infinity symbol.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.tan = function (angle) {
+ return Math.tan(this._toRadians(angle));
+ };
+ /**
+ * Converts an angle measurement in radians to its corresponding value in
+ * degrees. Degrees and radians are two ways of measuring the same thing.
+ * There are 360 degrees in a circle and 2 × π (about 6.28)
+ * radians in a circle. For example, 90° = π ÷ 2 (about 1.57)
+ * radians. This function doesn't take into account the current
+ * angleMode().
+ *
+ * @method degrees
+ * @param {Number} radians radians value to convert to degrees.
+ * @return {Number} converted angle.
+ *
+ * @example
+ *
+ * function draw() {
+ * let x = frameCount;
+ * let y = 5 * tan(x * 0.1) + 50;
+ * point(x, y);
+ *
+ * describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.degrees = function (angle) {
+ return angle * constants.RAD_TO_DEG;
+ };
+ /**
+ * Converts an angle measurement in degrees to its corresponding value in
+ * radians. Degrees and radians are two ways of measuring the same thing.
+ * There are 360 degrees in a circle and 2 × π (about 6.28)
+ * radians in a circle. For example, 90° = π ÷ 2 (about 1.57)
+ * radians. This function doesn't take into account the current
+ * angleMode().
+ *
+ * @method radians
+ * @param {Number} degrees degree value to convert to radians.
+ * @return {Number} converted angle.
+ *
+ * @example
+ *
+ * let rad = QUARTER_PI;
+ * let deg = degrees(rad);
+ * text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
+ *
+ * describe('The text "0.79 rad = 45˚".');
+ *
+ *
+ *
+ */
+ _main.default.prototype.radians = function (angle) {
+ return angle * constants.DEG_TO_RAD;
+ };
+ /**
+ * Changes the way trigonometric functions interpret angle values. By default,
+ * the mode is `RADIANS`.
+ *
+ * Calling `angleMode()` with no arguments returns current angle mode.
+ * @method angleMode
+ * @param {Constant} mode either RADIANS or DEGREES.
+ * @example
+ *
+ * let deg = 45;
+ * let rad = radians(deg);
+ * text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
+ *
+ * describe('The text "45˚ = 0.785 rad".');
+ *
+ *
+ *
+ *
+ */
+ /**
+ * @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': 286,
+ '../core/main': 298,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 334: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Typography
+ * @submodule Attributes
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * Sets the 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
+ *
+ * let r = 40;
+ * push();
+ * rotate(PI / 6);
+ * line(0, 0, r, 0);
+ * text('0.524 rad', r, 0);
+ * pop();
+ *
+ * angleMode(DEGREES);
+ * push();
+ * rotate(60);
+ * line(0, 0, r, 0);
+ * text('60˚', r, 0);
+ * pop();
+ *
+ * describe('Two diagonal lines radiating from the top left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
+ *
+ *
+ *
+ *
+ *
+ * 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.`);
+ *
+ *
+ *
+ */
+ /**
+ * @method textAlign
+ * @return {Object}
+ */
+
+ _main.default.prototype.textAlign = function (horizAlign, vertAlign) {
+ var _this$_renderer;
+ _main.default._validateParameters('textAlign', arguments);
+ return (_this$_renderer = this._renderer).textAlign.apply(_this$_renderer, arguments);
+ };
+ /**
+ * Sets/gets the spacing, in pixels, between lines of text. This setting will be
+ * used in all subsequent calls to the text() function.
+ *
+ * @method textLeading
+ * @param {Number} leading the size in pixels for spacing between lines
+ * @chainable
+ *
+ * @example
+ *
+ * textSize(16);
+ * strokeWeight(0.5);
+ *
+ * line(0, 12, width, 12);
+ * textAlign(CENTER, TOP);
+ * text('TOP', 0, 12, width);
+ *
+ * line(0, 37, width, 37);
+ * textAlign(CENTER, CENTER);
+ * text('CENTER', 0, 37, width);
+ *
+ * line(0, 62, width, 62);
+ * textAlign(CENTER, BASELINE);
+ * text('BASELINE', 0, 62, width);
+ *
+ * line(0, 97, width, 97);
+ * textAlign(CENTER, BOTTOM);
+ * text('BOTTOM', 0, 97, 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 textLeading
+ * @return {Number}
+ */
+ _main.default.prototype.textLeading = function (theLeading) {
+ var _this$_renderer2;
+ _main.default._validateParameters('textLeading', arguments);
+ return (_this$_renderer2 = this._renderer).textLeading.apply(_this$_renderer2, arguments);
+ };
+ /**
+ * Sets/gets the current font size. This size will be used in all subsequent
+ * calls to the text() function. Font size is measured in pixels.
+ *
+ * @method textSize
+ * @param {Number} theSize the size of the letters in units of pixels
+ * @chainable
+ *
+ * @example
+ *
+ * let lines = 'L1\nL2\nL3'; // "\n" is a "new line" character
+ * textSize(12);
+ *
+ * textLeading(10);
+ * text(lines, 10, 25);
+ *
+ * textLeading(20);
+ * text(lines, 40, 25);
+ *
+ * textLeading(30);
+ * text(lines, 70, 25);
+ *
+ * describe(`A set of L1, L2, and L3, displayed vertically 3 times.
+ * Spacing increases for each set.`);
+ *
+ *
+ *
+ */
+ /**
+ * @method textSize
+ * @return {Number}
+ */
+ _main.default.prototype.textSize = function (theSize) {
+ var _this$_renderer3;
+ _main.default._validateParameters('textSize', arguments);
+ return (_this$_renderer3 = this._renderer).textSize.apply(_this$_renderer3, arguments);
+ };
+ /**
+ * Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.
+ * Note: this may be is overridden by CSS styling. For non-system fonts
+ * (opentype, truetype, etc.) please load styled fonts instead.
+ *
+ * @method textStyle
+ * @param {Constant} theStyle styling for text, either NORMAL,
+ * ITALIC, BOLD or BOLDITALIC
+ * @chainable
+ * @example
+ *
+ * textSize(12);
+ * text('Font Size 12', 10, 30);
+ * textSize(14);
+ * text('Font Size 14', 10, 60);
+ * textSize(16);
+ * text('Font Size 16', 10, 90);
+ *
+ * describe(`'Font Size 12' displayed small,
+ * 'Font Size 14' medium, and
+ * 'Font Size 16' large`);
+ *
+ *
+ *
+ */
+ /**
+ * @method textStyle
+ * @return {String}
+ */
+ _main.default.prototype.textStyle = function (theStyle) {
+ var _this$_renderer4;
+ _main.default._validateParameters('textStyle', arguments);
+ return (_this$_renderer4 = this._renderer).textStyle.apply(_this$_renderer4, arguments);
+ };
+ /**
+ * Calculates and returns the width of any character or the maximum width of any paragrph.
+ *
+ * @method textWidth
+ * @param {String} theText the String of characters to measure
+ * @return {Number} the calculated width
+ * @example
+ *
+ * strokeWeight(0);
+ * textSize(12);
+ * textStyle(NORMAL);
+ * text('Font Style Normal', 10, 15);
+ * textStyle(ITALIC);
+ * text('Font Style Italic', 10, 40);
+ * textStyle(BOLD);
+ * text('Font Style Bold', 10, 65);
+ * textStyle(BOLDITALIC);
+ * text('Font Style Bold Italic', 10, 90);
+ * 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.`);
+ *
+ *
+ *
+ *
+ *
+ *
+ * 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 () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ args[0] += '';
+ _main.default._validateParameters('textWidth', args);
+ if (args[0].length === 0) {
+ return 0;
+ } // Only use the line with the longest width, and replace tabs with double-space
+
+ var textLines = args[0].replace(/\t/g, ' ').split(/\r?\n|\r|\n/g);
+ var newArr = [
+ ];
+ // Return the textWidth for every line
+ for (var i = 0; i < textLines.length; i++) {
+ newArr.push(this._renderer.textWidth(textLines[i]));
+ } // Return the largest textWidth
+
+ var largestWidth = Math.max.apply(Math, newArr);
+ return largestWidth;
+ };
+ /**
+ * Returns the ascent of the current font at its current size. The ascent
+ * represents the distance, in pixels, of the tallest character above
+ * the baseline.
+ * @method textAscent
+ * @return {Number}
+ * @example
+ *
+ * textSize(28);
+ *
+ * let aChar = 'text\nWidth';
+ * let cWidth = textWidth(aChar);
+ * text(aChar, 0, 40);
+ * line(cWidth, 0, cWidth, 100);
+ *
+ * describe('Text text and Width() are displayed with vertical lines at end of Width().');
+ *
+ *
+ *
+ */
+ _main.default.prototype.textAscent = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+ _main.default._validateParameters('textAscent', args);
+ return this._renderer.textAscent();
+ };
+ /**
+ * Returns the descent of the current font at its current size. The descent
+ * represents the distance, in pixels, of the character with the longest
+ * descender below the baseline.
+ * @method textDescent
+ * @return {Number}
+ * @example
+ *
+ * let base = height * 0.75;
+ * let scalar = 0.8; // Different for each font
+ *
+ * textSize(32); // Set initial text size
+ * let asc = textAscent() * scalar; // Calc ascent
+ * line(0, base - asc, width, base - asc);
+ * text('dp', 0, base); // Draw text on baseline
+ *
+ * textSize(64); // Increase text size
+ * asc = textAscent() * scalar; // Recalc ascent
+ * line(40, base - asc, width, base - asc);
+ * text('dp', 40, base); // Draw text on baseline
+ *
+ *
+ *
+ */
+ _main.default.prototype.textDescent = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+ _main.default._validateParameters('textDescent', args);
+ return this._renderer.textDescent();
+ };
+ /**
+ * Helper function to measure ascent and descent.
+ */
+ _main.default.prototype._updateTextMetrics = function () {
+ return this._renderer._updateTextMetrics();
+ };
+ /**
+ * 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
+ *
+ * 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
+ *
+ *
+ *
+ *
+ * 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);
+ *
+ *
+ *
+ */
+ _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': 298,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.string.replace': 214,
+ 'core-js/modules/es.string.split': 216
+ }
+ ],
+ 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.concat');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.last-index-of');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.last-index-of');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.split');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var opentype = _interopRequireWildcard(_dereq_('opentype.js'));
+ _dereq_('../core/friendly_errors/validate_params');
+ _dereq_('../core/friendly_errors/file_errors');
+ _dereq_('../core/friendly_errors/fes_core');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Typography
+ * @submodule Loading & Displaying
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Loads a font and creates a p5.Font object.
+ * `loadFont()` can load fonts in either .otf or .ttf format. Loaded fonts can
+ * be used to style text on the canvas and in HTML elements.
+ *
+ * The first parameter, `path`, is the path to a font file.
+ * Paths to local files should be relative. For example,
+ * `'assets/inconsolata.otf'`. The Inconsolata font used in the following
+ * examples can be downloaded for free
+ * here.
+ * Paths to remote files should be URLs. For example,
+ * `'https://example.com/inconsolata.otf'`. URLs may be blocked due to browser
+ * security.
+ *
+ * The second parameter, `successCallback`, is optional. If a function is
+ * passed, it will be called once the font has loaded. The callback function
+ * may use the new p5.Font object if needed.
+ *
+ * The third parameter, `failureCallback`, is also optional. If a function is
+ * passed, it will be called if the font fails to load. The callback function
+ * may use the error
+ * Event
+ * object if needed.
+ *
+ * Fonts can take time to load. Calling `loadFont()` in
+ * preload() ensures fonts load before they're
+ * used in setup() or
+ * draw().
+ *
+ * @method loadFont
+ * @param {String} path path of the font to be loaded.
+ * @param {Function} [successCallback] function called with the
+ * p5.Font object after it
+ * loads.
+ * @param {Function} [failureCallback] function called with the error
+ * Event
+ * object if the font fails to load.
+ * @return {p5.Font} p5.Font object.
+ * @example
+ *
+ *
+ * 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);
+ *
+ *
+ *
+ *
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * fill('deeppink');
+ * textFont(font);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * loadFont('assets/inconsolata.otf', font => {
+ * fill('deeppink');
+ * textFont(font);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * });
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * loadFont('assets/inconsolata.otf', success, failure);
+ * }
+ *
+ * function success(font) {
+ * fill('deeppink');
+ * textFont(font);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * }
+ *
+ * function failure(event) {
+ * console.error('Oops!', event);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.loadFont = function (path, onSuccess, onError) {
+ _main.default._validateParameters('loadFont', arguments);
+ var p5Font = new _main.default.Font(this);
+ var self = this;
+ opentype.load(path, function (err, font) {
+ if (err) {
+ _main.default._friendlyFileLoadError(4, path);
+ if (typeof onError !== 'undefined') {
+ return onError(err);
+ }
+ console.error(err, path);
+ return;
+ }
+ p5Font.font = font;
+ if (typeof onSuccess !== 'undefined') {
+ onSuccess(p5Font);
+ }
+ self._decrementPreload();
+ // check that we have an acceptable font type
+ var validFontTypes = [
+ 'ttf',
+ 'otf',
+ 'woff',
+ 'woff2'
+ ];
+ var fileNoPath = path.split('\\').pop().split('/').pop();
+ var lastDotIdx = fileNoPath.lastIndexOf('.');
+ var fontFamily;
+ var newStyle;
+ var fileExt = lastDotIdx < 1 ? null : fileNoPath.slice(lastDotIdx + 1);
+ // if so, add it to the DOM (name-only) for use with DOM module
+ if (validFontTypes.includes(fileExt)) {
+ fontFamily = fileNoPath.slice(0, lastDotIdx !== - 1 ? lastDotIdx : 0);
+ newStyle = document.createElement('style');
+ newStyle.appendChild(document.createTextNode('\n@font-face {\nfont-family: '.concat(fontFamily, ';\nsrc: url(').concat(path, ');\n}\n')));
+ document.head.appendChild(newStyle);
+ }
+ });
+ return p5Font;
+ };
+ /**
+ * Draws text to the canvas.
+ *
+ * The first parameter, `str`, is the text to be drawn. The second and third
+ * parameters, `x` and `y`, set the coordinates of the text's bottom-left
+ * corner. See textAlign() for other ways to
+ * align text.
+ *
+ * The fourth and fifth parameters, `maxWidth` and `maxHeight`, are optional.
+ * They set the dimensions of the invisible rectangle containing the text. By
+ * default, they set its maximum width and height. See
+ * rectMode() for other ways to define the
+ * rectangular text box. Text will wrap to fit within the text box. Text
+ * outside of the box won't be drawn.
+ *
+ * Text can be styled a few ways. Call the fill()
+ * function to set the text's fill color. Call
+ * stroke() and
+ * strokeWeight() to set the text's outline.
+ * Call textSize() and
+ * textFont() to set the text's size and font,
+ * respectively.
+ *
+ * Note: `WEBGL` mode only supports fonts loaded with
+ * loadFont(). Calling
+ * stroke() has no effect in `WEBGL` mode.
+ *
+ * @method text
+ * @param {String|Object|Array|Number|Boolean} str text to be displayed.
+ * @param {Number} x x-coordinate of the text box.
+ * @param {Number} y y-coordinate of the text box.
+ * @param {Number} [maxWidth] maximum width of the text box. See
+ * rectMode() for
+ * other options.
+ * @param {Number} [maxHeight] maximum height of the text box. See
+ * rectMode() for
+ * other options.
+ *
+ * @chainable
+ * @example
+ *
+ * function preload() {
+ * loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * let p = createP('p5*js');
+ * p.style('color', 'deeppink');
+ * p.style('font-family', 'Inconsolata');
+ * p.style('font-size', '36px');
+ * p.position(10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * text('hi', 50, 50);
+ *
+ * describe('The text "hi" written in black in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background('skyblue');
+ * textSize(100);
+ * text('🌈', 0, 100);
+ *
+ * describe('A rainbow in a blue sky.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * textSize(32);
+ * fill(255);
+ * stroke(0);
+ * strokeWeight(4);
+ * text('hi', 50, 50);
+ *
+ * describe('The text "hi" written in white with a black outline.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background('black');
+ * textSize(22);
+ * fill('yellow');
+ * text('rainbows', 6, 20);
+ * fill('cornflowerblue');
+ * text('rainbows', 6, 45);
+ * fill('tomato');
+ * text('rainbows', 6, 70);
+ * fill('limegreen');
+ * text('rainbows', 6, 95);
+ *
+ * describe('The text "rainbows" written on several lines, each in a different color.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * let s = 'The quick brown fox jumps over the lazy dog.';
+ * text(s, 10, 10, 70, 80);
+ *
+ * describe('The sample text "The quick brown fox..." written in black across several lines.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * rectMode(CENTER);
+ * let s = 'The quick brown fox jumps over the lazy dog.';
+ * text(s, 50, 50, 70, 80);
+ *
+ * describe('The sample text "The quick brown fox..." written in black across several lines.');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.text = function (str, x, y, maxWidth, maxHeight) {
+ var _this$_renderer;
+ _main.default._validateParameters('text', arguments);
+ return !(this._renderer._doFill || this._renderer._doStroke) ? this : (_this$_renderer = this._renderer).text.apply(_this$_renderer, arguments);
+ };
+ /**
+ * Sets the font used by the text() function.
+ *
+ * The first parameter, `font`, sets the font. `textFont()` recognizes either
+ * a p5.Font object or a string with the name of a
+ * system font. For example, `'Courier New'`.
+ *
+ * The second parameter, `size`, is optional. It sets the font size in pixels.
+ * This has the same effect as calling textSize().
+ *
+ * Note: `WEBGL` mode only supports fonts loaded with
+ * loadFont().
+ *
+ * @method textFont
+ * @return {Object} current font or p5 Object.
+ *
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * textFont(font);
+ * textSize(32);
+ * textAlign(CENTER, CENTER);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * rotateY(frameCount / 30);
+ * text('p5*js', 0, 0);
+ *
+ * describe('The text "p5*js" written in white and spinning in 3D.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * textFont('Courier New');
+ * textSize(24);
+ * text('hi', 35, 55);
+ *
+ * describe('The text "hi" written in a black, monospace font on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background('black');
+ * fill('palegreen');
+ * textFont('Courier New', 10);
+ * text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);
+ * text('>', 5, 70);
+ *
+ * describe('A text prompt from a game is written in a green, monospace font on a black background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * background(200);
+ * textFont('Verdana');
+ * let currentFont = textFont();
+ * text(currentFont, 25, 50);
+ *
+ * describe('The text "Verdana" written in a black, sans-serif font on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method textFont
+ * @param {Object|String} font font as a p5.Font object or a string.
+ * @param {Number} [size] font size in pixels.
+ * @chainable
+ */
+ _main.default.prototype.textFont = function (theFont, theSize) {
+ _main.default._validateParameters('textFont', arguments);
+ if (arguments.length) {
+ if (!theFont) {
+ throw new Error('null font passed to textFont');
+ }
+ this._renderer._setProperty('_textFont', theFont);
+ if (theSize) {
+ this._renderer._setProperty('_textSize', theSize);
+ if (!this._renderer._leadingSet) {
+ // only use a default value if not previously set (#5181)
+ this._renderer._setProperty('_textLeading', theSize * constants._DEFAULT_LEADMULT);
+ }
+ }
+ return this._renderer._applyTextProperties();
+ }
+ return this._renderer._textFont;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/friendly_errors/fes_core': 289,
+ '../core/friendly_errors/file_errors': 290,
+ '../core/friendly_errors/validate_params': 293,
+ '../core/main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.last-index-of': 181,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.split': 216,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256,
+ 'opentype.js': 271
+ }
+ ],
+ 336: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.replace');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * This module defines the p5.Font class and functions for
+ * drawing text to the display canvas.
+ * @module Typography
+ * @submodule Loading & Displaying
+ * @requires core
+ * @requires constants
+ */
+ /**
+ * A class to describe fonts.
+ * @class p5.Font
+ * @constructor
+ * @param {p5} [pInst] pointer to p5 instance.
+ * @example
+ *
+ * let fontRegular;
+ * let fontItalic;
+ * let fontBold;
+ *
+ * function preload() {
+ * fontRegular = loadFont('assets/Regular.otf');
+ * fontItalic = loadFont('assets/Italic.ttf');
+ * fontBold = loadFont('assets/Bold.ttf');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ * textFont(fontRegular);
+ * text('I am Normal', 10, 30);
+ * textFont(fontItalic);
+ * text('I am Italic', 10, 50);
+ * textFont(fontBold);
+ * text('I am Bold', 10, 70);
+ *
+ * describe('The statements "I am Normal", "I am Italic", and "I am Bold" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.Font = /*#__PURE__*/ function () {
+ function _class(p) {
+ _classCallCheck(this, _class);
+ this.parent = p;
+ this.cache = {
+ };
+ /**
+ * Underlying
+ * opentype.js
+ * font object.
+ * @property font
+ */
+ this.font = undefined;
+ } /**
+ * Returns the bounding box for a string of text written using this
+ * p5.Font.
+ *
+ * The first parameter, `str`, is a string of text. The second and third
+ * parameters, `x` and `y`, are the text's position. By default, they set the
+ * coordinates of the bounding box's bottom-left corner. See
+ * textAlign() for more ways to align text.
+ *
+ * The fourth parameter, `fontSize`, is optional. It sets the font size used to
+ * determine the bounding box. By default, `font.textBounds()` will use the
+ * current textSize().
+ *
+ * @method textBounds
+ * @param {String} str string of text.
+ * @param {Number} x x-coordinate of the text.
+ * @param {Number} y y-coordinate of the text.
+ * @param {Number} [fontSize] font size. Defaults to the current
+ * textSize().
+ * @return {Object} object describing the bounding box with
+ * properties x, y, w, and h.
+ *
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * // Creates a p5.Font object.
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * fill('deeppink');
+ * textFont(font);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ *
+ * describe('The text "p5*js" written in pink on a white background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ *
+ * let bbox = font.textBounds('p5*js', 35, 53);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ *
+ * textFont(font);
+ * text('p5*js', 35, 53);
+ *
+ * describe('The text "p5*js" written in black inside a white rectangle.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ *
+ * textFont(font);
+ * textSize(15);
+ * textAlign(CENTER, CENTER);
+ *
+ * let bbox = font.textBounds('p5*js', 50, 50);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ *
+ * text('p5*js', 50, 50);
+ *
+ * describe('The text "p5*js" written in black inside a white rectangle.');
+ * }
+ *
+ *
+ *
+ */
+
+ _createClass(_class, [
+ {
+ key: 'textBounds',
+ value: function textBounds(str) {
+ var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+ var y = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+ var fontSize = arguments.length > 3 ? arguments[3] : undefined;
+ var opts = arguments.length > 4 ? arguments[4] : undefined;
+ // Check cache for existing bounds. Take into consideration the text alignment
+ // settings. Default alignment should match opentype's origin: left-aligned &
+ // alphabetic baseline.
+ var p = opts && opts.renderer && opts.renderer._pInst || this.parent;
+ var ctx = p._renderer.drawingContext;
+ var alignment = ctx.textAlign || constants.LEFT;
+ var baseline = ctx.textBaseline || constants.BASELINE;
+ var cacheResults = false;
+ var result;
+ var key;
+ fontSize = fontSize || p._renderer._textSize;
+ // NOTE: cache disabled for now pending further discussion of #3436
+ if (cacheResults) {
+ key = cacheKey('textBounds', str, x, y, fontSize, alignment, baseline);
+ result = this.cache[key];
+ }
+ if (!result) {
+ var minX = [
+ ];
+ var minY;
+ var maxX = [
+ ];
+ var maxY;
+ var pos;
+ var xCoords = [
+ ];
+ xCoords[0] = [
+ ];
+ var yCoords = [
+ ];
+ var scale = this._scale(fontSize);
+ var lineHeight = p._renderer.textLeading();
+ var lineCount = 0;
+ this.font.forEachGlyph(str, x, y, fontSize, opts, function (glyph, gX, gY, gFontSize) {
+ var gm = glyph.getMetrics();
+ if (glyph.index === 0 || 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;
+ } /**
+ * Returns an array of points outlining a string of text written using this
+ * p5.Font.
+ *
+ * The first parameter, `str`, is a string of text. The second and third
+ * parameters, `x` and `y`, are the text's position. By default, they set the
+ * coordinates of the bounding box's bottom-left corner. See
+ * textAlign() for more ways to align text.
+ *
+ * The fourth parameter, `fontSize`, is optional. It sets the text's font
+ * size. By default, `font.textToPoints()` will use the current
+ * textSize().
+ *
+ * The fifth parameter, `options`, is also optional. `font.textToPoints()`
+ * expects an object with the following properties:
+ *
+ * `sampleFactor` is the ratio of the text's path length to the number of
+ * samples. It defaults to 0.1. Higher values produce more points along the
+ * path and are more precise.
+ *
+ * `simplifyThreshold` removes collinear points if it's set to a number other
+ * than 0. The value represents the threshold angle to use when determining
+ * whether two edges are collinear.
+ *
+ * @method textToPoints
+ * @param {String} str string of text.
+ * @param {Number} x x-coordinate of the text.
+ * @param {Number} y y-coordinate of the text.
+ * @param {Number} [fontSize] font size. Defaults to the current
+ * textSize().
+ * @param {Object} [options] object with sampleFactor and simplifyThreshold
+ * properties.
+ * @return {Array} array of point objects, each with x, y, and alpha (path angle) properties.
+ * @example
+ *
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ *
+ * let bbox = font.textBounds('p5*js', 31, 53, 15);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ *
+ * textFont(font);
+ * textSize(15);
+ * text('p5*js', 31, 53);
+ *
+ * describe('The text "p5*js" written in black inside a white rectangle.');
+ * }
+ *
+ *
+ *
+ */
+
+ },
+ {
+ key: 'textToPoints',
+ value: function textToPoints(txt, x, y, fontSize, options) {
+ var xOriginal = x;
+ var result = [
+ ];
+ var lines = txt.split(/\r?\n|\r|\n/g);
+ fontSize = fontSize || this.parent._renderer._textSize;
+ function isSpace(i, text, glyphsLine) {
+ return glyphsLine[i].name && glyphsLine[i].name === 'space' || text.length === glyphsLine.length && text[i] === ' ' //||
+ //(glyphs[i].index && glyphs[i].index === 3)
+ ;
+ }
+ for (var i = 0; i < lines.length; i++) {
+ var xoff = 0;
+ x = xOriginal;
+ var line = lines[i];
+ line = line.replace('\t', ' ');
+ var glyphs = this._getGlyphs(line);
+ for (var j = 0; j < glyphs.length; j++) {
+ if (!isSpace(j, line, glyphs)) {
+ // fix to #1817, #2069
+ var gpath = glyphs[j].getPath(x, y, fontSize),
+ paths = splitPaths(gpath.commands);
+ for (var k = 0; k < paths.length; k++) {
+ var pts = pathToPoints(paths[k], options);
+ for (var l = 0; l < pts.length; l++) {
+ pts[l].x += xoff;
+ result.push(pts[l]);
+ }
+ }
+ }
+ xoff += glyphs[j].advanceWidth * this._scale(fontSize);
+ }
+ y = y + this.parent._renderer._textLeading;
+ }
+ return result;
+ } // ----------------------------- End API ------------------------------
+ /**
+ * Returns the set of opentype glyphs for the supplied string.
+ *
+ * Note that there is not a strict one-to-one mapping between characters
+ * and glyphs, so the list of returned glyphs can be larger or smaller
+ * than the length of the given string.
+ *
+ * @private
+ * @param {String} str the string to be converted
+ * @return {Array} the opentype glyphs
+ */
+
+ },
+ {
+ key: '_getGlyphs',
+ value: function _getGlyphs(str) {
+ return this.font.stringToGlyphs(str);
+ } /**
+ * Returns an opentype path for the supplied string and position.
+ *
+ * @private
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional)
+ * @return {Object} the opentype path
+ */
+
+ },
+ {
+ key: '_getPath',
+ value: function _getPath(line, x, y, options) {
+ var p = options && options.renderer && options.renderer._pInst || this.parent,
+ renderer = p._renderer,
+ pos = this._handleAlignment(renderer, line, x, y);
+ return this.font.getPath(line, pos.x, pos.y, renderer._textSize, options);
+ } /*
+ * Creates an SVG-formatted path-data string
+ * (See http://www.w3.org/TR/SVG/paths.html#PathData)
+ * from the given opentype path or string/position
+ *
+ * @param {Object} path an opentype path, OR the following:
+ *
+ * @param {String} line a line of text
+ * @param {Number} x x-position
+ * @param {Number} y y-position
+ * @param {Object} options opentype options (optional), set options.decimals
+ * to set the decimal precision of the path-data
+ *
+ * @return {Object} this p5.Font object
+ */
+
+ },
+ {
+ key: '_getPathData',
+ value: function _getPathData(line, x, y, options) {
+ var decimals = 3;
+ // create path from string/position
+ if (typeof line === 'string' && arguments.length > 2) {
+ line = this._getPath(line, x, y, options);
+ } else if (_typeof(x) === 'object') {
+ // handle options specified in 2nd arg
+ options = x;
+ } // handle svg arguments
+
+ if (options && typeof options.decimals === 'number') {
+ decimals = options.decimals;
+ }
+ return line.toPathData(decimals);
+ } /*
+ * Creates an SVG
+ * let font;
+ *
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * background(200);
+ * let points = font.textToPoints('p5*js', 6, 60, 35, { sampleFactor: 0.5 });
+ * points.forEach(p => {
+ * point(p.x, p.y);
+ * });
+ *
+ * describe('A set of black dots outlining the text "p5*js" on a gray background.');
+ * }
+ *
+ *
+ * function setup() {
+ * let myArray = ['Mango', 'Apple', 'Papaya'];
+ * print(myArray); // ['Mango', 'Apple', 'Papaya']
+ *
+ * append(myArray, 'Peach');
+ * print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+ * }
+ *
+ * let src = ['A', 'B', 'C'];
+ * let dst = [1, 2, 3];
+ * let srcPosition = 1;
+ * let dstPosition = 0;
+ * let length = 2;
+ *
+ * print(src); // ['A', 'B', 'C']
+ * print(dst); // [ 1 , 2 , 3 ]
+ *
+ * arrayCopy(src, srcPosition, dst, dstPosition, length);
+ * print(dst); // ['B', 'C', 3]
+ *
+ * function setup() {
+ * let arr1 = ['A', 'B', 'C'];
+ * let arr2 = [1, 2, 3];
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1,2,3]
+ *
+ * let arr3 = concat(arr1, arr2);
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1, 2, 3]
+ * print(arr3); // ['A','B','C', 1, 2, 3]
+ * }
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A','B','C']
+ *
+ * reverse(myArray);
+ * print(myArray); // ['C','B','A']
+ * }
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A', 'B', 'C']
+ * let newArray = shorten(myArray);
+ * print(myArray); // ['A','B','C']
+ * print(newArray); // ['A','B']
+ * }
+ *
+ * function setup() {
+ * let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
+ * print(regularArr);
+ * shuffle(regularArr, true); // force modifications to passed array
+ * print(regularArr);
+ *
+ * // By default shuffle() returns a shuffled cloned array:
+ * let newArr = shuffle(regularArr);
+ * print(regularArr);
+ * print(newArr);
+ * }
+ *
+ * function setup() {
+ * let words = ['banana', 'apple', 'pear', 'lime'];
+ * print(words); // ['banana', 'apple', 'pear', 'lime']
+ * let count = 4; // length of array
+ *
+ * words = sort(words, count);
+ * print(words); // ['apple', 'banana', 'lime', 'pear']
+ * }
+ *
+ * function setup() {
+ * let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+ * print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+ * let count = 5; // Less than the length of the array
+ *
+ * numbers = sort(numbers, count);
+ * print(numbers); // [1,2,5,6,14,9,8,12]
+ * }
+ *
+ * function setup() {
+ * let myArray = [0, 1, 2, 3, 4];
+ * let insArray = ['A', 'B', 'C'];
+ * print(myArray); // [0, 1, 2, 3, 4]
+ * print(insArray); // ['A','B','C']
+ *
+ * splice(myArray, insArray, 3);
+ * print(myArray); // [0,1,2,'A','B','C',3,4]
+ * }
+ *
+ * function setup() {
+ * let myArray = [1, 2, 3, 4, 5];
+ * print(myArray); // [1, 2, 3, 4, 5]
+ *
+ * let sub1 = subset(myArray, 0, 3);
+ * let sub2 = subset(myArray, 2, 2);
+ * print(sub1); // [1,2,3]
+ * print(sub2); // [3,4]
+ * }
+ *
+ * let str = '20';
+ * let diameter = float(str);
+ * ellipse(width / 2, height / 2, diameter, diameter);
+ * describe('20-by-20 white ellipse in the center of the canvas');
+ *
+ * print(float('10.31')); // 10.31
+ * print(float('Infinity')); // Infinity
+ * print(float('-Infinity')); // -Infinity
+ *
+ * print(int('10')); // 10
+ * print(int(10.31)); // 10
+ * print(int(-10)); // -10
+ * print(int(true)); // 1
+ * print(int(false)); // 0
+ * print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
+ * print(int(Infinity)); // Infinity
+ * print(int('-Infinity')); // -Infinity
+ *
+ * print(str('10')); // "10"
+ * print(str(10.31)); // "10.31"
+ * print(str(-10)); // "-10"
+ * print(str(true)); // "true"
+ * print(str(false)); // "false"
+ * print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
+ *
+ * print(boolean(0)); // false
+ * print(boolean(1)); // true
+ * print(boolean('true')); // true
+ * print(boolean('abcd')); // false
+ * print(boolean([0, 12, 'true'])); // [false, true, true]
+ *
+ * print(byte(127)); // 127
+ * print(byte(128)); // -128
+ * print(byte(23.4)); // 23
+ * print(byte('23.4')); // 23
+ * print(byte('hello')); // NaN
+ * print(byte(true)); // 1
+ * print(byte([0, 255, '100'])); // [0, -1, 100]
+ *
+ * print(char(65)); // "A"
+ * print(char('65')); // "A"
+ * print(char([65, 66, 67])); // [ "A", "B", "C" ]
+ * print(join(char([65, 66, 67]), '')); // "ABC"
+ *
+ * print(unchar('A')); // 65
+ * print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
+ * print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
+ *
+ * print(hex(255)); // "000000FF"
+ * print(hex(255, 6)); // "0000FF"
+ * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
+ * print(Infinity); // "FFFFFFFF"
+ * print(-Infinity); // "00000000"
+ *
+ * print(unhex('A')); // 10
+ * print(unhex('FF')); // 255
+ * print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
+ *
+ *
+ */
+
+ _main.default.prototype.join = function (list, separator) {
+ _main.default._validateParameters('join', arguments);
+ return list.join(separator);
+ };
+ /**
+ * This function is used to apply a regular expression to a piece of text,
+ * and return matching groups (elements found inside parentheses) as a
+ * String array. If there are no matches, a null value will be returned.
+ * If no groups are specified in the regular expression, but the sequence
+ * matches, an array of length 1 (with the matched text as the first element
+ * of the array) will be returned.
+ *
+ * To use the function, first check to see if the result is null. If the
+ * result is null, then the sequence did not match at all. If the sequence
+ * did match, an array is returned.
+ *
+ * If there are groups (specified by sets of parentheses) in the regular
+ * expression, then the contents of each will be returned in the array.
+ * Element [0] of a regular expression match returns the entire matching
+ * string, and the match groups start at element [1] (the first group is [1],
+ * the second [2], and so on).
+ *
+ * @method match
+ * @param {String} str the String to be searched
+ * @param {String} regexp the regexp to be used for matching
+ * @return {String[]} Array of Strings found
+ * @example
+ *
+ * let array = ['Hello', 'world!'];
+ * let separator = ' ';
+ * let message = join(array, separator);
+ * text(message, 5, 50);
+ * describe('“Hello world!” displayed middle left of canvas.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.match = function (str, reg) {
+ _main.default._validateParameters('match', arguments);
+ return str.match(reg);
+ };
+ /**
+ * This function is used to apply a regular expression to a piece of text,
+ * and return a list of matching groups (elements found inside parentheses)
+ * as a two-dimensional String array. If there are no matches, a null value
+ * will be returned. If no groups are specified in the regular expression,
+ * but the sequence matches, a two dimensional array is still returned, but
+ * the second dimension is only of length one.
+ *
+ * To use the function, first check to see if the result is null. If the
+ * result is null, then the sequence did not match at all. If the sequence
+ * did match, a 2D array is returned.
+ *
+ * If there are groups (specified by sets of parentheses) in the regular
+ * expression, then the contents of each will be returned in the array.
+ * Assuming a loop with counter variable i, element [i][0] of a regular
+ * expression match returns the entire matching string, and the match groups
+ * start at element [i][1] (the first group is [i][1], the second [i][2],
+ * and so on).
+ *
+ * @method matchAll
+ * @param {String} str the String to be searched
+ * @param {String} regexp the regexp to be used for matching
+ * @return {String[]} 2d Array of Strings found
+ * @example
+ *
+ * let string = 'Hello p5js*!';
+ * let regexp = 'p5js\\*';
+ * let m = match(string, regexp);
+ * text(m, 5, 50);
+ * describe('“p5js*” displayed middle left of canvas.');
+ *
+ *
+ *
+ */
+ _main.default.prototype.matchAll = function (str, reg) {
+ _main.default._validateParameters('matchAll', arguments);
+ var re = new RegExp(reg, 'g');
+ var match = re.exec(str);
+ var matches = [
+ ];
+ while (match !== null) {
+ matches.push(match);
+ // matched text: match[0]
+ // match start: match.index
+ // capturing group n: match[n]
+ match = re.exec(str);
+ }
+ return matches;
+ };
+ /**
+ * Utility function for formatting numbers into strings. There are two
+ * versions: one for formatting floats, and one for formatting ints.
+ *
+ * The values for the digits, left, and right parameters should always
+ * be positive integers.
+ *
+ * (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter
+ * if greater than the current length of the number.
+ *
+ * For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123
+ * (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than
+ * the result will be 123.200.
+ *
+ * @method nf
+ * @param {Number|String} num the Number to format
+ * @param {Integer|String} [left] number of digits to the left of the
+ * decimal point
+ * @param {Integer|String} [right] number of digits to the right of the
+ * decimal point
+ * @return {String} formatted String
+ *
+ * @example
+ *
+ * let string = 'Hello p5js*! Hello world!';
+ * let regexp = 'Hello';
+ * matchAll(string, regexp);
+ *
+ *
+ *
+ */
+ /**
+ * @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 _num$toString$split = num.toString().split('.'),
+ _num$toString$split2 = _slicedToArray(_num$toString$split, 2),
+ leftPart = _num$toString$split2[0],
+ rightPart = _num$toString$split2[1];
+ if (typeof right === 'undefined') {
+ leftPart = leftPart.padStart(left, '0');
+ return rightPart ? leftPart + '.' + rightPart : leftPart;
+ } else {
+ var roundedOff = num.toFixed(right);
+ var _roundedOff$toString$ = roundedOff.toString().split('.');
+ var _roundedOff$toString$2 = _slicedToArray(_roundedOff$toString$, 2);
+ leftPart = _roundedOff$toString$2[0];
+ rightPart = _roundedOff$toString$2[1];
+ leftPart = leftPart.padStart(left, '0');
+ if (typeof rightPart === 'undefined') {
+ return leftPart;
+ } else {
+ return leftPart + '.' + rightPart;
+ }
+ }
+ } /**
+ * 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 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);
+ *
+ * describe('“0321.00” middle top, “-1321.00” middle bottom canvas');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nfc
+ * @param {Array} nums the Numbers to format
+ * @param {Integer|String} [right]
+ * @return {String[]} formatted Strings
+ */
+
+ _main.default.prototype.nfc = function (num, right) {
+ _main.default._validateParameters('nfc', arguments);
+ if (num instanceof Array) {
+ return num.map(function (x) {
+ return doNfc(x, right);
+ });
+ } else {
+ return doNfc(num, right);
+ }
+ };
+ function doNfc(num, right) {
+ num = num.toString();
+ var dec = num.indexOf('.');
+ var rem = dec !== - 1 ? num.substring(dec) : '';
+ var n = dec !== - 1 ? num.substring(0, dec) : num;
+ n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+ if (right === 0) {
+ rem = '';
+ } else if (typeof right !== 'undefined') {
+ if (right > rem.length) {
+ rem += dec === - 1 ? '.' : '';
+ var len = right - rem.length + 1;
+ for (var i = 0; i < len; i++) {
+ rem += '0';
+ }
+ } else {
+ rem = rem.substring(0, right + 1);
+ }
+ }
+ return n + rem;
+ } /**
+ * Utility function for formatting numbers into strings. Similar to nf() but
+ * puts a "+" in front of positive numbers and a "-" in front of negative
+ * numbers. There are two versions: one for formatting floats, and one for
+ * formatting ints. The values for left, and right parameters
+ * should always be positive integers.
+ *
+ * @method nfp
+ * @param {Number} num the Number to format
+ * @param {Integer} [left] number of digits to the left of the decimal
+ * point
+ * @param {Integer} [right] number of digits to the right of the
+ * decimal point
+ * @return {String} formatted String
+ *
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ * let num = 11253106.115;
+ * let numArr = [1, 1, 2];
+ *
+ * noStroke();
+ * fill(0);
+ * textSize(12);
+ *
+ * // Draw formatted numbers
+ * text(nfc(num, 4), 10, 30);
+ * text(nfc(numArr, 2), 10, 80);
+ *
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ *
+ * describe('“11,253,106.115” top middle and “1.00,1.00,2.00” displayed bottom mid');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nfp
+ * @param {Number[]} nums the Numbers to format
+ * @param {Integer} [left]
+ * @param {Integer} [right]
+ * @return {String[]} formatted Strings
+ */
+
+ _main.default.prototype.nfp = function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('nfp', args);
+ var nfRes = _main.default.prototype.nf.apply(this, args);
+ if (nfRes instanceof Array) {
+ return nfRes.map(addNfp);
+ } else {
+ return addNfp(nfRes);
+ }
+ };
+ function addNfp(num) {
+ return parseFloat(num) > 0 ? '+'.concat(num.toString()) : num.toString();
+ } /**
+ * Utility function for formatting numbers into strings. Similar to nf() but
+ * puts an additional "_" (space) in front of positive numbers just in case to align it with negative
+ * numbers which includes "-" (minus) sign.
+ *
+ * The main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative
+ * number with some negative number (See the example to get a clear picture).
+ * There are two versions: one for formatting float, and one for formatting int.
+ *
+ * The values for the digits, left, and right parameters should always be positive integers.
+ *
+ * (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using.
+ *
+ * (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter
+ * if greater than the current length of the number.
+ *
+ * For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123
+ * (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than
+ * the result will be 123.200.
+ *
+ * @method nfs
+ * @param {Number} num the Number to format
+ * @param {Integer} [left] number of digits to the left of the decimal
+ * point
+ * @param {Integer} [right] number of digits to the right of the
+ * decimal point
+ * @return {String} formatted String
+ *
+ * @example
+ *
+ * function setup() {
+ * background(200);
+ * let num1 = 11253106.115;
+ * let num2 = -11253106.115;
+ *
+ * noStroke();
+ * fill(0);
+ * textSize(12);
+ *
+ * // Draw formatted numbers
+ * text(nfp(num1, 4, 2), 10, 30);
+ * text(nfp(num2, 4, 2), 10, 80);
+ *
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ *
+ * describe('“+11253106.11” top middle and “-11253106.11” 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
+ *
+ * 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);
+ *
+ * describe('“0321.00” top middle and “-1321.00” displayed bottom middle');
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.split = function (str, delim) {
+ _main.default._validateParameters('split', arguments);
+ return str.split(delim);
+ };
+ /**
+ * The splitTokens() function splits a String at one or many character
+ * delimiters or "tokens." The delim parameter specifies the character or
+ * characters to be used as a boundary.
+ *
+ * If no delim characters are specified, any whitespace character is used to
+ * split. Whitespace characters include tab (\t), line feed (\n), carriage
+ * return (\r), form feed (\f), and space.
+ *
+ * @method splitTokens
+ * @param {String} value the String to be split
+ * @param {String} [delim] list of individual Strings that will be used as
+ * separators
+ * @return {String[]} Array of Strings
+ * @example
+ *
+ * let names = 'Pat,Xio,Alex';
+ * let splitString = split(names, ',');
+ * text(splitString[0], 5, 30);
+ * text(splitString[1], 5, 50);
+ * text(splitString[2], 5, 70);
+ * describe('“Pat” top left, “Xio” mid left, and “Alex” displayed bottom left');
+ *
+ *
+ *
+ */
+ _main.default.prototype.splitTokens = function (value, delims) {
+ _main.default._validateParameters('splitTokens', arguments);
+ var d;
+ if (typeof delims !== 'undefined') {
+ var str = delims;
+ var sqc = /\]/g.exec(str);
+ var sqo = /\[/g.exec(str);
+ if (sqo && sqc) {
+ str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+ sqo = /\[/g.exec(str);
+ str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+ d = new RegExp('[\\['.concat(str, '\\]]'), 'g');
+ } else if (sqc) {
+ str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+ d = new RegExp('['.concat(str, '\\]]'), 'g');
+ } else if (sqo) {
+ str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+ d = new RegExp('['.concat(str, '\\[]'), 'g');
+ } else {
+ d = new RegExp('['.concat(str, ']'), 'g');
+ }
+ } else {
+ d = /\s/g;
+ }
+ return value.split(d).filter(function (n) {
+ return n;
+ });
+ };
+ /**
+ * Removes whitespace characters from the beginning and end of a String. In
+ * addition to standard whitespace characters such as space, carriage return,
+ * and tab, this function also removes the Unicode "nbsp" character.
+ *
+ * @method trim
+ * @param {String} str a String to be trimmed
+ * @return {String} a trimmed String
+ *
+ * @example
+ *
+ * function setup() {
+ * let myStr = 'Mango, Banana, Lime';
+ * let myStrArr = splitTokens(myStr, ',');
+ *
+ * print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @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': 289,
+ '../core/friendly_errors/file_errors': 290,
+ '../core/friendly_errors/validate_params': 293,
+ '../core/main': 298,
+ 'core-js/modules/es.array.filter': 173,
+ 'core-js/modules/es.array.index-of': 178,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.join': 180,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.number.to-fixed': 193,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.constructor': 204,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.match': 211,
+ 'core-js/modules/es.string.pad-start': 212,
+ 'core-js/modules/es.string.replace': 214,
+ 'core-js/modules/es.string.split': 216,
+ 'core-js/modules/es.string.trim': 219,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 340: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module IO
+ * @submodule Time & Date
+ * @for p5
+ * @requires core
+ */
+ /**
+ * p5.js communicates with the clock on your computer. The day() function
+ * returns the current day as a value from 1 - 31.
+ *
+ * @method day
+ * @return {Integer} the current day
+ * @example
+ *
+ * let string = trim(' No new lines\n ');
+ * text(string + ' here', 2, 50);
+ * describe('“No new lines here” displayed center canvas');
+ *
+ *
+ *
+ */
+
+ _main.default.prototype.day = function () {
+ return new Date().getDate();
+ };
+ /**
+ * p5.js communicates with the clock on your computer. The hour() function
+ * returns the current hour as a value from 0 - 23.
+ *
+ * @method hour
+ * @return {Integer} the current hour
+ * @example
+ *
+ * let d = day();
+ * text('Current day: \n' + d, 5, 50);
+ * describe('Current day is displayed');
+ *
+ *
+ *
+ */
+ _main.default.prototype.hour = function () {
+ return new Date().getHours();
+ };
+ /**
+ * p5.js communicates with the clock on your computer. The minute() function
+ * returns the current minute as a value from 0 - 59.
+ *
+ * @method minute
+ * @return {Integer} the current minute
+ * @example
+ *
+ * let h = hour();
+ * text('Current hour:\n' + h, 5, 50);
+ * describe('Current hour is displayed');
+ *
+ *
+ *
+ */
+ _main.default.prototype.minute = function () {
+ return new Date().getMinutes();
+ };
+ /**
+ * Returns the number of milliseconds (thousandths of a second) since
+ * starting the sketch (when `setup()` is called). This information is often
+ * used for timing events and animation sequences.
+ *
+ * @method millis
+ * @return {Number} the number of milliseconds since starting the sketch
+ * @example
+ *
+ * let m = minute();
+ * text('Current minute: \n' + m, 5, 50);
+ * describe('Current minute is displayed');
+ *
+ *
+ *
+ */
+ _main.default.prototype.millis = function () {
+ if (this._millisStart === - 1) {
+ // Sketch has not started
+ return 0;
+ } else {
+ return window.performance.now() - this._millisStart;
+ }
+ };
+ /**
+ * p5.js communicates with the clock on your computer. The month() function
+ * returns the current month as a value from 1 - 12.
+ *
+ * @method month
+ * @return {Integer} the current month
+ * @example
+ *
+ * let millisecond = millis();
+ * text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
+ * describe('number of milliseconds since sketch has started displayed');
+ *
+ *
+ *
+ */
+ _main.default.prototype.month = function () {
+ //January is 0!
+ return new Date().getMonth() + 1;
+ };
+ /**
+ * p5.js communicates with the clock on your computer. The second() function
+ * returns the current second as a value from 0 - 59.
+ *
+ * @method second
+ * @return {Integer} the current second
+ * @example
+ *
+ * let m = month();
+ * text('Current month: \n' + m, 5, 50);
+ * describe('Current month is displayed');
+ *
+ *
+ *
+ */
+ _main.default.prototype.second = function () {
+ return new Date().getSeconds();
+ };
+ /**
+ * p5.js communicates with the clock on your computer. The year() function
+ * returns the current year as an integer (2014, 2015, 2016, etc).
+ *
+ * @method year
+ * @return {Integer} the current year
+ * @example
+ *
+ * let s = second();
+ * text('Current second: \n' + s, 5, 50);
+ * describe('Current second is displayed');
+ *
+ *
+ *
+ */
+ _main.default.prototype.year = function () {
+ return new Date().getFullYear();
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298
+ }
+ ],
+ 341: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.number.to-fixed');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('./p5.Geometry');
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module Shape
+ * @submodule 3D Primitives
+ * @for p5
+ * @requires core
+ * @requires p5.Geometry
+ */
+ /**
+ * Starts creating a new p5.Geometry. Subsequent shapes drawn will be added
+ * to the geometry and then returned when
+ * endGeometry() is called. One can also use
+ * buildGeometry() to pass a function that
+ * draws shapes.
+ *
+ * If you need to draw complex shapes every frame which don't change over time,
+ * combining them upfront with `beginGeometry()` and `endGeometry()` and then
+ * drawing that will run faster than repeatedly drawing the individual pieces.
+ *
+ * @method beginGeometry
+ *
+ * @example
+ *
+ * let y = year();
+ * text('Current year: \n' + y, 5, 50);
+ * describe('Current year is displayed');
+ *
+ *
+ *
+ *
+ * @alt
+ * A series of different flat, curved, and 3D shapes floating in space.
+ */
+
+ _main.default.prototype.beginGeometry = function () {
+ return this._renderer.beginGeometry();
+ };
+ /**
+ * Finishes creating a new p5.Geometry that was
+ * started using beginGeometry(). One can also
+ * use buildGeometry() to pass a function that
+ * draws shapes.
+ *
+ * @method endGeometry
+ * @returns {p5.Geometry} The model that was built.
+ */
+ _main.default.prototype.endGeometry = function () {
+ return this._renderer.endGeometry();
+ };
+ /**
+ * Creates a new p5.Geometry that contains all
+ * the shapes drawn in a provided callback function. The returned combined shape
+ * can then be drawn all at once using model().
+ *
+ * If you need to draw complex shapes every frame which don't change over time,
+ * combining them with `buildGeometry()` once and then drawing that will run
+ * faster than repeatedly drawing the individual pieces.
+ *
+ * One can also draw shapes directly between
+ * beginGeometry() and
+ * endGeometry() instead of using a callback
+ * function.
+ *
+ * @method buildGeometry
+ * @param {Function} callback A function that draws shapes.
+ * @returns {p5.Geometry} The model that was built from the callback function.
+ *
+ * @example
+ *
+ * let shapes;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * makeShapes();
+ * }
+ *
+ * function makeShapes() {
+ * beginGeometry();
+ * scale(0.18);
+ *
+ * push();
+ * translate(100, -50);
+ * scale(0.5);
+ * rotateX(PI/4);
+ * cone();
+ * pop();
+ * cone();
+ *
+ * beginShape();
+ * vertex(-20, -50);
+ * quadraticVertex(
+ * -40, -70,
+ * 0, -60
+ * );
+ * endShape();
+ *
+ * beginShape(TRIANGLE_STRIP);
+ * for (let y = 20; y <= 60; y += 10) {
+ * for (let x of [20, 60]) {
+ * vertex(x, y);
+ * }
+ * }
+ * endShape();
+ *
+ * beginShape();
+ * vertex(-100, -120);
+ * vertex(-120, -110);
+ * vertex(-105, -100);
+ * endShape();
+ *
+ * shapes = endGeometry();
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * lights();
+ * orbitControl();
+ * model(shapes);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A cluster of spheres.
+ */
+ _main.default.prototype.buildGeometry = function (callback) {
+ return this._renderer.buildGeometry(callback);
+ };
+ /**
+ * Clears the resources of a model to free up browser memory. A model whose
+ * resources have been cleared can still be drawn, but the first time it is
+ * drawn again, it might take longer.
+ *
+ * This method works on models generated with
+ * buildGeometry() as well as those loaded
+ * from loadModel().
+ *
+ * @method freeGeometry
+ * @param {p5.Geometry} The geometry whose resources should be freed
+ */
+ _main.default.prototype.freeGeometry = function (geometry) {
+ this._renderer._freeBuffers(geometry.gid);
+ };
+ /**
+ * Draw a plane with given a width and height
+ * @method plane
+ * @param {Number} [width] width of the plane
+ * @param {Number} [height] height of the plane
+ * @param {Integer} [detailX] Optional number of triangle
+ * subdivisions in x-dimension
+ * @param {Integer} [detailY] Optional number of triangle
+ * subdivisions in y-dimension
+ * @chainable
+ * @example
+ *
+ * let particles;
+ * let button;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * button = createButton('New');
+ * button.mousePressed(makeParticles);
+ * makeParticles();
+ * }
+ *
+ * function makeParticles() {
+ * if (particles) freeGeometry(particles);
+ *
+ * particles = buildGeometry(() => {
+ * for (let i = 0; i < 60; i++) {
+ * push();
+ * translate(
+ * randomGaussian(0, 20),
+ * randomGaussian(0, 20),
+ * randomGaussian(0, 20)
+ * );
+ * sphere(5);
+ * pop();
+ * }
+ * });
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * noStroke();
+ * lights();
+ * orbitControl();
+ * model(particles);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * Nothing displayed on canvas
+ * Rotating interior view of a box with sides that change color.
+ * 3d red and green gradient.
+ * Rotating interior view of a cylinder with sides that change color.
+ * Rotating view of a cylinder with sides that change color.
+ * 3d red and green gradient.
+ * rotating view of a multi-colored cylinder with concave sides.
+ */
+ _main.default.prototype.plane = function (width, height, detailX, detailY) {
+ this._assert3d('plane');
+ _main.default._validateParameters('plane', arguments);
+ if (typeof width === 'undefined') {
+ width = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = width;
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 1;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 1;
+ }
+ var gId = 'plane|'.concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _plane = function _plane() {
+ var u,
+ v,
+ p;
+ for (var i = 0; i <= this.detailY; i++) {
+ v = i / this.detailY;
+ for (var j = 0; j <= this.detailX; j++) {
+ u = j / this.detailX;
+ p = new _main.default.Vector(u - 0.5, v - 0.5, 0);
+ this.vertices.push(p);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var planeGeom = new _main.default.Geometry(detailX, detailY, _plane);
+ planeGeom.computeFaces().computeNormals();
+ if (detailX <= 1 && detailY <= 1) {
+ planeGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on plane objects with more' + ' than 1 detailX or 1 detailY');
+ }
+ this._renderer.createBuffers(gId, planeGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, width, height, 1);
+ return this;
+ };
+ /**
+ * Draw a box with given width, height and depth
+ * @method box
+ * @param {Number} [width] width of the box
+ * @param {Number} [height] height of the box
+ * @param {Number} [depth] depth of the box
+ * @param {Integer} [detailX] Optional number of triangle
+ * subdivisions in x-dimension
+ * @param {Integer} [detailY] Optional number of triangle
+ * subdivisions in y-dimension
+ * @chainable
+ * @example
+ *
+ * // draw a plane
+ * // with width 50 and height 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * describe('a white plane with black wireframe lines');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * plane(50, 50);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.box = function (width, height, depth, detailX, detailY) {
+ this._assert3d('box');
+ _main.default._validateParameters('box', arguments);
+ if (typeof width === 'undefined') {
+ width = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = width;
+ }
+ if (typeof depth === 'undefined') {
+ depth = height;
+ }
+ var perPixelLighting = this._renderer.attributes && this._renderer.attributes.perPixelLighting;
+ if (typeof detailX === 'undefined') {
+ detailX = perPixelLighting ? 1 : 4;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = perPixelLighting ? 1 : 4;
+ }
+ var gId = 'box|'.concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _box = function _box() {
+ var _this = this;
+ var cubeIndices = [
+ [0,
+ 4,
+ 2,
+ 6],
+ // -1, 0, 0],// -x
+ [
+ 1,
+ 3,
+ 5,
+ 7
+ ],
+ // +1, 0, 0],// +x
+ [
+ 0,
+ 1,
+ 4,
+ 5
+ ],
+ // 0, -1, 0],// -y
+ [
+ 2,
+ 6,
+ 3,
+ 7
+ ],
+ // 0, +1, 0],// +y
+ [
+ 0,
+ 2,
+ 1,
+ 3
+ ],
+ // 0, 0, -1],// -z
+ [
+ 4,
+ 5,
+ 6,
+ 7
+ ] // 0, 0, +1] // +z
+ ];
+ //using custom edges
+ //to avoid diagonal stroke lines across face of box
+ this.edges = [
+ [0,
+ 1],
+ [
+ 1,
+ 3
+ ],
+ [
+ 3,
+ 2
+ ],
+ [
+ 6,
+ 7
+ ],
+ [
+ 8,
+ 9
+ ],
+ [
+ 9,
+ 11
+ ],
+ [
+ 14,
+ 15
+ ],
+ [
+ 16,
+ 17
+ ],
+ [
+ 17,
+ 19
+ ],
+ [
+ 18,
+ 19
+ ],
+ [
+ 20,
+ 21
+ ],
+ [
+ 22,
+ 23
+ ]
+ ];
+ cubeIndices.forEach(function (cubeIndex, i) {
+ var v = i * 4;
+ for (var j = 0; j < 4; j++) {
+ var d = cubeIndex[j];
+ //inspired by lightgl:
+ //https://github.com/evanw/lightgl.js
+ //octants:https://en.wikipedia.org/wiki/Octant_(solid_geometry)
+ var octant = new _main.default.Vector(((d & 1) * 2 - 1) / 2, ((d & 2) - 1) / 2, ((d & 4) / 2 - 1) / 2);
+ _this.vertices.push(octant);
+ _this.uvs.push(j & 1, (j & 2) / 2);
+ }
+ _this.faces.push([v,
+ v + 1,
+ v + 2]);
+ _this.faces.push([v + 2,
+ v + 1,
+ v + 3]);
+ });
+ };
+ var boxGeom = new _main.default.Geometry(detailX, detailY, _box);
+ boxGeom.computeNormals();
+ if (detailX <= 4 && detailY <= 4) {
+ boxGeom._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on box objects with more' + ' than 4 detailX or 4 detailY');
+ } //initialize our geometry buffer with
+ //the key val pair:
+ //geometry Id, Geom object
+
+ this._renderer.createBuffers(gId, boxGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, width, height, depth);
+ return this;
+ };
+ /**
+ * Draw a sphere with given radius.
+ *
+ * DetailX and detailY determines the number of subdivisions in the x-dimension
+ * and the y-dimension of a sphere. More subdivisions make the sphere seem
+ * smoother. The recommended maximum values are both 24. Using a value greater
+ * than 24 may cause a warning or slow down the browser.
+ * @method sphere
+ * @param {Number} [radius] radius of circle
+ * @param {Integer} [detailX] optional number of subdivisions in x-dimension
+ * @param {Integer} [detailY] optional number of subdivisions in y-dimension
+ *
+ * @chainable
+ * @example
+ *
+ * // draw a spinning box
+ * // with width, height and depth of 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * describe('a white box rotating in 3D space');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(50);
+ * }
+ *
+ *
+ *
+ *
+ * @example
+ *
+ * // draw a sphere with radius 40
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 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);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.sphere = function (radius, detailX, detailY) {
+ this._assert3d('sphere');
+ _main.default._validateParameters('sphere', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 16;
+ }
+ this.ellipsoid(radius, radius, radius, detailX, detailY);
+ return this;
+ };
+ /**
+ * @private
+ * Helper function for creating both cones and cylinders
+ * Will only generate well-defined geometry when bottomRadius, height > 0
+ * and topRadius >= 0
+ * If topRadius == 0, topCap should be false
+ */
+ var _truncatedCone = function _truncatedCone(bottomRadius, topRadius, height, detailX, detailY, bottomCap, topCap) {
+ bottomRadius = bottomRadius <= 0 ? 1 : bottomRadius;
+ topRadius = topRadius < 0 ? 0 : topRadius;
+ height = height <= 0 ? bottomRadius : height;
+ detailX = detailX < 3 ? 3 : detailX;
+ detailY = detailY < 1 ? 1 : detailY;
+ bottomCap = bottomCap === undefined ? true : bottomCap;
+ topCap = topCap === undefined ? topRadius !== 0 : topCap;
+ var start = bottomCap ? - 2 : 0;
+ var end = detailY + (topCap ? 2 : 0);
+ //ensure constant slant for interior vertex normals
+ var slant = Math.atan2(bottomRadius - topRadius, height);
+ var sinSlant = Math.sin(slant);
+ var cosSlant = Math.cos(slant);
+ var yy,
+ ii,
+ jj;
+ for (yy = start; yy <= end; ++yy) {
+ var v = yy / detailY;
+ var y = height * v;
+ var ringRadius = void 0;
+ if (yy < 0) {
+ //for the bottomCap edge
+ y = 0;
+ v = 0;
+ ringRadius = bottomRadius;
+ } else if (yy > detailY) {
+ //for the topCap edge
+ y = height;
+ v = 1;
+ ringRadius = topRadius;
+ } else {
+ //for the middle
+ ringRadius = bottomRadius + (topRadius - bottomRadius) * v;
+ }
+ if (yy === - 2 || yy === detailY + 2) {
+ //center of bottom or top caps
+ ringRadius = 0;
+ }
+ y -= height / 2; //shift coordiate origin to the center of object
+ for (ii = 0; ii < detailX; ++ii) {
+ var u = ii / (detailX - 1);
+ var ur = 2 * Math.PI * u;
+ var sur = Math.sin(ur);
+ var cur = Math.cos(ur);
+ //VERTICES
+ this.vertices.push(new _main.default.Vector(sur * ringRadius, y, cur * ringRadius));
+ //VERTEX NORMALS
+ var vertexNormal = void 0;
+ if (yy < 0) {
+ vertexNormal = new _main.default.Vector(0, - 1, 0);
+ } else if (yy > detailY && topRadius) {
+ vertexNormal = new _main.default.Vector(0, 1, 0);
+ } else {
+ vertexNormal = new _main.default.Vector(sur * cosSlant, sinSlant, cur * cosSlant);
+ }
+ this.vertexNormals.push(vertexNormal);
+ //UVs
+ this.uvs.push(u, v);
+ }
+ }
+ var startIndex = 0;
+ if (bottomCap) {
+ for (jj = 0; jj < detailX; ++jj) {
+ var nextjj = (jj + 1) % detailX;
+ this.faces.push([startIndex + jj,
+ startIndex + detailX + nextjj,
+ startIndex + detailX + jj]);
+ }
+ startIndex += detailX * 2;
+ }
+ for (yy = 0; yy < detailY; ++yy) {
+ for (ii = 0; ii < detailX; ++ii) {
+ var nextii = (ii + 1) % detailX;
+ this.faces.push([startIndex + ii,
+ startIndex + nextii,
+ startIndex + detailX + nextii]);
+ this.faces.push([startIndex + ii,
+ startIndex + detailX + nextii,
+ startIndex + detailX + ii]);
+ }
+ startIndex += detailX;
+ }
+ if (topCap) {
+ startIndex += detailX;
+ for (ii = 0; ii < detailX; ++ii) {
+ this.faces.push([startIndex + ii,
+ startIndex + (ii + 1) % detailX,
+ startIndex + detailX]);
+ }
+ }
+ };
+ /**
+ * Draw a cylinder with given radius and height
+ *
+ * DetailX and detailY determines the number of subdivisions in the x-dimension
+ * and the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother.
+ * The recommended maximum value for detailX is 24. Using a value greater than 24
+ * may cause a warning or slow down the browser.
+ *
+ * @method cylinder
+ * @param {Number} [radius] radius of the surface
+ * @param {Number} [height] height of the cylinder
+ * @param {Integer} [detailX] number of subdivisions in x-dimension;
+ * default is 24
+ * @param {Integer} [detailY] number of subdivisions in y-dimension;
+ * default is 1
+ * @param {Boolean} [bottomCap] whether to draw the bottom of the cylinder
+ * @param {Boolean} [topCap] whether to draw the top of the cylinder
+ * @chainable
+ * @example
+ *
+ * let detailY;
+ * // slide to see how detailY works
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * 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());
+ * }
+ *
+ *
+ *
+ *
+ * @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);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.cylinder = function (radius, height, detailX, detailY, bottomCap, topCap) {
+ this._assert3d('cylinder');
+ _main.default._validateParameters('cylinder', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = radius;
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 1;
+ }
+ if (typeof topCap === 'undefined') {
+ topCap = true;
+ }
+ if (typeof bottomCap === 'undefined') {
+ bottomCap = true;
+ }
+ var gId = 'cylinder|'.concat(detailX, '|').concat(detailY, '|').concat(bottomCap, '|').concat(topCap);
+ if (!this._renderer.geometryInHash(gId)) {
+ var cylinderGeom = new _main.default.Geometry(detailX, detailY);
+ _truncatedCone.call(cylinderGeom, 1, 1, 1, detailX, detailY, bottomCap, topCap);
+ // normals are computed in call to _truncatedCone
+ if (detailX <= 24 && detailY <= 16) {
+ cylinderGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on cylinder objects with more' + ' than 24 detailX or 16 detailY');
+ }
+ this._renderer.createBuffers(gId, cylinderGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radius, height, radius);
+ return this;
+ };
+ /**
+ * Draw a cone with given radius and height
+ *
+ * DetailX and detailY determine the number of subdivisions in the x-dimension and
+ * the y-dimension of a cone. More subdivisions make the cone seem smoother. The
+ * recommended maximum value for detailX is 24. Using a value greater than 24
+ * may cause a warning or slow down the browser.
+ * @method cone
+ * @param {Number} [radius] radius of the bottom surface
+ * @param {Number} [height] height of the cone
+ * @param {Integer} [detailX] number of segments,
+ * the more segments the smoother geometry
+ * default is 24
+ * @param {Integer} [detailY] number of segments,
+ * the more segments the smoother geometry
+ * default is 1
+ * @param {Boolean} [cap] whether to draw the base of the cone
+ * @chainable
+ * @example
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(1, 16, 1);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * 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());
+ * }
+ *
+ *
+ *
+ *
+ * @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);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.cone = function (radius, height, detailX, detailY, cap) {
+ this._assert3d('cone');
+ _main.default._validateParameters('cone', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ }
+ if (typeof height === 'undefined') {
+ height = radius;
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 1;
+ }
+ if (typeof cap === 'undefined') {
+ cap = true;
+ }
+ var gId = 'cone|'.concat(detailX, '|').concat(detailY, '|').concat(cap);
+ if (!this._renderer.geometryInHash(gId)) {
+ var coneGeom = new _main.default.Geometry(detailX, detailY);
+ _truncatedCone.call(coneGeom, 1, 0, 1, detailX, detailY, cap, false);
+ if (detailX <= 24 && detailY <= 16) {
+ coneGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on cone objects with more' + ' than 24 detailX or 16 detailY');
+ }
+ this._renderer.createBuffers(gId, coneGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radius, height, radius);
+ return this;
+ };
+ /**
+ * Draw an ellipsoid with given radius
+ *
+ * DetailX and detailY determine the number of subdivisions in the x-dimension and
+ * the y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother.
+ * Avoid detail number above 150, it may crash the browser.
+ * @method ellipsoid
+ * @param {Number} [radiusx] x-radius of ellipsoid
+ * @param {Number} [radiusy] y-radius of ellipsoid
+ * @param {Number} [radiusz] z-radius of ellipsoid
+ * @param {Integer} [detailX] number of segments,
+ * the more segments the smoother geometry
+ * default is 24. Avoid detail number above
+ * 150, it may crash the browser.
+ * @param {Integer} [detailY] number of segments,
+ * the more segments the smoother geometry
+ * default is 16. Avoid detail number above
+ * 150, it may crash the browser.
+ * @chainable
+ * @example
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * 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());
+ * }
+ *
+ *
+ *
+ *
+ * @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);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.ellipsoid = function (radiusX, radiusY, radiusZ, detailX, detailY) {
+ this._assert3d('ellipsoid');
+ _main.default._validateParameters('ellipsoid', arguments);
+ if (typeof radiusX === 'undefined') {
+ radiusX = 50;
+ }
+ if (typeof radiusY === 'undefined') {
+ radiusY = radiusX;
+ }
+ if (typeof radiusZ === 'undefined') {
+ radiusZ = radiusX;
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 16;
+ }
+ var gId = 'ellipsoid|'.concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _ellipsoid = function _ellipsoid() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ var phi = Math.PI * v - Math.PI / 2;
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var theta = 2 * Math.PI * u;
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+ var p = new _main.default.Vector(cosPhi * sinTheta, sinPhi, cosPhi * cosTheta);
+ this.vertices.push(p);
+ this.vertexNormals.push(p);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var ellipsoidGeom = new _main.default.Geometry(detailX, detailY, _ellipsoid);
+ ellipsoidGeom.computeFaces();
+ if (detailX <= 24 && detailY <= 24) {
+ ellipsoidGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw stroke on ellipsoids with more' + ' than 24 detailX or 24 detailY');
+ }
+ this._renderer.createBuffers(gId, ellipsoidGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radiusX, radiusY, radiusZ);
+ return this;
+ };
+ /**
+ * Draw a torus with given radius and tube radius
+ *
+ * DetailX and detailY determine the number of subdivisions in the x-dimension and
+ * the y-dimension of a torus. More subdivisions make the torus appear to be smoother.
+ * The default and maximum values for detailX and detailY are 24 and 16, respectively.
+ * Setting them to relatively small values like 4 and 6 allows you to create new
+ * shapes other than a torus.
+ * @method torus
+ * @param {Number} [radius] radius of the whole ring
+ * @param {Number} [tubeRadius] radius of the tube
+ * @param {Integer} [detailX] number of segments in x-dimension,
+ * the more segments the smoother geometry
+ * default is 24
+ * @param {Integer} [detailY] number of segments in y-dimension,
+ * the more segments the smoother geometry
+ * default is 16
+ * @chainable
+ * @example
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(2, 24, 6);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * 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());
+ * }
+ *
+ *
+ *
+ *
+ * @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);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.torus = function (radius, tubeRadius, detailX, detailY) {
+ this._assert3d('torus');
+ _main.default._validateParameters('torus', arguments);
+ if (typeof radius === 'undefined') {
+ radius = 50;
+ } else if (!radius) {
+ return; // nothing to draw
+ }
+ if (typeof tubeRadius === 'undefined') {
+ tubeRadius = 10;
+ } else if (!tubeRadius) {
+ return; // nothing to draw
+ }
+ if (typeof detailX === 'undefined') {
+ detailX = 24;
+ }
+ if (typeof detailY === 'undefined') {
+ detailY = 16;
+ }
+ var tubeRatio = (tubeRadius / radius).toPrecision(4);
+ var gId = 'torus|'.concat(tubeRatio, '|').concat(detailX, '|').concat(detailY);
+ if (!this._renderer.geometryInHash(gId)) {
+ var _torus = function _torus() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ var phi = 2 * Math.PI * v;
+ var cosPhi = Math.cos(phi);
+ var sinPhi = Math.sin(phi);
+ var r = 1 + tubeRatio * cosPhi;
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var theta = 2 * Math.PI * u;
+ var cosTheta = Math.cos(theta);
+ var sinTheta = Math.sin(theta);
+ var p = new _main.default.Vector(r * cosTheta, r * sinTheta, tubeRatio * sinPhi);
+ var n = new _main.default.Vector(cosPhi * cosTheta, cosPhi * sinTheta, sinPhi);
+ this.vertices.push(p);
+ this.vertexNormals.push(n);
+ this.uvs.push(u, v);
+ }
+ }
+ };
+ var torusGeom = new _main.default.Geometry(detailX, detailY, _torus);
+ torusGeom.computeFaces();
+ if (detailX <= 24 && detailY <= 16) {
+ torusGeom._makeTriangleEdges()._edgesToVertices();
+ } else if (this._renderer._doStroke) {
+ console.log('Cannot draw strokes on torus object with more' + ' than 24 detailX or 16 detailY');
+ }
+ this._renderer.createBuffers(gId, torusGeom);
+ }
+ this._renderer.drawBuffersScaled(gId, radius, radius, radius);
+ return this;
+ };
+ ///////////////////////
+ /// 2D primitives
+ /////////////////////////
+ //
+ // Note: Documentation is not generated on the p5.js website for functions on
+ // the p5.RendererGL prototype.
+ /**
+ * Draws a point, a coordinate in space at the dimension of one pixel,
+ * given x, y and z coordinates. The color of the point is determined
+ * by the current stroke, while the point size is determined by current
+ * stroke weight.
+ * @private
+ * @param {Number} x x-coordinate of point
+ * @param {Number} y y-coordinate of point
+ * @param {Number} z z-coordinate of point
+ * @chainable
+ * @example
+ *
+ * // 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.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(1, 0, 0));
+ vertices.push(new _main.default.Vector(0, 1, 0));
+ this.edges = [
+ [0,
+ 1],
+ [
+ 1,
+ 2
+ ],
+ [
+ 2,
+ 0
+ ]
+ ];
+ this.vertices = vertices;
+ this.faces = [
+ [0,
+ 1,
+ 2]
+ ];
+ this.uvs = [
+ 0,
+ 0,
+ 1,
+ 0,
+ 1,
+ 1
+ ];
+ };
+ var triGeom = new _main.default.Geometry(1, 1, _triangle);
+ triGeom._edgesToVertices();
+ triGeom.computeNormals();
+ this.createBuffers(gId, triGeom);
+ } // only one triangle is cached, one point is at the origin, and the
+ // two adjacent sides are tne unit vectors along the X & Y axes.
+ //
+ // this matrix multiplication transforms those two unit vectors
+ // onto the required vector prior to rendering, and moves the
+ // origin appropriately.
+
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ // triangle orientation.
+ var orientation = Math.sign(x1 * y2 - x2 * y1 + x2 * y3 - x3 * y2 + x3 * y1 - x1 * y3);
+ var mult = new _main.default.Matrix([x2 - x1,
+ y2 - y1,
+ 0,
+ 0,
+ // the resulting unit X-axis
+ x3 - x1,
+ y3 - y1,
+ 0,
+ 0,
+ // the resulting unit Y-axis
+ 0,
+ 0,
+ orientation,
+ 0,
+ // the resulting unit Z-axis (Reflect the specified order of vertices)
+ x1,
+ y1,
+ 0,
+ 1 // the resulting origin
+ ]).mult(this.uMVMatrix);
+ this.uMVMatrix = mult;
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ return this;
+ };
+ _main.default.RendererGL.prototype.ellipse = function (args) {
+ this.arc(args[0], args[1], args[2], args[3], 0, constants.TWO_PI, constants.OPEN, args[4]);
+ };
+ _main.default.RendererGL.prototype.arc = function (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() {
+ // if the start and stop angles are not the same, push vertices to the array
+ if (start.toFixed(10) !== stop.toFixed(10)) {
+ // if the mode specified is PIE or null, push the mid point of the arc in vertices
+ if (mode === constants.PIE || typeof mode === 'undefined') {
+ this.vertices.push(new _main.default.Vector(0.5, 0.5, 0));
+ this.uvs.push([0.5,
+ 0.5]);
+ } // vertices for the perimeter of the circle
+
+ for (var i = 0; i <= detail; i++) {
+ var u = i / detail;
+ var theta = (stop - start) * u + start;
+ var _x = 0.5 + Math.cos(theta) / 2;
+ var _y = 0.5 + Math.sin(theta) / 2;
+ this.vertices.push(new _main.default.Vector(_x, _y, 0));
+ this.uvs.push([_x,
+ _y]);
+ if (i < detail - 1) {
+ this.faces.push([0,
+ i + 1,
+ i + 2]);
+ this.edges.push([i + 1,
+ i + 2]);
+ }
+ } // check the mode specified in order to push vertices and faces, different for each mode
+
+ switch (mode) {
+ case constants.PIE:
+ this.faces.push([0,
+ this.vertices.length - 2,
+ this.vertices.length - 1]);
+ this.edges.push([0,
+ 1]);
+ this.edges.push([this.vertices.length - 2,
+ this.vertices.length - 1]);
+ this.edges.push([0,
+ this.vertices.length - 1]);
+ break;
+ case constants.CHORD:
+ this.edges.push([0,
+ 1]);
+ this.edges.push([0,
+ this.vertices.length - 1]);
+ break;
+ case constants.OPEN:
+ this.edges.push([0,
+ 1]);
+ break;
+ default:
+ this.faces.push([0,
+ this.vertices.length - 2,
+ this.vertices.length - 1]);
+ this.edges.push([this.vertices.length - 2,
+ this.vertices.length - 1]);
+ }
+ }
+ };
+ var arcGeom = new _main.default.Geometry(detail, 1, _arc);
+ arcGeom.computeNormals();
+ if (detail <= 50) {
+ arcGeom._edgesToVertices(arcGeom);
+ } else if (this._doStroke) {
+ console.log('Cannot apply a stroke to an '.concat(shape, ' with more than 50 detail'));
+ }
+ this.createBuffers(gId, arcGeom);
+ }
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ this.uMVMatrix.translate([x,
+ y,
+ 0]);
+ this.uMVMatrix.scale(width, height, 1);
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ return this;
+ };
+ _main.default.RendererGL.prototype.rect = function (args) {
+ var x = args[0];
+ var y = args[1];
+ var width = args[2];
+ var height = args[3];
+ if (typeof args[4] === 'undefined') {
+ // Use the retained mode for drawing rectangle,
+ // if args for rounding rectangle is not provided by user.
+ var perPixelLighting = this._pInst._glAttributes.perPixelLighting;
+ var detailX = args[4] || (perPixelLighting ? 1 : 24);
+ var detailY = args[5] || (perPixelLighting ? 1 : 16);
+ var gId = 'rect|'.concat(detailX, '|').concat(detailY);
+ if (!this.geometryInHash(gId)) {
+ var _rect = function _rect() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var v = i / this.detailY;
+ for (var j = 0; j <= this.detailX; j++) {
+ var u = j / this.detailX;
+ var p = new _main.default.Vector(u, v, 0);
+ this.vertices.push(p);
+ this.uvs.push(u, v);
+ }
+ } // using stroke indices to avoid stroke over face(s) of rectangle
+
+ if (detailX > 0 && detailY > 0) {
+ this.edges = [
+ [0,
+ detailX],
+ [
+ detailX,
+ (detailX + 1) * (detailY + 1) - 1
+ ],
+ [
+ (detailX + 1) * (detailY + 1) - 1,
+ (detailX + 1) * detailY
+ ],
+ [
+ (detailX + 1) * detailY,
+ 0
+ ]
+ ];
+ }
+ };
+ var rectGeom = new _main.default.Geometry(detailX, detailY, _rect);
+ rectGeom.computeFaces().computeNormals()._edgesToVertices();
+ this.createBuffers(gId, rectGeom);
+ } // only a single rectangle (of a given detail) is cached: a square with
+ // opposite corners at (0,0) & (1,1).
+ //
+ // before rendering, this square is scaled & moved to the required location.
+
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ this.uMVMatrix.translate([x,
+ y,
+ 0]);
+ this.uMVMatrix.scale(width, height, 1);
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ } else {
+ // Use Immediate mode to round the rectangle corner,
+ // if args for rounding corners is provided by user
+ var tl = args[4];
+ var tr = typeof args[5] === 'undefined' ? tl : args[5];
+ var br = typeof args[6] === 'undefined' ? tr : args[6];
+ var bl = typeof args[7] === 'undefined' ? br : args[7];
+ var a = x;
+ var b = y;
+ var c = width;
+ var d = height;
+ c += a;
+ d += b;
+ if (a > c) {
+ var temp = a;
+ a = c;
+ c = temp;
+ }
+ if (b > d) {
+ var _temp = b;
+ b = d;
+ d = _temp;
+ }
+ var maxRounding = Math.min((c - a) / 2, (d - b) / 2);
+ if (tl > maxRounding) tl = maxRounding;
+ if (tr > maxRounding) tr = maxRounding;
+ if (br > maxRounding) br = maxRounding;
+ if (bl > maxRounding) bl = maxRounding;
+ var x1 = a;
+ var y1 = b;
+ var x2 = c;
+ var y2 = d;
+ this.beginShape();
+ if (tr !== 0) {
+ this.vertex(x2 - tr, y1);
+ this.quadraticVertex(x2, y1, x2, y1 + tr);
+ } else {
+ this.vertex(x2, y1);
+ }
+ if (br !== 0) {
+ this.vertex(x2, y2 - br);
+ this.quadraticVertex(x2, y2, x2 - br, y2);
+ } else {
+ this.vertex(x2, y2);
+ }
+ if (bl !== 0) {
+ this.vertex(x1 + bl, y2);
+ this.quadraticVertex(x1, y2, x1, y2 - bl);
+ } else {
+ this.vertex(x1, y2);
+ }
+ if (tl !== 0) {
+ this.vertex(x1, y1 + tl);
+ this.quadraticVertex(x1, y1, x1 + tl, y1);
+ } else {
+ this.vertex(x1, y1);
+ }
+ this.immediateMode.geometry.uvs.length = 0;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.immediateMode.geometry.vertices[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var vert = _step.value;
+ var u = (vert.x - x1) / width;
+ var v = (vert.y - y1) / height;
+ this.immediateMode.geometry.uvs.push(u, v);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ this.endShape(constants.CLOSE);
+ }
+ return this;
+ };
+ /* eslint-disable max-len */
+ _main.default.RendererGL.prototype.quad = function (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, 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();
+ quadGeom.edges.length = 0;
+ var vertexOrder = [
+ 0,
+ 2,
+ 3,
+ 1
+ ];
+ for (var i = 0; i < vertexOrder.length; i++) {
+ var startVertex = vertexOrder[i];
+ var endVertex = vertexOrder[(i + 1) % vertexOrder.length];
+ quadGeom.edges.push([startVertex,
+ endVertex]);
+ }
+ quadGeom._edgesToVertices();
+ this.createBuffers(gId, quadGeom);
+ }
+ this.drawBuffers(gId);
+ return this;
+ };
+ //this implementation of bezier curve
+ //is based on Bernstein polynomial
+ // pretier-ignore
+ _main.default.RendererGL.prototype.bezier = function (x1, y1, z1, // x2
+ x2, // y2
+ y2, // x3
+ z2, // y3
+ x3, // x4
+ y3, // y4
+ z3, x4, y4, z4) {
+ if (arguments.length === 8) {
+ y4 = y3;
+ x4 = x3;
+ y3 = z2;
+ x3 = y2;
+ y2 = x2;
+ x2 = z1;
+ z1 = z2 = z3 = z4 = 0;
+ }
+ var bezierDetail = this._pInst._bezierDetail || 20; //value of Bezier detail
+ this.beginShape();
+ for (var i = 0; i <= bezierDetail; i++) {
+ var c1 = Math.pow(1 - i / bezierDetail, 3);
+ var c2 = 3 * (i / bezierDetail) * Math.pow(1 - i / bezierDetail, 2);
+ var c3 = 3 * Math.pow(i / bezierDetail, 2) * (1 - i / bezierDetail);
+ var c4 = Math.pow(i / bezierDetail, 3);
+ this.vertex(x1 * c1 + x2 * c2 + x3 * c3 + x4 * c4, y1 * c1 + y2 * c2 + y3 * c3 + y4 * c4, z1 * c1 + z2 * c2 + z3 * c3 + z4 * c4);
+ }
+ this.endShape();
+ return this;
+ };
+ // pretier-ignore
+ _main.default.RendererGL.prototype.curve = function (x1, y1, z1, // x2
+ x2, // y2
+ y2, // x3
+ z2, // y3
+ x3, // x4
+ y3, // y4
+ z3, x4, y4, z4) {
+ if (arguments.length === 8) {
+ x4 = x3;
+ y4 = y3;
+ x3 = y2;
+ y3 = x2;
+ x2 = z1;
+ y2 = x2;
+ z1 = z2 = z3 = z4 = 0;
+ }
+ var curveDetail = this._pInst._curveDetail;
+ this.beginShape();
+ for (var i = 0; i <= curveDetail; i++) {
+ var c1 = Math.pow(i / curveDetail, 3) * 0.5;
+ var c2 = Math.pow(i / curveDetail, 2) * 0.5;
+ var c3 = i / curveDetail * 0.5;
+ var c4 = 0.5;
+ var vx = c1 * ( - x1 + 3 * x2 - 3 * x3 + x4) + c2 * (2 * x1 - 5 * x2 + 4 * x3 - x4) + c3 * ( - x1 + x3) + c4 * (2 * x2);
+ var vy = c1 * ( - y1 + 3 * y2 - 3 * y3 + y4) + c2 * (2 * y1 - 5 * y2 + 4 * y3 - y4) + c3 * ( - y1 + y3) + c4 * (2 * y2);
+ var vz = c1 * ( - z1 + 3 * z2 - 3 * z3 + z4) + c2 * (2 * z1 - 5 * z2 + 4 * z3 - z4) + c3 * ( - z1 + z3) + c4 * (2 * z2);
+ this.vertex(vx, vy, vz);
+ }
+ this.endShape();
+ return this;
+ };
+ /**
+ * Draw a line given two points
+ * @private
+ * @param {Number} x0 x-coordinate of first vertex
+ * @param {Number} y0 y-coordinate of first vertex
+ * @param {Number} z0 z-coordinate of first vertex
+ * @param {Number} x1 x-coordinate of second vertex
+ * @param {Number} y1 y-coordinate of second vertex
+ * @param {Number} z1 z-coordinate of second vertex
+ * @chainable
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(50);
+ * stroke(255);
+ * strokeWeight(4);
+ * point(25, 0);
+ * strokeWeight(3);
+ * point(-25, 0);
+ * strokeWeight(2);
+ * point(0, 25);
+ * strokeWeight(1);
+ * point(0, -25);
+ * }
+ *
+ *
+ *
+ */
+ _main.default.RendererGL.prototype.line = function () {
+ if (arguments.length === 6) {
+ this.beginShape(constants.LINES);
+ this.vertex(arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2]);
+ this.vertex(arguments.length <= 3 ? undefined : arguments[3], arguments.length <= 4 ? undefined : arguments[4], arguments.length <= 5 ? undefined : arguments[5]);
+ this.endShape();
+ } else if (arguments.length === 4) {
+ this.beginShape(constants.LINES);
+ this.vertex(arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], 0);
+ this.vertex(arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3], 0);
+ this.endShape();
+ }
+ return this;
+ };
+ _main.default.RendererGL.prototype.bezierVertex = function () {
+ if (this.immediateMode._bezierVertex.length === 0) {
+ throw Error('vertex() must be used once before calling bezierVertex()');
+ } else {
+ var w_x = [
+ ];
+ var w_y = [
+ ];
+ var w_z = [
+ ];
+ var t,
+ _x,
+ _y,
+ _z,
+ i,
+ k,
+ m;
+ // variable i for bezierPoints, k for components, and m for anchor points.
+ var argLength = arguments.length;
+ t = 0;
+ if (this._lookUpTableBezier.length === 0 || this._lutBezierDetail !== this._pInst._curveDetail) {
+ this._lookUpTableBezier = [
+ ];
+ this._lutBezierDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutBezierDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+ var LUTLength = this._lookUpTableBezier.length;
+ // fillColors[0]: start point color
+ // fillColors[1],[2]: control point color
+ // fillColors[3]: end point color
+ var fillColors = [
+ ];
+ for (m = 0; m < 4; m++) {
+ fillColors.push([]);
+ }
+ fillColors[0] = this.immediateMode.geometry.vertexColors.slice( - 4);
+ fillColors[3] = this.curFillColor.slice();
+ // Do the same for strokeColor.
+ var strokeColors = [
+ ];
+ for (m = 0; m < 4; m++) {
+ strokeColors.push([]);
+ }
+ strokeColors[0] = this.immediateMode.geometry.vertexStrokeColors.slice( - 4);
+ strokeColors[3] = this.curStrokeColor.slice();
+ if (argLength === 6) {
+ this.isBezier = true;
+ w_x = [
+ this.immediateMode._bezierVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 4 ? undefined : arguments[4]
+ ];
+ w_y = [
+ this.immediateMode._bezierVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 3 ? undefined : arguments[3],
+ arguments.length <= 5 ? undefined : arguments[5]
+ ];
+ // The ratio of the distance between the start point, the two control-
+ // points, and the end point determines the intermediate color.
+ var d0 = Math.hypot(w_x[0] - w_x[1], w_y[0] - w_y[1]);
+ var d1 = Math.hypot(w_x[1] - w_x[2], w_y[1] - w_y[2]);
+ var d2 = Math.hypot(w_x[2] - w_x[3], w_y[2] - w_y[3]);
+ var totalLength = d0 + d1 + d2;
+ d0 /= totalLength;
+ d2 /= totalLength;
+ for (k = 0; k < 4; k++) {
+ fillColors[1].push(fillColors[0][k] * (1 - d0) + fillColors[3][k] * d0);
+ fillColors[2].push(fillColors[0][k] * d2 + fillColors[3][k] * (1 - d2));
+ strokeColors[1].push(strokeColors[0][k] * (1 - d0) + strokeColors[3][k] * d0);
+ strokeColors[2].push(strokeColors[0][k] * d2 + strokeColors[3][k] * (1 - d2));
+ }
+ for (i = 0; i < LUTLength; i++) {
+ // Interpolate colors using control points
+ this.curFillColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ this.curStrokeColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _x = _y = 0;
+ for (m = 0; m < 4; m++) {
+ for (k = 0; k < 4; k++) {
+ this.curFillColor[k] += this._lookUpTableBezier[i][m] * fillColors[m][k];
+ this.curStrokeColor[k] += this._lookUpTableBezier[i][m] * strokeColors[m][k];
+ }
+ _x += w_x[m] * this._lookUpTableBezier[i][m];
+ _y += w_y[m] * this._lookUpTableBezier[i][m];
+ }
+ this.vertex(_x, _y);
+ } // so that we leave currentColor with the last value the user set it to
+
+ this.curFillColor = fillColors[3];
+ this.curStrokeColor = strokeColors[3];
+ this.immediateMode._bezierVertex[0] = arguments.length <= 4 ? undefined : arguments[4];
+ this.immediateMode._bezierVertex[1] = arguments.length <= 5 ? undefined : arguments[5];
+ } else if (argLength === 9) {
+ this.isBezier = true;
+ w_x = [
+ this.immediateMode._bezierVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 3 ? undefined : arguments[3],
+ arguments.length <= 6 ? undefined : arguments[6]
+ ];
+ w_y = [
+ this.immediateMode._bezierVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 4 ? undefined : arguments[4],
+ arguments.length <= 7 ? undefined : arguments[7]
+ ];
+ w_z = [
+ this.immediateMode._bezierVertex[2],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 5 ? undefined : arguments[5],
+ arguments.length <= 8 ? undefined : arguments[8]
+ ];
+ // The ratio of the distance between the start point, the two control-
+ // points, and the end point determines the intermediate color.
+ var _d = Math.hypot(w_x[0] - w_x[1], w_y[0] - w_y[1], w_z[0] - w_z[1]);
+ var _d2 = Math.hypot(w_x[1] - w_x[2], w_y[1] - w_y[2], w_z[1] - w_z[2]);
+ var _d3 = Math.hypot(w_x[2] - w_x[3], w_y[2] - w_y[3], w_z[2] - w_z[3]);
+ var _totalLength = _d + _d2 + _d3;
+ _d /= _totalLength;
+ _d3 /= _totalLength;
+ for (k = 0; k < 4; k++) {
+ fillColors[1].push(fillColors[0][k] * (1 - _d) + fillColors[3][k] * _d);
+ fillColors[2].push(fillColors[0][k] * _d3 + fillColors[3][k] * (1 - _d3));
+ strokeColors[1].push(strokeColors[0][k] * (1 - _d) + strokeColors[3][k] * _d);
+ strokeColors[2].push(strokeColors[0][k] * _d3 + strokeColors[3][k] * (1 - _d3));
+ }
+ for (i = 0; i < LUTLength; i++) {
+ // Interpolate colors using control points
+ this.curFillColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ this.curStrokeColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _x = _y = _z = 0;
+ for (m = 0; m < 4; m++) {
+ for (k = 0; k < 4; k++) {
+ this.curFillColor[k] += this._lookUpTableBezier[i][m] * fillColors[m][k];
+ this.curStrokeColor[k] += this._lookUpTableBezier[i][m] * strokeColors[m][k];
+ }
+ _x += w_x[m] * this._lookUpTableBezier[i][m];
+ _y += w_y[m] * this._lookUpTableBezier[i][m];
+ _z += w_z[m] * this._lookUpTableBezier[i][m];
+ }
+ this.vertex(_x, _y, _z);
+ } // so that we leave currentColor with the last value the user set it to
+
+ this.curFillColor = fillColors[3];
+ this.curStrokeColor = strokeColors[3];
+ this.immediateMode._bezierVertex[0] = arguments.length <= 6 ? undefined : arguments[6];
+ this.immediateMode._bezierVertex[1] = arguments.length <= 7 ? undefined : arguments[7];
+ this.immediateMode._bezierVertex[2] = arguments.length <= 8 ? undefined : arguments[8];
+ }
+ }
+ };
+ _main.default.RendererGL.prototype.quadraticVertex = function () {
+ if (this.immediateMode._quadraticVertex.length === 0) {
+ throw Error('vertex() must be used once before calling quadraticVertex()');
+ } else {
+ var w_x = [
+ ];
+ var w_y = [
+ ];
+ var w_z = [
+ ];
+ var t,
+ _x,
+ _y,
+ _z,
+ i,
+ k,
+ m;
+ // variable i for bezierPoints, k for components, and m for anchor points.
+ var argLength = arguments.length;
+ t = 0;
+ if (this._lookUpTableQuadratic.length === 0 || this._lutQuadraticDetail !== this._pInst._curveDetail) {
+ this._lookUpTableQuadratic = [
+ ];
+ this._lutQuadraticDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutQuadraticDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableQuadratic[j] = this._quadraticCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableQuadratic[j] = this._quadraticCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+ var LUTLength = this._lookUpTableQuadratic.length;
+ // fillColors[0]: start point color
+ // fillColors[1]: control point color
+ // fillColors[2]: end point color
+ var fillColors = [
+ ];
+ for (m = 0; m < 3; m++) {
+ fillColors.push([]);
+ }
+ fillColors[0] = this.immediateMode.geometry.vertexColors.slice( - 4);
+ fillColors[2] = this.curFillColor.slice();
+ // Do the same for strokeColor.
+ var strokeColors = [
+ ];
+ for (m = 0; m < 3; m++) {
+ strokeColors.push([]);
+ }
+ strokeColors[0] = this.immediateMode.geometry.vertexStrokeColors.slice( - 4);
+ strokeColors[2] = this.curStrokeColor.slice();
+ if (argLength === 4) {
+ this.isQuadratic = true;
+ w_x = [
+ this.immediateMode._quadraticVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 2 ? undefined : arguments[2]
+ ];
+ w_y = [
+ this.immediateMode._quadraticVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 3 ? undefined : arguments[3]
+ ];
+ // The ratio of the distance between the start point, the control-
+ // point, and the end point determines the intermediate color.
+ var d0 = Math.hypot(w_x[0] - w_x[1], w_y[0] - w_y[1]);
+ var d1 = Math.hypot(w_x[1] - w_x[2], w_y[1] - w_y[2]);
+ var totalLength = d0 + d1;
+ d0 /= totalLength;
+ for (k = 0; k < 4; k++) {
+ fillColors[1].push(fillColors[0][k] * (1 - d0) + fillColors[2][k] * d0);
+ strokeColors[1].push(strokeColors[0][k] * (1 - d0) + strokeColors[2][k] * d0);
+ }
+ for (i = 0; i < LUTLength; i++) {
+ // Interpolate colors using control points
+ this.curFillColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ this.curStrokeColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _x = _y = 0;
+ for (m = 0; m < 3; m++) {
+ for (k = 0; k < 4; k++) {
+ this.curFillColor[k] += this._lookUpTableQuadratic[i][m] * fillColors[m][k];
+ this.curStrokeColor[k] += this._lookUpTableQuadratic[i][m] * strokeColors[m][k];
+ }
+ _x += w_x[m] * this._lookUpTableQuadratic[i][m];
+ _y += w_y[m] * this._lookUpTableQuadratic[i][m];
+ }
+ this.vertex(_x, _y);
+ } // so that we leave currentColor with the last value the user set it to
+
+ this.curFillColor = fillColors[2];
+ this.curStrokeColor = strokeColors[2];
+ this.immediateMode._quadraticVertex[0] = arguments.length <= 2 ? undefined : arguments[2];
+ this.immediateMode._quadraticVertex[1] = arguments.length <= 3 ? undefined : arguments[3];
+ } else if (argLength === 6) {
+ this.isQuadratic = true;
+ w_x = [
+ this.immediateMode._quadraticVertex[0],
+ arguments.length <= 0 ? undefined : arguments[0],
+ arguments.length <= 3 ? undefined : arguments[3]
+ ];
+ w_y = [
+ this.immediateMode._quadraticVertex[1],
+ arguments.length <= 1 ? undefined : arguments[1],
+ arguments.length <= 4 ? undefined : arguments[4]
+ ];
+ w_z = [
+ this.immediateMode._quadraticVertex[2],
+ arguments.length <= 2 ? undefined : arguments[2],
+ arguments.length <= 5 ? undefined : arguments[5]
+ ];
+ // The ratio of the distance between the start point, the control-
+ // point, and the end point determines the intermediate color.
+ var _d4 = Math.hypot(w_x[0] - w_x[1], w_y[0] - w_y[1], w_z[0] - w_z[1]);
+ var _d5 = Math.hypot(w_x[1] - w_x[2], w_y[1] - w_y[2], w_z[1] - w_z[2]);
+ var _totalLength2 = _d4 + _d5;
+ _d4 /= _totalLength2;
+ for (k = 0; k < 4; k++) {
+ fillColors[1].push(fillColors[0][k] * (1 - _d4) + fillColors[2][k] * _d4);
+ strokeColors[1].push(strokeColors[0][k] * (1 - _d4) + strokeColors[2][k] * _d4);
+ }
+ for (i = 0; i < LUTLength; i++) {
+ // Interpolate colors using control points
+ this.curFillColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ this.curStrokeColor = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _x = _y = _z = 0;
+ for (m = 0; m < 3; m++) {
+ for (k = 0; k < 4; k++) {
+ this.curFillColor[k] += this._lookUpTableQuadratic[i][m] * fillColors[m][k];
+ this.curStrokeColor[k] += this._lookUpTableQuadratic[i][m] * strokeColors[m][k];
+ }
+ _x += w_x[m] * this._lookUpTableQuadratic[i][m];
+ _y += w_y[m] * this._lookUpTableQuadratic[i][m];
+ _z += w_z[m] * this._lookUpTableQuadratic[i][m];
+ }
+ this.vertex(_x, _y, _z);
+ } // so that we leave currentColor with the last value the user set it to
+
+ this.curFillColor = fillColors[2];
+ this.curStrokeColor = strokeColors[2];
+ this.immediateMode._quadraticVertex[0] = arguments.length <= 3 ? undefined : arguments[3];
+ this.immediateMode._quadraticVertex[1] = arguments.length <= 4 ? undefined : arguments[4];
+ this.immediateMode._quadraticVertex[2] = arguments.length <= 5 ? undefined : arguments[5];
+ }
+ }
+ };
+ _main.default.RendererGL.prototype.curveVertex = function () {
+ var w_x = [
+ ];
+ var w_y = [
+ ];
+ var w_z = [
+ ];
+ var t,
+ _x,
+ _y,
+ _z,
+ i;
+ t = 0;
+ var argLength = arguments.length;
+ if (this._lookUpTableBezier.length === 0 || this._lutBezierDetail !== this._pInst._curveDetail) {
+ this._lookUpTableBezier = [
+ ];
+ this._lutBezierDetail = this._pInst._curveDetail;
+ var step = 1 / this._lutBezierDetail;
+ var start = 0;
+ var end = 1;
+ var j = 0;
+ while (start < 1) {
+ t = parseFloat(start.toFixed(6));
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ if (end.toFixed(6) === step.toFixed(6)) {
+ t = parseFloat(end.toFixed(6)) + parseFloat(start.toFixed(6));
+ ++j;
+ this._lookUpTableBezier[j] = this._bezierCoefficients(t);
+ break;
+ }
+ start += step;
+ end -= step;
+ ++j;
+ }
+ }
+ var LUTLength = this._lookUpTableBezier.length;
+ if (argLength === 2) {
+ this.immediateMode._curveVertex.push(arguments.length <= 0 ? undefined : arguments[0]);
+ this.immediateMode._curveVertex.push(arguments.length <= 1 ? undefined : arguments[1]);
+ if (this.immediateMode._curveVertex.length === 8) {
+ this.isCurve = true;
+ w_x = this._bezierToCatmull([this.immediateMode._curveVertex[0],
+ this.immediateMode._curveVertex[2],
+ this.immediateMode._curveVertex[4],
+ this.immediateMode._curveVertex[6]]);
+ w_y = this._bezierToCatmull([this.immediateMode._curveVertex[1],
+ this.immediateMode._curveVertex[3],
+ this.immediateMode._curveVertex[5],
+ this.immediateMode._curveVertex[7]]);
+ for (i = 0; i < LUTLength; i++) {
+ _x = w_x[0] * this._lookUpTableBezier[i][0] + w_x[1] * this._lookUpTableBezier[i][1] + w_x[2] * this._lookUpTableBezier[i][2] + w_x[3] * this._lookUpTableBezier[i][3];
+ _y = w_y[0] * this._lookUpTableBezier[i][0] + w_y[1] * this._lookUpTableBezier[i][1] + w_y[2] * this._lookUpTableBezier[i][2] + w_y[3] * this._lookUpTableBezier[i][3];
+ this.vertex(_x, _y);
+ }
+ for (i = 0; i < argLength; i++) {
+ this.immediateMode._curveVertex.shift();
+ }
+ }
+ } else if (argLength === 3) {
+ this.immediateMode._curveVertex.push(arguments.length <= 0 ? undefined : arguments[0]);
+ this.immediateMode._curveVertex.push(arguments.length <= 1 ? undefined : arguments[1]);
+ this.immediateMode._curveVertex.push(arguments.length <= 2 ? undefined : arguments[2]);
+ if (this.immediateMode._curveVertex.length === 12) {
+ this.isCurve = true;
+ w_x = this._bezierToCatmull([this.immediateMode._curveVertex[0],
+ this.immediateMode._curveVertex[3],
+ this.immediateMode._curveVertex[6],
+ this.immediateMode._curveVertex[9]]);
+ w_y = this._bezierToCatmull([this.immediateMode._curveVertex[1],
+ this.immediateMode._curveVertex[4],
+ this.immediateMode._curveVertex[7],
+ this.immediateMode._curveVertex[10]]);
+ w_z = this._bezierToCatmull([this.immediateMode._curveVertex[2],
+ this.immediateMode._curveVertex[5],
+ this.immediateMode._curveVertex[8],
+ this.immediateMode._curveVertex[11]]);
+ for (i = 0; i < LUTLength; i++) {
+ _x = w_x[0] * this._lookUpTableBezier[i][0] + w_x[1] * this._lookUpTableBezier[i][1] + w_x[2] * this._lookUpTableBezier[i][2] + w_x[3] * this._lookUpTableBezier[i][3];
+ _y = w_y[0] * this._lookUpTableBezier[i][0] + w_y[1] * this._lookUpTableBezier[i][1] + w_y[2] * this._lookUpTableBezier[i][2] + w_y[3] * this._lookUpTableBezier[i][3];
+ _z = w_z[0] * this._lookUpTableBezier[i][0] + w_z[1] * this._lookUpTableBezier[i][1] + w_z[2] * this._lookUpTableBezier[i][2] + w_z[3] * this._lookUpTableBezier[i][3];
+ this.vertex(_x, _y, _z);
+ }
+ for (i = 0; i < argLength; i++) {
+ this.immediateMode._curveVertex.shift();
+ }
+ }
+ }
+ };
+ _main.default.RendererGL.prototype.image = function (img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
+ if (this._isErasing) {
+ this.blendMode(this._cachedBlendMode);
+ }
+ this._pInst.push();
+ this._pInst.noLights();
+ this._pInst.noStroke();
+ this._pInst.texture(img);
+ this._pInst.textureMode(constants.NORMAL);
+ var u0 = 0;
+ if (sx <= img.width) {
+ u0 = sx / img.width;
+ }
+ var u1 = 1;
+ if (sx + sWidth <= img.width) {
+ u1 = (sx + sWidth) / img.width;
+ }
+ var v0 = 0;
+ if (sy <= img.height) {
+ v0 = sy / img.height;
+ }
+ var v1 = 1;
+ if (sy + sHeight <= img.height) {
+ v1 = (sy + sHeight) / img.height;
+ }
+ this.beginShape();
+ this.vertex(dx, dy, 0, u0, v0);
+ this.vertex(dx + dWidth, dy, 0, u1, v0);
+ this.vertex(dx + dWidth, dy + dHeight, 0, u1, v1);
+ this.vertex(dx, dy + dHeight, 0, u0, v1);
+ this.endShape(constants.CLOSE);
+ this._pInst.pop();
+ if (this._isErasing) {
+ this.blendMode(constants.REMOVE);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ './p5.Geometry': 350,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.for-each': 175,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.math.hypot': 188,
+ 'core-js/modules/es.math.sign': 190,
+ 'core-js/modules/es.number.to-fixed': 193,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 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.every');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.object.assign');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @private
+ * A class responsible for converting successive WebGL draw calls into a single
+ * `p5.Geometry` that can be reused and drawn with `model()`.
+ */
+
+ var GeometryBuilder = /*#__PURE__*/ function () {
+ function GeometryBuilder(renderer) {
+ _classCallCheck(this, GeometryBuilder);
+ this.renderer = renderer;
+ renderer._pInst.push();
+ this.identityMatrix = new _main.default.Matrix();
+ renderer.uMVMatrix = new _main.default.Matrix();
+ this.geometry = new _main.default.Geometry();
+ this.geometry.gid = '_p5_GeometryBuilder_'.concat(GeometryBuilder.nextGeometryId);
+ GeometryBuilder.nextGeometryId++;
+ this.hasTransform = false;
+ } /**
+ * @private
+ * Applies the current transformation matrix to each vertex.
+ */
+
+ _createClass(GeometryBuilder, [
+ {
+ key: 'transformVertices',
+ value: function transformVertices(vertices) {
+ var _this = this;
+ if (!this.hasTransform) return vertices;
+ return vertices.map(function (v) {
+ return _this.renderer.uMVMatrix.multiplyPoint(v);
+ });
+ } /**
+ * @private
+ * Applies the current normal matrix to each normal.
+ */
+
+ },
+ {
+ key: 'transformNormals',
+ value: function transformNormals(normals) {
+ var _this2 = this;
+ if (!this.hasTransform) return normals;
+ return normals.map(function (v) {
+ return _this2.renderer.uNMatrix.multiplyVec3(v);
+ });
+ } /**
+ * @private
+ * Adds a p5.Geometry to the builder's combined geometry, flattening
+ * transformations.
+ */
+
+ },
+ {
+ key: 'addGeometry',
+ value: function addGeometry(input) {
+ var _this3 = this,
+ _this$geometry$vertic,
+ _this$geometry$vertex,
+ _this$geometry$uvs,
+ _this$geometry$vertex2;
+ this.hasTransform = !this.renderer.uMVMatrix.mat4.every(function (v, i) {
+ return v === _this3.identityMatrix.mat4[i];
+ });
+ if (this.hasTransform) {
+ this.renderer.uNMatrix.inverseTranspose(this.renderer.uMVMatrix);
+ }
+ var startIdx = this.geometry.vertices.length;
+ (_this$geometry$vertic = this.geometry.vertices).push.apply(_this$geometry$vertic, _toConsumableArray(this.transformVertices(input.vertices)));
+ (_this$geometry$vertex = this.geometry.vertexNormals).push.apply(_this$geometry$vertex, _toConsumableArray(this.transformNormals(input.vertexNormals)));
+ (_this$geometry$uvs = this.geometry.uvs).push.apply(_this$geometry$uvs, _toConsumableArray(input.uvs));
+ if (this.renderer._doFill) {
+ var _this$geometry$faces;
+ (_this$geometry$faces = this.geometry.faces).push.apply(_this$geometry$faces, _toConsumableArray(input.faces.map(function (f) {
+ return f.map(function (idx) {
+ return idx + startIdx;
+ });
+ })));
+ }
+ if (this.renderer._doStroke) {
+ var _this$geometry$edges;
+ (_this$geometry$edges = this.geometry.edges).push.apply(_this$geometry$edges, _toConsumableArray(input.edges.map(function (edge) {
+ return edge.map(function (idx) {
+ return idx + startIdx;
+ });
+ })));
+ }
+ var vertexColors = _toConsumableArray(input.vertexColors);
+ while (vertexColors.length < input.vertices.length * 4) {
+ vertexColors.push.apply(vertexColors, _toConsumableArray(this.renderer.curFillColor));
+ }(_this$geometry$vertex2 = this.geometry.vertexColors).push.apply(_this$geometry$vertex2, _toConsumableArray(vertexColors));
+ } /**
+ * Adds geometry from the renderer's immediate mode into the builder's
+ * combined geometry.
+ */
+
+ },
+ {
+ key: 'addImmediate',
+ value: function addImmediate() {
+ var geometry = this.renderer.immediateMode.geometry;
+ var shapeMode = this.renderer.immediateMode.shapeMode;
+ var faces = [
+ ];
+ if (this.renderer._doFill) {
+ if (shapeMode === constants.TRIANGLE_STRIP || shapeMode === constants.QUAD_STRIP) {
+ for (var i = 2; i < geometry.vertices.length; i++) {
+ if (i % 2 === 0) {
+ faces.push([i,
+ i - 1,
+ i - 2]);
+ } else {
+ faces.push([i,
+ i - 2,
+ i - 1]);
+ }
+ }
+ } else if (shapeMode === constants.TRIANGLE_FAN) {
+ for (var _i = 2; _i < geometry.vertices.length; _i++) {
+ faces.push([0,
+ _i - 1,
+ _i]);
+ }
+ } else {
+ for (var _i2 = 0; _i2 < geometry.vertices.length; _i2 += 3) {
+ faces.push([_i2,
+ _i2 + 1,
+ _i2 + 2]);
+ }
+ }
+ }
+ this.addGeometry(Object.assign({
+ }, geometry, {
+ faces: faces
+ }));
+ } /**
+ * Adds geometry from the renderer's retained mode into the builder's
+ * combined geometry.
+ */
+
+ },
+ {
+ key: 'addRetained',
+ value: function addRetained(geometry) {
+ this.addGeometry(geometry.model);
+ } /**
+ * Cleans up the state of the renderer and returns the combined geometry that
+ * was built.
+ * @returns p5.Geometry The flattened, combined geometry
+ */
+
+ },
+ {
+ key: 'finish',
+ value: function finish() {
+ this.renderer._pInst.pop();
+ // If all vertices are the same color (no per-vertex colors were
+ // supplied), remove the vertex color data so that one may override the
+ // fill when drawing the geometry with `model()`
+ var allVertexColorsSame = true;
+ for (var i = 4; i < this.geometry.vertexColors.length; i++) {
+ if (this.geometry.vertexColors[i] !== this.geometry.vertexColors[i % 4]) {
+ allVertexColorsSame = false;
+ break;
+ }
+ }
+ if (allVertexColorsSame) {
+ this.geometry.vertexColors = [
+ ];
+ }
+ return this.geometry;
+ }
+ }
+ ]);
+ return GeometryBuilder;
+ }();
+ /**
+ * Keeps track of how many custom geometry objects have been made so that each
+ * can be assigned a unique ID.
+ */
+ GeometryBuilder.nextGeometryId = 0;
+ var _default = GeometryBuilder;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ 'core-js/modules/es.array.every': 171,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.object.assign': 194,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 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.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.splice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.math.sign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ } /**
+ * @module 3D
+ * @submodule Interaction
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Allows movement around a 3D sketch using a mouse or trackpad or touch.
+ * Left-clicking and dragging or swipe motion will rotate the camera position
+ * about the center of the sketch, right-clicking and dragging or multi-swipe
+ * will pan the camera position without rotation, and using the mouse wheel
+ * (scrolling) or pinch in/out will move the camera further or closer
+ * from the center of the sketch. This function can be called with parameters
+ * dictating sensitivity to mouse/touch 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
+ * @param {Object} [options] An optional object that can contain additional settings,
+ * disableTouchActions - Boolean, default value is true.
+ * Setting this to true makes mobile interactions smoother by preventing
+ * accidental interactions with the page while orbiting. But if you're already
+ * doing it via css or want the default touch actions, consider setting it to false.
+ * freeRotation - Boolean, default value is false.
+ * By default, horizontal movement of the mouse or touch pointer rotates the camera
+ * around the y-axis, and vertical movement rotates the camera around the x-axis.
+ * But if setting this option to true, the camera always rotates in the direction
+ * the pointer is moving. For zoom and move, the behavior is the same regardless of
+ * true/false.
+ * @chainable
+ * @example
+ *
+ * //draw a line
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * // Use fill instead of stroke to change the color of shape.
+ * fill(255, 0, 0);
+ * line(10, 10, 0, 60, 60, 20);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * Camera orbits around a box when mouse is hold-clicked & then moved.
+ */
+ // implementation based on three.js 'orbitControls':
+ // https://github.com/mrdoob/three.js/blob/6afb8595c0bf8b2e72818e42b64e6fe22707d896/examples/jsm/controls/OrbitControls.js#L22
+
+ _main.default.prototype.orbitControl = function (sensitivityX, sensitivityY, sensitivityZ, options) {
+ var _this = this;
+ this._assert3d('orbitControl');
+ _main.default._validateParameters('orbitControl', arguments);
+ var cam = this._renderer._curCamera;
+ if (typeof sensitivityX === 'undefined') {
+ sensitivityX = 1;
+ }
+ if (typeof sensitivityY === 'undefined') {
+ sensitivityY = sensitivityX;
+ }
+ if (typeof sensitivityZ === 'undefined') {
+ sensitivityZ = 1;
+ }
+ if (_typeof(options) !== 'object') {
+ options = {
+ };
+ } // default right-mouse and mouse-wheel behaviors (context menu and scrolling,
+ // respectively) are disabled here to allow use of those events for panning and
+ // zooming. However, whether or not to disable touch actions is an option.
+ // disable context menu for canvas element and add 'contextMenuDisabled'
+ // flag to p5 instance
+
+ if (this.contextMenuDisabled !== true) {
+ this.canvas.oncontextmenu = function () {
+ return false;
+ };
+ this._setProperty('contextMenuDisabled', true);
+ } // disable default scrolling behavior on the canvas element and add
+ // 'wheelDefaultDisabled' flag to p5 instance
+
+ if (this.wheelDefaultDisabled !== true) {
+ this.canvas.onwheel = function () {
+ return false;
+ };
+ this._setProperty('wheelDefaultDisabled', true);
+ } // disable default touch behavior on the canvas element and add
+ // 'touchActionsDisabled' flag to p5 instance
+
+ var _options = options,
+ _options$disableTouch = _options.disableTouchActions,
+ disableTouchActions = _options$disableTouch === void 0 ? true : _options$disableTouch;
+ if (this.touchActionsDisabled !== true && disableTouchActions) {
+ this.canvas.style['touch-action'] = 'none';
+ this._setProperty('touchActionsDisabled', true);
+ } // If option.freeRotation is true, the camera always rotates freely in the direction
+ // the pointer moves. default value is false (normal behavior)
+
+ var _options2 = options,
+ _options2$freeRotatio = _options2.freeRotation,
+ freeRotation = _options2$freeRotatio === void 0 ? false : _options2$freeRotatio; // get moved touches.
+ var movedTouches = [
+ ];
+ this.touches.forEach(function (curTouch) {
+ _this._renderer.prevTouches.forEach(function (prevTouch) {
+ if (curTouch.id === prevTouch.id) {
+ var movedTouch = {
+ x: curTouch.x,
+ y: curTouch.y,
+ px: prevTouch.x,
+ py: prevTouch.y
+ };
+ movedTouches.push(movedTouch);
+ }
+ });
+ });
+ this._renderer.prevTouches = this.touches;
+ // The idea of using damping is based on the following website. thank you.
+ // https://github.com/freshfork/p5.EasyCam/blob/9782964680f6a5c4c9bee825c475d9f2021d5134/p5.easycam.js#L1124
+ // variables for interaction
+ var deltaRadius = 0;
+ var deltaTheta = 0;
+ var deltaPhi = 0;
+ var moveDeltaX = 0;
+ var moveDeltaY = 0;
+ // constants for dampingProcess
+ var damping = 0.85;
+ var rotateAccelerationFactor = 0.6;
+ var moveAccelerationFactor = 0.15;
+ // For touches, the appropriate scale is different
+ // because the distance difference is multiplied.
+ var mouseZoomScaleFactor = 0.01;
+ var touchZoomScaleFactor = 0.0004;
+ var scaleFactor = this.height < this.width ? this.height : this.width;
+ // Flag whether the mouse or touch pointer is inside the canvas
+ var pointersInCanvas = false;
+ // calculate and determine flags and variables.
+ if (movedTouches.length > 0) {
+ /* for touch */
+ // if length === 1, rotate
+ // if length > 1, zoom and move
+ // for touch, it is calculated based on one moved touch pointer position.
+ pointersInCanvas = movedTouches[0].x > 0 && movedTouches[0].x < this.width && movedTouches[0].y > 0 && movedTouches[0].y < this.height;
+ if (movedTouches.length === 1) {
+ var t = movedTouches[0];
+ deltaTheta = - sensitivityX * (t.x - t.px) / scaleFactor;
+ deltaPhi = sensitivityY * (t.y - t.py) / scaleFactor;
+ } else {
+ var t0 = movedTouches[0];
+ var t1 = movedTouches[1];
+ var distWithTouches = Math.hypot(t0.x - t1.x, t0.y - t1.y);
+ var prevDistWithTouches = Math.hypot(t0.px - t1.px, t0.py - t1.py);
+ var changeDist = distWithTouches - prevDistWithTouches;
+ // move the camera farther when the distance between the two touch points
+ // decreases, move the camera closer when it increases.
+ deltaRadius = - changeDist * sensitivityZ * touchZoomScaleFactor;
+ // Move the center of the camera along with the movement of
+ // the center of gravity of the two touch points.
+ moveDeltaX = 0.5 * (t0.x + t1.x) - 0.5 * (t0.px + t1.px);
+ moveDeltaY = 0.5 * (t0.y + t1.y) - 0.5 * (t0.py + t1.py);
+ }
+ if (this.touches.length > 0) {
+ if (pointersInCanvas) {
+ // Initiate an interaction if touched in the canvas
+ this._renderer.executeRotateAndMove = true;
+ this._renderer.executeZoom = true;
+ }
+ } else {
+ // End an interaction when the touch is released
+ this._renderer.executeRotateAndMove = false;
+ this._renderer.executeZoom = false;
+ }
+ } else {
+ /* for mouse */
+ // if wheelDeltaY !== 0, zoom
+ // if mouseLeftButton is down, rotate
+ // if mouseRightButton is down, move
+ // For mouse, it is calculated based on the mouse position.
+ pointersInCanvas = this.mouseX > 0 && this.mouseX < this.width && this.mouseY > 0 && this.mouseY < this.height;
+ if (this._mouseWheelDeltaY !== 0) {
+ // zoom the camera depending on the value of _mouseWheelDeltaY.
+ // move away if positive, move closer if negative
+ deltaRadius = Math.sign(this._mouseWheelDeltaY) * sensitivityZ;
+ deltaRadius *= mouseZoomScaleFactor;
+ this._mouseWheelDeltaY = 0;
+ // start zoom when the mouse is wheeled within the canvas.
+ if (pointersInCanvas) this._renderer.executeZoom = true;
+ } else {
+ // quit zoom when you stop wheeling.
+ this._renderer.zoomFlag = false;
+ }
+ if (this.mouseIsPressed) {
+ if (this.mouseButton === this.LEFT) {
+ deltaTheta = - sensitivityX * this.movedX / scaleFactor;
+ deltaPhi = sensitivityY * this.movedY / scaleFactor;
+ } else if (this.mouseButton === this.RIGHT) {
+ moveDeltaX = this.movedX;
+ moveDeltaY = this.movedY;
+ } // start rotate and move when mouse is pressed within the canvas.
+
+ if (pointersInCanvas) this._renderer.executeRotateAndMove = true;
+ } else {
+ // quit rotate and move if mouse is released.
+ this._renderer.executeRotateAndMove = false;
+ }
+ } // interactions
+ // zoom process
+
+ if (deltaRadius !== 0 && this._renderer.executeZoom) {
+ // accelerate zoom velocity
+ this._renderer.zoomVelocity += deltaRadius;
+ }
+ if (Math.abs(this._renderer.zoomVelocity) > 0.001) {
+ // if freeRotation is true, we use _orbitFree() instead of _orbit()
+ if (freeRotation) {
+ cam._orbitFree(0, 0, this._renderer.zoomVelocity);
+ } else {
+ cam._orbit(0, 0, this._renderer.zoomVelocity);
+ } // In orthogonal projection, the scale does not change even if
+ // the distance to the gaze point is changed, so the projection matrix
+ // needs to be modified.
+
+ if (cam.projMatrix.mat4[15] !== 0) {
+ cam.projMatrix.mat4[0] *= Math.pow(10, - this._renderer.zoomVelocity);
+ cam.projMatrix.mat4[5] *= Math.pow(10, - this._renderer.zoomVelocity);
+ // modify uPMatrix
+ this._renderer.uPMatrix.mat4[0] = cam.projMatrix.mat4[0];
+ this._renderer.uPMatrix.mat4[5] = cam.projMatrix.mat4[5];
+ } // damping
+
+ this._renderer.zoomVelocity *= damping;
+ } else {
+ this._renderer.zoomVelocity = 0;
+ } // rotate process
+
+ if ((deltaTheta !== 0 || deltaPhi !== 0) && this._renderer.executeRotateAndMove) {
+ // accelerate rotate velocity
+ this._renderer.rotateVelocity.add(deltaTheta * rotateAccelerationFactor, deltaPhi * rotateAccelerationFactor);
+ }
+ if (this._renderer.rotateVelocity.magSq() > 0.000001) {
+ // if freeRotation is true, the camera always rotates freely in the direction the pointer moves
+ if (freeRotation) {
+ cam._orbitFree( - this._renderer.rotateVelocity.x, this._renderer.rotateVelocity.y, 0);
+ } else {
+ cam._orbit(this._renderer.rotateVelocity.x, this._renderer.rotateVelocity.y, 0);
+ } // damping
+
+ this._renderer.rotateVelocity.mult(damping);
+ } else {
+ this._renderer.rotateVelocity.set(0, 0);
+ } // move process
+
+ if ((moveDeltaX !== 0 || moveDeltaY !== 0) && this._renderer.executeRotateAndMove) {
+ // Normalize movement distance
+ var ndcX = moveDeltaX * 2 / this.width;
+ var ndcY = - moveDeltaY * 2 / this.height;
+ // accelerate move velocity
+ this._renderer.moveVelocity.add(ndcX * moveAccelerationFactor, ndcY * moveAccelerationFactor);
+ }
+ if (this._renderer.moveVelocity.magSq() > 0.000001) {
+ // Translate the camera so that the entire object moves
+ // perpendicular to the line of sight when the mouse is moved
+ // or when the centers of gravity of the two touch pointers move.
+ var local = cam._getLocalAxes();
+ // Calculate the z coordinate in the view coordinates of
+ // the center, that is, the distance to the view point
+ var diffX = cam.eyeX - cam.centerX;
+ var diffY = cam.eyeY - cam.centerY;
+ var diffZ = cam.eyeZ - cam.centerZ;
+ var viewZ = Math.sqrt(diffX * diffX + diffY * diffY + diffZ * diffZ);
+ // position vector of the center.
+ var cv = new _main.default.Vector(cam.centerX, cam.centerY, cam.centerZ);
+ // Calculate the normalized device coordinates of the center.
+ cv = cam.cameraMatrix.multiplyPoint(cv);
+ cv = this._renderer.uPMatrix.multiplyAndNormalizePoint(cv);
+ // Move the center by this distance
+ // in the normalized device coordinate system.
+ cv.x -= this._renderer.moveVelocity.x;
+ cv.y -= this._renderer.moveVelocity.y;
+ // Calculate the translation vector
+ // in the direction perpendicular to the line of sight of center.
+ var dx,
+ dy;
+ var uP = this._renderer.uPMatrix.mat4;
+ if (uP[15] === 0) {
+ dx = (uP[8] + cv.x) / uP[0] * viewZ;
+ dy = (uP[9] + cv.y) / uP[5] * viewZ;
+ } else {
+ dx = (cv.x - uP[12]) / uP[0];
+ dy = (cv.y - uP[13]) / uP[5];
+ } // translate the camera.
+
+ cam.setPosition(cam.eyeX + dx * local.x[0] + dy * local.y[0], cam.eyeY + dx * local.x[1] + dy * local.y[1], cam.eyeZ + dx * local.x[2] + dy * local.y[2]);
+ // damping
+ this._renderer.moveVelocity.mult(damping);
+ } else {
+ this._renderer.moveVelocity.set(0, 0);
+ }
+ return this;
+ };
+ /**
+ * debugMode() helps visualize 3D space by adding a grid to indicate where the
+ * ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z
+ * directions. This function can be called without parameters to create a
+ * default grid and axes icon, or it can be called according to the examples
+ * above to customize the size and position of the grid and/or axes icon. The
+ * grid is drawn using the most recently set stroke color and weight. To
+ * specify these parameters, add a call to stroke() and strokeWeight()
+ * just before the end of the draw() loop.
+ *
+ * By default, the grid will run through the origin (0,0,0) of the sketch
+ * along the XZ plane
+ * and the axes icon will be offset from the origin. Both the grid and axes
+ * icon will be sized according to the current canvas size. Note that because the
+ * grid runs parallel to the default camera view, it is often helpful to use
+ * debugMode along with orbitControl to allow full view of the grid.
+ * @method debugMode
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * describe(
+ * 'Camera orbits around a box when mouse is hold-clicked & then moved.'
+ * );
+ * }
+ * function draw() {
+ * background(200);
+ *
+ * // If you execute the line commented out instead of next line, the direction of rotation
+ * // will be the direction the mouse or touch pointer moves, not around the X or Y axis.
+ * orbitControl();
+ * // orbitControl(1, 1, 1, {freeRotation: true});
+ *
+ * rotateY(0.5);
+ * box(30, 50);
+ * }
+ *
+ *
+ *
+ * @alt
+ * a 3D box is centered on a grid in a 3D sketch. an icon
+ * indicates the direction of each axis: a red line points +X,
+ * a green line +Y, and a blue line +Z. the grid and icon disappear when the
+ * spacebar is pressed.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode();
+ * 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.
+ *
+ * @example
+ *
+ * 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 in a 3D sketch. an icon
+ * indicates the direction of each axis: a red line points +X,
+ * a green line +Y, and a blue line +Z.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(AXES);
+ * 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 on a grid in a 3D sketch
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(GRID, 100, 10, 0, 0, 0);
+ * 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. an icon
+ * indicates the direction of each axis: a red line points +X,
+ * a green line +Y, and a blue line +Z.
+ */
+ /**
+ * @method debugMode
+ * @param {Constant} mode either GRID or AXES
+ */
+ /**
+ * @method debugMode
+ * @param {Constant} mode
+ * @param {Number} [gridSize] size of one side of the grid
+ * @param {Number} [gridDivisions] number of divisions in the grid
+ * @param {Number} [xOff] X axis offset from origin (0,0,0)
+ * @param {Number} [yOff] Y axis offset from origin (0,0,0)
+ * @param {Number} [zOff] Z axis offset from origin (0,0,0)
+ */
+ /**
+ * @method debugMode
+ * @param {Constant} mode
+ * @param {Number} [axesSize] size of axes icon
+ * @param {Number} [xOff]
+ * @param {Number} [yOff]
+ * @param {Number} [zOff]
+ */
+ /**
+ * @method debugMode
+ * @param {Number} [gridSize]
+ * @param {Number} [gridDivisions]
+ * @param {Number} [gridXOff]
+ * @param {Number} [gridYOff]
+ * @param {Number} [gridZOff]
+ * @param {Number} [axesSize]
+ * @param {Number} [axesXOff]
+ * @param {Number} [axesYOff]
+ * @param {Number} [axesZOff]
+ */
+ _main.default.prototype.debugMode = function () {
+ this._assert3d('debugMode');
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('debugMode', args);
+ // start by removing existing 'post' registered debug methods
+ for (var i = this._registeredMethods.post.length - 1; i >= 0; i--) {
+ // test for equality...
+ if (this._registeredMethods.post[i].toString() === this._grid().toString() || this._registeredMethods.post[i].toString() === this._axesIcon().toString()) {
+ this._registeredMethods.post.splice(i, 1);
+ }
+ } // then add new debugMode functions according to the argument list
+
+ if (args[0] === constants.GRID) {
+ this.registerMethod('post', this._grid.call(this, args[1], args[2], args[3], args[4], args[5]));
+ } else if (args[0] === constants.AXES) {
+ this.registerMethod('post', this._axesIcon.call(this, args[1], args[2], args[3], args[4]));
+ } else {
+ this.registerMethod('post', this._grid.call(this, args[0], args[1], args[2], args[3], args[4]));
+ this.registerMethod('post', this._axesIcon.call(this, args[5], args[6], args[7], args[8]));
+ }
+ };
+ /**
+ * Turns off debugMode() in a 3D sketch.
+ * @method noDebugMode
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
+ * 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. 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': 286,
+ '../core/main': 298,
+ 'core-js/modules/es.array.for-each': 175,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.splice': 185,
+ 'core-js/modules/es.math.hypot': 188,
+ 'core-js/modules/es.math.sign': 190,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.for-each': 255,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 344: [
+ 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 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);
+ * 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
+ * sphere with coral color under black light
+ *
+ * @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 white 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
+ * pink ambient material cube under the ambient 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
+ *
+ * function setup() {
+ * createCanvas(100,100,WEBGL);
+ * camera(0,-100,300);
+ * }
+ * function draw() {
+ * background(230);
+ * ambientMaterial(237,34,93); //Pink Material
+ * ambientLight(mouseY);
+ * //As you move the mouse up to down it changes from no ambient light to full ambient light.
+ * rotateY(millis()/2000);
+ * box(100);
+ * }
+ *
+ *
+ *
+ *
+ * @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
+ *
+ * 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
+ * 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 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 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(
+ * '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
+ * the light is partially ambient and partially directional
+ */
+ _main.default.prototype.lights = function () {
+ this._assert3d('lights');
+ // Both specify gray by default.
+ var grayColor = this.color('rgb(128,128,128)');
+ this.ambientLight(grayColor);
+ this.directionalLight(grayColor, 0, 0, - 1);
+ return this;
+ };
+ /**
+ * Sets the falloff rate for pointLight()
+ * and spotLight().
+ *
+ * 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);
+ * 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
+ * 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);
+ * 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
+ * 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(
+ * '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
+ * Three white spheres. Each appears as a different
+ * color due to lighting.
+ */
+ _main.default.prototype.noLights = function () {
+ this._assert3d('noLights');
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _main.default._validateParameters('noLights', args);
+ this._renderer._enableLighting = false;
+ this._renderer.ambientLightColors.length = 0;
+ this._renderer.specularColors = [
+ 1,
+ 1,
+ 1
+ ];
+ this._renderer.directionalLightDirections.length = 0;
+ this._renderer.directionalLightDiffuseColors.length = 0;
+ this._renderer.directionalLightSpecularColors.length = 0;
+ this._renderer.pointLightPositions.length = 0;
+ this._renderer.pointLightDiffuseColors.length = 0;
+ this._renderer.pointLightSpecularColors.length = 0;
+ this._renderer.spotLightPositions.length = 0;
+ this._renderer.spotLightDirections.length = 0;
+ this._renderer.spotLightDiffuseColors.length = 0;
+ this._renderer.spotLightSpecularColors.length = 0;
+ this._renderer.spotLightAngle.length = 0;
+ this._renderer.spotLightConc.length = 0;
+ this._renderer.constantAttenuation = 1;
+ this._renderer.linearAttenuation = 0;
+ this._renderer.quadraticAttenuation = 0;
+ this._renderer._useShininess = 1;
+ return this;
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298
+ }
+ ],
+ 345: [
+ 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
+ * (
+ * 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);
+ * }
+ *
+ * .stl, .obj).
+ * @return {p5.Geometry} the p5.Geometry object
+ *
+ * @example
+ *
+ *
+ *
+ * @alt
+ * Vertically rotating 3-d octahedron.
+ *
+ * @example
+ *
+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ * octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 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 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 {
+ _main.default._friendlyError('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 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 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)) {
+ if (model.edges.length === 0) {
+ model._makeTriangleEdges();
+ }
+ model._edgesToVertices();
+ this._renderer.createBuffers(model.gid, model);
+ }
+ this._renderer.drawBuffers(model.gid);
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ './p5.Geometry': 350,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.index-of': 178,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.array.splice': 185,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.string.match': 211,
+ 'core-js/modules/es.string.split': 216,
+ 'core-js/modules/es.string.trim': 219
+ }
+ ],
+ 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.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.join');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Texture');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } /**
+ * @module 3D
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */
+ /**
+ * 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
+ *
+ * //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
+ * 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
+ *
+ * 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.createShader = function (vertSrc, fragSrc) {
+ this._assert3d('createShader');
+ _main.default._validateParameters('createShader', arguments);
+ return new _main.default.Shader(this._renderer, vertSrc, fragSrc);
+ };
+ /**
+ * Creates a new p5.Shader using only a fragment shader, as a convenience method for creating image effects.
+ * It's like createShader() but with a default vertex shader included.
+ *
+ * createFilterShader() is intended to be used along with filter() for filtering the contents of a canvas in WebGL mode.
+ * A filter shader will not be applied to any geometries.
+ *
+ * The fragment shader receives some uniforms:
+ * - `sampler2D tex0`, which contains the canvas contents as a texture
+ * - `vec2 canvasSize`, which is the width and height of the canvas
+ * - `vec2 texelSize`, which is the size of a pixel (`1.0/width`, `1.0/height`)
+ *
+ * For more info about filters and shaders, see Adam Ferriss' repo of shader examples
+ * or the introduction to shaders page.
+ *
+ * @method createFilterShader
+ * @param {String} fragSrc source code for the fragment shader
+ * @returns {p5.Shader} a shader object created from the provided
+ * fragment shader.
+ * @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);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * let fragSrc = `precision highp float;
+ * void main() {
+ * gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+ * }`;
+ *
+ * createCanvas(100, 100, WEBGL);
+ * let s = createFilterShader(fragSrc);
+ * filter(s);
+ * describe('a yellow canvas');
+ * }
+ *
+ *
+ *
+ */
+ _main.default.prototype.createFilterShader = function (fragSrc) {
+ this._assert3d('createFilterShader');
+ _main.default._validateParameters('createFilterShader', arguments);
+ var defaultVertV1 = '\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n\n attribute vec3 aPosition;\n // texcoords only come from p5 to vertex shader\n // so pass texcoords on to the fragment shader in a varying variable\n attribute vec2 aTexCoord;\n varying vec2 vTexCoord;\n\n void main() {\n // transferring texcoords for the frag shader\n vTexCoord = aTexCoord;\n\n // copy position with a fourth coordinate for projection (1.0 is normal)\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // project to 3D space\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n }\n ';
+ var defaultVertV2 = '#version 300 es\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n\n in vec3 aPosition;\n in vec2 aTexCoord;\n out vec2 vTexCoord;\n\n void main() {\n // transferring texcoords for the frag shader\n vTexCoord = aTexCoord;\n\n // copy position with a fourth coordinate for projection (1.0 is normal)\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // project to 3D space\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n }\n ';
+ var vertSrc = fragSrc.includes('#version 300 es') ? defaultVertV2 : defaultVertV1;
+ var shader = new _main.default.Shader(this._renderer, vertSrc, fragSrc);
+ shader.ensureCompiledOnContext(this._renderer.getFilterGraphicsLayer());
+ return shader;
+ };
+ /**
+ * 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
+ *
+ * let img, s;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * let fragSrc = `precision highp float;
+ *
+ * // x,y coordinates, given from the vertex shader
+ * varying vec2 vTexCoord;
+ *
+ * // the canvas contents, given from filter()
+ * uniform sampler2D tex0;
+ * // other useful information from the canvas
+ * uniform vec2 texelSize;
+ * uniform vec2 canvasSize;
+ * // a custom variable from this sketch
+ * uniform float darkness;
+ *
+ * void main() {
+ * // get the color at current pixel
+ * vec4 color = texture2D(tex0, vTexCoord);
+ * // set the output color
+ * color.b = 1.0;
+ * color *= darkness;
+ * gl_FragColor = vec4(color.rgb, 1.0);
+ * }`;
+ *
+ * createCanvas(100, 100, WEBGL);
+ * s = createFilterShader(fragSrc);
+ * }
+ * function draw() {
+ * image(img, -50, -50);
+ * s.setUniform('darkness', 0.5);
+ * filter(s);
+ * describe('a image of bricks tinted dark blue');
+ * }
+ *
+ *
+ *
+ *
+ * @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);
+ s.ensureCompiledOnContext(this);
+ if (s.isStrokeShader()) {
+ this._renderer.userStrokeShader = s;
+ } else {
+ this._renderer.userFillShader = s;
+ this._renderer._useNormalMaterial = false;
+ }
+ return this;
+ };
+ /**
+ * Restores the default shaders. Code that runs after resetShader()
+ * will not be affected by the shader previously set by
+ * shader()
+ *
+ * @method resetShader
+ * @chainable
+ * @example
+ *
+ * // Click within the image to toggle
+ * // the shader used by the quad shape
+ * // Note: for an alternative approach to the same example,
+ * // involving changing uniforms please refer to:
+ * // https://p5js.org/reference/#/p5.Shader/setUniform
+ *
+ * let redGreen;
+ * let orangeBlue;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // initialize the colors for redGreen shader
+ * shader(redGreen);
+ * redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+ * redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+ *
+ * // initialize the colors for orangeBlue shader
+ * shader(orangeBlue);
+ * orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+ * orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+ *
+ * noStroke();
+ *
+ * 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
+ * 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|p5.Framebuffer|p5.FramebufferTexture} tex image to use as texture
+ * @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
+ * spinning cube with a texture from an image
+ *
+ * @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
+ * plane with a texture from an image created by createGraphics()
+ *
+ * @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
+ * rectangle with video as texture
+ *
+ * @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
+ * 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._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() {
+ * 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
+ *
+ * @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 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/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
+ * 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 _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this._renderer.textures.values() [Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var texture = _step.value;
+ texture.setWrapMode(wrapX, wrapY);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ };
+ /**
+ * Sets the current material as a normal material.
+ *
+ * A normal material 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
+ *
+ * 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
+ * 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 represents the components
+ * of the **ambientLight()** color that the object reflects.
+ *
+ * Consider an ambientMaterial() with the color yellow (255, 255, 0).
+ * If the ambientLight() 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 ambientLight() 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 ambientLight() 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 with normal material');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * normalMaterial();
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * sphere reflecting red, blue, and green light
+ *
+ * @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
+ * box reflecting only red and blue 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 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._hasSetAmbient = true;
+ this._renderer.curAmbientColor = color._array;
+ this._renderer._useNormalMaterial = false;
+ this._renderer._enableLighting = true;
+ this._renderer._setProperty('_doFill', true);
+ return this;
+ };
+ /**
+ * Sets the emissive color of 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
+ *
+ * // 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
+ * 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;
+ 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);
+ * describe('sphere with green emissive material');
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * ambientLight(0);
+ * emissiveMaterial(130, 230, 0);
+ * sphere(40);
+ * }
+ *
+ *
+ *
+ * @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;
+ 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);
+ * 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
+ * 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 = this.userFillShader || this.userStrokeShader || this.userPointShader || isTexture || this.curBlendMode !== constants.BLEND || colors[colors.length - 1] < 1 || this._isErasing;
+ if (doBlend !== this._isBlending) {
+ if (doBlend || this.curBlendMode !== constants.BLEND && this.curBlendMode !== constants.ADD) {
+ gl.enable(gl.BLEND);
+ } else {
+ gl.disable(gl.BLEND);
+ }
+ gl.depthMask(true);
+ this._isBlending = doBlend;
+ }
+ this._applyBlendMode();
+ return colors;
+ };
+ /**
+ * @private sets blending in gl context to curBlendMode
+ * @param {Number[]} color [description]
+ * @return {Number[]]} Normalized numbers array
+ */
+ _main.default.RendererGL.prototype._applyBlendMode = function () {
+ if (this._cachedBlendMode === this.curBlendMode) {
+ return;
+ }
+ var gl = this.GL;
+ switch (this.curBlendMode) {
+ case constants.BLEND:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.ADD:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ONE);
+ break;
+ case constants.REMOVE:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.MULTIPLY:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.SCREEN:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
+ break;
+ case constants.EXCLUSION:
+ gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE_MINUS_DST_COLOR, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE);
+ break;
+ case constants.REPLACE:
+ gl.blendEquation(gl.FUNC_ADD);
+ gl.blendFunc(gl.ONE, gl.ZERO);
+ break;
+ case constants.SUBTRACT:
+ gl.blendEquationSeparate(gl.FUNC_REVERSE_SUBTRACT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+ break;
+ case constants.DARKEST:
+ if (this.blendExt) {
+ gl.blendEquationSeparate(this.blendExt.MIN || this.blendExt.MIN_EXT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+ } else {
+ console.warn('blendMode(DARKEST) does not work in your browser in WEBGL mode.');
+ }
+ break;
+ case constants.LIGHTEST:
+ if (this.blendExt) {
+ gl.blendEquationSeparate(this.blendExt.MAX || this.blendExt.MAX_EXT, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+ } else {
+ console.warn('blendMode(LIGHTEST) does not work in your browser in WEBGL mode.');
+ }
+ break;
+ default:
+ console.error('Oops! Somehow RendererGL set curBlendMode to an unsupported mode.');
+ break;
+ }
+ if (!this._isErasing) {
+ this._cachedBlendMode = this.curBlendMode;
+ }
+ };
+ var _default = _main.default;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ './p5.Texture': 357,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.join': 180,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 347: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.hypot');
+ _dereq_('core-js/modules/es.string.sub');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module 3D
+ * @submodule Camera
+ * @requires core
+ */
+ ////////////////////////////////////////////////////////////////////////////////
+ // p5.Prototype Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Sets the position 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('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);
+ * }
+ *
+ *
+ *
+ *
+ * @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);
+ * }
+ *
+ *
+ *
+ * @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
+ *
+ * //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
+ * 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!
+ * 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 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/20, width/20, height/20, -height/20, eyeZ/10, eyeZ*10),
+ * where eyeZ is equal to ((height/2) / tan(PI/6)).
+ * @method frustum
+ * @for p5
+ * @param {Number} [left] camera frustum left plane
+ * @param {Number} [right] camera frustum right plane
+ * @param {Number} [bottom] camera frustum bottom plane
+ * @param {Number} [top] camera frustum top plane
+ * @param {Number} [near] camera frustum near plane
+ * @param {Number} [far] camera frustum far plane
+ * @chainable
+ * @example
+ *
+ * //drag the mouse to look around!
+ * //there's no vanishing point
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
+ * 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.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
+ *
+ * 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();
+ * }
+ *
+ *
+ * // 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() {
+ * background(0);
+ * // The camera will automatically
+ * // rotate to look at [0, 0, 0].
+ * camera.lookAt(0, 0, 0);
+ *
+ * // The camera will move on the
+ * // x axis.
+ * camera.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ * box(20);
+ *
+ * // A 'ground' box to give the viewer
+ * // a better idea of where the camera
+ * // is looking.
+ * translate(0, 50, 0);
+ * rotateX(HALF_PI);
+ * box(150, 150, 20);
+ * }
+ * 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
+ *
+ *
+ *
+ * @alt
+ * camera view pans left and right across a series of rotating 3D boxes.
+ */
+ _main.default.Camera = /*#__PURE__*/ function () {
+ function Camera(renderer) {
+ _classCallCheck(this, Camera);
+ this._renderer = renderer;
+ this.cameraType = 'default';
+ this.cameraMatrix = new _main.default.Matrix();
+ this.projMatrix = new _main.default.Matrix();
+ this.yScale = 1;
+ } /**
+ * camera position value on x axis
+ * @property {Number} eyeX
+ * @readonly
+ * @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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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');
+ * }
+ *
+ * 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');
+ * }
+ *
+ * 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
+ * two colored 3D boxes move back and forth, rotating as mouse is dragged.
+ */
+
+ _createClass(Camera, [
+ {
+ key: 'perspective',
+ value: function perspective(fovy, aspect, near, far) {
+ this.cameraType = arguments.length > 0 ? 'custom' : 'default';
+ if (typeof fovy === 'undefined') {
+ fovy = this.defaultCameraFOV;
+ // this avoids issue where setting angleMode(DEGREES) before calling
+ // perspective leads to a smaller than expected FOV (because
+ // _computeCameraDefaultSettings computes in radians)
+ this.cameraFOV = fovy;
+ } else {
+ this.cameraFOV = this._renderer._pInst._toRadians(fovy);
+ }
+ if (typeof aspect === 'undefined') {
+ aspect = this.defaultAspectRatio;
+ }
+ if (typeof near === 'undefined') {
+ near = this.defaultCameraNear;
+ }
+ if (typeof far === 'undefined') {
+ far = this.defaultCameraFar;
+ }
+ if (near <= 0.0001) {
+ near = 0.01;
+ console.log('Avoid perspective near plane values close to or below 0. ' + 'Setting value to 0.01.');
+ }
+ if (far < near) {
+ console.log('Perspective far plane value is less than near plane value. ' + 'Nothing will be shown.');
+ }
+ this.aspectRatio = aspect;
+ this.cameraNear = near;
+ this.cameraFar = far;
+ this.projMatrix = _main.default.Matrix.identity();
+ var f = 1 / Math.tan(this.cameraFOV / 2);
+ var nf = 1 / (this.cameraNear - this.cameraFar);
+ /* eslint-disable indent */
+ this.projMatrix.set(f / aspect, 0, 0, 0, 0, - f * this.yScale, 0, 0, 0, 0, (far + near) * nf, - 1, 0, 0, 2 * far * near * nf, 0);
+ /* eslint-enable indent */
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(this.projMatrix.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!
+ *
+ * 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 3D boxes move back and forth along same plane, rotating as mouse is dragged.
+ */
+
+ },
+ {
+ key: 'ortho',
+ value: function ortho(left, right, bottom, top, near, far) {
+ if (left === undefined) left = - this._renderer.width / 2;
+ if (right === undefined) right = + this._renderer.width / 2;
+ if (bottom === undefined) bottom = - this._renderer.height / 2;
+ if (top === undefined) top = + this._renderer.height / 2;
+ if (near === undefined) near = 0;
+ if (far === undefined) far = Math.max(this._renderer.width, this._renderer.height);
+ this.cameraNear = near;
+ this.cameraFar = far;
+ var w = right - left;
+ var h = top - bottom;
+ var d = far - near;
+ var x = + 2 / w;
+ var y = + 2 / h * this.yScale;
+ var z = - 2 / d;
+ var tx = - (right + left) / w;
+ var ty = - (top + bottom) / h;
+ var tz = - (far + near) / d;
+ this.projMatrix = _main.default.Matrix.identity();
+ /* eslint-disable indent */
+ this.projMatrix.set(x, 0, 0, 0, 0, - y, 0, 0, 0, 0, z, 0, tx, ty, tz, 1);
+ /* eslint-enable indent */
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(this.projMatrix.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
+ *
+ * // 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.
+ */
+
+ },
+ {
+ key: 'frustum',
+ value: function frustum(left, right, bottom, top, near, far) {
+ if (left === undefined) left = - this._renderer.width * 0.05;
+ if (right === undefined) right = + this._renderer.width * 0.05;
+ if (bottom === undefined) bottom = + this._renderer.height * 0.05;
+ if (top === undefined) top = - this._renderer.height * 0.05;
+ if (near === undefined) near = this.defaultCameraNear;
+ if (far === undefined) far = this.defaultCameraFar;
+ this.cameraNear = near;
+ this.cameraFar = far;
+ var w = right - left;
+ var h = top - bottom;
+ var d = far - near;
+ var x = + (2 * near) / w;
+ var y = + (2 * near) / h * this.yScale;
+ var z = - (2 * far * near) / d;
+ var tx = (right + left) / w;
+ var ty = (top + bottom) / h;
+ var tz = - (far + near) / d;
+ this.projMatrix = _main.default.Matrix.identity();
+ /* eslint-disable indent */
+ this.projMatrix.set(x, 0, 0, 0, 0, - y, 0, 0, tx, ty, tz, - 1, 0, 0, z, 0);
+ /* eslint-enable indent */
+ if (this._isActive()) {
+ this._renderer.uPMatrix.set(this.projMatrix.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
+ */
+
+ },
+ {
+ key: '_rotateView',
+ value: function _rotateView(a, x, y, z) {
+ var centerX = this.centerX;
+ var centerY = this.centerY;
+ var centerZ = this.centerZ;
+ // move center by eye position such that rotation happens around eye position
+ centerX -= this.eyeX;
+ centerY -= this.eyeY;
+ centerZ -= this.eyeZ;
+ var rotation = _main.default.Matrix.identity(this._renderer._pInst);
+ rotation.rotate(this._renderer._pInst._toRadians(a), x, y, z);
+ /* eslint-disable max-len */
+ var rotatedCenter = [
+ centerX * rotation.mat4[0] + centerY * rotation.mat4[4] + centerZ * rotation.mat4[8],
+ centerX * rotation.mat4[1] + centerY * rotation.mat4[5] + centerZ * rotation.mat4[9],
+ centerX * rotation.mat4[2] + centerY * rotation.mat4[6] + centerZ * rotation.mat4[10]
+ ];
+ /* eslint-enable max-len */
+ // add eye position back into center
+ rotatedCenter[0] += this.eyeX;
+ rotatedCenter[1] += this.eyeY;
+ rotatedCenter[2] += this.eyeZ;
+ this.camera(this.eyeX, this.eyeY, this.eyeZ, rotatedCenter[0], rotatedCenter[1], rotatedCenter[2], this.upX, this.upY, this.upZ);
+ } /**
+ * 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;
+ *
+ * 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
+ * camera view pans left and right across a series of rotating 3D boxes.
+ */
+
+ },
+ {
+ key: 'pan',
+ value: function pan(amount) {
+ var local = this._getLocalAxes();
+ this._rotateView(amount, local.y[0], local.y[1], local.y[2]);
+ } /**
+ * Tilting rotates the camera view up and down.
+ * @method tilt
+ * @param {Number} angle amount to rotate camera in current
+ * angleMode units.
+ * Greater than 0 values rotate counterclockwise (to the left).
+ * @example
+ *
+ * let cam;
+ * let delta = 0.01;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * // set initial pan angle
+ * cam.pan(-0.8);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // pan camera according to angle 'delta'
+ * cam.pan(delta);
+ *
+ * // every 160 frames, switch direction
+ * if (frameCount % 160 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * rotateX(frameCount * 0.01);
+ * translate(-100, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * camera view tilts up and down across a series of rotating 3D boxes.
+ */
+
+ },
+ {
+ key: 'tilt',
+ value: function tilt(amount) {
+ var local = this._getLocalAxes();
+ this._rotateView(amount, local.x[0], local.x[1], local.x[2]);
+ } /**
+ * Reorients the camera to look at a position in world space.
+ * @method lookAt
+ * @for p5.Camera
+ * @param {Number} x x position of a point in world space
+ * @param {Number} y y position of a point in world space
+ * @param {Number} z z position of a point in world space
+ * @example
+ *
+ * let cam;
+ * let delta = 0.01;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * // set initial tilt
+ * cam.tilt(-0.8);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // pan camera according to angle 'delta'
+ * cam.tilt(delta);
+ *
+ * // every 160 frames, switch direction
+ * if (frameCount % 160 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * rotateY(frameCount * 0.01);
+ * translate(0, -100, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * translate(0, 35, 0);
+ * box(20);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * camera view of rotating 3D cubes changes to look at a new random
+ * point every second .
+ */
+
+ },
+ {
+ key: 'lookAt',
+ value: function lookAt(x, y, z) {
+ this.camera(this.eyeX, this.eyeY, this.eyeZ, x, y, z, this.upX, this.upY, this.upZ);
+ } ////////////////////////////////////////////////////////////////////////////////
+ // Camera Position Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Sets the 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);
+ * 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
+ * White square repeatedly grows to fill canvas and then shrinks.
+ *
+ * @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
+ * 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.
+ */
+
+ },
+ {
+ key: 'camera',
+ value: function camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ) {
+ if (typeof eyeX === 'undefined') {
+ eyeX = this.defaultEyeX;
+ eyeY = this.defaultEyeY;
+ eyeZ = this.defaultEyeZ;
+ centerX = eyeX;
+ centerY = eyeY;
+ centerZ = 0;
+ upX = 0;
+ upY = 1;
+ upZ = 0;
+ }
+ this.eyeX = eyeX;
+ this.eyeY = eyeY;
+ this.eyeZ = eyeZ;
+ if (typeof centerX !== 'undefined') {
+ this.centerX = centerX;
+ this.centerY = centerY;
+ this.centerZ = centerZ;
+ }
+ if (typeof upX !== 'undefined') {
+ this.upX = upX;
+ this.upY = upY;
+ this.upZ = upZ;
+ }
+ var local = this._getLocalAxes();
+ // the camera affects the model view matrix, insofar as it
+ // inverse translates the world to the eye position of the camera
+ // and rotates it.
+ /* eslint-disable indent */
+ this.cameraMatrix.set(local.x[0], local.y[0], local.z[0], 0, local.x[1], local.y[1], local.z[1], 0, local.x[2], local.y[2], local.z[2], 0, 0, 0, 0, 1);
+ /* eslint-enable indent */
+ var tx = - eyeX;
+ var ty = - eyeY;
+ var tz = - eyeZ;
+ this.cameraMatrix.translate([tx,
+ ty,
+ tz]);
+ if (this._isActive()) {
+ this._renderer.uMVMatrix.set(this.cameraMatrix.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
+ *
+ * // 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
+ * camera view moves along a series of 3D boxes, maintaining the same
+ * orientation throughout the move
+ */
+
+ },
+ {
+ key: 'move',
+ value: function move(x, y, z) {
+ var local = this._getLocalAxes();
+ // scale local axes by movement amounts
+ // based on http://learnwebgl.brown37.net/07_cameras/camera_linear_motion.html
+ var dx = [
+ local.x[0] * x,
+ local.x[1] * x,
+ local.x[2] * x
+ ];
+ var dy = [
+ local.y[0] * y,
+ local.y[1] * y,
+ local.y[2] * y
+ ];
+ var dz = [
+ local.z[0] * z,
+ local.z[1] * z,
+ local.z[2] * z
+ ];
+ this.camera(this.eyeX + dx[0] + dy[0] + dz[0], this.eyeY + dx[1] + dy[1] + dz[1], this.eyeZ + dx[2] + dy[2] + dz[2], this.centerX + dx[0] + dy[0] + dz[0], this.centerY + dx[1] + dy[1] + dz[1], this.centerZ + dx[2] + dy[2] + dz[2], this.upX, this.upY, this.upZ);
+ } /**
+ * Set camera position in world-space while maintaining current camera
+ * orientation.
+ * @method setPosition
+ * @param {Number} x x position of a point in world space
+ * @param {Number} y y position of a point in world space
+ * @param {Number} z z position of a point in world space
+ * @example
+ *
+ * // see the camera move along its own axes while maintaining its orientation
+ * let cam;
+ * let delta = 0.5;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * cam = createCamera();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // move the camera along its local axes
+ * cam.move(delta, delta, 0);
+ *
+ * // every 100 frames, switch direction
+ * if (frameCount % 150 === 0) {
+ * delta *= -1;
+ * }
+ *
+ * translate(-10, -10, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * translate(15, 15, 0);
+ * box(50, 8, 50);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * camera position changes as the user presses keys, altering view of a 3D box
+ */
+
+ },
+ {
+ key: 'setPosition',
+ value: function setPosition(x, y, z) {
+ var diffX = x - this.eyeX;
+ var diffY = y - this.eyeY;
+ var diffZ = z - this.eyeZ;
+ this.camera(x, y, z, this.centerX + diffX, this.centerY + diffY, this.centerZ + diffZ, this.upX, this.upY, this.upZ);
+ } /**
+ * Copies information about the argument camera's view and projection to
+ * the target camera. If the target camera is active, it will be reflected
+ * on the screen.
+ *
+ * @method set
+ * @param {p5.Camera} cam source camera
+ *
+ * @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
+ * Prepare two cameras. One is the camera that sets the initial state,
+ * and the other is the camera that moves with interaction.
+ * Draw a plane and a box on top of it, operate the camera using orbitControl().
+ * Double-click to set the camera in the initial state and return to
+ * the initial state.
+ */
+
+ },
+ {
+ key: 'set',
+ value: function set(cam) {
+ var keyNamesOfThePropToCopy = [
+ 'eyeX',
+ 'eyeY',
+ 'eyeZ',
+ 'centerX',
+ 'centerY',
+ 'centerZ',
+ 'upX',
+ 'upY',
+ 'upZ',
+ 'cameraFOV',
+ 'aspectRatio',
+ 'cameraNear',
+ 'cameraFar',
+ 'cameraType',
+ 'yScale'
+ ];
+ for (var _i = 0, _keyNamesOfThePropToC = keyNamesOfThePropToCopy; _i < _keyNamesOfThePropToC.length; _i++) {
+ var keyName = _keyNamesOfThePropToC[_i];
+ this[keyName] = cam[keyName];
+ }
+ this.cameraMatrix = cam.cameraMatrix.copy();
+ this.projMatrix = cam.projMatrix.copy();
+ // If the target camera is active, update uMVMatrix and uPMatrix.
+ if (this._isActive()) {
+ this._renderer.uMVMatrix.mat4 = this.cameraMatrix.mat4.slice();
+ this._renderer.uPMatrix.mat4 = this.projMatrix.mat4.slice();
+ }
+ } /**
+ * For the cameras cam0 and cam1 with the given arguments, their view are combined
+ * with the parameter amt that represents the quantity, and the obtained view is applied.
+ * For example, if cam0 is looking straight ahead and cam1 is looking straight
+ * to the right and amt is 0.5, the applied camera will look to the halfway
+ * between front and right.
+ * If the applied camera is active, the applied result will be reflected on the screen.
+ * When applying this function, all cameras involved must have exactly the same projection
+ * settings. For example, if one is perspective, ortho, frustum, the other two must also be
+ * perspective, ortho, frustum respectively. However, if all cameras have ortho settings,
+ * interpolation is possible if the ratios of left, right, top and bottom are equal to each other.
+ * For example, when it is changed by orbitControl().
+ *
+ * @method slerp
+ * @param {p5.Camera} cam0 first p5.Camera
+ * @param {p5.Camera} cam1 second p5.Camera
+ * @param {Number} amt amount to use for interpolation during slerp
+ *
+ * @example
+ *
+ * let cam, initialCam;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * strokeWeight(3);
+ *
+ * // Set the initial state to initialCamera and set it to the camera
+ * // used for drawing. Then set cam to be the active camera.
+ * cam = createCamera();
+ * initialCam = createCamera();
+ * initialCam.camera(100, 100, 100, 0, 0, 0, 0, 0, -1);
+ * cam.set(initialCam);
+ *
+ * setCamera(cam);
+ * }
+ *
+ * function draw() {
+ * orbitControl();
+ * background(255);
+ * box(50);
+ * translate(0, 0, -25);
+ * plane(100);
+ * }
+ *
+ * function doubleClicked(){
+ * // Double-click to return the camera to its initial position.
+ * cam.set(initialCam);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Prepare two cameras. One camera is facing straight ahead to the cube and the other
+ * camera is in the same position and looking straight to the right.
+ * If you use a camera which interpolates these with slerp(), the facing direction
+ * of the camera will change smoothly between the front and the right.
+ *
+ * @example
+ *
+ * let cam0, cam1, cam;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * strokeWeight(3);
+ *
+ * // camera for slerp.
+ * cam = createCamera();
+ * // cam0 is looking at the cube from the front.
+ * // cam1 is pointing straight to the right in the cube
+ * // at the same position as cam0 by doing a pan(-PI/2).
+ * cam0 = createCamera();
+ * cam1 = createCamera();
+ * cam1.pan(-PI/2);
+ *
+ * // we only use cam.
+ * setCamera(cam);
+ * }
+ *
+ * function draw() {
+ * // calculate amount.
+ * const amt = 0.5 - 0.5 * cos(frameCount * TAU / 120);
+ * // slerp cam0 and cam1 with amt, set to cam.
+ * // When amt moves from 0 to 1, cam moves from cam0 to cam1,
+ * // shaking the camera to the right.
+ * cam.slerp(cam0, cam1, amt);
+ *
+ * background(255);
+ * // Every time the camera turns right, the cube drifts left.
+ * box(40);
+ * }
+ *
+ *
+ *
+ * @alt
+ * There is a camera, drawing a cube. The camera can be moved freely with
+ * orbitControl(). Double-click to smoothly return the camera to its initial state.
+ * The camera cannot be moved during that time.
+ */
+
+ },
+ {
+ key: 'slerp',
+ value: function slerp(cam0, cam1, amt) {
+ // If t is 0 or 1, do not interpolate and set the argument camera.
+ if (amt === 0) {
+ this.set(cam0);
+ return;
+ } else if (amt === 1) {
+ this.set(cam1);
+ return;
+ } // For this cameras is ortho, assume that cam0 and cam1 are also ortho
+ // and interpolate the elements of the projection matrix.
+ // Use logarithmic interpolation for interpolation.
+
+ if (this.projMatrix.mat4[15] !== 0) {
+ this.projMatrix.mat4[0] = cam0.projMatrix.mat4[0] * Math.pow(cam1.projMatrix.mat4[0] / cam0.projMatrix.mat4[0], amt);
+ this.projMatrix.mat4[5] = cam0.projMatrix.mat4[5] * Math.pow(cam1.projMatrix.mat4[5] / cam0.projMatrix.mat4[5], amt);
+ // If the camera is active, make uPMatrix reflect changes in projMatrix.
+ if (this._isActive()) {
+ this._renderer.uPMatrix.mat4 = this.projMatrix.mat4.slice();
+ }
+ } // prepare eye vector and center vector of argument cameras.
+
+ var eye0 = new _main.default.Vector(cam0.eyeX, cam0.eyeY, cam0.eyeZ);
+ var eye1 = new _main.default.Vector(cam1.eyeX, cam1.eyeY, cam1.eyeZ);
+ var center0 = new _main.default.Vector(cam0.centerX, cam0.centerY, cam0.centerZ);
+ var center1 = new _main.default.Vector(cam1.centerX, cam1.centerY, cam1.centerZ);
+ // Calculate the distance between eye and center for each camera.
+ // Logarithmically interpolate these with amt.
+ var dist0 = _main.default.Vector.dist(eye0, center0);
+ var dist1 = _main.default.Vector.dist(eye1, center1);
+ var lerpedDist = dist0 * Math.pow(dist1 / dist0, amt);
+ // Next, calculate the ratio to interpolate the eye and center by a constant
+ // ratio for each camera. This ratio is the same for both. Also, with this ratio
+ // of points, the distance is the minimum distance of the two points of
+ // the same ratio.
+ // With this method, if the viewpoint is fixed, linear interpolation is performed
+ // at the viewpoint, and if the center is fixed, linear interpolation is performed
+ // at the center, resulting in reasonable interpolation. If both move, the point
+ // halfway between them is taken.
+ var eyeDiff = _main.default.Vector.sub(eye0, eye1);
+ var diffDiff = eye0.copy().sub(eye1).sub(center0).add(center1);
+ // Suppose there are two line segments. Consider the distance between the points
+ // above them as if they were taken in the same ratio. This calculation figures out
+ // a ratio that minimizes this.
+ // Each line segment is, a line segment connecting the viewpoint and the center
+ // for each camera.
+ var divider = diffDiff.magSq();
+ var ratio = 1; // default.
+ if (divider > 0.000001) {
+ ratio = _main.default.Vector.dot(eyeDiff, diffDiff) / divider;
+ ratio = Math.max(0, Math.min(ratio, 1));
+ } // Take the appropriate proportions and work out the points
+ // that are between the new viewpoint and the new center position.
+
+ var lerpedMedium = _main.default.Vector.lerp(_main.default.Vector.lerp(eye0, center0, ratio), _main.default.Vector.lerp(eye1, center1, ratio), amt);
+ // Prepare each of rotation matrix from their camera matrix
+ var rotMat0 = cam0.cameraMatrix.createSubMatrix3x3();
+ var rotMat1 = cam1.cameraMatrix.createSubMatrix3x3();
+ // get front and up vector from local-coordinate-system.
+ var front0 = rotMat0.column(2);
+ var front1 = rotMat1.column(2);
+ var up0 = rotMat0.column(1);
+ var up1 = rotMat1.column(1);
+ // prepare new vectors.
+ var newFront = new _main.default.Vector();
+ var newUp = new _main.default.Vector();
+ var newEye = new _main.default.Vector();
+ var newCenter = new _main.default.Vector();
+ // Create the inverse matrix of mat0 by transposing mat0,
+ // and multiply it to mat1 from the right.
+ // This matrix represents the difference between the two.
+ // 'deltaRot' means 'difference of rotation matrices'.
+ var deltaRot = rotMat1.mult3x3(rotMat0.copy().transpose3x3());
+ // Calculate the trace and from it the cos value of the angle.
+ // An orthogonal matrix is just an orthonormal basis. If this is not the identity
+ // matrix, it is a centered orthonormal basis plus some angle of rotation about
+ // some axis. That's the angle. Letting this be theta, trace becomes 1+2cos(theta).
+ // reference: https://en.wikipedia.org/wiki/Rotation_matrix#Determining_the_angle
+ var diag = deltaRot.diagonal();
+ var cosTheta = 0.5 * (diag[0] + diag[1] + diag[2] - 1);
+ // If the angle is close to 0, the two matrices are very close,
+ // so in that case we execute linearly interpolate.
+ if (1 - cosTheta < 1e-7) {
+ // Obtain the front vector and up vector by linear interpolation
+ // and normalize them.
+ // calculate newEye, newCenter with newFront vector.
+ newFront.set(_main.default.Vector.lerp(front0, front1, amt)).normalize();
+ newEye.set(newFront).mult(ratio * lerpedDist).add(lerpedMedium);
+ newCenter.set(newFront).mult((ratio - 1) * lerpedDist).add(lerpedMedium);
+ newUp.set(_main.default.Vector.lerp(up0, up1, amt)).normalize();
+ // set the camera
+ this.camera(newEye.x, newEye.y, newEye.z, newCenter.x, newCenter.y, newCenter.z, newUp.x, newUp.y, newUp.z);
+ return;
+ } // Calculates the axis vector and the angle of the difference orthogonal matrix.
+ // The axis vector is what I explained earlier in the comments.
+ // similar calculation is here:
+ // https://github.com/mrdoob/three.js/blob/883249620049d1632e8791732808fefd1a98c871/src/math/Quaternion.js#L294
+
+ var a,
+ b,
+ c,
+ sinTheta;
+ var invOneMinusCosTheta = 1 / (1 - cosTheta);
+ var maxDiag = Math.max(diag[0], diag[1], diag[2]);
+ var offDiagSum13 = deltaRot.mat3[1] + deltaRot.mat3[3];
+ var offDiagSum26 = deltaRot.mat3[2] + deltaRot.mat3[6];
+ var offDiagSum57 = deltaRot.mat3[5] + deltaRot.mat3[7];
+ if (maxDiag === diag[0]) {
+ a = Math.sqrt((diag[0] - cosTheta) * invOneMinusCosTheta); // not zero.
+ invOneMinusCosTheta /= a;
+ b = 0.5 * offDiagSum13 * invOneMinusCosTheta;
+ c = 0.5 * offDiagSum26 * invOneMinusCosTheta;
+ sinTheta = 0.5 * (deltaRot.mat3[7] - deltaRot.mat3[5]) / a;
+ } else if (maxDiag === diag[1]) {
+ b = Math.sqrt((diag[1] - cosTheta) * invOneMinusCosTheta); // not zero.
+ invOneMinusCosTheta /= b;
+ c = 0.5 * offDiagSum57 * invOneMinusCosTheta;
+ a = 0.5 * offDiagSum13 * invOneMinusCosTheta;
+ sinTheta = 0.5 * (deltaRot.mat3[2] - deltaRot.mat3[6]) / b;
+ } else {
+ c = Math.sqrt((diag[2] - cosTheta) * invOneMinusCosTheta); // not zero.
+ invOneMinusCosTheta /= c;
+ a = 0.5 * offDiagSum26 * invOneMinusCosTheta;
+ b = 0.5 * offDiagSum57 * invOneMinusCosTheta;
+ sinTheta = 0.5 * (deltaRot.mat3[3] - deltaRot.mat3[1]) / c;
+ } // Constructs a new matrix after interpolating the angles.
+ // Multiplying mat0 by the first matrix yields mat1, but by creating a state
+ // in the middle of that matrix, you can obtain a matrix that is
+ // an intermediate state between mat0 and mat1.
+
+ var angle = amt * Math.atan2(sinTheta, cosTheta);
+ var cosAngle = Math.cos(angle);
+ var sinAngle = Math.sin(angle);
+ var oneMinusCosAngle = 1 - cosAngle;
+ var ab = a * b;
+ var bc = b * c;
+ var ca = c * a;
+ var lerpedRotMat = new _main.default.Matrix('mat3', [
+ cosAngle + oneMinusCosAngle * a * a,
+ oneMinusCosAngle * ab + sinAngle * c,
+ oneMinusCosAngle * ca - sinAngle * b,
+ oneMinusCosAngle * ab - sinAngle * c,
+ cosAngle + oneMinusCosAngle * b * b,
+ oneMinusCosAngle * bc + sinAngle * a,
+ oneMinusCosAngle * ca + sinAngle * b,
+ oneMinusCosAngle * bc - sinAngle * a,
+ cosAngle + oneMinusCosAngle * c * c
+ ]);
+ // Multiply this to mat0 from left to get the interpolated front vector.
+ // calculate newEye, newCenter with newFront vector.
+ lerpedRotMat.multiplyVec3(front0, newFront);
+ newEye.set(newFront).mult(ratio * lerpedDist).add(lerpedMedium);
+ newCenter.set(newFront).mult((ratio - 1) * lerpedDist).add(lerpedMedium);
+ lerpedRotMat.multiplyVec3(up0, newUp);
+ // We also get the up vector in the same way and set the camera.
+ // The eye position and center position are calculated based on the front vector.
+ this.camera(newEye.x, newEye.y, newEye.z, newCenter.x, newCenter.y, newCenter.z, newUp.x, newUp.y, newUp.z);
+ } ////////////////////////////////////////////////////////////////////////////////
+ // Camera Helper Methods
+ ////////////////////////////////////////////////////////////////////////////////
+ // @TODO: combine this function with _setDefaultCamera to compute these values
+ // as-needed
+
+ },
+ {
+ key: '_computeCameraDefaultSettings',
+ value: function _computeCameraDefaultSettings() {
+ this.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
+
+ },
+ {
+ key: '_setDefaultCamera',
+ value: function _setDefaultCamera() {
+ this.cameraFOV = this.defaultCameraFOV;
+ this.aspectRatio = this.defaultAspectRatio;
+ this.eyeX = this.defaultEyeX;
+ this.eyeY = this.defaultEyeY;
+ this.eyeZ = this.defaultEyeZ;
+ this.centerX = this.defaultCenterX;
+ this.centerY = this.defaultCenterY;
+ this.centerZ = this.defaultCenterZ;
+ this.upX = 0;
+ this.upY = 1;
+ this.upZ = 0;
+ this.cameraNear = this.defaultCameraNear;
+ this.cameraFar = this.defaultCameraFar;
+ this.perspective();
+ this.camera();
+ this.cameraType = 'default';
+ }
+ },
+ {
+ key: '_resize',
+ value: function _resize() {
+ // If we're using the default camera, update the aspect ratio
+ if (this.cameraType === 'default') {
+ this._computeCameraDefaultSettings();
+ this._setDefaultCamera();
+ } else {
+ this.perspective(this.cameraFOV, this._renderer.width / this._renderer.height);
+ }
+ } /**
+ * Returns a copy of a camera.
+ * @method copy
+ * @private
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ var _cam = new _main.default.Camera(this._renderer);
+ _cam.cameraFOV = this.cameraFOV;
+ _cam.aspectRatio = this.aspectRatio;
+ _cam.eyeX = this.eyeX;
+ _cam.eyeY = this.eyeY;
+ _cam.eyeZ = this.eyeZ;
+ _cam.centerX = this.centerX;
+ _cam.centerY = this.centerY;
+ _cam.centerZ = this.centerZ;
+ _cam.upX = this.upX;
+ _cam.upY = this.upY;
+ _cam.upZ = this.upZ;
+ _cam.cameraNear = this.cameraNear;
+ _cam.cameraFar = this.cameraFar;
+ _cam.cameraType = this.cameraType;
+ _cam.cameraMatrix = this.cameraMatrix.copy();
+ _cam.projMatrix = this.projMatrix.copy();
+ _cam.yScale = this.yScale;
+ return _cam;
+ } /**
+ * Returns a camera's local axes: left-right, up-down, and forward-backward,
+ * as defined by vectors in world-space.
+ * @method _getLocalAxes
+ * @private
+ */
+
+ },
+ {
+ key: '_getLocalAxes',
+ value: function _getLocalAxes() {
+ // calculate camera local Z vector
+ var z0 = this.eyeX - this.centerX;
+ var z1 = this.eyeY - this.centerY;
+ var z2 = this.eyeZ - this.centerZ;
+ // normalize camera local Z vector
+ var eyeDist = Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
+ if (eyeDist !== 0) {
+ z0 /= eyeDist;
+ z1 /= eyeDist;
+ z2 /= eyeDist;
+ } // calculate camera Y vector
+
+ var y0 = this.upX;
+ var y1 = this.upY;
+ var y2 = this.upZ;
+ // compute camera local X vector as up vector (local Y) cross local Z
+ var x0 = y1 * z2 - y2 * z1;
+ var x1 = - y0 * z2 + y2 * z0;
+ var x2 = y0 * z1 - y1 * z0;
+ // recompute y = z cross x
+ y0 = z1 * x2 - z2 * x1;
+ y1 = - z0 * x2 + z2 * x0;
+ y2 = z0 * x1 - z1 * x0;
+ // cross product gives area of parallelogram, which is < 1.0 for
+ // non-perpendicular unit-length vectors; so normalize x, y here:
+ var xmag = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
+ if (xmag !== 0) {
+ x0 /= xmag;
+ x1 /= xmag;
+ x2 /= xmag;
+ }
+ var ymag = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
+ if (ymag !== 0) {
+ y0 /= ymag;
+ y1 /= ymag;
+ y2 /= ymag;
+ }
+ return {
+ x: [
+ x0,
+ x1,
+ x2
+ ],
+ y: [
+ y0,
+ y1,
+ y2
+ ],
+ z: [
+ z0,
+ z1,
+ z2
+ ]
+ };
+ } /**
+ * Orbits the camera about center point. For use with orbitControl().
+ * @method _orbit
+ * @private
+ * @param {Number} dTheta change in spherical coordinate theta
+ * @param {Number} dPhi change in spherical coordinate phi
+ * @param {Number} dRadius change in radius
+ */
+
+ },
+ {
+ key: '_orbit',
+ value: function _orbit(dTheta, dPhi, dRadius) {
+ // Calculate the vector and its magnitude from the center to the viewpoint
+ var diffX = this.eyeX - this.centerX;
+ var diffY = this.eyeY - this.centerY;
+ var diffZ = this.eyeZ - this.centerZ;
+ var camRadius = Math.hypot(diffX, diffY, diffZ);
+ // front vector. unit vector from center to eye.
+ var front = new _main.default.Vector(diffX, diffY, diffZ).normalize();
+ // up vector. normalized camera's up vector.
+ var up = new _main.default.Vector(this.upX, this.upY, this.upZ).normalize(); // y-axis
+ // side vector. Right when viewed from the front
+ var side = new _main.default.Vector.cross(up, front).normalize(); // x-axis
+ // vertical vector. normalized vector of projection of front vector.
+ var vertical = new _main.default.Vector.cross(side, up); // z-axis
+ // update camRadius
+ camRadius *= Math.pow(10, dRadius);
+ // prevent zooming through the center:
+ if (camRadius < this.cameraNear) {
+ camRadius = this.cameraNear;
+ }
+ if (camRadius > this.cameraFar) {
+ camRadius = this.cameraFar;
+ } // calculate updated camera angle
+ // Find the angle between the "up" and the "front", add dPhi to that.
+ // angleBetween() may return negative value. Since this specification is subject to change
+ // due to version updates, it cannot be adopted, so here we calculate using a method
+ // that directly obtains the absolute value.
+
+ var camPhi = Math.acos(Math.max( - 1, Math.min(1, _main.default.Vector.dot(front, up)))) + dPhi;
+ // Rotate by dTheta in the shortest direction from "vertical" to "side"
+ var camTheta = dTheta;
+ // Invert camera's upX, upY, upZ if dPhi is below 0 or above PI
+ if (camPhi <= 0 || camPhi >= Math.PI) {
+ this.upX *= - 1;
+ this.upY *= - 1;
+ this.upZ *= - 1;
+ } // update eye vector by calculate new front vector
+
+ up.mult(Math.cos(camPhi));
+ vertical.mult(Math.cos(camTheta) * Math.sin(camPhi));
+ side.mult(Math.sin(camTheta) * Math.sin(camPhi));
+ front.set(up).add(vertical).add(side);
+ this.eyeX = camRadius * front.x + this.centerX;
+ this.eyeY = camRadius * front.y + this.centerY;
+ this.eyeZ = camRadius * front.z + this.centerZ;
+ // update camera
+ this.camera(this.eyeX, this.eyeY, this.eyeZ, this.centerX, this.centerY, this.centerZ, this.upX, this.upY, this.upZ);
+ } /**
+ * Orbits the camera about center point. For use with orbitControl().
+ * Unlike _orbit(), the direction of rotation always matches the direction of pointer movement.
+ * @method _orbitFree
+ * @private
+ * @param {Number} dx the x component of the rotation vector.
+ * @param {Number} dy the y component of the rotation vector.
+ * @param {Number} dRadius change in radius
+ */
+
+ },
+ {
+ key: '_orbitFree',
+ value: function _orbitFree(dx, dy, dRadius) {
+ // Calculate the vector and its magnitude from the center to the viewpoint
+ var diffX = this.eyeX - this.centerX;
+ var diffY = this.eyeY - this.centerY;
+ var diffZ = this.eyeZ - this.centerZ;
+ var camRadius = Math.hypot(diffX, diffY, diffZ);
+ // front vector. unit vector from center to eye.
+ var front = new _main.default.Vector(diffX, diffY, diffZ).normalize();
+ // up vector. camera's up vector.
+ var up = new _main.default.Vector(this.upX, this.upY, this.upZ);
+ // side vector. Right when viewed from the front. (like x-axis)
+ var side = new _main.default.Vector.cross(up, front).normalize();
+ // down vector. Bottom when viewed from the front. (like y-axis)
+ var down = new _main.default.Vector.cross(front, side);
+ // side vector and down vector are no longer used as-is.
+ // Create a vector representing the direction of rotation
+ // in the form cos(direction)*side + sin(direction)*down.
+ // Make the current side vector into this.
+ var directionAngle = Math.atan2(dy, dx);
+ down.mult(Math.sin(directionAngle));
+ side.mult(Math.cos(directionAngle)).add(down);
+ // The amount of rotation is the size of the vector (dx, dy).
+ var rotAngle = Math.sqrt(dx * dx + dy * dy);
+ // The vector that is orthogonal to both the front vector and
+ // the rotation direction vector is the rotation axis vector.
+ var axis = new _main.default.Vector.cross(front, side);
+ // update camRadius
+ camRadius *= Math.pow(10, dRadius);
+ // prevent zooming through the center:
+ if (camRadius < this.cameraNear) {
+ camRadius = this.cameraNear;
+ }
+ if (camRadius > this.cameraFar) {
+ camRadius = this.cameraFar;
+ } // If the axis vector is likened to the z-axis, the front vector is
+ // the x-axis and the side vector is the y-axis. Rotate the up and front
+ // vectors respectively by thinking of them as rotations around the z-axis.
+ // Calculate the components by taking the dot product and
+ // calculate a rotation based on that.
+
+ var c = Math.cos(rotAngle);
+ var s = Math.sin(rotAngle);
+ var dotFront = up.dot(front);
+ var dotSide = up.dot(side);
+ var ux = dotFront * c + dotSide * s;
+ var uy = - dotFront * s + dotSide * c;
+ var uz = up.dot(axis);
+ up.x = ux * front.x + uy * side.x + uz * axis.x;
+ up.y = ux * front.y + uy * side.y + uz * axis.y;
+ up.z = ux * front.z + uy * side.z + uz * axis.z;
+ // We won't be using the side vector and the front vector anymore,
+ // so let's make the front vector into the vector from the center to the new eye.
+ side.mult( - s);
+ front.mult(c).add(side).mult(camRadius);
+ // it's complete. let's update camera.
+ this.camera(front.x + this.centerX, front.y + this.centerY, front.z + this.centerZ, this.centerX, this.centerY, this.centerZ, up.x, up.y, up.z);
+ } /**
+ * Returns true if camera is currently attached to renderer.
+ * @method _isActive
+ * @private
+ */
+
+ },
+ {
+ key: '_isActive',
+ value: function _isActive() {
+ return this === this._renderer._curCamera;
+ }
+ }
+ ]);
+ return Camera;
+ }();
+ /**
+ * Sets the current (active) camera of a 3D sketch.
+ * Allows for switching between multiple cameras.
+ * @method setCamera
+ * @param {p5.Camera} cam p5.Camera object
+ * @for p5
+ * @example
+ *
+ * let cam, lastCam, initialCam;
+ * let countForReset = 30;
+ * // This sample uses orbitControl() to move the camera.
+ * // Double-clicking the canvas restores the camera to its initial state.
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * strokeWeight(3);
+ *
+ * cam = createCamera(); // main camera
+ * lastCam = createCamera(); // Camera for recording loc info before reset
+ * initialCam = createCamera(); // Camera for recording the initial state
+ *
+ * setCamera(cam); // set main camera
+ * }
+ *
+ * function draw() {
+ * if (countForReset < 30) {
+ * // if the reset count is less than 30,
+ * // it will move closer to the original camera as it increases.
+ * countForReset++;
+ * cam.slerp(lastCam, initialCam, countForReset / 30);
+ * } else {
+ * // if the count is 30,
+ * // you can freely move the main camera with orbitControl().
+ * orbitControl();
+ * }
+ *
+ * background(255);
+ * box(40);
+ * }
+ * // A double-click sets countForReset to 0 and initiates a reset.
+ * function doubleClicked() {
+ * if (countForReset === 30) {
+ * countForReset = 0;
+ * lastCam.set(cam);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * @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': 298,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.math.hypot': 188,
+ 'core-js/modules/es.string.sub': 218
+ }
+ ],
+ 348: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.log2');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.math.log2');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * An internal class to store data that will be sent to a p5.RenderBuffer.
+ * Those need to eventually go into a Float32Array, so this class provides a
+ * variable-length array container backed by a Float32Array so that it can be
+ * sent to the GPU without allocating a new array each frame.
+ *
+ * Like a C++ vector, its fixed-length Float32Array backing its contents will
+ * double in size when it goes over its capacity.
+ *
+ * @example
+ *
+ * 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);
+ * }
+ *
+ *
+ *
+ */
+
+ _main.default.DataArray = /*#__PURE__*/ function () {
+ function DataArray() {
+ var initialLength = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 128;
+ _classCallCheck(this, DataArray);
+ this.length = 0;
+ this.data = new Float32Array(initialLength);
+ this.initialLength = initialLength;
+ } /**
+ * Returns a Float32Array window sized to the exact length of the data
+ */
+
+ _createClass(DataArray, [
+ {
+ key: 'dataArray',
+ value: function dataArray() {
+ return this.subArray(0, this.length);
+ } /**
+ * A "soft" clear, which keeps the underlying storage size the same, but
+ * empties the contents of its dataArray()
+ */
+
+ },
+ {
+ key: 'clear',
+ value: function clear() {
+ this.length = 0;
+ } /**
+ * Can be used to scale a DataArray back down to fit its contents.
+ */
+
+ },
+ {
+ key: 'rescale',
+ value: function rescale() {
+ if (this.length < this.data.length / 2) {
+ // Find the power of 2 size that fits the data
+ var targetLength = 1 << Math.ceil(Math.log2(this.length));
+ var newData = new Float32Array(targetLength);
+ newData.set(this.data.subarray(0, this.length), 0);
+ this.data = newData;
+ }
+ } /**
+ * A full reset, which allocates a new underlying Float32Array at its initial
+ * length
+ */
+
+ },
+ {
+ key: 'reset',
+ value: function reset() {
+ this.clear();
+ this.data = new Float32Array(this.initialLength);
+ } /**
+ * Adds values to the DataArray, expanding its internal storage to
+ * accommodate the new items.
+ */
+
+ },
+ {
+ key: 'push',
+ value: function push() {
+ for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+ values[_key] = arguments[_key];
+ }
+ this.ensureLength(this.length + values.length);
+ this.data.set(values, this.length);
+ this.length += values.length;
+ } /**
+ * Returns a copy of the data from the index `from`, inclusive, to the index
+ * `to`, exclusive
+ */
+
+ },
+ {
+ key: 'slice',
+ value: function slice(from, to) {
+ return this.data.slice(from, Math.min(to, this.length));
+ } /**
+ * Returns a mutable Float32Array window from the index `from`, inclusive, to
+ * the index `to`, exclusive
+ */
+
+ },
+ {
+ key: 'subArray',
+ value: function subArray(from, to) {
+ return this.data.subarray(from, Math.min(to, this.length));
+ } /**
+ * Expand capacity of the internal storage until it can fit a target size
+ */
+
+ },
+ {
+ key: 'ensureLength',
+ value: function ensureLength(target) {
+ while (this.data.length < target) {
+ var newData = new Float32Array(this.data.length * 2);
+ newData.set(this.data, 0);
+ this.data = newData;
+ }
+ }
+ }
+ ]);
+ return DataArray;
+ }();
+ var _default = _main.default.DataArray;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.math.log2': 189,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.float32-array': 229,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249
+ }
+ ],
+ 349: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.reflect.get');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.includes');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-clamped-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _p = _dereq_('./p5.Texture');
+ var _p2 = _dereq_('./p5.RendererGL');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _slicedToArray(arr, i) {
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+ }
+ function _nonIterableRest() {
+ throw new TypeError('Invalid attempt to destructure non-iterable instance');
+ }
+ function _iterableToArrayLimit(arr, i) {
+ if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === '[object Arguments]')) {
+ return;
+ }
+ var _arr = [
+ ];
+ var _n = true;
+ var _d = false;
+ var _e = undefined;
+ try {
+ for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+ _arr.push(_s.value);
+ if (i && _arr.length === i) break;
+ }
+ } catch (err) {
+ _d = true;
+ _e = err;
+ } finally {
+ try {
+ if (!_n && _i['return'] != null) _i['return']();
+ } finally {
+ if (_d) throw _e;
+ }
+ }
+ return _arr;
+ }
+ function _arrayWithHoles(arr) {
+ if (Array.isArray(arr)) return arr;
+ }
+ function _defineProperty(obj, key, value) {
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+ return obj;
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _get(target, property, receiver) {
+ if (typeof Reflect !== 'undefined' && Reflect.get) {
+ _get = Reflect.get;
+ } else {
+ _get = function _get(target, property, receiver) {
+ var base = _superPropBase(target, property);
+ if (!base) return;
+ var desc = Object.getOwnPropertyDescriptor(base, property);
+ if (desc.get) {
+ return desc.get.call(receiver);
+ }
+ return desc.value;
+ };
+ }
+ return _get(target, property, receiver || target);
+ }
+ function _superPropBase(object, property) {
+ while (!Object.prototype.hasOwnProperty.call(object, property)) {
+ object = _getPrototypeOf(object);
+ if (object === null) break;
+ }
+ return object;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ } /**
+ * @module Rendering
+ * @requires constants
+ */
+
+ var FramebufferCamera = /*#__PURE__*/ function (_p5$Camera) {
+ _inherits(FramebufferCamera, _p5$Camera);
+ var _super = _createSuper(FramebufferCamera);
+ /**
+ * A p5.Camera attached to a
+ * p5.Framebuffer.
+ *
+ * @class p5.FramebufferCamera
+ * @constructor
+ * @param {p5.Framebuffer} framebuffer The framebuffer this camera is
+ * attached to
+ * @private
+ */
+ function FramebufferCamera(framebuffer) {
+ var _this;
+ _classCallCheck(this, FramebufferCamera);
+ _this = _super.call(this, framebuffer.target._renderer);
+ _this.fbo = framebuffer;
+ // WebGL textures are upside-down compared to textures that come from
+ // images and graphics. Framebuffer cameras need to invert their y
+ // axes when being rendered to so that the texture comes out rightway up
+ // when read in shaders or image().
+ _this.yScale = - 1;
+ return _this;
+ }
+ _createClass(FramebufferCamera, [
+ {
+ key: '_computeCameraDefaultSettings',
+ value: function _computeCameraDefaultSettings() {
+ _get(_getPrototypeOf(FramebufferCamera.prototype), '_computeCameraDefaultSettings', this).call(this);
+ this.defaultAspectRatio = this.fbo.width / this.fbo.height;
+ this.defaultEyeZ = this.fbo.height / 2 / Math.tan(this.defaultCameraFOV / 2);
+ this.defaultCameraNear = this.defaultEyeZ * 0.1;
+ this.defaultCameraFar = this.defaultEyeZ * 10;
+ } /**
+ * Resets the camera to a default perspective camera sized to match
+ * the p5.Framebuffer it is attached to.
+ *
+ * @method resize
+ * @private
+ */
+
+ },
+ {
+ key: '_resize',
+ value: function _resize() {
+ // 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.fbo.width / this.fbo.height);
+ }
+ }
+ }
+ ]);
+ return FramebufferCamera;
+ }(_main.default.Camera);
+ _main.default.FramebufferCamera = FramebufferCamera;
+ var FramebufferTexture = /*#__PURE__*/ function () {
+ /**
+ * A p5.Texture corresponding to a property of a
+ * p5.Framebuffer.
+ *
+ * @class p5.FramebufferTexture
+ * @param {p5.Framebuffer} framebuffer The framebuffer represented by this
+ * texture
+ * @param {String} property The property of the framebuffer represented by
+ * this texture, either `color` or `depth`
+ * @private
+ */
+ function FramebufferTexture(framebuffer, property) {
+ _classCallCheck(this, FramebufferTexture);
+ this.framebuffer = framebuffer;
+ this.property = property;
+ }
+ _createClass(FramebufferTexture, [
+ {
+ key: 'rawTexture',
+ value: function rawTexture() {
+ return this.framebuffer[this.property];
+ }
+ },
+ {
+ key: 'width',
+ get: function get() {
+ return this.framebuffer.width * this.framebuffer.density;
+ }
+ },
+ {
+ key: 'height',
+ get: function get() {
+ return this.framebuffer.height * this.framebuffer.density;
+ }
+ }
+ ]);
+ return FramebufferTexture;
+ }();
+ _main.default.FramebufferTexture = FramebufferTexture;
+ var Framebuffer = /*#__PURE__*/ function () {
+ /**
+ * An object that one can draw to and then read as a texture. While similar
+ * to a p5.Graphics, using a p5.Framebuffer as a texture will generally run
+ * much faster, as it lives within the same WebGL context as the canvas it
+ * is created on. It only works in WebGL mode.
+ *
+ * @class p5.Framebuffer
+ * @constructor
+ * @param {p5.Graphics|p5} target A p5 global instance or p5.Graphics
+ * @param {Object} [settings] A settings object
+ */
+ function Framebuffer(target) {
+ var _this2 = this;
+ var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+ };
+ _classCallCheck(this, Framebuffer);
+ this.target = target;
+ this.target._renderer.framebuffers.add(this);
+ this._isClipApplied = false;
+ /**
+ * A Uint8ClampedArray
+ * containing the values for all the pixels in the Framebuffer.
+ *
+ * Like the main canvas pixels property, call
+ * loadPixels() before reading
+ * it, and call updatePixels()
+ * afterwards to update its data.
+ *
+ * Note that updating pixels via this property will be slower than
+ * drawing to the framebuffer directly.
+ * Consider using a shader instead of looping over pixels.
+ *
+ * @property {Number[]} pixels
+ */
+ this.pixels = [
+ ];
+ this.format = settings.format || constants.UNSIGNED_BYTE;
+ this.channels = settings.channels || (target._renderer._pInst._glAttributes.alpha ? constants.RGBA : constants.RGB);
+ this.useDepth = settings.depth === undefined ? true : settings.depth;
+ this.depthFormat = settings.depthFormat || constants.FLOAT;
+ this.textureFiltering = settings.textureFiltering || constants.LINEAR;
+ if (settings.antialias === undefined) {
+ this.antialiasSamples = target._renderer._pInst._glAttributes.antialias ? 2 : 0;
+ } else if (typeof settings.antialias === 'number') {
+ this.antialiasSamples = settings.antialias;
+ } else {
+ this.antialiasSamples = settings.antialias ? 2 : 0;
+ }
+ this.antialias = this.antialiasSamples > 0;
+ if (this.antialias && target.webglVersion !== constants.WEBGL2) {
+ console.warn('Antialiasing is unsupported in a WebGL 1 context');
+ this.antialias = false;
+ }
+ if (settings.width && settings.height) {
+ this.width = settings.width;
+ this.height = settings.height;
+ this.autoSized = false;
+ } else {
+ if (settings.width === undefined !== (settings.height === undefined)) {
+ console.warn('Please supply both width and height for a framebuffer to give it a ' + 'size. Only one was given, so the framebuffer will match the size ' + 'of its canvas.');
+ }
+ this.width = target.width;
+ this.height = target.height;
+ this.autoSized = true;
+ }
+ this.density = settings.density || target.pixelDensity();
+ var gl = target._renderer.GL;
+ this.gl = gl;
+ this._checkIfFormatsAvailable();
+ if (settings.stencil && !this.useDepth) {
+ console.warn('A stencil buffer can only be used if also using depth. Since the framebuffer has no depth buffer, the stencil buffer will be ignored.');
+ }
+ this.useStencil = this.useDepth && (settings.stencil === undefined ? true : settings.stencil);
+ this.framebuffer = gl.createFramebuffer();
+ if (!this.framebuffer) {
+ throw new Error('Unable to create a framebuffer');
+ }
+ if (this.antialias) {
+ this.aaFramebuffer = gl.createFramebuffer();
+ if (!this.aaFramebuffer) {
+ throw new Error('Unable to create a framebuffer for antialiasing');
+ }
+ }
+ this._recreateTextures();
+ var prevCam = this.target._renderer._curCamera;
+ this.defaultCamera = this.createCamera();
+ this.target._renderer._curCamera = prevCam;
+ this.draw(function () {
+ return _this2.target.clear();
+ });
+ } /**
+ * Resizes the framebuffer to the given width and height.
+ *
+ * @method resize
+ * @param {Number} width
+ * @param {Number} height
+ *
+ * @example
+ *
+ * // Initialize storage with a capacity of 4
+ * const storage = new DataArray(4);
+ * console.log(storage.data.length); // 4
+ * console.log(storage.length); // 0
+ * console.log(storage.dataArray()); // Empty Float32Array
+ *
+ * storage.push(1, 2, 3, 4, 5, 6);
+ * console.log(storage.data.length); // 8
+ * console.log(storage.length); // 6
+ * console.log(storage.dataArray()); // Float32Array{1, 2, 3, 4, 5, 6}
+ *
+ *
+ *
+ *
+ * @alt
+ * A red, green, and blue sphere is drawn in the middle of a white rectangle
+ * which starts in the top left of the canvas and whose bottom right is at
+ * the user's mouse
+ */
+
+ _createClass(Framebuffer, [
+ {
+ key: 'resize',
+ value: function resize(width, height) {
+ this.autoSized = false;
+ this.width = width;
+ this.height = height;
+ this._handleResize();
+ } /**
+ * Gets or sets the pixel scaling for high pixel density displays. By
+ * default, the density will match that of the canvas the framebuffer was
+ * created on, which will match the display density.
+ *
+ * Call this method with no arguments to get the current density, or pass
+ * in a number to set the density.
+ *
+ * @method pixelDensity
+ * @param {Number} [density] A scaling factor for the number of pixels per
+ * side of the framebuffer
+ */
+
+ },
+ {
+ key: 'pixelDensity',
+ value: function pixelDensity(density) {
+ if (density) {
+ this.autoSized = false;
+ this.density = density;
+ this._handleResize();
+ } else {
+ return this.density;
+ }
+ } /**
+ * Gets or sets whether or not this framebuffer will automatically resize
+ * along with the canvas it's attached to in order to match its size.
+ *
+ * Call this method with no arguments to see if it is currently auto-sized,
+ * or pass in a boolean to set this property.
+ *
+ * @method autoSized
+ * @param {Boolean} [autoSized] Whether or not the framebuffer should resize
+ * along with the canvas it's attached to
+ */
+
+ },
+ {
+ key: 'autoSized',
+ value: function autoSized(_autoSized) {
+ if (_autoSized === undefined) {
+ return this.autoSized;
+ } else {
+ this.autoSized = _autoSized;
+ this._handleResize();
+ }
+ } /**
+ * Checks the capabilities of the current WebGL environment to see if the
+ * settings supplied by the user are capable of being fulfilled. If they
+ * are not, warnings will be logged and the settings will be changed to
+ * something close that can be fulfilled.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_checkIfFormatsAvailable',
+ value: function _checkIfFormatsAvailable() {
+ var gl = this.gl;
+ if (this.useDepth && this.target.webglVersion === constants.WEBGL && !gl.getExtension('WEBGL_depth_texture')) {
+ console.warn('Unable to create depth textures in this environment. Falling back ' + 'to a framebuffer without depth.');
+ this.useDepth = false;
+ }
+ if (this.useDepth && this.target.webglVersion === constants.WEBGL && this.depthFormat === constants.FLOAT) {
+ console.warn('FLOAT depth format is unavailable in WebGL 1. ' + 'Defaulting to UNSIGNED_INT.');
+ this.depthFormat = constants.UNSIGNED_INT;
+ }
+ if (![constants.UNSIGNED_BYTE,
+ constants.FLOAT,
+ constants.HALF_FLOAT].includes(this.format)) {
+ console.warn('Unknown Framebuffer format. ' + 'Please use UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. ' + 'Defaulting to UNSIGNED_BYTE.');
+ this.format = constants.UNSIGNED_BYTE;
+ }
+ if (this.useDepth && ![constants.UNSIGNED_INT,
+ constants.FLOAT].includes(this.depthFormat)) {
+ console.warn('Unknown Framebuffer depth format. ' + 'Please use UNSIGNED_INT or FLOAT. Defaulting to FLOAT.');
+ this.depthFormat = constants.FLOAT;
+ }
+ var support = (0, _p.checkWebGLCapabilities) (this.target._renderer);
+ if (!support.float && this.format === constants.FLOAT) {
+ console.warn('This environment does not support FLOAT textures. ' + 'Falling back to UNSIGNED_BYTE.');
+ this.format = constants.UNSIGNED_BYTE;
+ }
+ if (this.useDepth && !support.float && this.depthFormat === constants.FLOAT) {
+ console.warn('This environment does not support FLOAT depth textures. ' + 'Falling back to UNSIGNED_INT.');
+ this.depthFormat = constants.UNSIGNED_INT;
+ }
+ if (!support.halfFloat && this.format === constants.HALF_FLOAT) {
+ console.warn('This environment does not support HALF_FLOAT textures. ' + 'Falling back to UNSIGNED_BYTE.');
+ this.format = constants.UNSIGNED_BYTE;
+ }
+ if (this.channels === constants.RGB && [
+ constants.FLOAT,
+ constants.HALF_FLOAT
+ ].includes(this.format)) {
+ console.warn('FLOAT and HALF_FLOAT formats do not work cross-platform with only ' + 'RGB channels. Falling back to RGBA.');
+ this.channels = constants.RGBA;
+ }
+ } /**
+ * Creates new textures and renderbuffers given the current size of the
+ * framebuffer.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_recreateTextures',
+ value: function _recreateTextures() {
+ var gl = this.gl;
+ this._updateSize();
+ var prevBoundTexture = gl.getParameter(gl.TEXTURE_BINDING_2D);
+ var prevBoundFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+ var colorTexture = gl.createTexture();
+ if (!colorTexture) {
+ throw new Error('Unable to create color texture');
+ }
+ gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+ var colorFormat = this._glColorFormat();
+ gl.texImage2D(gl.TEXTURE_2D, 0, colorFormat.internalFormat, this.width * this.density, this.height * this.density, 0, colorFormat.format, colorFormat.type, null);
+ this.colorTexture = colorTexture;
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+ gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);
+ if (this.useDepth) {
+ // Create the depth texture
+ var depthTexture = gl.createTexture();
+ if (!depthTexture) {
+ throw new Error('Unable to create depth texture');
+ }
+ var depthFormat = this._glDepthFormat();
+ gl.bindTexture(gl.TEXTURE_2D, depthTexture);
+ gl.texImage2D(gl.TEXTURE_2D, 0, depthFormat.internalFormat, this.width * this.density, this.height * this.density, 0, depthFormat.format, depthFormat.type, null);
+ gl.framebufferTexture2D(gl.FRAMEBUFFER, this.useStencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
+ this.depthTexture = depthTexture;
+ } // Create separate framebuffer for antialiasing
+
+ if (this.antialias) {
+ this.colorRenderbuffer = gl.createRenderbuffer();
+ gl.bindRenderbuffer(gl.RENDERBUFFER, this.colorRenderbuffer);
+ gl.renderbufferStorageMultisample(gl.RENDERBUFFER, Math.max(0, Math.min(this.antialiasSamples, gl.getParameter(gl.MAX_SAMPLES))), colorFormat.internalFormat, this.width * this.density, this.height * this.density);
+ if (this.useDepth) {
+ var _depthFormat = this._glDepthFormat();
+ this.depthRenderbuffer = gl.createRenderbuffer();
+ gl.bindRenderbuffer(gl.RENDERBUFFER, this.depthRenderbuffer);
+ gl.renderbufferStorageMultisample(gl.RENDERBUFFER, Math.max(0, Math.min(this.antialiasSamples, gl.getParameter(gl.MAX_SAMPLES))), _depthFormat.internalFormat, this.width * this.density, this.height * this.density);
+ }
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer);
+ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, this.colorRenderbuffer);
+ if (this.useDepth) {
+ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, this.useStencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.depthRenderbuffer);
+ }
+ }
+ if (this.useDepth) {
+ this.depth = new FramebufferTexture(this, 'depthTexture');
+ var depthFilter = gl.NEAREST;
+ this.depthP5Texture = new _main.default.Texture(this.target._renderer, this.depth, {
+ minFilter: depthFilter,
+ magFilter: depthFilter
+ });
+ this.target._renderer.textures.set(this.depth, this.depthP5Texture);
+ }
+ this.color = new FramebufferTexture(this, 'colorTexture');
+ var filter = this.textureFiltering === constants.LINEAR ? gl.LINEAR : gl.NEAREST;
+ this.colorP5Texture = new _main.default.Texture(this.target._renderer, this.color, {
+ minFilter: filter,
+ magFilter: filter
+ });
+ this.target._renderer.textures.set(this.color, this.colorP5Texture);
+ gl.bindTexture(gl.TEXTURE_2D, prevBoundTexture);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevBoundFramebuffer);
+ } /**
+ * To create a WebGL texture, one needs to supply three pieces of information:
+ * the type (the data type each channel will be stored as, e.g. int or float),
+ * the format (the color channels that will each be stored in the previously
+ * specified type, e.g. rgb or rgba), and the internal format (the specifics
+ * of how data for each channel, in the aforementioned type, will be packed
+ * together, such as how many bits to use, e.g. RGBA32F or RGB565.)
+ *
+ * The format and channels asked for by the user hint at what these values
+ * need to be, and the WebGL version affects what options are avaiable.
+ * This method returns the values for these three properties, given the
+ * framebuffer's settings.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_glColorFormat',
+ value: function _glColorFormat() {
+ var type,
+ format,
+ internalFormat;
+ var gl = this.gl;
+ if (this.format === constants.FLOAT) {
+ type = gl.FLOAT;
+ } else if (this.format === constants.HALF_FLOAT) {
+ type = this.target.webglVersion === constants.WEBGL2 ? gl.HALF_FLOAT : gl.getExtension('OES_texture_half_float').HALF_FLOAT_OES;
+ } else {
+ type = gl.UNSIGNED_BYTE;
+ }
+ if (this.channels === constants.RGBA) {
+ format = gl.RGBA;
+ } else {
+ format = gl.RGB;
+ }
+ if (this.target.webglVersion === constants.WEBGL2) {
+ var _gl$UNSIGNED_BYTE,
+ _table;
+ // https://webgl2fundamentals.org/webgl/lessons/webgl-data-textures.html
+ var table = (_table = {
+ }, _defineProperty(_table, gl.FLOAT, _defineProperty({
+ }, gl.RGBA, gl.RGBA32F)), _defineProperty(_table, gl.HALF_FLOAT, _defineProperty({
+ }, gl.RGBA, gl.RGBA16F)), _defineProperty(_table, gl.UNSIGNED_BYTE, (_gl$UNSIGNED_BYTE = {
+ }, _defineProperty(_gl$UNSIGNED_BYTE, gl.RGBA, gl.RGBA8), _defineProperty(_gl$UNSIGNED_BYTE, gl.RGB, gl.RGB8), _gl$UNSIGNED_BYTE)), _table);
+ internalFormat = table[type][format];
+ } else if (this.format === constants.HALF_FLOAT) {
+ internalFormat = gl.RGBA;
+ } else {
+ internalFormat = format;
+ }
+ return {
+ internalFormat: internalFormat,
+ format: format,
+ type: type
+ };
+ } /**
+ * To create a WebGL texture, one needs to supply three pieces of information:
+ * the type (the data type each channel will be stored as, e.g. int or float),
+ * the format (the color channels that will each be stored in the previously
+ * specified type, e.g. rgb or rgba), and the internal format (the specifics
+ * of how data for each channel, in the aforementioned type, will be packed
+ * together, such as how many bits to use, e.g. RGBA32F or RGB565.)
+ *
+ * This method takes into account the settings asked for by the user and
+ * returns values for these three properties that can be used for the
+ * texture storing depth information.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_glDepthFormat',
+ value: function _glDepthFormat() {
+ var type,
+ format,
+ internalFormat;
+ var gl = this.gl;
+ if (this.useStencil) {
+ if (this.depthFormat === constants.FLOAT) {
+ type = gl.FLOAT_32_UNSIGNED_INT_24_8_REV;
+ } else if (this.target.webglVersion === constants.WEBGL2) {
+ type = gl.UNSIGNED_INT_24_8;
+ } else {
+ type = gl.getExtension('WEBGL_depth_texture').UNSIGNED_INT_24_8_WEBGL;
+ }
+ } else {
+ if (this.depthFormat === constants.FLOAT) {
+ type = gl.FLOAT;
+ } else {
+ type = gl.UNSIGNED_INT;
+ }
+ }
+ if (this.useStencil) {
+ format = gl.DEPTH_STENCIL;
+ } else {
+ format = gl.DEPTH_COMPONENT;
+ }
+ if (this.useStencil) {
+ if (this.depthFormat === constants.FLOAT) {
+ internalFormat = gl.DEPTH32F_STENCIL8;
+ } else if (this.target.webglVersion === constants.WEBGL2) {
+ internalFormat = gl.DEPTH24_STENCIL8;
+ } else {
+ internalFormat = gl.DEPTH_STENCIL;
+ }
+ } else if (this.target.webglVersion === constants.WEBGL2) {
+ if (this.depthFormat === constants.FLOAT) {
+ internalFormat = gl.DEPTH_COMPONENT32F;
+ } else {
+ internalFormat = gl.DEPTH_COMPONENT24;
+ }
+ } else {
+ internalFormat = gl.DEPTH_COMPONENT;
+ }
+ return {
+ internalFormat: internalFormat,
+ format: format,
+ type: type
+ };
+ } /**
+ * A method that will be called when recreating textures. If the framebuffer
+ * is auto-sized, it will update its width, height, and density properties.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_updateSize',
+ value: function _updateSize() {
+ if (this.autoSized) {
+ this.width = this.target.width;
+ this.height = this.target.height;
+ this.density = this.target.pixelDensity();
+ }
+ } /**
+ * Called when the canvas that the framebuffer is attached to resizes. If the
+ * framebuffer is auto-sized, it will update its textures to match the new
+ * size.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_canvasSizeChanged',
+ value: function _canvasSizeChanged() {
+ if (this.autoSized) {
+ this._handleResize();
+ }
+ } /**
+ * Called when the size of the framebuffer has changed (either by being
+ * manually updated or from auto-size updates when its canvas changes size.)
+ * Old textures and renderbuffers will be deleted, and then recreated with the
+ * new size.
+ *
+ * @private
+ */
+
+ },
+ {
+ key: '_handleResize',
+ value: function _handleResize() {
+ var oldColor = this.color;
+ var oldDepth = this.depth;
+ var oldColorRenderbuffer = this.colorRenderbuffer;
+ var oldDepthRenderbuffer = this.depthRenderbuffer;
+ this._deleteTexture(oldColor);
+ if (oldDepth) this._deleteTexture(oldDepth);
+ var gl = this.gl;
+ if (oldColorRenderbuffer) gl.deleteRenderbuffer(oldColorRenderbuffer);
+ if (oldDepthRenderbuffer) gl.deleteRenderbuffer(oldDepthRenderbuffer);
+ this._recreateTextures();
+ this.defaultCamera._resize();
+ } /**
+ * Creates and returns a new
+ * p5.FramebufferCamera to be used
+ * while drawing to this framebuffer. The camera will be set as the
+ * currently active camera.
+ *
+ * @method createCamera
+ * @returns {p5.Camera} A new camera
+ */
+
+ },
+ {
+ key: 'createCamera',
+ value: function createCamera() {
+ var cam = new FramebufferCamera(this);
+ cam._computeCameraDefaultSettings();
+ cam._setDefaultCamera();
+ this.target._renderer._curCamera = cam;
+ return cam;
+ } /**
+ * Given a raw texture wrapper, delete its stored texture from WebGL memory,
+ * and remove it from p5's list of active textures.
+ *
+ * @param {p5.FramebufferTexture} texture
+ * @private
+ */
+
+ },
+ {
+ key: '_deleteTexture',
+ value: function _deleteTexture(texture) {
+ var gl = this.gl;
+ gl.deleteTexture(texture.rawTexture());
+ this.target._renderer.textures.delete(texture);
+ } /**
+ * Removes the framebuffer and frees its resources.
+ *
+ * @method remove
+ *
+ * @example
+ *
+ * let framebuffer;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * framebuffer = createFramebuffer();
+ * noStroke();
+ * }
+ *
+ * function mouseMoved() {
+ * framebuffer.resize(
+ * max(20, mouseX),
+ * max(20, mouseY)
+ * );
+ * }
+ *
+ * function draw() {
+ * // Draw to the framebuffer
+ * framebuffer.begin();
+ * background(255);
+ * normalMaterial();
+ * sphere(20);
+ * framebuffer.end();
+ *
+ * background(100);
+ * // Draw the framebuffer to the main canvas
+ * image(framebuffer, -width/2, -height/2);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A rotating red cube blinks on and off every second.
+ */
+
+ },
+ {
+ key: 'remove',
+ value: function remove() {
+ var gl = this.gl;
+ this._deleteTexture(this.color);
+ if (this.depth) this._deleteTexture(this.depth);
+ gl.deleteFramebuffer(this.framebuffer);
+ if (this.aaFramebuffer) {
+ gl.deleteFramebuffer(this.aaFramebuffer);
+ }
+ if (this.depthRenderbuffer) {
+ gl.deleteRenderbuffer(this.depthRenderbuffer);
+ }
+ if (this.colorRenderbuffer) {
+ gl.deleteRenderbuffer(this.colorRenderbuffer);
+ }
+ this.target._renderer.framebuffers.delete(this);
+ } /**
+ * Begin drawing to this framebuffer. Subsequent drawing functions to the
+ * canvas the framebuffer is attached to will not be immediately visible, and
+ * will instead be drawn to the framebuffer's texture. Call
+ * end() when finished to make draw
+ * functions go right to the canvas again and to be able to read the
+ * contents of the framebuffer's texture.
+ *
+ * @method begin
+ *
+ * @example
+ *
+ * let framebuffer;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * const useFramebuffer = (frameCount % 120) > 60;
+ * if (useFramebuffer && !framebuffer) {
+ * // Create a new framebuffer for us to use
+ * framebuffer = createFramebuffer();
+ * } else if (!useFramebuffer && framebuffer) {
+ * // Free the old framebuffer's resources
+ * framebuffer.remove();
+ * framebuffer = undefined;
+ * }
+ *
+ * background(255);
+ * if (useFramebuffer) {
+ * // Draw to the framebuffer
+ * framebuffer.begin();
+ * background(255);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * fill(255, 0, 0);
+ * box(30);
+ * framebuffer.end();
+ *
+ * image(framebuffer, -width/2, -height/2);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A video of a floating and rotating red cube is pasted twice on the
+ * canvas: once in the top left, and again, larger, in the bottom right.
+ */
+
+ },
+ {
+ key: 'begin',
+ value: function begin() {
+ this.prevFramebuffer = this.target._renderer.activeFramebuffer();
+ if (this.prevFramebuffer) {
+ this.prevFramebuffer._beforeEnd();
+ }
+ this.target._renderer.activeFramebuffers.push(this);
+ this._beforeBegin();
+ this.target.push();
+ // Apply the framebuffer's camera. This does almost what
+ // RendererGL.reset() does, but this does not try to clear any buffers;
+ // it only sets the camera.
+ this.target.setCamera(this.defaultCamera);
+ this.target._renderer.uMVMatrix.set(this.target._renderer._curCamera.cameraMatrix.mat4[0], this.target._renderer._curCamera.cameraMatrix.mat4[1], this.target._renderer._curCamera.cameraMatrix.mat4[2], this.target._renderer._curCamera.cameraMatrix.mat4[3], this.target._renderer._curCamera.cameraMatrix.mat4[4], this.target._renderer._curCamera.cameraMatrix.mat4[5], this.target._renderer._curCamera.cameraMatrix.mat4[6], this.target._renderer._curCamera.cameraMatrix.mat4[7], this.target._renderer._curCamera.cameraMatrix.mat4[8], this.target._renderer._curCamera.cameraMatrix.mat4[9], this.target._renderer._curCamera.cameraMatrix.mat4[10], this.target._renderer._curCamera.cameraMatrix.mat4[11], this.target._renderer._curCamera.cameraMatrix.mat4[12], this.target._renderer._curCamera.cameraMatrix.mat4[13], this.target._renderer._curCamera.cameraMatrix.mat4[14], this.target._renderer._curCamera.cameraMatrix.mat4[15]);
+ } /**
+ * When making a p5.Framebuffer active so that it may be drawn to, this method
+ * returns the underlying WebGL framebuffer that needs to be active to
+ * support this. Antialiased framebuffers first write to a multisampled
+ * renderbuffer, while other framebuffers can write directly to their main
+ * framebuffers.
+ *
+ * @method _framebufferToBind
+ * @private
+ */
+
+ },
+ {
+ key: '_framebufferToBind',
+ value: function _framebufferToBind() {
+ if (this.antialias) {
+ // If antialiasing, draw to an antialiased renderbuffer rather
+ // than directly to the texture. In end() we will copy from the
+ // renderbuffer to the texture.
+ return this.aaFramebuffer;
+ } else {
+ return this.framebuffer;
+ }
+ } /**
+ * Ensures that the framebuffer is ready to be drawn to
+ *
+ * @method _beforeBegin
+ * @private
+ */
+
+ },
+ {
+ key: '_beforeBegin',
+ value: function _beforeBegin() {
+ var gl = this.gl;
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebufferToBind());
+ this.target._renderer.viewport(this.width * this.density, this.height * this.density);
+ } /**
+ * Ensures that the framebuffer is ready to be read by other framebuffers.
+ *
+ * @method _beforeEnd
+ * @private
+ */
+
+ },
+ {
+ key: '_beforeEnd',
+ value: function _beforeEnd() {
+ if (this.antialias) {
+ var gl = this.gl;
+ gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.aaFramebuffer);
+ gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
+ var partsToCopy = [
+ [gl.COLOR_BUFFER_BIT,
+ this.colorP5Texture.glMagFilter]
+ ];
+ if (this.useDepth) {
+ partsToCopy.push([gl.DEPTH_BUFFER_BIT,
+ this.depthP5Texture.glMagFilter]);
+ }
+ for (var _i = 0, _partsToCopy = partsToCopy; _i < _partsToCopy.length; _i++) {
+ var _partsToCopy$_i = _slicedToArray(_partsToCopy[_i], 2),
+ flag = _partsToCopy$_i[0],
+ filter = _partsToCopy$_i[1];
+ gl.blitFramebuffer(0, 0, this.width * this.density, this.height * this.density, 0, 0, this.width * this.density, this.height * this.density, flag, filter);
+ }
+ }
+ } /**
+ * After having previously called
+ * begin(), this method stops drawing
+ * functions from going to the framebuffer's texture, allowing them to go
+ * right to the canvas again. After this, one can read from the framebuffer's
+ * texture.
+ *
+ * @method end
+ */
+
+ },
+ {
+ key: 'end',
+ value: function end() {
+ var gl = this.gl;
+ this.target.pop();
+ var fbo = this.target._renderer.activeFramebuffers.pop();
+ if (fbo !== this) {
+ throw new Error('It looks like you\'ve called end() while another Framebuffer is active.');
+ }
+ this._beforeEnd();
+ if (this.prevFramebuffer) {
+ this.prevFramebuffer._beforeBegin();
+ } else {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+ this.target._renderer.viewport(this.target._renderer._origViewport.width, this.target._renderer._origViewport.height);
+ }
+ this.target._renderer._applyStencilTestIfClipping();
+ } /**
+ * Run a function while drawing to the framebuffer rather than to its canvas.
+ * This is equivalent to calling `framebuffer.begin()`, running the function,
+ * and then calling `framebuffer.end()`, but ensures that one never
+ * accidentally forgets `begin` or `end`.
+ *
+ * @method draw
+ * @param {Function} callback A function to run that draws to the canvas. The
+ * function will immediately be run, but it will draw to the framebuffer
+ * instead of the canvas.
+ *
+ * @example
+ *
+ * let framebuffer;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * framebuffer = createFramebuffer();
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // Draw to the framebuffer
+ * framebuffer.begin();
+ * background(255);
+ * translate(0, 10*sin(frameCount * 0.01), 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * fill(255, 0, 0);
+ * box(50);
+ * framebuffer.end();
+ *
+ * background(100);
+ * // Draw the framebuffer to the main canvas
+ * image(framebuffer, -50, -50, 25, 25);
+ * image(framebuffer, 0, 0, 35, 35);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A video of a floating and rotating red cube is pasted twice on the
+ * canvas: once in the top left, and again, larger, in the bottom right.
+ */
+
+ },
+ {
+ key: 'draw',
+ value: function draw(callback) {
+ this.begin();
+ callback();
+ this.end();
+ } /**
+ * Call this befpre updating pixels
+ * and calling updatePixels
+ * to replace the content of the framebuffer with the data in the pixels
+ * array.
+ */
+
+ },
+ {
+ key: 'loadPixels',
+ value: function loadPixels() {
+ var gl = this.gl;
+ var prevFramebuffer = this.target._renderer.activeFramebuffer();
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+ var colorFormat = this._glColorFormat();
+ this.pixels = (0, _p2.readPixelsWebGL) (this.pixels, gl, this.framebuffer, 0, 0, this.width * this.density, this.height * this.density, colorFormat.format, colorFormat.type);
+ if (prevFramebuffer) {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer._framebufferToBind());
+ } else {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+ }
+ } /**
+ * Get a region of pixels from the canvas in the form of a
+ * p5.Image, or a single pixel as an array of
+ * numbers.
+ *
+ * Returns an array of [R,G,B,A] values for any pixel or grabs a section of
+ * an image. If the Framebuffer has been set up to not store alpha values, then
+ * only [R,G,B] will be returned. If no parameters are specified, the entire
+ * image is returned.
+ * Use the x and y parameters to get the value of one pixel. Get a section of
+ * the display window by specifying additional w and h parameters. When
+ * getting an image, the x and y parameters define the coordinates for the
+ * upper-left corner of the image, regardless of the current imageMode().
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel
+ * @param {Number} y y-coordinate of the pixel
+ * @param {Number} w width of the section to be returned
+ * @param {Number} h height of the section to be returned
+ * @return {p5.Image} the rectangle p5.Image
+ */
+ /**
+ * @method get
+ * @return {p5.Image} the whole p5.Image
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of pixel at x,y in array format [R, G, B, A]
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get(x, y, w, h) {
+ _main.default._validateParameters('p5.Framebuffer.get', arguments);
+ var colorFormat = this._glColorFormat();
+ if (x === undefined && y === undefined) {
+ x = 0;
+ y = 0;
+ w = this.width;
+ h = this.height;
+ } else if (w === undefined && h === undefined) {
+ if (x < 0 || y < 0 || x >= this.width || y >= this.height) {
+ console.warn('The x and y values passed to p5.Framebuffer.get are outside of its range and will be clamped.');
+ x = this.target.constrain(x, 0, this.width - 1);
+ y = this.target.constrain(y, 0, this.height - 1);
+ }
+ return (0, _p2.readPixelWebGL) (this.gl, this.framebuffer, x * this.density, y * this.density, colorFormat.format, colorFormat.type);
+ }
+ x = this.target.constrain(x, 0, this.width - 1);
+ y = this.target.constrain(y, 0, this.height - 1);
+ w = this.target.constrain(w, 1, this.width - x);
+ h = this.target.constrain(h, 1, this.height - y);
+ var rawData = (0, _p2.readPixelsWebGL) (undefined, this.gl, this.framebuffer, x * this.density, y * this.density, w * this.density, h * this.density, colorFormat.format, colorFormat.type);
+ // Framebuffer data might be either a Uint8Array or Float32Array
+ // depending on its format, and it may or may not have an alpha channel.
+ // To turn it into an image, we have to normalize the data into a
+ // Uint8ClampedArray with alpha.
+ var fullData = new Uint8ClampedArray(w * h * this.density * this.density * 4);
+ // Default channels that aren't in the framebuffer (e.g. alpha, if the
+ // framebuffer is in RGB mode instead of RGBA) to 255
+ fullData.fill(255);
+ var channels = colorFormat.type === this.gl.RGB ? 3 : 4;
+ for (var _y = 0; _y < h * this.density; _y++) {
+ for (var _x = 0; _x < w * this.density; _x++) {
+ for (var channel = 0; channel < 4; channel++) {
+ var idx = (_y * w * this.density + _x) * 4 + channel;
+ if (channel < channels) {
+ // Find the index of this pixel in `rawData`, which might have a
+ // different number of channels
+ var rawDataIdx = channels === 4 ? idx : (_y * w * this.density + _x) * channels + channel;
+ fullData[idx] = rawData[rawDataIdx];
+ }
+ }
+ }
+ } // Create an image from the data
+
+ var region = new _main.default.Image(w * this.density, h * this.density);
+ region.imageData = region.canvas.getContext('2d').createImageData(region.width, region.height);
+ region.imageData.data.set(fullData);
+ region.pixels = region.imageData.data;
+ region.updatePixels();
+ if (this.density !== 1) {
+ // TODO: support get() at a pixel density > 1
+ region.resize(w, h);
+ }
+ return region;
+ } /**
+ * Call this after initially calling
+ * loadPixels() and updating pixels
+ * to replace the content of the framebuffer with the data in the pixels
+ * array.
+ *
+ * This will also clear the depth buffer so that any future drawing done
+ * afterwards will go on top.
+ *
+ * @example
+ *
+ * let framebuffer;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * framebuffer = createFramebuffer();
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // Draw to the framebuffer
+ * framebuffer.draw(function() {
+ * background(255);
+ * translate(0, 10*sin(frameCount * 0.01), 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * fill(255, 0, 0);
+ * box(50);
+ * });
+ *
+ * background(100);
+ * // Draw the framebuffer to the main canvas
+ * image(framebuffer, -50, -50, 25, 25);
+ * image(framebuffer, 0, 0, 35, 35);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A sphere partly occluded by a gradient from cyan to white to magenta on
+ * the lower half of the canvas, with a 3D cube drawn on top of that in the
+ * lower right corner.
+ */
+
+ },
+ {
+ key: 'updatePixels',
+ value: function updatePixels() {
+ var gl = this.gl;
+ this.colorP5Texture.bindTexture();
+ var colorFormat = this._glColorFormat();
+ var channels = colorFormat.format === gl.RGBA ? 4 : 3;
+ var len = this.width * this.height * this.density * this.density * channels;
+ var TypedArrayClass = colorFormat.type === gl.UNSIGNED_BYTE ? Uint8Array : Float32Array;
+ if (!(this.pixels instanceof TypedArrayClass) || this.pixels.length !== len) {
+ throw new Error('The pixels array has not been set correctly. Please call loadPixels() before updatePixels().');
+ }
+ gl.texImage2D(gl.TEXTURE_2D, 0, colorFormat.internalFormat, this.width * this.density, this.height * this.density, 0, colorFormat.format, colorFormat.type, this.pixels);
+ this.colorP5Texture.unbindTexture();
+ var prevFramebuffer = this.target._renderer.activeFramebuffer();
+ if (this.antialias) {
+ // We need to make sure the antialiased framebuffer also has the updated
+ // pixels so that if more is drawn to it, it goes on top of the updated
+ // pixels instead of replacing them.
+ // We can't blit the framebuffer to the multisampled antialias
+ // framebuffer to leave both in the same state, so instead we have
+ // to use image() to put the framebuffer texture onto the antialiased
+ // framebuffer.
+ this.begin();
+ this.target.push();
+ this.target.imageMode(this.target.CENTER);
+ this.target.resetMatrix();
+ this.target.noStroke();
+ this.target.clear();
+ this.target.image(this, 0, 0);
+ this.target.pop();
+ if (this.useDepth) {
+ gl.clearDepth(1);
+ gl.clear(gl.DEPTH_BUFFER_BIT);
+ }
+ this.end();
+ } else {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+ if (this.useDepth) {
+ gl.clearDepth(1);
+ gl.clear(gl.DEPTH_BUFFER_BIT);
+ }
+ if (prevFramebuffer) {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer._framebufferToBind());
+ } else {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+ }
+ }
+ }
+ }
+ ]);
+ return Framebuffer;
+ }();
+ /**
+ * A texture with the color information of the framebuffer. Pass this (or the
+ * framebuffer itself) to texture() to draw it to
+ * the canvas, or pass it to a shader with
+ * setUniform() to read its data.
+ *
+ * Since Framebuffers are controlled by WebGL, their y coordinates are stored
+ * flipped compared to images and videos. When texturing with a framebuffer
+ * texture, you may want to flip vertically, e.g. with
+ * `plane(framebuffer.width, -framebuffer.height)`.
+ *
+ * @property {p5.FramebufferTexture} color
+ * @for p5.Framebuffer
+ *
+ * @example
+ *
+ * let framebuffer;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * framebuffer = createFramebuffer();
+ * }
+ * function draw() {
+ * noStroke();
+ * lights();
+ *
+ * // Draw a sphere to the framebuffer
+ * framebuffer.begin();
+ * background(0);
+ * sphere(25);
+ * framebuffer.end();
+ *
+ * // Load its pixels and draw a gradient over the lower half of the canvas
+ * framebuffer.loadPixels();
+ * for (let y = height/2; y < height; y++) {
+ * for (let x = 0; x < width; x++) {
+ * const idx = (y * width + x) * 4;
+ * framebuffer.pixels[idx] = (x / width) * 255;
+ * framebuffer.pixels[idx + 1] = (y / height) * 255;
+ * framebuffer.pixels[idx + 2] = 255;
+ * framebuffer.pixels[idx + 3] = 255;
+ * }
+ * }
+ * framebuffer.updatePixels();
+ *
+ * // Draw a cube on top of the pixels we just wrote
+ * framebuffer.begin();
+ * push();
+ * translate(20, 20);
+ * rotateX(0.5);
+ * rotateY(0.5);
+ * box(20);
+ * pop();
+ * framebuffer.end();
+ *
+ * image(framebuffer, -width/2, -height/2);
+ * noLoop();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A red, green, and blue sphere in the middle of the canvas
+ */
+ /**
+ * A texture with the depth information of the framebuffer. If the framebuffer
+ * was created with `{ depth: false }` in its settings, then this property will
+ * be undefined. Pass this to texture() to draw it to
+ * the canvas, or pass it to a shader with
+ * setUniform() to read its data.
+ *
+ * Since Framebuffers are controlled by WebGL, their y coordinates are stored
+ * flipped compared to images and videos. When texturing with a framebuffer
+ * texture, you may want to flip vertically, e.g. with
+ * `plane(framebuffer.width, -framebuffer.height)`.
+ *
+ * @property {p5.FramebufferTexture|undefined} depth
+ * @for p5.Framebuffer
+ *
+ * @example
+ *
+ * let framebuffer;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * framebuffer = createFramebuffer();
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // Draw to the framebuffer
+ * framebuffer.begin();
+ * background(255);
+ * normalMaterial();
+ * sphere(20);
+ * framebuffer.end();
+ *
+ * // Draw the framebuffer to the main canvas
+ * image(framebuffer.color, -width/2, -height/2);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * A video of a rectangular prism rotating, with parts closest to the camera
+ * appearing yellow and colors getting progressively more blue the farther
+ * from the camera they go
+ */
+ _main.default.Framebuffer = Framebuffer;
+ var _default = Framebuffer;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ './p5.RendererGL': 355,
+ './p5.Texture': 357,
+ 'core-js/modules/es.array.fill': 172,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.get-prototype-of': 198,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.reflect.construct': 202,
+ 'core-js/modules/es.reflect.get': 203,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.float32-array': 229,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint8-array': 252,
+ 'core-js/modules/es.typed-array.uint8-clamped-array': 253,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 350: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _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.concat');
+ _dereq_('core-js/modules/es.array.for-each');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/web.dom-collections.for-each');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @module Shape
+ * @submodule 3D Primitives
+ * @for p5
+ * @requires core
+ * @requires p5.Geometry
+ */
+ //some of the functions are adjusted from Three.js(http://threejs.org)
+ /**
+ * 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 = /*#__PURE__*/ function () {
+ function Geometry(detailX, detailY, callback) {
+ _classCallCheck(this, Geometry);
+ //an array containing every vertex
+ //@type [p5.Vector]
+ this.vertices = [
+ ];
+ //an array containing every vertex for stroke drawing
+ this.lineVertices = new _main.default.DataArray();
+ // The tangents going into or out of a vertex on a line. Along a straight
+ // line segment, both should be equal. At an endpoint, one or the other
+ // will not exist and will be all 0. In joins between line segments, they
+ // may be different, as they will be the tangents on either side of the join.
+ this.lineTangentsIn = new _main.default.DataArray();
+ this.lineTangentsOut = new _main.default.DataArray();
+ // When drawing lines with thickness, entries in this buffer represent which
+ // side of the centerline the vertex will be placed. The sign of the number
+ // will represent the side of the centerline, and the absolute value will be
+ // used as an enum to determine which part of the cap or join each vertex
+ // represents. See the doc comments for _addCap and _addJoin for diagrams.
+ this.lineSides = new _main.default.DataArray();
+ //an array 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 = [
+ ];
+ // One color per vertex representing the stroke color at that vertex
+ this.vertexStrokeColors = [
+ ];
+ // One color per line vertex, generated automatically based on
+ // vertexStrokeColors in _edgesToVertices()
+ this.lineVertexColors = new _main.default.DataArray();
+ this.detailX = detailX !== undefined ? detailX : 1;
+ this.detailY = detailY !== undefined ? detailY : 1;
+ this.dirtyFlags = {
+ };
+ if (callback instanceof Function) {
+ callback.call(this);
+ }
+ return this; // TODO: is this a constructor?
+ }
+ _createClass(Geometry, [
+ {
+ key: 'reset',
+ value: function reset() {
+ this.lineVertices.clear();
+ this.lineTangentsIn.clear();
+ this.lineTangentsOut.clear();
+ this.lineSides.clear();
+ this.vertices.length = 0;
+ this.edges.length = 0;
+ this.vertexColors.length = 0;
+ this.vertexStrokeColors.length = 0;
+ this.lineVertexColors.clear();
+ this.vertexNormals.length = 0;
+ this.uvs.length = 0;
+ this.dirtyFlags = {
+ };
+ } /**
+ * computes faces for geometry objects based on the vertices.
+ * @method computeFaces
+ * @chainable
+ */
+
+ },
+ {
+ key: 'computeFaces',
+ value: function computeFaces() {
+ this.faces.length = 0;
+ var sliceCount = this.detailX + 1;
+ var a,
+ b,
+ c,
+ d;
+ for (var i = 0; i < this.detailY; i++) {
+ for (var j = 0; j < this.detailX; j++) {
+ a = i * sliceCount + j; // + offset;
+ b = i * sliceCount + j + 1; // + offset;
+ c = (i + 1) * sliceCount + j + 1; // + offset;
+ d = (i + 1) * sliceCount + j; // + offset;
+ this.faces.push([a,
+ b,
+ d]);
+ this.faces.push([d,
+ b,
+ c]);
+ }
+ }
+ return this;
+ }
+ },
+ {
+ key: '_getFaceNormal',
+ value: function _getFaceNormal(faceId) {
+ //This assumes that vA->vB->vC is a counter-clockwise ordering
+ var face = this.faces[faceId];
+ var vA = this.vertices[face[0]];
+ var vB = this.vertices[face[1]];
+ var vC = this.vertices[face[2]];
+ var ab = _main.default.Vector.sub(vB, vA);
+ var ac = _main.default.Vector.sub(vC, vA);
+ var n = _main.default.Vector.cross(ab, ac);
+ var ln = _main.default.Vector.mag(n);
+ var sinAlpha = ln / (_main.default.Vector.mag(ab) * _main.default.Vector.mag(ac));
+ if (sinAlpha === 0 || isNaN(sinAlpha)) {
+ console.warn('p5.Geometry.prototype._getFaceNormal:', 'face has colinear sides or a repeated vertex');
+ return n;
+ }
+ if (sinAlpha > 1) sinAlpha = 1; // handle float rounding error
+ return n.mult(Math.asin(sinAlpha) / ln);
+ } /**
+ * computes smooth normals per vertex as an average of each
+ * face.
+ * @method computeNormals
+ * @chainable
+ */
+
+ },
+ {
+ key: 'computeNormals',
+ value: function computeNormals() {
+ var _this = this;
+ 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
+
+ faces.forEach(function (face, f) {
+ var faceNormal = _this._getFaceNormal(f);
+ // all three vertices get the normal added
+ for (var fv = 0; fv < 3; ++fv) {
+ var vertexIndex = face[fv];
+ vertexNormals[vertexIndex].add(faceNormal);
+ }
+ });
+ // normalize the normals
+ for (iv = 0; iv < vertices.length; ++iv) {
+ vertexNormals[iv].normalize();
+ }
+ return this;
+ } /**
+ * Averages the vertex normals. Used in curved
+ * surfaces
+ * @method averageNormals
+ * @chainable
+ */
+
+ },
+ {
+ key: 'averageNormals',
+ value: function averageNormals() {
+ for (var i = 0; i <= this.detailY; i++) {
+ var offset = this.detailX + 1;
+ var temp = _main.default.Vector.add(this.vertexNormals[i * offset], this.vertexNormals[i * offset + this.detailX]);
+ temp = _main.default.Vector.div(temp, 2);
+ this.vertexNormals[i * offset] = temp;
+ this.vertexNormals[i * offset + this.detailX] = temp;
+ }
+ return this;
+ } /**
+ * Averages pole normals. Used in spherical primitives
+ * @method averagePoleNormals
+ * @chainable
+ */
+
+ },
+ {
+ key: 'averagePoleNormals',
+ value: function averagePoleNormals() {
+ //average the north pole
+ var sum = new _main.default.Vector(0, 0, 0);
+ for (var i = 0; i < this.detailX; i++) {
+ sum.add(this.vertexNormals[i]);
+ }
+ sum = _main.default.Vector.div(sum, this.detailX);
+ for (var _i = 0; _i < this.detailX; _i++) {
+ this.vertexNormals[_i] = sum;
+ } //average the south pole
+
+ sum = new _main.default.Vector(0, 0, 0);
+ for (var _i2 = this.vertices.length - 1; _i2 > this.vertices.length - 1 - this.detailX; _i2--) {
+ sum.add(this.vertexNormals[_i2]);
+ }
+ sum = _main.default.Vector.div(sum, this.detailX);
+ for (var _i3 = this.vertices.length - 1; _i3 > this.vertices.length - 1 - this.detailX; _i3--) {
+ this.vertexNormals[_i3] = sum;
+ }
+ return this;
+ } /**
+ * Create a 2D array for establishing stroke connections
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_makeTriangleEdges',
+ value: function _makeTriangleEdges() {
+ this.edges.length = 0;
+ for (var j = 0; j < this.faces.length; j++) {
+ this.edges.push([this.faces[j][0],
+ this.faces[j][1]]);
+ this.edges.push([this.faces[j][1],
+ this.faces[j][2]]);
+ this.edges.push([this.faces[j][2],
+ this.faces[j][0]]);
+ }
+ return this;
+ } /**
+ * Converts each line segment into the vertices and vertex attributes needed
+ * to turn the line into a polygon on screen. This will include:
+ * - Two triangles line segment to create a rectangle
+ * - Two triangles per endpoint to create a stroke cap rectangle. A fragment
+ * shader is responsible for displaying the appropriate cap style within
+ * that rectangle.
+ * - Four triangles per join between adjacent line segments, creating a quad on
+ * either side of the join, perpendicular to the lines. A vertex shader will
+ * discard the quad in the "elbow" of the join, and a fragment shader will
+ * display the appropriate join style within the remaining quad.
+ *
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_edgesToVertices',
+ value: function _edgesToVertices() {
+ this.lineVertices.clear();
+ this.lineTangentsIn.clear();
+ this.lineTangentsOut.clear();
+ this.lineSides.clear();
+ var potentialCaps = new Map();
+ var connected = new Set();
+ var lastValidDir;
+ for (var i = 0; i < this.edges.length; i++) {
+ var prevEdge = this.edges[i - 1];
+ var currEdge = this.edges[i];
+ var begin = this.vertices[currEdge[0]];
+ var end = this.vertices[currEdge[1]];
+ var fromColor = this.vertexStrokeColors.length > 0 ? this.vertexStrokeColors.slice(currEdge[0] * 4, (currEdge[0] + 1) * 4) : [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ var toColor = this.vertexStrokeColors.length > 0 ? this.vertexStrokeColors.slice(currEdge[1] * 4, (currEdge[1] + 1) * 4) : [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ var dir = end.copy().sub(begin).normalize();
+ var dirOK = dir.magSq() > 0;
+ if (dirOK) {
+ this._addSegment(begin, end, fromColor, toColor, dir);
+ }
+ if (i > 0 && prevEdge[1] === currEdge[0]) {
+ if (!connected.has(currEdge[0])) {
+ connected.add(currEdge[0]);
+ potentialCaps.delete(currEdge[0]);
+ // Add a join if this segment shares a vertex with the previous. Skip
+ // actually adding join vertices if either the previous segment or this
+ // one has a length of 0.
+ //
+ // Don't add a join if the tangents point in the same direction, which
+ // would mean the edges line up exactly, and there is no need for a join.
+ if (lastValidDir && dirOK && dir.dot(lastValidDir) < 1 - 1e-8) {
+ this._addJoin(begin, lastValidDir, dir, fromColor);
+ }
+ }
+ } else {
+ // Start a new line
+ if (dirOK && !connected.has(currEdge[0])) {
+ var existingCap = potentialCaps.get(currEdge[0]);
+ if (existingCap) {
+ this._addJoin(begin, existingCap.dir, dir, fromColor);
+ potentialCaps.delete(currEdge[0]);
+ connected.add(currEdge[0]);
+ } else {
+ potentialCaps.set(currEdge[0], {
+ point: begin,
+ dir: dir.copy().mult( - 1),
+ color: fromColor
+ });
+ }
+ }
+ if (lastValidDir && !connected.has(prevEdge[1])) {
+ var _existingCap = potentialCaps.get(prevEdge[1]);
+ if (_existingCap) {
+ this._addJoin(this.vertices[prevEdge[1]], lastValidDir, _existingCap.dir.copy().mult( - 1), fromColor);
+ potentialCaps.delete(prevEdge[1]);
+ connected.add(prevEdge[1]);
+ } else {
+ // Close off the last segment with a cap
+ potentialCaps.set(prevEdge[1], {
+ point: this.vertices[prevEdge[1]],
+ dir: lastValidDir,
+ color: fromColor
+ });
+ }
+ lastValidDir = undefined;
+ }
+ }
+ if (i === this.edges.length - 1 && !connected.has(currEdge[1])) {
+ var _existingCap2 = potentialCaps.get(currEdge[1]);
+ if (_existingCap2) {
+ this._addJoin(end, dir, _existingCap2.dir.copy().mult( - 1), toColor);
+ potentialCaps.delete(currEdge[1]);
+ connected.add(currEdge[1]);
+ } else {
+ potentialCaps.set(currEdge[1], {
+ point: end,
+ dir: dir,
+ color: toColor
+ });
+ }
+ }
+ if (dirOK) {
+ lastValidDir = dir;
+ }
+ }
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = potentialCaps.values() [Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var _step$value = _step.value,
+ point = _step$value.point,
+ _dir = _step$value.dir,
+ color = _step$value.color;
+ this._addCap(point, _dir, color);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ return this;
+ } /**
+ * Adds the vertices and vertex attributes for two triangles making a rectangle
+ * for a straight line segment. A vertex shader is responsible for picking
+ * proper coordinates on the screen given the centerline positions, the tangent,
+ * and the side of the centerline each vertex belongs to. Sides follow the
+ * following scheme:
+ *
+ * -1 -1
+ * o-------------o
+ * | |
+ * o-------------o
+ * 1 1
+ *
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_addSegment',
+ value: function _addSegment(begin, end, fromColor, toColor, dir) {
+ var _this$lineVertices,
+ _this$lineVertexColor;
+ var a = begin.array();
+ var b = end.array();
+ var dirArr = dir.array();
+ this.lineSides.push(1, 1, - 1, 1, - 1, - 1);
+ for (var _i4 = 0, _arr = [
+ this.lineTangentsIn,
+ this.lineTangentsOut
+ ]; _i4 < _arr.length; _i4++) {
+ var tangents = _arr[_i4];
+ for (var i = 0; i < 6; i++) {
+ tangents.push.apply(tangents, _toConsumableArray(dirArr));
+ }
+ }(_this$lineVertices = this.lineVertices).push.apply(_this$lineVertices, _toConsumableArray(a).concat(_toConsumableArray(b), _toConsumableArray(a), _toConsumableArray(b), _toConsumableArray(b), _toConsumableArray(a)));
+ (_this$lineVertexColor = this.lineVertexColors).push.apply(_this$lineVertexColor, _toConsumableArray(fromColor).concat(_toConsumableArray(toColor), _toConsumableArray(fromColor), _toConsumableArray(toColor), _toConsumableArray(toColor), _toConsumableArray(fromColor)));
+ return this;
+ } /**
+ * Adds the vertices and vertex attributes for two triangles representing the
+ * stroke cap of a line. A fragment shader is responsible for displaying the
+ * appropriate cap style within the rectangle they make.
+ *
+ * The lineSides buffer will include the following values for the points on
+ * the cap rectangle:
+ *
+ * -1 -2
+ * -----------o---o
+ * | |
+ * -----------o---o
+ * 1 2
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_addCap',
+ value: function _addCap(point, tangent, color) {
+ var ptArray = point.array();
+ var tanInArray = tangent.array();
+ var tanOutArray = [
+ 0,
+ 0,
+ 0
+ ];
+ for (var i = 0; i < 6; i++) {
+ var _this$lineVertices2,
+ _this$lineTangentsIn,
+ _this$lineTangentsOut,
+ _this$lineVertexColor2;
+ (_this$lineVertices2 = this.lineVertices).push.apply(_this$lineVertices2, _toConsumableArray(ptArray));
+ (_this$lineTangentsIn = this.lineTangentsIn).push.apply(_this$lineTangentsIn, _toConsumableArray(tanInArray));
+ (_this$lineTangentsOut = this.lineTangentsOut).push.apply(_this$lineTangentsOut, tanOutArray);
+ (_this$lineVertexColor2 = this.lineVertexColors).push.apply(_this$lineVertexColor2, _toConsumableArray(color));
+ }
+ this.lineSides.push( - 1, 2, - 2, 1, 2, - 1);
+ return this;
+ } /**
+ * Adds the vertices and vertex attributes for four triangles representing a
+ * join between two adjacent line segments. This creates a quad on either side
+ * of the shared vertex of the two line segments, with each quad perpendicular
+ * to the lines. A vertex shader will discard all but the quad in the "elbow" of
+ * the join, and a fragment shader will display the appropriate join style
+ * within the remaining quad.
+ *
+ * The lineSides buffer will include the following values for the points on
+ * the join rectangles:
+ *
+ * -1 -2
+ * -------------o----o
+ * | |
+ * 1 o----o----o -3
+ * | | 0 |
+ * --------o----o |
+ * 2| 3 |
+ * | |
+ * | |
+ * @private
+ * @chainable
+ */
+
+ },
+ {
+ key: '_addJoin',
+ value: function _addJoin(point, fromTangent, toTangent, color) {
+ var ptArray = point.array();
+ var tanInArray = fromTangent.array();
+ var tanOutArray = toTangent.array();
+ for (var i = 0; i < 12; i++) {
+ var _this$lineVertices3,
+ _this$lineTangentsIn2,
+ _this$lineTangentsOut2,
+ _this$lineVertexColor3;
+ (_this$lineVertices3 = this.lineVertices).push.apply(_this$lineVertices3, _toConsumableArray(ptArray));
+ (_this$lineTangentsIn2 = this.lineTangentsIn).push.apply(_this$lineTangentsIn2, _toConsumableArray(tanInArray));
+ (_this$lineTangentsOut2 = this.lineTangentsOut).push.apply(_this$lineTangentsOut2, _toConsumableArray(tanOutArray));
+ (_this$lineVertexColor3 = this.lineVertexColors).push.apply(_this$lineVertexColor3, _toConsumableArray(color));
+ }
+ this.lineSides.push( - 1, - 3, - 2, - 1, 0, - 3);
+ this.lineSides.push(3, 1, 2, 3, 0, 1);
+ return this;
+ } /**
+ * Modifies all vertices to be centered within the range -100 to 100.
+ * @method normalize
+ * @chainable
+ */
+
+ },
+ {
+ key: 'normalize',
+ value: function normalize() {
+ if (this.vertices.length > 0) {
+ // Find the corners of our bounding box
+ var maxPosition = this.vertices[0].copy();
+ var minPosition = this.vertices[0].copy();
+ for (var i = 0; i < this.vertices.length; i++) {
+ maxPosition.x = Math.max(maxPosition.x, this.vertices[i].x);
+ minPosition.x = Math.min(minPosition.x, this.vertices[i].x);
+ maxPosition.y = Math.max(maxPosition.y, this.vertices[i].y);
+ minPosition.y = Math.min(minPosition.y, this.vertices[i].y);
+ maxPosition.z = Math.max(maxPosition.z, this.vertices[i].z);
+ minPosition.z = Math.min(minPosition.z, this.vertices[i].z);
+ }
+ var center = _main.default.Vector.lerp(maxPosition, minPosition, 0.5);
+ var dist = _main.default.Vector.sub(maxPosition, minPosition);
+ var longestDist = Math.max(Math.max(dist.x, dist.y), dist.z);
+ var scale = 200 / longestDist;
+ for (var _i5 = 0; _i5 < this.vertices.length; _i5++) {
+ this.vertices[_i5].sub(center);
+ this.vertices[_i5].mult(scale);
+ }
+ }
+ return this;
+ }
+ }
+ ]);
+ return Geometry;
+ }();
+ var _default = _main.default.Geometry;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.for-each': 175,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.map': 187,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.set': 207,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.sub': 218,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.for-each': 255,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 351: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * @requires constants
+ * @todo see methods below needing further implementation.
+ * future consideration: implement SIMD optimizations
+ * when browser compatibility becomes available
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/
+ * Reference/Global_Objects/SIMD
+ */
+
+ var GLMAT_ARRAY_TYPE = Array;
+ var isMatrixArray = function isMatrixArray(x) {
+ return Array.isArray(x);
+ };
+ if (typeof Float32Array !== 'undefined') {
+ GLMAT_ARRAY_TYPE = Float32Array;
+ isMatrixArray = function isMatrixArray(x) {
+ return Array.isArray(x) || x instanceof Float32Array;
+ };
+ } /**
+ * A class to describe a 4×4 matrix
+ * for model and view matrix manipulation in the p5js webgl renderer.
+ * @class p5.Matrix
+ * @private
+ * @constructor
+ * @param {Array} [mat4] column-major array literal of our 4×4 matrix
+ */
+
+ _main.default.Matrix = /*#__PURE__*/ function () {
+ function _class() {
+ var _ref;
+ _classCallCheck(this, _class);
+ // This is default behavior when object
+ // instantiated using createMatrix()
+ // @todo implement createMatrix() in core/math.js
+ if (arguments.length && (_ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref]) instanceof _main.default) {
+ var _ref2;
+ this.p5 = (_ref2 = arguments.length - 1, _ref2 < 0 || arguments.length <= _ref2 ? undefined : arguments[_ref2]);
+ }
+ if ((arguments.length <= 0 ? undefined : arguments[0]) === 'mat3') {
+ this.mat3 = Array.isArray(arguments.length <= 1 ? undefined : arguments[1]) ? arguments.length <= 1 ? undefined : arguments[1] : new GLMAT_ARRAY_TYPE([1,
+ 0,
+ 0,
+ 0,
+ 1,
+ 0,
+ 0,
+ 0,
+ 1]);
+ } else {
+ this.mat4 = Array.isArray(arguments.length <= 0 ? undefined : arguments[0]) ? arguments.length <= 0 ? undefined : arguments[0] : new GLMAT_ARRAY_TYPE([1,
+ 0,
+ 0,
+ 0,
+ 0,
+ 1,
+ 0,
+ 0,
+ 0,
+ 0,
+ 1,
+ 0,
+ 0,
+ 0,
+ 0,
+ 1]);
+ }
+ return this;
+ } /**
+ * 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
+ */
+
+ _createClass(_class, [
+ {
+ key: 'set',
+ value: function set(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
+ */
+
+ },
+ {
+ key: 'get',
+ value: function get() {
+ return new _main.default.Matrix(this.mat4, this.p5);
+ } /**
+ * return a copy of this matrix.
+ * If this matrix is 4x4, a 4x4 matrix with exactly the same entries will be
+ * generated. The same is true if this matrix is 3x3.
+ *
+ * @method copy
+ * @return {p5.Matrix} the result matrix
+ */
+
+ },
+ {
+ key: 'copy',
+ value: function copy() {
+ if (this.mat3 !== undefined) {
+ var copied3x3 = new _main.default.Matrix('mat3', this.p5);
+ copied3x3.mat3[0] = this.mat3[0];
+ copied3x3.mat3[1] = this.mat3[1];
+ copied3x3.mat3[2] = this.mat3[2];
+ copied3x3.mat3[3] = this.mat3[3];
+ copied3x3.mat3[4] = this.mat3[4];
+ copied3x3.mat3[5] = this.mat3[5];
+ copied3x3.mat3[6] = this.mat3[6];
+ copied3x3.mat3[7] = this.mat3[7];
+ copied3x3.mat3[8] = this.mat3[8];
+ return copied3x3;
+ }
+ var copied = new _main.default.Matrix(this.p5);
+ copied.mat4[0] = this.mat4[0];
+ copied.mat4[1] = this.mat4[1];
+ copied.mat4[2] = this.mat4[2];
+ copied.mat4[3] = this.mat4[3];
+ copied.mat4[4] = this.mat4[4];
+ copied.mat4[5] = this.mat4[5];
+ copied.mat4[6] = this.mat4[6];
+ copied.mat4[7] = this.mat4[7];
+ copied.mat4[8] = this.mat4[8];
+ copied.mat4[9] = this.mat4[9];
+ copied.mat4[10] = this.mat4[10];
+ copied.mat4[11] = this.mat4[11];
+ copied.mat4[12] = this.mat4[12];
+ copied.mat4[13] = this.mat4[13];
+ copied.mat4[14] = this.mat4[14];
+ copied.mat4[15] = this.mat4[15];
+ return copied;
+ } /**
+ * return an identity matrix
+ * @method identity
+ * @return {p5.Matrix} the result matrix
+ */
+
+ },
+ {
+ key: 'transpose',
+ /**
+ * transpose according to a given matrix
+ * @method transpose
+ * @param {p5.Matrix|Float32Array|Number[]} a the matrix to be
+ * based on to transpose
+ * @chainable
+ */
+ value: function transpose(a) {
+ var a01,
+ a02,
+ a03,
+ a12,
+ a13,
+ a23;
+ if (a instanceof _main.default.Matrix) {
+ a01 = a.mat4[1];
+ a02 = a.mat4[2];
+ a03 = a.mat4[3];
+ a12 = a.mat4[6];
+ a13 = a.mat4[7];
+ a23 = a.mat4[11];
+ this.mat4[0] = a.mat4[0];
+ this.mat4[1] = a.mat4[4];
+ this.mat4[2] = a.mat4[8];
+ this.mat4[3] = a.mat4[12];
+ this.mat4[4] = a01;
+ this.mat4[5] = a.mat4[5];
+ this.mat4[6] = a.mat4[9];
+ this.mat4[7] = a.mat4[13];
+ this.mat4[8] = a02;
+ this.mat4[9] = a12;
+ this.mat4[10] = a.mat4[10];
+ this.mat4[11] = a.mat4[14];
+ this.mat4[12] = a03;
+ this.mat4[13] = a13;
+ this.mat4[14] = a23;
+ this.mat4[15] = a.mat4[15];
+ } else if (isMatrixArray(a)) {
+ a01 = a[1];
+ a02 = a[2];
+ a03 = a[3];
+ a12 = a[6];
+ a13 = a[7];
+ a23 = a[11];
+ this.mat4[0] = a[0];
+ this.mat4[1] = a[4];
+ this.mat4[2] = a[8];
+ this.mat4[3] = a[12];
+ this.mat4[4] = a01;
+ this.mat4[5] = a[5];
+ this.mat4[6] = a[9];
+ this.mat4[7] = a[13];
+ this.mat4[8] = a02;
+ this.mat4[9] = a12;
+ this.mat4[10] = a[10];
+ this.mat4[11] = a[14];
+ this.mat4[12] = a03;
+ this.mat4[13] = a13;
+ this.mat4[14] = a23;
+ this.mat4[15] = a[15];
+ }
+ return this;
+ } /**
+ * invert matrix according to a give matrix
+ * @method invert
+ * @param {p5.Matrix|Float32Array|Number[]} a the matrix to be
+ * based on to invert
+ * @chainable
+ */
+
+ },
+ {
+ key: 'invert',
+ value: function invert(a) {
+ var a00,
+ a01,
+ a02,
+ a03,
+ a10,
+ a11,
+ a12,
+ a13;
+ var a20,
+ a21,
+ a22,
+ a23,
+ a30,
+ a31,
+ a32,
+ a33;
+ if (a instanceof _main.default.Matrix) {
+ a00 = a.mat4[0];
+ a01 = a.mat4[1];
+ a02 = a.mat4[2];
+ a03 = a.mat4[3];
+ a10 = a.mat4[4];
+ a11 = a.mat4[5];
+ a12 = a.mat4[6];
+ a13 = a.mat4[7];
+ a20 = a.mat4[8];
+ a21 = a.mat4[9];
+ a22 = a.mat4[10];
+ a23 = a.mat4[11];
+ a30 = a.mat4[12];
+ a31 = a.mat4[13];
+ a32 = a.mat4[14];
+ a33 = a.mat4[15];
+ } else if (isMatrixArray(a)) {
+ a00 = a[0];
+ a01 = a[1];
+ a02 = a[2];
+ a03 = a[3];
+ a10 = a[4];
+ a11 = a[5];
+ a12 = a[6];
+ a13 = a[7];
+ a20 = a[8];
+ a21 = a[9];
+ a22 = a[10];
+ a23 = a[11];
+ a30 = a[12];
+ a31 = a[13];
+ a32 = a[14];
+ a33 = a[15];
+ }
+ var b00 = a00 * a11 - a01 * a10;
+ var b01 = a00 * a12 - a02 * a10;
+ var b02 = a00 * a13 - a03 * a10;
+ var b03 = a01 * a12 - a02 * a11;
+ var b04 = a01 * a13 - a03 * a11;
+ var b05 = a02 * a13 - a03 * a12;
+ var b06 = a20 * a31 - a21 * a30;
+ var b07 = a20 * a32 - a22 * a30;
+ var b08 = a20 * a33 - a23 * a30;
+ var b09 = a21 * a32 - a22 * a31;
+ var b10 = a21 * a33 - a23 * a31;
+ var b11 = a22 * a33 - a23 * a32;
+ // Calculate the determinant
+ var det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
+ if (!det) {
+ return null;
+ }
+ det = 1 / det;
+ this.mat4[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
+ this.mat4[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
+ this.mat4[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
+ this.mat4[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
+ this.mat4[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
+ this.mat4[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
+ this.mat4[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
+ this.mat4[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
+ this.mat4[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
+ this.mat4[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
+ this.mat4[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
+ this.mat4[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
+ this.mat4[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
+ this.mat4[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
+ this.mat4[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
+ this.mat4[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
+ return this;
+ } /**
+ * Inverts a 3×3 matrix
+ * @method invert3x3
+ * @chainable
+ */
+
+ },
+ {
+ key: 'invert3x3',
+ value: function invert3x3() {
+ var a00 = this.mat3[0];
+ var a01 = this.mat3[1];
+ var a02 = this.mat3[2];
+ var a10 = this.mat3[3];
+ var a11 = this.mat3[4];
+ var a12 = this.mat3[5];
+ var a20 = this.mat3[6];
+ var a21 = this.mat3[7];
+ var a22 = this.mat3[8];
+ var b01 = a22 * a11 - a12 * a21;
+ var b11 = - a22 * a10 + a12 * a20;
+ var b21 = a21 * a10 - a11 * a20;
+ // Calculate the determinant
+ var det = a00 * b01 + a01 * b11 + a02 * b21;
+ if (!det) {
+ return null;
+ }
+ det = 1 / det;
+ this.mat3[0] = b01 * det;
+ this.mat3[1] = ( - a22 * a01 + a02 * a21) * det;
+ this.mat3[2] = (a12 * a01 - a02 * a11) * det;
+ this.mat3[3] = b11 * det;
+ this.mat3[4] = (a22 * a00 - a02 * a20) * det;
+ this.mat3[5] = ( - a12 * a00 + a02 * a10) * det;
+ this.mat3[6] = b21 * det;
+ this.mat3[7] = ( - a21 * a00 + a01 * a20) * det;
+ this.mat3[8] = (a11 * a00 - a01 * a10) * det;
+ return this;
+ } /**
+ * This function is only for 3x3 matrices.
+ * transposes a 3×3 p5.Matrix by a mat3
+ * If there is an array of arguments, the matrix obtained by transposing
+ * the 3x3 matrix generated based on that array is set.
+ * If no arguments, it transposes itself and returns it.
+ *
+ * @method transpose3x3
+ * @param {Number[]} mat3 1-dimensional array
+ * @chainable
+ */
+
+ },
+ {
+ key: 'transpose3x3',
+ value: function transpose3x3(mat3) {
+ if (mat3 === undefined) {
+ mat3 = this.mat3;
+ }
+ var a01 = mat3[1];
+ var a02 = mat3[2];
+ var a12 = mat3[5];
+ this.mat3[0] = mat3[0];
+ this.mat3[1] = mat3[3];
+ this.mat3[2] = mat3[6];
+ this.mat3[3] = a01;
+ this.mat3[4] = mat3[4];
+ this.mat3[5] = mat3[7];
+ this.mat3[6] = a02;
+ this.mat3[7] = a12;
+ this.mat3[8] = mat3[8];
+ return this;
+ } /**
+ * converts a 4×4 matrix to its 3×3 inverse transform
+ * commonly used in MVMatrix to NMatrix conversions.
+ * @method invertTranspose
+ * @param {p5.Matrix} mat4 the matrix to be based on to invert
+ * @chainable
+ * @todo finish implementation
+ */
+
+ },
+ {
+ key: 'inverseTranspose',
+ value: function inverseTranspose(_ref3) {
+ var mat4 = _ref3.mat4;
+ if (this.mat3 === undefined) {
+ _main.default._friendlyError('sorry, this function only works with mat3');
+ } else {
+ //convert mat4 -> mat3
+ this.mat3[0] = mat4[0];
+ this.mat3[1] = mat4[1];
+ this.mat3[2] = mat4[2];
+ this.mat3[3] = mat4[4];
+ this.mat3[4] = mat4[5];
+ this.mat3[5] = mat4[6];
+ this.mat3[6] = mat4[8];
+ this.mat3[7] = mat4[9];
+ this.mat3[8] = mat4[10];
+ }
+ var inverse = this.invert3x3();
+ // check inverse succeeded
+ if (inverse) {
+ inverse.transpose3x3(this.mat3);
+ } else {
+ // in case of singularity, just zero the matrix
+ for (var i = 0; i < 9; i++) {
+ this.mat3[i] = 0;
+ }
+ }
+ return this;
+ } /**
+ * inspired by Toji's mat4 determinant
+ * @method determinant
+ * @return {Number} Determinant of our 4×4 matrix
+ */
+
+ },
+ {
+ key: 'determinant',
+ value: function determinant() {
+ var d00 = this.mat4[0] * this.mat4[5] - this.mat4[1] * this.mat4[4],
+ d01 = this.mat4[0] * this.mat4[6] - this.mat4[2] * this.mat4[4],
+ d02 = this.mat4[0] * this.mat4[7] - this.mat4[3] * this.mat4[4],
+ d03 = this.mat4[1] * this.mat4[6] - this.mat4[2] * this.mat4[5],
+ d04 = this.mat4[1] * this.mat4[7] - this.mat4[3] * this.mat4[5],
+ d05 = this.mat4[2] * this.mat4[7] - this.mat4[3] * this.mat4[6],
+ d06 = this.mat4[8] * this.mat4[13] - this.mat4[9] * this.mat4[12],
+ d07 = this.mat4[8] * this.mat4[14] - this.mat4[10] * this.mat4[12],
+ d08 = this.mat4[8] * this.mat4[15] - this.mat4[11] * this.mat4[12],
+ d09 = this.mat4[9] * this.mat4[14] - this.mat4[10] * this.mat4[13],
+ d10 = this.mat4[9] * this.mat4[15] - this.mat4[11] * this.mat4[13],
+ d11 = this.mat4[10] * this.mat4[15] - this.mat4[11] * this.mat4[14];
+ // Calculate the determinant
+ return d00 * d11 - d01 * d10 + d02 * d09 + d03 * d08 - d04 * d07 + d05 * d06;
+ } /**
+ * multiply two mat4s
+ * @method mult
+ * @param {p5.Matrix|Float32Array|Number[]} multMatrix The matrix
+ * we want to multiply by
+ * @chainable
+ */
+
+ },
+ {
+ key: 'mult',
+ value: function mult(multMatrix) {
+ var _src;
+ if (multMatrix === this || multMatrix === this.mat4) {
+ _src = this.copy().mat4; // only need to allocate in this rare case
+ } else if (multMatrix instanceof _main.default.Matrix) {
+ _src = multMatrix.mat4;
+ } else if (isMatrixArray(multMatrix)) {
+ _src = multMatrix;
+ } else if (arguments.length === 16) {
+ _src = arguments;
+ } else {
+ return; // nothing to do.
+ } // each row is used for the multiplier
+
+ var b0 = this.mat4[0],
+ b1 = this.mat4[1],
+ b2 = this.mat4[2],
+ b3 = this.mat4[3];
+ this.mat4[0] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[1] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[2] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[3] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+ b0 = this.mat4[4];
+ b1 = this.mat4[5];
+ b2 = this.mat4[6];
+ b3 = this.mat4[7];
+ this.mat4[4] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[5] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[6] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[7] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+ b0 = this.mat4[8];
+ b1 = this.mat4[9];
+ b2 = this.mat4[10];
+ b3 = this.mat4[11];
+ this.mat4[8] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[9] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[10] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[11] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+ b0 = this.mat4[12];
+ b1 = this.mat4[13];
+ b2 = this.mat4[14];
+ b3 = this.mat4[15];
+ this.mat4[12] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+ this.mat4[13] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+ this.mat4[14] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+ this.mat4[15] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+ return this;
+ }
+ },
+ {
+ key: 'apply',
+ value: function apply(multMatrix) {
+ var _src;
+ if (multMatrix === this || multMatrix === this.mat4) {
+ _src = this.copy().mat4; // only need to allocate in this rare case
+ } else if (multMatrix instanceof _main.default.Matrix) {
+ _src = multMatrix.mat4;
+ } else if (isMatrixArray(multMatrix)) {
+ _src = multMatrix;
+ } else if (arguments.length === 16) {
+ _src = arguments;
+ } else {
+ return; // nothing to do.
+ }
+ var mat4 = this.mat4;
+ // each row is used for the multiplier
+ var m0 = mat4[0];
+ var m4 = mat4[4];
+ var m8 = mat4[8];
+ var m12 = mat4[12];
+ mat4[0] = _src[0] * m0 + _src[1] * m4 + _src[2] * m8 + _src[3] * m12;
+ mat4[4] = _src[4] * m0 + _src[5] * m4 + _src[6] * m8 + _src[7] * m12;
+ mat4[8] = _src[8] * m0 + _src[9] * m4 + _src[10] * m8 + _src[11] * m12;
+ mat4[12] = _src[12] * m0 + _src[13] * m4 + _src[14] * m8 + _src[15] * m12;
+ var m1 = mat4[1];
+ var m5 = mat4[5];
+ var m9 = mat4[9];
+ var m13 = mat4[13];
+ mat4[1] = _src[0] * m1 + _src[1] * m5 + _src[2] * m9 + _src[3] * m13;
+ mat4[5] = _src[4] * m1 + _src[5] * m5 + _src[6] * m9 + _src[7] * m13;
+ mat4[9] = _src[8] * m1 + _src[9] * m5 + _src[10] * m9 + _src[11] * m13;
+ mat4[13] = _src[12] * m1 + _src[13] * m5 + _src[14] * m9 + _src[15] * m13;
+ var m2 = mat4[2];
+ var m6 = mat4[6];
+ var m10 = mat4[10];
+ var m14 = mat4[14];
+ mat4[2] = _src[0] * m2 + _src[1] * m6 + _src[2] * m10 + _src[3] * m14;
+ mat4[6] = _src[4] * m2 + _src[5] * m6 + _src[6] * m10 + _src[7] * m14;
+ mat4[10] = _src[8] * m2 + _src[9] * m6 + _src[10] * m10 + _src[11] * m14;
+ mat4[14] = _src[12] * m2 + _src[13] * m6 + _src[14] * m10 + _src[15] * m14;
+ var m3 = mat4[3];
+ var m7 = mat4[7];
+ var m11 = mat4[11];
+ var m15 = mat4[15];
+ mat4[3] = _src[0] * m3 + _src[1] * m7 + _src[2] * m11 + _src[3] * m15;
+ mat4[7] = _src[4] * m3 + _src[5] * m7 + _src[6] * m11 + _src[7] * m15;
+ mat4[11] = _src[8] * m3 + _src[9] * m7 + _src[10] * m11 + _src[11] * m15;
+ mat4[15] = _src[12] * m3 + _src[13] * m7 + _src[14] * m11 + _src[15] * m15;
+ return this;
+ } /**
+ * scales a p5.Matrix by scalars or a vector
+ * @method scale
+ * @param {p5.Vector|Float32Array|Number[]} s vector to scale by
+ * @chainable
+ */
+
+ },
+ {
+ key: 'scale',
+ value: function scale(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ // x is a vector, extract the components from it.
+ y = x.y;
+ z = x.z;
+ x = x.x; // must be last
+ } else if (x instanceof Array) {
+ // x is an array, extract the components from it.
+ y = x[1];
+ z = x[2];
+ x = x[0]; // must be last
+ }
+ this.mat4[0] *= x;
+ this.mat4[1] *= x;
+ this.mat4[2] *= x;
+ this.mat4[3] *= x;
+ this.mat4[4] *= y;
+ this.mat4[5] *= y;
+ this.mat4[6] *= y;
+ this.mat4[7] *= y;
+ this.mat4[8] *= z;
+ this.mat4[9] *= z;
+ this.mat4[10] *= z;
+ this.mat4[11] *= z;
+ return this;
+ } /**
+ * rotate our Matrix around an axis by the given angle.
+ * @method rotate
+ * @param {Number} a The angle of rotation in radians
+ * @param {p5.Vector|Number[]} axis the axis(es) to rotate around
+ * @chainable
+ * inspired by Toji's gl-matrix lib, mat4 rotation
+ */
+
+ },
+ {
+ key: 'rotate',
+ value: function rotate(a, x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ // x is a vector, extract the components from it.
+ y = x.y;
+ z = x.z;
+ x = x.x; //must be last
+ } else if (x instanceof Array) {
+ // x is an array, extract the components from it.
+ y = x[1];
+ z = x[2];
+ x = x[0]; //must be last
+ }
+ var len = Math.sqrt(x * x + y * y + z * z);
+ x *= 1 / len;
+ y *= 1 / len;
+ z *= 1 / len;
+ var a00 = this.mat4[0];
+ var a01 = this.mat4[1];
+ var a02 = this.mat4[2];
+ var a03 = this.mat4[3];
+ var a10 = this.mat4[4];
+ var a11 = this.mat4[5];
+ var a12 = this.mat4[6];
+ var a13 = this.mat4[7];
+ var a20 = this.mat4[8];
+ var a21 = this.mat4[9];
+ var a22 = this.mat4[10];
+ var a23 = this.mat4[11];
+ //sin,cos, and tan of respective angle
+ var sA = Math.sin(a);
+ var cA = Math.cos(a);
+ var tA = 1 - cA;
+ // Construct the elements of the rotation matrix
+ var b00 = x * x * tA + cA;
+ var b01 = y * x * tA + z * sA;
+ var b02 = z * x * tA - y * sA;
+ var b10 = x * y * tA - z * sA;
+ var b11 = y * y * tA + cA;
+ var b12 = z * y * tA + x * sA;
+ var b20 = x * z * tA + y * sA;
+ var b21 = y * z * tA - x * sA;
+ var b22 = z * z * tA + cA;
+ // rotation-specific matrix multiplication
+ this.mat4[0] = a00 * b00 + a10 * b01 + a20 * b02;
+ this.mat4[1] = a01 * b00 + a11 * b01 + a21 * b02;
+ this.mat4[2] = a02 * b00 + a12 * b01 + a22 * b02;
+ this.mat4[3] = a03 * b00 + a13 * b01 + a23 * b02;
+ this.mat4[4] = a00 * b10 + a10 * b11 + a20 * b12;
+ this.mat4[5] = a01 * b10 + a11 * b11 + a21 * b12;
+ this.mat4[6] = a02 * b10 + a12 * b11 + a22 * b12;
+ this.mat4[7] = a03 * b10 + a13 * b11 + a23 * b12;
+ this.mat4[8] = a00 * b20 + a10 * b21 + a20 * b22;
+ this.mat4[9] = a01 * b20 + a11 * b21 + a21 * b22;
+ this.mat4[10] = a02 * b20 + a12 * b21 + a22 * b22;
+ this.mat4[11] = a03 * b20 + a13 * b21 + a23 * b22;
+ return this;
+ } /**
+ * @todo finish implementing this method!
+ * translates
+ * @method translate
+ * @param {Number[]} v vector to translate by
+ * @chainable
+ */
+
+ },
+ {
+ key: 'translate',
+ value: function translate(v) {
+ var x = v[0],
+ y = v[1],
+ z = v[2] || 0;
+ this.mat4[12] += this.mat4[0] * x + this.mat4[4] * y + this.mat4[8] * z;
+ this.mat4[13] += this.mat4[1] * x + this.mat4[5] * y + this.mat4[9] * z;
+ this.mat4[14] += this.mat4[2] * x + this.mat4[6] * y + this.mat4[10] * z;
+ this.mat4[15] += this.mat4[3] * x + this.mat4[7] * y + this.mat4[11] * z;
+ }
+ },
+ {
+ key: 'rotateX',
+ value: function rotateX(a) {
+ this.rotate(a, 1, 0, 0);
+ }
+ },
+ {
+ key: 'rotateY',
+ value: function rotateY(a) {
+ this.rotate(a, 0, 1, 0);
+ }
+ },
+ {
+ key: 'rotateZ',
+ value: function rotateZ(a) {
+ this.rotate(a, 0, 0, 1);
+ } /**
+ * sets the perspective matrix
+ * @method perspective
+ * @param {Number} fovy [description]
+ * @param {Number} aspect [description]
+ * @param {Number} near near clipping plane
+ * @param {Number} far far clipping plane
+ * @chainable
+ */
+
+ },
+ {
+ key: 'perspective',
+ value: function perspective(fovy, aspect, near, far) {
+ var f = 1 / Math.tan(fovy / 2),
+ nf = 1 / (near - far);
+ this.mat4[0] = f / aspect;
+ this.mat4[1] = 0;
+ this.mat4[2] = 0;
+ this.mat4[3] = 0;
+ this.mat4[4] = 0;
+ this.mat4[5] = f;
+ this.mat4[6] = 0;
+ this.mat4[7] = 0;
+ this.mat4[8] = 0;
+ this.mat4[9] = 0;
+ this.mat4[10] = (far + near) * nf;
+ this.mat4[11] = - 1;
+ this.mat4[12] = 0;
+ this.mat4[13] = 0;
+ this.mat4[14] = 2 * far * near * nf;
+ this.mat4[15] = 0;
+ return this;
+ } /**
+ * sets the ortho matrix
+ * @method ortho
+ * @param {Number} left [description]
+ * @param {Number} right [description]
+ * @param {Number} bottom [description]
+ * @param {Number} top [description]
+ * @param {Number} near near clipping plane
+ * @param {Number} far far clipping plane
+ * @chainable
+ */
+
+ },
+ {
+ key: 'ortho',
+ value: function ortho(left, right, bottom, top, near, far) {
+ var lr = 1 / (left - right),
+ bt = 1 / (bottom - top),
+ nf = 1 / (near - far);
+ this.mat4[0] = - 2 * lr;
+ this.mat4[1] = 0;
+ this.mat4[2] = 0;
+ this.mat4[3] = 0;
+ this.mat4[4] = 0;
+ this.mat4[5] = - 2 * bt;
+ this.mat4[6] = 0;
+ this.mat4[7] = 0;
+ this.mat4[8] = 0;
+ this.mat4[9] = 0;
+ this.mat4[10] = 2 * nf;
+ this.mat4[11] = 0;
+ this.mat4[12] = (left + right) * lr;
+ this.mat4[13] = (top + bottom) * bt;
+ this.mat4[14] = (far + near) * nf;
+ this.mat4[15] = 1;
+ return this;
+ } /**
+ * apply a matrix to a vector with x,y,z,w components
+ * get the results in the form of an array
+ * @method multiplyVec4
+ * @param {Number}
+ * @return {Number[]}
+ */
+
+ },
+ {
+ key: 'multiplyVec4',
+ value: function multiplyVec4(x, y, z, w) {
+ var result = new Array(4);
+ var m = this.mat4;
+ result[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
+ result[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
+ result[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
+ result[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
+ return result;
+ } /**
+ * Applies a matrix to a vector.
+ * The fourth component is set to 1.
+ * Returns a vector consisting of the first
+ * through third components of the result.
+ *
+ * @method multiplyPoint
+ * @param {p5.Vector}
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'multiplyPoint',
+ value: function multiplyPoint(_ref4) {
+ var x = _ref4.x,
+ y = _ref4.y,
+ z = _ref4.z;
+ var array = this.multiplyVec4(x, y, z, 1);
+ return new _main.default.Vector(array[0], array[1], array[2]);
+ } /**
+ * Applies a matrix to a vector.
+ * The fourth component is set to 1.
+ * Returns the result of dividing the 1st to 3rd components
+ * of the result by the 4th component as a vector.
+ *
+ * @method multiplyAndNormalizePoint
+ * @param {p5.Vector}
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'multiplyAndNormalizePoint',
+ value: function multiplyAndNormalizePoint(_ref5) {
+ var x = _ref5.x,
+ y = _ref5.y,
+ z = _ref5.z;
+ var array = this.multiplyVec4(x, y, z, 1);
+ array[0] /= array[3];
+ array[1] /= array[3];
+ array[2] /= array[3];
+ return new _main.default.Vector(array[0], array[1], array[2]);
+ } /**
+ * Applies a matrix to a vector.
+ * The fourth component is set to 0.
+ * Returns a vector consisting of the first
+ * through third components of the result.
+ *
+ * @method multiplyDirection
+ * @param {p5.Vector}
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'multiplyDirection',
+ value: function multiplyDirection(_ref6) {
+ var x = _ref6.x,
+ y = _ref6.y,
+ z = _ref6.z;
+ var array = this.multiplyVec4(x, y, z, 0);
+ return new _main.default.Vector(array[0], array[1], array[2]);
+ } /**
+ * This function is only for 3x3 matrices.
+ * multiply two mat3s. It is an operation to multiply the 3x3 matrix of
+ * the argument from the right. Arguments can be a 3x3 p5.Matrix,
+ * a Float32Array of length 9, or a javascript array of length 9.
+ * In addition, it can also be done by enumerating 9 numbers.
+ *
+ * @method mult3x3
+ * @param {p5.Matrix|Float32Array|Number[]} multMatrix The matrix
+ * we want to multiply by
+ * @chainable
+ */
+
+ },
+ {
+ key: 'mult3x3',
+ value: function mult3x3(multMatrix) {
+ var _src;
+ if (multMatrix === this || multMatrix === this.mat3) {
+ _src = this.copy().mat3; // only need to allocate in this rare case
+ } else if (multMatrix instanceof _main.default.Matrix) {
+ _src = multMatrix.mat3;
+ } else if (isMatrixArray(multMatrix)) {
+ _src = multMatrix;
+ } else if (arguments.length === 9) {
+ _src = arguments;
+ } else {
+ return; // nothing to do.
+ } // each row is used for the multiplier
+
+ var b0 = this.mat3[0];
+ var b1 = this.mat3[1];
+ var b2 = this.mat3[2];
+ this.mat3[0] = b0 * _src[0] + b1 * _src[3] + b2 * _src[6];
+ this.mat3[1] = b0 * _src[1] + b1 * _src[4] + b2 * _src[7];
+ this.mat3[2] = b0 * _src[2] + b1 * _src[5] + b2 * _src[8];
+ b0 = this.mat3[3];
+ b1 = this.mat3[4];
+ b2 = this.mat3[5];
+ this.mat3[3] = b0 * _src[0] + b1 * _src[3] + b2 * _src[6];
+ this.mat3[4] = b0 * _src[1] + b1 * _src[4] + b2 * _src[7];
+ this.mat3[5] = b0 * _src[2] + b1 * _src[5] + b2 * _src[8];
+ b0 = this.mat3[6];
+ b1 = this.mat3[7];
+ b2 = this.mat3[8];
+ this.mat3[6] = b0 * _src[0] + b1 * _src[3] + b2 * _src[6];
+ this.mat3[7] = b0 * _src[1] + b1 * _src[4] + b2 * _src[7];
+ this.mat3[8] = b0 * _src[2] + b1 * _src[5] + b2 * _src[8];
+ return this;
+ } /**
+ * This function is only for 3x3 matrices.
+ * A function that returns a column vector of a 3x3 matrix.
+ *
+ * @method column
+ * @param {Number} columnIndex matrix column number
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'column',
+ value: function column(columnIndex) {
+ return new _main.default.Vector(this.mat3[3 * columnIndex], this.mat3[3 * columnIndex + 1], this.mat3[3 * columnIndex + 2]);
+ } /**
+ * This function is only for 3x3 matrices.
+ * A function that returns a row vector of a 3x3 matrix.
+ *
+ * @method row
+ * @param {Number} rowIndex matrix row number
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'row',
+ value: function row(rowIndex) {
+ return new _main.default.Vector(this.mat3[rowIndex], this.mat3[rowIndex + 3], this.mat3[rowIndex + 6]);
+ } /**
+ * Returns the diagonal elements of the matrix in the form of an array.
+ * A 3x3 matrix will return an array of length 3.
+ * A 4x4 matrix will return an array of length 4.
+ *
+ * @method diagonal
+ * @return {Number[]} An array obtained by arranging the diagonal elements
+ * of the matrix in ascending order of index
+ */
+
+ },
+ {
+ key: 'diagonal',
+ value: function diagonal() {
+ if (this.mat3 !== undefined) {
+ return [this.mat3[0],
+ this.mat3[4],
+ this.mat3[8]];
+ }
+ return [this.mat4[0],
+ this.mat4[5],
+ this.mat4[10],
+ this.mat4[15]];
+ } /**
+ * This function is only for 3x3 matrices.
+ * Takes a vector and returns the vector resulting from multiplying to
+ * that vector by this matrix from left.
+ *
+ * @method multiplyVec3
+ * @param {p5.Vector} multVector the vector to which this matrix applies
+ * @param {p5.Vector} [target] The vector to receive the result
+ * @return {p5.Vector}
+ */
+
+ },
+ {
+ key: 'multiplyVec3',
+ value: function multiplyVec3(multVector, target) {
+ if (target === undefined) {
+ target = multVector.copy();
+ }
+ target.x = this.row(0).dot(multVector);
+ target.y = this.row(1).dot(multVector);
+ target.z = this.row(2).dot(multVector);
+ return target;
+ } /**
+ * This function is only for 4x4 matrices.
+ * Creates a 3x3 matrix whose entries are the top left 3x3 part and returns it.
+ *
+ * @method createSubMatrix3x3
+ * @return {p5.Matrix}
+ */
+
+ },
+ {
+ key: 'createSubMatrix3x3',
+ value: function createSubMatrix3x3() {
+ var result = new _main.default.Matrix('mat3');
+ result.mat3[0] = this.mat4[0];
+ result.mat3[1] = this.mat4[1];
+ result.mat3[2] = this.mat4[2];
+ result.mat3[3] = this.mat4[4];
+ result.mat3[4] = this.mat4[5];
+ result.mat3[5] = this.mat4[6];
+ result.mat3[6] = this.mat4[8];
+ result.mat3[7] = this.mat4[9];
+ result.mat3[8] = this.mat4[10];
+ return result;
+ } /**
+ * PRIVATE
+ */
+ // matrix methods adapted from:
+ // https://developer.mozilla.org/en-US/docs/Web/WebGL/
+ // gluPerspective
+ //
+ // function _makePerspective(fovy, aspect, znear, zfar){
+ // const ymax = znear * Math.tan(fovy * Math.PI / 360.0);
+ // const ymin = -ymax;
+ // const xmin = ymin * aspect;
+ // const xmax = ymax * aspect;
+ // return _makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
+ // }
+ ////
+ //// glFrustum
+ ////
+ //function _makeFrustum(left, right, bottom, top, znear, zfar){
+ // const X = 2*znear/(right-left);
+ // const Y = 2*znear/(top-bottom);
+ // const A = (right+left)/(right-left);
+ // const B = (top+bottom)/(top-bottom);
+ // const C = -(zfar+znear)/(zfar-znear);
+ // const D = -2*zfar*znear/(zfar-znear);
+ // const frustrumMatrix =[
+ // X, 0, A, 0,
+ // 0, Y, B, 0,
+ // 0, 0, C, D,
+ // 0, 0, -1, 0
+ //];
+ //return frustrumMatrix;
+ // }
+ // function _setMVPMatrices(){
+ ////an identity matrix
+ ////@TODO use the p5.Matrix class to abstract away our MV matrices and
+ ///other math
+ //const _mvMatrix =
+ //[
+ // 1.0,0.0,0.0,0.0,
+ // 0.0,1.0,0.0,0.0,
+ // 0.0,0.0,1.0,0.0,
+ // 0.0,0.0,0.0,1.0
+ //];
+
+ }
+ ], [
+ {
+ key: 'identity',
+ value: function identity(pInst) {
+ return new _main.default.Matrix(pInst);
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Matrix;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.float32-array': 229,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249
+ }
+ ],
+ 352: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.map');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ _main.default.RenderBuffer = /*#__PURE__*/ function () {
+ function _class(size, src, dst, attr, renderer, map) {
+ _classCallCheck(this, _class);
+ this.size = size; // the number of FLOATs in each vertex
+ this.src = src; // the name of the model's source array
+ this.dst = dst; // the name of the geometry's buffer
+ this.attr = attr; // the name of the vertex attribute
+ this._renderer = renderer;
+ this.map = map; // optional, a transformation function to apply to src
+ } /**
+ * Enables and binds the buffers used by shader when the appropriate data exists in geometry.
+ * Must always be done prior to drawing geometry in WebGL.
+ * @param {p5.Geometry} geometry Geometry that is going to be drawn
+ * @param {p5.Shader} shader Active shader
+ * @private
+ */
+
+ _createClass(_class, [
+ {
+ key: '_prepareBuffer',
+ value: function _prepareBuffer(geometry, shader) {
+ var attributes = shader.attributes;
+ var gl = this._renderer.GL;
+ var model;
+ if (geometry.model) {
+ model = geometry.model;
+ } else {
+ model = geometry;
+ } // loop through each of the buffer definitions
+
+ var attr = attributes[this.attr];
+ if (!attr) {
+ return;
+ } // check if the model has the appropriate source array
+
+ var buffer = geometry[this.dst];
+ var src = model[this.src];
+ if (src.length > 0) {
+ // check if we need to create the GL buffer
+ var createBuffer = !buffer;
+ if (createBuffer) {
+ // create and remember the buffer
+ geometry[this.dst] = buffer = gl.createBuffer();
+ } // bind the buffer
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ // check if we need to fill the buffer with data
+ if (createBuffer || model.dirtyFlags[this.src] !== false) {
+ var map = this.map;
+ // get the values from the model, possibly transformed
+ var values = map ? map(src) : src;
+ // fill the buffer with the values
+ this._renderer._bindBuffer(buffer, gl.ARRAY_BUFFER, values);
+ // mark the model's source array as clean
+ model.dirtyFlags[this.src] = false;
+ } // enable the attribute
+
+ shader.enableAttrib(attr, this.size);
+ } else {
+ var loc = attr.location;
+ if (loc === - 1 || !this._renderer.registerEnabled.has(loc)) {
+ return;
+ } // Disable register corresponding to unused attribute
+
+ gl.disableVertexAttribArray(loc);
+ // Record register availability
+ this._renderer.registerEnabled.delete(loc);
+ }
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.RenderBuffer;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.map': 182
+ }
+ ],
+ 353: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.find-index');
+ _dereq_('core-js/modules/es.array.from');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.find-index');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.map');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.RenderBuffer');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ } /**
+ * Welcome to RendererGL Immediate Mode.
+ * Immediate mode is used for drawing custom shapes
+ * from a set of vertices. Immediate Mode is activated
+ * when you call beginShape() & de-activated when you call endShape().
+ * Immediate mode is a style of programming borrowed
+ * from OpenGL's (now-deprecated) immediate mode.
+ * It differs from p5.js' default, Retained Mode, which caches
+ * geometries and buffers on the CPU to reduce the number of webgl
+ * draw calls. Retained mode is more efficient & performative,
+ * however, Immediate Mode is useful for sketching quick
+ * geometric ideas.
+ */
+ /**
+ * Begin shape drawing. This is a helpful way of generating
+ * custom shapes quickly. However in WEBGL mode, application
+ * performance will likely drop as a result of too many calls to
+ * beginShape() / endShape(). As a high performance alternative,
+ * please use p5.js geometry primitives.
+ * @private
+ * @method beginShape
+ * @param {Number} mode webgl primitives mode. beginShape supports the
+ * following modes:
+ * POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,
+ * TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP,
+ * and TESS(WEBGL only)
+ * @chainable
+ */
+
+ _main.default.RendererGL.prototype.beginShape = function (mode) {
+ this.immediateMode.shapeMode = mode !== undefined ? mode : constants.TESS;
+ this.immediateMode.geometry.reset();
+ this.immediateMode.contourIndices = [
+ ];
+ return this;
+ };
+ var immediateBufferStrides = {
+ vertices: 1,
+ vertexNormals: 1,
+ vertexColors: 4,
+ vertexStrokeColors: 4,
+ uvs: 2
+ };
+ _main.default.RendererGL.prototype.beginContour = function () {
+ if (this.immediateMode.shapeMode !== constants.TESS) {
+ throw new Error('WebGL mode can only use contours with beginShape(TESS).');
+ }
+ this.immediateMode.contourIndices.push(this.immediateMode.geometry.vertices.length);
+ };
+ /**
+ * adds a vertex to be drawn in a custom Shape.
+ * @private
+ * @method vertex
+ * @param {Number} x x-coordinate of vertex
+ * @param {Number} y y-coordinate of vertex
+ * @param {Number} z z-coordinate of vertex
+ * @chainable
+ * @TODO implement handling of p5.Vector args
+ */
+ _main.default.RendererGL.prototype.vertex = function (x, y) {
+ // WebGL 1 doesn't support QUADS or QUAD_STRIP, so we duplicate data to turn
+ // QUADS into TRIANGLES and QUAD_STRIP into TRIANGLE_STRIP. (There is no extra
+ // work to convert QUAD_STRIP here, since the only difference is in how edges
+ // are rendered.)
+ if (this.immediateMode.shapeMode === constants.QUADS) {
+ // A finished quad turned into triangles should leave 6 vertices in the
+ // buffer:
+ // 0--3 0 3--5
+ // | | --> | \ \ |
+ // 1--2 1--2 4
+ // When vertex index 3 is being added, add the necessary duplicates.
+ if (this.immediateMode.geometry.vertices.length % 6 === 3) {
+ for (var key in immediateBufferStrides) {
+ var stride = immediateBufferStrides[key];
+ var buffer = this.immediateMode.geometry[key];
+ buffer.push.apply(buffer, _toConsumableArray(buffer.slice(buffer.length - 3 * stride, buffer.length - 2 * stride)).concat(_toConsumableArray(buffer.slice(buffer.length - stride, buffer.length))));
+ }
+ }
+ }
+ var z,
+ u,
+ v;
+ // default to (x, y) mode: all other arguments assumed to be 0.
+ z = u = v = 0;
+ if (arguments.length === 3) {
+ // (x, y, z) mode: (u, v) assumed to be 0.
+ z = arguments[2];
+ } else if (arguments.length === 4) {
+ // (x, y, u, v) mode: z assumed to be 0.
+ u = arguments[2];
+ v = arguments[3];
+ } else if (arguments.length === 5) {
+ // (x, y, z, u, v) mode
+ z = arguments[2];
+ u = arguments[3];
+ v = arguments[4];
+ }
+ var vert = new _main.default.Vector(x, y, z);
+ this.immediateMode.geometry.vertices.push(vert);
+ this.immediateMode.geometry.vertexNormals.push(this._currentNormal);
+ var vertexColor = this.curFillColor || [
+ 0.5,
+ 0.5,
+ 0.5,
+ 1
+ ];
+ this.immediateMode.geometry.vertexColors.push(vertexColor[0], vertexColor[1], vertexColor[2], vertexColor[3]);
+ var lineVertexColor = this.curStrokeColor || [
+ 0.5,
+ 0.5,
+ 0.5,
+ 1
+ ];
+ this.immediateMode.geometry.vertexStrokeColors.push(lineVertexColor[0], lineVertexColor[1], lineVertexColor[2], lineVertexColor[3]);
+ if (this.textureMode === constants.IMAGE && !this.isProcessingVertices) {
+ if (this._tex !== null) {
+ if (this._tex.width > 0 && this._tex.height > 0) {
+ u /= this._tex.width;
+ v /= this._tex.height;
+ }
+ } else if (this.userFillShader !== undefined || this.userStrokeShader !== undefined || this.userPointShader !== undefined) {
+ // Do nothing if user-defined shaders are present
+ } else if (this._tex === null && arguments.length >= 4) {
+ // Only throw this warning if custom uv's have been provided
+ console.warn('You must first call texture() before using' + ' vertex() with image based u and v coordinates');
+ }
+ }
+ this.immediateMode.geometry.uvs.push(u, v);
+ this.immediateMode._bezierVertex[0] = x;
+ this.immediateMode._bezierVertex[1] = y;
+ this.immediateMode._bezierVertex[2] = z;
+ this.immediateMode._quadraticVertex[0] = x;
+ this.immediateMode._quadraticVertex[1] = y;
+ this.immediateMode._quadraticVertex[2] = z;
+ return this;
+ };
+ /**
+ * Sets the normal to use for subsequent vertices.
+ * @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) {
+ var count = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1;
+ if (this.immediateMode.shapeMode === constants.POINTS) {
+ this._drawPoints(this.immediateMode.geometry.vertices, this.immediateMode.buffers.point);
+ return this;
+ } // When we are drawing a shape then the shape mode is TESS,
+ // but in case of triangle we can skip the breaking into small triangle
+ // this can optimize performance by skipping the step of breaking it into triangles
+
+ if (this.immediateMode.geometry.vertices.length === 3 && this.immediateMode.shapeMode === constants.TESS) {
+ this.immediateMode.shapeMode === constants.TRIANGLES;
+ }
+ this.isProcessingVertices = true;
+ this._processVertices.apply(this, arguments);
+ this.isProcessingVertices = false;
+ // LINE_STRIP and LINES are not used for rendering, instead
+ // they only indicate a way to modify vertices during the _processVertices() step
+ if (this.immediateMode.shapeMode === constants.LINE_STRIP || this.immediateMode.shapeMode === constants.LINES) {
+ this.immediateMode.shapeMode = constants.TRIANGLE_FAN;
+ } // WebGL doesn't support the QUADS and QUAD_STRIP modes, so we
+ // need to convert them to a supported format. In `vertex()`, we reformat
+ // the input data into the formats specified below.
+
+ if (this.immediateMode.shapeMode === constants.QUADS) {
+ this.immediateMode.shapeMode = constants.TRIANGLES;
+ } else if (this.immediateMode.shapeMode === constants.QUAD_STRIP) {
+ this.immediateMode.shapeMode = constants.TRIANGLE_STRIP;
+ }
+ if (this._doFill) {
+ if (!this.geometryBuilder && this.immediateMode.geometry.vertices.length >= 3) {
+ this._drawImmediateFill(count);
+ }
+ }
+ if (this._doStroke) {
+ if (!this.geometryBuilder && this.immediateMode.geometry.lineVertices.length >= 1) {
+ this._drawImmediateStroke();
+ }
+ }
+ if (this.geometryBuilder) {
+ this.geometryBuilder.addImmediate();
+ }
+ this.isBezier = false;
+ this.isQuadratic = false;
+ this.isCurve = false;
+ this.immediateMode._bezierVertex.length = 0;
+ this.immediateMode._quadraticVertex.length = 0;
+ this.immediateMode._curveVertex.length = 0;
+ return this;
+ };
+ /**
+ * Called from endShape(). This function calculates the stroke vertices for custom shapes and
+ * tesselates shapes when applicable.
+ * @private
+ * @param {Number} mode webgl primitives mode. beginShape supports the
+ * following modes:
+ * POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,
+ * TRIANGLE_STRIP, TRIANGLE_FAN and TESS(WEBGL only)
+ */
+ _main.default.RendererGL.prototype._processVertices = function (mode) {
+ if (this.immediateMode.geometry.vertices.length === 0) return;
+ var calculateStroke = this._doStroke;
+ var shouldClose = mode === constants.CLOSE;
+ if (calculateStroke) {
+ this.immediateMode.geometry.edges = this._calculateEdges(this.immediateMode.shapeMode, this.immediateMode.geometry.vertices, shouldClose);
+ if (!this.geometryBuilder) {
+ this.immediateMode.geometry._edgesToVertices();
+ }
+ } // For hollow shapes, user must set mode to TESS
+
+ var convexShape = this.immediateMode.shapeMode === constants.TESS;
+ // If the shape has a contour, we have to re-triangulate to cut out the
+ // contour region
+ var hasContour = this.immediateMode.contourIndices.length > 0;
+ // We tesselate when drawing curves or convex shapes
+ var shouldTess = this._doFill && (this.isBezier || this.isQuadratic || this.isCurve || convexShape || hasContour) && this.immediateMode.shapeMode !== constants.LINES;
+ if (shouldTess) {
+ this._tesselateShape();
+ }
+ };
+ /**
+ * Called from _processVertices(). This function calculates the stroke vertices for custom shapes and
+ * tesselates shapes when applicable.
+ * @private
+ * @returns {Array[Number]} indices for custom shape vertices indicating edges.
+ */
+ _main.default.RendererGL.prototype._calculateEdges = function (shapeMode, verts, shouldClose) {
+ var res = [
+ ];
+ var i = 0;
+ var contourIndices = this.immediateMode.contourIndices.slice();
+ var contourStart = 0;
+ switch (shapeMode) {
+ case constants.TRIANGLE_STRIP:
+ for (i = 0; i < verts.length - 2; i++) {
+ res.push([i,
+ i + 1]);
+ res.push([i,
+ i + 2]);
+ }
+ res.push([i,
+ i + 1]);
+ break;
+ case constants.TRIANGLE_FAN:
+ for (i = 1; i < verts.length - 1; i++) {
+ res.push([0,
+ i]);
+ res.push([i,
+ i + 1]);
+ }
+ res.push([0,
+ verts.length - 1]);
+ break;
+ case constants.TRIANGLES:
+ for (i = 0; i < verts.length - 2; i = i + 3) {
+ res.push([i,
+ i + 1]);
+ res.push([i + 1,
+ i + 2]);
+ res.push([i + 2,
+ i]);
+ }
+ break;
+ case constants.LINES:
+ for (i = 0; i < verts.length - 1; i = i + 2) {
+ res.push([i,
+ i + 1]);
+ }
+ break;
+ case constants.QUADS:
+ // Quads have been broken up into two triangles by `vertex()`:
+ // 0 3--5
+ // | \ \ |
+ // 1--2 4
+ for (i = 0; i < verts.length - 5; i += 6) {
+ res.push([i,
+ i + 1]);
+ res.push([i + 1,
+ i + 2]);
+ res.push([i + 3,
+ i + 5]);
+ res.push([i + 4,
+ i + 5]);
+ }
+ break;
+ case constants.QUAD_STRIP:
+ // 0---2---4
+ // | | |
+ // 1---3---5
+ for (i = 0; i < verts.length - 2; i += 2) {
+ res.push([i,
+ i + 1]);
+ res.push([i,
+ i + 2]);
+ res.push([i + 1,
+ i + 3]);
+ }
+ res.push([i,
+ i + 1]);
+ break;
+ default:
+ // TODO: handle contours in other modes too
+ for (i = 0; i < verts.length; i++) {
+ // Handle breaks between contours
+ if (i + 1 < verts.length && i + 1 !== contourIndices[0]) {
+ res.push([i,
+ i + 1]);
+ } else {
+ if (shouldClose || contourStart) {
+ res.push([i,
+ contourStart]);
+ }
+ if (contourIndices.length > 0) {
+ contourStart = contourIndices.shift();
+ }
+ }
+ }
+ break;
+ }
+ if (shapeMode !== constants.TESS && shouldClose) {
+ res.push([verts.length - 1,
+ 0]);
+ }
+ return res;
+ };
+ /**
+ * Called from _processVertices() when applicable. This function tesselates immediateMode.geometry.
+ * @private
+ */
+ _main.default.RendererGL.prototype._tesselateShape = function () {
+ var _this = this;
+ // TODO: handle non-TESS shape modes that have contours
+ this.immediateMode.shapeMode = constants.TRIANGLES;
+ var contours = [
+ []
+ ];
+ for (var i = 0; i < this.immediateMode.geometry.vertices.length; i++) {
+ if (this.immediateMode.contourIndices.length > 0 && this.immediateMode.contourIndices[0] === i) {
+ this.immediateMode.contourIndices.shift();
+ contours.push([]);
+ }
+ contours[contours.length - 1].push(this.immediateMode.geometry.vertices[i].x, this.immediateMode.geometry.vertices[i].y, this.immediateMode.geometry.vertices[i].z, this.immediateMode.geometry.uvs[i * 2], this.immediateMode.geometry.uvs[i * 2 + 1], this.immediateMode.geometry.vertexColors[i * 4], this.immediateMode.geometry.vertexColors[i * 4 + 1], this.immediateMode.geometry.vertexColors[i * 4 + 2], this.immediateMode.geometry.vertexColors[i * 4 + 3], this.immediateMode.geometry.vertexNormals[i].x, this.immediateMode.geometry.vertexNormals[i].y, this.immediateMode.geometry.vertexNormals[i].z);
+ }
+ var polyTriangles = this._triangulate(contours);
+ var originalVertices = this.immediateMode.geometry.vertices;
+ this.immediateMode.geometry.vertices = [
+ ];
+ this.immediateMode.geometry.vertexNormals = [
+ ];
+ this.immediateMode.geometry.uvs = [
+ ];
+ var colors = [
+ ];
+ for (var j = 0, polyTriLength = polyTriangles.length; j < polyTriLength; j = j + _main.default.RendererGL.prototype.tessyVertexSize) {
+ colors.push.apply(colors, _toConsumableArray(polyTriangles.slice(j + 5, j + 9)));
+ this.normal.apply(this, _toConsumableArray(polyTriangles.slice(j + 9, j + 12)));
+ this.vertex.apply(this, _toConsumableArray(polyTriangles.slice(j, j + 5)));
+ }
+ if (this.geometryBuilder) {
+ // Tesselating the face causes the indices of edge vertices to stop being
+ // correct. When rendering, this is not a problem, since _edgesToVertices
+ // will have been called before this, and edge vertex indices are no longer
+ // needed. However, the geometry builder still needs this information, so
+ // when one is active, we need to update the indices.
+ //
+ // We record index mappings in a Map so that once we have found a
+ // corresponding vertex, we don't need to loop to find it again.
+ var newIndex = new Map();
+ this.immediateMode.geometry.edges = this.immediateMode.geometry.edges.map(function (edge) {
+ return edge.map(function (origIdx) {
+ if (!newIndex.has(origIdx)) {
+ var orig = originalVertices[origIdx];
+ var newVertIndex = _this.immediateMode.geometry.vertices.findIndex(function (v) {
+ return orig.x === v.x && orig.y === v.y && orig.z === v.z;
+ });
+ if (newVertIndex === - 1) {
+ // The tesselation process didn't output a vertex with the exact
+ // coordinate as before, potentially due to numerical issues. This
+ // doesn't happen often, but in this case, pick the closest point
+ var closestDist = Infinity;
+ var closestIndex = 0;
+ for (var _i = 0; _i < _this.immediateMode.geometry.vertices.length; _i++) {
+ var vert = _this.immediateMode.geometry.vertices[_i];
+ var dX = orig.x - vert.x;
+ var dY = orig.y - vert.y;
+ var dZ = orig.z - vert.z;
+ var dist = dX * dX + dY * dY + dZ * dZ;
+ if (dist < closestDist) {
+ closestDist = dist;
+ closestIndex = _i;
+ }
+ }
+ newVertIndex = closestIndex;
+ }
+ newIndex.set(origIdx, newVertIndex);
+ }
+ return newIndex.get(origIdx);
+ });
+ });
+ }
+ this.immediateMode.geometry.vertexColors = colors;
+ };
+ /**
+ * Called from endShape(). Responsible for calculating normals, setting shader uniforms,
+ * enabling all appropriate buffers, applying color blend, and drawing the fill geometry.
+ * @private
+ */
+ _main.default.RendererGL.prototype._drawImmediateFill = function () {
+ var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+ var gl = this.GL;
+ this._useVertexColor = this.immediateMode.geometry.vertexColors.length > 0;
+ var shader;
+ shader = this._getImmediateFillShader();
+ this._setFillUniforms(shader);
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.immediateMode.buffers.fill[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var buff = _step.value;
+ buff._prepareBuffer(this.immediateMode.geometry, shader);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ shader.disableRemainingAttributes();
+ this._applyColorBlend(this.curFillColor);
+ if (count === 1) {
+ gl.drawArrays(this.immediateMode.shapeMode, 0, this.immediateMode.geometry.vertices.length);
+ } else {
+ try {
+ gl.drawArraysInstanced(this.immediateMode.shapeMode, 0, this.immediateMode.geometry.vertices.length, count);
+ } catch (e) {
+ console.log('🌸 p5.js says: Instancing is only supported in WebGL2 mode');
+ }
+ }
+ shader.unbindShader();
+ };
+ /**
+ * Called from endShape(). Responsible for calculating normals, setting shader uniforms,
+ * enabling all appropriate buffers, applying color blend, and drawing the stroke geometry.
+ * @private
+ */
+ _main.default.RendererGL.prototype._drawImmediateStroke = function () {
+ var gl = this.GL;
+ this._useLineColor = this.immediateMode.geometry.vertexStrokeColors.length > 0;
+ var shader = this._getImmediateStrokeShader();
+ this._setStrokeUniforms(shader);
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = this.immediateMode.buffers.stroke[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var buff = _step2.value;
+ buff._prepareBuffer(this.immediateMode.geometry, shader);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ shader.disableRemainingAttributes();
+ this._applyColorBlend(this.curStrokeColor);
+ gl.drawArrays(gl.TRIANGLES, 0, this.immediateMode.geometry.lineVertices.length / 3);
+ shader.unbindShader();
+ };
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ './p5.RenderBuffer': 352,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.fill': 172,
+ 'core-js/modules/es.array.find-index': 174,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.map': 182,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.map': 187,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 354: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.uint16-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.uint16-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ _dereq_('./p5.RendererGL');
+ _dereq_('./p5.RenderBuffer');
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } //Retained Mode. The default mode for rendering 3D primitives
+ //in WEBGL.
+ /**
+ * @param {p5.Geometry} geometry The model whose resources will be freed
+ */
+
+ _main.default.RendererGL.prototype.freeGeometry = function (geometry) {
+ if (!geometry.gid) {
+ console.warn('The model you passed to freeGeometry does not have an id!');
+ return;
+ }
+ this._freeBuffers(geometry.gid);
+ };
+ /**
+ * _initBufferDefaults
+ * @private
+ * @description initializes buffer defaults. runs each time a new geometry is
+ * registered
+ * @param {String} gId key of the geometry object
+ * @returns {Object} a new buffer object
+ */
+ _main.default.RendererGL.prototype._initBufferDefaults = function (gId) {
+ this._freeBuffers(gId);
+ //@TODO remove this limit on hashes in retainedMode.geometry
+ if (Object.keys(this.retainedMode.geometry).length > 1000) {
+ var key = Object.keys(this.retainedMode.geometry) [0];
+ this._freeBuffers(key);
+ } //create a new entry in our retainedMode.geometry
+
+ return this.retainedMode.geometry[gId] = {
+ };
+ };
+ _main.default.RendererGL.prototype._freeBuffers = function (gId) {
+ var buffers = this.retainedMode.geometry[gId];
+ if (!buffers) {
+ return;
+ }
+ delete this.retainedMode.geometry[gId];
+ var gl = this.GL;
+ if (buffers.indexBuffer) {
+ gl.deleteBuffer(buffers.indexBuffer);
+ }
+ function freeBuffers(defs) {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = defs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var def = _step.value;
+ if (buffers[def.dst]) {
+ gl.deleteBuffer(buffers[def.dst]);
+ buffers[def.dst] = null;
+ }
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ } // free all the buffers
+
+ freeBuffers(this.retainedMode.buffers.stroke);
+ freeBuffers(this.retainedMode.buffers.fill);
+ };
+ /**
+ * creates a buffers object that holds the WebGL render buffers
+ * for a geometry.
+ * @private
+ * @param {String} gId key of the geometry object
+ * @param {p5.Geometry} model contains geometry data
+ */
+ _main.default.RendererGL.prototype.createBuffers = function (gId, model) {
+ var gl = this.GL;
+ //initialize the gl buffers for our geom groups
+ var buffers = this._initBufferDefaults(gId);
+ buffers.model = model;
+ var indexBuffer = buffers.indexBuffer;
+ if (model.faces.length) {
+ // allocate space for faces
+ if (!indexBuffer) indexBuffer = buffers.indexBuffer = gl.createBuffer();
+ var vals = _main.default.RendererGL.prototype._flatten(model.faces);
+ // If any face references a vertex with an index greater than the maximum
+ // un-singed 16 bit integer, then we need to use a Uint32Array instead of a
+ // Uint16Array
+ var hasVertexIndicesOverMaxUInt16 = vals.some(function (v) {
+ return v > 65535;
+ });
+ var type = hasVertexIndicesOverMaxUInt16 ? Uint32Array : Uint16Array;
+ this._bindBuffer(indexBuffer, gl.ELEMENT_ARRAY_BUFFER, vals, type);
+ // If we're using a Uint32Array for our indexBuffer we will need to pass a
+ // different enum value to WebGL draw triangles. This happens in
+ // the _drawElements function.
+ buffers.indexBufferType = hasVertexIndicesOverMaxUInt16 ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
+ // the vertex count is based on the number of faces
+ buffers.vertexCount = model.faces.length * 3;
+ } else {
+ // the index buffer is unused, remove it
+ if (indexBuffer) {
+ gl.deleteBuffer(indexBuffer);
+ buffers.indexBuffer = null;
+ } // the vertex count comes directly from the model
+
+ buffers.vertexCount = model.vertices ? model.vertices.length : 0;
+ }
+ buffers.lineVertexCount = model.lineVertices ? model.lineVertices.length / 3 : 0;
+ return buffers;
+ };
+ /**
+ * Draws buffers given a geometry key ID
+ * @private
+ * @param {String} gId ID in our geom hash
+ * @chainable
+ */
+ _main.default.RendererGL.prototype.drawBuffers = function (gId) {
+ var gl = this.GL;
+ var geometry = this.retainedMode.geometry[gId];
+ if (!this.geometryBuilder && this._doFill && this.retainedMode.geometry[gId].vertexCount > 0) {
+ this._useVertexColor = geometry.model.vertexColors.length > 0;
+ var fillShader = this._getRetainedFillShader();
+ this._setFillUniforms(fillShader);
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = this.retainedMode.buffers.fill[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var buff = _step2.value;
+ buff._prepareBuffer(geometry, fillShader);
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ fillShader.disableRemainingAttributes();
+ if (geometry.indexBuffer) {
+ //vertex index buffer
+ this._bindBuffer(geometry.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
+ }
+ this._applyColorBlend(this.curFillColor);
+ this._drawElements(gl.TRIANGLES, gId);
+ fillShader.unbindShader();
+ }
+ if (!this.geometryBuilder && this._doStroke && geometry.lineVertexCount > 0) {
+ this._useLineColor = geometry.model.vertexStrokeColors.length > 0;
+ var strokeShader = this._getRetainedStrokeShader();
+ this._setStrokeUniforms(strokeShader);
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = this.retainedMode.buffers.stroke[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var _buff = _step3.value;
+ _buff._prepareBuffer(geometry, strokeShader);
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ strokeShader.disableRemainingAttributes();
+ this._applyColorBlend(this.curStrokeColor);
+ this._drawArrays(gl.TRIANGLES, gId);
+ strokeShader.unbindShader();
+ }
+ if (this.geometryBuilder) {
+ this.geometryBuilder.addRetained(geometry);
+ }
+ return this;
+ };
+ /**
+ * Calls drawBuffers() with a scaled model/view matrix.
+ *
+ * This is used by various 3d primitive methods (in primitives.js, eg. plane,
+ * box, torus, etc...) to allow caching of un-scaled geometries. Those
+ * geometries are generally created with unit-length dimensions, cached as
+ * such, and then scaled appropriately in this method prior to rendering.
+ *
+ * @private
+ * @method drawBuffersScaled
+ * @param {String} gId ID in our geom hash
+ * @param {Number} scaleX the amount to scale in the X direction
+ * @param {Number} scaleY the amount to scale in the Y direction
+ * @param {Number} scaleZ the amount to scale in the Z direction
+ */
+ _main.default.RendererGL.prototype.drawBuffersScaled = function (gId, scaleX, scaleY, scaleZ) {
+ var uMVMatrix = this.uMVMatrix.copy();
+ try {
+ this.uMVMatrix.scale(scaleX, scaleY, scaleZ);
+ this.drawBuffers(gId);
+ } finally {
+ this.uMVMatrix = uMVMatrix;
+ }
+ };
+ _main.default.RendererGL.prototype._drawArrays = function (drawMode, gId) {
+ this.GL.drawArrays(drawMode, 0, this.retainedMode.geometry[gId].lineVertexCount);
+ return this;
+ };
+ _main.default.RendererGL.prototype._drawElements = function (drawMode, gId) {
+ var buffers = this.retainedMode.geometry[gId];
+ var gl = this.GL;
+ // render the fill
+ if (buffers.indexBuffer) {
+ // If this model is using a Uint32Array we need to ensure the
+ // OES_element_index_uint WebGL extension is enabled.
+ if (this._pInst.webglVersion !== constants.WEBGL2 && buffers.indexBufferType === gl.UNSIGNED_INT) {
+ if (!gl.getExtension('OES_element_index_uint')) {
+ throw new Error('Unable to render a 3d model with > 65535 triangles. Your web browser does not support the WebGL Extension OES_element_index_uint.');
+ }
+ } // we're drawing faces
+
+ gl.drawElements(gl.TRIANGLES, buffers.vertexCount, buffers.indexBufferType, 0);
+ } else {
+ // drawing vertices
+ gl.drawArrays(drawMode || gl.TRIANGLES, 0, buffers.vertexCount);
+ }
+ };
+ _main.default.RendererGL.prototype._drawPoints = function (vertices, vertexBuffer) {
+ var gl = this.GL;
+ var pointShader = this._getImmediatePointShader();
+ this._setPointUniforms(pointShader);
+ this._bindBuffer(vertexBuffer, gl.ARRAY_BUFFER, this._vToNArray(vertices), Float32Array, gl.STATIC_DRAW);
+ pointShader.enableAttrib(pointShader.attributes.aPosition, 3);
+ this._applyColorBlend(this.curStrokeColor);
+ gl.drawArrays(gl.Points, 0, vertices.length);
+ pointShader.unbindShader();
+ };
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ './p5.RenderBuffer': 352,
+ './p5.RendererGL': 355,
+ 'core-js/modules/es.array.fill': 172,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.some': 184,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.keys': 199,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.float32-array': 229,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint16-array': 250,
+ 'core-js/modules/es.typed-array.uint32-array': 251,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 355: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.copy-within');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.fill');
+ _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.array.some');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.get-prototype-of');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.reflect.construct');
+ _dereq_('core-js/modules/es.reflect.get');
+ _dereq_('core-js/modules/es.regexp.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.float64-array');
+ _dereq_('core-js/modules/es.typed-array.int16-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint16-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.concat');
+ _dereq_('core-js/modules/es.array.copy-within');
+ _dereq_('core-js/modules/es.array.every');
+ _dereq_('core-js/modules/es.array.fill');
+ _dereq_('core-js/modules/es.array.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.array.some');
+ _dereq_('core-js/modules/es.map');
+ _dereq_('core-js/modules/es.object.assign');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.set');
+ _dereq_('core-js/modules/es.string.includes');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.typed-array.float32-array');
+ _dereq_('core-js/modules/es.typed-array.float64-array');
+ _dereq_('core-js/modules/es.typed-array.int16-array');
+ _dereq_('core-js/modules/es.typed-array.uint8-array');
+ _dereq_('core-js/modules/es.typed-array.uint16-array');
+ _dereq_('core-js/modules/es.typed-array.uint32-array');
+ _dereq_('core-js/modules/es.typed-array.copy-within');
+ _dereq_('core-js/modules/es.typed-array.every');
+ _dereq_('core-js/modules/es.typed-array.fill');
+ _dereq_('core-js/modules/es.typed-array.filter');
+ _dereq_('core-js/modules/es.typed-array.find');
+ _dereq_('core-js/modules/es.typed-array.find-index');
+ _dereq_('core-js/modules/es.typed-array.for-each');
+ _dereq_('core-js/modules/es.typed-array.includes');
+ _dereq_('core-js/modules/es.typed-array.index-of');
+ _dereq_('core-js/modules/es.typed-array.iterator');
+ _dereq_('core-js/modules/es.typed-array.join');
+ _dereq_('core-js/modules/es.typed-array.last-index-of');
+ _dereq_('core-js/modules/es.typed-array.map');
+ _dereq_('core-js/modules/es.typed-array.reduce');
+ _dereq_('core-js/modules/es.typed-array.reduce-right');
+ _dereq_('core-js/modules/es.typed-array.reverse');
+ _dereq_('core-js/modules/es.typed-array.set');
+ _dereq_('core-js/modules/es.typed-array.slice');
+ _dereq_('core-js/modules/es.typed-array.some');
+ _dereq_('core-js/modules/es.typed-array.sort');
+ _dereq_('core-js/modules/es.typed-array.subarray');
+ _dereq_('core-js/modules/es.typed-array.to-locale-string');
+ _dereq_('core-js/modules/es.typed-array.to-string');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.readPixelsWebGL = readPixelsWebGL;
+ exports.readPixelWebGL = readPixelWebGL;
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ var _GeometryBuilder = _interopRequireDefault(_dereq_('./GeometryBuilder'));
+ var _libtess = _interopRequireDefault(_dereq_('libtess'));
+ _dereq_('./p5.Shader');
+ _dereq_('./p5.Camera');
+ _dereq_('../core/p5.Renderer');
+ _dereq_('./p5.Matrix');
+ _dereq_('./p5.Framebuffer');
+ var _path = _dereq_('path');
+ var _filterShaderFrags;
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ }
+ function _nonIterableSpread() {
+ throw new TypeError('Invalid attempt to spread non-iterable instance');
+ }
+ function _iterableToArray(iter) {
+ if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter);
+ }
+ function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) {
+ for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+ arr2[i] = arr[i];
+ }
+ return arr2;
+ }
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+ function _get(target, property, receiver) {
+ if (typeof Reflect !== 'undefined' && Reflect.get) {
+ _get = Reflect.get;
+ } else {
+ _get = function _get(target, property, receiver) {
+ var base = _superPropBase(target, property);
+ if (!base) return;
+ var desc = Object.getOwnPropertyDescriptor(base, property);
+ if (desc.get) {
+ return desc.get.call(receiver);
+ }
+ return desc.value;
+ };
+ }
+ return _get(target, property, receiver || target);
+ }
+ function _superPropBase(object, property) {
+ while (!Object.prototype.hasOwnProperty.call(object, property)) {
+ object = _getPrototypeOf(object);
+ if (object === null) break;
+ }
+ return object;
+ }
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== 'function' && superClass !== null) {
+ throw new TypeError('Super expression must either be null or a function');
+ }
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+ return _setPrototypeOf(o, p);
+ }
+ function _createSuper(Derived) {
+ function isNativeReflectConstruct() {
+ if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === 'function') return true;
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [
+ ], function () {
+ }));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+ return function () {
+ var Super = _getPrototypeOf(Derived),
+ result;
+ if (isNativeReflectConstruct()) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+ function _possibleConstructorReturn(self, call) {
+ if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+ return call;
+ }
+ return _assertThisInitialized(self);
+ }
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');
+ }
+ return self;
+ }
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+ function _defineProperty(obj, key, value) {
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+ return obj;
+ }
+ var STROKE_CAP_ENUM = {
+ };
+ var STROKE_JOIN_ENUM = {
+ };
+ var lineDefs = '';
+ var defineStrokeCapEnum = function defineStrokeCapEnum(key, val) {
+ lineDefs += '#define STROKE_CAP_'.concat(key, ' ').concat(val, '\n');
+ STROKE_CAP_ENUM[constants[key]] = val;
+ };
+ var defineStrokeJoinEnum = function defineStrokeJoinEnum(key, val) {
+ lineDefs += '#define STROKE_JOIN_'.concat(key, ' ').concat(val, '\n');
+ STROKE_JOIN_ENUM[constants[key]] = val;
+ };
+ // Define constants in line shaders for each type of cap/join, and also record
+ // the values in JS objects
+ defineStrokeCapEnum('ROUND', 0);
+ defineStrokeCapEnum('PROJECT', 1);
+ defineStrokeCapEnum('SQUARE', 2);
+ defineStrokeJoinEnum('ROUND', 0);
+ defineStrokeJoinEnum('MITER', 1);
+ defineStrokeJoinEnum('BEVEL', 2);
+ var lightingShader = '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 webgl2CompatibilityShader = '#ifdef WEBGL2\n\n#define IN in\n#define OUT out\n\n#ifdef FRAGMENT_SHADER\nout vec4 outColor;\n#define OUT_COLOR outColor\n#endif\n#define TEXTURE texture\n\n#else\n\n#ifdef FRAGMENT_SHADER\n#define IN varying\n#else\n#define IN attribute\n#endif\n#define OUT varying\n#define TEXTURE texture2D\n\n#ifdef FRAGMENT_SHADER\n#define OUT_COLOR gl_FragColor\n#endif\n\n#endif\n';
+ var defaultShaders = {
+ 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 = vec4(vColor.rgb, 1.) * vColor.a;\n}\n',
+ normalVert: 'attribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\nattribute vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nuniform vec4 uMaterialColor;\nuniform bool uUseVertexColor;\n\nvarying vec3 vVertexNormal;\nvarying highp vec2 vVertTexCoord;\nvarying vec4 vColor;\n\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vVertexNormal = normalize(vec3( uNormalMatrix * aNormal ));\n vVertTexCoord = aTexCoord;\n vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);\n}\n',
+ normalFrag: 'precision mediump float;\nvarying vec3 vVertexNormal;\nvoid main(void) {\n gl_FragColor = vec4(vVertexNormal, 1.0);\n}',
+ basicFrag: 'precision mediump float;\nvarying vec4 vColor;\nvoid main(void) {\n gl_FragColor = vec4(vColor.rgb, 1.) * vColor.a;\n}\n',
+ lightVert: lightingShader + '// include lighting.glgl\n\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\nattribute vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nvarying highp vec2 vVertTexCoord;\nvarying vec3 vDiffuseColor;\nvarying vec3 vSpecularColor;\nvarying vec4 vColor;\n\nvoid main(void) {\n\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n\n vec3 vertexNormal = normalize(uNormalMatrix * aNormal);\n vVertTexCoord = aTexCoord;\n\n totalLight(viewModelPosition.xyz, vertexNormal, vDiffuseColor, vSpecularColor);\n\n for (int i = 0; i < 8; i++) {\n if (i < uAmbientLightCount) {\n vDiffuseColor += uAmbientColor[i];\n }\n }\n \n vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);\n}\n',
+ lightTextureFrag: 'precision highp float;\n\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\nuniform bool uEmissive;\n\nvarying highp vec2 vVertTexCoord;\nvarying vec3 vDiffuseColor;\nvarying vec3 vSpecularColor;\nvarying vec4 vColor;\n\nvoid main(void) {\n if(uEmissive && !isTexture) {\n gl_FragColor = vColor;\n }\n else {\n vec4 baseColor = isTexture\n // Textures come in with premultiplied alpha. To apply tint and still have\n // premultiplied alpha output, we need to multiply the RGB channels by the\n // tint RGB, and all channels by the tint alpha.\n ? texture2D(uSampler, vVertTexCoord) * vec4(uTint.rgb/255., 1.) * (uTint.a/255.)\n // Colors come in with unmultiplied alpha, so we need to multiply the RGB\n // channels by alpha to convert it to premultiplied alpha.\n : vec4(vColor.rgb * vColor.a, vColor.a);\n gl_FragColor = vec4(baseColor.rgb * vDiffuseColor + vSpecularColor, baseColor.a);\n }\n}\n',
+ phongVert: 'precision highp float;\nprecision highp int;\n\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\nattribute vec4 aVertexColor;\n\nuniform vec3 uAmbientColor[5];\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\nuniform int uAmbientLightCount;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nvarying vec3 vNormal;\nvarying vec2 vTexCoord;\nvarying vec3 vViewPosition;\nvarying vec3 vAmbientColor;\nvarying vec4 vColor;\n\nvoid main(void) {\n\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n\n // Pass varyings to fragment shader\n vViewPosition = viewModelPosition.xyz;\n gl_Position = uProjectionMatrix * viewModelPosition; \n\n vNormal = uNormalMatrix * aNormal;\n vTexCoord = aTexCoord;\n\n // TODO: this should be a uniform\n vAmbientColor = vec3(0.0);\n for (int i = 0; i < 5; i++) {\n if (i < uAmbientLightCount) {\n vAmbientColor += uAmbientColor[i];\n }\n }\n \n vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);\n}\n',
+ phongFrag: lightingShader + '// include lighting.glsl\nprecision highp float;\nprecision highp int;\n\nuniform bool uHasSetAmbient;\nuniform vec4 uSpecularMatColor;\nuniform vec4 uAmbientMatColor;\nuniform vec4 uEmissiveMatColor;\n\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\n\nvarying vec3 vNormal;\nvarying vec2 vTexCoord;\nvarying vec3 vViewPosition;\nvarying vec3 vAmbientColor;\nvarying vec4 vColor;\n\nvoid main(void) {\n\n vec3 diffuse;\n vec3 specular;\n totalLight(vViewPosition, normalize(vNormal), diffuse, specular);\n\n // Calculating final color as result of all lights (plus emissive term).\n\n vec4 baseColor = isTexture\n // Textures come in with premultiplied alpha. To apply tint and still have\n // premultiplied alpha output, we need to multiply the RGB channels by the\n // tint RGB, and all channels by the tint alpha.\n ? texture2D(uSampler, vTexCoord) * vec4(uTint.rgb/255., 1.) * (uTint.a/255.)\n // Colors come in with unmultiplied alpha, so we need to multiply the RGB\n // channels by alpha to convert it to premultiplied alpha.\n : vec4(vColor.rgb * vColor.a, vColor.a);\n gl_FragColor = vec4(diffuse * baseColor.rgb + \n vAmbientColor * (\n uHasSetAmbient ? uAmbientMatColor.rgb : baseColor.rgb\n ) + \n specular * uSpecularMatColor.rgb + \n uEmissiveMatColor.rgb, baseColor.a);\n}\n',
+ fontVert: webgl2CompatibilityShader + 'IN vec3 aPosition;\nIN vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uGlyphRect;\nuniform float uGlyphOffset;\n\nOUT vec2 vTexCoord;\nOUT float w;\n\nvoid main() {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // scale by the size of the glyph\'s rectangle\n positionVec4.xy *= uGlyphRect.zw - uGlyphRect.xy;\n\n // Expand glyph bounding boxes by 1px on each side to give a bit of room\n // for antialiasing\n vec3 newOrigin = (uModelViewMatrix * vec4(0., 0., 0., 1.)).xyz;\n vec3 newDX = (uModelViewMatrix * vec4(1., 0., 0., 1.)).xyz;\n vec3 newDY = (uModelViewMatrix * vec4(0., 1., 0., 1.)).xyz;\n vec2 pixelScale = vec2(\n 1. / length(newOrigin - newDX),\n 1. / length(newOrigin - newDY)\n );\n vec2 offset = pixelScale * normalize(aTexCoord - vec2(0.5, 0.5)) * vec2(1., -1.);\n vec2 textureOffset = offset * (1. / vec2(\n uGlyphRect.z - uGlyphRect.x,\n uGlyphRect.w - uGlyphRect.y\n ));\n\n // move to the corner of the glyph\n positionVec4.xy += uGlyphRect.xy;\n\n // move to the letter\'s line offset\n positionVec4.x += uGlyphOffset;\n\n positionVec4.xy += offset;\n \n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vTexCoord = aTexCoord + textureOffset;\n w = gl_Position.w;\n}\n',
+ fontFrag: webgl2CompatibilityShader + '#ifndef WEBGL2\n#extension GL_OES_standard_derivatives : enable\n#endif\n\n#if 0\n // simulate integer math using floats\n\t#define int float\n\t#define ivec2 vec2\n\t#define INT(x) float(x)\n\n\tint ifloor(float v) { return floor(v); }\n\tivec2 ifloor(vec2 v) { return floor(v); }\n\n#else\n // use native integer math\n\tprecision highp int;\n\t#define INT(x) x\n\n\tint ifloor(float v) { return int(v); }\n\tint ifloor(int v) { return v; }\n\tivec2 ifloor(vec2 v) { return ivec2(v); }\n\n#endif\n\nuniform sampler2D uSamplerStrokes;\nuniform sampler2D uSamplerRowStrokes;\nuniform sampler2D uSamplerRows;\nuniform sampler2D uSamplerColStrokes;\nuniform sampler2D uSamplerCols;\n\nuniform ivec2 uStrokeImageSize;\nuniform ivec2 uCellsImageSize;\nuniform ivec2 uGridImageSize;\n\nuniform ivec2 uGridOffset;\nuniform ivec2 uGridSize;\nuniform vec4 uMaterialColor;\n\nIN vec2 vTexCoord;\n\n// some helper functions\nint ROUND(float v) { return ifloor(v + 0.5); }\nivec2 ROUND(vec2 v) { return ifloor(v + 0.5); }\nfloat saturate(float v) { return clamp(v, 0.0, 1.0); }\nvec2 saturate(vec2 v) { return clamp(v, 0.0, 1.0); }\n\nint mul(float v1, int v2) {\n return ifloor(v1 * float(v2));\n}\n\nivec2 mul(vec2 v1, ivec2 v2) {\n return ifloor(v1 * vec2(v2) + 0.5);\n}\n\n// unpack a 16-bit integer from a float vec2\nint getInt16(vec2 v) {\n ivec2 iv = ROUND(v * 255.0);\n return iv.x * INT(128) + iv.y;\n}\n\nvec2 pixelScale;\nvec2 coverage = vec2(0.0);\nvec2 weight = vec2(0.5);\nconst float minDistance = 1.0/8192.0;\nconst float hardness = 1.05; // amount of antialias\n\n// the maximum number of curves in a glyph\nconst int N = INT(250);\n\n// retrieves an indexed pixel from a sampler\nvec4 getTexel(sampler2D sampler, int pos, ivec2 size) {\n int width = size.x;\n int y = ifloor(pos / width);\n int x = pos - y * width; // pos % width\n\n return TEXTURE(sampler, (vec2(x, y) + 0.5) / vec2(size));\n}\n\nvoid calulateCrossings(vec2 p0, vec2 p1, vec2 p2, out vec2 C1, out vec2 C2) {\n\n // get the coefficients of the quadratic in t\n vec2 a = p0 - p1 * 2.0 + p2;\n vec2 b = p0 - p1;\n vec2 c = p0 - vTexCoord;\n\n // found out which values of \'t\' it crosses the axes\n vec2 surd = sqrt(max(vec2(0.0), b * b - a * c));\n vec2 t1 = ((b - surd) / a).yx;\n vec2 t2 = ((b + surd) / a).yx;\n\n // approximate straight lines to avoid rounding errors\n if (abs(a.y) < 0.001)\n t1.x = t2.x = c.y / (2.0 * b.y);\n\n if (abs(a.x) < 0.001)\n t1.y = t2.y = c.x / (2.0 * b.x);\n\n // plug into quadratic formula to find the corrdinates of the crossings\n C1 = ((a * t1 - b * 2.0) * t1 + c) * pixelScale;\n C2 = ((a * t2 - b * 2.0) * t2 + c) * pixelScale;\n}\n\nvoid coverageX(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n // determine on which side of the x-axis the points lie\n bool y0 = p0.y > vTexCoord.y;\n bool y1 = p1.y > vTexCoord.y;\n bool y2 = p2.y > vTexCoord.y;\n\n // could web be under the curve (after t1)?\n if (y1 ? !y2 : y0) {\n // add the coverage for t1\n coverage.x += saturate(C1.x + 0.5);\n // calculate the anti-aliasing for t1\n weight.x = min(weight.x, abs(C1.x));\n }\n\n // are we outside the curve (after t2)?\n if (y1 ? !y0 : y2) {\n // subtract the coverage for t2\n coverage.x -= saturate(C2.x + 0.5);\n // calculate the anti-aliasing for t2\n weight.x = min(weight.x, abs(C2.x));\n }\n}\n\n// this is essentially the same as coverageX, but with the axes swapped\nvoid coverageY(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n bool x0 = p0.x > vTexCoord.x;\n bool x1 = p1.x > vTexCoord.x;\n bool x2 = p2.x > vTexCoord.x;\n\n if (x1 ? !x2 : x0) {\n coverage.y -= saturate(C1.y + 0.5);\n weight.y = min(weight.y, abs(C1.y));\n }\n\n if (x1 ? !x0 : x2) {\n coverage.y += saturate(C2.y + 0.5);\n weight.y = min(weight.y, abs(C2.y));\n }\n}\n\nvoid main() {\n\n // calculate the pixel scale based on screen-coordinates\n pixelScale = hardness / fwidth(vTexCoord);\n\n // which grid cell is this pixel in?\n ivec2 gridCoord = ifloor(vTexCoord * vec2(uGridSize));\n\n // intersect curves in this row\n {\n // the index into the row info bitmap\n int rowIndex = gridCoord.y + uGridOffset.y;\n // fetch the info texel\n vec4 rowInfo = getTexel(uSamplerRows, rowIndex, uGridImageSize);\n // unpack the rowInfo\n int rowStrokeIndex = getInt16(rowInfo.xy);\n int rowStrokeCount = getInt16(rowInfo.zw);\n\n for (int iRowStroke = INT(0); iRowStroke < N; iRowStroke++) {\n if (iRowStroke >= rowStrokeCount)\n break;\n\n // each stroke is made up of 3 points: the start and control point\n // and the start of the next curve.\n // fetch the indices of this pair of strokes:\n vec4 strokeIndices = getTexel(uSamplerRowStrokes, rowStrokeIndex++, uCellsImageSize);\n\n // unpack the stroke index\n int strokePos = getInt16(strokeIndices.xy);\n\n // fetch the two strokes\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n\n // calculate the coverage\n coverageX(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n // intersect curves in this column\n {\n int colIndex = gridCoord.x + uGridOffset.x;\n vec4 colInfo = getTexel(uSamplerCols, colIndex, uGridImageSize);\n int colStrokeIndex = getInt16(colInfo.xy);\n int colStrokeCount = getInt16(colInfo.zw);\n \n for (int iColStroke = INT(0); iColStroke < N; iColStroke++) {\n if (iColStroke >= colStrokeCount)\n break;\n\n vec4 strokeIndices = getTexel(uSamplerColStrokes, colStrokeIndex++, uCellsImageSize);\n\n int strokePos = getInt16(strokeIndices.xy);\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n coverageY(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n weight = saturate(1.0 - weight * 2.0);\n float distance = max(weight.x + weight.y, minDistance); // manhattan approx.\n float antialias = abs(dot(coverage, weight) / distance);\n float cover = min(abs(coverage.x), abs(coverage.y));\n OUT_COLOR = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n OUT_COLOR *= saturate(max(antialias, cover));\n}\n',
+ lineVert: lineDefs + '/*\n Part of the Processing project - http://processing.org\n Copyright (c) 2012-15 The Processing Foundation\n Copyright (c) 2004-12 Ben Fry and Casey Reas\n Copyright (c) 2001-04 Massachusetts Institute of Technology\n This library is free software; you can redistribute it and/or\n modify it under the terms of the GNU Lesser General Public\n License as published by the Free Software Foundation, version 2.1.\n This library is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\n Lesser General Public License for more details.\n You should have received a copy of the GNU Lesser General\n Public License along with this library; if not, write to the\n Free Software Foundation, Inc., 59 Temple Place, Suite 330,\n Boston, MA 02111-1307 USA\n*/\n\n#define PROCESSING_LINE_SHADER\n\nprecision mediump float;\nprecision mediump int;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform bool uUseLineColor;\nuniform vec4 uMaterialColor;\n\nuniform vec4 uViewport;\nuniform int uPerspective;\nuniform int uStrokeJoin;\n\nattribute vec4 aPosition;\nattribute vec3 aTangentIn;\nattribute vec3 aTangentOut;\nattribute float aSide;\nattribute vec4 aVertexColor;\n\nvarying vec4 vColor;\nvarying vec2 vTangent;\nvarying vec2 vCenter;\nvarying vec2 vPosition;\nvarying float vMaxDist;\nvarying float vCap;\nvarying float vJoin;\n\nvec2 lineIntersection(vec2 aPoint, vec2 aDir, vec2 bPoint, vec2 bDir) {\n // Rotate and translate so a starts at the origin and goes out to the right\n bPoint -= aPoint;\n vec2 rotatedBFrom = vec2(\n bPoint.x*aDir.x + bPoint.y*aDir.y,\n bPoint.y*aDir.x - bPoint.x*aDir.y\n );\n vec2 bTo = bPoint + bDir;\n vec2 rotatedBTo = vec2(\n bTo.x*aDir.x + bTo.y*aDir.y,\n bTo.y*aDir.x - bTo.x*aDir.y\n );\n float intersectionDistance =\n rotatedBTo.x + (rotatedBFrom.x - rotatedBTo.x) * rotatedBTo.y /\n (rotatedBTo.y - rotatedBFrom.y);\n return aPoint + aDir * intersectionDistance;\n}\n\nvoid main() {\n // Caps have one of either the in or out tangent set to 0\n vCap = (aTangentIn == vec3(0.)) != (aTangentOut == (vec3(0.)))\n ? 1. : 0.;\n\n // Joins have two unique, defined tangents\n vJoin = (\n aTangentIn != vec3(0.) &&\n aTangentOut != vec3(0.) &&\n aTangentIn != aTangentOut\n ) ? 1. : 0.;\n\n vec4 posp = uModelViewMatrix * aPosition;\n vec4 posqIn = uModelViewMatrix * (aPosition + vec4(aTangentIn, 0));\n vec4 posqOut = uModelViewMatrix * (aPosition + vec4(aTangentOut, 0));\n\n float facingCamera = pow(\n // The word space tangent\'s z value is 0 if it\'s facing the camera\n abs(normalize(posqIn-posp).z),\n\n // Using pow() here to ramp `facingCamera` up from 0 to 1 really quickly\n // so most lines get scaled and don\'t get clipped\n 0.25\n );\n\n // using a scale <1 moves the lines towards the camera\n // in order to prevent popping effects due to half of\n // the line disappearing behind the geometry faces.\n float scale = mix(1., 0.995, facingCamera);\n\n // Moving vertices slightly toward the camera\n // to avoid depth-fighting with the fill triangles.\n // Discussed here:\n // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848 \n posp.xyz = posp.xyz * scale;\n posqIn.xyz = posqIn.xyz * scale;\n posqOut.xyz = posqOut.xyz * scale;\n\n vec4 p = uProjectionMatrix * posp;\n vec4 qIn = uProjectionMatrix * posqIn;\n vec4 qOut = uProjectionMatrix * posqOut;\n vCenter = p.xy;\n\n // formula to convert from clip space (range -1..1) to screen space (range 0..[width or height])\n // screen_p = (p.xy/p.w + <1,1>) * 0.5 * uViewport.zw\n\n // prevent division by W by transforming the tangent formula (div by 0 causes\n // the line to disappear, see https://github.com/processing/processing/issues/5183)\n // t = screen_q - screen_p\n //\n // tangent is normalized and we don\'t care which aDirection it points to (+-)\n // t = +- normalize( screen_q - screen_p )\n // t = +- normalize( (q.xy/q.w+<1,1>)*0.5*uViewport.zw - (p.xy/p.w+<1,1>)*0.5*uViewport.zw )\n //\n // extract common factor, <1,1> - <1,1> cancels out\n // t = +- normalize( (q.xy/q.w - p.xy/p.w) * 0.5 * uViewport.zw )\n //\n // convert to common divisor\n // t = +- normalize( ((q.xy*p.w - p.xy*q.w) / (p.w*q.w)) * 0.5 * uViewport.zw )\n //\n // remove the common scalar divisor/factor, not needed due to normalize and +-\n // (keep uViewport - can\'t remove because it has different components for x and y\n // and corrects for aspect ratio, see https://github.com/processing/processing/issues/5181)\n // t = +- normalize( (q.xy*p.w - p.xy*q.w) * uViewport.zw )\n\n vec2 tangentIn = normalize((qIn.xy*p.w - p.xy*qIn.w) * uViewport.zw);\n vec2 tangentOut = normalize((qOut.xy*p.w - p.xy*qOut.w) * uViewport.zw);\n\n vec2 curPerspScale;\n if(uPerspective == 1) {\n // Perspective ---\n // convert from world to clip by multiplying with projection scaling factor\n // to get the right thickness (see https://github.com/processing/processing/issues/5182)\n\n // The y value of the projection matrix may be flipped if rendering to a Framebuffer.\n // Multiplying again by its sign here negates the flip to get just the scale.\n curPerspScale = (uProjectionMatrix * vec4(1, sign(uProjectionMatrix[1][1]), 0, 0)).xy;\n } else {\n // No Perspective ---\n // multiply by W (to cancel out division by W later in the pipeline) and\n // convert from screen to clip (derived from clip to screen above)\n curPerspScale = p.w / (0.5 * uViewport.zw);\n }\n\n vec2 offset;\n if (vJoin == 1.) {\n vTangent = normalize(tangentIn + tangentOut);\n vec2 normalIn = vec2(-tangentIn.y, tangentIn.x);\n vec2 normalOut = vec2(-tangentOut.y, tangentOut.x);\n float side = sign(aSide);\n float sideEnum = abs(aSide);\n\n // We generate vertices for joins on either side of the centerline, but\n // the "elbow" side is the only one needing a join. By not setting the\n // offset for the other side, all its vertices will end up in the same\n // spot and not render, effectively discarding it.\n if (sign(dot(tangentOut, vec2(-tangentIn.y, tangentIn.x))) != side) {\n // Side enums:\n // 1: the side going into the join\n // 2: the middle of the join\n // 3: the side going out of the join\n if (sideEnum == 2.) {\n // Calculate the position + tangent on either side of the join, and\n // find where the lines intersect to find the elbow of the join\n vec2 c = (posp.xy/posp.w + vec2(1.,1.)) * 0.5 * uViewport.zw;\n vec2 intersection = lineIntersection(\n c + (side * normalIn * uStrokeWeight / 2.) * curPerspScale,\n tangentIn,\n c + (side * normalOut * uStrokeWeight / 2.) * curPerspScale,\n tangentOut\n );\n offset = (intersection - c);\n\n // When lines are thick and the angle of the join approaches 180, the\n // elbow might be really far from the center. We\'ll apply a limit to\n // the magnitude to avoid lines going across the whole screen when this\n // happens.\n float mag = length(offset);\n float maxMag = 3. * uStrokeWeight;\n if (mag > maxMag) {\n offset *= maxMag / mag;\n }\n } else if (sideEnum == 1.) {\n offset = side * normalIn * curPerspScale * uStrokeWeight / 2.;\n } else if (sideEnum == 3.) {\n offset = side * normalOut * curPerspScale * uStrokeWeight / 2.;\n }\n }\n if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 avgNormal = vec2(-vTangent.y, vTangent.x);\n vMaxDist = abs(dot(avgNormal, normalIn * uStrokeWeight / 2.));\n } else {\n vMaxDist = uStrokeWeight / 2.;\n }\n } else {\n vec2 tangent = aTangentIn == vec3(0.) ? tangentOut : tangentIn;\n vTangent = tangent;\n vec2 normal = vec2(-tangent.y, tangent.x);\n\n float normalOffset = sign(aSide);\n // Caps will have side values of -2 or 2 on the edge of the cap that\n // extends out from the line\n float tangentOffset = abs(aSide) - 1.;\n offset = (normal * normalOffset + tangent * tangentOffset) *\n uStrokeWeight * 0.5 * curPerspScale;\n vMaxDist = uStrokeWeight / 2.;\n }\n vPosition = vCenter + offset / curPerspScale;\n\n gl_Position.xy = p.xy + offset.xy;\n gl_Position.zw = p.zw;\n \n vColor = (uUseLineColor ? aVertexColor : uMaterialColor);\n}\n',
+ lineFrag: lineDefs + 'precision mediump float;\nprecision mediump int;\n\nuniform vec4 uMaterialColor;\nuniform int uStrokeCap;\nuniform int uStrokeJoin;\nuniform float uStrokeWeight;\n\nvarying vec4 vColor;\nvarying vec2 vTangent;\nvarying vec2 vCenter;\nvarying vec2 vPosition;\nvarying float vMaxDist;\nvarying float vCap;\nvarying float vJoin;\n\nfloat distSquared(vec2 a, vec2 b) {\n vec2 aToB = b - a;\n return dot(aToB, aToB);\n}\n\nvoid main() {\n if (vCap > 0.) {\n if (\n uStrokeCap == STROKE_CAP_ROUND &&\n distSquared(vPosition, vCenter) > uStrokeWeight * uStrokeWeight * 0.25\n ) {\n discard;\n } else if (\n uStrokeCap == STROKE_CAP_SQUARE &&\n dot(vPosition - vCenter, vTangent) > 0.\n ) {\n discard;\n }\n // Use full area for PROJECT\n } else if (vJoin > 0.) {\n if (\n uStrokeJoin == STROKE_JOIN_ROUND &&\n distSquared(vPosition, vCenter) > uStrokeWeight * uStrokeWeight * 0.25\n ) {\n discard;\n } else if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 normal = vec2(-vTangent.y, vTangent.x);\n if (abs(dot(vPosition - vCenter, normal)) > vMaxDist) {\n discard;\n }\n }\n // Use full area for MITER\n }\n gl_FragColor = vec4(vColor.rgb, 1.) * vColor.a;\n}\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 float mask = 0.0;\n\n // make a circular mask using the gl_PointCoord (goes from 0 - 1 on a point)\n // might be able to get a nicer edge on big strokeweights with smoothstep but slightly less performant\n\n mask = step(0.98, length(gl_PointCoord * 2.0 - 1.0));\n\n // if strokeWeight is 1 or less lets just draw a square\n // this prevents weird artifacting from carving circles when our points are really small\n // if strokeWeight is larger than 1, we just use it as is\n\n mask = mix(0.0, mask, clamp(floor(vStrokeWeight - 0.5),0.0,1.0));\n\n // throw away the borders of the mask\n // otherwise we get weird alpha blending issues\n\n if(mask > 0.98){\n discard;\n }\n\n gl_FragColor = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n}\n'
+ };
+ var filterShaderFrags = (_filterShaderFrags = {
+ }, _defineProperty(_filterShaderFrags, constants.GRAY, 'precision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n vec4 tex = texture2D(tex0, vTexCoord);\n float gray = luma(tex.rgb);\n gl_FragColor = vec4(gray, gray, gray, tex.a);\n}\n'), _defineProperty(_filterShaderFrags, constants.ERODE, '// Reduces the bright areas in an image\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform vec2 texelSize;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n // weights 77, 151, 28 taken from src/image/filters.js\n return dot(color, vec3(0.300781, 0.589844, 0.109375));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float lum = luma(color.rgb);\n\n // set current color as the darkest neighbor color\n\n vec4 neighbors[4];\n neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));\n neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));\n neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0, texelSize.y));\n neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));\n\n for (int i = 0; i < 4; i++) {\n vec4 neighborColor = neighbors[i];\n float neighborLum = luma(neighborColor.rgb);\n\n if (neighborLum < lum) {\n color = neighborColor;\n lum = neighborLum;\n }\n }\n\n gl_FragColor = color;\n}\n'), _defineProperty(_filterShaderFrags, constants.DILATE, '// Increase the bright areas in an image\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform vec2 texelSize;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n // weights 77, 151, 28 taken from src/image/filters.js\n return dot(color, vec3(0.300781, 0.589844, 0.109375));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float lum = luma(color.rgb);\n\n // set current color as the brightest neighbor color\n\n vec4 neighbors[4];\n neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));\n neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));\n neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0, texelSize.y));\n neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));\n\n for (int i = 0; i < 4; i++) {\n vec4 neighborColor = neighbors[i];\n float neighborLum = luma(neighborColor.rgb);\n\n if (neighborLum > lum) {\n color = neighborColor;\n lum = neighborLum;\n }\n }\n\n gl_FragColor = color;\n}\n'), _defineProperty(_filterShaderFrags, constants.BLUR, 'precision highp float;\n\n// Two-pass blur filter, unweighted kernel.\n// See also a similar blur at Adam Ferriss\' repo of shader examples:\n// https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/4_image-effects/4-9_single-pass-blur/effect.frag\n\n\nuniform sampler2D tex0;\nvarying vec2 vTexCoord;\nuniform vec2 direction;\nuniform vec2 canvasSize;\nuniform float radius;\n\nfloat random(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n}\n\n// This isn\'t a real Gaussian weight, it\'s a quadratic weight. It\'s what the\n// CPU mode\'s blur uses though, so we also use it here to match.\nfloat quadWeight(float x, float e) {\n return pow(e-abs(x), 2.);\n}\n\nvoid main(){\n vec2 uv = vTexCoord;\n\n // A reasonable maximum number of samples\n const float maxSamples = 64.0;\n\n float numSamples = floor(7. * radius);\n if (fract(numSamples / 2.) == 0.) {\n numSamples++;\n }\n vec4 avg = vec4(0.0);\n float total = 0.0;\n\n // Calculate the spacing to avoid skewing if numSamples > maxSamples\n float spacing = 1.0;\n if (numSamples > maxSamples) {\n spacing = numSamples / maxSamples;\n numSamples = maxSamples;\n }\n\n float randomOffset = (spacing - 1.0) * mix(-0.5, 0.5, random(gl_FragCoord.xy));\n for (float i = 0.0; i < maxSamples; i++) {\n if (i >= numSamples) break;\n\n float sample = i * spacing - (numSamples - 1.0) * 0.5 * spacing + randomOffset;\n vec2 sampleCoord = uv + vec2(sample, sample) / canvasSize * direction;\n float weight = quadWeight(sample, (numSamples - 1.0) * 0.5 * spacing);\n\n avg += weight * texture2D(tex0, sampleCoord);\n total += weight;\n }\n\n avg /= total;\n gl_FragColor = avg;\n}\n'), _defineProperty(_filterShaderFrags, constants.POSTERIZE, '// Limit color space for a stylized cartoon / poster effect\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform float filterParameter;\n\nvec3 quantize(vec3 color, float n) {\n // restrict values to N options/bins\n // and floor each channel to nearest value\n //\n // eg. when N = 5, values = 0.0, 0.25, 0.50, 0.75, 1.0\n // then quantize (0.1, 0.7, 0.9) -> (0.0, 0.5, 1.0)\n\n color = color * n;\n color = floor(color);\n color = color / (n - 1.0);\n return color;\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n\n vec3 restrictedColor = quantize(color.rgb, filterParameter);\n\n gl_FragColor = vec4(restrictedColor.rgb, color.a);\n}\n'), _defineProperty(_filterShaderFrags, constants.OPAQUE, '// Set alpha channel to entirely opaque\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n gl_FragColor = vec4(color.rgb, 1.0);\n}\n'), _defineProperty(_filterShaderFrags, constants.INVERT, '// Set each pixel to inverse value\n// Note that original INVERT does not change the opacity, so this follows suit\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n vec3 invertedColor = 1.0 - color.rgb;\n gl_FragColor = vec4(invertedColor, color.a);\n}\n'), _defineProperty(_filterShaderFrags, constants.THRESHOLD, '// Convert pixels to either white or black, \n// depending on if their luma is above or below filterParameter\n\nprecision highp float;\n\nvarying vec2 vTexCoord;\n\nuniform sampler2D tex0;\nuniform float filterParameter;\n\nfloat luma(vec3 color) {\n // weighted grayscale with luminance values\n return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n vec4 color = texture2D(tex0, vTexCoord);\n float gray = luma(color.rgb);\n // floor() used to match src/image/filters.js\n float threshold = floor(filterParameter * 255.0) / 255.0;\n float blackOrWhite = step(threshold, gray);\n gl_FragColor = vec4(vec3(blackOrWhite), color.a);\n}\n'), _filterShaderFrags);
+ var filterShaderVert = 'uniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\n// texcoords only come from p5 to vertex shader\n// so pass texcoords on to the fragment shader in a varying variable\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n // transferring texcoords for the frag shader\n vTexCoord = aTexCoord;\n\n // copy position with a fourth coordinate for projection (1.0 is normal)\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n';
+ /**
+ * @module Rendering
+ * @submodule Rendering
+ * @for p5
+ */
+ /**
+ * Set attributes for the WebGL Drawing context.
+ * This is a way of adjusting how the WebGL
+ * renderer works to fine-tune the display and performance.
+ *
+ * Note that this will reinitialize the drawing context
+ * if called after the WebGL canvas is made.
+ *
+ * If an object is passed as the parameter, all attributes
+ * not declared in the object will be set to defaults.
+ *
+ * The available attributes are:
+ *
+ * let framebuffer;
+ * let depthShader;
+ *
+ * const vert = `
+ * precision highp float;
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * varying vec2 vTexCoord;
+ * void main() {
+ * vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * viewModelPosition;
+ * vTexCoord = aTexCoord;
+ * }
+ * `;
+ *
+ * const frag = `
+ * precision highp float;
+ * varying vec2 vTexCoord;
+ * uniform sampler2D depth;
+ * void main() {
+ * float depthVal = texture2D(depth, vTexCoord).r;
+ * gl_FragColor = mix(
+ * vec4(1., 1., 0., 1.), // yellow
+ * vec4(0., 0., 1., 1.), // blue
+ * pow(depthVal, 6.)
+ * );
+ * }
+ * `;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * framebuffer = createFramebuffer();
+ * depthShader = createShader(vert, frag);
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // Draw to the framebuffer
+ * framebuffer.begin();
+ * background(255);
+ * rotateX(frameCount * 0.01);
+ * box(20, 20, 100);
+ * framebuffer.end();
+ *
+ * push();
+ * shader(depthShader);
+ * depthShader.setUniform('depth', framebuffer.depth);
+ * plane(framebuffer.width, framebuffer.height);
+ * pop();
+ * }
+ *
+ * + * alpha - indicates if the canvas contains an alpha buffer + * default is true + * + * depth - indicates whether the drawing buffer has a depth buffer + * of at least 16 bits - default is true + * + * stencil - indicates whether the drawing buffer has a stencil buffer + * of at least 8 bits + * + * antialias - indicates whether or not to perform anti-aliasing + * default is false (true in Safari) + * + * premultipliedAlpha - indicates that the page compositor will assume + * the drawing buffer contains colors with pre-multiplied alpha + * default is true + * + * preserveDrawingBuffer - if true the buffers will not be cleared and + * and will preserve their values until cleared or overwritten by author + * (note that p5 clears automatically on draw loop) + * default is true + * + * perPixelLighting - if true, per-pixel lighting will be used in the + * lighting shader otherwise per-vertex lighting is used. + * default is true. + * + * version - either 1 or 2, to specify which WebGL version to ask for. By + * default, WebGL 2 will be requested. If WebGL2 is not available, it will + * fall back to WebGL 1. You can check what version is used with by looking at + * the global `webglVersion` property. + * + * @method setAttributes + * @for p5 + * @param {String} key Name of attribute + * @param {Boolean} value New value of named attribute + * @example + *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * push();
+ * rotateZ(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * rotateY(frameCount * 0.02);
+ * fill(0, 0, 0);
+ * box(50);
+ * pop();
+ * }
+ *
+ * + * Now with the antialias attribute set to true. + *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * setAttributes('antialias', true);
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * push();
+ * rotateZ(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * rotateY(frameCount * 0.02);
+ * fill(0, 0, 0);
+ * box(50);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ * @alt a rotating cube with smoother edges
+ */
+ /**
+ * @method setAttributes
+ * @for p5
+ * @param {Object} obj object with key-value pairs
+ */
+ _main.default.prototype.setAttributes = function (key, value) {
+ if (typeof this._glAttributes === 'undefined') {
+ console.log('You are trying to use setAttributes on a p5.Graphics object ' + 'that does not use a WEBGL renderer.');
+ return;
+ }
+ var unchanged = true;
+ if (typeof value !== 'undefined') {
+ //first time modifying the attributes
+ if (this._glAttributes === null) {
+ this._glAttributes = {
+ };
+ }
+ if (this._glAttributes[key] !== value) {
+ //changing value of previously altered attribute
+ this._glAttributes[key] = value;
+ unchanged = false;
+ } //setting all attributes with some change
+
+ } else if (key instanceof Object) {
+ if (this._glAttributes !== key) {
+ this._glAttributes = key;
+ unchanged = false;
+ }
+ } //@todo_FES
+
+ if (!this._renderer.isP3D || unchanged) {
+ return;
+ }
+ if (!this._setupDone) {
+ for (var x in this._renderer.retainedMode.geometry) {
+ if (this._renderer.retainedMode.geometry.hasOwnProperty(x)) {
+ _main.default._friendlyError('Sorry, Could not set the attributes, you need to call setAttributes() ' + 'before calling the other drawing methods in setup()');
+ return;
+ }
+ }
+ }
+ this.push();
+ this._renderer._resetContext();
+ this.pop();
+ if (this._renderer._curCamera) {
+ this._renderer._curCamera._renderer = this._renderer;
+ }
+ };
+ /**
+ * @private
+ * @param {Uint8Array|Float32Array|undefined} pixels An existing pixels array to reuse if the size is the same
+ * @param {WebGLRenderingContext} gl The WebGL context
+ * @param {WebGLFramebuffer|null} framebuffer The Framebuffer to read
+ * @param {Number} x The x coordiante to read, premultiplied by pixel density
+ * @param {Number} y The y coordiante to read, premultiplied by pixel density
+ * @param {Number} width The width in pixels to be read (factoring in pixel density)
+ * @param {Number} height The height in pixels to be read (factoring in pixel density)
+ * @param {GLEnum} format Either RGB or RGBA depending on how many channels to read
+ * @param {GLEnum} type The datatype of each channel, e.g. UNSIGNED_BYTE or FLOAT
+ * @param {Number|undefined} flipY If provided, the total height with which to flip the y axis about
+ * @returns {Uint8Array|Float32Array} pixels A pixels array with the current state of the
+ * WebGL context read into it
+ */
+ function readPixelsWebGL(pixels, gl, framebuffer, x, y, width, height, format, type, flipY) {
+ // Record the currently bound framebuffer so we can go back to it after, and
+ // bind the framebuffer we want to read from
+ var prevFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+ var channels = format === gl.RGBA ? 4 : 3;
+ // Make a pixels buffer if it doesn't already exist
+ var len = width * height * channels;
+ var TypedArrayClass = type === gl.UNSIGNED_BYTE ? Uint8Array : Float32Array;
+ if (!(pixels instanceof TypedArrayClass) || pixels.length !== len) {
+ pixels = new TypedArrayClass(len);
+ }
+ gl.readPixels(x, flipY ? flipY - y - height : y, width, height, format, type, pixels);
+ // Re-bind whatever was previously bound
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer);
+ if (flipY) {
+ // WebGL pixels are inverted compared to 2D pixels, so we have to flip
+ // the resulting rows. Adapted from https://stackoverflow.com/a/41973289
+ var halfHeight = Math.floor(height / 2);
+ var tmpRow = new TypedArrayClass(width * channels);
+ for (var _y = 0; _y < halfHeight; _y++) {
+ var topOffset = _y * width * 4;
+ var bottomOffset = (height - _y - 1) * width * 4;
+ tmpRow.set(pixels.subarray(topOffset, topOffset + width * 4));
+ pixels.copyWithin(topOffset, bottomOffset, bottomOffset + width * 4);
+ pixels.set(tmpRow, bottomOffset);
+ }
+ }
+ return pixels;
+ } /**
+ * @private
+ * @param {WebGLRenderingContext} gl The WebGL context
+ * @param {WebGLFramebuffer|null} framebuffer The Framebuffer to read
+ * @param {Number} x The x coordinate to read, premultiplied by pixel density
+ * @param {Number} y The y coordinate to read, premultiplied by pixel density
+ * @param {GLEnum} format Either RGB or RGBA depending on how many channels to read
+ * @param {GLEnum} type The datatype of each channel, e.g. UNSIGNED_BYTE or FLOAT
+ * @param {Number|undefined} flipY If provided, the total height with which to flip the y axis about
+ * @returns {Number[]} pixels The channel data for the pixel at that location
+ */
+
+ function readPixelWebGL(gl, framebuffer, x, y, format, type, flipY) {
+ // Record the currently bound framebuffer so we can go back to it after, and
+ // bind the framebuffer we want to read from
+ var prevFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+ var channels = format === gl.RGBA ? 4 : 3;
+ var TypedArrayClass = type === gl.UNSIGNED_BYTE ? Uint8Array : Float32Array;
+ var pixels = new TypedArrayClass(channels);
+ gl.readPixels(x, flipY ? flipY - y - 1 : y, 1, 1, format, type, pixels);
+ // Re-bind whatever was previously bound
+ gl.bindFramebuffer(gl.FRAMEBUFFER, prevFramebuffer);
+ return Array.from(pixels);
+ } /**
+ * 3D graphics class
+ * @private
+ * @class p5.RendererGL
+ * @constructor
+ * @extends p5.Renderer
+ * @todo extend class to include public method for offscreen
+ * rendering (FBO).
+ */
+
+ _main.default.RendererGL = /*#__PURE__*/ function (_p5$Renderer) {
+ _inherits(RendererGL, _p5$Renderer);
+ var _super = _createSuper(RendererGL);
+ function RendererGL(elt, pInst, isMainCanvas, attr) {
+ var _this;
+ _classCallCheck(this, RendererGL);
+ _this = _super.call(this, elt, pInst, isMainCanvas);
+ _this._setAttributeDefaults(pInst);
+ _this._initContext();
+ _this.isP3D = true; //lets us know we're in 3d mode
+ // When constructing a new p5.Geometry, this will represent the builder
+ _this.geometryBuilder = undefined;
+ // This redundant property is useful in reminding you that you are
+ // interacting with WebGLRenderingContext, still worth considering future removal
+ _this.GL = _this.drawingContext;
+ _this._pInst._setProperty('drawingContext', _this.drawingContext);
+ // erasing
+ _this._isErasing = false;
+ // clipping
+ _this._clipDepths = [
+ ];
+ _this._isClipApplied = false;
+ _this._stencilTestOn = false;
+ // lights
+ _this._enableLighting = false;
+ _this.ambientLightColors = [
+ ];
+ _this.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 = [
+ 1,
+ 1,
+ 1,
+ 1
+ ];
+ _this.curSpecularColor = _this._cachedFillStyle = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _this.curEmissiveColor = _this._cachedFillStyle = [
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+ _this.curStrokeColor = _this._cachedStrokeStyle = [
+ 0,
+ 0,
+ 0,
+ 1
+ ];
+ _this.curBlendMode = constants.BLEND;
+ _this._cachedBlendMode = undefined;
+ if (_this.webglVersion === constants.WEBGL2) {
+ _this.blendExt = _this.GL;
+ } else {
+ _this.blendExt = _this.GL.getExtension('EXT_blend_minmax');
+ }
+ _this._isBlending = false;
+ _this._hasSetAmbient = false;
+ _this._useSpecularMaterial = false;
+ _this._useEmissiveMaterial = false;
+ _this._useNormalMaterial = false;
+ _this._useShininess = 1;
+ _this._useLineColor = false;
+ _this._useVertexColor = false;
+ _this.registerEnabled = new Set();
+ _this._tint = [
+ 255,
+ 255,
+ 255,
+ 255
+ ];
+ // lightFalloff variables
+ _this.constantAttenuation = 1;
+ _this.linearAttenuation = 0;
+ _this.quadraticAttenuation = 0;
+ /**
+ * model view, projection, & normal
+ * matrices
+ */
+ _this.uMVMatrix = new _main.default.Matrix();
+ _this.uPMatrix = new _main.default.Matrix();
+ _this.uNMatrix = new _main.default.Matrix('mat3');
+ // Current vertex normal
+ _this._currentNormal = new _main.default.Vector(0, 0, 1);
+ // Camera
+ _this._curCamera = new _main.default.Camera(_assertThisInitialized(_this));
+ _this._curCamera._computeCameraDefaultSettings();
+ _this._curCamera._setDefaultCamera();
+ // Information about the previous frame's touch object
+ // for executing orbitControl()
+ _this.prevTouches = [
+ ];
+ // Velocity variable for use with orbitControl()
+ _this.zoomVelocity = 0;
+ _this.rotateVelocity = new _main.default.Vector(0, 0);
+ _this.moveVelocity = new _main.default.Vector(0, 0);
+ // Flags for recording the state of zooming, rotation and moving
+ _this.executeZoom = false;
+ _this.executeRotateAndMove = false;
+ _this._defaultLightShader = undefined;
+ _this._defaultImmediateModeShader = undefined;
+ _this._defaultNormalShader = undefined;
+ _this._defaultColorShader = undefined;
+ _this._defaultPointShader = undefined;
+ _this.userFillShader = undefined;
+ _this.userStrokeShader = undefined;
+ _this.userPointShader = undefined;
+ // Default drawing is done in Retained Mode
+ // Geometry and Material hashes stored here
+ _this.retainedMode = {
+ geometry: {
+ },
+ buffers: {
+ stroke: [
+ new _main.default.RenderBuffer(4, 'lineVertexColors', 'lineColorBuffer', 'aVertexColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineVertices', 'lineVerticesBuffer', 'aPosition', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineTangentsIn', 'lineTangentsInBuffer', 'aTangentIn', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineTangentsOut', 'lineTangentsOutBuffer', 'aTangentOut', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(1, 'lineSides', 'lineSidesBuffer', 'aSide', _assertThisInitialized(_this))
+ ],
+ fill: [
+ new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(3, 'vertexNormals', 'normalBuffer', 'aNormal', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(4, 'vertexColors', 'colorBuffer', 'aVertexColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'vertexAmbients', 'ambientBuffer', 'aAmbientColor', _assertThisInitialized(_this)),
+ //new BufferDef(3, 'vertexSpeculars', 'specularBuffer', 'aSpecularColor'),
+ new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', _assertThisInitialized(_this), _this._flatten)
+ ],
+ text: [
+ new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', _assertThisInitialized(_this), _this._flatten)
+ ]
+ }
+ };
+ // Immediate Mode
+ // Geometry and Material hashes stored here
+ _this.immediateMode = {
+ geometry: new _main.default.Geometry(),
+ shapeMode: constants.TRIANGLE_FAN,
+ contourIndices: [
+ ],
+ _bezierVertex: [
+ ],
+ _quadraticVertex: [
+ ],
+ _curveVertex: [
+ ],
+ buffers: {
+ fill: [
+ new _main.default.RenderBuffer(3, 'vertices', 'vertexBuffer', 'aPosition', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(3, 'vertexNormals', 'normalBuffer', 'aNormal', _assertThisInitialized(_this), _this._vToNArray),
+ new _main.default.RenderBuffer(4, 'vertexColors', 'colorBuffer', 'aVertexColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'vertexAmbients', 'ambientBuffer', 'aAmbientColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', _assertThisInitialized(_this), _this._flatten)
+ ],
+ stroke: [
+ new _main.default.RenderBuffer(4, 'lineVertexColors', 'lineColorBuffer', 'aVertexColor', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineVertices', 'lineVerticesBuffer', 'aPosition', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineTangentsIn', 'lineTangentsInBuffer', 'aTangentIn', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(3, 'lineTangentsOut', 'lineTangentsOutBuffer', 'aTangentOut', _assertThisInitialized(_this)),
+ new _main.default.RenderBuffer(1, 'lineSides', 'lineSidesBuffer', 'aSide', _assertThisInitialized(_this))
+ ],
+ point: _this.GL.createBuffer()
+ }
+ };
+ _this.pointSize = 5; //default point size
+ _this.curStrokeWeight = 1;
+ _this.curStrokeCap = constants.ROUND;
+ _this.curStrokeJoin = constants.ROUND;
+ // map of texture sources to textures created in this gl context via this.getTexture(src)
+ _this.textures = new Map();
+ // set of framebuffers in use
+ _this.framebuffers = new Set();
+ // stack of active framebuffers
+ _this.activeFramebuffers = [
+ ];
+ // for post processing step
+ _this.filterShader = undefined;
+ _this.filterGraphicsLayer = undefined;
+ _this.filterGraphicsLayerTemp = undefined;
+ _this.defaultFilterShaders = {
+ };
+ _this.textureMode = constants.IMAGE;
+ // default wrap settings
+ _this.textureWrapX = constants.CLAMP;
+ _this.textureWrapY = constants.CLAMP;
+ _this._tex = null;
+ _this._curveTightness = 6;
+ // lookUpTable for coefficients needed to be calculated for bezierVertex, same are used for curveVertex
+ _this._lookUpTableBezier = [
+ ];
+ // lookUpTable for coefficients needed to be calculated for quadraticVertex
+ _this._lookUpTableQuadratic = [
+ ];
+ // current curveDetail in the Bezier lookUpTable
+ _this._lutBezierDetail = 0;
+ // current curveDetail in the Quadratic lookUpTable
+ _this._lutQuadraticDetail = 0;
+ // Used to distinguish between user calls to vertex() and internal calls
+ _this.isProcessingVertices = false;
+ _this._tessy = _this._initTessy();
+ _this.fontInfos = {
+ };
+ _this._curShader = undefined;
+ return _this;
+ } /**
+ * Starts creating a new p5.Geometry. Subsequent shapes drawn will be added
+ * to the geometry and then returned when
+ * endGeometry() is called. One can also use
+ * buildGeometry() to pass a function that
+ * draws shapes.
+ *
+ * If you need to draw complex shapes every frame which don't change over time,
+ * combining them upfront with `beginGeometry()` and `endGeometry()` and then
+ * drawing that will run faster than repeatedly drawing the individual pieces.
+ *
+ * @method beginGeometry
+ */
+
+ _createClass(RendererGL, [
+ {
+ key: 'beginGeometry',
+ value: function beginGeometry() {
+ if (this.geometryBuilder) {
+ throw new Error('It looks like `beginGeometry()` is being called while another p5.Geometry is already being build.');
+ }
+ this.geometryBuilder = new _GeometryBuilder.default(this);
+ } /**
+ * Finishes creating a new p5.Geometry that was
+ * started using beginGeometry(). One can also
+ * use buildGeometry() to pass a function that
+ * draws shapes.
+ *
+ * @method endGeometry
+ * @returns {p5.Geometry} The model that was built.
+ */
+
+ },
+ {
+ key: 'endGeometry',
+ value: function endGeometry() {
+ if (!this.geometryBuilder) {
+ throw new Error('Make sure you call beginGeometry() before endGeometry()!');
+ }
+ var geometry = this.geometryBuilder.finish();
+ this.geometryBuilder = undefined;
+ return geometry;
+ } /**
+ * Creates a new p5.Geometry that contains all
+ * the shapes drawn in a provided callback function. The returned combined shape
+ * can then be drawn all at once using model().
+ *
+ * If you need to draw complex shapes every frame which don't change over time,
+ * combining them with `buildGeometry()` once and then drawing that will run
+ * faster than repeatedly drawing the individual pieces.
+ *
+ * One can also draw shapes directly between
+ * beginGeometry() and
+ * endGeometry() instead of using a callback
+ * function.
+ *
+ * @method buildGeometry
+ * @param {Function} callback A function that draws shapes.
+ * @returns {p5.Geometry} The model that was built from the callback function.
+ */
+
+ },
+ {
+ key: 'buildGeometry',
+ value: function buildGeometry(callback) {
+ this.beginGeometry();
+ callback();
+ return this.endGeometry();
+ } //////////////////////////////////////////////
+ // Setting
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: '_setAttributeDefaults',
+ value: function _setAttributeDefaults(pInst) {
+ // See issue #3850, safer to enable AA in Safari
+ var applyAA = navigator.userAgent.toLowerCase().includes('safari');
+ var defaults = {
+ alpha: true,
+ depth: true,
+ stencil: true,
+ antialias: applyAA,
+ premultipliedAlpha: true,
+ preserveDrawingBuffer: true,
+ perPixelLighting: true,
+ version: 2
+ };
+ if (pInst._glAttributes === null) {
+ pInst._glAttributes = defaults;
+ } else {
+ pInst._glAttributes = Object.assign(defaults, pInst._glAttributes);
+ }
+ return;
+ }
+ },
+ {
+ key: '_initContext',
+ value: function _initContext() {
+ if (this._pInst._glAttributes.version !== 1) {
+ // Unless WebGL1 is explicitly asked for, try to create a WebGL2 context
+ this.drawingContext = this.canvas.getContext('webgl2', this._pInst._glAttributes);
+ }
+ this.webglVersion = this.drawingContext ? constants.WEBGL2 : constants.WEBGL;
+ // If this is the main canvas, make sure the global `webglVersion` is set
+ this._pInst._setProperty('webglVersion', this.webglVersion);
+ if (!this.drawingContext) {
+ // If we were unable to create a WebGL2 context (either because it was
+ // disabled via `setAttributes({ version: 1 })` or because the device
+ // doesn't support it), fall back to a WebGL1 context
+ this.drawingContext = this.canvas.getContext('webgl', this._pInst._glAttributes) || this.canvas.getContext('experimental-webgl', this._pInst._glAttributes);
+ }
+ if (this.drawingContext === null) {
+ throw new Error('Error creating webgl context');
+ } else {
+ var gl = this.drawingContext;
+ gl.enable(gl.DEPTH_TEST);
+ gl.depthFunc(gl.LEQUAL);
+ gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+ // Make sure all images are loaded into the canvas premultiplied so that
+ // they match the way we render colors. This will make framebuffer textures
+ // be encoded the same way as textures from everything else.
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+ this._viewport = this.drawingContext.getParameter(this.drawingContext.VIEWPORT);
+ }
+ } //This is helper function to reset the context anytime the attributes
+ //are changed with setAttributes()
+
+ },
+ {
+ key: '_resetContext',
+ value: function _resetContext(options, callback) {
+ var w = this.width;
+ var h = this.height;
+ var defaultId = this.canvas.id;
+ var isPGraphics = this._pInst instanceof _main.default.Graphics;
+ if (isPGraphics) {
+ var pg = this._pInst;
+ pg.canvas.parentNode.removeChild(pg.canvas);
+ pg.canvas = document.createElement('canvas');
+ var node = pg._pInst._userNode || document.body;
+ node.appendChild(pg.canvas);
+ _main.default.Element.call(pg, pg.canvas, pg._pInst);
+ pg.width = w;
+ pg.height = h;
+ } else {
+ var c = this.canvas;
+ if (c) {
+ c.parentNode.removeChild(c);
+ }
+ c = document.createElement('canvas');
+ c.id = defaultId;
+ if (this._pInst._userNode) {
+ this._pInst._userNode.appendChild(c);
+ } else {
+ document.body.appendChild(c);
+ }
+ this._pInst.canvas = c;
+ this.canvas = c;
+ }
+ var renderer = new _main.default.RendererGL(this._pInst.canvas, this._pInst, !isPGraphics);
+ this._pInst._setProperty('_renderer', renderer);
+ renderer.resize(w, h);
+ renderer._applyDefaults();
+ if (!isPGraphics) {
+ this._pInst._elements.push(renderer);
+ }
+ if (typeof callback === 'function') {
+ //setTimeout with 0 forces the task to the back of the queue, this ensures that
+ //we finish switching out the renderer
+ setTimeout(function () {
+ callback.apply(window._renderer, options);
+ }, 0);
+ }
+ } /**
+ * @class p5.RendererGL
+ */
+
+ },
+ {
+ key: '_update',
+ value: function _update() {
+ // reset model view and apply initial camera transform
+ // (containing only look at info; no projection).
+ this.uMVMatrix.set(this._curCamera.cameraMatrix.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.clearStencil(0);
+ this.GL.clear(this.GL.DEPTH_BUFFER_BIT | this.GL.STENCIL_BUFFER_BIT);
+ this.GL.disable(this.GL.STENCIL_TEST);
+ } /**
+ * [background description]
+ */
+
+ },
+ {
+ key: 'background',
+ value: function background() {
+ var _this$_pInst;
+ var _col = (_this$_pInst = this._pInst).color.apply(_this$_pInst, arguments);
+ var _r = _col.levels[0] / 255;
+ var _g = _col.levels[1] / 255;
+ var _b = _col.levels[2] / 255;
+ var _a = _col.levels[3] / 255;
+ this.clear(_r, _g, _b, _a);
+ } //////////////////////////////////////////////
+ // COLOR
+ //////////////////////////////////////////////
+ /**
+ * Basic fill material for geometry with a given color
+ * @method fill
+ * @class p5.RendererGL
+ * @param {Number|Number[]|String|p5.Color} v1 gray value,
+ * red or hue value (depending on the current color mode),
+ * or color Array, or CSS color string
+ * @param {Number} [v2] green or saturation value
+ * @param {Number} [v3] blue or brightness value
+ * @param {Number} [a] opacity
+ * @chainable
+ * @example
+ *
+ * // press the mouse button to disable perPixelLighting
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ * let lights = [
+ * { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+ * { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+ * { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+ * { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+ * { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+ * { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+ * ];
+ *
+ * function draw() {
+ * let t = millis() / 1000 + 1000;
+ * background(0);
+ * directionalLight(color('#222'), 1, 1, 1);
+ *
+ * for (let i = 0; i < lights.length; i++) {
+ * let light = lights[i];
+ * pointLight(
+ * color(light.c),
+ * p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+ * );
+ * }
+ *
+ * specularMaterial(255);
+ * sphere(width * 0.1);
+ *
+ * rotateX(t * 0.77);
+ * rotateY(t * 0.83);
+ * rotateZ(t * 0.91);
+ * torus(width * 0.3, width * 0.07, 24, 10);
+ * }
+ *
+ * function mousePressed() {
+ * setAttributes('perPixelLighting', false);
+ * noStroke();
+ * fill(255);
+ * }
+ * function mouseReleased() {
+ * setAttributes('perPixelLighting', true);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * black canvas with purple cube spinning
+ */
+
+ },
+ {
+ key: 'fill',
+ value: function fill(v1, v2, v3, a) {
+ //see material.js for more info on color blending in webgl
+ var color = _main.default.prototype.color.apply(this._pInst, arguments);
+ this.curFillColor = color._array;
+ this.drawMode = constants.FILL;
+ this._useNormalMaterial = false;
+ this._tex = null;
+ } /**
+ * Basic stroke material for geometry with a given color
+ * @method stroke
+ * @param {Number|Number[]|String|p5.Color} v1 gray value,
+ * red or hue value (depending on the current color mode),
+ * or color Array, or CSS color string
+ * @param {Number} [v2] green or saturation value
+ * @param {Number} [v3] blue or brightness value
+ * @param {Number} [a] opacity
+ * @example
+ *
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * fill(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(75, 75, 75);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * black canvas with purple cube with pink outline spinning
+ */
+
+ },
+ {
+ key: 'stroke',
+ value: function stroke(r, g, b, a) {
+ var color = _main.default.prototype.color.apply(this._pInst, arguments);
+ this.curStrokeColor = color._array;
+ }
+ },
+ {
+ key: 'strokeCap',
+ value: function strokeCap(cap) {
+ this.curStrokeCap = cap;
+ }
+ },
+ {
+ key: 'strokeJoin',
+ value: function strokeJoin(join) {
+ this.curStrokeJoin = join;
+ }
+ },
+ {
+ key: 'getFilterGraphicsLayer',
+ value: function getFilterGraphicsLayer() {
+ // Lazily initialize the filter graphics layer. We only do this on demand
+ // because the graphics layer itself has a p5.RendererGL, which would then
+ // try to make its own filter layer, infinitely looping.
+ if (!this.filterGraphicsLayer) {
+ // the real _pInst is buried when this is a secondary p5.Graphics
+ var pInst = this._pInst instanceof _main.default.Graphics ? this._pInst._pInst : this._pInst;
+ // create secondary layer
+ this.filterGraphicsLayer = new _main.default.Graphics(this.width, this.height, constants.WEBGL, pInst);
+ // geometries/borders on this layer should always be invisible
+ this.filterGraphicsLayer.noStroke();
+ }
+ if (this.filterGraphicsLayer.width !== this.width || this.filterGraphicsLayer.height !== this.height) {
+ // Resize the graphics layer
+ this.filterGraphicsLayer.resizeCanvas(this.width, this.height);
+ }
+ if (this.filterGraphicsLayer.pixelDensity() !== this._pInst.pixelDensity()) {
+ this.filterGraphicsLayer.pixelDensity(this._pInst.pixelDensity());
+ }
+ return this.filterGraphicsLayer;
+ }
+ },
+ {
+ key: 'getFilterGraphicsLayerTemp',
+ value: function getFilterGraphicsLayerTemp() {
+ // two-pass blur filter needs another graphics layer
+ if (!this.filterGraphicsLayerTemp) {
+ var pInst = this._pInst instanceof _main.default.Graphics ? this._pInst._pInst : this._pInst;
+ // create secondary layer
+ this.filterGraphicsLayerTemp = new _main.default.Graphics(this.width, this.height, constants.WEBGL, pInst);
+ this.filterGraphicsLayerTemp.noStroke();
+ }
+ if (this.filterGraphicsLayerTemp.width !== this.width || this.filterGraphicsLayerTemp.height !== this.height) {
+ // Resize the graphics layer
+ this.filterGraphicsLayerTemp.resizeCanvas(this.width, this.height);
+ }
+ if (this.filterGraphicsLayerTemp.pixelDensity() !== this._pInst.pixelDensity()) {
+ this.filterGraphicsLayerTemp.pixelDensity(this._pInst.pixelDensity());
+ }
+ return this.filterGraphicsLayerTemp;
+ }
+ },
+ {
+ key: 'filter',
+ value: function filter() {
+ var pg = this.getFilterGraphicsLayer();
+ // use internal shader for filter constants BLUR, INVERT, etc
+ var filterParameter = undefined;
+ var operation = undefined;
+ if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
+ var _defaults;
+ operation = arguments.length <= 0 ? undefined : arguments[0];
+ var defaults = (_defaults = {
+ }, _defineProperty(_defaults, constants.BLUR, 3), _defineProperty(_defaults, constants.POSTERIZE, 4), _defineProperty(_defaults, constants.THRESHOLD, 0.5), _defaults);
+ var useDefaultParam = operation in defaults && (arguments.length <= 1 ? undefined : arguments[1]) === undefined;
+ filterParameter = useDefaultParam ? defaults[operation] : arguments.length <= 1 ? undefined : arguments[1];
+ // Create and store shader for constants once on initial filter call.
+ // Need to store multiple in case user calls different filters,
+ // eg. filter(BLUR) then filter(GRAY)
+ if (!(operation in this.defaultFilterShaders)) {
+ this.defaultFilterShaders[operation] = new _main.default.Shader(pg._renderer, filterShaderVert, filterShaderFrags[operation]);
+ }
+ this.filterShader = this.defaultFilterShaders[operation];
+ } // use custom user-supplied shader
+ else {
+ this.filterShader = arguments.length <= 0 ? undefined : arguments[0];
+ }
+ pg.clear(); // prevent undesirable feedback effects accumulating secretly
+ var pd = this._pInst.pixelDensity();
+ var texelSize = [
+ 1 / (this.width * pd),
+ 1 / (this.height * pd)
+ ];
+ // apply blur shader with multiple passes
+ if (operation === constants.BLUR) {
+ var tmp = this.getFilterGraphicsLayerTemp();
+ tmp.clear(); // prevent feedback effects here too
+ // setup
+ this._pInst.push();
+ this._pInst.noStroke();
+ // draw main to temp buffer
+ tmp.image(this, - this.width / 2, - this.height / 2);
+ pg.shader(this.filterShader);
+ this.filterShader.setUniform('texelSize', texelSize);
+ this.filterShader.setUniform('canvasSize', [
+ this.width,
+ this.height
+ ]);
+ this.filterShader.setUniform('radius', Math.max(1, filterParameter));
+ // horiz pass
+ this.filterShader.setUniform('direction', [
+ 1,
+ 0
+ ]);
+ this.filterShader.setUniform('tex0', tmp);
+ pg.rect( - this.width / 2, - this.height / 2, this.width, this.height);
+ // read back to temp buffer
+ tmp.image(pg, - this.width / 2, - this.height / 2);
+ // vert pass
+ this.filterShader.setUniform('direction', [
+ 0,
+ 1
+ ]);
+ this.filterShader.setUniform('tex0', tmp);
+ pg.rect( - this.width / 2, - this.height / 2, this.width, this.height);
+ this._pInst.pop();
+ } // every other non-blur shader uses single pass
+ else {
+ pg.shader(this.filterShader);
+ this.filterShader.setUniform('tex0', this);
+ this.filterShader.setUniform('texelSize', texelSize);
+ this.filterShader.setUniform('canvasSize', [
+ this.width,
+ this.height
+ ]);
+ // filterParameter uniform only used for POSTERIZE, and THRESHOLD
+ // but shouldn't hurt to always set
+ this.filterShader.setUniform('filterParameter', filterParameter);
+ pg.rect( - this.width / 2, - this.height / 2, this.width, this.height);
+ } // draw pg contents onto main renderer
+
+ this._pInst.push();
+ this._pInst.noStroke();
+ this._pInst.image(pg, - this.width / 2, - this.height / 2, this.width, this.height);
+ this._pInst.pop();
+ }
+ },
+ {
+ key: 'blendMode',
+ value: function blendMode(mode) {
+ if (mode === constants.DARKEST || mode === constants.LIGHTEST || mode === constants.ADD || mode === constants.BLEND || mode === constants.SUBTRACT || mode === constants.SCREEN || mode === constants.EXCLUSION || mode === constants.REPLACE || mode === constants.MULTIPLY || mode === constants.REMOVE) this.curBlendMode = mode;
+ else if (mode === constants.BURN || mode === constants.OVERLAY || mode === constants.HARD_LIGHT || mode === constants.SOFT_LIGHT || mode === constants.DODGE) {
+ console.warn('BURN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, and DODGE only work for blendMode in 2D mode.');
+ }
+ }
+ },
+ {
+ key: 'erase',
+ value: function erase(opacityFill, opacityStroke) {
+ if (!this._isErasing) {
+ this._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
+ ];
+ }
+ }
+ },
+ {
+ key: 'noErase',
+ value: function noErase() {
+ if (this._isErasing) {
+ this._isErasing = false;
+ this.curFillColor = this._cachedFillStyle.slice();
+ this.curStrokeColor = this._cachedStrokeStyle.slice();
+ this.blendMode(this._cachedBlendMode);
+ }
+ }
+ },
+ {
+ key: 'drawTarget',
+ value: function drawTarget() {
+ return this.activeFramebuffers[this.activeFramebuffers.length - 1] || this;
+ }
+ },
+ {
+ key: 'beginClip',
+ value: function beginClip() {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+ };
+ _get(_getPrototypeOf(RendererGL.prototype), 'beginClip', this).call(this, options);
+ this.drawTarget()._isClipApplied = true;
+ var gl = this.GL;
+ gl.clearStencil(0);
+ gl.clear(gl.STENCIL_BUFFER_BIT);
+ gl.enable(gl.STENCIL_TEST);
+ this._stencilTestOn = true;
+ gl.stencilFunc(gl.ALWAYS, // the test
+ 1, // reference value
+ 255 // mask
+ );
+ gl.stencilOp(gl.KEEP, // what to do if the stencil test fails
+ gl.KEEP, // what to do if the depth test fails
+ gl.REPLACE // what to do if both tests pass
+ );
+ gl.disable(gl.DEPTH_TEST);
+ this._pInst.push();
+ this._pInst.resetShader();
+ if (this._doFill) this._pInst.fill(0, 0);
+ if (this._doStroke) this._pInst.stroke(0, 0);
+ }
+ },
+ {
+ key: 'endClip',
+ value: function endClip() {
+ this._pInst.pop();
+ var gl = this.GL;
+ gl.stencilOp(gl.KEEP, // what to do if the stencil test fails
+ gl.KEEP, // what to do if the depth test fails
+ gl.KEEP // what to do if both tests pass
+ );
+ gl.stencilFunc(this._clipInvert ? gl.EQUAL : gl.NOTEQUAL, // the test
+ 0, // reference value
+ 255 // mask
+ );
+ gl.enable(gl.DEPTH_TEST);
+ // Mark the depth at which the clip has been applied so that we can clear it
+ // when we pop past this depth
+ this._clipDepths.push(this._pushPopDepth);
+ _get(_getPrototypeOf(RendererGL.prototype), 'endClip', this).call(this);
+ }
+ },
+ {
+ key: '_clearClip',
+ value: function _clearClip() {
+ this.GL.clearStencil(1);
+ this.GL.clear(this.GL.STENCIL_BUFFER_BIT);
+ if (this._clipDepths.length > 0) {
+ this._clipDepths.pop();
+ }
+ this.drawTarget()._isClipApplied = false;
+ } /**
+ * Change weight of stroke
+ * @method strokeWeight
+ * @param {Number} stroke weight to be used for drawing
+ * @example
+ *
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * stroke(240, 150, 150);
+ * fill(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(75, 75, 75);
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * black canvas with two purple rotating spheres with pink
+ * outlines the sphere on top has much heavier outlines,
+ */
+
+ },
+ {
+ key: 'strokeWeight',
+ value: function strokeWeight(w) {
+ if (this.curStrokeWeight !== w) {
+ this.pointSize = w;
+ this.curStrokeWeight = w;
+ }
+ } // x,y are canvas-relative (pre-scaled by _pixelDensity)
+
+ },
+ {
+ key: '_getPixel',
+ value: function _getPixel(x, y) {
+ var gl = this.GL;
+ return readPixelWebGL(gl, null, x, y, gl.RGBA, gl.UNSIGNED_BYTE, this._pInst.height * this._pInst.pixelDensity());
+ } /**
+ * Loads the pixels data for this canvas into the pixels[] attribute.
+ * Note that updatePixels() and set() do not work.
+ * Any pixel manipulation must be done directly to the pixels[] array.
+ *
+ * @private
+ * @method loadPixels
+ */
+
+ },
+ {
+ key: 'loadPixels',
+ value: function loadPixels() {
+ var pixelsState = this._pixelsState;
+ //@todo_FES
+ if (this._pInst._glAttributes.preserveDrawingBuffer !== true) {
+ console.log('loadPixels only works in WebGL when preserveDrawingBuffer ' + 'is true.');
+ return;
+ }
+ var pd = this._pInst._pixelDensity;
+ var gl = this.GL;
+ pixelsState._setProperty('pixels', readPixelsWebGL(pixelsState.pixels, gl, null, 0, 0, this.width * pd, this.height * pd, gl.RGBA, gl.UNSIGNED_BYTE, this.height * pd));
+ }
+ },
+ {
+ key: 'updatePixels',
+ value: function updatePixels() {
+ var fbo = this._getTempFramebuffer();
+ fbo.pixels = this._pixelsState.pixels;
+ fbo.updatePixels();
+ this._pInst.push();
+ this._pInst.resetMatrix();
+ this._pInst.clear();
+ this._pInst.imageMode(constants.CENTER);
+ this._pInst.image(fbo, 0, 0);
+ this._pInst.pop();
+ this.GL.clearDepth(1);
+ this.GL.clear(this.GL.DEPTH_BUFFER_BIT);
+ } /**
+ * @private
+ * @returns {p5.Framebuffer} A p5.Framebuffer set to match the size and settings
+ * of the renderer's canvas. It will be created if it does not yet exist, and
+ * reused if it does.
+ */
+
+ },
+ {
+ key: '_getTempFramebuffer',
+ value: function _getTempFramebuffer() {
+ if (!this._tempFramebuffer) {
+ this._tempFramebuffer = this._pInst.createFramebuffer({
+ format: constants.UNSIGNED_BYTE,
+ useDepth: this._pInst._glAttributes.depth,
+ depthFormat: constants.UNSIGNED_INT,
+ antialias: this._pInst._glAttributes.antialias
+ });
+ }
+ return this._tempFramebuffer;
+ } //////////////////////////////////////////////
+ // HASH | for geometry
+ //////////////////////////////////////////////
+
+ },
+ {
+ key: 'geometryInHash',
+ value: function geometryInHash(gId) {
+ return this.retainedMode.geometry[gId] !== undefined;
+ }
+ },
+ {
+ key: 'viewport',
+ value: function viewport(w, h) {
+ this._viewport = [
+ 0,
+ 0,
+ w,
+ h
+ ];
+ this.GL.viewport(0, 0, w, h);
+ } /**
+ * [resize description]
+ * @private
+ * @param {Number} w [description]
+ * @param {Number} h [description]
+ */
+
+ },
+ {
+ key: 'resize',
+ value: function resize(w, h) {
+ _main.default.Renderer.prototype.resize.call(this, w, h);
+ this._origViewport = {
+ width: this.GL.drawingBufferWidth,
+ height: this.GL.drawingBufferHeight
+ };
+ this.viewport(this._origViewport.width, this._origViewport.height);
+ this._curCamera._resize();
+ //resize pixels buffer
+ var pixelsState = this._pixelsState;
+ if (typeof pixelsState.pixels !== 'undefined') {
+ pixelsState._setProperty('pixels', new Uint8Array(this.GL.drawingBufferWidth * this.GL.drawingBufferHeight * 4));
+ }
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.framebuffers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var framebuffer = _step.value;
+ // Notify framebuffers of the resize so that any auto-sized framebuffers
+ // can also update their size
+ framebuffer._canvasSizeChanged();
+ } // resize filter graphics layer
+
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ if (this.filterGraphicsLayer) {
+ _main.default.Renderer.prototype.resize.call(this.filterGraphicsLayer, w, h);
+ }
+ } /**
+ * clears color and depth buffers
+ * with r,g,b,a
+ * @private
+ * @param {Number} r normalized red val.
+ * @param {Number} g normalized green val.
+ * @param {Number} b normalized blue val.
+ * @param {Number} a normalized alpha val.
+ */
+
+ },
+ {
+ key: 'clear',
+ value: function clear() {
+ var _r = (arguments.length <= 0 ? undefined : arguments[0]) || 0;
+ var _g = (arguments.length <= 1 ? undefined : arguments[1]) || 0;
+ var _b = (arguments.length <= 2 ? undefined : arguments[2]) || 0;
+ var _a = (arguments.length <= 3 ? undefined : arguments[3]) || 0;
+ var activeFramebuffer = this.activeFramebuffer();
+ if (activeFramebuffer && activeFramebuffer.format === constants.UNSIGNED_BYTE && !activeFramebuffer.antialias && _a === 0) {
+ // Drivers on Intel Macs check for 0,0,0,0 exactly when drawing to a
+ // framebuffer and ignore the command if it's the only drawing command to
+ // the framebuffer. To work around it, we can set the alpha to a value so
+ // low that it still rounds down to 0, but that circumvents the buggy
+ // check in the driver.
+ _a = 1e-10;
+ }
+ this.GL.clearColor(_r * _a, _g * _a, _b * _a, _a);
+ this.GL.clearDepth(1);
+ this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
+ }
+ },
+ {
+ key: 'applyMatrix',
+ value: function applyMatrix(a, b, c, d, e, f) {
+ if (arguments.length === 16) {
+ _main.default.Matrix.prototype.apply.apply(this.uMVMatrix, arguments);
+ } else {
+ this.uMVMatrix.apply([a,
+ b,
+ 0,
+ 0,
+ c,
+ d,
+ 0,
+ 0,
+ 0,
+ 0,
+ 1,
+ 0,
+ e,
+ f,
+ 0,
+ 1]);
+ }
+ } /**
+ * [translate description]
+ * @private
+ * @param {Number} x [description]
+ * @param {Number} y [description]
+ * @param {Number} z [description]
+ * @chainable
+ * @todo implement handle for components or vector as args
+ */
+
+ },
+ {
+ key: 'translate',
+ value: function translate(x, y, z) {
+ if (x instanceof _main.default.Vector) {
+ z = x.z;
+ y = x.y;
+ x = x.x;
+ }
+ this.uMVMatrix.translate([x,
+ y,
+ z]);
+ return this;
+ } /**
+ * Scales the Model View Matrix by a vector
+ * @private
+ * @param {Number | p5.Vector | Array} x [description]
+ * @param {Number} [y] y-axis scalar
+ * @param {Number} [z] z-axis scalar
+ * @chainable
+ */
+
+ },
+ {
+ key: 'scale',
+ value: function scale(x, y, z) {
+ this.uMVMatrix.scale(x, y, z);
+ return this;
+ }
+ },
+ {
+ key: 'rotate',
+ value: function rotate(rad, axis) {
+ if (typeof axis === 'undefined') {
+ return this.rotateZ(rad);
+ }
+ _main.default.Matrix.prototype.rotate.apply(this.uMVMatrix, arguments);
+ return this;
+ }
+ },
+ {
+ key: 'rotateX',
+ value: function rotateX(rad) {
+ this.rotate(rad, 1, 0, 0);
+ return this;
+ }
+ },
+ {
+ key: 'rotateY',
+ value: function rotateY(rad) {
+ this.rotate(rad, 0, 1, 0);
+ return this;
+ }
+ },
+ {
+ key: 'rotateZ',
+ value: function rotateZ(rad) {
+ this.rotate(rad, 0, 0, 1);
+ return this;
+ }
+ },
+ {
+ key: 'push',
+ value: function push() {
+ // get the base renderer style
+ var style = _main.default.Renderer.prototype.push.apply(this);
+ // add webgl-specific style properties
+ var properties = style.properties;
+ properties.uMVMatrix = this.uMVMatrix.copy();
+ properties.uPMatrix = this.uPMatrix.copy();
+ properties._curCamera = this._curCamera;
+ // make a copy of the current camera for the push state
+ // this preserves any references stored using 'createCamera'
+ this._curCamera = this._curCamera.copy();
+ properties.ambientLightColors = this.ambientLightColors.slice();
+ properties.specularColors = this.specularColors.slice();
+ properties.directionalLightDirections = this.directionalLightDirections.slice();
+ properties.directionalLightDiffuseColors = this.directionalLightDiffuseColors.slice();
+ properties.directionalLightSpecularColors = this.directionalLightSpecularColors.slice();
+ properties.pointLightPositions = this.pointLightPositions.slice();
+ properties.pointLightDiffuseColors = this.pointLightDiffuseColors.slice();
+ properties.pointLightSpecularColors = this.pointLightSpecularColors.slice();
+ properties.spotLightPositions = this.spotLightPositions.slice();
+ properties.spotLightDirections = this.spotLightDirections.slice();
+ properties.spotLightDiffuseColors = this.spotLightDiffuseColors.slice();
+ properties.spotLightSpecularColors = this.spotLightSpecularColors.slice();
+ properties.spotLightAngle = this.spotLightAngle.slice();
+ properties.spotLightConc = this.spotLightConc.slice();
+ properties.userFillShader = this.userFillShader;
+ properties.userStrokeShader = this.userStrokeShader;
+ properties.userPointShader = this.userPointShader;
+ properties.pointSize = this.pointSize;
+ properties.curStrokeWeight = this.curStrokeWeight;
+ properties.curStrokeColor = this.curStrokeColor;
+ properties.curFillColor = this.curFillColor;
+ properties.curAmbientColor = this.curAmbientColor;
+ properties.curSpecularColor = this.curSpecularColor;
+ properties.curEmissiveColor = this.curEmissiveColor;
+ properties._hasSetAmbient = this._hasSetAmbient;
+ properties._useSpecularMaterial = this._useSpecularMaterial;
+ properties._useEmissiveMaterial = this._useEmissiveMaterial;
+ properties._useShininess = this._useShininess;
+ properties.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;
+ }
+ },
+ {
+ key: 'pop',
+ value: function pop() {
+ var _get2;
+ if (this._clipDepths.length > 0 && this._pushPopDepth === this._clipDepths[this._clipDepths.length - 1]) {
+ this._clearClip();
+ }
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }(_get2 = _get(_getPrototypeOf(RendererGL.prototype), 'pop', this)).call.apply(_get2, [
+ this
+ ].concat(args));
+ this._applyStencilTestIfClipping();
+ }
+ },
+ {
+ key: '_applyStencilTestIfClipping',
+ value: function _applyStencilTestIfClipping() {
+ var drawTarget = this.drawTarget();
+ if (drawTarget._isClipApplied !== this._stencilTestOn) {
+ if (drawTarget._isClipApplied) {
+ this.GL.enable(this.GL.STENCIL_TEST);
+ this._stencilTestOn = true;
+ } else {
+ this.GL.disable(this.GL.STENCIL_TEST);
+ this._stencilTestOn = false;
+ }
+ }
+ }
+ },
+ {
+ key: 'resetMatrix',
+ value: function resetMatrix() {
+ this.uMVMatrix.set(this._curCamera.cameraMatrix.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]);
+ return this;
+ } //////////////////////////////////////////////
+ // SHADER
+ //////////////////////////////////////////////
+ /*
+ * shaders are created and cached on a per-renderer basis,
+ * on the grounds that each renderer will have its own gl context
+ * and the shader must be valid in that context.
+ */
+
+ },
+ {
+ key: '_getImmediateStrokeShader',
+ value: function _getImmediateStrokeShader() {
+ // select the stroke shader to use
+ var stroke = this.userStrokeShader;
+ if (!stroke || !stroke.isStrokeShader()) {
+ return this._getLineShader();
+ }
+ return stroke;
+ }
+ },
+ {
+ key: '_getRetainedStrokeShader',
+ value: function _getRetainedStrokeShader() {
+ return this._getImmediateStrokeShader();
+ } /*
+ * selects which fill shader should be used based on renderer state,
+ * for use with begin/endShape and immediate vertex mode.
+ */
+
+ },
+ {
+ key: '_getImmediateFillShader',
+ value: function _getImmediateFillShader() {
+ var fill = this.userFillShader;
+ if (this._useNormalMaterial) {
+ if (!fill || !fill.isNormalShader()) {
+ return this._getNormalShader();
+ }
+ }
+ if (this._enableLighting) {
+ if (!fill || !fill.isLightShader()) {
+ return this._getLightShader();
+ }
+ } else if (this._tex) {
+ if (!fill || !fill.isTextureShader()) {
+ return this._getLightShader();
+ }
+ } else if (!fill /*|| !fill.isColorShader()*/ ) {
+ return this._getImmediateModeShader();
+ }
+ return fill;
+ } /*
+ * selects which fill shader should be used based on renderer state
+ * for retained mode.
+ */
+
+ },
+ {
+ key: '_getRetainedFillShader',
+ value: function _getRetainedFillShader() {
+ if (this._useNormalMaterial) {
+ return this._getNormalShader();
+ }
+ var fill = this.userFillShader;
+ if (this._enableLighting) {
+ if (!fill || !fill.isLightShader()) {
+ return this._getLightShader();
+ }
+ } else if (this._tex) {
+ if (!fill || !fill.isTextureShader()) {
+ return this._getLightShader();
+ }
+ } else if (!fill /* || !fill.isColorShader()*/ ) {
+ return this._getColorShader();
+ }
+ return fill;
+ }
+ },
+ {
+ key: '_getImmediatePointShader',
+ value: function _getImmediatePointShader() {
+ // select the point shader to use
+ var point = this.userPointShader;
+ if (!point || !point.isPointShader()) {
+ return this._getPointShader();
+ }
+ return point;
+ }
+ },
+ {
+ key: '_getRetainedLineShader',
+ value: function _getRetainedLineShader() {
+ return this._getImmediateLineShader();
+ }
+ },
+ {
+ key: '_getLightShader',
+ value: function _getLightShader() {
+ if (!this._defaultLightShader) {
+ if (this._pInst._glAttributes.perPixelLighting) {
+ this._defaultLightShader = new _main.default.Shader(this, defaultShaders.phongVert, defaultShaders.phongFrag);
+ } else {
+ this._defaultLightShader = new _main.default.Shader(this, defaultShaders.lightVert, defaultShaders.lightTextureFrag);
+ }
+ }
+ return this._defaultLightShader;
+ }
+ },
+ {
+ key: '_getImmediateModeShader',
+ value: function _getImmediateModeShader() {
+ if (!this._defaultImmediateModeShader) {
+ this._defaultImmediateModeShader = new _main.default.Shader(this, defaultShaders.immediateVert, defaultShaders.vertexColorFrag);
+ }
+ return this._defaultImmediateModeShader;
+ }
+ },
+ {
+ key: '_getNormalShader',
+ value: function _getNormalShader() {
+ if (!this._defaultNormalShader) {
+ this._defaultNormalShader = new _main.default.Shader(this, defaultShaders.normalVert, defaultShaders.normalFrag);
+ }
+ return this._defaultNormalShader;
+ }
+ },
+ {
+ key: '_getColorShader',
+ value: function _getColorShader() {
+ if (!this._defaultColorShader) {
+ this._defaultColorShader = new _main.default.Shader(this, defaultShaders.normalVert, defaultShaders.basicFrag);
+ }
+ return this._defaultColorShader;
+ }
+ },
+ {
+ key: '_getPointShader',
+ value: function _getPointShader() {
+ if (!this._defaultPointShader) {
+ this._defaultPointShader = new _main.default.Shader(this, defaultShaders.pointVert, defaultShaders.pointFrag);
+ }
+ return this._defaultPointShader;
+ }
+ },
+ {
+ key: '_getLineShader',
+ value: function _getLineShader() {
+ if (!this._defaultLineShader) {
+ this._defaultLineShader = new _main.default.Shader(this, defaultShaders.lineVert, defaultShaders.lineFrag);
+ }
+ return this._defaultLineShader;
+ }
+ },
+ {
+ key: '_getFontShader',
+ value: function _getFontShader() {
+ if (!this._defaultFontShader) {
+ if (this.webglVersion === constants.WEBGL) {
+ this.GL.getExtension('OES_standard_derivatives');
+ }
+ this._defaultFontShader = new _main.default.Shader(this, this._webGL2CompatibilityPrefix('vert', 'mediump') + defaultShaders.fontVert, this._webGL2CompatibilityPrefix('frag', 'mediump') + defaultShaders.fontFrag);
+ }
+ return this._defaultFontShader;
+ }
+ },
+ {
+ key: '_webGL2CompatibilityPrefix',
+ value: function _webGL2CompatibilityPrefix(shaderType, floatPrecision) {
+ var code = '';
+ if (this.webglVersion === constants.WEBGL2) {
+ code += '#version 300 es\n#define WEBGL2\n';
+ }
+ if (shaderType === 'vert') {
+ code += '#define VERTEX_SHADER\n';
+ } else if (shaderType === 'frag') {
+ code += '#define FRAGMENT_SHADER\n';
+ }
+ if (floatPrecision) {
+ code += 'precision '.concat(floatPrecision, ' float;\n');
+ }
+ return code;
+ }
+ },
+ {
+ key: '_getEmptyTexture',
+ value: function _getEmptyTexture() {
+ if (!this._emptyTexture) {
+ // a plain white texture RGBA, full alpha, single pixel.
+ var im = new _main.default.Image(1, 1);
+ im.set(0, 0, 255);
+ this._emptyTexture = new _main.default.Texture(this, im);
+ }
+ return this._emptyTexture;
+ }
+ },
+ {
+ key: 'getTexture',
+ value: function getTexture(input) {
+ var src = input;
+ if (src instanceof _main.default.Framebuffer) {
+ src = src.color;
+ }
+ var texture = this.textures.get(src);
+ if (texture) {
+ return texture;
+ }
+ var tex = new _main.default.Texture(this, src);
+ this.textures.set(src, tex);
+ return tex;
+ } /**
+ * @method activeFramebuffer
+ * @private
+ * @returns {p5.Framebuffer|null} The currently active framebuffer, or null if
+ * the main canvas is the current draw target.
+ */
+
+ },
+ {
+ key: 'activeFramebuffer',
+ value: function activeFramebuffer() {
+ return this.activeFramebuffers[this.activeFramebuffers.length - 1] || null;
+ }
+ },
+ {
+ key: 'createFramebuffer',
+ value: function createFramebuffer(options) {
+ return new _main.default.Framebuffer(this, options);
+ }
+ },
+ {
+ key: '_setStrokeUniforms',
+ value: function _setStrokeUniforms(strokeShader) {
+ strokeShader.bindShader();
+ // set the uniform values
+ strokeShader.setUniform('uUseLineColor', this._useLineColor);
+ strokeShader.setUniform('uMaterialColor', this.curStrokeColor);
+ strokeShader.setUniform('uStrokeWeight', this.curStrokeWeight);
+ strokeShader.setUniform('uStrokeCap', STROKE_CAP_ENUM[this.curStrokeCap]);
+ strokeShader.setUniform('uStrokeJoin', STROKE_JOIN_ENUM[this.curStrokeJoin]);
+ }
+ },
+ {
+ key: '_setFillUniforms',
+ value: function _setFillUniforms(fillShader) {
+ fillShader.bindShader();
+ // TODO: optimize
+ fillShader.setUniform('uUseVertexColor', this._useVertexColor);
+ fillShader.setUniform('uMaterialColor', this.curFillColor);
+ fillShader.setUniform('isTexture', !!this._tex);
+ if (this._tex) {
+ fillShader.setUniform('uSampler', this._tex);
+ }
+ fillShader.setUniform('uTint', this._tint);
+ fillShader.setUniform('uHasSetAmbient', this._hasSetAmbient);
+ fillShader.setUniform('uAmbientMatColor', this.curAmbientColor);
+ fillShader.setUniform('uSpecularMatColor', this.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();
+ }
+ },
+ {
+ key: '_setPointUniforms',
+ value: function _setPointUniforms(pointShader) {
+ pointShader.bindShader();
+ // set the uniform values
+ pointShader.setUniform('uMaterialColor', this.curStrokeColor);
+ // @todo is there an instance where this isn't stroke weight?
+ // should be they be same var?
+ pointShader.setUniform('uPointSize', this.pointSize * this._pInst._pixelDensity);
+ } /* Binds a buffer to the drawing context
+ * when passed more than two arguments it also updates or initializes
+ * the data associated with the buffer
+ */
+
+ },
+ {
+ key: '_bindBuffer',
+ value: function _bindBuffer(buffer, target, values, type, usage) {
+ if (!target) target = this.GL.ARRAY_BUFFER;
+ this.GL.bindBuffer(target, buffer);
+ if (values !== undefined) {
+ var data = values;
+ if (values instanceof _main.default.DataArray) {
+ data = values.dataArray();
+ } else if (!(data instanceof (type || Float32Array))) {
+ data = new (type || Float32Array) (data);
+ }
+ this.GL.bufferData(target, data, usage || this.GL.STATIC_DRAW);
+ }
+ } ///////////////////////////////
+ //// UTILITY FUNCTIONS
+ //////////////////////////////
+
+ },
+ {
+ key: '_arraysEqual',
+ value: function _arraysEqual(a, b) {
+ var aLength = a.length;
+ if (aLength !== b.length) return false;
+ return a.every(function (ai, i) {
+ return ai === b[i];
+ });
+ }
+ },
+ {
+ key: '_isTypedArray',
+ value: function _isTypedArray(arr) {
+ return [Float32Array,
+ Float64Array,
+ Int16Array,
+ Uint16Array,
+ Uint32Array].some(function (x) {
+ return arr instanceof x;
+ });
+ } /**
+ * turn a two dimensional array into one dimensional array
+ * @private
+ * @param {Array} arr 2-dimensional array
+ * @return {Array} 1-dimensional array
+ * [[1, 2, 3],[4, 5, 6]] -> [1, 2, 3, 4, 5, 6]
+ */
+
+ },
+ {
+ key: '_flatten',
+ value: function _flatten(arr) {
+ //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 result = [
+ ];
+ var nodes = arr.slice();
+ var node;
+ node = nodes.pop();
+ do {
+ if (Array.isArray(node)) {
+ 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]
+ */
+
+ },
+ {
+ key: '_vToNArray',
+ value: function _vToNArray(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;
+ } // function to calculate BezierVertex Coefficients
+
+ },
+ {
+ key: '_bezierCoefficients',
+ value: function _bezierCoefficients(t) {
+ var t2 = t * t;
+ var t3 = t2 * t;
+ var mt = 1 - t;
+ var mt2 = mt * mt;
+ var mt3 = mt2 * mt;
+ return [mt3,
+ 3 * mt2 * t,
+ 3 * mt * t2,
+ t3];
+ } // function to calculate QuadraticVertex Coefficients
+
+ },
+ {
+ key: '_quadraticCoefficients',
+ value: function _quadraticCoefficients(t) {
+ var t2 = t * t;
+ var mt = 1 - t;
+ var mt2 = mt * mt;
+ return [mt2,
+ 2 * mt * t,
+ t2];
+ } // function to convert Bezier coordinates to Catmull Rom Splines
+
+ },
+ {
+ key: '_bezierToCatmull',
+ value: function _bezierToCatmull(w) {
+ var p1 = w[1];
+ var p2 = w[1] + (w[2] - w[0]) / this._curveTightness;
+ var p3 = w[2] - (w[3] - w[1]) / this._curveTightness;
+ var p4 = w[2];
+ var p = [
+ p1,
+ p2,
+ p3,
+ p4
+ ];
+ return p;
+ }
+ },
+ {
+ key: '_initTessy',
+ value: function _initTessy() {
+ // function called for each vertex of tesselator output
+ function vertexCallback(data, polyVertArray) {
+ for (var i = 0; i < data.length; i++) {
+ polyVertArray.push(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 = new Array(_main.default.RendererGL.prototype.tessyVertexSize).fill(0);
+ for (var i = 0; i < weight.length; i++) {
+ for (var j = 0; j < result.length; j++) {
+ if (weight[i] === 0 || !data[i]) continue;
+ result[j] += data[i][j] * weight[i];
+ }
+ }
+ return result;
+ }
+ function edgeCallback(flag) {
+ // don't really care about the flag, but need no-strip/no-fan behavior
+ }
+ var tessy = new _libtess.default.GluTesselator();
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_VERTEX_DATA, vertexCallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_BEGIN, begincallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_ERROR, errorcallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_COMBINE, combinecallback);
+ tessy.gluTessCallback(_libtess.default.gluEnum.GLU_TESS_EDGE_FLAG, edgeCallback);
+ tessy.gluTessProperty(_libtess.default.gluEnum.GLU_TESS_WINDING_RULE, _libtess.default.windingRule.GLU_TESS_WINDING_NONZERO);
+ return tessy;
+ }
+ },
+ {
+ key: '_triangulate',
+ value: function _triangulate(contours) {
+ // libtess will take 3d verts and flatten to a plane for tesselation.
+ // libtess is capable of calculating a plane to tesselate on, but
+ // if all of the vertices have the same z values, we'll just
+ // assume the face is facing the camera, letting us skip any performance
+ // issues or bugs in libtess's automatic calculation.
+ var z = contours[0] ? contours[0][2] : undefined;
+ var allSameZ = true;
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = contours[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var contour = _step3.value;
+ for (var j = 0; j < contour.length; j += _main.default.RendererGL.prototype.tessyVertexSize) {
+ if (contour[j + 2] !== z) {
+ allSameZ = false;
+ break;
+ }
+ }
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ if (allSameZ) {
+ this._tessy.gluTessNormal(0, 0, 1);
+ } else {
+ // Let libtess pick a plane for us
+ this._tessy.gluTessNormal(0, 0, 0);
+ }
+ var triangleVerts = [
+ ];
+ this._tessy.gluTessBeginPolygon(triangleVerts);
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ for (var _iterator4 = contours[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ var _contour = _step4.value;
+ this._tessy.gluTessBeginContour();
+ for (var _j = 0; _j < _contour.length; _j += _main.default.RendererGL.prototype.tessyVertexSize) {
+ var coords = _contour.slice(_j, _j + _main.default.RendererGL.prototype.tessyVertexSize);
+ this._tessy.gluTessVertex(coords, coords);
+ }
+ this._tessy.gluTessEndContour();
+ } // finish polygon
+
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ this._tessy.gluTessEndPolygon();
+ return triangleVerts;
+ }
+ }
+ ]);
+ return RendererGL;
+ }(_main.default.Renderer);
+ /**
+ * ensures that p5 is using a 3d renderer. throws an error if not.
+ */
+ _main.default.prototype._assert3d = function (name) {
+ if (!this._renderer.isP3D) throw new Error(''.concat(name, '() is only supported in WEBGL mode. If you\'d like to use 3D graphics and WebGL, see https://p5js.org/examples/form-3d-primitives.html for more information.'));
+ };
+ // function to initialize GLU Tesselator
+ _main.default.RendererGL.prototype.tessyVertexSize = 12;
+ var _default = _main.default.RendererGL;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ '../core/p5.Renderer': 301,
+ './GeometryBuilder': 342,
+ './p5.Camera': 347,
+ './p5.Framebuffer': 349,
+ './p5.Matrix': 351,
+ './p5.Shader': 356,
+ 'core-js/modules/es.array.concat': 169,
+ 'core-js/modules/es.array.copy-within': 170,
+ 'core-js/modules/es.array.every': 171,
+ 'core-js/modules/es.array.fill': 172,
+ 'core-js/modules/es.array.from': 176,
+ 'core-js/modules/es.array.includes': 177,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.array.some': 184,
+ 'core-js/modules/es.map': 187,
+ 'core-js/modules/es.object.assign': 194,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.get-prototype-of': 198,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.reflect.construct': 202,
+ 'core-js/modules/es.reflect.get': 203,
+ 'core-js/modules/es.regexp.to-string': 206,
+ 'core-js/modules/es.set': 207,
+ 'core-js/modules/es.string.includes': 209,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.float32-array': 229,
+ 'core-js/modules/es.typed-array.float64-array': 230,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.int16-array': 234,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint16-array': 250,
+ 'core-js/modules/es.typed-array.uint32-array': 251,
+ 'core-js/modules/es.typed-array.uint8-array': 252,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256,
+ 'libtess': 269,
+ 'path': 272
+ }
+ ],
+ 356: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.index-of');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.array.slice');
+ _dereq_('core-js/modules/es.array.some');
+ _dereq_('core-js/modules/es.function.name');
+ _dereq_('core-js/modules/es.object.keys');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * This module defines the p5.Shader class
+ * @module 3D
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */
+ /**
+ * 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 = /*#__PURE__*/ function () {
+ function _class(renderer, vertSrc, fragSrc) {
+ _classCallCheck(this, _class);
+ // TODO: adapt this to not take ids, but rather,
+ // to take the source for a vertex and fragment shader
+ // to enable custom shaders at some later date
+ this._renderer = renderer;
+ this._vertSrc = vertSrc;
+ this._fragSrc = fragSrc;
+ this._vertShader = - 1;
+ this._fragShader = - 1;
+ this._glProgram = 0;
+ this._loadedAttributes = false;
+ this.attributes = {
+ };
+ this._loadedUniforms = false;
+ this.uniforms = {
+ };
+ this._bound = false;
+ this.samplers = [
+ ];
+ } /**
+ * Creates, compiles, and links the shader based on its
+ * sources for the vertex and fragment shaders (provided
+ * to the constructor). Populates known attributes and
+ * uniforms from the shader.
+ * @method init
+ * @chainable
+ * @private
+ */
+
+ _createClass(_class, [
+ {
+ key: 'init',
+ value: function init() {
+ if (this._glProgram === 0 /* or context is stale? */ ) {
+ var gl = this._renderer.GL;
+ // @todo: once custom shading is allowed,
+ // friendly error messages should be used here to share
+ // compiler and linker errors.
+ //set up the shader by
+ // 1. creating and getting a gl id for the shader program,
+ // 2. compliling its vertex & fragment sources,
+ // 3. linking the vertex and fragment shaders
+ this._vertShader = gl.createShader(gl.VERTEX_SHADER);
+ //load in our default vertex shader
+ gl.shaderSource(this._vertShader, this._vertSrc);
+ gl.compileShader(this._vertShader);
+ // if our vertex shader failed compilation?
+ if (!gl.getShaderParameter(this._vertShader, gl.COMPILE_STATUS)) {
+ _main.default._friendlyError('Yikes! An error occurred compiling the vertex shader:'.concat(gl.getShaderInfoLog(this._vertShader)));
+ return null;
+ }
+ this._fragShader = gl.createShader(gl.FRAGMENT_SHADER);
+ //load in our material frag shader
+ gl.shaderSource(this._fragShader, this._fragSrc);
+ gl.compileShader(this._fragShader);
+ // if our frag shader failed compilation?
+ if (!gl.getShaderParameter(this._fragShader, gl.COMPILE_STATUS)) {
+ _main.default._friendlyError('Darn! An error occurred compiling the fragment shader:'.concat(gl.getShaderInfoLog(this._fragShader)));
+ return null;
+ }
+ this._glProgram = gl.createProgram();
+ gl.attachShader(this._glProgram, this._vertShader);
+ gl.attachShader(this._glProgram, this._fragShader);
+ gl.linkProgram(this._glProgram);
+ if (!gl.getProgramParameter(this._glProgram, gl.LINK_STATUS)) {
+ _main.default._friendlyError('Snap! Error linking shader program: '.concat(gl.getProgramInfoLog(this._glProgram)));
+ }
+ this._loadAttributes();
+ this._loadUniforms();
+ }
+ return this;
+ } /**
+ * Shaders belong to the main canvas or a p5.Graphics. Once they are compiled,
+ * they can only be used in the context they were compiled on.
+ *
+ * Use this method to make a new copy of a shader that gets compiled on a
+ * different context.
+ *
+ * @method copyToContext
+ * @param {p5|p5.Graphics} context The graphic or instance to copy this shader to.
+ * Pass `window` if you need to copy to the main canvas.
+ * @returns {p5.Shader} A new shader on the target context.
+ */
+
+ },
+ {
+ key: 'copyToContext',
+ value: function copyToContext(context) {
+ var shader = new _main.default.Shader(context._renderer, this._vertSrc, this._fragSrc);
+ shader.ensureCompiledOnContext(context);
+ return shader;
+ } /**
+ * @private
+ */
+
+ },
+ {
+ key: 'ensureCompiledOnContext',
+ value: function ensureCompiledOnContext(context) {
+ if (this._glProgram !== 0 && this._renderer !== context._renderer) {
+ throw new Error('The shader being run is attached to a different context. Do you need to copy it to this context first with .copyToContext()?');
+ } else if (this._glProgram === 0) {
+ this._renderer = context._renderer;
+ this.init();
+ }
+ } /**
+ * Queries the active attributes for this shader and loads
+ * their names and locations into the attributes array.
+ * @method _loadAttributes
+ * @private
+ */
+
+ },
+ {
+ key: '_loadAttributes',
+ value: function _loadAttributes() {
+ if (this._loadedAttributes) {
+ return;
+ }
+ this.attributes = {
+ };
+ var gl = this._renderer.GL;
+ var numAttributes = gl.getProgramParameter(this._glProgram, gl.ACTIVE_ATTRIBUTES);
+ for (var i = 0; i < numAttributes; ++i) {
+ var attributeInfo = gl.getActiveAttrib(this._glProgram, i);
+ var name = attributeInfo.name;
+ var location = gl.getAttribLocation(this._glProgram, name);
+ var attribute = {
+ };
+ attribute.name = name;
+ attribute.location = location;
+ attribute.index = i;
+ attribute.type = attributeInfo.type;
+ attribute.size = attributeInfo.size;
+ this.attributes[name] = attribute;
+ }
+ this._loadedAttributes = true;
+ } /**
+ * Queries the active uniforms for this shader and loads
+ * their names and locations into the uniforms array.
+ * @method _loadUniforms
+ * @private
+ */
+
+ },
+ {
+ key: '_loadUniforms',
+ value: function _loadUniforms() {
+ if (this._loadedUniforms) {
+ return;
+ }
+ var gl = this._renderer.GL;
+ // Inspect shader and cache uniform info
+ var numUniforms = gl.getProgramParameter(this._glProgram, gl.ACTIVE_UNIFORMS);
+ var samplerIndex = 0;
+ for (var i = 0; i < numUniforms; ++i) {
+ var uniformInfo = gl.getActiveUniform(this._glProgram, i);
+ var uniform = {
+ };
+ uniform.location = gl.getUniformLocation(this._glProgram, uniformInfo.name);
+ uniform.size = uniformInfo.size;
+ var uniformName = uniformInfo.name;
+ //uniforms 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;
+ }
+ },
+ {
+ key: 'compile',
+ value: function compile() {
+ // TODO
+ } /**
+ * initializes (if needed) and binds the shader program.
+ * @method bindShader
+ * @private
+ */
+
+ },
+ {
+ key: 'bindShader',
+ value: function bindShader() {
+ this.init();
+ if (!this._bound) {
+ this.useProgram();
+ this._bound = true;
+ this._setMatrixUniforms();
+ this.setUniform('uViewport', this._renderer._viewport);
+ }
+ } /**
+ * @method unbindShader
+ * @chainable
+ * @private
+ */
+
+ },
+ {
+ key: 'unbindShader',
+ value: function unbindShader() {
+ if (this._bound) {
+ this.unbindTextures();
+ //this._renderer.GL.useProgram(0); ??
+ this._bound = false;
+ }
+ return this;
+ }
+ },
+ {
+ key: 'bindTextures',
+ value: function bindTextures() {
+ var gl = this._renderer.GL;
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = this.samplers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var uniform = _step.value;
+ var tex = uniform.texture;
+ if (tex === undefined) {
+ // user hasn't yet supplied a texture for this slot.
+ // (or there may not be one--maybe just lighting),
+ // so we supply a default texture instead.
+ tex = this._renderer._getEmptyTexture();
+ }
+ gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+ tex.bindTexture();
+ tex.update();
+ gl.uniform1i(uniform.location, uniform.samplerIndex);
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ }
+ },
+ {
+ key: 'updateTextures',
+ value: function updateTextures() {
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = this.samplers[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var uniform = _step2.value;
+ var tex = uniform.texture;
+ if (tex) {
+ tex.update();
+ }
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ }
+ },
+ {
+ key: 'unbindTextures',
+ value: function unbindTextures() {
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = this.samplers[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var uniform = _step3.value;
+ this.setUniform(uniform.name, this._renderer._getEmptyTexture());
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ }
+ },
+ {
+ key: '_setMatrixUniforms',
+ value: function _setMatrixUniforms() {
+ var viewMatrix = this._renderer._curCamera.cameraMatrix;
+ var projectionMatrix = this._renderer.uPMatrix;
+ var modelViewMatrix = this._renderer.uMVMatrix;
+ var modelViewProjectionMatrix = modelViewMatrix.copy();
+ modelViewProjectionMatrix.mult(projectionMatrix);
+ if (this.isStrokeShader()) {
+ 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
+ */
+
+ },
+ {
+ key: 'useProgram',
+ value: function useProgram() {
+ var gl = this._renderer.GL;
+ if (this._renderer._curShader !== this) {
+ gl.useProgram(this._glProgram);
+ this._renderer._curShader = this;
+ }
+ return this;
+ } /**
+ * 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).
+ *
+ * Here are some examples of uniforms you can make:
+ * - booleans
+ * - Example: `setUniform('x', true)` becomes `uniform float x` with the value `1.0`
+ * - numbers
+ * - Example: `setUniform('x', -2)` becomes `uniform float x` with the value `-2.0`
+ * - arrays of numbers
+ * - Example: `setUniform('x', [0, 0.5, 1])` becomes `uniform vec3 x` with the value `vec3(0.0, 0.5, 1.0)`
+ * - a p5.Image, p5.Graphics, p5.MediaElement, or p5.Texture
+ * - Example: `setUniform('x', img)` becomes `uniform sampler2D x`
+ *
+ * @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
+ *
+ * function setup() {
+ * createCanvas(200, 400, WEBGL);
+ * setAttributes('antialias', true);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * translate(0, -100, 0);
+ * stroke(240, 150, 150);
+ * fill(100, 100, 240);
+ * push();
+ * strokeWeight(8);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * sphere(75);
+ * pop();
+ * push();
+ * translate(0, 200, 0);
+ * strokeWeight(1);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * sphere(75);
+ * pop();
+ * }
+ *
+ *
+ *
+ *
+ * @alt
+ * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
+ */
+
+ },
+ {
+ key: 'setUniform',
+ value: function setUniform(uniformName, data) {
+ var uniform = this.uniforms[uniformName];
+ if (!uniform) {
+ return;
+ }
+ var gl = this._renderer.GL;
+ if (uniform.isArray) {
+ if (uniform._cachedData && this._renderer._arraysEqual(uniform._cachedData, data)) {
+ return;
+ } else {
+ uniform._cachedData = data.slice(0);
+ }
+ } else if (uniform._cachedData && uniform._cachedData === data) {
+ return;
+ } else {
+ if (Array.isArray(data)) {
+ uniform._cachedData = data.slice(0);
+ } else {
+ uniform._cachedData = data;
+ }
+ }
+ var location = uniform.location;
+ this.useProgram();
+ switch (uniform.type) {
+ case gl.BOOL:
+ if (data === true) {
+ gl.uniform1i(location, 1);
+ } else {
+ gl.uniform1i(location, 0);
+ }
+ break;
+ case gl.INT:
+ if (uniform.size > 1) {
+ data.length && gl.uniform1iv(location, data);
+ } else {
+ gl.uniform1i(location, data);
+ }
+ break;
+ case gl.FLOAT:
+ if (uniform.size > 1) {
+ data.length && gl.uniform1fv(location, data);
+ } else {
+ gl.uniform1f(location, data);
+ }
+ break;
+ case gl.FLOAT_MAT3:
+ gl.uniformMatrix3fv(location, false, data);
+ break;
+ case gl.FLOAT_MAT4:
+ gl.uniformMatrix4fv(location, false, data);
+ break;
+ case gl.FLOAT_VEC2:
+ if (uniform.size > 1) {
+ data.length && gl.uniform2fv(location, data);
+ } else {
+ gl.uniform2f(location, data[0], data[1]);
+ }
+ break;
+ case gl.FLOAT_VEC3:
+ if (uniform.size > 1) {
+ data.length && gl.uniform3fv(location, data);
+ } else {
+ gl.uniform3f(location, data[0], data[1], data[2]);
+ }
+ break;
+ case gl.FLOAT_VEC4:
+ if (uniform.size > 1) {
+ data.length && gl.uniform4fv(location, data);
+ } else {
+ gl.uniform4f(location, data[0], data[1], data[2], data[3]);
+ }
+ break;
+ case gl.INT_VEC2:
+ if (uniform.size > 1) {
+ data.length && gl.uniform2iv(location, data);
+ } else {
+ gl.uniform2i(location, data[0], data[1]);
+ }
+ break;
+ case gl.INT_VEC3:
+ if (uniform.size > 1) {
+ data.length && gl.uniform3iv(location, data);
+ } else {
+ gl.uniform3i(location, data[0], data[1], data[2]);
+ }
+ break;
+ case gl.INT_VEC4:
+ if (uniform.size > 1) {
+ data.length && gl.uniform4iv(location, data);
+ } else {
+ gl.uniform4i(location, data[0], data[1], data[2], data[3]);
+ }
+ break;
+ case gl.SAMPLER_2D:
+ gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+ uniform.texture = data instanceof _main.default.Texture ? data : this._renderer.getTexture(data);
+ gl.uniform1i(location, uniform.samplerIndex);
+ if (uniform.texture.src.gifProperties) {
+ uniform.texture.src._animateGif(this._renderer._pInst);
+ }
+ break;
+ //@todo complete all types
+ }
+ return this;
+ } /* NONE OF THIS IS FAST OR EFFICIENT BUT BEAR WITH ME
+ *
+ * these shader "type" query methods are used by various
+ * facilities of the renderer to determine if changing
+ * the shader type for the required action (for example,
+ * do we need to load the default lighting shader if the
+ * current shader cannot handle lighting?)
+ *
+ **/
+
+ },
+ {
+ key: 'isLightShader',
+ value: function isLightShader() {
+ return this.attributes.aNormal !== 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;
+ }
+ },
+ {
+ key: 'isNormalShader',
+ value: function isNormalShader() {
+ return this.attributes.aNormal !== undefined;
+ }
+ },
+ {
+ key: 'isTextureShader',
+ value: function isTextureShader() {
+ return this.samplers.length > 0;
+ }
+ },
+ {
+ key: 'isColorShader',
+ value: function isColorShader() {
+ return this.attributes.aVertexColor !== undefined || this.uniforms.uMaterialColor !== undefined;
+ }
+ },
+ {
+ key: 'isTexLightShader',
+ value: function isTexLightShader() {
+ return this.isLightShader() && this.isTextureShader();
+ }
+ },
+ {
+ key: 'isStrokeShader',
+ value: function isStrokeShader() {
+ return this.uniforms.uStrokeWeight !== undefined;
+ } /**
+ * @method enableAttrib
+ * @chainable
+ * @private
+ */
+
+ },
+ {
+ key: 'enableAttrib',
+ value: function enableAttrib(attr, size, type, normalized, stride, offset) {
+ if (attr) {
+ if (typeof IS_MINIFIED === 'undefined' && this.attributes[attr.name] !== attr) {
+ console.warn('The attribute "'.concat(attr.name, '"passed to enableAttrib does not belong to this shader.'));
+ }
+ var loc = attr.location;
+ if (loc !== - 1) {
+ var gl = this._renderer.GL;
+ // Enable register even if it is disabled
+ if (!this._renderer.registerEnabled.has(loc)) {
+ gl.enableVertexAttribArray(loc);
+ // Record register availability
+ this._renderer.registerEnabled.add(loc);
+ }
+ this._renderer.GL.vertexAttribPointer(loc, size, type || gl.FLOAT, normalized || false, stride || 0, offset || 0);
+ }
+ }
+ return this;
+ } /**
+ * Once all buffers have been bound, this checks to see if there are any
+ * remaining active attributes, likely left over from previous renders,
+ * and disables them so that they don't affect rendering.
+ * @method disableRemainingAttributes
+ * @private
+ */
+
+ },
+ {
+ key: 'disableRemainingAttributes',
+ value: function disableRemainingAttributes() {
+ var _this = this;
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ var _loop = function _loop() {
+ var location = _step4.value;
+ if (!Object.keys(_this.attributes).some(function (key) {
+ return _this.attributes[key].location === location;
+ })) {
+ _this._renderer.GL.disableVertexAttribArray(location);
+ _this._renderer.registerEnabled.delete(location);
+ }
+ };
+ for (var _iterator4 = this._renderer.registerEnabled.values() [Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ _loop();
+ }
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ }
+ }
+ ]);
+ return _class;
+ }();
+ var _default = _main.default.Shader;
+ exports.default = _default;
+ },
+ {
+ '../core/main': 298,
+ 'core-js/modules/es.array.index-of': 178,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.array.slice': 183,
+ 'core-js/modules/es.array.some': 184,
+ 'core-js/modules/es.function.name': 186,
+ 'core-js/modules/es.object.keys': 199,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 357: [
+ 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.checkWebGLCapabilities = checkWebGLCapabilities;
+ exports.default = void 0;
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } /**
+ * This module defines the p5.Texture class
+ * @module 3D
+ * @submodule Material
+ * @for p5
+ * @requires core
+ */
+ /**
+ * Texture class for WEBGL Mode
+ * @private
+ * @class p5.Texture
+ * @param {p5.RendererGL} renderer an instance of p5.RendererGL that
+ * will provide the GL context for this new p5.Texture
+ * @param {p5.Image|p5.Graphics|p5.Element|p5.MediaElement|ImageData|p5.Framebuffer|p5.FramebufferTexture|ImageData} [obj] the
+ * object containing the image data to store in the texture.
+ * @param {Object} [settings] optional A javascript object containing texture
+ * settings.
+ * @param {Number} [settings.format] optional The internal color component
+ * format for the texture. Possible values for format include gl.RGBA,
+ * gl.RGB, gl.ALPHA, gl.LUMINANCE, gl.LUMINANCE_ALPHA. Defaults to gl.RBGA
+ * @param {Number} [settings.minFilter] optional The texture minification
+ * filter setting. Possible values are gl.NEAREST or gl.LINEAR. Defaults
+ * to gl.LINEAR. Note, Mipmaps are not implemented in p5.
+ * @param {Number} [settings.magFilter] optional The texture magnification
+ * filter setting. Possible values are gl.NEAREST or gl.LINEAR. Defaults
+ * to gl.LINEAR. Note, Mipmaps are not implemented in p5.
+ * @param {Number} [settings.wrapS] optional The texture wrap settings for
+ * the s coordinate, or x axis. Possible values are gl.CLAMP_TO_EDGE,
+ * gl.REPEAT, and gl.MIRRORED_REPEAT. The mirror settings are only available
+ * when using a power of two sized texture. Defaults to gl.CLAMP_TO_EDGE
+ * @param {Number} [settings.wrapT] optional The texture wrap settings for
+ * the t coordinate, or y axis. Possible values are gl.CLAMP_TO_EDGE,
+ * gl.REPEAT, and gl.MIRRORED_REPEAT. The mirror settings are only available
+ * when using a power of two sized texture. Defaults to gl.CLAMP_TO_EDGE
+ * @param {Number} [settings.dataType] optional The data type of the texel
+ * data. Possible values are gl.UNSIGNED_BYTE or gl.FLOAT. There are more
+ * formats that are not implemented in p5. Defaults to gl.UNSIGNED_BYTE.
+ */
+
+ _main.default.Texture = /*#__PURE__*/ function () {
+ function Texture(renderer, obj, settings) {
+ _classCallCheck(this, Texture);
+ this._renderer = renderer;
+ var gl = this._renderer.GL;
+ settings = settings || {
+ };
+ this.src = obj;
+ this.glTex = undefined;
+ this.glTarget = gl.TEXTURE_2D;
+ this.glFormat = settings.format || gl.RGBA;
+ this.mipmaps = false;
+ this.glMinFilter = settings.minFilter || gl.LINEAR;
+ this.glMagFilter = settings.magFilter || gl.LINEAR;
+ this.glWrapS = settings.wrapS || gl.CLAMP_TO_EDGE;
+ this.glWrapT = settings.wrapT || gl.CLAMP_TO_EDGE;
+ this.glDataType = settings.dataType || gl.UNSIGNED_BYTE;
+ var support = checkWebGLCapabilities(renderer);
+ if (this.glFormat === gl.HALF_FLOAT && !support.halfFloat) {
+ console.log('This device does not support dataType HALF_FLOAT. Falling back to FLOAT.');
+ this.glDataType = gl.FLOAT;
+ }
+ if (this.glFormat === gl.HALF_FLOAT && (this.glMinFilter === gl.LINEAR || this.glMagFilter === gl.LINEAR) && !support.halfFloatLinear) {
+ console.log('This device does not support linear filtering for dataType FLOAT. Falling back to NEAREST.');
+ if (this.glMinFilter === gl.LINEAR) this.glMinFilter = gl.NEAREST;
+ if (this.glMagFilter === gl.LINEAR) this.glMagFilter = gl.NEAREST;
+ }
+ if (this.glFormat === gl.FLOAT && !support.float) {
+ console.log('This device does not support dataType FLOAT. Falling back to UNSIGNED_BYTE.');
+ this.glDataType = gl.UNSIGNED_BYTE;
+ }
+ if (this.glFormat === gl.FLOAT && (this.glMinFilter === gl.LINEAR || this.glMagFilter === gl.LINEAR) && !support.floatLinear) {
+ console.log('This device does not support linear filtering for dataType FLOAT. Falling back to NEAREST.');
+ if (this.glMinFilter === gl.LINEAR) this.glMinFilter = gl.NEAREST;
+ if (this.glMagFilter === gl.LINEAR) this.glMagFilter = gl.NEAREST;
+ } // used to determine if this texture might need constant updating
+ // because it is a video or gif.
+
+ this.isSrcMediaElement = typeof _main.default.MediaElement !== 'undefined' && obj instanceof _main.default.MediaElement;
+ this._videoPrevUpdateTime = 0;
+ this.isSrcHTMLElement = typeof _main.default.Element !== 'undefined' && obj instanceof _main.default.Element && !(obj instanceof _main.default.Graphics) && !(obj instanceof _main.default.Renderer);
+ this.isSrcP5Image = obj instanceof _main.default.Image;
+ this.isSrcP5Graphics = obj instanceof _main.default.Graphics;
+ this.isSrcP5Renderer = obj instanceof _main.default.Renderer;
+ this.isImageData = typeof ImageData !== 'undefined' && obj instanceof ImageData;
+ this.isFramebufferTexture = obj instanceof _main.default.FramebufferTexture;
+ var textureData = this._getTextureDataFromSource();
+ this.width = textureData.width;
+ this.height = textureData.height;
+ this.init(textureData);
+ return this;
+ }
+ _createClass(Texture, [
+ {
+ key: '_getTextureDataFromSource',
+ value: function _getTextureDataFromSource() {
+ var textureData;
+ if (this.isFramebufferTexture) {
+ textureData = this.src.rawTexture();
+ } else if (this.isSrcP5Image) {
+ // param is a p5.Image
+ textureData = this.src.canvas;
+ } else if (this.isSrcMediaElement || this.isSrcP5Graphics || this.isSrcP5Renderer || this.isSrcHTMLElement) {
+ // if param is a video HTML element
+ textureData = this.src.elt;
+ } else if (this.isImageData) {
+ textureData = this.src;
+ }
+ return textureData;
+ } /**
+ * Initializes common texture parameters, creates a gl texture,
+ * tries to upload the texture for the first time if data is
+ * already available.
+ * @private
+ * @method init
+ */
+
+ },
+ {
+ key: 'init',
+ value: function init(data) {
+ var gl = this._renderer.GL;
+ if (!this.isFramebufferTexture) {
+ this.glTex = gl.createTexture();
+ }
+ this.glWrapS = this._renderer.textureWrapX;
+ this.glWrapT = this._renderer.textureWrapY;
+ this.setWrapMode(this.glWrapS, this.glWrapT);
+ this.bindTexture();
+ //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.glMagFilter);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.glMinFilter);
+ if (this.isFramebufferTexture) {
+ // Do nothing, the framebuffer manages its own content
+ } else if (this.width === 0 || this.height === 0 || this.isSrcMediaElement && !this.src.loadedmetadata) {
+ // assign a 1×1 empty texture initially, because data is not yet ready,
+ // so that no errors occur in gl console!
+ var tmpdata = new Uint8Array([1,
+ 1,
+ 1,
+ 1]);
+ gl.texImage2D(this.glTarget, 0, gl.RGBA, 1, 1, 0, this.glFormat, this.glDataType, tmpdata);
+ } else {
+ // data is ready: just push the texture!
+ gl.texImage2D(this.glTarget, 0, this.glFormat, this.glFormat, this.glDataType, data);
+ }
+ } /**
+ * Checks if the source data for this texture has changed (if it's
+ * easy to do so) and reuploads the texture if necessary. If it's not
+ * possible or to expensive to do a calculation to determine wheter or
+ * not the data has occurred, this method simply re-uploads the texture.
+ * @method update
+ */
+
+ },
+ {
+ key: 'update',
+ value: function update() {
+ var data = this.src;
+ if (data.width === 0 || data.height === 0) {
+ return false; // nothing to do!
+ } // FramebufferTexture instances wrap raw WebGL textures already, which
+ // don't need any extra updating, as they already live on the GPU
+
+ if (this.isFramebufferTexture) {
+ return false;
+ }
+ var textureData = this._getTextureDataFromSource();
+ var updated = false;
+ var gl = this._renderer.GL;
+ // pull texture from data, make sure width & height are appropriate
+ if (textureData.width !== this.width || textureData.height !== this.height) {
+ updated = true;
+ // make sure that if the width and height of this.src have changed
+ // for some reason, we update our metadata and upload the texture again
+ this.width = textureData.width || data.width;
+ this.height = textureData.height || data.height;
+ if (this.isSrcP5Image) {
+ data.setModified(false);
+ } else if (this.isSrcMediaElement || this.isSrcHTMLElement) {
+ // on the first frame the metadata comes in, the size will be changed
+ // from 0 to actual size, but pixels may not be available.
+ // flag for update in a future frame.
+ // if we don't do this, a paused video, for example, may not
+ // send the first frame to texture memory.
+ data.setModified(true);
+ }
+ } else if (this.isSrcP5Image) {
+ // for an image, we only update if the modified field has been set,
+ // for example, by a call to p5.Image.set
+ if (data.isModified()) {
+ updated = true;
+ data.setModified(false);
+ }
+ } else if (this.isSrcMediaElement) {
+ // for a media element (video), we'll check if the current time in
+ // the video frame matches the last time. if it doesn't match, the
+ // video has advanced or otherwise been taken to a new frame,
+ // and we need to upload it.
+ if (data.isModified()) {
+ // p5.MediaElement may have also had set/updatePixels, etc. called
+ // on it and should be updated, or may have been set for the first
+ // time!
+ updated = true;
+ data.setModified(false);
+ } else if (data.loadedmetadata) {
+ // if the meta data has been loaded, we can ask the video
+ // what it's current position (in time) is.
+ if (this._videoPrevUpdateTime !== data.time()) {
+ // update the texture in gpu mem only if the current
+ // video timestamp does not match the timestamp of the last
+ // time we uploaded this texture (and update the time we
+ // last uploaded, too)
+ this._videoPrevUpdateTime = data.time();
+ updated = true;
+ }
+ }
+ } else if (this.isImageData) {
+ if (data._dirty) {
+ data._dirty = false;
+ updated = true;
+ }
+ } else {
+ /* data instanceof p5.Graphics, probably */
+ // there is not enough information to tell if the texture can be
+ // conditionally updated; so to be safe, we just go ahead and upload it.
+ updated = true;
+ }
+ if (updated) {
+ this.bindTexture();
+ gl.texImage2D(this.glTarget, 0, this.glFormat, this.glFormat, this.glDataType, textureData);
+ }
+ return updated;
+ } /**
+ * Binds the texture to the appropriate GL target.
+ * @method bindTexture
+ */
+
+ },
+ {
+ key: 'bindTexture',
+ value: function bindTexture() {
+ // bind texture using gl context + glTarget and
+ // generated gl texture object
+ var gl = this._renderer.GL;
+ gl.bindTexture(this.glTarget, this.getTexture());
+ return this;
+ } /**
+ * Unbinds the texture from the appropriate GL target.
+ * @method unbindTexture
+ */
+
+ },
+ {
+ key: 'unbindTexture',
+ value: function unbindTexture() {
+ // unbind per above, disable texturing on glTarget
+ var gl = this._renderer.GL;
+ gl.bindTexture(this.glTarget, null);
+ }
+ },
+ {
+ key: 'getTexture',
+ value: function getTexture() {
+ if (this.isFramebufferTexture) {
+ return this.src.rawTexture();
+ } else {
+ return this.glTex;
+ }
+ } /**
+ * Sets how a texture is be interpolated when upscaled or downscaled.
+ * Nearest filtering uses nearest neighbor scaling when interpolating
+ * Linear filtering uses WebGL's linear scaling when interpolating
+ * @method setInterpolation
+ * @param {String} downScale Specifies the texture filtering when
+ * textures are shrunk. Options are LINEAR or NEAREST
+ * @param {String} upScale Specifies the texture filtering when
+ * textures are magnified. Options are LINEAR or NEAREST
+ * @todo implement mipmapping filters
+ */
+
+ },
+ {
+ key: 'setInterpolation',
+ value: function setInterpolation(downScale, upScale) {
+ var gl = this._renderer.GL;
+ 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
+ */
+
+ },
+ {
+ key: 'setWrapMode',
+ value: function setWrapMode(wrapX, wrapY) {
+ var gl = this._renderer.GL;
+ // for webgl 1 we need to check if the texture is power of two
+ // if it isn't we will set the wrap mode to CLAMP
+ // webgl2 will support npot REPEAT and MIRROR but we don't check for it yet
+ var isPowerOfTwo = function isPowerOfTwo(x) {
+ return (x & x - 1) === 0;
+ };
+ var textureData = this._getTextureDataFromSource();
+ var wrapWidth;
+ var wrapHeight;
+ if (textureData.naturalWidth && textureData.naturalHeight) {
+ wrapWidth = textureData.naturalWidth;
+ wrapHeight = textureData.naturalHeight;
+ } else {
+ wrapWidth = this.width;
+ wrapHeight = this.height;
+ }
+ var widthPowerOfTwo = isPowerOfTwo(wrapWidth);
+ var heightPowerOfTwo = isPowerOfTwo(wrapHeight);
+ if (wrapX === constants.REPEAT) {
+ if (this._renderer.webglVersion === constants.WEBGL2 || widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapS = gl.REPEAT;
+ } else {
+ console.warn('You tried to set the wrap mode to REPEAT but the texture size is not a power of two. Setting to CLAMP instead');
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+ } else if (wrapX === constants.MIRROR) {
+ if (this._renderer.webglVersion === constants.WEBGL2 || widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapS = gl.MIRRORED_REPEAT;
+ } else {
+ console.warn('You tried to set the wrap mode to MIRROR but the texture size is not a power of two. Setting to CLAMP instead');
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+ } else {
+ // falling back to default if didn't get a proper mode
+ this.glWrapS = gl.CLAMP_TO_EDGE;
+ }
+ if (wrapY === constants.REPEAT) {
+ if (this._renderer.webglVersion === constants.WEBGL2 || widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapT = gl.REPEAT;
+ } else {
+ console.warn('You tried to set the wrap mode to REPEAT but the texture size is not a power of two. Setting to CLAMP instead');
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+ } else if (wrapY === constants.MIRROR) {
+ if (this._renderer.webglVersion === constants.WEBGL2 || widthPowerOfTwo && heightPowerOfTwo) {
+ this.glWrapT = gl.MIRRORED_REPEAT;
+ } else {
+ console.warn('You tried to set the wrap mode to MIRROR but the texture size is not a power of two. Setting to CLAMP instead');
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+ } else {
+ // falling back to default if didn't get a proper mode
+ this.glWrapT = gl.CLAMP_TO_EDGE;
+ }
+ this.bindTexture();
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.glWrapS);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.glWrapT);
+ this.unbindTexture();
+ }
+ }
+ ]);
+ return Texture;
+ }();
+ function checkWebGLCapabilities(_ref) {
+ var GL = _ref.GL,
+ webglVersion = _ref.webglVersion;
+ var gl = GL;
+ var supportsFloat = webglVersion === constants.WEBGL2 ? gl.getExtension('EXT_color_buffer_float') && gl.getExtension('EXT_float_blend') : gl.getExtension('OES_texture_float');
+ var supportsFloatLinear = supportsFloat && gl.getExtension('OES_texture_float_linear');
+ var supportsHalfFloat = webglVersion === constants.WEBGL2 ? gl.getExtension('EXT_color_buffer_float') : gl.getExtension('OES_texture_half_float');
+ var supportsHalfFloatLinear = supportsHalfFloat && gl.getExtension('OES_texture_half_float_linear');
+ return {
+ float: supportsFloat,
+ floatLinear: supportsFloatLinear,
+ halfFloat: supportsHalfFloat,
+ halfFloatLinear: supportsHalfFloatLinear
+ };
+ }
+ var _default = _main.default.Texture;
+ exports.default = _default;
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.typed-array.copy-within': 223,
+ 'core-js/modules/es.typed-array.every': 224,
+ 'core-js/modules/es.typed-array.fill': 225,
+ 'core-js/modules/es.typed-array.filter': 226,
+ 'core-js/modules/es.typed-array.find': 228,
+ 'core-js/modules/es.typed-array.find-index': 227,
+ 'core-js/modules/es.typed-array.for-each': 231,
+ 'core-js/modules/es.typed-array.includes': 232,
+ 'core-js/modules/es.typed-array.index-of': 233,
+ 'core-js/modules/es.typed-array.iterator': 236,
+ 'core-js/modules/es.typed-array.join': 237,
+ 'core-js/modules/es.typed-array.last-index-of': 238,
+ 'core-js/modules/es.typed-array.map': 239,
+ 'core-js/modules/es.typed-array.reduce': 241,
+ 'core-js/modules/es.typed-array.reduce-right': 240,
+ 'core-js/modules/es.typed-array.reverse': 242,
+ 'core-js/modules/es.typed-array.set': 243,
+ 'core-js/modules/es.typed-array.slice': 244,
+ 'core-js/modules/es.typed-array.some': 245,
+ 'core-js/modules/es.typed-array.sort': 246,
+ 'core-js/modules/es.typed-array.subarray': 247,
+ 'core-js/modules/es.typed-array.to-locale-string': 248,
+ 'core-js/modules/es.typed-array.to-string': 249,
+ 'core-js/modules/es.typed-array.uint8-array': 252,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 358: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.get-own-property-descriptor');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/es.weak-map');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ function _typeof2(obj) {
+ if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+ _typeof2 = function _typeof2(obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof2 = function _typeof2(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+ };
+ }
+ return _typeof2(obj);
+ }
+ function _typeof(obj) {
+ if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') {
+ _typeof = function _typeof(obj) {
+ return _typeof2(obj);
+ };
+ } else {
+ _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj);
+ };
+ }
+ return _typeof(obj);
+ }
+ _dereq_('core-js/modules/es.symbol');
+ _dereq_('core-js/modules/es.symbol.description');
+ _dereq_('core-js/modules/es.symbol.iterator');
+ _dereq_('core-js/modules/es.array.iterator');
+ _dereq_('core-js/modules/es.object.to-string');
+ _dereq_('core-js/modules/es.regexp.exec');
+ _dereq_('core-js/modules/es.string.iterator');
+ _dereq_('core-js/modules/es.string.split');
+ _dereq_('core-js/modules/es.string.sub');
+ _dereq_('core-js/modules/web.dom-collections.iterator');
+ var _main = _interopRequireDefault(_dereq_('../core/main'));
+ var constants = _interopRequireWildcard(_dereq_('../core/constants'));
+ _dereq_('./p5.Shader');
+ _dereq_('./p5.RendererGL.Retained');
+ function _getRequireWildcardCache() {
+ if (typeof WeakMap !== 'function') return null;
+ var cache = new WeakMap();
+ _getRequireWildcardCache = function _getRequireWildcardCache() {
+ return cache;
+ };
+ return cache;
+ }
+ function _interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ }
+ if (obj === null || _typeof(obj) !== 'object' && typeof obj !== 'function') {
+ return {
+ default:
+ obj
+ };
+ }
+ var cache = _getRequireWildcardCache();
+ if (cache && cache.has(obj)) {
+ return cache.get(obj);
+ }
+ var newObj = {
+ };
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+ if (desc && (desc.get || desc.set)) {
+ Object.defineProperty(newObj, key, desc);
+ } else {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ if (cache) {
+ cache.set(obj, newObj);
+ }
+ return newObj;
+ }
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ }
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError('Cannot call a class as a function');
+ }
+ }
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ('value' in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ } // Text/Typography
+ // @TODO:
+
+ _main.default.RendererGL.prototype._applyTextProperties = function () {
+ //@TODO finish implementation
+ //console.error('text commands not yet implemented in webgl');
+ };
+ _main.default.RendererGL.prototype.textWidth = function (s) {
+ if (this._isOpenType()) {
+ return this._textFont._textWidth(s, this._textSize);
+ }
+ return 0; // TODO: error
+ };
+ // rendering constants
+ // the number of rows/columns dividing each glyph
+ var charGridWidth = 9;
+ var charGridHeight = charGridWidth;
+ // size of the image holding the bezier stroke info
+ var strokeImageWidth = 64;
+ var strokeImageHeight = 64;
+ // size of the image holding the stroke indices for each row/col
+ var gridImageWidth = 64;
+ var gridImageHeight = 64;
+ // size of the image holding the offset/length of each row/col stripe
+ var cellImageWidth = 64;
+ var cellImageHeight = 64;
+ /**
+ * @private
+ * @class ImageInfos
+ * @param {Integer} width
+ * @param {Integer} height
+ *
+ * the ImageInfos class holds a list of ImageDatas of a given size.
+ */
+ var ImageInfos = /*#__PURE__*/ function () {
+ function ImageInfos(width, height) {
+ _classCallCheck(this, ImageInfos);
+ this.width = width;
+ this.height = height;
+ this.infos = [
+ ]; // the list of images
+ } /**
+ *
+ * @method findImage
+ * @param {Integer} space
+ * @return {Object} contains the ImageData, and pixel index into that
+ * ImageData where the free space was allocated.
+ *
+ * finds free space of a given size in the ImageData list
+ */
+
+ _createClass(ImageInfos, [
+ {
+ key: 'findImage',
+ value: function findImage(space) {
+ var imageSize = this.width * this.height;
+ if (space > imageSize) throw new Error('font is too complex to render in 3D');
+ // search through the list of images, looking for one with
+ // anough unused space.
+ var imageInfo,
+ imageData;
+ for (var ii = this.infos.length - 1; ii >= 0; --ii) {
+ var imageInfoTest = this.infos[ii];
+ if (imageInfoTest.index + space < imageSize) {
+ // found one
+ imageInfo = imageInfoTest;
+ imageData = imageInfoTest.imageData;
+ break;
+ }
+ }
+ if (!imageInfo) {
+ try {
+ // create a new image
+ imageData = new ImageData(this.width, this.height);
+ } catch (err) {
+ // for browsers that don't support ImageData constructors (ie IE11)
+ // create an ImageData using the old method
+ var canvas = document.getElementsByTagName('canvas') [0];
+ var created = !canvas;
+ if (!canvas) {
+ // create a temporary canvas
+ canvas = document.createElement('canvas');
+ canvas.style.display = 'none';
+ document.body.appendChild(canvas);
+ }
+ var ctx = canvas.getContext('2d');
+ if (ctx) {
+ imageData = ctx.createImageData(this.width, this.height);
+ }
+ if (created) {
+ // distroy the temporary canvas, if necessary
+ document.body.removeChild(canvas);
+ }
+ } // construct & dd the new image info
+
+ imageInfo = {
+ index: 0,
+ imageData: imageData
+ };
+ this.infos.push(imageInfo);
+ }
+ var index = imageInfo.index;
+ imageInfo.index += space; // move to the start of the next image
+ imageData._dirty = true;
+ return {
+ imageData: imageData,
+ index: index
+ };
+ }
+ }
+ ]);
+ return ImageInfos;
+ }();
+ /**
+ * @function setPixel
+ * @param {Object} imageInfo
+ * @param {Number} r
+ * @param {Number} g
+ * @param {Number} b
+ * @param {Number} a
+ *
+ * writes the next pixel into an indexed ImageData
+ */
+ function setPixel(imageInfo, r, g, b, a) {
+ var imageData = imageInfo.imageData;
+ var pixels = imageData.data;
+ var index = imageInfo.index++ * 4;
+ pixels[index++] = r;
+ pixels[index++] = g;
+ pixels[index++] = b;
+ pixels[index++] = a;
+ }
+ var SQRT3 = Math.sqrt(3);
+ /**
+ * @private
+ * @class FontInfo
+ * @param {Object} font an opentype.js font object
+ *
+ * contains cached images and glyph information for an opentype font
+ */
+ var FontInfo = /*#__PURE__*/ function () {
+ function FontInfo(font) {
+ _classCallCheck(this, FontInfo);
+ this.font = font;
+ // the bezier curve coordinates
+ this.strokeImageInfos = new ImageInfos(strokeImageWidth, strokeImageHeight);
+ // lists of curve indices for each row/column slice
+ this.colDimImageInfos = new ImageInfos(gridImageWidth, gridImageHeight);
+ this.rowDimImageInfos = new ImageInfos(gridImageWidth, gridImageHeight);
+ // the offset & length of each row/col slice in the glyph
+ this.colCellImageInfos = new ImageInfos(cellImageWidth, cellImageHeight);
+ this.rowCellImageInfos = new ImageInfos(cellImageWidth, cellImageHeight);
+ // the cached information for each glyph
+ this.glyphInfos = {
+ };
+ } /**
+ * @method getGlyphInfo
+ * @param {Glyph} glyph the x positions of points in the curve
+ * @returns {Object} the glyphInfo for that glyph
+ *
+ * calculates rendering info for a glyph, including the curve information,
+ * row & column stripes compiled into textures.
+ */
+
+ _createClass(FontInfo, [
+ {
+ key: 'getGlyphInfo',
+ value: function getGlyphInfo(glyph) {
+ // check the cache
+ var gi = this.glyphInfos[glyph.index];
+ if (gi) return gi;
+ // get the bounding box of the glyph from opentype.js
+ var bb = glyph.getBoundingBox();
+ var xMin = bb.x1;
+ var yMin = bb.y1;
+ var gWidth = bb.x2 - xMin;
+ var gHeight = bb.y2 - yMin;
+ var cmds = glyph.path.commands;
+ // don't bother rendering invisible glyphs
+ if (gWidth === 0 || gHeight === 0 || !cmds.length) {
+ return this.glyphInfos[glyph.index] = {
+ };
+ }
+ var i;
+ var strokes = [
+ ]; // the strokes in this glyph
+ var rows = [
+ ]; // the indices of strokes in each row
+ var cols = [
+ ]; // the indices of strokes in each column
+ for (i = charGridWidth - 1; i >= 0; --i) {
+ cols.push([]);
+ }
+ for (i = charGridHeight - 1; i >= 0; --i) {
+ rows.push([]);
+ } /**
+ * @function push
+ * @param {Number[]} xs the x positions of points in the curve
+ * @param {Number[]} ys the y positions of points in the curve
+ * @param {Object} v the curve information
+ *
+ * adds a curve to the rows & columns that it intersects with
+ */
+
+ function push(xs, ys, v) {
+ var index = strokes.length; // the index of this stroke
+ strokes.push(v); // add this stroke to the list
+ /**
+ * @function minMax
+ * @param {Number[]} rg the list of values to compare
+ * @param {Number} min the initial minimum value
+ * @param {Number} max the initial maximum value
+ *
+ * find the minimum & maximum value in a list of values
+ */
+ function minMax(rg, min, max) {
+ for (var _i = rg.length; _i-- > 0; ) {
+ var _v = rg[_i];
+ if (min > _v) min = _v;
+ if (max < _v) max = _v;
+ }
+ return {
+ min: min,
+ max: max
+ };
+ } // Expand the bounding box of the glyph by the number of cells below
+ // before rounding. Curves only partially through a cell won't be added
+ // to adjacent cells, but ones that are close will be. This helps fix
+ // small visual glitches that occur when curves are close to grid cell
+ // boundaries.
+
+ var cellOffset = 0.5;
+ // loop through the rows & columns that the curve intersects
+ // adding the curve to those slices
+ var mmX = minMax(xs, 1, 0);
+ var ixMin = Math.max(Math.floor(mmX.min * charGridWidth - cellOffset), 0);
+ var ixMax = Math.min(Math.ceil(mmX.max * charGridWidth + cellOffset), charGridWidth);
+ for (var iCol = ixMin; iCol < ixMax; ++iCol) {
+ cols[iCol].push(index);
+ }
+ var mmY = minMax(ys, 1, 0);
+ var iyMin = Math.max(Math.floor(mmY.min * charGridHeight - cellOffset), 0);
+ var iyMax = Math.min(Math.ceil(mmY.max * charGridHeight + cellOffset), charGridHeight);
+ for (var iRow = iyMin; iRow < iyMax; ++iRow) {
+ rows[iRow].push(index);
+ }
+ } /**
+ * @function clamp
+ * @param {Number} v the value to clamp
+ * @param {Number} min the minimum value
+ * @param {Number} max the maxmimum value
+ *
+ * clamps a value between a minimum & maximum value
+ */
+
+ function clamp(v, min, max) {
+ if (v < min) return min;
+ if (v > max) return max;
+ return v;
+ } /**
+ * @function byte
+ * @param {Number} v the value to scale
+ *
+ * converts a floating-point number in the range 0-1 to a byte 0-255
+ */
+
+ function byte(v) {
+ return clamp(255 * v, 0, 255);
+ } /**
+ * @private
+ * @class Cubic
+ * @param {Number} p0 the start point of the curve
+ * @param {Number} c0 the first control point
+ * @param {Number} c1 the second control point
+ * @param {Number} p1 the end point
+ *
+ * a cubic curve
+ */
+
+ var Cubic = /*#__PURE__*/ function () {
+ function Cubic(p0, c0, c1, p1) {
+ _classCallCheck(this, Cubic);
+ this.p0 = p0;
+ this.c0 = c0;
+ this.c1 = c1;
+ this.p1 = p1;
+ } /**
+ * @method toQuadratic
+ * @return {Object} the quadratic approximation
+ *
+ * converts the cubic to a quadtratic approximation by
+ * picking an appropriate quadratic control point
+ */
+
+ _createClass(Cubic, [
+ {
+ key: 'toQuadratic',
+ value: function toQuadratic() {
+ return {
+ x: this.p0.x,
+ y: this.p0.y,
+ x1: this.p1.x,
+ y1: this.p1.y,
+ cx: ((this.c0.x + this.c1.x) * 3 - (this.p0.x + this.p1.x)) / 4,
+ cy: ((this.c0.y + this.c1.y) * 3 - (this.p0.y + this.p1.y)) / 4
+ };
+ } /**
+ * @method quadError
+ * @return {Number} the error
+ *
+ * calculates the magnitude of error of this curve's
+ * quadratic approximation.
+ */
+
+ },
+ {
+ key: 'quadError',
+ value: function quadError() {
+ return _main.default.Vector.sub(_main.default.Vector.sub(this.p1, this.p0), _main.default.Vector.mult(_main.default.Vector.sub(this.c1, this.c0), 3)).mag() / 2;
+ } /**
+ * @method split
+ * @param {Number} t the value (0-1) at which to split
+ * @return {Cubic} the second part of the curve
+ *
+ * splits the cubic into two parts at a point 't' along the curve.
+ * this cubic keeps its start point and its end point becomes the
+ * point at 't'. the 'end half is returned.
+ */
+
+ },
+ {
+ key: 'split',
+ value: function split(t) {
+ var m1 = _main.default.Vector.lerp(this.p0, this.c0, t);
+ var m2 = _main.default.Vector.lerp(this.c0, this.c1, t);
+ var mm1 = _main.default.Vector.lerp(m1, m2, t);
+ this.c1 = _main.default.Vector.lerp(this.c1, this.p1, t);
+ this.c0 = _main.default.Vector.lerp(m2, this.c1, t);
+ var pt = _main.default.Vector.lerp(mm1, this.c0, t);
+ var part1 = new Cubic(this.p0, m1, mm1, pt);
+ this.p0 = pt;
+ return part1;
+ } /**
+ * @method splitInflections
+ * @return {Cubic[]} the non-inflecting pieces of this cubic
+ *
+ * returns an array containing 0, 1 or 2 cubics split resulting
+ * from splitting this cubic at its inflection points.
+ * this cubic is (potentially) altered and returned in the list.
+ */
+
+ },
+ {
+ key: 'splitInflections',
+ value: function splitInflections() {
+ var a = _main.default.Vector.sub(this.c0, this.p0);
+ var b = _main.default.Vector.sub(_main.default.Vector.sub(this.c1, this.c0), a);
+ var c = _main.default.Vector.sub(_main.default.Vector.sub(_main.default.Vector.sub(this.p1, this.c1), a), _main.default.Vector.mult(b, 2));
+ var cubics = [
+ ];
+ // find the derivative coefficients
+ var A = b.x * c.y - b.y * c.x;
+ if (A !== 0) {
+ var B = a.x * c.y - a.y * c.x;
+ var C = a.x * b.y - a.y * b.x;
+ var disc = B * B - 4 * A * C;
+ if (disc >= 0) {
+ if (A < 0) {
+ A = - A;
+ B = - B;
+ C = - C;
+ }
+ var Q = Math.sqrt(disc);
+ var t0 = ( - B - Q) / (2 * A); // the first inflection point
+ var t1 = ( - B + Q) / (2 * A); // the second inflection point
+ // test if the first inflection point lies on the curve
+ if (t0 > 0 && t0 < 1) {
+ // split at the first inflection point
+ cubics.push(this.split(t0));
+ // scale t2 into the second part
+ t1 = 1 - (1 - t1) / (1 - t0);
+ } // test if the second inflection point lies on the curve
+
+ if (t1 > 0 && t1 < 1) {
+ // split at the second inflection point
+ cubics.push(this.split(t1));
+ }
+ }
+ }
+ cubics.push(this);
+ return cubics;
+ }
+ }
+ ]);
+ return Cubic;
+ }();
+ /**
+ * @function cubicToQuadratics
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} cx0
+ * @param {Number} cy0
+ * @param {Number} cx1
+ * @param {Number} cy1
+ * @param {Number} x1
+ * @param {Number} y1
+ * @returns {Cubic[]} an array of cubics whose quadratic approximations
+ * closely match the civen cubic.
+ *
+ * converts a cubic curve to a list of quadratics.
+ */
+ function cubicToQuadratics(x0, y0, cx0, cy0, cx1, cy1, x1, y1) {
+ // create the Cubic object and split it at its inflections
+ var cubics = new Cubic(new _main.default.Vector(x0, y0), new _main.default.Vector(cx0, cy0), new _main.default.Vector(cx1, cy1), new _main.default.Vector(x1, y1)).splitInflections();
+ var qs = [
+ ]; // the final list of quadratics
+ var precision = 30 / SQRT3;
+ // for each of the non-inflected pieces of the original cubic
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+ try {
+ for (var _iterator = cubics[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var cubic = _step.value;
+ // the cubic is iteratively split in 3 pieces:
+ // the first piece is accumulated in 'qs', the result.
+ // the last piece is accumulated in 'tail', temporarily.
+ // the middle piece is repeatedly split again, while necessary.
+ var tail = [
+ ];
+ var t3 = void 0;
+ for (; ; ) {
+ // calculate this cubic's precision
+ t3 = precision / cubic.quadError();
+ if (t3 >= 0.5 * 0.5 * 0.5) {
+ break; // not too bad, we're done
+ } // find a split point based on the error
+
+ var t = Math.pow(t3, 1 / 3);
+ // split the cubic in 3
+ var start = cubic.split(t);
+ var middle = cubic.split(1 - t / (1 - t));
+ qs.push(start); // the first part
+ tail.push(cubic); // the last part
+ cubic = middle; // iterate on the middle piece
+ }
+ if (t3 < 1) {
+ // a little excess error, split the middle in two
+ qs.push(cubic.split(0.5));
+ } // add the middle piece to the result
+
+ qs.push(cubic);
+ // finally add the tail, reversed, onto the result
+ Array.prototype.push.apply(qs, tail.reverse());
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ return qs;
+ } /**
+ * @function pushLine
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} x1
+ * @param {Number} y1
+ *
+ * add a straight line to the row/col grid of a glyph
+ */
+
+ function pushLine(x0, y0, x1, y1) {
+ var mx = (x0 + x1) / 2;
+ var my = (y0 + y1) / 2;
+ push([x0,
+ x1], [
+ y0,
+ y1
+ ], {
+ x: x0,
+ y: y0,
+ cx: mx,
+ cy: my
+ });
+ } /**
+ * @function samePoint
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} x1
+ * @param {Number} y1
+ * @return {Boolean} true if the two points are sufficiently close
+ *
+ * tests if two points are close enough to be considered the same
+ */
+
+ function samePoint(x0, y0, x1, y1) {
+ return Math.abs(x1 - x0) < 0.00001 && Math.abs(y1 - y0) < 0.00001;
+ }
+ var x0,
+ y0,
+ xs,
+ ys;
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+ try {
+ for (var _iterator2 = cmds[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var cmd = _step2.value;
+ // scale the coordinates to the range 0-1
+ var x1 = (cmd.x - xMin) / gWidth;
+ var y1 = (cmd.y - yMin) / gHeight;
+ // don't bother if this point is the same as the last
+ if (samePoint(x0, y0, x1, y1)) continue;
+ switch (cmd.type) {
+ case 'M':
+ {
+ // move
+ xs = x1;
+ ys = y1;
+ break;
+ }
+ case 'L':
+ {
+ // line
+ pushLine(x0, y0, x1, y1);
+ break;
+ }
+ case 'Q':
+ {
+ // quadratic
+ var cx = (cmd.x1 - xMin) / gWidth;
+ var cy = (cmd.y1 - yMin) / gHeight;
+ push([x0,
+ x1,
+ cx], [
+ y0,
+ y1,
+ cy
+ ], {
+ x: x0,
+ y: y0,
+ cx: cx,
+ cy: cy
+ });
+ break;
+ }
+ case 'Z':
+ {
+ // end
+ if (!samePoint(x0, y0, xs, ys)) {
+ // add an extra line closing the loop, if necessary
+ pushLine(x0, y0, xs, ys);
+ strokes.push({
+ x: xs,
+ y: ys
+ });
+ } else {
+ strokes.push({
+ x: x0,
+ y: y0
+ });
+ }
+ break;
+ }
+ case 'C':
+ {
+ // cubic
+ var cx1 = (cmd.x1 - xMin) / gWidth;
+ var cy1 = (cmd.y1 - yMin) / gHeight;
+ var cx2 = (cmd.x2 - xMin) / gWidth;
+ var cy2 = (cmd.y2 - yMin) / gHeight;
+ var qs = cubicToQuadratics(x0, y0, cx1, cy1, cx2, cy2, x1, y1);
+ for (var iq = 0; iq < qs.length; iq++) {
+ var q = qs[iq].toQuadratic();
+ push([q.x,
+ q.x1,
+ q.cx], [
+ q.y,
+ q.y1,
+ q.cy
+ ], q);
+ }
+ break;
+ }
+ default:
+ throw new Error('unknown command type: '.concat(cmd.type));
+ }
+ x0 = x1;
+ y0 = y1;
+ } // allocate space for the strokes
+
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ var strokeCount = strokes.length;
+ var strokeImageInfo = this.strokeImageInfos.findImage(strokeCount);
+ var strokeOffset = strokeImageInfo.index;
+ // fill the stroke image
+ for (var il = 0; il < strokeCount; ++il) {
+ var s = strokes[il];
+ setPixel(strokeImageInfo, byte(s.x), byte(s.y), byte(s.cx), byte(s.cy));
+ } /**
+ * @function layout
+ * @param {Number[][]} dim
+ * @param {ImageInfo[]} dimImageInfos
+ * @param {ImageInfo[]} cellImageInfos
+ * @return {Object}
+ *
+ * lays out the curves in a dimension (row or col) into two
+ * images, one for the indices of the curves themselves, and
+ * one containing the offset and length of those index spans.
+ */
+
+ function layout(dim, dimImageInfos, cellImageInfos) {
+ var dimLength = dim.length; // the number of slices in this dimension
+ var dimImageInfo = dimImageInfos.findImage(dimLength);
+ var dimOffset = dimImageInfo.index;
+ // calculate the total number of stroke indices in this dimension
+ var totalStrokes = 0;
+ for (var id = 0; id < dimLength; ++id) {
+ totalStrokes += dim[id].length;
+ } // allocate space for the stroke indices
+
+ var cellImageInfo = cellImageInfos.findImage(totalStrokes);
+ // for each slice in the glyph
+ for (var _i2 = 0; _i2 < dimLength; ++_i2) {
+ var strokeIndices = dim[_i2];
+ var _strokeCount = strokeIndices.length;
+ var cellLineIndex = cellImageInfo.index;
+ // write the offset and count into the glyph slice image
+ setPixel(dimImageInfo, cellLineIndex >> 7, cellLineIndex & 127, _strokeCount >> 7, _strokeCount & 127);
+ // for each stroke index in that slice
+ for (var iil = 0; iil < _strokeCount; ++iil) {
+ // write the stroke index into the slice's image
+ var strokeIndex = strokeIndices[iil] + strokeOffset;
+ setPixel(cellImageInfo, strokeIndex >> 7, strokeIndex & 127, 0, 0);
+ }
+ }
+ return {
+ cellImageInfo: cellImageInfo,
+ dimOffset: dimOffset,
+ dimImageInfo: dimImageInfo
+ };
+ } // initialize the info for this glyph
+
+ gi = this.glyphInfos[glyph.index] = {
+ glyph: glyph,
+ uGlyphRect: [
+ bb.x1,
+ - bb.y1,
+ bb.x2,
+ - bb.y2
+ ],
+ strokeImageInfo: strokeImageInfo,
+ strokes: strokes,
+ colInfo: layout(cols, this.colDimImageInfos, this.colCellImageInfos),
+ rowInfo: layout(rows, this.rowDimImageInfos, this.rowCellImageInfos)
+ };
+ gi.uGridOffset = [
+ gi.colInfo.dimOffset,
+ gi.rowInfo.dimOffset
+ ];
+ return gi;
+ }
+ }
+ ]);
+ return FontInfo;
+ }();
+ _main.default.RendererGL.prototype._renderText = function (p, line, x, y, maxY) {
+ if (!this._textFont || typeof this._textFont === 'string') {
+ console.log('WEBGL: you must load and set a font before drawing text. See `loadFont` and `textFont` for more details.');
+ return;
+ }
+ if (y >= maxY || !this._doFill) {
+ return; // don't render lines beyond our maxY position
+ }
+ if (!this._isOpenType()) {
+ console.log('WEBGL: only Opentype (.otf) and Truetype (.ttf) fonts are supported');
+ return p;
+ }
+ p.push(); // fix to #803
+ // remember this state, so it can be restored later
+ var doStroke = this._doStroke;
+ var drawMode = this.drawMode;
+ this._doStroke = false;
+ this.drawMode = constants.TEXTURE;
+ // get the cached FontInfo object
+ var font = this._textFont.font;
+ var fontInfo = this._textFont._fontInfo;
+ if (!fontInfo) {
+ fontInfo = this._textFont._fontInfo = new FontInfo(font);
+ } // calculate the alignment and move/scale the view accordingly
+
+ var pos = this._textFont._handleAlignment(this, line, x, y);
+ var fontSize = this._textSize;
+ var scale = fontSize / font.unitsPerEm;
+ this.translate(pos.x, pos.y, 0);
+ this.scale(scale, scale, 1);
+ // initialize the font shader
+ var gl = this.GL;
+ var initializeShader = !this._defaultFontShader;
+ var sh = this._getFontShader();
+ sh.init();
+ sh.bindShader(); // first time around, bind the shader fully
+ if (initializeShader) {
+ // these are constants, really. just initialize them one-time.
+ sh.setUniform('uGridImageSize', [
+ gridImageWidth,
+ gridImageHeight
+ ]);
+ sh.setUniform('uCellsImageSize', [
+ cellImageWidth,
+ cellImageHeight
+ ]);
+ sh.setUniform('uStrokeImageSize', [
+ strokeImageWidth,
+ strokeImageHeight
+ ]);
+ sh.setUniform('uGridSize', [
+ charGridWidth,
+ charGridHeight
+ ]);
+ }
+ this._applyColorBlend(this.curFillColor);
+ var g = this.retainedMode.geometry['glyph'];
+ if (!g) {
+ // create the geometry for rendering a quad
+ var geom = this._textGeom = new _main.default.Geometry(1, 1, function () {
+ for (var i = 0; i <= 1; i++) {
+ for (var j = 0; j <= 1; j++) {
+ this.vertices.push(new _main.default.Vector(j, i, 0));
+ this.uvs.push(j, i);
+ }
+ }
+ });
+ geom.computeFaces().computeNormals();
+ g = this.createBuffers('glyph', geom);
+ } // bind the shader buffers
+
+ var _iteratorNormalCompletion3 = true;
+ var _didIteratorError3 = false;
+ var _iteratorError3 = undefined;
+ try {
+ for (var _iterator3 = this.retainedMode.buffers.text[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+ var buff = _step3.value;
+ buff._prepareBuffer(g, sh);
+ }
+ } catch (err) {
+ _didIteratorError3 = true;
+ _iteratorError3 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+ _iterator3.return();
+ }
+ } finally {
+ if (_didIteratorError3) {
+ throw _iteratorError3;
+ }
+ }
+ }
+ this._bindBuffer(g.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
+ // this will have to do for now...
+ sh.setUniform('uMaterialColor', this.curFillColor);
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+ try {
+ var dx = 0; // the x position in the line
+ var glyphPrev = null; // the previous glyph, used for kerning
+ // fetch the glyphs in the line of text
+ var glyphs = font.stringToGlyphs(line);
+ var _iteratorNormalCompletion4 = true;
+ var _didIteratorError4 = false;
+ var _iteratorError4 = undefined;
+ try {
+ for (var _iterator4 = glyphs[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+ var glyph = _step4.value;
+ // kern
+ if (glyphPrev) dx += font.getKerningValue(glyphPrev, glyph);
+ var gi = fontInfo.getGlyphInfo(glyph);
+ if (gi.uGlyphRect) {
+ var rowInfo = gi.rowInfo;
+ var colInfo = gi.colInfo;
+ sh.setUniform('uSamplerStrokes', gi.strokeImageInfo.imageData);
+ sh.setUniform('uSamplerRowStrokes', rowInfo.cellImageInfo.imageData);
+ sh.setUniform('uSamplerRows', rowInfo.dimImageInfo.imageData);
+ sh.setUniform('uSamplerColStrokes', colInfo.cellImageInfo.imageData);
+ sh.setUniform('uSamplerCols', colInfo.dimImageInfo.imageData);
+ sh.setUniform('uGridOffset', gi.uGridOffset);
+ sh.setUniform('uGlyphRect', gi.uGlyphRect);
+ sh.setUniform('uGlyphOffset', dx);
+ sh.bindTextures(); // afterwards, only textures need updating
+ // draw it
+ gl.drawElements(gl.TRIANGLES, 6, this.GL.UNSIGNED_SHORT, 0);
+ }
+ dx += glyph.advanceWidth;
+ glyphPrev = glyph;
+ }
+ } catch (err) {
+ _didIteratorError4 = true;
+ _iteratorError4 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+ _iterator4.return();
+ }
+ } finally {
+ if (_didIteratorError4) {
+ throw _iteratorError4;
+ }
+ }
+ }
+ } finally {
+ // clean up
+ sh.unbindShader();
+ this._doStroke = doStroke;
+ this.drawMode = drawMode;
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+ p.pop();
+ }
+ return p;
+ };
+ },
+ {
+ '../core/constants': 286,
+ '../core/main': 298,
+ './p5.RendererGL.Retained': 354,
+ './p5.Shader': 356,
+ 'core-js/modules/es.array.iterator': 179,
+ 'core-js/modules/es.object.get-own-property-descriptor': 196,
+ 'core-js/modules/es.object.to-string': 200,
+ 'core-js/modules/es.regexp.exec': 205,
+ 'core-js/modules/es.string.iterator': 210,
+ 'core-js/modules/es.string.split': 216,
+ 'core-js/modules/es.string.sub': 218,
+ 'core-js/modules/es.symbol': 222,
+ 'core-js/modules/es.symbol.description': 220,
+ 'core-js/modules/es.symbol.iterator': 221,
+ 'core-js/modules/es.weak-map': 254,
+ 'core-js/modules/web.dom-collections.iterator': 256
+ }
+ ],
+ 359: [
+ 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.'
+ }
+ }
+ },
+ {
+ }
+ ],
+ 360: [
+ function (_dereq_, module, exports) {
+ 'use strict';
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ exports.languages = exports.default = void 0;
+ var _translation = _interopRequireDefault(_dereq_('./en/translation'));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default:
+ obj
+ };
+ } // Only one language is imported above. This is intentional as other languages
+ // will be hosted online and then downloaded whenever needed
+ /**
+ * Here, we define a default/fallback language which we can use without internet.
+ * You won't have to change this when adding a new language.
+ *
+ * `translation` is the namespace we are using for our initial set of strings
+ */
+
+ var _default = {
+ en: {
+ translation: _translation.default
+ }
+ };
+ /**
+ * This is a list of languages that we have added so far.
+ * If you have just added a new language (yay!), add its key to the list below
+ * (`en` is english, `es` es español). Also add its export to
+ * dev.js, which is another file in this folder.
+ */
+ exports.default = _default;
+ var languages = [
+ 'en',
+ 'es',
+ 'ko',
+ 'zh',
+ 'hi'
+ ];
+ exports.languages = languages;
+ },
+ {
+ './en/translation': 359
+ }
+ ]
+ }, {
+ }, [
+ 281
+ ]) (281)
+});
diff --git a/public/lib/p5.min.js b/public/lib/p5.min.js
new file mode 100644
index 0000000..5b72044
--- /dev/null
+++ b/public/lib/p5.min.js
@@ -0,0 +1,2 @@
+/*! p5.js v1.8.0 October 25, 2023 */
+!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).p5=e()}(function(){var s,t,r;return function o(n,s,i){function a(t,e){if(!s[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(l)return l(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=s[t]={exports:{}},n[t][0].call(r.exports,function(e){return a(n[t][1][e]||e)},r,r.exports,o,n,s,i)}return s[t].exports}for(var l="function"==typeof require&&require,e=0;e
+ * // 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;
+ * }
+ *
+ * '),this.dummyDOM.querySelector("#".concat(o,"accessibleOutput"))?this.dummyDOM.querySelector("#".concat(o,"accessibleOutput")).insertAdjacentHTML("beforebegin",r):this.dummyDOM.querySelector("#".concat(o)).innerHTML=r),this.descriptions.fallback=this.dummyDOM.querySelector("#".concat(o).concat(a)),this.descriptions.fallback.innerHTML=t):"label"===e&&(this.dummyDOM.querySelector("#".concat(o+u))?this.dummyDOM.querySelector("#".concat(o+d))&&this.dummyDOM.querySelector("#".concat(o+d)).insertAdjacentHTML("beforebegin",'')):(r='
'),this.dummyDOM.querySelector("#".concat(o,"accessibleOutputLabel"))?this.dummyDOM.querySelector("#".concat(o,"accessibleOutputLabel")).insertAdjacentHTML("beforebegin",r):this.dummyDOM.querySelector("#"+o).insertAdjacentHTML("afterend",r)),this.descriptions.label=this.dummyDOM.querySelector("#"+o+c),this.descriptions.label.innerHTML=t)},s.default.prototype._describeElementHTML=function(e,t,r){var o,n=this.canvas.id;"fallback"===e?(this.dummyDOM.querySelector("#".concat(n+i))?this.dummyDOM.querySelector("#"+n+l)||this.dummyDOM.querySelector("#"+n+a).insertAdjacentHTML("afterend",'
Text Output
'),this.dummyDOM.querySelector(i)?this.dummyDOM.querySelector(i).insertAdjacentHTML("beforebegin",n):this.dummyDOM.querySelector("#".concat(o)).innerHTML=n,this._accessibleOutputs[r].list=this.dummyDOM.querySelector("#".concat(r,"_list"))):"gridOutput"===e&&(i="#".concat(s,"textOutput").concat(i),n='Grid Output
'),this.dummyDOM.querySelector(i)?this.dummyDOM.querySelector(i).insertAdjacentHTML("afterend",n):this.dummyDOM.querySelector("#".concat(o)).innerHTML=n,this._accessibleOutputs[r].map=this.dummyDOM.querySelector("#".concat(r,"_map"))),this._accessibleOutputs[r].shapeDetails=this.dummyDOM.querySelector("#".concat(r,"_shapeDetails")),this._accessibleOutputs[r].summary=this.dummyDOM.querySelector("#".concat(r,"_summary"))},o.default.prototype._updateAccsOutput=function(){var e=this.canvas.id;JSON.stringify(this.ingredients.shapes)!==this.ingredients.pShapes&&(this.ingredients.pShapes=JSON.stringify(this.ingredients.shapes),this._accessibleOutputs.text&&this._updateTextOutput(e+"textOutput"),this._accessibleOutputs.grid&&this._updateGridOutput(e+"gridOutput"),this._accessibleOutputs.textLabel&&this._updateTextOutput(e+"textOutputLabel"),this._accessibleOutputs.gridLabel&&this._updateGridOutput(e+"gridOutputLabel"))},o.default.prototype._accsBackground=function(e){this.ingredients.pShapes=JSON.stringify(this.ingredients.shapes),this.ingredients.shapes={},this.ingredients.colors.backgroundRGBA!==e&&(this.ingredients.colors.backgroundRGBA=e,this.ingredients.colors.background=this._rgbColorName(e))},o.default.prototype._accsCanvasColors=function(e,t){"fill"===e?this.ingredients.colors.fillRGBA!==t&&(this.ingredients.colors.fillRGBA=t,this.ingredients.colors.fill=this._rgbColorName(t)):"stroke"===e&&this.ingredients.colors.strokeRGBA!==t&&(this.ingredients.colors.strokeRGBA=t,this.ingredients.colors.stroke=this._rgbColorName(t))},o.default.prototype._accsOutput=function(e,t){"ellipse"===e&&t[2]===t[3]?e="circle":"rectangle"===e&&t[2]===t[3]&&(e="square");var r,o,n={},s=!0,i=function(e,t){var r;e="rectangle"===e||"ellipse"===e||"arc"===e||"circle"===e||"square"===e?(r=Math.round(t[0]+t[2]/2),Math.round(t[1]+t[3]/2)):"triangle"===e?(r=(t[0]+t[2]+t[4])/3,(t[1]+t[3]+t[5])/3):"quadrilateral"===e?(r=(t[0]+t[2]+t[4]+t[6])/4,(t[1]+t[3]+t[5]+t[7])/4):"line"===e?(r=(t[0]+t[2])/2,(t[1]+t[3])/2):(r=t[0],t[1]);return[r,e]}(e,t);if("line"===e?(n.color=this.ingredients.colors.stroke,n.length=Math.round(this.dist(t[0],t[1],t[2],t[3])),r=this._getPos(t[0],[1]),o=this._getPos(t[2],[3]),n.loc=u(i,this.width,this.height),n.pos=r===o?"at ".concat(r):"from ".concat(r," to ").concat(o)):("point"===e?n.color=this.ingredients.colors.stroke:(n.color=this.ingredients.colors.fill,n.area=this._getArea(e,t)),n.pos=this._getPos.apply(this,l(i)),n.loc=u(i,this.width,this.height)),this.ingredients.shapes[e]){if(this.ingredients.shapes[e]!==[n]){for(var a in this.ingredients.shapes[e])JSON.stringify(this.ingredients.shapes[e][a])===JSON.stringify(n)&&(s=!1);!0===s&&this.ingredients.shapes[e].push(n)}}else this.ingredients.shapes[e]=[n]},o.default.prototype._getPos=function(e,t){var e=new DOMPointReadOnly(e,t),t=this._renderer.isP3D?new DOMMatrix(this._renderer.uMVMatrix.mat4):this.drawingContext.getTransform(),e=e.matrixTransform(t),t=e.x,e=e.y,r=this.width,o=this.height;return t<.4*r?e<.4*o?"top left":.6*o
+ {/*
+
+
+
+
+
+ );
+}
diff --git a/src/components/sandox.css b/src/components/sandox.css
new file mode 100644
index 0000000..5f6dce0
--- /dev/null
+++ b/src/components/sandox.css
@@ -0,0 +1,172 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Inter:wght@400;700&display=swap");
+
+:root {
+ --font-size: 1rem;
+ --spacing: 2rem;
+ --sans-serif: "Inter", sans-serif;
+ --mono: "IBM Plex Mono", monospace;
+ --fadeIn: fadeIn 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.sandbox {
+ display: flex;
+ color: seashell;
+ font-family: var(--sans-serif);
+ font-size: var(--font-size);
+ overflow: hidden;
+ flex-direction: row;
+}
+
+h3 {
+ position: absolute;
+ right: 20px;
+ font-size: 1rem;
+ background-color: wheat;
+ color: hsl(0 0% 12%);
+ padding: 0.4rem 0.8rem;
+ border-radius: 4px;
+}
+
+.code,
+.result {
+ height: 100vh;
+ width: 50vw;
+}
+
+.editor {
+ height: 100%;
+ min-width: 50vw;
+ max-width: 100vw;
+ resize: horizontal;
+ overflow: hidden;
+ border-right: 2px solid hsl(0 0% 10%);
+}
+
+.output {
+ position: relative;
+ height: 100%;
+ overflow-x: hidden;
+ margin: 0;
+}
+
+iframe {
+ height: 100%;
+ width: 100%;
+ border: none;
+ animation: var(--fadeIn);
+}
+
+.errors {
+ padding: var(--spacing);
+ color: tomato;
+ animation: var(--fadeIn);
+}
+
+.errors xmp {
+ max-width: 80%;
+}
+
+pre,
+xmp {
+ font-family: var(--mono);
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+@media (max-width: 800px) {
+ body {
+ flex-direction: column;
+ /* display: block; */
+ overflow: scroll;
+ }
+
+ .code,
+ .result {
+ height: 50vh;
+ width: 100vw;
+ }
+
+ .editor {
+ resize: none;
+ border-right: none;
+ }
+
+ .output {
+ height: 100%;
+ border-top: 2px solid hsl(0 0% 10%);
+ }
+
+ .source {
+ display: none;
+ }
+}
+
+.loading {
+ display: grid;
+ gap: 1rem;
+ place-content: center;
+ position: absolute;
+ inset: 0;
+ background-color: hsl(0 0 100);
+ z-index: 1;
+}
+
+.loader {
+ width: 40px;
+ height: 40px;
+ margin: 0 auto;
+ background-color: hsl(0 0% 100%);
+ background: linear-gradient(
+ to right,
+ hsl(0 0% 100%) 10%,
+ hsla(0 0% 100% / 0%) 42%
+ );
+ transform: translateZ(0);
+ border-radius: 50%;
+ animation: spin 1.4s infinite linear;
+}
+
+.loader:before {
+ content: "";
+ height: 50%;
+ width: 50%;
+ position: absolute;
+ inset: 0;
+ background-color: hsl(0 0% 100%);
+ border-radius: 100% 0 0 0;
+}
+
+.loader:after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ height: 75%;
+ width: 75%;
+ margin: auto;
+ background-color: hsl(200 20% 14%);
+ border-radius: 50%;
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..bd8954e
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,10 @@
+///
+
+
*/}
+ Loading P5.js Sandbox
+
+
+
+