Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>twinkle twinkle - 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 { |
| position: absolute; |
| margin: 0px; |
| padding: 0px; |
| background: #000; |
| width: 100%; |
| height: 100%; |
| } |
| #screen { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| } |
| #screen .img { |
| position:absolute; |
| left: -1000px; |
| cursor: pointer; |
| z-index: 1; |
| -ms-interpolation-mode:nearest-neighbor; |
| } |
| #pixel { |
| visibility: hidden; |
| } |
| </style> |
| <script type="text/javascript"> |
| // ================================================================ |
| // script: Gerard Ferrandez - Ge-1-doot - January 2006 |
| // http://www.dhteumeuleu.com |
| // clipart: http://www.madlantern.com/clipart/Space.htm |
| // ================================================================ |
| var scr, |
| img, |
| sun, |
| earth, |
| star1, |
| moon, |
| star2, |
| xm = 0, |
| ym = 0, |
| nx = 0, |
| ny = 0, |
| xv = 0, |
| yv = 0, |
| X = 0, |
| Y = 0, |
| Lg = 0, |
| N = 0; |
| ////////////////////////////////////// |
| var gr = .5; // gravity |
| ////////////////////////////////////// |
| /* ======= chain function ======= */ |
| function Chain(img, nbP, L, P, eI) { |
| // create link |
| this.Link = function Link(img){ |
| this.img = document.createElement("img"); |
| scr.appendChild(this.img); |
| this.img.style.position = "absolute"; |
| this.img.src = img.src; |
| this.w = img.width*.5; |
| this.h = img.height*.5; |
| this.x1 = 0; |
| this.y1 = 0; |
| this.par = []; |
| this.L = L; |
| this.P = P; |
| } |
| this.Link.prototype.linkage = function (i, x, y) { |
| if(this.par[i]) { |
| x = this.par[i].x1; |
| y = this.par[i].y1; |
| } |
| var a = Math.round(Math.atan2(this.y1-y, this.x1-x)*100)/100; |
| this.x1 = x+Math.cos(a)*this.L; |
| this.y1 = (4*gr*this.P)+y+Math.sin(a)*this.L; |
| this.img.style.left = Math.round(this.x1-this.w)+"px"; |
| this.img.style.top = Math.round(this.y1-this.h)+"px"; |
| } |
| this.nbP = nbP; |
| this.o = []; |
| this.xp = 0; |
| this.yp = 0; |
| this.eI = eI; |
| this.w = eI.width*.5; |
| this.h = eI.height*.5; |
| /* create chain */ |
| for(var i=0;i<nbP;i++) this.o[i] = new this.Link(img); |
| /* linkage */ |
| for(var i=0;i<nbP;i++) { |
| this.o[i].par[0] = (i>0)?this.o[i-1]:0; |
| this.o[i].par[1] = (i<nbP-1)?this.o[i+1]:0; |
| } |
| } |
| // draw chain |
| Chain.prototype.move = function (x0, y0, x1, y1) { |
| if(x1!=null)for(var i=0;i<this.nbP;i++) this.o[this.nbP-i-1].linkage(1, x1,y1); |
| for(var i=0;i<this.nbP;i++) this.o[i].linkage(0, x0, y0); |
| // save end point |
| if(x1!=null){ |
| this.xp = x1; |
| this.yp = y1; |
| } else { |
| this.xp = this.o[this.nbP-1].x1; |
| this.yp = this.o[this.nbP-1].y1; |
| } |
| // animate end image |
| if(this.eI){ |
| this.eI.style.left = Math.round(this.xp-this.w)+"px"; |
| this.eI.style.top = Math.round(this.yp-this.h)+"px"; |
| } |
| } |
| // ---------- main loop ----------- |
| function run() { |
| // calculate sun position |
| var xb = X; |
| var yb = Y; |
| X += xv; |
| Y += yv+gr; |
| var dx = X-xm; |
| var dy = Y-ym; |
| var d = Math.sqrt(dx*dx+dy*dy); |
| var a = Math.atan2(dy, dx); |
| X = Math.cos(a)*Math.min(Lg,d)+xm; |
| Y = Math.sin(a)*Math.min(Lg,d)+ym; |
| xv = X-xb; |
| yv = Y-yb; |
| // animation |
| sun.move(xm, ym, X, Y); |
| earth.move(X, Y, null); |
| star1.move(sun.o[28].x1, sun.o[28].y1, null); |
| moon.move(earth.xp, earth.yp, null); |
| star2.move(earth.xp, earth.yp, null); |
| setTimeout(run, 32); |
| } |
| // -------------- initialize ------------------- |
| onload = function() { |
| scr = document.getElementById('screen'); |
| // mouse |
| document.onmousemove = function(e){ |
| if(window.event) e=window.event; |
| xm=(e.x || e.clientX); |
| ym=(e.y || e.clientY); |
| } |
| // screen size |
| nx = scr.offsetWidth*.5; |
| ny = scr.offsetHeight*.5; |
| // click |
| document.onmousedown = function(e) { |
| if(window.event) e=window.event; |
| var o=(e.target)?e.target:((e.srcElement)?e.srcElement:null); |
| if(o.className=="img"){ |
| for(var i=0;i<N;i+=2) img[i].src = (gr>0)?img[i+1].src:img[i].s; |
| gr = -gr; |
| } |
| } |
| // images |
| img = scr.getElementsByTagName('img'); |
| N = img.length; |
| for(var i=0;i<N;i++){ |
| img[i].s = img[i].src; |
| img[i].ondrag = new Function("return false;"); |
| } |
| xm = nx; |
| X = nx*.5; |
| Y = ny; |
| // create chains |
| var s = ny/50; |
| var p = document.getElementById('pixel'); |
| sun = new Chain(p, 60, s, 0, img[8]); |
| earth = new Chain(p, 20, s, 1, img[6]); |
| star1 = new Chain(p, 20, s, -1, img[4]); |
| moon = new Chain(p, 20, s, -1, img[2]); |
| star2 = new Chain(p, 50, s, 1, img[0]); |
| Lg = 60*(s*1.2); |
| run(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"> |
| <!-- star --> |
| <img class="img" src="../images/star.gif"> |
| <img class="img" src="../images/star.gif"> |
| <!-- moon --> |
| <img class="img" src="../images/Moon1.gif"> |
| <img class="img" src="../images/Moon3.gif"> |
| <!-- star --> |
| <img class="img" src="../images/Pinwheel4.gif"> |
| <img class="img" src="../images/Pinwheel3.gif"> |
| <!-- planet --> |
| <img class="img" src="../images/Planet0.gif"> |
| <img class="img" src="../images/Orangeplanet.gif"> |
| <!-- sun --> |
| <img class="img" src="../images/Bluesun.gif"> |
| <img class="img" src="../images/Sun1.gif"> |
| </div> |
| <!-- chain --> |
| <img id="pixel" src="../images/px1.gif"> |
| </body> |
| </html> |
Im iNspired. How best can I make a donation from South Africa since I dont have PayPal