dhteumeuleu » two

two

On January 15, 2002, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/M3D-3.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>two - 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: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		cursor: crosshair; 
	} 
	#screen img { 
		position: absolute; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
 
 
</style> 
 
<script type="text/javascript"> 
/* ============================================================ 
   ====== Script Gerard Ferrandez - Ge-1-doot - Aug 2002 ====== 
            DOM crossbrowser version - April 15th, 2006 
                  http://www.dhteumeuleu.com 
   ============================================================ */ 
 
 
var cube    = []; 
var za = 0; 
var xm = 0; 
var ym = 0; 
/* === screen origin === */ 
var Xc = 0; 
var Yc = 0; 
/* === pos camera ===*/ 
var Xo = 0; 
var Yo = 0; 
var Zo = -256; 
 
/* ========= 3D ================ */ 
function M3D(o, Xa, Ya, Za, E, L){ 
    /* === trigo === */ 
	var cosZa = Math.cos(Za); 
	var sinZa = Math.sin(Za); 
	var cosYa = Math.cos(Ya); 
	var sinYa = Math.sin(Ya); 
	var cosXa = Math.cos(Xa); 
	var sinXa = Math.sin(Xa); 
	/* === 3 x 3 Rotation matrix === */ 
	var R3D00 = cosZa * cosYa; 
	var R3D10 = sinZa * cosYa; 
	var R3D20 = -sinYa; 
	var R3D01 = cosZa * sinYa * sinXa - sinZa * cosXa; 
	var R3D11 = sinZa * sinYa * sinXa + cosXa * cosZa; 
	var R3D21 = sinXa * cosYa; 
	var R3D02 = cosZa * sinYa * cosXa + sinZa * sinXa; 
	var R3D12 = sinZa * sinYa * cosXa - cosZa * sinXa; 
	var R3D22 = cosXa * cosYa; 
	var i = 0, p; 
	while(p=o[i++]){ 
		/* ===== rotation ===== */ 
		var x3D = (R3D00 * p.x + R3D10 * p.y + R3D20 * p.z) * E; 
		var y3D = (R3D01 * p.x + R3D11 * p.y + R3D21 * p.z) * E; 
		var z3D = (R3D02 * p.x + R3D12 * p.y + R3D22 * p.z) * E; 
		/* === 2D projection === */ 
		var X = Xc + Xo + Zo * (x3D-Xo) / (Zo-z3D); 
		var Y = Yc + Yo + Zo * (y3D-Yo) / (Zo-z3D); 
		/* ===== HTML anim ===== */ 
		var w = ((-Zo*2)-z3D*2)/L; 
		var css = p.css; 
		css.left   = Math.round(X - w*.5)+'px'; 
		css.top    = Math.round(Y - w*.5)+'px'; 
		css.zIndex = Math.round(10000+Zo*20-z3D*10); 
		css.width  = css.height = Math.round(w)+'px'; 
	} 
} 
 
function Cobj(x,y,z,src){ 
	var o = document.createElement("img"); 
	o.src = src; 
	document.getElementById("screen").appendChild(o); 
	this.css  = o.style; 
	this.x    = x; 
	this.y    = y; 
	this.z    = z; 
} 
 
/* === main loop === */ 
function main(){ 
	M3D(cube,za+ym*.0075,za+xm*.0075,za+=.01, 1, 7); 
	setTimeout(main, 16); 
} 
 
/* === init === */ 
onload = function() { 
	resize(); 
	var j = 0; 
    for(var i=-100;i<=100;i+=20){ 
		var s=document.getElementById(i===0?"B":"D").src; 
		cube[j++] = new Cobj(-100,-100,i, s); 
		cube[j++] = new Cobj(100,-100,i, s); 
		cube[j++] = new Cobj(-100,100,i, s); 
		cube[j++] = new Cobj(100,100,i, s); 
	} 
	for(var i=-80;i<=80;i+=20){ 
		var s=document.getElementById(i===0?"B":"D").src; 
		cube[j++] = new Cobj(i,-100,100, s); 
		cube[j++] = new Cobj(i,-100,-100, s); 
		cube[j++] = new Cobj(i,100,100, s); 
		cube[j++] = new Cobj(i,100,-100, s); 
	} 
	main(); 
} 
 
/* === window resize === */ 
function resize(){ 
	Xc = document.body.offsetWidth * .5; 
	Yc = document.body.offsetHeight * .5; 
} 
onresize = resize; 
 
/* === mouse events === */ 
document.onmousemove = function(e){ 
	if (window.event) e = window.event; 
	xm = (e.x || e.clientX); 
	ym = (e.y || e.clientY); 
} 
 
</script> 
</head> 
 
 
<body> 
 
<div id="screen"></div> 
<div style="display:none"> 
	<img id="B" src="../images/boulRouge.gif"> 
	<img id="D" src="../images/boulGris.gif"> 
</div> 
 
</body> 
</html>

Tagged with: 3D