var ball = []; onload = function() { auto = "fullstrokefill"; //canvas is auto fullscreen, both stroke and fill (stroke happens before fill) grb(); //create canvas stl("darkgrey",0); //outline-stroke color wdt(1.5); //outline width can.mul("background='radial-gradient(circle, white 10%, lightgrey 50%, grey 110%)'"); //radient background on canvas for all vendor prefixes for (var stp = 0; stp < 20; stp++) { ball.push(new Ball()); } frame(); }; function Ball() { this.m = rnd(3,25,1); //non rounded random number from 3 to 25 this.x = rnd(this.m,x-this.m,1); this.y = rnd(this.m,y-this.m,1); this.S = rnd(.8,6,1); this.d = rnd(0,359,1); this.s = [Math.sin(deg(this.d))*this.S,-Math.cos(deg(this.d))*this.S]; this.c = rnd(); this.P = true; //random hex color var pass = true; var thus = this; var bal = ball.pure(); //get pure data of array instead of pointer bal.forEach(function(val) { if (col(thus.x,thus.y,thus.m,val.x,val.y,val.m)) { pass = false; } }); if (pass) { return this; } else { return new Ball(); } } function frame() { dlt(); //clear canvas var nar = []; ball.forEach(function(val,indx) { stl(val.c); //fill color ark(val.x,val.y,val.m); //fill color, stroke before fill. Auto drawing enabled. var p = val.m*val.S; val.m -= .05; val.S -= .013*val.m/10; val.S = val.S>0?val.S:0; p = val.m*val.S; if ((val.x-val.m+val.s[0]<=0&&val.d>180&&val.d<=270)||(val.x+val.m+val.s[0]>=x&&val.d>=90&&val.d<180)) { val.d = 180-(val.d-180); } if ((val.x-val.m+val.s[0]<=0&&val.d>=270&&val.d<360)||(val.x+val.m+val.s[0]>=x&&val.d>0&&val.d<=90)) { val.d = 360-val.d; } if (val.y-val.m+val.s[1]<=0&&val.d<=360&&val.d>270) { val.d = 270-(val.d-270); } if (val.y+val.m+val.s[1]>=y&&val.d>=180&&val.d<270) { val.d = 270+(270-val.d); } if ((val.y-val.m+val.s[1]<=0&&val.d>=0&&val.d<90)||(val.y+val.m+val.s[1]>=y&&val.d>90&&val.d<=180)) { val.d = 180-val.d; } val.d %= 360; val.d = val.d<0?360+val.d:val.d; val.s = [Math.sin(deg(val.d))*val.S,-Math.cos(deg(val.d))*val.S]; var Va = {x:-500,y:-500,m:0,s:[0,0]}; var coll = [], pass = true; ball.forEach(function(va,ind) { if (col(val.x+val.s[0],val.y+val.s[1],val.m+.6,va.x+va.s[0],va.y+va.s[1],va.m+.5)&&ind!=indx) { //check ball collision col(x1,y1,r1,x2,y2,r2) Va = va; var m = va.m; val.m += .5; va.m += .5; val.S = p/val.m; va.S *= m/va.m; var ang = Math.abs(val.d-va.d)%180; var cli = cl = Math.cos(deg(ang))*val.S, Cl = Math.sin(deg(ang))*val.S; //deg(degrees) degrees to radians cl = (val.m-va.m)*cl/(val.m+va.m)+2*va.m*va.S/(val.m+va.m); va.S = (va.m-val.m)*va.S/(va.m+val.m)+2*val.m*cli/(va.m+val.m); val.S = dst(cl,Cl); //calculate distance with pythagorean theorem if (va.S<0) { va.S *= -1; va.d += 180; } if (val.S<0) { val.S *= -1; val.d += 180; } var rt1 = dst(va.x-val.x,va.y-val.y,1); val.d -= Math.abs(val.d-rt1)*(va.m/val.m); var rt2 = dst(val.x-va.x,val.y-va.y,1); va.d -= Math.abs(va.d-rt2)*(val.m/va.m); va.s = [Math.sin(deg(va.d))*va.S,-Math.cos(deg(va.d))*va.S]; val.s = [Math.sin(deg(val.d))*val.S,-Math.cos(deg(val.d))*val.S]; val.d = dst(val.s[0],val.s[1],1)%360; val.d = val.d<0?360+val.d:val.d; va.d = dst(va.s[0],va.s[1],1)%360; va.d = va.d<0?360+va.d:va.d; coll.push(val.d); val.d = 0; coll.forEach(function(v) { val.d += v; }); val.d /= coll.length; val.d %= 360; if (dst(val.x-va.x,val.y-va.y)<=va.m+val.m&&val.m>va.m) { val.m = Math.pow(((Math.pow(va.m,3)*Math.PI*4/3+Math.pow(val.m,3)*Math.PI*4/3)/(4/3))/Math.PI,1/3); va.P = false; } } }); if (!col(val.x+val.s[0],val.y+val.s[1],val.m,Va.x+Va.s[0],Va.y+Va.s[1],Va.m)) { val.x += val.s[0]; val.y += val.s[1]; } else { val.x -= val.s[0]/val.S; val.y -= val.s[1]/val.S; } if (val.m<40&&val.m>2&&val.P) { nar.push(val); if (!rnd(ball.length+10)&&!rnd(7)) { nar.push(new Ball()); } } else if (rnd(2)) { nar.push(new Ball()); } val.s = [Math.sin(deg(val.d))*val.S,-Math.cos(deg(val.d))*val.S]; }); ball = nar; requestAnimationFrame(frame); }//frame

Bidimensional collisions [momentum]