dhteumeuleu » remember the fears

remember the fears

On July 14, 2010, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>remember the fears - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		background: #666; 
		left: 0; 
		top: 0; 
		width: 100%; 
		height: 100%; 
		overflow: hidden; 
	} 
	#screen div { 
		position: absolute; 
		font-size: 0px; 
		width: 0px; 
		height: 0px; 
		border-width: 0px; 
		border-style: solid; 
		border-color: #000; 
		border-top-color: transparent; 
	} 
	#screen img { 
		position: absolute; 
		left: -10000px; 
	} 
</style> 
<script type="text/javascript"> 
// ================================================================ 
//   __|     _ |     |           | 
//  (_ |  -_)  |  _` |  _ \  _ \  _| 
// \___|\___| _|\__,_|\___/\___/\__| 
// ----------------------------------------------------- 
// DOM scripting waves simulation 
// script by Gerard Ferrandez - Ge-1-doot - February 2005 
// Last Update (restoration) : Wednesday 14 July, 2010 19:00 CET 
// http://www.dhteumeuleu.com 
// ================================================================ 
 
var water = function () { 
	// ==== private bloc ==== 
	var ov = [], 
		xm, 
		ym, 
		yb, 
		nx, 
		ny, 
		nw, 
		nh, 
		W, 
		n, 
		g, 
		X, 
		Y, 
		gw, 
		glo, 
		scr, 
		Yv = 0; 
 
	var Cwave = function (i) { 
		this.y = 0; 
		this.v = 0; 
		this.z = 0; 
		if (i > 0 && i < n) { 
			var div = document.createElement("div"); 
			scr.appendChild(div); 
			this.div = div.style; 
		} 
	}; 
 
	var resize = function () { 
		nx = scr.offsetLeft; 
		ny = scr.offsetTop; 
		nw = scr.offsetWidth; 
		nh = scr.offsetHeight * 0.5; 
		W  = Math.round(nw / (n - 2)) + 1; 
		gw = g * W * 0.5; 
		for (var i = 1; i < n-1; i++) { 
			ov[i].div.left   = Math.round((i - 1) * W) + "px"; 
			ov[i].div.height = Math.round(nh * 8) + "px"; 
		} 
		glo.width  = Math.round(g * W) + "px"; 
		glo.height = Math.round(g * W) + "px"; 
	}; 
 
	var init = function (nbr, sg) { 
		n = nbr; 
		g = sg; 
		document.onselectstart = function() { return false; } 
		onresize = resize; 
		document.onmousemove = function (e) { 
			if (window.event) e = window.event; 
			xm = (e.x || e.clientX) - nx; 
			ym = (e.y || e.clientY) - ny; 
		}; 
		scr = document.getElementById("screen"); 
		glo = document.getElementById("glob").style; 
		for (var i = 0; i <= n; i++) ov[i] = new Cwave(i); 
		resize(); 
		X =  nw / 2; 
		Y = -nh / 2; 
		splash(Math.round(X / W) + 1, -nh / 2); 
		wave(); 
	}; 
 
	var splash = function (c, f) { 
		for (var i = c, j = c + n / 2; i < j; i++){ 
			if (i < n - 1) ov[i].z = f; 
			if (c + c - i - 1 > 0) ov[c + c - i - 1].z = f; 
			f *= 0.85; 
		} 
	}; 
 
	var wave = function () { 
		for (var i = 1; i < n-1; i++) { 
			var o = ov[i]; 
			o.y += (o.v * 0.5) + (o.z *= 0.8); 
		} 
		for (var i = 1; i < n-1; i++) { 
			var o = ov[i]; 
			var o1 = ov[i + 1]; 
			o.v += (ov[i-1].y + o1.y - 2 * o.y) * 0.5; 
			o.v *= .99; 
			var h = o.y - o1.y; 
			// ==== border slants ==== 
			if (h > 0) { 
				o.div.top              = Math.round(nh - o.y) + "px"; 
				o.div.borderLeftWidth  = Math.round(W) + "px"; 
				o.div.borderRightWidth = "0px"; 
				o.div.borderTopWidth   = Math.round(h) + "px"; 
			} else { 
				o.div.top              = Math.round(nh - o1.y) + "px"; 
				o.div.borderRightWidth = Math.round(W) + "px"; 
				o.div.borderLeftWidth  = "0px"; 
				o.div.borderTopWidth   = Math.round(Math.abs(h)) + "px"; 
			} 
		} 
		// ====== mousemove ===== 
		var c = Math.round(xm / W); 
		if (c > 1 && c < n - 2 && yb) { 
			y0 = ov[c].y; 
			if (Math.min(yb,ym) < nh - y0 && Math.max(yb,ym) > nh - y0) splash(c, -(ym - yb) * 2); 
		} 
		yb = ym; 
		// ====== glob ====== 
		c = Math.round(X / W); 
		Yv += (ov[c].y - Y) * 0.2; 
		X  += (ov[c].y - ov[c+1].y) * 0.5; 
		Y  += (Yv *= 0.8); 
		if (X > nw - gw) X = nw - gw; 
		else if (X < gw) X = gw; 
		glo.left = Math.round(X - gw) + "px"; 
		glo.top  = Math.round(nh - Y - gw * 1.5) + "px"; 
		// ====== loop ====== 
		setTimeout(wave, 16); 
	}; 
 
	return { 
		// ==== public bloc ==== 
		init : init 
	} 
}(); 
</script> 
</head> 
<body> 
	<div id="screen"> 
		<img id="glob" src="../images/Glob4.gif" onmousedown="return false;"> 
	</div> 
	<script type="text/javascript"> 
	// ==== start script ==== 
	setTimeout(function() { 
		water.init(64, 8); 
	}, 100); 
	</script> 
</body> 
</html>

Tagged with: water