Smoke.js : Javascript Smoke Effect

Demo

You can play with a live demo here →

Installation

Basic

Copy the smoke.js file into your project and use it with a script tag:

<script src="smoke.js"></script>

That defines a SmokeMachine global that you can use to make smoke (see examples below).

Package Manager

You can also use yarn or npm:

yarn add @bijection/smoke 

npm add @bijection/smoke 

Thern you can import or require smoke.js like this:

import SmokeMachine from '@bijection/smoke'

var SmokeMachine = require('@bijection/smoke')

Usage

Short Example

var ctx = canvas.getContext('2d')  var party = SmokeMachine(ctx) party.addSmoke(500,500) party.start()

Copy-Pastable Example

<canvas id="canvas"></canvas> <script src="smoke.js"></script> <script> 	var canvas = document.getElementById('canvas') 	var ctx = canvas.getContext('2d') 	canvas.width = 1000 	canvas.height = 1000  	var party = SmokeMachine(ctx, [54, 16.8, 18.2])  	party.start() // start animating  	party.addSmoke(500,500,10) // wow we made smoke  	setTimeout(function(){  		party.stop() // stop animating  		party.addSmoke(600,500,100) 		party.addSmoke(500,600,20)  		for(var i=0;i<10;i++){ 			party.step(10) // pretend 10 ms pass and rerender 		}  		setTimeout(function(){ 			party.start() 		},1000)  	},1000) </script>

API

SmokeMachine(context, [r,g,b])

Returns a smoke machine that makes smoke.

• context — the context of the canvas we wanna draw smoke on
• [r,g,b] — (optional) the color we want the smoke to be

var party = SmokeMachine(context, [1,5,253])

party.start()

Start Animating!!

party.stop()

Stop animating :(

party.addSmoke(x,y,numberofparticles)

• x,y — the coords at which the smoke should be created in the canvas
• numberofparticles — more makes more smoke

party.step(milliseconds)

redaws the smoke as if milliseconds milliseconds have passed