JPeer264/collideAndBounce.html

## collideAndBounce.html
<!DOCTYPE HTML>
<html>
    <head>
        <title>Collide and bounce on CrossZone</title>
        <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta charset="utf-8">
        <style type="text/css">
            body {
                background-color: #fff;
                margin: 0;
                padding: 0;
            }

            #container {
                width: 1000px;
                margin: 0 auto;
            }

            #testCanvas {
                background: #000;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <canvas id="testCanvas"></canvas>
        </div>
        <script src="proton-2.1.0.min.js"></script>
        <script>
            var canvas;
            var context;
            var proton;
            var renderer;
            var emitter;

            Main();

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

                createProton();
                tick();
            }

            function createProton() {
                proton             = new Proton;
                emitter            = new Proton.Emitter();

                // set how much particles should be generated
                emitter.rate = new Proton.Rate(new Proton.Span(8, 20));

                // initialize the particles with some values you want
                emitter.addInitialize(new Proton.Mass(1));
                emitter.addInitialize(new Proton.Radius(30, 40));

                // add a collision for each particle
                emitter.addBehaviour(new Proton.Collision(emitter));

                // add a random drift, that they are a bit moving in this example
                emitter.addBehaviour(new Proton.RandomDrift(30, 30, .05));

                // adds the behaviour for the moving area
                emitter.addBehaviour(new Proton.CrossZone(new Proton.RectZone(0, 0, canvas.width, canvas.height), 'bound'));

                // lets draw them all in the center
                emitter.p.x = canvas.width / 2;
                emitter.p.y = canvas.height / 2;

                // let them emit just once and add it to proton
                emitter.emit('once');
                proton.addEmitter(emitter);

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

                renderer.start();
            }

            function tick() {
                requestAnimationFrame(tick);

                proton.update();
            }
        </script>
    </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Collide and bounce on CrossZone</title>
	<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta charset="utf-8">
	<style type="text/css">
	body {
	background-color: #fff;
	margin: 0;
	padding: 0;
	}

	#container {
	width: 1000px;
	margin: 0 auto;
	}

	#testCanvas {
	background: #000;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<canvas id="testCanvas"></canvas>
	</div>
	<script src="proton-2.1.0.min.js"></script>
	<script>
	var canvas;
	var context;
	var proton;
	var renderer;
	var emitter;

	Main();

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

	createProton();
	tick();
	}

	function createProton() {
	proton = new Proton;
	emitter = new Proton.Emitter();

	// set how much particles should be generated
	emitter.rate = new Proton.Rate(new Proton.Span(8, 20));

	// initialize the particles with some values you want
	emitter.addInitialize(new Proton.Mass(1));
	emitter.addInitialize(new Proton.Radius(30, 40));

	// add a collision for each particle
	emitter.addBehaviour(new Proton.Collision(emitter));

	// add a random drift, that they are a bit moving in this example
	emitter.addBehaviour(new Proton.RandomDrift(30, 30, .05));

	// adds the behaviour for the moving area
	emitter.addBehaviour(new Proton.CrossZone(new Proton.RectZone(0, 0, canvas.width, canvas.height), 'bound'));

	// lets draw them all in the center
	emitter.p.x = canvas.width / 2;
	emitter.p.y = canvas.height / 2;

	// let them emit just once and add it to proton
	emitter.emit('once');
	proton.addEmitter(emitter);

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

	renderer.start();
	}

	function tick() {
	requestAnimationFrame(tick);

	proton.update();
	}
	</script>
	</body>
	</html>