Here, I have discussed random motion of particles inside a canvas and bouncing off the boundary. However, I will skip the collision between particles in this post which is a bit tricky and maybe I will do another post only on that topic.
Run the codepen to see the demo with code.
I have created an object called Circle and given it x and y coordinates and speed(sx,sy) in both directions with radius 5. The function drawCircle() uses arc shape function to draw a circle on canvas.
Next, to move the circle we need to change it’s x and y position. We do this by adding speed to current x and y position and then update the position, more the value of speed the faster the circle will move at each frame.
Now, we need to handle some conditions when the x-coordinate of circle is less then 0 or more than canvas width. If the circle’s x position is less than or equals 0, we change the x-coordinate to it’s radius and move it in the opposite direction by multiplying speed with -1. Again if the x-coordinate is more than the canvas width, the speed is changed as before but this time the x-coordinate is updated by subtracting the radius from width of canvas. We do the similar thing for y-coordinate.
The array circles[] stores position and speed of each circle. Both position and speed for any circle is random, which finally gives us the effect of particles moving randomly! The speed is a random value between 0.5 and 5. Finally, requestAnimationFrame runs the update() function and the canvas is cleared and drawn at each frame.
DIARY OF CODES 