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).
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')
var ctx = canvas.getContext('2d')
var party = SmokeMachine(ctx)
party.addSmoke(500,500)
party.start()
<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>
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])
Start Animating!!
Stop animating :(
- x,y โ the coords at which the smoke should be created in the canvas
- numberofparticles โ more makes more smoke
redraws the smoke as if milliseconds
milliseconds have passed