dhteumeuleu » all my friends

all my friends

On February 14, 2004, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>all my friends - 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 { 
		background: #000; 
		width:100%; 
		height:100%; 
		margin: 0; 
	} 
	#screen { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#screen .span { 
		background: #666666; 
		font-size: 1px; 
		position: absolute; 
	} 
</style> 
 
<script type="text/javascript"> 
// ===================================================================== 
// script: Gerard Ferrandez - Ge-1-doot - FEBRUARY 20, Y2K+4 
// http://www.dhteumeuleu.com 
// ===================================================================== 
// 
///////////// 
var NX  = 8; 
var NY  = 6; 
///////////// 
var nx  = 0; 
var ny  = 0; 
var Nx  = 0; 
var Ny  = 0; 
var C   = 0; 
var cB  = 0; 
var R   = false; 
var ion = new Array(); 
for (var i = 0; i<NX; i++) 
	ion[i] = new Array(); 
 
function CObj(x,y){ 
 
	this.obj = document.createElement("span"); 
	this.obj.className="span"; 
	scr.appendChild(this.obj); 
 
	this.x   = x; 
	this.y   = y; 
	this.L   = 0; 
	this.T   = 0; 
	this.K   = 0; 
	this.Z   = Nx; 
	this.SI  = 0; 
} 
 
CObj.prototype.click = function (){ 
	var x = this.x; 
	var y = this.y; 
	cB = x * Nx + y; 
	if (this.SI == 0) 
		this.SI = setInterval(function() { 
			ion[x][y].clock(); 
		}, 16); 
	else { 
		this.Z = Nx; 
		this.K = 0; 
	} 
} 
 
CObj.prototype.clock = function (){ 
	var M = Nx - this.Z * Math.sin(this.K * .1); 
	var H =  M * Ny / Nx; 
	this.K++; 
	this.Z -= .5; 
	var c = Math.round(C * M - this.K * .5); 
	var css = this.obj.style; 
	css.left   = Math.round(Nx * .5 + this.L - M * .5) + "px"; 
	css.top    = Math.round(Ny * .5 + this.T - H * .5) + "px"; 
	css.width  = Math.round(M - 1) + "px"; 
	css.height = Math.round(H - 1) + "px"; 
	css.zIndex = Math.round(M); 
	css.background = "RGB(" + (c) + "," + (c) + "," + (c) + ")"; 
 
	if (this.Z == 0) { 
		window.clearInterval(this.SI); 
		this.SI = 0; 
		this.Z = Nx; 
		this.K = 0; 
		this.DOOT(); 
	} 
} 
 
CObj.prototype.DOOT = function (){ 
	this.L  = Math.round(this.x * Nx); 
	this.T  = Math.round(this.y * Ny); 
	var css = this.obj.style; 
	css.left   = Math.round(this.L) + "px"; 
	css.top    = Math.round(this.T) + "px"; 
	css.width  = Math.round(Nx - 1) + "px"; 
	css.height = Math.round(Ny - 1) + "px"; 
} 
 
document.onmousemove = function(e){ 
	if (window.event) e = window.event; 
	xm = (e.x || e.clientX); 
	ym = (e.y || e.clientY); 
	x = Math.ceil((xm - Nx) / Nx); 
	y = Math.ceil((ym - Ny) / Ny); 
	if (cB != x * Nx + y) { 
		if (x >= 0 && x < NX && y >= 0 && y < NY) 
			ion[x][y].click(); 
	} 
} 
 
function resize(){ 
	nx = scr.offsetWidth; 
	ny = scr.offsetHeight; 
	Nx = Math.round(nx / NX); 
	Ny = Math.round(ny / NY); 
	C = 255 / (Nx * 1.5); 
	if (R) { 
		for (var i=0; i < NX; i++) 
			for (var j=0; j < NY; j++) 
				ion[i][j].DOOT() 
	} 
} 
 
onresize = resize; 
 
onload = function() { 
	scr = document.getElementById("screen"); 
	resize(); 
	for(var i=0; i < NX; i++) 
		for(var j=0; j < NY; j++) 
			ion[i][j] = new CObj(i,j); 
	R = true; 
	resize(); 
} 
 
</script> 
</head> 
 
<body> 
	<div id="screen"></div> 
</body> 
</html>

Tagged with: touch