pEng.js, a HTML5 Particle Engine

Demo





How to Use

  1. Download pEng.js and include it in your script. <script src="peng.js"></script>
  2. Initialize the engine. Let it know the handle for your canvas element and its context. pEng.init(canvas, ctx);
  3. Make particles in your game loop. pEng.createParticles(type, x, y, count, radius);
  4. Update particles in your game loop. pEng.update(mod);
  5. Draw particles in your render loop. pEng.draw();

Define Your Own Particles

Particle definitions are defined in pEng.particleInfo. Below is a list of attributes that can be defined for a particle. None are required. If a particle definition is left blank, you'll get a 1px black dot that doesn't move.

Define a particle like so:
pEng.particleInfo.lava = {
	color: 	{r: 210, g: 40, b: 10},
	size: 3,
	fadeRate: 3,
	shape: 'circle',
	weight: 3,
	elasticity: .3,
	speed: 150,
	floor: 5,
	yVel: -1
}
Result

Random Attributes

We can spice up our lava particle definition by defining multiple options for attributes. We do this by listing them in an array. When a particle is instantiated, attributes will be chosen at random.

pEng.particleInfo.lava = {
	color: [
		{r: 255, g: 190, b: 55},
		{r: 215, g:55, b: 25},
		{r: 250, g: 70, b: 10},
		{r: 210, g: 40, b: 10}
	],
	size: [1, 2, 4],
	fadeRate: [2, 4],
	shape: 'circle',
	weight: [2, 4],
	elasticity: [.2, .3, .4, .5],
	speed: [100, 150, 200],
	floor: 5,
	yVel: -1
}
Result

Layers

Let's get even more advanced. We want our lava to emit smoke without making a separate particle definition. Smoke needs to be grey and floaty. We can achieve this by adding layers to our particle:

pEng.particleInfo.lava = {
	layers: {
		lava: {
			color: [
				{r: 255, g: 190, b: 55},
				{r: 215, g:55, b: 25},
				{r: 250, g: 70, b: 10},
				{r: 210, g: 40, b: 10}
			],
			size: [1, 2, 4],
			fadeRate: [2, 4],
			weight: [2, 4],
			elasticity: [.2, .3, .4, .5],
			speed: [100, 150, 200],
			floor: 5,
			yVel: -1
		},
		sparks: {
			color: [
				{r: 255, g: 190, b: 55},
				{r: 250, g: 70, b: 10},
			],
			size: [1, 2, 3],
			fadeRate: [.25, .5],
			opacity: [.5, .75, 1],
			weight: [.5, 1],
			speed: [500, 750],
			yVel: -1
		},
		smoke: {
			color: [
				{r: 75, g: 75, b: 75}, 
				{r: 50, g: 50, b: 50}, 
				{r: 25, g: 25, b: 25}
			],
			speed: 150,
			weight: [-2, -4],
			fadeRate: 2,
			opacity: [ .5, .75],
			size: [3, 4, 5, 6, 7]
		}
	},
	shape: 'circle' //attributes defined outside of the layers will be applied only if they are not set within the chosen layer
}
Result

Questions & Comments

Email me! Link in footer. You can also find me on reddit: /u/samlancashire