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
Thern 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
redaws the smoke as if milliseconds milliseconds have passed
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent