Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
108 lines (93 sloc) 3 KB
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HAF &bull; HTML5 Animation Framework &bull; Particles</title>
<script src="js/oz.js"></script>
<script src="js/haf.js"></script>
<script src="js/particle.js"></script>
<script src="js/benchmark.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Particles: <select id="actors" onchange="changeActors()">
<option value="10">10</option>
<option value="50">50</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
Particle type: <select id="type" onchange="changeType()">
<option value="0">Square</option>
<option value="1">Circle</option>
</select>
Clear: <select id="clear" onchange="changeClear()">
<option value="0">Whole canvas</option>
<option value="1">Nothing</option>
<option value="2">Dirty actors</option>
</select>
Dirty actors: <select id="dirty" onchange="changeDirty()">
<option value="0">All</option>
<option value="1">Changed only</option>
</select>
<script>
var particles = 0;
var maxParticles = 0;
var angle = 0;
var engine = new HAF.Engine([512, 512]);
engine.getContainer().id = "engine";
document.body.insertBefore(engine.getContainer(), document.body.firstChild);
engine.addLayer("main");
var monitor = new HAF.Monitor.Sim(engine, [500, 100]);
document.body.appendChild(monitor.getContainer());
var monitor = new HAF.Monitor.Draw(engine, [500, 100]);
document.body.appendChild(monitor.getContainer());
OZ.Event.add(engine, "tick", function() {
var type = parseInt(selectType.value);
var amount = Math.min(5, maxParticles - particles);
// var angle = Math.random()* 2 * Math.PI;
for (var i=0;i<amount;i++) {
var x = Math.random() * 512;
var y = Math.random() * 512;
var speed = 30 + 30*Math.random();
var velocity = [speed * Math.cos(angle), speed * Math.sin(angle)];
var actor = new Particle([256, 256], {velocity: velocity, size:4, type:type, decay:0.3});
engine.addActor(actor, "main");
particles++;
}
angle = (angle+1)%360;
});
OZ.Event.add(null, "death", function(e) {
engine.removeActor(e.target, "main");
particles--;
});
var selectActors = OZ.$("actors");
var selectType = OZ.$("type");
var selectClear = OZ.$("clear");
var selectDirty = OZ.$("dirty");
var actors = [];
var changeActors = function() {
// engine.removeActors("main");
// particles = 0;
maxParticles = parseInt(selectActors.value);
}
var changeType = function() {
changeActors();
}
var changeClear = function() {
var clear = parseInt(selectClear.value);
engine._layers["main"].clear = clear;
}
var changeDirty = function() {
var dirty = parseInt(selectDirty.value);
engine._layers["main"].dirty = dirty;
}
changeClear();
changeDirty();
changeActors();
engine.start();
</script>
</body>
</html>