dhteumeuleu » unexpected toy

unexpected toy

On January 12, 2004, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE html> 
<html> 
<head> 
<title>unexpected toy - 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"> 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		width: 100%; 
		height: 100%; 
		overflow: hidden; 
	} 
	#screen { 
		position: absolute; 
		left: 0px; 
		top: 0px; 
		background: #000; 
		overflow: hidden; 
		width: 100%; 
		height: 100%; 
		-webkit-transform: translate3d(0,0,0); // forces hardware acceleration in Webkit 
	} 
	#screen img { 
		position:absolute; 
		left:-1000px; 
	} 
</style> 
 
<script type="text/javascript"> 
// ========================================================= 
// script: Gerard Ferrandez - Ge-1-doot - June 12, 2004 
// last updated: August 13, 2011 - implemented touch events 
// http://www.dhteumeuleu.com 
// ========================================================= 
 
"use strict"; 
 
(function () { 
	// ----- private vars ----- 
	var objects, objNext, scr, 
		xm = -1E10, 
		ym = 0, 
		nx = 0, 
		ny = 0, 
		nw = 0, 
		nh = 0, 
		S  = 0, 
		W  = 0, 
		H  = 0; 
	///////////// 
	var Ni = 48; 
	///////////// 
	// ----- particle prototype ----- 
	var CObj = function (x, y, src) { 
		if (!objects) objects = this; else if (objNext) objNext.next = this; 
		objNext = this; 
		var o = document.createElement("img"); 
		o.src = src; 
		document.getElementById("center").appendChild(o); 
		this.obj = o.style; 
		this.x  = x; 
		this.y  = y; 
		this.x0 = x; 
		this.y0 = y; 
	}; 
	CObj.prototype.anim = function () { 
		var dx = xm - this.x; 
		var dy = ym - this.y; 
		var d = Math.sqrt(dx * dx + dy * dy); 
		this.x = this.x - S / d * (dx / d) + (this.x0 - this.x) * .5; 
		this.y = this.y - S / d * (dy / d) + (this.y0 - this.y) * .5; 
		this.obj.left = ((0.5 + this.x - W) | 0) + "px"; 
		this.obj.top  = ((0.5 + this.y - H) | 0) + "px"; 
		if (this.next) this.next.anim(); 
	}; 
	// ----- resize ----- 
	var resize = function () { 
		var d = document.getElementById("screen"); 
		// ---- dimensions ---- 
		nw = d.offsetWidth * 0.5; 
		nh = d.offsetHeight * 0.5; 
		S  = Math.min(nw, nh) * 20; 
		for (nx = 0, ny = 0; d != null; d = d.offsetParent) { 
			nx += d.offsetLeft; 
			ny += d.offsetTop; 
		} 
	}; 
	// ----- initialization ----- 
	var init = function () { 
		scr = document.getElementById("screen"); 
		scr.onselectstart = new Function("return false"); 
		var img = document.getElementById("blob"); 
		resize(); 
		W  = img.width  / 2; 
		H  = img.height / 2; 
		var A = (2 * Math.PI) / Ni; 
		for (var i = 0; i < Ni; i++) { 
			var x = W * Math.cos(A * i); 
			var y = H * Math.sin(A * i); 
			new CObj(x, y, img.src); 
		} 
		// ---- resize ---- 
		document.addEventListener('resize', resize, false); 
		// ---- mouse event ---- 
		document.addEventListener('mousemove', function (e) { 
			xm = -nx - nw + e.clientX; 
			ym = -ny - nh + e.clientY; 
			return false; 
		}, 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 - nw + touch.clientX; 
			ym = -ny - nh + touch.clientY; 
		} 
		// ----- start engine ----- 
		setInterval(function () { 
			objects.anim(); 
		}, 16); 
	}; 
	return { 
		//////////////////////////////////////////////////////////////////////////// 
		// ---- launch script ----- 
		load : function (params) { 
			window.addEventListener('load', function () { 
				init(); 
			}, false); 
		} 
	} 
})().load(); 
</script> 
</head> 
 
 
<body> 
	<div id="screen"> 
		<div id="center" style="position:absolute;left:50%;top:50%"></div> 
		<img id="blob" src="../images/Glob1.gif"> 
	</div> 
</body> 
</html>

Tagged with: touch