Simple animation for particle movement using SetInterval()
Improving the code using RequestAnimationFrame()
Drawing Circles in Canvas
Now that we have initialized a blank canvas, we can begin to draw in it. For our particle system we will need to draw the individual “particles”, each one will be drawn as a circle. In order to draw a circle in Canvas we need to first get the canvas element using GetElementById and set the width and height to the browser window, then specify that we are working in 2D using getContext:
We can now define our draw() function and then call it:
123456789101112
functiondraw(){x=90;// x co-ordinatey=70;// y co-ordinater=60;// radius of a circlec="#ef5da1";// fill colourctx.beginPath();ctx.arc(x,y,r,0,6);ctx.fillStyle=c;ctx.fill();}draw();
And here is our first circle:
We can now create an array of particles for us to draw. First let’s initialise some variables that we will need available globally:
123
varps=[];// initialize an empty particle arrayvarMAX_NUM=500;// this is the maximum number of particles we want to generate and drawvarcolors=['#69D2E7','#A7DBD8','#E0E4CC','#F38630','#FA6900','#FF4E50','#F9D423'];// this is an array of colour that the particles can be
In order to generate all particles we will create a spawn() function and call it. Here we are populating the empty ps[] array with randomly generated values, within the given bound (in this case the width and height of the browser window):
If we run the code now, we should see something like this:
This is the full script:
1234567891011121314151617181920212223242526272829
varps=[];varMAX_NUM=500;varcolors=['#69D2E7','#A7DBD8','#E0E4CC','#F38630','#FA6900','#FF4E50','#F9D423'];varc=document.getElementById("myCanvas");varctx=c.getContext("2d");c.width=window.innerWidth;c.height=window.innerHeight;// create the particlesfunctionspawn(){for(vari=0;ps.length<MAX_NUM;i++){ps[i]={x:Math.random()*window.innerWidth,y:Math.random()*window.innerHeight,r:Math.random()*5,c:colors[Math.floor(Math.random()*colors.length)]};}}functiondraw(){for(vari=0;i<ps.length;i++){ctx.beginPath();ctx.arc(ps[i].x,ps[i].y,ps[i].r,0,6);ctx.fillStyle=ps[i].c;ctx.fill();}}spawn();draw();
Simple Animation Using SetInterval()
We are now ready to animate our particle system. We will need to write an update() function, which will update the x and y values of each particle on each frame. On each update we also need to reset the width and height to clear the canvas (Tip: remove this to see what happens if the canvas is not cleared):
We can now call this function on each frame using SetInterval() and then draw the particles with the updated co-ordinates:
1234
setInterval(function(){update();draw();},30);
You may have noticed that the particles simply dissapear once they have reached the bottom of the brower window, if you would liek to animation to keep on running we could reset the x and y of each aprticles if it leaves the screen to start all over again:
123456789101112131415
functionreset(){//reset the x and y coordinates if a particle leaves the canvasfor(vari=0;i<ps.length;i++){//reset if y or coordinate has left the canvasif(ps[i].y>c.height){ps[i].y=Math.random()*window.innerHeight;ps[i].color=colors[Math.floor(Math.random()*colors.length)];}//reset if x or coordinate has left the canvasif(ps[i].x>c.width||ps[i].x<0){ps[i].x=Math.random()*window.innerWidth;ps[i].color=colors[Math.floor(Math.random()*colors.length)];}}}
Now we have to call this new reset() function on each frame:
// declare varsvarps=[];varMAX_NUM=500;varcolors=['#69D2E7','#A7DBD8','#E0E4CC','#F38630','#FA6900','#FF4E50','#F9D423'];varc=document.getElementById("myCanvas");varctx=c.getContext("2d");c.width=window.innerWidth;c.height=window.innerHeight;spawn();//create the particlesfunctionspawn(){for(vari=0;ps.length<MAX_NUM;i++){ps[i]={x:Math.random()*window.innerWidth,y:Math.random()*window.innerHeight,r:Math.random()*5,c:colors[Math.floor(Math.random()*colors.length)]};}}functionupdate(){c.width=window.innerWidth;c.height=window.innerHeight;for(vari=0;i<ps.length;i++){ps[i].y+=1;ps[i].x+=-1+(Math.random()*3);//ps[i].r = Math.random()*5;}}functionreset(){//reset the x and y coordinates if leaves the canvasfor(vari=0;i<ps.length;i++){//reset if y or coordinate has left the canvasif(ps[i].y>c.height){ps[i].y=Math.random()*window.innerHeight;ps[i].color=colors[Math.floor(Math.random()*colors.length)];}//reset if x or coordinate has left the canvasif(ps[i].x>c.width||ps[i].x<0){ps[i].x=Math.random()*window.innerWidth;ps[i].color=colors[Math.floor(Math.random()*colors.length)];}}}functiondraw(){for(vari=0;i<ps.length;i++){ctx.beginPath();ctx.arc(ps[i].x,ps[i].y,ps[i].r,0,6);ctx.fillStyle=ps[i].c;ctx.fill();}}setInterval(function(){update();draw();reset();},30);
In Pt.3, I will cover how we can improve our animation using RequestAnimationFrame()(Pt.3 can be found here).
ðŸ”¥ If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.