diff options
Diffstat (limited to 'docs/assets/js')
| -rw-r--r-- | docs/assets/js/shards.js | 173 | ||||
| -rw-r--r-- | docs/assets/js/site.js | 1 |
2 files changed, 95 insertions, 79 deletions
diff --git a/docs/assets/js/shards.js b/docs/assets/js/shards.js index 1b374ee..c1f1476 100644 --- a/docs/assets/js/shards.js +++ b/docs/assets/js/shards.js @@ -1,107 +1,122 @@ -const shards = (function(){ - let count - let delay = 120 * 1000 - let els = [] - let t = 0 - let rebuilding = false - let nextTimeout - let dark, light - const bg_el = document.querySelector('.bgs') +const shards = (function () { + let count; + let delay = 120 * 1000; + let els = []; + let t = 0; + let rebuilding = false; + let nextTimeout; + let dark, light; + const bg_el = document.querySelector(".bgs"); - function init(){ - bind() - build() - step() - setTimeout(next, 20) - bg_el.classList.remove('fade') + function init() { + bind(); + build(); + step(); + setTimeout(next, 20); + bg_el.classList.remove("fade"); } - function bind(){ - document.querySelector('h1').addEventListener('click', () => { - sounds.play('click') - rebuild() - site.navigateHash('') - player.hidePlaylist() - }) + function bind() { + document.querySelector("h1").addEventListener("click", () => { + sounds.play("click"); + rebuild(); + site.navigateHash(""); + player.hidePlaylist(); + }); } - function build(){ - count = choice(is_mobile ? [5,7] : [5,7,7,11,11]) - light = cielab.gradient(count) - dark = cielab.gradient(count) - let el + function build() { + count = choice(is_mobile ? [5, 7] : [5, 7, 7, 11, 11]); + light = cielab.gradient(count); + dark = cielab.gradient(count); + let el; for (var i = 0; i < count; i++) { - el = append(i) + el = append(i); } } - function destroy(){ + function destroy() { for (var i = 0; i < count; i++) { - els[i] && bg_el.removeChild(els[i]) + els[i] && bg_el.removeChild(els[i]); } - els.length = 0 + els.length = 0; } - function rebuild(){ - if (rebuilding) return - rebuilding = true + function rebuild() { + if (rebuilding) return; + rebuilding = true; // sounds.play('click') - stars.rebuild() - next() - t = 0 - bg_el.classList.add('fade') + stars.rebuild(); + next(); + t = 0; + bg_el.classList.add("fade"); setTimeout(() => { - destroy() - build() - step() - setTimeout(next, 20) - bg_el.classList.remove('fade') - rebuilding = false + destroy(); + build(); + step(); + setTimeout(next, 20); + bg_el.classList.remove("fade"); + rebuilding = false; // sounds.play('click') - }, 500) + }, 500); } - function append(i){ - const el = document.createElement('div') - el.classList.add('bg') - els.push(el) - bg_el.appendChild(el) - return el + function append(i) { + const el = document.createElement("div"); + el.classList.add("bg"); + els.push(el); + bg_el.appendChild(el); + return el; } - function next(){ - clearTimeout(nextTimeout) - nextTimeout = setTimeout(next, delay) - step() + function next() { + clearTimeout(nextTimeout); + nextTimeout = setTimeout(next, delay); + step(); } function step() { - t += 1 - light = cielab.gradient(count) - let w = { min: is_mobile ? randrange(40, 90) : randrange(20, 40), max: randrange(10, 90) } + t += 1; + light = cielab.gradient(count); + let w = { + min: is_mobile ? randrange(40, 90) : randrange(20, 40), + max: randrange(10, 90), + }; if (w.min > w.max) { - w.min += 10 + w.min += 10; } - let rot = { min: randint(360), max: randrange(720, 1080) } + let rot = { min: randint(360), max: randrange(720, 1080) }; + console.log(w, rot); for (var i = 0; i < count; i++) { - update(i, t, w, rot, dark, light) + update(i, t, w, rot, dark, light); } - document.body.style.backgroundColor = cielab.gradient(2)(0.05) + document.body.style.backgroundColor = cielab.gradient(2)(0.05); } - function update(i, t, w, rot){ - const el = els[i] - const n = i / count - const side = lerp(n, w.min, w.max) - const spin = lerp(i % 2 ? (1-n) : (n), rot.min, rot.max) - const rotation = "rotate3d(" + [randrange(-1,1), randrange(-1,1), randrange(-1,1)].join(',') + ',' + randint(360) + "deg)" - el.style.width = side + 'vmin' - el.style.height = side + 'vmin' - el.style.transform = "translate3d(-50%, -50%, 0) rotate(" + spin + "deg) translate3d(50%, 50%, 0) " + rotation + function update(i, t, w, rot) { + const el = els[i]; + const n = i / count; + const side = lerp(n, w.min, w.max); + const spin = lerp(i % 2 ? 1 - n : n, rot.min, rot.max); + const rotation = + "rotate3d(" + + [randrange(-1, 1), randrange(-1, 1), randrange(-1, 1)].join(",") + + "," + + randint(360) + + "deg)"; + el.style.width = side + "vmin"; + el.style.height = side + "vmin"; + el.style.transform = + "translate3d(-50%, -50%, 0) rotate(" + + spin + + "deg) translate3d(50%, 50%, 0) " + + rotation; // el.style.transform = "translate3d(-50%, -50%, 0)" if (t === 1) { - light = cielab.gradient(count) + light = cielab.gradient(count); if (is_mobile) { - el.style.backgroundImage = 'linear-gradient(0deg, ' + dark(1) + ', ' + light(1) + ')' + el.style.backgroundImage = + "linear-gradient(0deg, " + dark(1) + ", " + light(1) + ")"; } else { - el.style.backgroundImage = 'linear-gradient(0deg, ' + dark(1) + ', ' + light(0) + ')' + el.style.backgroundImage = + "linear-gradient(0deg, " + dark(1) + ", " + light(0) + ")"; } } - el.style.backgroundColor = light(1) - el.style.opacity = lerp(n, randrange(0.1, 0.4), randrange(0.2, 0.5)) + el.style.backgroundColor = light(1); + el.style.opacity = lerp(n, randrange(0.1, 0.4), randrange(0.2, 0.5)); } - init() - return { rebuild: rebuild, step: step, } -})()
\ No newline at end of file + init(); + return { rebuild: rebuild, step: step }; +})(); diff --git a/docs/assets/js/site.js b/docs/assets/js/site.js index b0ee65c..8b8e632 100644 --- a/docs/assets/js/site.js +++ b/docs/assets/js/site.js @@ -12,6 +12,7 @@ const site = (function () { "Get in there, sweep the filter and give yourself a pat on the back. In that order.", "Not a museum. Move along.", "I've got to get out of this studio and back out there.", + "(whispers) You're my favorite. Don't tell anyone.", ]; if (hour < 8 || hour > 16) { document.body.parentNode.classList.add("night"); |