panxia/pointzone.html

## pointzone.html
<!DOCTYPE HTML>
<html>
	<head>
		<title>proton.js-zone-PointZone</title>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				background-color: #333333;
				margin: 0px;
				overflow: hidden;
			}
			#container {
				width: 1003px;
				margin-top: 50px;
				margin-left: -501px;
				left: 50%;
				position: absolute;
			}

			#testCanvas {
				background: #000;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<canvas id="testCanvas"></canvas>
		</div>
		<script src="../../lib/stats.min.js"></script>
		<script src="../../../build/proton-1.0.0.min.js"></script>
		<script src="js/color.min.js"></script>
		<script>
			var canvas;
			var context;
			var proton;
			var renderer;
			var emitter;
			var colorBehaviour;
			var stats;
			var tha;
			var hcolor = 0;

			Main();
			function Main() {
				canvas = document.getElementById("testCanvas");
				canvas.width = 1003;
				canvas.height = 610;
				context = canvas.getContext('2d');
				addStats();

				tha = 0;
				index = 0;
				createProton();
				tick();
			}

			function addStats() {
				stats = new Stats();
				stats.setMode(2);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.left = '0px';
				stats.domElement.style.top = '0px';
				document.getElementById('container').appendChild(stats.domElement);
			}

			function createProton() {
				proton = new Proton;
				emitter = new Proton.Emitter();
				//setRate
				emitter.rate = new Proton.Rate(new Proton.Span(2, 8), new Proton.Span(.01));
				//addInitialize
				emitter.addInitialize(new Proton.Position(new Proton.PointZone(0, 0)));
				emitter.addInitialize(new Proton.Mass(1));
				emitter.addInitialize(new Proton.Radius(6, 12));
				emitter.addInitialize(new Proton.Life(2));
				emitter.addInitialize(new Proton.V(new Proton.Span(0.3), new Proton.Span(0, 360), 'polar'));
				//addBehaviour
				emitter.addBehaviour(new Proton.Alpha(1, 0));
				emitter.addBehaviour(new Proton.Scale(.1, 1.3));
				var color1 = Color.parse("hsl(" + (hcolor % 360) + ", 100%, 50%)").hexTriplet();
				var color2 = Color.parse("hsl(" + ((hcolor + 50) % 360) + ", 100%, 50%)").hexTriplet();
				colorBehaviour = new Proton.Color(color1, color2);
				emitter.addBehaviour(colorBehaviour);
				emitter.addBehaviour(new Proton.CrossZone(new Proton.RectZone(0, 0, canvas.width, canvas.height), 'collision'));
				emitter.p.x = canvas.width / 2;
				emitter.p.y = canvas.height / 2;
				emitter.emit();
				//add emitter
				proton.addEmitter(emitter);

				//canvas renderer
				renderer = new Proton.Renderer('canvas', proton, canvas);
				renderer.start();

				//debug drawEmitter
				Proton.Debug.drawEmitter(proton, canvas, emitter);
			}

			function tick() {
				requestAnimationFrame(tick);
				stats.begin();

				//change color
				index++;
				if (index % 10 == 0) {
					hcolor++;
					var color1 = Color.parse("hsl(" + (hcolor % 360) + ", 100%, 50%)").hexTriplet();
					var color2 = Color.parse("hsl(" + ((hcolor + 50) % 360) + ", 100%, 50%)").hexTriplet();
					colorBehaviour.reset(color1, color2);
					index = 0;
				}

				tha += Math.PI / 200;
				var p = 300 * Math.sin(2 * tha)
				emitter.p.x = p * Math.cos(tha) + canvas.width / 2;
				emitter.p.y = p * Math.sin(tha) + canvas.height / 2;
				proton.update();
				stats.end();
			}
		</script>
	</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>proton.js-zone-PointZone</title>
	<meta charset="utf-8">
	<style type="text/css">
	body {
	background-color: #333333;
	margin: 0px;
	overflow: hidden;
	}
	#container {
	width: 1003px;
	margin-top: 50px;
	margin-left: -501px;
	left: 50%;
	position: absolute;
	}

	#testCanvas {
	background: #000;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<canvas id="testCanvas"></canvas>
	</div>
	<script src="../../lib/stats.min.js"></script>
	<script src="../../../build/proton-1.0.0.min.js"></script>
	<script src="js/color.min.js"></script>
	<script>
	var canvas;
	var context;
	var proton;
	var renderer;
	var emitter;
	var colorBehaviour;
	var stats;
	var tha;
	var hcolor = 0;

	Main();
	function Main() {
	canvas = document.getElementById("testCanvas");
	canvas.width = 1003;
	canvas.height = 610;
	context = canvas.getContext('2d');
	addStats();

	tha = 0;
	index = 0;
	createProton();
	tick();
	}

	function addStats() {
	stats = new Stats();
	stats.setMode(2);
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.top = '0px';
	document.getElementById('container').appendChild(stats.domElement);
	}

	function createProton() {
	proton = new Proton;
	emitter = new Proton.Emitter();
	//setRate
	emitter.rate = new Proton.Rate(new Proton.Span(2, 8), new Proton.Span(.01));
	//addInitialize
	emitter.addInitialize(new Proton.Position(new Proton.PointZone(0, 0)));
	emitter.addInitialize(new Proton.Mass(1));
	emitter.addInitialize(new Proton.Radius(6, 12));
	emitter.addInitialize(new Proton.Life(2));
	emitter.addInitialize(new Proton.V(new Proton.Span(0.3), new Proton.Span(0, 360), 'polar'));
	//addBehaviour
	emitter.addBehaviour(new Proton.Alpha(1, 0));
	emitter.addBehaviour(new Proton.Scale(.1, 1.3));
	var color1 = Color.parse("hsl(" + (hcolor % 360) + ", 100%, 50%)").hexTriplet();
	var color2 = Color.parse("hsl(" + ((hcolor + 50) % 360) + ", 100%, 50%)").hexTriplet();
	colorBehaviour = new Proton.Color(color1, color2);
	emitter.addBehaviour(colorBehaviour);
	emitter.addBehaviour(new Proton.CrossZone(new Proton.RectZone(0, 0, canvas.width, canvas.height), 'collision'));
	emitter.p.x = canvas.width / 2;
	emitter.p.y = canvas.height / 2;
	emitter.emit();
	//add emitter
	proton.addEmitter(emitter);

	//canvas renderer
	renderer = new Proton.Renderer('canvas', proton, canvas);
	renderer.start();

	//debug drawEmitter
	Proton.Debug.drawEmitter(proton, canvas, emitter);
	}

	function tick() {
	requestAnimationFrame(tick);
	stats.begin();

	//change color
	index++;
	if (index % 10 == 0) {
	hcolor++;
	var color1 = Color.parse("hsl(" + (hcolor % 360) + ", 100%, 50%)").hexTriplet();
	var color2 = Color.parse("hsl(" + ((hcolor + 50) % 360) + ", 100%, 50%)").hexTriplet();
	colorBehaviour.reset(color1, color2);
	index = 0;
	}

	tha += Math.PI / 200;
	var p = 300 * Math.sin(2 * tha)
	emitter.p.x = p * Math.cos(tha) + canvas.width / 2;
	emitter.p.y = p * Math.sin(tha) + canvas.height / 2;
	proton.update();
	stats.end();
	}
	</script>
	</body>
	</html>
No results found