Team:IIT Delhi/javascript

From 2014.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
-
{{CSS/Main}}
 
-
 
-
 
<html>
<html>
<head>
<head>
<title>third</title>
<title>third</title>
<style>
<style>
-
/*some basic reset*/
+
body
-
* {margin: 0; padding: 0;}
+
{
-
canvas {display: block;}
+
    -webkit-transform: translate3d(0, 0, 0);
-
body {background: black;}
+
        -ms-transform: translate3d(0, 0, 0);
-
center{color:white;}
+
}
-
</style>
+
-
</head>
+
-
<body>
+
-
<center><h1>igem iit delhi</h1></center>
+
-
<script>
+
-
//creating a canvas using JS
+
-
var canvas = document.createElement("canvas");
+
-
//making the canvas fullscreen
+
-
var w = canvas.width = window.innerWidth;
+
-
var h = canvas.height = window.innerHeight;
+
-
var fov = 250; //pixels are 250px away from us
+
.most-inner
 +
{
 +
    z-index: 99;
-
var ctx = canvas.getContext("2d");
+
    box-sizing: border-box;
-
//appending the canvas to the body
+
    width: 100%;
-
document.body.appendChild(canvas);
+
    height: 100%;
 +
    padding: 2px;
-
//an array of pixels with 3 dimensional coordinates
+
-
//a square sheet of dots separated by 5px
+
 
-
var pixels = [];
+
    opacity: .85;
-
for(var x = -250; x < 250; x+=5)
+
    border: 3px solid #112233;
-
for(var z = -250; z < 250; z+=5)
+
    border-radius: 50%;
-
pixels.push({x: x, y: 40, z: z});
+
    background: #fff;
-
+
 
-
//time to draw the pixels
+
    transform-style: preserve-3d;
-
function render()
+
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.most-inner:hover
{
{
-
ctx.clearRect(0,0,w,h);
+
    -webkit-transform: rotate3d(-45, -45, 0, 180deg);
-
//grabbing a screenshot of the canvas using getImageData
+
            transform: rotate3d(-45, -45, 0, 180deg);
-
var imagedata = ctx.getImageData(0,0,w,h);
+
 
-
//looping through all pixel points
+
    opacity: 1;
-
var i = pixels.length;
+
 
-
while(i--)
+
 
-
{
+
 
-
var pixel = pixels[i];
+
-
//calculating 2d position for 3d coordinates
+
-
//fov = field of view = denotes how far the pixels are from us.
+
-
//the scale will control how the spacing between the pixels will decrease with increasing distance from us.
+
-
var scale = fov/(fov+pixel.z);
+
-
var x2d = pixel.x * scale + w/2;
+
-
var y2d = pixel.y * scale + h/2;
+
-
//marking the points green - only if they are inside the screen
+
-
if(x2d >= 0 && x2d <= w && y2d >= 0 && y2d <= h)
+
-
{
+
-
//imagedata.width gives the width of the captured region(canvas) which is multiplied with the Y coordinate and then added to the X coordinate. The whole thing is multiplied by 4 because of the 4 numbers saved to denote r,g,b,a. The final result gives the first color data(red) for the pixel.
+
-
var c = (Math.round(y2d) * imagedata.width + Math.round(x2d))*4;
+
-
imagedata.data[c] = 0; //red
+
-
imagedata.data[c+1] = 255; //green
+
-
imagedata.data[c+2] = 60; //blue
+
-
imagedata.data[c+3] = 255; //alpha
+
-
}
+
-
pixel.z -= 1;
+
-
if(pixel.z < -fov) pixel.z += 2*fov;
+
-
}
+
-
//putting imagedata back on the canvas
+
-
ctx.putImageData(imagedata, 0, 0);
+
}
}
-
//animation time
+
.inner-one
-
setInterval(render, 1000/30);
+
{
-
</script>
+
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-one:hover
 +
{
 +
    -webkit-transform: rotate3d(45, 45, 0, 180deg);
 +
            transform: rotate3d(45, 45, 0, 180deg);
 +
 
 +
    opacity: .85;
 +
 
 +
 
 +
}
 +
 
 +
.inner-two
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-two:hover
 +
{
 +
    -webkit-transform: rotate3d(90, 90, 0, 180deg);
 +
            transform: rotate3d(90, 90, 0, 180deg);
 +
 
 +
 
 +
}
 +
 
 +
.inner-three
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-three:hover
 +
{
 +
    -webkit-transform: rotate3d(135, -135, 0, 180deg);
 +
            transform: rotate3d(135, -135, 0, 180deg);
 +
 
 +
 
 +
}
 +
 
 +
.inner-four
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-four:hover
 +
{
 +
    -webkit-transform: rotate3d(-180, -180, 0, -180deg);
 +
            transform: rotate3d(-180, -180, 0, -180deg);
 +
 
 +
 
 +
}
 +
 
 +
.inner-five
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-five:hover
 +
{
 +
    -webkit-transform: rotate3d(-270, -270, 0, -180deg);
 +
            transform: rotate3d(-270, -270, 0, ---180deg);---------
 +
 
 +
 
 +
}
 +
.inner-six
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-six:hover
 +
{
 +
    -webkit-transform: rotate3d(-315, 315, 0, -180deg);
 +
            transform: rotate3d(-315, 315, 0, --180deg);-------
 +
 
 +
 
 +
}
 +
.inner-seven
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-seven:hover
 +
{
 +
    -webkit-transform: rotate3d(360, -360, 0, -180deg);
 +
            transform: rotate3d(360, -360, 0, ---180deg);-------
 +
 
 +
 
 +
}
 +
.inner-eight
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-eight:hover
 +
{
 +
    -webkit-transform: rotate3d(315, -315, 0, -180deg);
 +
            transform: rotate3d(315, -315, 0, --180deg);-----
 +
 
 +
 
 +
}
 +
.inner-nine
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-nine:hover
 +
{
 +
    -webkit-transform: rotate3d(270, -270, 0, -180deg);
 +
            transform: rotate3d(270, -270, 0, ---180deg);-----
 +
 
 +
 
 +
}
 +
.inner-ten
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-ten:hover
 +
{
 +
    -webkit-transform: rotate3d(225, -225, 0, -180deg);
 +
            transform: rotate3d(225, -225, 0, --180deg);---
 +
 
 +
 
 +
}.inner-eleven
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-eleven:hover
 +
{
 +
    -webkit-transform: rotate3d(180, -180, 0, -180deg);
 +
            transform: rotate3d(180, -180, 0, ---180deg);---
 +
 
 +
 
 +
}.inner-twelve
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-twelve:hover
 +
{
 +
    -webkit-transform: rotate3d(125, -125, 0, -180deg);
 +
            transform: rotate3d(125, -125, 0, --180deg);-
 +
 
 +
 
 +
}.inner-thirteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-thirteen:hover
 +
{
 +
    -webkit-transform: rotate3d(90, -90, 0, -180deg);
 +
            transform: rotate3d(90, -90, 0, --180deg);-
 +
 
 +
 
 +
}.inner-fourteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-fourteen:hover
 +
{
 +
    -webkit-transform: rotate3d(45, -45, 0, -180deg);
 +
            transform: rotate3d(45, -45, 0, -180deg);
 +
 
 +
 
 +
}.inner-fifteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-fifteen:hover
 +
{
 +
    -webkit-transform: rotate3d(90, -90, 0, 180deg);
 +
            transform: rotate3d(90, -90, 0, 180deg);
 +
 
 +
 
 +
}.inner-sixteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-sixteen:hover
 +
{
 +
    -webkit-transform: rotate3d(135, -135, 0, 180deg);
 +
            transform: rotate3d(135, -135, 0, 180deg);
 +
 
 +
 
 +
}.inner-seventeen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-seventeen:hover
 +
{
 +
    -webkit-transform: rotate3d(180, -180, 0, 180deg);
 +
            transform: rotate3d(180, -180, 0, 180deg);
 +
 
 +
 
 +
}
 +
.inner-eighteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-eighteen:hover
 +
{
 +
    -webkit-transform: rotate3d(225, -225, 0, 180deg);
 +
            transform: rotate3d(225, -225, 0, 180deg);
 +
 
 +
 
 +
}.inner-nineteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-nineteen:hover
 +
{
 +
    -webkit-transform: rotate3d(270, -270, 0, 180deg);
 +
            transform: rotate3d(270, -270, 0, 180deg);
 +
 
 +
 
 +
}
 +
 
 +
.inner-twenty
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-twenty:hover
 +
{
 +
    -webkit-transform: rotate3d(315, -315, 0, 180deg);
 +
            transform: rotate3d(315, -315, 0, 180deg);
 +
 
 +
 
 +
}
 +
 
 +
.container
 +
{
 +
    width: 300px;
 +
    height: 300px;
 +
    margin: 1%;
 +
 
 +
    -webkit-transform: translate3d(0,0,0);
 +
 
 +
            perspective: 1000px;
 +
    -webkit-perspective: 1000px;
 +
}
 +
 
 +
</style>
 +
<body>
 +
<div class="container">
 +
<div class="inner-two">
 +
<div class="inner-three">
 +
<div class="inner-four">
 +
<div class="inner-five">
 +
<div class="inner-six">
 +
<div class="inner-seven">
 +
<div class="inner-eight">
 +
<div class="inner-nine">
 +
<div class="inner-ten">
 +
<div class="inner-eleven">
 +
<div class="inner-twelve">
 +
<div class="inner-thirteen">
 +
<div class="inner-fourteen">
 +
<div class="inner-fifteen">
 +
<div class="inner-sixteen">
 +
<div class="inner-seventeen">
 +
<div class="inner-eighteen">
 +
<div class="inner-nineteen">
 +
<div class="inner-twenty">         
 +
<div class="most-inner">
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
</body>
</body>
</html>
</html>

Latest revision as of 13:27, 19 May 2015

third

Retrieved from "http://2014.igem.org/Team:IIT_Delhi/javascript"