dhteumeuleu » never force

never force

On October 11, 2011, in demo, by ge1doot music:

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE html> 
<html> 
<head> 
<title>never force - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<style type="text/css"> 
	body { 
		margin: 0px; 
		padding: 0px; 
		width: 100%; 
		height: 100%; 
		overflow: hidden; 
	} 
	#screen { 
		position: absolute; 
		height: 100%; 
		width: 100%; 
		background: #2a2a2a; 
		overflow: hidden; 
	} 
	#clip { 
		position: absolute; 
		overflow: visible; 
		top: 20%; 
		height: 60%; 
		width: 100%; 
		border-top: #444 1px solid; 
		border-bottom: #444 1px solid; 
		background: #000000; 
	} 
	#screen svg { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
</style> 
 
<script type="text/javascript"> 
// =========================================================================== 
// script: Gerard Ferrandez - Ge-1-doot - September 2004 
// last update: 10 October 2011 - converted from legacy VML to SVG 
// http://www.dhteumeuleu.com 
// =========================================================================== 
 
"use strict"; 
 
(function () { 
	// ----- private vars ----- 
	var svg, svgNS = "http://www.w3.org/2000/svg"; 
	var vect = [], lines = [], sw, nx, ny, nw, nh, xm, ym, py; 
	var nbx = 14, nby = 0, cx = 0, cy = 0, rad = 0, ws = 0, hs = 0; 
	// ----- insert SVG line ----- 
	var insertSVGLine = function () { 
		var line = document.createElementNS(svgNS, "line"); 
		line.setAttribute("stroke-linecap", "round"); 
		line.setAttribute("stroke", "rgb(0,0,0)"); 
		svg.appendChild(line); 
		return line; 
	} 
	// ----- Robot prototype ----- 
	var Vector = function (n, x, y) { 
		if (lines.length <= n * 2) { 
			lines.push(insertSVGLine()); 
			lines.push(insertSVGLine()); 
		} 
		this.x = x; 
		this.y = y; 
	}; 
	// ----- 3D lens ---- 
	Vector.prototype.points = function () { 
		this.x1 = this.x * ws; 
		this.y1 = py + this.y * hs + sw * 0.5; 
		var dx = cx - this.x1; 
		var dy = cy - this.y1; 
		var dist = Math.sqrt(dx * dx + dy * dy); 
		if (dist < rad) { 
			var k = Math.PI * Math.abs(dist / rad); 
			var M = Math.sin(k); 
			this.zIndex =  (1 + 3 * (1 - Math.sin(k * .5))); 
			this.visible = true; 
			this.x2 = 1 + this.x1 - dx * M; 
			this.y2 = 1 + this.y1 - dy * M; 
		} else { 
			this.zIndex = -1; 
			this.visible = false; 
		} 
	} 
	// ----- animation function ----- 
	Vector.prototype.animSVG = function (i) { 
		var shad = lines[i * 2]; 
		var line = lines[i * 2 + 1]; 
		if (this.visible) { 
			this.isVisible = true; 
			// ---- color line ---- 
			line.setAttribute("visibility", "visible"); 
			line.setAttribute("stroke-width", sw); 
			line.setAttribute("x1", Math.round(this.x1)); 
			line.setAttribute("y1", Math.round(this.y1)); 
			line.setAttribute("x2", Math.round(this.x2)); 
			line.setAttribute("y2", Math.round(this.y2)); 
			var c = Math.round(-196 + this.zIndex * 255); 
			line.setAttribute("stroke", "rgb(" + 
				Math.round(c * ym / nh) + "," + 
				Math.round(c * .5) + "," + 
				Math.round(c * xm / nw) + ")" 
			); 
			// ---- shadow ---- 
			shad.setAttribute("visibility", "visible"); 
			shad.setAttribute("stroke-width", sw); 
			shad.setAttribute("x1", Math.round(this.x1 + sw * 0.25)); 
			shad.setAttribute("y1", Math.round(this.y1)); 
			shad.setAttribute("x2", Math.round(this.x2 + sw * 0.25)); 
			shad.setAttribute("y2", Math.round(this.y2)); 
		} else { 
			if (this.isVisible) { 
				// ---- hide line ---- 
				line.setAttribute("visibility", "hidden"); 
				shad.setAttribute("visibility", "hidden"); 
				this.isVisible = false; 
			} 
		} 
	} 
 
	var resize = function () { 
		// ---- dimmensions ---- 
		var d = document.getElementById("screen"); 
		nw = d.offsetWidth; 
		for (nx = 0, ny = 0; d != null; d = d.offsetParent) { 
			nx += d.offsetLeft; 
			ny += d.offsetTop; 
		} 
		var d = document.getElementById("clip"); 
		nh  = d.offsetHeight - 6; 
		py  = d.offsetTop + 2; 
		sw  = Math.round(nw / 20); 
		ws  = nw / nbx; 
		nby = Math.round(nbx * nh / nw); 
		hs  = (nh - sw) / nby; 
		rad = nw / 4; 
		// ---- hide lines ---- 
		var i = 0, o; 
		while ( o = lines[i++] ) 
			o.setAttribute("visibility", "hidden"); 
		// ---- reset lines ---- 
		vect = []; 
		var k = 0; 
		for (var j = 0; j <= nby; j++) { 
			for (var i = 0; i <= nbx; i++) { 
				vect.push( 
					new Vector(k++, i, j) 
				); 
			} 
		} 
	}; 
	// ----- main loop ----- 
	var run = function () { 
		// ---- easing mouse ---- 
		cx += Math.round((xm - cx) * 0.1); 
		cy += Math.round((ym - cy) * 0.1); 
		// ---- calculate positions ---- 
		var i = 0, o; 
		while ( o = vect[i++] ) o.points(); 
		// ---- zIndex sorting ---- 
		vect.sort(function (p0, p1) { 
			return p0.zIndex - p1.zIndex; 
		}); 
		// ---- painting ---- 
		var i = 0, o; 
		while ( o = vect[i] ) o.animSVG(i++); 
 
	}; 
	//////////////////////////////////////////////////////////////////////////////////////// 
	// ----- initialization ----- 
	var init = function () { 
		// ---- create SVG container ---- 
		svg = document.createElementNS(svgNS, "svg"); 
		document.getElementById("screen").appendChild(svg); 
		// ---- resize screen ---- 
		window.addEventListener('resize', resize, false); 
		resize(); 
		// ---- mouse event ---- 
		document.addEventListener('mousemove', function (e) { 
			xm = -nx + e.clientX; 
			ym = -ny + e.clientY; 
		}, false); 
		// ----- touch events ----- 
		document.addEventListener('touchmove',  function (e) { touchwk(e); }, false); 
		document.addEventListener('touchstart', function (e) { touchwk(e); }, false); 
		var touchwk = function (e) { 
			e.preventDefault(); 
			var touch = e.touches[0]; 
			xm = -nx + touch.clientX; 
			ym = -ny + touch.clientY; 
		} 
		// ----- start engine ----- 
		xm = nx + nw / 2; 
		ym = ny + nh / 2; 
		setInterval(run, 16); 
	}; 
 
	return { 
		//////////////////////////////////////////////////////////////////////////// 
		// ---- launch script ----- 
		load : function (params) { 
			window.addEventListener('load', function () { 
				init(); 
			}, false); 
		} 
	} 
})().load(); 
</script> 
</head> 
<body> 
	<div id="screen"> 
		<div id="clip"></div> 
	</div> 
</body> 
</html>

Tagged with: SVG