dhteumeuleu » the farewell

the farewell

On January 15, 2002, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>the farewell - 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 { 
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		background: #222; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		background: #000; 
	} 
	#screen .span { 
		overflow:hidden; 
		position:absolute; 
		left:-10000px; 
	} 
	#doot { 
		display: none; 
	} 
</style> 
 
<script type="text/javascript"> 
// ================================================ 
// script: Gerard Ferrandez - Ge-1-doot - NOV 2K2 
// http://www.dhteumeuleu.com 
// ================================================ 
document.onselectstart = new Function("return false"); 
 
var object  = [], 
		nx  = 0, 
        ny  = 0, 
        NX  = 16, 
        NY  = 9, 
        xm  = 0, 
        ym  = 0, 
        xM  = 0, 
        yM  = 0, 
		scr; 
 
function CObj(N,i,j){ 
	this.obj = document.createElement("span"); 
	this.obj.className="span"; 
	this.img = document.createElement("img"); 
	this.img.style.position="absolute"; 
	this.img.src = document.getElementById("doot").src; 
	this.obj.appendChild(this.img); 
	scr.appendChild(this.obj); 
	this.i   = i; 
	this.j   = j; 
	this.w   = this.img.width; 
	this.h   = this.img.height; 
	this.p   = 0; 
	this.P   = 1; 
	this.Nx  = 0; 
	this.Ny  = 0; 
	this.L   = 0; 
	this.T   = 0; 
	this.MX  = 0; 
	this.MY  = 0; 
	this.d   = 0; 
} 
CObj.prototype.GE1 = function (){ 
	var dx = xM - this.L; 
	var dy = yM - this.T; 
	d  = Math.sqrt(dx * dx + dy * dy) / nx; 
	this.P += (this.p += ((d - this.P - this.p)) * .001); 
	var css = this.img.style; 
	css.left   = Math.round(-this.L - (dx * this.P) + this.MX)+"px"; 
	css.top    = Math.round(-this.T - (dy * this.P) + this.MY)+"px"; 
} 
 CObj.prototype.DOOT = function (){ 
	this.Nx = nx / NX; 
	this.Ny = ny / NY; 
	this.L  = this.j * this.Nx; 
	this.T  = this.i * this.Ny; 
	this.MX = (nx - this.w) * .5; 
	this.MY = (ny - this.h) * .5; 
	var css = this.obj.style; 
	css.width  = Math.round(this.Nx + 1)+"px"; 
	css.height = Math.round(this.Ny + 1)+"px"; 
	css.left   = Math.round(this.L)+"px"; 
	css.top    = Math.round(this.T)+"px"; 
} 
 
document.onmousemove = function(e){ 
	if (window.event) e = window.event; 
	xm = (e.x || e.clientX) - (nx / NX) * .5; 
	ym = (e.y || e.clientY) - (ny / NY) * .5; 
} 
 
document.onclick = function(){ 
	var i = 0, o; 
	while (o = object[i++]) o.P = 1; 
} 
 
function resize(){ 
	nx = scr.offsetWidth; 
	ny = scr.offsetHeight; 
	var i = 0, o; 
	while (o = object[i++]) o.DOOT(); 
} 
onresize = resize; 
 
function run(){ 
		xM+=Math.round((xm-xM)/50); 
		yM+=Math.round((ym-yM)/50); 
		var i = 0, o; 
		while (o = object[i++]) o.GE1(); 
		setTimeout(run, 16); 
} 
onload = function() { 
	scr = document.getElementById("screen"); 
	nx = scr.offsetWidth; 
	ny = scr.offsetHeight; 
	xm = nx * .5 - (nx / NX) * .5; 
	ym = ny * .5 - (ny / NY) * .5; 
	xM = xm; 
	yM = ym; 
	var k = 0; 
	for(var i=0;i<NY;i++){ 
		for(var j=0;j<NX;j++){ 
			object[k] = new CObj(k++,i,j); 
		} 
	} 
	resize(); 
	setTimeout(run, 500); 
} 
 
</script> 
</head> 
 
<body> 
<div id="screen"></div> 
<img id="doot" src="../images/visage2a.jpg"> 
 
</body> 
</html>

Tagged with: deform