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 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 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);
        }
    });
    
    

Popular posts from this blog

Simple Animation Using C

Personal Diary - A Mini Project Written in Turbo C With Graphical Interface

2D Reflection