2012 | BitsTogether

Home Archives for 2012

Sunday, September 16, 2012

3D Cube using HTML5 CSS3

3d css3 cube html5 Web Design Web Engineering/Web Design Unknown September 16, 2012 No comments


3D Cube using HTML5/Pure CSS3 No JavaScript

View Demo : 3D Cube using HTML5 and CSS3 no JavaScript

Hello friends, here's nice and simple tutorial on how to build a 3D cube using HTML5/CSS3 with NO JavaScript coding.

As we know HTML5 is a new web emerging technology which features a lot of new improvements over HTML 4.1.Among these features, support for 2D/3D graphics is new , which is supported through following elements/css techniques:

by using the new CANVAS element/tag
by using the SVG (Scalable Vector Graphics) in HTML5
by using CSS3

In this post I am going to focus on 3rd technique for creating and animating a 3D cube i.e using CSS3.
So, lets get started.

HTML Part :

First take a look at complete cube html code :

                  <div class="scene3d" style="margin-top: 40px;">
         <div class="object3d " id="obj">
             <div class="face3d" id="f1" ></div>
             <div class="face3d" id="f2" ></div>
       <div class="face3d" id="f3" ></div>
           <div class="face3d" id="f4" ></div>
           <div class="face3d" id="f5" ></div>
             <div class="face3d" id="f6" ></div>
           </div>
       </div>

Explanation :

As we know a cube has 6 faces, so we have to create 6 divs for one each for a face:

                   <div class="face3d"  id="f1" ></div>
                     <div class="face3d"  id="f2" ></div>
                     <div class="face3d"  id="f3" ></div>
                     <div class="face3d"  id="f4" ></div>
                     <div class="face3d"  id="f5" ></div>
                     <div class="face3d"  id="f6" ></div>

Now to hold these 6 faces a container(complete cube) is required hence

Now to hold a cube another container(scene3d) is required (this container is required to get a perspective view i.e 3D view of the cube which I will discuss later in the post) .

A scene can hold many cube and other 3D elements.

CSS3 Part :

Now since we created the html divs required, now have to apply css to these divs to get the 3D effect:

We have to align/position the 6 faces(divs) of the cube in 3D space so that it appears like a real cube.

The css for a single face is given below:

          .face3d
          {
             position: absolute;
             left: 165px;
             top: 15px;
             width:300px;
             height:300px;
             border:1px solid black;
          }

The css for 6 faces are as shown below:

           #f1{transform:translateZ(-150px);}    //face 1
   #f2{transform:translateZ(150px);}     //face 2
   #f3{transform:translateX(150px) rotateY(-90deg);} //face 3
       #f4{transform:translateX(-150px) rotateY(90deg);} //face 4
   #f5{transform:translateY(150px) rotateX(-90deg);} //face 5
     #f6{transform:translateY(-150px) rotateX(90deg);} //face 6

The translateZ(-150px) translates the face 1 (#f1) along the Z-axis.
Similarly translateZ(150px) translates the face 2 (#f2) along the Z-axis

Third line transform:translateX(150px) rotateY(-90deg) first translate face 3(#f3) along x-axis then rotates it -90deg along Y-axis with transform-origin as center of the face it self.

Similarly other we transform other faces.

By default, these transforms will be in 2D space hence we wont get a perfect cube as shown below .

2D transform

Hence we have to specify to preserve the 3D meaning of the transforms, therefore we will create a wrapper (#obect3d).

The css for #object3D is as follow:

    .object3d
      {
                         transform-style: preserve-3d;
            width: inherit;
   height: inherit;
           position: absolute;
   transform: rotateX(40deg) rotateY(45deg) rotateZ(0deg);
}

And to get the perspective view we specify the css for scene (#scene3d)

.scene3d
{
perspective:1000px; // for perspective view otherwise it wont look

                               // like a real cube
   width: 600px;
   height: 340px;
   margin-left: auto;
   margin-right: auto;
   }

Hence the final cube will be as follow:

3D cube Skeleton

Since each face of cube is nothing but a div you can add anything to a face and it will have a 3D look.

Important Note : You may have to attach the prefix to transform-style ,transform, animation ,perspective according to your browser

e.g for Firefox
-moz-transform-style:preserve-3d;

-moz-transform:rotateX(90deg);

for Webkit

-webkit-transform-style:preserve-3d;

-webkit-transform:rotateX(90deg);

If you don't want to specify the prefix for each and every browser you can include the prefixfree.js plugin which automatically attach the prefix according to your browser.

Sunday, January 22, 2012

C implementation of FCFS, SJF, ROUND ROBIN

Algorithm C program Operating System Algorithms Unknown January 22, 2012 No comments

#include<stdio.h>

typedef struct process
{int id;
int wait;
int burst;
};
struct process pro[10];
struct process temp[20];

table(struct process pro[],int nop);
gantt(struct process pro[],int nop);
int getdata();
incwait(int tempburst,int id);
init();
int nop;

main()
{
struct process tmppro;
int choice,quantum;
int i,j,x,z,ret;
int ans,rrwt;
float rrawt,rratrt,fcfsawt,fcfsatrt,sjfatrt,sjfawt;
int procount,t,tburst[10];
do{printf("\t\t* * * * * * MENU * * * * * * \n");
printf("\t\t1.FCFS\n\t\t2.SJF\n\t\t3.Round Robin");
printf("\n\nPlease enter your choice : ");

scanf("%d",&choice);
switch(choice)
{
case 1:
    {
    init();
    nop=getdata();
    table(pro,nop);
    gantt(pro,nop);
    fcfsawt=0;
    fcfsatrt=0;
    for(i=nop-1;i>=0;i--)
    {
        pro[i].wait=0;
        for(j=0;j<i;j++)
        {
            pro[i].wait=pro[i].wait+pro[j].burst;
        }
    }
    for(i=0;i<nop;i++)
    {
        printf("\nP%d Wait Time : %d",pro[i].id,pro[i].wait);
        printf("\nP%d Turn Around Time : %d",pro[i].id,(pro[i].wait+pro[i].burst));
        fcfsawt=fcfsawt+pro[i].wait;
        fcfsatrt=fcfsatrt+(pro[i].wait+pro[i].burst);
    }
    printf("\n\nAWT of FCFS : %f",fcfsawt/nop);
    printf("\n\nATRT of FCFS : %f",fcfsatrt/nop);
    break;
    }

case 2:
    {
    init();
    nop=getdata();
    printf("\nTable before arranging ...\n");
    table(pro,nop);
    for(i=1;i<nop;i++)
    {
        for(j=0;j<nop-i;j++)
        {
            if(pro[j].burst>pro[j+1].burst)
            {
                tmppro=pro[j];
                pro[j]=pro[j+1];
                pro[j+1]=tmppro;
            }
        }
    }
    printf("\nTable after arranging ...\n");
    table(pro,nop);
    gantt(pro,nop);
    sjfawt=0;
    sjfatrt=0;
    for(i=nop-1;i>=0;i--)
    {
        pro[i].wait=0;
        for(j=0;j<i;j++)
        {
            pro[i].wait=pro[i].wait+pro[j].burst;
        }
    }
    for(i=0;i<nop;i++)
    {
        printf("\nP%d Wait Time : %d",pro[i].id,pro[i].wait);
        printf("\nP%d Turn Around Time : %d",pro[i].id,(pro[i].wait+pro[i].burst));
        sjfawt=sjfawt+pro[i].wait;sjfatrt=sjfatrt+(pro[i].wait+pro[i].burst);
    }
    printf("\n\nAWT of SJF : %f",sjfawt/nop);
    printf("\n\nATRT of SJF : %f",sjfatrt/nop);
    break;
    }

case 3:
    {
    init();
    j=0;
    ret=0;
    nop=getdata();
    for(i=0;i<nop;i++)
        tburst[i]=pro[i].burst;
    printf("\nPlease enter the time quantum : ");
    scanf("%d",&quantum);
    for(i=0;i<nop;i++)
    {
        if(pro[i].burst>0)
        {
            if(pro[i].burst>quantum)
            {
                temp[j].id=pro[i].id;
                temp[j].burst=quantum;
                pro[i].burst=pro[i].burst-quantum;
                j++;
                incwait(quantum,pro[i].id);
            }
            else
            {
                temp[j]=pro[i];
                j++;
                incwait(pro[i].burst,pro[i].id);
                pro[i].burst=0;
            }
        }
        if(i==nop-1)
        {
            for(z=0;z<nop;z++)
            {
                if(pro[z].burst!=0)
                {
                    i=-1;break;
                }
                elseif(z==(nop-1)) ret=1;
            }
        }
        if(ret==1) break;
    }
    table(temp,40);
    gantt(temp,40);
    printf("\n\nRound Robin awt and atrt : ");
    rrawt=0;
    rratrt=0;
    for(i=0;i<nop;i++)
    {
        printf("\nP%d Wait Time : %d",pro[i].id,pro[i].wait);
        printf("\nP%d Turn Around Time : %d",pro[i].id,(pro[i].wait+tburst[i]));
        rrawt=rrawt+pro[i].wait;rratrt=rratrt+(pro[i].wait+tburst[i]);
    }
    printf("\n\nAWT of RR : %f",rrawt/nop);
    printf("\n\nATRT of RR : %f",rratrt/nop);break;
    }
}

printf("\n\nPress 1 to cont ...");
scanf("%d",&ans);
}
while(ans==1);
}

incwait(int tempburst,int id)
{
    int i=0;
    for(i=0;i<nop;i++)
    {
    if(pro[i].id!=id && pro[i].burst>0)
    pro[i].wait=pro[i].wait+tempburst;
    }
}

init()
{
    int i;
    nop=0;
    for(i=0;i<10;i++)
    {
        pro[i].burst=0;
        pro[i].id=0;
        pro[i].wait=0;
    }
    for(i=0;i<20;i++)
    {
        temp[i].burst=0;
        temp[i].id=0;
        temp[i].wait=0;
    }
}

table(struct process pro[],int nop)
{
    int i;
    printf("\n\n\n* * * * * * * PROCESS TABLE * * * * * * *\n\n");
    printf("\nProcess Name Burst Time");
    for(i=0;i<nop;i++)
    {
        if(pro[i].id==0)break;
        printf("\nP%d\t\t%d\t\t%d",pro[i].id,pro[i].burst);
    }
}

gantt(struct process pro[],int nop)
{
    int t=0,i;
    int procount=0;
    printf("\n\n\n* * * * * * * GANTT CHART * * * * * * *\n\n");
    i=0;
    while(pro[i].id>0)
    {
        procount++;i++;
    }
    printf("\nÚ");
    for(i=0;i<procount;i++)
    printf("--------");
    printf("\n³");
    for(i=0;i<procount;i++)
        printf(" P%d ³",pro[i].id);
    printf("\nÀ");
    for(i=0;i<procount;i++)
        printf("--------");
    printf("\n");
    for(i=0;i<procount;i++)
    {
        printf("%d\t",t);
        t=t+pro[i].burst;
    }
    printf("%d",t);
}

int getdata()
{
    int i,nop;
    printf("\n\nPlease enter the number of processes : ");
    scanf("%d",&nop);
    printf("\nPlease enter the ID and Burst time of each process : ");
    printf("\n");
    for(i=0;i<nop;i++)
    {
        printf("\nID : P%d",i+1);
        pro[i].id=i+1;
        printf("\nBurst Time : ");
        scanf("%d",&pro[i].burst);
    }
    return nop;
}

Subscribe to: Posts ( Atom )

Sunday, September 16, 2012

3D Cube using HTML5 CSS3

Sunday, January 22, 2012

C implementation of FCFS, SJF, ROUND ROBIN

Popular Posts

Category

Blog Archive

Unknown