dhteumeuleu » what power

what power

On March 3, 2007, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/ragdoll.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>what power - 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; 
	} 
	#canvasImages { 
		visibility: hidden; 
	} 
	#matrixImages { 
		visibility: hidden; 
	} 
	#canvas img { 
		position: absolute; 
	} 
	#credit { 
		position: absolute; 
		color: #888; 
		font-family: verdana, arial, helvetica, sans-serif; 
		font-size: 0.8em; 
		right: 1em; 
		text-align: right; 
		bottom: 2px; 
	} 
	a {text-decoration: none;color:#333;} 
	a:hover	{text-decoration: none;background:#ff8000;color:#fff;} 
	a:visited {text-decoration: none;color:#333;} 
	a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} 
</style> 
 
<!-- rotation library IE (matrix filter) + FF (canvas) --> 
<script type="text/javascript" src="library/imgRotate.js"></script> 
 
<script type="text/javascript"> 
// ============================================================ 
//             ===== ragdoll engine ===== 
// script: Gerard Ferrandez - Ge-1-doot - March 2007 
// http://www.dhteumeuleu.com 
// ============================================================ 
 
/* ===== global vars ===== */ 
var dolls = []; 
var xm = 0; 
var ym = 0; 
var nx = 0; 
var ny = 0; 
var nw = 0; 
var nh = 0; 
var canvas; 
var context; 
var sphere; 
var sw; 
 
/* ===== screen resize ===== */ 
function resize() { 
	var o = document.getElementById("canvas"); 
	nw = o.offsetWidth; 
	nh = o.offsetHeight; 
	for (nx = 0, ny = 0; o != null; o = o.offsetParent) { 
		nx += o.offsetLeft; 
		ny += o.offsetTop; 
	} 
	if (canvas) { 
		canvas.resize(nw, nh); 
		sw = nh / 4; 
		sphere.style.width = sphere.style.height = sw + 'px'; 
	} 
} 
onresize = resize; 
 
/* ===== mouse position ===== */ 
document.onmousemove = function(e){ 
	if (window.event) e=window.event; 
	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  = 10 + Math.random(); 
	this.xb = this.x; 
	this.yb = this.y + 2; 
	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 - nx); 
		var dy = this.y - (ym - 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.y  = 0; 
			this.yb = -5; 
		} 
		else if (this.y > nh) { 
			this.y  = nh; 
			this.yb = nh + 5; 
		} 
		if (this.x < 0) { 
			this.x  = 0; 
			this.xb = -5; 
		} 
		else if (this.x > nw) { 
			this.x  = nw; 
			this.xb = nw + 5; 
		} 
    } 
} 
 
/* ====== 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, point0, point1, length, width, image, zindex) { 
	this.height = length * doll.s; 
	this.width  = width * doll.s; 
	this.image  = image; 
	this.p0     = createPoint(doll, point0, this, this.width); 
	this.p1     = createPoint(doll, point1); 
 
	/* ==== Constraints ==== */ 
	this.constraint = function() { 
		var parangle = this.parent.angle; 
		var argMax   = this.maxi; 
		var argMin   = this.mini; 
		var inv      = this.inv; 
		/* ==== aligns quadrants ==== */ 
		while (this.angle - parangle >  Math.PI ) this.angle -= Math.PI * 2; 
		while (this.angle - parangle < -Math.PI ) this.angle += Math.PI * 2; 
		/* ==== tests limits ==== */ 
		var a = this.angle - parangle; 
		if (a > 0) { 
			if (inv) { 
				if (a < argMax) this.angle = parangle + argMax; 
			} else { 
				if (argMax < a) this.angle = parangle + argMax; 
			} 
		} else { 
			if (inv) { 
				if (a > -argMin) this.angle = parangle - argMin; 
			} else { 
				if (-argMin > a) this.angle = parangle - argMin; 
			} 
		} 
		/* ==== recalculates position ==== */ 
		this.p1.x = this.p0.x + Math.cos(this.angle) * this.height; 
		this.p1.y = this.p0.y + Math.sin(this.angle) * this.height; 
		this.dx0  = this.p1.x - this.p0.x; 
		this.dy0  = this.p1.y - this.p0.y; 
	} 
 
	/* ==== calculates links angles ==== */ 
	this.trigo = function () { 
		/* ==== angle ====*/ 
		this.dx0   = this.p1.x - this.p0.x; 
		this.dy0   = this.p1.y - this.p0.y; 
		this.angle = Math.atan2(this.dy0, this.dx0); 
		/* ==== Constraints ==== */ 
		if (this.parent) this.constraint(); 
		/* ==== 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; 
		var rx = .1 * (Math.random() - .5); 
		var ry = .1 * (Math.random() - .5); 
		this.p0.x -= (dx + rx); 
		this.p0.y -= (dy + ry); 
		this.p1.x += (dx + rx); 
		this.p1.y += (dy + ry); 
		/* ==== saves point for rendering ==== */ 
		this.x = this.p0.x; 
		this.y = this.p0.y; 
		this.d = d; 
	} 
 
	/* ==== add angle limits ==== */ 
	this.addConstraint = function(parent, mini, maxi) { 
		if (mini < 0) this.inv = true; 
		this.mini   = Math.abs(mini); 
		this.maxi   = Math.abs(maxi); 
		this.parent = parent; 
	} 
 
	/* ==== rendering ==== */ 
	this.draw = function () { 
		this.img.drawImage( 
			this.x, 
			this.y, 
			this.angle, 
			1, 
			this.width * .15, 
			this.width * .5, 
			this.d + this.width * .3, 
			this.width 
		); 
	} 
 
	doll.render[zindex] = this; 
} 
 
/* ====== constructor Doll ====== */ 
function Doll(x, size, stiffness, structure) { 
	this.x = x; 
	this.s = size; 
	this.stiffness = stiffness; 
	this.points = []; 
	this.render = []; 
 
	/* ==== loads structure ==== */ 
	for (var link in structure) { 
		var L = structure[link]; 
		if(link == 'constraints') { 
			for (var i = 0; i < L.length; i++) { 
				var o = L[i]; 
				structure[o[0]].link.addConstraint(structure[o[1]].link,  o[2], o[3]); 
			} 
		} else { 
			structure[link].link = new Link(this, L[0], L[1], L[2], L[3], L[4], L[5]); 
		} 
	} 
	/* ===== creates HTML images in zIndex order ===== */ 
	for (var i = 0, o; o = this.render[i++]; o.img = 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()); 
	} 
 
	/* ==== collision with another doll ==== */ 
	this.collide = function (doll) { 
		for (var i = 0, o1; o1 = this.points[i++];) { 
			for (var j = 0, o2; o2 = doll.points[j++];) { 
				var dx = o1.x - o2.x; 
				var dy = o1.y - o2.y; 
				var d  = Math.sqrt(dx * dx + dy * dy); 
				var w  = (o1.w + o2.w) * .5; 
				if (d < w){ 
					d = Math.abs(w - d); 
					var a  = Math.atan2(dy, dx); 
					var vx = d * Math.cos(a) * .5; 
					var vy = d * Math.sin(a) * .5; 
					o1.x += vx; 
					o1.y += vy; 
					o2.x -= vx; 
					o2.y -= vy; 
				} 
			} 
		} 
	} 
} 
 
/////////////////////////////////////////////////////////////////////////////////////////////// 
 
function run(){ 
	/* ===== main loop ===== */ 
	if (isCanvas) context.clearRect(0, 0, nw, nh); 
	if (sphere) { 
		sphere.style.left = (xm - nx - sw * .5) + 'px'; 
		sphere.style.top  = (ym - ny - sw * .5) + 'px'; 
	} 
	dolls[0].anim(); 
	dolls[1].anim(); 
	dolls[0].collide(dolls[1]); 
	setTimeout(run, 16); 
} 
 
onload = function() { 
	/* ==== starts script ==== */ 
	sphere = document.getElementById("sphere"); 
	canvas = createCanvas(document.getElementById("canvas")); 
	resize(); 
 
	var structure = { 
		//     p0,p1,   H,W,    img,  zIndex 
		body : [0, 1,    9,5,     1,    7], 
		arm1 : [0, 6,    3,3,     3,    0], 
		ar11 : [6, 7,    5,2.5,   6,    1], 
		arm2 : [0, 8,    5,3,     3,    8], 
		ar21 : [8, 9,    5,2.5,   5,    9], 
		head : [0, 10,   4,4.5,   2,    6], 
		leg1 : [1, 2,    6,3.5,   0,    2], 
		le11 : [2, 3,    7,5,     4,    3], 
		leg2 : [1, 4,    6,3.5,   0,    4], 
		le21 : [4, 5,    7,5,     4,    5], 
 
		constraints : [ 
			//   L0,     L1, aMin, aMax 
			['le21', 'leg2',   .3,  2.5], 
			['le11', 'leg1',   .3,  2.5], 
			['ar11', 'arm1',    3,   .1], 
			['ar21', 'arm2',    3,   .1], 
			['head', 'body', -1.5,  2  ], 
			['leg1', 'body',  2.5,  1.2], 
			['leg2', 'body',  2.5,  1.2] 
		] 
	}; 
 
	dolls[0] = new Doll(nw * .25, nh / 50, .998, structure); 
	dolls[1] = new Doll(nw * .75, nh / 50, .998, structure); 
 
	run(); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="canvas"> 
	<div style="position:absolute;left:50%;top:50%"> 
		<img id="background" alt="" src="../images/watch3.jpg" style="position:absolute;left:-320px;top:-240px"> 
	</div> 
	<img id="sphere" alt="" src="../images/lf1.gif" style="position:absolute;opacity:0.3;filter:alpha(opacity=30);left:-1000px;"> 
		<div id="credit">script by <a href="http://www.dhteumeuleu.com/">wwww.dhteumeuleu.com</a></div> 
</div> 
 
<div id="canvasImages"> 
	<img alt="0" src="../images/rd01.png"> 
	<img alt="1" src="../images/rd08.png"> 
	<img alt="2" src="../images/rd04.png"> 
	<img alt="3" src="../images/rd05.png"> 
	<img alt="4" src="../images/rd06.png"> 
	<img alt="5" src="../images/rd07.png"> 
	<img alt="6" src="../images/rd09.png"> 
</div> 
 
<div id="matrixImages"> 
	<img alt="0" src="../images/rd01.gif"> 
	<img alt="1" src="../images/rd08.gif"> 
	<img alt="2" src="../images/rd04.gif"> 
	<img alt="3" src="../images/rd05.gif"> 
	<img alt="4" src="../images/rd06.gif"> 
	<img alt="5" src="../images/rd07.gif"> 
	<img alt="6" src="../images/rd09.gif"> 
</div> 
 
</body> 
</html>

Tagged with: canvas • ragdoll • rotate