Canvas Particles Emission - Snippet

Preview
HTML
CSS
JS

<canvas id="canvas"></canvas>

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
	
  overflow: hidden;
  background: #171819;
}

var canvas = document.getElementById('canvas'),
		ctx = canvas.getContext('2d'),
		window_width = window.innerWidth,
		window_height = window.innerHeight;

// Set canvas's width and height to that
// of window (the view port)
canvas.width = window_width;
canvas.height = window_height;

// Just a random object name to store some utility
// functions that we can use later
var $$ = {
	// Get a random integer from a range of ints
	// Usage: $$.randomInt(4, 8) -> would return
	// 4 or 5 or 6 or 7 or 8
	randomInt: function(min, max) {
		return Math.floor( Math.random() * (max - min + 1) + min );
	}
};

// Pool of particles. Basically an array that stores all
// our particles
var particles = [];

// The object that'll serve as the prototype
// of every particle we create!
var Particle = {
	x: window_width/2,
	y: window_height/2,
	x_speed: 10,
	y_speed: 10,
	radius: 10,
	_position: {},
	
	// Draw the particle
	draw: function() {
		// Begin Drawing Path
		ctx.beginPath();
		// Background color for the object that we'll draw
		ctx.fillStyle = this.bg_color;
		// Draw the arc
		// ctx.arc(x, y, radius, start_angle, end_angle, anticlockwise)
		// angle are in radians
		// 360 degrees = 2π radians or 1 radian = 360/2π = 180/π degrees
		ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
		// Close Drawing Path
		ctx.closePath();
		// Fill the canvas with the arc
		ctx.fill();
	},
	
	// These are just some helpers that
	// I've created, got no use in this
	// creation. These might give you some idea
	// to do some funky things .. Who knows ? :)
	trackPosition: function() {
		var position = {x: this.x, y: this.y};
		
		this._position.x = this.x;
		this._position.y = this.y;
	},
	getPosition: function() {
		return this._position;
	}
};

function createParticle() {
	// Create a particle object and use `Particle`
	// as the prototype of the object. I hope you know
	// about prototypes right ? Prototypal Inheritance, nope ? :S
	var particle = Object.create(Particle);
	
	// Random number between -5 and 5 using
	// our utility function, that was defined above.
	particle.x_speed = $$.randomInt(-3, 3);
	particle.y_speed = $$.randomInt(-3, 3);
	
	// Push the newly created particle
	// into our master array
	particles.push(particle);
}

function repaint() {
	// Clear the entire Canvas
	ctx.clearRect(0, 0, window_width, window_height);
	
	// Re-draw all particles we have in our bag!
	for (var i = 0; i < particles.length; i++) {
		var particle = particles[i];
		
		// Set the new particle's background color
		// HSLA FTW!
		particle.bg_color = "hsla("+i+", 80%, 50%, 0.5)";
		
		// This restriction makes sure
		// that your computer does not
		// run out of RAM and hence slows down.
		if (particles.length > 500) {
			particles.shift();
		}
		
		particle.draw();
		
		// Changing x and y co-ordinates which
		// are random (generated in createParticle())
		//
		// This is cool, as we get different
		// speed for each particles then!
		particle.x = particle.x + particle.x_speed;
		particle.y = particle.y + particle.y_speed;
		
		// Track new position
		// Just a helper that might give you some
		// cool ideas to make some unique twists to this
		// experiment.
		particle.trackPosition();
	}
}

// Magic method for animation!
setInterval(function() {
	createParticle();
	repaint();
}, 1000/60);