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:

1<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:

1import SmokeMachine from '@bijection/smoke'

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

Usage

Short Example

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

Copy-Pastable Example

1<canvas id="canvas"></canvas>
2<script src="smoke.js"></script>
3<script>
4	var canvas = document.getElementById('canvas')
5	var ctx = canvas.getContext('2d')
6	canvas.width = 1000
7	canvas.height = 1000
8
9	var party = SmokeMachine(ctx, [54, 16.8, 18.2])
10
11	party.start() // start animating
12
13	party.addSmoke(500,500,10) // wow we made smoke
14
15	setTimeout(function(){
16
17		party.stop() // stop animating
18
19		party.addSmoke(600,500,100)
20		party.addSmoke(500,600,20)
21
22		for(var i=0;i<10;i++){
23			party.step(10) // pretend 10 ms pass and rerender
24		}
25
26		setTimeout(function(){
27			party.start()
28		},1000)
29
30	},1000)
31</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

1var 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