Team:IIT Delhi/javascript

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
-
{{CSS/javascript}}
 
<html>
<html>
<head>
<head>
-
<title>js</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>
<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");
 +
//appending the canvas to the body
 +
document.body.appendChild(canvas);
 +
 +
//an array of pixels with 3 dimensional coordinates
 +
//a square sheet of dots separated by 5px
 +
var pixels = [];
 +
for(var x = -250; x < 250; x+=5)
 +
for(var z = -250; z < 250; z+=5)
 +
pixels.push({x: x, y: 40, z: z});
 +
 +
//time to draw the pixels
 +
function render()
 +
{
 +
ctx.clearRect(0,0,w,h);
 +
//grabbing a screenshot of the canvas using getImageData
 +
var imagedata = ctx.getImageData(0,0,w,h);
 +
//looping through all pixel points
 +
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
 +
setInterval(render, 1000/30);
</script>
</script>
-
<h1><span>I</span><span>G</span><span>E</span><span>M</span><span>-</span><span>I</span><span>I</span><span>T</span><span>D</span><span>E</span><span>L</span><span>H</span><span>I</span></h1>
 
</body>
</body>
 +
</html>
</html>

Revision as of 16:28, 25 March 2015


third

igem iit delhi