X-Git-Url: https://git.r.bdr.sh/rbdr/fyr/blobdiff_plain/3ec245a003e4e0cdecc9d58c1cac8b1b0f081fb4..daa39f0d1b9686761b45bef7c78db8051b81c8e1:/js/fyr.js diff --git a/js/fyr.js b/js/fyr.js index e6c727c..7e7d94b 100644 --- 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); });