From 3c901f7e9b3be7fdbe22d028f20146f72037c8f7 Mon Sep 17 00:00:00 2001
From: Nicholas Koh <wasabigeek@users.noreply.github.com>
Date: Mon, 27 Jul 2020 22:29:35 +0800
Subject: [PATCH] Show displacement in notation

---
 index.html    | 17 ++++++++-------
 js/Notator.js | 57 ++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index cb24a77..51dcc1e 100644
--- a/index.html
+++ b/index.html
@@ -244,10 +244,18 @@ <h3><span class="text-gray-600">Roadmap:</span></h3>
         var newScore = new Orchestrator({ drumset: drumset, allowedOrchestrations: orchestrations })
           .orchestrate(sticking);
 
-        return newScore.map(function(grouping) {
+        newScore = newScore.map(function(grouping) {
           grouping.setDuration(DURATION_SIXTEENTH);
           return grouping;
         });
+
+        newScore = new Displacer({ drumset: drumset })
+          .displace(
+            newScore,
+            { counts: document.getElementById('displacement').value }
+          );
+
+        return newScore;
       }
 
       var newSticking = document.getElementById('sticking').value;
@@ -263,12 +271,7 @@ <h3><span class="text-gray-600">Roadmap:</span></h3>
         var tempo = document.getElementById('tempo').value;
         var groove = null;
 
-        var playbackScore = new Displacer({ drumset: drumset })
-          .displace(
-            score,
-            { counts: document.getElementById('displacement').value }
-          );
-        player.play(playbackScore, { tempo: tempo })
+        player.play(score, { tempo: tempo })
       }
 
       document.getElementById('shuffleForm').onsubmit = function(e) {
diff --git a/js/Notator.js b/js/Notator.js
index 58dcfea..09fc471 100644
--- a/js/Notator.js
+++ b/js/Notator.js
@@ -4,7 +4,7 @@ function Notator(options) {
       elementId: options.elementId,
       backend: Vex.Flow.Renderer.Backends.SVG,
       width: 500,
-      height: 120,
+      height: 300,
     },
   });
 
@@ -17,9 +17,7 @@ function Notator(options) {
     FLOOR_TOM: 'a/4',
   }
 
-  this.toNotation = function(noteGroup) {
-    var keys = noteGroup.notes.map(function(note) { return note.verticalPosition });
-
+  this.toDuration = function(noteGroup) {
     var vfDuration;
     switch (noteGroup.duration) {
       case DURATION_EIGHTH:
@@ -32,34 +30,55 @@ function Notator(options) {
         break;
     }
 
+    return vfDuration;
+  }
+
+  this.toNotation = function(noteGroup) {
+    var keys = noteGroup.notes.map(function(note) { return note.verticalPosition });
+
     return {
       keys: keys,
-      duration: vfDuration
+      duration: this.toDuration(noteGroup)
     }
   }
 
+  this.addStave = function(subScore, staveOptions = {}) {
+    var stave = this.vf.Stave(staveOptions)
+      .addClef('percussion')
+      .addTimeSignature('4/4');
+
+    var tickables = [];
+    for (var noteGroup of subScore) {
+      tickables.push(this.vf.StaveNote(this.toNotation(noteGroup)));
+    }
+
+    var voice0 = this.vf.Voice().addTickables(tickables);
+    this.vf.Beam({ notes: voice0.getTickables() });
+
+    this.vf.Formatter()
+      .joinVoices(this.vf.getVoices())
+      .formatToStave(this.vf.getVoices(), stave);
+
+    return stave;
+  }
 
   this.generateNotation = function(score) {
     var context = this.vf.getContext()
     context.clear();
 
-    var stave = this.vf.Stave()
-    .addClef('percussion')
-    .addTimeSignature('4/4');
+    var totalSixteenths = 0;
+    var subScore1 = [];
+    var subScore2 = score.slice();
+    do {
+      var noteGroup = subScore2.shift();
+      totalSixteenths += 1 / this.toDuration(noteGroup) * 16
 
-    if (score.length > 0) {
-      var tickables = [];
-      for (var noteGroup of score) {
-        tickables.push(this.vf.StaveNote(this.toNotation(noteGroup)));
-      }
+      subScore1.push(noteGroup)
+    } while (totalSixteenths < 16)
 
-      var voice0 = this.vf.Voice().addTickables(tickables);
-      this.vf.Beam({ notes: voice0.getTickables() });
+    this.addStave(subScore1, { y: 30} );
+    this.addStave(subScore2, { y: 180 });
 
-      this.vf.Formatter()
-        .joinVoices(this.vf.getVoices())
-        .formatToStave(this.vf.getVoices(), stave);
-    }
     this.vf.draw();
   }
 }