diff --git a/app_manager.js b/app_manager.js
index 4e72502..85fc07a 100644
--- a/app_manager.js
+++ b/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) {
diff --git a/bach.html b/bach.html
index 0655ac8..84c567b 100644
--- a/bach.html
+++ b/bach.html
@@ -25,6 +25,10 @@ Piano roll
+
+
+
+
diff --git a/bach_duo.html b/bach_duo.html
index 342309a..72c5356 100644
--- a/bach_duo.html
+++ b/bach_duo.html
@@ -25,6 +25,10 @@
Piano roll
+
+
+
+
diff --git a/painter_bach.js b/painter_bach.js
index d12c661..1a3aa1a 100644
--- a/painter_bach.js
+++ b/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 {
}
}
}
-
+
}
diff --git a/painter_base.js b/painter_base.js
index 16e3f10..bd921e7 100644
--- a/painter_base.js
+++ b/painter_base.js
@@ -15,7 +15,8 @@ class PainterBase {
isTop: false,
isCircles: true,
topNumber: 10,
- svgPadding: 100
+ svgPadding: 100,
+ noteMargin: 0
};
// Add some padding.
diff --git a/painter_performance.js b/painter_performance.js
index d00a83d..cdd1f2b 100644
--- a/painter_performance.js
+++ b/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];
diff --git a/performance.html b/performance.html
index 36e6cfa..9652cc5 100644
--- a/performance.html
+++ b/performance.html
@@ -26,6 +26,10 @@
Piano roll
+
+
+
+
diff --git a/script.js b/script.js
index 775bf13..0c2e62a 100644
--- a/script.js
+++ b/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;