|
1 |
| -import { Observable } from './Observe'; |
2 |
| -import { knobToAttack, knobToDecay, knobToRelease } from './utils/maths'; |
| 1 | +import { Observable } from '../observable'; |
| 2 | +import { knobToAttack, knobToDecay, knobToRelease } from '../utils/maths'; |
3 | 3 |
|
4 | 4 | // some web audio api params fail if you try to modulate them to zero.
|
5 | 5 | const NO_ZERO = 0.00001;
|
6 | 6 |
|
7 |
| -class Envelope extends Observable { |
| 7 | +export default class Envelope extends Observable { |
8 | 8 | constructor(context, audioParam) {
|
9 | 9 | super();
|
10 | 10 |
|
@@ -129,72 +129,3 @@ class Envelope extends Observable {
|
129 | 129 | return this._maxValue;
|
130 | 130 | }
|
131 | 131 | }
|
132 |
| - |
133 |
| -class EnvelopeGraph { |
134 |
| - constructor(envelope, canvas) { |
135 |
| - this.envelope = envelope; |
136 |
| - this.canvas = canvas; |
137 |
| - |
138 |
| - this.getRect(); |
139 |
| - this.draw = this.draw.bind(this); |
140 |
| - this.draw(); |
141 |
| - |
142 |
| - window.addEventListener('resize', () => this.getRect()); |
143 |
| - } |
144 |
| - |
145 |
| - values () { |
146 |
| - let { |
147 |
| - attack, |
148 |
| - decay, |
149 |
| - sustain, |
150 |
| - release |
151 |
| - } = this.envelope(); |
152 |
| - |
153 |
| - return { |
154 |
| - a: Math.floor(knobToAttack(attack) * 100), |
155 |
| - d: Math.floor(knobToDecay(decay) * 100), |
156 |
| - s: 1 - (sustain / 127), |
157 |
| - r: Math.floor(knobToRelease(release) * 100), |
158 |
| - }; |
159 |
| - } |
160 |
| - |
161 |
| - draw() { |
162 |
| - requestAnimationFrame(this.draw); |
163 |
| - let w = this.width; |
164 |
| - let h = this.height; |
165 |
| - let { a, d, s, r } = this.values(); |
166 |
| - a += 3; |
167 |
| - d += 10; |
168 |
| - r += 3; |
169 |
| - let t = a + d + r; |
170 |
| - |
171 |
| - let ap = (a / t) * w; |
172 |
| - let dp = (d / t) * w; |
173 |
| - let rp = (r / t) * w; |
174 |
| - let sp = Math.floor(s * h); |
175 |
| - |
176 |
| - let context = this.canvas.getContext('2d'); |
177 |
| - context.imageSmoothingEnabled = true; |
178 |
| - |
179 |
| - context.clearRect(0, 0, w, h); |
180 |
| - |
181 |
| - context.strokeStyle = '#141414'; |
182 |
| - context.beginPath(); |
183 |
| - context.moveTo(0, h); |
184 |
| - context.lineTo(ap, 0); |
185 |
| - context.quadraticCurveTo(ap, sp, ap + dp, sp); |
186 |
| - context.quadraticCurveTo(ap + dp, h, ap + dp + rp, h); |
187 |
| - context.stroke(); |
188 |
| - |
189 |
| - } |
190 |
| - |
191 |
| - getRect() { |
192 |
| - this.canvasRect = this.canvas.getBoundingClientRect(); |
193 |
| - this.width = this.canvasRect.width; |
194 |
| - this.height = this.canvasRect.height; |
195 |
| - this.canvas.setAttribute('width', this.width); |
196 |
| - this.canvas.setAttribute('height', this.height); |
197 |
| - } |
198 |
| -} |
199 |
| - |
200 |
| -export { Envelope, EnvelopeGraph }; |
0 commit comments