Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>piece of wood - Interactive DHTML art-demos</title> |
| <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> |
| <style type="text/css"> |
| html { |
| overflow: hidden; |
| } |
| body { |
| margin: 0px; |
| padding: 0px; |
| background: #222; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| cursor: crosshair; |
| } |
| #canvas { |
| position:absolute; |
| left: 0%; |
| top: 0%; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| overflow: hidden; |
| } |
| #matrixImages { |
| visibility: hidden; |
| } |
| #canvas img { |
| position: absolute; |
| } |
| </style> |
| <!-- rotation library CSS3 Transform || HTML 5 canvas || IE matrix filter --> |
| <script type="text/javascript" src="library/imgRotateCSS3.js"></script> |
| <script type="text/javascript"> |
| // ============================================================ |
| // ===== ragdoll engine ===== |
| // script: Gerard Ferrandez - Ge-1-doot - March 2007 |
| // http://www.dhteumeuleu.com |
| // updated rotate library (CSS3 Transform): April 2009 |
| // ============================================================ |
| /* ===== global vars ===== */ |
| var dolls = []; |
| var xm = 0; |
| var ym = 0; |
| var canvas = false; |
| var context; |
| var sphere; |
| var sw; |
| /* ===== screen resize ===== */ |
| function resize() { |
| var o = document.getElementById("canvas"); |
| canvas.nw = o.offsetWidth; |
| canvas.nh = o.offsetHeight; |
| for (canvas.nx = 0, canvas.ny = 0; o != null; o = o.offsetParent) { |
| canvas.nx += o.offsetLeft; |
| canvas.ny += o.offsetTop; |
| } |
| if (canvas) { |
| canvas.resize(); |
| sw = canvas.nh / 4; |
| sphere.style.width = sphere.style.height = sw + 'px'; |
| } |
| } |
| onresize = resize; |
| /* ===== mouse position ===== */ |
| document.onmousemove = function(e){ |
| if (window.event) e=window.event; |
| if (canvas) { |
| xm = (e.x || e.clientX); |
| ym = (e.y || e.clientY); |
| } |
| } |
| ///////////////////////////////// ==== ragdoll engine ==== ////////////////////////////////////////////// |
| /* ====== constructor Points ====== */ |
| function Point(doll) { |
| this.x = doll.x + Math.random(); |
| this.y = canvas.nh * .5 + Math.random(); |
| this.xb = this.x; |
| this.yb = this.y + Math.random() * 10; |
| this.w = 0; |
| this.links = []; |
| this.stiffness = doll.stiffness; |
| this.anim = function (){ |
| /* ==== calculates links angles ==== */ |
| for (var i = 0, o; o = this.links[i++]; o.trigo()); |
| /* ==== inertia + stiffness ==== */ |
| var vx = (this.x - this.xb) * this.stiffness; |
| var vy = (this.y - this.yb) * this.stiffness; |
| this.xb = this.x; |
| this.yb = this.y; |
| this.x += vx; |
| this.y += vy; |
| /* ==== mouse collision ==== */ |
| var dx = this.x - (xm - canvas.nx); |
| var dy = this.y - (ym - canvas.ny); |
| var d = Math.sqrt(dx * dx + dy * dy); |
| var w = (sw + this.w) * .5; |
| if (d < w) { |
| d = Math.abs(w - d); |
| a = Math.atan2(dy, dx); |
| this.x += d * Math.cos(a); |
| this.y += d * Math.sin(a); |
| } |
| /* ==== screen limits ==== */ |
| if (this.y < 0) { |
| this.yb = this.y; |
| this.y = 0; |
| } |
| else if (this.y > canvas.nh) { |
| this.yb = canvas.nh + (this.y - canvas.nh); |
| this.y = canvas.nh; |
| } |
| if (this.x < 0) { |
| this.xb = this.x; |
| this.x = 0; |
| } |
| else if (this.x > canvas.nw) { |
| this.xb = canvas.nw + (this.x - canvas.nw); |
| this.x = canvas.nw; |
| } |
| } |
| } |
| /* ====== creates point ====== */ |
| function createPoint(doll, i, link, width) { |
| if (!doll.points[i]) doll.points[i] = new Point(doll); |
| var o = doll.points[i]; |
| /* ==== link to point ==== */ |
| if (link) { |
| if (width > o.w) o.w = width; |
| o.links.push(link); |
| } |
| return o; |
| } |
| /* ====== constructor Links ====== */ |
| function Link(doll, L) { |
| this.doll = doll; |
| this.height = L[2] * doll.s; |
| this.width = L[3] * doll.s; |
| this.image = L[4]; |
| this.posAng = L[6]; |
| this.force = L[7]; |
| this.ofsA = L[8] ? L[8] : 0; |
| this.ofsL = L[9] ? L[9] * doll.s : 0; |
| this.sy0 = L[10] ? L[10] * doll.s : 0; |
| this.cord = L[11]; |
| if (this.cord) this.icord = iR.createImage(this.cord, "nearest"); |
| this.parent = L.parent; |
| this.p0 = createPoint(doll, L[0], this, this.width); |
| this.p1 = createPoint(doll, L[1]); |
| this.angle = 0; |
| this.ox = 0; |
| this.oy = 0; |
| this.ax = 0; |
| this.ay = 0; |
| doll.render[L[5]] = this; |
| /* ==== calculates links angles ==== */ |
| this.trigo = function () { |
| if (this.parent) { |
| /* ==== position offset ==== */ |
| this.ox = this.ofsL * Math.cos(this.parent.angle + this.ofsA); |
| this.oy = this.ofsL * Math.sin(this.parent.angle + this.ofsA); |
| } |
| /* ==== median position ==== */ |
| var a = (this.parent ? this.parent.angle : 0) + this.posAng; |
| this.ax = Math.cos(a) * this.force; |
| this.ay = Math.sin(a) * this.force; |
| /* ==== angle ====*/ |
| this.dx0 = this.p1.x - (this.p0.x + this.ox); |
| this.dy0 = this.p1.y - (this.p0.y + this.oy); |
| this.angle = Math.atan2(this.dy0, this.dx0); |
| /* ==== inverse kinematics ==== */ |
| var d = Math.sqrt(this.dx0 * this.dx0 + this.dy0 * this.dy0); |
| var d0 = (this.height - d) * .5; |
| var dx = this.dx0 / d * d0; |
| var dy = this.dy0 / d * d0; |
| this.p0.x -= (dx + this.ax); |
| this.p0.y -= (dy + this.ay); |
| this.p1.x += (dx + this.ax); |
| this.p1.y += (dy + this.ay); |
| /* ==== saves point for rendering ==== */ |
| this.x = this.p0.x; |
| this.y = this.p0.y; |
| this.d = d; |
| } |
| /* ==== rendering ==== */ |
| this.draw = function () { |
| if (this.cord) { |
| /* ==== cords ==== */ |
| var dx = -this.doll.points[0].x + (this.x + this.ox); |
| var dy = -(this.y + this.oy); |
| var angle = Math.atan2(dy, dx); |
| var d = Math.sqrt(dx * dx + dy * dy); |
| this.icord.drawImage( |
| this.x + this.ox, |
| this.y + this.oy, |
| angle, 0, 0, d, 1 |
| ); |
| } |
| /* ==== link image ==== */ |
| this.img.drawImage( |
| this.x + this.ox, |
| this.y + this.oy, |
| this.angle, |
| this.sy0, |
| this.width * .5, |
| this.d, |
| this.width |
| ); |
| } |
| } |
| /* ====== constructor Doll ====== */ |
| function Doll(x, size, stiffness, struc) { |
| this.x = x; |
| this.s = size; |
| this.stiffness = stiffness; |
| this.points = []; |
| this.render = []; |
| /* ==== loads structure ==== */ |
| for (var link in struc) { |
| var L = struc[link]; |
| /* ==== parents linkage ==== */ |
| for (var linkp in struc) { |
| if(link != linkp){ |
| var Lp = struc[linkp]; |
| if(L[0] == Lp[0] || L[0] == Lp[1]) { |
| L.parent = Lp.link; |
| break; |
| } |
| } |
| } |
| /* ==== creates new link ==== */ |
| L.link = new Link(this, L); |
| } |
| /* ===== creates HTML images in zIndex order ===== */ |
| for (var i = 0, o; o = this.render[i]; i++) o.img = iR.createImage(o.image, "nearest"); |
| /* ==== animate points ==== */ |
| this.anim = function () { |
| for (var i = 0, o; o = this.points[i++]; o.anim()); |
| for (var i = 0, o; o = this.render[i++]; o.draw()); |
| } |
| } |
| /////////////////////////////////////////////////////////////////////////////////////////////// |
| function run(){ |
| /* ===== main loop ===== */ |
| canvas.clearRect(); |
| if (sphere) { |
| sphere.style.left = (xm - canvas.nx - sw * .5) + 'px'; |
| sphere.style.top = (ym - canvas.ny - sw * .5) + 'px'; |
| dolls[0].anim(); |
| dolls[1].anim(); |
| } |
| setTimeout(run, 16); |
| } |
| onload = function() { |
| /* ==== starts script ==== */ |
| sphere = document.getElementById("sphere"); |
| canvas = iR.init("canvas"); |
| resize(); |
| var structure = { |
| // p0, p1, H, W, img, zIndex, angle, force, ofsA, ofsL, py0, cord |
| p1 : [0, 1, 57, 60, "3", 4, Math.PI/2, .1 ], |
| p2 : [1, 2, 73, 25, "5", 1, 0, .5, Math.PI/1.3, 25 ], |
| p3 : [2, 3, 120, 24, "7", 0, 0, .5, 0, -9, 9 ], |
| p4 : [1, 4, 70, 39, "6", 3, 0, .5, -Math.PI/1.3, 25 ], |
| p5 : [4, 5, 116, 49, "8", 2, 0, .5, 0, -9, 9 ], |
| p6 : [0, 6, 85, 79, "2", 5, -Math.PI, .5, 0, 14, 0, "13" ], |
| p7 : [6, 7, 114, 57, "1", 6, 0, .5, 0, -20, 25 ], |
| p8 : [7, 8, 32, 56, "11", 7, 0, 1, 0, -58, 0 ], |
| p9 : [6, 9, 54, 38, "4", 8, -Math.PI/1.2, .5, -Math.PI/1.2, 57 ], |
| p10 : [9, 10, 119, 95, "0", 9, 0, .5, 0, -10, 10, "13" ], |
| p11 : [6, 11, 62, 30, "9", 10, Math.PI/1.2, .5, Math.PI/1.2, 52 ], |
| p12 : [11, 12, 118, 68, "10", 11, 0, .5, 0, -10, 10, "13" ] |
| }; |
| dolls[0] = new Doll(canvas.nw * .5, 1, .99, structure); |
| dolls[1] = new Doll(canvas.nw * .25, 1, 1, { p1 : [0, 1, 164,23, 12, 0, 0, 0] }); |
| run(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="canvas"> |
| <div style="position:absolute;left:50%;top:50%"> |
| <img alt="" src="../images/BS11089.JPG" style="position:absolute;left:-225px;top:-225px"> |
| </div> |
| <img id="sphere" alt="" src="../images/lf1.gif" style="position:absolute;opacity:0.2;filter:alpha(opacity=20);left:-1000px;"> |
| </div> |
| <div id="matrixImages"> |
| <img id="0" src="../images/sm01.gif" alt=""> |
| <img id="1" src="../images/sm02.gif" alt=""> |
| <img id="2" src="../images/sm03.gif" alt=""> |
| <img id="3" src="../images/sm04.gif" alt=""> |
| <img id="4" src="../images/sm05.gif" alt=""> |
| <img id="5" src="../images/sm06.gif" alt=""> |
| <img id="6" src="../images/sm07.gif" alt=""> |
| <img id="7" src="../images/sm08.gif" alt=""> |
| <img id="8" src="../images/sm09.gif" alt=""> |
| <img id="9" src="../images/sm10.gif" alt=""> |
| <img id="10" src="../images/sm11.gif" alt=""> |
| <img id="11" src="../images/sm12.gif" alt=""> |
| <img id="12" src="../images/NDK_baton.gif" alt=""> |
| <img id="13" src="../images/pixelblanc.jpg" alt=""> |
| </div> |
| </body> |
| </html> |
Recent Comments
February 6, 2010 (8:42)