dhteumeuleu » the link

the link

On June 1, 2006, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/mTrail-svg.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>the link - 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: #222; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		cursor: crosshair; 
	} 
	#canvas { 
		position:absolute; 
		left: 0%; 
		top: 0%; 
		width:100%; 
		height: 100%; 
		background: #000; 
		overflow: hidden; 
	} 
 
</style> 
 
<script type="text/javascript" src="library/svgvml.js"></script> 
 
<script type="text/javascript"> 
// ============================================================ 
// script: Gerard Ferrandez - Ge-1-doot - June 2006 
// http://www.dhteumeuleu.com 
// ============================================================ 
 
var svg = 0; 
var O  = new Array(); 
var xm = 0; 
var ym = 0; 
var nx = 0; 
var ny = 0; 
var nw = 0; 
var nh = 0; 
var vx = 0; 
var vy = 0; 
var xb = 0; 
var yb = 0; 
 
function resize() { 
	var s = document.getElementById("canvas"); 
	nx = s.offsetLeft; 
	ny = s.offsetTop; 
	nw = s.offsetWidth; 
	nh = s.offsetHeight; 
} 
onresize = resize; 
 
document.onmousemove = function(e){ 
	if(window.event) e=window.event; 
	xm = (e.x || e.clientX); 
	ym = (e.y || e.clientY); 
} 
 
 
function CObj(){ 
	this.x  = xm - nx; 
	this.y  = ym - ny; 
	this.vx = vx * .35; 
	this.vy = vy * .35; 
	this.c  = 0; 
	w = 1; 
	if(Math.random() > .8) w = 20; 
	if(Math.random() > .97) w = 100; 
	this.obj = svg.createLine(w, "", "round"); 
} 
 
function run(){ 
	vx -= (xm - xb); 
	vy -= (ym - yb); 
	if(xm-xb+ym-yb == 0){ 
		vx += Math.random() * 20 - 10; 
		vy += Math.random() * 20 - 10; 
		if(Math.random()>.98){ 
			vx = Math.random() * 400 - 200; 
			vy = Math.random() * 400 - 200; 
		} 
	} 
	vx *= .6; 
	vy *= .6; 
	xb = xm; 
	yb = ym; 
	O.push(new CObj()); 
	n = O.length; 
	N = n; 
	while (n--) { 
		o = O[n]; 
		if(n > 0){ 
			x = O[n-1].x; 
			y = O[n-1].y; 
		} else { 
			x = o.x; 
			y = o.y; 
		} 
		o.obj.move(x, y, o.x, o.y); 
		c = Math.min(255, Math.round(n * 6)); 
		if(Math.abs(c - o.c) > 2){ 
			o.c = c; 
			o.obj.RGBcolor(c, c, c * c * .04); 
		} 
		o.x += o.vx; 
		o.y += o.vy; 
	} 
	if (N > 60) { 
		svg.canvas.removeChild(O[0].obj) 
		O.splice(0,1); 
	} 
} 
 
 
onload = function() { 
	resize(); 
	svg = new vectorGraphics(document.getElementById("canvas"), false); 
	xm = nw / 2; 
	ym = nh / 2; 
	if (svg) setInterval(run, 16); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="canvas"></div> 
 
</body> 
</html>

Tagged with: mousetrail • SVG