Shave some bits

[rbdr/fyr] / js / fyr.js

diff --git a/js/fyr.js b/js/fyr.js
index e6c727cbe4c857a04bc82ec4fd7d2a3ee4c0f662..7e7d94ba678e5d9c965539100a02fab12eb7148f 100644 (file)
--- a/js/fyr.js
+++ b/js/fyr.js
@@ -3,14 +3,15 @@ var color = document.querySelector('.color'),
     timeline = document.querySelector('.timeline'),
     clear = document.querySelector('.clear'),
     colors = [],
-    selecting = false,
-    recording = false,
+    selecting = 0,
+    recording = 0,
     animationTime = 0,
     lastFrame = 0,
     t = null,
     h = 0,
     s = 100,
-    l = 50;
+    l = 50,
+    {round, min, max} = Math;
 
 function render() {
   color.style.backgroundColor = `hsl(${h} ${s}% ${l}%)`;
@@ -21,11 +22,11 @@ function renderTimeline() {
   var background = 'linear-gradient(90deg,',
       last = 0;
   for (var {h, s, l, t: now} of colors) {
-    background += `hsl(${h} ${s}% ${l}%) ${Math.round(100*last/3000)}%,`;
-    background += `hsl(${h} ${s}% ${l}%) ${Math.round(100*(last+now)/3000)}%,`;
+    background += `hsl(${h} ${s}% ${l}%) ${round(100*last/3000)}%,`;
+    background += `hsl(${h} ${s}% ${l}%) ${round(100*(last+now)/3000)}%,`;
     last += now;
   }
-  background += `black ${Math.round(100*last/3000)}%, black 101%)`;
+  background += `black ${round(100*last/3000)}%, black 101%)`;
   timeline.style.background = background;
 }
 
@@ -43,12 +44,12 @@ function record() {
   var c = colors[colors.length - 1],
       l = length();
   if (c.h !== h || c.s !== s || c.l !== l) {
-    c.t = Math.min(3000, Date.now() - t);
+    c.t = min(3000, Date.now() - t);
     addColor();
     c = colors[colors.length - 1];
   }
   if (l >= 3000) return;
-  c.t = Math.min(3000, Date.now() - t);
+  c.t = min(3000, Date.now() - t);
   renderTimeline();
 }
 
@@ -72,34 +73,34 @@ function preview(current) {
 }
 
 color.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
-  h = Math.round(360 * x / 200);
-  s = Math.round(100 * (200 - y) / 200);
+  h = round(360 * x / 200);
+  s = round(100 * (200 - y) / 200);
   render();
 });
 
 color.addEventListener('wheel', ({deltaY: y}) => {
-  selecting = true;
-  l = Math.min(Math.max(0, l + y/4), 100)
+  selecting = 1;
+  l = min(max(0, l + y/4), 100)
   render();
 });
 
 color.addEventListener('mousedown', () => {
   addColor();
-  recording = true;
+  recording = 1;
   setTimeout(record, 100);
 });
 
 color.addEventListener('mouseup', () => {
-  recording = false;
+  recording = 0;
 });
 
 color.addEventListener('mouseenter', () => {
-  selecting = true;
+  selecting = 1;
 });
 
 color.addEventListener('mouseout', () => {
-  recording = false;
-  selecting = false;
+  recording = 0;
+  selecting = 0;
   window.requestAnimationFrame(preview);
 });