From 436bfb0d41ba6429c53246df2f9cbe2d71b0659d Mon Sep 17 00:00:00 2001
From: nglk p5.sound extends p5 with Web Audio functionality including audio input,
+ * playback, analysis and synthesis.
+ * p5.sound is on GitHub.
+ * Download the latest version
+ * here.
+ *
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 masterVolume + * @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.masterVolume = function (vol, rampTime, tFromNow) { + if (typeof vol === 'number') { + var rampTime = rampTime || 0; + var tFromNow = tFromNow || 0; + 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 master output. 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);
+
+ return p5sound;
+}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(0),__webpack_require__(5),__webpack_require__(8),__webpack_require__(22),__webpack_require__(9)], __WEBPACK_AMD_DEFINE_RESULT__ = (function(n){"use strict";return n.Signal=function(){var t=this.optionsObject(arguments,["value","units"],n.Signal.defaults);this.output=this._gain=this.context.createGain(),t.param=this._gain.gain,n.Param.call(this,t),this.input=this._param=this._gain.gain,this.context.getConstant(1).chain(this._gain)},n.extend(n.Signal,n.Param),n.Signal.defaults={value:0,units:n.Type.Default,convert:!0},n.Signal.prototype.connect=n.SignalBase.prototype.connect,n.Signal.prototype.dispose=function(){return n.Param.prototype.dispose.call(this),this._param=null,this._gain.disconnect(),this._gain=null,this},n.Signal}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(0),__webpack_require__(2),__webpack_require__(9)], __WEBPACK_AMD_DEFINE_RESULT__ = (function(i){"use strict";return i.Multiply=function(t){this.createInsOuts(2,0),this._mult=this.input[0]=this.output=new i.Gain,this._param=this.input[1]=this.output.gain,this._param.value=this.defaultArg(t,0)},i.extend(i.Multiply,i.Signal),i.Multiply.prototype.dispose=function(){return i.prototype.dispose.call(this),this._mult.dispose(),this._mult=null,this._param=null,this},i.Multiply}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var __WEBPACK_AMD_DEFINE_RESULT__;
+
+!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+ var p5sound = __webpack_require__(1);
+
+ var CrossFade = __webpack_require__(51);
+ /**
+ * Effect is a base class for audio effects in p5.
+ * 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++;
+ * }
+ *
+ */
+
+
+ var midiToFreq = p5.prototype.midiToFreq = function (m) {
+ return 440 * Math.pow(2, (m - 69) / 12.0);
+ };
+
+
+ var noteToFreq = function noteToFreq(note) {
+ if (typeof note !== 'string') {
+ return note;
+ }
+
+ var wholeNotes = {
+ A: 21,
+ B: 23,
+ C: 24,
+ D: 26,
+ E: 28,
+ F: 29,
+ G: 31
+ };
+ var value = wholeNotes[note[0].toUpperCase()];
+ var octave = ~~note.slice(-1);
+ value += 12 * (octave - 1);
+
+ switch (note[1]) {
+ case '#':
+ value += 1;
+ break;
+
+ case 'b':
+ value -= 1;
+ break;
+
+ default:
+ break;
+ }
+
+ return midiToFreq(value);
+ };
+ /**
+ * List the SoundFile formats that you will include. LoadSound
+ * will search your directory for these extensions, and will pick
+ * a format that is compatable with the client's web browser.
+ * Here is a free online file
+ * converter.
+ *
+ * @method soundFormats
+ * @param {String} [...formats] i.e. 'mp3', 'wav', 'ogg'
+ * @example
+ *
+ * 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();
+ * });
+ * }
+ *
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..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
+ */
+
+
+ p5.LowPass = function () {
+ p5.Filter.call(this, 'lowpass');
+ };
+
+ p5.LowPass.prototype = Object.create(p5.Filter.prototype);
+ /**
+ * 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
+ */
+
+ p5.HighPass = function () {
+ p5.Filter.call(this, 'highpass');
+ };
+
+ p5.HighPass.prototype = Object.create(p5.Filter.prototype);
+ /**
+ * 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
+ */
+
+ p5.BandPass = function () {
+ p5.Filter.call(this, 'bandpass');
+ };
+
+ p5.BandPass.prototype = Object.create(p5.Filter.prototype);
+ return p5.Filter;
+}).call(exports, __webpack_require__, exports, module),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(0),__webpack_require__(7),__webpack_require__(25),__webpack_require__(2),__webpack_require__(9)], __WEBPACK_AMD_DEFINE_RESULT__ = (function(n){"use strict";return n.Subtract=function(t){this.createInsOuts(2,0),this._sum=this.input[0]=this.output=new n.Gain,this._neg=new n.Negate,this._param=this.input[1]=new n.Signal(t),this._param.chain(this._neg,this._sum)},n.extend(n.Subtract,n.Signal),n.Subtract.prototype.dispose=function(){return n.prototype.dispose.call(this),this._neg.dispose(),this._neg=null,this._sum.disconnect(),this._sum=null,this._param.dispose(),this._param=null,this},n.Subtract}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+"use strict";
+(function(global) {var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;
+
+global.TONE_SILENCE_VERSION_LOGGING = true;
+!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(35), __webpack_require__(12), __webpack_require__(0)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (StartAudioContext, Context, Tone) {
+ var audiocontext = new window.AudioContext();
+
+ Tone.context.dispose();
+ Tone.setContext(audiocontext);
+ /**
+ * Returns the Audio Context for this sketch. Useful for users + * who would like to dig deeper into the Web Audio API + * .
+ * + *Some 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();
+ * }
+ *
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
+ */
+
+
+ p5.SinOsc = function (freq) {
+ p5.Oscillator.call(this, freq, 'sine');
+ };
+
+ p5.SinOsc.prototype = Object.create(p5.Oscillator.prototype);
+ /**
+ * 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
+ */
+
+ p5.TriOsc = function (freq) {
+ p5.Oscillator.call(this, freq, 'triangle');
+ };
+
+ p5.TriOsc.prototype = Object.create(p5.Oscillator.prototype);
+ /**
+ * 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
+ */
+
+ p5.SawOsc = function (freq) {
+ p5.Oscillator.call(this, freq, 'sawtooth');
+ };
+
+ p5.SawOsc.prototype = Object.create(p5.Oscillator.prototype);
+ /**
+ * 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
+ */
+
+ p5.SqrOsc = function (freq) {
+ p5.Oscillator.call(this, freq, 'square');
+ };
+
+ p5.SqrOsc.prototype = Object.create(p5.Oscillator.prototype);
+}).call(exports, __webpack_require__, exports, module),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(0),__webpack_require__(8)], __WEBPACK_AMD_DEFINE_RESULT__ = (function(i){"use strict";return i.Timeline=function(){var e=this.optionsObject(arguments,["memory"],i.Timeline.defaults);this._timeline=[],this._toRemove=[],this._iterating=!1,this.memory=e.memory},i.extend(i.Timeline),i.Timeline.defaults={memory:1/0},Object.defineProperty(i.Timeline.prototype,"length",{get:function(){return this._timeline.length}}),i.Timeline.prototype.add=function(e){if(this.isUndef(e.time))throw new Error("Tone.Timeline: events must have a time attribute");if(this._timeline.length){var i=this._search(e.time);this._timeline.splice(i+1,0,e)}else this._timeline.push(e);if(this.length>this.memory){var t=this.length-this.memory;this._timeline.splice(0,t)}return this},i.Timeline.prototype.remove=function(e){if(this._iterating)this._toRemove.push(e);else{var i=this._timeline.indexOf(e);-1!==i&&this._timeline.splice(i,1)}return this},i.Timeline.prototype.get=function(e){var i=this._search(e);return-1!==i?this._timeline[i]:null},i.Timeline.prototype.peek=function(){return this._timeline[0]},i.Timeline.prototype.shift=function(){return this._timeline.shift()},i.Timeline.prototype.getAfter=function(e){var i=this._search(e);return i+1
+ * 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)
+ */
+
+
+ p5.MonoSynth.prototype.setADSR = function (attack, decay, sustain, release) {
+ this.env.setADSR(attack, decay, sustain, release);
+ };
+ /**
+ * Getters and Setters
+ * @property {Number} attack
+ * @for p5.MonoSynth
+ */
+
+ /**
+ * @property {Number} decay
+ * @for p5.MonoSynth
+ */
+
+ /**
+ * @property {Number} sustain
+ * @for p5.MonoSynth
+ */
+
+ /**
+ * @property {Number} release
+ * @for p5.MonoSynth
+ */
+
+
+ Object.defineProperties(p5.MonoSynth.prototype, {
+ 'attack': {
+ get: function get() {
+ return this.env.aTime;
+ },
+ set: function set(attack) {
+ this.env.setADSR(attack, this.env.dTime, this.env.sPercent, this.env.rTime);
+ }
+ },
+ 'decay': {
+ get: function get() {
+ return this.env.dTime;
+ },
+ set: function set(decay) {
+ this.env.setADSR(this.env.aTime, decay, this.env.sPercent, this.env.rTime);
+ }
+ },
+ 'sustain': {
+ get: function get() {
+ return this.env.sPercent;
+ },
+ set: function set(sustain) {
+ this.env.setADSR(this.env.aTime, this.env.dTime, sustain, this.env.rTime);
+ }
+ },
+ 'release': {
+ get: function get() {
+ return this.env.rTime;
+ },
+ set: function set(release) {
+ this.env.setADSR(this.env.aTime, this.env.dTime, this.env.sPercent, 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
+ */
+
+ p5.MonoSynth.prototype.amp = function (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
+ */
+
+
+ p5.MonoSynth.prototype.connect = function (unit) {
+ var u = unit || p5sound.input;
+ this.output.connect(u.input ? u.input : u);
+ };
+ /**
+ * Disconnect all outputs
+ *
+ * @method disconnect
+ * @for p5.MonoSynth
+ */
+
+
+ p5.MonoSynth.prototype.disconnect = function () {
+ if (this.output) {
+ this.output.disconnect();
+ }
+ };
+ /**
+ * Get rid of the MonoSynth and free up its resources / memory.
+ *
+ * @method dispose
+ * @for p5.MonoSynth
+ */
+
+
+ p5.MonoSynth.prototype.dispose = function () {
+ AudioVoice.prototype.dispose.apply(this);
+
+ if (this.env) {
+ this.env.dispose();
+ }
+
+ if (this.oscillator) {
+ this.oscillator.dispose();
+ }
+ };
+}).call(exports, __webpack_require__, exports, module),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var __WEBPACK_AMD_DEFINE_RESULT__;
+
+!(__WEBPACK_AMD_DEFINE_RESULT__ = (function () {
+ var p5sound = __webpack_require__(1);
+ /**
+ * Base class for monophonic synthesizers. Any extensions of this class
+ * should follow the API and implement the methods below in order to
+ * remain compatible with p5.PolySynth();
+ *
+ * @class p5.AudioVoice
+ * @constructor
+ */
+
+
+ p5.AudioVoice = function () {
+ this.ac = p5sound.audiocontext;
+ this.output = this.ac.createGain();
+ this.connect();
+ p5sound.soundArray.push(this);
+ };
+
+ p5.AudioVoice.prototype.play = function (note, velocity, secondsFromNow, sustime) {};
+
+ p5.AudioVoice.prototype.triggerAttack = function (note, velocity, secondsFromNow) {};
+
+ p5.AudioVoice.prototype.triggerRelease = function (secondsFromNow) {};
+
+ p5.AudioVoice.prototype.amp = function (vol, rampTime) {};
+ /**
+ * Connect to p5 objects or Web Audio Nodes
+ * @method connect
+ * @for p5.AudioVoice
+ * @param {Object} unit
+ */
+
+
+ p5.AudioVoice.prototype.connect = function (unit) {
+ var u = unit || p5sound.input;
+ this.output.connect(u.input ? u.input : u);
+ };
+ /**
+ * Disconnect from soundOut
+ * @method disconnect
+ * @for p5.AudioVoice
+ */
+
+
+ p5.AudioVoice.prototype.disconnect = function () {
+ this.output.disconnect();
+ };
+
+ p5.AudioVoice.prototype.dispose = function () {
+ if (this.output) {
+ this.output.disconnect();
+ delete this.output;
+ }
+ };
+
+ return p5.AudioVoice;
+}).call(exports, __webpack_require__, exports, module),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var __WEBPACK_AMD_DEFINE_RESULT__;
+
+!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+ var p5sound = __webpack_require__(1);
+
+ var TimelineSignal = __webpack_require__(14);
+
+ var noteToFreq = __webpack_require__(6).noteToFreq;
+ /**
+ * 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)
+ **/
+
+
+ p5.PolySynth.prototype.noteADSR = function (note, a, d, s, r, timeFromNow) {
+ var now = p5sound.audiocontext.currentTime;
+ var timeFromNow = timeFromNow || 0;
+ 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)
+ **/
+
+
+ p5.PolySynth.prototype.setADSR = function (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();
+ * }
+ *
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();
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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
+ */
+
+
+ p5.SoundFile.prototype.setVolume = function (vol, _rampTime, _tFromNow) {
+ if (typeof vol === 'number') {
+ var rampTime = _rampTime || 0;
+ var tFromNow = _tFromNow || 0;
+ var now = p5sound.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;
+ }
+ };
+
+
+ p5.SoundFile.prototype.amp = p5.SoundFile.prototype.setVolume;
+
+ p5.SoundFile.prototype.fade = p5.SoundFile.prototype.setVolume;
+
+ p5.SoundFile.prototype.getVolume = function () {
+ return this.output.gain.value;
+ };
+ /**
+ * Set the stereo panning of a p5.sound object to
+ * a floating point number between -1.0 (left) and 1.0 (right).
+ * Default is 0.0 (center).
+ *
+ * @method pan
+ * @for p5.SoundFile
+ * @param {Number} [panValue] Set the stereo panner
+ * @param {Number} [timeFromNow] schedule this event to happen
+ * seconds from now
+ * @example
+ *
+ * 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);
+ * }
+ *
+ *
+ *
+ * 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 sound, amplitude;
+ *
+ * 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);
+ * 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 (sound.isPlaying() ){
+ * sound.stop();
+ * } else {
+ * sound.play();
+ * }
+ * }
+ *
+ *
+ * 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);
+ *}
+ *
p5.Signal is a constant audio-rate signal used by p5.Oscillator + * and p5.Envelope for modulation math.
+ * + *This is necessary because Web Audio is processed on a seprate clock. + * For example, the p5 draw loop runs about 60 times per second. But + * the audio clock must process samples 44100 times per second. If we + * want to add a value to each of those samples, we can't do it in the + * draw loop, but we can do it by adding a constant-rate audio signal.This class mostly functions behind the scenes in p5.sound, and returns + * a Tone.Signal from the Tone.js library by Yotam Mann. + * If you want to work directly with audio signals for modular + * synthesis, check out + * tone.js.
+ * + * @class p5.Signal + * @constructor + * @return {Tone.Signal} A Signal object from the Tone.js library + * @example + *
+ * let carrier, modulator;
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * cnv.mousePressed(canvasPressed);
+ * background(220);
+ * text('tap to play', 20, 20);
+ *
+ * carrier = new p5.Oscillator('sine');
+ * carrier.start();
+ * carrier.amp(1); // set amplitude
+ * carrier.freq(220); // set frequency
+ *
+ * modulator = new p5.Oscillator('sawtooth');
+ * modulator.disconnect();
+ * modulator.start();
+ * modulator.amp(1);
+ * modulator.freq(4);
+ *
+ * // Modulator's default amplitude range is -1 to 1.
+ * // Multiply it by -200, so the range is -200 to 200
+ * // then add 220 so the range is 20 to 420
+ * carrier.freq( modulator.mult(-400).add(220) );
+ * }
+ *
+ * function canvasPressed() {
+ * userStartAudio();
+ * carrier.amp(1.0);
+ * }
+ *
+ * function mouseReleased() {
+ * carrier.amp(0);
+ * }
+ *
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 (optional)
+ * @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);
+ * }
+ *
+ * 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);
+ * }
+ * }
+ *
+ * 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.soundOut.audiocontext.listener
+ *
+ *
+ * @class p5.Panner3D
+ * @constructor
+ */
+
+
+ p5.Panner3D = function () {
+ Effect.call(this);
+ /**
+ *
+ * Web Audio Spatial Panner Node
+ *
+ * Properties include
+ * - panningModel: "equal power" or "HRTF"
+ * - distanceModel: "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);
+ };
+
+ p5.Panner3D.prototype = Object.create(Effect.prototype);
+ /**
+ * Connect an audio sorce
+ *
+ * @method process
+ * @for p5.Panner3D
+ * @param {Object} src Input source
+ */
+
+ p5.Panner3D.prototype.process = function (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
+ */
+
+
+ p5.Panner3D.prototype.set = function (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
+ */
+
+
+ p5.Panner3D.prototype.positionX = function (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;
+ };
+
+ p5.Panner3D.prototype.positionY = function (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;
+ };
+
+ p5.Panner3D.prototype.positionZ = function (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
+ */
+
+
+ p5.Panner3D.prototype.orient = function (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
+ */
+
+
+ p5.Panner3D.prototype.orientX = function (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;
+ };
+
+ p5.Panner3D.prototype.orientY = function (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;
+ };
+
+ p5.Panner3D.prototype.orientZ = function (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]
+ */
+
+
+ p5.Panner3D.prototype.setFalloff = function (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
+ */
+
+
+ p5.Panner3D.prototype.maxDist = function (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
+ */
+
+
+ p5.Panner3D.prototype.rolloff = function (rolloffFactor) {
+ if (typeof rolloffFactor === 'number') {
+ this.panner.rolloffFactor = rolloffFactor;
+ }
+
+ return this.panner.rolloffFactor;
+ };
+
+ p5.Panner3D.dispose = function () {
+ Effect.prototype.dispose.apply(this);
+
+ if (this.panner) {
+ this.panner.disconnect();
+ delete this.panner;
+ }
+ };
+
+ return p5.Panner3D;
+}).call(exports, __webpack_require__, exports, module),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var __WEBPACK_AMD_DEFINE_RESULT__;
+
+!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+ var p5sound = __webpack_require__(1);
+
+ var Effect = __webpack_require__(4);
+ // * listener is a class that can construct both a Spatial Panner
+ // * and a Spatial Listener. The panner is based on the
+ // * Web Audio Spatial Panner Node
+ // * https://www.w3.org/TR/webaudio/#the-listenernode-interface
+ // * This panner is a spatial processing node that allows audio to be positioned
+ // * and oriented in 3D space.
+ // *
+ // * The Listener modifies the properties of the Audio Context Listener.
+ // * Both objects types use the same methods. The default is a spatial panner.
+ // *
+ // * p5.Panner3D
- Constructs a Spatial Pannerp5.Listener3D
- Constructs a Spatial Listener
+ * 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 master output...
+ * sound.disconnect();
+ *
+ * // ...and process with cVerb
+ * // so that we only hear the convolution
+ * cVerb.process(sound);
+ * }
+ *
+ * function playSound() {
+ * sound.play();
+ * }
+ *
+ * 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 master output...
+ * sound.disconnect();
+ *
+ * // ...and process with cVerb
+ * // so that we only hear the convolution
+ * cVerb.process(sound);
+ * }
+ *
+ * function playSound() {
+ * sound.play();
+ * }
+ *
+ * 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 master 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
+ */
+
+
+ p5.Convolver.prototype.impulses = [];
+ /**
+ * Load and assign a new Impulse Response to the p5.Convolver.
+ * The impulse is added to the .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)
+ */
+
+ p5.Convolver.prototype.addImpulse = function (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)
+ */
+
+
+ p5.Convolver.prototype.resetImpulse = function (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)..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).
+ */
+
+
+ p5.Convolver.prototype.toggleImpulse = function (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;
+ }
+ }
+ }
+ };
+
+ p5.Convolver.prototype.dispose = function () {
+ p5.Reverb.prototype.dispose.apply(this);
+
+ for (var i in this.impulses) {
+ if (this.impulses[i]) {
+ this.impulses[i] = null;
+ }
+ }
+ };
+}).call(exports, __webpack_require__, exports, module),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var __WEBPACK_AMD_DEFINE_RESULT__;
+
+!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+ var p5sound = __webpack_require__(1);
+
+
+ var Clock = __webpack_require__(27);
+
+ p5.Metro = function () {
+ this.clock = new Clock({
+ 'callback': this.ontick.bind(this)
+ });
+ this.syncedParts = [];
+ this.bpm = 120;
+
+ this._init();
+
+ this.prevTick = 0;
+ this.tatumTime = 0;
+
+ this.tickCallback = function () {};
+ };
+
+ p5.Metro.prototype.ontick = function (tickTime) {
+ var elapsedTime = tickTime - this.prevTick;
+ var secondsFromNow = tickTime - p5sound.audiocontext.currentTime;
+
+ if (elapsedTime - this.tatumTime <= -0.02) {
+ return;
+ } else {
+ this.prevTick = tickTime;
+
+ var self = this;
+ this.syncedParts.forEach(function (thisPart) {
+ if (!thisPart.isPlaying) return;
+ thisPart.incrementStep(secondsFromNow);
+
+ thisPart.phrases.forEach(function (thisPhrase) {
+ var phraseArray = thisPhrase.sequence;
+ var bNum = self.metroTicks % phraseArray.length;
+
+ if (phraseArray[bNum] !== 0 && (self.metroTicks < phraseArray.length || !thisPhrase.looping)) {
+ thisPhrase.callback(secondsFromNow, phraseArray[bNum]);
+ }
+ });
+ });
+ this.metroTicks += 1;
+ this.tickCallback(secondsFromNow);
+ }
+ };
+
+ p5.Metro.prototype.setBPM = function (bpm, rampTime) {
+ var beatTime = 60 / (bpm * this.tatums);
+ var now = p5sound.audiocontext.currentTime;
+ this.tatumTime = beatTime;
+ var rampTime = rampTime || 0;
+ this.clock.frequency.setValueAtTime(this.clock.frequency.value, now);
+ this.clock.frequency.linearRampToValueAtTime(bpm, now + rampTime);
+ this.bpm = bpm;
+ };
+
+ p5.Metro.prototype.getBPM = function () {
+ return this.clock.getRate() / this.tatums * 60;
+ };
+
+ p5.Metro.prototype._init = function () {
+ this.metroTicks = 0;
+ };
+
+
+ p5.Metro.prototype.resetSync = function (part) {
+ this.syncedParts = [part];
+ };
+
+
+ p5.Metro.prototype.pushSync = function (part) {
+ this.syncedParts.push(part);
+ };
+
+ p5.Metro.prototype.start = function (timeFromNow) {
+ var t = timeFromNow || 0;
+ var now = p5sound.audiocontext.currentTime;
+ this.clock.start(now + t);
+ this.setBPM(this.bpm);
+ };
+
+ p5.Metro.prototype.stop = function (timeFromNow) {
+ var t = timeFromNow || 0;
+ var now = p5sound.audiocontext.currentTime;
+ this.clock.stop(now + t);
+ };
+
+ p5.Metro.prototype.beatLength = function (tatums) {
+ this.tatums = 1 / tatums / 4;
+ };
+}).call(exports, __webpack_require__, exports, module),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(0),__webpack_require__(24),__webpack_require__(8)], __WEBPACK_AMD_DEFINE_RESULT__ = (function(t){"use strict";return t.TimelineState=function(e){t.Timeline.call(this),this._initial=e},t.extend(t.TimelineState,t.Timeline),t.TimelineState.prototype.getValueAtTime=function(e){var t=this.get(e);return null!==t?t.state:this._initial},t.TimelineState.prototype.setStateAtTime=function(e,t){this.add({state:e,time:t})},t.TimelineState}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var __WEBPACK_AMD_DEFINE_RESULT__;
+
+!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+ var p5sound = __webpack_require__(1);
+
+ var BPM = 120;
+ /**
+ * Set the global tempo, in beats per minute, for all
+ * p5.Parts. This method will impact all active p5.Parts.
+ *
+ * @method setBPM
+ * @for p5
+ * @param {Number} BPM Beats Per Minute
+ * @param {Number} rampTime Seconds from now
+ */
+
+ p5.prototype.setBPM = function (bpm, rampTime) {
+ BPM = bpm;
+
+ for (var i in p5sound.parts) {
+ if (p5sound.parts[i]) {
+ p5sound.parts[i].setBPM(bpm, rampTime);
+ }
+ }
+ };
+ /**
+ * 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.
+ */
+
+
+ p5.Score = function () {
+ this.parts = [];
+ this.currentPart = 0;
+ var thisScore = this;
+
+ for (var i in arguments) {
+ if (arguments[i] && this.parts[i]) {
+ 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;
+ };
+
+ p5.Score.prototype.onended = function () {
+ 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
+ */
+
+
+ p5.Score.prototype.start = function () {
+ this.parts[this.currentPart].start();
+ this.scoreStep = 0;
+ };
+ /**
+ * Stop playback of the score.
+ *
+ * @method stop
+ * @for p5.Score
+ */
+
+
+ p5.Score.prototype.stop = function () {
+ this.parts[this.currentPart].stop();
+ this.currentPart = 0;
+ this.scoreStep = 0;
+ };
+ /**
+ * Pause playback of the score.
+ *
+ * @method pause
+ * @for p5.Score
+ */
+
+
+ p5.Score.prototype.pause = function () {
+ this.parts[this.currentPart].stop();
+ };
+ /**
+ * Loop playback of the score.
+ *
+ * @method loop
+ * @for p5.Score
+ */
+
+
+ p5.Score.prototype.loop = function () {
+ 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
+ */
+
+
+ p5.Score.prototype.noLoop = function () {
+ this.looping = false;
+ };
+
+ p5.Score.prototype.resetParts = function () {
+ var self = this;
+ this.parts.forEach(function (part) {
+ self.resetParts[part];
+ });
+ };
+
+ p5.Score.prototype.resetPart = function (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
+ */
+
+
+ p5.Score.prototype.setBPM = function (bpm, rampTime) {
+ for (var i in this.parts) {
+ if (this.parts[i]) {
+ this.parts[i].setBPM(bpm, rampTime);
+ }
+ }
+ };
+
+ 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();
+ }
+ }
+}).call(exports, __webpack_require__, exports, module),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+ }),
+ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var __WEBPACK_AMD_DEFINE_RESULT__;
+
+!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+ var p5sound = __webpack_require__(1);
+
+ var Clock = __webpack_require__(27);
+ /**
+ * 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);
+ * }
+ *
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++;
+ * }
+ * }
+ *
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();
+ * }
+ * });
+ * }
+ *
+ *
+ * // load two soundfile and crossfade beetween them
+ * let sound1,sound2;
+ * let sound1Gain, sound2Gain, masterGain;
+ * 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 'master' gain to which we will connect both soundfiles
+ * masterGain = new p5.Gain();
+ * masterGain.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(masterGain); // connect its output to the 'master'
+ * sound2.disconnect();
+ * sound2Gain = new p5.Gain();
+ * sound2Gain.setInput(sound2);
+ * sound2Gain.connect(masterGain);
+ * }
+ * 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 'master * volume control'
+ * var masterVolume = constrain(map(mouseY,height,0,0,1), 0, 1);
+ * masterGain.amp(masterVolume);
+ * text('master', width/2, height - masterVolume * 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);
+ * }
+ *
p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + blue: { + name: 'blue', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + brightness: { + name: 'brightness', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\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, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + hue: { + name: 'hue', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\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, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + red: { + name: 'red', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + saturation: { + name: 'saturation', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + 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 or hue value (depending on the current color\n mode)
\n', + type: 'Number' + }, + { + name: 'v2', + description: + 'green or saturation value (depending on the current\n color mode)
\n', + type: 'Number' + }, + { + name: 'v3', + description: + 'blue or brightness value (depending on the current\n color mode)
\n', + type: 'Number' + }, + { + name: 'a', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + 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() 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', + 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 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: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'gray', + description: 'a gray 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 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: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'gray', + description: 'a gray 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 for a shape's fill.\n This will default to 255 when no argument is given, which\n is full strength.
\n", + type: 'Number', + optional: true + }, + { + name: 'strengthStroke', + description: + "A number (0-255) for the strength of erasing for a shape's stroke.\n This will default to 255 when no argument is given, which\n is full strength.
\n", + type: 'Number', + optional: true + } + ], + 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.
\n', + type: 'Number', + optional: true + } + ], + class: 'p5', + module: 'Shape' + }, + ellipse: { + name: 'ellipse', + class: 'p5', + module: 'Shape', + overloads: [ + { + params: [ + { + name: 'x', + description: 'x-coordinate of the center of ellipse.
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the center of 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: + 'number of radial sectors to draw (for WebGL mode)
\n', + type: 'Integer' + } + ] + } + ] + }, + circle: { + name: 'circle', + params: [ + { + name: 'x', + description: 'x-coordinate of the centre of the circle.
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the centre of the circle.
\n', + type: 'Number' + }, + { + name: 'd', + description: 'diameter of the circle.
\n', + type: 'Number' + } + ], + 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: 'coordinate_vector', + 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' + } + ], + 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' + } + ], + 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, 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 + } + ], + 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', + type: 'Number' + }, + { + name: 'u', + description: "the vertex's texture u-coordinate
\n", + type: 'Number', + optional: true + }, + { + name: 'v', + description: "the vertex's texture v-coordinate
\n", + type: 'Number', + optional: true + } + ], + chainable: 1 + } + ] + }, + P2D: { + name: 'P2D', + class: 'p5', + module: 'Constants' + }, + WEBGL: { + name: 'WEBGL', + 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' + }, + 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' + }, + 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: [] + } + ] + }, + noCursor: { + name: 'noCursor', + 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', + 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', + 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 + } + ], + class: 'p5', + module: 'Rendering' + }, + 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', + 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 + } + ], + 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', + params: [ + { + name: 'a', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'b', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'c', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'd', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'e', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'f', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Transform' + }, + 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: + 'An 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' + }, + VIDEO: { + name: 'VIDEO', + class: 'p5', + module: 'DOM' + }, + AUDIO: { + name: 'AUDIO', + 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', + class: 'p5', + module: 'Events' + }, + keyReleased: { + name: 'keyReleased', + class: 'p5', + module: 'Events' + }, + keyTyped: { + name: 'keyTyped', + 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: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mouseDragged: { + name: 'mouseDragged', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mousePressed: { + name: 'mousePressed', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mouseReleased: { + name: 'mouseReleased', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mouseClicked: { + name: 'mouseClicked', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + doubleClicked: { + name: 'doubleClicked', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mouseWheel: { + name: 'mouseWheel', + params: [ + { + name: 'event', + description: 'optional WheelEvent callback argument.
\n', + type: 'Object', + 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: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + touchMoved: { + name: 'touchMoved', + params: [ + { + name: 'event', + description: 'optional TouchEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + touchEnded: { + name: 'touchEnded', + params: [ + { + name: 'event', + description: 'optional TouchEvent callback argument.
\n', + type: 'Object', + 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: + 'a variable\n representing a specific html5 canvas (optional)
\n', + type: 'p5.Element|HTMLCanvasElement' + }, + { + name: 'filename', + description: '', + type: 'String', + optional: true + }, + { + name: 'extension', + description: "'jpg' or 'png'
\n", + type: 'String', + optional: true + } + ] + }, + { + params: [ + { + name: 'filename', + description: '', + type: 'String', + optional: true + }, + { + name: 'extension', + description: '', + type: 'String', + optional: true + } + ] + } + ] + }, + saveFrames: { + name: 'saveFrames', + params: [ + { + name: 'filename', + description: '', + type: 'String' + }, + { + name: 'extension', + description: "'jpg' or 'png'
\n", + type: 'String' + }, + { + name: 'duration', + description: 'Duration in seconds to save the frames for.
\n', + type: 'Number' + }, + { + name: 'framerate', + description: 'Framerate to save the frames in.
\n', + type: 'Number' + }, + { + name: 'callback', + description: + 'A callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData - an\n image/octet-stream, filename and extension.
\n', + type: 'Function(Array)', + optional: true + } + ], + class: 'p5', + module: 'Image' + }, + loadImage: { + name: 'loadImage', + params: [ + { + name: 'path', + description: 'Path of the image to be loaded
\n', + type: 'String' + }, + { + name: 'successCallback', + description: + 'Function to be called once\n the image is loaded. Will be passed the\n p5.Image.
\n', + type: 'function(p5.Image)', + optional: true + }, + { + name: 'failureCallback', + description: + 'called with event error if\n the image fails to load.
\n', + type: 'Function(Event)', + optional: true + } + ], + class: 'p5', + module: 'Image' + }, + image: { + name: 'image', + class: 'p5', + module: 'Image', + overloads: [ + { + params: [ + { + name: 'img', + description: 'the image to display
\n', + type: 'p5.Image|p5.Element' + }, + { + name: 'x', + description: + 'the x-coordinate of the top-left corner of the image
\n', + type: 'Number' + }, + { + name: 'y', + description: + 'the y-coordinate of the top-left corner of the image
\n', + type: 'Number' + }, + { + name: 'width', + description: 'the width to draw the image
\n', + type: 'Number', + optional: true + }, + { + name: 'height', + description: 'the height to draw the image
\n', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'img', + description: '', + type: 'p5.Image|p5.Element' + }, + { + name: 'dx', + description: + 'the x-coordinate of the destination\n rectangle in which to draw the source image
\n', + type: 'Number' + }, + { + name: 'dy', + description: + 'the y-coordinate of the destination\n rectangle in which to draw the source image
\n', + type: 'Number' + }, + { + name: 'dWidth', + description: 'the width of the destination rectangle
\n', + type: 'Number' + }, + { + name: 'dHeight', + description: 'the height of the destination rectangle
\n', + type: 'Number' + }, + { + name: 'sx', + description: + 'the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n', + type: 'Number' + }, + { + name: 'sy', + description: + 'the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n', + type: 'Number' + }, + { + name: 'sWidth', + description: + 'the width of the subsection of the\n source image to draw into the destination\n rectangle
\n', + type: 'Number', + optional: true + }, + { + name: 'sHeight', + description: + 'the height of the subsection of the\n source image to draw into the destination rectangle
\n', + type: 'Number', + optional: true + } + ] + } + ] + }, + tint: { + name: 'tint', + class: 'p5', + module: 'Image', + 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: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'value', + description: 'a color string
\n', + type: 'String' + } + ] + }, + { + params: [ + { + name: 'gray', + description: 'a gray value
\n', + type: 'Number' + }, + { + name: 'alpha', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + 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: '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', + params: [ + { + name: 'filterType', + description: + 'either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n', + type: 'Constant' + }, + { + name: 'filterParam', + description: + 'an optional parameter unique\n to each filter, see above
\n', + type: 'Number', + optional: true + } + ], + class: 'p5', + module: 'Image' + }, + get: { + name: 'get', + class: 'p5', + 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
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height
\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: + 'insert a grayscale value | a pixel array |\n a p5.Color object | a 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: 'a', + description: 'first value
\n', + type: 'Number' + }, + { + name: 'b', + description: 'second value
\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: 'Number to compare
\n', + type: 'Number' + }, + { + name: 'n1', + description: '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: 'Number to compare
\n', + type: 'Number' + }, + { + name: 'n1', + description: '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: 'num', + description: + 'Number whose fractional part needs to be found out
\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: 'the seed value
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + randomSeed: { + name: 'randomSeed', + params: [ + { + name: 'seed', + description: 'the seed value
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + random: { + name: 'random', + class: 'p5', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'min', + description: 'the lower bound (inclusive)
\n', + type: 'Number', + optional: true + }, + { + name: 'max', + description: 'the upper bound (exclusive)
\n', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'choices', + description: 'the array to choose from
\n', + type: 'Array' + } + ] + } + ] + }, + randomGaussian: { + name: 'randomGaussian', + params: [ + { + name: 'mean', + description: 'the mean
\n', + type: 'Number' + }, + { + name: 'sd', + description: 'the standard deviation
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + acos: { + name: 'acos', + params: [ + { + name: 'value', + description: 'the value whose arc cosine is to be returned
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + asin: { + name: 'asin', + params: [ + { + name: 'value', + description: 'the value whose arc sine is to be returned
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + atan: { + name: 'atan', + params: [ + { + name: 'value', + description: 'the 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: 'the radians value to convert to degrees
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + radians: { + name: 'radians', + params: [ + { + name: 'degrees', + description: 'the degree value to convert to radians
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + angleMode: { + name: 'angleMode', + params: [ + { + name: 'mode', + description: 'either RADIANS or DEGREES
\n', + type: 'Constant' + } + ], + class: 'p5', + module: 'Math' + }, + 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' + }, + loadFont: { + name: 'loadFont', + params: [ + { + name: 'path', + description: 'name of the file or url to load
\n', + type: 'String' + }, + { + name: 'callback', + description: + 'function to be executed after\n loadFont() completes
\n', + type: 'Function', + optional: true + }, + { + name: 'onError', + description: + 'function to be executed if\n an error occurs
\n', + type: 'Function', + optional: true + } + ], + class: 'p5', + module: 'Typography' + }, + text: { + name: 'text', + params: [ + { + name: 'str', + description: + 'the alphanumeric\n symbols to be displayed
\n', + type: 'String|Object|Array|Number|Boolean' + }, + { + name: 'x', + description: 'x-coordinate of text
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of text
\n', + type: 'Number' + }, + { + name: 'x2', + description: + 'by default, the width of the text box,\n see rectMode() for more info
\n', + type: 'Number', + optional: true + }, + { + name: 'y2', + description: + 'by default, the height of the text box,\n see rectMode() for more info
\n', + type: 'Number', + optional: true + } + ], + class: 'p5', + module: 'Typography' + }, + textFont: { + name: 'textFont', + class: 'p5', + module: 'Typography', + overloads: [ + { + params: [] + }, + { + params: [ + { + name: 'font', + description: + 'a font loaded via loadFont(),\nor a String representing a web safe font\n(a font that is generally available across all systems)
\n', + type: 'Object|String' + }, + { + name: 'size', + description: 'the font size to use
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + } + ] + }, + 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' + } + ] + } + ] + }, + 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' + }, + 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 + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + debugMode: { + name: 'debugMode', + class: 'p5', + module: 'Lights, Camera', + 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: 'Lights, Camera' + }, + ambientLight: { + name: 'ambientLight', + class: 'p5', + module: 'Lights, Camera', + 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: 'the alpha value
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'gray', + description: 'a gray 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 ambient light color
\n', + type: 'p5.Color' + } + ], + chainable: 1 + } + ] + }, + specularColor: { + name: 'specularColor', + class: 'p5', + module: 'Lights, Camera', + 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: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'gray', + description: 'a gray value
\n', + type: 'Number' + } + ], + 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 ambient light color
\n', + type: 'p5.Color' + } + ], + chainable: 1 + } + ] + }, + directionalLight: { + name: 'directionalLight', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'red or hue value (depending on the current\ncolor mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number' + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number' + }, + { + name: 'position', + description: 'the direction of the light
\n', + type: 'p5.Vector' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: + 'color Array, CSS color string,\n or p5.Color value
\n', + type: 'Number[]|String|p5.Color' + }, + { + name: 'x', + description: 'x axis direction
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y axis direction
\n', + type: 'Number' + }, + { + name: 'z', + description: 'z axis direction
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + } + ], + chainable: 1 + } + ] + }, + pointLight: { + name: 'pointLight', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'red or hue value (depending on the current\ncolor mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number' + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number' + }, + { + name: 'x', + description: 'x axis position
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y axis position
\n', + type: 'Number' + }, + { + name: 'z', + description: 'z axis position
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'position', + description: 'the position of the light
\n', + type: 'p5.Vector' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: + 'color Array, CSS color string,\nor p5.Color value
\n', + type: 'Number[]|String|p5.Color' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + } + ], + chainable: 1 + } + ] + }, + lights: { + name: 'lights', + class: 'p5', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + spotLight: { + name: 'spotLight', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'red or hue value (depending on the current\ncolor mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number' + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number' + }, + { + name: 'x', + description: 'x axis position
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y axis position
\n', + type: 'Number' + }, + { + name: 'z', + description: 'z axis position
\n', + type: 'Number' + }, + { + name: 'rx', + description: 'x axis direction of light
\n', + type: 'Number' + }, + { + name: 'ry', + description: 'y axis direction of light
\n', + type: 'Number' + }, + { + name: 'rz', + description: 'z axis direction of light
\n', + type: 'Number' + }, + { + name: 'angle', + description: + 'optional parameter for angle. Defaults to PI/3
\n', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: + 'optional parameter for concentration. Defaults to 100
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: + 'color Array, CSS color string,\nor p5.Color value
\n', + type: 'Number[]|String|p5.Color' + }, + { + name: 'position', + description: 'the position of the light
\n', + type: 'p5.Vector' + }, + { + name: 'direction', + description: 'the direction of the light
\n', + type: 'p5.Vector' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + }, + { + name: 'direction', + description: '', + type: 'p5.Vector' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + }, + { + name: 'direction', + description: '', + type: 'p5.Vector' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + }, + { + name: 'rx', + description: '', + type: 'Number' + }, + { + name: 'ry', + description: '', + type: 'Number' + }, + { + name: 'rz', + description: '', + type: 'Number' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + }, + { + name: 'direction', + description: '', + type: 'p5.Vector' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + }, + { + name: 'rx', + description: '', + type: 'Number' + }, + { + name: 'ry', + description: '', + type: 'Number' + }, + { + name: 'rz', + description: '', + type: 'Number' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + }, + { + name: 'rx', + description: '', + type: 'Number' + }, + { + name: 'ry', + description: '', + type: 'Number' + }, + { + name: 'rz', + description: '', + type: 'Number' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + } + ] + }, + noLights: { + name: 'noLights', + class: 'p5', + module: 'Lights, Camera' + }, + 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 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + shader: { + name: 'shader', + params: [ + { + name: 's', + description: + 'the desired p5.Shader to use for rendering\nshapes.
\n', + type: 'p5.Shader', + optional: true + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + resetShader: { + name: 'resetShader', + class: 'p5', + module: 'Lights, Camera' + }, + normalMaterial: { + name: 'normalMaterial', + class: 'p5', + module: 'Lights, Camera' + }, + texture: { + name: 'texture', + params: [ + { + name: 'tex', + description: + '2-dimensional graphics\n to render as texture
\n', + type: 'p5.Image|p5.MediaElement|p5.Graphics' + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + textureMode: { + name: 'textureMode', + params: [ + { + name: 'mode', + description: 'either IMAGE or NORMAL
\n', + type: 'Constant' + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + ambientMaterial: { + name: 'ambientMaterial', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'gray value, red or hue value\n (depending on the current color mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number', + optional: true + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: 'color, color Array, or CSS color string
\n', + type: 'Number[]|String|p5.Color' + } + ], + chainable: 1 + } + ] + }, + emissiveMaterial: { + name: 'emissiveMaterial', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'gray value, red or hue value\n (depending on the current color mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number', + optional: true + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number', + optional: true + }, + { + name: 'a', + description: 'opacity
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: 'color, color Array, or CSS color string
\n', + type: 'Number[]|String|p5.Color' + } + ], + chainable: 1 + } + ] + }, + specularMaterial: { + name: 'specularMaterial', + class: 'p5', + module: 'Lights, Camera', + 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 Array, or CSS color string
\n', + type: 'Number[]|String|p5.Color' + } + ], + chainable: 1 + } + ] + }, + shininess: { + name: 'shininess', + params: [ + { + name: 'shine', + description: + 'Degree of Shininess.\n Defaults to 1.
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + createCamera: { + name: 'createCamera', + class: 'p5', + module: 'Lights, Camera' + }, + setCamera: { + name: 'setCamera', + params: [ + { + name: 'cam', + description: 'p5.Camera object
\n', + type: 'p5.Camera' + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + 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' + } + ] + } + ] + }, + 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' + }, + getAudioContext: { + name: 'getAudioContext', + class: 'p5', + module: 'p5.sound' + }, + userStartAudio: { + params: [ + { + name: 'element(s)', + description: + 'This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.
\n', + type: 'Element|Array', + optional: true + }, + { + name: 'callback', + description: + 'Callback to invoke when the AudioContext\n has started
\n', + type: 'Function', + optional: true + } + ], + name: 'userStartAudio', + 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' + }, + 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' + } + }, + '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' + }, + 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' + } + ], + 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' + } + }, + 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' + }, + loadPixels: { + name: 'loadPixels', + class: 'p5.Image', + module: 'Image' + }, + updatePixels: { + name: 'updatePixels', + class: 'p5.Image', + module: 'Image', + overloads: [ + { + params: [ + { + name: 'x', + description: + 'x-offset of the target update area for the\n underlying canvas
\n', + type: 'Integer' + }, + { + name: 'y', + description: + 'y-offset of the target update area for the\n underlying canvas
\n', + type: 'Integer' + }, + { + name: 'w', + description: + 'height of the target update area for the\n underlying canvas
\n', + type: 'Integer' + }, + { + name: 'h', + description: + 'height of the target update area for the\n underlying canvas
\n', + type: 'Integer' + } + ] + }, + { + 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
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height
\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 a p5.Color | image to copy
\n', + type: 'Number|Number[]|Object' + } + ], + class: 'p5.Image', + module: 'Image' + }, + resize: { + name: 'resize', + params: [ + { + name: 'width', + description: 'the resized image width
\n', + type: 'Number' + }, + { + name: 'height', + description: 'the 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, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n', + type: 'Constant' + }, + { + name: 'filterParam', + description: + 'an optional parameter unique\n to each filter, see above
\n', + type: 'Number', + optional: true + } + ], + 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: 'give your file a name
\n', + type: 'String' + }, + { + name: 'extension', + description: "'png' or 'jpg'
\n", + type: 'String' + } + ], + 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: + 'the index for the frame that should be displayed
\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: + 'the amount in milliseconds to delay between switching frames
\n', + type: 'Number' + }, + { + name: 'index', + description: + 'the index of the frame that should have the new delay value {optional}
\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: 'the x component of the vector
\n', + type: 'Number', + optional: true + }, + { + name: 'y', + description: 'the y component of the vector
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: 'the z component of the vector
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'value', + description: 'the vector to set
\n', + type: 'p5.Vector|Number[]' + } + ], + chainable: 1 + } + ] + }, + copy: { + name: 'copy', + class: 'p5.Vector', + module: 'Math' + }, + add: { + name: 'add', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'x', + description: 'the x component of the vector to be added
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y component of the vector to be added
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: 'the z component of the vector to be added
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + 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: 'the vector to receive the result (Optional)
\n', + type: 'p5.Vector', + optional: true + } + ], + static: 1 + } + ] + }, + rem: { + name: 'rem', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'x', + description: 'the x component of divisor vector
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y component of divisor vector
\n', + type: 'Number' + }, + { + name: 'z', + description: 'the 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: + 'dividend p5.Vector
\n', + type: 'p5.Vector' + }, + { + name: 'v2', + description: '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: 'the x component of the vector to subtract
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y component of the vector to subtract
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: 'the z component of the vector to subtract
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + 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: 'the vector to receive the result (Optional)
\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: + 'The number to multiply with the x component of the vector
\n', + type: 'Number' + }, + { + name: 'y', + description: + 'The number to multiply with the y component of the vector
\n', + type: 'Number' + }, + { + name: 'z', + description: + 'The number to multiply with the z component of the vector
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'arr', + description: + 'The array to multiply with the components of the vector
\n', + type: 'Number[]' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v', + description: + 'The 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: 'the vector to receive the result (Optional)
\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: + 'The number to divide with the x component of the vector
\n', + type: 'Number' + }, + { + name: 'y', + description: + 'The number to divide with the y component of the vector
\n', + type: 'Number' + }, + { + name: 'z', + description: + 'The number to divide with the z component of the vector
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'arr', + description: + 'The array to divide the components of the vector by
\n', + type: 'Number[]' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v', + description: + 'The 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 (Optional)
\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' + }, + 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: 'value', + description: + 'value component of the vector or 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 + } + ] + }, + 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: + 'the first p5.Vector
\n', + type: 'p5.Vector' + }, + { + name: 'v2', + description: + 'the second p5.Vector
\n', + type: 'p5.Vector' + } + ], + static: 1 + } + ] + }, + dist: { + name: 'dist', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'v', + description: + 'the 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' + }, + limit: { + name: 'limit', + params: [ + { + name: 'max', + description: 'the maximum magnitude for the vector
\n', + type: 'Number' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + setMag: { + name: 'setMag', + params: [ + { + name: 'len', + description: 'the new length for this vector
\n', + type: 'Number' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + heading: { + name: 'heading', + class: 'p5.Vector', + module: 'Math' + }, + rotate: { + name: 'rotate', + params: [ + { + name: 'angle', + description: 'the angle of rotation
\n', + type: 'Number' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + angleBetween: { + name: 'angleBetween', + params: [ + { + name: 'value', + description: + 'the x, y, and z components of a p5.Vector
\n', + type: 'p5.Vector' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + lerp: { + name: 'lerp', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'x', + description: 'the x component
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y component
\n', + type: 'Number' + }, + { + name: 'z', + description: 'the z component
\n', + type: 'Number' + }, + { + name: 'amt', + description: + 'the amount of interpolation; some value between 0.0\n (old vector) and 1.0 (new vector). 0.9 is very near\n the new vector. 0.5 is halfway in between.
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v', + description: + 'the p5.Vector to lerp to
\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 (Optional)
\n', + type: 'p5.Vector', + optional: true + } + ], + static: 1 + } + ] + }, + reflect: { + name: 'reflect', + params: [ + { + name: 'surfaceNormal', + description: + 'the p5.Vector to reflect about, will be normalized by this method
\n', + type: 'p5.Vector' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + array: { + name: 'array', + class: 'p5.Vector', + module: 'Math' + }, + equals: { + name: 'equals', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'x', + description: 'the x component of the vector
\n', + type: 'Number', + optional: true + }, + { + name: 'y', + description: 'the y component of the vector
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: 'the z component of the vector
\n', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'value', + description: 'the vector to compare
\n', + type: 'p5.Vector|Array' + } + ] + } + ] + }, + fromAngle: { + name: 'fromAngle', + params: [ + { + name: 'angle', + description: + 'the desired angle, in radians (unaffected by angleMode)
\n', + type: 'Number' + }, + { + name: 'length', + description: 'the length of the new vector (defaults to 1)
\n', + type: 'Number', + optional: true + } + ], + class: 'p5.Vector', + module: 'Math' + }, + fromAngles: { + name: 'fromAngles', + params: [ + { + name: 'theta', + description: 'the polar angle, in radians (zero is up)
\n', + type: 'Number' + }, + { + name: 'phi', + description: + 'the azimuthal angle, in radians\n (zero is out of the screen)
\n', + type: 'Number' + }, + { + name: 'length', + description: 'the length of the new vector (defaults to 1)
\n', + type: 'Number', + optional: true + } + ], + 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: 'line', + description: 'a line of text
\n', + type: 'String' + }, + { + name: 'x', + description: 'x-position
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-position
\n', + type: 'Number' + }, + { + name: 'fontSize', + description: 'font size to use (optional) Default is 12.
\n', + type: 'Number', + optional: true + }, + { + name: 'options', + description: + "opentype options (optional)\n opentype fonts contains alignment and baseline options.\n Default is 'LEFT' and 'alphabetic'
\n", + type: 'Object', + optional: true + } + ], + class: 'p5.Font', + module: 'Typography' + }, + textToPoints: { + name: 'textToPoints', + params: [ + { + name: 'txt', + description: 'a line of text
\n', + type: 'String' + }, + { + name: 'x', + description: 'x-position
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-position
\n', + type: 'Number' + }, + { + name: 'fontSize', + description: 'font size to use (optional)
\n', + type: 'Number' + }, + { + name: 'options', + description: + 'an (optional) object that can contain:
\n
sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise
simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear
amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n', + type: 'Number' + } + ], + class: 'p5.Camera', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + camera: { + name: 'camera', + class: 'p5.Camera', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + } + }, + 'p5.Geometry': { + computeFaces: { + name: 'computeFaces', + class: 'p5.Geometry', + module: 'Lights, Camera' + }, + computeNormals: { + name: 'computeNormals', + class: 'p5.Geometry', + module: 'Lights, Camera' + }, + averageNormals: { + name: 'averageNormals', + class: 'p5.Geometry', + module: 'Lights, Camera' + }, + averagePoleNormals: { + name: 'averagePoleNormals', + class: 'p5.Geometry', + module: 'Lights, Camera' + }, + normalize: { + name: 'normalize', + class: 'p5.Geometry', + module: 'Lights, Camera' + } + }, + 'p5.Shader': { + setUniform: { + name: 'setUniform', + params: [ + { + name: 'uniformName', + description: 'the name of the uniform in the\nshader program
\n', + type: 'String' + }, + { + name: 'data', + description: + 'the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)
\n', + type: 'Object|Number|Boolean|Number[]' + } + ], + class: 'p5.Shader', + module: 'Lights, Camera' + } + }, + 'p5.sound': { + getMasterVolume: { + name: 'getMasterVolume', + class: 'p5.sound', + module: 'p5.sound' + }, + masterVolume: { + name: 'masterVolume', + params: [ + { + name: 'volume', + description: + 'Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n', + type: 'Number|Object' + }, + { + name: 'rampTime', + description: 'Fade for t seconds
\n', + type: 'Number', + optional: true + }, + { + name: 'timeFromNow', + description: + 'Schedule this event to happen at\n t seconds in the future
\n', + type: 'Number', + optional: true + } + ], + class: 'p5.sound', + module: 'p5.sound' + }, + soundOut: { + name: 'soundOut', + class: 'p5.sound', + 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.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' + }, + 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' + }, + setType: { + name: 'setType', + params: [ + { + name: 'type', + description: "'sine', 'triangle', 'sawtooth' or 'square'.
\n", + type: 'String' + } + ], + 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' + }, + 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.MonoSynth': { + 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' + }, + 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' + }, + 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.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.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' + } + }, + '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' + }, + 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' + }, + 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' + }, + 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' + }, + processPeaks: { + name: 'processPeaks', + params: [ + { + name: 'callback', + description: 'a function to call once this data is returned
\n', + type: 'Function' + }, + { + name: 'initThreshold', + description: 'initial threshold defaults to 0.9
\n', + type: 'Number', + optional: true + }, + { + name: 'minThreshold', + description: 'minimum threshold defaults to 0.22
\n', + type: 'Number', + optional: true + }, + { + name: 'minPeaks', + description: 'minimum number of peaks defaults to 200
\n', + type: 'Number', + optional: true + } + ], + 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 master output)
\n', + type: 'SoundObject|undefined', + optional: true + }, + { + name: 'smoothing', + description: + 'a range between 0.0 and 1.0\n to smooth amplitude readings
\n', + type: 'Number|undefined', + optional: true + } + ], + 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.Signal': { + fade: { + name: 'fade', + params: [ + { + name: 'value', + description: 'Value to set this signal
\n', + type: 'Number' + }, + { + name: 'secondsFromNow', + description: 'Length of fade, in seconds from now
\n', + type: 'Number', + optional: true + } + ], + class: 'p5.Signal', + module: 'p5.sound' + }, + setInput: { + name: 'setInput', + params: [ + { + name: 'input', + description: '', + type: 'Object' + } + ], + class: 'p5.Signal', + module: 'p5.sound' + }, + add: { + name: 'add', + params: [ + { + name: 'number', + description: '', + type: 'Number' + } + ], + class: 'p5.Signal', + module: 'p5.sound' + }, + mult: { + name: 'mult', + params: [ + { + name: 'number', + description: 'to multiply
\n', + type: 'Number' + } + ], + class: 'p5.Signal', + module: 'p5.sound' + }, + scale: { + name: 'scale', + params: [ + { + name: 'number', + description: 'to multiply
\n', + type: 'Number' + }, + { + name: 'inMin', + description: 'input range minumum
\n', + type: 'Number' + }, + { + name: 'inMax', + description: 'input range maximum
\n', + type: 'Number' + }, + { + name: 'outMin', + description: 'input range minumum
\n', + type: 'Number' + }, + { + name: 'outMax', + description: 'input range maximum
\n', + type: 'Number' + } + ], + class: 'p5.Signal', + 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 (optional)
\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.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.Noise': { + setType: { + name: 'setType', + params: [ + { + name: 'type', + description: "'white', 'pink' or 'brown'
\n", + type: 'String', + optional: true + } + ], + class: 'p5.Noise', + 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.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' + }, + 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' + }, + impulses: { + name: 'impulses', + 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': { + 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' + }, + 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' + } + }, + '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.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.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.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.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' + } + } + }; + }, + {} + ], + 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) & 0xff; + arr[curByte++] = (tmp >> 8) & 0xff; + arr[curByte++] = tmp & 0xff; + } + + if (placeHoldersLen === 2) { + tmp = + (revLookup[b64.charCodeAt(i)] << 2) | + (revLookup[b64.charCodeAt(i + 1)] >> 4); + arr[curByte++] = tmp & 0xff; + } + + if (placeHoldersLen === 1) { + tmp = + (revLookup[b64.charCodeAt(i)] << 10) | + (revLookup[b64.charCodeAt(i + 1)] << 4) | + (revLookup[b64.charCodeAt(i + 2)] >> 2); + arr[curByte++] = (tmp >> 8) & 0xff; + arr[curByte++] = tmp & 0xff; + } + + return arr; + } + + function tripletToBase64(num) { + return ( + lookup[(num >> 18) & 0x3f] + + lookup[(num >> 12) & 0x3f] + + lookup[(num >> 6) & 0x3f] + + lookup[num & 0x3f] + ); + } + + function encodeChunk(uint8, start, end) { + var tmp; + var output = []; + for (var i = start; i < end; i += 3) { + tmp = + ((uint8[i] << 16) & 0xff0000) + + ((uint8[i + 1] << 8) & 0xff00) + + (uint8[i + 2] & 0xff); + output.push(tripletToBase64(tmp)); + } + return output.join(''); + } + + function fromByteArray(uint8) { + var tmp; + var len = uint8.length; + var extraBytes = len % 3; // if we have 1 byte left, pad 2 bytes + var parts = []; + var maxChunkLength = 16383; // must be multiple of 3 + + // go through the array every three bytes, we'll deal with trailing stuff later + for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) { + parts.push( + encodeChunk(uint8, i, i + maxChunkLength > len2 ? len2 : i + maxChunkLength) + ); + } + + // pad the end with zeros, but make sure to not forget the extra bytes + if (extraBytes === 1) { + tmp = uint8[len - 1]; + parts.push(lookup[tmp >> 2] + lookup[(tmp << 4) & 0x3f] + '=='); + } else if (extraBytes === 2) { + tmp = (uint8[len - 2] << 8) + uint8[len - 1]; + parts.push( + lookup[tmp >> 10] + + lookup[(tmp >> 4) & 0x3f] + + lookup[(tmp << 2) & 0x3f] + + '=' + ); + } + + return parts.join(''); + } + }, + {} + ], + 21: [function(_dereq_, module, exports) {}, {}], + 22: [ + function(_dereq_, module, exports) { + (function(Buffer) { + /*! + * The buffer module from node.js, for the browser. + * + * @author Feross Aboukhadijeh
+ * noStroke();
+ * let c = color(0, 126, 255, 102);
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ * let value = alpha(c); // Sets 'value' to 102
+ * fill(value);
+ * rect(50, 15, 35, 70);
+ *
+ *
+ * let c = color(175, 100, 220);
+ * fill(c);
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ * let blueValue = blue(c);
+ * fill(0, 0, blueValue);
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = brightness(c); // Sets 'value' to 255
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color('hsb(60, 100%, 50%)');
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = brightness(c); // A 'value' of 50% is 127.5
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * let c = color(255, 204, 0);
+ * fill(c);
+ * noStroke();
+ * rect(30, 20, 55, 55);
+ *
+ *
+ * let c = color(255, 204, 0);
+ * fill(c);
+ * noStroke();
+ * ellipse(25, 25, 80, 80); // Draw left circle
+ * // Using only one value generates a grayscale value.
+ * c = color(65);
+ * fill(c);
+ * ellipse(75, 75, 80, 80);
+ *
+ *
+ * // You can use named SVG & CSS colors
+ * let c = color('magenta');
+ * fill(c);
+ * noStroke();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // Example of hex color codes
+ * noStroke();
+ * let c = color('#0f0');
+ * fill(c);
+ * rect(0, 10, 45, 80);
+ * c = color('#00ff00');
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ *
+ *
+ * // RGB and RGBA color strings are also supported
+ * // these all set to the same color (solid blue)
+ * let c;
+ * noStroke();
+ * c = color('rgb(0,0,255)');
+ * fill(c);
+ * rect(10, 10, 35, 35); // Draw rectangle
+ * c = color('rgb(0%, 0%, 100%)');
+ * fill(c);
+ * rect(55, 10, 35, 35); // Draw rectangle
+ * c = color('rgba(0, 0, 255, 1)');
+ * fill(c);
+ * rect(10, 55, 35, 35); // Draw rectangle
+ * c = color('rgba(0%, 0%, 100%, 1)');
+ * fill(c);
+ * rect(55, 55, 35, 35); // Draw rectangle
+ *
+ *
+ * // HSL color can also be specified by value
+ * let c = color('hsl(160, 100%, 50%)');
+ * noStroke();
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw rectangle
+ * c = color('hsla(160, 100%, 50%, 0.5)');
+ * fill(c);
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ * // HSB color can also be specified
+ * let c = color('hsb(160, 100%, 50%)');
+ * noStroke();
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw rectangle
+ * c = color('hsba(160, 100%, 50%, 0.5)');
+ * fill(c);
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ * noStroke();
+ * let c = color(50, 55, 100);
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw left rect
+ * colorMode(HSB, 100);
+ * c = color(50, 55, 100);
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ *
+ *
+ * let c = color(20, 75, 200); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let greenValue = green(c); // Get green in 'c'
+ * print(greenValue); // Print "75.0"
+ * fill(0, greenValue, 0); // Use 'greenValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = hue(c); // Sets 'value' to "0"
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * colorMode(RGB);
+ * stroke(255);
+ * background(51);
+ * let from = color(218, 165, 32);
+ * let to = color(72, 61, 139);
+ * colorMode(RGB); // Try changing to HSB.
+ * let interA = lerpColor(from, to, 0.33);
+ * let interB = lerpColor(from, to, 0.66);
+ * fill(from);
+ * rect(10, 20, 20, 60);
+ * fill(interA);
+ * rect(30, 20, 20, 60);
+ * fill(interB);
+ * rect(50, 20, 20, 60);
+ * fill(to);
+ * rect(70, 20, 20, 60);
+ *
+ *
+ * noStroke();
+ * colorMode(HSL);
+ * let c = color(156, 100, 50, 1);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = lightness(c); // Sets 'value' to 50
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * let c = color(255, 204, 0); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let redValue = red(c); // Get red in 'c'
+ * print(redValue); // Print "255.0"
+ * fill(redValue, 0, 0); // Use 'redValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ * colorMode(RGB, 255); // Sets the range for red, green, and blue to 255
+ * let c = color(127, 255, 0);
+ * colorMode(RGB, 1); // Sets the range for red, green, and blue to 1
+ * let myColor = red(c);
+ * print(myColor); // 0.4980392156862745
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = saturation(c); // Sets 'value' to 126
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * createCanvas(200, 100);
+ * let myColor;
+ * stroke(255);
+ * myColor = color(100, 100, 250);
+ * fill(myColor);
+ * rotate(HALF_PI);
+ * text(myColor.toString(), 0, -5);
+ * text(myColor.toString('#rrggbb'), 0, -30);
+ * text(myColor.toString('rgba%'), 0, -55);
+ *
+ *
+ * let backgroundColor;
+ *
+ * function setup() {
+ * backgroundColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ * let backgroundColor = color(100, 50, 150);
+ * function draw() {
+ * backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ * let backgroundColor = color(100, 50, 150);
+ * function draw() {
+ * backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ * function draw() {
+ * clear();
+ * background(200);
+ * squareColor = color(100, 50, 100);
+ * squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
+ * fill(squareColor);
+ * rect(13, 13, width - 26, height - 26);
+ * }
+ *
+ *
+ * // todo
+ *
+ *
+ * // Grayscale integer value
+ * background(51);
+ *
+ *
+ * // R, G & B integer values
+ * background(255, 204, 0);
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * background(255, 204, 100);
+ *
+ *
+ * // Named SVG/CSS color string
+ * background('red');
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * background('#fae');
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * background('#222222');
+ *
+ *
+ * // integer RGB notation
+ * background('rgb(0,255,0)');
+ *
+ *
+ * // integer RGBA notation
+ * background('rgba(0,255,0, 0.25)');
+ *
+ *
+ * // percentage RGB notation
+ * background('rgb(100%,0%,10%)');
+ *
+ *
+ * // percentage RGBA notation
+ * background('rgba(100%,0%,100%,0.5)');
+ *
+ *
+ * // p5 Color object
+ * background(color(0, 0, 255));
+ *
+ *
+ * // Clear the screen on mouse press.
+ * function draw() {
+ * ellipse(mouseX, mouseY, 20, 20);
+ * }
+ * function mousePressed() {
+ * clear();
+ * background(128);
+ * }
+ *
+ *
+ * noStroke();
+ * colorMode(RGB, 100);
+ * for (let i = 0; i < 100; i++) {
+ * for (let j = 0; j < 100; j++) {
+ * stroke(i, j, 0);
+ * point(i, j);
+ * }
+ * }
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 100);
+ * for (let i = 0; i < 100; i++) {
+ * for (let j = 0; j < 100; j++) {
+ * stroke(i, j, 100);
+ * point(i, j);
+ * }
+ * }
+ *
+ *
+ * colorMode(RGB, 255);
+ * let c = color(127, 255, 0);
+ * colorMode(RGB, 1);
+ * let myColor = c._getRed();
+ * text(myColor, 10, 10, 80, 80);
+ *
+ *
+ * noFill();
+ * colorMode(RGB, 255, 255, 255, 1);
+ * background(255);
+ * strokeWeight(4);
+ * stroke(255, 0, 10, 0.3);
+ * ellipse(40, 40, 50, 50);
+ * ellipse(50, 50, 40, 40);
+ *
+ *
+ * // Grayscale integer value
+ * fill(51);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // R, G & B integer values
+ * fill(255, 204, 0);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * fill(255, 204, 100);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // Named SVG/CSS color string
+ * fill('red');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * fill('#fae');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * fill('#222222');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // integer RGB notation
+ * fill('rgb(0,255,0)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // integer RGBA notation
+ * fill('rgba(0,255,0, 0.25)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // percentage RGB notation
+ * fill('rgb(100%,0%,10%)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // percentage RGBA notation
+ * fill('rgba(100%,0%,100%,0.5)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // p5 Color object
+ * fill(color(0, 0, 255));
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * rect(15, 10, 55, 55);
+ * noFill();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noFill();
+ * stroke(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(45, 45, 45);
+ * }
+ *
+ *
+ * noStroke();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * fill(240, 150, 150);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(45, 45, 45);
+ * }
+ *
+ *
+ * // Grayscale integer value
+ * strokeWeight(4);
+ * stroke(51);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // R, G & B integer values
+ * stroke(255, 204, 0);
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * strokeWeight(4);
+ * stroke(255, 204, 100);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // Named SVG/CSS color string
+ * stroke('red');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * stroke('#fae');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * stroke('#222222');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // integer RGB notation
+ * stroke('rgb(0,255,0)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // integer RGBA notation
+ * stroke('rgba(0,255,0,0.25)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // percentage RGB notation
+ * stroke('rgb(100%,0%,10%)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // percentage RGBA notation
+ * stroke('rgba(100%,0%,100%,0.5)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // p5 Color object
+ * stroke(color(0, 0, 255));
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * background(100, 100, 250);
+ * fill(250, 100, 100);
+ * rect(20, 20, 60, 60);
+ * erase();
+ * ellipse(25, 30, 30);
+ * noErase();
+ *
+ *
+ * background(150, 250, 150);
+ * fill(100, 100, 250);
+ * rect(20, 20, 60, 60);
+ * strokeWeight(5);
+ * erase(150, 255);
+ * triangle(50, 10, 70, 50, 90, 10);
+ * noErase();
+ *
+ *
+ * function setup() {
+ * smooth();
+ * createCanvas(100, 100, WEBGL);
+ * // Make a <p> element and put it behind the canvas
+ * let p = createP('I am a dom element');
+ * p.center();
+ * p.style('font-size', '20px');
+ * p.style('text-align', 'center');
+ * p.style('z-index', '-9999');
+ * }
+ *
+ * function draw() {
+ * background(250, 250, 150);
+ * fill(15, 195, 185);
+ * noStroke();
+ * sphere(30);
+ * erase();
+ * rotateY(frameCount * 0.02);
+ * translate(0, 0, 40);
+ * torus(15, 5);
+ * noErase();
+ * }
+ *
+ *
+ * background(235, 145, 15);
+ * noStroke();
+ * fill(30, 45, 220);
+ * rect(30, 10, 10, 80);
+ * erase();
+ * ellipse(50, 50, 60);
+ * noErase();
+ * rect(70, 10, 10, 80);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, HALF_PI);
+ *
+ * arc(50, 50, 80, 80, 0, PI);
+ *
+ * arc(50, 50, 80, 80, 0, QUARTER_PI);
+ *
+ * arc(50, 50, 80, 80, 0, TAU);
+ *
+ * arc(50, 50, 80, 80, 0, TWO_PI);
+ *
+ * function setup() {
+ * angleMode(DEGREES);
+ * }
+ *
+ * function setup() {
+ * angleMode(RADIANS);
+ * }
+ *
+ * let x = 10;
+ * print('The value of x is ' + x);
+ * // prints "The value of x is 10"
+ *
+ * function setup() {
+ * frameRate(30);
+ * textSize(30);
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(frameCount, width / 2, height / 2);
+ * }
+ *
+ * let rectX = 0;
+ * let fr = 30; //starting FPS
+ * let clr;
+ *
+ * function setup() {
+ * background(200);
+ * frameRate(fr); // Attempt to refresh at starting FPS
+ * clr = color(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime
+ *
+ * if (rectX >= width) {
+ * // If you go off screen.
+ * if (fr === 30) {
+ * clr = color(0, 0, 255);
+ * fr = 10;
+ * frameRate(fr); // make frameRate 10 FPS
+ * } else {
+ * clr = color(255, 0, 0);
+ * fr = 30;
+ * frameRate(fr); // make frameRate 30 FPS
+ * }
+ * rectX = 0;
+ * }
+ * fill(clr);
+ * rect(rectX, 40, 20, 20);
+ * }
+ *
+ * // To demonstrate, put two windows side by side.
+ * // Click on the window that the p5 sketch isn't in!
+ * function draw() {
+ * background(200);
+ * noStroke();
+ * fill(0, 200, 0);
+ * ellipse(25, 25, 50, 50);
+ *
+ * if (!focused) {
+ // or "if (focused === false)"
+ * stroke(200, 0, 0);
+ * line(0, 0, 100, 100);
+ * line(100, 0, 0, 100);
+ * }
+ * }
+ *
+ * // Move the mouse across the quadrants
+ * // to see the cursor change
+ * function draw() {
+ * line(width / 2, 0, width / 2, height);
+ * line(0, height / 2, width, height / 2);
+ * if (mouseX < 50 && mouseY < 50) {
+ * cursor(CROSS);
+ * } else if (mouseX > 50 && mouseY < 50) {
+ * cursor('progress');
+ * } else if (mouseX > 50 && mouseY > 50) {
+ * cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+ * } else {
+ * cursor('grab');
+ * }
+ * }
+ *
+ * let rectX = 0;
+ * let fr = 30; //starting FPS
+ * let clr;
+ *
+ * function setup() {
+ * background(200);
+ * frameRate(fr); // Attempt to refresh at starting FPS
+ * clr = color(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rectX = rectX += 1; // Move Rectangle
+ *
+ * if (rectX >= width) {
+ // If you go off screen.
+ * if (fr === 30) {
+ * clr = color(0, 0, 255);
+ * fr = 10;
+ * frameRate(fr); // make frameRate 10 FPS
+ * } else {
+ * clr = color(255, 0, 0);
+ * fr = 30;
+ * frameRate(fr); // make frameRate 30 FPS
+ * }
+ * rectX = 0;
+ * }
+ * fill(clr);
+ * rect(rectX, 40, 20, 20);
+ * }
+ *
+ * function setup() {
+ * noCursor();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * ellipse(mouseX, mouseY, 10, 10);
+ * }
+ *
+ * createCanvas(displayWidth, displayHeight);
+ *
+ * createCanvas(displayWidth, displayHeight);
+ *
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * function draw() {
+ * background(0, 100, 200);
+ * }
+ *
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * // 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);
+ * }
+ *
+ *
+ * function setup() {
+ * pixelDensity(3.0);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * let density = displayDensity();
+ * pixelDensity(density);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ * 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);
+ * }
+ * }
+ *
+ * // 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);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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;
+ * }
+ * }
+ *
+ * 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);
+ * }
+ *
+ * function setup() {
+ * noCanvas();
+ * }
+ *
+ *
+ * let pg;
+ * function setup() {
+ * createCanvas(100, 100);
+ * pg = createGraphics(100, 100);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * pg.background(100);
+ * pg.noStroke();
+ * pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
+ * image(pg, 50, 50);
+ * image(pg, 0, 0, 50, 50);
+ * }
+ *
+ * BLEND
- linear interpolation of colours: C =
+ * A\*factor + B. This is the default blending mode.ADD
- sum of A and BDARKEST
- only the darkest colour succeeds: C =
+ * min(A\*factor, B).LIGHTEST
- only the lightest colour succeeds: C =
+ * max(A\*factor, B).DIFFERENCE
- subtract colors from underlying image.EXCLUSION
- similar to DIFFERENCE
, but less
+ * extreme.MULTIPLY
- multiply the colors, result will always be
+ * darker.SCREEN
- opposite multiply, uses inverse values of the
+ * colors.REPLACE
- the pixels entirely replace the others and
+ * don't utilize alpha (transparency) values.REMOVE
- removes pixels from B with the alpha strength of A.OVERLAY
- mix of MULTIPLY
and SCREEN
+ *
. Multiplies dark values, and screens light values. (2D)HARD_LIGHT
- SCREEN
when greater than 50%
+ * gray, MULTIPLY
when lower. (2D)SOFT_LIGHT
- mix of DARKEST
and
+ * LIGHTEST
. Works like OVERLAY
, but not as harsh. (2D)
+ * DODGE
- lightens light tones and increases contrast,
+ * ignores darks. (2D)BURN
- darker areas are applied, increasing contrast,
+ * ignores lights. (2D)SUBTRACT
- remainder of A and B (3D)
+ * blendMode(LIGHTEST);
+ * strokeWeight(30);
+ * stroke(80, 150, 255);
+ * line(25, 25, 75, 75);
+ * stroke(255, 50, 50);
+ * line(75, 25, 25, 75);
+ *
+ *
+ * blendMode(MULTIPLY);
+ * strokeWeight(30);
+ * stroke(80, 150, 255);
+ * line(25, 25, 75, 75);
+ * stroke(255, 50, 50);
+ * line(75, 25, 25, 75);
+ *
+ *
+ * function setup() {
+ * drawingContext.shadowOffsetX = 5;
+ * drawingContext.shadowOffsetY = -5;
+ * drawingContext.shadowBlur = 10;
+ * drawingContext.shadowColor = 'black';
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ * arc(50, 55, 50, 50, 0, HALF_PI);
+ * noFill();
+ * arc(50, 55, 60, 60, HALF_PI, PI);
+ * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+ * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+ *
+ *
+ * ellipse(56, 46, 55, 55);
+ *
+ *
+ * // Draw a circle at location (30, 30) with a diameter of 20.
+ * circle(30, 30, 20);
+ *
+ *
+ * line(30, 20, 85, 75);
+ *
+ *
+ * line(30, 20, 85, 20);
+ * stroke(126);
+ * line(85, 20, 85, 75);
+ * stroke(255);
+ * line(85, 75, 30, 75);
+ *
+ *
+ * point(30, 20);
+ * point(85, 20);
+ * point(85, 75);
+ * point(30, 75);
+ *
+ *
+ * point(30, 20);
+ * point(85, 20);
+ * stroke('purple'); // Change the color
+ * strokeWeight(10); // Make the points 10 pixels in size
+ * point(85, 75);
+ * point(30, 75);
+ *
+ *
+ * let a = createVector(10, 10);
+ * point(a);
+ * let b = createVector(10, 20);
+ * point(b);
+ * point(createVector(20, 10));
+ * point(createVector(20, 20));
+ *
+ *
+ * quad(38, 31, 86, 20, 69, 63, 30, 76);
+ *
+ *
+ * // Draw a rectangle at location (30, 20) with a width and height of 55.
+ * rect(30, 20, 55, 55);
+ *
+ *
+ * // Draw a rectangle with rounded corners, each having a radius of 20.
+ * rect(30, 20, 55, 55, 20);
+ *
+ *
+ * // Draw a rectangle with rounded corners having the following radii:
+ * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
+ * rect(30, 20, 55, 55, 20, 15, 10, 5);
+ *
+ *
+ * // Draw a square at location (30, 20) with a side size of 55.
+ * square(30, 20, 55);
+ *
+ *
+ * // Draw a square with rounded corners, each having a radius of 20.
+ * square(30, 20, 55, 20);
+ *
+ *
+ * // Draw a square with rounded corners having the following radii:
+ * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
+ * square(30, 20, 55, 20, 15, 10, 5);
+ *
+ *
+ * triangle(30, 75, 58, 20, 86, 75);
+ *
+ *
+ * // Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses
+ * ellipseMode(RADIUS);
+ * fill(255);
+ * ellipse(50, 50, 30, 30); // Outer white ellipse
+ * ellipseMode(CENTER);
+ * fill(100);
+ * ellipse(50, 50, 30, 30); // Inner gray ellipse
+ *
+ *
+ * // Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses
+ * ellipseMode(CORNER);
+ * fill(255);
+ * ellipse(25, 25, 50, 50); // Outer white ellipse
+ * ellipseMode(CORNERS);
+ * fill(100);
+ * ellipse(25, 25, 50, 50); // Inner gray ellipse
+ *
+ *
+ * background(0);
+ * noStroke();
+ * smooth();
+ * ellipse(30, 48, 36, 36);
+ * noSmooth();
+ * ellipse(70, 48, 36, 36);
+ *
+ *
+ * rectMode(CORNER);
+ * fill(255);
+ * rect(25, 25, 50, 50); // Draw white rectangle using CORNER mode
+ *
+ * rectMode(CORNERS);
+ * fill(100);
+ * rect(25, 25, 50, 50); // Draw gray rectanle using CORNERS mode
+ *
+ *
+ * rectMode(RADIUS);
+ * fill(255);
+ * rect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode
+ *
+ * rectMode(CENTER);
+ * fill(100);
+ * rect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode
+ *
+ *
+ * background(0);
+ * noStroke();
+ * smooth();
+ * ellipse(30, 48, 36, 36);
+ * noSmooth();
+ * ellipse(70, 48, 36, 36);
+ *
+ *
+ * // Example of different strokeCaps
+ * strokeWeight(12.0);
+ * strokeCap(ROUND);
+ * line(20, 30, 80, 30);
+ * strokeCap(SQUARE);
+ * line(20, 50, 80, 50);
+ * strokeCap(PROJECT);
+ * line(20, 70, 80, 70);
+ *
+ *
+ * // Example of MITER type of joints
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(MITER);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ * // Example of BEVEL type of joints
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(BEVEL);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ * // Example of ROUND type of joints
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(ROUND);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ * // Example of different stroke weights
+ * strokeWeight(1); // Default
+ * line(20, 20, 80, 20);
+ * strokeWeight(4); // Thicker
+ * line(20, 40, 80, 40);
+ * strokeWeight(10); // Beastly
+ * line(20, 70, 80, 70);
+ *
+ *
+ * noFill();
+ * stroke(255, 102, 0);
+ * line(85, 20, 10, 10);
+ * line(90, 90, 15, 80);
+ * stroke(0, 0, 0);
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ *
+ *
+ * background(0, 0, 0);
+ * noFill();
+ * stroke(255);
+ * bezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noFill();
+ * bezierDetail(5);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * // prettier-ignore
+ * bezier(-40, -40, 0,
+ * 90, -40, 0,
+ * -90, 40, 0,
+ * 40, 40, 0);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ *
+ *
+ * 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);
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * // 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();
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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();
+ *
+ *
+ * beginShape();
+ * vertex(20, 20);
+ * vertex(40, 20);
+ * vertex(40, 40);
+ * vertex(60, 40);
+ * vertex(60, 60);
+ * vertex(20, 60);
+ * endShape(CLOSE);
+ *
+ *
+ * noFill();
+ * beginShape();
+ * vertex(30, 20);
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * endShape();
+ *
+ *
+ * beginShape();
+ * vertex(30, 20);
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * bezierVertex(50, 80, 60, 25, 30, 20);
+ * endShape();
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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();
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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);
+ *
+ *
+ * noFill();
+ *
+ * beginShape();
+ * vertex(20, 20);
+ * vertex(45, 20);
+ * vertex(45, 80);
+ * endShape(CLOSE);
+ *
+ * beginShape();
+ * vertex(50, 20);
+ * vertex(75, 20);
+ * vertex(75, 80);
+ * endShape();
+ *
+ *
+ * strokeWeight(5);
+ * point(20, 20);
+ * point(80, 20);
+ * point(50, 50);
+ *
+ * noFill();
+ * strokeWeight(1);
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * endShape();
+ *
+ *
+ * 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();
+ *
+ *
+ * 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();
+ *
+ *
+ * // Click to change the number of sides.
+ * // In WebGL mode, custom shapes will only
+ * // display hollow fill sections when
+ * // all calls to vertex() use the same z-value.
+ *
+ * let sides = 3;
+ * let angle, px, py;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * fill(237, 34, 93);
+ * strokeWeight(3);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * ngon(sides, 0, 0, 80);
+ * }
+ *
+ * function mouseClicked() {
+ * if (sides > 6) {
+ * sides = 3;
+ * } else {
+ * sides++;
+ * }
+ * }
+ *
+ * function ngon(n, x, y, d) {
+ * beginShape(TESS);
+ * for (let i = 0; i < n + 1; i++) {
+ * angle = TWO_PI / n * i;
+ * px = x + sin(angle) * d / 2;
+ * py = y - cos(angle) * d / 2;
+ * vertex(px, py, 0);
+ * }
+ * for (let i = 0; i < n + 1; i++) {
+ * angle = TWO_PI / n * i;
+ * px = x + sin(angle) * d / 4;
+ * py = y - cos(angle) * d / 4;
+ * vertex(px, py, 0);
+ * }
+ * endShape();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * noLoop();
+ * }
+
+ * function draw() {
+ * line(10, 10, 90, 90);
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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
+ *
+ *
+ * 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
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * background(200);
+ * // Equivalent to translate(x, y);
+ * applyMatrix(1, 0, 0, 1, 40 + step, 50);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * background(200);
+ * translate(50, 50);
+ * // Equivalent to scale(x, y);
+ * applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * let angle = map(step, 0, 20, 0, TWO_PI);
+ * let cos_a = cos(angle);
+ * let sin_a = sin(angle);
+ * background(200);
+ * translate(50, 50);
+ * // Equivalent to rotate(angle);
+ * applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * let angle = map(step, 0, 20, -PI / 4, PI / 4);
+ * background(200);
+ * translate(50, 50);
+ * // equivalent to shearX(angle);
+ * let shear_factor = 1 / tan(PI / 2 - angle);
+ * applyMatrix(1, 0, shear_factor, 1, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateY(PI / 6);
+ * stroke(153);
+ * box(35);
+ * let rad = millis() / 1000;
+ * // Set rotation angles
+ * let ct = cos(rad);
+ * let st = sin(rad);
+ * // Matrix for rotation around the Y axis
+ * // prettier-ignore
+ * applyMatrix( ct, 0.0, st, 0.0,
+ * 0.0, 1.0, 0.0, 0.0,
+ * -st, 0.0, ct, 0.0,
+ * 0.0, 0.0, 0.0, 1.0);
+ * stroke(255);
+ * box(50);
+ * }
+ *
+ *
+ * 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);
+ *
+ *
+ * translate(width / 2, height / 2);
+ * rotate(PI / 3.0);
+ * rect(-26, -26, 52, 52);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateX(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateY(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ * 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);
+ *
+ *
+ * rect(30, 20, 50, 50);
+ * scale(0.5, 1.3);
+ * rect(30, 20, 50, 50);
+ *
+ *
+ * translate(width / 4, height / 4);
+ * shearX(PI / 4.0);
+ * rect(0, 0, 30, 30);
+ *
+ *
+ * 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
+ *
+ *
+ * function draw() {
+ * background(200);
+ * rectMode(CENTER);
+ * translate(width / 2, height / 2);
+ * translate(p5.Vector.fromAngle(millis() / 1000, 40));
+ * rect(0, 0, 20, 20);
+ * }
+ *
+ *
+ * // Type to change the letter in the
+ * // center of the canvas.
+ * // If you reload the page, it will
+ * // still display the last key you entered
+ *
+ * let myText;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * myText = getItem('myText');
+ * if (myText === null) {
+ * myText = '';
+ * }
+ * }
+ *
+ * function draw() {
+ * textSize(40);
+ * background(255);
+ * text(myText, width / 2, height / 2);
+ * }
+ *
+ * function keyPressed() {
+ * myText = key;
+ * storeItem('myText', myText);
+ * }
+ *
+ * // Click the mouse to change
+ * // the color of the background
+ * // Once you have changed the color
+ * // it will stay changed even when you
+ * // reload the page.
+ *
+ * let myColor;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * myColor = getItem('myColor');
+ * }
+ *
+ * function draw() {
+ * if (myColor !== null) {
+ * background(myColor);
+ * }
+ * }
+ *
+ * function mousePressed() {
+ * myColor = color(random(255), random(255), random(255));
+ * storeItem('myColor', myColor);
+ * }
+ *
+ * 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
+ * }
+ *
+ * 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
+ * }
+ *
+ * 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
+ * }
+ *
+ * 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
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(1, 10);
+ * myDictionary.create(2, 20);
+ * myDictionary.create(3, 30);
+ * print(myDictionary.size()); // logs 3 to the console
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // logs true to console
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * let myValue = myDictionary.get('p5');
+ * print(myValue === 'js'); // logs true to console
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.set('p5', 'JS');
+ * myDictionary.print(); // logs "key: p5 - value: JS" to console
+ * }
+ *
+ * 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
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // prints 'true'
+ * myDictionary.clear();
+ * print(myDictionary.hasKey('p5')); // prints 'false'
+ * }
+ *
+ *
+ * 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
+ * }
+ *
+ * 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
+ * }
+ *
+ *
+ * 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');
+ * }
+ * }
+ *
+ *
+ * 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');
+ * }
+ * }
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.add(2, 2);
+ * print(myDictionary.get(2)); // logs 7 to console.
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.sub(2, 2);
+ * print(myDictionary.get(2)); // logs 3 to console.
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 4);
+ * myDictionary.mult(2, 2);
+ * print(myDictionary.get(2)); // logs 8 to console.
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 8);
+ * myDictionary.div(2, 2);
+ * print(myDictionary.get(2)); // logs 4 to console.
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let lowestValue = myDictionary.minValue(); // value is -10
+ * print(lowestValue);
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let highestValue = myDictionary.maxValue(); // value is 3
+ * print(highestValue);
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let lowestKey = myDictionary.minKey(); // value is 1.2
+ * print(lowestKey);
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let highestKey = myDictionary.maxKey(); // value is 4
+ * print(highestKey);
+ * }
+ *
+ * function setup() {
+ * createCanvas(50, 50);
+ * background(30);
+ * // move canvas down and right
+ * select('canvas').position(10, 30);
+ * }
+ *
+ * // select using ID
+ * let a = select('#container');
+ * let b = select('#beep', '#container');
+ * let c;
+ * if (a) {
+ * // select using class
+ * c = select('.boop', a);
+ * }
+ * // select using CSS selector string
+ * let d = select('#container #bleep');
+ * let e = select('#container p');
+ * [a, b, c, d, e]; // unused
+ *
+ * function setup() {
+ * createButton('btn');
+ * createButton('2nd btn');
+ * createButton('3rd btn');
+ * let buttons = selectAll('button');
+ *
+ * for (let i = 0; i < buttons.length; i++) {
+ * buttons[i].size(100, 100);
+ * }
+ * }
+ *
+ * // these are all valid calls to selectAll()
+ * let a = selectAll('.beep');
+ * a = selectAll('div');
+ * a = selectAll('button', '#container');
+ *
+ * let b = createDiv();
+ * b.id('container');
+ * let c = select('#container');
+ * a = selectAll('p', c);
+ * a = selectAll('#container p');
+ *
+ * let d = document.getElementById('container');
+ * a = selectAll('.boop', d);
+ * a = selectAll('#container .boop');
+ * console.log(a);
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * createDiv('this is some text');
+ * createP('this is a paragraph');
+ * }
+ * function mousePressed() {
+ * removeElements(); // this will remove the div and p, not canvas
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('pear');
+ * sel.option('kiwi');
+ * sel.option('grape');
+ * sel.changed(mySelectEvent);
+ * }
+ *
+ * function mySelectEvent() {
+ * let item = sel.value();
+ * background(200);
+ * text("it's a " + item + '!', 50, 50);
+ * }
+ *
+ * let checkbox;
+ * let cnv;
+ *
+ * function setup() {
+ * checkbox = createCheckbox(' fill');
+ * checkbox.changed(changeFill);
+ * cnv = createCanvas(100, 100);
+ * cnv.position(0, 30);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * ellipse(50, 50, 50, 50);
+ * }
+ *
+ * function changeFill() {
+ * if (checkbox.checked()) {
+ * fill(0);
+ * } else {
+ * noFill();
+ * }
+ * }
+ *
+ * // Open your console to see the output
+ * function setup() {
+ * let inp = createInput('');
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent() {
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ * createDiv('this is some text');
+ *
+ * createP('this is some text');
+ *
+ * createSpan('this is some text');
+ *
+ * createImg(
+ * 'https://p5js.org/assets/img/asterisk-01.png',
+ * 'the p5 magenta asterisk'
+ * );
+ *
+ * createA('http://p5js.org/', 'this is a link');
+ *
+ * let slider;
+ * function setup() {
+ * slider = createSlider(0, 255, 100);
+ * slider.position(10, 10);
+ * slider.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * let val = slider.value();
+ * background(val);
+ * }
+ *
+ * let slider;
+ * function setup() {
+ * colorMode(HSB);
+ * slider = createSlider(0, 360, 60, 40);
+ * slider.position(10, 10);
+ * slider.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * let val = slider.value();
+ * background(val, 100, 100, 1);
+ * }
+ *
+ * let button;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(0);
+ * button = createButton('click me');
+ * button.position(19, 19);
+ * button.mousePressed(changeBG);
+ * }
+ *
+ * function changeBG() {
+ * let val = random(255);
+ * background(val);
+ * }
+ *
+ * let checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('label', false);
+ * checkbox.changed(myCheckedEvent);
+ * }
+ *
+ * function myCheckedEvent() {
+ * if (this.checked()) {
+ * console.log('Checking!');
+ * } else {
+ * console.log('Unchecking!');
+ * }
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('pear');
+ * sel.option('kiwi');
+ * sel.option('grape');
+ * sel.selected('kiwi');
+ * sel.changed(mySelectEvent);
+ * }
+ *
+ * function mySelectEvent() {
+ * let item = sel.value();
+ * background(200);
+ * text('It is a ' + item + '!', 50, 50);
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('oil');
+ * sel.option('milk');
+ * sel.option('bread');
+ * sel.disable('milk');
+ * }
+ *
+ * let radio;
+ *
+ * function setup() {
+ * radio = createRadio();
+ * radio.option('black');
+ * radio.option('white');
+ * radio.option('gray');
+ * radio.style('width', '60px');
+ * textAlign(CENTER);
+ * fill(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * let val = radio.value();
+ * background(val);
+ * text(val, width / 2, height / 2);
+ * }
+ *
+ * let radio;
+ *
+ * function setup() {
+ * radio = createRadio();
+ * radio.option('apple', 1);
+ * radio.option('bread', 2);
+ * radio.option('juice', 3);
+ * radio.style('width', '60px');
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let val = radio.value();
+ * if (val) {
+ * text('item cost is $' + val, width / 2, height / 2);
+ * }
+ * }
+ *
+ * let colorPicker;
+ * function setup() {
+ * createCanvas(100, 100);
+ * colorPicker = createColorPicker('#ed225d');
+ * colorPicker.position(0, height + 5);
+ * }
+ *
+ * function draw() {
+ * background(colorPicker.color());
+ * }
+ *
+ * let inp1, inp2;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background('grey');
+ * inp1 = createColorPicker('#ff0000');
+ * inp1.position(0, height + 5);
+ * inp1.input(setShade1);
+ * inp2 = createColorPicker(color('yellow'));
+ * inp2.position(0, height + 30);
+ * inp2.input(setShade2);
+ * setMidShade();
+ * }
+ *
+ * function setMidShade() {
+ * // Finding a shade between the two
+ * let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);
+ * fill(commonShade);
+ * rect(20, 20, 60, 60);
+ * }
+ *
+ * function setShade1() {
+ * setMidShade();
+ * console.log('You are choosing shade 1 to be : ', this.value());
+ * }
+ * function setShade2() {
+ * setMidShade();
+ * console.log('You are choosing shade 2 to be : ', this.value());
+ * }
+ *
+ * function setup() {
+ * let inp = createInput('');
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent() {
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ * let input;
+ * let img;
+ *
+ * function setup() {
+ * input = createFileInput(handleFile);
+ * input.position(0, 0);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * function handleFile(file) {
+ * print(file);
+ * if (file.type === 'image') {
+ * img = createImg(file.data, '');
+ * img.hide();
+ * } else {
+ * img = null;
+ * }
+ * }
+ *
+ * let vid;
+ * function setup() {
+ * noCanvas();
+ *
+ * vid = createVideo(
+ * ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
+ * vidLoad
+ * );
+ *
+ * vid.size(100, 100);
+ * }
+ *
+ * // This function is called when the video loads
+ * function vidLoad() {
+ * vid.loop();
+ * vid.volume(0);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * // here we set the element to autoplay
+ * // The element will play as soon
+ * // as it is able to do so.
+ * ele.autoplay(true);
+ * }
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(480, 480);
+ * capture = createCapture(VIDEO);
+ * capture.hide();
+ * }
+ *
+ * function draw() {
+ * image(capture, 0, 0, width, width * capture.height / capture.width);
+ * filter(INVERT);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(480, 120);
+ * let constraints = {
+ * video: {
+ * mandatory: {
+ * minWidth: 1280,
+ * minHeight: 720
+ * },
+ * optional: [{ maxFrameRate: 10 }]
+ * },
+ * audio: true
+ * };
+ * createCapture(constraints, function(stream) {
+ * console.log(stream);
+ * });
+ * }
+ *
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(640, 480);
+ * capture = createCapture(VIDEO);
+ * }
+ * function draw() {
+ * background(0);
+ * if (capture.loadedmetadata) {
+ * let c = capture.get(0, 0, 100, 100);
+ * image(c, 0, 0);
+ * }
+ * }
+ *
+ *
+ * createElement('h2', 'im an h2 p5.element!');
+ *
+ * let div = createDiv('div');
+ * div.addClass('myClass');
+ *
+ * // In this example, a class is set when the div is created
+ * // and removed when mouse is pressed. This could link up
+ * // with a CSS style rule to toggle style properties.
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('myClass');
+ * }
+ *
+ * function mousePressed() {
+ * div.removeClass('myClass');
+ * }
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('show');
+ * }
+ *
+ * function mousePressed() {
+ * if (div.hasClass('show')) {
+ * div.addClass('show');
+ * } else {
+ * div.removeClass('show');
+ * }
+ * }
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('show');
+ * }
+ *
+ * function mousePressed() {
+ * div.toggleClass('show');
+ * }
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div0.child(div1); // use p5.Element
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div1.id('apples');
+ * div0.child('apples'); // use id
+ *
+ * // this example assumes there is a div already on the page
+ * // with id "myChildDiv"
+ * let div0 = createDiv('this is the parent');
+ * let elt = document.getElementById('myChildDiv');
+ * div0.child(elt); // use element from page
+ *
+ * function setup() {
+ * let div = createDiv('').size(10, 10);
+ * div.style('background-color', 'orange');
+ * div.center();
+ * }
+ *
+ * let div = createDiv('').size(100, 100);
+ * div.html('hi');
+ *
+ * let div = createDiv('Hello ').size(100, 100);
+ * div.html('World', true);
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // positions canvas 50px to the right and 100px
+ * // below upper left corner of the window
+ * cnv.position(50, 100);
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // positions canvas 50px to the right and 100px
+ * // below upper left corner of the window
+ * cnv.position(0, 0, 'fixed');
+ * }
+ *
+ * let myDiv = createDiv('I like pandas.');
+ * myDiv.style('font-size', '18px');
+ * myDiv.style('color', '#ff0000');
+ *
+ * let col = color(25, 23, 200, 50);
+ * let button = createButton('button');
+ * button.style('background-color', col);
+ * button.position(10, 10);
+ *
+ * let myDiv;
+ * function setup() {
+ * background(200);
+ * myDiv = createDiv('I like gray.');
+ * myDiv.position(20, 20);
+ * }
+ *
+ * function draw() {
+ * myDiv.style('font-size', mouseX + 'px');
+ * }
+ *
+ * let myDiv = createDiv('I like pandas.');
+ * myDiv.attribute('align', 'center');
+ *
+ * let button;
+ * let checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('enable', true);
+ * checkbox.changed(enableButton);
+ * button = createButton('button');
+ * button.position(10, 10);
+ * }
+ *
+ * function enableButton() {
+ * if (this.checked()) {
+ * // Re-enable the button
+ * button.removeAttribute('disabled');
+ * } else {
+ * // Disable the button
+ * button.attribute('disabled', '');
+ * }
+ * }
+ *
+ * // gets the value
+ * let inp;
+ * function setup() {
+ * inp = createInput('');
+ * }
+ *
+ * function mousePressed() {
+ * print(inp.value());
+ * }
+ *
+ * // sets the value
+ * let inp;
+ * function setup() {
+ * inp = createInput('myValue');
+ * }
+ *
+ * function mousePressed() {
+ * inp.value('myValue');
+ * }
+ *
+ * let div = createDiv('div');
+ * div.style('display', 'none');
+ * div.show(); // turns display to block
+ *
+ * let div = createDiv('this is a div');
+ * div.hide();
+ *
+ * let div = createDiv('this is a div');
+ * div.size(100, 100);
+ * let img = createImg(
+ * 'assets/rockies.jpg',
+ * 'A tall mountain with a small forest and field in front of it on a sunny day',
+ * '',
+ * () => {
+ * img.size(10, AUTO);
+ * }
+ * );
+ *
+ * let myDiv = createDiv('this is some text');
+ * myDiv.remove();
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('drop file', width / 2, height / 2);
+ * c.drop(gotFile);
+ * }
+ *
+ * function gotFile(file) {
+ * background(200);
+ * text('received file:', width / 2, height / 2);
+ * text(file.name, width / 2, height / 2 + 50);
+ * }
+ *
+ * let img;
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('drop image', width / 2, height / 2);
+ * c.drop(gotFile);
+ * }
+ *
+ * function draw() {
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * function gotFile(file) {
+ * img = createImg(file.data, '').hide();
+ * }
+ *
+ * let ele;
+ *
+ * function setup() {
+ * background(250);
+ *
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * //We'll set up our example so that
+ * //when you click on the text,
+ * //an alert box displays the MediaElement's
+ * //src field.
+ * textAlign(CENTER);
+ * text('Click Me!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * //Show our p5.MediaElement's src field
+ * alert(ele.src);
+ * }
+ * }
+ *
+ * let ele;
+ *
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to Play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * //Here we call the play() function on
+ * //the p5.MediaElement we created above.
+ * //This will start the audio sample.
+ * ele.play();
+ *
+ * background(200);
+ * text('You clicked Play!', width / 2, height / 2);
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and stops a sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * //if the sample is currently playing
+ * //calling the stop() function on
+ * //our p5.MediaElement will stop
+ * //it and reset its current
+ * //time to 0 (i.e. it will start
+ * //at the beginning the next time
+ * //you play it)
+ * ele.stop();
+ *
+ * sampleIsPlaying = false;
+ * text('Click to play!', width / 2, height / 2);
+ * } else {
+ * //loop our sound element until we
+ * //call ele.stop() on it.
+ * ele.loop();
+ *
+ * sampleIsPlaying = true;
+ * text('Click to stop!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and pauses a sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * //Calling pause() on our
+ * //p5.MediaElement will stop it
+ * //playing, but when we call the
+ * //loop() or play() functions
+ * //the sample will start from
+ * //where we paused it.
+ * ele.pause();
+ *
+ * sampleIsPlaying = false;
+ * text('Click to resume!', width / 2, height / 2);
+ * } else {
+ * //loop our sound element until we
+ * //call ele.pause() on it.
+ * ele.loop();
+ *
+ * sampleIsPlaying = true;
+ * text('Click to pause!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //Clicking the canvas will loop
+ * //the audio sample until the user
+ * //clicks again to stop it
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsLooping = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to loop!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (!sampleIsLooping) {
+ * //loop our sound element until we
+ * //call ele.stop() on it.
+ * ele.loop();
+ *
+ * sampleIsLooping = true;
+ * text('Click to stop!', width / 2, height / 2);
+ * } else {
+ * ele.stop();
+ *
+ * sampleIsLooping = false;
+ * text('Click to loop!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and stops loop of sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * ele.noLoop();
+ * sampleIsPlaying = false;
+ * text('No more Loops!', width / 2, height / 2);
+ * } else {
+ * ele.loop();
+ * sampleIsPlaying = true;
+ * text('Click to stop looping!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * let videoElement;
+ * function setup() {
+ * noCanvas();
+ * videoElement = createVideo(['assets/small.mp4'], onVideoLoad);
+ * }
+ * function onVideoLoad() {
+ * // The media will play as soon as it is loaded.
+ * videoElement.autoplay();
+ * videoElement.volume(0);
+ * videoElement.size(100, 100);
+ * }
+ *
+ * let videoElement;
+ * function setup() {
+ * noCanvas();
+ * videoElement = createVideo(['assets/small.mp4'], onVideoLoad);
+ * }
+ * function onVideoLoad() {
+ * // The media will not play untill some explicitly triggered.
+ * videoElement.autoplay(false);
+ * videoElement.volume(0);
+ * videoElement.size(100, 100);
+ * }
+ *
+ * function mouseClicked() {
+ * videoElement.play();
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * // p5.MediaElement objects are usually created
+ * // by calling the createAudio(), createVideo(),
+ * // and createCapture() functions.
+ * // In this example we create
+ * // a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to Play!', width / 2, height / 2);
+ * }
+ * function mouseClicked() {
+ * // Here we call the volume() function
+ * // on the sound element to set its volume
+ * // Volume must be between 0.0 and 1.0
+ * ele.volume(0.2);
+ * ele.play();
+ * background(200);
+ * text('You clicked Play!', width / 2, height / 2);
+ * }
+ *
+ * let audio;
+ * let counter = 0;
+ *
+ * function loaded() {
+ * audio.play();
+ * }
+ *
+ * function setup() {
+ * audio = createAudio('assets/lucky_dragons.mp3', loaded);
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (counter === 0) {
+ * background(0, 255, 0);
+ * text('volume(0.9)', width / 2, height / 2);
+ * } else if (counter === 1) {
+ * background(255, 255, 0);
+ * text('volume(0.5)', width / 2, height / 2);
+ * } else if (counter === 2) {
+ * background(255, 0, 0);
+ * text('volume(0.1)', width / 2, height / 2);
+ * }
+ * }
+ *
+ * function mousePressed() {
+ * counter++;
+ * if (counter === 0) {
+ * audio.volume(0.9);
+ * } else if (counter === 1) {
+ * audio.volume(0.5);
+ * } else if (counter === 2) {
+ * audio.volume(0.1);
+ * } else {
+ * counter = 0;
+ * audio.volume(0.9);
+ * }
+ * }
+ *
+ *
+ * //Clicking the canvas will loop
+ * //the audio sample until the user
+ * //clicks again to stop it
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ * let button;
+ *
+ * function setup() {
+ * createCanvas(710, 400);
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * ele.loop();
+ * background(200);
+ *
+ * button = createButton('2x speed');
+ * button.position(100, 68);
+ * button.mousePressed(twice_speed);
+ *
+ * button = createButton('half speed');
+ * button.position(200, 68);
+ * button.mousePressed(half_speed);
+ *
+ * button = createButton('reverse play');
+ * button.position(300, 68);
+ * button.mousePressed(reverse_speed);
+ *
+ * button = createButton('STOP');
+ * button.position(400, 68);
+ * button.mousePressed(stop_song);
+ *
+ * button = createButton('PLAY!');
+ * button.position(500, 68);
+ * button.mousePressed(play_speed);
+ * }
+ *
+ * function twice_speed() {
+ * ele.speed(2);
+ * }
+ *
+ * function half_speed() {
+ * ele.speed(0.5);
+ * }
+ *
+ * function reverse_speed() {
+ * ele.speed(-1);
+ * }
+ *
+ * function stop_song() {
+ * ele.stop();
+ * }
+ *
+ * function play_speed() {
+ * ele.play();
+ * }
+ *
+ * let ele;
+ * let beginning = true;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('start at beginning', width / 2, height / 2);
+ * }
+ *
+ * // this function fires with click anywhere
+ * function mousePressed() {
+ * if (beginning === true) {
+ * // here we start the sound at the beginning
+ * // time(0) is not necessary here
+ * // as this produces the same result as
+ * // play()
+ * ele.play().time(0);
+ * background(200);
+ * text('jump 2 sec in', width / 2, height / 2);
+ * beginning = false;
+ * } else {
+ * // here we jump 2 seconds into the sound
+ * ele.play().time(2);
+ * background(250);
+ * text('start at beginning', width / 2, height / 2);
+ * beginning = true;
+ * }
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/doorbell.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to know the duration!', 10, 25, 70, 80);
+ * }
+ * function mouseClicked() {
+ * ele.play();
+ * background(200);
+ * //ele.duration dislpays the duration
+ * text(ele.duration() + ' seconds', width / 2, height / 2);
+ * }
+ *
+ * function setup() {
+ * let audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ * audioEl.onended(sayDone);
+ * }
+ *
+ * function sayDone(elt) {
+ * alert('done playing ' + elt.src);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio()
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to Show Controls!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * ele.showControls();
+ * background(200);
+ * text('Controls Shown', width / 2, height / 2);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio()
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * ele.showControls();
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to hide Controls!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * ele.hideControls();
+ * background(200);
+ * text('Controls hidden', width / 2, height / 2);
+ * }
+ *
+ * //
+ * //
+ * function setup() {
+ * noCanvas();
+ *
+ * let audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ *
+ * // schedule three calls to changeBackground
+ * audioEl.addCue(0.5, changeBackground, color(255, 0, 0));
+ * audioEl.addCue(1.0, changeBackground, color(0, 255, 0));
+ * audioEl.addCue(2.5, changeBackground, color(0, 0, 255));
+ * audioEl.addCue(3.0, changeBackground, color(0, 255, 255));
+ * audioEl.addCue(4.2, changeBackground, color(255, 255, 0));
+ * audioEl.addCue(5.0, changeBackground, color(255, 255, 0));
+ * }
+ *
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationX);
+ * }
+ *
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationY);
+ * }
+ *
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationZ);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * // 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);
+ *
+ *
+ * // 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);
+ *
+ *
+ * // 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);
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // You will need to move the device incrementally further
+ * // the closer the square's color gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 0.5;
+ * function setup() {
+ * setMoveThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 0.1;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setMoveThreshold(threshold);
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // You will need to shake the device more firmly
+ * // the closer the box's fill gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 30;
+ * function setup() {
+ * setShakeThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 5;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setShakeThreshold(threshold);
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // Move the device around
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // Shake the device to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceShaken() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function draw() {
+ * if (keyIsPressed === true) {
+ * fill(0);
+ * } else {
+ * fill(255);
+ * }
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ *
+ * // Click any key to display it!
+ * // (Not Guaranteed to be Case Sensitive)
+ * function setup() {
+ * fill(245, 123, 158);
+ * textSize(50);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(key, 33, 65); // Display last key pressed.
+ * }
+ *
+ * let fillVal = 126;
+ * function draw() {
+ * fill(fillVal);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function keyPressed() {
+ * if (keyCode === UP_ARROW) {
+ * fillVal = 255;
+ * } else if (keyCode === DOWN_ARROW) {
+ * fillVal = 0;
+ * }
+ * return false; // prevent default
+ * }
+ *
+ * function draw() {}
+ * function keyPressed() {
+ * background('yellow');
+ * text(`${key} ${keyCode}`, 10, 40);
+ * print(key, ' ', keyCode);
+ * return false; // prevent default
+ * }
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyPressed() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyPressed() {
+ * if (keyCode === LEFT_ARROW) {
+ * value = 255;
+ * } else if (keyCode === RIGHT_ARROW) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function keyPressed() {
+ * // Do something
+ * return false; // prevent any default behaviour
+ * }
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * return false; // prevent any default behavior
+ * }
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyTyped() {
+ * if (key === 'a') {
+ * value = 255;
+ * } else if (key === 'b') {
+ * value = 0;
+ * }
+ * // uncomment to prevent any default behavior
+ * // return false;
+ * }
+ *
+ *
+ * let x = 100;
+ * let y = 100;
+ *
+ * function setup() {
+ * createCanvas(512, 512);
+ * fill(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * if (keyIsDown(LEFT_ARROW)) {
+ * x -= 5;
+ * }
+ *
+ * if (keyIsDown(RIGHT_ARROW)) {
+ * x += 5;
+ * }
+ *
+ * if (keyIsDown(UP_ARROW)) {
+ * y -= 5;
+ * }
+ *
+ * if (keyIsDown(DOWN_ARROW)) {
+ * y += 5;
+ * }
+ *
+ * clear();
+ * ellipse(x, y, 50, 50);
+ * }
+ *
+ * let diameter = 50;
+ *
+ * function setup() {
+ * createCanvas(512, 512);
+ * }
+ *
+ * function draw() {
+ * // 107 and 187 are keyCodes for "+"
+ * if (keyIsDown(107) || keyIsDown(187)) {
+ * diameter += 1;
+ * }
+ *
+ * // 109 and 189 are keyCodes for "-"
+ * if (keyIsDown(109) || keyIsDown(189)) {
+ * diameter -= 1;
+ * }
+ *
+ * clear();
+ * fill(255, 0, 0);
+ * ellipse(50, 50, diameter, diameter);
+ * }
+ *
+ * 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);
+ * }
+ *
+ *
+ * let y = 50;
+ * function setup() {
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (y > 48) {
+ * y -= 2;
+ * } else if (y < 48) {
+ * y += 2;
+ * }
+ * y += floor(movedY / 5);
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(y, 50, 50, 50);
+ * }
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, 0, mouseX, 100);
+ * }
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(0, mouseY, 100, mouseY);
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * if (mouseIsPressed) {
+ * if (mouseButton === LEFT) {
+ * ellipse(50, 50, 50, 50);
+ * }
+ * if (mouseButton === RIGHT) {
+ * rect(25, 25, 50, 50);
+ * }
+ * if (mouseButton === CENTER) {
+ * triangle(23, 75, 50, 20, 78, 75);
+ * }
+ * }
+ *
+ * print(mouseButton);
+ * }
+ *
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * if (mouseIsPressed) {
+ * ellipse(50, 50, 50, 50);
+ * } else {
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * print(mouseIsPressed);
+ * }
+ *
+ *
+ * // Move the mouse across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mouseMoved() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseMoved(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Drag the mouse across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseDragged() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mouseDragged() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseDragged(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mousePressed() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mousePressed() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mousePressed(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mouseReleased() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseReleased(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function mouseClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mouseClicked() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseClicked(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been double clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function doubleClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function doubleClicked() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function doubleClicked(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * let pos = 25;
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(25, pos, 50, 50);
+ * }
+ *
+ * function mouseWheel(event) {
+ * print(event.delta);
+ * //move the square according to the vertical scroll amount
+ * pos += event.delta;
+ * //uncomment to block page scrolling
+ * //return false;
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * //click the canvas to lock the pointer
+ * //click again to exit (otherwise escape)
+ * let locked = false;
+ * function draw() {
+ * background(237, 34, 93);
+ * }
+ * function mouseClicked() {
+ * if (!locked) {
+ * locked = true;
+ * requestPointerLock();
+ * } else {
+ * exitPointerLock();
+ * locked = false;
+ * }
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * // Touch within the image to change
+ * // the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchStarted() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function touchStarted() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchStarted(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Move your finger across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function touchMoved() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchMoved(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Release touch within the image to
+ * // change the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchEnded() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function touchEnded() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchEnded(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ * image(img, 34, 34);
+ *
+ *
+ * let pink = color(255, 102, 204);
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (img.width * d) * (img.height / 2 * d);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * img.pixels[i] = red(pink);
+ * img.pixels[i + 1] = green(pink);
+ * img.pixels[i + 2] = blue(pink);
+ * img.pixels[i + 3] = alpha(pink);
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(255, 0, 0);
+ * saveCanvas(c, 'myCanvas', 'jpg');
+ * }
+ *
+ * // note that this example has the same result as above
+ * // if no canvas is specified, defaults to main canvas
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(255, 0, 0);
+ * saveCanvas('myCanvas', 'jpg');
+ *
+ * // all of the following are valid
+ * saveCanvas(c, 'myCanvas', 'jpg');
+ * saveCanvas(c, 'myCanvas.jpg');
+ * saveCanvas(c, 'myCanvas');
+ * saveCanvas(c);
+ * saveCanvas('myCanvas', 'png');
+ * saveCanvas('myCanvas');
+ * saveCanvas();
+ * }
+ *
+ * function draw() {
+ * background(mouseX);
+ * }
+ *
+ * function mousePressed() {
+ * saveFrames('out', 'png', 1, 25, data => {
+ * print(data);
+ * });
+ * }
+
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * }
+ *
+ *
+ * function setup() {
+ * // here we use a callback to display the image after loading
+ * loadImage('assets/laDefense.jpg', img => {
+ * image(img, 0, 0);
+ * });
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * // Top-left corner of the img is at (0, 0)
+ * // Width and height are the img's original width and height
+ * image(img, 0, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * background(50);
+ * // Top-left corner of the img is at (10, 10)
+ * // Width and height are 50 x 50
+ * image(img, 10, 10, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * // Here, we use a callback to display the image after loading
+ * loadImage('assets/laDefense.jpg', img => {
+ * image(img, 0, 0);
+ * });
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/gradient.png');
+ * }
+ * function setup() {
+ * // 1. Background image
+ * // Top-left corner of the img is at (0, 0)
+ * // Width and height are the img's original width and height, 100 x 100
+ * image(img, 0, 0);
+ * // 2. Top right image
+ * // Top-left corner of destination rectangle is at (50, 0)
+ * // Destination rectangle width and height are 40 x 20
+ * // The next parameters are relative to the source image:
+ * // - Starting at position (50, 50) on the source image, capture a 50 x 50
+ * // subsection
+ * // - Draw this subsection to fill the dimensions of the destination rectangle
+ * image(img, 50, 0, 40, 20, 50, 50, 50, 50);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(0, 153, 204); // Tint blue
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(0, 153, 204, 126); // Tint blue and set transparency
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(255, 126); // Apply transparency without changing color
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * tint(0, 153, 204); // Tint blue
+ * image(img, 0, 0);
+ * noTint(); // Disable tint
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CORNER);
+ * image(img, 10, 10, 50, 50);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CORNERS);
+ * image(img, 10, 10, 90, 40);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CENTER);
+ * image(img, 50, 50, 80, 80);
+ * }
+ *
+ *
+ * function setup() {
+ * let img = createImage(100, 100); // same as new p5.Image(100, 100);
+ * img.loadPixels();
+ * createCanvas(100, 100);
+ * background(0);
+ *
+ * // helper for writing color to array
+ * function writeColor(image, x, y, red, green, blue, alpha) {
+ * let index = (x + y * width) * 4;
+ * image.pixels[index] = red;
+ * image.pixels[index + 1] = green;
+ * image.pixels[index + 2] = blue;
+ * image.pixels[index + 3] = alpha;
+ * }
+ *
+ * let x, y;
+ * // fill with random colors
+ * for (y = 0; y < img.height; y++) {
+ * for (x = 0; x < img.width; x++) {
+ * let red = random(255);
+ * let green = random(255);
+ * let blue = random(255);
+ * let alpha = 255;
+ * writeColor(img, x, y, red, green, blue, alpha);
+ * }
+ * }
+ *
+ * // draw a red line
+ * y = 0;
+ * for (x = 0; x < img.width; x++) {
+ * writeColor(img, x, y, 255, 0, 0, 255);
+ * }
+ *
+ * // draw a green line
+ * y = img.height - 1;
+ * for (x = 0; x < img.width; x++) {
+ * writeColor(img, x, y, 0, 255, 0, 255);
+ * }
+ *
+ * img.updatePixels();
+ * image(img, 0, 0);
+ * }
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * image(img, 0, 0);
+ * for (let i = 0; i < img.width; i++) {
+ * let c = img.get(i, img.height / 2);
+ * stroke(c);
+ * line(i, height / 2, i, height);
+ * }
+ * }
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * image(img, 0, 0);
+ * for (let i = 0; i < img.height; i++) {
+ * let c = img.get(img.width / 2, i);
+ * stroke(c);
+ * line(0, i, width / 2, i);
+ * }
+ * }
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ * let pink = color(255, 102, 204);
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < 4 * (width * height / 2); i += 4) {
+ * img.pixels[i] = red(pink);
+ * img.pixels[i + 1] = green(pink);
+ * img.pixels[i + 2] = blue(pink);
+ * img.pixels[i + 3] = alpha(pink);
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ * let myImage;
+ * let halfImage;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * myImage.loadPixels();
+ * halfImage = 4 * myImage.width * myImage.height / 2;
+ * for (let i = 0; i < halfImage; i++) {
+ * myImage.pixels[i + halfImage] = myImage.pixels[i];
+ * }
+ * myImage.updatePixels();
+ * }
+ *
+ * function draw() {
+ * image(myImage, 0, 0, width, height);
+ * }
+ *
+ * let myImage;
+ * let halfImage;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * myImage.loadPixels();
+ * halfImage = 4 * myImage.width * myImage.height / 2;
+ * for (let i = 0; i < halfImage; i++) {
+ * myImage.pixels[i + halfImage] = myImage.pixels[i];
+ * }
+ * myImage.updatePixels();
+ * }
+ *
+ * function draw() {
+ * image(myImage, 0, 0, width, height);
+ * }
+ *
+ * let myImage;
+ * let c;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * background(myImage);
+ * noStroke();
+ * c = myImage.get(60, 90);
+ * fill(c);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * //get() returns color here
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ * image(img, 34, 34);
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+
+ * function draw() {
+ * image(img, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * img.resize(50, 100);
+ * }
+ *
+ * let photo;
+ * let bricks;
+ * let x;
+ * let y;
+ *
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * x = bricks.width / 2;
+ * y = bricks.height / 2;
+ * photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+ * image(photo, 0, 0);
+ * }
+ *
+ * let photo, maskImage;
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * maskImage = loadImage('assets/mask2.png');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * photo.mask(maskImage);
+ * image(photo, 0, 0);
+ * }
+ *
+ * let photo1;
+ * let photo2;
+ *
+ * function preload() {
+ * photo1 = loadImage('assets/rockies.jpg');
+ * photo2 = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * photo2.filter(GRAY);
+ * image(photo1, 0, 0);
+ * image(photo2, width / 2, 0);
+ * }
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ * let photo;
+ *
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function draw() {
+ * image(photo, 0, 0);
+ * }
+ *
+ * function keyTyped() {
+ * if (key === 's') {
+ * photo.save('photo', 'png');
+ * }
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * // The GIF file that we loaded only loops once
+ * // so it freezes on the last frame after playing through
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * // Click to reset the GIF and begin playback from start
+ * gif.reset();
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * let frame = gif.getCurrentFrame();
+ * image(gif, 0, 0);
+ * text(frame, 10, 90);
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * // Move your mouse up and down over canvas to see the GIF
+ * // frames animate
+ * function draw() {
+ * gif.pause();
+ * image(gif, 0, 0);
+ * // Get the highest frame number which is the number of frames - 1
+ * let maxFrame = gif.numFrames() - 1;
+ * // Set the current frame that is mapped to be relative to mouse position
+ * let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));
+ * gif.setFrame(frameNumber);
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * // Move your mouse up and down over canvas to see the GIF
+ * // frames animate
+ * function draw() {
+ * gif.pause();
+ * image(gif, 0, 0);
+ * // Get the highest frame number which is the number of frames - 1
+ * let maxFrame = gif.numFrames() - 1;
+ * // Set the current frame that is mapped to be relative to mouse position
+ * let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));
+ * gif.setFrame(frameNumber);
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ * let gifFast, gifSlow;
+ *
+ * function preload() {
+ * gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * gifFast.resize(width / 2, height / 2);
+ * gifSlow.resize(width / 2, height / 2);
+ *
+ * //Change the delay here
+ * gifFast.delay(10);
+ * gifSlow.delay(100);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gifFast, 0, 0);
+ * image(gifSlow, width / 2, 0);
+ * }
+ *
+ * let pink = color(255, 102, 204);
+ * loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height / 2 * d);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * pixels[i] = red(pink);
+ * pixels[i + 1] = green(pink);
+ * pixels[i + 2] = blue(pink);
+ * pixels[i + 3] = alpha(pink);
+ * }
+ * updatePixels();
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ * }
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ * }
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ * }
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img);
+ * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+ * stroke(255);
+ * noFill();
+ * // Rectangle shows area being copied
+ * rect(7, 22, 10, 10);
+ * }
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(THRESHOLD);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(GRAY);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(OPAQUE);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(INVERT);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(POSTERIZE, 3);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(DILATE);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(BLUR, 3);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(ERODE);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get();
+ * image(c, width / 2, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get(50, 90);
+ * fill(c);
+ * noStroke();
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0, width, height);
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height * d / 2);
+ * loadPixels();
+ * for (let i = 0; i < halfImage; i++) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ * updatePixels();
+ * }
+ *
+ *
+ * let black = color(0);
+ * set(30, 20, black);
+ * set(85, 20, black);
+ * set(85, 75, black);
+ * set(30, 75, black);
+ * updatePixels();
+ *
+ *
+ * for (let i = 30; i < width - 15; i++) {
+ * for (let j = 20; j < height - 25; j++) {
+ * let c = color(204 - j, 153 - i, 0);
+ * set(i, j, c);
+ * }
+ * }
+ * updatePixels();
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * set(0, 0, img);
+ * updatePixels();
+ * line(0, 0, width, height);
+ * line(0, height, width, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0, width, height);
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height * d / 2);
+ * loadPixels();
+ * for (let i = 0; i < halfImage; i++) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ * updatePixels();
+ * }
+ *
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+ * 'summary/all_day.geojson';
+ * earthquakes = loadJSON(url);
+ * }
+ *
+ * function setup() {
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * }
+ *
+ * function setup() {
+ * noLoop();
+ * let url =
+ 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+ * 'summary/all_day.geojson';
+ * loadJSON(url, drawEarthquake);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * }
+ *
+ * function drawEarthquake(earthquakes) {
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * }
+ *
+ * let result;
+ * function preload() {
+ * result = loadStrings('assets/test.txt');
+ * }
+
+ * function setup() {
+ * background(200);
+ * text(random(result), 10, 10, 80, 80);
+ * }
+ *
+ * function setup() {
+ * loadStrings('assets/test.txt', pickString);
+ * }
+ *
+ * function pickString(result) {
+ * background(200);
+ * text(random(result), 10, 10, 80, 80);
+ * }
+ *
+ * // Given the following CSV file called "mammals.csv"
+ * // located in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * //the file can be remote
+ * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+ * // "csv", "header");
+ * }
+ *
+ * function setup() {
+ * //count the columns
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ *
+ * print(table.getColumn('name'));
+ * //["Goat", "Leopard", "Zebra"]
+ *
+ * //cycle through the table
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(table.getString(r, c));
+ * }
+ * }
+ *
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < children.length; i++) {
+ * let id = children[i].getNum('id');
+ * let coloring = children[i].getString('species');
+ * let name = children[i].getContent();
+ * print(id + ', ' + coloring + ', ' + name);
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // 0, Capra hircus, Goat
+ * // 1, Panthera pardus, Leopard
+ * // 2, Equus zebra, Zebra
+ *
+ * let data;
+ *
+ * function preload() {
+ * data = loadBytes('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * for (let i = 0; i < 5; i++) {
+ * console.log(data.bytes[i].toString(16));
+ * }
+ * }
+ *
httpDo(path, 'GET')
. The 'binary' datatype will return
+ * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+ * which can be used to initialize typed arrays (such as Uint8Array).
+ *
+ * @method httpGet
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "binary", "arrayBuffer",
+ * "xml", or "text"
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpGet() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ * @example
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+ * 'format=geojson&limit=1&orderby=time';
+ * httpGet(url, 'jsonp', false, function(response) {
+ * // when the HTTP request completes, populate the variable that holds the
+ * // earthquake data used in the visualization.
+ * earthquakes = response;
+ * });
+ * }
+ *
+ * function draw() {
+ * if (!earthquakes) {
+ * // Wait until the earthquake data has loaded before drawing.
+ * return;
+ * }
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * noLoop();
+ * }
+ *
httpDo(path, 'POST')
.
+ *
+ * @method httpPost
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "xml", or "text".
+ * If omitted, httpPost() will guess.
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpPost() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ *
+ * @example
+ *
+ * // Examples use jsonplaceholder.typicode.com for a Mock Data API
+ *
+ * let url = 'https://jsonplaceholder.typicode.com/posts';
+ * let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is way cool.' };
+ *
+ * function setup() {
+ * createCanvas(800, 800);
+ * }
+ *
+ * function mousePressed() {
+ * // Pick new random color values
+ * let r = random(255);
+ * let g = random(255);
+ * let b = random(255);
+ *
+ * httpPost(url, 'json', postData, function(result) {
+ * strokeWeight(2);
+ * stroke(r, g, b);
+ * fill(r, g, b, 127);
+ * ellipse(mouseX, mouseY, 200, 200);
+ * text(result.body, mouseX, mouseY);
+ * });
+ * }
+ *
+ *
+ * let url = 'ttps://invalidURL'; // A bad URL that will cause errors
+ * let postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };
+ *
+ * function setup() {
+ * createCanvas(800, 800);
+ * }
+ *
+ * function mousePressed() {
+ * // Pick new random color values
+ * let r = random(255);
+ * let g = random(255);
+ * let b = random(255);
+ *
+ * httpPost(
+ * url,
+ * 'json',
+ * postData,
+ * function(result) {
+ * // ... won't be called
+ * },
+ * function(error) {
+ * strokeWeight(2);
+ * stroke(r, g, b);
+ * fill(r, g, b, 127);
+ * text(error.toString(), mouseX, mouseY);
+ * }
+ * );
+ * }
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ *
+ * // displays an animation of all USGS earthquakes
+ * let earthquakes;
+ * let eqFeatureIndex = 0;
+ *
+ * function preload() {
+ * let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+ * httpDo(
+ * url,
+ * {
+ * method: 'GET',
+ * // Other Request options, like special headers for apis
+ * headers: { authorization: 'Bearer secretKey' }
+ * },
+ * function(res) {
+ * earthquakes = res;
+ * }
+ * );
+ * }
+ *
+ * function draw() {
+ * // wait until the data is loaded
+ * if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+ * return;
+ * }
+ * clear();
+ *
+ * let feature = earthquakes.features[eqFeatureIndex];
+ * let mag = feature.properties.mag;
+ * let rad = mag / 11 * ((width + height) / 2);
+ * fill(255, 0, 0, 100);
+ * ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+ *
+ * if (eqFeatureIndex >= earthquakes.features.length) {
+ * eqFeatureIndex = 0;
+ * } else {
+ * eqFeatureIndex += 1;
+ * }
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * 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();
+ *
+ *
+ * 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();
+ *
+ *
+ * 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();
+ *
+ * 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();
+ *
+ *
+ * // create a file called 'newFile2.txt'
+ * let writer = createWriter('newFile2.txt');
+ * // write some data to the file
+ * writer.write([100, 101, 102]);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ * true
indicates that the
+ * output will be optimized for filesize,
+ * rather than readability.
+ *
+ * @example
+ *
+ * // Saves the canvas as an image
+ * cnv = createCanvas(300, 300);
+ * save(cnv, 'myCanvas.jpg');
+ *
+ * // Saves the canvas as an image by default
+ * save('myCanvas.jpg');
+ *
+ * // Saves p5.Image as an image
+ * img = createImage(10, 10);
+ * save(img, 'myImage.png');
+ *
+ * // Saves p5.Renderer object as an image
+ * obj = createGraphics(100, 100);
+ * save(obj, 'myObject.png');
+ *
+ * let myTable = new p5.Table();
+ * // Saves table as html file
+ * save(myTable, 'myTable.html');
+ *
+ * // Comma Separated Values
+ * save(myTable, 'myTable.csv');
+ *
+ * // Tab Separated Values
+ * save(myTable, 'myTable.tsv');
+ *
+ * let myJSON = { a: 1, b: true };
+ *
+ * // Saves pretty JSON
+ * save(myJSON, 'my.json');
+ *
+ * // Optimizes JSON filesize
+ * save(myJSON, 'my.json', true);
+ *
+ * // Saves array of strings to text file with line breaks after each item
+ * let arrayOfStrings = ['a', 'b'];
+ * save(arrayOfStrings, 'my.txt');
+ *
+ * let json = {}; // new JSON Object
+ *
+ * json.id = 0;
+ * json.species = 'Panthera leo';
+ * json.name = 'Lion';
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * saveJSON(json, 'lion.json');
+ * }
+ * }
+ *
+ * // saves the following to a file called "lion.json":
+ * // {
+ * // "id": 0,
+ * // "species": "Panthera leo",
+ * // "name": "Lion"
+ * // }
+ *
+ * let words = 'apple bear cat dog';
+ *
+ * // .split() outputs an Array
+ * let list = split(words, ' ');
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * saveStrings(list, 'nouns.txt');
+ * }
+ * }
+ *
+ * // Saves the following to a file called 'nouns.txt':
+ * //
+ * // apple
+ * // bear
+ * // cat
+ * // dog
+ *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('id');
+ * table.addColumn('species');
+ * table.addColumn('name');
+ *
+ * let newRow = table.addRow();
+ * newRow.setNum('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Panthera leo');
+ * newRow.setString('name', 'Lion');
+ *
+ * // To save, un-comment next line then click 'run'
+ * // saveTable(table, 'new.csv');
+ * }
+ *
+ * // Saves the following to a file called 'new.csv':
+ * // id,species,name
+ * // 0,Panthera leo,Lion
+ *
'.concat(e)); + cov_se4dkkbfy.s[416]++; + pWriter.print(' | '); + } + cov_se4dkkbfy.s[417]++; + pWriter.print('
'.concat(htmlEntry)); + cov_se4dkkbfy.s[426]++; + pWriter.print(' | '); + } + cov_se4dkkbfy.s[427]++; + pWriter.print('
+ * // 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]);
+ * }
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // 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));
+ * }
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // 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'));
+ * }
+ *
+ *
+ * // 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');
+ * }
+ *
+ *
+ * // 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"
+ * }
+ *
+ *
+ * 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
+ *
+ *
+ * // 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"]
+ * }
+ *
+ *
+ * // 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');
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * // 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"
+ *
+ * // 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());
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.setNum(1, 'id', 1);
+ *
+ * print(table.getColumn(0));
+ * //["0", 1, "2"]
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * print(table.getArray());
+ * }
+ *
+ * // 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
+ * }
+ *
+ *
+ * // 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
+ * }
+ *
+ *
+ * // 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
+ * }
+ *
+ *
+ * // 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
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leoperd
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableArray = table.getArray();
+ * for (let i = 0; i < tableArray.length; i++) {
+ * print(tableArray[i]);
+ * }
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * print(table.getArray());
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].setNum('id', r + 10);
+ * }
+ *
+ * print(table.getArray());
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * let name = rows[r].getString('name');
+ * rows[r].setString('name', 'A ' + name + ' named George');
+ * }
+ *
+ * print(table.getArray());
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let names = [];
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * names.push(rows[r].get('name'));
+ * }
+ *
+ * print(names);
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let minId = Infinity;
+ * let maxId = -Infinity;
+ * for (let r = 0; r < rows.length; r++) {
+ * let id = rows[r].getNum('id');
+ * minId = min(minId, id);
+ * maxId = min(maxId, id);
+ * }
+ * print('minimum id = ' + minId + ', maximum id = ' + maxId);
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let longest = '';
+ * for (let r = 0; r < rows.length; r++) {
+ * let species = rows[r].getString('species');
+ * if (longest.length < species.length) {
+ * longest = species;
+ * }
+ * }
+ *
+ * print('longest: ' + longest);
+ * }
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < children.length; i++) {
+ * let id = children[i].getNum('id');
+ * let coloring = children[i].getString('species');
+ * let name = children[i].getContent();
+ * print(id + ', ' + coloring + ', ' + name);
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // 0, Capra hircus, Goat
+ * // 1, Panthera pardus, Leopard
+ * // 2, Equus zebra, Zebra
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ * let parent = children[1].getParent();
+ * print(parent.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.getName());
+ * xml.setName('fish');
+ * print(xml.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ * // fish
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.hasChildren());
+ * }
+ *
+ * // Sketch prints:
+ * // true
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.listChildren());
+ * }
+ *
+ * // Sketch prints:
+ * // ["animal", "animal", "animal"]
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let animals = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < animals.length; i++) {
+ * print(animals[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let secondChild = xml.getChild(1);
+ * print(secondChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Leopard"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let child = new p5.XML();
+ * child.setName('animal');
+ * child.setAttribute('id', '3');
+ * child.setAttribute('species', 'Ornithorhynchus anatinus');
+ * child.setContent('Platypus');
+ * xml.addChild(child);
+ *
+ * let animals = xml.getChildren('animal');
+ * print(animals[animals.length - 1].getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * xml.removeChild('animal');
+ * let children = xml.getChildren();
+ * for (let i = 0; i < children.length; i++) {
+ * print(children[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * xml.removeChild(1);
+ * let children = xml.getChildren();
+ * for (let i = 0; i < children.length; i++) {
+ * print(children[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getAttributeCount());
+ * }
+ *
+ * // Sketch prints:
+ * // 2
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.listAttributes());
+ * }
+ *
+ * // Sketch prints:
+ * // ["id", "species"]
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.hasAttribute('species'));
+ * print(firstChild.hasAttribute('color'));
+ * }
+ *
+ * // Sketch prints:
+ * // true
+ * // false
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getNum('id'));
+ * }
+ *
+ * // Sketch prints:
+ * // 0
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getString('species'));
+ * }
+ *
+ * // Sketch prints:
+ * // "Capra hircus"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getString('species'));
+ * firstChild.setAttribute('species', 'Jamides zebra');
+ * print(firstChild.getString('species'));
+ * }
+ *
+ * // Sketch prints:
+ * // "Capra hircus"
+ * // "Jamides zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * firstChild.setContent('Mountain Goat');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Mountain Goat"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.serialize());
+ * }
+ *
+ * // Sketch prints:
+ * //
+ * // Goat
+ * // Leopard
+ * // Zebra
+ * //
+ *
+ * function setup() {
+ * let x = -3;
+ * let y = abs(x);
+ *
+ * print(x); // -3
+ * print(y); // 3
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * // map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * //Get the ceiling of the mapped number.
+ * let bx = ceil(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let leftWall = 25;
+ * let rightWall = 75;
+ *
+ * // xm is just the mouseX, while
+ * // xc is the mouseX, but constrained
+ * // between the leftWall and rightWall!
+ * let xm = mouseX;
+ * let xc = constrain(mouseX, leftWall, rightWall);
+ *
+ * // Draw the walls.
+ * stroke(150);
+ * line(leftWall, 0, leftWall, height);
+ * line(rightWall, 0, rightWall, height);
+ *
+ * // Draw xm and xc as circles.
+ * noStroke();
+ * fill(150);
+ * ellipse(xm, 33, 9, 9); // Not Constrained
+ * fill(0);
+ * ellipse(xc, 66, 9, 9); // Constrained
+ * }
+ *
+ * // Move your mouse inside the canvas to see the
+ * // change in distance between two points!
+ * function draw() {
+ * background(200);
+ * fill(0);
+ *
+ * let x1 = 10;
+ * let y1 = 90;
+ * let x2 = mouseX;
+ * let y2 = mouseY;
+ *
+ * line(x1, y1, x2, y2);
+ * ellipse(x1, y1, 7, 7);
+ * ellipse(x2, y2, 7, 7);
+ *
+ * // d is the length of the line
+ * // the distance from point 1 to point 2.
+ * let d = int(dist(x1, y1, x2, y2));
+ *
+ * // Let's write d along the line we are drawing!
+ * push();
+ * translate((x1 + x2) / 2, (y1 + y2) / 2);
+ * rotate(atan2(y2 - y1, x2 - x1));
+ * text(nfc(d, 1), 0, -5);
+ * pop();
+ * // Fancy!
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Compute the exp() function with a value between 0 and 2
+ * let xValue = map(mouseX, 0, width, 0, 2);
+ * let yValue = exp(xValue);
+ *
+ * let y = map(yValue, 0, 8, height, 0);
+ *
+ * let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
+ * stroke(150);
+ * line(mouseX, y, mouseX, height);
+ * fill(0);
+ * text(legend, 5, 15);
+ * noStroke();
+ * ellipse(mouseX, y, 7, 7);
+ *
+ * // Draw the exp(x) curve,
+ * // over the domain of x from 0 to 2
+ * noFill();
+ * stroke(0);
+ * beginShape();
+ * for (let x = 0; x < width; x++) {
+ * xValue = map(x, 0, width, 0, 2);
+ * yValue = exp(xValue);
+ * y = map(yValue, 0, 8, height, 0);
+ * vertex(x, y);
+ * }
+ *
+ * endShape();
+ * line(0, 0, 0, height);
+ * line(0, height - 1, width, height - 1);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * //Get the floor of the mapped number.
+ * let bx = floor(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ * function setup() {
+ * background(200);
+ * let a = 20;
+ * let b = 80;
+ * let c = lerp(a, b, 0.2);
+ * let d = lerp(a, b, 0.5);
+ * let e = lerp(a, b, 0.8);
+ *
+ * let y = 50;
+ *
+ * strokeWeight(5);
+ * stroke(0); // Draw the original points in black
+ * point(a, y);
+ * point(b, y);
+ *
+ * stroke(100); // Draw the lerp points in gray
+ * point(c, y);
+ * point(d, y);
+ * point(e, y);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let maxX = 2.8;
+ * let maxY = 1.5;
+ *
+ * // Compute the natural log of a value between 0 and maxX
+ * let xValue = map(mouseX, 0, width, 0, maxX);
+ * let yValue, y;
+ * if (xValue > 0) {
+ // Cannot take the log of a negative number.
+ * yValue = log(xValue);
+ * y = map(yValue, -maxY, maxY, height, 0);
+ *
+ * // Display the calculation occurring.
+ * let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
+ * stroke(150);
+ * line(mouseX, y, mouseX, height);
+ * fill(0);
+ * text(legend, 5, 15);
+ * noStroke();
+ * ellipse(mouseX, y, 7, 7);
+ * }
+ *
+ * // Draw the log(x) curve,
+ * // over the domain of x from 0 to maxX
+ * noFill();
+ * stroke(0);
+ * beginShape();
+ * for (let x = 0; x < width; x++) {
+ * xValue = map(x, 0, width, 0, maxX);
+ * yValue = log(xValue);
+ * y = map(yValue, -maxY, maxY, height, 0);
+ * vertex(x, y);
+ * }
+ * endShape();
+ * line(0, 0, 0, height);
+ * line(0, height / 2, width, height / 2);
+ * }
+ *
+ * function setup() {
+ * let x1 = 20;
+ * let x2 = 80;
+ * let y1 = 30;
+ * let y2 = 70;
+ *
+ * line(0, 0, x1, y1);
+ * print(mag(x1, y1)); // Prints "36.05551275463989"
+ * line(0, 0, x2, y1);
+ * print(mag(x2, y1)); // Prints "85.44003745317531"
+ * line(0, 0, x1, y2);
+ * print(mag(x1, y2)); // Prints "72.80109889280519"
+ * line(0, 0, x2, y2);
+ * print(mag(x2, y2)); // Prints "106.3014581273465"
+ * }
+ *
+ * let value = 25;
+ * let m = map(value, 0, 100, 0, width);
+ * ellipse(m, 50, 10, 10);
+
+ * function setup() {
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * let x1 = map(mouseX, 0, width, 25, 75);
+ * ellipse(x1, 25, 25, 25);
+ * //This ellipse is constrained to the 0-100 range
+ * //after setting withinBounds to true
+ * let x2 = map(mouseX, 0, width, 0, 100, true);
+ * ellipse(x2, 75, 25, 25);
+ * }
+
+ * function setup() {
+ * // Change the elements in the array and run the sketch
+ * // to show how max() works!
+ * let numArray = [2, 1, 5, 4, 8, 9];
+ * fill(0);
+ * noStroke();
+ * text('Array Elements', 0, 10);
+ * // Draw all numbers in the array
+ * let spacing = 15;
+ * let elemsY = 25;
+ * for (let i = 0; i < numArray.length; i++) {
+ * text(numArray[i], i * spacing, elemsY);
+ * }
+ * let maxX = 33;
+ * let maxY = 80;
+ * // Draw the Maximum value in the array.
+ * textSize(32);
+ * text(max(numArray), maxX, maxY);
+ * }
+ *
+ * function setup() {
+ * // Change the elements in the array and run the sketch
+ * // to show how min() works!
+ * let numArray = [2, 1, 5, 4, 8, 9];
+ * fill(0);
+ * noStroke();
+ * text('Array Elements', 0, 10);
+ * // Draw all numbers in the array
+ * let spacing = 15;
+ * let elemsY = 25;
+ * for (let i = 0; i < numArray.length; i++) {
+ * text(numArray[i], i * spacing, elemsY);
+ * }
+ * let maxX = 33;
+ * let maxY = 80;
+ * // Draw the Minimum value in the array.
+ * textSize(32);
+ * text(min(numArray), maxX, maxY);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let currentNum = mouseX;
+ * let lowerBound = 0;
+ * let upperBound = width; //100;
+ * let normalized = norm(currentNum, lowerBound, upperBound);
+ * let lineY = 70;
+ * stroke(3);
+ * line(0, lineY, width, lineY);
+ * //Draw an ellipse mapped to the non-normalized value.
+ * noStroke();
+ * fill(50);
+ * let s = 7; // ellipse size
+ * ellipse(currentNum, lineY, s, s);
+ *
+ * // Draw the guide
+ * let guideY = lineY + 15;
+ * text('0', 0, guideY);
+ * textAlign(RIGHT);
+ * text('100', width, guideY);
+ *
+ * // Draw the normalized value
+ * textAlign(LEFT);
+ * fill(0);
+ * textSize(32);
+ * let normalY = 40;
+ * let normalX = 20;
+ * text(normalized, normalX, normalY);
+ * }
+ *
+ * function setup() {
+ * //Exponentially increase the size of an ellipse.
+ * let eSize = 3; // Original Size
+ * let eLoc = 10; // Original Location
+ *
+ * ellipse(eLoc, eLoc, eSize, eSize);
+ *
+ * ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));
+ *
+ * ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));
+ *
+ * ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
+ * }
+ *
+ * let x = round(3.7);
+ * text(x, width / 2, height / 2);
+ *
+ * let x = round(12.782383, 2);
+ * text(x, width / 2, height / 2);
+ *
+ * function draw() {
+ * background(200);
+ * //map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * // Round the mapped number.
+ * let bx = round(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let eSize = 7;
+ * let x1 = map(mouseX, 0, width, 0, 10);
+ * let y1 = 80;
+ * let x2 = sq(x1);
+ * let y2 = 20;
+ *
+ * // Draw the non-squared.
+ * line(0, y1, width, y1);
+ * ellipse(x1, y1, eSize, eSize);
+ *
+ * // Draw the squared.
+ * line(0, y2, width, y2);
+ * ellipse(x2, y2, eSize, eSize);
+ *
+ * // Draw dividing line.
+ * stroke(100);
+ * line(0, height / 2, width, height / 2);
+ *
+ * // Draw text.
+ * let spacing = 15;
+ * noStroke();
+ * fill(0);
+ * text('x = ' + x1, 0, y1 + spacing);
+ * text('sq(x) = ' + x2, 0, y2 + spacing);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let eSize = 7;
+ * let x1 = mouseX;
+ * let y1 = 80;
+ * let x2 = sqrt(x1);
+ * let y2 = 20;
+ *
+ * // Draw the non-squared.
+ * line(0, y1, width, y1);
+ * ellipse(x1, y1, eSize, eSize);
+ *
+ * // Draw the squared.
+ * line(0, y2, width, y2);
+ * ellipse(x2, y2, eSize, eSize);
+ *
+ * // Draw dividing line.
+ * stroke(100);
+ * line(0, height / 2, width, height / 2);
+ *
+ * // Draw text.
+ * noStroke();
+ * fill(0);
+ * let spacing = 15;
+ * text('x = ' + x1, 0, y1 + spacing);
+ * text('sqrt(x) = ' + x2, 0, y2 + spacing);
+ * }
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * fill(0);
+ * text(7345.73472742, 0, 50);
+ * text(fract(7345.73472742), 0, 100);
+ * text(1.4215e-15, 150, 50);
+ * text(fract(1.4215e-15), 150, 100);
+ * }
+ *
+ *
+ * let v1;
+ * function setup() {
+ * createCanvas(100, 100);
+ * stroke(255, 0, 255);
+ * v1 = createVector(width / 2, height / 2);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * line(v1.x, v1.y, mouseX, mouseY);
+ * }
+ *
+ * let xoff = 0.0;
+ *
+ * function draw() {
+ * background(204);
+ * xoff = xoff + 0.01;
+ * let n = noise(xoff) * width;
+ * line(n, 0, n, height);
+ * }
+ *
+ * let noiseScale=0.02;
+ *
+ * function draw() {
+ * background(0);
+ * for (let x=0; x < width; x++) {
+ * let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
+ * stroke(noiseVal*255);
+ * line(x, mouseY+noiseVal*80, x, height);
+ * }
+ * }
+ *
+ *
+ * let noiseVal;
+ * let noiseScale = 0.02;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * for (let y = 0; y < height; y++) {
+ * for (let x = 0; x < width / 2; x++) {
+ * noiseDetail(2, 0.2);
+ * noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
+ * stroke(noiseVal * 255);
+ * point(x, y);
+ * noiseDetail(8, 0.65);
+ * noiseVal = noise(
+ * (mouseX + x + width / 2) * noiseScale,
+ * (mouseY + y) * noiseScale
+ * );
+ * stroke(noiseVal * 255);
+ * point(x + width / 2, y);
+ * }
+ * }
+ * }
+ *
+ * let xoff = 0.0;
+ *
+ * function setup() {
+ * noiseSeed(99);
+ * stroke(0, 10);
+ * }
+ *
+ * function draw() {
+ * xoff = xoff + .01;
+ * let n = noise(xoff) * width;
+ * line(n, 0, n, height);
+ * }
+ *
+ *
+ * let v1 = createVector(40, 50);
+ * let v2 = createVector(40, 50);
+ *
+ * ellipse(v1.x, v1.y, 50, 50);
+ * ellipse(v2.x, v2.y, 50, 50);
+ * v1.add(v2);
+ * ellipse(v1.x, v1.y, 50, 50);
+ *
+ *
+ * function setup() {
+ * let v = createVector(20, 30);
+ * print(String(v)); // prints "p5.Vector Object : [20, 30, 0]"
+ * }
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text(v1.toString(), 10, 25, 90, 75);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * let v = createVector(1, 2, 3);
+ * v.set(4, 5, 6); // Sets vector to [4, 5, 6]
+ *
+ * let v1 = createVector(0, 0, 0);
+ * let arr = [1, 2, 3];
+ * v1.set(arr); // Sets vector to [1, 2, 3]
+ * }
+ *
+ *
+ * let v0, v1;
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * v0 = createVector(0, 0);
+ * v1 = createVector(50, 50);
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * drawArrow(v0, v1, 'black');
+ * v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));
+ *
+ * noStroke();
+ * text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = v1.copy();
+ * print(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);
+ * // Prints "true"
+ *
+ *
+ * let v = createVector(1, 2, 3);
+ * v.add(4, 5, 6);
+ * // v's components are set to [5, 7, 9]
+ *
+ *
+ * let v = createVector(1, 2, 3);
+ * // Provide arguments as an array
+ * let arr = [4, 5, 6];
+ * v.add(arr);
+ * // v's components are set to [5, 7, 9]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * let v3 = p5.Vector.add(v1, v2);
+ * // v3 has components [3, 5, 7]
+ * print(v3);
+ *
+ *
+ * // red vector + blue vector = purple vector
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(-30, 20);
+ * drawArrow(v1, v2, 'blue');
+ *
+ * let v3 = p5.Vector.add(v1, v2);
+ * drawArrow(v0, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(3, 4, 5);
+ * v.rem(2, 3, 4);
+ * // v's components are set to [1, 1, 1]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(3, 4, 5);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * let v3 = p5.Vector.rem(v1, v2);
+ * // v3 has components [1, 1, 1]
+ * print(v3);
+ *
+ *
+ * let v = createVector(4, 5, 6);
+ * v.sub(1, 1, 1);
+ * // v's components are set to [3, 4, 5]
+ *
+ *
+ * let v = createVector(4, 5, 6);
+ * // Provide arguments as an array
+ * let arr = [1, 1, 1];
+ * v.sub(arr);
+ * // v's components are set to [3, 4, 5]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(2, 3, 4);
+ * let v2 = createVector(1, 2, 3);
+ *
+ * let v3 = p5.Vector.sub(v1, v2);
+ * // v3 has components [1, 1, 1]
+ * print(v3);
+ *
+ *
+ * // red vector - blue vector = purple vector
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(70, 50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * let v3 = p5.Vector.sub(v1, v2);
+ * drawArrow(v2, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(1, 2, 3);
+ * v.mult(2);
+ * // v's components are set to [2, 4, 6]
+ *
+ *
+ * let v0 = createVector(1, 2, 3);
+ * let v1 = createVector(2, 3, 4);
+ * v0.mult(v1); // v0's components are set to [2, 6, 12]
+ *
+ *
+ * let v0 = createVector(1, 2, 3);
+ * // Provide arguments as an array
+ * let arr = [2, 3, 4];
+ * v0.mult(arr); // v0's components are set to [2, 6, 12]
+ *
+ *
+ * let v0 = createVector(1, 2, 3);
+ * let v1 = createVector(2, 3, 4);
+ * const result = p5.Vector.mult(v0, v1);
+ * print(result); // result's components are set to [2, 6, 12]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = p5.Vector.mult(v1, 2);
+ * // v2 has components [2, 4, 6]
+ * print(v2);
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(25, -25);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let num = map(mouseX, 0, width, -2, 2, true);
+ * let v2 = p5.Vector.mult(v1, num);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('multiplied by ' + num.toFixed(2), 5, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(6, 4, 2);
+ * v.div(2); //v's components are set to [3, 2, 1]
+ *
+ *
+ * let v0 = createVector(9, 4, 2);
+ * let v1 = createVector(3, 2, 4);
+ * v0.div(v1); // v0's components are set to [3, 2, 0.5]
+ *
+ *
+ * let v0 = createVector(9, 4, 2);
+ * // Provide arguments as an array
+ * let arr = [3, 2, 4];
+ * v0.div(arr); // v0's components are set to [3, 2, 0.5]
+ *
+ *
+ * let v0 = createVector(9, 4, 2);
+ * let v1 = createVector(3, 2, 4);
+ * let result = p5.Vector.div(v0, v1);
+ * print(result); // result's components are set to [3, 2, 0.5]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(6, 4, 2);
+ * let v2 = p5.Vector.div(v1, 2);
+ * // v2 has components [3, 2, 1]
+ * print(v2);
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 100);
+ * let v1 = createVector(50, -50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let num = map(mouseX, 0, width, 10, 0.5, true);
+ * let v2 = p5.Vector.div(v1, num);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('divided by ' + num.toFixed(2), 10, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(20.0, 30.0, 40.0);
+ * let m = v.mag();
+ * print(m); // Prints "53.85164807134504"
+ *
+ *
+ * // Static method
+ * let v1 = createVector(6, 4, 2);
+ * print(v1.magSq()); // Prints "56"
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * print(v1.dot(v2)); // Prints "20"
+ *
+ *
+ * //Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(3, 2, 1);
+ * print(p5.Vector.dot(v1, v2)); // Prints "10"
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(1, 2, 3);
+ *
+ * let v = v1.cross(v2); // v's components are [0, 0, 0]
+ * print(v);
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let crossProduct = p5.Vector.cross(v1, v2);
+ * // crossProduct has components [0, 0, 1]
+ * print(crossProduct);
+ *
+ *
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let distance = v1.dist(v2); // distance is 1.4142...
+ * print(distance);
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let distance = p5.Vector.dist(v1, v2);
+ * // distance is 1.4142...
+ * print(distance);
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ *
+ * let v1 = createVector(70, 50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.normalize();
+ * // v's components are set to
+ * // [0.4454354, 0.8908708, 0.089087084]
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ * v1.normalize();
+ * drawArrow(v0, v1.mult(35), 'blue');
+ *
+ * noFill();
+ * ellipse(50, 50, 35 * 2);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.limit(5);
+ * // v's components are set to
+ * // [2.2271771, 4.4543543, 0.4454354]
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ * drawArrow(v0, v1.limit(35), 'blue');
+ *
+ * noFill();
+ * ellipse(50, 50, 35 * 2);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.setMag(10);
+ * // v's components are set to [6.0, 8.0, 0.0]
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(50, 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ *
+ * let length = map(mouseX, 0, width, 0, 141, true);
+ * v1.setMag(length);
+ * drawArrow(v0, v1, 'blue');
+ *
+ * noStroke();
+ * text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * let v1 = createVector(30, 50);
+ * print(v1.heading()); // 1.0303768265243125
+ *
+ * v1 = createVector(40, 50);
+ * print(v1.heading()); // 0.8960553845713439
+ *
+ * v1 = createVector(30, 70);
+ * print(v1.heading()); // 1.1659045405098132
+ * }
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'black');
+ *
+ * let myHeading = v1.heading();
+ * noStroke();
+ * text(
+ * 'vector heading: ' +
+ * myHeading.toFixed(2) +
+ * ' radians or ' +
+ * degrees(myHeading).toFixed(2) +
+ * ' degrees',
+ * 10,
+ * 50,
+ * 90,
+ * 50
+ * );
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(10.0, 20.0);
+ * // v has components [10.0, 20.0, 0.0]
+ * v.rotate(HALF_PI);
+ * // v's components are set to [-20.0, 9.999999, 0.0]
+ *
+ *
+ * let angle = 0;
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(50, 0);
+ *
+ * drawArrow(v0, v1.rotate(angle), 'black');
+ * angle += 0.01;
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let angle = v1.angleBetween(v2);
+ * // angle is PI/2
+ * print(angle);
+ *
+ *
+ * function draw() {
+ * background(240);
+ * let v0 = createVector(50, 50);
+ *
+ * let v1 = createVector(50, 0);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX - 50, mouseY - 50);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * let angleBetween = v1.angleBetween(v2);
+ * noStroke();
+ * text(
+ * 'angle between: ' +
+ * angleBetween.toFixed(2) +
+ * ' radians or ' +
+ * degrees(angleBetween).toFixed(2) +
+ * ' degrees',
+ * 10,
+ * 50,
+ * 90,
+ * 50
+ * );
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(1, 1, 0);
+ *
+ * v.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]
+ *
+ *
+ * let v1 = createVector(0, 0, 0);
+ * let v2 = createVector(100, 100, 0);
+ *
+ * let v3 = p5.Vector.lerp(v1, v2, 0.5);
+ * // v3 has components [50,50,0]
+ * print(v3);
+ *
+ *
+ * let step = 0.01;
+ * let amount = 0;
+ *
+ * function draw() {
+ * background(240);
+ * let v0 = createVector(0, 0);
+ *
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(90, 90);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * if (amount > 1 || amount < 0) {
+ * step *= -1;
+ * }
+ * amount += step;
+ * let v3 = p5.Vector.lerp(v1, v2, amount);
+ *
+ * drawArrow(v0, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward
+ * let n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)
+ * v.reflect(n); // v is reflected about the surface normal n. v's components are now set to [4, -6]
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let n = createVector(0, -30);
+ * drawArrow(v1, n, 'blue');
+ *
+ * let r = v1.copy();
+ * r.reflect(n);
+ * drawArrow(v1, r, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * let v = createVector(20, 30);
+ * print(v.array()); // Prints : Array [20, 30, 0]
+ * }
+ *
+ *
+ * let v = createVector(10.0, 20.0, 30.0);
+ * let f = v.array();
+ * print(f[0]); // Prints "10.0"
+ * print(f[1]); // Prints "20.0"
+ * print(f[2]); // Prints "30.0"
+ *
+ *
+ * let v1 = createVector(5, 10, 20);
+ * let v2 = createVector(5, 10, 20);
+ * let v3 = createVector(13, 10, 19);
+ *
+ * print(v1.equals(v2.x, v2.y, v2.z)); // true
+ * print(v1.equals(v3.x, v3.y, v3.z)); // false
+ *
+ *
+ * let v1 = createVector(10.0, 20.0, 30.0);
+ * let v2 = createVector(10.0, 20.0, 30.0);
+ * let v3 = createVector(0.0, 0.0, 0.0);
+ * print(v1.equals(v2)); // true
+ * print(v1.equals(v3)); // false
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a variable, proportional to the mouseX,
+ * // varying from 0-360, to represent an angle in degrees.
+ * let myDegrees = map(mouseX, 0, width, 0, 360);
+ *
+ * // Display that variable in an onscreen text.
+ * // (Note the nfc() function to truncate additional decimal places,
+ * // and the "\xB0" character for the degree symbol.)
+ * let readout = 'angle = ' + nfc(myDegrees, 1) + '\xB0';
+ * noStroke();
+ * fill(0);
+ * text(readout, 5, 15);
+ *
+ * // Create a p5.Vector using the fromAngle function,
+ * // and extract its x and y components.
+ * let v = p5.Vector.fromAngle(radians(myDegrees), 30);
+ * let vx = v.x;
+ * let vy = v.y;
+ *
+ * push();
+ * translate(width / 2, height / 2);
+ * noFill();
+ * stroke(150);
+ * line(0, 0, 30, 0);
+ * stroke(0);
+ * line(0, 0, vx, vy);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * fill(255);
+ * noStroke();
+ * }
+ * function draw() {
+ * background(255);
+ *
+ * let t = millis() / 1000;
+ *
+ * // add three point lights
+ * pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));
+ * pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));
+ * pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));
+ *
+ * sphere(35);
+ * }
+ *
+ *
+ * let v = p5.Vector.random2D();
+ * // May make v's attributes something like:
+ * // [0.61554617, -0.51195765, 0.0] or
+ * // [-0.4695841, -0.14366731, 0.0] or
+ * // [0.6091097, -0.22805278, 0.0]
+ * print(v);
+ *
+ *
+ * function setup() {
+ * frameRate(1);
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = p5.Vector.random2D();
+ * drawArrow(v0, v1.mult(50), 'black');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = p5.Vector.random3D();
+ * // May make v's attributes something like:
+ * // [0.61554617, -0.51195765, 0.599168] or
+ * // [-0.4695841, -0.14366731, -0.8711202] or
+ * // [0.6091097, -0.22805278, -0.7595902]
+ * print(v);
+ *
+ *
+ * randomSeed(99);
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(0, 255);
+ * stroke(r);
+ * line(i, 0, i, 100);
+ * }
+ *
+ *
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(50);
+ * stroke(r * 5);
+ * line(50, i, 50 + r, i);
+ * }
+ *
+ *
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(-50, 50);
+ * line(50, i, 50 + r, i);
+ * }
+ *
+ *
+ * // Get a random element from an array using the random(Array) syntax
+ * let words = ['apple', 'bear', 'cat', 'dog'];
+ * let word = random(words); // select random word
+ * text(word, 10, 50); // draw the word
+ *
+ *
+ * for (let y = 0; y < 100; y++) {
+ * let x = randomGaussian(50, 15);
+ * line(50, y, x, y);
+ * }
+ *
+ *
+ * let distribution = new Array(360);
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * for (let i = 0; i < distribution.length; i++) {
+ * distribution[i] = floor(randomGaussian(0, 15));
+ * }
+ * }
+ *
+ * function draw() {
+ * background(204);
+ *
+ * translate(width / 2, width / 2);
+ *
+ * for (let i = 0; i < distribution.length; i++) {
+ * rotate(TWO_PI / distribution.length);
+ * stroke(0);
+ * let dist = abs(distribution[i]);
+ * line(0, 0, dist, 0);
+ * }
+ * }
+ *
+ *
+ * let a = PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ * // Prints: "3.1415927 : -1.0 : 3.1415927"
+ * print(a + ' : ' + c + ' : ' + ac);
+ *
+ *
+ * let a = PI + PI / 4.0;
+ * let c = cos(a);
+ * let ac = acos(c);
+ * // Prints: "3.926991 : -0.70710665 : 2.3561943"
+ * print(a + ' : ' + c + ' : ' + ac);
+ *
+ *
+ * let a = PI / 3.0;
+ * let s = sin(a);
+ * let as = asin(s);
+ * // Prints: "1.0471975 : 0.86602540 : 1.0471975"
+ * print(a + ' : ' + s + ' : ' + as);
+ *
+ *
+ * let a = PI + PI / 3.0;
+ * let s = sin(a);
+ * let as = asin(s);
+ * // Prints: "4.1887902 : -0.86602540 : -1.0471975"
+ * print(a + ' : ' + s + ' : ' + as);
+ *
+ *
+ * let a = PI / 3.0;
+ * let t = tan(a);
+ * let at = atan(t);
+ * // Prints: "1.0471975 : 1.7320508 : 1.0471975"
+ * print(a + ' : ' + t + ' : ' + at);
+ *
+ *
+ * let a = PI + PI / 3.0;
+ * let t = tan(a);
+ * let at = atan(t);
+ * // Prints: "4.1887902 : 1.7320508 : 1.0471975"
+ * print(a + ' : ' + t + ' : ' + at);
+ *
+ *
+ * function draw() {
+ * background(204);
+ * translate(width / 2, height / 2);
+ * let a = atan2(mouseY - height / 2, mouseX - width / 2);
+ * rotate(a);
+ * rect(-30, -5, 60, 10);
+ * }
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 25.0;
+ * for (let i = 0; i < 25; i++) {
+ * line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 25.0;
+ * for (let i = 0; i < 25; i++) {
+ * line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 50.0;
+ * for (let i = 0; i < 100; i = i + 2) {
+ * line(i, 50, i, 50 + tan(a) * 2.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ * @alt
+ * vertical black lines end down and up from center to form spike pattern
+ */ cov_2lh330545e.s[13]++;
+ _main.default.prototype.tan = function(angle) {
+ cov_2lh330545e.f[6]++;
+ cov_2lh330545e.s[14]++;
+ return Math.tan(this._toRadians(angle));
+ };
+
+ /**
+ * Converts a radian measurement to its corresponding value in degrees.
+ * Radians and degrees are two ways of measuring the same thing. There are
+ * 360 degrees in a circle and 2*PI radians in a circle. For example,
+ * 90° = PI/2 = 1.5707964. This function does not take into account the
+ * current angleMode.
+ *
+ * @method degrees
+ * @param {Number} radians the radians value to convert to degrees
+ * @return {Number} the converted angle
+ *
+ * @example
+ *
+ * let rad = PI / 4;
+ * let deg = degrees(rad);
+ * print(rad + ' radians is ' + deg + ' degrees');
+ * // Prints: 0.7853981633974483 radians is 45 degrees
+ *
+ *
+ * let deg = 45.0;
+ * let rad = radians(deg);
+ * print(deg + ' degrees is ' + rad + ' radians');
+ * // Prints: 45 degrees is 0.7853981633974483 radians
+ *
+ *
+ * function draw() {
+ * background(204);
+ * angleMode(DEGREES); // Change the mode to DEGREES
+ * let a = atan2(mouseY - height / 2, mouseX - width / 2);
+ * translate(width / 2, height / 2);
+ * push();
+ * rotate(a);
+ * rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
+ * pop();
+ * angleMode(RADIANS); // Change the mode to RADIANS
+ * rotate(a); // variable a stays the same
+ * rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
+ * }
+ *
+ *
+ * textSize(16);
+ * textAlign(RIGHT);
+ * text('ABCD', 50, 30);
+ * textAlign(CENTER);
+ * text('EFGH', 50, 50);
+ * textAlign(LEFT);
+ * text('IJKL', 50, 70);
+ *
+ *
+ * textSize(16);
+ * strokeWeight(0.5);
+ *
+ * line(0, 12, width, 12);
+ * textAlign(CENTER, TOP);
+ * text('TOP', 0, 12, width);
+ *
+ * line(0, 37, width, 37);
+ * textAlign(CENTER, CENTER);
+ * text('CENTER', 0, 37, width);
+ *
+ * line(0, 62, width, 62);
+ * textAlign(CENTER, BASELINE);
+ * text('BASELINE', 0, 62, width);
+ *
+ * line(0, 87, width, 87);
+ * textAlign(CENTER, BOTTOM);
+ * text('BOTTOM', 0, 87, width);
+ *
+ *
+ * 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);
+ *
+ *
+ * textSize(12);
+ * text('Font Size 12', 10, 30);
+ * textSize(14);
+ * text('Font Size 14', 10, 60);
+ * textSize(16);
+ * text('Font Size 16', 10, 90);
+ *
+ *
+ * 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);
+ *
+ *
+ * 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);
+ *
+ *
+ * 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
+ *
+ *
+ * let base = height * 0.75;
+ * let scalar = 0.8; // Different for each font
+ *
+ * textSize(32); // Set initial text size
+ * let desc = textDescent() * scalar; // Calc ascent
+ * line(0, base + desc, width, base + desc);
+ * text('dp', 0, base); // Draw text on baseline
+ *
+ * textSize(64); // Increase text size
+ * desc = textDescent() * scalar; // Recalc ascent
+ * line(40, base + desc, width, base + desc);
+ * text('dp', 40, base); // Draw text on baseline
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * fill('#ED225D');
+ * textFont(myFont);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ * }
+ *
+ * function setup() {
+ * loadFont('assets/inconsolata.otf', drawText);
+ * }
+ *
+ * function drawText(font) {
+ * fill('#ED225D');
+ * textFont(font, 36);
+ * text('p5*js', 10, 50);
+ * }
+ *
+ * function preload() {
+ * loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * let myDiv = createDiv('hello there');
+ * myDiv.style('font-family', 'Inconsolata');
+ * }
+ *
+ * textSize(32);
+ * text('word', 10, 30);
+ * fill(0, 102, 153);
+ * text('word', 10, 60);
+ * fill(0, 102, 153, 51);
+ * text('word', 10, 90);
+ *
+ *
+ * let s = 'The quick brown fox jumped over the lazy dog.';
+ * fill(50);
+ * text(s, 10, 10, 70, 80); // Text wraps within text box
+ *
+ *
+ * let inconsolata;
+ * function preload() {
+ * inconsolata = loadFont('assets/inconsolata.otf');
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * textFont(inconsolata);
+ * textSize(width / 3);
+ * textAlign(CENTER, CENTER);
+ * }
+ * function draw() {
+ * background(0);
+ * let time = millis();
+ * rotateX(time / 1000);
+ * rotateZ(time / 1234);
+ * text('p5.js', 0, 0);
+ * }
+ *
+ *
+ * fill(0);
+ * textSize(12);
+ * textFont('Georgia');
+ * text('Georgia', 12, 30);
+ * textFont('Helvetica');
+ * text('Helvetica', 12, 60);
+ *
+ *
+ * let fontRegular, fontItalic, fontBold;
+ * function preload() {
+ * fontRegular = loadFont('assets/Regular.otf');
+ * fontItalic = loadFont('assets/Italic.ttf');
+ * fontBold = loadFont('assets/Bold.ttf');
+ * }
+ * function setup() {
+ * background(210);
+ * fill(0)
+ .strokeWeight(0)
+ .textSize(10);
+ * textFont(fontRegular);
+ * text('Font Style Normal', 10, 30);
+ * textFont(fontItalic);
+ * text('Font Style Italic', 10, 50);
+ * textFont(fontBold);
+ * text('Font Style Bold', 10, 70);
+ * }
+ *
+ *
+ * let font;
+ * let textString = 'Lorem ipsum dolor sit amet.';
+ * function preload() {
+ * font = loadFont('./assets/Regular.otf');
+ * }
+ * function setup() {
+ * background(210);
+ *
+ * let bbox = font.textBounds(textString, 10, 30, 12);
+ * fill(255);
+ * stroke(0);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ * fill(0);
+ * noStroke();
+ *
+ * textFont(font);
+ * textSize(12);
+ * text(textString, 10, 30);
+ * }
+ *
+ *
+ * let font;
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * let points;
+ * let bounds;
+ * function setup() {
+ * createCanvas(100, 100);
+ * stroke(0);
+ * fill(255, 104, 204);
+ *
+ * points = font.textToPoints('p5', 0, 0, 10, {
+ * sampleFactor: 5,
+ * simplifyThreshold: 0
+ * });
+ * bounds = font.textBounds(' p5 ', 0, 0, 10);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * beginShape();
+ * translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);
+ * for (let i = 0; i < points.length; i++) {
+ * let p = points[i];
+ * vertex(
+ * p.x * width / bounds.w +
+ * sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,
+ * p.y * height / bounds.h
+ * );
+ * }
+ * endShape(CLOSE);
+ * }
+ *
+ *
+ * function setup() {
+ * let myArray = ['Mango', 'Apple', 'Papaya'];
+ * print(myArray); // ['Mango', 'Apple', 'Papaya']
+ *
+ * append(myArray, 'Peach');
+ * print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+ * }
+ *
+ * let src = ['A', 'B', 'C'];
+ * let dst = [1, 2, 3];
+ * let srcPosition = 1;
+ * let dstPosition = 0;
+ * let length = 2;
+ *
+ * print(src); // ['A', 'B', 'C']
+ * print(dst); // [ 1 , 2 , 3 ]
+ *
+ * arrayCopy(src, srcPosition, dst, dstPosition, length);
+ * print(dst); // ['B', 'C', 3]
+ *
+ * function setup() {
+ * let arr1 = ['A', 'B', 'C'];
+ * let arr2 = [1, 2, 3];
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1,2,3]
+ *
+ * let arr3 = concat(arr1, arr2);
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1, 2, 3]
+ * print(arr3); // ['A','B','C', 1, 2, 3]
+ * }
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A','B','C']
+ *
+ * reverse(myArray);
+ * print(myArray); // ['C','B','A']
+ * }
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A', 'B', 'C']
+ * let newArray = shorten(myArray);
+ * print(myArray); // ['A','B','C']
+ * print(newArray); // ['A','B']
+ * }
+ *
+ * function setup() {
+ * let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
+ * print(regularArr);
+ * shuffle(regularArr, true); // force modifications to passed array
+ * print(regularArr);
+ *
+ * // By default shuffle() returns a shuffled cloned array:
+ * let newArr = shuffle(regularArr);
+ * print(regularArr);
+ * print(newArr);
+ * }
+ *
+ * function setup() {
+ * let words = ['banana', 'apple', 'pear', 'lime'];
+ * print(words); // ['banana', 'apple', 'pear', 'lime']
+ * let count = 4; // length of array
+ *
+ * words = sort(words, count);
+ * print(words); // ['apple', 'banana', 'lime', 'pear']
+ * }
+ *
+ * function setup() {
+ * let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+ * print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+ * let count = 5; // Less than the length of the array
+ *
+ * numbers = sort(numbers, count);
+ * print(numbers); // [1,2,5,6,14,9,8,12]
+ * }
+ *
+ * function setup() {
+ * let myArray = [0, 1, 2, 3, 4];
+ * let insArray = ['A', 'B', 'C'];
+ * print(myArray); // [0, 1, 2, 3, 4]
+ * print(insArray); // ['A','B','C']
+ *
+ * splice(myArray, insArray, 3);
+ * print(myArray); // [0,1,2,'A','B','C',3,4]
+ * }
+ *
+ * function setup() {
+ * let myArray = [1, 2, 3, 4, 5];
+ * print(myArray); // [1, 2, 3, 4, 5]
+ *
+ * let sub1 = subset(myArray, 0, 3);
+ * let sub2 = subset(myArray, 2, 2);
+ * print(sub1); // [1,2,3]
+ * print(sub2); // [3,4]
+ * }
+ *
+ * let str = '20';
+ * let diameter = float(str);
+ * ellipse(width / 2, height / 2, diameter, diameter);
+ *
+ * print(float('10.31')); // 10.31
+ * print(float('Infinity')); // Infinity
+ * print(float('-Infinity')); // -Infinity
+ *
+ * print(int('10')); // 10
+ * print(int(10.31)); // 10
+ * print(int(-10)); // -10
+ * print(int(true)); // 1
+ * print(int(false)); // 0
+ * print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
+ * print(int(Infinity)); // Infinity
+ * print(int('-Infinity')); // -Infinity
+ *
+ * print(str('10')); // "10"
+ * print(str(10.31)); // "10.31"
+ * print(str(-10)); // "-10"
+ * print(str(true)); // "true"
+ * print(str(false)); // "false"
+ * print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
+ *
+ * print(boolean(0)); // false
+ * print(boolean(1)); // true
+ * print(boolean('true')); // true
+ * print(boolean('abcd')); // false
+ * print(boolean([0, 12, 'true'])); // [false, true, true]
+ *
+ * print(byte(127)); // 127
+ * print(byte(128)); // -128
+ * print(byte(23.4)); // 23
+ * print(byte('23.4')); // 23
+ * print(byte('hello')); // NaN
+ * print(byte(true)); // 1
+ * print(byte([0, 255, '100'])); // [0, -1, 100]
+ *
+ * print(char(65)); // "A"
+ * print(char('65')); // "A"
+ * print(char([65, 66, 67])); // [ "A", "B", "C" ]
+ * print(join(char([65, 66, 67]), '')); // "ABC"
+ *
+ * print(unchar('A')); // 65
+ * print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
+ * print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
+ *
+ * print(hex(255)); // "000000FF"
+ * print(hex(255, 6)); // "0000FF"
+ * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
+ * print(Infinity); // "FFFFFFFF"
+ * print(-Infinity); // "00000000"
+ *
+ * print(unhex('A')); // 10
+ * print(unhex('FF')); // 255
+ * print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
+ *
+ * let array = ['Hello', 'world!'];
+ * let separator = ' ';
+ * let message = join(array, separator);
+ * text(message, 5, 50);
+ *
+ *
+ * let string = 'Hello p5js*!';
+ * let regexp = 'p5js\\*';
+ * let m = match(string, regexp);
+ * text(m, 5, 50);
+ *
+ *
+ * let string = 'Hello p5js*! Hello world!';
+ * let regexp = 'Hello';
+ * matchAll(string, regexp);
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/fonts/inconsolata.ttf');
+ * }
+ * function setup() {
+ * background(200);
+ * let num1 = 321;
+ * let num2 = -1321;
+ *
+ * noStroke();
+ * fill(0);
+ * textFont(myFont);
+ * textSize(22);
+ *
+ * text(nf(num1, 4, 2), 10, 30);
+ * text(nf(num2, 4, 2), 10, 80);
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/fonts/inconsolata.ttf');
+ * }
+ * function setup() {
+ * background(200);
+ * let num1 = 321;
+ * let num2 = -1321;
+ *
+ * noStroke();
+ * fill(0);
+ * textFont(myFont);
+ * textSize(22);
+ *
+ * // nfs() aligns num1 (positive number) with num2 (negative number) by
+ * // adding a blank space in front of the num1 (positive number)
+ * // [left = 4] in num1 add one 0 in front, to align the digits with num2
+ * // [right = 2] in num1 and num2 adds two 0's after both numbers
+ * // To see the differences check the example of nf() too.
+ * text(nfs(num1, 4, 2), 10, 30);
+ * text(nfs(num2, 4, 2), 10, 80);
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ * }
+ *
+ *
+ * let names = 'Pat,Xio,Alex';
+ * let splitString = split(names, ',');
+ * text(splitString[0], 5, 30);
+ * text(splitString[1], 5, 50);
+ * text(splitString[2], 5, 70);
+ *
+ *
+ * function setup() {
+ * let myStr = 'Mango, Banana, Lime';
+ * let myStrArr = splitTokens(myStr, ',');
+ *
+ * print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
+ * }
+ *
+ *
+ * let string = trim(' No new lines\n ');
+ * text(string + ' here', 2, 50);
+ *
+ *
+ * let d = day();
+ * text('Current day: \n' + d, 5, 50);
+ *
+ *
+ * let h = hour();
+ * text('Current hour:\n' + h, 5, 50);
+ *
+ *
+ * let m = minute();
+ * text('Current minute: \n' + m, 5, 50);
+ *
+ *
+ * let millisecond = millis();
+ * text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
+ *
+ *
+ * let m = month();
+ * text('Current month: \n' + m, 5, 50);
+ *
+ *
+ * let s = second();
+ * text('Current second: \n' + s, 5, 50);
+ *
+ *
+ * let y = year();
+ * text('Current year: \n' + y, 5, 50);
+ *
+ *
+ * // draw a plane
+ * // with width 50 and height 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * plane(50, 50);
+ * }
+ *
+ *
+ * // draw a spinning box
+ * // with width, height and depth of 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(50);
+ * }
+ *
+ *
+ * // draw a sphere with radius 40
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * sphere(40);
+ * }
+ *
+ *
+ * let detailX;
+ * // slide to see how detailX works
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * sphere(40, detailX.value(), 16);
+ * }
+ *
+ *
+ * let detailY;
+ * // slide to see how detailY works
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * sphere(40, 16, detailY.value());
+ * }
+ *
+ *
+ * // draw a spinning cylinder
+ * // with radius 20 and height 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * cylinder(20, 50);
+ * }
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * cylinder(20, 75, detailX.value(), 1);
+ * }
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(1, 16, 1);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * cylinder(20, 75, 16, detailY.value());
+ * }
+ *
+ *
+ * // draw a spinning cone
+ * // with radius 40 and height 70
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * cone(40, 70);
+ * }
+ *
+ *
+ * // slide to see how detailx works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 16, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * cone(30, 65, detailX.value(), 16);
+ * }
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * cone(30, 65, 16, detailY.value());
+ * }
+ *
+ *
+ * // draw an ellipsoid
+ * // with radius 30, 40 and 40.
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * ellipsoid(30, 40, 40);
+ * }
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(2, 24, 12);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * ellipsoid(30, 40, 40, detailX.value(), 8);
+ * }
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(2, 24, 6);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 9);
+ * rotateY(millis() / 1000);
+ * ellipsoid(30, 40, 40, 12, detailY.value());
+ * }
+ *
+ *
+ * // draw a spinning torus
+ * // with ring radius 30 and tube radius 15
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * torus(30, 15);
+ * }
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * torus(30, 15, detailX.value(), 12);
+ * }
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * torus(30, 15, 16, detailY.value());
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * //draw a line
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * // Use fill instead of stroke to change the color of shape.
+ * fill(255, 0, 0);
+ * line(10, 10, 0, 60, 60, 20);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * rotateY(0.5);
+ * box(30, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // Press the spacebar to turn debugMode off!
+ * if (keyIsDown(32)) {
+ * noDebugMode();
+ * }
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(GRID);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(AXES);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(GRID, 100, 10, 0, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
+ * }
+ *
+ * function draw() {
+ * noStroke();
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // set the stroke color and weight for the grid!
+ * stroke(255, 0, 150);
+ * strokeWeight(0.8);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // Press the spacebar to turn debugMode off!
+ * if (keyIsDown(32)) {
+ * noDebugMode();
+ * }
+ * }
+ *
+ *
+ * createCanvas(100, 100, WEBGL);
+ * ambientLight(0);
+ * ambientMaterial(250);
+ * sphere(40);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(51);
+ * ambientLight(100); // white light
+ * ambientMaterial(255, 102, 94); // magenta material
+ * box(30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * shininess(20);
+ * ambientLight(50);
+ * specularColor(255, 0, 0);
+ * pointLight(255, 0, 0, 0, -50, 50);
+ * specularColor(0, 255, 0);
+ * pointLight(0, 255, 0, 0, 50, 50);
+ * specularMaterial(255);
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * //move your mouse to change light direction
+ * let dirX = (mouseX / width - 0.5) * 2;
+ * let dirY = (mouseY / height - 0.5) * 2;
+ * directionalLight(250, 250, 250, -dirX, -dirY, -1);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * //move your mouse to change light position
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * // to set the light position,
+ * // think of the world's coordinate as:
+ * // -width/2,-height/2 -------- width/2,-height/2
+ * // | |
+ * // | 0,0 |
+ * // | |
+ * // -width/2,height/2--------width/2,height/2
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * lights();
+ * rotateX(millis() / 1000);
+ * rotateY(millis() / 1000);
+ * rotateZ(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * }
+ * function draw() {
+ * background(0);
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * translate(-25, 0, 0);
+ * lightFalloff(1, 0, 0);
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * sphere(20);
+ * translate(50, 0, 0);
+ * lightFalloff(0.9, 0.01, 0);
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * sphere(20);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * //move your mouse to change light position
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * // to set the light position,
+ * // think of the world's coordinate as:
+ * // -width/2,-height/2 -------- width/2,-height/2
+ * // | |
+ * // | 0,0 |
+ * // | |
+ * // -width/2,height/2--------width/2,height/2
+ * ambientLight(50);
+ * spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ *
+ * ambientLight(150, 0, 0);
+ * translate(-25, 0, 0);
+ * ambientMaterial(250);
+ * sphere(20);
+ *
+ * noLights();
+ * ambientLight(0, 150, 0);
+ * translate(50, 0, 0);
+ * ambientMaterial(250);
+ * sphere(20);
+ * }
+ *
+ * .stl
, .obj
).
+ * @return {p5.Geometry} the p5.Geometry object
+ *
+ * @example
+ *
+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ * octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * model(octahedron);
+ * }
+ *
+ *
+ * //draw a spinning teapot
+ * let teapot;
+ *
+ * function preload() {
+ * // Load model with normalise parameter set to true
+ * teapot = loadModel('assets/teapot.obj', true);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * scale(0.4); // Scaled to make model fit into canvas
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * normalMaterial(); // For effect
+ * model(teapot);
+ * }
+ *
+ *
+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ * octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * model(octahedron);
+ * }
+ *
+ *
+ * let mandel;
+ * function preload() {
+ * // load the shader definitions from files
+ * mandel = loadShader('assets/shader.vert', 'assets/shader.frag');
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * // use the shader
+ * shader(mandel);
+ * noStroke();
+ * mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * }
+ *
+ * function draw() {
+ * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ * // the 'varying's are shared between both vertex & fragment shaders
+ * let varying = 'precision highp float; varying vec2 vPos;';
+ *
+ * // the vertex shader is called for each vertex
+ * let vs =
+ * varying +
+ * 'attribute vec3 aPosition;' +
+ * 'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';
+ *
+ * // the fragment shader is called for each pixel
+ * let fs =
+ * varying +
+ * 'uniform vec2 p;' +
+ * 'uniform float r;' +
+ * 'const int I = 500;' +
+ * 'void main() {' +
+ * ' vec2 c = p + vPos * r, z = c;' +
+ * ' float n = 0.0;' +
+ * ' for (int i = I; i > 0; i --) {' +
+ * ' if(z.x*z.x+z.y*z.y > 4.0) {' +
+ * ' n = float(i)/float(I);' +
+ * ' break;' +
+ * ' }' +
+ * ' z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +
+ * ' }' +
+ * ' gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +
+ * '}';
+ *
+ * let mandel;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // create and initialize the shader
+ * mandel = createShader(vs, fs);
+ * shader(mandel);
+ * noStroke();
+ *
+ * // 'p' is the center point of the Mandelbrot image
+ * mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * }
+ *
+ * function draw() {
+ * // 'r' is the size of the image in Mandelbrot-space
+ * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ * // Click within the image to toggle
+ * // the shader used by the quad shape
+ * // Note: for an alternative approach to the same example,
+ * // involving changing uniforms please refer to:
+ * // https://p5js.org/reference/#/p5.Shader/setUniform
+ *
+ * let redGreen;
+ * let orangeBlue;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // initialize the colors for redGreen shader
+ * shader(redGreen);
+ * redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+ * redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+ *
+ * // initialize the colors for orangeBlue shader
+ * shader(orangeBlue);
+ * orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+ * orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+ *
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // update the offset values for each shader,
+ * // moving orangeBlue in vertical and redGreen
+ * // in horizontal direction
+ * orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ * redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
+ *
+ * if (showRedGreen === true) {
+ * shader(redGreen);
+ * } else {
+ * shader(orangeBlue);
+ * }
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * normalMaterial();
+ * sphere(40);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * rotateZ(frameCount * 0.01);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * //pass image as texture
+ * texture(img);
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * pg = createGraphics(200, 200);
+ * pg.textSize(75);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * pg.background(255);
+ * pg.text('hello!', 0, 100);
+ * //pass image as texture
+ * texture(pg);
+ * rotateX(0.5);
+ * noStroke();
+ * plane(50);
+ * }
+ *
+ *
+ * let vid;
+ * function preload() {
+ * vid = createVideo('assets/fingers.mov');
+ * vid.hide();
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * //pass video frame as texture
+ * texture(vid);
+ * rect(-40, -40, 80, 80);
+ * }
+ *
+ * function mousePressed() {
+ * vid.loop();
+ * }
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * texture(img);
+ * textureMode(NORMAL);
+ * beginShape();
+ * vertex(-50, -50, 0, 0);
+ * vertex(50, -50, 1, 0);
+ * vertex(50, 50, 1, 1);
+ * vertex(-50, 50, 0, 1);
+ * endShape();
+ * }
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * texture(img);
+ * textureMode(NORMAL);
+ * beginShape();
+ * vertex(-50, -50, 0, 0);
+ * vertex(50, -50, img.width, 0);
+ * vertex(50, 50, img.width, img.height);
+ * vertex(-50, 50, 0, img.height);
+ * endShape();
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies128.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * textureWrap(MIRROR);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * let dX = mouseX;
+ * let dY = mouseY;
+ *
+ * let u = lerp(1.0, 2.0, dX);
+ * let v = lerp(1.0, 2.0, dY);
+ *
+ * scale(width / 2);
+ *
+ * texture(img);
+ *
+ * beginShape(TRIANGLES);
+ * vertex(-1, -1, 0, 0, 0);
+ * vertex(1, -1, 0, u, 0);
+ * vertex(1, 1, 0, u, v);
+ *
+ * vertex(1, 1, 0, u, v);
+ * vertex(-1, 1, 0, 0, v);
+ * vertex(-1, -1, 0, 0, 0);
+ * endShape();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * ambientLight(200);
+ * ambientMaterial(70, 130, 230);
+ * sphere(40);
+ * }
+ *
+ *
+ * // ambientLight is both red and blue (magenta),
+ * // so object only reflects it's red and blue components
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(70);
+ * ambientLight(100); // white light
+ * ambientMaterial(255, 0, 255); // pink material
+ * box(30);
+ * }
+ *
+ *
+ * // ambientLight is green. Since object does not contain
+ * // green, it does not reflect any light
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(70);
+ * ambientLight(0, 255, 0); // green light
+ * ambientMaterial(255, 0, 255); // pink material
+ * box(30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * ambientLight(0);
+ * emissiveMaterial(130, 230, 0);
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * ambientLight(50);
+ * pointLight(250, 250, 250, 100, 100, 30);
+ * specularMaterial(250);
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * ambientLight(60, 60, 60);
+ * pointLight(255, 255, 255, locX, locY, 50);
+ * specularMaterial(250);
+ * translate(-25, 0, 0);
+ * shininess(1);
+ * sphere(20);
+ * translate(50, 0, 0);
+ * shininess(20);
+ * sphere(20);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(204);
+ * //move the camera away from the plane by a sin wave
+ * camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
+ * plane(10, 10);
+ * }
+ *
+ *
+ * //move slider to see changes!
+ * //sliders control the first 6 parameters of camera()
+ * let sliderGroup = [];
+ * let X;
+ * let Y;
+ * let Z;
+ * let centerX;
+ * let centerY;
+ * let centerZ;
+ * let h = 20;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * //create sliders
+ * for (var i = 0; i < 6; i++) {
+ * if (i === 2) {
+ * sliderGroup[i] = createSlider(10, 400, 200);
+ * } else {
+ * sliderGroup[i] = createSlider(-400, 400, 0);
+ * }
+ * h = map(i, 0, 6, 5, 85);
+ * sliderGroup[i].position(10, height + h);
+ * sliderGroup[i].style('width', '80px');
+ * }
+ * }
+ *
+ * function draw() {
+ * background(60);
+ * // assigning sliders' value to each parameters
+ * X = sliderGroup[0].value();
+ * Y = sliderGroup[1].value();
+ * Z = sliderGroup[2].value();
+ * centerX = sliderGroup[3].value();
+ * centerY = sliderGroup[4].value();
+ * centerZ = sliderGroup[5].value();
+ * camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);
+ * stroke(255);
+ * fill(255, 102, 94);
+ * box(85);
+ * }
+ *
+ *
+ * //drag the mouse to look around!
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * perspective(PI / 3.0, width / height, 0.1, 500);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * normalMaterial();
+ *
+ * rotateX(-0.3);
+ * rotateY(-0.2);
+ * translate(0, 0, -50);
+ *
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 95);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 95);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ * //drag the mouse to look around!
+ * //there's no vanishing point
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * normalMaterial();
+ *
+ * rotateX(0.2);
+ * rotateY(-0.2);
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 65);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 65);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * strokeWeight(10);
+ * stroke(0, 0, 255);
+ * noFill();
+ *
+ * rotateY(-0.2);
+ * rotateX(-0.3);
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 25);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 25);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ * // Creates a camera object and animates it around a box.
+ * let camera;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * background(0);
+ * camera = createCamera();
+ * setCamera(camera);
+ * }
+ *
+ * function draw() {
+ * camera.lookAt(0, 0, 0);
+ * camera.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ * box(20);
+ * }
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * let cam1, cam2;
+ * let currentCamera;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ *
+ * cam1 = createCamera();
+ * cam2 = createCamera();
+ * cam2.setPosition(30, 0, 50);
+ * cam2.lookAt(0, 0, 0);
+ * cam2.ortho();
+ *
+ * // set variable for previously active camera:
+ * currentCamera = 1;
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // camera 1:
+ * cam1.lookAt(0, 0, 0);
+ * cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ *
+ * // every 100 frames, switch between the two cameras
+ * if (frameCount % 100 === 0) {
+ * if (currentCamera === 1) {
+ * setCamera(cam1);
+ * currentCamera = 0;
+ * } else {
+ * setCamera(cam2);
+ * currentCamera = 1;
+ * }
+ * }
+ *
+ * drawBoxes();
+ * }
+ *
+ * function drawBoxes() {
+ * rotateX(frameCount * 0.01);
+ * translate(-100, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * function setup() {
+ * setAttributes('antialias', true);
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * push();
+ * rotateZ(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * rotateY(frameCount * 0.02);
+ * fill(0, 0, 0);
+ * box(50);
+ * pop();
+ * }
+ *
+ *
+ * // press the mouse button to disable perPixelLighting
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ * let lights = [
+ * { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+ * { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+ * { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+ * { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+ * { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+ * { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+ * ];
+ *
+ * function draw() {
+ * let t = millis() / 1000 + 1000;
+ * background(0);
+ * directionalLight(color('#222'), 1, 1, 1);
+ *
+ * for (let i = 0; i < lights.length; i++) {
+ * let light = lights[i];
+ * pointLight(
+ * color(light.c),
+ * p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+ * );
+ * }
+ *
+ * specularMaterial(255);
+ * sphere(width * 0.1);
+ *
+ * rotateX(t * 0.77);
+ * rotateY(t * 0.83);
+ * rotateZ(t * 0.91);
+ * torus(width * 0.3, width * 0.07, 24, 10);
+ * }
+ *
+ * function mousePressed() {
+ * setAttributes('perPixelLighting', false);
+ * noStroke();
+ * fill(255);
+ * }
+ * function mouseReleased() {
+ * setAttributes('perPixelLighting', true);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * // Click within the image to toggle the value of uniforms
+ * // Note: for an alternative approach to the same example,
+ * // involving toggling between shaders please refer to:
+ * // https://p5js.org/reference/#/p5/shader
+ *
+ * let grad;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * shader(grad);
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // update the offset values for each scenario,
+ * // moving the "grad" shader in either vertical or
+ * // horizontal direction each with differing colors
+ *
+ * if (showRedGreen === true) {
+ * grad.setUniform('colorCenter', [1, 0, 0]);
+ * grad.setUniform('colorBackground', [0, 1, 0]);
+ * grad.setUniform('offset', [sin(millis() / 2000), 1]);
+ * } else {
+ * grad.setUniform('colorCenter', [1, 0.5, 0]);
+ * grad.setUniform('colorBackground', [0.226, 0, 0.615]);
+ * grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ * }
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ * p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + blue: { + name: 'blue', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + brightness: { + name: 'brightness', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\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, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + hue: { + name: 'hue', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\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, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + red: { + name: 'red', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + class: 'p5', + module: 'Color' + }, + saturation: { + name: 'saturation', + params: [ + { + name: 'color', + description: + 'p5.Color object, color components,\n or CSS color
\n', + type: 'p5.Color|Number[]|String' + } + ], + 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 or hue value (depending on the current color\n mode)
\n', + type: 'Number' + }, + { + name: 'v2', + description: + 'green or saturation value (depending on the current\n color mode)
\n', + type: 'Number' + }, + { + name: 'v3', + description: + 'blue or brightness value (depending on the current\n color mode)
\n', + type: 'Number' + }, + { + name: 'a', + description: '', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + 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() 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', + 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 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: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'gray', + description: 'a gray 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 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: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'gray', + description: 'a gray 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 for a shape's fill.\n This will default to 255 when no argument is given, which\n is full strength.
\n", + type: 'Number', + optional: true + }, + { + name: 'strengthStroke', + description: + "A number (0-255) for the strength of erasing for a shape's stroke.\n This will default to 255 when no argument is given, which\n is full strength.
\n", + type: 'Number', + optional: true + } + ], + 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.
\n', + type: 'Number', + optional: true + } + ], + class: 'p5', + module: 'Shape' + }, + ellipse: { + name: 'ellipse', + class: 'p5', + module: 'Shape', + overloads: [ + { + params: [ + { + name: 'x', + description: 'x-coordinate of the center of ellipse.
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the center of 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: + 'number of radial sectors to draw (for WebGL mode)
\n', + type: 'Integer' + } + ] + } + ] + }, + circle: { + name: 'circle', + params: [ + { + name: 'x', + description: 'x-coordinate of the centre of the circle.
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of the centre of the circle.
\n', + type: 'Number' + }, + { + name: 'd', + description: 'diameter of the circle.
\n', + type: 'Number' + } + ], + 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: 'coordinate_vector', + 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' + } + ], + 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' + } + ], + 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, 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 + } + ], + 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', + type: 'Number' + }, + { + name: 'u', + description: "the vertex's texture u-coordinate
\n", + type: 'Number', + optional: true + }, + { + name: 'v', + description: "the vertex's texture v-coordinate
\n", + type: 'Number', + optional: true + } + ], + chainable: 1 + } + ] + }, + P2D: { + name: 'P2D', + class: 'p5', + module: 'Constants' + }, + WEBGL: { + name: 'WEBGL', + 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' + }, + 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' + }, + 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: [] + } + ] + }, + noCursor: { + name: 'noCursor', + 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', + 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', + 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 + } + ], + class: 'p5', + module: 'Rendering' + }, + 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', + 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 + } + ], + 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', + params: [ + { + name: 'a', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'b', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'c', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'd', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'e', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + }, + { + name: 'f', + description: + 'numbers which define the 2x3 matrix to be multiplied
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Transform' + }, + 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: + 'An 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' + }, + VIDEO: { + name: 'VIDEO', + class: 'p5', + module: 'DOM' + }, + AUDIO: { + name: 'AUDIO', + 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', + class: 'p5', + module: 'Events' + }, + keyReleased: { + name: 'keyReleased', + class: 'p5', + module: 'Events' + }, + keyTyped: { + name: 'keyTyped', + 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: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mouseDragged: { + name: 'mouseDragged', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mousePressed: { + name: 'mousePressed', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mouseReleased: { + name: 'mouseReleased', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mouseClicked: { + name: 'mouseClicked', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + doubleClicked: { + name: 'doubleClicked', + params: [ + { + name: 'event', + description: 'optional MouseEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + mouseWheel: { + name: 'mouseWheel', + params: [ + { + name: 'event', + description: 'optional WheelEvent callback argument.
\n', + type: 'Object', + 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: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + touchMoved: { + name: 'touchMoved', + params: [ + { + name: 'event', + description: 'optional TouchEvent callback argument.
\n', + type: 'Object', + optional: true + } + ], + class: 'p5', + module: 'Events' + }, + touchEnded: { + name: 'touchEnded', + params: [ + { + name: 'event', + description: 'optional TouchEvent callback argument.
\n', + type: 'Object', + 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: + 'a variable\n representing a specific html5 canvas (optional)
\n', + type: 'p5.Element|HTMLCanvasElement' + }, + { + name: 'filename', + description: '', + type: 'String', + optional: true + }, + { + name: 'extension', + description: "'jpg' or 'png'
\n", + type: 'String', + optional: true + } + ] + }, + { + params: [ + { + name: 'filename', + description: '', + type: 'String', + optional: true + }, + { + name: 'extension', + description: '', + type: 'String', + optional: true + } + ] + } + ] + }, + saveFrames: { + name: 'saveFrames', + params: [ + { + name: 'filename', + description: '', + type: 'String' + }, + { + name: 'extension', + description: "'jpg' or 'png'
\n", + type: 'String' + }, + { + name: 'duration', + description: 'Duration in seconds to save the frames for.
\n', + type: 'Number' + }, + { + name: 'framerate', + description: 'Framerate to save the frames in.
\n', + type: 'Number' + }, + { + name: 'callback', + description: + 'A callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData - an\n image/octet-stream, filename and extension.
\n', + type: 'Function(Array)', + optional: true + } + ], + class: 'p5', + module: 'Image' + }, + loadImage: { + name: 'loadImage', + params: [ + { + name: 'path', + description: 'Path of the image to be loaded
\n', + type: 'String' + }, + { + name: 'successCallback', + description: + 'Function to be called once\n the image is loaded. Will be passed the\n p5.Image.
\n', + type: 'function(p5.Image)', + optional: true + }, + { + name: 'failureCallback', + description: + 'called with event error if\n the image fails to load.
\n', + type: 'Function(Event)', + optional: true + } + ], + class: 'p5', + module: 'Image' + }, + image: { + name: 'image', + class: 'p5', + module: 'Image', + overloads: [ + { + params: [ + { + name: 'img', + description: 'the image to display
\n', + type: 'p5.Image|p5.Element' + }, + { + name: 'x', + description: + 'the x-coordinate of the top-left corner of the image
\n', + type: 'Number' + }, + { + name: 'y', + description: + 'the y-coordinate of the top-left corner of the image
\n', + type: 'Number' + }, + { + name: 'width', + description: 'the width to draw the image
\n', + type: 'Number', + optional: true + }, + { + name: 'height', + description: 'the height to draw the image
\n', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'img', + description: '', + type: 'p5.Image|p5.Element' + }, + { + name: 'dx', + description: + 'the x-coordinate of the destination\n rectangle in which to draw the source image
\n', + type: 'Number' + }, + { + name: 'dy', + description: + 'the y-coordinate of the destination\n rectangle in which to draw the source image
\n', + type: 'Number' + }, + { + name: 'dWidth', + description: 'the width of the destination rectangle
\n', + type: 'Number' + }, + { + name: 'dHeight', + description: 'the height of the destination rectangle
\n', + type: 'Number' + }, + { + name: 'sx', + description: + 'the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n', + type: 'Number' + }, + { + name: 'sy', + description: + 'the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n', + type: 'Number' + }, + { + name: 'sWidth', + description: + 'the width of the subsection of the\n source image to draw into the destination\n rectangle
\n', + type: 'Number', + optional: true + }, + { + name: 'sHeight', + description: + 'the height of the subsection of the\n source image to draw into the destination rectangle
\n', + type: 'Number', + optional: true + } + ] + } + ] + }, + tint: { + name: 'tint', + class: 'p5', + module: 'Image', + 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: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'value', + description: 'a color string
\n', + type: 'String' + } + ] + }, + { + params: [ + { + name: 'gray', + description: 'a gray value
\n', + type: 'Number' + }, + { + name: 'alpha', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + 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: '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', + params: [ + { + name: 'filterType', + description: + 'either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n', + type: 'Constant' + }, + { + name: 'filterParam', + description: + 'an optional parameter unique\n to each filter, see above
\n', + type: 'Number', + optional: true + } + ], + class: 'p5', + module: 'Image' + }, + get: { + name: 'get', + class: 'p5', + 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
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height
\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: + 'insert a grayscale value | a pixel array |\n a p5.Color object | a 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: 'a', + description: 'first value
\n', + type: 'Number' + }, + { + name: 'b', + description: 'second value
\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: 'Number to compare
\n', + type: 'Number' + }, + { + name: 'n1', + description: '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: 'Number to compare
\n', + type: 'Number' + }, + { + name: 'n1', + description: '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: 'num', + description: + 'Number whose fractional part needs to be found out
\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: 'the seed value
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + randomSeed: { + name: 'randomSeed', + params: [ + { + name: 'seed', + description: 'the seed value
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + random: { + name: 'random', + class: 'p5', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'min', + description: 'the lower bound (inclusive)
\n', + type: 'Number', + optional: true + }, + { + name: 'max', + description: 'the upper bound (exclusive)
\n', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'choices', + description: 'the array to choose from
\n', + type: 'Array' + } + ] + } + ] + }, + randomGaussian: { + name: 'randomGaussian', + params: [ + { + name: 'mean', + description: 'the mean
\n', + type: 'Number' + }, + { + name: 'sd', + description: 'the standard deviation
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + acos: { + name: 'acos', + params: [ + { + name: 'value', + description: 'the value whose arc cosine is to be returned
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + asin: { + name: 'asin', + params: [ + { + name: 'value', + description: 'the value whose arc sine is to be returned
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + atan: { + name: 'atan', + params: [ + { + name: 'value', + description: 'the 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: 'the radians value to convert to degrees
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + radians: { + name: 'radians', + params: [ + { + name: 'degrees', + description: 'the degree value to convert to radians
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Math' + }, + angleMode: { + name: 'angleMode', + params: [ + { + name: 'mode', + description: 'either RADIANS or DEGREES
\n', + type: 'Constant' + } + ], + class: 'p5', + module: 'Math' + }, + 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' + }, + loadFont: { + name: 'loadFont', + params: [ + { + name: 'path', + description: 'name of the file or url to load
\n', + type: 'String' + }, + { + name: 'callback', + description: + 'function to be executed after\n loadFont() completes
\n', + type: 'Function', + optional: true + }, + { + name: 'onError', + description: + 'function to be executed if\n an error occurs
\n', + type: 'Function', + optional: true + } + ], + class: 'p5', + module: 'Typography' + }, + text: { + name: 'text', + params: [ + { + name: 'str', + description: + 'the alphanumeric\n symbols to be displayed
\n', + type: 'String|Object|Array|Number|Boolean' + }, + { + name: 'x', + description: 'x-coordinate of text
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-coordinate of text
\n', + type: 'Number' + }, + { + name: 'x2', + description: + 'by default, the width of the text box,\n see rectMode() for more info
\n', + type: 'Number', + optional: true + }, + { + name: 'y2', + description: + 'by default, the height of the text box,\n see rectMode() for more info
\n', + type: 'Number', + optional: true + } + ], + class: 'p5', + module: 'Typography' + }, + textFont: { + name: 'textFont', + class: 'p5', + module: 'Typography', + overloads: [ + { + params: [] + }, + { + params: [ + { + name: 'font', + description: + 'a font loaded via loadFont(),\nor a String representing a web safe font\n(a font that is generally available across all systems)
\n', + type: 'Object|String' + }, + { + name: 'size', + description: 'the font size to use
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + } + ] + }, + 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' + } + ] + } + ] + }, + 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' + }, + 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 + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + debugMode: { + name: 'debugMode', + class: 'p5', + module: 'Lights, Camera', + 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: 'Lights, Camera' + }, + ambientLight: { + name: 'ambientLight', + class: 'p5', + module: 'Lights, Camera', + 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: 'the alpha value
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'gray', + description: 'a gray 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 ambient light color
\n', + type: 'p5.Color' + } + ], + chainable: 1 + } + ] + }, + specularColor: { + name: 'specularColor', + class: 'p5', + module: 'Lights, Camera', + 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: 'value', + description: 'a color string
\n', + type: 'String' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'gray', + description: 'a gray value
\n', + type: 'Number' + } + ], + 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 ambient light color
\n', + type: 'p5.Color' + } + ], + chainable: 1 + } + ] + }, + directionalLight: { + name: 'directionalLight', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'red or hue value (depending on the current\ncolor mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number' + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number' + }, + { + name: 'position', + description: 'the direction of the light
\n', + type: 'p5.Vector' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: + 'color Array, CSS color string,\n or p5.Color value
\n', + type: 'Number[]|String|p5.Color' + }, + { + name: 'x', + description: 'x axis direction
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y axis direction
\n', + type: 'Number' + }, + { + name: 'z', + description: 'z axis direction
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + } + ], + chainable: 1 + } + ] + }, + pointLight: { + name: 'pointLight', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'red or hue value (depending on the current\ncolor mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number' + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number' + }, + { + name: 'x', + description: 'x axis position
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y axis position
\n', + type: 'Number' + }, + { + name: 'z', + description: 'z axis position
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'position', + description: 'the position of the light
\n', + type: 'p5.Vector' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: + 'color Array, CSS color string,\nor p5.Color value
\n', + type: 'Number[]|String|p5.Color' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + } + ], + chainable: 1 + } + ] + }, + lights: { + name: 'lights', + class: 'p5', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + spotLight: { + name: 'spotLight', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'red or hue value (depending on the current\ncolor mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number' + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number' + }, + { + name: 'x', + description: 'x axis position
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y axis position
\n', + type: 'Number' + }, + { + name: 'z', + description: 'z axis position
\n', + type: 'Number' + }, + { + name: 'rx', + description: 'x axis direction of light
\n', + type: 'Number' + }, + { + name: 'ry', + description: 'y axis direction of light
\n', + type: 'Number' + }, + { + name: 'rz', + description: 'z axis direction of light
\n', + type: 'Number' + }, + { + name: 'angle', + description: + 'optional parameter for angle. Defaults to PI/3
\n', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: + 'optional parameter for concentration. Defaults to 100
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: + 'color Array, CSS color string,\nor p5.Color value
\n', + type: 'Number[]|String|p5.Color' + }, + { + name: 'position', + description: 'the position of the light
\n', + type: 'p5.Vector' + }, + { + name: 'direction', + description: 'the direction of the light
\n', + type: 'p5.Vector' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + }, + { + name: 'direction', + description: '', + type: 'p5.Vector' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + }, + { + name: 'direction', + description: '', + type: 'p5.Vector' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + }, + { + name: 'rx', + description: '', + type: 'Number' + }, + { + name: 'ry', + description: '', + type: 'Number' + }, + { + name: 'rz', + description: '', + type: 'Number' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + }, + { + name: 'direction', + description: '', + type: 'p5.Vector' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'v1', + description: '', + type: 'Number' + }, + { + name: 'v2', + description: '', + type: 'Number' + }, + { + name: 'v3', + description: '', + type: 'Number' + }, + { + name: 'position', + description: '', + type: 'p5.Vector' + }, + { + name: 'rx', + description: '', + type: 'Number' + }, + { + name: 'ry', + description: '', + type: 'Number' + }, + { + name: 'rz', + description: '', + type: 'Number' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'color', + description: '', + type: 'Number[]|String|p5.Color' + }, + { + name: 'x', + description: '', + type: 'Number' + }, + { + name: 'y', + description: '', + type: 'Number' + }, + { + name: 'z', + description: '', + type: 'Number' + }, + { + name: 'rx', + description: '', + type: 'Number' + }, + { + name: 'ry', + description: '', + type: 'Number' + }, + { + name: 'rz', + description: '', + type: 'Number' + }, + { + name: 'angle', + description: '', + type: 'Number', + optional: true + }, + { + name: 'conc', + description: '', + type: 'Number', + optional: true + } + ] + } + ] + }, + noLights: { + name: 'noLights', + class: 'p5', + module: 'Lights, Camera' + }, + 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 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + shader: { + name: 'shader', + params: [ + { + name: 's', + description: + 'the desired p5.Shader to use for rendering\nshapes.
\n', + type: 'p5.Shader', + optional: true + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + resetShader: { + name: 'resetShader', + class: 'p5', + module: 'Lights, Camera' + }, + normalMaterial: { + name: 'normalMaterial', + class: 'p5', + module: 'Lights, Camera' + }, + texture: { + name: 'texture', + params: [ + { + name: 'tex', + description: + '2-dimensional graphics\n to render as texture
\n', + type: 'p5.Image|p5.MediaElement|p5.Graphics' + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + textureMode: { + name: 'textureMode', + params: [ + { + name: 'mode', + description: 'either IMAGE or NORMAL
\n', + type: 'Constant' + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + ambientMaterial: { + name: 'ambientMaterial', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'gray value, red or hue value\n (depending on the current color mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number', + optional: true + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: 'color, color Array, or CSS color string
\n', + type: 'Number[]|String|p5.Color' + } + ], + chainable: 1 + } + ] + }, + emissiveMaterial: { + name: 'emissiveMaterial', + class: 'p5', + module: 'Lights, Camera', + overloads: [ + { + params: [ + { + name: 'v1', + description: + 'gray value, red or hue value\n (depending on the current color mode),
\n', + type: 'Number' + }, + { + name: 'v2', + description: 'green or saturation value
\n', + type: 'Number', + optional: true + }, + { + name: 'v3', + description: 'blue or brightness value
\n', + type: 'Number', + optional: true + }, + { + name: 'a', + description: 'opacity
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'color', + description: 'color, color Array, or CSS color string
\n', + type: 'Number[]|String|p5.Color' + } + ], + chainable: 1 + } + ] + }, + specularMaterial: { + name: 'specularMaterial', + class: 'p5', + module: 'Lights, Camera', + 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 Array, or CSS color string
\n', + type: 'Number[]|String|p5.Color' + } + ], + chainable: 1 + } + ] + }, + shininess: { + name: 'shininess', + params: [ + { + name: 'shine', + description: + 'Degree of Shininess.\n Defaults to 1.
\n', + type: 'Number' + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + createCamera: { + name: 'createCamera', + class: 'p5', + module: 'Lights, Camera' + }, + setCamera: { + name: 'setCamera', + params: [ + { + name: 'cam', + description: 'p5.Camera object
\n', + type: 'p5.Camera' + } + ], + class: 'p5', + module: 'Lights, Camera' + }, + 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' + } + ] + } + ] + }, + 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' + }, + getAudioContext: { + name: 'getAudioContext', + class: 'p5', + module: 'p5.sound' + }, + userStartAudio: { + params: [ + { + name: 'element(s)', + description: + 'This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.
\n', + type: 'Element|Array', + optional: true + }, + { + name: 'callback', + description: + 'Callback to invoke when the AudioContext\n has started
\n', + type: 'Function', + optional: true + } + ], + name: 'userStartAudio', + 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' + }, + 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' + } + }, + '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' + }, + 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' + } + ], + 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' + } + }, + 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' + }, + loadPixels: { + name: 'loadPixels', + class: 'p5.Image', + module: 'Image' + }, + updatePixels: { + name: 'updatePixels', + class: 'p5.Image', + module: 'Image', + overloads: [ + { + params: [ + { + name: 'x', + description: + 'x-offset of the target update area for the\n underlying canvas
\n', + type: 'Integer' + }, + { + name: 'y', + description: + 'y-offset of the target update area for the\n underlying canvas
\n', + type: 'Integer' + }, + { + name: 'w', + description: + 'height of the target update area for the\n underlying canvas
\n', + type: 'Integer' + }, + { + name: 'h', + description: + 'height of the target update area for the\n underlying canvas
\n', + type: 'Integer' + } + ] + }, + { + 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
\n', + type: 'Number' + }, + { + name: 'h', + description: 'height
\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 a p5.Color | image to copy
\n', + type: 'Number|Number[]|Object' + } + ], + class: 'p5.Image', + module: 'Image' + }, + resize: { + name: 'resize', + params: [ + { + name: 'width', + description: 'the resized image width
\n', + type: 'Number' + }, + { + name: 'height', + description: 'the 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, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n', + type: 'Constant' + }, + { + name: 'filterParam', + description: + 'an optional parameter unique\n to each filter, see above
\n', + type: 'Number', + optional: true + } + ], + 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: 'give your file a name
\n', + type: 'String' + }, + { + name: 'extension', + description: "'png' or 'jpg'
\n", + type: 'String' + } + ], + 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: + 'the index for the frame that should be displayed
\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: + 'the amount in milliseconds to delay between switching frames
\n', + type: 'Number' + }, + { + name: 'index', + description: + 'the index of the frame that should have the new delay value {optional}
\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: 'the x component of the vector
\n', + type: 'Number', + optional: true + }, + { + name: 'y', + description: 'the y component of the vector
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: 'the z component of the vector
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'value', + description: 'the vector to set
\n', + type: 'p5.Vector|Number[]' + } + ], + chainable: 1 + } + ] + }, + copy: { + name: 'copy', + class: 'p5.Vector', + module: 'Math' + }, + add: { + name: 'add', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'x', + description: 'the x component of the vector to be added
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y component of the vector to be added
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: 'the z component of the vector to be added
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + 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: 'the vector to receive the result (Optional)
\n', + type: 'p5.Vector', + optional: true + } + ], + static: 1 + } + ] + }, + rem: { + name: 'rem', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'x', + description: 'the x component of divisor vector
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y component of divisor vector
\n', + type: 'Number' + }, + { + name: 'z', + description: 'the 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: + 'dividend p5.Vector
\n', + type: 'p5.Vector' + }, + { + name: 'v2', + description: '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: 'the x component of the vector to subtract
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y component of the vector to subtract
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: 'the z component of the vector to subtract
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + 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: 'the vector to receive the result (Optional)
\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: + 'The number to multiply with the x component of the vector
\n', + type: 'Number' + }, + { + name: 'y', + description: + 'The number to multiply with the y component of the vector
\n', + type: 'Number' + }, + { + name: 'z', + description: + 'The number to multiply with the z component of the vector
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'arr', + description: + 'The array to multiply with the components of the vector
\n', + type: 'Number[]' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v', + description: + 'The 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: 'the vector to receive the result (Optional)
\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: + 'The number to divide with the x component of the vector
\n', + type: 'Number' + }, + { + name: 'y', + description: + 'The number to divide with the y component of the vector
\n', + type: 'Number' + }, + { + name: 'z', + description: + 'The number to divide with the z component of the vector
\n', + type: 'Number', + optional: true + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'arr', + description: + 'The array to divide the components of the vector by
\n', + type: 'Number[]' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v', + description: + 'The 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 (Optional)
\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' + }, + 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: 'value', + description: + 'value component of the vector or 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 + } + ] + }, + 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: + 'the first p5.Vector
\n', + type: 'p5.Vector' + }, + { + name: 'v2', + description: + 'the second p5.Vector
\n', + type: 'p5.Vector' + } + ], + static: 1 + } + ] + }, + dist: { + name: 'dist', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'v', + description: + 'the 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' + }, + limit: { + name: 'limit', + params: [ + { + name: 'max', + description: 'the maximum magnitude for the vector
\n', + type: 'Number' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + setMag: { + name: 'setMag', + params: [ + { + name: 'len', + description: 'the new length for this vector
\n', + type: 'Number' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + heading: { + name: 'heading', + class: 'p5.Vector', + module: 'Math' + }, + rotate: { + name: 'rotate', + params: [ + { + name: 'angle', + description: 'the angle of rotation
\n', + type: 'Number' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + angleBetween: { + name: 'angleBetween', + params: [ + { + name: 'value', + description: + 'the x, y, and z components of a p5.Vector
\n', + type: 'p5.Vector' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + lerp: { + name: 'lerp', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'x', + description: 'the x component
\n', + type: 'Number' + }, + { + name: 'y', + description: 'the y component
\n', + type: 'Number' + }, + { + name: 'z', + description: 'the z component
\n', + type: 'Number' + }, + { + name: 'amt', + description: + 'the amount of interpolation; some value between 0.0\n (old vector) and 1.0 (new vector). 0.9 is very near\n the new vector. 0.5 is halfway in between.
\n', + type: 'Number' + } + ], + chainable: 1 + }, + { + params: [ + { + name: 'v', + description: + 'the p5.Vector to lerp to
\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 (Optional)
\n', + type: 'p5.Vector', + optional: true + } + ], + static: 1 + } + ] + }, + reflect: { + name: 'reflect', + params: [ + { + name: 'surfaceNormal', + description: + 'the p5.Vector to reflect about, will be normalized by this method
\n', + type: 'p5.Vector' + } + ], + class: 'p5.Vector', + module: 'Math' + }, + array: { + name: 'array', + class: 'p5.Vector', + module: 'Math' + }, + equals: { + name: 'equals', + class: 'p5.Vector', + module: 'Math', + overloads: [ + { + params: [ + { + name: 'x', + description: 'the x component of the vector
\n', + type: 'Number', + optional: true + }, + { + name: 'y', + description: 'the y component of the vector
\n', + type: 'Number', + optional: true + }, + { + name: 'z', + description: 'the z component of the vector
\n', + type: 'Number', + optional: true + } + ] + }, + { + params: [ + { + name: 'value', + description: 'the vector to compare
\n', + type: 'p5.Vector|Array' + } + ] + } + ] + }, + fromAngle: { + name: 'fromAngle', + params: [ + { + name: 'angle', + description: + 'the desired angle, in radians (unaffected by angleMode)
\n', + type: 'Number' + }, + { + name: 'length', + description: 'the length of the new vector (defaults to 1)
\n', + type: 'Number', + optional: true + } + ], + class: 'p5.Vector', + module: 'Math' + }, + fromAngles: { + name: 'fromAngles', + params: [ + { + name: 'theta', + description: 'the polar angle, in radians (zero is up)
\n', + type: 'Number' + }, + { + name: 'phi', + description: + 'the azimuthal angle, in radians\n (zero is out of the screen)
\n', + type: 'Number' + }, + { + name: 'length', + description: 'the length of the new vector (defaults to 1)
\n', + type: 'Number', + optional: true + } + ], + 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: 'line', + description: 'a line of text
\n', + type: 'String' + }, + { + name: 'x', + description: 'x-position
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-position
\n', + type: 'Number' + }, + { + name: 'fontSize', + description: 'font size to use (optional) Default is 12.
\n', + type: 'Number', + optional: true + }, + { + name: 'options', + description: + "opentype options (optional)\n opentype fonts contains alignment and baseline options.\n Default is 'LEFT' and 'alphabetic'
\n", + type: 'Object', + optional: true + } + ], + class: 'p5.Font', + module: 'Typography' + }, + textToPoints: { + name: 'textToPoints', + params: [ + { + name: 'txt', + description: 'a line of text
\n', + type: 'String' + }, + { + name: 'x', + description: 'x-position
\n', + type: 'Number' + }, + { + name: 'y', + description: 'y-position
\n', + type: 'Number' + }, + { + name: 'fontSize', + description: 'font size to use (optional)
\n', + type: 'Number' + }, + { + name: 'options', + description: + 'an (optional) object that can contain:
\n
sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise
simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear
amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n', + type: 'Number' + } + ], + class: 'p5.Camera', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + camera: { + name: 'camera', + class: 'p5.Camera', + module: 'Lights, Camera' + }, + 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: 'Lights, Camera' + }, + 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: 'Lights, Camera' + } + }, + 'p5.Geometry': { + computeFaces: { + name: 'computeFaces', + class: 'p5.Geometry', + module: 'Lights, Camera' + }, + computeNormals: { + name: 'computeNormals', + class: 'p5.Geometry', + module: 'Lights, Camera' + }, + averageNormals: { + name: 'averageNormals', + class: 'p5.Geometry', + module: 'Lights, Camera' + }, + averagePoleNormals: { + name: 'averagePoleNormals', + class: 'p5.Geometry', + module: 'Lights, Camera' + }, + normalize: { + name: 'normalize', + class: 'p5.Geometry', + module: 'Lights, Camera' + } + }, + 'p5.Shader': { + setUniform: { + name: 'setUniform', + params: [ + { + name: 'uniformName', + description: 'the name of the uniform in the\nshader program
\n', + type: 'String' + }, + { + name: 'data', + description: + 'the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)
\n', + type: 'Object|Number|Boolean|Number[]' + } + ], + class: 'p5.Shader', + module: 'Lights, Camera' + } + }, + 'p5.sound': { + getMasterVolume: { + name: 'getMasterVolume', + class: 'p5.sound', + module: 'p5.sound' + }, + masterVolume: { + name: 'masterVolume', + params: [ + { + name: 'volume', + description: + 'Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n', + type: 'Number|Object' + }, + { + name: 'rampTime', + description: 'Fade for t seconds
\n', + type: 'Number', + optional: true + }, + { + name: 'timeFromNow', + description: + 'Schedule this event to happen at\n t seconds in the future
\n', + type: 'Number', + optional: true + } + ], + class: 'p5.sound', + module: 'p5.sound' + }, + soundOut: { + name: 'soundOut', + class: 'p5.sound', + 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.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' + }, + 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' + }, + setType: { + name: 'setType', + params: [ + { + name: 'type', + description: "'sine', 'triangle', 'sawtooth' or 'square'.
\n", + type: 'String' + } + ], + 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' + }, + 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.MonoSynth': { + 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' + }, + 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' + }, + 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.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.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' + } + }, + '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' + }, + 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' + }, + 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' + }, + 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' + }, + processPeaks: { + name: 'processPeaks', + params: [ + { + name: 'callback', + description: 'a function to call once this data is returned
\n', + type: 'Function' + }, + { + name: 'initThreshold', + description: 'initial threshold defaults to 0.9
\n', + type: 'Number', + optional: true + }, + { + name: 'minThreshold', + description: 'minimum threshold defaults to 0.22
\n', + type: 'Number', + optional: true + }, + { + name: 'minPeaks', + description: 'minimum number of peaks defaults to 200
\n', + type: 'Number', + optional: true + } + ], + 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 master output)
\n', + type: 'SoundObject|undefined', + optional: true + }, + { + name: 'smoothing', + description: + 'a range between 0.0 and 1.0\n to smooth amplitude readings
\n', + type: 'Number|undefined', + optional: true + } + ], + 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.Signal': { + fade: { + name: 'fade', + params: [ + { + name: 'value', + description: 'Value to set this signal
\n', + type: 'Number' + }, + { + name: 'secondsFromNow', + description: 'Length of fade, in seconds from now
\n', + type: 'Number', + optional: true + } + ], + class: 'p5.Signal', + module: 'p5.sound' + }, + setInput: { + name: 'setInput', + params: [ + { + name: 'input', + description: '', + type: 'Object' + } + ], + class: 'p5.Signal', + module: 'p5.sound' + }, + add: { + name: 'add', + params: [ + { + name: 'number', + description: '', + type: 'Number' + } + ], + class: 'p5.Signal', + module: 'p5.sound' + }, + mult: { + name: 'mult', + params: [ + { + name: 'number', + description: 'to multiply
\n', + type: 'Number' + } + ], + class: 'p5.Signal', + module: 'p5.sound' + }, + scale: { + name: 'scale', + params: [ + { + name: 'number', + description: 'to multiply
\n', + type: 'Number' + }, + { + name: 'inMin', + description: 'input range minumum
\n', + type: 'Number' + }, + { + name: 'inMax', + description: 'input range maximum
\n', + type: 'Number' + }, + { + name: 'outMin', + description: 'input range minumum
\n', + type: 'Number' + }, + { + name: 'outMax', + description: 'input range maximum
\n', + type: 'Number' + } + ], + class: 'p5.Signal', + 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 (optional)
\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.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.Noise': { + setType: { + name: 'setType', + params: [ + { + name: 'type', + description: "'white', 'pink' or 'brown'
\n", + type: 'String', + optional: true + } + ], + class: 'p5.Noise', + 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.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' + }, + 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' + }, + impulses: { + name: 'impulses', + 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': { + 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' + }, + 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' + } + }, + '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.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.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.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.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' + } + } + }; + }, + {} + ], + 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) & 0xff; + arr[curByte++] = (tmp >> 8) & 0xff; + arr[curByte++] = tmp & 0xff; + } + + if (placeHoldersLen === 2) { + tmp = + (revLookup[b64.charCodeAt(i)] << 2) | + (revLookup[b64.charCodeAt(i + 1)] >> 4); + arr[curByte++] = tmp & 0xff; + } + + if (placeHoldersLen === 1) { + tmp = + (revLookup[b64.charCodeAt(i)] << 10) | + (revLookup[b64.charCodeAt(i + 1)] << 4) | + (revLookup[b64.charCodeAt(i + 2)] >> 2); + arr[curByte++] = (tmp >> 8) & 0xff; + arr[curByte++] = tmp & 0xff; + } + + return arr; + } + + function tripletToBase64(num) { + return ( + lookup[(num >> 18) & 0x3f] + + lookup[(num >> 12) & 0x3f] + + lookup[(num >> 6) & 0x3f] + + lookup[num & 0x3f] + ); + } + + function encodeChunk(uint8, start, end) { + var tmp; + var output = []; + for (var i = start; i < end; i += 3) { + tmp = + ((uint8[i] << 16) & 0xff0000) + + ((uint8[i + 1] << 8) & 0xff00) + + (uint8[i + 2] & 0xff); + output.push(tripletToBase64(tmp)); + } + return output.join(''); + } + + function fromByteArray(uint8) { + var tmp; + var len = uint8.length; + var extraBytes = len % 3; // if we have 1 byte left, pad 2 bytes + var parts = []; + var maxChunkLength = 16383; // must be multiple of 3 + + // go through the array every three bytes, we'll deal with trailing stuff later + for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) { + parts.push( + encodeChunk(uint8, i, i + maxChunkLength > len2 ? len2 : i + maxChunkLength) + ); + } + + // pad the end with zeros, but make sure to not forget the extra bytes + if (extraBytes === 1) { + tmp = uint8[len - 1]; + parts.push(lookup[tmp >> 2] + lookup[(tmp << 4) & 0x3f] + '=='); + } else if (extraBytes === 2) { + tmp = (uint8[len - 2] << 8) + uint8[len - 1]; + parts.push( + lookup[tmp >> 10] + + lookup[(tmp >> 4) & 0x3f] + + lookup[(tmp << 2) & 0x3f] + + '=' + ); + } + + return parts.join(''); + } + }, + {} + ], + 21: [function(_dereq_, module, exports) {}, {}], + 22: [ + function(_dereq_, module, exports) { + (function(Buffer) { + /*! + * The buffer module from node.js, for the browser. + * + * @author Feross Aboukhadijeh
+ * noStroke();
+ * let c = color(0, 126, 255, 102);
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ * let value = alpha(c); // Sets 'value' to 102
+ * fill(value);
+ * rect(50, 15, 35, 70);
+ *
+ *
+ * let c = color(175, 100, 220);
+ * fill(c);
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ * let blueValue = blue(c);
+ * fill(0, 0, blueValue);
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = brightness(c); // Sets 'value' to 255
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color('hsb(60, 100%, 50%)');
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = brightness(c); // A 'value' of 50% is 127.5
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * let c = color(255, 204, 0);
+ * fill(c);
+ * noStroke();
+ * rect(30, 20, 55, 55);
+ *
+ *
+ * let c = color(255, 204, 0);
+ * fill(c);
+ * noStroke();
+ * ellipse(25, 25, 80, 80); // Draw left circle
+ * // Using only one value generates a grayscale value.
+ * c = color(65);
+ * fill(c);
+ * ellipse(75, 75, 80, 80);
+ *
+ *
+ * // You can use named SVG & CSS colors
+ * let c = color('magenta');
+ * fill(c);
+ * noStroke();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // Example of hex color codes
+ * noStroke();
+ * let c = color('#0f0');
+ * fill(c);
+ * rect(0, 10, 45, 80);
+ * c = color('#00ff00');
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ *
+ *
+ * // RGB and RGBA color strings are also supported
+ * // these all set to the same color (solid blue)
+ * let c;
+ * noStroke();
+ * c = color('rgb(0,0,255)');
+ * fill(c);
+ * rect(10, 10, 35, 35); // Draw rectangle
+ * c = color('rgb(0%, 0%, 100%)');
+ * fill(c);
+ * rect(55, 10, 35, 35); // Draw rectangle
+ * c = color('rgba(0, 0, 255, 1)');
+ * fill(c);
+ * rect(10, 55, 35, 35); // Draw rectangle
+ * c = color('rgba(0%, 0%, 100%, 1)');
+ * fill(c);
+ * rect(55, 55, 35, 35); // Draw rectangle
+ *
+ *
+ * // HSL color can also be specified by value
+ * let c = color('hsl(160, 100%, 50%)');
+ * noStroke();
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw rectangle
+ * c = color('hsla(160, 100%, 50%, 0.5)');
+ * fill(c);
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ * // HSB color can also be specified
+ * let c = color('hsb(160, 100%, 50%)');
+ * noStroke();
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw rectangle
+ * c = color('hsba(160, 100%, 50%, 0.5)');
+ * fill(c);
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ * noStroke();
+ * let c = color(50, 55, 100);
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw left rect
+ * colorMode(HSB, 100);
+ * c = color(50, 55, 100);
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ *
+ *
+ * let c = color(20, 75, 200); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let greenValue = green(c); // Get green in 'c'
+ * print(greenValue); // Print "75.0"
+ * fill(0, greenValue, 0); // Use 'greenValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = hue(c); // Sets 'value' to "0"
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * colorMode(RGB);
+ * stroke(255);
+ * background(51);
+ * let from = color(218, 165, 32);
+ * let to = color(72, 61, 139);
+ * colorMode(RGB); // Try changing to HSB.
+ * let interA = lerpColor(from, to, 0.33);
+ * let interB = lerpColor(from, to, 0.66);
+ * fill(from);
+ * rect(10, 20, 20, 60);
+ * fill(interA);
+ * rect(30, 20, 20, 60);
+ * fill(interB);
+ * rect(50, 20, 20, 60);
+ * fill(to);
+ * rect(70, 20, 20, 60);
+ *
+ *
+ * noStroke();
+ * colorMode(HSL);
+ * let c = color(156, 100, 50, 1);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = lightness(c); // Sets 'value' to 50
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * let c = color(255, 204, 0); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let redValue = red(c); // Get red in 'c'
+ * print(redValue); // Print "255.0"
+ * fill(redValue, 0, 0); // Use 'redValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ * colorMode(RGB, 255); // Sets the range for red, green, and blue to 255
+ * let c = color(127, 255, 0);
+ * colorMode(RGB, 1); // Sets the range for red, green, and blue to 1
+ * let myColor = red(c);
+ * print(myColor); // 0.4980392156862745
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = saturation(c); // Sets 'value' to 126
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ * createCanvas(200, 100);
+ * let myColor;
+ * stroke(255);
+ * myColor = color(100, 100, 250);
+ * fill(myColor);
+ * rotate(HALF_PI);
+ * text(myColor.toString(), 0, -5);
+ * text(myColor.toString('#rrggbb'), 0, -30);
+ * text(myColor.toString('rgba%'), 0, -55);
+ *
+ *
+ * let backgroundColor;
+ *
+ * function setup() {
+ * backgroundColor = color(100, 50, 150);
+ * }
+ *
+ * function draw() {
+ * backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ * let backgroundColor = color(100, 50, 150);
+ * function draw() {
+ * backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ * let backgroundColor = color(100, 50, 150);
+ * function draw() {
+ * backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
+ * background(backgroundColor);
+ * }
+ *
+ *
+ * function draw() {
+ * clear();
+ * background(200);
+ * squareColor = color(100, 50, 100);
+ * squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
+ * fill(squareColor);
+ * rect(13, 13, width - 26, height - 26);
+ * }
+ *
+ *
+ * // todo
+ *
+ *
+ * // Grayscale integer value
+ * background(51);
+ *
+ *
+ * // R, G & B integer values
+ * background(255, 204, 0);
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * background(255, 204, 100);
+ *
+ *
+ * // Named SVG/CSS color string
+ * background('red');
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * background('#fae');
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * background('#222222');
+ *
+ *
+ * // integer RGB notation
+ * background('rgb(0,255,0)');
+ *
+ *
+ * // integer RGBA notation
+ * background('rgba(0,255,0, 0.25)');
+ *
+ *
+ * // percentage RGB notation
+ * background('rgb(100%,0%,10%)');
+ *
+ *
+ * // percentage RGBA notation
+ * background('rgba(100%,0%,100%,0.5)');
+ *
+ *
+ * // p5 Color object
+ * background(color(0, 0, 255));
+ *
+ *
+ * // Clear the screen on mouse press.
+ * function draw() {
+ * ellipse(mouseX, mouseY, 20, 20);
+ * }
+ * function mousePressed() {
+ * clear();
+ * background(128);
+ * }
+ *
+ *
+ * noStroke();
+ * colorMode(RGB, 100);
+ * for (let i = 0; i < 100; i++) {
+ * for (let j = 0; j < 100; j++) {
+ * stroke(i, j, 0);
+ * point(i, j);
+ * }
+ * }
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 100);
+ * for (let i = 0; i < 100; i++) {
+ * for (let j = 0; j < 100; j++) {
+ * stroke(i, j, 100);
+ * point(i, j);
+ * }
+ * }
+ *
+ *
+ * colorMode(RGB, 255);
+ * let c = color(127, 255, 0);
+ * colorMode(RGB, 1);
+ * let myColor = c._getRed();
+ * text(myColor, 10, 10, 80, 80);
+ *
+ *
+ * noFill();
+ * colorMode(RGB, 255, 255, 255, 1);
+ * background(255);
+ * strokeWeight(4);
+ * stroke(255, 0, 10, 0.3);
+ * ellipse(40, 40, 50, 50);
+ * ellipse(50, 50, 40, 40);
+ *
+ *
+ * // Grayscale integer value
+ * fill(51);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // R, G & B integer values
+ * fill(255, 204, 0);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * fill(255, 204, 100);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // Named SVG/CSS color string
+ * fill('red');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * fill('#fae');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * fill('#222222');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // integer RGB notation
+ * fill('rgb(0,255,0)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // integer RGBA notation
+ * fill('rgba(0,255,0, 0.25)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // percentage RGB notation
+ * fill('rgb(100%,0%,10%)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // percentage RGBA notation
+ * fill('rgba(100%,0%,100%,0.5)');
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // p5 Color object
+ * fill(color(0, 0, 255));
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * rect(15, 10, 55, 55);
+ * noFill();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noFill();
+ * stroke(100, 100, 240);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(45, 45, 45);
+ * }
+ *
+ *
+ * noStroke();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * fill(240, 150, 150);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(45, 45, 45);
+ * }
+ *
+ *
+ * // Grayscale integer value
+ * strokeWeight(4);
+ * stroke(51);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // R, G & B integer values
+ * stroke(255, 204, 0);
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // H, S & B integer values
+ * colorMode(HSB);
+ * strokeWeight(4);
+ * stroke(255, 204, 100);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // Named SVG/CSS color string
+ * stroke('red');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // three-digit hexadecimal RGB notation
+ * stroke('#fae');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // six-digit hexadecimal RGB notation
+ * stroke('#222222');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // integer RGB notation
+ * stroke('rgb(0,255,0)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // integer RGBA notation
+ * stroke('rgba(0,255,0,0.25)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // percentage RGB notation
+ * stroke('rgb(100%,0%,10%)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // percentage RGBA notation
+ * stroke('rgba(100%,0%,100%,0.5)');
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * // p5 Color object
+ * stroke(color(0, 0, 255));
+ * strokeWeight(4);
+ * rect(20, 20, 60, 60);
+ *
+ *
+ * background(100, 100, 250);
+ * fill(250, 100, 100);
+ * rect(20, 20, 60, 60);
+ * erase();
+ * ellipse(25, 30, 30);
+ * noErase();
+ *
+ *
+ * background(150, 250, 150);
+ * fill(100, 100, 250);
+ * rect(20, 20, 60, 60);
+ * strokeWeight(5);
+ * erase(150, 255);
+ * triangle(50, 10, 70, 50, 90, 10);
+ * noErase();
+ *
+ *
+ * function setup() {
+ * smooth();
+ * createCanvas(100, 100, WEBGL);
+ * // Make a <p> element and put it behind the canvas
+ * let p = createP('I am a dom element');
+ * p.center();
+ * p.style('font-size', '20px');
+ * p.style('text-align', 'center');
+ * p.style('z-index', '-9999');
+ * }
+ *
+ * function draw() {
+ * background(250, 250, 150);
+ * fill(15, 195, 185);
+ * noStroke();
+ * sphere(30);
+ * erase();
+ * rotateY(frameCount * 0.02);
+ * translate(0, 0, 40);
+ * torus(15, 5);
+ * noErase();
+ * }
+ *
+ *
+ * background(235, 145, 15);
+ * noStroke();
+ * fill(30, 45, 220);
+ * rect(30, 10, 10, 80);
+ * erase();
+ * ellipse(50, 50, 60);
+ * noErase();
+ * rect(70, 10, 10, 80);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, HALF_PI);
+ *
+ * arc(50, 50, 80, 80, 0, PI);
+ *
+ * arc(50, 50, 80, 80, 0, QUARTER_PI);
+ *
+ * arc(50, 50, 80, 80, 0, TAU);
+ *
+ * arc(50, 50, 80, 80, 0, TWO_PI);
+ *
+ * function setup() {
+ * angleMode(DEGREES);
+ * }
+ *
+ * function setup() {
+ * angleMode(RADIANS);
+ * }
+ *
+ * let x = 10;
+ * print('The value of x is ' + x);
+ * // prints "The value of x is 10"
+ *
+ * function setup() {
+ * frameRate(30);
+ * textSize(30);
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(frameCount, width / 2, height / 2);
+ * }
+ *
+ * let rectX = 0;
+ * let fr = 30; //starting FPS
+ * let clr;
+ *
+ * function setup() {
+ * background(200);
+ * frameRate(fr); // Attempt to refresh at starting FPS
+ * clr = color(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime
+ *
+ * if (rectX >= width) {
+ * // If you go off screen.
+ * if (fr === 30) {
+ * clr = color(0, 0, 255);
+ * fr = 10;
+ * frameRate(fr); // make frameRate 10 FPS
+ * } else {
+ * clr = color(255, 0, 0);
+ * fr = 30;
+ * frameRate(fr); // make frameRate 30 FPS
+ * }
+ * rectX = 0;
+ * }
+ * fill(clr);
+ * rect(rectX, 40, 20, 20);
+ * }
+ *
+ * // To demonstrate, put two windows side by side.
+ * // Click on the window that the p5 sketch isn't in!
+ * function draw() {
+ * background(200);
+ * noStroke();
+ * fill(0, 200, 0);
+ * ellipse(25, 25, 50, 50);
+ *
+ * if (!focused) {
+ // or "if (focused === false)"
+ * stroke(200, 0, 0);
+ * line(0, 0, 100, 100);
+ * line(100, 0, 0, 100);
+ * }
+ * }
+ *
+ * // Move the mouse across the quadrants
+ * // to see the cursor change
+ * function draw() {
+ * line(width / 2, 0, width / 2, height);
+ * line(0, height / 2, width, height / 2);
+ * if (mouseX < 50 && mouseY < 50) {
+ * cursor(CROSS);
+ * } else if (mouseX > 50 && mouseY < 50) {
+ * cursor('progress');
+ * } else if (mouseX > 50 && mouseY > 50) {
+ * cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+ * } else {
+ * cursor('grab');
+ * }
+ * }
+ *
+ * let rectX = 0;
+ * let fr = 30; //starting FPS
+ * let clr;
+ *
+ * function setup() {
+ * background(200);
+ * frameRate(fr); // Attempt to refresh at starting FPS
+ * clr = color(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rectX = rectX += 1; // Move Rectangle
+ *
+ * if (rectX >= width) {
+ // If you go off screen.
+ * if (fr === 30) {
+ * clr = color(0, 0, 255);
+ * fr = 10;
+ * frameRate(fr); // make frameRate 10 FPS
+ * } else {
+ * clr = color(255, 0, 0);
+ * fr = 30;
+ * frameRate(fr); // make frameRate 30 FPS
+ * }
+ * rectX = 0;
+ * }
+ * fill(clr);
+ * rect(rectX, 40, 20, 20);
+ * }
+ *
+ * function setup() {
+ * noCursor();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * ellipse(mouseX, mouseY, 10, 10);
+ * }
+ *
+ * createCanvas(displayWidth, displayHeight);
+ *
+ * createCanvas(displayWidth, displayHeight);
+ *
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * createCanvas(windowWidth, windowHeight);
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * function draw() {
+ * background(0, 100, 200);
+ * }
+ *
+ * function windowResized() {
+ * resizeCanvas(windowWidth, windowHeight);
+ * }
+ *
+ * // 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);
+ * }
+ *
+ *
+ * function setup() {
+ * pixelDensity(3.0);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * let density = displayDensity();
+ * pixelDensity(density);
+ * createCanvas(100, 100);
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ * 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);
+ * }
+ * }
+ *
+ * // 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);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * 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;
+ * }
+ * }
+ *
+ * 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);
+ * }
+ *
+ * function setup() {
+ * noCanvas();
+ * }
+ *
+ *
+ * let pg;
+ * function setup() {
+ * createCanvas(100, 100);
+ * pg = createGraphics(100, 100);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * pg.background(100);
+ * pg.noStroke();
+ * pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
+ * image(pg, 50, 50);
+ * image(pg, 0, 0, 50, 50);
+ * }
+ *
+ * BLEND
- linear interpolation of colours: C =
+ * A\*factor + B. This is the default blending mode.ADD
- sum of A and BDARKEST
- only the darkest colour succeeds: C =
+ * min(A\*factor, B).LIGHTEST
- only the lightest colour succeeds: C =
+ * max(A\*factor, B).DIFFERENCE
- subtract colors from underlying image.EXCLUSION
- similar to DIFFERENCE
, but less
+ * extreme.MULTIPLY
- multiply the colors, result will always be
+ * darker.SCREEN
- opposite multiply, uses inverse values of the
+ * colors.REPLACE
- the pixels entirely replace the others and
+ * don't utilize alpha (transparency) values.REMOVE
- removes pixels from B with the alpha strength of A.OVERLAY
- mix of MULTIPLY
and SCREEN
+ *
. Multiplies dark values, and screens light values. (2D)HARD_LIGHT
- SCREEN
when greater than 50%
+ * gray, MULTIPLY
when lower. (2D)SOFT_LIGHT
- mix of DARKEST
and
+ * LIGHTEST
. Works like OVERLAY
, but not as harsh. (2D)
+ * DODGE
- lightens light tones and increases contrast,
+ * ignores darks. (2D)BURN
- darker areas are applied, increasing contrast,
+ * ignores lights. (2D)SUBTRACT
- remainder of A and B (3D)
+ * blendMode(LIGHTEST);
+ * strokeWeight(30);
+ * stroke(80, 150, 255);
+ * line(25, 25, 75, 75);
+ * stroke(255, 50, 50);
+ * line(75, 25, 25, 75);
+ *
+ *
+ * blendMode(MULTIPLY);
+ * strokeWeight(30);
+ * stroke(80, 150, 255);
+ * line(25, 25, 75, 75);
+ * stroke(255, 50, 50);
+ * line(75, 25, 25, 75);
+ *
+ *
+ * function setup() {
+ * drawingContext.shadowOffsetX = 5;
+ * drawingContext.shadowOffsetY = -5;
+ * drawingContext.shadowBlur = 10;
+ * drawingContext.shadowColor = 'black';
+ * background(200);
+ * ellipse(width / 2, height / 2, 50, 50);
+ * }
+ *
+ *
+ * arc(50, 55, 50, 50, 0, HALF_PI);
+ * noFill();
+ * arc(50, 55, 60, 60, HALF_PI, PI);
+ * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+ * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+ *
+ *
+ * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+ *
+ *
+ * ellipse(56, 46, 55, 55);
+ *
+ *
+ * // Draw a circle at location (30, 30) with a diameter of 20.
+ * circle(30, 30, 20);
+ *
+ *
+ * line(30, 20, 85, 75);
+ *
+ *
+ * line(30, 20, 85, 20);
+ * stroke(126);
+ * line(85, 20, 85, 75);
+ * stroke(255);
+ * line(85, 75, 30, 75);
+ *
+ *
+ * point(30, 20);
+ * point(85, 20);
+ * point(85, 75);
+ * point(30, 75);
+ *
+ *
+ * point(30, 20);
+ * point(85, 20);
+ * stroke('purple'); // Change the color
+ * strokeWeight(10); // Make the points 10 pixels in size
+ * point(85, 75);
+ * point(30, 75);
+ *
+ *
+ * let a = createVector(10, 10);
+ * point(a);
+ * let b = createVector(10, 20);
+ * point(b);
+ * point(createVector(20, 10));
+ * point(createVector(20, 20));
+ *
+ *
+ * quad(38, 31, 86, 20, 69, 63, 30, 76);
+ *
+ *
+ * // Draw a rectangle at location (30, 20) with a width and height of 55.
+ * rect(30, 20, 55, 55);
+ *
+ *
+ * // Draw a rectangle with rounded corners, each having a radius of 20.
+ * rect(30, 20, 55, 55, 20);
+ *
+ *
+ * // Draw a rectangle with rounded corners having the following radii:
+ * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
+ * rect(30, 20, 55, 55, 20, 15, 10, 5);
+ *
+ *
+ * // Draw a square at location (30, 20) with a side size of 55.
+ * square(30, 20, 55);
+ *
+ *
+ * // Draw a square with rounded corners, each having a radius of 20.
+ * square(30, 20, 55, 20);
+ *
+ *
+ * // Draw a square with rounded corners having the following radii:
+ * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
+ * square(30, 20, 55, 20, 15, 10, 5);
+ *
+ *
+ * triangle(30, 75, 58, 20, 86, 75);
+ *
+ *
+ * // Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses
+ * ellipseMode(RADIUS);
+ * fill(255);
+ * ellipse(50, 50, 30, 30); // Outer white ellipse
+ * ellipseMode(CENTER);
+ * fill(100);
+ * ellipse(50, 50, 30, 30); // Inner gray ellipse
+ *
+ *
+ * // Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses
+ * ellipseMode(CORNER);
+ * fill(255);
+ * ellipse(25, 25, 50, 50); // Outer white ellipse
+ * ellipseMode(CORNERS);
+ * fill(100);
+ * ellipse(25, 25, 50, 50); // Inner gray ellipse
+ *
+ *
+ * background(0);
+ * noStroke();
+ * smooth();
+ * ellipse(30, 48, 36, 36);
+ * noSmooth();
+ * ellipse(70, 48, 36, 36);
+ *
+ *
+ * rectMode(CORNER);
+ * fill(255);
+ * rect(25, 25, 50, 50); // Draw white rectangle using CORNER mode
+ *
+ * rectMode(CORNERS);
+ * fill(100);
+ * rect(25, 25, 50, 50); // Draw gray rectanle using CORNERS mode
+ *
+ *
+ * rectMode(RADIUS);
+ * fill(255);
+ * rect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode
+ *
+ * rectMode(CENTER);
+ * fill(100);
+ * rect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode
+ *
+ *
+ * background(0);
+ * noStroke();
+ * smooth();
+ * ellipse(30, 48, 36, 36);
+ * noSmooth();
+ * ellipse(70, 48, 36, 36);
+ *
+ *
+ * // Example of different strokeCaps
+ * strokeWeight(12.0);
+ * strokeCap(ROUND);
+ * line(20, 30, 80, 30);
+ * strokeCap(SQUARE);
+ * line(20, 50, 80, 50);
+ * strokeCap(PROJECT);
+ * line(20, 70, 80, 70);
+ *
+ *
+ * // Example of MITER type of joints
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(MITER);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ * // Example of BEVEL type of joints
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(BEVEL);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ * // Example of ROUND type of joints
+ * noFill();
+ * strokeWeight(10.0);
+ * strokeJoin(ROUND);
+ * beginShape();
+ * vertex(35, 20);
+ * vertex(65, 50);
+ * vertex(35, 80);
+ * endShape();
+ *
+ *
+ * // Example of different stroke weights
+ * strokeWeight(1); // Default
+ * line(20, 20, 80, 20);
+ * strokeWeight(4); // Thicker
+ * line(20, 40, 80, 40);
+ * strokeWeight(10); // Beastly
+ * line(20, 70, 80, 70);
+ *
+ *
+ * noFill();
+ * stroke(255, 102, 0);
+ * line(85, 20, 10, 10);
+ * line(90, 90, 15, 80);
+ * stroke(0, 0, 0);
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ *
+ *
+ * background(0, 0, 0);
+ * noFill();
+ * stroke(255);
+ * bezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noFill();
+ * bezierDetail(5);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * // prettier-ignore
+ * bezier(-40, -40, 0,
+ * 90, -40, 0,
+ * -90, 40, 0,
+ * 40, 40, 0);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ *
+ *
+ * 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);
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * // 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();
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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();
+ *
+ *
+ * beginShape();
+ * vertex(20, 20);
+ * vertex(40, 20);
+ * vertex(40, 40);
+ * vertex(60, 40);
+ * vertex(60, 60);
+ * vertex(20, 60);
+ * endShape(CLOSE);
+ *
+ *
+ * noFill();
+ * beginShape();
+ * vertex(30, 20);
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * endShape();
+ *
+ *
+ * beginShape();
+ * vertex(30, 20);
+ * bezierVertex(80, 0, 80, 75, 30, 75);
+ * bezierVertex(50, 80, 60, 25, 30, 20);
+ * endShape();
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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();
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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);
+ *
+ *
+ * noFill();
+ *
+ * beginShape();
+ * vertex(20, 20);
+ * vertex(45, 20);
+ * vertex(45, 80);
+ * endShape(CLOSE);
+ *
+ * beginShape();
+ * vertex(50, 20);
+ * vertex(75, 20);
+ * vertex(75, 80);
+ * endShape();
+ *
+ *
+ * strokeWeight(5);
+ * point(20, 20);
+ * point(80, 20);
+ * point(50, 50);
+ *
+ * noFill();
+ * strokeWeight(1);
+ * beginShape();
+ * vertex(20, 20);
+ * quadraticVertex(80, 20, 50, 50);
+ * endShape();
+ *
+ *
+ * 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();
+ *
+ *
+ * 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();
+ *
+ *
+ * // Click to change the number of sides.
+ * // In WebGL mode, custom shapes will only
+ * // display hollow fill sections when
+ * // all calls to vertex() use the same z-value.
+ *
+ * let sides = 3;
+ * let angle, px, py;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * fill(237, 34, 93);
+ * strokeWeight(3);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * ngon(sides, 0, 0, 80);
+ * }
+ *
+ * function mouseClicked() {
+ * if (sides > 6) {
+ * sides = 3;
+ * } else {
+ * sides++;
+ * }
+ * }
+ *
+ * function ngon(n, x, y, d) {
+ * beginShape(TESS);
+ * for (let i = 0; i < n + 1; i++) {
+ * angle = TWO_PI / n * i;
+ * px = x + sin(angle) * d / 2;
+ * py = y - cos(angle) * d / 2;
+ * vertex(px, py, 0);
+ * }
+ * for (let i = 0; i < n + 1; i++) {
+ * angle = TWO_PI / n * i;
+ * px = x + sin(angle) * d / 4;
+ * py = y - cos(angle) * d / 4;
+ * vertex(px, py, 0);
+ * }
+ * endShape();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * noLoop();
+ * }
+
+ * function draw() {
+ * line(10, 10, 90, 90);
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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
+ *
+ *
+ * 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
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * background(200);
+ * // Equivalent to translate(x, y);
+ * applyMatrix(1, 0, 0, 1, 40 + step, 50);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * background(200);
+ * translate(50, 50);
+ * // Equivalent to scale(x, y);
+ * applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * let angle = map(step, 0, 20, 0, TWO_PI);
+ * let cos_a = cos(angle);
+ * let sin_a = sin(angle);
+ * background(200);
+ * translate(50, 50);
+ * // Equivalent to rotate(angle);
+ * applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * frameRate(10);
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * let step = frameCount % 20;
+ * let angle = map(step, 0, 20, -PI / 4, PI / 4);
+ * background(200);
+ * translate(50, 50);
+ * // equivalent to shearX(angle);
+ * let shear_factor = 1 / tan(PI / 2 - angle);
+ * applyMatrix(1, 0, shear_factor, 1, 0, 0);
+ * rect(0, 0, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateY(PI / 6);
+ * stroke(153);
+ * box(35);
+ * let rad = millis() / 1000;
+ * // Set rotation angles
+ * let ct = cos(rad);
+ * let st = sin(rad);
+ * // Matrix for rotation around the Y axis
+ * // prettier-ignore
+ * applyMatrix( ct, 0.0, st, 0.0,
+ * 0.0, 1.0, 0.0, 0.0,
+ * -st, 0.0, ct, 0.0,
+ * 0.0, 0.0, 0.0, 1.0);
+ * stroke(255);
+ * box(50);
+ * }
+ *
+ *
+ * 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);
+ *
+ *
+ * translate(width / 2, height / 2);
+ * rotate(PI / 3.0);
+ * rect(-26, -26, 52, 52);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateX(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(255);
+ * rotateY(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ * 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);
+ *
+ *
+ * rect(30, 20, 50, 50);
+ * scale(0.5, 1.3);
+ * rect(30, 20, 50, 50);
+ *
+ *
+ * translate(width / 4, height / 4);
+ * shearX(PI / 4.0);
+ * rect(0, 0, 30, 30);
+ *
+ *
+ * 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
+ *
+ *
+ * function draw() {
+ * background(200);
+ * rectMode(CENTER);
+ * translate(width / 2, height / 2);
+ * translate(p5.Vector.fromAngle(millis() / 1000, 40));
+ * rect(0, 0, 20, 20);
+ * }
+ *
+ *
+ * // Type to change the letter in the
+ * // center of the canvas.
+ * // If you reload the page, it will
+ * // still display the last key you entered
+ *
+ * let myText;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * myText = getItem('myText');
+ * if (myText === null) {
+ * myText = '';
+ * }
+ * }
+ *
+ * function draw() {
+ * textSize(40);
+ * background(255);
+ * text(myText, width / 2, height / 2);
+ * }
+ *
+ * function keyPressed() {
+ * myText = key;
+ * storeItem('myText', myText);
+ * }
+ *
+ * // Click the mouse to change
+ * // the color of the background
+ * // Once you have changed the color
+ * // it will stay changed even when you
+ * // reload the page.
+ *
+ * let myColor;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * myColor = getItem('myColor');
+ * }
+ *
+ * function draw() {
+ * if (myColor !== null) {
+ * background(myColor);
+ * }
+ * }
+ *
+ * function mousePressed() {
+ * myColor = color(random(255), random(255), random(255));
+ * storeItem('myColor', myColor);
+ * }
+ *
+ * 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
+ * }
+ *
+ * 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
+ * }
+ *
+ * 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
+ * }
+ *
+ * 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
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(1, 10);
+ * myDictionary.create(2, 20);
+ * myDictionary.create(3, 30);
+ * print(myDictionary.size()); // logs 3 to the console
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // logs true to console
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * let myValue = myDictionary.get('p5');
+ * print(myValue === 'js'); // logs true to console
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * myDictionary.set('p5', 'JS');
+ * myDictionary.print(); // logs "key: p5 - value: JS" to console
+ * }
+ *
+ * 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
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createStringDict('p5', 'js');
+ * print(myDictionary.hasKey('p5')); // prints 'true'
+ * myDictionary.clear();
+ * print(myDictionary.hasKey('p5')); // prints 'false'
+ * }
+ *
+ *
+ * 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
+ * }
+ *
+ * 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
+ * }
+ *
+ *
+ * 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');
+ * }
+ * }
+ *
+ *
+ * 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');
+ * }
+ * }
+ *
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.add(2, 2);
+ * print(myDictionary.get(2)); // logs 7 to console.
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 5);
+ * myDictionary.sub(2, 2);
+ * print(myDictionary.get(2)); // logs 3 to console.
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 4);
+ * myDictionary.mult(2, 2);
+ * print(myDictionary.get(2)); // logs 8 to console.
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict(2, 8);
+ * myDictionary.div(2, 2);
+ * print(myDictionary.get(2)); // logs 4 to console.
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let lowestValue = myDictionary.minValue(); // value is -10
+ * print(lowestValue);
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+ * let highestValue = myDictionary.maxValue(); // value is 3
+ * print(highestValue);
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let lowestKey = myDictionary.minKey(); // value is 1.2
+ * print(lowestKey);
+ * }
+ *
+ * function setup() {
+ * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+ * let highestKey = myDictionary.maxKey(); // value is 4
+ * print(highestKey);
+ * }
+ *
+ * function setup() {
+ * createCanvas(50, 50);
+ * background(30);
+ * // move canvas down and right
+ * select('canvas').position(10, 30);
+ * }
+ *
+ * // select using ID
+ * let a = select('#container');
+ * let b = select('#beep', '#container');
+ * let c;
+ * if (a) {
+ * // select using class
+ * c = select('.boop', a);
+ * }
+ * // select using CSS selector string
+ * let d = select('#container #bleep');
+ * let e = select('#container p');
+ * [a, b, c, d, e]; // unused
+ *
+ * function setup() {
+ * createButton('btn');
+ * createButton('2nd btn');
+ * createButton('3rd btn');
+ * let buttons = selectAll('button');
+ *
+ * for (let i = 0; i < buttons.length; i++) {
+ * buttons[i].size(100, 100);
+ * }
+ * }
+ *
+ * // these are all valid calls to selectAll()
+ * let a = selectAll('.beep');
+ * a = selectAll('div');
+ * a = selectAll('button', '#container');
+ *
+ * let b = createDiv();
+ * b.id('container');
+ * let c = select('#container');
+ * a = selectAll('p', c);
+ * a = selectAll('#container p');
+ *
+ * let d = document.getElementById('container');
+ * a = selectAll('.boop', d);
+ * a = selectAll('#container .boop');
+ * console.log(a);
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * createDiv('this is some text');
+ * createP('this is a paragraph');
+ * }
+ * function mousePressed() {
+ * removeElements(); // this will remove the div and p, not canvas
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('pear');
+ * sel.option('kiwi');
+ * sel.option('grape');
+ * sel.changed(mySelectEvent);
+ * }
+ *
+ * function mySelectEvent() {
+ * let item = sel.value();
+ * background(200);
+ * text("it's a " + item + '!', 50, 50);
+ * }
+ *
+ * let checkbox;
+ * let cnv;
+ *
+ * function setup() {
+ * checkbox = createCheckbox(' fill');
+ * checkbox.changed(changeFill);
+ * cnv = createCanvas(100, 100);
+ * cnv.position(0, 30);
+ * noFill();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * ellipse(50, 50, 50, 50);
+ * }
+ *
+ * function changeFill() {
+ * if (checkbox.checked()) {
+ * fill(0);
+ * } else {
+ * noFill();
+ * }
+ * }
+ *
+ * // Open your console to see the output
+ * function setup() {
+ * let inp = createInput('');
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent() {
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ * createDiv('this is some text');
+ *
+ * createP('this is some text');
+ *
+ * createSpan('this is some text');
+ *
+ * createImg(
+ * 'https://p5js.org/assets/img/asterisk-01.png',
+ * 'the p5 magenta asterisk'
+ * );
+ *
+ * createA('http://p5js.org/', 'this is a link');
+ *
+ * let slider;
+ * function setup() {
+ * slider = createSlider(0, 255, 100);
+ * slider.position(10, 10);
+ * slider.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * let val = slider.value();
+ * background(val);
+ * }
+ *
+ * let slider;
+ * function setup() {
+ * colorMode(HSB);
+ * slider = createSlider(0, 360, 60, 40);
+ * slider.position(10, 10);
+ * slider.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * let val = slider.value();
+ * background(val, 100, 100, 1);
+ * }
+ *
+ * let button;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(0);
+ * button = createButton('click me');
+ * button.position(19, 19);
+ * button.mousePressed(changeBG);
+ * }
+ *
+ * function changeBG() {
+ * let val = random(255);
+ * background(val);
+ * }
+ *
+ * let checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('label', false);
+ * checkbox.changed(myCheckedEvent);
+ * }
+ *
+ * function myCheckedEvent() {
+ * if (this.checked()) {
+ * console.log('Checking!');
+ * } else {
+ * console.log('Unchecking!');
+ * }
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('pear');
+ * sel.option('kiwi');
+ * sel.option('grape');
+ * sel.selected('kiwi');
+ * sel.changed(mySelectEvent);
+ * }
+ *
+ * function mySelectEvent() {
+ * let item = sel.value();
+ * background(200);
+ * text('It is a ' + item + '!', 50, 50);
+ * }
+ *
+ * let sel;
+ *
+ * function setup() {
+ * textAlign(CENTER);
+ * background(200);
+ * sel = createSelect();
+ * sel.position(10, 10);
+ * sel.option('oil');
+ * sel.option('milk');
+ * sel.option('bread');
+ * sel.disable('milk');
+ * }
+ *
+ * let radio;
+ *
+ * function setup() {
+ * radio = createRadio();
+ * radio.option('black');
+ * radio.option('white');
+ * radio.option('gray');
+ * radio.style('width', '60px');
+ * textAlign(CENTER);
+ * fill(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * let val = radio.value();
+ * background(val);
+ * text(val, width / 2, height / 2);
+ * }
+ *
+ * let radio;
+ *
+ * function setup() {
+ * radio = createRadio();
+ * radio.option('apple', 1);
+ * radio.option('bread', 2);
+ * radio.option('juice', 3);
+ * radio.style('width', '60px');
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let val = radio.value();
+ * if (val) {
+ * text('item cost is $' + val, width / 2, height / 2);
+ * }
+ * }
+ *
+ * let colorPicker;
+ * function setup() {
+ * createCanvas(100, 100);
+ * colorPicker = createColorPicker('#ed225d');
+ * colorPicker.position(0, height + 5);
+ * }
+ *
+ * function draw() {
+ * background(colorPicker.color());
+ * }
+ *
+ * let inp1, inp2;
+ * function setup() {
+ * createCanvas(100, 100);
+ * background('grey');
+ * inp1 = createColorPicker('#ff0000');
+ * inp1.position(0, height + 5);
+ * inp1.input(setShade1);
+ * inp2 = createColorPicker(color('yellow'));
+ * inp2.position(0, height + 30);
+ * inp2.input(setShade2);
+ * setMidShade();
+ * }
+ *
+ * function setMidShade() {
+ * // Finding a shade between the two
+ * let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);
+ * fill(commonShade);
+ * rect(20, 20, 60, 60);
+ * }
+ *
+ * function setShade1() {
+ * setMidShade();
+ * console.log('You are choosing shade 1 to be : ', this.value());
+ * }
+ * function setShade2() {
+ * setMidShade();
+ * console.log('You are choosing shade 2 to be : ', this.value());
+ * }
+ *
+ * function setup() {
+ * let inp = createInput('');
+ * inp.input(myInputEvent);
+ * }
+ *
+ * function myInputEvent() {
+ * console.log('you are typing: ', this.value());
+ * }
+ *
+ * let input;
+ * let img;
+ *
+ * function setup() {
+ * input = createFileInput(handleFile);
+ * input.position(0, 0);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * function handleFile(file) {
+ * print(file);
+ * if (file.type === 'image') {
+ * img = createImg(file.data, '');
+ * img.hide();
+ * } else {
+ * img = null;
+ * }
+ * }
+ *
+ * let vid;
+ * function setup() {
+ * noCanvas();
+ *
+ * vid = createVideo(
+ * ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
+ * vidLoad
+ * );
+ *
+ * vid.size(100, 100);
+ * }
+ *
+ * // This function is called when the video loads
+ * function vidLoad() {
+ * vid.loop();
+ * vid.volume(0);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * // here we set the element to autoplay
+ * // The element will play as soon
+ * // as it is able to do so.
+ * ele.autoplay(true);
+ * }
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(480, 480);
+ * capture = createCapture(VIDEO);
+ * capture.hide();
+ * }
+ *
+ * function draw() {
+ * image(capture, 0, 0, width, width * capture.height / capture.width);
+ * filter(INVERT);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(480, 120);
+ * let constraints = {
+ * video: {
+ * mandatory: {
+ * minWidth: 1280,
+ * minHeight: 720
+ * },
+ * optional: [{ maxFrameRate: 10 }]
+ * },
+ * audio: true
+ * };
+ * createCapture(constraints, function(stream) {
+ * console.log(stream);
+ * });
+ * }
+ *
+ *
+ * let capture;
+ *
+ * function setup() {
+ * createCanvas(640, 480);
+ * capture = createCapture(VIDEO);
+ * }
+ * function draw() {
+ * background(0);
+ * if (capture.loadedmetadata) {
+ * let c = capture.get(0, 0, 100, 100);
+ * image(c, 0, 0);
+ * }
+ * }
+ *
+ *
+ * createElement('h2', 'im an h2 p5.element!');
+ *
+ * let div = createDiv('div');
+ * div.addClass('myClass');
+ *
+ * // In this example, a class is set when the div is created
+ * // and removed when mouse is pressed. This could link up
+ * // with a CSS style rule to toggle style properties.
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('myClass');
+ * }
+ *
+ * function mousePressed() {
+ * div.removeClass('myClass');
+ * }
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('show');
+ * }
+ *
+ * function mousePressed() {
+ * if (div.hasClass('show')) {
+ * div.addClass('show');
+ * } else {
+ * div.removeClass('show');
+ * }
+ * }
+ *
+ * let div;
+ *
+ * function setup() {
+ * div = createDiv('div');
+ * div.addClass('show');
+ * }
+ *
+ * function mousePressed() {
+ * div.toggleClass('show');
+ * }
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div0.child(div1); // use p5.Element
+ *
+ * let div0 = createDiv('this is the parent');
+ * let div1 = createDiv('this is the child');
+ * div1.id('apples');
+ * div0.child('apples'); // use id
+ *
+ * // this example assumes there is a div already on the page
+ * // with id "myChildDiv"
+ * let div0 = createDiv('this is the parent');
+ * let elt = document.getElementById('myChildDiv');
+ * div0.child(elt); // use element from page
+ *
+ * function setup() {
+ * let div = createDiv('').size(10, 10);
+ * div.style('background-color', 'orange');
+ * div.center();
+ * }
+ *
+ * let div = createDiv('').size(100, 100);
+ * div.html('hi');
+ *
+ * let div = createDiv('Hello ').size(100, 100);
+ * div.html('World', true);
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // positions canvas 50px to the right and 100px
+ * // below upper left corner of the window
+ * cnv.position(50, 100);
+ * }
+ *
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * // positions canvas 50px to the right and 100px
+ * // below upper left corner of the window
+ * cnv.position(0, 0, 'fixed');
+ * }
+ *
+ * let myDiv = createDiv('I like pandas.');
+ * myDiv.style('font-size', '18px');
+ * myDiv.style('color', '#ff0000');
+ *
+ * let col = color(25, 23, 200, 50);
+ * let button = createButton('button');
+ * button.style('background-color', col);
+ * button.position(10, 10);
+ *
+ * let myDiv;
+ * function setup() {
+ * background(200);
+ * myDiv = createDiv('I like gray.');
+ * myDiv.position(20, 20);
+ * }
+ *
+ * function draw() {
+ * myDiv.style('font-size', mouseX + 'px');
+ * }
+ *
+ * let myDiv = createDiv('I like pandas.');
+ * myDiv.attribute('align', 'center');
+ *
+ * let button;
+ * let checkbox;
+ *
+ * function setup() {
+ * checkbox = createCheckbox('enable', true);
+ * checkbox.changed(enableButton);
+ * button = createButton('button');
+ * button.position(10, 10);
+ * }
+ *
+ * function enableButton() {
+ * if (this.checked()) {
+ * // Re-enable the button
+ * button.removeAttribute('disabled');
+ * } else {
+ * // Disable the button
+ * button.attribute('disabled', '');
+ * }
+ * }
+ *
+ * // gets the value
+ * let inp;
+ * function setup() {
+ * inp = createInput('');
+ * }
+ *
+ * function mousePressed() {
+ * print(inp.value());
+ * }
+ *
+ * // sets the value
+ * let inp;
+ * function setup() {
+ * inp = createInput('myValue');
+ * }
+ *
+ * function mousePressed() {
+ * inp.value('myValue');
+ * }
+ *
+ * let div = createDiv('div');
+ * div.style('display', 'none');
+ * div.show(); // turns display to block
+ *
+ * let div = createDiv('this is a div');
+ * div.hide();
+ *
+ * let div = createDiv('this is a div');
+ * div.size(100, 100);
+ * let img = createImg(
+ * 'assets/rockies.jpg',
+ * 'A tall mountain with a small forest and field in front of it on a sunny day',
+ * '',
+ * () => {
+ * img.size(10, AUTO);
+ * }
+ * );
+ *
+ * let myDiv = createDiv('this is some text');
+ * myDiv.remove();
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('drop file', width / 2, height / 2);
+ * c.drop(gotFile);
+ * }
+ *
+ * function gotFile(file) {
+ * background(200);
+ * text('received file:', width / 2, height / 2);
+ * text(file.name, width / 2, height / 2 + 50);
+ * }
+ *
+ * let img;
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(200);
+ * textAlign(CENTER);
+ * text('drop image', width / 2, height / 2);
+ * c.drop(gotFile);
+ * }
+ *
+ * function draw() {
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ *
+ * function gotFile(file) {
+ * img = createImg(file.data, '').hide();
+ * }
+ *
+ * let ele;
+ *
+ * function setup() {
+ * background(250);
+ *
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * //We'll set up our example so that
+ * //when you click on the text,
+ * //an alert box displays the MediaElement's
+ * //src field.
+ * textAlign(CENTER);
+ * text('Click Me!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * //Show our p5.MediaElement's src field
+ * alert(ele.src);
+ * }
+ * }
+ *
+ * let ele;
+ *
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/beat.mp3');
+ *
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to Play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * //Here we call the play() function on
+ * //the p5.MediaElement we created above.
+ * //This will start the audio sample.
+ * ele.play();
+ *
+ * background(200);
+ * text('You clicked Play!', width / 2, height / 2);
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and stops a sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * //if the sample is currently playing
+ * //calling the stop() function on
+ * //our p5.MediaElement will stop
+ * //it and reset its current
+ * //time to 0 (i.e. it will start
+ * //at the beginning the next time
+ * //you play it)
+ * ele.stop();
+ *
+ * sampleIsPlaying = false;
+ * text('Click to play!', width / 2, height / 2);
+ * } else {
+ * //loop our sound element until we
+ * //call ele.stop() on it.
+ * ele.loop();
+ *
+ * sampleIsPlaying = true;
+ * text('Click to stop!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and pauses a sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * //Calling pause() on our
+ * //p5.MediaElement will stop it
+ * //playing, but when we call the
+ * //loop() or play() functions
+ * //the sample will start from
+ * //where we paused it.
+ * ele.pause();
+ *
+ * sampleIsPlaying = false;
+ * text('Click to resume!', width / 2, height / 2);
+ * } else {
+ * //loop our sound element until we
+ * //call ele.pause() on it.
+ * ele.loop();
+ *
+ * sampleIsPlaying = true;
+ * text('Click to pause!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //Clicking the canvas will loop
+ * //the audio sample until the user
+ * //clicks again to stop it
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ *
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsLooping = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to loop!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (!sampleIsLooping) {
+ * //loop our sound element until we
+ * //call ele.stop() on it.
+ * ele.loop();
+ *
+ * sampleIsLooping = true;
+ * text('Click to stop!', width / 2, height / 2);
+ * } else {
+ * ele.stop();
+ *
+ * sampleIsLooping = false;
+ * text('Click to loop!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * //This example both starts
+ * //and stops loop of sound sample
+ * //when the user clicks the canvas
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ * //while our audio is playing,
+ * //this will be set to true
+ * let sampleIsPlaying = false;
+ *
+ * function setup() {
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to play!', width / 2, height / 2);
+ * }
+ *
+ * function mouseClicked() {
+ * //here we test if the mouse is over the
+ * //canvas element when it's clicked
+ * if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+ * background(200);
+ *
+ * if (sampleIsPlaying) {
+ * ele.noLoop();
+ * sampleIsPlaying = false;
+ * text('No more Loops!', width / 2, height / 2);
+ * } else {
+ * ele.loop();
+ * sampleIsPlaying = true;
+ * text('Click to stop looping!', width / 2, height / 2);
+ * }
+ * }
+ * }
+ *
+ * let videoElement;
+ * function setup() {
+ * noCanvas();
+ * videoElement = createVideo(['assets/small.mp4'], onVideoLoad);
+ * }
+ * function onVideoLoad() {
+ * // The media will play as soon as it is loaded.
+ * videoElement.autoplay();
+ * videoElement.volume(0);
+ * videoElement.size(100, 100);
+ * }
+ *
+ * let videoElement;
+ * function setup() {
+ * noCanvas();
+ * videoElement = createVideo(['assets/small.mp4'], onVideoLoad);
+ * }
+ * function onVideoLoad() {
+ * // The media will not play untill some explicitly triggered.
+ * videoElement.autoplay(false);
+ * videoElement.volume(0);
+ * videoElement.size(100, 100);
+ * }
+ *
+ * function mouseClicked() {
+ * videoElement.play();
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * // p5.MediaElement objects are usually created
+ * // by calling the createAudio(), createVideo(),
+ * // and createCapture() functions.
+ * // In this example we create
+ * // a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to Play!', width / 2, height / 2);
+ * }
+ * function mouseClicked() {
+ * // Here we call the volume() function
+ * // on the sound element to set its volume
+ * // Volume must be between 0.0 and 1.0
+ * ele.volume(0.2);
+ * ele.play();
+ * background(200);
+ * text('You clicked Play!', width / 2, height / 2);
+ * }
+ *
+ * let audio;
+ * let counter = 0;
+ *
+ * function loaded() {
+ * audio.play();
+ * }
+ *
+ * function setup() {
+ * audio = createAudio('assets/lucky_dragons.mp3', loaded);
+ * textAlign(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (counter === 0) {
+ * background(0, 255, 0);
+ * text('volume(0.9)', width / 2, height / 2);
+ * } else if (counter === 1) {
+ * background(255, 255, 0);
+ * text('volume(0.5)', width / 2, height / 2);
+ * } else if (counter === 2) {
+ * background(255, 0, 0);
+ * text('volume(0.1)', width / 2, height / 2);
+ * }
+ * }
+ *
+ * function mousePressed() {
+ * counter++;
+ * if (counter === 0) {
+ * audio.volume(0.9);
+ * } else if (counter === 1) {
+ * audio.volume(0.5);
+ * } else if (counter === 2) {
+ * audio.volume(0.1);
+ * } else {
+ * counter = 0;
+ * audio.volume(0.9);
+ * }
+ * }
+ *
+ *
+ * //Clicking the canvas will loop
+ * //the audio sample until the user
+ * //clicks again to stop it
+ *
+ * //We will store the p5.MediaElement
+ * //object in here
+ * let ele;
+ * let button;
+ *
+ * function setup() {
+ * createCanvas(710, 400);
+ * //Here we create a p5.MediaElement object
+ * //using the createAudio() function.
+ * ele = createAudio('assets/beat.mp3');
+ * ele.loop();
+ * background(200);
+ *
+ * button = createButton('2x speed');
+ * button.position(100, 68);
+ * button.mousePressed(twice_speed);
+ *
+ * button = createButton('half speed');
+ * button.position(200, 68);
+ * button.mousePressed(half_speed);
+ *
+ * button = createButton('reverse play');
+ * button.position(300, 68);
+ * button.mousePressed(reverse_speed);
+ *
+ * button = createButton('STOP');
+ * button.position(400, 68);
+ * button.mousePressed(stop_song);
+ *
+ * button = createButton('PLAY!');
+ * button.position(500, 68);
+ * button.mousePressed(play_speed);
+ * }
+ *
+ * function twice_speed() {
+ * ele.speed(2);
+ * }
+ *
+ * function half_speed() {
+ * ele.speed(0.5);
+ * }
+ *
+ * function reverse_speed() {
+ * ele.speed(-1);
+ * }
+ *
+ * function stop_song() {
+ * ele.stop();
+ * }
+ *
+ * function play_speed() {
+ * ele.play();
+ * }
+ *
+ * let ele;
+ * let beginning = true;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ *
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('start at beginning', width / 2, height / 2);
+ * }
+ *
+ * // this function fires with click anywhere
+ * function mousePressed() {
+ * if (beginning === true) {
+ * // here we start the sound at the beginning
+ * // time(0) is not necessary here
+ * // as this produces the same result as
+ * // play()
+ * ele.play().time(0);
+ * background(200);
+ * text('jump 2 sec in', width / 2, height / 2);
+ * beginning = false;
+ * } else {
+ * // here we jump 2 seconds into the sound
+ * ele.play().time(2);
+ * background(250);
+ * text('start at beginning', width / 2, height / 2);
+ * beginning = true;
+ * }
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio().
+ * ele = createAudio('assets/doorbell.mp3');
+ * background(250);
+ * textAlign(CENTER);
+ * text('Click to know the duration!', 10, 25, 70, 80);
+ * }
+ * function mouseClicked() {
+ * ele.play();
+ * background(200);
+ * //ele.duration dislpays the duration
+ * text(ele.duration() + ' seconds', width / 2, height / 2);
+ * }
+ *
+ * function setup() {
+ * let audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ * audioEl.onended(sayDone);
+ * }
+ *
+ * function sayDone(elt) {
+ * alert('done playing ' + elt.src);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio()
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to Show Controls!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * ele.showControls();
+ * background(200);
+ * text('Controls Shown', width / 2, height / 2);
+ * }
+ *
+ * let ele;
+ * function setup() {
+ * //p5.MediaElement objects are usually created
+ * //by calling the createAudio(), createVideo(),
+ * //and createCapture() functions.
+ * //In this example we create
+ * //a new p5.MediaElement via createAudio()
+ * ele = createAudio('assets/lucky_dragons.mp3');
+ * ele.showControls();
+ * background(200);
+ * textAlign(CENTER);
+ * text('Click to hide Controls!', 10, 25, 70, 80);
+ * }
+ * function mousePressed() {
+ * ele.hideControls();
+ * background(200);
+ * text('Controls hidden', width / 2, height / 2);
+ * }
+ *
+ * //
+ * //
+ * function setup() {
+ * noCanvas();
+ *
+ * let audioEl = createAudio('assets/beat.mp3');
+ * audioEl.showControls();
+ *
+ * // schedule three calls to changeBackground
+ * audioEl.addCue(0.5, changeBackground, color(255, 0, 0));
+ * audioEl.addCue(1.0, changeBackground, color(0, 255, 0));
+ * audioEl.addCue(2.5, changeBackground, color(0, 0, 255));
+ * audioEl.addCue(3.0, changeBackground, color(0, 255, 255));
+ * audioEl.addCue(4.2, changeBackground, color(255, 255, 0));
+ * audioEl.addCue(5.0, changeBackground, color(255, 255, 0));
+ * }
+ *
+ * function changeBackground(val) {
+ * background(val);
+ * }
+ *
+ * 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);
+ * }
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationX);
+ * }
+ *
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationY);
+ * }
+ *
+ *
+ * // Move a touchscreen device to register
+ * // acceleration changes.
+ * function draw() {
+ * background(220, 50);
+ * fill('magenta');
+ * ellipse(width / 2, height / 2, accelerationZ);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateZ(radians(rotationZ));
+ * //rotateX(radians(rotationX));
+ * //rotateY(radians(rotationY));
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * // 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);
+ *
+ *
+ * // 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);
+ *
+ *
+ * // 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);
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // You will need to move the device incrementally further
+ * // the closer the square's color gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 0.5;
+ * function setup() {
+ * setMoveThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 0.1;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setMoveThreshold(threshold);
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // You will need to shake the device more firmly
+ * // the closer the box's fill gets to white in order to change the value.
+ *
+ * let value = 0;
+ * let threshold = 30;
+ * function setup() {
+ * setShakeThreshold(threshold);
+ * }
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * threshold = threshold + 5;
+ * if (value > 255) {
+ * value = 0;
+ * threshold = 30;
+ * }
+ * setShakeThreshold(threshold);
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // Move the device around
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees
+ * // to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // Rotate the device by 90 degrees in the
+ * // X-axis to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceTurned() {
+ * if (turnAxis === 'X') {
+ * if (value === 0) {
+ * value = 255;
+ * } else if (value === 255) {
+ * value = 0;
+ * }
+ * }
+ * }
+ *
+ *
+ * // Run this example on a mobile device
+ * // Shake the device to change the value.
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function deviceShaken() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function draw() {
+ * if (keyIsPressed === true) {
+ * fill(0);
+ * } else {
+ * fill(255);
+ * }
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ *
+ * // Click any key to display it!
+ * // (Not Guaranteed to be Case Sensitive)
+ * function setup() {
+ * fill(245, 123, 158);
+ * textSize(50);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * text(key, 33, 65); // Display last key pressed.
+ * }
+ *
+ * let fillVal = 126;
+ * function draw() {
+ * fill(fillVal);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function keyPressed() {
+ * if (keyCode === UP_ARROW) {
+ * fillVal = 255;
+ * } else if (keyCode === DOWN_ARROW) {
+ * fillVal = 0;
+ * }
+ * return false; // prevent default
+ * }
+ *
+ * function draw() {}
+ * function keyPressed() {
+ * background('yellow');
+ * text(`${key} ${keyCode}`, 10, 40);
+ * print(key, ' ', keyCode);
+ * return false; // prevent default
+ * }
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyPressed() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyPressed() {
+ * if (keyCode === LEFT_ARROW) {
+ * value = 255;
+ * } else if (keyCode === RIGHT_ARROW) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function keyPressed() {
+ * // Do something
+ * return false; // prevent any default behaviour
+ * }
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * return false; // prevent any default behavior
+ * }
+ *
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function keyTyped() {
+ * if (key === 'a') {
+ * value = 255;
+ * } else if (key === 'b') {
+ * value = 0;
+ * }
+ * // uncomment to prevent any default behavior
+ * // return false;
+ * }
+ *
+ *
+ * let x = 100;
+ * let y = 100;
+ *
+ * function setup() {
+ * createCanvas(512, 512);
+ * fill(255, 0, 0);
+ * }
+ *
+ * function draw() {
+ * if (keyIsDown(LEFT_ARROW)) {
+ * x -= 5;
+ * }
+ *
+ * if (keyIsDown(RIGHT_ARROW)) {
+ * x += 5;
+ * }
+ *
+ * if (keyIsDown(UP_ARROW)) {
+ * y -= 5;
+ * }
+ *
+ * if (keyIsDown(DOWN_ARROW)) {
+ * y += 5;
+ * }
+ *
+ * clear();
+ * ellipse(x, y, 50, 50);
+ * }
+ *
+ * let diameter = 50;
+ *
+ * function setup() {
+ * createCanvas(512, 512);
+ * }
+ *
+ * function draw() {
+ * // 107 and 187 are keyCodes for "+"
+ * if (keyIsDown(107) || keyIsDown(187)) {
+ * diameter += 1;
+ * }
+ *
+ * // 109 and 189 are keyCodes for "-"
+ * if (keyIsDown(109) || keyIsDown(189)) {
+ * diameter -= 1;
+ * }
+ *
+ * clear();
+ * fill(255, 0, 0);
+ * ellipse(50, 50, diameter, diameter);
+ * }
+ *
+ * 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);
+ * }
+ *
+ *
+ * let y = 50;
+ * function setup() {
+ * rectMode(CENTER);
+ * }
+ *
+ * function draw() {
+ * if (y > 48) {
+ * y -= 2;
+ * } else if (y < 48) {
+ * y += 2;
+ * }
+ * y += floor(movedY / 5);
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(y, 50, 50, 50);
+ * }
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, 0, mouseX, 100);
+ * }
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(0, mouseY, 100, mouseY);
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * if (mouseIsPressed) {
+ * if (mouseButton === LEFT) {
+ * ellipse(50, 50, 50, 50);
+ * }
+ * if (mouseButton === RIGHT) {
+ * rect(25, 25, 50, 50);
+ * }
+ * if (mouseButton === CENTER) {
+ * triangle(23, 75, 50, 20, 78, 75);
+ * }
+ * }
+ *
+ * print(mouseButton);
+ * }
+ *
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ *
+ * if (mouseIsPressed) {
+ * ellipse(50, 50, 50, 50);
+ * } else {
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * print(mouseIsPressed);
+ * }
+ *
+ *
+ * // Move the mouse across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mouseMoved() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseMoved(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Drag the mouse across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseDragged() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mouseDragged() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseDragged(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mousePressed() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mousePressed() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mousePressed(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function mouseReleased() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mouseReleased() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseReleased(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function mouseClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function mouseClicked() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function mouseClicked(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Click within the image to change
+ * // the value of the rectangle
+ * // after the mouse has been double clicked
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * function doubleClicked() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function doubleClicked() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a MouseEvent object
+ * // as a callback argument
+ * function doubleClicked(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * let pos = 25;
+ *
+ * function draw() {
+ * background(237, 34, 93);
+ * fill(0);
+ * rect(25, pos, 50, 50);
+ * }
+ *
+ * function mouseWheel(event) {
+ * print(event.delta);
+ * //move the square according to the vertical scroll amount
+ * pos += event.delta;
+ * //uncomment to block page scrolling
+ * //return false;
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * //click the canvas to lock the pointer
+ * //click again to exit (otherwise escape)
+ * let locked = false;
+ * function draw() {
+ * background(237, 34, 93);
+ * }
+ * function mouseClicked() {
+ * if (!locked) {
+ * locked = true;
+ * requestPointerLock();
+ * } else {
+ * exitPointerLock();
+ * locked = false;
+ * }
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * // Touch within the image to change
+ * // the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchStarted() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function touchStarted() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchStarted(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Move your finger across the page
+ * // to change its value
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchMoved() {
+ * value = value + 5;
+ * if (value > 255) {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function touchMoved() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchMoved(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * // Release touch within the image to
+ * // change the value of the rectangle
+ *
+ * let value = 0;
+ * function draw() {
+ * fill(value);
+ * rect(25, 25, 50, 50);
+ * }
+ * function touchEnded() {
+ * if (value === 0) {
+ * value = 255;
+ * } else {
+ * value = 0;
+ * }
+ * }
+ *
+ *
+ * function touchEnded() {
+ * ellipse(mouseX, mouseY, 5, 5);
+ * // prevent default
+ * return false;
+ * }
+ *
+ *
+ * // returns a TouchEvent object
+ * // as a callback argument
+ * function touchEnded(event) {
+ * console.log(event);
+ * }
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ * image(img, 34, 34);
+ *
+ *
+ * let pink = color(255, 102, 204);
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (img.width * d) * (img.height / 2 * d);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * img.pixels[i] = red(pink);
+ * img.pixels[i + 1] = green(pink);
+ * img.pixels[i + 2] = blue(pink);
+ * img.pixels[i + 3] = alpha(pink);
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(255, 0, 0);
+ * saveCanvas(c, 'myCanvas', 'jpg');
+ * }
+ *
+ * // note that this example has the same result as above
+ * // if no canvas is specified, defaults to main canvas
+ * function setup() {
+ * let c = createCanvas(100, 100);
+ * background(255, 0, 0);
+ * saveCanvas('myCanvas', 'jpg');
+ *
+ * // all of the following are valid
+ * saveCanvas(c, 'myCanvas', 'jpg');
+ * saveCanvas(c, 'myCanvas.jpg');
+ * saveCanvas(c, 'myCanvas');
+ * saveCanvas(c);
+ * saveCanvas('myCanvas', 'png');
+ * saveCanvas('myCanvas');
+ * saveCanvas();
+ * }
+ *
+ * function draw() {
+ * background(mouseX);
+ * }
+ *
+ * function mousePressed() {
+ * saveFrames('out', 'png', 1, 25, data => {
+ * print(data);
+ * });
+ * }
+
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * }
+ *
+ *
+ * function setup() {
+ * // here we use a callback to display the image after loading
+ * loadImage('assets/laDefense.jpg', img => {
+ * image(img, 0, 0);
+ * });
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * // Top-left corner of the img is at (0, 0)
+ * // Width and height are the img's original width and height
+ * image(img, 0, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * background(50);
+ * // Top-left corner of the img is at (10, 10)
+ * // Width and height are 50 x 50
+ * image(img, 10, 10, 50, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * // Here, we use a callback to display the image after loading
+ * loadImage('assets/laDefense.jpg', img => {
+ * image(img, 0, 0);
+ * });
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/gradient.png');
+ * }
+ * function setup() {
+ * // 1. Background image
+ * // Top-left corner of the img is at (0, 0)
+ * // Width and height are the img's original width and height, 100 x 100
+ * image(img, 0, 0);
+ * // 2. Top right image
+ * // Top-left corner of destination rectangle is at (50, 0)
+ * // Destination rectangle width and height are 40 x 20
+ * // The next parameters are relative to the source image:
+ * // - Starting at position (50, 50) on the source image, capture a 50 x 50
+ * // subsection
+ * // - Draw this subsection to fill the dimensions of the destination rectangle
+ * image(img, 50, 0, 40, 20, 50, 50, 50, 50);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(0, 153, 204); // Tint blue
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(0, 153, 204, 126); // Tint blue and set transparency
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * tint(255, 126); // Apply transparency without changing color
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * tint(0, 153, 204); // Tint blue
+ * image(img, 0, 0);
+ * noTint(); // Disable tint
+ * image(img, 50, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CORNER);
+ * image(img, 10, 10, 50, 50);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CORNERS);
+ * image(img, 10, 10, 90, 40);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * imageMode(CENTER);
+ * image(img, 50, 50, 80, 80);
+ * }
+ *
+ *
+ * function setup() {
+ * let img = createImage(100, 100); // same as new p5.Image(100, 100);
+ * img.loadPixels();
+ * createCanvas(100, 100);
+ * background(0);
+ *
+ * // helper for writing color to array
+ * function writeColor(image, x, y, red, green, blue, alpha) {
+ * let index = (x + y * width) * 4;
+ * image.pixels[index] = red;
+ * image.pixels[index + 1] = green;
+ * image.pixels[index + 2] = blue;
+ * image.pixels[index + 3] = alpha;
+ * }
+ *
+ * let x, y;
+ * // fill with random colors
+ * for (y = 0; y < img.height; y++) {
+ * for (x = 0; x < img.width; x++) {
+ * let red = random(255);
+ * let green = random(255);
+ * let blue = random(255);
+ * let alpha = 255;
+ * writeColor(img, x, y, red, green, blue, alpha);
+ * }
+ * }
+ *
+ * // draw a red line
+ * y = 0;
+ * for (x = 0; x < img.width; x++) {
+ * writeColor(img, x, y, 255, 0, 0, 255);
+ * }
+ *
+ * // draw a green line
+ * y = img.height - 1;
+ * for (x = 0; x < img.width; x++) {
+ * writeColor(img, x, y, 0, 255, 0, 255);
+ * }
+ *
+ * img.updatePixels();
+ * image(img, 0, 0);
+ * }
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * image(img, 0, 0);
+ * for (let i = 0; i < img.width; i++) {
+ * let c = img.get(i, img.height / 2);
+ * stroke(c);
+ * line(i, height / 2, i, height);
+ * }
+ * }
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * image(img, 0, 0);
+ * for (let i = 0; i < img.height; i++) {
+ * let c = img.get(img.width / 2, i);
+ * stroke(c);
+ * line(0, i, width / 2, i);
+ * }
+ * }
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ * let pink = color(255, 102, 204);
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < 4 * (width * height / 2); i += 4) {
+ * img.pixels[i] = red(pink);
+ * img.pixels[i + 1] = green(pink);
+ * img.pixels[i + 2] = blue(pink);
+ * img.pixels[i + 3] = alpha(pink);
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ *
+ *
+ * let myImage;
+ * let halfImage;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * myImage.loadPixels();
+ * halfImage = 4 * myImage.width * myImage.height / 2;
+ * for (let i = 0; i < halfImage; i++) {
+ * myImage.pixels[i + halfImage] = myImage.pixels[i];
+ * }
+ * myImage.updatePixels();
+ * }
+ *
+ * function draw() {
+ * image(myImage, 0, 0, width, height);
+ * }
+ *
+ * let myImage;
+ * let halfImage;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * myImage.loadPixels();
+ * halfImage = 4 * myImage.width * myImage.height / 2;
+ * for (let i = 0; i < halfImage; i++) {
+ * myImage.pixels[i + halfImage] = myImage.pixels[i];
+ * }
+ * myImage.updatePixels();
+ * }
+ *
+ * function draw() {
+ * image(myImage, 0, 0, width, height);
+ * }
+ *
+ * let myImage;
+ * let c;
+ *
+ * function preload() {
+ * myImage = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * background(myImage);
+ * noStroke();
+ * c = myImage.get(60, 90);
+ * fill(c);
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ * //get() returns color here
+ *
+ * let img = createImage(66, 66);
+ * img.loadPixels();
+ * for (let i = 0; i < img.width; i++) {
+ * for (let j = 0; j < img.height; j++) {
+ * img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
+ * }
+ * }
+ * img.updatePixels();
+ * image(img, 17, 17);
+ * image(img, 34, 34);
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+
+ * function draw() {
+ * image(img, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * img.resize(50, 100);
+ * }
+ *
+ * let photo;
+ * let bricks;
+ * let x;
+ * let y;
+ *
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * x = bricks.width / 2;
+ * y = bricks.height / 2;
+ * photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+ * image(photo, 0, 0);
+ * }
+ *
+ * let photo, maskImage;
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * maskImage = loadImage('assets/mask2.png');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * photo.mask(maskImage);
+ * image(photo, 0, 0);
+ * }
+ *
+ * let photo1;
+ * let photo2;
+ *
+ * function preload() {
+ * photo1 = loadImage('assets/rockies.jpg');
+ * photo2 = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * photo2.filter(GRAY);
+ * image(photo1, 0, 0);
+ * image(photo2, width / 2, 0);
+ * }
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ * image(mountains, 0, 0);
+ * image(bricks, 0, 0);
+ * }
+ *
+ * let photo;
+ *
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function draw() {
+ * image(photo, 0, 0);
+ * }
+ *
+ * function keyTyped() {
+ * if (key === 's') {
+ * photo.save('photo', 'png');
+ * }
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * // The GIF file that we loaded only loops once
+ * // so it freezes on the last frame after playing through
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * // Click to reset the GIF and begin playback from start
+ * gif.reset();
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * let frame = gif.getCurrentFrame();
+ * image(gif, 0, 0);
+ * text(frame, 10, 90);
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * // Move your mouse up and down over canvas to see the GIF
+ * // frames animate
+ * function draw() {
+ * gif.pause();
+ * image(gif, 0, 0);
+ * // Get the highest frame number which is the number of frames - 1
+ * let maxFrame = gif.numFrames() - 1;
+ * // Set the current frame that is mapped to be relative to mouse position
+ * let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));
+ * gif.setFrame(frameNumber);
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * // Move your mouse up and down over canvas to see the GIF
+ * // frames animate
+ * function draw() {
+ * gif.pause();
+ * image(gif, 0, 0);
+ * // Get the highest frame number which is the number of frames - 1
+ * let maxFrame = gif.numFrames() - 1;
+ * // Set the current frame that is mapped to be relative to mouse position
+ * let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));
+ * gif.setFrame(frameNumber);
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ * let gif;
+ *
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ * }
+ *
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ * let gifFast, gifSlow;
+ *
+ * function preload() {
+ * gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * gifFast.resize(width / 2, height / 2);
+ * gifSlow.resize(width / 2, height / 2);
+ *
+ * //Change the delay here
+ * gifFast.delay(10);
+ * gifSlow.delay(100);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gifFast, 0, 0);
+ * image(gifSlow, width / 2, 0);
+ * }
+ *
+ * let pink = color(255, 102, 204);
+ * loadPixels();
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height / 2 * d);
+ * for (let i = 0; i < halfImage; i += 4) {
+ * pixels[i] = red(pink);
+ * pixels[i + 1] = green(pink);
+ * pixels[i + 2] = blue(pink);
+ * pixels[i + 3] = alpha(pink);
+ * }
+ * updatePixels();
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ * }
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ * }
+ *
+ * let img0;
+ * let img1;
+ *
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img0);
+ * image(img1, 0, 0);
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ * }
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * background(img);
+ * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+ * stroke(255);
+ * noFill();
+ * // Rectangle shows area being copied
+ * rect(7, 22, 10, 10);
+ * }
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(THRESHOLD);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(GRAY);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(OPAQUE);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(INVERT);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(POSTERIZE, 3);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(DILATE);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(BLUR, 3);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * filter(ERODE);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get();
+ * image(c, width / 2, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ * function setup() {
+ * image(img, 0, 0);
+ * let c = get(50, 90);
+ * fill(c);
+ * noStroke();
+ * rect(25, 25, 50, 50);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0, width, height);
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height * d / 2);
+ * loadPixels();
+ * for (let i = 0; i < halfImage; i++) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ * updatePixels();
+ * }
+ *
+ *
+ * let black = color(0);
+ * set(30, 20, black);
+ * set(85, 20, black);
+ * set(85, 75, black);
+ * set(30, 75, black);
+ * updatePixels();
+ *
+ *
+ * for (let i = 30; i < width - 15; i++) {
+ * for (let j = 20; j < height - 25; j++) {
+ * let c = color(204 - j, 153 - i, 0);
+ * set(i, j, c);
+ * }
+ * }
+ * updatePixels();
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * set(0, 0, img);
+ * updatePixels();
+ * line(0, 0, width, height);
+ * line(0, height, width, 0);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * image(img, 0, 0, width, height);
+ * let d = pixelDensity();
+ * let halfImage = 4 * (width * d) * (height * d / 2);
+ * loadPixels();
+ * for (let i = 0; i < halfImage; i++) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ * updatePixels();
+ * }
+ *
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+ * 'summary/all_day.geojson';
+ * earthquakes = loadJSON(url);
+ * }
+ *
+ * function setup() {
+ * noLoop();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * }
+ *
+ * function setup() {
+ * noLoop();
+ * let url =
+ 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+ * 'summary/all_day.geojson';
+ * loadJSON(url, drawEarthquake);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * }
+ *
+ * function drawEarthquake(earthquakes) {
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * }
+ *
+ * let result;
+ * function preload() {
+ * result = loadStrings('assets/test.txt');
+ * }
+
+ * function setup() {
+ * background(200);
+ * text(random(result), 10, 10, 80, 80);
+ * }
+ *
+ * function setup() {
+ * loadStrings('assets/test.txt', pickString);
+ * }
+ *
+ * function pickString(result) {
+ * background(200);
+ * text(random(result), 10, 10, 80, 80);
+ * }
+ *
+ * // Given the following CSV file called "mammals.csv"
+ * // located in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * //the file can be remote
+ * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+ * // "csv", "header");
+ * }
+ *
+ * function setup() {
+ * //count the columns
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ *
+ * print(table.getColumn('name'));
+ * //["Goat", "Leopard", "Zebra"]
+ *
+ * //cycle through the table
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(table.getString(r, c));
+ * }
+ * }
+ *
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < children.length; i++) {
+ * let id = children[i].getNum('id');
+ * let coloring = children[i].getString('species');
+ * let name = children[i].getContent();
+ * print(id + ', ' + coloring + ', ' + name);
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // 0, Capra hircus, Goat
+ * // 1, Panthera pardus, Leopard
+ * // 2, Equus zebra, Zebra
+ *
+ * let data;
+ *
+ * function preload() {
+ * data = loadBytes('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * for (let i = 0; i < 5; i++) {
+ * console.log(data.bytes[i].toString(16));
+ * }
+ * }
+ *
httpDo(path, 'GET')
. The 'binary' datatype will return
+ * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+ * which can be used to initialize typed arrays (such as Uint8Array).
+ *
+ * @method httpGet
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "binary", "arrayBuffer",
+ * "xml", or "text"
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpGet() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ * @example
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+ * 'format=geojson&limit=1&orderby=time';
+ * httpGet(url, 'jsonp', false, function(response) {
+ * // when the HTTP request completes, populate the variable that holds the
+ * // earthquake data used in the visualization.
+ * earthquakes = response;
+ * });
+ * }
+ *
+ * function draw() {
+ * if (!earthquakes) {
+ * // Wait until the earthquake data has loaded before drawing.
+ * return;
+ * }
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * noLoop();
+ * }
+ *
httpDo(path, 'POST')
.
+ *
+ * @method httpPost
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "xml", or "text".
+ * If omitted, httpPost() will guess.
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {function} [callback] function to be executed after
+ * httpPost() completes, data is passed in
+ * as first argument
+ * @param {function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ *
+ * @example
+ *
+ * // Examples use jsonplaceholder.typicode.com for a Mock Data API
+ *
+ * let url = 'https://jsonplaceholder.typicode.com/posts';
+ * let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is way cool.' };
+ *
+ * function setup() {
+ * createCanvas(800, 800);
+ * }
+ *
+ * function mousePressed() {
+ * // Pick new random color values
+ * let r = random(255);
+ * let g = random(255);
+ * let b = random(255);
+ *
+ * httpPost(url, 'json', postData, function(result) {
+ * strokeWeight(2);
+ * stroke(r, g, b);
+ * fill(r, g, b, 127);
+ * ellipse(mouseX, mouseY, 200, 200);
+ * text(result.body, mouseX, mouseY);
+ * });
+ * }
+ *
+ *
+ * let url = 'ttps://invalidURL'; // A bad URL that will cause errors
+ * let postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };
+ *
+ * function setup() {
+ * createCanvas(800, 800);
+ * }
+ *
+ * function mousePressed() {
+ * // Pick new random color values
+ * let r = random(255);
+ * let g = random(255);
+ * let b = random(255);
+ *
+ * httpPost(
+ * url,
+ * 'json',
+ * postData,
+ * function(result) {
+ * // ... won't be called
+ * },
+ * function(error) {
+ * strokeWeight(2);
+ * stroke(r, g, b);
+ * fill(r, g, b, 127);
+ * text(error.toString(), mouseX, mouseY);
+ * }
+ * );
+ * }
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ *
+ * // displays an animation of all USGS earthquakes
+ * let earthquakes;
+ * let eqFeatureIndex = 0;
+ *
+ * function preload() {
+ * let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+ * httpDo(
+ * url,
+ * {
+ * method: 'GET',
+ * // Other Request options, like special headers for apis
+ * headers: { authorization: 'Bearer secretKey' }
+ * },
+ * function(res) {
+ * earthquakes = res;
+ * }
+ * );
+ * }
+ *
+ * function draw() {
+ * // wait until the data is loaded
+ * if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+ * return;
+ * }
+ * clear();
+ *
+ * let feature = earthquakes.features[eqFeatureIndex];
+ * let mag = feature.properties.mag;
+ * let rad = mag / 11 * ((width + height) / 2);
+ * fill(255, 0, 0, 100);
+ * ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+ *
+ * if (eqFeatureIndex >= earthquakes.features.length) {
+ * eqFeatureIndex = 0;
+ * } else {
+ * eqFeatureIndex += 1;
+ * }
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * 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();
+ *
+ *
+ * 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();
+ *
+ *
+ * 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();
+ *
+ * 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();
+ *
+ *
+ * // create a file called 'newFile2.txt'
+ * let writer = createWriter('newFile2.txt');
+ * // write some data to the file
+ * writer.write([100, 101, 102]);
+ * // close the PrintWriter and save the file
+ * writer.close();
+ *
+ * true
indicates that the
+ * output will be optimized for filesize,
+ * rather than readability.
+ *
+ * @example
+ *
+ * // Saves the canvas as an image
+ * cnv = createCanvas(300, 300);
+ * save(cnv, 'myCanvas.jpg');
+ *
+ * // Saves the canvas as an image by default
+ * save('myCanvas.jpg');
+ *
+ * // Saves p5.Image as an image
+ * img = createImage(10, 10);
+ * save(img, 'myImage.png');
+ *
+ * // Saves p5.Renderer object as an image
+ * obj = createGraphics(100, 100);
+ * save(obj, 'myObject.png');
+ *
+ * let myTable = new p5.Table();
+ * // Saves table as html file
+ * save(myTable, 'myTable.html');
+ *
+ * // Comma Separated Values
+ * save(myTable, 'myTable.csv');
+ *
+ * // Tab Separated Values
+ * save(myTable, 'myTable.tsv');
+ *
+ * let myJSON = { a: 1, b: true };
+ *
+ * // Saves pretty JSON
+ * save(myJSON, 'my.json');
+ *
+ * // Optimizes JSON filesize
+ * save(myJSON, 'my.json', true);
+ *
+ * // Saves array of strings to text file with line breaks after each item
+ * let arrayOfStrings = ['a', 'b'];
+ * save(arrayOfStrings, 'my.txt');
+ *
+ * let json = {}; // new JSON Object
+ *
+ * json.id = 0;
+ * json.species = 'Panthera leo';
+ * json.name = 'Lion';
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * saveJSON(json, 'lion.json');
+ * }
+ * }
+ *
+ * // saves the following to a file called "lion.json":
+ * // {
+ * // "id": 0,
+ * // "species": "Panthera leo",
+ * // "name": "Lion"
+ * // }
+ *
+ * let words = 'apple bear cat dog';
+ *
+ * // .split() outputs an Array
+ * let list = split(words, ' ');
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * text('click here to save', 10, 10, 70, 80);
+ * }
+ *
+ * function mousePressed() {
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * saveStrings(list, 'nouns.txt');
+ * }
+ * }
+ *
+ * // Saves the following to a file called 'nouns.txt':
+ * //
+ * // apple
+ * // bear
+ * // cat
+ * // dog
+ *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('id');
+ * table.addColumn('species');
+ * table.addColumn('name');
+ *
+ * let newRow = table.addRow();
+ * newRow.setNum('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Panthera leo');
+ * newRow.setString('name', 'Lion');
+ *
+ * // To save, un-comment next line then click 'run'
+ * // saveTable(table, 'new.csv');
+ * }
+ *
+ * // Saves the following to a file called 'new.csv':
+ * // id,species,name
+ * // 0,Panthera leo,Lion
+ *
'.concat(e)); + pWriter.print(' | '); + } + pWriter.print('
'.concat(htmlEntry)); + pWriter.print(' | '); + } + pWriter.print('
+ * // 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]);
+ * }
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // 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));
+ * }
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // 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'));
+ * }
+ *
+ *
+ * // 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');
+ * }
+ *
+ *
+ * // 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"
+ * }
+ *
+ *
+ * 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
+ *
+ *
+ * // 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"]
+ * }
+ *
+ *
+ * // 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');
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * // 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"
+ *
+ * // 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());
+ * }
+ *
+ *
+ * // 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));
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.setNum(1, 'id', 1);
+ *
+ * print(table.getColumn(0));
+ * //["0", 1, "2"]
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * print(table.getArray());
+ * }
+ *
+ * // 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
+ * }
+ *
+ *
+ * // 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
+ * }
+ *
+ *
+ * // 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
+ * }
+ *
+ *
+ * // 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
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leoperd
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableArray = table.getArray();
+ * for (let i = 0; i < tableArray.length; i++) {
+ * print(tableArray[i]);
+ * }
+ * }
+ *
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * print(table.getArray());
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].setNum('id', r + 10);
+ * }
+ *
+ * print(table.getArray());
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * let name = rows[r].getString('name');
+ * rows[r].setString('name', 'A ' + name + ' named George');
+ * }
+ *
+ * print(table.getArray());
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let names = [];
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * names.push(rows[r].get('name'));
+ * }
+ *
+ * print(names);
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let minId = Infinity;
+ * let maxId = -Infinity;
+ * for (let r = 0; r < rows.length; r++) {
+ * let id = rows[r].getNum('id');
+ * minId = min(minId, id);
+ * maxId = min(maxId, id);
+ * }
+ * print('minimum id = ' + minId + ', maximum id = ' + maxId);
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let longest = '';
+ * for (let r = 0; r < rows.length; r++) {
+ * let species = rows[r].getString('species');
+ * if (longest.length < species.length) {
+ * longest = species;
+ * }
+ * }
+ *
+ * print('longest: ' + longest);
+ * }
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < children.length; i++) {
+ * let id = children[i].getNum('id');
+ * let coloring = children[i].getString('species');
+ * let name = children[i].getContent();
+ * print(id + ', ' + coloring + ', ' + name);
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // 0, Capra hircus, Goat
+ * // 1, Panthera pardus, Leopard
+ * // 2, Equus zebra, Zebra
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let children = xml.getChildren('animal');
+ * let parent = children[1].getParent();
+ * print(parent.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.getName());
+ * xml.setName('fish');
+ * print(xml.getName());
+ * }
+ *
+ * // Sketch prints:
+ * // mammals
+ * // fish
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.hasChildren());
+ * }
+ *
+ * // Sketch prints:
+ * // true
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.listChildren());
+ * }
+ *
+ * // Sketch prints:
+ * // ["animal", "animal", "animal"]
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let animals = xml.getChildren('animal');
+ *
+ * for (let i = 0; i < animals.length; i++) {
+ * print(animals[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let secondChild = xml.getChild(1);
+ * print(secondChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Leopard"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let child = new p5.XML();
+ * child.setName('animal');
+ * child.setAttribute('id', '3');
+ * child.setAttribute('species', 'Ornithorhynchus anatinus');
+ * child.setContent('Platypus');
+ * xml.addChild(child);
+ *
+ * let animals = xml.getChildren('animal');
+ * print(animals[animals.length - 1].getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * xml.removeChild('animal');
+ * let children = xml.getChildren();
+ * for (let i = 0; i < children.length; i++) {
+ * print(children[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Leopard"
+ * // "Zebra"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * xml.removeChild(1);
+ * let children = xml.getChildren();
+ * for (let i = 0; i < children.length; i++) {
+ * print(children[i].getContent());
+ * }
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getAttributeCount());
+ * }
+ *
+ * // Sketch prints:
+ * // 2
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.listAttributes());
+ * }
+ *
+ * // Sketch prints:
+ * // ["id", "species"]
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.hasAttribute('species'));
+ * print(firstChild.hasAttribute('color'));
+ * }
+ *
+ * // Sketch prints:
+ * // true
+ * // false
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getNum('id'));
+ * }
+ *
+ * // Sketch prints:
+ * // 0
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getString('species'));
+ * }
+ *
+ * // Sketch prints:
+ * // "Capra hircus"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getString('species'));
+ * firstChild.setAttribute('species', 'Jamides zebra');
+ * print(firstChild.getString('species'));
+ * }
+ *
+ * // Sketch prints:
+ * // "Capra hircus"
+ * // "Jamides zebra"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ *
+ * // The following short XML file called "mammals.xml" is parsed
+ * // in the code below.
+ * //
+ * //
+ * // <mammals>
+ * // <animal id="0" species="Capra hircus">Goat</animal>
+ * // <animal id="1" species="Panthera pardus">Leopard</animal>
+ * // <animal id="2" species="Equus zebra">Zebra</animal>
+ * // </mammals>
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * let firstChild = xml.getChild('animal');
+ * print(firstChild.getContent());
+ * firstChild.setContent('Mountain Goat');
+ * print(firstChild.getContent());
+ * }
+ *
+ * // Sketch prints:
+ * // "Goat"
+ * // "Mountain Goat"
+ *
+ * let xml;
+ *
+ * function preload() {
+ * xml = loadXML('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * print(xml.serialize());
+ * }
+ *
+ * // Sketch prints:
+ * //
+ * // Goat
+ * // Leopard
+ * // Zebra
+ * //
+ *
+ * function setup() {
+ * let x = -3;
+ * let y = abs(x);
+ *
+ * print(x); // -3
+ * print(y); // 3
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * // map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * //Get the ceiling of the mapped number.
+ * let bx = ceil(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let leftWall = 25;
+ * let rightWall = 75;
+ *
+ * // xm is just the mouseX, while
+ * // xc is the mouseX, but constrained
+ * // between the leftWall and rightWall!
+ * let xm = mouseX;
+ * let xc = constrain(mouseX, leftWall, rightWall);
+ *
+ * // Draw the walls.
+ * stroke(150);
+ * line(leftWall, 0, leftWall, height);
+ * line(rightWall, 0, rightWall, height);
+ *
+ * // Draw xm and xc as circles.
+ * noStroke();
+ * fill(150);
+ * ellipse(xm, 33, 9, 9); // Not Constrained
+ * fill(0);
+ * ellipse(xc, 66, 9, 9); // Constrained
+ * }
+ *
+ * // Move your mouse inside the canvas to see the
+ * // change in distance between two points!
+ * function draw() {
+ * background(200);
+ * fill(0);
+ *
+ * let x1 = 10;
+ * let y1 = 90;
+ * let x2 = mouseX;
+ * let y2 = mouseY;
+ *
+ * line(x1, y1, x2, y2);
+ * ellipse(x1, y1, 7, 7);
+ * ellipse(x2, y2, 7, 7);
+ *
+ * // d is the length of the line
+ * // the distance from point 1 to point 2.
+ * let d = int(dist(x1, y1, x2, y2));
+ *
+ * // Let's write d along the line we are drawing!
+ * push();
+ * translate((x1 + x2) / 2, (y1 + y2) / 2);
+ * rotate(atan2(y2 - y1, x2 - x1));
+ * text(nfc(d, 1), 0, -5);
+ * pop();
+ * // Fancy!
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Compute the exp() function with a value between 0 and 2
+ * let xValue = map(mouseX, 0, width, 0, 2);
+ * let yValue = exp(xValue);
+ *
+ * let y = map(yValue, 0, 8, height, 0);
+ *
+ * let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
+ * stroke(150);
+ * line(mouseX, y, mouseX, height);
+ * fill(0);
+ * text(legend, 5, 15);
+ * noStroke();
+ * ellipse(mouseX, y, 7, 7);
+ *
+ * // Draw the exp(x) curve,
+ * // over the domain of x from 0 to 2
+ * noFill();
+ * stroke(0);
+ * beginShape();
+ * for (let x = 0; x < width; x++) {
+ * xValue = map(x, 0, width, 0, 2);
+ * yValue = exp(xValue);
+ * y = map(yValue, 0, 8, height, 0);
+ * vertex(x, y);
+ * }
+ *
+ * endShape();
+ * line(0, 0, 0, height);
+ * line(0, height - 1, width, height - 1);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * //map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * //Get the floor of the mapped number.
+ * let bx = floor(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ * function setup() {
+ * background(200);
+ * let a = 20;
+ * let b = 80;
+ * let c = lerp(a, b, 0.2);
+ * let d = lerp(a, b, 0.5);
+ * let e = lerp(a, b, 0.8);
+ *
+ * let y = 50;
+ *
+ * strokeWeight(5);
+ * stroke(0); // Draw the original points in black
+ * point(a, y);
+ * point(b, y);
+ *
+ * stroke(100); // Draw the lerp points in gray
+ * point(c, y);
+ * point(d, y);
+ * point(e, y);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let maxX = 2.8;
+ * let maxY = 1.5;
+ *
+ * // Compute the natural log of a value between 0 and maxX
+ * let xValue = map(mouseX, 0, width, 0, maxX);
+ * let yValue, y;
+ * if (xValue > 0) {
+ // Cannot take the log of a negative number.
+ * yValue = log(xValue);
+ * y = map(yValue, -maxY, maxY, height, 0);
+ *
+ * // Display the calculation occurring.
+ * let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
+ * stroke(150);
+ * line(mouseX, y, mouseX, height);
+ * fill(0);
+ * text(legend, 5, 15);
+ * noStroke();
+ * ellipse(mouseX, y, 7, 7);
+ * }
+ *
+ * // Draw the log(x) curve,
+ * // over the domain of x from 0 to maxX
+ * noFill();
+ * stroke(0);
+ * beginShape();
+ * for (let x = 0; x < width; x++) {
+ * xValue = map(x, 0, width, 0, maxX);
+ * yValue = log(xValue);
+ * y = map(yValue, -maxY, maxY, height, 0);
+ * vertex(x, y);
+ * }
+ * endShape();
+ * line(0, 0, 0, height);
+ * line(0, height / 2, width, height / 2);
+ * }
+ *
+ * function setup() {
+ * let x1 = 20;
+ * let x2 = 80;
+ * let y1 = 30;
+ * let y2 = 70;
+ *
+ * line(0, 0, x1, y1);
+ * print(mag(x1, y1)); // Prints "36.05551275463989"
+ * line(0, 0, x2, y1);
+ * print(mag(x2, y1)); // Prints "85.44003745317531"
+ * line(0, 0, x1, y2);
+ * print(mag(x1, y2)); // Prints "72.80109889280519"
+ * line(0, 0, x2, y2);
+ * print(mag(x2, y2)); // Prints "106.3014581273465"
+ * }
+ *
+ * let value = 25;
+ * let m = map(value, 0, 100, 0, width);
+ * ellipse(m, 50, 10, 10);
+
+ * function setup() {
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * background(204);
+ * let x1 = map(mouseX, 0, width, 25, 75);
+ * ellipse(x1, 25, 25, 25);
+ * //This ellipse is constrained to the 0-100 range
+ * //after setting withinBounds to true
+ * let x2 = map(mouseX, 0, width, 0, 100, true);
+ * ellipse(x2, 75, 25, 25);
+ * }
+
+ * function setup() {
+ * // Change the elements in the array and run the sketch
+ * // to show how max() works!
+ * let numArray = [2, 1, 5, 4, 8, 9];
+ * fill(0);
+ * noStroke();
+ * text('Array Elements', 0, 10);
+ * // Draw all numbers in the array
+ * let spacing = 15;
+ * let elemsY = 25;
+ * for (let i = 0; i < numArray.length; i++) {
+ * text(numArray[i], i * spacing, elemsY);
+ * }
+ * let maxX = 33;
+ * let maxY = 80;
+ * // Draw the Maximum value in the array.
+ * textSize(32);
+ * text(max(numArray), maxX, maxY);
+ * }
+ *
+ * function setup() {
+ * // Change the elements in the array and run the sketch
+ * // to show how min() works!
+ * let numArray = [2, 1, 5, 4, 8, 9];
+ * fill(0);
+ * noStroke();
+ * text('Array Elements', 0, 10);
+ * // Draw all numbers in the array
+ * let spacing = 15;
+ * let elemsY = 25;
+ * for (let i = 0; i < numArray.length; i++) {
+ * text(numArray[i], i * spacing, elemsY);
+ * }
+ * let maxX = 33;
+ * let maxY = 80;
+ * // Draw the Minimum value in the array.
+ * textSize(32);
+ * text(min(numArray), maxX, maxY);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let currentNum = mouseX;
+ * let lowerBound = 0;
+ * let upperBound = width; //100;
+ * let normalized = norm(currentNum, lowerBound, upperBound);
+ * let lineY = 70;
+ * stroke(3);
+ * line(0, lineY, width, lineY);
+ * //Draw an ellipse mapped to the non-normalized value.
+ * noStroke();
+ * fill(50);
+ * let s = 7; // ellipse size
+ * ellipse(currentNum, lineY, s, s);
+ *
+ * // Draw the guide
+ * let guideY = lineY + 15;
+ * text('0', 0, guideY);
+ * textAlign(RIGHT);
+ * text('100', width, guideY);
+ *
+ * // Draw the normalized value
+ * textAlign(LEFT);
+ * fill(0);
+ * textSize(32);
+ * let normalY = 40;
+ * let normalX = 20;
+ * text(normalized, normalX, normalY);
+ * }
+ *
+ * function setup() {
+ * //Exponentially increase the size of an ellipse.
+ * let eSize = 3; // Original Size
+ * let eLoc = 10; // Original Location
+ *
+ * ellipse(eLoc, eLoc, eSize, eSize);
+ *
+ * ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));
+ *
+ * ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));
+ *
+ * ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
+ * }
+ *
+ * let x = round(3.7);
+ * text(x, width / 2, height / 2);
+ *
+ * let x = round(12.782383, 2);
+ * text(x, width / 2, height / 2);
+ *
+ * function draw() {
+ * background(200);
+ * //map, mouseX between 0 and 5.
+ * let ax = map(mouseX, 0, 100, 0, 5);
+ * let ay = 66;
+ *
+ * // Round the mapped number.
+ * let bx = round(map(mouseX, 0, 100, 0, 5));
+ * let by = 33;
+ *
+ * // Multiply the mapped numbers by 20 to more easily
+ * // see the changes.
+ * stroke(0);
+ * fill(0);
+ * line(0, ay, ax * 20, ay);
+ * line(0, by, bx * 20, by);
+ *
+ * // Reformat the float returned by map and draw it.
+ * noStroke();
+ * text(nfc(ax, 2), ax, ay - 5);
+ * text(nfc(bx, 1), bx, by - 5);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let eSize = 7;
+ * let x1 = map(mouseX, 0, width, 0, 10);
+ * let y1 = 80;
+ * let x2 = sq(x1);
+ * let y2 = 20;
+ *
+ * // Draw the non-squared.
+ * line(0, y1, width, y1);
+ * ellipse(x1, y1, eSize, eSize);
+ *
+ * // Draw the squared.
+ * line(0, y2, width, y2);
+ * ellipse(x2, y2, eSize, eSize);
+ *
+ * // Draw dividing line.
+ * stroke(100);
+ * line(0, height / 2, width, height / 2);
+ *
+ * // Draw text.
+ * let spacing = 15;
+ * noStroke();
+ * fill(0);
+ * text('x = ' + x1, 0, y1 + spacing);
+ * text('sq(x) = ' + x2, 0, y2 + spacing);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * let eSize = 7;
+ * let x1 = mouseX;
+ * let y1 = 80;
+ * let x2 = sqrt(x1);
+ * let y2 = 20;
+ *
+ * // Draw the non-squared.
+ * line(0, y1, width, y1);
+ * ellipse(x1, y1, eSize, eSize);
+ *
+ * // Draw the squared.
+ * line(0, y2, width, y2);
+ * ellipse(x2, y2, eSize, eSize);
+ *
+ * // Draw dividing line.
+ * stroke(100);
+ * line(0, height / 2, width, height / 2);
+ *
+ * // Draw text.
+ * noStroke();
+ * fill(0);
+ * let spacing = 15;
+ * text('x = ' + x1, 0, y1 + spacing);
+ * text('sqrt(x) = ' + x2, 0, y2 + spacing);
+ * }
+ *
+ * function setup() {
+ * createCanvas(windowWidth, windowHeight);
+ * fill(0);
+ * text(7345.73472742, 0, 50);
+ * text(fract(7345.73472742), 0, 100);
+ * text(1.4215e-15, 150, 50);
+ * text(fract(1.4215e-15), 150, 100);
+ * }
+ *
+ *
+ * let v1;
+ * function setup() {
+ * createCanvas(100, 100);
+ * stroke(255, 0, 255);
+ * v1 = createVector(width / 2, height / 2);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * line(v1.x, v1.y, mouseX, mouseY);
+ * }
+ *
+ * let xoff = 0.0;
+ *
+ * function draw() {
+ * background(204);
+ * xoff = xoff + 0.01;
+ * let n = noise(xoff) * width;
+ * line(n, 0, n, height);
+ * }
+ *
+ * let noiseScale=0.02;
+ *
+ * function draw() {
+ * background(0);
+ * for (let x=0; x < width; x++) {
+ * let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
+ * stroke(noiseVal*255);
+ * line(x, mouseY+noiseVal*80, x, height);
+ * }
+ * }
+ *
+ *
+ * let noiseVal;
+ * let noiseScale = 0.02;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * for (let y = 0; y < height; y++) {
+ * for (let x = 0; x < width / 2; x++) {
+ * noiseDetail(2, 0.2);
+ * noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
+ * stroke(noiseVal * 255);
+ * point(x, y);
+ * noiseDetail(8, 0.65);
+ * noiseVal = noise(
+ * (mouseX + x + width / 2) * noiseScale,
+ * (mouseY + y) * noiseScale
+ * );
+ * stroke(noiseVal * 255);
+ * point(x + width / 2, y);
+ * }
+ * }
+ * }
+ *
+ * let xoff = 0.0;
+ *
+ * function setup() {
+ * noiseSeed(99);
+ * stroke(0, 10);
+ * }
+ *
+ * function draw() {
+ * xoff = xoff + .01;
+ * let n = noise(xoff) * width;
+ * line(n, 0, n, height);
+ * }
+ *
+ *
+ * let v1 = createVector(40, 50);
+ * let v2 = createVector(40, 50);
+ *
+ * ellipse(v1.x, v1.y, 50, 50);
+ * ellipse(v2.x, v2.y, 50, 50);
+ * v1.add(v2);
+ * ellipse(v1.x, v1.y, 50, 50);
+ *
+ *
+ * function setup() {
+ * let v = createVector(20, 30);
+ * print(String(v)); // prints "p5.Vector Object : [20, 30, 0]"
+ * }
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text(v1.toString(), 10, 25, 90, 75);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * let v = createVector(1, 2, 3);
+ * v.set(4, 5, 6); // Sets vector to [4, 5, 6]
+ *
+ * let v1 = createVector(0, 0, 0);
+ * let arr = [1, 2, 3];
+ * v1.set(arr); // Sets vector to [1, 2, 3]
+ * }
+ *
+ *
+ * let v0, v1;
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * v0 = createVector(0, 0);
+ * v1 = createVector(50, 50);
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * drawArrow(v0, v1, 'black');
+ * v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));
+ *
+ * noStroke();
+ * text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = v1.copy();
+ * print(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);
+ * // Prints "true"
+ *
+ *
+ * let v = createVector(1, 2, 3);
+ * v.add(4, 5, 6);
+ * // v's components are set to [5, 7, 9]
+ *
+ *
+ * let v = createVector(1, 2, 3);
+ * // Provide arguments as an array
+ * let arr = [4, 5, 6];
+ * v.add(arr);
+ * // v's components are set to [5, 7, 9]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * let v3 = p5.Vector.add(v1, v2);
+ * // v3 has components [3, 5, 7]
+ * print(v3);
+ *
+ *
+ * // red vector + blue vector = purple vector
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(-30, 20);
+ * drawArrow(v1, v2, 'blue');
+ *
+ * let v3 = p5.Vector.add(v1, v2);
+ * drawArrow(v0, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(3, 4, 5);
+ * v.rem(2, 3, 4);
+ * // v's components are set to [1, 1, 1]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(3, 4, 5);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * let v3 = p5.Vector.rem(v1, v2);
+ * // v3 has components [1, 1, 1]
+ * print(v3);
+ *
+ *
+ * let v = createVector(4, 5, 6);
+ * v.sub(1, 1, 1);
+ * // v's components are set to [3, 4, 5]
+ *
+ *
+ * let v = createVector(4, 5, 6);
+ * // Provide arguments as an array
+ * let arr = [1, 1, 1];
+ * v.sub(arr);
+ * // v's components are set to [3, 4, 5]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(2, 3, 4);
+ * let v2 = createVector(1, 2, 3);
+ *
+ * let v3 = p5.Vector.sub(v1, v2);
+ * // v3 has components [1, 1, 1]
+ * print(v3);
+ *
+ *
+ * // red vector - blue vector = purple vector
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(70, 50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * let v3 = p5.Vector.sub(v1, v2);
+ * drawArrow(v2, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(1, 2, 3);
+ * v.mult(2);
+ * // v's components are set to [2, 4, 6]
+ *
+ *
+ * let v0 = createVector(1, 2, 3);
+ * let v1 = createVector(2, 3, 4);
+ * v0.mult(v1); // v0's components are set to [2, 6, 12]
+ *
+ *
+ * let v0 = createVector(1, 2, 3);
+ * // Provide arguments as an array
+ * let arr = [2, 3, 4];
+ * v0.mult(arr); // v0's components are set to [2, 6, 12]
+ *
+ *
+ * let v0 = createVector(1, 2, 3);
+ * let v1 = createVector(2, 3, 4);
+ * const result = p5.Vector.mult(v0, v1);
+ * print(result); // result's components are set to [2, 6, 12]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = p5.Vector.mult(v1, 2);
+ * // v2 has components [2, 4, 6]
+ * print(v2);
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(25, -25);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let num = map(mouseX, 0, width, -2, 2, true);
+ * let v2 = p5.Vector.mult(v1, num);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('multiplied by ' + num.toFixed(2), 5, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(6, 4, 2);
+ * v.div(2); //v's components are set to [3, 2, 1]
+ *
+ *
+ * let v0 = createVector(9, 4, 2);
+ * let v1 = createVector(3, 2, 4);
+ * v0.div(v1); // v0's components are set to [3, 2, 0.5]
+ *
+ *
+ * let v0 = createVector(9, 4, 2);
+ * // Provide arguments as an array
+ * let arr = [3, 2, 4];
+ * v0.div(arr); // v0's components are set to [3, 2, 0.5]
+ *
+ *
+ * let v0 = createVector(9, 4, 2);
+ * let v1 = createVector(3, 2, 4);
+ * let result = p5.Vector.div(v0, v1);
+ * print(result); // result's components are set to [3, 2, 0.5]
+ *
+ *
+ * // Static method
+ * let v1 = createVector(6, 4, 2);
+ * let v2 = p5.Vector.div(v1, 2);
+ * // v2 has components [3, 2, 1]
+ * print(v2);
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 100);
+ * let v1 = createVector(50, -50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let num = map(mouseX, 0, width, 10, 0.5, true);
+ * let v2 = p5.Vector.div(v1, num);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('divided by ' + num.toFixed(2), 10, 90);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(20.0, 30.0, 40.0);
+ * let m = v.mag();
+ * print(m); // Prints "53.85164807134504"
+ *
+ *
+ * // Static method
+ * let v1 = createVector(6, 4, 2);
+ * print(v1.magSq()); // Prints "56"
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'black');
+ *
+ * noStroke();
+ * text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(2, 3, 4);
+ *
+ * print(v1.dot(v2)); // Prints "20"
+ *
+ *
+ * //Static method
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(3, 2, 1);
+ * print(p5.Vector.dot(v1, v2)); // Prints "10"
+ *
+ *
+ * let v1 = createVector(1, 2, 3);
+ * let v2 = createVector(1, 2, 3);
+ *
+ * let v = v1.cross(v2); // v's components are [0, 0, 0]
+ * print(v);
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let crossProduct = p5.Vector.cross(v1, v2);
+ * // crossProduct has components [0, 0, 1]
+ * print(crossProduct);
+ *
+ *
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let distance = v1.dist(v2); // distance is 1.4142...
+ * print(distance);
+ *
+ *
+ * // Static method
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let distance = p5.Vector.dist(v1, v2);
+ * // distance is 1.4142...
+ * print(distance);
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ *
+ * let v1 = createVector(70, 50);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * noStroke();
+ * text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.normalize();
+ * // v's components are set to
+ * // [0.4454354, 0.8908708, 0.089087084]
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ * v1.normalize();
+ * drawArrow(v0, v1.mult(35), 'blue');
+ *
+ * noFill();
+ * ellipse(50, 50, 35 * 2);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.limit(5);
+ * // v's components are set to
+ * // [2.2271771, 4.4543543, 0.4454354]
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ * drawArrow(v0, v1.limit(35), 'blue');
+ *
+ * noFill();
+ * ellipse(50, 50, 35 * 2);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(10, 20, 2);
+ * // v has components [10.0, 20.0, 2.0]
+ * v.setMag(10);
+ * // v's components are set to [6.0, 8.0, 0.0]
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(50, 50);
+ *
+ * drawArrow(v0, v1, 'red');
+ *
+ * let length = map(mouseX, 0, width, 0, 141, true);
+ * v1.setMag(length);
+ * drawArrow(v0, v1, 'blue');
+ *
+ * noStroke();
+ * text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * let v1 = createVector(30, 50);
+ * print(v1.heading()); // 1.0303768265243125
+ *
+ * v1 = createVector(40, 50);
+ * print(v1.heading()); // 0.8960553845713439
+ *
+ * v1 = createVector(30, 70);
+ * print(v1.heading()); // 1.1659045405098132
+ * }
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(mouseX - 50, mouseY - 50);
+ *
+ * drawArrow(v0, v1, 'black');
+ *
+ * let myHeading = v1.heading();
+ * noStroke();
+ * text(
+ * 'vector heading: ' +
+ * myHeading.toFixed(2) +
+ * ' radians or ' +
+ * degrees(myHeading).toFixed(2) +
+ * ' degrees',
+ * 10,
+ * 50,
+ * 90,
+ * 50
+ * );
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(10.0, 20.0);
+ * // v has components [10.0, 20.0, 0.0]
+ * v.rotate(HALF_PI);
+ * // v's components are set to [-20.0, 9.999999, 0.0]
+ *
+ *
+ * let angle = 0;
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = createVector(50, 0);
+ *
+ * drawArrow(v0, v1.rotate(angle), 'black');
+ * angle += 0.01;
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v1 = createVector(1, 0, 0);
+ * let v2 = createVector(0, 1, 0);
+ *
+ * let angle = v1.angleBetween(v2);
+ * // angle is PI/2
+ * print(angle);
+ *
+ *
+ * function draw() {
+ * background(240);
+ * let v0 = createVector(50, 50);
+ *
+ * let v1 = createVector(50, 0);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(mouseX - 50, mouseY - 50);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * let angleBetween = v1.angleBetween(v2);
+ * noStroke();
+ * text(
+ * 'angle between: ' +
+ * angleBetween.toFixed(2) +
+ * ' radians or ' +
+ * degrees(angleBetween).toFixed(2) +
+ * ' degrees',
+ * 10,
+ * 50,
+ * 90,
+ * 50
+ * );
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(1, 1, 0);
+ *
+ * v.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]
+ *
+ *
+ * let v1 = createVector(0, 0, 0);
+ * let v2 = createVector(100, 100, 0);
+ *
+ * let v3 = p5.Vector.lerp(v1, v2, 0.5);
+ * // v3 has components [50,50,0]
+ * print(v3);
+ *
+ *
+ * let step = 0.01;
+ * let amount = 0;
+ *
+ * function draw() {
+ * background(240);
+ * let v0 = createVector(0, 0);
+ *
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let v2 = createVector(90, 90);
+ * drawArrow(v0, v2, 'blue');
+ *
+ * if (amount > 1 || amount < 0) {
+ * step *= -1;
+ * }
+ * amount += step;
+ * let v3 = p5.Vector.lerp(v1, v2, amount);
+ *
+ * drawArrow(v0, v3, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward
+ * let n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)
+ * v.reflect(n); // v is reflected about the surface normal n. v's components are now set to [4, -6]
+ *
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(0, 0);
+ * let v1 = createVector(mouseX, mouseY);
+ * drawArrow(v0, v1, 'red');
+ *
+ * let n = createVector(0, -30);
+ * drawArrow(v1, n, 'blue');
+ *
+ * let r = v1.copy();
+ * r.reflect(n);
+ * drawArrow(v1, r, 'purple');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * let v = createVector(20, 30);
+ * print(v.array()); // Prints : Array [20, 30, 0]
+ * }
+ *
+ *
+ * let v = createVector(10.0, 20.0, 30.0);
+ * let f = v.array();
+ * print(f[0]); // Prints "10.0"
+ * print(f[1]); // Prints "20.0"
+ * print(f[2]); // Prints "30.0"
+ *
+ *
+ * let v1 = createVector(5, 10, 20);
+ * let v2 = createVector(5, 10, 20);
+ * let v3 = createVector(13, 10, 19);
+ *
+ * print(v1.equals(v2.x, v2.y, v2.z)); // true
+ * print(v1.equals(v3.x, v3.y, v3.z)); // false
+ *
+ *
+ * let v1 = createVector(10.0, 20.0, 30.0);
+ * let v2 = createVector(10.0, 20.0, 30.0);
+ * let v3 = createVector(0.0, 0.0, 0.0);
+ * print(v1.equals(v2)); // true
+ * print(v1.equals(v3)); // false
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create a variable, proportional to the mouseX,
+ * // varying from 0-360, to represent an angle in degrees.
+ * let myDegrees = map(mouseX, 0, width, 0, 360);
+ *
+ * // Display that variable in an onscreen text.
+ * // (Note the nfc() function to truncate additional decimal places,
+ * // and the "\xB0" character for the degree symbol.)
+ * let readout = 'angle = ' + nfc(myDegrees, 1) + '\xB0';
+ * noStroke();
+ * fill(0);
+ * text(readout, 5, 15);
+ *
+ * // Create a p5.Vector using the fromAngle function,
+ * // and extract its x and y components.
+ * let v = p5.Vector.fromAngle(radians(myDegrees), 30);
+ * let vx = v.x;
+ * let vy = v.y;
+ *
+ * push();
+ * translate(width / 2, height / 2);
+ * noFill();
+ * stroke(150);
+ * line(0, 0, 30, 0);
+ * stroke(0);
+ * line(0, 0, vx, vy);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * fill(255);
+ * noStroke();
+ * }
+ * function draw() {
+ * background(255);
+ *
+ * let t = millis() / 1000;
+ *
+ * // add three point lights
+ * pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));
+ * pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));
+ * pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));
+ *
+ * sphere(35);
+ * }
+ *
+ *
+ * let v = p5.Vector.random2D();
+ * // May make v's attributes something like:
+ * // [0.61554617, -0.51195765, 0.0] or
+ * // [-0.4695841, -0.14366731, 0.0] or
+ * // [0.6091097, -0.22805278, 0.0]
+ * print(v);
+ *
+ *
+ * function setup() {
+ * frameRate(1);
+ * }
+ *
+ * function draw() {
+ * background(240);
+ *
+ * let v0 = createVector(50, 50);
+ * let v1 = p5.Vector.random2D();
+ * drawArrow(v0, v1.mult(50), 'black');
+ * }
+ *
+ * // draw an arrow for a vector at a given base position
+ * function drawArrow(base, vec, myColor) {
+ * push();
+ * stroke(myColor);
+ * strokeWeight(3);
+ * fill(myColor);
+ * translate(base.x, base.y);
+ * line(0, 0, vec.x, vec.y);
+ * rotate(vec.heading());
+ * let arrowSize = 7;
+ * translate(vec.mag() - arrowSize, 0);
+ * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+ * pop();
+ * }
+ *
+ *
+ * let v = p5.Vector.random3D();
+ * // May make v's attributes something like:
+ * // [0.61554617, -0.51195765, 0.599168] or
+ * // [-0.4695841, -0.14366731, -0.8711202] or
+ * // [0.6091097, -0.22805278, -0.7595902]
+ * print(v);
+ *
+ *
+ * randomSeed(99);
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(0, 255);
+ * stroke(r);
+ * line(i, 0, i, 100);
+ * }
+ *
+ *
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(50);
+ * stroke(r * 5);
+ * line(50, i, 50 + r, i);
+ * }
+ *
+ *
+ * for (let i = 0; i < 100; i++) {
+ * let r = random(-50, 50);
+ * line(50, i, 50 + r, i);
+ * }
+ *
+ *
+ * // Get a random element from an array using the random(Array) syntax
+ * let words = ['apple', 'bear', 'cat', 'dog'];
+ * let word = random(words); // select random word
+ * text(word, 10, 50); // draw the word
+ *
+ *
+ * for (let y = 0; y < 100; y++) {
+ * let x = randomGaussian(50, 15);
+ * line(50, y, x, y);
+ * }
+ *
+ *
+ * let distribution = new Array(360);
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * for (let i = 0; i < distribution.length; i++) {
+ * distribution[i] = floor(randomGaussian(0, 15));
+ * }
+ * }
+ *
+ * function draw() {
+ * background(204);
+ *
+ * translate(width / 2, width / 2);
+ *
+ * for (let i = 0; i < distribution.length; i++) {
+ * rotate(TWO_PI / distribution.length);
+ * stroke(0);
+ * let dist = abs(distribution[i]);
+ * line(0, 0, dist, 0);
+ * }
+ * }
+ *
+ *
+ * let a = PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ * // Prints: "3.1415927 : -1.0 : 3.1415927"
+ * print(a + ' : ' + c + ' : ' + ac);
+ *
+ *
+ * let a = PI + PI / 4.0;
+ * let c = cos(a);
+ * let ac = acos(c);
+ * // Prints: "3.926991 : -0.70710665 : 2.3561943"
+ * print(a + ' : ' + c + ' : ' + ac);
+ *
+ *
+ * let a = PI / 3.0;
+ * let s = sin(a);
+ * let as = asin(s);
+ * // Prints: "1.0471975 : 0.86602540 : 1.0471975"
+ * print(a + ' : ' + s + ' : ' + as);
+ *
+ *
+ * let a = PI + PI / 3.0;
+ * let s = sin(a);
+ * let as = asin(s);
+ * // Prints: "4.1887902 : -0.86602540 : -1.0471975"
+ * print(a + ' : ' + s + ' : ' + as);
+ *
+ *
+ * let a = PI / 3.0;
+ * let t = tan(a);
+ * let at = atan(t);
+ * // Prints: "1.0471975 : 1.7320508 : 1.0471975"
+ * print(a + ' : ' + t + ' : ' + at);
+ *
+ *
+ * let a = PI + PI / 3.0;
+ * let t = tan(a);
+ * let at = atan(t);
+ * // Prints: "4.1887902 : 1.7320508 : 1.0471975"
+ * print(a + ' : ' + t + ' : ' + at);
+ *
+ *
+ * function draw() {
+ * background(204);
+ * translate(width / 2, height / 2);
+ * let a = atan2(mouseY - height / 2, mouseX - width / 2);
+ * rotate(a);
+ * rect(-30, -5, 60, 10);
+ * }
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 25.0;
+ * for (let i = 0; i < 25; i++) {
+ * line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 25.0;
+ * for (let i = 0; i < 25; i++) {
+ * line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ * let a = 0.0;
+ * let inc = TWO_PI / 50.0;
+ * for (let i = 0; i < 100; i = i + 2) {
+ * line(i, 50, i, 50 + tan(a) * 2.0);
+ * a = a + inc;
+ * }
+ *
+ *
+ * @alt
+ * vertical black lines end down and up from center to form spike pattern
+ */
+ _main.default.prototype.tan = function(angle) {
+ return Math.tan(this._toRadians(angle));
+ };
+
+ /**
+ * Converts a radian measurement to its corresponding value in degrees.
+ * Radians and degrees are two ways of measuring the same thing. There are
+ * 360 degrees in a circle and 2*PI radians in a circle. For example,
+ * 90° = PI/2 = 1.5707964. This function does not take into account the
+ * current angleMode.
+ *
+ * @method degrees
+ * @param {Number} radians the radians value to convert to degrees
+ * @return {Number} the converted angle
+ *
+ * @example
+ *
+ * let rad = PI / 4;
+ * let deg = degrees(rad);
+ * print(rad + ' radians is ' + deg + ' degrees');
+ * // Prints: 0.7853981633974483 radians is 45 degrees
+ *
+ *
+ * let deg = 45.0;
+ * let rad = radians(deg);
+ * print(deg + ' degrees is ' + rad + ' radians');
+ * // Prints: 45 degrees is 0.7853981633974483 radians
+ *
+ *
+ * function draw() {
+ * background(204);
+ * angleMode(DEGREES); // Change the mode to DEGREES
+ * let a = atan2(mouseY - height / 2, mouseX - width / 2);
+ * translate(width / 2, height / 2);
+ * push();
+ * rotate(a);
+ * rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
+ * pop();
+ * angleMode(RADIANS); // Change the mode to RADIANS
+ * rotate(a); // variable a stays the same
+ * rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
+ * }
+ *
+ *
+ * textSize(16);
+ * textAlign(RIGHT);
+ * text('ABCD', 50, 30);
+ * textAlign(CENTER);
+ * text('EFGH', 50, 50);
+ * textAlign(LEFT);
+ * text('IJKL', 50, 70);
+ *
+ *
+ * textSize(16);
+ * strokeWeight(0.5);
+ *
+ * line(0, 12, width, 12);
+ * textAlign(CENTER, TOP);
+ * text('TOP', 0, 12, width);
+ *
+ * line(0, 37, width, 37);
+ * textAlign(CENTER, CENTER);
+ * text('CENTER', 0, 37, width);
+ *
+ * line(0, 62, width, 62);
+ * textAlign(CENTER, BASELINE);
+ * text('BASELINE', 0, 62, width);
+ *
+ * line(0, 87, width, 87);
+ * textAlign(CENTER, BOTTOM);
+ * text('BOTTOM', 0, 87, width);
+ *
+ *
+ * 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);
+ *
+ *
+ * textSize(12);
+ * text('Font Size 12', 10, 30);
+ * textSize(14);
+ * text('Font Size 14', 10, 60);
+ * textSize(16);
+ * text('Font Size 16', 10, 90);
+ *
+ *
+ * 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);
+ *
+ *
+ * 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);
+ *
+ *
+ * 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
+ *
+ *
+ * let base = height * 0.75;
+ * let scalar = 0.8; // Different for each font
+ *
+ * textSize(32); // Set initial text size
+ * let desc = textDescent() * scalar; // Calc ascent
+ * line(0, base + desc, width, base + desc);
+ * text('dp', 0, base); // Draw text on baseline
+ *
+ * textSize(64); // Increase text size
+ * desc = textDescent() * scalar; // Recalc ascent
+ * line(40, base + desc, width, base + desc);
+ * text('dp', 40, base); // Draw text on baseline
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * fill('#ED225D');
+ * textFont(myFont);
+ * textSize(36);
+ * text('p5*js', 10, 50);
+ * }
+ *
+ * function setup() {
+ * loadFont('assets/inconsolata.otf', drawText);
+ * }
+ *
+ * function drawText(font) {
+ * fill('#ED225D');
+ * textFont(font, 36);
+ * text('p5*js', 10, 50);
+ * }
+ *
+ * function preload() {
+ * loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * function setup() {
+ * let myDiv = createDiv('hello there');
+ * myDiv.style('font-family', 'Inconsolata');
+ * }
+ *
+ * textSize(32);
+ * text('word', 10, 30);
+ * fill(0, 102, 153);
+ * text('word', 10, 60);
+ * fill(0, 102, 153, 51);
+ * text('word', 10, 90);
+ *
+ *
+ * let s = 'The quick brown fox jumped over the lazy dog.';
+ * fill(50);
+ * text(s, 10, 10, 70, 80); // Text wraps within text box
+ *
+ *
+ * let inconsolata;
+ * function preload() {
+ * inconsolata = loadFont('assets/inconsolata.otf');
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * textFont(inconsolata);
+ * textSize(width / 3);
+ * textAlign(CENTER, CENTER);
+ * }
+ * function draw() {
+ * background(0);
+ * let time = millis();
+ * rotateX(time / 1000);
+ * rotateZ(time / 1234);
+ * text('p5.js', 0, 0);
+ * }
+ *
+ *
+ * fill(0);
+ * textSize(12);
+ * textFont('Georgia');
+ * text('Georgia', 12, 30);
+ * textFont('Helvetica');
+ * text('Helvetica', 12, 60);
+ *
+ *
+ * let fontRegular, fontItalic, fontBold;
+ * function preload() {
+ * fontRegular = loadFont('assets/Regular.otf');
+ * fontItalic = loadFont('assets/Italic.ttf');
+ * fontBold = loadFont('assets/Bold.ttf');
+ * }
+ * function setup() {
+ * background(210);
+ * fill(0)
+ .strokeWeight(0)
+ .textSize(10);
+ * textFont(fontRegular);
+ * text('Font Style Normal', 10, 30);
+ * textFont(fontItalic);
+ * text('Font Style Italic', 10, 50);
+ * textFont(fontBold);
+ * text('Font Style Bold', 10, 70);
+ * }
+ *
+ *
+ * let font;
+ * let textString = 'Lorem ipsum dolor sit amet.';
+ * function preload() {
+ * font = loadFont('./assets/Regular.otf');
+ * }
+ * function setup() {
+ * background(210);
+ *
+ * let bbox = font.textBounds(textString, 10, 30, 12);
+ * fill(255);
+ * stroke(0);
+ * rect(bbox.x, bbox.y, bbox.w, bbox.h);
+ * fill(0);
+ * noStroke();
+ *
+ * textFont(font);
+ * textSize(12);
+ * text(textString, 10, 30);
+ * }
+ *
+ *
+ * let font;
+ * function preload() {
+ * font = loadFont('assets/inconsolata.otf');
+ * }
+ *
+ * let points;
+ * let bounds;
+ * function setup() {
+ * createCanvas(100, 100);
+ * stroke(0);
+ * fill(255, 104, 204);
+ *
+ * points = font.textToPoints('p5', 0, 0, 10, {
+ * sampleFactor: 5,
+ * simplifyThreshold: 0
+ * });
+ * bounds = font.textBounds(' p5 ', 0, 0, 10);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * beginShape();
+ * translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);
+ * for (let i = 0; i < points.length; i++) {
+ * let p = points[i];
+ * vertex(
+ * p.x * width / bounds.w +
+ * sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,
+ * p.y * height / bounds.h
+ * );
+ * }
+ * endShape(CLOSE);
+ * }
+ *
+ *
+ * function setup() {
+ * let myArray = ['Mango', 'Apple', 'Papaya'];
+ * print(myArray); // ['Mango', 'Apple', 'Papaya']
+ *
+ * append(myArray, 'Peach');
+ * print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+ * }
+ *
+ * let src = ['A', 'B', 'C'];
+ * let dst = [1, 2, 3];
+ * let srcPosition = 1;
+ * let dstPosition = 0;
+ * let length = 2;
+ *
+ * print(src); // ['A', 'B', 'C']
+ * print(dst); // [ 1 , 2 , 3 ]
+ *
+ * arrayCopy(src, srcPosition, dst, dstPosition, length);
+ * print(dst); // ['B', 'C', 3]
+ *
+ * function setup() {
+ * let arr1 = ['A', 'B', 'C'];
+ * let arr2 = [1, 2, 3];
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1,2,3]
+ *
+ * let arr3 = concat(arr1, arr2);
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1, 2, 3]
+ * print(arr3); // ['A','B','C', 1, 2, 3]
+ * }
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A','B','C']
+ *
+ * reverse(myArray);
+ * print(myArray); // ['C','B','A']
+ * }
+ *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A', 'B', 'C']
+ * let newArray = shorten(myArray);
+ * print(myArray); // ['A','B','C']
+ * print(newArray); // ['A','B']
+ * }
+ *
+ * function setup() {
+ * let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
+ * print(regularArr);
+ * shuffle(regularArr, true); // force modifications to passed array
+ * print(regularArr);
+ *
+ * // By default shuffle() returns a shuffled cloned array:
+ * let newArr = shuffle(regularArr);
+ * print(regularArr);
+ * print(newArr);
+ * }
+ *
+ * function setup() {
+ * let words = ['banana', 'apple', 'pear', 'lime'];
+ * print(words); // ['banana', 'apple', 'pear', 'lime']
+ * let count = 4; // length of array
+ *
+ * words = sort(words, count);
+ * print(words); // ['apple', 'banana', 'lime', 'pear']
+ * }
+ *
+ * function setup() {
+ * let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+ * print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+ * let count = 5; // Less than the length of the array
+ *
+ * numbers = sort(numbers, count);
+ * print(numbers); // [1,2,5,6,14,9,8,12]
+ * }
+ *
+ * function setup() {
+ * let myArray = [0, 1, 2, 3, 4];
+ * let insArray = ['A', 'B', 'C'];
+ * print(myArray); // [0, 1, 2, 3, 4]
+ * print(insArray); // ['A','B','C']
+ *
+ * splice(myArray, insArray, 3);
+ * print(myArray); // [0,1,2,'A','B','C',3,4]
+ * }
+ *
+ * function setup() {
+ * let myArray = [1, 2, 3, 4, 5];
+ * print(myArray); // [1, 2, 3, 4, 5]
+ *
+ * let sub1 = subset(myArray, 0, 3);
+ * let sub2 = subset(myArray, 2, 2);
+ * print(sub1); // [1,2,3]
+ * print(sub2); // [3,4]
+ * }
+ *
+ * let str = '20';
+ * let diameter = float(str);
+ * ellipse(width / 2, height / 2, diameter, diameter);
+ *
+ * print(float('10.31')); // 10.31
+ * print(float('Infinity')); // Infinity
+ * print(float('-Infinity')); // -Infinity
+ *
+ * print(int('10')); // 10
+ * print(int(10.31)); // 10
+ * print(int(-10)); // -10
+ * print(int(true)); // 1
+ * print(int(false)); // 0
+ * print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
+ * print(int(Infinity)); // Infinity
+ * print(int('-Infinity')); // -Infinity
+ *
+ * print(str('10')); // "10"
+ * print(str(10.31)); // "10.31"
+ * print(str(-10)); // "-10"
+ * print(str(true)); // "true"
+ * print(str(false)); // "false"
+ * print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
+ *
+ * print(boolean(0)); // false
+ * print(boolean(1)); // true
+ * print(boolean('true')); // true
+ * print(boolean('abcd')); // false
+ * print(boolean([0, 12, 'true'])); // [false, true, true]
+ *
+ * print(byte(127)); // 127
+ * print(byte(128)); // -128
+ * print(byte(23.4)); // 23
+ * print(byte('23.4')); // 23
+ * print(byte('hello')); // NaN
+ * print(byte(true)); // 1
+ * print(byte([0, 255, '100'])); // [0, -1, 100]
+ *
+ * print(char(65)); // "A"
+ * print(char('65')); // "A"
+ * print(char([65, 66, 67])); // [ "A", "B", "C" ]
+ * print(join(char([65, 66, 67]), '')); // "ABC"
+ *
+ * print(unchar('A')); // 65
+ * print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
+ * print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
+ *
+ * print(hex(255)); // "000000FF"
+ * print(hex(255, 6)); // "0000FF"
+ * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
+ * print(Infinity); // "FFFFFFFF"
+ * print(-Infinity); // "00000000"
+ *
+ * print(unhex('A')); // 10
+ * print(unhex('FF')); // 255
+ * print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
+ *
+ * let array = ['Hello', 'world!'];
+ * let separator = ' ';
+ * let message = join(array, separator);
+ * text(message, 5, 50);
+ *
+ *
+ * let string = 'Hello p5js*!';
+ * let regexp = 'p5js\\*';
+ * let m = match(string, regexp);
+ * text(m, 5, 50);
+ *
+ *
+ * let string = 'Hello p5js*! Hello world!';
+ * let regexp = 'Hello';
+ * matchAll(string, regexp);
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/fonts/inconsolata.ttf');
+ * }
+ * function setup() {
+ * background(200);
+ * let num1 = 321;
+ * let num2 = -1321;
+ *
+ * noStroke();
+ * fill(0);
+ * textFont(myFont);
+ * textSize(22);
+ *
+ * text(nf(num1, 4, 2), 10, 30);
+ * text(nf(num2, 4, 2), 10, 80);
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * let myFont;
+ * function preload() {
+ * myFont = loadFont('assets/fonts/inconsolata.ttf');
+ * }
+ * function setup() {
+ * background(200);
+ * let num1 = 321;
+ * let num2 = -1321;
+ *
+ * noStroke();
+ * fill(0);
+ * textFont(myFont);
+ * textSize(22);
+ *
+ * // nfs() aligns num1 (positive number) with num2 (negative number) by
+ * // adding a blank space in front of the num1 (positive number)
+ * // [left = 4] in num1 add one 0 in front, to align the digits with num2
+ * // [right = 2] in num1 and num2 adds two 0's after both numbers
+ * // To see the differences check the example of nf() too.
+ * text(nfs(num1, 4, 2), 10, 30);
+ * text(nfs(num2, 4, 2), 10, 80);
+ * // Draw dividing line
+ * stroke(120);
+ * line(0, 50, width, 50);
+ * }
+ *
+ *
+ * let names = 'Pat,Xio,Alex';
+ * let splitString = split(names, ',');
+ * text(splitString[0], 5, 30);
+ * text(splitString[1], 5, 50);
+ * text(splitString[2], 5, 70);
+ *
+ *
+ * function setup() {
+ * let myStr = 'Mango, Banana, Lime';
+ * let myStrArr = splitTokens(myStr, ',');
+ *
+ * print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
+ * }
+ *
+ *
+ * let string = trim(' No new lines\n ');
+ * text(string + ' here', 2, 50);
+ *
+ *
+ * let d = day();
+ * text('Current day: \n' + d, 5, 50);
+ *
+ *
+ * let h = hour();
+ * text('Current hour:\n' + h, 5, 50);
+ *
+ *
+ * let m = minute();
+ * text('Current minute: \n' + m, 5, 50);
+ *
+ *
+ * let millisecond = millis();
+ * text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
+ *
+ *
+ * let m = month();
+ * text('Current month: \n' + m, 5, 50);
+ *
+ *
+ * let s = second();
+ * text('Current second: \n' + s, 5, 50);
+ *
+ *
+ * let y = year();
+ * text('Current year: \n' + y, 5, 50);
+ *
+ *
+ * // draw a plane
+ * // with width 50 and height 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * plane(50, 50);
+ * }
+ *
+ *
+ * // draw a spinning box
+ * // with width, height and depth of 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(50);
+ * }
+ *
+ *
+ * // draw a sphere with radius 40
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * sphere(40);
+ * }
+ *
+ *
+ * let detailX;
+ * // slide to see how detailX works
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * sphere(40, detailX.value(), 16);
+ * }
+ *
+ *
+ * let detailY;
+ * // slide to see how detailY works
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * sphere(40, 16, detailY.value());
+ * }
+ *
+ *
+ * // draw a spinning cylinder
+ * // with radius 20 and height 50
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * cylinder(20, 50);
+ * }
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * cylinder(20, 75, detailX.value(), 1);
+ * }
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(1, 16, 1);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * cylinder(20, 75, 16, detailY.value());
+ * }
+ *
+ *
+ * // draw a spinning cone
+ * // with radius 40 and height 70
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateZ(frameCount * 0.01);
+ * cone(40, 70);
+ * }
+ *
+ *
+ * // slide to see how detailx works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 16, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * cone(30, 65, detailX.value(), 16);
+ * }
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * cone(30, 65, 16, detailY.value());
+ * }
+ *
+ *
+ * // draw an ellipsoid
+ * // with radius 30, 40 and 40.
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * ellipsoid(30, 40, 40);
+ * }
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(2, 24, 12);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 94);
+ * rotateY(millis() / 1000);
+ * ellipsoid(30, 40, 40, detailX.value(), 8);
+ * }
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(2, 24, 6);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 105, 9);
+ * rotateY(millis() / 1000);
+ * ellipsoid(30, 40, 40, 12, detailY.value());
+ * }
+ *
+ *
+ * // draw a spinning torus
+ * // with ring radius 30 and tube radius 15
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * torus(30, 15);
+ * }
+ *
+ *
+ * // slide to see how detailX works
+ * let detailX;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailX = createSlider(3, 24, 3);
+ * detailX.position(10, height + 5);
+ * detailX.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * torus(30, 15, detailX.value(), 12);
+ * }
+ *
+ *
+ * // slide to see how detailY works
+ * let detailY;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * detailY = createSlider(3, 16, 3);
+ * detailY.position(10, height + 5);
+ * detailY.style('width', '80px');
+ * }
+ *
+ * function draw() {
+ * background(205, 102, 94);
+ * rotateY(millis() / 1000);
+ * torus(30, 15, 16, detailY.value());
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * //draw a line
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * // Use fill instead of stroke to change the color of shape.
+ * fill(255, 0, 0);
+ * line(10, 10, 0, 60, 60, 20);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * rotateY(0.5);
+ * box(30, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // Press the spacebar to turn debugMode off!
+ * if (keyIsDown(32)) {
+ * noDebugMode();
+ * }
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(GRID);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(AXES);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(GRID, 100, 10, 0, 0, 0);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
+ * }
+ *
+ * function draw() {
+ * noStroke();
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // set the stroke color and weight for the grid!
+ * stroke(255, 0, 150);
+ * strokeWeight(0.8);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ * normalMaterial();
+ * debugMode();
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * box(15, 30);
+ * // Press the spacebar to turn debugMode off!
+ * if (keyIsDown(32)) {
+ * noDebugMode();
+ * }
+ * }
+ *
+ *
+ * createCanvas(100, 100, WEBGL);
+ * ambientLight(0);
+ * ambientMaterial(250);
+ * sphere(40);
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(51);
+ * ambientLight(100); // white light
+ * ambientMaterial(255, 102, 94); // magenta material
+ * box(30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * shininess(20);
+ * ambientLight(50);
+ * specularColor(255, 0, 0);
+ * pointLight(255, 0, 0, 0, -50, 50);
+ * specularColor(0, 255, 0);
+ * pointLight(0, 255, 0, 0, 50, 50);
+ * specularMaterial(255);
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * //move your mouse to change light direction
+ * let dirX = (mouseX / width - 0.5) * 2;
+ * let dirY = (mouseY / height - 0.5) * 2;
+ * directionalLight(250, 250, 250, -dirX, -dirY, -1);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * //move your mouse to change light position
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * // to set the light position,
+ * // think of the world's coordinate as:
+ * // -width/2,-height/2 -------- width/2,-height/2
+ * // | |
+ * // | 0,0 |
+ * // | |
+ * // -width/2,height/2--------width/2,height/2
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * lights();
+ * rotateX(millis() / 1000);
+ * rotateY(millis() / 1000);
+ * rotateZ(millis() / 1000);
+ * box();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * }
+ * function draw() {
+ * background(0);
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * translate(-25, 0, 0);
+ * lightFalloff(1, 0, 0);
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * sphere(20);
+ * translate(50, 0, 0);
+ * lightFalloff(0.9, 0.01, 0);
+ * pointLight(250, 250, 250, locX, locY, 50);
+ * sphere(20);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * //move your mouse to change light position
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * // to set the light position,
+ * // think of the world's coordinate as:
+ * // -width/2,-height/2 -------- width/2,-height/2
+ * // | |
+ * // | 0,0 |
+ * // | |
+ * // -width/2,height/2--------width/2,height/2
+ * ambientLight(50);
+ * spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);
+ * noStroke();
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ *
+ * ambientLight(150, 0, 0);
+ * translate(-25, 0, 0);
+ * ambientMaterial(250);
+ * sphere(20);
+ *
+ * noLights();
+ * ambientLight(0, 150, 0);
+ * translate(50, 0, 0);
+ * ambientMaterial(250);
+ * sphere(20);
+ * }
+ *
+ * .stl
, .obj
).
+ * @return {p5.Geometry} the p5.Geometry object
+ *
+ * @example
+ *
+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ * octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * model(octahedron);
+ * }
+ *
+ *
+ * //draw a spinning teapot
+ * let teapot;
+ *
+ * function preload() {
+ * // Load model with normalise parameter set to true
+ * teapot = loadModel('assets/teapot.obj', true);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * scale(0.4); // Scaled to make model fit into canvas
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * normalMaterial(); // For effect
+ * model(teapot);
+ * }
+ *
+ *
+ * //draw a spinning octahedron
+ * let octahedron;
+ *
+ * function preload() {
+ * octahedron = loadModel('assets/octahedron.obj');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * model(octahedron);
+ * }
+ *
+ *
+ * let mandel;
+ * function preload() {
+ * // load the shader definitions from files
+ * mandel = loadShader('assets/shader.vert', 'assets/shader.frag');
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * // use the shader
+ * shader(mandel);
+ * noStroke();
+ * mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * }
+ *
+ * function draw() {
+ * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ * // the 'varying's are shared between both vertex & fragment shaders
+ * let varying = 'precision highp float; varying vec2 vPos;';
+ *
+ * // the vertex shader is called for each vertex
+ * let vs =
+ * varying +
+ * 'attribute vec3 aPosition;' +
+ * 'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';
+ *
+ * // the fragment shader is called for each pixel
+ * let fs =
+ * varying +
+ * 'uniform vec2 p;' +
+ * 'uniform float r;' +
+ * 'const int I = 500;' +
+ * 'void main() {' +
+ * ' vec2 c = p + vPos * r, z = c;' +
+ * ' float n = 0.0;' +
+ * ' for (int i = I; i > 0; i --) {' +
+ * ' if(z.x*z.x+z.y*z.y > 4.0) {' +
+ * ' n = float(i)/float(I);' +
+ * ' break;' +
+ * ' }' +
+ * ' z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +
+ * ' }' +
+ * ' gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +
+ * '}';
+ *
+ * let mandel;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // create and initialize the shader
+ * mandel = createShader(vs, fs);
+ * shader(mandel);
+ * noStroke();
+ *
+ * // 'p' is the center point of the Mandelbrot image
+ * mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * }
+ *
+ * function draw() {
+ * // 'r' is the size of the image in Mandelbrot-space
+ * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ *
+ * // Click within the image to toggle
+ * // the shader used by the quad shape
+ * // Note: for an alternative approach to the same example,
+ * // involving changing uniforms please refer to:
+ * // https://p5js.org/reference/#/p5.Shader/setUniform
+ *
+ * let redGreen;
+ * let orangeBlue;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // initialize the colors for redGreen shader
+ * shader(redGreen);
+ * redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+ * redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+ *
+ * // initialize the colors for orangeBlue shader
+ * shader(orangeBlue);
+ * orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+ * orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+ *
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // update the offset values for each shader,
+ * // moving orangeBlue in vertical and redGreen
+ * // in horizontal direction
+ * orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ * redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
+ *
+ * if (showRedGreen === true) {
+ * shader(redGreen);
+ * } else {
+ * shader(orangeBlue);
+ * }
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(200);
+ * normalMaterial();
+ * sphere(40);
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * rotateZ(frameCount * 0.01);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * //pass image as texture
+ * texture(img);
+ * box(200, 200, 200);
+ * }
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * pg = createGraphics(200, 200);
+ * pg.textSize(75);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * pg.background(255);
+ * pg.text('hello!', 0, 100);
+ * //pass image as texture
+ * texture(pg);
+ * rotateX(0.5);
+ * noStroke();
+ * plane(50);
+ * }
+ *
+ *
+ * let vid;
+ * function preload() {
+ * vid = createVideo('assets/fingers.mov');
+ * vid.hide();
+ * }
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ * //pass video frame as texture
+ * texture(vid);
+ * rect(-40, -40, 80, 80);
+ * }
+ *
+ * function mousePressed() {
+ * vid.loop();
+ * }
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * texture(img);
+ * textureMode(NORMAL);
+ * beginShape();
+ * vertex(-50, -50, 0, 0);
+ * vertex(50, -50, 1, 0);
+ * vertex(50, 50, 1, 1);
+ * vertex(-50, 50, 0, 1);
+ * endShape();
+ * }
+ *
+ *
+ * let img;
+ *
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * texture(img);
+ * textureMode(NORMAL);
+ * beginShape();
+ * vertex(-50, -50, 0, 0);
+ * vertex(50, -50, img.width, 0);
+ * vertex(50, 50, img.width, img.height);
+ * vertex(-50, 50, 0, img.height);
+ * endShape();
+ * }
+ *
+ *
+ * let img;
+ * function preload() {
+ * img = loadImage('assets/rockies128.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * textureWrap(MIRROR);
+ * }
+ *
+ * function draw() {
+ * background(0);
+ *
+ * let dX = mouseX;
+ * let dY = mouseY;
+ *
+ * let u = lerp(1.0, 2.0, dX);
+ * let v = lerp(1.0, 2.0, dY);
+ *
+ * scale(width / 2);
+ *
+ * texture(img);
+ *
+ * beginShape(TRIANGLES);
+ * vertex(-1, -1, 0, 0, 0);
+ * vertex(1, -1, 0, u, 0);
+ * vertex(1, 1, 0, u, v);
+ *
+ * vertex(1, 1, 0, u, v);
+ * vertex(-1, 1, 0, 0, v);
+ * vertex(-1, -1, 0, 0, 0);
+ * endShape();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * ambientLight(200);
+ * ambientMaterial(70, 130, 230);
+ * sphere(40);
+ * }
+ *
+ *
+ * // ambientLight is both red and blue (magenta),
+ * // so object only reflects it's red and blue components
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(70);
+ * ambientLight(100); // white light
+ * ambientMaterial(255, 0, 255); // pink material
+ * box(30);
+ * }
+ *
+ *
+ * // ambientLight is green. Since object does not contain
+ * // green, it does not reflect any light
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(70);
+ * ambientLight(0, 255, 0); // green light
+ * ambientMaterial(255, 0, 255); // pink material
+ * box(30);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * ambientLight(0);
+ * emissiveMaterial(130, 230, 0);
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * ambientLight(50);
+ * pointLight(250, 250, 250, 100, 100, 30);
+ * specularMaterial(250);
+ * sphere(40);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(0);
+ * noStroke();
+ * let locX = mouseX - width / 2;
+ * let locY = mouseY - height / 2;
+ * ambientLight(60, 60, 60);
+ * pointLight(255, 255, 255, locX, locY, 50);
+ * specularMaterial(250);
+ * translate(-25, 0, 0);
+ * shininess(1);
+ * sphere(20);
+ * translate(50, 0, 0);
+ * shininess(20);
+ * sphere(20);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ * background(204);
+ * //move the camera away from the plane by a sin wave
+ * camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
+ * plane(10, 10);
+ * }
+ *
+ *
+ * //move slider to see changes!
+ * //sliders control the first 6 parameters of camera()
+ * let sliderGroup = [];
+ * let X;
+ * let Y;
+ * let Z;
+ * let centerX;
+ * let centerY;
+ * let centerZ;
+ * let h = 20;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * //create sliders
+ * for (var i = 0; i < 6; i++) {
+ * if (i === 2) {
+ * sliderGroup[i] = createSlider(10, 400, 200);
+ * } else {
+ * sliderGroup[i] = createSlider(-400, 400, 0);
+ * }
+ * h = map(i, 0, 6, 5, 85);
+ * sliderGroup[i].position(10, height + h);
+ * sliderGroup[i].style('width', '80px');
+ * }
+ * }
+ *
+ * function draw() {
+ * background(60);
+ * // assigning sliders' value to each parameters
+ * X = sliderGroup[0].value();
+ * Y = sliderGroup[1].value();
+ * Z = sliderGroup[2].value();
+ * centerX = sliderGroup[3].value();
+ * centerY = sliderGroup[4].value();
+ * centerZ = sliderGroup[5].value();
+ * camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);
+ * stroke(255);
+ * fill(255, 102, 94);
+ * box(85);
+ * }
+ *
+ *
+ * //drag the mouse to look around!
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * perspective(PI / 3.0, width / height, 0.1, 500);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * normalMaterial();
+ *
+ * rotateX(-0.3);
+ * rotateY(-0.2);
+ * translate(0, 0, -50);
+ *
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 95);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 95);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ * //drag the mouse to look around!
+ * //there's no vanishing point
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * normalMaterial();
+ *
+ * rotateX(0.2);
+ * rotateY(-0.2);
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 65);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 65);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * setAttributes('antialias', true);
+ * frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
+ * }
+ * function draw() {
+ * background(200);
+ * orbitControl();
+ * strokeWeight(10);
+ * stroke(0, 0, 255);
+ * noFill();
+ *
+ * rotateY(-0.2);
+ * rotateX(-0.3);
+ * push();
+ * translate(-15, 0, sin(frameCount / 30) * 25);
+ * box(30);
+ * pop();
+ * push();
+ * translate(15, 0, sin(frameCount / 30 + PI) * 25);
+ * box(30);
+ * pop();
+ * }
+ *
+ *
+ * // Creates a camera object and animates it around a box.
+ * let camera;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * background(0);
+ * camera = createCamera();
+ * setCamera(camera);
+ * }
+ *
+ * function draw() {
+ * camera.lookAt(0, 0, 0);
+ * camera.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ * box(20);
+ * }
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * // 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);
+ * }
+ *
+ *
+ * let cam1, cam2;
+ * let currentCamera;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * normalMaterial();
+ *
+ * cam1 = createCamera();
+ * cam2 = createCamera();
+ * cam2.setPosition(30, 0, 50);
+ * cam2.lookAt(0, 0, 0);
+ * cam2.ortho();
+ *
+ * // set variable for previously active camera:
+ * currentCamera = 1;
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // camera 1:
+ * cam1.lookAt(0, 0, 0);
+ * cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ *
+ * // every 100 frames, switch between the two cameras
+ * if (frameCount % 100 === 0) {
+ * if (currentCamera === 1) {
+ * setCamera(cam1);
+ * currentCamera = 0;
+ * } else {
+ * setCamera(cam2);
+ * currentCamera = 1;
+ * }
+ * }
+ *
+ * drawBoxes();
+ * }
+ *
+ * function drawBoxes() {
+ * rotateX(frameCount * 0.01);
+ * translate(-100, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * translate(35, 0, 0);
+ * box(20);
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * function setup() {
+ * setAttributes('antialias', true);
+ * createCanvas(100, 100, WEBGL);
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * push();
+ * rotateZ(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * rotateY(frameCount * 0.02);
+ * fill(0, 0, 0);
+ * box(50);
+ * pop();
+ * }
+ *
+ *
+ * // press the mouse button to disable perPixelLighting
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ * let lights = [
+ * { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+ * { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+ * { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+ * { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+ * { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+ * { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+ * ];
+ *
+ * function draw() {
+ * let t = millis() / 1000 + 1000;
+ * background(0);
+ * directionalLight(color('#222'), 1, 1, 1);
+ *
+ * for (let i = 0; i < lights.length; i++) {
+ * let light = lights[i];
+ * pointLight(
+ * color(light.c),
+ * p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+ * );
+ * }
+ *
+ * specularMaterial(255);
+ * sphere(width * 0.1);
+ *
+ * rotateX(t * 0.77);
+ * rotateY(t * 0.83);
+ * rotateZ(t * 0.91);
+ * torus(width * 0.3, width * 0.07, 24, 10);
+ * }
+ *
+ * function mousePressed() {
+ * setAttributes('perPixelLighting', false);
+ * noStroke();
+ * fill(255);
+ * }
+ * function mouseReleased() {
+ * setAttributes('perPixelLighting', true);
+ * noStroke();
+ * fill(255);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * // Click within the image to toggle the value of uniforms
+ * // Note: for an alternative approach to the same example,
+ * // involving toggling between shaders please refer to:
+ * // https://p5js.org/reference/#/p5/shader
+ *
+ * let grad;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * shader(grad);
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // update the offset values for each scenario,
+ * // moving the "grad" shader in either vertical or
+ * // horizontal direction each with differing colors
+ *
+ * if (showRedGreen === true) {
+ * grad.setUniform('colorCenter', [1, 0, 0]);
+ * grad.setUniform('colorBackground', [0, 1, 0]);
+ * grad.setUniform('offset', [sin(millis() / 2000), 1]);
+ * } else {
+ * grad.setUniform('colorCenter', [1, 0.5, 0]);
+ * grad.setUniform('colorBackground', [0.226, 0, 0.615]);
+ * grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ * }
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ * p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},brightness:{name:"brightness",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\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:!0}]},{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:!0}]},{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, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},hue:{name:"hue",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\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, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},red:{name:"red",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},saturation:{name:"saturation",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],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:!0}],chainable:1},{params:[{name:"gray",description:"specifies a value between white and black
\n",type:"Number"},{name:"a",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"v1",description:"red or hue value (depending on the current color\n mode)
\n",type:"Number"},{name:"v2",description:"green or saturation value (depending on the current\n color mode)
\n",type:"Number"},{name:"v3",description:"blue or brightness value (depending on the current\n color mode)
\n",type:"Number"},{name:"a",description:"",type:"Number",optional:!0}],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() 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:!0}],chainable:1}]},clear:{name:"clear",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:!0}],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:!0}],chainable:1}]},fill:{name:"fill",class:"p5",module:"Color",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:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"a color string
\n",type:"String"}],chainable:1},{params:[{name:"gray",description:"a gray value
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],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 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:!0}],chainable:1},{params:[{name:"value",description:"a color string
\n",type:"String"}],chainable:1},{params:[{name:"gray",description:"a gray value
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],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 for a shape's fill.\n This will default to 255 when no argument is given, which\n is full strength.
\n",type:"Number",optional:!0},{name:"strengthStroke",description:"A number (0-255) for the strength of erasing for a shape's stroke.\n This will default to 255 when no argument is given, which\n is full strength.
\n",type:"Number",optional:!0}],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:!0},{name:"detail",description:"optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the arc. Default value is 25.
\n",type:"Number",optional:!0}],class:"p5",module:"Shape"},ellipse:{name:"ellipse",class:"p5",module:"Shape",overloads:[{params:[{name:"x",description:"x-coordinate of the center of ellipse.
\n",type:"Number"},{name:"y",description:"y-coordinate of the center of 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:!0}],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:"number of radial sectors to draw (for WebGL mode)
\n",type:"Integer"}]}]},circle:{name:"circle",params:[{name:"x",description:"x-coordinate of the centre of the circle.
\n",type:"Number"},{name:"y",description:"y-coordinate of the centre of the circle.
\n",type:"Number"},{name:"d",description:"diameter of the circle.
\n",type:"Number"}],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:!0}],chainable:1},{params:[{name:"coordinate_vector",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"}],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"}],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:!0},{name:"tl",description:"optional radius of top-left corner.
\n",type:"Number",optional:!0},{name:"tr",description:"optional radius of top-right corner.
\n",type:"Number",optional:!0},{name:"br",description:"optional radius of bottom-right corner.
\n",type:"Number",optional:!0},{name:"bl",description:"optional radius of bottom-left corner.
\n",type:"Number",optional:!0}],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:!0},{name:"detailY",description:"number of segments in the y-direction (for WebGL mode)
\n",type:"Integer",optional:!0}],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:!0},{name:"tr",description:"optional radius of top-right corner.
\n",type:"Number",optional:!0},{name:"br",description:"optional radius of bottom-right corner.
\n",type:"Number",optional:!0},{name:"bl",description:"optional radius of bottom-left corner.
\n",type:"Number",optional:!0}],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, 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:!0}],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:!0}],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:!0}],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",type:"Number"},{name:"u",description:"the vertex's texture u-coordinate
\n",type:"Number",optional:!0},{name:"v",description:"the vertex's texture v-coordinate
\n",type:"Number",optional:!0}],chainable:1}]},P2D:{name:"P2D",class:"p5",module:"Constants"},WEBGL:{name:"WEBGL",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"},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"},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:!0},{name:"y",description:"the vertical active spot of the cursor (must be less than 32)
\n",type:"Number",optional:!0}],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:[]}]},noCursor:{name:"noCursor",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",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:!0}],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",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:!0}],class:"p5",module:"Rendering"},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:!0}],class:"p5",module:"Rendering"},noCanvas:{name:"noCanvas",class:"p5",module:"Rendering"},createGraphics:{name:"createGraphics",params:[{name:"w",description:"width of the offscreen graphics buffer
\n",type:"Number"},{name:"h",description:"height of the offscreen graphics buffer
\n",type:"Number"},{name:"renderer",description:"either P2D or WEBGL\n undefined defaults to p2d
\n",type:"Constant",optional:!0}],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:!0}],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",params:[{name:"a",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"b",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"c",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"d",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"e",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"f",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"}],class:"p5",module:"Transform"},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:!0}],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:!0},{name:"z",description:"percent to scale the object in the z-axis (webgl only)
\n",type:"Number",optional:!0}],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:!0}],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:!0}],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:!0}],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:!0}],class:"p5",module:"DOM"},createP:{name:"createP",params:[{name:"html",description:"inner HTML for element created
\n",type:"String",optional:!0}],class:"p5",module:"DOM"},createSpan:{name:"createSpan",params:[{name:"html",description:"inner HTML for element created
\n",type:"String",optional:!0}],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:!0}]}]},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:!0}],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:!0},{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:!0}],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:!0}],class:"p5",module:"DOM"},createCheckbox:{name:"createCheckbox",params:[{name:"label",description:"label displayed after checkbox
\n",type:"String",optional:!0},{name:"value",description:"value of the checkbox; checked is true, unchecked is false
\n",type:"Boolean",optional:!0}],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:!0}]},{params:[{name:"existing",description:"DOM select element
\n",type:"Object"}]}]},createRadio:{name:"createRadio",class:"p5",module:"DOM",overloads:[{params:[{name:"containerElement",description:"An 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:!0}]},{params:[{name:"name",description:"",type:"String"}]},{params:[]}]},createColorPicker:{name:"createColorPicker",params:[{name:"value",description:"default color of element
\n",type:"String|p5.Color",optional:!0}],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:!0}]},{params:[{name:"value",description:"",type:"String",optional:!0}]}]},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:!0}],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:!0}],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:!0},{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:!0}],class:"p5",module:"DOM"},VIDEO:{name:"VIDEO",class:"p5",module:"DOM"},AUDIO:{name:"AUDIO",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:!0}],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:!0}],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",class:"p5",module:"Events"},keyReleased:{name:"keyReleased",class:"p5",module:"Events"},keyTyped:{name:"keyTyped",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:"Object",optional:!0}],class:"p5",module:"Events"},mouseDragged:{name:"mouseDragged",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mousePressed:{name:"mousePressed",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mouseReleased:{name:"mouseReleased",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mouseClicked:{name:"mouseClicked",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},doubleClicked:{name:"doubleClicked",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mouseWheel:{name:"mouseWheel",params:[{name:"event",description:"optional WheelEvent callback argument.
\n",type:"Object",optional:!0}],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:"Object",optional:!0}],class:"p5",module:"Events"},touchMoved:{name:"touchMoved",params:[{name:"event",description:"optional TouchEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},touchEnded:{name:"touchEnded",params:[{name:"event",description:"optional TouchEvent callback argument.
\n",type:"Object",optional:!0}],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:"a variable\n representing a specific html5 canvas (optional)
\n",type:"p5.Element|HTMLCanvasElement"},{name:"filename",description:"",type:"String",optional:!0},{name:"extension",description:"'jpg' or 'png'
\n",type:"String",optional:!0}]},{params:[{name:"filename",description:"",type:"String",optional:!0},{name:"extension",description:"",type:"String",optional:!0}]}]},saveFrames:{name:"saveFrames",params:[{name:"filename",description:"",type:"String"},{name:"extension",description:"'jpg' or 'png'
\n",type:"String"},{name:"duration",description:"Duration in seconds to save the frames for.
\n",type:"Number"},{name:"framerate",description:"Framerate to save the frames in.
\n",type:"Number"},{name:"callback",description:"A callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData - an\n image/octet-stream, filename and extension.
\n",type:"Function(Array)",optional:!0}],class:"p5",module:"Image"},loadImage:{name:"loadImage",params:[{name:"path",description:"Path of the image to be loaded
\n",type:"String"},{name:"successCallback",description:'Function to be called once\n the image is loaded. Will be passed the\n p5.Image.
\n',type:"function(p5.Image)",optional:!0},{name:"failureCallback",description:"called with event error if\n the image fails to load.
\n",type:"Function(Event)",optional:!0}],class:"p5",module:"Image"},image:{name:"image",class:"p5",module:"Image",overloads:[{params:[{name:"img",description:"the image to display
\n",type:"p5.Image|p5.Element"},{name:"x",description:"the x-coordinate of the top-left corner of the image
\n",type:"Number"},{name:"y",description:"the y-coordinate of the top-left corner of the image
\n",type:"Number"},{name:"width",description:"the width to draw the image
\n",type:"Number",optional:!0},{name:"height",description:"the height to draw the image
\n",type:"Number",optional:!0}]},{params:[{name:"img",description:"",type:"p5.Image|p5.Element"},{name:"dx",description:"the x-coordinate of the destination\n rectangle in which to draw the source image
\n",type:"Number"},{name:"dy",description:"the y-coordinate of the destination\n rectangle in which to draw the source image
\n",type:"Number"},{name:"dWidth",description:"the width of the destination rectangle
\n",type:"Number"},{name:"dHeight",description:"the height of the destination rectangle
\n",type:"Number"},{name:"sx",description:"the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n",type:"Number"},{name:"sy",description:"the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n",type:"Number"},{name:"sWidth",description:"the width of the subsection of the\n source image to draw into the destination\n rectangle
\n",type:"Number",optional:!0},{name:"sHeight",description:"the height of the subsection of the\n source image to draw into the destination rectangle
\n",type:"Number",optional:!0}]}]},tint:{name:"tint",class:"p5",module:"Image",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:"",type:"Number",optional:!0}]},{params:[{name:"value",description:"a color string
\n",type:"String"}]},{params:[{name:"gray",description:"a gray value
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}]},{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:"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",params:[{name:"filterType",description:"either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n",type:"Constant"},{name:"filterParam",description:"an optional parameter unique\n to each filter, see above
\n",type:"Number",optional:!0}],class:"p5",module:"Image"},get:{name:"get",class:"p5",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
\n",type:"Number"},{name:"h",description:"height
\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:'insert a grayscale value | a pixel array |\n a p5.Color object | a 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:!0},{name:"y",description:"y-coordinate of the upper-left corner of region\n to update
\n",type:"Number",optional:!0},{name:"w",description:"width of region to update
\n",type:"Number",optional:!0},{name:"h",description:"height of region to update
\n",type:"Number",optional:!0}],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:!0},{name:"datatype",description:'"json" or "jsonp"
\n',type:"String",optional:!0},{name:"callback",description:'function to be executed after\n loadJSON() completes, data is passed\n in as first argument
\n',type:"Function",optional:!0},{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:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"datatype",description:"",type:"String"},{name:"callback",description:"",type:"Function",optional:!0},{name:"errorCallback",description:"",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"callback",description:"",type:"Function"},{name:"errorCallback",description:"",type:"Function",optional:!0}]}]},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:!0},{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:!0}],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:!0},{name:"header",description:'"header" to indicate table has header row
\n',type:"String",optional:!0},{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:!0},{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:!0}],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:!0},{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:!0}],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:!0},{name:"errorCallback",description:"function to be executed if there\n is an error
\n",type:"Function",optional:!0}],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:!0},{name:"data",description:"param data passed sent with request
\n",type:"Object|Boolean",optional:!0},{name:"callback",description:'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n',type:"Function",optional:!0},{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:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"data",description:"",type:"Object|Boolean"},{name:"callback",description:"",type:"Function",optional:!0},{name:"errorCallback",description:"",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"callback",description:"",type:"Function"},{name:"errorCallback",description:"",type:"Function",optional:!0}]}]},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:!0},{name:"data",description:"param data passed sent with request
\n",type:"Object|Boolean",optional:!0},{name:"callback",description:'function to be executed after\n httpPost() completes, data is passed in\n as first argument
\n',type:"Function",optional:!0},{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:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"data",description:"",type:"Object|Boolean"},{name:"callback",description:"",type:"Function",optional:!0},{name:"errorCallback",description:"",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"callback",description:"",type:"Function"},{name:"errorCallback",description:"",type:"Function",optional:!0}]}]},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:!0},{name:"datatype",description:'"json", "jsonp", "xml", or "text"
\n',type:"String",optional:!0},{name:"data",description:"param data passed sent with request
\n",type:"Object",optional:!0},{name:"callback",description:'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n',type:"Function",optional:!0},{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:!0}]},{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:!0},{name:"errorCallback",description:"",type:"Function",optional:!0}]}]},createWriter:{name:"createWriter",params:[{name:"name",description:"name of the file to be created
\n",type:"String"},{name:"extension",description:"",type:"String",optional:!0}],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:!0},{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:!0},{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:!0}],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:!0},{name:"isCRLF",description:"if true, change line-break to CRLF
\n",type:"Boolean",optional:!0}],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:!0}],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:"a",description:"first value
\n",type:"Number"},{name:"b",description:"second value
\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:!0}],class:"p5",module:"Math"},max:{name:"max",class:"p5",module:"Math",overloads:[{params:[{name:"n0",description:"Number to compare
\n",type:"Number"},{name:"n1",description:"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:"Number to compare
\n",type:"Number"},{name:"n1",description:"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:!0}],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:"num",description:"Number whose fractional part needs to be found out
\n",type:"Number"}],class:"p5",module:"Math"},createVector:{name:"createVector",params:[{name:"x",description:"x component of the vector
\n",type:"Number",optional:!0},{name:"y",description:"y component of the vector
\n",type:"Number",optional:!0},{name:"z",description:"z component of the vector
\n",type:"Number",optional:!0}],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:!0},{name:"z",description:"z-coordinate in noise space
\n",type:"Number",optional:!0}],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:"the seed value
\n",type:"Number"}],class:"p5",module:"Math"},randomSeed:{name:"randomSeed",params:[{name:"seed",description:"the seed value
\n",type:"Number"}],class:"p5",module:"Math"},random:{name:"random",class:"p5",module:"Math",overloads:[{params:[{name:"min",description:"the lower bound (inclusive)
\n",type:"Number",optional:!0},{name:"max",description:"the upper bound (exclusive)
\n",type:"Number",optional:!0}]},{params:[{name:"choices",description:"the array to choose from
\n",type:"Array"}]}]},randomGaussian:{name:"randomGaussian",params:[{name:"mean",description:"the mean
\n",type:"Number"},{name:"sd",description:"the standard deviation
\n",type:"Number"}],class:"p5",module:"Math"},acos:{name:"acos",params:[{name:"value",description:"the value whose arc cosine is to be returned
\n",type:"Number"}],class:"p5",module:"Math"},asin:{name:"asin",params:[{name:"value",description:"the value whose arc sine is to be returned
\n",type:"Number"}],class:"p5",module:"Math"},atan:{name:"atan",params:[{name:"value",description:"the 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:"the radians value to convert to degrees
\n",type:"Number"}],class:"p5",module:"Math"},radians:{name:"radians",params:[{name:"degrees",description:"the degree value to convert to radians
\n",type:"Number"}],class:"p5",module:"Math"},angleMode:{name:"angleMode",params:[{name:"mode",description:"either RADIANS or DEGREES
\n",type:"Constant"}],class:"p5",module:"Math"},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:!0}],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"},loadFont:{name:"loadFont",params:[{name:"path",description:"name of the file or url to load
\n",type:"String"},{name:"callback",description:'function to be executed after\n loadFont() completes
\n',type:"Function",optional:!0},{name:"onError",description:"function to be executed if\n an error occurs
\n",type:"Function",optional:!0}],class:"p5",module:"Typography"},text:{name:"text",params:[{name:"str",description:"the alphanumeric\n symbols to be displayed
\n",type:"String|Object|Array|Number|Boolean"},{name:"x",description:"x-coordinate of text
\n",type:"Number"},{name:"y",description:"y-coordinate of text
\n",type:"Number"},{name:"x2",description:'by default, the width of the text box,\n see rectMode() for more info
\n',type:"Number",optional:!0},{name:"y2",description:'by default, the height of the text box,\n see rectMode() for more info
\n',type:"Number",optional:!0}],class:"p5",module:"Typography"},textFont:{name:"textFont",class:"p5",module:"Typography",overloads:[{params:[]},{params:[{name:"font",description:'a font loaded via loadFont(),\nor a String representing a web safe font\n(a font that is generally available across all systems)
\n',type:"Object|String"},{name:"size",description:"the font size to use
\n",type:"Number",optional:!0}],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:!0}]}]},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:!0}],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:!0}],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:!0}],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:!0}]},{params:[{name:"ns",description:"values to parse
\n",type:"Array"}]}]},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:!0}]},{params:[{name:"ns",description:"array of values to parse
\n",type:"Number[]"},{name:"digits",description:"",type:"Number",optional:!0}]}]},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:!0},{name:"right",description:"number of digits to the right of the\n decimal point
\n",type:"Integer|String",optional:!0}]},{params:[{name:"nums",description:"the Numbers to format
\n",type:"Array"},{name:"left",description:"",type:"Integer|String",optional:!0},{name:"right",description:"",type:"Integer|String",optional:!0}]}]},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:!0}]},{params:[{name:"nums",description:"the Numbers to format
\n",type:"Array"},{name:"right",description:"",type:"Integer|String",optional:!0}]}]},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:!0},{name:"right",description:"number of digits to the right of the\n decimal point
\n",type:"Integer",optional:!0}]},{params:[{name:"nums",description:"the Numbers to format
\n",type:"Number[]"},{name:"left",description:"",type:"Integer",optional:!0},{name:"right",description:"",type:"Integer",optional:!0}]}]},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:!0},{name:"right",description:"number of digits to the right of the\n decimal point
\n",type:"Integer",optional:!0}]},{params:[{name:"nums",description:"the Numbers to format
\n",type:"Array"},{name:"left",description:"",type:"Integer",optional:!0},{name:"right",description:"",type:"Integer",optional:!0}]}]},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:!0}],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"},plane:{name:"plane",params:[{name:"width",description:"width of the plane
\n",type:"Number",optional:!0},{name:"height",description:"height of the plane
\n",type:"Number",optional:!0},{name:"detailX",description:"Optional number of triangle\n subdivisions in x-dimension
\n",type:"Integer",optional:!0},{name:"detailY",description:"Optional number of triangle\n subdivisions in y-dimension
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},box:{name:"box",params:[{name:"width",description:"width of the box
\n",type:"Number",optional:!0},{name:"Height",description:"height of the box
\n",type:"Number",optional:!0},{name:"depth",description:"depth of the box
\n",type:"Number",optional:!0},{name:"detailX",description:"Optional number of triangle\n subdivisions in x-dimension
\n",type:"Integer",optional:!0},{name:"detailY",description:"Optional number of triangle\n subdivisions in y-dimension
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},sphere:{name:"sphere",params:[{name:"radius",description:"radius of circle
\n",type:"Number",optional:!0},{name:"detailX",description:"optional number of subdivisions in x-dimension
\n",type:"Integer",optional:!0},{name:"detailY",description:"optional number of subdivisions in y-dimension
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},cylinder:{name:"cylinder",params:[{name:"radius",description:"radius of the surface
\n",type:"Number",optional:!0},{name:"height",description:"height of the cylinder
\n",type:"Number",optional:!0},{name:"detailX",description:"number of subdivisions in x-dimension;\n default is 24
\n",type:"Integer",optional:!0},{name:"detailY",description:"number of subdivisions in y-dimension;\n default is 1
\n",type:"Integer",optional:!0},{name:"bottomCap",description:"whether to draw the bottom of the cylinder
\n",type:"Boolean",optional:!0},{name:"topCap",description:"whether to draw the top of the cylinder
\n",type:"Boolean",optional:!0}],class:"p5",module:"Shape"},cone:{name:"cone",params:[{name:"radius",description:"radius of the bottom surface
\n",type:"Number",optional:!0},{name:"height",description:"height of the cone
\n",type:"Number",optional:!0},{name:"detailX",description:"number of segments,\n the more segments the smoother geometry\n default is 24
\n",type:"Integer",optional:!0},{name:"detailY",description:"number of segments,\n the more segments the smoother geometry\n default is 1
\n",type:"Integer",optional:!0},{name:"cap",description:"whether to draw the base of the cone
\n",type:"Boolean",optional:!0}],class:"p5",module:"Shape"},ellipsoid:{name:"ellipsoid",params:[{name:"radiusx",description:"x-radius of ellipsoid
\n",type:"Number",optional:!0},{name:"radiusy",description:"y-radius of ellipsoid
\n",type:"Number",optional:!0},{name:"radiusz",description:"z-radius of ellipsoid
\n",type:"Number",optional:!0},{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:!0},{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:!0}],class:"p5",module:"Shape"},torus:{name:"torus",params:[{name:"radius",description:"radius of the whole ring
\n",type:"Number",optional:!0},{name:"tubeRadius",description:"radius of the tube
\n",type:"Number",optional:!0},{name:"detailX",description:"number of segments in x-dimension,\n the more segments the smoother geometry\n default is 24
\n",type:"Integer",optional:!0},{name:"detailY",description:"number of segments in y-dimension,\n the more segments the smoother geometry\n default is 16
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},orbitControl:{name:"orbitControl",params:[{name:"sensitivityX",description:"sensitivity to mouse movement along X axis
\n",type:"Number",optional:!0},{name:"sensitivityY",description:"sensitivity to mouse movement along Y axis
\n",type:"Number",optional:!0},{name:"sensitivityZ",description:"sensitivity to scroll movement along Z axis
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},debugMode:{name:"debugMode",class:"p5",module:"Lights, Camera",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:!0},{name:"gridDivisions",description:"number of divisions in the grid
\n",type:"Number",optional:!0},{name:"xOff",description:"X axis offset from origin (0,0,0)
\n",type:"Number",optional:!0},{name:"yOff",description:"Y axis offset from origin (0,0,0)
\n",type:"Number",optional:!0},{name:"zOff",description:"Z axis offset from origin (0,0,0)
\n",type:"Number",optional:!0}]},{params:[{name:"mode",description:"",type:"Constant"},{name:"axesSize",description:"size of axes icon
\n",type:"Number",optional:!0},{name:"xOff",description:"",type:"Number",optional:!0},{name:"yOff",description:"",type:"Number",optional:!0},{name:"zOff",description:"",type:"Number",optional:!0}]},{params:[{name:"gridSize",description:"",type:"Number",optional:!0},{name:"gridDivisions",description:"",type:"Number",optional:!0},{name:"gridXOff",description:"",type:"Number",optional:!0},{name:"gridYOff",description:"",type:"Number",optional:!0},{name:"gridZOff",description:"",type:"Number",optional:!0},{name:"axesSize",description:"",type:"Number",optional:!0},{name:"axesXOff",description:"",type:"Number",optional:!0},{name:"axesYOff",description:"",type:"Number",optional:!0},{name:"axesZOff",description:"",type:"Number",optional:!0}]}]},noDebugMode:{name:"noDebugMode",class:"p5",module:"Lights, Camera"},ambientLight:{name:"ambientLight",class:"p5",module:"Lights, Camera",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:"the alpha value
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"a color string
\n",type:"String"}],chainable:1},{params:[{name:"gray",description:"a gray value
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],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 ambient light color
\n",type:"p5.Color"}],chainable:1}]},specularColor:{name:"specularColor",class:"p5",module:"Lights, Camera",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:"value",description:"a color string
\n",type:"String"}],chainable:1},{params:[{name:"gray",description:"a gray value
\n",type:"Number"}],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 ambient light color
\n",type:"p5.Color"}],chainable:1}]},directionalLight:{name:"directionalLight",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"red or hue value (depending on the current\ncolor mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number"},{name:"v3",description:"blue or brightness value
\n",type:"Number"},{name:"position",description:"the direction of the light
\n",type:"p5.Vector"}],chainable:1},{params:[{name:"color",description:'color Array, CSS color string,\n or p5.Color value
\n',type:"Number[]|String|p5.Color"},{name:"x",description:"x axis direction
\n",type:"Number"},{name:"y",description:"y axis direction
\n",type:"Number"},{name:"z",description:"z axis direction
\n",type:"Number"}],chainable:1},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"position",description:"",type:"p5.Vector"}],chainable:1},{params:[{name:"v1",description:"",type:"Number"},{name:"v2",description:"",type:"Number"},{name:"v3",description:"",type:"Number"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"}],chainable:1}]},pointLight:{name:"pointLight",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"red or hue value (depending on the current\ncolor mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number"},{name:"v3",description:"blue or brightness value
\n",type:"Number"},{name:"x",description:"x axis position
\n",type:"Number"},{name:"y",description:"y axis position
\n",type:"Number"},{name:"z",description:"z axis position
\n",type:"Number"}],chainable:1},{params:[{name:"v1",description:"",type:"Number"},{name:"v2",description:"",type:"Number"},{name:"v3",description:"",type:"Number"},{name:"position",description:"the position of the light
\n",type:"p5.Vector"}],chainable:1},{params:[{name:"color",description:'color Array, CSS color string,\nor p5.Color value
\n',type:"Number[]|String|p5.Color"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"}],chainable:1},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"position",description:"",type:"p5.Vector"}],chainable:1}]},lights:{name:"lights",class:"p5",module:"Lights, Camera"},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:"Lights, Camera"},spotLight:{name:"spotLight",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"red or hue value (depending on the current\ncolor mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number"},{name:"v3",description:"blue or brightness value
\n",type:"Number"},{name:"x",description:"x axis position
\n",type:"Number"},{name:"y",description:"y axis position
\n",type:"Number"},{name:"z",description:"z axis position
\n",type:"Number"},{name:"rx",description:"x axis direction of light
\n",type:"Number"},{name:"ry",description:"y axis direction of light
\n",type:"Number"},{name:"rz",description:"z axis direction of light
\n",type:"Number"},{name:"angle",description:"optional parameter for angle. Defaults to PI/3
\n",type:"Number",optional:!0},{name:"conc",description:"optional parameter for concentration. Defaults to 100
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"color",description:'color Array, CSS color string,\nor p5.Color value
\n',type:"Number[]|String|p5.Color"},{name:"position",description:"the position of the light
\n",type:"p5.Vector"},{name:"direction",description:"the direction of the light
\n",type:"p5.Vector"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{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:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"},{name:"direction",description:"",type:"p5.Vector"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"position",description:"",type:"p5.Vector"},{name:"rx",description:"",type:"Number"},{name:"ry",description:"",type:"Number"},{name:"rz",description:"",type:"Number"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{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:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{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:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"},{name:"rx",description:"",type:"Number"},{name:"ry",description:"",type:"Number"},{name:"rz",description:"",type:"Number"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]}]},noLights:{name:"noLights",class:"p5",module:"Lights, Camera"},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:!0},{name:"failureCallback",description:"called with event error if\n the model fails to load.
\n",type:"Function(Event)",optional:!0},{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 Shader object is passed as the first argument.
\n",type:"Function",optional:!0},{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:!0}],class:"p5",module:"Lights, Camera"},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:"Lights, Camera"},shader:{name:"shader",params:[{name:"s",description:'the desired p5.Shader to use for rendering\nshapes.
\n',type:"p5.Shader",optional:!0}],class:"p5",module:"Lights, Camera"},resetShader:{name:"resetShader",class:"p5",module:"Lights, Camera"},normalMaterial:{name:"normalMaterial",class:"p5",module:"Lights, Camera"},texture:{name:"texture",params:[{name:"tex",description:"2-dimensional graphics\n to render as texture
\n",type:"p5.Image|p5.MediaElement|p5.Graphics"}],class:"p5",module:"Lights, Camera"},textureMode:{name:"textureMode",params:[{name:"mode",description:"either IMAGE or NORMAL
\n",type:"Constant"}],class:"p5",module:"Lights, Camera"},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:!0}],class:"p5",module:"Lights, Camera"},ambientMaterial:{name:"ambientMaterial",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"gray value, red or hue value\n (depending on the current color mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number",optional:!0},{name:"v3",description:"blue or brightness value
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"color",description:"color, color Array, or CSS color string
\n",type:"Number[]|String|p5.Color"}],chainable:1}]},emissiveMaterial:{name:"emissiveMaterial",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"gray value, red or hue value\n (depending on the current color mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number",optional:!0},{name:"v3",description:"blue or brightness value
\n",type:"Number",optional:!0},{name:"a",description:"opacity
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"color",description:"color, color Array, or CSS color string
\n",type:"Number[]|String|p5.Color"}],chainable:1}]},specularMaterial:{name:"specularMaterial",class:"p5",module:"Lights, Camera",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:!0}],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:!0}],chainable:1},{params:[{name:"color",description:"color Array, or CSS color string
\n",type:"Number[]|String|p5.Color"}],chainable:1}]},shininess:{name:"shininess",params:[{name:"shine",description:"Degree of Shininess.\n Defaults to 1.
\n",type:"Number"}],class:"p5",module:"Lights, Camera"},camera:{name:"camera",params:[{name:"x",description:"camera position value on x axis
\n",type:"Number",optional:!0},{name:"y",description:"camera position value on y axis
\n",type:"Number",optional:!0},{name:"z",description:"camera position value on z axis
\n",type:"Number",optional:!0},{name:"centerX",description:"x coordinate representing center of the sketch
\n",type:"Number",optional:!0},{name:"centerY",description:"y coordinate representing center of the sketch
\n",type:"Number",optional:!0},{name:"centerZ",description:"z coordinate representing center of the sketch
\n",type:"Number",optional:!0},{name:"upX",description:"x component of direction 'up' from camera
\n",type:"Number",optional:!0},{name:"upY",description:"y component of direction 'up' from camera
\n",type:"Number",optional:!0},{name:"upZ",description:"z component of direction 'up' from camera
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},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:!0},{name:"aspect",description:"camera frustum aspect ratio
\n",type:"Number",optional:!0},{name:"near",description:"frustum near plane length
\n",type:"Number",optional:!0},{name:"far",description:"frustum far plane length
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},ortho:{name:"ortho",params:[{name:"left",description:"camera frustum left plane
\n",type:"Number",optional:!0},{name:"right",description:"camera frustum right plane
\n",type:"Number",optional:!0},{name:"bottom",description:"camera frustum bottom plane
\n",type:"Number",optional:!0},{name:"top",description:"camera frustum top plane
\n",type:"Number",optional:!0},{name:"near",description:"camera frustum near plane
\n",type:"Number",optional:!0},{name:"far",description:"camera frustum far plane
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},frustum:{name:"frustum",params:[{name:"left",description:"camera frustum left plane
\n",type:"Number",optional:!0},{name:"right",description:"camera frustum right plane
\n",type:"Number",optional:!0},{name:"bottom",description:"camera frustum bottom plane
\n",type:"Number",optional:!0},{name:"top",description:"camera frustum top plane
\n",type:"Number",optional:!0},{name:"near",description:"camera frustum near plane
\n",type:"Number",optional:!0},{name:"far",description:"camera frustum far plane
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},createCamera:{name:"createCamera",class:"p5",module:"Lights, Camera"},setCamera:{name:"setCamera",params:[{name:"cam",description:"p5.Camera object
\n",type:"p5.Camera"}],class:"p5",module:"Lights, Camera"},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"}]}]},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:!0,multiple:!0}],class:"p5",module:"p5.sound"},getAudioContext:{name:"getAudioContext",class:"p5",module:"p5.sound"},userStartAudio:{params:[{name:"element(s)",description:"This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.
\n",type:"Element|Array",optional:!0},{name:"callback",description:"Callback to invoke when the AudioContext\n has started
\n",type:"Function",optional:!0}],name:"userStartAudio",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:!0},{name:"errorCallback",description:"Name of a function to call if there is\n an error loading the file.
\n",type:"Function",optional:!0},{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:!0}],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:!0},{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:!0}],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"},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"}},"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:!0}],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"},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:!0}],chainable:1}]},center:{name:"center",params:[{name:"align",description:"passing 'vertical', 'horizontal' aligns element accordingly
\n",type:"String",optional:!0}],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:!0},{name:"append",description:"whether to append HTML to existing
\n",type:"Boolean",optional:!0}],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:!0},{name:"y",description:"y-position relative to upper left of window (optional)
\n",type:"Number",optional:!0},{name:"positionType",description:"it can be static, fixed, relative, sticky, initial or inherit (optional)
\n",type:"String"}],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:!0}],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:!0}],class:"p5.Element",module:"DOM"}},"p5.Graphics":{reset:{name:"reset",class:"p5.Graphics",module:"Rendering"},remove:{name:"remove",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:!0}],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"},loadPixels:{name:"loadPixels",class:"p5.Image",module:"Image"},updatePixels:{name:"updatePixels",class:"p5.Image",module:"Image",overloads:[{params:[{name:"x",description:"x-offset of the target update area for the\n underlying canvas
\n",type:"Integer"},{name:"y",description:"y-offset of the target update area for the\n underlying canvas
\n",type:"Integer"},{name:"w",description:"height of the target update area for the\n underlying canvas
\n",type:"Integer"},{name:"h",description:"height of the target update area for the\n underlying canvas
\n",type:"Integer"}]},{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
\n",type:"Number"},{name:"h",description:"height
\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 a p5.Color | image to copy
\n',type:"Number|Number[]|Object"}],class:"p5.Image",module:"Image"},resize:{name:"resize",params:[{name:"width",description:"the resized image width
\n",type:"Number"},{name:"height",description:"the 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, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n",type:"Constant"},{name:"filterParam",description:"an optional parameter unique\n to each filter, see above
\n",type:"Number",optional:!0}],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:"give your file a name
\n",type:"String"},{name:"extension",description:"'png' or 'jpg'
\n",type:"String"}],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:"the index for the frame that should be displayed
\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:"the amount in milliseconds to delay between switching frames
\n",type:"Number"},{name:"index",description:"the index of the frame that should have the new delay value {optional}
\n",type:"Number",optional:!0}],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:!0}],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:!0}],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:!0}],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:!0}],class:"p5.Table",module:"IO"},trim:{name:"trim",params:[{name:"column",description:"Column ID (number)\n or name (string)
\n",type:"String|Integer",optional:!0}],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:!0}],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:!0}],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:!0}],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:!0}],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:!0}],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:"the x component of the vector
\n",type:"Number",optional:!0},{name:"y",description:"the y component of the vector
\n",type:"Number",optional:!0},{name:"z",description:"the z component of the vector
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"the vector to set
\n",type:"p5.Vector|Number[]"}],chainable:1}]},copy:{name:"copy",class:"p5.Vector",module:"Math"},add:{name:"add",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component of the vector to be added
\n",type:"Number"},{name:"y",description:"the y component of the vector to be added
\n",type:"Number",optional:!0},{name:"z",description:"the z component of the vector to be added
\n",type:"Number",optional:!0}],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:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],static:1}]},rem:{name:"rem",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component of divisor vector
\n",type:"Number"},{name:"y",description:"the y component of divisor vector
\n",type:"Number"},{name:"z",description:"the 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:'dividend p5.Vector
\n',type:"p5.Vector"},{name:"v2",description:'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:"the x component of the vector to subtract
\n",type:"Number"},{name:"y",description:"the y component of the vector to subtract
\n",type:"Number",optional:!0},{name:"z",description:"the z component of the vector to subtract
\n",type:"Number",optional:!0}],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:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],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:"The number to multiply with the x component of the vector
\n",type:"Number"},{name:"y",description:"The number to multiply with the y component of the vector
\n",type:"Number"},{name:"z",description:"The number to multiply with the z component of the vector
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"arr",description:"The array to multiply with the components of the vector
\n",type:"Number[]"}],chainable:1},{params:[{name:"v",description:"The 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:!0}],static:1},{params:[{name:"v",description:"",type:"p5.Vector"},{name:"n",description:"",type:"Number"},{name:"target",description:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],static:1},{params:[{name:"v0",description:"",type:"p5.Vector"},{name:"v1",description:"",type:"p5.Vector"},{name:"target",description:"",type:"p5.Vector",optional:!0}],static:1},{params:[{name:"v0",description:"",type:"p5.Vector"},{name:"arr",description:"",type:"Number[]"},{name:"target",description:"",type:"p5.Vector",optional:!0}],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:"The number to divide with the x component of the vector
\n",type:"Number"},{name:"y",description:"The number to divide with the y component of the vector
\n",type:"Number"},{name:"z",description:"The number to divide with the z component of the vector
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"arr",description:"The array to divide the components of the vector by
\n",type:"Number[]"}],chainable:1},{params:[{name:"v",description:"The 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:!0}],static:1},{params:[{name:"v",description:"",type:"p5.Vector"},{name:"n",description:"",type:"Number"},{name:"target",description:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],static:1},{params:[{name:"v0",description:"",type:"p5.Vector"},{name:"v1",description:"",type:"p5.Vector"},{name:"target",description:"",type:"p5.Vector",optional:!0}],static:1},{params:[{name:"v0",description:"",type:"p5.Vector"},{name:"arr",description:"",type:"Number[]"},{name:"target",description:"",type:"p5.Vector",optional:!0}],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"},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:!0},{name:"z",description:"z component of the vector
\n",type:"Number",optional:!0}]},{params:[{name:"value",description:'value component of the vector or 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}]},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:'the first p5.Vector
\n',type:"p5.Vector"},{name:"v2",description:'the second p5.Vector
\n',type:"p5.Vector"}],static:1}]},dist:{name:"dist",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"v",description:'the 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"},limit:{name:"limit",params:[{name:"max",description:"the maximum magnitude for the vector
\n",type:"Number"}],class:"p5.Vector",module:"Math"},setMag:{name:"setMag",params:[{name:"len",description:"the new length for this vector
\n",type:"Number"}],class:"p5.Vector",module:"Math"},heading:{name:"heading",class:"p5.Vector",module:"Math"},rotate:{name:"rotate",params:[{name:"angle",description:"the angle of rotation
\n",type:"Number"}],class:"p5.Vector",module:"Math"},angleBetween:{name:"angleBetween",params:[{name:"value",description:'the x, y, and z components of a p5.Vector
\n',type:"p5.Vector"}],class:"p5.Vector",module:"Math"},lerp:{name:"lerp",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component
\n",type:"Number"},{name:"y",description:"the y component
\n",type:"Number"},{name:"z",description:"the z component
\n",type:"Number"},{name:"amt",description:"the amount of interpolation; some value between 0.0\n (old vector) and 1.0 (new vector). 0.9 is very near\n the new vector. 0.5 is halfway in between.
\n",type:"Number"}],chainable:1},{params:[{name:"v",description:'the p5.Vector to lerp to
\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 (Optional)
\n",type:"p5.Vector",optional:!0}],static:1}]},reflect:{name:"reflect",params:[{name:"surfaceNormal",description:'the p5.Vector to reflect about, will be normalized by this method
\n',type:"p5.Vector"}],class:"p5.Vector",module:"Math"},array:{name:"array",class:"p5.Vector",module:"Math"},equals:{name:"equals",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component of the vector
\n",type:"Number",optional:!0},{name:"y",description:"the y component of the vector
\n",type:"Number",optional:!0},{name:"z",description:"the z component of the vector
\n",type:"Number",optional:!0}]},{params:[{name:"value",description:"the vector to compare
\n",type:"p5.Vector|Array"}]}]},fromAngle:{name:"fromAngle",params:[{name:"angle",description:'the desired angle, in radians (unaffected by angleMode)
\n',type:"Number"},{name:"length",description:"the length of the new vector (defaults to 1)
\n",type:"Number",optional:!0}],class:"p5.Vector",module:"Math"},fromAngles:{name:"fromAngles",params:[{name:"theta",description:"the polar angle, in radians (zero is up)
\n",type:"Number"},{name:"phi",description:"the azimuthal angle, in radians\n (zero is out of the screen)
\n",type:"Number"},{name:"length",description:"the length of the new vector (defaults to 1)
\n",type:"Number",optional:!0}],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:"line",description:"a line of text
\n",type:"String"},{name:"x",description:"x-position
\n",type:"Number"},{name:"y",description:"y-position
\n",type:"Number"},{name:"fontSize",description:"font size to use (optional) Default is 12.
\n",type:"Number",optional:!0},{name:"options",description:"opentype options (optional)\n opentype fonts contains alignment and baseline options.\n Default is 'LEFT' and 'alphabetic'
\n",type:"Object",optional:!0}],class:"p5.Font",module:"Typography"},textToPoints:{name:"textToPoints",params:[{name:"txt",description:"a line of text
\n",type:"String"},{name:"x",description:"x-position
\n",type:"Number"},{name:"y",description:"y-position
\n",type:"Number"},{name:"fontSize",description:"font size to use (optional)
\n",type:"Number"},{name:"options",description:"an (optional) object that can contain:
\n
sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise
simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear
amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n',type:"Number"}],class:"p5.Camera",module:"Lights, Camera"},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:"Lights, Camera"},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:"Lights, Camera"},camera:{name:"camera",class:"p5.Camera",module:"Lights, Camera"},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:"Lights, Camera"},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:"Lights, Camera"}},"p5.Geometry":{computeFaces:{name:"computeFaces",class:"p5.Geometry",module:"Lights, Camera"},computeNormals:{name:"computeNormals",class:"p5.Geometry",module:"Lights, Camera"},averageNormals:{name:"averageNormals",class:"p5.Geometry",module:"Lights, Camera"},averagePoleNormals:{name:"averagePoleNormals",class:"p5.Geometry",module:"Lights, Camera"},normalize:{name:"normalize",class:"p5.Geometry",module:"Lights, Camera"}},"p5.Shader":{setUniform:{name:"setUniform",params:[{name:"uniformName",description:"the name of the uniform in the\nshader program
\n",type:"String"},{name:"data",description:"the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)
\n",type:"Object|Number|Boolean|Number[]"}],class:"p5.Shader",module:"Lights, Camera"}},"p5.sound":{getMasterVolume:{name:"getMasterVolume",class:"p5.sound",module:"p5.sound"},masterVolume:{name:"masterVolume",params:[{name:"volume",description:"Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n",type:"Number|Object"},{name:"rampTime",description:"Fade for t seconds
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"Schedule this event to happen at\n t seconds in the future
\n",type:"Number",optional:!0}],class:"p5.sound",module:"p5.sound"},soundOut:{name:"soundOut",class:"p5.sound",module:"p5.sound"}},"p5.Effect":{amp:{name:"amp",params:[{name:"vol",description:"amplitude between 0 and 1.0
\n",type:"Number",optional:!0},{name:"rampTime",description:"create a fade that lasts until rampTime
\n",type:"Number",optional:!0},{name:"tFromNow",description:"schedule this event to happen in tFromNow seconds
\n",type:"Number",optional:!0}],class:"p5.Effect",module:"p5.sound"},chain:{name:"chain",params:[{name:"arguments",description:"Chain together multiple sound objects
\n",type:"Object",optional:!0}],class:"p5.Effect",module:"p5.sound"},drywet:{name:"drywet",params:[{name:"fade",description:"The desired drywet value (0 - 1.0)
\n",type:"Number",optional:!0}],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:!0},{name:"res",description:"Resonance/Width of the filter frequency\n from 0.001 to 1000
\n",type:"Number",optional:!0}],class:"p5.Filter",module:"p5.sound"},set:{name:"set",params:[{name:"freq",description:"Frequency in Hz, from 10 to 22050
\n",type:"Number",optional:!0},{name:"res",description:"Resonance (Q) from 0.001 to 1000
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],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:!0}],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:!0}],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.Oscillator":{start:{name:"start",params:[{name:"time",description:"startTime in seconds from now.
\n",type:"Number",optional:!0},{name:"frequency",description:"frequency in Hz.
\n",type:"Number",optional:!0}],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:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],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:!0},{name:"timeFromNow",description:"Schedule this event to happen\n at x seconds from now
\n",type:"Number",optional:!0}],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"},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"},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.MonoSynth":{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:!0},{name:"secondsFromNow",description:"time from now (in seconds) at which to play
\n",type:"Number",optional:!0},{name:"sustainTime",description:"time to sustain before releasing the envelope. Defaults to 0.15 seconds.
\n",type:"Number",optional:!0}],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:!0},{name:"secondsFromNow",description:"time from now (in seconds) at which to play
\n",type:"Number",optional:!0}],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:!0},{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:!0}],class:"p5.MonoSynth",module:"p5.sound"},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"},amp:{name:"amp",params:[{name:"vol",description:"desired volume
\n",type:"Number"},{name:"rampTime",description:"Time to reach new volume
\n",type:"Number",optional:!0}],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.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.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:!0},{name:"velocity",description:"velocity of the note to play (ranging from 0 to 1)
\n",type:"Number",optional:!0},{name:"secondsFromNow",description:"time from now (in seconds) at which to play
\n",type:"Number",optional:!0},{name:"sustainTime",description:"time to sustain before releasing the envelope
\n",type:"Number",optional:!0}],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:!0},{name:"attackTime",description:"Time (in seconds before envelope\n reaches Attack Level
\n",type:"Number",optional:!0},{name:"decayTime",description:"Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n",type:"Number",optional:!0},{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:!0}],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:!0},{name:"decayTime",description:"Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n",type:"Number",optional:!0},{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:!0}],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:!0},{name:"velocity",description:"velocity of the note to play (ranging from 0 to 1)/
\n",type:"Number",optional:!0},{name:"secondsFromNow",description:"time from now (in seconds)
\n",type:"Number",optional:!0}],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:!0},{name:"secondsFromNow",description:"time to trigger the release
\n",type:"Number",optional:!0}],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"}},"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:!0},{name:"rate",description:"(optional) playback rate
\n",type:"Number",optional:!0},{name:"amp",description:"(optional) amplitude (volume)\n of playback
\n",type:"Number",optional:!0},{name:"cueStart",description:"(optional) cue start time in seconds
\n",type:"Number",optional:!0},{name:"duration",description:"(optional) duration of playback in seconds
\n",type:"Number",optional:!0}],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:!0}],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:!0},{name:"rate",description:"(optional) playback rate
\n",type:"Number",optional:!0},{name:"amp",description:"(optional) playback volume
\n",type:"Number",optional:!0},{name:"cueLoopStart",description:"(optional) startTime in seconds
\n",type:"Number",optional:!0},{name:"duration",description:"(optional) loop duration in seconds
\n",type:"Number",optional:!0}],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:!0}],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:!0},{name:"timeFromNow",description:"Schedule this event to happen at\n t seconds in the future
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},pan:{name:"pan",params:[{name:"panValue",description:"Set the stereo panner
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],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:!0}],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:!0}],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:!0}],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"},processPeaks:{name:"processPeaks",params:[{name:"callback",description:"a function to call once this data is returned
\n",type:"Function"},{name:"initThreshold",description:"initial threshold defaults to 0.9
\n",type:"Number",optional:!0},{name:"minThreshold",description:"minimum threshold defaults to 0.22
\n",type:"Number",optional:!0},{name:"minPeaks",description:"minimum number of peaks defaults to 200
\n",type:"Number",optional:!0}],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:!0}],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:!0}],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 master output)
\n",type:"SoundObject|undefined",optional:!0},{name:"smoothing",description:"a range between 0.0 and 1.0\n to smooth amplitude readings
\n",type:"Number|undefined",optional:!0}],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:!0}],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:!0}],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:!0}],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:!0},{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:!0}],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:!0},{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:!0}],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:!0}],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.Signal":{fade:{name:"fade",params:[{name:"value",description:"Value to set this signal
\n",type:"Number"},{name:"secondsFromNow",description:"Length of fade, in seconds from now
\n",type:"Number",optional:!0}],class:"p5.Signal",module:"p5.sound"},setInput:{name:"setInput",params:[{name:"input",description:"",type:"Object"}],class:"p5.Signal",module:"p5.sound"},add:{name:"add",params:[{name:"number",description:"",type:"Number"}],class:"p5.Signal",module:"p5.sound"},mult:{name:"mult",params:[{name:"number",description:"to multiply
\n",type:"Number"}],class:"p5.Signal",module:"p5.sound"},scale:{name:"scale",params:[{name:"number",description:"to multiply
\n",type:"Number"},{name:"inMin",description:"input range minumum
\n",type:"Number"},{name:"inMax",description:"input range maximum
\n",type:"Number"},{name:"outMin",description:"input range minumum
\n",type:"Number"},{name:"outMax",description:"input range maximum
\n",type:"Number"}],class:"p5.Signal",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:!0},{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:!0}],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:!0,multiple:!0}],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:!0},{name:"sustainTime",description:"time to sustain before releasing the envelope
\n",type:"Number",optional:!0}],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 (optional)
\n",type:"Number",optional:!0}],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.Pulse":{width:{name:"width",params:[{name:"width",description:"Width between the pulses (0 to 1.0,\n defaults to 0)
\n",type:"Number",optional:!0}],class:"p5.Pulse",module:"p5.sound"}},"p5.Noise":{setType:{name:"setType",params:[{name:"type",description:"'white', 'pink' or 'brown'
\n",type:"String",optional:!0}],class:"p5.Noise",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:!0},{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:!0}],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:!0}],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:!0}],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:!0}],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:!0},{name:"errorCallback",description:"This optional callback receives the error\n message as its argument.
\n",type:"Function",optional:!0}],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.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:!0},{name:"rolloffFactor",description:"",type:"Number",optional:!0}],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:!0},{name:"feedback",description:"sends the delay back through itself\n in a loop that decreases in volume\n each time.
\n",type:"Number",optional:!0},{name:"lowPass",description:"Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.
\n",type:"Number",optional:!0}],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:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],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:!0},{name:"decayRate",description:"Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n",type:"Number",optional:!0},{name:"reverse",description:"Play the reverb backwards or forwards.
\n",type:"Boolean",optional:!0}],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:!0},{name:"decayRate",description:"Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n",type:"Number",optional:!0},{name:"reverse",description:"Play the reverb backwards or forwards.
\n",type:"Boolean",optional:!0}],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:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],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"},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"},impulses:{name:"impulses",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:!0}],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:!0}],class:"p5.Part",module:"p5.sound"},loop:{name:"loop",params:[{name:"time",description:"seconds from now
\n",type:"Number",optional:!0}],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:!0}],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":{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:!0}],class:"p5.SoundLoop",module:"p5.sound"},stop:{name:"stop",params:[{name:"timeFromNow",description:"schedule a stopping time
\n",type:"Number",optional:!0}],class:"p5.SoundLoop",module:"p5.sound"},pause:{name:"pause",params:[{name:"timeFromNow",description:"schedule a pausing time
\n",type:"Number",optional:!0}],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:!0}],class:"p5.SoundLoop",module:"p5.sound"},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"}},"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:!0},{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:!0},{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:!0},{name:"threshold",description:"The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n",type:"Number",optional:!0},{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:!0}],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:!0},{name:"time",description:"Assign time value to schedule the change in value
\n",type:"Number",optional:!0}],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:!0},{name:"time",description:"Assign time value to schedule the change in value
\n",type:"Number",optional:!0}],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:!0},{name:"time",description:"Assign time value to schedule the change in value
\n",type:"Number",optional:!0}],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:!0}],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:!0}],class:"p5.Compressor",module:"p5.sound"},reduction:{name:"reduction",class:"p5.Compressor",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:!0}],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:!0},{name:"callback",description:"The name of a function that will be\n called once the recording completes
\n",type:"Function",optional:!0}],class:"p5.SoundRecorder",module:"p5.sound"},stop:{name:"stop",class:"p5.SoundRecorder",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:!0}],class:"p5.PeakDetect",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:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.Gain",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:!0,optdefault:"0.25"},{name:"oversample",description:"'none', '2x', or '4x'.
\n",type:"String",optional:!0,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:!0,optdefault:"0.25"},{name:"oversample",description:"'none', '2x', or '4x'.
\n",type:"String",optional:!0,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"}}}},{}],2:[function(e,t,r){"use strict";r.byteLength=function(e){var t=c(e),r=t[0],n=t[1];return 3*(r+n)/4-n},r.toByteArray=function(e){var t,r,n=c(e),a=n[0],o=n[1],i=new u(function(e,t){return 3*(e+t)/4-t}(a,o)),s=0,l=0>8&255,g[v++]=h,g[v++]=0),g[v++]=44,g[v++]=255&e,g[v++]=e>>8&255,g[v++]=255&t,g[v++]=t>>8&255,g[v++]=255&r,g[v++]=r>>8&255,g[v++]=255&n,g[v++]=n>>8&255,g[v++]=!0===i?128|p-1:0,!0===i)for(var m=0,f=s.length;m >7,a=1<<1+(7&r);x[e++],x[e++];var o=null,i=null;n&&(o=e,e+=3*(i=a));var s=!0,l=[],p=0,u=null,c=0,d=null;for(this.width=S,this.height=t;s&&e"),"0"!==o[0]){a.print("
"),a.print(""),a.print("");for(var u=0;u ")}for(var d=0;d