add stars and velocity

2 files changed, 29 insertions, 6 deletions

diff --git a/src/relabi/canvas.js b/src/relabi/canvas.js
index 62e5442..68f18c5 100644
--- a/src/relabi/canvas.js
+++ b/src/relabi/canvas.js
@@ -34,6 +34,8 @@ export default class RelabiCanvas {
 
     // Start drawing
     this.requestAnimationFrame(0);
+
+    window.addEventListener("resize", () => this.resize());
   }
 
   /**
@@ -53,6 +55,9 @@ export default class RelabiCanvas {
     requestAnimationFrame((frame) => {
       this.requestAnimationFrame(frame);
     });
+    if (this.relabi.paused) {
+      return;
+    }
     this.paint(frame);
     this.lastFrame = frame;
   }
@@ -211,7 +216,7 @@ export default class RelabiCanvas {
         continue;
       }
       ctx.beginPath();
-      ctx.arc(x, y, NOTE_RADIUS, 0, 2 * Math.PI);
+      ctx.arc(x - NOTE_RADIUS / 2, y, NOTE_RADIUS, 0, 2 * Math.PI);
       ctx.fillStyle = direction
         ? `rgba(255,96,128,${opacity})`
         : `rgba(128,255,96,${opacity})`;
diff --git a/src/relabi/index.js b/src/relabi/index.js
index b77a83f..2dd6222 100644
--- a/src/relabi/index.js
+++ b/src/relabi/index.js
@@ -5,6 +5,7 @@
 import * as Tone from "tone";
 import RelabiCanvas from "./canvas";
 import * as Instruments from "../lib/instruments";
+import { clamp, randrange } from "../lib/util";
 
 const TWO_PI = 2 * Math.PI;
 
@@ -39,6 +40,7 @@ export default class Relabi {
     this.bounds = bounds;
     this.settings = settings;
     this.previousValue = null;
+    this.paused = false;
     this.canvas = new RelabiCanvas({ relabi: this, parent });
   }
 
@@ -49,6 +51,9 @@ export default class Relabi {
     console.log("Start Relabi");
     this.stop();
     this.clock = new Tone.Clock((time) => {
+      if (this.paused) {
+        return;
+      }
       const values = this.generate(time);
       const notes = this.play(values);
       this.canvas.append(time, values, notes);
@@ -123,6 +128,7 @@ export default class Relabi {
     let previousValue = this.previousValue;
     let index;
     let step;
+    let lastTrigger = 0;
     let noteCount = 0;
     const notes = [];
 
@@ -133,13 +139,18 @@ export default class Relabi {
       // Compute whether we crossed a boundary, and which direction
       for (index = 0; index < boundsCount; index += 1) {
         const bound = this.bounds[index];
+        const slope = value - previousValue;
         if (
           value < bound.level &&
           bound.level < previousValue &&
           previousValue !== null
         ) {
           // Going down
-          this.trigger(time, bound.sounds[0]);
+          if (step - lastTrigger < randrange(3, 6)) {
+            continue;
+          }
+          lastTrigger = step;
+          this.trigger(time, bound.sounds[0], slope);
           notes.push([time, bound.level, true]);
           noteCount += 1;
         } else if (
@@ -148,7 +159,11 @@ export default class Relabi {
           previousValue !== null
         ) {
           // Going up
-          this.trigger(time, bound.sounds[1]);
+          if (step - lastTrigger < randrange(3, 6)) {
+            continue;
+          }
+          lastTrigger = step;
+          this.trigger(time, bound.sounds[1], slope);
           notes.push([time, bound.level, false]);
           noteCount += 1;
         }
@@ -168,12 +183,15 @@ export default class Relabi {
   /**
    * Trigger an event
    */
-  trigger(time, sound) {
+  trigger(time, sound, slope) {
     // console.log("trigger index", index, time);
+    const velocity = clamp(Math.abs(slope * 10), 0, 1);
+
+    console.log(velocity.toFixed(3));
     if (sound.instrument in Instruments) {
-      Instruments[sound.instrument].play(time, sound);
+      Instruments[sound.instrument].play(time, sound, velocity);
     } else {
-      sound.instrument.play(time, sound);
+      sound.instrument.play(time, sound, velocity);
     }
   }
 }