examples/02_black_and_red.html

<!DOCTYPE html> 
<html lang="en">
	<head>
		<title>Black and Red / Tween.js</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="info">
			<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
			<h2>02 _ Black and red</h2>
			<p>4096 continuously changing color cells (in a 64x64 table)</p>
			<p></p>
		</div>
		<div id="target"></div>

		<style>
			body { font-family: Arial, Helvetica, sans; }
			table { border-collapse: collapse; }
			td { width: 5px; height: 5px; }
			#target { position: absolute; top: 4em; right: 3em; }
		</style>

		<script src="../src/Tween.js"></script>
		<script src="js/stats.min.js"></script>
		<script src="js/RequestAnimationFrame.js"></script>
		<script>
			var stats;

			init();
			animate();

			function init() {
				var target = document.getElementById('target');
				stats = new Stats();
				target.appendChild(stats.domElement);

				var t = document.createElement('table');
				var index = 0;

				for(var i = 0; i < 64; i++) {
					var tr = t.insertRow(-1);
					for(var j = 0; j < 64; j++) {
						var td = tr.insertCell(-1);
						td.style.background = '#000';
						var x = (i+j) * 0.1;
						var cell = { 'td': td, value : 0 };
						var tween = new TWEEN.Tween(cell)
							.to({ value: 1 }, 8000)
							.delay((0.001 * index + Math.random()) * 500)
							.easing(TWEEN.Easing.Elastic.InOut)
							.onUpdate(function() {
								var c = Math.floor(this.value * 0xff);
								this.td.style.background = 'rgb(' + c + ', 0, 0)';
							});

						var tweenBack = new TWEEN.Tween(cell)
							.to({ value: 0 }, 4000)
							.delay((0.001*index + Math.random()) * 500)
							.easing(TWEEN.Easing.Elastic.InOut)
							.onUpdate(function() {
								var c = Math.floor(this.value * 0xff);
								this.td.style.background = 'rgb(' + c + ', 0, 0)';
							});

						tween.chain(tweenBack);
						tweenBack.chain(tween);

						tween.start();
						index++;
					}
				}

				target.appendChild(t);
			}

			function animate( time ) {

				requestAnimationFrame( animate );

				TWEEN.update( time );
				stats.update();
			}
		</script>
	</body>
</html>