diff options
Diffstat (limited to 'static/js/animation.js')
| -rw-r--r-- | static/js/animation.js | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/static/js/animation.js b/static/js/animation.js new file mode 100644 index 0000000..d78ac8f --- /dev/null +++ b/static/js/animation.js @@ -0,0 +1,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:30-4*u++, T:z()*.1, + R:z()>.25?z()/5-.1:0, + S:z()>.25?z()*.5+.5:1, + n:30,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=30,cy=30,{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,60,60) + X.rect(0,0,60,60) + X.stroke() + S.map(d) + l=t + } +} +K.onclick=()=>((Z=!Z)&&f()) +f(0) |