dhteumeuleu » approaching

approaching

On December 5, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>clock3D - 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; 
		background: #222; 
	} 
	#clock3D { 
		position:absolute; 
		left: 50%; 
		top: 50%; 
		border:#444 solid 1px; 
		margin-left: -150px; 
		margin-top: -100px; 
		width:300px; 
		height:200px; 
		background:#000; 
	} 
	#clock3D img { 
		position:absolute; 
		left:-1000px; 
	} 
	#plot { 
		visibility: hidden; 
	} 
	#plotR { 
		visibility: hidden; 
	} 
</style> 
 
<script type="text/javascript"><!-- 
// ============================================================= 
//          ----- clock3D - pure JavaScript ----- 
// script:Gerard Ferrandez - Ge-1-doot - December 2005 
// inspired by http://www.dataway.ch/~bennet/java/3DClock.html 
// http://www.dhteumeuleu.com 
// ============================================================= 
 
var O=[]; 
var px=0; 
var py=0; 
var rx=0; 
var ry=0; 
var TM=[]; 
var Tm=[]; 
var A = 1000; 
var crx; 
var srx; 
var cry; 
var sry; 
 
var digits = [ 
"#####  #  ###########   ##########################     ", 
"#   #  #      #    ##   ##    #        ##   ##   #     ", 
"#   #  #      #    ##   ##    #        ##   ##   #  #  ", 
"#   #  #  ##### ###################    ###########     ", 
"#   #  #  #        #    #    ##   #    ##   #    #  #  ", 
"#   #  #  #        #    #    ##   #    ##   #    #     ", 
"#####  #  ##########    ###########    ###########     " 
]; 
 
 
function CObj(a,z){ 
	// create led element 
	this.o=document.createElement("img"); 
	this.o.src=document.getElementById("plot").src; 
	document.getElementById("clock3D").appendChild(this.o); 
	this.a=a; 
	this.z=z; 
	this.plot=true; 
} 
 
// leds lighting 
CObj.prototype.alpha=function(opacity){ 
	if(opacity>0){ 
		if(!this.plot){ 
			this.plot=true; 
			this.o.src=document.getElementById("plot").src; 
		} 
	} else { 
		if(this.plot){ 
			this.plot=false; 
			this.o.src=document.getElementById("plotR").src; 
		} 
	} 
} 
// main 3D function 
CObj.prototype.anim=function() { 
		// z axis rotation 
		var x=Math.sin(A+this.a)*100; 
		var y=Math.cos(A+this.a)*100; 
		// simple 3D 
		var x1=y*crx-this.z*srx; 
		var zz=y*srx+this.z*crx; 
		var y1=x*cry-zz*sry; 
		zz=x*sry+zz*cry; 
		// 2D projection 
		var r=396/(396+zz); 
		x=Math.round(150-x1/r); 
		y=Math.round(100-y1/r); 
		var w=Math.round(2+Math.max(4,zz*.12)); 
		// leds lighting 
		this.alpha(zz); 
		// html positioning 
		var css = this.o.style; 
		css.left=x+"px"; 
		css.top=y+"px"; 
		css.width=height=w+"px"; 
		css.zIndex=Math.round(1000+zz); 
	} 
 
 
function mainloop() { 
	// rotations 
	A-=Math.PI/40; 
	rx+=px; 
	ry+=py; 
	crx=Math.cos(rx); 
	srx=Math.sin(rx); 
	cry=Math.cos(ry+Math.PI/2); 
	sry=Math.sin(ry+Math.PI/2); 
	// return to the horizontale 
	rx*=.98; 
	ry*=.98; 
	px*=.98; 
	py*=.98; 
	// refresh time 
	k=0; 
	for(var i=0;i<6;i++){ 
		if(TM[i]!=Tm[i]){ 
			Tm[i]=TM[i]; 
			// destroy objects 
			for(var j in O[k].O)document.getElementById("clock3D").removeChild(O[k].O[j].o); 
			delete O[k]; 
			// create new digit 
			O[k] = new Cdigit(k, TM[i]); 
		} 
		k+=(i==1 || i==3)?2:1; 
	} 
	// call animation 
	for(var i in O){ 
		for(var j in O[i].O){ 
			O[i].O[j].anim(); 
		} 
	} 
	setTimeout(mainloop,32); 
} 
 
function Cdigit(N,d){ 
	// digit prototype 
	this.O = []; 
	for(var i=0;i<7;i++){ 
		for(var j=0;j<5;j++){ 
			if(digits[i].charAt(5*d+j)!=" "){ 
				this.O.push( 
					new CObj(( 
						(32*N)+(j*5))/(180/Math.PI), 
						-42+i*12 
					) 
				); 
			} 
		} 
	} 
} 
 
function time(){ 
	// HH:MM:SS 
	T = new Date(); 
	h = T.getHours(); 
	m = T.getMinutes(); 
	s = T.getSeconds(); 
	TM = [ 
		Math.floor(h/10), 
		h%10, 
		Math.floor(m/10), 
		m%10, 
		Math.floor(s/10), 
		s%10 
	]; 
	setTimeout(time ,1000); 
} 
 
/* resize (standard mode) */ 
function resize(){ 
	nx = document.documentElement.clientWidth/2; 
	ny = document.documentElement.clientHeight/2; 
	if(ny==0)ny = document.body.clientHeight/2; 
} 
onresize = resize; 
 
/* mouse move */ 
document.onmousemove = function(e){ 
	if(window.event) e=window.event; 
	xm=(e.x || e.clientX); 
	ym=(e.y || e.clientY); 
	px=(xm-nx)/(nx*5); 
	py=(ym-ny)/(ny*5); 
} 
 
onload = function () { 
	// initializations 
	time(); 
	resize(); 
	var k=0; 
	for(var i=0;i<6;i++){ 
		O[k] = new Cdigit(k++, TM[i]); 
		if(i==1 || i==3) O[k] = new Cdigit(k++, 10); 
	} 
	mainloop(); 
} 
 
//--> 
</script> 
</head> 
 
<body> 
	<div id="clock3D"></div> 
	<img id="plot" src="../images/plot.gif" alt=""> 
	<img id="plotR" src="../images/plotR.gif" alt=""> 
</body> 
</html>

Tagged with: 3D