-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (93 loc) · 3.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Visual noise generator</h1>
<canvas id="canvas" width="500" height="500"></canvas>
<div>
<button class="oscillator-type-button" data-type="sine">sine</button>
<button class="oscillator-type-button" data-type="square">square</button>
<button class="oscillator-type-button" data-type="sawtooth">sawtooth</button>
<button class="oscillator-type-button" data-type="triangle">triangle</button>
</div>
<script src="./bower_components/paper/dist/paper-full.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.min.js"></script>
<script>
var oscillatorType = "sine";
jQuery(".oscillator-type-button").on("click", function(e) {
oscillatorType = jQuery(e.target).data("type");
});
var ctx = new AudioContext();
var sound = function() {
var out = ctx.createGain();
var osc = ctx.createOscillator();
osc.type = oscillatorType;
var oscGain = ctx.createGain();
osc.connect(oscGain);
var lfo = ctx.createOscillator();
var lfoGain = ctx.createGain();
lfo.connect(lfoGain);
lfoGain.connect(osc.frequency);
oscGain.connect(out);
out.connect(ctx.destination);
var isStarted = false;
return {
"start": function() {
if (isStarted) {
oscGain.gain.value = 1;
return;
}
lfo.start();
osc.start(ctx.currentTime);
isStarted = true;
},
"stop": function() {
oscGain.gain.value = 0;
},
"setOscillatorType": function(type) {
osc.type = type;
},
"setOscillatorFrequency": function(value) {
osc.frequency.value = value
},
"setLfoFrequency": function(value) {
lfo.frequency.value = value;
},
"setLfoGain": function(value) {
lfoGain.gain.value = value;
}
}
};
</script>
<script type="text/paperscript" canvas="canvas">
var path;
var audios = {};
function onMouseDown(event) {
if (path) {
path.selected = false;
}
path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 3;
var audio = new sound();
audio.start();
audios[path.id] = audio;
}
function onMouseDrag(e) {
path.add(e.point);
audios[path.id].setOscillatorFrequency(e.event.clientY / view.viewSize.height);
audios[path.id].setLfoFrequency(e.event.clientX / view.viewSize.width);
audios[path.id].setLfoGain(path.segments.length);
}
function onMouseUp(event) {
path.simplify();
path.strokeColor = 'red';
}
</script>
</body>
</html>