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).
yarn or npm
You can also use yarn or npm:
yarn add @bijection/smoke
npm add @bijection/smoke
Then 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)
redraws the smoke as if milliseconds milliseconds have passed
35 Nov 30, 2022
571 Nov 21, 2022
808 Dec 18, 2022
1.8k Jan 4, 2023
96 Dec 24, 2022
237 Nov 18, 2022
518 Dec 24, 2022
793 Dec 27, 2022
89 Sep 20, 2022
567 Oct 31, 2022