fascinating - HTML5 CANVAS 3D CUBES demo

fascinating - HTML5 CANVAS 3D CUBES demo http://cssdeck.com/labs/html5-canvas-3d-cubes http://cssdeck.com/labs/yp9w9dqr

by Yury

HTML

<div id="screen"> 
<canvas id="canvas">HTML5 CANVAS</canvas> 
<div id="info"> 
	<div class="background"></div> 
		<div class="content"> 
			<h1>3D Cubes</h1> 
			<table> 
				<tr><td class="w">drag</td><td>→ rotate X,Y axis</td></tr> 
				<tr><td class="w">wheel</td><td>→ rotate Z axis</td></tr> 
				<tr><td class="w">click</td><td>→ create cube</td></tr> 
			</table> 
			<hr> 
			<input type="checkbox" id="white"><label for="white"> white background</label><br> 
			<input type="checkbox" id="alpha"><label for="alpha"> transparency</label><br> 
			<input type="checkbox" id="autor"><label for="autor"> auto rotation</label><br> 
			<input type="checkbox" id="destroy"><label for="destroy"> destroy cubes</label><br> 
			<hr> 
			- <span id="fps" class="w">00</span> FPS<br> 
			- <span id="npoly" class="w">00</span> Faces<br> 
			<p align="center"><input type="button" value="RESET" id="reset" class="button"></input><input type="button" value="STOP" id="stopgo" class="button"></input></p> 
		</div> 
	</div> 
</div>

CSS

html { 
		overflow: hidden; 
	} 
	body { 
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		background: #000; 
		overflow: hidden; 
		font-family: Segoe UI, Verdana, Arial, Sans-Serif; 
		color: #fff; 
		font-size: 13px; 
	} 
	#screen canvas { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		background: #000; 
	} 
	#info { 
        position: absolute; 
        text-align: left; 
        top: 19%; 
        left: 2%; 
		width: 180px; 
		height: 340px; 
        color: #666; 
        font-size: 1em; 
	} 
	#info .background { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		background: #000; 
		opacity: 0.3; 
	} 
	#info .content { 
		position: absolute; 
		padding: 3px; 
		width: 100%; 
		height: 100%; 
	} 
	#info .w { 
		color: #fff; 
	} 
	#info hr { 
		width: 90%; 
		border: none; 
		background-color: #666; 
		height: 1px; 
	} 
	#info h1 { 
		color: #fff; 
		text-align: center; 
	} 

.button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#333333 0%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#333333),
		to(#000000));
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 1px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 1px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	box-shadow:
		0px 1px 1px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
}

JavaScript

// ============================================================= 
//           ===== CANVAS 3D experiment ===== 
//     ===== simple 3D cubes HTML5 engine ==== 
// script written by Gerard Ferrandez - January 2, 2012 
// http://www.dhteumeuleu.com 
// ============================================================= 
 
"use strict"; 
 
(function () { 
	// ======== private vars ======== 
	var scr, canvas, cubes, faces, nx, ny, nw, nh, xm = 0, ym = 0, cx = 50, cy = 50, cz = 0, cxb = 0, cyb = 0; 
	var white, alpha, fps = 0, ncube, npoly, faceOver, drag, moved, startX = 0, startY = 0; 
	var cosY, sinY, cosX, sinX, cosZ, sinZ, minZ, angleY = 0, angleX = 0, angleZ = 0; 
	var bkgColor1 = "rgba(0,0,0,0.1)"; 
	var bkgColor2 = "rgba(32,32,32,1)"; 
	var autorotate = false, destroy = false, running = true; 
	// ---- fov ---- 
	var fl = 250; 
	var zoom = 0; 
	// ======== canvas constructor ======== 
	var Canvas = function (id) { 
		this.container = document.getElementById(id); 
		this.ctx = this.container.getContext("2d"); 
		this.resize = function (w, h) { 
			this.container.width = w; 
			this.container.height = h; 
		} 
	}; 
	// ======== vertex constructor ======== 
	var Point = function (parent, xyz, project) { 
		this.project = project; 
		this.xo = xyz[0]; 
		this.yo = xyz[1]; 
		this.zo = xyz[2]; 
		this.cube = parent; 
	}; 
	Point.prototype.projection = function () { 
		// ---- 3D rotation ---- 
		var x = cosY * (sinZ * this.yo + cosZ * this.xo) - sinY * this.zo; 
		var y = sinX * (cosY * this.zo + sinY * (sinZ * this.yo + cosZ * this.xo)) + cosX * (cosZ * this.yo - sinZ * this.xo); 
		var z = cosX * (cosY * this.zo + sinY * (sinZ * this.yo + cosZ * this.xo)) - sinX * (cosZ * this.yo - sinZ * this.xo); 
		this.x = x; 
		this.y = y; 
		this.z = z; 
		if (this.project) { 
			// ---- point visible ---- 
			if (z < minZ) minZ = z; 
			this.visible = (zoom + z > 0); 
			// ---- 3D to 2D projection ---- 
			this.X = (nw * 0.5) + x * (fl / (z + zoom)); 
			this.Y = (nh * 0.5) +...