Author: | bijection |
---|---|
Views Total: | 15,458 views |
Official Page: | Go to website |
Last Update: | April 2, 2019 |
License: | MIT |
Preview:

Description:
smoke.js is a fancy JavaScript library which allows to render interactive, realistic smoke animations using HTML5 canvas
and a little JavaScript.
How to use it:
Download and place the smoke.js JavaScript file into your HTML page where needed.
<script src="smoke.js"></script>
Create an html5 canvas element on which you want to apply the smoke animation.
<canvas id="canvas"></canvas>
Create the smoke animation.
var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') canvas.width = innerWidth canvas.height = innerHeight // smokemachine(context, [r,g,b]) var demo = smokemachine(ctx, [54, 16.8, 18.2])
Start the animation.
demo.start()
Stop the animation.
demo.stop()
Add a new smoke animation.
// addsmoke(x,y,numberofparticles) demo.addsmoke(...)
// redraw the smoke animaion after 2 seconds demo.step(2000)
Make the smoke animation react to your mouse move.
onmousemove = function (e) { var x = e.clientX var y = e.clientY var n = .5 var t = Math.floor(Math.random() * 200) + 3800 party.addsmoke(x, y, n, t) }
Changelog:
04/02/2019
- Fixes ie11 incompatible syntax
09/14/2018
- Fix global variable name usage in function
thank you ! awesome !
Hello, is there a way for the mousemove to make the smoke of a smokemachine disperse when approaching (like in this example https://codepen.io/loktar00/pen/CHpGo)