mask_meditation1
mask_meditation1
by Eshy Lavi
HTML
<div class="entry-content">
<canvas id="canvas" width="700" height="330"></canvas><!--
<button onclick='clkk()' style='display:inline-block;float:left;margin:8px;border-radius:5px;background-color:#2351cd;'>+</button><button onclick='clkk2()' style='display:inline-block;margin:8px;border-radius:5px;background-color:#2351cd;'>–</button><button onclick='clkk4()' style='display:inline-block;margin:8px;border-radius:5px;background-color:#2351cd;'>More</button><button onclick='clkk3()' style='display:inline-block;margin:8px;border-radius:5px;background-color:#2351cd;'>Less</button>-->
</div>JavaScript
var reduceFactor=1.0;var increaseFactor=1.0;var origN;var decay=1;var MaxY=330;var MaxX=700;var MaxR=63;var N =12;origN=N;var g=0.1;var ballr=[];var ballx=[];var bally= [];var ballvx= [];var ballvy= [];var ballax= [];function init(){ for (var idx=0;idx<N;idx++){ballr.push(Math.floor(Math.random()*MaxR+1));ballx.push(Math.floor(Math.random()*MaxX+1));bally.push(Math.floor(Math.random()*MaxY+1));ballvx.push(Math.random()*4-2);ballvy.push(Math.random()*2-1);ballax.push(0);}window.requestAnimationFrame(draw);}function draw(){var ctx=document.getElementById('canvas').getContext('2d');ctx.globalCompositeOperation='destination-over';ctx.clearRect(0,0,MaxX,MaxY);ctx.fillStyle='rgba(0,153,255,0.8)';ctx.strokeStyle='rgba(0,153,255,0.4)';ctx.save();for(var ix=0;ix<N-1;ix++){ctx.beginPath();ballvy[ix]=ballvy[ix]+g;ballvx[ix]=ballvx[ix]+ballax[ix];bally[ix]=bally[ix]+ballvy[ix];ballx[ix]=ballx[ix]+ballvx[ix];if(bally[ix]>MaxY-ballr[ix]){ballvy[ix]=-ballvy[ix]*decay;bally[ix]=MaxY-1-ballr[ix];}if(ballx[ix]>MaxX-ballr[ix]){ballx[ix]=MaxX-ballr[ix]-1;ballvx[ix]=-ballvx[ix];}if(ballx[ix]<ballr[ix]){ballx[ix]=ballr[ix]+1;ballvx[ix]=-ballvx[ix];}if(bally[ix]<ballr[ix]){bally[ix]=ballr[ix]+1;}for(var other=ix+1;other<N-1;other++){if (Math.pow(Math.pow(ballx[ix]-ballx[other],2)+Math.pow(bally[ix]-bally[other],2),0.5)<ballr[ix]+ballr[other]){/*alert('collision between nums '+ ix +' and '+other);*/ctx.fillStyle='rgba(255,1,1,0.8)';}}ctx.arc(Math.floor(ballx[ix]),Math.floor(bally[ix]),Math.floor(ballr[ix]),0,Math.PI*2,false);ctx.fill();}window.requestAnimationFrame(draw);}init();function clkk(){for(var ru=0;ru<N;ru++)ballvy[ru]=-g+ballvy[ru]*increaseFactor;}function clkk2(){for(var ru=0;ru<N;ru++)ballvy[ru]=g+ballvy[ru]*reduceFactor;}function clkk3(){if(N>0)N=Math.floor(N/1.1);}function clkk4(){if(N<origN)N=Math.floor(N*1.1);}