I've been playing around with Particle Emitters. Those are the cool little animations like star bursts and flowing bubbles that you see in games.
I used the following as a blank canvas for me to work with:
(notice you will need particleFunctions,js andparticleEffects.js which are coming in part II and III)
<html>
<head>
<scriptlanguage=javascript src="particleFunctions.js"></script>
<scriptlanguage=javascript src="particleEffects.js"></script>
</head>
<body>
<canvas style="width:300px; height:300px;border:1px solidblack;background:black;" width=300 height=300></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var particles = [];
emitters = new Array();
emitters.push(new WhirlEmitter(new Vector(canvas.width/2+5,canvas.height/2),'green'));
emitters.push(new BeamEmitter(newVector(canvas.width/2,canvas.height/2),'green'));
function loop() {
clear();
update();
draw();
queue();
}
function clear() {
context.clearRect(0, 0, canvas.width,canvas.height);
}
function queue() {
window.requestAnimationFrame(loop);
}
function update() {
addNewParticles();
plotParticles(canvas.width,canvas.height);
}
function draw() {
drawParticles();
}
loop();
</script>
</body>
</html>