dhteumeuleu » inside

inside

On April 13, 2001, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>inside - 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%; 
		filter: alpha(opacity=100); 
	} 
	img { 
		position:absolute; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
</style> 
 
<script type="text/javascript"> 
// =================================================== 
// STARS 3D - DHTML - 
// script:Gerard Ferrandez - Ge-1-doot - April 2001 
// http://www.dhteumeuleu.com 
// =================================================== 
var object = new Array(); 
var k=1/(180/Math.PI); 
var nx=0; 
var ny=0; 
var px=0; 
var py=0; 
var rx=0; 
var ry=0; 
var SF; 
 
var NSTARS=160; 
 
function CObj(N,img,x,y,z){ 
	o=document.createElement("img"); 
	o.src=img.src; 
	SF.appendChild(o); 
	this.s=img.width*0.5; 
	this.x0=x; 
	this.y0=y; 
	this.z0=z; 
	this.img=o.style; 
} 
CObj.prototype.TD = function () { 
	var x1=this.y0*crx-this.z0*srx; 
	var zz=this.y0*srx+this.z0*crx; 
	var y1=this.x0*cry-zz*sry; 
	zz=this.x0*sry+zz*cry; 
	this.img.left=Math.round(-x1-this.s)+"px"; 
	this.img.top=Math.round(-y1-this.s)+"px"; 
	if(this.s>1) 
		this.img.width=this.img.height= 
			Math.round(Math.max(4,(zz*.16)+this.s))+"px"; 
	zIndex=Math.round(1000+zz); 
} 
function mainloop() { 
	rx+=px; 
	ry+=py; 
	crx=Math.cos(rx); 
	srx=Math.sin(rx); 
	cry=Math.cos(ry); 
	sry=Math.sin(ry); 
	var i = 0, o; 
	while (o = object[i++]) 
		o.TD(); 
	setTimeout(mainloop,16); 
} 
 
document.onmousemove = function(e){ 
	if (window.event) e = window.event; 
	xm = (e.x || e.clientX); 
	ym = (e.y || e.clientY); 
	px = (xm - nx) / 5000; 
	py = (ym - ny) / 5000; 
} 
 
onload = function () { 
	SF = document.getElementById("sf"); 
	I = document.getElementById("images").getElementsByTagName("img"); 
	nx=Math.round(document.body.offsetWidth)/2; 
	ny=Math.round(document.body.offsetHeight)/2; 
	px=k*2; 
	py=k; 
	d=10; 
	for(i=0;i<NSTARS;i++){ 
		object[i] = new CObj( 
            i, 
            I[i%I.length], 
            -d+Math.round(Math.random()*d*2), 
            -d+Math.round(Math.random()*d*2), 
            -d+Math.round(Math.random()*d*2) 
		); 
		d+=d/25; 
	} 
	mainloop(); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="sf" style="position:absolute;left:50%;top:50%"></div> 
 
<div id="images" style="visibility:hidden"> 
	<img src="../images/mars-c.gif"> 
	<img src="../images/pixelblanc.jpg"> 
	<img src="../images/pixelblanc.jpg"> 
	<img src="../images/pixelblanc.jpg"> 
</div> 
 
</body> 
</html>

Tagged with: 3D