|
|
| 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> | + | <div class="accordian"> |
| - | <script> | + | <ul> |
| - | //creating a canvas using JS
| + | <li> |
| - | var canvas = document.createElement("canvas");
| + | <div class="image_title"> |
| - | //making the canvas fullscreen | + | <a href="#">KungFu Panda</a> |
| - | var w = canvas.width = window.innerWidth;
| + | </div> |
| - | var h = canvas.height = window.innerHeight;
| + | <a href="#"> |
| - | | + | <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/> |
| - | var fov = 250; //pixels are 250px away from us
| + | </a> |
| - | | + | </li> |
| - | var ctx = canvas.getContext("2d");
| + | <li> |
| - | //appending the canvas to the body | + | <div class="image_title"> |
| - | document.body.appendChild(canvas);
| + | <a href="#">Toy Story 2</a> |
| - | | + | </div> |
| - | //an array of pixels with 3 dimensional coordinates
| + | <a href="#"> |
| - | //a square sheet of dots separated by 5px
| + | <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/> |
| - | var pixels = [];
| + | </a> |
| - | for(var x = -250; x < 250; x+=5)
| + | </li> |
| - | for(var z = -250; z < 250; z+=5)
| + | <li> |
| - | pixels.push({x: x, y: 40, z: z});
| + | <div class="image_title"> |
| - |
| + | <a href="#">Wall-E</a> |
| - | //time to draw the pixels | + | </div> |
| - | function render()
| + | <a href="#"> |
| - | {
| + | <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/> |
| - | ctx.clearRect(0,0,w,h);
| + | </a> |
| - | //grabbing a screenshot of the canvas using getImageData
| + | </li> |
| - | var imagedata = ctx.getImageData(0,0,w,h);
| + | <li> |
| - | //looping through all pixel points
| + | <div class="image_title"> |
| - | var i = pixels.length;
| + | <a href="#">Up</a> |
| - | while(i--)
| + | </div> |
| - | {
| + | <a href="#"> |
| - | var pixel = pixels[i];
| + | <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/> |
| - | //calculating 2d position for 3d coordinates
| + | </a> |
| - | //fov = field of view = denotes how far the pixels are from us.
| + | </li> |
| - | //the scale will control how the spacing between the pixels will decrease with increasing distance from us.
| + | <li> |
| - | var scale = fov/(fov+pixel.z);
| + | <div class="image_title"> |
| - | var x2d = pixel.x * scale + w/2;
| + | <a href="#">Cars 2</a> |
| - | var y2d = pixel.y * scale + h/2;
| + | </div> |
| - | //marking the points green - only if they are inside the screen | + | <a href="#"> |
| - | if(x2d >= 0 && x2d <= w && y2d >= 0 && y2d <= h) | + | <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> |
| - | {
| + | </a> |
| - | //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. | + | </li> |
| - | var c = (Math.round(y2d) * imagedata.width + Math.round(x2d))*4; | + | </ul> |
| - | imagedata.data[c] = 0; //red
| + | </div> |
| - | 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> | + | |
| | </body> | | </body> |
| - |
| |
| | </html> | | </html> |
"
