var c=document.getElementsByTagName("canvas")[0];c.style.backgroundColor="#a23";var ct=c.getContext("2d"),p=[],tl=0,cw=c.width,ch=c.height,r=Math.random;function cr(t,c){p.push([t,c,0,0,"#"+(14540032+(2236928&Math.floor(16777215*r()))).toString(16)])}for(addEventListener("mousemove",t=>{cr(t.clientX-c.offsetLeft,t.clientY-c.offsetTop)}),step=(()=>{p.forEach((t,c)=>{t[0]+=t[2]/9,t[1]+=t[3]/9,t[2]*=.95,t[3]*=.95,Math.abs(t[0]-cw/2)>cw/2&&(t[0]+=(cw/2-t[0])/99),t[1]<tl&&(t[3]+=tl-t[1])});for(var t=0;t<p.length;t++)for(var c=0;c<p.length;c++){var e=p[t][0]-p[c][0],l=p[t][1]-p[c][1],a=e*e+l*l;if(a<324&&t!==c){var r=Math.sqrt(a),o=Math.abs(r-18);p[t][2]+=e*o/r/3,p[t][3]+=l*o/r/3}}}),ct.lineWidth=3,loop=(()=>{ct.clearRect(0,0,c.width,c.height),ct.fillStyle="#000000",p.forEach((t,c)=>{ct.beginPath(),ct.fillStyle=t[4],ct.arc(t[0],t[1],9,0,2*Math.PI),ct.fill()}),tl=50*Math.sin(performance.now()/999)+50,step(),ct.fillStyle="#ccc",ct.fillRect(0,0,cw,tl)}),setInterval(loop,9),i=0;i<999;i++)cr(cw*r(),ch*r());
var c = document.getElementsByTagName('canvas')[0];
c.style.backgroundColor = '#a23';
var ct = c.getContext("2d");
var p = [];
var tl = 0;
var cw = c.width;
var ch = c.height;
var r = Math.random;
function cr(x,y) {
p.push(
[x,y,0,0,'#'+((Math.floor(r()*0xFFFFFF)&0x222200) + 0xDDDD00).toString(16)]
);
}
addEventListener("mousemove", (e) => {
cr(e.clientX - c.offsetLeft,e.clientY - c.offsetTop);
});
step = () => {
p.forEach((o, index) => {
o[0]+=o[2]/9;
o[1]+=o[3]/9;
o[2]*=.95;
o[3]*=.95;
if(Math.abs(o[0] -cw/2) > cw/2) {
o[0]+= (cw/2-o[0])/99;
}
if(o[1] < tl) {
o[3]+= tl - o[1];
}
});
for(var i=0; i<p.length; i++) {
for(var j=0; j<p.length;j++) {
var dx = p[i][0] - p[j][0];
var dy = p[i][1] - p[j][1];
var ds = dx*dx + dy*dy;
if(ds < 324 && i!==j) {
var d = Math.sqrt(ds);
var f = Math.abs(d - 18);
p[i][2] += dx*f/d/3;
p[i][3] += dy*f/d/3;
}
}
}
}
ct.lineWidth=3;
loop = () => {
ct.clearRect(0,0,c.width,c.height);
ct.fillStyle = "#000000";
p.forEach((pallet,index) => {
ct.beginPath();
ct.fillStyle=pallet[4];
ct.arc(pallet[0], pallet[1],9,0,2*Math.PI);
ct.fill();
});
tl = Math.sin(performance.now()/999) * 50 + 50;
step();
ct.fillStyle = "#ccc";
ct.fillRect(0,0,cw,tl);
}
setInterval(loop, 9);
for(i=0; i<999; i++) {
cr( cw * r(),ch * r());
}
