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
|
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', rebuild)
}
function build(){
count = choice([5,7,7,11,11,13,13])
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: randrange(20, 40), max: randrange(10, 90) }
if (w.min > w.max) {
w.min += 10
}
let rot = { min: randint(360), max: randrange(720, 1080) }
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)
el.style.backgroundImage = 'linear-gradient(' + 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, }
})()
|
