<!DOCTYPE HTML>
<html>
<head>
<title>eightDiagrams</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: #333333;
margin: 0px;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
}
#testCanvas {
background: #000;
}
</style>
</head>
<body>
<div id="container">
<canvas id="testCanvas"></canvas>
</div>
<script src="../../lib/requestAnimationFrame.min.js"></script>
<script src="../../lib/stats.min.js"></script>
<script src="../../lib/TweenLite.min.js"></script>
<script src="//localhost:3001/build/proton.web.js"></script>
<script>
var proton;
var renderer;
var emitter1, emitter2;
var stats;
var canvas;
var attractionBehaviours = [];
var conf = { radius: 170, tha: 0 };
var mouseObj;
Main();
function Main() {
initCanvas();
addStats();
createProton();
tick();
}
function initCanvas() {
canvas = document.getElementById("testCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener('mousedown', mousedownHandler, false);
canvas.addEventListener('mouseup', mouseupHandler, false);
}
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() {
mouseObj = {
x: canvas.width / 2,
y: canvas.height / 2
};
proton = new Proton;
emitter1 = createImageEmitter(canvas.width / 2 + conf.radius, canvas.height / 2, '#4F1500', '#0029FF');
emitter2 = createImageEmitter(canvas.width / 2 - conf.radius, canvas.height / 2, '#004CFE', '#6600FF');
renderer = new Proton.WebGlRenderer(canvas);
renderer.blendFunc("SRC_ALPHA", "ONE");
proton.addRenderer(renderer);
window.onresize = function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
renderer.resize(canvas.width, canvas.height);
}
}
function createImageEmitter(x, y, color1, color2) {
var emitter = new Proton.Emitter();
emitter.rate = new Proton.Rate(new Proton.Span(5, 7), new Proton.Span(.01, .02));
emitter.addInitialize(new Proton.Mass(1));
emitter.addInitialize(new Proton.Life(1));
emitter.addInitialize(new Proton.Body(['image/particle.png'], 32));
emitter.addInitialize(new Proton.Radius(40));
emitter.addBehaviour(new Proton.Alpha(1, 0));
emitter.addBehaviour(new Proton.Color(color1, color2));
emitter.addBehaviour(new Proton.Scale(3.5, 0.1));
emitter.addBehaviour(new Proton.CrossZone(new Proton.RectZone(0, 0, canvas.width, canvas.height), 'dead'));
var attractionBehaviour = new Proton.Attraction(mouseObj, 0, 0);
attractionBehaviours.push(attractionBehaviour);
emitter.addBehaviour(attractionBehaviour);
emitter.p.x = x;
emitter.p.y = y;
emitter.emit();
proton.addEmitter(emitter);
return emitter;
}
function emitterRun() {
emitter1.p.x = canvas.width / 2 + conf.radius * Math.sin(Math.PI / 2 + conf.tha);
emitter1.p.y = canvas.height / 2 + conf.radius * Math.cos(Math.PI / 2 + conf.tha);
emitter2.p.x = canvas.width / 2 + conf.radius * Math.sin(-Math.PI / 2 + conf.tha);
emitter2.p.y = canvas.height / 2 + conf.radius * Math.cos(-Math.PI / 2 + conf.tha);
conf.tha += .1;
}
function mousedownHandler(e) {
for (var i = 0; i < 2; i++)
attractionBehaviours[i].reset(mouseObj, 120, 200);
TweenLite.to(conf, 2, {
radius: 10, onComplete: function () {
TweenLite.to(conf, 1, { radius: 170 });
}
});
}
function mouseupHandler(e) {
setTimeout(function () {
for (var i = 0; i < 2; i++)
attractionBehaviours[i].reset(mouseObj, 0, 0);
}, 1000);
}
function tick() {
requestAnimationFrame(tick);
stats.begin();
emitterRun();
proton.update();
proton.stats.update(2, document.body);
stats.end();
}
</script>
</body>
</html>