add note margin

app_manager.js

@@ -351,6 +351,11 @@ class AppManager {
     tempoInput.addEventListener('change', (event) => {
       this.tempo = parseInt(event.target.value);
     });
+    noteMarginInput.addEventListener('change', (event) => {
+      this.painter.config.noteMargin = parseInt(event.target.value);
+      this.painter.updateWidth();
+      this.reset(true);
+    });
     weirdModeInput.addEventListener('change', (event) => {
       this.weirdMode = this.painter.config.weirdMode = event.target.checked;
       if (this.painter.config.weirdMode) {

bach.html

@@ -25,6 +25,10 @@ <h3>Piano roll</h3>
         <label>Note height (px)</label>
         <input id="noteHeightInput" type="number" value="8" min="0" max="200" step="1">
       </div>
+      <div class="setting">
+        <label>Note margin (px)</label>
+        <input id="noteMarginInput" type="number" value="0" min="0" max="200" step="1">
+      </div>
       <div class="setting">
         <label>Animate speed (ms)</label>
         <input id="playSpeedInput" type="number" value="500" min="0" max="5000" step="50">

bach_duo.html

@@ -25,6 +25,10 @@ <h3>Piano roll</h3>
         <label>Note height (px)</label>
         <input id="noteHeightInput" type="number" value="8" min="0" max="200" step="1">
       </div>
+      <div class="setting">
+        <label>Note margin (px)</label>
+        <input id="noteMarginInput" type="number" value="0" min="0" max="200" step="1">
+      </div>
       <div class="setting">
         <label>Animate speed (ms)</label>
         <input id="playSpeedInput" type="number" value="500" min="0" max="5000" step="50">

painter_bach.js

@@ -10,7 +10,7 @@ class PainterBach extends PainterBase {
     // Add some Bach-specific settings.
     this.config.noteHeight = 8;
     this.config.noteWidth = 20;
-    
+
     if (isDouble) {
       this.config.svgPadding = 200;
     }
@@ -19,15 +19,15 @@ class PainterBach extends PainterBase {
   }
 
   updateWidth() {
-    this.width = this.steps * this.config.noteWidth;
-    
+    this.width = this.steps * (this.config.noteWidth + this.config.noteMargin);
+
     // Add some padding at the top.
     this.height = (this.maxPitch - this.minPitch) * this.config.noteHeight + this.config.svgPadding;
     this.svg.setAttribute('width', this.width);
-    
+
     // Add some padding at the bottom (but dont include it in math calculations)
     this.svg.setAttribute('height', this.height + this.config.svgPadding);
-    
+
     this.config.heatmapSquare = this.width / this.steps;
     this.heatmap.setAttribute('width', this.width);
     this.heatmap.setAttribute('height', this.config.heatmapSquare * this.steps);
@@ -36,12 +36,12 @@ class PainterBach extends PainterBase {
   paintMusic(pitches) {
     this.stepToRectMap = {};
     this.clear();
-    
+
     // There are 4 voices, and their pitches come in sequence.
     let step = 0;
     let voice = 0;
     for (let i = 0; i < pitches.length; i++) {
-      const x = step * this.config.noteWidth;
+      const x = step * (this.config.noteWidth + this.config.noteMargin);
       const rect = this.drawNoteBox(pitches[i], x, this.config.noteWidth, i);
       this.stepToRectMap[i] = rect;
       rect.setAttribute('stepEnd', step+1);
@@ -54,5 +54,5 @@ class PainterBach extends PainterBase {
       }
     }
   }
- 
+
 }

painter_base.js

@@ -15,7 +15,8 @@ class PainterBase {
       isTop: false,
       isCircles: true,
       topNumber: 10,
-      svgPadding: 100
+      svgPadding: 100,
+      noteMargin: 0
     };
 
     // Add some padding.

painter_performance.js

@@ -11,7 +11,7 @@ class PainterPerformance extends PainterBase {
     this.velocitySVG = document.getElementById('velocities');
 
     this.config.noteHeight = 8;
-    this.config.hideGreyLines = false;
+    this.config.hideGreyLines = true;
     this.config.selfAttnOnly = true;
     this.config.timeScale = 1;
     this.config.noteWidth = 20;
@@ -20,17 +20,17 @@ class PainterPerformance extends PainterBase {
   }
 
   updateWidth() {
-    this.width = this.steps * this.config.timeScale + 50;
+    this.width = this.steps * (this.config.timeScale + this.config.noteMargin) + 50;
     // Add some padding at the top.
     this.height = (this.maxPitch - this.minPitch) * this.config.noteHeight + this.config.svgPadding;
-    
+
     this.svg.setAttribute('width', this.width);
-    
+
     // Add some padding at the bottom (but dont include it in math calculations)
     this.svg.setAttribute('height', this.height + this.config.svgPadding);
     this.velocitySVG.setAttribute('height', VELOCITY_SVG_HEIGHT);
     this.velocitySVG.setAttribute('width', this.width);
-    
+
     this.config.heatmapSquare = this.width / this.steps;
     this.heatmap.setAttribute('width', this.width);
     this.heatmap.setAttribute('height', this.config.heatmapSquare * this.steps);
@@ -39,18 +39,18 @@ class PainterPerformance extends PainterBase {
   paintMusic(events) {
     this.clear();
     this.stepToRectMap = {};
-    
+
     this.velocitySVG.innerHTML = '';
     const downNotes = {};
     let currentTime = 0;
     let previousVelocity = {x: 0, y: VELOCITY_SVG_HEIGHT};
     for (let i = 0; i < events.length; i++) {
       const event = events[i];
-      
+
       if (event.type === 'time-shift') {
         // Advance the time clock.
-        currentTime +=  event.steps * this.config.timeScale;
-        
+        currentTime +=  event.steps * (this.config.timeScale + this.config.noteMargin);
+
         // Continue this line on the whole music too.
         if (!this.config.hideGreyLines) {
           this.svg.appendChild(makeRect(null, currentTime, 0, 2, this.height, 'rgba(0, 0, 0, 0.03)', i));
@@ -85,7 +85,7 @@ class PainterPerformance extends PainterBase {
         this.finishDownNote(downNotes, pitch, currentTime);
       }
     }
-    this.placeholder = music.firstElementChild.nextElementSibling;  
+    this.placeholder = music.firstElementChild.nextElementSibling;
   }
 
   finishDownNote(notes, pitch, currentTime, index) {
@@ -103,7 +103,7 @@ class PainterPerformance extends PainterBase {
     const rect = this.drawNoteBox(pitch, note.time + halfway, halfway, index);
     this.stepToRectMap[index] = rect;
     rect.setAttribute('stepEnd', currentTime);
-    
+
     // Update the corresponding note-on to end at the halfway point.
     //const noteOn = document.querySelector(`rect[data-index="${note.i}"]`);
     const noteOn = this.stepToRectMap[note.i];

performance.html

@@ -26,6 +26,10 @@ <h3>Piano roll</h3>
         <label>Note height (px)</label>
         <input id="noteHeightInput" type="number" value="8" min="0" max="200" step="1">
       </div>
+      <div class="setting">
+        <label>Note margin (px)</label>
+        <input id="noteMarginInput" type="number" value="0" min="0" max="200" step="1">
+      </div>
       <div class="setting">
         <label>Hide grey lines</label>
         <input id="greyLinesInput" type="checkbox" checked>

script.js

@@ -74,8 +74,8 @@ function initPlayer() {
 
       // TODO: this is really gross.
       if (KIND === TYPES.BACH || KIND === TYPES.DOUBLE) {
-        x = note.quantizedStartStep * app.painter.config.noteWidth;
-        w = (note.quantizedEndStep - note.quantizedStartStep) * app.painter.config.noteWidth;
+        x = note.quantizedStartStep * (app.painter.config.noteWidth + app.config.notePadding);
+        w = (note.quantizedEndStep - note.quantizedStartStep) * (app.painter.config.noteWidth + app.config.notePadding);
         currentRects = music.querySelectorAll(`rect[stepEnd="${note.quantizedEndStep}"]`);
       } else {
         x = (parser.sequenceTimeOffset + note.quantizedStartStep) * app.painter.config.timeScale;