Particle System
Let's make a JavaScript particle system.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas;
var timer;
var emitter = new Vector();
emitter.set(400, 400);
function Vector() {
this.x = 0;
this.y = 0;
//this.z = 0;
this.set = function(X,Y) {
with(this) {
x = X;
y = Y;
//z = Z;
}
}
this.add = function (vectorTwo) {
this.x = this.x + vectorTwo.x;
this.y = this.y + vectorTwo.y;
this.z = this.z + vectorTwo.z;
}
};
function Particle() {
this.size = Math.random * 10 + 15;
this.particle = canvas.image("http://eu.rymimg.com/lk/s/l/0553c2d40adbf334e586161b21b4c637/2309223.jpg", emitter.x, emitter.y, this.size, this.size);
this.loc = new Vector();
this.vel = new Vector();
this.acc = new Vector();
this.life = Math.random() * 250;
this.init = function() {
with(this) {
particle.rotate(Math.random()*360);
acc.set(0, 0.05);
vel.set(Math.random() * 4 - 2, Math.random() * 3 - 1);
}
}
this.update = function() {
with(this) {
vel.add(acc);
loc.add(vel);
life -= 1;
particle.animate({x:loc.x, y.loc.y}, 39);
}
}
this.dead = function() {
if(this.life < 0) {
return true;
} else {
return false;
}
}
}
function ParticleSystem() {
this.particles = new Array();
this.init = function(num) {
for (var i = 0; i < num; i++) {
this.particles[i] = new Particle();
this.particles[i].init();
}
}
this.run = function(){
with(this){
timer = setInterval(function(){
for (i=particles.length -1; i>=0; i--) {
if(particles[i].dead()) {
particles[particles.length -1].particle.remove();
particles.pop();
...