2G sources + bounce
by Eshy Lavi
HTML
<div class="entry-content">
<canvas id="canvas1" 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 qorigN;var qdecay=1;var qMaxY=330;var qMaxX=700;var qMaxR=8;var qN =834;qorigN=qN;var qg=0.09;var qballr=[];var qballx=[];var qbally= [];var qballvx= [];var qballvy= [];var qballax= [];function qinit(){ for (var idx=0;idx<qN;idx++){qballr.push(Math.floor(Math.random()*qMaxR+1));qballx.push(Math.floor(Math.random()*qMaxX+1));qbally.push(Math.floor(Math.random()*qMaxY+1));qballvx.push(Math.random()*3-1.5);qballvy.push(Math.random()-0.5);qballax.push(0);}window.requestAnimationFrame(qdraw);}function qdraw(){var qctx=document.getElementById('canvas1').getContext('2d');qctx.globalCompositeOperation='destination-over';qctx.clearRect(0,0,qMaxX,qMaxY);qctx.fillStyle='rgba(0,153,255,0.8)';qctx.strokeStyle='rgba(0,153,255,0.4)';qctx.save();for(var ix=0;ix<qN;ix++){qctx.beginPath();qballvy[ix]=qballvy[ix]+qg;qballvx[ix]=qballvx[ix]+qballax[ix];qbally[ix]=qbally[ix]+qballvy[ix];qballx[ix]=qballx[ix]+qballvx[ix];if(qbally[ix]>qMaxY-1-qballr[ix]){qballvy[ix]=-qballvy[ix]*qdecay;qbally[ix]=qMaxY-1-qballr[ix];}if(qballx[ix]>qMaxX-1-qballr[ix]){qballx[ix]=qMaxX-qballr[ix]-1;qballvx[ix]=-qballvx[ix];}if(qballx[ix]<qballr[ix]){qballx[ix]=qballr[ix];qballvx[ix]=-qballvx[ix];}if(qbally[ix]<qballr[ix]){qbally[ix]=qballr[ix];}qctx.arc(Math.floor(qballx[ix]),Math.floor(qbally[ix]),Math.floor(qballr[ix]),0,Math.PI*2,false);qctx.fill();}window.requestAnimationFrame(qdraw);}qinit();function clkk(){for(var ru=0;ru<qN;ru++)qballvy[ru]=qballvy[ru]*1.5;}function clkk2(){for(var ru=0;ru<qN;ru++)qballvy[ru]=qballvy[ru]*0.5;}function clkk3(){if(qN>0)qN=Math.floor(qN/1.1);}function clkk4(){if(qN<qorigN)qN=Math.floor(qN*1.1);}