1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
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");
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 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);
}
}
function destroy() {
for (var i = 0; i < count; i++) {
els[i] && bg_el.removeChild(els[i]);
}
els.length = 0;
}
function rebuild() {
if (rebuilding) return;
rebuilding = true;
// sounds.play('click')
stars.rebuild();
next();
t = 0;
bg_el.classList.add("fade");
setTimeout(() => {
destroy();
build();
step();
setTimeout(next, 20);
bg_el.classList.remove("fade");
rebuilding = false;
// sounds.play('click')
}, 500);
}
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 step() {
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;
}
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);
}
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;
// el.style.transform = "translate3d(-50%, -50%, 0)"
if (t === 1) {
light = cielab.gradient(count);
if (is_mobile) {
el.style.backgroundImage =
"linear-gradient(0deg, " + dark(1) + ", " + light(1) + ")";
} else {
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));
}
init();
return { rebuild: rebuild, step: step };
})();
|
