diff options
| author | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2023-07-20 21:19:07 +0200 |
|---|---|---|
| committer | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2023-07-20 21:19:07 +0200 |
| commit | daa39f0d1b9686761b45bef7c78db8051b81c8e1 (patch) | |
| tree | 9d029e168b8114072ef8f4c2bd43c4c4d28c7701 /js | |
| parent | 3ec245a003e4e0cdecc9d58c1cac8b1b0f081fb4 (diff) | |
Diffstat (limited to 'js')
| -rw-r--r-- | js/fyr.js | 35 |
1 files changed, 18 insertions, 17 deletions
@@ -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); }); |