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
|
var K=document.querySelector('canvas'),
{random:z,PI,cos,sin}=Math,
X=K.getContext('2d'),F=24,l=-1001,
u=0,S=Array(~~(z()*2)+3).fill().map(()=>({
C:~~(z()*10)+4,
r:37.5-4*u++, T:z()*.1,
R:z()>.25?z()/5-.1:0,
S:z()>.25?z()*.5+.5:1,
n:37.5,t:0,d:1
})),Z=matchMedia('(prefers-reduced-motion: reduce)').matches?0:1
X.strokeStyle='#fff'
X.lineWidth=1
function pl(x,y,r,s,t) {
X.beginPath()
for (let i=0; i<=s; i++) {
var a=(i*2*PI/s)+t,
px=x+r*cos(a), py=y+r*sin(a)
i==0?X.moveTo(px, py):X.lineTo(px, py)
}
X.stroke()
}
function d(s) {
var cx=37.5,cy=37.5,{T,d,r,S,n}=s
s.n+=T*d
if (s.n>=r) {
s.n=r
s.d=-1
}
if (s.n<=r*S) {
s.n=r*S
s.d=1
}
s.t+=s.R
s.C<13?pl(cx,cy,n,s.C,s.t):(X.beginPath(),X.arc(cx,cy,n,0,2*PI),X.stroke())
}
function f(t) {
if(Z)requestAnimationFrame(f)
var dt=t-l
if (dt>1000/F) {
X.clearRect(0,0,75,75)
X.rect(0,0,75,75)
X.stroke()
S.map(d)
l=t
}
}
K.onclick=()=>((Z=!Z)&&f())
f(0)
|
