ergeshov/smoke.js

Small but good 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