dhteumeuleu » home again

home again

On July 14, 2010, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>home again - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		width: 100%; 
		height: 100%; 
	} 
	#bump { 
		position: absolute; 
		border: #222 solid 1px; 
		width: 530px; 
		height: 100px; 
		margin-left: -265px; 
		margin-top: -50px; 
		left: 50%; 
		top: 50%; 
	} 
	#bump span { 
		position: absolute; 
		font-size: 1px; 
		cursor: pointer; 
	} 
	#ch { 
		position: absolute; 
		border-top: #222 solid 1px; 
		left: 0; 
		width: 100%; 
	} 
	#cv { 
		position: absolute; 
		border-left: #222 solid 1px; 
		top: 0; 
		height: 100%; 
	} 
</style> 
 
<script type="text/javascript"> 
// =============================================================== 
//          ------- bumpmapping effect ------- 
// script: Gerard Ferrandez - Ge-1-doot - July 2005 
// http://www.dhteumeuleu.com 
// Last Update (restoration) : Wednesday 14 July, 2010 13:53 CET 
// =============================================================== 
// 
 
var bmp = function () { 
	// private vars 
	var object  = [], 
		ZOOMx, 
		ZOOMy, 
		xm, 
		ym, 
		nx, 
		ny, 
		cx, 
		cy, 
		Nx, 
		Ny, 
		L, 
		T, 
		W, 
		H, 
		SP, 
		cH, 
		cV, 
		N  = 1, 
		iL = 1, 
		iP = 2, 
		M  = 200, 
		kA = 0, 
		S  = 100; 
	var resize = function () { 
		nx = document.body.offsetWidth / 2; 
		ny = document.body.offsetHeight / 2; 
		W = SP.offsetWidth; 
		H = SP.offsetHeight; 
		L = SP.offsetLeft; 
		T = SP.offsetTop; 
	}; 
	var init = function (bump) { 
		document.onselectstart = new Function("return false"); 
		document.onmousedown = function(){ iL = 2; iP = 4; }; 
		document.onmouseup = function(){ iL = 1; iP = 2;}; 
		document.onmousemove = function(e){ 
			if (!e) e = window.event; 
			xm = (e.x || e.clientX); 
			ym = (e.y || e.clientY); 
			S = 10; 
			M = 200; 
			return false; 
		}; 
		onresize = resize; 
		var sb = function(c ,x ,y) { 
			bump[y] = bump[y].substring(0,x) + c+bump[y].substring(x+1,999); 
		}; 
		var b = function(x, y) { 
			return bump[y].charAt(x); 
		}; 
		SP = document.getElementById("bump"); 
		cH = document.getElementById("ch"); 
		cV = document.getElementById("cv"); 
		Ny = bump.length; 
		Nx = bump[0].length; 
		resize(); 
		ZOOMx = Math.floor(W / Nx); 
		ZOOMy = Math.floor(H / Ny); 
		ym = T + ZOOMx * Ny / 2; 
		cx = xm = L + ZOOMy * Nx / 2; 
		cy = -200; 
		// set shadows 
		for(var i = 1; i < Ny-1; i++) { 
			for(var j = 1; j < Nx-1; j++) { 
				if (b(j,i) === "O") { 
					if (b(j,i+1)   === " ") sb("-",j,i+1); 
					if (b(j+1,i+1) === " ") sb("-",j+1,i+1); 
					if (b(j+1,i)   === " " || b(j+1,i)    === "-") sb("!",j+1,i); 
					if (b(j+1,i)   === "!" && (b(j+1,i-1) === " " || b(j+1,i-1) === "-")) sb("!",j+1,i-1); 
					if (b(j,i-1)   === " " || b(j,i-1)    === "I") sb("=",j,i-1); 
					if (b(j,i-1)   === "=" && (b(j-1,i-1) === " " || b(j-1,i-1) === "I")) sb("=",j-1,i-1); 
					if (b(j-1,i)   === " " || b(j-1,i)    === "-") sb("I",j-1,i); 
					if (b(j-1,i)   === "I" && (b(j-1,i+1) === " " || b(j-1,i+1) === "-")) sb("I",j-1,i+1); 
				} 
			} 
		} 
		// compression spans 
		for(var i=0; i < Ny; i++) { 
			var w = 0; 
			for(var j = 0; j < Nx; j++) { 
				var c = bump[i].charAt(j); 
				if (c != " "){ 
					var x = j, 
						y = i, 
						k = j, 
						w = 0, 
						h = 1, 
						m = i, 
						cs = "", 
						cr = c; 
					do { 
						k++; 
						w++; 
						cs += cr; 
						cr = bump[i].charAt(k); 
					} while (cr == c && k < Nx); 
					if (i < Ny-1){ 
						do { 
							m++; 
							if (bump[m].substring(j,j+w) == cs) { 
								h++; 
								bump[m] = bump[m].substring(0,j) + 
									cs.replace(RegExp(c,"gi")," ") + 
									bump[m].substring(j+w,999); 
							} else cs = ""; 
						} while (cs!="" && m < Ny-1); 
					} 
					object.push( 
						new CObj(c, x, y, w, h) 
					); 
					j += w-1; 
				} 
			} 
		} 
		mainloop(); 
	}; 
 
	var CObj = function(c, x, y, w ,h) { 
		var M1 = { 
			"O": 0, 
			"I": 1, 
			"!": -1, 
			"=": 0, 
			"-": 0 
		}, 
		M2 = { 
			"O": 0, 
			"I": 0, 
			"!": 0, 
			"=": 1, 
			"-": -1 
		}, 
		M3 = { 
			"O": 180, 
			"I": 115, 
			"!": 115, 
			"=": 115, 
			"-": 115 
		}; 
		this.c  = c; 
		this.x  = ZOOMx * x; 
		this.y  = ZOOMy * y; 
		this.m1 = M1[c]; 
		this.m2 = M2[c]; 
		this.m3 = M3[c]; 
		this.O  = document.createElement("span"); 
		this.O.style.left   = Math.round(this.x) + "px"; 
		this.O.style.top    = Math.round(this.y) + "px"; 
		this.O.style.width  = Math.round(ZOOMx * w) + "px"; 
		this.O.style.height = Math.round(ZOOMy * h) + "px"; 
		SP.appendChild(this.O); 
	}; 
	CObj.prototype.bumpmapping = function() { 
		var dx = (cx - this.x - L) / (5 * H) * iP; 
		var dy = (cy - this.y - T) / (5 * H) * iP; 
		var col = Math.round( 
			iL * (255 - Math.floor( 
				this.m3 * Math.sqrt( 
					(dx + this.m1) * (dx + this.m1) + (dy + this.m2) * (dy + this.m2) 
				) 
			)) 
		); 
		this.O.style.backgroundColor = "RGB(" + 
			Math.round(col * 2)   + "," + 
			Math.round(col * 1.5) + "," + 
			Math.round(col)       + ")"; 
} 
	var mainloop = function () { 
		if(M-- < 0){ 
			S = 100; 
			kA -= .01; 
			xm = nx + Math.cos(kA) * W * 1; 
			ym = ny + Math.sin(kA * 1.1) * H * 2; 
		} 
		cx += (xm - cx) / S; 
		cy += (ym - cy) / S; 
		cH.style.top  = Math.round(cy) + "px"; 
		cV.style.left = Math.round(cx) + "px"; 
		var i = 0, o; 
		while ( o = object[i++] ) o.bumpmapping(); 
		setTimeout(mainloop,16); 
	}; 
return { 
		// public functions 
		init: init 
	} 
}(); 
</script> 
</head> 
<body> 
	<div id="ch"></div> 
	<div id="cv"></div> 
	<div id="bump"></div> 
<script type="text/javascript"> 
/* ==== start script ==== */ 
bmp.init( 
	[ 
		"                                                                  ", 
		" OOOOOOO      OO    OO     OOOOOOOO      OOO    OOO      OO       ", 
		" OOOOOOOO     OO    OO     OOOOOOOO     OOOOOOOOOOOO     OO       ", 
		" OO    OO     OO    OO        OO        OO   OO   OO     OO       ", 
		" OO    OO     OOOOOOOO        OO        OO   OO   OO     OO       ", 
		" OO    OO     OOOOOOOO        OO        OO   OO   OO     OO       ", 
		" OO    OO     OO    OO        OO        OO        OO     OO       ", 
		" OO    OO     OO    OO        OO        OO        OO     OO       ", 
		" OOOOOOOO     OO    OO        OO        OO        OO     OOOOOOOO ", 
		" OOOOOOO      OO    OO        OO        OO        OO     OOOOOOOO ", 
		"                                                                  " 
	] 
); 
</script> 
</body> 
</html>

Tagged with: text