fix minor issues

Author: ArdenButterfield

LICENSE

@@ -2,7 +2,7 @@ This software is licensed under the MIT License.
 
 fft.js copyright Fedor Indutny, 2017.
 fili.js copyright (c) 2014 Florian Markert
-All other files copyright (c) 2020 The Input Devices and Musical Interaction Laboratory (IDMIL), McGill University
+All other files copyright (c) 2020-2026 The Input Devices and Musical Interaction Laboratory (IDMIL), McGill University, and the Centre for Interdisciplinary Research in Music Media and Technology (CIRMMT).
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

all-panels/index.html

@@ -69,8 +69,7 @@ <h2>Filter</h2>
               <div class="slider" id="antialiasing-filter-order-slider"></div>
               <div class="slider" id="filter-type-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>
+            <button class="play-button" id="play-filtered-input">Play</button>
           </div>
         </div>
         <div class="section" id="samplerate-section">
@@ -88,42 +87,29 @@ <h2>Sample Rate</h2>
             <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="section" id="quantization-section">
           <div class="titlebar">
             <div class="section-title">
-              <h2>Dither</h2>
+              <h2>Dither Quantization</h2>
             </div>
-            <button class="collapse-button" id="coll-dither" onclick="collapseClick(this.id)"></button>
-
+            <button class="collapse-button" id="coll-quantization" onclick="collapseClick(this.id)"></button>
           </div>
           <div class="collapse">
             <div class="row panels">
               <div class="panel" id="dither-histogram"></div>
+              <div class="panel" id="downsampled-quantized"></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="dither-slider"></div>
               <div class="slider" id="quantization-slider"></div>
             </div>
-            <button class="play-button" id="play-quantized-noise">Play</button>
+            <button class="play-button" id="play-quantized-noise">Play quantization noise</button>
           </div>
         </div>
         <div class="section" id="reconstructed-section">

panel.js

@@ -143,8 +143,6 @@ class Panel {
 
     const increment = Math.max(1, Math.floor(0.5/iToXScale));
 
-    console.log("inc", increment, "scale", iToXScale);
-
     for (let i = 0; i < signal.length; i += increment) {
       let x = i * iToXScale;
       let pixel_amp = signal[i] * pixel_per_fullscale;
@@ -698,6 +696,7 @@ class QuantNoisePanel extends Panel{
     this.description = 'This plot shows the difference between the sampled signal before and after quantization, representing the error introduced by the quantization process. '
         + time_ticks_doc + amp_ticks_doc + midline_doc;
   }
+
   drawPanel(){
     this.drawDiscreteSignal(this.settings.buffers.quantNoise.display);
     this.drawMidLine();
@@ -707,6 +706,25 @@ class QuantNoisePanel extends Panel{
       }
 }
 
+class QuantizedSignalPanel extends Panel{
+  constructor(){
+    super()
+    this.strokeWeight=1;
+    this.ellipseSize=5;
+    this.name ="Quantized Signal";
+    this.description = 'This plot shows the quantized signal in the time domain. '
+        + time_ticks_doc + amp_ticks_doc + midline_doc;
+  }
+
+  drawPanel(){
+    this.drawDiscreteSignal(this.settings.buffers.downsampledWithQuantization.display);
+    this.drawMidLine();
+    this.drawName();
+    this.drawSignalAmplitudeTicks(this.plotHeight/2, 4);
+    this.drawTimeTicks(this.numTimeTicks/this.settings.timeZoom, 1/(this.settings.timeZoom*this.settings.sampleRate));
+      }
+}
+
 class QuantNoiseFFTPanel extends FreqPanel {
   constructor(){
     super();
@@ -781,7 +799,6 @@ class AllSignalsPanel extends Panel {
     this.name = "Input (solid), Sampled (lollipop), Reconstructed (dotted), Time Domain";
     this.description = 'This plot combines the input signal, sampled signal, and reconstructed signal time domain plots. See the documentation for each individual plot for more information. ';
     this.ellipseSize = 5;
-
   }
 
   drawPanel() {
@@ -794,5 +811,5 @@ class AllSignalsPanel extends Panel {
     this.drawName();
     this.drawSignalAmplitudeTicks(this.plotHeight/2, 4);
     this.drawTimeTicks(this.numTimeTicks/this.settings.timeZoom, 1/(this.settings.timeZoom*this.settings.sampleRate));
-      }
+  }
 }

slider.js

@@ -53,7 +53,7 @@ class RangedSlider extends Slider {
     // this.button.size(200)
     this.button.mousePressed(this.buttonPressed.bind(this));
     this.button.mouseReleased(this.onEdit.bind(this));
-  }
+    }
 
   resize(x, y, w, p){
     let width = w - (20 + this.labelWidth + this.sliderWidth);
@@ -93,14 +93,20 @@ class AudioInputTypeSlider extends Slider{
     this.inputSelect.option("cello");
     this.inputSelect.option("drums");
     this.inputSelect.option("sweep");
-    this.inputSelect.changed(()=>this.settings.inputType = this.inputSelect.value());
+    this.inputSelect.changed(()=>{
+      this.settings.inputType = this.inputSelect.value();
+      this.onEdit();
+    });
 
     this.oddEvenSel = p.createSelect();
     this.oddEvenSel.option("All");
     this.oddEvenSel.option("Odd");
     this.oddEvenSel.option("Even");
     this.oddEvenSel.selected(this.settings.harmType);
-    this.oddEvenSel.changed(()=>this.settings.harmType = this.oddEvenSel.value());
+    this.oddEvenSel.changed(()=>{
+      this.settings.harmType = this.oddEvenSel.value();
+      this.onEdit();
+    });
 
     this.slopeSel = p.createSelect();
     this.slopeSel.option("1/x");
@@ -115,7 +121,10 @@ class AudioInputTypeSlider extends Slider{
     this.slopeSel.option("vowel o");
     this.slopeSel.option("vowel u");
     this.slopeSel.selected(this.settings.harmSlope);
-    this.slopeSel.changed(()=>this.settings.harmSlope = this.slopeSel.value());
+    this.slopeSel.changed(()=>{
+      this.settings.harmSlope = this.slopeSel.value();
+      this.onEdit();
+    });
   }
 
   resize(x, y, w, p) {
@@ -140,7 +149,10 @@ class FilterTypeSlider extends Slider {
     this.inputSelect = p.createSelect();
     this.inputSelect.option("FIR");
     this.inputSelect.option("Butterworth");
-    this.inputSelect.changed(() => this.settings.filterType = this.inputSelect.value());
+    this.inputSelect.changed(() => {
+      this.settings.filterType = this.inputSelect.value();
+      this.onEdit();
+    });
   }
 
   resize(x, y, w, p) {
@@ -274,7 +286,10 @@ class DitherSlider extends RangedSlider {
     this.ditherTypeSel.option("Gaussian");
 
     this.ditherTypeSel.selected(this.settings.ditherType);
-    this.ditherTypeSel.changed(()=>this.settings.ditherType = this.ditherTypeSel.value());
+    this.ditherTypeSel.changed(()=>{
+      this.settings.ditherType = this.ditherTypeSel.value();
+      this.onEdit();
+    });
 
     this.makeSlider(p);
   }
@@ -315,6 +330,16 @@ class BitDepthSlider extends RangedSlider {
     this.makeSlider(p);
   }
 
+  calcSliderVal(){
+    // override this with any calculations needed to convert textbox val to slider val (%, etc)
+    return this.textBox.value() === "unquantized" ? 16 : this.textBox.value();
+  }
+  calcDisplayVal(){
+    // override this with any calculations needed to convert stored variable to display val (%, etc)
+    return this.settings[this.propName] >= 16 ? "unquantized" : this.settings[this.propName];
+  }
+
+
 }
 
 class AmplitudeSlider extends RangedSlider {

waves.js

@@ -529,17 +529,23 @@ function downsampleWithQuantization(settings, fft, playback) {
   // downsampling factor
   let original = playback ? settings.buffers.original.playback : settings.buffers.original.display;
 
-  if (playback) {
+  if (playback && settings.buffers.downsampled.playback.length !== Math.round(original.length / settings.downsamplingFactor)) {
+
     settings.buffers.downsampled.playback = new Float32Array(Math.round(original.length / settings.downsamplingFactor));
+    settings.buffers.downsampledWithQuantization.playback = new Float32Array(Math.round(original.length / settings.downsamplingFactor));
     settings.buffers.quantNoise.playback = new Float32Array(Math.round(original.length / settings.downsamplingFactor));
-  } else {
+
+  } else if (settings.buffers.downsampled.display.length !==Math.round(original.length / settings.downsamplingFactor)) {
+
     settings.buffers.downsampled.display = new Float32Array(Math.round(original.length / settings.downsamplingFactor));
+    settings.buffers.downsampledWithQuantization.display = new Float32Array(Math.round(original.length / settings.downsamplingFactor));
     settings.buffers.quantNoise.display = new Float32Array(Math.round(original.length / settings.downsamplingFactor));
   }
 
   let reconstructed = playback ? settings.buffers.reconstructed.playback : settings.buffers.reconstructed.display;
   let stuffed = playback ? settings.buffers.stuffed.playback : settings.buffers.stuffed.display;
   let downsampled = playback ? settings.buffers.downsampled.playback : settings.buffers.downsampled.display;
+  let downsampledWithQuantization = playback ? settings.buffers.downsampledWithQuantization.playback : settings.buffers.downsampledWithQuantization.display;
   let quantNoise = playback ? settings.buffers.quantNoise.playback : settings.buffers.quantNoise.display;
   let quantNoiseStuffed = playback ? settings.buffers.quantNoiseStuffed.playback : settings.buffers.quantNoise.display;
 
@@ -587,6 +593,7 @@ function downsampleWithQuantization(settings, fft, playback) {
     // sparsely fill the reconstruction buffer to avoid having to zero-stuff
     reconstructed[n * settings.downsamplingFactor] = quantized;
     arr[n] = y;
+    downsampledWithQuantization[n] = quantized;
     stuffed[n * settings.downsamplingFactor] = quantized * settings.downsamplingFactor;
 
     // record the quantization error

widget.js

@@ -31,9 +31,10 @@ function getDefaultSettings() {
       original: createBuffers(),
       filterKernel: createBuffers(),
       stuffed: createBuffers(),
+      downsampled: createBuffers(),
       quantNoise: createBuffers(),
       quantNoiseStuffed: createBuffers(),
-      downsampled: createBuffers(),
+      downsampledWithQuantization : createBuffers(),
       reconstructed: createBuffers(),
       reconstructedFiltered: createBuffers(),
       deltaSigma: createBuffers()
@@ -92,6 +93,7 @@ let panelIdLookups = {
   'dither-histogram' : DitherDistributionHistogramPanel,
   'quantization-noise' : QuantNoisePanel,
   'quantization-noise-fft' : QuantNoiseFFTPanel,
+  'downsampled-quantized' : QuantizedSignalPanel,
   'reconstructed' : ReconstructedSigPanel,
   'reconstructed-fft' : ReconstructedSigFFTPanel,
   'filter-kernel' : FilterKernelPanel,
@@ -199,27 +201,26 @@ function createWidgets() {
 
   const playButtons = document.getElementsByClassName('play-button');
 
-  function buttonPlayFunction(buffer) {
+  function buttonPlayFunction(buffer, samplerate=WEBAUDIO_MAX_SAMPLERATE) {
     settings.render(true);
     if (!settings.snd) settings.snd = new (window.AudioContext || window.webkitAudioContext)();
-    playWave(buffer, WEBAUDIO_MAX_SAMPLERATE, settings.snd);
+    console.log(samplerate);
+    playWave(buffer, samplerate, settings.snd);
   }
 
   for (const playButton of playButtons) {
     const id = playButton.getAttribute('id');
     if (id === "play-input") {
-        playButton.onclick = () => { buttonPlayFunction(settings.buffers.originalUnfiltered.playback)};
-    } else if (id === "play-filter-kernel") {
-      playButton.onclick = () => { buttonPlayFunction(settings.buffers.filterKernel.playback)};
+        playButton.onclick = () => { buttonPlayFunction(settings.buffers.originalUnfiltered.playback);};
     } else if (id === "play-filtered-input") {
-      playButton.onclick = () => { buttonPlayFunction(settings.buffers.original.playback)};
+      playButton.onclick = () => { buttonPlayFunction(settings.buffers.original.playback);};
     } else if (id === "play-quantized-noise") {
-      playButton.onclick = () => { buttonPlayFunction(settings.buffers.quantNoise.playback); };
+      playButton.onclick = () => { buttonPlayFunction(settings.buffers.quantNoiseStuffed.playback);};
     } else if (id === "play-reconstructed") {
-      playButton.onclick = () => { buttonPlayFunction(settings.buffers.reconstructed.playback); };
+      playButton.onclick = () => { buttonPlayFunction(settings.buffers.reconstructed.playback);};
     } else if (id === "play-delta-sigma") {
-      playButton.onclick = () => {buttonPlayFunction(settings.buffers.deltaSigma.playback)};
-    }
+      playButton.onclick = () => {buttonPlayFunction(settings.buffers.deltaSigma.playback);};
+      }
   }