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
|
const stars = (function(){
var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d')
var s = Math.sin, c = Math.cos
document.addEventListener("DOMContentLoaded", function(){
document.body.appendChild(canvas)
canvas.classList.add('stars')
canvas.style.width="100%"
canvas.style.height="100%"
canvas.style.position="fixed"
canvas.style.top="0px"
canvas.style.left="0px"
canvas.style.zIndex=-1
document.body.addEventListener("resize", build)
// document.body.parentNode.style.backgroundColor="black"
ctx.strokeStyle="white"
build()
})
function ri(n){ return Math.random() * n }
function rr(a,b){ return (b-a) * Math.random() + a }
function build(){
var w = canvas.width = window.innerWidth * window.devicePixelRatio
var h = canvas.height = window.innerHeight * window.devicePixelRatio
ctx.clearRect(0,0,w,h)
var n = Math.sqrt(w*h)|0
while (n--) {
var x = ri(w)
var y = ri(h)
var r0 = rr(0, 1)
var r1 = rr(0, 1)
var r2 = rr(0, 1)
var t0 = ri(2*Math.PI)
var t1 = ri(2*Math.PI)
var t2 = ri(2*Math.PI)
var x0 = x+c(t0)*r0
var y0 = y+s(t0)*r0
var x1 = x+c(t1)*r1
var y1 = y+s(t1)*r1
var x2 = x+c(t2)*r2
var y2 = y+s(t2)*r2
ctx.beginPath()
ctx.moveTo(x,y)
ctx.bezierCurveTo(x0,y0,x1,y1,x2,y2)
var color = rr(0, 255)|0
ctx.strokeStyle="rgb("+color+","+color+","+color+")"
ctx.stroke()
}
}
let rebuilding = false
function rebuild(){
if (rebuilding) return
rebuilding = true
canvas.classList.add('fade')
document.body.classList.add('fade')
setTimeout(() => {
// destroy()
build()
canvas.classList.remove('fade')
document.body.classList.remove('fade')
rebuilding = false
}, 500)
}
return { rebuild: rebuild }
})()
|
