The web is much more than just canvas and p5.dom makes it easy to interact * with other HTML5 objects, including text, hyperlink, image, input, video, @@ -375,7 +375,7 @@ * @param {Number} min minimum value of the slider * @param {Number} max maximum value of the slider * @param {Number} [value] default value of the slider - * @param {Number} [step] step size for each tick of the slider + * @param {Number} [step] step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value) * @return {Object/p5.Element} pointer to p5.Element holding created node * @example *
@@ -412,7 +412,11 @@
elt.type = 'range';
elt.min = min;
elt.max = max;
- if (step) elt.step = step;
+ if (step === 0) {
+ elt.step = .000000000000000001; // smallest valid step
+ } else if (step) {
+ elt.step = step;
+ }
if (typeof(value) === "number") elt.value = value;
return addElement(elt, this);
};
@@ -1832,6 +1836,10 @@
p5.MediaElement.prototype.copy = function(){
p5.Renderer2D.prototype.copy.apply(this, arguments);
};
+ p5.MediaElement.prototype.mask = function(){
+ this.loadPixels();
+ p5.Image.prototype.mask.apply(this, arguments);
+ };
/**
* Schedule an event to be called when the audio or video
* element reaches the end. If the element is looping,
diff --git a/public/mode_assets/p5/empty_project/libraries/p5.js b/public/mode_assets/p5/empty_project/libraries/p5.js
index e6c7b08..c90badc 100644
--- a/public/mode_assets/p5/empty_project/libraries/p5.js
+++ b/public/mode_assets/p5/empty_project/libraries/p5.js
@@ -1,4 +1,4 @@
-/*! p5.js v0.5.3 August 17, 2016 */
+/*! p5.js v0.5.4 October 01, 2016 */
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.p5 = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o
*
@@ -6109,6 +6134,17 @@ p5.prototype.brightness = function(c) {
* rect(55, 10, 45, 80); // Draw right rect
*
*
* arc(50, 50, 80, 80, 0, PI);
*
* var x = 10;
- * println("The value of x is " + x);
+ * print("The value of x is " + x);
* // prints "The value of x is 10"
*
* createCanvas(displayWidth, displayHeight);
*
* createCanvas(displayWidth, displayHeight);
*
* createCanvas(windowWidth, windowHeight);
*
* createCanvas(windowWidth, windowHeight);
*
+ *
* var x = 0;
*
* function setup() {
@@ -13778,6 +14219,11 @@ p5.prototype.popStyle = function() {
* redraw(5);
* }
*
+ *
+ * @alt
+ * black line on far left of canvas
+ * black line on far left of canvas
+ *
*/
p5.prototype.redraw = function () {
this.resetMatrix();
@@ -13856,6 +14302,10 @@ var constants = _dereq_('./constants');
* // Example in the works.
*
* | ' + e); - pWriter.println(' | '); + pWriter.print('' + e); + pWriter.print(' | '); } - pWriter.println('
| ' + htmlEntry); - pWriter.println(' | '); + pWriter.print('' + htmlEntry); + pWriter.print(' | '); } - pWriter.println('
* function setup() {
* var v = createVector(20,30);
- * println(String(v)); // prints "p5.Vector Object : [20, 30, 0]"
+ * print(String(v)); // prints "p5.Vector Object : [20, 30, 0]"
* }
*
* var v1 = createVector(1, 2, 3);
* var v2 = v1.copy();
- * println(v1.x == v2.x && v1.y == v2.y && v1.z == v2.z);
+ * print(v1.x == v2.x && v1.y == v2.y && v1.z == v2.z);
* // Prints "true"
*
*
@@ -24217,7 +25276,7 @@ p5.Vector.prototype.div = function (n) {
*
* var v = createVector(20.0, 30.0, 40.0);
* var m = v.mag();
- * println(m); // Prints "53.85164807134504"
+ * print(m); // Prints "53.85164807134504"
*
*
*/
@@ -24238,7 +25297,7 @@ p5.Vector.prototype.mag = function () {
*
* // Static method
* var v1 = createVector(6, 4, 2);
- * println(v1.magSq()); // Prints "56"
+ * print(v1.magSq()); // Prints "56"
*
*
*/
@@ -24265,7 +25324,7 @@ p5.Vector.prototype.magSq = function () {
* var v1 = createVector(1, 2, 3);
* var v2 = createVector(2, 3, 4);
*
- * println(v1.dot(v2)); // Prints "20"
+ * print(v1.dot(v2)); // Prints "20"
*
*
*
@@ -24437,13 +25496,13 @@ p5.Vector.prototype.setMag = function (n) {
*
* function setup() {
* var v1 = createVector(30,50);
- * println(v1.heading()); // 1.0303768265243125
+ * print(v1.heading()); // 1.0303768265243125
*
* var v1 = createVector(40,50);
- * println(v1.heading()); // 0.8960553845713439
+ * print(v1.heading()); // 0.8960553845713439
*
* var v1 = createVector(30,70);
- * println(v1.heading()); // 1.1659045405098132
+ * print(v1.heading()); // 1.1659045405098132
* }
*
* function setup() {
* var v = createVector(20,30);
- * println(v.array()); // Prints : Array [20, 30, 0]
+ * print(v.array()); // Prints : Array [20, 30, 0]
* }
*
* var v = createVector(10.0, 20.0, 30.0);
* var f = v.array();
- * println(f[0]); // Prints "10.0"
- * println(f[1]); // Prints "20.0"
- * println(f[2]); // Prints "30.0"
+ * print(f[0]); // Prints "10.0"
+ * print(f[1]); // Prints "20.0"
+ * print(f[2]); // Prints "30.0"
*
*
@@ -24996,6 +26055,10 @@ var lcg = (function() {
* }
*
*
* var rad = PI/4;
* var deg = degrees(rad);
- * println(rad + " radians is " + deg + " degrees");
+ * print(rad + " radians is " + deg + " degrees");
* // Prints: 0.7853981633974483 radians is 45 degrees
*
*
@@ -25461,7 +26547,7 @@ p5.prototype.degrees = function(angle) {
*
* var deg = 45.0;
* var rad = radians(deg);
- * println(deg + " degrees is " + rad + " radians");
+ * print(deg + " degrees is " + rad + " radians");
* // Prints: 45 degrees is 0.7853981633974483 radians
*
*
@@ -25495,6 +26581,10 @@ p5.prototype.radians = function(angle) {
*
*
*
+ * @alt
+ * 40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.
+ *
+ *
*/
p5.prototype.angleMode = function(mode) {
if (mode === constants.DEGREES || mode === constants.RADIANS) {
@@ -25550,6 +26640,10 @@ var p5 = _dereq_('../core/core');
* text("IJKL", 50, 70);
*
*
+ *
+ * @alt
+ *Letters ABCD displayed at top right, EFGH at center and IJKL at bottom left.
+ *
*/
p5.prototype.textAlign = function(horizAlign, vertAlign) {
return this._renderer.textAlign.apply(this._renderer, arguments);
@@ -25579,6 +26673,10 @@ p5.prototype.textAlign = function(horizAlign, vertAlign) {
* text(lines, 70, 25);
*
*
+ *
+ * @alt
+ *set L1 L2 & L3 displayed vertically 3 times. spacing increases for each set
+ *
*/
p5.prototype.textLeading = function(theLeading) {
return this._renderer.textLeading.apply(this._renderer, arguments);
@@ -25602,6 +26700,10 @@ p5.prototype.textLeading = function(theLeading) {
* text("Font Size 16", 10, 90);
*
*
+ *
+ * @alt
+ *Font Size 12 displayed small, Font Size 14 medium & Font Size 16 large
+ *
*/
p5.prototype.textSize = function(theSize) {
return this._renderer.textSize.apply(this._renderer, arguments);
@@ -25629,6 +26731,10 @@ p5.prototype.textSize = function(theSize) {
* text("Font Style Bold", 10, 90);
*
*
+ *
+ * @alt
+ *words Font Style Normal displayed normally, Italic in italic and bold in bold
+ *
*/
p5.prototype.textStyle = function(theStyle) {
return this._renderer.textStyle.apply(this._renderer, arguments);
@@ -25656,8 +26762,15 @@ p5.prototype.textStyle = function(theStyle) {
* line(sWidth, 50, sWidth, 100);
*
*
+ *
+ * @alt
+ *Letter P and p5.js are displayed with vertical lines at end. P is wide
+ *
*/
p5.prototype.textWidth = function(theText) {
+ if (theText.length === 0) {
+ return 0;
+ }
return this._renderer.textWidth.apply(this._renderer, arguments);
};
@@ -25787,6 +26900,11 @@ _dereq_('../core/error_helpers');
* text(s, 10, 10, 70, 80); // Text wraps within text box
*
*
+ *
+ * @alt
+ *'word' displayed 3 times going from black, blue to translucent blue
+ * The quick brown fox jumped over the lazy dog.
+ *
*/
p5.prototype.text = function(str, x, y, maxWidth, maxHeight) {
var args = new Array(arguments.length);
@@ -25811,7 +26929,8 @@ p5.prototype.text = function(str, x, y, maxWidth, maxHeight) {
*
* @method textFont
* @param {Object|String} f a font loaded via loadFont(), or a String
- * representing a browser-based default font.
+ * representing a web safe font (a font
+ * that is generally available across all systems).
* @return {Object} this
* @example
*
* function setup() {
* var myArray = new Array("A", "B", "C");
- * println(myArray); // ["A","B","C"]
+ * print(myArray); // ["A","B","C"]
*
* reverse(myArray);
- * println(myArray); // ["C","B","A"]
+ * print(myArray); // ["C","B","A"]
* }
*
* function setup() {
* var myArray = new Array("A", "B", "C");
- * println(myArray); // ["A","B","C"]
+ * print(myArray); // ["A","B","C"]
*
* var newArray = shorten(myArray);
- * println(myArray); // ["A","B","C"]
- * println(newArray); // ["A","B"]
+ * print(myArray); // ["A","B","C"]
+ * print(newArray); // ["A","B"]
* }
*
* function setup() {
* var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
- * println(regularArr);
+ * print(regularArr);
* shuffle(regularArr, true); // force modifications to passed array
- * println(regularArr);
+ * print(regularArr);
*
* // By default shuffle() returns a shuffled cloned array:
* var newArr = shuffle(regularArr);
- * println(regularArr);
- * println(newArr);
+ * print(regularArr);
+ * print(newArr);
* }
*
* function setup() {
* var words = new Array("banana", "apple", "pear","lime");
- * println(words); // ["banana", "apple", "pear", "lime"]
+ * print(words); // ["banana", "apple", "pear", "lime"]
* var count = 4; // length of array
*
* words = sort(words, count);
- * println(words); // ["apple", "banana", "lime", "pear"]
+ * print(words); // ["apple", "banana", "lime", "pear"]
* }
*
* function setup() {
* var numbers = new Array(2,6,1,5,14,9,8,12);
- * println(numbers); // [2,6,1,5,14,9,8,12]
+ * print(numbers); // [2,6,1,5,14,9,8,12]
* var count = 5; // Less than the length of the array
*
* numbers = sort(numbers, count);
- * println(numbers); // [1,2,5,6,14,9,8,12]
+ * print(numbers); // [1,2,5,6,14,9,8,12]
* }
*
* function setup() {
* var myArray = new Array(1,2,3,4,5);
- * println(myArray); // [1,2,3,4,5]
+ * print(myArray); // [1,2,3,4,5]
*
* var sub1 = subset(myArray, 0, 3);
* var sub2 = subset(myArray, 2, 2);
- * println(sub1); // [1,2,3]
- * println(sub2); // [3,4]
+ * print(sub1); // [1,2,3]
+ * print(sub2); // [3,4]
* }
*
- * println(int("10")); // 10
- * println(int(10.31)); // 10
- * println(int(-10)); // -10
- * println(int(true)); // 1
- * println(int(false)); // 0
- * println(int([false, true, "10.3", 9.8])); // [0, 1, 10, 9]
+ * 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]
*
- * println(str("10")); // "10"
- * println(str(10.31)); // "10.31"
- * println(str(-10)); // "-10"
- * println(str(true)); // "true"
- * println(str(false)); // "false"
- * println(str([true, "10.3", 9.8])); // [ "true", "10.3", "9.8" ]
+ * 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" ]
*
- * println(boolean(0)); // false
- * println(boolean(1)); // true
- * println(boolean("true")); // true
- * println(boolean("abcd")); // false
- * println(boolean([0, 12, "true"])); // [false, true, false]
+ * print(boolean(0)); // false
+ * print(boolean(1)); // true
+ * print(boolean("true")); // true
+ * print(boolean("abcd")); // false
+ * print(boolean([0, 12, "true"])); // [false, true, false]
*
- * println(byte(127)); // 127
- * println(byte(128)); // -128
- * println(byte(23.4)); // 23
- * println(byte("23.4")); // 23
- * println(byte(true)); // 1
- * println(byte([0, 255, "100"])); // [0, -1, 100]
+ * print(byte(127)); // 127
+ * print(byte(128)); // -128
+ * print(byte(23.4)); // 23
+ * print(byte("23.4")); // 23
+ * print(byte(true)); // 1
+ * print(byte([0, 255, "100"])); // [0, -1, 100]
*
- * println(char(65)); // "A"
- * println(char("65")); // "A"
- * println(char([65, 66, 67])); // [ "A", "B", "C" ]
- * println(join(char([65, 66, 67]), '')); // "ABC"
+ * print(char(65)); // "A"
+ * print(char("65")); // "A"
+ * print(char([65, 66, 67])); // [ "A", "B", "C" ]
+ * print(join(char([65, 66, 67]), '')); // "ABC"
*
- * println(unchar("A")); // 65
- * println(unchar(["A", "B", "C"])); // [ 65, 66, 67 ]
- * println(unchar(split("ABC", ""))); // [ 65, 66, 67 ]
+ * print(unchar("A")); // 65
+ * print(unchar(["A", "B", "C"])); // [ 65, 66, 67 ]
+ * print(unchar(split("ABC", ""))); // [ 65, 66, 67 ]
*
- * println(hex(255)); // "000000FF"
- * println(hex(255, 6)); // "0000FF"
- * println(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
+ * print(hex(255)); // "000000FF"
+ * print(hex(255, 6)); // "0000FF"
+ * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
*
- * println(unhex("A")); // 10
- * println(unhex("FF")); // 255
- * println(unhex(["FF", "AA", "00"])); // [ 255, 170, 0 ]
+ * print(unhex("A")); // 10
+ * print(unhex("FF")); // 255
+ * print(unhex(["FF", "AA", "00"])); // [ 255, 170, 0 ]
*
- * // draw an ellipsoid with radius 200, 300 and 400 .
+ * // draw an ellipsoid with radius 20, 30 and 40.
* function setup(){
* createCanvas(100, 100, WEBGL);
* }
*
* function draw(){
* background(200);
- * ellipsoid(200,300,400);
+ * ellipsoid(20, 30, 40);
* }
*
* .limiter),
* and Gain Nodes for .input and .output.
- *
- * @property p5.soundOut
+ *
+ * @property soundOut
* @type {Object}
*/
- p5.soundOut = p5sound;
+ p5.prototype.soundOut = p5.soundOut = p5sound;
/**
* a silent connection to the DesinationNode
* which will ensure that anything connected to it
* will not be garbage collected
- *
+ *
* @private
*/
p5.soundOut._silentNode = p5sound.audiocontext.createGain();
@@ -763,9 +763,12 @@ soundfile = function () {
* about what went wrong.
* @param {Function} [whileLoadingCallback] Name of a function to call while file
* is loading. That function will
- * receive percentage loaded
- * (between 0 and 1) as a
- * parameter.
+ * 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.
*
* @return {Object} p5.SoundFile Object
* @example
@@ -976,8 +979,8 @@ soundfile = function () {
// TO DO: use this method to create a loading bar that shows progress during file upload/decode.
p5.SoundFile.prototype._updateProgress = function (evt) {
if (evt.lengthComputable) {
- var percentComplete = Math.log(evt.loaded / evt.total * 9.9);
- this._whileLoading(percentComplete);
+ var percentComplete = evt.loaded / evt.total * 0.99;
+ this._whileLoading(percentComplete, evt);
} else {
// Unable to compute progress information since the total size is unknown
this._whileLoading('size unknown');
@@ -1026,6 +1029,9 @@ soundfile = function () {
this.bufferSourceNode.stop(time);
this._counterNode.stop(time);
}
+ // set playback rate
+ if (rate)
+ this.playbackRate = rate;
// make a new source and counter. They are automatically assigned playbackRate and buffer
this.bufferSourceNode = this._initSourceNode();
// garbage collect counterNode and create a new one
@@ -1061,10 +1067,6 @@ soundfile = function () {
// this.bufferSourceNode.gain.connect(this.output);
this.bufferSourceNode.connect(this.output);
this.output.gain.value = a;
- // not necessary with _initBufferSource ?
- // this.bufferSourceNode.playbackRate.cancelScheduledValues(now);
- rate = rate || Math.abs(this.playbackRate);
- this.bufferSourceNode.playbackRate.setValueAtTime(rate, now);
// if it was paused, play at the pause position
if (this._paused) {
this.bufferSourceNode.start(time, this.pauseTime, duration);
@@ -1187,6 +1189,7 @@ soundfile = function () {
* soundFile.play();
* background(0, 255, 0);
* }
+ * }
*
*
*/
@@ -1418,7 +1421,7 @@ soundfile = function () {
* @method rate
* @param {Number} [playbackRate] Set the playback rate. 1.0 is normal,
* .5 is half-speed, 2.0 is twice as fast.
- * Must be greater than zero.
+ * Values less than zero play backwards.
* @example
*
* var song;
@@ -1525,7 +1528,7 @@ soundfile = function () {
*
* @method jump
* @param {Number} cueTime cueTime of the soundFile in seconds.
- * @param {Number} uuration duration in seconds.
+ * @param {Number} duration duration in seconds.
*/
p5.SoundFile.prototype.jump = function (cueTime, duration) {
if (cueTime < 0 || cueTime > this.buffer.duration) {
@@ -1737,8 +1740,8 @@ soundfile = function () {
*
* @method disconnect
*/
- p5.SoundFile.prototype.disconnect = function (unit) {
- this.panner.disconnect(unit);
+ p5.SoundFile.prototype.disconnect = function () {
+ this.panner.disconnect();
};
/**
*/
@@ -1819,7 +1822,7 @@ soundfile = function () {
var now = ac.currentTime;
var bufferSourceNode = ac.createBufferSource();
bufferSourceNode.buffer = self.buffer;
- bufferSourceNode.playbackRate.setValueAtTime(self.playbackRate, now);
+ bufferSourceNode.playbackRate.value = self.playbackRate;
return bufferSourceNode;
};
var _createCounterBuffer = function (buffer) {
@@ -4382,11 +4385,10 @@ oscillator = function () {
this.oscillator = p5sound.audiocontext.createOscillator();
this.f = freq || 440;
// frequency
- this.oscillator.frequency.setValueAtTime(this.f, p5sound.audiocontext.currentTime);
this.oscillator.type = type || 'sine';
+ this.oscillator.frequency.setValueAtTime(this.f, p5sound.audiocontext.currentTime);
var o = this.oscillator;
// connections
- this.input = p5sound.audiocontext.createGain();
this.output = p5sound.audiocontext.createGain();
this._freqMods = [];
// modulators connected to this oscillator's frequency
@@ -4421,6 +4423,11 @@ oscillator = function () {
if (!this.started) {
var freq = f || this.f;
var type = this.oscillator.type;
+ // set old osc free to be garbage collected (memory)
+ if (this.oscillator) {
+ this.oscillator.disconnect();
+ this.oscillator = undefined;
+ }
// var detune = this.oscillator.frequency.value;
this.oscillator = p5sound.audiocontext.createOscillator();
this.oscillator.frequency.exponentialRampToValueAtTime(Math.abs(freq), p5sound.audiocontext.currentTime);
@@ -4616,7 +4623,6 @@ oscillator = function () {
var now = p5sound.audiocontext.currentTime;
this.stop(now);
this.disconnect();
- this.oscillator.disconnect();
this.panner = null;
this.oscillator = null;
}
@@ -5166,7 +5172,7 @@ env = function () {
* of an object, a series of fades referred to as Attack, Decay,
* Sustain and Release (
* ADSR
- * ). Envelopes can also control other Web Audio Parameters—for example, a p5.Env can
+ * ). Envelopes can also control other Web Audio Parameters—for example, a p5.Env can
* control an Oscillator's frequency like this: osc.freq(env).
* Use setRange to change the attack/release level.
* Use setADSR to change attackTime, decayTime, sustainPercent and releaseTime.
@@ -5174,7 +5180,7 @@ env = function () {
* the ramp method for a pingable trigger,
* or triggerAttack/
* triggerRelease to trigger noteOn/noteOff.
- *
+ *
* @class p5.Env
* @constructor
* @example
@@ -5288,14 +5294,49 @@ env = function () {
* decayLevel = sustainLevel)
* @param {Number} releaseTime Release Time (in seconds)
* @param {Number} releaseLevel Amplitude
+ * @example
+ *
+ * var t1 = 0.1; // attack time in seconds
+ * var l1 = 0.7; // attack level 0.0 to 1.0
+ * var t2 = 0.3; // decay time in seconds
+ * var l2 = 0.1; // decay level 0.0 to 1.0
+ * var t3 = 0.2; // sustain time in seconds
+ * var l3 = dL; // sustain level 0.0 to 1.0
+ * // release level defaults to zero
+ *
+ * var env;
+ * var triOsc;
+ *
+ * function setup() {
+ * background(0);
+ * noStroke();
+ * fill(255);
+ * textAlign(CENTER);
+ * text('click to play', width/2, height/2);
+ *
+ * env = new p5.Env(t1, l1, t2, l2, t3, l3);
+ * triOsc = new p5.Oscillator('triangle');
+ * triOsc.amp(env); // give the env control of the triOsc's amp
+ * triOsc.start();
+ * }
+ *
+ * // mouseClick triggers envelope if over canvas
+ * function mouseClicked() {
+ * // is mouse over canvas?
+ * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+ * env.play(triOsc);
+ * }
+ * }
+ *
+ *
*/
p5.Env.prototype.set = function (t1, l1, t2, l2, t3, l3) {
this.aTime = t1;
this.aLevel = l1;
this.dTime = t2 || 0;
this.dLevel = l2 || 0;
- this.rTime = t4 || 0;
- this.rLevel = l4 || 0;
+ this.rTime = t3 || 0;
+ this.rLevel = l3 || 0;
// set time constants for ramp
this._setRampAD(t1, t2);
};
@@ -5304,7 +5345,7 @@ env = function () {
*
* ADSR envelope
* .
- *
+ *
* @method setADSR
* @param {Number} attackTime Time (in seconds before envelope
* reaches Attack Level
@@ -5366,7 +5407,7 @@ env = function () {
};
/**
* Set max (attackLevel) and min (releaseLevel) of envelope.
- *
+ *
* @method setRange
* @param {Number} aLevel attack level (defaults to 1)
* @param {Number} rLevel release level (defaults to 0)
@@ -5448,7 +5489,7 @@ env = function () {
* If a p5.Sound object is given, then the p5.Env will control its
* output gain. If multiple inputs are provided, the env will
* control all of them.
- *
+ *
* @method setInput
* @param {Object} unit A p5.sound object or
* Web Audio Param.
@@ -5462,7 +5503,7 @@ env = function () {
* Set whether the envelope ramp is linear (default) or exponential.
* Exponential ramps can be useful because we perceive amplitude
* and frequency logarithmically.
- *
+ *
* @method setExp
* @param {Boolean} isExp true is exponential, false is linear
*/
@@ -5472,7 +5513,7 @@ env = function () {
//helper method to protect against zero values being sent to exponential functions
p5.Env.prototype.checkExpInput = function (value) {
if (value <= 0) {
- value = 0.0001;
+ value = 1e-8;
}
return value;
};
@@ -5551,46 +5592,46 @@ env = function () {
* @param {Number} secondsFromNow time from now (in seconds)
* @example
*
- *
+ *
* var attackLevel = 1.0;
* var releaseLevel = 0;
- *
+ *
* var attackTime = 0.001
* var decayTime = 0.3;
* var susPercent = 0.4;
* var releaseTime = 0.5;
- *
+ *
* var env, triOsc;
- *
+ *
* function setup() {
* var cnv = createCanvas(100, 100);
* background(200);
* textAlign(CENTER);
* text('click to play', width/2, height/2);
- *
+ *
* env = new p5.Env();
* env.setADSR(attackTime, decayTime, susPercent, releaseTime);
* env.setRange(attackLevel, releaseLevel);
- *
+ *
* triOsc = new p5.Oscillator('triangle');
* triOsc.amp(env);
* triOsc.start();
* triOsc.freq(220);
- *
+ *
* cnv.mousePressed(envAttack);
* }
- *
+ *
* function envAttack(){
* console.log('trigger attack');
* env.triggerAttack();
- *
+ *
* background(0,255,0);
* text('attack!', width/2, height/2);
* }
- *
+ *
* function mouseReleased() {
* env.triggerRelease();
- *
+ *
* background(200);
* text('click to play', width/2, height/2);
* }
@@ -5657,46 +5698,46 @@ env = function () {
* @param {Number} secondsFromNow time to trigger the release
* @example
*
- *
+ *
* var attackLevel = 1.0;
* var releaseLevel = 0;
- *
+ *
* var attackTime = 0.001
* var decayTime = 0.3;
* var susPercent = 0.4;
* var releaseTime = 0.5;
- *
+ *
* var env, triOsc;
- *
+ *
* function setup() {
* var cnv = createCanvas(100, 100);
* background(200);
* textAlign(CENTER);
* text('click to play', width/2, height/2);
- *
+ *
* env = new p5.Env();
* env.setADSR(attackTime, decayTime, susPercent, releaseTime);
* env.setRange(attackLevel, releaseLevel);
- *
+ *
* triOsc = new p5.Oscillator('triangle');
* triOsc.amp(env);
* triOsc.start();
* triOsc.freq(220);
- *
+ *
* cnv.mousePressed(envAttack);
* }
- *
+ *
* function envAttack(){
* console.log('trigger attack');
* env.triggerAttack();
- *
+ *
* background(0,255,0);
* text('attack!', width/2, height/2);
* }
- *
+ *
* function mouseReleased() {
* env.triggerRelease();
- *
+ *
* background(200);
* text('click to play', width/2, height/2);
* }
@@ -5707,10 +5748,10 @@ env = function () {
if (!this.wasTriggered) {
// this currently causes a bit of trouble:
// if a later release has been scheduled (via the play function)
- // a new earlier release won't interrupt it, because
+ // a new earlier release won't interrupt it, because
// this.wasTriggered has already been set to false.
- // If we want new earlier releases to override, then we need to
- // keep track of the last release time, and if the new release time is
+ // If we want new earlier releases to override, then we need to
+ // keep track of the last release time, and if the new release time is
// earlier, then use it.
return;
}
@@ -5762,38 +5803,38 @@ env = function () {
* @example
*
* var env, osc, amp, cnv;
- *
+ *
* var attackTime = 0.001;
* var decayTime = 0.2;
* var attackLevel = 1;
* var decayLevel = 0;
- *
+ *
* function setup() {
* cnv = createCanvas(100, 100);
* fill(0,255,0);
* noStroke();
- *
+ *
* env = new p5.Env();
* env.setADSR(attackTime, decayTime);
- *
+ *
* osc = new p5.Oscillator();
* osc.amp(env);
* osc.start();
- *
+ *
* amp = new p5.Amplitude();
- *
+ *
* cnv.mousePressed(triggerRamp);
* }
- *
+ *
* function triggerRamp() {
* env.ramp(osc, 0, attackLevel, decayLevel);
* }
- *
+ *
* function draw() {
* background(20,20,20);
* text('click me', 10, 20);
* var h = map(amp.getLevel(), 0, 0.4, 0, height);;
- *
+ *
* rect(0, height, width, -h);
* }
*
@@ -5855,7 +5896,7 @@ env = function () {
* Add a value to the p5.Oscillator's output amplitude,
* and return the oscillator. Calling this method
* again will override the initial add() with new values.
- *
+ *
* @method add
* @param {Number} number Constant number to add
* @return {p5.Env} Envelope Returns this envelope
@@ -5871,7 +5912,7 @@ env = function () {
* Multiply the p5.Env's output amplitude
* by a fixed value. Calling this method
* again will override the initial mult() with new values.
- *
+ *
* @method mult
* @param {Number} number Constant number to multiply
* @return {p5.Env} Envelope Returns this envelope
@@ -5887,7 +5928,7 @@ env = function () {
* Scale this envelope's amplitude values to a given
* range, and return the envelope. Calling this method
* again will override the initial scale() with new values.
- *
+ *
* @method scale
* @param {Number} inMin input range minumum
* @param {Number} inMax input range maximum
@@ -6109,11 +6150,19 @@ noise = function () {
* @return {Object} Noise Object
*/
p5.Noise = function (type) {
+ var assignType;
p5.Oscillator.call(this);
delete this.f;
delete this.freq;
delete this.oscillator;
- this.buffer = _whiteNoise;
+ if (type === 'brown') {
+ assignType = _brownNoise;
+ } else if (type === 'pink') {
+ assignType = _pinkNoise;
+ } else {
+ assignType = _whiteNoise;
+ }
+ this.buffer = assignType;
};
p5.Noise.prototype = Object.create(p5.Oscillator.prototype);
// generate noise buffers
@@ -6234,22 +6283,22 @@ noise = function () {
/**
* Set the amplitude of the noise between 0 and 1.0. Or,
* modulate amplitude with an audio signal such as an oscillator.
- *
+ *
* @param {Number|Object} volume amplitude between 0 and 1.0
* or modulating signal/oscillator
- * @param {Number} [rampTime] create a fade that lasts rampTime
+ * @param {Number} [rampTime] create a fade that lasts rampTime
* @param {Number} [timeFromNow] schedule this event to happen
* seconds from now
*/
/**
* Send output to a p5.sound or web audio object
- *
+ *
* @method connect
* @param {Object} unit
*/
/**
* Disconnect all output.
- *
+ *
* @method disconnect
*/
p5.Noise.prototype.dispose = function () {
@@ -6290,10 +6339,15 @@ audioin = function () {
* feedback.
*
* Note: This uses the getUserMedia/
- * Stream API, which is not supported by certain browsers.
+ * 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.
* @return {Object} AudioIn
* @example
*
@@ -6309,7 +6363,7 @@ audioin = function () {
* }
*
*/
- p5.AudioIn = function () {
+ p5.AudioIn = function (errorCallback) {
// set up audio input
this.input = p5sound.audiocontext.createGain();
this.output = p5sound.audiocontext.createGain();
@@ -6328,7 +6382,11 @@ audioin = function () {
this.output.connect(this.amplitude.input);
// Some browsers let developer determine their input sources
if (typeof window.MediaStreamTrack === 'undefined') {
- window.alert('This browser does not support MediaStreamTrack');
+ if (errorCallback) {
+ errorCallback();
+ } else {
+ window.alert('This browser does not support AudioIn');
+ }
} else if (typeof window.MediaStreamTrack.getSources === 'function') {
// Chrome supports getSources to list inputs. Dev picks default
window.MediaStreamTrack.getSources(this._gotSources);
@@ -6343,6 +6401,11 @@ audioin = function () {
* is not connected to p5.sound's output. So you won't hear
* anything unless you use the connect() method.
*
+ * Certain browsers limit access to the user's microphone. For example,
+ * Chrome only allows access from localhost and over https. For this reason,
+ * you may want to include an errorCallback—a function that is called in case
+ * the browser won't provide mic access.
+ *
* @method start
* @param {Function} successCallback Name of a function to call on
* success.
@@ -6353,6 +6416,7 @@ audioin = function () {
*/
p5.AudioIn.prototype.start = function (successCallback, errorCallback) {
var self = this;
+ // if stream was already started...
// if _gotSources() i.e. developers determine which source to use
if (p5sound.inputSources[self.currentSource]) {
// set the audio source
@@ -6397,13 +6461,15 @@ audioin = function () {
}
};
/**
- * Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().
+ * Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().
+ * If re-starting, the user may be prompted for permission access.
*
* @method stop
*/
p5.AudioIn.prototype.stop = function () {
if (this.stream) {
- this.stream.stop();
+ // assume only one track
+ this.stream.getTracks()[0].stop();
}
};
/**
@@ -6434,8 +6500,8 @@ audioin = function () {
*
* @method disconnect
*/
- p5.AudioIn.prototype.disconnect = function (unit) {
- this.output.disconnect(unit);
+ p5.AudioIn.prototype.disconnect = function () {
+ this.output.disconnect();
// stay connected to amplitude even if not outputting to p5
this.output.connect(this.amplitude.input);
};
@@ -7847,6 +7913,8 @@ metro = function () {
// for all of the active things on the metro:
for (var i in this.syncedParts) {
var thisPart = this.syncedParts[i];
+ if (!thisPart.isPlaying)
+ return;
thisPart.incrementStep(secondsFromNow);
// each synced source keeps track of its own beat number
for (var j in thisPart.phrases) {
@@ -7910,7 +7978,7 @@ looper = function () {
/**
* Set the global tempo, in beats per minute, for all
* p5.Parts. This method will impact all active p5.Parts.
- *
+ *
* @param {Number} BPM Beats Per Minute
* @param {Number} rampTime Seconds from now
*/
@@ -7923,12 +7991,12 @@ looper = function () {
/**
* 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
@@ -7936,7 +8004,7 @@ looper = function () {
* 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).
- *
+ *
* @class p5.Phrase
* @constructor
* @param {String} name Name so that you can access the Phrase.
@@ -7954,17 +8022,17 @@ looper = function () {
* var mySound, myPhrase, myPart;
* var pattern = [1,0,0,2,0,2,0,0];
* var msg = 'click to play';
- *
+ *
* function preload() {
* mySound = loadSound('assets/beatbox.mp3');
* }
- *
+ *
* function setup() {
* noStroke();
* fill(255);
* textAlign(CENTER);
* masterVolume(0.1);
- *
+ *
* myPhrase = new p5.Phrase('bbox', makeSound, pattern);
* myPart = new p5.Part();
* myPart.addPhrase(myPhrase);
@@ -7980,7 +8048,7 @@ looper = function () {
* mySound.rate(playbackRate);
* mySound.play(time);
* }
- *
+ *
* function mouseClicked() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* myPart.start();
@@ -8000,7 +8068,7 @@ looper = function () {
* function's requirements, these values may be numbers,
* strings, or an object with multiple parameters.
* Zero (0) indicates a rest.
- *
+ *
* @property sequence
* @type {Array}
*/
@@ -8011,7 +8079,7 @@ looper = function () {
* with steps and tatums. By default, each step represents 1/16th note.
*
* See p5.Phrase for more about musical timing.
- *
+ *
* @class p5.Part
* @constructor
* @param {Number} [steps] Steps in the part
@@ -8022,12 +8090,12 @@ looper = function () {
* var boxPat = [1,0,0,2,0,2,0,0];
* var drumPat = [0,1,1,0,2,0,1,0];
* var msg = 'click to play';
- *
+ *
* function preload() {
* box = loadSound('assets/beatbox.mp3');
* drum = loadSound('assets/drum.mp3');
* }
- *
+ *
* function setup() {
* noStroke();
* fill(255);
@@ -8052,12 +8120,12 @@ looper = function () {
* box.rate(playbackRate);
* box.play(time);
* }
- *
+ *
* function playDrum(time, playbackRate) {
* drum.rate(playbackRate);
* drum.play(time);
* }
- *
+ *
* function mouseClicked() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* myPart.start();
@@ -8071,12 +8139,8 @@ looper = function () {
// how many beats
this.partStep = 0;
this.phrases = [];
- this.looping = false;
this.isPlaying = false;
- // what does this looper do when it gets to the last step?
- this.onended = function () {
- this.stop();
- };
+ this.noLoop();
this.tatums = bLength || 0.0625;
// defaults to quarter note
this.metro = new p5.Metro();
@@ -8088,8 +8152,8 @@ looper = function () {
};
};
/**
- * Set the tempo of this part, in Beats Per Minute.
- *
+ * Set the tempo of this part, in Beats Per Minute.
+ *
* @method setBPM
* @param {Number} BPM Beats Per Minute
* @param {Number} [rampTime] Seconds from now
@@ -8099,9 +8163,9 @@ looper = function () {
};
/**
* Returns the Beats Per Minute of this currently part.
- *
+ *
* @method getBPM
- * @return {Number}
+ * @return {Number}
*/
p5.Part.prototype.getBPM = function () {
return this.metro.getBPM();
@@ -8110,7 +8174,7 @@ looper = function () {
* Start playback of this part. It will play
* through all of its phrases at a speed
* determined by setBPM.
- *
+ *
* @method start
* @param {Number} [time] seconds from now
*/
@@ -8126,7 +8190,7 @@ looper = function () {
* Loop playback of this part. It will begin
* looping through all of its phrases at a speed
* determined by setBPM.
- *
+ *
* @method loop
* @param {Number} [time] seconds from now
*/
@@ -8153,7 +8217,7 @@ looper = function () {
};
/**
* Stop the part and cue it to step 0.
- *
+ *
* @method stop
* @param {Number} [time] seconds from now
*/
@@ -8164,7 +8228,7 @@ looper = function () {
/**
* Pause the part. Playback will resume
* from the current step.
- *
+ *
* @method pause
* @param {Number} time seconds from now
*/
@@ -8197,21 +8261,21 @@ looper = function () {
/**
* Remove a phrase from this part, based on the name it was
* given when it was created.
- *
+ *
* @method removePhrase
* @param {String} phraseName
*/
p5.Part.prototype.removePhrase = function (name) {
for (var i in this.phrases) {
if (this.phrases[i].name === name) {
- this.phrases.split(i, 1);
+ this.phrases.splice(i, 1);
}
}
};
/**
* Get a phrase from this part, based on the name it was
* given when it was created. Now you can modify its array.
- *
+ *
* @method getPhrase
* @param {String} phraseName
*/
@@ -8225,7 +8289,7 @@ looper = function () {
/**
* Get a phrase from this part, based on the name it was
* given when it was created. Now you can modify its array.
- *
+ *
* @method replaceSequence
* @param {String} phraseName
* @param {Array} sequence Array of values to pass into the callback
@@ -8243,11 +8307,11 @@ looper = function () {
this.callback(time);
this.partStep += 1;
} else {
- if (this.looping) {
- this.callback(time);
+ if (!this.looping && this.partStep == this.length - 1) {
+ console.log('done');
+ // this.callback(time);
+ this.onended();
}
- this.onended();
- this.partStep = 0;
}
};
/**
@@ -8304,7 +8368,7 @@ looper = function () {
};
/**
* Start playback of the score.
- *
+ *
* @method start
*/
p5.Score.prototype.start = function () {
@@ -8313,7 +8377,7 @@ looper = function () {
};
/**
* Stop playback of the score.
- *
+ *
* @method stop
*/
p5.Score.prototype.stop = function () {
@@ -8323,7 +8387,7 @@ looper = function () {
};
/**
* Pause playback of the score.
- *
+ *
* @method pause
*/
p5.Score.prototype.pause = function () {
@@ -8331,7 +8395,7 @@ looper = function () {
};
/**
* Loop playback of the score.
- *
+ *
* @method loop
*/
p5.Score.prototype.loop = function () {
@@ -8342,7 +8406,7 @@ looper = function () {
* 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
*/
p5.Score.prototype.noLoop = function () {
@@ -8362,7 +8426,7 @@ looper = function () {
};
/**
* Set the tempo for all parts in the score
- *
+ *
* @param {Number} BPM Beats Per Minute
* @param {Number} rampTime Seconds from now
*/
@@ -8614,8 +8678,14 @@ soundRecorder = function () {
* @param {String} name name of the resulting .wav file.
*/
p5.prototype.saveSound = function (soundFile, name) {
- var leftChannel = soundFile.buffer.getChannelData(0);
- var rightChannel = soundFile.buffer.getChannelData(1);
+ var leftChannel, rightChannel;
+ leftChannel = soundFile.buffer.getChannelData(0);
+ // handle mono files
+ if (soundFile.buffer.numberOfChannels > 1) {
+ rightChannel = soundFile.buffer.getChannelData(1);
+ } else {
+ rightChannel = leftChannel;
+ }
var interleaved = interleave(leftChannel, rightChannel);
// create the buffer and view to create the .WAV file
var buffer = new ArrayBuffer(44 + interleaved.length * 2);
@@ -8624,7 +8694,7 @@ soundRecorder = function () {
// check spec at: https://ccrma.stanford.edu/courses/422/projects/WaveFormat/
// RIFF chunk descriptor
writeUTFBytes(view, 0, 'RIFF');
- view.setUint32(4, 44 + interleaved.length * 2, true);
+ view.setUint32(4, 36 + interleaved.length * 2, true);
writeUTFBytes(view, 8, 'WAVE');
// FMT sub-chunk
writeUTFBytes(view, 12, 'fmt ');
@@ -9025,10 +9095,150 @@ gain = function () {
this.input = undefined;
};
}(master, sndcore);
+var distortion;
+distortion = function () {
+ 'use strict';
+ var p5sound = master;
+ /*
+ * Adapted from [Kevin Ennis on StackOverflow](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion)
+ */
+ function makeDistortionCurve(amount) {
+ var k = typeof amount === 'number' ? amount : 50;
+ var n_samples = 44100;
+ var curve = new Float32Array(n_samples);
+ var deg = Math.PI / 180;
+ var i = 0;
+ var x;
+ for (; i < n_samples; ++i) {
+ x = i * 2 / n_samples - 1;
+ curve[i] = (3 + k) * x * 20 * deg / (Math.PI + k * Math.abs(x));
+ }
+ return curve;
+ }
+ /**
+ * A Distortion effect created with a Waveshaper Node,
+ * with an approach adapted from
+ * [Kevin Ennis](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion)
+ *
+ * @class p5.Distortion
+ * @constructor
+ * @param {Number} [amount=0.25] Unbounded distortion amount.
+ * Normal values range from 0-1.
+ * @param {String} [oversample='none'] 'none', '2x', or '4x'.
+ *
+ * @return {Object} Distortion object
+ */
+ p5.Distortion = function (amount, oversample) {
+ if (typeof amount === 'undefined') {
+ amount = 0.25;
+ }
+ if (typeof amount !== 'number') {
+ throw new Error('amount must be a number');
+ }
+ if (typeof oversample === 'undefined') {
+ oversample = '2x';
+ }
+ if (typeof oversample !== 'string') {
+ throw new Error('oversample must be a String');
+ }
+ var curveAmount = p5.prototype.map(amount, 0, 1, 0, 2000);
+ this.ac = p5sound.audiocontext;
+ this.input = this.ac.createGain();
+ this.output = this.ac.createGain();
+ /**
+ * The p5.Distortion is built with a
+ *
+ * Web Audio WaveShaper Node.
+ *
+ * @property WaveShaperNode
+ * @type {Object} AudioNode
+ */
+ this.waveShaperNode = this.ac.createWaveShaper();
+ this.amount = curveAmount;
+ this.waveShaperNode.curve = makeDistortionCurve(curveAmount);
+ this.waveShaperNode.oversample = oversample;
+ this.input.connect(this.waveShaperNode);
+ this.waveShaperNode.connect(this.output);
+ this.connect();
+ // add to the soundArray
+ p5sound.soundArray.push(this);
+ };
+ p5.Distortion.prototype.process = function (src, amount, oversample) {
+ src.connect(this.input);
+ this.set(amount, oversample);
+ };
+ /**
+ * Set the amount and oversample of the waveshaper distortion.
+ *
+ * @method setType
+ * @param {Number} [amount=0.25] Unbounded distortion amount.
+ * Normal values range from 0-1.
+ * @param {String} [oversample='none'] 'none', '2x', or '4x'.
+ * @param {String}
+ */
+ p5.Distortion.prototype.set = function (amount, oversample) {
+ if (amount) {
+ var curveAmount = p5.prototype.map(amount, 0, 1, 0, 2000);
+ this.amount = curveAmount;
+ this.waveShaperNode.curve = makeDistortionCurve(curveAmount);
+ }
+ if (oversample) {
+ this.waveShaperNode.oversample = oversample;
+ }
+ };
+ /**
+ * Return the distortion amount, typically between 0-1.
+ *
+ * @method getAmount
+ * @return {Number} Unbounded distortion amount.
+ * Normal values range from 0-1.
+ */
+ p5.Distortion.prototype.getAmount = function () {
+ return this.amount;
+ };
+ /**
+ * Return the oversampling.
+ *
+ * @return {String} Oversample can either be 'none', '2x', or '4x'.
+ */
+ p5.Distortion.prototype.getOversample = function () {
+ return this.waveShaperNode.oversample;
+ };
+ /**
+ * Send output to a p5.sound or web audio object
+ *
+ * @method connect
+ * @param {Object} unit
+ */
+ p5.Distortion.prototype.connect = function (unit) {
+ var u = unit || p5.soundOut.input;
+ this.output.connect(u);
+ };
+ /**
+ * Disconnect all output.
+ *
+ * @method disconnect
+ */
+ p5.Distortion.prototype.disconnect = function () {
+ this.output.disconnect();
+ };
+ p5.Distortion.prototype.dispose = function () {
+ var index = p5sound.soundArray.indexOf(this);
+ p5sound.soundArray.splice(index, 1);
+ this.input.disconnect();
+ this.waveShaperNode.disconnect();
+ this.input = null;
+ this.waveShaperNode = null;
+ if (typeof this.output !== 'undefined') {
+ this.output.disconnect();
+ this.output = null;
+ }
+ };
+}(master);
var src_app;
src_app = function () {
'use strict';
var p5SOUND = sndcore;
return p5SOUND;
-}(sndcore, master, helpers, errorHandler, panner, soundfile, amplitude, fft, signal, oscillator, env, pulse, noise, audioin, filter, delay, reverb, metro, looper, soundRecorder, peakdetect, gain);
+}(sndcore, master, helpers, errorHandler, panner, soundfile, amplitude, fft, signal, oscillator, env, pulse, noise, audioin, filter, delay, reverb, metro, looper, soundRecorder, peakdetect, gain, distortion);
}));
\ No newline at end of file
diff --git a/public/mode_assets/p5/examples/3D/02_multiple_lights.js b/public/mode_assets/p5/examples/3D/02_multiple_lights.js
index 2634a31..c16def3 100644
--- a/public/mode_assets/p5/examples/3D/02_multiple_lights.js
+++ b/public/mode_assets/p5/examples/3D/02_multiple_lights.js
@@ -28,4 +28,4 @@ function draw(){
translate(250, 0, 0);
ambientMaterial(250);
sphere(120, 64);
-}
+}
\ No newline at end of file
diff --git a/public/mode_assets/p5/examples/3D/03_materials.js b/public/mode_assets/p5/examples/3D/03_materials.js
index 41aa066..bf3e1e4 100644
--- a/public/mode_assets/p5/examples/3D/03_materials.js
+++ b/public/mode_assets/p5/examples/3D/03_materials.js
@@ -19,7 +19,6 @@ function draw(){
ambientLight(100, 80, 80);
pointLight(200, 200, 200, locX, locY, 0);
- translate(-200, -250, 0);
push();
rotateZ(frameCount * 0.02);
rotateX(frameCount * 0.02);
@@ -27,6 +26,15 @@ function draw(){
texture(img);
box(80);
pop();
+
+ translate(-200, -250, 0);
+ push();
+ rotateZ(frameCount * 0.02);
+ rotateX(frameCount * 0.02);
+ rotateY(frameCount * 0.02);
+ basicMaterial(250, 0, 0);
+ torus(80, 20, 64, 64);
+ pop();
translate(400, 0, 0);
push();
diff --git a/public/mode_assets/p5/examples/Data/03_Variable_Scope.js b/public/mode_assets/p5/examples/Data/03_Variable_Scope.js
index e2d437d..078bd34 100644
--- a/public/mode_assets/p5/examples/Data/03_Variable_Scope.js
+++ b/public/mode_assets/p5/examples/Data/03_Variable_Scope.js
@@ -1,12 +1,12 @@
/*
* @name Variable Scope
- * @description Variables have a global or local "scope". For example,
- * variables declared within either the setup() or draw() functions may be
- * only used in these functions. Global variables, variables declared outside
- * of setup() and draw(), may be used anywhere within the program. If a local
- * variable is declared with the same name as a global variable, the program
- * will use the local variable to make its calculations within the current
- * scope. Variables are localized within each block, the space between a {
+ * @description Variables have a global or local "scope". For example,
+ * variables declared within either the setup() or draw() functions may be
+ * only used in these functions. Global variables, variables declared outside
+ * of setup() and draw(), may be used anywhere within the program. If a local
+ * variable is declared with the same name as a global variable, the program
+ * will use the local variable to make its calculations within the current
+ * scope. Variables are localized within each block, the space between a {
* and }.
*/
var a = 80; // Create a global variable "a"
@@ -21,21 +21,21 @@ function setup() {
function draw() {
// Draw a line using the global variable "a"
line(a, 0, a, height);
-
- // Create a new variable "a" local to the for() statement
+
+ // Create a new variable "a" local to the for() statement
for (var a = 120; a < 200; a += 3) {
line(a, 0, a, height);
}
-
+
// Create a new variable "a" local to the draw() function
var a = 300;
// Draw a line using the new local variable "a"
- line(a, 0, a, height);
-
+ line(a, 0, a, height);
+
// Make a call to the custom function drawAnotherLine()
drawAnotherLine();
-
- // Make a call to the custom function setYetAnotherLine()
+
+ // Make a call to the custom function drawYetAnotherLine()
drawYetAnotherLine();
}
@@ -47,8 +47,8 @@ function drawAnotherLine() {
}
function drawYetAnotherLine() {
- // Because no new local variable "a" is set,
- // this lines draws using the original global
+ // Because no new local variable "a" is set,
+ // this line draws using the original global
// variable "a" which is set to the value 20.
line(a+3, 0, a+3, height);
-}
\ No newline at end of file
+}
diff --git a/public/mode_assets/p5/examples/Hello/01_shapes.js b/public/mode_assets/p5/examples/Hello/01_shapes.js
new file mode 100644
index 0000000..bef8c0f
--- /dev/null
+++ b/public/mode_assets/p5/examples/Hello/01_shapes.js
@@ -0,0 +1,28 @@
+/*
+ * @name Simple Shapes
+ * @description This examples includes a circle, square, triangle, and a flower.
+ */
+function setup() {
+ // Create the canvas
+ createCanvas(720, 400);
+ background(200);
+
+ // Set colors
+ fill(204, 101, 192, 127);
+ stroke(127, 63, 120);
+
+ // A rectangle
+ rect(40, 120, 120, 40);
+ // An ellipse
+ ellipse(240, 240, 80, 80);
+ // A triangle
+ triangle(300, 100, 320, 100, 310, 80);
+
+ // A design for a simple flower
+ translate(580, 200);
+ noStroke();
+ for (var i = 0; i < 10; i ++) {
+ ellipse(0, 30, 20, 80);
+ rotate(PI/5);
+ }
+}
diff --git a/public/mode_assets/p5/examples/Hello/02_interactivity.js b/public/mode_assets/p5/examples/Hello/02_interactivity.js
new file mode 100644
index 0000000..055351d
--- /dev/null
+++ b/public/mode_assets/p5/examples/Hello/02_interactivity.js
@@ -0,0 +1,40 @@
+/*
+ * @name Interactivity 1
+ * @frame 720,425
+ * @description The circle changes color when you click on it.
+ * To run this example locally, you will need the
+ * p5.dom library.
+ *
+ */
+
+// for red, green, and blue color values
+var r, g, b;
+
+function setup() {
+ createCanvas(720, 400);
+ // Pick colors randomly
+ r = random(255);
+ g = random(255);
+ b = random(255);
+}
+
+function draw() {
+ background(127);
+ // Draw a circle
+ strokeWeight(2);
+ stroke(r, g, b);
+ fill(r, g, b, 127);
+ ellipse(360, 200, 200, 200);
+}
+
+// When the user clicks the mouse
+function mousePressed() {
+ // Check if mouse is inside the circle
+ var d = dist(mouseX, mouseY, 360, 200);
+ if (d < 100) {
+ // Pick new random color values
+ r = random(255);
+ g = random(255);
+ b = random(255);
+ }
+}
diff --git a/public/mode_assets/p5/examples/Hello/03_interactivity.js b/public/mode_assets/p5/examples/Hello/03_interactivity.js
new file mode 100644
index 0000000..3caed04
--- /dev/null
+++ b/public/mode_assets/p5/examples/Hello/03_interactivity.js
@@ -0,0 +1,29 @@
+/*
+ * @name Interactivity 2
+ * @frame 720,425
+ * @description The circle changes color when you move the slider.
+ * You will need to include the
+ * p5.dom library
+ * for this example to work in your own project.
+ */
+
+// A HTML range slider
+var slider;
+
+function setup() {
+ createCanvas(720, 400);
+ // hue, saturation, and brightness
+ colorMode(HSB, 255);
+ // slider has a range between 0 and 255 with a starting value of 127
+ slider = createSlider(0, 255, 127);
+}
+
+function draw() {
+ background(127);
+ strokeWeight(2);
+
+ // Set the hue according to the slider
+ stroke(slider.value(), 255, 255);
+ fill(slider.value(), 255, 255, 127);
+ ellipse(360, 200, 200, 200);
+}
\ No newline at end of file
diff --git a/public/mode_assets/p5/examples/Hello/04_animate.js b/public/mode_assets/p5/examples/Hello/04_animate.js
new file mode 100644
index 0000000..3512f4d
--- /dev/null
+++ b/public/mode_assets/p5/examples/Hello/04_animate.js
@@ -0,0 +1,33 @@
+/*
+ * @name Animation
+ * @description The circle moves.
+ */
+// Where is the circle
+var x, y;
+
+function setup() {
+ createCanvas(720, 400);
+ // Starts in the middle
+ x = width / 2;
+ y = height;
+}
+
+function draw() {
+ background(200);
+
+ // Draw a circle
+ stroke(50);
+ fill(100);
+ ellipse(x, y, 24, 24);
+
+ // Jiggling randomly on the horizontal axis
+ x = x + random(-1, 1);
+ // Moving up at a constant speed
+ y = y - 1;
+
+ // Reset to the bottom
+ if (y < 0) {
+ y = height;
+ }
+}
+
diff --git a/public/mode_assets/p5/examples/Hello/04_flocking.js b/public/mode_assets/p5/examples/Hello/04_flocking.js
new file mode 100644
index 0000000..80f00ed
--- /dev/null
+++ b/public/mode_assets/p5/examples/Hello/04_flocking.js
@@ -0,0 +1,183 @@
+/*
+ * @name Flocking
+ * @description Demonstration of Craig Reynolds' "Flocking" behavior.
+ * (Rules: Cohesion, Separation, Alignment.)
+ * From natureofcode.com.
+ */
+var boids = [];
+
+function setup() {
+ createCanvas(720, 400);
+
+ // Add an initial set of boids into the system
+ for (var i = 0; i < 100; i++) {
+ boids[i] = new Boid(random(width), random(height));
+ }
+}
+
+function draw() {
+ background(51);
+ // Run all the boids
+ for (var i = 0; i < boids.length; i++) {
+ boids[i].run(boids);
+ }
+}
+
+
+// Boid class
+// Methods for Separation, Cohesion, Alignment added
+function Boid(x, y) {
+ this.acceleration = createVector(0, 0);
+ this.velocity = p5.Vector.random2D();
+ this.position = createVector(x, y);
+ this.r = 3.0;
+ this.maxspeed = 3; // Maximum speed
+ this.maxforce = 0.05; // Maximum steering force
+}
+
+Boid.prototype.run = function(boids) {
+ this.flock(boids);
+ this.update();
+ this.borders();
+ this.render();
+}
+
+// Forces go into acceleration
+Boid.prototype.applyForce = function(force) {
+ this.acceleration.add(force);
+}
+
+// We accumulate a new acceleration each time based on three rules
+Boid.prototype.flock = function(boids) {
+ var sep = this.separate(boids); // Separation
+ var ali = this.align(boids); // Alignment
+ var coh = this.cohesion(boids); // Cohesion
+ // Arbitrarily weight these forces
+ sep.mult(2.5);
+ ali.mult(1.0);
+ coh.mult(1.0);
+ // Add the force vectors to acceleration
+ this.applyForce(sep);
+ this.applyForce(ali);
+ this.applyForce(coh);
+}
+
+// Method to update location
+Boid.prototype.update = function() {
+ // Update velocity
+ this.velocity.add(this.acceleration);
+ // Limit speed
+ this.velocity.limit(this.maxspeed);
+ this.position.add(this.velocity);
+ // Reset acceleration to 0 each cycle
+ this.acceleration.mult(0);
+}
+
+// A method that calculates and applies a steering force towards a target
+// STEER = DESIRED MINUS VELOCITY
+Boid.prototype.seek = function(target) {
+ var desired = p5.Vector.sub(target, this.position); // A vector pointing from the location to the target
+ // Normalize desired and scale to maximum speed
+ desired.normalize();
+ desired.mult(this.maxspeed);
+ // Steering = Desired minus Velocity
+ var steer = p5.Vector.sub(desired, this.velocity);
+ steer.limit(this.maxforce); // Limit to maximum steering force
+ return steer;
+}
+
+// Draw boid as a circle
+Boid.prototype.render = function() {
+ fill(127, 127);
+ stroke(200);
+ ellipse(this.position.x, this.position.y, 16, 16);
+}
+
+// Wraparound
+Boid.prototype.borders = function() {
+ if (this.position.x < -this.r) this.position.x = width + this.r;
+ if (this.position.y < -this.r) this.position.y = height + this.r;
+ if (this.position.x > width + this.r) this.position.x = -this.r;
+ if (this.position.y > height + this.r) this.position.y = -this.r;
+}
+
+// Separation
+// Method checks for nearby boids and steers away
+Boid.prototype.separate = function(boids) {
+ var desiredseparation = 25.0;
+ var steer = createVector(0, 0);
+ var count = 0;
+ // For every boid in the system, check if it's too close
+ for (var i = 0; i < boids.length; i++) {
+ var d = p5.Vector.dist(this.position, boids[i].position);
+ // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
+ if ((d > 0) && (d < desiredseparation)) {
+ // Calculate vector pointing away from neighbor
+ var diff = p5.Vector.sub(this.position, boids[i].position);
+ diff.normalize();
+ diff.div(d); // Weight by distance
+ steer.add(diff);
+ count++; // Keep track of how many
+ }
+ }
+ // Average -- divide by how many
+ if (count > 0) {
+ steer.div(count);
+ }
+
+ // As long as the vector is greater than 0
+ if (steer.mag() > 0) {
+ // Implement Reynolds: Steering = Desired - Velocity
+ steer.normalize();
+ steer.mult(this.maxspeed);
+ steer.sub(this.velocity);
+ steer.limit(this.maxforce);
+ }
+ return steer;
+}
+
+// Alignment
+// For every nearby boid in the system, calculate the average velocity
+Boid.prototype.align = function(boids) {
+ var neighbordist = 50;
+ var sum = createVector(0, 0);
+ var count = 0;
+ for (var i = 0; i < boids.length; i++) {
+ var d = p5.Vector.dist(this.position, boids[i].position);
+ if ((d > 0) && (d < neighbordist)) {
+ sum.add(boids[i].velocity);
+ count++;
+ }
+ }
+ if (count > 0) {
+ sum.div(count);
+ sum.normalize();
+ sum.mult(this.maxspeed);
+ var steer = p5.Vector.sub(sum, this.velocity);
+ steer.limit(this.maxforce);
+ return steer;
+ } else {
+ return createVector(0, 0);
+ }
+}
+
+// Cohesion
+// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
+Boid.prototype.cohesion = function(boids) {
+ var neighbordist = 50;
+ var sum = createVector(0, 0); // Start with empty vector to accumulate all locations
+ var count = 0;
+ for (var i = 0; i < boids.length; i++) {
+ var d = p5.Vector.dist(this.position, boids[i].position);
+ if ((d > 0) && (d < neighbordist)) {
+ sum.add(boids[i].position); // Add location
+ count++;
+ }
+ }
+ if (count > 0) {
+ sum.div(count);
+ return this.seek(sum); // Steer towards the location
+ } else {
+ return createVector(0, 0);
+ }
+}
diff --git a/public/mode_assets/p5/examples/Hello/05_weather.js b/public/mode_assets/p5/examples/Hello/05_weather.js
new file mode 100644
index 0000000..94bd952
--- /dev/null
+++ b/public/mode_assets/p5/examples/Hello/05_weather.js
@@ -0,0 +1,75 @@
+/*
+ * @name Weather
+ * @frame 720,280
+ * @description This example grabs JSON weather data from apixu.com.
+ * You will need to include the
+ * p5.dom library
+ * for this example to work in your own project.
+*/
+
+// A wind direction vector
+var wind;
+// Circle position
+var position;
+
+function setup() {
+ createCanvas(720, 200);
+ // Request the data from apixu.com
+ var url = 'https://api.apixu.com/v1/current.json?key=513d8003c8b348f1a2461629162106&q=NYC';
+ loadJSON(url, gotWeather);
+ // Circle starts in the middle
+ position = createVector(width/2, height/2);
+ // wind starts as (0,0)
+ wind = createVector();
+}
+
+function draw() {
+ background(200);
+
+ // This section draws an arrow pointing in the direction of wind
+ push();
+ translate(32, height - 32);
+ // Rotate by the wind's angle
+ rotate(wind.heading() + PI/2);
+ noStroke();
+ fill(255);
+ ellipse(0, 0, 48, 48);
+
+ stroke(45, 123, 182);
+ strokeWeight(3);
+ line(0, -16, 0, 16);
+
+ noStroke();
+ fill(45, 123, 182);
+ triangle(0, -18, -6, -10, 6, -10);
+ pop();
+
+ // Move in the wind's direction
+ position.add(wind);
+
+ stroke(0);
+ fill(51);
+ ellipse(position.x, position.y, 16, 16);
+
+ if (position.x > width) position.x = 0;
+ if (position.x < 0) position.x = width;
+ if (position.y > height) position.y = 0;
+ if (position.y < 0) position.y = height;
+
+
+}
+
+function gotWeather(weather) {
+
+ // Get the angle (convert to radians)
+ var angle = radians(Number(weather.current.wind_degree));
+ // Get the wind speed
+ var windmag = Number(weather.current.wind_mph);
+
+ // Display as HTML elements
+ var temperatureDiv = createDiv(floor(weather.current.temp_f) + '°');
+ var windDiv = createDiv("WIND " + windmag + " MPH");
+
+ // Make a vector
+ wind = p5.Vector.fromAngle(angle);
+}
diff --git a/public/mode_assets/p5/examples/Hello/06_drawing.js b/public/mode_assets/p5/examples/Hello/06_drawing.js
new file mode 100644
index 0000000..290518c
--- /dev/null
+++ b/public/mode_assets/p5/examples/Hello/06_drawing.js
@@ -0,0 +1,129 @@
+/*
+* @name Drawing
+* @description Generative painting program.
+*/
+
+// All the paths
+var paths = [];
+// Are we painting?
+var painting = false;
+// How long until the next circle
+var next = 0;
+// Where are we now and where were we?
+var current;
+var previous;
+
+function setup() {
+ createCanvas(720, 400);
+ current = createVector(0,0);
+ previous = createVector(0,0);
+};
+
+function draw() {
+ background(200);
+
+ // If it's time for a new point
+ if (millis() > next && painting) {
+
+ // Grab mouse position
+ current.x = mouseX;
+ current.y = mouseY;
+
+ // New particle's force is based on mouse movement
+ var force = p5.Vector.sub(current, previous);
+ force.mult(0.05);
+
+ // Add new particle
+ paths[paths.length - 1].add(current, force);
+
+ // Schedule next circle
+ next = millis() + random(100);
+
+ // Store mouse values
+ previous.x = current.x;
+ previous.y = current.y;
+ }
+
+ // Draw all paths
+ for( var i = 0; i < paths.length; i++) {
+ paths[i].update();
+ paths[i].display();
+ }
+}
+
+// Start it up
+function mousePressed() {
+ next = 0;
+ painting = true;
+ previous.x = mouseX;
+ previous.y = mouseY;
+ paths.push(new Path());
+}
+
+// Stop
+function mouseReleased() {
+ painting = false;
+}
+
+// A Path is a list of particles
+function Path() {
+ this.particles = [];
+ this.hue = random(100);
+}
+
+Path.prototype.add = function(position, force) {
+ // Add a new particle with a position, force, and hue
+ this.particles.push(new Particle(position, force, this.hue));
+}
+
+// Display plath
+Path.prototype.update = function() {
+ for (var i = 0; i < this.particles.length; i++) {
+ this.particles[i].update();
+ }
+}
+
+// Display plath
+Path.prototype.display = function() {
+
+ // Loop through backwards
+ for (var i = this.particles.length - 1; i >= 0; i--) {
+ // If we shold remove it
+ if (this.particles[i].lifespan <= 0) {
+ this.particles.splice(i, 1);
+ // Otherwise, display it
+ } else {
+ this.particles[i].display(this.particles[i+1]);
+ }
+ }
+
+}
+
+// Particles along the path
+function Particle(position, force, hue) {
+ this.position = createVector(position.x, position.y);
+ this.velocity = createVector(force.x, force.y);
+ this.drag = 0.95;
+ this.lifespan = 255;
+}
+
+Particle.prototype.update = function() {
+ // Move it
+ this.position.add(this.velocity);
+ // Slow it down
+ this.velocity.mult(this.drag);
+ // Fade it out
+ this.lifespan--;
+}
+
+// Draw particle and connect it with a line
+// Draw a line to another
+Particle.prototype.display = function(other) {
+ stroke(0, this.lifespan);
+ fill(0, this.lifespan/2);
+ ellipse(this.position.x,this.position.y, 8, 8);
+ // If we need to draw a line
+ if (other) {
+ line(this.position.x, this.position.y, other.position.x, other.position.y);
+ }
+}
\ No newline at end of file
diff --git a/public/mode_assets/p5/examples/Hello/07_song.js b/public/mode_assets/p5/examples/Hello/07_song.js
new file mode 100644
index 0000000..6cd2c3f
--- /dev/null
+++ b/public/mode_assets/p5/examples/Hello/07_song.js
@@ -0,0 +1,117 @@
+/*
+ * @name Song
+ * @frame 720, 430
+ * @description Play a song.
+ * You will need to include the
+ * p5.sound
+ * library for this example to work in your own project.
+ */
+// The midi notes of a scale
+var notes = [ 60, 62, 64, 65, 67, 69, 71];
+
+// For automatically playing the song
+var index = 0;
+var song = [
+ { note: 4, duration: 400, display: "D" },
+ { note: 0, duration: 200, display: "G" },
+ { note: 1, duration: 200, display: "A" },
+ { note: 2, duration: 200, display: "B" },
+ { note: 3, duration: 200, display: "C" },
+ { note: 4, duration: 400, display: "D" },
+ { note: 0, duration: 400, display: "G" },
+ { note: 0, duration: 400, display: "G" }
+];
+var trigger = 0;
+var autoplay = false;
+var osc;
+
+function setup() {
+ createCanvas(720, 400);
+ var div = createDiv("Click to play notes or ")
+ div.id("instructions");
+ var button = createA("#","play song automatically.");
+ button.parent("instructions");
+ // Trigger automatically playing
+ button.mousePressed(function() {
+ if (!autoplay) {
+ index = 0;
+ autoplay = true;
+ }
+ });
+
+ // A triangle oscillator
+ osc = new p5.TriOsc();
+ // Start silent
+ osc.start();
+ osc.amp(0);
+}
+
+// A function to play a note
+function playNote(note, duration) {
+ osc.freq(midiToFreq(note));
+ // Fade it in
+ osc.fade(0.5,0.2);
+
+ // If we sest a duration, fade it out
+ if (duration) {
+ setTimeout(function() {
+ osc.fade(0,0.2);
+ }, duration-50);
+ }
+}
+
+function draw() {
+
+ // If we are autoplaying and it's time for the next note
+ if (autoplay && millis() > trigger){
+ playNote(notes[song[index].note], song[index].duration);
+ trigger = millis() + song[index].duration;
+ // Move to the next note
+ index ++;
+ // We're at the end, stop autoplaying.
+ } else if (index >= song.length) {
+ autoplay = false;
+ }
+
+
+ // Draw a keyboard
+
+ // The width for each key
+ var w = width / notes.length;
+ for (var i = 0; i < notes.length; i++) {
+ var x = i * w;
+ // If the mouse is over the key
+ if (mouseX > x && mouseX < x + w && mouseY < height) {
+ // If we're clicking
+ if (mouseIsPressed) {
+ fill(100,255,200);
+ // Or just rolling over
+ } else {
+ fill(127);
+ }
+ } else {
+ fill(200);
+ }
+
+ // Or if we're playing the song, let's highlight it too
+ if (autoplay && i === song[index-1].note) {
+ fill(100,255,200);
+ }
+
+ // Draw the key
+ rect(x, 0, w-1, height-1);
+ }
+
+}
+
+// When we click
+function mousePressed() {
+ // Map mouse to the key index
+ var key = floor(map(mouseX, 0, width, 0, notes.length));
+ playNote(notes[key]);
+}
+
+// Fade it out when we release
+function mouseReleased() {
+ osc.fade(0,0.5);
+}
diff --git a/public/mode_assets/p5/examples/Image/01_Background_Image.js b/public/mode_assets/p5/examples/Image/01_Background_Image.js
index 24661e3..a6e503e 100644
--- a/public/mode_assets/p5/examples/Image/01_Background_Image.js
+++ b/public/mode_assets/p5/examples/Image/01_Background_Image.js
@@ -1,7 +1,7 @@
/*
* @name Background Image
* @description This example presents the fastest way to load a
- * background image into Processing. To load an image as the background,
+ * background image. To load an image as the background,
* it must be the same width and height as the program.
* 
