dhteumeuleu » tripalium

tripalium

On August 15, 2006, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>tripalium - 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: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		cursor: crosshair; 
	} 
	#screen { 
		position:absolute; 
		left: 0%; 
		top: 0%; 
		width: 100%; 
		height: 100%; 
		background: #000; 
		overflow: hidden; 
	} 
	#bkg { 
		position:absolute; 
		left: 0%; 
		top: 70%; 
		width: 100%; 
		height: 30%; 
		background: #111; 
	} 
	#canvasImages { 
		visibility: hidden; 
	} 
	#matrixImages { 
		visibility: hidden; 
	} 
</style> 
 
<script type="text/javascript" src="../dhtml/library/imgRotate.js"></script> 
 
<script type="text/javascript"> 
// =================================================== 
//   __|     _ |     |           | 
//  (_ |  -_)  |  _` |  _ \  _ \  _| 
// \___|\___| _|\__,_|\___/\___/\__| 
// --------------------------------------------------- 
// script: Gerard Ferrandez - Ge-1-doot - August 2006 
// http://www.dhteumeuleu.com 
// =================================================== 
 
var xm = 0; 
var ym = 0; 
var nx = 0; 
var ny = 0; 
var nw = 0; 
var nh = 0; 
 
function resize() { 
	var s = document.getElementById("screen"); 
	nx = s.offsetLeft; 
	ny = s.offsetTop; 
	nw = s.offsetWidth; 
	nh = s.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 NF         = 3;   // number of fingers 
var NS         = 25;  // number of joints 
var rotCoeff   = 2;   // Rotation coeff 
var zoomCoeff  = 1.5; // shrinkage coeff 
var elasticity = 10;  // elasticity 
///////////////////////////////////////////// 
var rotCoeffBack = rotCoeff; 
 
function Tree(N, I, sx, sy, w, h, l) { 
	/* ==== create tree ==== */ 
	this.object = []; 
	var O = null; 
	for(var i = 0; i < NS ; i++) { 
		this.object.push ( 
			O = new Joint(O, N, i, Tree.arguments) 
		); 
	} 
	this.run = function () { 
		for(var i in this.object) this.object[i].run(); 
	} 
} 
 
function Joint(parent, N, Ni, T) 
{ 
	/* ==== create joint ==== */ 
	var z = 1 - Ni / (NS * zoomCoeff); 
	this.img = createImage(T[1], "nearest"); 
	this.x   = 0; 
	this.y   = 0; 
	this.N   = N; 
	this.Ni  = Ni; 
	this.sx  = T[2] * z; 
	this.sy  = T[3] * z; 
	this.w   = T[4] * z; 
	this.h   = T[5] * z; 
	this.l   = T[6] * z; 
	this.par = parent; 
	this.ang = -Math.PI / 2; 
} 
 
Joint.prototype.run = function() { 
	if (this.par == null) { 
		this.x = nw / 2 + (this.N * this.h * 1.5) - (NF * this.h * 1.5 / 2); 
		this.y = nh * .8; 
	} else { 
		this.x = this.par.x + Math.cos(this.par.ang) * (this.par.l - this.par.sx); 
		this.y = this.par.y + Math.sin(this.par.ang) * (this.par.l - this.par.sx); 
	} 
	this.ang += ((-Math.PI / 2 + ((-Math.PI / 2 + Math.atan2(Math.abs(nh - ym), xm - this.x)) * this.Ni) / rotCoeff) - this.ang) / elasticity; 
	this.img.drawImage(this.x, this.y, this.ang, 1, this.sx, this.sy, this.w, this.h); 
} 
 
 
document.onselectstart = new Function("return false"); 
 
document.onmousedown = function() { 
	rotCoeff *= .1; 
} 
document.onmouseup = function() { 
	rotCoeff = rotCoeffBack; 
} 
 
function run() { 
	/* ==== clear canvas ==== */ 
	if(isCanvas) context.clearRect(0, 0, nw, nh); 
	/* ==== objects motion ==== */ 
	var i = 0, o; 
	while (o = object[i++]) o.run(); 
} 
 
onload = function() { 
	/* ==== create Canvas container ==== */ 
	canvas = createCanvas(document.getElementById("screen")); 
	/* ==== initial size ===== */ 
	resize(); 
	xm = nw / 2; 
	/* ==== create elements ==== */ 
	for(var i = 0; i < NF ; i++) 
		object.push( 
			new Tree(i, 0, 11, 15, 75, 30, 61) 
		); 
	/* ==== loop ==== */ 
	setInterval(run, 16); 
} 
 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"><div id="bkg"></div></div> 
 
<div id="canvasImages"> 
	<img alt="0" src="../images/finger.png"> 
</div> 
 
<div id="matrixImages"> 
	<img alt="0" src="../images/finger.gif"> 
</div> 
 
</body> 
</html>

Tagged with: canvas • rotate