dhteumeuleu » the tunnel

the tunnel

On November 8, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/tunnel-B.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>the tunnel - 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"> 
	body { 
		background: #222; 
		overflow: hidden; 
		left: 0; 
		top: 0; 
		width: 100%; 
		height: 100%; 
		margin: 0; 
		padding: 0; 
	} 
	#tunnel { 
		background:#000; 
		font-size:1px; 
		cursor: crosshair; 
	} 
	#tunnel,img { 
		position: absolute; 
		cursor: crosshair; 
		width: 0px; 
		-ms-interpolation-mode:nearest-neighbor; 
	} 
 
</style> 
 
<script type="text/javascript"> 
// =============================================================== 
//                     --- the tunnel --- 
// script written by Gerard Ferrandez - Ge-1-doot - November 2005 
// http://www.dhteumeuleu.com 
// =============================================================== 
// 
 
var O = []; 
var T; 
var xm = 0; 
var ym = 10; 
var nx = 0; 
var ny = 0; 
var nx2 = 0; 
var ny2 = 0; 
var nx7 = 0; 
var cx = 0; 
var cy = 5000; 
var cz = 0; 
var X0 = -1; 
var Y0 = -1; 
var Z0 = -1; 
var W0 = 2; 
var H0 = 2; 
var X1 = -1; 
var Y1 = -1; 
var Z1 = 1; 
var W1 = 2; 
var H1 = 2; 
var Zeye = -50; 
var zm = 60; 
var Zi = 0; 
var N = 50; /* number particles */ 
 
 
 
function Cobj(){ 
	/* particles 3D coords */ 
	this.W = .2; 
	this.Z = 1-Math.random(); 
	var ang = Math.random()*(Math.PI*2); 
	var R = Math.random()-this.W*.5; 
	this.X = -this.W*.5+Math.cos(ang)*R; 
	this.Y = -this.W*.5+Math.sin(ang)*R; 
	this.V = -.02+(R*.019); 
 
	/* create particles */ 
	this.img = document.createElement("img"); 
	this.img.src = document.getElementById("particle").src; 
	this.img.style.zIndex = Zi++; 
	document.getElementById("screen").appendChild(this.img); 
} 
 
/* animate particles */ 
Cobj.prototype.anim = function(){ 
	this.Z-=this.V; 
	if(this.Z>1){ 
		this.Z=-1.04; 
		this.img.style.zIndex = Zi++; 
	} 
	var z0 = zOOm(cy + this.Z * nx7); 
	var css = this.img.style; 
	css.left   = Math.round(nx2 + (cx + this.X * nx7) * z0)+"px"; 
	css.top    = Math.round(ny2 + (cz + this.Y * nx7) * z0)+"px"; 
	css.width  = css.height = Math.round(this.W * z0 * nx7)+"px"; 
} 
 
function zOOm(z){ 
	/* projection */ 
	z0 = Zeye - z; 
	z0 = Zeye / z0; 
	return z0; 
} 
 
function animTunnel(x0,y0,w0,h0, x1,y1,w1,h1) { 
	/* crossbrowser 3D tunnel - run in standard mode */ 
	function wall(c0,bx){ 
		c=c0+Math.round((bx)*255/w0); 
		return "RGB("+c+","+c+","+c+") groove "+Math.round(bx)+"px"; 
	} 
	var css = T.style; 
	css.left         = Math.round(x0)+"px"; 
	css.top          = Math.round(y0)+"px"; 
	css.width        = Math.round(w1)+"px"; 
	css.height       = Math.round(h1)+"px"; 
	css.borderLeft   = wall(64,Math.max(0,x1-x0)); 
	css.borderTop    = wall(64,Math.max(0,y1-y0)); 
	css.borderRight  = wall(128,Math.max(0,w0-(x1-x0)-w1)); 
	css.borderBottom = wall(128,Math.max(0,h0-(y1-y0)-h1)); 
} 
 
/* resize (standard mode) */ 
function resize(){ 
	nx = document.documentElement.clientWidth; 
	ny = document.documentElement.clientHeight; 
	if(ny==0)ny = document.body.clientHeight; 
	nx2 = Math.round(nx / 2); 
	ny2 = Math.round(ny / 2); 
	nx7 = Math.min(100, Math.round(nx / 4)); 
} 
onresize = resize; 
 
function run(){ 
	/* camera pos */ 
	cx += (xm - cx) / 10; 
	cy += (zm - cy) / 10; 
	cz += (ym - cz) / 10; 
 
	/* tunnel 3D coords */ 
	z0 = zOOm(cy + Z0 * nx7); 
	x0 = Math.round(nx2 + (cx + X0 * nx7) * z0); 
	y0 = Math.round(ny2 + (cz + Y0 * nx7) * z0); 
	w0 = Math.round(W0 * nx7 * z0); 
	h0 = Math.round(H0 * nx7 * z0); 
	z1 = zOOm(cy + Z1 * nx7); 
	x1 = Math.round(nx2 + (cx + X1 * nx7) * z1); 
	y1 = Math.round(ny2 + (cz + Y1 * nx7) * z1); 
	w1 = Math.round(W1 * nx7 * z1); 
	h1 = Math.round(H1 * nx7 * z1); 
 
	/* animation */ 
	animTunnel(x0,y0,w0,h0, x1,y1,w1,h1); 
	for(var i in O)O[i].anim(); 
 
	/* loop */ 
	setTimeout(run, 16); 
} 
 
onload = function(){ 
	resize(); 
	/* mouse move */ 
	document.onmousemove = function(e){ 
		if (window.event) e = window.event; 
		xm = (e.x || e.clientX); 
		ym = (e.y || e.clientY); 
		xm =  (nx2 - xm) * (nx7 / nx2); 
		ym =  (ny2 - ym) * (nx7 / ny2); 
	} 
	/* run */ 
	T = document.getElementById("tunnel"); 
	for(var i=0;i<N;i++)O.push(new Cobj()); 
	run(); 
} 
 
</script> 
</head> 
 
<body> 
	<div id="screen" style="position:absolute;left:0px;top:0px;width:100%;height:100%;overflow:hidden"> 
		<div id="tunnel" style="position:absolute;"> 
		</div> 
	</div> 
	<img id="particle" src="../images/sp2.gif" style="visibility:hidden"> 
</body> 
</html>

Tagged with: 3D • particles • tunnel