dhteumeuleu » idle

idle

On January 14, 2003, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>idle - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		cursor: crosshair; 
	} 
	#screen { 
		position:absolute; 
		left: 10%; 
		top: 10%; 
		width: 80%; 
		height: 80%; 
		background: #111; 
		overflow: hidden; 
	} 
 
</style> 
 
<script type="text/javascript" src="library/svgvml.js"></script> 
 
<script type="text/javascript"> 
// ============================================================ 
//        ------  mystify JavaScript + VML / SVG ------- 
// script written by Gerard Ferrandez - JAN 2oo3 - July 2006 
// http://www.dhteumeuleu.com 
// ============================================================ 
 
var N   = 16; // number of lines 
var p   = 4; // speed 
var dV  = [-1,1,1,-1,-1,1,-1,1]; 
var xyP = [1,1,3,3,1,3,3,1]; 
var dx  = []; 
var dy  = []; 
var x   = []; 
var y   = []; 
var nw  = 0; 
var nh  = 0; 
var ck  = 0; 
var svg; 
 
function resize() { 
	var s = document.getElementById("screen"); 
	nw = s.offsetWidth; 
	nh = s.offsetHeight; 
} 
onresize = resize; 
 
function run(){ 
	ck += .05; 
	svg.createPolyline(1, 
		x[0]+","+y[0]+","+x[1]+","+y[1]+","+x[2]+","+y[2]+","+x[3]+","+y[3]+","+x[0]+","+y[0], 
		"RGB("+Math.round(164+128*Math.sin(ck))+","+Math.round(164+128*Math.sin(ck*1.2))+","+Math.round(164+128*Math.cos(ck))+")" 
	); 
	for(i=0;i<4;i++){ 
		x[i] += dx[i]; 
		y[i] += dy[i]; 
		if(x[i]<0) dx[i] = -dx[i]; else if(x[i]>nw)dx[i] = -dx[i]; 
		if(y[i]>nh)dy[i] = -dy[i]; else if(y[i]<0) dy[i] = -dy[i]; 
	} 
	if(svg.canvas.childNodes.length>2*N-1) svg.canvas.removeChild(svg.canvas.firstChild); 
} 
 
function init() { 
	for(var i=0;i<4;i++){ 
		dx[i] = p*dV[i]; 
		dy[i] = p*dV[i+4]; 
		x[i] = Math.round(p*((nw/30/(2*p))*xyP[i]*10)); 
		y[i] = Math.round(p*((nh/30/(2*p))*xyP[i+4]*10)); 
	} 
} 
 
 
onload = function() { 
	/* ==== initial size ==== */ 
	resize(); 
	/* ==== create SVGVML container ==== */ 
	svg = new vectorGraphics(document.getElementById("screen"), true); 
	if (svg) { 
		/* ==== init ==== */ 
		init(); 
		setInterval(run, 64); 
	} 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"></div> 
 
</body> 
</html>

Tagged with: SVG