aliasing on minimap + waveform

hoch · Apr 16, 2015 · 6283b45 · 6283b45
1 parent 6c8cafc
commit 6283b45
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 43 deletions.
diff --git a/app/canopy-polymer/gist-loader.html b/app/canopy-polymer/gist-loader.html
@@ -27,9 +27,10 @@
       }
 
       paper-input {
-        width: 100%;
+        width: 75%;
         font-size: 14px;
         margin-bottom: 20px;
+        margin-right: 10px;
       }
 
       core-item {
@@ -38,7 +39,11 @@
       }
 
       core-icon {
-        margin-right: 8px;
+        /*margin-right: 8px;*/
+      }
+
+      a {
+        text-decoration: none;
       }
     </style>
 
@@ -49,11 +54,15 @@
     <section>
       <core-menu>
         <core-label>Gist ID</core-label>
-        <paper-input id="gistInput" value="{{ gistId }}" 
-          on-change="{{ onGistIDChanged }}">
+        <paper-input id="gistInput" value="{{ gistId }}"
+          on-change="{{ onGistIDChanged }}" flex>
         </paper-input>
+        <a href="{{ gistURL }}" target="_blank">
+          <core-icon icon="link"></core-icon>
+        </a>
         <template id="gistList" repeat="{{ model }}">
-          <core-item icon="description" label="{{ name }}" on-click="{{ onItemClicked }}">
+          <core-item icon="description" label="{{ name }}" 
+            on-click="{{ onItemClicked }}">
           </core-item>
         </template>
       </core-menu>
@@ -67,6 +76,7 @@
       // Default gist repository: 'hoch@github'
       gistId: null,
       lastSuccessfulGistId: '5d2bfc3d7d6ee009ac2c',
+      gistURL: null,
 
       // Callback when a file is loaded.
       onFileLoaded: null,
@@ -98,6 +108,7 @@
 
       setGistId: function (id) {
         this.gistId = (id || this.gistId || this.lastSuccessfulGistId);
+        this.gistURL = 'https://gist.github.com/' + this.lastSuccessfulGistId;
         this.$.gistXHR.url = 'https://api.github.com/gists/' + this.gistId;
         this.$.gistXHR.go();
       },

diff --git a/app/js/MiniMap.js b/app/js/MiniMap.js
@@ -74,22 +74,30 @@
     // Draw waveform.
     this.ctx.beginPath();
     this.ctx.lineWidth = 1.0;
+
     // TO FIX: use both channel.
-    var chanL = this.renderedBuffer.getChannelData(0);
-    var maxSample, maxSampleIndex;
-    for (var i = 0; i < chanL.length; i++) {
-      // Find the max sample and index in sub-pixel sample elements.
-      var sample = Math.abs(chanL[i]);
-      if (maxSample < sample) {
-        maxSample = sample;
-        maxSampleIndex = i;
-      }
+    var data = this.renderedBuffer.getChannelData(0);
+    var posSample = 0.0, negSample = 0.0, sample;
+    var maxSampleIndex;
+    var y_posOffset, y_negOffset;
+
+    for (var i = 0; i < data.length; i++) {
+      // Pick each sample from positive and negative values.
+      sample = data[i];
+      if (sample > posSample)
+        posSample = sample;
+      else if (sample < negSample)
+        negSample = sample;
       // Draw a line when it passes one pixel boundary.
       if (x - px >= 1) {
-        y_length = (1 - chanL[maxSampleIndex]) * y_origin;
-        this.ctx.moveTo(x, y_origin);
-        this.ctx.lineTo(x, y_length);
-        maxSample = 0;
+        y_posOffset = (1 - posSample) * y_origin;
+        y_negOffset = (1 - negSample) * y_origin;
+
+        this.ctx.moveTo(x, y_posOffset);
+        this.ctx.lineTo(x, y_origin);
+        this.ctx.lineTo(x, y_negOffset);
+
+        posSample = negSample = 0.0;
         px = x;
       }
       x += this.pixelPerSample;

diff --git a/app/js/Specgram.js b/app/js/Specgram.js
@@ -3,7 +3,7 @@
 
   // Specgram style.
   var STYLE = {
-    height: 256,
+    height: 192,
     color: '#4CAF50',
     colorBackground: '#ECEFF1'
   };
@@ -106,7 +106,8 @@
         this.mags[b] = this.mags[b] * SMOOTHING_CONSTANT + mag * (1.0 - SMOOTHING_CONSTANT);
 
         // Draw the bin based on HSL color model.
-        this.ctx.fillStyle = 'hsl(' + this.mags[b] * 360 + ', 100%, ' + this.mags[b] * 75 + '%)';
+        var hue = (1 - this.mags[b]) * 240;
+        this.ctx.fillStyle = 'hsl(' + hue + ', 100%, ' + this.mags[b] * 50 + '%)';
         this.ctx.fillRect(h * unitX, STYLE.height - b * unitY, unitX, unitY);
       }
     }

diff --git a/app/js/Waveform.js b/app/js/Waveform.js
@@ -5,7 +5,7 @@
 
   // Styles.
   var STYLE = {
-    height: 256, // Height of single channel rendering.
+    height: 192, // Height of single channel rendering.
     color: '#03A9F4',
     colorBackground: '#FFF',
     colorCenterLine: '#B0BEC5',
@@ -20,8 +20,8 @@
   };
 
   // Grid size based on the zoom level. (in samples)
-  var GRIDS = [10000, 2500, 500, 250, 100, 50, 25];
-  var MIN_SAMPLES_IN_VIEWPORT = 512;
+  var GRIDS = [10000, 2048, 512, 256, 128, 64, 32];
+  var MIN_SAMPLES_IN_VIEWPORT = 128;
 
 
   /**
@@ -101,10 +101,9 @@
 
     for (var channel = 0; channel < this.renderedBuffer.numberOfChannels; channel++) {
       var data = this.renderedBuffer.getChannelData(channel);
-      var maxSample, maxSampleIndex;
       var y_origin = STYLE.height * 0.5;
       var y_length;
-      var x = 0, px = 0;
+      var x = 0, px = -1, i;
 
       if (channel) {
         this.ctx.save();
@@ -121,25 +120,59 @@
       // Draw waveform.
       this.ctx.strokeStyle = this.ctx.fillStyle = STYLE.color;
       this.ctx.beginPath();
-      for (var i = this.viewStart; i < this.viewEnd; i++) {
-        // Find the max sample and index in sub-pixel sample elements.
-        var sample = Math.abs(data[i]);
-        if (maxSample < sample) {
-          maxSample = sample;
-          maxSampleIndex = i;
-        }
-        // Draw only when the advance is bigger than one pixel.
-        if (x - px >= 1) {
-          y_length = (1 - data[maxSampleIndex]) * y_origin;
-          this.ctx.lineTo(x, y_length);
-          // Draw sample dots beyond 1.5x zoom.
-          if (this.pixelPerSample > 1.5)
-            this.ctx.fillRect(x - 1.5, y_length - 1.5, 3, 3);
-          maxSample = 0;
-          px = x;
+
+      var posSample = 0.0, negSample = 0.0, sample;
+      var maxSampleIndex;
+      var y_posOffset, y_negOffset;
+
+      // If PPS is smaller than 1.0 (zoomed-out), use sub-sampling to draw.
+      // Otherwise, use super-sampling and interpolation with lineTo().
+      if (this.pixelPerSample <= 1.0) {
+        for (i = this.viewStart; i < this.viewEnd; i++) {
+          // Pick each sample from positive and negative values.
+          sample = data[i];
+          if (sample > posSample)
+            posSample = sample;
+          else if (sample < negSample)
+            negSample = sample;
+
+          // Draw only when the advance is bigger than one pixel.
+          if (x - px >= 1) {
+            // Draw the positive sample.
+            y_posOffset = (1 - posSample) * y_origin;
+            y_negOffset = (1 - negSample) * y_origin;
+
+            this.ctx.moveTo(x, y_posOffset);
+            this.ctx.lineTo(x, y_origin);
+            this.ctx.lineTo(x, y_negOffset);
+
+            posSample = negSample = 0.0;
+            px = x;
+          }
+          x += this.pixelPerSample;
         }
-        x += this.pixelPerSample;
-      }
+      } else {
+        for (i = this.viewStart; i < this.viewEnd; i++) {
+          // Find the max sample and index in sub-pixel sample elements.
+          sample = Math.abs(data[i]);
+          if (sample > posSample) {
+            posSample = sample;
+            maxSampleIndex = i;
+          }
+          // Draw only when the advance is bigger than one pixel.
+          if (x - px >= 1) {
+            y_length = (1 - data[maxSampleIndex]) * y_origin;
+            this.ctx.lineTo(x, y_length);
+            // Draw sample dots beyond 1.25x zoom.
+            if (this.pixelPerSample > 1.25)
+              this.ctx.fillRect(x - 1.5, y_length - 1.5, 3, 3);
+            posSample = 0;
+            px = x;
+          }
+          x += this.pixelPerSample;
+        }  
+      }   
+
       this.ctx.stroke();
 
       if (channel)