text: <!DOCTYPE HTML>
  <html lang="en">
  	<head>
  		<title>CCapture.js example with Conway's Game of Life in 3D</title>
  		<meta charset="utf-8">
  		<link rel="stylesheet" href="buttons.css" type="text/css" media="screen" title="no title" charset="utf-8">
  		<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
  		<style type="text/css">
  		html {
  			height: 100%;
  		}
  		body {
  			margin: 0;
  			padding: 0;
  			background-color: #000;
  			color: #ffffff;
  			font-family: 'roboto condensed', sans-serif;
  			font-size: 13px;
  			line-height: 20px;
  			height: 100%;
  			overflow: hidden
  		}
  		#scroller{
  			position: absolute;
  			left: 0;
  			top: 0;
  			right: 0;
  			bottom: 0;
  			overflow: scroll;
  		}
  		#container{
  			position: absolute;
  			left: 0;
  			top: 0;
  			right: 0;
  			bottom: 0
  		}
  		a {
  			color: #fff;
  			text-decoration: none;
  			border-bottom: 1px dotted #fff;
  		}
  		a:hover {
  			border-bottom: 1px solid #fff
  		}
  		#title {
  			z-index: 100;
  			position: absolute;
  			top: 20px;
  			width: 300px;
  			left: 20px;
  			background-color: rgba(0,0,0,0.2);
  			border-radius: 3px;
  			padding: 10px;
  			overflow: auto;
  			-webkit-transition: opacity 1s ease-out;
  			-moz-transition: opacity 1s ease-out;
  		}
  		#options{
  			position: absolute;
  			top: 20px;
  			width: 300px;
  			right: 20px;
  			background-color: rgba(0,0,0,0.2);
  			border-radius: 3px;
  			padding: 10px;
  			overflow: hidden;
  		}
  		h1{
  			font-size: 20px;
  			margin: 0;
  		}
  		h2{
  			font-size: 16px;
  			margin: 0;
  		}
  		#preloader{
  			width: 306px;
  			height: 36px;
  			position: absolute;
  			left: 50%;
  			top: 50%;
  			margin-left: -153px;
  			margin-top: -18px;
  			background-color: rgba(255,255,255,0.8);
  			border-radius: 3px;
  			-webkit-transition: opacity 1s ease-out;
  			-moz-transition: opacity 1s ease-out;
  		}
  		#bar{
  			height: 30px;
  			position: absolute;
  			left: 50%;
  			top: 50%;
  			margin-left: -150px;
  			margin-top: -15px;
  			background-color: rgba(0,0,0,0.8);
  			border-radius: 3px;
  		}
  		#download-video-button{
  			display: none;
  		}
  		#progress{ position: absolute; left: 0; top: 0; z-index: 100; height: 10px; background-color: #b70000;}
  		</style>
  	</head>
  	<body>
  
  	<div id="scroller" >
  		<div id="title">
  			<h1>CCapture.js example</h1><h2>Game of Life in 3D</h2>
  			<p>Example of <a href="#" >ccapture.js</a> using <a href="http://www.clicktorelease.com/code/conway3d/" >Game of Life in 3D</a>.</p>
  			<p>This is a simple example of how to add a few lines of code to capture video out of a canvas-based animation.</p>
  			<p><b>Framerate</b><br/>
  				<input type="radio" name="framerate" id="encode-10" value="10" ></input> <label for="encode-10" >10FPS</label>
  				<input type="radio" name="framerate" id="encode-30" value="30" checked="checked" ></input></input> <label for="encode-30" >30FPS</label>
  				<input type="radio" name="framerate" id="encode-60" value="60" ></input></input> <label for="encode-60" >60FPS</label>
  				<input type="radio" name="framerate" id="encode-120" value="120" ></input></input> <label for="encode-120" >120FPS</label></p>
  			<p><b>Format</b><br/>
  				<input type="radio" name="encoder" id="encode-webm" value="webm" checked="checked" ></input> <label for="encode-webm" >WebM</label>
  				<input type="radio" name="encoder" id="encode-gif" value="gif" ></input></input> <label for="encode-gif" >GIF</label>
  				<input type="radio" name="encoder" id="encode-png" value="png" ></input></input> <label for="encode-png" >PNG</label>
  				<input type="radio" name="encoder" id="encode-jpg" value="jpg" ></input></input> <label for="encode-jpg" >JPEG</label></p>
  				<input type="radio" name="encoder" id="encode-webm-mediarecorder" value="webm-mediarecorder" ></input> <label for="encode-webm-mediarecorder" >WebM (MediaRecorder) <b>WIP</b></label>
  			<p><b>Other options</b><br/>
  				<input id="apply-motionblur" name="motion-blur" type="checkbox" /> <label for="apply-motionblur">Apply motion blur</label>
  			</p>
  			<a class="button" href="#" id="start-capturing-button" >Start recording</a>
  			<a class="button" href="#" id="download-video-button" >Stop recording and view capture</a>
  		</div>
  	</div>
  
  	<div id="container" ></div>
  
  	<div id="progress"></div>
  
  	<a href="https://github.com/spite/ccapture.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
  
  	<script type="text/javascript" src="./js/three.min.js"></script>
  	<script type="text/javascript" src="./js/Tween.js"></script>
  	<script type="text/javascript" src="./js/RequestAnimationFrame.js"></script>
  	<script type="text/javascript" src="./js/Detector.js"></script>
  	<script type="text/javascript" src="./js/OrbitControls.js"></script>
  
  	<script type="text/javascript" src="../../build/CCapture.all.min.js"></script>
  
  	<script type="text/javascript" >
  
  	var capturer;
  	var lon = 45, lat = 45, phi = 0, theta = 0;
  	var d = 40;
  
  	var container;
  	var camera, scene, renderer,
  	geometry, material, mesh, cubes = [];
  	var spotLight, spotLight2;
  	var controls;
  
  	if(!Detector.webgl){
  		Detector.addGetWebGLMessage();
  	} else {
  		window.addEventListener( 'load', init, false );
  	}
  
  	TWEEN.start();
  
  	var fov = 75;
  	var side = 10;
  	var size = 10;
  	var cells = [];
  	var tweens = [];
  	var timeout;
  	var lastTime = null;
  	var ellapsedTime = 0;
  
  	var title = document.getElementById( 'title' );
  
  	function init() {
  
  		container = document.getElementById( 'container' );
  
  		camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 2000 );
  		camera.position.z = 1000;
  
  		scene = new THREE.Scene();
  
  		geometry = new THREE.BoxBufferGeometry( size, size, size );
  
  		for( var z = 0; z < side; z++ ) {
  			for( var y = 0; y < side; y++ ) {
  				for( var x = 0; x < side; x++ ) {
  					var mesh = new THREE.Mesh(
  						geometry,
  						new THREE.MeshStandardMaterial( {
  							roughness: .5,
  							metalness: 0,
  							color: ( z * 255 / side ) * 256 * 256 + ( y * 255 / side ) * 256 + ( x * 255 / side ),
  							transparent: true
  						} )
  					);
  					scene.add( mesh );
  					mesh.castShadow = true;
  					mesh.receiveShadow = true;
  					mesh.position.x = ( x - .5 * side ) * size;
  					mesh.position.y = ( y - .5 * side ) * size;
  					mesh.position.z = ( z - .5 * side ) * size;
  					var conwayStatus = ( Math.random() < .1 );
  					mesh.conway = conwayStatus?1:0;
  					cubes.push( mesh );
  					cells.push( { status: conwayStatus } );
  					tweens.push( new TWEEN.Tween( mesh ).easing( TWEEN.Easing.Quadratic.EaseOut ) );
  				}
  			}
  		}
  
  		var mesh = new THREE.Mesh(
  			new THREE.IcosahedronGeometry( 1000, 3 ),
  			new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff, side: THREE.BackSide } )
  		);
  		scene.add( mesh );
  
  		spotLight = new THREE.SpotLight( 0xff170f, 1, 3000, 2, .5 );
  		spotLight.position.set( 150, 400, 350 );
  		spotLight.castShadow = true;
  		spotLight.angle = Math.PI / 4;
  		spotLight.penumbra = 0.5;
  		spotLight.decay = .5;
  		spotLight.distance = 2000;
  		spotLight.shadow.mapSize.width = 1024;
  		spotLight.shadow.mapSize.height = 1024;
  		spotLight.shadow.camera.near = 1;
  		spotLight.shadow.camera.far = 1000;
  
  		scene.add( spotLight );
  
  		spotLight2 = new THREE.SpotLight( 0xffcf0f, 1, 3000, 2, .5 );
  		spotLight2.position.set( 0, -400, -1800 );
  		spotLight2.castShadow = true;
  		spotLight2.angle = Math.PI / 4;
  		spotLight2.penumbra = 0.5;
  		spotLight2.decay = .5;
  		spotLight2.distance = 2000;
  		spotLight2.shadow.mapSize.width = 1024;
  		spotLight2.shadow.mapSize.height = 1024;
  		spotLight2.shadow.camera.near = 1;
  		spotLight2.shadow.camera.far = 200;
  
  		scene.add( spotLight2 );
  
  		renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true });
  		renderer.sortObjects = false;
      renderer.setPixelRatio(window.devicePixelRatio);
  		renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.setClearColor(0,0);
  
  		renderer.shadowMap.enabled = true;
  		renderer.shadowMap.type = THREE.PCFSoftShadowMap
  
  		container.appendChild( renderer.domElement );
  
  		controls = new THREE.OrbitControls( camera, renderer.domElement );
  
  		window.addEventListener( 'resize', onWindowResize, false );
  
  		onWindowResize();
  
  		lastTime = Date.now();
  
  		capturer = null;
  
  		var sCB = document.getElementById( 'start-capturing-button' ),
  			dVB = document.getElementById( 'download-video-button' ),
  			progress = document.getElementById( 'progress' );
  
  		sCB.addEventListener( 'click', function( e ) {
  
  			var framerate = document.querySelector('input[name="framerate"]:checked').value;
  
  			capturer = new CCapture( {
  				verbose: false,
  				display: true,
  				framerate: framerate,
  				motionBlurFrames: ( 960 / framerate ) * ( document.querySelector('input[name="motion-blur"]').checked ? 1 : 0 ),
  				quality: 99,
  				format: document.querySelector('input[name="encoder"]:checked').value,
  				workersPath: '../../src/',
  				timeLimit: 4,
  				frameLimit: 0,
  				autoSaveTime: 0,
  				onProgress: function( p ) { progress.style.width = ( p * 100 ) + '%' }
  			} );
  
  			capturer.start();
  			this.style.display = 'none';
  			dVB.style.display = 'block';
  			e.preventDefault();
  		}, false );
  
  		dVB.addEventListener( 'click', function( e ) {
  			capturer.stop();
  			this.style.display = 'none';
  			//this.setAttribute( 'href',  );
  			capturer.save();
  		}, false );
  
  		animate();
  		next();
  
  	}
  
  	function onWindowResize( event ) {
  		if( renderer ) {
  			renderer.setSize( window.innerWidth, window.innerHeight );
  			camera.aspect = window.innerWidth / window.innerHeight;
  			camera.updateProjectionMatrix();
  		}
  	}
  
  	function animate() {
  
  		requestAnimationFrame( animate );
  		render();
  
  	}
  
  	function evaluateCell( current ) {
  
  		var status = cells[ current ].status;
  		var count = 0;
  		for( var z = -1; z <=1; z++ ) {
  			for( var y = -1; y <=1; y++ ) {
  				for( var x = -1; x <=1; x++ ) {
  					var p = current + z * side * side + y * side + x;
  					if( cells[ p ] && cells[ p ].status ) {
  						count++;
  					}
  
  				}
  			}
  		}
  
  		if( count > 4 ) return false;
  		if( count < 3 ) return false;
  		if( count == 4 ) return true;
  		return status;
  	}
  
  	function next() {
  
  		var nextGen = [];
  
  		var p = 0;
  		for( var z = 0; z < side; z++ ) {
  			for( var y = 0; y < side; y++ ) {
  				for( var x = 0; x < side; x++ ) {
  					nextGen[ p ] = { status: evaluateCell( p ) };
  					p++;
  				}
  			}
  		}
  
  		cells = nextGen;
  
  		for( var p = 0, m = cells.length; p < m; p++ ) {
  			tweens[ p ].to( { conway: cells[ p ].status?1:0 }, 1000 ).start();
  		}
  
  		timeout = setTimeout( next, 2000 );
  
  	}
  
  
  	function render() {
  
  		controls.update();
  
  		var currentTime = Date.now();
  		currentTime = performance.now();;
  		ellapsedTime = currentTime - lastTime;
  
  		for( var p = 0, m = cells.length; p < m; p++ ) {
  			cubes[ p ].material.opacity = cubes[ p ].conway;
  			cubes[ p ].rotation.y = Math.PI * cubes[ p ].conway;
  			var s = cubes[ p ].conway;
  			if( s < .001 ) s = .001;
  			cubes[ p ].scale.set( s, s, s );
  		}
  
  		lon += 1.5 * ellapsedTime / ( 1000.0 / 60.0 );
  
  		lat = Math.max( - 85, Math.min( 85, lat ) );
  		phi = ( 90 - lat ) * Math.PI / 180;
  		theta = lon * Math.PI / 180;
  
  		//d = 140 + 100 * Math.sin( .01 * currentTime );
  		camera.position.x = d * Math.sin( phi ) * Math.cos( theta );
  		camera.position.y = d * Math.cos( phi );
  		camera.position.z = d * Math.sin( phi ) * Math.sin( theta );
  		camera.lookAt( scene.position );
  		camera.rotation.z = .001 * currentTime;
  
  		var dl = 400;
  		var t = 0.0003 * currentTime;
  		spotLight.position.set( camera.position.x, camera.position.y + 50, camera.position.z );//dl * Math.sin( t ), dl * Math.cos( t ), dl * Math.cos( t ) * Math.sin( t ) );
  		var t = .00025 * currentTime;
  		spotLight2.position.set( dl * Math.sin( t ) * Math.cos( t ), dl * Math.sin( t ), dl * Math.cos( t ) );
  
  		renderer.render( scene, camera );
  		if( capturer ) capturer.capture( renderer.domElement );
  
  		lastTime = currentTime;
  	}
  
  	</script>
  
  </body>
  
  </html>
  