Skip to content

Commit e81b1db

Browse files
spiricomspiricom
committed
Merge branch 'newTone' of https://github.com/processing/p5.js-sound into newTone
Conflicts: src/env.js
2 parents 8a3938b + 4b1d109 commit e81b1db

File tree

24 files changed

+2059
-664
lines changed

24 files changed

+2059
-664
lines changed

‎Gruntfile.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ module.exports = function(grunt) {
7070
include: ['src/app'],
7171
onBuildWrite: function( name, path, contents ) {
7272
if (path.indexOf('node_modules/tone/') > -1) {
73-
return '/** Tone.js module by Yotam Mann, MIT License 2014 http://opensource.org/licenses/MIT **/\n' +
73+
return '/** Tone.js module by Yotam Mann, MIT License 2016 http://opensource.org/licenses/MIT **/\n' +
7474
require('amdclean').clean({
7575
'code': contents.replace(/console.log(.*);/g, ''),
7676
'escodegen': {
@@ -103,6 +103,7 @@ module.exports = function(grunt) {
103103
out: 'lib/p5.sound.js',
104104
paths: {
105105
'Tone' : 'node_modules/tone/Tone',
106+
'automation-timeline': 'node_modules/web-audio-automation-timeline/build/automation-timeline-amd',
106107
'panner' : 'src/panner',
107108
'sndcore': 'src/sndcore',
108109
'master': 'src/master',

‎examples/envExp/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<head>
2+
<script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>
3+
4+
<script language="javascript" type="text/javascript" src="../../lib/addons/p5.dom.js"></script>
5+
6+
<script language="javascript" type="text/javascript" src="../../lib/p5.sound.js"></script>
7+
8+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
9+
10+
</head>

‎examples/envExp/sketch.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/**
2+
* @name Note Envelope
3+
* @description <p>An Envelope is a series of fades, defined
4+
* as time / value pairs. In this example, the envelope
5+
* will be used to "play" a note by controlling the output
6+
* amplitude of an oscillator.<br/><br/>
7+
* The p5.Oscillator sends its output through
8+
* an internal Web Audio GainNode (p5.Oscillator.output).
9+
* By default, that node has a constant value of 0.5. It can
10+
* be reset with the osc.amp() method. Or, in this example, an
11+
* Envelope takes control of that node, turning the amplitude
12+
* up and down like a volume knob.</p>
13+
* <p><em><span class="small"> To run this example locally, you will need the
14+
* <a href="http://p5js.org/reference/#/libraries/p5.sound">p5.sound library</a> and a
15+
* sound file.</span></em></p>
16+
*/
17+
var osc, envelope, fft;
18+
var myPhraseAttack, myPhraseRelease, myPart;
19+
var atPattern = [1, 0];
20+
var relPattern = [0, 1];
21+
var scaleArray = [60, 62, 64, 65, 67, 69, 71, 72];
22+
var note = 0;
23+
var expOrNot = 1;
24+
var startPoint = 0;
25+
var endPoint = 0;
26+
var numWaveforms = 50;
27+
28+
var audioContext;
29+
30+
function setup() {
31+
createCanvas(710, 200);
32+
osc = new p5.SinOsc();
33+
34+
audioContext = getAudioContext();
35+
36+
// Instantiate the envelope with time / value pairs
37+
envelope = new p5.Env(0.1, 0.5, 0.01, 0.0, 0.0, 0.0, 0.0, 0.0);
38+
osc.amp(0.);
39+
osc.start();
40+
myPhraseAttack = new p5.Phrase('testerAttack', makeSoundAttack, atPattern);
41+
myPhraseRelease = new p5.Phrase('testerRelease', makeSoundRelease, relPattern);
42+
myPart = new p5.Part();
43+
myPart.addPhrase(myPhraseAttack);
44+
//myPart.addPhrase(myPhraseRelease);
45+
myPart.setBPM(120);
46+
myPart.loop();
47+
myPart.start();
48+
fft = new p5.FFT();
49+
fft.setInput(osc);
50+
masterVolume(0);
51+
endPoint = width / numWaveforms;
52+
noStroke();
53+
background(20);
54+
}
55+
56+
function draw() {
57+
58+
var waveform = fft.waveform(); // analyze the waveform
59+
beginShape();
60+
strokeWeight(5);
61+
for (var i = 0; i < waveform.length; i++){
62+
var x = map(i, 0, waveform.length, startPoint, endPoint);
63+
var y = map(waveform[i], -1, 1, height, 0);
64+
vertex(x, y);
65+
}
66+
endShape();
67+
startPoint = endPoint + 1;
68+
endPoint += (width / numWaveforms);
69+
if (endPoint > width)
70+
{
71+
background(20);
72+
startPoint = 0;
73+
endPoint = (width / numWaveforms);
74+
}
75+
76+
77+
}
78+
79+
80+
function makeSoundAttack(time, playbackRate)
81+
{
82+
var midiValue = scaleArray[note];
83+
var freqValue = midiToFreq(midiValue);
84+
85+
if (note == 0)
86+
{
87+
// if (expOrNot == 0)
88+
// {
89+
// envelope.setExp(true);
90+
// expOrNot = 1;
91+
// }
92+
// else
93+
// {
94+
// envelope.setExp(false);
95+
// expOrNot = 0;
96+
// }
97+
}
98+
99+
osc.freq(freqValue * 2, 0, time);
100+
// envelope.play(osc, time);
101+
envelope.triggerAttack(osc, time);
102+
//envelope.triggerRelease(osc);
103+
note = (note + 1) % scaleArray.length;
104+
setTimeout(redrawWaveform, time * 1000.0);
105+
106+
}
107+
108+
function makeSoundRelease(time, playbackRate)
109+
{
110+
envelope.triggerRelease(osc, time);
111+
}
112+
113+
function redrawWaveform()
114+
{
115+
background(20);
116+
startPoint = 0;
117+
endPoint = (width / numWaveforms);
118+
}

‎examples/envelope/sketch.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ var env;
1919
var a;
2020

2121
// Times and levels for the ASR envelope
22-
var attackTime = 0.01;
23-
var attackLevel = 0.7;
22+
var attackTime = 0.001;
23+
var attackLevel = 0.9;
2424
var decayTime = 0.3;
2525
var decayLevel = 0.2;
2626
var sustainTime = 0.1;

‎examples/loop_stepSequencer/sketch.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ function setup() {
3131
// set tempo (Beats Per Minute) of the part and tell it to loop
3232
part.setBPM(80);
3333
part.loop();
34-
3534
}
3635

3736
function playKick(time, params) {

‎lib/addons/p5.dom.js‎

Lines changed: 62 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! p5.dom.js v0.2.6 November 24, 2015 */
1+
/*! p5.dom.js v0.2.7 January 4, 2016 */
22
/**
33
* <p>The web is much more than just canvas and p5.dom makes it easy to interact
44
* with other HTML5 objects, including text, hyperlink, image, input, video,
@@ -809,7 +809,7 @@
809809
* paths to different formats of the same audio. This is useful for ensuring
810810
* that your audio can play across different browsers, as each supports
811811
* different formats. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">this
812-
* page for further information about supported formats.
812+
* page for further information about supported formats</a>.
813813
*
814814
* @method createAudio
815815
* @param {String|Array} src path to an audio file, or array of paths for
@@ -1180,29 +1180,25 @@
11801180
* </code></div>
11811181
*/
11821182
p5.Element.prototype.translate = function(){
1183+
this.elt.style.position = 'absolute';
1184+
// save out initial non-translate transform styling
1185+
var transform = '';
11831186
if (this.elt.style.transform) {
1184-
this.elt.style.position = 'absolute';
1185-
if (arguments.length === 2){
1186-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1187-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1188-
this.elt.style.transform = 'translate('+arguments[0]+'px, '+arguments[1]+'px)';
1189-
this.elt.style.transform += style;
1190-
}else if (arguments.length === 3){
1191-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1192-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1193-
this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
1194-
this.elt.style.transform += style;
1187+
transform = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1188+
transform = transform.replace(/translate[X-Z]?\(.*\)/g, '');
1189+
}
1190+
if (arguments.length === 2) {
1191+
this.elt.style.transform = 'translate('+arguments[0]+'px, '+arguments[1]+'px)';
1192+
} else if (arguments.length > 2) {
1193+
this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
1194+
if (arguments.length === 3) {
11951195
this.elt.parentElement.style.perspective = '1000px';
1196-
}else if (arguments.length === 4){
1197-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1198-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1199-
this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
1200-
this.elt.style.transform += style;
1196+
} else {
12011197
this.elt.parentElement.style.perspective = arguments[3]+'px';
12021198
}
1203-
} else {
1204-
console.log('Your browser does not support element translate function.');
12051199
}
1200+
// add any extra transform styling back on end
1201+
this.elt.style.transform += transform;
12061202
return this;
12071203
};
12081204

@@ -1230,28 +1226,24 @@
12301226
* </code></div>
12311227
*/
12321228
p5.Element.prototype.rotate = function(){
1229+
// save out initial non-rotate transform styling
1230+
var transform = '';
12331231
if (this.elt.style.transform) {
1234-
if (arguments.length === 1){
1235-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1236-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1237-
this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
1238-
this.elt.style.transform += style;
1239-
}else if (arguments.length === 2){
1240-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1241-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1242-
this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
1243-
this.elt.style.transform += style;
1244-
}else if (arguments.length === 3){
1245-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1246-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1247-
this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
1248-
this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
1249-
this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
1250-
this.elt.style.transform += style;
1251-
}
1252-
} else {
1253-
console.log('Your browser does not support element rotate function.');
1232+
var transform = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1233+
transform = transform.replace(/rotate[X-Z]?\(.*\)/g, '');
12541234
}
1235+
1236+
if (arguments.length === 1){
1237+
this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
1238+
}else if (arguments.length === 2){
1239+
this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
1240+
}else if (arguments.length === 3){
1241+
this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
1242+
this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
1243+
this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
1244+
}
1245+
// add remaining transform back on
1246+
this.elt.style.transform += transform;
12551247
return this;
12561248
};
12571249

@@ -1277,15 +1269,37 @@
12771269
* var myDiv = createDiv("I like pandas.");
12781270
* myDiv.style("font-size", "18px");
12791271
* myDiv.style("color", "#ff0000");
1272+
* </code></div>
1273+
* <div><code class="norender">
12801274
* var col = color(25,23,200,50);
1281-
* createButton('button').style("background-color", col);
1275+
* var button = createButton("button");
1276+
* button.style("background-color", col);
1277+
* button.position(10, 10);
1278+
* </code></div>
1279+
* <div><code class="norender">
1280+
* var myDiv = createDiv("I like lizards.");
1281+
* myDiv.style("position", 20, 20);
1282+
* myDiv.style("rotate", 45);
1283+
* </code></div>
1284+
* <div><code class="norender">
1285+
* var myDiv;
1286+
* function setup() {
1287+
* background(200);
1288+
* myDiv = createDiv("I like gray.");
1289+
* myDiv.position(20, 20);
1290+
* }
1291+
*
1292+
* function draw() {
1293+
* myDiv.style("font-size", mouseX+"px");
1294+
* }
12821295
* </code></div>
12831296
*/
12841297
p5.Element.prototype.style = function(prop, val) {
12851298
var self = this;
12861299

1287-
if (val instanceof p5.Color)
1300+
if (val instanceof p5.Color) {
12881301
val = 'rgba(' + val.levels[0] + ',' + val.levels[1] + ',' + val.levels[2] + ',' + val.levels[3]/255 + ')'
1302+
}
12891303

12901304
if (typeof val === 'undefined') {
12911305
if (prop.indexOf(':') === -1) {
@@ -1302,58 +1316,14 @@
13021316
}
13031317
}
13041318
} else {
1305-
if (prop === 'rotate'){
1306-
if (this.elt.style.transform) {
1307-
if (arguments.length === 2) {
1308-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1309-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1310-
this.elt.style.transform = 'rotate(' + arguments[0] + 'deg)';
1311-
this.elt.style.transform += style;
1312-
} else if (arguments.length === 3) {
1313-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1314-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1315-
this.elt.style.transform = 'rotate(' + arguments[0] + 'deg, ' + arguments[1] + 'deg)';
1316-
this.elt.style.transform += style;
1317-
} else if (arguments.length === 4) {
1318-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1319-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1320-
this.elt.style.transform = 'rotateX(' + arguments[0] + 'deg)';
1321-
this.elt.style.transform += 'rotateY(' + arguments[1] + 'deg)';
1322-
this.elt.style.transform += 'rotateZ(' + arguments[2] + 'deg)';
1323-
this.elt.style.transform += style;
1324-
}
1325-
} else if (prop === 'translate') {
1326-
if (arguments.length === 3) {
1327-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1328-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1329-
this.elt.style.transform = 'translate(' + arguments[0] + 'px, ' + arguments[1] + 'px)';
1330-
this.elt.style.transform += style;
1331-
} else if (arguments.length === 4) {
1332-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1333-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1334-
this.elt.style.transform = 'translate3d(' + arguments[0] + 'px,' + arguments[1] + 'px,' + arguments[2] + 'px)';
1335-
this.elt.style.transform += style;
1336-
this.elt.parentElement.style.perspective = '1000px';
1337-
} else if (arguments.length === 5) {
1338-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1339-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1340-
this.elt.style.transform = 'translate3d(' + arguments[0] + 'px,' + arguments[1] + 'px,' + arguments[2] + 'px)';
1341-
this.elt.style.transform += style;
1342-
this.elt.parentElement.style.perspective = arguments[3] + 'px';
1343-
}
1344-
} else {
1345-
console.log('Your browser does not support element rotate or translate.');
1346-
}
1347-
} else if (prop === 'position') {
1348-
this.elt.style.left = arguments[1] + 'px';
1349-
this.elt.style.top = arguments[2] + 'px';
1350-
this.x = arguments[1];
1351-
this.y = arguments[2];
1319+
if (prop === 'rotate' || prop === 'translate' || prop === 'position'){
1320+
var trans = Array.prototype.shift.apply(arguments);
1321+
this[trans].apply(this, arguments);
13521322
} else {
13531323
this.elt.style[prop] = val;
13541324
if (prop === 'width' || prop === 'height' || prop === 'left' || prop === 'top') {
13551325
var numVal = val.replace(/\D+/g, '');
1356-
this[prop] = parseInt(numVal, 10);
1326+
this[prop] = parseInt(numVal, 10); // pend: is this necessary?
13571327
}
13581328
}
13591329
}
@@ -1706,8 +1676,8 @@
17061676
this.drawingContext = this.canvas.getContext('2d');
17071677
}
17081678
if (this.canvas.width !== this.elt.width) {
1709-
this.canvas.width = this.elt.videoWidth;
1710-
this.canvas.height = this.elt.videoHeight;
1679+
this.canvas.width = this.elt.width;
1680+
this.canvas.height = this.elt.height;
17111681
this.width = this.canvas.width;
17121682
this.height = this.canvas.height;
17131683
}

0 commit comments

Comments
 (0)