Team:IIT Delhi/newpage

From 2014.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 5: Line 5:
<head>
<head>
<title>third</title>
<title>third</title>
-
<style>
 
-
/*some basic reset*/
 
-
* {margin: 0; padding: 0;}
 
-
canvas {display: block;}
 
-
body {background: black;}
 
-
center{color:white;}
 
-
</style>
 
</head>
</head>
<body>
<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
 
-
var ctx = canvas.getContext("2d");
+
<div class="main">
-
//appending the canvas to the body
+
<div class="heading">
-
document.body.appendChild(canvas);
+
<span data-text="i"></span>
 +
<span data-text="G"></span>
 +
<span data-text="E"></span>
 +
<span data-text="M"></span>
 +
<span data-text="-"></span>
 +
<span data-text="I"></span>
 +
<span data-text="I"></span>
 +
<span data-text="T"></span>
 +
<span data-text="D"></span>
-
//an array of pixels with 3 dimensional coordinates
+
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve">
-
//a square sheet of dots separated by 5px
+
  <defs>
-
var pixels = [];
+
    <filter id="blur" x="0" y="0" width="100%" height="100%">
-
for(var x = -250; x < 250; x+=5)
+
      <feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" />
-
for(var z = -250; z < 250; z+=5)
+
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
-
pixels.push({x: x, y: 40, z: z});
+
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
-
+
    </filter>
-
//time to draw the pixels
+
  </defs>
-
function render()
+
<g id="Body" filter="url(#blur)">
-
{
+
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1
-
ctx.clearRect(0,0,w,h);
+
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/>
-
//grabbing a screenshot of the canvas using getImageData
+
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9
-
var imagedata = ctx.getImageData(0,0,w,h);
+
C451.5,251,411,265.5,411,265.5"/>
-
//looping through all pixel points
+
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301
-
var i = pixels.length;
+
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7
-
while(i--)
+
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6
-
{
+
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1
-
var pixel = pixels[i];
+
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9
-
//calculating 2d position for 3d coordinates
+
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3
-
//fov = field of view = denotes how far the pixels are from us.
+
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301
-
//the scale will control how the spacing between the pixels will decrease with increasing distance from us.
+
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199
-
var scale = fov/(fov+pixel.z);
+
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899
-
var x2d = pixel.x * scale + w/2;
+
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/>
-
var y2d = pixel.y * scale + h/2;
+
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2
-
//marking the points green - only if they are inside the screen
+
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9
-
if(x2d >= 0 && x2d <= w && y2d >= 0 && y2d <= h)
+
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7
-
{
+
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/>
-
//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.
+
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9
-
var c = (Math.round(y2d) * imagedata.width + Math.round(x2d))*4;
+
c27.7,46.9-44.899,116.1-44.899,116.1"/>
-
imagedata.data[c] = 0; //red
+
</g>
-
imagedata.data[c+1] = 255; //green
+
<g id="TopRed" filter="url(#blur)">
-
imagedata.data[c+2] = 60; //blue
+
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7
-
imagedata.data[c+3] = 255; //alpha
+
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/>
-
}
+
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0
-
pixel.z -= 1;
+
c-8,18,13.7,36.8,40,28.6"/>
-
if(pixel.z < -fov) pixel.z += 2*fov;
+
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3
-
}
+
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/>
-
//putting imagedata back on the canvas
+
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1
-
ctx.putImageData(imagedata, 0, 0);
+
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/>
-
}
+
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6
 +
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2
 +
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/>
 +
</g>
 +
<g id="Bottom_Blue" filter="url(#blur)">
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248
 +
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094
 +
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944
 +
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734
 +
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/>
 +
<path  class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995
 +
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983
 +
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066
 +
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24
 +
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209
 +
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618
 +
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428
 +
c3.867-5.332,7.949-3.578,10.867-0.832"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518
 +
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0
 +
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606
 +
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0
 +
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/>
 +
</g>
 +
<g id="Bottom_Green" filter="url(#blur)">
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423
 +
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976
 +
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5
 +
c2.353-7.144,12.18-8.311,12.667,1.428"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687
 +
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393
 +
c-76.153-41.072-27.25-84.85-16-55.6"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211
 +
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/>
 +
</g>
 +
<g id="TopYellow" filter="url(#blur)">
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25
 +
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1
 +
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333
 +
c-5.838,13,8.962,22.937,13.559,14"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314
 +
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847
 +
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55
 +
c-1.833-2.2-4.083,0.383-2.833,1.716"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735
 +
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231
 +
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333
 +
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163
 +
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486
 +
c-8.788,0.073-16.546-11.799-6.102-20.486"/>
 +
</g>
 +
<g id="BottomYellow"  filter="url(#blur)">
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250
 +
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873
 +
c-1.976,3.596-1.5,10,4.75,12.5"/>
 +
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0
 +
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33
 +
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477
 +
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5
 +
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/>
 +
</g>
 +
</svg>
-
//animation time
 
-
setInterval(render, 1000/30);
 
-
</script>
 
-
</body>
 
 +
<div class="below">
 +
<footer>
 +
<a href="#about" class="btn btn-circle page-scroll">
 +
                            <i class="fa fa-angle-double-down animated"></i>
 +
                        </a>
 +
</footer>
 +
<div class="bubble"></div>
 +
<div class="bubble"></div>
 +
<div class="bubble"></div>
 +
 +
 +
 +
 +
 +
 +
 +
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 +
  <defs>
 +
    <filter id="goo">
 +
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
 +
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
 +
      <feComposite in="SourceGraphic" in2="goo" operator="atop" />
 +
    </filter>
 +
  </defs>
 +
</svg>
 +
</div>
 +
<section id="about" >
 +
       
 +
                <h2>About Grayscale</h2>
 +
                <p>Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on <a href="http://startbootstrap.com/template-overviews/grayscale/">the preview page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p>
 +
                <p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p>
 +
                <p>Grayscale includes full HTML, CSS, and custom JavaScript files along with LESS files for easy customization.</p>
 +
    </section>
 +
</body>
</html>
</html>

Latest revision as of 08:35, 9 June 2015

third

About Grayscale

Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on the preview page. The theme is open source, and you can use it for any purpose, personal or commercial.

This theme features stock photos by Gratisography along with a custom Google Maps skin courtesy of Snazzy Maps.

Grayscale includes full HTML, CSS, and custom JavaScript files along with LESS files for easy customization.

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