squarefeet/valueOverLifetimeTest.html

## valueOverLifetimeTest.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
	<head>
		<title>Demo</title>
		<script language = 'javascript' src = "../examples/js/THREE-r72.js" type = 'text/javascript'></script>
		<script type="text/javascript" src="../src/SPE.js"></script>
		<script type="text/javascript" src="../src/helpers/SPE.TypedArrayHelper.js"></script>
        <script type="text/javascript" src="../src/helpers/SPE.ShaderAttribute.js"></script>
        <script type="text/javascript" src="../src/shaders/SPE.shaderChunks.js"></script>
        <script type="text/javascript" src="../src/shaders/SPE.shaders.js"></script>
        <script type="text/javascript" src="../src/core/SPE.utils.js"></script>
        <script type="text/javascript" src="../src/core/SPE.Group.js"></script>
        <script type="text/javascript" src="../src/core/SPE.Emitter.js"></script>

        <style type="text/css">
        body {
        	margin: 0;
        	overflow: hidden;
        }
        </style>

	</head>
	<body id="body">
		<script type='text/javascript'>
			document.addEventListener("keydown", handleKeyDown, false);
			var keyArray = [];

			function handleKeyDown(event) {
				keyArray.push(event.keyCode);
			}

			var width = window.innerWidth;
			var height = window.innerHeight;

			var scene = new THREE.Scene();
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height);
			document.body.appendChild(renderer.domElement);

			var light = new THREE.AmbientLight(0x444444);
			scene.add(light);

			var camera = new THREE.OrthographicCamera(width/-2, width/2, height/2, height/-2, 1, 1000);
			var theta = Math.PI/2;
			var phi = 0;
			var radius = 400;
			var origin = new THREE.Vector3(0,0,0);
			var factor = 0.01;

			var geometry = new THREE.PlaneGeometry(700, 700);
			var material = new THREE.MeshLambertMaterial({color: 0xffffff, side: THREE.DoubleSide});
			var plane = new THREE.Mesh(geometry, material);
			plane.rotation.x = Math.PI/2;

			scene.add(plane);

			var smokeGroup0;

			SPE.valueOverLifetimeLength = 3;

			function createCloud() {

				smokeGroup0 = new SPE.Group({

					texture: {
						value: THREE.ImageUtils.loadTexture( '../examples/img/smokeparticle.png' )
					}

				});


				var smoke0 = new SPE.Emitter({
					particleCount: 200,
					type: SPE.distributions.DISC,
					position: {
						value: new THREE.Vector3(-50,50,0),
						spread: new THREE.Vector3(0, 0, 0),
						radius: 50
					},
					velocity: {
						value: new THREE.Vector3( 0, 0, 0 )
					},
					size: {
						value: 40
					},
					color: {
						value: new THREE.Color("rgb(255,0,0)")
					},

					// this rotation is rotating the other emitter as well.
					// commenting out this rotation will cause the other emitter
					// (the green one)'s velocity to rotate even though it has no rotation
					rotation: {
						axis: new THREE.Vector3(0, 1, 1),
						angle: Math.PI * 2,
						static: false,
						center: new THREE.Vector3(50,0,0)
					},

					activeMultiplier: 1000
				});

				var smoke1 = new SPE.Emitter({
					particleCount: 50,
					position: {
						value: new THREE.Vector3(50,50,0),
						spread: new THREE.Vector3(100, 100, 100)
					},
					velocity: {
						value: new THREE.Vector3(0,50,0)
					},
					size: {
						value: 40
					},
					color: {
						value: new THREE.Color("rgb(0,255,0)")
					}
				});

				smokeGroup0.addEmitter(smoke0);
				smokeGroup0.addEmitter(smoke1);

				console.log( smoke0 );
				console.log( smoke1 );

				scene.add(smokeGroup0.mesh);
			}

			createCloud();

			var render = function() {

				for(var i=0; i < keyArray.length; i++) {
					// w
					if(keyArray[i] == 87) {
						phi += factor;
					}
					// s
					if(keyArray[i] == 83) {
						phi -= factor;
					}
					// a
					if(keyArray[i] == 65) {
						theta += factor;
					}
					// d
					if(keyArray[i] == 68) {
						theta -= factor;
					}
				}

				keyArray.length = 0;

				if(phi > Math.PI/2) {
					phi = Math.PI/2;
				}
				if(phi < -Math.PI/2) {
					phi = -Math.PI/2;
				}
				if(theta >= 2*Math.PI) {
					theta = theta - 2*Math.PI;
				}
				if(theta < 0) {
					theta = theta + 2*Math.PI;
				}

				camera.position.x = radius * Math.cos(theta) * Math.cos(phi);
				camera.position.y = radius * Math.sin(phi);
				camera.position.z = radius * Math.sin(theta) * Math.cos(phi);

				camera.lookAt(origin);

				smokeGroup0.tick();

				renderer.render(scene, camera);
				requestAnimationFrame(render);
			};

			render();
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<meta charset="UTF-8">
	<html>
	<head>
	<title>Demo</title>
	<script language = 'javascript' src = "../examples/js/THREE-r72.js" type = 'text/javascript'></script>
	<script type="text/javascript" src="../src/SPE.js"></script>
	<script type="text/javascript" src="../src/helpers/SPE.TypedArrayHelper.js"></script>
	<script type="text/javascript" src="../src/helpers/SPE.ShaderAttribute.js"></script>
	<script type="text/javascript" src="../src/shaders/SPE.shaderChunks.js"></script>
	<script type="text/javascript" src="../src/shaders/SPE.shaders.js"></script>
	<script type="text/javascript" src="../src/core/SPE.utils.js"></script>
	<script type="text/javascript" src="../src/core/SPE.Group.js"></script>
	<script type="text/javascript" src="../src/core/SPE.Emitter.js"></script>

	<style type="text/css">
	body {
	margin: 0;
	overflow: hidden;
	}
	</style>

	</head>
	<body id="body">
	<script type='text/javascript'>
	document.addEventListener("keydown", handleKeyDown, false);
	var keyArray = [];

	function handleKeyDown(event) {
	keyArray.push(event.keyCode);
	}

	var width = window.innerWidth;
	var height = window.innerHeight;

	var scene = new THREE.Scene();
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(width, height);
	document.body.appendChild(renderer.domElement);

	var light = new THREE.AmbientLight(0x444444);
	scene.add(light);

	var camera = new THREE.OrthographicCamera(width/-2, width/2, height/2, height/-2, 1, 1000);
	var theta = Math.PI/2;
	var phi = 0;
	var radius = 400;
	var origin = new THREE.Vector3(0,0,0);
	var factor = 0.01;

	var geometry = new THREE.PlaneGeometry(700, 700);
	var material = new THREE.MeshLambertMaterial({color: 0xffffff, side: THREE.DoubleSide});
	var plane = new THREE.Mesh(geometry, material);
	plane.rotation.x = Math.PI/2;

	scene.add(plane);

	var smokeGroup0;

	SPE.valueOverLifetimeLength = 3;

	function createCloud() {

	smokeGroup0 = new SPE.Group({

	texture: {
	value: THREE.ImageUtils.loadTexture( '../examples/img/smokeparticle.png' )
	}

	});


	var smoke0 = new SPE.Emitter({
	particleCount: 200,
	type: SPE.distributions.DISC,
	position: {
	value: new THREE.Vector3(-50,50,0),
	spread: new THREE.Vector3(0, 0, 0),
	radius: 50
	},
	velocity: {
	value: new THREE.Vector3( 0, 0, 0 )
	},
	size: {
	value: 40
	},
	color: {
	value: new THREE.Color("rgb(255,0,0)")
	},

	// this rotation is rotating the other emitter as well.
	// commenting out this rotation will cause the other emitter
	// (the green one)'s velocity to rotate even though it has no rotation
	rotation: {
	axis: new THREE.Vector3(0, 1, 1),
	angle: Math.PI * 2,
	static: false,
	center: new THREE.Vector3(50,0,0)
	},

	activeMultiplier: 1000
	});

	var smoke1 = new SPE.Emitter({
	particleCount: 50,
	position: {
	value: new THREE.Vector3(50,50,0),
	spread: new THREE.Vector3(100, 100, 100)
	},
	velocity: {
	value: new THREE.Vector3(0,50,0)
	},
	size: {
	value: 40
	},
	color: {
	value: new THREE.Color("rgb(0,255,0)")
	}
	});

	smokeGroup0.addEmitter(smoke0);
	smokeGroup0.addEmitter(smoke1);

	console.log( smoke0 );
	console.log( smoke1 );

	scene.add(smokeGroup0.mesh);
	}

	createCloud();

	var render = function() {

	for(var i=0; i < keyArray.length; i++) {
	// w
	if(keyArray[i] == 87) {
	phi += factor;
	}
	// s
	if(keyArray[i] == 83) {
	phi -= factor;
	}
	// a
	if(keyArray[i] == 65) {
	theta += factor;
	}
	// d
	if(keyArray[i] == 68) {
	theta -= factor;
	}
	}

	keyArray.length = 0;

	if(phi > Math.PI/2) {
	phi = Math.PI/2;
	}
	if(phi < -Math.PI/2) {
	phi = -Math.PI/2;
	}
	if(theta >= 2*Math.PI) {
	theta = theta - 2*Math.PI;
	}
	if(theta < 0) {
	theta = theta + 2*Math.PI;
	}

	camera.position.x = radius * Math.cos(theta) * Math.cos(phi);
	camera.position.y = radius * Math.sin(phi);
	camera.position.z = radius * Math.sin(theta) * Math.cos(phi);

	camera.lookAt(origin);

	smokeGroup0.tick();

	renderer.render(scene, camera);
	requestAnimationFrame(render);
	};

	render();
	</script>
	</body>
	</html>