2G sources + bounce
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 dmyred=15.2;var dmygreen=29.5;var dmyblue=51.1;var dalpha=0.02;var alpha=0.2;var myred=123;var myblue=234;var mygreen=63;var myredflr=0;var mygreenflr=0;var myblueflr=0;var MaxY=646;var MaxX=1355;var MaxR=38;var N =235;var g=0.015;var ballr=[];var ballx=[];var bally= [];var ballvx= [];var ballvy= [];function init(){ for (var idx=0;idx<N;idx++){ballr.push(Math.floor(Math.random()*MaxR+11));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()*3-1.5);}window.requestAnimationFrame(draw);}function draw(){alpha+=dalpha;myred+=dmyred;mygreen+=dmygreen;myblue+=dmyblue;if(myblue>252||myblue<55){dmyblue=-1*dmyblue;}if(mygreen>253||mygreen<55){dmygreen=-1*dmygreen;}if(myred>253||myred<55){dmyred=-1*dmyred;}if (alpha>0.95||alpha<0.05){dalpha=-1*dalpha}myredflr=Math.floor(myred);mygreenflr=Math.floor(mygreen);myblueflr=Math.floor(myblue);var ctx=document.getElementById('canvas').getContext('2d');var stt="rgba("+myredflr+","+mygreenflr+","+myblueflr+","+alpha+")";ctx.globalCompositeOperation='destination-under';ctx.fillStyle=stt;ctx.strokeStyle=stt;ctx.save();for(var ix=0;ix<N;ix++){ballvy[ix]=ballvy[ix]+g;bally[ix]=bally[ix]+ballvy[ix];ballx[ix]=ballx[ix]+ballvx[ix];if(bally[ix]>646){ballvy[ix]=-ballvy[ix];}if(ballx[ix]>1355){ballvx[ix]=-ballvx[ix];}if(ballx[ix]<21){ballvx[ix]=-ballvx[ix];}ctx.beginPath();ctx.arc(Math.floor(ballx[ix]),Math.floor(bally[ix]),ballr[ix],0,Math.PI*2,false);ctx.fill();}window.requestAnimationFrame(draw);}init();