the dolls

On April 1, 2009, 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>the dolls - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="imagetoolbar" content="no"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #222; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#center { 
		position:absolute; 
		top:50%; 
		left:50%; 
	} 
	#screen { 
		position: absolute; 
		left:-370px; 
		top:-260px; 
		width: 740px; 
		height: 520px; 
		background: #000; 
		overflow: hidden; 
		outline: #000 solid 10px; 
	} 
	#rMode { 
		position: absolute; 
		bottom: 1px; 
		right: 1em; 
		color: #666; 
		font-family: verdana, arial, Helvetica, sans-serif; 
		font-size: 0.6em; 
	} 
	.preload { 
		visibility: hidden; 
	} 
 
</style> 
 
<script type="text/javascript" src="library/imgRotateCSS3.js"></script> 
 
<script type="text/javascript"> 
// ===================================================================== 
// script written by Gerard Ferrandez -=[ge1doot]=- 
// April 13, 2009 
// http://www.dhteumeuleu.com 
// use under CC-BY-NC license 
// ------------------------------------------------------- 
// #include imgRotateCSS3.js library for images rotations 
// 1:CSS3 Transform 
// 2:HTML5 Canvas 
// 3:IE:DXImageTransform.Microsoft.matrix 
// ===================================================================== 
// 
 
var dolls = function () { 
	/* //////////// ==== private methods ==== //////////// */ 
	var canvas = false; 
	var head; 
	var O = []; 
	var xm = 0; 
	var ym = 0; 
	var xc = 0; 
	var yc = 0; 
	var xs = 0; 
	var ys = 0; 
	var ba = 0; 
	var dc = false; 
	/* ==== crossbrowsers addEvent ==== */ 
	function addEvent (o, e, f) { 
		if (window.addEventListener) o.addEventListener(e, f, false); 
		else if (window.attachEvent) r = o.attachEvent('on' + e, f); 
	} 
	/* ==== window resize ==== */ 
	function resize() { 
		var o = document.getElementById("screen"); 
		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; 
		} 
		canvas.resize(); 
	} 
	/* === eat === */ 
	function eat() { 
		var i = 0, o, c = 0; 
		while( o = O[i++] ) { 
			if (o.c > c) { 
				c = o.c; 
				dc = o; 
				head.n = 0; 
			} 
		} 
	} 
	/* ==== doll constructor ==== */ 
	Doll = function(xb, yb, ib, ab, arm1, arm2, dm) { 
		/* ==== arm constructor ==== */ 
		function Arm(arm, s) { 
			/* -- arm local variables -- */ 
			var P2 = Math.PI / 2; 
			var w  = arm.w; 
			var h  = arm.h; 
			var r  = arm.h / 2; 
			var l  = arm.l; 
			var a  = arm.a; 
			var mx = arm.mx; 
			/* -- create arm images -- */ 
			var i1 = iR.createImage(arm.i1); 
			var i2 = iR.createImage(arm.i2); 
			/* ==== arm animation ==== */ 
			this.anim = function() { 
				/* -- Math trigo -- */ 
				var x0  = doll.x + Math.cos(doll.a + a) * l; 
				var y0  = doll.y + Math.sin(doll.a + a) * l; 
				var x   = x0 - xc; 
				var y   = y0 - yc; 
				var d   = Math.sqrt(x * x + y * y) / (2.5 - (head.n / head.w0 || 0)) / w; 
				if (d > mx) { 
					d = mx; 
					doll.c = 0; 
				} else doll.c++; 
				var a1  = s * (Math.asin(d) + P2); 
				var at2 = Math.atan2(x, y); 
				var a2  = a1 - at2 + P2; 
				/* -- rendering -- */ 
				i1.drawImage(x0, y0, a2, r, r, w + r, h); 
				i2.drawImage(x0 + Math.cos(a2) * w, y0 + Math.sin(a2) * w, -a1 - at2 + P2, r, r, w, h); 
			} 
		} 
		/* -- create doll image -- */ 
		var body = iR.createImage(ib); 
		/* -- doll local variables -- */ 
		var doll = this; 
		var arm1 = new Arm(arm1, 1); 
		var arm2 = new Arm(arm2, -1); 
		this.c   = 0; 
		this.dm  = dm; 
		/* ==== doll animation ==== */ 
		this.anim = function() { 
			/*-- move doll --*/ 
			var l = xs + ys; 
			this.a = ab + l * .001; 
			this.x = xb - (Math.cos(ab) * l * .2); 
			this.y = yb - (Math.sin(ab) * l * .2); 
			/* -- rendering -- */ 
			body.drawImage(this.x, this.y, this.a); 
			arm1.anim(); 
			arm2.anim(); 
		} 
	} 
	/* ==== main animation loop ==== */ 
	function mainloop() { 
		/* -- mouse distance -- */ 
		var dx = ((dc ? dc.x + Math.cos(dc.a - (Math.PI / 2)) * dc.dm : xm) - xc); 
		var dy = ((dc ? dc.y + Math.sin(dc.a - (Math.PI / 2)) * dc.dm : ym) - yc); 
		/* -- if moving -- */ 
		if (dc || head.n || Math.abs(dx) + Math.abs(dy) > .1) { 
			/* -- clear screen -- */ 
			canvas.clearRect(); 
			/* -- easing -- */ 
			xc += dx * .1; 
			yc += dy * .1; 
			if (dc) { 
				/* -- eat head -- */ 
				head.n++; 
				head.w *= .9; 
				head.h *= .9; 
				/* -- complete -- */ 
				if (head.w < 1) dc = false; 
			} 
			xs = xc - canvas.nw * .5; 
			ys = yc - canvas.nh * .5; 
			/* -- animate dolls -- */ 
			var i = 0, o; 
			while( o = O[i++] ) o.anim(); 
			/* -- animate head -- */ 
			ba += (((ym - yc) * -xs) * .00001) + (((xm - xc) * ys) * .00001); 
			if (dc) ba += .1; 
			/* -- another head -- */ 
			if (!dc && head.n) { 
				if (head.n > 1) { 
					/* -- tempo -- */ 
					head.n -= .5; 
					xm = canvas.nw * .5; 
					ym = canvas.nh * .5; 
				} else { 
					/* -- zoom in -- */ 
					head.w *= 1.2; 
					head.h *= 1.2; 
					if (head.w > head.w0) { 
						head.w = head.w0; 
						head.h = head.h0; 
						head.n = 0; 
					} 
				} 
			} 
			head.drawImage(head.w > 1 ? xc : -1000, yc, ba, undefined, undefined, head.w, head.h); 
		} 
		/* -- loop -- */ 
		setTimeout(mainloop, 16); 
	} 
	/* //////////// ==== public methods ==== //////////// */ 
	return { 
		/* ==== initialize script ==== */ 
		init : function () { 
			addEvent(window, 'load', function () { 
				/* -- create canvas container -- */ 
				canvas = iR.init("screen"); 
				document.getElementById("rMode").innerHTML = "Rendering Mode:" + iR.renderingMode; 
				/* -- window resize -- */ 
				resize(); 
				addEvent(window, 'resize', resize); 
				/* -- mouse move event -- */ 
				addEvent(document, 'mousemove', function (e) { 
					if (window.event) e = window.event; 
					if (!head.n) { 
						xm = (e.x || e.clientX) - canvas.nx; 
						ym = (e.y || e.clientY) - canvas.ny; 
					} 
				}); 
				addEvent(document, 'click', eat); 
				/* -- arm structure -- */ 
				var a1B1 = {l:50, a:3.4, i1:"arm2",  i2:"arm1",  w:83, h:13, mx:.98}; 
				var a2B1 = {l:45, a:6,   i1:"arm4",  i2:"arm3",  w:83, h:13, mx:.98}; 
				var a1B2 = {l:60, a:3.7, i1:"arm02", i2:"arm01", w:83, h:13, mx:.98}; 
				var a2B2 = {l:50, a:5.6, i1:"arm04", i2:"arm03", w:83, h:13, mx:.98}; 
				/* -- create 6 dolls -- */ 
				O.push(new Doll(280, 470, "doll",   2 * Math.PI,   a1B1, a2B1, 50)); 
				O.push(new Doll(690, 460, "doll",   -Math.PI / 5,  a1B1, a2B1, 50)); 
				O.push(new Doll(20,  300, "doll0",  Math.PI / 2,   a1B2, a2B2, 75)); 
				O.push(new Doll(700, 160, "doll0",  -Math.PI / 2,  a1B2, a2B2, 75)); 
				O.push(new Doll(400, 30,  "doll",   Math.PI,       a1B1, a2B1, 50)); 
				O.push(new Doll(60,  20,  "doll0",  Math.PI / 1.2, a1B2, a2B2, 75)); 
				/* -- create head image -- */ 
				head = iR.createImage("head"); 
				/* -- start main loop -- */ 
				xm = ym = 200; 
				mainloop(); 
			}); 
		} 
	} 
}(); 
 
/* ==== start script ==== */ 
dolls.init(); 
 
</script> 
</head> 
 
<body> 
	<!-- canvas --> 
	<div id="center"> 
		<div id="screen"></div> 
	</div> 
	<div id="rMode"></div> 
	<!-- bank images --> 
	<img class="preload" id="head" src="../images/bo0.gif" alt=""> 
	<img class="preload" id="doll" src="../images/doll0.gif" alt=""> 
	<img class="preload" id="arm1" src="../images/doll2.gif" alt=""> 
	<img class="preload" id="arm2" src="../images/doll1.gif" alt=""> 
	<img class="preload" id="arm3" src="../images/doll4.gif" alt=""> 
	<img class="preload" id="arm4" src="../images/doll3.gif" alt=""> 
	<img class="preload" id="doll0" src="../images/doll00.gif" alt=""> 
	<img class="preload" id="arm01" src="../images/doll02.gif" alt=""> 
	<img class="preload" id="arm02" src="../images/doll01.gif" alt=""> 
	<img class="preload" id="arm03" src="../images/doll04.gif" alt=""> 
	<img class="preload" id="arm04" src="../images/doll03.gif" alt=""> 
 
</body> 
</html>

Tagged with: • • •
 
4 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.