A fair play with Maths and JQuery Animation

This is a new try with the simple maths that we already know. I have used basic trigonometric equations and JQuery animation for the play.

DEMO

Demo Explained:

1. Create set of div and append it to the body
   

   for (var i = 0; i < 360; i++) {
       //random color
       var color = '#'+parseInt(Math.random()*0xccccc);
       //create and append DOM
       $('<div/>').appendTo('body').css('background',color);
   }
   
   

2. For random positioning use Math.random() to generate random x,y values
   
   
   

   for (var i = 0; i < 360; i++) {
           var left = 100 + Math.random() * 300 + 'px';
           var top = 100 + Math.random() * 300 + 'px';
           $('div').eq(i).animate({left:left,top:top},1000);
   }
   
   

3. To draw circle,
   x = tx + r cos(t)
   y = ty + r sin(t)
   so looping through t value from 0 to 360 will generate circle
   
   
   

   for (var i = 0; i < 360; i++) {
           r = 150;
           var left = 400 + r*Math.cos(i);
           var top = 200 + r*Math.sin(i);
           $('div').eq(i).animate({left:left,top:top},1000);              
       }
   
   

4. To draw sine wave,
   y = constant
   x = tx + r sin(t)
   so looping through t value from 0 to 360 will generate sine wave
   
   
   
   

   for (var i = 0; i < 360; i++) {
           r = 100;
           var left = i*10;
           var top = 300 + 10 * Math.sin(i);
           $('div').eq(i).animate({left:left,top:top},1000);              
       }
   
   

5. To draw cos wave,
   y = constant
   x = tx + r cos(t)
   so looping through t value from 0 to 360 will generate cos wave
   
   
   
   

   for (var i = 0; i < 360; i++) {
           var left = i*10;
           var top = 300 + 10 * Math.cos(i);
           $('div').eq(i).animate({left:left,top:top},1000);              
   }
   
   

6. For animating DOM elements to a single point (mouse click over document), get x,y position using mouse click event and animate each element towards the point with setTimeout function
   
   
   
   

   $(document).on('click',function(e){
       for (var i = 0; i < 360; i++) {
           var left = e.clientX + 'px';
           var top = e.clientY + 'px';
           var f = (function(i){
               return function(){
                   $('div').eq(i).animate({left:left,top:top},500);
               };
           })(i);
           setTimeout(f,i*5);
       }
   });
   
   

DEMO