dhteumeuleu » way back

way back

On July 9, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>way back - 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 { 
		margin: 0px; 
		padding: 0px; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		width:100%; 
		height:100%; 
		background:#eee; 
	} 
	#screen img { 
		position:absolute; 
		left:-1000px; 
		filter: alpha(opacity=100); 
	} 
</style> 
 
<script type="text/javascript"> 
// =========================================================== 
// script: Gerard Ferrandez - Ge-1-doot - July 2005 
// http://www.dhteumeuleu.com 
// =========================================================== 
// 
 
document.onselectstart = new Function("return false"); 
 
var obj = new Object(), 
    xm  = 0, 
    ym  = 0, 
    nx  = 0, 
    ny  = 0, 
    scr = 0, 
    img = 0, 
    bO  = 0, 
    BX  = 0, 
    BY  = 0, 
    WB  = 0, 
    VX  = 0, 
    VY  = 0, 
    X   = 0, 
    Y   = 0, 
    xZ  = 0, 
    yZ  = 0, 
    M   = false, 
    Nb  = 0, 
    SP  = 0; 
///////////////////////////////// 
var DS  = 100 /* balls density  */ 
///////////////////////////////// 
 
document.onmousemove = function(e){ 
	if (!e) e = window.event; 
	xm = (e.x || e.clientX); 
	ym = (e.y || e.clientY); 
	return false; 
} 
 
function resize() { 
	nx = scr.offsetWidth; 
	ny = scr.offsetHeight; 
	N = Math.round(.001*(nx*nx)/DS); 
	SP = ny/40; 
	VY = -SP; 
	if(N>Nb){ 
		for(var i=Nb;i<N;i++)obj[i] = new CObj(img[(i%img.length)]); 
		Nb = N; 
	} else { 
		bN=Nb, Nb=N; 
		for(var i=N;i<bN;i++)scr.removeChild(obj[i].O); 
	} 
} 
onresize = resize; 
 
document.onmousedown = function(e){ 
	if (!e) e = window.event; 
	tg = (e.target) ? e.target : e.srcElement; 
	if(tg==bO){ 
		M = true; 
		xZ = X-xm; 
		yZ = Y-ym; 
		bO.style.cursor="move"; 
	} 
	return false; 
} 
 
document.onmouseup = function(){ 
	M = false; 
	bO.style.cursor="pointer"; 
	VY=-SP; 
} 
 
CObj = function(img) { 
	this.W  = img.width*.5; 
	this.x  = Math.round(nx*Math.random()); 
	this.y  = Math.round(ny*Math.random()); 
	this.vx = 0; 
	this.vy = 0; 
	this.O = document.createElement("img"); 
	this.O.src = img.src; 
	this.O.style.zIndex = this.W; 
	scr.appendChild(this.O); 
} 
 
function mainloop(){ 
	if(!M){ 
		BY=((ny*.7)-(Y+WB))/(SP*.9); 
		BX=((nx*.5)-X)/(SP*2); 
		Y+=BY; 
		X+=BX; 
	} else { 
		X=xm+xZ; 
		Y=ym+yZ; 
		VX *=.96; 
		BX *=.96; 
		VY *=.96; 
		BY *=.96; 
	} 
 
	for(var i=0;i<Nb;i++){ 
		var p = obj[i]; 
		var dx = (p.x+p.W)-(X+WB); 
		var dy = (p.y+p.W)-(Y+WB); 
		var d = Math.sqrt(dx*dx+dy*dy); 
 
		if(d<=p.W+WB){ 
			d = (p.W+WB)-d; 
			var ang = Math.atan2(dy, dx); 
			dx = d * Math.cos(ang); 
			dy = d * Math.sin(ang); 
			X-=dx; 
			Y-=dy; 
			if(M){ 
				p.vx+=dx/100; 
				p.vy+=dy/100; 
			} 
		} 
 
		p.x+=VX+BX+p.vx; 
		p.y+=VY+BY+p.vy; 
 
		if(p.x>nx || p.x<-p.W*2 || p.y<-p.W*2){ 
			p.x  = -p.W*4+Math.round((nx+p.W*4)*Math.random()); 
			if(p.x>nx || p.x<-p.W*2){ 
				p.y  = Math.round(ny*Math.random()); 
			} else p.y  = ny; 
			p.vx = .5*(Math.random()-.5); 
			p.vy = .5*(Math.random()-.5); 
		} 
 
		p.O.style.left = Math.round(p.x)+"px"; 
		p.O.style.top  = Math.round(p.y)+"px"; 
	} 
	bO.style.left = Math.round(X)+"px"; 
	bO.style.top  = Math.round(Y)+"px"; 
 
	setTimeout(mainloop,16); 
} 
 
onload = function() { 
	scr = document.getElementById("screen"); 
	img = document.getElementById("images").getElementsByTagName("img"); 
	bO  = document.getElementById("bool"); 
	WB  = Math.max(bO.width,bO.height)/2; 
	resize(); 
	X = nx/2-WB; 
	Y = ny/2-WB; 
	VY=-SP; 
	mainloop(); 
} 
</script> 
</head> 
 
<body> 
<div id="screen"> 
	<img id="bool" src="../images/b1.gif" style="z-index:2000;cursor:pointer"> 
</div> 
<div id="images" style="visibility:hidden"> 
	<img src="../images/c11.gif"> 
	<img src="../images/c12.gif"> 
</div> 
 
</body> 
</html>

Tagged with: particles