Skip to content

Commit 5f4d191

Browse files
JunShernJunShern
committed
Add working example envelope_designer and rebuild index.html
1 parent b28a3c0 commit 5f4d191

File tree

3 files changed

+114
-0
lines changed

3 files changed

+114
-0
lines changed

‎examples/envelope_designer/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/envelope_designer/sketch.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
var attackTime = 0.001
2+
var attackLevel = 1.0;
3+
var decayTime = 0.2;
4+
var decayLevel = 0.2;
5+
var releaseTime = 0.5;
6+
var releaseLevel = 0;
7+
var sustainTime = 0.5;
8+
9+
var attackTimeInput, attackLevelInput;
10+
var decayTimeInput, decayLevelInput;
11+
var releaseTimeInput, releaseLevelInput;
12+
var sustainTimeInput;
13+
14+
var maxTime = 1;
15+
var maxLevel = 5;
16+
var xScale = 100;
17+
18+
var env, osc;
19+
20+
function setup() {
21+
var cnv = createCanvas(500, 500);
22+
cnv.mousePressed(playEnv);
23+
24+
env = new p5.Env();
25+
osc = new p5.Oscillator('triangle');
26+
osc.amp(env);
27+
osc.start();
28+
osc.freq(440);
29+
30+
attackTimeInput = createSlider(0, maxTime, attackTime, 0);
31+
attackTimeInput.position(20, 15);
32+
attackLevelInput = createSlider(0, maxLevel, attackLevel, 0);
33+
attackLevelInput.position(160, 15);
34+
decayTimeInput = createSlider(0, maxTime, decayTime, 0);
35+
decayTimeInput.position(20, 45);
36+
decayLevelInput = createSlider(0, maxLevel, decayLevel, 0);
37+
decayLevelInput.position(160, 45);
38+
sustainTimeInput = createSlider(0, maxTime, sustainTime, 0);
39+
sustainTimeInput.position(20, 75);
40+
releaseTimeInput = createSlider(0, maxTime, releaseTime, 0);
41+
releaseTimeInput.position(20, 105);
42+
releaseLevelInput = createSlider(0, maxLevel, releaseLevel, 0);
43+
releaseLevelInput.position(160, 105);
44+
}
45+
46+
function draw() {
47+
background(30, 100, 155);
48+
attackTime = attackTimeInput.value();
49+
attackLevel = attackLevelInput.value();
50+
decayTime = decayTimeInput.value();
51+
decayLevel = decayLevelInput.value();
52+
sustainTime = sustainTimeInput.value();
53+
releaseTime = releaseTimeInput.value();
54+
releaseLevel = releaseLevelInput.value();
55+
drawADSR();
56+
57+
// Text
58+
textAlign(CENTER);
59+
text('click to play', width/2, height/2);
60+
}
61+
62+
function playEnv() {
63+
env.set(attackTime, attackLevel, decayTime, decayLevel, releaseTime, releaseLevel);
64+
env.play(osc, 0, sustainTime);
65+
}
66+
67+
function drawADSR() {
68+
var textPadding = 50;
69+
var xScale = (width - textPadding) / maxTime / 4;
70+
var yScale = (height - textPadding) / maxLevel;
71+
72+
fill(130, 200, 255);
73+
noStroke();
74+
textAlign(LEFT, BOTTOM);
75+
76+
beginShape();
77+
// Start
78+
vertex(0, height);
79+
// Attack
80+
x = attackTime*xScale;
81+
y = height - attackLevel*yScale;
82+
vertex(x, y);
83+
text(`Attack: \n${attackTime.toFixed(3)}s \n${attackLevel.toFixed(3)}`, x, y);
84+
// Decay
85+
x = x + decayTime*xScale;
86+
y = height - decayLevel*yScale;
87+
vertex(x, y);
88+
text(`Decay: \n${decayTime.toFixed(3)}s \n${decayLevel.toFixed(3)}`, x, y);
89+
// Sustain
90+
x = x + sustainTime*xScale;
91+
y = y;
92+
vertex(x, y);
93+
text(`Sustain: \n${sustainTime.toFixed(3)}s`, x, y);
94+
// Release
95+
x = x + releaseTime*xScale;
96+
y = height - releaseLevel*yScale;
97+
text(`Release: \n${releaseTime.toFixed(3)}s \n${releaseLevel.toFixed(3)}`, x, y);
98+
vertex(x, y);
99+
// End
100+
vertex(width, y);
101+
vertex(width, height);
102+
endShape();
103+
}

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ <h2>p5.sound
1919
<div><a href="examples/distortion">distortion</a></div>
2020
<div><a href="examples/envAmpFreq">envAmpFreq</a></div>
2121
<div><a href="examples/envelope">envelope</a></div>
22+
<div><a href="examples/envelope_designer">envelope_designer</a></div>
2223
<div><a href="examples/envelope_exponential_play">envelope_exponential_play</a></div>
2324
<div><a href="examples/envelope_exponential_trig_rel">envelope_exponential_trig_rel</a></div>
2425
<div><a href="examples/envelopeMultipleSources">envelopeMultipleSources</a></div>

0 commit comments

Comments
 (0)