Interactive Smoke Effect With JavaScript and Canvas – smoke.js

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