Sprite 3d - Liveweave

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Sprite3D - canvas demo</title>

<script type="text/javascript" src="http://minimal.be/lab/Sprite3D/js/RequestAnimationFrame.js"></script>

<script type="text/javascript" src="http://minimal.be/lab/Sprite3D/js/Tween.js"></script>

<script type="text/javascript" src="http://minimal.be/lab/Sprite3D/js/Easing.js"></script>

<script type="text/javascript" src="http://minimal.be/lab/Sprite3D/js/Stats.js"></script>

<script src="http://minimal.be/lab/Sprite3D/js/Sprite3D.js" type="text/javascript"></script>

</head>

var debug,
	stage,
	container,
	slices = [],
	numSlices = 40,
	currentSlice = -1,
	sliceWidth = 800,
	sliceHeight = 100,
	lastTime,
	zStep = 100,
	zOffset = 0,
	zSpeed = 3000,
	i,
	x = 0, y = 0,
	r = 0,
	path,
	np = 20,
	xStep;
			
function init() {
	debug = document.getElementById("debug");
	
	// create a centered 3D stage and a container
	stage = Sprite3D.createCenteredContainer();
	container = stage.addChild( new Sprite3D() ).setZ( 500 ).setRotateFirst(false).update();
	
	path = [];
	for( i = 0; i < np; i++ ) path.push( sliceHeight >> 1 );
	xStep = sliceWidth / (np-1);
	
	starContainer = stage.addChild( new Sprite3D() );
	
	for( i = 0; i < 25; i++ )
	{
		starContainer.addChild( new Sprite3D()
			.setClassName("star")
			.setRotateFirst(true)
			.setRotation( Math.random() * 360, Math.random() * 360, Math.random() * 360 )
			.setPosition( 0, 0, 800 )
			.update()
		);
	}
	
	var canvas;
	
	for( i = 0; i < numSlices; i++ )
	{
		// create an <canvas> element, wraps a sprite around, and save the reference to its context
		canvas = document.createElement('canvas');
		canvas.width = sliceWidth;
		canvas.height = sliceHeight;
		container.addChild(
			new Sprite3D(canvas)
				.setClassName("box")
				.setRegistrationPoint(sliceWidth>>1, sliceHeight>>1, 0)
				.setPosition( 0, 0, i * -zStep )
				.setProperty( 'context', canvas.getContext('2d') )
				.setRotateFirst( false )
				.update()
		);
	}
	
	//msg( numSlices + ' wrapped canvas objects');
	
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	document.body.appendChild(stats.domElement);
	
	// keep track of the time to tick the tween engine
	lastTime = new Date().getTime();
	
	moveXYAgain()
	
	document.addEventListener( "touchstart", onTouchStart );
	document.addEventListener( "touchmove", onTouchMove );
	document.addEventListener( "mousemove", onMouseMove );
	
	animate();
}

function onMouseMove( event ) {
	var dx = ( event.pageX / window.innerWidth - .5 );
	var dy = ( event.pageY / window.innerHeight - .5 );
	container.x = dx * -1200;
	container.y = dy  * -900;
	//starContainer.rotationZ = container.rotationZ = dx * 120;
	//event.preventDefault();
}

function onTouchMove( event ) {
	var t = event.changedTouches[0];
	var dx = ( t.pageX / window.innerWidth - .5 );
	var dy = ( t.pageY / window.innerHeight - .5 );
	container.x = dx * 1600;
	container.y = dy  * 1000;
	//starContainer.rotationZ = container.rotationZ = dx * 120;
	event.preventDefault();
}

function onTouchStart( event ) {
	var t = event.changedTouches[0];
	var dx = ( t.pageX / window.innerWidth - .5 );
	var dy = ( t.pageY / window.innerHeight - .5 );
	container.x = dx * 1600;
	container.y = dy  * 1000;
	//starContainer.rotationZ = container.rotationZ = dx * 120;
	event.preventDefault();
}

function moveXYAgain() {
	// when the tween is over, start a new one to a random position,
	// and again, call this function when it's done
	Tween.get( this, false).to({ 
		x: ( Math.random() - .5 ) * 1800,
		y: ( Math.random() - .5 ) * 1200
	},Math.random()*1000+400,Easing.Quadratic.EaseInOut).call(moveXYAgain);
}

function animate() {
	requestAnimationFrame( animate );
	update();
}

stats.update();
}

function draw( ctx )
{
	var v;
	// mutate and draw
	ctx.clearRect( 0, 0, sliceWidth, sliceHeight );
	ctx.lineWidth = 4;
	ctx.strokeStyle = "rgba( 255, 255, 255, .3 )";
	ctx.beginPath();
	// first point
	v = path[0];
	v += ( Math.random() - .5 ) * 16;
	v = v < 0 ? 0 : v > sliceHeight ? sliceHeight : v;
	ctx.moveTo( 0, sliceHeight - v );
	path[0] = v;
	for( i = 1; i < np; i++ ) {
		v = path[i];
		v += ( Math.random() - .5 ) * 16;
		v = v < 0 ? 0 : v > sliceHeight ? sliceHeight : v;
		ctx.lineTo( (i+1) * xStep, sliceHeight - v );
		path[i] = v;
	}
	ctx.stroke();
}

function msg( t )
{
	debug.innerHTML = t;
}

Check out our Python playground!