Color gradients for squares/circles #27

sonph · Apr 23, 2020 · f72ae94 · f72ae94
1 parent 8f1c399
commit f72ae94
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/js/viz_circles.js b/src/js/viz_circles.js
@@ -1,3 +1,5 @@
+import * as u from './utils.js';
+
 export default class Circles {
   constructor(canvas, options={}) {
     this.canvas = canvas;
@@ -56,10 +58,9 @@ export default class Circles {
   }
 
   getColor(noteNumber) {
-    if (noteNumber == 0) {
-      return '#E74C3C';
-    }
-    return '#95A5A6';
+    return u.sprintf(
+        'rgb($, $, $)',
+        50, 150, Math.floor(255 - (255 / this.numBeats) * noteNumber));
   }
 
   /** Change how many beats per measure. */

diff --git a/src/js/viz_squares.js b/src/js/viz_squares.js
@@ -1,3 +1,5 @@
+import * as u from './utils.js';
+
 export default class Squares {
   constructor(canvas, options={}) {
     this.canvas = canvas;
@@ -41,10 +43,9 @@ export default class Squares {
   }
 
   getColor(noteNumber) {
-    if (noteNumber == 0) {
-      return '#E74C3C';
-    }
-    return '#95A5A6';
+    return u.sprintf(
+        'rgb($, $, $)',
+        50, 150, Math.floor(255 - (255 / this.numBeats) * noteNumber));
   }
 
   /** Change how many beats per measure. */