lately

On July 13, 2004, in demo, by ge1doot Maximize  Maximize Page : PreviousNext


Direct Link

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>lately - 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: #000; 
		overflow: hidden; 
	} 
	#control { 
		position: absolute; 
		width: 100px; 
		font-family: arial; 
		font-size: 12px; 
		color: #fff; 
		background: #222; 
		border: #444433 solid 1px; 
		z-index: 1000; 
		margin: 10px; 
	} 
	#control input { 
		cursor: pointer; 
	} 
	#skeleton { 
		position: absolute; 
		left: 120px; 
		font-family: arial; 
		font-size: 48px; 
		color: #333; 
		font-weight: bold; 
	} 
	#credit { 
		position: absolute; 
		color: #888; 
		font-family: arial; 
		font-size: 0.8em; 
		width: 99%; 
		text-align: right; 
		bottom: 2px; 
	} 
	a {text-decoration: none;color:#fff;} 
	a:hover	{text-decoration: none;background:#ff8000;color:#fff;} 
	a:visited {text-decoration: none;color:#fff;} 
	a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} 
	#canvasImages { 
		visibility: hidden; 
	} 
	#matrixImages { 
		visibility: hidden; 
	} 
</style> 
 
<script type="text/javascript" src="library/imgRotate.js"></script> 
 
<script type="text/javascript"> 
// =================================================================== 
//   __|     _ |     |           | 
//  (_ |  -_)  |  _` |  _ \  _ \  _| 
// \___|\___| _|\__,_|\___/\___/\__| 
// ------------------------------------------------------------------- 
// script: Gerard Ferrandez - Ge-1-doot 
// http://www.dhteumeuleu.com 
// =================================================================== 
// IE DXTransform version - August 2004 
// Firefox <canvas> version - July 2006 
// 
// 
// imgRotate.js mini-library 
// 
//      /dhtml/this.file.html          [main script] 
//      /dhtml/library/imgRotate.js    [rotation library] 
//      /images/img.gif                [8bits gif images for IE] 
//             /img.png                [24bits png images for FF] 
// 
// =================================================================== 
 
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); 
} 
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 object; 
var mil = true; 
var frm = false; 
var dce = false; 
var hum = true; 
var ray = true; 
var FR  = .96; 
 
function CObj(par, I, arg, argMin, argMax, W, H, x0, y0, x1, y1, zi, I2, W2, H2, x2, y2) { 
	if (W2) this.img2 = createImage(I2, "nearest"); 
	this.img = createImage(I, "nearest"); 
	this.x1     = x1; 
	this.y1     = y1; 
	this.x0     = x0; 
	this.y0     = y0; 
	this.xv     = 0; 
	this.yv     = 0; 
	this.xb     = 0; 
	this.yb     = 0; 
	this.dx     = 0; 
	this.dy     = 0; 
	this.arg    = arg; 
	this.Ax     = Math.cos(arg * Math.PI / 180); 
	this.Ay     = Math.sin(arg * Math.PI / 180); 
	this.a      = 0; 
	this.lim    = (par && argMin != -1); 
	this.argMin = argMin * Math.PI / 180; 
	this.argMax = argMax * Math.PI / 180; 
	this.rx     = x0; 
	this.ry     = y0; 
	this.par    = par; 
	this.L      = Math.sqrt((x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1)); 
	this.H      = H; 
	this.W      = W; 
	this.inv    = (arg < 0 && par.arg >= 0); 
	this.fr     = Math.random() / 100; 
	this.za     = 0; 
	if (W2) { 
		this.W2    = W2; 
		this.H2    = H2; 
		this.rx2   = x2; 
		this.ry2   = y2; 
	} else this.W2 = 0; 
} 
CObj.prototype.groundContact = function (z) { 
	this.xv = 0; 
	if (this.yv > 0) this.yv = 0; 
	this.y1 -= z; 
	if (this.par) this.par.groundContact(z); 
} 
 
CObj.prototype.main = function () { 
	this.xb  = this.x1; 
	this.yb  = this.y1; 
	this.xv *= (FR + this.fr); 
	this.yv *= (FR + this.fr); 
	this.x1 += this.xv; 
	this.y1 += this.yv; 
	if (!this.par) { 
		this.x0 = xm; 
		this.y0 = ym; 
	} else { 
		this.x0 = this.par.x1; 
		this.y0 = this.par.y1; 
	} 
	this.dx = this.x1 - this.x0; 
	this.dy = this.y1 - this.y0; 
	if (!frm) { 
		this.dx += this.Ax; 
		this.dy += this.Ay; 
	} 
	if (dce) { 
		var z = Math.random() * 8; 
		this.dx += Math.cos(this.za += Math.random() * .2) * z; 
		this.dy += Math.sin(this.za += Math.random() * .2) * z; 
	} 
	this.a = Math.atan2(this.dy, this.dx); 
	if (this.lim && mil) { 
		while (this.a - this.par.a >  Math.PI ) this.a -= Math.PI * 2; 
		while (this.a - this.par.a < -Math.PI ) this.a += Math.PI * 2; 
		if (this.a - this.par.a > 0) { 
			if ((this.inv?this.a - this.par.a: this.argMax) < (this.inv? this.argMax:this.a - this.par.a)) 
				this.a = this.par.a + this.argMax; 
		} else { 
			if ((this.inv?this.a - this.par.a:-this.argMin) > (this.inv?-this.argMin:this.a - this.par.a)) 
				this.a = this.par.a - this.argMin; 
		} 
	} 
	this.x1 = this.x0 + Math.cos(this.a) * this.L; 
	this.y1 = this.y0 + Math.sin(this.a) * this.L; 
	if (this.y1 > (nh - this.W)) 
		if (this.par) 
			this.groundContact(this.y1 - (nh - this.W)); 
	this.xv = this.x1 - this.xb; 
	this.yv = this.y1 - this.yb; 
	if (this.W2 && ray) 
		this.img2.drawImage(this.x0, this.y0, this.a - Math.PI * .5, 0.3, this.rx2, this.ry2, this.W2, this.H2); 
	this.img.drawImage(this.x0, this.y0, this.a - Math.PI * .5, 1, this.rx, this.ry, this.W, this.H); 
} 
 
 
 
function mutX() { 
	dce = true; 
	if (ray) { 
		xray(); 
		document.getElementById("xr").checked = false; 
	} 
	setTimeout(function() { 
		dce=false; 
		canvas.innerHTML=''; 
		hum=!hum; 
		struct(); 
	}, 5000); 
} 
 
function xray() { 
	ray=!ray; 
	document.getElementById("xr").checked = ray; 
	var i = 0, o; 
	while (o = object[i++] ) 
		if (o.W2) 
			o.img2.drawImage(-1000, 0, 0, 0, 1, 1, 0, 0); 
} 
 
function struct() { 
	object = new Array(); 
	//                         (parent, image, angle,  AngMin, AngMax,  width, height, x0,  y0,  x1,  y1,  zIndex, image2,   w,   h,  x,  y) 
	// hip 
	object.push(O1 = new CObj(null,     0,    90,      -1,     0,      1,   180,     1, -10,   1, 180,    40  )); 
	object.push(O2 = new CObj(  O1,     1,    90,       0,     0,     30,    45,    15,  17,  15,  30,    25  )); 
	// leg 1 
	object.push(O  = new CObj(  O2,     2,    75,     110,    90,     20,   110,    10,   9,   8, 107,    20  ,     10,  45, 129, 26, 20)); 
	object.push(O  = new CObj(   O,     3,   130,       0,   160,     16,   110,     9,   9,   7, 107,    19  ,     11,  32, 118, 19, 12)); 
	object.push(O  = new CObj(   O,     4,     0,     150,     0,     18,    49,    16,  13,   0,   0,    19  ,     12,  30,  54, 18, 16)); 
	// leg 2 
	object.push(O  = new CObj(  O2,     2,    50,     110,    90,     20,   110,    10,   9,   8, 107,   -10  ,     10,  45, 129, 26, 20)); 
	object.push(O  = new CObj(   O,     3,    90,       0,   160,     16,   110,     9,   9,   7, 107,   -11  ,     11,  32, 118, 19, 12)); 
	object.push(O  = new CObj(   O,     4,     0,     150,     0,     18,    49,    16,  13,   0,   0,   -11  ,     12,  30,  54, 18, 16)); 
	// spinal column 
	object.push(O  = new CObj(  O1,     5,   -90,     160,   160,     16,    55,     8,   0,   8,  50,     0  ,     13,  60,  90, 40, 30)); 
	object.push(O3 = new CObj(   O,     5,   -75,      20,    40,     16,    65,     8,  -1,   8,  60,     0  )); 
	// thorax 
	object.push(O  = new CObj(  O3,     6,   -75,       1,     1,     52,    80,    40,  69,  40,  10,     0  ,     14,  67,  90, 47, 75)); 
	if (hum){ 
	// neck + head 
		object.push(O  = new CObj(  O3,     5,   -60,      60,    30,     12,    40,    10,   0,  10,  36,    -1  ,     13,  30,  50, 20, 10)); 
		object.push(O  = new CObj(   O,     7,   -60,      20,    15,     60,    48,    40,  10,  40,   0,     0  ,     15,  70,  60, 45, 16)); 
	} else { 
		object.push(O  = new CObj(  O3,     5,   -60,      90,    90,     12,    48,     6,   2,   6,  46,    -4  )); 
		object.push(O  = new CObj(   O,     5,   -70,      30,    30,     12,    48,     6,   2,   6,  46,    -4  )); 
		object.push(O  = new CObj(   O,     5,   -80,      30,    30,     12,    48,     6,   2,   6,  46,    -4  )); 
		object.push(O  = new CObj(   O,     7,   -90,      30,    30,     51,    41,    28,  15,   0,  51,    -4  )); 
		object.push(O  = new CObj(  O3,     5,  -120,      90,    90,     12,    48,     6,   2,   6,  46,    -5  )); 
		object.push(O  = new CObj(   O,     5,  -110,      30,    30,     12,    48,     6,   2,   6,  46,    -5  )); 
		object.push(O  = new CObj(   O,     5,  -100,      30,    30,     12,    48,     6,   2,   6,  46,    -5  )); 
		object.push(O  = new CObj(   O,     7,   -90,      30,    30,     51,    41,    28,  15,   0,  51,    -5  )); 
	} 
	// shoulders - arms 
	object.push(O  = new CObj(  O3,     8,    90,      -1,    -1,     16,    80,     8,   5,   8,  80,    30  ,     10,  28,  90, 20, 15)); 
	object.push(O  = new CObj(   O,     9,    60,     140,     0,     20,    90,     6,   6,   6,  85,    30  ,     16,  20,  94, 6,  10)); 
	object.push(O  = new CObj(  O3,     8,    60,      -1,    -1,     16,    80,     8,   5,   8,  80,   -15  ,     10,  28,  90, 20, 15)); 
	object.push(O  = new CObj(   O,     9,     0,     140,     0,     20,    90,     6,   6,   6,  85,   -15  ,     16,  20,  94, 6,  10)); 
} 
 
function run(){ 
	/* ==== clear canvas ==== */ 
	if (isCanvas) 
		context.clearRect(0, 0, nw, nh); 
	/* ==== objects motion ==== */ 
	var i = 0, o; 
	while (o = object[i++] ) 
		o.main(); 
	/* ==== loop ==== */ 
	setTimeout(run, 16); 
} 
 
 
 
onload = function() { 
	/* ==== create Canvas container ==== */ 
	canvas = createCanvas(document.getElementById("screen")); 
	/* ==== initial size ===== */ 
	resize(); 
	xm = nx + nw / 2; 
	ym = ny + nh / 5; 
	/* ==== create structure ==== */ 
	struct(); 
	/* ==== run ==== */ 
	xray(); 
	run(); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"></div> 
 
<div id="control"> 
	<input id="xr" type="checkbox" onClick="xray();"><span> X-ray</span><br> 
	<input type="checkbox" onclick="mil=!mil;if (!mil)if (ray)xr.checked=false,xray();"><span> dislocation</span><br> 
	<input type="checkbox" onclick="frm=!frm;"><span> anti-gravity</span><br> 
	<input type="checkbox" onclick="mutX();"><span> mutation-X</span><br> 
</div> 
<div id="skeleton">DHTML skeleton</div> 
 
<div id="credit"> 
	·home: <a target=_blank href="http://www.dhteumeuleu.com/" title="Interactive DHTML demos">www.dhteumeuleu.com </a> 
</div> 
 
<div id="canvasImages"> 
	<img alt="0" src="../images/pR.png"> 
	<img alt="1" src="../images/ske9.png"> 
	<img alt="2" src="../images/ske1.png"> 
	<img alt="3" src="../images/ske2.png"> 
	<img alt="4" src="../images/ske3.png"> 
	<img alt="5" src="../images/ske6.png"> 
	<img alt="6" src="../images/ske8.png"> 
	<img alt="7" src="../images/ske7.png"> 
	<img alt="8" src="../images/ske4.png"> 
	<img alt="9" src="../images/ske5.png"> 
	<img alt="10" src="../images/se1.png"> 
	<img alt="11" src="../images/se2.png"> 
	<img alt="12" src="../images/se3.png"> 
	<img alt="13" src="../images/se6.png"> 
	<img alt="14" src="../images/se8.png"> 
	<img alt="15" src="../images/se7.png"> 
	<img alt="16" src="../images/se5.png"> 
</div> 
 
<div id="matrixImages"> 
	<img alt="0" src="../images/pR.gif"> 
	<img alt="1" src="../images/ske9.gif"> 
	<img alt="2" src="../images/ske1.gif"> 
	<img alt="3" src="../images/ske2.gif"> 
	<img alt="4" src="../images/ske3.gif"> 
	<img alt="5" src="../images/ske6.gif"> 
	<img alt="6" src="../images/ske8.gif"> 
	<img alt="7" src="../images/ske7.gif"> 
	<img alt="8" src="../images/ske4.gif"> 
	<img alt="9" src="../images/ske5.gif"> 
	<img alt="10" src="../images/se1.gif"> 
	<img alt="11" src="../images/se2.gif"> 
	<img alt="12" src="../images/se3.gif"> 
	<img alt="13" src="../images/se6.gif"> 
	<img alt="14" src="../images/se8.gif"> 
	<img alt="15" src="../images/se7.gif"> 
	<img alt="16" src="../images/se5.gif"> 
</div> 
 
</body> 
</html>

Tagged with: •
 
1 Comments
Digg Delicious StumbleUpon Digg

Feed updates subscription

Enter your email address:

Delivered by FeedBurner

Donate

Want to give me some extra encouragement ?

License

Creative Commons License

Except where otherwise noted, all Javascript code on this site is licensed under a Creative Commons License.