Skip to main content

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

2D Reflection

#include <stdio.h> #include <stdlib.h> #include<graphics.h> #include<conio.h> #include<math.h> void draw2d(int,int [],int [],int,int); void main() { int gd=DETECT,gm; int x[20],y[20],x1[20],y1[20],tx=0,ty=0,i,fs; initgraph(&gd,&gm,""); printf("No of sides : "); scanf("%d",&fs); printf("Co-ordinates : "); for(i=0;i<fs;i++) { printf("(x%d,y%d)",i,i); scanf("%d%d",&x[i],&y[i]); } draw2d(fs,x,y,tx,ty); printf("translation (x,y) : "); scanf("%d%d",&tx,&ty); while(1) { clrscr(); cleardevice(); printf("1. X Reflection\n\n2. Y Reflection\n\n3. Exit"); draw2d(fs,x,y,0,0); switch(getche()) { case '1': for(i=0;i<fs;i++) { x1[i]=(tx+((x[i]-tx)*cos(M_PI))-((y[i]-ty)*sin(M_PI))); y1[i]=y[i]; } break; case '2': for(i=0;i<fs;i++) { x1[i]=x[i]; y1[i]=(tx+((y[i]-ty)*cos(M_PI))+((x[i]-tx)*sin(M_PI))); } break; case '3': close…

Simple Animation Using C

Here i have used fillpoly function to draw the object body and used fillellipse function to draw tier.
animation is done by looping through the objects x & y position until user hits a key. Keypress event is achived  by using kbhit function. Smoothness of animation is controlled by delay function.

Change the delay values to change the animation speed

Source:

#include<stdio.h> #include<conio.h> #include<graphics.h> #include<dos.h> void main() { int gd=DETECT,gm,i=-300,j; int poly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; int tpoly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; initgraph(&gd,&gm,""); getch(); while(!kbhit()) { for(j=0;j<16;j+=2) { poly[j]=tpoly[j]+i; } fillpoly(8,poly); setfillstyle(5,7); bar(275+i,60,295+i,85); setfillstyle(5,8); fillellipse(140+i,140,20,20); fillellipse(280+i,140,20,20); setfillstyle(1,0); fillellipse(140+i,140,10,10); fillellipse(280+i,140,10,10); setcolor(…

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

A Simple Personal Diary written in Turbo C with Graphical User Interface

Features,
Birthday ReminderNotesAddress Book The main part of the project is UI

'GUI.h' header file includes texbox, message-box and more custom graphical functions 
' Dairy.h' header file includes functionality of Personal Dairy
' Dairyload.c' includes loadingscreen, login screen, installation check etc
'Dairy.c' - execution stats here