Skip to content

Commit e02bbcd

Browse files
ArdenButterfieldArdenButterfield
authored
Merge pull request #3 from IDMIL/new-features-and-tidying
New features and tidying
2 parents 45d1b55 + 5c68eb2 commit e02bbcd

File tree

21 files changed

+146672
-107287
lines changed

21 files changed

+146672
-107287
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
README.md.backup
2+
.idea

‎all-panels/index.html‎

Lines changed: 141 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -14,44 +14,149 @@
1414
<script src="../fft.js"></script>
1515
<script src="../waves.js"></script>
1616
<script src="../widget.js"></script>
17+
<script src="../interaction.js"></script>
18+
<title>Digital Audio Workbench</title>
1719
</head>
18-
<body>
20+
<body>
1921
<main>
20-
<script>
21-
const widget = new_widget(
22-
[ new inputSigPanel()
23-
, new inputSigFreqPanel()
24-
, new impulsePanel()
25-
, new impulseFreqPanel()
26-
, new sampledInputPanel()
27-
, new sampledInputFreqPanel()
28-
, new quantNoisePanel()
29-
, new quantNoiseFFTPanel()
30-
, new reconstructedSigPanel()
31-
, new reconstructedSigFFTPanel()
32-
, new inputPlusSampledPanel()
33-
, new allSignalsPanel()
34-
],
35-
[ new freqSlider()
36-
, new numHarmSlider()
37-
, new sampleRateSlider()
38-
, new antialiasingSlider()
39-
, new ditherSlider()
40-
, new bitDepthSlider()
41-
, new amplitudeSlider()
42-
, new phaseSlider()
43-
, new ampZoomSlider()
44-
, new freqZoomSlider()
45-
, new timeZoomSlider()
46-
]
47-
);
48-
</script>
22+
<div class="timeline">
23+
24+
<h1>Digital Audio Workbench (Sampling and Quantization)</h1>
25+
26+
<h2>By Arden Butterfield, Josh Rohs, Travis J. West & Marcelo M. Wanderley
27+
with contributions by Eduardo Meneses, Christian Frisson, Erivan Duarte, Laurent Tarabout, and Maxwell Gentili-Morin</h2>
28+
<h3>Copyright IDMIL/McGill University, 2025</h3>
29+
30+
<div class="section" id="input-section">
31+
<div class="titlebar">
32+
<div class="section-title">
33+
<h2>Input</h2>
34+
</div>
35+
<button class="collapse-button" id="coll-input" onclick="collapseClick(this.id)"></button>
36+
</div>
37+
<div class="collapse">
38+
<div class="row panels">
39+
<div class="panel" id="input-time-domain"></div>
40+
<div class="panel" id="input-freq-domain"></div>
41+
</div>
42+
<div class="row sliders">
43+
<div class="slider" id="audio-input-type-slider"></div>
44+
<div class="slider" id="frequency-slider"></div>
45+
<div class="slider" id="num-harmonics-slider"></div>
46+
<div class="slider" id="amplitude-slider"></div>
47+
</div>
48+
<button class="play-button" id="play-input">Play</button>
49+
</div>
50+
</div>
51+
<div class="section" id="filter-section">
52+
<div class="titlebar">
53+
<div class="section-title">
54+
<h2>Filter</h2>
55+
</div>
56+
<button class="collapse-button" id="coll-filter" onclick="collapseClick(this.id)"></button>
57+
</div>
58+
<div class="collapse">
59+
<div class="row panels">
60+
<div class="panel" id="filter-kernel"></div>
61+
<div class="panel" id="filter-kernel-fft"></div>
62+
</div>
63+
<div class="row panels">
64+
<div class="panel" id="input-filtered-time-domain"></div>
65+
<div class="panel" id="input-filtered-freq-domain"></div>
66+
</div>
67+
<div class="row sliders">
68+
<div class="slider" id="antialiasing-filter-order-slider"></div>
69+
</div>
70+
<button class="play-button" id="play-filter-kernel">Play kernel</button>
71+
<button class="play-button" id="play-filtered-input">Play filtered input</button>
72+
</div>
73+
</div>
74+
<div class="section" id="samplerate-section">
75+
<div class="titlebar">
76+
<div class="section-title">
77+
<h2>Sample Rate</h2>
78+
</div>
79+
<button class="collapse-button" id="coll-fs" onclick="collapseClick(this.id)"></button>
80+
</div>
81+
<div class="collapse">
82+
<div class="row panels">
83+
<div class="panel" id="input-plus-sampled"></div>
84+
<div class="panel" id="sampling-freq-domain"></div>
85+
</div>
86+
<div class="row sliders">
87+
<div class="slider" id="sample-rate-slider"></div>
88+
</div>
89+
<button class="play-button" id="play-sample-rate">Play</button>
90+
</div>
91+
</div>
92+
<div class="section" id="dither-section">
93+
<div class="titlebar">
94+
<div class="section-title">
95+
<h2>Dither</h2>
96+
</div>
97+
<button class="collapse-button" id="coll-dither" onclick="collapseClick(this.id)"></button>
98+
99+
</div>
100+
<div class="collapse">
101+
<div class="row panels">
102+
<div class="panel" id="dither-histogram"></div>
103+
</div>
104+
<div class="row sliders">
105+
<div class="slider" id="dither-slider"></div>
106+
</div>
107+
</div>
108+
</div>
109+
<div class="section" id="quantization-section">
110+
<div class="titlebar">
111+
<div class="section-title">
112+
<h2>Quantization</h2>
113+
</div>
114+
<button class="collapse-button" id="coll-quantization" onclick="collapseClick(this.id)"></button>
115+
</div>
116+
<div class="collapse">
117+
<div class="row panels">
118+
<div class="panel" id="quantization-noise"></div>
119+
<div class="panel" id="quantization-noise-fft"></div>
120+
</div>
121+
<div class="row sliders">
122+
<div class="slider" id="quantization-slider"></div>
123+
</div>
124+
<button class="play-button" id="play-quantized-noise">Play</button>
125+
</div>
126+
</div>
127+
<div class="section" id="reconstructed-section">
128+
<div class="titlebar">
129+
<div class="section-title">
130+
<h2>Reconstructed</h2>
131+
</div>
132+
<button class="collapse-button" id="coll-recon" onclick="collapseClick(this.id)"></button>
133+
134+
</div>
135+
<div class="collapse">
136+
<div class="row panels">
137+
<div class="panel" id="reconstructed"></div>
138+
<div class="panel" id="reconstructed-fft"></div>
139+
</div>
140+
<div class="row panels">
141+
<div class="panel" id="all-signals"></div>
142+
</div>
143+
<div class="row sliders">
144+
<div class="slider" id="reconstruction-filter-order-slider"></div>
145+
</div>
146+
<button class="play-button" id="play-reconstructed">Play Reconstructed</button>
147+
</div>
148+
</div>
149+
</div>
49150
</main>
50-
<footer>
51-
<div>Digital Audio Workbench </div>
52-
<div>By Josh Rohs, Travis J. West & Marcelo M. Wanderley </div>
53-
<div>with contributions by Eduardo Meneses, Christian Frisson, and Erivan Duarte</div>
54-
<div>Copyright <a href="//www-new.idmil.org/">IDMIL</a>/McGill University, 2020 </div>
55-
</footer>
151+
<div class="global-panel">
152+
<div id="global-panel-collapse-button" onclick="collapseGlobalPanel()"></div>
153+
<div class="contents">
154+
<div class="slider" id="time-zoom-slider"></div>
155+
<div class="slider" id="amp-zoom-slider"></div>
156+
</div>
157+
</div>
158+
<script>
159+
createWidgets();
160+
</script>
56161
</body>
57162
</html>

‎delta-modulation/widget_delta.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -797,21 +797,21 @@ function updatePanel(panels, name, checkBoxState) {
797797
if (!panelPresent) {
798798
//Replace/add lines for more options
799799
if (name == "Input Signal Time Domain with Delta Modulation") {panels.push(new deltaModPanel());}
800-
if (name == "Input Signal Frequency Domain") {panels.push(new inputSigFreqPanel());}
801-
if (name == "Reconstructed Signal Time Domain") {panels.push(new reconstructedSigPanel());}
802-
if (name == "Reconstructed Signal FFT") {panels.push(new reconstructedSigFFTPanel());}
800+
if (name == "Input Signal Frequency Domain") {panels.push(new InputSigFreqPanel());}
801+
if (name == "Reconstructed Signal Time Domain") {panels.push(new ReconstructedSigPanel());}
802+
if (name == "Reconstructed Signal FFT") {panels.push(new ReconstructedSigFFTPanel());}
803803
if (name == "Reconstructed Signal Time Domain using Delta Modulation") {panels.push(new reconstructedDeltaModSigPanel());}
804804
if (name == "Reconstructed Signal using Delta Modulation FFT") {panels.push(new reconstructedDeltaModSigFFTPanel());}
805-
if (name == "Input Signal Time Domain") {panels.push(new inputSigPanel());}
806-
if (name == "Sampled Signal FFT") {panels.push(new sampledInputFFTPanel());}
807-
if (name == "Sampling Signal Time Domain") {panels.push(new impulsePanel());}
808-
if (name == "Sampling Signal Frequency Domain") {panels.push(new impulseFreqPanel());}
809-
if (name == "Sampled Signal Time Domain") {panels.push(new sampledInputPanel());}
810-
if (name == "Sampled Signal Frequency Domain") {panels.push(new sampledInputFreqPanel());}
811-
if (name == "Quantization Noise Time Domain") {panels.push(new quantNoisePanel());}
812-
if (name == "Quantization Noise FFT") {panels.push(new quantNoiseFFTPanel());}
813-
if (name == "Input with Sampled Signal Time Domain") {panels.push(new inputPlusSampledPanel());}
814-
if (name == "Input (solid), Sampled (lollipop), Reconstructed (dotted), Time Domain") {panels.push(new allSignalsPanel());}
805+
if (name == "Input Signal Time Domain") {panels.push(new InputSigPanel());}
806+
if (name == "Sampled Signal FFT") {panels.push(new SampledInputFFTPanel());}
807+
if (name == "Sampling Signal Time Domain") {panels.push(new ImpulsePanel());}
808+
if (name == "Sampling Signal Frequency Domain") {panels.push(new ImpulseFreqPanel());}
809+
if (name == "Sampled Signal Time Domain") {panels.push(new SampledInputPanel());}
810+
if (name == "Sampled Signal Frequency Domain") {panels.push(new SampledInputFreqPanel());}
811+
if (name == "Quantization Noise Time Domain") {panels.push(new QuantNoisePanel());}
812+
if (name == "Quantization Noise FFT") {panels.push(new QuantNoiseFFTPanel());}
813+
if (name == "Input with Sampled Signal Time Domain") {panels.push(new InputPlusSampledPanel());}
814+
if (name == "Input (solid), Sampled (lollipop), Reconstructed (dotted), Time Domain") {panels.push(new AllSignalsPanel());}
815815

816816

817817
//reorderPanels();
@@ -858,13 +858,13 @@ function updateSlider(sliders, propName, checkBoxState) {
858858
}
859859
if (!sliderPresent) {
860860
//Replace/add lines for more options
861-
if (propName == "timeZoom") {sliders.push(new timeZoomSlider());}
862-
if (propName == "fundFreq") {sliders.push(new freqSlider());}
863-
if (propName == "downsamplingFactor") {sliders.push(new sampleRateSlider());}
861+
if (propName == "timeZoom") {sliders.push(new TimeZoomSlider());}
862+
if (propName == "fundFreq") {sliders.push(new FreqSlider());}
863+
if (propName == "downsamplingFactor") {sliders.push(new SampleRateSlider());}
864864
if (propName == "downsamplingFactorDelta") {sliders.push(new sampleRateDeltaSlider());}
865865
if (propName == "deltaStep") {sliders.push(new deltaStepSlider());}
866-
if (propName == "numHarm") {sliders.push(new numHarmSlider());}
867-
if (propName == "phase") {sliders.push(new phaseSlider());}
866+
if (propName == "numHarm") {sliders.push(new NumHarmSlider());}
867+
if (propName == "phase") {sliders.push(new PhaseSlider());}
868868
/*if (propName == "") {sliders.push(new ());}
869869
if (propName == "") {sliders.push(new ());}
870870
if (propName == "") {sliders.push(new ());}

‎delta-sigma-panels/index.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="../styles.css" media="screen" />
5+
<!-- p5.js begin -->
6+
<!-- 1) use p5.min.js for optimizing size/transfer -->
7+
<script src="../p5.min.js"></script>
8+
<!-- 2) use p5.js for debugging -->
9+
<!-- <script src="../p5.js"></script> -->
10+
<!-- p5.js end-->
11+
<script src="../fili.min.js"></script>
12+
<script src="../panel.js"></script>
13+
<script src="../slider.js"></script>
14+
<script src="../fft.js"></script>
15+
<script src="../waves.js"></script>
16+
<script src="../widget.js"></script>
17+
<script src="../interaction.js"></script>
18+
</head>
19+
<body>
20+
<main>
21+
<div class="timeline">
22+
<h1>Digital Audio Workbench (Delta-Sigma Encoding)</h1>
23+
24+
<h2>By Arden Butterfield, Josh Rohs, Travis J. West & Marcelo M. Wanderley
25+
with contributions by Eduardo Meneses, Christian Frisson, Erivan Duarte, Laurent Tarabout, and Maxwell Gentili-Morin</h2>
26+
<h3>Copyright IDMIL/McGill University, 2025</h3>
27+
28+
<div class="section" id="input-section">
29+
<div class="titlebar">
30+
<div class="section-title">
31+
<h2>Input</h2>
32+
</div>
33+
<button class="collapse-button" id="coll-input" onclick="collapseClick(this.id)"></button>
34+
</div>
35+
<div class="collapse">
36+
<div class="row panels">
37+
<div class="panel" id="input-time-domain"></div>
38+
<div class="panel" id="input-freq-domain"></div>
39+
</div>
40+
<div class="row sliders">
41+
<div class="slider" id="audio-input-type-slider"></div>
42+
<div class="slider" id="frequency-slider"></div>
43+
<div class="slider" id="num-harmonics-slider"></div>
44+
<div class="slider" id="amplitude-slider"></div>
45+
</div>
46+
<button class="play-button" id="play-input">Play</button>
47+
</div>
48+
</div>
49+
<div class="section" id="delta-sigma-section">
50+
<div class="titlebar">
51+
<div class="section-title">
52+
<h2>Delta-Sigma</h2>
53+
</div>
54+
<button class="collapse-button" id="coll-delta-sigma" onclick="collapseClick(this.id)"></button>
55+
</div>
56+
<div class="collapse">
57+
<div class="row panels">
58+
<div class="panel" id="delta-mod-panel"></div>
59+
</div>
60+
<div class="row sliders">
61+
<div class="slider" id="sample-rate-slider"></div>
62+
<div class="slider" id="delta-sigma-step-slider"></div>
63+
</div>
64+
<button class="play-button" id="play-delta-sigma">Play</button>
65+
</div>
66+
</div>
67+
<div class="section" id="reconstructed-section">
68+
<div class="titlebar">
69+
<div class="section-title">
70+
<h2>Reconstructed</h2>
71+
</div>
72+
<button class="collapse-button" id="coll-recon" onclick="collapseClick(this.id)"></button>
73+
74+
</div>
75+
<div class="collapse">
76+
<div class="row panels">
77+
<div class="panel" id="reconstructed"></div>
78+
<div class="panel" id="reconstructed-fft"></div>
79+
</div>
80+
<div class="row panels">
81+
<div class="panel" id="all-signals"></div>
82+
</div>
83+
<div class="row sliders">
84+
<div class="slider" id="reconstruction-filter-order-slider"></div>
85+
<div class="slider" id="reconstruction-filter-freq-slider"></div>
86+
</div>
87+
<button class="play-button" id="play-reconstructed">Play Reconstructed</button>
88+
</div>
89+
</div>
90+
</div>
91+
</main>
92+
<div class="global-panel">
93+
<div id="global-panel-collapse-button" onclick="collapseGlobalPanel()"></div>
94+
<div class="contents">
95+
<div class="slider" id="time-zoom-slider"></div>
96+
<div class="slider" id="amp-zoom-slider"></div>
97+
</div>
98+
</div>
99+
100+
<script>
101+
createWidgets();
102+
</script>
103+
</body>
104+
</html>

‎interaction.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
function collapseClick(id) {
2+
let collapse = document.getElementById(id).parentNode.parentNode .querySelector('.collapse');
3+
if (collapse.style.display === 'none') {
4+
collapse.style.display = 'block';
5+
document.getElementById(id).textContent = "_";
6+
} else {
7+
collapse.style.display = 'none';
8+
document.getElementById(id).textContent = "\u26F6";
9+
}
10+
}
11+
12+
function collapseGlobalPanel() {
13+
let collapse = document.getElementById("global-panel-collapse-button").parentNode.querySelector('.contents');
14+
if (collapse.style.display === 'none') {
15+
collapse.style.display = 'block';
16+
} else {
17+
collapse.style.display = 'none';
18+
}
19+
20+
}

0 commit comments

Comments
 (0)