Shave some bits

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 = [],
     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,
     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}%)`;
 
 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) {
   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;
   }
     last += now;
   }

-  background += `black ${Math.round(100*last/3000)}%, black 101%)`;
+  background += `black ${round(100*last/3000)}%, black 101%)`;

   timeline.style.background = background;
 }
 
   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) {
   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;
     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();
 }
 
   renderTimeline();
 }
 


@@ -72,34 +73,34 @@ function preview(current) {
 }
 
 color.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
 }
 
 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}) => {
   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();
   render();
 });
 
 color.addEventListener('mousedown', () => {
   addColor();

-  recording = true;
+  recording = 1;

   setTimeout(record, 100);
 });
 
 color.addEventListener('mouseup', () => {
   setTimeout(record, 100);
 });
 
 color.addEventListener('mouseup', () => {

-  recording = false;
+  recording = 0;

 });
 
 color.addEventListener('mouseenter', () => {
 });
 
 color.addEventListener('mouseenter', () => {

-  selecting = true;
+  selecting = 1;

 });
 
 color.addEventListener('mouseout', () => {
 });
 
 color.addEventListener('mouseout', () => {

-  recording = false;
-  selecting = false;
+  recording = 0;
+  selecting = 0;

   window.requestAnimationFrame(preview);
 });
 
   window.requestAnimationFrame(preview);
 });