a.width=a.height=x=254,f=(a=>c.fillStyle=`rgba(${a})`),r=(a=>Math.round(Math.random()*a)),i=Array(99).fill(0).map(a=>({x:r(x),y:r(x),q:r(4)-2,a:r(2)-1,c:`255,${r(x)},${r(x)},.8`,d:r(12)})),c.font="200px sans",setInterval(a=>{for(a of(z=i[0],i))f(a.c),(a.x<0||a.x>x)&&(a.q*=-1),a.y>x&&a.a<.1&&(a.a=3),a.y>x&&(a.a*=-1,a.q=r(2)-1),a.a+=.05,"255,255,255,255"==c.getImageData(a.x+a.q,a.y,1,1).data.join()&&(a.q*=-1),"255,255,255,255"==c.getImageData(a.x,a.y+a.a,1,1).data.join()&&(a.a*=-1),a.x+=a.q,a.y+=a.a,r(9)>8&&(a.q=(a.q+z.q)/2,z=a),c.fillRect(a.x,a.y,a.d,a.d);f`0,0,0,.2`,c.fillRect(0,0,x,x),f`255,255,255,1`,c.fillText("X",x/4+r(5),x-x/5+r(5))},16);
// x = width/height
// r = Math.random
// e = variable to make functions smaller
// f = fillStyle function
// i = array of items
// z = previous item
a.width=a.height=x=254;
f=e=>c.fillStyle=`rgba(${e})`;
r=e=>Math.round(Math.random()*e);
i=Array(99).fill(0).map(e=>({x:r(x),y:r(x),q:r(4)-2,a:r(2)-1,c:`255,${r(x)},${r(x)},.8`,d:r(12)}));
c.font = "200px sans";
setInterval(e=>{
z=i[0];
for(e of i){
f(e.c);
if(e.x<0||e.x>x)e.q*=-1;
if(e.y>x && e.a<.1)e.a=3;
if(e.y>x){e.a*=-1;e.q=r(2)-1;}
e.a+=.05;
if (c.getImageData(e.x+e.q,e.y,1,1).data.join()=='255,255,255,255') e.q*=-1;
if (c.getImageData(e.x,e.y+e.a,1,1).data.join()=='255,255,255,255') e.a*=-1;
e.x+=e.q;
e.y+=e.a;
if (r(9)>8) {
e.q=(e.q+z.q)/2;
z=e;
}
c.fillRect(e.x, e.y,e.d,e.d);
}
f`0,0,0,.2`;
c.fillRect(0,0,x,x);
f`255,255,255,1`;
c.fillText('X',x/4+r(5), x-x/5+r(5));
},16)
