Canvas - Mouse Cursor Leaving Colorful Circle Trails
Fun? Click on the refresh button for new random colors! It works on touchscreen devices too :D
Another cool experiment by me. In this experiment, your mouse controls a circle which is followed by a trail of other circles having some velocity so that they merge into the main circle when you stop moving your mouse. All circles are contained in an array while the last circle is controlled by the mouse.
You can understand the main logic by looking at this code
// Set the last circle to follow mouse cursor
if(mouse.x && mouse.y) {
circles[circles.length - 1].x = mouse.x;
circles[circles.length - 1].y = mouse.y;
flag = 1;
}
// Set the acceleration of the circles according to the distance between
// the current circle and the previous circle
if(flag == 1 && i > 0) {
c2.x += (c1.x - c2.x) * 0.6;
c2.y += (c1.y - c2.y) * 0.6;
}
The value which is multiplied to c2.x and c2.y decides the actual velocity with which the preceding circles will move. Also, I have defined the color of circles to be randomly generated but you can go with any color you want. Check out the fully commented source code to understand more about it.