Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>reluctant - 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%; |
| cursor: crosshair; |
| } |
| #screen { |
| position: absolute; |
| left: 0%; |
| top: 0%; |
| width: 100%; |
| height: 100%; |
| background: #111; |
| overflow: hidden; |
| } |
| #canvasImages { |
| visibility: hidden; |
| } |
| #matrixImages { |
| visibility: hidden; |
| } |
| </style> |
| <script type="text/javascript" src="library/imgRotate.js"></script> |
| <script type="text/javascript"> |
| // ================================================ |
| // __| _ | | | |
| // (_ | -_) | _` | _ \ _ \ _| |
| // \___|\___| _|\__,_|\___/\___/\__| |
| // --------------------------------------------------- |
| // adaptation d'un script de MPē sur la base d'un |
| // script de GeraR&D Ferrandez - Ge-1-doot - JUN 2oo3 |
| // sur la base d'un script de Jeff Lander, Darwin 3D, LLC |
| // ------ "Oh My God I Inverted Kine" ------- |
| // --------------------------------------------------- |
| // http://www.dhteumeuleu.com |
| // modified July 2006 - imgRotate.js |
| // =================================================== |
| var xm = 0; |
| var ym = -100; |
| 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; |
| S = nh / 500; |
| L = 130 * S; |
| L2 = L * L; |
| canvas.resize(nw, nh); |
| } |
| onresize = resize; |
| document.onmousemove = function(e) { |
| if (window.event) e=window.event; |
| xm = (e.x || e.clientX) - nx - nw / 2; |
| ym = (e.y || e.clientY) - ny - nh / 2; |
| hr = 0; |
| } |
| var ALPH = 0; |
| var THETA1 = 0; |
| var THETA2 = 0; |
| var O1, O2, O3; |
| var S, L, L2; |
| var xM = 0; |
| var yM = -100; |
| var hr = 0; |
| function inverse_kinematic(){ |
| xM += Math.round((xm-xM)/10); |
| yM += Math.round((ym-yM)/10); |
| R = xM * xM + yM * yM; |
| if (R < .01) R = .0001, xM = .01; |
| r = Math.sqrt(R); |
| ALPH = Math.atan(yM / xM); |
| if (xM < 0) ALPH = Math.PI + ALPH; |
| c = Math.min(1,Math.max(-1,R / (2 * L * r))); |
| THETA1 = ALPH - Math.acos(c); |
| var px = nw*.5 + L * Math.cos(THETA1); |
| var py = nh*.5 + L * Math.sin(THETA1); |
| c = Math.min(1,Math.max(-1,(R - L2 - L2) / (2 * L * L))); |
| if (isCanvas) context.clearRect(0, 0, nw, nh); |
| THETA2 = THETA1 + Math.acos(c); |
| O3.drawImage(nw*.5, nh*.5, 0, 1 , 20*S , 23*S, O3.w*S, O3.h*S); |
| O2.drawImage(nw*.5, nh*.5, THETA1, 1 , 22*S , 22*S, O2.w*S, O2.h*S); |
| O1.drawImage(px, py, THETA2, 1 , 44*S , 40*S, O1.w*S, O1.h*S); |
| hr++; |
| if(hr>100){ |
| xm = 0; |
| ym = -100; |
| } |
| } |
| onload = function() { |
| /* ==== create Canvas container ==== */ |
| canvas = createCanvas(document.getElementById("screen")); |
| /* ==== initial size ===== */ |
| resize(); |
| /* ==== create structure ==== */ |
| O3 = createImage(0, "nearest"); |
| O2 = createImage(1, "nearest"); |
| O1 = createImage(2, "nearest"); |
| setInterval(inverse_kinematic, 16); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"></div> |
| <div id="canvasImages"> |
| <img alt="0" src="../images/arm3.png"> |
| <img alt="1" src="../images/arm2.png"> |
| <img alt="2" src="../images/arm1.png"> |
| </div> |
| <div id="matrixImages"> |
| <img alt="0" src="../images/arm3.gif"> |
| <img alt="1" src="../images/arm2.gif"> |
| <img alt="2" src="../images/arm1.gif"> |
| </div> |
| </body> |
| </html> |
