Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>low enough - 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; |
| background: #000; |
| width: 70%; |
| height: 80%; |
| left: 15%; |
| top: 10%; |
| cursor: url("../cursor.cur"), auto; |
| } |
| #screen img { |
| position: absolute; |
| -ms-interpolation-mode:nearest-neighbor; |
| image-rendering: optimizeSpeed; |
| } |
| #cbox { |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| <script type="text/javascript"> |
| // ==================================================== |
| // __| _ | | | |
| // (_ | -_) | _` | _ \ _ \ _| |
| // \___|\___| _|\__,_|\___/\___/\__| |
| // --------------------------------------------------- |
| // script: Gerard Ferrandez - Ge-1-doot - Sept 2006 |
| // http://www.dhteumeuleu.com |
| // ==================================================== |
| var O; |
| var xm = 0; |
| var ym = 0; |
| var scr = false; |
| ///////////////////////////// |
| var size = 250; |
| var spd = .2; |
| var amp = .95; |
| var app = .01; |
| ///////////////////////////// |
| document.onmousemove = function(e) { |
| if (!e) e = window.event; |
| if(scr) { |
| xm = (e.x || e.clientX) - scr.offsetLeft; |
| ym = (e.y || e.clientY) - scr.offsetTop; |
| } |
| return false; |
| } |
| function Ring(i, N, img, x, y, w, h) { |
| this.x = x; |
| this.y = y; |
| this.xb = x; |
| this.yb = y; |
| if(i < N-1) { |
| this.o = document.createElement("img"); |
| this.o.src = img.src; |
| this.o.style.width = Math.round(w)+"px"; |
| this.o.style.height = Math.round(h)+"px"; |
| this.w = w * .5; |
| this.h = h * .5; |
| scr.appendChild(this.o); |
| this.o = this.o.style; |
| } |
| } |
| function Chain(N, img) { |
| this.N = N; |
| this.rings = []; |
| for (var i = 0; i < this.N; i++) { |
| var w = (scr.offsetHeight / size) * i; |
| this.rings.push( |
| new Ring(i, N, img, i + scr.offsetWidth*.5, 0, 2+w, 2+w) |
| ); |
| } |
| this.p1 = this.rings[0]; |
| this.p2 = this.rings[this.N - 1]; |
| } |
| Chain.prototype.anim = function(x0,y0,x1,y1) { |
| for (var i = 0; i < this.N; i++) { |
| var p = this.rings[i]; |
| var px = p.x; |
| var py = p.y; |
| p.x += (p.x - p.xb); |
| p.y += (p.y - p.yb + app); |
| p.xb = px; |
| p.yb = py; |
| } |
| this.p2.x = x1; |
| this.p2.y = y1; |
| this.p1.x = x0; |
| this.p1.y = y0; |
| var d1 = 0; |
| for (i = 0; i < this.N - 1; i++) { |
| var p1 = this.rings[i]; |
| var p2 = this.rings[i + 1]; |
| var dx = p1.x - p2.x; |
| var dy = p1.y - p2.y; |
| var d = Math.sqrt(dx * dx + dy * dy); |
| d1 = d + (d1 - d) * amp; |
| var d2 = (d - d1) / d * spd; |
| p1.x = p1.x - dx * d2; |
| p1.y = p1.y - dy * d2; |
| p2.x = p2.x + dx * d2; |
| p2.y = p2.y + dy * d2; |
| p1.o.left = Math.round(p1.x - p1.w)+"px"; |
| p1.o.top = Math.round(p1.y - p1.h)+"px"; |
| } |
| } |
| function run() { |
| O.anim( |
| scr.offsetWidth * .5, |
| scr.offsetHeight * .12, |
| xm, ym); |
| setTimeout(run, 16); |
| } |
| onload = function() { |
| scr = document.getElementById("screen"); |
| xm = scr.offsetWidth * .8; |
| ym = scr.offsetHeight * .7; |
| O = new Chain(58, document.getElementById("plot")); |
| run(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"> |
| <img alt="" id="cbox" src="../images/cbox.jpg"> |
| </div> |
| <img alt="" id="plot" src="../images/by1.gif" style="visibility:hidden"> |
| </body> |
| </html> |
