alert("You can pull the balloons' ropes"); var [dots,sticks]=[[],[]]; var grav=[0,.03]; stickcrt=(a)=>sticks.push([a[0],a[1],a[2]||1,a[3]||Math.hypot(...dots[a[0]][0].map((x,y)=>x-dots[a[1]][0][y])),a[4]||"#222"]); //Function for adding constraints var [rad,len,nm]=[Math.min(innerWidth,innerHeight)/15,10,12]; for(var k=0;k(e=e.changedTouches?e.changedTouches[0]:e)&([lf,mv]=[true,[e.clientX,e.clientY]])); document.addEventListener("ontouchmove" in document?"touchmove":"mousemove",e=>(e=e.changedTouches?e.changedTouches[0]:e)&(mv=[e.clientX,e.clientY])); document.addEventListener("ontouchend" in document?"touchend":"mouseup",()=>lf=false); //Touch events frame=()=>{ c=document.querySelector("canvas"); [c.width,c.height,ctx]=[innerWidth,innerHeight,c.getContext("2d")]; //Initialization //-=-// if(!la) la=Date.now()-1000/fps; var av=Math.min(1,fps/(1000/Math.max(Date.now()-la,1))); //Used for constant performance la=Date.now(); for(var i=0;ia+[Math.cos(Date.now()/(500+i/5)),0][b]/1000*av)); //Wind if(!lf) sel=0; for(var j=0;j(a-cd[1][b])*cd[4][0]*av); //Get velocity dots[i][1]=cd[0]; if(!cd[6]&&!cd[7]) dots[i][0]=cd[0].map((a,b)=>a+vel[b]+cd[5][b]*av); if(cd[0][0]>c.width-cd[2]) dots[i][0][0]=c.width-cd[2]; if(cd[0][1]>c.height-cd[2]) dots[i][0][1]=c.height-cd[2]; if(cd[0][0]a-mv[b]))<(cd[2]+rad/6))&&!sel))) (dots[i][1][0]+=(mv[0]-cd[0][0])/15*av)&(dots[i][1][1]+=(mv[1]-cd[0][1])/15*av)&(dots[i][7]=1)&(sel=1); //Interaction/Touch stuff etc. else dots[i][7]=0; for(var l=0;lx-dots[l][0][y]); //Subtract positions var dis=Math.hypot(...sub); //Get distance if(dis>cd[2]+dots[l][2]) continue; //Test if no collision occured if(dis===0) [dis,sub]=[1,[1,0]]; //Fix for dividing by zero var [dif,cb]=[(cd[2]+dots[l][2]-dis)/dis*.6,dots[l]]; //Difference for offset var [off,m0,m1]=[sub.map(a=>a*dif/2),cd[3]/(cd[3]+cb[3]),cb[3]/(cd[3]+cb[3])]; //Offset and masses if(!cd[6]&&!cd[7]) dots[i][1]=cd[1].map((a,b)=>a-off[b]*m1); //Test if pinned or held and use offset if(!cb[6]&&!cb[7]) dots[l][1]=cb[1].map((a,b)=>a+off[b]*m0); //Do the same here } } for(var i=0;ia-d1[0][b]); //Subtracting positions var dis=Math.hypot(...d); //Distance var dif=(sticks[i][3]-dis)/dis*sticks[i][2]; //Difference var [off,m0,m1]=[d.map(a=>a*dif/2),d0[3]/(d0[3]+d1[3]),d1[3]/(d0[3]+d1[3])]; //Offset and masses if(!d0[6]&&!d0[7]) dots[sticks[i][0]][0]=d0[0].map((a,b)=>a+off[b]*m1*av); //Check if pinned or held and use offset if(!d1[6]&&!d1[7]) dots[sticks[i][1]][0]=d1[0].map((a,b)=>a-off[b]*m0*av); //Same here } } for(var i=0;i

Balloons with Physics (Verlet Engine)