-
Notifications
You must be signed in to change notification settings - Fork 0
/
sawTooth.html
71 lines (66 loc) · 3.01 KB
/
sawTooth.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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var PHASOR_FREQUENCY = 1;
var PHASOR_AMPLITUDE = 1;
var TARGET_PHASOR_FREQUENCY = 1;
var TARGET_PHASOR_AMPLITUDE = 1;
var PHASOR_INTERPOLATOR = d3.interpolateNumber(PHASOR_FREQUENCY, TARGET_PHASOR_FREQUENCY);
var PHASOR_AMP_INTERPOLATOR = d3.interpolateNumber(PHASOR_AMPLITUDE, TARGET_PHASOR_AMPLITUDE);
var PHASOR_INTERPOLATION = 1.0;
var PHASOR_AMP_INTERPOLATION = 1.0;
function GET_PHASOR_FREQUENCY() {
return PHASOR_INTERPOLATOR(Math.min(PHASOR_INTERPOLATION, 1.0));
}
function GET_PHASOR_AMPLITUDE() {
return PHASOR_AMP_INTERPOLATOR(Math.min(PHASOR_AMP_INTERPOLATION, 1.0));
}
function updateFreq(freq) {
PHASOR_FREQUENCY = GET_PHASOR_FREQUENCY();
if(freq>=1 && freq<=20)
{
TARGET_PHASOR_FREQUENCY = freq;
}
PHASOR_INTERPOLATION = 0.0;
PHASOR_INTERPOLATOR = d3.interpolateNumber(PHASOR_FREQUENCY, TARGET_PHASOR_FREQUENCY);
}
function updateAmp(amp) {
PHASOR_AMPLITUDE = GET_PHASOR_AMPLITUDE();
if(amp>=0 && amp<=5000)
{
TARGET_PHASOR_AMPLITUDE = amp / 5000;
}
PHASOR_AMP_INTERPOLATION = 0.0;
PHASOR_AMP_INTERPOLATOR = d3.interpolateNumber(PHASOR_AMPLITUDE, TARGET_PHASOR_AMPLITUDE);
}
</script>
<script>
function printFreq(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
function printAmp(sliderID2, textbox2) {
var x = document.getElementById(textbox2);
var y = document.getElementById(sliderID2);
x.value = y.value;
x.value = Math.round(x.value/100);
}
window.onload = function() { printValue('slider1', 'rangeValue1'); printValue('slider2', 'rangeValue2'); printValue('slider3', 'rangeValue3'); printValue('slider4', 'rangeValue4'); }
</script>
<svg id="phasor" class="svgWithText" width="600" height="150" style="margin-left: 50px; margin-right: 100px;"></svg>
<script type="text/javascript" src="sawTooth.js"></script>
<div class="controls">
<label for=freqFader>Number of Terms</label><br/>
<input type=range min=1 max=20 value=1 id=freqFader step=1 width=150 oninput="printFreq('freqFader','rangeValue2'),updateFreq(value);">
<input id="rangeValue2" type="text" value=1 size="2" oninput="updateFreq(value)"/><br/>
<label for=ampFader>Amplitude</label><br/>
<input type=range min=0 max=5000 value=5000 id=ampFader step=0.5 width=150 oninput="printAmp('ampFader','rangeValue1'),updateAmp(value);" >
<input id="rangeValue1" type="text" value=50 size="2" oninput="updateAmp(100*value)"/><br/>
</div>
</body>
</html>