Skip to content

Commit 904252b

Browse files
JunShernJunShern
committed
Add envelopeDesigner example
1 parent 15db207 commit 904252b

File tree

2 files changed

+106
-0
lines changed

2 files changed

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

0 commit comments

Comments
 (0)