Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>squadron - Interactive DHTML art-demos</title> |
| <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> |
| <meta http-equiv="imagetoolbar" content="no"> |
| <style type="text/css"> |
| html { |
| overflow: hidden; |
| } |
| body { |
| margin: 0px; |
| padding: 0px; |
| background: #111; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| #screen { |
| position: absolute; |
| left: 0%; |
| top: 0%; |
| width: 100%; |
| height: 100%; |
| background: #fff; |
| overflow: hidden; |
| } |
| #canvasImages { |
| visibility: hidden; |
| } |
| #matrixImages { |
| visibility: hidden; |
| } |
| </style> |
| <script type="text/javascript" src="library/imgRotate.js"></script> |
| <script type="text/javascript"> |
| // ===================================================================== |
| // script written by Gerard Ferrandez |
| // http://www.dhteumeuleu.com |
| // =================================================== |
| // IE DXTransform version - February 2004 |
| // Firefox/Opera <canvas> version - July 2006 |
| // uses imgRotate.js mini-library |
| // ===================================================================== |
| // |
| var xm = 0; |
| var ym = 0; |
| var nx = 0; |
| var ny = 0; |
| var nw = 0; |
| var nh = 0; |
| function resize() { |
| var scr = document.getElementById("screen"); |
| nx = scr.offsetLeft; |
| ny = scr.offsetTop; |
| nw = scr.offsetWidth; |
| nh = scr.offsetHeight; |
| canvas.resize(nw, nh); |
| gridResize(); |
| } |
| onresize = resize; |
| document.onmousemove = function(e) { |
| if (window.event) e=window.event; |
| xm = (e.x || e.clientX) - nx; |
| ym = (e.y || e.clientY) - ny; |
| } |
| //////////////////////// |
| var Nx = 6; |
| var Ny = 4; |
| var A = .4; |
| //////////////////////// |
| var o = []; |
| var N = Nx * Ny; |
| var ok = false; |
| obZ = function(img) { |
| this.x = 0; |
| this.y = 0; |
| this.O = createImage(img, "nearest"); |
| } |
| function gridResize() { |
| if(ok){ |
| var k = 0; |
| var Xn = nw / Nx; |
| var Yn = nh / Ny; |
| for(var i=0;i<Nx;i++){ |
| for(var j=0;j<Ny;j++){ |
| var p = o[k++]; |
| p.x = i * Xn + Xn / 2; |
| p.y = j * Yn + Yn / 2; |
| } |
| } |
| } |
| } |
| function mainloop() { |
| if (isCanvas) context.clearRect(0, 0, nw, nh); |
| var i = 0, p; |
| while (p = o[i++]) { |
| var ang = Math.atan2(ym - p.y, xm - p.x); |
| p.O.drawImage(p.x, p.y, ang + A, 1); |
| } |
| } |
| onload = function() { |
| /* ==== create Canvas container ==== */ |
| canvas = createCanvas(document.getElementById("screen")); |
| /* ==== initial size ===== */ |
| resize(); |
| xm = nx + nw / 2; |
| ym = ny + nh / 5; |
| /* ==== create structure ==== */ |
| for (var i=0; i<N; i++) o[i] = new obZ(0); |
| ok = true; |
| resize(); |
| setInterval(mainloop, 16); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"></div> |
| <div id="canvasImages"> |
| <img alt="0" src="../images/CAMR81O9.png"> |
| </div> |
| <div id="matrixImages"> |
| <img alt="0" src="../images/CAMR81O9.gif"> |
| </div> |
| </body> |
| </html> |
