IDMIL · ArdenButterfield · May 30, 2023 · Jul 17, 2023 · Jul 28, 2023 · Aug 8, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+README.md.backup
+.idea
diff --git a/README.md b/README.md
@@ -116,6 +116,8 @@ function renderWavesImpl(settings, fft, p) { return (playback = false) => {
       else if (settings.harmSlope == "1/x") harmonic_amplitude = 1/harmonic_number;
       else if (settings.harmSlope == "1/x2") harmonic_amplitude = 1/harmonic_number/harmonic_number;
       else if (settings.harmSlope == "flat") harmonic_amplitude = 1;
+      else if (settings.harmSlope == "log") {harmonic_amplitude = Math.exp(-0.1*(harmonic_number-1));
+      console.log(harmonic_amplitude)}
 
       // In case the harmonic slope is 1/x^2 and the harmonic type is "odd",
       // by inverting every other harmonic we generate a nice triangle wave.
@@ -293,7 +295,7 @@ function renderWavesImpl(settings, fft, p) { return (playback = false) => {
 
   // specify filter parameters; as before, the cutoff is set to the Nyquist
   var filterCoeffs = firCalculator.lowpass(
-      { order:  200
+      { order:  1500
       , Fs: WEBAUDIO_MAX_SAMPLERATE
       , Fc: (WEBAUDIO_MAX_SAMPLERATE / settings.downsamplingFactor) / 2
       });

diff --git a/all-panels/index.html b/all-panels/index.html
@@ -14,44 +14,149 @@
     <script src="../fft.js"></script>
     <script src="../waves.js"></script>
     <script src="../widget.js"></script>
+    <script src="../interaction.js"></script>
+    <title>Digital Audio Workbench</title>
   </head>
-  <body>
+    <body>
     <main>
-      <script>
-        const widget = new_widget(
-                [ new inputSigPanel()
-                , new inputSigFreqPanel()
-                , new impulsePanel()
-                , new impulseFreqPanel()
-                , new sampledInputPanel()
-                , new sampledInputFreqPanel()
-                , new quantNoisePanel()
-                , new quantNoiseFFTPanel()
-                , new reconstructedSigPanel()
-                , new reconstructedSigFFTPanel()
-                , new inputPlusSampledPanel()
-                , new allSignalsPanel()
-                ],
-                [ new freqSlider()
-                , new numHarmSlider()
-                , new sampleRateSlider()
-                , new antialiasingSlider()
-                , new ditherSlider()
-                , new bitDepthSlider()
-                , new amplitudeSlider()
-                , new phaseSlider()
-                , new ampZoomSlider()
-                , new freqZoomSlider()
-                , new timeZoomSlider()
-                ]
-        );
-      </script>
+      <div class="timeline">
+
+        <h1>Digital Audio Workbench (Sampling and Quantization)</h1>
+
+        <h2>By Arden Butterfield, Josh Rohs, Travis J. West & Marcelo M. Wanderley
+        with contributions by Eduardo Meneses, Christian Frisson, Erivan Duarte, Laurent Tarabout, and Maxwell Gentili-Morin</h2>
+        <h3>Copyright IDMIL/McGill University, 2025</h3>
+
+        <div class="section" id="input-section">
+          <div class="titlebar">
+            <div class="section-title">
+              <h2>Input</h2>
+            </div>
+            <button class="collapse-button" id="coll-input" onclick="collapseClick(this.id)"></button>
+          </div>
+          <div class="collapse">
+            <div class="row panels">
+              <div class="panel" id="input-time-domain"></div>
+              <div class="panel" id="input-freq-domain"></div>
+            </div>
+            <div class="row sliders">
+              <div class="slider" id="audio-input-type-slider"></div>
+              <div class="slider" id="frequency-slider"></div>
+              <div class="slider" id="num-harmonics-slider"></div>
+              <div class="slider" id="amplitude-slider"></div>
+            </div>
+            <button class="play-button" id="play-input">Play</button>
+          </div>
+        </div>
+        <div class="section" id="filter-section">
+          <div class="titlebar">
+            <div class="section-title">
+              <h2>Filter</h2>
+            </div>
+            <button class="collapse-button" id="coll-filter" onclick="collapseClick(this.id)"></button>
+          </div>
+          <div class="collapse">
+            <div class="row panels">
+              <div class="panel" id="filter-kernel"></div>
+              <div class="panel" id="filter-kernel-fft"></div>
+            </div>
+            <div class="row panels">
+              <div class="panel" id="input-filtered-time-domain"></div>
+              <div class="panel" id="input-filtered-freq-domain"></div>
+            </div>
+            <div class="row sliders">
+              <div class="slider" id="antialiasing-filter-order-slider"></div>
+            </div>
+            <button class="play-button" id="play-filter-kernel">Play kernel</button>
+            <button class="play-button" id="play-filtered-input">Play filtered input</button>
+          </div>
+        </div>
+        <div class="section" id="samplerate-section">
+          <div class="titlebar">
+            <div class="section-title">
+              <h2>Sample Rate</h2>
+            </div>
+            <button class="collapse-button" id="coll-fs" onclick="collapseClick(this.id)"></button>
+          </div>
+          <div class="collapse">
+            <div class="row panels">
+              <div class="panel" id="input-plus-sampled"></div>
+              <div class="panel" id="sampling-freq-domain"></div>
+            </div>
+            <div class="row sliders">
+              <div class="slider" id="sample-rate-slider"></div>
+            </div>
+            <button class="play-button" id="play-sample-rate">Play</button>
+          </div>
+        </div>
+        <div class="section" id="dither-section">
+          <div class="titlebar">
+            <div class="section-title">
+              <h2>Dither</h2>
+            </div>
+            <button class="collapse-button" id="coll-dither" onclick="collapseClick(this.id)"></button>
+
+          </div>
+          <div class="collapse">
+            <div class="row panels">
+              <div class="panel" id="dither-histogram"></div>
+            </div>
+            <div class="row sliders">
+              <div class="slider" id="dither-slider"></div>
+            </div>
+          </div>
+        </div>
+        <div class="section" id="quantization-section">
+          <div class="titlebar">
+            <div class="section-title">
+              <h2>Quantization</h2>
+            </div>
+            <button class="collapse-button" id="coll-quantization" onclick="collapseClick(this.id)"></button>
+          </div>
+          <div class="collapse">
+            <div class="row panels">
+              <div class="panel" id="quantization-noise"></div>
+              <div class="panel" id="quantization-noise-fft"></div>
+            </div>
+            <div class="row sliders">
+              <div class="slider" id="quantization-slider"></div>
+            </div>
+            <button class="play-button" id="play-quantized-noise">Play</button>
+          </div>
+        </div>
+        <div class="section" id="reconstructed-section">
+          <div class="titlebar">
+            <div class="section-title">
+              <h2>Reconstructed</h2>
+            </div>
+            <button class="collapse-button" id="coll-recon" onclick="collapseClick(this.id)"></button>
+
+          </div>
+          <div class="collapse">
+            <div class="row panels">
+              <div class="panel" id="reconstructed"></div>
+              <div class="panel" id="reconstructed-fft"></div>
+            </div>
+            <div class="row panels">
+              <div class="panel" id="all-signals"></div>
+            </div>
+            <div class="row sliders">
+              <div class="slider" id="reconstruction-filter-order-slider"></div>
+            </div>
+            <button class="play-button" id="play-reconstructed">Play Reconstructed</button>
+          </div>
+        </div>
+      </div>
     </main>
-    <footer>
-      <div>Digital Audio Workbench </div>
-      <div>By Josh Rohs, Travis J. West & Marcelo M. Wanderley </div>
-      <div>with contributions by Eduardo Meneses, Christian Frisson, and Erivan Duarte</div>
-      <div>Copyright <a href="//www-new.idmil.org/">IDMIL</a>/McGill University, 2020 </div>
-    </footer>
+    <div class="global-panel">
+      <div id="global-panel-collapse-button" onclick="collapseGlobalPanel()"></div>
+      <div class="contents">
+        <div class="slider" id="time-zoom-slider"></div>
+        <div class="slider" id="amp-zoom-slider"></div>
+      </div>
+    </div>
+  <script>
+    createWidgets();
+  </script>
   </body>
 </html>
diff --git a/delta-modulation/index.html b/delta-modulation/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="styles_delta.css" media="screen" />
+    <!-- p5.js begin -->
+    <!-- 1) use p5.min.js for optimizing size/transfer -->
+    <script src="../p5.min.js"></script>
+    <!-- 2) use p5.js for debugging -->
+    <!-- <script src="../p5.js"></script> -->
+    <!-- p5.js end-->
+    <script src="../fili.min.js"></script>
+    <script src="panel_delta.js"></script>
+    <script src="slider_delta.js"></script>
+    <script src="../fft.js"></script>
+    <script src="waves_delta.js"></script>
+    <script src="widget_delta.js"></script>
+    <script src="pages.js"></script>
+
+  </head>
+  <body>
+    <div id="page-container">
+      <center>
+        <div  class="tab">
+          <!--<a id="prevButton" class="button_round">&laquo; Prev </a>-->
+          <a href="../index.html" class="button_round">Home </a>
+          <!--<a id="nextButton" class="button_round">Next &raquo;</a>-->
+        </div>
+        <div  class="tabs">
+            <button class="button_round" onclick="samplingSection(event, 'Question')" id="defaultOpen">Question</button>
+
+        </div>
+        </center>
+    <!--<div id = "content-wrap" class="title qs">
+      <H1>
+        Waveforms
+      </H1>
+      <hr> 
+      <p id = "main page">
+        Leave blank
+      </p>
+    </div>-->
+    <div id="Question" class="tabcontent active">
+        <main>
+          <script>
+            widgetset = new_widget(
+                    [ new inputSigPanel()
+                    ],
+                    [ new freqSlider()
+                    , new timeZoomSlider()
+                    ]
+                    , ["original"]
+                    ,"Question"
+                    ,"qs"
+                    , 120
+                    )
+          </script>
+          <br>
+        </main>
+      </div>
+      <div id="Answer" class="tabcontent">
+      </div>
+
+
+      <script>
+        function samplingSection(evt, cityName) {
+          var i, tabcontent, tablinks;
+          tabcontent = document.getElementsByClassName("tabcontent");
+          for (i = 0; i < tabcontent.length; i++) {
+            tabcontent[i].style.display = "none";
+          }
+          tablinks = document.getElementsByClassName("button_round");
+          for (i = 0; i < tablinks.length; i++) {
+            tablinks[i].className = tablinks[i].className.replace(" active", "");
+          }
+          document.getElementById(cityName).style.display = "block";
+          evt.currentTarget.className += " active";
+        }
+
+        // Get the element with id="defaultOpen" and click on it
+        document.getElementById("defaultOpen").click();
+        var paragraph = document.getElementById("main page");
+        var initialPageNum = 0;
+        var pageNum = 0;
+
+        // Add event listener to the Next/Previous button
+        document.getElementById("nextButton").addEventListener("click", nextPage);
+        document.getElementById("prevButton").addEventListener("click", prevPage);
+
+        function questionlist(evt, questions) {
+          var i, tabcontent, tablinks;
+          tabcontent = document.getElementsByClassName("tab_questions_content");
+          for (i = 0; i < tabcontent.length; i++) {
+            tabcontent[i].style.display = "none";
+          }
+          tablinks = document.getElementsByClassName("ques");
+          for (i = 0; i < tablinks.length; i++) {
+            tablinks[i].className = tablinks[i].className.replace(" active", "");
+          }
+          document.getElementById(questions).style.display = "block";
+          evt.currentTarget.className += " active";
+        }
+        // document.getElementById("defaulthover").click();
+      </script>
+  </body>
+</html>